feat(dialog): use native HTML dialog element

.changeset/big-glasses-drum.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-audio-player>`: corrected focus when keyboard navigating options menu

.changeset/chilly-shrimps-call.md

@@ -0,0 +1,7 @@
+---
+"@rhds/elements": minor
+---
+`<rh-tile>`: add `link="private"` attribute, indicating that the link is
+private, which changes the link icon from an arrow to a padlock, and
+`link="external"` attribute, which changes the link icon to the "external link"
+icon

.changeset/dry-jobs-rest.md

@@ -0,0 +1,11 @@
+---
+"@rhds/elements": minor
+---
+`<rh-card>` added `--rh-card-header-background-on-light` and `--rh-card-header-background-on-dark` CSS custom properties
+
+```css
+rh-card.custom-card {
+  --rh-card-header-background-on-light: cornflowerblue;
+  --rh-card-header-background-on-dark: darkblue;
+}
+```

.changeset/flat-bats-walk.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-audio-player>`: use theme tokens

.changeset/forty-toes-exercise.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-accordion>`: Make `<rh-accordion-header>`'s bold.

.changeset/gentle-rings-scream.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-table>`: adds container query support

.changeset/giant-planets-argue.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": patch
+---
+
+`<rh-accordion>`: removed arrow-key keyboard navigation in favor of tab navigation.

.changeset/gold-years-hang.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-audio-player>`: use official red hat icons

.changeset/gorgeous-impalas-knock.md

@@ -0,0 +1,16 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-subnav>`:
+ - removed arrow-key keyboard navigation in favor of tab navigation.
+ - add `accessible-label` attribute to explicitly label landmark.
+ - corrects overflow icons
+
+ ```
+ <rh-subnav accessible-label="Customer service">
+  <a href="#" active>Help</a>
+  <a href="#">Contact Us</a>
+  <a href="#">FAQ</a>
+ </rh-subnav>
+ ```

.changeset/heavy-roses-poke.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": minor
+---
+`<rh-tag>` added `red-orange`, `yellow`, and `teal` colors. **NOTE** that `cyan` is now deprecated, but will continue to work using the `teal` colors.

.changeset/honest-cameras-hang.md

@@ -0,0 +1,21 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-dialog>`: Dialog now uses the native HTML `<dialog>` element internally.
+
+Note: `#overlay` is now deprecated in favor of a public variable on the CSS psuedo-element `::backdrop`:
+
+Before:
+
+```css
+rh-dialog::part(overlay) { ... }
+```
+
+After:
+
+```css
+rh-dialog {
+  --rh-dialog-backdrop-background-color: ghostwhite;
+}
+```

.changeset/khaki-rings-confess.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-table>`: added auto-generated table cell headings for responsive layout on small screens.

.changeset/olive-ghosts-push.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-audio-player>`: add a playback control to the mini layout

.changeset/rotten-bottles-suffer.md

@@ -0,0 +1,8 @@
+---
+"@rhds/elements": minor
+---
+`<rh-tag>`: added desaturated variant:
+
+```html
+<rh-tag variant="desaturated">New</rh-tag>
+```

.changeset/seven-bats-grin.md

@@ -0,0 +1,8 @@
+---
+"@rhds/elements": minor
+---
+`<rh-tag>`: added `size` attribute.
+
+```html
+<rh-tag size="compact">New</rh-tag>
+```

.changeset/shy-taxis-knock.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-tag>`: now supports color [theming](https://ux.redhat.com/theming/)

.changeset/slick-ants-cover.md

@@ -0,0 +1,4 @@
+---
+"@rhds/elements": patch
+---
+`<rh-skip-link>`: ensure link is always at top of the page, per guidelines

.changeset/slimy-guests-rescue.md

@@ -0,0 +1,9 @@
+---
+"@rhds/elements": minor
+---
+`<rh-button>`: add `icon-set` attribute, corresponding to `<rh-icon set="...">`
+
+```html
+<rh-button icon="giftbox"
+           icon-set="standard">Donate</rh-button>
+```

.changeset/swift-nails-notice.md

@@ -0,0 +1,13 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-navigation-secondary>`:
+ - removed arrow-key keyboard navigation in favor of tab navigation.
+ - add `accessible-label` attribute to explicitly label landmark.
+
+ ```
+ <rh-navigation-secondary accessible-label="Main">
+  ...
+ </rh-navigation-secondary>
+ ```

.changeset/tall-corners-punch.md

@@ -0,0 +1,17 @@
+---
+"@rhds/elements": minor
+---
+`<rh-skip-link>`: added optional `href` attribute:
+
+```html
+<rh-skip-link href="#main-content">Skip to main content</rh-skip-link>
+```
+
+is equivalent to:
+
+```html
+<rh-skip-link>
+  <a href="#main-content">Skip to main content</a>
+</rh-skip-link>
+```
+

.changeset/tricky-windows-draw.md

@@ -0,0 +1,5 @@
+---
+"@rhds/elements": minor
+---
+
+`<rh-code-block>`: Added `highlighting="client"` for client-side syntax highlighting with Red Hat colour scheme

.changeset/wild-apples-enjoy.md

@@ -0,0 +1,9 @@
+---
+"@rhds/elements": minor
+---
+`<rh-tag>`: added `href` attribute
+
+```html
+<rh-tag icon="information-fill"
+        href="/info">Info</rh-tag>
+```

.changeset/wild-bulldogs-draw.md

@@ -0,0 +1,27 @@
+---
+"@rhds/elements": minor
+---
+
+Theming: Added [theming tokens][theming] to most elements
+
+Theming tokens let authors respond to the currently-active colour palette, and
+are especially useful when implementing [patterns][patterns] using themable elements.
+
+```html
+<rh-card class="example-logo-text-and-cta">
+  <p>Lorem ipsum dolor sit amet, <em>consectetur adipiscing elit</em>.</p>
+  <rh-cta slot="footer" href="#">Call to action</rh-cta>
+</rh-card>
+
+<style>
+  .example-logo-text-and-cta {
+    width: 360px;
+    & em {
+      color: var(--rh-color-accent-base);
+    }
+  }
+</style>
+```
+
+[theming]: ux.redhat.com/theming
+[patterns]: https://ux.redhat.com/patterns/

.gitignore

@@ -8,9 +8,9 @@ node_modules
 _site
 docs/pfe.min*
 docs/assets/playgrounds/
+docs/assets/javascript/elements/*.js.map
+docs/assets/javascript/elements/*.d.ts
 docs/assets/javascript/elements/*.js
-!docs/assets/javascript/elements/uxdot-installation-tabs.js
-!docs/assets/javascript/elements/uxdot-pattern.js
 docs/_data/playgrounds.json
 
 # Build artifacts

.pfe.config.json

@@ -16,7 +16,7 @@
     "description": "Red Hat Design System",
     "componentSubpath": "elements",
     "stylesheets": [
-      "/docs/styles/dev-server/styles.css"
+      "/docs/styles/demo/dev-server.css"
     ]
   }
 }

.stylelintrc.yml

@@ -2,8 +2,13 @@ extends:
   - stylelint-config-standard
   - '@stylistic/stylelint-config'
 
+plugins:
+  - ./node_modules/@rhds/tokens/plugins/stylelint.js
+  - '@stylistic/stylelint-plugin'
+
 ignoreFiles:
   - node_modules/**/*
+  - docs/assets/javascript/elements/*.js
 
 rules:
   alpha-value-notation: number # TODO: fix for `percentage` in tokens
@@ -19,6 +24,7 @@ rules:
     - ignoreShorthands:
         - /grid/
 
+  media-feature-range-notation: prefix
   number-max-precision: 6
   no-descending-specificity:
     - true
@@ -42,84 +48,25 @@ rules:
     - ignorePseudoElements:
       - /part(.*)/
 
-  '@stylistic/string-quotes': double
+  '@stylistic/string-quotes': single
   '@stylistic/selector-combinator-space-after': always
   '@stylistic/selector-combinator-space-before': always
+  '@stylistic/function-parentheses-newline-inside': never-multi-line
+  '@stylistic/function-comma-newline-after': always-multi-line
   '@stylistic/indentation':
-   - 2
-   - indentInsideParens: 'once-at-root-twice-in-block'
+    - 2
+    - indentInsideParens: 'once-at-root-twice-in-block'
   '@stylistic/max-line-length':
     - 100
-    - ignorePattern: /--rh-font-family-/
+    - ignorePattern: /(--rh-font-family-|https:\/\/)/
 
+  rhds/deprecated: true
   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
-  - '@stylistic/stylelint-plugin'
+    - allowed:
+      - --rh-icon-size
 
 overrides:
   - files:

declaration.d.ts

@@ -10,3 +10,8 @@ declare module '*.css' {
 declare module '@rhds/tokens/media.js' {
   export * from '@rhds/tokens/js/media.js';
 }
+
+declare module 'prism-esm/plugins/line-numbers/prism-line-numbers.js' {
+  import type { Prism } from "prism-esm";
+  export function Plugin(prism: Prism): void
+}

docs/_includes/layouts/base.njk

@@ -17,7 +17,6 @@
   <head>
     {% include "../partials/meta.html" %}
 
-    <link rel="stylesheet" href="/assets/packages/@rhds/tokens/css/global.css">
     <link rel="stylesheet" href="/styles/styles.css">
 
    {# On browsers that don't yet support native declarative shadow DOM, a
@@ -45,7 +44,7 @@
   </head>
 
   <body dsd-pending class="{{ extraPageClasses }}">
-    <rh-skip-link><a href="#main">Skip to main content</a></rh-skip-link>
+    <rh-skip-link href="#main">Skip to main content</rh-skip-link>
     {{ content | safe }}
   </body>
 </html>