@visitwonders/assembly 0.1.0 → 0.3.0

package/dist/form/fieldset.css

@@ -0,0 +1,65 @@
+/* src/form/fieldset.css */
+.fieldset_ef4a2e6ab {
+  border: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+/* Legend */
+.legend_ef4a2e6ab {
+  display: block;
+  font-size: var(--font-size-xs);
+  font-weight: var(--font-weight-semibold);
+  color: var(--color-text-secondary);
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  line-height: var(--line-height-normal);
+  padding: 0;
+  margin-bottom: var(--spacing-3);
+}
+
+.fieldset_ef4a2e6ab[data-disabled="true"] .legend_ef4a2e6ab {
+  color: var(--color-text-disabled);
+}
+
+/* Description */
+.description_ef4a2e6ab {
+  margin: 0;
+  font-size: var(--font-size-xs);
+  line-height: var(--line-height-normal);
+  color: var(--color-text-secondary);
+  margin-top: calc(-1 * var(--spacing-2));
+  margin-bottom: var(--spacing-3);
+}
+
+/* Content */
+.content_ef4a2e6ab {
+  display: flex;
+  flex-direction: column;
+}
+
+.content_ef4a2e6ab[data-gap="none"] {
+  gap: 0;
+}
+
+.content_ef4a2e6ab[data-gap="xs"] {
+  gap: var(--spacing-gap-xs);
+}
+
+.content_ef4a2e6ab[data-gap="sm"] {
+  gap: var(--spacing-gap-sm);
+}
+
+.content_ef4a2e6ab[data-gap="md"] {
+  gap: var(--spacing-gap-md);
+}
+
+.content_ef4a2e6ab[data-gap="lg"] {
+  gap: var(--spacing-gap-lg);
+}
+
+.content_ef4a2e6ab[data-gap="xl"] {
+  gap: var(--spacing-gap-xl);
+}

package/dist/form/fieldset.js

@@ -0,0 +1,20 @@
+import "./fieldset.css"
+import Component from '@glimmer/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class Fieldset extends Component {
+  get gap() {
+    return this.args.gap ?? 'md';
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<fieldset class=\"fieldset_ef4a2e6ab\" data-disabled={{if @isDisabled \"true\"}} data-test-fieldset ...attributes>\n  {{#if @legend}}\n    <legend class=\"legend_ef4a2e6ab\" data-test-fieldset-legend>\n      {{@legend}}\n    </legend>\n  {{/if}}\n\n  {{#if @description}}\n    <p class=\"description_ef4a2e6ab\" data-test-fieldset-description>\n      {{@description}}\n    </p>\n  {{/if}}\n\n  <div class=\"content_ef4a2e6ab\" data-gap={{this.gap}} data-test-fieldset-content>\n    {{yield}}\n  </div>\n</fieldset>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { Fieldset as default };
+//# sourceMappingURL=fieldset.js.map

package/dist/form/fieldset.js.map

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

package/dist/form/help-text.css

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

package/dist/form/index.js

@@ -10,6 +10,7 @@ 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 Fieldset } from './fieldset.js';
 export { default as Form } from './form.js';
 export { default as HelpText } from './help-text.js';
 export { default as Input } from './input.js';

package/dist/form/index.js.map

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

package/dist/form/input.css

@@ -121,6 +121,7 @@
 .input-suffix_ef268a5e9 {
   display: flex;
   align-items: center;
+  box-sizing: border-box;
   padding: 0 var(--spacing-3);
   background-color: var(--color-bg-surface-sunken);
   border: var(--border-width-1) solid var(--color-border-control);

package/dist/form/label.css

@@ -3,7 +3,7 @@
   display: flex;
   align-items: baseline;
   gap: var(--spacing-1);
-  font-weight: var(--font-weight-medium);
+  font-weight: var(--font-weight-regular);
   color: var(--color-text);
   line-height: var(--line-height-tight);
 }
@@ -57,3 +57,17 @@
   font-weight: var(--font-weight-regular);
   font-style: italic;
 }
+
+/* Info tooltip trigger */
+.label-info-trigger_e7fa6e7a3 {
+  display: inline-flex;
+  align-items: center;
+  color: var(--color-text-secondary);
+  cursor: default;
+  position: relative;
+  top: 0.1em;
+}
+
+.label-info-trigger_e7fa6e7a3:hover {
+  color: var(--color-text);
+}

package/dist/form/label.js

@@ -1,5 +1,8 @@
 import "./label.css"
 import Component from '@glimmer/component';
+import { Info } from 'lucide';
+import Icon from '../media/icon.js';
+import Tooltip from '../overlay/tooltip.js';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';
 
@@ -14,7 +17,6 @@ class Label extends Component {
       isRequired,
       requiredIndicator
     } = this.args;
-    // Show when required AND requiredIndicator is not explicitly false
     return isRequired === true && requiredIndicator !== false;
   }
   get requiredIndicatorText() {
@@ -31,7 +33,6 @@ class Label extends Component {
       isRequired,
       optionalIndicator
     } = this.args;
-    // Show when NOT required AND optionalIndicator is truthy
     return isRequired !== true && !!optionalIndicator;
   }
   get optionalIndicatorText() {
@@ -44,8 +45,13 @@ class Label extends Component {
     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
+    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  {{#if (has-block \"info\")}}\n    <Tooltip @side=\"top\" @showArrow={{false}} data-test-label-info>\n      <:default>\n        <span class=\"label-info-trigger_e7fa6e7a3\">\n          <Icon @icon={{Info}} @size=\"xs\" @label=\"More information\" />\n        </span>\n      </:default>\n      <:content>\n        {{yield to=\"info\"}}\n      </:content>\n    </Tooltip>\n  {{else if @info}}\n    <Tooltip @content={{@info}} @side=\"top\" @showArrow={{false}} data-test-label-info>\n      <span class=\"label-info-trigger_e7fa6e7a3\">\n        <Icon @icon={{Info}} @size=\"xs\" @label=\"More information\" />\n      </span>\n    </Tooltip>\n  {{/if}}\n</label>", {
+      strictMode: true,
+      scope: () => ({
+        Tooltip,
+        Icon,
+        Info
+      })
     }), this);
   }
 }

package/dist/form/money-field.js

@@ -188,7 +188,7 @@ class MoneyField extends Component {
     n(this.prototype, "handleFocus", [action]);
   }
   static {
-    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} data-currency={{@currency}} data-test-money-field ...attributes as |ctrl|>\n  <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </ctrl.Label>\n\n  <ctrl.Input @prefix={{if this.showPrefix this.currencySymbol}} @suffix={{if this.showSuffix this.currencySymbol}} @inputMode=\"decimal\" @placeholder={{this.placeholder}} @name={{@name}} @value={{this.displayValue}} data-money-field {{on \"input\" this.handleInput}} {{on \"blur\" this.handleBlur}} {{on \"focus\" this.handleFocus}} />\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage @errors={{array @error}} />\n  {{/if}}\n</Control>", {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @labelInfo={{@labelInfo}} data-currency={{@currency}} data-test-money-field ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <ctrl.Input @prefix={{if this.showPrefix this.currencySymbol}} @suffix={{if this.showSuffix this.currencySymbol}} @inputMode=\"decimal\" @placeholder={{this.placeholder}} @name={{@name}} @value={{this.displayValue}} data-money-field {{on \"input\" this.handleInput}} {{on \"blur\" this.handleBlur}} {{on \"focus\" this.handleFocus}} />\n\n  {{#if @helpText}}\n    <ctrl.HelpText>{{@helpText}}</ctrl.HelpText>\n  {{/if}}\n\n  {{#if @error}}\n    <ctrl.ErrorMessage @errors={{array @error}} />\n  {{/if}}\n</Control>", {
       strictMode: true,
       scope: () => ({
         Control,

package/dist/form/multi-select.css

@@ -214,7 +214,7 @@
   padding: var(--spacing-2) var(--spacing-3);
   border-radius: var(--radius-sm);
   font-size: var(--font-size-13);
-  line-height: var(--line-height-1-25);
+  line-height: var(--line-height-tight);
   color: var(--color-text);
   cursor: pointer;
   user-select: none;

package/dist/form/number-field.css

@@ -3,6 +3,7 @@
 .number-field-input-wrapper_e9ff3bd72 {
   display: flex;
   align-items: stretch;
+  box-sizing: border-box;
   height: var(--input-height-md);
   border: var(--border-width-1) solid var(--color-border-control);
   border-radius: var(--radius-md);

package/dist/form/number-field.js

@@ -167,7 +167,7 @@ class NumberField extends Component {
     }
   };
   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  <div class=\"number-field-input-wrapper_e9ff3bd72\" data-invalid={{if this.isInvalid \"true\" \"false\"}} data-disabled={{if @isDisabled \"true\" \"false\"}} data-readonly={{if @isReadOnly \"true\" \"false\"}} data-at-min={{if this.isAtMin \"true\" \"false\"}} data-at-max={{if this.isAtMax \"true\" \"false\"}} data-has-stepper={{if this.showStepper \"true\" \"false\"}} data-test-number-field-wrapper>\n    {{#if @prefix}}\n      <span class=\"number-field-affix_e9ff3bd72 number-field-prefix_e9ff3bd72\" data-test-number-field-prefix>\n        {{@prefix}}\n      </span>\n    {{/if}}\n\n    {{!-- template-lint-disable no-redundant-role --}}\n    <input id={{ctrl.id}} class=\"number-field-input_e9ff3bd72\" type=\"text\" inputmode={{this.inputMode}} role=\"spinbutton\" name={{@name}} value={{this.displayValue}} placeholder={{@placeholder}} disabled={{@isDisabled}} readonly={{@isReadOnly}} aria-invalid={{if this.isInvalid \"true\"}} aria-required={{if @isRequired \"true\"}} aria-describedby={{this.getAriaDescribedBy ctrl.id}} aria-valuenow={{this.ariaValueNow}} aria-valuemin={{this.ariaValueMin}} aria-valuemax={{this.ariaValueMax}} {{on \"input\" this.handleInput}} {{on \"blur\" this.handleBlur}} {{on \"focus\" this.handleFocus}} {{on \"keydown\" this.handleKeyDown}} data-test-number-field-input />\n\n    {{#if @suffix}}\n      <span class=\"number-field-affix_e9ff3bd72 number-field-suffix_e9ff3bd72\" data-test-number-field-suffix>\n        {{@suffix}}\n      </span>\n    {{/if}}\n\n    {{#if this.showStepper}}\n      <div class=\"number-field-stepper_e9ff3bd72\" data-test-number-field-stepper>\n        <button type=\"button\" class=\"number-field-stepper-button_e9ff3bd72\" tabindex=\"-1\" aria-label=\"Increase\" disabled={{if @isDisabled true (if @isReadOnly true this.isAtMax)}} {{on \"click\" this.increment}} data-test-number-field-increment>\n          <Icon @icon={{ChevronUp}} @size=\"xs\" />\n        </button>\n        <button type=\"button\" class=\"number-field-stepper-button_e9ff3bd72\" tabindex=\"-1\" aria-label=\"Decrease\" disabled={{if @isDisabled true (if @isReadOnly true this.isAtMin)}} {{on \"click\" this.decrement}} data-test-number-field-decrement>\n          <Icon @icon={{ChevronDown}} @size=\"xs\" />\n        </button>\n      </div>\n    {{/if}}\n  </div>\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>", {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @labelInfo={{@labelInfo}} data-max-width={{@maxWidth}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <div class=\"number-field-input-wrapper_e9ff3bd72\" data-invalid={{if this.isInvalid \"true\" \"false\"}} data-disabled={{if @isDisabled \"true\" \"false\"}} data-readonly={{if @isReadOnly \"true\" \"false\"}} data-at-min={{if this.isAtMin \"true\" \"false\"}} data-at-max={{if this.isAtMax \"true\" \"false\"}} data-has-stepper={{if this.showStepper \"true\" \"false\"}} data-test-number-field-wrapper>\n    {{#if @prefix}}\n      <span class=\"number-field-affix_e9ff3bd72 number-field-prefix_e9ff3bd72\" data-test-number-field-prefix>\n        {{@prefix}}\n      </span>\n    {{/if}}\n\n    {{!-- template-lint-disable no-redundant-role --}}\n    <input id={{ctrl.id}} class=\"number-field-input_e9ff3bd72\" type=\"text\" inputmode={{this.inputMode}} role=\"spinbutton\" name={{@name}} value={{this.displayValue}} placeholder={{@placeholder}} disabled={{@isDisabled}} readonly={{@isReadOnly}} aria-invalid={{if this.isInvalid \"true\"}} aria-required={{if @isRequired \"true\"}} aria-describedby={{this.getAriaDescribedBy ctrl.id}} aria-valuenow={{this.ariaValueNow}} aria-valuemin={{this.ariaValueMin}} aria-valuemax={{this.ariaValueMax}} {{on \"input\" this.handleInput}} {{on \"blur\" this.handleBlur}} {{on \"focus\" this.handleFocus}} {{on \"keydown\" this.handleKeyDown}} data-test-number-field-input />\n\n    {{#if @suffix}}\n      <span class=\"number-field-affix_e9ff3bd72 number-field-suffix_e9ff3bd72\" data-test-number-field-suffix>\n        {{@suffix}}\n      </span>\n    {{/if}}\n\n    {{#if this.showStepper}}\n      <div class=\"number-field-stepper_e9ff3bd72\" data-test-number-field-stepper>\n        <button type=\"button\" class=\"number-field-stepper-button_e9ff3bd72\" tabindex=\"-1\" aria-label=\"Increase\" disabled={{if @isDisabled true (if @isReadOnly true this.isAtMax)}} {{on \"click\" this.increment}} data-test-number-field-increment>\n          <Icon @icon={{ChevronUp}} @size=\"xs\" />\n        </button>\n        <button type=\"button\" class=\"number-field-stepper-button_e9ff3bd72\" tabindex=\"-1\" aria-label=\"Decrease\" disabled={{if @isDisabled true (if @isReadOnly true this.isAtMin)}} {{on \"click\" this.decrement}} data-test-number-field-decrement>\n          <Icon @icon={{ChevronDown}} @size=\"xs\" />\n        </button>\n      </div>\n    {{/if}}\n  </div>\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,

package/dist/form/radio.css

@@ -132,17 +132,17 @@
   font-size: var(--font-size-md);
   font-weight: var(--font-weight-regular);
   color: var(--color-text);
-  line-height: var(--spacing-5);
+  line-height: var(--line-height-20);
 }
 
 .radio-wrapper_e6dda4f5d[data-size="sm"] .radio-label_e6dda4f5d {
   font-size: var(--font-size-sm);
-  line-height: var(--spacing-4);
+  line-height: var(--line-height-16);
 }
 
 .radio-wrapper_e6dda4f5d[data-size="lg"] .radio-label_e6dda4f5d {
   font-size: var(--font-size-lg);
-  line-height: var(--spacing-6);
+  line-height: var(--line-height-24);
 }
 
 .radio-label_e6dda4f5d[data-visually-hidden="true"] {

package/dist/form/select-field.js

@@ -24,7 +24,7 @@ class SelectField extends Component {
     return parts.length > 0 ? parts.join(' ') : undefined;
   };
   static {
-    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} ...attributes as |ctrl|>\n  <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </ctrl.Label>\n\n  <Select @id={{ctrl.id}} @name={{@name}} @value={{@value}} @placeholder={{@placeholder}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} data-test-select-field as |select|>\n    {{yield (hash Option=select.Option OptionGroup=select.OptionGroup)}}\n  </Select>\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>", {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @labelInfo={{@labelInfo}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\n\n  <Select @id={{ctrl.id}} @name={{@name}} @value={{@value}} @placeholder={{@placeholder}} @isDisabled={{@isDisabled}} @isInvalid={{this.isInvalid}} @isRequired={{@isRequired}} @aria-describedby={{this.getAriaDescribedBy ctrl.id}} @onChange={{@onChange}} @onBlur={{@onBlur}} @onFocus={{@onFocus}} data-test-select-field as |select|>\n    {{yield (hash Option=select.Option OptionGroup=select.OptionGroup)}}\n  </Select>\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,

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

@@ -1 +1 @@
-{"version":3,"file":"select-field.js","sources":["../../src/form/select-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { hash } from '@ember/helper';\nimport type { WithBoundArgs } from '@glint/template';\n\nimport Control from './control.gts';\nimport Select, { SelectOption, SelectOptionGroup } from './select.gts';\n\nimport './select.css';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface SelectFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected value */\n    value?: string;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Help text displayed below the select */\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    /** Label visibility */\n    labelVisibility?: LabelVisibility;\n\n    /** Input name for forms */\n    name?: string;\n\n    /** Change event handler */\n    onChange?: (value: string) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        Option: WithBoundArgs<typeof SelectOption, 'ctx'>;\n        OptionGroup: typeof SelectOptionGroup;\n      },\n    ];\n  };\n}\n\nexport default class SelectField extends Component<SelectFieldSignature> {\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      ...attributes\n      as |ctrl|\n    >\n      <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n        {{@label}}\n      </ctrl.Label>\n\n      <Select\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @placeholder={{@placeholder}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        data-test-select-field\n        as |select|\n      >\n        {{yield (hash Option=select.Option OptionGroup=select.OptionGroup)}}\n      </Select>\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":["SelectField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","Select","hash"],"mappings":";;;;;;;AA4De,MAAMA,oBAAoBC,SAAA,CAAU;EACjD,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,+yBAAA,EAsCA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;QAAAC,MAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}
+{"version":3,"file":"select-field.js","sources":["../../src/form/select-field.gts"],"sourcesContent":["import Component from '@glimmer/component';\nimport { hash } from '@ember/helper';\nimport type { WithBoundArgs } from '@glint/template';\n\nimport Control from './control.gts';\nimport Select, { SelectOption, SelectOptionGroup } from './select.gts';\n\nexport type LabelVisibility = 'visible' | 'hidden';\n\nexport interface SelectFieldSignature {\n  Element: HTMLDivElement;\n  Args: {\n    /** Label text (required) */\n    label: string;\n\n    /** Current selected value */\n    value?: string;\n\n    /** Placeholder text shown when no value is selected */\n    placeholder?: string;\n\n    /** Help text displayed below the select */\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    /** Info tooltip text shown next to the label */\n    labelInfo?: string;\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) => void;\n\n    /** Blur event handler */\n    onBlur?: (event: FocusEvent) => void;\n\n    /** Focus event handler */\n    onFocus?: (event: FocusEvent) => void;\n  };\n  Blocks: {\n    default: [\n      {\n        Option: WithBoundArgs<typeof SelectOption, 'ctx'>;\n        OptionGroup: typeof SelectOptionGroup;\n      },\n    ];\n    /** Rich tooltip content shown next to the label */\n    info: [];\n  };\n}\n\nexport default class SelectField extends Component<SelectFieldSignature> {\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      @labelInfo={{@labelInfo}}\n      ...attributes\n      as |ctrl|\n    >\n      {{#if (has-block \"info\")}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          <:default>{{@label}}</:default>\n          <:info>{{yield to=\"info\"}}</:info>\n        </ctrl.Label>\n      {{else}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          {{@label}}\n        </ctrl.Label>\n      {{/if}}\n\n      <Select\n        @id={{ctrl.id}}\n        @name={{@name}}\n        @value={{@value}}\n        @placeholder={{@placeholder}}\n        @isDisabled={{@isDisabled}}\n        @isInvalid={{this.isInvalid}}\n        @isRequired={{@isRequired}}\n        @aria-describedby={{this.getAriaDescribedBy ctrl.id}}\n        @onChange={{@onChange}}\n        @onBlur={{@onBlur}}\n        @onFocus={{@onFocus}}\n        data-test-select-field\n        as |select|\n      >\n        {{yield (hash Option=select.Option OptionGroup=select.OptionGroup)}}\n      </Select>\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":["SelectField","Component","isInvalid","args","error","isLabelHidden","labelVisibility","getAriaDescribedBy","controlId","parts","helpText","push","length","join","undefined","setComponentTemplate","precompileTemplate","strictMode","scope","Control","Select","hash"],"mappings":";;;;;;;AA+De,MAAMA,oBAAoBC,SAAA,CAAU;EACjD,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,uiCAAA,EA8CA;MAAAC,UAAA,EAAA,IAAA;AAAAC,MAAAA,KAAA,EAAAA,OAAA;QAAAC,OAAA;QAAAC,MAAA;AAAAC,QAAAA;AAAA,OAAA;KAAU,CAAA,EAAV,IAAW,CAAA;AAAD;AACZ;;;;"}

package/dist/form/select.css

@@ -127,7 +127,7 @@
   padding: var(--spacing-2) var(--spacing-3);
   border-radius: var(--radius-sm);
   font-size: var(--font-size-13);
-  line-height: var(--line-height-1-25);
+  line-height: var(--line-height-tight);
   color: var(--color-text);
   cursor: pointer;
   user-select: none;

package/dist/form/{text-field-css-f60360f3f8aaf4da664eaccd1bcc9f8f.css → text-field-css-754feeb82dbd9fc9afdc1f00dceb13ad.css}

@@ -1,4 +1,4 @@
-/* <inline>/src/form/text-field-css-f60360f3f8aaf4da664eaccd1bcc9f8f.css */
+/* <inline>/src/form/text-field-css-754feeb82dbd9fc9afdc1f00dceb13ad.css */
 
   .text-field_e2680f9ba {
     display: flex;
@@ -29,3 +29,24 @@
   .text-field_e2680f9ba[data-over-limit="true"] .text-field-character-count_e2680f9ba {
     color: var(--color-text-critical);
   }
+
+  .text-field_e2680f9ba[data-monospace="true"] input,
+  .text-field_e2680f9ba[data-monospace="true"] textarea {
+    font-family: var(--font-family-mono);
+  }
+
+  .text-field_e2680f9ba[data-max-width="xs"] {
+    max-width: 120px;
+  }
+  .text-field_e2680f9ba[data-max-width="sm"] {
+    max-width: 200px;
+  }
+  .text-field_e2680f9ba[data-max-width="md"] {
+    max-width: 320px;
+  }
+  .text-field_e2680f9ba[data-max-width="lg"] {
+    max-width: 480px;
+  }
+  .text-field_e2680f9ba[data-max-width="xl"] {
+    max-width: 640px;
+  }

package/dist/form/text-field.js

@@ -1,4 +1,4 @@
-import "./text-field-css-f60360f3f8aaf4da664eaccd1bcc9f8f.css"
+import "./text-field-css-754feeb82dbd9fc9afdc1f00dceb13ad.css"
 import Component from '@glimmer/component';
 import { tracked } from '@glimmer/tracking';
 import { action } from '@ember/object';
@@ -123,7 +123,7 @@ class TextField extends Component {
     n(this.prototype, "handleBlur", [action]);
   }
   static {
-    setComponentTemplate(precompileTemplate("\n\n<div class=\"text-field_e2680f9ba\" data-invalid={{if this.isInvalid \"true\" \"false\"}} data-disabled={{if this.isDisabled \"true\" \"false\"}} data-readonly={{if this.isReadOnly \"true\" \"false\"}} data-over-limit={{if this.isOverLimit \"true\" \"false\"}} data-test-text-field ...attributes>\n  <Label @for={{this.id}} @isRequired={{this.isRequired}} @isDisabled={{this.isDisabled}} @isVisuallyHidden={{this.isLabelHidden}}>\n    {{@label}}\n  </Label>\n\n  {{#if @multiline}}\n    <FormTextarea id={{this.id}} @size={{@size}} @variant={{@variant}} @value={{this.currentValue}} @placeholder={{@placeholder}} @isDisabled={{this.isDisabled}} @isReadOnly={{this.isReadOnly}} @isRequired={{this.isRequired}} @isInvalid={{this.isInvalid}} @rows={{this.rows}} @autoGrow={{@autoResize}} @maxLength={{@maxLength}} @name={{@name}} @onInput={{this.handleTextareaInput}} @onChange={{this.handleTextareaChange}} @onFocus={{this.handleFocus}} @onBlur={{this.handleBlur}} aria-describedby={{if this.ariaDescribedBy this.ariaDescribedBy}} />\n  {{else}}\n    <FormInput id={{this.id}} @type={{@type}} @size={{@size}} @variant={{@variant}} @value={{this.currentValue}} @placeholder={{@placeholder}} @isDisabled={{this.isDisabled}} @isReadOnly={{this.isReadOnly}} @isRequired={{this.isRequired}} @isInvalid={{this.isInvalid}} @maxLength={{@maxLength}} @autoComplete={{@autoComplete}} @name={{@name}} aria-describedby={{if this.ariaDescribedBy this.ariaDescribedBy}} {{on \"input\" this.handleInputEvent}} {{on \"change\" this.handleChangeEvent}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}}>\n      <:prefix>{{yield to=\"prefix\"}}{{@prefix}}</:prefix>\n      <:suffix>{{yield to=\"suffix\"}}{{@suffix}}</:suffix>\n    </FormInput>\n  {{/if}}\n\n  {{#if this.showFooter}}\n    <div class=\"text-field-footer_e2680f9ba\" data-test-text-field-footer>\n      {{#if @error}}\n        <ErrorMessage id={{this.errorMessageId}} @isInvalid={{this.isInvalid}}>\n          {{@error}}\n        </ErrorMessage>\n      {{else if @helpText}}\n        <HelpText id={{this.helpTextId}}>\n          {{@helpText}}\n        </HelpText>\n      {{/if}}\n\n      {{#if @showCharacterCount}}\n        <span class=\"text-field-character-count_e2680f9ba\" aria-live=\"polite\" data-test-character-count>\n          {{this.characterCount}}{{#if @maxLength}}/{{@maxLength}}{{/if}}\n        </span>\n      {{/if}}\n    </div>\n  {{/if}}\n</div>", {
+    setComponentTemplate(precompileTemplate("\n\n<div class=\"text-field_e2680f9ba\" data-invalid={{if this.isInvalid \"true\" \"false\"}} data-disabled={{if this.isDisabled \"true\" \"false\"}} data-readonly={{if this.isReadOnly \"true\" \"false\"}} data-over-limit={{if this.isOverLimit \"true\" \"false\"}} data-monospace={{if @monospace \"true\" \"false\"}} data-max-width={{@maxWidth}} data-test-text-field ...attributes>\n  {{#if (has-block \"info\")}}\n    <Label @for={{this.id}} @isRequired={{this.isRequired}} @isDisabled={{this.isDisabled}} @isVisuallyHidden={{this.isLabelHidden}} @info={{@labelInfo}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </Label>\n  {{else}}\n    <Label @for={{this.id}} @isRequired={{this.isRequired}} @isDisabled={{this.isDisabled}} @isVisuallyHidden={{this.isLabelHidden}} @info={{@labelInfo}}>\n      {{@label}}\n    </Label>\n  {{/if}}\n\n  {{#if @multiline}}\n    <FormTextarea id={{this.id}} @size={{@size}} @variant={{@variant}} @value={{this.currentValue}} @placeholder={{@placeholder}} @isDisabled={{this.isDisabled}} @isReadOnly={{this.isReadOnly}} @isRequired={{this.isRequired}} @isInvalid={{this.isInvalid}} @rows={{this.rows}} @autoGrow={{@autoResize}} @maxLength={{@maxLength}} @name={{@name}} @onInput={{this.handleTextareaInput}} @onChange={{this.handleTextareaChange}} @onFocus={{this.handleFocus}} @onBlur={{this.handleBlur}} aria-describedby={{if this.ariaDescribedBy this.ariaDescribedBy}} />\n  {{else}}\n    <FormInput id={{this.id}} @type={{@type}} @size={{@size}} @variant={{@variant}} @value={{this.currentValue}} @placeholder={{@placeholder}} @isDisabled={{this.isDisabled}} @isReadOnly={{this.isReadOnly}} @isRequired={{this.isRequired}} @isInvalid={{this.isInvalid}} @maxLength={{@maxLength}} @autoComplete={{@autoComplete}} @name={{@name}} aria-describedby={{if this.ariaDescribedBy this.ariaDescribedBy}} {{on \"input\" this.handleInputEvent}} {{on \"change\" this.handleChangeEvent}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}}>\n      <:prefix>{{yield to=\"prefix\"}}{{@prefix}}</:prefix>\n      <:suffix>{{yield to=\"suffix\"}}{{@suffix}}</:suffix>\n    </FormInput>\n  {{/if}}\n\n  {{#if this.showFooter}}\n    <div class=\"text-field-footer_e2680f9ba\" data-test-text-field-footer>\n      {{#if @error}}\n        <ErrorMessage id={{this.errorMessageId}} @isInvalid={{this.isInvalid}}>\n          {{@error}}\n        </ErrorMessage>\n      {{else if @helpText}}\n        <HelpText id={{this.helpTextId}}>\n          {{@helpText}}\n        </HelpText>\n      {{/if}}\n\n      {{#if @showCharacterCount}}\n        <span class=\"text-field-character-count_e2680f9ba\" aria-live=\"polite\" data-test-character-count>\n          {{this.characterCount}}{{#if @maxLength}}/{{@maxLength}}{{/if}}\n        </span>\n      {{/if}}\n    </div>\n  {{/if}}\n</div>", {
       strictMode: true,
       scope: () => ({
         Label,

package/dist/form/textarea.css

@@ -13,6 +13,7 @@
 
 /* Textarea element */
 .textarea_eb3566bbf {
+  box-sizing: border-box;
   width: 100%;
   padding: var(--spacing-2);
   border: var(--border-width-1) solid var(--color-border-control);
@@ -21,7 +22,7 @@
   color: var(--color-text);
   font-family: inherit;
   font-size: var(--font-size-13);
-  line-height: var(--line-height-1-25);
+  line-height: var(--line-height-tight);
   transition:
     border-color var(--transition-fast),
     box-shadow var(--transition-fast);

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

@@ -23,7 +23,7 @@ class TimePickerField extends Component {
     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>", {
+    setComponentTemplate(precompileTemplate("<Control @isInvalid={{this.isInvalid}} @isDisabled={{@isDisabled}} @isRequired={{@isRequired}} @isReadOnly={{@isReadOnly}} @labelInfo={{@labelInfo}} ...attributes as |ctrl|>\n  {{#if (has-block \"info\")}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      <:default>{{@label}}</:default>\n      <:info>{{yield to=\"info\"}}</:info>\n    </ctrl.Label>\n  {{else}}\n    <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n      {{@label}}\n    </ctrl.Label>\n  {{/if}}\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,

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

@@ -1 +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;;;;"}
+{"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    /** Info tooltip text shown next to the label */\n    labelInfo?: string;\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  Blocks: {\n    /** Rich tooltip content shown next to the label */\n    info: [];\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      @labelInfo={{@labelInfo}}\n      ...attributes\n      as |ctrl|\n    >\n      {{#if (has-block \"info\")}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          <:default>{{@label}}</:default>\n          <:info>{{yield to=\"info\"}}</:info>\n        </ctrl.Label>\n      {{else}}\n        <ctrl.Label @isVisuallyHidden={{this.isLabelHidden}}>\n          {{@label}}\n        </ctrl.Label>\n      {{/if}}\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":";;;;;;AAwFe,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,qyCAAA,EAuDA;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/toggle.css

@@ -118,6 +118,31 @@
   background-color: var(--color-bg-fill-accent-hover);
 }
 
+/* Sentiment variants - checked state */
+.wrapper_eb612ecfd[data-sentiment="success"] .track_eb612ecfd.checked_eb612ecfd {
+  background-color: var(--color-bg-fill-success);
+}
+
+.wrapper_eb612ecfd[data-sentiment="success"] .label-wrapper_eb612ecfd:hover .track_eb612ecfd.checked_eb612ecfd {
+  background-color: var(--color-bg-fill-success-hover);
+}
+
+.wrapper_eb612ecfd[data-sentiment="warning"] .track_eb612ecfd.checked_eb612ecfd {
+  background-color: var(--color-bg-fill-warning);
+}
+
+.wrapper_eb612ecfd[data-sentiment="warning"] .label-wrapper_eb612ecfd:hover .track_eb612ecfd.checked_eb612ecfd {
+  background-color: var(--color-bg-fill-warning-hover);
+}
+
+.wrapper_eb612ecfd[data-sentiment="critical"] .track_eb612ecfd.checked_eb612ecfd {
+  background-color: var(--color-bg-fill-critical);
+}
+
+.wrapper_eb612ecfd[data-sentiment="critical"] .label-wrapper_eb612ecfd:hover .track_eb612ecfd.checked_eb612ecfd {
+  background-color: var(--color-bg-fill-critical-hover);
+}
+
 /* Checked state - thumb position */
 .wrapper_eb612ecfd[data-size="sm"] .track_eb612ecfd.checked_eb612ecfd .thumb_eb612ecfd {
   transform: translateX(14px);
@@ -161,8 +186,9 @@
 
 /* Label */
 .label_eb612ecfd {
-  font-size: var(--font-size-md);
   color: var(--color-text);
+  font-weight: var(--font-weight-regular);
+  font-size: var(--font-size-md);
   line-height: var(--line-height-normal);
 }
 

package/dist/form/toggle.js

@@ -39,6 +39,9 @@ class Toggle extends Component {
   get labelPosition() {
     return this.args.labelPosition ?? 'start';
   }
+  get sentiment() {
+    return this.args.sentiment ?? 'default';
+  }
   get value() {
     return this.args.value ?? 'on';
   }
@@ -89,7 +92,7 @@ class Toggle extends Component {
     n(this.prototype, "handleBlur", [action]);
   }
   static {
-    setComponentTemplate(precompileTemplate("<div class=\"wrapper_eb612ecfd\" data-size={{this.size}} data-label-position={{this.labelPosition}} data-disabled={{if @isDisabled \"true\"}} data-test-toggle-wrapper ...attributes>\n  <label class=\"label-wrapper_eb612ecfd\">\n    {{#if this.hasLabel}}\n      {{#if (eq this.labelPosition \"start\")}}\n        <span class=\"label_eb612ecfd\" data-test-toggle-label>\n          {{@label}}\n          {{#if @isRequired}}\n            <span class=\"required_eb612ecfd\">*</span>\n          {{/if}}\n        </span>\n      {{/if}}\n    {{/if}}\n\n    <input id={{this.inputId}} type=\"checkbox\" role=\"switch\" class=\"input_eb612ecfd\" name={{@name}} value={{this.value}} checked={{this.checked}} disabled={{@isDisabled}} required={{@isRequired}} aria-checked={{if this.checked \"true\" \"false\"}} aria-describedby={{this.ariaDescribedBy}} {{on \"change\" this.handleChange}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} data-test-toggle />\n\n    <span class=\"track_eb612ecfd\n        {{if this.checked \"checked_eb612ecfd\"}}\n        {{if this.isFocused \"focused_eb612ecfd\"}}\" data-focused={{if this.isFocused \"true\"}} data-test-toggle-track>\n      <span class=\"thumb_eb612ecfd\" data-test-toggle-thumb></span>\n    </span>\n\n    {{#if this.hasLabel}}\n      {{#if (eq this.labelPosition \"end\")}}\n        <span class=\"label_eb612ecfd\" data-test-toggle-label>\n          {{@label}}\n          {{#if @isRequired}}\n            <span class=\"required_eb612ecfd\">*</span>\n          {{/if}}\n        </span>\n      {{/if}}\n    {{/if}}\n  </label>\n\n  {{#if this.hasDescription}}\n    <p id={{this.descriptionId}} class=\"description_eb612ecfd\" data-test-toggle-description>\n      {{@description}}\n    </p>\n  {{/if}}\n</div>", {
+    setComponentTemplate(precompileTemplate("<div class=\"wrapper_eb612ecfd\" data-size={{this.size}} data-sentiment={{this.sentiment}} data-label-position={{this.labelPosition}} data-disabled={{if @isDisabled \"true\"}} data-test-toggle-wrapper ...attributes>\n  <label class=\"label-wrapper_eb612ecfd\">\n    {{#if this.hasLabel}}\n      {{#if (eq this.labelPosition \"start\")}}\n        <span class=\"label_eb612ecfd\" data-test-toggle-label>\n          {{@label}}\n          {{#if @isRequired}}\n            <span class=\"required_eb612ecfd\">*</span>\n          {{/if}}\n        </span>\n      {{/if}}\n    {{/if}}\n\n    <input id={{this.inputId}} type=\"checkbox\" role=\"switch\" class=\"input_eb612ecfd\" name={{@name}} value={{this.value}} checked={{this.checked}} disabled={{@isDisabled}} required={{@isRequired}} aria-checked={{if this.checked \"true\" \"false\"}} aria-describedby={{this.ariaDescribedBy}} {{on \"change\" this.handleChange}} {{on \"focus\" this.handleFocus}} {{on \"blur\" this.handleBlur}} data-test-toggle />\n\n    <span class=\"track_eb612ecfd\n        {{if this.checked \"checked_eb612ecfd\"}}\n        {{if this.isFocused \"focused_eb612ecfd\"}}\" data-focused={{if this.isFocused \"true\"}} data-test-toggle-track>\n      <span class=\"thumb_eb612ecfd\" data-test-toggle-thumb></span>\n    </span>\n\n    {{#if this.hasLabel}}\n      {{#if (eq this.labelPosition \"end\")}}\n        <span class=\"label_eb612ecfd\" data-test-toggle-label>\n          {{@label}}\n          {{#if @isRequired}}\n            <span class=\"required_eb612ecfd\">*</span>\n          {{/if}}\n        </span>\n      {{/if}}\n    {{/if}}\n  </label>\n\n  {{#if this.hasDescription}}\n    <p id={{this.descriptionId}} class=\"description_eb612ecfd\" data-test-toggle-description>\n      {{@description}}\n    </p>\n  {{/if}}\n</div>", {
       strictMode: true,
       scope: () => ({
         eq,

package/dist/layout/{divider-css-1ba104b9c606cbd1f542b45640fb5f2b.css → divider-css-7e0cc7d350e31172582851c6cb2cf586.css}

@@ -1,4 +1,4 @@
-/* <inline>/src/layout/divider-css-1ba104b9c606cbd1f542b45640fb5f2b.css */
+/* <inline>/src/layout/divider-css-7e0cc7d350e31172582851c6cb2cf586.css */
 
   .divider_e11f7c205 {
     display: flex;
@@ -97,7 +97,7 @@
     flex-shrink: 0;
     color: var(--color-text-tertiary);
     font-size: var(--font-size-sm);
-    line-height: var(--line-height-sm);
+    line-height: var(--line-height-tight);
   }
 
   .divider_e11f7c205[data-orientation="horizontal"] .divider__label_e11f7c205 {

package/dist/layout/divider.js

@@ -1,4 +1,4 @@
-import "./divider-css-1ba104b9c606cbd1f542b45640fb5f2b.css"
+import "./divider-css-7e0cc7d350e31172582851c6cb2cf586.css"
 import Component from '@glimmer/component';
 import { precompileTemplate } from '@ember/template-compilation';
 import { setComponentTemplate } from '@ember/component';

package/dist/layout/{grid-css-086976eb41686e3714554f56c098d3d5.css → grid-css-c8259b34d7062f44e78f0a2cc139cb44.css}

@@ -1,4 +1,4 @@
-/* <inline>/src/layout/grid-css-086976eb41686e3714554f56c098d3d5.css */
+/* <inline>/src/layout/grid-css-c8259b34d7062f44e78f0a2cc139cb44.css */
 
   .grid_e46af672c {
     display: grid;
@@ -11,22 +11,22 @@
 
   /* Fixed column counts */
   .grid_e46af672c[data-columns="1"] {
-    grid-template-columns: repeat(1, 1fr);
+    grid-template-columns: repeat(1, minmax(0, 1fr));
   }
   .grid_e46af672c[data-columns="2"] {
-    grid-template-columns: repeat(2, 1fr);
+    grid-template-columns: repeat(2, minmax(0, 1fr));
   }
   .grid_e46af672c[data-columns="3"] {
-    grid-template-columns: repeat(3, 1fr);
+    grid-template-columns: repeat(3, minmax(0, 1fr));
   }
   .grid_e46af672c[data-columns="4"] {
-    grid-template-columns: repeat(4, 1fr);
+    grid-template-columns: repeat(4, minmax(0, 1fr));
   }
   .grid_e46af672c[data-columns="5"] {
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(5, minmax(0, 1fr));
   }
   .grid_e46af672c[data-columns="6"] {
-    grid-template-columns: repeat(6, 1fr);
+    grid-template-columns: repeat(6, minmax(0, 1fr));
   }
 
   /* Auto columns with min-child-width */
@@ -63,22 +63,22 @@
 
   /* Fixed row counts */
   .grid_e46af672c[data-rows="1"] {
-    grid-template-rows: repeat(1, 1fr);
+    grid-template-rows: repeat(1, minmax(0, 1fr));
   }
   .grid_e46af672c[data-rows="2"] {
-    grid-template-rows: repeat(2, 1fr);
+    grid-template-rows: repeat(2, minmax(0, 1fr));
   }
   .grid_e46af672c[data-rows="3"] {
-    grid-template-rows: repeat(3, 1fr);
+    grid-template-rows: repeat(3, minmax(0, 1fr));
   }
   .grid_e46af672c[data-rows="4"] {
-    grid-template-rows: repeat(4, 1fr);
+    grid-template-rows: repeat(4, minmax(0, 1fr));
   }
   .grid_e46af672c[data-rows="5"] {
-    grid-template-rows: repeat(5, 1fr);
+    grid-template-rows: repeat(5, minmax(0, 1fr));
   }
   .grid_e46af672c[data-rows="6"] {
-    grid-template-rows: repeat(6, 1fr);
+    grid-template-rows: repeat(6, minmax(0, 1fr));
   }
 
   /* Auto rows */

package/dist/layout/grid.js

@@ -1,4 +1,4 @@
-import "./grid-css-086976eb41686e3714554f56c098d3d5.css"
+import "./grid-css-c8259b34d7062f44e78f0a2cc139cb44.css"
 import Component from '@glimmer/component';
 import GridItem from './grid-item.js';
 import { precompileTemplate } from '@ember/template-compilation';

package/dist/layout/index.js

@@ -4,4 +4,5 @@ export { default as VStack } from './v-stack.js';
 export { default as Grid } from './grid.js';
 export { default as GridItem } from './grid-item.js';
 export { default as Divider } from './divider.js';
+export { default as Panel } from './panel.js';
 //# sourceMappingURL=index.js.map

package/dist/layout/index.js.map

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