al-design-system 1.5.0 → 1.6.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 + 29 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,6 +43,7 @@ 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) |
@@ -59,7 +60,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.6.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 +69,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 29 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 + 29 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,6 +43,7 @@ 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) |
@@ -59,7 +60,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.6.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 +69,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 29 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.6.0 - Foundation + 29 components.
  * MIT. https://github.com/guilhermedworakowski/al-design-system
  */
 /* AL Design System - Foundation
- * v1.5.0 - MIT
+ * v1.6.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 
@@ -7844,3 +7844,268 @@
     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;
+}

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.6.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.6.0",
     "license": "MIT",
     "brandAnchor": "#FC5000",
     "colorSpace": "OKLCH",

package/package.json

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