@ds-mo/ui 12.1.0 → 12.2.0

package/dist/components/ds-conversation-list-item.js

@@ -1,2 +1,2 @@
-import{p as i,H as t,c as s,h as e,a as o,t as n}from"./index.js";import{d as r}from"./p-DxeHimqk.js";import{d as c}from"./p-Cpr3K41-.js";import{d as a}from"./p-Bs6SS34m.js";const d=()=>`.sc-ds-conversation-list-item-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-conversation-list-item-h:focus-visible,.ds-focus-ring.sc-ds-conversation-list-item:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-conversation-list-item-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-conversation-list-item{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-conversation-list-item-h:focus-visible,.ds-focus-ring-inset.sc-ds-conversation-list-item:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-conversation-list-item-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-conversation-list-item:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-conversation-list-item-h,.ds-interaction-fill.sc-ds-conversation-list-item{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-conversation-list-item-h::before,.ds-interaction-fill.sc-ds-conversation-list-item::before,.ds-interaction-fill.sc-ds-conversation-list-item-h::after,.ds-interaction-fill.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-conversation-list-item-h::before,.ds-interaction-fill.sc-ds-conversation-list-item::before{z-index:1}.ds-interaction-fill.sc-ds-conversation-list-item-h::after,.ds-interaction-fill.sc-ds-conversation-list-item::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-conversation-list-item-h,.ds-interaction-fill--bordered.sc-ds-conversation-list-item{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-conversation-list-item-h::before,.ds-interaction-fill--selected.sc-ds-conversation-list-item::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-conversation-list-item-h,.ds-interaction-fill--selected.sc-ds-conversation-list-item{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-conversation-list-item-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-conversation-list-item:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-conversation-list-item-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-conversation-list-item:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-conversation-list-item-h>.ds-interaction-fill__content.sc-ds-conversation-list-item,.ds-interaction-fill.sc-ds-conversation-list-item>.ds-interaction-fill__content.sc-ds-conversation-list-item,.ds-interaction-fill__content.sc-ds-conversation-list-item{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-faint.sc-ds-conversation-list-item{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-medium.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-bold.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-strong.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-translucent.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-inverted.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-media.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-always-dark.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-navigation.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-conversation-list-item-h,.ds-control-inactive.sc-ds-conversation-list-item{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item,.ds-control--sm.sc-ds-conversation-list-item-h,.ds-control--sm.sc-ds-conversation-list-item,.ds-control--xs.sc-ds-conversation-list-item-h,.ds-control--xs.sc-ds-conversation-list-item{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-conversation-list-item-h,.ds-control--sm.sc-ds-conversation-list-item{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-conversation-list-item-h,.ds-control--xs.sc-ds-conversation-list-item{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-choice-popup.sc-ds-conversation-list-item{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min(     var(--dimension-panel-width-lg),     calc(100vw - var(--dimension-space-200))   );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-conversation-list-item{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-conversation-list-item{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-conversation-list-item{opacity:0}}.ds-choice-list.sc-ds-conversation-list-item{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section.sc-ds-conversation-list-item{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.ds-choice-section--divided.sc-ds-conversation-list-item{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-conversation-list-item{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-conversation-list-item{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-conversation-list-item:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-conversation-list-item{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-conversation-list-item,.ds-choice-item__subtext.sc-ds-conversation-list-item,ds-text.ds-choice-item__subtext.sc-ds-conversation-list-item{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}ds-text.ds-choice-item__label.sc-ds-conversation-list-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-conversation-list-item{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-conversation-list-item,.ds-choice-item__suffix.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-conversation-list-item,.ds-choice-loading.sc-ds-conversation-list-item{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-conversation-list-item{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-conversation-list-item::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-conversation-list-item{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--dimension-size-400)}.ds-choice-footer__summary.sc-ds-conversation-list-item,.ds-choice-footer__clear.sc-ds-conversation-list-item ds-text.sc-ds-conversation-list-item{padding-inline:calc(     var(--dimension-space-050) +       var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-choice-footer__clear.sc-ds-conversation-list-item{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:pointer}.ds-choice-footer__clear.sc-ds-conversation-list-item:hover{text-decoration:underline}.sc-ds-conversation-list-item-h{display:block;box-sizing:border-box;-webkit-user-select:none;user-select:none}.conversation-list-item__row.sc-ds-conversation-list-item{position:relative;isolation:isolate}.conversation-list-item.sc-ds-conversation-list-item{color:var(--color-foreground-primary)}.conversation-list-item--error.sc-ds-conversation-list-item{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-bold-negative)}.conversation-list-item__leading.sc-ds-conversation-list-item:empty,.conversation-list-item__trailing.sc-ds-conversation-list-item:empty{display:none}.conversation-list-item__leading.sc-ds-conversation-list-item,.conversation-list-item__trailing.sc-ds-conversation-list-item,.conversation-list-item__preview-row.sc-ds-conversation-list-item{display:flex;align-items:center}.conversation-list-item__leading.sc-ds-conversation-list-item{align-self:center;width:auto;height:auto;margin-inline-start:var(--ds-control-label-inset, var(--dimension-space-025));margin-inline-end:var(--dimension-space-050)}.conversation-list-item__content.sc-ds-conversation-list-item{min-width:0}.conversation-list-item__title-row.sc-ds-conversation-list-item{display:flex;align-items:center;min-width:0}.conversation-list-item__preview-row.sc-ds-conversation-list-item{min-width:0;gap:var(--dimension-space-100)}ds-text.conversation-list-item__title.sc-ds-conversation-list-item,ds-text.conversation-list-item__preview.sc-ds-conversation-list-item{display:block;min-width:0}ds-text.conversation-list-item__title.sc-ds-conversation-list-item{flex:1}.conversation-list-item__unread.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-size-200);margin-inline-end:var(--dimension-space-025)}ds-text.conversation-list-item__preview.ds-choice-item__subtext.sc-ds-conversation-list-item{-webkit-line-clamp:1}.conversation-list-item__actions.sc-ds-conversation-list-item{position:absolute;top:50%;right: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));opacity:0;pointer-events:none;transform:translateY(-50%)}.conversation-list-item__row.sc-ds-conversation-list-item:hover .conversation-list-item__actions.sc-ds-conversation-list-item,.conversation-list-item__row.sc-ds-conversation-list-item:has(:focus-visible) .conversation-list-item__actions.sc-ds-conversation-list-item,.conversation-list-item--actions-open.sc-ds-conversation-list-item-h .conversation-list-item__actions.sc-ds-conversation-list-item{opacity:1;pointer-events:auto}.conversation-list-item__row.sc-ds-conversation-list-item:hover .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-hover)}.conversation-list-item--actions-open.sc-ds-conversation-list-item-h .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-hover)}.conversation-list-item__row.sc-ds-conversation-list-item:active .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-pressed)}@media (hover: none){.conversation-list-item__actions.sc-ds-conversation-list-item{opacity:1;pointer-events:auto}.conversation-list-item--has-actions.sc-ds-conversation-list-item-h .conversation-list-item__title-row.sc-ds-conversation-list-item{padding-inline-end:var(--dimension-size-400)}}.conversation-list-item__time.sc-ds-conversation-list-item{position:absolute;width:var(--dimension-size-050);height:var(--dimension-size-050);overflow:hidden;clip-path:inset(50%);white-space:nowrap}`;const l=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.dsSelect=s(this,"dsSelect");this.conversationId="";this.conversationTitle="";this.preview="";this.updatedAt="";this.selected=false;this.state="default";this.statusLabel="";this.unreadCount=0;this.actionsOpen=false;this.handleClick=()=>this.dsSelect.emit({id:this.conversationId});this.handleActionsSlotChange=i=>{const t=i.target;this.el.classList.toggle("conversation-list-item--has-actions",t.assignedElements({flatten:true}).length>0)}}render(){const i=this.state==="busy";const t=i&&this.statusLabel?this.statusLabel:this.preview;const s=[this.conversationTitle,t,this.unreadCount>0?`${this.unreadCount} unread`:""].filter(Boolean).join(". ");return e(o,{key:"a68f7e8bcc6b5acb88892a3f72b6496c240fdbf5",role:"listitem",class:{"conversation-list-item--actions-open":this.actionsOpen}},e("div",{key:"a771c4593f939fac922114f16b2682a3a3d96cf1",class:"conversation-list-item__row"},e("button",{key:"98588e31cf03cd26f0cb8fedcfb213a9feaaed1d",type:"button",class:{"conversation-list-item":true,"ds-choice-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.selected,"conversation-list-item--error":this.state==="error"},"aria-label":s,"aria-current":this.selected?"true":undefined,"aria-busy":i?"true":undefined,onClick:this.handleClick},e("span",{key:"f67db69b44350dadf550b8b75ae680dd10b4dd9c",class:"conversation-list-item__leading ds-choice-item__icon ds-interaction-fill__content"},e("slot",{key:"da0d7fb02e3b8a7d73096ba5bbea11058098f07b",name:"leading"})),e("span",{key:"f3a275f48e2aac7f9dc706cb91a1c52e1fe5eb30",class:"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content"},e("span",{key:"dc884d52f74f4a48b7a7ea88cc294a67124ab457",class:"conversation-list-item__title-row"},e("ds-text",{key:"2a6db1ad437d744a1a52a8166fa2910425d6fa3d",class:"conversation-list-item__title ds-choice-item__label",as:"span",variant:"text-body-medium",emphasis:this.unreadCount>0,color:this.unreadCount>0?"primary":"secondary",lineTruncation:1},this.conversationTitle),this.unreadCount>0?e("span",{class:"conversation-list-item__unread"},e("ds-badge",{variant:"dot",surface:"secondary"})):null),e("span",{key:"290d193d0a15be8391039dc3bc3c5f513cc1cd22",class:"conversation-list-item__preview-row"},i?e("ds-loader",{size:"sm",color:"secondary"}):null,e("ds-text",{key:"a6970033def580c181eb7fd0391dfab5b8d20ffd",class:"conversation-list-item__preview ds-choice-item__subtext",as:"span",variant:"text-body-small",color:this.state==="error"?"negative":"secondary",lineTruncation:1},t)),this.updatedAt?e("time",{class:"conversation-list-item__time",dateTime:this.updatedAt},this.updatedAt):null),e("span",{key:"0290f64363e1e942bb5a61f7b42f2546b8c15d6e",class:"conversation-list-item__trailing ds-interaction-fill__content"},e("slot",{key:"da88b1ac0d73f08d337d28cdda3e4d891e83ebbd",name:"trailing"}))),e("div",{key:"b8f42854b3757b12938ba4c9785ea36b7090a124",class:"conversation-list-item__actions"},e("slot",{key:"fcb3b96a61c6a30fe5d299932a4f10275cc7dc2b",name:"actions",onSlotchange:this.handleActionsSlotChange}))))}get el(){return this}static get style(){return d()}},[262,"ds-conversation-list-item",{conversationId:[1,"conversation-id"],conversationTitle:[1,"conversation-title"],preview:[1],updatedAt:[1,"updated-at"],selected:[4],state:[1],statusLabel:[1,"status-label"],unreadCount:[2,"unread-count"],actionsOpen:[516,"actions-open"]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-conversation-list-item","ds-badge","ds-loader","ds-text"];i.forEach((i=>{switch(i){case"ds-conversation-list-item":if(!customElements.get(n(i))){customElements.define(n(i),l)}break;case"ds-badge":if(!customElements.get(n(i))){r()}break;case"ds-loader":if(!customElements.get(n(i))){c()}break;case"ds-text":if(!customElements.get(n(i))){a()}break}}))}v();const m=l;const f=v;export{m as DsConversationListItem,f as defineCustomElement};
+import{p as i,H as t,c as s,h as e,a as o,t as n}from"./index.js";import{d as r}from"./p-DOCKtrS4.js";import{d as c}from"./p-Cpr3K41-.js";import{d as a}from"./p-C0_8K4y7.js";const d=()=>`.sc-ds-conversation-list-item-h{--ds-focus-ring-width:var(--dimension-stroke-width-025, 2px);--ds-focus-ring-offset:var(--dimension-space-025, 2px);--ds-focus-ring-color:var(--color-interaction-focus)}.ds-focus-ring.sc-ds-conversation-list-item-h:focus-visible,.ds-focus-ring.sc-ds-conversation-list-item:focus-visible{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring.ds-focus-ring--visible.sc-ds-conversation-list-item-h,.ds-focus-ring.ds-focus-ring--visible.sc-ds-conversation-list-item{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:var(--ds-focus-ring-offset)}.ds-focus-ring-inset.sc-ds-conversation-list-item-h:focus-visible,.ds-focus-ring-inset.sc-ds-conversation-list-item:focus-visible{outline:none}.ds-focus-ring-inset.sc-ds-conversation-list-item-h:focus-visible::after,.ds-focus-ring-inset.sc-ds-conversation-list-item:focus-visible::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item-h,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item{outline:none}.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item-h::after,.ds-focus-ring-inset.ds-focus-ring--visible.sc-ds-conversation-list-item::after{outline:var(--ds-focus-ring-width) solid var(--ds-focus-ring-color);outline-offset:calc(-1 * var(--ds-focus-ring-width))}.ds-interaction-fill.sc-ds-conversation-list-item-h,.ds-interaction-fill.sc-ds-conversation-list-item{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-conversation-list-item-h::before,.ds-interaction-fill.sc-ds-conversation-list-item::before,.ds-interaction-fill.sc-ds-conversation-list-item-h::after,.ds-interaction-fill.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-conversation-list-item-h::before,.ds-interaction-fill.sc-ds-conversation-list-item::before{z-index:1}.ds-interaction-fill.sc-ds-conversation-list-item-h::after,.ds-interaction-fill.sc-ds-conversation-list-item::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-conversation-list-item-h,.ds-interaction-fill--bordered.sc-ds-conversation-list-item{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-conversation-list-item-h::before,.ds-interaction-fill--selected.sc-ds-conversation-list-item::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-conversation-list-item-h,.ds-interaction-fill--selected.sc-ds-conversation-list-item{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-conversation-list-item-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-conversation-list-item:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-conversation-list-item-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-conversation-list-item:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-conversation-list-item-h>.ds-interaction-fill__content.sc-ds-conversation-list-item,.ds-interaction-fill.sc-ds-conversation-list-item>.ds-interaction-fill__content.sc-ds-conversation-list-item,.ds-interaction-fill__content.sc-ds-conversation-list-item{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-faint.sc-ds-conversation-list-item{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-medium.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-bold.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-strong.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-translucent.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-inverted.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-media.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-always-dark.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-conversation-list-item-h,.ds-interaction-fill--on-navigation.sc-ds-conversation-list-item{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-conversation-list-item-h,.ds-control-inactive.sc-ds-conversation-list-item{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item,.ds-control--sm.sc-ds-conversation-list-item-h,.ds-control--sm.sc-ds-conversation-list-item,.ds-control--xs.sc-ds-conversation-list-item-h,.ds-control--xs.sc-ds-conversation-list-item{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-conversation-list-item-h,.ds-control--md.sc-ds-conversation-list-item{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-conversation-list-item-h,.ds-control--sm.sc-ds-conversation-list-item{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-conversation-list-item-h,.ds-control--xs.sc-ds-conversation-list-item{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-choice-popup.sc-ds-conversation-list-item{box-sizing:border-box;display:flex;flex-direction:column;min-width:var(--dimension-menu-width-xs);max-width:min(     var(--dimension-panel-width-lg),     calc(100vw - var(--dimension-space-200))   );max-height:calc(100vh - var(--dimension-space-200));overflow:hidden;inset:auto;margin:0;padding:0;border:0;background-color:var(--color-background-primary);border-radius:var(--dimension-radius-075);box-shadow:var(--effect-shadow-elevated-floating);animation:dsChoiceFadeIn var(--effect-motion-short-2) forwards;backface-visibility:hidden;will-change:transform;text-align:start}.ds-choice-popup.sc-ds-conversation-list-item::after{content:'';position:absolute;inset:0;border-radius:inherit;pointer-events:none;box-shadow:var(--effect-highlight-elevated-floating)}.ds-choice-popup--closing.sc-ds-conversation-list-item{animation:dsChoiceFadeOut var(--effect-motion-short-2) forwards}@keyframes dsChoiceFadeIn{from{opacity:0;transform:inherit scale(0.97)}to{opacity:1}}@keyframes dsChoiceFadeOut{from{opacity:1}to{opacity:0}}@media (prefers-reduced-motion: reduce){.ds-choice-popup.sc-ds-conversation-list-item{animation:none;opacity:1}.ds-choice-popup--closing.sc-ds-conversation-list-item{opacity:0}}.ds-choice-list.sc-ds-conversation-list-item{display:flex;flex-direction:column;min-height:0;overflow-y:auto;overscroll-behavior:contain}.ds-choice-section.sc-ds-conversation-list-item{display:flex;flex-direction:column;gap:var(--dimension-space-050);padding:var(--dimension-space-050)}.ds-choice-section--divided.sc-ds-conversation-list-item{border-bottom:var(--dimension-stroke-width-015) solid var(--color-border-tertiary)}ds-text.ds-choice-section__header.sc-ds-conversation-list-item{display:flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 calc(     var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   );text-align:start;-webkit-user-select:none;user-select:none}.ds-choice-item.sc-ds-conversation-list-item{display:flex;align-items:center;gap:var(--ds-control-gap, var(--dimension-space-050));width:100%;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));box-sizing:border-box;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));background:transparent;cursor:pointer;-webkit-user-select:none;user-select:none;text-align:left;color:inherit}.ds-choice-item.sc-ds-conversation-list-item:has(.ds-choice-item__subtext){height:auto;min-height:var(--ds-control-height, var(--dimension-size-400));padding-block:var(--ds-control-padding-inline, var(--dimension-space-075));align-items:flex-start}.ds-choice-item__content.sc-ds-conversation-list-item{display:flex;flex:1;flex-direction:column;gap:var(--dimension-space-025);min-width:0}ds-text.ds-choice-item__label.sc-ds-conversation-list-item,.ds-choice-item__subtext.sc-ds-conversation-list-item,ds-text.ds-choice-item__subtext.sc-ds-conversation-list-item{padding:0 var(--ds-control-label-inset, var(--dimension-space-025))}ds-text.ds-choice-item__label.sc-ds-conversation-list-item{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}ds-text.ds-choice-item__subtext.sc-ds-conversation-list-item{display:-webkit-box;overflow:hidden;white-space:normal;-webkit-box-orient:vertical;-webkit-line-clamp:2}.ds-choice-item__icon.sc-ds-conversation-list-item,.ds-choice-item__suffix.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));pointer-events:none}.ds-choice-empty.sc-ds-conversation-list-item,.ds-choice-loading.sc-ds-conversation-list-item{display:flex;align-items:center;justify-content:center;box-sizing:border-box;min-height:var(--dimension-size-600);padding:var(--dimension-space-100)}.ds-choice-footer.sc-ds-conversation-list-item{position:relative;box-sizing:border-box;padding-block:var(--dimension-space-050)}.ds-choice-footer.sc-ds-conversation-list-item::before{content:'';position:absolute;inset:0 0 auto;height:var(--dimension-stroke-width-012);background-color:var(--color-border-tertiary);pointer-events:none}.ds-choice-footer__content.sc-ds-conversation-list-item{display:flex;align-items:center;justify-content:space-between;box-sizing:border-box;height:var(--dimension-size-400)}.ds-choice-footer__summary.sc-ds-conversation-list-item,.ds-choice-footer__clear.sc-ds-conversation-list-item ds-text.sc-ds-conversation-list-item{padding-inline:calc(     var(--dimension-space-050) +       var(--ds-control-padding-inline, var(--dimension-space-075)) +       var(--ds-control-label-inset, var(--dimension-space-025))   )}.ds-choice-footer__clear.sc-ds-conversation-list-item{appearance:none;display:inline-flex;align-items:center;padding:0;border:0;border-radius:var(--dimension-radius-025);background:transparent;color:var(--color-foreground-bold-brand);cursor:pointer}.ds-choice-footer__clear.sc-ds-conversation-list-item:hover{text-decoration:underline}.sc-ds-conversation-list-item-h{display:block;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sc-ds-conversation-list-item-h:hover,.sc-ds-conversation-list-item-h:focus-within,.conversation-list-item--actions-open.sc-ds-conversation-list-item-h{position:relative;z-index:var(--dimension-z-index-floating)}.conversation-list-item__row.sc-ds-conversation-list-item{position:relative;isolation:isolate}.conversation-list-item.sc-ds-conversation-list-item{color:var(--color-foreground-primary)}.conversation-list-item--error.sc-ds-conversation-list-item{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-bold-negative)}.conversation-list-item__leading.sc-ds-conversation-list-item:empty,.conversation-list-item__trailing.sc-ds-conversation-list-item:empty{display:none}.conversation-list-item__leading.sc-ds-conversation-list-item,.conversation-list-item__trailing.sc-ds-conversation-list-item,.conversation-list-item__preview-row.sc-ds-conversation-list-item{display:flex;align-items:center}.conversation-list-item__leading.sc-ds-conversation-list-item{align-self:center;width:auto;height:auto;margin-inline-start:var(--ds-control-label-inset, var(--dimension-space-025));margin-inline-end:var(--dimension-space-050)}.conversation-list-item__content.sc-ds-conversation-list-item{min-width:0}.conversation-list-item__title-row.sc-ds-conversation-list-item{display:flex;align-items:center;min-width:0}.conversation-list-item__preview-row.sc-ds-conversation-list-item{min-width:0;gap:var(--dimension-space-100)}ds-text.conversation-list-item__title.sc-ds-conversation-list-item,ds-text.conversation-list-item__preview.sc-ds-conversation-list-item{display:block;min-width:0}ds-text.conversation-list-item__title.sc-ds-conversation-list-item{flex:1}.conversation-list-item__unread.sc-ds-conversation-list-item{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0;width:var(--dimension-size-200);margin-inline-end:var(--dimension-space-025)}ds-text.conversation-list-item__preview.ds-choice-item__subtext.sc-ds-conversation-list-item{-webkit-line-clamp:1}.conversation-list-item__actions.sc-ds-conversation-list-item{position:absolute;top:50%;right: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));opacity:0;pointer-events:none;transform:translateY(-50%)}.conversation-list-item__row.sc-ds-conversation-list-item:hover .conversation-list-item__actions.sc-ds-conversation-list-item,.conversation-list-item__row.sc-ds-conversation-list-item:has(:focus-visible) .conversation-list-item__actions.sc-ds-conversation-list-item,.conversation-list-item--actions-open.sc-ds-conversation-list-item-h .conversation-list-item__actions.sc-ds-conversation-list-item{opacity:1;pointer-events:auto}.conversation-list-item__row.sc-ds-conversation-list-item:hover .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-hover)}.conversation-list-item--actions-open.sc-ds-conversation-list-item-h .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-hover)}.conversation-list-item__row.sc-ds-conversation-list-item:active .conversation-list-item.sc-ds-conversation-list-item::after{background:var(--ds-interaction-pressed)}@media (hover: none){.conversation-list-item__actions.sc-ds-conversation-list-item{opacity:1;pointer-events:auto}.conversation-list-item--has-actions.sc-ds-conversation-list-item-h .conversation-list-item__title-row.sc-ds-conversation-list-item{padding-inline-end:var(--dimension-size-400)}}.conversation-list-item__time.sc-ds-conversation-list-item{position:absolute;width:var(--dimension-size-050);height:var(--dimension-size-050);overflow:hidden;clip-path:inset(50%);white-space:nowrap}`;const l=i(class i extends t{constructor(i){super();if(i!==false){this.__registerHost()}this.dsSelect=s(this,"dsSelect");this.conversationId="";this.conversationTitle="";this.preview="";this.updatedAt="";this.selected=false;this.state="default";this.statusLabel="";this.unreadCount=0;this.actionsOpen=false;this.handleClick=()=>this.dsSelect.emit({id:this.conversationId});this.handleActionsSlotChange=i=>{const t=i.target;this.el.classList.toggle("conversation-list-item--has-actions",t.assignedElements({flatten:true}).length>0)}}render(){const i=this.state==="busy";const t=i&&this.statusLabel?this.statusLabel:this.preview;const s=[this.conversationTitle,t,this.unreadCount>0?`${this.unreadCount} unread`:""].filter(Boolean).join(". ");return e(o,{key:"fba147efaeabbdd9f7e6570cf6662faab835ca63",role:"listitem",class:{"conversation-list-item--actions-open":this.actionsOpen}},e("div",{key:"9ba7d0bd50a0726f159b66c0a3d498cef47a3af2",class:"conversation-list-item__row"},e("button",{key:"babf372c069be6707ca9723be9a1ec1d9045bc92",type:"button",class:{"conversation-list-item":true,"ds-choice-item":true,"ds-control--md":true,"ds-focus-ring-inset":true,"ds-interaction-fill":true,"ds-interaction-fill--selected":this.selected,"conversation-list-item--error":this.state==="error"},"aria-label":s,"aria-current":this.selected?"true":undefined,"aria-busy":i?"true":undefined,onClick:this.handleClick},e("span",{key:"e5b9943f20f505c422a86e05c5b7c32cf56644a2",class:"conversation-list-item__leading ds-choice-item__icon ds-interaction-fill__content"},e("slot",{key:"0aeb1cd76127489027c5b37fd036b16a949be4a8",name:"leading"})),e("span",{key:"fa8084f4e54e09949c2fe90a9a416553bab6255c",class:"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content"},e("span",{key:"d3e5d8434307259c4802d50d110f424d97f34bdf",class:"conversation-list-item__title-row"},e("ds-text",{key:"4d57d54d0010a8cc9fdf0f6c169188d48fdf803e",class:"conversation-list-item__title ds-choice-item__label",as:"span",variant:"text-body-medium",emphasis:this.unreadCount>0,color:this.unreadCount>0?"primary":"secondary",lineTruncation:1},this.conversationTitle),this.unreadCount>0?e("span",{class:"conversation-list-item__unread"},e("ds-badge",{variant:"dot",surface:"secondary"})):null),e("span",{key:"526589dfed1752c7337636248882a06b2f5130be",class:"conversation-list-item__preview-row"},i?e("ds-loader",{size:"sm",color:"secondary"}):null,e("ds-text",{key:"9cde2ba65128c23e5d82e97efeb73673bea44ec4",class:"conversation-list-item__preview ds-choice-item__subtext",as:"span",variant:"text-body-small",color:this.state==="error"?"negative":"secondary",lineTruncation:1},t)),this.updatedAt?e("time",{class:"conversation-list-item__time",dateTime:this.updatedAt},this.updatedAt):null),e("span",{key:"40db0064d4842aec6ac448b9be85592f2204ff11",class:"conversation-list-item__trailing ds-interaction-fill__content"},e("slot",{key:"4960a9f39f69155c26c99c73f57e7cc83a790473",name:"trailing"}))),e("div",{key:"98869e8516a0bd0adcb526d9c9fbfbb3e81bc3b9",class:"conversation-list-item__actions"},e("slot",{key:"4701ba15cb25f4fa96f6cbe24b889d0f2c53906b",name:"actions",onSlotchange:this.handleActionsSlotChange}))))}get el(){return this}static get style(){return d()}},[262,"ds-conversation-list-item",{conversationId:[1,"conversation-id"],conversationTitle:[1,"conversation-title"],preview:[1],updatedAt:[1,"updated-at"],selected:[4],state:[1],statusLabel:[1,"status-label"],unreadCount:[2,"unread-count"],actionsOpen:[516,"actions-open"]}]);function v(){if(typeof customElements==="undefined"){return}const i=["ds-conversation-list-item","ds-badge","ds-loader","ds-text"];i.forEach((i=>{switch(i){case"ds-conversation-list-item":if(!customElements.get(n(i))){customElements.define(n(i),l)}break;case"ds-badge":if(!customElements.get(n(i))){r()}break;case"ds-loader":if(!customElements.get(n(i))){c()}break;case"ds-text":if(!customElements.get(n(i))){a()}break}}))}v();const m=l;const f=v;export{m as DsConversationListItem,f as defineCustomElement};
 //# sourceMappingURL=ds-conversation-list-item.js.map

package/dist/components/ds-conversation-list-item.js.map

@@ -1 +1 @@
-{"version":3,"names":["conversationListItemCss","ConversationListItem","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","conversationId","conversationTitle","preview","updatedAt","selected","state","statusLabel","unreadCount","actionsOpen","handleClick","dsSelect","emit","id","handleActionsSlotChange","event","slot","target","el","classList","toggle","assignedElements","flatten","length","render","busy","subtext","accessibleName","filter","Boolean","join","h","Host","key","role","class","type","undefined","onClick","name","as","variant","emphasis","color","lineTruncation","surface","size","dateTime","onSlotchange"],"sources":["src/wc/components/ConversationListItem/ConversationListItem.css?tag=ds-conversation-list-item&encapsulation=scoped","src/wc/components/ConversationListItem/ConversationListItem.tsx"],"sourcesContent":["@import '../../utils/choice-list.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.conversation-list-item__row {\n  position: relative;\n  isolation: isolate;\n}\n\n.conversation-list-item {\n  color: var(--color-foreground-primary);\n}\n\n.conversation-list-item--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.conversation-list-item__leading:empty,\n.conversation-list-item__trailing:empty {\n  display: none;\n}\n\n.conversation-list-item__leading,\n.conversation-list-item__trailing,\n.conversation-list-item__preview-row {\n  display: flex;\n  align-items: center;\n}\n\n.conversation-list-item__leading {\n  align-self: center;\n  width: auto;\n  height: auto;\n  margin-inline-start: var(--ds-control-label-inset, var(--dimension-space-025));\n  margin-inline-end: var(--dimension-space-050);\n}\n\n.conversation-list-item__content {\n  min-width: 0;\n}\n\n.conversation-list-item__title-row {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.conversation-list-item__preview-row {\n  min-width: 0;\n  gap: var(--dimension-space-100);\n}\n\nds-text.conversation-list-item__title,\nds-text.conversation-list-item__preview {\n  display: block;\n  min-width: 0;\n}\n\nds-text.conversation-list-item__title {\n  flex: 1;\n}\n\n.conversation-list-item__unread {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-size-200);\n  margin-inline-end: var(--dimension-space-025);\n}\n\nds-text.conversation-list-item__preview.ds-choice-item__subtext {\n  -webkit-line-clamp: 1;\n}\n\n.conversation-list-item__actions {\n  position: absolute;\n  top: 50%;\n  right: 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  opacity: 0;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n\n.conversation-list-item__row:hover .conversation-list-item__actions,\n.conversation-list-item__row:has(:focus-visible) .conversation-list-item__actions,\n:host(.conversation-list-item--actions-open) .conversation-list-item__actions {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Keep the row wash continuous while the pointer moves onto its sibling action. */\n.conversation-list-item__row:hover .conversation-list-item::after {\n  background: var(--ds-interaction-hover);\n}\n\n:host(.conversation-list-item--actions-open) .conversation-list-item::after {\n  background: var(--ds-interaction-hover);\n}\n\n.conversation-list-item__row:active .conversation-list-item::after {\n  background: var(--ds-interaction-pressed);\n}\n\n@media (hover: none) {\n  .conversation-list-item__actions {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  :host(.conversation-list-item--has-actions) .conversation-list-item__title-row {\n    padding-inline-end: var(--dimension-size-400);\n  }\n}\n\n.conversation-list-item__time {\n  position: absolute;\n  width: var(--dimension-size-050);\n  height: var(--dimension-size-050);\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { ConversationItemState } from '../conversation-types';\n\n@Component({\n  tag: 'ds-conversation-list-item',\n  styleUrl: 'ConversationListItem.css',\n  scoped: true,\n})\nexport class ConversationListItem {\n  @Element() el!: HTMLElement;\n\n  @Prop() conversationId: string = '';\n  /** Visible conversation title. Named to avoid the native HTMLElement.title contract. */\n  @Prop() conversationTitle: string = '';\n  @Prop() preview: string = '';\n  /** ISO timestamp for semantic activity metadata. */\n  @Prop() updatedAt: string = '';\n  @Prop() selected: boolean = false;\n  @Prop() state: ConversationItemState = 'default';\n  @Prop() statusLabel: string = '';\n  @Prop() unreadCount: number = 0;\n  /** Keep the contextual-actions surface visible while its popup is open or closing. */\n  @Prop({ reflect: true }) actionsOpen: boolean = false;\n\n  @Event() dsSelect!: EventEmitter<{ id: string }>;\n\n  private handleClick = () => this.dsSelect.emit({ id: this.conversationId });\n\n  private handleActionsSlotChange = (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    this.el.classList.toggle(\n      'conversation-list-item--has-actions',\n      slot.assignedElements({ flatten: true }).length > 0\n    );\n  };\n\n  render() {\n    const busy = this.state === 'busy';\n    const subtext = busy && this.statusLabel ? this.statusLabel : this.preview;\n    const accessibleName = [\n      this.conversationTitle,\n      subtext,\n      this.unreadCount > 0 ? `${this.unreadCount} unread` : '',\n    ]\n      .filter(Boolean)\n      .join('. ');\n\n    return (\n      <Host\n        role=\"listitem\"\n        class={{ 'conversation-list-item--actions-open': this.actionsOpen }}\n      >\n        <div class=\"conversation-list-item__row\">\n          <button\n            type=\"button\"\n            class={{\n              'conversation-list-item': true,\n              'ds-choice-item': true,\n              'ds-control--md': true,\n              'ds-focus-ring-inset': true,\n              'ds-interaction-fill': true,\n              'ds-interaction-fill--selected': this.selected,\n              'conversation-list-item--error': this.state === 'error',\n            }}\n            aria-label={accessibleName}\n            aria-current={this.selected ? 'true' : undefined}\n            aria-busy={busy ? 'true' : undefined}\n            onClick={this.handleClick}\n          >\n            <span class=\"conversation-list-item__leading ds-choice-item__icon ds-interaction-fill__content\">\n              <slot name=\"leading\" />\n            </span>\n            <span class=\"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content\">\n              <span class=\"conversation-list-item__title-row\">\n                <ds-text\n                  class=\"conversation-list-item__title ds-choice-item__label\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  emphasis={this.unreadCount > 0}\n                  color={this.unreadCount > 0 ? 'primary' : 'secondary'}\n                  lineTruncation={1}\n                >\n                  {this.conversationTitle}\n                </ds-text>\n                {this.unreadCount > 0 ? (\n                  <span class=\"conversation-list-item__unread\">\n                    <ds-badge variant=\"dot\" surface=\"secondary\" />\n                  </span>\n                ) : null}\n              </span>\n              <span class=\"conversation-list-item__preview-row\">\n                {busy ? <ds-loader size=\"sm\" color=\"secondary\" /> : null}\n                <ds-text\n                  class=\"conversation-list-item__preview ds-choice-item__subtext\"\n                  as=\"span\"\n                  variant=\"text-body-small\"\n                  color={this.state === 'error' ? 'negative' : 'secondary'}\n                  lineTruncation={1}\n                >\n                  {subtext}\n                </ds-text>\n              </span>\n              {this.updatedAt ? (\n                <time class=\"conversation-list-item__time\" dateTime={this.updatedAt}>\n                  {this.updatedAt}\n                </time>\n              ) : null}\n            </span>\n            <span class=\"conversation-list-item__trailing ds-interaction-fill__content\">\n              <slot name=\"trailing\" />\n            </span>\n          </button>\n          <div class=\"conversation-list-item__actions\">\n            <slot name=\"actions\" onSlotchange={this.handleActionsSlotChange} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAA0B,IAAM,47iB,MCQzBC,EAAoBC,EAAA,MAAAD,UAAAE,EALjC,WAAAC,CAAAC,G,6EAQUC,KAAAC,eAAyB,GAEzBD,KAAAE,kBAA4B,GAC5BF,KAAAG,QAAkB,GAElBH,KAAAI,UAAoB,GACpBJ,KAAAK,SAAoB,MACpBL,KAAAM,MAA+B,UAC/BN,KAAAO,YAAsB,GACtBP,KAAAQ,YAAsB,EAELR,KAAAS,YAAuB,MAIxCT,KAAAU,YAAc,IAAMV,KAAKW,SAASC,KAAK,CAAEC,GAAIb,KAAKC,iBAElDD,KAAAc,wBAA2BC,IACjC,MAAMC,EAAOD,EAAME,OACnBjB,KAAKkB,GAAGC,UAAUC,OAChB,sCACAJ,EAAKK,iBAAiB,CAAEC,QAAS,OAAQC,OAAS,EACnD,CAsFJ,CAnFC,MAAAC,GACE,MAAMC,EAAOzB,KAAKM,QAAU,OAC5B,MAAMoB,EAAUD,GAAQzB,KAAKO,YAAcP,KAAKO,YAAcP,KAAKG,QACnE,MAAMwB,EAAiB,CACrB3B,KAAKE,kBACLwB,EACA1B,KAAKQ,YAAc,EAAI,GAAGR,KAAKQ,qBAAuB,IAErDoB,OAAOC,SACPC,KAAK,MAER,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,MAAO,CAAE,uCAAwCnC,KAAKS,cAEtDsB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,+BACTJ,EAAA,UAAAE,IAAA,2CACEG,KAAK,SACLD,MAAO,CACL,yBAA0B,KAC1B,iBAAkB,KAClB,iBAAkB,KAClB,sBAAuB,KACvB,sBAAuB,KACvB,gCAAiCnC,KAAKK,SACtC,gCAAiCL,KAAKM,QAAU,SACjD,aACWqB,EAAc,eACZ3B,KAAKK,SAAW,OAASgC,UAAS,YACrCZ,EAAO,OAASY,UAC3BC,QAAStC,KAAKU,aAEdqB,EAAA,QAAAE,IAAA,2CAAME,MAAM,qFACVJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,aAEbR,EAAA,QAAAE,IAAA,2CAAME,MAAM,wFACVJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,qCACVJ,EAAA,WAAAE,IAAA,2CACEE,MAAM,sDACNK,GAAG,OACHC,QAAQ,mBACRC,SAAU1C,KAAKQ,YAAc,EAC7BmC,MAAO3C,KAAKQ,YAAc,EAAI,UAAY,YAC1CoC,eAAgB,GAEf5C,KAAKE,mBAEPF,KAAKQ,YAAc,EAClBuB,EAAA,QAAMI,MAAM,kCACVJ,EAAA,YAAUU,QAAQ,MAAMI,QAAQ,eAEhC,MAENd,EAAA,QAAAE,IAAA,2CAAME,MAAM,uCACTV,EAAOM,EAAA,aAAWe,KAAK,KAAKH,MAAM,cAAiB,KACpDZ,EAAA,WAAAE,IAAA,2CACEE,MAAM,0DACNK,GAAG,OACHC,QAAQ,kBACRE,MAAO3C,KAAKM,QAAU,QAAU,WAAa,YAC7CsC,eAAgB,GAEflB,IAGJ1B,KAAKI,UACJ2B,EAAA,QAAMI,MAAM,+BAA+BY,SAAU/C,KAAKI,WACvDJ,KAAKI,WAEN,MAEN2B,EAAA,QAAAE,IAAA,2CAAME,MAAM,iEACVJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,eAGfR,EAAA,OAAAE,IAAA,2CAAKE,MAAM,mCACTJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,UAAUS,aAAchD,KAAKc,4B","ignoreList":[]}
+{"version":3,"names":["conversationListItemCss","ConversationListItem","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","conversationId","conversationTitle","preview","updatedAt","selected","state","statusLabel","unreadCount","actionsOpen","handleClick","dsSelect","emit","id","handleActionsSlotChange","event","slot","target","el","classList","toggle","assignedElements","flatten","length","render","busy","subtext","accessibleName","filter","Boolean","join","h","Host","key","role","class","type","undefined","onClick","name","as","variant","emphasis","color","lineTruncation","surface","size","dateTime","onSlotchange"],"sources":["src/wc/components/ConversationListItem/ConversationListItem.css?tag=ds-conversation-list-item&encapsulation=scoped","src/wc/components/ConversationListItem/ConversationListItem.tsx"],"sourcesContent":["@import '../../utils/choice-list.css';\n\n:host {\n  display: block;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:hover),\n:host(:focus-within),\n:host(.conversation-list-item--actions-open) {\n  position: relative;\n  z-index: var(--dimension-z-index-floating);\n}\n\n.conversation-list-item__row {\n  position: relative;\n  isolation: isolate;\n}\n\n.conversation-list-item {\n  color: var(--color-foreground-primary);\n}\n\n.conversation-list-item--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.conversation-list-item__leading:empty,\n.conversation-list-item__trailing:empty {\n  display: none;\n}\n\n.conversation-list-item__leading,\n.conversation-list-item__trailing,\n.conversation-list-item__preview-row {\n  display: flex;\n  align-items: center;\n}\n\n.conversation-list-item__leading {\n  align-self: center;\n  width: auto;\n  height: auto;\n  margin-inline-start: var(--ds-control-label-inset, var(--dimension-space-025));\n  margin-inline-end: var(--dimension-space-050);\n}\n\n.conversation-list-item__content {\n  min-width: 0;\n}\n\n.conversation-list-item__title-row {\n  display: flex;\n  align-items: center;\n  min-width: 0;\n}\n\n.conversation-list-item__preview-row {\n  min-width: 0;\n  gap: var(--dimension-space-100);\n}\n\nds-text.conversation-list-item__title,\nds-text.conversation-list-item__preview {\n  display: block;\n  min-width: 0;\n}\n\nds-text.conversation-list-item__title {\n  flex: 1;\n}\n\n.conversation-list-item__unread {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  flex-shrink: 0;\n  width: var(--dimension-size-200);\n  margin-inline-end: var(--dimension-space-025);\n}\n\nds-text.conversation-list-item__preview.ds-choice-item__subtext {\n  -webkit-line-clamp: 1;\n}\n\n.conversation-list-item__actions {\n  position: absolute;\n  top: 50%;\n  right: 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  opacity: 0;\n  pointer-events: none;\n  transform: translateY(-50%);\n}\n\n.conversation-list-item__row:hover .conversation-list-item__actions,\n.conversation-list-item__row:has(:focus-visible) .conversation-list-item__actions,\n:host(.conversation-list-item--actions-open) .conversation-list-item__actions {\n  opacity: 1;\n  pointer-events: auto;\n}\n\n/* Keep the row wash continuous while the pointer moves onto its sibling action. */\n.conversation-list-item__row:hover .conversation-list-item::after {\n  background: var(--ds-interaction-hover);\n}\n\n:host(.conversation-list-item--actions-open) .conversation-list-item::after {\n  background: var(--ds-interaction-hover);\n}\n\n.conversation-list-item__row:active .conversation-list-item::after {\n  background: var(--ds-interaction-pressed);\n}\n\n@media (hover: none) {\n  .conversation-list-item__actions {\n    opacity: 1;\n    pointer-events: auto;\n  }\n\n  :host(.conversation-list-item--has-actions) .conversation-list-item__title-row {\n    padding-inline-end: var(--dimension-size-400);\n  }\n}\n\n.conversation-list-item__time {\n  position: absolute;\n  width: var(--dimension-size-050);\n  height: var(--dimension-size-050);\n  overflow: hidden;\n  clip-path: inset(50%);\n  white-space: nowrap;\n}\n","import { Component, Element, Event, EventEmitter, h, Host, Prop } from '@stencil/core';\nimport type { ConversationItemState } from '../conversation-types';\n\n@Component({\n  tag: 'ds-conversation-list-item',\n  styleUrl: 'ConversationListItem.css',\n  scoped: true,\n})\nexport class ConversationListItem {\n  @Element() el!: HTMLElement;\n\n  @Prop() conversationId: string = '';\n  /** Visible conversation title. Named to avoid the native HTMLElement.title contract. */\n  @Prop() conversationTitle: string = '';\n  @Prop() preview: string = '';\n  /** ISO timestamp for semantic activity metadata. */\n  @Prop() updatedAt: string = '';\n  @Prop() selected: boolean = false;\n  @Prop() state: ConversationItemState = 'default';\n  @Prop() statusLabel: string = '';\n  @Prop() unreadCount: number = 0;\n  /** Keep the contextual-actions surface visible while its popup is open or closing. */\n  @Prop({ reflect: true }) actionsOpen: boolean = false;\n\n  @Event() dsSelect!: EventEmitter<{ id: string }>;\n\n  private handleClick = () => this.dsSelect.emit({ id: this.conversationId });\n\n  private handleActionsSlotChange = (event: Event) => {\n    const slot = event.target as HTMLSlotElement;\n    this.el.classList.toggle(\n      'conversation-list-item--has-actions',\n      slot.assignedElements({ flatten: true }).length > 0\n    );\n  };\n\n  render() {\n    const busy = this.state === 'busy';\n    const subtext = busy && this.statusLabel ? this.statusLabel : this.preview;\n    const accessibleName = [\n      this.conversationTitle,\n      subtext,\n      this.unreadCount > 0 ? `${this.unreadCount} unread` : '',\n    ]\n      .filter(Boolean)\n      .join('. ');\n\n    return (\n      <Host\n        role=\"listitem\"\n        class={{ 'conversation-list-item--actions-open': this.actionsOpen }}\n      >\n        <div class=\"conversation-list-item__row\">\n          <button\n            type=\"button\"\n            class={{\n              'conversation-list-item': true,\n              'ds-choice-item': true,\n              'ds-control--md': true,\n              'ds-focus-ring-inset': true,\n              'ds-interaction-fill': true,\n              'ds-interaction-fill--selected': this.selected,\n              'conversation-list-item--error': this.state === 'error',\n            }}\n            aria-label={accessibleName}\n            aria-current={this.selected ? 'true' : undefined}\n            aria-busy={busy ? 'true' : undefined}\n            onClick={this.handleClick}\n          >\n            <span class=\"conversation-list-item__leading ds-choice-item__icon ds-interaction-fill__content\">\n              <slot name=\"leading\" />\n            </span>\n            <span class=\"conversation-list-item__content ds-choice-item__content ds-interaction-fill__content\">\n              <span class=\"conversation-list-item__title-row\">\n                <ds-text\n                  class=\"conversation-list-item__title ds-choice-item__label\"\n                  as=\"span\"\n                  variant=\"text-body-medium\"\n                  emphasis={this.unreadCount > 0}\n                  color={this.unreadCount > 0 ? 'primary' : 'secondary'}\n                  lineTruncation={1}\n                >\n                  {this.conversationTitle}\n                </ds-text>\n                {this.unreadCount > 0 ? (\n                  <span class=\"conversation-list-item__unread\">\n                    <ds-badge variant=\"dot\" surface=\"secondary\" />\n                  </span>\n                ) : null}\n              </span>\n              <span class=\"conversation-list-item__preview-row\">\n                {busy ? <ds-loader size=\"sm\" color=\"secondary\" /> : null}\n                <ds-text\n                  class=\"conversation-list-item__preview ds-choice-item__subtext\"\n                  as=\"span\"\n                  variant=\"text-body-small\"\n                  color={this.state === 'error' ? 'negative' : 'secondary'}\n                  lineTruncation={1}\n                >\n                  {subtext}\n                </ds-text>\n              </span>\n              {this.updatedAt ? (\n                <time class=\"conversation-list-item__time\" dateTime={this.updatedAt}>\n                  {this.updatedAt}\n                </time>\n              ) : null}\n            </span>\n            <span class=\"conversation-list-item__trailing ds-interaction-fill__content\">\n              <slot name=\"trailing\" />\n            </span>\n          </button>\n          <div class=\"conversation-list-item__actions\">\n            <slot name=\"actions\" onSlotchange={this.handleActionsSlotChange} />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"8KAAA,MAAMA,EAA0B,IAAM,+ojB,MCQzBC,EAAoBC,EAAA,MAAAD,UAAAE,EALjC,WAAAC,CAAAC,G,6EAQUC,KAAAC,eAAyB,GAEzBD,KAAAE,kBAA4B,GAC5BF,KAAAG,QAAkB,GAElBH,KAAAI,UAAoB,GACpBJ,KAAAK,SAAoB,MACpBL,KAAAM,MAA+B,UAC/BN,KAAAO,YAAsB,GACtBP,KAAAQ,YAAsB,EAELR,KAAAS,YAAuB,MAIxCT,KAAAU,YAAc,IAAMV,KAAKW,SAASC,KAAK,CAAEC,GAAIb,KAAKC,iBAElDD,KAAAc,wBAA2BC,IACjC,MAAMC,EAAOD,EAAME,OACnBjB,KAAKkB,GAAGC,UAAUC,OAChB,sCACAJ,EAAKK,iBAAiB,CAAEC,QAAS,OAAQC,OAAS,EACnD,CAsFJ,CAnFC,MAAAC,GACE,MAAMC,EAAOzB,KAAKM,QAAU,OAC5B,MAAMoB,EAAUD,GAAQzB,KAAKO,YAAcP,KAAKO,YAAcP,KAAKG,QACnE,MAAMwB,EAAiB,CACrB3B,KAAKE,kBACLwB,EACA1B,KAAKQ,YAAc,EAAI,GAAGR,KAAKQ,qBAAuB,IAErDoB,OAAOC,SACPC,KAAK,MAER,OACEC,EAACC,EAAI,CAAAC,IAAA,2CACHC,KAAK,WACLC,MAAO,CAAE,uCAAwCnC,KAAKS,cAEtDsB,EAAA,OAAAE,IAAA,2CAAKE,MAAM,+BACTJ,EAAA,UAAAE,IAAA,2CACEG,KAAK,SACLD,MAAO,CACL,yBAA0B,KAC1B,iBAAkB,KAClB,iBAAkB,KAClB,sBAAuB,KACvB,sBAAuB,KACvB,gCAAiCnC,KAAKK,SACtC,gCAAiCL,KAAKM,QAAU,SACjD,aACWqB,EAAc,eACZ3B,KAAKK,SAAW,OAASgC,UAAS,YACrCZ,EAAO,OAASY,UAC3BC,QAAStC,KAAKU,aAEdqB,EAAA,QAAAE,IAAA,2CAAME,MAAM,qFACVJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,aAEbR,EAAA,QAAAE,IAAA,2CAAME,MAAM,wFACVJ,EAAA,QAAAE,IAAA,2CAAME,MAAM,qCACVJ,EAAA,WAAAE,IAAA,2CACEE,MAAM,sDACNK,GAAG,OACHC,QAAQ,mBACRC,SAAU1C,KAAKQ,YAAc,EAC7BmC,MAAO3C,KAAKQ,YAAc,EAAI,UAAY,YAC1CoC,eAAgB,GAEf5C,KAAKE,mBAEPF,KAAKQ,YAAc,EAClBuB,EAAA,QAAMI,MAAM,kCACVJ,EAAA,YAAUU,QAAQ,MAAMI,QAAQ,eAEhC,MAENd,EAAA,QAAAE,IAAA,2CAAME,MAAM,uCACTV,EAAOM,EAAA,aAAWe,KAAK,KAAKH,MAAM,cAAiB,KACpDZ,EAAA,WAAAE,IAAA,2CACEE,MAAM,0DACNK,GAAG,OACHC,QAAQ,kBACRE,MAAO3C,KAAKM,QAAU,QAAU,WAAa,YAC7CsC,eAAgB,GAEflB,IAGJ1B,KAAKI,UACJ2B,EAAA,QAAMI,MAAM,+BAA+BY,SAAU/C,KAAKI,WACvDJ,KAAKI,WAEN,MAEN2B,EAAA,QAAAE,IAAA,2CAAME,MAAM,iEACVJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,eAGfR,EAAA,OAAAE,IAAA,2CAAKE,MAAM,mCACTJ,EAAA,QAAAE,IAAA,2CAAMM,KAAK,UAAUS,aAAchD,KAAKc,4B","ignoreList":[]}

package/dist/components/ds-conversation-list-section.js

@@ -1,2 +1,2 @@
-import{p as s,H as e,h as t,a as i,t as n}from"./index.js";import{d as o}from"./p-Bs6SS34m.js";const c=()=>`.sc-ds-conversation-list-section-h{display:block;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sc-ds-conversation-list-section-h:not(:first-child){margin-top:var(--dimension-space-200)}.conversation-list-section.sc-ds-conversation-list-section{display:flex;flex-direction:column;gap:var(--dimension-space-050)}ds-text.conversation-list-section__heading.sc-ds-conversation-list-section{display:block;padding:var(--dimension-space-050) var(--dimension-space-100)}.conversation-list-section__items.sc-ds-conversation-list-section{display:flex;flex-direction:column;gap:var(--dimension-space-025)}`;let a=0;const d=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.heading="";this.sectionId="";this.generatedId=`ds-conversation-section-${++a}`}render(){const s=this.sectionId||this.generatedId;return t(i,{key:"8cabe4394e8603914c59766027daaa594aebd76a"},t("section",{key:"a63496f0bf2b265a3c1187130c9f30519c322aed",class:"conversation-list-section","aria-labelledby":s},t("ds-text",{key:"88e39dee495507ee6dba4b91ff82bb69db01eb51",class:"conversation-list-section__heading",textId:s,as:"h3",variant:"text-caption",emphasis:true,color:"secondary"},this.heading),t("div",{key:"f706ae6115d043a2873ac09df43e24535a8b8bb8",class:"conversation-list-section__items",role:"list"},t("slot",{key:"949d208050696e1d66cacdef1ad0d5392c34b07d"}))))}static get style(){return c()}},[262,"ds-conversation-list-section",{heading:[1],sectionId:[1,"section-id"]}]);function r(){if(typeof customElements==="undefined"){return}const s=["ds-conversation-list-section","ds-text"];s.forEach((s=>{switch(s){case"ds-conversation-list-section":if(!customElements.get(n(s))){customElements.define(n(s),d)}break;case"ds-text":if(!customElements.get(n(s))){o()}break}}))}r();const l=d;const b=r;export{l as DsConversationListSection,b as defineCustomElement};
+import{p as s,H as e,h as t,a as i,t as n}from"./index.js";import{d as o}from"./p-C0_8K4y7.js";const c=()=>`.sc-ds-conversation-list-section-h{display:block;box-sizing:border-box;-webkit-user-select:none;user-select:none}.sc-ds-conversation-list-section-h:not(:first-child){margin-top:var(--dimension-space-200)}.conversation-list-section.sc-ds-conversation-list-section{display:flex;flex-direction:column;gap:var(--dimension-space-050)}ds-text.conversation-list-section__heading.sc-ds-conversation-list-section{display:block;padding:var(--dimension-space-050) var(--dimension-space-100)}.conversation-list-section__items.sc-ds-conversation-list-section{display:flex;flex-direction:column;gap:var(--dimension-space-050)}`;let a=0;const d=s(class s extends e{constructor(s){super();if(s!==false){this.__registerHost()}this.heading="";this.sectionId="";this.generatedId=`ds-conversation-section-${++a}`}render(){const s=this.sectionId||this.generatedId;return t(i,{key:"c607c2eb3f767acd2fb5d825e733d2590288f252"},t("section",{key:"aa5717f5f99d1c167a4a10ff2bddb863c5f2d65d",class:"conversation-list-section","aria-labelledby":s},t("ds-text",{key:"4803c2cc5067c9d53d51bc0c3157226cafcbbf35",class:"conversation-list-section__heading",textId:s,as:"h3",variant:"text-caption",emphasis:true,color:"secondary"},this.heading),t("div",{key:"0f6e98e860788216a764c7d0e9d2193395784518",class:"conversation-list-section__items",role:"list"},t("slot",{key:"8f05b8d4a8b436d719ad715a853b38d5a7abb631"}))))}static get style(){return c()}},[262,"ds-conversation-list-section",{heading:[1],sectionId:[1,"section-id"]}]);function r(){if(typeof customElements==="undefined"){return}const s=["ds-conversation-list-section","ds-text"];s.forEach((s=>{switch(s){case"ds-conversation-list-section":if(!customElements.get(n(s))){customElements.define(n(s),d)}break;case"ds-text":if(!customElements.get(n(s))){o()}break}}))}r();const l=d;const f=r;export{l as DsConversationListSection,f as defineCustomElement};
 //# sourceMappingURL=ds-conversation-list-section.js.map

package/dist/components/ds-conversation-list-section.js.map

@@ -1 +1 @@
-{"version":3,"names":["conversationListSectionCss","sectionId","ConversationListSection","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","generatedId","render","headingId","h","Host","key","class","textId","as","variant","emphasis","color","role"],"sources":["src/wc/components/ConversationListSection/ConversationListSection.css?tag=ds-conversation-list-section&encapsulation=scoped","src/wc/components/ConversationListSection/ConversationListSection.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:not(:first-child)) {\n  /* Match the 16px separation between PanelNav groups. */\n  margin-top: var(--dimension-space-200);\n}\n\n.conversation-list-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n}\n\nds-text.conversation-list-section__heading {\n  display: block;\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n}\n\n.conversation-list-section__items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-025);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nlet sectionId = 0;\n\n@Component({\n  tag: 'ds-conversation-list-section',\n  styleUrl: 'ConversationListSection.css',\n  scoped: true,\n})\nexport class ConversationListSection {\n  /** Visible section heading. */\n  @Prop() heading: string = '';\n  /** Optional stable id used for the section heading. */\n  @Prop() sectionId: string = '';\n\n  private readonly generatedId = `ds-conversation-section-${++sectionId}`;\n\n  render() {\n    const headingId = this.sectionId || this.generatedId;\n    return (\n      <Host>\n        <section class=\"conversation-list-section\" aria-labelledby={headingId}>\n          <ds-text\n            class=\"conversation-list-section__heading\"\n            textId={headingId}\n            as=\"h3\"\n            variant=\"text-caption\"\n            emphasis\n            color=\"secondary\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"conversation-list-section__items\" role=\"list\">\n            <slot />\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAA6B,IAAM,umBCEzC,IAAIC,EAAY,E,MAOHC,EAAuBC,EAAA,MAAAD,UAAAE,EALpC,WAAAC,CAAAC,G,4CAOUC,KAAAC,QAAkB,GAElBD,KAAAN,UAAoB,GAEXM,KAAAE,YAAc,6BAA6BR,GAwB7D,CAtBC,MAAAS,GACE,MAAMC,EAAYJ,KAAKN,WAAaM,KAAKE,YACzC,OACEG,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,WAAAE,IAAA,2CAASC,MAAM,4BAA2B,kBAAkBJ,GAC1DC,EAAA,WAAAE,IAAA,2CACEC,MAAM,qCACNC,OAAQL,EACRM,GAAG,KACHC,QAAQ,eACRC,SAAQ,KACRC,MAAM,aAELb,KAAKC,SAERI,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mCAAmCM,KAAK,QACjDT,EAAA,QAAAE,IAAA,+C","ignoreList":[]}
+{"version":3,"names":["conversationListSectionCss","sectionId","ConversationListSection","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","heading","generatedId","render","headingId","h","Host","key","class","textId","as","variant","emphasis","color","role"],"sources":["src/wc/components/ConversationListSection/ConversationListSection.css?tag=ds-conversation-list-section&encapsulation=scoped","src/wc/components/ConversationListSection/ConversationListSection.tsx"],"sourcesContent":[":host {\n  display: block;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n:host(:not(:first-child)) {\n  /* Match the 16px separation between PanelNav groups. */\n  margin-top: var(--dimension-space-200);\n}\n\n.conversation-list-section {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n}\n\nds-text.conversation-list-section__heading {\n  display: block;\n  padding: var(--dimension-space-050) var(--dimension-space-100);\n}\n\n.conversation-list-section__items {\n  display: flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nlet sectionId = 0;\n\n@Component({\n  tag: 'ds-conversation-list-section',\n  styleUrl: 'ConversationListSection.css',\n  scoped: true,\n})\nexport class ConversationListSection {\n  /** Visible section heading. */\n  @Prop() heading: string = '';\n  /** Optional stable id used for the section heading. */\n  @Prop() sectionId: string = '';\n\n  private readonly generatedId = `ds-conversation-section-${++sectionId}`;\n\n  render() {\n    const headingId = this.sectionId || this.generatedId;\n    return (\n      <Host>\n        <section class=\"conversation-list-section\" aria-labelledby={headingId}>\n          <ds-text\n            class=\"conversation-list-section__heading\"\n            textId={headingId}\n            as=\"h3\"\n            variant=\"text-caption\"\n            emphasis\n            color=\"secondary\"\n          >\n            {this.heading}\n          </ds-text>\n          <div class=\"conversation-list-section__items\" role=\"list\">\n            <slot />\n          </div>\n        </section>\n      </Host>\n    );\n  }\n}\n"],"mappings":"+FAAA,MAAMA,EAA6B,IAAM,umBCEzC,IAAIC,EAAY,E,MAOHC,EAAuBC,EAAA,MAAAD,UAAAE,EALpC,WAAAC,CAAAC,G,4CAOUC,KAAAC,QAAkB,GAElBD,KAAAN,UAAoB,GAEXM,KAAAE,YAAc,6BAA6BR,GAwB7D,CAtBC,MAAAS,GACE,MAAMC,EAAYJ,KAAKN,WAAaM,KAAKE,YACzC,OACEG,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,WAAAE,IAAA,2CAASC,MAAM,4BAA2B,kBAAkBJ,GAC1DC,EAAA,WAAAE,IAAA,2CACEC,MAAM,qCACNC,OAAQL,EACRM,GAAG,KACHC,QAAQ,eACRC,SAAQ,KACRC,MAAM,aAELb,KAAKC,SAERI,EAAA,OAAAE,IAAA,2CAAKC,MAAM,mCAAmCM,KAAK,QACjDT,EAAA,QAAAE,IAAA,+C","ignoreList":[]}

package/dist/components/ds-conversation-list.js

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as i,a as t,t as n}from"./index.js";const o=()=>`.sc-ds-conversation-list-h{display:block;width:100%;height:100%;min-height:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.conversation-list.sc-ds-conversation-list{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;box-sizing:border-box}.conversation-list__content.sc-ds-conversation-list{position:relative;flex:1 1 auto;min-height:0;overflow:auto;padding:var(--dimension-space-100);padding-bottom:calc(var(--dimension-size-600) + var(--dimension-size-100));box-sizing:border-box}.conversation-list__empty.sc-ds-conversation-list{display:contents}.conversation-list__actions.sc-ds-conversation-list{position:absolute;right:var(--dimension-space-200);bottom:var(--dimension-space-200);z-index:var(--dimension-z-index-floating)}.conversation-list__actions-surface.sc-ds-conversation-list{display:flex;border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-md)}.conversation-list__actions-surface.sc-ds-conversation-list:empty{display:none}`;const a=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}}render(){return i(t,{key:"d93a983b6a37a76bbaa17519f282255505c600d6"},i("div",{key:"d89457bd15eb91e45324c952f670101514e227af",class:"conversation-list"},i("div",{key:"948429659e379ab7e7e97cc7b6680120ca1b80a9",class:"conversation-list__content"},i("slot",{key:"79858eed74574870e307160e18176ae13ea0eb1a"}),i("div",{key:"20f4756a515f96286a9d899a2ff73ba276fe0fc2",class:"conversation-list__empty"},i("slot",{key:"531852dc2f95e0304ac8d354c981bec87e094822",name:"empty"}))),i("div",{key:"ec7123c6ce58ceeb33953204095b8548f556043e",class:"conversation-list__actions"},i("div",{key:"4455eb1f811ebb4de546f2fa0727cf00cf184d06",class:"conversation-list__actions-surface"},i("slot",{key:"862b7b7d36fe7cc7f6a68c666400da1edbfc0cdd",name:"actions"})))))}static get style(){return o()}},[262,"ds-conversation-list"]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-conversation-list"];e.forEach((e=>{switch(e){case"ds-conversation-list":if(!customElements.get(n(e))){customElements.define(n(e),a)}break}}))}c();const d=a;const r=c;export{d as DsConversationList,r as defineCustomElement};
+import{p as e,H as s,h as t,a,t as o}from"./index.js";import{S as d}from"./p-BE_CDJeL.js";const r=()=>`@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-conversation-list{--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-conversation-list{--ds-scroll-edge-fade-target-top:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--bottom.sc-ds-conversation-list{--ds-scroll-edge-fade-target-bottom:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--left.sc-ds-conversation-list{--ds-scroll-edge-fade-target-left:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--right.sc-ds-conversation-list{--ds-scroll-edge-fade-target-right:var(--ds-scroll-edge-fade-size)}.scroll-edge-fade--top-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-top:0px}.scroll-edge-fade--bottom-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-bottom:0px}.scroll-edge-fade--left-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-left:0px}.scroll-edge-fade--right-at-edge.sc-ds-conversation-list{--ds-scroll-edge-fade-target-right:0px}@supports (animation-timeline: scroll()){.scroll-edge-fade--scroll-aware.sc-ds-conversation-list{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-conversation-list{animation:none}}}.scroll-edge-fade--at-end.sc-ds-conversation-list,.scroll-edge-fade--hidden.sc-ds-conversation-list{-webkit-mask-image:none;mask-image:none}.scroll-edge-fade--block-window.sc-ds-conversation-list{--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 l=()=>`.sc-ds-conversation-list-h{display:block;position:relative;width:100%;height:100%;min-height:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}.conversation-list.sc-ds-conversation-list{position:relative;display:flex;flex-direction:column;width:100%;height:100%;min-height:0;box-sizing:border-box}.conversation-list__viewport.sc-ds-conversation-list{position:relative;flex:1 1 auto;min-height:0;overflow:auto;box-sizing:border-box}.conversation-list__content.sc-ds-conversation-list{position:relative;min-height:100%;padding:var(--dimension-space-100);padding-bottom:calc(     var(--dimension-space-100) + var(--ds-scroll-overlay-block-size, 0px)   );box-sizing:border-box}.conversation-list__fade.sc-ds-conversation-list{position:absolute;right:0;bottom:0;left:0;z-index:1;height:var(--ds-scroll-overlay-fade-block-size, 0);pointer-events:none;background-color:var(     --ds-scroll-overlay-surface-color,     var(--_shell-chrome-bg, var(--color-background-primary))   );--ds-scroll-edge-fade-size:100%}.conversation-list__fade.sc-ds-conversation-list::before{content:'';position:absolute;inset:0;background-image:var(     --ds-scroll-overlay-surface-image,     var(--ds-shell-gradient-image, none)   );background-position:var(--ds-scroll-overlay-surface-position, 0 0);background-attachment:fixed;background-size:var(     --ds-scroll-overlay-surface-size,     var(--ds-shell-gradient-size, auto)   );background-repeat:no-repeat;opacity:var(     --ds-scroll-overlay-surface-image-opacity,     var(--ds-shell-gradient-opacity, 1)   )}.conversation-list__empty.sc-ds-conversation-list{display:contents}.conversation-list__actions.sc-ds-conversation-list{position:absolute;right:0;bottom:0;z-index:var(--dimension-z-index-floating);padding:0 var(--dimension-space-200) var(--dimension-space-200) 0}.conversation-list__actions--footer.sc-ds-conversation-list{left:0;padding:0 var(--dimension-space-100) var(--dimension-space-100)}.conversation-list__actions-surface.sc-ds-conversation-list{display:flex;border-radius:var(--dimension-radius-half);box-shadow:var(--effect-elevation-elevated-md)}.conversation-list__actions--footer.sc-ds-conversation-list .conversation-list__actions-surface.sc-ds-conversation-list{width:100%}.conversation-list__actions-surface.sc-ds-conversation-list:empty{display:none}`;const i=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.actionLayout="floating";this.syncEmptyStateLayout=()=>{const e=this.el.querySelector('[slot="empty"]');if(e){e.style.setProperty("position","absolute");e.style.setProperty("inset-block-start","0");e.style.setProperty("inset-inline","0");e.style.setProperty("inset-block-end","var(--ds-scroll-overlay-block-size, 0)");e.style.setProperty("height","auto");e.style.setProperty("box-sizing","border-box")}this.scrollOverlayController?.sync()}}componentDidLoad(){if(!this.viewport||!this.content||!this.overlay)return;this.scrollOverlayController=new d({host:this.el,viewport:this.viewport,content:this.content,overlay:this.overlay,overlayContentSelector:'[slot="actions"]'});this.scrollOverlayController.connect();this.syncEmptyStateLayout();this.emptySlotObserver=new MutationObserver(this.syncEmptyStateLayout);this.emptySlotObserver.observe(this.el,{childList:true,subtree:true})}disconnectedCallback(){this.scrollOverlayController?.disconnect();this.emptySlotObserver?.disconnect()}render(){return t(a,{key:"e84187fa23d60be4e93406b4a7be9eb91ed781f0"},t("div",{key:"62de8ac94d66a49855addbf46a85e9c81d2b579a",class:"conversation-list"},t("div",{key:"71bcb32e4fa0974cdbb7c1f7c308622c743ba6b5",class:"conversation-list__viewport",ref:e=>{this.viewport=e},onScroll:()=>this.scrollOverlayController?.sync()},t("div",{key:"e2675890e8cd1259a229a2421ed9eb0cf7d1df64",class:"conversation-list__content",ref:e=>{this.content=e}},t("slot",{key:"cbf1e9897fe27a78d02accdd0998df1b5e18dbad"}),t("div",{key:"b857969ab47b5e2301db65d73d7773d13218916a",class:"conversation-list__empty"},t("slot",{key:"86cf1ac34f0738edf5c29cd021d20a6d9ee93f4d",name:"empty"})))),t("div",{key:"8c244d5cb540ad7f68f4548835a000f5c90bfc82",class:"conversation-list__fade scroll-edge-fade scroll-edge-fade--top","aria-hidden":"true"}),t("div",{key:"d1007602abfe971a98d0135b6355a474a9154b24",class:{"conversation-list__actions":true,"conversation-list__actions--footer":this.actionLayout==="footer"},ref:e=>{this.overlay=e}},t("div",{key:"b6a1e7f4e5a12dc8c971e54652f09bf68c482d1f",class:"conversation-list__actions-surface"},t("slot",{key:"68402e4fe3ea9cedecdaba3ca2fa1c6010c1a963",name:"actions"})))))}get el(){return this}static get style(){return r()+l()}},[262,"ds-conversation-list",{actionLayout:[1,"action-layout"]}]);function n(){if(typeof customElements==="undefined"){return}const e=["ds-conversation-list"];e.forEach((e=>{switch(e){case"ds-conversation-list":if(!customElements.get(o(e))){customElements.define(o(e),i)}break}}))}n();const c=i;const f=n;export{c as DsConversationList,f as defineCustomElement};
 //# sourceMappingURL=ds-conversation-list.js.map

package/dist/components/ds-conversation-list.js.map

@@ -1 +1 @@
-{"version":3,"names":["conversationListCss","ConversationList","__stencil_proxyCustomElement","HTMLElement","render","h","Host","key","class","name"],"sources":["src/wc/components/ConversationList/ConversationList.css?tag=ds-conversation-list&encapsulation=scoped","src/wc/components/ConversationList/ConversationList.tsx"],"sourcesContent":[":host {\n  display: block;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.conversation-list {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n.conversation-list__content {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  padding: var(--dimension-space-100);\n  padding-bottom: calc(var(--dimension-size-600) + var(--dimension-size-100));\n  box-sizing: border-box;\n}\n\n.conversation-list__empty {\n  display: contents;\n}\n\n.conversation-list__actions {\n  position: absolute;\n  right: var(--dimension-space-200);\n  bottom: var(--dimension-space-200);\n  z-index: var(--dimension-z-index-floating);\n}\n\n.conversation-list__actions-surface {\n  display: flex;\n  border-radius: var(--dimension-radius-half);\n  box-shadow: var(--effect-elevation-elevated-md);\n}\n\n.conversation-list__actions-surface:empty {\n  display: none;\n}\n","import { Component, h, Host } from '@stencil/core';\n\n@Component({\n  tag: 'ds-conversation-list',\n  styleUrl: 'ConversationList.css',\n  scoped: true,\n})\nexport class ConversationList {\n  render() {\n    return (\n      <Host>\n        <div class=\"conversation-list\">\n          <div class=\"conversation-list__content\">\n            <slot />\n            <div class=\"conversation-list__empty\">\n              <slot name=\"empty\" />\n            </div>\n          </div>\n          <div class=\"conversation-list__actions\">\n            <div class=\"conversation-list__actions-surface\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAsB,IAAM,qgC,MCOrBC,EAAgBC,EAAA,MAAAD,UAAAE,E,4DAC3B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,8BACTH,EAAA,QAAAE,IAAA,6CACAF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,YAGfJ,EAAA,OAAAE,IAAA,2CAAKC,MAAM,8BACTH,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sCACTH,EAAA,QAAAE,IAAA,2CAAME,KAAK,e","ignoreList":[]}
+{"version":3,"names":["scrollEdgeFadeCss","conversationListCss","ConversationList","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","actionLayout","syncEmptyStateLayout","emptyState","el","querySelector","style","setProperty","scrollOverlayController","sync","componentDidLoad","viewport","content","overlay","ScrollOverlayController","host","overlayContentSelector","connect","emptySlotObserver","MutationObserver","observe","childList","subtree","disconnectedCallback","disconnect","render","h","Host","key","class","ref","element","onScroll","name"],"sources":["src/wc/utils/scroll-edge-fade.css?tag=ds-conversation-list&encapsulation=scoped","src/wc/components/ConversationList/ConversationList.css?tag=ds-conversation-list&encapsulation=scoped","src/wc/components/ConversationList/ConversationList.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  position: relative;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n  -webkit-user-select: none;\n  user-select: none;\n}\n\n.conversation-list {\n  position: relative;\n  display: flex;\n  flex-direction: column;\n  width: 100%;\n  height: 100%;\n  min-height: 0;\n  box-sizing: border-box;\n}\n\n.conversation-list__viewport {\n  position: relative;\n  flex: 1 1 auto;\n  min-height: 0;\n  overflow: auto;\n  box-sizing: border-box;\n}\n\n.conversation-list__content {\n  position: relative;\n  min-height: 100%;\n  padding: var(--dimension-space-100);\n  padding-bottom: calc(\n    var(--dimension-space-100) + var(--ds-scroll-overlay-block-size, 0px)\n  );\n  box-sizing: border-box;\n}\n\n.conversation-list__fade {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  left: 0;\n  z-index: 1;\n  height: var(--ds-scroll-overlay-fade-block-size, 0);\n  pointer-events: none;\n  background-color: var(\n    --ds-scroll-overlay-surface-color,\n    var(--_shell-chrome-bg, var(--color-background-primary))\n  );\n  --ds-scroll-edge-fade-size: 100%;\n}\n\n.conversation-list__fade::before {\n  content: '';\n  position: absolute;\n  inset: 0;\n  background-image: var(\n    --ds-scroll-overlay-surface-image,\n    var(--ds-shell-gradient-image, none)\n  );\n  background-position: var(--ds-scroll-overlay-surface-position, 0 0);\n  background-attachment: fixed;\n  background-size: var(\n    --ds-scroll-overlay-surface-size,\n    var(--ds-shell-gradient-size, auto)\n  );\n  background-repeat: no-repeat;\n  opacity: var(\n    --ds-scroll-overlay-surface-image-opacity,\n    var(--ds-shell-gradient-opacity, 1)\n  );\n}\n\n.conversation-list__empty {\n  display: contents;\n}\n\n.conversation-list__actions {\n  position: absolute;\n  right: 0;\n  bottom: 0;\n  z-index: var(--dimension-z-index-floating);\n  padding: 0 var(--dimension-space-200) var(--dimension-space-200) 0;\n}\n\n.conversation-list__actions--footer {\n  left: 0;\n  padding: 0 var(--dimension-space-100) var(--dimension-space-100);\n}\n\n.conversation-list__actions-surface {\n  display: flex;\n  border-radius: var(--dimension-radius-half);\n  box-shadow: var(--effect-elevation-elevated-md);\n}\n\n.conversation-list__actions--footer .conversation-list__actions-surface {\n  width: 100%;\n}\n\n.conversation-list__actions-surface:empty {\n  display: none;\n}\n","import { Component, Element, h, Host, Prop } from '@stencil/core';\nimport { ScrollOverlayController } from '../../utils/scroll-overlay-controller';\n\nexport type ConversationListActionLayout = 'floating' | 'footer';\n\n@Component({\n  tag: 'ds-conversation-list',\n  styleUrl: 'ConversationList.css',\n  styleUrls: ['../../utils/scroll-edge-fade.css'],\n  scoped: true,\n})\nexport class ConversationList {\n  @Element() el!: HTMLElement;\n\n  /** Corner icon action or full-width persistent footer action. */\n  @Prop() actionLayout: ConversationListActionLayout = 'floating';\n\n  private viewport?: HTMLElement;\n  private content?: HTMLElement;\n  private overlay?: HTMLElement;\n  private scrollOverlayController?: ScrollOverlayController;\n  private emptySlotObserver?: MutationObserver;\n\n  componentDidLoad(): void {\n    if (!this.viewport || !this.content || !this.overlay) return;\n    this.scrollOverlayController = new ScrollOverlayController({\n      host: this.el,\n      viewport: this.viewport,\n      content: this.content,\n      overlay: this.overlay,\n      overlayContentSelector: '[slot=\"actions\"]',\n    });\n    this.scrollOverlayController.connect();\n    this.syncEmptyStateLayout();\n    this.emptySlotObserver = new MutationObserver(this.syncEmptyStateLayout);\n    this.emptySlotObserver.observe(this.el, { childList: true, subtree: true });\n  }\n\n  disconnectedCallback(): void {\n    this.scrollOverlayController?.disconnect();\n    this.emptySlotObserver?.disconnect();\n  }\n\n  private syncEmptyStateLayout = (): void => {\n    const emptyState = this.el.querySelector<HTMLElement>('[slot=\"empty\"]');\n    if (emptyState) {\n      emptyState.style.setProperty('position', 'absolute');\n      emptyState.style.setProperty('inset-block-start', '0');\n      emptyState.style.setProperty('inset-inline', '0');\n      emptyState.style.setProperty(\n        'inset-block-end',\n        'var(--ds-scroll-overlay-block-size, 0)',\n      );\n      emptyState.style.setProperty('height', 'auto');\n      emptyState.style.setProperty('box-sizing', 'border-box');\n    }\n    this.scrollOverlayController?.sync();\n  };\n\n  render() {\n    return (\n      <Host>\n        <div class=\"conversation-list\">\n          <div\n            class=\"conversation-list__viewport\"\n            ref={element => {\n              this.viewport = element;\n            }}\n            onScroll={() => this.scrollOverlayController?.sync()}\n          >\n            <div\n              class=\"conversation-list__content\"\n              ref={element => {\n                this.content = element;\n              }}\n            >\n              <slot />\n              <div class=\"conversation-list__empty\">\n                <slot name=\"empty\" />\n              </div>\n            </div>\n          </div>\n          <div\n            class=\"conversation-list__fade scroll-edge-fade scroll-edge-fade--top\"\n            aria-hidden=\"true\"\n          />\n          <div\n            class={{\n              'conversation-list__actions': true,\n              'conversation-list__actions--footer': this.actionLayout === 'footer',\n            }}\n            ref={element => {\n              this.overlay = element;\n            }}\n          >\n            <div class=\"conversation-list__actions-surface\">\n              <slot name=\"actions\" />\n            </div>\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"0FAAA,MAAMA,EAAoB,IAAM,qiJCAhC,MAAMC,EAAsB,IAAM,8wE,MCWrBC,EAAgBC,EAAA,MAAAD,UAAAE,EAN7B,WAAAC,CAAAC,G,4CAUUC,KAAAC,aAA6C,WA4B7CD,KAAAE,qBAAuB,KAC7B,MAAMC,EAAaH,KAAKI,GAAGC,cAA2B,kBACtD,GAAIF,EAAY,CACdA,EAAWG,MAAMC,YAAY,WAAY,YACzCJ,EAAWG,MAAMC,YAAY,oBAAqB,KAClDJ,EAAWG,MAAMC,YAAY,eAAgB,KAC7CJ,EAAWG,MAAMC,YACf,kBACA,0CAEFJ,EAAWG,MAAMC,YAAY,SAAU,QACvCJ,EAAWG,MAAMC,YAAY,aAAc,a,CAE7CP,KAAKQ,yBAAyBC,MAAM,CA+CvC,CAhFC,gBAAAC,GACE,IAAKV,KAAKW,WAAaX,KAAKY,UAAYZ,KAAKa,QAAS,OACtDb,KAAKQ,wBAA0B,IAAIM,EAAwB,CACzDC,KAAMf,KAAKI,GACXO,SAAUX,KAAKW,SACfC,QAASZ,KAAKY,QACdC,QAASb,KAAKa,QACdG,uBAAwB,qBAE1BhB,KAAKQ,wBAAwBS,UAC7BjB,KAAKE,uBACLF,KAAKkB,kBAAoB,IAAIC,iBAAiBnB,KAAKE,sBACnDF,KAAKkB,kBAAkBE,QAAQpB,KAAKI,GAAI,CAAEiB,UAAW,KAAMC,QAAS,M,CAGtE,oBAAAC,GACEvB,KAAKQ,yBAAyBgB,aAC9BxB,KAAKkB,mBAAmBM,Y,CAmB1B,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,4CACHF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,qBACTH,EAAA,OAAAE,IAAA,2CACEC,MAAM,8BACNC,IAAKC,IACH/B,KAAKW,SAAWoB,CAAO,EAEzBC,SAAU,IAAMhC,KAAKQ,yBAAyBC,QAE9CiB,EAAA,OAAAE,IAAA,2CACEC,MAAM,6BACNC,IAAKC,IACH/B,KAAKY,QAAUmB,CAAO,GAGxBL,EAAA,QAAAE,IAAA,6CACAF,EAAA,OAAAE,IAAA,2CAAKC,MAAM,4BACTH,EAAA,QAAAE,IAAA,2CAAMK,KAAK,aAIjBP,EAAA,OAAAE,IAAA,2CACEC,MAAM,iEAAgE,cAC1D,SAEdH,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,6BAA8B,KAC9B,qCAAsC7B,KAAKC,eAAiB,UAE9D6B,IAAKC,IACH/B,KAAKa,QAAUkB,CAAO,GAGxBL,EAAA,OAAAE,IAAA,2CAAKC,MAAM,sCACTH,EAAA,QAAAE,IAAA,2CAAMK,KAAK,e","ignoreList":[]}

package/dist/components/ds-divider.js

@@ -1,2 +1,2 @@
-import{D as s,d as o}from"./p-BkwBtZs3.js";const t=s;const p=o;export{t as DsDivider,p as defineCustomElement};
+import{D as o,d as s}from"./p-D6jK2Hyi.js";const t=o;const p=s;export{t as DsDivider,p as defineCustomElement};
 //# sourceMappingURL=ds-divider.js.map

package/dist/components/ds-empty-state.js

@@ -1,2 +1,2 @@
-import{E as o,d as s}from"./p-Dfxnxx7L.js";const t=o;const x=s;export{t as DsEmptyState,x as defineCustomElement};
+import{E as o,d as s}from"./p-XgIQ3oI_.js";const t=o;const p=s;export{t as DsEmptyState,p as defineCustomElement};
 //# sourceMappingURL=ds-empty-state.js.map

package/dist/components/ds-field.js

@@ -1,2 +1,2 @@
-import{p as e,H as t,h as i,a as s,t as d}from"./index.js";import{d as n}from"./p-Bs6SS34m.js";const r=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__control.sc-ds-field{display:flex;min-width:0}.field__control.sc-ds-field>*.sc-ds-field{width:100%}`;let a=0;const o=e=>e?.split(/\s+/).filter(Boolean)??[];const l=(...e)=>[...new Set(e.flat())];const h=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.error=false;this.focused=false;this.filled=false;this.dirty=false;this.touched=false;this.controlDisabled=false;this.controlRequired=false;this.generatedId=`ds-field-${++a}`;this.initialValue="";this.authoredAria=new WeakMap;this.syncControl=()=>{const e=this.findControl();if(!e)return;if(e!==this.control){this.control=e;this.initialValue=this.readValue(e);this.authoredAria.set(e,{labelledby:o(e.getAttribute("aria-labelledby")),describedby:o(e.getAttribute("aria-describedby"))})}const t=e.tagName.startsWith("DS-");if(t&&"inputId"in e)e.inputId=this.controlId;else this.updateControlAttribute(e,"id",this.controlId);const i=this.authoredAria.get(e)??{labelledby:[],describedby:[]};const s=l(i.labelledby,[this.labelId]).join(" ");const d=l(i.describedby,this.renderedDescription?[this.descriptionId]:[],this.renderedError?[this.errorId]:[]).join(" ");this.updateControlAttribute(e,"aria-labelledby",s);this.updateControlAttribute(e,"aria-describedby",d||undefined);this.updateControlAttribute(e,"aria-invalid",this.error?"true":undefined);if(t&&"error"in e&&e.error!==this.error)e.error=this.error;const n=this.readValue(e);this.filled=n.length>0;this.dirty=n!==this.initialValue;this.controlDisabled=Boolean(e.disabled||e.isInactive||e.hasAttribute("disabled"));this.controlRequired=Boolean(e.required||e.hasAttribute("required"))};this.handleLabelClick=e=>{if(!this.control?.tagName.startsWith("DS-"))return;e.preventDefault();this.control.setFocus?.()};this.handleFocusIn=()=>{this.focused=true};this.handleFocusOut=e=>{if(e.relatedTarget instanceof Node&&this.el.contains(e.relatedTarget))return;this.focused=false;this.touched=true};this.handleValueChange=()=>{this.syncControl()}}componentDidLoad(){this.syncControl();requestAnimationFrame((()=>this.syncControl()))}componentDidRender(){this.syncControl()}onFieldContractChange(){this.syncControl()}get controlId(){return this.fieldId||this.generatedId}get labelId(){return`${this.controlId}-label`}get descriptionId(){return`${this.controlId}-description`}get errorId(){return`${this.controlId}-error`}get renderedDescription(){return Boolean(this.description)&&!this.renderedError}get renderedError(){return this.error&&Boolean(this.errorMessage)}readValue(e){const t=e.value;return Array.isArray(t)?t.join(""):String(t??"")}updateControlAttribute(e,t,i){if(i===undefined){if(e.hasAttribute(t))e.removeAttribute(t);return}if(e.getAttribute(t)!==i)e.setAttribute(t,i)}findControl(){return this.controlContainer?.querySelector(":scope > :not(slot)")??undefined}render(){return i(s,{key:"3cb3fe4476e36668c61bdd906b996e308c439540","data-focused":this.focused?"":undefined,"data-filled":this.filled?"":undefined,"data-dirty":this.dirty?"":undefined,"data-touched":this.touched?"":undefined,"data-invalid":this.error?"":undefined,"data-disabled":this.controlDisabled?"":undefined,"data-required":this.controlRequired?"":undefined,onFocusin:this.handleFocusIn,onFocusout:this.handleFocusOut,onInput:this.handleValueChange,onChange:this.handleValueChange,onDsChange:this.handleValueChange},i("div",{key:"9705e457e09f1261e8e4cb88d84afd5d4cfbc338",class:"field"},i("ds-text",{key:"482f17ce24f83e3d3e27c2e527e3c19c20706fb2",class:"field__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:this.controlId,textId:this.labelId,onClick:this.handleLabelClick},this.label),i("div",{key:"504ff52e0cd36b7b3594b012ff256dbad7c0bc03",class:"field__control",ref:e=>this.controlContainer=e},i("slot",{key:"defdf5aa7b15b40804f48a96fe558f9201113f67",onSlotchange:this.syncControl})),this.renderedDescription&&i("ds-text",{key:"8b5d234a01b045d27c6ca776937b8318bb5c53da",class:"field__description",as:"div",variant:"text-body-small",color:"secondary",textId:this.descriptionId},this.description),this.renderedError&&i("ds-text",{key:"fdee6b2850c66cde9bc0082aeb6f4e15b517c919",class:"field__error",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage)))}get el(){return this}static get watchers(){return{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}}static get style(){return r()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"],description:[1],error:[4],errorMessage:[1,"error-message"],focused:[32],filled:[32],dirty:[32],touched:[32],controlDisabled:[32],controlRequired:[32]},undefined,{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(d(e))){customElements.define(d(e),h)}break;case"ds-text":if(!customElements.get(d(e))){n()}break}}))}c();const f=h;const u=c;export{f as DsField,u as defineCustomElement};
+import{p as e,H as t,h as i,a as s,t as d}from"./index.js";import{d as n}from"./p-C0_8K4y7.js";const r=()=>`.sc-ds-field-h{display:block}.field.sc-ds-field{display:flex;flex-direction:column;gap:var(--dimension-space-050)}.field__control.sc-ds-field{display:flex;min-width:0}.field__control.sc-ds-field>*.sc-ds-field{width:100%}`;let a=0;const o=e=>e?.split(/\s+/).filter(Boolean)??[];const l=(...e)=>[...new Set(e.flat())];const h=e(class e extends t{constructor(e){super();if(e!==false){this.__registerHost()}this.error=false;this.focused=false;this.filled=false;this.dirty=false;this.touched=false;this.controlDisabled=false;this.controlRequired=false;this.generatedId=`ds-field-${++a}`;this.initialValue="";this.authoredAria=new WeakMap;this.syncControl=()=>{const e=this.findControl();if(!e)return;if(e!==this.control){this.control=e;this.initialValue=this.readValue(e);this.authoredAria.set(e,{labelledby:o(e.getAttribute("aria-labelledby")),describedby:o(e.getAttribute("aria-describedby"))})}const t=e.tagName.startsWith("DS-");if(t&&"inputId"in e)e.inputId=this.controlId;else this.updateControlAttribute(e,"id",this.controlId);const i=this.authoredAria.get(e)??{labelledby:[],describedby:[]};const s=l(i.labelledby,[this.labelId]).join(" ");const d=l(i.describedby,this.renderedDescription?[this.descriptionId]:[],this.renderedError?[this.errorId]:[]).join(" ");this.updateControlAttribute(e,"aria-labelledby",s);this.updateControlAttribute(e,"aria-describedby",d||undefined);this.updateControlAttribute(e,"aria-invalid",this.error?"true":undefined);if(t&&"error"in e&&e.error!==this.error)e.error=this.error;const n=this.readValue(e);this.filled=n.length>0;this.dirty=n!==this.initialValue;this.controlDisabled=Boolean(e.disabled||e.isInactive||e.hasAttribute("disabled"));this.controlRequired=Boolean(e.required||e.hasAttribute("required"))};this.handleLabelClick=e=>{if(!this.control?.tagName.startsWith("DS-"))return;e.preventDefault();this.control.setFocus?.()};this.handleFocusIn=()=>{this.focused=true};this.handleFocusOut=e=>{if(e.relatedTarget instanceof Node&&this.el.contains(e.relatedTarget))return;this.focused=false;this.touched=true};this.handleValueChange=()=>{this.syncControl()}}componentDidLoad(){this.syncControl();requestAnimationFrame((()=>this.syncControl()))}componentDidRender(){this.syncControl()}onFieldContractChange(){this.syncControl()}get controlId(){return this.fieldId||this.generatedId}get labelId(){return`${this.controlId}-label`}get descriptionId(){return`${this.controlId}-description`}get errorId(){return`${this.controlId}-error`}get renderedDescription(){return Boolean(this.description)&&!this.renderedError}get renderedError(){return this.error&&Boolean(this.errorMessage)}readValue(e){const t=e.value;return Array.isArray(t)?t.join(""):String(t??"")}updateControlAttribute(e,t,i){if(i===undefined){if(e.hasAttribute(t))e.removeAttribute(t);return}if(e.getAttribute(t)!==i)e.setAttribute(t,i)}findControl(){return this.controlContainer?.querySelector(":scope > :not(slot)")??undefined}render(){return i(s,{key:"03d2e84ee508f65b9b89f4167282dc22319114fe","data-focused":this.focused?"":undefined,"data-filled":this.filled?"":undefined,"data-dirty":this.dirty?"":undefined,"data-touched":this.touched?"":undefined,"data-invalid":this.error?"":undefined,"data-disabled":this.controlDisabled?"":undefined,"data-required":this.controlRequired?"":undefined,onFocusin:this.handleFocusIn,onFocusout:this.handleFocusOut,onInput:this.handleValueChange,onChange:this.handleValueChange,onDsChange:this.handleValueChange},i("div",{key:"a64331feb023beb1af4092e5cab63480f3b89a52",class:"field"},i("ds-text",{key:"322e6e59cdb5a20296e2451c04b54e772880f3d8",class:"field__label",as:"label",variant:"text-body-small",color:"primary",emphasis:true,for:this.controlId,textId:this.labelId,onClick:this.handleLabelClick},this.label),i("div",{key:"ae5591dd80c541e0db7db608e3ad7348b5ffed3f",class:"field__control",ref:e=>this.controlContainer=e},i("slot",{key:"e26774822ee6ab16dbce4e565c9e58c80fa01fe0",onSlotchange:this.syncControl})),this.renderedDescription&&i("ds-text",{key:"7c14ed0dbadb8219c729be75fcce04727c7cce56",class:"field__description",as:"div",variant:"text-body-small",color:"secondary",textId:this.descriptionId},this.description),this.renderedError&&i("ds-text",{key:"70f4a5804ae526f8131f83df0e251180f51d0edf",class:"field__error",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage)))}get el(){return this}static get watchers(){return{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}}static get style(){return r()}},[262,"ds-field",{label:[1],fieldId:[1,"field-id"],description:[1],error:[4],errorMessage:[1,"error-message"],focused:[32],filled:[32],dirty:[32],touched:[32],controlDisabled:[32],controlRequired:[32]},undefined,{fieldId:[{onFieldContractChange:0}],description:[{onFieldContractChange:0}],error:[{onFieldContractChange:0}],errorMessage:[{onFieldContractChange:0}]}]);function c(){if(typeof customElements==="undefined"){return}const e=["ds-field","ds-text"];e.forEach((e=>{switch(e){case"ds-field":if(!customElements.get(d(e))){customElements.define(d(e),h)}break;case"ds-text":if(!customElements.get(d(e))){n()}break}}))}c();const f=h;const u=c;export{f as DsField,u as defineCustomElement};
 //# sourceMappingURL=ds-field.js.map

package/dist/components/ds-input.js

@@ -1,2 +1,2 @@
-import{p as t,H as i,c as s,h as e,a as n,t as r}from"./index.js";import{d as o}from"./p-DxeHimqk.js";import{d as a}from"./p-webARv8d.js";import{d}from"./p-BAfG3M8z.js";import{d as c}from"./p-Cpr3K41-.js";import{d as l}from"./p-Bs6SS34m.js";import{C as p}from"./p-Cx-ywr1e.js";import{c as u}from"./p-DuFm-ieS.js";const h=()=>`.ds-interaction-fill.sc-ds-input-h,.ds-interaction-fill.sc-ds-input{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before,.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before{z-index:1}.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-input-h,.ds-interaction-fill--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-input-h,.ds-interaction-fill--selected.sc-ds-input{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-input-h>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill.sc-ds-input>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill__content.sc-ds-input{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-input-h,.ds-interaction-fill--on-faint.sc-ds-input{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-input-h,.ds-interaction-fill--on-medium.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-input-h,.ds-interaction-fill--on-bold.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-input-h,.ds-interaction-fill--on-strong.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-input-h,.ds-interaction-fill--on-translucent.sc-ds-input{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-input-h,.ds-interaction-fill--on-inverted.sc-ds-input{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-input-h,.ds-interaction-fill--on-media.sc-ds-input{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-input-h,.ds-interaction-fill--on-always-dark.sc-ds-input{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-input-h,.ds-interaction-fill--on-navigation.sc-ds-input{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:0.25;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input,.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input,.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-width--hug.sc-ds-input-h,.ds-control-width--hug.sc-ds-input{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-text--display-medium.sc-ds-input-h,.ds-text--display-medium.sc-ds-input{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-input-h,.ds-text--display-small.sc-ds-input{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-input-h,.ds-text--title-large.sc-ds-input{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-input-h,.ds-text--title-medium.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-input-h,.ds-text--title-small.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-input-h,.ds-text--body-large.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-input-h,.ds-text--body-medium.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-input-h,.ds-text--body-small.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-input-h,.ds-text--caption.sc-ds-input{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--display-small.ds-text--emphasis.sc-ds-input-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-input,.ds-text--display-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-input-h,.ds-text--display-small.ds-text--regular.sc-ds-input-h,.ds-text--display-medium.ds-text--regular.sc-ds-input,.ds-text--display-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-input-h,.ds-text--title-large.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-input-h,.ds-text--title-large.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--title-small.ds-text--emphasis.sc-ds-input-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-input,.ds-text--title-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-input-h,.ds-text--title-small.ds-text--regular.sc-ds-input-h,.ds-text--title-medium.ds-text--regular.sc-ds-input,.ds-text--title-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-input-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--body-large.ds-text--emphasis.sc-ds-input,.ds-text--body-medium.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-input-h,.ds-text--body-medium.ds-text--regular.sc-ds-input-h,.ds-text--body-large.ds-text--regular.sc-ds-input,.ds-text--body-medium.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-input-h,.ds-text--body-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-input-h,.ds-text--body-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-input-h,.ds-text--caption.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-input-h,.ds-text--caption.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.input-host.sc-ds-input-h{display:inline-flex;flex-direction:column;gap:var(--dimension-space-050);--ds-input-fg:var(--color-foreground-primary);--ds-input-placeholder:var(--color-foreground-secondary);--ds-input-placeholder-active:var(--color-foreground-quaternary);--ds-input-adornment-fg:var(--color-foreground-secondary);--ds-input-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input-h .input-control.sc-ds-input{width:100%}.input-control.sc-ds-input{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));overflow:hidden;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-input-fg)}.input-control--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-input-border)}.input-control--error.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.input-control.sc-ds-input:focus-within:not(.input-control--error){--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-brand)}.ds-control-inactive.sc-ds-input-h .input-control.sc-ds-input::after{background:transparent}.native-input.sc-ds-input{position:relative;z-index:2;flex:1 1 auto;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));background:transparent;border:none;border-radius:inherit;outline:none;color:var(--ds-input-fg);font-family:inherit;-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input:read-only:not(:disabled){cursor:default}.native-input.sc-ds-input::placeholder{color:var(--ds-input-placeholder)}.native-input.sc-ds-input:focus::placeholder{color:var(--ds-input-placeholder-active)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.input-control__prefix.sc-ds-input,.input-control__suffix.sc-ds-input{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-input-adornment-fg)}.input-control__suffix--empty.sc-ds-input{display:none}.input-control__clear.sc-ds-input{position:relative;z-index:2;flex-shrink:0;align-self:center}.input-control.ds-control--md.sc-ds-input:has(.input-control__clear),.input-control.ds-control--sm.sc-ds-input:has(.input-control__clear){padding-right:var(--dimension-space-050)}.input-control.ds-control--xs.sc-ds-input:has(.input-control__clear){padding-right:0}.error-text.sc-ds-input{width:100%}`;const g={md:"md",sm:"sm",xs:"xs"};const f={md:"sm",sm:"xs",xs:"xs"};let v=0;const m=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.internals=this.attachInternals();this.generatedId=`ds-input-${++v}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage="This field is required.";this.clearLabel="Clear";this.type="text";this.inputMode="";this.enterKeyHint="";this.size="md";this.width="fill";this.hasBorder=true;this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.hasSuffix=false;this.focused=false;this.touched=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleFocus=()=>{this.focused=true};this.handleBlur=()=>{this.focused=false;this.touched=true};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.hasSuffix=Boolean(this.el.querySelector('[slot="suffix"]'));this.syncFormValue()}componentDidRender(){const t=Boolean(this.el.querySelector('[slot="suffix"]'));if(t!==this.hasSuffix)this.hasSuffix=t}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(t?null:this.value);const i=this.required&&!t&&this.value.length===0;this.internals.setValidity(i?{valueMissing:true}:{},i?this.requiredMessage:"")}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=typeof t==="string"?t:""}async setFocus(){this.el.querySelector("input")?.focus()}render(){const t=this.inputId??this.generatedId;const i=this.isInactive||this.disabled||this.formDisabled;const s=this.value.length>0;const r=this.value!==this.initialValue;const o=this.type==="search"&&s&&!i&&!this.readOnly;const a=this.error&&Boolean(this.errorMessage);const d=p[this.size];const c=g[this.size];const l=[this.ariaDescribedby,a?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return e(n,{key:"e5b9a970d00fae2848b4538555389bbcbbf2445f",class:{"input-host":true,"ds-control-inactive":i,[`ds-control--${this.size}`]:true,...u(this.width)},"data-disabled":i?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-invalid":this.error?"":undefined,"data-filled":s?"":undefined,"data-focused":this.focused?"":undefined,"data-dirty":r?"":undefined,"data-touched":this.touched?"":undefined},e("div",{key:"a87a76858d295fe9f390280844cac3dedd49741f",class:{"input-control":true,"input-control--bordered":this.hasBorder||this.error,"input-control--error":this.error,"ds-interaction-fill":true,[`ds-control--${this.size}`]:true}},this.icon&&e("span",{key:"ceced5db76973935471488644217966997f77651",class:"input-control__prefix ds-interaction-fill__content","aria-hidden":"true"},e("ds-icon",{key:"573a5680f38a2f285b69d1c14024666bb55d59a5",name:this.icon,size:c,color:"inherit"})),e("input",{key:"14512b6e15458641247317b6c1f209c6dbd345cf",type:this.type,id:t,value:this.value,placeholder:this.placeholder,disabled:i,readOnly:this.readOnly,required:this.required,autoFocus:this.autoFocus,autoComplete:this.autoComplete,inputMode:this.inputMode||undefined,enterKeyHint:this.enterKeyHint||undefined,class:`native-input ds-text--${d.replace("text-","")} ds-text--regular ds-interaction-fill__content`,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":l,"aria-invalid":this.error?"true":undefined,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),e("span",{key:"d69edd5191e15b5246afd3e069b39864487a9394",class:{"input-control__suffix":true,"input-control__suffix--empty":!this.hasSuffix}},e("slot",{key:"891d74c4e9e15585b0e790a18db009dbba8ca84c",name:"suffix"})),o&&e("ds-button-unfilled",{key:"a20b15370c1498895c33317964fd400ab3b1422a",class:"input-control__clear",variant:"icon",size:f[this.size],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:this.clearLabel,onDsClick:this.handleClear})),a&&e("ds-text",{key:"855383bca70344dcd3b91de0923ca1155cfc878f",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return h()}},[326,"ds-input",{value:[1025],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[1],autoComplete:[1,"autocomplete"],inputMode:[1,"inputmode"],enterKeyHint:[1,"enterkeyhint"],size:[1],width:[1],hasBorder:[4,"has-border"],icon:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],hasSuffix:[32],focused:[32],touched:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function y(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(r(t))){customElements.define(r(t),m)}break;case"ds-badge":if(!customElements.get(r(t))){o()}break;case"ds-button-unfilled":if(!customElements.get(r(t))){a()}break;case"ds-icon":if(!customElements.get(r(t))){d()}break;case"ds-loader":if(!customElements.get(r(t))){c()}break;case"ds-text":if(!customElements.get(r(t))){l()}break}}))}y();const b=m;const x=y;export{b as DsInput,x as defineCustomElement};
+import{p as t,H as i,c as s,h as e,a as n,t as r}from"./index.js";import{d as o}from"./p-DOCKtrS4.js";import{d as a}from"./p-xY3TjBF5.js";import{d}from"./p-BAfG3M8z.js";import{d as c}from"./p-Cpr3K41-.js";import{d as l}from"./p-C0_8K4y7.js";import{C as p}from"./p-Cx-ywr1e.js";import{c as u}from"./p-DuFm-ieS.js";const h=()=>`.ds-interaction-fill.sc-ds-input-h,.ds-interaction-fill.sc-ds-input{position:relative;z-index:0;--ds-interaction-hover:var(--color-interaction-hover);--ds-interaction-pressed:var(--color-interaction-pressed);--ds-interaction-active:var(--color-interaction-active-brand);--ds-interaction-border-width:0px;--ds-interaction-border-color:transparent}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before,.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{content:'';position:absolute;inset:0;border-radius:inherit;background:transparent;pointer-events:none;transition:none}.ds-interaction-fill.sc-ds-input-h::before,.ds-interaction-fill.sc-ds-input::before{z-index:1}.ds-interaction-fill.sc-ds-input-h::after,.ds-interaction-fill.sc-ds-input::after{z-index:3;box-shadow:inset 0 0 0 var(--ds-interaction-border-width) var(--ds-interaction-border-color)}.ds-interaction-fill--bordered.sc-ds-input-h,.ds-interaction-fill--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--color-border-secondary)}.ds-interaction-fill--selected.sc-ds-input-h::before,.ds-interaction-fill--selected.sc-ds-input::before{background:var(--ds-interaction-active)}.ds-interaction-fill--selected.sc-ds-input-h,.ds-interaction-fill--selected.sc-ds-input{--ds-interaction-dot-ring:var(--ds-interaction-active)}.ds-interaction-fill.sc-ds-input-h:hover:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:hover:not(:disabled)::after{background:var(--ds-interaction-hover)}.ds-interaction-fill.sc-ds-input-h:active:not(:disabled)::after,.ds-interaction-fill.sc-ds-input:active:not(:disabled)::after{background:var(--ds-interaction-pressed)}.ds-interaction-fill.sc-ds-input-h>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill.sc-ds-input>.ds-interaction-fill__content.sc-ds-input,.ds-interaction-fill__content.sc-ds-input{position:relative;z-index:2}.ds-interaction-fill--on-faint.sc-ds-input-h,.ds-interaction-fill--on-faint.sc-ds-input{--ds-interaction-active:var(--color-interaction-active)}.ds-interaction-fill--on-medium.sc-ds-input-h,.ds-interaction-fill--on-medium.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-medium-background-hover);--ds-interaction-pressed:var(--color-interaction-on-medium-background-pressed);--ds-interaction-active:var(--color-interaction-on-medium-background-active);--ds-focus-ring-color:var(--color-interaction-on-medium-background-focus)}.ds-interaction-fill--on-bold.sc-ds-input-h,.ds-interaction-fill--on-bold.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-bold-background-hover);--ds-interaction-pressed:var(--color-interaction-on-bold-background-pressed);--ds-interaction-active:var(--color-interaction-on-bold-background-active);--ds-focus-ring-color:var(--color-interaction-on-bold-background-focus)}.ds-interaction-fill--on-strong.sc-ds-input-h,.ds-interaction-fill--on-strong.sc-ds-input{--ds-interaction-hover:var(--color-interaction-on-strong-background-hover);--ds-interaction-pressed:var(--color-interaction-on-strong-background-pressed);--ds-interaction-active:var(--color-interaction-on-strong-background-active);--ds-focus-ring-color:var(--color-interaction-on-strong-background-focus)}.ds-interaction-fill--on-translucent.sc-ds-input-h,.ds-interaction-fill--on-translucent.sc-ds-input{--ds-interaction-hover:var(--color-translucent-interaction-hover);--ds-interaction-pressed:var(--color-translucent-interaction-pressed);--ds-interaction-active:var(--color-translucent-interaction-active);--ds-focus-ring-color:var(--color-translucent-interaction-focus)}.ds-interaction-fill--on-inverted.sc-ds-input-h,.ds-interaction-fill--on-inverted.sc-ds-input{--ds-interaction-hover:var(--color-inverted-interaction-hover);--ds-interaction-pressed:var(--color-inverted-interaction-pressed);--ds-interaction-active:var(--color-inverted-interaction-active);--ds-focus-ring-color:var(--color-inverted-interaction-focus)}.ds-interaction-fill--on-media.sc-ds-input-h,.ds-interaction-fill--on-media.sc-ds-input{--ds-interaction-hover:var(--color-media-interaction-hover);--ds-interaction-pressed:var(--color-media-interaction-pressed);--ds-interaction-active:var(--color-media-interaction-active);--ds-focus-ring-color:var(--color-media-interaction-focus)}.ds-interaction-fill--on-always-dark.sc-ds-input-h,.ds-interaction-fill--on-always-dark.sc-ds-input{--ds-interaction-hover:var(--color-always-dark-interaction-hover);--ds-interaction-pressed:var(--color-always-dark-interaction-pressed);--ds-interaction-active:var(--color-always-dark-interaction-active);--ds-focus-ring-color:var(--color-always-dark-interaction-focus)}.ds-interaction-fill--on-navigation.sc-ds-input-h,.ds-interaction-fill--on-navigation.sc-ds-input{--ds-interaction-hover:var(--color-navigation-interaction-hover);--ds-interaction-pressed:var(--color-navigation-interaction-pressed);--ds-interaction-active:var(--color-navigation-interaction-active);--ds-focus-ring-color:var(--color-navigation-interaction-focus)}.ds-control-inactive.sc-ds-input-h,.ds-control-inactive.sc-ds-input{opacity:0.5;pointer-events:none;cursor:not-allowed}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input,.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input,.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-radius:var(--dimension-radius-025)}.ds-control--md.sc-ds-input-h,.ds-control--md.sc-ds-input{--ds-control-height:var(--dimension-size-400);--ds-control-icon:var(--dimension-iconography-md);--ds-control-padding-inline:var(--dimension-space-075);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-050)}.ds-control--sm.sc-ds-input-h,.ds-control--sm.sc-ds-input{--ds-control-height:var(--dimension-size-300);--ds-control-icon:var(--dimension-iconography-sm);--ds-control-padding-inline:var(--dimension-space-050);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:var(--dimension-space-025)}.ds-control--xs.sc-ds-input-h,.ds-control--xs.sc-ds-input{--ds-control-height:var(--dimension-size-200);--ds-control-icon:var(--dimension-iconography-xs);--ds-control-padding-inline:var(--dimension-space-025);--ds-control-label-inset:var(--dimension-space-025);--ds-control-gap:0}.ds-control-width--hug.sc-ds-input-h,.ds-control-width--hug.sc-ds-input{width:fit-content;max-width:100%;flex:0 0 auto;align-self:flex-start}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input{width:100%;min-width:0;flex:1 1 auto;align-self:stretch}.ds-text--display-medium.sc-ds-input-h,.ds-text--display-medium.sc-ds-input{font-size:var(--typography-fontsize-3xl);line-height:var(--typography-lineheight-3xl)}.ds-text--display-small.sc-ds-input-h,.ds-text--display-small.sc-ds-input{font-size:var(--typography-fontsize-2xl);line-height:var(--typography-lineheight-2xl)}.ds-text--title-large.sc-ds-input-h,.ds-text--title-large.sc-ds-input{font-size:var(--typography-fontsize-xl);line-height:var(--typography-lineheight-xl)}.ds-text--title-medium.sc-ds-input-h,.ds-text--title-medium.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--title-small.sc-ds-input-h,.ds-text--title-small.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-large.sc-ds-input-h,.ds-text--body-large.sc-ds-input{font-size:var(--typography-fontsize-lg);line-height:var(--typography-lineheight-lg)}.ds-text--body-medium.sc-ds-input-h,.ds-text--body-medium.sc-ds-input{font-size:var(--typography-fontsize-md);line-height:var(--typography-lineheight-md)}.ds-text--body-small.sc-ds-input-h,.ds-text--body-small.sc-ds-input{font-size:var(--typography-fontsize-sm);line-height:var(--typography-lineheight-sm)}.ds-text--caption.sc-ds-input-h,.ds-text--caption.sc-ds-input{font-size:var(--typography-fontsize-xs);line-height:var(--typography-lineheight-xs);text-transform:uppercase}.ds-text--display-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--display-small.ds-text--emphasis.sc-ds-input-h,.ds-text--display-medium.ds-text--emphasis.sc-ds-input,.ds-text--display-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-bold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--display-medium.ds-text--regular.sc-ds-input-h,.ds-text--display-small.ds-text--regular.sc-ds-input-h,.ds-text--display-medium.ds-text--regular.sc-ds-input,.ds-text--display-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-large.ds-text--emphasis.sc-ds-input-h,.ds-text--title-large.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative-double)}.ds-text--title-large.ds-text--regular.sc-ds-input-h,.ds-text--title-large.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--title-small.ds-text--emphasis.sc-ds-input-h,.ds-text--title-medium.ds-text--emphasis.sc-ds-input,.ds-text--title-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--title-medium.ds-text--regular.sc-ds-input-h,.ds-text--title-small.ds-text--regular.sc-ds-input-h,.ds-text--title-medium.ds-text--regular.sc-ds-input,.ds-text--title-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-large.ds-text--emphasis.sc-ds-input-h,.ds-text--body-medium.ds-text--emphasis.sc-ds-input-h,.ds-text--body-large.ds-text--emphasis.sc-ds-input,.ds-text--body-medium.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative)}.ds-text--body-large.ds-text--regular.sc-ds-input-h,.ds-text--body-medium.ds-text--regular.sc-ds-input-h,.ds-text--body-large.ds-text--regular.sc-ds-input,.ds-text--body-medium.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--emphasis.sc-ds-input-h,.ds-text--body-small.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-negative-half)}.ds-text--body-small.ds-text--regular.sc-ds-input-h,.ds-text--body-small.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-regular);letter-spacing:var(--typography-letterspacing-none)}.ds-text--caption.ds-text--emphasis.sc-ds-input-h,.ds-text--caption.ds-text--emphasis.sc-ds-input{font-weight:var(--typography-weight-semibold);letter-spacing:var(--typography-letterspacing-positive)}.ds-text--caption.ds-text--regular.sc-ds-input-h,.ds-text--caption.ds-text--regular.sc-ds-input{font-weight:var(--typography-weight-medium);letter-spacing:var(--typography-letterspacing-positive)}.input-host.sc-ds-input-h{display:inline-flex;flex-direction:column;gap:var(--dimension-space-050);--ds-input-fg:var(--color-foreground-primary);--ds-input-placeholder:var(--color-foreground-secondary);--ds-input-placeholder-active:var(--color-foreground-quaternary);--ds-input-adornment-fg:var(--color-foreground-secondary);--ds-input-border:var(--color-border-secondary)}.ds-control-width--fill.sc-ds-input-h,.ds-control-width--fill.sc-ds-input-h .input-control.sc-ds-input{width:100%}.input-control.sc-ds-input{display:inline-flex;align-items:center;box-sizing:border-box;height:var(--ds-control-height, var(--dimension-size-400));padding:0 var(--ds-control-padding-inline, var(--dimension-space-075));gap:var(--ds-control-gap, var(--dimension-space-050));overflow:hidden;background:transparent;border:none;border-radius:var(--ds-control-radius, var(--dimension-radius-025));color:var(--ds-input-fg)}.input-control--bordered.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-012);--ds-interaction-border-color:var(--ds-input-border)}.input-control--error.sc-ds-input{--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-negative)}.input-control.sc-ds-input:focus-within:not(.input-control--error){--ds-interaction-border-width:var(--dimension-stroke-width-018);--ds-interaction-border-color:var(--color-border-bold-brand)}.ds-control-inactive.sc-ds-input-h .input-control.sc-ds-input::after{background:transparent}.native-input.sc-ds-input{position:relative;z-index:2;flex:1 1 auto;min-width:0;height:100%;padding:0 var(--ds-control-label-inset, var(--dimension-space-025));background:transparent;border:none;border-radius:inherit;outline:none;color:var(--ds-input-fg);font-family:inherit;-webkit-appearance:none;appearance:none}.native-input.sc-ds-input:disabled{cursor:not-allowed}.native-input.sc-ds-input:read-only:not(:disabled){cursor:default}.native-input.sc-ds-input::placeholder{color:var(--ds-input-placeholder)}.native-input.sc-ds-input:focus::placeholder{color:var(--ds-input-placeholder-active)}.native-input[type='search'].sc-ds-input::-webkit-search-cancel-button,.native-input[type='search'].sc-ds-input::-webkit-search-decoration{display:none}.input-control__prefix.sc-ds-input,.input-control__suffix.sc-ds-input{position:relative;z-index:2;flex-shrink:0;width:var(--ds-control-icon, var(--dimension-iconography-md));height:var(--ds-control-icon, var(--dimension-iconography-md));display:inline-flex;align-items:center;justify-content:center;color:var(--ds-input-adornment-fg)}.input-control__suffix--empty.sc-ds-input{display:none}.input-control__clear.sc-ds-input{position:relative;z-index:2;flex-shrink:0;align-self:center}.input-control.ds-control--md.sc-ds-input:has(.input-control__clear),.input-control.ds-control--sm.sc-ds-input:has(.input-control__clear){padding-right:var(--dimension-space-050)}.input-control.ds-control--xs.sc-ds-input:has(.input-control__clear){padding-right:0}.error-text.sc-ds-input{width:100%}`;const f={md:"md",sm:"sm",xs:"xs"};const g={md:"sm",sm:"xs",xs:"xs"};let v=0;const m=t(class t extends i{constructor(t){super();if(t!==false){this.__registerHost()}this.dsChange=s(this,"dsChange");this.dsClear=s(this,"dsClear");this.internals=this.attachInternals();this.generatedId=`ds-input-${++v}`;this.errorId=`${this.generatedId}-error`;this.value="";this.disabled=false;this.readOnly=false;this.required=false;this.requiredMessage="This field is required.";this.clearLabel="Clear";this.type="text";this.inputMode="";this.enterKeyHint="";this.size="md";this.width="fill";this.hasBorder=true;this.isInactive=false;this.autoFocus=false;this.error=false;this.ariaLabel=null;this.initialValue="";this.formDisabled=false;this.hasSuffix=false;this.focused=false;this.touched=false;this.handleInput=t=>{this.value=t.target.value;this.dsChange.emit(this.value)};this.handleFocus=()=>{this.focused=true};this.handleBlur=()=>{this.focused=false;this.touched=true};this.handleClear=()=>{this.value="";this.dsChange.emit("");this.dsClear.emit();this.el.querySelector("input")?.focus()}}componentWillLoad(){this.initialValue=this.value;this.hasSuffix=Boolean(this.el.querySelector('[slot="suffix"]'));this.syncFormValue()}componentDidRender(){const t=Boolean(this.el.querySelector('[slot="suffix"]'));if(t!==this.hasSuffix)this.hasSuffix=t}syncFormValue(){const t=this.isInactive||this.disabled||this.formDisabled;this.internals.setFormValue(t?null:this.value);const i=this.required&&!t&&this.value.length===0;this.internals.setValidity(i?{valueMissing:true}:{},i?this.requiredMessage:"")}formDisabledCallback(t){this.formDisabled=t;this.syncFormValue()}formResetCallback(){this.value=this.initialValue}formStateRestoreCallback(t){this.value=typeof t==="string"?t:""}async setFocus(){this.el.querySelector("input")?.focus()}render(){const t=this.inputId??this.generatedId;const i=this.isInactive||this.disabled||this.formDisabled;const s=this.value.length>0;const r=this.value!==this.initialValue;const o=this.type==="search"&&s&&!i&&!this.readOnly;const a=this.error&&Boolean(this.errorMessage);const d=p[this.size];const c=f[this.size];const l=[this.ariaDescribedby,a?this.errorId:undefined].filter(Boolean).join(" ")||undefined;return e(n,{key:"5bc02207d076e943093a7d972a0f4eb7031d7745",class:{"input-host":true,"ds-control-inactive":i,[`ds-control--${this.size}`]:true,...u(this.width)},"data-disabled":i?"":undefined,"data-readonly":this.readOnly?"":undefined,"data-required":this.required?"":undefined,"data-invalid":this.error?"":undefined,"data-filled":s?"":undefined,"data-focused":this.focused?"":undefined,"data-dirty":r?"":undefined,"data-touched":this.touched?"":undefined},e("div",{key:"0a91b57744d7ea613dd37945383bc4019ffaecb2",class:{"input-control":true,"input-control--bordered":this.hasBorder||this.error,"input-control--error":this.error,"ds-interaction-fill":true,[`ds-control--${this.size}`]:true}},this.icon&&e("span",{key:"6f633b652c1122d3df05b70a9f497fbd5d1beac4",class:"input-control__prefix ds-interaction-fill__content","aria-hidden":"true"},e("ds-icon",{key:"5098662161ac12eaf09f43ddd593504aac5fe56f",name:this.icon,size:c,color:"inherit"})),e("input",{key:"68209e27ffaf8493648c8a8e2a08411f0224d312",type:this.type,id:t,value:this.value,placeholder:this.placeholder,disabled:i,readOnly:this.readOnly,required:this.required,autoFocus:this.autoFocus,autoComplete:this.autoComplete,inputMode:this.inputMode||undefined,enterKeyHint:this.enterKeyHint||undefined,class:`native-input ds-text--${d.replace("text-","")} ds-text--regular ds-interaction-fill__content`,"aria-label":this.ariaLabel,"aria-labelledby":this.ariaLabelledby,"aria-describedby":l,"aria-invalid":this.error?"true":undefined,onInput:this.handleInput,onFocus:this.handleFocus,onBlur:this.handleBlur}),e("span",{key:"84fff549f71c73d1dee2fe451b34364608e3eb19",class:{"input-control__suffix":true,"input-control__suffix--empty":!this.hasSuffix}},e("slot",{key:"f67eaa7a510e66db0a8793ccb4802b70016c8937",name:"suffix"})),o&&e("ds-button-unfilled",{key:"f31256e9d1b40b1ab02b08bfba3fdf2b97253452",class:"input-control__clear",variant:"icon",size:g[this.size],icon:"CrossCircle",hasBorder:false,rounded:true,ariaLabel:this.clearLabel,onDsClick:this.handleClear})),a&&e("ds-text",{key:"05c405db6d86625f6d3d4369d6d9ece04fa272be",class:"error-text",as:"div",variant:"text-body-small",color:"negative",textId:this.errorId,role:"alert"},this.errorMessage))}static get formAssociated(){return true}get el(){return this}static get watchers(){return{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}}static get style(){return h()}},[326,"ds-input",{value:[1025],name:[513],form:[513],disabled:[516],readOnly:[516,"read-only"],required:[516],requiredMessage:[1,"required-message"],clearLabel:[1,"clear-label"],placeholder:[1],type:[1],autoComplete:[1,"autocomplete"],inputMode:[1,"inputmode"],enterKeyHint:[1,"enterkeyhint"],size:[1],width:[1],hasBorder:[4,"has-border"],icon:[1],isInactive:[4,"is-inactive"],autoFocus:[4,"auto-focus"],error:[4],errorMessage:[1,"error-message"],inputId:[1,"input-id"],ariaLabel:[1,"aria-label"],ariaLabelledby:[1,"aria-labelledby"],ariaDescribedby:[1,"aria-describedby"],formDisabled:[32],hasSuffix:[32],focused:[32],touched:[32],setFocus:[64]},undefined,{value:[{syncFormValue:0}],disabled:[{syncFormValue:0}],isInactive:[{syncFormValue:0}],required:[{syncFormValue:0}]}]);function y(){if(typeof customElements==="undefined"){return}const t=["ds-input","ds-badge","ds-button-unfilled","ds-icon","ds-loader","ds-text"];t.forEach((t=>{switch(t){case"ds-input":if(!customElements.get(r(t))){customElements.define(r(t),m)}break;case"ds-badge":if(!customElements.get(r(t))){o()}break;case"ds-button-unfilled":if(!customElements.get(r(t))){a()}break;case"ds-icon":if(!customElements.get(r(t))){d()}break;case"ds-loader":if(!customElements.get(r(t))){c()}break;case"ds-text":if(!customElements.get(r(t))){l()}break}}))}y();const b=m;const x=y;export{b as DsInput,x as defineCustomElement};
 //# sourceMappingURL=ds-input.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["inputCss","ICON_SIZE","md","sm","xs","CLEAR_BUTTON_SIZE","idCounter","Input","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","errorId","value","disabled","readOnly","required","requiredMessage","clearLabel","type","inputMode","enterKeyHint","size","width","hasBorder","isInactive","autoFocus","error","ariaLabel","initialValue","formDisabled","hasSuffix","focused","touched","handleInput","e","target","dsChange","emit","handleFocus","handleBlur","handleClear","dsClear","el","querySelector","focus","componentWillLoad","Boolean","syncFormValue","componentDidRender","inactive","internals","setFormValue","missing","length","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","setFocus","render","inputId","filled","dirty","showClear","showError","errorMessage","textVariant","CONTROL_TEXT_VARIANT","iconSize","describedBy","ariaDescribedby","undefined","filter","join","h","Host","key","class","controlWidthClass","icon","name","color","id","placeholder","autoComplete","replace","ariaLabelledby","onInput","onFocus","onBlur","variant","rounded","onDsClick","as","textId","role"],"sources":["src/wc/components/Input/Input.css?tag=ds-input&encapsulation=scoped","src/wc/components/Input/Input.tsx"],"sourcesContent":["@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n@import '../../utils/typography.css';\n\n:host(.input-host) {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  --ds-input-fg: var(--color-foreground-primary);\n  --ds-input-placeholder: var(--color-foreground-secondary);\n  --ds-input-placeholder-active: var(--color-foreground-quaternary);\n  --ds-input-adornment-fg: var(--color-foreground-secondary);\n  --ds-input-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .input-control {\n  width: 100%;\n}\n\n.input-control {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-input-fg);\n}\n\n.input-control--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-input-border);\n}\n\n.input-control--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.input-control:focus-within:not(.input-control--error) {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .input-control::after {\n  background: transparent;\n}\n\n.native-input {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  background: transparent;\n  border: none;\n  border-radius: inherit;\n  outline: none;\n  color: var(--ds-input-fg);\n  font-family: inherit;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.native-input:disabled {\n  cursor: not-allowed;\n}\n\n.native-input:read-only:not(:disabled) {\n  cursor: default;\n}\n\n.native-input::placeholder {\n  color: var(--ds-input-placeholder);\n}\n\n.native-input:focus::placeholder {\n  color: var(--ds-input-placeholder-active);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.input-control__prefix,\n.input-control__suffix {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--ds-input-adornment-fg);\n}\n\n.input-control__suffix--empty {\n  display: none;\n}\n\n.input-control__clear {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  align-self: center;\n}\n\n.input-control.ds-control--md:has(.input-control__clear),\n.input-control.ds-control--sm:has(.input-control__clear) {\n  padding-right: var(--dimension-space-050);\n}\n\n.input-control.ds-control--xs:has(.input-control__clear) {\n  padding-right: 0;\n}\n\n.error-text {\n  width: 100%;\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Method, Watch, h, Host } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';\nexport type InputSize = 'md' | 'sm' | 'xs';\nexport type InputWidth = ControlWidth;\n\nconst ICON_SIZE: Record<InputSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nconst CLEAR_BUTTON_SIZE: Record<InputSize, 'sm' | 'xs'> = {\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-input',\n  styleUrl: 'Input.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Input {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private generatedId = `ds-input-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keeps the value focusable and submittable while preventing edits. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = 'This field is required.';\n  @Prop() clearLabel: string = 'Clear';\n  @Prop() placeholder: string | undefined;\n  @Prop() type: InputType = 'text';\n  /** Native browser autofill hint. */\n  @Prop({ attribute: 'autocomplete' }) autoComplete: string | undefined;\n  /** Preferred virtual keyboard without changing the value semantics. */\n  @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n  /** Preferred virtual-keyboard action label. */\n  @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n  /** Control density. */\n  @Prop() size: InputSize = 'md';\n  /** Width fit — fill the parent (default) or hug the available content. */\n  @Prop() width: InputWidth = 'fill';\n  /** Show the standard inset border. */\n  @Prop() hasBorder: boolean = true;\n  /** Optional leading icon name. */\n  @Prop() icon: string | undefined;\n  @Prop() isInactive: boolean = false;\n  @Prop() autoFocus: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string | undefined;\n  /** Associates the internal input with an external <label>. */\n  @Prop() inputId: string | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n\n  private initialValue = '';\n  @State() private formDisabled = false;\n  @State() private hasSuffix = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    this.syncFormValue();\n  }\n\n  componentDidRender() {\n    const hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    if (hasSuffix !== this.hasSuffix) this.hasSuffix = hasSuffix;\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    this.internals.setFormValue(inactive ? null : this.value);\n    const missing = this.required && !inactive && this.value.length === 0;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = typeof state === 'string' ? state : '';\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  private handleInput = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dsChange.emit(this.value);\n  };\n\n  private handleFocus = () => {\n    this.focused = true;\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleClear = () => {\n    this.value = '';\n    this.dsChange.emit('');\n    this.dsClear.emit();\n    this.el.querySelector('input')?.focus();\n  };\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const filled = this.value.length > 0;\n    const dirty = this.value !== this.initialValue;\n    const showClear = this.type === 'search' && filled && !inactive && !this.readOnly;\n    const showError = this.error && Boolean(this.errorMessage);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const describedBy = [\n      this.ariaDescribedby,\n      showError ? this.errorId : undefined,\n    ].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <Host\n        class={{\n          'input-host': true,\n          'ds-control-inactive': inactive,\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n        }}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-invalid={this.error ? '' : undefined}\n        data-filled={filled ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n      >\n        <div\n          class={{\n            'input-control': true,\n            'input-control--bordered': this.hasBorder || this.error,\n            'input-control--error': this.error,\n            'ds-interaction-fill': true,\n            [`ds-control--${this.size}`]: true,\n          }}\n        >\n          {this.icon && (\n            <span class=\"input-control__prefix ds-interaction-fill__content\" aria-hidden=\"true\">\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n          <input\n            type={this.type}\n            id={inputId}\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={inactive}\n            readOnly={this.readOnly}\n            required={this.required}\n            autoFocus={this.autoFocus}\n            autoComplete={this.autoComplete}\n            inputMode={this.inputMode || undefined}\n            enterKeyHint={this.enterKeyHint || undefined}\n            class={`native-input ds-text--${textVariant.replace('text-', '')} ds-text--regular ds-interaction-fill__content`}\n            aria-label={this.ariaLabel}\n            aria-labelledby={this.ariaLabelledby}\n            aria-describedby={describedBy}\n            aria-invalid={this.error ? 'true' : undefined}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          <span class={{ 'input-control__suffix': true, 'input-control__suffix--empty': !this.hasSuffix }}>\n            <slot name=\"suffix\" />\n          </span>\n          {showClear && (\n            <ds-button-unfilled\n              class=\"input-control__clear\"\n              variant=\"icon\"\n              size={CLEAR_BUTTON_SIZE[this.size]}\n              icon=\"CrossCircle\"\n              hasBorder={false}\n              rounded\n              ariaLabel={this.clearLabel}\n              onDsClick={this.handleClear}\n            />\n          )}\n        </div>\n        {showError && (\n          <ds-text\n            class=\"error-text\"\n            as=\"div\"\n            variant=\"text-body-small\"\n            color=\"negative\"\n            textId={this.errorId}\n            role=\"alert\"\n          >\n            {this.errorMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"yTAAA,MAAMA,EAAW,IAAM,yzbCOvB,MAAMC,EAAmD,CACvDC,GAAI,KACJC,GAAI,KACJC,GAAI,MAGN,MAAMC,EAAoD,CACxDH,GAAI,KACJC,GAAI,KACJC,GAAI,MAGN,IAAIE,EAAY,E,MAQHC,EAAKC,EAAA,MAAAD,UAAAE,EANlB,WAAAC,CAAAC,G,kJAUUC,KAAAC,YAAc,cAAcP,IAC5BM,KAAAE,QAAU,GAAGF,KAAKC,oBAEDD,KAAAG,MAAgB,GAGhBH,KAAAI,SAAoB,MAEpBJ,KAAAK,SAAoB,MACpBL,KAAAM,SAAoB,MACrCN,KAAAO,gBAA0B,0BAC1BP,KAAAQ,WAAqB,QAErBR,KAAAS,KAAkB,OAIQT,KAAAU,UAAoB,GAEjBV,KAAAW,aAAuB,GAEpDX,KAAAY,KAAkB,KAElBZ,KAAAa,MAAoB,OAEpBb,KAAAc,UAAqB,KAGrBd,KAAAe,WAAsB,MACtBf,KAAAgB,UAAqB,MACrBhB,KAAAiB,MAAiB,MAIUjB,KAAAkB,UAA2B,KAOtDlB,KAAAmB,aAAe,GACNnB,KAAAoB,aAAe,MACfpB,KAAAqB,UAAY,MACZrB,KAAAsB,QAAU,MACVtB,KAAAuB,QAAU,MA0CnBvB,KAAAwB,YAAeC,IACrBzB,KAAKG,MAASsB,EAAEC,OAA4BvB,MAC5CH,KAAK2B,SAASC,KAAK5B,KAAKG,MAAM,EAGxBH,KAAA6B,YAAc,KACpB7B,KAAKsB,QAAU,IAAI,EAGbtB,KAAA8B,WAAa,KACnB9B,KAAKsB,QAAU,MACftB,KAAKuB,QAAU,IAAI,EAGbvB,KAAA+B,YAAc,KACpB/B,KAAKG,MAAQ,GACbH,KAAK2B,SAASC,KAAK,IACnB5B,KAAKgC,QAAQJ,OACb5B,KAAKiC,GAAGC,cAAc,UAAUC,OAAO,CAqG1C,CA/JC,iBAAAC,GACEpC,KAAKmB,aAAenB,KAAKG,MACzBH,KAAKqB,UAAYgB,QAAQrC,KAAKiC,GAAGC,cAAc,oBAC/ClC,KAAKsC,e,CAGP,kBAAAC,GACE,MAAMlB,EAAYgB,QAAQrC,KAAKiC,GAAGC,cAAc,oBAChD,GAAIb,IAAcrB,KAAKqB,UAAWrB,KAAKqB,UAAYA,C,CAOrD,aAAAiB,GACE,MAAME,EAAWxC,KAAKe,YAAcf,KAAKI,UAAYJ,KAAKoB,aAC1DpB,KAAKyC,UAAUC,aAAaF,EAAW,KAAOxC,KAAKG,OACnD,MAAMwC,EAAU3C,KAAKM,WAAakC,GAAYxC,KAAKG,MAAMyC,SAAW,EACpE5C,KAAKyC,UAAUI,YAAYF,EAAU,CAAEG,aAAc,MAAS,GAAIH,EAAU3C,KAAKO,gBAAkB,G,CAGrG,oBAAAwC,CAAqB3C,GACnBJ,KAAKoB,aAAehB,EACpBJ,KAAKsC,e,CAGP,iBAAAU,GACEhD,KAAKG,MAAQH,KAAKmB,Y,CAGpB,wBAAA8B,CAAyBC,GACvBlD,KAAKG,aAAe+C,IAAU,SAAWA,EAAQ,E,CAInD,cAAMC,GACJnD,KAAKiC,GAAGC,cAAc,UAAUC,O,CAwBlC,MAAAiB,GACE,MAAMC,EAAUrD,KAAKqD,SAAWrD,KAAKC,YACrC,MAAMuC,EAAWxC,KAAKe,YAAcf,KAAKI,UAAYJ,KAAKoB,aAC1D,MAAMkC,EAAStD,KAAKG,MAAMyC,OAAS,EACnC,MAAMW,EAAQvD,KAAKG,QAAUH,KAAKmB,aAClC,MAAMqC,EAAYxD,KAAKS,OAAS,UAAY6C,IAAWd,IAAaxC,KAAKK,SACzE,MAAMoD,EAAYzD,KAAKiB,OAASoB,QAAQrC,KAAK0D,cAC7C,MAAMC,EAAcC,EAAqB5D,KAAKY,MAC9C,MAAMiD,EAAWxE,EAAUW,KAAKY,MAEhC,MAAMkD,EAAc,CAClB9D,KAAK+D,gBACLN,EAAYzD,KAAKE,QAAU8D,WAC3BC,OAAO5B,SAAS6B,KAAK,MAAQF,UAE/B,OACEG,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAc,KACd,sBAAuB9B,EACvB,CAAC,eAAexC,KAAKY,QAAS,QAC3B2D,EAAkBvE,KAAKa,QAC3B,gBACc2B,EAAW,GAAKwB,UAAS,gBACzBhE,KAAKK,SAAW,GAAK2D,UAAS,gBAC9BhE,KAAKM,SAAW,GAAK0D,UAAS,eAC/BhE,KAAKiB,MAAQ,GAAK+C,UAAS,cAC5BV,EAAS,GAAKU,UAAS,eACtBhE,KAAKsB,QAAU,GAAK0C,UAAS,aAC/BT,EAAQ,GAAKS,UAAS,eACpBhE,KAAKuB,QAAU,GAAKyC,WAElCG,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,gBAAiB,KACjB,0BAA2BtE,KAAKc,WAAad,KAAKiB,MAClD,uBAAwBjB,KAAKiB,MAC7B,sBAAuB,KACvB,CAAC,eAAejB,KAAKY,QAAS,OAG/BZ,KAAKwE,MACJL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,qDAAoD,cAAa,QAC3EH,EAAA,WAAAE,IAAA,2CAASI,KAAMzE,KAAKwE,KAAM5D,KAAMiD,EAAUa,MAAM,aAGpDP,EAAA,SAAAE,IAAA,2CACE5D,KAAMT,KAAKS,KACXkE,GAAItB,EACJlD,MAAOH,KAAKG,MACZyE,YAAa5E,KAAK4E,YAClBxE,SAAUoC,EACVnC,SAAUL,KAAKK,SACfC,SAAUN,KAAKM,SACfU,UAAWhB,KAAKgB,UAChB6D,aAAc7E,KAAK6E,aACnBnE,UAAWV,KAAKU,WAAasD,UAC7BrD,aAAcX,KAAKW,cAAgBqD,UACnCM,MAAO,yBAAyBX,EAAYmB,QAAQ,QAAS,oDAAmD,aACpG9E,KAAKkB,UAAS,kBACTlB,KAAK+E,eAAc,mBAClBjB,EAAW,eACf9D,KAAKiB,MAAQ,OAAS+C,UACpCgB,QAAShF,KAAKwB,YACdyD,QAASjF,KAAK6B,YACdqD,OAAQlF,KAAK8B,aAEfqC,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAE,wBAAyB,KAAM,gCAAiCtE,KAAKqB,YAClF8C,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEZjB,GACCW,EAAA,sBAAAE,IAAA,2CACEC,MAAM,uBACNa,QAAQ,OACRvE,KAAMnB,EAAkBO,KAAKY,MAC7B4D,KAAK,cACL1D,UAAW,MACXsE,QAAO,KACPlE,UAAWlB,KAAKQ,WAChB6E,UAAWrF,KAAK+B,eAIrB0B,GACCU,EAAA,WAAAE,IAAA,2CACEC,MAAM,aACNgB,GAAG,MACHH,QAAQ,kBACRT,MAAM,WACNa,OAAQvF,KAAKE,QACbsF,KAAK,SAEJxF,KAAK0D,c","ignoreList":[]}
+{"version":3,"names":["inputCss","ICON_SIZE","md","sm","xs","CLEAR_BUTTON_SIZE","idCounter","Input","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","generatedId","errorId","value","disabled","readOnly","required","requiredMessage","clearLabel","type","inputMode","enterKeyHint","size","width","hasBorder","isInactive","autoFocus","error","ariaLabel","initialValue","formDisabled","hasSuffix","focused","touched","handleInput","e","target","dsChange","emit","handleFocus","handleBlur","handleClear","dsClear","el","querySelector","focus","componentWillLoad","Boolean","syncFormValue","componentDidRender","inactive","internals","setFormValue","missing","length","setValidity","valueMissing","formDisabledCallback","formResetCallback","formStateRestoreCallback","state","setFocus","render","inputId","filled","dirty","showClear","showError","errorMessage","textVariant","CONTROL_TEXT_VARIANT","iconSize","describedBy","ariaDescribedby","undefined","filter","join","h","Host","key","class","controlWidthClass","icon","name","color","id","placeholder","autoComplete","replace","ariaLabelledby","onInput","onFocus","onBlur","variant","rounded","onDsClick","as","textId","role"],"sources":["src/wc/components/Input/Input.css?tag=ds-input&encapsulation=scoped","src/wc/components/Input/Input.tsx"],"sourcesContent":["@import '../../utils/interaction-fill.css';\n@import '../../utils/control-inactive.css';\n@import '../../utils/control-density.css';\n@import '../../utils/control-width.css';\n@import '../../utils/typography.css';\n\n:host(.input-host) {\n  display: inline-flex;\n  flex-direction: column;\n  gap: var(--dimension-space-050);\n  --ds-input-fg: var(--color-foreground-primary);\n  --ds-input-placeholder: var(--color-foreground-secondary);\n  --ds-input-placeholder-active: var(--color-foreground-quaternary);\n  --ds-input-adornment-fg: var(--color-foreground-secondary);\n  --ds-input-border: var(--color-border-secondary);\n}\n\n:host(.ds-control-width--fill),\n:host(.ds-control-width--fill) .input-control {\n  width: 100%;\n}\n\n.input-control {\n  display: inline-flex;\n  align-items: center;\n  box-sizing: border-box;\n  height: var(--ds-control-height, var(--dimension-size-400));\n  padding: 0 var(--ds-control-padding-inline, var(--dimension-space-075));\n  gap: var(--ds-control-gap, var(--dimension-space-050));\n  overflow: hidden;\n  background: transparent;\n  border: none;\n  border-radius: var(--ds-control-radius, var(--dimension-radius-025));\n  color: var(--ds-input-fg);\n}\n\n.input-control--bordered {\n  --ds-interaction-border-width: var(--dimension-stroke-width-012);\n  --ds-interaction-border-color: var(--ds-input-border);\n}\n\n.input-control--error {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-negative);\n}\n\n.input-control:focus-within:not(.input-control--error) {\n  --ds-interaction-border-width: var(--dimension-stroke-width-018);\n  --ds-interaction-border-color: var(--color-border-bold-brand);\n}\n\n:host(.ds-control-inactive) .input-control::after {\n  background: transparent;\n}\n\n.native-input {\n  position: relative;\n  z-index: 2;\n  flex: 1 1 auto;\n  min-width: 0;\n  height: 100%;\n  padding: 0 var(--ds-control-label-inset, var(--dimension-space-025));\n  background: transparent;\n  border: none;\n  border-radius: inherit;\n  outline: none;\n  color: var(--ds-input-fg);\n  font-family: inherit;\n  -webkit-appearance: none;\n  appearance: none;\n}\n\n.native-input:disabled {\n  cursor: not-allowed;\n}\n\n.native-input:read-only:not(:disabled) {\n  cursor: default;\n}\n\n.native-input::placeholder {\n  color: var(--ds-input-placeholder);\n}\n\n.native-input:focus::placeholder {\n  color: var(--ds-input-placeholder-active);\n}\n\n.native-input[type='search']::-webkit-search-cancel-button,\n.native-input[type='search']::-webkit-search-decoration {\n  display: none;\n}\n\n.input-control__prefix,\n.input-control__suffix {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  width: var(--ds-control-icon, var(--dimension-iconography-md));\n  height: var(--ds-control-icon, var(--dimension-iconography-md));\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--ds-input-adornment-fg);\n}\n\n.input-control__suffix--empty {\n  display: none;\n}\n\n.input-control__clear {\n  position: relative;\n  z-index: 2;\n  flex-shrink: 0;\n  align-self: center;\n}\n\n.input-control.ds-control--md:has(.input-control__clear),\n.input-control.ds-control--sm:has(.input-control__clear) {\n  padding-right: var(--dimension-space-050);\n}\n\n.input-control.ds-control--xs:has(.input-control__clear) {\n  padding-right: 0;\n}\n\n.error-text {\n  width: 100%;\n}\n","import { AttachInternals, Component, Prop, State, Event, EventEmitter, Element, Method, Watch, h, Host } from '@stencil/core';\nimport { controlWidthClass, CONTROL_TEXT_VARIANT, type ControlWidth } from '../../utils';\n\nexport type InputType = 'text' | 'email' | 'tel' | 'url' | 'search' | 'password';\nexport type InputSize = 'md' | 'sm' | 'xs';\nexport type InputWidth = ControlWidth;\n\nconst ICON_SIZE: Record<InputSize, 'md' | 'sm' | 'xs'> = {\n  md: 'md',\n  sm: 'sm',\n  xs: 'xs',\n};\n\nconst CLEAR_BUTTON_SIZE: Record<InputSize, 'sm' | 'xs'> = {\n  md: 'sm',\n  sm: 'xs',\n  xs: 'xs',\n};\n\nlet idCounter = 0;\n\n@Component({\n  tag: 'ds-input',\n  styleUrl: 'Input.css',\n  scoped: true,\n  formAssociated: true,\n})\nexport class Input {\n  @Element() el!: HTMLElement;\n  @AttachInternals() internals!: ElementInternals;\n\n  private generatedId = `ds-input-${++idCounter}`;\n  private errorId = `${this.generatedId}-error`;\n\n  @Prop({ mutable: true }) value: string = '';\n  @Prop({ reflect: true }) name: string | undefined;\n  @Prop({ reflect: true }) form: string | undefined;\n  @Prop({ reflect: true }) disabled: boolean = false;\n  /** Keeps the value focusable and submittable while preventing edits. */\n  @Prop({ reflect: true }) readOnly: boolean = false;\n  @Prop({ reflect: true }) required: boolean = false;\n  @Prop() requiredMessage: string = 'This field is required.';\n  @Prop() clearLabel: string = 'Clear';\n  @Prop() placeholder: string | undefined;\n  @Prop() type: InputType = 'text';\n  /** Native browser autofill hint. */\n  @Prop({ attribute: 'autocomplete' }) autoComplete: string | undefined;\n  /** Preferred virtual keyboard without changing the value semantics. */\n  @Prop({ attribute: 'inputmode' }) inputMode: string = '';\n  /** Preferred virtual-keyboard action label. */\n  @Prop({ attribute: 'enterkeyhint' }) enterKeyHint: string = '';\n  /** Control density. */\n  @Prop() size: InputSize = 'md';\n  /** Width fit — fill the parent (default) or hug the available content. */\n  @Prop() width: InputWidth = 'fill';\n  /** Show the standard inset border. */\n  @Prop() hasBorder: boolean = true;\n  /** Optional leading icon name. */\n  @Prop() icon: string | undefined;\n  @Prop() isInactive: boolean = false;\n  @Prop() autoFocus: boolean = false;\n  @Prop() error: boolean = false;\n  @Prop() errorMessage: string | undefined;\n  /** Associates the internal input with an external <label>. */\n  @Prop() inputId: string | undefined;\n  @Prop({ attribute: 'aria-label' }) ariaLabel: string | null = null;\n  @Prop({ attribute: 'aria-labelledby' }) ariaLabelledby: string | undefined;\n  @Prop({ attribute: 'aria-describedby' }) ariaDescribedby: string | undefined;\n\n  @Event() dsChange!: EventEmitter<string>;\n  @Event() dsClear!: EventEmitter<void>;\n\n  private initialValue = '';\n  @State() private formDisabled = false;\n  @State() private hasSuffix = false;\n  @State() private focused = false;\n  @State() private touched = false;\n\n  componentWillLoad() {\n    this.initialValue = this.value;\n    this.hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    this.syncFormValue();\n  }\n\n  componentDidRender() {\n    const hasSuffix = Boolean(this.el.querySelector('[slot=\"suffix\"]'));\n    if (hasSuffix !== this.hasSuffix) this.hasSuffix = hasSuffix;\n  }\n\n  @Watch('value')\n  @Watch('disabled')\n  @Watch('isInactive')\n  @Watch('required')\n  syncFormValue() {\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    this.internals.setFormValue(inactive ? null : this.value);\n    const missing = this.required && !inactive && this.value.length === 0;\n    this.internals.setValidity(missing ? { valueMissing: true } : {}, missing ? this.requiredMessage : '');\n  }\n\n  formDisabledCallback(disabled: boolean) {\n    this.formDisabled = disabled;\n    this.syncFormValue();\n  }\n\n  formResetCallback() {\n    this.value = this.initialValue;\n  }\n\n  formStateRestoreCallback(state: string | File | FormData | null) {\n    this.value = typeof state === 'string' ? state : '';\n  }\n\n  @Method()\n  async setFocus() {\n    this.el.querySelector('input')?.focus();\n  }\n\n  private handleInput = (e: Event) => {\n    this.value = (e.target as HTMLInputElement).value;\n    this.dsChange.emit(this.value);\n  };\n\n  private handleFocus = () => {\n    this.focused = true;\n  };\n\n  private handleBlur = () => {\n    this.focused = false;\n    this.touched = true;\n  };\n\n  private handleClear = () => {\n    this.value = '';\n    this.dsChange.emit('');\n    this.dsClear.emit();\n    this.el.querySelector('input')?.focus();\n  };\n\n  render() {\n    const inputId = this.inputId ?? this.generatedId;\n    const inactive = this.isInactive || this.disabled || this.formDisabled;\n    const filled = this.value.length > 0;\n    const dirty = this.value !== this.initialValue;\n    const showClear = this.type === 'search' && filled && !inactive && !this.readOnly;\n    const showError = this.error && Boolean(this.errorMessage);\n    const textVariant = CONTROL_TEXT_VARIANT[this.size];\n    const iconSize = ICON_SIZE[this.size];\n\n    const describedBy = [\n      this.ariaDescribedby,\n      showError ? this.errorId : undefined,\n    ].filter(Boolean).join(' ') || undefined;\n\n    return (\n      <Host\n        class={{\n          'input-host': true,\n          'ds-control-inactive': inactive,\n          [`ds-control--${this.size}`]: true,\n          ...controlWidthClass(this.width),\n        }}\n        data-disabled={inactive ? '' : undefined}\n        data-readonly={this.readOnly ? '' : undefined}\n        data-required={this.required ? '' : undefined}\n        data-invalid={this.error ? '' : undefined}\n        data-filled={filled ? '' : undefined}\n        data-focused={this.focused ? '' : undefined}\n        data-dirty={dirty ? '' : undefined}\n        data-touched={this.touched ? '' : undefined}\n      >\n        <div\n          class={{\n            'input-control': true,\n            'input-control--bordered': this.hasBorder || this.error,\n            'input-control--error': this.error,\n            'ds-interaction-fill': true,\n            [`ds-control--${this.size}`]: true,\n          }}\n        >\n          {this.icon && (\n            <span class=\"input-control__prefix ds-interaction-fill__content\" aria-hidden=\"true\">\n              <ds-icon name={this.icon} size={iconSize} color=\"inherit\" />\n            </span>\n          )}\n          <input\n            type={this.type}\n            id={inputId}\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={inactive}\n            readOnly={this.readOnly}\n            required={this.required}\n            autoFocus={this.autoFocus}\n            autoComplete={this.autoComplete}\n            inputMode={this.inputMode || undefined}\n            enterKeyHint={this.enterKeyHint || undefined}\n            class={`native-input ds-text--${textVariant.replace('text-', '')} ds-text--regular ds-interaction-fill__content`}\n            aria-label={this.ariaLabel}\n            aria-labelledby={this.ariaLabelledby}\n            aria-describedby={describedBy}\n            aria-invalid={this.error ? 'true' : undefined}\n            onInput={this.handleInput}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n          <span class={{ 'input-control__suffix': true, 'input-control__suffix--empty': !this.hasSuffix }}>\n            <slot name=\"suffix\" />\n          </span>\n          {showClear && (\n            <ds-button-unfilled\n              class=\"input-control__clear\"\n              variant=\"icon\"\n              size={CLEAR_BUTTON_SIZE[this.size]}\n              icon=\"CrossCircle\"\n              hasBorder={false}\n              rounded\n              ariaLabel={this.clearLabel}\n              onDsClick={this.handleClear}\n            />\n          )}\n        </div>\n        {showError && (\n          <ds-text\n            class=\"error-text\"\n            as=\"div\"\n            variant=\"text-body-small\"\n            color=\"negative\"\n            textId={this.errorId}\n            role=\"alert\"\n          >\n            {this.errorMessage}\n          </ds-text>\n        )}\n      </Host>\n    );\n  }\n}\n"],"mappings":"yTAAA,MAAMA,EAAW,IAAM,wzbCOvB,MAAMC,EAAmD,CACvDC,GAAI,KACJC,GAAI,KACJC,GAAI,MAGN,MAAMC,EAAoD,CACxDH,GAAI,KACJC,GAAI,KACJC,GAAI,MAGN,IAAIE,EAAY,E,MAQHC,EAAKC,EAAA,MAAAD,UAAAE,EANlB,WAAAC,CAAAC,G,kJAUUC,KAAAC,YAAc,cAAcP,IAC5BM,KAAAE,QAAU,GAAGF,KAAKC,oBAEDD,KAAAG,MAAgB,GAGhBH,KAAAI,SAAoB,MAEpBJ,KAAAK,SAAoB,MACpBL,KAAAM,SAAoB,MACrCN,KAAAO,gBAA0B,0BAC1BP,KAAAQ,WAAqB,QAErBR,KAAAS,KAAkB,OAIQT,KAAAU,UAAoB,GAEjBV,KAAAW,aAAuB,GAEpDX,KAAAY,KAAkB,KAElBZ,KAAAa,MAAoB,OAEpBb,KAAAc,UAAqB,KAGrBd,KAAAe,WAAsB,MACtBf,KAAAgB,UAAqB,MACrBhB,KAAAiB,MAAiB,MAIUjB,KAAAkB,UAA2B,KAOtDlB,KAAAmB,aAAe,GACNnB,KAAAoB,aAAe,MACfpB,KAAAqB,UAAY,MACZrB,KAAAsB,QAAU,MACVtB,KAAAuB,QAAU,MA0CnBvB,KAAAwB,YAAeC,IACrBzB,KAAKG,MAASsB,EAAEC,OAA4BvB,MAC5CH,KAAK2B,SAASC,KAAK5B,KAAKG,MAAM,EAGxBH,KAAA6B,YAAc,KACpB7B,KAAKsB,QAAU,IAAI,EAGbtB,KAAA8B,WAAa,KACnB9B,KAAKsB,QAAU,MACftB,KAAKuB,QAAU,IAAI,EAGbvB,KAAA+B,YAAc,KACpB/B,KAAKG,MAAQ,GACbH,KAAK2B,SAASC,KAAK,IACnB5B,KAAKgC,QAAQJ,OACb5B,KAAKiC,GAAGC,cAAc,UAAUC,OAAO,CAqG1C,CA/JC,iBAAAC,GACEpC,KAAKmB,aAAenB,KAAKG,MACzBH,KAAKqB,UAAYgB,QAAQrC,KAAKiC,GAAGC,cAAc,oBAC/ClC,KAAKsC,e,CAGP,kBAAAC,GACE,MAAMlB,EAAYgB,QAAQrC,KAAKiC,GAAGC,cAAc,oBAChD,GAAIb,IAAcrB,KAAKqB,UAAWrB,KAAKqB,UAAYA,C,CAOrD,aAAAiB,GACE,MAAME,EAAWxC,KAAKe,YAAcf,KAAKI,UAAYJ,KAAKoB,aAC1DpB,KAAKyC,UAAUC,aAAaF,EAAW,KAAOxC,KAAKG,OACnD,MAAMwC,EAAU3C,KAAKM,WAAakC,GAAYxC,KAAKG,MAAMyC,SAAW,EACpE5C,KAAKyC,UAAUI,YAAYF,EAAU,CAAEG,aAAc,MAAS,GAAIH,EAAU3C,KAAKO,gBAAkB,G,CAGrG,oBAAAwC,CAAqB3C,GACnBJ,KAAKoB,aAAehB,EACpBJ,KAAKsC,e,CAGP,iBAAAU,GACEhD,KAAKG,MAAQH,KAAKmB,Y,CAGpB,wBAAA8B,CAAyBC,GACvBlD,KAAKG,aAAe+C,IAAU,SAAWA,EAAQ,E,CAInD,cAAMC,GACJnD,KAAKiC,GAAGC,cAAc,UAAUC,O,CAwBlC,MAAAiB,GACE,MAAMC,EAAUrD,KAAKqD,SAAWrD,KAAKC,YACrC,MAAMuC,EAAWxC,KAAKe,YAAcf,KAAKI,UAAYJ,KAAKoB,aAC1D,MAAMkC,EAAStD,KAAKG,MAAMyC,OAAS,EACnC,MAAMW,EAAQvD,KAAKG,QAAUH,KAAKmB,aAClC,MAAMqC,EAAYxD,KAAKS,OAAS,UAAY6C,IAAWd,IAAaxC,KAAKK,SACzE,MAAMoD,EAAYzD,KAAKiB,OAASoB,QAAQrC,KAAK0D,cAC7C,MAAMC,EAAcC,EAAqB5D,KAAKY,MAC9C,MAAMiD,EAAWxE,EAAUW,KAAKY,MAEhC,MAAMkD,EAAc,CAClB9D,KAAK+D,gBACLN,EAAYzD,KAAKE,QAAU8D,WAC3BC,OAAO5B,SAAS6B,KAAK,MAAQF,UAE/B,OACEG,EAACC,EAAI,CAAAC,IAAA,2CACHC,MAAO,CACL,aAAc,KACd,sBAAuB9B,EACvB,CAAC,eAAexC,KAAKY,QAAS,QAC3B2D,EAAkBvE,KAAKa,QAC3B,gBACc2B,EAAW,GAAKwB,UAAS,gBACzBhE,KAAKK,SAAW,GAAK2D,UAAS,gBAC9BhE,KAAKM,SAAW,GAAK0D,UAAS,eAC/BhE,KAAKiB,MAAQ,GAAK+C,UAAS,cAC5BV,EAAS,GAAKU,UAAS,eACtBhE,KAAKsB,QAAU,GAAK0C,UAAS,aAC/BT,EAAQ,GAAKS,UAAS,eACpBhE,KAAKuB,QAAU,GAAKyC,WAElCG,EAAA,OAAAE,IAAA,2CACEC,MAAO,CACL,gBAAiB,KACjB,0BAA2BtE,KAAKc,WAAad,KAAKiB,MAClD,uBAAwBjB,KAAKiB,MAC7B,sBAAuB,KACvB,CAAC,eAAejB,KAAKY,QAAS,OAG/BZ,KAAKwE,MACJL,EAAA,QAAAE,IAAA,2CAAMC,MAAM,qDAAoD,cAAa,QAC3EH,EAAA,WAAAE,IAAA,2CAASI,KAAMzE,KAAKwE,KAAM5D,KAAMiD,EAAUa,MAAM,aAGpDP,EAAA,SAAAE,IAAA,2CACE5D,KAAMT,KAAKS,KACXkE,GAAItB,EACJlD,MAAOH,KAAKG,MACZyE,YAAa5E,KAAK4E,YAClBxE,SAAUoC,EACVnC,SAAUL,KAAKK,SACfC,SAAUN,KAAKM,SACfU,UAAWhB,KAAKgB,UAChB6D,aAAc7E,KAAK6E,aACnBnE,UAAWV,KAAKU,WAAasD,UAC7BrD,aAAcX,KAAKW,cAAgBqD,UACnCM,MAAO,yBAAyBX,EAAYmB,QAAQ,QAAS,oDAAmD,aACpG9E,KAAKkB,UAAS,kBACTlB,KAAK+E,eAAc,mBAClBjB,EAAW,eACf9D,KAAKiB,MAAQ,OAAS+C,UACpCgB,QAAShF,KAAKwB,YACdyD,QAASjF,KAAK6B,YACdqD,OAAQlF,KAAK8B,aAEfqC,EAAA,QAAAE,IAAA,2CAAMC,MAAO,CAAE,wBAAyB,KAAM,gCAAiCtE,KAAKqB,YAClF8C,EAAA,QAAAE,IAAA,2CAAMI,KAAK,YAEZjB,GACCW,EAAA,sBAAAE,IAAA,2CACEC,MAAM,uBACNa,QAAQ,OACRvE,KAAMnB,EAAkBO,KAAKY,MAC7B4D,KAAK,cACL1D,UAAW,MACXsE,QAAO,KACPlE,UAAWlB,KAAKQ,WAChB6E,UAAWrF,KAAK+B,eAIrB0B,GACCU,EAAA,WAAAE,IAAA,2CACEC,MAAM,aACNgB,GAAG,MACHH,QAAQ,kBACRT,MAAM,WACNa,OAAQvF,KAAKE,QACbsF,KAAK,SAEJxF,KAAK0D,c","ignoreList":[]}

package/dist/components/ds-markdown.js

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

package/dist/components/ds-menu.js

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

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

@@ -1,2 +1,2 @@
-import{p as e,H as s,h as r,a,t}from"./index.js";const b=()=>`.sc-ds-message-bubble-h{display:inline-flex;max-width:80%;box-sizing:border-box;-webkit-user-select:text;user-select:text}.message-bubble.sc-ds-message-bubble{min-width:0;padding-block:var(--dimension-space-100);padding-inline:calc(var(--dimension-space-100) + var(--dimension-space-025));border-radius:var(--dimension-radius-050);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);box-sizing:border-box;overflow-wrap:anywhere}.message-bubble--user.sc-ds-message-bubble-h .message-bubble.sc-ds-message-bubble{background:var(--color-translucent-translucent);color:var(--color-foreground-secondary);box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.message-bubble--received.sc-ds-message-bubble-h .message-bubble.sc-ds-message-bubble{box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}`;const o=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="received"}render(){return r(a,{key:"5a2598c0a6c8c7886214467bd84279d066f6b018",class:`message-bubble--${this.variant}`},r("div",{key:"64fcb0695f10824cae075ec078e08e095bc0306e",class:"message-bubble"},r("slot",{key:"c04bc1d8e56cddb45b5731237e014bd114c51cea"})))}static get style(){return b()}},[262,"ds-message-bubble",{variant:[1]}]);function i(){if(typeof customElements==="undefined"){return}const e=["ds-message-bubble"];e.forEach((e=>{switch(e){case"ds-message-bubble":if(!customElements.get(t(e))){customElements.define(t(e),o)}break}}))}i();const n=o;const c=i;export{n as DsMessageBubble,c as defineCustomElement};
+import{p as e,H as s,h as a,a as r,t as b}from"./index.js";const t=()=>`.sc-ds-message-bubble-h{display:inline-flex;max-width:80%;box-sizing:border-box;-webkit-user-select:text;user-select:text}.message-bubble.sc-ds-message-bubble{min-width:0;padding-block:var(--dimension-space-100);padding-inline:calc(var(--dimension-space-100) + var(--dimension-space-025));border-radius:var(--dimension-radius-050);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);box-sizing:border-box;overflow-wrap:anywhere}.message-bubble--user.sc-ds-message-bubble-h .message-bubble.sc-ds-message-bubble{background:var(--color-translucent-translucent);color:var(--color-foreground-secondary);box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}.message-bubble--received.sc-ds-message-bubble-h .message-bubble.sc-ds-message-bubble{box-shadow:inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary)}`;const o=e(class e extends s{constructor(e){super();if(e!==false){this.__registerHost()}this.variant="received"}render(){return a(r,{key:"82e0b7bab0472afa9d37bcefbee5828a47e457ea",class:`message-bubble--${this.variant}`},a("div",{key:"c428bb2e664f1e2ce1b7c91aa3a453cbff71fb8a",class:"message-bubble"},a("slot",{key:"697a08ef1b480ecdbcf8091e3dc2cc8b42b53e9a"})))}static get style(){return t()}},[262,"ds-message-bubble",{variant:[1]}]);function i(){if(typeof customElements==="undefined"){return}const e=["ds-message-bubble"];e.forEach((e=>{switch(e){case"ds-message-bubble":if(!customElements.get(b(e))){customElements.define(b(e),o)}break}}))}i();const n=o;const c=i;export{n as DsMessageBubble,c as defineCustomElement};
 //# sourceMappingURL=ds-message-bubble.js.map

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

@@ -1 +1 @@
-{"version":3,"names":["messageBubbleCss","MessageBubble","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","render","h","Host","key","class"],"sources":["src/wc/components/MessageBubble/MessageBubble.css?tag=ds-message-bubble&encapsulation=scoped","src/wc/components/MessageBubble/MessageBubble.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  max-width: 80%;\n  box-sizing: border-box;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\n.message-bubble {\n  min-width: 0;\n  padding-block: var(--dimension-space-100);\n  padding-inline: calc(var(--dimension-space-100) + var(--dimension-space-025));\n  border-radius: var(--dimension-radius-050);\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  box-sizing: border-box;\n  overflow-wrap: anywhere;\n}\n\n:host(.message-bubble--user) .message-bubble {\n  background: var(--color-translucent-translucent);\n  color: var(--color-foreground-secondary);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.message-bubble--received) .message-bubble {\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type MessageBubbleVariant = 'user' | 'received';\n\n@Component({\n  tag: 'ds-message-bubble',\n  styleUrl: 'MessageBubble.css',\n  scoped: true,\n})\nexport class MessageBubble {\n  @Prop() variant: MessageBubbleVariant = 'received';\n\n  render() {\n    return (\n      <Host class={`message-bubble--${this.variant}`}>\n        <div class=\"message-bubble\"><slot /></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"iDAAA,MAAMA,EAAmB,IAAM,4kC,MCSlBC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAgC,UASzC,CAPC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,mBAAmBN,KAAKC,WACnCE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBAAiBH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}
+{"version":3,"names":["messageBubbleCss","MessageBubble","__stencil_proxyCustomElement","HTMLElement","constructor","registerHost","this","variant","render","h","Host","key","class"],"sources":["src/wc/components/MessageBubble/MessageBubble.css?tag=ds-message-bubble&encapsulation=scoped","src/wc/components/MessageBubble/MessageBubble.tsx"],"sourcesContent":[":host {\n  display: inline-flex;\n  max-width: 80%;\n  box-sizing: border-box;\n  -webkit-user-select: text;\n  user-select: text;\n}\n\n.message-bubble {\n  min-width: 0;\n  padding-block: var(--dimension-space-100);\n  padding-inline: calc(var(--dimension-space-100) + var(--dimension-space-025));\n  border-radius: var(--dimension-radius-050);\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  box-sizing: border-box;\n  overflow-wrap: anywhere;\n}\n\n:host(.message-bubble--user) .message-bubble {\n  background: var(--color-translucent-translucent);\n  color: var(--color-foreground-secondary);\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n\n:host(.message-bubble--received) .message-bubble {\n  box-shadow: inset 0 0 0 var(--dimension-stroke-width-012) var(--color-border-tertiary);\n}\n","import { Component, h, Host, Prop } from '@stencil/core';\n\nexport type MessageBubbleVariant = 'user' | 'received';\n\n@Component({\n  tag: 'ds-message-bubble',\n  styleUrl: 'MessageBubble.css',\n  scoped: true,\n})\nexport class MessageBubble {\n  @Prop() variant: MessageBubbleVariant = 'received';\n\n  render() {\n    return (\n      <Host class={`message-bubble--${this.variant}`}>\n        <div class=\"message-bubble\"><slot /></div>\n      </Host>\n    );\n  }\n}\n"],"mappings":"2DAAA,MAAMA,EAAmB,IAAM,4kC,MCSlBC,EAAaC,EAAA,MAAAD,UAAAE,EAL1B,WAAAC,CAAAC,G,4CAMUC,KAAAC,QAAgC,UASzC,CAPC,MAAAC,GACE,OACEC,EAACC,EAAI,CAAAC,IAAA,2CAACC,MAAO,mBAAmBN,KAAKC,WACnCE,EAAA,OAAAE,IAAA,2CAAKC,MAAM,kBAAiBH,EAAA,QAAAE,IAAA,8C","ignoreList":[]}