@visitwonders/assembly 0.1.0

package/dist/form/multi-select.js

@@ -0,0 +1,429 @@
+import "./multi-select.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { guidFor } from '@ember/object/internals';
+import { on } from '@ember/modifier';
+import { fn } from '@ember/helper';
+import { modifier } from 'ember-modifier';
+import Popover from '../overlay/popover.js';
+import Tag from '../status/tag.js';
+import Icon from '../media/icon.js';
+import { ChevronDown, X } from 'lucide';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i } from 'decorator-transforms/runtime';
+
+;
+
+// ============================================================================
+// Main Component
+// ============================================================================
+class MultiSelect extends Component {
+  static {
+    g(this.prototype, "isOpen", [tracked], function () {
+      return false;
+    });
+  }
+  #isOpen = (i(this, "isOpen"), void 0);
+  static {
+    g(this.prototype, "searchValue", [tracked], function () {
+      return '';
+    });
+  }
+  #searchValue = (i(this, "searchValue"), void 0);
+  static {
+    g(this.prototype, "focusedValue", [tracked], function () {
+      return null;
+    });
+  }
+  #focusedValue = (i(this, "focusedValue"), void 0);
+  inputElement = null;
+  // ============================================================================
+  // Computed Properties
+  // ============================================================================
+  get componentId() {
+    return guidFor(this);
+  }
+  get listboxId() {
+    return `${this.componentId}-listbox`;
+  }
+  get selectedValues() {
+    return this.args.value ?? [];
+  }
+  get placeholder() {
+    return this.args.placeholder ?? 'Select options...';
+  }
+  get searchPlaceholder() {
+    return this.args.searchPlaceholder ?? 'Search...';
+  }
+  get maxDisplayedChips() {
+    return this.args.maxDisplayedChips ?? 2;
+  }
+  /** Normalize options to consistent format */
+  get normalizedOptions() {
+    const options = this.args.options ?? [];
+    return options.map(option => {
+      if (typeof option === 'string') {
+        return {
+          value: option,
+          label: option,
+          disabled: false
+        };
+      }
+      const getValue = this.args.getOptionValue ?? (o => o.value);
+      const getLabel = this.args.getOptionLabel ?? (o => o.label);
+      const isDisabled = this.args.isOptionDisabled ?? (o => o.disabled ?? false);
+      const getGroup = this.args.groupBy;
+      return {
+        value: getValue(option),
+        label: getLabel(option),
+        disabled: isDisabled(option),
+        group: getGroup ? getGroup(option) : undefined
+      };
+    });
+  }
+  /** Filter options based on search value */
+  get filteredOptions() {
+    if (!this.searchValue.trim()) {
+      return this.normalizedOptions;
+    }
+    const searchLower = this.searchValue.toLowerCase();
+    return this.normalizedOptions.filter(option => option.label.toLowerCase().includes(searchLower));
+  }
+  /** Get enabled (non-disabled) options for navigation */
+  get enabledFilteredOptions() {
+    return this.filteredOptions.filter(opt => !opt.disabled);
+  }
+  /** Group options by group key */
+  get groupedOptions() {
+    const groups = new Map();
+    for (const option of this.filteredOptions) {
+      const groupKey = option.group ?? null;
+      const existing = groups.get(groupKey) ?? [];
+      existing.push(option);
+      groups.set(groupKey, existing);
+    }
+    const result = [];
+    for (const [group, options] of groups) {
+      result.push({
+        group,
+        options
+      });
+    }
+    return result;
+  }
+  get hasGroups() {
+    return this.groupedOptions.some(g => g.group !== null);
+  }
+  get isEmpty() {
+    return this.filteredOptions.length === 0;
+  }
+  /** Get selected options with their labels */
+  get selectedOptions() {
+    return this.selectedValues.map(value => this.normalizedOptions.find(o => o.value === value)).filter(o => o !== undefined);
+  }
+  /** Chips to display (respecting maxDisplayedChips) */
+  get displayedChips() {
+    return this.selectedOptions.slice(0, this.maxDisplayedChips);
+  }
+  /** Number of additional chips not displayed */
+  get hiddenChipsCount() {
+    return Math.max(0, this.selectedOptions.length - this.maxDisplayedChips);
+  }
+  /** Whether max selections has been reached */
+  get isMaxSelectionsReached() {
+    if (this.args.maxSelections === undefined) return false;
+    return this.selectedValues.length >= this.args.maxSelections;
+  }
+  get activedescendant() {
+    if (this.focusedValue) {
+      return this.getOptionId(this.focusedValue);
+    }
+    return undefined;
+  }
+  get ariaExpanded() {
+    return this.isOpen ? 'true' : 'false';
+  }
+  get ariaRequired() {
+    return this.args.isRequired ? 'true' : undefined;
+  }
+  get ariaInvalid() {
+    return this.args.isInvalid ? 'true' : undefined;
+  }
+  // ============================================================================
+  // Methods
+  // ============================================================================
+  getOptionId = value => {
+    const sanitizedValue = value.replace(/[^a-zA-Z0-9-_]/g, '_');
+    return `${this.componentId}-option-${sanitizedValue}`;
+  };
+  getGroupId = groupName => {
+    const sanitizedGroup = groupName.replace(/[^a-zA-Z0-9-_]/g, '_');
+    return `${this.componentId}-group-${sanitizedGroup}`;
+  };
+  isSelected = value => {
+    return this.selectedValues.includes(value);
+  };
+  isFocused = value => {
+    return this.focusedValue === value;
+  };
+  toggleOption = value => {
+    const option = this.normalizedOptions.find(o => o.value === value);
+    if (!option || option.disabled) return;
+    const current = this.selectedValues.slice();
+    const index = current.indexOf(value);
+    let newValues;
+    if (index >= 0) {
+      // Remove if already selected
+      current.splice(index, 1);
+      newValues = current;
+    } else {
+      // Check max selections before adding
+      if (this.isMaxSelectionsReached) return;
+      newValues = [...current, value];
+    }
+    this.args.onChange?.(newValues);
+  };
+  removeOption = value => {
+    const newValues = this.selectedValues.filter(v => v !== value);
+    this.args.onChange?.(newValues);
+    // Return focus to input after chip removal
+    this.inputElement?.focus();
+  };
+  clearAll = () => {
+    this.args.onChange?.([]);
+    this.inputElement?.focus();
+  };
+  setFocusedValue(value) {
+    this.focusedValue = value;
+    // Scroll the focused option into view
+    if (value) {
+      const optionId = this.getOptionId(value);
+      const optionElement = document.getElementById(optionId);
+      optionElement?.scrollIntoView({
+        block: 'nearest'
+      });
+    }
+  }
+  moveFocus(direction) {
+    const enabled = this.enabledFilteredOptions;
+    if (enabled.length === 0) return;
+    const currentIndex = this.focusedValue ? enabled.findIndex(o => o.value === this.focusedValue) : -1;
+    let newIndex;
+    switch (direction) {
+      case 'first':
+        newIndex = 0;
+        break;
+      case 'last':
+        newIndex = enabled.length - 1;
+        break;
+      case 'next':
+        if (currentIndex < 0) {
+          newIndex = 0;
+        } else if (currentIndex >= enabled.length - 1) {
+          newIndex = 0; // Loop
+        } else {
+          newIndex = currentIndex + 1;
+        }
+        break;
+      case 'prev':
+        if (currentIndex < 0) {
+          newIndex = enabled.length - 1;
+        } else if (currentIndex <= 0) {
+          newIndex = enabled.length - 1; // Loop
+        } else {
+          newIndex = currentIndex - 1;
+        }
+        break;
+    }
+    const newOption = enabled[newIndex];
+    if (newOption) {
+      this.setFocusedValue(newOption.value);
+    }
+  }
+  // ============================================================================
+  // Event Handlers
+  // ============================================================================
+  openDropdown = () => {
+    if (this.args.isDisabled) return;
+    this.isOpen = true;
+    // Set initial focus to first selected or first enabled option
+    if (this.selectedValues.length > 0) {
+      const firstSelected = this.enabledFilteredOptions.find(o => this.selectedValues.includes(o.value));
+      if (firstSelected) {
+        this.setFocusedValue(firstSelected.value);
+      }
+    } else {
+      const firstOption = this.enabledFilteredOptions[0];
+      if (firstOption) {
+        this.setFocusedValue(firstOption.value);
+      }
+    }
+  };
+  closeDropdown = () => {
+    this.isOpen = false;
+    this.searchValue = '';
+    this.focusedValue = null;
+  };
+  handleOpenChange = open => {
+    if (open) {
+      this.openDropdown();
+    } else {
+      this.closeDropdown();
+    }
+  };
+  handleTriggerClick = event => {
+    // Don't handle if clicking on clear button or chip remove buttons
+    const target = event.target;
+    if (target.closest('[data-test-multi-select-clear]') || target.closest('[data-test-tag-remove]')) {
+      return;
+    }
+    if (!this.isOpen) {
+      this.openDropdown();
+    }
+    // Always focus the input when clicking the trigger
+    this.inputElement?.focus();
+  };
+  handleInputClick = event => {
+    // Prevent trigger click from also firing
+    event.stopPropagation();
+    if (!this.isOpen) {
+      this.openDropdown();
+    }
+  };
+  handleInputChange = event => {
+    const input = event.target;
+    this.searchValue = input.value;
+    // Reset focus when search changes
+    if (this.enabledFilteredOptions.length > 0) {
+      this.setFocusedValue(this.enabledFilteredOptions[0].value);
+    } else {
+      this.setFocusedValue(null);
+    }
+    // Open dropdown if not already open
+    if (!this.isOpen) {
+      this.openDropdown();
+    }
+  };
+  handleInputFocus = event => {
+    this.args.onFocus?.(event);
+    this.openDropdown();
+  };
+  handleInputBlur = event => {
+    // Don't trigger blur if focus is moving within the component
+    const relatedTarget = event.relatedTarget;
+    if (relatedTarget?.closest('.multi-select')) {
+      return;
+    }
+    this.args.onBlur?.(event);
+  };
+  handleKeyDown = event => {
+    if (this.args.isDisabled) return;
+    switch (event.key) {
+      case 'ArrowDown':
+        event.preventDefault();
+        if (!this.isOpen) {
+          this.openDropdown();
+        } else {
+          this.moveFocus('next');
+        }
+        break;
+      case 'ArrowUp':
+        event.preventDefault();
+        if (!this.isOpen) {
+          this.openDropdown();
+        } else {
+          this.moveFocus('prev');
+        }
+        break;
+      case 'Home':
+        if (this.isOpen) {
+          event.preventDefault();
+          this.moveFocus('first');
+        }
+        break;
+      case 'End':
+        if (this.isOpen) {
+          event.preventDefault();
+          this.moveFocus('last');
+        }
+        break;
+      case 'Enter':
+        event.preventDefault();
+        if (this.isOpen && this.focusedValue) {
+          this.toggleOption(this.focusedValue);
+        } else if (!this.isOpen) {
+          this.openDropdown();
+        }
+        break;
+      case ' ':
+        // Only handle space when dropdown is open and there's no search text
+        if (this.isOpen && this.focusedValue && !this.searchValue) {
+          event.preventDefault();
+          this.toggleOption(this.focusedValue);
+        }
+        break;
+      case 'Escape':
+        if (this.isOpen) {
+          event.preventDefault();
+          this.closeDropdown();
+          this.inputElement?.focus();
+        }
+        break;
+      case 'Backspace':
+        // Remove last chip if search is empty
+        if (!this.searchValue && this.selectedValues.length > 0) {
+          const lastValue = this.selectedValues[this.selectedValues.length - 1];
+          if (lastValue) {
+            this.removeOption(lastValue);
+          }
+        }
+        break;
+      case 'Tab':
+        if (this.isOpen) {
+          this.closeDropdown();
+        }
+        break;
+    }
+  };
+  handleOptionClick = value => {
+    this.toggleOption(value);
+    // Keep focus on input for continued selection
+    this.inputElement?.focus();
+  };
+  handleOptionMouseEnter = value => {
+    const option = this.normalizedOptions.find(o => o.value === value);
+    if (option && !option.disabled) {
+      this.setFocusedValue(value);
+    }
+  };
+  // ============================================================================
+  // Modifiers
+  // ============================================================================
+  setupInput = modifier(element => {
+    this.inputElement = element;
+    return () => {
+      this.inputElement = null;
+    };
+  });
+  // ============================================================================
+  // Template
+  // ============================================================================
+  static {
+    setComponentTemplate(precompileTemplate("<Popover @trigger=\"manual\" @open={{this.isOpen}} @onOpenChange={{this.handleOpenChange}} @dismissOnClickOutside={{true}} @dismissOnEscape={{true}} class=\"multi-select_ed2d11911\" data-invalid={{if @isInvalid \"true\"}} data-disabled={{if @isDisabled \"true\"}} data-open={{if this.isOpen \"true\"}} data-test-multi-select ...attributes as |popover|>\n  {{!-- Hidden inputs for form submission --}}\n  {{#if @name}}\n    {{#each this.selectedValues as |value|}}\n      <input type=\"hidden\" name={{@name}} value={{value}} data-test-multi-select-input />\n    {{/each}}\n  {{/if}}\n\n  <popover.Trigger class=\"multi-select-trigger-wrapper_ed2d11911\">\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"multi-select-trigger_ed2d11911\" id={{@id}} role=\"combobox\" aria-haspopup=\"listbox\" aria-expanded={{this.ariaExpanded}} aria-controls={{this.listboxId}} aria-required={{this.ariaRequired}} aria-invalid={{this.ariaInvalid}} aria-describedby={{@aria-describedby}} data-test-multi-select-trigger {{on \"click\" this.handleTriggerClick}}>\n      {{!-- Selected chips --}}\n      {{#if this.selectedOptions.length}}\n        <div class=\"multi-select-chips_ed2d11911\" role=\"group\" aria-label=\"Selected items\" data-test-multi-select-chips>\n          {{#each this.displayedChips as |option|}}\n            <Tag @size=\"sm\" @onRemove={{unless @isDisabled (fn this.removeOption option.value)}} @removeLabel=\"Remove {{option.label}}\" @disabled={{@isDisabled}} data-test-multi-select-chip data-test-multi-select-chip-value={{option.value}}>\n              {{option.label}}\n            </Tag>\n          {{/each}}\n          {{#if this.hiddenChipsCount}}\n            <span class=\"multi-select-more_ed2d11911\" data-test-multi-select-more>+{{this.hiddenChipsCount}} more</span>\n          {{/if}}\n        </div>\n      {{/if}}\n\n      {{!-- Search input - lint disabled: label is provided via aria-label --}}\n      {{!-- template-lint-disable require-input-label --}}\n      <input type=\"text\" class=\"multi-select-input_ed2d11911\" placeholder={{if this.selectedOptions.length this.searchPlaceholder this.placeholder}} value={{this.searchValue}} disabled={{@isDisabled}} autocomplete=\"off\" aria-label={{if this.selectedOptions.length this.searchPlaceholder this.placeholder}} aria-activedescendant={{this.activedescendant}} aria-controls={{this.listboxId}} data-test-multi-select-input-field {{this.setupInput}} {{on \"click\" this.handleInputClick}} {{on \"input\" this.handleInputChange}} {{on \"focus\" this.handleInputFocus}} {{on \"blur\" this.handleInputBlur}} {{on \"keydown\" this.handleKeyDown}} />\n\n      {{!-- Icons --}}\n      <div class=\"multi-select-icons_ed2d11911\">\n        {{#if this.selectedOptions.length}}\n          {{#unless @isDisabled}}\n            <button type=\"button\" class=\"multi-select-clear_ed2d11911\" aria-label=\"Clear all selections\" data-test-multi-select-clear {{on \"click\" this.clearAll}}>\n              <Icon @icon={{X}} @size=\"sm\" />\n            </button>\n          {{/unless}}\n        {{/if}}\n        <Icon @icon={{ChevronDown}} @size=\"sm\" class=\"multi-select-chevron_ed2d11911\" />\n      </div>\n    </div>\n  </popover.Trigger>\n\n  <popover.Content @side=\"bottom\" @align=\"start\" @sideOffset={{4}} @animation=\"scale\" class=\"multi-select-popover-content_ed2d11911\">\n    {{!-- template-lint-disable require-context-role --}}\n    <div id={{this.listboxId}} role=\"listbox\" aria-multiselectable=\"true\" class=\"multi-select-listbox_ed2d11911\" tabindex=\"-1\" data-test-multi-select-listbox>\n      {{#if this.isEmpty}}\n        <div class=\"multi-select-empty_ed2d11911\" data-test-multi-select-empty>\n          {{#if this.searchValue}}\n            No results found\n          {{else}}\n            No options available\n          {{/if}}\n        </div>\n      {{else if this.hasGroups}}\n        {{#each this.groupedOptions as |group|}}\n          {{#if group.group}}\n            <div role=\"group\" aria-labelledby={{this.getGroupId group.group}} class=\"multi-select-group_ed2d11911\" data-test-multi-select-group>\n              <div role=\"presentation\" id={{this.getGroupId group.group}} class=\"multi-select-group-label_ed2d11911\" data-test-multi-select-group-label>\n                {{group.group}}\n              </div>\n              {{#each group.options as |option|}}\n                <div role=\"option\" id={{this.getOptionId option.value}} class=\"multi-select-option_ed2d11911\" aria-selected={{if (this.isSelected option.value) \"true\" \"false\"}} aria-disabled={{if option.disabled \"true\"}} data-selected={{if (this.isSelected option.value) \"true\" \"false\"}} data-focused={{if (this.isFocused option.value) \"true\" \"false\"}} data-disabled={{if option.disabled \"true\" \"false\"}} data-test-multi-select-option data-test-multi-select-option-value={{option.value}} {{on \"click\" (fn this.handleOptionClick option.value)}} {{on \"mouseenter\" (fn this.handleOptionMouseEnter option.value)}}>\n                  <span class=\"multi-select-checkbox_ed2d11911\" aria-hidden=\"true\"></span>\n                  <span class=\"multi-select-option-label_ed2d11911\">{{option.label}}</span>\n                </div>\n              {{/each}}\n            </div>\n          {{else}}\n            {{#each group.options as |option|}}\n              <div role=\"option\" id={{this.getOptionId option.value}} class=\"multi-select-option_ed2d11911\" aria-selected={{if (this.isSelected option.value) \"true\" \"false\"}} aria-disabled={{if option.disabled \"true\"}} data-selected={{if (this.isSelected option.value) \"true\" \"false\"}} data-focused={{if (this.isFocused option.value) \"true\" \"false\"}} data-disabled={{if option.disabled \"true\" \"false\"}} data-test-multi-select-option data-test-multi-select-option-value={{option.value}} {{on \"click\" (fn this.handleOptionClick option.value)}} {{on \"mouseenter\" (fn this.handleOptionMouseEnter option.value)}}>\n                <span class=\"multi-select-checkbox_ed2d11911\" aria-hidden=\"true\"></span>\n                <span class=\"multi-select-option-label_ed2d11911\">{{option.label}}</span>\n              </div>\n            {{/each}}\n          {{/if}}\n        {{/each}}\n      {{else}}\n        {{#each this.filteredOptions as |option|}}\n          <div role=\"option\" id={{this.getOptionId option.value}} class=\"multi-select-option_ed2d11911\" aria-selected={{if (this.isSelected option.value) \"true\" \"false\"}} aria-disabled={{if option.disabled \"true\"}} data-selected={{if (this.isSelected option.value) \"true\" \"false\"}} data-focused={{if (this.isFocused option.value) \"true\" \"false\"}} data-disabled={{if option.disabled \"true\" \"false\"}} data-test-multi-select-option data-test-multi-select-option-value={{option.value}} {{on \"click\" (fn this.handleOptionClick option.value)}} {{on \"mouseenter\" (fn this.handleOptionMouseEnter option.value)}}>\n            <span class=\"multi-select-checkbox_ed2d11911\" aria-hidden=\"true\"></span>\n            <span class=\"multi-select-option-label_ed2d11911\">{{option.label}}</span>\n          </div>\n        {{/each}}\n      {{/if}}\n    </div>\n  </popover.Content>\n</Popover>", {
+      strictMode: true,
+      scope: () => ({
+        Popover,
+        on,
+        Tag,
+        fn,
+        Icon,
+        X,
+        ChevronDown
+      })
+    }), this);
+  }
+}
+
+export { MultiSelect as default };
+//# sourceMappingURL=multi-select.js.map

package/dist/form/multi-select.js.map

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

package/dist/form/number-field.css

@@ -0,0 +1,170 @@
+/* src/form/number-field.css */
+/* Number Field Input Wrapper */
+.number-field-input-wrapper_e9ff3bd72 {
+  display: flex;
+  align-items: stretch;
+  height: var(--input-height-md);
+  border: var(--border-width-1) solid var(--color-border-control);
+  border-radius: var(--radius-md);
+  background-color: var(--color-bg);
+  font-size: var(--font-size-md);
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+/* Focus state */
+.number-field-input-wrapper_e9ff3bd72:focus-within {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+/* Invalid state */
+.number-field-input-wrapper_e9ff3bd72[data-invalid="true"] {
+  border-color: var(--color-border-critical);
+}
+
+.number-field-input-wrapper_e9ff3bd72[data-invalid="true"]:focus-within {
+  box-shadow: var(--focus-ring-critical);
+}
+
+/* Disabled state */
+.number-field-input-wrapper_e9ff3bd72[data-disabled="true"] {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-disabled);
+  cursor: not-allowed;
+}
+
+/* Read-only state */
+.number-field-input-wrapper_e9ff3bd72[data-readonly="true"] {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-readonly);
+}
+
+/* Input Element */
+.number-field-input_e9ff3bd72 {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--input-padding-horizontal-md);
+  border: none;
+  background: transparent;
+  color: var(--color-text);
+  font-family: var(--font-family-mono);
+  font-size: inherit;
+  line-height: var(--line-height-tight);
+  text-align: left;
+  /* Remove native number spinner */
+  -moz-appearance: textfield;
+}
+
+.number-field-input_e9ff3bd72::-webkit-outer-spin-button,
+.number-field-input_e9ff3bd72::-webkit-inner-spin-button {
+  -webkit-appearance: none;
+  margin: 0;
+}
+
+.number-field-input_e9ff3bd72:focus {
+  outline: none;
+}
+
+.number-field-input_e9ff3bd72::placeholder {
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+}
+
+.number-field-input_e9ff3bd72:disabled {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+.number-field-input_e9ff3bd72:read-only {
+  cursor: default;
+}
+
+/* Prefix/Suffix */
+.number-field-affix_e9ff3bd72 {
+  display: flex;
+  align-items: center;
+  padding: 0 var(--spacing-3);
+  color: var(--color-text-secondary);
+  white-space: nowrap;
+  user-select: none;
+}
+
+.number-field-prefix_e9ff3bd72 {
+  padding-right: 0;
+}
+
+.number-field-suffix_e9ff3bd72 {
+  padding-left: 0;
+}
+
+.number-field-input-wrapper_e9ff3bd72[data-disabled="true"] .number-field-affix_e9ff3bd72 {
+  color: var(--color-text-disabled);
+}
+
+/* Stepper Buttons Container */
+.number-field-stepper_e9ff3bd72 {
+  display: flex;
+  flex-direction: column;
+  border-left: var(--border-width-1) solid var(--color-border-control);
+}
+
+.number-field-input-wrapper_e9ff3bd72[data-invalid="true"] .number-field-stepper_e9ff3bd72 {
+  border-left-color: var(--color-border-critical);
+}
+
+.number-field-input-wrapper_e9ff3bd72[data-disabled="true"] .number-field-stepper_e9ff3bd72 {
+  border-left-color: var(--color-border-control-disabled);
+}
+
+/* Stepper Buttons */
+.number-field-stepper-button_e9ff3bd72 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 32px;
+  padding: 0;
+  border: none;
+  background: transparent;
+  color: var(--color-icon-secondary);
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.number-field-stepper-button_e9ff3bd72:first-child {
+  border-bottom: var(--border-width-1) solid var(--color-border-control);
+  border-top-right-radius: calc(var(--radius-md) - 1px);
+}
+
+.number-field-stepper-button_e9ff3bd72:last-child {
+  border-bottom-right-radius: calc(var(--radius-md) - 1px);
+}
+
+.number-field-input-wrapper_e9ff3bd72[data-invalid="true"]
+  .number-field-stepper-button_e9ff3bd72:first-child {
+  border-bottom-color: var(--color-border-critical);
+}
+
+.number-field-stepper-button_e9ff3bd72:hover:not(:disabled) {
+  background-color: var(--color-bg-surface-hover);
+  color: var(--color-icon-primary);
+}
+
+.number-field-stepper-button_e9ff3bd72:active:not(:disabled) {
+  background-color: var(--color-bg-surface-pressed);
+}
+
+.number-field-stepper-button_e9ff3bd72:disabled {
+  color: var(--color-icon-disabled);
+  cursor: not-allowed;
+}
+
+/* Adjust input padding when stepper is present */
+.number-field-input-wrapper_e9ff3bd72[data-has-stepper="true"] .number-field-input_e9ff3bd72 {
+  padding-right: var(--spacing-2);
+}