@kenlo/sds-design-system 0.9.9

package/components/Badge/badge.marko

@@ -0,0 +1,134 @@
+<!-- sds-badge — ported from kdls-design-system v2.5.1 (0f3edf8) components/Badge/Badge.tsx.
+
+     Divergences:
+
+     1. Colours. `primary`, `secondary`, `tertiary` and `lya` are gone; fourteen remain.
+        `scheme-color` follows the site's own colour and is the one to reach for.
+
+     2. No state, and therefore no click. KDLS's Badge holds useState for one thing:
+        when onClickIconRight returns a Promise it shows a spinner until it settles.
+
+        Measured, not assumed: rendering this template on the server with an on-click
+        handler produces HTML with no hydration script and no handler at all — Marko 5
+        drops the listener silently on a component that does not hydrate. A clickable
+        badge is therefore not free; it must hydrate, and hydrating serialises the whole
+        input, once per instance. Twenty property cards on a listing page would pay it
+        twenty times. That is the mechanism behind the 492 KB payload and the
+        2026-06-12 production OOM.
+
+        So the two are separate tags. <sds-badge> is markup: it renders a right icon as
+        decoration and never listens. <sds-badge-dismissible> hydrates knowingly and
+        carries the full KDLS behaviour, automatic promise spinner included. The
+        consumer chooses, and the choice is visible at the call site.
+
+        This is the precedent for Alert, Avatar, Card and every other component holding
+        state for one small thing.
+
+     3. Icons arrive as attribute tags rather than as props holding instantiated
+        elements — <@icon-left> and <@icon-right> — because Marko passes markup, not
+        element values.
+
+     4. An unknown variant, appearance, size or width throws instead of rendering an
+        unstyled badge. -->
+
+import { assertVariant, assertAppearance, assertSize, assertWidth } from "./badge-variants.js";
+
+$ {
+  const {
+    label,
+    variant = "neutral",
+    appearance = "tone-30",
+    size = "sm",
+    width = "hug",
+    iconLeft,
+    iconRight,
+    iconRightLoading = false,
+    iconRightDisabled = false,
+    class: extraClass = "",
+  } = input;
+
+  // A KDLS Badge always renders its right icon as a dismiss control. Here the split is
+  // deliberate — sds-badge is markup and does not hydrate, sds-badge-dismissible does, and
+  // a listing with forty badges pays that difference forty times. But a straight port of a
+  // KDLS call site landed here, lost its handler, and said nothing: the ✕ rendered, looked
+  // clickable and did nothing. Say so instead, and name the tag that does the job.
+  if (input.onClickIconRight) {
+    throw new Error("sds-badge takes no `onClickIconRight` — it is markup and never hydrates. Use <sds-badge-dismissible>, which does.");
+  }
+
+  assertVariant(variant);
+  assertAppearance(appearance);
+  assertSize(size);
+  assertWidth(width);
+
+
+  // An icon may arrive two ways: as an attribute tag (<@icon-left>…</@icon-left>, which
+  // is the Marko idiom and what a page writes) or as a template value (which is what a
+  // test or a loop passes). Normalising here means callers never have to care.
+  const renderable = (value) => (value && value.renderBody) || value;
+
+  const showSpinner = iconRightLoading && !iconRightDisabled;
+
+  // The label's typography is the Text scale: label-sm at sm, body-sm at md, body-md at
+  // lg. It renders through <sds-text> so that scale lives in one place, and passes
+  // color="inherit" because the badge decides the colour — that is where the contrast
+  // tokens are applied.
+  const labelVariant = { sm: "labelRegular", md: "bodySm", lg: "bodyMd" }[size];
+
+  const badgeClass = [
+    "sds-badge",
+    `sds-badge--${variant}`,
+    `sds-badge--${appearance}`,
+    `sds-badge--${size}`,
+    width === "fill" ? "sds-badge--fill" : "",
+    iconRight ? "sds-badge--has-icon-right" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+
+  const contentClass = ["sds-badge__content", iconRight ? "sds-badge__content--has-icon-right" : ""]
+    .filter(Boolean).join(" ");
+
+  const iconRightClass = [
+    "sds-badge__icon",
+    "sds-badge__icon--right",
+    iconRightDisabled ? "sds-badge__icon--right--disabled" : "",
+    showSpinner ? "sds-badge__icon--right--loading" : "",
+  ].filter(Boolean).join(" ");
+}
+
+<span class=badgeClass>
+  <span class=contentClass>
+    <if(iconLeft)>
+      <span class="sds-badge__icon sds-badge__icon--left" aria-hidden="true">
+        <sds-icon size="sm">
+          <${renderable(iconLeft)}/>
+        </sds-icon>
+      </span>
+    </if>
+    <sds-text as="span" variant=labelVariant color="inherit" class="sds-badge__label">
+      ${label}
+    </sds-text>
+  </span>
+
+  <if(iconRight)>
+    <span class="sds-badge__icon-right-wrap">
+      <span
+        class=iconRightClass
+        aria-busy=(showSpinner ? "true" : null)
+        aria-disabled=(iconRightDisabled ? "true" : null)
+      >
+        // `showSpinner` was computed and then used only to set a wait cursor: the icon
+        // stayed painted, so a loading badge looked exactly like an idle one. The
+        // dismissible sibling has had this branch all along.
+        <if(showSpinner)>
+          <sds-spinner size="sm"/>
+        </if>
+        <else>
+          <sds-icon size="sm">
+            <${renderable(iconRight)}/>
+          </sds-icon>
+        </else>
+      </span>
+    </span>
+  </if>
+</span>

package/components/BottomSheet/BottomSheet.css

@@ -0,0 +1,300 @@
+/* SDS BottomSheet.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/BottomSheet/BottomSheet.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-bottomsheet__searchable-input
+ *//* ============================================================
+   SDS BottomSheet
+   Standalone mobile overlay panel — slides up from bottom
+   BEM root: .sds-bottomsheet / .sds-bottomsheet__list / .sds-bottomsheet__item
+   z-index: 400 (overlay) / 401 (panel)
+   ============================================================ */
+
+/* ── Overlay ── */
+.sds-bottomsheet__overlay {
+  position: fixed;
+  inset: 0;
+  /* Black in both themes. --color-opacity-* inverts, so it would light the screen up in
+     dark mode — which is why KDLS wrote a literal here. */
+  background: var(--color-scrim);
+  z-index: var(--z-overlay);
+  animation: sds-bs-fade 180ms ease;
+}
+/* ── Panel ── */
+.sds-bottomsheet {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  right: 0;
+  box-sizing: border-box;
+  max-height: 80vh;
+  background: var(--component-bg-color);
+  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
+  padding: var(--spacing-3) 0;
+  z-index: calc(var(--z-overlay) + 1);
+  display: flex;
+  flex-direction: column;
+  overflow: hidden;
+  animation: sds-bs-slide 240ms cubic-bezier(0.32, 0.72, 0, 1);
+}
+/* ── Title row — title + close button, always present ── */
+.sds-bottomsheet__title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  flex-shrink: 0;
+  padding: 0 var(--spacing-4);
+}
+.sds-bottomsheet__close {
+  margin-left: auto;
+  flex-shrink: 0;
+}
+/* ── Search (sticky slot — does not scroll with body) ── */
+.sds-bottomsheet__search {
+  flex-shrink: 0;
+  padding: var(--spacing-2) var(--spacing-4);
+  border-bottom: 1px solid var(--border-static-color);
+  /* Allow focus rings on inputs inside to overflow visually */
+  overflow: visible;
+}
+/* ── Header (searchable + select-all — same wrapper/spacing as Select's) ── */
+.sds-bottomsheet__header {
+  flex-shrink: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4);
+  border-bottom: 1px solid var(--border-static-color);
+}
+.sds-bottomsheet__searchable-field {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  height: 40px;
+  padding: 0 var(--spacing-3);
+  border: 1px solid var(--border-interactive-color);
+  border-radius: var(--radius-md);
+  background: var(--component-bg-color);
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+}
+.sds-bottomsheet__searchable-field:hover {
+  border-color: var(--color-primary-50-solid);
+}
+.sds-bottomsheet__searchable-field:focus-within {
+  border-color: var(--color-primary-50-solid);
+  box-shadow: var(--focus-ring);
+}
+.sds-bottomsheet__searchable-icon {
+  display: inline-flex;
+  align-items: center;
+  font-size: 24px;
+  flex-shrink: 0;
+}
+.sds-bottomsheet__searchable-input {
+  flex: 1;
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  color: var(--color-neutral-90);
+  caret-color: var(--color-primary-50-solid);
+  min-width: 0;
+}
+.sds-bottomsheet__searchable-input::placeholder { color: var(--placeholder-color); }
+/* ── Empty state (searchable, no results) ── */
+.sds-bottomsheet__empty {
+  padding: var(--spacing-2) var(--spacing-4);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  color: var(--color-neutral-50);
+  list-style: none;
+  box-sizing: border-box;
+}
+/* ── Body ── */
+.sds-bottomsheet__body {
+  flex: 1;
+  min-height: 0;
+  overflow-y: auto;
+  /* Small vertical padding so focus rings on first/last items aren't clipped */
+  padding: var(--spacing-1) 0;
+}
+/* ── Footer ── */
+.sds-bottomsheet__footer {
+  flex-shrink: 0;
+  border-top: 1px solid var(--border-static-color);
+  padding: var(--spacing-3) var(--spacing-4);
+}
+/* Limpar + Aplicar, when the footer is the automatic one (clearable/multiple) — Limpar on the left, Aplicar on the right */
+.sds-bottomsheet__footer-actions {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--spacing-3);
+}
+/* The panel already reserves its own padding-bottom (spacing-4) — when the automatic footer
+   is present, the footer's own padding-bottom becomes duplicated space below the buttons */
+.sds-bottomsheet__footer:has(.sds-bottomsheet__footer-actions) {
+  padding-bottom: 0;
+}
+/* ── List ── */
+.sds-bottomsheet__list {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+}
+/* ── Item ── */
+.sds-bottomsheet__item {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: var(--spacing-2) var(--spacing-3);
+  min-height: 40px;
+  cursor: pointer;
+  color: var(--color-neutral-80);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-regular);
+  line-height: var(--lh-body-md);
+  border-radius: 11px;  /* soft, the install default — schemes at the end */
+  margin: 0 var(--spacing-1);
+  transition: background-color 120ms ease, color 120ms ease;
+  user-select: none;
+  box-sizing: border-box;
+}
+.sds-bottomsheet__item:hover {
+  background-color: var(--color-opacity-05);
+}
+.sds-bottomsheet__item:focus {
+  outline: none;
+}
+.sds-bottomsheet__item:focus-visible {
+  outline: none;
+  background-color: var(--color-opacity-08);
+  box-shadow: var(--focus-ring-inset);
+}
+.sds-bottomsheet__item:active {
+  background-color: var(--color-opacity-10);
+}
+.sds-bottomsheet__item--active {
+  background-color: transparent;
+  color: var(--color-neutral-90);
+  font-weight: var(--font-weight-bold);
+}
+.sds-bottomsheet__item--active:hover {
+  background-color: var(--color-opacity-05);
+}
+.sds-bottomsheet__item--disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+}
+/* ── Item slots ── */
+.sds-bottomsheet__item-label {
+  flex: 1;
+  white-space: nowrap;
+}
+.sds-bottomsheet__item-checkbox {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.sds-bottomsheet__item-icon-left {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: inherit;
+}
+.sds-bottomsheet__item-check {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  color: var(--color-neutral-90);
+  margin-left: auto;
+}
+/* ── Animations ── */
+@keyframes sds-bs-fade {
+  from { opacity: 0; }
+  to   { opacity: 1; }
+}
+@keyframes sds-bs-slide {
+  from { transform: translateY(100%); }
+  to   { transform: translateY(0); }
+}
+/* ── Dark mode ── */
+[data-theme="dark"] .sds-bottomsheet__search {
+  border-bottom-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-bottomsheet__header {
+  border-bottom-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-bottomsheet__searchable-field {
+  border-color: var(--border-interactive-color);
+}
+[data-theme="dark"] .sds-bottomsheet__footer {
+  border-top-color: var(--border-interactive-color);
+}
+
+
+/* Native chrome reset for the option rows.
+   KDLS draws each option as an <li> with a mousedown handler: not focusable, not
+   activatable by keyboard, and invisible to anything that looks for controls. SDS renders
+   a real <button> inside the <li>, and this is what takes the browser's own styling off —
+   without it the list renders as a column of OS push-buttons, which is measured and
+   documented in Select.css. */
+.sds-bottomsheet__item-button {
+  appearance: none;
+  border: 0;
+  background: none;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  width: 100%;
+  padding: 0;
+}
+
+.sds-bottomsheet__item-button:disabled {
+  cursor: not-allowed;
+}
+
+/* "Selecionar todos". It used to borrow `__header`, which is the sheet's title bar — 16px
+   all round, laid out for a title and a close button. Its own rule now, so the two can
+   change independently. */
+.sds-bottomsheet__select-all {
+  padding: var(--spacing-2) var(--spacing-4);
+  border-bottom: 1px solid var(--border-static-color);
+}
+
+/* A section heading inside the list. It used to borrow `__header`, which is a 16px-padded
+   flex column with a bottom border — the container the search box sits in, not a label. */
+.sds-bottomsheet__section {
+  padding: var(--spacing-3) var(--spacing-4) var(--spacing-1);
+  font-size: var(--font-size-label-sm);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-neutral-60);
+}
+
+/* ── Corner radius: the 40px family ───────────────────────────────────────────
+   A row in a menu, a select or a dropdown is 40px tall, which makes it the same control
+   as the Pill and the navButton — so it takes the same four values. Rafael, pointing at
+   the theme bar's own menu: these are reactive, but not in the right way; they should be
+   40px like the navButton and have the radius resolved here.
+
+       height 40px    flat 0    soft 11px    medium 15px    rounded 20px (a capsule)
+       as a fraction  0         0.275        0.375          0.5
+
+   `--radius-sm` was what they had, and it tops out at 16px — so `rounded` drew a rounded
+   rectangle where every other 40px control in the system drew a capsule. See Pill.css for
+   the arithmetic; the numbers are a fraction of the control's own height, which is what
+   keeps the family reading as one thing.
+
+   The bare value is `soft`'s, because an install that never picks a scheme has no
+   attribute at all and falls through to it. */
+[data-radius="flat"] .sds-bottomsheet__item { border-radius: 0; }
+[data-radius="soft"] .sds-bottomsheet__item { border-radius: 11px; }
+[data-radius="medium"] .sds-bottomsheet__item { border-radius: 15px; }
+[data-radius="rounded"] .sds-bottomsheet__item { border-radius: var(--radius-full); }