@ds-mo/ui 9.2.0 → 10.0.0

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

@@ -1,2 +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-BZAEZENv.js";import{d as c}from"./p-BEQB8EnB.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}.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-300);background:var(--color-background-primary);box-shadow:var(--effect-elevation-elevated-sm);overflow:hidden}.message-composer--error.sc-ds-message-composer .message-composer__field.sc-ds-message-composer{box-shadow:var(--effect-elevation-elevated-sm),     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)}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};
+import{p as e,H as s,c as t,h as a,a as o,t as i}from"./index.js";import{d as r}from"./p-DsbhBb5F.js";import{d as n}from"./p-DuNZGFkV.js";import{d as c}from"./p-Cpr3K41-.js";import{d}from"./p-CZZYGqKz.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=t(this,"dsInput");this.dsSubmit=t(this,"dsSubmit");this.dsStop=t(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 a(o,{key:"6bb86b904675f1159fcd659130820927b02bc8b1"},a("form",{key:"b21cf5dc3f7d12762c949119580942d65b6519cd",class:{"message-composer":true,"message-composer--error":e},"aria-busy":this.streaming?"true":undefined,onSubmit:e=>{e.preventDefault();this.submit()}},a("div",{key:"54c3a9ed81bd90b50812252dcf4828526926ee81",class:"message-composer__attachments"},a("slot",{key:"6cf5fec0dcde859811246f48269d3318a6e968b6",name:"attachments"})),a("div",{key:"213aa04f2011c93380e37e9cf5cb34df06db8bea",class:"message-composer__field"},a("textarea",{key:"0f3b1b1902368fce91365ffd4c2f96713f9a3b8f",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}),a("div",{key:"67651e4aef46e3a44087a04de4adc00222b2e643",class:"message-composer__controls"},a("div",{key:"576fe87451740547f3959344c0e454fc253c2da2",class:"message-composer__tools"},a("slot",{key:"bcb75a57b5ece41872d3c6c025362c4505836d3b",name:"tools"})),a("div",{key:"86ef560152a17ba3fcf2b1b231a12053d2665392",class:"message-composer__actions"},a("slot",{key:"1180b97bb8534854d308949cf9fb2850b7145d24",name:"actions"}),a("ds-button-filled",{key:"83f7517b393cf7fe8cfe82b932ae5eff00d307d2",class:"message-composer__action",variant:"icon",icon:this.streaming?"SquareFilled":"ArrowUp",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))){n()}break;case"ds-loader":if(!customElements.get(i(e))){c()}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

@@ -1 +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}\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-300);\n  background: var(--color-background-primary);\n  box-shadow: var(--effect-elevation-elevated-sm);\n  overflow: hidden;\n}\n\n.message-composer--error .message-composer__field {\n  box-shadow: var(--effect-elevation-elevated-sm),\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}\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,6jE,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":[]}
+{"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 ? 'SquareFilled' : 'ArrowUp'}\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,eAAiB,UACxC8B,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.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,c as t,h as i,a as r,t as o}from"./index.js";import{d as a}from"./p-CiwdnKKp.js";import{d as l}from"./p-CZMEhdlA.js";import{d as n}from"./p-BEQB8EnB.js";import{d as h}from"./p-Cpr3K41-.js";import{d as c}from"./p-BSOZXagj.js";const d=()=>`.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-150);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;right:var(--dimension-space-100);bottom:calc(var(--ds-message-scroller-overlay-block-size, 0px) + var(--dimension-space-100));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);-webkit-backdrop-filter:blur(var(--effect-blur-sm));backdrop-filter:blur(var(--effect-blur-sm))}`;const f=24;const m=s(class s extends e{constructor(s){super();if(s!==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.handleScroll=()=>{if(!this.viewport||this.programmatic)return;this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;const s=this.viewport.scrollTop<=f;if(s&&!this.atStart)this.dsReachStart.emit();this.atStart=s};this.releaseFollow=()=>{this.following=false;this.showScrollToLatest=!this.isAtLiveEdge()};this.handleSelectionChange=()=>{const s=document.getSelection();if(s&&!s.isCollapsed&&s.anchorNode&&this.el.contains(s.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(s){const e=Array.from(this.el.querySelectorAll("ds-message")).find((e=>e.messageId===s||e.getAttribute("message-id")===s));if(!e)return false;this.following=false;this.showScrollToLatest=true;e.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(s){if(!this.viewport)return;this.programmatic=true;this.viewport.scrollTo({top:s,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);if(this.overlay){this.overlayResizeObserver=new ResizeObserver((s=>{const e=Math.ceil(s[0]?.contentRect.height??0);this.el.style.setProperty("--ds-message-scroller-overlay-block-size",`${e}px`);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 s=this.viewport.scrollHeight;const e=s-this.previousScrollHeight;if(e>0&&this.viewport.scrollTop<=f&&!this.following){this.viewport.scrollTop+=e}else if(this.autoFollow&&this.following){this.viewport.scrollTop=s}this.previousScrollHeight=s;this.showScrollToLatest=!this.following&&!this.isAtLiveEdge()}applyDefaultPosition(){if(!this.viewport)return;if(this.defaultPosition==="start"){this.viewport.scrollTop=0;this.following=false;this.showScrollToLatest=this.viewport.scrollHeight>this.viewport.clientHeight;return}if(this.defaultPosition==="last-anchor"){const s=this.el.querySelectorAll("ds-message[scroll-anchor]");const e=s.item(s.length-1);if(e){e.scrollIntoView({block:"start"});this.following=this.isAtLiveEdge();this.showScrollToLatest=!this.following;return}}this.viewport.scrollTop=this.viewport.scrollHeight;this.following=true;this.showScrollToLatest=false}isAtLiveEdge(){if(!this.viewport)return true;return this.viewport.scrollHeight-this.viewport.clientHeight-this.viewport.scrollTop<=f}render(){return i(r,{key:"df50bb02c389930363b9154f3aa4d26537e4d8d2"},i("div",{key:"9bb7a4a442669fd12cfcf7b1325ad7ec86e24b0d",class:"message-scroller"},i("div",{key:"b196aca5f364904cb8d62b17e7f597775fc7bae8",class:"message-scroller__viewport",ref:s=>{this.viewport=s},role:"region","aria-label":this.messagesLabel,tabIndex:0,onScroll:this.handleScroll,onPointerDown:this.releaseFollow,onKeyDown:s=>{if(["ArrowUp","PageUp","Home"].includes(s.key))this.releaseFollow()}},i("div",{key:"0b2b6e207ca4584b90293fb15879a64382d4cf86",class:"message-scroller__content",ref:s=>{this.content=s},role:"log","aria-live":"polite","aria-relevant":"additions","aria-busy":this.busy?"true":undefined},i("slot",{key:"733828bb8abee00bfc38b3d90f81dfe2da93da76"}))),i("div",{key:"f041664e0d6a00dfec714c448553b15ca320b461",class:"message-scroller__overlay",ref:s=>{this.overlay=s}},i("slot",{key:"88bf27d3277bbce392951f001cada349df967fe7",name:"overlay"})),this.showScrollToLatest?i("div",{class:"message-scroller__control"},i("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 d()}},[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 s=["ds-message-scroller","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];s.forEach((s=>{switch(s){case"ds-message-scroller":if(!customElements.get(o(s))){customElements.define(o(s),m)}break;case"ds-badge":if(!customElements.get(o(s))){a()}break;case"ds-button-unfilled":if(!customElements.get(o(s))){l()}break;case"ds-icon":if(!customElements.get(o(s))){n()}break;case"ds-loader":if(!customElements.get(o(s))){h()}break;case"ds-text":if(!customElements.get(o(s))){c()}break}}))}b();const u=m;const g=b;export{u as DsMessageScroller,g as defineCustomElement};
+import{p as e,H as s,c as t,h as r,a,t as l}from"./index.js";import{d as o}from"./p-DrDHC7V6.js";import{d as i}from"./p-CKnoWZd9.js";import{d}from"./p-DuNZGFkV.js";import{d as c}from"./p-Cpr3K41-.js";import{d as n}from"./p-CZZYGqKz.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 r=Math.max(Math.ceil(t.getBoundingClientRect().top-this.overlay.getBoundingClientRect().top),0);this.overlayContentBlockSize=Math.max(this.overlayBlockSize-r,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 r(a,{key:"47d46b10ba6860b644541743a6314fd8416c8d17"},r("div",{key:"beb1e8b0e0f9172eb747bc394b2f7886b254ae90",class:"message-scroller"},r("div",{key:"0cf5166185d3440ce241436d7c97596aca11a4f7",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()}},r("div",{key:"751e2b66a051b358b02274b6181714264e0041f5",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},r("slot",{key:"65869cbf6377eeb9abf2264e625cf3a6eb42129f"}))),r("div",{key:"e8a6cb5adf2ee46c22b35387bcd4b26faa986925",class:"message-scroller__overlay",ref:e=>{this.overlay=e}},r("slot",{key:"356033d40fd75824072ccdbd3d1abecc83e25e34",name:"overlay"})),this.showScrollToLatest?r("div",{class:"message-scroller__control"},r("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

@@ -1 +1 @@
-{"version":3,"names":["messageScrollerCss","LIVE_EDGE_THRESHOLD","MessageScroller","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","busy","autoFollow","defaultPosition","messagesLabel","showScrollToLatest","following","atStart","programmatic","previousScrollHeight","handleScroll","viewport","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","MutationObserver","childList","subtree","characterData","nextHeight","delta","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/components/MessageScroller/MessageScroller.css?tag=ds-message-scroller&encapsulation=scoped","src/wc/components/MessageScroller/MessageScroller.tsx"],"sourcesContent":[":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-150);\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  right: var(--dimension-space-100);\n  bottom: calc(var(--ds-message-scroller-overlay-block-size, 0px) + var(--dimension-space-100));\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  -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  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\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    if (this.overlay) {\n      this.overlayResizeObserver = new ResizeObserver(entries => {\n        const blockSize = Math.ceil(entries[0]?.contentRect.height ?? 0);\n        this.el.style.setProperty('--ds-message-scroller-overlay-block-size', `${blockSize}px`);\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  }\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      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        return;\n      }\n    }\n    this.viewport.scrollTop = this.viewport.scrollHeight;\n    this.following = true;\n    this.showScrollToLatest = false;\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 || 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\"\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":"sPAAA,MAAMA,EAAqB,IAAM,qmDCajC,MAAMC,EAAsB,G,MAOfC,EAAeC,EAAA,MAAAD,UAAAE,EAL5B,WAAAC,CAAAC,G,qFAQUC,KAAAC,KAAgB,MAChBD,KAAAE,WAAsB,KACtBF,KAAAG,gBAA2C,cAC3CH,KAAAI,cAAwB,WAIfJ,KAAAK,mBAAqB,MAQ9BL,KAAAM,UAAY,KACZN,KAAAO,QAAU,MACVP,KAAAQ,aAAe,MACfR,KAAAS,qBAAuB,EAyHvBT,KAAAU,aAAe,KACrB,IAAKV,KAAKW,UAAYX,KAAKQ,aAAc,OACzCR,KAAKM,UAAYN,KAAKY,eACtBZ,KAAKK,oBAAsBL,KAAKM,UAChC,MAAMO,EAAcb,KAAKW,SAASG,WAAapB,EAC/C,GAAImB,IAAgBb,KAAKO,QAASP,KAAKe,aAAaC,OACpDhB,KAAKO,QAAUM,CAAW,EAGpBb,KAAAiB,cAAgB,KACtBjB,KAAKM,UAAY,MACjBN,KAAKK,oBAAsBL,KAAKY,cAAc,EAGxCZ,KAAAkB,sBAAwB,KAC9B,MAAMC,EAAYC,SAASC,eAC3B,GACEF,IACCA,EAAUG,aACXH,EAAUI,YACVvB,KAAKwB,GAAGC,SAASN,EAAUI,YAC3B,CACAvB,KAAKM,UAAY,MACjBN,KAAKK,oBAAsBL,KAAKY,c,EA4DrC,CA1MC,gBAAAc,GACE1B,KAAK2B,mBACLC,uBAAsB,IAAM5B,KAAK6B,yBACjCT,SAASU,iBAAiB,kBAAmB9B,KAAKkB,sB,CAGpD,oBAAAa,GACE/B,KAAKgC,gBAAgBC,aACrBjC,KAAKkC,uBAAuBD,aAC5BjC,KAAKmC,kBAAkBF,aACvBb,SAASgB,oBAAoB,kBAAmBpC,KAAKkB,sB,CAIvD,qBAAMmB,CAAgBC,GACpB,MAAMC,EAAUC,MAAMC,KACpBzC,KAAKwB,GAAGkB,iBAAuD,eAC/DC,MAAKC,GAAQA,EAAKC,YAAcP,GAAMM,EAAKE,aAAa,gBAAkBR,IAC5E,IAAKC,EAAS,OAAO,MACrBvC,KAAKM,UAAY,MACjBN,KAAKK,mBAAqB,KAC1BkC,EAAQQ,eAAe,CAAEC,MAAO,QAASC,SAAUjD,KAAKkD,mBACxD,OAAO,I,CAIT,mBAAMC,GACJnD,KAAKoD,SAAS,GACdpD,KAAKM,UAAY,MACjBN,KAAKK,mBAAqBgD,QACxBrD,KAAKW,UAAYX,KAAKW,SAAS2C,aAAetD,KAAKW,SAAS4C,a,CAKhE,iBAAMC,GACJxD,KAAKM,UAAY,KACjBN,KAAKK,mBAAqB,MAC1BL,KAAKoD,SAASpD,KAAKW,UAAU2C,cAAgB,E,CAGvC,cAAAJ,GACN,OAAOO,WAAW,oCAAoCC,QAAU,OAAS,Q,CAGnE,QAAAN,CAASO,GACf,IAAK3D,KAAKW,SAAU,OACpBX,KAAKQ,aAAe,KACpBR,KAAKW,SAASyC,SAAS,CAAEO,MAAKV,SAAUjD,KAAKkD,mBAC7CtB,uBAAsB,KACpB5B,KAAKQ,aAAe,KAAK,G,CAIrB,gBAAAmB,GACN,IAAK3B,KAAKW,WAAaX,KAAK4D,QAAS,OACrC5D,KAAKS,qBAAuBT,KAAKW,SAAS2C,aAC1CtD,KAAKgC,eAAiB,IAAI6B,gBAAe,IAAM7D,KAAK8D,wBACpD9D,KAAKgC,eAAe+B,QAAQ/D,KAAK4D,SACjC,GAAI5D,KAAKgE,QAAS,CAChBhE,KAAKkC,sBAAwB,IAAI2B,gBAAeI,IAC9C,MAAMC,EAAYC,KAAKC,KAAKH,EAAQ,IAAII,YAAYC,QAAU,GAC9DtE,KAAKwB,GAAG+C,MAAMC,YAAY,2CAA4C,GAAGN,OACzElE,KAAK8D,qBAAqB,IAE5B9D,KAAKkC,sBAAsB6B,QAAQ/D,KAAKgE,Q,CAE1ChE,KAAKmC,iBAAmB,IAAIsC,kBAAiB,IAAMzE,KAAK8D,wBACxD9D,KAAKmC,iBAAiB4B,QAAQ/D,KAAK4D,QAAS,CAC1Cc,UAAW,KACXC,QAAS,KACTC,cAAe,M,CAIX,mBAAAd,GACN,IAAK9D,KAAKW,SAAU,OACpB,MAAMkE,EAAa7E,KAAKW,SAAS2C,aACjC,MAAMwB,EAAQD,EAAa7E,KAAKS,qBAChC,GAAIqE,EAAQ,GAAK9E,KAAKW,SAASG,WAAapB,IAAwBM,KAAKM,UAAW,CAClFN,KAAKW,SAASG,WAAagE,C,MACtB,GAAI9E,KAAKE,YAAcF,KAAKM,UAAW,CAC5CN,KAAKW,SAASG,UAAY+D,C,CAE5B7E,KAAKS,qBAAuBoE,EAC5B7E,KAAKK,oBAAsBL,KAAKM,YAAcN,KAAKY,c,CAG7C,oBAAAiB,GACN,IAAK7B,KAAKW,SAAU,OACpB,GAAIX,KAAKG,kBAAoB,QAAS,CACpCH,KAAKW,SAASG,UAAY,EAC1Bd,KAAKM,UAAY,MACjBN,KAAKK,mBAAqBL,KAAKW,SAAS2C,aAAetD,KAAKW,SAAS4C,aACrE,M,CAEF,GAAIvD,KAAKG,kBAAoB,cAAe,CAC1C,MAAM4E,EAAU/E,KAAKwB,GAAGkB,iBAA8B,6BACtD,MAAMsC,EAAOD,EAAQnC,KAAKmC,EAAQE,OAAS,GAC3C,GAAID,EAAM,CACRA,EAAKjC,eAAe,CAAEC,MAAO,UAC7BhD,KAAKM,UAAYN,KAAKY,eACtBZ,KAAKK,oBAAsBL,KAAKM,UAChC,M,EAGJN,KAAKW,SAASG,UAAYd,KAAKW,SAAS2C,aACxCtD,KAAKM,UAAY,KACjBN,KAAKK,mBAAqB,K,CAGpB,YAAAO,GACN,IAAKZ,KAAKW,SAAU,OAAO,KAC3B,OACEX,KAAKW,SAAS2C,aAAetD,KAAKW,SAAS4C,aAAevD,KAAKW,SAASG,WACxEpB,C,CA+BJ,MAAAwF,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,oBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAM,6BACNC,IAAKC,IACHxF,KAAKW,SAAW6E,CAAO,EAEzBC,KAAK,SAAQ,aACDzF,KAAKI,cACjBsF,SAAU,EACVC,SAAU3F,KAAKU,aACfkF,cAAe5F,KAAKiB,cACpB4E,UAAYC,IACV,GAAI,CAAC,UAAW,SAAU,QAAQC,SAASD,EAAMT,KAAMrF,KAAKiB,eAAe,GAG7EkE,EAAA,OAAAE,IAAA,2CACEC,MAAM,4BACNC,IAAKC,IACHxF,KAAK4D,QAAU4B,CAAO,EAExBC,KAAK,MAAK,YACA,SAAQ,gBACJ,YAAW,YACdzF,KAAKC,KAAO,OAAS+F,WAEhCb,EAAA,QAAAE,IAAA,+CAGJF,EAAA,OAAAE,IAAA,2CACEC,MAAM,4BACNC,IAAKC,IACHxF,KAAKgE,QAAUwB,CAAO,GAGxBL,EAAA,QAAAE,IAAA,2CAAMY,KAAK,aAEZjG,KAAKK,mBACJ8E,EAAA,OAAKG,MAAM,6BACTH,EAAA,sBACEe,QAAQ,OACRC,KAAK,cACLC,KAAK,KACLC,QAAO,KACPC,UAAW,MAAK,aACL,2BACXC,UAAW,SAAWvG,KAAKwD,iBAG7B,M","ignoreList":[]}
+{"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.js

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

package/dist/components/ds-modal.js

@@ -1,2 +1,2 @@
-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};
+import{p as o,H as e,c as s,h as a,a as t,t as i}from"./index.js";import{d}from"./p-DrDHC7V6.js";import{d as n}from"./p-CKnoWZd9.js";import{d as r}from"./p-DuNZGFkV.js";import{d as l}from"./p-Cpr3K41-.js";import{d as c}from"./p-CZZYGqKz.js";import{r as m}from"./p-BHtg1fh3.js";import{T as h}from"./p-C_0Q8Cnp.js";const f=()=>`.sc-ds-modal-h{display:contents}.modal-dialog.sc-ds-modal{display:none;flex-direction:column;max-width:none;max-height:calc(100vh - 2 * var(--dimension-space-200));margin:auto;padding:0;overflow:hidden;color:var(--color-foreground-primary);background-color:var(--color-background-primary);border:0;border-radius:var(--dimension-radius-050);box-shadow:var(--effect-elevation-elevated-floating);outline:none;box-sizing:border-box}.modal-dialog[open].sc-ds-modal{display:flex;animation:modalDialogIn var(--effect-motion-short-2) forwards}.modal-dialog.sc-ds-modal::backdrop{background-color:var(--color-background-shade);animation:modalBackdropIn var(--effect-motion-short-2) forwards}.modal-dialog--closing.sc-ds-modal{animation:modalDialogOut var(--effect-motion-short-3) forwards}.modal-dialog--closing.sc-ds-modal::backdrop{animation:modalBackdropOut var(--effect-motion-short-3) forwards}@keyframes modalBackdropIn{from{opacity:0}to{opacity:1}}@keyframes modalBackdropOut{from{opacity:1}to{opacity:0}}@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-dialog[open].sc-ds-modal,.modal-dialog--closing.sc-ds-modal{animation:none;transform:none}.modal-dialog.sc-ds-modal::backdrop{animation:none;opacity:1}.modal-dialog--closing.sc-ds-modal,.modal-dialog--closing.sc-ds-modal::backdrop{opacity:0}}.modal-header.sc-ds-modal{display:flex;align-items:center;gap:var(--dimension-space-050);height:var(--dimension-size-800);padding:var(--dimension-space-200);flex:0 0 auto;box-sizing:border-box;border-bottom:var(--dimension-stroke-width-012) solid var(--color-border-tertiary);color:var(--color-foreground-primary)}ds-text.modal-heading.sc-ds-modal{flex:1 1 0;width:auto;min-width:0;text-align:left;-webkit-user-select:none;user-select:none}.modal-close.sc-ds-modal{flex:0 0 auto}.modal-content.sc-ds-modal{min-height:0;padding:var(--dimension-space-200);overflow-y:auto;flex:1 1 auto;box-sizing:border-box}.modal-footer.sc-ds-modal{display:flex;align-items:center;justify-content:flex-start;gap:var(--dimension-space-100);height:var(--dimension-size-800);padding:var(--dimension-space-200);flex:0 0 auto;box-sizing:border-box;border-top:var(--dimension-stroke-width-012) solid var(--color-border-tertiary)}.modal-footer--empty.sc-ds-modal{display:none}.modal-footer.sc-ds-modal slot.sc-ds-modal{display:contents}`;const u={sm:"var(--dimension-modal-width-sm)",md:"var(--dimension-modal-width-md)",lg:"var(--dimension-modal-width-lg)"};const b=["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 p=0;const g=o(class o extends e{constructor(o){super();if(o!==false){this.__registerHost()}this.dsClose=s(this,"dsClose");this.dsAfterClose=s(this,"dsAfterClose");this.open=false;this.closeAriaLabel="Close";this.modalWidth="md";this.closing=false;this.hasFooter=false;this.titleId=`ds-modal-title-${++p}`;this.dialogEl=null;this.previousFocus=null;this.closeTimer=null}componentDidLoad(){this.updateFooterPresence();if(this.open)this.onOpenChange(true)}disconnectedCallback(){this.clearCloseTimer();if(this.dialogEl?.open)this.dialogEl.close()}onOpenChange(o){if(o){this.clearCloseTimer();const o=!!this.dialogEl?.open;this.closing=false;if(!this.dialogEl||o)return;this.previousFocus=document.activeElement;this.dialogEl.showModal();requestAnimationFrame((()=>{if(this.open&&this.dialogEl?.open)this.focusClose()}))}else if(this.dialogEl?.open){this.closing=true;const o=this.closeAnimationMs;if(o<=0){this.finishClose();return}this.closeTimer=setTimeout((()=>{this.closeTimer=null;this.finishClose()}),o)}}focusClose(){const o=this.el.querySelector("ds-button-unfilled.modal-close");void o?.setFocus?.()}clearCloseTimer(){if(this.closeTimer){clearTimeout(this.closeTimer);this.closeTimer=null}}requestClose(o,e){if(!this.open||this.closing||!this.dialogEl?.open)return;this.dsClose.emit({reason:o,originalEvent:e});this.open=false}updateFooterPresence(o){const e=o?.assignedNodes({flatten:true})??[];this.hasFooter=e.some((o=>o.nodeType!==Node.TEXT_NODE||!!o.textContent?.trim()))||this.el.querySelector('[slot="footer"]')!==null}handleCancel(o){o.preventDefault();this.requestClose("escape",o)}handleBackdropPointerDown(o){if(o.target===this.dialogEl)this.requestClose("backdrop",o)}handleKeyDown(o){if(o.key!=="Tab"||!this.dialogEl)return;const e=Array.from(this.dialogEl.querySelectorAll(b)).filter((o=>!o.hasAttribute("disabled")&&o.getAttribute("aria-hidden")!=="true"));if(!e.length){o.preventDefault();this.dialogEl.focus();return}const s=e[0];const a=e[e.length-1];const t=document.activeElement;if(o.shiftKey&&(t===s||t===this.dialogEl)){o.preventDefault();a.focus()}else if(!o.shiftKey&&t===a){o.preventDefault();s.focus()}}get resolvedWidth(){if(this.modalWidth==="sm"||this.modalWidth==="md"||this.modalWidth==="lg"){return u[this.modalWidth]}return this.modalWidth}get closeAnimationMs(){return m(h.motionShort3,h.animationDurationShort3)}finishClose(){if(!this.dialogEl?.open)return;this.dialogEl.close();this.closing=false;this.clearCloseTimer();this.previousFocus?.focus?.();this.previousFocus=null;this.dsAfterClose.emit()}render(){return a(t,{key:"56bc00f2c8d696808659836bcb2da5f8a26ecbc2"},a("dialog",{key:"1a4d78b08c8725b1192e16cee429afa170e7c560",ref:o=>{this.dialogEl=o??null},class:{"modal-dialog":true,"modal-dialog--closing":this.closing},"aria-labelledby":this.titleId,"aria-describedby":this.ariaDescribedby,onCancel:o=>this.handleCancel(o),onPointerDown:o=>this.handleBackdropPointerDown(o),onKeyDown:o=>this.handleKeyDown(o),style:{width:`min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`}},a("div",{key:"bca5aa346244215c6893315e63c3b257352a3773",class:"modal-header"},a("ds-text",{key:"b2bf256a260b1f5d838e37b0d9c1c786dca15491",class:"modal-heading",as:"h2",variant:"text-title-medium",emphasis:true,color:"primary",lineTruncation:1,textId:this.titleId},this.heading),a("ds-button-unfilled",{key:"01ec46cca5d25210dffd26bf48ff581835d7e5b0",class:"modal-close",variant:"icon",icon:"Cross",size:"md","aria-label":this.closeAriaLabel,activeFill:false,hasBorder:false,onDsClick:o=>this.requestClose("close-button",o.detail)})),a("div",{key:"27dce6c6f20a77699a0de593eab943d55a9eadbb",class:"modal-content"},a("slot",{key:"b3f6417f6ae0fd9983ce62d88cbcf9280c84d89f"})),a("div",{key:"34cb2f604fa1ceb843d14d9c79d31e15161b8070",class:{"modal-footer":true,"modal-footer--empty":!this.hasFooter}},a("slot",{key:"b4c18098eaed19a05de180e11197731955d98ad6",name:"footer",onSlotchange:o=>this.updateFooterPresence(o.currentTarget)}))))}get el(){return this}static get watchers(){return{open:[{onOpenChange:0}]}}static get style(){return f()}},[262,"ds-modal",{open:[1028],heading:[1],closeAriaLabel:[1,"close-aria-label"],modalWidth:[1,"modal-width"],ariaDescribedby:[1,"aria-describedby"],closing:[32],hasFooter:[32]},undefined,{open:[{onOpenChange:0}]}]);function y(){if(typeof customElements==="undefined"){return}const o=["ds-modal","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];o.forEach((o=>{switch(o){case"ds-modal":if(!customElements.get(i(o))){customElements.define(i(o),g)}break;case"ds-badge":if(!customElements.get(i(o))){d()}break;case"ds-button-unfilled":if(!customElements.get(i(o))){n()}break;case"ds-icon":if(!customElements.get(i(o))){r()}break;case"ds-loader":if(!customElements.get(i(o))){l()}break;case"ds-text":if(!customElements.get(i(o))){c()}break}}))}y();const v=g;const k=y;export{v as DsModal,k as defineCustomElement};
 //# sourceMappingURL=ds-modal.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["modalCss","WIDTH_MAP","sm","md","lg","FOCUSABLE_SEL","join","modalIdCounter","activeModalStack","modalInertState","WeakMap","makeInert","element","state","get","count","set","wasInert","inert","releaseInert","delete","Modal","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","modalWidth","shouldRender","closing","instanceId","titleId","subtitleId","previousFocus","escapeHandler","tabHandler","closeTimer","inertedElements","componentDidLoad","onOpenChange","disconnectedCallback","teardownListeners","deactivateModal","isOpen","document","activeElement","activateModal","requestAnimationFrame","focusFirst","setupListeners","closeAnimationMs","finishClose","setTimeout","dialog","el","querySelector","focusables","getFocusables","focus","root","Array","from","querySelectorAll","filter","hasAttribute","getAttribute","e","key","isTopModal","preventDefault","close","length","first","last","active","shiftKey","contains","addEventListener","removeEventListener","clearTimeout","dsClose","emit","handleBackdropMouseDown","target","currentTarget","includes","push","branch","parent","parentElement","sibling","children","body","stackIndex","lastIndexOf","splice","resolvedWidth","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","render","hidden","h","Host","style","display","class","onMouseDown","position","inset","zIndex","alignItems","justifyContent","padding","role","subtitle","undefined","tabIndex","width","as","variant","textId","heading","color","wrap","name"],"sources":["src/wc/components/Modal/Modal.css?tag=ds-modal&encapsulation=scoped","src/wc/components/Modal/Modal.tsx"],"sourcesContent":[".modal-backdrop {\n  background-color: var(--color-background-shade);\n  backdrop-filter: blur(var(--effect-blur-sm));\n  -webkit-backdrop-filter: blur(var(--effect-blur-sm));\n  animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n  box-sizing: border-box;\n}\n\n.modal-backdrop--closing {\n  animation: modalBackdropOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalBackdropIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes modalBackdropOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n.modal-dialog {\n  display: flex;\n  flex-direction: column;\n  max-height: calc(100vh - 2 * var(--dimension-space-200));\n  overflow: hidden;\n  background-color: var(--color-background-primary);\n  border-radius: var(--dimension-radius-300);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  animation: modalDialogIn var(--effect-motion-short-2) forwards;\n  outline: none;\n  box-sizing: border-box;\n}\n\n.modal-backdrop--closing .modal-dialog {\n  animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalDialogIn {\n  from { opacity: 0; transform: scale(0.97) translateY(4px); }\n  to   { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n@keyframes modalDialogOut {\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to   { opacity: 0; transform: scale(0.97) translateY(4px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .modal-backdrop,\n  .modal-dialog {\n    animation: none;\n    transform: none;\n  }\n\n  .modal-backdrop {\n    opacity: 1;\n  }\n\n  .modal-backdrop--closing,\n  .modal-backdrop--closing .modal-dialog {\n    opacity: 0;\n  }\n}\n\n.modal-header {\n  padding: var(--dimension-space-200) var(--dimension-space-200) var(--dimension-space-100);\n  flex-shrink: 0;\n}\n\n.modal-subtitle {\n  margin-top: var(--dimension-space-100);\n}\n\n.modal-body {\n  padding: var(--dimension-space-100) var(--dimension-space-200);\n  overflow-y: auto;\n  flex: 1;\n}\n\n.modal-footer {\n  padding: var(--dimension-space-100) var(--dimension-space-200) var(--dimension-space-200);\n  flex-shrink: 0;\n}\n\n.modal-footer:empty { display: none; }\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\n\nconst WIDTH_MAP: Record<ModalWidth, string> = {\n  sm: 'var(--dimension-modal-width-sm)',\n  md: 'var(--dimension-modal-width-md)',\n  lg: 'var(--dimension-modal-width-lg)',\n};\n\nconst FOCUSABLE_SEL = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'iframe',\n  '[contenteditable=\"true\"]',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet modalIdCounter = 0;\nconst activeModalStack: object[] = [];\nconst modalInertState = new WeakMap<HTMLElement, { count: number; wasInert: boolean }>();\n\nfunction makeInert(element: HTMLElement) {\n  const state = modalInertState.get(element);\n  if (state) {\n    state.count += 1;\n    return;\n  }\n  modalInertState.set(element, { count: 1, wasInert: element.inert });\n  element.inert = true;\n}\n\nfunction releaseInert(element: HTMLElement) {\n  const state = modalInertState.get(element);\n  if (!state) return;\n  state.count -= 1;\n  if (state.count > 0) return;\n  element.inert = state.wasInert;\n  modalInertState.delete(element);\n}\n\n@Component({\n  tag: 'ds-modal',\n  styleUrl: 'Modal.css',\n  scoped: true,\n})\nexport class Modal {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() heading!: string;\n  @Prop() subtitle: string | undefined;\n  @Prop() modalWidth: ModalWidth | string = 'md';\n\n  @State() private shouldRender: boolean = false;\n  @State() private closing: boolean = false;\n\n  @Event() dsClose!: EventEmitter<void>;\n\n  private instanceId = ++modalIdCounter;\n  private titleId = `ds-modal-title-${modalIdCounter}`;\n  private subtitleId = `ds-modal-subtitle-${modalIdCounter}`;\n  private previousFocus: HTMLElement | null = null;\n  private escapeHandler: ((e: KeyboardEvent) => void) | null = null;\n  private tabHandler: ((e: KeyboardEvent) => void) | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n  private inertedElements: HTMLElement[] = [];\n\n  componentDidLoad() {\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.teardownListeners();\n    this.deactivateModal();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.teardownListeners();\n      this.shouldRender = true;\n      this.closing = false;\n      this.previousFocus = document.activeElement as HTMLElement | null;\n      this.activateModal();\n      requestAnimationFrame(() => {\n        this.focusFirst();\n        this.setupListeners();\n      });\n    } else if (this.shouldRender) {\n      this.closing = true;\n      const closeAnimationMs = this.closeAnimationMs;\n      if (closeAnimationMs <= 0) {\n        this.finishClose();\n        return;\n      }\n      this.closeTimer = setTimeout(() => {\n        this.closeTimer = null;\n        this.finishClose();\n      }, closeAnimationMs);\n    }\n  }\n\n  private focusFirst() {\n    const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n    if (!dialog) return;\n    const focusables = this.getFocusables(dialog);\n    (focusables[0] ?? dialog).focus();\n  }\n\n  private getFocusables(root: HTMLElement): HTMLElement[] {\n    return Array.from(root.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)).filter(\n      el => !el.hasAttribute('disabled') && el.getAttribute('aria-hidden') !== 'true'\n    );\n  }\n\n  private setupListeners() {\n    this.escapeHandler = (e: KeyboardEvent) => {\n      if (e.key === 'Escape' && this.isTopModal) { e.preventDefault(); this.close(); }\n    };\n\n    this.tabHandler = (e: KeyboardEvent) => {\n      if (e.key !== 'Tab' || !this.isTopModal) return;\n      const dialog = this.el.querySelector('.modal-dialog') as HTMLElement | null;\n      if (!dialog) return;\n      const focusables = this.getFocusables(dialog);\n      if (!focusables.length) { e.preventDefault(); dialog.focus(); return; }\n      const first = focusables[0];\n      const last = focusables[focusables.length - 1];\n      const active = document.activeElement;\n      if (e.shiftKey) {\n        if (active === first || active === dialog || !dialog.contains(active)) {\n          e.preventDefault(); last.focus();\n        }\n      } else {\n        if (active === last || !dialog.contains(active)) {\n          e.preventDefault(); first.focus();\n        }\n      }\n    };\n\n    document.addEventListener('keydown', this.escapeHandler);\n    document.addEventListener('keydown', this.tabHandler);\n  }\n\n  private teardownListeners() {\n    if (this.escapeHandler) {\n      document.removeEventListener('keydown', this.escapeHandler);\n      this.escapeHandler = null;\n    }\n    if (this.tabHandler) {\n      document.removeEventListener('keydown', this.tabHandler);\n      this.tabHandler = null;\n    }\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private close() {\n    if (!this.open || this.closing || !this.isTopModal) return;\n    this.dsClose.emit();\n    this.open = false;\n  }\n\n  private handleBackdropMouseDown(e: MouseEvent) {\n    if (e.target === e.currentTarget && this.isTopModal) this.close();\n  }\n\n  private get isTopModal(): boolean {\n    return activeModalStack[activeModalStack.length - 1] === this;\n  }\n\n  /** Inert every sibling branch outside the modal without assuming it is a body child. */\n  private activateModal() {\n    if (!activeModalStack.includes(this)) activeModalStack.push(this);\n    if (this.inertedElements.length) return;\n\n    let branch: HTMLElement = this.el;\n    let parent = branch.parentElement;\n    while (parent) {\n      for (const sibling of Array.from(parent.children)) {\n        if (sibling === branch || !(sibling instanceof HTMLElement)) continue;\n        makeInert(sibling);\n        this.inertedElements.push(sibling);\n      }\n      if (parent === document.body) break;\n      branch = parent;\n      parent = parent.parentElement;\n    }\n  }\n\n  private deactivateModal() {\n    const stackIndex = activeModalStack.lastIndexOf(this);\n    if (stackIndex >= 0) activeModalStack.splice(stackIndex, 1);\n    for (const element of this.inertedElements) releaseInert(element);\n    this.inertedElements = [];\n  }\n\n  private get resolvedWidth(): string {\n    if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {\n      return WIDTH_MAP[this.modalWidth];\n    }\n    return this.modalWidth as string;\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private finishClose() {\n    this.shouldRender = false;\n    this.closing = false;\n    this.teardownListeners();\n    this.deactivateModal();\n    this.previousFocus?.focus?.();\n    this.previousFocus = null;\n  }\n\n  render() {\n    // Always render slots so scoped-mode slot distribution doesn't leak content.\n    // The backdrop is hidden via CSS when not active.\n    const hidden = !this.shouldRender && !this.closing;\n\n    return (\n      <Host style={{ display: 'contents' }}>\n        <div\n          class={{ 'modal-backdrop': true, 'modal-backdrop--closing': this.closing, 'modal-backdrop--hidden': hidden }}\n          onMouseDown={(e: MouseEvent) => this.handleBackdropMouseDown(e)}\n          style={{ position: 'fixed', inset: '0', zIndex: '9999', display: hidden ? 'none' : 'flex', alignItems: 'center', justifyContent: 'center', padding: 'var(--dimension-space-200)' }}\n        >\n          <div\n            class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n            role=\"dialog\"\n            aria-modal=\"true\"\n            aria-labelledby={this.titleId}\n            aria-describedby={this.subtitle ? this.subtitleId : undefined}\n            tabIndex={-1}\n            style={{ width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))` }}\n          >\n            <div class=\"modal-header\">\n              <ds-text\n                as=\"h2\"\n                variant=\"text-title-small\"\n                textId={this.titleId}\n              >\n                {this.heading}\n              </ds-text>\n              {this.subtitle && (\n                <ds-text\n                  class=\"modal-subtitle\"\n                  as=\"div\"\n                  variant=\"text-body-medium\"\n                  color=\"secondary\"\n                  wrap=\"balance\"\n                  textId={this.subtitleId}\n                >\n                  {this.subtitle}\n                </ds-text>\n              )}\n            </div>\n            <div class=\"modal-body\">\n              <slot />\n            </div>\n            <div class=\"modal-footer\">\n              <slot name=\"footer\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}
+{"version":3,"names":["modalCss","WIDTH_MAP","sm","md","lg","FOCUSABLE_SEL","join","modalIdCounter","Modal","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","open","closeAriaLabel","modalWidth","closing","hasFooter","titleId","dialogEl","previousFocus","closeTimer","componentDidLoad","updateFooterPresence","onOpenChange","disconnectedCallback","clearCloseTimer","close","isOpen","alreadyOpen","document","activeElement","showModal","requestAnimationFrame","focusClose","closeAnimationMs","finishClose","setTimeout","el","querySelector","setFocus","clearTimeout","requestClose","reason","originalEvent","dsClose","emit","slot","assignedNodes","flatten","some","node","nodeType","Node","TEXT_NODE","textContent","trim","handleCancel","event","preventDefault","handleBackdropPointerDown","target","handleKeyDown","key","focusables","Array","from","querySelectorAll","filter","element","hasAttribute","getAttribute","length","focus","first","last","active","shiftKey","resolvedWidth","resolveMotionTimeMs","TOKEN_DEFAULTS","motionShort3","animationDurationShort3","dsAfterClose","render","h","Host","ref","class","ariaDescribedby","onCancel","onPointerDown","onKeyDown","style","width","as","variant","emphasis","color","lineTruncation","textId","heading","icon","size","activeFill","hasBorder","onDsClick","detail","name","onSlotchange","currentTarget"],"sources":["src/wc/components/Modal/Modal.css?tag=ds-modal&encapsulation=scoped","src/wc/components/Modal/Modal.tsx"],"sourcesContent":[":host {\n  display: contents;\n}\n\n.modal-dialog {\n  display: none;\n  flex-direction: column;\n  max-width: none;\n  max-height: calc(100vh - 2 * var(--dimension-space-200));\n  margin: auto;\n  padding: 0;\n  overflow: hidden;\n  color: var(--color-foreground-primary);\n  background-color: var(--color-background-primary);\n  border: 0;\n  border-radius: var(--dimension-radius-050);\n  box-shadow: var(--effect-elevation-elevated-floating);\n  outline: none;\n  box-sizing: border-box;\n}\n\n.modal-dialog[open] {\n  display: flex;\n  animation: modalDialogIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog::backdrop {\n  background-color: var(--color-background-shade);\n  animation: modalBackdropIn var(--effect-motion-short-2) forwards;\n}\n\n.modal-dialog--closing {\n  animation: modalDialogOut var(--effect-motion-short-3) forwards;\n}\n\n.modal-dialog--closing::backdrop {\n  animation: modalBackdropOut var(--effect-motion-short-3) forwards;\n}\n\n@keyframes modalBackdropIn {\n  from { opacity: 0; }\n  to   { opacity: 1; }\n}\n\n@keyframes modalBackdropOut {\n  from { opacity: 1; }\n  to   { opacity: 0; }\n}\n\n@keyframes modalDialogIn {\n  from { opacity: 0; transform: scale(0.97) translateY(4px); }\n  to   { opacity: 1; transform: scale(1) translateY(0); }\n}\n\n@keyframes modalDialogOut {\n  from { opacity: 1; transform: scale(1) translateY(0); }\n  to   { opacity: 0; transform: scale(0.97) translateY(4px); }\n}\n\n@media (prefers-reduced-motion: reduce) {\n  .modal-dialog[open],\n  .modal-dialog--closing {\n    animation: none;\n    transform: none;\n  }\n\n  .modal-dialog::backdrop {\n    animation: none;\n    opacity: 1;\n  }\n\n  .modal-dialog--closing,\n  .modal-dialog--closing::backdrop {\n    opacity: 0;\n  }\n}\n\n.modal-header {\n  display: flex;\n  align-items: center;\n  gap: var(--dimension-space-050);\n  height: var(--dimension-size-800);\n  padding: var(--dimension-space-200);\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  border-bottom: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n  color: var(--color-foreground-primary);\n}\n\nds-text.modal-heading {\n  flex: 1 1 0;\n  width: auto;\n  min-width: 0;\n  text-align: left;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.modal-close {\n  flex: 0 0 auto;\n}\n\n.modal-content {\n  min-height: 0;\n  padding: var(--dimension-space-200);\n  overflow-y: auto;\n  flex: 1 1 auto;\n  box-sizing: border-box;\n}\n\n.modal-footer {\n  display: flex;\n  align-items: center;\n  justify-content: flex-start;\n  gap: var(--dimension-space-100);\n  height: var(--dimension-size-800);\n  padding: var(--dimension-space-200);\n  flex: 0 0 auto;\n  box-sizing: border-box;\n  border-top: var(--dimension-stroke-width-012) solid var(--color-border-tertiary);\n}\n\n.modal-footer--empty {\n  display: none;\n}\n\n.modal-footer slot {\n  display: contents;\n}\n","import { Component, Prop, State, Event, EventEmitter, Element, Watch, h, Host } from '@stencil/core';\nimport { resolveMotionTimeMs, TOKEN_DEFAULTS } from '../../utils';\n\nexport type ModalWidth = 'sm' | 'md' | 'lg';\nexport type ModalCloseReason = 'close-button' | 'escape' | 'backdrop';\n\nexport interface ModalCloseDetail {\n  reason: ModalCloseReason;\n  originalEvent: Event;\n}\n\nconst WIDTH_MAP: Record<ModalWidth, string> = {\n  sm: 'var(--dimension-modal-width-sm)',\n  md: 'var(--dimension-modal-width-md)',\n  lg: 'var(--dimension-modal-width-lg)',\n};\n\nconst FOCUSABLE_SEL = [\n  'a[href]',\n  'area[href]',\n  'button:not([disabled])',\n  'input:not([disabled]):not([type=\"hidden\"])',\n  'select:not([disabled])',\n  'textarea:not([disabled])',\n  'iframe',\n  '[contenteditable=\"true\"]',\n  '[tabindex]:not([tabindex=\"-1\"])',\n].join(',');\n\nlet modalIdCounter = 0;\n\n@Component({\n  tag: 'ds-modal',\n  styleUrl: 'Modal.css',\n  scoped: true,\n})\nexport class Modal {\n  @Element() el!: HTMLElement;\n\n  @Prop({ mutable: true }) open: boolean = false;\n  @Prop() heading!: string;\n  @Prop() closeAriaLabel: string = 'Close';\n  @Prop() modalWidth: ModalWidth | string = 'md';\n  /** Optional id reference for explanatory content in the default slot. */\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @State() private closing: boolean = false;\n  @State() private hasFooter: boolean = false;\n\n  /** Emitted when an internal dismissal control requests that the modal close. */\n  @Event() dsClose!: EventEmitter<ModalCloseDetail>;\n  /** Emitted after exit motion completes, the top layer closes, and focus is restored. */\n  @Event() dsAfterClose!: EventEmitter<void>;\n\n  private titleId = `ds-modal-title-${++modalIdCounter}`;\n  private dialogEl: HTMLDialogElement | null = null;\n  private previousFocus: HTMLElement | null = null;\n  private closeTimer: ReturnType<typeof setTimeout> | null = null;\n\n  componentDidLoad() {\n    this.updateFooterPresence();\n    if (this.open) this.onOpenChange(true);\n  }\n\n  disconnectedCallback() {\n    this.clearCloseTimer();\n    if (this.dialogEl?.open) this.dialogEl.close();\n  }\n\n  @Watch('open')\n  onOpenChange(isOpen: boolean) {\n    if (isOpen) {\n      this.clearCloseTimer();\n      const alreadyOpen = !!this.dialogEl?.open;\n      this.closing = false;\n      if (!this.dialogEl || alreadyOpen) return;\n      this.previousFocus = document.activeElement as HTMLElement | null;\n      this.dialogEl.showModal();\n      requestAnimationFrame(() => {\n        if (this.open && this.dialogEl?.open) this.focusClose();\n      });\n    } else if (this.dialogEl?.open) {\n      this.closing = true;\n      const closeAnimationMs = this.closeAnimationMs;\n      if (closeAnimationMs <= 0) {\n        this.finishClose();\n        return;\n      }\n      this.closeTimer = setTimeout(() => {\n        this.closeTimer = null;\n        this.finishClose();\n      }, closeAnimationMs);\n    }\n  }\n\n  private focusClose() {\n    const close = this.el.querySelector('ds-button-unfilled.modal-close') as\n      | (HTMLElement & { setFocus?: () => Promise<void> })\n      | null;\n    void close?.setFocus?.();\n  }\n\n  private clearCloseTimer() {\n    if (this.closeTimer) {\n      clearTimeout(this.closeTimer);\n      this.closeTimer = null;\n    }\n  }\n\n  private requestClose(reason: ModalCloseReason, originalEvent: Event) {\n    if (!this.open || this.closing || !this.dialogEl?.open) return;\n    this.dsClose.emit({ reason, originalEvent });\n    this.open = false;\n  }\n\n  private updateFooterPresence(slot?: HTMLSlotElement) {\n    const assignedNodes = slot?.assignedNodes({ flatten: true }) ?? [];\n    this.hasFooter =\n      assignedNodes.some(node => node.nodeType !== Node.TEXT_NODE || !!node.textContent?.trim()) ||\n      this.el.querySelector('[slot=\"footer\"]') !== null;\n  }\n\n  private handleCancel(event: Event) {\n    event.preventDefault();\n    this.requestClose('escape', event);\n  }\n\n  private handleBackdropPointerDown(event: PointerEvent) {\n    if (event.target === this.dialogEl) this.requestClose('backdrop', event);\n  }\n\n  private handleKeyDown(event: KeyboardEvent) {\n    if (event.key !== 'Tab' || !this.dialogEl) return;\n    const focusables = Array.from(\n      this.dialogEl.querySelectorAll<HTMLElement>(FOCUSABLE_SEL)\n    ).filter(element =>\n      !element.hasAttribute('disabled') && element.getAttribute('aria-hidden') !== 'true'\n    );\n    if (!focusables.length) {\n      event.preventDefault();\n      this.dialogEl.focus();\n      return;\n    }\n    const first = focusables[0];\n    const last = focusables[focusables.length - 1];\n    const active = document.activeElement;\n    if (event.shiftKey && (active === first || active === this.dialogEl)) {\n      event.preventDefault();\n      last.focus();\n    } else if (!event.shiftKey && active === last) {\n      event.preventDefault();\n      first.focus();\n    }\n  }\n\n  private get resolvedWidth(): string {\n    if (this.modalWidth === 'sm' || this.modalWidth === 'md' || this.modalWidth === 'lg') {\n      return WIDTH_MAP[this.modalWidth];\n    }\n    return this.modalWidth as string;\n  }\n\n  private get closeAnimationMs(): number {\n    return resolveMotionTimeMs(TOKEN_DEFAULTS.motionShort3, TOKEN_DEFAULTS.animationDurationShort3);\n  }\n\n  private finishClose() {\n    if (!this.dialogEl?.open) return;\n    this.dialogEl.close();\n    this.closing = false;\n    this.clearCloseTimer();\n    this.previousFocus?.focus?.();\n    this.previousFocus = null;\n    this.dsAfterClose.emit();\n  }\n\n  render() {\n    return (\n      <Host>\n        <dialog\n          ref={(element?: HTMLDialogElement) => {\n            this.dialogEl = element ?? null;\n          }}\n          class={{ 'modal-dialog': true, 'modal-dialog--closing': this.closing }}\n          aria-labelledby={this.titleId}\n          aria-describedby={this.ariaDescribedby}\n          onCancel={(event: Event) => this.handleCancel(event)}\n          onPointerDown={(event: PointerEvent) => this.handleBackdropPointerDown(event)}\n          onKeyDown={(event: KeyboardEvent) => this.handleKeyDown(event)}\n          style={{\n            width: `min(${this.resolvedWidth}, calc(100vw - 2 * var(--dimension-space-200)))`,\n          }}\n        >\n          <div class=\"modal-header\">\n            <ds-text\n              class=\"modal-heading\"\n              as=\"h2\"\n              variant=\"text-title-medium\"\n              emphasis\n              color=\"primary\"\n              lineTruncation={1}\n              textId={this.titleId}\n            >\n              {this.heading}\n            </ds-text>\n            <ds-button-unfilled\n              class=\"modal-close\"\n              variant=\"icon\"\n              icon=\"Cross\"\n              size=\"md\"\n              aria-label={this.closeAriaLabel}\n              activeFill={false}\n              hasBorder={false}\n              onDsClick={(event: CustomEvent<MouseEvent>) =>\n                this.requestClose('close-button', event.detail)\n              }\n            />\n          </div>\n          <div class=\"modal-content\">\n            <slot />\n          </div>\n          <div\n            class={{\n              'modal-footer': true,\n              'modal-footer--empty': !this.hasFooter,\n            }}\n          >\n            <slot\n              name=\"footer\"\n              onSlotchange={(event: Event) =>\n                this.updateFooterPresence(event.currentTarget as HTMLSlotElement)\n              }\n            />\n          </div>\n        </dialog>\n      </Host>\n    );\n  }\n}\n"],"mappings":"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","ignoreList":[]}