mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-14 13:09:14 +00:00
Compare commits
2 Commits
fix-454
...
kj/renamin
| Author | SHA1 | Date | |
|---|---|---|---|
|
ed10f36b28 | ||
|
|
a13be817db |
2
.github/workflows/client_tests.js.yml
vendored
2
.github/workflows/client_tests.js.yml
vendored
@@ -31,7 +31,7 @@ jobs:
|
||||
- name: Lint
|
||||
run: npm run prettier
|
||||
- name: Build
|
||||
run: npm run build:alpha
|
||||
run: npm run build
|
||||
- name: Install Playwright
|
||||
run: npx playwright install --with-deps
|
||||
- name: Run CSR tests
|
||||
|
||||
2
.github/workflows/ssr_tests.js.yml
vendored
2
.github/workflows/ssr_tests.js.yml
vendored
@@ -30,7 +30,7 @@ jobs:
|
||||
run: npm run prettier
|
||||
|
||||
- name: Build
|
||||
run: npm run build:alpha
|
||||
run: npm run build
|
||||
|
||||
- name: Install Playwright
|
||||
run: npx playwright install --with-deps
|
||||
|
||||
@@ -43,14 +43,20 @@ export default function (eleventyConfig) {
|
||||
eleventyConfig.addFilter(name, filters[name]);
|
||||
}
|
||||
|
||||
eleventyConfig.addFilter('sort', (arr, key = 'data.title') => {
|
||||
key = key.split('.');
|
||||
return arr.sort((a, b) => {
|
||||
let aVal = key.reduce((obj, i) => obj?.[i], a);
|
||||
let bVal = key.reduce((obj, i) => obj?.[i], b);
|
||||
return aVal.localeCompare(bVal);
|
||||
});
|
||||
});
|
||||
|
||||
// Shortcodes - {% shortCode arg1, arg2 %}
|
||||
eleventyConfig.addShortcode('cdnUrl', location => {
|
||||
return `https://early.webawesome.com/webawesome@${packageData.version}/dist/` + location.replace(/^\//, '');
|
||||
});
|
||||
|
||||
// Paired shortcodes - {% shortCode %}content{% endShortCode %}
|
||||
eleventyConfig.addPairedShortcode('markdown', content => markdown.render(content || ''));
|
||||
|
||||
// Helpers
|
||||
|
||||
// Remove elements that have [data-alpha="remove"]
|
||||
|
||||
@@ -23,7 +23,8 @@
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/applied.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/color/standard.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css" />
|
||||
|
||||
{# Docs styles #}
|
||||
|
||||
@@ -32,7 +32,7 @@
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" href="/dist/styles/themes/default.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/applied.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css" />
|
||||
|
||||
@@ -94,8 +94,8 @@
|
||||
</wa-button>
|
||||
|
||||
<a href="/" aria-label="Web Awesome">
|
||||
<span class="wa-desktop-only">{% include "logo.njk" %}</span>
|
||||
<span class="wa-mobile-only">{% include "logo-simple.njk" %}</span>
|
||||
<span class="only-desktop">{% include "logo.njk" %}</span>
|
||||
<span class="only-mobile">{% include "logo-simple.njk" %}</span>
|
||||
</a>
|
||||
<small id="version-number" class="only-desktop">{{ package.version }}</small>
|
||||
<wa-badge variant="warning" appearance="filled" class="only-desktop">Alpha</wa-badge>
|
||||
@@ -120,7 +120,7 @@
|
||||
{# Sidebar #}
|
||||
{% if hasSidebar %}
|
||||
{# Mobile selectors #}
|
||||
<div class="wa-mobile-only" slot="navigation-header">
|
||||
<div class="only-mobile" slot="navigation-header">
|
||||
<div style="display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));">
|
||||
{% include "preset-theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
|
||||
@@ -1,12 +0,0 @@
|
||||
{# Cards for pages listed by category #}
|
||||
|
||||
<section id="grid" class="index-grid">
|
||||
{% for category, pages in allPages | groupByTags(categories) -%}
|
||||
<h2 class="index-category">{{ category | getCategoryTitle(categories) }}</h2>
|
||||
{%- for page in pages -%}
|
||||
{%- if not page.data.parent or listChildren -%}
|
||||
{% include "page-card.njk" %}
|
||||
{%- endif -%}
|
||||
{%- endfor -%}
|
||||
{%- endfor -%}
|
||||
</section>
|
||||
@@ -1,10 +0,0 @@
|
||||
{%- if not page.data.unlisted -%}
|
||||
<a href="{{ page.url }}"{{ page.data.keywords | attr('data-keywords') }}>
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/" + (page.data.icon or "thumbnail-placeholder") + ".njk" %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endif %}
|
||||
@@ -1,18 +1,17 @@
|
||||
{# Preset theme selector #}
|
||||
<wa-dropdown class="preset-theme-selector">
|
||||
<wa-dropdown id="preset-theme-selector">
|
||||
<wa-button slot="trigger" appearance="filled" size="small" pill caret>
|
||||
<wa-icon slot="prefix" name="paintbrush" variant="regular"></wa-icon>
|
||||
<span class="preset-theme-selector__text">Default</span>
|
||||
<span id="preset-theme-selector__text">Default</span>
|
||||
</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item type="checkbox" value="default">Default</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="classic">Classic</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="awesome">Awesome</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="active">Active</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="brutalist">Brutalist</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="fa">Font Awesome</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="active">Active</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="brutalist">Brutalism</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="glassy">Glassy</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="mellow">Mellow</wa-menu-item>
|
||||
<wa-menu-item type="checkbox" value="migration">Migration</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="migration">Migration</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="playful">Playful</wa-menu-item>
|
||||
<wa-menu-item data-alpha="remove" type="checkbox" value="premium">Premium</wa-menu-item>
|
||||
</wa-menu>
|
||||
|
||||
@@ -1,22 +0,0 @@
|
||||
{# Some collections (like "patterns") will not have any items in the alpha build for example. So this checks to make sure the collection exists. #}
|
||||
{% if collections[tag] -%}
|
||||
<wa-details {{ (('/' + tag + '/') in page.url) | attr('open') }}>
|
||||
<h2 slot="summary">
|
||||
{% set groupUrl %}/docs/{{ tag }}/{% endset %}
|
||||
{% if groupUrl | getCollectionItemFromUrl %}
|
||||
<a href="{{ groupUrl }}" title="Overview">{{ title or (tag | capitalize) }}
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
{% else %}
|
||||
{{ title or (tag | capitalize) }}
|
||||
{% endif %}
|
||||
</h2>
|
||||
<ul>
|
||||
{% for page in collections[tag] | sort %}
|
||||
{% if not page.data.parent -%}
|
||||
{% include 'sidebar-link.njk' %}
|
||||
{%- endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</wa-details>
|
||||
{%- endif %}
|
||||
@@ -1,16 +0,0 @@
|
||||
{% if not (isAlpha and page.data.noAlpha) and page.fileSlug != tag and not page.data.unlisted -%}
|
||||
<li>
|
||||
<a href="/docs/{{ tag }}/{{ page.fileSlug }}">{{ page.data.title }}</a>
|
||||
{% if page.data.status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
|
||||
{% if page.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
|
||||
{% set children = page.data.children %}
|
||||
{% if children.length > 0 %}
|
||||
<ul>
|
||||
{% for page in children %}
|
||||
{% include 'sidebar-link.njk' %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
{% endif %}
|
||||
</li>
|
||||
{%- endif %}
|
||||
@@ -19,13 +19,132 @@
|
||||
<li><a href="/docs/resources/changelog">Changelog</a></li>
|
||||
</ul>
|
||||
|
||||
{% for tag, title in {
|
||||
'components': 'Components',
|
||||
'native': 'Native Styles',
|
||||
'utilities': 'Style Utilities',
|
||||
'layout': 'Layout',
|
||||
'patterns': 'Patterns',
|
||||
'theming': 'Theming'
|
||||
} %}
|
||||
{% include 'sidebar-group.njk' %}
|
||||
{% endfor %}
|
||||
{# Components #}
|
||||
<wa-details{{ ' open' if '/components/' in page.url }}>
|
||||
<h2 slot=summary>
|
||||
<a href="/docs/components/" title="Overview">Components
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
|
||||
<ul>
|
||||
{% for component in collections.component | sort %}
|
||||
{% if not component.data.parent and not (isAlpha and component.data.isAlpha) %}
|
||||
<li>
|
||||
<a href="/docs/components/{{ component.fileSlug }}">{{ component.data.title }}</a>
|
||||
|
||||
{% if components[component.fileSlug].status == 'experimental' %}<wa-icon name="flask"></wa-icon>{% endif %}
|
||||
{% if component.data.isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
<ul>
|
||||
{% for child in collections.component | sort %}
|
||||
{% if child.data.parent == component.fileSlug and not (isAlpha and child.data.isAlpha) %}
|
||||
<li>
|
||||
<a href="/docs/components/{{ child.fileSlug }}">{{ child.data.title }}</a>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</li>
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</wa-details>
|
||||
|
||||
<wa-details{{ ' open' if '/natives/' in page.url }}>
|
||||
<h2 slot=summary>
|
||||
<a href="/docs/natives/" title="Overview">Natives
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
<ul>
|
||||
{% for page in collections.natives | sort %}
|
||||
<li>
|
||||
<a href="/docs/natives/{{ page.fileSlug }}">{{ page.data.title }}</a>
|
||||
</li>
|
||||
{% endfor %}
|
||||
</ul>
|
||||
</wa-details>
|
||||
|
||||
{# Layout #}
|
||||
{% if not isAlpha %}
|
||||
<h2>
|
||||
<a href="/docs/layout" title="Overview">Layout
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/components/page">Page</a></li>
|
||||
<li><a href="/docs/layout/cluster">Cluster</a></li>
|
||||
<li><a href="/docs/layout/flank">Flank</a></li>
|
||||
<li><a href="/docs/layout/frame">Frame</a></li>
|
||||
<li><a href="/docs/layout/grid">Grid</a></li>
|
||||
<li><a href="/docs/layout/split">Split</a></li>
|
||||
<li><a href="/docs/layout/stack">Stack</a></li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{# Patterns #}
|
||||
{% if not isAlpha %}
|
||||
<h2>Patterns</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/patterns/app">Web App</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce">E-commerce</a>
|
||||
<ul>
|
||||
<li><a href="/docs/patterns/ecommerce-product-review">Product Reviews</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-product-list">Product Lists</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-category-preview">Category Previews</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-shopping-cart">Shopping Carts</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-category-filter">Category Filters</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-product-detail">Product Detail</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-order-summary">Order Summaries</a></li>
|
||||
<li><a href="/docs/patterns/ecommerce-order-history">Order History</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><a href="/docs/patterns/blog">Blog</a></li>
|
||||
<li><a href="/docs/patterns/news">News</a></li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
{# Theming #}
|
||||
<h2>
|
||||
<a href="/docs/theming" title="Overview">Theming
|
||||
<wa-icon name="grid-2"></wa-icon>
|
||||
</a>
|
||||
</h2>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/theming/color">Color</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/typography">Typography</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/space">Space</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/borders">Borders</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/focus">Focus</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/shadows">Shadows</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/transitions">Transitions</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/theming/component-groups">Component Groups</a>
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
{# Style Utilities #}
|
||||
{% if not isAlpha %}
|
||||
<h2>Style Utilities</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/style-utilities/align-items">Align Items</a></li>
|
||||
<li><a href="/docs/style-utilities/border-radius">Border Radius</a></li>
|
||||
<li><a href="/docs/style-utilities/gap">Gap</a></li>
|
||||
<li><a href="/docs/style-utilities/text">Text</a></li>
|
||||
</ul>
|
||||
{% endif %}
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
{% if since -%}
|
||||
<wa-badge variant="neutral">Since {{ since }}</wa-badge>
|
||||
{%- endif %}
|
||||
|
||||
{% if status -%}
|
||||
{%- if status == "wip" %}
|
||||
<wa-badge variant="danger">
|
||||
<wa-icon name="pickaxe"></wa-icon>
|
||||
Work In Progress
|
||||
</wa-badge>
|
||||
{%- elif status == "experimental" -%}
|
||||
<wa-badge variant="warning">
|
||||
<wa-icon name="flask"></wa-icon>
|
||||
Experimental
|
||||
</wa-badge>
|
||||
{%- elif status == "stable" -%}
|
||||
<wa-badge variant="brand">Stable</wa-badge>
|
||||
{%- else %}
|
||||
<wa-badge>{{ status}}</wa-badge>
|
||||
{%- endif %}
|
||||
{%- endif %}
|
||||
|
||||
{% if isPro -%}
|
||||
<wa-badge class="pro">PRO</wa-badge>
|
||||
{%- endif %}
|
||||
|
Before Width: | Height: | Size: 337 B After Width: | Height: | Size: 337 B |
@@ -21,7 +21,7 @@
|
||||
{# Web Awesome #}
|
||||
<script type="module" src="/dist/webawesome.ssr-loader.js"></script>
|
||||
<link rel="stylesheet" id="theme-stylesheet" />
|
||||
<link rel="stylesheet" href="/dist/styles/webawesome.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/applied.css" />
|
||||
<link id="color-stylesheet" rel="stylesheet" href="/dist/styles/utilities.css" />
|
||||
<link rel="stylesheet" href="/dist/styles/forms.css" />
|
||||
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{# Component header #}
|
||||
{% block beforeContent %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<div class="block-info">
|
||||
{% set snippets = (elements or element or snippets or snippet) | dict %}
|
||||
|
||||
{% for snippet, link in snippets %}
|
||||
{% if snippet %}
|
||||
<code class="class">
|
||||
{%- if link -%}
|
||||
<a href="{{ link }}">{{ snippet }}</a>
|
||||
{%- else -%}
|
||||
{{ snippet }}
|
||||
{%- endif-%}
|
||||
</code>
|
||||
{%- endif %}
|
||||
{% endfor %}
|
||||
|
||||
{% include '../_includes/status.njk' %}
|
||||
</div>
|
||||
{% if description %}
|
||||
<p class="summary">
|
||||
{{ description | inlineMarkdown | safe }}
|
||||
</p>
|
||||
{% endif %}
|
||||
{% block notes %}{% endblock %}
|
||||
{% endblock %}
|
||||
|
||||
{# Content #}
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
@@ -1,17 +1,42 @@
|
||||
{% extends '../_layouts/block.njk' %}
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
{% set component = components[page.fileSlug] %}
|
||||
{% set description = component.summary %}
|
||||
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{# Component header #}
|
||||
{% block notes %}
|
||||
{% if native %}
|
||||
{% block beforeContent %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<div class="component-info">
|
||||
<code class="tag"><{{ component.tagName }}></code>
|
||||
<wa-badge variant="neutral">Since {{ component.since }}</wa-badge>
|
||||
<wa-badge
|
||||
{% if component.status == 'stable' %}variant="brand"{% endif %}
|
||||
{% if component.status == 'experimental' %}variant="warning"{% endif %}
|
||||
>
|
||||
{{ component.status }}
|
||||
</wa-badge>
|
||||
|
||||
{% if isPro %}<wa-badge class="pro">PRO</wa-badge>{% endif %}
|
||||
</div>
|
||||
<p class="summary">
|
||||
{{ component.summary | inlineMarkdown | safe }}
|
||||
</p>
|
||||
{% if natives %}
|
||||
<wa-callout variant="success">
|
||||
<wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
|
||||
Just want the styles?
|
||||
Check out the <a href="/docs/native/{{ native }}/">{{ ('/docs/native/' + native + '/') | getTitleFromUrl }} native styles</a>!
|
||||
Check out <a href="/docs/natives/{{ natives }}/">{{ ('/docs/natives/' + natives + '/') | getTitleFromUrl }} natives</a>!
|
||||
</wa-callout>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{# Content #}
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
|
||||
{# Component API #}
|
||||
{% block afterContent %}
|
||||
{# Slots #}
|
||||
|
||||
@@ -1,23 +1,54 @@
|
||||
{% extends '../_layouts/block.njk' %}
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
|
||||
{% extends '../_includes/base.njk' %}
|
||||
|
||||
{# Component header #}
|
||||
{% block notes %}
|
||||
{% block beforeContent %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
<div class="component-info">
|
||||
{% for tag, url in elements %}
|
||||
<code class="tag"><a href="{{ url }}">{{ tag }}</a></code>
|
||||
{% endfor %}
|
||||
{% if since %}<wa-badge variant="neutral">Since {{ since }}</wa-badge>{% endif %}
|
||||
{% if status %}
|
||||
<wa-badge
|
||||
{% if status == 'stable' %}variant="brand"{% endif %}
|
||||
{% if status == 'experimental' %}variant="warning"{% endif %}
|
||||
>
|
||||
{{ status }}
|
||||
</wa-badge>
|
||||
{% endif %}
|
||||
|
||||
{% if isPro %}
|
||||
<wa-badge class="pro">PRO</wa-badge>
|
||||
{% endif %}
|
||||
</div>
|
||||
{% if description -%}
|
||||
<p class="summary">{{ description | inlineMarkdown | safe }}</p>
|
||||
{%- endif %}
|
||||
{% if component %}
|
||||
<wa-callout variant="success">
|
||||
<wa-icon slot="icon" name="lightbulb" variant="regular"></wa-icon>
|
||||
Want to do more?
|
||||
Check out the {% for name in (component | toList) -%}
|
||||
Check out the {% for name in (component | toArray) -%}
|
||||
{{ ' and ' if loop.last and not loop.first }}<a href="/docs/components/{{ name }}"><code><wa-{{ name }}></code></a>{{ ', ' if not loop.last }}
|
||||
{%- endfor %} component{{ 's' if (component | isList) }}</a>!
|
||||
{%- endfor %} component{{ 's' if (component | isArray) }}</a>!
|
||||
</wa-callout>
|
||||
{% endif %}
|
||||
{% endblock %}
|
||||
|
||||
{# Content #}
|
||||
{% block content %}
|
||||
{{ content | safe }}
|
||||
{% endblock %}
|
||||
|
||||
{# Component API #}
|
||||
{% block afterContent %}
|
||||
{# Slots #}
|
||||
{% if css_file %}
|
||||
<h2>Using these styles</h2>
|
||||
<p>If you want to use these styles without using the entirety of Web Awesome Native Styles, you can include the following CSS files:</p>
|
||||
<p>If you want to use these styles without using the entirety of Web Awesome Natives, you can include the following CSS files:</p>
|
||||
|
||||
|
||||
{% endif %}
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
---
|
||||
layout: page-outline
|
||||
tags: ["overview"]
|
||||
---
|
||||
{% set forTag = forTag or (page.url | split('/') | last) %}
|
||||
{% if description %}
|
||||
<div class="index-summary">{{ description | markdown | safe }}</div>
|
||||
{% endif %}
|
||||
|
||||
<div id="block-filter">
|
||||
<wa-input type="search" placeholder="Search {{ title }}" clearable autofocus>
|
||||
<wa-icon slot="prefix" name="search"></wa-icon>
|
||||
</wa-input>
|
||||
</div>
|
||||
|
||||
{% set allPages = collections[forTag] %}
|
||||
{% include "grouped-pages.njk" %}
|
||||
|
||||
<link href="/assets/styles/filter.css" rel="stylesheet">
|
||||
<script type="module" src="/assets/scripts/filter.js"></script>
|
||||
|
||||
{% if content | trim %}
|
||||
<br> {# Temp fix for spacing issue #}
|
||||
{{ content | safe }}
|
||||
{% endif %}
|
||||
4
docs/_layouts/pattern.njk
Normal file
4
docs/_layouts/pattern.njk
Normal file
@@ -0,0 +1,4 @@
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
|
||||
{% extends "../_includes/base.njk" %}
|
||||
@@ -38,12 +38,8 @@ export function getTitleFromUrl(url, collection) {
|
||||
return item?.data.title || '';
|
||||
}
|
||||
|
||||
export function split(text, separator) {
|
||||
return (text + '').split(separator).filter(Boolean);
|
||||
}
|
||||
|
||||
export function breadcrumbs(url, { withCurrent = false } = {}) {
|
||||
const parts = split(url, '/');
|
||||
const parts = url.split('/').filter(Boolean);
|
||||
const ret = [];
|
||||
|
||||
while (parts.length) {
|
||||
@@ -74,191 +70,10 @@ export function breadcrumbs(url, { withCurrent = false } = {}) {
|
||||
return ret;
|
||||
}
|
||||
|
||||
export function isObject(value) {
|
||||
return typeof value === 'object' && value !== null && !Array.isArray(value);
|
||||
export function isArray(value) {
|
||||
return Array.isArray(value);
|
||||
}
|
||||
|
||||
export function isList(value) {
|
||||
return Array.isArray(value) || value instanceof Set;
|
||||
}
|
||||
|
||||
/** Get an Array or Set */
|
||||
export function toList(value) {
|
||||
return isList(value) ? value : [value];
|
||||
}
|
||||
|
||||
/**
|
||||
* Convert any value to something that can be iterated over with a for key, value loop.
|
||||
* Arrays and sets will be converted to a Map of value -> undefined
|
||||
*/
|
||||
export function dict(value) {
|
||||
if (value instanceof Map || isObject(value)) {
|
||||
return value;
|
||||
}
|
||||
|
||||
let list = toList(value);
|
||||
return new Map([...list].map(item => [item, undefined]));
|
||||
}
|
||||
|
||||
export function deepValue(obj, key) {
|
||||
key = Array.isArray(key) ? key : key.split('.');
|
||||
return key.reduce((subObj, property) => subObj?.[property], obj);
|
||||
}
|
||||
|
||||
export function isNumeric(value) {
|
||||
return typeof value === 'number' || (typeof value === 'string' && !isNaN(value));
|
||||
}
|
||||
|
||||
export function isString(value) {
|
||||
return typeof value === 'string';
|
||||
}
|
||||
|
||||
export function isEmpty(value) {
|
||||
return value === null || value === undefined || value === '';
|
||||
}
|
||||
|
||||
function compare(a, b) {
|
||||
let isEmptyA = isEmpty(a);
|
||||
let isEmptyB = isEmpty(b);
|
||||
|
||||
if (isEmptyA) {
|
||||
if (isEmptyB) {
|
||||
return 0;
|
||||
} else {
|
||||
return 1;
|
||||
}
|
||||
} else if (isEmptyB) {
|
||||
return -1;
|
||||
}
|
||||
|
||||
// Both strings, and at least one non-numeric
|
||||
if (isNumeric(a) || isNumeric(b)) {
|
||||
return a - b;
|
||||
}
|
||||
|
||||
return (a + '').localeCompare(b);
|
||||
}
|
||||
|
||||
/** Sort an array of objects by one or more of their properties */
|
||||
export function sort(arr, by = { 'data.order': 1, 'data.title': '' }) {
|
||||
let keys = Array.isArray(by) ? by : Object.keys(by);
|
||||
|
||||
return arr.sort((a, b) => {
|
||||
let aValues = keys.map(key => deepValue(a, key) ?? by[key]);
|
||||
let bValues = keys.map(key => deepValue(b, key) ?? by[key]);
|
||||
|
||||
for (let i = 0; i < aValues.length; i++) {
|
||||
let aVal = aValues[i];
|
||||
let bVal = bValues[i];
|
||||
let result = compare(aVal, bVal);
|
||||
|
||||
// They are not equal in terms of comparison OR we're at the last key
|
||||
if (result !== 0 || i === aValues.length - 1) {
|
||||
return result;
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
/**
|
||||
* Group an 11ty collection (or any array of objects with a `data.tags` property) by certain tags.
|
||||
* @param {object[]} collection
|
||||
* @param { Object<string, string> | (string | Object<string, string>)[]} [tags] The tags to group by. If not provided/empty, defaults to grouping by all tags.
|
||||
* @returns { Object.<string, object[]> } An object with keys for each tag, and an array of items for each tag.
|
||||
*/
|
||||
export function groupByTags(collection, tags) {
|
||||
if (!tags) {
|
||||
// Default to grouping by union of all tags
|
||||
tags = Array.from(new Set(collection.flatMap(item => item.data.tags)));
|
||||
} else if (Array.isArray(tags)) {
|
||||
// May contain objects of one-off tag -> label mappings
|
||||
tags = tags.map(tag => (typeof tag === 'object' ? Object.keys(tag)[0] : tag));
|
||||
} else if (typeof tags === 'object') {
|
||||
// tags is an object of tags to labels, so we just want the keys
|
||||
tags = Object.keys(tags);
|
||||
}
|
||||
|
||||
let ret = Object.fromEntries(tags.map(tag => [tag, []]));
|
||||
ret.other = [];
|
||||
|
||||
for (let item of collection) {
|
||||
let categorized = false;
|
||||
|
||||
for (let tag of tags) {
|
||||
if (item.data.tags.includes(tag)) {
|
||||
ret[tag].push(item);
|
||||
categorized = true;
|
||||
}
|
||||
}
|
||||
|
||||
if (!categorized) {
|
||||
ret.other.push(item);
|
||||
}
|
||||
}
|
||||
|
||||
// Remove empty categories
|
||||
for (let category in ret) {
|
||||
if (ret[category].length === 0) {
|
||||
delete ret[category];
|
||||
}
|
||||
}
|
||||
|
||||
return ret;
|
||||
}
|
||||
|
||||
export function getCategoryTitle(category, categories) {
|
||||
let title;
|
||||
if (Array.isArray(categories)) {
|
||||
// Find relevant entry
|
||||
// [{id: "Title"}, id2, ...]
|
||||
title = categories.find(entry => typeof entry === 'object' && entry?.[category])?.[category];
|
||||
} else if (typeof categories === 'object') {
|
||||
// {id: "Title", id2: "Title 2", ...}
|
||||
title = categories[category];
|
||||
}
|
||||
|
||||
if (title) {
|
||||
return title;
|
||||
}
|
||||
|
||||
// Capitalized
|
||||
return category.charAt(0).toUpperCase() + category.slice(1);
|
||||
}
|
||||
|
||||
const IDENTITY = x => x;
|
||||
|
||||
/**
|
||||
* Helper to print out one or more HTML attributes, especially conditional ones.
|
||||
* Usage in 11ty:
|
||||
* - Single attribute: `<foo{{ value | attr(name) }}>`
|
||||
* - Multiple attributes: `<foo{{ { name1: value1, name2: value2 } | attr }}>`
|
||||
*
|
||||
* @overload
|
||||
* @param {any} value - The attribute value If falsey, the attribute is not printed. If `true` the attribute is printed without a value.
|
||||
* @param {string} name - The name of the attribute
|
||||
*
|
||||
* @overload
|
||||
* @param {Object<string, any>} obj - Map of attribute names to values
|
||||
*
|
||||
* @returns {string} The attribute string. No `| safe` is needed.
|
||||
*/
|
||||
export function attr(value, name) {
|
||||
const safe = this?.env.filters.safe ?? IDENTITY;
|
||||
|
||||
if (arguments.length === 1 && value && typeof value === 'object') {
|
||||
// Called with a single object argument of names to values
|
||||
let ret = Object.entries(obj)
|
||||
.map(([name, value]) => attr(value, name))
|
||||
.join('');
|
||||
return safe(ret);
|
||||
}
|
||||
|
||||
if (!value) {
|
||||
// false, "", null, undefined
|
||||
return '';
|
||||
}
|
||||
|
||||
let ret = ' ' + name + (value === true ? '' : `="${value}"`);
|
||||
|
||||
return safe(ret);
|
||||
export function toArray(value) {
|
||||
return isArray(value) ? value : [value];
|
||||
}
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
await customElements.whenDefined('wa-checkbox');
|
||||
let container = document.getElementById('page_slots_demo');
|
||||
|
||||
let fieldset = container.querySelector('fieldset');
|
||||
@@ -9,16 +10,7 @@ let includes = `${stylesheets}
|
||||
<script src="/dist/webawesome.loader.js" type="module"></script>
|
||||
<link rel="stylesheet" href="/assets/examples/page-demo/page.css">`;
|
||||
|
||||
async function render() {
|
||||
await customElements.whenDefined('wa-checkbox');
|
||||
|
||||
// Let checkboxes update their "state"
|
||||
await Promise.allSettled(
|
||||
Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]')).map(checkbox => {
|
||||
return checkbox.updateComplete;
|
||||
}),
|
||||
);
|
||||
|
||||
function render() {
|
||||
let slots = Array.from(fieldset.querySelectorAll('wa-checkbox[name=slot]:state(checked)'));
|
||||
let slotsHTML = slots
|
||||
.map(slot => {
|
||||
@@ -47,5 +39,5 @@ async function render() {
|
||||
iframe.srcdoc = `${includes}<wa-page>${slotsHTML}</wa-page>`;
|
||||
}
|
||||
}
|
||||
await render();
|
||||
fieldset?.addEventListener('input', render);
|
||||
render();
|
||||
|
||||
@@ -26,7 +26,7 @@ wa-page {
|
||||
|
||||
.slot-content {
|
||||
padding: var(--wa-space-m);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
align-content: center;
|
||||
justify-content: center;
|
||||
text-align: center;
|
||||
|
||||
@@ -19,10 +19,10 @@ document.addEventListener('click', event => {
|
||||
const html =
|
||||
`<script type="module" src="${cdnUrl}webawesome.loader.js"></script>\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/themes/default.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/webawesome.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/applied.css">\n` +
|
||||
`<link rel="stylesheet" href="${cdnUrl}styles/utilities.css">\n\n` +
|
||||
`${code.textContent}`;
|
||||
const css = 'html > body {\n padding: 2rem !important;\n}';
|
||||
const css = 'html > body {\n font: 16px sans-serif;\n padding: 2rem;\n}';
|
||||
const js = '';
|
||||
|
||||
const form = document.createElement('form');
|
||||
|
||||
@@ -1,25 +0,0 @@
|
||||
function updateResults(input) {
|
||||
const filter = input.value.toLowerCase().trim();
|
||||
let filtered = Boolean(filter);
|
||||
|
||||
for (let grid of document.querySelectorAll('.index-grid')) {
|
||||
grid.classList.toggle('filtered', filtered);
|
||||
|
||||
for (let item of grid.querySelectorAll('a:has(> wa-card)')) {
|
||||
let isMatch = true;
|
||||
|
||||
if (filter) {
|
||||
const content = item.textContent.toLowerCase() + ' ' + (item.getAttribute('data-keywords') + ' ');
|
||||
isMatch = content.includes(filter);
|
||||
}
|
||||
|
||||
item.hidden = !isMatch;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
document.documentElement.addEventListener('wa-input', e => {
|
||||
if (e.target?.matches('#block-filter wa-input')) {
|
||||
updateResults(e.target);
|
||||
}
|
||||
});
|
||||
@@ -1,17 +1,13 @@
|
||||
//
|
||||
// Preset theme selector
|
||||
//
|
||||
(() => {
|
||||
function applyThemeChange(stylesheet, newStylesheet) {
|
||||
newStylesheet.rel = 'stylesheet';
|
||||
newStylesheet.id = stylesheet.id;
|
||||
requestAnimationFrame(() => {
|
||||
stylesheet.remove();
|
||||
});
|
||||
}
|
||||
|
||||
function setPresetTheme(newPresetTheme) {
|
||||
presetTheme = newPresetTheme;
|
||||
localStorage.setItem('presetTheme', presetTheme);
|
||||
|
||||
const stylesheet = document.getElementById('theme-stylesheet');
|
||||
|
||||
const newStylesheet = Object.assign(document.createElement('link'), {
|
||||
href: `/dist/styles/themes/${presetTheme}.css`,
|
||||
rel: 'preload',
|
||||
@@ -21,44 +17,35 @@
|
||||
newStylesheet.addEventListener(
|
||||
'load',
|
||||
() => {
|
||||
const canUseViewTransitions =
|
||||
document.startViewTransition && !window.matchMedia('(prefers-reduced-motion: reduce)').matches;
|
||||
|
||||
if (canUseViewTransitions) {
|
||||
document.startViewTransition(() => applyThemeChange(stylesheet, newStylesheet));
|
||||
} else {
|
||||
applyThemeChange(stylesheet, newStylesheet);
|
||||
}
|
||||
newStylesheet.rel = 'stylesheet';
|
||||
newStylesheet.id = stylesheet.id;
|
||||
requestAnimationFrame(() => {
|
||||
stylesheet.remove();
|
||||
});
|
||||
},
|
||||
{ once: true },
|
||||
);
|
||||
|
||||
document.head.append(newStylesheet);
|
||||
|
||||
// Update the UI
|
||||
updateSelection();
|
||||
|
||||
// Toggle the dark mode class
|
||||
document.documentElement.classList.toggle(`wa-theme-${presetTheme}-dark`, window.isDark());
|
||||
}
|
||||
|
||||
function updateSelection(container = document) {
|
||||
const menus = container.querySelectorAll('.preset-theme-selector wa-menu');
|
||||
if (!menus) return;
|
||||
|
||||
[...menus].forEach(menu => {
|
||||
// Clear all checked states
|
||||
[...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
|
||||
await customElements.whenDefined(item.localName);
|
||||
await item.updateComplete;
|
||||
item.checked = false; // Reset all items to unchecked first
|
||||
});
|
||||
|
||||
// Then set only the selected item as checked
|
||||
const selectedItem = menu.querySelector(`wa-menu-item[value="${presetTheme}"]`);
|
||||
if (selectedItem) {
|
||||
customElements.whenDefined(selectedItem.localName).then(async () => {
|
||||
await selectedItem.updateComplete;
|
||||
selectedItem.checked = true;
|
||||
container.querySelector('.preset-theme-selector__text').textContent = selectedItem.innerText;
|
||||
});
|
||||
const menu = container.querySelector('#preset-theme-selector wa-menu');
|
||||
if (!menu) return;
|
||||
[...menu.querySelectorAll('wa-menu-item')].forEach(async item => {
|
||||
const isChecked = item.getAttribute('value') === presetTheme;
|
||||
if (isChecked) {
|
||||
container.querySelector('#preset-theme-selector__text').textContent = item.innerText;
|
||||
}
|
||||
await customElements.whenDefined(item.localName);
|
||||
await item.updateComplete;
|
||||
item.checked = isChecked;
|
||||
});
|
||||
}
|
||||
|
||||
@@ -66,14 +53,14 @@
|
||||
|
||||
// Selection is not preserved when changing page, so update when opening dropdown
|
||||
document.addEventListener('wa-show', event => {
|
||||
const presetThemeSelector = event.target.closest('.preset-theme-selector');
|
||||
const presetThemeSelector = event.target.closest('#preset-theme-selector');
|
||||
if (!presetThemeSelector) return;
|
||||
updateSelection();
|
||||
});
|
||||
|
||||
// Listen for selections
|
||||
document.addEventListener('wa-select', event => {
|
||||
const menu = event.target.closest('.preset-theme-selector wa-menu');
|
||||
const menu = event.target.closest('#preset-theme-selector wa-menu');
|
||||
if (!menu) return;
|
||||
setPresetTheme(event.detail.item.value);
|
||||
});
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
.code-example {
|
||||
border: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
color: var(--wa-color-text-normal);
|
||||
margin-block-end: var(--wa-flow-spacing);
|
||||
}
|
||||
@@ -41,8 +41,8 @@
|
||||
border-bottom: none;
|
||||
|
||||
pre {
|
||||
border-bottom-right-radius: var(--wa-border-radius-l);
|
||||
border-bottom-left-radius: var(--wa-border-radius-l);
|
||||
border-bottom-right-radius: var(--wa-border-radius-m);
|
||||
border-bottom-left-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -62,11 +62,11 @@
|
||||
|
||||
&:first-of-type {
|
||||
border-left: none;
|
||||
border-bottom-left-radius: var(--wa-border-radius-l);
|
||||
border-bottom-left-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
&:last-of-type {
|
||||
border-bottom-right-radius: var(--wa-border-radius-l);
|
||||
border-bottom-right-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
&:focus-visible {
|
||||
|
||||
@@ -6,7 +6,7 @@ wa-copy-button.copy-button {
|
||||
right: 0.25rem;
|
||||
font-family: var(--wa-font-family-body);
|
||||
color: var(--wa-color-gray-80);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: 0.25rem;
|
||||
|
||||
&:hover {
|
||||
|
||||
@@ -22,7 +22,7 @@ wa-page {
|
||||
/* Header */
|
||||
wa-page::part(header) {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
|
||||
border-bottom: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
wa-page::part(body) {
|
||||
@@ -81,7 +81,7 @@ wa-page > header {
|
||||
}
|
||||
wa-button#search-trigger {
|
||||
--background-color: var(--wa-form-control-background-color);
|
||||
--border-color: var(--wa-form-control-border-color);
|
||||
--border-color: var(--wa-form-control-resting-color);
|
||||
}
|
||||
#search-trigger kbd {
|
||||
font-size: var(--wa-font-size-2xs);
|
||||
@@ -104,9 +104,17 @@ wa-page > header {
|
||||
wa-details {
|
||||
border: none;
|
||||
background: none;
|
||||
}
|
||||
|
||||
wa-details::part(header) {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
wa-details::part(content) {
|
||||
padding-inline: 0;
|
||||
padding-block-end: 0;
|
||||
}
|
||||
|
||||
ul {
|
||||
border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border);
|
||||
font-size: var(--wa-font-size-s);
|
||||
@@ -230,7 +238,7 @@ h1.title wa-badge {
|
||||
}
|
||||
}
|
||||
|
||||
.block-info {
|
||||
.component-info {
|
||||
margin-block-end: var(--wa-flow-spacing);
|
||||
}
|
||||
|
||||
@@ -261,7 +269,7 @@ h1.title wa-badge {
|
||||
display: flex;
|
||||
gap: 1rem;
|
||||
border: var(--wa-border-style) var(--wa-border-width-s);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: 1rem;
|
||||
margin-block-end: var(--wa-flow-spacing);
|
||||
|
||||
@@ -321,45 +329,8 @@ wa-page > main:has(> .index-grid) {
|
||||
|
||||
.index-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(22ch, 100%), 1fr));
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
|
||||
gap: var(--wa-space-2xl);
|
||||
|
||||
a {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
|
||||
wa-card {
|
||||
--box-shadow: none;
|
||||
--spacing: var(--wa-space-m);
|
||||
inline-size: 100%;
|
||||
|
||||
&:hover {
|
||||
--border-color: var(--wa-color-brand-border-loud);
|
||||
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
|
||||
.page-name {
|
||||
color: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
[slot='header'] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
&::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-block-size: calc(6rem + var(--spacing));
|
||||
}
|
||||
}
|
||||
|
||||
.page-name {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
}
|
||||
|
||||
.index-category {
|
||||
@@ -368,13 +339,107 @@ wa-page > main:has(> .index-grid) {
|
||||
margin-block-start: var(--wa-space-2xl);
|
||||
}
|
||||
|
||||
.index-grid a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.index-grid wa-card {
|
||||
--box-shadow: none;
|
||||
--spacing: var(--wa-space-m);
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.index-grid wa-card:hover {
|
||||
--border-color: var(--wa-color-brand-border-loud);
|
||||
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
& .page-name {
|
||||
color: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
.index-grid wa-card [slot='header'] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.index-grid wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-block-size: calc(6rem + var(--spacing));
|
||||
}
|
||||
|
||||
.index-grid .page-name {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
|
||||
/* Index Pages */
|
||||
wa-page > main:has(> .index-grid) {
|
||||
max-width: 120ch;
|
||||
margin-inline: auto;
|
||||
}
|
||||
|
||||
.index-summary {
|
||||
max-inline-size: 80ch;
|
||||
}
|
||||
|
||||
.index-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(min(20ch, 100%), 1fr));
|
||||
gap: var(--wa-space-2xl);
|
||||
}
|
||||
|
||||
.index-category {
|
||||
grid-column: 1 / -1;
|
||||
margin-block-end: 0;
|
||||
margin-block-start: var(--wa-space-2xl);
|
||||
}
|
||||
|
||||
.index-grid a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.index-grid wa-card {
|
||||
--box-shadow: none;
|
||||
--spacing: var(--wa-space-m);
|
||||
inline-size: 100%;
|
||||
}
|
||||
|
||||
.index-grid wa-card:hover {
|
||||
--border-color: var(--wa-color-brand-border-loud);
|
||||
--box-shadow: 0 0 0 var(--wa-border-width-s) var(--border-color);
|
||||
& .page-name {
|
||||
color: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
.index-grid wa-card [slot='header'] {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.index-grid wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-bottom: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-block-size: calc(6rem + var(--spacing));
|
||||
}
|
||||
|
||||
.index-grid .page-name {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
|
||||
/* Swatches */
|
||||
.swatch {
|
||||
background-color: transparent;
|
||||
border-color: var(--wa-color-neutral-border-normal);
|
||||
border-style: var(--wa-border-style);
|
||||
border-width: var(--wa-border-width-s);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
box-sizing: border-box;
|
||||
line-height: 2.5;
|
||||
height: 2.5em;
|
||||
@@ -384,13 +449,13 @@ wa-page > main:has(> .index-grid) {
|
||||
/* Layout Examples */
|
||||
.layout-example-boundary {
|
||||
border: var(--wa-border-width-s) dashed var(--wa-color-neutral-border-normal);
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: var(--wa-space-s);
|
||||
}
|
||||
|
||||
.layout-example-block {
|
||||
background-color: var(--wa-color-indigo-60);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
min-block-size: 4rem;
|
||||
min-inline-size: 4rem;
|
||||
}
|
||||
@@ -426,9 +491,14 @@ wa-page > main:has(> .index-grid) {
|
||||
|
||||
/** desktop */
|
||||
@media screen and not (max-width: 768px) {
|
||||
wa-page [data-toggle-nav],
|
||||
wa-page .only-mobile {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Navigation sidebar */
|
||||
wa-page::part(navigation) {
|
||||
border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
|
||||
border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
wa-page > #sidebar {
|
||||
|
||||
@@ -1,37 +0,0 @@
|
||||
wa-card#drawer-card::part(header) {
|
||||
--spacing: 0;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#block-filter {
|
||||
margin-block-end: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.index-grid.filtered {
|
||||
h2 {
|
||||
/* Hide headings while filtering */
|
||||
display: none;
|
||||
}
|
||||
|
||||
&:not(:has(> a:not([hidden]))) {
|
||||
/* We’re filtering and there are no results */
|
||||
|
||||
&::before {
|
||||
content: var(--empty-message);
|
||||
grid-column: 1 / -1;
|
||||
color: var(--wa-color-on-quiet);
|
||||
font-style: italic;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
}
|
||||
|
||||
/* Show empty state when there's a search filter and no results */
|
||||
&[data-empty] {
|
||||
--empty-message: attr(data-empty);
|
||||
}
|
||||
|
||||
&:not([data-empty]) {
|
||||
--empty-message: 'No results';
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -18,7 +18,7 @@
|
||||
.diff-grid > * {
|
||||
height: 100%;
|
||||
}
|
||||
.diff-dialog {
|
||||
.diff-dialog::part(dialog) {
|
||||
max-width: 90vw;
|
||||
width: 90vw;
|
||||
}
|
||||
|
||||
@@ -42,6 +42,5 @@
|
||||
|
||||
#outline-expandable {
|
||||
display: block;
|
||||
margin-block-end: var(--wa-space-xl);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,14 +1,13 @@
|
||||
#site-search {
|
||||
width: 38rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
--width: 38rem;
|
||||
|
||||
&::part(base) {
|
||||
margin-block: 10rem;
|
||||
&::part(dialog) {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: 0;
|
||||
margin: 10rem auto;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
&::part(body) {
|
||||
@@ -19,22 +18,21 @@
|
||||
justify-content: center;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
max-width: calc(100% - 2rem);
|
||||
|
||||
&::part(base) {
|
||||
margin-block: 1rem;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#site-search-container {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
max-height: calc(100vh - 20rem);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 900px) {
|
||||
@media screen and (max-width: 900px) {
|
||||
#site-search::part(dialog) {
|
||||
max-width: calc(100% - 2rem);
|
||||
margin-block: 1rem;
|
||||
}
|
||||
|
||||
#site-search-container {
|
||||
max-height: calc(100dvh - 2rem);
|
||||
}
|
||||
}
|
||||
@@ -231,8 +229,8 @@ header {
|
||||
gap: 2rem;
|
||||
color: var(--wa-color-text-quiet);
|
||||
border-top: var(--wa-panel-border-style) var(--wa-panel-border-width) var(--wa-color-neutral-border-quiet);
|
||||
border-bottom-left-radius: var(--wa-border-radius-l);
|
||||
border-bottom-right-radius: var(--wa-border-radius-l);
|
||||
border-bottom-left-radius: var(--wa-border-radius-m);
|
||||
border-bottom-right-radius: var(--wa-border-radius-m);
|
||||
padding: 1rem;
|
||||
|
||||
kbd {
|
||||
|
||||
@@ -1,14 +1,5 @@
|
||||
/* Theme Builder Headers
|
||||
* These styles control the appearance of the header of the theme builder,
|
||||
* allowing each theme to have a unique hero section.
|
||||
*/
|
||||
|
||||
/* #region Default */
|
||||
html[class*='wa-theme-default'] .preview-container {
|
||||
container-name: default-theme;
|
||||
}
|
||||
|
||||
@container default-theme (min-width: 0) {
|
||||
/* #region Custom Styles */
|
||||
@container preview (min-width: 0) {
|
||||
.hero-background {
|
||||
height: 47rem;
|
||||
background-color: var(--wa-color-brand-fill-loud);
|
||||
@@ -31,7 +22,7 @@ html[class*='wa-theme-default'] .preview-container {
|
||||
}
|
||||
|
||||
.hero wa-button[variant='brand'] {
|
||||
--background-color: var(--wa-color-neutral-fill-quiet);
|
||||
--background: var(--wa-color-neutral-fill-quiet);
|
||||
--text-color: var(--wa-color-neutral-on-normal);
|
||||
}
|
||||
|
||||
@@ -50,733 +41,10 @@ html[class*='wa-theme-default'] .preview-container {
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container default-theme (min-width: 1040px) {
|
||||
@container preview (min-width: 1040px) {
|
||||
.hero-background::after {
|
||||
background-position: right bottom;
|
||||
background-size: 90%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Migration */
|
||||
html[class*='wa-theme-migration'] .preview-container {
|
||||
container-name: migration-theme;
|
||||
}
|
||||
|
||||
@container migration-theme (min-width: 0) {
|
||||
.project-header {
|
||||
background: var(--wa-color-surface-default);
|
||||
}
|
||||
|
||||
.hero {
|
||||
--hero-background-color: var(--wa-color-surface-default);
|
||||
--hero-lines-color: color-mix(in oklab, var(--wa-color-neutral-fill-normal), transparent 30%);
|
||||
background: linear-gradient(to top, var(--wa-color-surface-lowered), transparent 40%),
|
||||
radial-gradient(circle at 10% 70%, color-mix(in oklab, var(--wa-color-red-50) 16%, transparent), transparent 30%),
|
||||
radial-gradient(
|
||||
circle at 40% 50%,
|
||||
color-mix(in oklab, var(--wa-color-indigo-40) 16%, transparent),
|
||||
transparent 40%
|
||||
),
|
||||
radial-gradient(circle at 80% 25%, color-mix(in oklab, var(--wa-color-red-50) 8%, transparent), transparent 20%),
|
||||
radial-gradient(
|
||||
circle at 80% 80%,
|
||||
color-mix(in oklab, var(--wa-color-indigo-40) 16%, transparent),
|
||||
transparent 40%
|
||||
),
|
||||
radial-gradient(circle at 90% 30%, color-mix(in oklab, var(--wa-color-red-60) 8%, transparent), transparent 10%),
|
||||
linear-gradient(176deg, var(--hero-background-color), transparent 6rem),
|
||||
linear-gradient(90deg, var(--hero-background-color), transparent),
|
||||
repeating-linear-gradient(
|
||||
var(--hero-lines-color),
|
||||
var(--hero-lines-color) 1px,
|
||||
transparent 1px,
|
||||
transparent 10rem,
|
||||
var(--hero-lines-color) 10rem
|
||||
),
|
||||
repeating-linear-gradient(
|
||||
90deg,
|
||||
var(--hero-lines-color),
|
||||
var(--hero-lines-color) 1px,
|
||||
transparent 1px,
|
||||
transparent 10rem,
|
||||
var(--hero-lines-color) 10rem
|
||||
),
|
||||
var(--hero-background-color);
|
||||
|
||||
& .title {
|
||||
padding-block: calc(var(--wa-space-3xl) * 2) calc(var(--wa-space-3xl) * 10);
|
||||
|
||||
& .hero-title {
|
||||
font-size: calc((var(--wa-font-size-4xl) * 1.125) * 1.125);
|
||||
margin-block: 0 var(--wa-space-3xl);
|
||||
}
|
||||
}
|
||||
}
|
||||
.badge-stock {
|
||||
position: absolute;
|
||||
top: var(--wa-space-l);
|
||||
left: var(--wa-space-l);
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
&::part(footer) {
|
||||
border: none;
|
||||
}
|
||||
& wa-icon-button {
|
||||
color: var(--wa-color-base-50);
|
||||
}
|
||||
}
|
||||
|
||||
.products {
|
||||
margin-top: calc(var(--wa-space-3xl) * -8);
|
||||
}
|
||||
|
||||
pre.codeblock {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Brutalist */
|
||||
html[class*='wa-theme-brutalist'] .preview-container {
|
||||
container-name: brutalist-theme;
|
||||
}
|
||||
|
||||
@container brutalist-theme (min-width: 0) {
|
||||
.overlap {
|
||||
background: var(--wa-color-surface-lowered) url('/assets/images/themer/brutalist/hero.png') 50% 3% no-repeat;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 42rem;
|
||||
padding-top: 8rem;
|
||||
padding-right: 50%;
|
||||
--wa-font-weight-heading: var(--wa-font-weight-normal);
|
||||
}
|
||||
|
||||
.hero wa-button {
|
||||
--background: var(--wa-color-neutral-fill-loud);
|
||||
margin-block-start: var(--wa-space-xl);
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
/* imitating the large button styles */
|
||||
.hero wa-button::part(label) {
|
||||
padding: 0 var(--wa-space-l);
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -20rem;
|
||||
padding-top: 10rem;
|
||||
}
|
||||
|
||||
.product-card .badge-stock {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
}
|
||||
|
||||
.product-card::part(footer) {
|
||||
--wa-shadow-offset-x-s: 0;
|
||||
--wa-shadow-offset-y-s: 0;
|
||||
border-width: 0;
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.product-card wa-button::part(prefix) {
|
||||
padding-inline-start: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.product-card wa-button::part(suffix) {
|
||||
padding-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.product-card wa-button:not(:last-child) {
|
||||
margin-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
/* imitating the rounded avatar */
|
||||
.blog wa-avatar {
|
||||
background-color: transparent;
|
||||
}
|
||||
|
||||
.blog wa-avatar::part(image) {
|
||||
border: var(--wa-border-width-s) solid var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
}
|
||||
|
||||
.blog .landscape-frame {
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
margin-block-end: var(--wa-shadow-offset-y-s);
|
||||
}
|
||||
|
||||
.post-meta .categories {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons {
|
||||
--wa-color-neutral-border-quiet: color-mix(in oklab, var(--wa-color-gray-30), white 40%);
|
||||
}
|
||||
|
||||
.message-composer [slot='header'] wa-icon-button::part(base) {
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base):hover {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
.message-composer wa-tooltip::part(body) {
|
||||
background-color: var(--wa-color-brand-fill-loud);
|
||||
color: var(--wa-color-brand-on-loud);
|
||||
}
|
||||
|
||||
.message-composer wa-tooltip::part(base__arrow) {
|
||||
--arrow-color: var(--wa-color-brand-fill-loud);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(footer) {
|
||||
border-width: 0;
|
||||
--padding: 0 var(--wa-space-s) var(--wa-space-s) var(--wa-space-s);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
.support-table th wa-checkbox {
|
||||
--background: transparent;
|
||||
--border-color: var(--wa-color-neutral-on-loud);
|
||||
--border-color-checked: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
|
||||
.checkout-form {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.checkout-form .square-frame {
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
border: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
.wa-theme-brutalist-dark {
|
||||
& p a::before {
|
||||
background: var(--wa-color-yellow-40);
|
||||
}
|
||||
|
||||
& wa-rating {
|
||||
--symbol-color: color-mix(in oklab, var(--wa-color-base-80), transparent 50%);
|
||||
--symbol-color-active: var(--wa-color-gray-80);
|
||||
}
|
||||
|
||||
& wa-alert {
|
||||
&[variant='brand'] {
|
||||
--icon-color: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
&[variant='success'] {
|
||||
--icon-color: var(--wa-color-success-on-quiet);
|
||||
}
|
||||
&[variant='warning'] {
|
||||
--icon-color: var(--wa-color-warning-on-quiet);
|
||||
}
|
||||
&[variant='danger'] {
|
||||
--icon-color: var(--wa-color-danger-on-quiet);
|
||||
}
|
||||
&[variant='neutral'] {
|
||||
--icon-color: var(--wa-color-neutral-on-quiet);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.preview-container pre {
|
||||
border-inline-start: var(--wa-panel-border-width) var(--wa-panel-border-style) var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
p a,
|
||||
a.highlite-link {
|
||||
position: relative;
|
||||
--wa-link-decoration-default: none;
|
||||
--wa-link-decoration-hover: none;
|
||||
|
||||
&:before {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
content: '';
|
||||
background: var(--wa-color-yellow-80);
|
||||
width: 100%;
|
||||
bottom: 0;
|
||||
height: 50%;
|
||||
opacity: 0.7;
|
||||
transition: all var(--wa-transition-fast) ease-in-out;
|
||||
}
|
||||
|
||||
&:hover:before {
|
||||
height: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
@container brutalist-theme (min-width: 1040px) and (max-width: 1140px) {
|
||||
.product-card wa-button {
|
||||
font-size: 80%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Playful */
|
||||
html[class*='wa-theme-playful'] .preview-container {
|
||||
container-name: playful-theme;
|
||||
}
|
||||
|
||||
@container playful-theme (min-width: 0) {
|
||||
.project-header {
|
||||
color: var(--wa-color-success-on-normal);
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
position: absolute;
|
||||
z-index: -1;
|
||||
top: -60rem;
|
||||
left: 50%;
|
||||
width: 250rem;
|
||||
height: 250rem;
|
||||
transform: translate(-50%, -50%);
|
||||
flex-shrink: 0;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(180deg, var(--wa-color-green-90) 69.42%, var(--wa-color-green-80) 100%);
|
||||
}
|
||||
|
||||
.hero-background::after {
|
||||
background: url(/assets/images/themer/playful/hero.png) 0 50% no-repeat;
|
||||
content: '';
|
||||
position: absolute;
|
||||
width: 520px;
|
||||
height: 600px;
|
||||
transform: translateX(-50%);
|
||||
left: 50%;
|
||||
bottom: 33rem;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
padding-top: 19rem;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
color: var(--wa-color-success-on-normal);
|
||||
font-size: var(--wa-font-size-4xl);
|
||||
}
|
||||
|
||||
.hero .hero-cta {
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.product-card .badge-stock {
|
||||
position: absolute;
|
||||
top: var(--wa-space-xl);
|
||||
right: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.product-card {
|
||||
--wa-panel-border-radius: var(--wa-border-radius-l);
|
||||
}
|
||||
|
||||
.product-card::part(footer) {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.product-card wa-button {
|
||||
margin-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.blog wa-avatar {
|
||||
--size: 2rem;
|
||||
}
|
||||
|
||||
.blog .landscape-frame {
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
--background: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-70);
|
||||
border-width: 0;
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium-dark) .message-composer wa-card {
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-gray-90);
|
||||
}
|
||||
|
||||
.message-composer wa-icon-button {
|
||||
color: var(--wa-text-color-normal);
|
||||
font-size: var(--wa-font-size-l);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(footer) {
|
||||
padding-top: 0;
|
||||
}
|
||||
|
||||
.product-detail .price {
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
}
|
||||
|
||||
.support-table wa-card {
|
||||
--background: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-weight: var(--wa-font-weight-bold);
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.support-table tr {
|
||||
border-top-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.support-table .excerpt {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.order-item img {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
}
|
||||
|
||||
.checkout-form {
|
||||
font-size: var(--wa-font-size-s);
|
||||
}
|
||||
|
||||
.checkout-form h2 {
|
||||
font-size: var(--wa-font-size-3xl);
|
||||
}
|
||||
|
||||
.checkout-form wa-input::part(form-control-label),
|
||||
.checkout-form wa-select::part(form-control-label) {
|
||||
font-size: var(--wa-font-size-s);
|
||||
padding-block-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.wa-theme-playful-dark {
|
||||
& .hero-background {
|
||||
background: linear-gradient(180deg, var(--wa-color-green-60) 69.42%, var(--wa-color-green-30) 100%);
|
||||
}
|
||||
|
||||
& .message-composer wa-card {
|
||||
--border-color: var(--wa-color-gray-30);
|
||||
}
|
||||
|
||||
& .message-composer wa-card::part(header) {
|
||||
background: var(--wa-color-gray-40);
|
||||
}
|
||||
|
||||
& .message-composer wa-card::part(footer) {
|
||||
border-top: 0;
|
||||
}
|
||||
|
||||
& .message-composer .tools .grouped-buttons:not(:last-of-type) {
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-gray-40);
|
||||
}
|
||||
|
||||
& .support-table th {
|
||||
background: var(--wa-color-surface-lowered);
|
||||
}
|
||||
}
|
||||
}
|
||||
/* responsive */
|
||||
@container playful-theme (min-width: 1040px) and (max-width: 1140px) {
|
||||
.product-card wa-button {
|
||||
font-size: 80%;
|
||||
margin-inline-end: 0;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Active */
|
||||
html[class*='wa-theme-active'] .preview-container {
|
||||
container-name: active-theme;
|
||||
}
|
||||
|
||||
@container active-theme (min-width: 0) {
|
||||
.hero-background::after {
|
||||
backdrop-filter: brightness(0.8);
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
}
|
||||
|
||||
.hero-background {
|
||||
background: linear-gradient(
|
||||
var(--wa-color-green-80) 20%,
|
||||
var(--wa-color-primary-80) 80.5%,
|
||||
var(--wa-color-base-10) 80.5%,
|
||||
var(--wa-color-primary-80) 100%
|
||||
);
|
||||
background: url(/assets/images/themer/active/hero.png) 50% 0px / cover no-repeat;
|
||||
height: 40rem;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
z-index: -1;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 24rem;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
text-align: right;
|
||||
margin-inline-start: 55%;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
font-style: italic;
|
||||
font-weight: var(--wa-font-weight-black);
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
.hero wa-button[variant='brand'] {
|
||||
--background: var(--wa-color-neutral-fill-quiet);
|
||||
--text-color: var(--wa-color-neutral-on-normal);
|
||||
}
|
||||
|
||||
wa-rating {
|
||||
--symbol-color-active: var(--wa-color-brand-on-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1100px) {
|
||||
.hero-background {
|
||||
height: 47rem;
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 30rem;
|
||||
}
|
||||
|
||||
.hero .title {
|
||||
margin-block-start: 10%;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region Premium */
|
||||
html[class*='wa-theme-premium'] .preview-container {
|
||||
container-name: premium-theme;
|
||||
}
|
||||
|
||||
@container premium-theme (min-width: 0) {
|
||||
.project-header {
|
||||
background-color: var(--wa-color-warning-fill-normal);
|
||||
}
|
||||
|
||||
.strata.hero {
|
||||
height: 60rem;
|
||||
background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 12rem no-repeat;
|
||||
background-size: cover;
|
||||
padding-top: var(--wa-space-2xl);
|
||||
padding-left: var(--wa-space-s);
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.hero .hero-title {
|
||||
color: var(--wa-color-warning-on-normal);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.blog wa-avatar {
|
||||
border-radius: var(--wa-border-radius-circle);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -25rem;
|
||||
padding-top: 10rem;
|
||||
background: linear-gradient(0deg, var(--wa-color-surface-lowered) 80%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
|
||||
.product-card .badge-stock {
|
||||
position: absolute;
|
||||
top: var(--wa-space-xl);
|
||||
right: var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.product-card wa-rating {
|
||||
--symbol-size: var(--wa-font-size-m);
|
||||
}
|
||||
|
||||
.product-card .title {
|
||||
font-size: var(--wa-font-size-2xl);
|
||||
}
|
||||
|
||||
.product-card .description {
|
||||
color: var(--wa-color-text-quiet);
|
||||
}
|
||||
|
||||
.product-card::part(footer) {
|
||||
border-width: 0;
|
||||
}
|
||||
|
||||
.product-card wa-button:not(:last-child) {
|
||||
margin-inline-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.blog .authors a {
|
||||
--wa-color-text-link: var(--wa-color-text-quiet);
|
||||
--wa-link-decoration-default: none;
|
||||
}
|
||||
|
||||
.message-composer wa-card {
|
||||
--background: var(--wa-color-surface-raised);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(header) {
|
||||
border-width: 0;
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
&:not(.wa-theme-premium-dark) .message-composer wa-card {
|
||||
--wa-color-neutral-fill-quiet: var(--wa-color-base-95);
|
||||
}
|
||||
|
||||
.message-composer wa-card::part(footer) {
|
||||
border-width: 0;
|
||||
--padding: var(--wa-space-s) var(--wa-space-xl);
|
||||
}
|
||||
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base) {
|
||||
block-size: var(--wa-form-control-height-s);
|
||||
inline-size: var(--wa-form-control-height-s);
|
||||
justify-content: center;
|
||||
}
|
||||
.message-composer .grouped-buttons wa-icon-button::part(base):hover {
|
||||
background-color: var(--wa-color-neutral-fill-normal);
|
||||
color: var(--wa-color-text-normal);
|
||||
}
|
||||
|
||||
.support-table th {
|
||||
text-transform: uppercase;
|
||||
font-weight: var(--wa-font-weight-normal);
|
||||
color: var(--wa-color-text-quiet);
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.support-table th:first-child {
|
||||
border-radius: var(--wa-border-radius-l) 0 0 0;
|
||||
}
|
||||
|
||||
.support-table th:last-child {
|
||||
border-radius: 0 var(--wa-border-radius-l) 0 0;
|
||||
}
|
||||
|
||||
.support-table tr {
|
||||
--wa-color-surface-border: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
.checkout-form wa-input::part(form-control-label),
|
||||
.checkout-form wa-select::part(form-control-label) {
|
||||
font-size: var(--wa-font-size-s);
|
||||
margin-block-end: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
.order-item .finish {
|
||||
color: var(--wa-color-text-quiet);
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-style: italic;
|
||||
}
|
||||
|
||||
.wa-theme-premium-dark {
|
||||
& .message-composer .tools .grouped-buttons:not(:last-of-type) {
|
||||
--wa-color-neutral-border-quiet: var(--wa-color-base-40);
|
||||
}
|
||||
|
||||
& .preview-container pre,
|
||||
& .preview-container code {
|
||||
background-color: var(--wa-color-base-20);
|
||||
}
|
||||
|
||||
/* syntax highlighting */
|
||||
& .token {
|
||||
&.selector {
|
||||
color: var(--wa-color-green-80);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--wa-color-primary-80);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--wa-color-base-95);
|
||||
}
|
||||
|
||||
&.attr-name {
|
||||
color: var(--wa-color-green-80);
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: var(--wa-color-yellow-80);
|
||||
}
|
||||
}
|
||||
}
|
||||
.preview-container pre,
|
||||
.preview-container code {
|
||||
background-color: var(--wa-color-base-90);
|
||||
font-size: var(--font-size-m);
|
||||
}
|
||||
|
||||
/* syntax highlighting */
|
||||
.token {
|
||||
&.selector {
|
||||
color: var(--wa-color-green-30);
|
||||
}
|
||||
|
||||
&.tag {
|
||||
color: var(--wa-color-primary-30);
|
||||
}
|
||||
|
||||
&.punctuation {
|
||||
color: var(--wa-color-base-10);
|
||||
}
|
||||
|
||||
&.attr-name {
|
||||
color: var(--wa-color-green-30);
|
||||
}
|
||||
|
||||
&.attr-value {
|
||||
color: var(--wa-color-yellow-30);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* responsive */
|
||||
@container preview (min-width: 1040px) {
|
||||
.strata.hero {
|
||||
background: var(--wa-color-warning-fill-normal) url('/assets/images/themer/premium/hero.png') -4rem 35% no-repeat;
|
||||
padding-top: 15rem;
|
||||
padding-left: 50%;
|
||||
}
|
||||
|
||||
.strata.products {
|
||||
margin-top: -25rem;
|
||||
padding-top: 10rem;
|
||||
background: linear-gradient(0deg, var(--wa-color-surface-lowered) 60%, rgba(255, 255, 255, 0) 100%);
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Animated Image
|
||||
description: A component for displaying animated GIFs and WEBPs that play and pause on interaction.
|
||||
tags: [imagery, niche]
|
||||
icon: animated-image
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Animation
|
||||
description: Animate elements declaratively with nearly 100 baked-in presets, or roll your own with custom keyframes.
|
||||
tags: [helpers, primitives]
|
||||
icon: animation
|
||||
tags: component
|
||||
---
|
||||
|
||||
To animate an element, wrap it in `<wa-animation>` 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.
|
||||
@@ -197,3 +196,4 @@ Animations won't play until you apply the `play` attribute. You can omit it init
|
||||
animation.play = true;
|
||||
});
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Avatar
|
||||
description: Avatars are used to represent a person or object.
|
||||
tags: [imagery, apps, content]
|
||||
icon: avatar
|
||||
tags: 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.
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Badge
|
||||
description: Badges are used to draw attention and display statuses or counts.
|
||||
tags: [feedback, content]
|
||||
icon: badge
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -128,3 +127,4 @@ When including badges in menu items, use the `suffix` slot to make sure they're
|
||||
<wa-menu-item>Comments <wa-badge slot="suffix" variant="neutral" pill>4</wa-badge></wa-menu-item>
|
||||
<wa-menu-item>Replies <wa-badge slot="suffix" variant="neutral" pill>12</wa-badge></wa-menu-item>
|
||||
</wa-menu>
|
||||
```
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Breadcrumb
|
||||
description: Breadcrumbs provide a group of links so users can easily navigate a website's hierarchy.
|
||||
tags: [navigation]
|
||||
icon: breadcrumb
|
||||
tags: 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.
|
||||
@@ -172,3 +171,4 @@ Alternatively, you can place dropdown menus in a prefix or suffix slot.
|
||||
</wa-dropdown>
|
||||
</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
```
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Button Group
|
||||
description: Button groups can be used to group related buttons into sections.
|
||||
tags: [actions, forms, apps]
|
||||
icon: button-group
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -140,17 +139,15 @@ Pill buttons are supported through the button's `pill` attribute.
|
||||
</wa-button-group>
|
||||
```
|
||||
|
||||
### Dropdowns and Native Buttons in Button Groups
|
||||
### Dropdowns in Button Groups
|
||||
|
||||
Other elements can also be placed inside button groups:
|
||||
- Native buttons as long as their [native styles](/docs/native/button) are included
|
||||
- Dropdowns as long as the trigger is either a `<wa-button>`, or a `<button>` with [native styles](/docs/native/button) included.
|
||||
Dropdowns can be placed inside button groups as long as the trigger is an `<wa-button>` element.
|
||||
|
||||
```html {.example}
|
||||
<wa-button-group label="Example Button Group">
|
||||
<wa-button>Button</wa-button>
|
||||
<button>Native Button</button>
|
||||
<wa-dropdown hoist>
|
||||
<wa-button>Button</wa-button>
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger" caret>Dropdown</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Item 1</wa-menu-item>
|
||||
@@ -168,9 +165,9 @@ Create a split button using a button and a dropdown. Use a [visually hidden](/do
|
||||
```html {.example}
|
||||
<wa-button-group label="Example Button Group">
|
||||
<wa-button variant="brand">Save</wa-button>
|
||||
<wa-dropdown placement="bottom-end" hoist>
|
||||
<wa-dropdown placement="bottom-end">
|
||||
<wa-button slot="trigger" variant="brand" caret>
|
||||
<span class="wa-visually-hidden">More options</span>
|
||||
<wa-visually-hidden>More options</wa-visually-hidden>
|
||||
</wa-button>
|
||||
<wa-menu>
|
||||
<wa-menu-item>Save</wa-menu-item>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
---
|
||||
title: Button
|
||||
description: Buttons represent actions that are available to the user.
|
||||
tags: [actions, forms]
|
||||
native: button
|
||||
icon: button
|
||||
tags: component
|
||||
natives: button
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -29,37 +28,35 @@ Use the `variant` attribute to set the button's semantic variant.
|
||||
Use the `appearance` attribute to change the button's visual appearance.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="neutral">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
|
||||
<wa-button appearance="filled" variant="neutral">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="neutral">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="brand">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="brand">Outlined</wa-button>
|
||||
<wa-button appearance="filled" variant="brand">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="brand">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="success">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="success">Outlined</wa-button>
|
||||
<wa-button appearance="filled" variant="success">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="success">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="warning">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="warning">Outlined</wa-button>
|
||||
<wa-button appearance="filled" variant="warning">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="warning">Plain</wa-button>
|
||||
</div>
|
||||
<div class="wa-gap-m">
|
||||
<wa-button appearance="accent" variant="danger">Accent</wa-button>
|
||||
<wa-button appearance="outlined" variant="danger">Outlined</wa-button>
|
||||
<wa-button appearance="filled" variant="danger">Filled</wa-button>
|
||||
<wa-button appearance="plain" variant="danger">Plain</wa-button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<wa-button appearance="accent" variant="neutral">Accent</wa-button>
|
||||
<wa-button appearance="filled" variant="neutral">Filled</wa-button>
|
||||
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
|
||||
<wa-button appearance="plain" variant="neutral">Text</wa-button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<wa-button appearance="accent" variant="brand">Accent</wa-button>
|
||||
<wa-button appearance="filled" variant="brand">Filled</wa-button>
|
||||
<wa-button appearance="outlined" variant="brand">Outlined</wa-button>
|
||||
<wa-button appearance="plain" variant="brand">Text</wa-button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<wa-button appearance="accent" variant="success">Accent</wa-button>
|
||||
<wa-button appearance="filled" variant="success">Filled</wa-button>
|
||||
<wa-button appearance="outlined" variant="success">Outlined</wa-button>
|
||||
<wa-button appearance="plain" variant="success">Text</wa-button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<wa-button appearance="accent" variant="warning">Accent</wa-button>
|
||||
<wa-button appearance="filled" variant="warning">Filled</wa-button>
|
||||
<wa-button appearance="outlined" variant="warning">Outlined</wa-button>
|
||||
<wa-button appearance="plain" variant="warning">Text</wa-button>
|
||||
</div>
|
||||
<div>
|
||||
<wa-button appearance="accent" variant="danger">Accent</wa-button>
|
||||
<wa-button appearance="filled" variant="danger">Filled</wa-button>
|
||||
<wa-button appearance="outlined" variant="danger">Outlined</wa-button>
|
||||
<wa-button appearance="plain" variant="danger">Text</wa-button>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Callout
|
||||
description: Callouts are used to display important messages inline.
|
||||
tags: [feedback, content]
|
||||
icon: callout
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -19,104 +18,42 @@ icon: callout
|
||||
Set the `variant` attribute to change the callout's variant.
|
||||
|
||||
```html {.example}
|
||||
{% for variant, info in {
|
||||
brand: {
|
||||
title: 'This is super informative',
|
||||
content: 'You can tell by how pretty the callout is.',
|
||||
icon: 'circle-info'
|
||||
},
|
||||
success: {
|
||||
title: 'Your changes have been saved',
|
||||
content: 'You can safely exit the app now.',
|
||||
icon: 'circle-check'
|
||||
},
|
||||
neutral: {
|
||||
title: 'Your settings have been updated',
|
||||
content: 'Settings will take effect on next login.',
|
||||
icon: 'gear'
|
||||
},
|
||||
warning: {
|
||||
title: 'Your session has ended',
|
||||
content: 'Please login again to continue.',
|
||||
icon: 'triangle-exclamation'
|
||||
},
|
||||
danger: {
|
||||
title: 'Your account has been deleted',
|
||||
content: 'We’re very sorry to see you go!',
|
||||
icon: 'circle-exclamation'
|
||||
}
|
||||
} %}
|
||||
<wa-callout variant="{{ variant }}">
|
||||
<wa-icon slot="icon" name="{{ info.icon }}" variant="regular"></wa-icon>
|
||||
<strong>{{ info.title }}</strong><br />
|
||||
{{ info.content }}
|
||||
</wa-callout>
|
||||
{% if not loop.last %}<br />{% endif %}
|
||||
{% endfor %}
|
||||
```
|
||||
|
||||
### Appearance
|
||||
|
||||
Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`).
|
||||
|
||||
```html {.example}
|
||||
<wa-callout variant="brand" appearance="outlined accent">
|
||||
<wa-icon slot="icon" name="check-to-slot"></wa-icon>
|
||||
This <strong>accent</strong> callout is also <strong>outlined</strong>
|
||||
</wa-callout>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="brand" appearance="accent">
|
||||
<wa-icon slot="icon" name="square-check"></wa-icon>
|
||||
This <strong>accent</strong> callout draws attention without an outline
|
||||
</wa-callout>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="brand" appearance="outlined filled">
|
||||
<wa-icon slot="icon" name="fill-drip" variant="regular"></wa-icon>
|
||||
This callout is both <strong>filled</strong> and <strong>outlined</strong>
|
||||
</wa-callout>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="brand" appearance="filled">
|
||||
<wa-icon slot="icon" name="fill" variant="regular"></wa-icon>
|
||||
This callout is only <strong>filled</strong>
|
||||
</wa-callout>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="brand" appearance="outlined">
|
||||
<wa-icon slot="icon" name="lines-leaning" variant="regular"></wa-icon>
|
||||
Here's an <strong>outlined</strong> callout
|
||||
</wa-callout>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="brand" appearance="plain">
|
||||
<wa-icon slot="icon" name="font" variant="regular"></wa-icon>
|
||||
No bells and whistles on this <strong>plain</strong> callout
|
||||
</wa-callout>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change a callout's size.
|
||||
|
||||
```html {.example}
|
||||
<wa-callout variant="brand" appearance="outlined accent" size="large">
|
||||
<wa-icon slot="icon" name="circle-info" variant="solid"></wa-icon>
|
||||
This is meant to be very emphasized.
|
||||
</wa-callout>
|
||||
<wa-callout>
|
||||
<wa-callout variant="brand">
|
||||
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
|
||||
Normal-sized callout.
|
||||
<strong>This is super informative</strong><br />
|
||||
You can tell by how pretty the callout is.
|
||||
</wa-callout>
|
||||
<wa-callout variant="plain" appearance="plain" size="small">
|
||||
<wa-icon slot="icon" name="circle-info" variant="regular"></wa-icon>
|
||||
Just a small tip!
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="success">
|
||||
<wa-icon slot="icon" name="circle-check" variant="regular"></wa-icon>
|
||||
<strong>Your changes have been saved</strong><br />
|
||||
You can safely exit the app now.
|
||||
</wa-callout>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="neutral">
|
||||
<wa-icon slot="icon" name="gear" variant="regular"></wa-icon>
|
||||
<strong>Your settings have been updated</strong><br />
|
||||
Settings will take effect on next login.
|
||||
</wa-callout>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="warning">
|
||||
<wa-icon slot="icon" name="triangle-exclamation" variant="regular"></wa-icon>
|
||||
<strong>Your session has ended</strong><br />
|
||||
Please login again to continue.
|
||||
</wa-callout>
|
||||
|
||||
<br />
|
||||
|
||||
<wa-callout variant="danger">
|
||||
<wa-icon slot="icon" name="circle-exclamation" variant="regular"></wa-icon>
|
||||
<strong>Your account has been deleted</strong><br />
|
||||
We're very sorry to see you go!
|
||||
</wa-callout>
|
||||
```
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Card
|
||||
description: Cards can be used to group related subjects in a container.
|
||||
tags: [organization, layout]
|
||||
icon: card
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -60,8 +59,7 @@ Basic cards aren't very exciting, but they can display any content you want them
|
||||
|
||||
### Card with Header
|
||||
|
||||
Headers can be used to display titles and more.
|
||||
If using SSR, you need to also use the `with-header` attribute to add a header to the card (if not, it is added automatically).
|
||||
Headers can be used to display titles and more. Use the `with-header` attribute to add a header to the card.
|
||||
|
||||
```html {.example}
|
||||
<wa-card with-header class="card-header">
|
||||
@@ -96,8 +94,7 @@ If using SSR, you need to also use the `with-header` attribute to add a header t
|
||||
|
||||
### Card with Footer
|
||||
|
||||
Footers can be used to display actions, summaries, or other relevant content.
|
||||
If using SSR, you need to also use the `with-footer` attribute to add a footer to the card (if not, it is added automatically).
|
||||
Footers can be used to display actions, summaries, or other relevant content. Use the `with-footer` attribute to add a footer to the card.
|
||||
|
||||
```html {.example}
|
||||
<wa-card with-footer class="card-footer">
|
||||
@@ -124,8 +121,7 @@ If using SSR, you need to also use the `with-footer` attribute to add a footer t
|
||||
|
||||
### Images
|
||||
|
||||
Card images are displayed atop the card and will stretch to fit.
|
||||
If using SSR, you need to also use the `with-image` attribute to add an image to the card (if not, it is added automatically).
|
||||
Card images are displayed atop the card and will stretch to fit. Use the `with-image` attribute to add an image to the card.
|
||||
|
||||
```html {.example}
|
||||
<wa-card with-image class="card-image">
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Carousel Item
|
||||
description: A carousel item represent a slide within a carousel.
|
||||
tags: component
|
||||
parent: carousel
|
||||
icon: carousel-item
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Carousel
|
||||
description: Carousels display an arbitrary number of content slides along a horizontal or vertical axis.
|
||||
tags: [imagery, disclosure]
|
||||
icon: carousel
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,7 +1,6 @@
|
||||
---
|
||||
title: Component Cheatsheet
|
||||
layout: docs
|
||||
unlisted: true
|
||||
---
|
||||
|
||||
<style>
|
||||
@@ -65,21 +64,15 @@ table code {
|
||||
<tr>
|
||||
<th><code>{{ name }}{{ "()" if type == "method" }}</code></th>
|
||||
<td>
|
||||
{% set componentLinks = [] %}
|
||||
{% for component in thingComponents %}
|
||||
{%- set link -%}
|
||||
<a href="../{{ component.slug }}"><code><{{ component.tagName }}></code></a>
|
||||
{%- endset -%}
|
||||
{# https://giuliachiola.dev/posts/add-items-to-an-array-in-nunjucks/ #}
|
||||
{% set componentLinks = (componentLinks.push(link), componentLinks) %}
|
||||
{%- endfor -%}
|
||||
{% if thingComponents.length > 1 %}
|
||||
<details open>
|
||||
<summary><strong>{{ thingComponents.length }}</strong> components</summary>
|
||||
{{ componentLinks | safe }}
|
||||
{% endif %}
|
||||
{% for component in thingComponents %}
|
||||
<a href="../{{ component.slug }}"><code><{{ component.tagName }}></code></a>
|
||||
{%- endfor -%}
|
||||
{% if thingComponents.length > 1 %}
|
||||
</details>
|
||||
{% else %}
|
||||
{{ componentLinks | safe }}
|
||||
{% endif %}
|
||||
</td>
|
||||
</tr>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
title: Checkbox
|
||||
description: Checkboxes allow the user to toggle an option on or off.
|
||||
tags: [inputs, forms]
|
||||
native: checkbox
|
||||
icon: checkbox
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -174,7 +174,7 @@ i.e. the previews of demos using the `viewport` attribute, but also opening demo
|
||||
Just setting `border-radius` or `border` should work as expected:
|
||||
|
||||
```html{.example}
|
||||
<wa-code-demo style="border: 2px dotted var(--wa-color-blue-50); border-radius: var(--wa-border-radius-m)">
|
||||
<wa-code-demo style="border: 2px dotted var(--wa-color-blue-50); border-radius: var(--wa-border-radius-s)">
|
||||
<pre><code class="language-html">
|
||||
<button>Click me!</button>
|
||||
<wa-button>Click me!</wa-button>
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
title: Color Picker
|
||||
description: Color pickers allow the user to select a color.
|
||||
tags: [inputs, forms]
|
||||
native: input
|
||||
icon: color-picker
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -39,12 +37,10 @@ Set the color picker's format with the `format` attribute. Valid options include
|
||||
To prevent users from toggling the format themselves, add the `no-format-toggle` attribute.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-grid" style="--min-column-size: 12ch;">
|
||||
<wa-color-picker format="hex" value="#4a90e2" label="Pick a hex color"></wa-color-picker>
|
||||
<wa-color-picker format="rgb" value="rgb(80, 227, 194)" label="Pick an RGB color"></wa-color-picker>
|
||||
<wa-color-picker format="hsl" value="hsl(290, 87%, 47%)" label="Pick an HSL color"></wa-color-picker>
|
||||
<wa-color-picker format="hsv" value="hsv(55, 89%, 97%)" label="Pick an HSV color"></wa-color-picker>
|
||||
</div>
|
||||
<wa-color-picker format="hex" value="#4a90e2" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker format="rgb" value="rgb(80, 227, 194)" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker format="hsl" value="hsl(290, 87%, 47%)" label="Select a color"></wa-color-picker>
|
||||
<wa-color-picker format="hsv" value="hsv(55, 89%, 97%)" label="Select a color"></wa-color-picker>
|
||||
```
|
||||
|
||||
### Swatches
|
||||
|
||||
@@ -1,11 +1,3 @@
|
||||
{
|
||||
"layout": "component.njk",
|
||||
"tags": ["components"],
|
||||
"eleventyComputed": {
|
||||
"component": "{{ components[page.fileSlug] }}",
|
||||
"description": "{{ components[page.fileSlug].summary }}",
|
||||
"status": "{{ components[page.fileSlug].status }}",
|
||||
"since": "{{ components[page.fileSlug].since }}",
|
||||
"element": "<{{ components[page.fileSlug].tagName }}>"
|
||||
}
|
||||
"layout": "component.njk"
|
||||
}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Copy Button
|
||||
description: Copies data to the clipboard when the user clicks the button.
|
||||
tags: [actions, apps]
|
||||
icon: copy-button
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
---
|
||||
title: Details
|
||||
description: Details show a brief summary and expand to show additional content.
|
||||
tags: [organization, apps, content, disclosure]
|
||||
icon: details
|
||||
native: details
|
||||
tags: component
|
||||
natives: details
|
||||
---
|
||||
|
||||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
---
|
||||
title: Dialog
|
||||
description: 'Dialogs, sometimes called "modals", appear above the page and require the user''s immediate attention.'
|
||||
tags: [organization, apps, disclosure]
|
||||
icon: dialog
|
||||
native: dialog
|
||||
keywords: modal
|
||||
tags: component
|
||||
natives: dialog
|
||||
---
|
||||
|
||||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Divider
|
||||
description: Dividers are used to visually separate or group elements.
|
||||
tags: [organization, content, forms]
|
||||
icon: divider
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Drawer
|
||||
description: Drawers slide in from a container to expose additional options and information.
|
||||
tags: [organization, disclosure]
|
||||
icon: drawer
|
||||
tags: component
|
||||
---
|
||||
|
||||
<!-- cspell:dictionaries lorem-ipsum -->
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Dropdown
|
||||
description: 'Dropdowns expose additional content that "drops down" in a panel.'
|
||||
tags: [actions, apps]
|
||||
icon: dropdown
|
||||
tags: 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.
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Format Bytes
|
||||
description: Formats a number as a human readable bytes value.
|
||||
tags: [helpers, content, inline]
|
||||
icon: format-bytes
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Format Date
|
||||
description: Formats a date/time using the specified locale and options.
|
||||
tags: [helpers, content, inline]
|
||||
icon: format-date
|
||||
tags: 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.
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Format Number
|
||||
description: Formats a number using the specified locale and options.
|
||||
tags: [helpers, content, inline]
|
||||
icon: format-number
|
||||
tags: 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.
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Icon Button
|
||||
description: Icons buttons are simple, icon-only buttons that can be used for actions and in toolbars.
|
||||
tags: [actions, apps]
|
||||
icon: icon-button
|
||||
tags: component
|
||||
---
|
||||
|
||||
For a full list of icons that come bundled with Web Awesome, refer to the [icon component](/docs/components/icon).
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Icon
|
||||
description: Icons are symbols that can be used to represent various options within an application.
|
||||
tags: [imagery, apps, popular]
|
||||
icon: icon
|
||||
tags: 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).
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Image Comparer
|
||||
description: Compare visual differences between similar photos with a sliding panel.
|
||||
tags: [imagery, niche]
|
||||
icon: image-comparer
|
||||
tags: 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.)
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Include
|
||||
description: Includes give you the power to embed external HTML files into the page.
|
||||
tags: [helpers, primitives]
|
||||
icon: include
|
||||
tags: 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.
|
||||
|
||||
492
docs/docs/components/index.md
Normal file
492
docs/docs/components/index.md
Normal file
@@ -0,0 +1,492 @@
|
||||
---
|
||||
title: Components
|
||||
description: Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<p class="index-summary">Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.</p>
|
||||
|
||||
<div id="component-filter">
|
||||
<wa-input type="search" placeholder="Search components" clearable autofocus></wa-input>
|
||||
</div>
|
||||
|
||||
<div id="component-grid" class="index-grid">
|
||||
<h2 class="index-category">Actions</h2>
|
||||
<a href="/docs/components/button">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/button.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Button</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/button-group">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/button-group.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Button Group</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/copy-button">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/copy-button.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Copy Button</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/dropdown">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/dropdown.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Dropdown</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/icon-button">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/icon-button.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Icon Button</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/menu">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/menu.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Menu</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/qr-code">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/qr-code.njk" %}
|
||||
</div>
|
||||
<span class="page-name">QR Code</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
<h2 class="index-category" style="grid-column: 1 / -1">Feedback and Status</h2>
|
||||
<a href="/docs/components/badge">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/badge.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Badge</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/callout">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/callout.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Callout</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/progress-bar">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/progress-bar.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Progress Bar</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/progress-ring">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/progress-ring.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Progress Ring</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/skeleton">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/skeleton.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Skeleton</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/spinner" data-keywords="loader">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/spinner.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Spinner</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/tag">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/tag.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Tag</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/tooltip">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/tooltip.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Tooltip</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
<h2 class="index-category">Imagery</h2>
|
||||
<a href="/docs/components/animated-image">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/animated-image.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Animated Image</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/avatar">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/avatar.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Avatar</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/carousel">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/carousel.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Carousel</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/icon">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/icon.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Icon</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/image-comparer">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/image-comparer.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Image Comparer</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
<h2 class="index-category">Inputs</h2>
|
||||
<a href="/docs/components/checkbox">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/checkbox.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Checkbox</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/color-picker">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/color-picker.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Color Picker</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/input" data-keywords="textfield text field">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/input.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Input</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/radio-group">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/radio-group.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Radio Group</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/range">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/range.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Range</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/rating">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/rating.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Rating</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/select">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/select.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Select</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/switch" data-keywords="toggle">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/switch.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Switch</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/textarea">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/textarea.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Textarea</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
<h2 class="index-category">Navigation</h2>
|
||||
<a href="/docs/components/breadcrumb">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/breadcrumb.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Breadcrumb</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/tab-group">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/tab-group.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Tab Group</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/tree">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/tree.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Tree</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
<h2 class="index-category">Organization</h2>
|
||||
<a href="/docs/components/card">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/card.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Card</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/details">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/details.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Details</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/dialog" data-keywords="modal">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/dialog.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Dialog</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/divider">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/divider.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Divider</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/drawer">
|
||||
<wa-card with-header id="drawer-card">
|
||||
<div slot="header">
|
||||
{% include "svgs/drawer.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Drawer</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/page">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/page.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Page</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/split-panel">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/split-panel.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Split Panel</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
|
||||
<h2 class="index-category">Utilities</h2>
|
||||
<a href="/docs/components/animation">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/animation.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Animation</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/format-bytes">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/format-bytes.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Format Bytes</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/format-date">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/format-date.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Format Date</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/format-number">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/format-number.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Format Number</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/include">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/include.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Include</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/mutation-observer">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/mutation-observer.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Mutation Observer</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/popup">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/popup.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Popup</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/relative-time">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/relative-time.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Relative Time</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/resize-observer">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/resize-observer.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Resize Observer</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
<a href="/docs/components/visually-hidden">
|
||||
<wa-card with-header>
|
||||
<div slot="header">
|
||||
{% include "svgs/visually-hidden.njk" %}
|
||||
</div>
|
||||
<span class="page-name">Visually Hidden</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div id="component-filter-empty" hidden>
|
||||
No results
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
const container = document.getElementById('component-filter');
|
||||
const empty = document.getElementById('component-filter-empty');
|
||||
const grid = document.getElementById('component-grid');
|
||||
const input = container.querySelector('wa-input');
|
||||
|
||||
function updateResults() {
|
||||
const filter = input.value.toLowerCase().trim();
|
||||
|
||||
// Hide headings while filtering
|
||||
grid.querySelectorAll('h2').forEach(heading => {
|
||||
heading.hidden = filter === '' ? false : true;
|
||||
});
|
||||
|
||||
// Show matching components
|
||||
grid.querySelectorAll('a').forEach(link => {
|
||||
const content = link.textContent.toLowerCase();
|
||||
const keywords = link.getAttribute('data-keywords') || '';
|
||||
const isMatch = filter === '' || (content + keywords).includes(filter);
|
||||
link.classList.toggle('hidden', !isMatch);
|
||||
});
|
||||
|
||||
// Show empty state when there's a search filter and no results
|
||||
if (filter !== '' && grid.querySelector('a:not(.hidden)') === null) {
|
||||
empty.hidden = false;
|
||||
} else {
|
||||
empty.hidden = true;
|
||||
}
|
||||
}
|
||||
|
||||
input.addEventListener('wa-input', updateResults);
|
||||
</script>
|
||||
|
||||
<style>
|
||||
wa-card#drawer-card::part(header) {
|
||||
--spacing: 0;
|
||||
justify-content: flex-end;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
#component-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
|
||||
gap: var(--wa-space-m);
|
||||
margin-block-start: var(--wa-space-2xl);
|
||||
|
||||
> a {
|
||||
position: static;
|
||||
visibility: visible;
|
||||
|
||||
&.hidden {
|
||||
display: block;
|
||||
position: absolute;
|
||||
visibility: hidden;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
#component-filter-empty {
|
||||
border: dashed var(--wa-border-width-m) var(--wa-color-neutral-border-quiet);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
font-size: var(--wa-font-size-l);
|
||||
color: var(--wa-color-text-quiet);
|
||||
text-align: center;
|
||||
padding-block: var(--wa-space-2xl);
|
||||
margin-block-start: 0
|
||||
}
|
||||
</style>
|
||||
@@ -1,14 +0,0 @@
|
||||
---
|
||||
title: Components
|
||||
description: Components are the essential building blocks to create intuitive, cohesive experiences. Browse the library of customizable, framework-friendly web components included in Web Awesome.
|
||||
layout: overview
|
||||
categories:
|
||||
- actions
|
||||
- feedback: 'Feedback & Status'
|
||||
- imagery
|
||||
- inputs
|
||||
- navigation
|
||||
- organization
|
||||
- helpers: 'Utilities'
|
||||
override:tags: []
|
||||
---
|
||||
@@ -1,10 +1,8 @@
|
||||
---
|
||||
title: Input
|
||||
description: Inputs collect data from the user.
|
||||
tags: [inputs, forms]
|
||||
icon: input
|
||||
native: input
|
||||
keywords: textfield text field
|
||||
tags: component
|
||||
natives: input
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -135,35 +133,33 @@ Use the `prefix` and `suffix` slots to add icons.
|
||||
Use [CSS parts](#css-parts) to customize the way form controls are drawn. This example uses CSS grid to position the label to the left of the control, but the possible orientations are nearly endless. The same technique works for inputs, textareas, radio groups, and similar form controls.
|
||||
|
||||
```html {.example}
|
||||
<div class="label-on-left">
|
||||
<wa-input label="Name" hint="Enter your name"></wa-input>
|
||||
<wa-input label="Email" type="email" hint="Enter your email"></wa-input>
|
||||
<wa-textarea label="Bio" hint="Tell us something about yourself"></wa-textarea>
|
||||
</div>
|
||||
<wa-input class="label-on-left" label="Name" hint="Enter your name"></wa-input>
|
||||
<wa-input class="label-on-left" label="Email" type="email" hint="Enter your email"></wa-input>
|
||||
<wa-textarea class="label-on-left" label="Bio" hint="Tell us something about yourself"></wa-textarea>
|
||||
|
||||
<style>
|
||||
.label-on-left {
|
||||
--label-width: 3.75rem;
|
||||
--gap-width: 1rem;
|
||||
}
|
||||
|
||||
.label-on-left + .label-on-left {
|
||||
margin-top: var(--wa-space-m);
|
||||
}
|
||||
|
||||
.label-on-left::part(form-control) {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
gap: var(--wa-space-l);
|
||||
grid: auto / var(--label-width) 1fr;
|
||||
gap: var(--wa-space-3xs) var(--gap-width);
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
wa-input, wa-textarea {
|
||||
grid-column: 1 / -1;
|
||||
grid-row-end: span 2;
|
||||
display: grid;
|
||||
grid-template-columns: subgrid;
|
||||
gap: 0 var(--wa-space-l);
|
||||
align-items: center;
|
||||
}
|
||||
.label-on-left::part(form-control-label) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
::part(label) {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
::part(hint) {
|
||||
grid-column: 2;
|
||||
}
|
||||
.label-on-left::part(hint) {
|
||||
grid-column-start: 2;
|
||||
}
|
||||
</style>
|
||||
```
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Menu Item
|
||||
description: Menu items provide options for the user to pick from in a menu.
|
||||
tags: component
|
||||
parent: menu
|
||||
icon: menu
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Menu Label
|
||||
description: Menu labels are used to describe a group of menu items.
|
||||
tags: component
|
||||
parent: menu
|
||||
icon: menu
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Menu
|
||||
description: Menus provide a list of options for the user to choose from.
|
||||
tags: [actions, apps]
|
||||
icon: menu
|
||||
tags: component
|
||||
---
|
||||
|
||||
You can use [menu items](/docs/components/menu-item), [menu labels](/docs/components/menu-label), and [dividers](/docs/components/divider) to compose a menu. Menus support keyboard interactions, including type-to-select an option.
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Mutation Observer
|
||||
description: The Mutation Observer component offers a thin, declarative interface to the MutationObserver API.
|
||||
tags: [helpers, primitives]
|
||||
icon: mutation-observer
|
||||
tags: 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.
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Option
|
||||
description: Options define the selectable items within various form controls such as select.
|
||||
tags: component
|
||||
parent: select
|
||||
icon: option
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Sample Documentation Page
|
||||
description: A sample page for a documentation website using Web Awesome's page component.
|
||||
layout: blank
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
|
||||
<style>
|
||||
@@ -127,7 +126,7 @@ eleventyExcludeFromCollections: true
|
||||
</a>
|
||||
</nav>
|
||||
<header slot="main-header">
|
||||
<div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-flank:end wa-border-radius-m wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-stack" style="margin: var(--wa-space-2xl);">
|
||||
<h1>Great Horned Owl</h1>
|
||||
<wa-divider></wa-divider>
|
||||
@@ -149,7 +148,7 @@ eleventyExcludeFromCollections: true
|
||||
<span class="wa-caption-m">Least Concern</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame" style="wa-border-radius-l max-inline-size: 40ch;">
|
||||
<div class="wa-frame" style="border-radius: var(--wa-border-radius-m); max-inline-size: 40ch;">
|
||||
<img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Sample Media App Page
|
||||
description: A sample page for a media app using Web Awesome's page component.
|
||||
layout: blank
|
||||
eleventyExcludeFromCollections: true
|
||||
---
|
||||
|
||||
<wa-page class="wa-theme-default-dark">
|
||||
@@ -277,21 +276,21 @@ eleventyExcludeFromCollections: true
|
||||
<div slot="main-footer" class="wa-grid wa-gap-xl">
|
||||
<h2 class="wa-heading-2xl">More You Might Like</h2>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Festival of Lights</span>
|
||||
<span class="wa-caption-s">Station</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Holiday Cheer</span>
|
||||
<span class="wa-caption-s">Essential Playlist</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Nursery Rhymes from the Shire</span>
|
||||
@@ -341,7 +340,7 @@ eleventyExcludeFromCollections: true
|
||||
margin: 0;
|
||||
}
|
||||
[slot='navigation'] ul a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: var(--wa-space-xs);
|
||||
}
|
||||
[slot='navigation'] ul a:hover,
|
||||
@@ -357,7 +356,7 @@ eleventyExcludeFromCollections: true
|
||||
justify-content: center;
|
||||
}
|
||||
[slot='navigation'] #recent wa-icon {
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
border-radius: var(--wa-border-radius-xs);
|
||||
}
|
||||
[slot='main-header'] {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
|
||||
@@ -1,10 +1,8 @@
|
||||
---
|
||||
title: Page
|
||||
description: Pages offer an easy way to scaffold entire page layouts using minimal markup.
|
||||
tags: [organization, layout]
|
||||
tags: component
|
||||
isPro: true
|
||||
order: 0
|
||||
# icon: page
|
||||
---
|
||||
|
||||
The page 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.
|
||||
@@ -41,10 +39,6 @@ body {
|
||||
}
|
||||
```
|
||||
|
||||
::info
|
||||
If you use [native styles](/docs/native/), this is already taken care of.
|
||||
:::
|
||||
|
||||
## Examples
|
||||
|
||||
:::warning
|
||||
@@ -69,7 +63,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
<header slot="header" class="wa-split">
|
||||
<div class="wa-cluster">
|
||||
<wa-icon name="feather-pointed" style="color: var(--wa-color-brand-fill-loud); font-size: 1.5em;"></wa-icon>
|
||||
<span id="brand-name" class="wa-heading-s wa-desktop-only">Audubon Worldwide</span>
|
||||
<span id="brand-name" class="wa-heading-s">Audubon Worldwide</span>
|
||||
<a href="#">Our Work</a>
|
||||
<a href="#">About Us</a>
|
||||
<a href="#">Discover</a>
|
||||
@@ -89,7 +83,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
<wa-breadcrumb-item>Great Horned Owl</wa-breadcrumb-item>
|
||||
</wa-breadcrumb>
|
||||
</div>
|
||||
<wa-input id="search" class="wa-desktop-only" placeholder="Search" size="small" style="max-inline-size: 12rem;">
|
||||
<wa-input id="search" placeholder="Search" size="small" style="max-inline-size: 12rem;">
|
||||
<wa-icon slot="prefix" name="magnifying-glass"></wa-icon>
|
||||
</wa-input>
|
||||
</nav>
|
||||
@@ -119,7 +113,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
</a>
|
||||
</nav>
|
||||
<header slot="main-header">
|
||||
<div class="wa-flank:end wa-border-radius-l wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-flank:end wa-border-radius-m wa-theme-default-dark" style="background-color: var(--wa-color-surface-lowered); --content-percentage: 35%; padding: var(--wa-space-m);">
|
||||
<div class="wa-stack" style="margin: var(--wa-space-2xl);">
|
||||
<h1>Great Horned Owl</h1>
|
||||
<wa-divider></wa-divider>
|
||||
@@ -141,7 +135,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
<span class="wa-caption-m">Least Concern</span>
|
||||
</div>
|
||||
</div>
|
||||
<div class="wa-frame" style="border-radius: var(--wa-border-radius-l); max-inline-size: 40ch;">
|
||||
<div class="wa-frame" style="border-radius: var(--wa-border-radius-m); max-inline-size: 40ch;">
|
||||
<img src="https://images.unsplash.com/photo-1544648720-132573cb590d?q=20" />
|
||||
</div>
|
||||
</div>
|
||||
@@ -166,7 +160,7 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
</ul>
|
||||
</section>
|
||||
</footer>
|
||||
<aside slot="aside" class="wa-desktop-only">
|
||||
<aside slot="aside">
|
||||
<h2 class="wa-heading-m">Discover More Birds</h2>
|
||||
<wa-card with-image>
|
||||
<div slot="image" class="wa-frame">
|
||||
@@ -234,6 +228,10 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
--aside-width: 15rem;
|
||||
}
|
||||
wa-page[view='desktop'] {
|
||||
[data-toggle-nav] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
[slot*='navigation'] {
|
||||
border-inline-end: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
}
|
||||
@@ -241,6 +239,12 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
wa-page[view='mobile'] {
|
||||
--menu-width: auto;
|
||||
--aside-width: auto;
|
||||
|
||||
[slot='aside'],
|
||||
#brand-name,
|
||||
#search {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
[slot='banner'] {
|
||||
@@ -267,10 +271,9 @@ It can be opened using a button with `[data-toggle-nav]` that appears in the `su
|
||||
}
|
||||
[slot='navigation-footer'] {
|
||||
border-block-start: var(--wa-border-width-s) var(--wa-border-style) var(--wa-color-surface-border);
|
||||
|
||||
.wa-flank {
|
||||
--flank-size: 1.25em;
|
||||
}
|
||||
}
|
||||
[slot='navigation-footer'] .wa-flank {
|
||||
--flank-size: 1.25em;
|
||||
}
|
||||
[slot='main-header'],
|
||||
main,
|
||||
@@ -306,7 +309,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
|
||||
<wa-icon name="record-vinyl"></wa-icon>
|
||||
<span class="wa-heading-m">radiogaga</span>
|
||||
</div>
|
||||
<wa-input id="search-header" placeholder="Search" class="wa-desktop-only" style="max-inline-size: 100%;">
|
||||
<wa-input id="search-header" placeholder="Search" style="max-inline-size: 100%;">
|
||||
<wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
|
||||
</wa-input>
|
||||
<div class="wa-cluster">
|
||||
@@ -315,7 +318,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
|
||||
</div>
|
||||
</header>
|
||||
<div slot="navigation-header" class="wa-split">
|
||||
<wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%;" class="wa-mobile-only">
|
||||
<wa-input id="search-nav-drawer" placeholder="Search" style="max-inline-size: 100%;">
|
||||
<wa-icon slot="prefix" name="magnifying-glass" ></wa-icon>
|
||||
</wa-input>
|
||||
<div class="wa-split">
|
||||
@@ -576,21 +579,21 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
|
||||
<div slot="main-footer" class="wa-grid wa-gap-xl wa-align-items-center">
|
||||
<h2 class="wa-heading-2xl">More You Might Like</h2>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1675219119611-40323b738563?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Festival of Lights</span>
|
||||
<span class="wa-caption-s">Station</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1481930916222-5ec4696fc0f2?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Holiday Cheer</span>
|
||||
<span class="wa-caption-s">Essential Playlist</span>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-xs">
|
||||
<div class="wa-frame wa-border-radius-l">
|
||||
<div class="wa-frame wa-border-radius-m">
|
||||
<img src="https://images.unsplash.com/photo-1667514627762-521b1c815a89?q=20" alt="" />
|
||||
</div>
|
||||
<span class="wa-heading-s">Nursery Rhymes from the Shire</span>
|
||||
@@ -605,10 +608,17 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
|
||||
--wa-tooltip-arrow-size: 0;
|
||||
background-color: var(--wa-color-surface-lowered);
|
||||
}
|
||||
|
||||
wa-page[view='desktop'] {
|
||||
:is([data-toggle-nav], #search-nav-drawer) {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
wa-page[view='mobile'] {
|
||||
--menu-width: auto;
|
||||
|
||||
#search-header {
|
||||
display: none;
|
||||
}
|
||||
[slot*='main'], main {
|
||||
padding: var(--wa-space-xl);
|
||||
}
|
||||
@@ -647,7 +657,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
|
||||
margin: 0;
|
||||
|
||||
a {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
padding: var(--wa-space-xs);
|
||||
|
||||
&:hover {
|
||||
@@ -664,7 +674,7 @@ A sample media app page using `header`, `navigation-header`, `main-header`, and
|
||||
justify-content: center;
|
||||
}
|
||||
#recent wa-icon {
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
border-radius: var(--wa-border-radius-xs);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -835,10 +845,6 @@ wa-page[view='desktop'] [data-toggle-nav] {
|
||||
}
|
||||
```
|
||||
|
||||
::info
|
||||
If you use [native styles](/docs/native/), this is already taken care for you, and the `data-toggle-nav` button is already hidden on wider screens.
|
||||
:::
|
||||
|
||||
#### Custom Widths
|
||||
|
||||
You specify widths for some slots on your page with [CSS custom properties](#css-custom-properties) for `--menu-width`, `--main-width`, and `--aside-width`.
|
||||
@@ -873,16 +879,3 @@ You can override the default spacing for each slot with your own CSS. In this ex
|
||||
}
|
||||
```
|
||||
|
||||
## Utility classes
|
||||
|
||||
[Native styles](/docs/native/) define a few useful defaults for `<wa-page>`, as well as
|
||||
two utility classes you can use for common responsive design tasks:
|
||||
- `.wa-mobile-only` hides an element on the desktop view
|
||||
- `.wa-desktop-only` hides an element on the mobile view
|
||||
|
||||
|
||||
If you don’t want to use [native styles](/docs/native/), you can include this stylesheet in your project to use these:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/components/page.css' %}" />
|
||||
```
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Popup
|
||||
description: 'Popup is a utility that lets you declaratively anchor "popup" containers to another element.'
|
||||
tags: [helpers, primitives]
|
||||
icon: popup
|
||||
tags: component
|
||||
---
|
||||
|
||||
This component's name is inspired by [`<popup>`](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.
|
||||
@@ -78,7 +77,7 @@ Popup is a low-level utility built specifically for positioning elements. Do not
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-overview-options {
|
||||
@@ -136,7 +135,7 @@ Popups are inactive and hidden until the `active` attribute is applied. Removing
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -173,7 +172,7 @@ By default, anchors are slotted into the popup using the `anchor` slot. If your
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -220,7 +219,7 @@ Since placement is preferred when using `flip`, you can observe the popup's curr
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-placement wa-select {
|
||||
@@ -248,7 +247,7 @@ Use the `distance` attribute to change the distance between the popup and its an
|
||||
<div class="box"></div>
|
||||
</wa-popup>
|
||||
|
||||
<wa-slider min="-50" max="50" step="1" value="0" label="Distance"></wa-slider>
|
||||
<wa-range min="-50" max="50" step="1" value="0" label="Distance"></wa-range>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -264,10 +263,10 @@ Use the `distance` attribute to change the distance between the popup and its an
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-distance wa-slider {
|
||||
.popup-distance wa-range {
|
||||
max-width: 260px;
|
||||
}
|
||||
</style>
|
||||
@@ -275,7 +274,7 @@ Use the `distance` attribute to change the distance between the popup and its an
|
||||
<script>
|
||||
const container = document.querySelector('.popup-distance');
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const distance = container.querySelector('wa-slider');
|
||||
const distance = container.querySelector('wa-range');
|
||||
|
||||
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
|
||||
</script>
|
||||
@@ -292,7 +291,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
|
||||
<div class="box"></div>
|
||||
</wa-popup>
|
||||
|
||||
<wa-slider min="-50" max="50" step="1" value="0" label="Skidding"></wa-slider>
|
||||
<wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
@@ -308,10 +307,10 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-skidding wa-slider {
|
||||
.popup-skidding wa-range {
|
||||
max-width: 260px;
|
||||
}
|
||||
</style>
|
||||
@@ -319,7 +318,7 @@ The `skidding` attribute is similar to `distance`, but instead allows you to off
|
||||
<script>
|
||||
const container = document.querySelector('.popup-skidding');
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const skidding = container.querySelector('wa-slider');
|
||||
const skidding = container.querySelector('wa-range');
|
||||
|
||||
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
|
||||
</script>
|
||||
@@ -383,7 +382,7 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-arrow-options {
|
||||
@@ -450,7 +449,7 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
|
||||
min-width: 50px;
|
||||
min-height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-sync wa-select {
|
||||
@@ -510,7 +509,7 @@ Toggle the switch and scroll the container to see the difference.
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-strategy wa-switch {
|
||||
@@ -566,7 +565,7 @@ Scroll the container to see how the popup flips to prevent clipping.
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -619,7 +618,7 @@ Scroll the container to see how the popup changes it's fallback placement to pre
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -661,7 +660,7 @@ Toggle the switch to see the difference.
|
||||
width: 300px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -713,7 +712,7 @@ Scroll the container to see the popup resize as its available space changes.
|
||||
|
||||
.popup-auto-size .box {
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
|
||||
/* This sets the preferred size of the popup's content */
|
||||
width: 100px;
|
||||
@@ -747,8 +746,8 @@ When a gap exists between the anchor and the popup element, this option will add
|
||||
</wa-popup>
|
||||
<br>
|
||||
<wa-switch checked>Hover Bridge</wa-switch><br>
|
||||
<wa-slider min="0" max="50" step="1" value="10" label="Distance"></wa-slider>
|
||||
<wa-slider min="-50" max="50" step="1" value="0" label="Skidding"></wa-slider>
|
||||
<wa-range min="0" max="50" step="1" value="10" label="Distance"></wa-range>
|
||||
<wa-range min="-50" max="50" step="1" value="0" label="Skidding"></wa-range>
|
||||
</div>
|
||||
<style>
|
||||
.popup-hover-bridge span[slot='anchor'] {
|
||||
@@ -763,10 +762,10 @@ When a gap exists between the anchor and the popup element, this option will add
|
||||
width: 100px;
|
||||
height: 50px;
|
||||
background: var(--wa-color-brand-fill-loud);
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.popup-hover-bridge wa-slider {
|
||||
.popup-hover-bridge wa-range {
|
||||
max-width: 260px;
|
||||
margin-top: .5rem;
|
||||
}
|
||||
@@ -780,8 +779,8 @@ When a gap exists between the anchor and the popup element, this option will add
|
||||
const container = document.querySelector('.popup-hover-bridge');
|
||||
const popup = container.querySelector('wa-popup');
|
||||
const hoverBridge = container.querySelector('wa-switch');
|
||||
const distance = container.querySelector('wa-slider[label="Distance"]');
|
||||
const skidding = container.querySelector('wa-slider[label="Skidding"]');
|
||||
const distance = container.querySelector('wa-range[label="Distance"]');
|
||||
const skidding = container.querySelector('wa-range[label="Skidding"]');
|
||||
distance.addEventListener('wa-input', () => (popup.distance = distance.value));
|
||||
skidding.addEventListener('wa-input', () => (popup.skidding = skidding.value));
|
||||
hoverBridge.addEventListener('wa-change', () => (popup.hoverBridge = hoverBridge.checked));
|
||||
|
||||
@@ -1,15 +1,11 @@
|
||||
---
|
||||
title: Progress Bar
|
||||
description: Progress bars are used to show the status of an ongoing operation.
|
||||
tags: [feedback, apps]
|
||||
native: progress
|
||||
icon: progress-bar
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-bar value="40">
|
||||
<wa-icon slot="prefix" name="tasks"></wa-icon>
|
||||
</wa-progress-bar>
|
||||
<wa-progress-bar value="50"></wa-progress-bar>
|
||||
```
|
||||
|
||||
## Examples
|
||||
@@ -17,16 +13,17 @@ icon: progress-bar
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to label the progress bar and tell assistive devices how to announce it.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-bar value="50" label="Upload progress"></wa-progress-bar>
|
||||
```
|
||||
|
||||
### Custom Height
|
||||
|
||||
Use the `height` CSS property to set the progress bar's height.
|
||||
Use the `--height` custom property to set the progress bar's height.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-bar value="50" style="height: 6px;"></wa-progress-bar>
|
||||
<wa-progress-bar value="50" style="--height: 6px;"></wa-progress-bar>
|
||||
```
|
||||
|
||||
### Showing Values
|
||||
@@ -34,19 +31,17 @@ Use the `height` CSS property to set the progress bar's height.
|
||||
Use the default slot to show a value.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<wa-progress-bar value="50" id="progress-bar-demo">50%</wa-progress-bar>
|
||||
<wa-progress-bar value="50" class="progress-bar-values">50%</wa-progress-bar>
|
||||
|
||||
<div>
|
||||
<wa-icon-button pill name="minus" label="Decrease"></wa-icon-button>
|
||||
<wa-icon-button pill name="plus" label="Increase"></wa-icon-button>
|
||||
</div>
|
||||
</div>
|
||||
<br />
|
||||
|
||||
<wa-button circle><wa-icon name="minus" variant="solid" label="Decrease"></wa-icon></wa-button>
|
||||
<wa-button circle><wa-icon name="plus" variant="solid" label="Increase"></wa-icon></wa-button>
|
||||
|
||||
<script>
|
||||
const progressBar = document.querySelector('#progress-bar-demo');
|
||||
const subtractButton = document.querySelector('wa-icon-button[name="minus"]');
|
||||
const addButton = document.querySelector('wa-icon-button[name="plus"]');
|
||||
const progressBar = document.querySelector('.progress-bar-values');
|
||||
const subtractButton = progressBar.nextElementSibling.nextElementSibling;
|
||||
const addButton = subtractButton.nextElementSibling;
|
||||
|
||||
addButton.addEventListener('click', () => {
|
||||
const value = Math.min(100, progressBar.value + 10);
|
||||
|
||||
@@ -1,14 +1,11 @@
|
||||
---
|
||||
title: Progress Ring
|
||||
description: Progress rings are used to show the progress of a determinate operation in a circular fashion.
|
||||
tags: [feedback, apps]
|
||||
icon: progress-ring
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="25">
|
||||
<wa-icon slot="prefix" name="circle-notch"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
<wa-progress-ring value="25"></wa-progress-ring>
|
||||
```
|
||||
|
||||
## Examples
|
||||
@@ -18,9 +15,7 @@ icon: progress-ring
|
||||
Use the `--size` custom property to set the diameter of the progress ring.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="50" style="--size: 200px;">
|
||||
<wa-icon slot="prefix" name="expand"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
<wa-progress-ring value="50" style="--size: 200px;"></wa-progress-ring>
|
||||
```
|
||||
|
||||
### Track and Indicator Width
|
||||
@@ -28,9 +23,7 @@ Use the `--size` custom property to set the diameter of the progress ring.
|
||||
Use the `--track-width` and `--indicator-width` custom properties to set the width of the progress ring's track and indicator.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;">
|
||||
<wa-icon slot="prefix" name="arrows-alt"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
<wa-progress-ring value="50" style="--track-width: 6px; --indicator-width: 12px;"></wa-progress-ring>
|
||||
```
|
||||
|
||||
### Colors
|
||||
@@ -44,13 +37,19 @@ To change the color, use the `--track-color` and `--indicator-color` custom prop
|
||||
--track-color: pink;
|
||||
--indicator-color: deeppink;
|
||||
"
|
||||
>
|
||||
<wa-icon slot="prefix" name="palette"></wa-icon>
|
||||
</wa-progress-ring>
|
||||
></wa-progress-ring>
|
||||
```
|
||||
|
||||
### Labels
|
||||
|
||||
Use the `label` attribute to label the progress ring and tell assistive devices how to announce it.
|
||||
|
||||
```html {.example}
|
||||
<wa-progress-ring value="50" label="Upload progress"></wa-progress-ring>
|
||||
```
|
||||
|
||||
### Showing Values
|
||||
|
||||
Use the default slot to show a label inside the progress ring.
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: QR Code
|
||||
description: Generates a QR code and renders it using the Canvas API.
|
||||
tags: [actions, apps, niche]
|
||||
icon: qr-code
|
||||
tags: 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.
|
||||
@@ -12,9 +11,7 @@ QR codes are useful for providing small pieces of information to users who can q
|
||||
<wa-qr-code value="https://shoelace.style/" label="Scan this code to visit Web Awesome on the web!"></wa-qr-code>
|
||||
<br />
|
||||
|
||||
<wa-input maxlength="255" clearable label="Value">
|
||||
<wa-icon slot="prefix" name="link"></wa-icon>
|
||||
</wa-input>
|
||||
<wa-input maxlength="255" clearable label="Value"></wa-input>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
@@ -46,9 +43,7 @@ QR codes are useful for providing small pieces of information to users who can q
|
||||
Use the `fill` and `background` attributes to modify the QR code's colors. You should always ensure good contrast for optimal compatibility with QR code scanners.
|
||||
|
||||
```html {.example}
|
||||
<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white">
|
||||
<wa-icon slot="prefix" name="palette"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" fill="deeppink" background="white"></wa-qr-code>
|
||||
```
|
||||
|
||||
### Size
|
||||
@@ -56,9 +51,7 @@ Use the `fill` and `background` attributes to modify the QR code's colors. You s
|
||||
Use the `size` attribute to change the size of the QR code.
|
||||
|
||||
```html {.example}
|
||||
<wa-qr-code value="https://shoelace.style/" size="64">
|
||||
<wa-icon slot="prefix" name="expand"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" size="64"></wa-qr-code>
|
||||
```
|
||||
|
||||
### Radius
|
||||
@@ -66,9 +59,7 @@ Use the `size` attribute to change the size of the QR code.
|
||||
Create a rounded effect with the `radius` attribute.
|
||||
|
||||
```html {.example}
|
||||
<wa-qr-code value="https://shoelace.style/" radius="0.5">
|
||||
<wa-icon slot="prefix" name="circle"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" radius="0.5"></wa-qr-code>
|
||||
```
|
||||
|
||||
### Error Correction
|
||||
@@ -77,18 +68,10 @@ QR codes can be rendered with various levels of [error correction](https://www.q
|
||||
|
||||
```html {.example}
|
||||
<div class="qr-error-correction">
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="L">
|
||||
<wa-icon slot="prefix" name="shield"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="M">
|
||||
<wa-icon slot="prefix" name="shield"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="Q">
|
||||
<wa-icon slot="prefix" name="shield"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="H">
|
||||
<wa-icon slot="prefix" name="shield"></wa-icon>
|
||||
</wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="L"></wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="M"></wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="Q"></wa-qr-code>
|
||||
<wa-qr-code value="https://shoelace.style/" error-correction="H"></wa-qr-code>
|
||||
</div>
|
||||
|
||||
<style>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
---
|
||||
title: Radio Button
|
||||
description: Radios buttons allow the user to select a single option from a group using a button-like control.
|
||||
tags: forms
|
||||
tags: component
|
||||
parent: radio-group
|
||||
icon: radio-group
|
||||
---
|
||||
|
||||
Radio buttons are designed to be used with [radio groups](/docs/components/radio-group). When a radio button has focus, the arrow keys can be used to change the selected option just like standard radio controls.
|
||||
|
||||
@@ -1,8 +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.
|
||||
tags: [inputs, forms]
|
||||
icon: radio-group
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -3,8 +3,6 @@ title: Radio
|
||||
description: Radios allow the user to select a single option from a group.
|
||||
tags: component
|
||||
parent: radio-group
|
||||
native: radio
|
||||
icon: radio-group
|
||||
---
|
||||
|
||||
Radios are designed to be used with [radio groups](/docs/components/radio-group).
|
||||
@@ -47,7 +45,7 @@ Use the `disabled` attribute to disable a radio.
|
||||
</wa-radio-group>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
## Sizes
|
||||
|
||||
Add the `size` attribute to the [Radio Group](/docs/components/radio-group) to change the radios' size.
|
||||
|
||||
|
||||
@@ -1,13 +1,11 @@
|
||||
---
|
||||
title: Slider
|
||||
title: Range
|
||||
description: Ranges allow the user to select a single value within a given range using a slider.
|
||||
tags: [inputs, forms]
|
||||
native: slider
|
||||
icon: slider
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
<wa-slider></wa-slider>
|
||||
<wa-range></wa-range>
|
||||
```
|
||||
|
||||
:::info
|
||||
@@ -21,7 +19,7 @@ This component works with standard `<form>` elements. Please refer to the sectio
|
||||
Use the `label` attribute to give the range an accessible label. For labels that contain HTML, use the `label` slot instead.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider label="Volume" min="0" max="100"></wa-slider>
|
||||
<wa-range label="Volume" min="0" max="100"></wa-range>
|
||||
```
|
||||
|
||||
### Hint
|
||||
@@ -29,7 +27,7 @@ Use the `label` attribute to give the range an accessible label. For labels that
|
||||
Add descriptive hint to a range with the `hint` attribute. For hints that contain HTML, use the `hint` slot instead.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-slider>
|
||||
<wa-range label="Volume" hint="Controls the volume of the current song." min="0" max="100"></wa-range>
|
||||
```
|
||||
|
||||
### Min, Max, and Step
|
||||
@@ -37,7 +35,7 @@ Add descriptive hint to a range with the `hint` attribute. For hints that contai
|
||||
Use the `min` and `max` attributes to set the range's minimum and maximum values, respectively. The `step` attribute determines the value's interval when increasing and decreasing.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider min="0" max="10" step="1"></wa-slider>
|
||||
<wa-range min="0" max="10" step="1"></wa-range>
|
||||
```
|
||||
|
||||
### Disabled
|
||||
@@ -45,7 +43,7 @@ Use the `min` and `max` attributes to set the range's minimum and maximum values
|
||||
Use the `disabled` attribute to disable a slider.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider disabled></wa-slider>
|
||||
<wa-range disabled></wa-range>
|
||||
```
|
||||
|
||||
### Tooltip Placement
|
||||
@@ -53,7 +51,7 @@ Use the `disabled` attribute to disable a slider.
|
||||
By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it below the slider.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider tooltip="bottom"></wa-slider>
|
||||
<wa-range tooltip="bottom"></wa-range>
|
||||
```
|
||||
|
||||
### Disable the Tooltip
|
||||
@@ -61,7 +59,7 @@ By default, the tooltip is shown on top. Set `tooltip` to `bottom` to show it be
|
||||
To disable the tooltip, set `tooltip` to `none`.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider tooltip="none"></wa-slider>
|
||||
<wa-range tooltip="none"></wa-range>
|
||||
```
|
||||
|
||||
### Custom Track Colors
|
||||
@@ -69,12 +67,12 @@ To disable the tooltip, set `tooltip` to `none`.
|
||||
You can customize the active and inactive portions of the track using the `--track-color-active` and `--track-color-inactive` custom properties.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider
|
||||
<wa-range
|
||||
style="
|
||||
--track-color-active: var(--wa-color-brand-fill-loud);
|
||||
--track-color-inactive: var(--wa-color-brand-fill-normal);
|
||||
"
|
||||
></wa-slider>
|
||||
></wa-range>
|
||||
```
|
||||
|
||||
### Custom Track Offset
|
||||
@@ -82,7 +80,7 @@ You can customize the active and inactive portions of the track using the `--tra
|
||||
You can customize the initial offset of the active track using the `--track-active-offset` custom property.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider
|
||||
<wa-range
|
||||
min="-100"
|
||||
max="100"
|
||||
style="
|
||||
@@ -90,7 +88,7 @@ You can customize the initial offset of the active track using the `--track-acti
|
||||
--track-color-inactive: var(--wa-color-brand-fill-normal);
|
||||
--track-active-offset: 50%;
|
||||
"
|
||||
></wa-slider>
|
||||
></wa-range>
|
||||
```
|
||||
|
||||
### Custom Tooltip Formatter
|
||||
@@ -98,21 +96,10 @@ You can customize the initial offset of the active track using the `--track-acti
|
||||
You can change the tooltip's content by setting the `tooltipFormatter` property to a function that accepts the range's value as an argument.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider min="0" max="100" step="1" class="range-with-custom-formatter"></wa-slider>
|
||||
<wa-range min="0" max="100" step="1" class="range-with-custom-formatter"></wa-range>
|
||||
|
||||
<script>
|
||||
const range = document.querySelector('.range-with-custom-formatter');
|
||||
range.tooltipFormatter = value => `Total - ${value}%`;
|
||||
</script>
|
||||
```
|
||||
|
||||
### Right-to-Left languages
|
||||
|
||||
The component adapts to right-to-left (RTL) languages as you would expect.
|
||||
|
||||
```html {.example}
|
||||
<wa-slider dir="rtl"
|
||||
label="مقدار"
|
||||
hint="التحكم في مستوى صوت الأغنية الحالية."
|
||||
style="--track-color-active: var(--wa-color-brand-fill-loud)" value="10"></wa-slider>
|
||||
```
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Rating
|
||||
description: Ratings give users a way to quickly view and provide feedback.
|
||||
tags: [inputs, interactive]
|
||||
icon: rating
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -91,7 +90,7 @@ The event has a payload with `phase` and `value` properties. The `phase` propert
|
||||
position: relative;
|
||||
top: -4px;
|
||||
left: 8px;
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
background: var(--wa-color-neutral-fill-loud);
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
text-align: center;
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Relative Time
|
||||
description: Outputs a localized time phrase relative to the current date and time.
|
||||
tags: [helpers, inline, content]
|
||||
icon: relative-time
|
||||
tags: 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.
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Resize Observer
|
||||
description: The Resize Observer component offers a thin, declarative interface to the ResizeObserver API.
|
||||
tags: [helpers, primitives]
|
||||
icon: resize-observer
|
||||
tags: 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.
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
---
|
||||
title: Select
|
||||
description: Selects allow you to choose items from a menu of predefined options.
|
||||
tags: [inputs, forms]
|
||||
native: select
|
||||
icon: select
|
||||
tags: component
|
||||
natives: input
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -415,10 +414,3 @@ This can be hard to conceptualize, so heres a fairly large example showing how l
|
||||
container.addEventListener("submit", handleLazySubmit)
|
||||
</script>
|
||||
```
|
||||
|
||||
<script type="module">
|
||||
//
|
||||
// TODO - remove once we switch to the Popover API
|
||||
//
|
||||
document.querySelectorAll('wa-code-demo [slot="preview"] wa-select').forEach(select => select.hoist = true);
|
||||
</script>
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Skeleton
|
||||
description: Skeletons are used to provide a visual representation of where content will eventually be drawn.
|
||||
tags: [feedback, apps, content]
|
||||
icon: skeleton
|
||||
tags: 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.
|
||||
@@ -140,7 +139,7 @@ Set a matching width and height to make a circle, square, or rounded avatar skel
|
||||
}
|
||||
|
||||
.skeleton-avatars wa-skeleton:nth-child(2) {
|
||||
--border-radius: var(--wa-border-radius-m);
|
||||
--border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
</style>
|
||||
```
|
||||
@@ -166,7 +165,7 @@ Use the `--border-radius` custom property to make circles, squares, and rectangl
|
||||
}
|
||||
|
||||
.skeleton-shapes .square::part(indicator) {
|
||||
--border-radius: var(--wa-border-radius-m);
|
||||
--border-radius: var(--wa-border-radius-s);
|
||||
}
|
||||
|
||||
.skeleton-shapes .circle::part(indicator) {
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
title: Spinner
|
||||
description: Spinners are used to show the progress of an indeterminate operation.
|
||||
tags: [feedback, apps]
|
||||
keywords: loader
|
||||
icon: spinner
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Split Panel
|
||||
description: Split panels display two adjacent panels, allowing the user to reposition them.
|
||||
tags: [organization, layout, apps]
|
||||
icon: split-panel
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,9 +1,7 @@
|
||||
---
|
||||
title: Switch
|
||||
description: Switches allow the user to toggle an option on or off.
|
||||
tags: [inputs, forms]
|
||||
icon: switch
|
||||
keywords: toggle
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Tab Group
|
||||
description: Tab groups organize content into a container that shows one section at a time.
|
||||
tags: [navigation, disclosure]
|
||||
icon: tab-group
|
||||
tags: component
|
||||
---
|
||||
|
||||
Tab groups make use of [tabs](/docs/components/tab) and [tab panels](/docs/components/tab-panel). Each panel should have a name that's unique within the tab group, and tabs should have a `panel` attribute that points to the respective panel's name.
|
||||
@@ -101,7 +100,7 @@ You can make a tab closable by adding a close button next to the tab and inside
|
||||
<wa-tab-group class="tabs-closable">
|
||||
<wa-tab panel="general">General</wa-tab>
|
||||
<wa-tab panel="closable">Closable</wa-tab>
|
||||
<wa-icon-button slot="nav" tabindex="-1" name="xmark" label="Close the closable tab"></wa-icon-button>
|
||||
<wa-icon-button tabindex="-1" name="xmark" label="Close the closable tab"></wa-icon-button>
|
||||
<wa-tab panel="closable-2">Advanced</wa-tab>
|
||||
|
||||
<wa-tab-panel name="general">This is the general tab panel.</wa-tab-panel>
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Tab Panel
|
||||
description: Tab panels are used inside tab groups to display tabbed content.
|
||||
tags: component
|
||||
parent: tab-group
|
||||
icon: tab-panel
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -3,7 +3,6 @@ title: Tab
|
||||
description: Tabs are used inside tab groups to represent and activate tab panels.
|
||||
tags: component
|
||||
parent: tab-group
|
||||
icon: tab
|
||||
---
|
||||
|
||||
:::info
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Tag
|
||||
description: Tags are used as labels to organize things or to indicate a selection.
|
||||
tags: [feedback, content, apps]
|
||||
icon: tag
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -15,50 +14,9 @@ icon: tag
|
||||
|
||||
## Examples
|
||||
|
||||
### Appearance
|
||||
|
||||
Use the `size` attribute to change a tag's visual appearance.
|
||||
The default appearance is `outlined filled`.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<p>
|
||||
<wa-tag variant="brand" appearance="outlined accent">Outlined accent</wa-tag>
|
||||
<wa-tag variant="brand" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="brand" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="brand" appearance="outlined filled">Outlined Filled</wa-tag>
|
||||
</p>
|
||||
<p>
|
||||
<wa-tag variant="success" appearance="outlined accent">Outlined accent</wa-tag>
|
||||
<wa-tag variant="success" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="success" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="success" appearance="outlined filled">Outlined Filled</wa-tag>
|
||||
<p>
|
||||
<wa-tag variant="neutral" appearance="outlined accent">Outlined accent</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="outlined filled">Outlined Filled</wa-tag>
|
||||
<p>
|
||||
<wa-tag variant="warning" appearance="outlined accent">Outlined accent</wa-tag>
|
||||
<wa-tag variant="warning" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="warning" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="warning" appearance="outlined filled">Outlined Filled</wa-tag>
|
||||
<p>
|
||||
<wa-tag variant="danger" appearance="outlined accent">Outlined accent</wa-tag>
|
||||
<wa-tag variant="danger" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag variant="danger" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag variant="danger" appearance="outlined filled">Outlined Filled</wa-tag>
|
||||
</div>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change a tag's size.
|
||||
Use the `size` attribute to change a tab's size.
|
||||
|
||||
```html {.example}
|
||||
<wa-tag size="small">Small</wa-tag>
|
||||
|
||||
@@ -1,9 +1,8 @@
|
||||
---
|
||||
title: Textarea
|
||||
description: Textareas collect data from the user and allow multiple lines of text.
|
||||
tags: [inputs, forms]
|
||||
icon: textarea
|
||||
native: input
|
||||
tags: component
|
||||
natives: input
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
@@ -64,14 +63,6 @@ Use the `disabled` attribute to disable a textarea.
|
||||
<wa-textarea placeholder="Textarea" disabled></wa-textarea>
|
||||
```
|
||||
|
||||
### Value
|
||||
|
||||
Use the `value` attribute to set an initial value.
|
||||
|
||||
```html {.example}
|
||||
<wa-textarea value="Write something awesome!"></wa-textarea>
|
||||
```
|
||||
|
||||
### Sizes
|
||||
|
||||
Use the `size` attribute to change a textarea's size.
|
||||
@@ -99,19 +90,3 @@ Textareas will automatically resize to expand to fit their content when `resize`
|
||||
```html {.example}
|
||||
<wa-textarea resize="auto"></wa-textarea>
|
||||
```
|
||||
|
||||
### Resize horizontal
|
||||
|
||||
Textareas can be made to resize horizontally when `resize` is set to `"horizontal"`
|
||||
|
||||
```html {.example}
|
||||
<wa-textarea resize="horizontal"></wa-textarea>
|
||||
```
|
||||
|
||||
### Resize both
|
||||
|
||||
Textareas can be made to resize both vertically and horizontally when `resize` is set to `"both"`
|
||||
|
||||
```html {.example}
|
||||
<wa-textarea resize="both"></wa-textarea>
|
||||
```
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Tooltip
|
||||
description: Tooltips display additional information based on a specific action.
|
||||
tags: [feedback, apps, disclosure]
|
||||
icon: tooltip
|
||||
tags: component
|
||||
---
|
||||
|
||||
|
||||
|
||||
@@ -1,8 +1,7 @@
|
||||
---
|
||||
title: Tree Item
|
||||
description: A tree item serves as a hierarchical node that lives inside a tree.
|
||||
tags: [navigation, disclosure, apps]
|
||||
icon: tree
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
@@ -1,8 +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.
|
||||
tags: [navigation, disclosure, apps]
|
||||
icon: tree
|
||||
tags: component
|
||||
---
|
||||
|
||||
```html {.example}
|
||||
|
||||
45
docs/docs/components/visually-hidden.md
Normal file
45
docs/docs/components/visually-hidden.md
Normal file
@@ -0,0 +1,45 @@
|
||||
---
|
||||
title: Visually Hidden
|
||||
description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
|
||||
tags: 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."
|
||||
|
||||
Since visually hidden content can receive focus when tabbing, the element will become visible when something inside receives focus. This behavior is intentional, as sighted keyboard user won't be able to determine where the focus indicator is without it.
|
||||
|
||||
```html {.example}
|
||||
<div style="min-height: 1.875rem;">
|
||||
<wa-visually-hidden>
|
||||
<a href="#">Skip to main content</a>
|
||||
</wa-visually-hidden>
|
||||
</div>
|
||||
```
|
||||
|
||||
## Examples
|
||||
|
||||
### Links That Open in New Windows
|
||||
|
||||
In this example, the link will open a new window. Screen readers will announce "opens in a new window" even though the text content isn't visible to sighted users.
|
||||
|
||||
```html {.example}
|
||||
<a href="https://example.com/" target="_blank">
|
||||
Visit External Page
|
||||
<wa-icon name="arrow-up-right-from-square" variant="regular"></wa-icon>
|
||||
<wa-visually-hidden>opens in a new window</wa-visually-hidden>
|
||||
</a>
|
||||
```
|
||||
|
||||
### Content Conveyed By Context
|
||||
|
||||
Adding a label may seem redundant at times, but they're very helpful for unsighted users. Rather than omit them, you can provide context to unsighted users with visually hidden content that will be announced by assistive devices such as screen readers.
|
||||
|
||||
```html {.example}
|
||||
<wa-card style="width: 100%; max-width: 360px;">
|
||||
<header>
|
||||
<wa-visually-hidden>Personal Info</wa-visually-hidden>
|
||||
</header>
|
||||
<wa-input label="Name" style="margin-bottom: .5rem;"></wa-input>
|
||||
<wa-input label="Email" type="email"></wa-input>
|
||||
</wa-card>
|
||||
```
|
||||
@@ -1,10 +0,0 @@
|
||||
export default {
|
||||
eleventyComputed: {
|
||||
children(data) {
|
||||
let mainTag = data.tags?.[0];
|
||||
let collection = data.collections[mainTag] ?? [];
|
||||
|
||||
return collection.filter(item => item.data.parent === data.page.fileSlug);
|
||||
},
|
||||
},
|
||||
};
|
||||
@@ -15,7 +15,7 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
|
||||
<wa-option>Well, maybe two is OK</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea class="wa-valid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
|
||||
<wa-slider class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
|
||||
<wa-range class="wa-valid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
|
||||
<wa-checkbox class="wa-valid" checked>I am awesome</wa-checkbox><br>
|
||||
<wa-checkbox class="wa-valid">So am I</wa-checkbox><br><br>
|
||||
<wa-switch class="wa-valid" checked>Still awesome</wa-switch><br>
|
||||
@@ -35,7 +35,7 @@ Adding the `wa-valid` or `wa-invalid` class to a form control will change its ap
|
||||
<wa-option>Well, maybe two is OK</wa-option>
|
||||
</wa-select>
|
||||
<wa-textarea class="wa-invalid" label="Bio" hint="Tell us about yourself" placeholder="Enter a bio"></wa-textarea><br>
|
||||
<wa-slider class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-slider><br>
|
||||
<wa-range class="wa-invalid" value="50" label="Volume" hint="Crank it up"></wa-range><br>
|
||||
<wa-checkbox class="wa-invalid" checked>I am awesome</wa-checkbox><br>
|
||||
<wa-checkbox class="wa-invalid">So am I</wa-checkbox><br><br>
|
||||
<wa-switch class="wa-invalid" checked>Still awesome</wa-switch><br>
|
||||
|
||||
Some files were not shown because too many files have changed in this diff Show More
Reference in New Issue
Block a user