mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 07:29:14 +00:00
Compare commits
1 Commits
v3.0.0-bet
...
carousel-f
| Author | SHA1 | Date | |
|---|---|---|---|
|
4c7aa3f164 |
14
package-lock.json
generated
14
package-lock.json
generated
@@ -589,10 +589,6 @@
|
||||
"node": ">=12.17"
|
||||
}
|
||||
},
|
||||
"node_modules/@awesome.me/webawesome": {
|
||||
"resolved": "packages/webawesome",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/@babel/code-frame": {
|
||||
"version": "7.23.5",
|
||||
"resolved": "https://registry.npmjs.org/@babel/code-frame/-/code-frame-7.23.5.tgz",
|
||||
@@ -2488,6 +2484,10 @@
|
||||
"resolved": "https://registry.npmjs.org/@shoelace-style/localize/-/localize-3.2.1.tgz",
|
||||
"integrity": "sha512-r4C9C/5kSfMBIr0D9imvpRdCNXtUNgyYThc4YlS6K5Hchv1UyxNQ9mxwj+BTRH2i1Neits260sR3OjKMnplsFA=="
|
||||
},
|
||||
"node_modules/@shoelace-style/webawesome": {
|
||||
"resolved": "packages/webawesome",
|
||||
"link": true
|
||||
},
|
||||
"node_modules/@shoelace-style/webawesome-pro": {
|
||||
"resolved": "packages/webawesome-pro",
|
||||
"link": true
|
||||
@@ -13974,8 +13974,8 @@
|
||||
}
|
||||
},
|
||||
"packages/webawesome": {
|
||||
"name": "@awesome.me/webawesome",
|
||||
"version": "3.0.0-beta.1",
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-alpha.13",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
@@ -13994,7 +13994,7 @@
|
||||
},
|
||||
"packages/webawesome-pro": {
|
||||
"name": "@shoelace-style/webawesome-pro",
|
||||
"version": "3.0.0-beta.1",
|
||||
"version": "3.0.0-alpha.13",
|
||||
"license": "TODO",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
|
||||
@@ -1 +0,0 @@
|
||||
Visit our documentation! <https://webawesome.com>
|
||||
@@ -123,9 +123,6 @@ export default async function (eleventyConfig) {
|
||||
/** This largely mimics what an app would do and just stubs out what we don't care about. */
|
||||
return nunjucks.renderString(content, {
|
||||
// Stub the server EJS shortcodes.
|
||||
currentUser: {
|
||||
hasPro: false,
|
||||
},
|
||||
server: {
|
||||
head: '',
|
||||
loginOrAvatar: '',
|
||||
@@ -188,17 +185,17 @@ export default async function (eleventyConfig) {
|
||||
// Replace [issue:1234] with a link to the issue on GitHub
|
||||
{
|
||||
replace: /\[pr:([0-9]+)\]/gs,
|
||||
replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1" target="_blank">#$1</a>',
|
||||
replaceWith: '<a href="https://github.com/shoelace-style/webawesome/pull/$1">#$1</a>',
|
||||
},
|
||||
// Replace [pr:1234] with a link to the pull request on GitHub
|
||||
{
|
||||
replace: /\[issue:([0-9]+)\]/gs,
|
||||
replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1" target="_blank">#$1</a>',
|
||||
replaceWith: '<a href="https://github.com/shoelace-style/webawesome/issues/$1">#$1</a>',
|
||||
},
|
||||
// Replace [discuss:1234] with a link to the discussion on GitHub
|
||||
{
|
||||
replace: /\[discuss:([0-9]+)\]/gs,
|
||||
replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1" target="_blank">#$1</a>',
|
||||
replaceWith: '<a href="https://github.com/shoelace-style/webawesome/discussions/$1">#$1</a>',
|
||||
},
|
||||
]),
|
||||
);
|
||||
|
||||
@@ -715,10 +715,7 @@ export const elementPresets = themes.map(theme => ({
|
||||
* All palettes used by themes in a simple array.
|
||||
*/
|
||||
export const palettes = themes
|
||||
.map(theme => ({
|
||||
...theme.palette,
|
||||
isPro: theme.isPro,
|
||||
}))
|
||||
.map(theme => theme.palette)
|
||||
.filter(
|
||||
(palette, index, array) =>
|
||||
array.findIndex(p => p.name === palette.name && p.filename === palette.filename) === index,
|
||||
|
||||
@@ -61,27 +61,19 @@
|
||||
<wa-badge variant="brand" appearance="filled" class="wa-desktop-only">Beta</wa-badge>
|
||||
</div>
|
||||
|
||||
<div id="docs-toolbar" class="wa-cluster">
|
||||
<div id="docs-toolbar" class="wa-cluster wa-gap-xs">
|
||||
{# Desktop selectors #}
|
||||
<div class="wa-desktop-only wa-cluster wa-gap-xs">
|
||||
{% include "theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
</div>
|
||||
|
||||
<wa-divider orientation="vertical" class="wa-desktop-only"></wa-divider>
|
||||
|
||||
<div id="github-buttons" class="wa-cluster wa-gap-xs">
|
||||
<wa-button id="github-repo-button" href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
|
||||
<wa-icon family="brands" name="github" label="GitHub"></wa-icon>
|
||||
</wa-button>
|
||||
<wa-tooltip for="github-repo-button" distance="2">GitHub</wa-tooltip>
|
||||
<wa-button id="github-star-button" href="https://github.com/shoelace-style/webawesome/stargazers" rel="noopener noreferrer" target="_blank" appearance="filled" size="small">
|
||||
<wa-icon name="star" variant="regular" label="Star this repository"></wa-icon>
|
||||
</wa-button>
|
||||
<wa-tooltip for="github-star-button" distance="2">Star this repository</wa-tooltip>
|
||||
</div>
|
||||
|
||||
<wa-divider orientation="vertical"></wa-divider>
|
||||
{# Search #}
|
||||
<wa-button id="search-trigger" appearance="outlined" size="small" data-search>
|
||||
<wa-icon slot="start" name="magnifying-glass"></wa-icon>
|
||||
Search
|
||||
<kbd slot="end" class="wa-desktop-only">/</kbd>
|
||||
</wa-button>
|
||||
|
||||
{# Login #}
|
||||
{% server "loginOrAvatar" %}
|
||||
@@ -92,7 +84,7 @@
|
||||
{% if hasSidebar %}
|
||||
{# Mobile selectors #}
|
||||
<div class="wa-mobile-only" slot="navigation-header">
|
||||
<div class="wa-cluster wa-gap-xs" style="flex-wrap: nowrap;">
|
||||
<div class="wa-cluster wa-gap-xs">
|
||||
{% include "theme-selector.njk" %}
|
||||
{% include "color-scheme-selector.njk" %}
|
||||
</div>
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" title="Press \ to toggle">
|
||||
<wa-select class="color-scheme-selector" appearance="filled" size="small" value="auto" pill title="Press \ to toggle">
|
||||
<wa-icon class="only-light" slot="start" name="sun" variant="regular"></wa-icon>
|
||||
<wa-icon class="only-dark" slot="start" name="moon" variant="regular"></wa-icon>
|
||||
<wa-option value="light">
|
||||
|
||||
@@ -1,10 +1,3 @@
|
||||
{# Search #}
|
||||
<wa-button id="search-trigger" appearance="outlined" size="small" data-search>
|
||||
<wa-icon slot="start" name="magnifying-glass"></wa-icon>
|
||||
Search
|
||||
<kbd slot="end" class="wa-desktop-only">/</kbd>
|
||||
</wa-button>
|
||||
|
||||
{# Getting started #}
|
||||
<h2>Getting Started</h2>
|
||||
<ul>
|
||||
@@ -19,7 +12,6 @@
|
||||
<h2>Resources</h2>
|
||||
<ul>
|
||||
<li><a href="https://github.com/shoelace-style/webawesome/discussions" target="_blank">Help & Support</a></li>
|
||||
<li><a href="https://github.com/shoelace-style/webawesome/">Source Code</a></li>
|
||||
<li><a href="/docs/resources/community">Community</a></li>
|
||||
<li><a href="/docs/resources/accessibility">Accessibility</a></li>
|
||||
<li><a href="/docs/resources/browser-support">Browser Support</a></li>
|
||||
@@ -323,15 +315,12 @@
|
||||
</ul>
|
||||
</wa-details>
|
||||
|
||||
<!-- Theming -->
|
||||
<h2>Theming</h2>
|
||||
<!-- Color Palettes & Themes -->
|
||||
<h2>Color Palettes & Themes</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/color-palettes">Color Palettes</a></li>
|
||||
<li><a href="/docs/themes">Themes</a></li>
|
||||
<li>
|
||||
<a href="/themer" data-turbo="false">Theme Builder</a>
|
||||
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
|
||||
</li>
|
||||
<li><a href="/themer" data-turbo="false">Theme Builder</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Design tokens -->
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
<wa-select appearance="filled" size="small" value="default" class="theme-selector">
|
||||
<wa-select appearance="filled" size="small" value="default" pill class="theme-selector">
|
||||
<wa-icon slot="start" name="paintbrush" variant="regular"></wa-icon>
|
||||
|
||||
{# Free themes #}
|
||||
|
||||
@@ -26,7 +26,7 @@
|
||||
<p>Learn more about <a href="/docs/usage/#slots">using slots</a>.</p>
|
||||
|
||||
<wa-scroller>
|
||||
<table class="component-table wa-hover-rows">
|
||||
<table class="component-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
@@ -57,7 +57,7 @@
|
||||
<p>Learn more about <a href="/docs/usage/#attributes-and-properties">attributes and properties</a>.</p>
|
||||
|
||||
<wa-scroller>
|
||||
<table class="component-table wa-hover-rows">
|
||||
<table class="component-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
@@ -104,7 +104,7 @@
|
||||
<p>Learn more about <a href="/docs/usage/#methods">methods</a>.</p>
|
||||
|
||||
<wa-scroller>
|
||||
<table class="component-table wa-hover-rows">
|
||||
<table class="component-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
@@ -139,7 +139,7 @@
|
||||
<p>Learn more about <a href="/docs/usage/#events">events</a>.</p>
|
||||
|
||||
<wa-scroller>
|
||||
<table class="component-table wa-hover-rows">
|
||||
<table class="component-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
@@ -166,7 +166,7 @@
|
||||
<p>Learn more about <a href="/docs/customizing/#custom-properties">CSS custom properties</a>.</p>
|
||||
|
||||
<wa-scroller>
|
||||
<table class="component-table wa-hover-rows">
|
||||
<table class="component-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
@@ -198,7 +198,7 @@
|
||||
<p>Learn more about <a href="/docs/customizing/#custom-states">custom states</a>.</p>
|
||||
|
||||
<wa-scroller>
|
||||
<table class="component-table wa-hover-rows">
|
||||
<table class="component-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
@@ -225,7 +225,7 @@
|
||||
<p>Learn more about <a href="/docs/customizing/#css-parts">CSS parts</a>.</p>
|
||||
|
||||
<wa-scroller>
|
||||
<table class="component-table wa-hover-rows">
|
||||
<table class="component-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th class="table-name">Name</th>
|
||||
@@ -264,9 +264,6 @@
|
||||
The <a href="/docs/#quick-start-autoloading-via-cdn">autoloader</a> is the recommended way to import components. If you prefer to do it manually, use one of the following code snippets.
|
||||
</p>
|
||||
|
||||
|
||||
{% set componentName = component.tagName | stripPrefix %}
|
||||
{% set componentPath = ["components/", componentName, "/", componentName, ".js"] | join("") %}
|
||||
<wa-tab-group label="How would you like to import this component?">
|
||||
<wa-tab panel="cdn">CDN</wa-tab>
|
||||
<wa-tab panel="npm">npm</wa-tab>
|
||||
@@ -275,20 +272,19 @@
|
||||
<p>
|
||||
To manually import this component from the CDN, use the following code.
|
||||
</p>
|
||||
|
||||
<pre><code class="language-js">import '{% cdnUrl componentPath %}';</code></pre>
|
||||
<pre><code class="language-js">import '{% cdnUrl component.path %}';</code></pre>
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="npm">
|
||||
<p>
|
||||
To manually import this component from NPM, use the following code.
|
||||
</p>
|
||||
<pre><code class="language-js">import '@awesome.me/webawesome/dist/{{ componentPath }}';</code></pre>
|
||||
Coming soon!
|
||||
</wa-tab-panel>
|
||||
<wa-tab-panel name="react">
|
||||
Coming soon!
|
||||
{# NOTE - disabled for alpha/beta
|
||||
<p>
|
||||
To manually import this component from React, use the following code.
|
||||
</p>
|
||||
<pre><code class="language-js">import '@awesome.me/webawesome/dist/react/{{ componentName }}';</code></pre>
|
||||
<pre><code class="language-js">import '@shoelace-style/webawesome/react/{{ component.tagName | stripPrefix }}';</code></pre>
|
||||
#}
|
||||
</wa-tab-panel>
|
||||
</wa-tab-group>
|
||||
|
||||
|
||||
@@ -32,7 +32,8 @@ export function copyCodePlugin(eleventyConfig, options = {}) {
|
||||
}
|
||||
|
||||
// Add a copy button
|
||||
pre.innerHTML += `<wa-copy-button from="${codeId}" class="copy-button wa-dark"></wa-copy-button>`;
|
||||
pre.innerHTML += `<wa-button href="#${preId}" class="block-link-icon" appearance="plain" size="small"><wa-icon name="link" label="Copy link"></wa-icon></wa-button>
|
||||
<wa-copy-button from="${codeId}" class="copy-button"></wa-copy-button>`;
|
||||
});
|
||||
|
||||
return doc.toString();
|
||||
|
||||
@@ -25,11 +25,6 @@ wa-copy-button.copy-button {
|
||||
border-radius: var(--wa-border-radius-m);
|
||||
padding: 0.25rem;
|
||||
|
||||
&::part(button) {
|
||||
background: transparent;
|
||||
cursor: copy;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
color: white;
|
||||
@@ -50,3 +45,19 @@ wa-copy-button.copy-button {
|
||||
opacity: 1;
|
||||
}
|
||||
}
|
||||
|
||||
.block-link-icon {
|
||||
position: absolute;
|
||||
inset-block-start: 0;
|
||||
inset-inline-end: calc(100% + var(--wa-space-s));
|
||||
|
||||
transition: var(--wa-transition-slow);
|
||||
|
||||
&:not(:hover, :focus) {
|
||||
opacity: 50%;
|
||||
}
|
||||
|
||||
:not(:hover, :focus-within) > & {
|
||||
opacity: 0;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -73,33 +73,7 @@ wa-page > header {
|
||||
#docs-toolbar {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: var(--wa-space-s);
|
||||
|
||||
.color-scheme-selector,
|
||||
.theme-selector {
|
||||
max-inline-size: 20ch;
|
||||
}
|
||||
|
||||
wa-divider:last-child {
|
||||
display: none;
|
||||
}
|
||||
}
|
||||
|
||||
#github-buttons {
|
||||
> wa-button {
|
||||
&::part(base) {
|
||||
color: var(--wa-color-on-quiet);
|
||||
background-color: var(--wa-color-fill-quiet);
|
||||
}
|
||||
> wa-icon {
|
||||
font-size: round(1.25em, 1px);
|
||||
}
|
||||
}
|
||||
|
||||
> wa-tooltip {
|
||||
--wa-tooltip-arrow-size: 0;
|
||||
font-size: var(--wa-font-size-xs);
|
||||
}
|
||||
gap: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
#version-number {
|
||||
@@ -112,12 +86,20 @@ wa-page > header {
|
||||
font-size: var(--wa-font-size-2xs);
|
||||
text-transform: uppercase;
|
||||
}
|
||||
wa-button#search-trigger {
|
||||
--background-color: var(--wa-form-control-background-color);
|
||||
--border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
#search-trigger kbd {
|
||||
font-size: var(--wa-font-size-2xs);
|
||||
line-height: var(--wa-form-control-value-line-height);
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar,
|
||||
#outline {
|
||||
h2 {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-size: var(--wa-font-size-m);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -126,16 +108,7 @@ wa-page > header {
|
||||
}
|
||||
|
||||
wa-details {
|
||||
--spacing: 0;
|
||||
|
||||
&::part(header) {
|
||||
padding: 0;
|
||||
padding-block-start: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
&::part(content) {
|
||||
padding-block-start: var(--wa-space-m);
|
||||
}
|
||||
--spacing: var(--wa-space-xs);
|
||||
|
||||
&::part(base) {
|
||||
border: none;
|
||||
@@ -198,7 +171,6 @@ wa-page > header {
|
||||
|
||||
/* Pro badges */
|
||||
wa-badge.pro {
|
||||
color: white;
|
||||
background-color: var(--wa-brand-orange);
|
||||
border-color: var(--wa-brand-orange);
|
||||
}
|
||||
@@ -260,12 +232,6 @@ wa-button.delete {
|
||||
}
|
||||
}
|
||||
|
||||
[slot='navigation-header'] {
|
||||
wa-select::part(listbox) {
|
||||
font-weight: var(--wa-font-weight-normal);
|
||||
}
|
||||
}
|
||||
|
||||
#sidebar-close-button {
|
||||
display: none;
|
||||
}
|
||||
@@ -403,22 +369,6 @@ h1.title {
|
||||
}
|
||||
}
|
||||
|
||||
/* Search trigger */
|
||||
wa-button#search-trigger {
|
||||
&::part(base) {
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
border: var(--wa-form-control-border-width) var(--wa-form-control-border-style) var(--wa-form-control-border-color);
|
||||
box-shadow: none;
|
||||
}
|
||||
&::part(label) {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
#search-trigger kbd {
|
||||
font-size: var(--wa-font-size-2xs);
|
||||
line-height: var(--wa-form-control-value-line-height);
|
||||
}
|
||||
|
||||
/* Search list pages */
|
||||
wa-page > main:has(> .search-list) {
|
||||
max-width: 120ch;
|
||||
@@ -455,7 +405,6 @@ wa-page > main:has(> .search-list) {
|
||||
|
||||
wa-card {
|
||||
--spacing: var(--wa-space-m);
|
||||
box-shadow: none;
|
||||
|
||||
[slot='header'] {
|
||||
display: flex;
|
||||
@@ -468,11 +417,6 @@ wa-page > main:has(> .search-list) {
|
||||
justify-content: center;
|
||||
min-block-size: calc(6rem + var(--spacing));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--wa-color-brand-border-loud);
|
||||
box-shadow: 0 0 0 0.0625rem var(--wa-color-brand-border-loud);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -670,7 +614,7 @@ wa-scroller:has(.component-table) {
|
||||
}
|
||||
|
||||
/** desktop */
|
||||
@media screen and not (max-width: 1180px) {
|
||||
@media screen and not (max-width: 768px) {
|
||||
/* Navigation sidebar */
|
||||
wa-page::part(navigation) {
|
||||
border-right: var(--wa-border-style) var(--wa-panel-border-width) var(--wa-color-surface-border);
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Color Palettes
|
||||
description: 'Color palettes give you a full spectrum of colors to add life to your project.'
|
||||
layout: page
|
||||
isPro: true
|
||||
---
|
||||
|
||||
<p>Color palettes give you a full spectrum of colors to add life to your project.</p>
|
||||
@@ -13,36 +14,9 @@ layout: page
|
||||
{% endfor %}
|
||||
|
||||
<div id="color-palettes">
|
||||
{% raw %}
|
||||
{% if not currentUser.hasPro %}
|
||||
<p>
|
||||
Additional palettes are available to pro users. Please <a href="/login">login to view pro palettes</a>.
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
<wa-radio-group id="palette-picker" label="Color Palette" value="default" orientation="horizontal">
|
||||
{% for palette in themer.palettes %}
|
||||
{% if not palette.isPro %}
|
||||
<wa-radio
|
||||
class="palette-card"
|
||||
value="{{ palette.name | lower }}"
|
||||
>
|
||||
{{ palette.name }}
|
||||
</wa-radio>
|
||||
{% else %}
|
||||
{% raw %}
|
||||
{% if currentUser.hasPro %}
|
||||
{% endraw %}
|
||||
<wa-radio
|
||||
class="palette-card"
|
||||
value="{{ palette.name | lower }}"
|
||||
>
|
||||
{{ palette.name }}
|
||||
</wa-radio>
|
||||
{% raw %}
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
{% endif %}
|
||||
<wa-radio class="palette-card" value="{{ palette.name | lower }}">{{ palette.name }}</wa-radio>
|
||||
{% endfor %}
|
||||
</wa-radio-group>
|
||||
|
||||
@@ -150,16 +124,13 @@ layout: page
|
||||
border: 1px solid var(--wa-color-surface-border);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: center;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.palette-card:not(:state(disabled)) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.palette-card:state(checked) {
|
||||
border-color: var(--wa-color-brand-border-loud);
|
||||
background-color: var(--wa-color-brand-fill-quiet);
|
||||
|
||||
@@ -86,11 +86,11 @@ Use the `appearance` attribute to change the element’s visual appearance.
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</wa-details>
|
||||
<wa-details summary="Filled + Outlined" appearance="filled outlined">
|
||||
<wa-details summary="Filled" appearance="filled">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</wa-details>
|
||||
<wa-details summary="Filled" appearance="filled">
|
||||
<wa-details summary="Filled + Outlined" appearance="filled outlined">
|
||||
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
|
||||
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
|
||||
</wa-details>
|
||||
|
||||
@@ -416,8 +416,6 @@ By default, the arrow will be aligned as close to the center of the _anchor_ as
|
||||
</div>
|
||||
```
|
||||
|
||||
{# TODO: this example totally destroys browsers. Needs investigation.
|
||||
|
||||
### Syncing with the Anchor's Dimensions
|
||||
|
||||
Use the `sync` attribute to make the popup the same width or height as the anchor element. This is useful for controls that need the popup to stay the same width or height as the trigger.
|
||||
@@ -469,7 +467,6 @@ Use the `sync` attribute to make the popup the same width or height as the ancho
|
||||
sync.addEventListener('change', () => (popup.sync = sync.value));
|
||||
</script>
|
||||
```
|
||||
#}
|
||||
|
||||
### Flip
|
||||
|
||||
@@ -851,4 +848,4 @@ This example anchors a popup to the mouse cursor using a virtual element. As suc
|
||||
The following classes can be applied to the popup's `popup` part to animate it in or out programmatically. You can control the animation duration with the `--show-duration` and `--hide-duration` custom properties.
|
||||
|
||||
- `show` / `hide` - Shows or hides the popover with a fade
|
||||
- `show-with-scale` / `hide-with-scale` - Shows or hides the popover with a fade and subtle scale effect
|
||||
- `show-with-scale` / `hide-with-scale` - Shows or hides the popover with a fade and subtle scale effect
|
||||
|
||||
@@ -7,7 +7,7 @@ category: Form Controls
|
||||
|
||||
```html {.example}
|
||||
<wa-select>
|
||||
<wa-option value="">Option 1</wa-option>
|
||||
<wa-option value="option-1">Option 1</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
<wa-option value="option-4">Option 4</wa-option>
|
||||
@@ -366,7 +366,6 @@ Here's a comprehensive example showing different lazy loading scenarios:
|
||||
|
||||
const option = document.createElement('wa-option');
|
||||
option.setAttribute('value', 'foo');
|
||||
option.selected = true
|
||||
option.innerText = 'Foo';
|
||||
|
||||
// For the multiple select with existing selected options, make the new option selected
|
||||
@@ -403,4 +402,4 @@ Here's a comprehensive example showing different lazy loading scenarios:
|
||||
|
||||
:::info
|
||||
The key principle is that the select component prioritizes user interactions and explicit selections over programmatic changes, ensuring a predictable user experience even with dynamically loaded content.
|
||||
:::
|
||||
:::
|
||||
|
||||
@@ -23,38 +23,42 @@ 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="filled outlined">Filled + Outlined</wa-tag>
|
||||
<wa-tag variant="brand" appearance="filled">Filled</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="filled outlined">Filled + Outlined</wa-tag>
|
||||
<wa-tag variant="success" appearance="filled">Filled</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>
|
||||
|
||||
<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="filled outlined">Filled + Outlined</wa-tag>
|
||||
<wa-tag variant="neutral" appearance="filled">Filled</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>
|
||||
|
||||
<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="filled outlined">Filled + Outlined</wa-tag>
|
||||
<wa-tag variant="warning" appearance="filled">Filled</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>
|
||||
|
||||
<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="filled outlined">Filled + Outlined</wa-tag>
|
||||
<wa-tag variant="danger" appearance="filled">Filled</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>
|
||||
</p>
|
||||
</div>
|
||||
```
|
||||
|
||||
@@ -10,16 +10,17 @@ You can customize the look and feel of Web Awesome at a high level with themes.
|
||||
|
||||
Web Awesome uses [themes](/docs/themes) to apply a cohesive look and feel across the entire library. Themes are built with a collection of predefined CSS custom properties, which we call [design tokens](/docs/tokens), and there are many premade themes you can choose from.
|
||||
|
||||
To use a theme, simply add a link to the theme's stylesheet to the `<head>` of your page. For example, you can add this snippet alongside th [installation code](/docs/#quick-start-autoloading-via-cdn) to use the *Awesome* theme:
|
||||
To use a theme, simply add a link to the theme's stylesheet to the `<head>` of your page. For example, you can replace the link to `default.css` in the [installation code](/docs/#quick-start-autoloading-via-cdn) with this snippet to use the *Awesome* theme:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" />
|
||||
```
|
||||
|
||||
You can customize any theme just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries and your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:root`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to purple in light mode:
|
||||
You can [customize any theme](/docs/themes/creating) just with CSS — no preprocessor required. All design tokens are prefixed with `--wa-` to avoid collisions with other libraries or your own custom properties. Simply override any design token in your own stylesheet by scoping your styles to `:where(:root)`, `:host`, the class for the specific theme you want to override (if needed), and the class for the relevant color scheme (if needed). Here's an example that changes the default brand color to purple in light mode:
|
||||
|
||||
```css
|
||||
:root,
|
||||
:where(:root),
|
||||
:host,
|
||||
.wa-light,
|
||||
.wa-dark .wa-invert {
|
||||
--wa-color-brand-fill-quiet: var(--wa-color-purple-95);
|
||||
@@ -34,6 +35,10 @@ You can customize any theme just with CSS — no preprocessor required. All desi
|
||||
}
|
||||
```
|
||||
|
||||
:::info
|
||||
Wrapping the `:root` selector in `:where()` gives this selector 0 specificity. This allows us to define our design tokens' default values while ensuring they can be cleanly overridden as needed.
|
||||
:::
|
||||
|
||||
For a complete list of all custom properties used for theming, refer to `src/styles/themes/default.css` in the project's source code.
|
||||
|
||||
## Components
|
||||
|
||||
@@ -26,8 +26,8 @@ If you're using a bundler, make sure it comes _before_ any components are import
|
||||
// Make sure this import is first.
|
||||
import '@lit-labs/ssr-client/lit-element-hydrate-support.js';
|
||||
|
||||
import '@awesome.me/webawesome/dist/components/button/button.js';
|
||||
import '@awesome.me/webawesome/dist/components/input/input.js';
|
||||
import 'webawesome/dist/components/button/button.js';
|
||||
import 'webawesome/dist/components/input/input.js';
|
||||
```
|
||||
|
||||
## Enable Server Rendering
|
||||
@@ -43,7 +43,7 @@ import litPlugin from '@lit-labs/eleventy-plugin-lit';
|
||||
|
||||
eleventyConfig.addPlugin(litPlugin, {
|
||||
mode: 'worker',
|
||||
componentModules: ['@awesome.me/webawesome/dist/components/button/button.js', '@awesome.me/webawesome/dist/components/input/input.js'],
|
||||
componentModules: ['webawesome/dist/components/button/button.js', 'webawesome/dist/components/input/input.js'],
|
||||
});
|
||||
```
|
||||
|
||||
@@ -114,4 +114,4 @@ Here are some known issues and things we're still working on.
|
||||
- `@shoelace-style/localize` (our localization library) has no way to set a language currently so it always falls back to `en`.
|
||||
- `<wa-icon>` has no fallback if there's no JS besides a blank `<svg>`. There's perhaps some backend mechanisms we can use to fetch. But requires altering APIs. Should also have a way to set height / widths, but we don't want to increase pain for SSR users.
|
||||
- `<wa-qr-code>` QR Code will not error on the backend and will render a blank canvas at the appropriate size, but will not render the canvas until the client component connects.
|
||||
- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
|
||||
- `setBasePath` and `kit codes` may need reconfiguring to work with SSR.
|
||||
|
||||
@@ -4,12 +4,20 @@ description: Choose the installation method that works best for you.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
Welcome to Web Awesome beta! [Learn more](https://webawesome.com/) about this project and [how to contribute to it](https://webawesome.com/docs/resources/contributing).
|
||||
Welcome to your exclusive early access to Web Awesome Beta! 👋
|
||||
|
||||
At this time, we're offering access to Web Awesome Free and Pro through a temporary CDN while we prepare for a public release. This beta is tried, true, and stable, but please be aware that things may change here and there before our production release to the public.
|
||||
|
||||
Thank you so much for backing us!
|
||||
|
||||
- [Report a bug](https://github.com/shoelace-style/webawesome/issues)
|
||||
- [Get help / ask a question](https://github.com/shoelace-style/webawesome/discussions)
|
||||
- [See what's new since the last version](/docs/resources/changelog)
|
||||
|
||||
:::warning
|
||||
As a Web Awesome backer, this beta release is _just for you_. Please refrain from sharing it for the time being!
|
||||
:::
|
||||
|
||||
---
|
||||
|
||||
## Quick Start (Autoloading via CDN)
|
||||
@@ -17,13 +25,15 @@ Welcome to Web Awesome beta! [Learn more](https://webawesome.com/) about this pr
|
||||
To get everything included in Web Awesome, add the following code to the `<head>` of your site:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/default.css' %}" />
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
<script type="module" src="{% cdnUrl 'webawesome.loader.js' %}"></script>
|
||||
```
|
||||
|
||||
This snippet adds:
|
||||
- **Web Awesome styles**, a collection of stylesheets including essential default theme styles, optional [styles for native elements](/docs/utilities/native) and optional [utility classes](/docs/utilities)
|
||||
- **The autoloader**, a lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically
|
||||
This snippet includes three parts:
|
||||
1. **The default theme**, a stylesheet that gives a cohesive look to Web Awesome components with both light and dark modes
|
||||
2. **Web Awesome styles**, an optional stylesheet that [styles native HTML elements](/docs/utilities/native) and includes [utility classes](/docs/utilities) you can use in your project
|
||||
3. **The autoloader**, a lightweight script watches the DOM for unregistered Web Awesome elements and lazy loads them for you — even if they're added dynamically
|
||||
|
||||
Now you can [start using Web Awesome!](/docs/usage)
|
||||
|
||||
@@ -50,9 +60,13 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You
|
||||
|
||||
The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods.
|
||||
|
||||
### Cherry Picking from CDN
|
||||
### Installing via npm
|
||||
|
||||
Cherry picking will only load the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component on each page it's used. Additionally, you must include the default theme (`styles/themes/default.css`) to style any imported components. To use a different theme, include your preferred theme _in addition to_ the default theme.
|
||||
An npm package isn't yet available, but we'll have one soon! For now, please enjoy [Web Awesome from the CDN](#quick-start-autoloading-via-cdn).
|
||||
|
||||
### Cherry Picking
|
||||
|
||||
Cherry picking will only load the components you need up front, while limiting the number of files the browser has to download. The disadvantage is that you need to import each individual component on each page it's used. You'll still need to include the default theme (`styles/themes/default.css`) or another theme to style any imported components.
|
||||
|
||||
Here's an example that loads only the button component.
|
||||
|
||||
@@ -72,32 +86,6 @@ You can copy and paste the code to import a component from the "Importing" secti
|
||||
You will see files named `chunk.[hash].js` in the `chunks` directory. Never import these files directly, as they are generated and change from version to version.
|
||||
:::
|
||||
|
||||
### Installing via npm
|
||||
|
||||
```bash
|
||||
npm install @awesome.me/webawesome
|
||||
```
|
||||
|
||||
And then in your JavaScript files, import the components you need.
|
||||
|
||||
:::warning
|
||||
Web Awesome does not a provide a single import with all Web Awesome components. Instead, you must "cherry pick" the components you want to use.
|
||||
:::
|
||||
|
||||
```js
|
||||
// Option 1: import all Web Awesome styles
|
||||
import "@awesome.me/webawesome/dist/styles/webawesome.css"
|
||||
|
||||
// Option 2: import only the default theme
|
||||
import "@awesome.me/webawesome/dist/styles/themes/default.css"
|
||||
|
||||
// <wa-button>
|
||||
import "@awesome.me/webawesome/dist/components/button/button.js"
|
||||
// <wa-input>
|
||||
import "@awesome.me/webawesome/dist/components/input/input.js"
|
||||
```
|
||||
|
||||
Once they've been imported, you can use them in your HTML normally. Component imports are located in the "Importing" section of each component's documentation.
|
||||
|
||||
### Setting the Base Path
|
||||
|
||||
@@ -107,12 +95,12 @@ Some components rely on assets (icons, images, etc.) and Web Awesome needs to kn
|
||||
|
||||
```html
|
||||
<!-- Option 1: the data-webawesome attribute -->
|
||||
<script src="bundle.js" data-webawesome="/path/to/webawesome/dist"></script>
|
||||
<script src="bundle.js" data-webawesome="/path/to/web-awesome/dist"></script>
|
||||
|
||||
<!-- Option 2: the setBasePath() method -->
|
||||
<script type="module">
|
||||
import { setBasePath } from '/path/to/webawesome/dist/webawesome.js';
|
||||
setBasePath('/path/to/webawesome/dist');
|
||||
import { setBasePath } from '/path/to/web-awesome/dist/webawesome.js';
|
||||
setBasePath('/path/to/web-awesome/dist');
|
||||
</script>
|
||||
```
|
||||
|
||||
@@ -122,7 +110,7 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
|
||||
|
||||
```html
|
||||
<script type="module">
|
||||
import { getBasePath, setBasePath } from '/path/to/webawesome/dist/webawesome.js';
|
||||
import { getBasePath, setBasePath } from '/path/to/web-awesome/dist/webawesome.js';
|
||||
|
||||
setBasePath('/path/to/assets');
|
||||
|
||||
@@ -135,14 +123,3 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
|
||||
const assetPath = getBasePath('file.ext');
|
||||
</script>
|
||||
```
|
||||
|
||||
## The difference between `/dist` and `/dist-cdn`
|
||||
|
||||
If you have Web Awesome installed locally via NPM, you'll notice 2 directories. `/dist-cdn` and `/cdn`.
|
||||
|
||||
The `/dist-cdn` files are bundled differently than the `/dist` files. The `/dist-cdn` files come pre-bundled, which means all dependencies are "inlined" so there are no "bare" references like `import "lit"`. The `/dist` files **DO NOT** come pre-bundled, allowing your bundler of choice to more efficiently de-duplicate dependencies, resulting in smaller bundles and optimal code sharing.
|
||||
|
||||
TLDR:
|
||||
|
||||
- `@awesome.me/webawesome/dist-cdn` is for CDNs or people not using a bundler.
|
||||
- `@awesome.me/webawesome/dist` is for bundlers or importmaps.
|
||||
@@ -4,46 +4,6 @@ description: Layout components and utility classes help you organize content tha
|
||||
layout: docs
|
||||
---
|
||||
|
||||
<p>
|
||||
{% markdown %}
|
||||
{{ description }}
|
||||
{% endmarkdown %}
|
||||
</p>
|
||||
|
||||
<div class="search-list">
|
||||
<wa-input class="search-list-input" type="search" placeholder="Search layout utilities" autofocus>
|
||||
<wa-icon name="search" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
|
||||
<section class="search-list-grid">
|
||||
{% for page in collections.layoutUtilities | sort(false, false, 'data.title') %}
|
||||
<a href="{{ page.url }}">
|
||||
<wa-card with-header="" appearance="outlined">
|
||||
<div slot="header">
|
||||
{# Look for an icon based on the page name #}
|
||||
{% set iconPath = "svgs/layout/" + page.fileSlug + ".njk" %}
|
||||
{% set iconContent %}{% include iconPath ignore missing %}{% endset %}
|
||||
{% if iconContent.trim() %}
|
||||
{# An icon exists! Show it #}
|
||||
{{ iconContent | safe }}
|
||||
{% else %}
|
||||
{# Fallback to the placeholder #}
|
||||
{% include 'svgs/thumbnail-placeholder.njk' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<div class="search-list-empty" hidden>
|
||||
No results found
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
|
||||
|
||||
<div class="max-line-length">
|
||||
{% markdown %}
|
||||
## Installation
|
||||
|
||||
@@ -61,4 +21,3 @@ Or, you can choose to import _only_ the utilities:
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
{% endmarkdown %}
|
||||
</div>
|
||||
|
||||
@@ -8,24 +8,6 @@ Web Awesome follows [Semantic Versioning](https://semver.org/). Breaking changes
|
||||
|
||||
Components with the <wa-badge variant="warning">Experimental</wa-badge> badge should not be used in production. They are made available as release candidates for development and testing purposes. As such, changes to experimental components will not be subject to semantic versioning.
|
||||
|
||||
## 3.0.0-beta.2
|
||||
|
||||
### New Features {data-no-outline}
|
||||
|
||||
- Added `.wa-hover-rows` to native styles to opt-in to highlighting table rows on hover.
|
||||
|
||||
### Bug Fixes and Improvements {data-no-outline}
|
||||
|
||||
- Fixed a bug in `<wa-select>` with options that had blank string values. [pr:1136]
|
||||
- Added `.wa-hover-rows` to native styles to opt-in to highlighting table rows on hover [pr:1111]
|
||||
- Added missing changelog entries for beta.1 [pr:1117]
|
||||
- Fixed a bug in `<wa-dropdown>` that prevented the menu from flipping/shifting to keep the menu in the viewport [pr:1122]
|
||||
- Fixed the themes page so it shows the correct palette and imports [pr:1125]
|
||||
- Fixed `filled` and `outlined` appearance styles in various components [issue:1102]
|
||||
- Fixed active state styles in the Awesome theme [pr:1129]
|
||||
- Fixed native text styles when applied to certain backgrounds [pr:https://github.com/shoelace-style/webawesome/pull/1130]
|
||||
- Improved the organization of essential and optional styles [pr:1113]
|
||||
|
||||
## 3.0.0-beta.1
|
||||
|
||||
We're excited to share the first beta release of Web Awesome, which includes some breaking changes that make the library significantly more intuitive and consistent!
|
||||
@@ -43,13 +25,11 @@ Many of these changes and improvements were the direct result of feedback from u
|
||||
- Removed `.wa-button`, `.wa-callout` classes
|
||||
- Removed `themes/native/*.css` files; use `native.css` to opt into native styles
|
||||
- Clarified which utilities classes can be applied to which native elements
|
||||
- Renamed the `classic` theme to `shoelace`
|
||||
- Removed `:root` selector from all theme, color palette, and semantic color stylesheets except for the default theme and colors. All of these styles are now solely scoped to classes, such as `.wa-theme-awesome`, `.wa-palette-bright`, and `.wa-brand-orange`.
|
||||
- Removed most custom properties from components that can otherwise be styled with `::part()` selectors and standard CSS properties.
|
||||
- `<wa-dropdown>` was reworked and simplified to not use menu, menu item, menu label; use `<wa-dropdown-item>` instead
|
||||
- Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:940]
|
||||
- Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
|
||||
- Renamed certain boolean attributes to be consistent using the `with-*` and `without-*` pattern:
|
||||
- 🚨 BREAKING: Removed the extra dash in the `<wa-carousel>` CSS part name `pagination-item--active` => `pagination-item-active`
|
||||
- 🚨 BREAKING: Renamed the `classic` theme to `shoelace`
|
||||
- 🚨 BREAKING: Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
|
||||
- 🚨 BREAKING: Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
|
||||
- 🚨 BREAKING: Renamed certain boolean attributes to be consistent using the `with-*` and `without-*` pattern:
|
||||
- `<wa-button caret>` => `<wa-button with-caret>`
|
||||
- `<wa-color-picker no-format-toggle>` => `<wa-color-picker without-format-toggle>`
|
||||
- `<wa-format-number no-grouping>` => `<wa-format-number without-grouping>`
|
||||
@@ -115,9 +95,6 @@ Many of these changes and improvements were the direct result of feedback from u
|
||||
### Removals {data-no-outline}
|
||||
|
||||
- Removed the experimental `<wa-code-demo>` component
|
||||
- `<wa-menu>`, `<wa-menu-item>`, `<wa-menu-label>` were dropped; use `<wa-dropdown-item>` instead
|
||||
- `<wa-icon-button>` was removed; icon buttons can be added via `<wa-button>` now
|
||||
- `<wa-radio-button>` was dropped; use `<wa-radio appearance="button">` instead
|
||||
|
||||
<details>
|
||||
<summary>Alpha Changelogs</summary>
|
||||
@@ -374,4 +351,4 @@ Many of these changes and improvements were the direct result of feedback from u
|
||||
|
||||
</details>
|
||||
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)
|
||||
|
||||
@@ -45,4 +45,4 @@ Follow [@webawesomer](https://twitter.com/webawesomer) on Twitter for general up
|
||||
<wa-button variant="brand" href="https://twitter.com/webawesomer" target="_blank" style="margin-block-end: var(--wa-flow-spacing);">
|
||||
<wa-icon name="twitter" family="brands" slot="start"></wa-icon>
|
||||
Follow on Twitter
|
||||
</wa-button>
|
||||
</wa-button>
|
||||
|
||||
@@ -2,101 +2,73 @@
|
||||
title: Themes
|
||||
description: Themes galore
|
||||
layout: page
|
||||
isPro: true
|
||||
---
|
||||
|
||||
<div class="wa-split">
|
||||
<h1>{{ title }}</h1>
|
||||
<wa-button variant="brand" href="/themer">
|
||||
<wa-icon slot="start" name="plus" variant="regular"></wa-icon>
|
||||
Create a Theme
|
||||
</wa-button>
|
||||
</div>
|
||||
<div class="wa-stack wa-gap-3xl">
|
||||
|
||||
<div id="theme-viewer">
|
||||
{% raw %}
|
||||
{% if not currentUser.hasPro %}
|
||||
<p>
|
||||
Additional themes are available to pro users. Please <a href="/login">login to view pro themes</a>.
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
<div class="wa-split">
|
||||
<h1>{{ title }}</h1>
|
||||
<wa-button variant="brand" href="/themer">
|
||||
<wa-icon slot="start" name="plus" variant="regular"></wa-icon>
|
||||
Create a Theme
|
||||
</wa-button>
|
||||
</div>
|
||||
|
||||
<wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
|
||||
{% for theme in themer.themes %}
|
||||
{% if not theme.isPro %}
|
||||
<div id="theme-viewer">
|
||||
<wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
|
||||
{% for theme in themer.themes %}
|
||||
<wa-radio
|
||||
class="theme-card"
|
||||
value="{{ theme.filename | stripExtension }}"
|
||||
data-description="{{ theme.description }}"
|
||||
data-title="{{ theme.name }}"
|
||||
data-palette="{{ theme.palette.filename | stripExtension}}"
|
||||
data-brand="{{ theme.colorBrand.color }}"
|
||||
{% if theme.isPro %}data-is-pro{% endif %}
|
||||
>
|
||||
{{ theme.name }}
|
||||
</wa-radio>
|
||||
{% else %}
|
||||
{% raw %}
|
||||
{% if currentUser.hasPro %}
|
||||
{% endraw %}
|
||||
<wa-radio
|
||||
class="theme-card"
|
||||
value="{{ theme.filename | stripExtension }}"
|
||||
data-description="{{ theme.description }}"
|
||||
data-title="{{ theme.name }}"
|
||||
data-palette="{{ theme.palette.filename | stripExtension}}"
|
||||
data-brand="{{ theme.colorBrand.color }}"
|
||||
{% if theme.isPro %}data-is-pro{% endif %}
|
||||
>
|
||||
{{ theme.name }}
|
||||
</wa-radio>
|
||||
{% raw %}
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
{% endif %}
|
||||
{% endfor %}
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
|
||||
<div id="theme-preview" class="wa-stack">
|
||||
<header class="wa-stack">
|
||||
<div class="wa-cluster">
|
||||
<h2 data-theme-name="name">Theme</h2>
|
||||
<wa-badge data-free-badge appearance="outlined" variant="neutral" hidden>FREE</wa-badge>
|
||||
<wa-badge data-pro-badge appearance="accent" hidden>PRO</wa-badge>
|
||||
</div>
|
||||
<p data-theme-description>Description</p>
|
||||
</header>
|
||||
<wa-comparison position="80">
|
||||
<wa-zoomable-frame
|
||||
src="/examples/themes/showcase?color-scheme=dark"
|
||||
slot="before"
|
||||
without-controls
|
||||
without-interaction
|
||||
></wa-zoomable-frame>
|
||||
<wa-zoomable-frame
|
||||
src="/examples/themes/showcase"
|
||||
slot="after"
|
||||
without-controls
|
||||
without-interaction
|
||||
></wa-zoomable-frame>
|
||||
</wa-comparison>
|
||||
</div>
|
||||
|
||||
<h2>Using This Theme</h2>
|
||||
<div id="import-code">
|
||||
{% for theme in themer.themes %}
|
||||
<div class="theme-instructions" data-theme="{{ theme.filename | stripExtension }}" {% if not loop.first %}hidden{% endif %}>
|
||||
<p>
|
||||
To import this theme, apply the following classes to the <code><html></code> element and import the theme's stylesheet.
|
||||
</p>
|
||||
<pre><code class="language-html"><html class="wa-theme-{{ theme.filename | stripExtension }} wa-palette-{{ theme.palette.filename | stripExtension }} wa-brand-{{ theme.colorBrand.color}}">
|
||||
...
|
||||
<link rel="stylesheet" href="{% cdnUrl %}styles/themes/{{ theme.filename }}" /></code></pre>
|
||||
{% endfor %}
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
<div id="theme-preview" class="wa-stack">
|
||||
<header class="wa-stack">
|
||||
<div class="wa-cluster">
|
||||
<h2 data-theme-name="name">Theme</h2>
|
||||
<wa-badge data-free-badge appearance="outlined" variant="neutral" hidden>FREE</wa-badge>
|
||||
<wa-badge data-pro-badge appearance="accent" hidden>PRO</wa-badge>
|
||||
</div>
|
||||
<p data-theme-description>Description</p>
|
||||
</header>
|
||||
<wa-comparison position="80">
|
||||
<wa-zoomable-frame
|
||||
src="/examples/themes/showcase?color-scheme=dark"
|
||||
slot="before"
|
||||
without-controls
|
||||
without-interaction
|
||||
></wa-zoomable-frame>
|
||||
<wa-zoomable-frame
|
||||
src="/examples/themes/showcase"
|
||||
slot="after"
|
||||
without-controls
|
||||
without-interaction
|
||||
></wa-zoomable-frame>
|
||||
</wa-comparison>
|
||||
</div>
|
||||
|
||||
<h2>Using This Theme</h2>
|
||||
<div id="import-code">
|
||||
{% for theme in themer.themes %}
|
||||
<div class="theme-instructions" data-theme="{{ theme.filename | stripExtension }}" {% if not loop.first %}hidden{% endif %}>
|
||||
<p>
|
||||
To import this theme, set <code><html class="wa-theme-{{ theme.filename | stripExtension }}"></code> and import the following stylesheet:
|
||||
</p>
|
||||
<pre><code class="language-html"><link rel="stylesheet" href="{% cdnUrl %}styles/themes/{{ theme.filename }}" /></code></pre>
|
||||
</div>
|
||||
{% endfor %}
|
||||
</div>
|
||||
|
||||
</div>
|
||||
|
||||
<script type="module">
|
||||
import { doViewTransition } from '/assets/scripts/view-transitions.js';
|
||||
@@ -109,25 +81,23 @@ layout: page
|
||||
const freeBadge = document.querySelector('[data-free-badge]');
|
||||
const proBadge = document.querySelector('[data-pro-badge]');
|
||||
|
||||
function updateFrames(selectedValue, title, description, isPro, palette, brand) {
|
||||
function updateFrames(selectedValue, title, description, isPro) {
|
||||
// Update theme classes on both frames
|
||||
[afterFrame, beforeFrame].forEach(frame => {
|
||||
if (frame.contentDocument) {
|
||||
const html = frame.contentDocument.documentElement;
|
||||
if (!html) return;
|
||||
|
||||
// Remove all existing wa-theme-*, wa-palette-*, and wa-brand-* classes
|
||||
[...html.classList].forEach(className => {
|
||||
if (className.startsWith('wa-theme-') || className.startsWith('wa-palette-') || className.startsWith('wa-brand-')) {
|
||||
// Remove all existing wa-theme-* classes
|
||||
html.classList.forEach(className => {
|
||||
if (className.startsWith('wa-theme-')) {
|
||||
html.classList.remove(className);
|
||||
}
|
||||
});
|
||||
|
||||
// Add new theme, palette, and brand classes
|
||||
// Add new theme class if not default
|
||||
if (selectedValue !== 'default') {
|
||||
html.classList.add(`wa-theme-${selectedValue}`);
|
||||
html.classList.add(`wa-palette-${palette}`);
|
||||
html.classList.add(`wa-brand-${brand}`);
|
||||
}
|
||||
}
|
||||
});
|
||||
@@ -155,10 +125,8 @@ layout: page
|
||||
defaultRadio.checked = true;
|
||||
const title = defaultRadio.getAttribute('data-title');
|
||||
const description = defaultRadio.getAttribute('data-description');
|
||||
const palette = defaultRadio.getAttribute('data-palette');
|
||||
const brand = defaultRadio.getAttribute('data-brand');
|
||||
const isPro = defaultRadio.hasAttribute('data-is-pro');
|
||||
updateFrames('default', title, description, isPro, palette, brand);
|
||||
updateFrames('default', title, description, isPro);
|
||||
}
|
||||
|
||||
// Listen for radio changes
|
||||
@@ -166,11 +134,9 @@ layout: page
|
||||
const selectedRadio = event.target.querySelector(':state(checked)');
|
||||
const title = selectedRadio.getAttribute('data-title');
|
||||
const description = selectedRadio.getAttribute('data-description');
|
||||
const palette = selectedRadio.getAttribute('data-palette');
|
||||
const brand = selectedRadio.getAttribute('data-brand');
|
||||
const isPro = selectedRadio.hasAttribute('data-is-pro');
|
||||
doViewTransition(() => {
|
||||
updateFrames(selectedRadio.value, title, description, isPro, palette, brand);
|
||||
updateFrames(selectedRadio.value, title, description, isPro);
|
||||
});
|
||||
});
|
||||
</script>
|
||||
@@ -180,11 +146,6 @@ layout: page
|
||||
display: none !important;
|
||||
}
|
||||
|
||||
#theme-preview,
|
||||
#using-this-theme {
|
||||
margin-block-start: var(--wa-space-3xl);
|
||||
}
|
||||
|
||||
.title {
|
||||
display: none;
|
||||
}
|
||||
@@ -257,15 +218,12 @@ layout: page
|
||||
border: 1px solid var(--wa-color-surface-border);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: center;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
text-transform: capitalize;
|
||||
|
||||
&:not(:state(disabled)) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:state(checked) {
|
||||
border-color: var(--wa-color-brand-border-loud);
|
||||
background-color: var(--wa-color-brand-fill-quiet);
|
||||
|
||||
7
packages/webawesome/docs/docs/tokens/index.md
Normal file
7
packages/webawesome/docs/docs/tokens/index.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Design Tokens
|
||||
description: These custom properties thread through all of Web Awesome's components, giving things a consistent look and feel.
|
||||
layout: docs
|
||||
---
|
||||
|
||||
TODO
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
title: Design Tokens
|
||||
description: These custom properties thread through all of Web Awesome's components, giving things a consistent look and feel.
|
||||
layout: docs
|
||||
override:tags: []
|
||||
---
|
||||
|
||||
<p>
|
||||
{% markdown %}
|
||||
{{ description }}
|
||||
{% endmarkdown %}
|
||||
</p>
|
||||
|
||||
<div class="search-list">
|
||||
<wa-input class="search-list-input" type="search" placeholder="Search design tokens" autofocus>
|
||||
<wa-icon name="search" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
|
||||
<section class="search-list-grid">
|
||||
{% for page in collections.tokens | sort(false, false, 'data.title') %}
|
||||
<a href="{{ page.url }}">
|
||||
<wa-card with-header="" appearance="outlined">
|
||||
<div slot="header">
|
||||
{# Look for an icon based on the page name #}
|
||||
{% set iconPath = "svgs/tokens/" + page.fileSlug + ".njk" %}
|
||||
{% set iconContent %}{% include iconPath ignore missing %}{% endset %}
|
||||
{% if iconContent.trim() %}
|
||||
{# An icon exists! Show it #}
|
||||
{{ iconContent | safe }}
|
||||
{% else %}
|
||||
{# Fallback to the placeholder #}
|
||||
{% include 'svgs/thumbnail-placeholder.njk' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<div class="search-list-empty" hidden>
|
||||
No results found
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"tags": ["tokens"]
|
||||
}
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Align Items
|
||||
description: Align items utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Cluster
|
||||
description: 'Use the `wa-cluster` class to arrange elements inline with even spacing, allowing items to wrap when space is limited.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Color Variants
|
||||
description: Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Some Web Awesome components, like `<wa-button>`, allow you to change the color by using a `variant` attribute:
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Flank
|
||||
description: 'Use the `wa-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Reducing FOUCE
|
||||
description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Often, components are shown before their logic and styles have had a chance to load, also known as a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Frame
|
||||
description: 'Use the `wa-frame` class to create a responsive container with consistent proportions to enclose content.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Gap
|
||||
description: Gap utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Grid
|
||||
description: 'Use the `wa-grid` class to arrange elements into rows and columns that automatically adapt to the available space.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
21
packages/webawesome/docs/docs/utilities/index.md
Normal file
21
packages/webawesome/docs/docs/utilities/index.md
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Style Utilities
|
||||
description:
|
||||
Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
|
||||
See the [installation instructions](#installation) to use style utilities in your project.
|
||||
layout: docs
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, to _only_ include utilities:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
@@ -1,66 +0,0 @@
|
||||
---
|
||||
title: Style Utilities
|
||||
description:
|
||||
Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
|
||||
See the [installation instructions](#installation) to use style utilities in your project.
|
||||
layout: docs
|
||||
---
|
||||
|
||||
<p>
|
||||
{% markdown %}
|
||||
{{ description }}
|
||||
{% endmarkdown %}
|
||||
</p>
|
||||
|
||||
<div class="search-list">
|
||||
<wa-input class="search-list-input" type="search" placeholder="Search style utilities" autofocus>
|
||||
<wa-icon name="search" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
|
||||
<section class="search-list-grid">
|
||||
{% for page in collections.styleUtilities | sort(false, false, 'data.title') %}
|
||||
<a href="{{ page.url }}">
|
||||
<wa-card with-header="" appearance="outlined">
|
||||
<div slot="header">
|
||||
{# Look for an icon based on the page name #}
|
||||
{% set iconPath = "svgs/tokens/" + page.fileSlug + ".njk" %}
|
||||
{% set iconContent %}{% include iconPath ignore missing %}{% endset %}
|
||||
{% if iconContent.trim() %}
|
||||
{# An icon exists! Show it #}
|
||||
{{ iconContent | safe }}
|
||||
{% else %}
|
||||
{# Fallback to the placeholder #}
|
||||
{% include 'svgs/thumbnail-placeholder.njk' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<div class="search-list-empty" hidden>
|
||||
No results found
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
|
||||
|
||||
<div class="max-line-length">
|
||||
{% markdown %}
|
||||
## Installation
|
||||
|
||||
To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, to _only_ include utilities:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
</div>
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Native Styles
|
||||
description: Native styles apply your theme to native HTML elements so they match the look and feel of Web Awesome components.
|
||||
layout: page-outline
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Web Awesome provides optional Native Styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.
|
||||
@@ -213,7 +212,7 @@ Visual indicators for task completion and loading states.
|
||||
|
||||
### Tables
|
||||
|
||||
Structured data presentation with clean styling, optional row highlighting on hover, and optional zebra striping.
|
||||
Structured data presentation with clean styling and optional zebra striping.
|
||||
|
||||
```html {.example}
|
||||
<table>
|
||||
@@ -257,10 +256,10 @@ Structured data presentation with clean styling, optional row highlighting on ho
|
||||
</table>
|
||||
```
|
||||
|
||||
You can use the `wa-hover-rows` class to highlight table rows on hover and the `wa-zebra-rows` class to add alternating row colors to your table.
|
||||
You can use the `wa-zebra-rows` class to add alternating row colors to your table:
|
||||
|
||||
```html {.example}
|
||||
<table class="wa-zebra-rows wa-hover-rows">
|
||||
<table class="wa-zebra-rows">
|
||||
<caption>
|
||||
I'm just a table
|
||||
</caption>
|
||||
@@ -319,38 +318,43 @@ Use the [appearance utility classes](/docs/utilities/appearance) to change the b
|
||||
|
||||
```html {.example}
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<button class="wa-accent wa-outlined wa-neutral">A + O</button>
|
||||
<button class="wa-accent wa-neutral">Accent</button>
|
||||
<button class="wa-filled wa-outlined wa-neutral">Filled + Outlined</button>
|
||||
<button class="wa-filled wa-neutral">Filled</button>
|
||||
<button class="wa-outlined wa-neutral">Outlined</button>
|
||||
<button class="wa-filled wa-outlined wa-neutral">F + O</button>
|
||||
<button class="wa-filled wa-neutral">Filled</button>
|
||||
<button class="wa-plain wa-neutral">Plain</button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<button class="wa-accent wa-outlined wa-brand">A + O</button>
|
||||
<button class="wa-accent wa-brand">Accent</button>
|
||||
<button class="wa-filled wa-outlined wa-brand">Filled + Outlined</button>
|
||||
<button class="wa-filled wa-brand">Filled</button>
|
||||
<button class="wa-outlined wa-brand">Outlined</button>
|
||||
<button class="wa-filled wa-outlined wa-brand">F + O</button>
|
||||
<button class="wa-filled wa-brand">Filled</button>
|
||||
<button class="wa-plain wa-brand">Plain</button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<button class="wa-accent wa-outlined wa-success">A + O</button>
|
||||
<button class="wa-accent wa-success">Accent</button>
|
||||
<button class="wa-filled wa-outlined wa-success">Filled + Outlined</button>
|
||||
<button class="wa-filled wa-success">Filled</button>
|
||||
<button class="wa-outlined wa-success">Outlined</button>
|
||||
<button class="wa-filled wa-outlined wa-success">F + O</button>
|
||||
<button class="wa-filled wa-success">Filled</button>
|
||||
<button class="wa-plain wa-success">Plain</button>
|
||||
</div>
|
||||
<div style="margin-block-end: 1rem;">
|
||||
<button class="wa-accent wa-outlined wa-warning">A + O</button>
|
||||
<button class="wa-accent wa-warning">Accent</button>
|
||||
<button class="wa-filled wa-outlined wa-warning">Filled + Outlined</button>
|
||||
<button class="wa-filled wa-warning">Filled</button>
|
||||
<button class="wa-outlined wa-warning">Outlined</button>
|
||||
<button class="wa-filled wa-outlined wa-warning">F + O</button>
|
||||
<button class="wa-filled wa-warning">Filled</button>
|
||||
<button class="wa-plain wa-warning">Plain</button>
|
||||
</div>
|
||||
<div>
|
||||
<button class="wa-accent wa-outlined wa-danger">A + O</button>
|
||||
<button class="wa-accent wa-danger">Accent</button>
|
||||
<button class="wa-filled wa-outlined wa-danger">Filled + Outlined</button>
|
||||
<button class="wa-filled wa-danger">Filled</button>
|
||||
<button class="wa-outlined wa-danger">Outlined</button>
|
||||
<button class="wa-filled wa-outlined wa-danger">F + O</button>
|
||||
<button class="wa-filled wa-danger">Filled</button>
|
||||
<button class="wa-plain wa-danger">Plain</button>
|
||||
</div>
|
||||
```
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Rounding Utilities
|
||||
description: Border radius utilities set an element's border radius property.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Split
|
||||
description: 'Use the `wa-split` class to distribute two or more items evenly across available space, either in a row or a column.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Stack
|
||||
description: 'Use `wa-stack` to arrange elements in the block direction with even spacing.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Text
|
||||
description: Text utility classes combine custom properties from your Web Awesome theme to conveniently style text content.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Web Awesome includes classes to set multiple text properties at once to style body text, headings, and captions.
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Visually Hidden
|
||||
description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
> "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."
|
||||
|
||||
@@ -100,7 +100,7 @@ layout: false
|
||||
<div class="wa-flank">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-green-60); color: var(--wa-color-green-95)"
|
||||
style="--background-color: var(--wa-color-green-60); --text-color: var(--wa-color-green-95)"
|
||||
>
|
||||
<wa-icon slot="icon" name="sword-laser"></wa-icon>
|
||||
</wa-avatar>
|
||||
@@ -119,7 +119,7 @@ layout: false
|
||||
<div class="wa-flank">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-cyan-60); color: var(--wa-color-cyan-95)"
|
||||
style="--background-color: var(--wa-color-cyan-60); --text-color: var(--wa-color-cyan-95)"
|
||||
>
|
||||
<wa-icon slot="icon" name="robot-astromech"></wa-icon>
|
||||
</wa-avatar>
|
||||
@@ -403,7 +403,7 @@ layout: false
|
||||
<a href="" class="wa-flank wa-link-plain" tabindex="-1">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-yellow-90); color: var(--wa-color-yellow-50)"
|
||||
style="--background-color: var(--wa-color-yellow-90); --text-color: var(--wa-color-yellow-50)"
|
||||
>
|
||||
<wa-icon slot="icon" name="egg-fried"></wa-icon>
|
||||
</wa-avatar>
|
||||
@@ -435,7 +435,7 @@ layout: false
|
||||
<a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-blue-90); color: var(--wa-color-blue-50)"
|
||||
style="--background-color: var(--wa-color-blue-90); color: var(--wa-color-blue-50)"
|
||||
>
|
||||
<wa-icon slot="icon" name="shield"></wa-icon>
|
||||
</wa-avatar>
|
||||
@@ -449,7 +449,7 @@ layout: false
|
||||
<a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-green-90); color: var(--wa-color-green-50)"
|
||||
style="--background-color: var(--wa-color-green-90); color: var(--wa-color-green-50)"
|
||||
>
|
||||
<wa-icon slot="icon" name="chevrons-up"></wa-icon>
|
||||
</wa-avatar>
|
||||
@@ -463,7 +463,7 @@ layout: false
|
||||
<a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-red-90); color: var(--wa-color-red-50)"
|
||||
style="--background-color: var(--wa-color-red-90); color: var(--wa-color-red-50)"
|
||||
>
|
||||
<wa-icon slot="icon" name="explosion"></wa-icon>
|
||||
</wa-avatar>
|
||||
@@ -477,7 +477,7 @@ layout: false
|
||||
<a href="" class="wa-flank wa-align-items-start wa-link-plain" tabindex="-1">
|
||||
<wa-avatar
|
||||
shape="rounded"
|
||||
style="background-color: var(--wa-color-yellow-90); color: var(--wa-color-yellow-50)"
|
||||
style="--background-color: var(--wa-color-yellow-90); color: var(--wa-color-yellow-50)"
|
||||
>
|
||||
<wa-icon slot="icon" name="moon-stars"></wa-icon>
|
||||
</wa-avatar>
|
||||
|
||||
@@ -136,21 +136,35 @@ layout: page
|
||||
margin-block-start: 1rem;
|
||||
}
|
||||
}
|
||||
.link-panel {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-radius: 0.75rem;
|
||||
padding: 1.25rem;
|
||||
& h3 {
|
||||
font-size: 1rem;
|
||||
}
|
||||
& .icon-heading wa-icon {
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
}
|
||||
& p {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
}
|
||||
.icon-heading {
|
||||
> wa-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
margin-block-end: 1rem;
|
||||
& wa-icon {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
background-color: var(--wa-brand-orange);
|
||||
color: white;
|
||||
border-radius: 0.25rem;
|
||||
aspect-ratio: 1;
|
||||
padding: 0.5em;
|
||||
|
||||
&.brand-orange {
|
||||
background-color: var(--wa-brand-orange);
|
||||
color: white;
|
||||
}
|
||||
}
|
||||
& h3 {
|
||||
font-size: 1rem;
|
||||
@@ -210,8 +224,8 @@ layout: page
|
||||
text-align: left;
|
||||
white-space: wrap;
|
||||
}
|
||||
wa-button.tile::part(label) {
|
||||
width: 100%;
|
||||
wa-button.tile::part(end) {
|
||||
display: none;
|
||||
}
|
||||
wa-button.tile {
|
||||
width: 100%;
|
||||
@@ -252,17 +266,11 @@ layout: page
|
||||
</div>
|
||||
<h1 class="brand-font">Make something <span class="emphasis">awesome</span> with open-source web components</h1>
|
||||
<div class="hero-cta">
|
||||
{%- raw -%}
|
||||
{% if currentUser.hasPro %}
|
||||
<span style="text-align: center; width: 100%; font-size: var(--wa-font-size-l);">Thanks for being a Web Awesome Pro subscriber!</span>
|
||||
{% else %}
|
||||
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good.</span>
|
||||
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
|
||||
<wa-icon slot="start" name="person-running"></wa-icon>
|
||||
Pre-order WA Pro
|
||||
</wa-button>
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price — but not for long. Get in while the gettin’s good.</span>
|
||||
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
|
||||
<wa-icon slot="start" name="person-running"></wa-icon>
|
||||
Pre-order WA Pro
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
@@ -271,27 +279,23 @@ layout: page
|
||||
<div class="beta-notice">
|
||||
<div>
|
||||
<wa-callout variant="brand">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="sparkles" variant="regular" fixed-width></wa-icon>
|
||||
<h3>Bigger and beta than ever</h3>
|
||||
</div>
|
||||
<p>This beta is battle-tested and built to last, but if you see something, say something. Please <a href="https://github.com/shoelace-style/webawesome/issues">report bugs</a> or <a href="https://github.com/shoelace-style/webawesome/discussions">ask for help</a>!</p>
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="sparkles" variant="regular" fixed-width></wa-icon>
|
||||
<h3>Rise and shine, backers!</h3>
|
||||
</div>
|
||||
<p>Dig in to your exclusive Web Awesome Beta access. This beta is battle-tested and built to last, but if you see something, say something. Please <a href="https://github.com/shoelace-style/webawesome/issues">report bugs</a> or <a href="https://github.com/shoelace-style/webawesome/discussions">ask for help</a>!</p>
|
||||
</wa-callout>
|
||||
</div>
|
||||
<div>
|
||||
<wa-button href="/docs/" appearance="outlined" class="tile">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="pen-ruler" fixed-width class="brand-orange"></wa-icon>
|
||||
<h3>Get started</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-right" fixed-width></wa-icon>
|
||||
<div style="display: flex; justify-content: space-between; align-items: center; margin-block-end: 1rem;">
|
||||
<div class="icon-heading" style="margin-block-end: 0;">
|
||||
<wa-icon name="pen-ruler" fixed-width></wa-icon>
|
||||
<h3>Get started</h3>
|
||||
</div>
|
||||
<p>Check out our installation guide to start building with Web Awesome.</p>
|
||||
<wa-icon name="arrow-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
<p>Check out our installation guide to start building with Web Awesome.</p>
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
@@ -300,30 +304,30 @@ layout: page
|
||||
<h2 class="brand-font">What's <span class="emphasis">Web</span> Awesome?</h2>
|
||||
<p>Web Awesome is the biggest open-source library of meticulously designed, highly customizable, and framework-agnostic UI components.</p>
|
||||
<div class="grid">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="code" fixed-width class="brand-orange"></wa-icon>
|
||||
<div>
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="code" fixed-width></wa-icon>
|
||||
<h3>Entirely native</h3>
|
||||
</div>
|
||||
<p>Built on web standards to last for years to come. No excess tooling. No third-party bloat.</p>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="palette" fixed-width class="brand-orange"></wa-icon>
|
||||
<div>
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="palette" fixed-width></wa-icon>
|
||||
<h3>Fully customizable</h3>
|
||||
</div>
|
||||
<p>Show off your own style with components that consistently adapt to your theme.</p>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="wheelchair-move" fixed-width class="brand-orange"></wa-icon>
|
||||
<div>
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="wheelchair-move" fixed-width></wa-icon>
|
||||
<h3>Accessibility forward</h3>
|
||||
</div>
|
||||
<p>Build a website that everyone can use. Designed to be inclusive and usable by everyone.</p>
|
||||
</div>
|
||||
<div class="wa-stack">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="handshake-simple" fixed-width class="brand-orange"></wa-icon>
|
||||
<div>
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="handshake-simple" fixed-width></wa-icon>
|
||||
<h3>Proudly open source</h3>
|
||||
</div>
|
||||
<p>Use Web Awesome Free however you like. Always free, always open source.</p>
|
||||
@@ -338,80 +342,20 @@ layout: page
|
||||
<p>Whether you’re a developer, designer, or budding tech nerd, we want you a part of the conversation.</p>
|
||||
</div>
|
||||
<div>
|
||||
<wa-button href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon family="brands" name="github" fixed-width></wa-icon>
|
||||
<h3>GitHub</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-up-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
<p>Get involved by opening issues, contributing to discussions, or creating PRs.</p>
|
||||
<div class="link-panel">
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="envelope-open" fixed-width></wa-icon>
|
||||
<h3>Get in touch</h3>
|
||||
</div>
|
||||
</wa-button>
|
||||
<wa-button href="https://discord.gg/a74U7eYH" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
|
||||
<div class="wa-stack">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon family="brands" name="discord" fixed-width></wa-icon>
|
||||
<h3>Discord</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-up-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
<p>Share your work, ask questions, and explore ideas with other Web Awesome builders.</p>
|
||||
<p>Have a question? Want to share your feedback? Just stopping by to say 'hi'? Email us at <a href="mailto:hello@webawesome.com">hello@webawesome.com</a>.</p>
|
||||
</div>
|
||||
<div class="link-panel">
|
||||
<div class="icon-heading">
|
||||
<wa-icon name="hashtag" fixed-width></wa-icon>
|
||||
<h3>Follow us</h3>
|
||||
</div>
|
||||
</wa-button>
|
||||
<wa-button href="mailto:hello@webawesome.com" appearance="filled" class="tile">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon name="envelope-open" fixed-width></wa-icon>
|
||||
<h3 class="wa-cluster wa-gap-xs">
|
||||
<span>hello@webawesome.com</span>
|
||||
<wa-icon name="hand-wave" variant="regular"></wa-icon>
|
||||
</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-up-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
</wa-button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<wa-divider></wa-divider>
|
||||
|
||||
<div class="wa-stack wa-gap-xl">
|
||||
<h2 class="wa-cluster brand-font">
|
||||
<wa-icon name="hashtag" style="color: var(--wa-brand-orange);"></wa-icon>
|
||||
<span>Stay in the know</span>
|
||||
</h2>
|
||||
<div class="wa-grid">
|
||||
<wa-button href="https://bsky.app/profile/webawesome.com" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon family="brands" name="bluesky" fixed-width></wa-icon>
|
||||
<h3>Bluesky</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-up-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
</wa-button>
|
||||
<wa-button href="https://x.com/webawesomer" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon family="brands" name="x-twitter" fixed-width></wa-icon>
|
||||
<h3>Twitter (X)</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-up-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
</wa-button>
|
||||
<wa-button href="https://www.threads.com/@web.awesome" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
|
||||
<div class="wa-split">
|
||||
<div class="wa-cluster icon-heading">
|
||||
<wa-icon family="brands" name="threads" fixed-width></wa-icon>
|
||||
<h3>Threads</h3>
|
||||
</div>
|
||||
<wa-icon name="arrow-up-right" fixed-width></wa-icon>
|
||||
</div>
|
||||
</wa-button>
|
||||
<p>Keep up with Web Awesome through updates, announcements, and polls. Find us on <a href="https://bsky.app/profile/webawesome.com">Bluesky</a>, <a href="https://x.com/webawesomer">Twitter (X)</a>, and <a href="https://www.threads.com/@web.awesome">Threads</a>.</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -429,9 +373,9 @@ layout: page
|
||||
<div class="attribution">
|
||||
<span>Special thanks</span>
|
||||
<div class="button-list">
|
||||
<wa-button appearance="filled" pill href="https://www.11ty.dev/">11ty</wa-button>
|
||||
<wa-button appearance="filled" pill href="https://lit.dev/">Lit</wa-button>
|
||||
<wa-button appearance="filled" pill href="https://github.com/open-wc/custom-elements-manifest">Custom Elements Manifest</wa-button>
|
||||
<wa-button appearance="filled" pill href="https://www.11ty.dev/">11ty</wa-button>
|
||||
<wa-button appearance="filled" pill href="https://floating-ui.com/">Floating UI</wa-button>
|
||||
<wa-button appearance="filled" pill href="https://animate.style/">animate.css</wa-button>
|
||||
<wa-button appearance="filled" pill href="https://lunrjs.com/">Lunr</wa-button>
|
||||
|
||||
@@ -1,10 +1,7 @@
|
||||
{
|
||||
"name": "@awesome.me/webawesome",
|
||||
"publishConfig": {
|
||||
"access": "public"
|
||||
},
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "3.0.0-beta.1",
|
||||
"version": "3.0.0-alpha.13",
|
||||
"homepage": "https://webawesome.com/",
|
||||
"author": "Web Awesome",
|
||||
"license": "MIT",
|
||||
@@ -21,8 +18,8 @@
|
||||
"./dist/custom-elements.json": "./dist/custom-elements.json",
|
||||
"./dist/webawesome.js": "./dist/webawesome.js",
|
||||
"./dist/webawesome.loader.js": "./dist/webawesome.loader.js",
|
||||
"./dist/styles": "./dist/styles",
|
||||
"./dist/styles/*": "./dist/styles/*",
|
||||
"./dist/themes": "./dist/themes",
|
||||
"./dist/themes/*": "./dist/themes/*",
|
||||
"./dist/components": "./dist/components",
|
||||
"./dist/components/*": "./dist/components/*",
|
||||
"./dist/react": "./dist/react/index.js",
|
||||
@@ -31,9 +28,8 @@
|
||||
"./dist/translations/*": "./dist/translations/*"
|
||||
},
|
||||
"files": [
|
||||
"README.md",
|
||||
"dist",
|
||||
"dist-cdn"
|
||||
"cdn"
|
||||
],
|
||||
"keywords": [
|
||||
"web components",
|
||||
@@ -62,10 +58,7 @@
|
||||
"spellcheck": "cspell \"**/*.{js,ts,json,html,css,md}\" --no-progress --config=\"../../cspell.json\"",
|
||||
"verify": "npm run prettier && npm run build && npm run test",
|
||||
"prepublishOnly": "npm run verify",
|
||||
"check-updates": "npx npm-check-updates --interactive --format group",
|
||||
"print-version": "echo $npm_package_version",
|
||||
"tag-version": "git tag -a \"v$(npm run print-version | tail -n1)\" -m \"tag v$(npm run print-version | tail -n1)\"",
|
||||
"postversion": "npm run tag-version"
|
||||
"check-updates": "npx npm-check-updates --interactive --format group"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
|
||||
@@ -35,10 +35,10 @@
|
||||
color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
|
||||
background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance~='filled'][appearance~='outlined']) {
|
||||
border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
|
||||
&:host([appearance~='outlined']) {
|
||||
border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance~='accent']) {
|
||||
|
||||
@@ -103,10 +103,10 @@
|
||||
var(--wa-color-mix-active)
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance~='filled'][appearance~='outlined']) .button {
|
||||
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
|
||||
&:host([appearance~='outlined']) .button {
|
||||
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance~='accent']) {
|
||||
|
||||
@@ -25,10 +25,10 @@
|
||||
:host([appearance~='filled']) {
|
||||
background-color: var(--wa-color-fill-quiet, var(--wa-color-brand-fill-quiet));
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance~='filled'][appearance~='outlined']) {
|
||||
border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
|
||||
&:host([appearance~='outlined']) {
|
||||
border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance~='accent']) {
|
||||
|
||||
@@ -22,7 +22,7 @@ export default class WaCallout extends WebAwesomeElement {
|
||||
static css = [styles, variantStyles, sizeStyles];
|
||||
|
||||
/** The callout's theme variant. Defaults to `brand` if not within another element with a variant. */
|
||||
@property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'brand';
|
||||
@property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' | 'brand' = 'brand';
|
||||
|
||||
/** The callout's visual appearance. */
|
||||
@property({ reflect: true }) appearance:
|
||||
|
||||
@@ -30,10 +30,10 @@
|
||||
:host([appearance~='filled']) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance~='filled'][appearance~='outlined']) {
|
||||
border-color: var(--wa-color-neutral-border-quiet);
|
||||
&:host([appearance~='outlined']) {
|
||||
border-color: var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance~='accent']) {
|
||||
|
||||
@@ -49,26 +49,32 @@ details {
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance~='plain']) details {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
:host([appearance~='plain']) {
|
||||
details {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance~='outlined']) details {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
:host([appearance~='outlined']) {
|
||||
details {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance~='filled']) details {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: transparent;
|
||||
:host([appearance~='filled']) {
|
||||
details {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
&:host([appearance~='outlined']) details {
|
||||
border-color: var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance~='filled'][appearance~='outlined']) details {
|
||||
border-color: var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
:host([appearance='plain']) details {
|
||||
:host([appearance='plain']) {
|
||||
border-radius: 0;
|
||||
}
|
||||
|
||||
|
||||
@@ -196,9 +196,8 @@ describe('<wa-details>', () => {
|
||||
await first.show();
|
||||
await second.show();
|
||||
|
||||
// height + 32 (padding probably?)
|
||||
expect(firstBody.clientHeight).to.equal(232);
|
||||
expect(secondBody.clientHeight).to.equal(432);
|
||||
expect(firstBody.clientHeight).to.equal(200);
|
||||
expect(secondBody.clientHeight).to.equal(400);
|
||||
});
|
||||
});
|
||||
}
|
||||
|
||||
@@ -6,6 +6,9 @@
|
||||
|
||||
#menu {
|
||||
display: flex;
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
flex-direction: column;
|
||||
width: max-content;
|
||||
margin: 0;
|
||||
|
||||
@@ -698,16 +698,7 @@ export default class WaDropdown extends WebAwesomeElement {
|
||||
let active = this.hasUpdated ? this.popup.active : this.open;
|
||||
|
||||
return html`
|
||||
<wa-popup
|
||||
placement=${this.placement}
|
||||
distance=${this.distance}
|
||||
skidding=${this.skidding}
|
||||
?active=${active}
|
||||
flip
|
||||
flip-fallback-strategy="best-fit"
|
||||
shift
|
||||
shift-padding="8"
|
||||
>
|
||||
<wa-popup placement=${this.placement} distance=${this.distance} skidding=${this.skidding} ?active=${active}>
|
||||
<slot
|
||||
name="trigger"
|
||||
slot="anchor"
|
||||
|
||||
@@ -44,18 +44,22 @@
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance~='outlined']) .text-field {
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
:host([appearance~='outlined']) {
|
||||
.text-field {
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance~='filled']) .text-field {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
:host([appearance~='filled']) {
|
||||
.text-field {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
:host([appearance~='filled'][appearance~='outlined']) .text-field {
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
&:host([appearance~='outlined']) .text-field {
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
:host([pill]) .text-field {
|
||||
|
||||
@@ -87,18 +87,22 @@
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance~='outlined']) .combobox {
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
:host([appearance~='outlined']) {
|
||||
.combobox {
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance~='filled']) .combobox {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
:host([appearance~='filled']) {
|
||||
.combobox {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
:host([appearance~='filled'][appearance~='outlined']) .combobox {
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
&:host([appearance~='outlined']) .combobox {
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
.display-input {
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { aTimeout, expect, waitUntil } from '@open-wc/testing';
|
||||
import { resetMouse, sendKeys } from '@web/test-runner-commands';
|
||||
import { sendKeys } from '@web/test-runner-commands';
|
||||
import { html } from 'lit';
|
||||
import sinon from 'sinon';
|
||||
import { fixtures } from '../../internal/test/fixture.js';
|
||||
@@ -200,22 +200,21 @@ describe('<wa-select>', () => {
|
||||
</wa-select>
|
||||
`);
|
||||
const option2 = el.querySelectorAll('wa-option')[1];
|
||||
const handler = sinon.spy((_event: InputEvent | Event) => {});
|
||||
const handler = sinon.spy((event: CustomEvent) => {
|
||||
if (el.validationMessage) {
|
||||
expect.fail(`Validation message should be empty when ${event.type} is emitted and a value is set`);
|
||||
}
|
||||
});
|
||||
|
||||
el.addEventListener('change', handler);
|
||||
el.addEventListener('input', handler);
|
||||
|
||||
await clickOnElement(el);
|
||||
await aTimeout(500);
|
||||
await el.updateComplete;
|
||||
await aTimeout(100);
|
||||
await clickOnElement(option2);
|
||||
await el.updateComplete;
|
||||
await aTimeout(500);
|
||||
|
||||
// debugger
|
||||
expect(handler).to.be.calledTwice;
|
||||
expect(el.value).to.equal(option2.value);
|
||||
});
|
||||
});
|
||||
|
||||
@@ -649,8 +648,8 @@ describe('<wa-select>', () => {
|
||||
const el = form.querySelector<WaSelect>('wa-select')!;
|
||||
|
||||
expect(el.defaultValue).to.equal('option-1');
|
||||
expect(el.value).to.equal(null);
|
||||
expect(new FormData(form).get('select')).equal(null);
|
||||
expect(el.value).to.equal('');
|
||||
expect(new FormData(form).get('select')).equal('');
|
||||
|
||||
const option = document.createElement('wa-option');
|
||||
option.value = 'option-1';
|
||||
@@ -698,8 +697,8 @@ describe('<wa-select>', () => {
|
||||
);
|
||||
|
||||
const el = form.querySelector<WaSelect>('wa-select')!;
|
||||
expect(el.value).to.equal(null);
|
||||
expect(new FormData(form).get('select')).to.equal(null);
|
||||
expect(el.value).to.equal('');
|
||||
expect(new FormData(form).get('select')).to.equal('');
|
||||
|
||||
const option = document.createElement('wa-option');
|
||||
option.value = 'foo';
|
||||
@@ -772,12 +771,12 @@ describe('<wa-select>', () => {
|
||||
);
|
||||
|
||||
const el = form.querySelector<WaSelect>('wa-select')!;
|
||||
expect(el.value).to.equal(null);
|
||||
expect(el.value).to.equal('');
|
||||
|
||||
el.defaultValue = 'foo';
|
||||
el.value = 'foo';
|
||||
await aTimeout(10);
|
||||
await el.updateComplete;
|
||||
expect(el.value).to.equal(null);
|
||||
expect(el.value).to.equal('');
|
||||
|
||||
const option = document.createElement('wa-option');
|
||||
option.value = 'foo';
|
||||
@@ -889,43 +888,6 @@ describe('<wa-select>', () => {
|
||||
// Get the popup element and check its active state
|
||||
expect(popup?.active).to.be.true;
|
||||
});
|
||||
|
||||
// https://github.com/shoelace-style/webawesome/issues/1131
|
||||
// new test, failing only in CI
|
||||
it.skip('Should work properly with empty values on select', async () => {
|
||||
const el = await fixture<WaSelect>(html`
|
||||
<wa-select label="Select one">
|
||||
<wa-option value="">Blank Option</wa-option>
|
||||
<wa-option value="option-2">Option 2</wa-option>
|
||||
<wa-option value="option-3">Option 3</wa-option>
|
||||
</wa-select>
|
||||
`);
|
||||
|
||||
await resetMouse();
|
||||
|
||||
await el.show();
|
||||
const options = el.querySelectorAll('wa-option');
|
||||
await aTimeout(100);
|
||||
// firefox doesnt like clicks -.-
|
||||
await clickOnElement(options[0]);
|
||||
await resetMouse();
|
||||
await el.updateComplete;
|
||||
expect(el.value).to.equal('');
|
||||
|
||||
await aTimeout(100);
|
||||
await clickOnElement(options[1]);
|
||||
await resetMouse();
|
||||
await el.updateComplete;
|
||||
await aTimeout(100);
|
||||
expect(el.value).to.equal('option-2');
|
||||
|
||||
await clickOnElement(options[0]);
|
||||
await resetMouse();
|
||||
await el.updateComplete;
|
||||
await aTimeout(100);
|
||||
expect(el.value).to.equal('');
|
||||
await resetMouse();
|
||||
});
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
@@ -114,22 +114,22 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
@state() displayLabel = '';
|
||||
@state() currentOption: WaOption;
|
||||
@state() selectedOptions: WaOption[] = [];
|
||||
@state() optionValues: Set<string | null> | undefined;
|
||||
@state() optionValues: Set<string> | undefined;
|
||||
|
||||
/** The name of the select, submitted as a name/value pair with form data. */
|
||||
@property() name = '';
|
||||
|
||||
private _defaultValue: null | string | string[] = null;
|
||||
private _defaultValue: string | string[] = '';
|
||||
|
||||
@property({
|
||||
attribute: false,
|
||||
})
|
||||
set defaultValue(val: null | string | string[]) {
|
||||
set defaultValue(val: string | string[]) {
|
||||
this._defaultValue = this.convertDefaultValue(val);
|
||||
}
|
||||
|
||||
get defaultValue() {
|
||||
return this.convertDefaultValue(this._defaultValue);
|
||||
return this._defaultValue;
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -147,40 +147,35 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
return val;
|
||||
}
|
||||
|
||||
private _value: string[] | undefined | null;
|
||||
private _value: string[] | undefined;
|
||||
|
||||
/** The select's value. This will be a string for single select or an array for multi-select. */
|
||||
@property({ attribute: 'value', reflect: false })
|
||||
set value(val: string | string[] | null) {
|
||||
set value(val: string | string[]) {
|
||||
let oldValue = this.value;
|
||||
|
||||
if ((val as any) instanceof FormData) {
|
||||
val = (val as unknown as FormData).getAll(this.name) as string[];
|
||||
}
|
||||
|
||||
if (val != null && !Array.isArray(val)) {
|
||||
if (!Array.isArray(val)) {
|
||||
val = [val];
|
||||
}
|
||||
|
||||
this._value = val ?? null;
|
||||
this._value = val;
|
||||
let newValue = this.value;
|
||||
|
||||
if (newValue !== oldValue) {
|
||||
this.valueHasChanged = true;
|
||||
this.requestUpdate('value', oldValue);
|
||||
}
|
||||
}
|
||||
|
||||
get value() {
|
||||
let value = this._value ?? this.defaultValue ?? null;
|
||||
let value = this._value ?? this.defaultValue;
|
||||
value = Array.isArray(value) ? value : [value];
|
||||
let optionsChanged = !this.optionValues;
|
||||
|
||||
if (value != null) {
|
||||
value = Array.isArray(value) ? value : [value];
|
||||
}
|
||||
|
||||
if (value == null) {
|
||||
this.optionValues = new Set(null);
|
||||
} else {
|
||||
if (optionsChanged) {
|
||||
this.optionValues = new Set(
|
||||
this.getAllOptions()
|
||||
.filter(option => !option.disabled)
|
||||
@@ -189,11 +184,11 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
}
|
||||
|
||||
// Drop values not in the DOM
|
||||
let ret: null | string | string[] = value;
|
||||
if (value != null) {
|
||||
ret = value.filter(v => this.optionValues!.has(v));
|
||||
ret = this.multiple ? ret : ret[0];
|
||||
ret = ret ?? null;
|
||||
let ret: string | string[] = value.filter(v => this.optionValues!.has(v));
|
||||
ret = this.multiple ? ret : (ret[0] ?? '');
|
||||
|
||||
if (optionsChanged) {
|
||||
this.requestUpdate('value');
|
||||
}
|
||||
|
||||
return ret;
|
||||
@@ -296,17 +291,16 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
// Because this is a form control, it shouldn't be opened initially
|
||||
this.open = false;
|
||||
}
|
||||
|
||||
private updateDefaultValue() {
|
||||
const allOptions = this.getAllOptions();
|
||||
const defaultSelectedOptions = allOptions.filter(el => el.hasAttribute('selected') || el.defaultSelected);
|
||||
if (defaultSelectedOptions.length > 0) {
|
||||
const selectedValues = defaultSelectedOptions.map(el => el.value);
|
||||
this._defaultValue = this.multiple ? selectedValues : selectedValues[0];
|
||||
}
|
||||
if (this.hasAttribute('value')) {
|
||||
this._defaultValue = this.getAttribute('value') || null;
|
||||
if (!this._defaultValue) {
|
||||
const allOptions = this.getAllOptions();
|
||||
const selectedOptions = allOptions.filter(el => el.selected || el.defaultSelected);
|
||||
if (selectedOptions.length > 0) {
|
||||
const selectedValues = selectedOptions.map(el => el.value);
|
||||
this._defaultValue = this.multiple ? selectedValues : selectedValues[0];
|
||||
} else if (this.hasAttribute('value')) {
|
||||
this._defaultValue = this.getAttribute('value') || '';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -381,7 +375,6 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
// If it is open, update the value based on the current selection and close it
|
||||
if (this.currentOption && !this.currentOption.disabled) {
|
||||
this.valueHasChanged = true;
|
||||
this.hasInteracted = true;
|
||||
if (this.multiple) {
|
||||
this.toggleOptionSelection(this.currentOption);
|
||||
} else {
|
||||
@@ -513,7 +506,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
private handleClearClick(event: MouseEvent) {
|
||||
event.stopPropagation();
|
||||
|
||||
if (this.value !== null) {
|
||||
if (this.value !== '') {
|
||||
this.setSelectedOptions([]);
|
||||
this.displayInput.focus({ preventScroll: true });
|
||||
|
||||
@@ -535,11 +528,10 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
private handleOptionClick(event: MouseEvent) {
|
||||
const target = event.target as HTMLElement;
|
||||
const option = target.closest('wa-option');
|
||||
const oldValue = this.value;
|
||||
|
||||
if (option && !option.disabled) {
|
||||
this.hasInteracted = true;
|
||||
this.valueHasChanged = true;
|
||||
|
||||
if (this.multiple) {
|
||||
this.toggleOptionSelection(option);
|
||||
} else {
|
||||
@@ -549,13 +541,13 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
// Set focus after updating so the value is announced by screen readers
|
||||
this.updateComplete.then(() => this.displayInput.focus({ preventScroll: true }));
|
||||
|
||||
this.requestUpdate('value');
|
||||
|
||||
// Emit after updating
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
if (this.value !== oldValue) {
|
||||
// Emit after updating
|
||||
this.updateComplete.then(() => {
|
||||
this.dispatchEvent(new InputEvent('input', { bubbles: true, composed: true }));
|
||||
this.dispatchEvent(new Event('change', { bubbles: true, composed: true }));
|
||||
});
|
||||
}
|
||||
|
||||
if (!this.multiple) {
|
||||
this.hide();
|
||||
@@ -574,22 +566,18 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
this.optionValues = undefined; // dirty the value so it gets recalculated
|
||||
|
||||
// Update defaultValue if it hasn't been explicitly set and we have selected options
|
||||
this.updateDefaultValue();
|
||||
|
||||
let value = this.value;
|
||||
|
||||
if (value == null || (!this.valueHasChanged && !this.hasInteracted)) {
|
||||
this.selectionChanged();
|
||||
return;
|
||||
if (!this._defaultValue && !this.hasUpdated) {
|
||||
const selectedOptions = allOptions.filter(el => el.selected || el.defaultSelected);
|
||||
if (selectedOptions.length > 0) {
|
||||
const selectedValues = selectedOptions.map(el => el.value);
|
||||
this._defaultValue = this.multiple ? selectedValues : selectedValues[0];
|
||||
}
|
||||
}
|
||||
|
||||
if (!Array.isArray(value)) {
|
||||
value = [value];
|
||||
}
|
||||
const value = this.value;
|
||||
|
||||
// Select only the options that match the new value
|
||||
const selectedOptions = allOptions.filter(el => value.includes(el.value));
|
||||
this.setSelectedOptions(selectedOptions);
|
||||
this.setSelectedOptions(allOptions.filter(el => value.includes(el.value) || el.selected));
|
||||
}
|
||||
|
||||
private handleTagRemove(event: WaRemoveEvent, directOption?: WaOption) {
|
||||
@@ -702,36 +690,29 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
|
||||
// Update selected options cache
|
||||
this.selectedOptions = options.filter(el => {
|
||||
if (!this.hasInteracted && !this.valueHasChanged) {
|
||||
const defaultValue = this.defaultValue;
|
||||
const defaultValues = Array.isArray(defaultValue) ? defaultValue : [defaultValue];
|
||||
return el.hasAttribute('selected') || el.defaultSelected || el.selected || defaultValues?.includes(el.value);
|
||||
}
|
||||
|
||||
return el.selected;
|
||||
});
|
||||
|
||||
let selectedValues = new Set(this.selectedOptions.map(el => el.value));
|
||||
|
||||
// Toggle values present in the DOM from this.value, while preserving options NOT present in the DOM (for lazy loading)
|
||||
// Note that options NOT present in the DOM will be moved to the end after this
|
||||
if (selectedValues.size > 0 || this._value) {
|
||||
const oldValue = this._value;
|
||||
if (this._value == null) {
|
||||
if (!this._value) {
|
||||
// First time it's set
|
||||
let value = this.defaultValue ?? [];
|
||||
this._value = Array.isArray(value) ? value : [value];
|
||||
}
|
||||
|
||||
// Filter out values that are in the DOM
|
||||
this._value = this._value?.filter(value => !this.optionValues?.has(value)) ?? null;
|
||||
this._value?.unshift(...selectedValues);
|
||||
this._value = this._value.filter(value => !this.optionValues?.has(value));
|
||||
this._value.unshift(...selectedValues);
|
||||
this.requestUpdate('value', oldValue);
|
||||
}
|
||||
|
||||
// Update the value and display label
|
||||
if (this.multiple) {
|
||||
if (this.placeholder && !this.value?.length) {
|
||||
if (this.placeholder && this.value.length === 0) {
|
||||
// When no items are selected, keep the value empty so the placeholder shows
|
||||
this.displayLabel = '';
|
||||
} else {
|
||||
@@ -795,8 +776,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
const value = Array.isArray(this.value) ? this.value : [this.value];
|
||||
|
||||
// Select only the options that match the new value
|
||||
const selectedOptions = allOptions.filter(el => value.includes(el.value));
|
||||
this.setSelectedOptions(selectedOptions);
|
||||
this.setSelectedOptions(allOptions.filter(el => value.includes(el.value)));
|
||||
this.updateValidity();
|
||||
}
|
||||
|
||||
|
||||
@@ -30,10 +30,10 @@
|
||||
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
|
||||
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance~='filled'][appearance~='outlined']) {
|
||||
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
|
||||
&:host([appearance~='outlined']) {
|
||||
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance~='accent']) {
|
||||
|
||||
@@ -25,18 +25,22 @@
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance~='outlined']) .textarea {
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
:host([appearance~='outlined']) {
|
||||
.textarea {
|
||||
background-color: var(--wa-form-control-background-color);
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
:host([appearance~='filled']) .textarea {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
:host([appearance~='filled']) {
|
||||
.textarea {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-color-neutral-fill-quiet);
|
||||
}
|
||||
|
||||
:host([appearance~='filled'][appearance~='outlined']) .textarea {
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
&:host([appearance~='outlined']) .textarea {
|
||||
border-color: var(--wa-form-control-border-color);
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
||||
@@ -1,5 +0,0 @@
|
||||
@import url('variants/brand.css');
|
||||
@import url('variants/neutral.css');
|
||||
@import url('variants/success.css');
|
||||
@import url('variants/warning.css');
|
||||
@import url('variants/danger.css');
|
||||
@@ -181,7 +181,7 @@
|
||||
}
|
||||
|
||||
del {
|
||||
color: color-mix(in oklab, currentColor, transparent 10%);
|
||||
color: var(--wa-color-text-quiet);
|
||||
text-decoration-color: var(--wa-color-danger-on-quiet);
|
||||
text-decoration-line: line-through;
|
||||
text-decoration-thickness: 0.09375em;
|
||||
@@ -190,7 +190,7 @@
|
||||
mark {
|
||||
padding: 0.125em 0.25em;
|
||||
|
||||
color: var(--wa-color-warning-on-quiet);
|
||||
color: inherit;
|
||||
|
||||
background-color: var(--wa-color-warning-fill-quiet);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
@@ -226,12 +226,13 @@
|
||||
kbd {
|
||||
padding: 0.125em 0.25em;
|
||||
|
||||
color: var(--wa-color-text-normal);
|
||||
font-family: var(--wa-font-family-code);
|
||||
font-size: var(--wa-font-size-smaller);
|
||||
|
||||
border: solid var(--wa-border-width-s) color-mix(in oklab, currentColor, transparent 50%);
|
||||
border: solid var(--wa-border-width-s) var(--wa-color-neutral-border-quiet);
|
||||
border-radius: var(--wa-border-radius-s);
|
||||
box-shadow: 0 0.125em 0 0 color-mix(in oklab, currentColor, transparent 50%);
|
||||
box-shadow: 0 0.125em 0 0 var(--wa-color-neutral-border-quiet);
|
||||
|
||||
wa-icon {
|
||||
vertical-align: -2px;
|
||||
@@ -248,13 +249,6 @@
|
||||
text-underline-offset: 0.125em;
|
||||
}
|
||||
|
||||
*:is([appearance~='accent'], .wa-accent) {
|
||||
a,
|
||||
a:hover {
|
||||
color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
a:hover {
|
||||
color: color-mix(in oklab, var(--wa-color-text-link), var(--wa-color-mix-hover));
|
||||
text-decoration: var(--wa-link-decoration-hover);
|
||||
@@ -363,15 +357,13 @@
|
||||
background-color: color-mix(in oklab, var(--wa-color-fill-quiet) 60%, transparent);
|
||||
}
|
||||
|
||||
:where(table.wa-hover-rows) & {
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--wa-color-fill-quiet);
|
||||
@media (hover: hover) {
|
||||
&:hover {
|
||||
background-color: var(--wa-color-fill-quiet);
|
||||
|
||||
&,
|
||||
+ tr {
|
||||
border-top-color: var(--wa-color-border-normal);
|
||||
}
|
||||
&,
|
||||
+ tr {
|
||||
border-top-color: var(--wa-color-border-normal);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -372,6 +372,10 @@
|
||||
--wa-transition-normal: 0;
|
||||
--wa-transition-fast: 0;
|
||||
|
||||
.wa-dark & {
|
||||
--wa-color-shadow: var(--wa-color-border-quiet);
|
||||
}
|
||||
|
||||
&[appearance='outlined'],
|
||||
&.wa-outlined:not(.wa-filled) {
|
||||
--wa-color-shadow: var(--wa-color-border-loud);
|
||||
@@ -394,7 +398,7 @@
|
||||
&:not([disabled]):not(:disabled):active {
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
color: var(--wa-color-fill-quiet);
|
||||
color: var(--wa-color-fill-normal);
|
||||
background-color: var(--wa-color-shadow);
|
||||
border-color: var(--wa-color-shadow);
|
||||
box-shadow: none;
|
||||
@@ -403,12 +407,11 @@
|
||||
}
|
||||
}
|
||||
.wa-dark & {
|
||||
&[appearance~='accent'],
|
||||
&.wa-accent {
|
||||
&:not([appearance~='plain']):not(.wa-plain) {
|
||||
&:not([disabled]):not(:disabled):active {
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
color: var(--wa-color-on-quiet);
|
||||
color: var(--wa-color-fill-loud);
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -477,8 +480,8 @@
|
||||
&.wa-accent {
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
--wa-color-shadow: var(--wa-color-on-loud);
|
||||
border-color: var(--wa-color-shadow);
|
||||
--wa-color-shadow: currentColor;
|
||||
border-color: currentColor;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -488,6 +491,7 @@
|
||||
&:where(:not(wa-button)),
|
||||
&::part(base) {
|
||||
--wa-color-shadow: var(--wa-color-border-quiet);
|
||||
border-color: var(--wa-color-border-quiet);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,3 @@
|
||||
@import url('../color/palettes/default.css');
|
||||
@import url('../color/variants.css');
|
||||
|
||||
@layer wa-theme {
|
||||
:where(:root),
|
||||
.wa-theme-default,
|
||||
@@ -177,8 +174,6 @@
|
||||
.wa-light,
|
||||
.wa-dark,
|
||||
.wa-invert {
|
||||
font-family: var(--wa-font-family-body);
|
||||
|
||||
/* #region Fonts ~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
|
||||
--wa-font-family-body: ui-sans-serif, system-ui, sans-serif;
|
||||
--wa-font-family-heading: var(--wa-font-family-body);
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
@layer wa-utilities {
|
||||
/*
|
||||
* Utility to minimize FOUCE and show custom elements only after they're registered
|
||||
*/
|
||||
* Utility to minimize FOUCE and show custom elements only after they're registered
|
||||
*/
|
||||
.wa-cloak:has(:not(:defined)) {
|
||||
animation: 2s step-end wa-fouce-cloak;
|
||||
}
|
||||
|
||||
@@ -1,5 +1,98 @@
|
||||
@layer wa-utilities {
|
||||
:where(:root),
|
||||
/** Register color properties so that the space toggle hack can work. */
|
||||
@property --wa-color-fill-loud {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
|
||||
@property --wa-color-fill-normal {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
|
||||
@property --wa-color-fill-quiet {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
|
||||
@property --wa-color-border-loud {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
|
||||
@property --wa-color-border-normal {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
|
||||
@property --wa-color-border-quiet {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
|
||||
@property --wa-color-on-loud {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
|
||||
@property --wa-color-on-normal {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
|
||||
@property --wa-color-on-quiet {
|
||||
syntax: '<color>';
|
||||
inherits: true;
|
||||
initial-value: transparent;
|
||||
}
|
||||
|
||||
/**
|
||||
* Element defaults.
|
||||
We want these to resolve to inherit when inside a variant, and only be applied when not inside an explicit variant.
|
||||
*/
|
||||
|
||||
:host(wa-button),
|
||||
button,
|
||||
input[type='button'],
|
||||
input[type='submit'],
|
||||
:host(wa-tag) {
|
||||
--wa-color-fill-loud: var(--wa-no-variant, var(--wa-color-neutral-fill-loud));
|
||||
--wa-color-fill-normal: var(--wa-no-variant, var(--wa-color-neutral-fill-normal));
|
||||
--wa-color-fill-quiet: var(--wa-no-variant, var(--wa-color-neutral-fill-quiet));
|
||||
--wa-color-border-loud: var(--wa-no-variant, var(--wa-color-neutral-border-loud));
|
||||
--wa-color-border-normal: var(--wa-no-variant, var(--wa-color-neutral-border-normal));
|
||||
--wa-color-border-quiet: var(--wa-no-variant, var(--wa-color-neutral-border-quiet));
|
||||
--wa-color-on-loud: var(--wa-no-variant, var(--wa-color-neutral-on-loud));
|
||||
--wa-color-on-normal: var(--wa-no-variant, var(--wa-color-neutral-on-normal));
|
||||
--wa-color-on-quiet: var(--wa-no-variant, var(--wa-color-neutral-on-quiet));
|
||||
}
|
||||
|
||||
:host(wa-callout),
|
||||
:host(wa-badge) {
|
||||
--wa-color-fill-loud: var(--wa-no-variant, var(--wa-color-brand-fill-loud));
|
||||
--wa-color-fill-normal: var(--wa-no-variant, var(--wa-color-brand-fill-normal));
|
||||
--wa-color-fill-quiet: var(--wa-no-variant, var(--wa-color-brand-fill-quiet));
|
||||
--wa-color-border-loud: var(--wa-no-variant, var(--wa-color-brand-border-loud));
|
||||
--wa-color-border-normal: var(--wa-no-variant, var(--wa-color-brand-border-normal));
|
||||
--wa-color-border-quiet: var(--wa-no-variant, var(--wa-color-brand-border-quiet));
|
||||
--wa-color-on-loud: var(--wa-no-variant, var(--wa-color-brand-on-loud));
|
||||
--wa-color-on-normal: var(--wa-no-variant, var(--wa-color-brand-on-normal));
|
||||
--wa-color-on-quiet: var(--wa-no-variant, var(--wa-color-brand-on-quiet));
|
||||
}
|
||||
|
||||
/**
|
||||
* Variants
|
||||
*/
|
||||
|
||||
:root,
|
||||
.wa-neutral,
|
||||
:host([variant='neutral']) {
|
||||
--wa-color-fill-loud: var(--wa-color-neutral-fill-loud);
|
||||
@@ -64,4 +157,13 @@
|
||||
--wa-color-on-normal: var(--wa-color-danger-on-normal);
|
||||
--wa-color-on-quiet: var(--wa-color-danger-on-quiet);
|
||||
}
|
||||
|
||||
.wa-neutral,
|
||||
.wa-brand,
|
||||
.wa-success,
|
||||
.wa-warning,
|
||||
.wa-danger,
|
||||
:host([variant]) {
|
||||
--wa-no-variant: /* space toggle */;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -6,5 +6,14 @@
|
||||
/* CSS Utilities */
|
||||
@import url('utilities.css');
|
||||
|
||||
/* Color */
|
||||
@import url('color/palettes/default.css');
|
||||
|
||||
@import url('color/variants/brand.css');
|
||||
@import url('color/variants/neutral.css');
|
||||
@import url('color/variants/success.css');
|
||||
@import url('color/variants/warning.css');
|
||||
@import url('color/variants/danger.css');
|
||||
|
||||
/* Theme */
|
||||
@import url('themes/default.css');
|
||||
|
||||
@@ -40,26 +40,9 @@ export default {
|
||||
middleware: [
|
||||
// When using relative CSS imports, we need to rewrite the paths so the test runner can find them.
|
||||
function rewriteCssUrls(context, next) {
|
||||
if (context.url.endsWith('.css')) {
|
||||
// Okay, this is all fucked up. WTR doesn't seem to like how we use `@import`.
|
||||
if (context.url.startsWith('/base.css')) {
|
||||
context.url = '/dist/styles/color/palettes/base.css';
|
||||
}
|
||||
|
||||
if (context.url.startsWith('/variants')) {
|
||||
context.url = '/dist/styles/color' + context.url;
|
||||
}
|
||||
|
||||
if (context.url.startsWith('/color/variants.css')) {
|
||||
context.url = '/dist/styles' + context.url;
|
||||
}
|
||||
|
||||
if (context.url.startsWith('/color/palettes')) {
|
||||
context.url = '/dist/styles' + context.url;
|
||||
}
|
||||
|
||||
// console.log(context)
|
||||
// console.log({ context, before, after: context.url })
|
||||
if (context.url.endsWith('.css') && context.url.match(/^\/[^/]+\//)) {
|
||||
const theme = context.url.split('/')[1];
|
||||
context.url = `/dist/styles/themes/${theme}${context.url.slice(theme.length + 1)}`;
|
||||
}
|
||||
return next();
|
||||
},
|
||||
|
||||
Reference in New Issue
Block a user