@visitwonders/assembly 0.1.0

package/dist/form/form.js

@@ -0,0 +1,120 @@
+import "./form.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { hash } from '@ember/helper';
+import Control from './control.js';
+import TextField from './text-field.js';
+import NumberField from './number-field.js';
+import MoneyField from './money-field.js';
+import SelectField from './select-field.js';
+import CountrySelectField from './country-select-field.js';
+import DatePickerField from './date-picker-field.js';
+import TimePickerField from './time-picker-field.js';
+import DateRangePickerField from './date-range-picker-field.js';
+import RadioGroup from './radio-group.js';
+import CheckboxGroup from './checkbox-group.js';
+import Toggle from './toggle.js';
+import Button from '../action/button.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime';
+
+;
+
+class Form extends Component {
+  static {
+    g(this.prototype, "isSubmitting", [tracked], function () {
+      return false;
+    });
+  }
+  #isSubmitting = (i(this, "isSubmitting"), void 0);
+  static {
+    g(this.prototype, "isSubmitted", [tracked], function () {
+      return false;
+    });
+  }
+  #isSubmitted = (i(this, "isSubmitted"), void 0);
+  static {
+    g(this.prototype, "isDirty", [tracked], function () {
+      return false;
+    });
+  }
+  #isDirty = (i(this, "isDirty"), void 0);
+  get effectiveDisabled() {
+    return this.isSubmitting || (this.args.isDisabled ?? false);
+  }
+  async handleSubmit(event) {
+    event.preventDefault();
+    if (this.isSubmitting) {
+      return;
+    }
+    this.isSubmitting = true;
+    try {
+      const result = this.args.onSubmit?.(event);
+      // Handle async onSubmit (Promise-like)
+      if (result && typeof result.then === 'function') {
+        await result;
+      }
+      this.isSubmitted = true;
+    } catch {
+      // Error is swallowed - consumer should handle errors in their onSubmit
+    } finally {
+      this.isSubmitting = false;
+    }
+  }
+  static {
+    n(this.prototype, "handleSubmit", [action]);
+  }
+  handleReset() {
+    if (this.isSubmitting) {
+      return;
+    }
+    this.isSubmitted = false;
+    this.isDirty = false;
+    this.args.onReset?.();
+  }
+  static {
+    n(this.prototype, "handleReset", [action]);
+  }
+  handleInput() {
+    if (!this.isDirty) {
+      this.isDirty = true;
+    }
+  }
+  static {
+    n(this.prototype, "handleInput", [action]);
+  }
+  reset() {
+    this.handleReset();
+  }
+  static {
+    n(this.prototype, "reset", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<form class=\"assembly-form_ee0c8bf9e\" data-test-form data-submitting={{if this.isSubmitting \"true\" \"false\"}} data-submitted={{if this.isSubmitted \"true\" \"false\"}} data-dirty={{if this.isDirty \"true\" \"false\"}} data-disabled={{if this.effectiveDisabled \"true\" \"false\"}} {{on \"submit\" this.handleSubmit}} {{on \"reset\" this.handleReset}} {{on \"input\" this.handleInput}} ...attributes>\n  {{yield (hash Control=(component Control isDisabled=this.effectiveDisabled) TextField=(component TextField isDisabled=this.effectiveDisabled) NumberField=(component NumberField isDisabled=this.effectiveDisabled) MoneyField=(component MoneyField isDisabled=this.effectiveDisabled) SelectField=(component SelectField isDisabled=this.effectiveDisabled) CountrySelectField=(component CountrySelectField isDisabled=this.effectiveDisabled) DatePickerField=(component DatePickerField isDisabled=this.effectiveDisabled) TimePickerField=(component TimePickerField isDisabled=this.effectiveDisabled) DateRangePickerField=(component DateRangePickerField isDisabled=this.effectiveDisabled) RadioGroup=(component RadioGroup disabled=this.effectiveDisabled) CheckboxGroup=(component CheckboxGroup isDisabled=this.effectiveDisabled) Toggle=(component Toggle isDisabled=this.effectiveDisabled) Button=(component Button isDisabled=this.effectiveDisabled) isSubmitting=this.isSubmitting isSubmitted=this.isSubmitted isDirty=this.isDirty reset=this.reset)}}\n</form>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        hash,
+        Control,
+        TextField,
+        NumberField,
+        MoneyField,
+        SelectField,
+        CountrySelectField,
+        DatePickerField,
+        TimePickerField,
+        DateRangePickerField,
+        RadioGroup,
+        CheckboxGroup,
+        Toggle,
+        Button
+      })
+    }), this);
+  }
+}
+
+export { Form as default };
+//# sourceMappingURL=form.js.map

package/dist/form/form.js.map

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

package/dist/form/help-text.css

@@ -0,0 +1,7 @@
+/* src/form/help-text.css */
+.help-text_e4685b9e4 {
+  display: block;
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  line-height: var(--line-height-normal);
+}

package/dist/form/help-text.js

@@ -0,0 +1,13 @@
+import "./help-text.css"
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import templateOnly from '@ember/component/template-only';
+
+;
+
+const HelpText = setComponentTemplate(precompileTemplate("<span class=\"help-text_e4685b9e4\" id={{@id}} data-test-form-help-text ...attributes>\n  {{yield}}\n</span>", {
+  strictMode: true
+}), templateOnly());
+
+export { HelpText as default };
+//# sourceMappingURL=help-text.js.map

package/dist/form/help-text.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"help-text.js","sources":[],"sourcesContent":[],"names":[],"mappings":""}

package/dist/form/index.js

@@ -0,0 +1,33 @@
+export { default as Calendar } from './calendar.js';
+export { default as Checkbox } from './checkbox.js';
+export { default as CheckboxGroup } from './checkbox-group.js';
+export { default as Control } from './control.js';
+export { default as CountrySelect } from './country-select.js';
+export { default as CountrySelectField } from './country-select-field.js';
+export { default as DatePicker } from './date-picker.js';
+export { default as DatePickerField } from './date-picker-field.js';
+export { default as DateRangePicker } from './date-range-picker.js';
+export { default as DateRangePickerField } from './date-range-picker-field.js';
+export { default as ErrorMessage } from './error-message.js';
+export { default as Field } from './field.js';
+export { default as Form } from './form.js';
+export { default as HelpText } from './help-text.js';
+export { default as Input } from './input.js';
+export { default as Label } from './label.js';
+export { default as MoneyField } from './money-field.js';
+export { default as NumberField } from './number-field.js';
+export { SelectOption as Option, SelectOptionGroup as OptionGroup, default as Select } from './select.js';
+export { default as Radio } from './radio.js';
+export { default as RadioGroup } from './radio-group.js';
+export { default as SearchInput } from './search-input.js';
+export { default as SelectField } from './select-field.js';
+export { default as Textarea } from './textarea.js';
+export { default as TextField } from './text-field.js';
+export { default as Toggle } from './toggle.js';
+export { default as ToggleField } from './toggle-field.js';
+export { default as ToggleGroup } from './toggle-group.js';
+export { default as Listbox } from './listbox.js';
+export { default as MultiSelect } from './multi-select.js';
+export { default as TimePicker } from './time-picker.js';
+export { default as TimePickerField } from './time-picker-field.js';
+//# sourceMappingURL=index.js.map

package/dist/form/index.js.map

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

package/dist/form/input.css

@@ -0,0 +1,176 @@
+/* src/form/input.css */
+/* Input Wrapper */
+.input-wrapper_ef268a5e9 {
+  display: inline-flex;
+  align-items: stretch;
+  position: relative;
+  width: 100%;
+  font-family: inherit;
+}
+
+.input-wrapper_ef268a5e9[data-full-width="false"] {
+  width: auto;
+}
+
+/* Sizes */
+.input-wrapper_ef268a5e9[data-size="sm"] {
+  height: var(--input-height-sm);
+  font-size: var(--font-size-sm);
+}
+
+.input-wrapper_ef268a5e9[data-size="md"] {
+  height: var(--input-height-md);
+  font-size: var(--font-size-md);
+}
+
+.input-wrapper_ef268a5e9[data-size="lg"] {
+  height: var(--input-height-lg);
+  font-size: var(--font-size-lg);
+}
+
+/* Input Element */
+.input_ef268a5e9 {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  box-sizing: border-box;
+  border: var(--border-width-1) solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg);
+  color: var(--color-text);
+  font-family: inherit;
+  font-size: inherit;
+  line-height: var(--line-height-tight);
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+/* Size-specific padding */
+.input-wrapper_ef268a5e9[data-size="sm"] .input_ef268a5e9 {
+  padding: 0 var(--input-padding-horizontal-sm);
+}
+
+.input-wrapper_ef268a5e9[data-size="md"] .input_ef268a5e9 {
+  padding: 0 var(--input-padding-horizontal-md);
+}
+
+.input-wrapper_ef268a5e9[data-size="lg"] .input_ef268a5e9 {
+  padding: 0 var(--input-padding-horizontal-lg);
+}
+
+/* Placeholder */
+.input_ef268a5e9::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* Hover */
+.input_ef268a5e9:hover:not(:disabled, :focus, :read-only) {
+  border-color: var(--color-border-control-hover);
+}
+
+/* Focus */
+.input_ef268a5e9:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+/* Filled Variant */
+.input-wrapper_ef268a5e9[data-variant="filled"] .input_ef268a5e9 {
+  background-color: var(--color-bg-surface-sunken);
+  border-color: transparent;
+}
+
+.input-wrapper_ef268a5e9[data-variant="filled"]
+  .input_ef268a5e9:hover:not(:disabled, :focus, :read-only) {
+  border-color: var(--color-border-control);
+}
+
+.input-wrapper_ef268a5e9[data-variant="filled"] .input_ef268a5e9:focus {
+  background-color: var(--color-bg);
+  border-color: var(--color-border-focus);
+}
+
+/* Invalid State */
+.input-wrapper_ef268a5e9[data-invalid="true"] .input_ef268a5e9 {
+  border-color: var(--color-border-critical);
+}
+
+.input-wrapper_ef268a5e9[data-invalid="true"] .input_ef268a5e9:focus {
+  box-shadow: var(--focus-ring-critical);
+}
+
+/* Disabled State */
+.input_ef268a5e9:disabled {
+  background-color: var(--color-bg-disabled);
+  color: var(--color-text-disabled);
+  border-color: var(--color-border-control-disabled);
+  cursor: not-allowed;
+}
+
+/* Read-only State */
+.input_ef268a5e9:read-only {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-readonly);
+  cursor: default;
+}
+
+/* Prefix and Suffix */
+.input-prefix_ef268a5e9,
+.input-suffix_ef268a5e9 {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--spacing-3);
+  background-color: var(--color-bg-surface-sunken);
+  border: var(--border-width-1) solid var(--color-border-control);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  font-size: inherit;
+}
+
+.input-prefix_ef268a5e9 {
+  border-right: none;
+  border-radius: var(--radius-md) 0 0 var(--radius-md);
+}
+
+.input-suffix_ef268a5e9 {
+  border-left: none;
+  border-radius: 0 var(--radius-md) var(--radius-md) 0;
+}
+
+/* Hide empty prefix/suffix containers */
+.input-prefix_ef268a5e9:empty,
+.input-suffix_ef268a5e9:empty {
+  display: none;
+}
+
+/* Input border radius when prefix/suffix present (non-empty) */
+.input-prefix_ef268a5e9:not(:empty) + .input_ef268a5e9 {
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+.input_ef268a5e9:has(+ .input-suffix_ef268a5e9:not(:empty)) {
+  border-top-right-radius: 0;
+  border-bottom-right-radius: 0;
+}
+
+/* Disabled state for prefix/suffix */
+.input-wrapper_ef268a5e9[data-disabled="true"] .input-prefix_ef268a5e9,
+.input-wrapper_ef268a5e9[data-disabled="true"] .input-suffix_ef268a5e9 {
+  background-color: var(--color-bg-disabled);
+  color: var(--color-text-disabled);
+  border-color: var(--color-border-control-disabled);
+}
+
+/* Invalid state for prefix/suffix borders */
+.input-wrapper_ef268a5e9[data-invalid="true"] .input-prefix_ef268a5e9 {
+  border-color: var(--color-border-critical);
+  border-right: none;
+}
+
+.input-wrapper_ef268a5e9[data-invalid="true"] .input-suffix_ef268a5e9 {
+  border-color: var(--color-border-critical);
+  border-left: none;
+}

package/dist/form/input.js

@@ -0,0 +1,43 @@
+import "./input.css"
+import Component from '@glimmer/component';
+import { modifier } from 'ember-modifier';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class Input extends Component {
+  get type() {
+    return this.args.type ?? 'text';
+  }
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get variant() {
+    return this.args.variant ?? 'outline';
+  }
+  get autoComplete() {
+    return this.args.autoComplete ?? 'off';
+  }
+  get isFullWidth() {
+    return this.args.isFullWidth ?? true;
+  }
+  get inputValue() {
+    // Controlled mode: use value prop
+    // Uncontrolled mode: use defaultValue for initial render
+    return this.args.value ?? this.args.defaultValue;
+  }
+  autoFocusModifier = modifier(element => {
+    if (this.args.autoFocus) {
+      element.focus();
+    }
+  });
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"input-wrapper_ef268a5e9\" data-size={{this.size}} data-variant={{this.variant}} data-disabled={{if @isDisabled \"true\"}} data-readonly={{if @isReadOnly \"true\"}} data-invalid={{if @isInvalid \"true\"}} data-full-width={{if this.isFullWidth \"true\" \"false\"}} data-test-input-wrapper>\n  {{#if (has-block \"prefix\")}}\n    <span class=\"input-prefix_ef268a5e9\" data-test-input-prefix>{{yield to=\"prefix\"}}</span>\n  {{else if @prefix}}\n    <span class=\"input-prefix_ef268a5e9\" data-test-input-prefix>{{@prefix}}</span>\n  {{/if}}\n\n  <input class=\"input_ef268a5e9\" id={{@id}} type={{this.type}} name={{@name}} value={{this.inputValue}} placeholder={{@placeholder}} disabled={{@isDisabled}} readonly={{@isReadOnly}} required={{@isRequired}} autocomplete={{this.autoComplete}} inputmode={{@inputMode}} min={{@min}} max={{@max}} step={{@step}} pattern={{@pattern}} maxlength={{@maxLength}} aria-invalid={{if @isInvalid \"true\"}} aria-required={{if @isRequired \"true\"}} aria-describedby={{@aria-describedby}} {{this.autoFocusModifier}} data-test-input ...attributes />\n\n  {{#if (has-block \"suffix\")}}\n    <span class=\"input-suffix_ef268a5e9\" data-test-input-suffix>{{yield to=\"suffix\"}}</span>\n  {{else if @suffix}}\n    <span class=\"input-suffix_ef268a5e9\" data-test-input-suffix>{{@suffix}}</span>\n  {{/if}}\n</div>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { Input as default };
+//# sourceMappingURL=input.js.map

package/dist/form/input.js.map

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

package/dist/form/label.css

@@ -0,0 +1,59 @@
+/* src/form/label.css */
+.label_e7fa6e7a3 {
+  display: flex;
+  align-items: baseline;
+  gap: var(--spacing-1);
+  font-weight: var(--font-weight-medium);
+  color: var(--color-text);
+  line-height: var(--line-height-tight);
+}
+
+/* Size variants */
+.label_e7fa6e7a3[data-size="sm"] {
+  font-size: var(--font-size-xs);
+}
+
+.label_e7fa6e7a3[data-size="md"] {
+  font-size: var(--font-size-sm);
+}
+
+.label_e7fa6e7a3[data-size="lg"] {
+  font-size: var(--font-size-md);
+}
+
+/* Disabled state */
+.label_e7fa6e7a3[data-disabled="true"] {
+  color: var(--color-text-disabled);
+}
+
+/* Visually hidden (accessible) */
+.label_e7fa6e7a3[data-visually-hidden="true"] {
+  position: absolute;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip: rect(0, 0, 0, 0);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* Required indicator */
+.label-required_e7fa6e7a3 {
+  color: var(--color-text-critical);
+  font-weight: var(--font-weight-semibold);
+}
+
+/* Optional indicator */
+.label-optional_e7fa6e7a3 {
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-regular);
+}
+
+/* Secondary label */
+.label-secondary_e7fa6e7a3 {
+  color: var(--color-text-secondary);
+  font-weight: var(--font-weight-regular);
+  font-style: italic;
+}

package/dist/form/label.js

@@ -0,0 +1,54 @@
+import "./label.css"
+import Component from '@glimmer/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class Label extends Component {
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get showRequiredIndicator() {
+    const {
+      isRequired,
+      requiredIndicator
+    } = this.args;
+    // Show when required AND requiredIndicator is not explicitly false
+    return isRequired === true && requiredIndicator !== false;
+  }
+  get requiredIndicatorText() {
+    const {
+      requiredIndicator
+    } = this.args;
+    if (typeof requiredIndicator === 'string') {
+      return requiredIndicator;
+    }
+    return '*';
+  }
+  get showOptionalIndicator() {
+    const {
+      isRequired,
+      optionalIndicator
+    } = this.args;
+    // Show when NOT required AND optionalIndicator is truthy
+    return isRequired !== true && !!optionalIndicator;
+  }
+  get optionalIndicatorText() {
+    const {
+      optionalIndicator
+    } = this.args;
+    if (typeof optionalIndicator === 'string') {
+      return optionalIndicator;
+    }
+    return '(optional)';
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<label class=\"label_e7fa6e7a3\" for={{@for}} data-size={{this.size}} data-disabled={{if @isDisabled \"true\"}} data-visually-hidden={{if @isVisuallyHidden \"true\"}} data-test-form-label ...attributes>\n  <span class=\"label-text\" data-test-label-text>{{yield}}</span>\n  {{#if this.showRequiredIndicator}}\n    <span class=\"label-required_e7fa6e7a3\" data-test-label-required aria-hidden=\"true\">{{this.requiredIndicatorText}}</span>\n  {{/if}}\n  {{#if this.showOptionalIndicator}}\n    <span class=\"label-optional_e7fa6e7a3\" data-test-label-optional>{{this.optionalIndicatorText}}</span>\n  {{/if}}\n  {{#if @secondaryLabel}}\n    <span class=\"label-secondary_e7fa6e7a3\" data-test-label-secondary>{{@secondaryLabel}}</span>\n  {{/if}}\n</label>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { Label as default };
+//# sourceMappingURL=label.js.map

package/dist/form/label.js.map

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

package/dist/form/listbox.css

@@ -0,0 +1,125 @@
+/* src/form/listbox.css */
+/* ============================================================================
+   Listbox Component Styles
+   ============================================================================ */
+
+/* Container */
+.listbox_efb584ef0 {
+  display: flex;
+  flex-direction: column;
+  overflow-y: auto;
+  background-color: var(--color-bg-surface);
+  border: 1px solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  outline: none;
+  max-height: 20rem;
+}
+
+/* Focus state */
+.listbox_efb584ef0:focus {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+/* Disabled state */
+.listbox_efb584ef0[data-disabled="true"] {
+  opacity: 0.5;
+  cursor: not-allowed;
+  pointer-events: none;
+}
+
+/* ============================================================================
+   Option Styles
+   ============================================================================ */
+
+.listbox-option_efb584ef0 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: var(--spacing-2);
+  padding: var(--spacing-2) var(--spacing-8) var(--spacing-2) var(--spacing-3);
+  min-height: 2.25rem;
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-normal);
+  color: var(--color-text);
+  cursor: pointer;
+  user-select: none;
+  transition: background-color var(--duration-fast) var(--easing-default);
+}
+
+/* Hover state */
+.listbox-option_efb584ef0:hover:not([data-disabled="true"]) {
+  background-color: var(--color-bg-fill-interactive-hover);
+}
+
+/* Focused state (via keyboard navigation) - light grey background */
+.listbox-option_efb584ef0[data-focused="true"]:not([data-disabled="true"]) {
+  background-color: var(--color-bg-fill-interactive-hover);
+}
+
+/* Selected state - checkmark on the right */
+.listbox-option_efb584ef0[data-selected="true"]::after {
+  content: "";
+  position: absolute;
+  right: var(--spacing-3);
+  top: 50%;
+  transform: translateY(-50%);
+  width: 1rem;
+  height: 1rem;
+  background-color: var(--color-text);
+  mask-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M13.5 4.5L6 12L2.5 8.5' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  mask-size: contain;
+  mask-position: center;
+  mask-repeat: no-repeat;
+}
+
+/* Disabled state */
+.listbox-option_efb584ef0[data-disabled="true"] {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+/* Disabled + Selected state */
+.listbox-option_efb584ef0[data-disabled="true"][data-selected="true"]::after {
+  background-color: var(--color-text-disabled);
+}
+
+/* ============================================================================
+   Group Styles
+   ============================================================================ */
+
+.listbox-group_efb584ef0 {
+  display: flex;
+  flex-direction: column;
+}
+
+/* Add separator between groups (except first) */
+.listbox-group_efb584ef0 + .listbox-group_efb584ef0 {
+  border-top: 1px solid var(--color-border-subtle);
+  margin-top: var(--spacing-1);
+  padding-top: var(--spacing-1);
+}
+
+.listbox-group-label_efb584ef0 {
+  padding: var(--spacing-2) var(--spacing-3);
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+  user-select: none;
+}
+
+/* ============================================================================
+   Empty State
+   ============================================================================ */
+
+.listbox-empty_efb584ef0 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: var(--spacing-4) var(--spacing-3);
+  font-size: var(--font-size-sm);
+  color: var(--color-text-secondary);
+  text-align: center;
+}