@visitwonders/assembly 0.1.0

package/dist/form/textarea.css

@@ -0,0 +1,139 @@
+/* src/form/textarea.css */
+/* Wrapper */
+.textarea-wrapper_eb3566bbf {
+  display: flex;
+  flex-direction: column;
+  gap: var(--spacing-1);
+  width: 100%;
+}
+
+.textarea-wrapper_eb3566bbf[data-full-width="false"] {
+  width: auto;
+}
+
+/* Textarea element */
+.textarea_eb3566bbf {
+  width: 100%;
+  padding: var(--spacing-2);
+  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: var(--font-size-13);
+  line-height: var(--line-height-1-25);
+  transition:
+    border-color var(--transition-fast),
+    box-shadow var(--transition-fast);
+}
+
+.textarea_eb3566bbf::placeholder {
+  color: var(--color-text-tertiary);
+}
+
+/* Hover state */
+.textarea_eb3566bbf:hover:not(:disabled, :focus, :read-only) {
+  border-color: var(--color-border-control-hover);
+}
+
+/* Focus state */
+.textarea_eb3566bbf:focus {
+  outline: none;
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+/* Size variants */
+.textarea-wrapper_eb3566bbf[data-size="sm"] .textarea_eb3566bbf {
+  padding: var(--spacing-1) var(--spacing-2);
+  font-size: var(--font-size-12);
+}
+
+.textarea-wrapper_eb3566bbf[data-size="md"] .textarea_eb3566bbf {
+  padding: var(--spacing-2);
+  font-size: var(--font-size-13);
+}
+
+.textarea-wrapper_eb3566bbf[data-size="lg"] .textarea_eb3566bbf {
+  padding: var(--spacing-3) var(--spacing-4);
+  font-size: var(--font-size-16);
+}
+
+/* Filled variant */
+.textarea-wrapper_eb3566bbf[data-variant="filled"] .textarea_eb3566bbf {
+  background-color: var(--color-bg-disabled);
+  border-color: transparent;
+}
+
+.textarea-wrapper_eb3566bbf[data-variant="filled"]
+  .textarea_eb3566bbf:hover:not(:disabled, :focus, :read-only) {
+  border-color: transparent;
+  background-color: var(--color-bg-surface-sunken);
+}
+
+.textarea-wrapper_eb3566bbf[data-variant="filled"] .textarea_eb3566bbf:focus {
+  background-color: var(--color-bg);
+  border-color: var(--color-border-focus);
+}
+
+/* Invalid state */
+.textarea-wrapper_eb3566bbf[data-invalid="true"] .textarea_eb3566bbf {
+  border-color: var(--color-border-critical);
+}
+
+.textarea-wrapper_eb3566bbf[data-invalid="true"] .textarea_eb3566bbf:focus {
+  border-color: var(--color-border-critical);
+  box-shadow: var(--focus-ring-critical);
+}
+
+/* Disabled state */
+.textarea_eb3566bbf:disabled {
+  background-color: var(--color-bg-disabled);
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+  resize: none;
+}
+
+/* Read-only state */
+.textarea_eb3566bbf:read-only {
+  background-color: var(--color-bg-disabled);
+  cursor: default;
+}
+
+/* Resize behavior */
+.textarea-wrapper_eb3566bbf[data-resize="none"] .textarea_eb3566bbf {
+  resize: none;
+}
+
+.textarea-wrapper_eb3566bbf[data-resize="vertical"] .textarea_eb3566bbf {
+  resize: vertical;
+  cursor: ns-resize;
+}
+
+.textarea-wrapper_eb3566bbf[data-resize="horizontal"] .textarea_eb3566bbf {
+  resize: horizontal;
+  cursor: ew-resize;
+}
+
+.textarea-wrapper_eb3566bbf[data-resize="both"] .textarea_eb3566bbf {
+  resize: both;
+  cursor: nwse-resize;
+}
+
+/* Auto-grow disables manual resize */
+.textarea-wrapper_eb3566bbf[data-auto-grow="true"] .textarea_eb3566bbf {
+  resize: none;
+  overflow-y: hidden;
+}
+
+/* Character count */
+.textarea-count_eb3566bbf {
+  align-self: flex-end;
+  font-size: var(--font-size-12);
+  color: var(--color-text-secondary);
+}
+
+.textarea-count_eb3566bbf[data-over-limit="true"] {
+  color: var(--color-text-critical);
+  font-weight: var(--font-weight-500);
+}

package/dist/form/textarea.js

@@ -0,0 +1,140 @@
+import "./textarea.css"
+import Component from '@glimmer/component';
+import { tracked } from '@glimmer/tracking';
+import { action } from '@ember/object';
+import { on } from '@ember/modifier';
+import { modifier } from 'ember-modifier';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+import { g, i, n } from 'decorator-transforms/runtime';
+
+;
+
+// Module-level modifier for auto-grow functionality
+// Takes [enabled, minRows, maxRows] as positional args
+const autoGrow = modifier((element, [enabled, minRows, maxRows]) => {
+  if (!enabled) {
+    return;
+  }
+  const computedStyle = window.getComputedStyle(element);
+  const lineHeight = parseFloat(computedStyle.lineHeight) || 20;
+  const paddingTop = parseFloat(computedStyle.paddingTop) || 0;
+  const paddingBottom = parseFloat(computedStyle.paddingBottom) || 0;
+  const borderTop = parseFloat(computedStyle.borderTopWidth) || 0;
+  const borderBottom = parseFloat(computedStyle.borderBottomWidth) || 0;
+  const minHeight = minRows * lineHeight + paddingTop + paddingBottom + borderTop + borderBottom;
+  const maxHeight = maxRows ? maxRows * lineHeight + paddingTop + paddingBottom + borderTop + borderBottom : undefined;
+  const resize = () => {
+    element.style.height = 'auto';
+    let newHeight = element.scrollHeight;
+    if (newHeight < minHeight) {
+      newHeight = minHeight;
+    }
+    if (maxHeight && newHeight > maxHeight) {
+      newHeight = maxHeight;
+      element.style.overflowY = 'auto';
+    } else {
+      element.style.overflowY = 'hidden';
+    }
+    element.style.height = `${newHeight}px`;
+  };
+  resize();
+  element.addEventListener('input', resize);
+  return () => {
+    element.removeEventListener('input', resize);
+  };
+});
+class Textarea extends Component {
+  static {
+    g(this.prototype, "internalValue", [tracked]);
+  }
+  #internalValue = (i(this, "internalValue"), void 0);
+  constructor(owner, args) {
+    super(owner, args);
+    this.internalValue = args.value ?? args.defaultValue ?? '';
+  }
+  get isControlled() {
+    return this.args.value !== undefined;
+  }
+  get currentValue() {
+    return this.isControlled ? this.args.value ?? '' : this.internalValue;
+  }
+  get size() {
+    return this.args.size ?? 'md';
+  }
+  get variant() {
+    return this.args.variant ?? 'outline';
+  }
+  get resize() {
+    return this.args.resize ?? 'vertical';
+  }
+  get rows() {
+    return this.args.rows ?? 3;
+  }
+  get minRows() {
+    return this.args.minRows ?? this.rows;
+  }
+  get maxRows() {
+    return this.args.maxRows;
+  }
+  get isFullWidth() {
+    return this.args.isFullWidth ?? true;
+  }
+  get showCount() {
+    return this.args.showCount ?? false;
+  }
+  get characterCount() {
+    return this.currentValue.length;
+  }
+  get isOverLimit() {
+    if (this.args.maxLength === undefined) return false;
+    return this.characterCount > this.args.maxLength;
+  }
+  get countDisplay() {
+    if (this.args.maxLength !== undefined) {
+      return `${this.characterCount}/${this.args.maxLength}`;
+    }
+    return `${this.characterCount}`;
+  }
+  handleInput(event) {
+    const target = event.target;
+    if (!this.isControlled) {
+      this.internalValue = target.value;
+    }
+    this.args.onInput?.(target.value, event);
+  }
+  static {
+    n(this.prototype, "handleInput", [action]);
+  }
+  handleChange(event) {
+    const target = event.target;
+    this.args.onChange?.(target.value, event);
+  }
+  static {
+    n(this.prototype, "handleChange", [action]);
+  }
+  handleFocus(event) {
+    this.args.onFocus?.(event);
+  }
+  static {
+    n(this.prototype, "handleFocus", [action]);
+  }
+  handleBlur(event) {
+    this.args.onBlur?.(event);
+  }
+  static {
+    n(this.prototype, "handleBlur", [action]);
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"textarea-wrapper_eb3566bbf\" 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-resize={{this.resize}} data-auto-grow={{if @autoGrow \"true\"}} data-test-textarea-wrapper>\n  <textarea id={{@id}} name={{@name}} class=\"textarea_eb3566bbf\" value={{this.currentValue}} placeholder={{@placeholder}} disabled={{@isDisabled}} readonly={{@isReadOnly}} required={{@isRequired}} rows={{this.rows}} maxlength={{@maxLength}} aria-invalid={{if @isInvalid \"true\"}} aria-required={{if @isRequired \"true\"}} aria-describedby={{@aria-describedby}} {{on \"input\" this.handleInput}} {{on \"change\" this.handleChange}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} {{autoGrow (if @autoGrow true false) this.minRows this.maxRows}} data-test-textarea ...attributes></textarea>\n  {{#if this.showCount}}\n    <span class=\"textarea-count_eb3566bbf\" data-over-limit={{if this.isOverLimit \"true\"}} data-test-textarea-count>\n      {{this.countDisplay}}\n    </span>\n  {{/if}}\n</div>", {
+      strictMode: true,
+      scope: () => ({
+        on,
+        autoGrow
+      })
+    }), this);
+  }
+}
+
+export { Textarea as default };
+//# sourceMappingURL=textarea.js.map

package/dist/form/textarea.js.map

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

package/dist/form/time-picker-field.js

@@ -0,0 +1,37 @@
+import Component from '@glimmer/component';
+import Control from './control.js';
+import TimePicker from './time-picker.js';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+class TimePickerField extends Component {
+  get isInvalid() {
+    return !!this.args.error;
+  }
+  get isLabelHidden() {
+    return this.args.labelVisibility === 'hidden';
+  }
+  /** Build aria-describedby from the control's help text and error message IDs */
+  getAriaDescribedBy = controlId => {
+    const parts = [];
+    if (this.args.helpText) {
+      parts.push(`${controlId}-help-text`);
+    }
+    if (this.args.error) {
+      parts.push(`${controlId}-error-message`);
+    }
+    return parts.length > 0 ? parts.join(' ') : undefined;
+  };
+  static {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} ...attributes as |ctrl|>\n  <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </ctrl.Label>\n\n  <TimePicker @id={{ctrl.id}} @name={{@name}} @value={{@value}} @placeholder={{@placeholder}} @format={{@format}} @interval={{@interval}} @minTime={{@minTime}} @maxTime={{@maxTime}} @showNow={{@showNow}} @allowTextInput={{@allowTextInput}} @closeOnSelect={{@closeOnSelect}} @showIcon={{@showIcon}} @hideDisabledOptions={{@hideDisabledOptions}} @snapToInterval={{@snapToInterval}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} data-test-time-picker-field />\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n  {{/if}}\n</Control>", {
+      strictMode: true,
+      scope: () => ({
+        Control,
+        TimePicker
+      })
+    }), this);
+  }
+}
+
+export { TimePickerField as default };
+//# sourceMappingURL=time-picker-field.js.map

package/dist/form/time-picker-field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"time-picker-field.js","sources":["../../src/form/time-picker-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\n\nimport Control from './control.gts';\nimport TimePicker, { type TimeFormat } from './time-picker.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface TimePickerFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected time value (HH:mm format) */\n    value?: string | null;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Time format (12h or 24h) */\n    format?: TimeFormat;\n\n    /** Minutes between options (default: 15) */\n    interval?: number;\n\n    /** Minimum allowed time (HH:mm format) */\n    minTime?: string;\n\n    /** Maximum allowed time (HH:mm format) */\n    maxTime?: string;\n\n    /** Show \"Now\" option at the top */\n    showNow?: boolean;\n\n    /** Allow typing in the input */\n    allowTextInput?: boolean;\n\n    /** Close dropdown when a time is selected */\n    closeOnSelect?: boolean;\n\n    /** Show clock icon */\n    showIcon?: boolean;\n\n    /** Hide disabled options from the dropdown */\n    hideDisabledOptions?: boolean;\n\n    /** Round typed values to the nearest interval on blur */\n    snapToInterval?: boolean;\n\n    /** Help text displayed below the input */\n    helpText?: string;\n\n    /** Error message (also sets invalid state) */\n    error?: string;\n\n    /** Field is required */\n    isRequired?: boolean;\n\n    /** Field is disabled */\n    isDisabled?: boolean;\n\n    /** Field is read-only */\n    isReadOnly?: boolean;\n\n    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name for forms */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: string | null) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n  };\n}\n\nexport default class TimePickerField extends Component<TimePickerFieldSignature> {\n  get isInvalid(): boolean {\n    return !!this.args.error;\n  }\n\n  get isLabelHidden(): boolean {\n    return this.args.labelVisibility === 'hidden';\n  }\n\n  /** Build aria-describedby from the control's help text and error message IDs */\n  getAriaDescribedBy = (controlId: string): string | undefined => {\n    const parts: string[] = [];\n    if (this.args.helpText) {\n      parts.push(`${controlId}-help-text`);\n    }\n    if (this.args.error) {\n      parts.push(`${controlId}-error-message`);\n    }\n    return parts.length > 0 ? parts.join(' ') : undefined;\n  };\n\n  <template>\n    <Control\n      @isInvalid={{this.isInvalid}}\n      @isDisabled={{@isDisabled}}\n      @isRequired={{@isRequired}}\n      @isReadOnly={{@isReadOnly}}\n      ...attributes\n      as |ctrl|\n    >\n      <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n        {{@label}}\n      </ctrl.Label>\n\n      <TimePicker\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @placeholder={{@placeholder}}\n        @format={{@format}}\n        @interval={{@interval}}\n        @minTime={{@minTime}}\n        @maxTime={{@maxTime}}\n        @showNow={{@showNow}}\n        @allowTextInput={{@allowTextInput}}\n        @closeOnSelect={{@closeOnSelect}}\n        @showIcon={{@showIcon}}\n        @hideDisabledOptions={{@hideDisabledOptions}}\n        @snapToInterval={{@snapToInterval}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @isReadOnly={{@isReadOnly}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        data-test-time-picker-field\n      />\n\n      {{#if @helpText}}\n        <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n      {{/if}}\n\n      {{#if @error}}\n        <ctrl.ErrorMessage>{{@error}}</ctrl.ErrorMessage>\n      {{/if}}\n    </Control>\n  </template>\n}\n"],"names":["TimePickerField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","TimePicker"],"mappings":";;;;;;AAiFe,MAAMA,wBAAwBC,SAAA,CAAU;EACrD,IAAIC,SAAAA,GAAqB;AACvB,IAAA,OAAO,CAAC,CAAC,IAAI,CAACC,IAAI,CAACC,KAAK;AAC1B,EAAA;EAEA,IAAIC,aAAAA,GAAyB;AAC3B,IAAA,OAAO,IAAI,CAACF,IAAI,CAACG,eAAe,KAAK,QAAA;AACvC,EAAA;AAEA;EACAC,qBAAsBC,SAAiB,IAAqB;IAC1D,MAAMC,KAAa,GAAK,EAAE;AAC1B,IAAA,IAAI,IAAI,CAACN,IAAI,CAACO,QAAQ,EAAE;AACtBD,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,YAAqB,CAAA;AACrC,IAAA;AACA,IAAA,IAAI,IAAI,CAACL,IAAI,CAACC,KAAK,EAAE;AACnBK,MAAAA,KAAA,CAAME,IAAI,CAAC,CAAA,EAAGH,SAAA,gBAAyB,CAAA;AACzC,IAAA;AACA,IAAA,OAAOC,MAAMG,MAAM,GAAG,IAAIH,KAAA,CAAMI,IAAI,CAAC,GAAA,CAAA,GAAOC,SAAA;EAC9C,CAAA;AAEA,EAAA;IAAAC,oBAAA,CAAAC,kBAAA,CAAA,6iCAAA,EA+CA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/form/time-picker.css

@@ -0,0 +1,239 @@
+/* src/form/time-picker.css */
+/* Time Picker Container */
+.time-picker_eb934fd65 {
+  display: inline-flex;
+  flex-direction: column;
+  width: 100%;
+}
+
+/* Trigger Wrapper - Reset button styles from popover.Trigger */
+.time-picker-trigger-wrapper_eb934fd65 {
+  display: block;
+  width: 100%;
+  padding: 0;
+  margin: 0;
+  border: none;
+  background: transparent;
+  font: inherit;
+  text-align: inherit;
+  cursor: text;
+}
+
+.time-picker-trigger-wrapper_eb934fd65:disabled {
+  cursor: not-allowed;
+}
+
+/* Input Wrapper */
+.time-picker-input-wrapper_eb934fd65 {
+  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 */
+.time-picker-input-wrapper_eb934fd65:focus-within {
+  border-color: var(--color-border-focus);
+  box-shadow: var(--focus-ring);
+}
+
+/* Invalid state */
+.time-picker_eb934fd65[data-invalid="true"] .time-picker-input-wrapper_eb934fd65 {
+  border-color: var(--color-border-critical);
+}
+
+.time-picker_eb934fd65[data-invalid="true"] .time-picker-input-wrapper_eb934fd65:focus-within {
+  box-shadow: var(--focus-ring-critical);
+}
+
+/* Disabled state */
+.time-picker_eb934fd65[data-disabled="true"] .time-picker-input-wrapper_eb934fd65 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-disabled);
+  cursor: not-allowed;
+}
+
+/* Read-only state */
+.time-picker_eb934fd65[data-readonly="true"] .time-picker-input-wrapper_eb934fd65 {
+  background-color: var(--color-bg-disabled);
+  border-color: var(--color-border-control-readonly);
+}
+
+/* Clock Icon */
+.time-picker-icon_eb934fd65 {
+  display: flex;
+  align-items: center;
+  padding-left: var(--spacing-3);
+  color: var(--color-icon-secondary);
+}
+
+.time-picker_eb934fd65[data-disabled="true"] .time-picker-icon_eb934fd65 {
+  color: var(--color-icon-disabled);
+}
+
+/* Input Element */
+.time-picker-input_eb934fd65 {
+  flex: 1;
+  min-width: 0;
+  height: 100%;
+  padding: 0 var(--spacing-2);
+  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;
+}
+
+.time-picker-input_eb934fd65:focus {
+  outline: none;
+}
+
+.time-picker-input_eb934fd65::placeholder {
+  color: var(--color-text-tertiary);
+  font-family: var(--font-family-sans);
+}
+
+.time-picker-input_eb934fd65:disabled {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+.time-picker-input_eb934fd65:read-only {
+  cursor: default;
+}
+
+/* Dropdown Trigger Icon */
+.time-picker-trigger_eb934fd65 {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 32px;
+  border-left: var(--border-width-1) solid var(--color-border-control);
+  color: var(--color-icon-secondary);
+  cursor: pointer;
+  border-top-right-radius: calc(var(--radius-md) - 1px);
+  border-bottom-right-radius: calc(var(--radius-md) - 1px);
+  transition:
+    background-color var(--transition-fast),
+    color var(--transition-fast);
+}
+
+.time-picker-trigger_eb934fd65:hover {
+  background-color: var(--color-bg-surface-hover);
+  color: var(--color-icon-primary);
+}
+
+.time-picker-trigger_eb934fd65:active {
+  background-color: var(--color-bg-surface-pressed);
+}
+
+.time-picker_eb934fd65[data-disabled="true"] .time-picker-trigger_eb934fd65 {
+  color: var(--color-icon-disabled);
+  cursor: not-allowed;
+}
+
+.time-picker_eb934fd65[data-disabled="true"] .time-picker-trigger_eb934fd65:hover {
+  background-color: transparent;
+}
+
+.time-picker_eb934fd65[data-invalid="true"] .time-picker-trigger_eb934fd65 {
+  border-left-color: var(--color-border-critical);
+}
+
+.time-picker_eb934fd65[data-disabled="true"] .time-picker-trigger_eb934fd65 {
+  border-left-color: var(--color-border-control-disabled);
+}
+
+/* Popover Content - override default popover padding */
+.time-picker-popover-content_eb934fd65 {
+  min-width: 140px;
+  max-width: 200px;
+  padding: 0;
+}
+
+/* Listbox */
+.time-picker-listbox_eb934fd65 {
+  max-height: 240px;
+  overflow-y: auto;
+  padding: var(--spacing-1);
+  background-color: var(--color-bg-surface);
+  border-radius: var(--radius-md);
+}
+
+/* Option */
+.time-picker-option_eb934fd65 {
+  position: relative;
+  display: flex;
+  align-items: center;
+  padding: var(--spacing-2) var(--spacing-8) var(--spacing-2) var(--spacing-3);
+  font-family: var(--font-family-mono);
+  font-size: var(--font-size-sm);
+  line-height: var(--line-height-tight);
+  color: var(--color-text);
+  border-radius: var(--radius-sm);
+  cursor: pointer;
+  transition:
+    background-color var(--transition-fast),
+    color var(--transition-fast);
+  user-select: none;
+}
+
+/* Hover state */
+.time-picker-option_eb934fd65:hover:not([data-disabled="true"]) {
+  background-color: var(--color-bg-fill-interactive-hover);
+}
+
+/* Active/Focused state (via keyboard navigation) */
+.time-picker-option_eb934fd65[data-active="true"]:not([data-disabled="true"]) {
+  background-color: var(--color-bg-fill-interactive-hover);
+}
+
+/* Selected state - checkmark on the right */
+.time-picker-option_eb934fd65[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 */
+.time-picker-option_eb934fd65[data-disabled="true"] {
+  color: var(--color-text-disabled);
+  cursor: not-allowed;
+}
+
+.time-picker-option_eb934fd65[data-disabled="true"][data-active="true"] {
+  background-color: transparent;
+}
+
+/* Now option */
+.time-picker-option_eb934fd65[data-now="true"] {
+  color: var(--color-text-brand);
+  font-weight: var(--font-weight-medium);
+}
+
+.time-picker-option_eb934fd65[data-now="true"]::before {
+  content: "";
+  display: inline-block;
+  width: 6px;
+  height: 6px;
+  margin-right: var(--spacing-2);
+  background-color: var(--color-bg-brand);
+  border-radius: 50%;
+}