mirror of
https://github.com/shoelace-style/webawesome.git
synced 2026-01-14 21:19:13 +00:00
Compare commits
1 Commits
pro-fixes
...
carousel-f
| Author | SHA1 | Date | |
|---|---|---|---|
|
4c7aa3f164 |
4
package-lock.json
generated
4
package-lock.json
generated
@@ -13975,7 +13975,7 @@
|
||||
},
|
||||
"packages/webawesome": {
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"version": "3.0.0-beta.1",
|
||||
"version": "3.0.0-alpha.13",
|
||||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
@@ -13994,7 +13994,7 @@
|
||||
},
|
||||
"packages/webawesome-pro": {
|
||||
"name": "@shoelace-style/webawesome-pro",
|
||||
"version": "3.0.0-beta.1",
|
||||
"version": "3.0.0-alpha.13",
|
||||
"license": "TODO",
|
||||
"dependencies": {
|
||||
"@ctrl/tinycolor": "^4.1.0",
|
||||
|
||||
@@ -715,10 +715,7 @@ export const elementPresets = themes.map(theme => ({
|
||||
* All palettes used by themes in a simple array.
|
||||
*/
|
||||
export const palettes = themes
|
||||
.map(theme => ({
|
||||
...theme.palette,
|
||||
isPro: theme.isPro,
|
||||
}))
|
||||
.map(theme => theme.palette)
|
||||
.filter(
|
||||
(palette, index, array) =>
|
||||
array.findIndex(p => p.name === palette.name && p.filename === palette.filename) === index,
|
||||
|
||||
@@ -315,15 +315,12 @@
|
||||
</ul>
|
||||
</wa-details>
|
||||
|
||||
<!-- Theming -->
|
||||
<h2>Theming</h2>
|
||||
<!-- Color Palettes & Themes -->
|
||||
<h2>Color Palettes & Themes</h2>
|
||||
<ul>
|
||||
<li><a href="/docs/color-palettes">Color Palettes</a></li>
|
||||
<li><a href="/docs/themes">Themes</a></li>
|
||||
<li>
|
||||
<a href="/themer" data-turbo="false">Theme Builder</a>
|
||||
<wa-badge class="pro" appearance="accent" attention="none">PRO</wa-badge>
|
||||
</li>
|
||||
<li><a href="/themer" data-turbo="false">Theme Builder</a></li>
|
||||
</ul>
|
||||
|
||||
<!-- Design tokens -->
|
||||
|
||||
@@ -99,7 +99,7 @@ wa-page > header {
|
||||
#sidebar,
|
||||
#outline {
|
||||
h2 {
|
||||
font-size: var(--wa-font-size-s);
|
||||
font-size: var(--wa-font-size-m);
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
@@ -108,16 +108,7 @@ wa-page > header {
|
||||
}
|
||||
|
||||
wa-details {
|
||||
--spacing: 0;
|
||||
|
||||
&::part(header) {
|
||||
padding: 0;
|
||||
padding-block-start: var(--wa-space-xs);
|
||||
}
|
||||
|
||||
&::part(content) {
|
||||
padding-block-start: var(--wa-space-m);
|
||||
}
|
||||
--spacing: var(--wa-space-xs);
|
||||
|
||||
&::part(base) {
|
||||
border: none;
|
||||
@@ -180,7 +171,6 @@ wa-page > header {
|
||||
|
||||
/* Pro badges */
|
||||
wa-badge.pro {
|
||||
color: white;
|
||||
background-color: var(--wa-brand-orange);
|
||||
border-color: var(--wa-brand-orange);
|
||||
}
|
||||
@@ -415,7 +405,6 @@ wa-page > main:has(> .search-list) {
|
||||
|
||||
wa-card {
|
||||
--spacing: var(--wa-space-m);
|
||||
box-shadow: none;
|
||||
|
||||
[slot='header'] {
|
||||
display: flex;
|
||||
@@ -428,11 +417,6 @@ wa-page > main:has(> .search-list) {
|
||||
justify-content: center;
|
||||
min-block-size: calc(6rem + var(--spacing));
|
||||
}
|
||||
|
||||
&:hover {
|
||||
border-color: var(--wa-color-brand-border-loud);
|
||||
box-shadow: 0 0 0 0.0625rem var(--wa-color-brand-border-loud);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Color Palettes
|
||||
description: 'Color palettes give you a full spectrum of colors to add life to your project.'
|
||||
layout: page
|
||||
isPro: true
|
||||
---
|
||||
|
||||
<p>Color palettes give you a full spectrum of colors to add life to your project.</p>
|
||||
@@ -13,36 +14,9 @@ layout: page
|
||||
{% endfor %}
|
||||
|
||||
<div id="color-palettes">
|
||||
{% raw %}
|
||||
{% if not currentUser.hasPro %}
|
||||
<p>
|
||||
Additional palettes are available to pro users. Please <a href="/login">login to view pro palettes</a>.
|
||||
</p>
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
<wa-radio-group id="palette-picker" label="Color Palette" value="default" orientation="horizontal">
|
||||
{% for palette in themer.palettes %}
|
||||
{% if not palette.isPro %}
|
||||
<wa-radio
|
||||
class="palette-card"
|
||||
value="{{ palette.name | lower }}"
|
||||
>
|
||||
{{ palette.name }}
|
||||
</wa-radio>
|
||||
{% else %}
|
||||
{% raw %}
|
||||
{% if currentUser.hasPro %}
|
||||
{% endraw %}
|
||||
<wa-radio
|
||||
class="palette-card"
|
||||
value="{{ palette.name | lower }}"
|
||||
>
|
||||
{{ palette.name }}
|
||||
</wa-radio>
|
||||
{% raw %}
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
{% endif %}
|
||||
<wa-radio class="palette-card" value="{{ palette.name | lower }}">{{ palette.name }}</wa-radio>
|
||||
{% endfor %}
|
||||
</wa-radio-group>
|
||||
|
||||
@@ -150,16 +124,13 @@ layout: page
|
||||
border: 1px solid var(--wa-color-surface-border);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: center;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
text-transform: capitalize;
|
||||
}
|
||||
|
||||
.palette-card:not(:state(disabled)) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.palette-card:state(checked) {
|
||||
border-color: var(--wa-color-brand-border-loud);
|
||||
background-color: var(--wa-color-brand-fill-quiet);
|
||||
|
||||
@@ -4,46 +4,6 @@ description: Layout components and utility classes help you organize content tha
|
||||
layout: docs
|
||||
---
|
||||
|
||||
<p>
|
||||
{% markdown %}
|
||||
{{ description }}
|
||||
{% endmarkdown %}
|
||||
</p>
|
||||
|
||||
<div class="search-list">
|
||||
<wa-input class="search-list-input" type="search" placeholder="Search layout utilities" autofocus>
|
||||
<wa-icon name="search" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
|
||||
<section class="search-list-grid">
|
||||
{% for page in collections.layoutUtilities | sort(false, false, 'data.title') %}
|
||||
<a href="{{ page.url }}">
|
||||
<wa-card with-header="" appearance="outlined">
|
||||
<div slot="header">
|
||||
{# Look for an icon based on the page name #}
|
||||
{% set iconPath = "svgs/layout/" + page.fileSlug + ".njk" %}
|
||||
{% set iconContent %}{% include iconPath ignore missing %}{% endset %}
|
||||
{% if iconContent.trim() %}
|
||||
{# An icon exists! Show it #}
|
||||
{{ iconContent | safe }}
|
||||
{% else %}
|
||||
{# Fallback to the placeholder #}
|
||||
{% include 'svgs/thumbnail-placeholder.njk' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<div class="search-list-empty" hidden>
|
||||
No results found
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
|
||||
|
||||
<div class="max-line-length">
|
||||
{% markdown %}
|
||||
## Installation
|
||||
|
||||
@@ -61,4 +21,3 @@ Or, you can choose to import _only_ the utilities:
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
{% endmarkdown %}
|
||||
</div>
|
||||
|
||||
@@ -25,12 +25,11 @@ Many of these changes and improvements were the direct result of feedback from u
|
||||
- Removed `.wa-button`, `.wa-callout` classes
|
||||
- Removed `themes/native/*.css` files; use `native.css` to opt into native styles
|
||||
- Clarified which utilities classes can be applied to which native elements
|
||||
- Renamed the `classic` theme to `shoelace`
|
||||
- Removed `:root` selector from all theme, color palette, and semantic color stylesheets except for the default theme and colors. All of these styles are now solely scoped to classes, such as `.wa-theme-awesome`, `.wa-palette-bright`, and `.wa-brand-orange`.
|
||||
- Removed most custom properties from components that can otherwise be styled with `::part()` selectors and standard CSS properties.
|
||||
- Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
|
||||
- Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
|
||||
- Renamed certain boolean attributes to be consistent using the `with-*` and `without-*` pattern:
|
||||
- 🚨 BREAKING: Removed the extra dash in the `<wa-carousel>` CSS part name `pagination-item--active` => `pagination-item-active`
|
||||
- 🚨 BREAKING: Renamed the `classic` theme to `shoelace`
|
||||
- 🚨 BREAKING: Renamed `pulse` attribute in `<wa-badge>` to `attention="pulse"` and added `attention="bounce"` [issue:#940]
|
||||
- 🚨 BREAKING: Renamed the `vertical` attribute to `orientation="vertical"` in `<wa-split-panel>` and `<wa-divider>` to align with other components and the platform [issue:674]
|
||||
- 🚨 BREAKING: Renamed certain boolean attributes to be consistent using the `with-*` and `without-*` pattern:
|
||||
- `<wa-button caret>` => `<wa-button with-caret>`
|
||||
- `<wa-color-picker no-format-toggle>` => `<wa-color-picker without-format-toggle>`
|
||||
- `<wa-format-number no-grouping>` => `<wa-format-number without-grouping>`
|
||||
|
||||
@@ -2,6 +2,7 @@
|
||||
title: Themes
|
||||
description: Themes galore
|
||||
layout: page
|
||||
isPro: true
|
||||
---
|
||||
|
||||
<div class="wa-stack wa-gap-3xl">
|
||||
@@ -15,41 +16,17 @@ layout: page
|
||||
</div>
|
||||
|
||||
<div id="theme-viewer">
|
||||
{% if not currentUser.hasPro %}
|
||||
<p>
|
||||
Additional themes are available to pro users. Please <a href="/login">login to view pro themes</a>.
|
||||
</p>
|
||||
{% endif %}
|
||||
|
||||
<wa-radio-group id="theme-picker" label="Theme Selector" value="default" orientation="horizontal">
|
||||
{% for theme in themer.themes %}
|
||||
{% if not theme.isPro %}
|
||||
<wa-radio
|
||||
class="theme-card"
|
||||
value="{{ theme.filename | stripExtension }}"
|
||||
data-description="{{ theme.description }}"
|
||||
data-title="{{ theme.name }}"
|
||||
{% if theme.isPro %}data-is-pro{% endif %}
|
||||
>
|
||||
{{ theme.name }}
|
||||
</wa-radio>
|
||||
{% else %}
|
||||
{% raw %}
|
||||
{% if currentUser.hasPro %}
|
||||
{% endraw %}
|
||||
<wa-radio
|
||||
class="theme-card"
|
||||
value="{{ theme.filename | stripExtension }}"
|
||||
data-description="{{ theme.description }}"
|
||||
data-title="{{ theme.name }}"
|
||||
{% if theme.isPro %}data-is-pro{% endif %}
|
||||
>
|
||||
{{ theme.name }}
|
||||
</wa-radio>
|
||||
{% raw %}
|
||||
{% endif %}
|
||||
{% endraw %}
|
||||
{% endif %}
|
||||
<wa-radio
|
||||
class="theme-card"
|
||||
value="{{ theme.filename | stripExtension }}"
|
||||
data-description="{{ theme.description }}"
|
||||
data-title="{{ theme.name }}"
|
||||
{% if theme.isPro %}data-is-pro{% endif %}
|
||||
>
|
||||
{{ theme.name }}
|
||||
</wa-radio>
|
||||
{% endfor %}
|
||||
</wa-radio-group>
|
||||
</div>
|
||||
@@ -241,15 +218,12 @@ layout: page
|
||||
border: 1px solid var(--wa-color-surface-border);
|
||||
border-radius: var(--border-radius);
|
||||
box-shadow: var(--wa-shadow-s);
|
||||
cursor: pointer;
|
||||
transition: all 0.2s ease;
|
||||
text-align: center;
|
||||
font-weight: var(--wa-font-weight-action);
|
||||
text-transform: capitalize;
|
||||
|
||||
&:not(:state(disabled)) {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
&:state(checked) {
|
||||
border-color: var(--wa-color-brand-border-loud);
|
||||
background-color: var(--wa-color-brand-fill-quiet);
|
||||
|
||||
7
packages/webawesome/docs/docs/tokens/index.md
Normal file
7
packages/webawesome/docs/docs/tokens/index.md
Normal file
@@ -0,0 +1,7 @@
|
||||
---
|
||||
title: Design Tokens
|
||||
description: These custom properties thread through all of Web Awesome's components, giving things a consistent look and feel.
|
||||
layout: docs
|
||||
---
|
||||
|
||||
TODO
|
||||
@@ -1,43 +0,0 @@
|
||||
---
|
||||
title: Design Tokens
|
||||
description: These custom properties thread through all of Web Awesome's components, giving things a consistent look and feel.
|
||||
layout: docs
|
||||
override:tags: []
|
||||
---
|
||||
|
||||
<p>
|
||||
{% markdown %}
|
||||
{{ description }}
|
||||
{% endmarkdown %}
|
||||
</p>
|
||||
|
||||
<div class="search-list">
|
||||
<wa-input class="search-list-input" type="search" placeholder="Search design tokens" autofocus>
|
||||
<wa-icon name="search" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
|
||||
<section class="search-list-grid">
|
||||
{% for page in collections.tokens | sort(false, false, 'data.title') %}
|
||||
<a href="{{ page.url }}">
|
||||
<wa-card with-header="" appearance="outlined">
|
||||
<div slot="header">
|
||||
{# Look for an icon based on the page name #}
|
||||
{% set iconPath = "svgs/tokens/" + page.fileSlug + ".njk" %}
|
||||
{% set iconContent %}{% include iconPath ignore missing %}{% endset %}
|
||||
{% if iconContent.trim() %}
|
||||
{# An icon exists! Show it #}
|
||||
{{ iconContent | safe }}
|
||||
{% else %}
|
||||
{# Fallback to the placeholder #}
|
||||
{% include 'svgs/thumbnail-placeholder.njk' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<div class="search-list-empty" hidden>
|
||||
No results found
|
||||
</div>
|
||||
</div>
|
||||
@@ -1,3 +0,0 @@
|
||||
{
|
||||
"tags": ["tokens"]
|
||||
}
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Align Items
|
||||
description: Align items utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Cluster
|
||||
description: 'Use the `wa-cluster` class to arrange elements inline with even spacing, allowing items to wrap when space is limited.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Color Variants
|
||||
description: Color utilities allow you to apply the brand, neutral, success, warning, and danger colors from your theme to any element.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Some Web Awesome components, like `<wa-button>`, allow you to change the color by using a `variant` attribute:
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Flank
|
||||
description: 'Use the `wa-flank` class to position two items side-by-side, with one item positioned alongside, or _flanking_, content that stretches to fill the available space.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Reducing FOUCE
|
||||
description: Utility to improve the loading experience by hiding non-prerendered custom elements until they are registered.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Often, components are shown before their logic and styles have had a chance to load, also known as a [Flash of Undefined Custom Elements](https://www.abeautifulsite.net/posts/flash-of-undefined-custom-elements/).
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Frame
|
||||
description: 'Use the `wa-frame` class to create a responsive container with consistent proportions to enclose content.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Gap
|
||||
description: Gap utilities set the gap property of flex and grid containers, like other Web Awesome layout utilities.
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Grid
|
||||
description: 'Use the `wa-grid` class to arrange elements into rows and columns that automatically adapt to the available space.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
21
packages/webawesome/docs/docs/utilities/index.md
Normal file
21
packages/webawesome/docs/docs/utilities/index.md
Normal file
@@ -0,0 +1,21 @@
|
||||
---
|
||||
title: Style Utilities
|
||||
description:
|
||||
Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
|
||||
See the [installation instructions](#installation) to use style utilities in your project.
|
||||
layout: docs
|
||||
---
|
||||
|
||||
## Installation
|
||||
|
||||
To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, to _only_ include utilities:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
@@ -1,66 +0,0 @@
|
||||
---
|
||||
title: Style Utilities
|
||||
description:
|
||||
Style utilities are preset rules that let you efficiently customize styles for components and native elements alike.
|
||||
See the [installation instructions](#installation) to use style utilities in your project.
|
||||
layout: docs
|
||||
---
|
||||
|
||||
<p>
|
||||
{% markdown %}
|
||||
{{ description }}
|
||||
{% endmarkdown %}
|
||||
</p>
|
||||
|
||||
<div class="search-list">
|
||||
<wa-input class="search-list-input" type="search" placeholder="Search style utilities" autofocus>
|
||||
<wa-icon name="search" slot="start"></wa-icon>
|
||||
</wa-input>
|
||||
|
||||
<section class="search-list-grid">
|
||||
{% for page in collections.styleUtilities | sort(false, false, 'data.title') %}
|
||||
<a href="{{ page.url }}">
|
||||
<wa-card with-header="" appearance="outlined">
|
||||
<div slot="header">
|
||||
{# Look for an icon based on the page name #}
|
||||
{% set iconPath = "svgs/tokens/" + page.fileSlug + ".njk" %}
|
||||
{% set iconContent %}{% include iconPath ignore missing %}{% endset %}
|
||||
{% if iconContent.trim() %}
|
||||
{# An icon exists! Show it #}
|
||||
{{ iconContent | safe }}
|
||||
{% else %}
|
||||
{# Fallback to the placeholder #}
|
||||
{% include 'svgs/thumbnail-placeholder.njk' %}
|
||||
{% endif %}
|
||||
</div>
|
||||
<span class="page-name">{{ page.data.title }}</span>
|
||||
</wa-card>
|
||||
</a>
|
||||
{% endfor %}
|
||||
</section>
|
||||
<div class="search-list-empty" hidden>
|
||||
No results found
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<wa-divider style="--spacing: var(--wa-space-3xl);"></wa-divider>
|
||||
|
||||
<div class="max-line-length">
|
||||
{% markdown %}
|
||||
## Installation
|
||||
|
||||
To use all Web Awesome page styles (including [native styles](/docs/utilities/native/)), include the following stylesheet in your project:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/webawesome.css' %}" />
|
||||
```
|
||||
|
||||
Or, to _only_ include utilities:
|
||||
|
||||
```html
|
||||
<link rel="stylesheet" href="{% cdnUrl 'styles/utilities.css' %}" />
|
||||
```
|
||||
|
||||
{% endmarkdown %}
|
||||
|
||||
</div>
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Native Styles
|
||||
description: Native styles apply your theme to native HTML elements so they match the look and feel of Web Awesome components.
|
||||
layout: page-outline
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Web Awesome provides optional Native Styles that make native HTML elements look good so you can continue using what you know and gradually adopt Web Awesome as you see fit.
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Rounding Utilities
|
||||
description: Border radius utilities set an element's border radius property.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Split
|
||||
description: 'Use the `wa-split` class to distribute two or more items evenly across available space, either in a row or a column.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Stack
|
||||
description: 'Use `wa-stack` to arrange elements in the block direction with even spacing.'
|
||||
layout: docs
|
||||
tags: layoutUtilities
|
||||
---
|
||||
|
||||
<style>
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Text
|
||||
description: Text utility classes combine custom properties from your Web Awesome theme to conveniently style text content.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
Web Awesome includes classes to set multiple text properties at once to style body text, headings, and captions.
|
||||
|
||||
@@ -2,7 +2,6 @@
|
||||
title: Visually Hidden
|
||||
description: The visually hidden utility makes content accessible to assistive devices without displaying it on the screen.
|
||||
layout: docs
|
||||
tags: styleUtilities
|
||||
---
|
||||
|
||||
> "There are real world situations where visually hiding content may be appropriate, while the content should remain available to assistive technologies, such as screen readers. For instance, hiding a search field's label as a common magnifying glass icon is used in its stead."
|
||||
|
||||
@@ -1,7 +1,7 @@
|
||||
{
|
||||
"name": "@shoelace-style/webawesome",
|
||||
"description": "A forward-thinking library of web components.",
|
||||
"version": "3.0.0-beta.1",
|
||||
"version": "3.0.0-alpha.13",
|
||||
"homepage": "https://webawesome.com/",
|
||||
"author": "Web Awesome",
|
||||
"license": "MIT",
|
||||
@@ -58,10 +58,7 @@
|
||||
"spellcheck": "cspell \"**/*.{js,ts,json,html,css,md}\" --no-progress --config=\"../../cspell.json\"",
|
||||
"verify": "npm run prettier && npm run build && npm run test",
|
||||
"prepublishOnly": "npm run verify",
|
||||
"check-updates": "npx npm-check-updates --interactive --format group",
|
||||
"print-version": "echo $npm_package_version",
|
||||
"tag-version": "git tag -a \"v$(npm run print-version | tail -n1)\" -m \"tag v$(npm run print-version | tail -n1)\"",
|
||||
"postversion": "npm run tag-version"
|
||||
"check-updates": "npx npm-check-updates --interactive --format group"
|
||||
},
|
||||
"engines": {
|
||||
"node": ">=14.17.0"
|
||||
|
||||
Reference in New Issue
Block a user