al-design-system 1.5.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 + 28 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.
@@ -43,10 +43,12 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
 | Navigation | Sidebar | ✓ | [guidelines](src/components/sidebar/guidelines.md) |
 | | Breadcrumb | ✓ | [guidelines](src/components/breadcrumb/guidelines.md) |
 | | Pagination | | [guidelines](src/components/pagination/guidelines.md) |
+| | Stepper | | [guidelines](src/components/stepper/guidelines.md) |
 | Feedback | Tooltip | ✓ | [guidelines](src/components/tooltip/guidelines.md) |
 | | 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.
 
@@ -59,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.5.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.
@@ -68,7 +70,7 @@ Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/r
 
 | File | What it is |
 |---|---|
-| `al.css` | Foundation + all 28 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 + 28 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ó.
@@ -43,10 +43,12 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
 | Navegação | Sidebar | ✓ | [diretrizes](src/components/sidebar/guidelines.md) |
 | | Breadcrumb | ✓ | [diretrizes](src/components/breadcrumb/guidelines.md) |
 | | Pagination | | [diretrizes](src/components/pagination/guidelines.md) |
+| | Stepper | | [diretrizes](src/components/stepper/guidelines.md) |
 | Feedback | Tooltip | ✓ | [diretrizes](src/components/tooltip/guidelines.md) |
 | | 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.
 
@@ -59,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.5.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.
@@ -68,7 +70,7 @@ Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-syste
 
 | Arquivo | O que é |
 |---|---|
-| `al.css` | Foundation + os 28 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.5.0 - Foundation + 28 components.
+/* AL Design System 1.7.0 - Foundation + 30 components.
  * MIT. https://github.com/guilhermedworakowski/al-design-system
  */
 /* AL Design System - Foundation
- * v1.5.0 - MIT
+ * v1.7.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 
@@ -7844,3 +7844,412 @@
     transition: none;
   }
 }
+
+/* AL Design System - Stepper tokens
+ * GENERATED by src/components/stepper/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-stepper-label: var(--al-text-primary);
+  --al-stepper-label-upcoming: var(--al-text-secondary);
+  --al-stepper-description: var(--al-text-secondary);
+  --al-stepper-completed-bg: var(--al-bg-brand-subtle);
+  --al-stepper-completed-border: var(--al-border-brand);
+  --al-stepper-completed-icon: var(--al-text-brand);
+  --al-stepper-current-bg: var(--al-bg-brand);
+  --al-stepper-current-number: var(--al-text-on-brand);
+  --al-stepper-upcoming-bg: var(--al-bg-surface);
+  --al-stepper-upcoming-border: var(--al-border-strong);
+  --al-stepper-upcoming-number: var(--al-text-secondary);
+  --al-stepper-connector: var(--al-border-default);
+  --al-stepper-connector-done: var(--al-border-brand);
+
+  /* geometry */
+  --al-stepper-indicator-size: var(--al-space-32);
+  --al-stepper-indicator-radius: var(--al-radius-full);
+  --al-stepper-indicator-border-width: var(--al-border-width-1);
+  --al-stepper-icon-size: var(--al-icon-size-16);
+  --al-stepper-connector-thickness: var(--al-border-width-1);
+  --al-stepper-text-gap: var(--al-space-2);
+  --al-stepper-horizontal-gap: var(--al-space-8);
+  --al-stepper-horizontal-text-padding: var(--al-space-8);
+  --al-stepper-vertical-gap: var(--al-space-12);
+  --al-stepper-vertical-rail-gap: var(--al-space-4);
+  --al-stepper-vertical-step-gap: var(--al-space-24);
+
+  /* type - title and number like label-md, description like body-sm */
+  --al-stepper-font-size: var(--al-font-size-sm);
+  --al-stepper-line-height: var(--al-line-height-sm);
+  --al-stepper-font-weight: var(--al-font-weight-medium);
+  --al-stepper-description-font-size: var(--al-font-size-sm);
+  --al-stepper-description-line-height: var(--al-line-height-sm);
+  --al-stepper-description-font-weight: var(--al-font-weight-regular);
+}
+
+/* AL Design System - Stepper
+ *
+ * Depends on: al-foundation.css, al-stepper-tokens.css, al-icon-tokens.css + icon.css
+ *
+ *   .al-stepper                 Horizontal - title under the circle, one line
+ *   .al-stepper--vertical       Vertical   - rail on the left, text on the right
+ *
+ * Markup (usage rules 17-19): an <ol> inside <nav aria-label="Progress">.
+ * Status is a class on the step; the current one also carries
+ * aria-current="step", and that attribute is what styles it, so the look can
+ * never disagree with what is announced. Each step spells its status out in
+ * hidden text - the check and the color say nothing to a screen reader.
+ *
+ *   <nav aria-label="Progress">
+ *     <ol class="al-stepper">
+ *       <li class="al-stepper__step al-stepper__step--completed">
+ *         <span class="al-stepper__indicator">
+ *           <svg class="al-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">…check…</svg>
+ *         </span>
+ *         <span class="al-stepper__text">
+ *           <span class="al-stepper__label">Account</span>
+ *           <span class="al-stepper__status">completed</span>
+ *           <span class="al-stepper__description">Optional description</span>
+ *         </span>
+ *       </li>
+ *       <li class="al-stepper__step" aria-current="step">
+ *         <span class="al-stepper__indicator" aria-hidden="true">2</span> …
+ *       </li>
+ *       <li class="al-stepper__step"> … upcoming … </li>
+ *     </ol>
+ *   </nav>
+ *
+ * NOT CLICKABLE (rule 24): no hover, no focus, no link. Moving between steps
+ * is the form's Back / Continue.
+ *
+ * ONE CONTINUOUS LINE (rule 15): each horizontal step draws half a line on
+ * each side of its circle (::before / ::after) and the steps touch, so the
+ * halves join. The line before a step is brand when the step is completed or
+ * current; the line after, only when completed. The outer halves stay
+ * unpainted - they keep the circle centered over the title.
+ *
+ * THE BORDER IS ALWAYS THERE: the current step paints it in its own fill, so
+ * the circle never changes size between states.
+ *
+ * NO TOKEN, ON PURPOSE: the vertical text drops by (circle - line) / 2 so the
+ * title's first line centers on the circle.
+ */
+
+.al-stepper {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--al-font-sans);
+}
+
+/* ---------------------------------------------------------- horizontal */
+.al-stepper__step {
+  display: grid;
+  flex: 1 1 0;
+  grid-template-columns: 1fr var(--al-stepper-indicator-size) 1fr;
+  align-items: center;
+  align-content: start;
+  row-gap: var(--al-stepper-horizontal-gap);
+  min-inline-size: 0;
+}
+
+.al-stepper__step::before,
+.al-stepper__step::after {
+  content: '';
+  grid-row: 1;
+  block-size: var(--al-stepper-connector-thickness);
+  background-color: var(--al-stepper-connector);
+}
+
+.al-stepper__step::before { grid-column: 1; }
+.al-stepper__step::after  { grid-column: 3; }
+
+.al-stepper__step--completed::before,
+.al-stepper__step--completed::after,
+.al-stepper__step[aria-current='step']::before {
+  background-color: var(--al-stepper-connector-done);
+}
+
+.al-stepper__step:first-child::before,
+.al-stepper__step:last-child::after {
+  background-color: transparent;
+}
+
+.al-stepper__indicator {
+  grid-row: 1;
+  grid-column: 2;
+}
+
+.al-stepper__text {
+  grid-row: 2;
+  grid-column: 1 / -1;
+  padding-inline: var(--al-stepper-horizontal-text-padding);
+  text-align: center;
+}
+
+/* ------------------------------------------------------------ vertical */
+.al-stepper--vertical {
+  flex-direction: column;
+}
+
+.al-stepper--vertical .al-stepper__step {
+  flex: none;
+  grid-template-columns: var(--al-stepper-indicator-size) 1fr;
+  grid-template-rows: auto 1fr;
+  align-items: start;
+  column-gap: var(--al-stepper-vertical-gap);
+  row-gap: 0;
+}
+
+.al-stepper--vertical .al-stepper__step::before {
+  display: none;
+}
+
+.al-stepper--vertical .al-stepper__step::after {
+  grid-row: 2;
+  grid-column: 1;
+  justify-self: center;
+  align-self: stretch;
+  inline-size: var(--al-stepper-connector-thickness);
+  block-size: auto;
+  margin-block: var(--al-stepper-vertical-rail-gap);
+}
+
+.al-stepper--vertical .al-stepper__step:last-child::after {
+  display: none;
+}
+
+.al-stepper--vertical .al-stepper__indicator {
+  grid-column: 1;
+}
+
+.al-stepper--vertical .al-stepper__text {
+  grid-row: 1 / span 2;
+  grid-column: 2;
+  padding-block: calc((var(--al-stepper-indicator-size) - var(--al-stepper-line-height)) / 2)
+                 var(--al-stepper-vertical-step-gap);
+  padding-inline: 0;
+  text-align: start;
+}
+
+.al-stepper--vertical .al-stepper__step:last-child .al-stepper__text {
+  padding-block-end: 0;
+}
+
+/* ----------------------------------------------------------- indicator */
+.al-stepper__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: var(--al-stepper-indicator-size);
+  block-size: var(--al-stepper-indicator-size);
+  border: var(--al-stepper-indicator-border-width) solid var(--al-stepper-upcoming-border);
+  border-radius: var(--al-stepper-indicator-radius);
+  background-color: var(--al-stepper-upcoming-bg);
+  color: var(--al-stepper-upcoming-number);
+  font-size: var(--al-stepper-font-size);
+  line-height: var(--al-stepper-line-height);
+  font-weight: var(--al-stepper-font-weight);
+  font-variant-numeric: tabular-nums;
+}
+
+.al-stepper__indicator .al-icon {
+  --al-icon-box: var(--al-stepper-icon-size);
+}
+
+.al-stepper__step--completed .al-stepper__indicator {
+  border-color: var(--al-stepper-completed-border);
+  background-color: var(--al-stepper-completed-bg);
+  color: var(--al-stepper-completed-icon);
+}
+
+.al-stepper__step[aria-current='step'] .al-stepper__indicator {
+  border-color: var(--al-stepper-current-bg);
+  background-color: var(--al-stepper-current-bg);
+  color: var(--al-stepper-current-number);
+}
+
+/* ---------------------------------------------------------------- text */
+.al-stepper__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--al-stepper-text-gap);
+}
+
+.al-stepper__label {
+  font-size: var(--al-stepper-font-size);
+  line-height: var(--al-stepper-line-height);
+  font-weight: var(--al-stepper-font-weight);
+  color: var(--al-stepper-label-upcoming);
+}
+
+.al-stepper__step--completed .al-stepper__label,
+.al-stepper__step[aria-current='step'] .al-stepper__label {
+  color: var(--al-stepper-label);
+}
+
+.al-stepper__description {
+  font-size: var(--al-stepper-description-font-size);
+  line-height: var(--al-stepper-description-line-height);
+  font-weight: var(--al-stepper-description-font-weight);
+  color: var(--al-stepper-description);
+}
+
+/* Read, never seen (rule 19). One border-width is the 1px box the pattern
+   needs; clip-path hides it. */
+.al-stepper__status {
+  position: absolute;
+  inline-size: var(--al-border-width-1);
+  block-size: var(--al-border-width-1);
+  overflow: hidden;
+  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/components/stepper.css

@@ -0,0 +1,264 @@
+/* AL Design System - Stepper tokens
+ * GENERATED by src/components/stepper/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-stepper-label: var(--al-text-primary);
+  --al-stepper-label-upcoming: var(--al-text-secondary);
+  --al-stepper-description: var(--al-text-secondary);
+  --al-stepper-completed-bg: var(--al-bg-brand-subtle);
+  --al-stepper-completed-border: var(--al-border-brand);
+  --al-stepper-completed-icon: var(--al-text-brand);
+  --al-stepper-current-bg: var(--al-bg-brand);
+  --al-stepper-current-number: var(--al-text-on-brand);
+  --al-stepper-upcoming-bg: var(--al-bg-surface);
+  --al-stepper-upcoming-border: var(--al-border-strong);
+  --al-stepper-upcoming-number: var(--al-text-secondary);
+  --al-stepper-connector: var(--al-border-default);
+  --al-stepper-connector-done: var(--al-border-brand);
+
+  /* geometry */
+  --al-stepper-indicator-size: var(--al-space-32);
+  --al-stepper-indicator-radius: var(--al-radius-full);
+  --al-stepper-indicator-border-width: var(--al-border-width-1);
+  --al-stepper-icon-size: var(--al-icon-size-16);
+  --al-stepper-connector-thickness: var(--al-border-width-1);
+  --al-stepper-text-gap: var(--al-space-2);
+  --al-stepper-horizontal-gap: var(--al-space-8);
+  --al-stepper-horizontal-text-padding: var(--al-space-8);
+  --al-stepper-vertical-gap: var(--al-space-12);
+  --al-stepper-vertical-rail-gap: var(--al-space-4);
+  --al-stepper-vertical-step-gap: var(--al-space-24);
+
+  /* type - title and number like label-md, description like body-sm */
+  --al-stepper-font-size: var(--al-font-size-sm);
+  --al-stepper-line-height: var(--al-line-height-sm);
+  --al-stepper-font-weight: var(--al-font-weight-medium);
+  --al-stepper-description-font-size: var(--al-font-size-sm);
+  --al-stepper-description-line-height: var(--al-line-height-sm);
+  --al-stepper-description-font-weight: var(--al-font-weight-regular);
+}
+
+/* AL Design System - Stepper
+ *
+ * Depends on: al-foundation.css, al-stepper-tokens.css, al-icon-tokens.css + icon.css
+ *
+ *   .al-stepper                 Horizontal - title under the circle, one line
+ *   .al-stepper--vertical       Vertical   - rail on the left, text on the right
+ *
+ * Markup (usage rules 17-19): an <ol> inside <nav aria-label="Progress">.
+ * Status is a class on the step; the current one also carries
+ * aria-current="step", and that attribute is what styles it, so the look can
+ * never disagree with what is announced. Each step spells its status out in
+ * hidden text - the check and the color say nothing to a screen reader.
+ *
+ *   <nav aria-label="Progress">
+ *     <ol class="al-stepper">
+ *       <li class="al-stepper__step al-stepper__step--completed">
+ *         <span class="al-stepper__indicator">
+ *           <svg class="al-icon" viewBox="0 0 24 24" aria-hidden="true" focusable="false">…check…</svg>
+ *         </span>
+ *         <span class="al-stepper__text">
+ *           <span class="al-stepper__label">Account</span>
+ *           <span class="al-stepper__status">completed</span>
+ *           <span class="al-stepper__description">Optional description</span>
+ *         </span>
+ *       </li>
+ *       <li class="al-stepper__step" aria-current="step">
+ *         <span class="al-stepper__indicator" aria-hidden="true">2</span> …
+ *       </li>
+ *       <li class="al-stepper__step"> … upcoming … </li>
+ *     </ol>
+ *   </nav>
+ *
+ * NOT CLICKABLE (rule 24): no hover, no focus, no link. Moving between steps
+ * is the form's Back / Continue.
+ *
+ * ONE CONTINUOUS LINE (rule 15): each horizontal step draws half a line on
+ * each side of its circle (::before / ::after) and the steps touch, so the
+ * halves join. The line before a step is brand when the step is completed or
+ * current; the line after, only when completed. The outer halves stay
+ * unpainted - they keep the circle centered over the title.
+ *
+ * THE BORDER IS ALWAYS THERE: the current step paints it in its own fill, so
+ * the circle never changes size between states.
+ *
+ * NO TOKEN, ON PURPOSE: the vertical text drops by (circle - line) / 2 so the
+ * title's first line centers on the circle.
+ */
+
+.al-stepper {
+  display: flex;
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  font-family: var(--al-font-sans);
+}
+
+/* ---------------------------------------------------------- horizontal */
+.al-stepper__step {
+  display: grid;
+  flex: 1 1 0;
+  grid-template-columns: 1fr var(--al-stepper-indicator-size) 1fr;
+  align-items: center;
+  align-content: start;
+  row-gap: var(--al-stepper-horizontal-gap);
+  min-inline-size: 0;
+}
+
+.al-stepper__step::before,
+.al-stepper__step::after {
+  content: '';
+  grid-row: 1;
+  block-size: var(--al-stepper-connector-thickness);
+  background-color: var(--al-stepper-connector);
+}
+
+.al-stepper__step::before { grid-column: 1; }
+.al-stepper__step::after  { grid-column: 3; }
+
+.al-stepper__step--completed::before,
+.al-stepper__step--completed::after,
+.al-stepper__step[aria-current='step']::before {
+  background-color: var(--al-stepper-connector-done);
+}
+
+.al-stepper__step:first-child::before,
+.al-stepper__step:last-child::after {
+  background-color: transparent;
+}
+
+.al-stepper__indicator {
+  grid-row: 1;
+  grid-column: 2;
+}
+
+.al-stepper__text {
+  grid-row: 2;
+  grid-column: 1 / -1;
+  padding-inline: var(--al-stepper-horizontal-text-padding);
+  text-align: center;
+}
+
+/* ------------------------------------------------------------ vertical */
+.al-stepper--vertical {
+  flex-direction: column;
+}
+
+.al-stepper--vertical .al-stepper__step {
+  flex: none;
+  grid-template-columns: var(--al-stepper-indicator-size) 1fr;
+  grid-template-rows: auto 1fr;
+  align-items: start;
+  column-gap: var(--al-stepper-vertical-gap);
+  row-gap: 0;
+}
+
+.al-stepper--vertical .al-stepper__step::before {
+  display: none;
+}
+
+.al-stepper--vertical .al-stepper__step::after {
+  grid-row: 2;
+  grid-column: 1;
+  justify-self: center;
+  align-self: stretch;
+  inline-size: var(--al-stepper-connector-thickness);
+  block-size: auto;
+  margin-block: var(--al-stepper-vertical-rail-gap);
+}
+
+.al-stepper--vertical .al-stepper__step:last-child::after {
+  display: none;
+}
+
+.al-stepper--vertical .al-stepper__indicator {
+  grid-column: 1;
+}
+
+.al-stepper--vertical .al-stepper__text {
+  grid-row: 1 / span 2;
+  grid-column: 2;
+  padding-block: calc((var(--al-stepper-indicator-size) - var(--al-stepper-line-height)) / 2)
+                 var(--al-stepper-vertical-step-gap);
+  padding-inline: 0;
+  text-align: start;
+}
+
+.al-stepper--vertical .al-stepper__step:last-child .al-stepper__text {
+  padding-block-end: 0;
+}
+
+/* ----------------------------------------------------------- indicator */
+.al-stepper__indicator {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  inline-size: var(--al-stepper-indicator-size);
+  block-size: var(--al-stepper-indicator-size);
+  border: var(--al-stepper-indicator-border-width) solid var(--al-stepper-upcoming-border);
+  border-radius: var(--al-stepper-indicator-radius);
+  background-color: var(--al-stepper-upcoming-bg);
+  color: var(--al-stepper-upcoming-number);
+  font-size: var(--al-stepper-font-size);
+  line-height: var(--al-stepper-line-height);
+  font-weight: var(--al-stepper-font-weight);
+  font-variant-numeric: tabular-nums;
+}
+
+.al-stepper__indicator .al-icon {
+  --al-icon-box: var(--al-stepper-icon-size);
+}
+
+.al-stepper__step--completed .al-stepper__indicator {
+  border-color: var(--al-stepper-completed-border);
+  background-color: var(--al-stepper-completed-bg);
+  color: var(--al-stepper-completed-icon);
+}
+
+.al-stepper__step[aria-current='step'] .al-stepper__indicator {
+  border-color: var(--al-stepper-current-bg);
+  background-color: var(--al-stepper-current-bg);
+  color: var(--al-stepper-current-number);
+}
+
+/* ---------------------------------------------------------------- text */
+.al-stepper__text {
+  display: flex;
+  flex-direction: column;
+  gap: var(--al-stepper-text-gap);
+}
+
+.al-stepper__label {
+  font-size: var(--al-stepper-font-size);
+  line-height: var(--al-stepper-line-height);
+  font-weight: var(--al-stepper-font-weight);
+  color: var(--al-stepper-label-upcoming);
+}
+
+.al-stepper__step--completed .al-stepper__label,
+.al-stepper__step[aria-current='step'] .al-stepper__label {
+  color: var(--al-stepper-label);
+}
+
+.al-stepper__description {
+  font-size: var(--al-stepper-description-font-size);
+  line-height: var(--al-stepper-description-line-height);
+  font-weight: var(--al-stepper-description-font-weight);
+  color: var(--al-stepper-description);
+}
+
+/* Read, never seen (rule 19). One border-width is the 1px box the pattern
+   needs; clip-path hides it. */
+.al-stepper__status {
+  position: absolute;
+  inline-size: var(--al-border-width-1);
+  block-size: var(--al-border-width-1);
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}

package/dist/foundation.css

@@ -1,5 +1,5 @@
 /* AL Design System - Foundation
- * v1.5.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.5.0",
+    "version": "1.7.0",
     "license": "MIT",
     "brandAnchor": "#FC5000",
     "colorSpace": "OKLCH",

package/package.json

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