mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 07:29:14 +00:00
Compare commits
1 Commits
konnorroge
...
talbs/revi
| Author | SHA1 | Date | |
|---|---|---|---|
|
272f6853ce |
37
package-lock.json
generated
37
package-lock.json
generated
@@ -14029,8 +14029,7 @@
|
||||
"devDependencies": {
|
||||
"@wc-toolkit/jsx-types": "^1.3.0",
|
||||
"eleventy-plugin-git-commit-date": "^0.1.3",
|
||||
"esbuild": "^0.25.11",
|
||||
"npm-check-updates": "^19.1.2"
|
||||
"esbuild": "^0.25.11"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
@@ -14038,7 +14037,7 @@
|
||||
},
|
||||
"packages/webawesome-pro": {
|
||||
"name": "@shoelace-style/webawesome-pro",
|
||||
"version": "3.0.0",
|
||||
"version": "3.0.0-beta.6",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "4.1.0",
|
||||
"@floating-ui/dom": "^1.6.13",
|
||||
@@ -14053,8 +14052,7 @@
|
||||
"devDependencies": {
|
||||
"@wc-toolkit/jsx-types": "^1.3.0",
|
||||
"eleventy-plugin-git-commit-date": "^0.1.3",
|
||||
"esbuild": "^0.25.11",
|
||||
"npm-check-updates": "^19.1.2"
|
||||
"esbuild": "^0.25.11"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
@@ -14527,21 +14525,6 @@
|
||||
"node": "^18 || >=20"
|
||||
}
|
||||
},
|
||||
"packages/webawesome-pro/node_modules/npm-check-updates": {
|
||||
"version": "19.1.2",
|
||||
"resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-19.1.2.tgz",
|
||||
"integrity": "sha512-FNeFCVgPOj0fz89hOpGtxP2rnnRHR7hD2E8qNU8SMWfkyDZXA/xpgjsL3UMLSo3F/K13QvJDnbxPngulNDDo/g==",
|
||||
"dev": true,
|
||||
"license": "Apache-2.0",
|
||||
"bin": {
|
||||
"ncu": "build/cli.js",
|
||||
"npm-check-updates": "build/cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0",
|
||||
"npm": ">=8.12.1"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/@esbuild/aix-ppc64": {
|
||||
"version": "0.25.11",
|
||||
"resolved": "https://registry.npmjs.org/@esbuild/aix-ppc64/-/aix-ppc64-0.25.11.tgz",
|
||||
@@ -14983,20 +14966,6 @@
|
||||
"engines": {
|
||||
"node": "^18 || >=20"
|
||||
}
|
||||
},
|
||||
"packages/webawesome/node_modules/npm-check-updates": {
|
||||
"version": "19.1.2",
|
||||
"resolved": "https://registry.npmjs.org/npm-check-updates/-/npm-check-updates-19.1.2.tgz",
|
||||
"integrity": "sha512-FNeFCVgPOj0fz89hOpGtxP2rnnRHR7hD2E8qNU8SMWfkyDZXA/xpgjsL3UMLSo3F/K13QvJDnbxPngulNDDo/g==",
|
||||
"dev": true,
|
||||
"bin": {
|
||||
"ncu": "build/cli.js",
|
||||
"npm-check-updates": "build/cli.js"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=20.0.0",
|
||||
"npm": ">=8.12.1"
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
"name": "@webawesome/monorepo",
|
||||
"private": true,
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "3.0.0",
|
||||
"version": "3.0.0-alpha.13",
|
||||
"homepage": "https://webawesome.com/",
|
||||
"author": "Web Awesome",
|
||||
"license": "MIT",
|
||||
@@ -85,4 +85,4 @@
|
||||
"prettier --write"
|
||||
]
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -124,22 +124,6 @@ export default async function (eleventyConfig) {
|
||||
eleventyConfig.addFilter('stripExtension', string => path.parse(string + '').name);
|
||||
eleventyConfig.addFilter('stripPrefix', content => content.replace(/^wa-/, ''));
|
||||
eleventyConfig.addFilter('uniqueId', (_value, length = 8) => nanoid(length));
|
||||
|
||||
eleventyConfig.addGlobalData('eleventyComputed', {
|
||||
// Page title with smart + default site name formatting
|
||||
pageTitle: data => composePageTitle(data.title),
|
||||
// Open Graph title with smart + default site name formatting
|
||||
ogTitle: data => composePageTitle(data.ogTitle || data.title),
|
||||
ogDescription: data => data.ogDescription || data.description,
|
||||
ogImage: data => data.ogImage || siteMetadata.image,
|
||||
ogUrl: data => {
|
||||
if (data.ogUrl) return data.ogUrl;
|
||||
const url = data.page?.url || '';
|
||||
return url ? `${siteMetadata.url}${url}` : siteMetadata.url;
|
||||
},
|
||||
ogType: data => data.ogType || 'website',
|
||||
});
|
||||
|
||||
// Trims whitespace and pipes from the start and end of a string. Useful for CEM types, which can be pipe-delimited.
|
||||
// With Prettier 3, this means a leading pipe will exist be present when the line wraps.
|
||||
eleventyConfig.addFilter('trimPipes', content => {
|
||||
@@ -313,19 +297,18 @@ export default async function (eleventyConfig) {
|
||||
|
||||
// This needs to happen in "eleventy.after" otherwise incremental builds never update.
|
||||
eleventyConfig.on('eleventy.after', function () {
|
||||
const baseDir = process.env.BASE_DIR || 'docs';
|
||||
let assetsDir = path.join(baseDir, 'assets');
|
||||
let assetsDir = path.join(process.env.BASE_DIR || 'docs', 'assets');
|
||||
const siteAssetsDir = path.join(eleventyConfig.directories.output, 'assets');
|
||||
fs.cpSync(assetsDir, siteAssetsDir, { recursive: true });
|
||||
|
||||
// Passthrough copy for manifest.json (PWA manifest file)
|
||||
fs.cpSync(path.join(baseDir, 'manifest.json'), path.join(eleventyConfig.directories.output, 'manifest.json'));
|
||||
});
|
||||
|
||||
for (let glob of passThrough) {
|
||||
eleventyConfig.addPassthroughCopy(glob);
|
||||
}
|
||||
|
||||
// Passthrough copy for manifest.json (PWA manifest file)
|
||||
eleventyConfig.addPassthroughCopy('manifest.json');
|
||||
|
||||
// // SSR plugin
|
||||
// if (!isDev) {
|
||||
// //
|
||||
|
||||
@@ -33,9 +33,9 @@ unlisted: true
|
||||
--secondary-opacity: 1.0;
|
||||
}
|
||||
|
||||
wa-page.background-grid {
|
||||
--grid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 96%);
|
||||
--subgrid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 98%);
|
||||
wa-page.background-overlay-grid {
|
||||
--grid-opacity: 0.04;
|
||||
--subgrid-opacity: 0.02;
|
||||
}
|
||||
|
||||
wa-page > [slot='main-footer'] {
|
||||
@@ -209,7 +209,7 @@ unlisted: true
|
||||
.vehicle wa-icon[name="bulldozer"] { animation: rumble-bulldozer 0.1s ease-in-out infinite; }
|
||||
</style>
|
||||
|
||||
<wa-page disable-sticky="header" class="background-grid">
|
||||
<wa-page disable-sticky="header" class="background-overlay-grid">
|
||||
<header slot="header">
|
||||
<div class="header-content wa-split" style="flex-wrap: nowrap;">
|
||||
<wa-icon variant="brands" name="web-awesome" class="icon-brand-logo"></wa-icon>
|
||||
|
||||
@@ -2,7 +2,7 @@
|
||||
{%- if req.stripe.discount.active and not currentUser.hasPro -%}
|
||||
<wa-dialog id="dialog-site" light-dismiss without-header>
|
||||
|
||||
<div class="background-wa-pattern" style="justify-content: center; margin-inline: calc(var(--spacing) * -1); margin-block-start: calc(var(--spacing) * -1); margin-block-end: var(--spacing); background: linear-gradient(to bottom, var(--wa-color-brand), var(--wa-color-brand-50)); color: var(--wa-color-brand-on-loud); padding: var(--wa-space-3xl) var(--spacing); --background-pattern-opacity: 0.2; --background-pattern-image: url('/assets/images/bg-wa-pattern.svg');">
|
||||
<div class="background-overlay-wa-pattern" style="justify-content: center; margin-inline: calc(var(--spacing) * -1); margin-block-start: calc(var(--spacing) * -1); margin-block-end: var(--spacing); background: linear-gradient(to bottom, var(--wa-color-brand), var(--wa-color-brand-50)); color: var(--wa-color-brand-on-loud); padding: var(--wa-space-3xl) var(--spacing); --background-opacity: 0.2;">
|
||||
|
||||
<div class="wa-stack wa-align-items-center" style="text-align: center;">
|
||||
<wa-icon name="party-horn" family="duotone" variant="solid" style="font-size: var(--wa-font-size-3xl); --secondary-color: var(--wa-color-brand-40); --secondary-opacity: 1.0;"></wa-icon>
|
||||
|
||||
@@ -78,10 +78,10 @@
|
||||
</li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><span class="is-planned wa-split">Charts <span><a href="https://github.com/shoelace-style/webawesome/issues/1073" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge({ description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
|
||||
<li><span class="is-planned wa-split">Charts <a href="https://github.com/shoelace-style/webawesome/issues/1073" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
|
||||
<li><a href="/docs/components/checkbox/">Checkbox</a></li>
|
||||
<li><a href="/docs/components/color-picker/">Color Picker</a></li>
|
||||
<li><span class="is-planned wa-split">Combobox <span><a href="https://github.com/shoelace-style/webawesome/issues/1074" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge({ description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
|
||||
<li><span class="is-planned wa-split">Combobox <a href="https://github.com/shoelace-style/webawesome/issues/1074" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
|
||||
<li><a href="/docs/components/comparison/">Comparison</a></li>
|
||||
<li>
|
||||
<a class="wa-cluster wa-gap-xs" href="/docs/components/copy-button/">
|
||||
@@ -89,8 +89,8 @@
|
||||
<wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
|
||||
</a>
|
||||
</li>
|
||||
<li><span class="is-planned wa-split">Data Grid <span><a href="https://github.com/shoelace-style/webawesome/issues/1072" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge({ description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
|
||||
<li><span class="is-planned wa-split">Datepicker <span><a href="https://github.com/shoelace-style/webawesome/issues/1075" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge({ description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
|
||||
<li><span class="is-planned wa-split">Data Grid <a href="https://github.com/shoelace-style/webawesome/issues/1072" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
|
||||
<li><span class="is-planned wa-split">Datepicker <a href="https://github.com/shoelace-style/webawesome/issues/1075" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
|
||||
<li><a href="/docs/components/details/">Details</a></li>
|
||||
<li><a href="/docs/components/dialog/">Dialog</a></li>
|
||||
<li><a href="/docs/components/divider/">Divider</a></li>
|
||||
@@ -101,7 +101,7 @@
|
||||
<li><a href="/docs/components/dropdown-item">Dropdown Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><span class="is-planned wa-split">File Input <span><a href="https://github.com/shoelace-style/webawesome/issues/1240" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge({ description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
|
||||
<li><span class="is-planned wa-split">File Input <a href="https://github.com/shoelace-style/webawesome/issues/1240" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
|
||||
<li><a href="/docs/components/format-bytes/">Format Bytes</a></li>
|
||||
<li><a href="/docs/components/format-date/">Format Date</a></li>
|
||||
<li><a href="/docs/components/format-number/">Format Number</a></li>
|
||||
@@ -146,7 +146,7 @@
|
||||
</li>
|
||||
<li><a href="/docs/components/tag/">Tag</a></li>
|
||||
<li><a href="/docs/components/textarea/">Textarea</a></li>
|
||||
<li><span class="is-planned wa-split">Toast <span><a href="https://github.com/shoelace-style/webawesome/issues/105" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge( { description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
|
||||
<li><span class="is-planned wa-split">Toast <a href="https://github.com/shoelace-style/webawesome/issues/105" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
|
||||
<li><a href="/docs/components/tooltip/">Tooltip</a></li>
|
||||
<li>
|
||||
<a href="/docs/components/tree/">Tree</a>
|
||||
@@ -154,7 +154,7 @@
|
||||
<li><a href="/docs/components/tree-item/">Tree Item</a></li>
|
||||
</ul>
|
||||
</li>
|
||||
<li><span class="is-planned wa-split">Video <span><a href="https://github.com/shoelace-style/webawesome/issues/985" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a>{{ proBadge( { description: "This will require access to Web Awesome Pro" }) }}</span></span></li>
|
||||
<li><span class="is-planned wa-split">Video <a href="https://github.com/shoelace-style/webawesome/issues/985" target="_blank">{{ plannedBadge("A Web Awesome Kickstarter stretch goal!") }}</a></span></li>
|
||||
<li><a href="/docs/components/zoomable-frame">Zoomable Frame</a></li>
|
||||
{# PLOP_NEW_COMPONENT_PLACEHOLDER #}
|
||||
</ul>
|
||||
|
||||
@@ -1,20 +1,10 @@
|
||||
import * as path from 'node:path';
|
||||
import nunjucks from 'nunjucks';
|
||||
|
||||
const baseDir = process.env.BASE_DIR || 'docs';
|
||||
|
||||
const views = [path.join(baseDir), path.join(baseDir, '_layouts'), path.join(baseDir, '_includes')];
|
||||
|
||||
const nunjucksEnv = new nunjucks.Environment(new nunjucks.FileSystemLoader(views), {
|
||||
autoescape: true,
|
||||
noCache: process.env.NODE_ENV === 'development' || process.env.NODE_ENV === 'test',
|
||||
});
|
||||
|
||||
/**
|
||||
* This function simulates what a server would do running "on top" of eleventy.
|
||||
*/
|
||||
export function SimulateWebAwesomeApp(str) {
|
||||
return nunjucksEnv.renderString(str, {
|
||||
return nunjucks.renderString(str, {
|
||||
// Stub the server EJS shortcodes.
|
||||
currentUser: {
|
||||
hasPro: false,
|
||||
|
||||
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 27 KiB |
File diff suppressed because one or more lines are too long
|
After Width: | Height: | Size: 27 KiB |
@@ -38,7 +38,7 @@ wa-page > [slot='banner'] {
|
||||
}
|
||||
|
||||
&.banner-wa-launch {
|
||||
/* custom brand colors carried over from theme-site for the banner */
|
||||
/* custom brand colors carrried over from theme-site for the banner */
|
||||
--wa-color-brand-95: #fef0ec;
|
||||
--wa-color-brand-90: #fce0d8;
|
||||
--wa-color-brand-80: #f8bcac;
|
||||
|
||||
@@ -5,6 +5,7 @@
|
||||
border-radius: var(--wa-border-radius-l);
|
||||
padding: 0;
|
||||
margin: 0 auto;
|
||||
overflow: hidden;
|
||||
|
||||
&::part(dialog) {
|
||||
margin-block-start: 10vh;
|
||||
|
||||
@@ -178,76 +178,107 @@
|
||||
}
|
||||
}
|
||||
|
||||
/* grid background */
|
||||
.background-grid {
|
||||
--grid-spacing: var(--wa-space-2xl);
|
||||
--grid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 90%);
|
||||
--grid-line-width: var(--wa-border-width-s);
|
||||
--subgrid-spacing: calc(var(--grid-spacing) / 2);
|
||||
--subgrid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 95%);
|
||||
--subgrid-line-width: var(--wa-border-width-s);
|
||||
|
||||
background-image:
|
||||
/* main grid - vertical lines */
|
||||
linear-gradient(to right, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width)),
|
||||
/* main grid - horizontal lines */
|
||||
linear-gradient(to bottom, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width)),
|
||||
/* sub-grid - vertical lines (offset by half the main grid spacing) */
|
||||
linear-gradient(
|
||||
to right,
|
||||
var(--subgrid-line-color) var(--subgrid-line-width),
|
||||
transparent var(--subgrid-line-width)
|
||||
),
|
||||
/* sub-grid - horizontal lines (offset by half the main grid spacing) */
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
var(--subgrid-line-color) var(--subgrid-line-width),
|
||||
transparent var(--subgrid-line-width)
|
||||
);
|
||||
|
||||
background-size:
|
||||
var(--grid-spacing) var(--grid-spacing),
|
||||
var(--grid-spacing) var(--grid-spacing),
|
||||
var(--subgrid-spacing) var(--subgrid-spacing),
|
||||
var(--subgrid-spacing) var(--subgrid-spacing);
|
||||
|
||||
background-position:
|
||||
0 0,
|
||||
0 0,
|
||||
calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2),
|
||||
calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2);
|
||||
}
|
||||
|
||||
/* dot grid background */
|
||||
.background-dot-grid {
|
||||
--dot-spacing: 1.5rem;
|
||||
--dot-radius: 1.5px;
|
||||
--dot-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 85%);
|
||||
|
||||
background-image: radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent var(--dot-radius));
|
||||
background-size: var(--dot-spacing) var(--dot-spacing);
|
||||
}
|
||||
|
||||
/* wa illustration background pattern */
|
||||
.background-wa-pattern {
|
||||
/* background overlay base */
|
||||
.background-overlay,
|
||||
.background-overlay-grid,
|
||||
.background-overlay-dot-grid,
|
||||
.background-overlay-wa-pattern {
|
||||
--background-blend-mode: normal;
|
||||
--background-blend-mode-dark: var(--background-blend-mode);
|
||||
--background-color: transparent;
|
||||
--background-overlay-content-z-index: 1;
|
||||
--background-overlay-z-index: 0;
|
||||
position: relative;
|
||||
|
||||
& > * {
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
z-index: var(--background-overlay-content-z-index);
|
||||
}
|
||||
|
||||
&::before,
|
||||
&::after {
|
||||
background-color: var(--background-color);
|
||||
content: '';
|
||||
inset: 0;
|
||||
mix-blend-mode: var(--background-blend-mode);
|
||||
position: absolute;
|
||||
z-index: var(--background-overlay-z-index);
|
||||
}
|
||||
|
||||
.wa-dark & {
|
||||
&::before,
|
||||
&::after {
|
||||
mix-blend-mode: var(--background-blend-mode-dark);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
/* grid background overlay */
|
||||
.background-overlay-grid {
|
||||
--grid-line-color: var(--wa-color-text-normal);
|
||||
--grid-line-width: var(--wa-border-width-s);
|
||||
--grid-opacity: 0.1;
|
||||
--grid-spacing: var(--wa-space-2xl);
|
||||
--subgrid-line-color: var(--grid-line-color);
|
||||
--subgrid-line-width: var(--grid-line-width);
|
||||
--subgrid-opacity: 0.05;
|
||||
--subgrid-spacing: calc(var(--grid-spacing) / 2);
|
||||
|
||||
&::before {
|
||||
background-image:
|
||||
linear-gradient(to right, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width)),
|
||||
linear-gradient(to bottom, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width));
|
||||
background-size: var(--grid-spacing) var(--grid-spacing);
|
||||
opacity: var(--grid-opacity);
|
||||
}
|
||||
|
||||
&::after {
|
||||
--background-pattern-image: url('/assets/images/bg-wa-pattern.svg');
|
||||
background-image:
|
||||
linear-gradient(to right, var(--subgrid-line-color) var(--subgrid-line-width), transparent var(--subgrid-line-width)),
|
||||
linear-gradient(to bottom, var(--subgrid-line-color) var(--subgrid-line-width), transparent var(--subgrid-line-width));
|
||||
background-position: calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2);
|
||||
background-size: var(--subgrid-spacing) var(--subgrid-spacing);
|
||||
opacity: var(--subgrid-opacity);
|
||||
}
|
||||
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-color: var(--background-pattern-color, transparent);
|
||||
background-image: var(--background-pattern-image);
|
||||
background-repeat: repeat;
|
||||
content: '';
|
||||
opacity: var(--background-pattern-opacity, 0.3);
|
||||
z-index: 0;
|
||||
.wa-dark & {
|
||||
--grid-opacity: 0.15;
|
||||
--subgrid-opacity: 0.08;
|
||||
}
|
||||
}
|
||||
|
||||
/* dot grid background overlay */
|
||||
.background-overlay-dot-grid {
|
||||
--dot-color: var(--wa-color-text-normal);
|
||||
--dot-opacity: 0.15;
|
||||
--dot-radius: 1.5px;
|
||||
--dot-spacing: 1.5rem;
|
||||
|
||||
&::after {
|
||||
background-image: radial-gradient(circle, var(--dot-color) var(--dot-radius), transparent var(--dot-radius));
|
||||
background-size: var(--dot-spacing) var(--dot-spacing);
|
||||
opacity: var(--dot-opacity);
|
||||
}
|
||||
|
||||
.wa-dark & {
|
||||
--dot-opacity: 0.2;
|
||||
}
|
||||
}
|
||||
|
||||
/* wa illustration background pattern overlay */
|
||||
.background-overlay-wa-pattern {
|
||||
--background-image: url('/assets/images/bg-wa-pattern.svg');
|
||||
--background-opacity: 0.15;
|
||||
--background-size: 640px;
|
||||
|
||||
&::after {
|
||||
background-image: var(--background-image);
|
||||
background-size: var(--background-size);
|
||||
opacity: var(--background-opacity);
|
||||
}
|
||||
|
||||
.wa-dark & {
|
||||
--background-opacity: 0.2;
|
||||
}
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Intersection Observer
|
||||
description: Tracks immediate child elements and fires events as they move in and out of view.
|
||||
layout: component
|
||||
category: Utilities
|
||||
---
|
||||
|
||||
This component leverages the [IntersectionObserver API](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver) to track when its direct children enter or leave a designated root element. The `wa-intersect` event fires whenever elements cross the visibility threshold.
|
||||
|
||||
@@ -13,23 +13,14 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
|
||||
|
||||
## Next
|
||||
|
||||
- Added `layers.css` to define cascade layer order and updated palettes, themes, native styles, and utilities to import the new rule for more fail-safe modularity [pr:1793]
|
||||
- Fixed a bug in `<wa-slider>` that caused some touch devices to end up with the incorrect value [issue:1703]
|
||||
- Fixed a bug in `<wa-card>` that prevented some slots from being detected correctly [discuss:1450]
|
||||
- Fixed a z-index bug in `<wa-scroller>` styles [issue:1724]
|
||||
- Fixed a bug in `<wa-icon>` that caused some icon libraries to render with the incorrect SVG fill [issue:1733]
|
||||
- Fixed a bug in `<wa-tree-item>` that caused the spinner to not show when lazy loading [issue:1678]
|
||||
- Fixed a bug in `<wa-dropdown>` that caused the browser to hang when cancelling the `wa-hide` event [issue:1483]
|
||||
- Fixed a bug in `<wa-dropdown-item>` that prevented the icon dependency from being imported [issue:1825]
|
||||
- Improved performance of `<wa-icon>` so initial rendering occurs faster, especially with multiple icons on the page [issue:1729]
|
||||
- Modified the default `transition` styles of `<wa-dropdown-item>` to use design tokens [pr:1693]
|
||||
|
||||
## 3.0.0
|
||||
|
||||
- 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in the following elements [issue:1127]
|
||||
- `<wa-badge>`
|
||||
- `<wa-button>`
|
||||
- `<wa-callout>`
|
||||
- `<wa-card>`
|
||||
- `<wa-details>`
|
||||
- `<wa-input>`
|
||||
- `<wa-select>`
|
||||
|
||||
@@ -4,6 +4,173 @@ description: Learn more about using custom elements.
|
||||
layout: page-outline
|
||||
---
|
||||
|
||||
<!-- WA Pattern Background Examples -->
|
||||
<div class="example">
|
||||
<h3>WA Pattern: Default</h3>
|
||||
<div class="background-overlay-wa-pattern example-content"
|
||||
style="--background-color: var(--wa-color-neutral-border-quiet);">
|
||||
<p>Default settings with normal blend mode</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>WA Pattern: Custom Opacity (Subtle)</h3>
|
||||
<div class="background-overlay-wa-pattern example-content"
|
||||
style="--background-color: var(--wa-color-neutral-border-quiet);
|
||||
--background-opacity: 0.1;">
|
||||
<p>Very subtle pattern with 0.1 opacity</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>WA Pattern: Custom Opacity (Prominent)</h3>
|
||||
<div class="background-overlay-wa-pattern example-content"
|
||||
style="--background-color: var(--wa-color-neutral-border-quiet);
|
||||
--background-opacity: 0.3;">
|
||||
<p>More prominent pattern with 0.3 opacity</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>WA Pattern: Background Color - Brand</h3>
|
||||
<div class="background-overlay-wa-pattern example-content"
|
||||
style="--background-color: var(--wa-color-brand-border-normal);">
|
||||
<p>Pattern with brand color - automatically blends with multiply (light) or screen (dark)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>WA Pattern: Multiply/Screen Blend Mode</h3>
|
||||
<div class="background-overlay-wa-pattern example-content"
|
||||
style="--background-blend-mode: multiply;
|
||||
--background-blend-mode-dark: screen;
|
||||
--background-color: var(--wa-color-neutral-border-quiet);
|
||||
--background-opacity: 0.15;">
|
||||
<p>Multiply blend mode in light mode, automatically switches to screen blend mode in dark mode. Set both <code>--background-blend-mode: multiply</code> and <code>--background-blend-mode-dark: screen</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>WA Pattern: Grayscale (Luminosity Blend Mode)</h3>
|
||||
<div class="background-overlay-wa-pattern example-content"
|
||||
style="--background-blend-mode: luminosity;
|
||||
--background-color: transparent;
|
||||
--background-opacity: 0.2;">
|
||||
<p>Luminosity blend mode creates a grayscale effect that uses the pattern's brightness to modulate the content behind it, while preserving the color of the background content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Grid Background Examples -->
|
||||
<div class="example">
|
||||
<h3>Grid: Default</h3>
|
||||
<div class="background-overlay-grid example-content">
|
||||
<p>Default settings with normal blend mode</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>Grid: Custom Opacity (Subtle)</h3>
|
||||
<div class="background-overlay-grid example-content"
|
||||
style="--grid-opacity: 0.05;
|
||||
--subgrid-opacity: 0.025;">
|
||||
<p>Very subtle grid with reduced opacity</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>Grid: Custom Opacity (Prominent)</h3>
|
||||
<div class="background-overlay-grid example-content"
|
||||
style="--grid-opacity: 0.2;
|
||||
--subgrid-opacity: 0.1;">
|
||||
<p>More prominent grid with increased opacity</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>Grid: Background Color - Brand</h3>
|
||||
<div class="background-overlay-grid example-content"
|
||||
style="--background-color: var(--wa-color-brand-fill-quiet);
|
||||
--grid-line-color: var(--wa-color-brand-border-normal);
|
||||
--subgrid-line-color: var(--wa-color-brand-border-normal);">
|
||||
<p>Grid with brand background and line colors - automatically blends with multiply (light) or screen (dark)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>Grid: Multiply/Screen Blend Mode</h3>
|
||||
<div class="background-overlay-grid example-content"
|
||||
style="--background-blend-mode: multiply;
|
||||
--background-blend-mode-dark: screen;
|
||||
--grid-opacity: 0.15;
|
||||
--subgrid-opacity: 0.08;">
|
||||
<p>Multiply blend mode in light mode, automatically switches to screen blend mode in dark mode. Set both <code>--background-blend-mode: multiply</code> and <code>--background-blend-mode-dark: screen</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>Grid: Grayscale (Luminosity Blend Mode)</h3>
|
||||
<div class="background-overlay-grid example-content"
|
||||
style="--background-blend-mode: luminosity;
|
||||
--background-color: transparent;
|
||||
--grid-opacity: 0.2;
|
||||
--subgrid-opacity: 0.1;">
|
||||
<p>Luminosity blend mode creates a grayscale effect that uses the grid's brightness to modulate the content behind it, while preserving the color of the background content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Dot Grid Background Examples -->
|
||||
<div class="example">
|
||||
<h3>Dot Grid: Default</h3>
|
||||
<div class="background-overlay-dot-grid example-content">
|
||||
<p>Default settings with normal blend mode</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>Dot Grid: Custom Opacity (Subtle)</h3>
|
||||
<div class="background-overlay-dot-grid example-content"
|
||||
style="--dot-opacity: 0.05;">
|
||||
<p>Very subtle dots with 0.05 opacity</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>Dot Grid: Custom Opacity (Prominent)</h3>
|
||||
<div class="background-overlay-dot-grid example-content"
|
||||
style="--dot-opacity: 0.3;">
|
||||
<p>More prominent dots with 0.3 opacity</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>Dot Grid: Background Color - Brand</h3>
|
||||
<div class="background-overlay-dot-grid example-content"
|
||||
style="--background-color: var(--wa-color-brand-fill-quiet);
|
||||
--dot-color: var(--wa-color-brand-border-normal);">
|
||||
<p>Dots with brand background and dot colors - automatically blends with multiply (light) or screen (dark)</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>Dot Grid: Multiply/Screen Blend Mode</h3>
|
||||
<div class="background-overlay-dot-grid example-content"
|
||||
style="--background-blend-mode: multiply;
|
||||
--background-blend-mode-dark: screen;
|
||||
--dot-opacity: 0.2;">
|
||||
<p>Multiply blend mode in light mode, automatically switches to screen blend mode in dark mode. Set both <code>--background-blend-mode: multiply</code> and <code>--background-blend-mode-dark: screen</code>.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="example">
|
||||
<h3>Dot Grid: Grayscale (Luminosity Blend Mode)</h3>
|
||||
<div class="background-overlay-dot-grid example-content"
|
||||
style="--background-blend-mode: luminosity;
|
||||
--background-color: transparent;
|
||||
--dot-opacity: 0.2;">
|
||||
<p>Luminosity blend mode creates a grayscale effect that uses the dot grid's brightness to modulate the content behind it, while preserving the color of the background content.</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Web Awesome components are just regular HTML elements, or [custom elements](https://developer.mozilla.org/en-US/docs/Web/Web_Components/Using_custom_elements) to be precise. You can use them like any other element. Each component has detailed documentation that describes its full API, including properties, events, methods, and more.
|
||||
|
||||
If you're new to custom elements, often referred to as "web components," this section will familiarize you with how to use them.
|
||||
@@ -225,3 +392,4 @@ If you are using types from multiple projects, you can add an array of reference
|
||||
### Other Editors
|
||||
|
||||
Most popular editors support custom code completion with a bit of configuration. Please [submit a feature request](https://github.com/shoelace-style/webawesome/issues/new/choose) for your editor of choice. PRs are also welcome!
|
||||
|
||||
|
||||
@@ -22,7 +22,7 @@ As soon as all elements are registered _or_ after two seconds have elapsed, the
|
||||
|
||||
:::details Are you using Turbo in your app?
|
||||
|
||||
If you're using [Turbo](https://turbo.hotwired.dev/) to serve a multi-page application (MPA) as a single page application (SPA), you might notice FOUCE when navigating from page to page. This is because Turbo renders the new page's content before the autoloader has a chance to register new components.
|
||||
If you're using [Turbo](https://turbo.hotwired.dev/) to serve a multi-page application (MPA) as a single page application (SPA), you might notice FOUCE when navigating from page to page. This is because Turbo renders the new page's content before the autoloader has a change to register new components.
|
||||
|
||||
The following function acts as a middleware to ensure components are registered _before_ the page shows, eliminating FOUCE for page-to-page navigation with Turbo.
|
||||
|
||||
|
||||
@@ -64,10 +64,10 @@
|
||||
"spellcheck": "cspell \"**/*.{js,ts,json,html,css,md}\" --no-progress --config=\"../../cspell.json\"",
|
||||
"verify": "npm run prettier && npm run build && npm run test",
|
||||
"prepublishOnly": "npm run verify",
|
||||
"check-updates": "npm-check-updates --cooldown 7 --interactive --format group",
|
||||
"check-updates": "npx npm-check-updates --interactive --format group",
|
||||
"print-version": "echo $npm_package_version",
|
||||
"tag-version": "git tag -a \"v$(npm run print-version | tail -n1)\" -m \"tag v$(npm run print-version | tail -n1)\"",
|
||||
"postversion": "npm run tag-version && node ./scripts/update-root-version.js"
|
||||
"postversion": "npm run tag-version"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
@@ -91,7 +91,6 @@
|
||||
"devDependencies": {
|
||||
"@wc-toolkit/jsx-types": "^1.3.0",
|
||||
"eleventy-plugin-git-commit-date": "^0.1.3",
|
||||
"esbuild": "^0.25.11",
|
||||
"npm-check-updates": "^19.1.2"
|
||||
"esbuild": "^0.25.11"
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,27 +0,0 @@
|
||||
#!/usr/bin/env node
|
||||
|
||||
import * as fs from 'node:fs';
|
||||
import * as path from 'node:path';
|
||||
import * as url from 'url';
|
||||
|
||||
const __dirname = url.fileURLToPath(new URL('.', import.meta.url));
|
||||
|
||||
const monorepoRoot = path.resolve(__dirname, '..', '..', '..');
|
||||
const rootPackageJSONFile = path.join(monorepoRoot, 'package.json');
|
||||
const webawesomePackageJSONFile = path.join(path.resolve(__dirname, '..'), 'package.json');
|
||||
|
||||
const rootPackageJSON = JSON.parse(fs.readFileSync(rootPackageJSONFile));
|
||||
const webawesomePackageJSON = JSON.parse(fs.readFileSync(webawesomePackageJSONFile));
|
||||
|
||||
const currentVersion = webawesomePackageJSON.version;
|
||||
rootPackageJSON.version = currentVersion;
|
||||
|
||||
fs.writeFileSync(rootPackageJSONFile, JSON.stringify(rootPackageJSON, null, 2));
|
||||
|
||||
const versionsFile = path.join(monorepoRoot, 'VERSIONS.txt');
|
||||
const versions = fs.readFileSync(versions).split(/\r?\n/);
|
||||
|
||||
// TODO: Make this smart and understand semver and "insert" in the correct spot instead of appending.
|
||||
if (!versions.includes(currentVersion)) {
|
||||
fs.appendFileSync(webawesomePackageJSON.version);
|
||||
}
|
||||
@@ -16,28 +16,27 @@
|
||||
}
|
||||
|
||||
/* Appearance modifiers */
|
||||
:host([appearance='plain']) {
|
||||
:host([appearance~='plain']) {
|
||||
background-color: transparent;
|
||||
border-color: transparent;
|
||||
box-shadow: none;
|
||||
}
|
||||
|
||||
:host([appearance='outlined']) {
|
||||
:host([appearance~='outlined']) {
|
||||
background-color: var(--wa-color-surface-default);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
}
|
||||
|
||||
:host([appearance='filled']) {
|
||||
:host([appearance~='filled']) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
:host([appearance='filled-outlined']) {
|
||||
background-color: var(--wa-color-neutral-fill-quiet);
|
||||
border-color: var(--wa-color-surface-border);
|
||||
:host([appearance~='filled'][appearance~='outlined']) {
|
||||
border-color: var(--wa-color-neutral-border-quiet);
|
||||
}
|
||||
|
||||
:host([appearance='accent']) {
|
||||
:host([appearance~='accent']) {
|
||||
color: var(--wa-color-neutral-on-loud);
|
||||
background-color: var(--wa-color-neutral-fill-loud);
|
||||
border-color: transparent;
|
||||
|
||||
@@ -30,19 +30,11 @@ import styles from './card.css';
|
||||
export default class WaCard extends WebAwesomeElement {
|
||||
static css = [sizeStyles, styles];
|
||||
|
||||
private readonly hasSlotController = new HasSlotController(
|
||||
this,
|
||||
'footer',
|
||||
'header',
|
||||
'media',
|
||||
'header-actions',
|
||||
'footer-actions',
|
||||
'actions',
|
||||
);
|
||||
private readonly hasSlotController = new HasSlotController(this, 'footer', 'header', 'media');
|
||||
|
||||
/** The card's visual appearance. */
|
||||
@property({ reflect: true })
|
||||
appearance: 'accent' | 'filled' | 'outlined' | 'filled-outlined' | 'plain' = 'outlined';
|
||||
appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'outlined';
|
||||
|
||||
/** Renders the card with a header. Only needed for SSR, otherwise is automatically added. */
|
||||
@property({ attribute: 'with-header', type: Boolean, reflect: true }) withHeader = false;
|
||||
|
||||
@@ -9,8 +9,8 @@
|
||||
line-height: var(--wa-line-height-condensed);
|
||||
cursor: pointer;
|
||||
transition:
|
||||
var(--wa-transition-fast) background-color var(--wa-transition-easing),
|
||||
var(--wa-transition-fast) color var(--wa-transition-easing);
|
||||
100ms background-color ease,
|
||||
100ms color ease;
|
||||
}
|
||||
|
||||
@media (hover: hover) {
|
||||
|
||||
@@ -4,7 +4,6 @@ import { customElement, property, query, state } from 'lit/decorators.js';
|
||||
import { animateWithClass } from '../../internal/animate.js';
|
||||
import { HasSlotController } from '../../internal/slot.js';
|
||||
import WebAwesomeElement from '../../internal/webawesome-element.js';
|
||||
import '../icon/icon.js';
|
||||
import styles from './dropdown-item.css';
|
||||
|
||||
/**
|
||||
|
||||
@@ -1,6 +1,4 @@
|
||||
import { aTimeout, expect, fixture, html, waitUntil } from '@open-wc/testing';
|
||||
import sinon from 'sinon';
|
||||
import type WaDropdown from './dropdown.js';
|
||||
import { expect, fixture, html } from '@open-wc/testing';
|
||||
|
||||
describe('<wa-dropdown>', () => {
|
||||
it('should render a component', async () => {
|
||||
@@ -8,112 +6,4 @@ describe('<wa-dropdown>', () => {
|
||||
|
||||
expect(el).to.exist;
|
||||
});
|
||||
|
||||
it('should respect the open attribute when included', async () => {
|
||||
const el = await fixture<WaDropdown>(html`
|
||||
<wa-dropdown open>
|
||||
<wa-button slot="trigger">Dropdown</wa-button>
|
||||
<wa-dropdown-item>One</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
`);
|
||||
|
||||
await el.updateComplete;
|
||||
await aTimeout(200);
|
||||
|
||||
expect(el.open).to.be.true;
|
||||
});
|
||||
|
||||
it('should fire a single show/after-show and hide/after-hide in normal open/close flow', async () => {
|
||||
const el = await fixture<WaDropdown>(html`
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger">Dropdown</wa-button>
|
||||
<wa-dropdown-item>One</wa-dropdown-item>
|
||||
<wa-dropdown-item>Two</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
`);
|
||||
|
||||
// setup spies to track how often we see different show/hide events
|
||||
const showSpy = sinon.spy();
|
||||
const afterShowSpy = sinon.spy();
|
||||
const hideSpy = sinon.spy();
|
||||
const afterHideSpy = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-show', showSpy);
|
||||
el.addEventListener('wa-after-show', afterShowSpy);
|
||||
el.addEventListener('wa-hide', hideSpy);
|
||||
el.addEventListener('wa-after-hide', afterHideSpy);
|
||||
|
||||
// open the dropdown by triggering a click on the trigger
|
||||
const trigger = el.querySelector<HTMLElement>('[slot="trigger"]')!;
|
||||
trigger.click();
|
||||
|
||||
await waitUntil(() => showSpy.calledOnce);
|
||||
await waitUntil(() => afterShowSpy.calledOnce);
|
||||
|
||||
expect(showSpy.callCount).to.equal(1);
|
||||
expect(afterShowSpy.callCount).to.equal(1);
|
||||
|
||||
expect(el.open).to.be.true;
|
||||
|
||||
// close the dropdown by clicking the trigger again
|
||||
trigger.click();
|
||||
|
||||
await waitUntil(() => hideSpy.calledOnce);
|
||||
await waitUntil(() => afterHideSpy.calledOnce);
|
||||
|
||||
expect(hideSpy.callCount).to.equal(1);
|
||||
expect(afterHideSpy.callCount).to.equal(1);
|
||||
|
||||
expect(el.open).to.be.false;
|
||||
});
|
||||
|
||||
it('should fire a single show/after-show and hide/after-hide when wa-hide event is cancelled', async () => {
|
||||
const el = await fixture<WaDropdown>(html`
|
||||
<wa-dropdown>
|
||||
<wa-button slot="trigger">Dropdown</wa-button>
|
||||
<wa-dropdown-item>One</wa-dropdown-item>
|
||||
<wa-dropdown-item>Two</wa-dropdown-item>
|
||||
</wa-dropdown>
|
||||
`);
|
||||
|
||||
// setup spies to track how often we see different show/hide events
|
||||
const showSpy = sinon.spy();
|
||||
const afterShowSpy = sinon.spy();
|
||||
const hideSpy = sinon.spy();
|
||||
const afterHideSpy = sinon.spy();
|
||||
|
||||
el.addEventListener('wa-show', showSpy);
|
||||
el.addEventListener('wa-after-show', afterShowSpy);
|
||||
|
||||
// Intercept wa-hide and prevent it
|
||||
el.addEventListener('wa-hide', event => {
|
||||
event.preventDefault();
|
||||
hideSpy(event);
|
||||
});
|
||||
|
||||
el.addEventListener('wa-after-hide', afterHideSpy);
|
||||
|
||||
// open the dropdown by triggering a click on the trigger
|
||||
const trigger = el.querySelector<HTMLElement>('[slot="trigger"]')!;
|
||||
trigger.click();
|
||||
|
||||
await waitUntil(() => showSpy.calledOnce);
|
||||
await waitUntil(() => afterShowSpy.calledOnce);
|
||||
|
||||
expect(showSpy.callCount).to.equal(1);
|
||||
expect(afterShowSpy.callCount).to.equal(1);
|
||||
|
||||
expect(el.open).to.be.true;
|
||||
|
||||
// click on the trigger (which should do nothing to the open state)
|
||||
trigger.click();
|
||||
|
||||
await waitUntil(() => hideSpy.calledOnce);
|
||||
|
||||
expect(hideSpy.callCount).to.equal(1);
|
||||
// after-hide should not have been called if hide is cancelled
|
||||
expect(afterHideSpy.callCount).to.equal(0);
|
||||
|
||||
expect(el.open).to.be.true;
|
||||
});
|
||||
});
|
||||
|
||||
@@ -109,18 +109,6 @@ export default class WaDropdown extends WebAwesomeElement {
|
||||
|
||||
async updated(changedProperties: PropertyValues) {
|
||||
if (changedProperties.has('open')) {
|
||||
const previousOpen = changedProperties.get('open');
|
||||
// check if the previous value is the same
|
||||
// (if they are, do not trigger menu showing / hiding)
|
||||
if (previousOpen === this.open) {
|
||||
return;
|
||||
}
|
||||
// check if we are changing from undefined to false
|
||||
// (if we are, we can skip menu hiding)
|
||||
if (previousOpen === undefined && this.open === false) {
|
||||
return;
|
||||
}
|
||||
|
||||
this.customStates.set('open', this.open);
|
||||
|
||||
if (this.open) {
|
||||
@@ -239,12 +227,6 @@ export default class WaDropdown extends WebAwesomeElement {
|
||||
return;
|
||||
}
|
||||
|
||||
// if this dropdown is already open, do nothing
|
||||
// (this can happen when wa-hide was cancelled)
|
||||
if (this.popup.active) {
|
||||
return;
|
||||
}
|
||||
|
||||
openDropdowns.forEach(dropdown => (dropdown.open = false));
|
||||
|
||||
this.popup.active = true; // Use wa-popup's active property instead of showPopover
|
||||
|
||||
@@ -25,6 +25,7 @@
|
||||
|
||||
svg {
|
||||
height: 1em;
|
||||
fill: currentColor;
|
||||
overflow: visible;
|
||||
|
||||
/* Duotone colors with path-specific opacity fallback */
|
||||
|
||||
@@ -187,7 +187,7 @@ export default class WaIcon extends WebAwesomeElement {
|
||||
}
|
||||
}
|
||||
|
||||
@watch(['family', 'name', 'library', 'variant', 'src', 'autoWidth', 'swapOpacity'], { waitUntilFirstUpdate: true })
|
||||
@watch(['family', 'name', 'library', 'variant', 'src', 'autoWidth', 'swapOpacity'])
|
||||
async setIcon() {
|
||||
const { url, fromLibrary } = this.getIconSource();
|
||||
const library = fromLibrary ? getIconLibrary(this.library) : undefined;
|
||||
@@ -249,7 +249,7 @@ export default class WaIcon extends WebAwesomeElement {
|
||||
return this.svg;
|
||||
}
|
||||
|
||||
return html`<svg part="svg" width="16" height="16"></svg>`;
|
||||
return html`<svg part="svg" fill="currentColor" width="16" height="16"></svg>`;
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
@@ -53,19 +53,6 @@
|
||||
overflow-y: auto;
|
||||
}
|
||||
|
||||
#start-shadow,
|
||||
#end-shadow {
|
||||
z-index: 2;
|
||||
}
|
||||
|
||||
#start-shadow {
|
||||
opacity: var(--start-shadow-opacity);
|
||||
}
|
||||
|
||||
#end-shadow {
|
||||
opacity: var(--end-shadow-opacity);
|
||||
}
|
||||
|
||||
/* Horizontal shadows */
|
||||
:host([orientation='horizontal']) {
|
||||
#start-shadow,
|
||||
@@ -77,6 +64,14 @@
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#start-shadow {
|
||||
opacity: var(--start-shadow-opacity);
|
||||
}
|
||||
|
||||
#end-shadow {
|
||||
opacity: var(--end-shadow-opacity);
|
||||
}
|
||||
|
||||
#start-shadow {
|
||||
&:dir(ltr) {
|
||||
left: 0;
|
||||
@@ -107,12 +102,21 @@
|
||||
#start-shadow,
|
||||
#end-shadow {
|
||||
position: absolute;
|
||||
z-index: 2;
|
||||
right: 0;
|
||||
left: 0;
|
||||
height: var(--shadow-size);
|
||||
pointer-events: none;
|
||||
}
|
||||
|
||||
#start-shadow {
|
||||
opacity: var(--start-shadow-opacity);
|
||||
}
|
||||
|
||||
#end-shadow {
|
||||
opacity: var(--end-shadow-opacity);
|
||||
}
|
||||
|
||||
#start-shadow {
|
||||
top: 0;
|
||||
background: linear-gradient(to bottom, var(--shadow-color), transparent 100%);
|
||||
|
||||
@@ -74,6 +74,7 @@
|
||||
padding: 0 var(--wa-form-control-padding-inline);
|
||||
position: relative;
|
||||
vertical-align: middle;
|
||||
width: 100%;
|
||||
transition:
|
||||
background-color var(--wa-transition-normal),
|
||||
border var(--wa-transition-normal),
|
||||
|
||||
@@ -119,7 +119,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
|
||||
@state() optionValues: Set<string | null> | undefined;
|
||||
|
||||
/** The name of the select, submitted as a name/value pair with form data. */
|
||||
@property({ reflect: true }) name = '';
|
||||
@property() name = '';
|
||||
|
||||
private _defaultValue: null | string | string[] = null;
|
||||
|
||||
|
||||
@@ -73,16 +73,12 @@ slot:not([name])::slotted(wa-icon) {
|
||||
rotate: -90deg;
|
||||
}
|
||||
|
||||
.tree-item-expanded:not(.tree-item-loading) slot[name='expand-icon'],
|
||||
.tree-item-expanded slot[name='expand-icon'],
|
||||
.tree-item:not(.tree-item-expanded) slot[name='collapse-icon'] {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tree-item:not(.tree-item-has-expand-button):not(.tree-item-loading) .expand-icon-slot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.tree-item-loading .expand-icon-slot wa-icon {
|
||||
.tree-item:not(.tree-item-has-expand-button) .expand-icon-slot {
|
||||
display: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -254,7 +254,6 @@ export default class WaTreeItem extends WebAwesomeElement {
|
||||
'tree-item-expanded': this.expanded,
|
||||
'tree-item-selected': this.selected,
|
||||
'tree-item-leaf': this.isLeaf,
|
||||
'tree-item-loading': this.loading,
|
||||
'tree-item-has-expand-button': showExpandButton,
|
||||
})}"
|
||||
>
|
||||
@@ -273,10 +272,8 @@ export default class WaTreeItem extends WebAwesomeElement {
|
||||
${when(
|
||||
this.loading,
|
||||
() => html` <wa-spinner part="spinner" exportparts="base:spinner__base"></wa-spinner> `,
|
||||
() => html`
|
||||
<wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
|
||||
`,
|
||||
)}
|
||||
<wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
|
||||
</slot>
|
||||
<slot class="expand-icon-slot" name="collapse-icon">
|
||||
<wa-icon name=${isRtl ? 'chevron-left' : 'chevron-right'} library="system" variant="solid"></wa-icon>
|
||||
|
||||
@@ -1,7 +1,3 @@
|
||||
/* Rules shared by all palettes */
|
||||
@import url('../../layers.css');
|
||||
@import url('../variants.css');
|
||||
|
||||
/* Generates --wa-color-{hue}-on tokens for pairing with any palette's key colors */
|
||||
:where(:root),
|
||||
:host {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@import url('base.css');
|
||||
@import url('../variants.css');
|
||||
|
||||
@layer wa-color-palette {
|
||||
.wa-palette-bright {
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@import url('base.css');
|
||||
@import url('../variants.css');
|
||||
|
||||
@layer wa-color-palette {
|
||||
:where(:root),
|
||||
|
||||
@@ -1,4 +1,5 @@
|
||||
@import url('base.css');
|
||||
@import url('../variants.css');
|
||||
|
||||
@layer wa-color-palette {
|
||||
.wa-palette-shoelace,
|
||||
|
||||
@@ -1,2 +0,0 @@
|
||||
/* Order of precedence for all cascade layers in Web Awesome */
|
||||
@layer wa-native, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;
|
||||
@@ -1,6 +1,3 @@
|
||||
@import url('layers.css');
|
||||
|
||||
/* Required utilities */
|
||||
@import url('utilities/size.css');
|
||||
@import url('utilities/variants.css');
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
@import url('../layers.css');
|
||||
@import url('../color/palettes/bright.css'); /* To use this palette, add class="wa-palette-bright" to the <html> element */
|
||||
@import url('https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap');
|
||||
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
@import url('../layers.css');
|
||||
@import url('../color/palettes/default.css');
|
||||
|
||||
@layer wa-theme {
|
||||
|
||||
@@ -1,4 +1,3 @@
|
||||
@import url('../layers.css');
|
||||
@import url('../color/palettes/shoelace.css'); /* To use this palette, add class="wa-palette-shoelace" to the <html> element */
|
||||
|
||||
@layer wa-theme {
|
||||
|
||||
@@ -1,5 +1,3 @@
|
||||
@import url('layers.css');
|
||||
|
||||
@import url('utilities/fouce.css');
|
||||
@import url('utilities/visually-hidden.css');
|
||||
@import url('utilities/scroll-lock.css');
|
||||
|
||||
@@ -1,10 +1,9 @@
|
||||
/* Cascade layers */
|
||||
@import url('layers.css');
|
||||
@layer wa-native, wa-utilities, wa-color-palette, wa-color-variant, wa-theme, wa-theme-dimension, wa-theme-overrides;
|
||||
|
||||
/* Native styles */
|
||||
/* Native Styles */
|
||||
@import url('native.css');
|
||||
|
||||
/* CSS utilities */
|
||||
/* CSS Utilities */
|
||||
@import url('utilities.css');
|
||||
|
||||
/* Theme */
|
||||
|
||||
Reference in New Issue
Block a user