al-design-system 1.1.0 → 1.3.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 + 24 components**, designed in Figma and coded from the same tokens.
+- **Foundation + 26 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.
@@ -40,9 +40,11 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
 | | Drawer | ✓ | [guidelines](src/components/drawer/guidelines.md) |
 | Navigation | Sidebar | ✓ | [guidelines](src/components/sidebar/guidelines.md) |
 | | Breadcrumb | ✓ | [guidelines](src/components/breadcrumb/guidelines.md) |
+| | Pagination | | [guidelines](src/components/pagination/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) |
 
 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.
 
@@ -55,7 +57,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.1.0/dist/al.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.3.0/dist/al.css">
 ```
 
 Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/releases) also carries the `dist/` folder as a zip.
@@ -64,7 +66,7 @@ Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/r
 
 | File | What it is |
 |---|---|
-| `al.css` | Foundation + all 24 components, in one file |
+| `al.css` | Foundation + all 26 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 9 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 + 24 componentes**, desenhados no Figma e codados a partir dos mesmos tokens.
+- **Foundation + 26 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ó.
@@ -40,9 +40,11 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
 | | Drawer | ✓ | [diretrizes](src/components/drawer/guidelines.md) |
 | Navegação | Sidebar | ✓ | [diretrizes](src/components/sidebar/guidelines.md) |
 | | Breadcrumb | ✓ | [diretrizes](src/components/breadcrumb/guidelines.md) |
+| | Pagination | | [diretrizes](src/components/pagination/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) |
 
 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.
 
@@ -55,7 +57,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.1.0/dist/al.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.3.0/dist/al.css">
 ```
 
 Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-system/releases) também traz a pasta `dist/` num zip.
@@ -64,7 +66,7 @@ Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-syste
 
 | Arquivo | O que é |
 |---|---|
-| `al.css` | Foundation + os 24 componentes, num arquivo só |
+| `al.css` | Foundation + os 26 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 9 componentes que têm script |

package/dist/al.css

@@ -1,8 +1,8 @@
-/* AL Design System 1.1.0 - Foundation + 24 components.
+/* AL Design System 1.3.0 - Foundation + 26 components.
  * MIT. https://github.com/guilhermedworakowski/al-design-system
  */
 /* AL Design System - Foundation
- * v1.1.0 - MIT
+ * v1.3.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 
@@ -90,6 +90,7 @@
   --al-bg-active-raised: #E0E0E0;
   --al-bg-thumb: #B3B3B3;
   --al-bg-thumb-disabled: #CECECE;
+  --al-bg-track: #E0E0E0;
   --al-bg-scrim: #1818188F;
   --al-bg-brand: #FC5000;
   --al-bg-brand-hover: #C53900;
@@ -247,6 +248,7 @@
     --al-bg-active-raised: #717171;
     --al-bg-thumb: #717171;
     --al-bg-thumb-disabled: #565656;
+    --al-bg-track: #565656;
     --al-bg-scrim: #000000A3;
     --al-bg-brand: #FC5000;
     --al-bg-brand-hover: #EA4900;
@@ -312,6 +314,7 @@
   --al-bg-active-raised: #717171;
   --al-bg-thumb: #717171;
   --al-bg-thumb-disabled: #565656;
+  --al-bg-track: #565656;
   --al-bg-scrim: #000000A3;
   --al-bg-brand: #FC5000;
   --al-bg-brand-hover: #EA4900;
@@ -6927,3 +6930,316 @@
 @media (prefers-reduced-motion: reduce) {
   .al-link { transition: none; }
 }
+
+/* AL Design System - Progress tokens
+ * GENERATED by src/components/progress/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-progress-track-bg: var(--al-bg-track);
+  --al-progress-fill-bg: var(--al-bg-brand);
+  --al-progress-label-text: var(--al-text-primary);
+  --al-progress-meta-text: var(--al-text-secondary);
+
+  /* geometry */
+  --al-progress-radius: var(--al-radius-full);
+  --al-progress-height: var(--al-space-8);
+  --al-progress-height-thin: var(--al-space-4);
+  --al-progress-gap: var(--al-space-8);
+
+  /* type - label and meta share one style */
+  --al-progress-font-size: var(--al-font-size-sm);
+  --al-progress-line-height: var(--al-line-height-sm);
+  --al-progress-font-weight: var(--al-font-weight-regular);
+}
+
+/* AL Design System - Progress
+ *
+ * Determinate only. The bar is a native <progress value max>: the browser
+ * exposes the value to assistive tech with no extra ARIA, and the name comes
+ * from the visible label through aria-labelledby (Thin: aria-label).
+ *
+ * Three types, one block:
+ *   .al-progress               Label - label + percentage over an 8px bar
+ *   .al-progress--steps        Steps - "N of total" in the meta ink
+ *   .al-progress--thin         Thin  - a 4px bar alone, no header
+ *
+ * The bar is never the only carrier of progress (usage rule 22): that is what
+ * pays the declared fill-on-track exception. No focus, no aria-live - the end
+ * of the task is announced by a Toast or an Alert, not by the bar.
+ *
+ * <progress> needs vendor pseudo-elements: WebKit/Blink draw the track in
+ * ::-webkit-progress-bar and the fill in ::-webkit-progress-value; Firefox
+ * paints the track on the element and the fill in ::-moz-progress-bar.
+ */
+
+.al-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--al-progress-gap);
+  inline-size: 100%;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-progress-font-size);
+  line-height: var(--al-progress-line-height);
+  font-weight: var(--al-progress-font-weight);
+}
+
+.al-progress__header {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--al-progress-gap);
+}
+
+.al-progress__label {
+  color: var(--al-progress-label-text);
+}
+
+/* percentage; tabular figures keep it from jittering as it counts up */
+.al-progress__value {
+  flex: none;
+  color: var(--al-progress-meta-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.al-progress--steps .al-progress__label {
+  color: var(--al-progress-meta-text);
+}
+
+/* ----------------------------------------------------------------- bar */
+.al-progress__bar {
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  inline-size: 100%;
+  block-size: var(--al-progress-height);
+  border: none;
+  border-radius: var(--al-progress-radius);
+  overflow: hidden;
+  background-color: var(--al-progress-track-bg);
+  color: var(--al-progress-fill-bg);
+}
+
+.al-progress--thin .al-progress__bar {
+  block-size: var(--al-progress-height-thin);
+}
+
+.al-progress__bar::-webkit-progress-bar {
+  background-color: var(--al-progress-track-bg);
+  border-radius: var(--al-progress-radius);
+}
+
+/* the width change is the only motion: no shimmer, no loop (rule 23) */
+.al-progress__bar::-webkit-progress-value {
+  background-color: var(--al-progress-fill-bg);
+  border-radius: var(--al-progress-radius);
+  transition: inline-size var(--al-motion-duration-feedback) var(--al-motion-easing-enter);
+}
+
+.al-progress__bar::-moz-progress-bar {
+  background-color: var(--al-progress-fill-bg);
+  border-radius: var(--al-progress-radius);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .al-progress__bar::-webkit-progress-value { transition: none; }
+}
+
+/* AL Design System - Progress tokens
+ * GENERATED by src/components/pagination/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-pagination-item-label: var(--al-text-primary);
+  --al-pagination-item-bg-hover: var(--al-bg-hover);
+  --al-pagination-item-bg-active: var(--al-bg-active);
+  --al-pagination-ellipsis: var(--al-text-secondary);
+  --al-pagination-current-bg: var(--al-bg-brand-subtle);
+  --al-pagination-current-label: var(--al-text-brand);
+  --al-pagination-current-bg-hover: var(--al-bg-brand-hover);
+  --al-pagination-current-bg-active: var(--al-bg-brand-active);
+  --al-pagination-current-label-hover: var(--al-text-on-brand);
+  --al-pagination-range-text: var(--al-text-secondary);
+
+  /* geometry */
+  --al-pagination-item-padding: var(--al-space-8);
+  --al-pagination-item-radius: var(--al-radius-full);
+  --al-pagination-gap: var(--al-space-4);
+  --al-pagination-range-gap: var(--al-space-16);
+  --al-pagination-rows-gap: var(--al-space-8);
+
+  /* type - page numbers like the Button sm, range like body-sm */
+  --al-pagination-font-size: var(--al-font-size-sm);
+  --al-pagination-line-height: var(--al-line-height-sm);
+  --al-pagination-font-weight: var(--al-font-weight-medium);
+  --al-pagination-range-font-weight: var(--al-font-weight-regular);
+}
+
+/* AL Design System - Pagination
+ *
+ * Four types, one block. Previous, Next and Load more are Buttons (Ghost sm,
+ * Secondary sm) and rows per page is the Select: this file only lays them out
+ * and draws what is the Pagination's own - the page items and the range text.
+ *
+ *   .al-pagination                 Numbered - previous, pages, next
+ *   .al-pagination--simple         Simple   - previous and next only
+ *   .al-pagination--load-more      Load more - one Secondary Button
+ *   .al-pagination--range          Range    - "Showing 41-60 of 312" + rows
+ *
+ * Markup (usage rules 20-22): a <nav aria-label="Pagination"> with the pages
+ * in a <ul>. A page is an <a> when it changes the URL and a <button> when it
+ * swaps content in place. The current page carries aria-current="page" - that
+ * is what styles it, so the look can never disagree with what is announced.
+ * The ellipsis is aria-hidden: it is not a control (rule 10).
+ *
+ * Disabled previous/next is the Button's own disabled state (rule 16), not a
+ * Pagination style.
+ *
+ * NEVER ON SURFACE-RAISED (rule 8): the hovers use bg-hover/bg-active, which
+ * vanish on the raised surface.
+ *
+ * NO HEIGHT: 36 = padding 8 + line 20 + padding 8. min-inline-size uses the
+ * same sum so a one-digit page stays a circle and "16" grows into a pill.
+ */
+
+/* ONE LINE (decided with Gui on 2026-10-21): wrapping split Previous, the
+   pages and Next into three rows. The row never wraps; when it does not fit,
+   the CONTAINER scrolls sideways (overflow-x: auto, with room for the focus
+   ring). Range is the exception: text and rows may wrap. */
+.al-pagination {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--al-pagination-gap);
+  inline-size: max-content;
+}
+
+.al-pagination--range {
+  flex-wrap: wrap;
+  inline-size: auto;
+}
+
+.al-pagination__pages {
+  display: flex;
+  align-items: center;
+  gap: var(--al-pagination-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* ------------------------------------------------------------- page item */
+.al-pagination__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-inline-size: calc(var(--al-pagination-item-padding) * 2 + var(--al-pagination-line-height));
+  margin: 0;
+  padding: var(--al-pagination-item-padding);
+  border: 0;
+  border-radius: var(--al-pagination-item-radius);
+  background-color: transparent;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-pagination-font-size);
+  line-height: var(--al-pagination-line-height);
+  font-weight: var(--al-pagination-font-weight);
+  font-variant-numeric: tabular-nums;
+  color: var(--al-pagination-item-label);
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--al-motion-duration-feedback) var(--al-motion-easing-exit), color var(--al-motion-duration-feedback) var(--al-motion-easing-exit), box-shadow var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
+}
+
+.al-pagination__item:hover {
+  background-color: var(--al-pagination-item-bg-hover);
+}
+
+.al-pagination__item:active {
+  background-color: var(--al-pagination-item-bg-active);
+}
+
+/* focus is rest plus the ring, keyboard only */
+.al-pagination__item:focus-visible {
+  outline: none;
+  box-shadow: var(--al-focus-ring-default);
+}
+
+/* current: tonal at rest and focus, brand on hover and pressed (rule 19) */
+.al-pagination__item[aria-current="page"] {
+  background-color: var(--al-pagination-current-bg);
+  color: var(--al-pagination-current-label);
+}
+
+.al-pagination__item[aria-current="page"]:hover {
+  background-color: var(--al-pagination-current-bg-hover);
+  color: var(--al-pagination-current-label-hover);
+}
+
+.al-pagination__item[aria-current="page"]:active {
+  background-color: var(--al-pagination-current-bg-active);
+  color: var(--al-pagination-current-label-hover);
+}
+
+/* ENTER - destination states take the enter curve, as in the Tab */
+.al-pagination__item:hover,
+.al-pagination__item:active,
+.al-pagination__item:focus-visible {
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+/* ------------------------------------------------------------- ellipsis */
+.al-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: calc(var(--al-pagination-item-padding) * 2 + var(--al-pagination-line-height));
+  padding: var(--al-pagination-item-padding);
+  box-sizing: border-box;
+  color: var(--al-pagination-ellipsis);
+}
+
+/* ---------------------------------------------------------------- range */
+.al-pagination--range {
+  gap: var(--al-pagination-range-gap);
+}
+
+.al-pagination__range,
+.al-pagination__rows-label {
+  margin: 0;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-pagination-font-size);
+  line-height: var(--al-pagination-line-height);
+  font-weight: var(--al-pagination-range-font-weight);
+  font-variant-numeric: tabular-nums;
+  color: var(--al-pagination-range-text);
+}
+
+.al-pagination__rows {
+  display: flex;
+  align-items: center;
+  gap: var(--al-pagination-rows-gap);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .al-pagination__item {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .al-pagination__item[aria-current="page"] {
+    outline: var(--al-border-width-1) solid CanvasText;
+  }
+
+  .al-pagination__item:focus-visible {
+    outline: var(--al-border-width-focus) solid Highlight;
+    outline-offset: var(--al-border-focus-offset);
+  }
+}

package/dist/components/pagination.css

@@ -0,0 +1,196 @@
+/* AL Design System - Progress tokens
+ * GENERATED by src/components/pagination/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-pagination-item-label: var(--al-text-primary);
+  --al-pagination-item-bg-hover: var(--al-bg-hover);
+  --al-pagination-item-bg-active: var(--al-bg-active);
+  --al-pagination-ellipsis: var(--al-text-secondary);
+  --al-pagination-current-bg: var(--al-bg-brand-subtle);
+  --al-pagination-current-label: var(--al-text-brand);
+  --al-pagination-current-bg-hover: var(--al-bg-brand-hover);
+  --al-pagination-current-bg-active: var(--al-bg-brand-active);
+  --al-pagination-current-label-hover: var(--al-text-on-brand);
+  --al-pagination-range-text: var(--al-text-secondary);
+
+  /* geometry */
+  --al-pagination-item-padding: var(--al-space-8);
+  --al-pagination-item-radius: var(--al-radius-full);
+  --al-pagination-gap: var(--al-space-4);
+  --al-pagination-range-gap: var(--al-space-16);
+  --al-pagination-rows-gap: var(--al-space-8);
+
+  /* type - page numbers like the Button sm, range like body-sm */
+  --al-pagination-font-size: var(--al-font-size-sm);
+  --al-pagination-line-height: var(--al-line-height-sm);
+  --al-pagination-font-weight: var(--al-font-weight-medium);
+  --al-pagination-range-font-weight: var(--al-font-weight-regular);
+}
+
+/* AL Design System - Pagination
+ *
+ * Four types, one block. Previous, Next and Load more are Buttons (Ghost sm,
+ * Secondary sm) and rows per page is the Select: this file only lays them out
+ * and draws what is the Pagination's own - the page items and the range text.
+ *
+ *   .al-pagination                 Numbered - previous, pages, next
+ *   .al-pagination--simple         Simple   - previous and next only
+ *   .al-pagination--load-more      Load more - one Secondary Button
+ *   .al-pagination--range          Range    - "Showing 41-60 of 312" + rows
+ *
+ * Markup (usage rules 20-22): a <nav aria-label="Pagination"> with the pages
+ * in a <ul>. A page is an <a> when it changes the URL and a <button> when it
+ * swaps content in place. The current page carries aria-current="page" - that
+ * is what styles it, so the look can never disagree with what is announced.
+ * The ellipsis is aria-hidden: it is not a control (rule 10).
+ *
+ * Disabled previous/next is the Button's own disabled state (rule 16), not a
+ * Pagination style.
+ *
+ * NEVER ON SURFACE-RAISED (rule 8): the hovers use bg-hover/bg-active, which
+ * vanish on the raised surface.
+ *
+ * NO HEIGHT: 36 = padding 8 + line 20 + padding 8. min-inline-size uses the
+ * same sum so a one-digit page stays a circle and "16" grows into a pill.
+ */
+
+/* ONE LINE (decided with Gui on 2026-10-21): wrapping split Previous, the
+   pages and Next into three rows. The row never wraps; when it does not fit,
+   the CONTAINER scrolls sideways (overflow-x: auto, with room for the focus
+   ring). Range is the exception: text and rows may wrap. */
+.al-pagination {
+  display: flex;
+  flex-wrap: nowrap;
+  align-items: center;
+  gap: var(--al-pagination-gap);
+  inline-size: max-content;
+}
+
+.al-pagination--range {
+  flex-wrap: wrap;
+  inline-size: auto;
+}
+
+.al-pagination__pages {
+  display: flex;
+  align-items: center;
+  gap: var(--al-pagination-gap);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}
+
+/* ------------------------------------------------------------- page item */
+.al-pagination__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  box-sizing: border-box;
+  min-inline-size: calc(var(--al-pagination-item-padding) * 2 + var(--al-pagination-line-height));
+  margin: 0;
+  padding: var(--al-pagination-item-padding);
+  border: 0;
+  border-radius: var(--al-pagination-item-radius);
+  background-color: transparent;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-pagination-font-size);
+  line-height: var(--al-pagination-line-height);
+  font-weight: var(--al-pagination-font-weight);
+  font-variant-numeric: tabular-nums;
+  color: var(--al-pagination-item-label);
+  text-decoration: none;
+  cursor: pointer;
+  -webkit-tap-highlight-color: transparent;
+  transition: background-color var(--al-motion-duration-feedback) var(--al-motion-easing-exit), color var(--al-motion-duration-feedback) var(--al-motion-easing-exit), box-shadow var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
+}
+
+.al-pagination__item:hover {
+  background-color: var(--al-pagination-item-bg-hover);
+}
+
+.al-pagination__item:active {
+  background-color: var(--al-pagination-item-bg-active);
+}
+
+/* focus is rest plus the ring, keyboard only */
+.al-pagination__item:focus-visible {
+  outline: none;
+  box-shadow: var(--al-focus-ring-default);
+}
+
+/* current: tonal at rest and focus, brand on hover and pressed (rule 19) */
+.al-pagination__item[aria-current="page"] {
+  background-color: var(--al-pagination-current-bg);
+  color: var(--al-pagination-current-label);
+}
+
+.al-pagination__item[aria-current="page"]:hover {
+  background-color: var(--al-pagination-current-bg-hover);
+  color: var(--al-pagination-current-label-hover);
+}
+
+.al-pagination__item[aria-current="page"]:active {
+  background-color: var(--al-pagination-current-bg-active);
+  color: var(--al-pagination-current-label-hover);
+}
+
+/* ENTER - destination states take the enter curve, as in the Tab */
+.al-pagination__item:hover,
+.al-pagination__item:active,
+.al-pagination__item:focus-visible {
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+/* ------------------------------------------------------------- ellipsis */
+.al-pagination__ellipsis {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  min-inline-size: calc(var(--al-pagination-item-padding) * 2 + var(--al-pagination-line-height));
+  padding: var(--al-pagination-item-padding);
+  box-sizing: border-box;
+  color: var(--al-pagination-ellipsis);
+}
+
+/* ---------------------------------------------------------------- range */
+.al-pagination--range {
+  gap: var(--al-pagination-range-gap);
+}
+
+.al-pagination__range,
+.al-pagination__rows-label {
+  margin: 0;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-pagination-font-size);
+  line-height: var(--al-pagination-line-height);
+  font-weight: var(--al-pagination-range-font-weight);
+  font-variant-numeric: tabular-nums;
+  color: var(--al-pagination-range-text);
+}
+
+.al-pagination__rows {
+  display: flex;
+  align-items: center;
+  gap: var(--al-pagination-rows-gap);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .al-pagination__item {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .al-pagination__item[aria-current="page"] {
+    outline: var(--al-border-width-1) solid CanvasText;
+  }
+
+  .al-pagination__item:focus-visible {
+    outline: var(--al-border-width-focus) solid Highlight;
+    outline-offset: var(--al-border-focus-offset);
+  }
+}

package/dist/components/progress.css

@@ -0,0 +1,115 @@
+/* AL Design System - Progress tokens
+ * GENERATED by src/components/progress/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-progress-track-bg: var(--al-bg-track);
+  --al-progress-fill-bg: var(--al-bg-brand);
+  --al-progress-label-text: var(--al-text-primary);
+  --al-progress-meta-text: var(--al-text-secondary);
+
+  /* geometry */
+  --al-progress-radius: var(--al-radius-full);
+  --al-progress-height: var(--al-space-8);
+  --al-progress-height-thin: var(--al-space-4);
+  --al-progress-gap: var(--al-space-8);
+
+  /* type - label and meta share one style */
+  --al-progress-font-size: var(--al-font-size-sm);
+  --al-progress-line-height: var(--al-line-height-sm);
+  --al-progress-font-weight: var(--al-font-weight-regular);
+}
+
+/* AL Design System - Progress
+ *
+ * Determinate only. The bar is a native <progress value max>: the browser
+ * exposes the value to assistive tech with no extra ARIA, and the name comes
+ * from the visible label through aria-labelledby (Thin: aria-label).
+ *
+ * Three types, one block:
+ *   .al-progress               Label - label + percentage over an 8px bar
+ *   .al-progress--steps        Steps - "N of total" in the meta ink
+ *   .al-progress--thin         Thin  - a 4px bar alone, no header
+ *
+ * The bar is never the only carrier of progress (usage rule 22): that is what
+ * pays the declared fill-on-track exception. No focus, no aria-live - the end
+ * of the task is announced by a Toast or an Alert, not by the bar.
+ *
+ * <progress> needs vendor pseudo-elements: WebKit/Blink draw the track in
+ * ::-webkit-progress-bar and the fill in ::-webkit-progress-value; Firefox
+ * paints the track on the element and the fill in ::-moz-progress-bar.
+ */
+
+.al-progress {
+  display: flex;
+  flex-direction: column;
+  gap: var(--al-progress-gap);
+  inline-size: 100%;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-progress-font-size);
+  line-height: var(--al-progress-line-height);
+  font-weight: var(--al-progress-font-weight);
+}
+
+.al-progress__header {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--al-progress-gap);
+}
+
+.al-progress__label {
+  color: var(--al-progress-label-text);
+}
+
+/* percentage; tabular figures keep it from jittering as it counts up */
+.al-progress__value {
+  flex: none;
+  color: var(--al-progress-meta-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.al-progress--steps .al-progress__label {
+  color: var(--al-progress-meta-text);
+}
+
+/* ----------------------------------------------------------------- bar */
+.al-progress__bar {
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  inline-size: 100%;
+  block-size: var(--al-progress-height);
+  border: none;
+  border-radius: var(--al-progress-radius);
+  overflow: hidden;
+  background-color: var(--al-progress-track-bg);
+  color: var(--al-progress-fill-bg);
+}
+
+.al-progress--thin .al-progress__bar {
+  block-size: var(--al-progress-height-thin);
+}
+
+.al-progress__bar::-webkit-progress-bar {
+  background-color: var(--al-progress-track-bg);
+  border-radius: var(--al-progress-radius);
+}
+
+/* the width change is the only motion: no shimmer, no loop (rule 23) */
+.al-progress__bar::-webkit-progress-value {
+  background-color: var(--al-progress-fill-bg);
+  border-radius: var(--al-progress-radius);
+  transition: inline-size var(--al-motion-duration-feedback) var(--al-motion-easing-enter);
+}
+
+.al-progress__bar::-moz-progress-bar {
+  background-color: var(--al-progress-fill-bg);
+  border-radius: var(--al-progress-radius);
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .al-progress__bar::-webkit-progress-value { transition: none; }
+}

package/dist/foundation.css

@@ -1,5 +1,5 @@
 /* AL Design System - Foundation
- * v1.1.0 - MIT
+ * v1.3.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 
@@ -87,6 +87,7 @@
   --al-bg-active-raised: #E0E0E0;
   --al-bg-thumb: #B3B3B3;
   --al-bg-thumb-disabled: #CECECE;
+  --al-bg-track: #E0E0E0;
   --al-bg-scrim: #1818188F;
   --al-bg-brand: #FC5000;
   --al-bg-brand-hover: #C53900;
@@ -244,6 +245,7 @@
     --al-bg-active-raised: #717171;
     --al-bg-thumb: #717171;
     --al-bg-thumb-disabled: #565656;
+    --al-bg-track: #565656;
     --al-bg-scrim: #000000A3;
     --al-bg-brand: #FC5000;
     --al-bg-brand-hover: #EA4900;
@@ -309,6 +311,7 @@
   --al-bg-active-raised: #717171;
   --al-bg-thumb: #717171;
   --al-bg-thumb-disabled: #565656;
+  --al-bg-track: #565656;
   --al-bg-scrim: #000000A3;
   --al-bg-brand: #FC5000;
   --al-bg-brand-hover: #EA4900;

package/dist/tokens.json

@@ -1,7 +1,7 @@
 {
   "meta": {
     "name": "AL Design System",
-    "version": "1.1.0",
+    "version": "1.3.0",
     "license": "MIT",
     "brandAnchor": "#FC5000",
     "colorSpace": "OKLCH",
@@ -151,6 +151,10 @@
         "#CECECE",
         "#565656"
       ],
+      "bg-track": [
+        "#E0E0E0",
+        "#565656"
+      ],
       "bg-scrim": [
         "#1818188F",
         "#000000A3"

package/package.json

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