@kenlo/sds-design-system 0.9.9

package/components/SearchBar/SearchBar.css

@@ -0,0 +1,181 @@
+/* SDS SearchBar.
+   Ported from kdls-design-system v2.5.1 (0f3edf8) components/Field/Field.css — the shell.
+   KDLS's own SearchBar.css adds only the suggestions panel, which lands here in Phase 2.
+   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-search-bar__input
+     [data-color-scheme="lya"] .sds-search-bar:focus-within
+ *//* ══════════════════════════════════════════════════════════════════════════
+   SEARCH BAR — the field shell (Input has its own; see the component header)
+   Structure mirrored from Input: flex row (gap + padding), 24px icons
+   as children, floating label or placeholder.
+   Sizes: lg 56px · md 48px · sm 40px
+   ══════════════════════════════════════════════════════════════════════════ */
+
+.sds-search-bar {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-3);
+  padding: 0 var(--spacing-4);
+  border: 1px solid var(--border-interactive-color);
+  border-radius: var(--radius-md);
+  background-color: var(--component-bg-color);
+  transition: border-color 120ms ease, box-shadow 120ms ease;
+  cursor: text;
+  box-sizing: border-box;
+}
+/* ── Heights ── */
+.sds-search-bar--lg { height: 56px; min-height: 56px; }
+.sds-search-bar--md { height: 48px; min-height: 48px; }
+.sds-search-bar--sm { height: 40px; min-height: 40px; }
+/* ── Hover / Focus ── */
+.sds-search-bar:hover:not(:focus-within):not(.sds-search-bar--disabled) {
+  border-color: var(--color-primary-50-solid);
+}
+.sds-search-bar:focus-within {
+  border-color: var(--color-primary-50-solid);
+  box-shadow: var(--focus-ring);
+}
+/* ── Feedback ── */
+.sds-search-bar--feedback-success { border-color: var(--color-success-50); }
+.sds-search-bar--feedback-alert   { border-color: var(--color-alert-50); }
+.sds-search-bar--feedback-error   { border-color: var(--color-error-50); }
+.sds-search-bar--feedback-success:focus-within,
+.sds-search-bar--feedback-alert:focus-within,
+.sds-search-bar--feedback-error:focus-within {
+  box-shadow: var(--focus-ring);
+}
+/* ── Icons (flex children, 24px) ── */
+.sds-search-bar__icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 24px;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  color: var(--color-neutral-90);
+}
+/* KDLS styled a bare <button> here. SDS renders sds-icon-button instead — a handler in
+   this template would make Marko serialise every field on the page — so the icon slot only
+   has to make room for it. */
+.sds-search-bar__icon--right:has(.sds-icon-button) {
+  width: auto;
+  height: auto;
+}
+/* ── Spinner (loading, in place of iconRight) ── */
+.sds-search-bar__spinner {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  color: var(--color-neutral-50);
+}
+/* ── The field itself (label + control) ── */
+.sds-search-bar__field {
+  flex: 1;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  min-width: 0;
+}
+.sds-search-bar--lg .sds-search-bar__field { min-height: 52px; }
+/* Invisible spacer — same technique as Input (hug grows with the label) */
+.sds-search-bar__field::before {
+  content: attr(data-label);
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-regular);
+  white-space: nowrap;
+  display: block;
+  height: 0;
+  overflow: hidden;
+  visibility: hidden;
+  pointer-events: none;
+}
+/* ── Controle nativo ── */
+.sds-search-bar__input {
+  border: none;
+  outline: none;
+  background: transparent;
+  font-family: var(--font-family-base);
+  font-size: var(--font-size-body-md);
+  font-weight: var(--font-weight-regular);
+  color: var(--color-neutral-90);
+  width: 100%;
+  line-height: 1;
+  caret-color: var(--color-primary-50-solid);
+}
+/* ── Label base ── */
+.sds-search-bar__label {
+  position: absolute;
+  left: 0;
+  top: 50%;
+  transform: translateY(-50%);
+  pointer-events: none;
+  white-space: nowrap;
+}
+.sds-search-bar__field .sds-search-bar__label {
+  line-height: 1;
+}
+/* ── Label 'float' — rises on focus/fill ── */
+.sds-search-bar--label-float .sds-search-bar__label {
+  color: var(--color-neutral-50);
+  transform-origin: top left;
+  transition: top 120ms ease, font-size 120ms ease, color 120ms ease, transform 120ms ease;
+}
+.sds-search-bar--label-float.sds-search-bar--filled .sds-search-bar__label,
+.sds-search-bar--label-float:focus-within .sds-search-bar__label {
+  top: var(--spacing-2);
+  transform: none;
+  font-size: var(--font-size-label-sm);
+  line-height: var(--lh-label-sm);
+}
+.sds-search-bar--label-float .sds-search-bar__input {
+  padding-top: var(--spacing-5);
+  padding-bottom: var(--spacing-1);
+}
+/* ── Label 'placeholder' — disappears on focus/fill ── */
+.sds-search-bar--label-placeholder .sds-search-bar__label {
+  color: var(--placeholder-color);
+  transition: opacity 120ms ease;
+}
+.sds-search-bar--label-placeholder.sds-search-bar--filled .sds-search-bar__label,
+.sds-search-bar--label-placeholder:focus-within .sds-search-bar__label {
+  opacity: 0;
+}
+/* ── Loading — wait cursor on the root (mouse target); pointer-events only on the input
+   blocks click/typing without canceling the cursor (mirrors Select) ── */
+.sds-search-bar--loading { cursor: wait; }
+.sds-search-bar--loading .sds-search-bar__input {
+  cursor: wait;
+  pointer-events: none;
+}
+/* ── Disabled ── */
+.sds-search-bar--disabled {
+  border-color: var(--border-static-color);
+  background-color: var(--color-neutral-10);
+  cursor: not-allowed;
+}
+.sds-search-bar--disabled > * { pointer-events: none; }
+.sds-search-bar--disabled .sds-search-bar__input,
+.sds-search-bar--disabled .sds-search-bar__label,
+.sds-search-bar--disabled .sds-search-bar__icon {
+  color: var(--color-neutral-40);
+}
+
+/* `hug` is the old behaviour: the shell is as wide as what is put in it. `fill` takes the
+   width it is given, which is what a search box inside a menu or a toolbar needs. */
+.sds-search-bar--hug {
+  width: max-content;
+  max-width: 100%;
+}
+
+.sds-search-bar--fill {
+  width: 100%;
+}

package/components/SearchBar/search-bar-variants.js

@@ -0,0 +1,24 @@
+/**
+ * The SearchBar's vocabulary.
+ *
+ * Ported from kdls-design-system v2.5.1 (0f3edf8) components/Field/Field.tsx, where these
+ * were TypeScript unions. TypeScript checks them at build time and disappears; in Marko
+ * they have to be checked at render time or an unknown value renders an unstyled shell.
+ */
+
+export const SEARCH_BAR_SIZES = ['sm', 'md', 'lg'];
+export const SEARCH_BAR_FEEDBACK = ['none', 'success', 'alert', 'error'];
+export const SEARCH_BAR_LABEL_MODES = ['float', 'placeholder'];
+export const SEARCH_BAR_WIDTHS = ['hug', 'fill'];
+
+const assert = (name, allowed) => (value) => {
+  if (!allowed.includes(value)) {
+    throw new Error(`Unknown search bar ${name}: "${value}". Allowed: ${allowed.join(', ')}`);
+  }
+  return value;
+};
+
+export const assertSearchBarSize = assert('size', SEARCH_BAR_SIZES);
+export const assertSearchBarFeedback = assert('feedback', SEARCH_BAR_FEEDBACK);
+export const assertSearchBarLabelMode = assert('labelMode', SEARCH_BAR_LABEL_MODES);
+export const assertSearchBarWidth = assert('width', SEARCH_BAR_WIDTHS);

package/components/SearchBar/search-bar.marko

@@ -0,0 +1,157 @@
+<!-- sds-search-bar — ported from kdls-design-system v2.5.1 (0f3edf8), from two files:
+     components/Field/Field.tsx is the shell you see here, and components/SearchBar's
+     suggestions panel lands in this same component rather than wrapping it.
+
+     KDLS split them because its Field was meant as a general primitive. It never became
+     one — SearchBar is the only thing that imports it, and Input carries its own copy of
+     the markup. Rafael, 2026-09-10, named the reason that split has no future here: a
+     field in a Kenlo site is 56px, full stop, and SearchBar is the only one that varies,
+     at 40 and 48. A shell whose only job is to be three heights for one consumer is that
+     consumer. So Input refuses `size` and points here, and there is one component instead
+     of two that look the same.
+
+     Today it is the box, the icons either side, the floating label and the focus ring,
+     with the native control supplied as the body.
+
+     The search behaviour is not here yet, and that is the shape of what is missing:
+     `onChange`, `onSearch`, `onSuggestionSelect`, `onKeyDown`, `recentSearches` and the
+     panel they drive. They arrive together, in this component, when the panel does — not
+     wrapped around it. At that point it stops taking an <input> from the caller and owns
+     its own. `width` is here already because the shell has to be placeable. It
+     defaults to `fill`: the shell takes the width it is given, which is what a search box
+     in a menu, a toolbar or a control column needs, and what Input has always had. `hug`
+     is the opt-out, for the rare case where the shell should be as wide as its contents;
+     it was the default and it was the wrong one — a menu's search box sized itself to the
+     word "Buscar" and left the panel beside it.
+
+     It holds no state, and does not want any. `filled` is the caller's answer to "does
+     this control have a value", because the caller is the one holding the value. A shell
+     that tracked that itself would serialise its whole input on every instance.
+
+     Divergence: a clickable right icon is an sds-icon-button, not a handler in this
+     template. That is not cosmetic. An `on-*` bound to a value makes Marko serialise the
+     component holding it, and it decides at compile time — so a handler here would
+     serialise every instance on the page, clickable icon or not. Icon was found doing
+     exactly this. The button also arrives with focus, Enter, Space and a required name,
+     which KDLS's bare <button> with an optional aria-label did not guarantee. -->
+
+import searchIcon from "../../icons/generated/fluent-search-regular.marko";
+import dismissIcon from "../../icons/generated/fluent-dismiss-regular.marko";
+import { assertSearchBarSize, assertSearchBarFeedback, assertSearchBarLabelMode, assertSearchBarWidth } from "./search-bar-variants.js";
+
+$ {
+  const {
+    size = "lg",
+    label,
+    labelMode = "float",
+    width = "fill",
+    htmlFor,
+    filled = false,
+    onClear,
+    clearLabel = "Limpar busca",
+    disabled = false,
+    isLoading = false,
+    feedback = "none",
+    iconLeft = searchIcon,
+    iconRight,
+    onClickIconRight,
+    iconRightLabel,
+    class: extraClass = "",
+  } = input;
+
+  assertSearchBarSize(size);
+  assertSearchBarFeedback(feedback);
+  assertSearchBarLabelMode(labelMode);
+  assertSearchBarWidth(width);
+
+  if (onClickIconRight && !iconRightLabel) {
+    throw new Error("sds-search-bar needs an `iconRightLabel` when `onClickIconRight` is set — an icon button with no name is announced as just \"button\".");
+  }
+
+  const renderable = (value) => (value && value.renderBody) || value;
+
+  // The two halves of the same gesture. Empty, the magnifier on the left says what the box
+  // is for; typing, it has said it, and the space belongs to the text — so it steps aside
+  // and the way back to empty appears on the right instead. This holds for any `iconLeft`,
+  // not just the default one: in a search box the left edge is the text's the moment there
+  // is text.
+  //
+  // No state is needed for either. `filled` is the caller's answer to "is there a value",
+  // which the caller already holds, and a shell that tracked it itself would serialise its
+  // whole input on every instance.
+  const showIconLeft = iconLeft && !filled;
+
+  // A clear button is only offered when there is something to clear AND someone to clear
+  // it. Drawing one without `onClear` is the KDLS Uploader's download button: it renders,
+  // it takes focus, and clicking does nothing.
+  const showClear = filled && onClear && !disabled && !isLoading;
+
+  const classes = [
+    "sds-search-bar",
+    `sds-search-bar--${size}`,
+    `sds-search-bar--label-${labelMode}`,
+    `sds-search-bar--${width}`,
+    filled ? "sds-search-bar--filled" : "",
+    disabled ? "sds-search-bar--disabled" : "",
+    isLoading ? "sds-search-bar--loading" : "",
+    feedback !== "none" ? `sds-search-bar--feedback-${feedback}` : "",
+    extraClass,
+  ].filter(Boolean).join(" ");
+}
+
+<div class=classes>
+  <if(showIconLeft)>
+    <span class="sds-search-bar__icon sds-search-bar__icon--left" aria-hidden="true">
+      <sds-icon><${renderable(iconLeft)}/></sds-icon>
+    </span>
+  </if>
+
+  <!-- data-label feeds the invisible ::before spacer, which is how the box grows to fit a
+       label longer than its value. -->
+  <div class="sds-search-bar__field" data-label=label>
+    <if(label)>
+      <sds-text as="label" variant="bodyMd" class="sds-search-bar__label" for=htmlFor>
+        ${label}
+      </sds-text>
+    </if>
+    <${input.renderBody}/>
+  </div>
+
+  <if(isLoading)>
+    <span class="sds-search-bar__spinner" aria-hidden="true">
+      <sds-spinner size="sm" decorative/>
+    </span>
+  </if>
+  <else-if(showClear)>
+    // Ahead of `iconRight`: whatever else the right side was for, clearing the search the
+    // reader is looking at is the more immediate thing to offer.
+    <span class="sds-search-bar__icon sds-search-bar__icon--right">
+      <sds-icon-button
+        variant="neutral"
+        size="sm"
+        aria-label=clearLabel
+        onClick=onClear
+      >
+        <@icon><${dismissIcon}/></@icon>
+      </sds-icon-button>
+    </span>
+  </else-if>
+  <else-if(iconRight && onClickIconRight)>
+    <span class="sds-search-bar__icon sds-search-bar__icon--right">
+      <sds-icon-button
+        variant="neutral"
+        size="sm"
+        aria-label=iconRightLabel
+        disabled=(disabled || null)
+        onClick=onClickIconRight
+      >
+        <@icon><${renderable(iconRight)}/></@icon>
+      </sds-icon-button>
+    </span>
+  </else-if>
+  <else-if(iconRight)>
+    <span class="sds-search-bar__icon sds-search-bar__icon--right" aria-hidden="true">
+      <sds-icon><${renderable(iconRight)}/></sds-icon>
+    </span>
+  </else-if>
+</div>