diff --git a/packages/webawesome/docs/503.md b/packages/webawesome/docs/503.md new file mode 100644 index 000000000..812b1e96b --- /dev/null +++ b/packages/webawesome/docs/503.md @@ -0,0 +1,312 @@ +--- +title: Web Awesome is Undergoing Maintenance +description: We're performing routine maintenance to keep things running smoothly. Check back soon! +layout: blank +permalink: 503.html +noindex: true +unlisted: true +--- + +{% block head %} + + + +{% endblock %} + + + + +
+ +
+
+ +
+
+
+ + +
+ + + + + +
+
+ +
+ diff --git a/packages/webawesome/docs/_includes/sidebar.njk b/packages/webawesome/docs/_includes/sidebar.njk index dd13f997b..2f4f960d0 100644 --- a/packages/webawesome/docs/_includes/sidebar.njk +++ b/packages/webawesome/docs/_includes/sidebar.njk @@ -410,12 +410,12 @@
{% include "logo-simple.njk" %} - - + +
diff --git a/packages/webawesome/docs/assets/styles/docs.css b/packages/webawesome/docs/assets/styles/docs.css index 938150bd7..1c727da5a 100644 --- a/packages/webawesome/docs/assets/styles/docs.css +++ b/packages/webawesome/docs/assets/styles/docs.css @@ -205,6 +205,12 @@ wa-page > header { } } } + + #version-icon-info { + --secondary-opacity: 1; + --secondary-color: var(--wa-brand-orange); + padding-inline: var(--wa-space-xs); + } } wa-button.delete { diff --git a/packages/webawesome/docs/assets/styles/utils.css b/packages/webawesome/docs/assets/styles/utils.css index 52655e13d..b395fed00 100644 --- a/packages/webawesome/docs/assets/styles/utils.css +++ b/packages/webawesome/docs/assets/styles/utils.css @@ -111,7 +111,49 @@ } /* #endregion */ - /* #region funsies */ + /* #region funsies + cosmetics */ + + /* grid background */ + .background-grid { + --grid-spacing: var(--wa-space-2xl); + --grid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 90%); + --grid-line-width: var(--wa-border-width-s); + --subgrid-spacing: calc(var(--grid-spacing) / 2); + --subgrid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 95%); + --subgrid-line-width: var(--wa-border-width-s); + + background-image: + /* main grid - vertical lines */ + linear-gradient(to right, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width)), + /* main grid - horizontal lines */ + linear-gradient(to bottom, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width)), + /* sub-grid - vertical lines (offset by half the main grid spacing) */ + linear-gradient( + to right, + var(--subgrid-line-color) var(--subgrid-line-width), + transparent var(--subgrid-line-width) + ), + /* sub-grid - horizontal lines (offset by half the main grid spacing) */ + linear-gradient( + to bottom, + var(--subgrid-line-color) var(--subgrid-line-width), + transparent var(--subgrid-line-width) + ); + + background-size: + var(--grid-spacing) var(--grid-spacing), + var(--grid-spacing) var(--grid-spacing), + var(--subgrid-spacing) var(--subgrid-spacing), + var(--subgrid-spacing) var(--subgrid-spacing); + + background-position: + 0 0, + 0 0, + calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2), + calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2); + } + /* #endregion */ + /* buttons with icon toggle on hover */ wa-button .icon-hover { display: none; diff --git a/packages/webawesome/docs/docs/form-controls.md b/packages/webawesome/docs/docs/form-controls.md index 0670b6582..dbc4320ba 100644 --- a/packages/webawesome/docs/docs/form-controls.md +++ b/packages/webawesome/docs/docs/form-controls.md @@ -52,7 +52,7 @@ To make a field required, use the `required` attribute. Required fields will aut customElements.whenDefined('wa-input'), customElements.whenDefined('wa-option'), customElements.whenDefined('wa-select'), - customElements.whenDefined('wa-textarea') + customElements.whenDefined('wa-textarea'), ]).then(() => { form.addEventListener('submit', event => { event.preventDefault(); @@ -78,10 +78,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/ const form = document.querySelector('.input-validation-pattern'); // Wait for controls to be defined before attaching form listeners - await Promise.all([ - customElements.whenDefined('wa-button'), - customElements.whenDefined('wa-input') - ]).then(() => { + await Promise.all([customElements.whenDefined('wa-button'), customElements.whenDefined('wa-input')]).then(() => { form.addEventListener('submit', event => { event.preventDefault(); alert('All fields are valid!'); @@ -108,10 +105,7 @@ Some input types will automatically trigger constraints, such as `email` and `ur const form = document.querySelector('.input-validation-type'); // Wait for controls to be defined before attaching form listeners - await Promise.all([ - customElements.whenDefined('wa-button'), - customElements.whenDefined('wa-input') - ]).then(() => { + await Promise.all([customElements.whenDefined('wa-button'), customElements.whenDefined('wa-input')]).then(() => { form.addEventListener('submit', event => { event.preventDefault(); alert('All fields are valid!'); @@ -137,10 +131,7 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa const input = form.querySelector('wa-input'); // Wait for controls to be defined before attaching form listeners - await Promise.all([ - customElements.whenDefined('wa-button'), - customElements.whenDefined('wa-input') - ]).then(() => { + await Promise.all([customElements.whenDefined('wa-button'), customElements.whenDefined('wa-input')]).then(() => { form.addEventListener('submit', event => { event.preventDefault(); alert('All fields are valid!'); @@ -163,17 +154,15 @@ Custom validation can be applied to any form control that supports the `setCusto ## Custom Validation Styles -Due to the many ways form controls are used, Web Awesome doesn't provide out of the box validation styles for form controls as part of its default theme. Instead, the following attributes will be applied to reflect a control's validity as users interact with it. You can use them to create custom styles for any of the validation states you're interested in. +Due to the many ways form controls are used, Web Awesome doesn't provide out of the box validation styles for form controls as part of its default theme. -- `required` - the form control is required -- `optional` - the form control is optional -- `invalid` - the form control is invalid -- `valid` - the form control is valid -- `user-invalid` - the form control is invalid and the user has interacted with it -- `user-valid` - the form control is valid and the user has interacted with it +Instead, the following [custom states](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states) will be applied to reflect a control's validity as users interact with it. You can use them to create custom styles for any of the validation states you're interested in. -These attributes map to the browser's built-in pseudo classes for validation: [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required), [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/:optional), [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid), [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid), [`:user-invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid), and [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid). +- `:state(required)` - the form control is required +- `:state(optional)` - the form control is optional +- `:state(invalid)` - the form control is invalid +- `:state(valid)` - the form control is valid +- `:state(user-invalid)` - the form control is invalid and the user has interacted with it +- `:state(user-valid)` - the form control is valid and the user has interacted with it -:::info -In the future, data attribute selectors will be replaced with custom states such as `:state(valid)` and `:state(invalid)`. Web Awesome is using data attributes as a workaround until browsers fully support [custom states](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states). -::: \ No newline at end of file +These custom states work alongside the browser's built-in pseudo classes for validation: [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required), [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/:optional), [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid), [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid), [`:user-invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid), and [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid). diff --git a/packages/webawesome/docs/docs/index.md b/packages/webawesome/docs/docs/index.md index 525ee1f1b..498a7f331 100644 --- a/packages/webawesome/docs/docs/index.md +++ b/packages/webawesome/docs/docs/index.md @@ -4,7 +4,7 @@ description: Choose the installation method that works best for you. layout: page-outline --- -Welcome to Web Awesome beta! [Learn more](https://webawesome.com/) about this project and [how to contribute to it](https://webawesome.com/docs/resources/contributing). +Welcome to Web Awesome! [Learn more](https://webawesome.com/) about this project and [how to contribute to it](https://webawesome.com/docs/resources/contributing). - [Report a bug](https://github.com/shoelace-style/webawesome/issues) - [Get help / ask a question](https://github.com/shoelace-style/webawesome/discussions) @@ -212,4 +212,4 @@ declare module 'react' { :::details React 18 and below React 18 and below have [poor support](https://custom-elements-everywhere.com/#react) for custom elements. For legacy versions of React, we provide React wrappers for every component. You can find the import instructions by selecting the _React_ tab from the _Importing_ section of each component's documentation. -::: \ No newline at end of file +::: diff --git a/packages/webawesome/docs/docs/resources/changelog.md b/packages/webawesome/docs/docs/resources/changelog.md index edfb5f421..99ad9a2ec 100644 --- a/packages/webawesome/docs/docs/resources/changelog.md +++ b/packages/webawesome/docs/docs/resources/changelog.md @@ -18,9 +18,12 @@ Components with the Experimental badge sh - Fixed a bug in `` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377] - Fixed focus outline styles in `` and native `
` [issue:1456] - Fixed focus outline styles in ``, ``, and `` [issue:1484] +- Fixed a bug in `` where its value would revert to `""` when checked / unchecked [pr:1547] - Fixed a bug that caused icon button labels to not render in frameworks [issue:1542] - Fixed a bug in `` that caused the `name` property not to reflect [pr:1538] - Fixed a bug in `` and `` that prevented focus from being set on the dialog/drawer when opened [issue:1302] +- Fixed an overflow style that was causing tab group content to be unnecessarily truncated [issue:1401] +- Fixed a bug in `` that caused icon buttons to render when non-text nodes were slotted in [issue:1475] ## 3.0.0-beta.6 @@ -464,4 +467,4 @@ Many of these changes and improvements were the direct result of feedback from u
-Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions) +Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions) \ No newline at end of file diff --git a/packages/webawesome/docs/index.md b/packages/webawesome/docs/index.md index e85a3473f..560e134ea 100644 --- a/packages/webawesome/docs/index.md +++ b/packages/webawesome/docs/index.md @@ -182,25 +182,6 @@ layout: page } } } - .beta-notice { - display: flex; - flex-wrap: wrap; - gap: 1rem; - & > * { - flex-basis: calc(((30ch * 2 + 1rem) - 100%) * 999); - } - & > * { - flex-grow: 2; - } - & > * + * { - flex-grow: 1; - } - & wa-callout, - & wa-button::part(base) { - height: 100%; - width: 100%; - } - } wa-button.tile::part(base) { border-color: var(--wa-color-surface-border); border-radius: 0.75rem; @@ -280,33 +261,18 @@ layout: page
-
-
- - +

What's Web Awesome?

diff --git a/packages/webawesome/scripts/build.js b/packages/webawesome/scripts/build.js index 8add5c444..f9c6112ef 100644 --- a/packages/webawesome/scripts/build.js +++ b/packages/webawesome/scripts/build.js @@ -18,6 +18,7 @@ import { getCdnDir, getDistDir, getDocsDir, getRootDir, getSiteDir } from './uti const __dirname = dirname(fileURLToPath(import.meta.url)); +const currentYear = new Date().getFullYear(); const spinner = ora({ text: 'Web Awesome', color: 'cyan' }).start(); const getPackageData = async () => JSON.parse(await readFile(join(getRootDir(), 'package.json'), 'utf-8')); const getVersion = async () => JSON.stringify((await getPackageData()).version.toString()); @@ -225,6 +226,9 @@ export async function build(options = {}) { bundle: true, splitting: true, minify: false, + banner: { + js: `/*! Copyright ${currentYear} Fonticons, Inc. - https://webawesome.com/license */`, + }, plugins: [replace({ __WEBAWESOME_VERSION__: await getVersion() })], loader: { '.css': 'text', diff --git a/packages/webawesome/src/components/button/button.ts b/packages/webawesome/src/components/button/button.ts index 4fa26436b..50e3cb3a5 100644 --- a/packages/webawesome/src/components/button/button.ts +++ b/packages/webawesome/src/components/button/button.ts @@ -176,22 +176,32 @@ export default class WaButton extends WebAwesomeFormAssociatedElement { const nodes = this.labelSlot.assignedNodes({ flatten: true }); let hasIconLabel = false; let hasIcon = false; - let text = ''; + let hasText = false; + let hasOtherElements = false; - // If there's only an icon and no text, it's an icon button + // Check all slotted nodes [...nodes].forEach(node => { - if (node.nodeType === Node.ELEMENT_NODE && (node as WaIcon).localName === 'wa-icon') { - hasIcon = true; - if (!hasIconLabel) hasIconLabel = (node as WaIcon).label !== undefined; - } + if (node.nodeType === Node.ELEMENT_NODE) { + const element = node as HTMLElement; - // Concatenate text nodes - if (node.nodeType === Node.TEXT_NODE) { - text += node.textContent; + if (element.localName === 'wa-icon') { + hasIcon = true; + if (!hasIconLabel) hasIconLabel = (element as WaIcon).label !== undefined; + } else { + // Any other element type means it's not an icon button + hasOtherElements = true; + } + } else if (node.nodeType === Node.TEXT_NODE) { + // Check if text node has actual content + const text = node.textContent?.trim() || ''; + if (text.length > 0) { + hasText = true; + } } }); - this.isIconButton = text.trim() === '' && hasIcon; + // It's only an icon button if there's an icon and nothing else + this.isIconButton = hasIcon && !hasText && !hasOtherElements; if (this.isIconButton && !hasIconLabel) { console.warn( diff --git a/packages/webawesome/src/components/checkbox/checkbox.test.ts b/packages/webawesome/src/components/checkbox/checkbox.test.ts index fc607b68b..df3c90c07 100644 --- a/packages/webawesome/src/components/checkbox/checkbox.test.ts +++ b/packages/webawesome/src/components/checkbox/checkbox.test.ts @@ -21,7 +21,7 @@ describe('', () => { const el = await fixture(html` `); expect(el.name).to.equal(''); - expect(el.value).to.equal('on'); + expect(el.value).to.equal(null); expect(el.title).to.equal(''); expect(el.disabled).to.be.false; expect(el.required).to.be.false; @@ -134,7 +134,7 @@ describe('', () => { await checkbox.updateComplete; expect(checkbox.checked).to.equal(false); - expect(checkbox.value).to.equal('myvalue'); + expect(checkbox.value).to.equal(null); expect(new FormData(form).get('test')).to.equal(null); checkbox.checked = true; diff --git a/packages/webawesome/src/components/checkbox/checkbox.ts b/packages/webawesome/src/components/checkbox/checkbox.ts index 7b6ae9e43..1f1decf62 100644 --- a/packages/webawesome/src/components/checkbox/checkbox.ts +++ b/packages/webawesome/src/components/checkbox/checkbox.ts @@ -80,7 +80,8 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement { /** The value of the checkbox, submitted as a name/value pair with form data. */ get value(): string | null { - return this._value ?? 'on'; + const val = this._value || 'on'; + return this.checked ? val : null; } @property({ reflect: true }) diff --git a/packages/webawesome/src/components/radio/radio.ts b/packages/webawesome/src/components/radio/radio.ts index 6b79faa21..3898b3b20 100644 --- a/packages/webawesome/src/components/radio/radio.ts +++ b/packages/webawesome/src/components/radio/radio.ts @@ -47,7 +47,7 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement { /** The radio's value. When selected, the radio group will receive this value. */ @property({ reflect: true }) value: string; - /** The radio's value. When selected, the radio group will receive this value. */ + /** The radio's visual appearance. */ @property({ reflect: true }) appearance: 'default' | 'button' = 'default'; /** diff --git a/packages/webawesome/src/components/tab-group/tab-group.css b/packages/webawesome/src/components/tab-group/tab-group.css index 187b03d04..6606fa163 100644 --- a/packages/webawesome/src/components/tab-group/tab-group.css +++ b/packages/webawesome/src/components/tab-group/tab-group.css @@ -27,7 +27,6 @@ .body { display: block; - overflow: auto; } .scroll-button {