@kenlo/sds-design-system 0.9.9

package/components/Card/Card.css

@@ -0,0 +1,391 @@
+/* SDS Card.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Card/Card.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ── Card ──────────────────────────────────────────────────────────────
+   Surface container with header, body, footer and section sub-parts.
+   BEM root: .sds-card
+   ─────────────────────────────────────────────────────────────────── */
+
+.sds-card {
+  position: relative;   /* the hit area is positioned against this */
+  background: var(--component-bg-color);
+  border-radius: var(--radius-md);
+  border: 1px solid transparent;
+  overflow: hidden;
+  transition: box-shadow 120ms ease;
+}
+.sds-card--bordered {
+  border-color: var(--border-static-color);
+}
+.sds-card--bordered.sds-card--hoverable {
+  border-color: var(--border-interactive-color);
+}
+.sds-card--hoverable {
+  cursor: pointer;
+  outline: none;
+}
+.sds-card--hoverable:hover {
+  box-shadow: var(--shadow-drop-md);
+}
+.sds-card--hoverable:active {
+  box-shadow: var(--shadow-drop-sm);
+}
+.sds-card--hoverable:focus-visible {
+  box-shadow: var(--focus-ring);
+}
+/* ── Cover — media/image slot, no padding, bleeds to the card's own radius.
+   Default: top, full width, aspect-ratio fixed at 16/9 (overridden by coverHeight).
+   horizontal: left column, fixed width, fills the row's height — aspect-ratio has
+   no effect there since both dimensions are already explicit. ── */
+.sds-card__cover {
+  position: relative;
+  line-height: 0;
+}
+.sds-card__cover--16-9 {
+  aspect-ratio: 16 / 9;
+}
+.sds-card__cover img {
+  display: block;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+/* Slot positioned at the top-left corner of the cover — badges, tags.
+   Works in both modes because it only depends on the cover's position:relative. */
+.sds-card__cover-badges {
+  position: absolute;
+  top: var(--spacing-4);
+  left: var(--spacing-4);
+  right: var(--spacing-4);
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: var(--spacing-2);
+}
+.sds-card__content {
+  min-width: 0;
+}
+/* ── Horizontal — cover on the left, content column on the right.
+   Width always fixed (296px by default, or coverWidth's value).
+   Height always follows the card (align-items: stretch). ── */
+.sds-card--horizontal {
+  display: flex;
+  align-items: stretch;
+}
+.sds-card--horizontal .sds-card__cover {
+  width: 296px;
+  flex-shrink: 0;
+}
+.sds-card--horizontal .sds-card__content {
+  display: flex;
+  flex-direction: column;
+  flex: 1;
+}
+/* ── Header — column: top row (title/left/right/actions) then subtitle, full-width, own line ── */
+.sds-card__header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0-5);
+  padding: var(--spacing-6);
+  border-bottom: 1px solid var(--border-static-color);
+}
+/* size="sm" — smaller padding (16px), gap doesn't change */
+.sds-card--sm .sds-card__header {
+  padding: var(--spacing-4);
+}
+/* bordered=false — no divider. Only zeroes the bottom padding when there's something after
+   (:not(:last-child)) — alone (Card's only child), keeps full padding,
+   otherwise the header gets cut off at the bottom with no breathing room */
+.sds-card__header--borderless {
+  border-bottom: none;
+}
+.sds-card__header--borderless:not(:last-child) {
+  padding-bottom: 0;
+}
+/* When header is a direct child of the canvas/page — no padding or border */
+.sds-datatable > .sds-card__header {
+  padding: 0;
+  border-bottom: none;
+}
+.sds-card__header-top {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  flex-wrap: wrap;
+  gap: var(--spacing-4);
+}
+.sds-card__header-left-col {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-0-5);
+  flex: 1;
+  min-width: 0;
+}
+.sds-card__header-title-row {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  min-width: 0;
+}
+.sds-card__header-right {
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-4);
+  flex-wrap: wrap;
+}
+/* ── Body ── */
+.sds-card__body {
+  padding: var(--spacing-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+.sds-card--sm .sds-card__body {
+  padding: var(--spacing-4);
+}
+/* ── Footer ── */
+.sds-card__footer {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+  padding: var(--spacing-4) var(--spacing-6);
+  border-top: 1px solid var(--border-static-color);
+}
+.sds-card--sm .sds-card__footer {
+  padding: var(--spacing-4);
+}
+.sds-card__footer--right {
+  flex-direction: row;
+  align-items: center;
+  justify-content: flex-end;
+  gap: var(--spacing-2);
+}
+/* ── Section ── */
+.sds-card__section {
+  border-top: 1px solid var(--border-static-color);
+  padding: var(--spacing-6);
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+.sds-card--sm .sds-card__section {
+  padding: var(--spacing-4);
+}
+/* bordered=false — no divider. Section's border is on top (border-top),
+   the opposite of Header — only zeroes the TOP padding when there's something before
+   (:not(:first-child)) — alone/first child of Card, keeps full padding,
+   otherwise the section gets cut off at the top with no breathing room */
+.sds-card__section--borderless {
+  border-top: none;
+}
+.sds-card__section--borderless:not(:first-child) {
+  padding-top: 0;
+}
+/* ── Info row (label/value pairs) — default 2 columns, columns prop overrides ── */
+.sds-card__info-row {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: var(--spacing-4);
+}
+.sds-card__info-row--3 {
+  grid-template-columns: repeat(3, 1fr);
+}
+.sds-card__info-row--4 {
+  grid-template-columns: repeat(4, 1fr);
+}
+/* A <dl>, which KDLS draws as a <div> — a label beside a value is a description list, and
+   saying so is what makes a screen reader pair them. What came with the element is its
+   default styling: `dl` carries a 1em block margin and `dd` a 40px inline indent, so the
+   pairs sat apart from each other and the value sat pushed off to the right. None of that
+   is the design; it has to be taken back explicitly. */
+.sds-card__info-pair {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  margin: 0;
+  text-align: start;
+}
+
+.sds-card__info-pair dt,
+.sds-card__info-pair dd {
+  margin: 0;
+}
+.sds-card__info-value {
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-medium);
+  color: var(--body-color);
+}
+/* ── Collapsible — hides children by default, reveals via its own trigger ── */
+.sds-card__collapsible {
+  display: flex;
+  flex-direction: column;
+  gap: 0;
+}
+/* Only creates spacing between content and trigger when open — closed, the
+   content area has zero height and this gap would add to Card.Body's external gap,
+   making the space before the button inconsistent between the two states. */
+.sds-card__collapsible:has(.sds-card__collapsible-body-wrap--open) {
+  gap: var(--spacing-4);
+}
+.sds-card__collapsible-body-wrap {
+  display: grid;
+  grid-template-rows: 0fr;
+  transition: grid-template-rows 200ms ease;
+}
+.sds-card__collapsible-body-wrap--open {
+  grid-template-rows: 1fr;
+}
+.sds-card__collapsible-body-clip {
+  overflow: hidden;
+  min-height: 0;
+}
+.sds-card__collapsible-body {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-4);
+}
+/* The trigger reads as the link button KDLS builds it from.
+
+   It is a <summary>, not a <button>, and that stays: <details> gives the keyboard handling
+   and the no-JavaScript fallback for free, which a button and a piece of state do not. But
+   it was inheriting the card's body text — no colour of its own, no hover, no active, and
+   the browser's default outline on focus instead of the system's ring. So the one control
+   in the card that opens something looked like a caption. */
+.sds-card__collapsible-trigger {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: var(--spacing-2);
+  height: 24px;
+  font-size: var(--font-size-title-sm);
+  line-height: var(--lh-title-sm);
+  color: var(--color-primary-50-solid);
+}
+.sds-card__collapsible-trigger:hover {
+  color: var(--color-primary-60-solid);
+  text-decoration: underline;
+  text-underline-offset: 3px;
+}
+.sds-card__collapsible-trigger:active {
+  color: var(--color-primary-70-solid);
+}
+.sds-card__collapsible-trigger:focus-visible {
+  outline: none;
+  box-shadow: var(--focus-ring);
+  border-radius: var(--radius-sm);
+}
+.sds-card__collapsible-trigger--right {
+  justify-content: flex-end;
+}
+
+.sds-card__collapsible:has(.sds-card__collapsible-body-wrap--open) .sds-card__collapsible-trigger .sds-button__icon--right {
+  transform: translateY(1px);
+}
+/* ── Loading skeleton — replaces children entirely while loading is true.
+   Composed of the real Card.Header and Card.Body, each with a Skeleton
+   inside — they inherit padding/border/size automatically, no CSS of their own. ── */
+
+/* ── Accordion modifier ──────────────────────────────────────────────
+   When a Card is used as a borderless accordion container.
+   ─────────────────────────────────────────────────────────────────── */
+.sds-card--accordion {
+  border: none;
+}
+.sds-card--accordion .sds-accordion__header {
+  border-bottom: 1px solid var(--border-static-color);
+  min-height: auto;
+}
+.sds-card--accordion .sds-accordion__body {
+  padding: 0;
+}
+.sds-card--accordion .sds-accordion__body .sds-card__body {
+  padding: var(--spacing-4) var(--spacing-6) var(--spacing-6);
+}
+/* borderless=true — no stroke on header or footer */
+.sds-card--accordion.sds-accordion--borderless .sds-accordion__header {
+  border-bottom: none;
+}
+.sds-card--accordion.sds-accordion--borderless .sds-card__footer {
+  border-top: none;
+}
+
+/* ── Collapsible ───────────────────────────────────────────────────────────────
+   Built on <details>, like sds-accordion, so keyboard handling and the no-JavaScript
+   fallback come from the browser. The label swaps with the open state, which is a pair of
+   spans and a rule rather than a piece of JavaScript.
+
+   --closing wins over [open] so the rows collapse while the element is still open;
+   without it the browser hides the content first and the transition has nothing to move. */
+details.sds-card__collapsible > summary {
+  list-style: none;
+  cursor: pointer;
+}
+
+details.sds-card__collapsible > summary::-webkit-details-marker,
+details.sds-card__collapsible > summary::marker {
+  display: none;
+  content: "";
+}
+
+.sds-card__collapsible-label--hide,
+details.sds-card__collapsible[open] .sds-card__collapsible-label--show {
+  display: none;
+}
+
+details.sds-card__collapsible[open] .sds-card__collapsible-label--hide {
+  display: inline;
+}
+
+details.sds-card__collapsible[open] .sds-card__collapsible-chevron {
+  transform: rotate(180deg);
+}
+
+.sds-card__collapsible-chevron {
+  display: inline-flex;
+  transition: transform 200ms ease;
+}
+
+details.sds-card__collapsible[open]:not(.sds-card__collapsible--closing)
+  > .sds-card__collapsible-body-wrap {
+  grid-template-rows: 1fr;
+}
+
+details.sds-card__collapsible.sds-card__collapsible--closing > .sds-card__collapsible-body-wrap {
+  grid-template-rows: 0fr;
+}
+
+/* ── The click target of a clickable card ──────────────────────────────────────
+   A box over the whole card, beside the content rather than around it — see the
+   reasoning in card.marko. It carries no UA button chrome: SDS ships no element reset,
+   so every component that renders a <button> resets its own.
+
+   The stacking is the whole trick. The hit area sits above the card's own content, so a
+   click anywhere on the card reaches it; anything interactive inside the card sits above
+   the hit area, so a control that has its own answer still gets the click. */
+.sds-card__hit {
+  position: absolute;
+  inset: 0;
+  z-index: 1;
+  appearance: none;
+  border: none;
+  padding: 0;
+  margin: 0;
+  background: transparent;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
+}
+
+.sds-card__hit:focus-visible {
+  /* The system's ring, never the browser's: this is a real <button>, so without the reset
+     Chrome draws its own outline around the whole card on top of the inset ring. */
+  outline: none;
+  border-radius: inherit;
+  box-shadow: var(--focus-ring-inset);
+}
+
+.sds-card:has(.sds-card__hit) :is(a, button, input, select, textarea, summary, [tabindex]):not(.sds-card__hit) {
+  position: relative;
+  z-index: 2;
+}

package/components/Card/card-body.marko

@@ -0,0 +1,5 @@
+<!-- sds-card-body — ported from kdls-design-system v2.5.1 (0f3edf8), Card.Body. -->
+$ const { class: extraClass = "" } = input;
+<div class=`sds-card__body ${extraClass}`.trim()>
+  <${input.renderBody}/>
+</div>

package/components/Card/card-collapsible.marko

@@ -0,0 +1,94 @@
+<!-- sds-card-collapsible — ported from kdls-design-system v2.5.1 (0f3edf8),
+Card.Collapsible.
+
+The one piece of the Card that hydrates, and the reason the Card itself does not: KDLS
+held this state on the Card, so every card paid for it whether it had a collapsible
+section or not. A property listing renders twenty. The state moved here, with the thing
+that uses it.
+
+Same shape as sds-accordion — <details> underneath for keyboard, ARIA and a no-JavaScript
+fallback, with the close intercepted so the transition has something to animate. -->
+
+import { assertAlign } from "./card-variants.js";
+
+class {
+  onCreate() {
+    this.state = { closing: false };
+  }
+
+  handleSummaryClick(event) {
+    const details = this.getEl("root");
+    if (!details.open) return;
+    event.preventDefault();
+    this.state.closing = true;
+  }
+
+  handleTransitionEnd(event) {
+    if (event.propertyName !== "grid-template-rows" || !this.state.closing) return;
+    this.getEl("root").open = false;
+    this.state.closing = false;
+    this.input.onOpenChange?.(false);
+  }
+
+  handleToggle(event) {
+    if (this.state.closing) return;
+    this.input.onOpenChange?.(event.target.open);
+  }
+}
+
+$ {
+  const {
+    showLabel = "Exibir mais",
+    hideLabel = "Exibir menos",
+    // `center`, as in KDLS. With no default the trigger fell to the right, so every
+    // collapsible that did not say otherwise was aligned the opposite way from the one
+    // the design system ships.
+    align = "center",
+    defaultOpen = false,
+    class: extraClass = "",
+  } = input;
+
+  assertAlign(align);
+
+  const classes = [
+    "sds-card__collapsible",
+    state.closing ? "sds-card__collapsible--closing" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+
+  // Centre is the base rule now, so the modifier is the other one. Same two alignments.
+  const triggerClass = [
+    "sds-card__collapsible-trigger",
+    align === "right" ? "sds-card__collapsible-trigger--right" : "",
+  ].filter(Boolean).join(" ");
+}
+
+<details
+  key="root"
+  class=classes
+  open=(defaultOpen || null)
+  on-transitionend("handleTransitionEnd")
+  on-toggle("handleToggle")
+>
+  <summary class=triggerClass on-click("handleSummaryClick")>
+    <span class="sds-card__collapsible-label--show">${showLabel}</span>
+    <span class="sds-card__collapsible-label--hide">${hideLabel}</span>
+    <!-- The chevron can be turned off for a card whose header already says it opens some
+         other way — KDLS's showIcon, which defaults to on. -->
+    <if(input.showIcon !== false)>
+      <span class="sds-card__collapsible-chevron" aria-hidden="true">
+        // 24px, the icon default and KDLS's. It was `sm` (16px), which next to a
+        // title-sm label reads as a different control from every other link button.
+        <sds-icon><fluent-chevron-down-regular/></sds-icon>
+      </span>
+    </if>
+  </summary>
+
+  <div class="sds-card__collapsible-body-wrap">
+    <div class="sds-card__collapsible-body-clip">
+      <div class="sds-card__collapsible-body">
+        <${input.renderBody}/>
+      </div>
+    </div>
+  </div>
+</details>

package/components/Card/card-footer.marko

@@ -0,0 +1,12 @@
+<!-- sds-card-footer — ported from kdls-design-system v2.5.1 (0f3edf8), Card.Footer. -->
+import { assertAlign } from "./card-variants.js";
+
+$ {
+  const { align, class: extraClass = "" } = input;
+  assertAlign(align);
+  const classes = ["sds-card__footer", align === "right" ? "sds-card__footer--right" : "", extraClass]
+    .filter(Boolean).join(" ");
+}
+<div class=classes>
+  <${input.renderBody}/>
+</div>

package/components/Card/card-header.marko

@@ -0,0 +1,30 @@
+<!-- sds-card-header — ported from kdls-design-system v2.5.1 (0f3edf8), where it was
+Card.Header. Title and subtitle render through sds-text, so the card's typography comes
+from the token scale rather than from rules of its own. -->
+
+$ {
+  const { title, subtitle, left, right, bordered = true, class: extraClass = "" } = input;
+  const renderable = (value) => (value && value.renderBody) || value;
+  const classes = ["sds-card__header", bordered ? "" : "sds-card__header--borderless", extraClass]
+    .filter(Boolean).join(" ");
+}
+
+<div class=classes>
+  <div class="sds-card__header-top">
+    <div class="sds-card__header-left-col">
+      <div class="sds-card__header-title-row">
+        <if(left)><${renderable(left)}/></if>
+        <if(title)>
+          <sds-text as="h3" variant="titleSm">${title}</sds-text>
+        </if>
+      </div>
+      <if(subtitle)>
+        <sds-text as="p" variant="bodySm">${subtitle}</sds-text>
+      </if>
+    </div>
+    <if(right)>
+      <div class="sds-card__header-right"><${renderable(right)}/></div>
+    </if>
+  </div>
+  <${input.renderBody}/>
+</div>

package/components/Card/card-info-pair.marko

@@ -0,0 +1,17 @@
+<!-- sds-card-info-pair — ported from kdls-design-system v2.5.1 (0f3edf8), Card.InfoPair.
+
+A <dl> rather than two divs: a label and its value are a description list, which is what
+lets a screen reader read "Quartos, 3" as one fact instead of two loose strings. KDLS used
+plain divs, so the pairing existed only visually. -->
+$ {
+  const { label, value, class: extraClass = "" } = input;
+  if (!label) throw new Error("sds-card-info-pair needs a `label`.");
+  const renderable = (v) => (v && v.renderBody) || v;
+}
+<dl class=`sds-card__info-pair ${extraClass}`.trim()>
+  <dt><sds-text as="span" variant="labelRegular">${label}</sds-text></dt>
+  <dd class="sds-card__info-value">
+    <if(value !== undefined)>${value}</if>
+    <else><${input.renderBody}/></else>
+  </dd>
+</dl>

package/components/Card/card-info-row.marko

@@ -0,0 +1,12 @@
+<!-- sds-card-info-row — ported from kdls-design-system v2.5.1 (0f3edf8), Card.InfoRow.
+A grid of label/value pairs — the "3 quartos · 2 vagas · 128 m²" row of a property card. -->
+import { assertColumns } from "./card-variants.js";
+$ {
+  const { columns = 3, class: extraClass = "" } = input;
+  assertColumns(columns);
+  const classes = ["sds-card__info-row", `sds-card__info-row--${columns}`, extraClass]
+    .filter(Boolean).join(" ");
+}
+<div class=classes>
+  <${input.renderBody}/>
+</div>

package/components/Card/card-section.marko

@@ -0,0 +1,14 @@
+<!-- sds-card-section — ported from kdls-design-system v2.5.1 (0f3edf8), Card.Section.
+A titled block inside a card. The title is an h4 rather than a styled div, so a card with
+several sections gives a screen reader an outline to move through. -->
+$ {
+  const { title, bordered = true, class: extraClass = "" } = input;
+  const classes = ["sds-card__section", bordered ? "" : "sds-card__section--borderless", extraClass]
+    .filter(Boolean).join(" ");
+}
+<section class=classes>
+  <if(title)>
+    <sds-text as="h4" variant="labelSemiBold">${title}</sds-text>
+  </if>
+  <${input.renderBody}/>
+</section>

package/components/Card/card-variants.js

@@ -0,0 +1,24 @@
+/**
+ * The Card vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Card/Card.tsx, where Header,
+ * Body, Footer, Section, InfoRow, InfoPair and Collapsible were sub-components. They are
+ * sibling tags here and nest as ordinary children rather than attribute tags: the card
+ * has nothing to tell them, so there is nothing for it to intercept. Attribute tags are
+ * for a parent that must reach its children — see component-rules.md §2c.
+ */
+export const CARD_SIZES = ['sm', 'md'];
+export const INFO_ROW_COLUMNS = [2, 3, 4];
+export const ALIGNMENTS = ['right', 'center'];
+
+function assertOneOf(label, value, allowed) {
+  if (!allowed.includes(value)) {
+    throw new Error(`Unknown card ${label}: "${value}". Allowed: ${allowed.join(', ')}`);
+  }
+  return value;
+}
+
+export const assertCardSize = (v) => assertOneOf('size', v, CARD_SIZES);
+// `align` is optional in both places that take it, so undefined passes through.
+export const assertAlign = (v) => (v === undefined ? v : assertOneOf('align', v, ALIGNMENTS));
+export const assertColumns = (v) => assertOneOf('columns', v, INFO_ROW_COLUMNS);