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 slider-tooltips

Browse Source
This commit is contained in:
Cory LaViska
2025-10-15 11:31:45 -04:00
committed by GitHub
parent a67175c454 f89638bc6d
commit 61adab6532
46 changed files with 646 additions and 256 deletions
Download Patch File Download Diff File Expand all files Collapse all files

3
package-lock.json generated
View File

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

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

@@ -410,12 +410,12 @@
<div class="wa-stack wa-gap-xl" id="colophon"> <div class="wa-stack wa-gap-xl" id="colophon">
<div class="wa-stack wa-gap-xs"> <div class="wa-stack wa-gap-xs">
{% include "logo-simple.njk" %} {% include "logo-simple.njk" %}
<div class="wa-cluster wa-gap-xs"> <h2 class="wa-heading-xs">Web Awesome</h2>
<h2 class="wa-heading-xs">Web Awesome</h2> <p class="wa-caption-s wa-cluster wa-gap-xs">
<wa-badge id="version-beta-badge" variant="orange" appearance="filled" style="font-size: var(--wa-font-size-2xs);">Beta</wa-badge> Version {{ package.version }}
<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> <wa-icon id="version-icon-info" family="duotone" variant="regular" name="party-horn"></wa-icon>
</div> <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 class="wa-caption-s">Version {{ package.version }}</p> </p>
<p class="wa-caption-s">&copy; Fonticons, Inc.</p> <p class="wa-caption-s">&copy; Fonticons, Inc.</p>
</div> </div>

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

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

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

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

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

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

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

@@ -205,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 { wa-button.delete {

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

@@ -111,7 +111,49 @@
} }
/* #endregion */ /* #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 */ /* buttons with icon toggle on hover */
wa-button .icon-hover { wa-button .icon-hover {
display: none; display: none;

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} ```html {.example}
<div style="margin-block-end: 1rem;"> <div style="margin-block-end: 1rem;">
<wa-badge appearance="accent" variant="neutral">Accent</wa-badge> <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="filled" variant="neutral">Filled</wa-badge>
<wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge> <wa-badge appearance="outlined" variant="neutral">Outlined</wa-badge>
</div> </div>
<div style="margin-block-end: 1rem;"> <div style="margin-block-end: 1rem;">
<wa-badge appearance="accent" variant="brand">Accent</wa-badge> <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="filled" variant="brand">Filled</wa-badge>
<wa-badge appearance="outlined" variant="brand">Outlined</wa-badge> <wa-badge appearance="outlined" variant="brand">Outlined</wa-badge>
</div> </div>
<div style="margin-block-end: 1rem;"> <div style="margin-block-end: 1rem;">
<wa-badge appearance="accent" variant="success">Accent</wa-badge> <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="filled" variant="success">Filled</wa-badge>
<wa-badge appearance="outlined" variant="success">Outlined</wa-badge> <wa-badge appearance="outlined" variant="success">Outlined</wa-badge>
</div> </div>
<div style="margin-block-end: 1rem;"> <div style="margin-block-end: 1rem;">
<wa-badge appearance="accent" variant="warning">Accent</wa-badge> <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="filled" variant="warning">Filled</wa-badge>
<wa-badge appearance="outlined" variant="warning">Outlined</wa-badge> <wa-badge appearance="outlined" variant="warning">Outlined</wa-badge>
</div> </div>
<div> <div>
<wa-badge appearance="accent" variant="danger">Accent</wa-badge> <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="filled" variant="danger">Filled</wa-badge>
<wa-badge appearance="outlined" variant="danger">Outlined</wa-badge> <wa-badge appearance="outlined" variant="danger">Outlined</wa-badge>
</div> </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-stack">
<div class="wa-gap-2xs"> <div class="wa-gap-2xs">
<wa-button appearance="accent" variant="neutral">Accent</wa-button> <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="filled" variant="neutral">Filled</wa-button>
<wa-button appearance="outlined" variant="neutral">Outlined</wa-button> <wa-button appearance="outlined" variant="neutral">Outlined</wa-button>
<wa-button appearance="plain" variant="neutral">Plain</wa-button> <wa-button appearance="plain" variant="neutral">Plain</wa-button>
</div> </div>
<div class="wa-gap-2xs"> <div class="wa-gap-2xs">
<wa-button appearance="accent" variant="brand">Accent</wa-button> <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="filled" variant="brand">Filled</wa-button>
<wa-button appearance="outlined" variant="brand">Outlined</wa-button> <wa-button appearance="outlined" variant="brand">Outlined</wa-button>
<wa-button appearance="plain" variant="brand">Plain</wa-button> <wa-button appearance="plain" variant="brand">Plain</wa-button>
</div> </div>
<div class="wa-gap-2xs"> <div class="wa-gap-2xs">
<wa-button appearance="accent" variant="success">Accent</wa-button> <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="filled" variant="success">Filled</wa-button>
<wa-button appearance="outlined" variant="success">Outlined</wa-button> <wa-button appearance="outlined" variant="success">Outlined</wa-button>
<wa-button appearance="plain" variant="success">Plain</wa-button> <wa-button appearance="plain" variant="success">Plain</wa-button>
</div> </div>
<div class="wa-gap-2xs"> <div class="wa-gap-2xs">
<wa-button appearance="accent" variant="warning">Accent</wa-button> <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="filled" variant="warning">Filled</wa-button>
<wa-button appearance="outlined" variant="warning">Outlined</wa-button> <wa-button appearance="outlined" variant="warning">Outlined</wa-button>
<wa-button appearance="plain" variant="warning">Plain</wa-button> <wa-button appearance="plain" variant="warning">Plain</wa-button>
</div> </div>
<div class="wa-gap-2xs"> <div class="wa-gap-2xs">
<wa-button appearance="accent" variant="danger">Accent</wa-button> <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="filled" variant="danger">Filled</wa-button>
<wa-button appearance="outlined" variant="danger">Outlined</wa-button> <wa-button appearance="outlined" variant="danger">Outlined</wa-button>
<wa-button appearance="plain" variant="danger">Plain</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 ### 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} ```html {.example}
<wa-callout variant="brand" appearance="accent"> <wa-callout variant="brand" appearance="accent">
@@ -70,7 +70,7 @@ Use the `appearance` attribute to change the callout's visual appearance (the de
<br /> <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> <wa-icon slot="icon" name="fill-drip" variant="regular"></wa-icon>
This callout is both <strong>filled</strong> and <strong>outlined</strong> This callout is both <strong>filled</strong> and <strong>outlined</strong>
</wa-callout> </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) Outlined (default)
</wa-card> </wa-card>
{% for appearance in ['outlined filled', 'plain', 'filled', 'accent'] -%} {% for appearance in ['filled-outlined', 'plain', 'filled', 'accent'] -%}
<wa-card appearance="{{ appearance }}"> <wa-card appearance="{{ appearance }}">
<img <img
slot="media" 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 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. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</wa-details> </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 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. aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</wa-details> </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. Use the `appearance` attribute to change the input's visual appearance.
```html {.example} ```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 ### 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-2">Option 2</wa-option>
<wa-option value="option-3">Option 3</wa-option> <wa-option value="option-3">Option 3</wa-option>
</wa-select> </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 ### Pill

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

@@ -18,41 +18,40 @@ category: Feedback & Status
### Appearance ### Appearance
Use the `size` attribute to change a tag's visual 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} ```html {.example}
<div class="wa-stack"> <div class="wa-stack">
<p> <p>
<wa-tag variant="brand" appearance="accent">Accent</wa-tag> <wa-tag variant="brand" appearance="accent">Accent</wa-tag>
<wa-tag variant="brand" appearance="filled outlined">Filled + Outlined</wa-tag> <wa-tag variant="brand" appearance="filled-outlined">Filled-Outlined</wa-tag>
<wa-tag variant="brand" appearance="filled">Filled</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="outlined">Outlined</wa-tag>
</p> </p>
<p> <p>
<wa-tag variant="success" appearance="accent">Accent</wa-tag> <wa-tag variant="success" appearance="accent">Accent</wa-tag>
<wa-tag variant="success" appearance="filled outlined">Filled + Outlined</wa-tag> <wa-tag variant="success" appearance="filled-outlined">Filled-Outlined</wa-tag>
<wa-tag variant="success" appearance="filled">Filled</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="outlined">Outlined</wa-tag>
</p> </p>
<p> <p>
<wa-tag variant="neutral" appearance="accent">Accent</wa-tag> <wa-tag variant="neutral" appearance="accent">Accent</wa-tag>
<wa-tag variant="neutral" appearance="filled outlined">Filled + Outlined</wa-tag> <wa-tag variant="neutral" appearance="filled-outlined">Filled-Outlined</wa-tag>
<wa-tag variant="neutral" appearance="filled">Filled</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="outlined">Outlined</wa-tag>
</p> </p>
<p> <p>
<wa-tag variant="warning" appearance="accent">Accent</wa-tag> <wa-tag variant="warning" appearance="accent">Accent</wa-tag>
<wa-tag variant="warning" appearance="filled outlined">Filled + Outlined</wa-tag> <wa-tag variant="warning" appearance="filled-outlined">Filled-Outlined</wa-tag>
<wa-tag variant="warning" appearance="filled">Filled</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="outlined">Outlined</wa-tag>
</p> </p>
<p> <p>
<wa-tag variant="danger" appearance="accent">Accent</wa-tag> <wa-tag variant="danger" appearance="accent">Accent</wa-tag>
<wa-tag variant="danger" appearance="filled outlined">Filled + Outlined</wa-tag> <wa-tag variant="danger" appearance="filled-outlined">Filled-Outlined</wa-tag>
<wa-tag variant="danger" appearance="filled">Filled</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="outlined">Outlined</wa-tag>
</p> </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. Use the `appearance` attribute to change the textarea's visual appearance.
```html {.example} ```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 ### 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. 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 ```html
<link rel="stylesheet" href="{% cdnUrl 'styles/themes/awesome.css' %}" /> <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()`. 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} ```html {.example}
<wa-button class="gradient-button"> Gradient Button </wa-button> <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) { .gradient-button::part(base) {
background: linear-gradient(217deg, var(--wa-color-indigo-50), var(--wa-color-purple-50), var(--wa-color-red-50)); 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); 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 { .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. 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: 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} ```html {.example}
<wa-checkbox class="pinkify">Web Awesome checkbox</wa-checkbox> <wa-checkbox class="pinkify">Web Awesome checkbox</wa-checkbox>
<br /> <br />
@@ -141,7 +144,7 @@ For example, we can give `<input type="checkbox">` the same custom styles as `<w
<style> <style>
wa-checkbox.pinkify, wa-checkbox.pinkify,
input[type="checkbox"].pinkify { input[type='checkbox'].pinkify {
--background-color-checked: hotpink; --background-color-checked: hotpink;
--border-color-checked: hotpink; --border-color-checked: hotpink;
--border-width: 3px; --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: Or, if using CSS parts, we can give both checkboxes the same custom styles using standard CSS properties:
```html {.example} ```html {.example}
<wa-checkbox class="purpleify">Web Awesome checkbox</wa-checkbox> <wa-checkbox class="purpleify">Web Awesome checkbox</wa-checkbox>
<br /> <br />
@@ -161,12 +165,12 @@ Or, if using CSS parts, we can give both checkboxes the same custom styles using
<style> <style>
wa-checkbox.purpleify::part(control), wa-checkbox.purpleify::part(control),
input[type="checkbox"].purpleify { input[type='checkbox'].purpleify {
border-width: 3px; border-width: 3px;
} }
wa-checkbox.purpleify:state(checked)::part(control), wa-checkbox.purpleify:state(checked)::part(control),
input[type="checkbox"].purpleify:checked { input[type='checkbox'].purpleify:checked {
background-color: darkorchid; background-color: darkorchid;
border-color: darkorchid; border-color: darkorchid;
color: lavender; color: lavender;
@@ -174,14 +178,14 @@ Or, if using CSS parts, we can give both checkboxes the same custom styles using
</style> </style>
``` ```
## Style Utilities ## 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. 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"`: 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} ```html {.example}
<wa-callout appearance="outlined filled"> <wa-callout appearance="filled-outlined">
<wa-icon slot="icon" name="circle-star"></wa-icon> <wa-icon slot="icon" name="circle-star"></wa-icon>
Here's a callout with <code>appearance="outlined"</code> Here's a callout with <code>appearance="outlined"</code>
</wa-callout> </wa-callout>
@@ -191,8 +195,8 @@ For example, we can give all outlined callouts a thick left border, regardless o
</wa-callout> </wa-callout>
<style> <style>
wa-callout:is([appearance~="outlined"]) { wa-callout:is([appearance~='outlined']) {
border-left-width: var(--wa-panel-border-radius); border-left-width: var(--wa-panel-border-radius);
} }
</style> </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-input'),
customElements.whenDefined('wa-option'), customElements.whenDefined('wa-option'),
customElements.whenDefined('wa-select'), customElements.whenDefined('wa-select'),
customElements.whenDefined('wa-textarea') customElements.whenDefined('wa-textarea'),
]).then(() => { ]).then(() => {
form.addEventListener('submit', event => { form.addEventListener('submit', event => {
event.preventDefault(); 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'); const form = document.querySelector('.input-validation-pattern');
// Wait for controls to be defined before attaching form listeners // Wait for controls to be defined before attaching form listeners
await Promise.all([ await Promise.all([customElements.whenDefined('wa-button'), customElements.whenDefined('wa-input')]).then(() => {
customElements.whenDefined('wa-button'),
customElements.whenDefined('wa-input')
]).then(() => {
form.addEventListener('submit', event => { form.addEventListener('submit', event => {
event.preventDefault(); event.preventDefault();
alert('All fields are valid!'); 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'); const form = document.querySelector('.input-validation-type');
// Wait for controls to be defined before attaching form listeners // Wait for controls to be defined before attaching form listeners
await Promise.all([ await Promise.all([customElements.whenDefined('wa-button'), customElements.whenDefined('wa-input')]).then(() => {
customElements.whenDefined('wa-button'),
customElements.whenDefined('wa-input')
]).then(() => {
form.addEventListener('submit', event => { form.addEventListener('submit', event => {
event.preventDefault(); event.preventDefault();
alert('All fields are valid!'); 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'); const input = form.querySelector('wa-input');
// Wait for controls to be defined before attaching form listeners // Wait for controls to be defined before attaching form listeners
await Promise.all([ await Promise.all([customElements.whenDefined('wa-button'), customElements.whenDefined('wa-input')]).then(() => {
customElements.whenDefined('wa-button'),
customElements.whenDefined('wa-input')
]).then(() => {
form.addEventListener('submit', event => { form.addEventListener('submit', event => {
event.preventDefault(); event.preventDefault();
alert('All fields are valid!'); 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 ## 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 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.
- `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
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 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).
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).
:::

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 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) - [Report a bug](https://github.com/shoelace-style/webawesome/issues)
- [Get help / ask a question](https://github.com/shoelace-style/webawesome/discussions) - [Get help / ask a question](https://github.com/shoelace-style/webawesome/discussions)
@@ -212,4 +212,4 @@ declare module 'react' {
:::details React 18 and below :::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 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. component's documentation.
::: :::

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

@@ -12,15 +12,28 @@ Components with the <wa-badge variant="warning">Experimental</wa-badge> badge sh
## Next ## 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 the Kazakh translation [pr:1496]
- Added docs for code completion for VS Code and JetBrains [pr:1550] - 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] - 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 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-details>` and native `<details>` [issue:1456]
- Fixed focus outline styles in `<wa-scroller>`, `<wa-dialog>`, and `<wa-drawer>` [issue:1484] - 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 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-details>` that caused the `name` property not to reflect [pr:1538]
- Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320] - Modified `<wa-slider>` to only show the tooltip on the handle being dragged when in range mode [issue:1320]
- 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]
## 3.0.0-beta.6 ## 3.0.0-beta.6
@@ -464,4 +477,4 @@ Many of these changes and improvements were the direct result of feedback from u
</details> </details>
Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions) Did we miss something? [Let us know!](https://github.com/shoelace-style/webawesome/discussions)

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

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

54
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) { wa-button.tile::part(base) {
border-color: var(--wa-color-surface-border); border-color: var(--wa-color-surface-border);
border-radius: 0.75rem; border-radius: 0.75rem;
@@ -280,33 +261,18 @@ layout: page
</div> </div>
<div class="home-wrapper"> <div class="home-wrapper">
<div class="beta-notice"> <wa-button href="/docs/" appearance="outlined" class="tile">
<div> <div class="wa-stack">
<wa-callout variant="brand"> <div class="wa-split">
<div class="wa-stack"> <div class="wa-cluster icon-heading">
<div class="wa-cluster icon-heading"> <wa-icon name="pen-ruler" class="brand-orange"></wa-icon>
<wa-icon name="sparkles" variant="regular"></wa-icon> <h3>Get started</h3>
<h3>Bigger and beta than ever</h3>
</div>
<p>This beta is battle-tested and built to last, but if you see something, say something. Please <a href="https://github.com/shoelace-style/webawesome/issues">report bugs</a> or <a href="https://github.com/shoelace-style/webawesome/discussions">ask for help</a>!</p>
</div> </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>
<div> </wa-button>
<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-divider></wa-divider> <wa-divider></wa-divider>
<div class="summary"> <div class="summary">
<h2 class="brand-font">What's <span class="emphasis">Web</span> Awesome?</h2> <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 __dirname = dirname(fileURLToPath(import.meta.url));
const currentYear = new Date().getFullYear();
const spinner = ora({ text: 'Web Awesome', color: 'cyan' }).start(); const spinner = ora({ text: 'Web Awesome', color: 'cyan' }).start();
const getPackageData = async () => JSON.parse(await readFile(join(getRootDir(), 'package.json'), 'utf-8')); const getPackageData = async () => JSON.parse(await readFile(join(getRootDir(), 'package.json'), 'utf-8'));
const getVersion = async () => JSON.stringify((await getPackageData()).version.toString()); const getVersion = async () => JSON.stringify((await getPackageData()).version.toString());
@@ -225,6 +226,9 @@ export async function build(options = {}) {
bundle: true, bundle: true,
splitting: true, splitting: true,
minify: false, minify: false,
banner: {
js: `/*! Copyright ${currentYear} Fonticons, Inc. - https://webawesome.com/license */`,
},
plugins: [replace({ __WEBAWESOME_VERSION__: await getVersion() })], plugins: [replace({ __WEBAWESOME_VERSION__: await getVersion() })],
loader: { loader: {
'.css': 'text', '.css': 'text',

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

@@ -21,7 +21,7 @@
} }
/* Appearance modifiers */ /* Appearance modifiers */
:host([appearance~='outlined']) { :host([appearance='outlined']) {
--pulse-color: var(--wa-color-border-loud, var(--wa-color-brand-border-loud)); --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)); 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)); 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)); --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)); color: var(--wa-color-on-normal, var(--wa-color-brand-on-normal));
@@ -37,13 +37,15 @@
border-color: transparent; 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)); --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)); 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)); --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)); 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'; @property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'brand';
/** The badge's visual appearance. */ /** 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. */ /** Draws a pill-style badge with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false; @property({ type: Boolean, reflect: true }) pill = false;

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

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

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

@@ -63,7 +63,7 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
@property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral'; @property({ reflect: true }) variant: 'neutral' | 'brand' | 'success' | 'warning' | 'danger' = 'neutral';
/** The button's visual appearance. */ /** 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. */ /** The button's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
@@ -176,22 +176,32 @@ export default class WaButton extends WebAwesomeFormAssociatedElement {
const nodes = this.labelSlot.assignedNodes({ flatten: true }); const nodes = this.labelSlot.assignedNodes({ flatten: true });
let hasIconLabel = false; let hasIconLabel = false;
let hasIcon = 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 => { [...nodes].forEach(node => {
if (node.nodeType === Node.ELEMENT_NODE && (node as WaIcon).localName === 'wa-icon') { if (node.nodeType === Node.ELEMENT_NODE) {
hasIcon = true; const element = node as HTMLElement;
if (!hasIconLabel) hasIconLabel = (node as WaIcon).label !== undefined;
}
// Concatenate text nodes if (element.localName === 'wa-icon') {
if (node.nodeType === Node.TEXT_NODE) { hasIcon = true;
text += node.textContent; 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) { if (this.isIconButton && !hasIconLabel) {
console.warn( console.warn(

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

@@ -27,7 +27,7 @@
border-color: transparent; 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)); 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'; @property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'brand';
/** The callout's visual appearance. */ /** The callout's visual appearance. */
@property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' | 'outlined filled' = @property({ reflect: true }) appearance: 'accent' | 'filled' | 'outlined' | 'plain' | 'filled-outlined';
'outlined filled';
/** The callout's size. */ /** The callout's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; @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> `); const el = await fixture<WaCheckbox>(html` <wa-checkbox></wa-checkbox> `);
expect(el.name).to.equal(''); expect(el.name).to.equal('');
expect(el.value).to.equal('on'); expect(el.value).to.equal(null);
expect(el.title).to.equal(''); expect(el.title).to.equal('');
expect(el.disabled).to.be.false; expect(el.disabled).to.be.false;
expect(el.required).to.be.false; expect(el.required).to.be.false;
@@ -134,7 +134,7 @@ describe('<wa-checkbox>', () => {
await checkbox.updateComplete; await checkbox.updateComplete;
expect(checkbox.checked).to.equal(false); 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); expect(new FormData(form).get('test')).to.equal(null);
checkbox.checked = true; 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. */ /** The value of the checkbox, submitted as a name/value pair with form data. */
get value(): string | null { get value(): string | null {
return this._value ?? 'on'; const val = this._value || 'on';
return this.checked ? val : null;
} }
@property({ reflect: true }) @property({ reflect: true })

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

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

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

@@ -76,7 +76,7 @@ export default class WaDetails extends WebAwesomeElement {
@property({ type: Boolean, reflect: true }) disabled = false; @property({ type: Boolean, reflect: true }) disabled = false;
/** The element's visual appearance. */ /** 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. */ /** The location of the expand/collapse icon. */
@property({ attribute: 'icon-placement', reflect: true }) iconPlacement: 'start' | 'end' = 'end'; @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]'); const elementToFocus = this.querySelector<HTMLButtonElement>('[autofocus]');
if (elementToFocus && typeof elementToFocus.focus === 'function') { if (elementToFocus && typeof elementToFocus.focus === 'function') {
elementToFocus.focus(); 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]'); const elementToFocus = this.querySelector<HTMLButtonElement>('[autofocus]');
if (elementToFocus && typeof elementToFocus.focus === 'function') { if (elementToFocus && typeof elementToFocus.focus === 'function') {
elementToFocus.focus(); elementToFocus.focus();
} else {
this.drawer.focus();
} }
}); });

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

@@ -44,17 +44,18 @@
} }
/* Appearance modifiers */ /* Appearance modifiers */
:host([appearance~='outlined']) .text-field { :host([appearance='outlined']) .text-field {
background-color: var(--wa-form-control-background-color); background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-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); background-color: var(--wa-color-neutral-fill-quiet);
border-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); border-color: var(--wa-form-control-border-color);
} }

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'; @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** The input's visual appearance. */ /** 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. */ /** Draws a pill-style input with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false; @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. */ /** The radio's value. When selected, the radio group will receive this value. */
@property({ reflect: true }) value: string; @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'; @property({ reflect: true }) appearance: 'default' | 'button' = 'default';
/** /**

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

@@ -93,17 +93,18 @@
} }
/* Appearance modifiers */ /* Appearance modifiers */
:host([appearance~='outlined']) .combobox { :host([appearance='outlined']) .combobox {
background-color: var(--wa-form-control-background-color); background-color: var(--wa-form-control-background-color);
border-color: var(--wa-form-control-border-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); background-color: var(--wa-color-neutral-fill-quiet);
border-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); 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; @property({ type: Boolean, reflect: true }) open = false;
/** The select's visual appearance. */ /** 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. */ /** Draws a pill-style select with rounded edges. */
@property({ type: Boolean, reflect: true }) pill = false; @property({ type: Boolean, reflect: true }) pill = false;

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

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

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

@@ -20,23 +20,25 @@
} }
/* Appearance modifiers */ /* Appearance modifiers */
:host([appearance~='outlined']) { :host([appearance='outlined']) {
color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet)); color: var(--wa-color-on-quiet, var(--wa-color-neutral-on-quiet));
background-color: transparent; background-color: transparent;
border-color: var(--wa-color-border-loud, var(--wa-color-neutral-border-loud)); 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)); 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)); background-color: var(--wa-color-fill-quiet, var(--wa-color-neutral-fill-quiet));
border-color: transparent; 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)); 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)); 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)); background-color: var(--wa-color-fill-loud, var(--wa-color-neutral-fill-loud));
border-color: transparent; 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'; @property({ reflect: true }) variant: 'brand' | 'neutral' | 'success' | 'warning' | 'danger' = 'neutral';
/** The tag's visual appearance. */ /** 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. */ /** The tag's size. */
@property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium'; @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';

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

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

2
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'; @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';
/** The textarea's visual appearance. */ /** 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. */ /** The textarea's label. If you need to display HTML, use the `label` slot instead. */
@property() label = ''; @property() label = '';