@kenlo/sds-design-system 0.9.9

package/components/Drawer/drawer.marko

@@ -0,0 +1,262 @@
+<!-- sds-drawer — ported from kdls-design-system v2.5.1 (0f3edf8) components/Drawer/Drawer.tsx.
+
+     A panel that slides in from the side and covers the page behind a veil. Same behaviour
+     as sds-modal in every way that matters — Escape, the veil, the scroll lock, the focus
+     trap, the confirmation before closing — and the same foundation underneath, so the two
+     cannot drift apart. What differs is the geometry and a header that can carry a back
+     button and an action of its own.
+
+     Divergences are Modal's, for Modal's reasons: it manages focus, which KDLS does not;
+     it does not portal, because Marko 5 has none; and the confirmation is drawn inside
+     this overlay rather than by nesting a second one.
+
+     One of its own: a drawer that slides from the left or the right is a complementary
+     region, not a dialog, when it carries no decision — but KDLS renders role="dialog" for
+     both cases and so does this, because a drawer here always takes the whole keyboard and
+     a visitor cannot reach the page behind it. Calling it anything else would be describing
+     a screen it does not offer.
+
+The four confirm defaults — `confirmTitle`, `confirmMessage`, `confirmActionLabel`
+and `confirmCancelLabel` — are reworded, and this is the one place in the port where the
+wording is itself the divergence — so it is Rafael's to keep or revert.
+
+KDLS asks "Fechar sem salvar?" over buttons labelled "Fechar" and "Cancelar". In a dialog
+whose whole subject is closing, "Cancelar" does not say what it cancels: the closing, or
+the editing it would discard. The rewrite names the outcome on each button — "Descartar"
+against "Continuar editando" — which is what a destructive confirmation is for, and the
+message says what is lost rather than narrating where it happened.
+-->
+
+import { assertPlacement } from "../Floating/floating-position.js";
+import { lockScroll, unlockScroll, trapFocus } from "../../foundations/overlay.js";
+import dismissIcon from "../../icons/generated/fluent-dismiss-regular.marko";
+import backIcon from "../../icons/generated/fluent-chevron-left-regular.marko";
+
+class {
+  onCreate() {
+    this.state = { confirming: false };
+    this.release = null;
+  }
+
+  onMount() {
+    this.onKeyDown = (event) => {
+      if (event.key !== "Escape" || !this.input.isOpen) return;
+      event.stopPropagation();
+      // With the confirmation up, Escape dismisses the QUESTION, not the drawer. It used
+      // to reach `requestClose`, which sees `confirming` already true and closes — so the
+      // key you press to back out of a dialog threw away the edits the dialog exists to
+      // protect. Escape always undoes the most recent thing that opened.
+      if (this.state.confirming) {
+        this.cancelConfirm();
+        return;
+      }
+      this.requestClose();
+    };
+    document.addEventListener("keydown", this.onKeyDown);
+    if (this.input.isOpen) this.open();
+  }
+
+  onUpdate() {
+    if (this.wantsConfirmFocus && this.state.confirming) {
+      this.wantsConfirmFocus = false;
+      this.retrap(this.getEl("confirm"));
+    }
+    if (this.input.isOpen && !this.locked) this.open();
+    else if (!this.input.isOpen && this.locked) this.shut();
+  }
+
+  onDestroy() {
+    document.removeEventListener("keydown", this.onKeyDown);
+    this.shut();
+  }
+
+  open() {
+    this.locked = true;
+    lockScroll();
+    requestAnimationFrame(() => {
+      if (!this.input.isOpen) return;
+      this.release = trapFocus(this.getEl("panel"));
+    });
+  }
+
+  shut() {
+    if (!this.locked) return;
+    this.locked = false;
+    unlockScroll();
+    this.release?.();
+    this.release = null;
+    this.state.confirming = false;
+  }
+
+  requestClose() {
+    if (this.input.confirmClose && !this.state.confirming) {
+      this.state.confirming = true;
+      // On update, once the dialog exists in the DOM.
+      this.wantsConfirmFocus = true;
+      return;
+    }
+    this.input.onClose?.();
+  }
+
+  handleOverlayClick(event) {
+    if (this.input.disableOverlayClose) return;
+    if (event.target !== this.getEl("overlay")) return;
+    this.requestClose();
+  }
+
+  /**
+   * Move the focus trap onto whichever of the two is on top.
+   *
+   * It was bound to the drawer panel and stayed there, so the confirmation — a sibling of
+   * that panel, not a descendant — was outside the trap: Tab could not reach "Descartar"
+   * or "Continuar editando", and a keyboard user had no way to answer the question at all.
+   */
+  retrap(element) {
+    this.release?.();
+    this.release = element ? trapFocus(element) : null;
+  }
+
+  cancelConfirm() {
+    this.state.confirming = false;
+    this.retrap(this.getEl("panel"));
+  }
+
+  confirmAndClose() {
+    this.state.confirming = false;
+    this.wantsConfirmFocus = false;
+    this.input.onClose?.();
+  }
+}
+
+$ {
+  const {
+    isOpen,
+    title,
+    titleTooltip,
+    titleTooltipPosition = "bottom",
+    placement = "right",
+    onBack,
+    backLabel = "Voltar",
+    headerActionLabel, onHeaderAction, headerActionLoading = false, headerActionDisabled, headerActionDisabledTooltip, headerActionDisabledTooltipPosition = "top",
+    tertiaryLabel, onTertiary, tertiaryLoading = false, tertiaryDisabled, tertiaryDisabledTooltip, tertiaryDisabledTooltipPosition = "top",
+    secondaryLabel, onSecondary, secondaryLoading = false, secondaryDisabled, secondaryDisabledTooltip, secondaryDisabledTooltipPosition = "top",
+    primaryLabel, onPrimary, primaryLoading = false, primaryDisabled, primaryDisabledTooltip, primaryDisabledTooltipPosition = "top",
+    closeLabel = "Fechar",
+    zIndex,
+    confirmTitle = "Descartar alterações?",
+    confirmMessage = "As alterações feitas não serão salvas.",
+    confirmActionLabel = "Descartar",
+    confirmCancelLabel = "Continuar editando",
+    class: extraClass = "",
+  } = input;
+
+  assertPlacement(titleTooltipPosition);
+  assertPlacement(headerActionDisabledTooltipPosition);
+  assertPlacement(tertiaryDisabledTooltipPosition);
+  assertPlacement(secondaryDisabledTooltipPosition);
+  assertPlacement(primaryDisabledTooltipPosition);
+
+  if (!title) throw new Error("sds-drawer needs a `title` — it is the panel's accessible name.");
+  if (placement !== "right" && placement !== "left") {
+    throw new Error(`Unknown drawer placement: "${placement}". Allowed: right, left`);
+  }
+
+  const hasFooter = Boolean(input.footer || tertiaryLabel || secondaryLabel || primaryLabel);
+  const overlayStyle = zIndex !== undefined ? `z-index:${zIndex}` : null;
+
+  const panelClass = [
+    "sds-drawer",
+    placement !== "right" ? `sds-drawer--${placement}` : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<if(isOpen)>
+  <div
+    key="overlay"
+    class="sds-drawer-overlay"
+    style=overlayStyle
+    role="dialog"
+    aria-modal="true"
+    aria-label=title
+    on-click("handleOverlayClick")
+  >
+    <div key="panel" class=panelClass>
+      <div class="sds-drawer__header">
+        <if(onBack)>
+          <sds-icon-button variant="neutral" aria-label=backLabel onClick=onBack>
+            <@icon><${backIcon}/></@icon>
+          </sds-icon-button>
+        </if>
+
+        <div class="sds-drawer__title-group">
+          <span class="sds-drawer__title">${title}</span>
+          <if(titleTooltip)>
+            <sds-tooltip content=titleTooltip placement=titleTooltipPosition/>
+          </if>
+        </div>
+
+        <div class="sds-drawer__header-actions">
+          <if(headerActionLabel)>
+            <sds-button variant="link" size="md" label=headerActionLabel
+              onClick=onHeaderAction isLoading=headerActionLoading disabled=headerActionDisabled
+                disabledTooltip=headerActionDisabledTooltip disabledTooltipPosition=headerActionDisabledTooltipPosition/>
+          </if>
+          <sds-icon-button variant="neutral" aria-label=closeLabel onClick=() => component.requestClose()>
+            <@icon><${dismissIcon}/></@icon>
+          </sds-icon-button>
+        </div>
+      </div>
+
+      <div class="sds-drawer__body sds-scroll sds-scroll--thin">
+        <${input.renderBody}/>
+      </div>
+
+      <if(hasFooter)>
+        <div class="sds-drawer__footer">
+          <if(input.footer)>
+            <${input.footer}/>
+          </if>
+          <else>
+            <if(tertiaryLabel)>
+              <sds-button variant="link" size="md" label=tertiaryLabel
+                onClick=onTertiary isLoading=tertiaryLoading disabled=tertiaryDisabled
+                disabledTooltip=tertiaryDisabledTooltip disabledTooltipPosition=tertiaryDisabledTooltipPosition/>
+            </if>
+            <if(secondaryLabel)>
+              <sds-button variant="ghost" size="md" label=secondaryLabel
+                onClick=onSecondary isLoading=secondaryLoading disabled=secondaryDisabled
+                disabledTooltip=secondaryDisabledTooltip disabledTooltipPosition=secondaryDisabledTooltipPosition/>
+            </if>
+            <if(primaryLabel)>
+              <sds-button variant="primary" size="md" label=primaryLabel
+                onClick=onPrimary isLoading=primaryLoading disabled=primaryDisabled
+                disabledTooltip=primaryDisabledTooltip disabledTooltipPosition=primaryDisabledTooltipPosition/>
+            </if>
+          </else>
+        </div>
+      </if>
+    </div>
+
+    <if(state.confirming)>
+      <div class="sds-drawer-overlay sds-drawer-overlay--confirm" role="dialog" aria-modal="true" aria-label=confirmTitle>
+        <div key="confirm" class="sds-modal sds-modal--confirm">
+          <div class="sds-modal__header">
+            <div class="sds-modal__title-group">
+              <sds-text as="span" variant="titleMd" class="sds-modal__title">${confirmTitle}</sds-text>
+            </div>
+          </div>
+          <div class="sds-modal__body">
+            <sds-text as="p" variant="bodyMd">${confirmMessage}</sds-text>
+          </div>
+          <div class="sds-modal__footer">
+            <sds-button variant="ghost" size="md" label=confirmCancelLabel
+              onClick=() => component.cancelConfirm()/>
+            <sds-button variant="primary" size="md" label=confirmActionLabel
+              onClick=() => component.confirmAndClose()/>
+          </div>
+        </div>
+      </div>
+    </if>
+  </div>
+</if>

package/components/Floating/Floating.css

@@ -0,0 +1,28 @@
+/* SDS Floating.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Floating/Floating.css, which
+   is three lines — React kept everything else in inline styles from the positioning hook.
+   SDS keeps the computed coordinates inline too (they change per instance, per scroll) and
+   puts everything that does not change here. */
+
+.sds-floating {
+  display: inline-flex;
+  flex-direction: column;
+}
+
+/* The panel is measured before it is shown: a panel nobody has measured is 0×0, and a flip
+   decided on 0×0 puts it on the wrong side in front of the visitor. So it renders, gets
+   measured, and is revealed in one step.
+
+   Hidden with visibility rather than display:none, because display:none has no size to
+   measure — which is the whole problem this is solving. pointer-events keeps the invisible
+   panel from swallowing a click meant for what is underneath it. */
+.sds-floating__panel {
+  visibility: hidden;
+  pointer-events: none;
+  z-index: var(--z-floating);
+}
+
+.sds-floating__panel--positioned {
+  visibility: visible;
+  pointer-events: auto;
+}

package/components/Floating/floating-position.js

@@ -0,0 +1,251 @@
+/**
+ * Where a floating panel goes.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/useFloatingPosition.ts and
+ * components/getVisibleBounds.ts. React put this in a hook; here it is plain functions,
+ * which is what it always was — the hook part was only the subscription to scroll and
+ * resize, and that lives in the component.
+ *
+ * It is pure and it reads no DOM, so the interesting cases — the flip at the edge, the
+ * corner alignments, a panel inside a scroll container — are testable without a browser.
+ * That matters: this is the maths that decides whether a menu opens over the button the
+ * visitor was about to click.
+ */
+
+export const FLOATING_SIDES = ['top', 'bottom', 'left', 'right'];
+export const FLOATING_ALIGNS = ['start', 'center', 'end'];
+
+/** The twelve placements, in KDLS's camelCase vocabulary (Ant Design's convention). */
+export const FLOATING_PLACEMENTS = [
+  'top', 'topLeft', 'topRight',
+  'right', 'rightTop', 'rightBottom',
+  'bottom', 'bottomLeft', 'bottomRight',
+  'left', 'leftTop', 'leftBottom',
+];
+
+export const FLOATING_TRIGGERS = ['click', 'hover', 'focus', 'contextMenu'];
+
+export const DEFAULT_GAP = 4;
+
+export function assertPlacement(placement) {
+  if (!FLOATING_PLACEMENTS.includes(placement)) {
+    throw new Error(`Unknown floating placement: "${placement}". Allowed: ${FLOATING_PLACEMENTS.join(', ')}`);
+  }
+  return placement;
+}
+
+export function assertTrigger(trigger) {
+  for (const mode of [].concat(trigger)) {
+    if (!FLOATING_TRIGGERS.includes(mode)) {
+      throw new Error(`Unknown floating trigger: "${mode}". Allowed: ${FLOATING_TRIGGERS.join(', ')}`);
+    }
+  }
+  return trigger;
+}
+
+/**
+ * "bottomLeft" -> { side: 'bottom', align: 'start' }.
+ *
+ * The corner word means different things by side, which is the trap: on top and bottom it
+ * is horizontal (Left/Right), on left and right it is vertical (Top/Bottom). So
+ * `leftTop` is the left side aligned to the *start*, not the top side.
+ */
+export function parseFloatingPlacement(placement) {
+  const match = /^([a-z]+)([A-Z][a-z]+)?$/.exec(placement);
+  if (!match) throw new Error(`Unparseable floating placement: "${placement}"`);
+  const [, side, corner] = match;
+  if (!corner) return { side, align: 'center' };
+  const startWord = side === 'top' || side === 'bottom' ? 'Left' : 'Top';
+  return { side, align: corner === startWord ? 'start' : 'end' };
+}
+
+export function joinFloatingPlacement(side, align) {
+  if (align === 'center') return side;
+  const vertical = side === 'top' || side === 'bottom';
+  const startWord = vertical ? 'Left' : 'Top';
+  const endWord = vertical ? 'Right' : 'Bottom';
+  return side + (align === 'start' ? startWord : endWord);
+}
+
+/** camelCase placement -> kebab-case, for building a BEM modifier. */
+export const camelToKebab = (s) => s.replace(/[A-Z]/g, (c) => `-${c.toLowerCase()}`);
+
+/**
+ * The style for a side and align that have already been decided.
+ *
+ * Alignment is done with `transform` percentages, which are relative to the panel itself —
+ * so this never needs to know how big the panel is. Only the flip does.
+ */
+export function floatingStyleFor(anchor, side, align, gap) {
+  switch (side) {
+    case 'bottom':
+      if (align === 'start') return { top: anchor.bottom + gap, left: anchor.left };
+      if (align === 'end') return { top: anchor.bottom + gap, left: anchor.right, transform: 'translateX(-100%)' };
+      return { top: anchor.bottom + gap, left: anchor.left + anchor.width / 2, transform: 'translateX(-50%)' };
+    case 'top':
+      if (align === 'start') return { top: anchor.top - gap, left: anchor.left, transform: 'translateY(-100%)' };
+      if (align === 'end') return { top: anchor.top - gap, left: anchor.right, transform: 'translate(-100%, -100%)' };
+      return { top: anchor.top - gap, left: anchor.left + anchor.width / 2, transform: 'translate(-50%, -100%)' };
+    case 'right':
+      if (align === 'start') return { top: anchor.top, left: anchor.right + gap };
+      if (align === 'end') return { top: anchor.bottom, left: anchor.right + gap, transform: 'translateY(-100%)' };
+      return { top: anchor.top + anchor.height / 2, left: anchor.right + gap, transform: 'translateY(-50%)' };
+    case 'left':
+      if (align === 'start') return { top: anchor.top, left: anchor.left - gap, transform: 'translateX(-100%)' };
+      if (align === 'end') return { top: anchor.bottom, left: anchor.left - gap, transform: 'translate(-100%, -100%)' };
+      return { top: anchor.top + anchor.height / 2, left: anchor.left - gap, transform: 'translate(-100%, -50%)' };
+    default:
+      throw new Error(`Unknown floating side: "${side}". Allowed: ${FLOATING_SIDES.join(', ')}`);
+  }
+}
+
+/**
+ * Only the side flips; the alignment never changes.
+ *
+ * A panel that has not been measured yet is 0x0, and a 0x0 panel fits everywhere — so it
+ * would never flip, and would then be revealed on the wrong side. The caller measures
+ * first and positions second for exactly this reason.
+ */
+export function flipSide(anchor, panelSize, side, gap, bounds) {
+  if (panelSize.width === 0 && panelSize.height === 0) return side;
+  if (side === 'bottom' && anchor.bottom + gap + panelSize.height > bounds.bottom) return 'top';
+  if (side === 'top' && anchor.top - gap - panelSize.height < bounds.top) return 'bottom';
+  if (side === 'right' && anchor.right + gap + panelSize.width > bounds.right) return 'left';
+  if (side === 'left' && anchor.left - gap - panelSize.width < bounds.left) return 'right';
+  return side;
+}
+
+
+/**
+ * How far the panel pulls itself back along each axis, as a fraction of its own size.
+ *
+ * This is the same information as the `transform` in floatingStyleFor, said as numbers.
+ * It exists because a percentage transform cannot be clamped: to know whether the panel
+ * runs off the screen you have to resolve it against the panel's real width, and to move
+ * it back you have to replace the percentage with a number. A test asserts the two agree
+ * for all twelve placements, so neither can drift.
+ */
+export function shiftFor(side, align) {
+  const fraction = (a) => (a === 'start' ? 0 : a === 'end' ? -1 : -0.5);
+  if (side === 'top' || side === 'bottom') {
+    return { x: fraction(align), y: side === 'top' ? -1 : 0 };
+  }
+  return { x: side === 'left' ? -1 : 0, y: fraction(align) };
+}
+
+export function transformFor({ x, y }) {
+  const pct = (n) => `${n * 100}%`;
+  if (!x && !y) return undefined;
+  if (!y) return `translateX(${pct(x)})`;
+  if (!x) return `translateY(${pct(y)})`;
+  return `translate(${pct(x)}, ${pct(y)})`;
+}
+
+/**
+ * Keeps the panel on screen across the axis the flip does not handle.
+ *
+ * The flip only moves the panel to the other side of the trigger — it never shifts it
+ * sideways. So a centred panel on a trigger near the left edge hangs off the screen, and
+ * KDLS does this too: measured in the portal, a 322px panel centred on a trigger at x=24
+ * lands at left: -102. Twelve placements and none of them notices.
+ *
+ * The margin keeps the panel from sitting flush against the edge, which reads as clipped
+ * even when it is not.
+ */
+export function clampToBounds(style, panelSize, side, align, bounds, margin = 8) {
+  const shift = shiftFor(side, align);
+  const across = side === 'top' || side === 'bottom' ? 'x' : 'y';
+
+  const size = across === 'x' ? panelSize.width : panelSize.height;
+  // Nothing measured yet: clamping to a size of zero would pin the panel to the edge.
+  if (!size) return style;
+
+  const axis = across === 'x' ? 'left' : 'top';
+  const low = across === 'x' ? bounds.left : bounds.top;
+  const high = across === 'x' ? bounds.right : bounds.bottom;
+
+  const edge = style[axis] + shift[across] * size;
+  // A panel taller or wider than the space it has cannot be made to fit; pin it to the
+  // near edge rather than pushing it off the far one.
+  const clamped = Math.max(low + margin, Math.min(edge, high - size - margin));
+  if (clamped === edge) return style;
+
+  const rest = { ...shift, [across]: 0 };
+  return { ...style, [axis]: clamped, transform: transformFor(rest) };
+}
+
+export function computeFloatingPosition(anchor, panelSize, side, align, gap, bounds) {
+  const effectiveSide = flipSide(anchor, panelSize, side, gap, bounds);
+  const style = floatingStyleFor(anchor, effectiveSide, align, gap);
+  return {
+    style: clampToBounds(style, panelSize, effectiveSide, align, bounds),
+    effectiveSide,
+  };
+}
+
+/**
+ * How much of the viewport this element can actually be seen in, once its scrolling
+ * ancestors have had their say.
+ *
+ * `scrollOnly` skips `overflow: hidden`: a panel positioned with `position: fixed` escapes
+ * a hidden ancestor anyway, so treating one as a boundary would flip the panel for a wall
+ * that is not there. Scroll containers are different — the panel does not escape those in
+ * any useful sense, because the content it is anchored to moves inside them.
+ */
+export function getVisibleBounds(el, scrollOnly = false, view = globalThis) {
+  let top = 0;
+  let bottom = view.innerHeight;
+  let left = 0;
+  let right = view.innerWidth;
+
+  const clips = scrollOnly ? /(scroll|auto)/ : /(hidden|scroll|auto)/;
+  let current = el?.parentElement ?? null;
+
+  while (current && current !== view.document?.documentElement) {
+    if (current === view.document?.body) break;
+    const { overflowX, overflowY } = view.getComputedStyle(current);
+    // Clamp an axis only when that axis really clips. A strip that scrolls sideways must
+    // not clamp the vertical one, or a panel flips for a boundary it never touched.
+    const clipsY = clips.test(overflowY) && current.scrollHeight > current.clientHeight;
+    const clipsX = clips.test(overflowX) && current.scrollWidth > current.clientWidth;
+    if (clipsY || clipsX) {
+      const box = current.getBoundingClientRect();
+      if (clipsY) { top = Math.max(top, box.top); bottom = Math.min(bottom, box.bottom); }
+      if (clipsX) { left = Math.max(left, box.left); right = Math.min(right, box.right); }
+    }
+    current = current.parentElement;
+  }
+
+  return { top, bottom, left, right };
+}
+
+/**
+ * The ancestor that quietly breaks `position: fixed`, if there is one.
+ *
+ * `transform`, `filter`, `perspective`, `backdrop-filter`, `contain: paint` and
+ * `will-change` on any of those make an element the containing block for its fixed
+ * descendants — so the panel stops being positioned against the viewport and starts being
+ * positioned, and clipped, against that ancestor. React solves this with a portal to
+ * <body>. Marko 5 has no portal: a node moved to <body> is put back where the template
+ * says it belongs on the component's next re-render, and a floating panel re-renders every
+ * time it opens. Measured in the portal, 2026-09-10.
+ *
+ * So SDS positions with `fixed` and reports the case it cannot handle instead of drawing
+ * the panel in the wrong place with no explanation.
+ */
+export function findFixedContainingBlock(el, view = globalThis) {
+  let current = el?.parentElement ?? null;
+  while (current && current !== view.document?.documentElement) {
+    const style = view.getComputedStyle(current);
+    const breaks =
+      (style.transform && style.transform !== 'none') ||
+      (style.filter && style.filter !== 'none') ||
+      (style.perspective && style.perspective !== 'none') ||
+      (style.backdropFilter && style.backdropFilter !== 'none') ||
+      /paint|strict|content/.test(style.contain || '') ||
+      /transform|filter|perspective/.test(style.willChange || '');
+    if (breaks) return current;
+    current = current.parentElement;
+  }
+  return null;
+}