al-design-system 1.7.0 → 1.9.0

package/dist/al.css

@@ -1,8 +1,8 @@
-/* AL Design System 1.7.0 - Foundation + 30 components.
+/* AL Design System 1.9.0 - Foundation + 33 components.
  * MIT. https://github.com/guilhermedworakowski/al-design-system
  */
 /* AL Design System - Foundation
- * v1.7.0 - MIT
+ * v1.9.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 
@@ -8253,3 +8253,599 @@
     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; }
+}
+
+/* AL Design System - Carousel tokens
+ * GENERATED by src/components/carousel/tokens.py. Do not edit by hand.
+ *
+ * Every color is a semantic the theme switches on :root.
+ */
+
+:root {
+  /* color */
+  --al-carousel-dot: var(--al-border-strong);
+  --al-carousel-dot-current: var(--al-bg-brand);
+  --al-carousel-slide-bg: var(--al-bg-subtle);
+
+  /* geometry */
+  --al-carousel-gap: var(--al-space-16);
+  --al-carousel-controls-gap: var(--al-space-16);
+  --al-carousel-nav-gap: var(--al-space-8);
+  --al-carousel-dot-size: var(--al-space-8);
+  --al-carousel-dot-current-width: var(--al-space-24);
+  --al-carousel-dot-gap: var(--al-space-8);
+  --al-carousel-dot-radius: var(--al-radius-full);
+  --al-carousel-slide-radius: var(--al-radius-lg);
+}
+
+/* AL Design System - Carousel
+ *
+ * Depends on: al-foundation.css, al-carousel-tokens.css, and the Icon Button
+ * (al-icon-tokens.css + icon.css + al-icon-button-tokens.css + icon-button.css)
+ * for the arrows. Behavior in carousel.js.
+ *
+ * The basic carousel of the APG (usage rules 13-23): previous and next below
+ * the content, disabled at the ends, no loop, no auto-rotation. The dots are
+ * decorative.
+ *
+ *   <section class="al-carousel" aria-roledescription="carousel" aria-labelledby="t">
+ *     <h2 id="t">Visible title</h2>                         (rule 9 - the page's heading)
+ *     <div class="al-carousel__viewport">
+ *       <div class="al-carousel__slide" role="group"
+ *            aria-roledescription="slide" aria-label="1 of 5">…</div>
+ *       …
+ *     </div>
+ *     <div class="al-carousel__controls">
+ *       <span class="al-carousel__dots" aria-hidden="true">
+ *         <span class="al-carousel__dot"></span>…            (one per slide, carousel.js marks the current)
+ *       </span>
+ *       <div class="al-carousel__nav">
+ *         <button type="button" class="al-icon-btn al-icon-btn--secondary al-icon-btn--sm"
+ *                 data-al-carousel="prev" aria-label="Previous slide">…chevron-left…</button>
+ *         <button type="button" class="al-icon-btn al-icon-btn--secondary al-icon-btn--sm"
+ *                 data-al-carousel="next" aria-label="Next slide">…chevron-right…</button>
+ *       </div>
+ *     </div>
+ *     <p class="al-carousel__live" aria-live="polite" aria-atomic="true"></p>
+ *   </section>
+ *
+ * SLIDE WIDTH IS THE LAYOUT'S (rule 6): --al-carousel-slide-size is a public
+ * adjustment point, not a token. Default 100% = one slide per view; set it
+ * narrower than the viewport so the next slide shows cut at the edge.
+ *
+ * NO JS NEEDED FOR FOCUS (rule 23): focusing a link inside a slide out of
+ * view scrolls the viewport natively.
+ *
+ * The viewport hides its scrollbar: the arrows, swipe and the trackpad move
+ * it. Smooth scrolling is turned off under prefers-reduced-motion (rule 16).
+ */
+
+.al-carousel {
+  --al-carousel-slide-size: 100%;
+  display: flex;
+  flex-direction: column;
+  gap: var(--al-carousel-controls-gap);
+  min-inline-size: 0;
+}
+
+/* -------------------------------------------------------------- viewport */
+.al-carousel__viewport {
+  display: flex;
+  gap: var(--al-carousel-gap);
+  overflow-x: auto;
+  overscroll-behavior-x: contain;
+  scroll-snap-type: x mandatory;
+  scroll-behavior: smooth;
+  scrollbar-width: none;
+}
+
+.al-carousel__viewport::-webkit-scrollbar {
+  display: none;
+}
+
+.al-carousel__slide {
+  flex: 0 0 var(--al-carousel-slide-size);
+  scroll-snap-align: start;
+  overflow: hidden;
+  border-radius: var(--al-carousel-slide-radius);
+  background-color: var(--al-carousel-slide-bg);   /* rule 18 - shows only when the image is missing */
+}
+
+.al-carousel__slide > img {
+  display: block;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+}
+
+/* -------------------------------------------------------------- controls */
+.al-carousel__controls {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.al-carousel__nav {
+  display: flex;
+  gap: var(--al-carousel-nav-gap);
+  margin-inline-start: auto;
+}
+
+/* the dots: decorative, shape carries the current one (rule 22) */
+.al-carousel__dots {
+  display: flex;
+  align-items: center;
+  gap: var(--al-carousel-dot-gap);
+}
+
+.al-carousel__dot {
+  inline-size: var(--al-carousel-dot-size);
+  block-size: var(--al-carousel-dot-size);
+  border-radius: var(--al-carousel-dot-radius);
+  background-color: var(--al-carousel-dot);
+  transition:
+    inline-size var(--al-motion-duration-feedback) var(--al-motion-easing-exit),
+    background-color var(--al-motion-duration-feedback) var(--al-motion-easing-exit);
+}
+
+.al-carousel__dot[data-current] {
+  inline-size: var(--al-carousel-dot-current-width);
+  background-color: var(--al-carousel-dot-current);
+  transition-timing-function: var(--al-motion-easing-enter);
+}
+
+/* the polite region that announces the position after an arrow (rule 21) */
+.al-carousel__live {
+  position: absolute;
+  inline-size: var(--al-border-width-1);
+  block-size: var(--al-border-width-1);
+  margin: 0;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .al-carousel__viewport {
+    scroll-behavior: auto;
+  }
+
+  .al-carousel__dot {
+    transition: none;
+  }
+}
+
+@media (forced-colors: active) {
+  .al-carousel__dot {
+    background-color: CanvasText;
+  }
+
+  .al-carousel__dot[data-current] {
+    background-color: Highlight;
+  }
+}