@kenlo/sds-design-system 0.9.9

package/components/Modal/Modal.css

@@ -0,0 +1,160 @@
+/* SDS Modal.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Modal/Modal.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ============================================================
+   SDS Modal
+   Size: 600px default | radius: --radius-md (12px)
+   Shadow: 0 0 2px / 0 0 16px rgba(26,26,26,0.30)
+   ============================================================ */
+
+/* ── Overlay ── */
+.sds-modal-overlay {
+  position: fixed;
+  inset: 0;
+  background: var(--color-opacity-50);
+  z-index: var(--z-modal);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  animation: sds-overlay-in 120ms ease;
+  /* Allow click-through to close */
+  padding: var(--spacing-6);
+  box-sizing: border-box;
+}
+@keyframes sds-overlay-in {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+/* ── Container ── */
+.sds-modal {
+  position: relative;
+  background: var(--component-bg-color);
+  /* Figma: corner-default = 12px = --radius-md */
+  border-radius: var(--radius-md);
+  box-shadow:
+    0px 0px 2px var(--color-opacity-30),
+    0px 0px 16px var(--color-opacity-30);
+  width: 600px;
+  max-width: 100%;
+  /* Flexible height: min for content, max so it doesn't overflow */
+  max-height: calc(100vh - 96px);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: sds-modal-in 200ms var(--ease-standard);
+}
+@keyframes sds-modal-in {
+  from { opacity: 0; transform: scale(0.96) translateY(8px); }
+  to   { opacity: 1; transform: scale(1) translateY(0); }
+}
+/* ── Header: pt-[24px] pb-[24px] px-[24px] ── */
+.sds-modal__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+  padding: var(--spacing-6);
+  flex-shrink: 0;
+}
+.sds-modal__title-group {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  flex: 1;
+  min-width: 0;
+}
+.sds-modal__title-group .sds-tooltip-wrapper {
+  flex-shrink: 0;
+}
+.sds-modal__title {
+  overflow: hidden;
+  white-space: nowrap;
+  text-overflow: ellipsis;
+}
+.sds-modal__header-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  flex-shrink: 0;
+}
+/* ── Body ── */
+.sds-modal__body {
+  flex: 1;
+  overflow-y: auto;
+  padding: 0 var(--spacing-6);
+}
+/* ── Footer: pt-[24px] pb-[24px] px-[24px] ── */
+.sds-modal__footer {
+  display: flex;
+  align-items: center;
+  justify-content: flex-end;
+  /* 16px between the buttons, decided by Rafael looking at a three-button footer. KDLS
+     uses 24 and the Card here already used 16, so the system disagreed with itself; 16 is
+     the side that keeps a row of actions reading as one group. */
+  gap: var(--spacing-4);
+  padding: var(--spacing-6);
+  flex-shrink: 0;
+}
+/* ── Dark mode ── */
+/* The veil is black in both themes. --color-opacity-* inverts with the theme, so in dark
+   mode it would light the screen up instead of dimming it — which is why KDLS wrote a
+   literal here. --color-scrim is that literal, as a token. */
+[data-theme="dark"] .sds-modal-overlay {
+  background: var(--color-scrim);
+}
+/* Same two-layer shadow as the light theme, darker. --color-opacity-* inverts, so reading
+   it here would draw a white glow around the panel. */
+[data-theme="dark"] .sds-modal {
+  background: var(--component-bg-color);
+  box-shadow:
+    0px 0px 2px var(--color-scrim),
+    0px 0px 16px var(--color-scrim);
+}
+/* ── Mobile: bottom sheet (≤799px) ── */
+@media (max-width: 799px) {
+  .sds-modal-overlay {
+    align-items: flex-end;
+    padding: 0;
+  }
+  .sds-modal {
+    width: 100% !important;
+    max-height: 90vh;
+    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+    animation: sds-modal-in-mobile 240ms var(--ease-spring);
+  }
+  /* Handle bar */
+  .sds-modal::before {
+    content: '';
+    display: block;
+    width: var(--spacing-10);
+    height: var(--spacing-1);
+    background: var(--color-neutral-30);
+    border-radius: var(--radius-full);
+    margin: var(--spacing-3) auto 0;
+    flex-shrink: 0;
+  }
+  .sds-modal__header {
+    padding-top: var(--spacing-4);
+  }
+  .sds-modal__footer {
+    flex-direction: column-reverse;
+    align-items: stretch;
+  }
+  .sds-modal__footer .sds-button {
+    width: 100%;
+  }
+}
+@keyframes sds-modal-in-mobile {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+
+/* The confirmation, drawn inside the modal's own overlay.
+   A second veil over the first would double the dimming; this one only holds the panel. */
+.sds-modal-overlay--confirm {
+  background: transparent;
+  z-index: 1;
+}
+
+.sds-modal--confirm {
+  width: 420px;
+}

package/components/Modal/modal.marko

@@ -0,0 +1,296 @@
+<!-- sds-modal — ported from kdls-design-system v2.5.1 (0f3edf8) components/Modal/Modal.tsx.
+
+     A dialog over a veil: title, body, up to three actions, and an optional confirmation
+     before it closes.
+
+     Divergences:
+
+     It manages focus, which KDLS's does not manage at all. An open modal with no focus
+     trap is one a keyboard user Tabs straight out of, into the page behind it, with no
+     visible indication of where they are — and no way back but Tab through the whole
+     document. The shared machinery is in foundations/overlay.js, because Drawer and
+     BottomSheet need exactly the same thing and KDLS writes a third of it three times.
+
+     No portal. KDLS renders through createPortal into <body>; Marko 5 has no portal — see
+     components/Floating/floating.marko for the measurement. It does not matter as much
+     here: the overlay is position:fixed and covers the viewport, so the only thing a
+     portal would buy is escaping an ancestor that has a transform, a filter or
+     contain:paint. sds-floating warns about that case and this inherits the same limit.
+
+     Modal.confirm() is not ported. It is an imperative call that mounts a second React
+     root; the Marko equivalent is a different design, not a translation, and nothing in
+     this system needs it yet. The declarative confirmation — confirmClose — is here,
+     which is what the flow actually uses.
+
+     The body scroll lock is counted rather than set and unset, so a modal that opens a
+     drawer does not get the page's scrollbar back the moment the drawer closes.
+
+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";
+
+class {
+  onCreate() {
+    this.state = { confirming: false, running: {} };
+    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. It used to reach
+      // `requestClose`, which sees `confirming` already true and closes — so the key you
+      // press to back out of a dialog discarded the work that dialog exists to protect.
+      // Measured on the portal: one Escape and both the question and the modal were gone.
+      // Escape always undoes the most recent thing that opened. Same fault as the Drawer.
+      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();
+    // One frame, so the panel is in the document and has something focusable in it.
+    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;
+  }
+
+  /** The close a visitor asked for, which may need confirming first. */
+  requestClose() {
+    if (this.input.confirmClose && !this.state.confirming) {
+      this.state.confirming = true;
+      // On update, once the dialog is in the document.
+      this.wantsConfirmFocus = true;
+      return;
+    }
+    this.input.onClose?.();
+  }
+
+  /**
+   * A click inside the panel is the panel's, and stops there.
+   *
+   * The overlay's handler already ignores clicks that did not land on it, so dismissal was
+   * correct — but the event still bubbled out of the overlay and into whatever the
+   * consumer had mounted the modal inside. A modal opened from inside a clickable Card
+   * re-triggered that card on every click in the dialog. KDLS stops it at the panel.
+   */
+  stopInside(event) {
+    event.stopPropagation();
+  }
+
+  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 panels is on top.
+   *
+   * It was installed on the main panel and stayed there. The confirmation is a SIBLING of
+   * that panel inside the overlay, not a descendant, so it sat outside the trap: Tab could
+   * not reach "Descartar" or "Continuar editando" and a keyboard user could not 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"));
+  }
+
+  /**
+   * Run a footer action, and show a spinner on its button while it is still running.
+   *
+   * KDLS turns the loading state on by itself whenever `onPrimary` returns a Promise, and
+   * documents it on the prop. The port passed the handler straight to the button, so
+   * `isLoading` only ever reflected the explicit `primaryLoading` — a caller who wrote an
+   * async save got no feedback at all, and nothing stopped them pressing it again while
+   * the first save was in flight.
+   *
+   * `sds-badge-dismissible` already does this; the shape is the same.
+   */
+  async run(which, handler) {
+    const result = handler?.();
+    if (!(result instanceof Promise)) return;
+    this.state.running = { ...this.state.running, [which]: true };
+    try {
+      await result;
+    } finally {
+      this.state.running = { ...this.state.running, [which]: false };
+    }
+  }
+
+  /** Loading is the caller's explicit flag OR a promise this component is still waiting on. */
+  busy(which, explicit) {
+    return Boolean(explicit || this.state.running?.[which]);
+  }
+
+  confirmAndClose() {
+    this.state.confirming = false;
+    this.wantsConfirmFocus = false;
+    this.input.onClose?.();
+  }
+}
+
+$ {
+  const {
+    isOpen,
+    title,
+    titleTooltip,
+    titleTooltipPosition = "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(tertiaryDisabledTooltipPosition);
+  assertPlacement(secondaryDisabledTooltipPosition);
+  assertPlacement(primaryDisabledTooltipPosition);
+
+  if (!title) throw new Error("sds-modal needs a `title` — it is the dialog's accessible name.");
+
+  const hasFooter = Boolean(input.footer || tertiaryLabel || secondaryLabel || primaryLabel);
+  const overlayStyle = zIndex !== undefined ? `z-index:${zIndex}` : null;
+}
+
+<if(isOpen)>
+  <div
+    key="overlay"
+    class="sds-modal-overlay"
+    style=overlayStyle
+    role="dialog"
+    aria-modal="true"
+    aria-label=title
+    on-click("handleOverlayClick")
+  >
+    <div key="panel" class=`sds-modal ${extraClass}`.trim() on-click("stopInside")>
+      <div class="sds-modal__header">
+        <div class="sds-modal__title-group">
+          <sds-text as="span" variant="titleMd" class="sds-modal__title">${title}</sds-text>
+          <if(titleTooltip)>
+            <sds-tooltip content=titleTooltip placement=titleTooltipPosition/>
+          </if>
+        </div>
+        <div class="sds-modal__header-actions">
+          <sds-icon-button variant="neutral" aria-label=closeLabel onClick=() => component.requestClose()>
+            <@icon><${dismissIcon}/></@icon>
+          </sds-icon-button>
+        </div>
+      </div>
+
+      <if(input.renderBody)>
+        <div class="sds-modal__body sds-scroll sds-scroll--thin">
+          <${input.renderBody}/>
+        </div>
+      </if>
+
+      <if(hasFooter)>
+        <div class="sds-modal__footer">
+          <if(input.footer)>
+            <${input.footer}/>
+          </if>
+          <else>
+            <if(tertiaryLabel)>
+              <sds-button variant="link" size="md" label=tertiaryLabel
+                onClick=() => component.run("tertiary", onTertiary)
+                isLoading=component.busy("tertiary", tertiaryLoading) disabled=tertiaryDisabled
+                disabledTooltip=tertiaryDisabledTooltip disabledTooltipPosition=tertiaryDisabledTooltipPosition/>
+            </if>
+            <if(secondaryLabel)>
+              <sds-button variant="ghost" size="md" label=secondaryLabel
+                onClick=() => component.run("secondary", onSecondary)
+                isLoading=component.busy("secondary", secondaryLoading) disabled=secondaryDisabled
+                disabledTooltip=secondaryDisabledTooltip disabledTooltipPosition=secondaryDisabledTooltipPosition/>
+            </if>
+            <if(primaryLabel)>
+              <sds-button variant="primary" size="md" label=primaryLabel
+                onClick=() => component.run("primary", onPrimary)
+                isLoading=component.busy("primary", primaryLoading) disabled=primaryDisabled
+                disabledTooltip=primaryDisabledTooltip disabledTooltipPosition=primaryDisabledTooltipPosition/>
+            </if>
+          </else>
+        </div>
+      </if>
+    </div>
+
+    <!-- The confirmation is drawn inside this overlay rather than as a second modal:
+         nesting the component in itself would take a second scroll lock and a second focus
+         trap over the first, and the first would then restore focus to a panel that no
+         longer exists. -->
+    <if(state.confirming)>
+      <div class="sds-modal-overlay sds-modal-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>