release: chansey

.changeset/free-lizards-marry.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": minor
+---
+`<rh-codeblock>`: added line numbers

.changeset/hot-spiders-prove.md

@@ -0,0 +1,11 @@
+---
+"@rhds/elements": minor
+---
+
+✨ 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>
+```

.changeset/large-kings-drop.md

@@ -0,0 +1,6 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-menu>`: improved focus accessibility for keyboard navigation users on firefox
+`<rh-button>`: improved focus accessibility on firefox

.changeset/late-cobras-hammer.md

@@ -0,0 +1,11 @@
+---
+"@rhds/elements": minor
+---
+
+✨ 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>
+```

.changeset/lemon-comics-flow.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-accordion>`: added a accents slot with placement options as inline and bottom

.changeset/light-rice-warn.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+Context: aligned context implementation with updated [protocol defintions](https://github.com/webcomponents-cg/community-protocols/blob/main/proposals/context.md#definitions)

.changeset/nervous-hairs-melt.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+Update dependencies, including Lit version 3

.changeset/new-grapes-hope.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-alert>`: make sure alerts always have to correct (lightest) colour palette

.changeset/silver-hornets-cry.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-tabs>`: allow tabs with long text content to fit into different-sized containers

.changeset/slow-drinks-grow.md

@@ -0,0 +1,13 @@
+---
+"@rhds/elements": minor
+---
+
+✨ 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>
+```

.changeset/spicy-cups-fly.md

@@ -0,0 +1,38 @@
+---
+"@rhds/elements": minor
+---
+⚛️  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>
+  );
+}
+```

.changeset/tame-comics-sneeze.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": minor
+---
+`<rh-codeblock>`: added `Show more` toggle

.changeset/witty-papayas-tease.md

@@ -0,0 +1,16 @@
+---
+"@rhds/elements": minor
+---
+`<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>
+```

.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

.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

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;
 }
 

docs/_data/playgrounds.cjs

@@ -8,8 +8,8 @@ function groupBy(prop, xs) {
 
 function getDemoFilename(x) {
   return `demo/${(x.url.split('/demo/').pop() || `${x.primaryElementName}.html`).replace(/\/$/, '.html')}`
-    .replace('.html', '/index.html')
-    .replace(`${x.primaryElementName}/index.html`, 'index.html');
+      .replace('.html', '/index.html')
+      .replace(`${x.primaryElementName}/index.html`, 'index.html');
 }
 
 /**
@@ -26,7 +26,8 @@ function getDemoFilename(x) {
  * > One of `.`, or **WORD** (_>= 1x_)
  * `"`
  */
-const DEMO_SUBRESOURCE_RE = /(?<attr>href|src)="\/elements\/rh-(?<unprefixed>.*)\/(?<filename>.*)\.(?<extension>[.\w]+)"/g;
+const DEMO_SUBRESOURCE_RE =
+  /(?<attr>href|src)="\/elements\/rh-(?<unprefixed>.*)\/(?<filename>.*)\.(?<extension>[.\w]+)"/g;
 
 /**
  * `/elements/`
@@ -63,16 +64,16 @@ function demoPaths(content, pathname) {
 
 function isModuleScript(node) {
   return (
-    node.tagName === 'script' &&
-    node.attrs.some(x => x.name === 'type' && x.value === 'module')
+    node.tagName === 'script'
+    && node.attrs.some(x => x.name === 'type' && x.value === 'module')
   );
 }
 
 function isStyleLink(node) {
   return (
-    node.tagName === 'link' &&
-    node.attrs.some(x => x.name === 'rel' && x.value === 'stylesheet') &&
-    node.attrs.some(x => x.name === 'href')
+    node.tagName === 'link'
+    && node.attrs.some(x => x.name === 'rel' && x.value === 'stylesheet')
+    && node.attrs.some(x => x.name === 'href')
   );
 }
 
@@ -130,11 +131,11 @@ module.exports = async function(data) {
         Tools.createCommentNode('playground-fold'),
         Tools.createElement('link', {
           rel: 'stylesheet',
-          href: 'https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css'
+          href: 'https://static.redhat.com/libs/redhat/redhat-font/4/webfonts/red-hat-font.min.css',
         }),
         Tools.createElement('link', {
           rel: 'stylesheet',
-          href: 'https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css'
+          href: 'https://static.redhat.com/libs/redhat/redhat-theme/6/advanced-theme.css',
         }),
         Tools.createElement('link', {
           rel: 'stylesheet',
@@ -147,17 +148,19 @@ module.exports = async function(data) {
       const filename = getDemoFilename(demo);
 
       /** @see docs/_plugins/rhds.cjs demoPaths transform */
-      const base = url.pathToFileURL(path.join(process.cwd(), 'elements', primaryElementName, 'demo/'));
+      const base = url.pathToFileURL(path.join(process.cwd(),
+                                               'elements',
+                                               primaryElementName,
+                                               'demo/'));
       const docsDir = url.pathToFileURL(path.join(process.cwd(), 'docs/'));
       const isMainDemo = filename === 'demo/index.html';
       const demoSlug = filename.split('/').at(1);
 
       const addSubresourceURL = async subresourceURL => {
         if (subresourceURL && !subresourceURL.startsWith('http')) {
-          const subresourceFileURL = !subresourceURL.startsWith('/')
+          const subresourceFileURL = !subresourceURL.startsWith('/') ?
             // non-tabular ternary
-            // eslint-disable-next-line operator-linebreak
-            ? new URL(subresourceURL, base)
+              new URL(subresourceURL, base)
             : new URL(subresourceURL.replace('/', './'), docsDir);
           try {
             const resourceName =
@@ -171,7 +174,11 @@ module.exports = async function(data) {
               fileMap.set(resourceName, { content, hidden: true });
             }
           } catch (e) {
-            throw new SubresourceError(`Error generating playground for ${demo.slug}.\nCould not find subresource ${subresourceURL} at ${subresourceFileURL?.href ?? 'unknown'}`, e, subresourceFileURL);
+            throw new SubresourceError(
+              `Error generating playground for ${demo.slug}.\nCould not find subresource ${subresourceURL} at ${subresourceFileURL?.href ?? 'unknown'}`,
+              e,
+              subresourceFileURL,
+            );
           }
         }
       };
@@ -183,13 +190,13 @@ module.exports = async function(data) {
       });
 
       const hrefSubresourceElements = Tools.queryAll(fragment, node =>
-        Tools.isElementNode(node) &&
-          isStyleLink(node));
+        Tools.isElementNode(node)
+          && isStyleLink(node));
 
       const srcSubresourceElements = Tools.queryAll(fragment, node =>
-        Tools.isElementNode(node) &&
-        SRC_SUBRESOURCE_TAGNAMES.has(node.tagName) &&
-        hasLocalSrcAttr(node));
+        Tools.isElementNode(node)
+        && SRC_SUBRESOURCE_TAGNAMES.has(node.tagName)
+        && hasLocalSrcAttr(node));
 
       // register demo css resources
       for (const el of hrefSubresourceElements) {
@@ -219,9 +226,9 @@ module.exports = async function(data) {
       // HACK: https://github.com/google/playground-elements/issues/93#issuecomment-1775247123
       const inlineModules =
         Tools.queryAll(fragment, node =>
-          Tools.isElementNode(node) &&
-          isModuleScript(node) &&
-          !node.attrs.some(({ name }) => name === 'src'));
+          Tools.isElementNode(node)
+          && isModuleScript(node)
+          && !node.attrs.some(({ name }) => name === 'src'));
 
       Array.from(inlineModules).forEach((el, i) => {
         const moduleName = `${primaryElementName}-${demoSlug.replace('.html', '')}-inline-script-${i++}.js`;