al-design-system 1.8.0 → 1.9.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 + 32 components**, designed in Figma and coded from the same tokens.
+- **Foundation + 33 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.
@@ -44,6 +44,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) |
+| | Carousel | ✓ | [guidelines](src/components/carousel/guidelines.md) |
 | | Pagination | | [guidelines](src/components/pagination/guidelines.md) |
 | | Stepper | | [guidelines](src/components/stepper/guidelines.md) |
 | Feedback | Tooltip | ✓ | [guidelines](src/components/tooltip/guidelines.md) |
@@ -63,7 +64,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.8.0/dist/al.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.9.0/dist/al.css">
 ```
 
 Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/releases) also carries the `dist/` folder as a zip.
@@ -72,10 +73,10 @@ Each [GitHub Release](https://github.com/guilhermedworakowski/al-design-system/r
 
 | File | What it is |
 |---|---|
-| `al.css` | Foundation + all 32 components, in one file |
+| `al.css` | Foundation + all 33 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 12 components that have a script |
+| `components/<name>.js` | The behavior, for the 13 components that have a script |
 | `icons/*.svg`, `icons/icons.json` | The 70 icons |
 | `tokens.json` | The Foundation tokens, to read from code |
 
@@ -106,7 +107,7 @@ The exact markup of each component (which element, which attributes) is describe
 
 ### Scripts
 
-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:
+Password, Number field, Slider, Menu, Tab, Modal, Drawer, Sidebar, Breadcrumb, Carousel, 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 + 32 componentes**, desenhados no Figma e codados a partir dos mesmos tokens.
+- **Foundation + 33 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ó.
@@ -44,6 +44,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) |
+| | Carousel | ✓ | [diretrizes](src/components/carousel/guidelines.md) |
 | | Pagination | | [diretrizes](src/components/pagination/guidelines.md) |
 | | Stepper | | [diretrizes](src/components/stepper/guidelines.md) |
 | Feedback | Tooltip | ✓ | [diretrizes](src/components/tooltip/guidelines.md) |
@@ -63,7 +64,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.8.0/dist/al.css">
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/al-design-system@1.9.0/dist/al.css">
 ```
 
 Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-system/releases) também traz a pasta `dist/` num zip.
@@ -72,10 +73,10 @@ Cada [Release no GitHub](https://github.com/guilhermedworakowski/al-design-syste
 
 | Arquivo | O que é |
 |---|---|
-| `al.css` | Foundation + os 32 componentes, num arquivo só |
+| `al.css` | Foundation + os 33 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 12 componentes que têm script |
+| `components/<nome>.js` | O comportamento, para os 13 componentes que têm script |
 | `icons/*.svg`, `icons/icons.json` | Os 70 ícones |
 | `tokens.json` | Os tokens da Foundation, para ler por código |
 
@@ -106,7 +107,7 @@ A marcação exata de cada componente (qual elemento, quais atributos) está des
 
 ### Scripts
 
-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:
+Password, Number field, Slider, Menu, Tab, Modal, Drawer, Sidebar, Breadcrumb, Carousel, 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.8.0 - Foundation + 32 components.
+/* AL Design System 1.9.0 - Foundation + 33 components.
  * MIT. https://github.com/guilhermedworakowski/al-design-system
  */
 /* AL Design System - Foundation
- * v1.8.0 - MIT
+ * v1.9.0 - MIT
  * GENERATED by src/foundation/css.py. Do not edit by hand: run the script.
  */
 
@@ -8679,3 +8679,173 @@
 @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;
+  }
+}

package/dist/components/carousel.css

@@ -0,0 +1,169 @@
+/* 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;
+  }
+}

package/dist/components/carousel.js

@@ -0,0 +1,137 @@
+/* AL Design System - Carousel, arrows, dots and announcement
+ *
+ * What it does on every .al-carousel inside `root` (usage rules 13-22):
+ *   - previous / next scroll by one page (rule 14, A=a): next starts at the
+ *     first slide not fully in view, so the one cut at the edge is never
+ *     skipped; previous goes back as far as one viewport allows;
+ *   - the arrows get `disabled` at the ends - no loop (rule 13). When the
+ *     arrow that has focus turns disabled, focus moves to the other one, so
+ *     it never falls back to <body>;
+ *   - the dot of the first visible slide gets data-current (rule 22);
+ *   - only after an ARROW, the live region says which slides are in view
+ *     (rule 21, B=a). Swipe and trackpad announce nothing. The sentence is
+ *     data-al-live on the .al-carousel, with {first}, {last} and {total}
+ *     (default "Slides {first} to {last} of {total}"; one slide in view
+ *     uses data-al-live-one, default "Slide {first} of {total}").
+ *
+ * Usage:
+ *   <script src="carousel.js"></script>   -> binds itself when the page loads
+ *   alCarousel.init(container)            -> binds content inserted later
+ * Binding the same carousel twice duplicates nothing.
+ */
+(function () {
+  'use strict';
+
+  function bind(root) {
+    if (root.hasAttribute('data-al-carousel-bound')) return;
+    var viewport = root.querySelector('.al-carousel__viewport');
+    if (!viewport) return;
+    root.setAttribute('data-al-carousel-bound', '');
+
+    var slides = [].slice.call(viewport.querySelectorAll('.al-carousel__slide'));
+    var dots = [].slice.call(root.querySelectorAll('.al-carousel__dot'));
+    var prev = root.querySelector('[data-al-carousel="prev"]');
+    var next = root.querySelector('[data-al-carousel="next"]');
+    var live = root.querySelector('.al-carousel__live');
+    var announce = false;
+
+    // slides fully (or almost fully) inside the viewport, 1-based
+    function inView() {
+      var v = viewport.getBoundingClientRect();
+      var first = 0, last = 0;
+      slides.forEach(function (s, i) {
+        var r = s.getBoundingClientRect();
+        if (r.left >= v.left - 1 && r.right <= v.right + 1) {
+          if (!first) first = i + 1;
+          last = i + 1;
+        }
+      });
+      return { first: first || 1, last: last || first || 1 };
+    }
+
+    function update() {
+      var max = viewport.scrollWidth - viewport.clientWidth;
+      var atStart = viewport.scrollLeft <= 1;
+      var atEnd = viewport.scrollLeft >= max - 1;
+      var lost = document.activeElement;
+
+      if (prev) prev.disabled = atStart;
+      if (next) next.disabled = atEnd;
+      if (lost === prev && atStart && next && !atEnd) next.focus();
+      if (lost === next && atEnd && prev && !atStart) prev.focus();
+
+      var pos = inView();
+      dots.forEach(function (d, i) {
+        if (i === pos.first - 1) d.setAttribute('data-current', '');
+        else d.removeAttribute('data-current');
+      });
+
+      if (announce && live) {
+        var one = pos.first === pos.last;
+        var text = one
+          ? root.getAttribute('data-al-live-one') || 'Slide {first} of {total}'
+          : root.getAttribute('data-al-live') || 'Slides {first} to {last} of {total}';
+        live.textContent = text
+          .replace('{first}', pos.first)
+          .replace('{last}', pos.last)
+          .replace('{total}', slides.length);
+      }
+      announce = false;
+    }
+
+    // a slide's start, in the viewport's scroll coordinates
+    function start(s) { return s.offsetLeft - slides[0].offsetLeft; }
+
+    // Next: the first slide not fully in view becomes the first one - a slide
+    // cut at the edge is never skipped. Previous: the mirror, the earliest
+    // slide that still fits one viewport back.
+    function page(dir) {
+      announce = true;
+      var pos = inView();
+      var left;
+      if (dir > 0) {
+        left = start(slides[Math.min(pos.last, slides.length - 1)]);
+      } else {
+        var floor = viewport.scrollLeft - viewport.clientWidth;
+        var target = slides.filter(function (s) { return start(s) >= floor - 1; })[0];
+        left = Math.min(start(target), start(slides[Math.max(pos.first - 2, 0)]));
+      }
+      viewport.scrollTo({ left: left });
+    }
+
+    if (prev) prev.addEventListener('click', function () { page(-1); });
+    if (next) next.addEventListener('click', function () { page(1); });
+
+    // scrollend where it exists; a short quiet period elsewhere (Safari)
+    if ('onscrollend' in window) {
+      viewport.addEventListener('scrollend', update);
+    } else {
+      var timer;
+      viewport.addEventListener('scroll', function () {
+        clearTimeout(timer);
+        timer = setTimeout(update, 100);
+      });
+    }
+    // A carousel born hidden (a closed Tab panel, a Modal, an Accordion) has
+    // no width yet: both arrows would start disabled. Watching the viewport's
+    // size updates it the moment it shows, and on every resize after that.
+    if ('ResizeObserver' in window) {
+      new ResizeObserver(update).observe(viewport);
+    } else {
+      window.addEventListener('resize', update);
+    }
+    update();
+  }
+
+  function init(root) {
+    [].slice.call((root || document).querySelectorAll('.al-carousel')).forEach(bind);
+  }
+
+  window.alCarousel = { 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.8.0 - MIT
+ * v1.9.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.8.0",
+    "version": "1.9.0",
     "license": "MIT",
     "brandAnchor": "#FC5000",
     "colorSpace": "OKLCH",

package/package.json

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