@ds-mo/ui 14.13.0 → 14.14.0

package/dist/components/{p-iBuPFJL9.js → p-CKY989vF.js}

@@ -1,2 +1,2 @@
-import{p as t,H as i,c as e,h as s,a as n,t as o}from"./index.js";import{d as r}from"./p-vWK5faWZ.js";import{d}from"./p-C7rzVotG.js";import{d as a}from"./p-BFfLvMZd.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as l}from"./p-DZFilC--.js";import{D as p,s as u}from"./p-DOUk4KoT.js";import{s as h,r as v}from"./p-B8q-6a03.js";import{C as f}from"./p-CuwopElg.js";import{c as g}from"./p-DuFm-ieS.js";const m=()=>`@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-input-h,.ds-interaction-fill.sc-ds-input{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before,.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before{z-index:1}.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-input-h,.ds-interaction-fill--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-input-h,.ds-interaction-fill--selected.sc-ds-input{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-input-h::after,.ds-interaction-fill--grouped.sc-ds-input::after,.ds-interaction-fill--grouped.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-input-h,.ds-interaction-fill--grouped.sc-ds-input{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-input-h>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill.sc-ds-input>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill__content.sc-ds-input{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-input-h,.ds-interaction-fill--on-faint.sc-ds-input{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-input-h,.ds-interaction-fill--on-medium.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-input-h,.ds-interaction-fill--on-bold.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-input-h,.ds-interaction-fill--on-strong.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-input-h,.ds-interaction-fill--on-translucent.sc-ds-input{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-input-h,.ds-interaction-fill--on-inverted.sc-ds-input{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-input-h,.ds-interaction-fill--on-media.sc-ds-input{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-input-h,.ds-interaction-fill--on-always-dark.sc-ds-input{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-input-h,.ds-interaction-fill--on-navigation.sc-ds-input{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-input,.ds-control--lg.sc-ds-input-h,.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input,.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input,.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-input-h,.ds-control--lg.sc-ds-input{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-input{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-input{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-control-icon-box.sc-ds-input{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-input{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-input{position:relative;padding-inline-end:calc(     var(--ds-control-label-inset, var(--dimension-space-025)) +       var(--ds-control-gap, var(--dimension-space-050))   )}.ds-control-label-dot__badge.sc-ds-input{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-width--hug.sc-ds-input-h,.ds-control-width--hug.sc-ds-input{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-field-stack.sc-ds-input-h,.ds-field-stack.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.ds-text--display-medium.sc-ds-input-h,.ds-text--display-medium.sc-ds-input{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-input-h,.ds-text--display-small.sc-ds-input{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-input-h,.ds-text--title-large.sc-ds-input{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-input-h,.ds-text--title-medium.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-input-h,.ds-text--title-small.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-input-h,.ds-text--body-large.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-input-h,.ds-text--body-medium.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-input-h,.ds-text--body-small.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-input-h,.ds-text--caption.sc-ds-input{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--display-small.ds-text--emphasis.sc-ds-input-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-input,.ds-text--display-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-input-h,.ds-text--display-small.ds-text--regular.sc-ds-input-h,.ds-text--display-medium.ds-text--regular.sc-ds-input,.ds-text--display-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-input-h,.ds-text--title-large.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-input-h,.ds-text--title-large.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--title-small.ds-text--emphasis.sc-ds-input-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-input,.ds-text--title-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-input-h,.ds-text--title-small.ds-text--regular.sc-ds-input-h,.ds-text--title-medium.ds-text--regular.sc-ds-input,.ds-text--title-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-input-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--body-large.ds-text--emphasis.sc-ds-input,.ds-text--body-medium.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-input-h,.ds-text--body-medium.ds-text--regular.sc-ds-input-h,.ds-text--body-large.ds-text--regular.sc-ds-input,.ds-text--body-medium.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-input-h,.ds-text--body-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-input-h,.ds-text--body-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-input-h,.ds-text--caption.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-input-h,.ds-text--caption.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.input-host.sc-ds-input-h{display:inline-flex;--ds-input-fg:var(--color-foreground-primary);--ds-input-placeholder:var(--color-foreground-secondary);--ds-input-placeholder-active:var(--color-foreground-quaternary);--ds-input-adornment-fg:var(--color-foreground-secondary);--ds-input-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input-h .input-control.sc-ds-input{width:100%}.input-control.sc-ds-input{overflow:hidden;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-input-fg)}.input-control--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-input-border)}.input-control--error.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.input-control--bordered.sc-ds-input:focus-within:not(.input-control--error){--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-brand)}.ds-control-inactive.sc-ds-input-h .input-control.sc-ds-input::after{background:transparent}.native-input.sc-ds-input{position:relative;z-index:2;flex:1 1 auto;min-width:0;height:100%;background:transparent;border:none;border-radius:inherit;outline:none;color:var(--ds-input-fg);font-family:inherit;-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input:read-only:not(:disabled){cursor:default}.native-input.sc-ds-input::placeholder{color:var(--ds-input-placeholder)}.native-input.sc-ds-input:focus::placeholder{color:var(--ds-input-placeholder-active)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.input-control__prefix.sc-ds-input,.input-control__suffix.sc-ds-input{position:relative;z-index:2;color:var(--ds-input-adornment-fg)}.input-control__suffix--empty.sc-ds-input{display:none}.input-control.sc-ds-input>.input-control__clear.sc-ds-input{position:relative;z-index:2;flex-shrink:0;align-self:center}.input-control.ds-control--lg.sc-ds-input:has(.input-control__clear),.input-control.ds-control--md.sc-ds-input:has(.input-control__clear),.input-control.ds-control--sm.sc-ds-input:has(.input-control__clear){padding-right:var(--dimension-space-050)}.input-control.ds-control--xs.sc-ds-input:has(.input-control__clear){padding-right:0}.error-text.sc-ds-input{width:100%}@media (forced-colors: active){.input-control--bordered.sc-ds-input:focus-within:not(.input-control--error)::after{outline-color:var(--ds-forced-color-selected)}.input-control--error.sc-ds-input::after{outline-style:dashed}}`;const b={lg:"lg",md:"md",sm:"sm",xs:"xs"};const y={lg:"md",md:"sm",sm:"xs",xs:"xs"};let x=0;const w=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.dsClear=e(this,"dsClear");this.internals=this.attachInternals();this.generatedId=`ds-input-${++x}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage=p;this.clearLabel="Clear";this.type="text";this.inputMode="";this.enterKeyHint="";this.size="md";this.width="fill";this.hasBorder=true;this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.hasSuffix=false;this.focused=false;this.touched=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleFocus=()=>{this.focused=true};this.handleBlur=()=>{this.focused=false;this.touched=true};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.hasSuffix=Boolean(this.el.querySelector('[slot="suffix"]'));this.syncFormValue()}componentDidRender(){const t=Boolean(this.el.querySelector('[slot="suffix"]'));if(t!==this.hasSuffix)this.hasSuffix=t}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;h(this.internals,this.value,{inactive:t});const i=this.required&&!t&&this.value.length===0;u(this.internals,i,this.requiredMessage)}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=v(t)}async setFocus(){this.el.querySelector("input")?.focus()}render(){const t=this.inputId??this.generatedId;const i=this.isInactive||this.disabled||this.formDisabled;const e=this.value.length>0;const o=this.value!==this.initialValue;const r=this.type==="search"&&e&&!i&&!this.readOnly;const d=this.error&&Boolean(this.errorMessage);const a=f[this.size];const c=b[this.size];const l=[this.ariaDescribedby,d?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return s(n,{key:"14f89a3b7a1be509fba635d3290e0348a0460b76",class:{"input-host":true,"ds-field-stack":true,"ds-control-inactive":i,[`ds-control--${this.size}`]:true,...g(this.width)},"data-disabled":i?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-invalid":this.error?"":undefined,"data-filled":e?"":undefined,"data-focused":this.focused?"":undefined,"data-dirty":o?"":undefined,"data-touched":this.touched?"":undefined},s("div",{key:"a6c669ad78164a9affcc260f6da29b17e4c353fc",class:{"input-control":true,"ds-control-frame":true,"input-control--bordered":this.hasBorder,"input-control--error":this.hasBorder&&this.error,"ds-interaction-fill":true,[`ds-control--${this.size}`]:true}},this.icon&&s("span",{key:"2b62ab06e67a1b2bff44cb3c1455b7e4dd6cf62e",class:"input-control__prefix ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},s("ds-icon",{key:"64219f98843f921a4457cd45360c2d607b9bedbc",name:this.icon,size:c,color:"inherit"})),s("input",{key:"71f6185c46e329293c4f2c57181166ad3a7396e2",type:this.type,id:t,value:this.value,placeholder:this.placeholder,disabled:i,readOnly:this.readOnly,required:this.required,autoFocus:this.autoFocus,autoComplete:this.autoComplete,inputMode:this.inputMode||undefined,enterKeyHint:this.enterKeyHint||undefined,class:`native-input ds-control-label-box ds-text--${a.replace("text-","")} ds-text--regular ds-interaction-fill__content`,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":l,"aria-invalid":this.error?"true":undefined,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),s("span",{key:"fd4624ce08f45a0e6a49d56323c7626bb66be365",class:{"input-control__suffix":true,"ds-control-icon-box":true,"input-control__suffix--empty":!this.hasSuffix}},s("slot",{key:"435efca1095cf41b26509a1d0dd701646ee4e88b",name:"suffix"})),r&&s("ds-button-unfilled",{key:"f93a95e7e25398a130067fe8e231a5fcd2ce163d",class:"input-control__clear",variant:"icon",size:y[this.size],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:this.clearLabel,onDsClick:this.handleClear})),d&&s("ds-text",{key:"a19b77e72d04078c142ed481e8c38f198f8e9cd8",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return m()}},[326,"ds-input",{value:[1025],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[1],autoComplete:[1,"autocomplete"],inputMode:[1,"inputmode"],enterKeyHint:[1,"enterkeyhint"],size:[1],width:[1],hasBorder:[4,"has-border"],icon:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],hasSuffix:[32],focused:[32],touched:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function k(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(o(t))){customElements.define(o(t),w)}break;case"ds-badge":if(!customElements.get(o(t))){r()}break;case"ds-button-unfilled":if(!customElements.get(o(t))){d()}break;case"ds-icon":if(!customElements.get(o(t))){a()}break;case"ds-loader":if(!customElements.get(o(t))){c()}break;case"ds-text":if(!customElements.get(o(t))){l()}break}}))}k();export{w as I,k as d};
-//# sourceMappingURL=p-iBuPFJL9.js.map
+import{p as t,H as i,c as e,h as s,a as n,t as o}from"./index.js";import{d as r}from"./p-vWK5faWZ.js";import{d}from"./p-C7rzVotG.js";import{d as a}from"./p-BFfLvMZd.js";import{d as c}from"./p-Ca-I2UnB.js";import{d as l}from"./p-DZFilC--.js";import{D as p,s as u}from"./p-DOUk4KoT.js";import{s as h,r as v}from"./p-B8q-6a03.js";import{C as f}from"./p-CuwopElg.js";import{c as g}from"./p-DuFm-ieS.js";const m=()=>`@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-interaction-fill.sc-ds-input-h,.ds-interaction-fill.sc-ds-input{position:var(--ds-interaction-position, relative);z-index:var(--ds-interaction-z-index, 0);cursor:default;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent;--ds-interaction-divider-width:0px;--ds-interaction-divider-color:transparent;--ds-interaction-divider-inline-start-width:0px;--ds-interaction-divider-inline-start-color:transparent;--ds-interaction-divider-inline-end-width:0px;--ds-interaction-divider-inline-end-color:transparent}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before,.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;cursor:inherit;transition:none}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before{z-index:1}.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{z-index:3;box-shadow:inset 0 calc(-1 * var(--ds-interaction-divider-width)) 0 var(--ds-interaction-divider-color),     inset var(--ds-interaction-divider-inline-start-width) 0 0       var(--ds-interaction-divider-inline-start-color),     inset calc(-1 * var(--ds-interaction-divider-inline-end-width)) 0 0       var(--ds-interaction-divider-inline-end-color),     inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-input-h,.ds-interaction-fill--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-input-h,.ds-interaction-fill--selected.sc-ds-input{--ds-interaction-dot-ring:var(--ds-interaction-active)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}}.ds-interaction-fill.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill--grouped.sc-ds-input-h::after,.ds-interaction-fill--grouped.sc-ds-input::after,.ds-interaction-fill--grouped.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}@media (hover: hover) and (pointer: fine){.ds-interaction-fill--grouped.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill--grouped.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-group-fill, transparent)}}.ds-interaction-fill--grouped.sc-ds-input-h,.ds-interaction-fill--grouped.sc-ds-input{--ds-interaction-divider-width:var(--ds-interaction-group-divider-width, 0px);--ds-interaction-divider-color:var(--ds-interaction-group-divider-color, transparent);--ds-interaction-divider-inline-start-width:var(     --ds-interaction-group-divider-inline-start-width,     0px   );--ds-interaction-divider-inline-start-color:var(     --ds-interaction-group-divider-inline-start-color,     transparent   );--ds-interaction-divider-inline-end-width:var(     --ds-interaction-group-divider-inline-end-width,     0px   );--ds-interaction-divider-inline-end-color:var(     --ds-interaction-group-divider-inline-end-color,     transparent   )}.ds-interaction-fill.sc-ds-input-h>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill.sc-ds-input>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill__content.sc-ds-input{position:relative;z-index:2;cursor:inherit}.ds-interaction-fill--on-faint.sc-ds-input-h,.ds-interaction-fill--on-faint.sc-ds-input{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-input-h,.ds-interaction-fill--on-medium.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-input-h,.ds-interaction-fill--on-bold.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-input-h,.ds-interaction-fill--on-strong.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-input-h,.ds-interaction-fill--on-translucent.sc-ds-input{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active-brand);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-input-h,.ds-interaction-fill--on-inverted.sc-ds-input{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active-brand);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-input-h,.ds-interaction-fill--on-media.sc-ds-input{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-input-h,.ds-interaction-fill--on-always-dark.sc-ds-input{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active-brand);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-input-h,.ds-interaction-fill--on-navigation.sc-ds-input{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}@media (forced-colors: active){.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{box-shadow:none;outline:var(--ds-interaction-border-width) solid       var(--ds-forced-color-control-boundary);outline-offset:calc(-1 * var(--ds-interaction-border-width))}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:transparent;outline:var(--dimension-stroke-width-025) solid var(--ds-forced-color-selected);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}}@media (forced-colors: active) and (hover: hover) and (pointer: fine){.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled):not(:focus-visible):not(:focus-within):not(.ds-focus-ring--visible)::after{outline-color:var(--ds-forced-color-selected);outline-width:var(--dimension-stroke-width-012)}}@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:var(--effect-opacity-medium);pointer-events:none;cursor:not-allowed}@media (forced-colors: active){.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{color:var(--ds-forced-color-disabled);opacity:1}}.ds-control--lg.sc-ds-input,.ds-control--lg.sc-ds-input-h,.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input,.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input,.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-radius:var(--dimension-radius-025)}.ds-control--lg.sc-ds-input-h,.ds-control--lg.sc-ds-input{--ds-control-height:var(--dimension-size-500);--ds-control-icon:var(--dimension-iconography-lg);--ds-control-padding-inline:var(--dimension-space-100);--ds-control-label-inset:var(--dimension-space-050);--ds-control-gap:var(--dimension-space-050)}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-frame.sc-ds-input{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));border-radius:var(--ds-control-radius, var(--dimension-radius-025))}.ds-control-section-heading.sc-ds-input{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding-inline:calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-control-icon-box.sc-ds-input{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md))}.ds-control-label-box.sc-ds-input{min-width:0;padding-inline:var(--ds-control-label-inset, var(--dimension-space-025))}.ds-control-label-dot.sc-ds-input{position:relative;padding-inline-end:calc(     var(--ds-control-label-inset, var(--dimension-space-025)) +       var(--ds-control-gap, var(--dimension-space-050))   )}.ds-control-label-dot__badge.sc-ds-input{position:absolute;inset-block-start:0;inset-inline-end:0;pointer-events:none}.ds-control-width--hug.sc-ds-input-h,.ds-control-width--hug.sc-ds-input{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-field-stack.sc-ds-input-h,.ds-field-stack.sc-ds-input{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.ds-text--display-medium.sc-ds-input-h,.ds-text--display-medium.sc-ds-input{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-input-h,.ds-text--display-small.sc-ds-input{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-input-h,.ds-text--title-large.sc-ds-input{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-input-h,.ds-text--title-medium.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-input-h,.ds-text--title-small.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-input-h,.ds-text--body-large.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-input-h,.ds-text--body-medium.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-input-h,.ds-text--body-small.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-input-h,.ds-text--caption.sc-ds-input{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--display-small.ds-text--emphasis.sc-ds-input-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-input,.ds-text--display-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-input-h,.ds-text--display-small.ds-text--regular.sc-ds-input-h,.ds-text--display-medium.ds-text--regular.sc-ds-input,.ds-text--display-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-input-h,.ds-text--title-large.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-input-h,.ds-text--title-large.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--title-small.ds-text--emphasis.sc-ds-input-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-input,.ds-text--title-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-input-h,.ds-text--title-small.ds-text--regular.sc-ds-input-h,.ds-text--title-medium.ds-text--regular.sc-ds-input,.ds-text--title-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-input-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--body-large.ds-text--emphasis.sc-ds-input,.ds-text--body-medium.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-input-h,.ds-text--body-medium.ds-text--regular.sc-ds-input-h,.ds-text--body-large.ds-text--regular.sc-ds-input,.ds-text--body-medium.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-input-h,.ds-text--body-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-input-h,.ds-text--body-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-input-h,.ds-text--caption.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-input-h,.ds-text--caption.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}@media (forced-colors: active){.sc-ds-input:root,.sc-ds-input-h,.ds-forced-colors-scope.sc-ds-input{--ds-forced-color-surface:Canvas;--ds-forced-color-content:CanvasText;--ds-forced-color-control-boundary:ButtonText;--ds-forced-color-selected:Highlight;--ds-forced-color-on-selected:HighlightText;--ds-forced-color-disabled:GrayText}}.input-host.sc-ds-input-h{display:inline-flex;--ds-input-fg:var(--color-foreground-primary);--ds-input-placeholder:var(--color-foreground-secondary);--ds-input-placeholder-active:var(--color-foreground-quaternary);--ds-input-adornment-fg:var(--color-foreground-secondary);--ds-input-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input-h .input-control.sc-ds-input{width:100%}.input-control.sc-ds-input{overflow:hidden;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-input-fg)}.input-control--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-input-border)}.input-control--error.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.input-control--bordered.sc-ds-input:focus-within:not(.input-control--error){--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-brand)}.ds-control-inactive.sc-ds-input-h .input-control.sc-ds-input::after{background:transparent}.native-input.sc-ds-input{position:relative;z-index:2;flex:1 1 auto;min-width:0;height:100%;background:transparent;border:none;border-radius:inherit;outline:none;color:var(--ds-input-fg);font-family:inherit;-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input:read-only:not(:disabled){cursor:default}.native-input.sc-ds-input::placeholder{color:var(--ds-input-placeholder)}.native-input.sc-ds-input:focus::placeholder{color:var(--ds-input-placeholder-active)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.input-control__prefix.sc-ds-input,.input-control__suffix.sc-ds-input{position:relative;z-index:2;color:var(--ds-input-adornment-fg)}.input-control__suffix--empty.sc-ds-input{display:none}.input-control.sc-ds-input>.input-control__clear.sc-ds-input{position:relative;z-index:2;flex-shrink:0;align-self:center}.input-control.ds-control--lg.sc-ds-input:has(.input-control__clear),.input-control.ds-control--md.sc-ds-input:has(.input-control__clear),.input-control.ds-control--sm.sc-ds-input:has(.input-control__clear){padding-right:var(--dimension-space-050)}.input-control.ds-control--xs.sc-ds-input:has(.input-control__clear){padding-right:0}.error-text.sc-ds-input{width:100%}@media (forced-colors: active){.input-control--bordered.sc-ds-input:focus-within:not(.input-control--error)::after{outline-color:var(--ds-forced-color-selected)}.input-control--error.sc-ds-input::after{outline-style:dashed}}`;const b={lg:"lg",md:"md",sm:"sm",xs:"xs"};const y={lg:"md",md:"sm",sm:"xs",xs:"xs"};let x=0;const w=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=e(this,"dsChange");this.dsClear=e(this,"dsClear");this.internals=this.attachInternals();this.generatedId=`ds-input-${++x}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage=p;this.clearLabel="Clear";this.type="text";this.inputMode="";this.enterKeyHint="";this.size="md";this.width="fill";this.hasBorder=true;this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.hasSuffix=false;this.focused=false;this.touched=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleFocus=()=>{this.focused=true};this.handleBlur=()=>{this.focused=false;this.touched=true};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.hasSuffix=Boolean(this.el.querySelector('[slot="suffix"]'));this.syncFormValue()}componentDidRender(){const t=Boolean(this.el.querySelector('[slot="suffix"]'));if(t!==this.hasSuffix)this.hasSuffix=t}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;h(this.internals,this.value,{inactive:t});const i=this.required&&!t&&this.value.length===0;u(this.internals,i,this.requiredMessage)}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=v(t)}async setFocus(){this.el.querySelector("input")?.focus()}render(){const t=this.inputId??this.generatedId;const i=this.isInactive||this.disabled||this.formDisabled;const e=this.value.length>0;const o=this.value!==this.initialValue;const r=this.type==="search"&&e&&!i&&!this.readOnly;const d=this.error&&Boolean(this.errorMessage);const a=f[this.size];const c=b[this.size];const l=this.type==="number";const p=[this.ariaDescribedby,d?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return s(n,{key:"85ac766c6e096b0c4979dc9305cbecd07b7d227c",class:{"input-host":true,"ds-field-stack":true,"ds-control-inactive":i,[`ds-control--${this.size}`]:true,...g(this.width)},"data-disabled":i?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-invalid":this.error?"":undefined,"data-filled":e?"":undefined,"data-focused":this.focused?"":undefined,"data-dirty":o?"":undefined,"data-touched":this.touched?"":undefined},s("div",{key:"934de9db7ca33654bafde3701a676ac32070aec9",class:{"input-control":true,"ds-control-frame":true,"input-control--bordered":this.hasBorder,"input-control--error":this.hasBorder&&this.error,"ds-interaction-fill":true,[`ds-control--${this.size}`]:true}},this.icon&&s("span",{key:"acb16cc2c893139abbe01541540bc18c3b1a7d36",class:"input-control__prefix ds-control-icon-box ds-interaction-fill__content","aria-hidden":"true"},s("ds-icon",{key:"afa907fbc89fe80d4657d1651df1bb6209fdd03a",name:this.icon,size:c,color:"inherit"})),s("input",{key:"e26e0be3d7cd649cf7662a5d4ddb764ca8c1446c",type:this.type,id:t,value:this.value,placeholder:this.placeholder,min:l?this.min:undefined,max:l?this.max:undefined,step:l?this.step:undefined,disabled:i,readOnly:this.readOnly,required:this.required,autoFocus:this.autoFocus,autoComplete:this.autoComplete,inputMode:this.inputMode||undefined,enterKeyHint:this.enterKeyHint||undefined,class:`native-input ds-control-label-box ds-text--${a.replace("text-","")} ds-text--regular ds-interaction-fill__content`,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":p,"aria-invalid":this.error?"true":undefined,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),s("span",{key:"c5dcef0fd4d07e30e8e93a9bf26bd64da55ddc9a",class:{"input-control__suffix":true,"ds-control-icon-box":true,"input-control__suffix--empty":!this.hasSuffix}},s("slot",{key:"eaaae922aa9b5fb76f40c8636e6eeeac443f748f",name:"suffix"})),r&&s("ds-button-unfilled",{key:"163ddfcea4304e61b56073795281dffa85c9c8b9",class:"input-control__clear",variant:"icon",size:y[this.size],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:this.clearLabel,onDsClick:this.handleClear})),d&&s("ds-text",{key:"15c9d255cbedd3e14bf3c2e7db1a173cb4b6e7c9",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return m()}},[326,"ds-input",{value:[1025],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[1],min:[2],max:[2],step:[2],autoComplete:[1,"autocomplete"],inputMode:[1,"inputmode"],enterKeyHint:[1,"enterkeyhint"],size:[1],width:[1],hasBorder:[4,"has-border"],icon:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],hasSuffix:[32],focused:[32],touched:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function k(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(o(t))){customElements.define(o(t),w)}break;case"ds-badge":if(!customElements.get(o(t))){r()}break;case"ds-button-unfilled":if(!customElements.get(o(t))){d()}break;case"ds-icon":if(!customElements.get(o(t))){a()}break;case"ds-loader":if(!customElements.get(o(t))){c()}break;case"ds-text":if(!customElements.get(o(t))){l()}break}}))}k();export{w as I,k as d};
+//# sourceMappingURL=p-CKY989vF.js.map

package/dist/components/p-CKY989vF.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["inputCss","ICON_SIZE","lg","md","sm","xs","CLEAR_BUTTON_SIZE","idCounter","Input","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","errorId","value","disabled","readOnly","required","requiredMessage","DEFAULT_REQUIRED_MESSAGE","clearLabel","type","inputMode","enterKeyHint","size","width","hasBorder","isInactive","autoFocus","error","ariaLabel","initialValue","formDisabled","hasSuffix","focused","touched","handleInput","e","target","dsChange","emit","handleFocus","handleBlur","handleClear","dsClear","el","querySelector","focus","componentWillLoad","Boolean","syncFormValue","componentDidRender","inactive","setFormControlValue","internals","missing","length","setRequiredValidity","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","restoreStringFormState","setFocus","render","inputId","filled","dirty","showClear","showError","errorMessage","textVariant","CONTROL_TEXT_VARIANT","iconSize","numeric","describedBy","ariaDescribedby","undefined","filter","join","h","Host","key","class","controlWidthClass","icon","name","color","id","placeholder","min","max","step","autoComplete","replace","ariaLabelledby","onInput","onFocus","onBlur","variant","rounded","onDsClick","as","textId","role"],"sources":["src/wc/components/Input/Input.css?tag=ds-input&encapsulation=scoped","src/wc/components/Input/Input.tsx"],"sourcesContent":["@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-parts.css';\n@import '../../utils/control-width.css';\n@import '../../utils/field-stack.css';\n@import '../../utils/typography.css';\n@import '../../utils/forced-colors.css';\n\n:host(.input-host) {\n  display: inline-flex;\n  --ds-input-fg: var(--color-foreground-primary);\n  --ds-input-placeholder: var(--color-foreground-secondary);\n  --ds-input-placeholder-active: var(--color-foreground-quaternary);\n  --ds-input-adornment-fg: var(--color-foreground-secondary);\n  --ds-input-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .input-control {\n  width: 100%;\n}\n\n.input-control {\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-input-fg);\n}\n\n.input-control--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-input-border);\n}\n\n.input-control--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.input-control--bordered:focus-within:not(.input-control--error) {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .input-control::after {\n  background: transparent;\n}\n\n.native-input {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  background: transparent;\n  border: none;\n  border-radius: inherit;\n  outline: none;\n  color: var(--ds-input-fg);\n  font-family: inherit;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.native-input:disabled {\n  cursor: not-allowed;\n}\n\n.native-input:read-only:not(:disabled) {\n  cursor: default;\n}\n\n.native-input::placeholder {\n  color: var(--ds-input-placeholder);\n}\n\n.native-input:focus::placeholder {\n  color: var(--ds-input-placeholder-active);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.input-control__prefix,\n.input-control__suffix {\n  position: relative;\n  z-index: 2;\n  color: var(--ds-input-adornment-fg);\n}\n\n.input-control__suffix--empty {\n  display: none;\n}\n\n/* Keep this more specific than ButtonUnfilled's host-level hug alignment so\n   component stylesheet hydration order cannot move the nested action. */\n.input-control > .input-control__clear {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  align-self: center;\n}\n\n.input-control.ds-control--lg:has(.input-control__clear),\n.input-control.ds-control--md:has(.input-control__clear),\n.input-control.ds-control--sm:has(.input-control__clear) {\n  padding-right: var(--dimension-space-050);\n}\n\n.input-control.ds-control--xs:has(.input-control__clear) {\n  padding-right: 0;\n}\n\n.error-text {\n  width: 100%;\n}\n\n@media (forced-colors: active) {\n  .input-control--bordered:focus-within:not(.input-control--error)::after {\n    outline-color: var(--ds-forced-color-selected);\n  }\n\n  .input-control--error::after {\n    outline-style: dashed;\n  }\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Method, Watch, h, Host } from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringFormState,\n  setFormControlValue,\n  setRequiredValidity,\n  type ControlWidth,\n} from '../../utils';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password' | 'number';\nexport type InputSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type InputWidth = ControlWidth;\n\nconst ICON_SIZE: Record<InputSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n  lg: 'lg',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nconst CLEAR_BUTTON_SIZE: Record<InputSize, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-input',\n  styleUrl: 'Input.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Input {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private generatedId = `ds-input-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keeps the value focusable and submittable while preventing edits. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() clearLabel: string = 'Clear';\n  @Prop() placeholder: string | undefined;\n  @Prop() type: InputType = 'text';\n  /** Minimum accepted value when type is number. */\n  @Prop() min: number | undefined;\n  /** Maximum accepted value when type is number. */\n  @Prop() max: number | undefined;\n  /** Numeric increment used by native stepping and constraint validation. */\n  @Prop() step: number | undefined;\n  /** Native browser autofill hint. */\n  @Prop({ attribute: 'autocomplete' }) autoComplete: string | undefined;\n  /** Preferred virtual keyboard without changing the value semantics. */\n  @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n  /** Preferred virtual-keyboard action label. */\n  @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n  /** Control density. */\n  @Prop() size: InputSize = 'md';\n  /** Width fit — fill the parent (default) or hug the available content. */\n  @Prop() width: InputWidth = 'fill';\n  /** Show the standard inset border, including focused and invalid strokes. */\n  @Prop() hasBorder: boolean = true;\n  /** Optional leading icon name. */\n  @Prop() icon: string | undefined;\n  @Prop() isInactive: boolean = false;\n  @Prop() autoFocus: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string | undefined;\n  /** Associates the internal input with an external <label>. */\n  @Prop() inputId: string | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n\n  private initialValue = '';\n  @State() private formDisabled = false;\n  @State() private hasSuffix = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    this.syncFormValue();\n  }\n\n  componentDidRender() {\n    const hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    if (hasSuffix !== this.hasSuffix) this.hasSuffix = hasSuffix;\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    setFormControlValue(this.internals, this.value, { inactive });\n    const missing = this.required && !inactive && this.value.length === 0;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  private handleInput = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dsChange.emit(this.value);\n  };\n\n  private handleFocus = () => {\n    this.focused = true;\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleClear = () => {\n    this.value = '';\n    this.dsChange.emit('');\n    this.dsClear.emit();\n    this.el.querySelector('input')?.focus();\n  };\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const filled = this.value.length > 0;\n    const dirty = this.value !== this.initialValue;\n    const showClear = this.type === 'search' && filled && !inactive && !this.readOnly;\n    const showError = this.error && Boolean(this.errorMessage);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const numeric = this.type === 'number';\n\n    const describedBy = [\n      this.ariaDescribedby,\n      showError ? this.errorId : undefined,\n    ].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <Host\n        class={{\n          'input-host': true,\n          'ds-field-stack': true,\n          'ds-control-inactive': inactive,\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n        }}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-invalid={this.error ? '' : undefined}\n        data-filled={filled ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n      >\n        <div\n          class={{\n            'input-control': true,\n            'ds-control-frame': true,\n            'input-control--bordered': this.hasBorder,\n            'input-control--error': this.hasBorder && this.error,\n            'ds-interaction-fill': true,\n            [`ds-control--${this.size}`]: true,\n          }}\n        >\n          {this.icon && (\n            <span class=\"input-control__prefix ds-control-icon-box ds-interaction-fill__content\" aria-hidden=\"true\">\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n          <input\n            type={this.type}\n            id={inputId}\n            value={this.value}\n            placeholder={this.placeholder}\n            min={numeric ? this.min : undefined}\n            max={numeric ? this.max : undefined}\n            step={numeric ? this.step : undefined}\n            disabled={inactive}\n            readOnly={this.readOnly}\n            required={this.required}\n            autoFocus={this.autoFocus}\n            autoComplete={this.autoComplete}\n            inputMode={this.inputMode || undefined}\n            enterKeyHint={this.enterKeyHint || undefined}\n            class={`native-input ds-control-label-box ds-text--${textVariant.replace('text-', '')} ds-text--regular ds-interaction-fill__content`}\n            aria-label={this.ariaLabel}\n            aria-labelledby={this.ariaLabelledby}\n            aria-describedby={describedBy}\n            aria-invalid={this.error ? 'true' : undefined}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          <span class={{ 'input-control__suffix': true, 'ds-control-icon-box': true, 'input-control__suffix--empty': !this.hasSuffix }}>\n            <slot name=\"suffix\" />\n          </span>\n          {showClear && (\n            <ds-button-unfilled\n              class=\"input-control__clear\"\n              variant=\"icon\"\n              size={CLEAR_BUTTON_SIZE[this.size]}\n              icon=\"CrossCircle\"\n              hasBorder={false}\n              rounded\n              ariaLabel={this.clearLabel}\n              onDsClick={this.handleClear}\n            />\n          )}\n        </div>\n        {showError && (\n          <ds-text\n            class=\"error-text\"\n            as=\"div\"\n            variant=\"text-body-small\"\n            color=\"negative\"\n            textId={this.errorId}\n            role=\"alert\"\n          >\n            {this.errorMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"+YAAA,MAAMA,EAAW,IAAM,u9mBCevB,MAAMC,EAA0D,CAC9DC,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,MAGN,MAAMC,EAA2D,CAC/DJ,GAAI,KACJC,GAAI,KACJC,GAAI,KACJC,GAAI,MAGN,IAAIE,EAAY,E,MAQHC,EAAKC,EAAA,MAAAD,UAAAE,EANlB,WAAAC,CAAAC,G,kJAUUC,KAAAC,YAAc,cAAcP,IAC5BM,KAAAE,QAAU,GAAGF,KAAKC,oBAEDD,KAAAG,MAAgB,GAGhBH,KAAAI,SAAoB,MAEpBJ,KAAAK,SAAoB,MACpBL,KAAAM,SAAoB,MACrCN,KAAAO,gBAA0BC,EAC1BR,KAAAS,WAAqB,QAErBT,KAAAU,KAAkB,OAUQV,KAAAW,UAAoB,GAEjBX,KAAAY,aAAuB,GAEpDZ,KAAAa,KAAkB,KAElBb,KAAAc,MAAoB,OAEpBd,KAAAe,UAAqB,KAGrBf,KAAAgB,WAAsB,MACtBhB,KAAAiB,UAAqB,MACrBjB,KAAAkB,MAAiB,MAIUlB,KAAAmB,UAA2B,KAOtDnB,KAAAoB,aAAe,GACNpB,KAAAqB,aAAe,MACfrB,KAAAsB,UAAY,MACZtB,KAAAuB,QAAU,MACVvB,KAAAwB,QAAU,MA0CnBxB,KAAAyB,YAAeC,IACrB1B,KAAKG,MAASuB,EAAEC,OAA4BxB,MAC5CH,KAAK4B,SAASC,KAAK7B,KAAKG,MAAM,EAGxBH,KAAA8B,YAAc,KACpB9B,KAAKuB,QAAU,IAAI,EAGbvB,KAAA+B,WAAa,KACnB/B,KAAKuB,QAAU,MACfvB,KAAKwB,QAAU,IAAI,EAGbxB,KAAAgC,YAAc,KACpBhC,KAAKG,MAAQ,GACbH,KAAK4B,SAASC,KAAK,IACnB7B,KAAKiC,QAAQJ,OACb7B,KAAKkC,GAAGC,cAAc,UAAUC,OAAO,CA2G1C,CArKC,iBAAAC,GACErC,KAAKoB,aAAepB,KAAKG,MACzBH,KAAKsB,UAAYgB,QAAQtC,KAAKkC,GAAGC,cAAc,oBAC/CnC,KAAKuC,e,CAGP,kBAAAC,GACE,MAAMlB,EAAYgB,QAAQtC,KAAKkC,GAAGC,cAAc,oBAChD,GAAIb,IAActB,KAAKsB,UAAWtB,KAAKsB,UAAYA,C,CAOrD,aAAAiB,GACE,MAAME,EAAWzC,KAAKgB,YAAchB,KAAKI,UAAYJ,KAAKqB,aAC1DqB,EAAoB1C,KAAK2C,UAAW3C,KAAKG,MAAO,CAAEsC,aAClD,MAAMG,EAAU5C,KAAKM,WAAamC,GAAYzC,KAAKG,MAAM0C,SAAW,EACpEC,EAAoB9C,KAAK2C,UAAWC,EAAS5C,KAAKO,gB,CAGpD,oBAAAwC,CAAqB3C,GACnBJ,KAAKqB,aAAejB,EACpBJ,KAAKuC,e,CAGP,iBAAAS,GACEhD,KAAKG,MAAQH,KAAKoB,Y,CAGpB,wBAAA6B,CAAyBC,GACvBlD,KAAKG,MAAQgD,EAAuBD,E,CAItC,cAAME,GACJpD,KAAKkC,GAAGC,cAAc,UAAUC,O,CAwBlC,MAAAiB,GACE,MAAMC,EAAUtD,KAAKsD,SAAWtD,KAAKC,YACrC,MAAMwC,EAAWzC,KAAKgB,YAAchB,KAAKI,UAAYJ,KAAKqB,aAC1D,MAAMkC,EAASvD,KAAKG,MAAM0C,OAAS,EACnC,MAAMW,EAAQxD,KAAKG,QAAUH,KAAKoB,aAClC,MAAMqC,EAAYzD,KAAKU,OAAS,UAAY6C,IAAWd,IAAazC,KAAKK,SACzE,MAAMqD,EAAY1D,KAAKkB,OAASoB,QAAQtC,KAAK2D,cAC7C,MAAMC,EAAcC,EAAqB7D,KAAKa,MAC9C,MAAMiD,EAAW1E,EAAUY,KAAKa,MAChC,MAAMkD,EAAU/D,KAAKU,OAAS,SAE9B,MAAMsD,EAAc,CAClBhE,KAAKiE,gBACLP,EAAY1D,KAAKE,QAAUgE,WAC3BC,OAAO7B,SAAS8B,KAAK,MAAQF,UAE/B,OACEG,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAc,KACd,iBAAkB,KAClB,sBAAuB/B,EACvB,CAAC,eAAezC,KAAKa,QAAS,QAC3B4D,EAAkBzE,KAAKc,QAC3B,gBACc2B,EAAW,GAAKyB,UAAS,gBACzBlE,KAAKK,SAAW,GAAK6D,UAAS,gBAC9BlE,KAAKM,SAAW,GAAK4D,UAAS,eAC/BlE,KAAKkB,MAAQ,GAAKgD,UAAS,cAC5BX,EAAS,GAAKW,UAAS,eACtBlE,KAAKuB,QAAU,GAAK2C,UAAS,aAC/BV,EAAQ,GAAKU,UAAS,eACpBlE,KAAKwB,QAAU,GAAK0C,WAElCG,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,gBAAiB,KACjB,mBAAoB,KACpB,0BAA2BxE,KAAKe,UAChC,uBAAwBf,KAAKe,WAAaf,KAAKkB,MAC/C,sBAAuB,KACvB,CAAC,eAAelB,KAAKa,QAAS,OAG/Bb,KAAK0E,MACJL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,yEAAwE,cAAa,QAC/FH,EAAA,WAAAE,IAAA,2CAASI,KAAM3E,KAAK0E,KAAM7D,KAAMiD,EAAUc,MAAM,aAGpDP,EAAA,SAAAE,IAAA,2CACE7D,KAAMV,KAAKU,KACXmE,GAAIvB,EACJnD,MAAOH,KAAKG,MACZ2E,YAAa9E,KAAK8E,YAClBC,IAAKhB,EAAU/D,KAAK+E,IAAMb,UAC1Bc,IAAKjB,EAAU/D,KAAKgF,IAAMd,UAC1Be,KAAMlB,EAAU/D,KAAKiF,KAAOf,UAC5B9D,SAAUqC,EACVpC,SAAUL,KAAKK,SACfC,SAAUN,KAAKM,SACfW,UAAWjB,KAAKiB,UAChBiE,aAAclF,KAAKkF,aACnBvE,UAAWX,KAAKW,WAAauD,UAC7BtD,aAAcZ,KAAKY,cAAgBsD,UACnCM,MAAO,8CAA8CZ,EAAYuB,QAAQ,QAAS,oDAAmD,aACzHnF,KAAKmB,UAAS,kBACTnB,KAAKoF,eAAc,mBAClBpB,EAAW,eACfhE,KAAKkB,MAAQ,OAASgD,UACpCmB,QAASrF,KAAKyB,YACd6D,QAAStF,KAAK8B,YACdyD,OAAQvF,KAAK+B,aAEfsC,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAE,wBAAyB,KAAM,sBAAuB,KAAM,gCAAiCxE,KAAKsB,YAC/G+C,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEZlB,GACCY,EAAA,sBAAAE,IAAA,2CACEC,MAAM,uBACNgB,QAAQ,OACR3E,KAAMpB,EAAkBO,KAAKa,MAC7B6D,KAAK,cACL3D,UAAW,MACX0E,QAAO,KACPtE,UAAWnB,KAAKS,WAChBiF,UAAW1F,KAAKgC,eAIrB0B,GACCW,EAAA,WAAAE,IAAA,2CACEC,MAAM,aACNmB,GAAG,MACHH,QAAQ,kBACRZ,MAAM,WACNgB,OAAQ5F,KAAKE,QACb2F,KAAK,SAEJ7F,KAAK2D,c","ignoreList":[]}

package/dist/docs/components.json

@@ -1,5 +1,5 @@
 {
-  "timestamp": "2026-08-23T03:20:04",
+  "timestamp": "2026-08-23T20:32:45",
   "compiler": {
     "name": "@stencil/core",
     "version": "4.43.5",
@@ -11098,6 +11098,58 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "max",
+          "type": "number | undefined",
+          "complexType": {
+            "original": "number | undefined",
+            "resolved": "number | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "max",
+          "reflectToAttr": false,
+          "docs": "Maximum accepted value when type is number.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
+        {
+          "name": "min",
+          "type": "number | undefined",
+          "complexType": {
+            "original": "number | undefined",
+            "resolved": "number | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "min",
+          "reflectToAttr": false,
+          "docs": "Minimum accepted value when type is number.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "name",
           "type": "string | undefined",
@@ -11285,12 +11337,38 @@
           "getter": false,
           "setter": false
         },
+        {
+          "name": "step",
+          "type": "number | undefined",
+          "complexType": {
+            "original": "number | undefined",
+            "resolved": "number | undefined",
+            "references": {}
+          },
+          "mutable": false,
+          "attr": "step",
+          "reflectToAttr": false,
+          "docs": "Numeric increment used by native stepping and constraint validation.",
+          "docsTags": [],
+          "values": [
+            {
+              "type": "number"
+            },
+            {
+              "type": "undefined"
+            }
+          ],
+          "optional": false,
+          "required": false,
+          "getter": false,
+          "setter": false
+        },
         {
           "name": "type",
-          "type": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "type": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
           "complexType": {
             "original": "InputType",
-            "resolved": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+            "resolved": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
             "references": {
               "InputType": {
                 "location": "local",
@@ -11315,6 +11393,10 @@
               "value": "email",
               "type": "string"
             },
+            {
+              "value": "number",
+              "type": "string"
+            },
             {
               "value": "password",
               "type": "string"
@@ -30327,7 +30409,7 @@
       "path": "src/wc/components/FilterMenu/FilterMenu.tsx"
     },
     "src/wc/components/Input/Input.tsx::InputType": {
-      "declaration": "export type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';",
+      "declaration": "export type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password' | 'number';",
       "docstring": "",
       "path": "src/wc/components/Input/Input.tsx"
     },

package/dist/mcp-data/registry/input.json

@@ -2,7 +2,7 @@
   "$schema": "https://ui.shadcn.com/schema/registry-item.json",
   "name": "input",
   "title": "Input",
-  "description": "Form-associated single-line text field for primary and secondary application backgrounds, with native text input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
+  "description": "Form-associated single-line text and number field for primary and secondary application backgrounds, with native input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
   "type": "registry:ui",
   "meta": {
     "library": "@ds-mo/ui",
@@ -13,9 +13,9 @@
     "intent": {
       "audience": "general",
       "status": "stable",
-      "summary": "Form-associated single-line text field for primary and secondary application backgrounds, with native text input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
+      "summary": "Form-associated single-line text and number field for primary and secondary application backgrounds, with native input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
       "useWhen": [
-        "A user must enter or edit one line of text, an email address, telephone number, URL, search query, or password.",
+        "A user must enter or edit one line of text, an email address, telephone number, URL, search query, password, or exact number.",
         "The value must participate in native, Angular, or React form state.",
         "A compact filter or toolbar needs a single-line search field that follows the shared control-density recipe."
       ],
@@ -61,6 +61,7 @@
         "Search fields show a standard borderless CrossCircle icon action only while they contain a value. Clearing emits the empty value and restores focus to the native field.",
         "The suffix slot is for compact units or decorations. The optional leading icon is decorative and does not replace the field label.",
         "Use autoComplete, inputMode, and enterKeyHint to provide browser and virtual-keyboard hints without changing the value's semantic type.",
+        "Number fields preserve native spinbutton semantics, stepping, and min/max constraint behavior while dsChange continues to report the native string value.",
         "The host exposes focused, filled, dirty, touched, invalid, disabled, read-only, and required data attributes for Field integration and diagnostics.",
         "Use Input only on primary or secondary application backgrounds. It intentionally does not expose alternate surface contexts."
       ],
@@ -221,6 +222,22 @@
           "required": false,
           "mutable": false
         },
+        "max": {
+          "type": "number | undefined",
+          "resolvedType": "number | undefined",
+          "attribute": "max",
+          "required": false,
+          "mutable": false,
+          "description": "Maximum accepted value when type is number."
+        },
+        "min": {
+          "type": "number | undefined",
+          "resolvedType": "number | undefined",
+          "attribute": "min",
+          "required": false,
+          "mutable": false,
+          "description": "Minimum accepted value when type is number."
+        },
         "name": {
           "type": "string | undefined",
           "resolvedType": "string | undefined",
@@ -269,9 +286,17 @@
           "mutable": false,
           "description": "Control density."
         },
+        "step": {
+          "type": "number | undefined",
+          "resolvedType": "number | undefined",
+          "attribute": "step",
+          "required": false,
+          "mutable": false,
+          "description": "Numeric increment used by native stepping and constraint validation."
+        },
         "type": {
           "type": "InputType",
-          "resolvedType": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+          "resolvedType": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
           "attribute": "type",
           "default": "'text'",
           "required": false,
@@ -447,6 +472,22 @@
         "required": false,
         "mutable": false
       },
+      "max": {
+        "type": "number | undefined",
+        "resolvedType": "number | undefined",
+        "attribute": "max",
+        "required": false,
+        "mutable": false,
+        "description": "Maximum accepted value when type is number."
+      },
+      "min": {
+        "type": "number | undefined",
+        "resolvedType": "number | undefined",
+        "attribute": "min",
+        "required": false,
+        "mutable": false,
+        "description": "Minimum accepted value when type is number."
+      },
       "name": {
         "type": "string | undefined",
         "resolvedType": "string | undefined",
@@ -495,9 +536,17 @@
         "mutable": false,
         "description": "Control density."
       },
+      "step": {
+        "type": "number | undefined",
+        "resolvedType": "number | undefined",
+        "attribute": "step",
+        "required": false,
+        "mutable": false,
+        "description": "Numeric increment used by native stepping and constraint validation."
+      },
       "type": {
         "type": "InputType",
-        "resolvedType": "\"email\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
+        "resolvedType": "\"email\" | \"number\" | \"password\" | \"search\" | \"tel\" | \"text\" | \"url\"",
         "attribute": "type",
         "default": "'text'",
         "required": false,
@@ -591,7 +640,7 @@
     },
     {
       "path": "src/wc/components/Input/Input.tsx",
-      "content": "import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Method, Watch, h, Host } from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringFormState,\n  setFormControlValue,\n  setRequiredValidity,\n  type ControlWidth,\n} from '../../utils';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';\nexport type InputSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type InputWidth = ControlWidth;\n\nconst ICON_SIZE: Record<InputSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n  lg: 'lg',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nconst CLEAR_BUTTON_SIZE: Record<InputSize, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-input',\n  styleUrl: 'Input.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Input {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private generatedId = `ds-input-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keeps the value focusable and submittable while preventing edits. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() clearLabel: string = 'Clear';\n  @Prop() placeholder: string | undefined;\n  @Prop() type: InputType = 'text';\n  /** Native browser autofill hint. */\n  @Prop({ attribute: 'autocomplete' }) autoComplete: string | undefined;\n  /** Preferred virtual keyboard without changing the value semantics. */\n  @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n  /** Preferred virtual-keyboard action label. */\n  @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n  /** Control density. */\n  @Prop() size: InputSize = 'md';\n  /** Width fit — fill the parent (default) or hug the available content. */\n  @Prop() width: InputWidth = 'fill';\n  /** Show the standard inset border, including focused and invalid strokes. */\n  @Prop() hasBorder: boolean = true;\n  /** Optional leading icon name. */\n  @Prop() icon: string | undefined;\n  @Prop() isInactive: boolean = false;\n  @Prop() autoFocus: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string | undefined;\n  /** Associates the internal input with an external <label>. */\n  @Prop() inputId: string | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n\n  private initialValue = '';\n  @State() private formDisabled = false;\n  @State() private hasSuffix = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    this.syncFormValue();\n  }\n\n  componentDidRender() {\n    const hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    if (hasSuffix !== this.hasSuffix) this.hasSuffix = hasSuffix;\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    setFormControlValue(this.internals, this.value, { inactive });\n    const missing = this.required && !inactive && this.value.length === 0;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  private handleInput = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dsChange.emit(this.value);\n  };\n\n  private handleFocus = () => {\n    this.focused = true;\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleClear = () => {\n    this.value = '';\n    this.dsChange.emit('');\n    this.dsClear.emit();\n    this.el.querySelector('input')?.focus();\n  };\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const filled = this.value.length > 0;\n    const dirty = this.value !== this.initialValue;\n    const showClear = this.type === 'search' && filled && !inactive && !this.readOnly;\n    const showError = this.error && Boolean(this.errorMessage);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const describedBy = [\n      this.ariaDescribedby,\n      showError ? this.errorId : undefined,\n    ].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <Host\n        class={{\n          'input-host': true,\n          'ds-field-stack': true,\n          'ds-control-inactive': inactive,\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n        }}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-invalid={this.error ? '' : undefined}\n        data-filled={filled ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n      >\n        <div\n          class={{\n            'input-control': true,\n            'ds-control-frame': true,\n            'input-control--bordered': this.hasBorder,\n            'input-control--error': this.hasBorder && this.error,\n            'ds-interaction-fill': true,\n            [`ds-control--${this.size}`]: true,\n          }}\n        >\n          {this.icon && (\n            <span class=\"input-control__prefix ds-control-icon-box ds-interaction-fill__content\" aria-hidden=\"true\">\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n          <input\n            type={this.type}\n            id={inputId}\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={inactive}\n            readOnly={this.readOnly}\n            required={this.required}\n            autoFocus={this.autoFocus}\n            autoComplete={this.autoComplete}\n            inputMode={this.inputMode || undefined}\n            enterKeyHint={this.enterKeyHint || undefined}\n            class={`native-input ds-control-label-box ds-text--${textVariant.replace('text-', '')} ds-text--regular ds-interaction-fill__content`}\n            aria-label={this.ariaLabel}\n            aria-labelledby={this.ariaLabelledby}\n            aria-describedby={describedBy}\n            aria-invalid={this.error ? 'true' : undefined}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          <span class={{ 'input-control__suffix': true, 'ds-control-icon-box': true, 'input-control__suffix--empty': !this.hasSuffix }}>\n            <slot name=\"suffix\" />\n          </span>\n          {showClear && (\n            <ds-button-unfilled\n              class=\"input-control__clear\"\n              variant=\"icon\"\n              size={CLEAR_BUTTON_SIZE[this.size]}\n              icon=\"CrossCircle\"\n              hasBorder={false}\n              rounded\n              ariaLabel={this.clearLabel}\n              onDsClick={this.handleClear}\n            />\n          )}\n        </div>\n        {showError && (\n          <ds-text\n            class=\"error-text\"\n            as=\"div\"\n            variant=\"text-body-small\"\n            color=\"negative\"\n            textId={this.errorId}\n            role=\"alert\"\n          >\n            {this.errorMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Method, Watch, h, Host } from '@stencil/core';\nimport {\n  controlWidthClass,\n  CONTROL_TEXT_VARIANT,\n  DEFAULT_REQUIRED_MESSAGE,\n  restoreStringFormState,\n  setFormControlValue,\n  setRequiredValidity,\n  type ControlWidth,\n} from '../../utils';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password' | 'number';\nexport type InputSize = 'lg' | 'md' | 'sm' | 'xs';\nexport type InputWidth = ControlWidth;\n\nconst ICON_SIZE: Record<InputSize, 'lg' | 'md' | 'sm' | 'xs'> = {\n  lg: 'lg',\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nconst CLEAR_BUTTON_SIZE: Record<InputSize, 'md' | 'sm' | 'xs'> = {\n  lg: 'md',\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-input',\n  styleUrl: 'Input.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Input {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private generatedId = `ds-input-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keeps the value focusable and submittable while preventing edits. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = DEFAULT_REQUIRED_MESSAGE;\n  @Prop() clearLabel: string = 'Clear';\n  @Prop() placeholder: string | undefined;\n  @Prop() type: InputType = 'text';\n  /** Minimum accepted value when type is number. */\n  @Prop() min: number | undefined;\n  /** Maximum accepted value when type is number. */\n  @Prop() max: number | undefined;\n  /** Numeric increment used by native stepping and constraint validation. */\n  @Prop() step: number | undefined;\n  /** Native browser autofill hint. */\n  @Prop({ attribute: 'autocomplete' }) autoComplete: string | undefined;\n  /** Preferred virtual keyboard without changing the value semantics. */\n  @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n  /** Preferred virtual-keyboard action label. */\n  @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n  /** Control density. */\n  @Prop() size: InputSize = 'md';\n  /** Width fit — fill the parent (default) or hug the available content. */\n  @Prop() width: InputWidth = 'fill';\n  /** Show the standard inset border, including focused and invalid strokes. */\n  @Prop() hasBorder: boolean = true;\n  /** Optional leading icon name. */\n  @Prop() icon: string | undefined;\n  @Prop() isInactive: boolean = false;\n  @Prop() autoFocus: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string | undefined;\n  /** Associates the internal input with an external <label>. */\n  @Prop() inputId: string | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n\n  private initialValue = '';\n  @State() private formDisabled = false;\n  @State() private hasSuffix = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    this.syncFormValue();\n  }\n\n  componentDidRender() {\n    const hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    if (hasSuffix !== this.hasSuffix) this.hasSuffix = hasSuffix;\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    setFormControlValue(this.internals, this.value, { inactive });\n    const missing = this.required && !inactive && this.value.length === 0;\n    setRequiredValidity(this.internals, missing, this.requiredMessage);\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = restoreStringFormState(state);\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  private handleInput = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dsChange.emit(this.value);\n  };\n\n  private handleFocus = () => {\n    this.focused = true;\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleClear = () => {\n    this.value = '';\n    this.dsChange.emit('');\n    this.dsClear.emit();\n    this.el.querySelector('input')?.focus();\n  };\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const filled = this.value.length > 0;\n    const dirty = this.value !== this.initialValue;\n    const showClear = this.type === 'search' && filled && !inactive && !this.readOnly;\n    const showError = this.error && Boolean(this.errorMessage);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n    const numeric = this.type === 'number';\n\n    const describedBy = [\n      this.ariaDescribedby,\n      showError ? this.errorId : undefined,\n    ].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <Host\n        class={{\n          'input-host': true,\n          'ds-field-stack': true,\n          'ds-control-inactive': inactive,\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n        }}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-invalid={this.error ? '' : undefined}\n        data-filled={filled ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n      >\n        <div\n          class={{\n            'input-control': true,\n            'ds-control-frame': true,\n            'input-control--bordered': this.hasBorder,\n            'input-control--error': this.hasBorder && this.error,\n            'ds-interaction-fill': true,\n            [`ds-control--${this.size}`]: true,\n          }}\n        >\n          {this.icon && (\n            <span class=\"input-control__prefix ds-control-icon-box ds-interaction-fill__content\" aria-hidden=\"true\">\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n          <input\n            type={this.type}\n            id={inputId}\n            value={this.value}\n            placeholder={this.placeholder}\n            min={numeric ? this.min : undefined}\n            max={numeric ? this.max : undefined}\n            step={numeric ? this.step : undefined}\n            disabled={inactive}\n            readOnly={this.readOnly}\n            required={this.required}\n            autoFocus={this.autoFocus}\n            autoComplete={this.autoComplete}\n            inputMode={this.inputMode || undefined}\n            enterKeyHint={this.enterKeyHint || undefined}\n            class={`native-input ds-control-label-box ds-text--${textVariant.replace('text-', '')} ds-text--regular ds-interaction-fill__content`}\n            aria-label={this.ariaLabel}\n            aria-labelledby={this.ariaLabelledby}\n            aria-describedby={describedBy}\n            aria-invalid={this.error ? 'true' : undefined}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          <span class={{ 'input-control__suffix': true, 'ds-control-icon-box': true, 'input-control__suffix--empty': !this.hasSuffix }}>\n            <slot name=\"suffix\" />\n          </span>\n          {showClear && (\n            <ds-button-unfilled\n              class=\"input-control__clear\"\n              variant=\"icon\"\n              size={CLEAR_BUTTON_SIZE[this.size]}\n              icon=\"CrossCircle\"\n              hasBorder={false}\n              rounded\n              ariaLabel={this.clearLabel}\n              onDsClick={this.handleClear}\n            />\n          )}\n        </div>\n        {showError && (\n          <ds-text\n            class=\"error-text\"\n            as=\"div\"\n            variant=\"text-body-small\"\n            color=\"negative\"\n            textId={this.errorId}\n            role=\"alert\"\n          >\n            {this.errorMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     }
   ]

package/dist/mcp-data/registry/paper-texture.json

@@ -129,7 +129,7 @@
     },
     {
       "path": "src/wc/components/PaperTexture/PaperTexture.tsx",
-      "content": "import { Component, Element, Host, Prop, Watch, h } from '@stencil/core';\nimport {\n  emptyPixel,\n  getShaderColorFromString,\n  getShaderNoiseTexture,\n  paperTextureFragmentShader,\n  ShaderFitOptions,\n  ShaderMount,\n  type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { DEFAULT_PAPER_TEXTURE_CONFIG, type PaperTextureConfig } from './paper-texture-types';\n\nlet emptyPixelPromise: Promise<HTMLImageElement> | undefined;\nlet noiseTexturePromise: Promise<HTMLImageElement> | undefined;\n\nfunction waitForImage(image: HTMLImageElement): Promise<HTMLImageElement> {\n  if (image.complete && image.naturalWidth > 0) return Promise.resolve(image);\n\n  return new Promise((resolve, reject) => {\n    const onLoad = () => {\n      cleanup();\n      resolve(image);\n    };\n    const onError = () => {\n      cleanup();\n      reject(new Error(`Paper texture image failed to load: ${image.src}`));\n    };\n    const cleanup = () => {\n      image.removeEventListener('load', onLoad);\n      image.removeEventListener('error', onError);\n    };\n\n    image.addEventListener('load', onLoad, { once: true });\n    image.addEventListener('error', onError, { once: true });\n  });\n}\n\nfunction loadImage(source: HTMLImageElement | string | undefined): Promise<HTMLImageElement> {\n  if (source instanceof HTMLImageElement) return waitForImage(source);\n\n  const image = new Image();\n  if (source && source !== emptyPixel) image.crossOrigin = 'anonymous';\n  image.src = source || emptyPixel;\n  return waitForImage(image);\n}\n\nfunction loadEmptyPixel(): Promise<HTMLImageElement> {\n  emptyPixelPromise ??= loadImage(emptyPixel);\n  return emptyPixelPromise;\n}\n\nfunction loadNoiseTexture(): Promise<HTMLImageElement> {\n  noiseTexturePromise ??= Promise.resolve(getShaderNoiseTexture()).then(image => {\n    if (!image) throw new Error('Paper texture noise texture is unavailable');\n    return waitForImage(image);\n  });\n  return noiseTexturePromise;\n}\n\n@Component({\n  tag: 'ds-paper-texture',\n  styleUrl: 'PaperTexture.css',\n  scoped: true,\n})\nexport class PaperTexture {\n  @Element() el!: HTMLElement;\n\n  /** Paper Design shader parameters. Set as a JavaScript property. */\n  @Prop() config: PaperTextureConfig = {};\n\n  private shaderMount?: ShaderMount;\n  private syncGeneration = 0;\n  private hasLoaded = false;\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    void this.syncShader();\n  }\n\n  disconnectedCallback() {\n    this.syncGeneration += 1;\n    this.disposeShader();\n  }\n\n  @Watch('config')\n  onConfigChange() {\n    if (this.hasLoaded) void this.syncShader();\n  }\n\n  private resolvedConfig(): Required<Omit<PaperTextureConfig, 'image'>> &\n    Pick<PaperTextureConfig, 'image'> {\n    return {\n      ...DEFAULT_PAPER_TEXTURE_CONFIG,\n      ...(this.config ?? {}),\n    };\n  }\n\n  private async syncShader() {\n    const generation = ++this.syncGeneration;\n    const config = this.resolvedConfig();\n\n    try {\n      const [image, noiseTexture] = await Promise.all([\n        loadImage(config.image).catch(() => loadEmptyPixel()),\n        loadNoiseTexture(),\n      ]);\n\n      if (generation !== this.syncGeneration || !this.el.isConnected) return;\n\n      const uniforms = this.buildUniforms(config, image, noiseTexture);\n      const mountElement = this.el.querySelector<HTMLElement>('.paper-texture__mount');\n      if (!mountElement) return;\n\n      if (!this.shaderMount) {\n        this.shaderMount = new ShaderMount(\n          mountElement,\n          paperTextureFragmentShader,\n          uniforms,\n          undefined,\n          config.speed,\n          config.frame,\n          config.minPixelRatio,\n          config.maxPixelCount,\n          ['u_image']\n        );\n      } else {\n        this.shaderMount.setUniforms(uniforms);\n        this.shaderMount.setSpeed(config.speed);\n        this.shaderMount.setFrame(config.frame);\n        this.shaderMount.setMinPixelRatio(config.minPixelRatio);\n        this.shaderMount.setMaxPixelCount(config.maxPixelCount);\n      }\n\n      this.el.removeAttribute('data-paper-texture-error');\n    } catch (error) {\n      if (generation !== this.syncGeneration) return;\n      this.disposeShader();\n      this.el.querySelector<HTMLElement>('.paper-texture__mount')?.replaceChildren();\n      this.el.setAttribute('data-paper-texture-error', 'unavailable');\n      console.warn('[ds-paper-texture] WebGL2 paper texture unavailable.', error);\n    }\n  }\n\n  private buildUniforms(\n    config: Required<Omit<PaperTextureConfig, 'image'>> & Pick<PaperTextureConfig, 'image'>,\n    image: HTMLImageElement,\n    noiseTexture: HTMLImageElement\n  ): ShaderMountUniforms {\n    return {\n      u_image: image,\n      u_noiseTexture: noiseTexture,\n      u_colorFront: getShaderColorFromString(config.colorFront),\n      u_colorBack: getShaderColorFromString(config.colorBack),\n      u_contrast: config.contrast,\n      u_roughness: config.roughness,\n      u_fiber: config.fiber,\n      u_fiberSize: config.fiberSize,\n      u_crumples: config.crumples,\n      u_crumpleSize: config.crumpleSize,\n      u_foldCount: config.foldCount,\n      u_folds: config.folds,\n      u_fade: config.fade,\n      u_drops: config.drops,\n      u_seed: config.seed,\n      u_fit: ShaderFitOptions[config.fit],\n      u_scale: config.scale,\n      u_rotation: config.rotation,\n      u_offsetX: config.offsetX,\n      u_offsetY: config.offsetY,\n      u_originX: config.originX,\n      u_originY: config.originY,\n      u_worldWidth: config.worldWidth,\n      u_worldHeight: config.worldHeight,\n    };\n  }\n\n  private disposeShader() {\n    this.shaderMount?.dispose();\n    this.shaderMount = undefined;\n  }\n\n  render() {\n    const config = this.resolvedConfig();\n    return (\n      <Host aria-hidden=\"true\" style={{ '--ds-paper-texture-opacity': String(config.opacity) }}>\n        <div class=\"paper-texture__mount\" />\n      </Host>\n    );\n  }\n}\n",
+      "content": "import { Component, Element, Host, Prop, Watch, h } from '@stencil/core';\nimport {\n  emptyPixel,\n  getShaderColorFromString,\n  getShaderNoiseTexture,\n  paperTextureFragmentShader,\n  ShaderFitOptions,\n  ShaderMount,\n  type ShaderMountUniforms,\n} from '@paper-design/shaders';\nimport { DEFAULT_PAPER_TEXTURE_CONFIG, type PaperTextureConfig } from './paper-texture-types';\n\nlet emptyPixelPromise: Promise<HTMLImageElement> | undefined;\nlet noiseTexturePromise: Promise<HTMLImageElement> | undefined;\n\nfunction waitForImage(image: HTMLImageElement): Promise<HTMLImageElement> {\n  if (image.complete) {\n    return image.naturalWidth > 0\n      ? Promise.resolve(image)\n      : Promise.reject(new Error(`Paper texture image failed to load: ${image.src}`));\n  }\n\n  return new Promise((resolve, reject) => {\n    const onLoad = () => {\n      cleanup();\n      resolve(image);\n    };\n    const onError = () => {\n      cleanup();\n      reject(new Error(`Paper texture image failed to load: ${image.src}`));\n    };\n    const cleanup = () => {\n      image.removeEventListener('load', onLoad);\n      image.removeEventListener('error', onError);\n    };\n\n    image.addEventListener('load', onLoad, { once: true });\n    image.addEventListener('error', onError, { once: true });\n  });\n}\n\nfunction loadImage(source: HTMLImageElement | string | undefined): Promise<HTMLImageElement> {\n  if (source instanceof HTMLImageElement) return waitForImage(source);\n\n  const image = new Image();\n  if (source && source !== emptyPixel) image.crossOrigin = 'anonymous';\n  image.src = source || emptyPixel;\n  return waitForImage(image);\n}\n\nfunction loadEmptyPixel(): Promise<HTMLImageElement> {\n  emptyPixelPromise ??= loadImage(emptyPixel);\n  return emptyPixelPromise;\n}\n\nfunction loadNoiseTexture(): Promise<HTMLImageElement> {\n  noiseTexturePromise ??= Promise.resolve(getShaderNoiseTexture()).then(image => {\n    if (!image) throw new Error('Paper texture noise texture is unavailable');\n    return waitForImage(image);\n  });\n  return noiseTexturePromise;\n}\n\n@Component({\n  tag: 'ds-paper-texture',\n  styleUrl: 'PaperTexture.css',\n  scoped: true,\n})\nexport class PaperTexture {\n  @Element() el!: HTMLElement;\n\n  /** Paper Design shader parameters. Set as a JavaScript property. */\n  @Prop() config: PaperTextureConfig = {};\n\n  private shaderMount?: ShaderMount;\n  private syncGeneration = 0;\n  private hasLoaded = false;\n\n  componentDidLoad() {\n    this.hasLoaded = true;\n    void this.syncShader();\n  }\n\n  connectedCallback() {\n    if (this.hasLoaded) void this.syncShader();\n  }\n\n  disconnectedCallback() {\n    this.syncGeneration += 1;\n    this.disposeShader();\n  }\n\n  @Watch('config')\n  onConfigChange() {\n    if (this.hasLoaded) void this.syncShader();\n  }\n\n  private resolvedConfig(): Required<Omit<PaperTextureConfig, 'image'>> &\n    Pick<PaperTextureConfig, 'image'> {\n    return {\n      ...DEFAULT_PAPER_TEXTURE_CONFIG,\n      ...(this.config ?? {}),\n    };\n  }\n\n  private async syncShader() {\n    const generation = ++this.syncGeneration;\n    const config = this.resolvedConfig();\n\n    try {\n      const [image, noiseTexture] = await Promise.all([\n        loadImage(config.image).catch(() => loadEmptyPixel()),\n        loadNoiseTexture(),\n      ]);\n\n      if (generation !== this.syncGeneration || !this.el.isConnected) return;\n\n      const uniforms = this.buildUniforms(config, image, noiseTexture);\n      const mountElement = this.el.querySelector<HTMLElement>('.paper-texture__mount');\n      if (!mountElement) return;\n\n      if (!this.shaderMount) {\n        this.shaderMount = new ShaderMount(\n          mountElement,\n          paperTextureFragmentShader,\n          uniforms,\n          undefined,\n          config.speed,\n          config.frame,\n          config.minPixelRatio,\n          config.maxPixelCount,\n          ['u_image']\n        );\n      } else {\n        this.shaderMount.setUniforms(uniforms);\n        this.shaderMount.setSpeed(config.speed);\n        this.shaderMount.setFrame(config.frame);\n        this.shaderMount.setMinPixelRatio(config.minPixelRatio);\n        this.shaderMount.setMaxPixelCount(config.maxPixelCount);\n      }\n\n      this.el.removeAttribute('data-paper-texture-error');\n    } catch (error) {\n      if (generation !== this.syncGeneration) return;\n      this.disposeShader();\n      this.el.querySelector<HTMLElement>('.paper-texture__mount')?.replaceChildren();\n      this.el.setAttribute('data-paper-texture-error', 'unavailable');\n      console.warn('[ds-paper-texture] WebGL2 paper texture unavailable.', error);\n    }\n  }\n\n  private buildUniforms(\n    config: Required<Omit<PaperTextureConfig, 'image'>> & Pick<PaperTextureConfig, 'image'>,\n    image: HTMLImageElement,\n    noiseTexture: HTMLImageElement\n  ): ShaderMountUniforms {\n    return {\n      u_image: image,\n      u_noiseTexture: noiseTexture,\n      u_colorFront: getShaderColorFromString(config.colorFront),\n      u_colorBack: getShaderColorFromString(config.colorBack),\n      u_contrast: config.contrast,\n      u_roughness: config.roughness,\n      u_fiber: config.fiber,\n      u_fiberSize: config.fiberSize,\n      u_crumples: config.crumples,\n      u_crumpleSize: config.crumpleSize,\n      u_foldCount: config.foldCount,\n      u_folds: config.folds,\n      u_fade: config.fade,\n      u_drops: config.drops,\n      u_seed: config.seed,\n      u_fit: ShaderFitOptions[config.fit],\n      u_scale: config.scale,\n      u_rotation: config.rotation,\n      u_offsetX: config.offsetX,\n      u_offsetY: config.offsetY,\n      u_originX: config.originX,\n      u_originY: config.originY,\n      u_worldWidth: config.worldWidth,\n      u_worldHeight: config.worldHeight,\n    };\n  }\n\n  private disposeShader() {\n    this.shaderMount?.dispose();\n    this.shaderMount = undefined;\n  }\n\n  render() {\n    const config = this.resolvedConfig();\n    return (\n      <Host aria-hidden=\"true\" style={{ '--ds-paper-texture-opacity': String(config.opacity) }}>\n        <div class=\"paper-texture__mount\" />\n      </Host>\n    );\n  }\n}\n",
       "type": "registry:ui"
     },
     {

package/dist/mcp-data/registry/registry.json

@@ -4197,7 +4197,7 @@
     {
       "name": "input",
       "title": "Input",
-      "description": "Form-associated single-line text field for primary and secondary application backgrounds, with native text input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
+      "description": "Form-associated single-line text and number field for primary and secondary application backgrounds, with native input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
       "type": "registry:ui",
       "meta": {
         "library": "@ds-mo/ui",
@@ -4208,9 +4208,9 @@
         "intent": {
           "audience": "general",
           "status": "stable",
-          "summary": "Form-associated single-line text field for primary and secondary application backgrounds, with native text input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
+          "summary": "Form-associated single-line text and number field for primary and secondary application backgrounds, with native input behavior, four control densities, optional leading and trailing content, search clearing, and validation.",
           "useWhen": [
-            "A user must enter or edit one line of text, an email address, telephone number, URL, search query, or password.",
+            "A user must enter or edit one line of text, an email address, telephone number, URL, search query, password, or exact number.",
             "The value must participate in native, Angular, or React form state.",
             "A compact filter or toolbar needs a single-line search field that follows the shared control-density recipe."
           ],
@@ -4256,6 +4256,7 @@
             "Search fields show a standard borderless CrossCircle icon action only while they contain a value. Clearing emits the empty value and restores focus to the native field.",
             "The suffix slot is for compact units or decorations. The optional leading icon is decorative and does not replace the field label.",
             "Use autoComplete, inputMode, and enterKeyHint to provide browser and virtual-keyboard hints without changing the value's semantic type.",
+            "Number fields preserve native spinbutton semantics, stepping, and min/max constraint behavior while dsChange continues to report the native string value.",
             "The host exposes focused, filled, dirty, touched, invalid, disabled, read-only, and required data attributes for Field integration and diagnostics.",
             "Use Input only on primary or secondary application backgrounds. It intentionally does not expose alternate surface contexts."
           ],
@@ -4352,6 +4353,14 @@
             "type": "boolean",
             "required": false
           },
+          "max": {
+            "type": "number | undefined",
+            "required": false
+          },
+          "min": {
+            "type": "number | undefined",
+            "required": false
+          },
           "name": {
             "type": "string | undefined",
             "required": false
@@ -4376,6 +4385,10 @@
             "type": "InputSize",
             "required": false
           },
+          "step": {
+            "type": "number | undefined",
+            "required": false
+          },
           "type": {
             "type": "InputType",
             "required": false

package/dist/types/components/Input/Input.d.ts

@@ -1,6 +1,6 @@
 import { EventEmitter } from '../../stencil-public-runtime';
 import { type ControlWidth } from '../../utils';
-export type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';
+export type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password' | 'number';
 export type InputSize = 'lg' | 'md' | 'sm' | 'xs';
 export type InputWidth = ControlWidth;
 export declare class Input {
@@ -19,6 +19,12 @@ export declare class Input {
     clearLabel: string;
     placeholder: string | undefined;
     type: InputType;
+    /** Minimum accepted value when type is number. */
+    min: number | undefined;
+    /** Maximum accepted value when type is number. */
+    max: number | undefined;
+    /** Numeric increment used by native stepping and constraint validation. */
+    step: number | undefined;
     /** Native browser autofill hint. */
     autoComplete: string | undefined;
     /** Preferred virtual keyboard without changing the value semantics. */

package/dist/types/components/PaperTexture/PaperTexture.d.ts

@@ -7,6 +7,7 @@ export declare class PaperTexture {
     private syncGeneration;
     private hasLoaded;
     componentDidLoad(): void;
+    connectedCallback(): void;
     disconnectedCallback(): void;
     onConfigChange(): void;
     private resolvedConfig;