From 21cbf76baf00ac6ce9b15240e51f96832617eb65 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Wed, 12 Jun 2024 20:13:05 -0400 Subject: [PATCH 001/146] add 'appearance' to wa-button --- docs/docs/components/button.md | 63 +++++++++------ src/components/button/button.styles.ts | 107 ++++++++++++++++++++----- src/components/button/button.ts | 15 ++-- src/themes/default.css | 4 +- 4 files changed, 136 insertions(+), 53 deletions(-) diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index d7f5ed206..6a03f6b7f 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -12,16 +12,53 @@ layout: component.njk ### Variants -Use the `variant` attribute to set the button's variant. +Use the `variant` attribute to set the button's semantic variant. ```html {.example} +Neutral Brand Success -Neutral Warning Danger ``` +### Appearance + +Use the `appearance` attribute to set the button's visual appearance. + +```html {.example} +
+ Solid + Subtle + Outline + Text +
+
+ Solid + Subtle + Outline + Text +
+
+ Solid + Subtle + Outline + Text +
+
+ Solid + Subtle + Outline + Text +
+
+ Solid + Subtle + Outline + Text +
+``` + ### Sizes Use the `size` attribute to change a button's size. @@ -32,18 +69,6 @@ Use the `size` attribute to change a button's size. Large ``` -### Outline Buttons - -Use the `outline` attribute to draw outlined buttons with transparent backgrounds. - -```html {.example} -Brand -Success -Neutral -Warning -Danger -``` - ### Pill Buttons Use the `pill` attribute to give buttons rounded edges. @@ -54,16 +79,6 @@ Use the `pill` attribute to give buttons rounded edges. Large ``` -### Text Buttons - -Use the `text` variant to create text buttons that share the same size as regular buttons but don't have backgrounds or borders. - -```html {.example} -Text -Text -Text -``` - ### Link Buttons It's often helpful to have a button that works like a link. This is possible by setting the `href` attribute, which will make the component render an `` under the hood. This gives you all the default link behavior the browser provides (e.g. [[CMD/CTRL/SHIFT]] + [[CLICK]]) and exposes the `target` and `download` attributes. diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts index 15e88dfc6..d2eb0a071 100644 --- a/src/components/button/button.styles.ts +++ b/src/components/button/button.styles.ts @@ -14,35 +14,35 @@ export default css` } /* - * Standard buttons + * Solid buttons */ - :host([variant='brand']) { + :host([appearance='solid'][variant='brand']) { --background-color: var(--wa-color-brand-fill-loud); --label-color: var(--wa-color-brand-on-loud); } - :host([variant='success']) { + :host([appearance='solid'][variant='success']) { --background-color: var(--wa-color-success-fill-loud); --label-color: var(--wa-color-success-on-loud); } - :host([variant='warning']) { + :host([appearance='solid'][variant='warning']) { --background-color: var(--wa-color-warning-fill-loud); --label-color: var(--wa-color-warning-on-loud); } - :host([variant='neutral']) { + :host([appearance='solid'][variant='neutral']) { --background-color: var(--wa-color-neutral-fill-loud); --label-color: var(--wa-color-neutral-on-loud); } - :host([variant='danger']) { + :host([appearance='solid'][variant='danger']) { --background-color: var(--wa-color-danger-fill-loud); --label-color: var(--wa-color-danger-on-loud); } - :host(:not([variant='text'])) { + :host([appearance='solid']) { --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover)); --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active)); --border-color: initial; @@ -56,33 +56,38 @@ export default css` * Outline buttons */ - :host([variant='brand'][outline]) { + :host([variant='brand'][appearance='outline']) { --background-color-hover: var(--wa-color-brand-fill-quiet); + --border-color: var(--wa-color-brand-border-loud); --label-color: var(--wa-color-brand-on-quiet); } - :host([variant='success'][outline]) { + :host([variant='success'][appearance='outline']) { --background-color-hover: var(--wa-color-success-fill-quiet); + --border-color: var(--wa-color-success-border-loud); --label-color: var(--wa-color-success-on-quiet); } - :host([variant='neutral'][outline]), + :host([variant='neutral'][appearance='outline']), :host(.wa-button-group__button--radio:not([checked])) { --background-color-hover: var(--wa-color-neutral-fill-quiet); + --border-color: var(--wa-color-neutral-border-loud); --label-color: var(--wa-color-neutral-on-quiet); } - :host([variant='warning'][outline]) { + :host([variant='warning'][appearance='outline']) { --background-color-hover: var(--wa-color-warning-fill-quiet); + --border-color: var(--wa-color-warning-border-loud); --label-color: var(--wa-color-warning-on-quiet); } - :host([variant='danger'][outline]) { + :host([variant='danger'][appearance='outline']) { --background-color-hover: var(--wa-color-danger-fill-quiet); + --border-color: var(--wa-color-danger-border-loud); --label-color: var(--wa-color-danger-on-quiet); } - :host([outline]), + :host([appearance='outline']), :host(.wa-button-group__button--radio:not([checked])) { --background-color: transparent; --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-surface-default) 30%); @@ -97,16 +102,78 @@ export default css` * Text buttons */ - :host([variant='text']) { - --background-color: none; - --background-color-active: none; - --background-color-hover: none; + :host([appearance='text']) { + --background-color: transparent; + --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-surface-default) 30%); --border-color: transparent; --border-color-active: transparent; --border-color-hover: transparent; - --label-color: var(--wa-color-text-link); - --label-color-active: var(--wa-color-text-link); - --label-color-hover: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover)); + --label-color-active: color-mix(in oklab, var(--label-color), var(--wa-color-mix-active)); + --label-color-hover: color-mix(in oklab, var(--label-color), var(--wa-color-mix-hover)); + } + + :host([appearance='text'][variant='brand']) { + --label-color: var(--wa-color-brand-on-quiet); + --background-color-hover: var(--wa-color-brand-fill-quiet); + } + + :host([appearance='text'][variant='success']) { + --label-color: var(--wa-color-success-on-quiet); + --background-color-hover: var(--wa-color-success-fill-quiet); + } + + :host([appearance='text'][variant='neutral']) { + --label-color: var(--wa-color-neutral-on-quiet); + --background-color-hover: var(--wa-color-neutral-fill-quiet); + } + + :host([appearance='text'][variant='warning']) { + --label-color: var(--wa-color-warning-on-quiet); + --background-color-hover: var(--wa-color-warning-fill-quiet); + } + + :host([appearance='text'][variant='danger']) { + --label-color: var(--wa-color-danger-on-quiet); + --background-color-hover: var(--wa-color-danger-fill-quiet); + } + + /* + * Subtle buttons + */ + + :host([appearance='subtle'][variant='brand']) { + --background-color: var(--wa-color-brand-fill-normal); + --label-color: var(--wa-color-brand-on-normal); + } + + :host([appearance='subtle'][variant='success']) { + --background-color: var(--wa-color-success-fill-normal); + --label-color: var(--wa-color-success-on-normal); + } + + :host([appearance='subtle'][variant='warning']) { + --background-color: var(--wa-color-warning-fill-normal); + --label-color: var(--wa-color-warning-on-normal); + } + + :host([appearance='subtle'][variant='neutral']) { + --background-color: var(--wa-color-neutral-fill-normal); + --label-color: var(--wa-color-neutral-on-normal); + } + + :host([appearance='subtle'][variant='danger']) { + --background-color: var(--wa-color-danger-fill-normal); + --label-color: var(--wa-color-danger-on-normal); + } + + :host([appearance='subtle']) { + --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover)); + --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active)); + --border-color: initial; + --border-color-hover: initial; + --border-color-active: initial; + --label-color-hover: color-mix(in oklab, var(--label-color), var(--wa-color-mix-hover)); + --label-color-active: color-mix(in oklab, var(--label-color), var(--wa-color-mix-active)); } /* diff --git a/src/components/button/button.ts b/src/components/button/button.ts index 1c269d920..580191907 100644 --- a/src/components/button/button.ts +++ b/src/components/button/button.ts @@ -71,7 +71,10 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { @property() title = ''; // make reactive to pass through /** The button's theme variant. */ - @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' | 'text' = 'neutral'; + @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral'; + + /** The button's visual appearance. */ + @property({ reflect: true }) appearance: 'solid' | 'subtle' | 'outline' | 'text' = 'solid'; /** The button's size. */ @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; @@ -85,9 +88,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { /** Draws the button in a loading state. */ @property({ type: Boolean, reflect: true }) loading = false; - /** Draws an outlined button. */ - @property({ type: Boolean, reflect: true }) outline = false; - /** Draws a pill-style button with rounded edges. */ @property({ type: Boolean, reflect: true }) pill = false; @@ -248,7 +248,6 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { 'button--neutral': this.variant === 'neutral', 'button--warning': this.variant === 'warning', 'button--danger': this.variant === 'danger', - 'button--text': this.variant === 'text', 'button--small': this.size === 'small', 'button--medium': this.size === 'medium', 'button--large': this.size === 'large', @@ -256,8 +255,10 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { 'button--disabled': this.disabled, 'button--focused': this.hasFocus, 'button--loading': this.loading, - 'button--standard': !this.outline, - 'button--outline': this.outline, + 'button--solid': this.appearance === 'solid', + 'button--subtle': this.appearance === 'subtle', + 'button--outline': this.appearance === 'outline', + 'button--text': this.appearance === 'text', 'button--pill': this.pill, 'button--rtl': this.localize.dir() === 'rtl' })} diff --git a/src/themes/default.css b/src/themes/default.css index 77c68dfc5..62e6461f9 100644 --- a/src/themes/default.css +++ b/src/themes/default.css @@ -130,8 +130,8 @@ --wa-color-focus: var(--wa-color-blue-60); /* Hover and active colors are intended to be used in color-mix() to achieve consistent effects across components. */ - --wa-color-mix-hover: black 16%; - --wa-color-mix-active: black 24%; + --wa-color-mix-hover: black 10%; + --wa-color-mix-active: black 20%; /** * Semantic Colors From 7709a63384993f61e064789feb37e1a1f06bbfe9 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Wed, 12 Jun 2024 20:20:20 -0400 Subject: [PATCH 002/146] correct new button appearances --- docs/_includes/base.njk | 2 +- docs/docs/experimental/sandbox.md | 12 ++++++------ src/components/button/button.styles.ts | 5 ++--- 3 files changed, 9 insertions(+), 10 deletions(-) diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index c3d71266b..1c3f90513 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -43,7 +43,7 @@
{# Nav toggle #} - + diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md index a7056ad81..e3d36acfd 100644 --- a/docs/docs/experimental/sandbox.md +++ b/docs/docs/experimental/sandbox.md @@ -100,13 +100,13 @@ layout: page.njk Warning Danger

-Brand -Success -Neutral -Warning -Danger +Brand +Success +Neutral +Warning +Danger

-Brand +Text

Option 1 diff --git a/src/components/button/button.styles.ts b/src/components/button/button.styles.ts index d2eb0a071..b03d938e6 100644 --- a/src/components/button/button.styles.ts +++ b/src/components/button/button.styles.ts @@ -91,7 +91,6 @@ export default css` :host(.wa-button-group__button--radio:not([checked])) { --background-color: transparent; --background-color-active: color-mix(in oklab, var(--background-color-hover), var(--wa-color-surface-default) 30%); - --border-color: color-mix(in oklab, var(--label-color), var(--wa-color-surface-default) 30%); --border-color-hover: var(--border-color); --border-color-active: var(--border-color); --label-color-hover: var(--label-color); @@ -167,8 +166,8 @@ export default css` } :host([appearance='subtle']) { - --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-mix-hover)); - --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-mix-active)); + --background-color-hover: color-mix(in oklab, var(--background-color), var(--wa-color-surface-default) 20%); + --background-color-active: color-mix(in oklab, var(--background-color), var(--wa-color-surface-default) 30%); --border-color: initial; --border-color-hover: initial; --border-color-active: initial; From f4f56fc34414ad913bf12e7bedde6f7dad6627f6 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Thu, 13 Jun 2024 13:58:05 -0400 Subject: [PATCH 003/146] rename appearance values --- docs/docs/components/button.md | 48 +++---- docs/docs/experimental/themer.md | 2 +- docs/docs/patterns/ecommerce.md | 12 +- src/components/button/button.styles.ts | 168 +++++++++++-------------- src/components/button/button.ts | 8 +- 5 files changed, 109 insertions(+), 129 deletions(-) diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index 6a03f6b7f..6ae19eb95 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -24,36 +24,36 @@ Use the `variant` attribute to set the button's semantic variant. ### Appearance -Use the `appearance` attribute to set the button's visual appearance. +Use the `appearance` attribute to change the button's visual appearance. ```html {.example}
- Solid - Subtle + Filled + Tinted Outline Text
- Solid - Subtle + Filled + Tinted Outline Text
- Solid - Subtle + Filled + Tinted Outline Text
- Solid - Subtle + Filled + Tinted Outline Text
- Solid - Subtle + Filled + Tinted Outline Text
@@ -110,54 +110,54 @@ Use the `prefix` and `suffix` slots to add icons. ```html {.example} - + Settings - + Refresh - - + + Open

- + Settings - + Refresh - - + + Open

- + Settings - + Refresh - - + + Open ``` @@ -206,7 +206,7 @@ This example demonstrates how to style buttons using a custom class. This is the -Go somewhere +
+
+ +

Make something awesome with open-source web components

+
+ Psst! You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good. + +
+
+
+ +
+
+

What's Web Awesome?

+

Web Awesome is the biggest open-source library of meticulously designed, highly customizable, and framework-agnostic UI components.

+
+
+
+ +

Entirely native

+
+

Built on web standards to last for years to come. No excess tooling. No third-party bloat.

+
+
+
+ +

Fully customizable

+
+

Show off your own style with components that consistently adapt to your theme.

+
+
+
+ +

Accessibility forward

+
+

Build a website that everyone can use. Designed to be inclusive and usable by everyone.

+
+
+
+ +

Proudly open source

+
+

Use Web Awesome Free however you like. Always free, always open source.

+
+
+
+ +
+
+

You put the awesome in Web Awesome

+

Web Awesome started as an open-source project fueled by contributions from an engaged community of developers, and we want to keep it that way. The core of Web Awesome is — and always will be — free and open source.

+

Whether you’re a developer, designer, or budding tech nerd, we want you a part of the conversation.

+
+
+
+
+ +

Get in touch

+
+

Have a question? Want to share your feedback? Just stopping by to say 'hi'? Email us at hello@webawesome.com.

+
+
+
+ +

Follow us

+
+

Keep up with Web Awesome through updates, announcements, and polls. Find us on Twitter (X) and Instagram.

+
+
+
+ + + +
+ +
+
+ Let's Make Something Awesome +

Web Awesome is the design system platform and open source library of web components from your fellow nerds at Font Awesome.

+
+
+ Special thanks +
+ Lit + Custom Elements Manifest + 11ty + Floating UI + animate.css + Lunr +
+
+
+
+ © Fonticons, Inc. +
+
+
From bd40f7b9c67aa3c239f21a495891cee2488451e3 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Fri, 14 Jun 2024 19:12:21 -0400 Subject: [PATCH 013/146] improve docs header responsiveness --- docs/_includes/base.njk | 22 +++++++++++----------- docs/assets/styles/docs.css | 13 +++++++++++++ 2 files changed, 24 insertions(+), 11 deletions(-) diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index 37bd5f22c..cc3614fbe 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -43,18 +43,18 @@
- {# Nav toggle #} - - - - {# Logo #}
+ {# Nav toggle #} + + + - {% include "logo.njk" %} + {% include "logo.njk" %} + {% include "logo-simple.njk" %} - {{ package.version }} - Alpha + {{ package.version }} + Alpha
@@ -63,8 +63,8 @@ - Light - Dark + Light + Dark Light @@ -78,7 +78,7 @@ Search - / + /
diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index f1c2bdcaf..ff5d93d6b 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -23,6 +23,11 @@ wa-page[view='desktop'] [data-toggle-nav] { display: none; } +wa-page[view='desktop'] .only-mobile, +wa-page:not([view='desktop']) .only-desktop { + display: none; +} + /* Header */ wa-page::part(header) { background-color: var(--wa-color-surface-default); @@ -42,6 +47,14 @@ wa-page > header { line-height: 1; } + wa-button[data-toggle-nav] { + --label-color: currentColor; + margin-inline-end: 0.75rem; + &::part(base) { + padding: 0; + } + } + svg { width: auto; height: 1.75rem; From 4357323bbb7cf0c856c8bd36eeef1424011df3e8 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 12:26:54 -0400 Subject: [PATCH 014/146] add whitespace --- src/components/option/option.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/option/option.ts b/src/components/option/option.ts index afc3a822e..be3689f04 100644 --- a/src/components/option/option.ts +++ b/src/components/option/option.ts @@ -25,6 +25,7 @@ import type { CSSResultGroup } from 'lit'; * @cssproperty --background-color-hover - The options's background color on hover. * @cssproperty --label-color-current - The current option's label color. * @cssproperty --label-color-hover - The label color on hover. + * * @csspart checked-icon - The checked icon, a `` element. * @csspart base - The component's base wrapper. * @csspart label - The option's label. From d88f27f3e16498c0fa7c8a71a71928c368f3f2f4 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 12:27:10 -0400 Subject: [PATCH 015/146] update docs --- docs/assets/styles/docs.css | 7 ++++++- docs/docs/experimental/style-guide.md | 9 ++++----- 2 files changed, 10 insertions(+), 6 deletions(-) diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index ff5d93d6b..356a333d5 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -222,7 +222,6 @@ wa-page > main { } /* Swatches */ - .swatch { background-color: transparent; border-color: var(--wa-color-neutral-border-normal); @@ -234,3 +233,9 @@ wa-page > main { height: 2.5em; padding-inline: var(--wa-space-xs); } + +/* Utilities */ +.two-columns { + columns: 2; + gap: 1rem; +} diff --git a/docs/docs/experimental/style-guide.md b/docs/docs/experimental/style-guide.md index 3004c7a48..5efbf2593 100644 --- a/docs/docs/experimental/style-guide.md +++ b/docs/docs/experimental/style-guide.md @@ -21,11 +21,10 @@ Cras pulvinar mattis nunc sed blandit libero. Facilisis magna etiam tempor orci. ## Inline Text ```html - Feugiat nisl pretium fusce id. Ipsum dolor sit amet consectetur adipiscing elit. Eget nunc lobortis mattis aliquam faucibus purus. Metus dictum at tempor commodo ullamcorper a lacus vestibulum. Urna condimentum mattis pellentesque id nibh tortor id. ``` -
+

Bold

Italics

Underline

@@ -85,17 +84,17 @@ Individual details look like this. Grouping them provides accordion-style functionality. -
+
Enim diam

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

-
+
Arcu non odio

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

-
+
Ut porttitor

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

From dfa1f2adf738751f682261116553b4cc940d6cfd Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 13:26:39 -0400 Subject: [PATCH 016/146] remove example --- docs/docs/theming/typography.md | 4 ---- 1 file changed, 4 deletions(-) diff --git a/docs/docs/theming/typography.md b/docs/docs/theming/typography.md index 567a40234..46fa02b39 100644 --- a/docs/docs/theming/typography.md +++ b/docs/docs/theming/typography.md @@ -75,7 +75,3 @@ Together with [`--wa-color-link`](/docs/theming/color/#text), these custom prope | ------------------------------ | ---------------------------------------------------------------------------------- | | `--wa-link-decoration-default` | `underline color-mix(in oklab, var(--wa-color-text-link) 70%, transparent) dotted` | | `--wa-link-decoration-hover` | `underline` | - -```html {.example} -Web Awesome anchor -``` \ No newline at end of file From cd837cb291880db3a8a0418883ab28a6b404c777 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 13:26:46 -0400 Subject: [PATCH 017/146] reword --- docs/docs/localization.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/docs/docs/localization.md b/docs/docs/localization.md index e99b32811..f4cb00e24 100644 --- a/docs/docs/localization.md +++ b/docs/docs/localization.md @@ -4,7 +4,7 @@ description: Discover how to localize Web Awesome with minimal effort. layout: page.njk --- -Components can be localized by importing the appropriate translation file and setting the desired [`lang` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir` attribute](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) on the `` element. Here's an example that renders Web Awesome components in Spanish. +Components can be localized by importing the appropriate translation file and setting the desired [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attributes on the `` element. Here's an example that renders Web Awesome components in Spanish. ```html From a62f9b28f0ece7f373f219f730dea044bb946332 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 13:26:53 -0400 Subject: [PATCH 018/146] fix footer --- docs/assets/styles/search.css | 1 + 1 file changed, 1 insertion(+) diff --git a/docs/assets/styles/search.css b/docs/assets/styles/search.css index 47ae0313d..d22bcc748 100644 --- a/docs/assets/styles/search.css +++ b/docs/assets/styles/search.css @@ -224,6 +224,7 @@ header { #site-search footer { flex: 0 0 auto; display: flex; + flex-direction: row; justify-content: center; gap: 2rem; color: var(--wa-color-text-quiet); From 4adfcecb8069d70aac3c85e15eff355990a6a4a9 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 13:36:32 -0400 Subject: [PATCH 019/146] update example --- docs/docs/theming/component-groups.md | 7 ++----- 1 file changed, 2 insertions(+), 5 deletions(-) diff --git a/docs/docs/theming/component-groups.md b/docs/docs/theming/component-groups.md index d74af4409..1eaac0e8e 100644 --- a/docs/docs/theming/component-groups.md +++ b/docs/docs/theming/component-groups.md @@ -112,9 +112,6 @@ Tooltip styles are shared between the [tooltip](/docs/components/tooltip) compon | `--wa-tooltip-line-height` | `var(--wa-line-height-normal)` | ```html {.example} - - - -
- + +This is a tooltip ``` \ No newline at end of file From 0224a3ff986fde9716c4d86a99a9cc30c71b8923 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 13:46:40 -0400 Subject: [PATCH 020/146] fix button test --- src/components/button/button.test.ts | 1 - 1 file changed, 1 deletion(-) diff --git a/src/components/button/button.test.ts b/src/components/button/button.test.ts index adb75fec7..67e21e7ef 100644 --- a/src/components/button/button.test.ts +++ b/src/components/button/button.test.ts @@ -30,7 +30,6 @@ describe('', async () => { expect(el.disabled).to.equal(false); expect(el.caret).to.equal(false); expect(el.loading).to.equal(false); - expect(el.outline).to.equal(false); expect(el.pill).to.equal(false); }); From 301996ed57f928ccb3af91ca6a3d77f6ede85b7d Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 13:47:09 -0400 Subject: [PATCH 021/146] add appearance --- src/components/button/button.test.ts | 1 + 1 file changed, 1 insertion(+) diff --git a/src/components/button/button.test.ts b/src/components/button/button.test.ts index 67e21e7ef..f07892a83 100644 --- a/src/components/button/button.test.ts +++ b/src/components/button/button.test.ts @@ -26,6 +26,7 @@ describe('', async () => { expect(el.title).to.equal(''); expect(el.variant).to.equal('neutral'); + expect(el.appearance).to.equal('filled'); expect(el.size).to.equal('medium'); expect(el.disabled).to.equal(false); expect(el.caret).to.equal(false); From 1ec44cef0630304cf68da6a16b650fb8cf014e82 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 14:15:32 -0400 Subject: [PATCH 022/146] fix nav toggle styles --- docs/_includes/base.njk | 7 +------ docs/assets/styles/docs.css | 5 ++++- 2 files changed, 5 insertions(+), 7 deletions(-) diff --git a/docs/_includes/base.njk b/docs/_includes/base.njk index b258b5227..5a83dc4b2 100644 --- a/docs/_includes/base.njk +++ b/docs/_includes/base.njk @@ -43,15 +43,10 @@
- {# Nav toggle #} - - - - {# Logo #}
{# Nav toggle #} - + diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index 356a333d5..afb47aa24 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -49,9 +49,12 @@ wa-page > header { wa-button[data-toggle-nav] { --label-color: currentColor; - margin-inline-end: 0.75rem; + margin-inline-start: -0.875rem; + margin-inline-end: 0; + &::part(base) { padding: 0; + padding-inline: 0.875rem; } } From fb5cb77c1b1b328592c3775eb0407de93928c4a2 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 15:14:07 -0400 Subject: [PATCH 023/146] add page-outline layout --- docs/_layouts/page-outline.njk | 4 ++++ 1 file changed, 4 insertions(+) create mode 100644 docs/_layouts/page-outline.njk diff --git a/docs/_layouts/page-outline.njk b/docs/_layouts/page-outline.njk new file mode 100644 index 000000000..090efc8b3 --- /dev/null +++ b/docs/_layouts/page-outline.njk @@ -0,0 +1,4 @@ +{% set hasSidebar = true %} +{% set hasOutline = true %} + +{% extends "../_includes/base.njk" %} From 93c8ec1a266b7bfb8d4b2e249647b95b9e7edf66 Mon Sep 17 00:00:00 2001 From: Cory LaViska Date: Mon, 17 Jun 2024 15:14:15 -0400 Subject: [PATCH 024/146] remove extensions from layouts --- docs/404.md | 2 +- docs/_includes/sidebar.njk | 15 +- docs/docs/components/animated-image.md | 2 +- docs/docs/components/animation.md | 2 +- docs/docs/components/avatar.md | 2 +- docs/docs/components/badge.md | 2 +- docs/docs/components/breadcrumb-item.md | 2 +- docs/docs/components/breadcrumb.md | 2 +- docs/docs/components/button-group.md | 2 +- docs/docs/components/button.md | 2 +- docs/docs/components/callout.md | 2 +- docs/docs/components/card.md | 2 +- docs/docs/components/carousel-item.md | 2 +- docs/docs/components/carousel.md | 2 +- docs/docs/components/checkbox.md | 2 +- docs/docs/components/color-picker.md | 2 +- docs/docs/components/copy-button.md | 2 +- docs/docs/components/details.md | 2 +- docs/docs/components/dialog.md | 2 +- docs/docs/components/divider.md | 2 +- docs/docs/components/drawer.md | 2 +- docs/docs/components/dropdown.md | 2 +- docs/docs/components/format-bytes.md | 2 +- docs/docs/components/format-date.md | 2 +- docs/docs/components/format-number.md | 2 +- docs/docs/components/icon-button.md | 2 +- docs/docs/components/icon.md | 2 +- docs/docs/components/image-comparer.md | 2 +- docs/docs/components/include.md | 2 +- docs/docs/components/input.md | 2 +- docs/docs/components/menu-item.md | 2 +- docs/docs/components/menu-label.md | 2 +- docs/docs/components/menu.md | 2 +- docs/docs/components/mutation-observer.md | 2 +- docs/docs/components/option.md | 2 +- docs/docs/components/page.md | 2 +- docs/docs/components/popup.md | 2 +- docs/docs/components/progress-bar.md | 2 +- docs/docs/components/progress-ring.md | 2 +- docs/docs/components/qr-code.md | 2 +- docs/docs/components/radio-button.md | 2 +- docs/docs/components/radio-group.md | 2 +- docs/docs/components/radio.md | 2 +- docs/docs/components/range.md | 2 +- docs/docs/components/rating.md | 2 +- docs/docs/components/relative-time.md | 2 +- docs/docs/components/resize-observer.md | 2 +- docs/docs/components/select.md | 2 +- docs/docs/components/skeleton.md | 2 +- docs/docs/components/spinner.md | 2 +- docs/docs/components/split-panel.md | 2 +- docs/docs/components/switch.md | 2 +- docs/docs/components/tab-group.md | 2 +- docs/docs/components/tab-panel.md | 2 +- docs/docs/components/tab.md | 2 +- docs/docs/components/tag.md | 2 +- docs/docs/components/textarea.md | 2 +- docs/docs/components/tooltip.md | 2 +- docs/docs/components/tree-item.md | 2 +- docs/docs/components/tree.md | 2 +- docs/docs/components/visually-hidden.md | 2 +- docs/docs/customizing.md | 2 +- docs/docs/experimental/form-validation.md | 2 +- docs/docs/experimental/sandbox.md | 2 +- docs/docs/experimental/style-guide.md | 2 +- docs/docs/experimental/themer.md | 2 +- docs/docs/installation.md | 2 +- docs/docs/localization.md | 2 +- docs/docs/patterns/ecommerce.md | 2 +- docs/docs/resources/accessibility.md | 2 +- docs/docs/resources/changelog.md | 1740 +-------------------- docs/docs/resources/community.md | 2 +- docs/docs/resources/contributing.md | 2 +- docs/docs/themes.md | 2 +- docs/docs/theming/borders.md | 2 +- docs/docs/theming/color.md | 2 +- docs/docs/theming/component-groups.md | 2 +- docs/docs/theming/focus.md | 2 +- docs/docs/theming/shadows.md | 2 +- docs/docs/theming/space.md | 2 +- docs/docs/theming/transitions.md | 2 +- docs/docs/theming/typography.md | 2 +- docs/docs/usage.md | 2 +- docs/index.md | 2 +- 84 files changed, 86 insertions(+), 1833 deletions(-) diff --git a/docs/404.md b/docs/404.md index d80f7b4ea..82e759a75 100644 --- a/docs/404.md +++ b/docs/404.md @@ -1,7 +1,7 @@ --- title: Not Found description: Sorry, I couldn't find that. -layout: page.njk +layout: page permalink: 404.html noindex: true --- diff --git a/docs/_includes/sidebar.njk b/docs/_includes/sidebar.njk index 1e16cc8db..40155df2c 100644 --- a/docs/_includes/sidebar.njk +++ b/docs/_includes/sidebar.njk @@ -8,16 +8,6 @@
  • Localization
    • -{# Experimental #} -

    Experimental

    - - - {# Resources #}

    Resources

    \ No newline at end of file + diff --git a/docs/docs/components/animated-image.md b/docs/docs/components/animated-image.md index 84606fca9..8966165d7 100644 --- a/docs/docs/components/animated-image.md +++ b/docs/docs/components/animated-image.md @@ -1,7 +1,7 @@ --- title: Animated Image description: A component for displaying animated GIFs and WEBPs that play and pause on interaction. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/animation.md b/docs/docs/components/animation.md index 91c41cade..1ac6326a8 100644 --- a/docs/docs/components/animation.md +++ b/docs/docs/components/animation.md @@ -1,7 +1,7 @@ --- title: Animation description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes. -layout: component.njk +layout: component --- To animate an element, wrap it in `` and set an animation `name`. The animation will not start until you add the `play` attribute. Refer to the [properties table](#properties) for a list of all animation options. diff --git a/docs/docs/components/avatar.md b/docs/docs/components/avatar.md index 5172bf6ab..2e9bc9334 100644 --- a/docs/docs/components/avatar.md +++ b/docs/docs/components/avatar.md @@ -1,7 +1,7 @@ --- title: Avatar description: Avatars are used to represent a person or object. -layout: component.njk +layout: component --- By default, a generic icon will be shown. You can personalize avatars by adding custom icons, initials, and images. You should always provide a `label` for assistive devices. diff --git a/docs/docs/components/badge.md b/docs/docs/components/badge.md index cf39605a7..ceb70a7db 100644 --- a/docs/docs/components/badge.md +++ b/docs/docs/components/badge.md @@ -1,7 +1,7 @@ --- title: Badge description: Badges are used to draw attention and display statuses or counts. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/breadcrumb-item.md b/docs/docs/components/breadcrumb-item.md index 6be9b1b81..2b8dfcced 100644 --- a/docs/docs/components/breadcrumb-item.md +++ b/docs/docs/components/breadcrumb-item.md @@ -1,7 +1,7 @@ --- title: Breadcrumb Item description: Breadcrumb Items are used inside breadcrumbs to represent different links. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/breadcrumb.md b/docs/docs/components/breadcrumb.md index f894b1574..857985412 100644 --- a/docs/docs/components/breadcrumb.md +++ b/docs/docs/components/breadcrumb.md @@ -1,7 +1,7 @@ --- title: Breadcrumb description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy. -layout: component.njk +layout: component --- Breadcrumbs are usually placed before a page's main content with the current page shown last to indicate the user's position in the navigation. diff --git a/docs/docs/components/button-group.md b/docs/docs/components/button-group.md index 3f76f878b..de7f10069 100644 --- a/docs/docs/components/button-group.md +++ b/docs/docs/components/button-group.md @@ -1,7 +1,7 @@ --- title: Button Group description: Button groups can be used to group related buttons into sections. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/button.md b/docs/docs/components/button.md index 963bc903a..008f37439 100644 --- a/docs/docs/components/button.md +++ b/docs/docs/components/button.md @@ -1,7 +1,7 @@ --- title: Button description: Buttons represent actions that are available to the user. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/callout.md b/docs/docs/components/callout.md index 90b1dbf9e..09196c815 100644 --- a/docs/docs/components/callout.md +++ b/docs/docs/components/callout.md @@ -1,7 +1,7 @@ --- title: Callout description: Callouts are used to display important messages inline. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/card.md b/docs/docs/components/card.md index 3477d035f..40f07f6c0 100644 --- a/docs/docs/components/card.md +++ b/docs/docs/components/card.md @@ -1,7 +1,7 @@ --- title: Card description: Cards can be used to group related subjects in a container. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/carousel-item.md b/docs/docs/components/carousel-item.md index 2b45bdb9c..34379d947 100644 --- a/docs/docs/components/carousel-item.md +++ b/docs/docs/components/carousel-item.md @@ -1,7 +1,7 @@ --- title: Carousel Item description: A carousel item represent a slide within a carousel. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/carousel.md b/docs/docs/components/carousel.md index 5f163fa6f..3ef8e46d3 100644 --- a/docs/docs/components/carousel.md +++ b/docs/docs/components/carousel.md @@ -1,7 +1,7 @@ --- title: Carousel description: Carousels display an arbitrary number of content slides along a horizontal or vertical axis. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/checkbox.md b/docs/docs/components/checkbox.md index 48229417c..5d7e61c2b 100644 --- a/docs/docs/components/checkbox.md +++ b/docs/docs/components/checkbox.md @@ -1,7 +1,7 @@ --- title: Checkbox description: Checkboxes allow the user to toggle an option on or off. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/color-picker.md b/docs/docs/components/color-picker.md index e4f2dd861..6ab70acd6 100644 --- a/docs/docs/components/color-picker.md +++ b/docs/docs/components/color-picker.md @@ -1,7 +1,7 @@ --- title: Color Picker description: Color pickers allow the user to select a color. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/copy-button.md b/docs/docs/components/copy-button.md index 635b3755a..bf305965b 100644 --- a/docs/docs/components/copy-button.md +++ b/docs/docs/components/copy-button.md @@ -1,7 +1,7 @@ --- title: Copy Button description: Copies data to the clipboard when the user clicks the button. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/details.md b/docs/docs/components/details.md index 2845a6f2a..22646e60d 100644 --- a/docs/docs/components/details.md +++ b/docs/docs/components/details.md @@ -1,7 +1,7 @@ --- title: Details description: Details show a brief summary and expand to show additional content. -layout: component.njk +layout: component --- diff --git a/docs/docs/components/dialog.md b/docs/docs/components/dialog.md index 20702e373..3ddef25be 100644 --- a/docs/docs/components/dialog.md +++ b/docs/docs/components/dialog.md @@ -1,7 +1,7 @@ --- title: Dialog description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.' -layout: component.njk +layout: component --- diff --git a/docs/docs/components/divider.md b/docs/docs/components/divider.md index 463b1d5a6..62c7026aa 100644 --- a/docs/docs/components/divider.md +++ b/docs/docs/components/divider.md @@ -1,7 +1,7 @@ --- title: Divider description: Dividers are used to visually separate or group elements. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/drawer.md b/docs/docs/components/drawer.md index b7c72f0b9..16a99a79e 100644 --- a/docs/docs/components/drawer.md +++ b/docs/docs/components/drawer.md @@ -1,7 +1,7 @@ --- title: Drawer description: Drawers slide in from a container to expose additional options and information. -layout: component.njk +layout: component --- diff --git a/docs/docs/components/dropdown.md b/docs/docs/components/dropdown.md index 22cd7edbd..c5c970920 100644 --- a/docs/docs/components/dropdown.md +++ b/docs/docs/components/dropdown.md @@ -1,7 +1,7 @@ --- title: Dropdown description: 'Dropdowns expose additional content that "drops down" in a panel.' -layout: component.njk +layout: component --- Dropdowns consist of a trigger and a panel. By default, activating the trigger will expose the panel and interacting outside of the panel will close it. diff --git a/docs/docs/components/format-bytes.md b/docs/docs/components/format-bytes.md index 8cfc63a1c..364fbc756 100644 --- a/docs/docs/components/format-bytes.md +++ b/docs/docs/components/format-bytes.md @@ -1,7 +1,7 @@ --- title: Format Bytes description: Formats a number as a human readable bytes value. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/format-date.md b/docs/docs/components/format-date.md index 0107bce1c..6078908fa 100644 --- a/docs/docs/components/format-date.md +++ b/docs/docs/components/format-date.md @@ -1,7 +1,7 @@ --- title: Format Date description: Formats a date/time using the specified locale and options. -layout: component.njk +layout: component --- Localization is handled by the browser's [`Intl.DateTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat). No language packs are required. diff --git a/docs/docs/components/format-number.md b/docs/docs/components/format-number.md index f0eeab9d3..d14554b8b 100644 --- a/docs/docs/components/format-number.md +++ b/docs/docs/components/format-number.md @@ -1,7 +1,7 @@ --- title: Format Number description: Formats a number using the specified locale and options. -layout: component.njk +layout: component --- Localization is handled by the browser's [`Intl.NumberFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat/NumberFormat). No language packs are required. diff --git a/docs/docs/components/icon-button.md b/docs/docs/components/icon-button.md index cbc3e812f..be3ffa302 100644 --- a/docs/docs/components/icon-button.md +++ b/docs/docs/components/icon-button.md @@ -1,7 +1,7 @@ --- title: Icon Button description: Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars. -layout: component.njk +layout: component --- For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/components/icon). diff --git a/docs/docs/components/icon.md b/docs/docs/components/icon.md index da303e383..9bf63534a 100644 --- a/docs/docs/components/icon.md +++ b/docs/docs/components/icon.md @@ -1,7 +1,7 @@ --- title: Icon description: Icons are symbols that can be used to represent various options within an application. -layout: component.njk +layout: component --- Web Awesome comes bundled with over 2,000 free icons courtesy of [Font Awesome](https://fontawesome.com/). These icons are part of the `default` icon library. Font Awesome Pro users can unlock additional icon families. Or, if you prefer, you can register your own [custom icon library](#icon-library). diff --git a/docs/docs/components/image-comparer.md b/docs/docs/components/image-comparer.md index 70cd2eb49..abbaa1a94 100644 --- a/docs/docs/components/image-comparer.md +++ b/docs/docs/components/image-comparer.md @@ -1,7 +1,7 @@ --- title: Image Comparer description: Compare visual differences between similar photos with a sliding panel. -layout: component.njk +layout: component --- For best results, use images that share the same dimensions. The slider can be controlled by dragging or pressing the left and right arrow keys. (Tip: press shift + arrows to move the slider in larger intervals, or home + end to jump to the beginning or end.) diff --git a/docs/docs/components/include.md b/docs/docs/components/include.md index b78439069..466521443 100644 --- a/docs/docs/components/include.md +++ b/docs/docs/components/include.md @@ -1,7 +1,7 @@ --- title: Include description: Includes give you the power to embed external HTML files into the page. -layout: component.njk +layout: component --- Included files are asynchronously requested using `window.fetch()`. Requests are cached, so the same file can be included multiple times, but only one request will be made. diff --git a/docs/docs/components/input.md b/docs/docs/components/input.md index 116d878bd..d28f0fe04 100644 --- a/docs/docs/components/input.md +++ b/docs/docs/components/input.md @@ -1,7 +1,7 @@ --- title: Input description: Inputs collect data from the user. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/menu-item.md b/docs/docs/components/menu-item.md index f5224d15a..796c15401 100644 --- a/docs/docs/components/menu-item.md +++ b/docs/docs/components/menu-item.md @@ -1,7 +1,7 @@ --- title: Menu Item description: Menu items provide options for the user to pick from in a menu. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/menu-label.md b/docs/docs/components/menu-label.md index ad206a6d2..619d57d4f 100644 --- a/docs/docs/components/menu-label.md +++ b/docs/docs/components/menu-label.md @@ -1,7 +1,7 @@ --- title: Menu Label description: Menu labels are used to describe a group of menu items. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/menu.md b/docs/docs/components/menu.md index 7639846f8..f11a8169d 100644 --- a/docs/docs/components/menu.md +++ b/docs/docs/components/menu.md @@ -1,7 +1,7 @@ --- title: Menu description: Menus provide a list of options for the user to choose from. -layout: component.njk +layout: component --- You can use [menu items](/components/menu-item), [menu labels](/components/menu-label), and [dividers](/components/divider) to compose a menu. Menus support keyboard interactions, including type-to-select an option. diff --git a/docs/docs/components/mutation-observer.md b/docs/docs/components/mutation-observer.md index 6a584d6ed..d91788fe5 100644 --- a/docs/docs/components/mutation-observer.md +++ b/docs/docs/components/mutation-observer.md @@ -1,7 +1,7 @@ --- title: Mutation Observer description: The Mutation Observer component offers a thin, declarative interface to the MutationObserver API. -layout: component.njk +layout: component --- The mutation observer will report changes to the content it wraps through the `wa-mutation` event. When emitted, a collection of [MutationRecord](https://developer.mozilla.org/en-US/docs/Web/API/MutationRecord) objects will be attached to `event.detail` that contains information about how it changed. diff --git a/docs/docs/components/option.md b/docs/docs/components/option.md index 1fe954435..b8be2a439 100644 --- a/docs/docs/components/option.md +++ b/docs/docs/components/option.md @@ -1,7 +1,7 @@ --- title: Option description: Options define the selectable items within various form controls such as select. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/page.md b/docs/docs/components/page.md index 73bb42d2f..078b74236 100644 --- a/docs/docs/components/page.md +++ b/docs/docs/components/page.md @@ -1,7 +1,7 @@ --- title: Page description: Layouts offer an easy way to scaffold pages using minimal markup. -layout: 'component.njk' +layout: component --- The layout component is designed to power full webpages. It is flexible enough to handle most modern designs and includes a simple mechanism for handling desktop and mobile navigation. diff --git a/docs/docs/components/popup.md b/docs/docs/components/popup.md index e602d7402..2cedeb87b 100644 --- a/docs/docs/components/popup.md +++ b/docs/docs/components/popup.md @@ -1,7 +1,7 @@ --- title: Popup description: 'Popup is a utility that lets you declaratively anchor "popup" containers to another element.' -layout: component.njk +layout: component --- This component's name is inspired by [``](https://github.com/MicrosoftEdge/MSEdgeExplainers/blob/main/Popup/explainer.md). It uses [Floating UI](https://floating-ui.com/) under the hood to provide a well-tested, lightweight, and fully declarative positioning utility for tooltips, dropdowns, and more. diff --git a/docs/docs/components/progress-bar.md b/docs/docs/components/progress-bar.md index 73c84de1c..60a58dbab 100644 --- a/docs/docs/components/progress-bar.md +++ b/docs/docs/components/progress-bar.md @@ -1,7 +1,7 @@ --- title: Progress Bar description: Progress bars are used to show the status of an ongoing operation. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/progress-ring.md b/docs/docs/components/progress-ring.md index 7952b9237..9baa9384b 100644 --- a/docs/docs/components/progress-ring.md +++ b/docs/docs/components/progress-ring.md @@ -1,7 +1,7 @@ --- title: Progress Ring description: Progress rings are used to show the progress of a determinate operation in a circular fashion. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/qr-code.md b/docs/docs/components/qr-code.md index 09b9a1030..aaf088676 100644 --- a/docs/docs/components/qr-code.md +++ b/docs/docs/components/qr-code.md @@ -1,7 +1,7 @@ --- title: QR Code description: Generates a QR code and renders it using the Canvas API. -layout: component.njk +layout: component --- QR codes are useful for providing small pieces of information to users who can quickly scan them with a smartphone. Most smartphones have built-in QR code scanners, so simply pointing the camera at a QR code will decode it and allow the user to visit a website, dial a phone number, read a message, etc. diff --git a/docs/docs/components/radio-button.md b/docs/docs/components/radio-button.md index 7fb63d81f..15da7b7ef 100644 --- a/docs/docs/components/radio-button.md +++ b/docs/docs/components/radio-button.md @@ -1,7 +1,7 @@ --- title: Radio Button description: Radios buttons allow the user to select a single option from a group using a button-like control. -layout: component.njk +layout: component --- Radio buttons are designed to be used with [radio groups](/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. diff --git a/docs/docs/components/radio-group.md b/docs/docs/components/radio-group.md index 01ad37bb4..7021d9b47 100644 --- a/docs/docs/components/radio-group.md +++ b/docs/docs/components/radio-group.md @@ -1,7 +1,7 @@ --- title: Radio Group description: Radio groups are used to group multiple radios or radio buttons so they function as a single form control. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/radio.md b/docs/docs/components/radio.md index 316d1b1fc..3bb0ffa65 100644 --- a/docs/docs/components/radio.md +++ b/docs/docs/components/radio.md @@ -1,7 +1,7 @@ --- title: Radio description: Radios allow the user to select a single option from a group. -layout: component.njk +layout: component --- Radios are designed to be used with [radio groups](/components/radio-group). diff --git a/docs/docs/components/range.md b/docs/docs/components/range.md index a59e970e1..bfa043e70 100644 --- a/docs/docs/components/range.md +++ b/docs/docs/components/range.md @@ -1,7 +1,7 @@ --- title: Range description: Ranges allow the user to select a single value within a given range using a slider. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/rating.md b/docs/docs/components/rating.md index 540c26706..447d7f8aa 100644 --- a/docs/docs/components/rating.md +++ b/docs/docs/components/rating.md @@ -1,7 +1,7 @@ --- title: Rating description: Ratings give users a way to quickly view and provide feedback. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/relative-time.md b/docs/docs/components/relative-time.md index d40b3290a..ab5d5a4be 100644 --- a/docs/docs/components/relative-time.md +++ b/docs/docs/components/relative-time.md @@ -1,7 +1,7 @@ --- title: Relative Time description: Outputs a localized time phrase relative to the current date and time. -layout: component.njk +layout: component --- Localization is handled by the browser's [`Intl.RelativeTimeFormat` API](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/RelativeTimeFormat). No language packs are required. diff --git a/docs/docs/components/resize-observer.md b/docs/docs/components/resize-observer.md index f83c03c04..2fcd70bda 100644 --- a/docs/docs/components/resize-observer.md +++ b/docs/docs/components/resize-observer.md @@ -1,7 +1,7 @@ --- title: Resize Observer description: The Resize Observer component offers a thin, declarative interface to the ResizeObserver API. -layout: component.njk +layout: component --- The resize observer will report changes to the dimensions of the elements it wraps through the `wa-resize` event. When emitted, a collection of [`ResizeObserverEntry`](https://developer.mozilla.org/en-US/docs/Web/API/ResizeObserverEntry) objects will be attached to `event.detail` that contains the target element and information about its dimensions. diff --git a/docs/docs/components/select.md b/docs/docs/components/select.md index a216361bc..b05a78241 100644 --- a/docs/docs/components/select.md +++ b/docs/docs/components/select.md @@ -1,7 +1,7 @@ --- title: Select description: Selects allow you to choose items from a menu of predefined options. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/skeleton.md b/docs/docs/components/skeleton.md index 5db964120..741cb9e74 100644 --- a/docs/docs/components/skeleton.md +++ b/docs/docs/components/skeleton.md @@ -1,7 +1,7 @@ --- title: Skeleton description: Skeletons are used to provide a visual representation of where content will eventually be drawn. -layout: component.njk +layout: component --- These are simple containers for scaffolding layouts that mimic what users will see when content has finished loading. This prevents large areas of empty space during asynchronous operations. diff --git a/docs/docs/components/spinner.md b/docs/docs/components/spinner.md index 3b654a11e..97e432e0d 100644 --- a/docs/docs/components/spinner.md +++ b/docs/docs/components/spinner.md @@ -1,7 +1,7 @@ --- title: Spinner description: Spinners are used to show the progress of an indeterminate operation. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/split-panel.md b/docs/docs/components/split-panel.md index 36724a000..af5592c0a 100644 --- a/docs/docs/components/split-panel.md +++ b/docs/docs/components/split-panel.md @@ -1,7 +1,7 @@ --- title: Split Panel description: Split panels display two adjacent panels, allowing the user to reposition them. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/switch.md b/docs/docs/components/switch.md index e915c6250..4abb792da 100644 --- a/docs/docs/components/switch.md +++ b/docs/docs/components/switch.md @@ -1,7 +1,7 @@ --- title: Switch description: Switches allow the user to toggle an option on or off. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/tab-group.md b/docs/docs/components/tab-group.md index 88a4d6e9b..b9c5fa0b1 100644 --- a/docs/docs/components/tab-group.md +++ b/docs/docs/components/tab-group.md @@ -1,7 +1,7 @@ --- title: Tab Group description: Tab groups organize content into a container that shows one section at a time. -layout: component.njk +layout: component --- Tab groups make use of [tabs](/components/tab) and [tab panels](/components/tab-panel). Each tab must be slotted into the `nav` slot and its `panel` must refer to a tab panel of the same name. diff --git a/docs/docs/components/tab-panel.md b/docs/docs/components/tab-panel.md index 759663989..89560812d 100644 --- a/docs/docs/components/tab-panel.md +++ b/docs/docs/components/tab-panel.md @@ -1,7 +1,7 @@ --- title: Tab Panel description: Tab panels are used inside tab groups to display tabbed content. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/tab.md b/docs/docs/components/tab.md index 2d9996b96..befc249b5 100644 --- a/docs/docs/components/tab.md +++ b/docs/docs/components/tab.md @@ -1,7 +1,7 @@ --- title: Tab description: Tabs are used inside tab groups to represent and activate tab panels. -layout: component.njk +layout: component --- :::info diff --git a/docs/docs/components/tag.md b/docs/docs/components/tag.md index ee31b3b61..a64f99531 100644 --- a/docs/docs/components/tag.md +++ b/docs/docs/components/tag.md @@ -1,7 +1,7 @@ --- title: Tag description: Tags are used as labels to organize things or to indicate a selection. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/textarea.md b/docs/docs/components/textarea.md index 196cf20ca..08692760e 100644 --- a/docs/docs/components/textarea.md +++ b/docs/docs/components/textarea.md @@ -1,7 +1,7 @@ --- title: Textarea description: Textareas collect data from the user and allow multiple lines of text. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/tooltip.md b/docs/docs/components/tooltip.md index 245526f53..8225b3729 100644 --- a/docs/docs/components/tooltip.md +++ b/docs/docs/components/tooltip.md @@ -1,7 +1,7 @@ --- title: Tooltip description: Tooltips display additional information based on a specific action. -layout: component.njk +layout: component --- diff --git a/docs/docs/components/tree-item.md b/docs/docs/components/tree-item.md index cf77244ae..22ad3d07e 100644 --- a/docs/docs/components/tree-item.md +++ b/docs/docs/components/tree-item.md @@ -1,7 +1,7 @@ --- title: Tree Item description: A tree item serves as a hierarchical node that lives inside a tree. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/tree.md b/docs/docs/components/tree.md index 4de762cd4..a0006677f 100644 --- a/docs/docs/components/tree.md +++ b/docs/docs/components/tree.md @@ -1,7 +1,7 @@ --- title: Tree description: Trees allow you to display a hierarchical list of selectable tree items. Items with children can be expanded and collapsed as desired by the user. -layout: component.njk +layout: component --- ```html {.example} diff --git a/docs/docs/components/visually-hidden.md b/docs/docs/components/visually-hidden.md index bf9247d55..799620756 100644 --- a/docs/docs/components/visually-hidden.md +++ b/docs/docs/components/visually-hidden.md @@ -1,7 +1,7 @@ --- title: Visually Hidden description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen. -layout: component.njk +layout: component --- According to [The A11Y Project](https://www.a11yproject.com/posts/2013-01-11-how-to-hide-content/), "there are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead." diff --git a/docs/docs/customizing.md b/docs/docs/customizing.md index 48e6bbdea..096523f82 100644 --- a/docs/docs/customizing.md +++ b/docs/docs/customizing.md @@ -1,7 +1,7 @@ --- title: Customizing description: Learn how to customize Web Awesome through parts and custom properties. -layout: page.njk +layout: page --- Web Awesome components can be customized at a high level through design tokens. 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. diff --git a/docs/docs/experimental/form-validation.md b/docs/docs/experimental/form-validation.md index 4afbfeef5..8b06cb1d3 100644 --- a/docs/docs/experimental/form-validation.md +++ b/docs/docs/experimental/form-validation.md @@ -1,7 +1,7 @@ --- title: Form Control Validation description: TODO -layout: page.njk +layout: page --- Adding the `wa-valid` or `wa-invalid` class to a form control will change its appearance. This is useful for applying validation styles to server-rendered form controls. diff --git a/docs/docs/experimental/sandbox.md b/docs/docs/experimental/sandbox.md index 8205c0a5b..4361fd90e 100644 --- a/docs/docs/experimental/sandbox.md +++ b/docs/docs/experimental/sandbox.md @@ -1,7 +1,7 @@ --- title: Theming Sandbox description: TODO -layout: page.njk +layout: page --- ## Card diff --git a/docs/docs/experimental/style-guide.md b/docs/docs/experimental/style-guide.md index 5efbf2593..8b1f86196 100644 --- a/docs/docs/experimental/style-guide.md +++ b/docs/docs/experimental/style-guide.md @@ -1,7 +1,7 @@ --- title: Style Guide description: TODO -layout: page.njk +layout: page --- The styles shown below can be all yours by adding Web Awesome's applied stylesheet to your project. diff --git a/docs/docs/experimental/themer.md b/docs/docs/experimental/themer.md index 526b04abb..e49c3a823 100644 --- a/docs/docs/experimental/themer.md +++ b/docs/docs/experimental/themer.md @@ -1,7 +1,7 @@ --- meta: title: Themer -layout: page.njk +layout: page hasOutline: false --- diff --git a/docs/docs/installation.md b/docs/docs/installation.md index 98cc4bfcd..296c6cac6 100644 --- a/docs/docs/installation.md +++ b/docs/docs/installation.md @@ -1,7 +1,7 @@ --- title: Installation description: Choose the installation method that works best for you. -layout: page.njk +layout: page --- You can load Web Awesome via CDN or by installing it locally. If you're using a framework, make sure to check out the pages for [React](/frameworks/react), [Vue](/frameworks/vue), and [Angular](/frameworks/angular) for additional information. diff --git a/docs/docs/localization.md b/docs/docs/localization.md index f4cb00e24..047644209 100644 --- a/docs/docs/localization.md +++ b/docs/docs/localization.md @@ -1,7 +1,7 @@ --- title: Localization description: Discover how to localize Web Awesome with minimal effort. -layout: page.njk +layout: page --- Components can be localized by importing the appropriate translation file and setting the desired [`lang`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/lang) and/or [`dir`](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/dir) attributes on the `` element. Here's an example that renders Web Awesome components in Spanish. diff --git a/docs/docs/patterns/ecommerce.md b/docs/docs/patterns/ecommerce.md index 394bfa602..ad63b34e8 100644 --- a/docs/docs/patterns/ecommerce.md +++ b/docs/docs/patterns/ecommerce.md @@ -1,7 +1,7 @@ --- title: E-commerce description: TODO -layout: page.njk +layout: page --- TODO Page Description diff --git a/docs/docs/resources/accessibility.md b/docs/docs/resources/accessibility.md index 02857fd89..c9adc3d9d 100644 --- a/docs/docs/resources/accessibility.md +++ b/docs/docs/resources/accessibility.md @@ -1,7 +1,7 @@ --- title: Accessibility Commitment description: Web Awesome recognizes the need for all users to have undeterred access to the websites and applications that are created with it. -layout: page.njk +layout: page --- Web Awesome recognizes the need for all users, regardless of ability and device, to have undeterred access to the websites and applications that are created with it. This is an important goal of the project. diff --git a/docs/docs/resources/changelog.md b/docs/docs/resources/changelog.md index 9aa09e14b..57a6e64d7 100644 --- a/docs/docs/resources/changelog.md +++ b/docs/docs/resources/changelog.md @@ -1,7 +1,7 @@ --- title: Changelog description: Changes to each version of the project are documented here. -layout: page.njk +layout: page --- Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes in components with the Stable badge will not be accepted until the next major version. As such, all contributions must consider the project's roadmap and take this into consideration. Features that are deemed no longer necessary will be deprecated but not removed. @@ -49,1740 +49,6 @@ New versions of Web Awesome are released as-needed and generally occur when a cr setter: `waInput.value = 5.toString()` getter: `Number(waInput.value)` -## Next +--- -- Fixed a bug in the submenu controller that prevented submenus from rendering in RTL without explicitly setting `dir` on the parent menu item [#1992] - -## 12.15.1 - -- Fixed a bug in `` where if a click did not contain a `` it would show a console error. [#2009] -- Fixed a bug in `` that caused it not to recalculate it's position when going from being `display: none;` to its original display value. [#1942] -- Fixed a bug in `` where when it showed it would cause a layout shift. [#1967] -- Fixed a bug in `` that allowed unwanted text properties to leak in [#1947] -- Fixed a bug in `` classes [#1974] -- Fixed a bug in `` that may throw errors on `disconnectedCallback` in test environments [#1985] -- Fixed a bug in `` that would log a non-passive event listener warning [#2005] -- Fixed a bug in the submenu controller that allowed submenus to go offscreen and not be scrollable [#2001] -- Fixed a bug in `` that caused the tooltip position to be incorrect in some cases [#1979] - -## 2.15.0 - -- Added support for `contextElement` to `VirtualElements` in `` [#1874] -- Added the `sync` property to `` [#1935] -- Fixed a bug in `` that did not properly apply mutators to spritesheets [#1927] -- Fixed a bug in `.sl-scroll-lock` causing layout shifts [#1895] -- Fixed a bug in `` that caused the rating to not reset in some circumstances [#1877] -- Fixed a bug in `` that caused the menu to not close when rendered in a shadow root [#1878] -- Fixed a bug in `` that caused a new stacking context resulting in tooltips being clipped [#1709] -- Fixed a bug in `` that caused the scroll controls to toggle indefinitely when zoomed in Safari [#1839] -- Fixed a bug in the submenu controller that allowed two submenus to be open at the same time [#1880] -- Fixed a bug in `` that prevented the control from receiving focus when clicking over the clear button -- Fixed a bug in `` where when it showed it would create a layout shift. [#1967] - -## 2.14.0 - -- Added the Arabic translation [#1852] -- Added help text to `` [#1860] -- Added help text to `` [#1800] -- Fixed a bug in `` that caused HTML tags to be included in `getTextLabel()` -- Fixed a bug in `` that caused slides to not switch correctly [#1862] -- Refactored component styles to be consumed more efficiently [#1692] - -## 2.13.1 - -- Fixed a bug where the safe triangle was always visible when selecting nested `` elements [#1835] - -## 2.13.0 - -- Added the `hover-bridge` feature to `` to support better tooltip accessibility [#1734] -- Added the `loading` attribute and the `spinner` and `spinner__base` part to `` [#1700] -- Fixed files that did not have `.js` extensions. [#1770] -- Fixed a bug in `` when providing custom expand / collapse icons [#1922] -- Fixed `` not accounting for elements with hidden dialog controls like `