@visitwonders/assembly 0.1.0 → 0.2.0

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":";;;;;;"}

package/dist/layout/panel.css

@@ -0,0 +1,229 @@
+/* src/layout/panel.css */
+/* ===================================
+ * Panel Component
+ * =================================== */
+
+.panel_efcbf2ade {
+  /* Layout */
+  position: relative;
+  display: flex;
+  flex-direction: column;
+
+  /* Shape */
+  overflow: hidden;
+}
+
+/* ===================================
+ * Border Radius
+ * =================================== */
+
+.panel_efcbf2ade[data-border-radius="sm"] {
+  border-radius: var(--radius-sm);
+}
+
+.panel_efcbf2ade[data-border-radius="md"] {
+  border-radius: var(--radius-md);
+}
+
+.panel_efcbf2ade[data-border-radius="lg"] {
+  border-radius: var(--radius-lg);
+}
+
+/* ===================================
+ * Elevation
+ * =================================== */
+
+.panel_efcbf2ade[data-elevation="sm"] {
+  box-shadow: var(--shadow-sm);
+}
+
+.panel_efcbf2ade[data-elevation="md"] {
+  box-shadow: var(--shadow-md);
+}
+
+/* ===================================
+ * Variant: Subtle
+ * =================================== */
+
+.panel_efcbf2ade[data-variant="subtle"][data-tone="neutral"] {
+  background: var(--color-bg-neutral-subtle);
+  color: var(--color-text);
+}
+
+.panel_efcbf2ade[data-variant="subtle"][data-tone="primary"] {
+  background: var(--color-bg-primary-subtle);
+  color: var(--color-text-primary);
+}
+
+.panel_efcbf2ade[data-variant="subtle"][data-tone="success"] {
+  background: var(--color-bg-success-subtle);
+  color: var(--color-text-success);
+}
+
+.panel_efcbf2ade[data-variant="subtle"][data-tone="warning"] {
+  background: var(--color-bg-warning-subtle);
+  color: var(--color-text-warning);
+}
+
+.panel_efcbf2ade[data-variant="subtle"][data-tone="critical"] {
+  background: var(--color-bg-critical-subtle);
+  color: var(--color-text-critical);
+}
+
+.panel_efcbf2ade[data-variant="subtle"][data-tone="info"] {
+  background: var(--color-bg-info-subtle);
+  color: var(--color-text-info);
+}
+
+/* ===================================
+ * Variant: Outline
+ * =================================== */
+
+.panel_efcbf2ade[data-variant="outline"] {
+  background: var(--color-bg-surface);
+  color: var(--color-text);
+}
+
+.panel_efcbf2ade[data-variant="outline"][data-tone="neutral"] {
+  border: 1px solid var(--color-border);
+}
+
+.panel_efcbf2ade[data-variant="outline"][data-tone="primary"] {
+  border: 1px solid var(--color-border-primary);
+}
+
+.panel_efcbf2ade[data-variant="outline"][data-tone="success"] {
+  border: 1px solid var(--color-border-success);
+}
+
+.panel_efcbf2ade[data-variant="outline"][data-tone="warning"] {
+  border: 1px solid var(--color-border-warning);
+}
+
+.panel_efcbf2ade[data-variant="outline"][data-tone="critical"] {
+  border: 1px solid var(--color-border-critical);
+}
+
+.panel_efcbf2ade[data-variant="outline"][data-tone="info"] {
+  border: 1px solid var(--color-border-info);
+}
+
+/* ===================================
+ * Variant: Filled
+ * =================================== */
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="neutral"] {
+  background: var(--color-bg-fill-neutral);
+  color: var(--color-text-on-neutral);
+}
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="primary"] {
+  background: var(--color-bg-fill-primary);
+  color: var(--color-text-on-primary);
+}
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="success"] {
+  background: var(--color-bg-fill-success);
+  color: var(--color-text-on-success);
+}
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="warning"] {
+  background: var(--color-bg-fill-warning);
+  color: var(--color-text-on-warning);
+}
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="critical"] {
+  background: var(--color-bg-fill-critical);
+  color: var(--color-text-on-critical);
+}
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="info"] {
+  background: var(--color-bg-fill-info);
+  color: var(--color-text-on-info);
+}
+
+/* ===================================
+ * Sections (Header, Body, Footer)
+ * =================================== */
+
+.panel-header_efcbf2ade,
+.panel-body_efcbf2ade,
+.panel-footer_efcbf2ade {
+  /* Inherit text color from panel */
+  color: inherit;
+}
+
+/* Padding: none */
+.panel_efcbf2ade[data-padding="none"] .panel-header_efcbf2ade,
+.panel_efcbf2ade[data-padding="none"] .panel-footer_efcbf2ade {
+  padding: var(--spacing-3) 0;
+}
+
+.panel_efcbf2ade[data-padding="none"] .panel-body_efcbf2ade {
+  padding: 0;
+}
+
+/* Padding: sm */
+.panel_efcbf2ade[data-padding="sm"] .panel-header_efcbf2ade,
+.panel_efcbf2ade[data-padding="sm"] .panel-footer_efcbf2ade {
+  padding: var(--spacing-3) var(--spacing-3);
+}
+
+.panel_efcbf2ade[data-padding="sm"] .panel-body_efcbf2ade {
+  padding: var(--spacing-3);
+}
+
+/* Padding: md */
+.panel_efcbf2ade[data-padding="md"] .panel-header_efcbf2ade,
+.panel_efcbf2ade[data-padding="md"] .panel-footer_efcbf2ade {
+  padding: var(--spacing-3) var(--spacing-4);
+}
+
+.panel_efcbf2ade[data-padding="md"] .panel-body_efcbf2ade {
+  padding: var(--spacing-4);
+}
+
+/* Padding: lg */
+.panel_efcbf2ade[data-padding="lg"] .panel-header_efcbf2ade,
+.panel_efcbf2ade[data-padding="lg"] .panel-footer_efcbf2ade {
+  padding: var(--spacing-3) var(--spacing-6);
+}
+
+.panel_efcbf2ade[data-padding="lg"] .panel-body_efcbf2ade {
+  padding: var(--spacing-6);
+}
+
+/* ===================================
+ * Section Separators
+ * =================================== */
+
+/* Subtle + Outline variants use subtle border */
+.panel_efcbf2ade[data-variant="subtle"] .panel-header_efcbf2ade,
+.panel_efcbf2ade[data-variant="outline"] .panel-header_efcbf2ade {
+  border-bottom: 1px solid var(--color-border-subtle);
+}
+
+.panel_efcbf2ade[data-variant="subtle"] .panel-footer_efcbf2ade,
+.panel_efcbf2ade[data-variant="outline"] .panel-footer_efcbf2ade {
+  border-top: 1px solid var(--color-border-subtle);
+}
+
+/* Filled variant uses translucent white border */
+.panel_efcbf2ade[data-variant="filled"] .panel-header_efcbf2ade {
+  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+.panel_efcbf2ade[data-variant="filled"] .panel-footer_efcbf2ade {
+  border-top: 1px solid rgba(255, 255, 255, 0.2);
+}
+
+/* Warning/neutral filled use dark separator for contrast on light fills */
+.panel_efcbf2ade[data-variant="filled"][data-tone="warning"] .panel-header_efcbf2ade,
+.panel_efcbf2ade[data-variant="filled"][data-tone="neutral"] .panel-header_efcbf2ade {
+  border-bottom-color: rgba(0, 0, 0, 0.1);
+}
+
+.panel_efcbf2ade[data-variant="filled"][data-tone="warning"] .panel-footer_efcbf2ade,
+.panel_efcbf2ade[data-variant="filled"][data-tone="neutral"] .panel-footer_efcbf2ade {
+  border-top-color: rgba(0, 0, 0, 0.1);
+}

package/dist/layout/panel.js

@@ -0,0 +1,32 @@
+import "./panel.css"
+import Component from '@glimmer/component';
+import { precompileTemplate } from '@ember/template-compilation';
+import { setComponentTemplate } from '@ember/component';
+
+;
+
+class Panel extends Component {
+  get tone() {
+    return this.args.tone ?? 'neutral';
+  }
+  get variant() {
+    return this.args.variant ?? 'subtle';
+  }
+  get elevation() {
+    return this.args.elevation ?? 'none';
+  }
+  get padding() {
+    return this.args.padding ?? 'md';
+  }
+  get borderRadius() {
+    return this.args.borderRadius ?? 'lg';
+  }
+  static {
+    setComponentTemplate(precompileTemplate("<div class=\"panel_efcbf2ade\" data-tone={{this.tone}} data-variant={{this.variant}} data-elevation={{this.elevation}} data-padding={{this.padding}} data-border-radius={{this.borderRadius}} data-test-panel ...attributes>\n  {{#if (has-block \"header\")}}\n    <div class=\"panel-header_efcbf2ade\" data-test-panel-header>\n      {{yield to=\"header\"}}\n    </div>\n  {{/if}}\n\n  <div class=\"panel-body_efcbf2ade\" data-test-panel-body>\n    {{yield}}\n  </div>\n\n  {{#if (has-block \"footer\")}}\n    <div class=\"panel-footer_efcbf2ade\" data-test-panel-footer>\n      {{yield to=\"footer\"}}\n    </div>\n  {{/if}}\n</div>", {
+      strictMode: true
+    }), this);
+  }
+}
+
+export { Panel as default };
+//# sourceMappingURL=panel.js.map

package/dist/layout/panel.js.map

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

package/dist/overlay/blanket.css

@@ -1,9 +1,10 @@
+/* src/overlay/blanket.css */
 /* ===================================
  * Blanket Component
  * Full-screen overlay backdrop
  * =================================== */
 
-.blanket {
+.blanket_e68ef6998 {
   /* Positioning */
   position: fixed;
   inset: 0;
@@ -17,15 +18,15 @@
  * Opacity Variants
  * =================================== */
 
-.blanket[data-opacity="light"] {
+.blanket_e68ef6998[data-opacity="light"] {
   background: rgba(0, 0, 0, 0.3);
 }
 
-.blanket[data-opacity="default"] {
+.blanket_e68ef6998[data-opacity="default"] {
   background: rgba(0, 0, 0, 0.5);
 }
 
-.blanket[data-opacity="heavy"] {
+.blanket_e68ef6998[data-opacity="heavy"] {
   background: rgba(0, 0, 0, 0.8);
 }
 
@@ -34,16 +35,16 @@
  * =================================== */
 
 /* Fade in (visible state) */
-.blanket[data-animated="true"][data-state="visible"] {
-  animation: blanket-fade-in var(--duration-200) var(--easing-out);
+.blanket_e68ef6998[data-animated="true"][data-state="visible"] {
+  animation: blanket-fade-in__e68ef6998 var(--duration-200) var(--easing-out);
 }
 
 /* Fade out (hidden state) */
-.blanket[data-animated="true"][data-state="hidden"] {
-  animation: blanket-fade-out var(--duration-150) var(--easing-in) forwards;
+.blanket_e68ef6998[data-animated="true"][data-state="hidden"] {
+  animation: blanket-fade-out__e68ef6998 var(--duration-150) var(--easing-in) forwards;
 }
 
-@keyframes blanket-fade-in {
+@keyframes blanket-fade-in__e68ef6998 {
   from {
     opacity: 0;
   }
@@ -52,7 +53,7 @@
   }
 }
 
-@keyframes blanket-fade-out {
+@keyframes blanket-fade-out__e68ef6998 {
   from {
     opacity: 1;
   }
@@ -62,6 +63,6 @@
 }
 
 /* No animation */
-.blanket[data-animated="false"] {
+.blanket_e68ef6998[data-animated="false"] {
   animation: none;
 }

package/dist/overlay/blanket.js

@@ -126,7 +126,7 @@ class Blanket extends Component {
   // Template
   // ============================================================================
   static {
-    setComponentTemplate(precompileTemplate("{{!-- Track visibility changes to manage exit animation state --}}\n<span hidden {{this.trackVisibility visible=@visible animated=this.animated}} data-test-blanket-tracker></span>\n\n{{#if this.shouldRender}}\n  {{#in-element this.destinationElement insertBefore=null}}\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"blanket\" aria-hidden=\"true\" data-opacity={{this.opacity}} data-animated={{if this.animated \"true\" \"false\"}} data-state={{this.dataState}} style={{this.zIndexStyle}} {{on \"click\" this.handleClick}} {{on \"animationend\" this.handleAnimationEnd}} {{this.scrollLock enabled=this.lockScroll}} data-test-blanket ...attributes>\n      {{yield}}\n    </div>\n  {{/in-element}}\n{{/if}}", {
+    setComponentTemplate(precompileTemplate("{{!-- Track visibility changes to manage exit animation state --}}\n<span hidden {{this.trackVisibility visible=@visible animated=this.animated}} data-test-blanket-tracker></span>\n\n{{#if this.shouldRender}}\n  {{#in-element this.destinationElement insertBefore=null}}\n    {{!-- template-lint-disable no-invalid-interactive --}}\n    <div class=\"blanket_e68ef6998\" aria-hidden=\"true\" data-opacity={{this.opacity}} data-animated={{if this.animated \"true\" \"false\"}} data-state={{this.dataState}} style={{this.zIndexStyle}} {{on \"click\" this.handleClick}} {{on \"animationend\" this.handleAnimationEnd}} {{this.scrollLock enabled=this.lockScroll}} data-test-blanket ...attributes>\n      {{yield}}\n    </div>\n  {{/in-element}}\n{{/if}}", {
       strictMode: true,
       scope: () => ({
         on