mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-19 15:34:15 +00:00
Compare commits
4 Commits
icon-butto
...
license-ba
| Author | SHA1 | Date | |
|---|---|---|---|
|
ab9e26e13a | ||
|
|
eeb41f4d99 | ||
|
|
b0680f19a9 | ||
|
|
1101a3cf07 |
312
packages/webawesome/docs/503.md
Normal file
312
packages/webawesome/docs/503.md
Normal 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' 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>
|
||||
@@ -111,7 +111,49 @@
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* #region funsies */
|
||||
/* #region funsies + cosmetics */
|
||||
|
||||
/* grid background */
|
||||
.background-grid {
|
||||
--grid-spacing: var(--wa-space-2xl);
|
||||
--grid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 90%);
|
||||
--grid-line-width: var(--wa-border-width-s);
|
||||
--subgrid-spacing: calc(var(--grid-spacing) / 2);
|
||||
--subgrid-line-color: color-mix(in oklab, var(--wa-color-text-normal), transparent 95%);
|
||||
--subgrid-line-width: var(--wa-border-width-s);
|
||||
|
||||
background-image:
|
||||
/* main grid - vertical lines */
|
||||
linear-gradient(to right, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width)),
|
||||
/* main grid - horizontal lines */
|
||||
linear-gradient(to bottom, var(--grid-line-color) var(--grid-line-width), transparent var(--grid-line-width)),
|
||||
/* sub-grid - vertical lines (offset by half the main grid spacing) */
|
||||
linear-gradient(
|
||||
to right,
|
||||
var(--subgrid-line-color) var(--subgrid-line-width),
|
||||
transparent var(--subgrid-line-width)
|
||||
),
|
||||
/* sub-grid - horizontal lines (offset by half the main grid spacing) */
|
||||
linear-gradient(
|
||||
to bottom,
|
||||
var(--subgrid-line-color) var(--subgrid-line-width),
|
||||
transparent var(--subgrid-line-width)
|
||||
);
|
||||
|
||||
background-size:
|
||||
var(--grid-spacing) var(--grid-spacing),
|
||||
var(--grid-spacing) var(--grid-spacing),
|
||||
var(--subgrid-spacing) var(--subgrid-spacing),
|
||||
var(--subgrid-spacing) var(--subgrid-spacing);
|
||||
|
||||
background-position:
|
||||
0 0,
|
||||
0 0,
|
||||
calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2),
|
||||
calc(var(--grid-spacing) / 2) calc(var(--grid-spacing) / 2);
|
||||
}
|
||||
/* #endregion */
|
||||
|
||||
/* buttons with icon toggle on hover */
|
||||
wa-button .icon-hover {
|
||||
display: none;
|
||||
|
||||
@@ -52,7 +52,7 @@ To make a field required, use the `required` attribute. Required fields will aut
|
||||
customElements.whenDefined('wa-input'),
|
||||
customElements.whenDefined('wa-option'),
|
||||
customElements.whenDefined('wa-select'),
|
||||
customElements.whenDefined('wa-textarea')
|
||||
customElements.whenDefined('wa-textarea'),
|
||||
]).then(() => {
|
||||
form.addEventListener('submit', event => {
|
||||
event.preventDefault();
|
||||
@@ -78,10 +78,7 @@ To restrict a value to a specific [pattern](https://developer.mozilla.org/en-US/
|
||||
const form = document.querySelector('.input-validation-pattern');
|
||||
|
||||
// Wait for controls to be defined before attaching form listeners
|
||||
await Promise.all([
|
||||
customElements.whenDefined('wa-button'),
|
||||
customElements.whenDefined('wa-input')
|
||||
]).then(() => {
|
||||
await Promise.all([customElements.whenDefined('wa-button'), customElements.whenDefined('wa-input')]).then(() => {
|
||||
form.addEventListener('submit', event => {
|
||||
event.preventDefault();
|
||||
alert('All fields are valid!');
|
||||
@@ -108,10 +105,7 @@ Some input types will automatically trigger constraints, such as `email` and `ur
|
||||
const form = document.querySelector('.input-validation-type');
|
||||
|
||||
// Wait for controls to be defined before attaching form listeners
|
||||
await Promise.all([
|
||||
customElements.whenDefined('wa-button'),
|
||||
customElements.whenDefined('wa-input')
|
||||
]).then(() => {
|
||||
await Promise.all([customElements.whenDefined('wa-button'), customElements.whenDefined('wa-input')]).then(() => {
|
||||
form.addEventListener('submit', event => {
|
||||
event.preventDefault();
|
||||
alert('All fields are valid!');
|
||||
@@ -137,10 +131,7 @@ To create a custom validation error, pass a non-empty string to the `setCustomVa
|
||||
const input = form.querySelector('wa-input');
|
||||
|
||||
// Wait for controls to be defined before attaching form listeners
|
||||
await Promise.all([
|
||||
customElements.whenDefined('wa-button'),
|
||||
customElements.whenDefined('wa-input')
|
||||
]).then(() => {
|
||||
await Promise.all([customElements.whenDefined('wa-button'), customElements.whenDefined('wa-input')]).then(() => {
|
||||
form.addEventListener('submit', event => {
|
||||
event.preventDefault();
|
||||
alert('All fields are valid!');
|
||||
@@ -163,17 +154,15 @@ Custom validation can be applied to any form control that supports the `setCusto
|
||||
|
||||
## Custom Validation Styles
|
||||
|
||||
Due to the many ways form controls are used, Web Awesome doesn't provide out of the box validation styles for form controls as part of its default theme. Instead, the following attributes will be applied to reflect a control's validity as users interact with it. You can use them to create custom styles for any of the validation states you're interested in.
|
||||
Due to the many ways form controls are used, Web Awesome doesn't provide out of the box validation styles for form controls as part of its default theme.
|
||||
|
||||
- `required` - the form control is required
|
||||
- `optional` - the form control is optional
|
||||
- `invalid` - the form control is invalid
|
||||
- `valid` - the form control is valid
|
||||
- `user-invalid` - the form control is invalid and the user has interacted with it
|
||||
- `user-valid` - the form control is valid and the user has interacted with it
|
||||
Instead, the following [custom states](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states) will be applied to reflect a control's validity as users interact with it. You can use them to create custom styles for any of the validation states you're interested in.
|
||||
|
||||
These attributes map to the browser's built-in pseudo classes for validation: [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required), [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/:optional), [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid), [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid), [`:user-invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid), and [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
|
||||
- `:state(required)` - the form control is required
|
||||
- `:state(optional)` - the form control is optional
|
||||
- `:state(invalid)` - the form control is invalid
|
||||
- `:state(valid)` - the form control is valid
|
||||
- `:state(user-invalid)` - the form control is invalid and the user has interacted with it
|
||||
- `:state(user-valid)` - the form control is valid and the user has interacted with it
|
||||
|
||||
:::info
|
||||
In the future, data attribute selectors will be replaced with custom states such as `:state(valid)` and `:state(invalid)`. Web Awesome is using data attributes as a workaround until browsers fully support [custom states](https://developer.mozilla.org/en-US/docs/Web/API/ElementInternals/states).
|
||||
:::
|
||||
These custom states work alongside the browser's built-in pseudo classes for validation: [`:required`](https://developer.mozilla.org/en-US/docs/Web/CSS/:required), [`:optional`](https://developer.mozilla.org/en-US/docs/Web/CSS/:optional), [`:invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:invalid), [`:valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:valid), [`:user-invalid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-invalid), and [`:user-valid`](https://developer.mozilla.org/en-US/docs/Web/CSS/:user-valid).
|
||||
|
||||
@@ -18,6 +18,7 @@ import { getCdnDir, getDistDir, getDocsDir, getRootDir, getSiteDir } from './uti
|
||||
|
||||
const __dirname = dirname(fileURLToPath(import.meta.url));
|
||||
|
||||
const currentYear = new Date().getFullYear();
|
||||
const spinner = ora({ text: 'Web Awesome', color: 'cyan' }).start();
|
||||
const getPackageData = async () => JSON.parse(await readFile(join(getRootDir(), 'package.json'), 'utf-8'));
|
||||
const getVersion = async () => JSON.stringify((await getPackageData()).version.toString());
|
||||
@@ -225,6 +226,9 @@ export async function build(options = {}) {
|
||||
bundle: true,
|
||||
splitting: true,
|
||||
minify: false,
|
||||
banner: {
|
||||
js: `/*! Copyright ${currentYear} Fonticons, Inc. - https://webawesome.com/license */`,
|
||||
},
|
||||
plugins: [replace({ __WEBAWESOME_VERSION__: await getVersion() })],
|
||||
loader: {
|
||||
'.css': 'text',
|
||||
|
||||
@@ -47,7 +47,7 @@ export default class WaRadio extends WebAwesomeFormAssociatedElement {
|
||||
/** The radio's value. When selected, the radio group will receive this value. */
|
||||
@property({ reflect: true }) value: string;
|
||||
|
||||
/** The radio's value. When selected, the radio group will receive this value. */
|
||||
/** The radio's visual appearance. */
|
||||
@property({ reflect: true }) appearance: 'default' | 'button' = 'default';
|
||||
|
||||
/**
|
||||
|
||||
Reference in New Issue
Block a user