@ds-mo/ui 9.1.0 → 9.2.1

package/dist/components/ds-input.js

@@ -1,2 +1,2 @@
-import{p as t,H as i,c as e,h as s,a as n,t as r}from"./index.js";import{d as o}from"./p-BbV68F23.js";import{d as a}from"./p-DyZj3k9S.js";import{d}from"./p-CXF8yd-g.js";import{d as c}from"./p-Cpr3K41-.js";import{d as l}from"./p-CbS_WWs2.js";import{C as p}from"./p-Cx-ywr1e.js";import{c as u}from"./p-DuFm-ieS.js";const h=()=>`.ds-interaction-fill.sc-ds-input-h,.ds-interaction-fill.sc-ds-input{position:relative;z-index:0;--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-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;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 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)}.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.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}.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);--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);--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);--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)}.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:0.25;pointer-events:none;cursor:not-allowed}.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-radius:var(--dimension-radius-025)}.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-radius:var(--dimension-radius-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-radius:var(--dimension-radius-025)}.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-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)}.input-host.sc-ds-input-h{display:inline-flex;flex-direction:column;gap:var(--dimension-space-050);--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{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));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.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%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));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;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-input-adornment-fg)}.input-control__suffix--empty.sc-ds-input{display:none}.input-control__clear.sc-ds-input{position:relative;z-index:2;flex-shrink:0;align-self:center}.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%}`;const g={md:"md",sm:"sm",xs:"xs"};const f={md:"sm",sm:"xs",xs:"xs"};let v=0;const m=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-${++v}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage="This field is required.";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;this.internals.setFormValue(t?null:this.value);const i=this.required&&!t&&this.value.length===0;this.internals.setValidity(i?{valueMissing:true}:{},i?this.requiredMessage:"")}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=typeof t==="string"?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 r=this.value!==this.initialValue;const o=this.type==="search"&&e&&!i&&!this.readOnly;const a=this.error&&Boolean(this.errorMessage);const d=p[this.size];const c=g[this.size];const l=[this.ariaDescribedby,a?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return s(n,{key:"509f6b9c2cce64d1c74740d5bf215277127132ac",class:{"input-host":true,"ds-control-inactive":i,[`ds-control--${this.size}`]:true,...u(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":r?"":undefined,"data-touched":this.touched?"":undefined},s("div",{key:"0119e42564065301963975a0ebd58e5207fc37f5",class:{"input-control":true,"input-control--bordered":this.hasBorder||this.error,"input-control--error":this.error,"ds-interaction-fill":true,[`ds-control--${this.size}`]:true}},this.icon&&s("span",{key:"b1179e2b5aa9183d0983914560ea49e74d86971f",class:"input-control__prefix ds-interaction-fill__content","aria-hidden":"true"},s("ds-icon",{key:"324eb68c86e26ab18a44a0d186105b0d7a13966e",name:this.icon,size:c,color:"inherit"})),s("input",{key:"4178b1372048809871f600c331a68180a6e73344",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-text--${d.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:"5f62f67d8d6cbd3c58faa54a151db89b5aa67961",class:{"input-control__suffix":true,"input-control__suffix--empty":!this.hasSuffix}},s("slot",{key:"3f861e00be1a0944b848acaeae8b8942c8ee7229",name:"suffix"})),o&&s("ds-button-unfilled",{key:"66b94fbb9f8774da619456e21878edeaaadc7586",class:"input-control__clear",variant:"icon",size:f[this.size],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:this.clearLabel,onDsClick:this.handleClear})),a&&s("ds-text",{key:"9beef4b3fbc5f99e3ea2bc8a11ed9df6e17db93a",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 h()}},[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 y(){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(r(t))){customElements.define(r(t),m)}break;case"ds-badge":if(!customElements.get(r(t))){o()}break;case"ds-button-unfilled":if(!customElements.get(r(t))){a()}break;case"ds-icon":if(!customElements.get(r(t))){d()}break;case"ds-loader":if(!customElements.get(r(t))){c()}break;case"ds-text":if(!customElements.get(r(t))){l()}break}}))}y();const b=m;const x=y;export{b as DsInput,x as defineCustomElement};
+import{p as t,H as i,c as e,h as s,a as n,t as r}from"./index.js";import{d as o}from"./p-CiwdnKKp.js";import{d as a}from"./p-Dst-OliP.js";import{d}from"./p-CBYuvZKM.js";import{d as c}from"./p-Cpr3K41-.js";import{d as l}from"./p-BSOZXagj.js";import{C as p}from"./p-Cx-ywr1e.js";import{c as u}from"./p-DuFm-ieS.js";const h=()=>`.ds-interaction-fill.sc-ds-input-h,.ds-interaction-fill.sc-ds-input{position:relative;z-index:0;--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-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;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 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)}.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.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}.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);--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);--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);--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)}.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:0.25;pointer-events:none;cursor:not-allowed}.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-radius:var(--dimension-radius-025)}.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-radius:var(--dimension-radius-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-radius:var(--dimension-radius-025)}.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-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)}.input-host.sc-ds-input-h{display:inline-flex;flex-direction:column;gap:var(--dimension-space-050);--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{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));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.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%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));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;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-input-adornment-fg)}.input-control__suffix--empty.sc-ds-input{display:none}.input-control__clear.sc-ds-input{position:relative;z-index:2;flex-shrink:0;align-self:center}.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%}`;const g={md:"md",sm:"sm",xs:"xs"};const f={md:"sm",sm:"xs",xs:"xs"};let v=0;const m=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-${++v}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage="This field is required.";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;this.internals.setFormValue(t?null:this.value);const i=this.required&&!t&&this.value.length===0;this.internals.setValidity(i?{valueMissing:true}:{},i?this.requiredMessage:"")}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=typeof t==="string"?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 r=this.value!==this.initialValue;const o=this.type==="search"&&e&&!i&&!this.readOnly;const a=this.error&&Boolean(this.errorMessage);const d=p[this.size];const c=g[this.size];const l=[this.ariaDescribedby,a?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return s(n,{key:"509f6b9c2cce64d1c74740d5bf215277127132ac",class:{"input-host":true,"ds-control-inactive":i,[`ds-control--${this.size}`]:true,...u(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":r?"":undefined,"data-touched":this.touched?"":undefined},s("div",{key:"0119e42564065301963975a0ebd58e5207fc37f5",class:{"input-control":true,"input-control--bordered":this.hasBorder||this.error,"input-control--error":this.error,"ds-interaction-fill":true,[`ds-control--${this.size}`]:true}},this.icon&&s("span",{key:"b1179e2b5aa9183d0983914560ea49e74d86971f",class:"input-control__prefix ds-interaction-fill__content","aria-hidden":"true"},s("ds-icon",{key:"324eb68c86e26ab18a44a0d186105b0d7a13966e",name:this.icon,size:c,color:"inherit"})),s("input",{key:"4178b1372048809871f600c331a68180a6e73344",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-text--${d.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:"5f62f67d8d6cbd3c58faa54a151db89b5aa67961",class:{"input-control__suffix":true,"input-control__suffix--empty":!this.hasSuffix}},s("slot",{key:"3f861e00be1a0944b848acaeae8b8942c8ee7229",name:"suffix"})),o&&s("ds-button-unfilled",{key:"66b94fbb9f8774da619456e21878edeaaadc7586",class:"input-control__clear",variant:"icon",size:f[this.size],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:this.clearLabel,onDsClick:this.handleClear})),a&&s("ds-text",{key:"9beef4b3fbc5f99e3ea2bc8a11ed9df6e17db93a",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 h()}},[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 y(){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(r(t))){customElements.define(r(t),m)}break;case"ds-badge":if(!customElements.get(r(t))){o()}break;case"ds-button-unfilled":if(!customElements.get(r(t))){a()}break;case"ds-icon":if(!customElements.get(r(t))){d()}break;case"ds-loader":if(!customElements.get(r(t))){c()}break;case"ds-text":if(!customElements.get(r(t))){l()}break}}))}y();const b=m;const x=y;export{b as DsInput,x as defineCustomElement};
 //# sourceMappingURL=ds-input.js.map

package/dist/components/ds-markdown.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsMarkdown extends Components.DsMarkdown, HTMLElement {}
+export const DsMarkdown: {
+    prototype: DsMarkdown;
+    new (): DsMarkdown;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-markdown.js

@@ -0,0 +1,2 @@
+import{M as o,d as s}from"./p-T0Mzhv3-.js";const t=o;const p=s;export{t as DsMarkdown,p as defineCustomElement};
+//# sourceMappingURL=ds-markdown.js.map

package/dist/components/ds-markdown.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components/ds-menu.js

@@ -1,2 +1,2 @@
-import{M as o,d as s}from"./p-tQ1QHeOE.js";const t=o;const p=s;export{t as DsMenu,p as defineCustomElement};
+import{M as o,d as s}from"./p-Dj5MejHv.js";const t=o;const j=s;export{t as DsMenu,j as defineCustomElement};
 //# sourceMappingURL=ds-menu.js.map

package/dist/components/ds-message-bubble.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsMessageBubble extends Components.DsMessageBubble, HTMLElement {}
+export const DsMessageBubble: {
+    prototype: DsMessageBubble;
+    new (): DsMessageBubble;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-message-bubble.js

@@ -0,0 +1,2 @@
+import{M as o,d as s}from"./p-CWNdl52Y.js";const t=o;const p=s;export{t as DsMessageBubble,p as defineCustomElement};
+//# sourceMappingURL=ds-message-bubble.js.map

package/dist/components/ds-message-bubble.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components/ds-message-composer.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsMessageComposer extends Components.DsMessageComposer, HTMLElement {}
+export const DsMessageComposer: {
+    prototype: DsMessageComposer;
+    new (): DsMessageComposer;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-message-composer.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,c as a,h as t,a as o,t as i}from"./index.js";import{d as r}from"./p-CblAABEo.js";import{d as c}from"./p-CBYuvZKM.js";import{d as n}from"./p-Cpr3K41-.js";import{d}from"./p-BSOZXagj.js";const m=()=>`.sc-ds-message-composer-h{display:block;width:100%;box-sizing:border-box;-webkit-user-select:none;user-select:none}.message-composer.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);width:100%;margin:0}.message-composer__attachments.sc-ds-message-composer:empty,.message-composer__tools.sc-ds-message-composer:empty{display:none}.message-composer__field.sc-ds-message-composer{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-100);border-radius:var(--dimension-radius-050);background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-md);overflow:hidden}.message-composer--error.sc-ds-message-composer .message-composer__field.sc-ds-message-composer{box-shadow:var(--effect-elevation-elevated-md),     inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative)}textarea.sc-ds-message-composer{width:100%;min-height:calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));max-height:calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));padding:var(--dimension-space-075);border:none;outline:none;resize:none;overflow-y:auto;box-sizing:border-box;background:transparent;color:var(--color-foreground-primary);font-family:var(--typography-font-family);font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md);font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half);-webkit-user-select:text;user-select:text}textarea.sc-ds-message-composer::placeholder{color:var(--color-foreground-secondary)}textarea.sc-ds-message-composer:focus::placeholder{color:var(--color-foreground-quaternary)}.message-composer__tools.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-050);min-height:var(--dimension-size-400)}.message-composer__controls.sc-ds-message-composer{display:flex;align-items:center;justify-content:space-between;gap:var(--dimension-space-050);width:100%;min-width:0}.message-composer__actions.sc-ds-message-composer{display:flex;align-items:center;gap:var(--dimension-space-050);flex:0 0 auto;margin-inline-start:auto}`;const l=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsInput=a(this,"dsInput");this.dsSubmit=a(this,"dsSubmit");this.dsStop=a(this,"dsStop");this.value="";this.placeholder="Write a message";this.label="Message";this.status="ready";this.isInactive=false;this.submitIntent="brand";this.handleInput=e=>{this.value=e.target.value;this.resize();this.dsInput.emit(this.value)};this.handleKeyDown=e=>{if(e.key!=="Enter"||e.shiftKey||e.isComposing)return;e.preventDefault();this.submit()};this.handleAction=()=>{if(this.streaming)this.dsStop.emit();else this.submit()}}componentDidLoad(){this.resize()}onValueChange(){requestAnimationFrame((()=>this.resize()))}async setFocus(){this.textarea?.focus()}get streaming(){return this.status==="submitted"||this.status==="streaming"}resize(){if(!this.textarea)return;this.textarea.style.height="auto";this.textarea.style.height=`${this.textarea.scrollHeight}px`}submit(){const e=this.value.trim();if(!e||this.isInactive||this.streaming)return;this.dsSubmit.emit({text:e})}render(){const e=this.status==="error";return t(o,{key:"4de4c2811dd575e876e810c4273938176cbfbb35"},t("form",{key:"e98cc2a36213109cdc9763b2c0ea7caff2a7b3d7",class:{"message-composer":true,"message-composer--error":e},"aria-busy":this.streaming?"true":undefined,onSubmit:e=>{e.preventDefault();this.submit()}},t("div",{key:"bb9df21d0ab4354f0c5bc966bf4d8012cb94fbf6",class:"message-composer__attachments"},t("slot",{key:"e93dee8d6ac9bf21bdd05bcccd4548d4d61d3f27",name:"attachments"})),t("div",{key:"89c25f0b93add0391efd92ff81a034a18e9bd61c",class:"message-composer__field"},t("textarea",{key:"388b4f1513457fdb86502ce7aabf67e7f7e1554a",ref:e=>{this.textarea=e},value:this.value,placeholder:this.placeholder,"aria-label":this.label,"aria-invalid":e?"true":undefined,disabled:this.isInactive,rows:2,onInput:this.handleInput,onKeyDown:this.handleKeyDown}),t("div",{key:"23459fceb87c18cdafce79b2e3eb1cf2ad7da16e",class:"message-composer__controls"},t("div",{key:"4293d2d2600bafa33f2754d601d57528c9ac2aff",class:"message-composer__tools"},t("slot",{key:"de14732cf617c99ed6c82a29090b661d459a51e6",name:"tools"})),t("div",{key:"c48b190734f5da6bfcd1b18604e92a4787812e1a",class:"message-composer__actions"},t("slot",{key:"f2605057670e10e98ead7ca660da0bf26084bf7c",name:"actions"}),t("ds-button-filled",{key:"e6e02fa7c7d1c32906907a096534ebe0e2af7c52",class:"message-composer__action",variant:"icon",icon:this.streaming?"Pause":"PaperplaneSend",intent:this.streaming?"neutral":this.submitIntent,size:"md",rounded:true,"aria-label":this.streaming?"Stop response":"Send message",isInactive:this.isInactive||!this.streaming&&!this.value.trim(),onDsClick:this.handleAction}))))))}get el(){return this}static get watchers(){return{value:[{onValueChange:0}]}}static get style(){return m()}},[262,"ds-message-composer",{value:[1025],placeholder:[1],label:[1],status:[1],isInactive:[4,"is-inactive"],submitIntent:[1,"submit-intent"],setFocus:[64]},undefined,{value:[{onValueChange:0}]}]);function p(){if(typeof customElements==="undefined"){return}const e=["ds-message-composer","ds-button-filled","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-message-composer":if(!customElements.get(i(e))){customElements.define(i(e),l)}break;case"ds-button-filled":if(!customElements.get(i(e))){r()}break;case"ds-icon":if(!customElements.get(i(e))){c()}break;case"ds-loader":if(!customElements.get(i(e))){n()}break;case"ds-text":if(!customElements.get(i(e))){d()}break}}))}p();const h=l;const f=p;export{h as DsMessageComposer,f as defineCustomElement};
+//# sourceMappingURL=ds-message-composer.js.map

package/dist/components/ds-message-composer.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["messageComposerCss","MessageComposer","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","value","placeholder","label","status","isInactive","submitIntent","handleInput","event","target","resize","dsInput","emit","handleKeyDown","key","shiftKey","isComposing","preventDefault","submit","handleAction","streaming","dsStop","componentDidLoad","onValueChange","requestAnimationFrame","setFocus","textarea","focus","style","height","scrollHeight","text","trim","dsSubmit","render","error","h","Host","class","undefined","onSubmit","name","ref","element","disabled","rows","onInput","onKeyDown","variant","icon","intent","size","rounded","onDsClick"],"sources":["src/wc/components/MessageComposer/MessageComposer.css?tag=ds-message-composer&encapsulation=scoped","src/wc/components/MessageComposer/MessageComposer.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.message-composer {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  margin: 0;\n}\n\n.message-composer__attachments:empty,\n.message-composer__tools:empty {\n  display: none;\n}\n\n.message-composer__field {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  padding: var(--dimension-space-100);\n  border-radius: var(--dimension-radius-050);\n  background: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-md);\n  overflow: hidden;\n}\n\n.message-composer--error .message-composer__field {\n  box-shadow: var(--effect-elevation-elevated-md),\n    inset 0 0 0 var(--dimension-stroke-width-025) var(--color-border-bold-negative);\n}\n\ntextarea {\n  width: 100%;\n  min-height: calc(var(--typography-lineheight-md) * 2 + var(--dimension-space-150));\n  max-height: calc(var(--typography-lineheight-md) * 6 + var(--dimension-space-150));\n  padding: var(--dimension-space-075);\n  border: none;\n  outline: none;\n  resize: none;\n  overflow-y: auto;\n  box-sizing: border-box;\n  background: transparent;\n  color: var(--color-foreground-primary);\n  font-family: var(--typography-font-family);\n  font-size: var(--typography-fontsize-md);\n  line-height: var(--typography-lineheight-md);\n  font-weight: var(--typography-weight-regular);\n  letter-spacing: var(--typography-letterspacing-negative-half);\n  -webkit-user-select: text;\n  user-select: text;\n}\n\ntextarea::placeholder {\n  color: var(--color-foreground-secondary);\n}\n\ntextarea:focus::placeholder {\n  color: var(--color-foreground-quaternary);\n}\n\n.message-composer__tools {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  min-height: var(--dimension-size-400);\n}\n\n.message-composer__controls {\n  display: flex;\n  align-items: center;\n  justify-content: space-between;\n  gap: var(--dimension-space-050);\n  width: 100%;\n  min-width: 0;\n}\n\n.message-composer__actions {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  flex: 0 0 auto;\n  margin-inline-start: auto;\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  Watch,\n} from '@stencil/core';\nimport type { ButtonFilledIntent } from '../ButtonFilled/ButtonFilled';\nimport type { MessageComposerStatus } from '../conversation-types';\n\n@Component({\n  tag: 'ds-message-composer',\n  styleUrl: 'MessageComposer.css',\n  scoped: true,\n})\nexport class MessageComposer {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop() placeholder: string = 'Write a message';\n  @Prop() label: string = 'Message';\n  @Prop() status: MessageComposerStatus = 'ready';\n  @Prop() isInactive: boolean = false;\n  @Prop() submitIntent: ButtonFilledIntent = 'brand';\n\n  @Event() dsInput!: EventEmitter<string>;\n  @Event() dsSubmit!: EventEmitter<{ text: string }>;\n  @Event() dsStop!: EventEmitter<void>;\n\n  private textarea?: HTMLTextAreaElement;\n\n  componentDidLoad() {\n    this.resize();\n  }\n\n  @Watch('value')\n  onValueChange() {\n    requestAnimationFrame(() => this.resize());\n  }\n\n  @Method()\n  async setFocus() {\n    this.textarea?.focus();\n  }\n\n  private get streaming(): boolean {\n    return this.status === 'submitted' || this.status === 'streaming';\n  }\n\n  private resize() {\n    if (!this.textarea) return;\n    this.textarea.style.height = 'auto';\n    this.textarea.style.height = `${this.textarea.scrollHeight}px`;\n  }\n\n  private handleInput = (event: Event) => {\n    this.value = (event.target as HTMLTextAreaElement).value;\n    this.resize();\n    this.dsInput.emit(this.value);\n  };\n\n  private submit() {\n    const text = this.value.trim();\n    if (!text || this.isInactive || this.streaming) return;\n    this.dsSubmit.emit({ text });\n  }\n\n  private handleKeyDown = (event: KeyboardEvent) => {\n    if (event.key !== 'Enter' || event.shiftKey || event.isComposing) return;\n    event.preventDefault();\n    this.submit();\n  };\n\n  private handleAction = () => {\n    if (this.streaming) this.dsStop.emit();\n    else this.submit();\n  };\n\n  render() {\n    const error = this.status === 'error';\n    return (\n      <Host>\n        <form\n          class={{ 'message-composer': true, 'message-composer--error': error }}\n          aria-busy={this.streaming ? 'true' : undefined}\n          onSubmit={(event: Event) => {\n            event.preventDefault();\n            this.submit();\n          }}\n        >\n          <div class=\"message-composer__attachments\">\n            <slot name=\"attachments\" />\n          </div>\n          <div class=\"message-composer__field\">\n            <textarea\n              ref={element => {\n                this.textarea = element;\n              }}\n              value={this.value}\n              placeholder={this.placeholder}\n              aria-label={this.label}\n              aria-invalid={error ? 'true' : undefined}\n              disabled={this.isInactive}\n              rows={2}\n              onInput={this.handleInput}\n              onKeyDown={this.handleKeyDown}\n            />\n            <div class=\"message-composer__controls\">\n              <div class=\"message-composer__tools\">\n                <slot name=\"tools\" />\n              </div>\n              <div class=\"message-composer__actions\">\n                <slot name=\"actions\" />\n                <ds-button-filled\n                  class=\"message-composer__action\"\n                  variant=\"icon\"\n                  icon={this.streaming ? 'Pause' : 'PaperplaneSend'}\n                  intent={this.streaming ? 'neutral' : this.submitIntent}\n                  size=\"md\"\n                  rounded\n                  aria-label={this.streaming ? 'Stop response' : 'Send message'}\n                  isInactive={this.isInactive || (!this.streaming && !this.value.trim())}\n                  onDsClick={this.handleAction}\n                />\n              </div>\n            </div>\n          </div>\n        </form>\n      </Host>\n    );\n  }\n}\n"],"mappings":"6MAAA,MAAMA,EAAqB,IAAM,ipE,MCmBpBC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,yIAQ2BC,KAAAC,MAAgB,GACjCD,KAAAE,YAAsB,kBACtBF,KAAAG,MAAgB,UAChBH,KAAAI,OAAgC,QAChCJ,KAAAK,WAAsB,MACtBL,KAAAM,aAAmC,QAgCnCN,KAAAO,YAAeC,IACrBR,KAAKC,MAASO,EAAMC,OAA+BR,MACnDD,KAAKU,SACLV,KAAKW,QAAQC,KAAKZ,KAAKC,MAAM,EASvBD,KAAAa,cAAiBL,IACvB,GAAIA,EAAMM,MAAQ,SAAWN,EAAMO,UAAYP,EAAMQ,YAAa,OAClER,EAAMS,iBACNjB,KAAKkB,QAAQ,EAGPlB,KAAAmB,aAAe,KACrB,GAAInB,KAAKoB,UAAWpB,KAAKqB,OAAOT,YAC3BZ,KAAKkB,QAAQ,CAwDrB,CApGC,gBAAAI,GACEtB,KAAKU,Q,CAIP,aAAAa,GACEC,uBAAsB,IAAMxB,KAAKU,U,CAInC,cAAMe,GACJzB,KAAK0B,UAAUC,O,CAGjB,aAAYP,GACV,OAAOpB,KAAKI,SAAW,aAAeJ,KAAKI,SAAW,W,CAGhD,MAAAM,GACN,IAAKV,KAAK0B,SAAU,OACpB1B,KAAK0B,SAASE,MAAMC,OAAS,OAC7B7B,KAAK0B,SAASE,MAAMC,OAAS,GAAG7B,KAAK0B,SAASI,gB,CASxC,MAAAZ,GACN,MAAMa,EAAO/B,KAAKC,MAAM+B,OACxB,IAAKD,GAAQ/B,KAAKK,YAAcL,KAAKoB,UAAW,OAChDpB,KAAKiC,SAASrB,KAAK,CAAEmB,Q,CAcvB,MAAAG,GACE,MAAMC,EAAQnC,KAAKI,SAAW,QAC9B,OACEgC,EAACC,EAAI,CAAAvB,IAAA,4CACHsB,EAAA,QAAAtB,IAAA,2CACEwB,MAAO,CAAE,mBAAoB,KAAM,0BAA2BH,GAAO,YAC1DnC,KAAKoB,UAAY,OAASmB,UACrCC,SAAWhC,IACTA,EAAMS,iBACNjB,KAAKkB,QAAQ,GAGfkB,EAAA,OAAAtB,IAAA,2CAAKwB,MAAM,iCACTF,EAAA,QAAAtB,IAAA,2CAAM2B,KAAK,iBAEbL,EAAA,OAAAtB,IAAA,2CAAKwB,MAAM,2BACTF,EAAA,YAAAtB,IAAA,2CACE4B,IAAKC,IACH3C,KAAK0B,SAAWiB,CAAO,EAEzB1C,MAAOD,KAAKC,MACZC,YAAaF,KAAKE,YAAW,aACjBF,KAAKG,MAAK,eACRgC,EAAQ,OAASI,UAC/BK,SAAU5C,KAAKK,WACfwC,KAAM,EACNC,QAAS9C,KAAKO,YACdwC,UAAW/C,KAAKa,gBAElBuB,EAAA,OAAAtB,IAAA,2CAAKwB,MAAM,8BACTF,EAAA,OAAAtB,IAAA,2CAAKwB,MAAM,2BACTF,EAAA,QAAAtB,IAAA,2CAAM2B,KAAK,WAEbL,EAAA,OAAAtB,IAAA,2CAAKwB,MAAM,6BACTF,EAAA,QAAAtB,IAAA,2CAAM2B,KAAK,YACXL,EAAA,oBAAAtB,IAAA,2CACEwB,MAAM,2BACNU,QAAQ,OACRC,KAAMjD,KAAKoB,UAAY,QAAU,iBACjC8B,OAAQlD,KAAKoB,UAAY,UAAYpB,KAAKM,aAC1C6C,KAAK,KACLC,QAAO,kBACKpD,KAAKoB,UAAY,gBAAkB,eAC/Cf,WAAYL,KAAKK,aAAgBL,KAAKoB,YAAcpB,KAAKC,MAAM+B,OAC/DqB,UAAWrD,KAAKmB,mB","ignoreList":[]}

package/dist/components/ds-message-scroller.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsMessageScroller extends Components.DsMessageScroller, HTMLElement {}
+export const DsMessageScroller: {
+    prototype: DsMessageScroller;
+    new (): DsMessageScroller;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-message-scroller.js

@@ -0,0 +1,2 @@
+import{p as e,H as s,c as t,h as a,a as r,t as l}from"./index.js";import{d as o}from"./p-CiwdnKKp.js";import{d as i}from"./p-Dst-OliP.js";import{d}from"./p-CBYuvZKM.js";import{d as c}from"./p-Cpr3K41-.js";import{d as n}from"./p-BSOZXagj.js";const g=()=>`@property --ds-scroll-edge-fade-top{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-bottom{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-left{syntax:'<length-percentage>';inherits:false;initial-value:0px}@property --ds-scroll-edge-fade-right{syntax:'<length-percentage>';inherits:false;initial-value:0px}@keyframes ds-scroll-edge-fade-reveal-top{from{--ds-scroll-edge-fade-top:0px}to{--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top)}}@keyframes ds-scroll-edge-fade-reveal-bottom{from{--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom)}to{--ds-scroll-edge-fade-bottom:0px}}@keyframes ds-scroll-edge-fade-reveal-left{from{--ds-scroll-edge-fade-left:0px}to{--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left)}}@keyframes ds-scroll-edge-fade-reveal-right{from{--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right)}to{--ds-scroll-edge-fade-right:0px}}.scroll-edge-fade.sc-ds-message-scroller{--ds-scroll-edge-fade-size:var(--dimension-size-600);--ds-scroll-edge-fade-reveal-distance:var(--dimension-size-800);--ds-scroll-edge-fade-target-top:0px;--ds-scroll-edge-fade-target-bottom:0px;--ds-scroll-edge-fade-target-left:0px;--ds-scroll-edge-fade-target-right:0px;--ds-scroll-edge-fade-top:var(--ds-scroll-edge-fade-target-top);--ds-scroll-edge-fade-bottom:var(--ds-scroll-edge-fade-target-bottom);--ds-scroll-edge-fade-left:var(--ds-scroll-edge-fade-target-left);--ds-scroll-edge-fade-right:var(--ds-scroll-edge-fade-target-right);--ds-scroll-edge-fade-block-mask:linear-gradient(     to bottom,     transparent 0,     #000 var(--ds-scroll-edge-fade-top),     #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),     transparent 100%   );--ds-scroll-edge-fade-inline-mask:linear-gradient(     to right,     transparent 0,     #000 var(--ds-scroll-edge-fade-left),     #000 calc(100% - var(--ds-scroll-edge-fade-right)),     transparent 100%   );-webkit-mask-image:var(--ds-scroll-edge-fade-block-mask),     var(--ds-scroll-edge-fade-inline-mask);mask-image:var(--ds-scroll-edge-fade-block-mask),     var(--ds-scroll-edge-fade-inline-mask);-webkit-mask-composite:source-in;mask-composite:intersect;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-size:100% 100%;mask-size:100% 100%}.scroll-edge-fade--top.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-message-scroller{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation-name:ds-scroll-edge-fade-reveal-top,       ds-scroll-edge-fade-reveal-bottom,       ds-scroll-edge-fade-reveal-left,       ds-scroll-edge-fade-reveal-right;animation-duration:1ms;animation-timing-function:ease-in-out;animation-fill-mode:both;animation-timeline:scroll(self y), scroll(self y), scroll(self x), scroll(self x);animation-range:0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,       0 var(--ds-scroll-edge-fade-reveal-distance),       calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%}@media (prefers-reduced-motion: reduce){.scroll-edge-fade--scroll-aware.sc-ds-message-scroller{animation:none}}}.scroll-edge-fade--at-end.sc-ds-message-scroller,.scroll-edge-fade--hidden.sc-ds-message-scroller{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-message-scroller{--ds-scroll-edge-fade-window-start:100%;--ds-scroll-edge-fade-window-end:100%;-webkit-mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );mask-image:linear-gradient(     to bottom,     #000 0,     #000 var(--ds-scroll-edge-fade-window-start),     transparent var(--ds-scroll-edge-fade-window-end)   );-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat}`;const h=()=>`.sc-ds-message-scroller-h{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box}.message-scroller.sc-ds-message-scroller{position:relative;width:100%;height:100%;min-height:0}.message-scroller__viewport.sc-ds-message-scroller{width:100%;height:100%;min-height:0;overflow:auto;overscroll-behavior:contain;box-sizing:border-box}.message-scroller__viewport.sc-ds-message-scroller:focus-visible{outline:var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);outline-offset:calc(-1 * var(--dimension-stroke-width-025))}.message-scroller__content.sc-ds-message-scroller{display:flex;flex-direction:column;gap:var(--dimension-space-300);width:100%;max-width:var(--dimension-panel-width-2xl);min-height:100%;margin-inline:auto;padding-block-start:var(--dimension-space-200);padding-inline:var(--dimension-space-200);padding-block-end:calc(     var(--dimension-space-200) + var(--ds-message-scroller-overlay-block-size, 0px)   );box-sizing:border-box}.message-scroller__overlay.sc-ds-message-scroller{position:absolute;right:0;bottom:0;left:0;z-index:var(--dimension-z-index-floating)}.message-scroller__control.sc-ds-message-scroller{position:absolute;bottom:calc(     var(--ds-message-scroller-overlay-content-block-size, 0px) + var(--dimension-space-200)   );left:50%;z-index:var(--dimension-z-index-floating);display:flex;align-items:center;justify-content:center;border-radius:var(--dimension-radius-half);background:var(--color-background-transparent);box-shadow:var(--effect-elevation-elevated-md);transform:translateX(-50%);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm))}`;const f=24;const m=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.dsReachStart=t(this,"dsReachStart");this.busy=false;this.autoFollow=true;this.defaultPosition="last-anchor";this.messagesLabel="Messages";this.showScrollToLatest=false;this.following=true;this.atStart=false;this.programmatic=false;this.previousScrollHeight=0;this.overlayBlockSize=0;this.overlayContentBlockSize=0;this.handleScroll=()=>{if(!this.viewport)return;this.syncContentFade();if(this.programmatic)return;this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;const e=this.viewport.scrollTop<=f;if(e&&!this.atStart)this.dsReachStart.emit();this.atStart=e};this.releaseFollow=()=>{this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()};this.handleSelectionChange=()=>{const e=document.getSelection();if(e&&!e.isCollapsed&&e.anchorNode&&this.el.contains(e.anchorNode)){this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()}}}componentDidLoad(){this.connectObservers();requestAnimationFrame((()=>this.applyDefaultPosition()));document.addEventListener("selectionchange",this.handleSelectionChange)}disconnectedCallback(){this.resizeObserver?.disconnect();this.overlayResizeObserver?.disconnect();this.mutationObserver?.disconnect();document.removeEventListener("selectionchange",this.handleSelectionChange)}async scrollToMessage(e){const s=Array.from(this.el.querySelectorAll("ds-message")).find((s=>s.messageId===e||s.getAttribute("message-id")===e));if(!s)return false;this.following=false;this.showScrollToLatest=true;s.scrollIntoView({block:"start",behavior:this.motionBehavior()});return true}async scrollToStart(){this.scrollTo(0);this.following=false;this.showScrollToLatest=Boolean(this.viewport&&this.viewport.scrollHeight>this.viewport.clientHeight)}async scrollToEnd(){this.following=true;this.showScrollToLatest=false;this.scrollTo(this.viewport?.scrollHeight??0)}motionBehavior(){return matchMedia("(prefers-reduced-motion: reduce)").matches?"auto":"smooth"}scrollTo(e){if(!this.viewport)return;this.programmatic=true;this.viewport.scrollTo({top:e,behavior:this.motionBehavior()});requestAnimationFrame((()=>{this.programmatic=false}))}connectObservers(){if(!this.viewport||!this.content)return;this.previousScrollHeight=this.viewport.scrollHeight;this.resizeObserver=new ResizeObserver((()=>this.handleContentGrowth()));this.resizeObserver.observe(this.content);this.resizeObserver.observe(this.viewport);if(this.overlay){this.overlayResizeObserver=new ResizeObserver((e=>{const s=Math.ceil(e[0]?.contentRect.height??0);this.overlayBlockSize=s;this.el.style.setProperty("--ds-message-scroller-overlay-block-size",`${s}px`);this.syncOverlayContentBlockSize();this.handleContentGrowth()}));this.overlayResizeObserver.observe(this.overlay)}this.mutationObserver=new MutationObserver((()=>this.handleContentGrowth()));this.mutationObserver.observe(this.content,{childList:true,subtree:true,characterData:true})}handleContentGrowth(){if(!this.viewport)return;const e=this.viewport.scrollHeight;const s=e-this.previousScrollHeight;if(s>0&&this.viewport.scrollTop<=f&&!this.following){this.viewport.scrollTop+=s}else if(this.autoFollow&&this.following){this.viewport.scrollTop=e}this.previousScrollHeight=e;this.showScrollToLatest=!this.following&&!this.isAtLiveEdge();this.syncContentFade()}syncContentFade(){if(!this.viewport||!this.content)return;const e=Math.max(this.viewport.scrollTop+this.viewport.clientHeight,0);const s=Math.max(e-this.overlayContentBlockSize,0);this.content.style.setProperty("--ds-scroll-edge-fade-window-start",`${s}px`);this.content.style.setProperty("--ds-scroll-edge-fade-window-end",`${e}px`)}syncOverlayContentBlockSize(){if(!this.overlay)return;const e=this.el.querySelector('[slot="overlay"]');if(!(e instanceof s)){this.overlayContentBlockSize=this.overlayBlockSize}else{const t=e.firstElementChild instanceof s?e.firstElementChild:e;const a=Math.max(Math.ceil(t.getBoundingClientRect().top-this.overlay.getBoundingClientRect().top),0);this.overlayContentBlockSize=Math.max(this.overlayBlockSize-a,0)}this.el.style.setProperty("--ds-message-scroller-overlay-content-block-size",`${this.overlayContentBlockSize}px`)}applyDefaultPosition(){if(!this.viewport)return;if(this.defaultPosition==="start"){this.viewport.scrollTop=0;this.following=false;this.showScrollToLatest=this.viewport.scrollHeight>this.viewport.clientHeight;this.syncContentFade();return}if(this.defaultPosition==="last-anchor"){const e=this.el.querySelectorAll("ds-message[scroll-anchor]");const s=e.item(e.length-1);if(s){s.scrollIntoView({block:"start"});this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;this.syncContentFade();return}}this.viewport.scrollTop=this.viewport.scrollHeight;this.following=true;this.showScrollToLatest=false;this.syncContentFade()}isAtLiveEdge(){if(!this.viewport)return true;return this.viewport.scrollHeight-this.viewport.clientHeight-this.viewport.scrollTop<=f}render(){return a(r,{key:"9cfd084fca07f735beb3787a922d04b4124c2f6a"},a("div",{key:"d8b91c04163669656a49e42da4024133b7f075d5",class:"message-scroller"},a("div",{key:"2644e51d2460ca7f5106339405247a0fca19b1ba",class:"message-scroller__viewport",ref:e=>{this.viewport=e},role:"region","aria-label":this.messagesLabel,tabIndex:0,onScroll:this.handleScroll,onPointerDown:this.releaseFollow,onKeyDown:e=>{if(["ArrowUp","PageUp","Home"].includes(e.key))this.releaseFollow()}},a("div",{key:"be85b6fcd851fdede173386365f9f3a35dd49878",class:"message-scroller__content scroll-edge-fade--block-window",ref:e=>{this.content=e},role:"log","aria-live":"polite","aria-relevant":"additions","aria-busy":this.busy?"true":undefined},a("slot",{key:"67b1c176aa48bd119b7b7f2ee3c54acb6e4a23bc"}))),a("div",{key:"35146f4b8861467a7b159cb4103e3db16cf20708",class:"message-scroller__overlay",ref:e=>{this.overlay=e}},a("slot",{key:"a1783323019f7e5951b4a7ba12f4c9a8c5da58c0",name:"overlay"})),this.showScrollToLatest?a("div",{class:"message-scroller__control"},a("ds-button-unfilled",{variant:"icon",icon:"ChevronDown",size:"md",rounded:true,hasBorder:false,"aria-label":"Scroll to latest message",onDsClick:()=>void this.scrollToEnd()})):null))}get el(){return this}static get style(){return g()+h()}},[262,"ds-message-scroller",{busy:[4],autoFollow:[4,"auto-follow"],defaultPosition:[1,"default-position"],messagesLabel:[1,"messages-label"],showScrollToLatest:[32],scrollToMessage:[64],scrollToStart:[64],scrollToEnd:[64]}]);function b(){if(typeof customElements==="undefined"){return}const e=["ds-message-scroller","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];e.forEach((e=>{switch(e){case"ds-message-scroller":if(!customElements.get(l(e))){customElements.define(l(e),m)}break;case"ds-badge":if(!customElements.get(l(e))){o()}break;case"ds-button-unfilled":if(!customElements.get(l(e))){i()}break;case"ds-icon":if(!customElements.get(l(e))){d()}break;case"ds-loader":if(!customElements.get(l(e))){c()}break;case"ds-text":if(!customElements.get(l(e))){n()}break}}))}b();const p=m;const v=b;export{p as DsMessageScroller,v as defineCustomElement};
+//# sourceMappingURL=ds-message-scroller.js.map

package/dist/components/ds-message-scroller.js.map

@@ -0,0 +1 @@
+{"version":3,"names":["scrollEdgeFadeCss","messageScrollerCss","LIVE_EDGE_THRESHOLD","MessageScroller","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","busy","autoFollow","defaultPosition","messagesLabel","showScrollToLatest","following","atStart","programmatic","previousScrollHeight","overlayBlockSize","overlayContentBlockSize","handleScroll","viewport","syncContentFade","isAtLiveEdge","nextAtStart","scrollTop","dsReachStart","emit","releaseFollow","handleSelectionChange","selection","document","getSelection","isCollapsed","anchorNode","el","contains","componentDidLoad","connectObservers","requestAnimationFrame","applyDefaultPosition","addEventListener","disconnectedCallback","resizeObserver","disconnect","overlayResizeObserver","mutationObserver","removeEventListener","scrollToMessage","id","message","Array","from","querySelectorAll","find","item","messageId","getAttribute","scrollIntoView","block","behavior","motionBehavior","scrollToStart","scrollTo","Boolean","scrollHeight","clientHeight","scrollToEnd","matchMedia","matches","top","content","ResizeObserver","handleContentGrowth","observe","overlay","entries","blockSize","Math","ceil","contentRect","height","style","setProperty","syncOverlayContentBlockSize","MutationObserver","childList","subtree","characterData","nextHeight","delta","fadeEnd","max","fadeStart","assigned","querySelector","visibleContent","firstElementChild","topInset","getBoundingClientRect","anchors","last","length","render","h","Host","key","class","ref","element","role","tabIndex","onScroll","onPointerDown","onKeyDown","event","includes","undefined","name","variant","icon","size","rounded","hasBorder","onDsClick"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.tsx"],"sourcesContent":["/**\n * Scroll-edge alpha fade — the single edge-fade utility for overflow containers.\n * Masks scrolling content to transparent so flat surfaces, shell gradients, and\n * images show through.\n *\n * Static fades are the default (PanelNav intentionally keeps its bottom fade).\n * Add `.scroll-edge-fade--scroll-aware` to reveal/hide each configured edge from\n * the container's own scroll position without JavaScript. Browsers without CSS\n * scroll-driven animations retain the configured static fades.\n *\n * @see scroll-edge-fade.ts — `scrollEdgeFadeClassMap`, `isScrollAtEdge`, size helpers.\n */\n\n@property --ds-scroll-edge-fade-top {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-bottom {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-left {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@property --ds-scroll-edge-fade-right {\n  syntax: '<length-percentage>';\n  inherits: false;\n  /* stylelint-disable-next-line length-zero-no-unit -- @property requires a unit-compatible initial value. */\n  initial-value: 0px;\n}\n\n@keyframes ds-scroll-edge-fade-reveal-top {\n  from { --ds-scroll-edge-fade-top: 0px; }\n  to { --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-bottom {\n  from { --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom); }\n  to { --ds-scroll-edge-fade-bottom: 0px; }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-left {\n  from { --ds-scroll-edge-fade-left: 0px; }\n  to { --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left); }\n}\n\n@keyframes ds-scroll-edge-fade-reveal-right {\n  from { --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right); }\n  to { --ds-scroll-edge-fade-right: 0px; }\n}\n\n/* Mask gradients use #000 / transparent as alpha stops — not theme colors. */\n/* stylelint-disable color-no-hex */\n\n.scroll-edge-fade {\n  --ds-scroll-edge-fade-size: var(--dimension-size-600);\n  --ds-scroll-edge-fade-reveal-distance: var(--dimension-size-800);\n  --ds-scroll-edge-fade-target-top: 0px;\n  --ds-scroll-edge-fade-target-bottom: 0px;\n  --ds-scroll-edge-fade-target-left: 0px;\n  --ds-scroll-edge-fade-target-right: 0px;\n  --ds-scroll-edge-fade-top: var(--ds-scroll-edge-fade-target-top);\n  --ds-scroll-edge-fade-bottom: var(--ds-scroll-edge-fade-target-bottom);\n  --ds-scroll-edge-fade-left: var(--ds-scroll-edge-fade-target-left);\n  --ds-scroll-edge-fade-right: var(--ds-scroll-edge-fade-target-right);\n  --ds-scroll-edge-fade-block-mask: linear-gradient(\n    to bottom,\n    transparent 0,\n    #000 var(--ds-scroll-edge-fade-top),\n    #000 calc(100% - var(--ds-scroll-edge-fade-bottom)),\n    transparent 100%\n  );\n  --ds-scroll-edge-fade-inline-mask: linear-gradient(\n    to right,\n    transparent 0,\n    #000 var(--ds-scroll-edge-fade-left),\n    #000 calc(100% - var(--ds-scroll-edge-fade-right)),\n    transparent 100%\n  );\n\n  /* Intersecting the block and inline masks lets every edge compose correctly. */\n  -webkit-mask-image:\n    var(--ds-scroll-edge-fade-block-mask),\n    var(--ds-scroll-edge-fade-inline-mask);\n  mask-image:\n    var(--ds-scroll-edge-fade-block-mask),\n    var(--ds-scroll-edge-fade-inline-mask);\n  -webkit-mask-composite: source-in;\n  mask-composite: intersect;\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n  -webkit-mask-size: 100% 100%;\n  mask-size: 100% 100%;\n}\n\n.scroll-edge-fade--top {\n  --ds-scroll-edge-fade-target-top: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--bottom {\n  --ds-scroll-edge-fade-target-bottom: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--left {\n  --ds-scroll-edge-fade-target-left: var(--ds-scroll-edge-fade-size);\n}\n\n.scroll-edge-fade--right {\n  --ds-scroll-edge-fade-target-right: var(--ds-scroll-edge-fade-size);\n}\n\n/* Manual per-edge state remains available when scroll state already lives in JS. */\n.scroll-edge-fade--top-at-edge {\n  --ds-scroll-edge-fade-target-top: 0px;\n}\n\n.scroll-edge-fade--bottom-at-edge {\n  --ds-scroll-edge-fade-target-bottom: 0px;\n}\n\n.scroll-edge-fade--left-at-edge {\n  --ds-scroll-edge-fade-target-left: 0px;\n}\n\n.scroll-edge-fade--right-at-edge {\n  --ds-scroll-edge-fade-target-right: 0px;\n}\n\n@supports (animation-timeline: scroll()) {\n  .scroll-edge-fade--scroll-aware {\n    animation-name:\n      ds-scroll-edge-fade-reveal-top,\n      ds-scroll-edge-fade-reveal-bottom,\n      ds-scroll-edge-fade-reveal-left,\n      ds-scroll-edge-fade-reveal-right;\n    /* stylelint-disable-next-line declaration-property-value-disallowed-list -- scroll timelines require a nonzero sentinel duration; elapsed time is ignored. */\n    animation-duration: 1ms;\n    animation-timing-function: ease-in-out;\n    animation-fill-mode: both;\n    animation-timeline: scroll(self y), scroll(self y), scroll(self x), scroll(self x);\n    animation-range:\n      0 var(--ds-scroll-edge-fade-reveal-distance),\n      calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%,\n      0 var(--ds-scroll-edge-fade-reveal-distance),\n      calc(100% - var(--ds-scroll-edge-fade-reveal-distance)) 100%;\n  }\n\n  @media (prefers-reduced-motion: reduce) {\n    .scroll-edge-fade--scroll-aware {\n      animation: none;\n    }\n  }\n}\n\n.scroll-edge-fade--at-end,\n.scroll-edge-fade--hidden {\n  -webkit-mask-image: none;\n  mask-image: none;\n}\n\n/**\n * Masks a long content element against a scrollport-relative block window.\n * The owner updates the start/end offsets as the scrollport moves. Keeping the\n * mask on the content instead of the overflow element leaves native scrollbars\n * outside the fade.\n */\n.scroll-edge-fade--block-window {\n  --ds-scroll-edge-fade-window-start: 100%;\n  --ds-scroll-edge-fade-window-end: 100%;\n\n  -webkit-mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 var(--ds-scroll-edge-fade-window-start),\n    transparent var(--ds-scroll-edge-fade-window-end)\n  );\n  mask-image: linear-gradient(\n    to bottom,\n    #000 0,\n    #000 var(--ds-scroll-edge-fade-window-start),\n    transparent var(--ds-scroll-edge-fade-window-end)\n  );\n  -webkit-mask-repeat: no-repeat;\n  mask-repeat: no-repeat;\n}\n\n/* stylelint-enable color-no-hex */\n",":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n.message-scroller {\n  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n}\n\n.message-scroller__viewport {\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  overflow: auto;\n  overscroll-behavior: contain;\n  box-sizing: border-box;\n}\n\n.message-scroller__viewport:focus-visible {\n  outline: var(--dimension-stroke-width-025) solid var(--color-border-bold-brand);\n  outline-offset: calc(-1 * var(--dimension-stroke-width-025));\n}\n\n.message-scroller__content {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-300);\n  width: 100%;\n  max-width: var(--dimension-panel-width-2xl);\n  min-height: 100%;\n  margin-inline: auto;\n  padding-block-start: var(--dimension-space-200);\n  padding-inline: var(--dimension-space-200);\n  padding-block-end: calc(\n    var(--dimension-space-200) + var(--ds-message-scroller-overlay-block-size, 0px)\n  );\n  box-sizing: border-box;\n}\n\n.message-scroller__overlay {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: var(--dimension-z-index-floating);\n}\n\n.message-scroller__control {\n  position: absolute;\n  bottom: calc(\n    var(--ds-message-scroller-overlay-content-block-size, 0px) + var(--dimension-space-200)\n  );\n  left: 50%;\n  z-index: var(--dimension-z-index-floating);\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--dimension-radius-half);\n  background: var(--color-background-transparent);\n  box-shadow: var(--effect-elevation-elevated-md);\n  transform: translateX(-50%);\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  backdrop-filter: blur(var(--effect-blur-sm));\n}\n","import {\n  Component,\n  Element,\n  Event,\n  EventEmitter,\n  h,\n  Host,\n  Method,\n  Prop,\n  State,\n} from '@stencil/core';\nimport type { MessageScrollerPosition } from '../conversation-types';\n\nconst LIVE_EDGE_THRESHOLD = 24;\n\n@Component({\n  tag: 'ds-message-scroller',\n  styleUrl: 'MessageScroller.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class MessageScroller {\n  @Element() el!: HTMLElement;\n\n  @Prop() busy: boolean = false;\n  @Prop() autoFollow: boolean = true;\n  @Prop() defaultPosition: MessageScrollerPosition = 'last-anchor';\n  @Prop() messagesLabel: string = 'Messages';\n\n  @Event() dsReachStart!: EventEmitter<void>;\n\n  @State() private showScrollToLatest = false;\n\n  private viewport?: HTMLElement;\n  private content?: HTMLElement;\n  private overlay?: HTMLElement;\n  private resizeObserver?: ResizeObserver;\n  private overlayResizeObserver?: ResizeObserver;\n  private mutationObserver?: MutationObserver;\n  private following = true;\n  private atStart = false;\n  private programmatic = false;\n  private previousScrollHeight = 0;\n  private overlayBlockSize = 0;\n  private overlayContentBlockSize = 0;\n\n  componentDidLoad() {\n    this.connectObservers();\n    requestAnimationFrame(() => this.applyDefaultPosition());\n    document.addEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  disconnectedCallback() {\n    this.resizeObserver?.disconnect();\n    this.overlayResizeObserver?.disconnect();\n    this.mutationObserver?.disconnect();\n    document.removeEventListener('selectionchange', this.handleSelectionChange);\n  }\n\n  @Method()\n  async scrollToMessage(id: string): Promise<boolean> {\n    const message = Array.from(\n      this.el.querySelectorAll<HTMLElement & { messageId?: string }>('ds-message')\n    ).find(item => item.messageId === id || item.getAttribute('message-id') === id);\n    if (!message) return false;\n    this.following = false;\n    this.showScrollToLatest = true;\n    message.scrollIntoView({ block: 'start', behavior: this.motionBehavior() });\n    return true;\n  }\n\n  @Method()\n  async scrollToStart() {\n    this.scrollTo(0);\n    this.following = false;\n    this.showScrollToLatest = Boolean(\n      this.viewport && this.viewport.scrollHeight > this.viewport.clientHeight\n    );\n  }\n\n  @Method()\n  async scrollToEnd() {\n    this.following = true;\n    this.showScrollToLatest = false;\n    this.scrollTo(this.viewport?.scrollHeight ?? 0);\n  }\n\n  private motionBehavior(): ScrollBehavior {\n    return matchMedia('(prefers-reduced-motion: reduce)').matches ? 'auto' : 'smooth';\n  }\n\n  private scrollTo(top: number) {\n    if (!this.viewport) return;\n    this.programmatic = true;\n    this.viewport.scrollTo({ top, behavior: this.motionBehavior() });\n    requestAnimationFrame(() => {\n      this.programmatic = false;\n    });\n  }\n\n  private connectObservers() {\n    if (!this.viewport || !this.content) return;\n    this.previousScrollHeight = this.viewport.scrollHeight;\n    this.resizeObserver = new ResizeObserver(() => this.handleContentGrowth());\n    this.resizeObserver.observe(this.content);\n    this.resizeObserver.observe(this.viewport);\n    if (this.overlay) {\n      this.overlayResizeObserver = new ResizeObserver(entries => {\n        const blockSize = Math.ceil(entries[0]?.contentRect.height ?? 0);\n        this.overlayBlockSize = blockSize;\n        this.el.style.setProperty('--ds-message-scroller-overlay-block-size', `${blockSize}px`);\n        this.syncOverlayContentBlockSize();\n        this.handleContentGrowth();\n      });\n      this.overlayResizeObserver.observe(this.overlay);\n    }\n    this.mutationObserver = new MutationObserver(() => this.handleContentGrowth());\n    this.mutationObserver.observe(this.content, {\n      childList: true,\n      subtree: true,\n      characterData: true,\n    });\n  }\n\n  private handleContentGrowth() {\n    if (!this.viewport) return;\n    const nextHeight = this.viewport.scrollHeight;\n    const delta = nextHeight - this.previousScrollHeight;\n    if (delta > 0 && this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD && !this.following) {\n      this.viewport.scrollTop += delta;\n    } else if (this.autoFollow && this.following) {\n      this.viewport.scrollTop = nextHeight;\n    }\n    this.previousScrollHeight = nextHeight;\n    this.showScrollToLatest = !this.following && !this.isAtLiveEdge();\n    this.syncContentFade();\n  }\n\n  private syncContentFade() {\n    if (!this.viewport || !this.content) return;\n    const fadeEnd = Math.max(this.viewport.scrollTop + this.viewport.clientHeight, 0);\n    const fadeStart = Math.max(fadeEnd - this.overlayContentBlockSize, 0);\n    this.content.style.setProperty('--ds-scroll-edge-fade-window-start', `${fadeStart}px`);\n    this.content.style.setProperty('--ds-scroll-edge-fade-window-end', `${fadeEnd}px`);\n  }\n\n  private syncOverlayContentBlockSize() {\n    if (!this.overlay) return;\n    const assigned = this.el.querySelector<HTMLElement>('[slot=\"overlay\"]');\n    if (!(assigned instanceof HTMLElement)) {\n      this.overlayContentBlockSize = this.overlayBlockSize;\n    } else {\n      const visibleContent =\n        assigned.firstElementChild instanceof HTMLElement ? assigned.firstElementChild : assigned;\n      const topInset = Math.max(\n        Math.ceil(visibleContent.getBoundingClientRect().top - this.overlay.getBoundingClientRect().top),\n        0\n      );\n      this.overlayContentBlockSize = Math.max(this.overlayBlockSize - topInset, 0);\n    }\n    this.el.style.setProperty(\n      '--ds-message-scroller-overlay-content-block-size',\n      `${this.overlayContentBlockSize}px`\n    );\n  }\n\n  private applyDefaultPosition() {\n    if (!this.viewport) return;\n    if (this.defaultPosition === 'start') {\n      this.viewport.scrollTop = 0;\n      this.following = false;\n      this.showScrollToLatest = this.viewport.scrollHeight > this.viewport.clientHeight;\n      this.syncContentFade();\n      return;\n    }\n    if (this.defaultPosition === 'last-anchor') {\n      const anchors = this.el.querySelectorAll<HTMLElement>('ds-message[scroll-anchor]');\n      const last = anchors.item(anchors.length - 1);\n      if (last) {\n        last.scrollIntoView({ block: 'start' });\n        this.following = this.isAtLiveEdge();\n        this.showScrollToLatest = !this.following;\n        this.syncContentFade();\n        return;\n      }\n    }\n    this.viewport.scrollTop = this.viewport.scrollHeight;\n    this.following = true;\n    this.showScrollToLatest = false;\n    this.syncContentFade();\n  }\n\n  private isAtLiveEdge(): boolean {\n    if (!this.viewport) return true;\n    return (\n      this.viewport.scrollHeight - this.viewport.clientHeight - this.viewport.scrollTop <=\n      LIVE_EDGE_THRESHOLD\n    );\n  }\n\n  private handleScroll = () => {\n    if (!this.viewport) return;\n    this.syncContentFade();\n    if (this.programmatic) return;\n    this.following = this.isAtLiveEdge();\n    this.showScrollToLatest = !this.following;\n    const nextAtStart = this.viewport.scrollTop <= LIVE_EDGE_THRESHOLD;\n    if (nextAtStart && !this.atStart) this.dsReachStart.emit();\n    this.atStart = nextAtStart;\n  };\n\n  private releaseFollow = () => {\n    this.following = false;\n    this.showScrollToLatest = !this.isAtLiveEdge();\n  };\n\n  private handleSelectionChange = () => {\n    const selection = document.getSelection();\n    if (\n      selection &&\n      !selection.isCollapsed &&\n      selection.anchorNode &&\n      this.el.contains(selection.anchorNode)\n    ) {\n      this.following = false;\n      this.showScrollToLatest = !this.isAtLiveEdge();\n    }\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"message-scroller\">\n          <div\n            class=\"message-scroller__viewport\"\n            ref={element => {\n              this.viewport = element;\n            }}\n            role=\"region\"\n            aria-label={this.messagesLabel}\n            tabIndex={0}\n            onScroll={this.handleScroll}\n            onPointerDown={this.releaseFollow}\n            onKeyDown={(event: KeyboardEvent) => {\n              if (['ArrowUp', 'PageUp', 'Home'].includes(event.key)) this.releaseFollow();\n            }}\n          >\n            <div\n              class=\"message-scroller__content scroll-edge-fade--block-window\"\n              ref={element => {\n                this.content = element;\n              }}\n              role=\"log\"\n              aria-live=\"polite\"\n              aria-relevant=\"additions\"\n              aria-busy={this.busy ? 'true' : undefined}\n            >\n              <slot />\n            </div>\n          </div>\n          <div\n            class=\"message-scroller__overlay\"\n            ref={element => {\n              this.overlay = element;\n            }}\n          >\n            <slot name=\"overlay\" />\n          </div>\n          {this.showScrollToLatest ? (\n            <div class=\"message-scroller__control\">\n              <ds-button-unfilled\n                variant=\"icon\"\n                icon=\"ChevronDown\"\n                size=\"md\"\n                rounded\n                hasBorder={false}\n                aria-label=\"Scroll to latest message\"\n                onDsClick={() => void this.scrollToEnd()}\n              />\n            </div>\n          ) : null}\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}

package/dist/components/ds-message.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../types/components";
+
+interface DsMessage extends Components.DsMessage, HTMLElement {}
+export const DsMessage: {
+    prototype: DsMessage;
+    new (): DsMessage;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/components/ds-message.js

@@ -0,0 +1,2 @@
+import{M as o,d as s}from"./p-DFxqk71w.js";const t=o;const p=s;export{t as DsMessage,p as defineCustomElement};
+//# sourceMappingURL=ds-message.js.map

package/dist/components/ds-message.js.map

@@ -0,0 +1 @@
+{"version":3,"names":[],"sources":[],"mappings":"","ignoreList":[]}

package/dist/components/ds-modal.js

@@ -1,2 +1,2 @@
-import{p as t,H as s,c as a,h as e,a as o,t as i}from"./index.js";import{d}from"./p-CbS_WWs2.js";import{r as n}from"./p-BHtg1fh3.js";import{T as r}from"./p-drBA73M_.js";const l=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 2 * var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-300);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}@media (prefers-reduced-motion: reduce){.modal-backdrop.sc-ds-modal,.modal-dialog.sc-ds-modal{animation:none;transform:none}.modal-backdrop.sc-ds-modal{opacity:1}.modal-backdrop--closing.sc-ds-modal,.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{opacity:0}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100)}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const c={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const m=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let h=0;const f=[];const u=new WeakMap;function p(t){const s=u.get(t);if(s){s.count+=1;return}u.set(t,{count:1,wasInert:t.inert});t.inert=true}function b(t){const s=u.get(t);if(!s)return;s.count-=1;if(s.count>0)return;t.inert=s.wasInert;u.delete(t)}const y=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClose=a(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++h;this.titleId=`ds-modal-title-${h}`;this.subtitleId=`ds-modal-subtitle-${h}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null;this.inertedElements=[]}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners();this.deactivateModal()}onOpenChange(t){if(t){this.teardownListeners();this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;this.activateModal();requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;const t=this.closeAnimationMs;if(t<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),t)}}focusFirst(){const t=this.el.querySelector(".modal-dialog");if(!t)return;const s=this.getFocusables(t);(s[0]??t).focus()}getFocusables(t){return Array.from(t.querySelectorAll(m)).filter((t=>!t.hasAttribute("disabled")&&t.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=t=>{if(t.key==="Escape"&&this.isTopModal){t.preventDefault();this.close()}};this.tabHandler=t=>{if(t.key!=="Tab"||!this.isTopModal)return;const s=this.el.querySelector(".modal-dialog");if(!s)return;const a=this.getFocusables(s);if(!a.length){t.preventDefault();s.focus();return}const e=a[0];const o=a[a.length-1];const i=document.activeElement;if(t.shiftKey){if(i===e||i===s||!s.contains(i)){t.preventDefault();o.focus()}}else{if(i===o||!s.contains(i)){t.preventDefault();e.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){if(!this.open||this.closing||!this.isTopModal)return;this.dsClose.emit();this.open=false}handleBackdropMouseDown(t){if(t.target===t.currentTarget&&this.isTopModal)this.close()}get isTopModal(){return f[f.length-1]===this}activateModal(){if(!f.includes(this))f.push(this);if(this.inertedElements.length)return;let t=this.el;let a=t.parentElement;while(a){for(const e of Array.from(a.children)){if(e===t||!(e instanceof s))continue;p(e);this.inertedElements.push(e)}if(a===document.body)break;t=a;a=a.parentElement}}deactivateModal(){const t=f.lastIndexOf(this);if(t>=0)f.splice(t,1);for(const t of this.inertedElements)b(t);this.inertedElements=[]}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return c[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return n(r.motionShort3,r.animationDurationShort3)}finishClose(){this.shouldRender=false;this.closing=false;this.teardownListeners();this.deactivateModal();this.previousFocus?.focus?.();this.previousFocus=null}render(){const t=!this.shouldRender&&!this.closing;return e(o,{key:"8a8947e2a3f5aca6f4468c247f2d7332c4d6c219",style:{display:"contents"}},e("div",{key:"b1caa6f78a623522171b1dad437d6d3dbf12a793",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":t},onMouseDown:t=>this.handleBackdropMouseDown(t),style:{position:"fixed",inset:"0",zIndex:"9999",display:t?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},e("div",{key:"778d27305193ec6de6cc4dce58e705da4625dd19",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},e("div",{key:"9bff9a1532f61080491ad594afd08410b0e7d21b",class:"modal-header"},e("ds-text",{key:"847a85c3c4fbaae6e54942062ee9c8f3c4543d56",as:"h2",variant:"text-title-small",textId:this.titleId},this.heading),this.subtitle&&e("ds-text",{key:"292383dce62c507fe98475eaf5a9c60051626db5",class:"modal-subtitle",as:"div",variant:"text-body-medium",color:"secondary",wrap:"balance",textId:this.subtitleId},this.subtitle)),e("div",{key:"7e09d1a8970e0f98219aa5b3085931933d1b1a98",class:"modal-body"},e("slot",{key:"492a1b1fa0e7912c508093a77567f9e122c18020"})),e("div",{key:"cb7fc42ed93d5810357f9c25d1afa2699f86b6a4",class:"modal-footer"},e("slot",{key:"13714f319857587967a1d796621a2a9630d2a856",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return l()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function g(){if(typeof customElements==="undefined"){return}const t=["ds-modal","ds-text"];t.forEach((t=>{switch(t){case"ds-modal":if(!customElements.get(i(t))){customElements.define(i(t),y)}break;case"ds-text":if(!customElements.get(i(t))){d()}break}}))}g();const k=y;const v=g;export{k as DsModal,v as defineCustomElement};
+import{p as t,H as s,c as e,h as a,a as o,t as i}from"./index.js";import{d}from"./p-BSOZXagj.js";import{r as n}from"./p-BHtg1fh3.js";import{T as r}from"./p-drBA73M_.js";const l=()=>`.modal-backdrop.sc-ds-modal{background-color:var(--color-background-shade);backdrop-filter:blur(var(--effect-blur-sm));-webkit-backdrop-filter:blur(var(--effect-blur-sm));animation:modalBackdropIn var(--effect-motion-short-2) forwards;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}.modal-dialog.sc-ds-modal{display:flex;flex-direction:column;max-height:calc(100vh - 2 * var(--dimension-space-200));overflow:hidden;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-300);box-shadow:var(--effect-elevation-elevated-floating);animation:modalDialogIn var(--effect-motion-short-2) forwards;outline:none;box-sizing:border-box}.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}@keyframes modalDialogIn{from{opacity:0;transform:scale(0.97) translateY(4px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes modalDialogOut{from{opacity:1;transform:scale(1) translateY(0)}to{opacity:0;transform:scale(0.97) translateY(4px)}}@media (prefers-reduced-motion: reduce){.modal-backdrop.sc-ds-modal,.modal-dialog.sc-ds-modal{animation:none;transform:none}.modal-backdrop.sc-ds-modal{opacity:1}.modal-backdrop--closing.sc-ds-modal,.modal-backdrop--closing.sc-ds-modal .modal-dialog.sc-ds-modal{opacity:0}}.modal-header.sc-ds-modal{padding:var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);flex-shrink:0}.modal-subtitle.sc-ds-modal{margin-top:var(--dimension-space-100)}.modal-body.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200);overflow-y:auto;flex:1}.modal-footer.sc-ds-modal{padding:var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);flex-shrink:0}.modal-footer.sc-ds-modal:empty{display:none}`;const c={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const m=["a[href]","area[href]","button:not([disabled])",'input:not([disabled]):not([type="hidden"])',"select:not([disabled])","textarea:not([disabled])","iframe",'[contenteditable="true"]','[tabindex]:not([tabindex="-1"])'].join(",");let f=0;const h=[];const u=new WeakMap;function p(t){const s=u.get(t);if(s){s.count+=1;return}u.set(t,{count:1,wasInert:t.inert});t.inert=true}function b(t){const s=u.get(t);if(!s)return;s.count-=1;if(s.count>0)return;t.inert=s.wasInert;u.delete(t)}const g=t(class t extends s{constructor(t){super();if(t!==false){this.__registerHost()}this.dsClose=e(this,"dsClose");this.open=false;this.modalWidth="md";this.shouldRender=false;this.closing=false;this.instanceId=++f;this.titleId=`ds-modal-title-${f}`;this.subtitleId=`ds-modal-subtitle-${f}`;this.previousFocus=null;this.escapeHandler=null;this.tabHandler=null;this.closeTimer=null;this.inertedElements=[]}componentDidLoad(){if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.teardownListeners();this.deactivateModal()}onOpenChange(t){if(t){this.teardownListeners();this.shouldRender=true;this.closing=false;this.previousFocus=document.activeElement;this.activateModal();requestAnimationFrame((()=>{this.focusFirst();this.setupListeners()}))}else if(this.shouldRender){this.closing=true;const t=this.closeAnimationMs;if(t<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),t)}}focusFirst(){const t=this.el.querySelector(".modal-dialog");if(!t)return;const s=this.getFocusables(t);(s[0]??t).focus()}getFocusables(t){return Array.from(t.querySelectorAll(m)).filter((t=>!t.hasAttribute("disabled")&&t.getAttribute("aria-hidden")!=="true"))}setupListeners(){this.escapeHandler=t=>{if(t.key==="Escape"&&this.isTopModal){t.preventDefault();this.close()}};this.tabHandler=t=>{if(t.key!=="Tab"||!this.isTopModal)return;const s=this.el.querySelector(".modal-dialog");if(!s)return;const e=this.getFocusables(s);if(!e.length){t.preventDefault();s.focus();return}const a=e[0];const o=e[e.length-1];const i=document.activeElement;if(t.shiftKey){if(i===a||i===s||!s.contains(i)){t.preventDefault();o.focus()}}else{if(i===o||!s.contains(i)){t.preventDefault();a.focus()}}};document.addEventListener("keydown",this.escapeHandler);document.addEventListener("keydown",this.tabHandler)}teardownListeners(){if(this.escapeHandler){document.removeEventListener("keydown",this.escapeHandler);this.escapeHandler=null}if(this.tabHandler){document.removeEventListener("keydown",this.tabHandler);this.tabHandler=null}if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}close(){if(!this.open||this.closing||!this.isTopModal)return;this.dsClose.emit();this.open=false}handleBackdropMouseDown(t){if(t.target===t.currentTarget&&this.isTopModal)this.close()}get isTopModal(){return h[h.length-1]===this}activateModal(){if(!h.includes(this))h.push(this);if(this.inertedElements.length)return;let t=this.el;let e=t.parentElement;while(e){for(const a of Array.from(e.children)){if(a===t||!(a instanceof s))continue;p(a);this.inertedElements.push(a)}if(e===document.body)break;t=e;e=e.parentElement}}deactivateModal(){const t=h.lastIndexOf(this);if(t>=0)h.splice(t,1);for(const t of this.inertedElements)b(t);this.inertedElements=[]}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return c[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return n(r.motionShort3,r.animationDurationShort3)}finishClose(){this.shouldRender=false;this.closing=false;this.teardownListeners();this.deactivateModal();this.previousFocus?.focus?.();this.previousFocus=null}render(){const t=!this.shouldRender&&!this.closing;return a(o,{key:"61efafc51c097f8a088b6af0270190c1454c90dd",style:{display:"contents"}},a("div",{key:"f99372a6f4dfc5179b96e16b2765537bf410a532",class:{"modal-backdrop":true,"modal-backdrop--closing":this.closing,"modal-backdrop--hidden":t},onMouseDown:t=>this.handleBackdropMouseDown(t),style:{position:"fixed",inset:"0",zIndex:"9999",display:t?"none":"flex",alignItems:"center",justifyContent:"center",padding:"var(--dimension-space-200)"}},a("div",{key:"f2b093d0f5ad6fd0f55b7928c1c6f823f73a24ef",class:{"modal-dialog":true,"modal-dialog--closing":this.closing},role:"dialog","aria-modal":"true","aria-labelledby":this.titleId,"aria-describedby":this.subtitle?this.subtitleId:undefined,tabIndex:-1,style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},a("div",{key:"310211aeba0892975e9cac37497d18953ee9e519",class:"modal-header"},a("ds-text",{key:"d1ae5e935592056e5dd2eb6708a56b744dec6d14",as:"h2",variant:"text-title-small",textId:this.titleId},this.heading),this.subtitle&&a("ds-text",{key:"79cfdfc7d63691b87da9ed854264a1d322d7f02e",class:"modal-subtitle",as:"div",variant:"text-body-medium",color:"secondary",wrap:"balance",textId:this.subtitleId},this.subtitle)),a("div",{key:"9ae5d16ef4f494c28b36ce5322e5b0eab1d0ad04",class:"modal-body"},a("slot",{key:"e5f3b1b992293b483d4ecb66cfc4081fd8a44c2b"})),a("div",{key:"ecd1c88052372e66563c3621e37c23390f052590",class:"modal-footer"},a("slot",{key:"c86d8d51acdda752e4d4a1dd7b9bd7d18dc162fb",name:"footer"})))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return l()}},[262,"ds-modal",{open:[1028],heading:[1],subtitle:[1],modalWidth:[1,"modal-width"],shouldRender:[32],closing:[32]},undefined,{open:[{onOpenChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const t=["ds-modal","ds-text"];t.forEach((t=>{switch(t){case"ds-modal":if(!customElements.get(i(t))){customElements.define(i(t),g)}break;case"ds-text":if(!customElements.get(i(t))){d()}break}}))}y();const k=g;const v=y;export{k as DsModal,v as defineCustomElement};
 //# sourceMappingURL=ds-modal.js.map