From b96c3f318b85310d337219ceb0f3c4b51d56025b Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Thu, 29 May 2025 13:10:53 -0400 Subject: [PATCH] Simplify native styles (#993) MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit * move print styles * begin native styles split * unsplit button styles 😓 * unsplit callout; remove .wa-callout * merge forms * remove unused * remove unused * unsplit checkbox * remove old astro config * remove overflow * unsplit slider * fix tooltip position in RTL * unsplit radio * move required light DOM styles to * remove unused file * remove unused import * remove * goodbye * fix examples * unsplit dialog * unsplit select * remove select * unsplit input * unsplit details * update * update comment * update textarea * combine native docs; improvements * update * reorg and fix headings * fix details summary padding; fixes #684 * update * fix native details summary padding; fixes #684 * #684 * remove passthrough style nonsense * it's CSS not JS * fix details in sidebar * add spacing in native buttons for icons * whitespace * update docs * remove button group util * remove shadow folder, add component folder * layerize * default border radius * remove color contrast script from dist * add term * layerize themes + color folders * reorder * remove radio button; #504 * remove visual tests * remove visual tests * remove unused stylesheet * make search smarter * add radio styles * Fix filled textareas * re-introduce visual tests (with adjustments) * fix button appearances * fix textarea focus styles * re-introduce appearance classes * remove 'native styles' note from component pages * fix checked radio styles * touch up callout styles * remove errant `.wa-tag` * scope appearance classes to relevant elements * more visual test cases * fix details borders * minor visual tests reorg * add `--box-shadow` to buttons * fix Awesome theme * use same layer for all themes (allows unset properties to inherit from Default theme) * fix box-shadow in wa-textarea * set button box shadow to `initial` * fix Active theme * fix Brutalist theme * fix Glossy theme * fix Matter theme (mostly) * fix Playful theme * fix Premium theme * fix Shoelac theme * fix Tailspin theme * fix custom radio button styles * fix links to native styles doc --------- Co-authored-by: lindsaym-fa --- cspell.json | 4 + docs/_includes/head.njk | 2 - docs/_includes/sidebar.njk | 38 +- docs/_includes/status.njk | 7 +- docs/_includes/visual-tests/native.njk | 397 ++--- docs/_includes/visual-tests/size.njk | 48 +- docs/_layouts/component.njk | 11 - docs/assets/scripts/search.js | 91 +- docs/assets/styles/code-examples.css | 5 +- docs/assets/styles/docs.css | 160 +-- docs/assets/styles/ui.css | 4 +- docs/assets/vue/components/swatch-select.js | 2 +- docs/docs/components/button-group.md | 10 +- docs/docs/components/page.md | 12 +- docs/docs/components/radio-button.md | 151 -- docs/docs/components/radio-group.md | 18 +- docs/docs/components/textarea.md | 6 +- docs/docs/customizing.md | 7 +- docs/docs/experimental/themer.md | 24 +- docs/docs/index.md | 2 +- docs/docs/layout.njk | 2 +- docs/docs/native/button.md | 144 -- docs/docs/native/callout.md | 117 -- docs/docs/native/checkbox.md | 90 -- docs/docs/native/content.md | 92 -- docs/docs/native/details.md | 82 -- docs/docs/native/dialog.md | 37 - docs/docs/native/index.njk | 86 -- docs/docs/native/input.md | 85 -- docs/docs/native/lists.md | 38 - docs/docs/native/native.json | 4 - docs/docs/native/progress.md | 31 - docs/docs/native/radio.md | 93 -- docs/docs/native/select.md | 72 - docs/docs/native/slider.md | 54 - docs/docs/native/table.md | 136 -- docs/docs/native/textarea.md | 38 - docs/docs/patterns/app/permissions.md | 10 +- .../patterns/ecommerce/product-overview.md | 66 +- docs/docs/patterns/index.njk | 2 +- docs/docs/resources/changelog.md | 26 +- docs/docs/resources/contributing.md | 8 +- docs/docs/resources/visual-tests.md | 32 +- docs/docs/themes/matter.md | 2 +- docs/docs/utilities/appearance.md | 99 -- docs/docs/utilities/color.md | 8 +- docs/docs/utilities/fouce.md | 2 +- docs/docs/utilities/index.njk | 2 +- docs/docs/utilities/native.md | 456 ++++++ docs/docs/utilities/rounding.md | 1 - docs/docs/utilities/size.md | 165 --- docs/src/env.d.ts | 2 - package.json | 2 +- .../color-palette-contrast-test.js | 2 +- src/components/button-group/button-group.css | 40 + src/components/button-group/button-group.ts | 6 +- src/components/button/button.css | 162 ++- src/components/button/button.ts | 9 +- src/components/callout/callout.css | 21 +- src/components/callout/callout.ts | 3 +- src/components/card/card.css | 5 +- src/components/checkbox/checkbox.css | 70 +- src/components/checkbox/checkbox.ts | 5 +- src/components/color-picker/color-picker.ts | 2 +- src/components/details/details.css | 74 +- src/components/details/details.ts | 4 +- src/components/input/input.css | 117 +- src/components/input/input.ts | 7 +- src/components/page/page.ts | 44 +- src/components/progress-bar/progress-bar.css | 14 +- src/components/progress-bar/progress-bar.ts | 3 +- src/components/radio-button/radio-button.css | 77 - .../radio-button/radio-button.test.ts | 28 - src/components/radio-button/radio-button.ts | 160 --- src/components/radio-group/radio-group.css | 15 +- .../radio-group/radio-group.test.ts | 38 - src/components/radio-group/radio-group.ts | 119 +- src/components/radio/radio.css | 174 ++- src/components/radio/radio.ts | 8 +- src/components/select/select.css | 58 +- src/components/select/select.ts | 5 +- src/components/slider/slider.css | 157 +- src/components/slider/slider.ts | 5 +- src/components/switch/switch.ts | 2 +- src/components/textarea/textarea.css | 77 +- src/components/textarea/textarea.ts | 7 +- src/internal/webawesome-element.ts | 2 +- src/styles/brand/blue.css | 62 +- src/styles/brand/cyan.css | 62 +- src/styles/brand/gray.css | 62 +- src/styles/brand/green.css | 62 +- src/styles/brand/indigo.css | 62 +- src/styles/brand/orange.css | 62 +- src/styles/brand/pink.css | 62 +- src/styles/brand/purple.css | 62 +- src/styles/brand/red.css | 62 +- src/styles/brand/yellow.css | 62 +- src/styles/color/anodized.css | 270 ++-- src/styles/color/base.css | 662 +++++---- src/styles/color/bright.css | 270 ++-- src/styles/color/default.css | 270 ++-- src/styles/color/elegant.css | 270 ++-- src/styles/color/mild.css | 270 ++-- src/styles/color/natural.css | 270 ++-- src/styles/color/rudimentary.css | 270 ++-- src/styles/color/shoelace.css | 270 ++-- src/styles/color/vogue.css | 270 ++-- .../{shadow => component}/form-control.css | 0 .../component.css => component/host.css} | 0 src/styles/components/README.md | 3 - src/styles/components/page.css | 25 - src/styles/danger/blue.css | 62 +- src/styles/danger/cyan.css | 62 +- src/styles/danger/gray.css | 62 +- src/styles/danger/green.css | 62 +- src/styles/danger/indigo.css | 62 +- src/styles/danger/orange.css | 62 +- src/styles/danger/pink.css | 62 +- src/styles/danger/purple.css | 62 +- src/styles/danger/red.css | 62 +- src/styles/danger/yellow.css | 62 +- src/styles/forms.css | 23 - src/styles/native.css | 1280 ++++++++++++++++- src/styles/native/base.css | 58 - src/styles/native/blockquote.css | 19 - src/styles/native/button.css | 118 -- src/styles/native/callout.css | 20 - src/styles/native/checkbox.css | 107 -- src/styles/native/code.css | 59 - src/styles/native/color-picker.css | 31 - src/styles/native/content.css | 161 --- src/styles/native/details.css | 77 - src/styles/native/dialog.css | 141 -- src/styles/native/forms.css | 53 - src/styles/native/input.css | 128 -- src/styles/native/lists.css | 29 - src/styles/native/progress.css | 56 - src/styles/native/radio.css | 97 -- src/styles/native/select.css | 83 -- src/styles/native/slider.css | 140 -- src/styles/native/tables.css | 44 - src/styles/neutral/blue.css | 62 +- src/styles/neutral/cyan.css | 62 +- src/styles/neutral/gray.css | 62 +- src/styles/neutral/green.css | 62 +- src/styles/neutral/indigo.css | 62 +- src/styles/neutral/orange.css | 62 +- src/styles/neutral/pink.css | 62 +- src/styles/neutral/purple.css | 62 +- src/styles/neutral/red.css | 62 +- src/styles/neutral/yellow.css | 62 +- src/styles/shadow/passthrough.css | 25 - src/styles/success/blue.css | 62 +- src/styles/success/cyan.css | 62 +- src/styles/success/gray.css | 62 +- src/styles/success/green.css | 62 +- src/styles/success/indigo.css | 62 +- src/styles/success/orange.css | 62 +- src/styles/success/pink.css | 62 +- src/styles/success/purple.css | 62 +- src/styles/success/red.css | 62 +- src/styles/success/yellow.css | 62 +- src/styles/themes/active.css | 22 +- src/styles/themes/active/color.css | 224 +-- src/styles/themes/active/dimension.css | 102 +- src/styles/themes/active/overrides.css | 18 +- src/styles/themes/active/typography.css | 14 +- src/styles/themes/awesome.css | 52 +- src/styles/themes/awesome/color.css | 210 +-- src/styles/themes/awesome/dimension.css | 176 ++- src/styles/themes/awesome/overrides.css | 103 +- src/styles/themes/awesome/typography.css | 22 +- src/styles/themes/brutalist.css | 42 +- src/styles/themes/brutalist/color.css | 232 +-- src/styles/themes/brutalist/overrides.css | 149 +- src/styles/themes/brutalist/typography.css | 18 +- src/styles/themes/default.css | 4 + src/styles/themes/default/color.css | 300 ++-- src/styles/themes/default/groups.css | 74 +- src/styles/themes/default/outlines.css | 30 +- src/styles/themes/default/rounding.css | 26 +- src/styles/themes/default/shadows.css | 52 +- src/styles/themes/default/space.css | 32 +- src/styles/themes/default/transitions.css | 16 +- src/styles/themes/default/typography.css | 64 +- src/styles/themes/glossy.css | 26 +- src/styles/themes/glossy/dimension.css | 212 ++- src/styles/themes/glossy/overrides.css | 34 +- src/styles/themes/glossy/typography.css | 20 +- src/styles/themes/matter.css | 44 +- src/styles/themes/matter/color.css | 228 +-- src/styles/themes/matter/overrides.css | 383 ++--- src/styles/themes/matter/typography.css | 20 +- src/styles/themes/mellow.css | 40 +- src/styles/themes/mellow/color.css | 146 +- src/styles/themes/mellow/overrides.css | 53 +- src/styles/themes/mellow/typography.css | 18 +- src/styles/themes/playful.css | 38 +- src/styles/themes/playful/color.css | 230 +-- src/styles/themes/playful/dimension.css | 234 ++- src/styles/themes/playful/overrides.css | 57 +- src/styles/themes/playful/typography.css | 32 +- src/styles/themes/premium.css | 36 +- src/styles/themes/premium/color.css | 230 +-- src/styles/themes/premium/overrides.css | 70 +- src/styles/themes/premium/typography.css | 28 +- src/styles/themes/shoelace.css | 52 +- src/styles/themes/shoelace/color.css | 208 +-- src/styles/themes/shoelace/overrides.css | 228 ++- src/styles/themes/shoelace/typography.css | 20 +- src/styles/themes/tailspin.css | 42 +- src/styles/themes/tailspin/color.css | 238 +-- src/styles/themes/tailspin/overrides.css | 100 +- src/styles/themes/tailspin/typography.css | 18 +- src/styles/utilities/align-items.css | 30 +- src/styles/utilities/appearance.css | 116 +- src/styles/utilities/border-radius.css | 36 +- src/styles/utilities/button-group.css | 75 - src/styles/utilities/fouce.css | 26 +- src/styles/utilities/gap.css | 90 +- src/styles/utilities/layout.css | 278 ++-- src/styles/utilities/placeholder.css | 14 +- src/styles/utilities/scroll-lock.css | 30 +- src/styles/utilities/size.css | 158 +- src/styles/utilities/text.css | 236 +-- src/styles/utilities/variants.css | 299 ++-- src/styles/utilities/variants.css.js | 68 - src/styles/utilities/visually-hidden.css | 24 +- src/styles/warning/blue.css | 62 +- src/styles/warning/cyan.css | 62 +- src/styles/warning/gray.css | 62 +- src/styles/warning/green.css | 62 +- src/styles/warning/indigo.css | 62 +- src/styles/warning/orange.css | 62 +- src/styles/warning/pink.css | 62 +- src/styles/warning/purple.css | 62 +- src/styles/warning/red.css | 62 +- src/styles/warning/yellow.css | 62 +- src/styles/webawesome.css | 4 - 239 files changed, 9488 insertions(+), 10635 deletions(-) delete mode 100644 docs/docs/components/radio-button.md delete mode 100644 docs/docs/native/button.md delete mode 100644 docs/docs/native/callout.md delete mode 100644 docs/docs/native/checkbox.md delete mode 100644 docs/docs/native/content.md delete mode 100644 docs/docs/native/details.md delete mode 100644 docs/docs/native/dialog.md delete mode 100644 docs/docs/native/index.njk delete mode 100644 docs/docs/native/input.md delete mode 100644 docs/docs/native/lists.md delete mode 100644 docs/docs/native/native.json delete mode 100644 docs/docs/native/progress.md delete mode 100644 docs/docs/native/radio.md delete mode 100644 docs/docs/native/select.md delete mode 100644 docs/docs/native/slider.md delete mode 100644 docs/docs/native/table.md delete mode 100644 docs/docs/native/textarea.md delete mode 100644 docs/docs/utilities/appearance.md create mode 100644 docs/docs/utilities/native.md delete mode 100644 docs/docs/utilities/size.md delete mode 100644 docs/src/env.d.ts rename src/styles/color/contrast.test.js => scripts/color-palette-contrast-test.js (96%) delete mode 100644 src/components/radio-button/radio-button.css delete mode 100644 src/components/radio-button/radio-button.test.ts delete mode 100644 src/components/radio-button/radio-button.ts rename src/styles/{shadow => component}/form-control.css (100%) rename src/styles/{shadow/component.css => component/host.css} (100%) delete mode 100644 src/styles/components/README.md delete mode 100644 src/styles/components/page.css delete mode 100644 src/styles/forms.css delete mode 100644 src/styles/native/base.css delete mode 100644 src/styles/native/blockquote.css delete mode 100644 src/styles/native/button.css delete mode 100644 src/styles/native/callout.css delete mode 100644 src/styles/native/checkbox.css delete mode 100644 src/styles/native/code.css delete mode 100644 src/styles/native/color-picker.css delete mode 100644 src/styles/native/content.css delete mode 100644 src/styles/native/details.css delete mode 100644 src/styles/native/dialog.css delete mode 100644 src/styles/native/forms.css delete mode 100644 src/styles/native/input.css delete mode 100644 src/styles/native/lists.css delete mode 100644 src/styles/native/progress.css delete mode 100644 src/styles/native/radio.css delete mode 100644 src/styles/native/select.css delete mode 100644 src/styles/native/slider.css delete mode 100644 src/styles/native/tables.css delete mode 100644 src/styles/shadow/passthrough.css delete mode 100644 src/styles/utilities/button-group.css delete mode 100644 src/styles/utilities/variants.css.js diff --git a/cspell.json b/cspell.json index b0c92b9d7..29b93af05 100644 --- a/cspell.json +++ b/cspell.json @@ -15,16 +15,19 @@ "autoloading", "autoplay", "bezier", + "Blockquotes", "boxicons", "CACHEABLE", "callout", "callouts", + "canvastext", "chatbubble", "checkmark", "Clippy", "codebases", "codepen", "colocated", + "colorjs", "colour", "combobox", "Commonmark", @@ -131,6 +134,7 @@ "petabit", "Preact", "preconnect", + "prerendered", "prismjs", "progressbar", "radiogroup", diff --git a/docs/_includes/head.njk b/docs/_includes/head.njk index 3f3a2668e..b572509d1 100644 --- a/docs/_includes/head.njk +++ b/docs/_includes/head.njk @@ -48,8 +48,6 @@ {% endif %} - - {# Used by Web Awesome App to inject other assets into the head. #} {% server "head" %} diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index f96611dfc..8f6a0d40c 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -145,7 +145,6 @@ Radio Group
  • Rating
    • @@ -178,35 +177,6 @@ - - -

    - - Native Styles - - -

    - -     -

    @@ -216,14 +186,10 @@

    diff --git a/docs/_includes/status.njk b/docs/_includes/status.njk index 3ba32a88f..4ccb6845d 100644 --- a/docs/_includes/status.njk +++ b/docs/_includes/status.njk @@ -3,12 +3,7 @@ {% endif -%} {%- if status %} - {%- if status == "wip" %} - - - Work In Progress - - {%- elif status == "experimental" %} + {%- if status == "experimental" %} Experimental diff --git a/docs/_includes/visual-tests/native.njk b/docs/_includes/visual-tests/native.njk index 789d29337..891457013 100644 --- a/docs/_includes/visual-tests/native.njk +++ b/docs/_includes/visual-tests/native.njk @@ -6,7 +6,6 @@ <wa-button> <button> - .wa-button @@ -17,306 +16,168 @@ + + + accent + outlined - + + + + - .wa-brand + accent - + - - - - + - .wa-neutral + filled + outlined - + - - - - + - .wa-success + filled - + - - - - + - .wa-warning + outlined - + - - - - + - .wa-danger + plain - + - - - - + - .wa-accent + small - - - - - - - - - - - .wa-filled - - - - - - - - - - - - .wa-outlined - - - - - - - - - - - - .wa-plain - - - - - - - - - - - - .wa-size-s - - + Small - - - - .wa-size-m + medium - + Medium - - - - .wa-size-l + large - + Large - - - - .wa-pill + pill - + Pill - - - - - - - - - -

    Callout

    - -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    <wa-callout>.wa-callout
    default - Callout - - -
    .wa-brand - - - -
    .wa-neutral - - - -
    .wa-success - - - -
    .wa-warning - - - -
    .wa-danger - - - -
    .wa-accent - - - -
    .wa-filled - - - -
    .wa-outlined - - - -
    .wa-plain - - - -
    .wa-size-s - - - -
    .wa-size-m - - - -
    .wa-size-l - - - -
    .wa-pill - - - -
    @@ -425,7 +286,7 @@
    -

    Input

    +

    Input

    @@ -472,36 +333,36 @@ - + - + - + - + - + @@ -612,9 +473,9 @@ - + @@ -627,9 +488,9 @@ - + @@ -642,9 +503,9 @@ - + @@ -661,7 +522,7 @@ -

    Slider

    +

    Slider

    .wa-filledfilled - +
    .wa-size-ssmall - +
    .wa-size-mmedium - +
    .wa-size-llarge - + @@ -597,9 +458,9 @@
    .wa-filledfilled -
    .wa-size-ssmall -
    .wa-size-mmedium -
    .wa-size-llarge -
    @@ -685,7 +546,7 @@ -

    Textarea

    +

    Textarea

    @@ -705,36 +566,36 @@ - + - + - + - + @@ -549,14 +549,14 @@ @@ -564,14 +564,14 @@ @@ -599,8 +599,8 @@ Radio 2 - Radio 1 - Radio 2 + Radio 1 + Radio 2 @@ -611,8 +611,8 @@ Radio 2 @@ -626,8 +626,8 @@ Radio 2 - Radio 1 - Radio 2 + Radio 1 + Radio 2 @@ -638,8 +638,8 @@ Radio 2 @@ -653,8 +653,8 @@ Radio 2 - Radio 1 - Radio 2 + Radio 1 + Radio 2 @@ -665,8 +665,8 @@ Radio 2 diff --git a/docs/_layouts/component.njk b/docs/_layouts/component.njk index 8291943f7..774ef07fe 100644 --- a/docs/_layouts/component.njk +++ b/docs/_layouts/component.njk @@ -1,17 +1,6 @@ {% extends '../_layouts/block.njk' %} {% set component = components[page.fileSlug] %} -{# Component header #} -{% block notes %} - {% if native %} - - - Just want the styles? - Check out the {{ ('/docs/native/' + native + '/') | getTitleFromUrl }} native styles! - - {% endif %} -{% endblock %} - {# Component API #} {% block afterContent %} {# Slots #} diff --git a/docs/assets/scripts/search.js b/docs/assets/scripts/search.js index 73a5bdf2e..a461d0f99 100644 --- a/docs/assets/scripts/search.js +++ b/docs/assets/scripts/search.js @@ -4,14 +4,7 @@ const lunr = res[0].default; const searchData = await res[1].json(); const searchIndex = lunr.Index.load(searchData.searchIndex); const map = searchData.map; -const searchDebounce = 100; -const icons = { - component: 'puzzle-piece', - document: 'file', - home: 'house', - native: 'code', - theme: 'palette', -}; +const searchDebounce = 200; let searchTimeout; // We're using Turbo, so references to these elements aren't guaranteed to remain intact @@ -26,8 +19,12 @@ function getElements() { // Show the search dialog when slash (or CMD+K) is pressed and focus is not inside a form element document.addEventListener('keydown', event => { if ( - (event.key === '/' || (event.key === 'k' && (event.metaKey || event.ctrlKey))) && - !event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase())) + (event.key === 'k' && (event.metaKey || event.ctrlKey)) || + (event.key === '/' && + !event.composedPath().some(el => { + const tag = el?.tagName?.toLowerCase(); + return tag === 'textarea' || (tag === 'input' && !['checkbox', 'radio'].includes(el.type)); + })) ) { event.preventDefault(); show(); @@ -48,7 +45,7 @@ function show() { input.addEventListener('input', handleInput); results.addEventListener('click', handleSelection); dialog.addEventListener('keydown', handleKeyDown); - dialog.addEventListener('wa-hide', hide, { once: true }); + dialog.addEventListener('wa-hide', handleClose); dialog.open = true; } @@ -58,9 +55,17 @@ function hide() { input.removeEventListener('input', handleInput); results.removeEventListener('click', handleSelection); dialog.removeEventListener('keydown', handleKeyDown); + dialog.removeEventListener('wa-hide', handleClose); dialog.open = false; } +function handleClose() { + const { input } = getElements(); + + input.value = ''; + updateResults(); +} + function handleInput() { const { input } = getElements(); @@ -68,14 +73,6 @@ function handleInput() { searchTimeout = setTimeout(() => updateResults(input.value), searchDebounce); } -function handleClear() { - const { input } = getElements(); - - input.value = ''; - input.focus(); - updateResults(); -} - function handleKeyDown(event) { const { input, results } = getElements(); @@ -129,7 +126,12 @@ function handleSelection(event) { if (link) { event.preventDefault(); hide(); - location.href = link.href; + + if (window.Turbo) { + Turbo.visit(link.href); + } else { + location.href = link.href; + } } } @@ -139,11 +141,40 @@ async function updateResults(query = '') { try { const hasQuery = query.length > 0; - const searchTokens = query - .split(' ') - .map((term, index, arr) => `${term}${index === arr.length - 1 ? `* ${term}~1` : '~1'}`) - .join(' '); - const matches = hasQuery ? searchIndex.search(`${query} ${searchTokens}`) : []; + let matches = []; + + if (hasQuery) { + // Track seen refs to avoid duplicates + const seenRefs = new Set(); + + // Start with a standard search to get the best "exact match" result + searchIndex.search(`${query}`).forEach(match => { + matches.push(match); + seenRefs.add(match.ref); + }); + + // Add wildcard matches if not already included + searchIndex.search(`${query}*`).forEach(match => { + if (!seenRefs.has(match.ref)) { + matches.push(match); + seenRefs.add(match.ref); + } + }); + + // Add fuzzy search matches last + const fuzzyTokens = query + .split(' ') + .map(term => `${term}~1`) + .join(' '); + + searchIndex.search(fuzzyTokens).forEach(match => { + if (!seenRefs.has(match.ref)) { + matches.push(match); + seenRefs.add(match.ref); + } + }); + } + const hasResults = hasQuery && matches.length > 0; dialog.classList.toggle('has-results', hasQuery && hasResults); @@ -159,17 +190,17 @@ async function updateResults(query = '') { const displayTitle = page.title ?? ''; const displayDescription = page.description ?? ''; const displayUrl = page.url.replace(/^\//, ''); - let icon = icons.document; + let icon = 'file-text'; li.classList.add('site-search-result'); li.setAttribute('role', 'option'); li.setAttribute('id', `search-result-item-${match.ref}`); li.setAttribute('data-selected', index === 0 ? 'true' : 'false'); - if (page.url === '/') icon = icons.home; - if (page.url.startsWith('/docs/native')) icon = icons.native; - if (page.url.startsWith('/docs/components')) icon = icons.component; - if (page.url.startsWith('/docs/theme') || page.url.startsWith('/docs/restyle')) icon = icons.theme; + if (page.url === '/') icon = 'home'; + if (page.url.startsWith('/docs/utilities/native')) icon = 'code'; + if (page.url.startsWith('/docs/components')) icon = 'puzzle-piece'; + if (page.url.startsWith('/docs/theme') || page.url.startsWith('/docs/restyle')) icon = 'palette'; a.href = page.url; a.innerHTML = ` diff --git a/docs/assets/styles/code-examples.css b/docs/assets/styles/code-examples.css index 5b9aed022..c945ae45c 100644 --- a/docs/assets/styles/code-examples.css +++ b/docs/assets/styles/code-examples.css @@ -16,13 +16,12 @@ padding: 2rem 3.25rem 2rem 2rem; min-width: 20rem; max-width: 100%; - overflow: hidden; - > :first-child { + > :first-child:not(dialog) { margin-block-start: 0; } - > :last-child { + > :last-child:not(dialog) { margin-block-end: 0; } } diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 856f2d4ec..7b7f81577 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -93,15 +93,18 @@ wa-page > header { margin: 0; } - h2:not(:first-child), - wa-details:not(:first-child) { + h2:not(:first-child) { margin-block-start: var(--wa-space-xs); } wa-details { - border: none; - background: none; - padding: 0; + --spacing: var(--wa-space-xs); + + &::part(base) { + border: none; + background: none; + padding: 0; + } } ul { @@ -302,6 +305,13 @@ h1.title { } } +@media print { + /* Show URLs for printed links */ + a:not(.anchor-heading)[href]::after { + content: ' (' attr(href) ')'; + } +} + /* Callouts */ .callout { display: flex; @@ -416,146 +426,6 @@ wa-card .page-name { margin-block-start: var(--wa-space-2xl); } -/* Interactive cards */ -wa-card[role='button'][tabindex='0'], -button, -a[href], -wa-option, -wa-radio, -wa-checkbox { - /* Disabled state */ - &:is(:disabled, [disabled], [aria-disabled='true']) { - &:is(wa-card, :has(> wa-card)) { - opacity: 60%; - cursor: not-allowed; - } - } - - &:where(:not(:disabled, [disabled], [aria-disabled='true'])) { - &:has(> wa-card) { - /* Parents only (not interactive ) */ - margin: calc(var(--wa-border-width-m) + 1px); - padding: 0; - - /* Hover state */ - &:hover, - &:state(hover), - &:state(current) { - /* Do not change the parent background as a hover effect (we style the card instead) */ - background: transparent !important; - } - - &::part(control), - &:is(wa-option)::part(checked-icon) { - --background-color-checked: var(--wa-color-brand-fill-loud); - --checked-icon-scale: 0.5; - --offset: var(--wa-space-2xs); - - position: absolute; - inset: calc(var(--offset) + var(--wa-border-width-m)); - inset-block-end: auto; - inset-inline-start: auto; - z-index: 1; - margin: 0; - background: var(--wa-color-brand-fill-loud); - color: var(--wa-color-brand-on-loud); - } - - &::part(checked-icon) { - color: var(--wa-color-brand-on-loud); - } - - &:is(wa-option)::part(checked-icon) { - inset-block-start: calc(var(--wa-space-smaller) - 0.5em); - inset-inline-end: calc(var(--wa-space-smaller) - 0.5em); - width: 1em; - height: 1em; - line-height: 1em; - padding: 0.4em; - border-radius: var(--wa-border-radius-circle); - text-align: center; - font-size: var(--wa-font-size-xs); - } - } - - /* Hover state */ - &:hover, - &:state(hover), - &:state(current) { - &:is(wa-card), - > wa-card { - --border-color: var(--wa-color-brand-border-loud); - border-color: var(--border-color); - box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color); - } - } - - &:is(wa-card, :has(> wa-card)) { - /* Interactive card parent */ - position: relative; - cursor: pointer; - - /* Unselected state */ - &:where(:not(:state(checked), :state(selected), [aria-checked='true'], [aria-selected='true'])) { - &::part(checked-icon), - &::part(control) { - display: none; - } - } - } - - &:is(wa-card), - > wa-card { - /* The card itself */ - box-shadow: none; - } - } -} - -/* Selected cards */ -:state(selected), -:state(checked), -[aria-checked='true'], -[aria-selected='true'] { - &:is(wa-card, :has(> wa-card)) { - background: transparent; - } - - &:is(wa-card), - > wa-card { - --border-color: var(--wa-color-brand-border-loud); - box-shadow: 0 0 0 var(--wa-border-width-m) var(--border-color); - - &::part(body) { - background: var(--wa-color-brand-fill-quiet); - } - } -} - -wa-select:has(> wa-option > wa-card) { - &::part(listbox) { - --column-width: 1fr; - --columns: 1; - --gap: var(--wa-space-smaller); - - display: grid; - grid-template-columns: repeat(auto-fill, minmax(var(--column-width), 1fr)); - width: calc(var(--columns) * var(--column-width) + (var(--columns) - 1) * var(--gap) + 2 * var(--wa-space)); - max-width: var(--auto-size-available-width, 90vw); - gap: var(--gap); - padding: var(--wa-space-smaller) var(--wa-space); - } - - > wa-option > wa-card { - --spacing: var(--wa-space-s); - } -} - -wa-radio:has(> wa-card) { - grid-template-columns: 1fr; - width: auto; -} - /* Swatches */ .swatch { position: relative; diff --git a/docs/assets/styles/ui.css b/docs/assets/styles/ui.css index 9ee09916c..f87f65367 100644 --- a/docs/assets/styles/ui.css +++ b/docs/assets/styles/ui.css @@ -74,7 +74,7 @@ .swatch-select { padding: 2px; - wa-radio-button { + wa-radio { --swatch-border-color: color-mix(in oklab, canvastext, transparent 80%); &::part(base) { @@ -93,7 +93,7 @@ --border-radius: var(--wa-border-radius-circle); } - wa-radio-button:is([checked], :state(checked)) { + wa-radio:is([checked], :state(checked)) { --swatch-border-color: var(--wa-color-surface-default); &::part(base) { box-shadow: diff --git a/docs/assets/vue/components/swatch-select.js b/docs/assets/vue/components/swatch-select.js index 06f11e788..1dbfab059 100644 --- a/docs/assets/vue/components/swatch-select.js +++ b/docs/assets/vue/components/swatch-select.js @@ -5,7 +5,7 @@ import InfoTip from './info-tip.js'; const template = ` - + diff --git a/docs/docs/components/button-group.md b/docs/docs/components/button-group.md index d2269f355..a4d1f944a 100644 --- a/docs/docs/components/button-group.md +++ b/docs/docs/components/button-group.md @@ -55,7 +55,7 @@ it is rarely a good idea to mix sizes within the same button group. Set the `orientation` attribute to `vertical` to make a vertical button group. ```html {.example} - + New @@ -157,16 +157,13 @@ Pill buttons are supported through the button's `pill` attribute. ``` -### Dropdowns and Native Buttons in Button Groups +### Dropdowns in Button Groups -Other elements can also be placed inside button groups: -- Native buttons as long as their [native styles](/docs/native/button) are included -- Dropdowns as long as the trigger is either a ``, or a ` Dropdown @@ -175,6 +172,7 @@ Other elements can also be placed inside button groups: Item 3 + Button ``` diff --git a/docs/docs/components/page.md b/docs/docs/components/page.md index abbb527c5..cd0623067 100644 --- a/docs/docs/components/page.md +++ b/docs/docs/components/page.md @@ -41,7 +41,7 @@ body { ``` :::info -If you use [native styles](/docs/native/), this is already taken care of. +If you use [native styles](/docs/utilities/native/), this is already taken care of. ::: ## Examples @@ -164,7 +164,7 @@ wa-page[view='desktop'] [data-toggle-nav] { ``` :::info -If you use [native styles](/docs/native/), this is already taken care for you, and the `data-toggle-nav` button is already hidden on wider screens. +If you use [native styles](/docs/utilities/native/), this is already taken care for you, and the `data-toggle-nav` button is already hidden on wider screens. ::: #### Custom Widths @@ -205,13 +205,7 @@ You can override the default spacing for each slot with your own CSS. In this ex ## Utility classes -[Native styles](/docs/native/) define a few useful defaults for ``, as well as two utility classes you can use for common responsive design tasks: +[Native styles](/docs/utilities/native/) define a few useful defaults for ``, as well as two utility classes you can use for common responsive design tasks: - `.wa-mobile-only` hides an element on the desktop view - `.wa-desktop-only` hides an element on the mobile view - -If you don’t want to use [native styles](/docs/native/), you can include this stylesheet in your project to use these: - -```html - -``` \ No newline at end of file diff --git a/docs/docs/components/radio-button.md b/docs/docs/components/radio-button.md deleted file mode 100644 index 850412018..000000000 --- a/docs/docs/components/radio-button.md +++ /dev/null @@ -1,151 +0,0 @@ ---- -title: Radio Button -description: Radios buttons allow the user to select a single option from a group using a button-like control. -tags: forms -parent: radio-group -icon: radio-group ---- - -Radio buttons are designed to be used with [radio groups](/docs/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls. - -```html {.example} - - Option 1 - Option 2 - Option 3 - -``` - -## Examples - -### Checked States - -To set the initial value and checked state, use the `value` attribute on the containing radio group. - -```html {.example} - - Option 1 - Option 2 - Option 3 - -``` - -### Disabled - -Use the `disabled` attribute to disable a radio button. - -```html {.example} - - Option 1 - Option 2 - Option 3 - -``` - -### Sizes - -Use the `size` attribute to change a radio button's size. - -```html {.example} - - Option 1 - Option 2 - Option 3 - - -
    - - - Option 1 - Option 2 - Option 3 - - -
    - - - Option 1 - Option 2 - Option 3 - -``` - -### Pill Buttons - -Use the `pill` attribute to give radio buttons rounded edges. - -```html {.example} - - Option 1 - Option 2 - Option 3 - - -
    - - - Option 1 - Option 2 - Option 3 - - -
    - - - Option 1 - Option 2 - Option 3 - -``` - -### Prefix and Suffix Icons - -Use the `prefix` and `suffix` slots to add icons. - -```html {.example} - - - - Option 1 - - - - - Option 2 - - - - - - Option 3 - - -``` - -### Buttons with Icons - -You can omit button labels and use icons instead. Make sure to set a `label` attribute on each icon so screen readers will announce each option correctly. - -```html {.example} - - - - - - - - - - - - - - - - - - - - - -``` diff --git a/docs/docs/components/radio-group.md b/docs/docs/components/radio-group.md index 935e26071..9fa82ee04 100644 --- a/docs/docs/components/radio-group.md +++ b/docs/docs/components/radio-group.md @@ -1,6 +1,6 @@ --- title: Radio Group -description: Radio groups are used to group multiple radios or radio buttons so they function as a single form control. +description: Radio groups are used to group multiple radios so they function as a single form control. tags: [inputs, forms] icon: radio-group --- @@ -29,7 +29,7 @@ Add descriptive hint to a radio group with the `hint` attribute. For hints that ### Radio Buttons -[Radio buttons](/docs/components/radio-button) offer an alternate way to display radio controls. In this case, an internal [button group](/docs/components/button-group) is used to group the buttons into a single, cohesive control. +Set the `appearance` attribute to `button` on all radios to render a radio button group. ```html {.example} - Option 1 - Option 2 - Option 3 + Option 1 + Option 2 + Option 3
    @@ -54,9 +54,9 @@ Add descriptive hint to a radio group with the `hint` attribute. For hints that value="1" style="max-width: 300px;" > - Option 1 - Option 2 - Option 3 + Option 1 + Option 2 + Option 3     ``` @@ -92,7 +92,7 @@ The default orientation for radio items is `vertical`. Set the `orientation` to ### Sizing Options -The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) will be determined by the Radio Group's `size` attribute. +The size of [Radios](/docs/components/radio) will be determined by the Radio Group's `size` attribute. ```html {.example} diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md index 0cb1fcc37..f82d3b86b 100644 --- a/docs/docs/components/textarea.md +++ b/docs/docs/components/textarea.md @@ -7,11 +7,7 @@ native: input --- ```html {.example} -
    - - - - + ``` :::info diff --git a/docs/docs/customizing.md b/docs/docs/customizing.md index 88f20a6a2..3b7116a1d 100644 --- a/docs/docs/customizing.md +++ b/docs/docs/customizing.md @@ -133,7 +133,7 @@ Most (but not all) components expose parts. You can find them in each component' ## Native Elements -If you're using [native styles](/docs/native), any custom styles added for a component should also target the corresponding native element. In general, the same styles you declare for components will work just the same to style their native counterparts. +If you're using [native styles](/docs/utilities/native), any custom styles added for a component should also target the corresponding native element. In general, the same styles you declare for components will work just the same to style their native counterparts. For example, we can give `` the same custom styles as `` by using the custom properties required to style the component: ```html {.example} @@ -196,10 +196,7 @@ For example, we can give all outlined callouts a thick left border, regardless o diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md index ebc6928c0..4a224517c 100644 --- a/docs/docs/experimental/themer.md +++ b/docs/docs/experimental/themer.md @@ -524,10 +524,10 @@ hasOutline: false
    - - - - + + + + Browse Icons @@ -684,12 +684,12 @@ hasOutline: false
    - + - - + + - +
    @@ -2239,10 +2239,10 @@ hasOutline: false
    - Matte - Glossy - Pebbled - Holo + Matte + Glossy + Pebbled + Holo
    diff --git a/docs/docs/index.md b/docs/docs/index.md index 9eddc6bc2..50e3962bd 100644 --- a/docs/docs/index.md +++ b/docs/docs/index.md @@ -32,7 +32,7 @@ To get everything included in Web Awesome, add the following code to the ` This snippet includes three parts: 1. **The default theme**, a stylesheet that gives a cohesive look to Web Awesome components with both light and dark modes -2. **Web Awesome styles**, an optional stylesheet that [styles native HTML elements](/docs/native) and includes [utility classes](/docs/utilities) you can use in your project +2. **Web Awesome styles**, an optional stylesheet that [styles native HTML elements](/docs/utilities/native) and includes [utility classes](/docs/utilities) you can use in your project 3. **The autoloader**, a lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically Now you can [start using Web Awesome!](/docs/usage) diff --git a/docs/docs/layout.njk b/docs/docs/layout.njk index 2637ea3be..c2173ca46 100644 --- a/docs/docs/layout.njk +++ b/docs/docs/layout.njk @@ -12,7 +12,7 @@ override:tags: [] Layout components are included in Web Awesome's [autoloader](/docs/#quick-start-autoloading-via-cdn). You can also import them individually via [cherry picking](/docs/#cherry-picking). -Layout utilities are bundled with all [style utilities](/docs/utilities). You can import all Web Awesome page styles (including [native styles](/docs/native/)) by including the following stylesheet in your project: +Layout utilities are bundled with all [style utilities](/docs/utilities). You can import all Web Awesome page styles (including [native styles](/docs/utilities/native/)) by including the following stylesheet in your project: ```html diff --git a/docs/docs/native/button.md b/docs/docs/native/button.md deleted file mode 100644 index 3c050199f..000000000 --- a/docs/docs/native/button.md +++ /dev/null @@ -1,144 +0,0 @@ ---- -title: Button -description: 'Button styles apply your Web Awesome theme to native HTML buttons. Buttons are activated by users to perform actions, such as submitting a form.' -tags: forms -component: button -icon: button -snippets: - ' - - - -``` - -## Examples - -### Variants - -Use the [variant utility classes](../utilities/color.md) to set the button's semantic variant. - -```html {.example} - - - - - -``` - -### Appearance - -Use the [appearance utility classes](/docs/utilities/appearance) to change the button's visual appearance: - -```html {.example} -
    - - - - - - -
    -
    - - - - - - -
    -
    - - - - - - -
    -
    - - - - - - -
    -
    - - - - - - -
    -``` - -### Sizes - -Use the [size utility classes](../utilities/size.md) to change a button's size. - -```html {.example} - - - -``` - -### Pill Buttons - -Use the `wa-pill` class to give buttons rounded edges. - -```html {.example} - - - -``` - -### Link Buttons - -It's often helpful to have a link that looks like a button. -This is possible by adding a `wa-button` class to your link. - -```html {.example} - - - -``` - -### Setting a Custom Width - -As expected, buttons can be given a custom width by setting the `width` CSS property. This is useful for making buttons span the full width of their container on smaller screens. - -```html {.example} - - - -``` - diff --git a/docs/docs/native/callout.md b/docs/docs/native/callout.md deleted file mode 100644 index 4b06b6e3c..000000000 --- a/docs/docs/native/callout.md +++ /dev/null @@ -1,117 +0,0 @@ ---- -title: Callout -description: Callouts are used to display important messages inline. -component: callout -icon: callout -snippets: '.wa-callout' -file: styles/native/callout.css ---- - -```html {.example} - -``` - -## Examples - -### Variants - -Use the [variant utility classes](../utilities/color.md) to set the callout's color variant. - -```html {.example} - - -
    - - - -
    - - - -
    - - - -
    - - -``` - -### Appearance - -Use the [appearance utility classes](/docs/utilities/appearance) to change the callout's visual appearance (the default is `outlined filled`). - -```html {.example} - - -
    - - - -
    - - - -
    - - - -
    - - - -
    - - -``` - -### Sizes - -Use the [size utility classes](../utilities/size.md) to change a callout's size. - -```html {.example} - - -
    - - - -
    - - -``` diff --git a/docs/docs/native/checkbox.md b/docs/docs/native/checkbox.md deleted file mode 100644 index 8fe54af50..000000000 --- a/docs/docs/native/checkbox.md +++ /dev/null @@ -1,90 +0,0 @@ ---- -title: Checkbox -description: Checkboxes allow the user to toggle an option on or off. -tags: forms -component: checkbox -icon: checkbox -elements: - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/checkbox -file: styles/native/checkbox.css ---- - -```html {.example} - -``` - -## Examples - -### Checked - -Use the `checked` attribute to activate the checkbox. - -```html {.example} - -``` - - - -### Disabled - -Use the `disabled` attribute to disable the checkbox. - -```html {.example} - -``` - - - -### Custom Validity - -Use the `setCustomValidity()` method to set a custom validation message. This will prevent the form from submitting and make the browser display the error message you provide. To clear the error, call this function with an empty string. - -```html {.example} -
    - -
    - - - -``` diff --git a/docs/docs/native/content.md b/docs/docs/native/content.md deleted file mode 100644 index be1c16556..000000000 --- a/docs/docs/native/content.md +++ /dev/null @@ -1,92 +0,0 @@ ---- -title: Content -description: 'Content styles apply your Web Awesome theme to HTML text content, code, and images.' -tags: content -layout: element -icon: skeleton -elements: - "

    -

    ": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/Heading_Elements - "
    ": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/blockquote - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/strong - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/em - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/u - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/del - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ins - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/s - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/small - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sub - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/sup - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/abbr - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/kbd - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/mark - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/code - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/img -file: styles/native/content.css ---- - - -## Typography - -Vel risus commodo viverra maecenas accumsan lacus vel facilisis volutpat. Amet mauris commodo quis imperdiet. Bibendum ut tristique et egestas quis ipsum suspendisse. Sit amet nulla facilisi morbi tempus iaculis urna id volutpat. - -Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci. Scelerisque eleifend donec pretium vulputate sapien nec. Donec et odio pellentesque diam volutpat commodo sed egestas egestas. Mauris rhoncus aenean vel elit scelerisque mauris pellentesque. - -> What is a Web year now, about three months? And when people can browse around, discover new things, and download them fast, when we all have agents - then Web years could slip by before human beings can notice. -> -> — Tim Berners-Lee - -## Inline Text - -```html -Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id. -``` - -
    -

    Bold

    -

    Italics

    -

    Underline

    -

    Deleted

    -

    Inserted

    -

    Strike-through

    -

    Small

    -

    Text Sub

    -

    Text Sup

    -

    Abbr.

    -

    Keyboard

    -

    Highlighted

    -

    Link text

    -

    Inline code

    -
    - -## Headings - -### Heading 3 - -Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id. - -#### Heading 4 - -Gravida arcu ac tortor dignissim convallis aenean. Pellentesque pulvinar pellentesque habitant morbi tristique senectus et. Ipsum nunc aliquet bibendum enim facilisis gravida neque. Donec adipiscing tristique risus nec feugiat in. - -##### Heading 5 - -Enim diam vulputate ut pharetra sit. Enim facilisis gravida neque convallis a cras. Enim neque volutpat ac tincidunt vitae semper. Sed egestas egestas fringilla phasellus faucibus scelerisque eleifend donec pretium. - -###### Heading 6 - -Tincidunt ornare massa eget egestas purus viverra accumsan in nisl. Facilisis mauris sit amet massa vitae. Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum. - - -## Code Blocks - -``` -// do a thing -export function thing() { - return true; -} -``` - -## Images - -![A gray kitten lays next to a toy](https://images.unsplash.com/photo-1620196244888-d31ff5bbf163?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) diff --git a/docs/docs/native/details.md b/docs/docs/native/details.md deleted file mode 100644 index d633e8430..000000000 --- a/docs/docs/native/details.md +++ /dev/null @@ -1,82 +0,0 @@ ---- -title: Details -description: 'Details styles apply your Web Awesome theme to the HTML `
    ` element. Details show a brief summary and expand to show additional content.' -tags: apps -layout: element -component: details -icon: details -elements: - "
    ": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/details -file: styles/native/details.css ---- - -```html {.example} -
    - Tincidunt nunc pulvinar -

    Ut lectus arcu bibendum at varius. Convallis a cras semper auctor neque vitae. Odio pellentesque diam volutpat commodo sed egestas. Amet dictum sit amet justo donec enim diam vulputate ut.

    -
    -``` - -## Examples - -### Appearance - -Use the [appearance utility classes](/docs/utilities/appearance) to change the element's visual appearance: - -```html {.example} - -``` - -### Right-to-Left Languages - -The details styling automatically adapts to right-to-left languages: - -```html {.example} -
    - تبديلني - استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن -
    -``` - -## Accordions - -In [modern browsers](https://caniuse.com/mdn-html_elements_details_name), -grouping `
    ` elements via the `name` attribute provides accordion-style functionality: - -```html {.example} -
    - Enim diam -

    Nunc faucibus a pellentesque sit amet porttitor. Adipiscing tristique risus nec feugiat in fermentum. Leo duis ut diam quam nulla porttitor massa id. Mauris nunc congue nisi vitae.

    -
    - -
    - Arcu non odio -

    Sed libero enim sed faucibus turpis in eu mi bibendum. Nunc mi ipsum faucibus vitae aliquet nec. Ultricies tristique nulla aliquet enim tortor. Tellus at urna condimentum mattis pellentesque.

    -
    - -
    - Ut porttitor -

    Eu facilisis sed odio morbi quis commodo odio aenean sed. Sit amet purus gravida quis blandit turpis cursus. Eu consequat ac felis donec et odio pellentesque diam volutpat.

    -
    -``` diff --git a/docs/docs/native/dialog.md b/docs/docs/native/dialog.md deleted file mode 100644 index 17345d532..000000000 --- a/docs/docs/native/dialog.md +++ /dev/null @@ -1,37 +0,0 @@ ---- -title: Dialog -description: 'Dialog styles apply your Web Awesome theme to the HTML `` element. Dialogs, also called "modals", appear above the page and interrupt a user''s focus.' -tags: apps -icon: dialog -elements: - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dialog -component: dialog -file: styles/native/dialog.css ---- - -```html {.example} - -
    -

    Dialog

    - -
    -

    Lorem ipsum dolor sit amet, consectetur adipiscing elit.

    -
    - -
    -     - - - - -``` diff --git a/docs/docs/native/index.njk b/docs/docs/native/index.njk deleted file mode 100644 index 51ac0a47b..000000000 --- a/docs/docs/native/index.njk +++ /dev/null @@ -1,86 +0,0 @@ ---- -title: Native Styles -description: Native styles apply your theme to native HTML elements so they match the look and feel of Web Awesome components. - See the [installation instructions](#installation) to use native styles in your project. -layout: overview -categories: ['forms', 'apps', 'content'] -override:tags: [] ---- - -{% markdown %} -Web Awesome works _with_ the platform, rather than trying to reinvent it. -If all you need is styles, you don’t need to use new `` elements! -We also provide styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit. - -## Installation - -To use all Web Awesome page styles (including [utilities](/docs/utilities/)), include the following stylesheet in your project: - -```html - -``` - -Or, to _only_ include styles for native elements: - -```html - -``` - -## Opting Out of Native Styles - -So you've decided to use Native Styles and now you need to style an element or a part of a page completely differently, what to do? -You can create an opt-out with the power of [CSS Cascade Layers](https://developer.mozilla.org/en-US/docs/Learn/CSS/Building_blocks/Cascade_layers)! - -Instead of including Native Styles with a `` element, you can include it like this: - -```html - -``` - -Then you can opt-out of Native Styles styling by using a `wa-off` class on individual elements or `wa-off-deep` for entire subtrees: - -```html -

    - - -

    - -
    -

    Lorem Ipsum dolor sit amet

    - -
    - - -``` - -You could even design opt-outs for specific elements! -E.g. to opt-out of `
    ` styling: - -```css -@layer wa { - details.wa-details-off, - .wa-details-off details,{ - all: revert-layer; - } -} -``` - -If you find yourself opting out of entire element types too much, you could consider only including the parts of Native Styles you need instead of the whole thing. -You can find instructions for how to do that on the individual Native Styles pages. -{% endmarkdown %} diff --git a/docs/docs/native/input.md b/docs/docs/native/input.md deleted file mode 100644 index 60007458b..000000000 --- a/docs/docs/native/input.md +++ /dev/null @@ -1,85 +0,0 @@ ---- -title: Input -description: Inputs collect data from the user. -tags: forms -icon: input -component: input -elements: - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input -file: styles/native/input.css ---- - -## Text Fields - -```html {.example} - - - - - - - - - - - - - - - - - - - - -``` - -## Pill shaped text fields - -Add the `wa-pill` class to an `` to make it pill-shaped. - -```html {.example} - -``` - -## Color Picker - -Basic: - -```html {.example} - - -``` - -With swatches: - -```html {.example} - - - - - - - - - - - - - -``` - -## Time and Date Pickers - -```html {.example} - - - - - - - - -``` - diff --git a/docs/docs/native/lists.md b/docs/docs/native/lists.md deleted file mode 100644 index f092d510d..000000000 --- a/docs/docs/native/lists.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Lists -description: 'List styles apply your Web Awesome theme to HTML lists, such as bulleted, numbered, or description lists.' -tags: content -layout: element -elements: - "
      ": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ul - "
        ": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/ol - "
        ": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/dl -file: styles/native/lists.css ---- - -## Unordered Lists - -- List item 1 -- List item 2 -- List item 3 - - Subitem a - - Subitem b - -## Ordered Lists - -1. List item 1 -2. List item 2 -3. List item 3 - - Subitem a - - Subitem b - -## Definition Lists - -
        -
        Definition 1
        -
        Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
        -
        Definition 2
        -
        Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
        -
        Definition 3
        -
        Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.
        -
        diff --git a/docs/docs/native/native.json b/docs/docs/native/native.json deleted file mode 100644 index b077f894f..000000000 --- a/docs/docs/native/native.json +++ /dev/null @@ -1,4 +0,0 @@ -{ - "layout": "element.njk", - "tags": ["native"] -} diff --git a/docs/docs/native/progress.md b/docs/docs/native/progress.md deleted file mode 100644 index 1d3219e01..000000000 --- a/docs/docs/native/progress.md +++ /dev/null @@ -1,31 +0,0 @@ ---- -title: Progress Bar -description: Progress bars are used to show the status of an ongoing operation. -tags: apps -icon: progress-bar -status: experimental -component: progress-bar -elements: - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/progress -file: styles/native/progress.css ---- - - -```html {.example} - -``` - -Indeterminate: - - -```html {.example} - -``` - -### Custom Height - -Use the `height` CSS property to set the progress bar's height. - -```html {.example} - -``` diff --git a/docs/docs/native/radio.md b/docs/docs/native/radio.md deleted file mode 100644 index 6649695b3..000000000 --- a/docs/docs/native/radio.md +++ /dev/null @@ -1,93 +0,0 @@ ---- -title: Radio -description: Radios allow the user to select a single option from a group. -tags: forms -icon: radio-group -component: radio -elements: - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/radio -file: styles/native/radio.css ---- - -```html {.example} - -``` - -## Examples - -### Initial Value - -To set the initial value and checked state, use the `checked` attribute on the corresponding radio. - -```html {.example} - -``` - -### Disabled - -Use the `disabled` attribute to disable a radio. - -```html {.example} - -``` - -### Sizes - -Use the [size utilities](/docs/utilities/size) to change the radios' size. - -```html {.example} - - -
        - - -
        - - -``` - -### Orientation - -You can wrap native radios in a flex container to give them a horizontal or vertical orientation with even spacing. The convenience [`wa-cluster`](/docs/utilities/cluster) and [`wa-stack`](/docs/utilities/stack) utilities make this easy. - -```html {.example} - -``` - -```html {.example} - -``` diff --git a/docs/docs/native/select.md b/docs/docs/native/select.md deleted file mode 100644 index b85503244..000000000 --- a/docs/docs/native/select.md +++ /dev/null @@ -1,72 +0,0 @@ ---- -title: Select -description: Selects allow you to choose items from a menu of predefined options. -tags: forms -icon: select -component: select -elements: - " - - - - - -``` - -## Examples - -### Appearance - -Use the [appearance utilities](/docs/utilities/appearance/) to change the select's visual appearance. - -```html {.example} - -``` - -### Grouping options - -In [modern browsers](https://caniuse.com/mdn-html_elements_select_hr_in_select), you can use the `
        ` element as a divider: - -```html {.example} - -``` - -To provide labels, you can use the `` element (with or without dividers): - -```html {.example} - -``` diff --git a/docs/docs/native/slider.md b/docs/docs/native/slider.md deleted file mode 100644 index b47923a20..000000000 --- a/docs/docs/native/slider.md +++ /dev/null @@ -1,54 +0,0 @@ ---- -title: Slider -description: Sliders allow the user to select a single value within a given range using a slider. -tags: forms -layout: element -icon: slider -component: slider -elements: - "": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/range -file: styles/native/slider.css ---- - -```html {.example} - -``` - -### Min, Max, and Step - -Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing. - -```html {.example} - -``` - -### Disabled - -Use the `disabled` attribute to disable a slider. - -```html {.example} - -``` - - diff --git a/docs/docs/native/table.md b/docs/docs/native/table.md deleted file mode 100644 index 0cae11df7..000000000 --- a/docs/docs/native/table.md +++ /dev/null @@ -1,136 +0,0 @@ ---- -title: Table -description: 'Table styles apply your Web Awesome theme to the HTML table content. Tables structure data in rows and columns, making it easy to look up information in a complex data set.' -tags: content -elements: - "
    .wa-filledfilled - +
    .wa-size-ssmall - +
    .wa-size-mmedium - +
    .wa-size-llarge - + diff --git a/docs/_includes/visual-tests/size.njk b/docs/_includes/visual-tests/size.njk index 884cdd0c2..196af63b6 100644 --- a/docs/_includes/visual-tests/size.njk +++ b/docs/_includes/visual-tests/size.njk @@ -534,14 +534,14 @@ small/s - Radio - Button + Radio + Button - - + +
    medium/m - Radio - Button + Radio + Button - - + +
    large/l - Radio - Button + Radio + Button - - + +
    ": https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table -file: styles/native/tables.css ---- - -```html {.example} -
    - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -
    I'm just a table
    Column 1Column 2Column 3Column 4
    CellCellCellCell
    CellCellCellCell
    CellCellCellCell
    CellCellCellCell
    -``` - -## Alternating Rows - -You can use the `wa-zebra-rows` class to add alternating row colors to your table: - -```html {.example} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` - -## Variants - -You can use [color utility classes](/docs/utilities/colors) to apply different colors to your table: - -```html {.example} - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -``` diff --git a/docs/docs/native/textarea.md b/docs/docs/native/textarea.md deleted file mode 100644 index 82f661fde..000000000 --- a/docs/docs/native/textarea.md +++ /dev/null @@ -1,38 +0,0 @@ ---- -title: Textarea -description: Textareas collect data from the user and allow multiple lines of text. -tags: forms -icon: textarea -component: textarea -elements: - " -``` - -### Placeholders - -Use the `placeholder` attribute to add a placeholder. - -```html {.example} - -``` - -### Appearance - -Use the [appearence utilities](/docs/utilities/appearance/) to change the textarea's visual appearance. - -```html {.example} - -``` - -### Expand with Content - -You can use `field-sizing: content` in [browsers that support it](https://caniuse.com/mdn-css_properties_field-sizing) to make the textarea grow as the user types: - -```html {.example} - -``` diff --git a/docs/docs/patterns/app/permissions.md b/docs/docs/patterns/app/permissions.md index 1a4f62f5e..86d5f44bc 100644 --- a/docs/docs/patterns/app/permissions.md +++ b/docs/docs/patterns/app/permissions.md @@ -115,11 +115,11 @@ isPro: true - None - 5 - 10 - 50 - 100 + None + 5 + 10 + 50 + 100 Temporary Access diff --git a/docs/docs/patterns/ecommerce/product-overview.md b/docs/docs/patterns/ecommerce/product-overview.md index 1bd92eb22..f7ba64b9f 100644 --- a/docs/docs/patterns/ecommerce/product-overview.md +++ b/docs/docs/patterns/ecommerce/product-overview.md @@ -153,29 +153,29 @@ isPro: true
    - + Vintage Black - - + + Faded Gray - + - XS - S - M - L - XL + XS + S + M + L + XL @@ -329,25 +329,25 @@ isPro: true comfort. The relaxed fit and classic crew neckline make it a versatile staple for layering or wearing solo.

    - + Sand - - + + Shale - - + + Slate - + - XS - S - M - L - XL + XS + S + M + L + XL Add to Cart diff --git a/docs/docs/patterns/index.njk b/docs/docs/patterns/index.njk index 6cb87e66f..07eb56b88 100644 --- a/docs/docs/patterns/index.njk +++ b/docs/docs/patterns/index.njk @@ -22,7 +22,7 @@ Patterns are written as standard HTML, so you can use them just as you would any To use a pattern in your project, refer to each pattern's docs for a copyable code snippet. Paste the snippet wherever you'd like the pattern to appear in your project. -Because patterns use a combination of Web Awesome features, they work best when you have [native styles](/docs/native), [style utilities](/docs/utilities), and a [theme](/docs/themes) installed in addition to Web Awesome [components](/docs/components). Refer to the [Installation page](/docs/) to set up all of these features in your project. +Because patterns use a combination of Web Awesome features, they work best when you have [native styles](/docs/utilities/native), [style utilities](/docs/utilities), and a [theme](/docs/themes) installed in addition to Web Awesome [components](/docs/components). Refer to the [Installation page](/docs/) to set up all of these features in your project. {% endmarkdown %} diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index 9b39e390d..6aaadb20e 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -14,6 +14,10 @@ During the alpha period, things might break! We take breaking changes very serio ## Next +- 🚨 BREAKING: Greatly simplified how native styles work and removed redundant utilities + - Removed `.wa-button`, `.wa-callout` classes + - Removed `themes/native/*.css` files; use `native.css` to opt into native styles + - Clarified which utilities classes can be applied to which native elements - 🚨 BREAKING: Removed the extra dash in the `` CSS part name `pagination-item--active` => `pagination-item-active` - 🚨 BREAKING: Renamed the `classic` theme to `shoelace` - 🚨 BREAKING: Renamed `pulse` attribute in `` to `attention="pulse"` and added `attention="bounce"` [issue:#940] @@ -29,6 +33,10 @@ During the alpha period, things might break! We take breaking changes very serio - Added a `min-block-size` to `` to ensure the divider is visible regardless of container height [issue:675] - Fixed a bug in `` that caused radios to uncheck when assigning a numeric value [issue:924] - Fixed `` so dividers properly show between buttons +- Fixed the tooltip position in `` when using RTL +- Fixed a bug in `` and native `
    ` styles that made the summary hard to click [issue:684] +- Improved CSS utilities and Native Styles to use [CSS layers](https://developer.mozilla.org/en-US/docs/Web/CSS/@layer) for easier end user customization (no more specificity conflicts — your CSS wins!) +- Improved native ` + + + + + +``` + +### Inline Text + +Various text formatting elements for emphasis and semantic meaning. + +```html {.example} +
    +

    Bold

    +

    Italics

    +

    Underline

    +

    Deleted

    +

    Inserted

    +

    Strike-through

    +

    Small

    +

    Text Sub

    +

    Text Sup

    +

    Abbr.

    +

    Keyboard

    +

    Highlighted

    +

    Link text

    +

    Inline code

    +
    +``` + +### Code Blocks + +Formatted code snippets with proper syntax styling. + +``` +// do a thing +export function thing() { + return true; +} +``` + +### Images + +Responsive images with proper scaling and styling. + +![A gray kitten lays next to a toy](https://images.unsplash.com/photo-1620196244888-d31ff5bbf163?q=80&w=1000&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D) + +### Progress Bars + +Visual indicators for task completion and loading states. + +```html {.example} + +
    + +``` + +### Tables + +Structured data presentation with clean styling and optional zebra striping. + +```html {.example} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +
    I'm just a table
    Column 1Column 2Column 3Column 4
    CellCellCellCell
    CellCellCellCell
    CellCellCellCell
    CellCellCellCell
    +``` + +You can use the `wa-zebra-rows` class to add alternating row colors to your table: + +```html {.example} + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + +``` + +## Form Controls + +### Buttons + +Use the [variant utility classes](../utilities/color.md) to set the button's semantic variant. + +```html {.example} + + + + + +``` + +Use the [appearance utility classes](/docs/utilities/appearance) to change the button's visual appearance: + +```html {.example} +
    + + + + + + +
    +
    + + + + + + +
    +
    + + + + + + +
    +
    + + + + + + +
    +
    + + + + + + +
    +``` + +Use the [size utility classes](../utilities/size.md) to change a button's size. + +```html {.example} + + + +``` + +Use the `wa-pill` class to give buttons rounded edges. + +```html {.example} + + + +``` + +### Checkboxes + +Multi-select form controls with checked, indeterminate, and disabled states. + +```html {.example} +
    +
    + + + +``` + +### Radios + +Single-select form controls for mutually exclusive choices. + +You can wrap native radios in a flex container to give them a horizontal or vertical orientation with even spacing. The convenience [`wa-cluster`](/docs/utilities/cluster) and [`wa-stack`](/docs/utilities/stack) utilities make this easy. + +```html {.example} + + + +``` + +### Selects + +Dropdown menus for choosing from a list of options. + +```html {.example} + +``` + +### Sliders + +Range inputs for selecting numeric values within a specified range. + +```html {.example} + +``` + +### Text Fields + +Various input types for collecting user text and data. + +```html {.example} + + + + + + + + + + + + + +``` + +Add the `wa-pill` class to an `` to make it pill-shaped. + +```html {.example} + +``` + +### Color Pickers + +Visual color selection interface with hex value input. + +```html {.example} + +``` + +### Date & Time Pickers + +Specialized inputs for selecting dates, times, and datetime values. + +```html {.example} + + + + + +``` + +### Textareas + +Multi-line text input fields for longer content. + +```html {.example} + +``` diff --git a/docs/docs/utilities/rounding.md b/docs/docs/utilities/rounding.md index 2a834bdfc..cbf4eb9c8 100644 --- a/docs/docs/utilities/rounding.md +++ b/docs/docs/utilities/rounding.md @@ -2,7 +2,6 @@ title: Rounding Utilities description: Border radius utilities set an element's border radius property. tags: ["utilities"] -status: wip --- -``` - -## Advanced: Customizing Sizes - -But what if you are creating a style that should **generally** be smaller (e.g. a badge) or larger (e.g. a pull quote)? -For example, suppose we wanted to define a custom `.tag2` class just like `.tag` in the previous section, -but with a different set of sizes. - -This is possible, though a bit more involved. -The first thing you need to do is define these 8 properties in your CSS for your "breakpoints": - -| Custom property | Default value | -| --------------- | ------------- | -| `--size-xs` | `var(--wa-font-size-xs)` | -| `--size-s` | `var(--wa-font-size-s)` | -| `--size-m` | `var(--wa-font-size-m)` | -| `--size-l` | `var(--wa-font-size-l)` | -| `--space-xs` | `var(--wa-space-xs)` | -| `--space-s` | `var(--wa-space-s)` | -| `--space-m` | `var(--wa-space-m)` | -| `--space-l` | `var(--wa-space-l)` | - - -It would look like this: - -```css -.tag2 { - --size-xs: var(--wa-font-size-2xs); - --size-s: var(--wa-font-size-xs); - --size-m: var(--wa-font-size-s); - --size-l: var(--wa-font-size-m); - - --space-xs: var(--wa-space-2xs); - --space-s: var(--wa-space-xs); - --space-m: var(--wa-space-s); - --space-l: var(--wa-space-m); -} -``` - -That by itself is sufficient to give you sizes when the utility classes are used, though no default size: - -```html { .example } - -Default - - - - -``` - -Supporting a default size as well requires a little bit more plumbing: - -```html { .example } -
    - - Default - - -
    - - -``` - diff --git a/docs/src/env.d.ts b/docs/src/env.d.ts deleted file mode 100644 index 9c03f0a2c..000000000 --- a/docs/src/env.d.ts +++ /dev/null @@ -1,2 +0,0 @@ -/// -/// diff --git a/package.json b/package.json index 08fde6245..3f50ca833 100644 --- a/package.json +++ b/package.json @@ -52,7 +52,7 @@ "create": "plop --plopfile scripts/plop/plopfile.js", "test": "CSR_ONLY=\"true\" web-test-runner --group default", "test:component": "CSR_ONLY=\"true\" web-test-runner -- --watch --group", - "test:contrast": "cd src/styles/color && node contrast.test.js", + "test:contrast": "node scripts/color-palette-contrast-test.js", "test:watch": "web-test-runner --watch --group default", "prettier": "prettier --check --log-level=warn .", "prettier:fix": "prettier --write --log-level=warn .", diff --git a/src/styles/color/contrast.test.js b/scripts/color-palette-contrast-test.js similarity index 96% rename from src/styles/color/contrast.test.js rename to scripts/color-palette-contrast-test.js index 1882f8353..875efde3e 100644 --- a/src/styles/color/contrast.test.js +++ b/scripts/color-palette-contrast-test.js @@ -1,7 +1,7 @@ // Get a list of all CSS files in repo import chalk from 'chalk'; import Color from 'colorjs.io'; -import palettes from './palettes.js'; +import palettes from '../src/styles/color/scripts/palettes.js'; let targetContrasts = { 40: 3, diff --git a/src/components/button-group/button-group.css b/src/components/button-group/button-group.css index feb4b28f5..794d9902a 100644 --- a/src/components/button-group/button-group.css +++ b/src/components/button-group/button-group.css @@ -1,3 +1,43 @@ :host { display: inline-flex; } + +.button-group { + display: flex; + position: relative; + isolation: isolate; + flex-wrap: wrap; + gap: 1px; + + > :hover, + &::slotted(:hover) { + z-index: 1; + } + + /* Focus and checked are always on top */ + > :focus, + &::slotted(:focus), + > [aria-checked='true'], + &::slotted([aria-checked='true']), + > [checked], + &::slotted([checked]) { + z-index: 2 !important; + } +} + +:host([orientation='vertical']) { + flex-direction: column; +} + +/* Button groups with at least one outlined button will not have a gap and instead have borders overlap */ +.button-group.has-outlined { + gap: 0; + + &:not([aria-orientation='vertical']):not(.button-group-vertical)::slotted(:not(:first-child)) { + margin-inline-start: calc(-1 * var(--border-width)); + } + + &:is([aria-orientation='vertical'], .button-group-vertical)::slotted(:not(:first-child)) { + margin-block-start: calc(-1 * var(--border-width)); + } +} diff --git a/src/components/button-group/button-group.ts b/src/components/button-group/button-group.ts index 7960c4766..cb40e76e2 100644 --- a/src/components/button-group/button-group.ts +++ b/src/components/button-group/button-group.ts @@ -3,11 +3,9 @@ import { html } from 'lit'; import { customElement, property, query, state } from 'lit/decorators.js'; import { classMap } from 'lit/directives/class-map.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; -import buttonGroupStyles from '../../styles/utilities/button-group.css'; import sizeStyles from '../../styles/utilities/size.css'; import variantStyles from '../../styles/utilities/variants.css'; import type WaButton from '../button/button.js'; -import type WaRadioButton from '../radio-button/radio-button.js'; import styles from './button-group.css'; /** @@ -22,7 +20,7 @@ import styles from './button-group.css'; */ @customElement('wa-button-group') export default class WaButtonGroup extends WebAwesomeElement { - static shadowStyle = [sizeStyles, variantStyles, buttonGroupStyles, styles]; + static shadowStyle = [sizeStyles, variantStyles, styles]; @query('slot') defaultSlot: HTMLSlotElement; @@ -126,7 +124,7 @@ function findButton(el: HTMLElement) { const selector = 'wa-button, wa-radio-button'; // The button could be the target element or a child of it (e.g. a dropdown or tooltip anchor) - return (el.closest(selector) ?? el.querySelector(selector)) as WaButton | WaRadioButton; + return (el.closest(selector) ?? el.querySelector(selector)) as WaButton; } declare global { diff --git a/src/components/button/button.css b/src/components/button/button.css index b69975925..b271d316e 100644 --- a/src/components/button/button.css +++ b/src/components/button/button.css @@ -1,7 +1,97 @@ -:host { - --display: inline-flex; +@layer wa-component { + :host { + --background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud)); + --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover)); + --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active)); - position: relative; + --border-color: transparent; + --border-color-hover: var(--border-color); + --border-color-active: var(--border-color); + --border-width: max(1px, var(--wa-form-control-border-width)); + + --box-shadow: initial; + + --text-color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud)); + --text-color-hover: var(--text-color); + --text-color-active: var(--text-color); + + display: inline-block; + position: relative; + } +} + +.button { + border-radius: var(--wa-form-control-border-radius); + border-style: var(--wa-border-style); + border-width: var(--border-width); + box-shadow: var(--box-shadow); + align-items: center; + justify-content: center; + text-decoration: none; + user-select: none; + -webkit-user-select: none; + white-space: nowrap; + vertical-align: middle; + transition-property: background, border, box-shadow, color; + transition-duration: var(--wa-transition-fast); + transition-timing-function: var(--wa-transition-easing); + cursor: pointer; + padding: 0 var(--wa-space, var(--wa-space-m)); + font-family: inherit; + font-size: var(--wa-size, var(--wa-font-size-m)); + font-weight: var(--wa-font-weight-action); + line-height: calc(var(--wa-form-control-height) - var(--border-width) * 2); + height: var(--wa-form-control-height); + width: 100%; + + display: inline-flex; + background-color: var(--background-color); + border-color: var(--border-color, var(--background-color)); + color: var(--text-color); +} + +/* Interactive states */ +.button:not(.disabled):not(.loading):hover { + background-color: var(--background-color-hover, var(--background-color)); + border-color: var(--border-color-hover, var(--border-color, var(--background-color-hover))); + color: var(--text-color-hover, var(--text-color)); +} + +.button:not(.disabled):not(.loading):active { + background-color: var(--background-color-active, var(--background-color)); + border-color: var(--border-color-active, var(--border-color, var(--background-color-active))); + color: var(--text-color-active, var(--text-color)); +} + +/* Focus states */ +.button:focus { + outline: none; +} + +.button:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +/* Disabled state */ +.button.disabled { + opacity: 0.5; + cursor: not-allowed; +} + +/* When disabled, prevent mouse events from bubbling up from children */ +.button.disabled * { + pointer-events: none; +} + +/* Keep it last so Safari doesn't stop parsing this block */ +.button::-moz-focus-inner { + border: 0; +} + +/* Pill modifier */ +:host([pill]) .button { + border-radius: var(--wa-border-radius-pill); } /* @@ -38,7 +128,7 @@ wa-icon[part~='caret'] { height: 0.875em; } - .wa-button:has(&) .suffix { + .button:has(&) .suffix { display: none; } } @@ -74,7 +164,6 @@ wa-icon[part~='caret'] { /* * Badges */ - button ::slotted(wa-badge) { border-color: var(--wa-color-surface-default); position: absolute; @@ -97,6 +186,67 @@ slot[name='prefix']::slotted(*) { } slot[name='suffix']::slotted(*), -.wa-button:not(.visually-hidden-label) [part~='caret'] { +.button:not(.visually-hidden-label) [part~='caret'] { margin-inline-start: var(--wa-space); } + +/* + * Button group border radius modifications + */ + +/* Remove border radius from all grouped buttons by default */ +:host(.wa-button-group__button) .button { + border-radius: 0; +} + +/* Horizontal orientation */ +:host(.wa-button-group__horizontal.wa-button-group__button-first) .button { + border-start-start-radius: var(--wa-form-control-border-radius); + border-end-start-radius: var(--wa-form-control-border-radius); +} + +:host(.wa-button-group__horizontal.wa-button-group__button-last) .button { + border-start-end-radius: var(--wa-form-control-border-radius); + border-end-end-radius: var(--wa-form-control-border-radius); +} + +/* Vertical orientation */ +:host(.wa-button-group__vertical) { + flex: 1 1 auto; +} + +:host(.wa-button-group__vertical) .button { + width: 100%; + justify-content: start; +} + +:host(.wa-button-group__vertical.wa-button-group__button-first) .button { + border-start-start-radius: var(--wa-form-control-border-radius); + border-start-end-radius: var(--wa-form-control-border-radius); +} + +:host(.wa-button-group__vertical.wa-button-group__button-last) .button { + border-end-start-radius: var(--wa-form-control-border-radius); + border-end-end-radius: var(--wa-form-control-border-radius); +} + +/* Handle pill modifier for button groups */ +:host([pill]) .wa-button-group__horizontal.wa-button-group__button-first { + border-start-start-radius: var(--wa-border-radius-pill); + border-end-start-radius: var(--wa-border-radius-pill); +} + +:host([pill]) .wa-button-group__horizontal.wa-button-group__button-last { + border-start-end-radius: var(--wa-border-radius-pill); + border-end-end-radius: var(--wa-border-radius-pill); +} + +:host([pill]) .wa-button-group__vertical.wa-button-group__button-first { + border-start-start-radius: var(--wa-border-radius-pill); + border-start-end-radius: var(--wa-border-radius-pill); +} + +:host([pill]) .wa-button-group__vertical.wa-button-group__button-last { + border-end-start-radius: var(--wa-border-radius-pill); + border-end-end-radius: var(--wa-border-radius-pill); +} diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 574ed0b9a..e60e8de3e 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -7,8 +7,6 @@ import { HasSlotController } from '../../internal/slot.js'; import { MirrorValidator } from '../../internal/validators/mirror-validator.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js'; -import nativeStyles from '../../styles/native/button.css'; -import passthroughStyles from '../../styles/shadow/passthrough.css'; import appearanceStyles from '../../styles/utilities/appearance.css'; import sizeStyles from '../../styles/utilities/size.css'; import variantStyles from '../../styles/utilities/variants.css'; @@ -48,13 +46,15 @@ import styles from './button.css'; * @cssproperty --border-color - The color of the button's border when the button is not being interacted with. * @cssproperty --border-color-active - The color of the button's border when active. * @cssproperty --border-color-hover - The color of the button's border on hover. + * @cssproperty --box-shadow - The shadow effects around the edges of the button. * @cssproperty --text-color - The color of the button's label when the button is not being interacted with. * @cssproperty --text-color-active - The color of the button's label when active. * @cssproperty --text-color-hover - The color of the button's label on hover. */ @customElement('wa-button') export default class WaButton extends WebAwesomeFormAssociatedElement { - static shadowStyle = [passthroughStyles, variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles]; + static shadowStyle = [styles, variantStyles, sizeStyles, appearanceStyles]; + /* `styles` must come first so that utilities can successfully override the component's default styles */ static rectProxy = 'button'; static get validators() { @@ -65,7 +65,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { private readonly hasSlotController = new HasSlotController(this, '[default]', 'prefix', 'suffix'); private readonly localize = new LocalizeController(this); - @query('.wa-button') button: HTMLButtonElement | HTMLLinkElement; + @query('.button') button: HTMLButtonElement | HTMLLinkElement; @state() invalid = false; @property() title = ''; // make reactive to pass through @@ -230,7 +230,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { part="base" class=${classMap({ button: true, - 'wa-button': true, caret: this.caret, disabled: this.disabled, loading: this.loading, diff --git a/src/components/callout/callout.css b/src/components/callout/callout.css index c909f9aff..00512ef17 100644 --- a/src/components/callout/callout.css +++ b/src/components/callout/callout.css @@ -1,8 +1,23 @@ :host { - --icon-color: currentColor; + --icon-color: var(--text-color); --icon-size: var(--wa-font-size-l); + --spacing: var(--wa-space-m); display: flex; + position: relative; + align-items: stretch; + border-radius: var(--wa-panel-border-radius); + background-color: var(--background-color, var(--wa-color-fill-quiet)); + border-color: var(--border-color, transparent); + border-style: var(--wa-panel-border-style); + border-width: var(--wa-panel-border-width); + color: var(--wa-color-text-normal); + gap: var(--spacing); + padding: var(--spacing); +} + +:host([appearance~='accent']) { + color: var(--text-color, var(--wa-color-text-normal)); } [part~='icon'] { @@ -11,10 +26,6 @@ align-items: center; color: var(--icon-color); font-size: var(--icon-size); - - ::slotted(*) { - margin-inline-end: var(--spacing); - } } [part~='message'] { diff --git a/src/components/callout/callout.ts b/src/components/callout/callout.ts index 7e17ef445..5603aa9a5 100644 --- a/src/components/callout/callout.ts +++ b/src/components/callout/callout.ts @@ -1,7 +1,6 @@ import { html } from 'lit'; import { customElement, property } from 'lit/decorators.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; -import nativeStyles from '../../styles/native/callout.css'; import appearanceStyles from '../../styles/utilities/appearance.css'; import sizeStyles from '../../styles/utilities/size.css'; import variantStyles from '../../styles/utilities/variants.css'; @@ -25,7 +24,7 @@ import styles from './callout.css'; */ @customElement('wa-callout') export default class WaCallout extends WebAwesomeElement { - static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, nativeStyles, styles]; + static shadowStyle = [variantStyles, appearanceStyles, sizeStyles, styles]; /** The callout's theme variant. Defaults to `brand` if not within another element with a variant. */ @property({ reflect: true, initial: 'brand' }) variant: diff --git a/src/components/card/card.css b/src/components/card/card.css index 14d682db6..affa0290e 100644 --- a/src/components/card/card.css +++ b/src/components/card/card.css @@ -22,12 +22,11 @@ color: var(--wa-color-text-normal); } -:host(:is([appearance~='accent'], .wa-accent)) { +:host(:is([appearance~='accent'])) { color: var(--text-color, var(--wa-color-text-normal)); } -:host([appearance~='filled']), -:host(.wa-filled) { +:host([appearance~='filled']) { --inner-border-color: oklab(from var(--outlined-border-color) l a b / 65%); } diff --git a/src/components/checkbox/checkbox.css b/src/components/checkbox/checkbox.css index 301d2d4e5..f7ca19f23 100644 --- a/src/components/checkbox/checkbox.css +++ b/src/components/checkbox/checkbox.css @@ -1,9 +1,77 @@ -[part~='base'] { +:host { + --background-color: var(--wa-form-control-background-color); + --background-color-checked: var(--wa-form-control-activated-color); + --border-color: var(--wa-form-control-border-color); + --border-color-checked: var(--wa-form-control-activated-color); + --border-radius: min( + calc(var(--toggle-size) * 0.375), + var(--wa-border-radius-s) + ); /* min prevents entirely circular checkbox */ + --border-style: var(--wa-border-style); + --border-width: var(--wa-form-control-border-width); + --box-shadow: none; + --checked-icon-color: var(--wa-color-brand-on-loud); + --toggle-size: 1lh; + + color: var(--wa-form-control-value-color); + display: inline-flex; + font-family: inherit; + font-weight: var(--wa-form-control-value-font-weight); + line-height: var(--wa-form-control-value-line-height); + user-select: none; + -webkit-user-select: none; +} + +:host [part~='control'] { + flex: 0 0 auto; + position: relative; + display: inline-flex; + align-items: center; + justify-content: center; + width: var(--toggle-size); + height: var(--toggle-size); + border-color: var(--border-color); + border-radius: var(--border-radius); + border-style: var(--border-style); + border-width: var(--border-width); + background-color: var(--background-color); + box-shadow: var(--box-shadow); + transition: + background var(--wa-transition-normal), + border-color var(--wa-transition-fast), + box-shadow var(--wa-transition-fast), + color var(--wa-transition-fast); + transition-timing-function: var(--wa-transition-easing); + + margin-inline-end: var(--wa-space-xs); +} + +:host [part~='base'] { position: relative; display: flex; align-items: flex-start; color: var(--wa-form-control-value-color); vertical-align: middle; + cursor: pointer; +} + +/* Checked */ +[part~='base'] [part~="control"]:has(:checked, :indeterminate) /* scoping this rule to :host breaks in Firefox */ { + color: var(--checked-icon-color); + border-color: var(--border-color-checked); + background-color: var(--background-color-checked); +} + +/* Focus */ +[part~='base'] [part~="control"]:has(> input:focus-visible:not(:disabled)) /* scoping this rule to :host breaks in Firefox */ { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); +} + +/* Disabled */ +:host [part~='base']:has(input:disabled) { + opacity: 0.5; + cursor: not-allowed; } input { diff --git a/src/components/checkbox/checkbox.ts b/src/components/checkbox/checkbox.ts index d60ba8c29..f9d2a78c9 100644 --- a/src/components/checkbox/checkbox.ts +++ b/src/components/checkbox/checkbox.ts @@ -8,8 +8,7 @@ import { HasSlotController } from '../../internal/slot.js'; import { RequiredValidator } from '../../internal/validators/required-validator.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js'; -import nativeStyles from '../../styles/native/checkbox.css'; -import formControlStyles from '../../styles/shadow/form-control.css'; +import formControlStyles from '../../styles/component/form-control.css'; import sizeStyles from '../../styles/utilities/size.css'; import '../icon/icon.js'; import styles from './checkbox.css'; @@ -56,7 +55,7 @@ import styles from './checkbox.css'; */ @customElement('wa-checkbox') export default class WaCheckbox extends WebAwesomeFormAssociatedElement { - static shadowStyle = [formControlStyles, sizeStyles, nativeStyles, styles]; + static shadowStyle = [formControlStyles, sizeStyles, styles]; static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true }; diff --git a/src/components/color-picker/color-picker.ts b/src/components/color-picker/color-picker.ts index eb252783d..6e14a5453 100644 --- a/src/components/color-picker/color-picker.ts +++ b/src/components/color-picker/color-picker.ts @@ -12,7 +12,7 @@ import { HasSlotController } from '../../internal/slot.js'; import { RequiredValidator } from '../../internal/validators/required-validator.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js'; -import formControlStyles from '../../styles/shadow/form-control.css'; +import formControlStyles from '../../styles/component/form-control.css'; import sizeStyles from '../../styles/utilities/size.css'; import visuallyHidden from '../../styles/utilities/visually-hidden.css'; import { LocalizeController } from '../../utilities/localize.js'; diff --git a/src/components/details/details.css b/src/components/details/details.css index f69eba797..370fc7ecc 100644 --- a/src/components/details/details.css +++ b/src/components/details/details.css @@ -1,23 +1,85 @@ :host { + --icon-color: var(--wa-color-text-quiet); + --spacing: var(--wa-space-m); --show-duration: 200ms; --hide-duration: 200ms; - --display: block; + --outlined-border-color: var(--wa-color-surface-border); + + display: block; +} + +:host([appearance='plain']) { + border-radius: 0; +} + +:host summary { + display: flex; + align-items: center; + justify-content: space-between; + user-select: none; + -webkit-user-select: none; + cursor: pointer; + + &::marker, + &::-webkit-details-marker { + display: none; + } + + &:focus { + outline: none; + } + + &:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: calc(var(--spacing) + var(--wa-focus-ring-offset)); + } } details { + display: block; overflow-anchor: none; + border: var(--wa-panel-border-width) var(--border-color) var(--wa-panel-border-style); + background-color: var(--background-color, var(--wa-color-surface-default)); + border-radius: var(--wa-panel-border-radius); + color: var(--text-color, inherit); + + /* Print styles */ + @media print { + background: none; + border: solid var(--wa-border-width-s) var(--wa-color-surface-border); + + summary { + list-style: none; + } + } } :host([disabled]) details { opacity: 0.5; + cursor: not-allowed; +} - summary { - cursor: not-allowed; +:host summary { + display: flex; + align-items: center; + justify-content: space-between; + user-select: none; + -webkit-user-select: none; + cursor: pointer; + padding: var(--spacing); /* Add padding here */ + + &::marker, + &::-webkit-details-marker { + display: none; } - summary:focus-visible { + &:focus { outline: none; - box-shadow: none; + } + + &:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: calc(var(--spacing) + var(--wa-focus-ring-offset)); } } @@ -50,6 +112,8 @@ details { .content { display: block; padding-block-start: var(--spacing); + padding-inline: var(--spacing); /* Add horizontal padding */ + padding-block-end: var(--spacing); /* Add bottom padding */ } @keyframes show { diff --git a/src/components/details/details.ts b/src/components/details/details.ts index e9e6d596f..b47d24b4d 100644 --- a/src/components/details/details.ts +++ b/src/components/details/details.ts @@ -8,8 +8,6 @@ import { animate, parseDuration } from '../../internal/animate.js'; import { getTargetElement, waitForEvent } from '../../internal/event.js'; import { watch } from '../../internal/watch.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; -import nativeStyles from '../../styles/native/details.css'; -import passthroughStyles from '../../styles/shadow/passthrough.css'; import appearanceStyles from '../../styles/utilities/appearance.css'; import { LocalizeController } from '../../utilities/localize.js'; import '../icon/icon.js'; @@ -48,7 +46,7 @@ import styles from './details.css'; */ @customElement('wa-details') export default class WaDetails extends WebAwesomeElement { - static shadowStyle = [passthroughStyles, appearanceStyles, nativeStyles, styles]; + static shadowStyle = [appearanceStyles, styles]; private detailsObserver: MutationObserver; private readonly localize = new LocalizeController(this); diff --git a/src/components/input/input.css b/src/components/input/input.css index 9f0872b37..f54d9cc1a 100644 --- a/src/components/input/input.css +++ b/src/components/input/input.css @@ -1,21 +1,74 @@ :host { + --border-width: var(--wa-form-control-border-width); + --box-shadow: initial; + --outlined-background-color: var(--wa-form-control-background-color); + --outlined-border-color: var(--wa-form-control-border-color); + --outlined-text-color: var(--wa-form-control-value-color); + border-width: 0; } -.wa-text-field { +.text-field { flex: auto; display: flex; align-items: stretch; justify-content: start; position: relative; - - border-color: inherit; - border-style: inherit; - border-radius: inherit; transition: inherit; - height: var(--wa-form-control-height); - padding-block: 0; + border-color: var(--border-color, var(--wa-form-control-border-color)); + border-radius: var(--wa-form-control-border-radius); + border-style: var(--wa-form-control-border-style); + border-width: var(--border-width); + cursor: text; + color: var(--wa-form-control-value-color); + font-size: var(--wa-size); + font-family: inherit; + font-weight: var(--wa-form-control-value-font-weight); + line-height: var(--wa-form-control-value-line-height); + vertical-align: middle; + width: 100%; + transition: + background-color var(--wa-transition-normal), + border var(--wa-transition-normal), + outline var(--wa-transition-fast); + transition-timing-function: var(--wa-transition-easing); + background-color: var(--background-color, var(--wa-form-control-background-color)); + box-shadow: var(--box-shadow); + padding: var(--wa-space-smaller) var(--wa-space); + + &:focus-within { + outline: var(--wa-focus-ring); + outline-offset: var(--wa-focus-ring-offset); + } + + /* Style disabled inputs */ + &:has(:disabled) { + cursor: not-allowed; + opacity: 0.5; + } +} + +:host([pill]) .text-field { + border-radius: var(--wa-border-radius-pill) !important; +} + +.text-field input, +.text-field textarea { + /* + Fixes an alignment issue with placeholders. + https://github.com/shoelace-style/webawesome/issues/342 + */ + height: 100%; + + padding: 0; + border: none; + outline: none; + box-shadow: none; + margin: 0; + cursor: inherit; + -webkit-appearance: none; + font: inherit; } input { @@ -29,17 +82,51 @@ input { height: calc(var(--wa-form-control-height) - var(--border-width) * 2); padding-block: 0; color: inherit; + + &:autofill { + &, + &:hover, + &:focus, + &:active { + box-shadow: none; + caret-color: var(--wa-form-control-value-color); + } + } + + &::placeholder { + color: var(--wa-form-control-placeholder-color); + user-select: none; + -webkit-user-select: none; + } + + &::-webkit-search-decoration, + &::-webkit-search-cancel-button, + &::-webkit-search-results-button, + &::-webkit-search-results-decoration { + -webkit-appearance: none; + } + + &:focus { + outline: none; + } } -input::-webkit-search-decoration, -input::-webkit-search-cancel-button, -input::-webkit-search-results-button, -input::-webkit-search-results-decoration { - -webkit-appearance: none; -} +textarea { + &:autofill { + &, + &:hover, + &:focus, + &:active { + box-shadow: none; + caret-color: var(--wa-form-control-value-color); + } + } -input:focus { - outline: none; + &::placeholder { + color: var(--wa-form-control-placeholder-color); + user-select: none; + -webkit-user-select: none; + } } .prefix, diff --git a/src/components/input/input.ts b/src/components/input/input.ts index fdce36d91..e93899d1a 100644 --- a/src/components/input/input.ts +++ b/src/components/input/input.ts @@ -8,8 +8,7 @@ import { HasSlotController } from '../../internal/slot.js'; import { MirrorValidator } from '../../internal/validators/mirror-validator.js'; import { watch } from '../../internal/watch.js'; import { WebAwesomeFormAssociatedElement } from '../../internal/webawesome-form-associated-element.js'; -import nativeStyles from '../../styles/native/input.css'; -import formControlStyles from '../../styles/shadow/form-control.css'; +import formControlStyles from '../../styles/component/form-control.css'; import appearanceStyles from '../../styles/utilities/appearance.css'; import sizeStyles from '../../styles/utilities/size.css'; import { LocalizeController } from '../../utilities/localize.js'; @@ -58,7 +57,7 @@ import styles from './input.css'; */ @customElement('wa-input') export default class WaInput extends WebAwesomeFormAssociatedElement { - static shadowStyle = [sizeStyles, appearanceStyles, formControlStyles, nativeStyles, styles]; + static shadowStyle = [sizeStyles, appearanceStyles, formControlStyles, styles]; static shadowRootOptions = { ...WebAwesomeFormAssociatedElement.shadowRootOptions, delegatesFocus: true }; @@ -400,7 +399,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement { ${this.label} -