@kenlo/sds-design-system 0.9.9

package/components/Toast/toast.marko

@@ -0,0 +1,93 @@
+<!-- sds-toast — ported from kdls-design-system v2.5.1 (0f3edf8) components/Toast/Toast.tsx.
+
+     One message on an inverted surface: dark in the light theme, light in the dark one.
+     It knows nothing about timing or stacking — that is sds-toaster and the store behind
+     it, which is what lets toast(...) be called from a catch block that is nowhere near a
+     component.
+
+     `leaving` is the exit animation, set by the toaster. It is in the public attribute
+     surface because KDLS put it there, marked internal for the same reason: nothing else
+     should set it.
+
+     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. -->
+
+import { assertPlacement } from "../Floating/floating-position.js";
+import { assertToastFeedback, TOAST_FEEDBACK } from "./toast-variants.js";
+import dismissIcon from "../../icons/generated/fluent-dismiss-regular.marko";
+import successIcon from "../../icons/generated/fluent-checkmark-circle-filled.marko";
+import alertIcon from "../../icons/generated/fluent-warning-filled.marko";
+import errorIcon from "../../icons/generated/fluent-dismiss-circle-filled.marko";
+
+$ {
+  const {
+    message,
+    feedback = "neutral",
+    actionLabel,
+    onAction,
+    actionDisabled = false,
+    actionDisabledTooltip,
+    actionDisabledTooltipPosition = "top",
+    showDismiss = true,
+    onDismiss,
+    leaving = false,
+    dismissLabel = "Fechar",
+    class: extraClass = "",
+  } = input;
+
+  assertPlacement(actionDisabledTooltipPosition);
+
+  if (!message) throw new Error("sds-toast needs a `message`.");
+  assertToastFeedback(feedback);
+
+  // neutral carries no icon at all: a message with nothing to report should not borrow a
+  // symbol that says something happened.
+  const icons = { neutral: null, success: successIcon, alert: alertIcon, error: errorIcon };
+  const icon = icons[feedback];
+
+  const classes = [
+    "sds-toast",
+    `sds-toast--${feedback}`,
+    leaving ? "sds-toast--leaving" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<div
+  class=classes
+  role="status"
+  aria-live=(feedback === "error" ? "assertive" : "polite")
+>
+  <if(icon)>
+    <span class="sds-toast__icon" aria-hidden="true">
+      <sds-icon color=feedback><${icon}/></sds-icon>
+    </span>
+  </if>
+
+  <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"
+    />
+  </if>
+
+  <if(showDismiss)>
+    <sds-icon-button
+      variant="neutral"
+      size="sm"
+      class="sds-toast__dismiss"
+      aria-label=dismissLabel
+      onClick=onDismiss
+    >
+      <@icon><${dismissIcon}/></@icon>
+    </sds-icon-button>
+  </if>
+</div>

package/components/Toast/toaster.marko

@@ -0,0 +1,70 @@
+<!-- sds-toaster — ported from kdls-design-system v2.5.1 (0f3edf8) components/Toast/Toaster.tsx.
+
+     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.
+
+     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.
+
+     Divergences:
+
+     No portal. KDLS renders through createPortal into <body>; Marko 5 has none, and a node
+     moved there returns on the next re-render (measured — see components/Floating).
+     The container is position:fixed, so it covers the viewport from wherever it sits, and
+     the only thing lost is escaping an ancestor with a transform. Mounted at the root of
+     the page, as it is meant to be, there is no such ancestor.
+
+     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. -->
+
+import { subscribe, dismissToast, pauseAll, resumeAll } from "./toast-store.js";
+
+class {
+  onCreate() {
+    this.state = { items: [] };
+  }
+
+  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; });
+  }
+
+  onDestroy() {
+    this.unsubscribe?.();
+  }
+
+  pause() { pauseAll(); }
+  resume() { resumeAll(); }
+  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>
+  </div>
+</if>

package/components/Toggle/Toggle.css

@@ -0,0 +1,169 @@
+/* SDS Toggle.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Toggle/Toggle.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+
+   Rules removed with the brand families they targeted:
+     [data-color-scheme="lya"] .sds-toggle__item--active
+     [data-color-scheme="lya"] .sds-toggle__item--active:hover:not(:disabled)
+     [data-color-scheme="lya"] .sds-toggle:hover:not(.sds-toggle--disabled)
+ *//* ── Toggle — Segmented control ──────────────────────────────────
+   Container: gray track with pill radius
+   Items:     no individual borders; active = blue filled pill
+   ─────────────────────────────────────────────────────────────── */
+
+.sds-toggle {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-0-5);
+  height: 40px;
+  padding: var(--spacing-1);
+  background: var(--component-bg-color);
+  border: 1px solid var(--border-interactive-color);
+  /* soft, the install default — see the note by the scheme overrides below */
+  border-radius: 11px;
+  transition: border-color 120ms ease, background-color 120ms ease;
+}
+.sds-toggle--fill { width: 100%; }
+.sds-toggle--fill .sds-toggle__item { flex: 1; }
+.sds-toggle:hover:not(.sds-toggle--disabled) {
+  border-color: var(--color-primary-50-solid);
+}
+.sds-toggle--disabled {
+  background: var(--color-neutral-20);
+  border-color: var(--border-static-color);
+  cursor: not-allowed;
+}
+.sds-toggle--disabled .sds-toggle__item {
+  color: var(--color-neutral-40);
+}
+[data-theme="dark"] .sds-toggle--disabled {
+  background: var(--color-neutral-30);
+  border-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-toggle--disabled .sds-toggle__item--active {
+  background: var(--color-neutral-40);
+  color: var(--component-bg-color);
+}
+/* ── Item (default = 40px track height) ────────────────────────── */
+.sds-toggle__item {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: 6px;
+  height: 32px;
+  padding: 0 var(--spacing-3);
+  border: none;
+  background: transparent;
+  /* soft, the install default — see the note by the scheme overrides below */
+  border-radius: 9px;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);  /* 16px */
+  font-weight: var(--font-weight-regular);
+  color: var(--color-neutral-80);
+  cursor: pointer;
+  transition: background 120ms ease, color 120ms ease;
+  white-space: nowrap;
+  user-select: none;
+  outline: none;
+}
+.sds-toggle__item:hover:not(:disabled) {
+  background: var(--color-neutral-10);
+  color: var(--color-neutral-10-on);
+}
+/* ── Active item ────────────────────────────────────────────────── */
+.sds-toggle__item--active {
+  background: var(--color-primary-50);
+  color: var(--color-on-primary);
+}
+.sds-toggle__item--active:hover:not(:disabled) {
+  background: var(--color-primary-60);
+  color: var(--color-on-primary);
+  box-shadow: none;
+}
+/* ── Disabled individual item (item.disabled in an enabled group) ── */
+.sds-toggle__item:disabled {
+  cursor: not-allowed;
+  color: var(--color-neutral-40);
+}
+/* ── Active item in disabled state — neutral instead of primary ─── */
+.sds-toggle--disabled .sds-toggle__item--active {
+  background: var(--color-neutral-40);
+  color: var(--color-white);
+}
+/* ── Focus ring ─────────────────────────────────────────────────── */
+.sds-toggle__item:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+}
+/* ── Icon slot ──────────────────────────────────────────────────── */
+.sds-toggle__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  font-size: 24px;
+}
+/* ── Icon-only: square padding ──────────────────────────────────── */
+.sds-toggle--icon-only .sds-toggle__item {
+  padding: 0 var(--spacing-2);
+  min-width: 32px;
+}
+/* ── Corner Radius Scheme overrides ──
+   Carried from KDLS unchanged. The numbers are a proportion of each element's own height,
+   which is what holds the container and the item to the same shape at every tier:
+
+       container  40px    soft 11px  (0.275)    medium 15px  (0.375)
+       item       32px    soft  9px  (0.28)     medium 12px  (0.375)
+
+   See Pill.css — the container is the same 40px as a pill and takes the same numbers, and
+   the note there explains why the base values below are soft's rather than a capsule's:
+   an install with no data-radius attribute gets the default scheme, and SDS's default is
+   soft. `rounded` is explicit for the same reason — it can no longer fall through. */
+[data-radius="flat"] .sds-toggle              { border-radius: 0; }
+[data-radius="flat"] .sds-toggle__item        { border-radius: 0; }
+[data-radius="soft"] .sds-toggle              { border-radius: 11px; }
+[data-radius="soft"] .sds-toggle__item        { border-radius: 9px; }
+[data-radius="medium"] .sds-toggle            { border-radius: 15px; }
+[data-radius="rounded"] .sds-toggle           { border-radius: var(--radius-full); }
+/* Item is 32px tall — 16px would clamp to a full pill on its own, erasing the softened look */
+[data-radius="medium"] .sds-toggle__item      { border-radius: 12px; }
+[data-radius="rounded"] .sds-toggle__item     { border-radius: var(--radius-full); }
+/* ── Dark mode ──────────────────────────────────────────────────── */
+/* ── The native radios ─────────────────────────────────────────────────────────
+   A segmented control is a radio group. KDLS built it from divs with a click handler, so
+   arrow keys did nothing, the value never reached a form, and a screen reader read three
+   unrelated words instead of "Mapa, 2 de 3".
+
+   The inputs are hidden with opacity, not display:none — a hidden input cannot be focused,
+   and the whole point of using radios is the keyboard. */
+/* A fieldset needs its browser chrome reset before it can be laid out — but only the
+   chrome. `padding: 0` here also erased the 4px inset the base rule gives the track, and
+   the segments ran into the container's own border. */
+.sds-toggle {
+  border: 1px solid var(--border-interactive-color);
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.sds-toggle__legend {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+}
+
+.sds-toggle__input {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  margin: 0;
+  opacity: 0;
+  pointer-events: none;
+}
+
+.sds-toggle__item:has(.sds-toggle__input:focus-visible) {
+  box-shadow: var(--focus-ring);
+}
+

package/components/Toggle/toggle.marko

@@ -0,0 +1,93 @@
+<!-- sds-toggle — ported from kdls-design-system v2.5.1 (0f3edf8) components/Toggle/Toggle.tsx.
+
+A segmented control: several options, one chosen. That is a radio group, and it is built
+as one — an <input type="radio"> per segment inside a <fieldset>.
+
+KDLS built it from divs with useState and a click handler. The radios give what that could
+not: arrow keys move between the segments, the browser enforces one-of-N, the value goes
+into a form on its own, and a screen reader announces "Mapa, 2 de 3" instead of reading
+three unrelated words. None of it needs JavaScript, so the component holds no state.
+
+The fieldset needs a name. KDLS had none — a segmented control with no legend is three
+buttons a screen reader cannot connect to each other. -->
+
+class {
+  /** The radios are native, so the change event already bubbles — this names it. */
+  handleChange(event) {
+    if (event.target.type !== "radio") return;
+    this.input.onChange?.(event.target.value);
+  }
+}
+
+$ {
+  const {
+    items = [],
+    // `component.id`, not a random string. Marko gives every component an id that is the
+    // same on the server and in the browser; a random one drawn inside the render block is
+    // a different value on each side, so every `for` and `aria-*` pointing at it resolved
+    // to nothing after hydration — and changed again on every re-render.
+    name = `sds-toggle-${component.id}`,
+    value,
+    defaultValue,
+    label,
+    width = "hug",
+    disabled = false,
+    class: extraClass = "",
+  } = input;
+
+  if (items.length < 2) {
+    throw new Error("sds-toggle needs at least two items — one option is not a choice.");
+  }
+  if (!label) {
+    throw new Error("sds-toggle needs a `label` naming what is being chosen.");
+  }
+  if (width !== "hug" && width !== "fill") {
+    throw new Error(`Unknown toggle width: "${width}". Allowed: hug, fill`);
+  }
+
+  const renderable = (v) => (v && v.renderBody) || v;
+  const selected = value ?? defaultValue ?? items[0].value;
+  const iconOnly = items.every((item) => !item.label);
+
+  const classes = [
+    "sds-toggle",
+    `sds-toggle--${width}`,
+    disabled ? "sds-toggle--disabled" : "",
+    iconOnly ? "sds-toggle--icon-only" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<fieldset class=classes on-change("handleChange")>
+  <legend class="sds-toggle__legend">${label}</legend>
+
+  <for|item| of=items>
+    <label class=`sds-toggle__item ${item.value === selected ? "sds-toggle__item--active" : ""}`.trim()>
+      <input
+        class="sds-toggle__input"
+        type="radio"
+        name=name
+        value=item.value
+        checked=(item.value === selected || null)
+        disabled=((disabled || item.disabled) || null)
+      />
+      <if(item.iconLeft)>
+        <span class="sds-toggle__icon" aria-hidden="true">
+          <sds-icon size="sm"><${renderable(item.iconLeft)}/></sds-icon>
+        </span>
+      </if>
+      <if(item.label)>
+        ${item.label}
+      </if>
+      <else>
+        <!-- Icon-only segments still need a name; the label is visually hidden. -->
+        <span class="sds-visually-hidden">${item.ariaLabel ?? item.value}</span>
+      </else>
+      <if(item.iconRight)>
+        <span class="sds-toggle__icon" aria-hidden="true">
+          <sds-icon size="sm"><${renderable(item.iconRight)}/></sds-icon>
+        </span>
+      </if>
+    </label>
+  </for>
+</fieldset>

package/components/Tooltip/Tooltip.css

@@ -0,0 +1,115 @@
+/* SDS Tooltip.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Tooltip/Tooltip.css.
+
+   The arrow is keyed off the panel's data-placement rather than a class built from the
+   placement name, for the same reason as Popover: KDLS spells the placement twice, once in
+   JavaScript and once in CSS, and the two can drift. Here sds-floating writes the placement
+   it actually settled on and the rules read that. */
+
+.sds-tooltip-wrapper {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  cursor: help;
+}
+
+.sds-tooltip {
+  width: max-content;
+  max-width: 240px;
+  padding: var(--spacing-1-5) var(--spacing-2-5);
+  background: var(--color-neutral-90);
+  color: var(--color-neutral-90-on);
+  border-radius: var(--radius-sm);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-label-sm);
+  line-height: var(--lh-label-sm);
+  /* The tooltip must never be the thing the pointer is over: a tooltip that can be hovered
+     keeps itself open and blocks what is underneath it. */
+  pointer-events: none;
+  white-space: normal;
+  animation: sds-tooltip-fade-in 120ms ease;
+}
+
+@keyframes sds-tooltip-fade-in {
+  from { opacity: 0; }
+  to { opacity: 1; }
+}
+
+/* ── Arrow ──
+   A CSS triangle: a zero-size box with one border side coloured. Which side depends on
+   where the panel ended up, which is what data-placement carries. */
+.sds-tooltip::before {
+  content: '';
+  position: absolute;
+  width: 0;
+  height: 0;
+  border-style: solid;
+}
+
+/* Panel above the trigger → the arrow points down, from the panel's bottom edge. */
+[data-placement^="top"] .sds-tooltip::before {
+  bottom: -6px;
+  border-width: 6px 6px 0 6px;
+  border-color: var(--color-neutral-90) transparent transparent transparent;
+}
+
+/* Panel below → points up. */
+[data-placement^="bottom"] .sds-tooltip::before {
+  top: -6px;
+  border-width: 0 6px 6px 6px;
+  border-color: transparent transparent var(--color-neutral-90) transparent;
+}
+
+/* Panel to the left → points right. */
+[data-placement^="left"] .sds-tooltip::before {
+  right: -6px;
+  border-width: 6px 0 6px 6px;
+  border-color: transparent transparent transparent var(--color-neutral-90);
+}
+
+/* Panel to the right → points left. */
+[data-placement^="right"] .sds-tooltip::before {
+  left: -6px;
+  border-width: 6px 6px 6px 0;
+  border-color: transparent var(--color-neutral-90) transparent transparent;
+}
+
+/* Where along that edge the arrow sits. Exact matches, so the centred case — the one with
+   no corner word — does not also catch the cornered ones. */
+[data-placement="top"] .sds-tooltip::before,
+[data-placement="bottom"] .sds-tooltip::before { left: 50%; transform: translateX(-50%); }
+
+[data-placement="topLeft"] .sds-tooltip::before,
+[data-placement="bottomLeft"] .sds-tooltip::before { left: var(--spacing-2); }
+
+[data-placement="topRight"] .sds-tooltip::before,
+[data-placement="bottomRight"] .sds-tooltip::before { right: var(--spacing-2); }
+
+[data-placement="left"] .sds-tooltip::before,
+[data-placement="right"] .sds-tooltip::before { top: 50%; transform: translateY(-50%); }
+
+[data-placement="leftTop"] .sds-tooltip::before,
+[data-placement="rightTop"] .sds-tooltip::before { top: var(--spacing-2); }
+
+[data-placement="leftBottom"] .sds-tooltip::before,
+[data-placement="rightBottom"] .sds-tooltip::before { bottom: var(--spacing-2); }
+
+/* The default trigger: the design system's own info affordance. KDLS renders a bare Icon
+   here, which no keyboard can reach — so a tooltip with no custom trigger was mouse-only.
+   This is a real button with the browser's chrome taken off. */
+.sds-tooltip-wrapper__trigger {
+  appearance: none;
+  border: 0;
+  background: none;
+  padding: 0;
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-neutral-60);
+  cursor: help;
+  border-radius: var(--radius-xs);
+}
+
+.sds-tooltip-wrapper__trigger:focus-visible {
+  outline: var(--focus-ring-width) solid var(--focus-stroke-color);
+  outline-offset: 2px;
+}

package/components/Tooltip/tooltip.marko

@@ -0,0 +1,77 @@
+<!-- sds-tooltip — ported from kdls-design-system v2.5.1 (0f3edf8) components/Tooltip/Tooltip.tsx.
+
+     A short label that appears on hover or focus. It is sds-floating with a dark panel and
+     an arrow, opened by hover and focus together — KDLS wrote the same show/hide, the same
+     100ms delays and the same positioning maths inline, before Floating existed to hold it.
+
+     Three divergences, all of them defects rather than choices:
+
+     KDLS's default trigger is a bare <Icon> — a <span> with no tabindex. A tooltip with no
+     custom trigger is therefore unreachable by keyboard, which is most of the tooltips in a
+     product. Here it is a real <button>.
+
+     The panel carries role="tooltip" and nothing points at it, so a screen reader never
+     reads it: role="tooltip" describes what an element is, it does not announce it. The
+     trigger now carries aria-describedby, and the text is also in a permanently rendered
+     visually-hidden node so it is in the accessibility tree whether or not the panel is
+     open. When the trigger is the caller's own markup, put aria-describedby on the
+     focusable thing inside it — the id is `${id}-text`, and the component exposes `id`
+     for exactly that.
+
+     Touch is still open, and it is not a small gap: there is no hover on a phone, so a
+     tooltip whose only triggers are hover and focus does not exist for 62% of this
+     product's traffic. Tapping the default trigger does open it, because a tap focuses a
+     button — but a custom trigger that is not focusable stays silent. The real answer is
+     probably a press-and-hold or a bottom sheet, and that is Rafael's decision, recorded
+     here rather than guessed. -->
+
+import { assertPlacement } from "../Floating/floating-position.js";
+import infoIcon from "../../icons/generated/fluent-info-regular.marko";
+
+$ {
+  const {
+    content,
+    placement = "top",
+    // `component.id`, not a random string. Marko gives every component an id that is the
+    // same on the server and in the browser; a random one drawn inside the render block is
+    // a different value on each side, so every `for` and `aria-*` pointing at it resolved
+    // to nothing after hydration — and changed again on every re-render.
+    id = `sds-tooltip-${component.id}`,
+    class: extraClass = "",
+  } = input;
+
+  if (!content) throw new Error("sds-tooltip needs `content` — the text it shows.");
+  assertPlacement(placement);
+
+  const textId = `${id}-text`;
+  const GAP = 8;
+}
+
+<span class=`sds-tooltip-wrapper ${extraClass}`.trim()>
+  <sds-floating
+    placement=placement
+    trigger=["hover", "focus"]
+    gap=GAP
+    zIndex="var(--z-notice)"
+    mouseEnterDelay=100
+    mouseLeaveDelay=100
+  >
+    <@content>
+      <span class="sds-tooltip" role="tooltip">${content}</span>
+    </@content>
+
+    <if(input.renderBody)>
+      <${input.renderBody}/>
+    </if>
+    <else>
+      <button type="button" class="sds-tooltip-wrapper__trigger" aria-describedby=textId>
+        <sds-icon size="sm"><${infoIcon}/></sds-icon>
+      </button>
+    </else>
+  </sds-floating>
+
+  <!-- The description lives here, always, not in the panel: a node that appears at the
+       same moment it is referenced is one a screen reader has already read past. The panel
+       is the visual half of the same text. -->
+  <span class="sds-visually-hidden" id=textId>${content}</span>
+</span>