al-design-system 1.6.0 → 1.7.0

package/README.md

@@ -10,7 +10,7 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
 
 ## What it is
 
-- **Foundation + 29 components**, designed in Figma and coded from the same tokens.
+- **Foundation + 30 components**, designed in Figma and coded from the same tokens.
 - **Light and dark themes** built in. It follows the operating system by default, and you can force one.
 - **Accessibility is checked by the build.** Every rendered combination (variant × state × theme) is measured for contrast against the background it actually sits on, and each component's markup contract is verified. If something fails, the build stops.
 - **Nothing is typed by hand.** Tokens, CSS variables, `tokens.json` and the documentation tables are all generated from one source.
@@ -48,6 +48,7 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
 | | Toast | ✓ | [guidelines](src/components/toast/guidelines.md) |
 | | Alert | ✓ | [guidelines](src/components/alert/guidelines.md) |
 | | Progress | | [guidelines](src/components/progress/guidelines.md) |
+| | Empty state | | [guidelines](src/components/empty-state/guidelines.md) |
 
 Each guidelines file holds the usage rules (when to use it, when not to, content, behavior and accessibility) and, when there are any, the contrast exceptions the component declares.
 
@@ -60,7 +61,7 @@ npm install al-design-system
 Or straight from a CDN, pinned to a version:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.6.0/dist/al.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.7.0/dist/al.css">
 ```
 
 Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/releases) also carries the `dist/` folder as a zip.
@@ -69,7 +70,7 @@ Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/r
 
 | File | What it is |
 |---|---|
-| `al.css` | Foundation + all 29 components, in one file |
+| `al.css` | Foundation + all 30 components, in one file |
 | `foundation.css` | Only the Foundation: color, typography, spacing, radius, icon size, elevation, focus ring and motion |
 | `components/<name>.css` | One component (its tokens + its CSS) |
 | `components/<name>.js` | The behavior, for the 11 components that have a script |

package/README.pt-BR.md

@@ -10,7 +10,7 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
 
 ## O que é
 
-- **Foundation + 29 componentes**, desenhados no Figma e codados a partir dos mesmos tokens.
+- **Foundation + 30 componentes**, desenhados no Figma e codados a partir dos mesmos tokens.
 - **Temas claro e escuro** já incluídos. Por padrão segue o sistema operacional, e dá para forçar um.
 - **A acessibilidade é conferida no build.** Cada combinação renderizada (variante × estado × tema) tem o contraste medido contra o fundo onde ela realmente aparece, e o contrato de marcação de cada componente é verificado. Se algo reprova, o build para.
 - **Nada é digitado à mão.** Tokens, variáveis CSS, `tokens.json` e as tabelas da documentação saem todos de uma fonte só.
@@ -48,6 +48,7 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
 | | Toast | ✓ | [diretrizes](src/components/toast/guidelines.md) |
 | | Alert | ✓ | [diretrizes](src/components/alert/guidelines.md) |
 | | Progress | | [diretrizes](src/components/progress/guidelines.md) |
+| | Empty state | | [diretrizes](src/components/empty-state/guidelines.md) |
 
 Cada arquivo de diretrizes traz as regras de uso (quando usar, quando não usar, conteúdo, comportamento e acessibilidade) e, quando houver, as exceções de contraste que o componente declara. Por enquanto as diretrizes estão em inglês; a versão em português chega junto com o site novo.
 
@@ -60,7 +61,7 @@ npm install al-design-system
 Ou direto de uma CDN, fixado numa versão:
 
 ```html
-<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.6.0/dist/al.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.7.0/dist/al.css">
 ```
 
 Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-system/releases) também traz a pasta `dist/` num zip.
@@ -69,7 +70,7 @@ Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-syste
 
 | Arquivo | O que é |
 |---|---|
-| `al.css` | Foundation + os 29 componentes, num arquivo só |
+| `al.css` | Foundation + os 30 componentes, num arquivo só |
 | `foundation.css` | Só a Foundation: cor, tipografia, espaçamento, radius, tamanho de ícone, elevação, anel de foco e motion |
 | `components/<nome>.css` | Um componente (os tokens + o CSS dele) |
 | `components/<nome>.js` | O comportamento, para os 11 componentes que têm script |

package/dist/al.css

@@ -1,8 +1,8 @@
-/* AL Design System 1.6.0 - Foundation + 29 components.
+/* AL Design System 1.7.0 - Foundation + 30 components.
  * MIT. https://github.com/guilhermedworakowski/al-design-system
  */
 /* AL Design System - Foundation
- * v1.6.0 - MIT
+ * v1.7.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 
@@ -8109,3 +8109,147 @@
   clip-path: inset(50%);
   white-space: nowrap;
 }
+
+/* AL Design System - Empty state tokens
+ * GENERATED by src/components/empty-state/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-empty-state-bg: var(--al-bg-surface-raised);
+  --al-empty-state-border: var(--al-border-default);
+  --al-empty-state-icon: var(--al-text-primary);
+  --al-empty-state-title: var(--al-text-primary);
+  --al-empty-state-description: var(--al-text-secondary);
+
+  /* geometry */
+  --al-empty-state-border-width: var(--al-border-width-1);
+  --al-empty-state-radius: var(--al-radius-3xl);
+  --al-empty-state-padding: var(--al-space-48);
+  --al-empty-state-icon-size: var(--al-icon-size-32);
+  --al-empty-state-gap-icon: var(--al-space-16);
+  --al-empty-state-gap-text: var(--al-space-8);
+  --al-empty-state-gap-action: var(--al-space-24);
+
+  /* width - declared value, no scale in the Foundation */
+  --al-empty-state-max-width: 600px;
+
+  /* typography - one style becomes four vars */
+  --al-empty-state-title-font-size: var(--al-font-size-xl);
+  --al-empty-state-title-line-height: var(--al-line-height-xl);
+  --al-empty-state-title-font-weight: 600;
+  --al-empty-state-title-tracking: -0.01em;
+  --al-empty-state-description-font-size: var(--al-font-size-md);
+  --al-empty-state-description-line-height: var(--al-line-height-md);
+  --al-empty-state-description-font-weight: 400;
+  --al-empty-state-description-tracking: 0em;
+}
+
+/* AL Design System - Empty state
+ * Written by hand. Depends on al-foundation.css and al-empty-state-tokens.css,
+ * in that order.
+ *
+ * No value here is literal: color, space, radius and typography come in
+ * through var(--al-empty-state-*). The check.py next to it rejects the file if
+ * any escapes.
+ *
+ * MARKUP CONTRACT
+ *
+ *   <section class="al-empty-state" aria-labelledby="es-title">
+ *     <svg class="al-empty-state__icon" aria-hidden="true">...</svg>
+ *     <div class="al-empty-state__text">
+ *       <h2 class="al-empty-state__title" id="es-title">No projects yet</h2>
+ *       <p class="al-empty-state__description">Projects you create show up
+ *         here.</p>
+ *     </div>
+ *     <button class="al-btn al-btn--primary al-btn--md" type="button">
+ *       <span class="al-btn__label">Create project</span>
+ *     </button>
+ *   </section>
+ *
+ *   Icon, description and button are optional (rules 9, 13, 16). At most one
+ *   button, always Primary (rule 15). No Link inside: Figma has none, and a
+ *   second action has no place here (rule 18).
+ *
+ *   After a search or filter (decision A=a), the empty state is rendered into
+ *   a container with role="status", so it is announced once. On first load it
+ *   is static, with no role.
+ *
+ * THE TITLE IS ALWAYS A HEADING (B=a), THE LEVEL BELONGS TO THE PAGE
+ *   The class doesn't pin a tag (rule 19), same as the Card.
+ *
+ * THE BORDER IS OUTSIDE
+ *   In Figma the stroke is OUTSIDE. Here it is a 1px shadow with no blur, the
+ *   same as the Card Border: the 48 of padding discounts nothing.
+ *
+ * ONLY ON bg-canvas OR bg-surface (rule 5). Nothing here stops it; it is a
+ * usage rule.
+ *
+ * HIGH CONTRAST
+ *   In `forced-colors` the shadow is removed and the box would vanish: it
+ *   gets an outline in the system's text color, the same as the Card.
+ */
+
+.al-empty-state {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--al-empty-state-gap-action);
+  width: 100%;
+  max-width: var(--al-empty-state-max-width);
+  margin-inline: auto;
+  padding: var(--al-empty-state-padding);
+  border-radius: var(--al-empty-state-radius);
+  background-color: var(--al-empty-state-bg);
+  box-shadow: 0 0 0 var(--al-empty-state-border-width) var(--al-empty-state-border);
+  text-align: center;
+}
+
+/* The box gap is gap-action (text -> button). Icon -> text is shorter, so the
+   text block pulls itself up by the difference (24 - 16 = 8). */
+.al-empty-state__icon {
+  flex: none;
+  width: var(--al-empty-state-icon-size);
+  height: var(--al-empty-state-icon-size);
+  color: var(--al-empty-state-icon);
+}
+
+.al-empty-state__icon + .al-empty-state__text {
+  margin-top: calc(var(--al-empty-state-gap-icon) - var(--al-empty-state-gap-action));
+}
+
+.al-empty-state__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--al-empty-state-gap-text);
+}
+
+.al-empty-state__title {
+  margin: 0;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-empty-state-title-font-size);
+  line-height: var(--al-empty-state-title-line-height);
+  font-weight: var(--al-empty-state-title-font-weight);
+  letter-spacing: var(--al-empty-state-title-tracking);
+  color: var(--al-empty-state-title);
+}
+
+.al-empty-state__description {
+  margin: 0;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-empty-state-description-font-size);
+  line-height: var(--al-empty-state-description-line-height);
+  font-weight: var(--al-empty-state-description-font-weight);
+  letter-spacing: var(--al-empty-state-description-tracking);
+  color: var(--al-empty-state-description);
+}
+
+/* ---------------------------------------------------------- high contrast */
+@media (forced-colors: active) {
+  .al-empty-state {
+    outline: var(--al-empty-state-border-width) solid CanvasText;
+  }
+}

package/dist/components/empty-state.css

@@ -0,0 +1,143 @@
+/* AL Design System - Empty state tokens
+ * GENERATED by src/components/empty-state/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-empty-state-bg: var(--al-bg-surface-raised);
+  --al-empty-state-border: var(--al-border-default);
+  --al-empty-state-icon: var(--al-text-primary);
+  --al-empty-state-title: var(--al-text-primary);
+  --al-empty-state-description: var(--al-text-secondary);
+
+  /* geometry */
+  --al-empty-state-border-width: var(--al-border-width-1);
+  --al-empty-state-radius: var(--al-radius-3xl);
+  --al-empty-state-padding: var(--al-space-48);
+  --al-empty-state-icon-size: var(--al-icon-size-32);
+  --al-empty-state-gap-icon: var(--al-space-16);
+  --al-empty-state-gap-text: var(--al-space-8);
+  --al-empty-state-gap-action: var(--al-space-24);
+
+  /* width - declared value, no scale in the Foundation */
+  --al-empty-state-max-width: 600px;
+
+  /* typography - one style becomes four vars */
+  --al-empty-state-title-font-size: var(--al-font-size-xl);
+  --al-empty-state-title-line-height: var(--al-line-height-xl);
+  --al-empty-state-title-font-weight: 600;
+  --al-empty-state-title-tracking: -0.01em;
+  --al-empty-state-description-font-size: var(--al-font-size-md);
+  --al-empty-state-description-line-height: var(--al-line-height-md);
+  --al-empty-state-description-font-weight: 400;
+  --al-empty-state-description-tracking: 0em;
+}
+
+/* AL Design System - Empty state
+ * Written by hand. Depends on al-foundation.css and al-empty-state-tokens.css,
+ * in that order.
+ *
+ * No value here is literal: color, space, radius and typography come in
+ * through var(--al-empty-state-*). The check.py next to it rejects the file if
+ * any escapes.
+ *
+ * MARKUP CONTRACT
+ *
+ *   <section class="al-empty-state" aria-labelledby="es-title">
+ *     <svg class="al-empty-state__icon" aria-hidden="true">...</svg>
+ *     <div class="al-empty-state__text">
+ *       <h2 class="al-empty-state__title" id="es-title">No projects yet</h2>
+ *       <p class="al-empty-state__description">Projects you create show up
+ *         here.</p>
+ *     </div>
+ *     <button class="al-btn al-btn--primary al-btn--md" type="button">
+ *       <span class="al-btn__label">Create project</span>
+ *     </button>
+ *   </section>
+ *
+ *   Icon, description and button are optional (rules 9, 13, 16). At most one
+ *   button, always Primary (rule 15). No Link inside: Figma has none, and a
+ *   second action has no place here (rule 18).
+ *
+ *   After a search or filter (decision A=a), the empty state is rendered into
+ *   a container with role="status", so it is announced once. On first load it
+ *   is static, with no role.
+ *
+ * THE TITLE IS ALWAYS A HEADING (B=a), THE LEVEL BELONGS TO THE PAGE
+ *   The class doesn't pin a tag (rule 19), same as the Card.
+ *
+ * THE BORDER IS OUTSIDE
+ *   In Figma the stroke is OUTSIDE. Here it is a 1px shadow with no blur, the
+ *   same as the Card Border: the 48 of padding discounts nothing.
+ *
+ * ONLY ON bg-canvas OR bg-surface (rule 5). Nothing here stops it; it is a
+ * usage rule.
+ *
+ * HIGH CONTRAST
+ *   In `forced-colors` the shadow is removed and the box would vanish: it
+ *   gets an outline in the system's text color, the same as the Card.
+ */
+
+.al-empty-state {
+  box-sizing: border-box;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: var(--al-empty-state-gap-action);
+  width: 100%;
+  max-width: var(--al-empty-state-max-width);
+  margin-inline: auto;
+  padding: var(--al-empty-state-padding);
+  border-radius: var(--al-empty-state-radius);
+  background-color: var(--al-empty-state-bg);
+  box-shadow: 0 0 0 var(--al-empty-state-border-width) var(--al-empty-state-border);
+  text-align: center;
+}
+
+/* The box gap is gap-action (text -> button). Icon -> text is shorter, so the
+   text block pulls itself up by the difference (24 - 16 = 8). */
+.al-empty-state__icon {
+  flex: none;
+  width: var(--al-empty-state-icon-size);
+  height: var(--al-empty-state-icon-size);
+  color: var(--al-empty-state-icon);
+}
+
+.al-empty-state__icon + .al-empty-state__text {
+  margin-top: calc(var(--al-empty-state-gap-icon) - var(--al-empty-state-gap-action));
+}
+
+.al-empty-state__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--al-empty-state-gap-text);
+}
+
+.al-empty-state__title {
+  margin: 0;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-empty-state-title-font-size);
+  line-height: var(--al-empty-state-title-line-height);
+  font-weight: var(--al-empty-state-title-font-weight);
+  letter-spacing: var(--al-empty-state-title-tracking);
+  color: var(--al-empty-state-title);
+}
+
+.al-empty-state__description {
+  margin: 0;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-empty-state-description-font-size);
+  line-height: var(--al-empty-state-description-line-height);
+  font-weight: var(--al-empty-state-description-font-weight);
+  letter-spacing: var(--al-empty-state-description-tracking);
+  color: var(--al-empty-state-description);
+}
+
+/* ---------------------------------------------------------- high contrast */
+@media (forced-colors: active) {
+  .al-empty-state {
+    outline: var(--al-empty-state-border-width) solid CanvasText;
+  }
+}

package/dist/foundation.css

@@ -1,5 +1,5 @@
 /* AL Design System - Foundation
- * v1.6.0 - MIT
+ * v1.7.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "AL Design System",
-    "version": "1.6.0",
+    "version": "1.7.0",
     "license": "MIT",
     "brandAnchor": "#FC5000",
     "colorSpace": "OKLCH",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "al-design-system",
-  "version": "1.6.0",
+  "version": "1.7.0",
   "description": "AL Design System: Foundation and components in plain CSS, from Figma to code.",
   "license": "MIT",
   "author": "Guilherme Domingues",