@rcarls/rc-search-bar 0.1.0

package/dist/demo.css

@@ -0,0 +1,85 @@
+*, *::before, *::after {
+  box-sizing: border-box;
+}
+
+:root {
+  color-scheme: light dark;
+  --rc-accent: Highlight; /* Chrome doesn't support AccentColor on the open web */
+}
+
+@supports (color: AccentColor) {
+  :root {
+    --rc-accent: AccentColor;
+  }
+}
+
+[data-theme="light"] { color-scheme: light; }
+[data-theme="dark"]  { color-scheme: dark;  }
+
+[data-theme="solarized-light"] {
+  color-scheme: light;
+  --rc-surface: #fdf6e3;
+  --rc-text:    #657b83;
+  --rc-border:  1px solid #93a1a1;
+  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .12);
+}
+
+[data-theme="solarized-dark"] {
+  color-scheme: dark;
+  --rc-surface: #002b36;
+  --rc-text:    #839496;
+  --rc-border:  1px solid #586e75;
+  --rc-shadow:  0 2px 8px rgba(0, 0, 0, .3);
+}
+
+body {
+  font-family: system-ui, sans-serif;
+  margin: 0;
+}
+
+.demo-page {
+  max-width: 60rem;
+  margin: 0 auto;
+  padding: 2rem 1.5rem;
+}
+
+.demo-controls {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  margin-bottom: 2rem;
+  padding-bottom: 1rem;
+  border-bottom: 1px solid ButtonBorder;
+}
+
+.demo-controls .demo-title {
+  flex: 1;
+}
+
+.demo-controls h1 {
+  margin: 0 0 0.15rem;
+  font-size: 1.5rem;
+}
+
+.demo-controls a {
+  font-size: 0.8rem;
+}
+
+.demo-section {
+  margin-bottom: 2rem;
+}
+
+.demo-section h2 {
+  margin: 0 0 0.5rem;
+}
+
+.theme-picker {
+  padding: 0.35em 0.75em;
+  font-family: inherit;
+  font-size: 0.8rem;
+  cursor: pointer;
+  border: 1px solid ButtonBorder;
+  border-radius: 4px;
+  background: Canvas;
+  color: CanvasText;
+}

package/dist/demo.js

@@ -0,0 +1,40 @@
+const THEMES = ['', 'light', 'dark', 'solarized-light', 'solarized-dark'];
+const LABELS = ['Auto', 'Light', 'Dark', 'Solarized ☀', 'Solarized ☾'];
+
+const stored = localStorage.getItem('rc-demo-theme') ?? '';
+applyTheme(stored);
+
+function applyTheme(theme) {
+  if (theme) {
+    document.documentElement.dataset.theme = theme;
+  } else {
+    delete document.documentElement.dataset.theme;
+  }
+}
+
+function currentIndex() {
+  const current = document.documentElement.dataset.theme ?? '';
+  const idx = THEMES.indexOf(current);
+  return idx === -1 ? 0 : idx;
+}
+
+function updateButtons() {
+  const label = LABELS[currentIndex()];
+  document.querySelectorAll('.theme-picker').forEach((btn) => {
+    btn.textContent = label;
+  });
+}
+
+window.cycleTheme = function () {
+  const next = THEMES[(currentIndex() + 1) % THEMES.length];
+  applyTheme(next);
+  localStorage.setItem('rc-demo-theme', next);
+  updateButtons();
+};
+
+document.addEventListener('DOMContentLoaded', () => {
+  updateButtons();
+  document.querySelectorAll('.theme-picker').forEach((btn) => {
+    btn.addEventListener('click', window.cycleTheme);
+  });
+});

package/dist/rc-search-bar-Ssb7YNqn.js

@@ -0,0 +1,313 @@
+import { css as f, LitElement as b, html as v } from "lit";
+import { property as r, state as o } from "lit/decorators.js";
+import { classMap as h } from "lit/directives/class-map.js";
+const g = f`
+  :host {
+    display: inline-flex;
+    color-scheme: inherit;
+  }
+
+  [hidden] {
+    display: none !important;
+  }
+
+  #root {
+    display: flex;
+    flex: 1 1 auto;
+    align-items: center;
+    min-inline-size: 0;
+    gap: var(--rc-search-bar-gap, 0.25em);
+    block-size: var(--rc-search-bar-height, 48px);
+    padding-inline: var(--rc-search-bar-padding-inline, 0.5em);
+    background: var(--rc-search-bar-bg, Field);
+    color: var(--rc-search-bar-color, FieldText);
+    border-radius: var(--rc-search-bar-radius, var(--rc-control-radius, 0));
+  }
+
+  :host([data-focus-visible]) #root {
+    outline: var(--rc-focus-ring, auto);
+    outline-offset: var(--rc-focus-ring-offset, 0);
+  }
+
+  /* No slotted search input: render no chrome at all. */
+  #root.empty {
+    block-size: auto;
+    padding: 0;
+    background: none;
+    border-radius: 0;
+  }
+
+  #leading {
+    display: flex;
+    flex: none;
+    align-items: center;
+    color: var(--rc-search-bar-icon-color, GrayText);
+  }
+
+  #leading.empty {
+    display: none;
+  }
+
+  ::slotted(input[type='search']) {
+    flex: 1 1 auto;
+    min-inline-size: 0;
+    border: none;
+    background: transparent;
+    color: var(--rc-search-bar-input-color, inherit);
+    font-family: var(--rc-search-bar-input-font-family, inherit);
+    font-size: var(--rc-search-bar-input-font-size, inherit);
+    outline: none;
+  }
+
+  #trailing {
+    display: flex;
+    flex: none;
+    align-items: center;
+  }
+
+  #trailing.empty {
+    display: none;
+  }
+
+  #clear {
+    display: inline-grid;
+    flex: none;
+    place-items: center;
+    min-inline-size: 24px;
+    min-block-size: 24px;
+    padding: 0;
+    border: none;
+    border-radius: 50%;
+    background: none;
+    color: var(--rc-search-bar-clear-color, GrayText);
+    font: inherit;
+    cursor: pointer;
+  }
+
+  #clear:focus-visible {
+    outline: var(--rc-focus-ring, auto);
+    outline-offset: var(--rc-focus-ring-offset, 0);
+  }
+`;
+var m = Object.defineProperty, y = Object.getOwnPropertyDescriptor, a = (c, e, i, t) => {
+  for (var n = t > 1 ? void 0 : t ? y(e, i) : e, l = c.length - 1, u; l >= 0; l--)
+    (u = c[l]) && (n = (t ? u(e, i, n) : u(n)) || n);
+  return t && n && m(e, i, n), n;
+};
+const _ = new CSSStyleSheet();
+_.replaceSync(
+  `rc-search-bar:not([allow-native-clear]) input[type="search"]::-webkit-search-cancel-button
+   { -webkit-appearance: none; display: none; }`
+);
+let p = !1;
+function I() {
+  p || (document.adoptedStyleSheets = [...document.adoptedStyleSheets, _], p = !0);
+}
+const d = class d extends b {
+  constructor() {
+    super(...arguments), this.debounce = 200, this.clearLabel = "Clear search", this.allowNativeClear = !1, this.showClearOnFocus = !1, this._value = void 0, this._defaultValue = void 0, this._valueSetByHost = !1, this._valueInitialized = !1, this._authorPlaceholder = !1, this._inputRef = null, this._debounceTimer = void 0, this._hasInput = !1, this._hasValue = !1, this._hasLeading = !1, this._hasTrailing = !1, this._inputDisabled = !1, this._disabledHost = void 0, this._focused = !1, this._lastInteractionWasPointer = !1, this._onPointerDown = () => {
+      this._lastInteractionWasPointer = !0;
+    }, this._onFocusIn = () => {
+      this._lastInteractionWasPointer || this.toggleAttribute("data-focus-visible", !0), this._lastInteractionWasPointer = !1;
+    }, this._onFocusOut = () => {
+      this.toggleAttribute("data-focus-visible", !1);
+    }, this._onInputFocus = () => {
+      this._focused = !0;
+    }, this._onInputBlur = () => {
+      this._focused = !1;
+    }, this._disabledObserver = new MutationObserver(() => {
+      const e = this._input();
+      e && (this._inputDisabled = e.disabled);
+    }), this._onNativeInput = (e) => {
+      const i = e.currentTarget;
+      this._valueInitialized = !0, this._hasValue = i.value.length > 0, this._scheduleInputEvent(i.value);
+    };
+  }
+  get disabled() {
+    return this._disabledHost ?? this._inputDisabled;
+  }
+  set disabled(e) {
+    const i = this.disabled;
+    this._disabledHost = e;
+    const t = this._input();
+    t && (t.disabled = e), this.requestUpdate("disabled", i);
+  }
+  get value() {
+    return this._input()?.value ?? this._value ?? this._defaultValue ?? "";
+  }
+  set value(e) {
+    const i = this.value;
+    this._value = e, this._valueSetByHost = !0, this._valueInitialized = !0;
+    const t = this._input();
+    t && (t.value = e), this._hasValue = e.length > 0, this.requestUpdate("value", i);
+  }
+  get defaultValue() {
+    return this._defaultValue;
+  }
+  set defaultValue(e) {
+    const i = this._defaultValue;
+    this._defaultValue = e;
+    const t = this._input();
+    t && e !== void 0 && !this._valueInitialized && (t.value = e, this._hasValue = e.length > 0), this.requestUpdate("defaultValue", i);
+  }
+  connectedCallback() {
+    super.connectedCallback(), I(), this.addEventListener("pointerdown", this._onPointerDown, { capture: !0 }), this.addEventListener("focusin", this._onFocusIn), this.addEventListener("focusout", this._onFocusOut);
+    const e = this._input();
+    e && this._bindInput(e);
+  }
+  disconnectedCallback() {
+    this.removeEventListener("pointerdown", this._onPointerDown, { capture: !0 }), this.removeEventListener("focusin", this._onFocusIn), this.removeEventListener("focusout", this._onFocusOut), super.disconnectedCallback(), this._focused = !1, this._cancelPendingInput();
+    const e = this._input();
+    e?.removeEventListener("input", this._onNativeInput), e?.removeEventListener("focus", this._onInputFocus), e?.removeEventListener("blur", this._onInputBlur), this._disabledObserver.disconnect();
+  }
+  updated(e) {
+    if (e.has("placeholder")) {
+      const i = this._input();
+      i && this._applyPlaceholder(i);
+    }
+  }
+  _input() {
+    return this._inputRef?.deref() ?? null;
+  }
+  _handleSlotChange(e) {
+    const t = e.target.assignedElements({ flatten: !0 }).find(
+      (l) => l instanceof HTMLInputElement && l.type === "search"
+    ) ?? null, n = this._input();
+    if (n && n !== t && (n.removeEventListener("input", this._onNativeInput), n.removeEventListener("focus", this._onInputFocus), n.removeEventListener("blur", this._onInputBlur)), this._disabledObserver.disconnect(), this._focused = !1, this._inputRef = t ? new WeakRef(t) : null, this._hasInput = t !== null, !t) {
+      this._hasValue = !1;
+      return;
+    }
+    queueMicrotask(() => {
+      t.isConnected && (this._valueSetByHost ? t.value = this._value ?? "" : t.value ? this._valueInitialized = !0 : this._defaultValue !== void 0 && !this._valueInitialized && (t.value = this._defaultValue), this._authorPlaceholder = t.hasAttribute("placeholder"), this._applyPlaceholder(t), this._disabledHost !== void 0 && (t.disabled = this._disabledHost), this._inputDisabled = t.disabled, this._hasValue = t.value.length > 0, this._bindInput(t));
+    });
+  }
+  _bindInput(e) {
+    e.addEventListener("input", this._onNativeInput), e.addEventListener("focus", this._onInputFocus), e.addEventListener("blur", this._onInputBlur), this._disabledObserver.observe(e, { attributeFilter: ["disabled"] });
+  }
+  _applyPlaceholder(e) {
+    this.placeholder === void 0 || this._authorPlaceholder || (e.placeholder = this.placeholder);
+  }
+  _scheduleInputEvent(e) {
+    if (this._cancelPendingInput(), this.debounce <= 0) {
+      this._dispatchInput(e);
+      return;
+    }
+    this._debounceTimer = setTimeout(() => {
+      this._debounceTimer = void 0, this._dispatchInput(e);
+    }, this.debounce);
+  }
+  _cancelPendingInput() {
+    this._debounceTimer !== void 0 && (clearTimeout(this._debounceTimer), this._debounceTimer = void 0);
+  }
+  _dispatchInput(e) {
+    this.dispatchEvent(
+      new CustomEvent("rc-search-bar-input", {
+        bubbles: !0,
+        composed: !0,
+        detail: { value: e }
+      })
+    );
+  }
+  _handleClear() {
+    const e = this._input();
+    e && (this._cancelPendingInput(), e.value = "", this._valueInitialized = !0, this._hasValue = !1, this.dispatchEvent(
+      new CustomEvent("rc-search-bar-clear", {
+        bubbles: !0,
+        composed: !0,
+        detail: {}
+      })
+    ), this._dispatchInput(""), e.focus());
+  }
+  render() {
+    return v`
+      <div id="root" part="root" class=${h({ empty: !this._hasInput })}>
+        <span
+          id="leading"
+          part="leading"
+          class=${h({ empty: !this._hasLeading || !this._hasInput })}
+        >
+          <slot name="leading" @slotchange=${this._onLeadingSlotChange}></slot>
+        </span>
+        <slot @slotchange=${this._handleSlotChange}></slot>
+        <button
+          id="clear"
+          part="clear"
+          type="button"
+          aria-label=${this.clearLabel}
+          ?hidden=${!this._hasInput || !this._hasValue && !(this.showClearOnFocus && this._focused)}
+          ?disabled=${this._inputDisabled}
+          @click=${this._handleClear}
+        >
+          <slot name="clear-icon"><span aria-hidden="true">&#10005;</span></slot>
+        </button>
+        <span
+          id="trailing"
+          part="trailing"
+          class=${h({ empty: !this._hasTrailing })}
+        >
+          <slot name="trailing" @slotchange=${this._onTrailingSlotChange}></slot>
+        </span>
+      </div>
+    `;
+  }
+  /** Programmatically clears the value and fires rc-search-bar-clear + rc-search-bar-input. */
+  clear() {
+    this._handleClear();
+  }
+  _onLeadingSlotChange(e) {
+    const i = e.target;
+    this._hasLeading = i.assignedElements().length > 0;
+  }
+  _onTrailingSlotChange(e) {
+    const i = e.target;
+    this._hasTrailing = i.assignedElements().length > 0;
+  }
+};
+d.styles = [g];
+let s = d;
+a([
+  r({ type: Number })
+], s.prototype, "debounce", 2);
+a([
+  r({ type: String, attribute: "clear-label" })
+], s.prototype, "clearLabel", 2);
+a([
+  r({ type: Boolean, attribute: "allow-native-clear", reflect: !0 })
+], s.prototype, "allowNativeClear", 2);
+a([
+  r({ type: Boolean, attribute: "show-clear-on-focus" })
+], s.prototype, "showClearOnFocus", 2);
+a([
+  r({ type: Boolean, reflect: !0 })
+], s.prototype, "disabled", 1);
+a([
+  r({ type: String })
+], s.prototype, "placeholder", 2);
+a([
+  o()
+], s.prototype, "_hasInput", 2);
+a([
+  o()
+], s.prototype, "_hasValue", 2);
+a([
+  o()
+], s.prototype, "_hasLeading", 2);
+a([
+  o()
+], s.prototype, "_hasTrailing", 2);
+a([
+  o()
+], s.prototype, "_inputDisabled", 2);
+a([
+  o()
+], s.prototype, "_focused", 2);
+a([
+  r({ attribute: !1 })
+], s.prototype, "value", 1);
+a([
+  r({ type: String, attribute: "default-value" })
+], s.prototype, "defaultValue", 1);
+export {
+  s as R
+};
+//# sourceMappingURL=rc-search-bar-Ssb7YNqn.js.map

package/dist/rc-search-bar-Ssb7YNqn.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-search-bar-Ssb7YNqn.js","sources":["../src/rc-search-bar.styles.ts","../src/rc-search-bar.ts"],"sourcesContent":["import { css } from 'lit';\n\nexport const searchBarStyles = css`\n  :host {\n    display: inline-flex;\n    color-scheme: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  #root {\n    display: flex;\n    flex: 1 1 auto;\n    align-items: center;\n    min-inline-size: 0;\n    gap: var(--rc-search-bar-gap, 0.25em);\n    block-size: var(--rc-search-bar-height, 48px);\n    padding-inline: var(--rc-search-bar-padding-inline, 0.5em);\n    background: var(--rc-search-bar-bg, Field);\n    color: var(--rc-search-bar-color, FieldText);\n    border-radius: var(--rc-search-bar-radius, var(--rc-control-radius, 0));\n  }\n\n  :host([data-focus-visible]) #root {\n    outline: var(--rc-focus-ring, auto);\n    outline-offset: var(--rc-focus-ring-offset, 0);\n  }\n\n  /* No slotted search input: render no chrome at all. */\n  #root.empty {\n    block-size: auto;\n    padding: 0;\n    background: none;\n    border-radius: 0;\n  }\n\n  #leading {\n    display: flex;\n    flex: none;\n    align-items: center;\n    color: var(--rc-search-bar-icon-color, GrayText);\n  }\n\n  #leading.empty {\n    display: none;\n  }\n\n  ::slotted(input[type='search']) {\n    flex: 1 1 auto;\n    min-inline-size: 0;\n    border: none;\n    background: transparent;\n    color: var(--rc-search-bar-input-color, inherit);\n    font-family: var(--rc-search-bar-input-font-family, inherit);\n    font-size: var(--rc-search-bar-input-font-size, inherit);\n    outline: none;\n  }\n\n  #trailing {\n    display: flex;\n    flex: none;\n    align-items: center;\n  }\n\n  #trailing.empty {\n    display: none;\n  }\n\n  #clear {\n    display: inline-grid;\n    flex: none;\n    place-items: center;\n    min-inline-size: 24px;\n    min-block-size: 24px;\n    padding: 0;\n    border: none;\n    border-radius: 50%;\n    background: none;\n    color: var(--rc-search-bar-clear-color, GrayText);\n    font: inherit;\n    cursor: pointer;\n  }\n\n  #clear:focus-visible {\n    outline: var(--rc-focus-ring, auto);\n    outline-offset: var(--rc-focus-ring-offset, 0);\n  }\n`;\n\nexport default searchBarStyles;\n","import { LitElement, html, type PropertyValues } from 'lit';\nimport { property, state } from 'lit/decorators.js';\nimport { classMap } from 'lit/directives/class-map.js';\n\nimport searchBarStyles from './rc-search-bar.styles';\n\nconst _uaClearSheet = new CSSStyleSheet();\n_uaClearSheet.replaceSync(\n  `rc-search-bar:not([allow-native-clear]) input[type=\"search\"]::-webkit-search-cancel-button\n   { -webkit-appearance: none; display: none; }`,\n);\nlet _uaClearSuppressed = false;\n\nfunction _suppressUaClear(): void {\n  if (_uaClearSuppressed) return;\n  document.adoptedStyleSheets = [...document.adoptedStyleSheets, _uaClearSheet];\n  _uaClearSuppressed = true;\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'rc-search-bar': RCSearchBar;\n  }\n}\n\nexport interface RCSearchBarInputDetail {\n  /** The native input's value at dispatch time. */\n  value: string;\n}\n\n/**\n * Enhances a consumer-provided native `<input type=\"search\">` with leading\n * icon chrome, an accessible clear button, and debounced search events.\n *\n * The native input is required and stays in light DOM as the source of\n * truth, so form submission, `label[for]`/wrapping-label association, and\n * pre-upgrade behavior are preserved. Without a slotted search input the\n * component renders no chrome and stays inert.\n *\n * The native WebKit cancel button is suppressed by default via an\n * adopted document stylesheet. Set `allow-native-clear` to restore it.\n * When restored, the native button clears through the normal input path\n * (a debounced `rc-search-bar-input` with an empty value) and never fires\n * `rc-search-bar-clear`.\n *\n * @slot - The required native `<input type=\"search\">`\n * @slot leading - Decorative leading icon; mark it `aria-hidden=\"true\"`\n * @slot trailing - Optional trailing content after the clear button\n * @slot clear-icon - Optional glyph replacing the default clear glyph\n * @fires rc-search-bar-input - Debounced after typing, immediate on clear;\n *   `detail: { value }`\n * @fires rc-search-bar-clear - When the clear button is activated\n * @cssprop [--rc-search-bar-bg=Field] - Wrapper background\n * @cssprop [--rc-search-bar-color=FieldText] - Wrapper text color\n * @cssprop [--rc-search-bar-icon-color=GrayText] - Leading icon color\n * @cssprop [--rc-search-bar-clear-color=GrayText] - Clear button glyph color\n * @cssprop [--rc-search-bar-radius=var(--rc-control-radius)] - Wrapper border radius\n * @cssprop [--rc-search-bar-height=48px] - Wrapper block size\n * @cssprop [--rc-search-bar-padding-inline=0.5em] - Wrapper horizontal padding\n * @cssprop [--rc-search-bar-gap=0.25em] - Gap between icon, input, and clear button\n * @cssprop [--rc-search-bar-input-font-size] - Input font size (inherits when unset)\n * @cssprop [--rc-search-bar-input-font-family] - Input font family (inherits when unset)\n * @cssprop [--rc-search-bar-input-color] - Input text color (inherits when unset)\n * @csspart root - The wrapper element\n * @csspart leading - Wrapper around the leading icon slot\n * @csspart trailing - Wrapper around the trailing slot\n * @csspart clear - The clear button\n */\nexport class RCSearchBar extends LitElement {\n  static styles = [searchBarStyles];\n\n  /** Debounce window in ms for `rc-search-bar-input`; `0` dispatches synchronously. */\n  @property({ type: Number })\n  debounce = 200;\n\n  /** Accessible label for the clear button. */\n  @property({ type: String, attribute: 'clear-label' })\n  clearLabel = 'Clear search';\n\n  /** When set, leaves the browser's native WebKit cancel button visible. */\n  @property({ type: Boolean, attribute: 'allow-native-clear', reflect: true })\n  allowNativeClear = false;\n\n  /**\n   * When set, the clear button is visible whenever the input is focused,\n   * even with no value — matching the Apple HIG \"cancel\" pattern.\n   * Consider setting `clear-label=\"Cancel\"` in this mode.\n   */\n  @property({ type: Boolean, attribute: 'show-clear-on-focus' })\n  showClearOnFocus = false;\n\n  /** Disables the component and mirrors the state to the slotted input. */\n  @property({ type: Boolean, reflect: true })\n  get disabled(): boolean {\n    // _disabledHost holds what the host last set; fall back to what the input\n    // actually reports (kept in sync by the MutationObserver).\n    return this._disabledHost ?? this._inputDisabled;\n  }\n  set disabled(value: boolean) {\n    const old = this.disabled;\n    this._disabledHost = value;\n    const input = this._input();\n    if (input) input.disabled = value;\n    this.requestUpdate('disabled', old);\n  }\n\n  /**\n   * Placeholder mirrored onto the native input. An author `placeholder`\n   * attribute already present on the input is never overwritten.\n   */\n  @property({ type: String })\n  placeholder?: string;\n\n  private _value: string | undefined = undefined;\n\n  private _defaultValue: string | undefined = undefined;\n\n  private _valueSetByHost = false;\n\n  /** True once an author value, host write, or user input owns the value. */\n  private _valueInitialized = false;\n\n  private _authorPlaceholder = false;\n\n  private _inputRef: WeakRef<HTMLInputElement> | null = null;\n\n  private _debounceTimer: ReturnType<typeof setTimeout> | undefined = undefined;\n\n  @state()\n  private _hasInput = false;\n\n  @state()\n  private _hasValue = false;\n\n  @state()\n  private _hasLeading = false;\n\n  @state()\n  private _hasTrailing = false;\n\n  @state()\n  private _inputDisabled = false;\n\n  // Tracks the last value written via the disabled setter so the getter and\n  // Lit's reflect can return it before the input is slotted.\n  private _disabledHost: boolean | undefined = undefined;\n\n  @state()\n  private _focused = false;\n\n  private _lastInteractionWasPointer = false;\n  private readonly _onPointerDown = (): void => {\n    this._lastInteractionWasPointer = true;\n  };\n  private readonly _onFocusIn = (): void => {\n    if (!this._lastInteractionWasPointer) this.toggleAttribute('data-focus-visible', true);\n    this._lastInteractionWasPointer = false;\n  };\n  private readonly _onFocusOut = (): void => {\n    this.toggleAttribute('data-focus-visible', false);\n  };\n\n  private readonly _onInputFocus = (): void => {\n    this._focused = true;\n  };\n\n  private readonly _onInputBlur = (): void => {\n    this._focused = false;\n  };\n\n  private readonly _disabledObserver = new MutationObserver(() => {\n    const input = this._input();\n    if (input) this._inputDisabled = input.disabled;\n  });\n\n  /**\n   * The current search value. Reads from the native input when present.\n   * Host writes are silent (no events) and win over slotted author values.\n   */\n  @property({ attribute: false })\n  get value(): string {\n    return this._input()?.value ?? this._value ?? this._defaultValue ?? '';\n  }\n  set value(value: string) {\n    const oldValue = this.value;\n\n    this._value = value;\n    this._valueSetByHost = true;\n    this._valueInitialized = true;\n\n    const input = this._input();\n    if (input) input.value = value;\n    this._hasValue = value.length > 0;\n\n    this.requestUpdate('value', oldValue);\n  }\n\n  /**\n   * Initial uncontrolled value hint. Applied once, and only when neither an\n   * author `value`, a host `value` write, nor user input owns the value.\n   */\n  @property({ type: String, attribute: 'default-value' })\n  get defaultValue(): string | undefined {\n    return this._defaultValue;\n  }\n  set defaultValue(value: string | undefined) {\n    const oldValue = this._defaultValue;\n\n    this._defaultValue = value;\n\n    const input = this._input();\n    if (input && value !== undefined && !this._valueInitialized) {\n      input.value = value;\n      this._hasValue = value.length > 0;\n    }\n\n    this.requestUpdate('defaultValue', oldValue);\n  }\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    _suppressUaClear();\n\n    this.addEventListener('pointerdown', this._onPointerDown, { capture: true });\n    this.addEventListener('focusin', this._onFocusIn);\n    this.addEventListener('focusout', this._onFocusOut);\n\n    // Slot assignment survives a DOM move without re-firing slotchange, so\n    // listeners are re-bound here (addEventListener is idempotent per ref).\n    const input = this._input();\n    if (input) this._bindInput(input);\n  }\n\n  override disconnectedCallback(): void {\n    this.removeEventListener('pointerdown', this._onPointerDown, { capture: true });\n    this.removeEventListener('focusin', this._onFocusIn);\n    this.removeEventListener('focusout', this._onFocusOut);\n\n    super.disconnectedCallback();\n\n    this._focused = false;\n    this._cancelPendingInput();\n\n    const input = this._input();\n    input?.removeEventListener('input', this._onNativeInput);\n    input?.removeEventListener('focus', this._onInputFocus);\n    input?.removeEventListener('blur', this._onInputBlur);\n\n    this._disabledObserver.disconnect();\n  }\n\n  protected override updated(changed: PropertyValues<this>): void {\n    if (changed.has('placeholder')) {\n      const input = this._input();\n      if (input) this._applyPlaceholder(input);\n    }\n  }\n\n  private _input(): HTMLInputElement | null {\n    return this._inputRef?.deref() ?? null;\n  }\n\n  private _handleSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    const input =\n      slot\n        .assignedElements({ flatten: true })\n        .find(\n          (el): el is HTMLInputElement =>\n            el instanceof HTMLInputElement && el.type === 'search',\n        ) ?? null;\n\n    const previous = this._input();\n    if (previous && previous !== input) {\n      previous.removeEventListener('input', this._onNativeInput);\n      previous.removeEventListener('focus', this._onInputFocus);\n      previous.removeEventListener('blur', this._onInputBlur);\n    }\n    this._disabledObserver.disconnect();\n    this._focused = false;\n\n    this._inputRef = input ? new WeakRef(input) : null;\n    this._hasInput = input !== null;\n\n    if (!input) {\n      this._hasValue = false;\n\n      return;\n    }\n\n    // Deferred reads keep framework render cycles (e.g. SolidJS) untouched.\n    queueMicrotask(() => {\n      if (!input.isConnected) return;\n\n      if (this._valueSetByHost) {\n        input.value = this._value ?? '';\n      } else if (input.value) {\n        // An author-provided value wins over defaultValue.\n        this._valueInitialized = true;\n      } else if (this._defaultValue !== undefined && !this._valueInitialized) {\n        input.value = this._defaultValue;\n      }\n\n      this._authorPlaceholder = input.hasAttribute('placeholder');\n      this._applyPlaceholder(input);\n\n      if (this._disabledHost !== undefined) {\n        input.disabled = this._disabledHost;\n      }\n      this._inputDisabled = input.disabled;\n      this._hasValue = input.value.length > 0;\n\n      if (\n        import.meta.env.DEV &&\n        !input.labels?.length &&\n        !input.getAttribute('aria-label') &&\n        !input.getAttribute('aria-labelledby')\n      ) {\n        console.warn(\n          '[rc-search-bar] Slotted <input type=\"search\"> has no accessible name.',\n          'Add aria-label, wrap in <label>, or use <label for=\"...\">.',\n          input,\n        );\n      }\n\n      this._bindInput(input);\n    });\n  }\n\n  private _bindInput(input: HTMLInputElement): void {\n    input.addEventListener('input', this._onNativeInput);\n    input.addEventListener('focus', this._onInputFocus);\n    input.addEventListener('blur', this._onInputBlur);\n    this._disabledObserver.observe(input, { attributeFilter: ['disabled'] });\n  }\n\n  private _applyPlaceholder(input: HTMLInputElement): void {\n    if (this.placeholder === undefined || this._authorPlaceholder) return;\n\n    input.placeholder = this.placeholder;\n  }\n\n  private readonly _onNativeInput = (e: Event): void => {\n    const input = e.currentTarget as HTMLInputElement;\n\n    this._valueInitialized = true;\n    this._hasValue = input.value.length > 0;\n    this._scheduleInputEvent(input.value);\n  };\n\n  private _scheduleInputEvent(value: string): void {\n    this._cancelPendingInput();\n\n    if (this.debounce <= 0) {\n      this._dispatchInput(value);\n\n      return;\n    }\n\n    this._debounceTimer = setTimeout(() => {\n      this._debounceTimer = undefined;\n      this._dispatchInput(value);\n    }, this.debounce);\n  }\n\n  private _cancelPendingInput(): void {\n    if (this._debounceTimer === undefined) return;\n\n    clearTimeout(this._debounceTimer);\n    this._debounceTimer = undefined;\n  }\n\n  private _dispatchInput(value: string): void {\n    this.dispatchEvent(\n      new CustomEvent<RCSearchBarInputDetail>('rc-search-bar-input', {\n        bubbles: true,\n        composed: true,\n        detail: { value },\n      }),\n    );\n  }\n\n  private _handleClear(): void {\n    const input = this._input();\n    if (!input) return;\n\n    this._cancelPendingInput();\n\n    input.value = '';\n    this._valueInitialized = true;\n    this._hasValue = false;\n\n    this.dispatchEvent(\n      new CustomEvent('rc-search-bar-clear', {\n        bubbles: true,\n        composed: true,\n        detail: {},\n      }),\n    );\n    this._dispatchInput('');\n\n    // Refocus before the re-render hides the button, so focus never drops\n    // to <body>.\n    input.focus();\n  }\n\n  protected override render() {\n    return html`\n      <div id=\"root\" part=\"root\" class=${classMap({ empty: !this._hasInput })}>\n        <span\n          id=\"leading\"\n          part=\"leading\"\n          class=${classMap({ empty: !this._hasLeading || !this._hasInput })}\n        >\n          <slot name=\"leading\" @slotchange=${this._onLeadingSlotChange}></slot>\n        </span>\n        <slot @slotchange=${this._handleSlotChange}></slot>\n        <button\n          id=\"clear\"\n          part=\"clear\"\n          type=\"button\"\n          aria-label=${this.clearLabel}\n          ?hidden=${!this._hasInput || (!this._hasValue && !(this.showClearOnFocus && this._focused))}\n          ?disabled=${this._inputDisabled}\n          @click=${this._handleClear}\n        >\n          <slot name=\"clear-icon\"><span aria-hidden=\"true\">&#10005;</span></slot>\n        </button>\n        <span\n          id=\"trailing\"\n          part=\"trailing\"\n          class=${classMap({ empty: !this._hasTrailing })}\n        >\n          <slot name=\"trailing\" @slotchange=${this._onTrailingSlotChange}></slot>\n        </span>\n      </div>\n    `;\n  }\n\n  /** Programmatically clears the value and fires rc-search-bar-clear + rc-search-bar-input. */\n  public clear(): void {\n    this._handleClear();\n  }\n\n  private _onLeadingSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasLeading = slot.assignedElements().length > 0;\n  }\n\n  private _onTrailingSlotChange(e: Event): void {\n    const slot = e.target as HTMLSlotElement;\n    this._hasTrailing = slot.assignedElements().length > 0;\n  }\n}\n\nexport default RCSearchBar;\n"],"names":["searchBarStyles","css","_uaClearSheet","_uaClearSuppressed","_suppressUaClear","_RCSearchBar","LitElement","input","value","old","oldValue","changed","el","previous","html","classMap","slot","RCSearchBar","__decorateClass","property","state"],"mappings":"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"}

package/dist/rc-search-bar-define.js

@@ -0,0 +1,6 @@
+import { R as e } from "./rc-search-bar-Ssb7YNqn.js";
+customElements.get("rc-search-bar") || customElements.define("rc-search-bar", e);
+export {
+  e as RCSearchBar
+};
+//# sourceMappingURL=rc-search-bar-define.js.map

package/dist/rc-search-bar-define.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-search-bar-define.js","sources":["../src/define.ts"],"sourcesContent":["import { RCSearchBar } from './index.js';\n\ncustomElements.get('rc-search-bar') || customElements.define('rc-search-bar', RCSearchBar);\n\nexport * from './index.js';\n"],"names":["RCSearchBar"],"mappings":";AAEA,eAAe,IAAI,eAAe,KAAK,eAAe,OAAO,iBAAiBA,CAAW;"}

package/dist/rc-search-bar.js

@@ -0,0 +1,5 @@
+import { R as e } from "./rc-search-bar-Ssb7YNqn.js";
+export {
+  e as RCSearchBar
+};
+//# sourceMappingURL=rc-search-bar.js.map

package/dist/rc-search-bar.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"rc-search-bar.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/types/packages/rc-search-bar/src/define.d.ts

@@ -0,0 +1 @@
+export * from './index.js';

package/dist/types/packages/rc-search-bar/src/index.d.ts

@@ -0,0 +1 @@
+export * from './rc-search-bar';

package/dist/types/packages/rc-search-bar/src/rc-search-bar.d.ts

@@ -0,0 +1,123 @@
+import { LitElement, PropertyValues } from 'lit';
+declare global {
+    interface HTMLElementTagNameMap {
+        'rc-search-bar': RCSearchBar;
+    }
+}
+export interface RCSearchBarInputDetail {
+    /** The native input's value at dispatch time. */
+    value: string;
+}
+/**
+ * Enhances a consumer-provided native `<input type="search">` with leading
+ * icon chrome, an accessible clear button, and debounced search events.
+ *
+ * The native input is required and stays in light DOM as the source of
+ * truth, so form submission, `label[for]`/wrapping-label association, and
+ * pre-upgrade behavior are preserved. Without a slotted search input the
+ * component renders no chrome and stays inert.
+ *
+ * The native WebKit cancel button is suppressed by default via an
+ * adopted document stylesheet. Set `allow-native-clear` to restore it.
+ * When restored, the native button clears through the normal input path
+ * (a debounced `rc-search-bar-input` with an empty value) and never fires
+ * `rc-search-bar-clear`.
+ *
+ * @slot - The required native `<input type="search">`
+ * @slot leading - Decorative leading icon; mark it `aria-hidden="true"`
+ * @slot trailing - Optional trailing content after the clear button
+ * @slot clear-icon - Optional glyph replacing the default clear glyph
+ * @fires rc-search-bar-input - Debounced after typing, immediate on clear;
+ *   `detail: { value }`
+ * @fires rc-search-bar-clear - When the clear button is activated
+ * @cssprop [--rc-search-bar-bg=Field] - Wrapper background
+ * @cssprop [--rc-search-bar-color=FieldText] - Wrapper text color
+ * @cssprop [--rc-search-bar-icon-color=GrayText] - Leading icon color
+ * @cssprop [--rc-search-bar-clear-color=GrayText] - Clear button glyph color
+ * @cssprop [--rc-search-bar-radius=var(--rc-control-radius)] - Wrapper border radius
+ * @cssprop [--rc-search-bar-height=48px] - Wrapper block size
+ * @cssprop [--rc-search-bar-padding-inline=0.5em] - Wrapper horizontal padding
+ * @cssprop [--rc-search-bar-gap=0.25em] - Gap between icon, input, and clear button
+ * @cssprop [--rc-search-bar-input-font-size] - Input font size (inherits when unset)
+ * @cssprop [--rc-search-bar-input-font-family] - Input font family (inherits when unset)
+ * @cssprop [--rc-search-bar-input-color] - Input text color (inherits when unset)
+ * @csspart root - The wrapper element
+ * @csspart leading - Wrapper around the leading icon slot
+ * @csspart trailing - Wrapper around the trailing slot
+ * @csspart clear - The clear button
+ */
+export declare class RCSearchBar extends LitElement {
+    static styles: import('lit').CSSResult[];
+    /** Debounce window in ms for `rc-search-bar-input`; `0` dispatches synchronously. */
+    debounce: number;
+    /** Accessible label for the clear button. */
+    clearLabel: string;
+    /** When set, leaves the browser's native WebKit cancel button visible. */
+    allowNativeClear: boolean;
+    /**
+     * When set, the clear button is visible whenever the input is focused,
+     * even with no value — matching the Apple HIG "cancel" pattern.
+     * Consider setting `clear-label="Cancel"` in this mode.
+     */
+    showClearOnFocus: boolean;
+    /** Disables the component and mirrors the state to the slotted input. */
+    get disabled(): boolean;
+    set disabled(value: boolean);
+    /**
+     * Placeholder mirrored onto the native input. An author `placeholder`
+     * attribute already present on the input is never overwritten.
+     */
+    placeholder?: string;
+    private _value;
+    private _defaultValue;
+    private _valueSetByHost;
+    /** True once an author value, host write, or user input owns the value. */
+    private _valueInitialized;
+    private _authorPlaceholder;
+    private _inputRef;
+    private _debounceTimer;
+    private _hasInput;
+    private _hasValue;
+    private _hasLeading;
+    private _hasTrailing;
+    private _inputDisabled;
+    private _disabledHost;
+    private _focused;
+    private _lastInteractionWasPointer;
+    private readonly _onPointerDown;
+    private readonly _onFocusIn;
+    private readonly _onFocusOut;
+    private readonly _onInputFocus;
+    private readonly _onInputBlur;
+    private readonly _disabledObserver;
+    /**
+     * The current search value. Reads from the native input when present.
+     * Host writes are silent (no events) and win over slotted author values.
+     */
+    get value(): string;
+    set value(value: string);
+    /**
+     * Initial uncontrolled value hint. Applied once, and only when neither an
+     * author `value`, a host `value` write, nor user input owns the value.
+     */
+    get defaultValue(): string | undefined;
+    set defaultValue(value: string | undefined);
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected updated(changed: PropertyValues<this>): void;
+    private _input;
+    private _handleSlotChange;
+    private _bindInput;
+    private _applyPlaceholder;
+    private readonly _onNativeInput;
+    private _scheduleInputEvent;
+    private _cancelPendingInput;
+    private _dispatchInput;
+    private _handleClear;
+    protected render(): import('lit').TemplateResult<1>;
+    /** Programmatically clears the value and fires rc-search-bar-clear + rc-search-bar-input. */
+    clear(): void;
+    private _onLeadingSlotChange;
+    private _onTrailingSlotChange;
+}
+export default RCSearchBar;

package/dist/types/packages/rc-search-bar/src/rc-search-bar.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const searchBarStyles: import('lit').CSSResult;
+export default searchBarStyles;