Theme Builder
- {{ proBadge("This requires an active Web Awesome Pro subscription") }}
+ {{ proBadge({ description: "This requires an active Web Awesome Pro subscription", shrink: true }) }}
@@ -411,12 +416,12 @@
{% include "logo-simple.njk" %}
-
-
Web Awesome
- Beta
- Here be freshly made Awesome… and possible dragons
-
-
Version {{ package.version }}
+
Web Awesome
+
+ Version {{ package.version }}
+
+ Here be freshly launched Awesome and no wa-dragons
+
diff --git a/packages/webawesome/docs/docs/components/button.md b/packages/webawesome/docs/docs/components/button.md
index e56ae8d28..6f8f1f2f7 100644
--- a/packages/webawesome/docs/docs/components/button.md
+++ b/packages/webawesome/docs/docs/components/button.md
@@ -31,35 +31,35 @@ Use the `appearance` attribute to change the button's visual appearance.
Accent
- Filled + Outlined
+ Filled-OutlinedFilledOutlinedPlain
diff --git a/packages/webawesome/docs/docs/components/callout.md b/packages/webawesome/docs/docs/components/callout.md
index 234069fea..f37094a15 100644
--- a/packages/webawesome/docs/docs/components/callout.md
+++ b/packages/webawesome/docs/docs/components/callout.md
@@ -60,7 +60,7 @@ Set the `variant` attribute to change the callout's variant.
### Appearance
-Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`).
+Use the `appearance` attribute to change the callout's visual appearance (the default is `filled-outlined`).
```html {.example}
@@ -70,7 +70,7 @@ Use the `appearance` attribute to change the callout's visual appearance (the de
-
+
This callout is both filled and outlined
diff --git a/packages/webawesome/docs/docs/components/card.md b/packages/webawesome/docs/docs/components/card.md
index a79a4e368..5869aa2f6 100644
--- a/packages/webawesome/docs/docs/components/card.md
+++ b/packages/webawesome/docs/docs/components/card.md
@@ -137,7 +137,7 @@ Use the `appearance` attribute to change the card's visual appearance.
/>
Outlined (default)
- {% for appearance in ['outlined filled', 'plain', 'filled', 'accent'] -%}
+ {% for appearance in ['filled-outlined', 'plain', 'filled', 'accent'] -%}
-
+
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.
diff --git a/packages/webawesome/docs/docs/components/input.md b/packages/webawesome/docs/docs/components/input.md
index 867643839..a6ba85c6a 100644
--- a/packages/webawesome/docs/docs/components/input.md
+++ b/packages/webawesome/docs/docs/components/input.md
@@ -60,7 +60,9 @@ Add the `password-toggle` attribute to add a toggle button that will show the pa
Use the `appearance` attribute to change the input's visual appearance.
```html {.example}
-
+
+
+
```
### Disabled
diff --git a/packages/webawesome/docs/docs/components/select.md b/packages/webawesome/docs/docs/components/select.md
index 9bcb40e91..ff7135e8a 100644
--- a/packages/webawesome/docs/docs/components/select.md
+++ b/packages/webawesome/docs/docs/components/select.md
@@ -80,6 +80,18 @@ Use the `appearance` attribute to change the select's visual appearance.
Option 2Option 3
+
+
+ Option 1
+ Option 2
+ Option 3
+
+
+
+ Option 1
+ Option 2
+ Option 3
+
```
### Pill
diff --git a/packages/webawesome/docs/docs/components/tag.md b/packages/webawesome/docs/docs/components/tag.md
index 891e03cd5..29a949653 100644
--- a/packages/webawesome/docs/docs/components/tag.md
+++ b/packages/webawesome/docs/docs/components/tag.md
@@ -18,41 +18,40 @@ category: Feedback & Status
### Appearance
Use the `size` attribute to change a tag's visual appearance.
-The default appearance is `outlined filled`.
+The default appearance is `filled-outlined`.
```html {.example}
diff --git a/packages/webawesome/docs/docs/components/textarea.md b/packages/webawesome/docs/docs/components/textarea.md
index 352b0d2c8..731f95fb9 100644
--- a/packages/webawesome/docs/docs/components/textarea.md
+++ b/packages/webawesome/docs/docs/components/textarea.md
@@ -52,7 +52,9 @@ Use the `placeholder` attribute to add a placeholder.
Use the `appearance` attribute to change the textarea's visual appearance.
```html {.example}
-
+
+
+
```
### Disabled
diff --git a/packages/webawesome/docs/docs/customizing.md b/packages/webawesome/docs/docs/customizing.md
index 904523095..f569d0286 100644
--- a/packages/webawesome/docs/docs/customizing.md
+++ b/packages/webawesome/docs/docs/customizing.md
@@ -10,7 +10,7 @@ You can customize the look and feel of Web Awesome at a high level with themes.
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.
-To use a theme, simply add a link to the theme's stylesheet to the `` of your page. For example, you can add this snippet alongside th [installation code](/docs/#quick-start-autoloading-via-cdn) to use the *Awesome* theme:
+To use a theme, simply add a link to the theme's stylesheet to the `` of your page. For example, you can add this snippet alongside th [installation code](/docs/#quick-start-autoloading-via-cdn) to use the _Awesome_ theme:
```html
@@ -87,7 +87,7 @@ Custom states can be combined with CSS parts and custom properties to create sop
CSS parts offer further flexibility to customize individual components. The "parts" exposed by each component can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.
-Parts allow you to style *any* standard CSS property, not just those exposed through custom properties. Here's an example that modifies buttons with the `gradient-button` class.
+Parts allow you to style _any_ standard CSS property, not just those exposed through custom properties. Here's an example that modifies buttons with the `gradient-button` class.
```html {.example}
Gradient Button
@@ -96,7 +96,9 @@ Parts allow you to style *any* standard CSS property, not just those exposed thr
.gradient-button::part(base) {
background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
border: solid 1px var(--wa-color-purple-50);
- transition: transform 100ms, box-shadow 100ms;
+ transition:
+ transform 100ms,
+ box-shadow 100ms;
}
.gradient-button::part(base):hover {
@@ -131,6 +133,7 @@ Most (but not all) components expose parts. You can find them in each component'
If you're using [native styles](/docs/utilities/native), any custom styles added for a component should also target the corresponding native element. In general, the same styles you declare for components will work just the same to style their native counterparts.
For example, we can give `` the same custom styles as `` by using the custom properties required to style the component:
+
```html {.example}
Web Awesome checkbox
@@ -141,7 +144,7 @@ For example, we can give `` the same custom styles as `
wa-checkbox.pinkify,
- input[type="checkbox"].pinkify {
+ input[type='checkbox'].pinkify {
--background-color-checked: hotpink;
--border-color-checked: hotpink;
--border-width: 3px;
@@ -151,6 +154,7 @@ For example, we can give `` the same custom styles as `Web Awesome checkbox
@@ -161,12 +165,12 @@ Or, if using CSS parts, we can give both checkboxes the same custom styles using
```
-
## 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}
-
+
Here's a callout with appearance="outlined"
@@ -191,8 +195,8 @@ For example, we can give all outlined callouts a thick left border, regardless o
-```
\ No newline at end of file
+```
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 6549a8d07..b88fdfb12 100644
--- a/packages/webawesome/docs/docs/resources/changelog.md
+++ b/packages/webawesome/docs/docs/resources/changelog.md
@@ -12,10 +12,31 @@ Components with the Experimental badge sh
## Next
+- 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in the following elements [issue:1127]
+ - ``
+ - ``
+ - ``
+ - ``
+ - ``
+ - ``
+ - ``
+ - ``
- Added the Kazakh translation [pr:1496]
+- Added docs for code completion for VS Code and JetBrains [pr:1550]
+- Added back the missing `form-control-label` part to `` for consistency with other form controls [pr:1533]
- 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]
+- Fixed a bug in `` that prevented tooltips from showing when disconnecting and then reconnecting to the DOM [issue:1595]
+- Fixed a bug that caused the required `*` in form labels to have incorrect spacing in `` and `` [issue:1472]
+- Improved autofill styles in `` so they span the entire width of the visual input [issue:1439]
+- Modified `` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
## 3.0.0-beta.6
diff --git a/packages/webawesome/docs/docs/usage.md b/packages/webawesome/docs/docs/usage.md
index c7b96681f..b21fcc455 100644
--- a/packages/webawesome/docs/docs/usage.md
+++ b/packages/webawesome/docs/docs/usage.md
@@ -174,3 +174,54 @@ This time we see an empty string, which means the boolean attribute is now prese
:::info
To wait for multiple components to update, you can use `requestAnimationFrame()` instead of awaiting each element.
:::
+
+## Code Completion
+
+### VS Code
+
+Web Awesome ships with a file called `vscode.html-custom-data.json` that can be used to describe its custom elements to [Visual Studio Code](https://code.visualstudio.com/). This enables code completion for Web Awesome components (also known as “code hinting” or “IntelliSense”). To enable it, you need to tell VS Code where the file is.
+
+1. [Install Web Awesome locally](/docs/#installing-via-npm)
+2. If it doesn’t already exist, create a folder called `.vscode` at the root of your project
+3. If it doesn’t already exist, create a file inside that folder called `settings.json`
+4. Add the following to the file
+
+```json
+{
+ "html.customData": ["./node_modules/@awesome.me/webawesome/dist/vscode.html-custom-data.json"]
+}
+```
+
+If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take effect.
+
+If you are using WebAwesome through the [CDN](/docs/#quick-start-autoloading-via-cdn) you can manually [download the file]({% cdnUrl 'vscode.html-custom-data.json' %}]({% cdnUrl 'vscode.html-custom-data.json' %}) instead.
+
+### JetBrains IDEs
+If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Web Awesome from NPM, the editor will automatically detect the web-types.json file from the package and you should immediately see component information in your editor.
+
+If you are installing from the CDN, you can [download a local copy]({% cdnUrl 'web-types.json' %}) and add it to the root of your project. Be sure to add a reference to the web-types.json file in your package.json in order for your editor to properly detect it.
+
+```json
+{
+ ...
+ "web-types": "./web-types.json"
+ ...
+}
+```
+
+If you are using types from multiple projects, you can add an array of references.
+
+```json
+{
+ ...
+ "web-types": [
+ ...,
+ "./web-types.json"
+ ]
+ ...
+}
+```
+
+### Other Editors
+
+Most popular editors support custom code completion with a bit of configuration. Please [submit a feature request](https://github.com/shoelace-style/webawesome/issues/new/choose) for your editor of choice. PRs are also welcome!
diff --git a/packages/webawesome/docs/examples/themes/showcase.njk b/packages/webawesome/docs/examples/themes/showcase.njk
index 7b1675035..3bbd9d374 100644
--- a/packages/webawesome/docs/examples/themes/showcase.njk
+++ b/packages/webawesome/docs/examples/themes/showcase.njk
@@ -299,7 +299,7 @@ layout: false
diff --git a/packages/webawesome/docs/index.md b/packages/webawesome/docs/index.md
index baf06b778..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;
@@ -257,11 +238,22 @@ layout: page
{% if currentUser.hasPro %}
Thanks for being a Web Awesome Pro subscriber!
{% else %}
- 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.
-
-
- Pre-order WA Pro
-
+ {% if App.flags.stripeEnabled %}
+
+
Get More with Web Awesome Pro!
+
Unlock Pro-only themes, components, patterns, and great services like the Theme Builder.
+
+
+
+ Purchase Pro
+
+ {% else %}
+ 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.
+
+
+ Pre-order WA Pro
+
+ {% endif %}
{% endif %}
{% endraw %}
@@ -269,33 +261,18 @@ layout: page
-
-
-
-
-
-
-
Bigger and beta than ever
-
-
This beta is battle-tested and built to last, but if you see something, say something. Please report bugs or ask for help!
+
+
+
+
+
+
Get started
-
+
+
+
Check out our installation guide to start building with Web Awesome.
-
-
-
-
-
-
-
Get started
-
-
-
-
Check out our installation guide to start building with Web Awesome.