{% server "flashes" %}
{% block header %}
{% include 'breadcrumbs.njk' %}
diff --git a/docs/_includes/breadcrumbs.njk b/docs/_includes/breadcrumbs.njk
index 5f9fa145b..96d5563e8 100644
--- a/docs/_includes/breadcrumbs.njk
+++ b/docs/_includes/breadcrumbs.njk
@@ -1,8 +1,11 @@
-{% set breadcrumbs = page.url | breadcrumbs %}
-{% if breadcrumbs.length > 0 %}
+{% set ancestors = page.url | ancestors %}
+
+{% if ancestors.length > 0 %}
| @@ -12,19 +12,31 @@ | |||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||||
|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|---|
| {{ hue | capitalize }} | {% for tint_bg in tints -%} {% set color_bg = palettes[paletteId][hue][tint_bg] %} {% for tint_fg in tints | reverse -%} {% set color_fg = palettes[paletteId][hue][tint_fg] %} {% if (tint_fg - tint_bg) | abs == difference %} -
-
- {% set contrast_wcag = '' %}
- {% if color_fg and color_bg %}
- {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
- {% endif %}
+ {% set contrast_wcag = '' %}
+ {% if color_fg and color_bg -%}
+ {% set contrast_wcag = color_bg.contrast(color_fg, 'WCAG21') %}
+ {%- endif %}
+
+ |
{% if contrast_wcag %}
{{ contrast_wcag | number({maximumSignificantDigits: 2}) }}
{% else %}
diff --git a/docs/_includes/grouped-pages.njk b/docs/_includes/grouped-pages.njk
index 84cf846f5..2273f4c98 100644
--- a/docs/_includes/grouped-pages.njk
+++ b/docs/_includes/grouped-pages.njk
@@ -1,12 +1,18 @@
{# Cards for pages listed by category #}
{{ category | getCategoryTitle(categories) }}- {%- for page in pages -%} - {%- if not page.data.parent or listChildren -%} - {% include "page-card.njk" %} - {%- endif -%} - {%- endfor -%} +{% set groupedPages = allPages | groupPages(categories, page) %} +{% for category, pages in groupedPages -%} + {% if groupedPages.meta.groupCount > 1 and pages.length > 0 %} ++ {% if pages.meta.url %}{{ pages.meta.title }} + {% else %} + {{ pages.meta.title }} + {% endif %} ++ {% endif %} + {%- for page in pages -%} + {% include "page-card.njk" %} + {%- endfor -%} {%- endfor -%}
- {% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
+ {% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" ignore missing %}
{{ page.data.title }}
+ {% if pageSubtitle -%}
+ {{ pageSubtitle }}
+ {%- endif %}
{# Header #}
- {% if groupUrl | getCollectionItemFromUrl %}
+ {% if groupItem %}
{{ title or (tag | capitalize) }}
|
| + | appearance="" |
+ .wa-[appearance] |
+
+
+
|---|---|---|
accent + outlined |
+
+
+
+ |
+
+
+
+ |
+
accent |
+
+
+
+ |
+
+
+
+ |
+
filled + outlined |
+
+
+
+ |
+
+
+
+ |
+
filled |
+
+
+
+ |
+
+
+
+ |
+
outlined |
+
+
+
+ |
+
+
+
+ |
+
plain |
+
+
+
+ |
+
+
+
+ |
+
Button
+ +
+
+
+
+
+| + | appearance="" |
+ .wa-[appearance] |
+
+
+
|---|---|---|
accent + outlined |
+
+
+
+ |
+
+
+
+ |
+
accent |
+
+
+
+ |
+
+
+
+ |
+
filled + outlined |
+
+
+
+ |
+
+
+
+ |
+
filled |
+
+
+
+ |
+
+
+
+ |
+
outlined |
+
+
+
+ |
+
+
+
+ |
+
plain |
+
+
+
+ |
+
+
+
+ |
+
Callout
+ +
+
+
+
+
+| + | appearance="" |
+ .wa-[appearance] |
+
+
+
|---|---|---|
accent + outlined |
+
+
+
+ |
+
+
+
+ |
+
accent |
+
+
+
+ |
+
+
+
+ |
+
filled + outlined |
+
+
+
+ |
+
+
+
+ |
+
filled |
+
+
+
+ |
+
+
+
+ |
+
outlined |
+
+
+
+ |
+
+
+
+ |
+
plain |
+
+
+
+ |
+
+
+
+ |
+
Tag
+ +
+
+
+
+
+| + | appearance="" |
+ .wa-[appearance] |
+
+
+
|---|---|---|
accent + outlined |
+
+
+
+ |
+
+
+
+ |
+
accent |
+
+
+
+ |
+
+
+
+ |
+
filled + outlined |
+
+
+
+ |
+
+
+
+ |
+
filled |
+
+
+
+ |
+
+
+
+ |
+
outlined |
+
+
+
+ |
+
+
+
+ |
+
plain |
+
+
+
+ |
+
+
+
+ |
+
Form Controls
+ +
+
+
+
+
\ No newline at end of file
diff --git a/docs/_includes/visual-tests/color.njk b/docs/_includes/visual-tests/color.njk
new file mode 100644
index 000000000..ca06fcbf5
--- /dev/null
+++ b/docs/_includes/visual-tests/color.njk
@@ -0,0 +1,698 @@
+| + | appearance="" |
+ .wa-[appearance] |
+
+
+
|---|---|---|
outlined |
+
+
+
+ |
+
+
+
+ |
+
filled |
+
+
+
+ |
+
+
+
+ |
+
Badge
+ +
+
+
+
+
+| + | variant="" |
+ .wa-[variant] |
+
+
+
|---|---|---|
brand |
+
+
+
+ |
+
+
+
+ |
+
neutral |
+
+
+
+ |
+
+
+
+ |
+
success |
+
+
+
+ |
+
+
+
+ |
+
warning |
+
+
+
+ |
+
+
+
+ |
+
danger |
+
+
+
+ |
+
+
+
+ |
+
Button
+ +
+
+
+
+
+| + | variant="" |
+ .wa-[variant] |
+
+
+
|---|---|---|
brand |
+
+
+
+ |
+
+
+
+ |
+
neutral |
+
+
+
+ |
+
+
+
+ |
+
success |
+
+
+
+ |
+
+
+
+ |
+
warning |
+
+
+
+ |
+
+
+
+ |
+
danger |
+
+
+
+ |
+
+
+
+ |
+
Callout
+ +
+
+
+
+
+| + | variant="" |
+ .wa-[variant] |
+
+
+
|---|---|---|
brand |
+
+
+
+ |
+
+
+
+ |
+
neutral |
+
+
+
+ |
+
+
+
+ |
+
success |
+
+
+
+ |
+
+
+
+ |
+
warning |
+
+
+
+ |
+
+
+
+ |
+
danger |
+
+
+
+ |
+
+
+
+ |
+
Tag
+ +
+
+
+
+
\ No newline at end of file
diff --git a/docs/_includes/visual-tests/harmony.njk b/docs/_includes/visual-tests/harmony.njk
new file mode 100644
index 000000000..e6c58112f
--- /dev/null
+++ b/docs/_includes/visual-tests/harmony.njk
@@ -0,0 +1,32 @@
+| + | variant="" |
+ .wa-[variant] |
+
+
+
|---|---|---|
brand |
+
+
+
+ |
+
+
+
+ |
+
neutral |
+
+
+
+ |
+
+
+
+ |
+
success |
+
+
+
+ |
+
+
+
+ |
+
warning |
+
+
+
+ |
+
+
+
+ |
+
danger |
+
+
+
+ |
+
+
+
+ |
+
Form Controls
+ +```html {.example} + +``` + +Progress
+ +```html {.example} +
+
+```
\ No newline at end of file
diff --git a/docs/_includes/visual-tests/native.njk b/docs/_includes/visual-tests/native.njk
new file mode 100644
index 000000000..789d29337
--- /dev/null
+++ b/docs/_includes/visual-tests/native.njk
@@ -0,0 +1,745 @@
+Button
+ +
+
+
+
+
+| + | <wa-button> |
+ <button> |
+ .wa-button |
+
+
+
|---|---|---|---|
| default | +
+ |
+ + + | +
+ Button
+ |
+
.wa-brand |
+
+ |
+ + + | +
+ Brand
+ |
+
.wa-neutral |
+
+ |
+ + + | +
+ Neutral
+ |
+
.wa-success |
+
+ |
+ + + | +
+ Success
+ |
+
.wa-warning |
+
+ |
+ + + | +
+ Warning
+ |
+
.wa-danger |
+
+ |
+ + + | +
+ Danger
+ |
+
.wa-accent |
+
+ |
+ + + | +
+ Accent
+ |
+
.wa-filled |
+
+ |
+ + + | +
+ Filled
+ |
+
.wa-outlined |
+
+ |
+ + + | +
+ Outlined
+ |
+
.wa-plain |
+
+ |
+ + + | +
+ Plain
+ |
+
.wa-size-s |
+
+ |
+ + + | +
+ Small
+ |
+
.wa-size-m |
+
+ |
+ + + | +
+ Medium
+ |
+
.wa-size-l |
+
+ |
+ + + | +
+ Large
+ |
+
.wa-pill |
+
+ |
+ + + | +
+ Pill
+ |
+
Callout
+ +
+
+
+
+
+| + | <wa-callout> |
+ .wa-callout |
+
+
+
|---|---|---|
| default | +
+ |
+
+ Callout
+ |
+
.wa-brand |
+
+ |
+
+ Brand
+ |
+
.wa-neutral |
+
+ |
+
+ Neutral
+ |
+
.wa-success |
+
+ |
+
+ Success
+ |
+
.wa-warning |
+
+ |
+
+ Warning
+ |
+
.wa-danger |
+
+ |
+
+ Danger
+ |
+
.wa-accent |
+
+ |
+
+ Accent
+ |
+
.wa-filled |
+
+ |
+
+ Filled
+ |
+
.wa-outlined |
+
+ |
+
+ Outlined
+ |
+
.wa-plain |
+
+ |
+
+ Plain
+ |
+
.wa-size-s |
+
+ |
+
+ Small
+ |
+
.wa-size-m |
+
+ |
+
+ Medium
+ |
+
.wa-size-l |
+
+ |
+
+ Large
+ |
+
.wa-pill |
+
+ |
+
+ Pill
+ |
+
Checkbox
+ +
+
+
+
+
+| + | <wa-checkbox> |
+ <input type="checkbox"> |
+
+
+
|---|---|---|
| default | +
+ |
+ + + | +
checked |
+
+ |
+ + + | +
Color Picker
+ +
+
+
+
+
+| + | <wa-color-picker> |
+ <input type="color"> |
+
+
+
|---|---|---|
| default | +
+ |
+ + + | +
Details
+ +
+
+
+
+
+| + | <wa-details> |
+ <details> |
+
+
+
|---|---|---|
| default | +
+ |
+
+
+
+ Summary+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. + |
+
dir="rtl" |
+
+ |
+
+
+
+ تبديلني+استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن + |
+
Input
+ +
+
+
+
+
+| + | <wa-input> |
+ <input> |
+
+
+
|---|---|---|
| default | +
+ |
+ + + | +
type="password" |
+
+ |
+ + + | +
type="date" |
+
+ |
+ + + | +
type="time" |
+
+ |
+ + + | +
.wa-filled |
+
+ |
+ + + | +
.wa-size-s |
+
+ |
+ + + | +
.wa-size-m |
+
+ |
+ + + | +
.wa-size-l |
+
+ |
+ + + | +
Progress Bar
+ +
+
+
+
+
+| + | <wa-progress-bar> |
+ <progress> |
+
+
+
|---|---|---|
| default | +
+ |
+ + + | +
Radio
+ +
+
+
+
+
+| + | <wa-radio> |
+ <input type="radio"> |
+
+
+
|---|---|---|
| default | +
+ |
+ + + | +
checked |
+
+ |
+ + + | +
Select
+ +
+
+
+
+
+| + | <wa-select> |
+ <select> |
+
+
+
|---|---|---|
| default | +
+ |
+ + + | +
.wa-filled |
+
+ |
+ + + | +
.wa-size-s |
+
+ |
+ + + | +
.wa-size-m |
+
+ |
+ + + | +
.wa-size-l |
+
+ |
+ + + | +
Slider
+ +
+
+
+
+
+| + | <wa-slider> |
+ <input type="range"> |
+
+
+
|---|---|---|
| default | +
+ |
+ + + | +
Textarea
+ +
+
+
+
+
\ No newline at end of file
diff --git a/docs/_includes/visual-tests/size.njk b/docs/_includes/visual-tests/size.njk
new file mode 100644
index 000000000..884cdd0c2
--- /dev/null
+++ b/docs/_includes/visual-tests/size.njk
@@ -0,0 +1,856 @@
+| + | <wa-textarea> |
+ <textarea> |
+
+
+
|---|---|---|
| default | +
+ |
+ + + | +
.wa-filled |
+
+ |
+ + + | +
.wa-size-s |
+
+ |
+ + + | +
.wa-size-m |
+
+ |
+ + + | +
.wa-size-l |
+
+ |
+ + + | +
Button
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Button Group
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Callout
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Card
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Checkbox
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Color Picker
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Dropdown
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Menu
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Input
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Radio
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Radio Button
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Radio Group
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+
+
+ |
+
+
+
+ |
+
medium/m |
+
+
+
+ |
+
+
+
+ |
+
large/l |
+
+
+
+ |
+
+
+
+ |
+
Rating
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Select
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Switch
+ +
+
+
+
+
+| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Textarea
+ +
+
+
+
+
\ No newline at end of file
diff --git a/docs/_layouts/blank.njk b/docs/_layouts/blank.njk
index b02206d95..74bf2477c 100644
--- a/docs/_layouts/blank.njk
+++ b/docs/_layouts/blank.njk
@@ -2,6 +2,7 @@
{% include 'head.njk' %}
+ {% block head %}{% endblock %}
diff --git a/docs/_layouts/component.njk b/docs/_layouts/component.njk
index d84329a4f..aa4ca0fa9 100644
--- a/docs/_layouts/component.njk
+++ b/docs/_layouts/component.njk
@@ -255,7 +255,7 @@
{# Importing #}
| + | size="" |
+ .wa-size-[s|m|l] |
+
+
+
|---|---|---|
small/s |
+
+ |
+
+ |
+
medium/m |
+
+ |
+
+ |
+
large/l |
+
+ |
+
+ |
+
Importing
- The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets. + The autoloader is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
Using these styles
-If you want to use these styles without using the entirety of Web Awesome Native Styles, you can include the following CSS files:
+{% if file %} +{% markdown %} +## Opting In to Native {{ title }} Styles +If you want to use the Native {{ title }} styles **without including the entirety of Web Awesome Native Styles**, + you can include the following CSS files from the Web Awesome CDN. + +{% set stylesheet = file %} +{% include 'import-stylesheet-code.md.njk' %} + +To use all of Web Awesome Native styles, follow the [instructions on the Native Styles overview page](../). + +{% endmarkdown %} +{% endif %} - {% endif %} {% endblock %} diff --git a/docs/_layouts/overview.njk b/docs/_layouts/overview.njk index 848ad9fbe..48645d379 100644 --- a/docs/_layouts/overview.njk +++ b/docs/_layouts/overview.njk @@ -1,6 +1,5 @@ --- layout: page-outline -tags: ["overview"] --- {% set forTag = forTag or (page.url | split('/') | last) %} {% if description %} @@ -13,13 +12,15 @@ tags: ["overview"]{# Temp fix for spacing issue #} +
| + | Core tint | {% for tint in tints -%}{{ tint }} | {%- endfor %}|
|---|---|---|---|
| {{ hue | capitalize }} | +{% set coreTint = palettes[paletteId][hue].maxChromaTint %} +{%- set coreColor = palettes[paletteId][hue][coreTint] -%} +{%- set maxChroma = coreColor.c if coreColor.c > maxChroma else maxChroma -%} +{% if hue === 'gray' %} +|||
| + {{ hue | capitalize }} + | +
+
+ {{ palettes[paletteId][hue].maxChromaTint }}
+
+
+ {% if hue === 'gray' %}
+ `
+
+
+ {% else %}
+ {%- set hueAfter = hues[loop.index0 + 1] -%}
+ {%- set hueAfter = hues[0] if hueAfter == 'gray' else hueAfter -%}
+ {%- set minShift = hueRanges[hue].min - coreColor.h | round -%}
+ {%- set maxShift = hueRanges[hue].max - coreColor.h | round -%}
+
+
+ Gray colorfulness
+
+ Neutral
+ Warmer/Cooler
+
+
+ {%- set hueBefore = hue -%}
+ {% endif %}
+
+ Tweak {{ hue }} hue
+
+ More {{hueBefore}}
+ More {{hueAfter}}
+
+
+ --wa-color-{{ hue }}
+ |
{% for tint in tints -%}
-
-
+ {%- set color = palettes[paletteId][hue][tint] -%}
+
+ |
@@ -34,6 +180,26 @@
{%- endfor %}
|
+
+
+
+
+ Overall colorfulness
+
+ More muted
+ More vibrant
+Used By
-
-
+
+
+
+{% if page.fileSlug !== 'custom' %}
+
+
+
+
+
+
+
+
+ Theme default
+
+
+
+
+
+
+
+
+
+ This theme
+
+
+
+
+
+
+
+
+
+
+ This theme
+
+
+
+
+
+{% endif %}
+
+In HTML
+In CSS
+
-If you want to combine the **colors** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
+Add the following code to the `` of your page:
+```html { v-content:html="code.html.highlighted" }
+
+```
+
+
-{% set stylesheet = 'styles/themes/' + page.fileSlug + '/color.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-To use the **typography** from this theme with another theme, you can import this CSS file *after* the other theme’s CSS file:
-
-{% set stylesheet = 'styles/themes/' + page.fileSlug + '/typography.css' %}
-{% include 'import-stylesheet-code.md.njk' %}
-
-
-
+Add the following code at the top of your CSS file:
+```css { v-content:html="code.css.highlighted" }
+@import url('{% cdnUrl stylesheet %}');
+```
+
+
## Dark mode
@@ -138,6 +158,7 @@ You can apply the class to the `` element on your page to activate the dar
Web Awesome's themes have both light and dark styles built in.
However, Web Awesome doesn't try to auto-detect the user's light/dark mode preference.
This should be done at the application level.
+
As a best practice, to provide a dark theme in your app, you should:
- Check for [`prefers-color-scheme`](https://stackoverflow.com/a/57795495/567486) and use its value by default
@@ -146,5 +167,19 @@ As a best practice, to provide a dark theme in your app, you should:
Web Awesome avoids using the `prefers-color-scheme` media query because not all apps support dark mode, and it would break things for the ones that don't.
+Assuming the user's preference is in a variable called `colorScheme` (values: `auto`, `light`, `dark`),
+you can use the following JS snippet to apply the `wa-dark` class to the `` element accordingly:
+
+```js
+const systemDark = window.matchMedia('(prefers-color-scheme: dark)');
+const applyDark = function (event = systemDark) {
+ const isDark = colorScheme === 'auto' ? event.matches : colorScheme === 'dark';
+ document.documentElement.classList.toggle('wa-dark', isDark);
+};
+systemDark.addEventListener('change', applyDark);
+applyDark();
+```
+
+
{# end theme app #}
{% endmarkdown %}
{% endblock %}
diff --git a/docs/_layouts/utility.njk b/docs/_layouts/utility.njk
new file mode 100644
index 000000000..032e98277
--- /dev/null
+++ b/docs/_layouts/utility.njk
@@ -0,0 +1,19 @@
+{% extends '../_layouts/block.njk' %}
+
+{% block afterContent %}
+{% if file %}
+{% markdown %}
+## Opting In
+
+If you want to use this utility **only** without [all others](../), you can include the following CSS file from the Web Awesome CDN.
+
+{% set stylesheet = file %}
+{% include 'import-stylesheet-code.md.njk' %}
+
+Want them all?
+Follow the [instructions on the Utilities overview page](../) to get all Web Awesome utilities.
+
+{% endmarkdown %}
+{% endif %}
+
+{% endblock %}
diff --git a/docs/_utils/anchor-headings.js b/docs/_utils/anchor-headings.js
index 88f861194..5fac0cc20 100644
--- a/docs/_utils/anchor-headings.js
+++ b/docs/_utils/anchor-headings.js
@@ -37,7 +37,8 @@ export function anchorHeadingsPlugin(options = {}) {
}
// Look for headings
- container.querySelectorAll(options.headingSelector).forEach(heading => {
+ let selector = `:is(${options.headingSelector}):not([data-no-anchor], [data-no-anchor] *)`;
+ container.querySelectorAll(selector).forEach(heading => {
const hasAnchor = heading.querySelector('a');
const existingId = heading.getAttribute('id');
const clone = parse(heading.outerHTML);
diff --git a/docs/_utils/code-examples.js b/docs/_utils/code-examples.js
index 3b1750197..ed2da68bb 100644
--- a/docs/_utils/code-examples.js
+++ b/docs/_utils/code-examples.js
@@ -102,12 +102,7 @@ const templates = {
export function codeExamplesPlugin(eleventyConfig, options = {}) {
const defaultOptions = {
container: 'body',
- defaultOpen: (code, { outputPathIndex }) => {
- return (
- outputPathIndex === 1 && // is first
- code.textContent.length < 500
- ); // is short
- },
+ defaultOpen: () => false,
};
options = { ...defaultOptions, ...options };
diff --git a/docs/_utils/copy-code.js b/docs/_utils/copy-code.js
index 19d04a958..3b56ae933 100644
--- a/docs/_utils/copy-code.js
+++ b/docs/_utils/copy-code.js
@@ -3,30 +3,39 @@ import { parse } from 'node-html-parser';
/**
* Eleventy plugin to add copy buttons to code blocks.
*/
-export function copyCodePlugin(options = {}) {
+export function copyCodePlugin(eleventyConfig, options = {}) {
options = {
container: 'body',
...options,
};
- return function (eleventyConfig) {
- eleventyConfig.addTransform('copy-code', content => {
- const doc = parse(content, { blockTextElements: { code: true } });
- const container = doc.querySelector(options.container);
+ let codeCount = 0;
+ eleventyConfig.addTransform('copy-code', content => {
+ const doc = parse(content, { blockTextElements: { code: true } });
+ const container = doc.querySelector(options.container);
- if (!container) {
- return content;
+ if (!container) {
+ return content;
+ }
+
+ // Look for code blocks
+ container.querySelectorAll('pre > code').forEach(code => {
+ const pre = code.closest('pre');
+ let preId = pre.getAttribute('id') || `code-block-${++codeCount}`;
+ let codeId = code.getAttribute('id') || `${preId}-inner`;
+
+ if (!code.getAttribute('id')) {
+ code.setAttribute('id', codeId);
+ }
+ if (!pre.getAttribute('id')) {
+ pre.setAttribute('id', preId);
}
- // Look for code blocks
- container.querySelectorAll('pre > code').forEach(code => {
- const pre = code.closest('pre');
-
- // Add a copy button (we set the copy data at runtime to reduce page bloat)
- pre.innerHTML = `
+ Customize this theme by changing its colors and/or remixing it with design elements from other themes!
+
+
+ Color
-Default Color Palette
-{% set paletteURL = '/docs/palettes/' + palette + '/' %} -{% set themePage = page %} -{% set page = paletteURL | getCollectionItemFromUrl %}
-{% include 'page-card.njk' %}
+ {% if page.fileSlug === 'custom' %}
+
+
+
-{% set page = themePage %}
-
{% endblock %}
{% block afterContent %}
-{% markdown %}
-## How to use this theme
+{{ brand | capitalize }}
+ {{ 'Brand color' if page.fileSlug === 'custom' else 'Default brand color' }}
+ How to use this theme
+ +{% markdown %} You can import this theme from the Web Awesome CDN. {% set stylesheet = 'styles/themes/' + page.fileSlug + '.css' %} -{% include 'import-stylesheet-code.md.njk' %} -### Remixing { #remixing } + from the alpha build.
- */
-export function removeDataAlphaElements(options = {}) {
- options = {
- isAlpha: false,
- ...options,
- };
-
- return function (eleventyConfig) {
- eleventyConfig.addTransform('remove-data-alpha-elements', content => {
- const doc = parse(content, { blockTextElements: { code: true } });
-
- if (options.isAlpha) {
- doc.querySelectorAll('[data-alpha="remove"]').forEach(el => el.remove());
- }
-
- return doc.toString();
- });
- };
-}
diff --git a/docs/_utils/search.js b/docs/_utils/search.js
index 1d5ac43a6..90d06c40e 100644
--- a/docs/_utils/search.js
+++ b/docs/_utils/search.js
@@ -2,6 +2,7 @@
import { mkdir, writeFile } from 'fs/promises';
import lunr from 'lunr';
import { parse } from 'node-html-parser';
+import * as path from 'path';
import { dirname, join } from 'path';
function collapseWhitespace(string) {
@@ -23,9 +24,23 @@ export function searchPlugin(options = {}) {
};
return function (eleventyConfig) {
- const pagesToIndex = [];
+ const pagesToIndex = new Map();
+
+ eleventyConfig.addPreprocessor('exclude-unlisted-from-search', '*', function (data, content) {
+ if (data.unlisted) {
+ // no-op
+ } else {
+ pagesToIndex.set(data.page.inputPath, {});
+ }
+
+ return content;
+ });
eleventyConfig.addTransform('search', function (content) {
+ if (!pagesToIndex.has(this.page.inputPath)) {
+ return content;
+ }
+
const doc = parse(content, {
blockTextElements: {
script: false,
@@ -41,7 +56,7 @@ export function searchPlugin(options = {}) {
doc.querySelectorAll(selector).forEach(el => el.remove());
});
- pagesToIndex.push({
+ pagesToIndex.set(this.page.inputPath, {
title: collapseWhitespace(options.getTitle(doc)),
description: collapseWhitespace(options.getDescription(doc)),
headings: options.getHeadings(doc).map(collapseWhitespace),
@@ -52,8 +67,9 @@ export function searchPlugin(options = {}) {
return content;
});
- eleventyConfig.on('eleventy.after', ({ dir }) => {
- const outputFilename = join(dir.output, 'search.json');
+ eleventyConfig.on('eleventy.after', ({ directories }) => {
+ const { output } = directories;
+ const outputFilename = path.resolve(join(output, 'search.json'));
const map = [];
const searchIndex = lunr(async function () {
let index = 0;
@@ -63,7 +79,7 @@ export function searchPlugin(options = {}) {
this.field('h', { boost: 10 });
this.field('c');
- for (const page of pagesToIndex) {
+ for (const [_inputPath, page] of pagesToIndex) {
this.add({ id: index, t: page.title, h: page.headings, c: page.content });
map[index] = { title: page.title, description: page.description, url: page.url };
index++;
diff --git a/docs/assets/components/scoped.js b/docs/assets/components/scoped.js
new file mode 100644
index 000000000..781768ac5
--- /dev/null
+++ b/docs/assets/components/scoped.js
@@ -0,0 +1,171 @@
+/**
+ * Low-level utility to encapsulate a bit of HTML (mainly to apply certain stylesheets to it without them leaking to the rest of the page)
+ * Usage:
+
g.reach&&(g.reach=W);var z=w.prev;if(_&&(z=u(n,z,_),A+=_.length),c(n,z,L),w=u(n,z,new i(f,p?a.tokenize(N,p):N,k,N)),M&&u(n,w,M),L>1){var I={cause:f+","+d,reach:W};o(e,n,t,w.prev,A,I),g&&I.reach>g.reach&&(g.reach=I.reach)}}}}}}function s(){var e={value:null,prev:null,next:null},n={value:null,prev:e,next:null};e.next=n,this.head=e,this.tail=n,this.length=0}function u(e,n,t){var r=n.next,a={value:t,prev:n,next:r};return n.next=a,r.prev=a,e.length++,a}function c(e,n,t){for(var r=n.next,a=0;a"+i.content+""},!e.document)return e.addEventListener?(a.disableWorkerMessageHandler||e.addEventListener("message",(function(n){var t=JSON.parse(n.data),r=t.language,i=t.code,l=t.immediateClose;e.postMessage(a.highlight(i,a.languages[r],r)),l&&e.close()}),!1),a):a;var g=a.util.currentScript();function f(){a.manual||a.highlightAll()}if(g&&(a.filename=g.src,g.hasAttribute("data-manual")&&(a.manual=!0)),!a.manual){var h=document.readyState;"loading"===h||"interactive"===h&&g&&g.defer?document.addEventListener("DOMContentLoaded",f):window.requestAnimationFrame?window.requestAnimationFrame(f):window.setTimeout(f,16)}return a}(_self);"undefined"!=typeof module&&module.exports&&(module.exports=Prism),"undefined"!=typeof global&&(global.Prism=Prism);
+Prism.languages.markup={comment:{pattern://,greedy:!0},prolog:{pattern:/<\?[\s\S]+?\?>/,greedy:!0},doctype:{pattern:/"'[\]]|"[^"]*"|'[^']*')+(?:\[(?:[^<"'\]]|"[^"]*"|'[^']*'|<(?!!--)|)*\]\s*)?>/i,greedy:!0,inside:{"internal-subset":{pattern:/(^[^\[]*\[)[\s\S]+(?=\]>$)/,lookbehind:!0,greedy:!0,inside:null},string:{pattern:/"[^"]*"|'[^']*'/,greedy:!0},punctuation:/^$|[[\]]/,"doctype-tag":/^DOCTYPE/i,name:/[^\s<>'"]+/}},cdata:{pattern://i,greedy:!0},tag:{pattern:/<\/?(?!\d)[^\s>\/=$<%]+(?:\s(?:\s*[^\s>\/=]+(?:\s*=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+(?=[\s>]))|(?=[\s/>])))+)?\s*\/?>/,greedy:!0,inside:{tag:{pattern:/^<\/?[^\s>\/]+/,inside:{punctuation:/^<\/?/,namespace:/^[^\s>\/:]+:/}},"special-attr":[],"attr-value":{pattern:/=\s*(?:"[^"]*"|'[^']*'|[^\s'">=]+)/,inside:{punctuation:[{pattern:/^=/,alias:"attr-equals"},{pattern:/^(\s*)["']|["']$/,lookbehind:!0}]}},punctuation:/\/?>/,"attr-name":{pattern:/[^\s>\/]+/,inside:{namespace:/^[^\s>\/:]+:/}}}},entity:[{pattern:/&[\da-z]{1,8};/i,alias:"named-entity"},/&#x?[\da-f]{1,8};/i]},Prism.languages.markup.tag.inside["attr-value"].inside.entity=Prism.languages.markup.entity,Prism.languages.markup.doctype.inside["internal-subset"].inside=Prism.languages.markup,Prism.hooks.add("wrap",(function(a){"entity"===a.type&&(a.attributes.title=a.content.replace(/&/,"&"))})),Object.defineProperty(Prism.languages.markup.tag,"addInlined",{value:function(a,e){var s={};s["language-"+e]={pattern:/(^$)/i,lookbehind:!0,inside:Prism.languages[e]},s.cdata=/^$/i;var t={"included-cdata":{pattern://i,inside:s}};t["language-"+e]={pattern:/[\s\S]+/,inside:Prism.languages[e]};var n={};n[a]={pattern:RegExp("(<__[^>]*>)(?:))*\\]\\]>|(?!)".replace(/__/g,(function(){return a})),"i"),lookbehind:!0,greedy:!0,inside:t},Prism.languages.insertBefore("markup","cdata",n)}}),Object.defineProperty(Prism.languages.markup.tag,"addAttribute",{value:function(a,e){Prism.languages.markup.tag.inside["special-attr"].push({pattern:RegExp("(^|[\"'\\s])(?:"+a+")\\s*=\\s*(?:\"[^\"]*\"|'[^']*'|[^\\s'\">=]+(?=[\\s>]))","i"),lookbehind:!0,inside:{"attr-name":/^[^\s=]+/,"attr-value":{pattern:/=[\s\S]+/,inside:{value:{pattern:/(^=\s*(["']|(?!["'])))\S[\s\S]*(?=\2$)/,lookbehind:!0,alias:[e,"language-"+e],inside:Prism.languages[e]},punctuation:[{pattern:/^=/,alias:"attr-equals"},/"|'/]}}}})}}),Prism.languages.html=Prism.languages.markup,Prism.languages.mathml=Prism.languages.markup,Prism.languages.svg=Prism.languages.markup,Prism.languages.xml=Prism.languages.extend("markup",{}),Prism.languages.ssml=Prism.languages.xml,Prism.languages.atom=Prism.languages.xml,Prism.languages.rss=Prism.languages.xml;
+!function(s){var e=/(?:"(?:\\(?:\r\n|[\s\S])|[^"\\\r\n])*"|'(?:\\(?:\r\n|[\s\S])|[^'\\\r\n])*')/;s.languages.css={comment:/\/\*[\s\S]*?\*\//,atrule:{pattern:RegExp("@[\\w-](?:[^;{\\s\"']|\\s+(?!\\s)|"+e.source+")*?(?:;|(?=\\s*\\{))"),inside:{rule:/^@[\w-]+/,"selector-function-argument":{pattern:/(\bselector\s*\(\s*(?![\s)]))(?:[^()\s]|\s+(?![\s)])|\((?:[^()]|\([^()]*\))*\))+(?=\s*\))/,lookbehind:!0,alias:"selector"},keyword:{pattern:/(^|[^\w-])(?:and|not|only|or)(?![\w-])/,lookbehind:!0}}},url:{pattern:RegExp("\\burl\\((?:"+e.source+"|(?:[^\\\\\r\n()\"']|\\\\[^])*)\\)","i"),greedy:!0,inside:{function:/^url/i,punctuation:/^\(|\)$/,string:{pattern:RegExp("^"+e.source+"$"),alias:"url"}}},selector:{pattern:RegExp("(^|[{}\\s])[^{}\\s](?:[^{};\"'\\s]|\\s+(?![\\s{])|"+e.source+")*(?=\\s*\\{)"),lookbehind:!0},string:{pattern:e,greedy:!0},property:{pattern:/(^|[^-\w\xA0-\uFFFF])(?!\s)[-_a-z\xA0-\uFFFF](?:(?!\s)[-\w\xA0-\uFFFF])*(?=\s*:)/i,lookbehind:!0},important:/!important\b/i,function:{pattern:/(^|[^-a-z0-9])[-a-z0-9]+(?=\()/i,lookbehind:!0},punctuation:/[(){};:,]/},s.languages.css.atrule.inside.rest=s.languages.css;var t=s.languages.markup;t&&(t.tag.addInlined("style","css"),t.tag.addAttribute("style","css"))}(Prism);
+Prism.languages.clike={comment:[{pattern:/(^|[^\\])\/\*[\s\S]*?(?:\*\/|$)/,lookbehind:!0,greedy:!0},{pattern:/(^|[^\\:])\/\/.*/,lookbehind:!0,greedy:!0}],string:{pattern:/(["'])(?:\\(?:\r\n|[\s\S])|(?!\1)[^\\\r\n])*\1/,greedy:!0},"class-name":{pattern:/(\b(?:class|extends|implements|instanceof|interface|new|trait)\s+|\bcatch\s+\()[\w.\\]+/i,lookbehind:!0,inside:{punctuation:/[.\\]/}},keyword:/\b(?:break|catch|continue|do|else|finally|for|function|if|in|instanceof|new|null|return|throw|try|while)\b/,boolean:/\b(?:false|true)\b/,function:/\b\w+(?=\()/,number:/\b0x[\da-f]+\b|(?:\b\d+(?:\.\d*)?|\B\.\d+)(?:e[+-]?\d+)?/i,operator:/[<>]=?|[!=]=?=?|--?|\+\+?|&&?|\|\|?|[?*/~^%]/,punctuation:/[{}[\];(),.:]/};
+Prism.languages.javascript=Prism.languages.extend("clike",{"class-name":[Prism.languages.clike["class-name"],{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$A-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\.(?:constructor|prototype))/,lookbehind:!0}],keyword:[{pattern:/((?:^|\})\s*)catch\b/,lookbehind:!0},{pattern:/(^|[^.]|\.\.\.\s*)\b(?:as|assert(?=\s*\{)|async(?=\s*(?:function\b|\(|[$\w\xA0-\uFFFF]|$))|await|break|case|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally(?=\s*(?:\{|$))|for|from(?=\s*(?:['"]|$))|function|(?:get|set)(?=\s*(?:[#\[$\w\xA0-\uFFFF]|$))|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)\b/,lookbehind:!0}],function:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*(?:\.\s*(?:apply|bind|call)\s*)?\()/,number:{pattern:RegExp("(^|[^\\w$])(?:NaN|Infinity|0[bB][01]+(?:_[01]+)*n?|0[oO][0-7]+(?:_[0-7]+)*n?|0[xX][\\dA-Fa-f]+(?:_[\\dA-Fa-f]+)*n?|\\d+(?:_\\d+)*n|(?:\\d+(?:_\\d+)*(?:\\.(?:\\d+(?:_\\d+)*)?)?|\\.\\d+(?:_\\d+)*)(?:[Ee][+-]?\\d+(?:_\\d+)*)?)(?![\\w$])"),lookbehind:!0},operator:/--|\+\+|\*\*=?|=>|&&=?|\|\|=?|[!=]==|<<=?|>>>?=?|[-+*/%&|^!=<>]=?|\.{3}|\?\?=?|\?\.?|[~:]/}),Prism.languages.javascript["class-name"][0].pattern=/(\b(?:class|extends|implements|instanceof|interface|new)\s+)[\w.\\]+/,Prism.languages.insertBefore("javascript","keyword",{regex:{pattern:RegExp("((?:^|[^$\\w\\xA0-\\uFFFF.\"'\\])\\s]|\\b(?:return|yield))\\s*)/(?:(?:\\[(?:[^\\]\\\\\r\n]|\\\\.)*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}|(?:\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.|\\[(?:[^[\\]\\\\\r\n]|\\\\.)*\\])*\\])*\\]|\\\\.|[^/\\\\\\[\r\n])+/[dgimyus]{0,7}v[dgimyus]{0,7})(?=(?:\\s|/\\*(?:[^*]|\\*(?!/))*\\*/)*(?:$|[\r\n,.;:})\\]]|//))"),lookbehind:!0,greedy:!0,inside:{"regex-source":{pattern:/^(\/)[\s\S]+(?=\/[a-z]*$)/,lookbehind:!0,alias:"language-regex",inside:Prism.languages.regex},"regex-delimiter":/^\/|\/$/,"regex-flags":/^[a-z]+$/}},"function-variable":{pattern:/#?(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*[=:]\s*(?:async\s*)?(?:\bfunction\b|(?:\((?:[^()]|\([^()]*\))*\)|(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)\s*=>))/,alias:"function"},parameter:[{pattern:/(function(?:\s+(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*)?\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\))/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(^|[^$\w\xA0-\uFFFF])(?!\s)[_$a-z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*=>)/i,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/(\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*=>)/,lookbehind:!0,inside:Prism.languages.javascript},{pattern:/((?:\b|\s|^)(?!(?:as|async|await|break|case|catch|class|const|continue|debugger|default|delete|do|else|enum|export|extends|finally|for|from|function|get|if|implements|import|in|instanceof|interface|let|new|null|of|package|private|protected|public|return|set|static|super|switch|this|throw|try|typeof|undefined|var|void|while|with|yield)(?![$\w\xA0-\uFFFF]))(?:(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*\s*)\(\s*|\]\s*\(\s*)(?!\s)(?:[^()\s]|\s+(?![\s)])|\([^()]*\))+(?=\s*\)\s*\{)/,lookbehind:!0,inside:Prism.languages.javascript}],constant:/\b[A-Z](?:[A-Z_]|\dx?)*\b/}),Prism.languages.insertBefore("javascript","string",{hashbang:{pattern:/^#!.*/,greedy:!0,alias:"comment"},"template-string":{pattern:/`(?:\\[\s\S]|\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}|(?!\$\{)[^\\`])*`/,greedy:!0,inside:{"template-punctuation":{pattern:/^`|`$/,alias:"string"},interpolation:{pattern:/((?:^|[^\\])(?:\\{2})*)\$\{(?:[^{}]|\{(?:[^{}]|\{[^}]*\})*\})+\}/,lookbehind:!0,inside:{"interpolation-punctuation":{pattern:/^\$\{|\}$/,alias:"punctuation"},rest:Prism.languages.javascript}},string:/[\s\S]+/}},"string-property":{pattern:/((?:^|[,{])[ \t]*)(["'])(?:\\(?:\r\n|[\s\S])|(?!\2)[^\\\r\n])*\2(?=\s*:)/m,lookbehind:!0,greedy:!0,alias:"property"}}),Prism.languages.insertBefore("javascript","operator",{"literal-property":{pattern:/((?:^|[,{])[ \t]*)(?!\s)[_$a-zA-Z\xA0-\uFFFF](?:(?!\s)[$\w\xA0-\uFFFF])*(?=\s*:)/m,lookbehind:!0,alias:"property"}}),Prism.languages.markup&&(Prism.languages.markup.tag.addInlined("script","javascript"),Prism.languages.markup.tag.addAttribute("on(?:abort|blur|change|click|composition(?:end|start|update)|dblclick|error|focus(?:in|out)?|key(?:down|up)|load|mouse(?:down|enter|leave|move|out|over|up)|reset|resize|scroll|select|slotchange|submit|unload|wheel)","javascript")),Prism.languages.js=Prism.languages.javascript;
+!function(){if("undefined"!=typeof Prism){var n,s,a="";Prism.plugins.customClass={add:function(s){n=s},map:function(n){s="function"==typeof n?n:function(s){return n[s]||s}},prefix:function(n){a=n||""},apply:t},Prism.hooks.add("wrap",(function(e){if(n){var u=n({content:e.content,type:e.type,language:e.language});Array.isArray(u)?e.classes.push.apply(e.classes,u):u&&e.classes.push(u)}(s||a)&&(e.classes=e.classes.map((function(n){return t(n,e.language)})))}))}function t(n,t){return a+(s?s(n,t):n)}}();
diff --git a/docs/assets/scripts/prism.js b/docs/assets/scripts/prism.js
new file mode 100644
index 000000000..215b8092d
--- /dev/null
+++ b/docs/assets/scripts/prism.js
@@ -0,0 +1,8 @@
+globalThis.Prism = globalThis.Prism || {};
+globalThis.Prism.manual = true;
+
+await import('./prism-downloaded.js');
+
+Prism.plugins.customClass.prefix('code-');
+
+export default Prism;
diff --git a/docs/assets/scripts/sidebar-tweaks.js b/docs/assets/scripts/sidebar-tweaks.js
new file mode 100644
index 000000000..168004c53
--- /dev/null
+++ b/docs/assets/scripts/sidebar-tweaks.js
@@ -0,0 +1,120 @@
+import my from '/assets/scripts/my.js';
+
+const sidebar = {
+ addChild(a, parentA) {
+ let parentLi = parentA.closest('li');
+ let ul = parentLi.querySelector(':scope > ul');
+ ul ??= parentLi.appendChild(document.createElement('ul'));
+ let li = document.createElement('li');
+ li.append(a);
+ ul.appendChild(li);
+
+ // If we are on the same page, update the current link
+ let url = location.href.replace(/#.+$/, '');
+ if (url.startsWith(a.href)) {
+ // Remove existing current
+ for (let current of document.querySelectorAll('#sidebar a.current')) {
+ current.classList.remove('current');
+ }
+
+ a.classList.add('current');
+ }
+
+ return a;
+ },
+
+ removeLink(a) {
+ if (!a || !a.isConnected) {
+ // Link doesn't exist or is already removed
+ return;
+ }
+
+ let li = a?.closest('li');
+ let ul = li?.closest('ul');
+ let parentA = ul?.closest('li')?.querySelector(':scope > a');
+
+ li?.remove();
+ if (ul?.children.length === 0) {
+ ul.remove();
+ }
+
+ if (a.classList.contains('current')) {
+ // If the deleted palette was the current one, the current one is now the parent
+ parentA.classList.add('current');
+ }
+ },
+
+ findEntity(entity) {
+ return document.querySelector(`#sidebar a[href^="${entity.baseUrl}"][data-uid="${entity.uid}"]`);
+ },
+
+ renderEntity(entity) {
+ let { url, parentUrl } = entity;
+
+ // Find parent
+ let parentA = document.querySelector(`#sidebar a[href="${parentUrl}"]`);
+ let parentLi = parentA?.closest('li');
+
+ if (!parentLi) {
+ throw new Error(`Cannot find parent url ${parentUrl}`);
+ }
+
+ // Find existing
+ let a = this.findEntity(entity);
+ let alreadyExisted = !!a;
+
+ a ??= document.createElement('a');
+
+ a.textContent = entity.title;
+ a.href = url;
+
+ if (!alreadyExisted) {
+ a.dataset.uid = entity.uid;
+
+ a = sidebar.addChild(a, parentA);
+
+ // This is mainly to port Pro badges
+ let badges = Array.from(parentLi.querySelectorAll(':scope > wa-badge'), badge => badge.cloneNode(true));
+
+ let append = [...badges];
+
+ if (entity.delete) {
+ let deleteButton = Object.assign(document.createElement('wa-icon-button'), {
+ name: 'trash',
+ label: 'Delete',
+ className: 'delete',
+ });
+ deleteButton.addEventListener('click', () => entity.delete());
+ append.push(deleteButton);
+ }
+
+ if (append.length > 0) {
+ a.closest('li').append(' ', ...append);
+ }
+ }
+ },
+
+ render() {
+ for (let type in my) {
+ let controller = my[type];
+
+ if (!controller.saved) {
+ continue;
+ }
+
+ for (let entity of controller.saved) {
+ let object = controller.getObject(entity);
+ this.renderEntity(object);
+ }
+ }
+ },
+};
+
+globalThis.sidebar = sidebar;
+
+// Update sidebar when my saved stuff changes
+my.addEventListener('delete', e => sidebar.removeLink(sidebar.findEntity(e.detail)));
+my.addEventListener('save', e => sidebar.renderEntity(e.detail));
+
+sidebar.render();
+window.addEventListener('turbo:render', () => sidebar.render());
diff --git a/docs/assets/scripts/theme-picker.js b/docs/assets/scripts/theme-picker.js
index b1f31f76b..df547510a 100644
--- a/docs/assets/scripts/theme-picker.js
+++ b/docs/assets/scripts/theme-picker.js
@@ -1,14 +1,5 @@
-// Helper for view transitions
-export function domChange(fn, { behavior = 'smooth' } = {}) {
- const canUseViewTransitions =
- document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
-
- if (canUseViewTransitions && behavior === 'smooth') {
- document.startViewTransition(fn);
- } else {
- fn(true);
- }
-}
+import { domChange } from './util/dom-change.js';
+export { domChange };
export function nextFrame() {
return new Promise(resolve => requestAnimationFrame(resolve));
@@ -28,7 +19,7 @@ export class ThemeAspect {
});
// Listen for selections
- document.addEventListener('wa-change', event => {
+ document.addEventListener('change', event => {
const picker = event.target.closest(this.picker);
if (picker) {
this.set(picker.value);
@@ -100,6 +91,7 @@ const colorScheme = new ThemeAspect({
domChange(() => {
let dark = this.computedValue === 'dark';
document.documentElement.classList.toggle(`wa-dark`, dark);
+ document.documentElement.dispatchEvent(new CustomEvent('wa-color-scheme-change', { detail: { dark } }));
});
},
});
@@ -114,6 +106,6 @@ document.addEventListener('keydown', event => {
!event.composedPath().some(el => ['input', 'textarea'].includes(el?.tagName?.toLowerCase()))
) {
event.preventDefault();
- colorScheme.set(theming.colorScheme.resolvedValue === 'dark' ? 'light' : 'dark');
+ colorScheme.set(colorScheme.get() === 'dark' ? 'light' : 'dark');
}
});
diff --git a/docs/assets/scripts/turbo.js b/docs/assets/scripts/turbo.js
index fb1d0ea0f..e00e470c3 100644
--- a/docs/assets/scripts/turbo.js
+++ b/docs/assets/scripts/turbo.js
@@ -1,3 +1,6 @@
+import 'https://cdn.jsdelivr.net/npm/@hotwired/turbo@8.0.10/+esm';
+import { preventTurboFouce } from '/dist/webawesome.js';
+
if (!window.___turboScrollPositions___) {
window.___turboScrollPositions___ = {};
}
@@ -70,3 +73,4 @@ function fixDSD(e) {
window.addEventListener('turbo:before-cache', saveScrollPosition);
window.addEventListener('turbo:before-render', restoreScrollPosition);
window.addEventListener('turbo:render', restoreScrollPosition);
+preventTurboFouce();
diff --git a/docs/assets/scripts/tweak.js b/docs/assets/scripts/tweak.js
new file mode 100644
index 000000000..47f1f5702
--- /dev/null
+++ b/docs/assets/scripts/tweak.js
@@ -0,0 +1,6 @@
+/**
+ * Get import code for remixed themes and tweaked palettes.
+ */
+export { cdnUrl, hueRanges, hues, selectors, tints, urls } from '../data/index.js';
+export { default as Permalink } from './permalink.js';
+export { getThemeCode } from './tweak/code.js';
diff --git a/docs/assets/scripts/tweak/code.js b/docs/assets/scripts/tweak/code.js
new file mode 100644
index 000000000..b2f206223
--- /dev/null
+++ b/docs/assets/scripts/tweak/code.js
@@ -0,0 +1,91 @@
+/**
+ * Get import code for remixed themes and tweaked palettes.
+ */
+import { selectors, themeConfig } from '../../data/theming.js';
+import { deepEach, deepGet } from '/assets/scripts/util/deep.js';
+
+export function cssImport(url, options = {}) {
+ let { language = 'html', cdnUrl = '/dist/', attributes } = options;
+ url = cdnUrl + url;
+
+ if (language === 'css') {
+ return `@import url('${url}');`;
+ } else {
+ attributes = attributes ? ` ${attributes}` : '';
+ return ``;
+ }
+}
+
+export function cssLiteral(value, options = {}) {
+ let { language = 'html' } = options;
+
+ if (language === 'css') {
+ return value;
+ } else {
+ return `\n${value}\n`;
+ }
+}
+
+/**
+ * Get code for a theme, including tweaks
+ * @param {*} theme
+ * @param {*} options
+ * @returns
+ */
+export function getThemeCode(theme, options = {}) {
+ let urls = [];
+ let declarations = [];
+ let id = options.id ?? theme.base ?? 'default';
+
+ deepEach(themeConfig, (config, aspect, obj, path) => {
+ if (!config?.default) {
+ // We're not in a config object
+ return;
+ }
+
+ let value = deepGet(theme, [...path, aspect]);
+
+ if (!value) {
+ return;
+ }
+
+ if (config.url) {
+ // This is implemented by pulling in different CSS files
+ urls.push(config.url(value));
+ } else {
+ if (config.cssProperty) {
+ declarations.push(`${config.cssProperty}: ${value};`);
+ }
+ }
+ });
+
+ let ret = urls.map(url => cssImport(url, options)).join('\n');
+
+ if (declarations.length > 0) {
+ let cssCode = cssRule(selectors.theme(id), declarations, options);
+
+ let faKitAttribute = ` data-fa-kit-code="${theme.icon.kit}"`;
+ if (theme.icon.kit) {
+ options.attributes ??= '';
+ options.attributes += faKitAttribute;
+ cssCode =
+ `/* Note: To use Font Awesome Pro icons,\n set ${faKitAttribute} on the (or any other) element */\n\n` +
+ cssCode;
+ }
+
+ cssCode = cssLiteral(cssCode, options);
+
+ if (ret) {
+ ret += '\n\n' + cssCode;
+ }
+ }
+
+ return ret;
+}
+
+export function cssRule(selector, declarations, { indent = ' ' } = {}) {
+ selector = Array.isArray(selector) ? selector.flat().join(',\n') : selector;
+ declarations = Array.isArray(declarations) ? declarations.flat() : declarations;
+ declarations = declarations.map(declaration => indent + declaration.trim()).join('\n');
+ return `${selector} {\n${declarations.trimEnd()}\n}`;
+}
diff --git a/docs/assets/scripts/tweak/util.js b/docs/assets/scripts/tweak/util.js
new file mode 100644
index 000000000..12ee8dd55
--- /dev/null
+++ b/docs/assets/scripts/tweak/util.js
@@ -0,0 +1,36 @@
+export function normalizeAngles(angles) {
+ // First, normalize
+ angles = angles.map(h => ((h % 360) + 360) % 360);
+
+ // Remove top and bottom 25% and find average
+ let averageHue =
+ angles
+ .toSorted((a, b) => a - b)
+ .slice(angles.length / 4, -angles.length / 4)
+ .reduce((a, b) => a + b, 0) / angles.length;
+
+ for (let i = 0; i < angles.length; i++) {
+ let h = angles[i];
+ let prevHue = angles[i - 1];
+ let delta = h - prevHue;
+
+ if (Math.abs(delta) > 180) {
+ let equivalent = [h + 360, h - 360];
+ // Offset hue to minimize difference in the direction that brings it closer to the average
+ let delta = h - averageHue;
+
+ if (Math.abs(equivalent[0] - prevHue) <= Math.abs(equivalent[1] - prevHue)) {
+ angles[i] = equivalent[0];
+ } else {
+ angles[i] = equivalent[1];
+ }
+ }
+ }
+
+ return angles;
+}
+
+export function subtractAngles(θ1, θ2) {
+ let [a, b] = normalizeAngles([θ1, θ2]);
+ return a - b;
+}
diff --git a/docs/assets/scripts/util/array.js b/docs/assets/scripts/util/array.js
new file mode 100644
index 000000000..6eff57b6d
--- /dev/null
+++ b/docs/assets/scripts/util/array.js
@@ -0,0 +1,17 @@
+/**
+ * Picks a random element from an array.
+ * @param {any[]} arr
+ */
+export function sample(arr) {
+ if (!Array.isArray(arr)) {
+ return arr;
+ }
+
+ if (arr.length < 2) {
+ return arr[0];
+ }
+
+ let index = Math.floor(Math.random() * arr.length);
+
+ return arr[index];
+}
diff --git a/docs/assets/scripts/util/deep.js b/docs/assets/scripts/util/deep.js
new file mode 100644
index 000000000..4bfcfd5d7
--- /dev/null
+++ b/docs/assets/scripts/util/deep.js
@@ -0,0 +1,180 @@
+/**
+ * @typedef { string | number | Symbol } Property
+ * @typedef { (value: any, key: Property, parent: object, path: Property[]) => any } EachCallback
+ */
+
+export function isPlainObject(obj) {
+ return isObject(obj, 'Object');
+}
+
+export function isObject(obj, type) {
+ if (!obj || typeof obj !== 'object') {
+ return false;
+ }
+
+ let proto = Object.getPrototypeOf(obj);
+ return proto.constructor?.name === type;
+}
+
+export function deepMerge(target, source, options = {}) {
+ let {
+ emptyValues = [undefined],
+ containers = ['Object', 'EventTarget'],
+ isContainer = value => containers.some(type => isObject(value, type)),
+ } = options;
+
+ if (isContainer(target) && isContainer(source)) {
+ for (let key in source) {
+ if (key in target && isContainer(target[key]) && isContainer(source[key])) {
+ target[key] = deepMerge(target[key], source[key], options);
+ } else if (!emptyValues.includes(source[key])) {
+ target[key] = source[key];
+ }
+ }
+
+ return target;
+ }
+
+ return target ?? source;
+}
+
+/**
+ * Iterate over a deep array, recursively for plain objects
+ * @param { any } obj The object to iterate over. Can be an array or a plain object, or even a primitive value.
+ * @param { EachCallback } callback. value is === parent[key]
+ * @param { object } [parentObj] The parent object of the current value Mainly used internally to facilitate recursion.
+ * @param { Property } [key] The key of the current value. Mainly used internally to facilitate recursion.
+ * @param { Property[] } [path] Any existing path (not including the key). Mainly used internally to facilitate recursion.
+ */
+export function deepEach(obj, callback, parentObj, key, path = []) {
+ if (key !== undefined) {
+ let ret = callback(obj, key, parentObj, path);
+
+ if (ret !== undefined) {
+ if (ret === false) {
+ // Do not descend further
+ return;
+ }
+
+ // Overwrite value
+ parentObj[key] = ret;
+ obj = ret;
+ }
+ }
+
+ let newPath = key !== undefined ? [...path, key] : path;
+
+ if (Array.isArray(obj)) {
+ for (let i = 0; i < obj.length; i++) {
+ deepEach(obj[i], callback, obj, i, newPath);
+ }
+ } else if (isPlainObject(obj)) {
+ for (let key in obj) {
+ deepEach(obj[key], callback, obj, key, newPath);
+ }
+ }
+}
+
+/**
+ * Get a value from a deeply nested object
+ * @param {*} obj
+ * @param {PropertyPath} path
+ * @returns
+ */
+export function deepGet(obj, path) {
+ if (path.length === 0) {
+ return obj;
+ }
+
+ let ret = obj;
+
+ for (let key of path) {
+ if (ret === undefined) {
+ return undefined;
+ }
+
+ ret = ret[key];
+ }
+
+ return ret;
+}
+
+/**
+ * Set a value in a deep object, creating object literals as needed
+ * @param { * } obj
+ * @param { Property[] } path
+ * @param { any } value
+ */
+export function deepSet(obj, path, value) {
+ if (path.length === 0) {
+ return;
+ }
+
+ let key = path.pop();
+
+ let ret = path.reduce((acc, property) => {
+ if (acc[property] === undefined) {
+ acc[property] = {};
+ }
+
+ return acc[property];
+ }, obj);
+
+ ret[key] = value;
+}
+
+export function deepClone(obj) {
+ if (!obj) {
+ return obj;
+ }
+
+ let ret = obj;
+
+ if (Array.isArray(obj)) {
+ ret = obj.map(item => deepClone(item));
+ } else if (isPlainObject(obj)) {
+ ret = { ...obj };
+
+ for (let key in obj) {
+ ret[key] = deepClone(obj[key]);
+ }
+ }
+
+ return ret;
+}
+
+/**
+ * Like Object.entries, but for deeply nested objects.
+ * For shallow objects the output is the same as Object.entries.
+ * @param {*} obj
+ * @param { object } options
+ * @param { EachCallback } each - If this returns false, the entry is not added to the result and the recursion is stopped.
+ * @param { EachCallback } filter - If this returns false, the entry is not added to the result.
+ * @param { EachCallback } descend - If this returns false, recursion is stopped.
+ * @returns {any[][]}
+ */
+export function deepEntries(obj, options = {}) {
+ let { each, filter, descend } = options;
+ let entries = [];
+
+ deepEach(obj, (value, key, parent, path) => {
+ let ret = each?.(value, key, parent, path);
+
+ if (ret !== false) {
+ let included = filter?.(value, key, parent, path) ?? true;
+
+ if (included) {
+ entries.push([...path, key, value]);
+ }
+
+ let descendRet = descend?.(value, key, parent, path);
+ if (descendRet === false) {
+ return false; // Stop recursion
+ }
+ }
+
+ return ret;
+ });
+
+ return entries;
+}
diff --git a/docs/assets/scripts/util/dom-change.js b/docs/assets/scripts/util/dom-change.js
new file mode 100644
index 000000000..f01a3d13c
--- /dev/null
+++ b/docs/assets/scripts/util/dom-change.js
@@ -0,0 +1,39 @@
+let initialPageLoadComplete = document.readyState === 'complete';
+
+if (!initialPageLoadComplete) {
+ window.addEventListener('load', () => {
+ initialPageLoadComplete = true;
+ });
+}
+
+/**
+ * Helper for performing a DOM change using a view transition, wherever supported and reduced motion is not desired.
+ * @param {function} fn - Function to perform the DOM change. If async, must resolve when the change is complete.
+ * @param {object} [options] - Options for the transition
+ * @param {'smooth' | 'instant'} [options.behavior] - Transition behavior. Defaults to 'smooth'. 'instant' will skip the transition.
+ * @param {boolean} [options.ignoreInitialLoad] - If true, will skip the transition on initial page load. Defaults to true.
+ */
+export function domChange(fn, { behavior = 'smooth', ignoreInitialLoad = true } = {}) {
+ const canUseViewTransitions =
+ document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+
+ // Skip transitions on initial page load
+ if (!initialPageLoadComplete && ignoreInitialLoad) {
+ fn(false);
+ return null;
+ }
+
+ if (canUseViewTransitions && behavior === 'smooth') {
+ const transition = document.startViewTransition(() => {
+ fn(true);
+ // Wait a brief delay before finishing the transition to prevent jumpiness
+ return new Promise(resolve => setTimeout(resolve, 200));
+ });
+ return transition;
+ } else {
+ fn(false);
+ return null;
+ }
+}
+
+export default domChange;
diff --git a/docs/assets/scripts/util/string.js b/docs/assets/scripts/util/string.js
new file mode 100644
index 000000000..214940f3f
--- /dev/null
+++ b/docs/assets/scripts/util/string.js
@@ -0,0 +1,24 @@
+/**
+ * Make the first letter of a string uppercase
+ * @param {*} str
+ * @returns
+ */
+export function capitalize(str) {
+ str += '';
+ return str[0].toUpperCase() + str.slice(1);
+}
+
+/**
+ * Convert a readable string to a slug.
+ * @param {*} str - Input string. If argument is not a string, it will be stringified.
+ * @returns {string} - The slugified string
+ */
+export function slugify(str) {
+ return (str + '')
+ .normalize('NFD')
+ .replace(/[\u0300-\u036f]/g, '') // Convert accented letters to ASCII
+ .replace(/[^\w\s-]/g, '') // Remove remaining non-ASCII characters
+ .trim()
+ .replace(/\s+/g, '-') // Convert whitespace to hyphens
+ .toLowerCase();
+}
diff --git a/docs/assets/styles/code-examples.css b/docs/assets/styles/code-examples.css
deleted file mode 100644
index 497ac17d5..000000000
--- a/docs/assets/styles/code-examples.css
+++ /dev/null
@@ -1,87 +0,0 @@
-.code-example {
- border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
- border-radius: var(--wa-border-radius-l);
- color: var(--wa-color-text-normal);
- margin-block-end: var(--wa-flow-spacing);
-}
-
-.code-example-preview {
- padding: 2rem;
- border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-
- > :first-child {
- margin-block-start: 0;
- }
-
- > :last-child {
- margin-block-end: 0;
- }
-}
-
-.code-example-source {
- border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
-}
-
-.code-example:not(.open) .code-example-source {
- display: none;
-}
-
-.code-example.open .code-example-toggle wa-icon {
- rotate: 180deg;
-}
-
-.code-example-source pre {
- position: relative;
- border-radius: 0;
- margin: 0;
- white-space: normal;
-}
-
-.code-example-source:not(:has(+ .code-example-buttons)) {
- border-bottom: none;
-
- pre {
- border-bottom-right-radius: var(--wa-border-radius-l);
- border-bottom-left-radius: var(--wa-border-radius-l);
- }
-}
-
-.code-example-buttons {
- display: flex;
- align-items: stretch;
-
- button {
- all: unset;
- flex: 1 0 auto;
- font-size: 0.875rem;
- color: var(--wa-color-text-quiet);
- border-left: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
- text-align: center;
- padding: 0.5rem;
- cursor: pointer;
-
- &:first-of-type {
- border-left: none;
- border-bottom-left-radius: var(--wa-border-radius-l);
- }
-
- &:last-of-type {
- border-bottom-right-radius: var(--wa-border-radius-l);
- }
-
- &:focus-visible {
- outline: var(--wa-focus-ring);
- }
- }
-
- .code-example-pen {
- flex: 0 0 100px;
- white-space: nowrap;
- }
-
- wa-icon {
- width: 1em;
- height: 1em;
- vertical-align: -2px;
- }
-}
diff --git a/docs/assets/styles/copy-code.css b/docs/assets/styles/copy-code.css
index d9fe94e36..f65887b64 100644
--- a/docs/assets/styles/copy-code.css
+++ b/docs/assets/styles/copy-code.css
@@ -27,3 +27,19 @@ wa-copy-button.copy-button {
opacity: 1;
}
}
+
+.block-link-icon {
+ position: absolute;
+ inset-block-start: 0;
+ inset-inline-end: calc(100% + var(--wa-space-s));
+
+ transition: var(--wa-transition-slow);
+
+ &:not(:hover, :focus) {
+ opacity: 50%;
+ }
+
+ :not(:hover, :focus-within) > & {
+ opacity: 0;
+ }
+}
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css
index b98b5bc8f..8bd5b1391 100644
--- a/docs/assets/styles/docs.css
+++ b/docs/assets/styles/docs.css
@@ -1,9 +1,9 @@
-@import 'code-examples.css';
@import 'code-highlighter.css';
@import 'copy-code.css';
@import 'outline.css';
@import 'search.css';
@import 'cera_typeface.css';
+@import 'theme-icons.css';
:root {
--wa-brand-orange: #f36944;
@@ -156,7 +156,7 @@ wa-page > header {
}
/* Pro badges */
-wa-badge.pro::part(base) {
+wa-badge.pro {
background-color: var(--wa-brand-orange);
border-color: var(--wa-brand-orange);
}
@@ -188,6 +188,29 @@ wa-badge.pro::part(base) {
}
}
}
+
+ wa-icon-button.delete {
+ vertical-align: -0.2em;
+ margin-inline-start: var(--wa-space-xs);
+
+ &:not(li:hover > *, :focus) {
+ opacity: 0;
+ }
+ }
+}
+
+wa-icon-button.delete {
+ &:hover {
+ color: var(--wa-color-danger-on-quiet);
+ }
+
+ &::part(base):hover {
+ background: var(--wa-color-danger-fill-quiet);
+ }
+
+ &:not(:hover, :focus) {
+ opacity: 0.5;
+ }
}
#sidebar-close-button {
@@ -232,16 +255,23 @@ wa-page > main {
margin-inline: auto;
}
-h1.title wa-badge {
- vertical-align: middle;
-
- &::part(base) {
+h1.title {
+ wa-badge {
+ vertical-align: middle;
font-size: 1.5rem;
}
}
.block-info {
+ display: flex;
+ gap: var(--wa-space-xs);
+ flex-wrap: wrap;
+ align-items: center;
margin-block-end: var(--wa-flow-spacing);
+
+ code {
+ line-height: var(--wa-line-height-condensed);
+ }
}
/* Current link */
@@ -331,48 +361,47 @@ wa-page > main:has(> .index-grid) {
.index-grid {
display: grid;
- grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
+ grid-template-columns: repeat(4, 1fr);
gap: var(--wa-space-2xl);
margin-block-end: var(--wa-space-3xl);
+ @media screen and (max-width: 1470px) {
+ grid-template-columns: repeat(3, 1fr);
+ }
+
+ @media screen and (max-width: 960px) {
+ grid-template-columns: repeat(2, 1fr);
+ }
+
+ @media screen and (max-width: 500px) {
+ grid-template-columns: repeat(1, 1fr);
+ }
+
a {
border-radius: var(--wa-border-radius-l);
text-decoration: none;
}
wa-card {
- box-shadow: none;
--spacing: var(--wa-space-m);
- inline-size: 100%;
-
- &:hover {
- --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);
-
- .page-name {
- color: var(--wa-color-brand-on-quiet);
- }
- }
[slot='header'] {
display: flex;
}
&::part(header) {
- background-color: var(--wa-color-neutral-fill-quiet);
- border-bottom: none;
+ background-color: var(--header-background, var(--wa-color-neutral-fill-quiet));
display: flex;
align-items: center;
justify-content: center;
min-block-size: calc(6rem + var(--spacing));
}
}
+}
- .page-name {
- font-size: var(--wa-font-size-s);
- font-weight: var(--wa-font-weight-action);
- }
+wa-card .page-name {
+ font-size: var(--wa-font-size-s);
+ font-weight: var(--wa-font-weight-action);
}
.index-category {
@@ -381,6 +410,146 @@ wa-page > main:has(> .index-grid) {
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;
@@ -400,9 +569,18 @@ wa-page > main:has(> .index-grid) {
&.color {
border-color: transparent;
+ transition: background var(--wa-transition-slow);
+ background: linear-gradient(var(--color-2, transparent) 0% 100%) no-repeat border-box var(--color,);
+ background-position: var(--color-2-position, bottom);
+ background-size: var(--color-2-width, 100%) var(--color-2-height, 50%);
+
+ &.contrast-fail {
+ outline: 1px dashed var(--wa-color-red);
+ outline-offset: calc(-1 * var(--wa-space-2xs));
+ }
}
- wa-copy-button {
+ > wa-copy-button {
position: absolute;
top: 0;
left: 0;
@@ -437,6 +615,7 @@ table.colors {
padding-block: 0;
}
}
+
tbody {
tr {
border: none;
@@ -456,6 +635,59 @@ table.colors {
padding-block: var(--wa-space-s);
}
}
+
+ .core-column {
+ padding-inline-end: var(--wa-space-xl);
+ }
+}
+
+.value-up,
+.value-down {
+ position: relative;
+
+ &::after {
+ content: ' ' var(--icon);
+ position: absolute;
+ margin-inline-start: 3em;
+ scale: 1 0.6;
+ color: color-mix(in oklch, oklch(from var(--icon-color) none c h) 0%, oklch(from currentColor l none none));
+ font-size: 90%;
+ }
+}
+
+.value-down {
+ --icon: '▼';
+ --icon-color: var(--wa-color-danger-fill-quiet);
+
+ &::after {
+ margin-block-end: -0.2em;
+ }
+}
+
+.value-up {
+ --icon: '▲';
+ --icon-color: var(--wa-color-success-fill-quiet);
+}
+
+.icon-modifier {
+ position: relative;
+ display: inline-flex;
+
+ .modifier {
+ position: absolute;
+ bottom: -0.1em;
+ right: -0.3em;
+ font-size: 60%;
+
+ &::part(svg) {
+ stroke: var(--background-color, var(--wa-color-surface-default));
+ stroke-width: 100px;
+ paint-order: stroke;
+ overflow: visible;
+ stroke-linecap: round;
+ stroke-linejoin: round;
+ }
+ }
}
/* Layout Examples */
@@ -494,13 +726,6 @@ table.colors {
margin-block-end: var(--wa-flow-spacing);
}
-/** mobile */
-@media screen and (max-width: 768px) {
- wa-page .only-desktop {
- display: none;
- }
-}
-
/** desktop */
@media screen and not (max-width: 768px) {
/* Navigation sidebar */
@@ -538,23 +763,4 @@ table.colors {
height: 65vh;
max-height: 21lh;
}
-
- #mix_and_match {
- strong {
- display: flex;
- align-items: center;
- gap: var(--wa-space-2xs);
- margin-top: 1.2em;
- }
-
- wa-select::part(label) {
- margin-block-end: 0;
- }
-
- wa-select[value='']::part(display-input),
- wa-option[value=''] {
- font-style: italic;
- color: var(--wa-color-text-quiet);
- }
- }
}
diff --git a/docs/assets/styles/search.css b/docs/assets/styles/search.css
index 66798001c..8e0f37771 100644
--- a/docs/assets/styles/search.css
+++ b/docs/assets/styles/search.css
@@ -7,8 +7,9 @@
margin: 0 auto;
overflow: hidden;
- &::part(base) {
- margin-block: 10rem;
+ &::part(dialog) {
+ margin-block-start: 10vh;
+ margin-block-end: 0;
}
&::part(body) {
@@ -23,26 +24,26 @@
@media screen and (max-width: 900px) {
max-width: calc(100% - 2rem);
- &::part(base) {
+ &::part(dialog) {
margin-block: 1rem;
}
+
+ #site-search-container {
+ max-height: none;
+ }
}
}
#site-search-container {
display: flex;
flex-direction: column;
- max-height: calc(100vh - 20rem);
-
- @media screen and (max-width: 900px) {
- max-height: calc(100dvh - 2rem);
- }
+ max-height: calc(100vh - 18rem);
}
/* Header */
-header {
+#site-search-container header {
flex: 0 0 auto;
- align-items: middle;
+ align-items: center;
/* Fixes an iOS Safari 16.4 bug that draws the parent element's border radius incorrectly when showing/hiding results */
border-radius: var(--wa-border-radius-l);
}
diff --git a/docs/assets/styles/theme-icons.css b/docs/assets/styles/theme-icons.css
new file mode 100644
index 000000000..f98c7f053
--- /dev/null
+++ b/docs/assets/styles/theme-icons.css
@@ -0,0 +1,189 @@
+wa-card:has(
+ > .theme-icon-host,
+ > [slot='header'] > .theme-icon-host,
+ > .fonts-icon-host,
+ > [slot='header'] > .fonts-icon-host
+ ) {
+ &::part(header) {
+ /* We want to add a background color, so any spacing needs to go on .theme-icon */
+ flex: 1;
+ padding: 0;
+ min-block-size: 0;
+ }
+
+ [slot='header'] {
+ width: 100%;
+ }
+}
+
+.theme-icon-host,
+.fonts-icon-host,
+.palette-icon-host {
+ flex: 1;
+ border-radius: inherit;
+
+ &[slot='header'],
+ [slot='header']:has(&) {
+ flex: 1;
+ border-radius: inherit;
+ }
+}
+
+.theme-icon:not(.theme-color-icon),
+.palette-icon,
+.icons-icon {
+ min-height: 5.5rem;
+}
+
+.palette-icon {
+ display: grid;
+ grid-template-columns: repeat(var(--hues, 9), 1fr);
+ gap: var(--wa-space-3xs);
+ min-width: 20ch;
+ align-content: center;
+
+ .swatch {
+ height: 0.7em;
+ background: var(--color);
+ border-radius: var(--wa-border-radius-s);
+
+ &[data-suffix=''] {
+ height: 1.1em;
+ }
+ }
+}
+
+.theme-icon,
+.fonts-icon {
+ min-width: 18ch;
+ padding: var(--wa-space-xs) var(--wa-space-m);
+ border-radius: inherit;
+ box-sizing: border-box;
+
+ h2,
+ h3,
+ p {
+ margin-block: 0;
+ padding: 0;
+ }
+}
+
+.theme-color-icon {
+ display: flex;
+ gap: var(--wa-space-xs);
+ min-width: 15ch;
+ background: var(--wa-color-surface-lowered);
+
+ & + & {
+ border-start-start-radius: 0;
+ border-start-end-radius: 0;
+ }
+
+ div {
+ flex: 1;
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ box-sizing: border-box;
+ border-radius: var(--wa-border-radius-m);
+ background-color: var(--background-color);
+ border: var(--wa-border-width-s) var(--wa-border-style) var(--border-color);
+ padding: var(--wa-space-2xs) var(--wa-space-xs);
+ color: var(--text-color);
+ font-weight: var(--wa-font-weight-semibold);
+ }
+}
+
+.theme-icon.theme-overall-icon,
+.fonts-icon {
+ display: flex;
+ flex-flow: column;
+ gap: var(--wa-space-2xs);
+ justify-content: center;
+ width: 100%;
+ min-height: 6.75rem;
+ box-sizing: border-box;
+ background: var(--wa-color-surface-lowered);
+
+ .row {
+ display: flex;
+ gap: var(--wa-space-xs);
+ align-items: center;
+ justify-content: space-between;
+ }
+
+ .row-2 {
+ display: grid;
+ grid-template-columns: 1fr auto;
+ contain: inline-size;
+ width: 100%;
+
+ wa-input {
+ min-width: 1em;
+ }
+ }
+
+ .swatches {
+ display: flex;
+ gap: var(--wa-space-3xs);
+
+ > div {
+ width: 1.25rem;
+ height: 1.25rem;
+ border-radius: var(--wa-border-radius-s);
+ background: var(--wa-color-fill-loud);
+ color: var(--wa-color-on-loud);
+
+ &.wa-brand {
+ width: 2.5rem;
+ }
+ }
+ }
+}
+
+.fonts-icon {
+ font-family: var(--wa-font-family-body);
+ padding-block: var(--wa-space-s);
+ overflow: hidden;
+ position: relative;
+
+ & h2,
+ & p {
+ white-space: nowrap;
+ }
+
+ &::after {
+ content: '';
+ position: absolute;
+ right: 0;
+ width: 50%;
+ height: 100%;
+ background-image: linear-gradient(to left, var(--wa-color-surface-lowered), 20%, transparent);
+ }
+}
+
+.icons-icon {
+ display: grid;
+ grid-template-columns: repeat(var(--columns, 5), auto);
+ gap: var(--wa-space-xs);
+ place-items: center;
+ place-content: center;
+
+ & wa-icon {
+ font-size: 1.25em;
+ }
+}
+
+.page-card {
+ wa-badge {
+ margin-inline: var(--wa-space-3xs);
+ }
+}
+
+:is(.theme-card, .icons-card)::part(header) {
+ background: var(--wa-color-surface-lowered);
+}
+
+.icons-card::part(header) {
+ color: var(--wa-color-neutral-on-quiet);
+}
diff --git a/docs/assets/styles/ui.css b/docs/assets/styles/ui.css
new file mode 100644
index 000000000..9ee09916c
--- /dev/null
+++ b/docs/assets/styles/ui.css
@@ -0,0 +1,145 @@
+/* App UI, for themer, palette tweaking etc */
+
+:root {
+ --fa-sliders-simple: '\f1de';
+}
+
+.title {
+ wa-icon-button {
+ font-size: var(--wa-font-size-l);
+ color: var(--wa-color-text-quiet);
+
+ &:not(:hover, :focus) {
+ opacity: 0.5;
+ }
+ }
+}
+
+.popup {
+ background: var(--wa-color-surface-default);
+ border: 1px solid var(--wa-color-surface-border);
+ padding: var(--wa-space-xl);
+ border-radius: var(--wa-border-radius-m);
+ max-height: 90dvh;
+ overflow: auto;
+
+ code {
+ white-space: nowrap;
+ }
+}
+
+.color-select {
+ &.default::part(display-input) {
+ opacity: 0.6;
+ font-style: italic;
+ }
+
+ > small {
+ margin-inline-start: var(--wa-space-xs);
+ padding-block: 0 var(--wa-space-xs);
+ }
+
+ &::part(combobox)::before,
+ wa-option::before {
+ content: '';
+ display: inline-block;
+ width: 1.2em;
+ aspect-ratio: 1;
+ margin-inline-end: var(--wa-space-xs);
+ flex: none;
+ border-radius: var(--wa-border-radius-m);
+ background: var(--color);
+ border: 1px solid var(--wa-color-surface-default);
+ }
+
+ wa-option {
+ white-space: nowrap;
+
+ &::before {
+ width: 1em;
+ margin-inline: var(--wa-space-xs);
+ }
+
+ &::part(checked-icon) {
+ order: 2;
+ }
+ }
+
+ .default-badge {
+ opacity: 0.6;
+ margin-inline-start: var(--wa-space-xs);
+ }
+}
+
+.swatch-select {
+ padding: 2px;
+
+ wa-radio-button {
+ --swatch-border-color: color-mix(in oklab, canvastext, transparent 80%);
+
+ &::part(base) {
+ /* a
-
+
@@ -186,7 +186,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
Surnia ulula
-
+
@@ -885,4 +885,4 @@ If you don’t want to use [native styles](/docs/native/), you can include this
```html
-```
+```
\ No newline at end of file
diff --git a/docs/docs/components/page/demo-page.css b/docs/docs/components/page/demo-page.css
index 327d5bd38..aa6d2548c 100644
--- a/docs/docs/components/page/demo-page.css
+++ b/docs/docs/components/page/demo-page.css
@@ -52,8 +52,8 @@ wa-page {
}
&[slot^='navigation'] {
- background: var(--wa-color-violet-80);
- color: var(--wa-color-violet-20);
+ background: var(--wa-color-purple-80);
+ color: var(--wa-color-purple-20);
}
strong {
diff --git a/docs/docs/components/popup.md b/docs/docs/components/popup.md
index 8a8fc7b94..f18a7d9f4 100644
--- a/docs/docs/components/popup.md
+++ b/docs/docs/components/popup.md
@@ -54,11 +54,11 @@ Popup is a low-level utility built specifically for positioning elements. Do not
const active = container.querySelector('wa-switch[name="active"]');
const arrow = container.querySelector('wa-switch[name="arrow"]');
- select.addEventListener('wa-change', () => (popup.placement = select.value));
- distance.addEventListener('wa-input', () => (popup.distance = distance.value));
- skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
- active.addEventListener('wa-change', () => (popup.active = active.checked));
- arrow.addEventListener('wa-change', () => (popup.arrow = arrow.checked));
+ select.addEventListener('change', () => (popup.placement = select.value));
+ distance.addEventListener('input', () => (popup.distance = distance.value));
+ skidding.addEventListener('input', () => (popup.skidding = skidding.value));
+ active.addEventListener('change', () => (popup.active = active.checked));
+ arrow.addEventListener('change', () => (popup.arrow = arrow.checked));
-
-
```
### Flip
-When the popup doesn't have enough room in its preferred placement, it can automatically flip to keep it in view. To enable this, use the `flip` attribute. By default, the popup will flip to the opposite placement, but you can configure preferred fallback placements using `flip-fallback-placement` and `flip-fallback-strategy`. Additional options are available to control the flip behavior's boundary and padding.
+When the popup doesn't have enough room in its preferred placement, it can automatically flip to keep it in view and visually connected to its anchor.
+To enable this, use the `flip` attribute. By default, the popup will flip to the opposite placement, but you can configure preferred fallback placements using `flip-fallback-placement` and `flip-fallback-strategy`. Additional options are available to control the flip behavior's boundary and padding.
+
+By default, flip takes effect when the popup would overflow the viewport.
+You can use `boundary="scroll"` to make the popup resize when it overflows its nearest scrollable container instead.
Scroll the container to see how the popup flips to prevent clipping.
```html {.example}
Server
diff --git a/docs/assets/scripts/my.js b/docs/assets/scripts/my.js
new file mode 100644
index 000000000..25793113d
--- /dev/null
+++ b/docs/assets/scripts/my.js
@@ -0,0 +1,172 @@
+const my = (globalThis.my = new EventTarget());
+export default my;
+
+class PersistedArray extends Array {
+ constructor(key) {
+ super();
+ this.key = key;
+
+ if (this.key) {
+ this.fromLocalStorage();
+ }
+
+ // Items were updated in another tab
+ addEventListener('storage', event => {
+ if (event.key === this.key || !event.key) {
+ this.fromLocalStorage();
+ }
+ });
+ }
+
+ /**
+ * Update data from local storage
+ */
+ fromLocalStorage() {
+ // First, empty the array
+ this.splice(0, this.length);
+
+ // Then, fill it with the data from local storage
+ let saved = localStorage[this.key] ? JSON.parse(localStorage[this.key]) : null;
+
+ if (saved) {
+ this.push(...saved);
+ }
+ }
+
+ /**
+ * Write data to local storage
+ */
+ toLocalStorage() {
+ if (this.length > 0) {
+ localStorage[this.key] = JSON.stringify(this);
+ } else {
+ delete localStorage[this.key];
+ }
+ }
+}
+
+class SavedEntities extends EventTarget {
+ constructor({ key, type, url }) {
+ super();
+ this.key = key;
+ this.type = type;
+ this.url = url ?? type + 's';
+ this.saved = new PersistedArray(key);
+
+ let all = this;
+ this.entityPrototype = {
+ type: this.type,
+ baseUrl: this.baseUrl,
+
+ get url() {
+ return all.getURL(this);
+ },
+
+ get parentUrl() {
+ return all.getParentURL(this);
+ },
+
+ delete() {
+ all.delete(this);
+ },
+ };
+ }
+
+ getUid() {
+ if (this.saved.length === 0) {
+ return 1;
+ }
+
+ let uids = new Set(this.saved.map(p => p.uid));
+
+ // Find first available number
+ for (let i = 1; i <= this.saved.length + 1; i++) {
+ if (!uids.has(i)) {
+ return i;
+ }
+ }
+ }
+
+ get baseUrl() {
+ return `/docs/${this.url}/`;
+ }
+
+ getURL(entity) {
+ return this.getParentURL(entity) + entity.search;
+ }
+
+ getParentURL(entity) {
+ return this.baseUrl + entity.id + '/';
+ }
+
+ getObject(entity) {
+ let ret = Object.create(this.entityPrototype, Object.getOwnPropertyDescriptors(entity));
+ // debugger;
+ return ret;
+ }
+
+ /**
+ * Save an entity, either by updating its existing entry or creating a new one
+ * @param {object} entity
+ */
+ save(entity) {
+ if (!entity.uid) {
+ // First time saving
+ entity.uid = this.getUid();
+ }
+
+ let savedPalettes = this.saved;
+ let existingIndex = entity.uid ? this.saved.findIndex(p => p.uid === entity.uid) : -1;
+ let newIndex = existingIndex > -1 ? existingIndex : savedPalettes.length;
+
+ this.saved.splice(newIndex, 1, entity);
+
+ this.saved.toLocalStorage();
+
+ this.dispatchEvent(new CustomEvent('save', { detail: this.getObject(entity) }));
+
+ return entity;
+ }
+
+ delete(entity) {
+ let count = this.saved.length;
+
+ if (count === 0 || !entity?.uid) {
+ // No stored entities or this entity has not been saved
+ return;
+ }
+
+ // TODO improve UX of this
+ if (!confirm(`Are you sure you want to delete ${this.type} “${entity.title}”?`)) {
+ return;
+ }
+
+ for (let index; (index = this.saved.findIndex(p => p.uid === entity.uid)) > -1; ) {
+ this.saved.splice(index, 1);
+ }
+
+ if (this.saved.length === count) {
+ // Nothing was removed
+ return;
+ }
+
+ this.saved.toLocalStorage();
+
+ this.dispatchEvent(new CustomEvent('delete', { detail: this.getObject(entity) }));
+ }
+
+ dispatchEvent(event) {
+ super.dispatchEvent(event);
+ my.dispatchEvent(event);
+ }
+}
+
+my.palettes = new SavedEntities({
+ key: 'savedPalettes',
+ type: 'palette',
+});
+
+my.themes = new SavedEntities({
+ key: 'savedThemes',
+ type: 'theme',
+});
diff --git a/docs/assets/scripts/permalink.js b/docs/assets/scripts/permalink.js
new file mode 100644
index 000000000..07283493b
--- /dev/null
+++ b/docs/assets/scripts/permalink.js
@@ -0,0 +1,157 @@
+import { deepEach, deepGet, deepSet } from './util/deep.js';
+
+export default class Permalink extends URLSearchParams {
+ /** Params changed since last URL I/O */
+ changed = false;
+
+ constructor(params) {
+ super(location.search);
+ this.params = params;
+ }
+
+ toJSON() {
+ return Object.fromEntries(this.entries());
+ }
+
+ /**
+ * Set multiple values from an object. Nested values will be joined with a hyphen.
+ * @param {object} values - The object containing the values to set.
+ * @param {object} defaults - The object containing the default values.
+ *
+ */
+ setAll(values, defaults) {
+ deepEach(values, (value, key, parent, path) => {
+ let fullPath = [...path, key];
+ let param = fullPath.join('-');
+ let defaultValue = deepGet(defaults, fullPath);
+
+ if (typeof value === 'object') {
+ // We'll handle this when we descend into it
+ return;
+ }
+
+ if (!value || value === defaultValue) {
+ // Remove the param from the URL
+ this.delete(param);
+ return;
+ }
+
+ this.set(param, value);
+ });
+ }
+
+ getAll(...args) {
+ if (args.length > 0) {
+ return super.getAll(...args);
+ }
+
+ // Get all values as a nested object
+ // Assumes that hyphens always mean nesting
+ let obj = {};
+
+ for (let [key, value] of this.entries()) {
+ let path = key.split('-');
+ deepSet(obj, path, value);
+ }
+
+ return obj;
+ }
+
+ delete(key, value) {
+ let hadValue = this.has(key);
+ super.delete(key, value);
+
+ if (hadValue) {
+ this.changed = true;
+ }
+ }
+
+ set(key, value, defaultValue) {
+ if (equals(value, defaultValue) || equals(value, '')) {
+ value = null;
+ }
+
+ value ??= null; // undefined -> null
+
+ let oldValue = Array.isArray(value) ? this.getAll(key) : this.get(key);
+ let changed = !equals(value, oldValue);
+
+ if (!changed) {
+ // Nothing to do here
+ return;
+ }
+
+ if (Array.isArray(value)) {
+ super.delete(key);
+ value = value.slice();
+
+ for (let v of value) {
+ if (v || v === 0) {
+ if (typeof v === 'object') {
+ super.append(key, JSON.stringify(v));
+ } else {
+ super.append(key, v);
+ }
+ }
+ }
+ } else if (value === null) {
+ super.delete(key);
+ } else {
+ super.set(key, value);
+ }
+
+ this.sort();
+ this.changed ||= changed;
+ }
+
+ /**
+ * Update page URL if it has changed since last time
+ */
+ updateLocation() {
+ if (this.changed) {
+ // If there’s already a search, replace it.
+ // We don’t want to clog the user’s history while they iterate
+ let search = this.toString();
+ let historyAction = location.search && search ? 'replaceState' : 'pushState';
+ history[historyAction](null, '', `?${search}`);
+ this.changed = false;
+ }
+ }
+}
+
+function equals(value, oldValue) {
+ if (Array.isArray(value) || Array.isArray(oldValue)) {
+ value = toArray(value);
+ oldValue = toArray(oldValue);
+
+ if (value.length !== oldValue.length) {
+ return false;
+ }
+
+ return value.every((v, i) => equals(v, oldValue[i]));
+ }
+
+ // (value ?? oldValue ?? true) returns true if they're both empty (null or undefined)
+ [value, oldValue] = [value, oldValue].map(v => (!v && v !== false && v !== 0 ? null : v));
+ return value === oldValue || String(value) === String(oldValue);
+}
+
+/**
+ * Convert a value to an array. `undefined` and `null` values are converted to an empty array.
+ * @param {*} value - The value to convert.
+ * @returns {any[]} The converted array.
+ */
+function toArray(value) {
+ value ??= [];
+
+ if (Array.isArray(value)) {
+ return value;
+ }
+
+ // Don't convert "foo" into ["f", "o", "o"]
+ if (typeof value !== 'string' && typeof value[Symbol.iterator] === 'function') {
+ return Array.from(value);
+ }
+
+ return [value];
+}
diff --git a/docs/assets/scripts/prism-downloaded.js b/docs/assets/scripts/prism-downloaded.js
new file mode 100644
index 000000000..be9653dd6
--- /dev/null
+++ b/docs/assets/scripts/prism-downloaded.js
@@ -0,0 +1,8 @@
+/* PrismJS 1.29.0
+https://prismjs.com/download.html#themes=prism&languages=markup+css+clike+javascript&plugins=custom-class */
+var _self="undefined"!=typeof window?window:"undefined"!=typeof WorkerGlobalScope&&self instanceof WorkerGlobalScope?self:{},Prism=function(e){var n=/(?:^|\s)lang(?:uage)?-([\w-]+)(?=\s|$)/i,t=0,r={},a={manual:e.Prism&&e.Prism.manual,disableWorkerMessageHandler:e.Prism&&e.Prism.disableWorkerMessageHandler,util:{encode:function e(n){return n instanceof i?new i(n.type,e(n.content),n.alias):Array.isArray(n)?n.map(e):n.replace(/&/g,"&").replace(/=g.reach);A+=w.value.length,w=w.next){var E=w.value;if(n.length>e.length)return;if(!(E instanceof i)){var P,L=1;if(y){if(!(P=l(b,A,e,m))||P.index>=e.length)break;var S=P.index,O=P.index+P[0].length,j=A;for(j+=w.value.length;S>=j;)j+=(w=w.next).value.length;if(A=j-=w.value.length,w.value instanceof i)continue;for(var C=w;C!==n.tail&&(j
-
+
@@ -575,7 +520,7 @@ Scroll the container to see how the popup flips to prevent clipping.
const popup = container.querySelector('wa-popup');
const flip = container.querySelector('wa-switch');
- flip.addEventListener('wa-change', () => (popup.flip = flip.checked));
+ flip.addEventListener('change', () => (popup.flip = flip.checked));
```
@@ -592,7 +537,7 @@ Scroll the container to see how the popup changes it's fallback placement to pre
```html {.example}
-
+
@@ -626,14 +571,18 @@ Scroll the container to see how the popup changes it's fallback placement to pre
### Shift
-When a popup is longer than its anchor, it risks being clipped by an overflowing container. In this case, use the `shift` attribute to shift the popup along its axis and back into view. You can customize the shift behavior using `shiftBoundary` and `shift-padding`.
+When a popup is longer than its anchor, it risks overflowing.
+In this case, use the `shift` attribute to shift the popup along its axis and back into view. You can customize the shift behavior using `shiftBoundary` and `shift-padding`.
+
+By default, auto-size takes effect when the popup would overflow the viewport.
+You can use `boundary="scroll"` to make the popup resize when it overflows its nearest scrollable container instead.
Toggle the switch to see the difference.
```html {.example}
-
+
@@ -670,13 +619,17 @@ Toggle the switch to see the difference.
const popup = container.querySelector('wa-popup');
const shift = container.querySelector('wa-switch');
- shift.addEventListener('wa-change', () => (popup.shift = shift.checked));
+ shift.addEventListener('change', () => (popup.shift = shift.checked));
```
### Auto-size
-Use the `auto-size` attribute to tell the popup to resize when necessary to prevent it from getting clipped. Possible values are `horizontal`, `vertical`, and `both`. You can use `autoSizeBoundary` and `auto-size-padding` to customize the behavior of this option. Auto-size works well with `flip`, but if you're using `auto-size-padding` make sure `flip-padding` is the same value.
+Use the `auto-size` attribute to tell the popup to resize when necessary to prevent it from overflowing.
+Possible values are `horizontal`, `vertical`, and `both`. You can use `autoSizeBoundary` and `auto-size-padding` to customize the behavior of this option. Auto-size works well with `flip`, but if you're using `auto-size-padding` make sure `flip-padding` is the same value.
+
+By default, auto-size takes effect when the popup would overflow the viewport.
+You can use `boundary="scroll"` to make the popup resize when it overflows its nearest scrollable container instead.
When using `auto-size`, one or both of `--auto-size-available-width` and `--auto-size-available-height` will be applied to the host element. These values determine the available space the popover has before clipping will occur. Since they cascade, you can use them to set a max-width/height on your popup's content and easily control its overflow.
@@ -685,7 +638,7 @@ Scroll the container to see the popup resize as its available space changes.
```html {.example}
Default
- Awesome
- Premium
- Playful
- Brutalist
- Tailspin
- Glossy
- Active
+ Awesome
+ Premium
+ Playful
+ Brutalist
+ Tailspin
+ Glossy
+ Active
Classic
@@ -576,10 +576,10 @@ hasOutline: false
+
@@ -803,7 +803,7 @@ hasOutline: false
const queue = [];
let inputTimeout;
- variantInput.addEventListener('wa-change', () => {
+ variantInput.addEventListener('change', () => {
iconList.dataset.variant = variantInput.value;
});
@@ -823,7 +823,7 @@ hasOutline: false
});
// Filter as the user types
- input.addEventListener('wa-input', () => {
+ input.addEventListener('input', () => {
clearTimeout(inputTimeout);
inputTimeout = setTimeout(() => {
[...iconList.children].map(item => {
@@ -1084,10 +1084,10 @@ hasOutline: false
el.classList.add(`wa-theme-${theme}-${colorMode}`);
}
- colorModeSelect.addEventListener('wa-change', setColorMode);
+ colorModeSelect.addEventListener('change', setColorMode);
// Theme Switcher
- themeSelect.addEventListener('wa-change', event => {
+ themeSelect.addEventListener('change', event => {
const theme = event.target.value
const newStylesheet = Object.assign(document.createElement("link"), {
// This media: "print" allows us to lazy load the stylesheet then hot swap it on load.
@@ -1132,14 +1132,14 @@ hasOutline: false
});
// Color Palette
- colorSelect.addEventListener('wa-change', event => {
+ colorSelect.addEventListener('change', event => {
const colorPalette = event.target.value;
colorStylesheet.href = `/dist/styles/themes/color/${colorPalette}.css`;
});
// Brand Color
- brandColor.addEventListener('wa-change', event => {
+ brandColor.addEventListener('change', event => {
const documentStyles = document.documentElement.style
documentStyles.setProperty('--wa-color-primary-95', `var(--wa-color-${event.target.value}-95)`);
documentStyles.setProperty('--wa-color-primary-90', `var(--wa-color-${event.target.value}-90)`);
@@ -1223,7 +1223,7 @@ hasOutline: false
})
// Pre-generated logos
- logoSelector.addEventListener('wa-change', event => {
+ logoSelector.addEventListener('change', event => {
const value = event.currentTarget.value
const projectLogo = previewContainer.querySelector("#project-logo");
@@ -1279,21 +1279,21 @@ hasOutline: false
})
}
- themeSelect.addEventListener('wa-change', setLogoIcons);
+ themeSelect.addEventListener('change', setLogoIcons);
// Project Name
- container.querySelector('[name="project-name"]').addEventListener('wa-input', event => {
+ container.querySelector('[name="project-name"]').addEventListener('input', event => {
previewContainer.querySelector("#project-name").innerText = event.target.value || event.target.getAttribute("placeholder")
})
// Heading font weight
resetHeadingFontWeightValue()
- fontWeightHeading.addEventListener('wa-input', event => {
+ fontWeightHeading.addEventListener('input', event => {
document.documentElement.style.setProperty('--wa-font-weight-heading', event.target.value);
});
// Heading text
- fontFamilyHeading.addEventListener('wa-change', event => {
+ fontFamilyHeading.addEventListener('change', event => {
let fontFamily;
switch (event.target.value) {
case 'assistant':
@@ -1351,7 +1351,7 @@ hasOutline: false
})
// Body text
- fontFamilyBody.addEventListener('wa-change', event => {
+ fontFamilyBody.addEventListener('change', event => {
let fontFamily;
switch (event.target.value) {
case 'assistant':
@@ -1404,7 +1404,7 @@ hasOutline: false
// Body font weight
resetBodyFontWeightValue()
- fontWeightBody.addEventListener('wa-input', event => {
+ fontWeightBody.addEventListener('input', event => {
document.documentElement.style.setProperty('--wa-font-weight-body', event.target.value);
});
@@ -1580,7 +1580,7 @@ hasOutline: false
}
// Swaps icons to the preferred set for the selected theme
- themeSelect.addEventListener('wa-change', event => {
+ themeSelect.addEventListener('change', event => {
setPreferredIcons();
showIconStyleOptions();
syncLogoIcon();
@@ -1599,32 +1599,32 @@ hasOutline: false
});
// Changes available Icon Styles and swaps icons based on the selected Icon Family
- iconFamily.addEventListener('wa-change', event => {
+ iconFamily.addEventListener('change', event => {
useFaIcons();
showIconStyleOptions();
});
// Swaps icons based on the selected Icon Style
- iconStyle.addEventListener('wa-change', useFaIcons);
+ iconStyle.addEventListener('change', useFaIcons);
// Corners
- container.querySelector('[name="corners"]').addEventListener('wa-input', event => {
+ container.querySelector('[name="corners"]').addEventListener('input', event => {
document.documentElement.style.setProperty('--wa-border-radius-scale', `${event.target.value}`);
});
// Border width
- container.querySelector('[name="border-width"]').addEventListener('wa-input', event => {
+ container.querySelector('[name="border-width"]').addEventListener('input', event => {
document.documentElement.style.setProperty('--wa-border-width-scale', `${event.target.value / 16}`);
});
// Border style
- borderStyle.addEventListener('wa-input', event => {
+ borderStyle.addEventListener('input', event => {
document.documentElement.style.setProperty('--wa-border-style', event.target.value);
});
// Spacing style
- spacing.addEventListener('wa-input', event => {
+ spacing.addEventListener('input', event => {
document.documentElement.style.setProperty('--wa-space-scale', `${event.target.value}`);
});
@@ -2139,7 +2139,7 @@ hasOutline: false
-
+
-
+
@@ -731,7 +684,7 @@ Scroll the container to see the popup resize as its available space changes.
const popup = container.querySelector('wa-popup');
const autoSize = container.querySelector('wa-switch');
- autoSize.addEventListener('wa-change', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
+ autoSize.addEventListener('change', () => (popup.autoSize = autoSize.checked ? 'both' : ''));
```
@@ -782,9 +735,9 @@ When a gap exists between the anchor and the popup element, this option will add
const hoverBridge = container.querySelector('wa-switch');
const distance = container.querySelector('wa-slider[label="Distance"]');
const skidding = container.querySelector('wa-slider[label="Skidding"]');
- distance.addEventListener('wa-input', () => (popup.distance = distance.value));
- skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
- hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
+ distance.addEventListener('input', () => (popup.distance = distance.value));
+ skidding.addEventListener('input', () => (popup.skidding = skidding.value));
+ hoverBridge.addEventListener('change', () => (popup.hoverBridge = hoverBridge.checked));
```
@@ -837,7 +790,7 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
};
// Only activate the popup when the switch is checked
- enabled.addEventListener('wa-change', () => {
+ enabled.addEventListener('change', () => {
popup.active = enabled.checked;
});
diff --git a/docs/docs/components/qr-code.md b/docs/docs/components/qr-code.md
index 24a058f86..62832144e 100644
--- a/docs/docs/components/qr-code.md
+++ b/docs/docs/components/qr-code.md
@@ -24,7 +24,7 @@ QR codes are useful for providing small pieces of information to users who can q
customElements.whenDefined('wa-qr-code').then(() => {
input.value = qrCode.value;
- input.addEventListener('wa-input', () => (qrCode.value = input.value));
+ input.addEventListener('input', () => (qrCode.value = input.value));
});
diff --git a/docs/docs/components/radio-button.md b/docs/docs/components/radio-button.md
index 7a38d07d6..850412018 100644
--- a/docs/docs/components/radio-button.md
+++ b/docs/docs/components/radio-button.md
@@ -9,7 +9,7 @@ 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
@@ -23,7 +23,7 @@ Radio buttons are designed to be used with [radio groups](/docs/components/radio
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
@@ -35,7 +35,7 @@ To set the initial value and checked state, use the `value` attribute on the con
Use the `disabled` attribute to disable a radio button.
```html {.example}
-
+
Option 1
Option 2
Option 3
@@ -47,7 +47,7 @@ Use the `disabled` attribute to disable a radio button.
Use the `size` attribute to change a radio button's size.
```html {.example}
-
+
Option 1
Option 2
Option 3
@@ -55,7 +55,7 @@ Use the `size` attribute to change a radio button's size.
-
+
Option 1
Option 2
Option 3
@@ -63,7 +63,7 @@ Use the `size` attribute to change a radio button's size.
-
+
Option 1
Option 2
Option 3
@@ -75,7 +75,7 @@ Use the `size` attribute to change a radio button's size.
Use the `pill` attribute to give radio buttons rounded edges.
```html {.example}
-
+
Option 1
Option 2
Option 3
@@ -83,7 +83,7 @@ Use the `pill` attribute to give radio buttons rounded edges.
-
+
Option 1
Option 2
Option 3
@@ -91,7 +91,7 @@ Use the `pill` attribute to give radio buttons rounded edges.
-
+
Option 1
Option 2
Option 3
@@ -103,7 +103,7 @@ Use the `pill` attribute to give radio buttons rounded edges.
Use the `prefix` and `suffix` slots to add icons.
```html {.example}
-
+
+
diff --git a/docs/docs/components/radio-group.md b/docs/docs/components/radio-group.md
index 11714c3be..935e26071 100644
--- a/docs/docs/components/radio-group.md
+++ b/docs/docs/components/radio-group.md
@@ -32,7 +32,28 @@ Add descriptive hint to a radio group with the `hint` attribute. For hints that
[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.
```html {.example}
-
+
+ Option 1
+ Option 2
+ Option 3
+
+
+
+ +
Option 1
Option 2
Option 3
@@ -51,28 +72,39 @@ Radios and radio buttons can be disabled by adding the `disabled` attribute to t
```
+### Orientation
+
+The default orientation for radio items is `vertical`. Set the `orientation` to `horizontal` to items on the same row.
+
+```html {.example}
+
+ Option 1
+ Option 2
+ Option 3
+
+```
+
### Sizing Options
-The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-buttons) will be determined by the Radio Group's `size` attribute.
+The size of [Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) will be determined by the Radio Group's `size` attribute.
-```html preview
-
+```html {.example}
+
Small
Medium
Large
-
-
```
:::info
-[Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) also have a `size` attribute. This can be useful in certain compositions, but it will be ignored when used inside of a Radio Group.
+[Radios](/docs/components/radio) and [Radio Buttons](/docs/components/radio-button) also have a `size` attribute,
+which will override the inherited size when used.
:::
### Validation
@@ -127,7 +159,7 @@ Use the `setCustomValidity()` method to set a custom validation message. This wi
});
// Update validity when a selection is made
- form.addEventListener('wa-change', () => {
+ form.addEventListener('change', () => {
const isValid = radioGroup.value === '3';
radioGroup.setCustomValidity(isValid ? '' : errorMessage);
});
diff --git a/docs/docs/components/radio.md b/docs/docs/components/radio.md
index b83d27238..8453f1e7c 100644
--- a/docs/docs/components/radio.md
+++ b/docs/docs/components/radio.md
@@ -11,8 +11,8 @@ Radios are designed to be used with [radio groups](/docs/components/radio-group)
```html {.example}
- Option 1
-Option 2
+Option 1
+ Option 2
Option 3
```
@@ -29,8 +29,8 @@ To set the initial value and checked state, use the `value` attribute on the con
```html {.example}
- Option 1
-Option 2
+Option 1
+ Option 2
Option 3
```
@@ -41,8 +41,8 @@ Use the `disabled` attribute to disable a radio.
```html {.example}
- Option 1
-Option 2
+Option 1
+ Option 2
Option 3
```
@@ -53,24 +53,36 @@ Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to c
```html {.example}
- Small 1
-Small 2
+Small 1
+ Small 2
Small 3
- Medium 1
-Medium 2
+Medium 1
+ Medium 2
Medium 3
- Large 1
-Large 2
+Large 1
+ Large 2
Large 3
```
+
+### Hint
+
+Add descriptive hint to a switch with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
+
+```html {.example}
+
+ Option 1
+ Option 2
+ Option 3
+
+```
diff --git a/docs/docs/components/rating.md b/docs/docs/components/rating.md
index 41cb938d6..682fc1b4c 100644
--- a/docs/docs/components/rating.md
+++ b/docs/docs/components/rating.md
@@ -35,12 +35,20 @@ Use the `precision` attribute to let users select fractional ratings.
+
+
+
+
+
+
+
+```
+
+## Examples
+
+### Adding Content
+
+The scroller component automatically provides a scrollable container for any content that exceeds the available space. Simply add your content as children of the `` element, and it will handle the rest.
+
+```html {.example}
+
+
+```
+
+### Orientation
+
+Set the `orientation` attribute to `vertical` and provide a height to create a vertical scroller.
+
+```html {.example}
+
+
+```
+
+### Without a Shadow
+
+Use the `without-shadow` attribute to remove the fading shadow effect at the edges of the scroller, which typically indicates more content is available.
+
+```html {.example}
+
+
+```
+
+### Without a Scrollbar
+
+Use the `without-scrollbar` attribute to hide the scrollbar while maintaining scroll functionality. This creates a cleaner visual appearance but may reduce usability on content that needs a clear scrolling indicator.
+
+```html {.example}
+
+
+```
+
+:::warning
+Hiding scrollbars can negatively impact accessibility. Users who rely on visible scrollbars to navigate content may have difficulty recognizing that content is scrollable or controlling their scrolling position. Consider the needs of all users when implementing this option.
+:::
\ No newline at end of file
diff --git a/docs/docs/components/select.md b/docs/docs/components/select.md
index 5f8420c3b..0f7b0a560 100644
--- a/docs/docs/components/select.md
+++ b/docs/docs/components/select.md
@@ -130,6 +130,15 @@ Note that multi-select options may wrap, causing the control to expand verticall
Use the `value` attribute to set the initial selection.
+```html {.example}
+
+ Option 1
+ Option 2
+ Option 3
+ Option 4
+
+```
+
When using `multiple`, the `value` _attribute_ uses space-delimited values to select more than one option. Because of this, `` values cannot contain spaces. If you're accessing the `value` _property_ through Javascript, it will be an array.
```html {.example}
@@ -294,7 +303,7 @@ Remember that custom tags are rendered in a shadow root. To style them, you can
return `
`;
};
@@ -416,11 +425,3 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
```
-
diff --git a/docs/docs/components/skeleton.md b/docs/docs/components/skeleton.md
index 993e2706a..cbb5176c9 100644
--- a/docs/docs/components/skeleton.md
+++ b/docs/docs/components/skeleton.md
@@ -129,7 +129,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
-```
diff --git a/docs/docs/components/tree.md b/docs/docs/components/tree.md
index 79301e06b..792e0dfd6 100644
--- a/docs/docs/components/tree.md
+++ b/docs/docs/components/tree.md
@@ -88,7 +88,7 @@ The `selection` attribute lets you change the selection behavior of the tree.
const selectionMode = document.querySelector('#selection-mode');
const tree = document.querySelector('.tree-selectable');
- selectionMode.addEventListener('wa-change', () => {
+ selectionMode.addEventListener('change', () => {
tree.querySelectorAll('wa-tree-item').forEach(item => (item.selected = false));
tree.selection = selectionMode.value;
});
diff --git a/docs/docs/components/viewport-demo.md b/docs/docs/components/viewport-demo.md
index bbe013f88..9d652e554 100644
--- a/docs/docs/components/viewport-demo.md
+++ b/docs/docs/components/viewport-demo.md
@@ -2,7 +2,8 @@
title: Viewport Demo
description: Viewport demos can be used to display an iframe as a resizable, zoomable preview.
tags: component
-noAlpha: true
+isPro: true
+unpublished: true
---
```html {.example}
@@ -67,4 +68,4 @@ It goes without saying that this list is a rough plan and subject to change.
- Non-linear zoom scale
- Extend to general content, not just iframes
- Styles for mobile and tablet frames and an attribute to switch between them
-- Automatic iframe height
+- Automatic iframe height
\ No newline at end of file
diff --git a/docs/docs/customizing.md b/docs/docs/customizing.md
index 90fcbe211..88f20a6a2 100644
--- a/docs/docs/customizing.md
+++ b/docs/docs/customizing.md
@@ -1,41 +1,49 @@
---
title: Customizing
-description: Learn how to customize Web Awesome through parts and custom properties.
+description: Learn how to customize Web Awesome through themes, parts, and custom properties.
layout: page-outline
---
-Web Awesome components can be customized at a high level through a theming API. This gives you control over theme colors and general styling. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
+You can customize the look and feel of Web Awesome at a high level with themes. For more advanced customizations, you can make use of CSS parts and custom properties to target individual components.
## Themes
-Web Awesome uses numerous CSS custom properties that make up a high-level theming API and provide a consistent look and feel across the entire library. You can customize them and use them in your own application just with CSS — no preprocessor required.
+Web Awesome uses [themes](/docs/themes) to apply a cohesive look and feel across the entire library. Themes are built with a collection of predefined CSS custom properties, which we call [design tokens](/docs/tokens), and there are many premade themes you can choose from.
-Because these custom properties live at the page level, they're prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties.
+To use a theme, simply add a link to the theme's stylesheet to the `` of your page. For example, you can replace the link to `default.css` in the [installation code](/docs/#quick-start-autoloading-via-cdn) with this snippet to use the *Awesome* theme:
-To customize a theme, simply override any of these custom properties in your own stylesheet by scoping your styles to `:root`, `:host`, and, if needed, the class for the specific theme you want to override. Here's an example that changes the default brand color (blue) to violet in the light theme using existing [literal colors](/docs/tokens/color/#literal-colors).
+```html
+
+```
+
+You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to purple in light mode:
```css
:where(:root),
:host,
-.wa-theme-default {
- /* Changes the brand color to violet across the library */
- --wa-color-brand-fill-quiet: var(--wa-color-violet-95);
- --wa-color-brand-fill-normal: var(--wa-color-violet-90);
- --wa-color-brand-fill-loud: var(--wa-color-violet-50);
- --wa-color-brand-border-quiet: var(--wa-color-violet-90);
- --wa-color-brand-border-normal: var(--wa-color-violet-80);
- --wa-color-brand-border-loud: var(--wa-color-violet-60);
- --wa-color-brand-on-quiet: var(--wa-color-violet-40);
- --wa-color-brand-on-normal: var(--wa-color-violet-30);
+.wa-light,
+.wa-dark .wa-invert {
+ --wa-color-brand-fill-quiet: var(--wa-color-purple-95);
+ --wa-color-brand-fill-normal: var(--wa-color-purple-90);
+ --wa-color-brand-fill-loud: var(--wa-color-purple-50);
+ --wa-color-brand-border-quiet: var(--wa-color-purple-90);
+ --wa-color-brand-border-normal: var(--wa-color-purple-80);
+ --wa-color-brand-border-loud: var(--wa-color-purple-60);
+ --wa-color-brand-on-quiet: var(--wa-color-purple-40);
+ --wa-color-brand-on-normal: var(--wa-color-purple-30);
--wa-color-brand-on-loud: white;
}
```
-For more examples and further guidance, refer to [Themes](/docs/themes) and the Theming section of this documentation. For a complete list of all custom properties used for theming, refer to `src/styles/themes/default.css` in the project's source code.
+:::info
+Wrapping the `:root` selector in `:where()` gives this selector 0 specificity. This allows us to define our design tokens' default values while ensuring they can be cleanly overridden as needed.
+:::
+
+For a complete list of all custom properties used for theming, refer to `src/styles/themes/default.css` in the project's source code.
## Components
-Whereas a theme offers a high-level way to customize the library, components offer different hooks as a low-level way to customize them individually.
+While themes offer a high-level way to customize the library, components offer different hooks as a low-level way to customize them individually.
Web Awesome components use a [shadow DOM](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_shadow_DOM) to encapsulate their styles and behaviors. As a result, you can't simply target their internals with the usual CSS selectors. Instead, components expose a set of custom properties and CSS parts that can be targeted to customize their appearance.
@@ -91,8 +99,8 @@ Parts allow you to style *any* standard CSS property, not just those exposed thr
+```
+
+Or, if using CSS parts, we can give both checkboxes the same custom styles using standard CSS properties:
+```html {.example}
+Web Awesome checkbox
+
+ + + +``` + + +## Style Utilities + +Similarly, if you're using [style utilities](/docs/utilities), any custom styles added for a specific attribute variation of a component — such as `appearance`, `variant`, or `size` — should also target the corresponding style utility class. This ensures that the attribute and its utility class counterpart work interchangeably. + +For example, we can give all outlined callouts a thick left border, regardless of whether they are styled with `appearance="outlined"` or `class="wa-outlined"`: +```html {.example} +
+
+
+
+
+
+```
\ No newline at end of file
diff --git a/docs/docs/docs.11tydata.js b/docs/docs/docs.11tydata.js
index 7ed1011e1..38a4c3554 100644
--- a/docs/docs/docs.11tydata.js
+++ b/docs/docs/docs.11tydata.js
@@ -1,10 +1,108 @@
+/**
+ * Global data for all pages
+ */
+import { sort } from '../_utils/filters.js';
+
export default {
eleventyComputed: {
- children(data) {
- let mainTag = data.tags?.[0];
- let collection = data.collections[mainTag] ?? [];
+ /**
+ * Default parent slug. Can be overridden by explicitly setting parent in the data.
+ * It can be either the URL slug of a page in the same directory or a parent directory.
+ * @returns {string | undefined}
+ */
+ parent(data) {
+ let { parent, page } = data;
- return collection.filter(item => item.data.parent === data.page.fileSlug);
+ if (parent) {
+ return parent;
+ }
+
+ return page.url.split('/').filter(Boolean).at(-2);
+ },
+
+ /**
+ * URL of parent page
+ * @returns {string | undefined}
+ */
+ parentUrl(data) {
+ let { parent, page } = data;
+ return getParentUrl(page.url, parent);
+ },
+
+ /**
+ * Collection item of parent page
+ * @returns {object | undefined} Parent page item
+ */
+ parentItem(data) {
+ let { parentUrl } = data;
+ return data.collections.all.find(item => item.url === parentUrl);
+ },
+
+ /**
+ * Child pages of current page
+ * @returns {object[]} Array of child pages
+ */
+ children(data) {
+ let { collections, page, parentOf } = data;
+
+ if (parentOf) {
+ return collections[parentOf];
+ }
+
+ let collection = collections.all ?? [];
+ let url = page.url;
+
+ let ret = collection.filter(item => {
+ return item.data.parentUrl === url;
+ });
+
+ sort(ret);
+
+ return ret;
},
},
};
+
+/**
+ * Resolve a parent slug against a page URL
+ * @param {string} url - The URL of the page
+ * @param {string} parent - The slug of the parent page
+ * @returns {string} The resolved URL of the parent page
+ */
+function getParentUrl(url, parent) {
+ if (!parent) {
+ return undefined;
+ }
+
+ let parts = url.split('/').filter(Boolean);
+ let ancestorIndex = parts.findLastIndex(part => part === parent);
+ let retParts = parts.slice();
+
+ if (ancestorIndex > -1) {
+ // parent is an ancestor
+ retParts.splice(ancestorIndex + 1);
+ } else {
+ // parent is a sibling in the same directory
+ retParts.splice(-1, 1, parent);
+ }
+
+ let ret = retParts.join('/');
+
+ if (url.startsWith('/')) {
+ // If the current page starts with a slash, make sure the parent does too
+ // This is pretty much always the case with 11ty page URLs
+ ret = '/' + ret;
+ }
+
+ if (!retParts.at(-1)?.includes('.') && !ret.endsWith('/')) {
+ // If no extension, make sure to end with a slash
+ ret += '/';
+ }
+
+ if (ret === '/docs/') {
+ // We don't want anyone's parent to be "Installation"!
+ ret = '/';
+ }
+
+ return ret;
+}
diff --git a/docs/docs/experimental/clamped-colors.njk b/docs/docs/experimental/clamped-colors.njk
new file mode 100644
index 000000000..27797832d
--- /dev/null
+++ b/docs/docs/experimental/clamped-colors.njk
@@ -0,0 +1,44 @@
+---
+title: Clamped Color Tokens
+layout: block
+---
+
+{% set tints = ['max-50', 'max-60', 'max-70', 'min-50', 'min-60', 'min-70'] %}
+{% set hues = ['red', 'orange', 'yellow', 'green', 'cyan', 'blue', 'indigo', 'purple', 'pink', 'gray'] %}
+
+
+
+
+
+
\ No newline at end of file
diff --git a/docs/docs/experimental/inherit.md b/docs/docs/experimental/inherit.md
new file mode 100644
index 000000000..88d5788d0
--- /dev/null
+++ b/docs/docs/experimental/inherit.md
@@ -0,0 +1,84 @@
+---
+title: Inheritance & Default value tests
+wide: true
+---
+
+## Variant
+
+{%- set variantDefaults = {
+ button: 'neutral',
+ tag: 'neutral',
+ badge: 'brand',
+ callout: 'brand'
+} %}
+{%- set variants = ['', 'neutral', 'brand'] %}
+
+### Defaults
+
+```html {.example}
+
+
+
+```
+
+### Nested elements
+
+{% set containers = [
+ {parent: 'callout', child: 'button'},
+ {parent: 'callout', child: 'callout'},
+ {parent: 'button', child: 'badge'}
+] %}
+
+{% for container in containers %}
+{% set parent = container.parent %}
+{% set child = container.child %}
+
+#### {{ child | capitalize }} in {{ parent | capitalize }}
+
+```html {.example}
+
+
+
+```
+{% endfor %}
diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md
deleted file mode 100644
index 39617cfc5..000000000
--- a/docs/docs/experimental/sandbox.md
+++ /dev/null
@@ -1,352 +0,0 @@
----
-title: Theming Sandbox
-description: TODO
-layout: page-outline
----
-
-## Card
-
-```html {.example}
-
- 
-
- Mittens
- This kitten is as cute as he is playful. Bring him home today!
- 6 weeks old - -
-
-
-```
-
-## Alerts
-
-```html {.example}
-
-
- You can tell by how pretty the alert is. -
-
-
-
- You can safely exit the app now. -
-
-
-
- Settings will take affect on next login. -
-
-
-
- Please login again to continue. -
-
-
-
- We're very sorry to see you go! -
-```
-
-## Badges and Tags
-
-```html {.example}
-Brand
-Success
-Neutral
-Warning
-Danger
-
-Brand
-Success
-Neutral
-Warning
-Danger
-```
-
-## Buttons
-
-```html {.example}
-Brand
-Success
-Neutral
-Warning
-Danger
-
-Brand
-Success
-Neutral
-Warning
-Danger
-
-Text
-
-
- Option 1
- Option 2
- Option 3
-
-```
-
-## Form controls
-
-```html {.example}
-Unchecked
-
-Checked
-
-
- Option 1
- Option 2
- Option 3
-
-
-Switch off
-
-Switch on
-
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
- Option 5
- Option 6
-
-```
-
-## Progress
-
-```html {.example}
-Small
+Medium
+Medium
+Large
+```
+
+If no button size is specified, it should default to that of its ancestor:
+
+```html {.example}
+
+ Small 1
+ Small 2
+ Small 3
+
+
+
+ Medium 1
+ Medium 2
+ Medium 3
+
+
+
+ Large 1
+ Large 2
+ Large 3
+
+```
+
+Dropdown:
+
+```html {.example}
+
-
-
-
-
+ +
-
+
-
+
-
+
-
+
-
+
-
+
+
+
| Party Role | +Combat Style | +Group Size | +Campaign Setting | +Signature Traits | +
|---|---|---|---|---|
| Warrior | +Melee Tank | +1-2 | +Forgotten Realms | +Plate-armored swordmaster who taunts foes. | +
| Rogue | +Stealth Striker | +1 | +Eberron | +Shadowy lockpick with daggers and a secret gold stash. | +
| Wizard | +Spell Slinger | +1 | +Greyhawk | +Robe-clad mage hurling fireballs from a messy spellbook. | +
| Cleric | +Divine Support | +1 | +Ravnica | +Holy healer with a glowing amulet and sneaky ale habit. | +
| Bard | +Charisma King | +1 | +Dragonlance | +Lute-playing charmer with magical songs and bad puns. | +
+
+Superhero Team Roles Guide
+
+
+
+
+ Team Leaders
+Charismatic captains like Captain America or Cyclops are the heart of any superteam, rallying everyone with epic speeches and killer strategies. They’re the ones calling the shots in a cosmic showdown, keeping the squad focused when Thanos or Magneto crashes the party.
+
+
+ Heavy Hitters
+Powerhouses like Thor or Hulk bring the boom, smashing through villain lairs or alien armadas. Their job is to land the big punches, but they gotta pace themselves to avoid stealing the spotlight from sneakier teammates.
+
+
+ Tech Geniuses
+Brainiacs like Iron Man or Mr. Fantastic keep the team one step ahead with gadgets and gizmos. They’re crafting quinjets or hacking evil AI, always ready with a snarky quip while saving the day from a computer terminal.
+
+
+ Stealth Specialists
+Ninja-like heroes like Black Widow or Nightcrawler slip through the shadows, gathering intel or pulling off surprise attacks. They’re the glue that makes risky plans work, coordinating with the team to flip a losing fight into a win.
+Superhero movies are the ultimate popcorn-fueled thrill rides, turning comic book pages into cinematic rollercoasters. Back in the early 2000s, films like X-Men and Spider-Man kicked open the door, proving tights and teamwork could pack theaters. Those early flicks leaned on practical effects and heart—like Tobey Maguire’s earnest web-slinger saving a train—making us believe a guy in spandex could be a hero. They weren’t perfect, but they set the stage for the genre to become a cultural juggernaut.
+By the 2010s, the Marvel Cinematic Universe turned superhero films into a shared saga, like a comic crossover event on steroids. The Avengers in 2012 was a game-changer, tossing Iron Man’s snark, Thor’s hammer, and Cap’s shield into one epic brawl. Directors learned to balance humor, heart, and explosions, while studios figured out how to make every movie feel like a chapter in a bigger story. Even standalone hits like Wonder Woman brought fresh vibes, with Gal Gadot’s lasso-wielding warrior stealing hearts and smashing box office records.
+Today, superhero flicks are a global obsession, from Deadpool’s chimichanga-fueled chaos to Black Panther’s Wakandan pride. They’re not just about powers—they’re about characters we root for, like Rocket Raccoon’s scrappy loyalty or Harley Quinn’s wild energy. Fans dissect trailers like detectives, theorizing about multiverses and cameos, while memes of sad Affleck or dancing Groot flood the internet. Whether it’s a gritty Joker origin or a cosmic Guardians adventure, these movies keep us glued to our seats, dreaming of heroism and one-liners that’d make even Tony Stark jealous.
+
+
+Gaming consoles are like time machines for nerds, zapping us from pixelated 2D adventures to jaw-dropping cinematic worlds. Back in the ‘90s, the Super Nintendo was the cool kid on the block, using a 16-bit chip to pull off tricks like Mode 7, which made Mario Kart’s tracks feel like they were zooming right at you. It was like wizardry for a kid with a chunky controller, turning flat sprites into pseudo-3D races that had us yelling at our TVs when we got hit by a red shell.
+Fast-forward to today, and consoles like the PlayStation 5 and Xbox Series X are basically supercomputers in sleek boxes. They’re packing enough power to make games look like Hollywood blockbusters, with lighting so real you can practically feel the sun glare in Spider-Man: Miles Morales. These machines can handle massive open worlds, like the sprawling lands of Elden Ring, without breaking a sweat, letting you swing swords or race cars while your living room feels like a sci-fi movie set. It’s a far cry from the SNES days, but the vibe’s the same: pure, controller-gripping fun.
+What makes consoles the heart of gaming culture is how they bring everyone together, from casual players to hardcore speedrunners. Whether it’s your uncle fumbling through Super Mario World in ‘92 or your best friend screaming during a late-night Call of Duty match, consoles are the ultimate couch co-op machines. Modern systems even let you stream your clutch Fortnite wins to the world or jump into crossplay with PC pals. From the GameCube’s quirky handle to the Switch’s grab-and-go joy-cons, every console’s got its own personality, making every era of gaming feel like a legendary chapter in a never-ending quest.
+
+
+Dungeons & Dragons 5e is the blockbuster superhero flick of tabletop RPGs, turning every session into an epic tavern brawl or dragon-slaying saga. Unlike the old 3.5e days, where you’d stack +30 bonuses like a mathlete on a mission, 5e keeps things chill with skill checks capping around +11—like a +5 from your slick Charisma and +6 from being a pro at persuasion. This means even a squad of scrappy kobolds can give your level 10 barbarian a bad day if you roll poorly. It’s like the game’s saying, “Sure, you’re a hero, but don’t get cocky!”
+The advantage and disadvantage system is 5e’s secret sauce, making every dice roll feel like a movie cliffhanger. Instead of juggling a dozen modifiers, you just roll two d20s and take the better (or worse) one, which shakes out to about a +5 or -5 vibe shift. It’s like your rogue’s got a lucky charm when sneaking past guards or a cursed boot when dodging a fireball. This keeps the game’s flow snappy, so you’re not stuck crunching numbers when you could be roleplaying a dramatic speech to charm a dragon or bluffing your way out of a bandit ambush.
+5e’s world is built for storytelling, not just stat sheets, and that’s why it’s the king of game nights. The rules are flexible enough for your DM to whip up a haunted forest crawl or a pirate ship heist without needing a PhD in game design. Classes like the warlock let you make shady pacts with cosmic entities, while feats like Tavern Brawler turn your monk into a bar-fighting legend who can knock out goblins with a chair. Whether you’re a newbie rolling your first d20 or a veteran plotting a castle siege, 5e’s vibe is all about epic moments—like when your party’s wizard crits on a fireball and you all cheer like you just won the Super Bowl.
++ + + +``` + + +## Style Utilities + +Similarly, if you're using [style utilities](/docs/utilities), any custom styles added for a specific attribute variation of a component — such as `appearance`, `variant`, or `size` — should also target the corresponding style utility class. This ensures that the attribute and its utility class counterpart work interchangeably. + +For example, we can give all outlined callouts a thick left border, regardless of whether they are styled with `appearance="outlined"` or `class="wa-outlined"`: +```html {.example} +
appearance="outlined"
+class="wa-outlined"
+| + | Core tint | + {% for tint in tints -%} +{{ tint }} | + {%- endfor %} +
|---|---|---|
| {{ hue | capitalize }} | +
+
+ {{ palettes[paletteId][hue].maxChromaTint }}
+
+ |
+ {% for tint in tints -%}
+
+
+
+ |
+ {%- endfor -%}
+
| Element | +Default | +Neutral | +Brand | +
|---|---|---|---|
| {{ element | capitalize }} | +
| 👇 Parent / Child 👉 | + {% else %} +👇 {{ parent | capitalize }} / {{ child | capitalize }} 👉 | + {%- endif %} +Default | +Neutral | +Brand | +
|---|---|---|---|---|
| {{ parentVariant | capitalize or 'Default' }} | + {% for childVariant in variants -%} + {% set childContent = (childVariant or parentVariant or variantDefaults[child]) | capitalize %} + {% set childContent = childContent[0] if child == 'badge' else childContent %} +
-
- Mittens- This kitten is as cute as he is playful. Bring him home today!
- 6 weeks old - -
- More Info
-
-- You can tell by how pretty the alert is. -
-
- You can safely exit the app now. -
-
- Settings will take affect on next login. -
-
- Please login again to continue. -
-
- We're very sorry to see you go! -
-
-
-
-
-
-
-
-
-
-
-
-
-```
-
-## Custom Property Tests
-
-```html {.example}
-
-
- OCBS
- OCBS
- OCBS
-
-
- OCBS
- OCBS
- OCBS
-
-
- OCBS
- OCBS
- OCBS
-
-
-
- OCBS
-
- OCBS
-
-
-
- OCBS
-
- OCBS
-
-
-
- OCBS
-
- OCBS
-
-
- OCBS
-
-
-
- OCBS
-
-
-
-
- WA Checkbox
-
-
- WA Checkbox
-
-
- WA Radio
-
-
- WA Radio
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
-
-
-
-```
-
-## Text Controls Tests
-
-```html {.example}
-
-
-
- Option 1
- Option 2
- Option 3
- Option 4
-
-
-
-
-```
\ No newline at end of file
diff --git a/docs/docs/experimental/size.md b/docs/docs/experimental/size.md
new file mode 100644
index 000000000..992973bbb
--- /dev/null
+++ b/docs/docs/experimental/size.md
@@ -0,0 +1,75 @@
+---
+title: Size tests
+---
+
+Button size should default to `medium`:
+
+```html {.example}
++
+
Small dropdown:
+
Small menu:
+
Small menu item:
+
No size:
+