Merge branch 'main' into docs/table-accessibility

.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

@@ -12,6 +12,7 @@ docs/assets/playgrounds/
 # Build artifacts
 elements/*/*.js
 elements/*/test/*.js
+react
 lib/**/*.js
 !elements/**/demo/*.css
 *.map

.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

CHANGELOG.md

@@ -1,5 +1,116 @@
 # @rhds/elements
 
+## 1.4.1
+
+### Patch Changes
+
+- 862380b: corrected `@patternfly/elements` dependency to be included with the package
+
+## 1.4.0
+
+### Minor Changes
+
+- fecdcbf: `<rh-codeblock>`: added line numbers
+- fecdcbf: ✨ Added `<rh-site-status>`
+
+  Website status communicates the operational status of a website or domain using a status icon and link. It is usually located in the Footer component.
+
+  ```html
+  <rh-site-status></rh-site-status>
+  ```
+
+- fecdcbf: ✨ Added `<rh-back-to-top>`.
+
+  Back to top component is a fragment link that allows users to quickly navigate to the top of a lengthy content.
+
+  ```html
+  <rh-back-to-top href="#top">Back to top</rh-back-to-top>
+  ```
+
+- fecdcbf: ✨ Added `<rh-skip-link>`.
+
+  A skip link is used to skip repetitive content on a page. It is hidden by default and can be activated by hitting the "Tab" key after loading/refreshing a page.
+
+  ```html
+  <rh-skip-link>
+    <a href="#main-content">Skip to main content</a>
+  </rh-skip-link>
+  ```
+
+- fecdcbf: ⚛️ Added React wrapper components
+
+  You can now more easily integrate RHDS elements into your React apps by importing our wrapper components
+
+  First, make sure that you list `@lit/react` as a dependency in your project
+
+  ```sh
+  npm install --save @lit/react
+  ```
+
+  Then import the element components you need and treat them like any other react component
+
+  ```js
+  import { Tabs } from '@rhds/elements/react/rh-tabs/rh-tabs.js';
+  import { Tab } from '@rhds/elements/react/rh-tabs/rh-tab.js';
+  import { TabPanel } from '@rhds/elements/react/rh-tabs/rh-tab-panel.js';
+
+  import { useState } from 'react';
+
+  const tabs = [
+    { heading: 'Hello Red Hat', content: 'Let\'s break down silos' },
+    { heading: 'Web components', content: 'They work everywhere' }
+  ];
+
+  function App() {
+    const [index, setExpanded] = useState(-1);
+    return (
+      <span>expanded {expanded}</span>
+      <Tabs>{tabs.map(({ heading, content }, i) => (
+        <Tab slot="tab" onExpand={() => setExpanded(i)}>{heading}</Tab>
+        <TabPanel>{content}</TabPanel>))}
+      </Tabs>
+    );
+  }
+  ```
+
+- fecdcbf: `<rh-codeblock>`: added `Show more` toggle
+- fecdcbf: `<rh-codeblock>`: added copy and wrap actions, with localizable slots for the button labels
+
+  ```html
+  <rh-code-block actions="wrap copy">
+    <span slot="action-label-copy">Copy to Clipboard</span>
+    <span slot="action-label-copy" hidden data-code-block-state="active"
+      >Copied!</span
+    >
+    <span slot="action-label-wrap">Toggle word wrap</span>
+    <span slot="action-label-wrap" hidden data-code-block-state="active"
+      >Toggle overflow</span
+    >
+    <script type="text/css">
+      :host {
+        display: block;
+      }
+    </script>
+  </rh-code-block>
+  ```
+
+### Patch Changes
+
+- fecdcbf: `<rh-menu>`: improved focus accessibility for keyboard navigation users on firefox
+  `<rh-button>`: improved focus accessibility on firefox
+- fecdcbf: `<rh-accordion>`: added a accents slot with placement options as inline and bottom
+- fecdcbf: Context: aligned context implementation with updated [protocol defintions](https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md#definitions)
+- fecdcbf: Update dependencies, including Lit version 3
+- fecdcbf: `<rh-alert>`: make sure alerts always have to correct (lightest) colour palette
+- fecdcbf: `<rh-tabs>`: allow tabs with long text content to fit into different-sized containers
+
+## 1.3.2
+
+### Patch Changes
+
+- 1d1640705: `<rh-tile>`: corrected icon slot visibility with a slotted icon
+- d61b8dc71: `<rh-dialog>`: ensure that `cancel`, `open`, and `closed` events fire
+
 ## 1.3.1
 
 ### Patch Changes

declaration.d.ts

@@ -1,8 +1,5 @@
 declare module '*.css' {
-  import type { CSSResult } from 'lit';
-
-  // import style from './some-styles.css';
-  const style: CSSResult;
+  const style: CSSStyleSheet
   export default style;
 }