@sbb-esta/lyne-elements 5.2.0 → 5.4.0

package/sidebar.pure.js

@@ -10,7 +10,7 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbSecondaryButto
       <slot @slotchange=${()=>this._handleWidthChange()}></slot>`}},P=`:host{--_sbb-sidebar-content-margin-inline-start:initial;--_sbb-sidebar-content-margin-inline-end:initial;margin-inline:var(--_sbb-sidebar-content-margin-inline-start,var(--_sbb-sidebar-container-start-width,0)) var(--_sbb-sidebar-content-margin-inline-end,var(--_sbb-sidebar-container-end-width,0));transition:margin var(--sbb-sidebar-container-animation-duration) var(--sbb-sidebar-container-animation-easing)}
 `,F=class extends a{static{this.elementName=`sbb-sidebar-content`}static{this.styles=[f,k,n(P)]}connectedCallback(){super.connectedCallback(),this.classList.add(`sbb-scrollbar`)}render(){return e`<slot></slot>`}},I=`:host{hyphens:auto;min-height:var(--_sbb-sidebar-close-button-size);padding-block-start:calc(.5 * (var(--_sbb-sidebar-close-button-size) - 1em * var(--sbb-typo-line-height-heading)))}
 `;let L=(()=>{let e=x,t,r=[],i=[];return class extends e{static{let n=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;t=[b({reflect:!0})],_(this,null,t,{kind:`accessor`,name:`level`,static:!1,private:!1,access:{has:e=>`level`in e,get:e=>e.level,set:(e,t)=>{e.level=t}},metadata:n},r,i),n&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:n})}static{this.elementName=`sbb-sidebar-title`}static{this.styles=[n(I)]}#e=v(this,r,`2`);get level(){return this.#e}set level(e){this.#e=e}constructor(){super(),v(this,i),this.visualLevel??=`5`}connectedCallback(){super.connectedCallback(),this.slot||=`title-section`}}})();var R=`:host{--sbb-link-text-decoration-line:none;--sbb-sidebar-background-color:var(--sbb-background-color-1);--sbb-sidebar-scrollbar-placeholder-width:var(--sbb-spacing-fixed-3x);--_sbb-sidebar-margin:0;--_sbb-sidebar-margin-block-start:var(--sbb-sidebar-margin);--_sbb-sidebar-translate-x:-100%;--_sbb-sidebar-z-index:2;--_sbb-sidebar-padding-inline-end:var(--sbb-sidebar-padding);--_sbb-sidebar-padding-block-start:var(--sbb-sidebar-padding);--_sbb-sidebar-border-radius-start:var(--sbb-sidebar-border-radius);--_sbb-sidebar-border-radius-end:0;--_sbb-sidebar-close-button-size:var(--sbb-size-element-xs);--_sbb-sidebar-max-width:calc(100% - 2 * var(--_sbb-sidebar-margin));width:20rem;display:block}@supports (scrollbar-gutter:stable) and (not (-webkit-touch-callout:none)){:host{--_sbb-sidebar-padding-inline-end:calc(var(--sbb-sidebar-padding) - var(--sbb-sidebar-scrollbar-placeholder-width))}}:host([color=white]){--sbb-sidebar-background-color:var(--sbb-background-color-1)}:host([color=milk]){--sbb-sidebar-background-color:var(--sbb-background-color-3)}:host(:is([mode=over],:is(:state(mode-over-forced),[state--mode-over-forced]):not(:is(:state(mode-over-forced-closing),[state--mode-over-forced-closing])))){--_sbb-sidebar-margin:var(--sbb-sidebar-margin);--_sbb-sidebar-border-radius-end:var(--sbb-sidebar-border-radius);--_sbb-sidebar-z-index:3}:host(:is(:dir(rtl),[position=end])){--_sbb-sidebar-translate-x:100%}:host(:dir(rtl)[position=end]){--_sbb-sidebar-translate-x:-100%}.sbb-sidebar{width:inherit;max-width:var(--_sbb-sidebar-max-width);background-color:var(--sbb-sidebar-background-color);z-index:var(--_sbb-sidebar-z-index);margin:var(--_sbb-sidebar-margin);transition-duration:var(--sbb-sidebar-container-animation-duration);transition-timing-function:var(--sbb-sidebar-container-animation-easing);border-start-start-radius:var(--_sbb-sidebar-border-radius-start);border-start-end-radius:var(--_sbb-sidebar-border-radius-start);border-end-end-radius:var(--_sbb-sidebar-border-radius-end);border-end-start-radius:var(--_sbb-sidebar-border-radius-end);flex-direction:column;margin-block-start:var(--_sbb-sidebar-margin-block-start);transition-property:width,translate;display:flex;position:absolute;inset-block:0;overflow:hidden;translate:none}:host([position=end]) .sbb-sidebar{inset-inline-end:0}:host(:is(:state(state-closed),[state--state-closed])) .sbb-sidebar{visibility:hidden}:host(:is(:is(:state(state-closing),[state--state-closing]),:is(:state(state-closed),[state--state-closed]))) .sbb-sidebar{translate:var(--_sbb-sidebar-translate-x) 0}.sbb-sidebar-title-section{gap:var(--sbb-sidebar-title-gap);background-color:var(--sbb-sidebar-background-color);width:100%;padding-inline:var(--sbb-sidebar-padding);transition:box-shadow var(--sbb-animation-easing) var(--sbb-sidebar-container-animation-duration);box-shadow:none;display:flex}:host(:is(:state(scrolled),[state--scrolled])) .sbb-sidebar-title-section{box-shadow:var(--sbb-box-shadow-level-5-soft)}.sbb-sidebar-content-section{padding-block-start:var(--_sbb-sidebar-padding-block-start);padding-inline:var(--sbb-sidebar-padding) var(--_sbb-sidebar-padding-inline-end);outline-color:var(--sbb-focus-outline-color);flex-grow:1;overflow-y:auto}@supports (scrollbar-gutter:stable){.sbb-sidebar-content-section{scrollbar-gutter:stable}}::slotted(sbb-sidebar-title){margin-block:var(--sbb-sidebar-title-padding-block);flex-grow:1}::slotted(sbb-sidebar-close-button){margin-inline-end:calc(-1 * (var(--sbb-sidebar-padding) - var(--sbb-sidebar-title-padding-block)));margin-block:var(--sbb-sidebar-title-padding-block);order:1;inset-inline-end:var(--sbb-sidebar-padding)}
-`;let z=(()=>{let r=i(l),a=[],c,f=[],p=[],g,x=[],C=[],w,T=[],E=[],D,O=[],k=[],A,j=[],M=[],N;return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;c=[b({reflect:!0})],g=[u(e=>e===`over`?`over`:`side`),b({reflect:!0})],w=[u(e=>e===`end`?`end`:`start`),d((e,t,n)=>e._updateSidebarWidth(n)),b({reflect:!0})],D=[u(),b({type:Boolean,reflect:!0})],A=[u(),b({type:Boolean,attribute:`focus-on-open`})],N=[y({passive:!0})],_(this,null,c,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:e},f,p),_(this,null,g,{kind:`accessor`,name:`mode`,static:!1,private:!1,access:{has:e=>`mode`in e,get:e=>e.mode,set:(e,t)=>{e.mode=t}},metadata:e},x,C),_(this,null,w,{kind:`accessor`,name:`position`,static:!1,private:!1,access:{has:e=>`position`in e,get:e=>e.position,set:(e,t)=>{e.position=t}},metadata:e},T,E),_(this,null,D,{kind:`accessor`,name:`opened`,static:!1,private:!1,access:{has:e=>`opened`in e,get:e=>e.opened,set:(e,t)=>{e.opened=t}},metadata:e},O,k),_(this,null,A,{kind:`accessor`,name:`focusOnOpen`,static:!1,private:!1,access:{has:e=>`focusOnOpen`in e,get:e=>e.focusOnOpen,set:(e,t)=>{e.focusOnOpen=t}},metadata:e},j,M),_(this,null,N,{kind:`method`,name:`_detectScrolledState`,static:!1,private:!1,access:{has:e=>`_detectScrolledState`in e,get:e=>e._detectScrolledState},metadata:e},null,a),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-sidebar`}static{this.styles=[h,n(R)]}#e;get color(){return this.#e}set color(e){this.#e=e}#t;get mode(){return this.#t}set mode(e){this.#t=e}#n;get position(){return this.#n}set position(e){this.#n=e}#r;get opened(){return this.#r}set opened(e){this.#r=e}#i;get focusOnOpen(){return this.#i}set focusOnOpen(e){this.#i=e}get container(){return this._container}constructor(){super(),this.#e=(v(this,a),v(this,f,`white`)),this.#t=(v(this,p),v(this,x,`side`)),this.#n=(v(this,C),v(this,T,`start`)),this.#r=(v(this,E),v(this,O,!1)),this.#i=(v(this,k),v(this,j,!1)),this._container=(v(this,M),null),this._lastFocusedElement=null,this._focusTrapController=new s(this),this._escapableOverlayController=new o(this),this._closeOnNavigation=()=>{this._isModeOver()&&this.isOpen&&this.close()},this.addController(new S(this,{skipInitial:!0,callback:()=>this._updateSidebarWidth()})),this.addEventListener?.(`click`,e=>{e.target?.localName===`sbb-sidebar-close-button`&&this.close()})}connectedCallback(){super.connectedCallback(),this._container=this.closest?.(`sbb-sidebar-container`),this._updateSidebarWidth(),this.isOpen&&this._isModeOver()&&this._takeFocus(),t||(window.navigation?window.navigation.addEventListener(`navigate`,this._closeOnNavigation):window.addEventListener(`popstate`,this._closeOnNavigation))}disconnectedCallback(){super.disconnectedCallback(),this.container?.style.removeProperty(this._buildCssWidthVar()),this._container=null,t||(window.navigation?window.navigation.removeEventListener(`navigate`,this._closeOnNavigation):window.removeEventListener(`popstate`,this._closeOnNavigation))}willUpdate(e){super.willUpdate(e),e.has(`opened`)&&(this.opened?this.open():this.opened||this.close()),e.has(`mode`)&&(this.mode===`over`&&this.isOpen?this._takeFocus():this.cedeFocus())}firstUpdated(e){super.firstUpdated(e),this._updateSidebarWidth()}toggle(){this.state===`opening`||this.state===`opened`?this.close():this.open()}open(){if(this.state===`opening`||this.state===`opened`||!this.dispatchBeforeOpenEvent())return;this.startAnimation(),!t&&document.activeElement?.localName!==`body`&&(this._lastFocusedElement=document.activeElement),this.opened=!0,this.state=`opening`;let e=this._isZeroAnimationDuration()||!this.isConnected,n=!this.hasUpdated;(n||e)&&(this.internals.states.add(`skip-animation`),n?this.updateComplete.then(()=>this._handleOpening()):this._handleOpening())}_isZeroAnimationDuration(){return m(this,`--sbb-sidebar-container-animation-duration`)}_handleOpening(){this.state=`opened`,setTimeout(()=>this.internals.states.delete(`skip-animation`)),this._takeFocus(),this.stopAnimation(),this.dispatchOpenEvent()}close(){if(this.state===`closing`||this.state===`closed`||!this.dispatchBeforeCloseEvent())return;this.startAnimation();let e=this._isZeroAnimationDuration();!this.hasUpdated||e?this.internals.states.add(`skip-animation`):this.state=`closing`,this.opened=!1,(!this.hasUpdated||e)&&this._handleClosing()}_handleClosing(){this.state=`closed`,setTimeout(()=>this.internals.states.delete(`skip-animation`)),this.cedeFocus(),!t&&(this.contains(document.activeElement)||this._isModeOver())&&(this._lastFocusedElement?this._lastFocusedElement?.focus():document.activeElement.blur()),this._lastFocusedElement=null,this.stopAnimation(),this.dispatchCloseEvent()}_takeFocus(){if(!this.isConnected)return;let e=this._isModeOver();(e||this.focusOnOpen)&&this._focusTrapController.focusInitialElement(),e&&(this._escapableOverlayController.connect(),this._focusTrapController.enabled=!0)}cedeFocus(){this._focusTrapController.enabled=!1,this._escapableOverlayController.disconnect()}_updateSidebarWidth(e){let t=this.container;if(!t)return;e&&t.style.removeProperty(this._buildCssWidthVar(e));let n=this.offsetWidth;if(!n)return;let r=`${n}px`;t.style.getPropertyValue(this._buildCssWidthVar())!==r&&t.style.setProperty(this._buildCssWidthVar(),r)}_buildCssWidthVar(e=this.position){return`--_sbb-sidebar-container-${e}-width`}_isModeOver(){return this.mode===`over`||this.matches(`:is(:state(mode-over-forced),[state--mode-over-forced])`)}_onTransitionEnd(e){e.propertyName!==`translate`||e.target!==e.currentTarget||(this.state===`opening`?this._handleOpening():this.state===`closing`&&this._handleClosing())}_detectScrolledState(){this.toggleState(`scrolled`,(this.shadowRoot?.querySelector(`.sbb-sidebar-content-section`)?.scrollTop??0)>0)}render(){return e`<div class="sbb-sidebar" @transitionend=${this._onTransitionEnd}>
+`;let z=(()=>{let r=i(l),a=[],c,f=[],p=[],g,x=[],C=[],w,T=[],E=[],D,O=[],k=[],A,j=[],M=[],N;return class extends r{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(r[Symbol.metadata]??null):void 0;c=[b({reflect:!0})],g=[u(e=>e===`over`?`over`:`side`),b({reflect:!0})],w=[u(e=>e===`end`?`end`:`start`),d((e,t,n)=>e._updateSidebarWidth(n)),b({reflect:!0})],D=[u(),b({type:Boolean,reflect:!0})],A=[u(),b({type:Boolean,attribute:`focus-on-open`})],N=[y({passive:!0})],_(this,null,c,{kind:`accessor`,name:`color`,static:!1,private:!1,access:{has:e=>`color`in e,get:e=>e.color,set:(e,t)=>{e.color=t}},metadata:e},f,p),_(this,null,g,{kind:`accessor`,name:`mode`,static:!1,private:!1,access:{has:e=>`mode`in e,get:e=>e.mode,set:(e,t)=>{e.mode=t}},metadata:e},x,C),_(this,null,w,{kind:`accessor`,name:`position`,static:!1,private:!1,access:{has:e=>`position`in e,get:e=>e.position,set:(e,t)=>{e.position=t}},metadata:e},T,E),_(this,null,D,{kind:`accessor`,name:`opened`,static:!1,private:!1,access:{has:e=>`opened`in e,get:e=>e.opened,set:(e,t)=>{e.opened=t}},metadata:e},O,k),_(this,null,A,{kind:`accessor`,name:`focusOnOpen`,static:!1,private:!1,access:{has:e=>`focusOnOpen`in e,get:e=>e.focusOnOpen,set:(e,t)=>{e.focusOnOpen=t}},metadata:e},j,M),_(this,null,N,{kind:`method`,name:`_detectScrolledState`,static:!1,private:!1,access:{has:e=>`_detectScrolledState`in e,get:e=>e._detectScrolledState},metadata:e},null,a),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-sidebar`}static{this.styles=[h,n(R)]}#e;get color(){return this.#e}set color(e){this.#e=e}#t;get mode(){return this.#t}set mode(e){this.#t=e}#n;get position(){return this.#n}set position(e){this.#n=e}#r;get opened(){return this.#r}set opened(e){this.#r=e}#i;get focusOnOpen(){return this.#i}set focusOnOpen(e){this.#i=e}get container(){return this._container}constructor(){super(),this.#e=(v(this,a),v(this,f,`white`)),this.#t=(v(this,p),v(this,x,`side`)),this.#n=(v(this,C),v(this,T,`start`)),this.#r=(v(this,E),v(this,O,!1)),this.#i=(v(this,k),v(this,j,!1)),this._container=(v(this,M),null),this._lastFocusedElement=null,this._focusTrapController=new s(this),this._escapableOverlayController=new o(this),this._closeOnNavigation=()=>{this._isModeOver()&&this.isOpen&&this.close()},this.addController(new S(this,{skipInitial:!0,callback:()=>this._updateSidebarWidth()})),this.addEventListener?.(`click`,e=>{e.target?.localName===`sbb-sidebar-close-button`&&this.close()})}connectedCallback(){super.connectedCallback(),this._container=this.closest?.(`sbb-sidebar-container`),this._updateSidebarWidth(),this.isOpen&&this._isModeOver()&&this._takeFocus(),t||(window.navigation?window.navigation.addEventListener(`navigate`,this._closeOnNavigation):window.addEventListener(`popstate`,this._closeOnNavigation))}disconnectedCallback(){super.disconnectedCallback(),this.container?.style.removeProperty(this._buildCssWidthVar()),this._container=null,t||(window.navigation?window.navigation.removeEventListener(`navigate`,this._closeOnNavigation):window.removeEventListener(`popstate`,this._closeOnNavigation))}willUpdate(e){super.willUpdate(e),e.has(`opened`)&&(this.opened?this.open():this.opened||this.close()),e.has(`mode`)&&(this.mode===`over`&&this.isOpen?this._takeFocus():this.cedeFocus())}firstUpdated(e){super.firstUpdated(e),this._updateSidebarWidth()}toggle(){this.state===`opening`||this.state===`opened`?this.close():this.open()}open(){if(this.state===`opening`||this.state===`opened`||!this.dispatchBeforeOpenEvent())return;this.startAnimation(),!t&&document.activeElement?.localName!==`body`&&(this._lastFocusedElement=document.activeElement),this.opened=!0,this.state=`opening`;let e=this._isZeroAnimationDuration()||!this.isConnected,n=!this.hasUpdated;(n||e)&&(this.internals.states.add(`skip-animation`),n?this.updateComplete.then(()=>this._handleOpening()):this._handleOpening())}_isZeroAnimationDuration(){return m(this,`--sbb-sidebar-container-animation-duration`)}_handleOpening(){this.state=`opened`,setTimeout(()=>this.internals.states.delete(`skip-animation`)),this._takeFocus(),this.stopAnimation(),this.dispatchOpenEvent()}close(){if(this.state===`closing`||this.state===`closed`||!this.dispatchBeforeCloseEvent())return;this.startAnimation();let e=this._isZeroAnimationDuration();!this.hasUpdated||e?this.internals.states.add(`skip-animation`):this.state=`closing`,this.opened=!1,(!this.hasUpdated||e)&&this._handleClosing()}_handleClosing(){this.state=`closed`,setTimeout(()=>this.internals.states.delete(`skip-animation`)),this.cedeFocus(),!t&&(this.contains(document.activeElement)||this._isModeOver())&&(this._lastFocusedElement?this._lastFocusedElement?.focus():document.activeElement.blur()),this._lastFocusedElement=null,this.stopAnimation(),this.dispatchCloseEvent()}_takeFocus(){if(!this.isConnected)return;let e=this._isModeOver();(e||this.focusOnOpen)&&this._focusTrapController.focusInitialElement(),e&&(this._escapableOverlayController.connect(),this._focusTrapController.enabled=!0)}cedeFocus(){this._focusTrapController.enabled=!1,this._escapableOverlayController.disconnect()}_updateSidebarWidth(e){let t=this.container;if(!t)return;e&&t.style.removeProperty(this._buildCssWidthVar(e));let n=this.offsetWidth;if(!n)return;let r=`${n}px`;t.style.getPropertyValue(this._buildCssWidthVar())!==r&&t.style.setProperty(this._buildCssWidthVar(),r)}_buildCssWidthVar(e=this.position){return`--_sbb-sidebar-container-${e}-width`}_isModeOver(){return this.mode===`over`||this.matches(`:is(:state(mode-over-forced),[state--mode-over-forced])`)}_onTransitionEnd(e){e.propertyName===`translate`&&e.target===e.currentTarget&&(this.state===`opening`?this._handleOpening():this.state===`closing`&&this._handleClosing())}_detectScrolledState(){this.toggleState(`scrolled`,(this.shadowRoot?.querySelector(`.sbb-sidebar-content-section`)?.scrollTop??0)>0)}render(){return e`<div class="sbb-sidebar" @transitionend=${this._onTransitionEnd}>
       <div class="sbb-sidebar-title-section"><slot name="title-section"></slot></div>
       <div
         class="sbb-sidebar-content-section sbb-scrollbar"

package/standard-theme.css

@@ -1313,6 +1313,10 @@ summary {
   --sbb-divider-color: var(--sbb-background-color-4);
   --sbb-divider-color-negative: var(--sbb-background-color-4-negative);
   --sbb-divider-border-width: var(--sbb-border-width-1x);
+  --sbb-download-gap: var(--sbb-spacing-fixed-3x);
+  --sbb-download-label-color: var(--sbb-color-3);
+  --sbb-download-info-color: var(--sbb-color-granite);
+  --sbb-download-info-color: light-dark(var(--sbb-color-granite), var(--sbb-color-aluminium));
   --sbb-expansion-panel-background-color: var(--sbb-background-color-1);
   --sbb-expansion-panel-background-color-hover: var(--sbb-background-color-3);
   --sbb-expansion-panel-border-radius: var(--sbb-border-radius-4x);
@@ -1582,12 +1586,8 @@ summary {
   --sbb-options-panel-margin-block-start: var(--sbb-spacing-fixed-2x);
   --sbb-options-panel-padding-block: var(--sbb-spacing-fixed-1x);
   --sbb-overlay-background-color: var(--sbb-background-color-3);
-  --sbb-overlay-display: none;
   --sbb-overlay-height: 100%;
-  --sbb-overlay-inset: 0 auto auto 0;
   --sbb-overlay-animation-easing: ease;
-  --sbb-overlay-pointer-events: none;
-  --sbb-overlay-container-display: none;
   --sbb-paginator-color: var(--sbb-color-metal);
   --sbb-paginator-color: light-dark(var(--sbb-color-metal), var(--sbb-color-smoke));
   --sbb-paginator-height: var(--sbb-size-element-m);
@@ -1985,6 +1985,8 @@ summary {
     --sbb-card-border-width: var(--sbb-border-width-2x);
     --sbb-card-badge-border-display: block;
     --sbb-card-badge-inline-border-display: none;
+    --sbb-download-label-color: CanvasText;
+    --sbb-download-info-color: CanvasText;
     --sbb-expansion-panel-header-text-color: ButtonText;
     --sbb-form-field-border-color: ButtonBorder;
     --sbb-header-action-border-color: CanvasText;

package/toggle.pure.js

@@ -5,4 +5,4 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeControl
         <slot></slot>
       </span>
     `}}})();var h=`:host{--_sbb-toggle-min-width:calc(var(--sbb-toggle-padding-inline) * 4 + var(--sbb-size-icon-ui-small));--sbb-toggle-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));grid-template-columns:var(--sbb-toggle-grid-template-columns);height:var(--sbb-toggle-height);width:var(--sbb-toggle-width,fit-content);min-width:var(--_sbb-toggle-min-width);border-radius:var(--sbb-toggle-border-radius);max-width:100%;font-size:var(--sbb-toggle-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);user-select:none;-webkit-tap-highlight-color:transparent;line-height:var(--sbb-typo-line-height-text);grid-template-areas:"start end";align-items:center;display:grid}:host:before{content:"";margin-inline:var(--sbb-toggle-option-left,0) var(--sbb-toggle-option-right,0);background-color:var(--sbb-toggle-selected-option-background-color);border-radius:var(--sbb-toggle-border-radius);border:var(--sbb-toggle-selected-option-border-width) var(--sbb-toggle-selected-option-border-style) var(--sbb-toggle-selected-option-border-color);max-width:100%;height:100%;transition-duration:var(--sbb-toggle-animation-duration);grid-area:start/start/end/end;transition-property:margin-inline-start,margin-inline-end;transition-timing-function:ease;display:block}:host:after{content:"";background:var(--sbb-toggle-background-color);margin-inline:var(--sbb-toggle-background-inset);height:calc(100% - 2 * var(--sbb-toggle-background-inset));border-radius:var(--sbb-toggle-border-radius);order:-1;grid-area:start/start/end/end}@media (forced-colors:active){:host:after{border:var(--sbb-border-width-1x) solid CanvasText}}:host([even]){--sbb-toggle-width:100%;--sbb-toggle-grid-template-columns:50% 50%}:host(:disabled){--sbb-toggle-selected-option-border-color:light-dark(var(--sbb-color-graphite),var(--sbb-color-smoke));--sbb-toggle-selected-option-border-style:dashed}@media (forced-colors:active){:host(:disabled){--sbb-toggle-selected-option-border-style:solid;--sbb-toggle-selected-option-border-color:GrayText}}:host([size=s]){--sbb-toggle-padding-inline:var(--sbb-toggle-padding-inline-s);--sbb-toggle-height:var(--sbb-toggle-height-s)}:host([size=m]){--sbb-toggle-padding-inline:var(--sbb-toggle-padding-inline-m);--sbb-toggle-height:var(--sbb-toggle-height-m)}:host(:is(:not(:is(:state(initialized),[state--initialized])),:is(:state(disable-animation-on-resizing),[state--disable-animation-on-resizing]))){--sbb-disable-animation-duration:0s}::slotted(sbb-toggle-option:first-of-type){grid-area:start}::slotted(sbb-toggle-option:last-of-type){grid-area:end}
-`;let g=(()=>{let n=s(l(c)),f=[],p,m=[],g=[],_,v=[],y=[],b;return class extends n{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;p=[u(),o({reflect:!0,type:Boolean})],_=[o({reflect:!0})],b=[o()],e(this,null,p,{kind:`accessor`,name:`even`,static:!1,private:!1,access:{has:e=>`even`in e,get:e=>e.even,set:(e,t)=>{e.even=t}},metadata:t},m,g),e(this,null,_,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},v,y),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,f),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-toggle`}static{this.role=`radiogroup`}static{this.styles=[a(h)]}static{this.events={change:`change`}}#e;get even(){return this.#e}set even(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}set value(e){i||!this.hasUpdated?this._fallbackValue=e:this._valueChanged(e)}get value(){return i?this._fallbackValue??null:this.options.find(e=>e.checked)?.value??this.options[0]?.value??null}get options(){return Array.from(this.querySelectorAll?.(`sbb-toggle-option`)??[])}constructor(){super(),this.#e=(t(this,f),t(this,m,!1)),this.#t=(t(this,g),t(this,v,null)),this._fallbackValue=(t(this,y),null),this.addEventListener?.(`input`,()=>this._handleInput(),{passive:!0}),this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e))}willUpdate(e){super.willUpdate(e),(e.has(`disabled`)||e.has(`formDisabled`))&&this._updateDisabled(),this.hasUpdated||this._valueChanged(this._fallbackValue)}statusChanged(){this.updateFormValue(),this.updatePillPosition()}formResetCallback(){this.value=this.hasAttribute(`value`)?this.getAttribute(`value`):null}formStateRestoreCallback(e,t){typeof e==`string`||e==null?this.value=e??null:e instanceof FormData&&this._readFormData(e).then(e=>{this.value=e})}async _readFormData(e){let t=e.get(this.name);return t instanceof Blob?JSON.parse(await t.text()):t}updatePillPosition(e=!1){let t=this.options;if(t.length<2||t.every(e=>!e.checked)||t.every(e=>!e.clientWidth))return;this.toggleState(`disable-animation-on-resizing`,e);let n=t[0],r=n.checked,i=r?`0px`:`${n.clientWidth}px`,a=r?`${this.clientWidth-n.clientWidth}px`:`0px`;a===`0px`&&i===`0px`||(this.style?.setProperty(`--sbb-toggle-option-left`,i),this.style?.setProperty(`--sbb-toggle-option-right`,a),this.offsetWidth,this.internals.states.add(`initialized`))}_updateToggle(){this._valueChanged(this.value),this._updateDisabled()}_valueChanged(e){let t=this.options,n=t.find(t=>e===t.value)??t.find(e=>e.checked)??t[0];n&&(n.checked=!0,this.statusChanged())}_updateDisabled(){for(let e of this.options)e.disabled=this.disabled||this.formDisabled}_handleInput(){this.statusChanged(),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_handleKeyDown(e){if(!this.options.filter(e=>!e.disabled&&d.isVisible(e))||e.target!==this&&e.target.parentElement!==this)return;let t=this.options,n=this.matches(`:dir(rtl)`),r=t.findIndex(e=>e.checked)??t[0],i=t.slice(r+1).concat(t.slice(0,r)).filter(e=>!e.disabled&&d.isVisible(e));(n?e.key===`ArrowLeft`:e.key===` `||e.key===`ArrowRight`)?(this._selectAndFocusOption(i[0]),e.preventDefault()):(n?e.key===` `||e.key===`ArrowRight`:e.key===`ArrowLeft`)&&(this._selectAndFocusOption(i.at(-1)),e.preventDefault())}_selectAndFocusOption(e){!e||e.disabled||e.checked||(e.checked=!0,e.focus(),e.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})))}render(){return r` <slot @slotchange=${this._updateToggle}></slot> `}}})();export{g as SbbToggleElement,m as SbbToggleOptionElement};
+`;let g=(()=>{let n=s(l(c)),f=[],p,m=[],g=[],_,v=[],y=[],b;return class extends n{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;p=[u(),o({reflect:!0,type:Boolean})],_=[o({reflect:!0})],b=[o()],e(this,null,p,{kind:`accessor`,name:`even`,static:!1,private:!1,access:{has:e=>`even`in e,get:e=>e.even,set:(e,t)=>{e.even=t}},metadata:t},m,g),e(this,null,_,{kind:`accessor`,name:`size`,static:!1,private:!1,access:{has:e=>`size`in e,get:e=>e.size,set:(e,t)=>{e.size=t}},metadata:t},v,y),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,f),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-toggle`}static{this.role=`radiogroup`}static{this.styles=[a(h)]}static{this.events={change:`change`}}#e;get even(){return this.#e}set even(e){this.#e=e}#t;get size(){return this.#t}set size(e){this.#t=e}set value(e){i||!this.hasUpdated?this._fallbackValue=e:this._valueChanged(e)}get value(){return i?this._fallbackValue??null:this.options.find(e=>e.checked)?.value??this.options[0]?.value??null}get options(){return Array.from(this.querySelectorAll?.(`sbb-toggle-option`)??[])}constructor(){super(),this.#e=(t(this,f),t(this,m,!1)),this.#t=(t(this,g),t(this,v,null)),this._fallbackValue=(t(this,y),null),this.addEventListener?.(`input`,()=>this._handleInput(),{passive:!0}),this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e))}willUpdate(e){super.willUpdate(e),(e.has(`disabled`)||e.has(`formDisabled`))&&this._updateDisabled(),this.hasUpdated||this._valueChanged(this._fallbackValue)}statusChanged(){this.updateFormValue(),this.updatePillPosition()}formResetCallback(){this.value=this.hasAttribute(`value`)?this.getAttribute(`value`):null}formStateRestoreCallback(e,t){typeof e==`string`||e==null?this.value=e??null:e instanceof FormData&&this._readFormData(e).then(e=>{this.value=e})}async _readFormData(e){let t=e.get(this.name);return t instanceof Blob?JSON.parse(await t.text()):t}updatePillPosition(e=!1){let t=this.options;if(t.length<2||t.every(e=>!e.checked)||t.every(e=>!e.clientWidth))return;this.toggleState(`disable-animation-on-resizing`,e);let n=t[0],r=n.checked,i=r?`0px`:`${n.clientWidth}px`,a=r?`${this.clientWidth-n.clientWidth}px`:`0px`;(a!==`0px`||i!==`0px`)&&(this.style?.setProperty(`--sbb-toggle-option-left`,i),this.style?.setProperty(`--sbb-toggle-option-right`,a),this.offsetWidth,this.internals.states.add(`initialized`))}_updateToggle(){this._valueChanged(this.value),this._updateDisabled()}_valueChanged(e){let t=this.options,n=t.find(t=>e===t.value)??t.find(e=>e.checked)??t[0];n&&(n.checked=!0,this.statusChanged())}_updateDisabled(){for(let e of this.options)e.disabled=this.disabled||this.formDisabled}_handleInput(){this.statusChanged(),this.dispatchEvent(new Event(`change`,{bubbles:!0}))}_handleKeyDown(e){if(!this.options.filter(e=>!e.disabled&&d.isVisible(e))||e.target!==this&&e.target.parentElement!==this)return;let t=this.options,n=this.matches(`:dir(rtl)`),r=t.findIndex(e=>e.checked)??t[0],i=t.slice(r+1).concat(t.slice(0,r)).filter(e=>!e.disabled&&d.isVisible(e));(n?e.key===`ArrowLeft`:e.key===` `||e.key===`ArrowRight`)?(this._selectAndFocusOption(i[0]),e.preventDefault()):(n?e.key===` `||e.key===`ArrowRight`:e.key===`ArrowLeft`)&&(this._selectAndFocusOption(i.at(-1)),e.preventDefault())}_selectAndFocusOption(e){!e||e.disabled||e.checked||(e.checked=!0,e.focus(),e.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})))}render(){return r` <slot @slotchange=${this._updateToggle}></slot> `}}})();export{g as SbbToggleElement,m as SbbToggleOptionElement};

package/tooltip.pure.js

@@ -1,5 +1,5 @@
 import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,isServer as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbDisabledMixin as o,SbbEscapableOverlayController as s,SbbOpenCloseBaseElement as c,SbbOverlayPositionController as l,appendAriaElements as u,idReference as d,isAndroid as f,isIOS as p,isZeroAnimationDuration as m,popoverResetStyles as h,queueDomContentLoaded as g,readConfig as _,removeAriaElements as v,sbbInputModalityDetector as y,sbbOverlayOutsidePointerEventListener as b}from"./core.js";var x=`:host{--sbb-tooltip-max-width:min(25rem, calc(100vw - var(--sbb-spacing-fixed-2x)));--sbb-tooltip-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));position-area:var(--sbb-overlay-position-area);position-try-fallbacks:var(--sbb-overlay-position-try-fallbacks);pointer-events:var(--sbb-tooltip-pointer-events,all);z-index:var(--sbb-tooltip-z-index,var(--sbb-overlay-default-z-index));animation-name:var(--sbb-tooltip-animation-name);animation-duration:var(--sbb-tooltip-animation-duration);animation-timing-function:var(--sbb-tooltip-animation-easing);font-size:var(--sbb-tooltip-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:none;position:fixed}:host(:is(:is(:state(state-opening),[state--state-opening]),:is(:state(state-opened),[state--state-opened]),:is(:state(state-closing),[state--state-closing]))){--sbb-tooltip-animation-name:open;display:block}:host(:is(:state(state-closing),[state--state-closing])){--sbb-tooltip-animation-name:close;--sbb-tooltip-pointer-events:none}:host(:is([data-position~=block-end],[data-position~=bottom],[data-position^=end])){padding-block-start:var(--sbb-tooltip-gap)}:host(:is([data-position~=block-start],[data-position~=top],[data-position^=start])){padding-block-end:var(--sbb-tooltip-gap)}:host(:is([data-position~=inline-start],[data-position~=inline-end],[data-position~=left],[data-position~=right],[data-position$=\\ start],[data-position$=\\ end])){padding-inline:var(--sbb-tooltip-gap)}.sbb-tooltip{box-shadow:var(--sbb-box-shadow-level-5-soft);border:var(--sbb-border-width-1x) solid var(--sbb-tooltip-border-color);border-radius:var(--sbb-tooltip-border-radius);padding:var(--sbb-tooltip-padding);color:var(--sbb-tooltip-color);background-color:var(--sbb-tooltip-background-color);min-width:var(--sbb-tooltip-min-width);max-width:var(--sbb-tooltip-max-width)}@keyframes open{0%{opacity:0;translate:var(--sbb-tooltip-animation-translate)}to{opacity:1;translate:0}}@keyframes close{0%{opacity:1;translate:0}to{opacity:0;translate:var(--sbb-tooltip-animation-translate)}}
-`;const S=f||p,C=new WeakMap;let w=(()=>{let f=o(c),p=[],w,T=[],E=[],D,O,k;return class extends f{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;w=[d(),a()],D=[a({attribute:`open-delay`,type:Number})],O=[a({attribute:`close-delay`,type:Number})],k=[a({attribute:`long-press-close-delay`,type:Number})],e(this,null,w,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},T,E),e(this,null,D,{kind:`setter`,name:`openDelay`,static:!1,private:!1,access:{has:e=>`openDelay`in e,set:(e,t)=>{e.openDelay=t}},metadata:t},null,p),e(this,null,O,{kind:`setter`,name:`closeDelay`,static:!1,private:!1,access:{has:e=>`closeDelay`in e,set:(e,t)=>{e.closeDelay=t}},metadata:t},null,p),e(this,null,k,{kind:`setter`,name:`longPressCloseDelay`,static:!1,private:!1,access:{has:e=>`longPressCloseDelay`in e,set:(e,t)=>{e.longPressCloseDelay=t}},metadata:t},null,p),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tooltip`}static{this.role=`tooltip`}static{this.styles=[h,i(x)]}static{r||g(()=>this._initializeTooltipOutlet())}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}set openDelay(e){this._openDelay=e}get openDelay(){return this._openDelay??_().tooltip?.openDelay??0}set closeDelay(e){this._closeDelay=e}get closeDelay(){return this._closeDelay??_().tooltip?.closeDelay??0}set longPressCloseDelay(e){this._longPressCloseDelay=+e}get longPressCloseDelay(){return this._longPressCloseDelay??_().tooltip?.longPressCloseDelay??1500}constructor(){super(),this.#e=(t(this,p),t(this,T,null)),this._openDelay=(t(this,E),null),this._closeDelay=null,this._triggerElement=null,this._escapableOverlayController=new s(this),this._overlayController=new l(this),this.addEventListener(`mouseleave`,e=>{(this.state===`opened`||this.state===`opening`)&&(!e.relatedTarget||!this._triggerElement?.contains(e.relatedTarget))&&this._delayedClose()},{passive:!0}),this.addEventListener(`overlayOutsidePointer`,()=>this.close(),{passive:!0}),this.addEventListener(`animationend`,e=>this._onTooltipAnimationEnd(e),{passive:!0})}static _initializeTooltipOutlet(){this._tooltipOutlet=document.createElement(`div`),this._tooltipOutlet.classList.add(`sbb-overlay-outlet`),document.body.appendChild(this._tooltipOutlet),new MutationObserver(e=>{for(let t of e)if(t.type===`attributes`)this._handleTooltipTrigger(t.target);else if(t.type===`childList`)for(let e of[...t.addedNodes,...t.removedNodes].filter(e=>e.nodeType===e.ELEMENT_NODE))this._handleTooltipTrigger(e),this._findAndHandleTooltipTriggers(e)}).observe(document.documentElement,{attributeFilter:[`sbb-tooltip`,`sbb-tooltip-open-delay`,`sbb-tooltip-close-delay`,`sbb-tooltip-position`],childList:!0,subtree:!0}),this._findAndHandleTooltipTriggers(document.body)}static _findAndHandleTooltipTriggers(e){e.querySelectorAll(`[sbb-tooltip]`).forEach(e=>this._handleTooltipTrigger(e))}static _handleTooltipTrigger(e){let t=e.getAttribute(`sbb-tooltip`),n=C.get(e);if(t&&e.isConnected){n||(n=document.createElement(`sbb-tooltip`),C.set(e,n),this._tooltipOutlet.appendChild(n),n.trigger=e),n.textContent=t,n.openDelay=e.hasAttribute(`sbb-tooltip-open-delay`)?+e.getAttribute(`sbb-tooltip-open-delay`):null,n.closeDelay=e.hasAttribute(`sbb-tooltip-close-delay`)?+e.getAttribute(`sbb-tooltip-close-delay`):null;let r=e.hasAttribute(`sbb-tooltip-position`)?e.getAttribute(`sbb-tooltip-position`).split(`,`).map(e=>e.trim()):e.tooltipPositions;r&&r.length>0?(n.style.setProperty(`--sbb-overlay-position-area`,r[0]),n.style.setProperty(`--sbb-overlay-position-try-fallbacks`,r.slice(1).join(`, `))):(n.style.removeProperty(`--sbb-overlay-position-area`),n.style.removeProperty(`--sbb-overlay-position-try-fallbacks`))}else n&&(C.delete(e),n._destroy?.())}connectedCallback(){super.connectedCallback(),this.popover=`manual`,this.state=`closed`,b.connect(this),this.hasUpdated&&this.trigger&&this._attach(this.trigger)}disconnectedCallback(){super.disconnectedCallback(),b.disconnect(this),this._detach()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!r&&(!e||e===`trigger`)&&this.hasUpdated&&this._attach(this.trigger)}firstUpdated(e){super.firstUpdated(e),this._attach(this.trigger)}open(){this._resetOpenCloseTimeout(),!(this.state!==`closed`&&this.state!==`closing`||this.disabled||!this.trigger||!this.dispatchBeforeOpenEvent())&&(this.showPopover?.(),this.state=`opening`,this._overlayController.connect(this.trigger),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this._resetOpenCloseTimeout(),!(this.state!==`opened`&&this.state!==`opening`)&&(this.dispatchBeforeCloseEvent(),this.state=`closing`,this._isZeroAnimationDuration()&&this._handleClosing())}_delayedOpen(){this._resetOpenCloseTimeout(),this._openTimeout=setTimeout(()=>this.open(),this.openDelay)}_handleOpening(){this.state=`opened`,this._escapableOverlayController.connect(),this.dispatchOpenEvent()}_delayedClose(){this._resetOpenCloseTimeout(),this._closeTimeout=setTimeout(()=>this.close(),this.closeDelay)}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this._overlayController.disconnect(),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent(),this._openStateController?.abort()}_onTooltipAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_attach(e){this._triggerElement&&this._detach(),this._triggerElement=e,this._triggerElement&&(this._triggerElement.ariaDescribedByElements=u(this._triggerElement.ariaDescribedByElements,this),this._addTriggerEventHandlers())}_detach(){this._triggerAbortController?.abort(),this._openStateController?.abort(),this._resetOpenCloseTimeout(),clearTimeout(this._longPressOpenTimeout),clearTimeout(this._longPressCloseTimeout),this._triggerElement&&=(this._triggerElement.ariaDescribedByElements=v(this._triggerElement.ariaDescribedByElements,this),null)}_destroy(){this._detach(),this.remove()}_addTriggerEventHandlers(){let e=this._triggerElement;if(!e)return;this._triggerAbortController?.abort(),this._triggerAbortController=new AbortController;let t={signal:this._triggerAbortController.signal,passive:!0};S||(e.addEventListener(`mouseenter`,()=>this._delayedOpen(),t),e.addEventListener(`mouseleave`,e=>{let t=e.relatedTarget;(!t||t!==this)&&this._delayedClose()},t),e.addEventListener(`blur`,()=>this.close(),t),e.addEventListener(`focus`,()=>{y.mostRecentModality===`keyboard`&&this._delayedOpen()},t)),e.addEventListener(`touchstart`,()=>{clearTimeout(this._longPressOpenTimeout),clearTimeout(this._longPressCloseTimeout),this._longPressOpenTimeout=setTimeout(()=>this.open(),500)},t),e.addEventListener(`touchend`,()=>{clearTimeout(this._longPressOpenTimeout),this._longPressCloseTimeout=setTimeout(()=>this.close(),this.longPressCloseDelay)},t),e.addEventListener(`touchcancel`,()=>{clearTimeout(this._longPressOpenTimeout)},t)}_isZeroAnimationDuration(){return m(this,`--sbb-tooltip-animation-duration`)}_resetOpenCloseTimeout(){clearTimeout(this._openTimeout),clearTimeout(this._closeTimeout)}render(){return n`
+`;const S=f||p,C=new WeakMap;let w=(()=>{let f=o(c),p=[],w,T=[],E=[],D,O,k;return class extends f{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;w=[d(),a()],D=[a({attribute:`open-delay`,type:Number})],O=[a({attribute:`close-delay`,type:Number})],k=[a({attribute:`long-press-close-delay`,type:Number})],e(this,null,w,{kind:`accessor`,name:`trigger`,static:!1,private:!1,access:{has:e=>`trigger`in e,get:e=>e.trigger,set:(e,t)=>{e.trigger=t}},metadata:t},T,E),e(this,null,D,{kind:`setter`,name:`openDelay`,static:!1,private:!1,access:{has:e=>`openDelay`in e,set:(e,t)=>{e.openDelay=t}},metadata:t},null,p),e(this,null,O,{kind:`setter`,name:`closeDelay`,static:!1,private:!1,access:{has:e=>`closeDelay`in e,set:(e,t)=>{e.closeDelay=t}},metadata:t},null,p),e(this,null,k,{kind:`setter`,name:`longPressCloseDelay`,static:!1,private:!1,access:{has:e=>`longPressCloseDelay`in e,set:(e,t)=>{e.longPressCloseDelay=t}},metadata:t},null,p),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tooltip`}static{this.role=`tooltip`}static{this.styles=[h,i(x)]}static{r||g(()=>this._initializeTooltipOutlet())}#e;get trigger(){return this.#e}set trigger(e){this.#e=e}set openDelay(e){this._openDelay=e}get openDelay(){return this._openDelay??_().tooltip?.openDelay??0}set closeDelay(e){this._closeDelay=e}get closeDelay(){return this._closeDelay??_().tooltip?.closeDelay??0}set longPressCloseDelay(e){this._longPressCloseDelay=+e}get longPressCloseDelay(){return this._longPressCloseDelay??_().tooltip?.longPressCloseDelay??1500}constructor(){super(),this.#e=(t(this,p),t(this,T,null)),this._openDelay=(t(this,E),null),this._closeDelay=null,this._triggerElement=null,this._escapableOverlayController=new s(this),this._overlayController=new l(this),this.addEventListener(`mouseleave`,e=>{(this.state===`opened`||this.state===`opening`)&&(!e.relatedTarget||!this._triggerElement?.contains(e.relatedTarget))&&this._delayedClose()},{passive:!0}),this.addEventListener(`overlayOutsidePointer`,()=>this.close(),{passive:!0}),this.addEventListener(`animationend`,e=>this._onTooltipAnimationEnd(e),{passive:!0})}static _initializeTooltipOutlet(){this._tooltipOutlet=document.createElement(`div`),this._tooltipOutlet.classList.add(`sbb-overlay-outlet`),document.body.appendChild(this._tooltipOutlet),new MutationObserver(e=>{for(let t of e)if(t.type===`attributes`)this._handleTooltipTrigger(t.target);else if(t.type===`childList`)for(let e of[...t.addedNodes,...t.removedNodes].filter(e=>e.nodeType===e.ELEMENT_NODE))this._handleTooltipTrigger(e),this._findAndHandleTooltipTriggers(e)}).observe(document.documentElement,{attributeFilter:[`sbb-tooltip`,`sbb-tooltip-open-delay`,`sbb-tooltip-close-delay`,`sbb-tooltip-position`],childList:!0,subtree:!0}),this._findAndHandleTooltipTriggers(document.body)}static _findAndHandleTooltipTriggers(e){e.querySelectorAll(`[sbb-tooltip]`).forEach(e=>this._handleTooltipTrigger(e))}static _handleTooltipTrigger(e){let t=e.getAttribute(`sbb-tooltip`),n=C.get(e);if(t&&e.isConnected){n||(n=document.createElement(`sbb-tooltip`),C.set(e,n),this._tooltipOutlet.appendChild(n),n.trigger=e),n.textContent=t,n.openDelay=e.hasAttribute(`sbb-tooltip-open-delay`)?+e.getAttribute(`sbb-tooltip-open-delay`):null,n.closeDelay=e.hasAttribute(`sbb-tooltip-close-delay`)?+e.getAttribute(`sbb-tooltip-close-delay`):null;let r=e.hasAttribute(`sbb-tooltip-position`)?e.getAttribute(`sbb-tooltip-position`).split(`,`).map(e=>e.trim()):e.tooltipPositions;r&&r.length>0?(n.style.setProperty(`--sbb-overlay-position-area`,r[0]),n.style.setProperty(`--sbb-overlay-position-try-fallbacks`,r.slice(1).join(`, `))):(n.style.removeProperty(`--sbb-overlay-position-area`),n.style.removeProperty(`--sbb-overlay-position-try-fallbacks`))}else n&&(C.delete(e),n._destroy?.())}connectedCallback(){super.connectedCallback(),this.popover=`manual`,this.state=`closed`,b.connect(this),this.hasUpdated&&this.trigger&&this._attach(this.trigger)}disconnectedCallback(){super.disconnectedCallback(),b.disconnect(this),this._detach()}requestUpdate(e,t,n){super.requestUpdate(e,t,n),!r&&(!e||e===`trigger`)&&this.hasUpdated&&this._attach(this.trigger)}firstUpdated(e){super.firstUpdated(e),this._attach(this.trigger)}open(){this._resetOpenCloseTimeout(),!(this.state!==`closed`&&this.state!==`closing`||this.disabled||!this.trigger||!this.dispatchBeforeOpenEvent())&&(this.showPopover?.(),this.state=`opening`,this._overlayController.connect(this.trigger),this._isZeroAnimationDuration()&&this._handleOpening())}close(){this._resetOpenCloseTimeout(),(this.state===`opened`||this.state===`opening`)&&(this.dispatchBeforeCloseEvent(),this.state=`closing`,this._isZeroAnimationDuration()&&this._handleClosing())}_delayedOpen(){this._resetOpenCloseTimeout(),this._openTimeout=setTimeout(()=>this.open(),this.openDelay)}_handleOpening(){this.state=`opened`,this._escapableOverlayController.connect(),this.dispatchOpenEvent()}_delayedClose(){this._resetOpenCloseTimeout(),this._closeTimeout=setTimeout(()=>this.close(),this.closeDelay)}_handleClosing(){this.state=`closed`,this.hidePopover?.(),this._overlayController.disconnect(),this._escapableOverlayController.disconnect(),this.dispatchCloseEvent(),this._openStateController?.abort()}_onTooltipAnimationEnd(e){e.animationName===`open`&&this.state===`opening`?this._handleOpening():e.animationName===`close`&&this.state===`closing`&&this._handleClosing()}_attach(e){this._triggerElement&&this._detach(),this._triggerElement=e,this._triggerElement&&(this._triggerElement.ariaDescribedByElements=u(this._triggerElement.ariaDescribedByElements,this),this._addTriggerEventHandlers())}_detach(){this._triggerAbortController?.abort(),this._openStateController?.abort(),this._resetOpenCloseTimeout(),clearTimeout(this._longPressOpenTimeout),clearTimeout(this._longPressCloseTimeout),this._triggerElement&&=(this._triggerElement.ariaDescribedByElements=v(this._triggerElement.ariaDescribedByElements,this),null)}_destroy(){this._detach(),this.remove()}_addTriggerEventHandlers(){let e=this._triggerElement;if(!e)return;this._triggerAbortController?.abort(),this._triggerAbortController=new AbortController;let t={signal:this._triggerAbortController.signal,passive:!0};S||(e.addEventListener(`mouseenter`,()=>this._delayedOpen(),t),e.addEventListener(`mouseleave`,e=>{let t=e.relatedTarget;(!t||t!==this)&&this._delayedClose()},t),e.addEventListener(`blur`,()=>this.close(),t),e.addEventListener(`focus`,()=>{y.mostRecentModality===`keyboard`&&this._delayedOpen()},t)),e.addEventListener(`touchstart`,()=>{clearTimeout(this._longPressOpenTimeout),clearTimeout(this._longPressCloseTimeout),this._longPressOpenTimeout=setTimeout(()=>this.open(),500)},t),e.addEventListener(`touchend`,()=>{clearTimeout(this._longPressOpenTimeout),this._longPressCloseTimeout=setTimeout(()=>this.close(),this.longPressCloseDelay)},t),e.addEventListener(`touchcancel`,()=>{clearTimeout(this._longPressOpenTimeout)},t)}_isZeroAnimationDuration(){return m(this,`--sbb-tooltip-animation-duration`)}_resetOpenCloseTimeout(){clearTimeout(this._openTimeout),clearTimeout(this._closeTimeout)}render(){return n`
       <div class="sbb-tooltip">
         <slot></slot>
       </div>