Merge branch 'main' into docs/card-pattern-explanation

.changeset/curly-jobs-eat.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-tabs>`: added support for rtl language overflow scroll buttons

.changeset/curly-ways-march.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+React: add generated react wrappers to NPM package

.changeset/eager-dolls-wear.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-site-status>`: automatically fetch status for the current domain

.changeset/plenty-rabbits-scream.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-card>`: hide header, body, or footer regions when they have no content

.changeset/shy-houses-arrive.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-card>`: applied heading font to card headings

.changeset/spicy-planes-lead.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-code-block>`: corrected 'show more' button styles

.changeset/tough-pens-brake.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-tag>`: ensure correct font-family is used

.changeset/wet-feet-pull.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-card>`: removes landmark semantics from card, simplifying page navigation for screen reader users

.github/workflows/test.yml

@@ -35,7 +35,8 @@ jobs:
 
       - name: Install dependencies
         run: npm ci --prefer-offline
-
+      - name: Install Playwright Browsers
+        run: npx playwright install --with-deps
       - name: Lint
         id: lint
         run: npm run lint

.github/workflows/validate-pr.yml

@@ -0,0 +1,25 @@
+name: Validate PRs
+
+on:
+  pull_request:
+    types:
+      - opened
+      - reopened
+      - synchronize
+      - edited
+
+jobs:
+  validate:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: '20'
+          cache: 'npm'
+      - run: npm i semantic-release @changesets/read --prefer-offline
+      - uses: actions/github-script@v7
+        with:
+          script: |
+            const { validate } = await import('${{ github.workspace }}/scripts/validate-prs.js');
+            await validate({ context });

.gitignore

@@ -1,14 +1,18 @@
 # Dependencies
 node_modules
 .wireit
+.rollup.cache
+.cache
 
 # Ignore compiled files in webroot
 _site
 docs/pfe.min*
+docs/assets/playgrounds/
 
 # Build artifacts
 elements/*/*.js
 elements/*/test/*.js
+react
 lib/**/*.js
 !elements/**/demo/*.css
 *.map
@@ -92,3 +96,4 @@ $RECYCLE.BIN/
 *.lnk
 
 !declaration.d.ts
+docs/assets/playgrounds/rh-playground.js

.markdownlint-cli2.mjs

@@ -5,23 +5,23 @@ export default {
     description: 'Require changesets to use the correct package name',
     tags: ['frontmatter'],
     function({ name, frontMatterLines, ...rest }, onError) {
-      const yaml = YAML.load(frontMatterLines.filter(Boolean).filter(x => x !== '---'))
+      const yaml = YAML.load(frontMatterLines.filter(Boolean).filter(x => x !== '---'));
       for (const [key, value] of Object.entries(yaml)) {
-        if (['patch','minor','major'].includes(value)) {
+        if (['patch', 'minor', 'major'].includes(value)) {
           if (key !== '@rhds/elements') {
             onError({
               lineNumber: 2,
               detail: `incorrect package name ${key}`,
-            })
+            });
           }
         }
       }
-    }
+    },
   }],
   dot: true,
   files: './changeset/*.md',
   config: {
-    default: false,
+    'default': false,
     'markdownlint-changeset-packagename': true,
-  }
-}
+  },
+};

.nvmrc

@@ -1 +1 @@
-v18.12.1
+v20.10.0

.stylelintrc.yml

@@ -1,4 +1,7 @@
-extends: stylelint-config-standard
+extends:
+  - stylelint-config-standard
+  - stylelint-stylistic/config
+
 ignoreFiles:
   - node_modules/**/*
 
@@ -16,18 +19,6 @@ rules:
     - ignoreShorthands:
         - /grid/
 
-  # TODO: migrate the following paragraph to stylelint-stylistic
-  # see https://github.com/elirasza/stylelint-stylistic/tree/main/lib/rules/indentation
-  string-quotes: double
-  selector-combinator-space-after: always
-  selector-combinator-space-before: always
-  indentation:
-   - 2
-   - indentInsideParens: 'once-at-root-twice-in-block'
-  max-line-length:
-    - 100
-    - ignorePattern: /--rh-font-family-/
-
   number-max-precision: 6
   no-descending-specificity:
     - true
@@ -49,18 +40,94 @@ rules:
     - ignorePseudoElements:
       - /part(.*)/
 
+  stylistic/string-quotes: double
+  stylistic/selector-combinator-space-after: always
+  stylistic/selector-combinator-space-before: always
+  stylistic/indentation:
+   - 2
+   - indentInsideParens: 'once-at-root-twice-in-block'
+  stylistic/max-line-length:
+    - 100
+    - ignorePattern: /--rh-font-family-/
+
   rhds/token-values: true
 
+  rhds/no-unknown-token-name:
+    - true
+    - migrations:
+      # reds
+      --rh-color-red-50: --rh-color-red-10
+      --rh-color-red-100: --rh-color-red-20
+      --rh-color-red-200: --rh-color-red-30
+      --rh-color-red-300: --rh-color-red-40
+      --rh-color-red-400: --rh-color-red-50
+      --rh-color-red-500: --rh-color-red-50
+      --rh-color-red-600: --rh-color-red-60
+      --rh-color-red-700: --rh-color-red-60
+      --rh-color-red-800: --rh-color-red-70
+      # oranges
+      --rh-color-orange-50: --rh-color-orange-10
+      --rh-color-orange-100: --rh-color-orange-30
+      --rh-color-orange-300: --rh-color-orange-40
+      --rh-color-orange-500: --rh-color-orange-60
+      --rh-color-orange-700: --rh-color-orange-70
+      # yellows (previously golds)
+      --rh-color-gold-50: --rh-color-yellow-10
+      --rh-color-gold-400: --rh-color-yellow-40
+      --rh-color-gold-600: --rh-color-yellow-70
+      # greens
+      --rh-color-green-50: --rh-color-green-10
+      --rh-color-green-100: --rh-color-green-20
+      --rh-color-green-500: --rh-color-green-60
+      --rh-color-green-600: --rh-color-green-70
+      # teals (previously cyans)
+      --rh-color-cyan-50: --rh-color-teal-10
+      --rh-color-cyan-100: --rh-color-teal-30
+      --rh-color-cyan-300: --rh-color-teal-50
+      --rh-color-cyan-400: --rh-color-teal-60
+      --rh-color-cyan-500: --rh-color-teal-70
+      # blues
+      --rh-color-blue-50: --rh-color-blue-10
+      --rh-color-blue-100: --rh-color-blue-20
+      --rh-color-blue-200: --rh-color-blue-30
+      --rh-color-blue-250: --rh-color-blue-40
+      --rh-color-blue-400: --rh-color-blue-50
+      --rh-color-blue-500: --rh-color-blue-60
+      --rh-color-blue-600: --rh-color-blue-70
+      # purples
+      --rh-color-purple-50: --rh-color-purple-10
+      --rh-color-purple-100: --rh-color-purple-20
+      --rh-color-purple-300: --rh-color-purple-40
+      --rh-color-purple-500: --rh-color-purple-60
+      --rh-color-purple-700: --rh-color-purple-70
+      # grays
+      --rh-color-gray-05: --rh-color-gray-10
+      --rh-color-gray-10: --rh-color-gray-20
+      --rh-color-gray-20: --rh-color-gray-30
+      --rh-color-gray-30: --rh-color-gray-40
+      --rh-color-gray-40: --rh-color-gray-50
+      --rh-color-gray-50: --rh-color-gray-60
+      --rh-color-gray-60: --rh-color-gray-70
+      --rh-color-gray-70: --rh-color-gray-80
+      --rh-color-gray-80: --rh-color-gray-90
+      --rh-color-gray-90: --rh-color-gray-95
+      --rh-color-black: --rh-color-gray-100
+
+  media-feature-range-notation: prefix
+
 plugins:
   - ./node_modules/@rhds/tokens/plugins/stylelint.cjs
+  - stylelint-stylistic
 
 overrides:
   - files:
       - docs/**/*.scss
     defaultSeverity: warning
     extends: stylelint-config-standard-scss
     rules:
-      max-line-length:
+      stylistic/block-closing-brace-newline-after: null
+      scss/at-if-closing-brace-newline-after: always-last-in-chain
+      stylistic/max-line-length:
         - 120
         - ignorePattern: /--rh-font-family-/