@kenlo/sds-design-system 0.9.9

package/components/BottomSheet/bottom-sheet.marko

@@ -0,0 +1,340 @@
+<!-- sds-bottom-sheet — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/BottomSheet/BottomSheet.tsx.
+
+     A panel that rises from the bottom of the screen with a list of choices in it. It is
+     the mobile shape of a Select, and on a phone it is the better one: a dropdown anchored
+     to a control near the bottom of a 812px screen has nowhere to open, and a list of
+     twenty options in a floating panel is a list nobody can scroll without closing it.
+
+     It shares foundations/overlay.js with Modal and Drawer — the scroll lock, the focus
+     trap, Escape — and the option vocabulary with Select, so `options` means the same
+     thing in both and a value moves between them without translation.
+
+     Divergences:
+
+     KDLS draws each option as an <li> with a mousedown handler. That is not focusable, not
+     activatable by keyboard, and invisible to anything that goes looking for controls —
+     on a list whose whole purpose is choosing. Here each row is a real <button> inside its
+     <li>, with the browser's chrome taken off in CSS.
+
+     KDLS closes on any mousedown on the overlay, including the mousedown that ends a drag
+     started inside the sheet. This closes on a press that both starts and ends outside.
+
+     No portal, for the reason in components/Floating/floating.marko: Marko 5 has none, and
+     a node moved to <body> returns on the next re-render. The sheet is position:fixed and
+     covers the viewport, so the only thing lost is escaping a transformed ancestor. -->
+
+import { normaliseOptions, filterOptions, toArray, toggleValue, isSelected,
+  selectableValues, selectAllState } from "../Select/select-options.js";
+import { lockScroll, unlockScroll, trapFocus } from "../../foundations/overlay.js";
+import dismissIcon from "../../icons/generated/fluent-dismiss-regular.marko";
+import searchIcon from "../../icons/generated/fluent-search-regular.marko";
+import checkIcon from "../../icons/generated/fluent-checkmark-regular.marko";
+
+class {
+  onCreate(input) {
+    this.state = {
+      query: "",
+      value: input.value ?? input.defaultValue ?? (input.multiple ? [] : null),
+    };
+    this.release = null;
+  }
+
+  onMount() {
+    this.onKeyDown = (event) => {
+      if (event.key !== "Escape" || !this.input.isOpen) return;
+      event.stopPropagation();
+      this.input.onClose?.();
+    };
+    document.addEventListener("keydown", this.onKeyDown);
+    if (this.input.isOpen) this.open();
+  }
+
+  onUpdate() {
+    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.query = "";
+  }
+
+  get currentValue() {
+    return this.input.value !== undefined ? this.input.value : this.state.value;
+  }
+
+  get options() {
+    return normaliseOptions(this.input);
+  }
+
+  commit(next) {
+    if (this.input.value === undefined) this.state.value = next;
+    this.input.onChange?.(next);
+  }
+
+  choose(option) {
+    if (option.disabled) return;
+    if (this.input.multiple) {
+      this.commit(toggleValue(toArray(this.currentValue), option.value));
+      return;
+    }
+    this.commit(option.value);
+    // A single choice is the whole interaction: staying open asks the visitor to close a
+    // sheet whose job is done.
+    this.input.onClose?.();
+  }
+
+  /** The rows on screen — what a search has left, which is what the reader can act on. */
+  get visibleOptions() {
+    const all = this.options;
+    return this.input.filterOption === false ? all : filterOptions(all, this.state.query);
+  }
+
+  /**
+   * "Selecionar todos" — todos of what is on screen, merged rather than replacing.
+   *
+   * It read every option and replaced the whole selection, so under a search it selected
+   * rows the reader could not see and threw away the ones chosen outside the filter.
+   * Ticking a box must never remove a choice. Same fix the Select needed.
+   */
+  toggleAll() {
+    const visible = selectableValues(this.visibleOptions);
+    const current = toArray(this.currentValue);
+    const { checked } = selectAllState(this.visibleOptions, this.currentValue);
+    this.commit(checked
+      ? current.filter((v) => !visible.includes(v))
+      : [...current, ...visible.filter((v) => !current.includes(v))]);
+  }
+
+  clear() {
+    this.commit(this.input.multiple ? [] : null);
+    // And close. KDLS's own prop doc says so — "resets the value to empty and closes the
+    // sheet" — and leaving it open puts the reader back in a list they have just emptied,
+    // with no indication that anything happened.
+    this.input.onClose?.();
+  }
+
+  handleSearch(event) {
+    this.state.query = event.target.value;
+    this.input.onSearch?.(event.target.value);
+  }
+
+  /** Closes only on a press that both starts and ends outside the sheet. */
+  handleOverlayDown(event) {
+    if (this.getEl("panel")?.contains(event.target)) return;
+    this.input.onClose?.();
+  }
+}
+
+$ {
+  const {
+    isOpen,
+    title,
+    searchable = false,
+    searchPlaceholder = "Digite para buscar...",
+    multiple = false,
+    showSelectAll = false,
+    selectAllLabel = "Selecionar todos",
+    clearable = false,
+    emptyMessage = "Nenhuma opção",
+    closeLabel = "Fechar",
+    applyLabel = "Aplicar",
+    clearLabel = "Limpar",
+    class: extraClass = "",
+  } = input;
+
+  const value = component.currentValue;
+  const all = component.options;
+  const visible = input.filterOption === false ? all : filterOptions(all, state.query);
+  // Reads the visible rows, because that is what ticking it acts on. Reading the whole
+  // list made the box claim "all chosen" while the filtered rows in front of you were not.
+  const allState = selectAllState(visible, value);
+  const hasValue = toArray(value).length > 0;
+
+  // A sheet with a list needs a name for that list; a sheet holding arbitrary body content
+  // is named by its title alone.
+  // `component.id`, not a random string: Marko's is the same on the server and in the
+  // browser, and a random one drawn in the render block is neither.
+  const listId = `sds-bottom-sheet-${component.id}`;
+  const showList = all.length > 0 || !input.renderBody;
+  // `(clearable || true)` was always true, so this read as `multiple` alone: a
+  // single-select sheet asked to be `clearable` got no footer at all and the "Limpar" it
+  // was promised never appeared. A constant comparison hiding inside a condition, the same
+  // shape the Skeleton shapes had.
+  const showFooter = Boolean(input.footer) || multiple || clearable;
+}
+
+<if(isOpen)>
+  <div class="sds-bottomsheet__overlay" on-mousedown("handleOverlayDown")>
+    <div
+      key="panel"
+      class=`sds-bottomsheet ${extraClass}`.trim()
+      role="dialog"
+      aria-modal="true"
+      aria-label=title
+    >
+      <div class="sds-bottomsheet__title-row">
+        <if(title)>
+          <sds-text as="span" variant="labelSemiBold" class="sds-bottomsheet__title">${title}</sds-text>
+        </if>
+        <sds-icon-button
+          class="sds-bottomsheet__close"
+          variant="neutral"
+          aria-label=closeLabel
+          onClick=() => input.onClose?.()
+        >
+          <@icon><${dismissIcon}/></@icon>
+        </sds-icon-button>
+      </div>
+
+      <if(searchable)>
+        <div class="sds-bottomsheet__search">
+          <div class="sds-bottomsheet__searchable-field">
+            <span class="sds-bottomsheet__searchable-icon" aria-hidden="true">
+              <sds-icon size="sm"><${searchIcon}/></sds-icon>
+            </span>
+            <input
+              class="sds-bottomsheet__searchable-input"
+              type="search"
+              value=state.query
+              placeholder=searchPlaceholder
+              aria-label=searchPlaceholder
+              on-input("handleSearch")
+            />
+          </div>
+        </div>
+      </if>
+
+      <if(multiple && showSelectAll)>
+        // The listener is on the wrapper. `sds-checkbox` is markup: it does not hydrate,
+        // it takes no `onChange`, and says so in its own header — so the handler here was
+        // waiting for a callback that is never called. The box ticked natively and nothing
+        // happened, exactly as in the Select. The native `change` bubbles; the wrapper
+        // hears it.
+        //
+        // It also wore `__header`, the sheet's own title bar class, which is 16px padding
+        // all round and a row layout meant for a title and a close button. Its own class
+        // now, so changing one does not move the other.
+        <div class="sds-bottomsheet__select-all" on-change("toggleAll")>
+          <sds-checkbox
+            label=selectAllLabel
+            checked=allState.checked
+            indeterminate=allState.indeterminate
+          />
+        </div>
+      </if>
+
+      <div class="sds-bottomsheet__body sds-scroll sds-scroll--thin">
+        <if(showList)>
+          <ul class="sds-bottomsheet__list" id=listId role="listbox" aria-label=title
+            aria-multiselectable=(multiple ? "true" : null)>
+            <if(!visible.length)>
+              <li class="sds-bottomsheet__empty">${emptyMessage}</li>
+            </if>
+            <for|option| of=visible>
+              <if(option.section)>
+                // A section heading, not a header. It wore `__header`, whose rule is a
+                // 16px-padded flex COLUMN with a bottom border — a container for the search
+                // box and the select-all row, not a label. So "Capitais" rendered as a
+                // block the height of a panel section with a rule under it.
+                <li class="sds-bottomsheet__section" role="presentation">${option.label}</li>
+              </if>
+              <else>
+                <li
+                  class=[
+                    "sds-bottomsheet__item",
+                    isSelected(value, option.value) ? "sds-bottomsheet__item--active" : "",
+                    option.disabled ? "sds-bottomsheet__item--disabled" : "",
+                  ].filter(Boolean).join(" ")
+                  role="none"
+                >
+                  <button
+                    type="button"
+                    class="sds-bottomsheet__item-button"
+                    role="option"
+                    aria-selected=(isSelected(value, option.value) ? "true" : "false")
+                    disabled=(option.disabled || null)
+                    on-click("choose", option)
+                  >
+                    <if(multiple)>
+                      <span class="sds-bottomsheet__item-checkbox" aria-hidden="true">
+                        <sds-checkbox checked=isSelected(value, option.value) disabled=option.disabled/>
+                      </span>
+                    </if>
+                    <if(option.icon)>
+                      <span class="sds-bottomsheet__item-icon-left" aria-hidden="true">
+                        <sds-icon><${(option.icon && option.icon.renderBody) || option.icon}/></sds-icon>
+                      </span>
+                    </if>
+                    <span class="sds-bottomsheet__item-label">${option.label}</span>
+                    <if(!multiple && isSelected(value, option.value))>
+                      // The mark on the chosen row. `.sds-bottomsheet__item-check` has been
+                      // in the stylesheet since the port with nothing rendering it, so a
+                      // single-select sheet showed which row was chosen only by its
+                      // background — and `aria-selected` said so to a screen reader while
+                      // the eye had to infer it.
+                      <span class="sds-bottomsheet__item-check" aria-hidden="true">
+                        <sds-icon size="sm"><${checkIcon}/></sds-icon>
+                      </span>
+                    </if>
+                  </button>
+                </li>
+              </else>
+            </for>
+          </ul>
+        </if>
+        <else>
+          <${input.renderBody}/>
+        </else>
+      </div>
+
+      <if(input.footer)>
+        <div class="sds-bottomsheet__footer">
+          <${input.footer}/>
+        </div>
+      </if>
+      <else-if(showFooter)>
+        // `clearable` OR `multiple`, which is KDLS's gate. It read `multiple` alone here,
+        // so a single-select sheet asked to be clearable got no footer and the "Limpar" it
+        // was promised never appeared. (The `showFooter` above said the same thing in a
+        // way that could not be false — `multiple && (clearable || true)` — and nothing
+        // read it; the template decided again, differently, down here.)
+        <div class="sds-bottomsheet__footer">
+          <div class="sds-bottomsheet__footer-actions">
+            <if(clearable)>
+              <sds-button variant="ghost" size="md" label=clearLabel
+                disabled=(!hasValue) onClick=() => component.clear()/>
+            </if>
+            // Only a multiple-select sheet needs one: a single choice closes the sheet by
+            // being made, so an "Aplicar" there is a button with nothing left to apply.
+            // Full width when it stands alone, which is what KDLS does.
+            <if(multiple)>
+              <sds-button variant="primary" size="md" label=applyLabel
+                width=(clearable ? "hug" : "fill")
+                onClick=() => input.onClose?.()/>
+            </if>
+          </div>
+        </div>
+      </else-if>
+    </div>
+  </div>
+</if>

package/components/BulkActionBar/BulkActionBar.css

@@ -0,0 +1,88 @@
+/* SDS BulkActionBar.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/BulkActionBar/BulkActionBar.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ */
+
+/* Two shadows were written as literals and are snapped to the system here, the same two
+   the Drawer had: 0.15 is not a step on the opacity scale (05/10/20/30/40/50) so it reads
+   --color-opacity-20, and the dark one was black because --color-opacity-* inverts with the
+   theme — that value is --color-scrim. *//* ── BulkActionBar ──────────────────────────────────────────────────────
+   Always-fixed bar shown when one or more rows are selected — rendered via
+   portal into document.body, always pinned to the bottom of the viewport.
+   BEM root: .sds-bulk-action-bar
+   z-index: 100 — see component-rules.md z-index scale
+   ─────────────────────────────────────────────────────────────────── */
+
+.sds-bulk-action-bar {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  height: 80px;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-6);
+  padding: 0 var(--spacing-6);
+  background: var(--component-bg-color);
+  border-top: 1px solid var(--border-static-color);
+  box-shadow: 0 -4px 24px var(--color-opacity-20);
+  z-index: var(--z-sticky);
+}
+/* ── Identity — countLabel + "Limpar" (default), or ✕ + countLabel (dismiss mode) ──
+   Gap is asymmetric: to the right of countLabel it's spacing-6 (default mode, before "Limpar");
+   to the left of countLabel (dismiss mode, after the ✕) it stays the tighter spacing-2. ── */
+/* Divergence: the identity is pinned left in both modes.
+
+   KDLS pushes it to the far right when the bar is in clear mode, so the count — the one
+   thing on this bar that changes, and the thing it announces — moved depending on which
+   of two props the caller passed. The bar is fixed over everything while it is up; what
+   it says about itself belongs at the start of the line, and the actions at the end. */
+.sds-bulk-action-bar__identity {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  flex-shrink: 0;
+}
+
+.sds-bulk-action-bar--dismiss .sds-bulk-action-bar__identity {
+  gap: var(--spacing-2);
+}
+.sds-bulk-action-bar__label {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  font-family: var(--font-family-base);
+}
+/* ── Divider — same height as the primary Button (48px). Absent entirely in dismiss mode (not rendered) ── */
+/* ── Groups + secondary + primary ── */
+/* The actions end the line, whichever way the identity was built. */
+.sds-bulk-action-bar__groups {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-6);
+  margin-left: auto;
+}
+.sds-bulk-action-bar--dismiss .sds-bulk-action-bar__groups {
+  margin-left: auto; /* dismiss mode: this cluster is what gets pushed right, identity stays left */
+}
+.sds-bulk-action-bar__group {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+.sds-bulk-action-bar__group-label {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-label-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--label-color);
+}
+.sds-bulk-action-bar__group-actions {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+}
+/* ── Dark mode ── */
+[data-theme="dark"] .sds-bulk-action-bar {
+  border-top-color: var(--border-interactive-color);
+  box-shadow: 0 -4px 24px var(--color-scrim);
+}

package/components/BulkActionBar/bulk-action-bar.marko

@@ -0,0 +1,186 @@
+<!-- sds-bulk-action-bar — ported from kdls-design-system v2.5.1 (0f3edf8)
+     components/BulkActionBar/BulkActionBar.tsx.
+
+     The bar that appears when rows are selected: how many, a way to let go of them, and
+     the things that can be done to them. Every action follows a promise the caller
+     returns, which is what lets a button spin without being told to.
+
+     `onClear` and `onDismiss` are two shapes of the same idea and KDLS makes them mutually
+     exclusive in the type system, which does not exist here — so the check is at render
+     and it throws, naming both. Getting it wrong silently would draw two ways out of the
+     same bar, or none.
+
+     Divergences:
+
+     No portal, for the reason measured in components/Floating. The bar is position:fixed,
+     so it floats over the page from wherever it is written; what a portal would add is
+     escaping an ancestor with a transform, and the component warns about that case through
+     sds-floating when it is used inside one.
+
+     It is a <section> with an accessible name and the count lives in an aria-live region.
+     KDLS renders a bare div, so a keyboard user who selects a row is given a bar full of
+     new actions and told nothing about it — the count changing is the one thing that
+     needs announcing here. -->
+
+import dismissIcon from "../../icons/generated/fluent-dismiss-regular.marko";
+
+class {
+  onCreate() {
+    this.state = { primary: false, secondary: false, group: {} };
+  }
+
+  async run(mark, handler) {
+    const result = handler?.();
+    if (!(result instanceof Promise)) return;
+    mark(true);
+    try {
+      await result;
+    } finally {
+      mark(false);
+    }
+  }
+
+  handlePrimary() {
+    return this.run((v) => { this.state.primary = v; }, this.input.onPrimary);
+  }
+
+  handleSecondary() {
+    return this.run((v) => { this.state.secondary = v; }, this.input.onSecondary);
+  }
+
+  handleGroupAction(key, action) {
+    return this.run((v) => {
+      this.state.group = { ...this.state.group, [key]: v };
+    }, action.onClick);
+  }
+}
+
+$ {
+  const {
+    countLabel,
+    groups = [],
+    primaryLabel, onPrimary, primaryLoading = false, primaryDisabled = false, primaryDisabledTooltip,
+    secondaryLabel, onSecondary, secondaryLoading = false, secondaryDisabled = false, secondaryDisabledTooltip,
+    actions = [],
+    onClear,
+    onDismiss,
+    clearLabel = "Limpar",
+    dismissLabel = "Fechar",
+    label = "Ações em massa",
+    class: extraClass = "",
+  } = input;
+
+  if (countLabel === undefined) throw new Error("sds-bulk-action-bar needs a `countLabel`.");
+  if (Boolean(onClear) === Boolean(onDismiss)) {
+    throw new Error("sds-bulk-action-bar needs exactly one of `onClear` or `onDismiss` — one draws a Limpar link before the count, the other a ✕.");
+  }
+
+  // Two shapes, and a bar is one of them.
+  //
+  //   grouped  — `groups`, each a labelled set of links. A list of things you can do to
+  //              the selection, sorted by what they are about.
+  //   buttons  — `primaryLabel`, `secondaryLabel` and as many loose `actions` links as
+  //              needed. One act stands out, one stands beside it, the rest are links.
+  //
+  // Mixing them puts a labelled group next to an unlabelled primary and asks the reader
+  // to work out whether the group heading covers the button after it. KDLS allows the
+  // mix; this refuses it, for the same reason it refuses onClear with onDismiss.
+  const grouped = groups.length > 0;
+  const buttons = Boolean(primaryLabel) || Boolean(secondaryLabel) || actions.length > 0;
+  if (grouped && buttons) {
+    throw new Error("sds-bulk-action-bar takes either `groups` or the button set (`primaryLabel`, `secondaryLabel`, `actions`) — not both. A labelled group beside an unlabelled button leaves the reader guessing how far the label reaches.");
+  }
+
+  const isDismiss = Boolean(onDismiss);
+  const classes = [
+    "sds-bulk-action-bar",
+    isDismiss ? "sds-bulk-action-bar--dismiss" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<section class=classes aria-label=label>
+  <!-- The way out comes first, then what it applies to. KDLS puts the clear link after
+       the count and the dismiss button before it, so the same bar read in two different
+       orders depending on which prop the caller passed. One order: leave, then the count
+       it would leave. -->
+  <div class="sds-bulk-action-bar__identity">
+    <if(isDismiss)>
+      <sds-icon-button variant="neutral" aria-label=dismissLabel onClick=onDismiss>
+        <@icon><${dismissIcon}/></@icon>
+      </sds-icon-button>
+    </if>
+    <else>
+      <sds-button variant="link" label=clearLabel onClick=onClear class="sds-bulk-action-bar__clear"/>
+    </else>
+
+    <!-- Body weight, not title: the count is a fact about the selection, not a heading
+         over the bar. KDLS sets it in titleSm, which makes it shout beside the links. -->
+    <sds-text as="span" variant="bodyMd" class="sds-bulk-action-bar__label" aria-live="polite">
+      ${countLabel}
+    </sds-text>
+  </div>
+
+  <div class="sds-bulk-action-bar__groups">
+    <for|group, i| of=groups>
+      <div class="sds-bulk-action-bar__group">
+        <if(group.groupLabel)>
+          <span class="sds-bulk-action-bar__group-label">${group.groupLabel}</span>
+        </if>
+        <div class="sds-bulk-action-bar__group-actions">
+          <for|action, j| of=(group.actions || [])>
+            <sds-button
+              variant="link"
+              label=action.label
+              onClick=() => component.handleGroupAction(`${i}-${j}`, action)
+              isLoading=(state.group[`${i}-${j}`] || Boolean(action.loading))
+              disabled=action.disabled
+              disabledTooltip=action.disabledTooltip
+              disabledTooltipPosition="top"
+              class="sds-bulk-action-bar__group-button"
+            />
+          </for>
+        </div>
+      </div>
+    </for>
+
+    <for|action, i| of=actions>
+      <sds-button
+        variant="link"
+        label=action.label
+        onClick=() => component.handleGroupAction(`action-${i}`, action)
+        isLoading=(state.group[`action-${i}`] || Boolean(action.loading))
+        disabled=action.disabled
+        disabledTooltip=action.disabledTooltip
+        disabledTooltipPosition="top"
+        class="sds-bulk-action-bar__group-button"
+      />
+    </for>
+
+    <if(secondaryLabel)>
+      <sds-button
+        variant="ghost"
+        label=secondaryLabel
+        onClick=() => component.handleSecondary()
+        isLoading=(state.secondary || secondaryLoading)
+        disabled=secondaryDisabled
+        disabledTooltip=secondaryDisabledTooltip
+        disabledTooltipPosition="top"
+        class="sds-bulk-action-bar__secondary"
+      />
+    </if>
+
+    <if(primaryLabel)>
+      <sds-button
+        variant="primary"
+        label=primaryLabel
+        onClick=() => component.handlePrimary()
+        isLoading=(state.primary || primaryLoading)
+        disabled=primaryDisabled
+        disabledTooltip=primaryDisabledTooltip
+        disabledTooltipPosition="top"
+        class="sds-bulk-action-bar__primary"
+      />
+    </if>
+  </div>
+</section>