mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 15:34:15 +00:00
Compare commits
2 Commits
kj/pattern
...
card-image
| Author | SHA1 | Date | |
|---|---|---|---|
|
8be2eea04a | ||
|
|
c328671992 |
52
package-lock.json
generated
52
package-lock.json
generated
@@ -16,7 +16,7 @@
|
||||
"@custom-elements-manifest/analyzer": "^0.10.4",
|
||||
"@lit-labs/eleventy-plugin-lit": "^1.0.3",
|
||||
"@lit-labs/testing": "^0.2.5",
|
||||
"@lit/react": "^1.0.8",
|
||||
"@lit/react": "^1.0.6",
|
||||
"@open-wc/testing": "^3.2.0",
|
||||
"@types/mocha": "^10.0.10",
|
||||
"@types/react": "^18.2.28",
|
||||
@@ -2029,9 +2029,10 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@lit/react": {
|
||||
"version": "1.0.8",
|
||||
"resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.8.tgz",
|
||||
"integrity": "sha512-p2+YcF+JE67SRX3mMlJ1TKCSTsgyOVdAwd/nxp3NuV1+Cb6MWALbN6nT7Ld4tpmYofcE5kcaSY1YBB9erY+6fw==",
|
||||
"version": "1.0.7",
|
||||
"resolved": "https://registry.npmjs.org/@lit/react/-/react-1.0.7.tgz",
|
||||
"integrity": "sha512-cencnwwLXQKiKxjfFzSgZRngcWJzUDZi/04E0fSaF86wZgchMdvTyu+lE36DrUfvuus3bH8+xLPrhM1cTjwpzw==",
|
||||
"dev": true,
|
||||
"peerDependencies": {
|
||||
"@types/react": "17 || 18 || 19"
|
||||
}
|
||||
@@ -2875,7 +2876,8 @@
|
||||
"node_modules/@types/prop-types": {
|
||||
"version": "15.7.14",
|
||||
"resolved": "https://registry.npmjs.org/@types/prop-types/-/prop-types-15.7.14.tgz",
|
||||
"integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ=="
|
||||
"integrity": "sha512-gNMvNH49DJ7OJYv+KAKn0Xp45p8PLl6zo2YnvDIbTd4J6MER2BmWN49TG7n9LvkyihINxeKW8+3bfS2yDC9dzQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@types/qs": {
|
||||
"version": "6.9.11",
|
||||
@@ -2893,6 +2895,7 @@
|
||||
"version": "18.3.23",
|
||||
"resolved": "https://registry.npmjs.org/@types/react/-/react-18.3.23.tgz",
|
||||
"integrity": "sha512-/LDXMQh55EzZQ0uVAZmKKhfENivEvWz6E+EYzh+/MCjMhNsotd+ZHhBGIjFDTi6+fz0OhQQQLbTgdQIxxCsC0w==",
|
||||
"dev": true,
|
||||
"dependencies": {
|
||||
"@types/prop-types": "*",
|
||||
"csstype": "^3.0.2"
|
||||
@@ -2983,12 +2986,6 @@
|
||||
"@types/node": "*"
|
||||
}
|
||||
},
|
||||
"node_modules/@wc-toolkit/jsx-types": {
|
||||
"version": "1.3.0",
|
||||
"resolved": "https://registry.npmjs.org/@wc-toolkit/jsx-types/-/jsx-types-1.3.0.tgz",
|
||||
"integrity": "sha512-2rcRyPNEAdesFlokSSFBuCjpPPrMySk4NqyVJsqCs/WczcAUnIGwjnJk2fd/SNmzSjxGFRIFLAhXOgFOHLPvxQ==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/@web/browser-logs": {
|
||||
"version": "0.4.0",
|
||||
"resolved": "https://registry.npmjs.org/@web/browser-logs/-/browser-logs-0.4.0.tgz",
|
||||
@@ -5802,7 +5799,8 @@
|
||||
"node_modules/csstype": {
|
||||
"version": "3.1.3",
|
||||
"resolved": "https://registry.npmjs.org/csstype/-/csstype-3.1.3.tgz",
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw=="
|
||||
"integrity": "sha512-M1uQkMl8rQK/szD0LNhtqxIPLpimGm8sOBwU7lLnCpSbTyY3yeU1Vc7l4KT5zT4s/yOxHH5O7tIuuLOCnLADRw==",
|
||||
"dev": true
|
||||
},
|
||||
"node_modules/custom-element-jet-brains-integration": {
|
||||
"version": "1.7.0",
|
||||
@@ -13977,12 +13975,11 @@
|
||||
},
|
||||
"packages/webawesome": {
|
||||
"name": "@awesome.me/webawesome",
|
||||
"version": "3.0.0-beta.3",
|
||||
"version": "3.0.0-beta.2",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/react": "^1.0.8",
|
||||
"@shoelace-style/animations": "^1.2.0",
|
||||
"@shoelace-style/localize": "^3.2.1",
|
||||
"composed-offset-position": "^0.0.6",
|
||||
@@ -13991,49 +13988,30 @@
|
||||
"qr-creator": "^1.0.0",
|
||||
"style-observer": "^0.0.7"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wc-toolkit/jsx-types": "^1.3.0"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro": {
|
||||
"name": "@shoelace-style/webawesome-pro",
|
||||
"version": "3.0.0-beta.3",
|
||||
"version": "3.0.0-beta.2",
|
||||
"license": "TODO",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/react": "^1.0.8",
|
||||
"@shoelace-style/animations": "^1.2.0",
|
||||
"@shoelace-style/localize": "^3.2.1",
|
||||
"composed-offset-position": "^0.0.6",
|
||||
"lit": "^3.2.1",
|
||||
"nanoid": "^5.1.5",
|
||||
"qr-creator": "^1.0.0",
|
||||
"style-observer": "^0.0.7"
|
||||
},
|
||||
"devDependencies": {},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/nanoid": {
|
||||
"version": "5.1.5",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
|
||||
"integrity": "sha512-Ir/+ZpE9fDsNH0hQ3C68uyThDXzYcim2EqcZ8zn8Chtt1iylPT9xXJB0kPCnqzgcEGikO9RxSrh63MsmVCU7Fw==",
|
||||
"funding": [
|
||||
{
|
||||
"type": "github",
|
||||
"url": "https://github.com/sponsors/ai"
|
||||
}
|
||||
],
|
||||
"bin": {
|
||||
"nanoid": "bin/nanoid.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": "^18 || >=20"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/nanoid": {
|
||||
"version": "5.1.5",
|
||||
"resolved": "https://registry.npmjs.org/nanoid/-/nanoid-5.1.5.tgz",
|
||||
|
||||
@@ -18,12 +18,13 @@
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
},
|
||||
"dependencies": {},
|
||||
"devDependencies": {
|
||||
"@11ty/eleventy": "3.0.0",
|
||||
"@custom-elements-manifest/analyzer": "^0.10.4",
|
||||
"@lit-labs/eleventy-plugin-lit": "^1.0.3",
|
||||
"@lit-labs/testing": "^0.2.5",
|
||||
"@lit/react": "^1.0.8",
|
||||
"@lit/react": "^1.0.6",
|
||||
"@open-wc/testing": "^3.2.0",
|
||||
"@types/mocha": "^10.0.10",
|
||||
"@types/react": "^18.2.28",
|
||||
@@ -86,3 +87,4 @@
|
||||
]
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
import { jsxTypesPlugin } from '@wc-toolkit/jsx-types';
|
||||
import { customElementJetBrainsPlugin } from 'custom-element-jet-brains-integration';
|
||||
import { customElementVsCodePlugin } from 'custom-element-vs-code-integration';
|
||||
// import { customElementVuejsPlugin } from 'custom-element-vuejs-integration';
|
||||
@@ -165,7 +164,6 @@ export default {
|
||||
],
|
||||
}),
|
||||
|
||||
// Generate custom JetBrains data
|
||||
customElementJetBrainsPlugin({
|
||||
outdir: './dist-cdn',
|
||||
excludeCss: true,
|
||||
@@ -178,12 +176,6 @@ export default {
|
||||
},
|
||||
}),
|
||||
|
||||
// Generate JSX types (see https://wc-toolkit.com/integrations/jsx/)
|
||||
jsxTypesPlugin({
|
||||
fileName: 'custom-elements-jsx.d.ts',
|
||||
outdir,
|
||||
}),
|
||||
|
||||
//
|
||||
// TODO - figure out why this broke when events were updated
|
||||
//
|
||||
|
||||
@@ -229,12 +229,9 @@ export default async function (eleventyConfig) {
|
||||
// eleventyConfig.addPlugin(formatCodePlugin());
|
||||
// }
|
||||
|
||||
// This needs to happen in "eleventy.after" otherwise incremental builds never update.
|
||||
eleventyConfig.on('eleventy.after', function () {
|
||||
let assetsDir = path.join(process.env.BASE_DIR || 'docs', 'assets');
|
||||
const siteAssetsDir = path.join(eleventyConfig.directories.output, 'assets');
|
||||
fs.cpSync(assetsDir, siteAssetsDir, { recursive: true });
|
||||
});
|
||||
let assetsDir = path.join(process.env.BASE_DIR || 'docs', 'assets');
|
||||
const siteAssetsDir = path.join(eleventyConfig.directories.output, 'assets');
|
||||
fs.cpSync(assetsDir, siteAssetsDir, { recursive: true });
|
||||
|
||||
for (let glob of passThrough) {
|
||||
eleventyConfig.addPassthroughCopy(glob);
|
||||
@@ -264,10 +261,13 @@ export default async function (eleventyConfig) {
|
||||
// });
|
||||
// }
|
||||
|
||||
// For a server build, we expect a server to run the second transform.
|
||||
// For dev builds, we run the second transform in a middleware.
|
||||
if (!isDev && !serverBuild) {
|
||||
if (!isDev) {
|
||||
eleventyConfig.addTransform('simulate-webawesome-app', function (content) {
|
||||
// For a server build, we expect a server to run the second transform.
|
||||
if (serverBuild) {
|
||||
return content;
|
||||
}
|
||||
|
||||
// Only run the transform on files nunjucks would transform.
|
||||
if (!this.page.inputPath.match(/.(md|html|njk)$/)) {
|
||||
return content;
|
||||
|
||||
@@ -127,7 +127,7 @@
|
||||
{% block header %}
|
||||
<h1 class="title">{{ title }}</h1>
|
||||
{% endblock %}
|
||||
|
||||
|
||||
{% block beforeContent %}{% endblock %}
|
||||
|
||||
{% block content %}
|
||||
|
||||
@@ -218,8 +218,6 @@
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/app/pagination/">Pagination</a>
|
||||
</li><li>
|
||||
<a href="/docs/patterns/app/password/">Password</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/app/permissions/">Permissions</a>
|
||||
@@ -233,30 +231,18 @@
|
||||
<a href="/docs/patterns/blog-news/">Blog & News</a>
|
||||
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
|
||||
<ul>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/banners/">Banners</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/call-to-action/">Call To Action</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/category-list/">Category List</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/contact/">Contact</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/featured-post/">Featured Post</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/footer/">Footer</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/grid-section/">Grid Section</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/header/">Header</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/newsletter/">Newsletter</a>
|
||||
</li>
|
||||
@@ -274,19 +260,10 @@
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/login/">Sign Up & Login</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/numbers/">Numbers</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/social-share/">Social Share</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/teams/">Teams</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/docs/patterns/blog-news/testimonials/">Testimonials</a>
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li>
|
||||
|
||||
@@ -12,8 +12,9 @@
|
||||
<th><code>brand</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="brand" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="brand" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="brand" appearance="filled outlined">Filled + Outlined</wa-badge>
|
||||
<wa-badge variant="brand" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="brand" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="brand" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="brand" appearance="plain">Plain</wa-badge>
|
||||
@@ -21,8 +22,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-brand" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="filled outlined">Filled + Outlined</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-brand" appearance="plain">Plain</wa-badge>
|
||||
@@ -33,8 +35,9 @@
|
||||
<th><code>neutral</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="neutral" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="filled outlined">Filled + Outlined</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="neutral" appearance="plain">Plain</wa-badge>
|
||||
@@ -42,8 +45,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-neutral" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="filled outlined">Filled + Outlined</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-neutral" appearance="plain">Plain</wa-badge>
|
||||
@@ -54,8 +58,9 @@
|
||||
<th><code>success</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="success" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="success" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="success" appearance="filled outlined">Filled + Outlined</wa-badge>
|
||||
<wa-badge variant="success" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="success" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="success" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="success" appearance="plain">Plain</wa-badge>
|
||||
@@ -63,8 +68,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-success" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="filled outlined">Filled + Outlined</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-success" appearance="plain">Plain</wa-badge>
|
||||
@@ -75,8 +81,9 @@
|
||||
<th><code>warning</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="warning" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="warning" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="warning" appearance="filled outlined">Filled + Outlined</wa-badge>
|
||||
<wa-badge variant="warning" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="warning" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="warning" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="warning" appearance="plain">Plain</wa-badge>
|
||||
@@ -84,8 +91,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-warning" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="filled outlined">Filled + Outlined</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-warning" appearance="plain">Plain</wa-badge>
|
||||
@@ -96,8 +104,9 @@
|
||||
<th><code>danger</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge variant="danger" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge variant="danger" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge variant="danger" appearance="filled outlined">Filled + Outlined</wa-badge>
|
||||
<wa-badge variant="danger" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge variant="danger" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge variant="danger" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge variant="danger" appearance="plain">Plain</wa-badge>
|
||||
@@ -105,8 +114,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-badge class="wa-danger" appearance="accent outlined">A+O</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="accent">Accent</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="filled outlined">Filled + Outlined</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="filled outlined">F+O</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="filled">Filled</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="outlined">Outlined</wa-badge>
|
||||
<wa-badge class="wa-danger" appearance="plain">Plain</wa-badge>
|
||||
@@ -132,8 +142,9 @@
|
||||
<th><code>brand</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="brand" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="brand" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="brand" appearance="filled outlined">Filled + Outlined</wa-button>
|
||||
<wa-button variant="brand" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="brand" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="brand" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="brand" appearance="plain">Plain</wa-button>
|
||||
@@ -141,8 +152,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-brand" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-brand" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-brand" appearance="filled outlined">Filled + Outlined</wa-button>
|
||||
<wa-button class="wa-brand" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-brand" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-brand" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-brand" appearance="plain">Plain</wa-button>
|
||||
@@ -153,8 +165,9 @@
|
||||
<th><code>neutral</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="neutral" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="neutral" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="neutral" appearance="filled outlined">Filled + Outlined</wa-button>
|
||||
<wa-button variant="neutral" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="neutral" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="neutral" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="neutral" appearance="plain">Plain</wa-button>
|
||||
@@ -162,8 +175,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-neutral" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="filled outlined">Filled + Outlined</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-neutral" appearance="plain">Plain</wa-button>
|
||||
@@ -174,8 +188,9 @@
|
||||
<th><code>success</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="success" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="success" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="success" appearance="filled outlined">Filled + Outlined</wa-button>
|
||||
<wa-button variant="success" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="success" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="success" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="success" appearance="plain">Plain</wa-button>
|
||||
@@ -183,8 +198,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-success" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-success" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-success" appearance="filled outlined">Filled + Outlined</wa-button>
|
||||
<wa-button class="wa-success" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-success" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-success" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-success" appearance="plain">Plain</wa-button>
|
||||
@@ -195,8 +211,9 @@
|
||||
<th><code>warning</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="warning" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="warning" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="warning" appearance="filled outlined">Filled + Outlined</wa-button>
|
||||
<wa-button variant="warning" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="warning" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="warning" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="warning" appearance="plain">Plain</wa-button>
|
||||
@@ -204,8 +221,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-warning" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-warning" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-warning" appearance="filled outlined">Filled + Outlined</wa-button>
|
||||
<wa-button class="wa-warning" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-warning" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-warning" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-warning" appearance="plain">Plain</wa-button>
|
||||
@@ -216,8 +234,9 @@
|
||||
<th><code>danger</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button variant="danger" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button variant="danger" appearance="accent">Accent</wa-button>
|
||||
<wa-button variant="danger" appearance="filled outlined">Filled + Outlined</wa-button>
|
||||
<wa-button variant="danger" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button variant="danger" appearance="filled">Filled</wa-button>
|
||||
<wa-button variant="danger" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button variant="danger" appearance="plain">Plain</wa-button>
|
||||
@@ -225,8 +244,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-button class="wa-danger" appearance="accent outlined">A+O</wa-button>
|
||||
<wa-button class="wa-danger" appearance="accent">Accent</wa-button>
|
||||
<wa-button class="wa-danger" appearance="filled outlined">Filled + Outlined</wa-button>
|
||||
<wa-button class="wa-danger" appearance="filled outlined">F+O</wa-button>
|
||||
<wa-button class="wa-danger" appearance="filled">Filled</wa-button>
|
||||
<wa-button class="wa-danger" appearance="outlined">Outlined</wa-button>
|
||||
<wa-button class="wa-danger" appearance="plain">Plain</wa-button>
|
||||
@@ -252,13 +272,17 @@
|
||||
<th><code>brand</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="brand" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="brand" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="brand" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Filled + Outlined
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="brand" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
@@ -276,13 +300,17 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-brand" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-brand" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-brand" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
Filled + Outlined
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-brand" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-star"></wa-icon>
|
||||
@@ -303,13 +331,17 @@
|
||||
<th><code>neutral</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="neutral" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Filled + Outlined
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="neutral" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
@@ -327,13 +359,17 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-neutral" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-neutral" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-neutral" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
Filled + Outlined
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-neutral" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-info"></wa-icon>
|
||||
@@ -354,13 +390,17 @@
|
||||
<th><code>success</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="success" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Filled + Outlined
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="success" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
@@ -378,13 +418,17 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-success" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-success" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-success" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
Filled + Outlined
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-success" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-check"></wa-icon>
|
||||
@@ -405,13 +449,17 @@
|
||||
<th><code>warning</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="warning" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Filled + Outlined
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="warning" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
@@ -429,13 +477,17 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-warning" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-warning" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-warning" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
Filled + Outlined
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-warning" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
|
||||
@@ -456,13 +508,17 @@
|
||||
<th><code>danger</code></th>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout variant="danger" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Filled + Outlined
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout variant="danger" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
@@ -480,13 +536,17 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-grid wa-gap-2xs">
|
||||
<wa-callout class="wa-danger" appearance="accent outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
A+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-danger" appearance="accent">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Accent
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-danger" appearance="filled outlined">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
Filled + Outlined
|
||||
F+O
|
||||
</wa-callout>
|
||||
<wa-callout class="wa-danger" appearance="filled">
|
||||
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
|
||||
@@ -522,8 +582,9 @@
|
||||
<th><code>brand</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="brand" appearance="accent outlined">A+O</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 outlined">F+O</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="plain">Plain</wa-tag>
|
||||
@@ -531,8 +592,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-brand" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="filled outlined">Filled + Outlined</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-brand" appearance="plain">Plain</wa-tag>
|
||||
@@ -543,8 +605,9 @@
|
||||
<th><code>neutral</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="neutral" appearance="accent outlined">A+O</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 outlined">F+O</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="plain">Plain</wa-tag>
|
||||
@@ -552,8 +615,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-neutral" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="filled outlined">Filled + Outlined</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-neutral" appearance="plain">Plain</wa-tag>
|
||||
@@ -564,8 +628,9 @@
|
||||
<th><code>success</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="success" appearance="accent outlined">A+O</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 outlined">F+O</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="plain">Plain</wa-tag>
|
||||
@@ -573,8 +638,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-success" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="filled outlined">Filled + Outlined</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-success" appearance="plain">Plain</wa-tag>
|
||||
@@ -585,8 +651,9 @@
|
||||
<th><code>warning</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="warning" appearance="accent outlined">A+O</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 outlined">F+O</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="plain">Plain</wa-tag>
|
||||
@@ -594,8 +661,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-warning" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="filled outlined">Filled + Outlined</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-warning" appearance="plain">Plain</wa-tag>
|
||||
@@ -606,8 +674,9 @@
|
||||
<th><code>danger</code></th>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag variant="danger" appearance="accent outlined">A+O</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 outlined">F+O</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="plain">Plain</wa-tag>
|
||||
@@ -615,8 +684,9 @@
|
||||
</td>
|
||||
<td>
|
||||
<div class="wa-cluster wa-gap-2xs">
|
||||
<wa-tag class="wa-danger" appearance="accent outlined">A+O</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="accent">Accent</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="filled outlined">Filled + Outlined</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="filled outlined">F+O</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="filled">Filled</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="outlined">Outlined</wa-tag>
|
||||
<wa-tag class="wa-danger" appearance="plain">Plain</wa-tag>
|
||||
@@ -625,4 +695,4 @@
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,8 +0,0 @@
|
||||
{% set hasSidebar = true %}
|
||||
{% set hasOutline = true %}
|
||||
{% set section = 'docs' %}
|
||||
|
||||
{% block beforeContent %}
|
||||
<p>{{ description }}</p>
|
||||
{% endblock %}
|
||||
{% extends "../_includes/base.njk" %}
|
||||
@@ -48,23 +48,6 @@ Use the `expand-icon` and `collapse-icon` slots to change the expand and collaps
|
||||
</style>
|
||||
```
|
||||
|
||||
### Icon Position
|
||||
|
||||
The default position for the expand and collapse icons is at the end of the summary. Set the `icon-position` attribute to `start` to place the icon at the start of the summary.
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<wa-details summary="Start" icon-position="start">
|
||||
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="End" icon-position="end">
|
||||
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>
|
||||
</div>
|
||||
```
|
||||
|
||||
### HTML in Summary
|
||||
|
||||
To use HTML in the summary, use the `summary` slot.
|
||||
@@ -85,17 +68,12 @@ Links and other interactive elements will still retain their behavior:
|
||||
|
||||
### Right-to-Left Languages
|
||||
|
||||
The details component, including its `icon-position`, automatically adapts to right-to-left languages:
|
||||
The details component automatically adapts to right-to-left languages:
|
||||
|
||||
```html {.example}
|
||||
<div class="wa-stack">
|
||||
<wa-details summary="تبديلني" lang="ar" dir="rtl">
|
||||
استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
|
||||
</wa-details>
|
||||
<wa-details summary="تبديلني" lang="ar" dir="rtl" icon-position="start">
|
||||
استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
|
||||
</wa-details>
|
||||
</div>
|
||||
<wa-details summary="تبديلني" lang="ar" dir="rtl">
|
||||
استخدام طريقة لوريم إيبسوم لأنها تعطي توزيعاَ طبيعياَ -إلى حد ما- للأحرف عوضاً عن
|
||||
</wa-details>
|
||||
```
|
||||
|
||||
### Appearance
|
||||
|
||||
@@ -273,10 +273,10 @@ The distance from the panel to the trigger can be customized using the `distance
|
||||
|
||||
### Offset
|
||||
|
||||
The offset of the panel along the trigger can be customized using the `skidding` attribute. This value is specified in pixels.
|
||||
The offset of the panel along the trigger can be customized using the `offset` attribute. This value is specified in pixels.
|
||||
|
||||
```html {.example}
|
||||
<wa-dropdown skidding="30">
|
||||
<wa-dropdown offset="30">
|
||||
<wa-button slot="trigger" with-caret>Edit</wa-button>
|
||||
|
||||
<wa-dropdown-item>Cut</wa-dropdown-item>
|
||||
|
||||
@@ -91,7 +91,7 @@ Use the `distance` attribute to control how far the popover appears from its anc
|
||||
|
||||
### Arrow Size
|
||||
|
||||
Use the `--arrow-size` custom property to change the size of the popover's arrow. To remove it, use the `without-arrow` attribute.
|
||||
Use the `--arrow-size` custom property to change the size of the popover's arrow. Set it to `0` to remove the arrow entirely.
|
||||
|
||||
```html {.example}
|
||||
<div style="display: flex; gap: 1rem; align-items: center;">
|
||||
@@ -99,7 +99,7 @@ Use the `--arrow-size` custom property to change the size of the popover's arrow
|
||||
<wa-popover for="popover__big-arrow" style="--arrow-size: 8px;">I have a big arrow</wa-popover>
|
||||
|
||||
<wa-button id="popover__no-arrow">No arrow</wa-button>
|
||||
<wa-popover for="popover__no-arrow" without-arrow>I don't have an arrow</wa-popover>
|
||||
<wa-popover for="popover__no-arrow" style="--arrow-size: 0;">I don't have an arrow</wa-popover>
|
||||
</div>
|
||||
```
|
||||
|
||||
|
||||
@@ -113,11 +113,11 @@ Tooltips can be controller programmatically by setting the `trigger` attribute t
|
||||
|
||||
### Removing Arrows
|
||||
|
||||
You can control the size of tooltip arrows by overriding the `--wa-tooltip-arrow-size` design token. To remove the arrow, use the `without-arrow` attribute.
|
||||
You can control the size of tooltip arrows by overriding the `--wa-tooltip-arrow-size` design token. To remove them, set the value to `0` as shown below.
|
||||
|
||||
```html {.example}
|
||||
<wa-button id="no-arrow">No Arrow</wa-button>
|
||||
<wa-tooltip for="no-arrow" without-arrow>This is a tooltip with no arrow</wa-tooltip>
|
||||
<wa-tooltip for="no-arrow" style="--wa-tooltip-arrow-size: 0;">This is a tooltip with no arrow</wa-tooltip>
|
||||
```
|
||||
|
||||
To override it globally, set it in a root block in your stylesheet after the Web Awesome stylesheet is loaded.
|
||||
|
||||
@@ -22,7 +22,6 @@ To get everything included in Web Awesome, add the following code to the `<head>
|
||||
```
|
||||
|
||||
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
|
||||
|
||||
@@ -47,18 +46,6 @@ Font Awesome users can set their kit code to unlock Font Awesome Pro icons. You
|
||||
|
||||
---
|
||||
|
||||
{# This looks weird, but without it, markdownItAttrs flags the raw calls incorrectly. #}
|
||||
|
||||
<div>
|
||||
{%- raw -%}
|
||||
{% if currentUser.hasPro %}
|
||||
<div>
|
||||
{% include "server/pro-setup.njk" ignore missing %}
|
||||
</div>
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
</div>
|
||||
|
||||
## Advanced Setup
|
||||
|
||||
The autoloader is the easiest way to use Web Awesome, but different projects (or your own preferences!) may require different installation methods.
|
||||
@@ -99,15 +86,15 @@ Web Awesome does not a provide a single import with all Web Awesome components.
|
||||
|
||||
```js
|
||||
// Option 1: import all Web Awesome styles
|
||||
import '@awesome.me/webawesome/dist/styles/webawesome.css';
|
||||
import "@awesome.me/webawesome/dist/styles/webawesome.css"
|
||||
|
||||
// Option 2: import only the default theme
|
||||
import '@awesome.me/webawesome/dist/styles/themes/default.css';
|
||||
import "@awesome.me/webawesome/dist/styles/themes/default.css"
|
||||
|
||||
// <wa-button>
|
||||
import '@awesome.me/webawesome/dist/components/button/button.js';
|
||||
import "@awesome.me/webawesome/dist/components/button/button.js"
|
||||
// <wa-input>
|
||||
import '@awesome.me/webawesome/dist/components/input/input.js';
|
||||
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.
|
||||
@@ -116,7 +103,7 @@ Once they've been imported, you can use them in your HTML normally. Component im
|
||||
|
||||
Some components rely on assets (icons, images, etc.) and Web Awesome needs to know where they're located. For convenience, Web Awesome will try to auto-detect the correct location based on the script you've loaded it from. This assumes assets are colocated with `webawesome.loader.js` and will "just work" for most users.
|
||||
|
||||
==If you're using the CDN, you can skip this section.== However, if you're [cherry picking](#cherry-picking-from-cdn) or bundling Web Awesome, you'll need to set the base path. You can do this one of two ways.
|
||||
==If you're using the CDN, you can skip this section.== However, if you're [cherry picking](#cherry-picking) or bundling Web Awesome, you'll need to set the base path. You can do this one of two ways.
|
||||
|
||||
```html
|
||||
<!-- Option 1: the data-webawesome attribute -->
|
||||
@@ -149,63 +136,13 @@ Most of the magic behind assets is handled internally by Web Awesome, but if you
|
||||
</script>
|
||||
```
|
||||
|
||||
### The Difference Between `/dist` & `/dist-cdn`
|
||||
## The difference between `/dist` and `/dist-cdn`
|
||||
|
||||
If you have Web Awesome installed locally via npm, you'll notice the following directories in the project's root:
|
||||
If you have Web Awesome installed locally via NPM, you'll notice 2 directories. `/dist-cdn` and `/cdn`.
|
||||
|
||||
```
|
||||
dist/
|
||||
dist-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.
|
||||
|
||||
The `dist-cdn` files come with everything bundled together, so you can use them directly without a build tool. The dist files keep dependencies separate, which lets your bundler optimize and share code more efficiently.
|
||||
TLDR:
|
||||
|
||||
Use `dist-cdn` if you're loading directly in the browser or from a CDN. Use `dist` if you're using a bundler like Webpack or Vite.
|
||||
|
||||
## React Users
|
||||
|
||||
React 19+ [supports custom elements](https://react.dev/blog/2024/04/25/react-19#support-for-custom-elements), so you can import them and use them as you'd expect. Just make sure you've included your Web Awesome theme into your app first.
|
||||
|
||||
```jsx
|
||||
import '@awesome.me/webawesome/dist/components/button/button.js';
|
||||
|
||||
function App() {
|
||||
return <wa-button variant="brand">Button</wa-button>;
|
||||
}
|
||||
|
||||
export default App;
|
||||
```
|
||||
|
||||
If you're using TypeScript, you can add type safety using the types file located at:
|
||||
|
||||
```
|
||||
node_modules/@awesome.me/webawesome/dist/custom-elements-jsx.d.ts
|
||||
```
|
||||
|
||||
This gives you inline documentation, autocomplete, and type-safe validation for every component. You can add the types to your project by updating your `tsconfig.json` file as shown below.
|
||||
|
||||
```json
|
||||
{
|
||||
"compilerOptions": {
|
||||
"types": ["node-modules/@awesome.me/webawesome/dist/custom-elements-jsx.d.ts"]
|
||||
}
|
||||
}
|
||||
```
|
||||
|
||||
Another way is to create a declaration file and extend JSX's `IntrinsicElements`:
|
||||
|
||||
```ts
|
||||
import type { CustomElements, CustomCssProperties } from '@awesome.me/webawesome/dist/custom-elements-jsx.d.ts';
|
||||
|
||||
declare module 'react' {
|
||||
namespace JSX {
|
||||
interface IntrinsicElements extends CustomElements {}
|
||||
}
|
||||
interface CSSProperties extends CustomCssProperties {}
|
||||
}
|
||||
```
|
||||
|
||||
:::details React 18 and below
|
||||
React 18 and below have [poor support](https://custom-elements-everywhere.com/#react) for custom elements. For legacy versions of React, we provide React wrappers for every component. You can find the import instructions by selecting the _React_ tab from the _Importing_ section of each
|
||||
component's documentation.
|
||||
:::
|
||||
- `@awesome.me/webawesome/dist-cdn` is for CDNs or people not using a bundler.
|
||||
- `@awesome.me/webawesome/dist` is for bundlers or importmaps.
|
||||
@@ -12,22 +12,6 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
|
||||
### New Features {data-no-outline}
|
||||
|
||||
- Added the `icon-position` attribute to `<wa-details>` [discuss:1099]
|
||||
- Added the `animating` custom state to `<wa-details>` [pr:1214]
|
||||
- Added `--wa-tooltip-border-color`, `--wa-tooltip-border-style`, and `--wa-tooltip-border-width` tokens [issue:1224]
|
||||
- Added the `without-arrow` attribute to `<wa-popover>` and `<wa-tooltip>` to hide arrows without artifacts
|
||||
- Added JSX types for use with React and others [pr:1256]
|
||||
|
||||
### Bug Fixes and Improvements {data-no-outline}
|
||||
|
||||
- Fixed a bug in `<wa-details>` that caused the content to overflow the container when animating [issue:1149]
|
||||
- Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that prevented the header from showing when the label was missing [issue:1209]
|
||||
- Fixed a missing dependency required for React wrappers
|
||||
|
||||
## 3.0.0-beta.3
|
||||
|
||||
### New Features {data-no-outline}
|
||||
|
||||
- Added `--track-height` custom property to `<wa-progress-bar>` [pr:1154]
|
||||
- Added `--pulse-color` custom property to `<wa-badge>` [pr:1173]
|
||||
|
||||
@@ -38,11 +22,9 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
- Fixed the missing `nanoid` dependency in `package.json` [discuss:1139]
|
||||
- Fixed a bug in `<wa-slider>` that prevented the hint from showing up [discuss:1172]
|
||||
- Fixed a bug in `<wa-textarea>` where setting `resize="auto"` caused the height of the textarea to double [issue:1155]
|
||||
- Fixed a bug in `<wa-color-picker>`, `<wa-checkbox>`, `<wa-input>`, `<wa-radio-group>`, `<wa-switch>`, and `<wa-textarea>` that prevented screen readers from announcing hints [issue:1186]
|
||||
- Fixed a bug in `<wa-card>` that caused slotted media to have incorrectly rounded corners [issue:1107]
|
||||
- Fixed a bug in `<wa-button-group>` that prevented pill buttons from rendering corners properly [issue:1165]
|
||||
- Fixed a bug in `<wa-button-group>` that caused some vertical groups to appear horizontal [issue:1152]
|
||||
- Improved accessibility of `<wa-animated-image>` so keyboard users can focus and toggle the animation [issue:1177]
|
||||
|
||||
## 3.0.0-beta.2
|
||||
|
||||
@@ -191,7 +173,7 @@ Many of these changes and improvements were the direct result of feedback from u
|
||||
|
||||
### Bug fixes {data-no-outline}
|
||||
|
||||
- Specifying inherited CSS properties on `<wa-tooltip>` now works as expected
|
||||
- Specifying inherited CSS properties on `<wa-tooltip>` now works as expected ([thanks Dennis!](https://github.com/shoelace-style/webawesome-alpha/discussions/203))
|
||||
- Fixed a bug in `<wa-select>` that made it hard to use with VueJS, Svelte, and many other frameworks
|
||||
- Fixed a bug in `<wa-select multiple>` that sometimes resulted in empty `<div>` elements being output
|
||||
- Fixed a bug where changing a `<wa-option>` label wouldn't update the display label in `<wa-select>`
|
||||
@@ -411,4 +393,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/discussions)
|
||||
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome-alpha/discussions)
|
||||
|
||||
@@ -131,7 +131,7 @@ To link to a GitHub issue, PR, or discussion, use the following syntax.
|
||||
|
||||
### Frontmatter
|
||||
|
||||
There's a number of frontmatter properties for doing different things in the Web Awesome documentation.
|
||||
There's a number of frontmatter properties for doing different things in the Web Awesome documention.
|
||||
|
||||
For example, to only show a page in development, use the `unpublished: true` key / value pair.
|
||||
|
||||
@@ -363,7 +363,7 @@ Form controls should support submission and validation through the following con
|
||||
|
||||
- Form Controls should extend from `WebAwesomeFormAssociatedElement`
|
||||
- All form controls must use `name`, `value`, and `disabled` properties in the same manner as `HTMLInputElement`
|
||||
- All form controls with the `disabled` property _NOT_ reflect the `disabled` attribute.
|
||||
- All form controls with the `disabled` property *NOT* reflect the `disabled` attribute.
|
||||
- All form controls must have an `invalid` property that reflects their validity
|
||||
- All form controls should mirror their native validation attributes such as `required`, `pattern`, `minlength`, `maxlength`, etc. when possible and use the `MirrorValidator`.
|
||||
- All form controls must be tested to work with the standard `<form>` element
|
||||
|
||||
@@ -6,33 +6,26 @@ wide: true
|
||||
---
|
||||
|
||||
<style>
|
||||
#content {
|
||||
p {
|
||||
max-width: 90ch;
|
||||
p {
|
||||
max-width: 90ch;
|
||||
}
|
||||
tbody {
|
||||
& .wa-grid {
|
||||
--min-column-size: 5ch;
|
||||
}
|
||||
|
||||
tbody {
|
||||
& .wa-grid {
|
||||
--min-column-size: 5ch;
|
||||
}
|
||||
|
||||
& tr th:first-of-type {
|
||||
width: 20ch;
|
||||
}
|
||||
|
||||
& th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
& tr:hover {
|
||||
background-color: color-mix(in oklch, var(--wa-color-fill-quiet), transparent 60%)
|
||||
}
|
||||
& tr th:first-of-type {
|
||||
width: 20ch;
|
||||
}
|
||||
|
||||
wa-divider {
|
||||
--width: var(--wa-border-width-m);
|
||||
--spacing: var(--wa-space-3xl);
|
||||
& th {
|
||||
vertical-align: middle;
|
||||
}
|
||||
& tr:hover {
|
||||
background-color: color-mix(in oklch, var(--wa-color-fill-quiet), transparent 60%)
|
||||
}
|
||||
}
|
||||
wa-divider {
|
||||
--width: var(--wa-border-width-m);
|
||||
--spacing: var(--wa-space-3xl);
|
||||
}
|
||||
</style>
|
||||
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Component Groups
|
||||
description: Style groups of components that share similar qualities with these Web Awesome custom properties.
|
||||
order: 9999
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
For components that share similar qualities, Web Awesome includes custom properties to change the appearance of these related components all at once.
|
||||
@@ -85,19 +84,16 @@ Panels consist of components with larger, contained surface areas like [callout]
|
||||
|
||||
## Tooltips
|
||||
|
||||
Tooltip styles are shared between the [tooltip](/docs/components/tooltip) component and the tooltips in [slider](/docs/components/slider) and [copy button](/docs/components/copy-button).
|
||||
Tooltip styles are shared between the [tooltip](/docs/components/tooltip) component and the tooltip implementation in [range](/docs/components/range).
|
||||
|
||||
| Custom Property | Default Value |
|
||||
| ------------------------------- | ------------------------------------ |
|
||||
| `--wa-tooltip-arrow-size` | `0.375rem` <small>(6px)</small> |
|
||||
| `--wa-tooltip-background-color` | `var(--wa-color-neutral-fill-loud)` |
|
||||
| `--wa-tooltip-border-color` | `var(--wa-tooltip-background-color)` |
|
||||
| `--wa-tooltip-border-style` | `var(--wa-border-style)` |
|
||||
| `--wa-tooltip-border-width` | `var(--wa-border-width-s)` |
|
||||
| `--wa-tooltip-border-radius` | `var(--wa-border-radius-s)` |
|
||||
| `--wa-tooltip-content-color` | `var(--wa-color-neutral-on-loud)` |
|
||||
| `--wa-tooltip-font-size` | `var(--wa-font-size-s)` |
|
||||
| `--wa-tooltip-line-height` | `var(--wa-line-height-normal)` |
|
||||
| Custom Property | Default Value |
|
||||
| ---------------------------- | ----------------------------------- |
|
||||
| `--wa-tooltip-arrow-size` | `0.375rem` <small>(6px)</small> |
|
||||
| `--wa-tooltip-background-color` | `var(--wa-color-neutral-fill-loud)` |
|
||||
| `--wa-tooltip-border-radius` | `var(--wa-border-radius-m)` |
|
||||
| `--wa-tooltip-content-color` | `var(--wa-color-neutral-on-loud)` |
|
||||
| `--wa-tooltip-font-size` | `var(--wa-font-size-s)` |
|
||||
| `--wa-tooltip-line-height` | `var(--wa-line-height-normal)` |
|
||||
|
||||
```html {.example}
|
||||
<wa-button id="bullseye-example" appearance="plain">
|
||||
|
||||
@@ -380,19 +380,6 @@ Add the `wa-pill` class to give buttons rounded edges.
|
||||
<button class="wa-pill">Pill button</button>
|
||||
```
|
||||
|
||||
When using `<wa-icon>` within a button, wrap adjacent label text in `<span>` or similar to automatically add margin between the icon and the label, just like the `start` and `end` slots of `<wa-button>`.
|
||||
|
||||
```html {.example}
|
||||
<button>
|
||||
<wa-icon name="plane-departure"></wa-icon>
|
||||
<span>Start Icon</span>
|
||||
</button>
|
||||
<button>
|
||||
<span>End Icon</span>
|
||||
<wa-icon name="plane-arrival"></wa-icon>
|
||||
</button>
|
||||
```
|
||||
|
||||
### Form controls
|
||||
|
||||
Create a variety of form controls with `<input type="">`, `<select>`, and `<textarea>`. Each control closely matches the appearance of the corresponding Web Awesome component.
|
||||
|
||||
@@ -350,7 +350,7 @@ layout: page
|
||||
<p>Get involved by opening issues, contributing to discussions, or creating PRs.</p>
|
||||
</div>
|
||||
</wa-button>
|
||||
<wa-button href="https://discord.gg/mg8f26C" rel="noopener noreferrer" target="_blank" appearance="filled" class="tile">
|
||||
<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">
|
||||
@@ -442,4 +442,4 @@ layout: page
|
||||
© Fonticons, Inc.
|
||||
</div>
|
||||
</footer>
|
||||
</div>
|
||||
</div>
|
||||
@@ -4,7 +4,7 @@
|
||||
"access": "public"
|
||||
},
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "3.0.0-beta.3",
|
||||
"version": "3.0.0-beta.2",
|
||||
"homepage": "https://webawesome.com/",
|
||||
"author": "Web Awesome",
|
||||
"license": "MIT",
|
||||
@@ -73,7 +73,6 @@
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
"@lit/react": "^1.0.8",
|
||||
"@shoelace-style/animations": "^1.2.0",
|
||||
"@shoelace-style/localize": "^3.2.1",
|
||||
"composed-offset-position": "^0.0.6",
|
||||
@@ -86,8 +85,5 @@
|
||||
"*.{ts,js}": [
|
||||
"prettier --write"
|
||||
]
|
||||
},
|
||||
"devDependencies": {
|
||||
"@wc-toolkit/jsx-types": "^1.3.0"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -34,8 +34,7 @@ const isDeveloping = process.argv.includes('--develop');
|
||||
* @typedef {Object} BuildOptions
|
||||
* @property {Array<string>} [watchedSrcDirectories]
|
||||
* @property {Array<string>} [watchedDocsDirectories]
|
||||
* @property {(eventName: "change" | "add" | "unlink", filePath: string) => unknown} [beforeWatchEvent]
|
||||
* @property {(eventName: "change" | "add" | "unlink", filePath: string) => unknown} [afterWatchEvent]
|
||||
* @property {(eventName: "change" | "add" | "unlink", filePath: string) => unknown} [onWatchEvent]
|
||||
*/
|
||||
|
||||
/**
|
||||
@@ -50,6 +49,8 @@ export async function build(options = {}) {
|
||||
options.watchedDocsDirectories = [getDocsDir()];
|
||||
}
|
||||
|
||||
function measureStep() {}
|
||||
|
||||
/**
|
||||
* Runs the full build.
|
||||
*/
|
||||
@@ -121,11 +122,6 @@ export async function build(options = {}) {
|
||||
* Generates React wrappers for all components.
|
||||
*/
|
||||
function generateReactWrappers() {
|
||||
// Used by webawesome-app to make re-rendering not miserable with extra React file generation.
|
||||
if (process.env.SKIP_SLOW_STEPS === 'true') {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
spinner.start('Generating React wrappers');
|
||||
|
||||
try {
|
||||
@@ -160,11 +156,6 @@ export async function build(options = {}) {
|
||||
* Runs TypeScript to generate types.
|
||||
*/
|
||||
async function generateTypes() {
|
||||
// Used by webawesome-app to make re-rendering not miserable with extra TS compilations.
|
||||
if (process.env.SKIP_SLOW_STEPS === 'true') {
|
||||
return Promise.resolve();
|
||||
}
|
||||
|
||||
spinner.start('Running the TypeScript compiler');
|
||||
|
||||
const cwd = process.cwd();
|
||||
@@ -386,25 +377,22 @@ export async function build(options = {}) {
|
||||
},
|
||||
);
|
||||
|
||||
const watchEvents = ['change', 'unlink', 'add'];
|
||||
// TODO: Should probably listen for all of these instead of just "change"
|
||||
const watchEvents = [
|
||||
'change',
|
||||
// "unlink",
|
||||
// "add"
|
||||
];
|
||||
// Rebuild and reload when source files change
|
||||
options.watchedSrcDirectories.forEach(dir => {
|
||||
const watcher = bs.watch(join(dir, '**', '!(*.test).*'), { ignoreInitial: true });
|
||||
const watcher = bs.watch(join(dir, '**', '!(*.test).*'));
|
||||
|
||||
watchEvents.forEach(evt => {
|
||||
watcher.on(evt, handleWatchEvent(evt));
|
||||
});
|
||||
function handleWatchEvent(evt) {
|
||||
return async filename => {
|
||||
const changedFile = relative(getRootDir(), filename);
|
||||
|
||||
if (evt === 'change') {
|
||||
spinner.info(`File modified ${chalk.gray(`(${changedFile})`)}`);
|
||||
} else if (evt === 'unlink') {
|
||||
spinner.info(`File deleted ${chalk.gray(`(${changedFile})`)}`);
|
||||
} else if (evt === 'add') {
|
||||
spinner.info(`File added ${chalk.gray(`(${changedFile})`)}`);
|
||||
}
|
||||
spinner.info(`File modified ${chalk.gray(`(${relative(getRootDir(), filename)})`)}`);
|
||||
|
||||
try {
|
||||
const isTestFile = filename.includes('.test.ts');
|
||||
@@ -417,8 +405,8 @@ export async function build(options = {}) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (typeof options.beforeWatchEvent === 'function') {
|
||||
await options.beforeWatchEvent(evt, filename);
|
||||
if (typeof options.onWatchEvent === 'function') {
|
||||
await options.onWatchEvent(evt, filename);
|
||||
}
|
||||
|
||||
// Copy stylesheets when CSS files change
|
||||
@@ -438,10 +426,6 @@ export async function build(options = {}) {
|
||||
// This needs to be outside of "isComponent" check because SSR needs to run on CSS files too.
|
||||
await generateDocs({ spinner });
|
||||
|
||||
if (typeof options.afterWatchEvent === 'function') {
|
||||
await options.afterWatchEvent(evt, filename);
|
||||
}
|
||||
|
||||
reload();
|
||||
} catch (err) {
|
||||
console.error(chalk.red(err));
|
||||
@@ -456,7 +440,7 @@ export async function build(options = {}) {
|
||||
|
||||
// Rebuild the docs and reload when the docs change
|
||||
options.watchedDocsDirectories.forEach(dir => {
|
||||
const watcher = bs.watch(join(dir, '**', '*.*'), { ignoreInitial: true });
|
||||
const watcher = bs.watch(join(dir, '**', '*.*'));
|
||||
|
||||
watchEvents.forEach(evt => {
|
||||
watcher.on(evt, handleWatchEvent(evt));
|
||||
@@ -465,14 +449,10 @@ export async function build(options = {}) {
|
||||
function handleWatchEvent(evt) {
|
||||
return async filename => {
|
||||
spinner.info(`File modified ${chalk.gray(`(${relative(getRootDir(), filename)})`)}`);
|
||||
if (typeof options.beforeWatchEvent === 'function') {
|
||||
await options.beforeWatchEvent(evt, filename);
|
||||
if (typeof options.onWatchEvent === 'function') {
|
||||
await options.onWatchEvent(evt, filename);
|
||||
}
|
||||
await generateDocs({ spinner });
|
||||
|
||||
if (typeof options.afterWatchEvent === 'function') {
|
||||
await options.afterWatchEvent(evt, filename);
|
||||
}
|
||||
reload();
|
||||
};
|
||||
}
|
||||
|
||||
@@ -72,6 +72,7 @@ export async function generateDocs(options = {}) {
|
||||
isDeveloping ??= process.argv.includes('--develop');
|
||||
isIncremental ??= isDeveloping && !process.argv.includes('--no-incremental');
|
||||
|
||||
let eleventy = globalThis.eleventy;
|
||||
/**
|
||||
* Used by the webawesome-app to skip doc generation since it will do its own.
|
||||
*/
|
||||
@@ -79,8 +80,6 @@ export async function generateDocs(options = {}) {
|
||||
return;
|
||||
}
|
||||
|
||||
let eleventy = globalThis.eleventy;
|
||||
|
||||
spinner?.start?.('Writing the docs');
|
||||
|
||||
const outputs = {
|
||||
@@ -119,7 +118,7 @@ export async function generateDocs(options = {}) {
|
||||
return !line.includes('Watching');
|
||||
});
|
||||
const lastLine = info[info.length - 1];
|
||||
output = chalk.gray(`(${info.join('')})`);
|
||||
output = chalk.gray(`(${lastLine})`);
|
||||
eleventy.logger.logger.reset();
|
||||
}
|
||||
} else {
|
||||
@@ -138,23 +137,13 @@ export async function generateDocs(options = {}) {
|
||||
if (!isDeveloping) {
|
||||
await copy(getCdnDir(), join(getSiteDir(), 'dist'));
|
||||
}
|
||||
|
||||
if (spinner) {
|
||||
spinner.succeed(`Writing the docs ${output}`);
|
||||
} else {
|
||||
console.log(`Writing the docs ${output}`);
|
||||
}
|
||||
spinner?.succeed?.(`Writing the docs ${output}`);
|
||||
} catch (error) {
|
||||
console.warn = originalWarn;
|
||||
|
||||
console.error('\n\n' + chalk.red(error) + '\n');
|
||||
|
||||
if (spinner) {
|
||||
spinner.fail(chalk.red(`Error while writing the docs.`));
|
||||
} else {
|
||||
console.error(chalk.red(`Error while writing the docs.`));
|
||||
}
|
||||
|
||||
spinner?.fail?.(chalk.red(`Error while writing the docs.`));
|
||||
if (!isDeveloping) {
|
||||
process.exit(1);
|
||||
}
|
||||
|
||||
@@ -42,7 +42,7 @@ img[aria-hidden='true'] {
|
||||
}
|
||||
}
|
||||
|
||||
:where(:host([play]:not(:hover))) .control-box {
|
||||
:host([play]:not(:hover)) .control-box {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
@@ -50,16 +50,3 @@ img[aria-hidden='true'] {
|
||||
:host(:not([play])) slot[name='pause-icon'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
/* Show control box on keyboard focus */
|
||||
.animated-image {
|
||||
&:focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
&:focus-visible .control-box {
|
||||
opacity: 1;
|
||||
outline: var(--wa-focus-ring);
|
||||
outline-offset: var(--wa-focus-ring-offset);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -4,7 +4,6 @@ import { WaErrorEvent } from '../../events/error.js';
|
||||
import { WaLoadEvent } from '../../events/load.js';
|
||||
import { watch } from '../../internal/watch.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import { LocalizeController } from '../../utilities/localize.js';
|
||||
import '../icon/icon.js';
|
||||
import styles from './animated-image.css';
|
||||
|
||||
@@ -31,8 +30,6 @@ import styles from './animated-image.css';
|
||||
export default class WaAnimatedImage extends WebAwesomeElement {
|
||||
static css = styles;
|
||||
|
||||
private readonly localize = new LocalizeController(this);
|
||||
|
||||
@query('.animated') animatedImage: HTMLImageElement;
|
||||
|
||||
@state() frozenFrame: string;
|
||||
@@ -51,13 +48,6 @@ export default class WaAnimatedImage extends WebAwesomeElement {
|
||||
this.play = !this.play;
|
||||
}
|
||||
|
||||
private handleKeyDown(event: KeyboardEvent) {
|
||||
if (event.key === 'Enter' || event.key === ' ') {
|
||||
event.preventDefault();
|
||||
this.play = !this.play;
|
||||
}
|
||||
}
|
||||
|
||||
private handleLoad() {
|
||||
const canvas = document.createElement('canvas');
|
||||
const { width, height } = this.animatedImage;
|
||||
@@ -92,26 +82,15 @@ export default class WaAnimatedImage extends WebAwesomeElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
const verb = this.localize.term(this.play ? 'pauseAnimation' : 'playAnimation');
|
||||
const label = `${verb} ${this.alt}`;
|
||||
|
||||
return html`
|
||||
<div
|
||||
class="animated-image"
|
||||
tabindex="0"
|
||||
role="button"
|
||||
aria-pressed=${this.play ? 'true' : 'false'}
|
||||
aria-label=${label}
|
||||
@click=${this.handleClick}
|
||||
@keydown=${this.handleKeyDown}
|
||||
>
|
||||
<div class="animated-image">
|
||||
<img
|
||||
class="animated"
|
||||
src=${this.src}
|
||||
alt=${this.alt}
|
||||
crossorigin="anonymous"
|
||||
aria-hidden=${this.play ? 'false' : 'true'}
|
||||
role="presentation"
|
||||
@click=${this.handleClick}
|
||||
@load=${this.handleLoad}
|
||||
@error=${this.handleError}
|
||||
/>
|
||||
@@ -123,10 +102,10 @@ export default class WaAnimatedImage extends WebAwesomeElement {
|
||||
src=${this.frozenFrame}
|
||||
alt=${this.alt}
|
||||
aria-hidden=${this.play ? 'true' : 'false'}
|
||||
role="presentation"
|
||||
@click=${this.handleClick}
|
||||
/>
|
||||
|
||||
<div part="control-box" class="control-box" aria-hidden="true">
|
||||
<div part="control-box" class="control-box">
|
||||
<slot name="play-icon">
|
||||
<wa-icon
|
||||
name="play"
|
||||
|
||||
@@ -234,14 +234,13 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
|
||||
</label>
|
||||
|
||||
<slot
|
||||
id="hint"
|
||||
part="hint"
|
||||
name="hint"
|
||||
aria-hidden=${hasHint ? 'false' : 'true'}
|
||||
class="${classMap({ 'has-slotted': hasHint })}"
|
||||
id="hint"
|
||||
part="hint"
|
||||
>${this.hint}</slot
|
||||
>
|
||||
${this.hint}
|
||||
</slot>
|
||||
`;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1310,7 +1310,6 @@ export default class WaColorPicker extends WebAwesomeFormAssociatedElement {
|
||||
></button>
|
||||
|
||||
<slot
|
||||
id="hint"
|
||||
name="hint"
|
||||
part="hint"
|
||||
class=${classMap({
|
||||
|
||||
@@ -81,7 +81,6 @@ details {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--spacing);
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
cursor: pointer;
|
||||
@@ -102,12 +101,6 @@ details {
|
||||
}
|
||||
}
|
||||
|
||||
/* 'Start' icon position */
|
||||
:host([icon-position='start']) summary {
|
||||
flex-direction: row-reverse;
|
||||
justify-content: start;
|
||||
}
|
||||
|
||||
[part~='icon'] {
|
||||
flex: 0 0 auto;
|
||||
display: flex;
|
||||
@@ -129,7 +122,8 @@ details {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.body.animating {
|
||||
/* Overflows get clipped during the closing animation if we don't wait until the close is gone. */
|
||||
:host(:not([open])) .body {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
@@ -139,3 +133,10 @@ details {
|
||||
padding-inline: var(--spacing); /* Add horizontal padding */
|
||||
padding-block-end: var(--spacing); /* Add bottom padding */
|
||||
}
|
||||
|
||||
@keyframes show {
|
||||
from {
|
||||
}
|
||||
to {
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import type { PropertyValues } from 'lit';
|
||||
import { html } from 'lit';
|
||||
import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { classMap } from 'lit/directives/class-map.js';
|
||||
import { customElement, property, query } from 'lit/decorators.js';
|
||||
import { WaAfterHideEvent } from '../../events/after-hide.js';
|
||||
import { WaAfterShowEvent } from '../../events/after-show.js';
|
||||
import { WaHideEvent } from '../../events/hide.js';
|
||||
@@ -42,8 +40,6 @@ import styles from './details.css';
|
||||
* @cssproperty --spacing - The amount of space around and between the details' content. Expects a single value.
|
||||
* @cssproperty [--show-duration=200ms] - The show duration to use when applying built-in animation classes.
|
||||
* @cssproperty [--hide-duration=200ms] - The hide duration to use when applying built-in animation classes.
|
||||
*
|
||||
* @cssstate animating - Applied when the details is animating expand/collapse.
|
||||
*/
|
||||
@customElement('wa-details')
|
||||
export default class WaDetails extends WebAwesomeElement {
|
||||
@@ -57,8 +53,6 @@ export default class WaDetails extends WebAwesomeElement {
|
||||
@query('.body') body: HTMLElement;
|
||||
@query('.expand-icon-slot') expandIconSlot: HTMLSlotElement;
|
||||
|
||||
@state() isAnimating = false;
|
||||
|
||||
/**
|
||||
* Indicates whether or not the details is open. You can toggle this attribute to show and hide the details, or you
|
||||
* can use the `show()` and `hide()` methods and this attribute will reflect the details' open state.
|
||||
@@ -77,14 +71,6 @@ export default class WaDetails extends WebAwesomeElement {
|
||||
/** The element's visual appearance. */
|
||||
@property({ reflect: true }) appearance: 'filled' | 'outlined' | 'plain' = 'outlined';
|
||||
|
||||
/** The position of the expand/collapse icon. */
|
||||
@property({ attribute: 'icon-position', reflect: true }) iconPosition: 'start' | 'end' = 'end';
|
||||
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.detailsObserver?.disconnect();
|
||||
}
|
||||
|
||||
firstUpdated() {
|
||||
this.body.style.height = this.open ? 'auto' : '0';
|
||||
if (this.open) {
|
||||
@@ -105,10 +91,9 @@ export default class WaDetails extends WebAwesomeElement {
|
||||
this.detailsObserver.observe(this.details, { attributes: true });
|
||||
}
|
||||
|
||||
updated(changedProperties: PropertyValues<this>) {
|
||||
if (changedProperties.has('isAnimating')) {
|
||||
this.customStates.set('animating', this.isAnimating);
|
||||
}
|
||||
disconnectedCallback() {
|
||||
super.disconnectedCallback();
|
||||
this.detailsObserver?.disconnect();
|
||||
}
|
||||
|
||||
private handleSummaryClick(event: MouseEvent) {
|
||||
@@ -183,7 +168,6 @@ export default class WaDetails extends WebAwesomeElement {
|
||||
// Close other details with the same name
|
||||
this.closeOthersWithSameName();
|
||||
|
||||
this.isAnimating = true;
|
||||
const duration = parseDuration(getComputedStyle(this.body).getPropertyValue('--show-duration'));
|
||||
// We can't animate to 'auto', so use the scroll height for now
|
||||
await animate(
|
||||
@@ -198,7 +182,6 @@ export default class WaDetails extends WebAwesomeElement {
|
||||
},
|
||||
);
|
||||
this.body.style.height = 'auto';
|
||||
this.isAnimating = false;
|
||||
|
||||
this.dispatchEvent(new WaAfterShowEvent());
|
||||
} else {
|
||||
@@ -211,7 +194,6 @@ export default class WaDetails extends WebAwesomeElement {
|
||||
return;
|
||||
}
|
||||
|
||||
this.isAnimating = true;
|
||||
const duration = parseDuration(getComputedStyle(this.body).getPropertyValue('--hide-duration'));
|
||||
// We can't animate from 'auto', so use the scroll height for now
|
||||
await animate(
|
||||
@@ -223,7 +205,7 @@ export default class WaDetails extends WebAwesomeElement {
|
||||
{ duration, easing: 'linear' },
|
||||
);
|
||||
this.body.style.height = 'auto';
|
||||
this.isAnimating = false;
|
||||
|
||||
this.details.open = false;
|
||||
this.dispatchEvent(new WaAfterHideEvent());
|
||||
}
|
||||
@@ -286,14 +268,7 @@ export default class WaDetails extends WebAwesomeElement {
|
||||
</span>
|
||||
</summary>
|
||||
|
||||
<div
|
||||
class=${classMap({
|
||||
body: true,
|
||||
animating: this.isAnimating,
|
||||
})}
|
||||
role="region"
|
||||
aria-labelledby="header"
|
||||
>
|
||||
<div class="body" role="region" aria-labelledby="header">
|
||||
<slot part="content" id="content" class="content"></slot>
|
||||
</div>
|
||||
</details>
|
||||
|
||||
@@ -205,7 +205,9 @@ export default class WaDialog extends WebAwesomeElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
const hasHeader = !this.withoutHeader;
|
||||
const hasHeader =
|
||||
!this.withoutHeader &&
|
||||
(this.label.length > 0 || this.hasSlotController.test('label') || this.hasSlotController.test('header-actions'));
|
||||
const hasFooter = this.hasSlotController.test('footer');
|
||||
|
||||
return html`
|
||||
|
||||
@@ -218,7 +218,9 @@ export default class WaDrawer extends WebAwesomeElement {
|
||||
}
|
||||
|
||||
render() {
|
||||
const hasHeader = !this.withoutHeader;
|
||||
const hasHeader =
|
||||
!this.withoutHeader &&
|
||||
(this.label.length > 0 || this.hasSlotController.test('label') || this.hasSlotController.test('header-actions'));
|
||||
const hasFooter = this.hasSlotController.test('footer');
|
||||
|
||||
return html`
|
||||
|
||||
@@ -432,9 +432,8 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
|
||||
</div>
|
||||
|
||||
<slot
|
||||
id="hint"
|
||||
part="hint"
|
||||
name="hint"
|
||||
part="hint"
|
||||
class=${classMap({
|
||||
'has-slotted': hasHint,
|
||||
})}
|
||||
|
||||
@@ -85,9 +85,6 @@ export default class WaPopover extends WebAwesomeElement {
|
||||
/** The ID of the popover's anchor element. This must be an interactive/focusable element such as a button. */
|
||||
@property() for: string | null = null;
|
||||
|
||||
/** Removes the arrow from the popover. */
|
||||
@property({ attribute: 'without-arrow', type: Boolean, reflect: true }) withoutArrow = false;
|
||||
|
||||
private eventController = new AbortController();
|
||||
|
||||
connectedCallback() {
|
||||
@@ -303,7 +300,7 @@ export default class WaPopover extends WebAwesomeElement {
|
||||
skidding=${this.skidding}
|
||||
flip
|
||||
shift
|
||||
?arrow=${!this.withoutArrow}
|
||||
arrow
|
||||
.anchor=${this.anchor}
|
||||
>
|
||||
<div part="body" class="body" @click=${this.handleBodyClick}>
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
:host {
|
||||
--size: 8rem;
|
||||
--track-width: 0.25em; /* avoid using rems here */
|
||||
--track-width: 0.25em; /* avoid using rems here - https://github.com/shoelace-style/webawesome-alpha/issues/89 */
|
||||
--track-color: var(--wa-color-neutral-fill-normal);
|
||||
--indicator-width: var(--track-width);
|
||||
--indicator-color: var(--wa-color-brand-fill-loud);
|
||||
|
||||
@@ -370,7 +370,6 @@ export default class WaRadioGroup extends WebAwesomeFormAssociatedElement {
|
||||
<slot part="form-control-input" @slotchange=${this.syncRadioElements}></slot>
|
||||
|
||||
<slot
|
||||
id="hint"
|
||||
name="hint"
|
||||
part="hint"
|
||||
class=${classMap({
|
||||
|
||||
@@ -859,6 +859,7 @@ describe('<wa-select>', () => {
|
||||
});
|
||||
});
|
||||
|
||||
// https://github.com/shoelace-style/webawesome-alpha/issues/263
|
||||
it('should allow interaction after being disabled and re-enabled', async () => {
|
||||
const el = await fixture<WaSelect>(html`
|
||||
<wa-select label="Select one">
|
||||
|
||||
@@ -329,6 +329,7 @@ describe('<wa-switch>', () => {
|
||||
expect(window.scrollY).to.equal(0);
|
||||
});
|
||||
|
||||
// https://github.com/shoelace-style/webawesome-alpha/discussions/124
|
||||
it('Should properly flag changes to checked and reflect', async () => {
|
||||
const el = await fixture<WaSwitch>(html`<wa-switch></wa-switch>`);
|
||||
await el.updateComplete;
|
||||
|
||||
@@ -243,7 +243,6 @@ export default class WaSwitch extends WebAwesomeFormAssociatedElement {
|
||||
</label>
|
||||
|
||||
<slot
|
||||
id="hint"
|
||||
name="hint"
|
||||
part="hint"
|
||||
class=${classMap({
|
||||
|
||||
@@ -374,7 +374,6 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
|
||||
</div>
|
||||
|
||||
<slot
|
||||
id="hint"
|
||||
name="hint"
|
||||
part="hint"
|
||||
aria-hidden=${hasHint ? 'false' : 'true'}
|
||||
|
||||
@@ -44,13 +44,7 @@
|
||||
max-width: var(--max-width);
|
||||
border-radius: var(--wa-tooltip-border-radius);
|
||||
background-color: var(--wa-tooltip-background-color);
|
||||
border: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);
|
||||
padding: 0.25em 0.5em;
|
||||
user-select: none;
|
||||
-webkit-user-select: none;
|
||||
}
|
||||
|
||||
.tooltip::part(arrow) {
|
||||
border-bottom: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);
|
||||
border-right: var(--wa-tooltip-border-width) var(--wa-tooltip-border-style) var(--wa-tooltip-border-color);
|
||||
}
|
||||
|
||||
@@ -89,9 +89,6 @@ export default class WaTooltip extends WebAwesomeElement {
|
||||
*/
|
||||
@property() trigger = 'hover focus';
|
||||
|
||||
/** Removes the arrow from the tooltip. */
|
||||
@property({ attribute: 'without-arrow', type: Boolean, reflect: true }) withoutArrow = false;
|
||||
|
||||
@property() for: string | null = null;
|
||||
|
||||
@state() anchor: null | Element = null;
|
||||
@@ -335,7 +332,7 @@ export default class WaTooltip extends WebAwesomeElement {
|
||||
skidding=${this.skidding}
|
||||
flip
|
||||
shift
|
||||
?arrow=${!this.withoutArrow}
|
||||
arrow
|
||||
hover-bridge
|
||||
.anchor=${this.anchor}
|
||||
>
|
||||
|
||||
@@ -564,6 +564,7 @@
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 0.5em;
|
||||
|
||||
height: var(--wa-form-control-height);
|
||||
padding: 0 var(--wa-form-control-padding-inline);
|
||||
@@ -708,16 +709,6 @@
|
||||
&.wa-pill {
|
||||
border-radius: var(--wa-border-radius-pill);
|
||||
}
|
||||
|
||||
/* Adds space between icons and adjacent elements
|
||||
* Prefer sibling selectors over :first-child/:last-child to avoid extra space when an icon is used alone */
|
||||
& > wa-icon:has(+ *) {
|
||||
margin-inline-end: 0.75em;
|
||||
}
|
||||
|
||||
& > * + wa-icon {
|
||||
margin-inline-start: 0.75em;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
|
||||
@@ -351,9 +351,6 @@
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-color: var(--wa-tooltip-background-color);
|
||||
--wa-tooltip-border-style: var(--wa-border-style);
|
||||
--wa-tooltip-border-width: var(--wa-border-width-s);
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
|
||||
@@ -347,9 +347,6 @@
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-color: var(--wa-tooltip-background-color);
|
||||
--wa-tooltip-border-style: var(--wa-border-style);
|
||||
--wa-tooltip-border-width: var(--wa-border-width-s);
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
|
||||
@@ -350,9 +350,6 @@
|
||||
|
||||
--wa-tooltip-background-color: var(--wa-color-text-normal);
|
||||
|
||||
--wa-tooltip-border-color: var(--wa-tooltip-background-color);
|
||||
--wa-tooltip-border-style: var(--wa-border-style);
|
||||
--wa-tooltip-border-width: var(--wa-border-width-s);
|
||||
--wa-tooltip-border-radius: var(--wa-border-radius-s);
|
||||
|
||||
--wa-tooltip-content-color: var(--wa-color-surface-default);
|
||||
|
||||
@@ -24,8 +24,6 @@ const translation: Translation = {
|
||||
if (num > 2 && num < 11) return `تم تحديد ${num} خيارات`;
|
||||
return `تم تحديد ${num} خيار`;
|
||||
},
|
||||
pauseAnimation: 'إيقاف الرسوم المتحركة مؤقتًا',
|
||||
playAnimation: 'تشغيل الرسوم المتحركة',
|
||||
previousSlide: 'الشريحة السابقة',
|
||||
progress: 'مقدار التقدم',
|
||||
remove: 'حذف',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return 'Je vybrána jedna možnost';
|
||||
return `Počet vybraných možností: ${num}`;
|
||||
},
|
||||
pauseAnimation: 'Pozastavit animaci',
|
||||
playAnimation: 'Přehrát animaci',
|
||||
previousSlide: 'Předchozí slide',
|
||||
progress: 'Průběh',
|
||||
remove: 'Odstranit',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 valgt';
|
||||
return `${num} valgt`;
|
||||
},
|
||||
pauseAnimation: 'Pause animation',
|
||||
playAnimation: 'Afspil animation',
|
||||
previousSlide: 'Forrige dias',
|
||||
progress: 'Status',
|
||||
remove: 'Fjern',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 Option ausgewählt';
|
||||
return `${num} Optionen ausgewählt`;
|
||||
},
|
||||
pauseAnimation: 'Animation pausieren',
|
||||
playAnimation: 'Animation abspielen',
|
||||
previousSlide: 'Vorherige Folie',
|
||||
progress: 'Fortschritt',
|
||||
remove: 'Entfernen',
|
||||
@@ -34,7 +32,7 @@ const translation: Translation = {
|
||||
selectAColorFromTheScreen: 'Farbe vom Bildschirm auswählen',
|
||||
showPassword: 'Passwort anzeigen',
|
||||
slideNum: slide => `Folie ${slide}`,
|
||||
toggleColorFormat: 'Farbformat wechseln',
|
||||
toggleColorFormat: 'Farbformat umschalten',
|
||||
zoomIn: 'Hineinzoomen',
|
||||
zoomOut: 'Herauszoomen',
|
||||
};
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 option selected';
|
||||
return `${num} options selected`;
|
||||
},
|
||||
pauseAnimation: 'Pause animation',
|
||||
playAnimation: 'Play animation',
|
||||
previousSlide: 'Previous slide',
|
||||
progress: 'Progress',
|
||||
remove: 'Remove',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 opción seleccionada';
|
||||
return `${num} opción seleccionada`;
|
||||
},
|
||||
pauseAnimation: 'Pausar animación',
|
||||
playAnimation: 'Reproducir animación',
|
||||
previousSlide: 'Diapositiva anterior',
|
||||
progress: 'Progreso',
|
||||
remove: 'Eliminar',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 گزینه انتخاب شده است';
|
||||
return `${num} گزینه انتخاب شده است`;
|
||||
},
|
||||
pauseAnimation: 'مکث انیمیشن',
|
||||
playAnimation: 'پخش انیمیشن',
|
||||
previousSlide: 'اسلاید قبلی',
|
||||
progress: 'پیشرفت',
|
||||
remove: 'حذف',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return 'Yksi vaihtoehto valittu';
|
||||
return `${num} vaihtoehtoa valittu`;
|
||||
},
|
||||
pauseAnimation: 'Keskeytä animaatio',
|
||||
playAnimation: 'Toista animaatio',
|
||||
previousSlide: 'Edellinen dia',
|
||||
progress: 'Edistyminen',
|
||||
remove: 'Poista',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 option sélectionnée';
|
||||
return `${num} options sélectionnées`;
|
||||
},
|
||||
pauseAnimation: "Suspendre l'animation",
|
||||
playAnimation: "Lire l'animation",
|
||||
previousSlide: 'Diapositive précédente',
|
||||
progress: 'Progrès',
|
||||
remove: 'Retirer',
|
||||
|
||||
@@ -16,15 +16,13 @@ const translation: Translation = {
|
||||
goToSlide: (slide, count) => `עבור לשקופית ${slide} של ${count}`,
|
||||
hidePassword: 'הסתר סיסמא',
|
||||
loading: 'טוען',
|
||||
nextSlide: 'השקף הבא',
|
||||
nextSlide: 'Next slide',
|
||||
numOptionsSelected: num => {
|
||||
if (num === 0) return 'לא נבחרו אפשרויות';
|
||||
if (num === 1) return 'נבחרה אפשרות אחת';
|
||||
return `נבחרו ${num} אפשרויות`;
|
||||
},
|
||||
pauseAnimation: 'השהה אנימציה',
|
||||
playAnimation: 'נגן אנימציה',
|
||||
previousSlide: 'שקופית קודמת',
|
||||
previousSlide: 'Previous slide',
|
||||
progress: 'התקדמות',
|
||||
remove: 'לְהַסִיר',
|
||||
resize: 'שנה גודל',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 opcija je odabrana';
|
||||
return `${num} odabranih opcija`;
|
||||
},
|
||||
pauseAnimation: 'Pauziraj animaciju',
|
||||
playAnimation: 'Reproduciraj animaciju',
|
||||
previousSlide: 'Prethodni slajd',
|
||||
progress: 'Napredak',
|
||||
remove: 'Makni',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 lehetőség kiválasztva';
|
||||
return `${num} lehetőség kiválasztva`;
|
||||
},
|
||||
pauseAnimation: 'Animáció szüneteltetése',
|
||||
playAnimation: 'Animáció lejátszása',
|
||||
previousSlide: 'Előző dia',
|
||||
progress: 'Folyamat',
|
||||
remove: 'Eltávolítás',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 opsi yang dipilih';
|
||||
return `${num} opsi yang dipilih`;
|
||||
},
|
||||
pauseAnimation: 'Jeda animasi',
|
||||
playAnimation: 'Putar animasi',
|
||||
previousSlide: 'Slide sebelumnya',
|
||||
progress: 'Kemajuan',
|
||||
remove: 'Hapus',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 opzione selezionata';
|
||||
return `${num} opzioni selezionate`;
|
||||
},
|
||||
pauseAnimation: 'Metti in pausa animazione',
|
||||
playAnimation: 'Riproduci animazione',
|
||||
previousSlide: 'Diapositiva precedente',
|
||||
progress: 'Avanzamento',
|
||||
remove: 'Rimuovi',
|
||||
|
||||
@@ -21,8 +21,6 @@ const translation: Translation = {
|
||||
if (num === 0) return '項目が選択されていません';
|
||||
return `${num} 個の項目が選択されました`;
|
||||
},
|
||||
pauseAnimation: 'アニメーションを一時停止',
|
||||
playAnimation: 'アニメーションを再生',
|
||||
previousSlide: '前のスライド',
|
||||
progress: '進行',
|
||||
remove: '削除',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return 'Ett alternativ valgt';
|
||||
return `${num} alternativer valgt`;
|
||||
},
|
||||
pauseAnimation: 'Sett animasjon på pause',
|
||||
playAnimation: 'Spill av animasjon',
|
||||
previousSlide: 'Forrige visning',
|
||||
progress: 'Fremdrift',
|
||||
remove: 'Fjern',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 optie geselecteerd';
|
||||
return `${num} opties geselecteerd`;
|
||||
},
|
||||
pauseAnimation: 'Animatie pauzeren',
|
||||
playAnimation: 'Animatie afspelen',
|
||||
previousSlide: 'Vorige dia',
|
||||
progress: 'Voortgang',
|
||||
remove: 'Verwijderen',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return 'Eitt alternativ valt';
|
||||
return `${num} alternativ valt`;
|
||||
},
|
||||
pauseAnimation: 'Set animasjon på pause',
|
||||
playAnimation: 'Spel av animasjon',
|
||||
previousSlide: 'Førre visning',
|
||||
progress: 'Framdrift',
|
||||
remove: 'Fjern',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return 'Wybrano 1 opcję';
|
||||
return `Wybrano ${num} opcje`;
|
||||
},
|
||||
pauseAnimation: 'Wstrzymaj animację',
|
||||
playAnimation: 'Odtwórz animację',
|
||||
previousSlide: 'Poprzedni slajd',
|
||||
progress: 'Postęp',
|
||||
remove: 'Usunąć',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 opção selecionada';
|
||||
return `${num} opções selecionadas`;
|
||||
},
|
||||
pauseAnimation: 'Pausar animação',
|
||||
playAnimation: 'Reproduzir animação',
|
||||
previousSlide: 'Slide anterior',
|
||||
progress: 'Progresso',
|
||||
remove: 'Remover',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return 'Выбран 1 вариант';
|
||||
return `выбрано ${num} варианта`;
|
||||
},
|
||||
pauseAnimation: 'Приостановить анимацию',
|
||||
playAnimation: 'Воспроизвести анимацию',
|
||||
previousSlide: 'Предыдущий слайд',
|
||||
progress: 'Прогресс',
|
||||
remove: 'Удалить',
|
||||
|
||||
@@ -24,8 +24,6 @@ const translation: Translation = {
|
||||
if (num === 3 || num === 4) return `${num} možnosti izbrane`;
|
||||
return `${num} možnosti izbranih`;
|
||||
},
|
||||
pauseAnimation: 'Zaustavi animacijo',
|
||||
playAnimation: 'Predvajaj animacijo',
|
||||
previousSlide: 'Prejšnji diapozitiv',
|
||||
progress: 'Napredek',
|
||||
remove: 'Odstrani',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 alternativ valt';
|
||||
return `${num} alternativ valda`;
|
||||
},
|
||||
pauseAnimation: 'Pausa animation',
|
||||
playAnimation: 'Spela upp animation',
|
||||
previousSlide: 'Föregående bild',
|
||||
progress: 'Framsteg',
|
||||
remove: 'Ta bort',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '1 seçenek seçildi';
|
||||
return `${num} seçenek seçildi`;
|
||||
},
|
||||
pauseAnimation: 'Animasyonu duraklat',
|
||||
playAnimation: 'Animasyonu oynat',
|
||||
previousSlide: 'Bir onceki slayt',
|
||||
progress: 'İlerleme',
|
||||
remove: 'Kaldır',
|
||||
|
||||
@@ -24,8 +24,6 @@ const translation: Translation = {
|
||||
if (n === 2 || n === 3 || n === 4) return `вибрано ${num} варіанти`;
|
||||
return `вибрано ${num} варіантів`;
|
||||
},
|
||||
pauseAnimation: 'Призупинити анімацію',
|
||||
playAnimation: 'Відтворити анімацію',
|
||||
previousSlide: 'Попередній слайд',
|
||||
progress: 'Поступ',
|
||||
remove: 'Видалити',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '已选择 1 个项目';
|
||||
return `${num} 选择项目`;
|
||||
},
|
||||
pauseAnimation: '暂停动画',
|
||||
playAnimation: '播放动画',
|
||||
previousSlide: '上一张幻灯片',
|
||||
progress: '进度',
|
||||
remove: '删除',
|
||||
|
||||
@@ -22,8 +22,6 @@ const translation: Translation = {
|
||||
if (num === 1) return '已選擇 1 個項目';
|
||||
return `${num} 選擇項目`;
|
||||
},
|
||||
pauseAnimation: '暫停動畫',
|
||||
playAnimation: '播放動畫',
|
||||
previousSlide: '上一張幻燈片',
|
||||
progress: '進度',
|
||||
remove: '移除',
|
||||
|
||||
@@ -33,8 +33,6 @@ export interface Translation extends DefaultTranslation {
|
||||
loading: string;
|
||||
nextSlide: string;
|
||||
numOptionsSelected: (num: number) => string;
|
||||
pauseAnimation: string;
|
||||
playAnimation: string;
|
||||
previousSlide: string;
|
||||
progress: string;
|
||||
remove: string;
|
||||
|
||||
Reference in New Issue
Block a user