js/webawesome
1
0
Fork 0
mirror of https://github.com/shoelace-style/webawesome.git synced 2026-01-12 12:09:26 +00:00
Code Issues Packages Projects Releases Wiki Activity

Merge branch 'next' of https://github.com/shoelace-style/webawesome into next

Browse Source
This commit is contained in:
Lea Verou
2024-12-17 13:00:57 -05:00
parent 97c0470f13 47badda35c
commit e882102aff
28 changed files with 353 additions and 1217 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
docs/_includes/page-demo.njk
View File

@@ -16,7 +16,11 @@
</div>
</fieldset>
<wa-viewport-demo viewport="1000">
<iframe srcdoc="" id="page_slots_iframe" data-turbo="false" data-turbo-temporary></iframe>
<iframe srcdoc="" id="page_slots_iframe"></iframe>
</wa-viewport-demo>
</div>
<script type=module src="/assets/examples/page-demo/demo.js"></script>
<script type="module">
const cacheBust = new Date().toString()
import(`/assets/examples/page-demo/demo.js?${cacheBust}`)
</script>

61
docs/_layouts/component.njk
View File

@@ -37,6 +37,7 @@
{# Slots #}
{% if component.slots.length %}
<h2>Slots</h2>
<p>Learn more about <a href="/docs/usage/#slots">using slots</a>.</p>
<div class="table-scroll">
<table class="component-table">
@@ -67,6 +68,7 @@
{# Properties #}
{% if component.properties.length %}
<h2>Attributes & Properties</h2>
<p>Learn more about <a href="/docs/usage/#attributes-and-properties">attributes and properties</a>.</p>
<div class="table-scroll">
<table class="component-table">
@@ -113,6 +115,8 @@
{# Methods #}
{% if component.methods.length %}
<h2>Methods</h2>
<p>Learn more about <a href="/docs/usage/#methods">methods</a>.</p>
<div class="table-scroll">
<table class="component-table">
<thead>
@@ -143,34 +147,10 @@
</div>
{% endif %}
{# States #}
{% if component.states.length %}
<h2>States</h2>
<div class="table-scroll">
<table class="component-table">
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
<th class="table-selector">CSS selector</th>
</tr>
</thead>
<tbody>
{% for state in component.states %}
<tr>
<td class="table-name"><code>{{ state.name }}</code></td>
<td class="table-description">{{ state.description | inlineMarkdown | safe }}</td>
<td class="table-selector"><code>[data-state-{{ state.name }}]</code></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{# Events #}
{% if component.events.length %}
<h2>Events</h2>
<p>Learn more about <a href="/docs/usage/#events">events</a>.</p>
<div class="table-scroll">
<table class="component-table">
@@ -197,6 +177,7 @@
{# Custom Properties #}
{% if component.cssProperties.length %}
<h2>CSS custom properties</h2>
<p>Learn more about <a href="/docs/customizing/#custom-properties">CSS custom properties</a>.</p>
<div class="table-scroll">
<table class="component-table">
@@ -225,9 +206,37 @@
</div>
{% endif %}
{# Custom States #}
{% if component.cssStates.length %}
<h2>Custom States</h2>
<p>Learn more about <a href="/docs/customizing/#custom-states">custom states</a>.</p>
<div class="table-scroll">
<table class="component-table">
<thead>
<tr>
<th class="table-name">Name</th>
<th class="table-description">Description</th>
<th class="table-selector">CSS selector</th>
</tr>
</thead>
<tbody>
{% for state in component.cssStates %}
<tr>
<td class="table-name"><code>{{ state.name }}</code></td>
<td class="table-description">{{ state.description | inlineMarkdown | safe }}</td>
<td class="table-selector"><code>:state({{ state.name }})</code></td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{# CSS Parts #}
{% if component.cssParts.length %}
<h2>CSS parts</h2>
<p>Learn more about <a href="/docs/customizing/#css-parts">CSS parts</a>.</p>
<div class="table-scroll">
<table class="component-table">
@@ -253,7 +262,7 @@
{% if component.dependencies.length %}
<h2>Dependencies</h2>
<p>
This component automatically imports the following elements. Subdependencies, if any exist, will also be included in this list.
This component automatically imports the following elements. Sub-dependencies, if any exist, will also be included in this list.
</p>
<ul class="dependency-list">

11
docs/assets/examples/page-demo/demo.js
View File

@@ -1,5 +1,6 @@
await customElements.whenDefined('wa-checkbox');
let container = document.getElementById('page_slots_demo');
let fieldset = container.querySelector('fieldset');
let iframe = container.querySelector('iframe');
let stylesheets = Array.from(document.querySelectorAll("link[rel=stylesheet][href^='/dist/']"))
@@ -10,7 +11,7 @@ let includes = `${stylesheets}
<link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
function render() {
let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:is([data-wa-checked])'));
let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:state(checked)'));
let slotsHTML = slots
.map(slot => {
let name = slot.getAttribute('value');
@@ -40,11 +41,3 @@ function render() {
}
fieldset?.addEventListener('input', render);
render();
//
// TODO - fix Turbo caching. When this is removed, visiting the <wa-page> docs via Turbo will cause the <iframe srcdoc>
// to not render. Even with this, there are console errors when leaving the page.
//
// NOTE - the iframe already has `data-turbo="false"` and `data-turbo-temporary` on it.
//
document.body.setAttribute('data-turbo', 'false');

7
docs/assets/scripts/scroll.js
View File

@@ -1,13 +1,14 @@
// Smooth links
document.addEventListener('click', event => {
const link = event.target.closest('a');
const id = (link?.hash ?? '').substr(1);
if (!link || link.getAttribute('data-smooth-link') === 'off') {
return;
}
if (id) {
const id = (link.hash ?? '').substr(1);
// Only handle smooth scroll if there's a hash and the link points to the current page
if (id && link.pathname === window.location.pathname) {
const target = document.getElementById(id);
const headerHeight = document.querySelector('wa-page > header').clientHeight;

13
docs/docs/customizing.md
View File

@@ -67,6 +67,19 @@ Alternatively, you can set them inline directly on the element.
The custom properties exposed by each component can be found in the component's API documentation.
### Custom States
Components can expose custom states that allow you to style them based on their current condition using the `:state()` selector. Custom states provide a way to target specific component states that aren't covered by standard pseudo-classes like `:hover` or `:focus`.
Here's an example that styles a checkbox that's checked.
```css
wa-checkbox:state(checked) {
outline: dotted 2px tomato;
}
```
Custom states can be combined with CSS parts and custom properties to create sophisticated customizations. The custom states exposed by each component can be found in the component's API documentation under the "Custom States" section.
### CSS Parts
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()`.

12
docs/docs/form-controls.md
View File

@@ -165,12 +165,12 @@ Custom validation can be applied to any form control that supports the `setCusto
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.
- `data-wa-required` - the form control is required
- `data-wa-optional` - the form control is optional
- `data-wa-invalid` - the form control is invalid
- `data-wa-valid` - the form control is valid
- `data-wa-user-invalid` - the form control is invalid and the user has interacted with it
- `data-wa-user-valid` - the form control is valid and the user has interacted with it
- `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
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).

11
docs/docs/resources/changelog.md
View File

@@ -12,6 +12,17 @@ Components with the <wa-badge variant="warning" pill>Experimental</wa-badge> bad
During the alpha period, things might break! We take breaking changes very seriously, but sometimes they're necessary to make the final product that much better. We appreciate your patience!
:::
## Next
- Added `checked` and `disabled` custom states to `<wa-checkbox>` and `<wa-radio>`
- Added `disabled`, `expanded`, `indeterminate`, and `selected` custom states to `<wa-tree-item>`
- Renamed the `navigation-button--previous` and `navigation-button--next` parts to `navigation-button-previous` and `navigation-button-next` in `<wa-carousel>`
- Renamed the `scroll-button--start` and `scroll-button--end` parts to `scroll-button-start` and `scroll-button-end` in `<wa-tab-group>`
- Removed stateful CSS parts in favor of custom states
- `<wa-checkbox>`: `control--checked`, `control--indeterminate`
- `<wa-radio>`: `control--checked`
- `<wa-tree-item>`: `item--disabled`, `item--expanded`, `item--indeterminate`, `item--selected`
## 3.0.0-alpha.5
- Added the Finnish translation