al-design-system 1.2.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 + 25 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,6 +40,7 @@ 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) |
@@ -56,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.2.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.
@@ -65,7 +66,7 @@ Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/r
 
 | File | What it is |
 |---|---|
-| `al.css` | Foundation + all 25 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 + 25 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,6 +40,7 @@ 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) |
@@ -56,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.2.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.
@@ -65,7 +66,7 @@ Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-syste
 
 | Arquivo | O que é |
 |---|---|
-| `al.css` | Foundation + os 25 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.2.0 - Foundation + 25 components.
+/* AL Design System 1.3.0 - Foundation + 26 components.
  * MIT. https://github.com/guilhermedworakowski/al-design-system
  */
 /* AL Design System - Foundation
- * v1.2.0 - MIT
+ * v1.3.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 
@@ -7046,3 +7046,200 @@
 @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/foundation.css

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

package/package.json

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