@kenlo/sds-design-system 0.9.9

package/components/Select/select.marko

@@ -0,0 +1,449 @@
+<!-- sds-select — ported from kdls-design-system v2.5.1 (0f3edf8) components/Select/Select.tsx.
+
+The component Rafael's build order was aiming at: it mirrors Input's field, the Menu's
+trigger and the Menu's floating list, which is why those three came first.
+
+Divergences, each with its reason:
+
+No Floating. KDLS positions the panel by measuring the trigger in JavaScript. On a
+server-rendered page that means the panel only learns where to sit after hydration, and a
+panel that learns late is a panel that jumps. The list sits below the field, which CSS can
+do — the same choice already made for Menu, and the same one that grows into Popover's
+collision detection later.
+
+No BottomSheet. On a narrow screen KDLS swaps the dropdown for a sheet sliding up from the
+bottom. That is a real improvement on a phone and it needs BottomSheet, which is not
+ported. Until it is, a phone gets the same dropdown a desktop gets — worse, but honest,
+and recorded rather than quietly dropped.
+
+Options arrive four ways and leave as one: plain strings, label/value objects, objects
+under caller-chosen key names, or attribute tags. A select built from an API response and
+one written out by hand are both real, and KDLS supported both.
+
+Search ignores case AND accents, so "sao" finds "São Paulo". KDLS compared lowercased
+strings only, which fails on exactly the words a Brazilian visitor types without accents. -->
+
+import { normaliseOptions, filterOptions, toArray, toggleValue, isSelected,
+  displayLabel, pillLabel, hiddenChoiceCount, widestLabel, selectableValues, selectAllState,
+  assertTrigger, assertWidth }
+  from "./select-options.js";
+import { assertFeedback as assertInputFeedback } from "../Input/input-types.js";
+import chevronIcon from "../../icons/generated/fluent-chevron-down-regular.marko";
+import clearIcon from "../../icons/generated/fluent-dismiss-regular.marko";
+
+class {
+  onCreate(input) {
+    this.state = {
+      open: false,
+      query: "",
+      value: input.value ?? input.defaultValue ?? (input.multiple ? [] : undefined),
+    };
+  }
+
+  /** sds-floating owns opening, closing and closing-on-outside-click; this follows it. */
+  setOpen(next) {
+    if (this.input.disabled) return;
+    this.state.open = next;
+    if (!next) this.state.query = "";
+    if (next) this.wantsFocus = true;
+  }
+
+  /**
+   * An opened list puts the caret where the next keystroke belongs: the search box when
+   * there is one, the list itself otherwise, so the arrow keys work without a click.
+   *
+   * On update rather than on open, because the panel does not exist yet at the moment the
+   * state changes.
+   */
+  onUpdate() {
+    if (!this.wantsFocus || !this.state.open) return;
+    this.wantsFocus = false;
+
+    const panel = this.getEl("panel");
+    if (!panel) return;
+
+    (panel.querySelector("input") ?? panel.querySelector("[role='listbox']"))?.focus();
+  }
+
+  get currentValue() {
+    return this.input.value !== undefined ? this.input.value : this.state.value;
+  }
+
+  get options() {
+    return normaliseOptions(this.input);
+  }
+
+  /** The rows the reader can actually see — the same filter the render applies. */
+  get visibleOptions() {
+    const all = this.options;
+    return this.input.filterOption === false ? all : filterOptions(all, this.state.query);
+  }
+
+  togglePanel() {
+    this.setOpen(!this.state.open);
+  }
+
+  closePanel() {
+    this.state.open = false;
+    this.state.query = "";
+  }
+
+  commit(next) {
+    if (this.input.value === undefined) this.state.value = next;
+    this.input.onChange?.(next);
+  }
+
+  choose(option, event) {
+    if (option.disabled) {
+      event?.preventDefault();
+      return;
+    }
+
+    if (this.input.multiple) {
+      this.commit(toggleValue(this.currentValue, option.value));
+      // A multiple select stays open: choosing one thing usually means choosing another.
+      return;
+    }
+
+    this.commit(option.value);
+    this.closePanel();
+  }
+
+  /**
+   * "Selecionar todos" — todos of what is on screen.
+   *
+   * It read every option and replaced the whole selection with them, so with a search
+   * active it selected rows the reader could not see and threw away the ones they had
+   * already chosen outside the filter. Ticking a box should never remove a choice.
+   *
+   * So: the visible rows are what it acts on, and it merges rather than replaces. Ticking
+   * adds them to what is already chosen; unticking removes only them.
+   */
+  toggleAll() {
+    const visible = selectableValues(this.visibleOptions);
+    const current = Array.isArray(this.currentValue) ? this.currentValue : [];
+    const { checked } = selectAllState(this.visibleOptions, this.currentValue);
+    this.commit(checked
+      ? current.filter((value) => !visible.includes(value))
+      : [...current, ...visible.filter((value) => !current.includes(value))]);
+  }
+
+  /**
+   * Empty the selection.
+   *
+   * Three things were wrong here. It took an `event` and called `stopPropagation` on it,
+   * while one of its two call sites passes none — clicking the pill's ✕ threw a TypeError
+   * instead of clearing. It reported `undefined` for a single select, which is "no opinion"
+   * rather than "cleared", and a controlled caller could not tell the two apart; KDLS
+   * reports `null`. And it left the panel open, so clearing from the trigger dropped you
+   * into a list you had not asked to see.
+   */
+  clear(event) {
+    event?.stopPropagation();
+    this.commit(this.input.multiple ? [] : null);
+    this.closePanel();
+  }
+
+  handleSearch(event) {
+    this.state.query = event.target.value;
+    this.input.onSearch?.(event.target.value);
+  }
+
+  handleKey(event) {
+    if (event.key === "Escape") {
+      event.preventDefault();
+      this.closePanel();
+      this.getEl("trigger")?.focus();
+      return;
+    }
+    if (!this.state.open && (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      this.state.open = true;
+    }
+  }
+}
+
+$ {
+  const {
+    label,
+    placeholder = "Selecione",
+    trigger = "pill",
+    width = "hug",
+    multiple = false,
+    searchable = false,
+    searchPlaceholder = "Digite para buscar...",
+    clearable = true,
+    showSelectAll = false,
+    selectAllLabel = "Selecionar todos",
+    loading = false,
+    disabled = false,
+    required = false,
+    feedback = "none",
+    hint,
+    emptyMessage = "Nenhuma opção",
+    name,
+    // `component.id`, not a random string. Marko gives every stateful component an id that
+    // is the same on the server and in the browser; `Math.random()` inside the render block
+    // produced a different one on each side, so `aria-controls`, `aria-labelledby` and
+    // `aria-describedby` all pointed at elements that did not exist after hydration — and
+    // it changed again on every re-render.
+    id = `sds-select-${component.id}`,
+    class: extraClass = "",
+  } = input;
+
+  if (!label) throw new Error("sds-select needs a `label`.");
+  assertTrigger(trigger);
+  assertWidth(width);
+  // The feedback reaches the Input underneath, so it is the Input's vocabulary.
+  assertInputFeedback(feedback);
+
+  const open = state.open;
+  const value = component.currentValue;
+  const allOptions = component.options;
+  // `filterOption: false` hands filtering to the caller, for a search that hits a server.
+  const visible = input.filterOption === false ? allOptions : filterOptions(allOptions, state.query);
+
+  const selectedCount = toArray(value).length;
+  const text = displayLabel(allOptions, value, { placeholder });
+  // Reads the visible rows, because that is what ticking it will act on. Reading the whole
+  // list made the box say "all chosen" while the filtered rows in front of you were not.
+  const allState = selectAllState(visible, value);
+
+  const chipLabel = pillLabel(allOptions, value, { label });
+  // Reserved so the trigger never changes width when the choice changes. A control that
+  // resizes as you use it makes everything beside it in the toolbar jump.
+  const widest = widestLabel(allOptions, trigger === "pill" ? label : placeholder);
+  const hiddenChoices = multiple ? hiddenChoiceCount(value) : 0;
+  const hasValue = selectedCount > 0;
+
+  const listboxId = `${id}-listbox`;
+  const hintId = hint ? `${id}-hint` : null;
+
+  const wrapperClass = [
+    "sds-select-wrapper",
+    `sds-select-wrapper--${width}`,
+    open ? "sds-select-wrapper--open" : "",
+    disabled ? "sds-select-wrapper--disabled" : "",
+    loading ? "sds-select-wrapper--loading" : "",
+    trigger === "input" ? "sds-select-wrapper--trigger-input" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<div key="root" class=wrapperClass>
+  <!-- The panel floats; it does not sit in the flow. A dropdown that takes space pushes
+       everything below it down when it opens, which is the one thing a dropdown must never
+       do — KDLS wraps this in Floating for exactly that reason, and the rule for
+       .sds-select-wrapper--fill .sds-floating was carried over here before the component
+       existed to match it.
+
+       Controlled: sds-floating decides when to open and reports it, the Select keeps the
+       state because the rest of the component — the query, the keyboard, the value — is
+       already hung off it. -->
+  <sds-floating
+    placement="bottomLeft"
+    trigger="click"
+    gap=4
+    matchTriggerWidth=(trigger === "input")
+    open=open
+    onOpenChange=(next) => component.setOpen(next)
+  >
+  <if(trigger === "input")>
+    <div class="sds-select-input-wrap">
+      <sds-input
+        role="combobox"
+        aria-haspopup="listbox"
+        aria-expanded=(open ? "true" : "false")
+        aria-controls=(open ? listboxId : null)
+        label=label
+        value=text
+        placeholder=placeholder
+        disabled=disabled
+        required=required
+        feedback=feedback
+        hint=hint
+        isLoading=loading
+        width=width
+        readOnly
+        name=name
+        id=id
+      >
+        <@icon-right><fluent-chevron-down-regular/></@icon-right>
+      </sds-input>
+    </div>
+  </if>
+  <else-if(trigger === "pill")>
+    <!-- A chip, not a field: the filter row of a listing rather than a form. The pill is a
+         real <button>, and telling it that it opens a listbox is what stops it announcing
+         itself as a pressed switch — KDLS renders this trigger with no aria-haspopup and
+         no aria-expanded at all, so a screen reader is told it is a toggle. -->
+    <!-- No `active`. A pill has two jobs and they colour differently: as a filter you
+         toggle, being on is a state of the data and `--on` fills it with the theme's
+         colour; as the trigger of a list, being open or holding a value is a state of
+         the control, and filling it would say the filter is applied when it is only the
+         thing you press. KDLS passes `active` to a Pill in Pagination — where the pill
+         IS the current page — and nowhere else. -->
+    <sds-pill
+      key="trigger"
+      label=chipLabel
+      width=width
+      iconLeft=input.iconLeft
+      iconRight=(hasValue && clearable ? clearIcon : chevronIcon)
+      onClickIconRight=(hasValue && clearable ? () => component.clear() : undefined)
+      iconRightLabel=(hasValue && clearable ? "Limpar seleção" : undefined)
+      showNotification=(hiddenChoices > 0)
+      notificationCount=(hiddenChoices > 0 ? hiddenChoices : undefined)
+      isLoading=loading
+      disabled=disabled
+      aria-haspopup="listbox"
+      aria-expanded=(open ? "true" : "false")
+      aria-controls=(open ? listboxId : null)
+      aria-describedby=hintId
+    />
+  </else-if>
+  <else>
+    <button
+      key="trigger"
+      type="button"
+      class=`sds-select__trigger--nav ${open ? "sds-select-wrapper--open" : ""}`.trim()
+      disabled=(disabled || null)
+      aria-expanded=(open ? "true" : "false")
+      aria-haspopup="listbox"
+      aria-controls=(open ? listboxId : null)
+      aria-describedby=hintId
+      aria-labelledby=`${id}-name ${id}-value`
+      on-keydown("handleKey")
+    >
+      <!-- The visible content of this trigger is the *value*, not the name: a screen
+           reader met "20, collapsed button" and had no way to know what 20 was. An
+           aria-label would fix the name and lose the value, so both are pointed at. -->
+      <span id=`${id}-name` class="sds-visually-hidden">${label}</span>
+      <span id=`${id}-value` class="sds-select__trigger-nav-label" data-widest=widest>${text}</span>
+      <span class="sds-select__trigger-nav-chevron" aria-hidden="true">
+        <sds-icon size="sm"><fluent-chevron-down-regular/></sds-icon>
+      </span>
+    </button>
+  </else>
+
+  <!-- Not for the pill: that trigger carries its own clear affordance in its right icon,
+       and two controls with the same name is a screen reader reading "Limpar seleção,
+       button" twice for one action. -->
+  <if(trigger !== "pill" && clearable && selectedCount > 0 && !disabled)>
+    <button type="button" class="sds-select__clear" aria-label="Limpar seleção" on-click("clear")>
+      <sds-icon size="sm"><fluent-dismiss-regular/></sds-icon>
+    </button>
+  </if>
+
+    <@content>
+      <div key="panel" class="sds-select__menu" on-keydown("handleKey")>
+      <if(searchable)>
+        <div class="sds-select__header">
+          <div class="sds-select__search-field">
+            <span class="sds-select__search-icon" aria-hidden="true">
+              <sds-icon size="sm"><fluent-search-regular/></sds-icon>
+            </span>
+            <input
+              class="sds-select__search-input"
+              type="search"
+              value=state.query
+              placeholder=searchPlaceholder
+              aria-label=searchPlaceholder
+              aria-controls=listboxId
+              on-input("handleSearch")
+            />
+          </div>
+        </div>
+      </if>
+
+      <if(multiple && showSelectAll && visible.length)>
+        // The listener is on the wrapper, not on the checkbox. `sds-checkbox` is markup —
+        // it does not hydrate and emits nothing, so `on-click` on the tag itself was
+        // waiting for a component event that is never sent: the box ticked natively and
+        // nothing happened. The native `change` bubbles, so the wrapper hears it.
+        <div class="sds-select__header" on-change("toggleAll")>
+          <sds-checkbox
+            label=selectAllLabel
+            size="sm"
+            checked=allState.checked
+            indeterminate=allState.indeterminate
+          />
+        </div>
+      </if>
+
+      <ul
+        class="sds-select__list sds-scroll sds-scroll--thin"
+        id=listboxId
+        role="listbox"
+        aria-label=label
+        aria-multiselectable=(multiple ? "true" : null)
+        // Focusable, not tabbable: an opened list with no search box takes the caret so
+        // the arrow keys work without a click, and the tab order is unchanged.
+        tabindex="-1"
+      >
+        <if(loading)>
+          <li class="sds-select__loading"><sds-spinner size="sm" label="Carregando opções"/></li>
+        </if>
+        <else-if(!visible.length)>
+          <li class="sds-select__empty">${emptyMessage}</li>
+        </else-if>
+
+        <for|option| of=(loading ? [] : visible)>
+          <if(option.section)>
+            <li class="sds-select__section-header" role="presentation">${option.label}</li>
+          </if>
+          <else>
+            <li role="none">
+              <button
+                type="button"
+                class=`sds-select__option ${isSelected(value, option.value) ? "sds-select__option--selected" : ""}`.trim()
+                role="option"
+                aria-selected=(isSelected(value, option.value) ? "true" : "false")
+                disabled=(option.disabled || null)
+                on-click("choose", option)
+              >
+                <if(multiple)>
+                  <sds-checkbox size="sm" checked=isSelected(value, option.value)/>
+                </if>
+                <if(option.icon)>
+                  <span class="sds-select__option-icon" aria-hidden="true">
+                    <!-- `iconProps` because Marko has no pre-instantiated element. KDLS
+                         passes `icon={<RadiusCornerIcon r={r} />}` — a React element that
+                         already carries its props — and the nearest thing here is the
+                         template plus the props to render it with. Same shape of
+                         translation as children becoming attribute tags. -->
+                    <sds-icon size="sm">
+                      <${(option.icon && option.icon.renderBody) || option.icon} ...(option.iconProps ?? {})/>
+                    </sds-icon>
+                  </span>
+                </if>
+                <span>
+                  <if(option.renderBody)><${option.renderBody}/></if>
+                  <else>${option.label}</else>
+                </span>
+              </button>
+            </li>
+          </else>
+        </for>
+      </ul>
+      </div>
+    </@content>
+  </sds-floating>
+
+  <if(hint && trigger !== "input")>
+    <!-- The pill and the nav button point `aria-describedby` at this. They were pointing at
+         it before it existed: only the input trigger renders a hint, through sds-input, so
+         on the other two the reference dangled and the reader was told nothing. A dangling
+         reference is worse than none — it says there is a description and then has none. -->
+    <sds-text as="span" id=hintId variant="labelRegular" class="sds-select__hint">
+      ${hint}
+    </sds-text>
+  </if>
+
+  <if(name)>
+    <!-- The value a form submits. The trigger is a button or a read-only field, neither of
+         which posts anything on its own. -->
+    <for|chosen| of=toArray(value)>
+      <input type="hidden" name=(multiple ? `${name}[]` : name) value=chosen/>
+    </for>
+  </if>
+</div>

package/components/Separator/Separator.css

@@ -0,0 +1,22 @@
+/* SDS Separator.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Separator/Separator.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ============================================================
+   SDS Separator
+   Orientations: horizontal | vertical
+   ============================================================ */
+
+.sds-separator {
+  border: none;
+  margin: 0;
+  background-color: var(--color-neutral-20);
+  flex-shrink: 0;
+}
+.sds-separator--horizontal {
+  width: 100%;
+  height: 1px;
+}
+.sds-separator--vertical {
+  width: 1px;
+  height: 100%;
+}

package/components/Separator/separator.marko

@@ -0,0 +1,14 @@
+<!-- sds-separator — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/Separator/Separator.tsx.
+
+An <hr>, which already means "thematic break" to a screen reader. No state, no behaviour. -->
+
+$ {
+  const { orientation = "horizontal", class: extraClass = "" } = input;
+  if (orientation !== "horizontal" && orientation !== "vertical") {
+    throw new Error(`Unknown separator orientation: "${orientation}". Allowed: horizontal, vertical`);
+  }
+}
+
+<hr class=`sds-separator sds-separator--${orientation} ${extraClass}`.trim()
+  aria-orientation=orientation/>

package/components/Skeleton/Skeleton.css

@@ -0,0 +1,100 @@
+/* SDS Skeleton.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Skeleton/Skeleton.css
+   by scripts/port-css.mjs. Divergences beyond the mechanical rename are noted inline.
+ *//* ── Skeleton ──────────────────────────────────────────────────────────
+   Loading placeholder — title/paragraph block, with optional avatar,
+   plus the standalone blocks Skeleton.Avatar/Button/Input/Image.
+   BEM root: .sds-skeleton
+   ─────────────────────────────────────────────────────────────────── */
+
+.sds-skeleton {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--spacing-4);
+}
+.sds-skeleton__content {
+  flex: 1;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-2);
+}
+/* ── Blocks — base color, overridden by --active (see end of file) ── */
+.sds-skeleton__avatar,
+.sds-skeleton__button,
+.sds-skeleton__input,
+.sds-skeleton__image,
+.sds-skeleton__line {
+  background: var(--color-neutral-10);
+}
+/* ── Avatar — always round, no shape prop ── */
+.sds-skeleton__avatar {
+  border-radius: var(--radius-full);
+  flex-shrink: 0;
+}
+.sds-skeleton__avatar--sm { width: var(--spacing-10); height: var(--spacing-10); }
+.sds-skeleton__avatar--md { width: var(--spacing-12); height: var(--spacing-12); }
+.sds-skeleton__avatar--lg { width: var(--spacing-14); height: var(--spacing-14); }
+/* ── Title/paragraph lines ── */
+.sds-skeleton__line {
+  width: 100%;
+  height: var(--spacing-4);
+  border-radius: var(--radius-sm);
+}
+.sds-skeleton__line--title {
+  width: 40%;
+  height: var(--spacing-5);
+}
+.sds-skeleton__line--last {
+  width: 60%;
+}
+/* ── Button — fixed width (there's no label to measure), project radius.
+   Heights match the real Button: sm = variant="pill" (40px), md = default (48px),
+   lg = variant="lg" (56px). 120px is hardcoded — the spacing scale stops at
+   --spacing-16 (64px), no token reaches that far. ── */
+.sds-skeleton__button {
+  width: 120px;
+  border-radius: var(--radius-md);
+}
+.sds-skeleton__button--sm { height: var(--spacing-10); }
+.sds-skeleton__button--md { height: var(--spacing-12); }
+.sds-skeleton__button--lg { height: var(--spacing-14); }
+/* ── Input — fluid width (form field), project radius.
+   lg (56px) is the default — matches the real Input's fixed height, which has no
+   size prop. sm/md are available to represent more compact fields. ── */
+.sds-skeleton__input {
+  width: 100%;
+  border-radius: var(--radius-md);
+}
+.sds-skeleton__input--sm { height: var(--spacing-10); }
+.sds-skeleton__input--md { height: var(--spacing-12); }
+.sds-skeleton__input--lg { height: var(--spacing-14); }
+/* ── Image — fixed block with a centered icon, never round, project radius.
+   fill=true swaps the fixed size for 100%/100% — use when the real container
+   (e.g. a Card's cover) has a variable size. ── */
+.sds-skeleton__image {
+  width: var(--spacing-16);
+  height: var(--spacing-16);
+  flex-shrink: 0;
+  border-radius: var(--radius-md);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--color-neutral-30);
+}
+.sds-skeleton__image--fill {
+  width: 100%;
+  height: 100%;
+}
+/* ── active — shimmer sweeping across the block. Same specificity as the base color;
+   needs to come later in the file to win the cascade (same weight, same
+   source order). ── */
+@keyframes sds-skeleton-shimmer {
+  0%   { background-position: 100% 50%; }
+  100% { background-position: 0 50%; }
+}
+.sds-skeleton--active {
+  background: linear-gradient(90deg, var(--color-neutral-10) 25%, var(--color-neutral-20) 37%, var(--color-neutral-10) 63%);
+  background-size: 400% 100%;
+  animation: sds-skeleton-shimmer 1.4s ease infinite;
+}

package/components/Skeleton/skeleton-avatar.marko

@@ -0,0 +1,28 @@
+<!-- sds-skeleton-avatar — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/Skeleton/Skeleton.tsx, where this was Skeleton.Avatar.
+
+A sibling tag rather than a nested one: it shares nothing with sds-skeleton but a
+stylesheet, so nesting would be a namespace, not a relationship.
+
+The circle already existed here — `sds-skeleton` draws one when `avatar` is set, and the
+stylesheet has carried `.sds-skeleton__avatar` since the port. What was missing was the
+standalone tag, so a caller who wanted the circle beside something that is not a
+title-and-paragraph block had no way to ask for it. Always round, like the real Avatar,
+and the only one of these with no shape of its own to choose. -->
+
+import { assertSkeletonSize } from "./skeleton-variants.js";
+
+$ {
+  const { size = "md", active = true, class: extraClass = "" } = input;
+  assertSkeletonSize(size);
+
+  const classes = [
+    "sds-skeleton",
+    active ? "sds-skeleton--active" : "",
+    "sds-skeleton__avatar",
+    `sds-skeleton__avatar--${size}`,
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<span class=classes aria-hidden="true"/>

package/components/Skeleton/skeleton-button.marko

@@ -0,0 +1,22 @@
+<!-- sds-skeleton-button — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/Skeleton/Skeleton.tsx, where this was Skeleton.Button.
+
+A sibling tag rather than a nested one: it shares nothing with sds-skeleton but a
+stylesheet, so nesting would be a namespace, not a relationship. -->
+
+import { assertSkeletonSize } from "./skeleton-variants.js";
+
+$ {
+  const { size = "md", active = true, class: extraClass = "" } = input;
+  assertSkeletonSize(size);
+
+  const classes = [
+    "sds-skeleton",
+    active ? "sds-skeleton--active" : "",
+    "sds-skeleton__button",
+    `sds-skeleton__button--${size}`,
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<span class=classes aria-hidden="true"/>

package/components/Skeleton/skeleton-image.marko

@@ -0,0 +1,20 @@
+<!-- sds-skeleton-image — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/Skeleton/Skeleton.tsx, where this was Skeleton.Image.
+
+A sibling tag rather than a nested one: it shares nothing with sds-skeleton but a
+stylesheet, so nesting would be a namespace, not a relationship. -->
+
+$ {
+  // No `size`: an image skeleton is either its fixed block or the whole of its parent.
+  const { fill = false, active = true, class: extraClass = "" } = input;
+
+  const classes = [
+    "sds-skeleton",
+    active ? "sds-skeleton--active" : "",
+    "sds-skeleton__image",
+    fill ? "sds-skeleton__image--fill" : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<span class=classes aria-hidden="true"/>

package/components/Skeleton/skeleton-input.marko

@@ -0,0 +1,22 @@
+<!-- sds-skeleton-input — ported from kdls-design-system v2.5.1 (0f3edf8)
+components/Skeleton/Skeleton.tsx, where this was Skeleton.Input.
+
+A sibling tag rather than a nested one: it shares nothing with sds-skeleton but a
+stylesheet, so nesting would be a namespace, not a relationship. -->
+
+import { assertSkeletonSize } from "./skeleton-variants.js";
+
+$ {
+  const { size = "md", active = true, class: extraClass = "" } = input;
+  assertSkeletonSize(size);
+
+  const classes = [
+    "sds-skeleton",
+    active ? "sds-skeleton--active" : "",
+    "sds-skeleton__input",
+    `sds-skeleton__input--${size}`,
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<span class=classes aria-hidden="true"/>