@kenlo/sds-design-system 0.9.9

package/README.md

@@ -0,0 +1,129 @@
+# SDS — Site Design System
+
+Componentes Marko 5 para os produtos **públicos** da Kenlo: Site, Landing Page e Blog.
+
+O SDS é irmão do [KDLS](https://www.npmjs.com/package/@kenlo/kdls-design-system), não uma
+versão dele. O KDLS é React e atende os produtos internos; o SDS é Marko e atende o que o
+visitante vê. Os dois nascem dos mesmos tokens de design, e cada um é dono do seu código.
+
+**Sem marca.** O site de um cliente não é um site da Kenlo, então nenhuma cor, gradiente ou
+alias da marca existe aqui. O que sobrou é o *encaixe*: um slot de cor primária que cada
+site preenche com a sua.
+
+---
+
+## Instalação
+
+```bash
+npm install @kenlo/sds-design-system
+```
+
+O Marko 5 é `peerDependency` — o projeto que consome já tem o seu.
+
+---
+
+## Começando
+
+Duas linhas e o sistema está de pé:
+
+```js
+// 1. Os tokens. Sem eles nenhum componente tem cor, espaço ou tipografia.
+import "@kenlo/sds-design-system/foundations/tokens.css";
+
+// 2. O CSS de cada componente que você usar.
+import "@kenlo/sds-design-system/components/Button/Button.css";
+```
+
+As tags não precisam de import. O `marko.json` na raiz do pacote é o catálogo: o compilador
+do Marko acha `<sds-button>` sozinho.
+
+```marko
+<sds-button variant="primary" onClick=salvar>Salvar</sds-button>
+
+<sds-input type="tel-inter" label="Telefone" onChange=(e, valor) => ... />
+
+<sds-card bordered hoverable>
+  <sds-text variant="titleSm">Apartamento 42</sds-text>
+</sds-card>
+```
+
+---
+
+## Tema
+
+Quatro atributos no `<html>` decidem a aparência inteira. Um atributo no valor padrão é
+**removido**, não escrito — então "sem atributo" é o padrão de instalação.
+
+| Atributo | Valores | Padrão |
+|---|---|---|
+| `data-theme` | `light`, `dark`, `system` | `light` |
+| `data-color-scheme` | `neutral`, `leaf`, `sand`, `wood`, `clay`, `flower`, `dusk`, `sky`, `sea`, `lake` | `neutral` |
+| `data-radius` | `flat`, `soft`, `medium`, `rounded` | `soft` |
+| `data-font` | `manrope`, `inter`, `helvetica`, `source-sans`, `nunito`, `montserrat` | `manrope` |
+
+Há duas portas para escrevê-los, e a diferença importa:
+
+```js
+// No servidor, durante o SSR — o primeiro quadro já sai pintado certo.
+import { themeAttributes } from "@kenlo/sds-design-system/foundations/theme-server.js";
+`<html ${themeAttributes({ colorScheme: "leaf", radius: "flat" })}>`
+
+// No navegador — para mudança ao vivo, como o preview do CMS.
+import { configureSds } from "@kenlo/sds-design-system/foundations/theme.js";
+configureSds({ theme: "dark" });
+```
+
+Aplicar o tema só pelo navegador pinta o primeiro quadro errado e corrige na frente do
+visitante. A metade servidor existe para evitar isso.
+
+---
+
+## Cor do cliente
+
+Cada site tem a sua cor, e ela entra em tempo de execução:
+
+```js
+import { applyCustomColor, applyCustomGradient, clearCustomScheme }
+  from "@kenlo/sds-design-system/foundations/custom-scheme.js";
+
+applyCustomColor("#2E7D32");                   // nove tons sólidos
+applyCustomGradient(["#77A6E0", "#BF71E5"]);   // nove gradientes
+clearCustomScheme();
+```
+
+As duas preenchem `--color-primary-10..90`, os companheiros `-solid` e o
+`--color-on-primary` — este último escolhido por luminância relativa (WCAG), para o texto
+sobre a cor ficar legível seja ela qual for. Uma chamada substitui a outra; nunca empilham.
+
+---
+
+## O que vem dentro
+
+- **46 componentes** — de `sds-accordion` a `sds-uploader`
+- **85 ícones** — Fluent, sociais e próprios, como componentes Marko (sem requisição a terceiros)
+- **Tokens** de cor, espaço, tipografia, sombra, raio e movimento
+- **Tema claro e escuro**, dez esquemas de cor, quatro esquemas de canto, seis fontes
+
+O pacote leva **código-fonte**, não build: o seu projeto compila os `.marko` com o
+toolchain que já tem.
+
+---
+
+## Documentação
+
+O portal tem todos os componentes com controles ao vivo, a tabela de props de cada um e o
+código pronto para copiar. Para subir localmente:
+
+```bash
+git clone https://gitlab.com/kenlo1/kenlo-sites/frontend/sds-design-system.git
+npm install
+npm run dev
+```
+
+---
+
+## Versionamento
+
+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.

package/components/Accordion/Accordion.css

@@ -0,0 +1,186 @@
+/* ============================================================
+   KDLS Accordion
+   ============================================================ */
+
+.sds-accordion {
+  width: 100%;
+  background: var(--component-bg-color);
+  border: 1px solid transparent;
+  border-radius: var(--radius-md);
+  font-family: var(--font-family-base);
+  overflow: hidden;
+}
+
+/* ── Header ── */
+.sds-accordion__header {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-4) var(--spacing-6);
+  cursor: pointer;
+  user-select: none;
+  outline: none;
+  transition: background-color 120ms ease;
+}
+
+.sds-accordion__header:hover {
+  background-color: var(--color-neutral-10);
+}
+
+.sds-accordion__header:focus-visible {
+  box-shadow: var(--focus-ring-inset);
+}
+
+/* ── Title ── */
+.sds-accordion__title {
+  flex: 1;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+
+/* Optional icon to the left of the title — 24px, aligned and non-shrinking */
+.sds-accordion__title-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: 24px;
+  height: 24px;
+  font-size: 24px;
+  flex-shrink: 0;
+  color: var(--title-color);
+}
+
+/* ── Title size: lg — larger vertical padding ── */
+.sds-accordion--title-lg .sds-accordion__header {
+  padding-top: var(--spacing-6);
+  padding-bottom: var(--spacing-6);
+}
+
+/* ── Action link (mirrors Button--link) ── */
+.sds-accordion__action {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-1);
+  padding: 0 var(--spacing-1);
+  height: 24px;
+  border: none;
+  background: transparent;
+  cursor: pointer;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-title-sm);
+  font-weight: var(--font-weight-medium);
+  line-height: var(--lh-title-sm);
+  color: var(--color-primary-50-solid);
+  flex-shrink: 0;
+  text-decoration: none;
+  transition: color 120ms ease;
+}
+
+.sds-accordion__action:hover {
+  color: var(--color-primary-60-solid);
+}
+
+.sds-accordion__action:active {
+  color: var(--color-primary-70-solid);
+}
+
+.sds-accordion__action:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-sm);
+}
+
+/* ── Chevron ── */
+.sds-accordion__chevron {
+  display: inline-flex;
+  align-items: center;
+  font-size: 24px;
+  flex-shrink: 0;
+  color: var(--title-color);
+  transition: transform 200ms ease;
+}
+
+.sds-accordion__chevron--open,
+details.sds-accordion[open]:not(.sds-accordion--closing) .sds-accordion__chevron {
+  transform: rotate(180deg);
+}
+
+/* ── Body ── */
+.sds-accordion__body-wrap {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms ease;
+}
+
+.sds-accordion__body-wrap--open,
+details.sds-accordion[open]:not(.sds-accordion--closing) > .sds-accordion__body-wrap {
+  grid-template-rows: 1fr;
+}
+
+.sds-accordion__body-clip {
+  overflow: hidden;
+  min-height: 0;
+}
+
+.sds-accordion__body {
+  padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
+}
+
+/* ── bordered=true — header is always clickable, so the stroke is always the interactive one ── */
+.sds-accordion--bordered {
+  border-color: var(--border-interactive-color);
+}
+
+/* ── Native <details> variant ──────────────────────────────────────────────────
+   The browser hides a closed <details>'s content, which is exactly what kills the
+   grid-template-rows transition the stateful variant animates with. These rules force
+   the content to stay laid out so the transition has something to animate, and hand the
+   clipping to the wrapper instead.
+
+   Whether this holds in every engine is the open question this variant exists to
+   answer — see the portal, where the two sit side by side. */
+details.sds-accordion > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+details.sds-accordion > summary::-webkit-details-marker,
+details.sds-accordion > summary::marker {
+  display: none;
+  content: "";
+}
+
+/* MEASURED in the portal, Chromium, 2026-09-10 — the question this variant existed to
+   answer, and its answer.
+
+   Both accordions were opened and their wrapper height sampled every 60ms:
+
+     native <details>   0 → 55 → 115 → 132 → 132 px
+     stateful (class)   0 → 55 → 115 → 130 → 132 px
+
+   They animate identically. A closed <details> does hide its content, but that does not
+   stop the grid-template-rows transition on a child wrapper from running when it opens.
+   No override is needed, and an earlier attempt to force one
+   (content-visibility: visible on the closed wrapper) was actively harmful: it kept the
+   content laid out at full height, so the accordion never closed at all.
+
+   That was the OPENING only, and it was the wrong half to measure. Closing:
+
+     native <details>   132 → 132 → 132 → 132 px    snaps shut
+     class-driven       132 → 79 → 26 → 2 → 0       animates
+
+   A closed <details> hides its content, so there is nothing left to animate on the way
+   out. The .sds-accordion--closing class is how the component buys that back: it holds
+   the element open while the transition runs, and the script closes it for real on
+   transitionend.
+
+   Not measured: Gecko and WebKit. Worth re-running there before the first production
+   release. */
+
+/* The out-animation. `--closing` wins over [open] so the rows collapse while the element
+   is still open; without it the browser hides the content first and the transition has
+   nothing to move. */
+details.sds-accordion.sds-accordion--closing > .sds-accordion__body-wrap {
+  grid-template-rows: 0fr;
+}

package/components/Accordion/accordion-variants.js

@@ -0,0 +1,17 @@
+/**
+ * The Accordion's vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Accordion/Accordion.tsx.
+ *
+ * Two sizes, and they mean the title's weight in the page: `lg` titles read as titleMd,
+ * `md` as titleSm. The component branched on `size === "lg"` and accepted anything else
+ * silently, so `size="large"` rendered the small title and looked like a styling bug.
+ */
+export const ACCORDION_SIZES = ['md', 'lg'];
+
+export function assertAccordionSize(size) {
+  if (!ACCORDION_SIZES.includes(size)) {
+    throw new Error(`Unknown accordion size: "${size}". Allowed: ${ACCORDION_SIZES.join(', ')}`);
+  }
+  return size;
+}

package/components/Accordion/accordion.marko

@@ -0,0 +1,264 @@
+<!-- sds-accordion — <details> underneath, animated on top.
+
+     Ported from kdls-design-system v2.5.1 (0f3edf8) components/Accordion/Accordion.tsx.
+
+     MEASURED, 2026-09-10, Chromium, in the portal:
+
+       opening   native <details>  0 → 55 → 115 → 132 px      animates
+                 class-driven      0 → 55 → 115 → 130 → 132   animates
+       closing   native <details>  132 → 132 → 132 → 132      snaps shut
+                 class-driven      132 → 79 → 26 → 2 → 0      animates
+
+     A closed <details> hides its content, which a height transition needs to measure —
+     so the open animates and the close does not. That asymmetry is visible and it is the
+     one thing the native element gets wrong here.
+
+     And the cost of fixing it is small. Measured by tests/ssr/accordion-cost.cjs, which
+     renders the same page twice — once with this component, once with a copy that has no
+     class block — hydration costs ~160 bytes of HTML per instance, which Brotli reduces
+     to 7.6: 255 bytes for twenty accordions, 378 for fifty. The payload is highly
+     repetitive, which is exactly what compression is good at.
+
+     (An earlier note here said 2 bytes per instance. That run was made while Icon still
+     hydrated, so both pages carried Icon's payload and it cancelled out of the delta.
+     The conclusion did not change; the number was too small.)
+
+     So this component hydrates — and keeps <details> anyway. The element still owns
+     open and closed, keyboard handling, the correct ARIA and find-in-page; a visitor
+     whose JavaScript never arrives can still open and close the panel, just without the
+     closing animation. The script only intercepts the close long enough to animate it.
+
+     `destroyOnClose` is not ported, and cannot be while the panel is a <details>: the
+     element keeps its content in the document when closed, which is what gives it
+     find-in-page and what lets a closing transition have something to measure. Dropping
+     the content would take both away to save markup that compresses to nothing. A caller
+     who genuinely must not render the body until it opens should render the body
+     conditionally itself, which costs the same and says so at the call site.
+
+     This is not a licence to hydrate everything. What is cheap here is cheap because the
+     input is a short title. The 492 KB payload measured on the listing page came from
+     components serialising a whole property object — the cost scales with what you put
+     in, not with the word `class`. -->
+
+import { assertPlacement } from "../Floating/floating-position.js";
+import { assertAccordionSize } from "./accordion-variants.js";
+
+class {
+  onCreate(input) {
+    this.state = { closing: false, open: !!input.defaultOpen, actionLoading: false };
+  }
+
+  /** The caller's answer when it has one, this component's when it does not. */
+  get isOpen() {
+    return this.input.open !== undefined ? this.input.open : this.state.open;
+  }
+
+  /** The <details> itself. `getEl(key)` does not resolve a component's own root element. */
+  get root() {
+    return this.el ?? this.getEl("root");
+  }
+
+  onUpdate() {
+    const details = this.root;
+    if (!details) return;
+
+    // The browser owns `details.open` once it has toggled the element itself, and a
+    // rendered `open=null` does not take it back. So the close is applied here, after the
+    // render that dropped the hold — with no hold and nothing asking for open, it shuts.
+    const wantsOpen = this.input.open !== undefined ? this.input.open : this.state.open;
+    if (!wantsOpen && !this.state.closing && details.open) details.open = false;
+
+    // Controlled: the caller flipped `open` to false while the element is still open, so
+    // the closing transition has to be started from here rather than from a click.
+    if (this.input.open === undefined) return;
+    if (!this.input.open && details.open && !this.state.closing) this.state.closing = true;
+    if (this.input.open && !details.open) details.open = true;
+  }
+
+  onDestroy() {
+    clearTimeout(this.closeTimer);
+  }
+
+  report(next) {
+    if (this.input.open === undefined) this.state.open = next;
+    this.input.onOpenChange?.(next);
+  }
+
+  handleSummaryClick(event) {
+    const details = this.root;
+
+    // `details.open` alone cannot answer "is this open" any more: the element is held open
+    // for the length of the closing transition, so mid-close it reads as open and a click
+    // meant to cancel the close was read as a second close.
+    // Mid-close the element is still `open`, so the browser's own toggle would close it.
+    // Cancelling the close is all this click means: drop the hold and stay open.
+    if (this.state.closing) {
+      event.preventDefault();
+      clearTimeout(this.closeTimer);
+      this.state.closing = false;
+      this.report(true);
+      return;
+    }
+
+    if (!details.open) {
+      // Opening needs no help from the browser's point of view — but a controlled
+      // accordion must not open itself, only ask.
+      if (this.input.open !== undefined) event.preventDefault();
+      this.report(true);
+      return;
+    }
+
+    // Closing does need help: <details> would hide the content immediately, leaving
+    // nothing to animate. Hold it open, run the transition, and close for real when it
+    // ends. The same hold serves the controlled case, where the caller decides whether
+    // the close happens at all.
+    event.preventDefault();
+    this.report(false);
+    if (this.input.open === undefined) this.state.closing = true;
+
+    // The transition is the only thing that closes the element for real, and it does not
+    // always arrive: prefers-reduced-motion, transitions switched off, a background tab.
+    // Without this the hold never lifts — the panel stays open and `--closing` latches.
+    clearTimeout(this.closeTimer);
+    this.closeTimer = setTimeout(() => this.finishClosing(), 250);
+  }
+
+  handleTransitionEnd(event) {
+    if (event.propertyName !== "grid-template-rows" || !this.state.closing) return;
+    this.finishClosing();
+  }
+
+  /**
+   * Lifts the hold and shuts the element.
+   *
+   * Both halves are needed. Dropping `closing` is what the render reads, but the browser
+   * owns `details.open` once it has toggled the element itself and a rendered `open=null`
+   * does not take it back — so the property is set here too.
+   */
+  finishClosing() {
+    clearTimeout(this.closeTimer);
+    const details = this.root;
+    if (details) details.open = false;
+    this.state.closing = false;
+  }
+
+  /**
+   * The header action runs inside the summary, so its click would toggle the panel. It is
+   * stopped here rather than in CSS, and the spinner follows a promise when the caller
+   * returns one — KDLS does the same, which is what makes `actionLoading` optional.
+   */
+  async handleAction(event) {
+    event.preventDefault();
+    event.stopPropagation();
+    const result = this.input.onAction?.(event);
+    if (!(result instanceof Promise)) return;
+    this.state.actionLoading = true;
+    try {
+      await result;
+    } finally {
+      this.state.actionLoading = false;
+    }
+  }
+}
+
+$ {
+  const {
+    title,
+    icon,
+    size = "lg",
+    bordered = false,
+    actionLabel,
+    actionLoading = false,
+    actionDisabled = false,
+    actionDisabledTooltip,
+    actionDisabledTooltipPosition = "top",
+    class: extraClass = "",
+  } = input;
+
+  assertPlacement(actionDisabledTooltipPosition);
+
+  assertAccordionSize(size);
+
+  const open = component.isOpen;
+  const destroyOnClose = input.destroyOnClose ?? false;
+
+  // An icon may arrive as an attribute tag (<@icon>…</@icon>, what a page writes) or as a
+  // template value (what a test or a loop passes). Normalising here means callers never
+  // have to care.
+  const renderable = (value) => (value && value.renderBody) || value;
+
+  const rootClass = [
+    "sds-accordion",
+    // No --open class: the element is a <details>, so `[open]` already carries the state
+    // and the stylesheet reads it there. A second spelling of the same fact is the drift
+    // that leaves KDLS's popover arrow unstyled.
+    bordered ? "sds-accordion--bordered" : "",
+    size === "lg" ? "sds-accordion--title-lg" : "",
+    state.closing ? "sds-accordion--closing" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<!-- `open || state.closing`: the element has to keep its `open` attribute for the length
+     of the closing transition. It did not — `report(false)` sets `state.open = false` and
+     `state.closing = true` in the same render, so the attribute was removed in the very
+     pass that added `--closing`, the browser hid the panel, and there was nothing left to
+     animate. The close snapped shut, `transitionend` never fired, `--closing` latched,
+     and the next click opened an empty collapsed panel. -->
+<details key="root" class=rootClass open=((open || state.closing) || null) on-transitionend("handleTransitionEnd")>
+  <summary class="sds-accordion__header" on-click("handleSummaryClick")>
+    <span class="sds-accordion__title">
+      <if(icon)>
+        <span class="sds-accordion__title-icon" aria-hidden="true">
+          <sds-icon>
+            <${renderable(icon)}/>
+          </sds-icon>
+        </span>
+      </if>
+      <sds-text as="span" variant=(size === "lg" ? "titleMd" : "titleSm")>
+        ${title}
+      </sds-text>
+    </span>
+
+    <if(actionLabel)>
+      <!-- Inside the summary, so a click on it would toggle the panel — handleAction stops
+           that. KDLS wraps the button in a span with a stopPropagation handler; the button
+           is a real control either way, so the guard belongs on the action itself. -->
+      <span class="sds-accordion__action">
+        <sds-button
+          variant="link"
+          label=actionLabel
+          onClick=(event) => component.handleAction(event)
+          isLoading=(state.actionLoading || actionLoading)
+          disabled=actionDisabled
+          disabledTooltip=actionDisabledTooltip
+          disabledTooltipPosition=actionDisabledTooltipPosition
+        />
+      </span>
+    </if>
+
+    <span class="sds-accordion__chevron" aria-hidden="true">
+      <sds-icon>
+        <fluent-chevron-down-regular/>
+      </sds-icon>
+    </span>
+  </summary>
+
+  <div class="sds-accordion__body-wrap">
+    <div class="sds-accordion__body-clip">
+      <div class="sds-accordion__body">
+        // `destroyOnClose` was accepted by callers and read by nobody, so a body asked to
+        // be thrown away stayed in the DOM — with whatever it held still mounted, still
+        // fetching, still focusable by Tab. KDLS defaults it to false, which is what keeps
+        // the closing transition possible: the body has to exist to shrink.
+        //
+        // `state.closing` is in the condition for the same reason the `open` attribute is:
+        // removing the body at the start of the close would collapse the panel instantly
+        // instead of animating it away.
+        <if(!destroyOnClose || open || state.closing)>
+          <${input.renderBody}/>
+        </if>
+      </div>
+    </div>
+  </div>
+</details>

package/components/AccordionGroup/AccordionGroup.css

@@ -0,0 +1,35 @@
+/* SDS AccordionGroup.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/AccordionGroup/AccordionGroup.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ============================================================
+   SDS AccordionGroup
+   ============================================================ */
+
+.sds-accordion-group {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+}
+/* ── connected (default) — single block with collapsed borders ── */
+.sds-accordion-group .sds-accordion {
+  border-radius: 0;
+}
+.sds-accordion-group .sds-accordion + .sds-accordion {
+  margin-top: -1px;
+}
+.sds-accordion-group .sds-accordion:first-child {
+  border-radius: var(--radius-md) var(--radius-md) 0 0;
+}
+.sds-accordion-group .sds-accordion:last-child {
+  border-radius: 0 0 var(--radius-md) var(--radius-md);
+}
+/* ── spaced — each accordion independent, with space between them ── */
+.sds-accordion-group--spaced {
+  gap: var(--spacing-6);
+}
+.sds-accordion-group--spaced .sds-accordion,
+.sds-accordion-group--spaced .sds-accordion:first-child,
+.sds-accordion-group--spaced .sds-accordion:last-child {
+  border-radius: var(--radius-md);
+  margin-top: 0;
+}

package/components/AccordionGroup/accordion-group.marko

@@ -0,0 +1,17 @@
+<!-- sds-accordion-group — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/AccordionGroup/AccordionGroup.tsx.
+
+Layout only: it spaces or joins the accordions inside it and knows nothing else about
+them. KDLS cloned its children to pass the variant down; nothing needs passing, so the
+accordions are ordinary children here. -->
+
+$ {
+  const { variant = "connected", class: extraClass = "" } = input;
+  if (variant !== "connected" && variant !== "spaced") {
+    throw new Error(`Unknown accordion group variant: "${variant}". Allowed: connected, spaced`);
+  }
+}
+
+<div class=`sds-accordion-group sds-accordion-group--${variant} ${extraClass}`.trim()>
+  <${input.renderBody}/>
+</div>