feat(navigation-primary): add navigation primary#2171
Merged
zeroedin merged 192 commits intostaging/cubonefrom Apr 7, 2025
Merged
feat(navigation-primary): add navigation primary#2171zeroedin merged 192 commits intostaging/cubonefrom
zeroedin merged 192 commits intostaging/cubonefrom
Conversation
…nd update Style docs (#2112) * fix(blockquote): override potential `max-width` for quote content * chore(blockquote): add changeset * fix(blockquote): use logical properties * fix(blockquote): update quote and author spacing * docs(blockquote): update maximum width size With direction from Marionne * feat(blockquote): limit width to 752px per docs * docs(blockquote): remove "Image of" at start of alt text * docs(blockquote): remove a11y note about `aria-label` * fix(blockquote): use standard media query size * docs(blockquote): re-add content to sizes table * docs(blockquote): fix and update themable tokens link on Style page * fix(blockquote): increase/correct slotted content `font-size` * fix(blockquote): use tag selector in CSS for quote * fix(blockquote): target `p` tag for blockquote specifically * fix(blockquote): use standard media query size * chore(blockquote): upgrade changeset to minor
…2116) * fix(pagination): make bg of open variants transparent * fix(pagination): fallback colors for public and private variables * fix(pagination): use logical properties * fix(pagination): fix RTL demo layout * fix(pagination): wrap all pagination demos with `<rh-surface>` * fix(pagination): remove fallbacks to RHDS color tokens * chore(pagination): add changeset * docs(pagination): add docs about colors + surface * chore(pagination): downgrade changeset to patch Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(pagination): update changeset description Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(pagination): reword `rh-surface` requirement terminology, add alert note * docs(pagination): update 30-code.md --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>
* chore(blockquote): correct changeset level * chore(blockquote): update changeset Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>
* feat(dialog): use native `<dialog>` element Related to #1865. * chore(dialog): add changeset * fix(dialog): update color values to use new semantic tokens * fix(dialog): make surface wrap only dialog/modal * docs(dialog): update a11y docs around focus and focus order * fix(dialog): add `accessible-label` to the `no-headings.html` demo * fix(dialog): update content in `no-header-content.html` demo * fix(dialog): horizontally center dialogs with `variant`/`width` attributes * fix(dialog): position top / modal width variants sizing * fix(dialog): add `rh-*` elements to list of focusable selectors. * fix(dialog): update close button spacing/height/width. * fix(dialog): re-add `--rh-dialog-close-button-color` * fix(dialog): decrease close button size, fix video modal close button color * fix(dialog): add close button color variable to icon declaration * fix(dialog): remove `trapFocus();` function See: https://github.com/RedHat-UX/red-hat-design-system/pull/2078/files#r1877655958 * chore(dialog): update changeset wording about overlay Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to `rh-cta` host Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to `rh-cta` host Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): update accessible name wording on a11y page Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): a11y accessible label wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): tweak accessible label fallback text wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): spelling fix Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): a11y name jsdoc wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to CTA host's in all demos * docs(dialog): add and improve JSDoc formatting * refactor(dialog): use IDREF's for styling shadowdom * docs(dialog): a11y focus order and a11y name content * fix(dialog): only `sticky` the header when there's enough space * fix(dialog): add surface background color to close button * fix(dialog): add padding to sticky `#header` * fix(dialog): add space to bottom of `#header` * fix(dialog): prevent header space from covering body content * docs(dialog): update demo wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): remove `#onKeyDown` from `disconnectedCallback()` Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): add extra note on `overlay` depreciation to changeset * fix(dialog): ensure `#body` paragraph spacing is correct * fix(dialog): remove `closeOnOutsideClick` static * refactor(dialog): remove `@bound` from `onClick()` method * fix(dialog): remove outdated tab/shift+tab methods * refactor(dialog): remove `@bound` from public methods * fix(dialog): simplify color-palette logic * fix(dialog): allow `sm`/`md`/`lg` variants for video dialogs * docs(dialog): update images and some content, remove old images * docs(dialog): fix relative link * refactor(dialog): rename `offset` vars to be private * fix(dialog): update font family variable fallbacks * docs(dialog): fix video dialog image and remove old images --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> Co-authored-by: marionnegp <mapatel@redhat.com>
* fix(back-to-top): make element visible on base demo * fix(back-to-top): fix warnings demo, update demo content * fix(back-to-top): show element on position sticky demo * fix(back-to-top): use logical properties in demo styles * fix(back-to-top): target surface with `main` role in demo JS * chore(back-to-top): add changeset * fix(back-to-top): revert `svb` due to lack of baseline browser support * docs(back-to-top): remove position sticky demo * docs(back-to-top): remove scrollable page demo * fix(back-to-top): remove error/warning logs and warnings demo * chore(back-to-top): update changeset --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com>
🦋 Changeset detectedLatest commit: 92c3ede The changes in this PR will be included in the next version bump. This PR includes changesets to release 1 package
Not sure what this means? Click here to learn what changesets are. Click here if you're a maintainer who wants to add another changeset to this PR |
✅ Deploy Preview for red-hat-design-system ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
Contributor
|
Size Change: +17.9 kB (+8.57%) 🔍 Total Size: 226 kB
ℹ️ View Unchanged
|
Member
|
Thanks for pushing this branch, @zeroedin. I'm interested in learning more about the issues you had with rh-disclosure, because it would be good to recycle that as much as possible. Perhaps there's room for |
Collaborator
Author
I felt like the changes that were to be requested were beyond the scope of what a simple disclosure would do, and the styles needed were also quite different. I also needed an element that handled dropdowns and slotted links, so I settled on |
zeroedin
commented
Feb 18, 2025
* feat(announcement): add `<rh-announcement>` Continuation on PR #1722. * fix(announcement): fix lint error from font stack * fix(announcement): remove unused variable * fix(announcement): dismissible button location * fix(announcement): fix dismissible demo spelling * refactor(announcement): alphabetize `#container` properties * fix(announcement): use appropriate token values for bkg color * feat(announcement): enable theming of the background of the `#container` * fix(announcement): remove content, body and cta parts * fix(announcement): rename attr `imgleft` to `image-position` * docs(announcement): add explainer text to image position demo * refactor(announcement): nest CSS selectors * fix(announcement): center align image on tablet+ viewports * feat(announcement): add lightdom CSS / improve FOUC * fix(announcement): proper rh-button a11y label attribute * docs(announcement): remove outdated docs files * fix(announcement): remove unneeded demo styles for `<main>` * fix(announcement): center image + content on mobile viewports * feat(announcement): add `block-start` to `image-position` property * docs(announcement): remove docs related to outdated CSS parts * docs(announcement): add docs for the close event * docs(announcement): add `image-position` examples to Dismissible demo * fix(announcement): increase close / dismiss button size * fix(announcement): spacing tweaks * fix(announcement): reference surface var for `.dark` bkg color * chore(announcement): normalize spacing in `calc` * refactor(announcement): nest css * fix(announcement): remove left padding from CTA * fix(announcement): restore padding to `inline-start` CTA on mobile viewports * chore(announcement): add announcement to repo status file * docs(announcement): add content to overview page * docs(announcement): add content to style page * docs(announcement): add content to guidelines page * docs(announcement): add content to accessibility page * docs(announcement): alt first * docs(announcement): move href to CTA host, no lightdom HTML * docs(announcement): remove fallbacks from vars in demo SVGs * docs(announcement): spelling fix, update attributes in announcement README * fix(announcement): rename lightdom.css to lightdom-shim.css * fix(announcement): remove lightdom shim dark color palette slotted content color definitions * test(announcement): add tests for close / dismiss functionality * fix(announcement): remove `--rh-color-surface-dark-alt` * docs(announcement): add note about personalization to Overview * test(announcement): nest actions in describe blocks * refactor(announcement): spelling for dismissible 👉 dismissABLE --------- Co-authored-by: Benny Powers <web@bennypowers.com>
bennypowers
approved these changes
Apr 6, 2025
Member
|
axe-core may fail on nav-primary demo: this is a false positive, due to a known issue in axe-core Edit: having looked into this: after ensuring that the listitem role is applied to the slotted list item elements even after lit-ssr hydration strips the elementinternals role attribute, axe clears the errors. it's possible the abovementioned issue is resolved already in axe-core |
marionnegp
requested changes
Apr 7, 2025
Collaborator
There was a problem hiding this comment.
Checked out the last pieces of the nav and found just a couple things:
dropdown menu
- Based on the mockup, I don't think the dropdown menus in
#hamburgerneed the rounded bottom corners. Looks a little funky at large screen sizes.
Other demos
- It looks like a link as top level item in the
#hamburgersection should turn blue, show the dashed underline, and have no bottom border.
Member
drop-shadowTo toggle the drop shadow size depending on color scheme, we'll use a style query on chrome, and fall back to the device preference if style queries are unsupported. we'll do this in a follow up patch |
marionnegp
requested changes
Apr 7, 2025
Collaborator
marionnegp
left a comment
marionnegp
left a comment
There was a problem hiding this comment.
Last thing! I forgot to check the focus and active states for the link as top level item. Can the bottom gradient border be removed for both those states?
marionnegp
requested changes
Apr 7, 2025
Collaborator
marionnegp
left a comment
marionnegp
left a comment
There was a problem hiding this comment.
This wasn't specced out in the mockup, but I think the border radius should be removed from the other three dropdowns when they go full-width on mobile.
marionnegp
approved these changes
Apr 7, 2025
Collaborator
marionnegp
left a comment
marionnegp
left a comment
There was a problem hiding this comment.
Woohoo! Awesome work.
remove duplicate style tag
adamjohnson
approved these changes
Apr 7, 2025
Collaborator
adamjohnson
left a comment
adamjohnson
left a comment
There was a problem hiding this comment.
Launched Gloriously, Tremendous Milestone
github-project-automation
Bot
moved this from Review 🔍
to Done ☑️
in Red Hat Design System
bennypowers
added a commit
that referenced
this pull request
Apr 7, 2025
* fix(blockquote): fix center alignment, enforce blockquote font size and update Style docs (#2112) * fix(blockquote): override potential `max-width` for quote content * chore(blockquote): add changeset * fix(blockquote): use logical properties * fix(blockquote): update quote and author spacing * docs(blockquote): update maximum width size With direction from Marionne * feat(blockquote): limit width to 752px per docs * docs(blockquote): remove "Image of" at start of alt text * docs(blockquote): remove a11y note about `aria-label` * fix(blockquote): use standard media query size * docs(blockquote): re-add content to sizes table * docs(blockquote): fix and update themable tokens link on Style page * fix(blockquote): increase/correct slotted content `font-size` * fix(blockquote): use tag selector in CSS for quote * fix(blockquote): target `p` tag for blockquote specifically * fix(blockquote): use standard media query size * chore(blockquote): upgrade changeset to minor * fix(pagination): Colors, right to left demo, and logical properties (#2116) * fix(pagination): make bg of open variants transparent * fix(pagination): fallback colors for public and private variables * fix(pagination): use logical properties * fix(pagination): fix RTL demo layout * fix(pagination): wrap all pagination demos with `<rh-surface>` * fix(pagination): remove fallbacks to RHDS color tokens * chore(pagination): add changeset * docs(pagination): add docs about colors + surface * chore(pagination): downgrade changeset to patch Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(pagination): update changeset description Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(pagination): reword `rh-surface` requirement terminology, add alert note * docs(pagination): update 30-code.md --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * feat(dialog): use native HTML dialog element (#2078) * feat(dialog): use native `<dialog>` element Related to #1865. * chore(dialog): add changeset * fix(dialog): update color values to use new semantic tokens * fix(dialog): make surface wrap only dialog/modal * docs(dialog): update a11y docs around focus and focus order * fix(dialog): add `accessible-label` to the `no-headings.html` demo * fix(dialog): update content in `no-header-content.html` demo * fix(dialog): horizontally center dialogs with `variant`/`width` attributes * fix(dialog): position top / modal width variants sizing * fix(dialog): add `rh-*` elements to list of focusable selectors. * fix(dialog): update close button spacing/height/width. * fix(dialog): re-add `--rh-dialog-close-button-color` * fix(dialog): decrease close button size, fix video modal close button color * fix(dialog): add close button color variable to icon declaration * fix(dialog): remove `trapFocus();` function See: https://github.com/RedHat-UX/red-hat-design-system/pull/2078/files#r1877655958 * chore(dialog): update changeset wording about overlay Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to `rh-cta` host Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to `rh-cta` host Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): update accessible name wording on a11y page Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): a11y accessible label wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): tweak accessible label fallback text wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): spelling fix Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): a11y name jsdoc wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to CTA host's in all demos * docs(dialog): add and improve JSDoc formatting * refactor(dialog): use IDREF's for styling shadowdom * docs(dialog): a11y focus order and a11y name content * fix(dialog): only `sticky` the header when there's enough space * fix(dialog): add surface background color to close button * fix(dialog): add padding to sticky `#header` * fix(dialog): add space to bottom of `#header` * fix(dialog): prevent header space from covering body content * docs(dialog): update demo wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): remove `#onKeyDown` from `disconnectedCallback()` Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): add extra note on `overlay` depreciation to changeset * fix(dialog): ensure `#body` paragraph spacing is correct * fix(dialog): remove `closeOnOutsideClick` static * refactor(dialog): remove `@bound` from `onClick()` method * fix(dialog): remove outdated tab/shift+tab methods * refactor(dialog): remove `@bound` from public methods * fix(dialog): simplify color-palette logic * fix(dialog): allow `sm`/`md`/`lg` variants for video dialogs * docs(dialog): update images and some content, remove old images * docs(dialog): fix relative link * refactor(dialog): rename `offset` vars to be private * fix(dialog): update font family variable fallbacks * docs(dialog): fix video dialog image and remove old images --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> Co-authored-by: marionnegp <mapatel@redhat.com> * fix(back-to-top): demo visibility and logical properties (#2133) * fix(back-to-top): make element visible on base demo * fix(back-to-top): fix warnings demo, update demo content * fix(back-to-top): show element on position sticky demo * fix(back-to-top): use logical properties in demo styles * fix(back-to-top): target surface with `main` role in demo JS * chore(back-to-top): add changeset * fix(back-to-top): revert `svb` due to lack of baseline browser support * docs(back-to-top): remove position sticky demo * docs(back-to-top): remove scrollable page demo * fix(back-to-top): remove error/warning logs and warnings demo * chore(back-to-top): update changeset --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * feat(announcement): add `<rh-announcement>` v2 (#2153) * feat(announcement): add `<rh-announcement>` Continuation on PR #1722. * fix(announcement): fix lint error from font stack * fix(announcement): remove unused variable * fix(announcement): dismissible button location * fix(announcement): fix dismissible demo spelling * refactor(announcement): alphabetize `#container` properties * fix(announcement): use appropriate token values for bkg color * feat(announcement): enable theming of the background of the `#container` * fix(announcement): remove content, body and cta parts * fix(announcement): rename attr `imgleft` to `image-position` * docs(announcement): add explainer text to image position demo * refactor(announcement): nest CSS selectors * fix(announcement): center align image on tablet+ viewports * feat(announcement): add lightdom CSS / improve FOUC * fix(announcement): proper rh-button a11y label attribute * docs(announcement): remove outdated docs files * fix(announcement): remove unneeded demo styles for `<main>` * fix(announcement): center image + content on mobile viewports * feat(announcement): add `block-start` to `image-position` property * docs(announcement): remove docs related to outdated CSS parts * docs(announcement): add docs for the close event * docs(announcement): add `image-position` examples to Dismissible demo * fix(announcement): increase close / dismiss button size * fix(announcement): spacing tweaks * fix(announcement): reference surface var for `.dark` bkg color * chore(announcement): normalize spacing in `calc` * refactor(announcement): nest css * fix(announcement): remove left padding from CTA * fix(announcement): restore padding to `inline-start` CTA on mobile viewports * chore(announcement): add announcement to repo status file * docs(announcement): add content to overview page * docs(announcement): add content to style page * docs(announcement): add content to guidelines page * docs(announcement): add content to accessibility page * docs(announcement): alt first * docs(announcement): move href to CTA host, no lightdom HTML * docs(announcement): remove fallbacks from vars in demo SVGs * docs(announcement): spelling fix, update attributes in announcement README * fix(announcement): rename lightdom.css to lightdom-shim.css * fix(announcement): remove lightdom shim dark color palette slotted content color definitions * test(announcement): add tests for close / dismiss functionality * fix(announcement): remove `--rh-color-surface-dark-alt` * docs(announcement): add note about personalization to Overview * test(announcement): nest actions in describe blocks * refactor(announcement): spelling for dismissible 👉 dismissABLE --------- Co-authored-by: Benny Powers <web@bennypowers.com> * feat(footer): href attribute for social links (#2182) * feat(footer): href attribute * docs(footer): social link slot * fix(card): use `--rh-space` tokens (#2213) * fix: changed the margin-block value of the rh-card body to --rh-space-xl in smaller containers * fix: resolved lint errors * docs: changeset --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * perf!: convert `color-palette` to CSS via `light-dark()` (#2138) * fix(menu): use color-scheme * fix(navigation-secondary): use color-scheme * fix(pagination): use color-scheme * fix(site-status): use color-scheme * fix(spinner): use color-scheme * fix(stat): use color-scheme * fix(subnav): use color-scheme * fix(surface): use color-scheme * fix(switch): use color-scheme * fix(tabs): use color-scheme * fix(tag): use color-scheme * fix(tile): use color-scheme * fix(tooltip): use color-scheme * fix(video-embed): use color-scheme * fix(context-demo): use color-scheme * fix: apply only keyword to color-scheme * fix(cta): update cta variants * fix: clean up missed dark classes * fix: simplify css use computed values where optimal * fix: move styles to tokens repo (in a patch) * fix: update context and elements * fix: syntax * fix: bad merge * fix: bad merge * fix: various fixes * chore: patch * fix: dev server * chore: deps * fix: remove custom context * chore: patch deps * style: types * test(surface): compute "on" from css * style: lint * chore: lint * test(badge): fix tests * docs: align types * docs: ts types * fix(navigation-secondary): color context * docs: ts types * fix(video-embed): consent content * test(footer): rationalize tablet layout tests * fix(footer): revert changes to lightdom sheet * docs: ssr'd context demos * fix: palette providers * docs: refer to color palettes and color schemes * refactor: rename colorContext decorators to colorScheme * fix(badge): contrast * fix(pagination): input colors * fix(tabs): stylesn * fix(card): promo palettes * style: whitespace * docs: changeset * docs: aka for theming stuff * docs: improve uxdot-pattern ssr * chore: bump node version * docs: customizing theming improvements * docs: theming customization prose * docs: add do/dont example on color-palettes page * docs: more prose * chore: patches * fix(accordion): palettes and schemes * fix(button): play button icon color * fix(button): restore hover colors * fix(health-index): colors * fix(surface): compute consumer styles * chore: dev-server import map scopes * fix(table): dark hover colors * fix(tile): color-scheme backgrounds * fix(tile): palettes * fix(tile): undo bad merge * chore: update pfe-tools * docs: use surface for 11ty demos * fix(audio-player): track colors, menu border * fix: default surface color for providers * docs(surface): nested children in demo * chore: tsconfig refs * fix: ts reference resolution errors * feat: reject disallowed color palettes * style: lint * docs: context demo height * perf: only load consumer css in the root light-dark() lets us define these only once, instead of in each element's shadow root * chore: revert 95174c71 * docs: simplify context demo * refactor: for readability * fix(cta): rtl icon * chore: package lock * docs: fix regression in ssr * fix: reapply theming token definitions to elements * docs(theming): links * perf: minify ssr'd element css * docs: uxdot-pattern no-code-tabs * docs: clarify color scheme docs * docs: nested color palettes * docs: ts types for markdown-it-deflist * docs(color-palettes): styling <dl> elements and other tweaks * style: lint * docs: remove default color-palette * fix(surface): make surface render in either scheme by default * fix: update tokens patch * docs: fix build * style: lint * fix: theming tokens * fix: exclude card from ssr until a solution for slot controller is found * docs: sidenav color schemes * fix: no scheme * docs: sidenav * docs: light-dark homepage (first attempt) * fix(health-index): restore border color * fix(accordion)!: panels no longer providers * fix(pagination): remove open variant link background * perf(card): slightly reduce shadowdom payload * chore: tokens patch * fix(navigation-secondary): remove underlines * fix(button): play button colors * fix(context): element styles win * style: lint * fix(surface): unspecified palette: any scheme * fix(tile): light scheme border colors * fix(subnav): adjust focus styles * docs: changeset * docs: revise changeset * fix(site-status): icon colors * fix(subnav): darker border color * fix(table): remove background color * style: whitespace * fix(surface): don't set color-scheme * docs: homepage allow both color schemes * docs: dark mode on more pages * style: variadic provider decorator * docs: cut down on prism styles * test(tag): update border cases * docs: toc as ce * fix(rh-subnav): fixing color-context inheritance from bug 2190 * docs: toc styles * docs: color-scheme picker Closes #1824 * docs: better color scheme picker * docs: scheme picker hover focus state * docs: dark scheme for tokens pages * perf(theming)!: use light-dark() * fix(tabs): border colors * docs(theming): move terminology to overview * docs: style fixes * fix: ts types * fix(subnav): remove background color * docs: dark header * docs: dark header * fix(tabs): border colors * fix(tabs): active * fix: remove instances of --rh-color-surface-dark-alt * fix(tabs): restore vertical styles * style: lint * docs: clarify changeset * docs: format changelog * docs: fix link * docs: sentence case * style: whitespace * fix(tabs): major changeset * docs: workaround for tabs ssr bug * docs: try to avoid import map error * chore: remove unused type import * fix(tabs): workaround for ssr problems * fix(tab): box active tab background * docs: theming prose * docs: remove inline beta from color-palettes.md * docs: masthead tweaks * docs: cards borders * docs: masthead layout * docs: dark mode fouc, localstorage switch We are left with a FOUC when user sets the scheme switcher to the opposite mode of their device. we could solve that with sessions, but that's a bit of an exagerration for this use case * docs: scheme radio button margins * docs: copy button, sample dark scheme * docs: update docs/theming/color-palettes.md Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com> * docs: don't reference `-on-` * docs: styling main with schemes * docs: <main> * docs: about section themable svg * docs: get started section themable svg * style: whitespace * docs: foundations section bimodal gfx * docs: a11y section dark scheme * docs: move color assets * docs: colocate images * docs: tokens example png legibility * docs: remove border from brand standards example * docs: remove typo * docs: update color usage image to use tokens * docs: fix missing images on typography usage * docs: remove extra spaces in svgs and add titles for accessibility * docs: bimodal typography graphics * docs: element code pages dark scheme * docs: accordion dark mode gfx * docs(alert): dark mode gfx * docs: code table background * docs(audio-player): dark mode gfx * docs(avatar): dark mode gfx * docs(back-to-top): dark mode gfx * docs(badge): dark mode gfx * docs(blockquote): dark mode gfx * docs(breadcrumb): dark mode gfx * docs(button): dark mode gfx * docs(card): dark mode gfx * docs(code-block): dark mode gfx * docs(cta): dark mode gfx * docs: markdown table captions * docs: dark mode gfx * docs: dark mode gfx Theme => Color scheme * docs: defouc toggle * docs: scheme => theme Co-Authored-By: @adamjohnson * chore: update patch * docs: simplify base layouts * fix: update patch * chore: update patch * fix: rename decorator to themable * fix(health-index): oklch instead of gray-80 * chore: update tokens js and css usage * fix: update default theme path * docs: order of imports * chore: recover from bad merge * chore: fix docs command * docs: appease typescript * chore: update patch * test: lint * fix: always load theme, only once * chore: update patch * fix: rename colorSchemeProvide decorator * refactor: move color decorator modules * docs: md table * docs: scheme picker hover border * chore!: bump tokens version to 3.0 * docs: pages/tokens.css * docs: onless * fix(uxdot-color-scheme-picker): swapping out filled sun and moon icons for outlined * fix(button): close button color * docs: context demo picker * fix(announcement): changes for light-dark() * test(announcement): update svg --------- Co-authored-by: Benny Powers <web@bennypowers.com> Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> Co-authored-by: Mark Caron <mark.caron@gmail.com> * fix(health-index): prevent graphical elements breaking out of stacking context (#1995) * fix(health-index): add CSS custom prop to adjust z-index * fix(health-index): resolve z-index without exposing new prop * docs: update eighty-windows-exist.md --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs: elaborate on bimodal svg (#2231) * docs: elaborate on bimodal svg * docs: update developers.md * docs: update docs/theming/developers/developers.md * docs: update snippet * docs: review comments * feat(disclosure): add `<rh-disclosure>` (#2043) * feat(disclosure): add `<rh-disclosure>` * fix(disclosure): make borders show up when used without a context provider * fix(disclosure): avoid 1px outer + inner border overlap inconsistencies * fix(disclosure): export RhDisclosure class, fix tests * feat(disclosure): enable ESC to close * test(disclosure): ignore fallback value error * test(disclosure): fix `removeEventListener` error * fix(disclosure): escape closes currently focused disclosure * feat(disclosure): add `!isServer` check for SSR * fix(disclosure): proper nested rh-icon caret rotation on open/close * fix(disclosure): correct gap spacing on `<summary>` * refactor(disclosure): move `details`/`summary` to shadowdom * feat(disclosure): add lightdom shim + example demo * fix(disclosure): improve FOUC / CLS * refactor(disclosure): `summary-label` slot becomes `summary` * fix(disclosure): remove default content for `summary` slot * fix(disclosure): expand `summary` focus outline * fix(disclosure): let `render` handle elements/state * feat(disclosure): add `summary` prop, convert demos to use it * fix(disclosure): remove `display: flex;` from `<summay>` * fix(disclosure): prevent ESC from closing disclosure on certain interactive elements * fix(disclosure): improve outline on focus * fix(disclosure): move FOUC styles to lightdom-shim, remove FOUC demo * feat(disclosure): add `toggle` event and events demo * fix(disclosure): prevent wrapping in slotted summary demo via demo styles * fix(disclosure): use `composedPath()` for ESC functionality * fix(disclosure): focus / active ring color * fix(disclosure): make focus/active ring appear above left red border * fix(disclosure): details content spacing * docs(disclosure): remove link from demo * fix(disclosure): spacing and interactive states * feat(disclosure): improve no js styles, add color fallbacks * fix(blockquote): fix center alignment, enforce blockquote font size and update Style docs (#2112) * fix(blockquote): override potential `max-width` for quote content * chore(blockquote): add changeset * fix(blockquote): use logical properties * fix(blockquote): update quote and author spacing * docs(blockquote): update maximum width size With direction from Marionne * feat(blockquote): limit width to 752px per docs * docs(blockquote): remove "Image of" at start of alt text * docs(blockquote): remove a11y note about `aria-label` * fix(blockquote): use standard media query size * docs(blockquote): re-add content to sizes table * docs(blockquote): fix and update themable tokens link on Style page * fix(blockquote): increase/correct slotted content `font-size` * fix(blockquote): use tag selector in CSS for quote * fix(blockquote): target `p` tag for blockquote specifically * fix(blockquote): use standard media query size * chore(blockquote): upgrade changeset to minor * docs(disclosure): update changeset disclosure example code Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(disclosure): add rich HTML example to README Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * style(disclosure): fix `<details>` attribute indentation Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * refactor(disclosure): add class to slot in demo Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * refactor(disclosure): use class to target summary slot Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(disclosure): remove `part` from caret icon * feat(disclosure): make component a provider * fix(disclosure): change color vars, remove stylelint ignores * fix(disclosure): no undefined border variable * fix(pagination): Colors, right to left demo, and logical properties (#2116) * fix(pagination): make bg of open variants transparent * fix(pagination): fallback colors for public and private variables * fix(pagination): use logical properties * fix(pagination): fix RTL demo layout * fix(pagination): wrap all pagination demos with `<rh-surface>` * fix(pagination): remove fallbacks to RHDS color tokens * chore(pagination): add changeset * docs(pagination): add docs about colors + surface * chore(pagination): downgrade changeset to patch Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(pagination): update changeset description Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(pagination): reword `rh-surface` requirement terminology, add alert note * docs(pagination): update 30-code.md --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * chore(blockquote): correct changeset level (#2137) * chore(blockquote): correct changeset level * chore(blockquote): update changeset Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(disclosure): remove colour overrides * fix(disclosure): red stripe * refactor(disclosure): simplify esc trap * fix(disclosure): brand red in context * feat(dialog): use native HTML dialog element (#2078) * feat(dialog): use native `<dialog>` element Related to #1865. * chore(dialog): add changeset * fix(dialog): update color values to use new semantic tokens * fix(dialog): make surface wrap only dialog/modal * docs(dialog): update a11y docs around focus and focus order * fix(dialog): add `accessible-label` to the `no-headings.html` demo * fix(dialog): update content in `no-header-content.html` demo * fix(dialog): horizontally center dialogs with `variant`/`width` attributes * fix(dialog): position top / modal width variants sizing * fix(dialog): add `rh-*` elements to list of focusable selectors. * fix(dialog): update close button spacing/height/width. * fix(dialog): re-add `--rh-dialog-close-button-color` * fix(dialog): decrease close button size, fix video modal close button color * fix(dialog): add close button color variable to icon declaration * fix(dialog): remove `trapFocus();` function See: https://github.com/RedHat-UX/red-hat-design-system/pull/2078/files#r1877655958 * chore(dialog): update changeset wording about overlay Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to `rh-cta` host Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to `rh-cta` host Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): update accessible name wording on a11y page Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): a11y accessible label wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): tweak accessible label fallback text wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): spelling fix Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): a11y name jsdoc wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to CTA host's in all demos * docs(dialog): add and improve JSDoc formatting * refactor(dialog): use IDREF's for styling shadowdom * docs(dialog): a11y focus order and a11y name content * fix(dialog): only `sticky` the header when there's enough space * fix(dialog): add surface background color to close button * fix(dialog): add padding to sticky `#header` * fix(dialog): add space to bottom of `#header` * fix(dialog): prevent header space from covering body content * docs(dialog): update demo wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): remove `#onKeyDown` from `disconnectedCallback()` Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): add extra note on `overlay` depreciation to changeset * fix(dialog): ensure `#body` paragraph spacing is correct * fix(dialog): remove `closeOnOutsideClick` static * refactor(dialog): remove `@bound` from `onClick()` method * fix(dialog): remove outdated tab/shift+tab methods * refactor(dialog): remove `@bound` from public methods * fix(dialog): simplify color-palette logic * fix(dialog): allow `sm`/`md`/`lg` variants for video dialogs * docs(dialog): update images and some content, remove old images * docs(dialog): fix relative link * refactor(dialog): rename `offset` vars to be private * fix(dialog): update font family variable fallbacks * docs(dialog): fix video dialog image and remove old images --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> Co-authored-by: marionnegp <mapatel@redhat.com> * fix(back-to-top): demo visibility and logical properties (#2133) * fix(back-to-top): make element visible on base demo * fix(back-to-top): fix warnings demo, update demo content * fix(back-to-top): show element on position sticky demo * fix(back-to-top): use logical properties in demo styles * fix(back-to-top): target surface with `main` role in demo JS * chore(back-to-top): add changeset * fix(back-to-top): revert `svb` due to lack of baseline browser support * docs(back-to-top): remove position sticky demo * docs(back-to-top): remove scrollable page demo * fix(back-to-top): remove error/warning logs and warnings demo * chore(back-to-top): update changeset --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * refactor(disclosure): include qualified elements in escape trap selector * docs(disclosure): wrap demos in `<rh-surface>` for correct colors * test(disclosure): add additional tests * feat(announcement): add `<rh-announcement>` v2 (#2153) * feat(announcement): add `<rh-announcement>` Continuation on PR #1722. * fix(announcement): fix lint error from font stack * fix(announcement): remove unused variable * fix(announcement): dismissible button location * fix(announcement): fix dismissible demo spelling * refactor(announcement): alphabetize `#container` properties * fix(announcement): use appropriate token values for bkg color * feat(announcement): enable theming of the background of the `#container` * fix(announcement): remove content, body and cta parts * fix(announcement): rename attr `imgleft` to `image-position` * docs(announcement): add explainer text to image position demo * refactor(announcement): nest CSS selectors * fix(announcement): center align image on tablet+ viewports * feat(announcement): add lightdom CSS / improve FOUC * fix(announcement): proper rh-button a11y label attribute * docs(announcement): remove outdated docs files * fix(announcement): remove unneeded demo styles for `<main>` * fix(announcement): center image + content on mobile viewports * feat(announcement): add `block-start` to `image-position` property * docs(announcement): remove docs related to outdated CSS parts * docs(announcement): add docs for the close event * docs(announcement): add `image-position` examples to Dismissible demo * fix(announcement): increase close / dismiss button size * fix(announcement): spacing tweaks * fix(announcement): reference surface var for `.dark` bkg color * chore(announcement): normalize spacing in `calc` * refactor(announcement): nest css * fix(announcement): remove left padding from CTA * fix(announcement): restore padding to `inline-start` CTA on mobile viewports * chore(announcement): add announcement to repo status file * docs(announcement): add content to overview page * docs(announcement): add content to style page * docs(announcement): add content to guidelines page * docs(announcement): add content to accessibility page * docs(announcement): alt first * docs(announcement): move href to CTA host, no lightdom HTML * docs(announcement): remove fallbacks from vars in demo SVGs * docs(announcement): spelling fix, update attributes in announcement README * fix(announcement): rename lightdom.css to lightdom-shim.css * fix(announcement): remove lightdom shim dark color palette slotted content color definitions * test(announcement): add tests for close / dismiss functionality * fix(announcement): remove `--rh-color-surface-dark-alt` * docs(announcement): add note about personalization to Overview * test(announcement): nest actions in describe blocks * refactor(announcement): spelling for dismissible 👉 dismissABLE --------- Co-authored-by: Benny Powers <web@bennypowers.com> * fix(disclosure): update hover/focus/active dark bg color * docs(disclosure): nested disclosure demo tweaks * docs(disclosure): add documentation * docs(disclosure): remove disclosure from "Patterns" section * docs(disclosure): fix all elements screenshot * docs(disclosure): add table to Style > Hover * docs(disclosure): clarify Style hover and focus/active trigger language * docs(disclosure): a11y page content updates * fix(disclosure): color-palette / `light-dark` function updates from cubone * docs: remove shim from demos We should discourage use of the shims. SSR is our preferred solution for CLS * test(disclosure): basic functions * docs: color-palettes collage * docs: focus order inline * docs(accordion): more bimodal svg * docs(disclosure): more bimodal gfx * docs(disclosure): more inline svg * docs(disclosure): fix images in dark mode --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com> Co-authored-by: Benny Powers <web@bennypowers.com> Co-authored-by: marionnegp <mapatel@redhat.com> * test(alert): fix click close test * docs: make sure primary tag name appears in code page toc (#2235) * docs(elements-code): Changed Element heading levels on Code page so they show up in the TOC * docs: start code heading level at 1 * docs: render descriptions as MD closes #2237 --------- Co-authored-by: Benny Powers <web@bennypowers.com> * fix(subnav): overflow scrolling (#2212) * fix(subnav): correct overflow scrolling * fix(subnav): remove unused vars * fix(subnav): on first update rerun slotchange to reinit overflow with dsd * fix(subnav): move event listener back to firstupdated * test(subnav): add links to fixture * docs(subnav): update changeset Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(subnav): implement rtl support sans dir controller * fix(subnav): simplify css * docs: typos in update elements/rh-subnav/rh-subnav.ts --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs: fix context demo height (#2186) Ensures that the context background colour fills the page height * docs(pagination): remove `rh-surface` from pagination demos (#2243) * docs(pagination): unwrap `rh-surface` from demos * docs(pagination): remove prose about requiring `rh-surface` * fix(navigation-secondary): panel scrollbar visible only when overflowed (#2249) * fix(navigation-secondary): auto instead of explict scroll * chore: add changeset * docs(navigation-secondary): changeset grammar --------- Co-authored-by: Adam Johnson <adjohnso@redhat.com> * docs(cards+tiles): adding cards vs tiles context and cross links (#2245) * docs(cards+tiles): adding cards vs tiles context and cross links * docs(cards+tiles): fixing broken hash link * docs(cards+tiles): fixing description per Greg * docs(cards+tiles): Removing extra usage guidelines CTA per Marionne * docs: fix docs build lit's idiomatic typescript decorators transform is breaking stuff will require more investigation to see if we can fix it * feat(chip): add `<rh-chip>` (#2198) * fix(blockquote): fix center alignment, enforce blockquote font size and update Style docs (#2112) * fix(blockquote): override potential `max-width` for quote content * chore(blockquote): add changeset * fix(blockquote): use logical properties * fix(blockquote): update quote and author spacing * docs(blockquote): update maximum width size With direction from Marionne * feat(blockquote): limit width to 752px per docs * docs(blockquote): remove "Image of" at start of alt text * docs(blockquote): remove a11y note about `aria-label` * fix(blockquote): use standard media query size * docs(blockquote): re-add content to sizes table * docs(blockquote): fix and update themable tokens link on Style page * fix(blockquote): increase/correct slotted content `font-size` * fix(blockquote): use tag selector in CSS for quote * fix(blockquote): target `p` tag for blockquote specifically * fix(blockquote): use standard media query size * chore(blockquote): upgrade changeset to minor * fix(pagination): Colors, right to left demo, and logical properties (#2116) * fix(pagination): make bg of open variants transparent * fix(pagination): fallback colors for public and private variables * fix(pagination): use logical properties * fix(pagination): fix RTL demo layout * fix(pagination): wrap all pagination demos with `<rh-surface>` * fix(pagination): remove fallbacks to RHDS color tokens * chore(pagination): add changeset * docs(pagination): add docs about colors + surface * chore(pagination): downgrade changeset to patch Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(pagination): update changeset description Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(pagination): reword `rh-surface` requirement terminology, add alert note * docs(pagination): update 30-code.md --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * chore(blockquote): correct changeset level (#2137) * chore(blockquote): correct changeset level * chore(blockquote): update changeset Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * feat(dialog): use native HTML dialog element (#2078) * feat(dialog): use native `<dialog>` element Related to #1865. * chore(dialog): add changeset * fix(dialog): update color values to use new semantic tokens * fix(dialog): make surface wrap only dialog/modal * docs(dialog): update a11y docs around focus and focus order * fix(dialog): add `accessible-label` to the `no-headings.html` demo * fix(dialog): update content in `no-header-content.html` demo * fix(dialog): horizontally center dialogs with `variant`/`width` attributes * fix(dialog): position top / modal width variants sizing * fix(dialog): add `rh-*` elements to list of focusable selectors. * fix(dialog): update close button spacing/height/width. * fix(dialog): re-add `--rh-dialog-close-button-color` * fix(dialog): decrease close button size, fix video modal close button color * fix(dialog): add close button color variable to icon declaration * fix(dialog): remove `trapFocus();` function See: https://github.com/RedHat-UX/red-hat-design-system/pull/2078/files#r1877655958 * chore(dialog): update changeset wording about overlay Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to `rh-cta` host Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to `rh-cta` host Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): update accessible name wording on a11y page Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): a11y accessible label wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): tweak accessible label fallback text wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): spelling fix Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): a11y name jsdoc wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to CTA host's in all demos * docs(dialog): add and improve JSDoc formatting * refactor(dialog): use IDREF's for styling shadowdom * docs(dialog): a11y focus order and a11y name content * fix(dialog): only `sticky` the header when there's enough space * fix(dialog): add surface background color to close button * fix(dialog): add padding to sticky `#header` * fix(dialog): add space to bottom of `#header` * fix(dialog): prevent header space from covering body content * docs(dialog): update demo wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): remove `#onKeyDown` from `disconnectedCallback()` Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): add extra note on `overlay` depreciation to changeset * fix(dialog): ensure `#body` paragraph spacing is correct * fix(dialog): remove `closeOnOutsideClick` static * refactor(dialog): remove `@bound` from `onClick()` method * fix(dialog): remove outdated tab/shift+tab methods * refactor(dialog): remove `@bound` from public methods * fix(dialog): simplify color-palette logic * fix(dialog): allow `sm`/`md`/`lg` variants for video dialogs * docs(dialog): update images and some content, remove old images * docs(dialog): fix relative link * refactor(dialog): rename `offset` vars to be private * fix(dialog): update font family variable fallbacks * docs(dialog): fix video dialog image and remove old images --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> Co-authored-by: marionnegp <mapatel@redhat.com> * fix(back-to-top): demo visibility and logical properties (#2133) * fix(back-to-top): make element visible on base demo * fix(back-to-top): fix warnings demo, update demo content * fix(back-to-top): show element on position sticky demo * fix(back-to-top): use logical properties in demo styles * fix(back-to-top): target surface with `main` role in demo JS * chore(back-to-top): add changeset * fix(back-to-top): revert `svb` due to lack of baseline browser support * docs(back-to-top): remove position sticky demo * docs(back-to-top): remove scrollable page demo * fix(back-to-top): remove error/warning logs and warnings demo * chore(back-to-top): update changeset --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * feat(chip): add `<rh-chip>` * docs(chip): add events demo * feat(chip): add size and color variants (via Lit Context) * docs(chip): remove errant css prop docs * docs(chip): add chip to repoStatus.ts * docs(chip): add accurate overview image to Overview page * docs(chip): add bespoke names to each chip in demos * docs(chip): wrap chips in a surface for appropriate colors * feat(chip): support dark color palettes * fix(chip): use `change` instead of `input` event * feat(chip): add ability to use a custom `value` attribute * refactor(chip): rename input `@query` var * refactor(chip): rename `name` and `value` properties * fix(chip): change close icon to `close-circle` * feat(chip): only show close icon when selected * refactor(chip): nest close icon visibility CSS * feat(chip): animate close icon show/hide * feat(chip): implement selected hover colors * feat(chip): make `<legend>` inline with chips * feat(chip): add `disabled` state * fix(chip): correct font sizes * fix(chip): update colors based on v1b design WIP for blue variant and dark chips * fix(chip): remove light blue variant * fix(chip): remove medium chip size. default to `lg`. * fix(chip): match colors to design specs * refactor(chip): change color variables * docs(chip): add changeset * fix(chip): checked and hover checked border color * docs(chip): prose to README * fix(chip): remove chip-group container * feat(chip): add `accessible-label` attr for `rh-chip-group` + default content for slot * refactor(chip): rename keydown function * refactor(chip): add quotes to chip attributes * docs(chip): markdown-ify a11y keys table * fix(chip): `ChipChangeEvent` changes * test(chip): separate test files and add more tests * fix(chip): remove `name` attribute * fix(chip): allow many chips to wrap onto second line * fix(chip): add token to close icon margin * feat(chip): add checked disabled chip capability + tests * feat(chip): add clear filters / uncheck all button * fix(chip): disabled checked chips on dark color schemes * fix(chip): only set `checked` prop on `chipInput` when it exists in shadowdom * test(chip): make test fn's async * fix(chip): ensure `Red Hat Text` font family * fix(chip): match clear all to design specs * refactor(chip): alphabetize close icon properties * refactor(chip): change "Clear filters" to "Clear all" * style(chip): lint chip group css * docs(chip): update all elements screenshot * docs(chip): update chip all elements description / summary * fix(chip): reduce layout jank on selection with long chip labels * fix(chip): update to use `light-dark()` for `color-palette` * fix(chip): make "Clear all" visible by default / not an attr * fix(chip): multiline spacing / margin * docs(chip): add content to overview, style, guidelines * docs(chip): a11y page * docs(chip): add color palette attr to uxdot-example tags * docs(chip): update a11y focus content and image * refactor(chip): simplify context * fix(chip): make chip a FACE * fix(chip): implement focus/active states according to specs * docs(chip): update style focus and active light/dark scheme images * fix(chip): form control * fix(chip): 2px border on label focus * fix(chip): font sizes * fix(chip): remove unnecessary `@starting-style` animation props * fix(chip): testing dp context workaround * fix(chip): testing dp context workaround * fix(chip): change order of effect ?? maybe will hel p * fix(chip): import `rh-chip` + chip group in size.html demo * fix(chip): label size sm font size --------- Co-authored-by: Steven Spriggs <steven.spriggs@gmail.com> Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> Co-authored-by: marionnegp <mapatel@redhat.com> Co-authored-by: Benny Powers <web@bennypowers.com> * fix(card): change header slot's top margin (#2256) * fix(card): fix header slot spacing * fix(card): add changeset * docs(elements-code): fixing accordion + table background colors (#2251) * docs(elements-code): fixing accordion + table background colors * style(code-docs): fix css linting error * style(code-docs): fix css linting error again? * docs(chip): improve consistency and formatting (#2260) * docs(foundations): adding usage of black color content (#2253) * docs(foundations): adding usage of black color content * docs(foundations): fixing typo in use of black section * docs(foundations): Fixing the Brand Red image width under Color > Usage * refactor: element docs pages data flow (#2141) * refactor: element docs pages data flow * refactor: mostly whitespace changes * docs(blockquote): updating blockquote docs including element description and images (#2258) * fix(blockquote): updating blockquote docs including element description and images * docs(blockquote): replacing theme with color scheme * fix(blockquote): doc revisions on theme > scheme and removing changeset * fix(tile): float footer arrow when footer is empty (#2096) * fix(tile): float footer arrow when footer is empty * fix(tile): fixing empty footer + arrow collision * fix(tile): adding back empty footer fixes * style(tile): fix css lint errors * fix(tile): adding in css prop fallbacks * chore(tile): add changeset * docs: update .changeset/hip-lamps-rule.md --------- Co-authored-by: Mark Caron <mark.caron@gmail.com> * fix(dialog): remove deprecated `#overlay` in favor of CSS `::backdrop` (#2252) * fix(dialog): remove deprecated `#overlay` in favor of `::backdrop` * fix(dialog): convert to logical property Intentionally setting this on `block` and not `block-start`. * fix(dialog): remove ability to customize overlay/backdrop * docs(dialog): update changeset before/after about feature removal * docs(dialog): update changeset to reference theming * docs: changeset remove mention of internal apis --------- Co-authored-by: Benny Powers <web@bennypowers.com> * perf: remove dircontroller (#2240) * perf(switch): remove DirController * fix(audio-player): rtl * perf(tabs): remove DirController * perf(accordion): remove DirController * perf(navigation-secondary): remove DirController * perf(pagination): remove DirController * perf(cta): remove DirController * perf: remove DirController * fix(audio-player): poster rtl * fix(audio-player): error on load * docs: update .changeset/fancy-cows-return.md Co-authored-by: Adam Johnson <adjohnso@redhat.com> * fix(cta): dir css * docs(navigation-secondary): right-to-left * fix(navigation-secondary): rtl css * docs(switch): rename rtl demo * docs(cta): shadow root color --------- Co-authored-by: Adam Johnson <adjohnso@redhat.com> * fix(pagination): report dom violations we should eventually remove this * docs: add semi-automatic importmap and CDN references (#2226) * Generated importmap * docs: semi-automatic importmap and CDN references * docs: fixing importmap generator * docs(developers): Reorganizing CDN info on Installation page as well as adding TOCs to the other Get Started: Developers pages * docs(developers): improving the landing page for the Developers * docs(developers): updating get started landing page for developers * docs(developers): fixing typo * Update 'Importing' Instructions * Add colon * PR feedback changes * docs: minor text change * style: comma * docs: fix import map --------- Co-authored-by: Mark Caron <mark.caron@gmail.com> Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> Co-authored-by: Benny Powers <web@bennypowers.com> * feat(dialog): enable dark color scheme (#2254) * feat(dialog): enable dark color scheme * docs(dialog): add changeset * fix(dialog): force light scheme dialog bkg to be white * style(dialog): lint CSS * docs(dialog): update color scheme info * docs(dialog): unify dark image alignment * docs(dialog): add prose about dialog color scheme page vs. container * docs: best practice --------- Co-authored-by: marionnegp <mapatel@redhat.com> Co-authored-by: Benny Powers <web@bennypowers.com> Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(typography): add new content (#2236) * docs(typography): add new content * docs(typography): add more content * docs(typography): make cards same height and clean up css * docs: remove commented out content * docs(typography): fix tables * docs: trailing script (#2241) Closes #2238 * docs(typography): move images from assets folder to typography folder * docs(typography): fix google fonts link * docs(typography): update cards' ctas * docs(typography): fix permalinks * docs(typography): fix image and page URLs * docs(typography): fix links and images * docs(typography): update permalink * docs(typography): fix typos in guidelines * docs(typography): fix typos and add background colors * docs(typography): remove word * docs(typography): fix link --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(blockquote): updated guidelines prose (#2267) * fix(accordion): expanded and expanded-index attributes (#2035) * test(accordion): expand tests * docs(accordion): improve demos * fix(accordion): correct expanded and expanded-index functionality * chore(accordion): add changeset * docs: use rh-accordion in expanded-index jsdoc * docs(accordion): remove repetitive comments * fix(accordion): collapse all before updating expanded-index * docs: user-facing docs should avoid referencing aria * docs: trailing script (#2241) Closes #2238 * docs: differentiate "Using color alone" sections on multiple pages (#2223) * docs: reworked a11y>design content and cleaned up foundations>color * docs: minor text tweaks * docs: punctuation fix * docs: moved some content from a11y to foundations * docs: added general guidance on non-color cues. --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs: fix get started dev/design cross-link 404s (#2247) Updated get started dev/design cross link hrefs Co-authored-by: Mark Caron <markcaron@users.noreply.github.com> * chore: repair bad merge * fix(accordion): correct expanded attribute logic * docs: update .changeset/smart-swans-move.md --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> Co-authored-by: Greg Gibson <642695+hellogreg@users.noreply.github.com> Co-authored-by: Mark Caron <markcaron@users.noreply.github.com> Co-authored-by: Benny Powers <web@bennypowers.com> * docs: bimodal overview graphics (#2272) * docs: remove unused code * docs: remove console.log * docs: remove unneccessary trim call * docs: inline the overview svg * docs(tag): bimodal overview * docs(chip): bimodal overview * docs(icon): bimodal overview * docs(card): bimodal overview * docs(badge): bimodal overview * docs(switch): bimodal overview * docs(popover): bimodal overview * docs(jump-links): bimodal overview * docs(breadcrumb): bimodal overview * docs(blockquote): bimodal overview * docs(pagination): bimodal overview * fix(pagination): dark mode input and border colors * docs(video-embed): bimodal overview * docs(site-status): bimodal overview * docs(announcement): not-quite-bimodal overview * docs(health-index): bimodal overview * docs(progress-steps): light background for overview svg * docs: changeset * docs: add `color-palette=lightest` to `<uxdot-example>`s (#2228) * docs: add color-palette to <uxdot-example>s * docs: add lightest color palette to images that can't be read in dark mode --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * feat(navigation-primary): add navigation primary (#2171) * fix(blockquote): fix center alignment, enforce blockquote font size and update Style docs (#2112) * fix(blockquote): override potential `max-width` for quote content * chore(blockquote): add changeset * fix(blockquote): use logical properties * fix(blockquote): update quote and author spacing * docs(blockquote): update maximum width size With direction from Marionne * feat(blockquote): limit width to 752px per docs * docs(blockquote): remove "Image of" at start of alt text * docs(blockquote): remove a11y note about `aria-label` * fix(blockquote): use standard media query size * docs(blockquote): re-add content to sizes table * docs(blockquote): fix and update themable tokens link on Style page * fix(blockquote): increase/correct slotted content `font-size` * fix(blockquote): use tag selector in CSS for quote * fix(blockquote): target `p` tag for blockquote specifically * fix(blockquote): use standard media query size * chore(blockquote): upgrade changeset to minor * fix(pagination): Colors, right to left demo, and logical properties (#2116) * fix(pagination): make bg of open variants transparent * fix(pagination): fallback colors for public and private variables * fix(pagination): use logical properties * fix(pagination): fix RTL demo layout * fix(pagination): wrap all pagination demos with `<rh-surface>` * fix(pagination): remove fallbacks to RHDS color tokens * chore(pagination): add changeset * docs(pagination): add docs about colors + surface * chore(pagination): downgrade changeset to patch Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(pagination): update changeset description Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(pagination): reword `rh-surface` requirement terminology, add alert note * docs(pagination): update 30-code.md --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * chore(blockquote): correct changeset level (#2137) * chore(blockquote): correct changeset level * chore(blockquote): update changeset Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * feat(dialog): use native HTML dialog element (#2078) * feat(dialog): use native `<dialog>` element Related to #1865. * chore(dialog): add changeset * fix(dialog): update color values to use new semantic tokens * fix(dialog): make surface wrap only dialog/modal * docs(dialog): update a11y docs around focus and focus order * fix(dialog): add `accessible-label` to the `no-headings.html` demo * fix(dialog): update content in `no-header-content.html` demo * fix(dialog): horizontally center dialogs with `variant`/`width` attributes * fix(dialog): position top / modal width variants sizing * fix(dialog): add `rh-*` elements to list of focusable selectors. * fix(dialog): update close button spacing/height/width. * fix(dialog): re-add `--rh-dialog-close-button-color` * fix(dialog): decrease close button size, fix video modal close button color * fix(dialog): add close button color variable to icon declaration * fix(dialog): remove `trapFocus();` function See: https://github.com/RedHat-UX/red-hat-design-system/pull/2078/files#r1877655958 * chore(dialog): update changeset wording about overlay Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to `rh-cta` host Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to `rh-cta` host Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): update accessible name wording on a11y page Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): a11y accessible label wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): tweak accessible label fallback text wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): spelling fix Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): a11y name jsdoc wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): add `href` to CTA host's in all demos * docs(dialog): add and improve JSDoc formatting * refactor(dialog): use IDREF's for styling shadowdom * docs(dialog): a11y focus order and a11y name content * fix(dialog): only `sticky` the header when there's enough space * fix(dialog): add surface background color to close button * fix(dialog): add padding to sticky `#header` * fix(dialog): add space to bottom of `#header` * fix(dialog): prevent header space from covering body content * docs(dialog): update demo wording Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * fix(dialog): remove `#onKeyDown` from `disconnectedCallback()` Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * docs(dialog): add extra note on `overlay` depreciation to changeset * fix(dialog): ensure `#body` paragraph spacing is correct * fix(dialog): remove `closeOnOutsideClick` static * refactor(dialog): remove `@bound` from `onClick()` method * fix(dialog): remove outdated tab/shift+tab methods * refactor(dialog): remove `@bound` from public methods * fix(dialog): simplify color-palette logic * fix(dialog): allow `sm`/`md`/`lg` variants for video dialogs * docs(dialog): update images and some content, remove old images * docs(dialog): fix relative link * refactor(dialog): rename `offset` vars to be private * fix(dialog): update font family variable fallbacks * docs(dialog): fix video dialog image and remove old images --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> Co-authored-by: marionnegp <mapatel@redhat.com> * fix(back-to-top): demo visibility and logical properties (#2133) * fix(back-to-top): make element visible on base demo * fix(back-to-top): fix warnings demo, update demo content * fix(back-to-top): show element on position sticky demo * fix(back-to-top): use logical properties in demo styles * fix(back-to-top): target surface with `main` role in demo JS * chore(back-to-top): add changeset * fix(back-to-top): revert `svb` due to lack of baseline browser support * docs(back-to-top): remove position sticky demo * docs(back-to-top): remove scrollable page demo * fix(back-to-top): remove error/warning logs and warnings demo * chore(back-to-top): update changeset --------- Co-authored-by: Benny Powers - עם ישראל חי! <bennypowers@users.noreply.github.com> * feat(navigation-primary): add navigation primary * fix(navigation-primary): intrinsic list for nav items, updated slot api names * fix(navigation-primary): refactor onExpand * feat(announcement): add `<rh-announcement>` v2 (#2153) * feat(announcement): add `<rh-announcement>` Continuation on PR #1722. * fix(announcement): fix lint error from font stack * fix(announcement): remove unused variable * fix(announcement): dismissible button location * fix(announcement): fix dismissible demo spelling * refactor(announcement): alphabetize `#container` properties * fix(announcement): use appropriate token values for bkg color * feat(announcement): enable theming of the background of the `#container` * fix(announcement): remove content, body and cta parts * fix(announcement): rename attr `imgleft` to `image-position` * docs(announcement): add explainer text to image position demo * refactor(announcement): nest CSS selectors * fix(announcement): center align image on tablet+ viewports * feat(announcement): add lightdom CSS / improve FOUC * fix(announcement): proper rh-button a11y label attribute * docs(announcement): remove outdated docs files * fix(announcement): remove unneeded demo styles for `<main>` * fix(announcement): center image + content on mobile viewports * feat(announcement): add `block-start` to `image-position` property * docs(announcement): remove docs related to outdated CSS parts * docs(announcement): add docs for the close event * docs(announcement): add `image-position` examples to Dismissible demo * fix(announcement): increase close / dismiss button size * fix(announcement): spacing tweaks * fix(announcement): reference surface var for `.dark` bkg color * chore(announcement): normalize spacing in `calc` * refactor(announcement): nest css * fix(announcement): remove left padding from CTA * fix(announcement): restore padding to `inline-start` CTA on mobile viewports * chore(announcement): add announcement to repo status file * docs(announcement): add content to overview page * docs(announcement): add content to style page * docs(announcement): add content to guidelines page * docs(announcement): add content to accessibility page * docs(announcement): alt first * docs(announcement): move href to CTA host, no lightdom HTML * docs(announcement): remove fallbacks from vars in demo SVGs * docs(announcement): spelling fix, update attributes in announcement README * fix(announcement): rename lightdom.css to lightdom-shim.css * fix(announcement): remove lightdom shim dark color palette slotted content color definitions * test(announcement): add tests for close / dismiss functionality * fix(announcement): remove `--rh-color-surface-dark-alt` * docs(announcement): add note about personalization to Overview * test(announcement): nest actions in describe blocks * refactor(announcement): spelling for dismissible 👉 dismissABLE --------- Co-authored-by: Benny Powers <web@bennypowers.com> * fix(navigation-primary): remove universal design, update to latest styles * fix(avatar): remove grid layout from plain avatar * chore: add changeset for avatar change * fix(navigation-item): correct slots controller * fix(navigation-primary): update colors to match design * fix(navigation-primary): align menu styles add more mock content * fix(navigation-primary): update caret icons to subtle color * fix(navigation-primary): lower breakpoint for links * fix(navigation-primary): adjust icon sizes and spacing * docs(navigation-primary): override padding for context demo * fix(navigation-primary): paddding adjustments * fix(navigation-secondary): add gradient t…
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
6 participants
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
What I did
<rh-navigation-primary>Closes #375
Closes #2268
TODO
standaloneinstead, agroupoption? Putting it on the hamburger items instead. I feel the idea of a standalone link in the slots="links" is a bit confusing as standalone has more to do with how the dropdowns work at different breakpoints and specifically inside the hamburger or not.Testing Instructions
<rh-navigation-primary>demoNotes to Reviewers
Review the code and look for anything glaringly out of sorts. Is the documentation good enough? Design review for any spacing issues. Look for anything off with colors in context demos. Accessibility review: How does this sound in screen readers? We still have the issue with a single list item for the event slot. Maybe a fix for that can be followed up with a patch release.
There are some non standard icon sizes used reference RedHat-UX/red-hat-design-tokens#163