al-design-system 1.7.0 → 1.8.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 + 30 components**, designed in Figma and coded from the same tokens.
+- **Foundation + 32 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.
@@ -34,6 +34,8 @@ An open-source design system, from Figma to code. Plain CSS, a little vanilla Ja
 | | Textarea | | [guidelines](src/components/textarea/guidelines.md) |
 | | Password | ✓ | [guidelines](src/components/password/guidelines.md) |
 | | Number field | ✓ | [guidelines](src/components/number-field/guidelines.md) |
+| | Slider | ✓ | [guidelines](src/components/slider/guidelines.md) |
+| | Rating | | [guidelines](src/components/rating/guidelines.md) |
 | Structure and overlays | Divider | | [guidelines](src/components/divider/guidelines.md) |
 | | Card | | [guidelines](src/components/card/guidelines.md) |
 | | Tab | ✓ | [guidelines](src/components/tab/guidelines.md) |
@@ -61,7 +63,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.7.0/dist/al.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.8.0/dist/al.css">
 ```
 
 Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/releases) also carries the `dist/` folder as a zip.
@@ -70,10 +72,10 @@ Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/r
 
 | File | What it is |
 |---|---|
-| `al.css` | Foundation + all 30 components, in one file |
+| `al.css` | Foundation + all 32 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 |
+| `components/<name>.js` | The behavior, for the 12 components that have a script |
 | `icons/*.svg`, `icons/icons.json` | The 70 icons |
 | `tokens.json` | The Foundation tokens, to read from code |
 
@@ -104,7 +106,7 @@ The exact markup of each component (which element, which attributes) is describe
 
 ### Scripts
 
-Password, Number field, Menu, Tab, Modal, Drawer, Sidebar, Breadcrumb, Tooltip, Toast and Alert need their script, loaded once per page. Each one wires up the components already on the page by itself:
+Password, Number field, Slider, Menu, Tab, Modal, Drawer, Sidebar, Breadcrumb, Tooltip, Toast and Alert need their script, loaded once per page. Each one wires up the components already on the page by itself:
 
 ```html
 <script src="node_modules/al-design-system/dist/components/modal.js" defer></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 + 30 componentes**, desenhados no Figma e codados a partir dos mesmos tokens.
+- **Foundation + 32 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ó.
@@ -34,6 +34,8 @@ Design system open source, do Figma ao código. CSS puro, um pouco de JavaScript
 | | Textarea | | [diretrizes](src/components/textarea/guidelines.md) |
 | | Password | ✓ | [diretrizes](src/components/password/guidelines.md) |
 | | Number field | ✓ | [diretrizes](src/components/number-field/guidelines.md) |
+| | Slider | ✓ | [diretrizes](src/components/slider/guidelines.md) |
+| | Rating | | [diretrizes](src/components/rating/guidelines.md) |
 | Estrutura e sobreposição | Divider | | [diretrizes](src/components/divider/guidelines.md) |
 | | Card | | [diretrizes](src/components/card/guidelines.md) |
 | | Tab | ✓ | [diretrizes](src/components/tab/guidelines.md) |
@@ -61,7 +63,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.7.0/dist/al.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.8.0/dist/al.css">
 ```
 
 Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-system/releases) também traz a pasta `dist/` num zip.
@@ -70,10 +72,10 @@ Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-syste
 
 | Arquivo | O que é |
 |---|---|
-| `al.css` | Foundation + os 30 componentes, num arquivo só |
+| `al.css` | Foundation + os 32 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 |
+| `components/<nome>.js` | O comportamento, para os 12 componentes que têm script |
 | `icons/*.svg`, `icons/icons.json` | Os 70 ícones |
 | `tokens.json` | Os tokens da Foundation, para ler por código |
 
@@ -104,7 +106,7 @@ A marcação exata de cada componente (qual elemento, quais atributos) está des
 
 ### Scripts
 
-Password, Number field, Menu, Tab, Modal, Drawer, Sidebar, Breadcrumb, Tooltip, Toast e Alert precisam do script, carregado uma vez por página. Cada um liga sozinho os componentes que já estão na página:
+Password, Number field, Slider, Menu, Tab, Modal, Drawer, Sidebar, Breadcrumb, Tooltip, Toast e Alert precisam do script, carregado uma vez por página. Cada um liga sozinho os componentes que já estão na página:
 
 ```html
 <script src="node_modules/al-design-system/dist/components/modal.js" defer></script>

package/dist/al.css

@@ -1,8 +1,8 @@
-/* AL Design System 1.7.0 - Foundation + 30 components.
+/* AL Design System 1.8.0 - Foundation + 32 components.
  * MIT. https://github.com/guilhermedworakowski/al-design-system
  */
 /* AL Design System - Foundation
- * v1.7.0 - MIT
+ * v1.8.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 
@@ -8253,3 +8253,429 @@
     outline: var(--al-empty-state-border-width) solid CanvasText;
   }
 }
+
+/* AL Design System - Slider tokens
+ * GENERATED by src/components/slider/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-slider-label-text: var(--al-text-primary);
+  --al-slider-value-text: var(--al-text-primary);
+  --al-slider-range-text: var(--al-text-secondary);
+  --al-slider-track-bg: var(--al-bg-track);
+  --al-slider-fill-bg: var(--al-bg-brand);
+  --al-slider-thumb-bg: var(--al-bg-brand);
+  --al-slider-thumb-bg-hover: var(--al-bg-brand-hover);
+  --al-slider-thumb-bg-active: var(--al-bg-brand-active);
+  --al-slider-thumb-focus-gap: var(--al-bg-canvas);
+  --al-slider-label-text-disabled: var(--al-text-disabled);
+  --al-slider-track-bg-disabled: var(--al-bg-disabled);
+  --al-slider-fill-bg-disabled: var(--al-text-disabled);
+  --al-slider-thumb-bg-disabled: var(--al-text-disabled);
+
+  /* geometry */
+  --al-slider-track-height: var(--al-space-4);
+  --al-slider-thumb-size: var(--al-space-20);
+  --al-slider-thumb-hit: var(--al-space-24);
+  --al-slider-radius: var(--al-radius-full);
+  --al-slider-gap: var(--al-space-8);
+
+  /* type - label and value share body-md, the range uses caption */
+  --al-slider-font-size: var(--al-font-size-md);
+  --al-slider-line-height: var(--al-line-height-md);
+  --al-slider-font-weight: var(--al-font-weight-regular);
+  --al-slider-range-font-size: var(--al-font-size-xs);
+  --al-slider-range-line-height: var(--al-line-height-xs);
+}
+
+/* AL Design System - Slider
+ *
+ * One thumb, one size, no error. The control is a native
+ * <input type="range">: the browser gives the keyboard (arrows, Page Up/Down,
+ * Home/End - rule 16), the click on the track (rule 21) and the value to
+ * assistive tech. The name comes from the visible <label for> (rule 17).
+ *
+ *   <div class="al-slider">
+ *     <div class="al-slider__header">
+ *       <label class="al-slider__label" for="vol">Volume</label>
+ *       <output class="al-slider__value" for="vol">60%</output>
+ *     </div>
+ *     <input class="al-slider__input" id="vol" type="range"
+ *            min="0" max="100" value="60" data-unit="%">
+ *     <div class="al-slider__range"><span>0%</span><span>100%</span></div>
+ *   </div>
+ *
+ * THE FILL NEEDS slider.js
+ *
+ *   Only Firefox paints the filled part (::-moz-range-progress). WebKit/Blink
+ *   paint it from --al-slider-progress, a percentage slider.js keeps in sync
+ *   with the value (it also writes the <output> and aria-valuetext). Without
+ *   the script the track still works; the fill shows only in Firefox.
+ *
+ * THE HIT AREA IS THE INPUT, NOT THE THUMB
+ *
+ *   The input is 24px tall (slider-thumb-hit) and the whole row takes the
+ *   pointer; the thumb is drawn at 20px inside it (WCAG 2.5.8, audit A2).
+ *   Figma's track frame is 20px - the 4px are the hit area.
+ *
+ * Vendor pseudo-elements can't share a rule: a selector list with one the
+ * browser doesn't know is dropped whole. That is why the track and the thumb
+ * are written twice.
+ */
+
+.al-slider {
+  /* public adjustment point: slider.js writes it from value/min/max */
+  --al-slider-progress: 0%;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--al-slider-gap);
+  inline-size: 100%;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-slider-font-size);
+  line-height: var(--al-slider-line-height);
+  font-weight: var(--al-slider-font-weight);
+}
+
+.al-slider__header,
+.al-slider__range {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--al-slider-gap);
+}
+
+.al-slider__label {
+  color: var(--al-slider-label-text);
+}
+
+/* tabular figures keep the number from jittering while it is dragged */
+.al-slider__value {
+  flex: none;
+  color: var(--al-slider-value-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.al-slider__range {
+  color: var(--al-slider-range-text);
+  font-size: var(--al-slider-range-font-size);
+  line-height: var(--al-slider-range-line-height);
+}
+
+/* ---------------------------------------------------------------- input */
+.al-slider__input {
+  --_thumb-bg: var(--al-slider-thumb-bg);
+  --_fill: var(--al-slider-fill-bg);
+  --_track: var(--al-slider-track-bg);
+
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  inline-size: 100%;
+  block-size: var(--al-slider-thumb-hit);
+  margin: 0;
+  background: none;
+  cursor: pointer;
+}
+
+/* the ring is a shadow on the thumb, never an outline on the whole row */
+.al-slider__input:focus {
+  outline: none;
+}
+
+/* ---------------------------------------------------------------- track */
+.al-slider__input::-webkit-slider-runnable-track {
+  block-size: var(--al-slider-track-height);
+  border-radius: var(--al-slider-radius);
+  background: linear-gradient(to right,
+    var(--_fill) var(--al-slider-progress),
+    var(--_track) var(--al-slider-progress));
+}
+
+.al-slider__input::-moz-range-track {
+  block-size: var(--al-slider-track-height);
+  border-radius: var(--al-slider-radius);
+  background-color: var(--_track);
+}
+
+.al-slider__input::-moz-range-progress {
+  block-size: var(--al-slider-track-height);
+  border-radius: var(--al-slider-radius);
+  background-color: var(--_fill);
+}
+
+/* ---------------------------------------------------------------- thumb */
+/* WebKit puts the thumb at the top of the track: the margin centers it. */
+.al-slider__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  inline-size: var(--al-slider-thumb-size);
+  block-size: var(--al-slider-thumb-size);
+  margin-block-start: calc((var(--al-slider-track-height) - var(--al-slider-thumb-size)) / 2);
+  border: none;
+  border-radius: var(--al-slider-radius);
+  background-color: var(--_thumb-bg);
+  transition:
+    background-color var(--al-motion-duration-feedback) var(--al-motion-easing-exit),
+    box-shadow var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
+}
+
+.al-slider__input::-moz-range-thumb {
+  inline-size: var(--al-slider-thumb-size);
+  block-size: var(--al-slider-thumb-size);
+  border: none;
+  border-radius: var(--al-slider-radius);
+  background-color: var(--_thumb-bg);
+  transition:
+    background-color var(--al-motion-duration-feedback) var(--al-motion-easing-exit),
+    box-shadow var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
+}
+
+/* --------------------------------------------------------------- states */
+/* hover and active are transient: below 3:1 in dark is the declared
+   thumb-transient exception (rule 15) */
+.al-slider__input:hover {
+  --_thumb-bg: var(--al-slider-thumb-bg-hover);
+}
+
+.al-slider__input:active {
+  --_thumb-bg: var(--al-slider-thumb-bg-active);
+}
+
+/* focus: an inner gap in bg-canvas, then the Foundation ring. Without the
+   gap the orange ring reads as a bigger thumb in light (audit A1). */
+.al-slider__input:focus-visible::-webkit-slider-thumb {
+  box-shadow:
+    inset 0 0 0 var(--al-border-width-2) var(--al-slider-thumb-focus-gap),
+    var(--al-focus-ring-default);
+}
+
+.al-slider__input:focus-visible::-moz-range-thumb {
+  box-shadow:
+    inset 0 0 0 var(--al-border-width-2) var(--al-slider-thumb-focus-gap),
+    var(--al-focus-ring-default);
+}
+
+/* disabled - last, because it wins over all */
+.al-slider__input:disabled {
+  --_thumb-bg: var(--al-slider-thumb-bg-disabled);
+  --_fill: var(--al-slider-fill-bg-disabled);
+  --_track: var(--al-slider-track-bg-disabled);
+  cursor: not-allowed;
+}
+
+.al-slider:has(.al-slider__input:disabled) :is(.al-slider__label, .al-slider__value, .al-slider__range) {
+  color: var(--al-slider-label-text-disabled);
+}
+
+/* ENTER - the destination states take the enter curve */
+.al-slider__input:hover::-webkit-slider-thumb,
+.al-slider__input:focus-visible::-webkit-slider-thumb {
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+.al-slider__input:hover::-moz-range-thumb,
+.al-slider__input:focus-visible::-moz-range-thumb {
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+/* --------------------------------------------------------- environment */
+@media (prefers-reduced-motion: reduce) {
+  .al-slider__input::-webkit-slider-thumb { transition: none; }
+  .al-slider__input::-moz-range-thumb { transition: none; }
+}
+
+/* AL Design System - Rating tokens
+ * GENERATED by src/components/rating/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-rating-label-text: var(--al-text-primary);
+  --al-rating-label-text-disabled: var(--al-text-disabled);
+  --al-rating-star-on: var(--al-bg-brand);
+  --al-rating-star-preview: var(--al-bg-brand-hover);
+  --al-rating-star-off: var(--al-border-strong);
+  --al-rating-star-disabled: var(--al-text-disabled);
+  --al-rating-focus-gap: var(--al-bg-canvas);
+
+  /* geometry */
+  --al-rating-star-size: var(--al-icon-size-24);
+  --al-rating-star-stroke: var(--al-border-width-2);
+  --al-rating-gap: var(--al-space-4);
+  --al-rating-label-gap: var(--al-space-8);
+  --al-rating-focus-radius: var(--al-radius-sm);
+
+  /* type */
+  --al-rating-font-size: var(--al-font-size-md);
+  --al-rating-line-height: var(--al-line-height-md);
+  --al-rating-font-weight: var(--al-font-weight-regular);
+}
+
+/* AL Design System - Rating
+ *
+ * A radio group of five whole stars (APG rating pattern, rule 15). The radios
+ * are native and sit invisible on top of each star: the browser gives the
+ * single Tab stop, the arrows that move and check (rule 17) and the group
+ * announcement. No script.
+ *
+ *   <fieldset class="al-rating">
+ *     <legend class="al-rating__label">Como foi a entrega?</legend>
+ *     <div class="al-rating__stars">
+ *       <label class="al-rating__star">
+ *         <input class="al-rating__input" type="radio" name="entrega" value="1"
+ *                aria-label="1 estrela">
+ *         <svg class="al-rating__glyph" viewBox="0 0 24 24" aria-hidden="true">
+ *           <path d="..."/></svg>
+ *       </label>
+ *       ... x5
+ *     </div>
+ *   </fieldset>
+ *
+ * READ-ONLY IS ANOTHER MARKUP (rule 12, H=a)
+ *
+ *   <span class="al-rating al-rating--readonly" role="img"
+ *         aria-label="4,3 de 5 estrelas">
+ *     <span class="al-rating__stars">
+ *       <svg class="al-rating__glyph al-rating__glyph--on" ...> x4 (rounded)
+ *       <svg class="al-rating__glyph" ...> x1
+ *     </span>
+ *   </span>
+ *   No radios, no focus, no hover. Looks the same as Default (rule 14).
+ *
+ * WHICH STARS ARE ON
+ *
+ *   A star is on when its radio is checked or a later one is: `:has()` on the
+ *   star and on its following siblings. Nothing checked = all off (rule 8).
+ */
+
+.al-rating {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border: none;
+  min-inline-size: 0;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-rating-font-size);
+  line-height: var(--al-rating-line-height);
+  font-weight: var(--al-rating-font-weight);
+}
+
+/* a <legend> is not a flex item, so the fieldset's gap doesn't reach it:
+   the space below it is its own margin */
+.al-rating__label {
+  padding: 0;
+  margin-block-end: var(--al-rating-label-gap);
+  color: var(--al-rating-label-text);
+}
+
+.al-rating__stars {
+  display: flex;
+  gap: var(--al-rating-gap);
+}
+
+.al-rating__star {
+  --_ink: var(--al-rating-star-off);
+  --_fill: none;
+
+  position: relative;
+  display: block;
+  inline-size: var(--al-rating-star-size);
+  block-size: var(--al-rating-star-size);
+  border-radius: var(--al-rating-focus-radius);
+  cursor: pointer;
+}
+
+/* the radio covers the star: it takes the click and the focus, and stays
+   in the accessibility tree (never display:none) */
+.al-rating__input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+
+.al-rating__glyph {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  fill: var(--_fill);
+  stroke: var(--_ink);
+  stroke-width: var(--al-rating-star-stroke);
+  stroke-linejoin: round;
+  pointer-events: none;
+  transition:
+    fill var(--al-motion-duration-feedback) var(--al-motion-easing-exit),
+    stroke var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
+}
+
+/* --------------------------------------------------------------- states */
+/* hover preview: the hovered star and the ones before it (rule 10). The
+   on rule below comes later, so a checked star stays brand. */
+.al-rating:not(:disabled) .al-rating__star:hover,
+.al-rating:not(:disabled) .al-rating__star:has(~ .al-rating__star:hover) {
+  --_ink: var(--al-rating-star-preview);
+  --_fill: var(--al-rating-star-preview);
+}
+
+/* on: checked, or before the checked one */
+.al-rating__star:has(.al-rating__input:checked),
+.al-rating__star:has(~ .al-rating__star .al-rating__input:checked),
+.al-rating__glyph--on {
+  --_ink: var(--al-rating-star-on);
+  --_fill: var(--al-rating-star-on);
+}
+
+/* focus: the ring on the star that holds it (rule 18); the box gets
+   bg-canvas so the ring's gap shows (audit A4) */
+.al-rating__star:has(.al-rating__input:focus-visible) {
+  background-color: var(--al-rating-focus-gap);
+  box-shadow: var(--al-focus-ring-default);
+}
+
+/* disabled - last, because it wins over all. The on stars stay filled.
+   The on selectors carry :has() specificity, so the ink is set again there. */
+.al-rating:disabled .al-rating__star {
+  --_ink: var(--al-rating-star-disabled);
+  cursor: not-allowed;
+}
+
+.al-rating:disabled .al-rating__star:has(.al-rating__input:checked),
+.al-rating:disabled .al-rating__star:has(~ .al-rating__star .al-rating__input:checked) {
+  --_ink: var(--al-rating-star-disabled);
+  --_fill: var(--al-rating-star-disabled);
+}
+
+.al-rating:disabled .al-rating__label {
+  color: var(--al-rating-label-text-disabled);
+}
+
+/* read-only: the glyphs paint themselves, nothing reacts */
+.al-rating--readonly .al-rating__glyph {
+  fill: none;
+  stroke: var(--al-rating-star-off);
+  inline-size: var(--al-rating-star-size);
+  block-size: var(--al-rating-star-size);
+}
+
+.al-rating--readonly .al-rating__glyph--on {
+  fill: var(--al-rating-star-on);
+  stroke: var(--al-rating-star-on);
+}
+
+/* ENTER - the destination states take the enter curve */
+.al-rating:not(:disabled) .al-rating__star:hover .al-rating__glyph,
+.al-rating:not(:disabled) .al-rating__star:has(~ .al-rating__star:hover) .al-rating__glyph {
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+/* --------------------------------------------------------- environment */
+@media (prefers-reduced-motion: reduce) {
+  .al-rating__glyph { transition: none; }
+}

package/dist/components/rating.css

@@ -0,0 +1,192 @@
+/* AL Design System - Rating tokens
+ * GENERATED by src/components/rating/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-rating-label-text: var(--al-text-primary);
+  --al-rating-label-text-disabled: var(--al-text-disabled);
+  --al-rating-star-on: var(--al-bg-brand);
+  --al-rating-star-preview: var(--al-bg-brand-hover);
+  --al-rating-star-off: var(--al-border-strong);
+  --al-rating-star-disabled: var(--al-text-disabled);
+  --al-rating-focus-gap: var(--al-bg-canvas);
+
+  /* geometry */
+  --al-rating-star-size: var(--al-icon-size-24);
+  --al-rating-star-stroke: var(--al-border-width-2);
+  --al-rating-gap: var(--al-space-4);
+  --al-rating-label-gap: var(--al-space-8);
+  --al-rating-focus-radius: var(--al-radius-sm);
+
+  /* type */
+  --al-rating-font-size: var(--al-font-size-md);
+  --al-rating-line-height: var(--al-line-height-md);
+  --al-rating-font-weight: var(--al-font-weight-regular);
+}
+
+/* AL Design System - Rating
+ *
+ * A radio group of five whole stars (APG rating pattern, rule 15). The radios
+ * are native and sit invisible on top of each star: the browser gives the
+ * single Tab stop, the arrows that move and check (rule 17) and the group
+ * announcement. No script.
+ *
+ *   <fieldset class="al-rating">
+ *     <legend class="al-rating__label">Como foi a entrega?</legend>
+ *     <div class="al-rating__stars">
+ *       <label class="al-rating__star">
+ *         <input class="al-rating__input" type="radio" name="entrega" value="1"
+ *                aria-label="1 estrela">
+ *         <svg class="al-rating__glyph" viewBox="0 0 24 24" aria-hidden="true">
+ *           <path d="..."/></svg>
+ *       </label>
+ *       ... x5
+ *     </div>
+ *   </fieldset>
+ *
+ * READ-ONLY IS ANOTHER MARKUP (rule 12, H=a)
+ *
+ *   <span class="al-rating al-rating--readonly" role="img"
+ *         aria-label="4,3 de 5 estrelas">
+ *     <span class="al-rating__stars">
+ *       <svg class="al-rating__glyph al-rating__glyph--on" ...> x4 (rounded)
+ *       <svg class="al-rating__glyph" ...> x1
+ *     </span>
+ *   </span>
+ *   No radios, no focus, no hover. Looks the same as Default (rule 14).
+ *
+ * WHICH STARS ARE ON
+ *
+ *   A star is on when its radio is checked or a later one is: `:has()` on the
+ *   star and on its following siblings. Nothing checked = all off (rule 8).
+ */
+
+.al-rating {
+  display: flex;
+  flex-direction: column;
+  margin: 0;
+  padding: 0;
+  border: none;
+  min-inline-size: 0;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-rating-font-size);
+  line-height: var(--al-rating-line-height);
+  font-weight: var(--al-rating-font-weight);
+}
+
+/* a <legend> is not a flex item, so the fieldset's gap doesn't reach it:
+   the space below it is its own margin */
+.al-rating__label {
+  padding: 0;
+  margin-block-end: var(--al-rating-label-gap);
+  color: var(--al-rating-label-text);
+}
+
+.al-rating__stars {
+  display: flex;
+  gap: var(--al-rating-gap);
+}
+
+.al-rating__star {
+  --_ink: var(--al-rating-star-off);
+  --_fill: none;
+
+  position: relative;
+  display: block;
+  inline-size: var(--al-rating-star-size);
+  block-size: var(--al-rating-star-size);
+  border-radius: var(--al-rating-focus-radius);
+  cursor: pointer;
+}
+
+/* the radio covers the star: it takes the click and the focus, and stays
+   in the accessibility tree (never display:none) */
+.al-rating__input {
+  position: absolute;
+  inset: 0;
+  margin: 0;
+  opacity: 0;
+  cursor: inherit;
+}
+
+.al-rating__glyph {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  fill: var(--_fill);
+  stroke: var(--_ink);
+  stroke-width: var(--al-rating-star-stroke);
+  stroke-linejoin: round;
+  pointer-events: none;
+  transition:
+    fill var(--al-motion-duration-feedback) var(--al-motion-easing-exit),
+    stroke var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
+}
+
+/* --------------------------------------------------------------- states */
+/* hover preview: the hovered star and the ones before it (rule 10). The
+   on rule below comes later, so a checked star stays brand. */
+.al-rating:not(:disabled) .al-rating__star:hover,
+.al-rating:not(:disabled) .al-rating__star:has(~ .al-rating__star:hover) {
+  --_ink: var(--al-rating-star-preview);
+  --_fill: var(--al-rating-star-preview);
+}
+
+/* on: checked, or before the checked one */
+.al-rating__star:has(.al-rating__input:checked),
+.al-rating__star:has(~ .al-rating__star .al-rating__input:checked),
+.al-rating__glyph--on {
+  --_ink: var(--al-rating-star-on);
+  --_fill: var(--al-rating-star-on);
+}
+
+/* focus: the ring on the star that holds it (rule 18); the box gets
+   bg-canvas so the ring's gap shows (audit A4) */
+.al-rating__star:has(.al-rating__input:focus-visible) {
+  background-color: var(--al-rating-focus-gap);
+  box-shadow: var(--al-focus-ring-default);
+}
+
+/* disabled - last, because it wins over all. The on stars stay filled.
+   The on selectors carry :has() specificity, so the ink is set again there. */
+.al-rating:disabled .al-rating__star {
+  --_ink: var(--al-rating-star-disabled);
+  cursor: not-allowed;
+}
+
+.al-rating:disabled .al-rating__star:has(.al-rating__input:checked),
+.al-rating:disabled .al-rating__star:has(~ .al-rating__star .al-rating__input:checked) {
+  --_ink: var(--al-rating-star-disabled);
+  --_fill: var(--al-rating-star-disabled);
+}
+
+.al-rating:disabled .al-rating__label {
+  color: var(--al-rating-label-text-disabled);
+}
+
+/* read-only: the glyphs paint themselves, nothing reacts */
+.al-rating--readonly .al-rating__glyph {
+  fill: none;
+  stroke: var(--al-rating-star-off);
+  inline-size: var(--al-rating-star-size);
+  block-size: var(--al-rating-star-size);
+}
+
+.al-rating--readonly .al-rating__glyph--on {
+  fill: var(--al-rating-star-on);
+  stroke: var(--al-rating-star-on);
+}
+
+/* ENTER - the destination states take the enter curve */
+.al-rating:not(:disabled) .al-rating__star:hover .al-rating__glyph,
+.al-rating:not(:disabled) .al-rating__star:has(~ .al-rating__star:hover) .al-rating__glyph {
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+/* --------------------------------------------------------- environment */
+@media (prefers-reduced-motion: reduce) {
+  .al-rating__glyph { transition: none; }
+}

package/dist/components/slider.css

@@ -0,0 +1,232 @@
+/* AL Design System - Slider tokens
+ * GENERATED by src/components/slider/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-slider-label-text: var(--al-text-primary);
+  --al-slider-value-text: var(--al-text-primary);
+  --al-slider-range-text: var(--al-text-secondary);
+  --al-slider-track-bg: var(--al-bg-track);
+  --al-slider-fill-bg: var(--al-bg-brand);
+  --al-slider-thumb-bg: var(--al-bg-brand);
+  --al-slider-thumb-bg-hover: var(--al-bg-brand-hover);
+  --al-slider-thumb-bg-active: var(--al-bg-brand-active);
+  --al-slider-thumb-focus-gap: var(--al-bg-canvas);
+  --al-slider-label-text-disabled: var(--al-text-disabled);
+  --al-slider-track-bg-disabled: var(--al-bg-disabled);
+  --al-slider-fill-bg-disabled: var(--al-text-disabled);
+  --al-slider-thumb-bg-disabled: var(--al-text-disabled);
+
+  /* geometry */
+  --al-slider-track-height: var(--al-space-4);
+  --al-slider-thumb-size: var(--al-space-20);
+  --al-slider-thumb-hit: var(--al-space-24);
+  --al-slider-radius: var(--al-radius-full);
+  --al-slider-gap: var(--al-space-8);
+
+  /* type - label and value share body-md, the range uses caption */
+  --al-slider-font-size: var(--al-font-size-md);
+  --al-slider-line-height: var(--al-line-height-md);
+  --al-slider-font-weight: var(--al-font-weight-regular);
+  --al-slider-range-font-size: var(--al-font-size-xs);
+  --al-slider-range-line-height: var(--al-line-height-xs);
+}
+
+/* AL Design System - Slider
+ *
+ * One thumb, one size, no error. The control is a native
+ * <input type="range">: the browser gives the keyboard (arrows, Page Up/Down,
+ * Home/End - rule 16), the click on the track (rule 21) and the value to
+ * assistive tech. The name comes from the visible <label for> (rule 17).
+ *
+ *   <div class="al-slider">
+ *     <div class="al-slider__header">
+ *       <label class="al-slider__label" for="vol">Volume</label>
+ *       <output class="al-slider__value" for="vol">60%</output>
+ *     </div>
+ *     <input class="al-slider__input" id="vol" type="range"
+ *            min="0" max="100" value="60" data-unit="%">
+ *     <div class="al-slider__range"><span>0%</span><span>100%</span></div>
+ *   </div>
+ *
+ * THE FILL NEEDS slider.js
+ *
+ *   Only Firefox paints the filled part (::-moz-range-progress). WebKit/Blink
+ *   paint it from --al-slider-progress, a percentage slider.js keeps in sync
+ *   with the value (it also writes the <output> and aria-valuetext). Without
+ *   the script the track still works; the fill shows only in Firefox.
+ *
+ * THE HIT AREA IS THE INPUT, NOT THE THUMB
+ *
+ *   The input is 24px tall (slider-thumb-hit) and the whole row takes the
+ *   pointer; the thumb is drawn at 20px inside it (WCAG 2.5.8, audit A2).
+ *   Figma's track frame is 20px - the 4px are the hit area.
+ *
+ * Vendor pseudo-elements can't share a rule: a selector list with one the
+ * browser doesn't know is dropped whole. That is why the track and the thumb
+ * are written twice.
+ */
+
+.al-slider {
+  /* public adjustment point: slider.js writes it from value/min/max */
+  --al-slider-progress: 0%;
+
+  display: flex;
+  flex-direction: column;
+  gap: var(--al-slider-gap);
+  inline-size: 100%;
+  font-family: var(--al-font-sans);
+  font-size: var(--al-slider-font-size);
+  line-height: var(--al-slider-line-height);
+  font-weight: var(--al-slider-font-weight);
+}
+
+.al-slider__header,
+.al-slider__range {
+  display: flex;
+  justify-content: space-between;
+  gap: var(--al-slider-gap);
+}
+
+.al-slider__label {
+  color: var(--al-slider-label-text);
+}
+
+/* tabular figures keep the number from jittering while it is dragged */
+.al-slider__value {
+  flex: none;
+  color: var(--al-slider-value-text);
+  font-variant-numeric: tabular-nums;
+}
+
+.al-slider__range {
+  color: var(--al-slider-range-text);
+  font-size: var(--al-slider-range-font-size);
+  line-height: var(--al-slider-range-line-height);
+}
+
+/* ---------------------------------------------------------------- input */
+.al-slider__input {
+  --_thumb-bg: var(--al-slider-thumb-bg);
+  --_fill: var(--al-slider-fill-bg);
+  --_track: var(--al-slider-track-bg);
+
+  -webkit-appearance: none;
+  appearance: none;
+  display: block;
+  inline-size: 100%;
+  block-size: var(--al-slider-thumb-hit);
+  margin: 0;
+  background: none;
+  cursor: pointer;
+}
+
+/* the ring is a shadow on the thumb, never an outline on the whole row */
+.al-slider__input:focus {
+  outline: none;
+}
+
+/* ---------------------------------------------------------------- track */
+.al-slider__input::-webkit-slider-runnable-track {
+  block-size: var(--al-slider-track-height);
+  border-radius: var(--al-slider-radius);
+  background: linear-gradient(to right,
+    var(--_fill) var(--al-slider-progress),
+    var(--_track) var(--al-slider-progress));
+}
+
+.al-slider__input::-moz-range-track {
+  block-size: var(--al-slider-track-height);
+  border-radius: var(--al-slider-radius);
+  background-color: var(--_track);
+}
+
+.al-slider__input::-moz-range-progress {
+  block-size: var(--al-slider-track-height);
+  border-radius: var(--al-slider-radius);
+  background-color: var(--_fill);
+}
+
+/* ---------------------------------------------------------------- thumb */
+/* WebKit puts the thumb at the top of the track: the margin centers it. */
+.al-slider__input::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  appearance: none;
+  inline-size: var(--al-slider-thumb-size);
+  block-size: var(--al-slider-thumb-size);
+  margin-block-start: calc((var(--al-slider-track-height) - var(--al-slider-thumb-size)) / 2);
+  border: none;
+  border-radius: var(--al-slider-radius);
+  background-color: var(--_thumb-bg);
+  transition:
+    background-color var(--al-motion-duration-feedback) var(--al-motion-easing-exit),
+    box-shadow var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
+}
+
+.al-slider__input::-moz-range-thumb {
+  inline-size: var(--al-slider-thumb-size);
+  block-size: var(--al-slider-thumb-size);
+  border: none;
+  border-radius: var(--al-slider-radius);
+  background-color: var(--_thumb-bg);
+  transition:
+    background-color var(--al-motion-duration-feedback) var(--al-motion-easing-exit),
+    box-shadow var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
+}
+
+/* --------------------------------------------------------------- states */
+/* hover and active are transient: below 3:1 in dark is the declared
+   thumb-transient exception (rule 15) */
+.al-slider__input:hover {
+  --_thumb-bg: var(--al-slider-thumb-bg-hover);
+}
+
+.al-slider__input:active {
+  --_thumb-bg: var(--al-slider-thumb-bg-active);
+}
+
+/* focus: an inner gap in bg-canvas, then the Foundation ring. Without the
+   gap the orange ring reads as a bigger thumb in light (audit A1). */
+.al-slider__input:focus-visible::-webkit-slider-thumb {
+  box-shadow:
+    inset 0 0 0 var(--al-border-width-2) var(--al-slider-thumb-focus-gap),
+    var(--al-focus-ring-default);
+}
+
+.al-slider__input:focus-visible::-moz-range-thumb {
+  box-shadow:
+    inset 0 0 0 var(--al-border-width-2) var(--al-slider-thumb-focus-gap),
+    var(--al-focus-ring-default);
+}
+
+/* disabled - last, because it wins over all */
+.al-slider__input:disabled {
+  --_thumb-bg: var(--al-slider-thumb-bg-disabled);
+  --_fill: var(--al-slider-fill-bg-disabled);
+  --_track: var(--al-slider-track-bg-disabled);
+  cursor: not-allowed;
+}
+
+.al-slider:has(.al-slider__input:disabled) :is(.al-slider__label, .al-slider__value, .al-slider__range) {
+  color: var(--al-slider-label-text-disabled);
+}
+
+/* ENTER - the destination states take the enter curve */
+.al-slider__input:hover::-webkit-slider-thumb,
+.al-slider__input:focus-visible::-webkit-slider-thumb {
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+.al-slider__input:hover::-moz-range-thumb,
+.al-slider__input:focus-visible::-moz-range-thumb {
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+/* --------------------------------------------------------- environment */
+@media (prefers-reduced-motion: reduce) {
+  .al-slider__input::-webkit-slider-thumb { transition: none; }
+  .al-slider__input::-moz-range-thumb { transition: none; }
+}

package/dist/components/slider.js

@@ -0,0 +1,52 @@
+/* AL Design System - Slider, fill and value
+ *
+ * What it does on every .al-slider__input inside `root`:
+ *   - writes --al-slider-progress on the .al-slider (the WebKit/Blink fill;
+ *     Firefox paints it natively);
+ *   - writes the value into the <output for="id">, with data-unit appended;
+ *   - with data-unit, writes aria-valuetext too ("60%" and not "60",
+ *     rule 18).
+ * The keyboard, the click on the track and the value itself stay native.
+ *
+ * Usage:
+ *   <script src="slider.js"></script>   -> binds itself when the page loads
+ *   alSlider.init(container)             -> binds content inserted later
+ * Binding the same input twice duplicates nothing.
+ */
+(function () {
+  'use strict';
+
+  function sync(input) {
+    var min = parseFloat(input.min) || 0;
+    var max = input.max === '' ? 100 : parseFloat(input.max);
+    var pct = max > min ? (parseFloat(input.value) - min) / (max - min) * 100 : 0;
+    var box = input.closest('.al-slider');
+    if (box) box.style.setProperty('--al-slider-progress', pct + '%');
+
+    var unit = input.getAttribute('data-unit');
+    var text = input.value + (unit || '');
+    if (unit) input.setAttribute('aria-valuetext', text);
+    if (input.id && box) {
+      var out = box.querySelector('output[for~="' + input.id + '"]');
+      if (out) out.textContent = text;
+    }
+  }
+
+  function bind(input) {
+    if (input.hasAttribute('data-al-slider')) return;
+    input.setAttribute('data-al-slider', '');
+    input.addEventListener('input', function () { sync(input); });
+    sync(input);
+  }
+
+  function init(root) {
+    [].forEach.call((root || document).querySelectorAll('.al-slider__input'), bind);
+  }
+
+  window.alSlider = { init: init };
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', function () { init(); });
+  } else {
+    init();
+  }
+})();

package/dist/foundation.css

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

package/package.json

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