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

Merge branch 'next' into lm/figma-design-kit

Browse Source
This commit is contained in:
lindsaym-fa
2025-10-15 15:42:31 -04:00
parent 62ab0e5b29 a4788cd01d
commit 75bf29648a
60 changed files with 888 additions and 360 deletions
Download Patch File Download Diff File Expand all files Collapse all files

6
VERSIONS.txt Normal file
View File

@@ -0,0 +1,6 @@
3.0.0-beta.1
3.0.0-beta.2
3.0.0-beta.3
3.0.0-beta.4
3.0.0-beta.5
3.0.0-beta.6

3
package-lock.json generated
View File

@@ -14017,8 +14017,7 @@
"qr-creator": "^1.0.0"
},
"devDependencies": {
"@wc-toolkit/jsx-types": "^1.3.0",
"eleventy-plugin-git-commit-date": "^0.1.3"
"@wc-toolkit/jsx-types": "^1.3.0"
},
"engines": {
"node": ">=14.17.0"

312
packages/webawesome/docs/503.md Normal file
View File

@@ -0,0 +1,312 @@
---
title: Web Awesome is Undergoing Maintenance
description: We're performing routine maintenance to keep things running smoothly. Check back soon!
layout: blank
permalink: 503.html
noindex: true
unlisted: true
---
{% block head %}
<link id="site-stylesheet" rel="stylesheet" href="/assets/styles/theme-site.css" />
<link id="site-stylesheet" rel="stylesheet" href="/assets/styles/site.css" />
{% endblock %}
<style>
:root {
--scene-vertical-offset: calc(var(--wa-space-2xs) * -1);
--wa-font-family-heading: cera-round-pro;
--vehicle-offset: 25ch;
--vehicle-duration: 20s;
--vehicle-start: calc(-1 * var(--vehicle-offset));
--vehicle-end: calc(100% + var(--vehicle-offset));
}
html, wa-page {
background-color: var(--wa-color-surface-lowered);
}
wa-icon[name='traffic-cone'] {
--primary-color: var(--wa-color-brand-70);
--secondary-color: var(--wa-color-text-normal);
--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 > [slot='main-footer'] {
border-block-end: var(--wa-border-style) calc(var(--wa-border-width-l) * 10) var(--wa-color-text-normal);
padding: 0;
background-color: transparent;
}
.header-content {
margin-inline: auto;
max-width: var(--content-width-l);
padding-inline: var(--content-padding-inline);
}
.icon-brand-logo {
font-size: var(--wa-font-size-xl);
color: var(--wa-brand-orange);
}
/* centering main-content */
wa-page::part(main-content) {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
#content {
max-width: var(--content-width-m);
padding-inline: var(--content-padding-inline);
margin-inline: auto;
}
.heading-stacked-subtitle {
text-transform: uppercase;
letter-spacing: 0.1em;
}
.heading-stacked-subtitle wa-icon {
position: relative;
inset-block-start: calc(var(--wa-space-3xs) * -0.75);
font-size: 0.75em;
}
.heading-stacked-subtitle wa-icon[name="traffic-cone"] {
--secondary-color: var(--wa-color-text-normal);
--primary-color: var(--wa-color-brand-70);
margin-inline: calc(var(--wa-space-xs) * -1.15) calc(var(--wa-space-xs) * -0.75);
}
.copy {
code {
font-size: 0.75em;
}
strong {
text-decoration: underline;
text-decoration-color: var(--wa-color-brand-70);
text-decoration-thickness: var(--wa-border-width-m);
text-underline-offset: var(--wa-space-2xs);
}
}
.status {
width: 100%;
--min-column-size: 30ch;
wa-callout {
background-color: var(--wa-color-surface-default);
}
}
.linkies {
/* nudge those linkies left */
margin-inline-start: calc(var(--wa-space-xs) * -1);
a {
padding-inline: var(--wa-space-xs);
}
}
.scene {
width: 100%;
position: relative;
overflow-x: clip;
inset-block-end: var(--scene-vertical-offset);
.vehicle {
position: absolute;
inset-inline-start: var(--vehicle-start);
inset-block-end: 0; /* align all vehicles to bottom */
animation: driveAcross var(--vehicle-duration) linear infinite;
transform-origin: center;
z-index: 1;
}
.vehicle-with-object {
white-space: nowrap;
display: flex;
align-items: baseline;
gap: var(--wa-space-3xs);
}
.scene-left {
position: absolute;
inset-block-end: 0;
inset-inline-start: var(--wa-space-l);
}
.scene-left wa-icon[name='toilet-portable'] {
position: relative;
inset-block-start: var(--scene-vertical-offset);
margin-inline: calc(var(--wa-space-xs) * -1);
}
.scene-left wa-icon[name='traffic-cone'] {
position: relative;
inset-block-start: var(--scene-vertical-offset);
}
.blocks {
position: absolute;
inset-inline-end: calc(var(--wa-space-l) * -1);
inset-block-end: 0;
z-index: 2;
}
.blocks wa-icon[name='block-brick'] {
margin-inline: calc(var(--wa-space-xs) * -1);
}
.blocks-bottom {
margin-block-start: calc(var(--wa-space-2xs) * -1);
}
wa-icon[family='duotone'] {
--secondary-opacity: 1.0;
}
wa-icon[name='bulldozer'],
wa-icon[name='excavator'] {
--secondary-color: var(--wa-color-brand-70);
}
wa-icon[name='block-brick'],
wa-icon[name='toilet-portable'] {
--secondary-color: var(--wa-color-neutral-70);
}
}
@keyframes driveAcross {
0% {
left: var(--vehicle-start);
}
100% {
left: var(--vehicle-end);
}
}
/* Unique rumble animations for each vehicle type */
@keyframes rumble-bulldozer {
0%, 100% { transform: translateY(0px) rotate(0deg); }
25% { transform: translateY(-1px) rotate(0.5deg); }
50% { transform: translateY(1px) rotate(-0.3deg); }
75% { transform: translateY(-0.5px) rotate(0.2deg); }
}
/* Apply rumble animation to the single vehicle */
.vehicle-driving { animation: driveAcross var(--vehicle-duration) linear infinite; }
.vehicle wa-icon[name="bulldozer"] { animation: rumble-bulldozer 0.1s ease-in-out infinite; }
</style>
<wa-page disable-sticky="header" class="background-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>
<div>
<wa-button id="contact-us-button" appearance="plain" href="mailto:hello@webawesome.com?subject=Help%2C%20Web%20Awesome">
<wa-icon variant="regular" name="headset" label="Need help? Contact Us" class="icon-embiggen"></wa-icon>
</wa-button>
<wa-tooltip for="contact-us-button" aria-hidden="true">Contact Us</wa-tooltip>
</div>
</div>
</header>
<main id="content">
<div class="content-container wa-stack wa-gap-xl wa-align-items-center">
<h1 class="brand-font wa-stack wa-gap-s heading heading-stacked" style="text-align: center;">
<span class="wa-heading-m heading-stacked-subtitle">
under
<span class="wa-visually-hidden">maintenance</span>
<span aria-hidden="true">
m
<wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
inten
<wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
nce
</span>
</span>
<span class="wa-heading-3xl heading-stacked-title">Hey! We're Workin&apos; Here</span>
</h1>
<p class="copy wa-body-l line-length line-length-m" style="text-align: center;">Mind the <code>wa-gap</code>! webawesome.com is undergoing maintenance and will be back shortly.</p>
<div class="wa-grid wa-gap-xl status">
<wa-callout appearance="plain" variant="neutral">
<wa-icon slot="icon" family="duotone" variant="regular" name="diamond-exclamation" class="icon-embiggen" style="--secondary-opacity: 1; --secondary-color: var(--wa-color-warning-fill-normal);"></wa-icon>
<strong>Temporarily Unavailable</strong><br />
Access to Docs, Accounts, and Teams
</wa-callout>
<wa-callout appearance="plain" variant="neutral">
<wa-icon slot="icon" family="duotone" variant="regular" name="bolt" class="icon-embiggen" style="--secondary-opacity: 1; --secondary-color: var(--wa-color-success-fill-normal);"></wa-icon>
<strong>Fully Operational</strong><br />
Services (such as CDNs) and Support
</wa-callout>
</div>
<div class="wa-cluster wa-gap-xs linkies">
<h2 class="wa-visually-hidden">Web Awesome Elsewhere</h2>
<a href="https://github.com/shoelace-style/webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
<wa-icon family="brands" name="github" label="GitHub"></wa-icon>
</a>
<a href="https://bsky.app/profile/webawesome.com" rel="noopener noreferrer" target="_blank" class="appearance-plain">
<wa-icon family="brands" name="bluesky" label="Bluesky"></wa-icon>
</a>
<a href="https://mastodon.social/@webawesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
<wa-icon family="brands" name="mastodon" label="Mastodon"></wa-icon>
</a>
<a href="https://x.com/webawesomer" rel="noopener noreferrer" target="_blank" class="appearance-plain">
<wa-icon family="brands" name="x-twitter" label="Twitter (X)"></wa-icon>
</a>
<a href="https://www.threads.com/@web.awesome" rel="noopener noreferrer" target="_blank" class="appearance-plain">
<wa-icon family="brands" name="threads" label="Threads"></wa-icon>
</a>
<a href="mailto:hello@webawesome.com?subject=Help%2C%20Web%20Awesome" class="appearance-plain">
<wa-icon variant="regular" name="envelope" label="Email Web Awesome"></wa-icon>
</a>
</div>
</div>
</main>
<div slot="main-footer" class="footer">
<div class="scene">
<div class="scene-left wa-cluster wa-align-items-end">
<wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
<div class="wa-cluster wa-gap-0">
<wa-icon family="duotone" variant="regular" name="toilet-portable" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
<wa-icon family="duotone" variant="regular" name="toilet-portable" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
<wa-icon family="duotone" variant="regular" name="toilet-portable" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
</div>
<wa-icon family="duotone" variant="regular" name="excavator" style="font-size: var(--wa-font-size-3xl);"></wa-icon>
<wa-icon family="duotone" variant="solid" name="traffic-cone"></wa-icon>
</div>
<div class="blocks wa-stack wa-align-items-center wa-gap-0">
<div class="blocks-top wa-cluster wa-gap-0">
<wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
<wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
<wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
</div>
<div class="blocks-bottom wa-cluster wa-gap-0">
<wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
<wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
<wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
<wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
<wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl);"></wa-icon>
</div>
</div>
<div class="track">
<wa-icon family="duotone" variant="regular" name="bulldozer" class="spacer-dot-gif" style="font-size: var(--wa-font-size-3xl); opacity: 0;"></wa-icon>
<span class="vehicle vehicle-driving vehicle-with-object">
<wa-icon family="duotone" variant="regular" name="bulldozer" style="font-size: var(--wa-font-size-3xl);"></wa-icon>
<wa-icon family="duotone" variant="regular" name="block-brick" style="font-size: var(--wa-font-size-2xl); position: relative; inset-inline-start: calc(var(--wa-space-2xs) * -1);"></wa-icon>
</span>
</div>
</div>
</div>
</wa-page>

62
packages/webawesome/docs/_data/themer.js
View File

@@ -74,12 +74,12 @@ export const themes = [
body: {
name: 'Quicksand',
css: 'Quicksand, sans-serif',
href: 'https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
href: 'https://fonts.bunny.net/css2?family=Quicksand:wght@300..700&display=swap',
},
heading: {
name: 'Quicksand',
css: 'Quicksand, sans-serif',
href: 'https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
href: 'https://fonts.bunny.net/css2?family=Quicksand:wght@300..700&display=swap',
},
code: {
name: 'OS Default',
@@ -89,7 +89,7 @@ export const themes = [
longform: {
name: 'Crimson Pro',
css: '"Crimson Pro", serif',
href: 'https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&family=Quicksand:wght@300..700&display=swap',
href: 'https://fonts.bunny.net/css2?family=Crimson+Pro:ital,wght@0,200..900;1,200..900&display=swap',
},
},
icons: {
@@ -194,22 +194,22 @@ export const themes = [
body: {
name: 'Inter',
css: 'Inter, sans-serif',
href: 'https://fonts.bunny.net/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
href: 'https://fonts.bunny.net/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap',
},
heading: {
name: 'Inter',
css: 'Inter, sans-serif',
href: 'https://fonts.bunny.net/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
href: 'https://fonts.bunny.net/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap',
},
code: {
name: 'Geist Mono',
css: '"Geist Mono", monospace',
href: 'https://fonts.bunny.net/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
href: 'https://fonts.bunny.net/css2?family=Geist+Mono:wght@100..900&display=swap',
},
longform: {
name: 'Aleo',
css: 'Aleo, serif',
href: 'https://fonts.bunny.net/css2?family=Aleo:ital,wght@0,100..900;1,100..900&family=Geist+Mono:wght@100..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
href: 'https://fonts.bunny.net/css2?family=Aleo:ital,wght@0,100..900;1,100..900&display=swap',
},
},
icons: {
@@ -254,22 +254,22 @@ export const themes = [
body: {
name: 'Space Grotesk',
css: '"Space Grotesk", sans-serif',
href: 'https://fonts.bunny.net/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
href: 'https://fonts.bunny.net/css2?family=Space+Grotesk:wght@300..700&display=swap',
},
heading: {
name: 'IBM Plex Sans Condensed',
css: '"IBM Plex Sans Condensed", sans-serif',
href: 'https://fonts.bunny.net/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
href: 'https://fonts.bunny.net/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&display=swap',
},
code: {
name: 'Space Mono',
css: '"Space Mono", monospace',
href: 'https://fonts.bunny.net/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
href: 'https://fonts.bunny.net/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
},
longform: {
name: 'Podkova',
css: 'Podkova, serif',
href: 'https://fonts.bunny.net/css2?family=IBM+Plex+Sans+Condensed:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Podkova:wght@400..800&family=Space+Grotesk:wght@300..700&family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap',
href: 'https://fonts.bunny.net/css2?family=Podkova:wght@400..800&display=swap',
},
},
icons: {
@@ -314,22 +314,22 @@ export const themes = [
body: {
name: 'Figtree',
css: 'Figtree, sans-serif',
href: 'https://fonts.bunny.net/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
href: 'https://fonts.bunny.net/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap',
},
heading: {
name: 'Figtree',
css: 'Figtree, sans-serif',
href: 'https://fonts.bunny.net/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
href: 'https://fonts.bunny.net/css2?family=Figtree:ital,wght@0,300..900;1,300..900&display=swap',
},
code: {
name: 'Chivo Mono',
css: '"Chivo Mono", monospace',
href: 'https://fonts.bunny.net/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
href: 'https://fonts.bunny.net/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&display=swap',
},
longform: {
name: 'Fraunces',
css: 'Fraunces, serif',
href: 'https://fonts.bunny.net/css2?family=Chivo+Mono:ital,wght@0,100..900;1,100..900&family=Figtree:ital,wght@0,300..900;1,300..900&family=Fraunces:ital,opsz,wght@0,9..144,100..900;1,9..144,100..900&display=swap',
href: 'https://fonts.bunny.net/css2?family=Fraunces:ital,wght@0,100..900;1,100..900&display=swap',
},
},
icons: {
@@ -374,22 +374,22 @@ export const themes = [
body: {
name: 'Wix Madefor Text',
css: '"Wix Madefor Text", sans-serif',
href: 'https://fonts.bunny.net/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
href: 'https://fonts.bunny.net/css2?family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
},
heading: {
name: 'Wix Madefor Text',
css: '"Wix Madefor Text", sans-serif',
href: 'https://fonts.bunny.net/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
href: 'https://fonts.bunny.net/css2?family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
},
code: {
name: 'Roboto Mono',
css: '"Roboto Mono", monospace',
href: 'https://fonts.bunny.net/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
href: 'https://fonts.bunny.net/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&display=swap',
},
longform: {
name: 'Roboto Serif',
css: '"Roboto Serif", serif',
href: 'https://fonts.bunny.net/css2?family=Roboto+Mono:ital,wght@0,100..700;1,100..700&family=Roboto+Serif:ital,opsz,wght@0,8..144,100..900;1,8..144,100..900&family=Roboto:ital,wght@0,100..900;1,100..900&family=Wix+Madefor+Text:ital,wght@0,400..800;1,400..800&display=swap',
href: 'https://fonts.bunny.net/css2?family=Roboto+Serif:ital,wght@0,100..900;1,100..900&display=swap',
},
},
icons: {
@@ -434,12 +434,12 @@ export const themes = [
body: {
name: 'Mulish',
css: 'Mulish, sans-serif',
href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
href: 'https://fonts.bunny.net/css2?family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
},
heading: {
name: 'Lora',
css: 'Lora, serif',
href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap',
},
code: {
name: 'OS Default',
@@ -449,7 +449,7 @@ export const themes = [
longform: {
name: 'Lora',
css: 'Lora, serif',
href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&family=Mulish:ital,wght@0,200..1000;1,200..1000&display=swap',
href: 'https://fonts.bunny.net/css2?family=Lora:ital,wght@0,400..700;1,400..700&display=swap',
},
},
icons: {
@@ -494,22 +494,22 @@ export const themes = [
body: {
name: 'Nunito',
css: 'Nunito, sans-serif',
href: 'https://fonts.bunny.net/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
href: 'https://fonts.bunny.net/css2?family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
},
heading: {
name: 'Fredoka',
css: 'Fredoka, sans-serif',
href: 'https://fonts.bunny.net/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
href: 'https://fonts.bunny.net/css2?family=Fredoka:wght@300..700&display=swap',
},
code: {
name: 'Azeret Mono',
css: '"Azeret Mono", monospace',
href: 'https://fonts.bunny.net/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
href: 'https://fonts.bunny.net/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&display=swap',
},
longform: {
name: 'BioRhyme',
css: 'BioRhyme, serif',
href: 'https://fonts.bunny.net/css2?family=Azeret+Mono:ital,wght@0,100..900;1,100..900&family=BioRhyme:wght@200..800&family=Fredoka:wght@300..700&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap',
href: 'https://fonts.bunny.net/css2?family=BioRhyme:wght@200..800&display=swap',
},
},
icons: {
@@ -554,12 +554,12 @@ export const themes = [
body: {
name: 'DM Sans',
css: '"DM Sans", sans-serif',
href: 'https://fonts.bunny.net/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap',
href: 'https://fonts.bunny.net/css2?family=DM+Sans:ital,wght@0,100..1000;1,100..1000&display=swap',
},
heading: {
name: 'Playfair Display',
css: '"Playfair Display", serif',
href: 'https://fonts.bunny.net/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap',
href: 'https://fonts.bunny.net/css2?family=Playfair+Display:ital,wght@0,400..900;1,400..900&display=swap',
},
code: {
name: 'OS Default',
@@ -569,7 +569,7 @@ export const themes = [
longform: {
name: 'Playfair',
css: 'Playfair, serif',
href: 'https://fonts.bunny.net/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&display=swap',
href: 'https://fonts.bunny.net/css2?family=Playfair:ital,wght@0,300..900;1,300..900&display=swap',
},
},
icons: {
@@ -614,12 +614,12 @@ export const themes = [
body: {
name: 'Inter',
css: 'Inter, sans-serif',
href: 'https://fonts.bunny.net/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
href: 'https://fonts.bunny.net/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap',
},
heading: {
name: 'Inter',
css: 'Inter, sans-serif',
href: 'https://fonts.bunny.net/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap',
href: 'https://fonts.bunny.net/css2?family=Inter:ital,wght@0,100..900;1,100..900&display=swap',
},
code: {
name: 'OS Default',

4
packages/webawesome/docs/_includes/logo-simple.njk
View File

@@ -1,3 +1 @@
<svg width="20" height="15" viewBox="0 0 20 15" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z" fill="var(--wa-brand-orange, #f36944)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="15" fill="none" viewBox="0 0 20 15"><path fill="var(--wa-brand-orange, #f36944)" d="M11.63 1.625c0 .654-.387 1.218-.944 1.476L14 6l3.262-.652A1.5 1.5 0 1 1 18.55 6l-3.52 7.82A2 2 0 0 1 13.208 15H6.793a2 2 0 0 1-1.824-1.18L1.45 6a1.5 1.5 0 1 1 1.289-.652L6 6l3.317-2.902a1.625 1.625 0 1 1 2.313-1.473"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 742 B

After

Width:  |  Height:  |  Size: 368 B

14
packages/webawesome/docs/_includes/logo.njk
View File

@@ -1,13 +1 @@
<svg width="105" height="16" viewBox="0 0 105 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M78.0517 11.8597C78.464 12.2456 79.2272 12.5 79.8675 12.5C81.0605 12.5 81.9903 11.8333 81.9903 10.693C81.9903 9.84215 81.4727 9.35093 80.5078 8.94743L79.8412 8.66674C79.4815 8.51762 79.3412 8.41235 79.3412 8.19306C79.3412 7.92991 79.5605 7.82465 79.8587 7.82465C80.169 7.82465 80.3376 7.95507 80.4921 8.07458C80.5297 8.1037 80.5665 8.1322 80.6043 8.15797C80.7359 8.25446 80.8675 8.28955 80.9903 8.28955C81.3236 8.28955 81.6657 8.00008 81.6657 7.61413C81.6657 7.47378 81.6219 7.31589 81.4903 7.16677C81.3499 7.0001 80.8587 6.49134 79.8412 6.50011C78.6921 6.50011 77.8149 7.17554 77.8149 8.2106C77.8149 9.02638 78.3588 9.55268 79.2798 9.95618L79.8763 10.2193C80.2798 10.3948 80.464 10.4825 80.464 10.7544C80.464 11.0351 80.271 11.1755 79.8675 11.1755C79.3642 11.1755 79.0247 10.8964 78.8489 10.752C78.8133 10.7228 78.7844 10.699 78.7623 10.6842C78.657 10.6141 78.5342 10.579 78.4202 10.579C78.0781 10.579 77.7535 10.8421 77.7447 11.2456C77.7447 11.4737 77.8588 11.6754 78.0517 11.8597Z" fill="currentColor"/>
<path d="M97.9115 7.2808C97.9115 6.83344 97.5957 6.50012 97.1572 6.50011C96.8502 6.50011 96.6396 6.64923 96.394 7.05274L94.9642 9.35094L93.5344 7.05274C93.2888 6.64923 93.0783 6.50011 92.7713 6.50011C92.3327 6.50011 92.0169 6.83344 92.0169 7.2808V11.7369C92.0169 12.1754 92.3415 12.5 92.7713 12.5C93.2011 12.5 93.5257 12.1754 93.5257 11.7369V9.71058L94.28 10.9123C94.4906 11.2456 94.6835 11.3772 94.9642 11.3772C95.2449 11.3772 95.4379 11.2456 95.6484 10.9123L96.4028 9.71058V11.7369C96.4028 12.1754 96.7273 12.5 97.1572 12.5C97.587 12.5 97.9115 12.1754 97.9115 11.7369L97.9115 7.2808Z" fill="currentColor"/>
<path d="M100.516 11.6316C100.516 12.0702 100.84 12.3947 101.279 12.3947L104.033 12.3947C104.428 12.3947 104.726 12.1053 104.726 11.7105C104.726 11.3246 104.437 11.0351 104.033 11.0351L102.024 11.0351V10.0264L103.235 10.0264C103.603 10.0264 103.875 9.75445 103.875 9.3948C103.875 9.03516 103.603 8.76324 103.235 8.76324L102.024 8.76324V7.96501L103.928 7.96501C104.323 7.96501 104.621 7.67554 104.621 7.28081C104.621 6.89485 104.331 6.60539 103.928 6.60539L101.279 6.60538C100.84 6.60538 100.516 6.92994 100.516 7.36853V11.6316Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M86.8778 6.50011C88.6322 6.50011 90.0094 7.82465 90.0094 9.50006C90.0094 11.1842 88.6322 12.5 86.8778 12.5C85.1235 12.5 83.7639 11.1842 83.7639 9.50006C83.7639 7.81588 85.1323 6.50011 86.8778 6.50011ZM86.8866 7.88605C85.948 7.88605 85.3077 8.54393 85.3077 9.50006C85.3077 10.4649 85.9393 11.1141 86.8866 11.1141C87.8164 11.1141 88.4655 10.4474 88.4655 9.50006C88.4655 8.56148 87.8076 7.88605 86.8866 7.88605Z" fill="currentColor"/>
<path d="M72.1721 12.3947C71.7335 12.3947 71.4089 12.0702 71.4089 11.6316V7.36852C71.4089 6.92993 71.7335 6.60538 72.1721 6.60538L74.8211 6.60538C75.2246 6.60538 75.5141 6.89485 75.5141 7.2808C75.5141 7.67553 75.2159 7.965 74.8211 7.965L72.9177 7.965V8.76323L74.1282 8.76323C74.4966 8.76323 74.7685 9.03515 74.7685 9.3948C74.7685 9.75444 74.4966 10.0264 74.1282 10.0264L72.9177 10.0264V11.0351L74.9264 11.0351C75.3299 11.0351 75.6194 11.3246 75.6194 11.7105C75.6194 12.1053 75.3211 12.3947 74.9264 12.3947L72.1721 12.3947Z" fill="currentColor"/>
<path d="M69.4429 7.23694C69.443 6.83344 69.1009 6.50012 68.6886 6.50012C68.364 6.50012 68.1009 6.68432 67.9868 7.00011L66.943 9.8597L65.9781 7.07028C65.8465 6.70187 65.5834 6.50011 65.2325 6.50011C64.8816 6.50011 64.6185 6.70187 64.4869 7.07028L63.522 9.8597L62.4694 6.97379C62.3641 6.67555 62.101 6.50011 61.7764 6.50011C61.3642 6.50011 61.0221 6.83344 61.0221 7.23694C61.0221 7.3422 61.0396 7.43869 61.101 7.57904L62.8115 11.9912C62.9343 12.3246 63.1799 12.5 63.5132 12.5C63.8378 12.5 64.0834 12.3246 64.2062 11.9912L65.2325 9.21059L66.2588 11.9912C66.3816 12.3246 66.6272 12.5 66.9518 12.5C67.2851 12.5 67.5307 12.3246 67.6535 11.9912L69.364 7.57904C69.4166 7.44747 69.4429 7.35098 69.4429 7.23694Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M60.0269 11.4123C60.0795 11.5439 60.1058 11.6755 60.1058 11.7807C60.1058 12.193 59.7901 12.5 59.3602 12.5C59.0357 12.5 58.7901 12.3158 58.6497 11.9561L58.5269 11.6491L56.4568 11.6491L56.334 11.9561C56.1936 12.3158 55.948 12.5 55.6235 12.5C55.1936 12.5 54.8779 12.193 54.8779 11.7807C54.8779 11.6755 54.9042 11.5439 54.9568 11.4123L56.7726 7.0001C56.9041 6.67555 57.1498 6.50011 57.4919 6.50011C57.834 6.50011 58.0796 6.67555 58.2111 7.00011L60.0269 11.4123ZM57.4919 8.74568L56.9041 10.4386L58.0796 10.4386L57.4919 8.74568Z" fill="currentColor"/>
<path d="M35.6665 6.50013C36.0788 6.50013 36.4209 6.83346 36.4209 7.23696C36.4209 7.35099 36.3946 7.44748 36.3419 7.57906L34.6314 11.9912C34.5086 12.3246 34.263 12.5 33.9297 12.5C33.6051 12.5 33.3595 12.3246 33.2367 11.9912L32.2104 9.2106L31.1841 11.9912C31.0613 12.3246 30.8157 12.5 30.4912 12.5C30.1578 12.5 29.9122 12.3246 29.7894 11.9912L28.0789 7.57906C28.0175 7.43871 28 7.34222 28 7.23696C28 6.83346 28.3421 6.50013 28.7544 6.50013C29.0789 6.50013 29.3421 6.67557 29.4473 6.97381L30.4999 9.85971L31.4648 7.07029C31.5964 6.70188 31.8596 6.50013 32.2104 6.50013C32.5613 6.50013 32.8245 6.70188 32.956 7.07029L33.9209 9.85971L34.9648 7.00012C35.0788 6.68434 35.3419 6.50013 35.6665 6.50013Z" fill="currentColor"/>
<path d="M38.3868 11.6316C38.3868 12.0702 38.7114 12.3947 39.15 12.3947H41.9043C42.299 12.3947 42.5973 12.1052 42.5973 11.7105C42.5973 11.3246 42.3078 11.0351 41.9043 11.0351H39.8956V10.0263H41.1061C41.4745 10.0263 41.7464 9.75442 41.7464 9.39478C41.7464 9.03514 41.4745 8.76321 41.1061 8.76321H39.8956V7.96498H41.799C42.1938 7.96498 42.492 7.67552 42.492 7.28079C42.492 6.89483 42.2025 6.60536 41.799 6.60536H39.15C38.7114 6.60536 38.3868 6.92992 38.3868 7.36851V11.6316Z" fill="currentColor"/>
<path fill-rule="evenodd" clip-rule="evenodd" d="M49.5021 10.6754C49.5021 10.0176 49.1425 9.53512 48.5372 9.28952C48.7653 9.03514 48.8881 8.70181 48.8881 8.31585C48.8881 7.31587 48.0723 6.60536 46.932 6.60536H45.6075C45.1689 6.60536 44.8443 6.92992 44.8443 7.36851V11.6316C44.8443 12.0702 45.1689 12.3947 45.6075 12.3947H47.546C48.6776 12.3947 49.5021 11.6754 49.5021 10.6754ZM46.2917 7.87727H46.8355C47.1864 7.87727 47.4145 8.07024 47.4145 8.38603C47.4145 8.70181 47.1864 8.89479 46.8355 8.89479H46.2917V7.87727ZM48.0285 10.614C48.0285 10.9386 47.818 11.1228 47.4496 11.1228H46.2917V10.1053H47.4496C47.818 10.1053 48.0285 10.2895 48.0285 10.614Z" fill="currentColor"/>
<path d="M11.63 1.625C11.63 2.27911 11.2435 2.84296 10.6865 3.10064L14 6L17.2622 5.34755C17.0968 5.10642 17 4.81452 17 4.5C17 3.67157 17.6716 3 18.5 3C19.3284 3 20 3.67157 20 4.5C20 5.31157 19.3555 5.9726 18.5504 5.99917L15.0307 13.8207C14.7077 14.5384 13.9939 15 13.2068 15H6.79317C6.00615 15 5.29229 14.5384 4.96933 13.8207L1.44963 5.99917C0.64452 5.9726 0 5.31157 0 4.5C0 3.67157 0.671573 3 1.5 3C2.32843 3 3 3.67157 3 4.5C3 4.81452 2.9032 5.10642 2.73777 5.34755L6 6L9.31702 3.09761C8.76346 2.83855 8.38 2.27656 8.38 1.625C8.38 0.727537 9.10754 0 10.005 0C10.9025 0 11.63 0.727537 11.63 1.625Z" fill="var(--wa-brand-orange, #F36944)"/>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" width="105" height="16" fill="none" viewBox="0 0 105 16"><path fill="currentColor" d="M78.052 11.86c.412.386 1.175.64 1.816.64 1.193 0 2.122-.667 2.122-1.807 0-.85-.517-1.342-1.482-1.746l-.667-.28c-.36-.15-.5-.255-.5-.474 0-.263.22-.368.518-.368.31 0 .479.13.633.25q.057.044.112.083a.64.64 0 0 0 .386.132c.334 0 .676-.29.676-.676a.66.66 0 0 0-.176-.447C81.35 7 80.86 6.49 79.841 6.5c-1.149 0-2.026.676-2.026 1.71 0 .816.544 1.343 1.465 1.746l.596.263c.404.176.588.264.588.535 0 .281-.193.422-.596.422-.504 0-.843-.28-1.02-.424q-.053-.045-.086-.068a.63.63 0 0 0-.342-.105.673.673 0 0 0-.675.667c0 .228.114.43.307.614M97.912 7.28c0-.447-.316-.78-.755-.78-.307 0-.517.15-.763.553l-1.43 2.298-1.43-2.298c-.245-.404-.456-.553-.763-.553-.438 0-.754.333-.754.78v4.457a.74.74 0 0 0 .754.763.74.74 0 0 0 .755-.763V9.71l.754 1.201c.21.334.403.465.684.465.28 0 .474-.131.684-.465l.755-1.201v2.026a.74.74 0 0 0 .754.763.74.74 0 0 0 .755-.763zM100.516 11.632c0 .438.324.763.763.763h2.754a.67.67 0 0 0 .693-.684c0-.386-.289-.676-.693-.676h-2.009v-1.009h1.211a.62.62 0 0 0 .64-.631.62.62 0 0 0-.64-.632h-1.211v-.798h1.904a.67.67 0 0 0 .693-.684c0-.386-.29-.676-.693-.676h-2.649a.74.74 0 0 0-.763.764z"/><path fill="currentColor" fill-rule="evenodd" d="M86.878 6.5c1.754 0 3.131 1.325 3.131 3 0 1.684-1.377 3-3.131 3s-3.114-1.316-3.114-3 1.368-3 3.114-3m.009 1.386c-.939 0-1.58.658-1.58 1.614 0 .965.632 1.614 1.58 1.614.93 0 1.579-.667 1.579-1.614 0-.939-.658-1.614-1.58-1.614" clip-rule="evenodd"/><path fill="currentColor" d="M72.172 12.395a.74.74 0 0 1-.763-.763V7.369c0-.44.325-.764.763-.764h2.65c.403 0 .692.29.692.676a.67.67 0 0 1-.693.684h-1.903v.798h1.21a.62.62 0 0 1 .64.632.62.62 0 0 1-.64.631h-1.21v1.01h2.008c.404 0 .693.289.693.675a.67.67 0 0 1-.693.684zM69.443 7.237a.75.75 0 0 0-.754-.737.72.72 0 0 0-.702.5l-1.044 2.86-.965-2.79c-.131-.368-.395-.57-.745-.57-.351 0-.615.202-.746.57l-.965 2.79-1.053-2.886c-.105-.298-.368-.474-.693-.474a.75.75 0 0 0-.754.737c0 .105.018.202.079.342l1.71 4.412c.123.334.369.509.702.509.325 0 .57-.175.693-.509l1.026-2.78 1.027 2.78c.123.334.368.509.693.509.333 0 .579-.175.701-.509l1.711-4.412a.9.9 0 0 0 .079-.342"/><path fill="currentColor" fill-rule="evenodd" d="M60.027 11.412c.053.132.079.263.079.369 0 .412-.316.719-.746.719-.324 0-.57-.184-.71-.544l-.123-.307h-2.07l-.123.307c-.14.36-.386.544-.71.544-.43 0-.746-.307-.746-.72 0-.104.026-.236.079-.368L56.773 7c.131-.324.377-.5.719-.5s.588.176.72.5zm-2.535-2.666-.588 1.693h1.176z" clip-rule="evenodd"/><path fill="currentColor" d="M35.667 6.5a.75.75 0 0 1 .754.737c0 .114-.026.21-.08.342l-1.71 4.412c-.122.334-.368.509-.701.509-.325 0-.57-.175-.693-.509l-1.027-2.78-1.026 2.78c-.123.334-.368.509-.693.509-.333 0-.579-.175-.702-.509L28.08 7.58A.8.8 0 0 1 28 7.237a.75.75 0 0 1 .754-.737c.325 0 .588.176.693.474L30.5 9.86l.965-2.79c.131-.368.395-.57.745-.57.351 0 .614.202.746.57l.965 2.79L34.965 7a.72.72 0 0 1 .701-.5M38.387 11.632c0 .438.324.763.763.763h2.754c.395 0 .693-.29.693-.684 0-.386-.29-.676-.693-.676h-2.008v-1.009h1.21a.62.62 0 0 0 .64-.631.62.62 0 0 0-.64-.632h-1.21v-.798h1.903a.67.67 0 0 0 .693-.684c0-.386-.29-.676-.693-.676H39.15a.74.74 0 0 0-.763.764z"/><path fill="currentColor" fill-rule="evenodd" d="M49.502 10.675c0-.657-.36-1.14-.965-1.385.228-.255.351-.588.351-.974 0-1-.816-1.71-1.956-1.71h-1.325a.74.74 0 0 0-.763.763v4.263c0 .438.325.763.764.763h1.938c1.132 0 1.956-.72 1.956-1.72m-3.21-2.798h.544c.35 0 .578.193.578.509s-.228.509-.578.509h-.544zm1.736 2.737c0 .325-.21.509-.578.509h-1.158v-1.018h1.158c.368 0 .578.184.578.509" clip-rule="evenodd"/><path fill="var(--wa-brand-orange, #f36944)" d="M11.63 1.625c0 .654-.387 1.218-.944 1.476L14 6l3.262-.652A1.5 1.5 0 1 1 18.55 6l-3.52 7.82A2 2 0 0 1 13.208 15H6.793a2 2 0 0 1-1.824-1.18L1.45 6a1.5 1.5 0 1 1 1.289-.652L6 6l3.317-2.902a1.625 1.625 0 1 1 2.313-1.473"/></svg>
Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 7.0 KiB

After

Width:  |  Height:  |  Size: 3.8 KiB

5
packages/webawesome/docs/_includes/planned-badge.njk Normal file
View File

@@ -0,0 +1,5 @@
{% macro plannedBadge(plannedBadgeDescription, plannedBadgeId) %}
{% set badgeId = plannedBadgeId or ("planned-badge-" + ("" | uniqueId(8))) %}
<wa-badge appearance="filled" variant="neutral" pill class="planned" id="{{ badgeId }}">Planned</wa-badge>
<wa-tooltip for="{{ badgeId }}">{{ plannedBadgeDescription or "This is a planned feature" }}</wa-tooltip>
{% endmacro %}

7
packages/webawesome/docs/_includes/pro-badge.njk
View File

@@ -1,5 +1,6 @@
{% macro proBadge(proBadgeDescription, proBadgeId) %}
{% set badgeId = proBadgeId or ("pro-badge-" + ("" | uniqueId(8))) %}
{% macro proBadge(params) %}
{% set description = params.description or "This requires access to Web Awesome Pro" %}
{% set badgeId = params.id or ("pro-badge-" + ("" | uniqueId(8))) %}
<wa-badge appearance="accent" pill class="pro" id="{{ badgeId }}">Pro</wa-badge>
<wa-tooltip for="{{ badgeId }}">{{ proBadgeDescription or "This requires access to Web Awesome Pro" }}</wa-tooltip>
<wa-tooltip for="{{ badgeId }}">{{ description }}</wa-tooltip>
{% endmacro %}

29
packages/webawesome/docs/_includes/sidebar.njk
View File

@@ -1,6 +1,7 @@
{# Search #}
{% include "search-trigger-button.njk" %}
{% from "pro-badge.njk" import proBadge %}
{% from "planned-badge.njk" import plannedBadge %}
{# Getting started #}
<h2>Getting Started</h2>
@@ -46,7 +47,7 @@
<li>
<span class="wa-split">
<a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
Page <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
</a>
{{ proBadge() }}
</span>
@@ -68,26 +69,30 @@
<li>
<a class="wa-cluster wa-gap-xs" href="/docs/components/carousel/">
Carousel
<wa-icon name="flask" aria-hidden="true"></wa-icon>
<wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
</a>
<ul>
<li>
<a class="wa-cluster wa-gap-xs" href="/docs/components/carousel-item/">
Carousel Item
<wa-icon name="flask" aria-hidden="true"></wa-icon>
<wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
</a>
</li>
</ul>
</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 <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/">
Copy Button
<wa-icon name="flask" aria-hidden="true"></wa-icon>
<wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
</a>
</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>
@@ -187,7 +192,7 @@
<li>
<span class="wa-split">
<a class="wa-cluster wa-gap-xs" href="/docs/components/page/">
Page <wa-icon name="flask" aria-hidden="true"></wa-icon>
Page <wa-icon name="flask" aria-hidden="true" class="icon-shrink"></wa-icon>
</a>
{{ proBadge() }}
</span>
@@ -381,7 +386,7 @@
<li>
<span class="wa-split">
<a href="/themer" data-turbo="false">Theme Builder</a>
{{ proBadge("This requires an active Web Awesome Pro subscription") }}
{{ proBadge({ description: "This requires an active Web Awesome Pro subscription", shrink: true }) }}
</span>
</li>
</ul>
@@ -411,12 +416,12 @@
<div class="wa-stack wa-gap-xl" id="colophon">
<div class="wa-stack wa-gap-xs">
{% include "logo-simple.njk" %}
<div class="wa-cluster wa-gap-xs">
<h2 class="wa-heading-xs">Web Awesome</h2>
<wa-badge id="version-beta-badge" variant="orange" appearance="filled" style="font-size: var(--wa-font-size-2xs);">Beta</wa-badge>
<wa-tooltip for="version-beta-badge" distance="2" style="font-size: var(--wa-font-size-xs);">Here be freshly made Awesome&hellip; and possible dragons</wa-tooltip>
</div>
<p class="wa-caption-s">Version {{ package.version }}</p>
<h2 class="wa-heading-xs">Web Awesome</h2>
<p class="wa-caption-s wa-cluster wa-gap-xs">
Version {{ package.version }}
<wa-icon id="version-icon-info" family="duotone" variant="regular" name="party-horn"></wa-icon>
<wa-tooltip for="version-icon-info" distance="2" style="font-size: var(--wa-font-size-xs);">Here be freshly launched Awesome and no wa-dragons</wa-tooltip>
</p>
<p class="wa-caption-s">&copy; Fonticons, Inc.</p>
</div>

42
packages/webawesome/docs/_includes/visual-tests/appearance.njk
View File

@@ -33,11 +33,11 @@
<th><code>filled</code> + <code>outlined</code></th>
<td>
<div class="wa-cluster wa-gap-2xs">
<wa-badge variant="brand" appearance="filled outlined">Brand</wa-badge>
<wa-badge variant="neutral" appearance="filled outlined">Neutral</wa-badge>
<wa-badge variant="success" appearance="filled outlined">Success</wa-badge>
<wa-badge variant="warning" appearance="filled outlined">Warning</wa-badge>
<wa-badge variant="danger" appearance="filled outlined">Danger</wa-badge>
<wa-badge variant="brand" appearance="filled-outlined">Brand</wa-badge>
<wa-badge variant="neutral" appearance="filled-outlined">Neutral</wa-badge>
<wa-badge variant="success" appearance="filled-outlined">Success</wa-badge>
<wa-badge variant="warning" appearance="filled-outlined">Warning</wa-badge>
<wa-badge variant="danger" appearance="filled-outlined">Danger</wa-badge>
</div>
</td>
<td>
@@ -174,11 +174,11 @@
<th><code>filled</code> + <code>outlined</code></th>
<td>
<div class="wa-cluster wa-gap-2xs">
<wa-button variant="brand" appearance="filled outlined">Brand</wa-button>
<wa-button variant="neutral" appearance="filled outlined">Neutral</wa-button>
<wa-button variant="success" appearance="filled outlined">Success</wa-button>
<wa-button variant="warning" appearance="filled outlined">Warning</wa-button>
<wa-button variant="danger" appearance="filled outlined">Danger</wa-button>
<wa-button variant="brand" appearance="filled-outlined">Brand</wa-button>
<wa-button variant="neutral" appearance="filled-outlined">Neutral</wa-button>
<wa-button variant="success" appearance="filled-outlined">Success</wa-button>
<wa-button variant="warning" appearance="filled-outlined">Warning</wa-button>
<wa-button variant="danger" appearance="filled-outlined">Danger</wa-button>
</div>
</td>
<td>
@@ -375,23 +375,23 @@
<th><code>filled</code> + <code>outlined</code></th>
<td>
<div class="wa-grid wa-gap-2xs">
<wa-callout variant="brand" appearance="filled outlined">
<wa-callout variant="brand" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-star"></wa-icon>
Brand
</wa-callout>
<wa-callout variant="neutral" appearance="filled outlined">
<wa-callout variant="neutral" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-info"></wa-icon>
Neutral
</wa-callout>
<wa-callout variant="success" appearance="filled outlined">
<wa-callout variant="success" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-check"></wa-icon>
Success
</wa-callout>
<wa-callout variant="warning" appearance="filled outlined">
<wa-callout variant="warning" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
Warning
</wa-callout>
<wa-callout variant="danger" appearance="filled outlined">
<wa-callout variant="danger" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
Danger
</wa-callout>
@@ -636,11 +636,11 @@
<th><code>filled</code> + <code>outlined</code></th>
<td>
<div class="wa-cluster wa-gap-2xs">
<wa-tag variant="brand" appearance="filled outlined">Brand</wa-tag>
<wa-tag variant="neutral" appearance="filled outlined">Neutral</wa-tag>
<wa-tag variant="success" appearance="filled outlined">Success</wa-tag>
<wa-tag variant="warning" appearance="filled outlined">Warning</wa-tag>
<wa-tag variant="danger" appearance="filled outlined">Danger</wa-tag>
<wa-tag variant="brand" appearance="filled-outlined">Brand</wa-tag>
<wa-tag variant="neutral" appearance="filled-outlined">Neutral</wa-tag>
<wa-tag variant="success" appearance="filled-outlined">Success</wa-tag>
<wa-tag variant="warning" appearance="filled-outlined">Warning</wa-tag>
<wa-tag variant="danger" appearance="filled-outlined">Danger</wa-tag>
</div>
</td>
<td>
@@ -775,4 +775,4 @@
</tr>
</tbody>
</table>
</div>
</div>

110
packages/webawesome/docs/_includes/visual-tests/color.njk
View File

@@ -13,7 +13,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-badge>
<wa-badge variant="brand" appearance="filled">Filled</wa-badge>
<wa-badge variant="brand" appearance="outlined">Outlined</wa-badge>
</div>
@@ -21,7 +21,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-badge>
<wa-badge class="wa-brand" appearance="filled">Filled</wa-badge>
<wa-badge class="wa-brand" appearance="outlined">Outlined</wa-badge>
</div>
@@ -32,7 +32,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-badge>
<wa-badge variant="neutral" appearance="filled">Filled</wa-badge>
<wa-badge variant="neutral" appearance="outlined">Outlined</wa-badge>
</div>
@@ -40,7 +40,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-badge>
<wa-badge class="wa-neutral" appearance="filled">Filled</wa-badge>
<wa-badge class="wa-neutral" appearance="outlined">Outlined</wa-badge>
</div>
@@ -51,7 +51,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-badge>
<wa-badge variant="success" appearance="filled">Filled</wa-badge>
<wa-badge variant="success" appearance="outlined">Outlined</wa-badge>
</div>
@@ -59,7 +59,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-badge>
<wa-badge class="wa-success" appearance="filled">Filled</wa-badge>
<wa-badge class="wa-success" appearance="outlined">Outlined</wa-badge>
</div>
@@ -70,7 +70,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-badge>
<wa-badge variant="warning" appearance="filled">Filled</wa-badge>
<wa-badge variant="warning" appearance="outlined">Outlined</wa-badge>
</div>
@@ -78,7 +78,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-badge>
<wa-badge class="wa-warning" appearance="filled">Filled</wa-badge>
<wa-badge class="wa-warning" appearance="outlined">Outlined</wa-badge>
</div>
@@ -89,7 +89,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-badge>
<wa-badge variant="danger" appearance="filled">Filled</wa-badge>
<wa-badge variant="danger" appearance="outlined">Outlined</wa-badge>
</div>
@@ -97,7 +97,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-badge>
<wa-badge class="wa-danger" appearance="filled">Filled</wa-badge>
<wa-badge class="wa-danger" appearance="outlined">Outlined</wa-badge>
</div>
@@ -123,7 +123,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
@@ -132,7 +132,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
@@ -144,7 +144,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
@@ -153,7 +153,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
@@ -165,7 +165,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
@@ -174,7 +174,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
@@ -186,7 +186,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
@@ -195,7 +195,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
@@ -207,7 +207,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
@@ -216,7 +216,7 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
@@ -246,9 +246,9 @@
<wa-icon slot="icon" name="circle-star"></wa-icon>
Accent
</wa-callout>
<wa-callout variant="brand" appearance="filled outlined">
<wa-callout variant="brand" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-star"></wa-icon>
Filled + Outlined
Filled-Outlined
</wa-callout>
<wa-callout variant="brand" appearance="filled">
<wa-icon slot="icon" name="circle-star"></wa-icon>
@@ -270,9 +270,9 @@
<wa-icon slot="icon" name="circle-star"></wa-icon>
Accent
</wa-callout>
<wa-callout class="wa-brand" appearance="filled outlined">
<wa-callout class="wa-brand" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-star"></wa-icon>
Filled + Outlined
Filled-Outlined
</wa-callout>
<wa-callout class="wa-brand" appearance="filled">
<wa-icon slot="icon" name="circle-star"></wa-icon>
@@ -297,9 +297,9 @@
<wa-icon slot="icon" name="circle-info"></wa-icon>
Accent
</wa-callout>
<wa-callout variant="neutral" appearance="filled outlined">
<wa-callout variant="neutral" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-info"></wa-icon>
Filled + Outlined
Filled-Outlined
</wa-callout>
<wa-callout variant="neutral" appearance="filled">
<wa-icon slot="icon" name="circle-info"></wa-icon>
@@ -321,9 +321,9 @@
<wa-icon slot="icon" name="circle-info"></wa-icon>
Accent
</wa-callout>
<wa-callout class="wa-neutral" appearance="filled outlined">
<wa-callout class="wa-neutral" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-info"></wa-icon>
Filled + Outlined
Filled-Outlined
</wa-callout>
<wa-callout class="wa-neutral" appearance="filled">
<wa-icon slot="icon" name="circle-info"></wa-icon>
@@ -348,9 +348,9 @@
<wa-icon slot="icon" name="circle-check"></wa-icon>
Accent
</wa-callout>
<wa-callout variant="success" appearance="filled outlined">
<wa-callout variant="success" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-check"></wa-icon>
Filled + Outlined
Filled-Outlined
</wa-callout>
<wa-callout variant="success" appearance="filled">
<wa-icon slot="icon" name="circle-check"></wa-icon>
@@ -372,9 +372,9 @@
<wa-icon slot="icon" name="circle-check"></wa-icon>
Accent
</wa-callout>
<wa-callout class="wa-success" appearance="filled outlined">
<wa-callout class="wa-success" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-check"></wa-icon>
Filled + Outlined
Filled-Outlined
</wa-callout>
<wa-callout class="wa-success" appearance="filled">
<wa-icon slot="icon" name="circle-check"></wa-icon>
@@ -399,9 +399,9 @@
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
Accent
</wa-callout>
<wa-callout variant="warning" appearance="filled outlined">
<wa-callout variant="warning" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
Filled + Outlined
Filled-Outlined
</wa-callout>
<wa-callout variant="warning" appearance="filled">
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
@@ -423,9 +423,9 @@
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
Accent
</wa-callout>
<wa-callout class="wa-warning" appearance="filled outlined">
<wa-callout class="wa-warning" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
Filled + Outlined
Filled-Outlined
</wa-callout>
<wa-callout class="wa-warning" appearance="filled">
<wa-icon slot="icon" name="circle-exclamation"></wa-icon>
@@ -450,9 +450,9 @@
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
Accent
</wa-callout>
<wa-callout variant="danger" appearance="filled outlined">
<wa-callout variant="danger" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
Filled + Outlined
Filled-Outlined
</wa-callout>
<wa-callout variant="danger" appearance="filled">
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
@@ -474,9 +474,9 @@
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
Accent
</wa-callout>
<wa-callout class="wa-danger" appearance="filled outlined">
<wa-callout class="wa-danger" appearance="filled-outlined">
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
Filled + Outlined
Filled-Outlined
</wa-callout>
<wa-callout class="wa-danger" appearance="filled">
<wa-icon slot="icon" name="circle-xmark"></wa-icon>
@@ -513,19 +513,17 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-tag>
<wa-tag variant="brand" appearance="filled">Filled</wa-tag>
<wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
<wa-tag variant="brand" appearance="plain">Plain</wa-tag>
</div>
</td>
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
</div>
</td>
</tr>
@@ -534,19 +532,17 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-tag>
<wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
<wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
<wa-tag variant="neutral" appearance="plain">Plain</wa-tag>
</div>
</td>
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
</div>
</td>
</tr>
@@ -555,19 +551,17 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-tag>
<wa-tag variant="success" appearance="filled">Filled</wa-tag>
<wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
<wa-tag variant="success" appearance="plain">Plain</wa-tag>
</div>
</td>
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
</div>
</td>
</tr>
@@ -576,19 +570,17 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-tag>
<wa-tag variant="warning" appearance="filled">Filled</wa-tag>
<wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
<wa-tag variant="warning" appearance="plain">Plain</wa-tag>
</div>
</td>
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
</div>
</td>
</tr>
@@ -597,19 +589,17 @@
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</wa-tag>
<wa-tag variant="danger" appearance="filled">Filled</wa-tag>
<wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
<wa-tag variant="danger" appearance="plain">Plain</wa-tag>
</div>
</td>
<td>
<div class="wa-cluster wa-gap-2xs">
<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">Filled-Outlined</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>
</div>
</td>
</tr>

24
packages/webawesome/docs/_includes/visual-tests/native.njk
View File

@@ -39,14 +39,14 @@
</td>
</tr>
<tr>
<th><code>filled</code> + <code>outlined</code></th>
<th><code>filled-outlined</code></th>
<td>
<div class="wa-cluster wa-gap-2xs">
<wa-button variant="brand" appearance="filled outlined">Brand</wa-button>
<wa-button variant="neutral" appearance="filled outlined">Neutral</wa-button>
<wa-button variant="success" appearance="filled outlined">Success</wa-button>
<wa-button variant="warning" appearance="filled outlined">Warning</wa-button>
<wa-button variant="danger" appearance="filled outlined">Danger</wa-button>
<wa-button variant="brand" appearance="filled-outlined">Brand</wa-button>
<wa-button variant="neutral" appearance="filled-outlined">Neutral</wa-button>
<wa-button variant="success" appearance="filled-outlined">Success</wa-button>
<wa-button variant="warning" appearance="filled-outlined">Warning</wa-button>
<wa-button variant="danger" appearance="filled-outlined">Danger</wa-button>
</div>
</td>
<td>
@@ -429,7 +429,7 @@
</wa-select>
</td>
<td>
<label>Select
<label>Select
<select value="1">
<option value="1">Option</option>
</select>
@@ -444,7 +444,7 @@
</wa-select>
</td>
<td>
<label>Select (filled)
<label>Select (filled)
<select class="wa-filled" value="1">
<option value="1">Option</option>
</select>
@@ -459,7 +459,7 @@
</wa-select>
</td>
<td>
<label class="wa-size-s">Select (small)
<label class="wa-size-s">Select (small)
<select value="1">
<option value="1">Option</option>
</select>
@@ -474,7 +474,7 @@
</wa-select>
</td>
<td>
<label class="wa-size-m">Select (medium)
<label class="wa-size-m">Select (medium)
<select value="1">
<option value="1">Option</option>
</select>
@@ -489,7 +489,7 @@
</wa-select>
</td>
<td>
<label class="wa-size-l">Select (large)
<label class="wa-size-l">Select (large)
<select value="1">
<option value="1">Option</option>
</select>
@@ -582,4 +582,4 @@
</tr>
</tbody>
</table>
</div>
</div>

17
packages/webawesome/docs/assets/styles/docs.css
View File

@@ -181,6 +181,12 @@ wa-page > header {
}
}
li wa-badge {
/* adding 1 scale below --wa-font-size-2xs to handle badge proportions in sidebar nav */
--font-size-3xs: round(calc(var(--wa-font-size-2xs) / 1.125), 1px); /* 10px */
font-size: var(--font-size-3xs);
}
wa-details {
--show-duration: 0;
--hide-duration: 0;
@@ -199,6 +205,12 @@ wa-page > header {
}
}
}
#version-icon-info {
--secondary-opacity: 1;
--secondary-color: var(--wa-brand-orange);
padding-inline: var(--wa-space-xs);
}
}
wa-button.delete {
@@ -218,6 +230,11 @@ wa-button.delete {
}
}
/* planned sidebar item */
.is-planned {
color: var(--wa-color-text-quiet);
}
#sidebar-close-button {
display: none;
}

61
packages/webawesome/docs/assets/styles/utils.css
View File

@@ -73,7 +73,17 @@
color: white;
background-color: var(--wa-brand-orange);
border-color: var(--wa-brand-orange);
text-transform: uppercase;
+ wa-tooltip {
font-size: var(--wa-font-size-xs);
--max-width: unset;
}
}
/* planned badge */
wa-badge.planned {
background-color: var(--wa-color-neutral-fill-quiet);
color: var(--wa-color-neutral-on-quiet);
+ wa-tooltip {
font-size: var(--wa-font-size-xs);
@@ -110,7 +120,49 @@
/* #endregion */
/* #region funsies */
/* #region funsies + cosmetics */
/* 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);
}
/* #endregion */
/* buttons with icon toggle on hover */
wa-button .icon-hover {
display: none;
@@ -154,5 +206,10 @@
wa-icon.icon-embiggen {
font-size: round(1.125em, 1px);
}
/* decreasing visual size of icons in certain contexts (such as in sidebar nav) */
wa-icon.icon-shrink {
font-size: round(0.875em, 1px);
}
/* #endregion */
}

10
packages/webawesome/docs/docs/components/badge.md
View File

@@ -30,31 +30,31 @@ Use the `appearance` attribute to change the badge's visual appearance.
```html {.example}
<div style="margin-block-end: 1rem;">
<wa-badge appearance="accent" variant="neutral">Accent</wa-badge>
<wa-badge appearance="filled outlined" variant="neutral">Filled + Outlined</wa-badge>
<wa-badge appearance="filled-outlined" variant="neutral">Filled-Outlined</wa-badge>
<wa-badge appearance="filled" variant="neutral">Filled</wa-badge>
<wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="accent" variant="brand">Accent</wa-badge>
<wa-badge appearance="filled outlined" variant="brand">Filled + Outlined</wa-badge>
<wa-badge appearance="filled-outlined" variant="brand">Filled-Outlined</wa-badge>
<wa-badge appearance="filled" variant="brand">Filled</wa-badge>
<wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="accent" variant="success">Accent</wa-badge>
<wa-badge appearance="filled outlined" variant="success">Filled + Outlined</wa-badge>
<wa-badge appearance="filled-outlined" variant="success">Filled-Outlined</wa-badge>
<wa-badge appearance="filled" variant="success">Filled</wa-badge>
<wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
</div>
<div style="margin-block-end: 1rem;">
<wa-badge appearance="accent" variant="warning">Accent</wa-badge>
<wa-badge appearance="filled outlined" variant="warning">Filled + Outlined</wa-badge>
<wa-badge appearance="filled-outlined" variant="warning">Filled-Outlined</wa-badge>
<wa-badge appearance="filled" variant="warning">Filled</wa-badge>
<wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
</div>
<div>
<wa-badge appearance="accent" variant="danger">Accent</wa-badge>
<wa-badge appearance="filled outlined" variant="danger">Filled + Outlined</wa-badge>
<wa-badge appearance="filled-outlined" variant="danger">Filled-Outlined</wa-badge>
<wa-badge appearance="filled" variant="danger">Filled</wa-badge>
<wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
</div>

10
packages/webawesome/docs/docs/components/button.md
View File

@@ -31,35 +31,35 @@ Use the `appearance` attribute to change the button's visual appearance.
<div class="wa-stack">
<div class="wa-gap-2xs">
<wa-button appearance="accent" variant="neutral">Accent</wa-button>
<wa-button appearance="filled outlined" variant="neutral">Filled + Outlined</wa-button>
<wa-button appearance="filled-outlined" variant="neutral">Filled-Outlined</wa-button>
<wa-button appearance="filled" variant="neutral">Filled</wa-button>
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
<wa-button appearance="plain" variant="neutral">Plain</wa-button>
</div>
<div class="wa-gap-2xs">
<wa-button appearance="accent" variant="brand">Accent</wa-button>
<wa-button appearance="filled outlined" variant="brand">Filled + Outlined</wa-button>
<wa-button appearance="filled-outlined" variant="brand">Filled-Outlined</wa-button>
<wa-button appearance="filled" variant="brand">Filled</wa-button>
<wa-button appearance="outlined" variant="brand">Outlined</wa-button>
<wa-button appearance="plain" variant="brand">Plain</wa-button>
</div>
<div class="wa-gap-2xs">
<wa-button appearance="accent" variant="success">Accent</wa-button>
<wa-button appearance="filled outlined" variant="success">Filled + Outlined</wa-button>
<wa-button appearance="filled-outlined" variant="success">Filled-Outlined</wa-button>
<wa-button appearance="filled" variant="success">Filled</wa-button>
<wa-button appearance="outlined" variant="success">Outlined</wa-button>
<wa-button appearance="plain" variant="success">Plain</wa-button>
</div>
<div class="wa-gap-2xs">
<wa-button appearance="accent" variant="warning">Accent</wa-button>
<wa-button appearance="filled outlined" variant="warning">Filled + Outlined</wa-button>
<wa-button appearance="filled-outlined" variant="warning">Filled-Outlined</wa-button>
<wa-button appearance="filled" variant="warning">Filled</wa-button>
<wa-button appearance="outlined" variant="warning">Outlined</wa-button>
<wa-button appearance="plain" variant="warning">Plain</wa-button>
</div>
<div class="wa-gap-2xs">
<wa-button appearance="accent" variant="danger">Accent</wa-button>
<wa-button appearance="filled outlined" variant="danger">Filled + Outlined</wa-button>
<wa-button appearance="filled-outlined" variant="danger">Filled-Outlined</wa-button>
<wa-button appearance="filled" variant="danger">Filled</wa-button>
<wa-button appearance="outlined" variant="danger">Outlined</wa-button>
<wa-button appearance="plain" variant="danger">Plain</wa-button>

4
packages/webawesome/docs/docs/components/callout.md
View File

@@ -60,7 +60,7 @@ Set the `variant` attribute to change the callout's variant.
### Appearance
Use the `appearance` attribute to change the callout's visual appearance (the default is `outlined filled`).
Use the `appearance` attribute to change the callout's visual appearance (the default is `filled-outlined`).
```html {.example}
<wa-callout variant="brand" appearance="accent">
@@ -70,7 +70,7 @@ Use the `appearance` attribute to change the callout's visual appearance (the de
<br />
<wa-callout variant="brand" appearance="outlined filled">
<wa-callout variant="brand" appearance="filled-outlined">
<wa-icon slot="icon" name="fill-drip" variant="regular"></wa-icon>
This callout is both <strong>filled</strong> and <strong>outlined</strong>
</wa-callout>

2
packages/webawesome/docs/docs/components/card.md
View File

@@ -137,7 +137,7 @@ Use the `appearance` attribute to change the card's visual appearance.
/>
Outlined (default)
</wa-card>
{% for appearance in ['outlined filled', 'plain', 'filled', 'accent'] -%}
{% for appearance in ['filled-outlined', 'plain', 'filled', 'accent'] -%}
<wa-card appearance="{{ appearance }}">
<img
slot="media"

2
packages/webawesome/docs/docs/components/details.md
View File

@@ -108,7 +108,7 @@ Use the `appearance` attribute to change the element’s visual appearance.
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</wa-details>
<wa-details summary="Filled + Outlined" appearance="filled outlined">
<wa-details summary="Filled-outlined" appearance="filled-outlined">
Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna
aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</wa-details>

4
packages/webawesome/docs/docs/components/input.md
View File

@@ -60,7 +60,9 @@ Add the `password-toggle` attribute to add a toggle button that will show the pa
Use the `appearance` attribute to change the input's visual appearance.
```html {.example}
<wa-input placeholder="Type something" appearance="filled"></wa-input>
<wa-input placeholder="Type something" appearance="filled"></wa-input><br />
<wa-input placeholder="Type something" appearance="filled-outlined"></wa-input><br />
<wa-input placeholder="Type something" appearance="outlined"></wa-input>
```
### Disabled

12
packages/webawesome/docs/docs/components/select.md
View File

@@ -80,6 +80,18 @@ Use the `appearance` attribute to change the select's visual appearance.
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
</wa-select>
<br />
<wa-select appearance="filled-outlined">
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
</wa-select>
<br />
<wa-select appearance="outlined">
<wa-option value="option-1">Option 1</wa-option>
<wa-option value="option-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option>
</wa-select>
```
### Pill

13
packages/webawesome/docs/docs/components/tag.md
View File

@@ -18,41 +18,40 @@ category: Feedback & Status
### Appearance
Use the `size` attribute to change a tag's visual appearance.
The default appearance is `outlined filled`.
The default appearance is `filled-outlined`.
```html {.example}
<div class="wa-stack">
<p>
<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">Filled-Outlined</wa-tag>
<wa-tag variant="brand" appearance="filled">Filled</wa-tag>
<wa-tag variant="brand" appearance="outlined">Outlined</wa-tag>
</p>
<p>
<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">Filled-Outlined</wa-tag>
<wa-tag variant="success" appearance="filled">Filled</wa-tag>
<wa-tag variant="success" appearance="outlined">Outlined</wa-tag>
</p>
<p>
<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">Filled-Outlined</wa-tag>
<wa-tag variant="neutral" appearance="filled">Filled</wa-tag>
<wa-tag variant="neutral" appearance="outlined">Outlined</wa-tag>
</p>
<p>
<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">Filled-Outlined</wa-tag>
<wa-tag variant="warning" appearance="filled">Filled</wa-tag>
<wa-tag variant="warning" appearance="outlined">Outlined</wa-tag>
</p>
<p>
<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">Filled-Outlined</wa-tag>
<wa-tag variant="danger" appearance="filled">Filled</wa-tag>
<wa-tag variant="danger" appearance="outlined">Outlined</wa-tag>
</p>

4
packages/webawesome/docs/docs/components/textarea.md
View File

@@ -52,7 +52,9 @@ Use the `placeholder` attribute to add a placeholder.
Use the `appearance` attribute to change the textarea's visual appearance.
```html {.example}
<wa-textarea placeholder="Type something" appearance="filled"></wa-textarea>
<wa-textarea placeholder="Type something" appearance="filled"></wa-textarea><br />
<wa-textarea placeholder="Type something" appearance="filled-outlined"></wa-textarea><br />
<wa-textarea placeholder="Type something" appearance="outlined"></wa-textarea>
```
### Disabled

24
packages/webawesome/docs/docs/customizing.md
View File

@@ -10,7 +10,7 @@ You can customize the look and feel of Web Awesome at a high level with themes.
Web Awesome uses [themes](/docs/themes) to apply a cohesive look and feel across the entire library. Themes are built with a collection of predefined CSS custom properties, which we call [design tokens](/docs/tokens), and there are many premade themes you can choose from.
To use a theme, simply add a link to the theme's stylesheet to the `<head>` of your page. For example, you can add this snippet alongside th [installation code](/docs/#quick-start-autoloading-via-cdn) to use the *Awesome* theme:
To use a theme, simply add a link to the theme's stylesheet to the `<head>` of your page. For example, you can add this snippet alongside th [installation code](/docs/#quick-start-autoloading-via-cdn) to use the _Awesome_ theme:
```html
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" />
@@ -87,7 +87,7 @@ Custom states can be combined with CSS parts and custom properties to create sop
CSS parts offer further flexibility to customize individual components. The "parts" exposed by each component can be targeted with the [CSS part selector](https://developer.mozilla.org/en-US/docs/Web/CSS/::part), or `::part()`.
Parts allow you to style *any* standard CSS property, not just those exposed through custom properties. Here's an example that modifies buttons with the `gradient-button` class.
Parts allow you to style _any_ standard CSS property, not just those exposed through custom properties. Here's an example that modifies buttons with the `gradient-button` class.
```html {.example}
<wa-button class="gradient-button"> Gradient Button </wa-button>
@@ -96,7 +96,9 @@ Parts allow you to style *any* standard CSS property, not just those exposed thr
.gradient-button::part(base) {
background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50));
border: solid 1px var(--wa-color-purple-50);
transition: transform 100ms, box-shadow 100ms;
transition:
transform 100ms,
box-shadow 100ms;
}
.gradient-button::part(base):hover {
@@ -131,6 +133,7 @@ Most (but not all) components expose parts. You can find them in each component'
If you're using [native styles](/docs/utilities/native), any custom styles added for a component should also target the corresponding native element. In general, the same styles you declare for components will work just the same to style their native counterparts.
For example, we can give `<input type="checkbox">` the same custom styles as `<wa-checkbox>` by using the custom properties required to style the component:
```html {.example}
<wa-checkbox class="pinkify">Web Awesome checkbox</wa-checkbox>
<br />
@@ -141,7 +144,7 @@ For example, we can give `<input type="checkbox">` the same custom styles as `<w
<style>
wa-checkbox.pinkify,
input[type="checkbox"].pinkify {
input[type='checkbox'].pinkify {
--background-color-checked: hotpink;
--border-color-checked: hotpink;
--border-width: 3px;
@@ -151,6 +154,7 @@ For example, we can give `<input type="checkbox">` the same custom styles as `<w
```
Or, if using CSS parts, we can give both checkboxes the same custom styles using standard CSS properties:
```html {.example}
<wa-checkbox class="purpleify">Web Awesome checkbox</wa-checkbox>
<br />
@@ -161,12 +165,12 @@ Or, if using CSS parts, we can give both checkboxes the same custom styles using
<style>
wa-checkbox.purpleify::part(control),
input[type="checkbox"].purpleify {
input[type='checkbox'].purpleify {
border-width: 3px;
}
wa-checkbox.purpleify:state(checked)::part(control),
input[type="checkbox"].purpleify:checked {
input[type='checkbox'].purpleify:checked {
background-color: darkorchid;
border-color: darkorchid;
color: lavender;
@@ -174,14 +178,14 @@ Or, if using CSS parts, we can give both checkboxes the same custom styles using
</style>
```
## Style Utilities
Similarly, if you're using [style utilities](/docs/utilities), any custom styles added for a specific attribute variation of a component — such as `appearance`, `variant`, or `size` — should also target the corresponding style utility class. This ensures that the attribute and its utility class counterpart work interchangeably.
For example, we can give all outlined callouts a thick left border, regardless of whether they are styled with `appearance="outlined"` or `class="wa-outlined"`:
```html {.example}
<wa-callout appearance="outlined filled">
<wa-callout appearance="filled-outlined">
<wa-icon slot="icon" name="circle-star"></wa-icon>
Here's a callout with <code>appearance="outlined"</code>
</wa-callout>
@@ -191,8 +195,8 @@ For example, we can give all outlined callouts a thick left border, regardless o
</wa-callout>
<style>
wa-callout:is([appearance~="outlined"]) {
wa-callout:is([appearance~='outlined']) {
border-left-width: var(--wa-panel-border-radius);
}
</style>
```
```

37
packages/webawesome/docs/docs/form-controls.md
View File

@@ -52,7 +52,7 @@ To make a field required, use the `required` attribute. Required fields will aut
customElements.whenDefined('wa-input'),
customElements.whenDefined('wa-option'),
customElements.whenDefined('wa-select'),
customElements.whenDefined('wa-textarea')
customElements.whenDefined('wa-textarea'),
]).then(() => {
form.addEventListener('submit', event => {
event.preventDefault();
@@ -78,10 +78,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
const form = document.querySelector('.input-validation-pattern');
// Wait for controls to be defined before attaching form listeners
await Promise.all([
customElements.whenDefined('wa-button'),
customElements.whenDefined('wa-input')
]).then(() => {
await Promise.all([customElements.whenDefined('wa-button'), customElements.whenDefined('wa-input')]).then(() => {
form.addEventListener('submit', event => {
event.preventDefault();
alert('All fields are valid!');
@@ -108,10 +105,7 @@ Some input types will automatically trigger constraints, such as `email` and `ur
const form = document.querySelector('.input-validation-type');
// Wait for controls to be defined before attaching form listeners
await Promise.all([
customElements.whenDefined('wa-button'),
customElements.whenDefined('wa-input')
]).then(() => {
await Promise.all([customElements.whenDefined('wa-button'), customElements.whenDefined('wa-input')]).then(() => {
form.addEventListener('submit', event => {
event.preventDefault();
alert('All fields are valid!');
@@ -137,10 +131,7 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa
const input = form.querySelector('wa-input');
// Wait for controls to be defined before attaching form listeners
await Promise.all([
customElements.whenDefined('wa-button'),
customElements.whenDefined('wa-input')
]).then(() => {
await Promise.all([customElements.whenDefined('wa-button'), customElements.whenDefined('wa-input')]).then(() => {
form.addEventListener('submit', event => {
event.preventDefault();
alert('All fields are valid!');
@@ -163,17 +154,15 @@ Custom validation can be applied to any form control that supports the `setCusto
## Custom Validation Styles
Due to the many ways form controls are used, Web Awesome doesn't provide out of the box validation styles for form controls as part of its default theme. Instead, the following attributes will be applied to reflect a control's validity as users interact with it. You can use them to create custom styles for any of the validation states you're interested in.
Due to the many ways form controls are used, Web Awesome doesn't provide out of the box validation styles for form controls as part of its default theme.
- `required` - the form control is required
- `optional` - the form control is optional
- `invalid` - the form control is invalid
- `valid` - the form control is valid
- `user-invalid` - the form control is invalid and the user has interacted with it
- `user-valid` - the form control is valid and the user has interacted with it
Instead, the following [custom states](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states) will be applied to reflect a control's validity as users interact with it. You can use them to create custom styles for any of the validation states you're interested in.
These attributes map to the browser's built-in pseudo classes for validation: [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required), [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/:optional), [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid), [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid), [`:user-invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid), and [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
- `:state(required)` - the form control is required
- `:state(optional)` - the form control is optional
- `:state(invalid)` - the form control is invalid
- `:state(valid)` - the form control is valid
- `:state(user-invalid)` - the form control is invalid and the user has interacted with it
- `:state(user-valid)` - the form control is valid and the user has interacted with it
:::info
In the future, data attribute selectors will be replaced with custom states such as `:state(valid)` and `:state(invalid)`. Web Awesome is using data attributes as a workaround until browsers fully support [custom states](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states).
:::
These custom states work alongside the browser's built-in pseudo classes for validation: [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required), [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/:optional), [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid), [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid), [`:user-invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid), and [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).

4
packages/webawesome/docs/docs/index.md
View File

@@ -4,7 +4,7 @@ description: Choose the installation method that works best for you.
layout: page-outline
---
Welcome to Web Awesome beta! [Learn more](https://webawesome.com/) about this project and [how to contribute to it](https://webawesome.com/docs/resources/contributing).
Welcome to Web Awesome! [Learn more](https://webawesome.com/) about this project and [how to contribute to it](https://webawesome.com/docs/resources/contributing).
- [Report a bug](https://github.com/shoelace-style/webawesome/issues)
- [Get help / ask a question](https://github.com/shoelace-style/webawesome/discussions)
@@ -212,4 +212,4 @@ declare module 'react' {
:::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.
:::
:::

21
packages/webawesome/docs/docs/resources/changelog.md
View File

@@ -12,10 +12,31 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
## Next
- 🚨 BREAKING: Changed `appearance="filled outlined"` to `appearance="filled-outlined"` in the following elements [issue:1127]
- `<wa-badge>`
- `<wa-button>`
- `<wa-callout>`
- `<wa-details>`
- `<wa-input>`
- `<wa-select>`
- `<wa-tag>`
- `<wa-textarea>`
- Added the Kazakh translation [pr:1496]
- Added docs for code completion for VS Code and JetBrains [pr:1550]
- Added back the missing `form-control-label` part to `<wa-textarea>` for consistency with other form controls [pr:1533]
- Fixed a bug in `<wa-button>` where slotted badges weren't properly positioned in buttons with an `href` [issue:1377]
- Fixed focus outline styles in `<wa-details>` and native `<details>` [issue:1456]
- Fixed focus outline styles in `<wa-scroller>`, `<wa-dialog>`, and `<wa-drawer>` [issue:1484]
- Fixed a bug in `<wa-checkbox>` where its value would revert to `""` when checked / unchecked [pr:1547]
- Fixed a bug that caused icon button labels to not render in frameworks [issue:1542]
- Fixed a bug in `<wa-details>` that caused the `name` property not to reflect [pr:1538]
- Fixed a bug in `<wa-dialog>` and `<wa-drawer>` that prevented focus from being set on the dialog/drawer when opened [issue:1302]
- Fixed an overflow style that was causing tab group content to be unnecessarily truncated [issue:1401]
- Fixed a bug in `<wa-icon>` that caused icon buttons to render when non-text nodes were slotted in [issue:1475]
- Fixed a bug in `<wa-tooltip>` that prevented tooltips from showing when disconnecting and then reconnecting to the DOM [issue:1595]
- Fixed a bug that caused the required `*` in form labels to have incorrect spacing in `<wa-checkbox>` and `<wa-switch>` [issue:1472]
- Improved autofill styles in `<wa-input>` so they span the entire width of the visual input [issue:1439]
- Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
## 3.0.0-beta.6

51
packages/webawesome/docs/docs/usage.md
View File

@@ -174,3 +174,54 @@ This time we see an empty string, which means the boolean attribute is now prese
:::info
To wait for multiple components to update, you can use `requestAnimationFrame()` instead of awaiting each element.
:::
## Code Completion
### VS Code
Web Awesome ships with a file called `vscode.html-custom-data.json` that can be used to describe its custom elements to [Visual Studio Code](https://code.visualstudio.com/). This enables code completion for Web Awesome components (also known as “code hinting” or “IntelliSense”). To enable it, you need to tell VS Code where the file is.
1. [Install Web Awesome locally](/docs/#installing-via-npm)
2. If it doesn’t already exist, create a folder called `.vscode` at the root of your project
3. If it doesn’t already exist, create a file inside that folder called `settings.json`
4. Add the following to the file
```json
{
"html.customData": ["./node_modules/@awesome.me/webawesome/dist/vscode.html-custom-data.json"]
}
```
If `settings.json` already exists, simply add the above line to the root of the object. Note that you may need to restart VS Code for the changes to take effect.
If you are using WebAwesome through the [CDN](/docs/#quick-start-autoloading-via-cdn) you can manually [download the file]({% cdnUrl 'vscode.html-custom-data.json' %}]({% cdnUrl 'vscode.html-custom-data.json' %}) instead.
### JetBrains IDEs
If you are using a [JetBrains IDE](https://www.jetbrains.com/) and you are installing Web Awesome from NPM, the editor will automatically detect the web-types.json file from the package and you should immediately see component information in your editor.
If you are installing from the CDN, you can [download a local copy]({% cdnUrl 'web-types.json' %}) and add it to the root of your project. Be sure to add a reference to the web-types.json file in your package.json in order for your editor to properly detect it.
```json
{
...
"web-types": "./web-types.json"
...
}
```
If you are using types from multiple projects, you can add an array of references.
```json
{
...
"web-types": [
...,
"./web-types.json"
]
...
}
```
### 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!

2
packages/webawesome/docs/examples/themes/showcase.njk
View File

@@ -299,7 +299,7 @@ layout: false
<dt class="wa-heading-s">Amount</dt>
<dd class="wa-heading-l">$5,610.00</dd>
</dl>
<wa-badge appearance="filled outlined" variant="success">Paid</wa-badge>
<wa-badge appearance="filled-outlined" variant="success">Paid</wa-badge>
</div>
<wa-divider></wa-divider>
<dl class="wa-stack">

75
packages/webawesome/docs/index.md
View File

@@ -182,25 +182,6 @@ layout: page
}
}
}
.beta-notice {
display: flex;
flex-wrap: wrap;
gap: 1rem;
& > * {
flex-basis: calc(((30ch * 2 + 1rem) - 100%) * 999);
}
& > * {
flex-grow: 2;
}
& > * + * {
flex-grow: 1;
}
& wa-callout,
& wa-button::part(base) {
height: 100%;
width: 100%;
}
}
wa-button.tile::part(base) {
border-color: var(--wa-color-surface-border);
border-radius: 0.75rem;
@@ -257,11 +238,22 @@ layout: page
{% if currentUser.hasPro %}
<span style="text-align: center; width: 100%; font-size: var(--wa-font-size-l);">Thanks for being a Web Awesome Pro subscriber!</span>
{% else %}
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price &mdash; but not for long. Get in while the gettin’s good.</span>
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
<wa-icon slot="start" name="person-running"></wa-icon>
Pre-order WA Pro
</wa-button>
{% if App.flags.stripeEnabled %}
<div class="wa-stack wa-gap-xs">
<h3 class="wa-heading-s">Get More with Web Awesome Pro!</h3>
<p>Unlock Pro-only themes, components, patterns, and great services like the Theme Builder.</p>
</div>
<wa-button class="wa-dark" size="small" href="/purchase">
<wa-icon slot="start" name="rocket-launch"></wa-icon>
Purchase Pro
</wa-button>
{% else %}
<span><em>Psst!</em> You can pre-order Web Awesome Pro at a low, guaranteed-for-life price &mdash; but not for long. Get in while the gettin’s good.</span>
<wa-button class="wa-dark" size="small" href="https://www.kickstarter.com/projects/fontawesome/web-awesome">
<wa-icon slot="start" name="person-running"></wa-icon>
Pre-order WA Pro
</wa-button>
{% endif %}
{% endif %}
{% endraw %}
</div>
@@ -269,33 +261,18 @@ layout: page
</div>
<div class="home-wrapper">
<div class="beta-notice">
<div>
<wa-callout variant="brand">
<div class="wa-stack">
<div class="wa-cluster icon-heading">
<wa-icon name="sparkles" variant="regular"></wa-icon>
<h3>Bigger and beta than ever</h3>
</div>
<p>This beta is battle-tested and built to last, but if you see something, say something. Please <a href="https://github.com/shoelace-style/webawesome/issues">report bugs</a> or <a href="https://github.com/shoelace-style/webawesome/discussions">ask for help</a>!</p>
<wa-button href="/docs/" appearance="outlined" class="tile">
<div class="wa-stack">
<div class="wa-split">
<div class="wa-cluster icon-heading">
<wa-icon name="pen-ruler" class="brand-orange"></wa-icon>
<h3>Get started</h3>
</div>
</wa-callout>
<wa-icon name="arrow-right"></wa-icon>
</div>
<p>Check out our installation guide to start building with Web Awesome.</p>
</div>
<div>
<wa-button href="/docs/" appearance="outlined" class="tile">
<div class="wa-stack">
<div class="wa-split">
<div class="wa-cluster icon-heading">
<wa-icon name="pen-ruler" class="brand-orange"></wa-icon>
<h3>Get started</h3>
</div>
<wa-icon name="arrow-right"></wa-icon>
</div>
<p>Check out our installation guide to start building with Web Awesome.</p>
</div>
</wa-button>
</div>
</div>
</wa-button>
<wa-divider></wa-divider>
<div class="summary">
<h2 class="brand-font">What's <span class="emphasis">Web</span> Awesome?</h2>

4
packages/webawesome/scripts/build.js
View File

@@ -18,6 +18,7 @@ import { getCdnDir, getDistDir, getDocsDir, getRootDir, getSiteDir } from './uti
const __dirname = dirname(fileURLToPath(import.meta.url));
const currentYear = new Date().getFullYear();
const spinner = ora({ text: 'Web Awesome', color: 'cyan' }).start();
const getPackageData = async () => JSON.parse(await readFile(join(getRootDir(), 'package.json'), 'utf-8'));
const getVersion = async () => JSON.stringify((await getPackageData()).version.toString());
@@ -225,6 +226,9 @@ export async function build(options = {}) {
bundle: true,
splitting: true,
minify: false,
banner: {
js: `/*! Copyright ${currentYear} Fonticons, Inc. - https://webawesome.com/license */`,
},
plugins: [replace({ __WEBAWESOME_VERSION__: await getVersion() })],
loader: {
'.css': 'text',

10
packages/webawesome/src/components/badge/badge.css
View File

@@ -21,7 +21,7 @@
}
/* Appearance modifiers */
:host([appearance~='outlined']) {
:host([appearance='outlined']) {
--pulse-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
color: var(--wa-color-on-quiet, var(--wa-color-brand-on-quiet));
@@ -29,7 +29,7 @@
border-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud));
}
:host([appearance~='filled']) {
:host([appearance='filled']) {
--pulse-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
@@ -37,13 +37,15 @@
border-color: transparent;
}
:host([appearance~='filled'][appearance~='outlined']) {
:host([appearance='filled-outlined']) {
--pulse-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-brand-fill-normal));
border-color: var(--wa-color-border-normal, var(--wa-color-brand-border-normal));
}
:host([appearance~='accent']) {
:host([appearance='accent']) {
--pulse-color: var(--wa-color-fill-loud, var(--wa-color-brand-fill-loud));
color: var(--wa-color-on-loud, var(--wa-color-brand-on-loud));

2
packages/webawesome/src/components/badge/badge.ts
View File

@@ -25,7 +25,7 @@ export default class WaBadge extends WebAwesomeElement {
@property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'brand';
/** The badge's visual appearance. */
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' = 'accent';
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'filled-outlined' = 'accent';
/** Draws a pill-style badge with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false;

40
packages/webawesome/src/components/button/button.css
View File

@@ -3,7 +3,7 @@
display: inline-block;
/* Workaround because Chrome doesn't like :host(:has()) below
* https://issues.chromium.org/issues/40062355
* https://issues.chromium.org/issues/40062355
* Firefox doesn't like this nested rule, so both are needed */
&:has(wa-badge) {
position: relative;
@@ -47,7 +47,7 @@
}
/* Appearance modifiers */
:host([appearance~='plain']) {
:host([appearance='plain']) {
.button {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
@@ -69,7 +69,7 @@
}
}
:host([appearance~='outlined']) {
:host([appearance='outlined']) {
.button {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
@@ -91,7 +91,7 @@
}
}
:host([appearance~='filled']) {
:host([appearance='filled']) {
.button {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
@@ -117,11 +117,33 @@
}
}
:host([appearance~='filled'][appearance~='outlined']) .button {
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
:host([appearance='filled-outlined']) {
.button {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal));
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
}
@media (hover: hover) {
.button:not(.disabled):not(.loading):hover {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-hover)
);
}
}
.button:not(.disabled):not(.loading):active {
color: var(--wa-color-on-normal, var(--wa-color-neutral-on-normal));
background-color: color-mix(
in oklab,
var(--wa-color-fill-normal, var(--wa-color-neutral-fill-normal)),
var(--wa-color-mix-active)
);
}
}
:host([appearance~='accent']) {
:host([appearance='accent']) {
.button {
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
@@ -215,7 +237,7 @@
* Caret modifier
*/
wa-icon[part~='caret'] {
wa-icon[part='caret'] {
display: flex;
align-self: center;
align-items: center;
@@ -284,7 +306,7 @@ slot[name='start']::slotted(*) {
}
slot[name='end']::slotted(*),
.button:not(.visually-hidden-label) [part~='caret'] {
.button:not(.visually-hidden-label) [part='caret'] {
margin-inline-start: 0.75em;
}

33
packages/webawesome/src/components/button/button.ts
View File

@@ -11,6 +11,7 @@ import sizeStyles from '../../styles/utilities/size.css';
import variantStyles from '../../styles/utilities/variants.css';
import { LocalizeController } from '../../utilities/localize.js';
import '../icon/icon.js';
import type WaIcon from '../icon/icon.js';
import '../spinner/spinner.js';
import styles from './button.css';
@@ -62,7 +63,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
/** The button's visual appearance. */
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' = 'accent';
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'filled-outlined' | 'plain' = 'accent';
/** The button's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@@ -175,22 +176,32 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
const nodes = this.labelSlot.assignedNodes({ flatten: true });
let hasIconLabel = false;
let hasIcon = false;
let text = '';
let hasText = false;
let hasOtherElements = false;
// If there's only an icon and no text, it's an icon button
// Check all slotted nodes
[...nodes].forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE && (node as HTMLElement).localName === 'wa-icon') {
hasIcon = true;
if (!hasIconLabel) hasIconLabel = (node as HTMLElement).hasAttribute('label');
}
if (node.nodeType === Node.ELEMENT_NODE) {
const element = node as HTMLElement;
// Concatenate text nodes
if (node.nodeType === Node.TEXT_NODE) {
text += node.textContent;
if (element.localName === 'wa-icon') {
hasIcon = true;
if (!hasIconLabel) hasIconLabel = (element as WaIcon).label !== undefined;
} else {
// Any other element type means it's not an icon button
hasOtherElements = true;
}
} else if (node.nodeType === Node.TEXT_NODE) {
// Check if text node has actual content
const text = node.textContent?.trim() || '';
if (text.length > 0) {
hasText = true;
}
}
});
this.isIconButton = text.trim() === '' && hasIcon;
// It's only an icon button if there's an icon and nothing else
this.isIconButton = hasIcon && !hasText && !hasOtherElements;
if (this.isIconButton && !hasIconLabel) {
console.warn(

2
packages/webawesome/src/components/callout/callout.css
View File

@@ -27,7 +27,7 @@
border-color: transparent;
}
:host([appearance~='filled'][appearance~='outlined']) {
:host([appearance~='filled-outlined']) {
border-color: var(--wa-color-border-quiet, var(--wa-color-brand-border-quiet));
}

3
packages/webawesome/src/components/callout/callout.ts
View File

@@ -25,8 +25,7 @@ export default class WaCallout extends WebAwesomeElement {
@property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'brand';
/** The callout's visual appearance. */
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' | 'outlined filled' =
'outlined filled';
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' | 'filled-outlined';
/** The callout's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';

4
packages/webawesome/src/components/checkbox/checkbox.test.ts
View File

@@ -21,7 +21,7 @@ describe('<wa-checkbox>', () => {
const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
expect(el.name).to.equal('');
expect(el.value).to.equal('on');
expect(el.value).to.equal(null);
expect(el.title).to.equal('');
expect(el.disabled).to.be.false;
expect(el.required).to.be.false;
@@ -134,7 +134,7 @@ describe('<wa-checkbox>', () => {
await checkbox.updateComplete;
expect(checkbox.checked).to.equal(false);
expect(checkbox.value).to.equal('myvalue');
expect(checkbox.value).to.equal(null);
expect(new FormData(form).get('test')).to.equal(null);
checkbox.checked = true;

3
packages/webawesome/src/components/checkbox/checkbox.ts
View File

@@ -80,7 +80,8 @@ export default class WaCheckbox extends WebAwesomeFormAssociatedElement {
/** The value of the checkbox, submitted as a name/value pair with form data. */
get value(): string | null {
return this._value ?? 'on';
const val = this._value || 'on';
return this.checked ? val : null;
}
@property({ reflect: true })

14
packages/webawesome/src/components/details/details.css
View File

@@ -26,29 +26,27 @@ details {
}
/* Appearance modifiers */
:host([appearance~='plain']) details {
:host([appearance='plain']) details {
background-color: transparent;
border-color: transparent;
border-radius: 0;
}
:host([appearance~='outlined']) details {
:host([appearance='outlined']) details {
background-color: var(--wa-color-surface-default);
border-color: var(--wa-color-surface-border);
}
:host([appearance~='filled']) details {
:host([appearance='filled']) details {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: transparent;
}
:host([appearance~='filled'][appearance~='outlined']) details {
:host([appearance='filled-outlined']) details {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-color-neutral-border-quiet);
}
:host([appearance='plain']) details {
border-radius: 0;
}
:host([disabled]) details {
opacity: 0.5;
cursor: not-allowed;

7
packages/webawesome/src/components/details/details.test.ts
View File

@@ -24,6 +24,13 @@ describe('<wa-details>', () => {
});
});
it('should reflect the name property', async () => {
const el = await fixture<WaDetails>(html`<wa-details></wa-details>`);
el.name = 'test';
await el.updateComplete;
expect(el.getAttribute('name')).to.equal('test');
});
it('should be visible with the open attribute', async () => {
const el = await fixture<WaDetails>(html`
<wa-details open>

4
packages/webawesome/src/components/details/details.ts
View File

@@ -70,13 +70,13 @@ export default class WaDetails extends WebAwesomeElement {
@property() summary: string;
/** Groups related details elements. When one opens, others with the same name will close. */
@property() name: string;
@property({ reflect: true }) name: string;
/** Disables the details so it can't be toggled. */
@property({ type: Boolean, reflect: true }) disabled = false;
/** The element's visual appearance. */
@property({ reflect: true }) appearance: 'filled' | 'outlined' | 'plain' = 'outlined';
@property({ reflect: true }) appearance: 'filled' | 'outlined' | 'filled-outlined' | 'plain' = 'outlined';
/** The location of the expand/collapse icon. */
@property({ attribute: 'icon-placement', reflect: true }) iconPlacement: 'start' | 'end' = 'end';

2
packages/webawesome/src/components/dialog/dialog.ts
View File

@@ -197,6 +197,8 @@ export default class WaDialog extends WebAwesomeElement {
const elementToFocus = this.querySelector<HTMLButtonElement>('[autofocus]');
if (elementToFocus && typeof elementToFocus.focus === 'function') {
elementToFocus.focus();
} else {
this.dialog.focus();
}
});

2
packages/webawesome/src/components/drawer/drawer.ts
View File

@@ -210,6 +210,8 @@ export default class WaDrawer extends WebAwesomeElement {
const elementToFocus = this.querySelector<HTMLButtonElement>('[autofocus]');
if (elementToFocus && typeof elementToFocus.focus === 'function') {
elementToFocus.focus();
} else {
this.drawer.focus();
}
});

49
packages/webawesome/src/components/input/input.css
View File

@@ -44,17 +44,18 @@
}
/* Appearance modifiers */
:host([appearance~='outlined']) .text-field {
:host([appearance='outlined']) .text-field {
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
}
:host([appearance~='filled']) .text-field {
:host([appearance='filled']) .text-field {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-color-neutral-fill-quiet);
}
:host([appearance~='filled'][appearance~='outlined']) .text-field {
:host([appearance='filled-outlined']) .text-field {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-form-control-border-color);
}
@@ -62,22 +63,40 @@
border-radius: var(--wa-border-radius-pill) !important;
}
.text-field input,
.text-field textarea {
/*
.text-field {
/* Show autofill styles over the entire text field, not just the native <input> */
&:has(:autofill),
&:has(:-webkit-autofill) {
background-color: var(--wa-color-brand-fill-quiet) !important;
}
input,
textarea {
/*
Fixes an alignment issue with placeholders.
https://github.com/shoelace-style/webawesome/issues/342
*/
height: 100%;
height: 100%;
padding: 0;
border: none;
outline: none;
box-shadow: none;
margin: 0;
cursor: inherit;
-webkit-appearance: none;
font: inherit;
padding: 0;
border: none;
outline: none;
box-shadow: none;
margin: 0;
cursor: inherit;
-webkit-appearance: none;
font: inherit;
/* Turn off Safari's autofill styles */
&:-webkit-autofill,
&:-webkit-autofill:hover,
&:-webkit-autofill:focus,
&:-webkit-autofill:active {
-webkit-background-clip: text;
background-color: transparent;
-webkit-text-fill-color: inherit;
}
}
}
input {

2
packages/webawesome/src/components/input/input.ts
View File

@@ -111,7 +111,7 @@ export default class WaInput extends WebAwesomeFormAssociatedElement {
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** The input's visual appearance. */
@property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';
@property({ reflect: true }) appearance: 'filled' | 'outlined' | 'filled-outlined' = 'outlined';
/** Draws a pill-style input with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false;

2
packages/webawesome/src/components/radio/radio.ts
View File

@@ -47,7 +47,7 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
/** The radio's value. When selected, the radio group will receive this value. */
@property({ reflect: true }) value: string;
/** The radio's value. When selected, the radio group will receive this value. */
/** The radio's visual appearance. */
@property({ reflect: true }) appearance: 'default' | 'button' = 'default';
/**

7
packages/webawesome/src/components/select/select.css
View File

@@ -93,17 +93,18 @@
}
/* Appearance modifiers */
:host([appearance~='outlined']) .combobox {
:host([appearance='outlined']) .combobox {
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
}
:host([appearance~='filled']) .combobox {
:host([appearance='filled']) .combobox {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-color-neutral-fill-quiet);
}
:host([appearance~='filled'][appearance~='outlined']) .combobox {
:host([appearance='filled-outlined']) .combobox {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-form-control-border-color);
}

2
packages/webawesome/src/components/select/select.ts
View File

@@ -229,7 +229,7 @@ export default class WaSelect extends WebAwesomeFormAssociatedElement {
@property({ type: Boolean, reflect: true }) open = false;
/** The select's visual appearance. */
@property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';
@property({ reflect: true }) appearance: 'filled' | 'outlined' | 'filled-outlined' = 'outlined';
/** Draws a pill-style select with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false;

31
packages/webawesome/src/components/slider/slider.ts
View File

@@ -1,6 +1,6 @@
import type { PropertyValues } from 'lit';
import { html } from 'lit';
import { customElement, property, query, queryAll, state } from 'lit/decorators.js';
import { customElement, property, query, state } from 'lit/decorators.js';
import { classMap } from 'lit/directives/class-map.js';
import { DraggableElement } from '../../internal/drag.js';
import { clamp } from '../../internal/math.js';
@@ -99,7 +99,6 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
@query('#thumb-max') thumbMax: HTMLElement;
@query('#track') track: HTMLElement;
@query('#tooltip') tooltip: WaTooltip;
@queryAll('wa-tooltip') tooltips: NodeListOf<WaTooltip>;
/**
* The slider's label. If you need to provide HTML in the label, use the `label` slot instead.
@@ -688,19 +687,29 @@ export default class WaSlider extends WebAwesomeFormAssociatedElement {
}
private showRangeTooltips() {
if (this.withTooltip) {
this.tooltips.forEach(tooltip => {
tooltip.open = true;
});
if (!this.withTooltip) return;
// Show only the active tooltip, hide the other
const tooltipMin = this.shadowRoot?.querySelector('#tooltip-thumb-min') as WaTooltip;
const tooltipMax = this.shadowRoot?.querySelector('#tooltip-thumb-max') as WaTooltip;
if (this.activeThumb === 'min') {
if (tooltipMin) tooltipMin.open = true;
if (tooltipMax) tooltipMax.open = false;
} else if (this.activeThumb === 'max') {
if (tooltipMax) tooltipMax.open = true;
if (tooltipMin) tooltipMin.open = false;
}
}
private hideRangeTooltips() {
if (this.withTooltip) {
this.tooltips.forEach(tooltip => {
tooltip.open = false;
});
}
if (!this.withTooltip) return;
const tooltipMin = this.shadowRoot?.querySelector('#tooltip-thumb-min') as WaTooltip;
const tooltipMax = this.shadowRoot?.querySelector('#tooltip-thumb-max') as WaTooltip;
if (tooltipMin) tooltipMin.open = false;
if (tooltipMax) tooltipMax.open = false;
}
/** Updates the form value submission for range sliders */

1
packages/webawesome/src/components/tab-group/tab-group.css
View File

@@ -27,7 +27,6 @@
.body {
display: block;
overflow: auto;
}
.scroll-button {

10
packages/webawesome/src/components/tag/tag.css
View File

@@ -20,23 +20,25 @@
}
/* Appearance modifiers */
:host([appearance~='outlined']) {
:host([appearance='outlined']) {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent;
border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud));
}
:host([appearance~='filled']) {
:host([appearance='filled']) {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
border-color: transparent;
}
:host([appearance~='filled'][appearance~='outlined']) {
:host([appearance='filled-outlined']) {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
border-color: var(--wa-color-border-normal, var(--wa-color-neutral-border-normal));
}
:host([appearance~='accent']) {
:host([appearance='accent']) {
color: var(--wa-color-on-loud, var(--wa-color-neutral-on-loud));
background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent;

2
packages/webawesome/src/components/tag/tag.ts
View File

@@ -35,7 +35,7 @@ export default class WaTag extends WebAwesomeElement {
@property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'neutral';
/** The tag's visual appearance. */
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'outlined filled' = 'outlined filled';
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'filled-outlined' = 'filled-outlined';
/** The tag's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';

7
packages/webawesome/src/components/textarea/textarea.css
View File

@@ -24,17 +24,18 @@
}
/* Appearance modifiers */
:host([appearance~='outlined']) .textarea {
:host([appearance='outlined']) .textarea {
background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-color);
}
:host([appearance~='filled']) .textarea {
:host([appearance='filled']) .textarea {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-color-neutral-fill-quiet);
}
:host([appearance~='filled'][appearance~='outlined']) .textarea {
:host([appearance='filled-outlined']) .textarea {
background-color: var(--wa-color-neutral-fill-quiet);
border-color: var(--wa-form-control-border-color);
}

4
packages/webawesome/src/components/textarea/textarea.ts
View File

@@ -84,7 +84,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** The textarea's visual appearance. */
@property({ reflect: true }) appearance: 'filled' | 'outlined' = 'outlined';
@property({ reflect: true }) appearance: 'filled' | 'outlined' | 'filled-outlined' = 'outlined';
/** The textarea's label. If you need to display HTML, use the `label` slot instead. */
@property() label = '';
@@ -338,7 +338,7 @@ export default class WaTextarea extends WebAwesomeFormAssociatedElement {
const hasHint = this.hint ? true : !!hasHintSlot;
return html`
<label part="label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
<label part="form-control-label label" class="label" for="input" aria-hidden=${hasLabel ? 'false' : 'true'}>
<slot name="label">${this.label}</slot>
</label>

14
packages/webawesome/src/components/tooltip/tooltip.ts
View File

@@ -101,6 +101,11 @@ export default class WaTooltip extends WebAwesomeElement {
connectedCallback() {
super.connectedCallback();
// Recreate event controller if it was aborted
if (this.eventController.signal.aborted) {
this.eventController = new AbortController();
}
// TODO: This is a hack that I need to revisit [Konnor]
if (this.open) {
this.open = false;
@@ -113,6 +118,15 @@ export default class WaTooltip extends WebAwesomeElement {
if (!this.id) {
this.id = uniqueId('wa-tooltip-');
}
// Re-establish anchor connection after being disconnected
if (this.for && this.anchor) {
this.anchor = null; // force reattach
this.handleForChange();
} else if (this.for) {
// Initial connection
this.handleForChange();
}
}
disconnectedCallback() {

10
packages/webawesome/src/styles/component/form-control.css
View File

@@ -10,12 +10,12 @@
font-weight: var(--wa-form-control-label-font-weight);
line-height: var(--wa-form-control-label-line-height);
margin-block-end: 0.5em;
}
:host([required]) &::after {
content: var(--wa-form-control-required-content);
margin-inline-start: var(--wa-form-control-required-content-offset);
color: var(--wa-form-control-required-content-color);
}
:host([required]) slot:is([name='label'], [part='label'])::after {
content: var(--wa-form-control-required-content);
margin-inline-start: var(--wa-form-control-required-content-offset);
color: var(--wa-form-control-required-content-color);
}
/* Help text */

2
packages/webawesome/src/styles/themes/awesome.css
View File

@@ -332,7 +332,7 @@
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-required-content-offset: 0.1em;
--wa-form-control-padding-block: 1em;
--wa-form-control-padding-inline: 1.25em;

2
packages/webawesome/src/styles/themes/default.css
View File

@@ -326,7 +326,7 @@
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-required-content-offset: 0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;

2
packages/webawesome/src/styles/themes/shoelace.css
View File

@@ -332,7 +332,7 @@
--wa-form-control-required-content: '*';
--wa-form-control-required-content-color: inherit;
--wa-form-control-required-content-offset: -0.1em;
--wa-form-control-required-content-offset: 0.1em;
--wa-form-control-padding-block: 0.75em;
--wa-form-control-padding-inline: 1em;