@sbb-esta/lyne-elements 5.2.0 → 5.3.0

package/_index.scss

@@ -15,6 +15,7 @@
 @forward './container/container.global' as container-*;
 @forward './dialog/dialog.global' as dialog-*;
 @forward './divider/divider.global' as divider-*;
+@forward './download/download.global' as download-*;
 @forward './expansion-panel/expansion-panel.global' as expansion-panel-*;
 @forward './file-selector/file-selector.global' as file-selector-*;
 @forward './flip-card/flip-card.global' as flip-card-*;

package/calendar.pure.js

@@ -1,6 +1,6 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,nothing as i,unsafeCSS as a}from"lit";import{property as o,state as s}from"lit/decorators.js";import{MONDAY as c,SbbButtonLikeBaseElement as l,SbbDisabledMixin as u,SbbElement as ee,SbbFormAssociatedMixin as te,SbbLanguageController as d,SbbPropertyWatcherController as f,THURSDAY as ne,TUESDAY as re,WEDNESDAY as ie,buttonResetStyles as ae,defaultDateAdapter as p,forceType as m,handleDistinctChange as oe,i18nCalendarDateSelection as h,i18nCalendarWeekNumber as g,i18nNextMonth as se,i18nNextYear as ce,i18nNextYearRange as le,i18nPreviousMonth as ue,i18nPreviousYear as de,i18nPreviousYearRange as fe,i18nYearMonthSelection as pe,isArrowKeyOrPageKeysPressed as me,plainDate as _,readConfig as v,screenReaderOnlyStyles as he}from"./core.js";import{SbbSecondaryButtonElement as ge}from"./button.pure.js";import{SbbIconElement as _e}from"./icon.pure.js";var y=`:host{--sbb-focus-outline-offset:.125rem;--sbb-calendar-cell-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));font-size:var(--sbb-calendar-cell-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);cursor:var(--sbb-calendar-cell-cursor);color:var(--sbb-calendar-cell-color);border-radius:calc(var(--sbb-border-radius-4x) + var(--sbb-calendar-cell-border-width));margin:var(--sbb-calendar-cell-margin);padding:var(--sbb-calendar-cell-border-width);transition-duration:var(--sbb-calendar-cell-transition-duration);transition-timing-function:var(--sbb-calendar-cell-transition-easing-function);background-clip:content-box;transition-property:background-color;display:block}:host(:is(sbb-calendar-weekday,sbb-calendar-weeknumber)){--sbb-calendar-cell-font-size:var(--sbb-text-font-size-xs);--sbb-calendar-day-height:var(--sbb-calendar-day-size);color:var(--sbb-calendar-header-color)}:host(:is(sbb-calendar-day,sbb-calendar-weekday,sbb-calendar-weeknumber)){height:var(--sbb-calendar-day-height);width:var(--sbb-calendar-day-width)}:host(:is(:state(current),[state--current])){font-weight:700}:host(:is(:state(selected),[state--selected])){border:var(--sbb-calendar-cell-border-width) solid var(--sbb-calendar-cell-border-color-selected);padding:0}:host(:disabled){--sbb-calendar-cell-color:var(--sbb-calendar-cell-disabled-color);--sbb-calendar-cell-cursor:unset}:host(:focus-visible){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width)}@media (any-hover:hover){:host(:not(:disabled,:where(:is(:state(active),[state--active]),:active)):hover){background-color:var(--sbb-calendar-cell-background-color-hover)}}@media (any-hover:hover) and (forced-colors:active){:host(:not(:disabled):hover){outline-offset:var(--sbb-focus-outline-offset);outline:var(--sbb-focus-outline-color) var(--sbb-focus-outline-style,solid) var(--sbb-focus-outline-width);--sbb-focus-outline-style:initial}}:host(:not(:disabled):where(:is(:state(active),[state--active]),:active)){background-color:var(--sbb-calendar-cell-background-color-active)}.sbb-action-base{flex-direction:column;justify-content:center;width:100%;height:100%;display:flex}.sbb-calendar-year,.sbb-calendar-month{height:var(--sbb-calendar-cell-year-month-height);width:var(--sbb-calendar-cell-year-month-width)}:host(:is(:state(crossed-out),[state--crossed-out])) :is(.sbb-calendar-year,.sbb-calendar-month,.sbb-calendar-day__value):after{content:"";height:var(--sbb-calendar-cell-disabled-height);width:var(--sbb-calendar-cell-disabled-width);background-color:var(--sbb-calendar-cell-disabled-color);position:absolute;top:50%;left:50%;translate:-50% -50%;rotate:-45deg}
 `,b=class extends u(l){static{this.styles=[a(y)]}constructor(){super(),this.dateAdapter=v().datetime?.dateAdapter??p,this.addController(new f(this,()=>this.getParent(),{dateFilter:e=>this.setDisabledFilteredState(e),min:e=>this.setDisabledFilteredState(e),max:e=>this.setDisabledFilteredState(e),value:e=>this.setSelectedState(e)}))}getParent(){return this.getRootNode?.()?.host?.closest(`sbb-calendar`)}formResetCallback(){}formStateRestoreCallback(e,t){}},x=`.sbb-calendar-day{justify-content:var(--sbb-calendar-day-justify-content)}.sbb-calendar-day__value{height:var(--sbb-calendar-day-value-height);justify-content:center;align-items:center;display:flex;position:relative}.sbb-calendar-day__extra{display:var(--sbb-calendar-day-extra-display);height:var(--sbb-calendar-day-extra-height)}::slotted(*){height:var(--sbb-calendar-day-extra-height)}
-`;let S=(()=>{let r=b,i=[],c,l;return class extends r{constructor(){super(...arguments),this._value=(t(this,i),null)}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;c=[o()],l=[s()],e(this,null,c,{kind:`setter`,name:`slot`,static:!1,private:!1,access:{has:e=>`slot`in e,set:(e,t)=>{e.slot=t}},metadata:t},null,i),e(this,null,l,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,i),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-calendar-day`}static{this.styles=[a(x)]}set slot(e){super.slot=e,this.value=this.dateAdapter.deserialize(e)}get slot(){return super.slot}set value(e){let t=this.dateAdapter.getValidDateOrNull(this.dateAdapter.deserialize(e));if(t){this._value=t;let e=this.dateAdapter.sameDate(t,this.dateAdapter.today());this.toggleState(`current`,e),this.internals.ariaCurrent=e?`date`:null,this.internals.ariaLabel=this.dateAdapter.getAccessibilityFormatDate(t);let n=this.getParent();n&&(this.setDisabledFilteredState(n),this.setSelectedState(n))}}get value(){return this._value}connectedCallback(){super.connectedCallback(),this.tabIndex=-1}getParent(){return this.closest?.(`sbb-calendar`)??this.getRootNode?.()?.host?.closest(`sbb-calendar`)}setSelectedState(e){let t=!!this.value&&(e.multiple?e.value.some(e=>this.dateAdapter.sameDate(this.value,e)):!!e.value&&this.dateAdapter.compareDate(this.value,e.value)===0);this.toggleState(`selected`,t),this.internals.ariaPressed=String(t)}setDisabledFilteredState(e){let t=!this._isActiveDate(e.dateFilter),n=!this._isDayInRange(e.min,e.max);this.disabled=t||n,this.internals.ariaDisabled=String(this.disabled),this.toggleState(`crossed-out`,t&&!n)}_isActiveDate(e){return e&&this.value?e(this.value):!0}_isDayInRange(e,t){return!e&&!t?!0:this.dateAdapter.sameDate(this.value,this.dateAdapter.clampDate(this.value,e,t))}_handleSlotchange(e){this.internals.ariaDescribedByElements=e.target.assignedElements()}renderTemplate(){return n` <span class="sbb-calendar-day__value" aria-hidden="true">
+`;let S=(()=>{let r=b,i=[],c,l;return class extends r{constructor(){super(...arguments),this._value=(t(this,i),null)}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;c=[o()],l=[s()],e(this,null,c,{kind:`setter`,name:`slot`,static:!1,private:!1,access:{has:e=>`slot`in e,set:(e,t)=>{e.slot=t}},metadata:t},null,i),e(this,null,l,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,i),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-calendar-day`}static{this.styles=[a(x)]}set slot(e){super.slot=e,this.value=this.dateAdapter.deserialize(e)}get slot(){return super.slot}set value(e){let t=this.dateAdapter.getValidDateOrNull(this.dateAdapter.deserialize(e));if(t){this._value=t;let e=this.dateAdapter.sameDate(t,this.dateAdapter.today());this.toggleState(`current`,e),this.internals.ariaCurrent=e?`date`:null,this.internals.ariaLabel=this.dateAdapter.getAccessibilityFormatDate(t);let n=this.getParent();n&&(this.setDisabledFilteredState(n),this.setSelectedState(n))}}get value(){return this._value}connectedCallback(){super.connectedCallback(),this.tabIndex=-1}getParent(){return this.closest?.(`sbb-calendar`)??this.getRootNode?.()?.host?.closest(`sbb-calendar`)}setSelectedState(e){let t=!!this.value&&(e.multiple?e.value.some(e=>this.dateAdapter.sameDate(this.value,e)):!!e.value&&this.dateAdapter.compareDate(this.value,e.value)===0);this.toggleState(`selected`,t),this.internals.ariaPressed=String(t)}setDisabledFilteredState(e){let t=!this._isActiveDate(e.dateFilter),n=!this._isDayInRange(e.min,e.max);this.disabled=t||n,this.internals.ariaDisabled=String(this.disabled),this.toggleState(`crossed-out`,t&&!n)}_isActiveDate(e){return e&&this.value?e(this.value):!0}_isDayInRange(e,t){return!e&&!t||this.dateAdapter.sameDate(this.value,this.dateAdapter.clampDate(this.value,e,t))}_handleSlotchange(e){this.internals.ariaDescribedByElements=e.target.assignedElements()}renderTemplate(){return n` <span class="sbb-calendar-day__value" aria-hidden="true">
         ${this.dateAdapter.getDate(this.value)}
       </span>
       <span class="sbb-calendar-day__extra">

package/chip.pure.js

@@ -14,4 +14,4 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isS
       </sbb-mini-button>
       <span class="sbb-screen-reader-only">, ${g[this._language.current]}</span>
     `}}})();var w=`:host{gap:var(--sbb-chip-group-gap);width:100%;margin-block:var(--sbb-chip-group-margin-block);line-height:var(--sbb-typo-line-height-text);flex-wrap:wrap;align-items:center;display:flex}:host(:is(:is(:state(size-s),[state--size-s]),:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:0}:host(:is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-with-label-s)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-s),[state--size-s]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-without-label-s)}:host(:is(:is(:state(size-l),[state--size-l]),:is(:state(size-m),[state--size-m]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-base-lm)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-without-label-m)}:host(:is(:state(without-label),[state--without-label]):not(:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block:var(--sbb-chip-group-margin-block-no-label-not-empty)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-m),[state--size-m]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-with-label-m)}:host(:not(:is(:state(without-label),[state--without-label]),:is(:state(empty),[state--empty]),:is(:state(size-s),[state--size-s]),:is(:state(size-m),[state--size-m]),:is(:state(size-l),[state--size-l]))){--sbb-chip-group-margin-block:var(--sbb-chip-group-margin-block-with-label-not-empty)}:host(:is(:state(without-label),[state--without-label]):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-without-label-l)}:host(:not(:is(:state(without-label),[state--without-label])):is(:state(size-l),[state--size-l]):not(:is(:state(empty),[state--empty]))){--sbb-chip-group-margin-block:var(--_sbb-chip-group-margin-block-with-label-l)}::slotted(input){flex:1 1 var(--sbb-chip-group-input-min-width);max-height:1.5rem}::slotted(sbb-chip){max-width:100%}
-`,T=class extends Event{constructor(e){super(`chipinputtokenend`,{cancelable:!0,bubbles:!0,composed:!0}),this.origin=e.origin,this.value=e.value,this.label=e.label}setValue(e){this.value=e}setLabel(e){this.label=e}};let E=(()=>{let f=p(o(u(c(s)))),g=[],b,x,S=[],E=[],D,O=[],k=[],A,j=[],M=[];return class extends f{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;b=[a({type:Array})],x=[a({attribute:!1})],D=[a({attribute:`separator-keys`,type:Array})],A=[m(),a({attribute:`add-on-blur`,type:Boolean})],e(this,null,b,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,g),e(this,null,x,{kind:`accessor`,name:`displayWith`,static:!1,private:!1,access:{has:e=>`displayWith`in e,get:e=>e.displayWith,set:(e,t)=>{e.displayWith=t}},metadata:t},S,E),e(this,null,D,{kind:`accessor`,name:`separatorKeys`,static:!1,private:!1,access:{has:e=>`separatorKeys`in e,get:e=>e.separatorKeys,set:(e,t)=>{e.separatorKeys=t}},metadata:t},O,k),e(this,null,A,{kind:`accessor`,name:`addOnBlur`,static:!1,private:!1,access:{has:e=>`addOnBlur`in e,get:e=>e.addOnBlur,set:(e,t)=>{e.addOnBlur=t}},metadata:t},j,M),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-chip-group`}static{this.role=`listbox`}static{this.styles=[i(w)]}static{this.events={input:`input`,change:`change`,chipinputtokenend:`chipinputtokenend`}}set value(e){e??=[];let t=this.value,n=[...t];for(let t of e)n.includes(t)&&n.splice(n.indexOf(t),1);n.forEach(e=>this._chipElements().find(t=>t.value===e)?.remove());let r=[...e];for(let e of t)r.includes(e)&&r.splice(r.indexOf(e),1);r.forEach(e=>this._createChipElement(e))}get value(){return this._chipElements().map(e=>e.value)}#e;get displayWith(){return this.#e}set displayWith(e){this.#e=e}#t;get separatorKeys(){return this.#t}set separatorKeys(e){this.#t=e}#n;get addOnBlur(){return this.#n}set addOnBlur(e){this.#n=e}constructor(){super(),this.#e=(t(this,g),t(this,S,null)),this.#t=(t(this,E),t(this,O,[`Enter`])),this.#n=(t(this,k),t(this,j,!1)),this._inputAttributeObserver=(t(this,M),r?null:new MutationObserver(()=>this._reactToInputChanges())),this._language=new l(this),this._previousSize=null,this.addEventListener?.(C.events.requestdelete,e=>this._deleteChip(e.target)),this.addEventListener?.(`keydown`,e=>this._onChipKeyDown(e)),this.addController(new d(this,()=>this.closest(`sbb-form-field`),{size:e=>this._updateSize(e.size),label:e=>this._updateLabelState(e),hiddenLabel:e=>this._updateLabelState(e)}))}_updateLabelState(e){this.toggleState(`without-label`,!e.label||e.hiddenLabel)}connectedCallback(){super.connectedCallback(),this._setupComponent()}willUpdate(e){super.willUpdate(e),(e.has(`disabled`)||e.has(`formDisabled`)||e.has(`negative`))&&this._proxyStateToChips()}formResetCallback(){this.value=null}formStateRestoreCallback(e,t){if(!e){this.value=null;return}this._readFormData(e).then(e=>this.value=e)}async _readFormData(e){return Promise.all(e.getAll(this.name).map(async e=>e instanceof Blob?JSON.parse(await e.text()):e))}shouldValidate(e){return super.shouldValidate(e)||e===`required`||e===`value`}validate(){super.validate(),this.required&&this.value.length===0?this.setValidityFlag(`valueMissing`,v[this._language.current]):this.removeValidityFlag(`valueMissing`)}_chipElements(){return Array.from(this.querySelectorAll?.(`sbb-chip`)??[])}_enabledChipElements(){return Array.from(this.querySelectorAll?.(`sbb-chip:not([disabled])`)??[])}_setupComponent(){let e=this.querySelector(`input`);e&&e!==this._inputElement&&(this._inputAbortController?.abort(),this._inputAttributeObserver?.disconnect(),this._inputElement=e,this._inputAbortController=new AbortController,this._inputElement.addEventListener(`keydown`,e=>this._onInputKeyDown(e),{signal:this._inputAbortController.signal}),this._inputElement.addEventListener(`blur`,()=>this._onInputBlur(),{signal:this._inputAbortController.signal,capture:!0}),this._inputElement.addEventListener(`inputAutocomplete`,e=>this._createChipFromInput(`autocomplete`,e.option.value),{signal:this._inputAbortController.signal}),this._inputAttributeObserver?.observe(this._inputElement,{attributes:!0,attributeFilter:[`readonly`,`disabled`]})),this.closest(`sbb-form-field`)||this._updateSize(null),this.toggleState(`empty`,this.value.length===0),this._reactToInputChanges(),this._updateInputDescription(),this.updateFormValue()}_onChipKeyDown(e){let t=e.target;if(t.localName===`sbb-chip`){if(y(e)){let n=this._enabledChipElements();n[h(e,n.indexOf(t),n.length)].focus();return}switch(e.key){case`Backspace`:case`Delete`:!t.readOnly&&!t.disabled&&(e.preventDefault(),this._deleteChip(t));break}}}_onInputKeyDown(e){switch(e.key){case`Backspace`:case`ArrowLeft`:this._inputElement.value||this._focusChip();break;case`Enter`:e.preventDefault();break}this.separatorKeys.includes(e.key)&&(e.preventDefault(),this._createChipFromInput(`input`))}_onInputBlur(){this.addOnBlur&&this._createChipFromInput(`input`)}_createChipFromInput(e=`input`,t){let n=t??this._inputElement.value.trim();if(!n)return;let r=new T({origin:e,value:n,label:(t?this.displayWith?.(t):null)??void 0});this.dispatchEvent(r)&&(this._createChipElement(r.value,r.label),this._inputElement.value=``,this._emitInputEvents())}_deleteChip(e){let t=this._enabledChipElements();e.remove(),this._emitInputEvents(),this._focusChip(t.indexOf(e))}_focusChip(e){let t=this._enabledChipElements();if(e!==void 0&&t[e]){t[e].focus();return}if(t.length>0){t[t.length-1].focus();return}this._inputElement?.focus()}_emitInputEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_createChipElement(e,t){if(r)return;let n=document.createElement(`sbb-chip`);n.value=e,n.innerText=t??(e?this.displayWith?.(e):null)??``,this.insertBefore(n,this._inputElement??this.querySelector(`input`))}_reactToInputChanges(){this.disabled=this._inputElement?.disabled??!1,this._proxyStateToChips()}_proxyStateToChips(){this._chipElements().forEach(e=>{e.disabled=this.disabled||this.formDisabled,e.readOnly=this._inputElement?.hasAttribute(`readonly`)??!1,e.negative=this.negative})}_updateSize(e){this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}_updateInputDescription(){this._inputElement&&this._inputElement.setAttribute(`aria-description`,`${_[this._language.current]} ${this.value.length}`)}render(){return n`<slot @slotchange=${this._setupComponent}></slot>`}}})();export{C as SbbChipElement,E as SbbChipGroupElement,T as SbbChipInputTokenEndEvent};
+`,T=class extends Event{constructor(e){super(`chipinputtokenend`,{cancelable:!0,bubbles:!0,composed:!0}),this.origin=e.origin,this.value=e.value,this.label=e.label}setValue(e){this.value=e}setLabel(e){this.label=e}};let E=(()=>{let f=p(o(u(c(s)))),g=[],b,x,S=[],E=[],D,O=[],k=[],A,j=[],M=[];return class extends f{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;b=[a({type:Array})],x=[a({attribute:!1})],D=[a({attribute:`separator-keys`,type:Array})],A=[m(),a({attribute:`add-on-blur`,type:Boolean})],e(this,null,b,{kind:`setter`,name:`value`,static:!1,private:!1,access:{has:e=>`value`in e,set:(e,t)=>{e.value=t}},metadata:t},null,g),e(this,null,x,{kind:`accessor`,name:`displayWith`,static:!1,private:!1,access:{has:e=>`displayWith`in e,get:e=>e.displayWith,set:(e,t)=>{e.displayWith=t}},metadata:t},S,E),e(this,null,D,{kind:`accessor`,name:`separatorKeys`,static:!1,private:!1,access:{has:e=>`separatorKeys`in e,get:e=>e.separatorKeys,set:(e,t)=>{e.separatorKeys=t}},metadata:t},O,k),e(this,null,A,{kind:`accessor`,name:`addOnBlur`,static:!1,private:!1,access:{has:e=>`addOnBlur`in e,get:e=>e.addOnBlur,set:(e,t)=>{e.addOnBlur=t}},metadata:t},j,M),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-chip-group`}static{this.elementDependencies=[C]}static{this.role=`listbox`}static{this.styles=[i(w)]}static{this.events={input:`input`,change:`change`,chipinputtokenend:`chipinputtokenend`}}set value(e){e??=[];let t=this.value,n=[...t];for(let t of e)n.includes(t)&&n.splice(n.indexOf(t),1);n.forEach(e=>this._chipElements().find(t=>t.value===e)?.remove());let r=[...e];for(let e of t)r.includes(e)&&r.splice(r.indexOf(e),1);r.forEach(e=>this._createChipElement(e))}get value(){return this._chipElements().map(e=>e.value)}#e;get displayWith(){return this.#e}set displayWith(e){this.#e=e}#t;get separatorKeys(){return this.#t}set separatorKeys(e){this.#t=e}#n;get addOnBlur(){return this.#n}set addOnBlur(e){this.#n=e}constructor(){super(),this.#e=(t(this,g),t(this,S,null)),this.#t=(t(this,E),t(this,O,[`Enter`])),this.#n=(t(this,k),t(this,j,!1)),this._inputAttributeObserver=(t(this,M),r?null:new MutationObserver(()=>this._reactToInputChanges())),this._language=new l(this),this._previousSize=null,this.addEventListener?.(C.events.requestdelete,e=>this._deleteChip(e.target)),this.addEventListener?.(`keydown`,e=>this._onChipKeyDown(e)),this.addController(new d(this,()=>this.closest(`sbb-form-field`),{size:e=>this._updateSize(e.size),label:e=>this._updateLabelState(e),hiddenLabel:e=>this._updateLabelState(e)}))}_updateLabelState(e){this.toggleState(`without-label`,!e.label||e.hiddenLabel)}connectedCallback(){super.connectedCallback(),this._setupComponent()}willUpdate(e){super.willUpdate(e),(e.has(`disabled`)||e.has(`formDisabled`)||e.has(`negative`))&&this._proxyStateToChips()}formResetCallback(){this.value=null}formStateRestoreCallback(e,t){if(!e){this.value=null;return}this._readFormData(e).then(e=>this.value=e)}async _readFormData(e){return Promise.all(e.getAll(this.name).map(async e=>e instanceof Blob?JSON.parse(await e.text()):e))}shouldValidate(e){return super.shouldValidate(e)||e===`required`||e===`value`}validate(){super.validate(),this.required&&this.value.length===0?this.setValidityFlag(`valueMissing`,v[this._language.current]):this.removeValidityFlag(`valueMissing`)}_chipElements(){return Array.from(this.querySelectorAll?.(`sbb-chip`)??[])}_enabledChipElements(){return Array.from(this.querySelectorAll?.(`sbb-chip:not([disabled])`)??[])}_setupComponent(){let e=this.querySelector(`input`);e&&e!==this._inputElement&&(this._inputAbortController?.abort(),this._inputAttributeObserver?.disconnect(),this._inputElement=e,this._inputAbortController=new AbortController,this._inputElement.addEventListener(`keydown`,e=>this._onInputKeyDown(e),{signal:this._inputAbortController.signal}),this._inputElement.addEventListener(`blur`,()=>this._onInputBlur(),{signal:this._inputAbortController.signal,capture:!0}),this._inputElement.addEventListener(`inputAutocomplete`,e=>this._createChipFromInput(`autocomplete`,e.option.value),{signal:this._inputAbortController.signal}),this._inputAttributeObserver?.observe(this._inputElement,{attributes:!0,attributeFilter:[`readonly`,`disabled`]})),this.closest(`sbb-form-field`)||this._updateSize(null),this.toggleState(`empty`,this.value.length===0),this._reactToInputChanges(),this._updateInputDescription(),this.updateFormValue()}_onChipKeyDown(e){let t=e.target;if(t.localName===`sbb-chip`){if(y(e)){let n=this._enabledChipElements();n[h(e,n.indexOf(t),n.length)].focus();return}switch(e.key){case`Backspace`:case`Delete`:!t.readOnly&&!t.disabled&&(e.preventDefault(),this._deleteChip(t));break}}}_onInputKeyDown(e){switch(e.key){case`Backspace`:case`ArrowLeft`:this._inputElement.value||this._focusChip();break;case`Enter`:e.preventDefault();break}this.separatorKeys.includes(e.key)&&(e.preventDefault(),this._createChipFromInput(`input`))}_onInputBlur(){this.addOnBlur&&this._createChipFromInput(`input`)}_createChipFromInput(e=`input`,t){let n=t??this._inputElement.value.trim();if(!n)return;let r=new T({origin:e,value:n,label:(t?this.displayWith?.(t):null)??void 0});this.dispatchEvent(r)&&(this._createChipElement(r.value,r.label),this._inputElement.value=``,this._emitInputEvents())}_deleteChip(e){let t=this._enabledChipElements();e.remove(),this._emitInputEvents(),this._focusChip(t.indexOf(e))}_focusChip(e){let t=this._enabledChipElements();if(e!==void 0&&t[e]){t[e].focus();return}if(t.length>0){t[t.length-1].focus();return}this._inputElement?.focus()}_emitInputEvents(){this.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_createChipElement(e,t){if(r)return;let n=document.createElement(`sbb-chip`);n.value=e,n.innerText=t??(e?this.displayWith?.(e):null)??``,this.insertBefore(n,this._inputElement??this.querySelector(`input`))}_reactToInputChanges(){this.disabled=this._inputElement?.disabled??!1,this._proxyStateToChips()}_proxyStateToChips(){this._chipElements().forEach(e=>{e.disabled=this.disabled||this.formDisabled,e.readOnly=this._inputElement?.hasAttribute(`readonly`)??!1,e.negative=this.negative})}_updateSize(e){this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}_updateInputDescription(){this._inputElement&&this._inputElement.setAttribute(`aria-description`,`${_[this._language.current]} ${this.value.length}`)}render(){return n`<slot @slotchange=${this._setupComponent}></slot>`}}})();export{C as SbbChipElement,E as SbbChipGroupElement,T as SbbChipInputTokenEndEvent};

package/core/styles/_theme.scss

@@ -52,6 +52,9 @@ $theme: 'standard' !default;
 @use '../../divider/divider.global' as divider with (
   $theme: $theme
 );
+@use '../../download/download.global' as download with (
+  $theme: $theme
+);
 @use '../../expansion-panel/expansion-panel.global' as expansion-panel with (
   $theme: $theme
 );
@@ -229,6 +232,7 @@ $theme: 'standard' !default;
   @include container.base;
   @include dialog.base;
   @include divider.base;
+  @include download.base;
   @include expansion-panel.base;
   @include file-selector.base;
   @include flip-card.base;
@@ -285,6 +289,7 @@ $theme: 'standard' !default;
     @include breadcrumb.forced-colors;
     @include calendar.forced-colors;
     @include card.forced-colors;
+    @include download.forced-colors;
     @include expansion-panel.forced-colors;
     @include form-field.forced-colors;
     @include header.forced-colors;