@kenlo/sds-design-system 1.0.2 → 1.1.2

package/README.md

@@ -160,6 +160,21 @@ toolchain que já tem.
 
 ---
 
+## Versão
+
+Regra combinada com o Rafael Leobas em 05/11/2026, igual no SDS e no KDLS.
+
+- **Na npm** vale o padrão dela: `MAIOR.MENOR.CORREÇÃO`, sem zero à esquerda (`1.1.1`, nunca `1.01.01`).
+- **Correção sobe só o último número** (+0.0.1). É assim que todo site recebe a versão nova sozinho.
+- **O número do meio e o último vão de 0 a 99.** Depois do 99, vira o próximo: `1.19.99` → `1.20.0`;
+  `1.99.99` → `2.0.0`. Um teste (`tests/display-version.test.js`) reprova o MR se passar de 99.
+- **A virada para um novo número maior é combinada antes com os times**: quem instalou com `^1.x` não
+  recebe `2.0.0` sozinho.
+- **No portal** a versão aparece sempre com largura fixa, `vX.XX.XX` (`1.1.1` aparece como `v1.01.01`).
+- **Sem subir a versão, nada chega aos sites**: a esteira só publica na npm uma versão nova.
+
+---
+
 ## Documentação
 
 O portal tem todos os componentes com controles ao vivo, a tabela de props de cada um e o
@@ -178,3 +193,27 @@ npm run dev
 O pacote é público na npm porque os projetos que o consomem precisam instalá-lo sem
 credencial, igual ao KDLS. **Público não quer dizer aberto:** o código é proprietário da
 Kenlo (`UNLICENSED`) e as contribuições passam pelo repositório no GitLab.
+
+## Portal no pages.kenlo.io
+
+Decisão do Rafael Leobas, 03/11/2026: portais de design system moram no pages.kenlo.io, com o login
+Google da Kenlo, para a empresa toda navegar e testar; demonstrações de produto (VIRA, CMS 2.0, Site 2.0)
+ficam no claude.ai.
+
+**Regra:** toda mudança que entra na `main` atualiza o portal no pages.kenlo.io.
+
+**Cabe, mas ainda falta o caminho de publicação.** Medido em 03/11/2026 (main de9f1d9): montado com
+`vite build --base ./` e as fontes embutidas, o portal tem 1,76 MB, abaixo do limite de 5 MB por página,
+e passou nas checagens do próprio `kenlo-pages` (`scripts/catalogo.py` e `scripts/conferir_tela.py`, sem
+erro). Uma sessão não consegue entregá-lo: a porta de MR do Kenlo Brain recebe o conteúdo dentro do
+pedido e os ramos pessoais são bloqueados. Falta quem administra o pages.kenlo.io decidir o caminho
+automático: a esteira do `kenlo-pages` montar o portal a partir deste repositório, ou a esteira daqui
+publicar depois de cada merge.
+
+**Enquanto isso:** a esteira daqui já tem o passo `deploy-portal`, que publica o portal num bucket a cada
+merge na `main`, parado à espera de duas variáveis (`SDS_DOCS_BUCKET` e `SDS_GCP_SA_KEY`). Com
+`base: './'` em `portal/vite.config.js`, o portal montado funciona em qualquer pasta (bucket ou
+pages.kenlo.io).
+
+## Quem aprova mudanças aqui
+Mudança normal: quem pediu aprova sozinho. Mudança de alto risco (dados de cliente, login, cobrança, segredos, infraestrutura, esteira automática): precisa também de um dos cinco aprovadores. Regra completa: https://pages.kenlo.io/p/kenlo-brain/quem-aprova-o-que/ (Constituição G11 c, e, j).

package/components/Drawer/Drawer.css

@@ -13,7 +13,7 @@
    theme and would light the screen up instead of dimming it, which is why they were
    literals at all; --color-scrim is that value as a token. *//* ============================================================
    SDS Drawer
-   Width: 600px (default) | full height | slides from right/left
+   Width: 600px (default), resizable by dragging the inner edge | full height | slides from right/left
    Header: Bold 24px, border-bottom neutral-30
    Footer: py-16, border-top neutral-30
    ============================================================ */
@@ -51,6 +51,43 @@
   box-shadow: 4px 0px 24px var(--color-opacity-20);
   animation: sds-drawer-in-left 250ms var(--ease-standard);
 }
+/* ── Resize handle: 8px hit area on the inner edge, 2px line on hover/drag ── */
+.sds-drawer__resize-handle {
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: calc(var(--spacing-1) * -1);
+  width: var(--spacing-2);
+  cursor: col-resize;
+  touch-action: none;
+  z-index: 1;
+  outline: none;
+}
+.sds-drawer--left .sds-drawer__resize-handle {
+  left: auto;
+  right: calc(var(--spacing-1) * -1);
+}
+.sds-drawer__resize-handle::after {
+  content: '';
+  position: absolute;
+  top: 0;
+  bottom: 0;
+  left: 50%;
+  width: 2px;
+  transform: translateX(-50%);
+  background: transparent;
+  transition: background 120ms ease;
+}
+.sds-drawer__resize-handle:hover::after,
+.sds-drawer--resizing .sds-drawer__resize-handle::after {
+  background: var(--color-primary-50);
+}
+.sds-drawer__resize-handle:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+.sds-drawer--resizing {
+  user-select: none;
+}
 @keyframes sds-drawer-in {
   from { transform: translateX(100%); }
   to   { transform: translateX(0); }
@@ -146,6 +183,9 @@
   .sds-drawer {
     width: 100%;
   }
+  .sds-drawer__resize-handle {
+    display: none;
+  }
   .sds-drawer__footer {
     flex-direction: column-reverse;
     align-items: stretch;

package/components/Drawer/drawer.marko

@@ -32,9 +32,23 @@ import { lockScroll, unlockScroll, trapFocus } from "../../foundations/overlay.j
 import dismissIcon from "../../icons/generated/fluent-dismiss-regular.marko";
 import backIcon from "../../icons/generated/fluent-chevron-left-regular.marko";
 
+static const DEFAULT_WIDTH = 600;
+static const MIN_WIDTH = 400;
+static const MAX_WIDTH_RATIO = 0.9;
+static const KEYBOARD_STEP = 16;
+
+static function maxWidth() {
+  return Math.max(MIN_WIDTH, Math.round(window.innerWidth * MAX_WIDTH_RATIO));
+}
+
+static function clampWidth(value) {
+  return Math.min(maxWidth(), Math.max(MIN_WIDTH, Math.round(value)));
+}
+
 class {
   onCreate() {
-    this.state = { confirming: false };
+    // width stays null until the visitor drags: the CSS default (600px) holds until then.
+    this.state = { confirming: false, width: null, resizing: false };
     this.release = null;
   }
 
@@ -80,8 +94,10 @@ class {
   }
 
   shut() {
+    this.stopResize?.();
     if (!this.locked) return;
     this.locked = false;
+    this.state.width = null;
     unlockScroll();
     this.release?.();
     this.release = null;
@@ -121,6 +137,52 @@ class {
     this.retrap(this.getEl("panel"));
   }
 
+  currentWidth() {
+    return this.state.width ?? (this.getEl("panel")?.getBoundingClientRect().width || DEFAULT_WIDTH);
+  }
+
+  growDirection() {
+    return (this.input.placement ?? "right") === "right" ? -1 : 1;
+  }
+
+  startResize(event) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    const startX = event.clientX;
+    const startWidth = this.currentWidth();
+    const direction = this.growDirection();
+    this.state.resizing = true;
+
+    const onMove = (moveEvent) => {
+      this.state.width = clampWidth(startWidth + (moveEvent.clientX - startX) * direction);
+    };
+    const onUp = () => {
+      this.stopResize = null;
+      this.state.resizing = false;
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", onUp);
+      document.removeEventListener("pointercancel", onUp);
+    };
+    this.stopResize = onUp;
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onUp);
+    document.addEventListener("pointercancel", onUp);
+  }
+
+  resizeByKey(event) {
+    const direction = this.growDirection();
+    const keys = {
+      ArrowLeft: () => this.currentWidth() - KEYBOARD_STEP * direction,
+      ArrowRight: () => this.currentWidth() + KEYBOARD_STEP * direction,
+      Home: () => MIN_WIDTH,
+      End: () => maxWidth(),
+    };
+    const next = keys[event.key];
+    if (!next) return;
+    event.preventDefault();
+    this.state.width = clampWidth(next());
+  }
+
   confirmAndClose() {
     this.state.confirming = false;
     this.wantsConfirmFocus = false;
@@ -167,8 +229,10 @@ $ {
   const panelClass = [
     "sds-drawer",
     placement !== "right" ? `sds-drawer--${placement}` : "",
+    state.resizing ? "sds-drawer--resizing" : "",
     extraClass,
   ].filter(Boolean).join(" ");
+  const panelStyle = state.width !== null ? `--drawer-width:${state.width}px` : null;
 }
 
 <if(isOpen)>
@@ -181,7 +245,7 @@ $ {
     aria-label=title
     on-click("handleOverlayClick")
   >
-    <div key="panel" class=panelClass>
+    <div key="panel" class=panelClass style=panelStyle>
       <div class="sds-drawer__header">
         <if(onBack)>
           <sds-icon-button variant="neutral" aria-label=backLabel onClick=onBack>
@@ -236,6 +300,19 @@ $ {
           </else>
         </div>
       </if>
+
+      <div
+        class="sds-drawer__resize-handle"
+        role="separator"
+        aria-orientation="vertical"
+        aria-label="Redimensionar drawer"
+        aria-valuemin=MIN_WIDTH
+        aria-valuemax=(typeof window !== "undefined" ? maxWidth() : null)
+        aria-valuenow=(state.width ?? DEFAULT_WIDTH)
+        tabindex="0"
+        on-pointerdown("startResize")
+        on-keydown("resizeByKey")
+      />
     </div>
 
     <if(state.confirming)>

package/components/IconButton/IconButton.css

@@ -7,7 +7,7 @@
  *//* ============================================================
    SDS IconButton
    Sizes: 32 | 40 | 48px
-   Variants: primary (colored, default) | neutral (gray)
+   Variants: primary (colored, default) | neutral (gray) | inverse (white, on photo/dark)
    ============================================================ */
 
 .sds-icon-button {
@@ -74,11 +74,27 @@
 .sds-icon-button--neutral .sds-icon-button__icon {
   color: var(--color-neutral-70);
 }
+/* ── Inverse: white icon over a photo or a dark surface ──
+   Ported from kdls-design-system 2.10.0 (2f15769). That surface never follows the theme,
+   so neither do the overlays: a fixed white tint, built from --color-white the way
+   --color-scrim is built from --color-black. Not --color-opacity-*, which follows the theme,
+   nor --color-opacity-inverse-*, which runs against it — in the dark theme that one turns
+   dark, and a dark tint on a dark surface is a hover nobody sees. KDLS writes the same
+   10% / 20% as rgba literals. */
+.sds-icon-button--inverse .sds-icon-button__icon {
+  color: var(--color-white);
+}
+.sds-icon-button--inverse:hover:not(:disabled):not(.sds-icon-button--loading) {
+  background-color: color-mix(in srgb, var(--color-white) 10%, transparent);
+}
+.sds-icon-button--inverse:active:not(:disabled):not(.sds-icon-button--loading) {
+  background-color: color-mix(in srgb, var(--color-white) 20%, transparent);
+}
 /* ── Focus ring ── */
 .sds-icon-button:focus-visible {
   box-shadow: var(--focus-ring);
 }
-/* ── Disabled — always last, overrides primary/neutral icon color via cascade order ── */
+/* ── Disabled — always last, overrides primary/neutral/inverse icon color via cascade order ── */
 .sds-icon-button:disabled .sds-icon-button__icon,
 .sds-icon-button[aria-disabled="true"] .sds-icon-button__icon {
   color: var(--color-neutral-40);

package/components/IconButton/icon-button-variants.js

@@ -3,8 +3,11 @@
  *
  * Ported from kdls-design-system v2.5.1 (0f3edf8) components/IconButton/IconButton.tsx.
  * Divergence: none. `primary` was already the slot, not a Kenlo value.
+ *
+ * `inverse` came later, from kdls-design-system 2.10.0 (2f15769): a white glyph for a button
+ * over a photo or a dark surface — the Uploader's strip over a preview is the first.
  */
-export const ICON_BUTTON_VARIANTS = ['primary', 'neutral'];
+export const ICON_BUTTON_VARIANTS = ['primary', 'neutral', 'inverse'];
 export const ICON_BUTTON_SIZES = ['sm', 'md', 'lg'];
 
 function assertOneOf(label, value, allowed) {

package/components/Input/Input.css

@@ -391,19 +391,50 @@
 .sds-input__hint--disabled { color: var(--color-neutral-40); }
 /* ── Textbox (textarea) variant ── */
 .sds-input--textbox {
-  height: auto;
+  height: var(--sds-textarea-height, auto);
   min-height: var(--sds-textarea-min-height, 114px);
   align-items: flex-start;
-  resize: vertical;
   overflow: hidden;
 }
-/* Field: fixed padding-top — guarantees constant height regardless of state */
+/* Field: fixed padding-top — guarantees constant height regardless of state.
+   The textarea runs down to the bottom border, as in KDLS: past the last row the start of
+   the next line shows cut at the edge, so a longer text reads as one that goes on. */
 .sds-input--textbox .sds-input__field {
   min-height: 0;
   padding-top: var(--spacing-7);
-  padding-bottom: var(--spacing-3);
+  padding-bottom: 0;
   align-self: stretch;
 }
+/* The target grows with the corner radius so the rounded corner never eats into its 24px,
+   and the grip moves in with it so it stays inside the curve. */
+.sds-input__resize-handle {
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  width: max(var(--spacing-6), calc(var(--radius-md) * 0.5 + var(--spacing-4)));
+  height: max(var(--spacing-6), calc(var(--radius-md) * 0.5 + var(--spacing-4)));
+  display: flex;
+  align-items: flex-end;
+  justify-content: flex-end;
+  padding: 0 max(var(--spacing-1), calc(var(--radius-md) * 0.3)) max(var(--spacing-1), calc(var(--radius-md) * 0.3)) 0;
+  box-sizing: border-box;
+  color: var(--color-neutral-50);
+  cursor: ns-resize;
+  touch-action: none;
+  z-index: 1;
+  outline: none;
+  transition: color 120ms ease;
+}
+.sds-input__resize-handle:hover,
+.sds-input--resizing .sds-input__resize-handle {
+  color: var(--color-primary-50-solid);
+}
+.sds-input__resize-handle:focus-visible {
+  box-shadow: var(--focus-ring-inset);
+}
+.sds-input--resizing {
+  user-select: none;
+}
 .sds-input--textbox .sds-input__label {
   top: 26px;
   transform: translateY(-50%);
@@ -413,17 +444,29 @@
 .sds-input--filled.sds-input--textbox .sds-input__label,
 .sds-input--textbox:focus-within .sds-input__label {
   top: var(--spacing-2);
+  /* Reset the unfloated rule's translateY(-50%) above — same specificity, later in the
+     file, so it otherwise wins the tie and cancels `top`, pinning the label to the
+     field's edge instead of 8px below it. */
+  transform: none;
   font-size: var(--font-size-label-sm);
   line-height: var(--lh-label-sm);
 }
+/* The textarea also runs over half of the field's right padding, so its scrollbar sits 8px
+   from the right border instead of 16px inside the text's room, as in KDLS. The gutter is
+   kept even without a bar, so the text ends at the same place with or without one. Its own
+   8px at the end is the bottom room, reached when it scrolls to the end. */
 .sds-input__native--textarea {
+  box-sizing: border-box;
   padding-top: 0;
-  padding-bottom: 0;
+  padding-right: 0;
+  padding-bottom: var(--spacing-2);
   resize: none;
   flex: 1;
   line-height: var(--lh-body-md);
   overflow-y: auto;
-  width: 100%;
+  scrollbar-gutter: stable;
+  width: calc(100% + var(--spacing-2));
+  margin-right: calc(-1 * var(--spacing-2));
 }
 /* ── Dark mode ── */
 [data-theme="dark"] .sds-input__country {

package/components/Input/input.marko

@@ -47,6 +47,9 @@ import { assertInputType, assertFeedback, assertWidth, formatValue, nativeTypeFo
 import { validateOnFor, SUBMIT_EVENT } from "../Form/form-context.js";
 import { rehyphenate } from "../../foundations/attrs.js";
 
+static const TEXTBOX_LINE = 24;
+static const TEXTBOX_CHROME = 42;
+
 class {
   onCreate(input) {
     this.state = {
@@ -56,6 +59,8 @@ class {
       showPassword: false,
       error: null,
       touched: false,
+      textboxHeight: null,
+      resizing: false,
     };
   }
 
@@ -137,9 +142,58 @@ class {
   }
 
   onDestroy() {
+    this.stopResize?.();
     this.getEl("field-root")?.removeEventListener(SUBMIT_EVENT, this.onFormSubmit);
   }
 
+  get textboxMinHeight() {
+    return (this.input.rows ?? 3) * TEXTBOX_LINE + TEXTBOX_CHROME;
+  }
+
+  clampTextboxHeight(value) {
+    return Math.max(this.textboxMinHeight, Math.round(value));
+  }
+
+  currentTextboxHeight() {
+    return this.state.textboxHeight
+      ?? (this.getEl("box")?.getBoundingClientRect().height || this.textboxMinHeight);
+  }
+
+  startResize(event) {
+    if (event.button !== 0) return;
+    event.preventDefault();
+    const startY = event.clientY;
+    const startHeight = this.currentTextboxHeight();
+    this.state.resizing = true;
+
+    const onMove = (moveEvent) => {
+      this.state.textboxHeight = this.clampTextboxHeight(startHeight + moveEvent.clientY - startY);
+    };
+    const onUp = () => {
+      this.stopResize = null;
+      this.state.resizing = false;
+      document.removeEventListener("pointermove", onMove);
+      document.removeEventListener("pointerup", onUp);
+      document.removeEventListener("pointercancel", onUp);
+    };
+    this.stopResize = onUp;
+    document.addEventListener("pointermove", onMove);
+    document.addEventListener("pointerup", onUp);
+    document.addEventListener("pointercancel", onUp);
+  }
+
+  resizeByKey(event) {
+    const keys = {
+      ArrowDown: () => this.currentTextboxHeight() + TEXTBOX_LINE,
+      ArrowUp: () => this.currentTextboxHeight() - TEXTBOX_LINE,
+      Home: () => this.textboxMinHeight,
+    };
+    const next = keys[event.key];
+    if (!next) return;
+    event.preventDefault();
+    this.state.textboxHeight = this.clampTextboxHeight(next());
+  }
+
   get currentValue() {
     return this.input.value !== undefined ? this.input.value : this.state.value;
   }
@@ -306,6 +360,7 @@ $ {
     // KDLS marks only the textbox. A modifier per type produced ten classes no rule
     // matched — dead weight in every field's class attribute.
     type === "textbox" ? "sds-input--textbox" : "",
+    state.resizing ? "sds-input--resizing" : "",
     effectiveFeedback !== "none" ? `sds-input--feedback-${effectiveFeedback}` : "",
     disabled ? "sds-input--disabled" : "",
     loading ? "sds-input--loading" : "",
@@ -348,9 +403,13 @@ $ {
     // that reads it and lost the line that writes it. 24px a line plus the 42px the label
     // and padding take, which is KDLS's arithmetic.
     <div
+      key="box"
       class=fieldBoxClass
       aria-busy=(loading ? "true" : null)
-      style=(isTextarea ? `--sds-textarea-min-height: ${rows * 24 + 42}px` : null)
+      style=(isTextarea
+        ? `--sds-textarea-min-height: ${component.textboxMinHeight}px`
+          + (state.textboxHeight !== null ? `; --sds-textarea-height: ${state.textboxHeight}px` : "")
+        : null)
     >
       <if(showsCountry)>
         <!-- The flag opens the list and the dial code sits beside it, which is the whole
@@ -465,6 +524,24 @@ $ {
         </button>
       </if>
 
+      <if(isTextarea && !disabled)>
+        <div
+          class="sds-input__resize-handle"
+          role="separator"
+          aria-orientation="horizontal"
+          aria-label="Redimensionar campo"
+          aria-valuemin=component.textboxMinHeight
+          aria-valuenow=(state.textboxHeight ?? component.textboxMinHeight)
+          tabindex="0"
+          on-pointerdown("startResize")
+          on-keydown("resizeByKey")
+        >
+          <svg width="10" height="10" viewBox="0 0 10 10" fill="none" aria-hidden="true">
+            <path d="M9 1L1 9M9 5L5 9" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
+          </svg>
+        </div>
+      </if>
+
       <if(showsIncrementer)>
         <div class="sds-input__spinner">
           <button type="button" class="sds-input__spinner-btn" tabindex="-1"

package/components/Modal/Modal.css

@@ -80,7 +80,9 @@
 .sds-modal__body {
   flex: 1;
   overflow-y: auto;
-  padding: 0 var(--spacing-6);
+  /* Vertical padding keeps a focused control's ring from clipping against the
+     scroll container's edge — the container has no padding to draw into. */
+  padding: var(--spacing-1) var(--spacing-6);
 }
 /* ── Footer: pt-[24px] pb-[24px] px-[24px] ── */
 .sds-modal__footer {

package/components/Toast/Toast.css

@@ -46,14 +46,78 @@
   bottom: var(--spacing-6);
   left: var(--spacing-6);
   z-index: var(--z-notice);
-  display: flex;
-  flex-direction: column;
-  gap: var(--spacing-3);
   pointer-events: none;
 }
 .sds-toaster > * {
   pointer-events: auto;
 }
+/* ── Pile: the front toast plus the edge of the next two (KDLS MR !67) ──
+   Each edge is 10px higher and 5% smaller; 10px sits between --spacing-2 and --spacing-3
+   and there is no token for a scale. The edges take the front toast's height from
+   inset: 0, so nothing is measured in script. */
+.sds-toaster__close-all {
+  display: flex;
+  justify-content: center;
+  margin-bottom: var(--spacing-3);
+}
+.sds-toaster__stack--peek-1 .sds-toaster__close-all {
+  margin-bottom: calc(var(--spacing-3) + 10px);
+}
+.sds-toaster__stack--peek-2 .sds-toaster__close-all {
+  margin-bottom: calc(var(--spacing-3) + 20px);
+}
+.sds-toaster__list {
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-3);
+  border-radius: var(--radius-md);
+  outline: none;
+}
+.sds-toaster__list--collapsed {
+  cursor: pointer;
+}
+.sds-toaster__list:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+.sds-toaster__item {
+  position: relative;
+  z-index: 3;
+  transform-origin: 50% 0;
+  transition: transform 200ms ease;
+}
+.sds-toaster__item--depth-1,
+.sds-toaster__item--depth-2,
+.sds-toaster__item--depth-3 {
+  position: absolute;
+  inset: 0;
+}
+.sds-toaster__item--depth-1 {
+  z-index: 2;
+  transform: translateY(-10px) scale(0.95);
+}
+.sds-toaster__item--depth-2,
+.sds-toaster__item--depth-3 {
+  z-index: 1;
+  transform: translateY(-20px) scale(0.9);
+}
+.sds-toaster__item--depth-3 {
+  z-index: 0;
+  opacity: 0;
+}
+.sds-toaster__item--depth-1 .sds-toast,
+.sds-toaster__item--depth-2 .sds-toast,
+.sds-toaster__item--depth-3 .sds-toast {
+  height: 100%;
+}
+.sds-toaster__item--depth-1 .sds-toast > *,
+.sds-toaster__item--depth-2 .sds-toast > *,
+.sds-toaster__item--depth-3 .sds-toast > * {
+  opacity: 0;
+}
+@media (prefers-reduced-motion: reduce) {
+  .sds-toaster__item { transition: none; }
+}
 .sds-toast__icon {
   display: inline-flex;
   align-items: center;
@@ -65,6 +129,25 @@
 .sds-toast__message {
   flex: 1;
 }
+/* ── Action: a line of its own below the message; the ✕ stays on the first line ── */
+.sds-toast--with-action {
+  flex-wrap: wrap;
+  row-gap: 0;
+}
+.sds-toast--with-action .sds-toast__message {
+  min-width: 0;
+  overflow-wrap: break-word;
+}
+.sds-toast__action-row {
+  order: 1;
+  flex-basis: 100%;
+  box-sizing: border-box;
+  /* Icon (24px) + gap: the button starts where the text starts */
+  padding-left: calc(24px + var(--spacing-2));
+}
+.sds-toast--neutral .sds-toast__action-row {
+  padding-left: 0;
+}
 .sds-toast__dismiss {
   flex-shrink: 0;
   color: inherit; /* <button> resets color; force inheritance from .sds-toast */

package/components/Toast/toast-store.js

@@ -1,13 +1,18 @@
 /**
- * The list of live toasts, their timers, and who to tell when it changes.
+ * The list of live toasts, the timer of the one in front, and who to tell when it changes.
  *
- * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Toast/toast-store.ts, which is
- * already framework-free — a module-level list and a set of listeners. That is what lets
+ * Ported from kdls-design-system components/Toast/toast-store.ts — first from v2.5.1
+ * (0f3edf8), then the pile from MR !67 (ai-fix/kdls-toast-pilha, 8df83d3). It is already
+ * framework-free — a module-level list and a set of listeners. That is what lets
  * `toast(...)` be called from anywhere, including from a catch block that is nowhere near a
  * component, and it survives the move from React to Marko untouched in behaviour.
  *
- * The only change is the class name in the comment below, because the exit animation it
- * points at is now sds-toast--leaving.
+ * Only the front toast — the oldest one still on screen — counts down. The next one starts
+ * its own time when the front one leaves: several toasts fired at once pile up, and if they
+ * all ran together they would all vanish together, before anyone read the ones behind.
+ *
+ * The only other change is the class name in the comment below, because the exit animation
+ * it points at is now sds-toast--leaving.
  */
 
 /** Fixed by the design system: 4s, or 8s when the visitor needs time to read a failure. */
@@ -20,7 +25,9 @@ export const TOAST_EXIT_MS = 220;
 let toasts = [];
 let seq = 0;
 const listeners = new Set();
-const running = new Map();
+/** The front toast's time: { id, startedAt, remaining, timeout }. `timeout` is unset while paused. */
+let countdown = null;
+let paused = false;
 
 function emit() {
   const snapshot = [...toasts];
@@ -37,38 +44,53 @@ export function subscribe(listener) {
   return () => { listeners.delete(listener); };
 }
 
-function arm(id, ms) {
-  const timeout = setTimeout(() => startLeaving(id), ms);
-  running.set(id, { timeout, startedAt: Date.now(), remaining: ms });
+function run() {
+  if (!countdown || paused) return;
+  const { id } = countdown;
+  countdown.startedAt = Date.now();
+  countdown.timeout = setTimeout(() => startLeaving(id), countdown.remaining);
+}
+
+/** Starts the time of the front toast, when it is not counting yet. */
+function armFront() {
+  if (countdown) return;
+  const front = toasts.find((t) => !t.leaving);
+  if (!front) return;
+  countdown = {
+    id: front.id,
+    startedAt: Date.now(),
+    remaining: front.feedback === 'error' ? DURATION_ERROR : DURATION_DEFAULT,
+  };
+  run();
 }
 
 function startLeaving(id) {
   const item = toasts.find((t) => t.id === id);
   if (!item || item.leaving) return;
-  const timer = running.get(id);
-  if (timer) {
-    clearTimeout(timer.timeout);
-    running.delete(id);
+  if (countdown?.id === id) {
+    clearTimeout(countdown.timeout);
+    countdown = null;
   }
   toasts = toasts.map((t) => (t.id === id ? { ...t, leaving: true } : t));
+  armFront();
   emit();
   setTimeout(() => remove(id), TOAST_EXIT_MS);
 }
 
 function remove(id) {
   toasts = toasts.filter((t) => t.id !== id);
+  // The pile left from under the pointer, so no mouseleave will come to resume.
+  if (toasts.length === 0) paused = false;
   emit();
 }
 
-/** Adds a toast and schedules its own dismissal. Returns the id. */
+/** Adds a toast at the end of the line. Returns the id. */
 export function addToast(message, opts = {}) {
   const id = ++seq;
-  const feedback = opts.feedback ?? 'neutral';
-  const duration = feedback === 'error' ? DURATION_ERROR : DURATION_DEFAULT;
   const item = {
     id,
     message,
-    feedback,
+    feedback: opts.feedback ?? 'neutral',
     actionLabel: opts.actionLabel,
     onAction: opts.onAction,
     actionDisabled: opts.actionDisabled,
@@ -78,8 +100,8 @@ export function addToast(message, opts = {}) {
     leaving: false,
   };
   toasts = [...toasts, item];
+  armFront();
   emit();
-  arm(id, duration);
   return id;
 }
 
@@ -88,30 +110,37 @@ export function dismissToast(id) {
   startLeaving(id);
 }
 
+/** Closes every toast on screen at once — the pile's "Fechar todos". */
+export function dismissAll() {
+  toasts.filter((t) => !t.leaving).forEach((t) => startLeaving(t.id));
+}
+
 /**
- * Holds every timer where it is. The container calls this on hover: a toast that vanishes
- * while someone is reaching for its action is a toast that wasted their time.
+ * Holds the time where it is, including the turn of whichever toast comes forward next.
+ * The container calls this on hover: a toast that vanishes while someone is reaching for
+ * its action is a toast that wasted their time.
  */
 export function pauseAll() {
-  running.forEach((timer) => {
-    clearTimeout(timer.timeout);
-    const elapsed = Date.now() - timer.startedAt;
-    timer.remaining = Math.max(0, timer.remaining - elapsed);
-  });
+  if (paused) return;
+  paused = true;
+  if (!countdown?.timeout) return;
+  clearTimeout(countdown.timeout);
+  countdown.timeout = undefined;
+  countdown.remaining = Math.max(0, countdown.remaining - (Date.now() - countdown.startedAt));
 }
 
-/** Starts them again with whatever time they had left. */
+/** Starts it again with whatever time was left. */
 export function resumeAll() {
-  running.forEach((timer, id) => {
-    timer.timeout = setTimeout(() => startLeaving(id), timer.remaining);
-    timer.startedAt = Date.now();
-  });
+  if (!paused) return;
+  paused = false;
+  run();
 }
 
 /** Tests only: the list is module state and outlives them. */
 export function resetToasts() {
-  running.forEach((timer) => clearTimeout(timer.timeout));
-  running.clear();
+  if (countdown) clearTimeout(countdown.timeout);
+  countdown = null;
+  paused = false;
   toasts = [];
   seq = 0;
   emit();

package/components/Toast/toast.marko

@@ -9,6 +9,11 @@
      surface because KDLS put it there, marked internal for the same reason: nothing else
      should set it.
 
+     The action button sits on a line of its own, below the message and aligned with it,
+     as KDLS has it since MR !67 (ai-fix/kdls-toast-pilha, 8df83d3): beside the message it
+     left the text 136px and a short sentence ran to four or six lines; below it the text
+     has the full 256px, and the ✕ stays on the first line, on the right.
+
      Divergence: none in behaviour. The four hover and active overlays were rgba literals
      in KDLS's stylesheet, which is what --color-opacity-inverse-* now holds — the regular
      opacity family follows the theme and is backwards on a surface that runs against it. -->
@@ -49,6 +54,7 @@ $ {
   const classes = [
     "sds-toast",
     `sds-toast--${feedback}`,
+    actionLabel ? "sds-toast--with-action" : "",
     leaving ? "sds-toast--leaving" : "",
     extraClass,
   ].filter(Boolean).join(" ");
@@ -68,15 +74,17 @@ $ {
   <span class="sds-toast__message">${message}</span>
 
   <if(actionLabel)>
-    <sds-button
-      variant="link"
-      label=actionLabel
-      onClick=onAction
-      disabled=actionDisabled
-      disabledTooltip=actionDisabledTooltip
-      disabledTooltipPosition=actionDisabledTooltipPosition
-      class="sds-toast__action"
-    />
+    <div class="sds-toast__action-row">
+      <sds-button
+        variant="link"
+        label=actionLabel
+        onClick=onAction
+        disabled=actionDisabled
+        disabledTooltip=actionDisabledTooltip
+        disabledTooltipPosition=actionDisabledTooltipPosition
+        class="sds-toast__action"
+      />
+    </div>
   </if>
 
   <if(showDismiss)>

package/components/Toast/toaster.marko

@@ -1,11 +1,25 @@
-<!-- sds-toaster — ported from kdls-design-system v2.5.1 (0f3edf8) components/Toast/Toaster.tsx.
+<!-- sds-toaster — ported from kdls-design-system v2.5.1 (0f3edf8) components/Toast/Toaster.tsx,
+     and the pile from MR !67 (ai-fix/kdls-toast-pilha, 8df83d3).
 
      Mount once at the root of the page. It subscribes to the store and renders whatever
-     toast(...) has fired, stacked in the corner. No attributes: the position is fixed and
-     the timing belongs to the store.
+     toast(...) has fired, in the corner. No attributes: the position is fixed and the
+     timing belongs to the store.
 
-     Hovering the stack pauses every timer. A toast that vanishes while someone is reaching
-     for its action has wasted their time, and KDLS gets this right — it is carried as is.
+     With more than one toast they pile up: only the first to arrive is shown whole, with
+     the edge of the next two above it, each 10px higher and 5% smaller; from the fourth on
+     nothing shows. A click on the pile (or Enter, with the focus on it) opens it into a
+     column, 12px apart, the newest at the bottom; a click outside or Esc closes it. A click
+     on a toast's ✕ or action does not open it. With the pointer over it, the keyboard focus
+     on it, or the pile open, a "Fechar todos" button sits centred above it. One toast per
+     problem is the rule this exists for: seven refused photos in a column took 85% of a
+     laptop screen, and all seven left at once.
+
+     Hovering pauses the time, including the turn of whichever toast comes forward next. A
+     toast that vanishes while someone is reaching for its action has wasted their time, and
+     KDLS gets this right — it is carried as is.
+
+     Keyboard focus that enters a toast behind the front one opens the pile, so the caret
+     never lands on a button nobody can see.
 
      Divergences:
 
@@ -17,54 +31,168 @@
 
      It renders nothing at all until the store has something, rather than an empty
      container: an empty <div role="region" aria-label="Notificações"> is a landmark a
-     screen reader offers to navigate to and finds nothing inside. -->
+     screen reader offers to navigate to and finds nothing inside.
+
+     The listeners for a click outside and for Esc live on the document for as long as the
+     toaster is mounted and do nothing while the pile is closed. KDLS adds them only while
+     it is open; here that would mean re-binding on a state change, and the cost of an idle
+     check per key press is nothing. -->
+
+import { subscribe, dismissToast, dismissAll, pauseAll, resumeAll } from "./toast-store.js";
 
-import { subscribe, dismissToast, pauseAll, resumeAll } from "./toast-store.js";
+static const HIDDEN_DEPTH = 3;
+
+static function itemClass(index, collapsed) {
+  const depth = collapsed ? Math.min(index, HIDDEN_DEPTH) : 0;
+  return ["sds-toaster__item", depth ? `sds-toaster__item--depth-${depth}` : ""]
+    .filter(Boolean).join(" ");
+}
+
+static function isFocusVisible(el) {
+  try {
+    return el.matches(":focus-visible");
+  } catch {
+    return true;
+  }
+}
 
 class {
   onCreate() {
-    this.state = { items: [] };
+    this.state = { items: [], expanded: false, hovered: false, keyboardFocus: false };
   }
 
   onMount() {
     // The store calls back immediately with what it already holds, so a toaster mounted
     // after a toast was fired still shows it.
-    this.unsubscribe = subscribe((items) => { this.state.items = items; });
+    this.unsubscribe = subscribe((items) => {
+      this.state.items = items;
+      if (items.length < 2) this.state.expanded = false;
+      if (!items.length) {
+        this.state.hovered = false;
+        this.state.keyboardFocus = false;
+      }
+    });
+
+    this.onDocumentMouseDown = (event) => {
+      if (!this.state.expanded) return;
+      // Marko replaces nodes on re-render: look the pile up now, never keep a reference.
+      const stack = this.getEl("stack");
+      if (!stack || !stack.contains(event.target)) this.state.expanded = false;
+    };
+    // Capture: the open pile is the top layer, so its Esc runs before a Drawer's or Modal's.
+    this.onDocumentKeyDown = (event) => {
+      if (!this.state.expanded || event.key !== "Escape") return;
+      event.preventDefault();
+      this.state.expanded = false;
+    };
+    document.addEventListener("mousedown", this.onDocumentMouseDown);
+    document.addEventListener("keydown", this.onDocumentKeyDown, true);
   }
 
   onDestroy() {
     this.unsubscribe?.();
+    document.removeEventListener("mousedown", this.onDocumentMouseDown);
+    document.removeEventListener("keydown", this.onDocumentKeyDown, true);
+  }
+
+  get collapsed() {
+    return this.state.items.length > 1 && !this.state.expanded;
+  }
+
+  enter() {
+    this.state.hovered = true;
+    pauseAll();
+  }
+
+  leave() {
+    this.state.hovered = false;
+    resumeAll();
+  }
+
+  focusIn(event) {
+    const target = event.target;
+    this.state.keyboardFocus = target === this.getEl("list") || isFocusVisible(target);
+    if (this.collapsed && target.closest('[class*="sds-toaster__item--depth-"]')) {
+      this.state.expanded = true;
+    }
+  }
+
+  focusOut(event) {
+    const stack = this.getEl("stack");
+    if (!stack || !stack.contains(event.relatedTarget)) this.state.keyboardFocus = false;
   }
 
-  pause() { pauseAll(); }
-  resume() { resumeAll(); }
+  open(event) {
+    if (this.collapsed && !event.target.closest("button")) this.state.expanded = true;
+  }
+
+  openByKey(event) {
+    if (this.collapsed && event.key === "Enter" && event.target === this.getEl("list")) {
+      this.state.expanded = true;
+    }
+  }
+
+  closeAll() { dismissAll(); }
   dismiss(id) { dismissToast(id); }
 }
 
-<if(state.items.length)>
-  <div
-    class="sds-toaster"
-    role="region"
-    aria-label="Notificações"
-    on-mouseenter("pause")
-    on-mouseleave("resume")
-  >
-    <!-- `key` on each toast, so a dismissal removes the right node rather than shifting
-         the list up underneath the animation. -->
-    <for|item| of=state.items>
-      <sds-toast
-        key=item.id
-        message=item.message
-        feedback=item.feedback
-        actionLabel=item.actionLabel
-        onAction=item.onAction
-        actionDisabled=item.actionDisabled
-        actionDisabledTooltip=item.actionDisabledTooltip
-        actionDisabledTooltipPosition=item.actionDisabledTooltipPosition
-        showDismiss=item.showDismiss
-        leaving=item.leaving
-        onDismiss=() => component.dismiss(item.id)
-      />
-    </for>
+$ {
+  const { items, expanded, hovered, keyboardFocus } = state;
+  const stacked = items.length > 1;
+  const collapsed = stacked && !expanded;
+  const peek = collapsed ? Math.min(items.length - 1, 2) : 0;
+  const showCloseAll = stacked && (hovered || keyboardFocus || expanded);
+  const stackClass = ["sds-toaster__stack", peek ? `sds-toaster__stack--peek-${peek}` : ""]
+    .filter(Boolean).join(" ");
+  const listClass = ["sds-toaster__list", collapsed ? "sds-toaster__list--collapsed" : ""]
+    .filter(Boolean).join(" ");
+}
+
+<if(items.length)>
+  <div class="sds-toaster" role="region" aria-label="Notificações">
+    <div
+      key="stack"
+      class=stackClass
+      on-mouseenter("enter")
+      on-mouseleave("leave")
+      on-focusin("focusIn")
+      on-focusout("focusOut")
+    >
+      <if(showCloseAll)>
+        <div class="sds-toaster__close-all">
+          <sds-button variant="pill" label="Fechar todos" onClick=() => component.closeAll()/>
+        </div>
+      </if>
+      <div
+        key="list"
+        class=listClass
+        role=(stacked ? "group" : null)
+        aria-label=(stacked ? `${items.length} notificações` : null)
+        aria-expanded=(stacked ? String(expanded) : null)
+        tabindex=(stacked ? "0" : null)
+        on-click("open")
+        on-keydown("openByKey")
+      >
+        <!-- `key` on each toast, so a dismissal removes the right node rather than shifting
+             the list up underneath the animation. -->
+        <for|item, index| of=items>
+          <div key=`item-${item.id}` class=itemClass(index, collapsed)>
+            <sds-toast
+              key=item.id
+              message=item.message
+              feedback=item.feedback
+              actionLabel=item.actionLabel
+              onAction=item.onAction
+              actionDisabled=item.actionDisabled
+              actionDisabledTooltip=item.actionDisabledTooltip
+              actionDisabledTooltipPosition=item.actionDisabledTooltipPosition
+              showDismiss=item.showDismiss
+              leaving=item.leaving
+              onDismiss=() => component.dismiss(item.id)
+            />
+          </div>
+        </for>
+      </div>
+    </div>
   </div>
 </if>

package/components/Uploader/Uploader.css

@@ -6,11 +6,15 @@
      [data-color-scheme="lya"] .sds-uploader--dragging
  */
 
-/* Three literals snapped to the system. The overlay that dims a preview is --color-scrim,
-   black in both themes for the same reason the modal's veil is. The two hover states on it
-   sit on that dark overlay rather than on the page, so they read --color-opacity-inverse-*,
-   the family that runs against the theme — the ordinary one would draw a dark veil on an
-   already dark surface. The alphas move from .15/.25 to the .10/.20 the scale offers. *//* ============================================================
+/* The strip that dims a preview is black at 60%, in both themes, built from --color-black
+   the way --color-scrim is. Not the scrim itself: that is 70%, a modal's veil over a whole
+   page, and every overlay that covers the page reads it — Rafael set the strip lighter, the
+   same value KDLS uses. The crop editor's mask below is a veil, and keeps the scrim.
+
+   Its three buttons are sds-icon-button variant="inverse": the white glyph and the hover
+   and press tints come from the button itself, never from rules here. The port carried
+   three such rules aimed at --neutral and --24, classes these buttons never had, so none
+   applied and the glyphs came out in the primary slot. *//* ============================================================
    SDS Uploader
    ============================================================ */
 
@@ -92,16 +96,7 @@
   justify-content: flex-end;
   gap: var(--spacing-1);
   padding: var(--spacing-2) var(--spacing-3);
-  background: var(--color-scrim);
-}
-.sds-uploader__overlay .sds-icon-button--neutral .sds-icon-button__icon {
-  color: var(--color-white);
-}
-.sds-uploader__overlay .sds-icon-button--24:hover:not(:disabled)::before {
-  background: var(--color-opacity-inverse-10);
-}
-.sds-uploader__overlay .sds-icon-button--24:active:not(:disabled)::before {
-  background: var(--color-opacity-inverse-20);
+  background: color-mix(in srgb, var(--color-black) 60%, transparent);
 }
 /* ── Edit modal body ── */
 .sds-uploader__edit-body {

package/components/Uploader/uploader.marko

@@ -167,15 +167,15 @@ $ {
   <div class=`sds-uploader sds-uploader--filled ${extraClass}`.trim()>
     <img src=value alt=previewAlt class="sds-uploader__preview"/>
     <div class="sds-uploader__overlay">
-      <sds-icon-button aria-label=removeLabel onClick=() => component.remove()>
+      <sds-icon-button variant="inverse" aria-label=removeLabel onClick=() => component.remove()>
         <@icon><${deleteIcon}/></@icon>
       </sds-icon-button>
       <if(onDownload)>
-        <sds-icon-button aria-label=downloadLabel onClick=onDownload>
+        <sds-icon-button variant="inverse" aria-label=downloadLabel onClick=onDownload>
           <@icon><${downloadIcon}/></@icon>
         </sds-icon-button>
       </if>
-      <sds-icon-button aria-label=editLabel onClick=() => component.openEditor()>
+      <sds-icon-button variant="inverse" aria-label=editLabel onClick=() => component.openEditor()>
         <@icon><${cropIcon}/></@icon>
       </sds-icon-button>
     </div>

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@kenlo/sds-design-system",
-  "version": "1.0.2",
+  "version": "1.1.2",
   "description": "SDS, the Site Design System \u2014 Marko 5 components for Kenlo's public products (Site, Landing Page, Blog)",
   "license": "UNLICENSED",
   "repository": {