@sbb-esta/lyne-elements 5.1.0 → 5.2.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (68) hide show
  1. package/action-group.pure.js +1 -1
  2. package/alert.pure.js +14 -14
  3. package/breadcrumb.pure.js +3 -3
  4. package/calendar.pure.js +67 -67
  5. package/carousel/_carousel.global.scss +6 -0
  6. package/carousel.pure.js +1 -1
  7. package/clock.pure.js +1 -1
  8. package/core/styles/_theme.scss +1 -0
  9. package/core.js +2 -2
  10. package/custom-elements.json +99 -67
  11. package/date-input.pure.js +1 -1
  12. package/development/action-group.pure.js +1 -1
  13. package/development/alert.pure.js +14 -14
  14. package/development/breadcrumb.pure.js +3 -3
  15. package/development/calendar.pure.js +67 -67
  16. package/development/carousel.pure.js +1 -1
  17. package/development/clock.pure.js +15 -17
  18. package/development/core.js +2 -2
  19. package/development/date-input.pure.js +15 -7
  20. package/development/expansion-panel.pure.js +6 -6
  21. package/development/file-selector.pure.js +7 -3
  22. package/development/image.pure.js +8 -8
  23. package/development/map-container.pure.js +8 -8
  24. package/development/mini-calendar.pure.js +1 -1
  25. package/development/notification.pure.js +12 -9
  26. package/development/option.pure.js +11 -11
  27. package/development/paginator.pure.js +18 -18
  28. package/development/signet.pure.js +17 -17
  29. package/development/stepper/step/step.component.d.ts +0 -2
  30. package/development/stepper/stepper/stepper.component.d.ts +2 -2
  31. package/development/stepper.pure.js +24 -17
  32. package/development/tabs.pure.js +4 -4
  33. package/development/teaser.pure.js +1 -1
  34. package/development/time-input.pure.js +10 -6
  35. package/development/timetable-form.pure.js +3 -3
  36. package/development/timetable-occupancy.pure.js +22 -22
  37. package/development/toast.pure.js +6 -6
  38. package/development/tooltip.pure.js +4 -2
  39. package/development/train.pure.js +29 -29
  40. package/development/visual-checkbox.pure.js +13 -13
  41. package/expansion-panel.pure.js +6 -6
  42. package/file-selector.pure.js +2 -2
  43. package/image.pure.js +8 -8
  44. package/lean-off-brand-theme.css +39 -1
  45. package/lean-safety-theme.css +39 -1
  46. package/lean-theme.css +39 -1
  47. package/map-container.pure.js +8 -8
  48. package/mini-calendar.pure.js +1 -1
  49. package/notification.pure.js +12 -9
  50. package/off-brand-theme.css +39 -1
  51. package/option.pure.js +11 -11
  52. package/package.json +1 -1
  53. package/paginator.pure.js +18 -18
  54. package/safety-theme.css +39 -1
  55. package/signet.pure.js +17 -17
  56. package/standard-theme.css +39 -1
  57. package/stepper.pure.js +3 -3
  58. package/table/_table.global.scss +46 -1
  59. package/tabs.pure.js +4 -4
  60. package/teaser/_teaser.global.scss +4 -0
  61. package/teaser.pure.js +1 -1
  62. package/time-input.pure.js +1 -1
  63. package/timetable-form.pure.js +3 -3
  64. package/timetable-occupancy.pure.js +22 -22
  65. package/toast.pure.js +6 -6
  66. package/tooltip.pure.js +3 -3
  67. package/train.pure.js +29 -29
  68. package/visual-checkbox.pure.js +13 -13
package/stepper.pure.js CHANGED
@@ -1,14 +1,14 @@
1
1
  import{html as e,unsafeCSS as t}from"lit";import{SbbButtonBaseElement as n,SbbDisabledMixin as r,SbbElement as i,SbbMediaMatcherController as a,SbbMediaQueryBreakpointLargeAndAbove as o,SbbMediaQueryBreakpointSmallAndAbove as s,SbbMediaQueryBreakpointUltraAndAbove as c,SbbMediaQueryBreakpointZeroAndAbove as l,SbbPropertyWatcherController as u,appendAriaElements as d,forceType as f,getNextElementIndex as p,isArrowKeyPressed as m,removeAriaElements as h}from"./core.js";import{SbbIconNameMixin as g}from"./icon.pure.js";import{ResizeController as _}from"@lit-labs/observers/resize-controller.js";import{__esDecorate as v,__runInitializers as y}from"tslib";import{IntersectionController as b}from"@lit-labs/observers/intersection-controller.js";import{property as x}from"lit/decorators.js";var S=`:host{--sbb-step-label-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));gap:var(--sbb-step-label-gap);min-width:0;max-width:fit-content;cursor:var(--sbb-step-label-cursor);color:var(--sbb-step-label-color);font-size:var(--sbb-step-label-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);display:flex;position:relative}:host:before{font-size:var(--sbb-step-label-number-font-size);font-weight:var(--sbb-step-label-font-weight-selected,normal);top:50%;left:50%;z-index:1;translate:-50% -50%;translate:-50% calc(-50% + var(--sbb-step-label-translate-y-content-hover,0px));transition:translate var(--sbb-step-label-animation-duration) var(--sbb-animation-easing);line-height:1;position:absolute;inset-block-start:calc(var(--sbb-step-label-font-size) * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2);inset-inline-start:calc(var(--sbb-step-label-prefix-size) / 2)}:host(:is(:state(selected),[state--selected])){--sbb-step-label-color:var(--sbb-color-3);--sbb-step-label-font-weight-selected:bold}@media (forced-colors:active){:host(:is(:state(selected),[state--selected])){--sbb-step-label-color:Highlight!important}}:host(:is(:state(size-s),[state--size-s])){--sbb-step-label-gap:var(--sbb-step-label-gap-s);--sbb-step-label-prefix-size:var(--sbb-step-label-prefix-size-s);--sbb-step-label-font-size:var(--sbb-step-label-font-size-s)}:host(:is(:state(size-m),[state--size-m])){--sbb-step-label-gap:var(--sbb-step-label-gap-m);--sbb-step-label-prefix-size:var(--sbb-step-label-prefix-size-m);--sbb-step-label-font-size:var(--sbb-step-label-font-size-m)}:host(:disabled){--sbb-step-label-color:light-dark(var(--sbb-color-granite),var(--sbb-color-graphite));--sbb-step-label-prefix-border-style:dashed}@media (forced-colors:active){:host(:disabled){--sbb-step-label-color:GrayText!important}}@media (any-hover:hover){:host(:hover:not(:disabled)){--sbb-step-label-cursor:var(--sbb-cursor-pointer);--sbb-step-label-prefix-background-color:var(--sbb-background-color-3);--sbb-step-label-translate-y-content-hover:-.0625rem;--sbb-step-label-prefix-size-grow-hover:calc(var(--sbb-border-width-2x) * -1)}}: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);border-radius:var(--sbb-border-radius-1x)}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){transition:margin var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}:host(:is(:state(orientation-vertical),[state--orientation-vertical]):not(:first-of-type)){margin-block-start:var(--sbb-spacing-fixed-6x)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){margin-block-end:var(--sbb-spacing-fixed-8x)}.sbb-step-label__prefix{width:var(--sbb-step-label-prefix-size);height:var(--sbb-step-label-prefix-size);flex-shrink:0;justify-content:center;align-items:center;display:flex;position:relative;inset-block-start:calc(1em * var(--sbb-typo-line-height-text) / 2 + var(--sbb-border-width-1x) / 2 - var(--sbb-step-label-prefix-size) / 2)}.sbb-step-label__prefix:before{content:"";inset:calc(var(--sbb-step-label-prefix-size-grow-hover,0px));border-radius:var(--sbb-border-radius-infinity);border:var(--sbb-border-width-1x) var(--sbb-step-label-prefix-border-style) var(--sbb-step-label-prefix-border-color);background-color:var(--sbb-step-label-prefix-background-color);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,inset;position:absolute}.sbb-step-label__text{font-weight:700}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])) .sbb-step-label__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}::slotted(sbb-icon),sbb-icon{z-index:1;background-color:var(--sbb-step-label-prefix-background-color);border-radius:var(--sbb-border-radius-infinity);translate:0 var(--sbb-step-label-translate-y-content-hover,0);transition-duration:var(--sbb-step-label-animation-duration);transition-timing-function:var(--sbb-animation-easing);transition-property:background-color,translate}
2
- `,C=class extends g(r(n)){static{this.elementName=`sbb-step-label`}static{this.role=`tab`}static{this.styles=[t(S)]}get step(){return this._step}get stepper(){return this.closest(`sbb-stepper`)}set disabled(e){super.disabled=e,this.toggleState(`user-disabled`,e)}get disabled(){return super.disabled}constructor(){super(),this._step=null,this._previousSize=null,this.addEventListener?.(`click`,()=>{let e=this.stepper;e&&this.step&&this._isNotDeactivatedByLinearMode(this.step)&&(e.selected=this.step)}),this.addController(new u(this,()=>this.stepper,{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)},size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}_isNotDeactivatedByLinearMode(e){let t=this.stepper;if(t?.linear&&t.selectedIndex!==null){let n=t.steps.indexOf(e);return n<t.selectedIndex||n===t.selectedIndex+1}return!0}connectedCallback(){super.connectedCallback(),this.slot||=`step-label`,this.internals.ariaSelected=`false`,this.tabIndex=-1,this._assignStep()}select(){this.tabIndex=0,this.internals.ariaSelected=`true`,this.internals.states.add(`selected`)}deselect(){this.tabIndex=-1,this.internals.ariaSelected=`false`,this.internals.states.delete(`selected`)}configure(e,t,n){n&&this._assignStep(),this.internals.ariaPosInSet=`${e}`,this.internals.ariaSetSize=`${t}`}_assignStep(){let e=this.nextElementSibling;for(;e&&e.localName!==`sbb-step`;)e=e.nextElementSibling;let t=e;this.internals.ariaControlsElements=h(this.internals.ariaControlsElements,this._step),this._step=t instanceof Element?t:null,this.internals.ariaControlsElements=d(this.internals.ariaControlsElements,this._step)}disable(e){super.disabled=e}render(){return e`
2
+ `,C=class extends g(r(n)){static{this.elementName=`sbb-step-label`}static{this.role=`tab`}static{this.styles=[t(S)]}get step(){return this._step}get stepper(){return this.closest(`sbb-stepper`)}set disabled(e){super.disabled=e,this.toggleState(`user-disabled`,e)}get disabled(){return super.disabled}constructor(){super(),this._step=null,this._previousSize=null,this.addEventListener?.(`click`,()=>{let e=this.stepper;e&&this.step&&this._isNotDeactivatedByLinearMode(this.step)&&!this.disabled&&(e.selected=this.step)}),this.addController(new u(this,()=>this.stepper,{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)},size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}_isNotDeactivatedByLinearMode(e){let t=this.stepper;if(t?.linear&&t.selectedIndex!==null){let n=t.steps.indexOf(e);return n<t.selectedIndex||n===t.selectedIndex+1}return!0}connectedCallback(){super.connectedCallback(),this.slot||=`step-label`,this.internals.ariaSelected=`false`,this.tabIndex=-1,this._assignStep()}select(){this.tabIndex=0,this.internals.ariaSelected=`true`,this.internals.states.add(`selected`)}deselect(){this.tabIndex=-1,this.internals.ariaSelected=`false`,this.internals.states.delete(`selected`)}configure(e,t,n){n&&this._assignStep(),this.internals.ariaPosInSet=`${e}`,this.internals.ariaSetSize=`${t}`}_assignStep(){let e=this.nextElementSibling;for(;e&&e.localName!==`sbb-step`;)e=e.nextElementSibling;let t=e;this.internals.ariaControlsElements=h(this.internals.ariaControlsElements,this._step),this._step=t instanceof Element?t:null,this.internals.ariaControlsElements=d(this.internals.ariaControlsElements,this._step)}disable(e){super.disabled=e}render(){return e`
3
3
  <span class="sbb-step-label__prefix">${this.renderIconSlot()}</span>
4
4
  <span class="sbb-step-label__text"><slot></slot></span>
5
5
  `}},w=`:host{--sbb-step-opacity:0;--sbb-step-margin-inline-start:var(--sbb-spacing-fixed-4x);--sbb-step-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));display:block}:host(:is(:state(orientation-vertical),[state--orientation-vertical])){opacity:0;height:0;transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing), height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-step-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete;margin-inline-start:var(--sbb-step-margin-inline-start)}:host(:is(:state(selected),[state--selected]):is(:state(orientation-vertical),[state--orientation-vertical])){opacity:1;height:var(--sbb-stepper-content-height);transition:display var(--sbb-step-animation-duration) var(--sbb-animation-easing), height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing), opacity var(--sbb-step-animation-duration) var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);transition-behavior:allow-discrete}:host(:is(:state(selected),[state--selected])){--sbb-step-opacity:1;--sbb-step-display:block;--sbb-step-height:fit-content;--sbb-step-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));--sbb-step-animation-delay:var(--sbb-step-animation-duration)}:host(:is(:state(orientation-horizontal),[state--orientation-horizontal])){--sbb-step-position:absolute;--sbb-step-inset-block-start:0}.sbb-step{position:var(--sbb-step-position,initial);width:100%;opacity:var(--sbb-step-opacity);display:var(--sbb-step-display,none);height:var(--sbb-step-height,0);transition-property:display,opacity;transition-duration:var(--sbb-step-animation-duration);transition-delay:var(--sbb-step-animation-delay,0);transition-timing-function:var(--sbb-animation-easing);transition-behavior:allow-discrete;inset-block-start:var(--sbb-step-inset-block-start,unset)}@starting-style{.sbb-step{--sbb-step-opacity:0}}
6
- `,T=class extends Event{get currentIndex(){return this._currentIndex}get currentStep(){return this._currentStep}get nextIndex(){return this._nextIndex}get nextStep(){return this._nextStep}constructor({currentIndex:e,currentStep:t,nextIndex:n,nextStep:r}){super(`validate`,{bubbles:!0,composed:!0,cancelable:!0}),this._currentIndex=e,this._currentStep=t,this._nextIndex=n,this._nextStep=r}},E=class extends i{static{this.elementName=`sbb-step`}static{this.role=`tabpanel`}static{this.styles=[t(w)]}static{this.events={validate:`validate`,resizechange:`resizechange`,active:`active`}}get label(){return this._label}get stepper(){return this.closest(`sbb-stepper`)}constructor(){super(),this._stepResizeObserver=new _(this,{target:null,skipInitial:!0,callback:()=>setTimeout(()=>this._onStepElementResize())}),this._label=null,this.addEventListener?.(`click`,e=>this._handleClick(e)),this.addController(new u(this,()=>this.stepper,{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)}}))}select(){!this.hasUpdated||!this.label||(this.internals.states.add(`selected`),this.label.select(),this.dispatchEvent(new Event(`active`,{bubbles:!0,composed:!0})))}deselect(){this.label&&(this.internals.states.delete(`selected`),this.label.deselect())}validate(e){return this.dispatchEvent(new T(e))}configure(e){e&&this._assignLabel()}_handleClick(e){let t=e.composedPath().filter(e=>e instanceof window.HTMLElement);t.some(e=>this._isGoNextElement(e))?this.stepper?.next():t.some(e=>this._isGoPreviousElement(e))&&this.stepper?.previous()}_isGoNextElement(e){return e.hasAttribute(`sbb-stepper-next`)&&!e.hasAttribute(`disabled`)}_isGoPreviousElement(e){return e.hasAttribute(`sbb-stepper-previous`)&&!e.hasAttribute(`disabled`)}_onStepElementResize(){this.matches(`:is(:state(selected),[state--selected])`)&&this.dispatchEvent(new Event(`resizechange`,{bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.slot||=`step`,this._assignLabel()}firstUpdated(e){super.firstUpdated(e),this.updateComplete.then(()=>{this._stepResizeObserver.observe(this.shadowRoot.querySelector(`.sbb-step`))})}_assignLabel(){let e=this.previousElementSibling;for(;e&&e.localName!==`sbb-step-label`;)e=e.previousElementSibling;let t=e;this.internals.ariaLabelledByElements=h(this.internals.ariaLabelledByElements,this._label),this._label=t instanceof Element?t:null,this.internals.ariaLabelledByElements=d(this.internals.ariaLabelledByElements,this._label)}render(){return e`
6
+ `,T=class extends Event{get currentIndex(){return this._currentIndex}get currentStep(){return this._currentStep}get nextIndex(){return this._nextIndex}get nextStep(){return this._nextStep}constructor({currentIndex:e,currentStep:t,nextIndex:n,nextStep:r}){super(`validate`,{bubbles:!0,composed:!0,cancelable:!0}),this._currentIndex=e,this._currentStep=t,this._nextIndex=n,this._nextStep=r}},E=class extends i{static{this.elementName=`sbb-step`}static{this.role=`tabpanel`}static{this.styles=[t(w)]}static{this.events={validate:`validate`,resizechange:`resizechange`,active:`active`}}get label(){return this._label}get stepper(){return this.closest(`sbb-stepper`)}constructor(){super(),this._stepResizeObserver=new _(this,{target:null,skipInitial:!0,callback:()=>setTimeout(()=>this._onStepElementResize())}),this._label=null,this.addEventListener?.(`click`,e=>this._handleClick(e)),this.addController(new u(this,()=>this.stepper,{orientation:e=>{this._previousOrientation&&this.internals.states.delete(`orientation-${this._previousOrientation}`),this._previousOrientation=e.orientation,this._previousOrientation&&this.internals.states.add(`orientation-${this._previousOrientation}`)}}))}select(){!this.hasUpdated||!this.label||(this.internals.states.add(`selected`),this.label.select(),this.dispatchEvent(new Event(`active`,{bubbles:!0,composed:!0})))}deselect(){this.label&&(this.internals.states.delete(`selected`),this.label.deselect())}validate(e){return this.dispatchEvent(new T(e))}configure(e){e&&this._assignLabel()}_handleClick(e){let t=e.composedPath().filter(e=>e instanceof window.HTMLElement);t.some(e=>e.hasAttribute(`sbb-stepper-next`))?this.stepper?.next():t.some(e=>e.hasAttribute(`sbb-stepper-previous`))&&this.stepper?.previous()}_onStepElementResize(){this.matches(`:is(:state(selected),[state--selected])`)&&this.dispatchEvent(new Event(`resizechange`,{bubbles:!0}))}connectedCallback(){super.connectedCallback(),this.slot||=`step`,this._assignLabel()}firstUpdated(e){super.firstUpdated(e),this.updateComplete.then(()=>{this._stepResizeObserver.observe(this.shadowRoot.querySelector(`.sbb-step`))})}_assignLabel(){let e=this.previousElementSibling;for(;e&&e.localName!==`sbb-step-label`;)e=e.previousElementSibling;let t=e;this.internals.ariaLabelledByElements=h(this.internals.ariaLabelledByElements,this._label),this._label=t instanceof Element?t:null,this.internals.ariaLabelledByElements=d(this.internals.ariaLabelledByElements,this._label)}render(){return e`
7
7
  <div class="sbb-step">
8
8
  <slot></slot>
9
9
  </div>
10
10
  `}},D=`:host{--sbb-stepper-animation-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-6x));counter-reset:step-label;display:block;position:relative}@media (forced-colors:active){:host{--sbb-stepper-marker-color:ButtonText}}:host(:is(:state(disable-animation),[state--disable-animation])){--sbb-disable-animation-duration:0s}:host([orientation=vertical]){--sbb-stepper-orientation:column}.sbb-stepper__labels{flex-direction:var(--sbb-stepper-orientation);justify-content:start;margin-block-end:var(--sbb-spacing-responsive-m);display:flex;position:relative}.sbb-stepper__labels:before{content:"";background-color:var(--sbb-stepper-marker-color);position:absolute;inset-inline-start:calc(var(--sbb-stepper-border-width) * -1)}:host([orientation=horizontal]) .sbb-stepper__labels{gap:var(--sbb-spacing-responsive-m);border-block-end:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted);padding-block-end:var(--sbb-spacing-fixed-4x)}:host([orientation=horizontal]) .sbb-stepper__labels:before{height:var(--sbb-stepper-marker-width);width:var(--sbb-stepper-marker-size,0);transition:width var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);inset-block-end:calc(var(--sbb-stepper-border-width) * -1)}:host([orientation=vertical]) .sbb-stepper__labels{border-inline-start:var(--sbb-stepper-border-width) solid var(--sbb-border-color-4-inverted);padding-inline-start:var(--sbb-spacing-fixed-4x)}:host([orientation=vertical]) .sbb-stepper__labels:before{width:var(--sbb-stepper-marker-width);height:var(--sbb-stepper-marker-size,0);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing);inset-block-start:0}.sbb-stepper__steps{position:relative}:host([orientation=horizontal]) .sbb-stepper__steps{height:var(--sbb-stepper-content-height);transition:height var(--sbb-stepper-animation-duration) var(--sbb-animation-easing)}::slotted(sbb-step-label):before{content:counter(step-label);counter-increment:step-label}
11
- `;const O={zero:l,small:s,large:o,ultra:c};var k=class extends Event{get selectedIndex(){return this._selectedIndex}get previousIndex(){return this._previousIndex}get selectedStep(){return this._selectedStep}get previousStep(){return this._previousStep}constructor({selectedIndex:e,previousIndex:t,selectedStep:n,previousStep:r}){super(`stepchange`,{bubbles:!0,composed:!0}),this._selectedIndex=e,this._previousIndex=t,this._selectedStep=n,this._previousStep=r}};let A=(()=>{let n=i,r=[],o,s=[],c=[],l,u,d=[],h=[],g,_=[],S=[],C,w;return class extends n{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;o=[f(),x({type:Boolean})],l=[x({attribute:`horizontal-from`,reflect:!0})],u=[x({reflect:!0})],g=[x({reflect:!0})],C=[x({attribute:!1})],w=[x({attribute:`selected-index`,type:Number})],v(this,null,o,{kind:`accessor`,name:`linear`,static:!1,private:!1,access:{has:e=>`linear`in e,get:e=>e.linear,set:(e,t)=>{e.linear=t}},metadata:e},s,c),v(this,null,l,{kind:`setter`,name:`horizontalFrom`,static:!1,private:!1,access:{has:e=>`horizontalFrom`in e,set:(e,t)=>{e.horizontalFrom=t}},metadata:e},null,r),v(this,null,u,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},d,h),v(this,null,g,{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:e},_,S),v(this,null,C,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:e},null,r),v(this,null,w,{kind:`setter`,name:`selectedIndex`,static:!1,private:!1,access:{has:e=>`selectedIndex`in e,set:(e,t)=>{e.selectedIndex=t}},metadata:e},null,r),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-stepper`}static{this.styles=[t(D)]}static{this.events={stepchange:`stepchange`}}#e;get linear(){return this.#e}set linear(e){this.#e=e}set horizontalFrom(e){this._horizontalFrom=e&&O[e]?e:null,this._horizontalFrom&&this._loaded&&this._checkOrientation()}get horizontalFrom(){return this._horizontalFrom}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get size(){return this.#n}set size(e){this.#n=e}set selected(e){this._loaded&&this._select(e),this._requestedSelected=e}get selected(){return this.querySelector?.(`sbb-step:is(:state(selected),[state--selected])`)??null}set selectedIndex(e){this._loaded&&e!==null&&this._select(this.steps[e]),this._requestedSelectedIndex=e}get selectedIndex(){return this.selected?this.steps.indexOf(this.selected):null}get steps(){let e=[];return this.querySelectorAll?.(`sbb-step`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}get _enabledSteps(){return this.steps.filter(e=>e.label?(customElements.upgrade(e.label),!e.label.disabled):!1)}constructor(){super(),this._observer=(y(this,r),new b(this,{target:null,callback:e=>{e.forEach(e=>{e.intersectionRatio>0&&(this._setStepperHeight(this.selected),this._setMarkerSize())})}})),this.#e=y(this,s,!1),this._horizontalFrom=(y(this,c),null),this.#t=y(this,d,`horizontal`),this.#n=(y(this,h),y(this,_,null)),this._requestedSelected=(y(this,S),null),this._requestedSelectedIndex=null,this._loaded=!1,this._resizeObserverTimeout=null,this._mediaMatcher=new a(this,{}),this._onStepperResize=()=>{this._checkOrientation(),this._setStepperHeight(this.selected),clearTimeout(this._resizeObserverTimeout),this.internals.states.add(`disable-animation`),this._resizeObserverTimeout=setTimeout(()=>this.internals.states.delete(`disable-animation`),150)},this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e)),this.addEventListener?.(`resizechange`,e=>this._onSelectedStepResize(e))}next(){this.selectedIndex!==null&&this._select(this.steps[this.selectedIndex+1])}previous(){this.selectedIndex!==null&&this._select(this.steps[this.selectedIndex-1])}reset(){let e=this.closest(`form`);e?e.reset():this.querySelectorAll(`form`).forEach(e=>e.reset()),this.selectedIndex=0,document.activeElement?.closest(`sbb-stepper`)===this&&this.selected?.label?.focus()}_isSelectable(e){return e?(customElements.upgrade(e),!(e.label&&(customElements.upgrade(e.label),!this.linear&&e.label.disabled))):!1}_select(e){if(!this._isSelectable(e)||e===this.selected)return;let t=this.selectedIndex,n=this.selected,r={currentIndex:t,currentStep:n,nextIndex:this.selectedIndex===null?null:this.selectedIndex+1,nextStep:this.selectedIndex===null?null:this.steps[this.selectedIndex+1]};this.selected&&!this.selected.validate(r)||(this.selected?.deselect(),e.select(),this.dispatchEvent(new k({selectedIndex:this.selectedIndex,previousIndex:t,selectedStep:this.selected,previousStep:n})),this._setMarkerSize(),this._setStepperHeight(e),this._configureLinearMode(),document.activeElement?.closest(`sbb-stepper`)===this&&this.selected?.label?.focus())}_setMarkerSize(){if(!this._loaded||!this.selected||this.selectedIndex===void 0||!this.selected.label)return;let e=this.orientation===`horizontal`?this.selected.label.offsetLeft+this.selected.label.offsetWidth:this._calculateLabelOffsetTop();this.style.setProperty(`--sbb-stepper-marker-size`,`${e}px`)}_setStepperHeight(e){if(e&&e.shadowRoot){let t=e.shadowRoot.querySelector(`.sbb-step`);t&&this.style?.setProperty(`--sbb-stepper-content-height`,`${t.offsetHeight}px`)}}_calculateLabelOffsetTop(){if(this.selectedIndex===null)return;let e=0;for(let t of this.steps){if(t===this.selected)break;e=t.label.offsetHeight+e}return e+this.selected.label.offsetHeight+parseFloat(getComputedStyle(this).getPropertyValue(`--sbb-spacing-fixed-6x`))*16*this.selectedIndex}_onSelectedStepResize(e){this._setStepperHeight(e.target)}_configure(){this.steps.forEach((e,t,n)=>{e.configure(this._loaded),e.label?.configure(t+1,n.length,this._loaded)}),this._select(this.selected||this._enabledSteps[0])}_updateLabels(){this.steps.forEach(e=>{e.slot=this.orientation===`horizontal`?`step`:`step-label`})}_checkOrientation(){this.horizontalFrom&&(this.orientation=this._mediaMatcher.matches(O[this.horizontalFrom])?`horizontal`:`vertical`,this._updateLabels()),setTimeout(()=>this._setMarkerSize(),0)}_configureLinearMode(){this.steps.forEach((e,t)=>{e.label&&(customElements.upgrade(e.label),e.label.disable(this.linear&&t>this.selectedIndex||!this.linear&&e.label.matches(`:is(:state(user-disabled),[state--user-disabled])`)))})}connectedCallback(){super.connectedCallback(),window.addEventListener(`resize`,this._onStepperResize,{passive:!0}),this.toggleState(`disable-animation`,!this._loaded)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`resize`,this._onStepperResize)}firstUpdated(e){super.firstUpdated(e),this.updateComplete.then(()=>{this._loaded=!0,this._configure(),this._requestedSelected&&this.steps.indexOf(this._requestedSelected)!==-1?this.selectedIndex=this.steps.indexOf(this._requestedSelected):this._requestedSelectedIndex?this.selectedIndex=this._requestedSelectedIndex:this.selectedIndex=0,this._observer.observe(this),this._checkOrientation(),setTimeout(()=>this.internals.states.delete(`disable-animation`),150)})}willUpdate(e){super.willUpdate(e),e.has(`orientation`)&&!this.horizontalFrom&&(this._updateLabels(),this._setMarkerSize()),e.has(`linear`)&&this._loaded&&this._configureLinearMode(),e.has(`size`)&&this._setMarkerSize()}_handleKeyDown(e){let t=this._enabledSteps;if(!(!t||e.target!==this&&e.target.parentElement!==this)&&m(e)){let n=p(e,t.indexOf(this.selected),t.length);this._select(t[n]),e.preventDefault()}}render(){return e`
11
+ `;const O={zero:l,small:s,large:o,ultra:c};var k=class extends Event{get selectedIndex(){return this._selectedIndex}get previousIndex(){return this._previousIndex}get selectedStep(){return this._selectedStep}get previousStep(){return this._previousStep}constructor({selectedIndex:e,previousIndex:t,selectedStep:n,previousStep:r}){super(`stepchange`,{bubbles:!0,composed:!0}),this._selectedIndex=e,this._previousIndex=t,this._selectedStep=n,this._previousStep=r}};let A=(()=>{let n=i,r=[],o,s=[],c=[],l,u,d=[],h=[],g,_=[],S=[],C,w;return class extends n{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;o=[f(),x({type:Boolean})],l=[x({attribute:`horizontal-from`,reflect:!0})],u=[x({reflect:!0})],g=[x({reflect:!0})],C=[x({attribute:!1})],w=[x({attribute:`selected-index`,type:Number})],v(this,null,o,{kind:`accessor`,name:`linear`,static:!1,private:!1,access:{has:e=>`linear`in e,get:e=>e.linear,set:(e,t)=>{e.linear=t}},metadata:e},s,c),v(this,null,l,{kind:`setter`,name:`horizontalFrom`,static:!1,private:!1,access:{has:e=>`horizontalFrom`in e,set:(e,t)=>{e.horizontalFrom=t}},metadata:e},null,r),v(this,null,u,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},d,h),v(this,null,g,{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:e},_,S),v(this,null,C,{kind:`setter`,name:`selected`,static:!1,private:!1,access:{has:e=>`selected`in e,set:(e,t)=>{e.selected=t}},metadata:e},null,r),v(this,null,w,{kind:`setter`,name:`selectedIndex`,static:!1,private:!1,access:{has:e=>`selectedIndex`in e,set:(e,t)=>{e.selectedIndex=t}},metadata:e},null,r),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-stepper`}static{this.styles=[t(D)]}static{this.events={stepchange:`stepchange`}}#e;get linear(){return this.#e}set linear(e){this.#e=e}set horizontalFrom(e){this._horizontalFrom=e&&O[e]?e:null,this._horizontalFrom&&this._loaded&&this._checkOrientation()}get horizontalFrom(){return this._horizontalFrom}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get size(){return this.#n}set size(e){this.#n=e}set selected(e){this._loaded&&this._select(e),this._requestedSelected=e}get selected(){return this.querySelector?.(`sbb-step:is(:state(selected),[state--selected])`)??null}set selectedIndex(e){this._loaded&&e!==null&&this._select(this.steps[e]),this._requestedSelectedIndex=e}get selectedIndex(){return this.selected?this.steps.indexOf(this.selected):null}get steps(){let e=[];return this.querySelectorAll?.(`sbb-step`).forEach(t=>{customElements.upgrade(t),e.push(t)}),e}get _enabledSteps(){return this.steps.filter(e=>e.label?(customElements.upgrade(e.label),!e.label.disabled):!1)}constructor(){super(),this._observer=(y(this,r),new b(this,{target:null,callback:e=>{e.forEach(e=>{e.intersectionRatio>0&&(this._setStepperHeight(this.selected),this._setMarkerSize())})}})),this.#e=y(this,s,!1),this._horizontalFrom=(y(this,c),null),this.#t=y(this,d,`horizontal`),this.#n=(y(this,h),y(this,_,null)),this._requestedSelected=(y(this,S),null),this._requestedSelectedIndex=null,this._loaded=!1,this._resizeObserverTimeout=null,this._mediaMatcher=new a(this,{}),this._onStepperResize=()=>{this._checkOrientation(),this._setStepperHeight(this.selected),clearTimeout(this._resizeObserverTimeout),this.internals.states.add(`disable-animation`),this._resizeObserverTimeout=setTimeout(()=>this.internals.states.delete(`disable-animation`),150)},this.addEventListener?.(`keydown`,e=>this._handleKeyDown(e)),this.addEventListener?.(`resizechange`,e=>this._onSelectedStepResize(e))}next(){if(this.selectedIndex!==null)for(let e=this.selectedIndex+1;e<this.steps.length;e++){let t=this.steps[e];if(this._isSelectable(t)){this._select(t);return}}}previous(){if(this.selectedIndex!==null)for(let e=this.selectedIndex-1;e>=0;e--){let t=this.steps[e];if(this._isSelectable(t)){this._select(t);return}}}reset(){let e=this.closest(`form`);e?e.reset():this.querySelectorAll(`form`).forEach(e=>e.reset()),this.selectedIndex=0,document.activeElement?.closest(`sbb-stepper`)===this&&this.selected?.label?.focus()}_isSelectable(e){return e?(customElements.upgrade(e),!(e.label&&(customElements.upgrade(e.label),!this.linear&&e.label.disabled))):!1}_select(e){if(!e||e===this.selected)return;let t=this.selectedIndex,n=this.selected,r=this.steps.indexOf(e),i={currentIndex:t,currentStep:n,nextIndex:r>=0?r:null,nextStep:e};this.selected&&!this.selected.validate(i)||(n?.deselect(),e.select(),this.dispatchEvent(new k({selectedIndex:this.selectedIndex,previousIndex:t,selectedStep:this.selected,previousStep:n})),this._setMarkerSize(),this._setStepperHeight(e),this._configureLinearMode(),document.activeElement?.closest(`sbb-stepper`)===this&&this.selected?.label?.focus())}_setMarkerSize(){if(!this._loaded||!this.selected||this.selectedIndex===void 0||!this.selected.label)return;let e=this.orientation===`horizontal`?this.selected.label.offsetLeft+this.selected.label.offsetWidth:this._calculateLabelOffsetTop();this.style.setProperty(`--sbb-stepper-marker-size`,`${e}px`)}_setStepperHeight(e){if(e&&e.shadowRoot){let t=e.shadowRoot.querySelector(`.sbb-step`);t&&this.style?.setProperty(`--sbb-stepper-content-height`,`${t.offsetHeight}px`)}}_calculateLabelOffsetTop(){if(this.selectedIndex===null)return;let e=0;for(let t of this.steps){if(t===this.selected)break;e=t.label.offsetHeight+e}return e+this.selected.label.offsetHeight+parseFloat(getComputedStyle(this).getPropertyValue(`--sbb-spacing-fixed-6x`))*16*this.selectedIndex}_onSelectedStepResize(e){this._setStepperHeight(e.target)}_configure(){this.steps.forEach((e,t,n)=>{e.configure(this._loaded),e.label?.configure(t+1,n.length,this._loaded)}),this._select(this.selected||this._enabledSteps[0])}_updateLabels(){this.steps.forEach(e=>{e.slot=this.orientation===`horizontal`?`step`:`step-label`})}_checkOrientation(){this.horizontalFrom&&(this.orientation=this._mediaMatcher.matches(O[this.horizontalFrom])?`horizontal`:`vertical`,this._updateLabels()),setTimeout(()=>this._setMarkerSize(),0)}_configureLinearMode(){this.steps.forEach((e,t)=>{e.label&&(customElements.upgrade(e.label),e.label.disable(this.linear&&t>this.selectedIndex||!this.linear&&e.label.matches(`:is(:state(user-disabled),[state--user-disabled])`)))})}connectedCallback(){super.connectedCallback(),window.addEventListener(`resize`,this._onStepperResize,{passive:!0}),this.toggleState(`disable-animation`,!this._loaded)}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener(`resize`,this._onStepperResize)}firstUpdated(e){super.firstUpdated(e),this.updateComplete.then(()=>{this._loaded=!0,this._configure(),this._requestedSelected&&this.steps.indexOf(this._requestedSelected)!==-1?this.selectedIndex=this.steps.indexOf(this._requestedSelected):this._requestedSelectedIndex?this.selectedIndex=this._requestedSelectedIndex:this.selectedIndex=0,this._observer.observe(this),this._checkOrientation(),setTimeout(()=>this.internals.states.delete(`disable-animation`),150)})}willUpdate(e){super.willUpdate(e),e.has(`orientation`)&&!this.horizontalFrom&&(this._updateLabels(),this._setMarkerSize()),e.has(`linear`)&&this._loaded&&this._configureLinearMode(),e.has(`size`)&&this._setMarkerSize()}_handleKeyDown(e){let t=this._enabledSteps;if(!(!t||e.target!==this&&e.target.parentElement!==this)&&m(e)){let n=p(e,t.indexOf(this.selected),t.length);this._select(t[n]),e.preventDefault()}}render(){return e`
12
12
  <div class="sbb-stepper__labels" role="tablist">
13
13
  <slot name="step-label" @slotchange=${this._configure}></slot>
14
14
  </div>
@@ -4,7 +4,16 @@ $theme: 'standard' !default;
4
4
 
5
5
  @mixin base {
6
6
  --sbb-table-border-color: light-dark(var(--sbb-color-cloud), var(--sbb-color-anthracite));
7
+
8
+ // In light mode and non negative we need to adjust the border color
9
+ --sbb-table-border-color-hover: light-dark(
10
+ var(--sbb-color-aluminium),
11
+ var(--sbb-table-border-color)
12
+ );
13
+ --sbb-table-border-color-selected: var(--sbb-background-color-4-inverted);
14
+ --sbb-table-border-width: var(--sbb-border-width-1x);
7
15
  --sbb-table-background-color: var(--sbb-background-color-1);
16
+ --sbb-table-background-color-hover: var(--sbb-background-color-4);
8
17
  --sbb-table-row-striped-color: var(--sbb-background-color-3);
9
18
  --sbb-table-color: var(--sbb-color-1);
10
19
  --sbb-table-caption-color: light-dark(var(--sbb-color-granite), var(--sbb-color-cement));
@@ -54,7 +63,7 @@ $theme: 'standard' !default;
54
63
  // We cannot use `border-collapse` because in sticky variants it gets visually broken.
55
64
  // Therefore, we have to build the grid avoiding double borders.
56
65
  :is(.sbb-table, .sbb-table-m, .sbb-table-s, .sbb-table-xs) {
57
- --sbb-table-border: var(--sbb-border-width-1x) solid var(--sbb-table-border-color);
66
+ --sbb-table-border: var(--sbb-table-border-width) solid var(--sbb-table-border-color);
58
67
  --sbb-table-sticky-shadow-transition-duration: var(
59
68
  --sbb-disable-animation-duration,
60
69
  var(--sbb-animation-duration-6x)
@@ -156,7 +165,10 @@ $theme: 'standard' !default;
156
165
  sbb-table-wrapper[negative] .sbb-table,
157
166
  .sbb-table--negative {
158
167
  --sbb-table-border-color: var(--sbb-color-anthracite);
168
+ --sbb-table-border-color-hover: var(--sbb-table-border-color);
169
+ --sbb-table-border-color-selected: var(--sbb-color-cloud);
159
170
  --sbb-table-background-color: var(--sbb-background-color-1-negative);
171
+ --sbb-table-background-color-hover: var(--sbb-background-color-4-negative);
160
172
  --sbb-table-color: var(--sbb-color-1-negative);
161
173
  --sbb-table-row-striped-color: var(--sbb-background-color-3-negative);
162
174
  --sbb-table-caption-color: var(--sbb-color-cement);
@@ -174,6 +186,39 @@ $theme: 'standard' !default;
174
186
  }
175
187
  }
176
188
 
189
+ .sbb-table--hover {
190
+ tbody tr:hover :is(th, td) {
191
+ background-color: var(--sbb-table-background-color-hover);
192
+ border-color: var(--sbb-table-border-color-hover);
193
+ }
194
+
195
+ :is(
196
+ // Address last row of thead if hover is on first row of tbody
197
+ thead:has(+ tbody tr:first-of-type:hover) tr:last-of-type :is(th, td),
198
+
199
+ // Address row before hovered row
200
+ tbody tr:has(+ tr:hover) :is(th, td)
201
+ ) {
202
+ border-block-end-color: var(--sbb-table-border-color-hover);
203
+ }
204
+ }
205
+
206
+ tr.sbb-table--selected {
207
+ :is(th, td) {
208
+ position: relative;
209
+
210
+ &::after {
211
+ content: '';
212
+ position: absolute;
213
+
214
+ // Lay the border over the cell border
215
+ inset: 0 0 calc(-1 * var(--sbb-table-border-width));
216
+ pointer-events: none;
217
+ border-block-end: var(--sbb-table-border-width) solid var(--sbb-table-border-color-selected);
218
+ }
219
+ }
220
+ }
221
+
177
222
  .sbb-table--theme-iron {
178
223
  --sbb-table-cell-color: var(--sbb-color-4);
179
224
 
package/tabs.pure.js CHANGED
@@ -10,10 +10,10 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{ResizeControl
10
10
  <slot name="tab-bar" @slotchange=${this._onLabelSlotChange}></slot>
11
11
  </div>
12
12
  ${this.fixedHeight?r`<slot @slotchange=${this._onContentSlotChange}></slot>`:r`
13
- <div class="sbb-tab-group-content">
14
- <slot @slotchange=${this._onContentSlotChange}></slot>
15
- </div>
16
- `}
13
+ <div class="sbb-tab-group-content">
14
+ <slot @slotchange=${this._onContentSlotChange}></slot>
15
+ </div>
16
+ `}
17
17
  `}}})();var D=`:host{max-width:100%;display:inline-block;outline:none!important}.sbb-tab-label{cursor:var(--sbb-tab-label-cursor);user-select:none;-webkit-tap-highlight-color:transparent}.sbb-tab-label__icon{flex-shrink:0;display:flex}:host(:not(:is(:state(slotted-icon),[state--slotted-icon]),:is(:state(has-icon-name),[state--has-icon-name]))) .sbb-tab-label__icon{display:none}.sbb-tab-label__text{white-space:nowrap;text-overflow:ellipsis;overflow:hidden}:host(:not(:is(:state(slotted),[state--slotted]))) .sbb-tab-label__text{display:none}.sbb-tab-label__amount{color:var(--sbb-tab-label-amount-color);text-decoration:var(--sbb-tab-label-text-decoration);margin:0;font-weight:400}:host(:not(:is(:state(slotted-amount),[state--slotted-amount]),[amount])) .sbb-tab-label__amount{display:none}
18
18
  `;let O=(()=>{let n=s(y(c)),r,o=[],l=[],f,p=[],m=[],g,b=[],x=[];return class extends n{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(n[Symbol.metadata]??null):void 0;r=[a()],f=[d(),a({reflect:!0,type:Boolean})],g=[d(),a({reflect:!0,converter:h})],e(this,null,r,{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:t},o,l),e(this,null,f,{kind:`accessor`,name:`active`,static:!1,private:!1,access:{has:e=>`active`in e,get:e=>e.active,set:(e,t)=>{e.active=t}},metadata:t},p,m),e(this,null,g,{kind:`accessor`,name:`amount`,static:!1,private:!1,access:{has:e=>`amount`in e,get:e=>e.amount,set:(e,t)=>{e.amount=t}},metadata:t},b,x),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-tab-label`}static{this.role=`tab`}static{this.styles=[C,i(D)]}#e;get level(){return this.#e}set level(e){this.#e=e}#t;get active(){return this.#t}set active(e){this.#t=e}#n;get amount(){return this.#n}set amount(e){this.#n=e}get tab(){return this.nextElementSibling?.localName===`sbb-tab`?this.nextElementSibling:null}get group(){return this.closest(`sbb-tab-group`)}constructor(){super(),this._selected=!1,this._previousSize=null,this.#e=t(this,o,`1`),this.#t=(t(this,l),t(this,p,!1)),this.#n=(t(this,m),t(this,b,``)),t(this,x),this.addEventListener(`click`,()=>this.activate()),this.addController(new u(this,()=>this.group,{size:e=>{this._previousSize&&this.internals.states.delete(`size-${this._previousSize}`),this._previousSize=e.size??null,this._previousSize&&this.internals.states.add(`size-${this._previousSize}`)}}))}connectedCallback(){super.connectedCallback(),this.slot=`tab-bar`,this.tabIndex=this.active?0:-1}willUpdate(e){super.willUpdate(e),e.has(`active`)&&(this.internals.ariaSelected=`${this.active}`,this.active&&!this.disabled?this.activate():this.deactivate()),e.has(`disabled`)&&this.disabled&&(this.tabIndex=-1,this.active&&(this.deactivate(),this.group?.activateTab(0)))}deactivate(){this.active=!1,this.tab?.deactivate(),this._selected=!1,this.tabIndex=-1}activate(){if(this.disabled)return;let e=this.group?.labels||[],t=e.find(e=>e._selected);if(t!==this){t?.deactivate(),this.active=!0,this.tab?.activate(),this._selected=!0,this.tabIndex=0,this.tab?.dispatchEvent(new Event(`active`,{bubbles:!0,composed:!0}));let n={activeIndex:e.findIndex(e=>e===this),activeTabLabel:this,activeTab:this.tab,previousIndex:e.findIndex(e=>e===t),previousTabLabel:t,previousTab:t?.tab};this.group?.dispatchEvent(new T(n))}}linkToTab(){this.tab&&(this.internals.ariaControlsElements=[this.tab])}render(){let e=`h${Number(this.level)<7?this.level:`1`}`;return _`
19
19
  <${v(e)} class="sbb-tab-label">
@@ -39,6 +39,10 @@ $theme: 'standard' !default;
39
39
  filter,
40
40
  scale var(--sbb-teaser-image-animation-duration) var(--sbb-teaser-image-animation-easing);
41
41
  }
42
+
43
+ .sbb-figure {
44
+ max-width: 100%;
45
+ }
42
46
  }
43
47
 
44
48
  sbb-teaser :is(sbb-image, img):not(.sbb-figure-overlap-image) {
package/teaser.pure.js CHANGED
@@ -1,4 +1,4 @@
1
- import{__esDecorate as e,__runInitializers as t}from"tslib";import{unsafeCSS as n}from"lit";import{property as r}from"lit/decorators.js";import{html as i}from"lit/static-html.js";import{SbbLinkBaseElement as a,screenReaderOnlyStyles as o}from"./core.js";var s=`:host{--_sbb-teaser-forced-colors-inset:calc(-1 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-outline-offset:calc(2 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-border-radius:calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-teaser-description-color:LinkText;--sbb-title-color:LinkText!important}}:host([alignment=after]){--sbb-teaser-align-items:start}:host([alignment=below]){--sbb-teaser-flex-direction:column;--sbb-teaser-align-items:baseline;--sbb-teaser-gap:var(--sbb-spacing-fixed-3x)}@media (any-hover:hover){:host(:hover){--sbb-teaser-scale:var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{cursor:var(--sbb-cursor-pointer);display:flex;position:relative}.sbb-teaser__wrapper:before{content:"​";user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;inset:0}.sbb-teaser: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);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors:active){.sbb-teaser:focus-visible{outline-offset:var(--_sbb-teaser-forced-colors-outline-offset)}.sbb-teaser:before{content:"";inset:var(--_sbb-teaser-forced-colors-inset);pointer-events:none;border-radius:var(--_sbb-teaser-forced-colors-border-radius);border:var(--sbb-border-width-1x) solid CanvasText;position:absolute}}.sbb-teaser__container{flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);pointer-events:none;width:100%;max-width:100%;display:flex}.sbb-teaser__text{color:var(--sbb-teaser-description-color);font-size:var(--sbb-teaser-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);max-width:100%;overflow:hidden}::slotted([slot=image]){width:var(--sbb-teaser-image-width);display:block}.sbb-teaser__image-wrapper{border-radius:var(--sbb-teaser-border-radius);transition:box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);flex-shrink:0;overflow:hidden}:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper{display:none}@media (any-hover:hover){:host(:hover) .sbb-teaser__image-wrapper{box-shadow:var(--sbb-box-shadow-level-9-hard)}}.sbb-teaser__description{margin:0;padding:0;display:inline-block}::slotted(sbb-chip-label){width:fit-content;max-width:100%;margin-block-end:var(--sbb-spacing-fixed-1x);display:flex}::slotted(sbb-title){margin-block:0}
1
+ import{__esDecorate as e,__runInitializers as t}from"tslib";import{unsafeCSS as n}from"lit";import{property as r}from"lit/decorators.js";import{html as i}from"lit/static-html.js";import{SbbLinkBaseElement as a,screenReaderOnlyStyles as o}from"./core.js";var s=`:host{--_sbb-teaser-forced-colors-inset:calc(-1 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-outline-offset:calc(2 * var(--sbb-focus-outline-offset));--_sbb-teaser-forced-colors-border-radius:calc(var(--sbb-teaser-border-radius) + var(--sbb-focus-outline-offset));display:inline-block;outline:none!important}@media (forced-colors:active){:host{--sbb-teaser-description-color:LinkText;--sbb-title-color:LinkText!important}}:host([alignment=after]){--sbb-teaser-align-items:start}:host([alignment=below]){--sbb-teaser-flex-direction:column;--sbb-teaser-align-items:baseline;--sbb-teaser-gap:var(--sbb-spacing-fixed-3x)}@media (any-hover:hover){:host(:hover){--sbb-teaser-scale:var(--sbb-teaser-scale-hover)}}.sbb-teaser__wrapper{cursor:var(--sbb-cursor-pointer);display:flex;position:relative}.sbb-teaser__wrapper:before{content:"​";user-select:none;width:0;height:0}.sbb-teaser{text-decoration:none;position:absolute;inset:0}.sbb-teaser: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);border-radius:var(--sbb-teaser-border-radius)}@media (forced-colors:active){.sbb-teaser:focus-visible{outline-offset:var(--_sbb-teaser-forced-colors-outline-offset)}.sbb-teaser:before{content:"";inset:var(--_sbb-teaser-forced-colors-inset);pointer-events:none;border-radius:var(--_sbb-teaser-forced-colors-border-radius);border:var(--sbb-border-width-1x) solid CanvasText;position:absolute}}.sbb-teaser__container{flex-flow:var(--sbb-teaser-flex-direction) nowrap;align-items:var(--sbb-teaser-align-items);gap:var(--sbb-teaser-gap);pointer-events:none;width:100%;max-width:100%;display:flex}.sbb-teaser__text{color:var(--sbb-teaser-description-color);font-size:var(--sbb-teaser-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);max-width:100%;overflow:hidden}::slotted([slot=image]){width:var(--sbb-teaser-image-width);display:block}.sbb-teaser__image-wrapper{border-radius:var(--sbb-teaser-border-radius);transition:box-shadow var(--sbb-teaser-image-animation-duration) var(--sbb-animation-easing);flex-shrink:0;max-width:100%;overflow:hidden}:host(:not(:is(:state(slotted-image),[state--slotted-image]))) .sbb-teaser__image-wrapper{display:none}@media (any-hover:hover){:host(:hover) .sbb-teaser__image-wrapper{box-shadow:var(--sbb-box-shadow-level-9-hard)}}.sbb-teaser__description{margin:0;padding:0;display:inline-block}::slotted(sbb-chip-label){width:fit-content;max-width:100%;margin-block-end:var(--sbb-spacing-fixed-1x);display:flex}::slotted(sbb-title){margin-block:0}
2
2
  `;let c=(()=>{let c=a,l,u=[],d=[];return class extends c{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(c[Symbol.metadata]??null):void 0;l=[r({reflect:!0})],e(this,null,l,{kind:`accessor`,name:`alignment`,static:!1,private:!1,access:{has:e=>`alignment`in e,get:e=>e.alignment,set:(e,t)=>{e.alignment=t}},metadata:t},u,d),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-teaser`}static{this.styles=[o,n(s)]}#e=t(this,u,`after-centered`);get alignment(){return this.#e}set alignment(e){this.#e=e}_handleSlotchange(){let e=Array.from(this.children).find(e=>e.localName===`sbb-chip-label`);e&&(e.slot=`chip`);let t=Array.from(this.children).find(e=>e.localName===`sbb-title`);t&&(t.slot=`title`)}_configureChip(e){let t=e.target.assignedElements().find(e=>e.localName===`sbb-chip-label`);t&&(customElements.upgrade(t),t.color=`charcoal`,t.size=`xxs`)}_configureTitle(e){let t=e.target.assignedElements().find(e=>e.localName===`sbb-title`);t&&(customElements.upgrade(t),t.visualLevel=`5`)}render(){return i`
3
3
  <div class="sbb-teaser__wrapper">
4
4
  ${this.renderLink(i`<span class="sbb-screen-reader-only">${this.accessibilityLabel}</span>`)}
@@ -1,2 +1,2 @@
1
1
  import{__esDecorate as e,__runInitializers as t}from"tslib";import{isServer as n,unsafeCSS as r}from"lit";import{property as i}from"lit/decorators.js";import{SbbElement as a,SbbFormAssociatedInputMixin as o,SbbLanguageController as s,i18nTimeInputChange as c,i18nTimeInvalid as l,i18nTimeMax as u,i18nTimeMaxLength as d,sbbLiveAnnouncer as f}from"./core.js";var p=`:host{min-width:var(--sbb-time-input-max-width);max-width:var(--sbb-time-input-max-width);cursor:text;align-items:center;font-weight:400;display:inline-flex}@media (forced-colors:active){:host{color:fieldtext}}:host(:disabled){cursor:var(--sbb-cursor-default)}:host(:focus){text-overflow:initial!important}:host(:empty):after{content:attr(placeholder);color:var(--sbb-color-5);-webkit-text-fill-color:var(--sbb-color-5);opacity:1}@media (forced-colors:active){:host(:empty):after{color:graytext}}
2
- `;const m=/[0-9.:,\-;_hH]/,h=/[^0-9.:,\-;_hH]/g,g=/^([0-9]{1,2})([0-9]{2})$/,_=/^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;let v=(()=>{let v=o(a),y=[],b;return class extends v{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(v[Symbol.metadata]??null):void 0;b=[i({attribute:!1})],e(this,null,b,{kind:`setter`,name:`valueAsDate`,static:!1,private:!1,access:{has:e=>`valueAsDate`in e,set:(e,t)=>{e.valueAsDate=t}},metadata:t},null,y),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-time-input`}static{this.styles=[r(p)]}set value(e){e=typeof e==`string`?e.replace(h,``).substring(0,5):``,this._tryParseValue(e),!n&&!this.isSelected()&&this.valueAsDate!==null&&(e=this._formatTime()),super.value=e}get value(){return super.value??``}set valueAsDate(e){let t=this._toTime(e);if(!(this.isSelected()&&(t===null||this._isSameTime(t,this._parseValue(this.value)))))if(t){this._valueAsTime=t;let e=this._formatTime();this.value!==e&&(this.value=e)}else this._valueAsTime=null,this.value=``}get valueAsDate(){if(this._valueAsTime&&this._isTimeValid(this._valueAsTime)){let e=new Date(0);return e.setHours(this._valueAsTime.hours),e.setMinutes(this._valueAsTime.minutes),e}else return null}constructor(){super(),this._valueAsTime=t(this,y),this._language=new s(this),this.addEventListener?.(`change`,()=>this._updateValueDateFormat(),{capture:!0}),this.addEventListener?.(`change`,()=>f.announce(c(this.value)[this._language.current])),this.addEventListener?.(`keydown`,e=>this._preventCharInsert(e))}connectedCallback(){super.connectedCallback(),this.inputMode||=`numeric`,this.placeholder||=`HH:MM`}disconnectedCallback(){super.disconnectedCallback()}updateFormValue(){this._tryParseValue();let e=this.valueAsDate===null?null:this._formatTime();this.internals.setFormValue(e,this.value)}_tryParseValue(e=this.value){this._valueCache?.[0]!==e&&(this._valueAsTime=this._parseValue(e),this._valueCache=[e,this._valueAsTime??null])}_parseValue(e){let t=e?.trim();if(!t)return null;let n=t.match(g)??t.match(_);return n?{hours:+n[1]||0,minutes:+n[2]||0}:null}_toTime(e){return e instanceof Date&&!isNaN(e.valueOf())?{hours:e.getHours(),minutes:e.getMinutes()}:null}_isSameTime(e,t){return!!(e==t||e&&t&&e.hours===t.hours&&e.minutes===t.minutes)}_updateValueDateFormat(){if(this.valueAsDate){let e=this._formatTime();this.value!==e&&(super.value=e)}}_formatTime(){let e=this.valueAsDate;return e?`${String(e.getHours()).padStart(2,`0`)}:${String(e.getMinutes()).padStart(2,`0`)}`:``}preparePastedText(e){return e.replace(h,``).substring(0,5-(this.textContent?.length??0))}shouldValidate(e){return super.shouldValidate(e)||[`valueAsDate`,`min`,`max`,`dateFilter`].includes(e)}validate(){super.validate(),this.value?this._valueAsTime?this._isTimeValid(this._valueAsTime)?this._removeValidityErrors():this.setValidityFlag(`rangeOverflow`,u[this.language.current]):this.setValidityFlag(`badInput`,l[this.language.current]):this._removeValidityErrors()}_removeValidityErrors(){[`badInput`,`rangeOverflow`].forEach(e=>this.removeValidityFlag(e))}_isTimeValid(e){return e.hours<24&&e.minutes<60}_preventCharInsert(e){e.ctrlKey||e.altKey||e.metaKey||[`Backspace`,`Tab`,`Enter`,`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`Home`,`End`,`PageUp`,`PageDown`,`Delete`].includes(e.key)||m.test(e.key)&&(this.value.length<5||this._hasSelection())||(e.preventDefault(),this.value.length>=5&&f.announce(d[this._language.current]))}_hasSelection(){let e=window.getSelection()?.getRangeAt(0);return!!e&&e.startOffset!==e.endOffset}}})();export{v as SbbTimeInputElement};
2
+ `;const m=/[0-9.:,\-;_hH]/,h=/[^0-9.:,\-;_hH]/g,g=/^([0-9]{1,2})([0-9]{2})$/,_=/^([0-9]{1,2})?[.:,\-;_hH]?([0-9]{1,2})?$/;let v=(()=>{let v=o(a),y=[],b;return class extends v{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(v[Symbol.metadata]??null):void 0;b=[i({attribute:!1})],e(this,null,b,{kind:`setter`,name:`valueAsDate`,static:!1,private:!1,access:{has:e=>`valueAsDate`in e,set:(e,t)=>{e.valueAsDate=t}},metadata:t},null,y),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-time-input`}static{this.styles=[r(p)]}set value(e){e=typeof e==`string`?e.replace(h,``).substring(0,5):``,this._tryParseValue(e),!n&&!this.isSelected()&&this.valueAsDate!==null&&(e=this._formatTime()),super.value=e}get value(){return super.value??``}set valueAsDate(e){let t=this._toTime(e);if(!(this.isSelected()&&(t===null||this._isSameTime(t,this._parseValue(this.value)))))if(t){this._valueAsTime=t;let e=this._formatTime();this.value!==e&&(this.value=e)}else this._valueAsTime=null,this.value=``}get valueAsDate(){if(this._valueAsTime&&this._isTimeValid(this._valueAsTime)){let e=new Date(0);return e.setHours(this._valueAsTime.hours),e.setMinutes(this._valueAsTime.minutes),e}else return null}constructor(){super(),this._valueAsTime=t(this,y),this._language=new s(this),this.addEventListener?.(`change`,()=>this._updateValueDateFormat(),{capture:!0}),this.addEventListener?.(`change`,()=>f.announce(c(this.value)[this._language.current])),this.addEventListener?.(`keydown`,e=>this._preventCharInsert(e))}connectedCallback(){super.connectedCallback(),this.inputMode||=`numeric`,this.placeholder||=`HH:MM`}disconnectedCallback(){super.disconnectedCallback()}updateFormValue(){this._tryParseValue();let e=this.valueAsDate===null?null:this._formatTime();this.internals.setFormValue(e,this.value)}_tryParseValue(e=this.value){this._valueCache?.[0]!==e&&(this._valueAsTime=this._parseValue(e),this._valueCache=[e,this._valueAsTime??null])}_parseValue(e){let t=e?.trim();if(!t)return null;let n=t.match(g)??t.match(_);return n?{hours:+n[1]||0,minutes:+n[2]||0}:null}_toTime(e){return e instanceof Date&&!isNaN(e.valueOf())?{hours:e.getHours(),minutes:e.getMinutes()}:null}_isSameTime(e,t){return!!(e==t||e&&t&&e.hours===t.hours&&e.minutes===t.minutes)}_updateValueDateFormat(){if(this.valueAsDate){let e=this._formatTime();this.value!==e&&(super.value=e)}}_formatTime(){let e=this.valueAsDate;return e?`${String(e.getHours()).padStart(2,`0`)}:${String(e.getMinutes()).padStart(2,`0`)}`:``}preparePastedText(e){return e.replace(h,``).substring(0,5-(this.textContent?.length??0))}shouldValidate(e){return super.shouldValidate(e)||[`valueAsDate`,`min`,`max`,`dateFilter`].includes(e)}validate(){super.validate(),this.value?this._valueAsTime?this._isTimeValid(this._valueAsTime)?this._removeValidityErrors():(this._removeValidityErrors(`rangeOverflow`),this.setValidityFlag(`rangeOverflow`,u[this.language.current])):(this._removeValidityErrors(`badInput`),this.setValidityFlag(`badInput`,l[this.language.current])):this._removeValidityErrors()}_removeValidityErrors(e){[`badInput`,`rangeOverflow`].filter(t=>t!==e).forEach(e=>this.removeValidityFlag(e))}_isTimeValid(e){return e.hours<24&&e.minutes<60}_preventCharInsert(e){e.ctrlKey||e.altKey||e.metaKey||[`Backspace`,`Tab`,`Enter`,`ArrowUp`,`ArrowDown`,`ArrowLeft`,`ArrowRight`,`Home`,`End`,`PageUp`,`PageDown`,`Delete`].includes(e.key)||m.test(e.key)&&(this.value.length<5||this._hasSelection())||(e.preventDefault(),this.value.length>=5&&f.announce(d[this._language.current]))}_hasSelection(){let e=window.getSelection()?.getRangeAt(0);return!!e&&e.startOffset!==e.endOffset}}})();export{v as SbbTimeInputElement};
@@ -2,9 +2,9 @@ import{html as e,isServer as t,unsafeCSS as n}from"lit";import{SbbElement as r,S
2
2
  `,l=class extends r{static{this.elementName=`sbb-timetable-form-details`}static{this.styles=[n(c)]}render(){return e`<slot></slot>`}},u=`:host{--_sbb-timetable-form-field-start-icon-connecting-line-offset:.1875rem;--_sbb-timetable-form-field-start-icon-connecting-line-width:calc((var(--sbb-form-field-min-height) - var(--sbb-icon-svg-height)) / 2 + var(--_sbb-timetable-form-field-start-icon-connecting-line-offset));--sbb-form-field-border-radius:var(--sbb-border-radius-6x);--sbb-form-field-outline-offset:-.3125rem;display:flex}:host(:first-of-type){--sbb-timetable-form-field-route-icon-rotate:90deg}:host(:last-of-type){--sbb-timetable-form-field-route-icon-rotate:-90deg;--sbb-timetable-form-field-route-icon-translate:-.0625rem 0}:host(:where(:not(:last-of-type))) .sbb-form-field__wrapper:after{content:"";border-block-end:var(--sbb-border-width-1x) var(--sbb-form-field-border-style) var(--sbb-border-color-4-inverted);inset-inline:var(--sbb-form-field-padding-inline);position:absolute;inset-block-end:0}.sbb-timetable-form-field__start-route-icon{rotate:var(--sbb-timetable-form-field-route-icon-rotate);translate:var(--sbb-timetable-form-field-route-icon-translate);align-self:center;margin-inline-start:var(--sbb-form-field-padding-inline)}.sbb-timetable-form-field__start-route-icon:after{content:"";border-block-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);width:var(--_sbb-timetable-form-field-start-icon-connecting-line-width);margin-left:calc(var(--_sbb-timetable-form-field-start-icon-connecting-line-offset) * -1);position:absolute;inset-block-start:50%}.sbb-timetable-form-field__via-route-icon{width:var(--sbb-timetable-form-field-route-via-icon-width);align-self:stretch;margin-inline-start:var(--sbb-form-field-padding-inline);position:relative}.sbb-timetable-form-field__via-route-icon:before{content:"";border-inline-start:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);height:100%;margin-inline-start:-.0625rem;position:absolute;inset-inline-start:50%}.sbb-timetable-form-field__via-route-icon:after{content:"";width:var(--sbb-timetable-form-field-route-via-after-dimension);height:var(--sbb-timetable-form-field-route-via-after-dimension);border:var(--sbb-border-width-1x) solid var(--sbb-timetable-form-field-route-icon-color);border-radius:var(--sbb-border-radius-infinity);background-color:var(--sbb-timetable-form-field-route-icon-background-color);margin-inline-start:-.03125rem;position:absolute;inset-block-start:50%;inset-inline-start:50%;translate:-50% -50%}.sbb-form-field__space-wrapper{flex-grow:1}
3
3
  `,d=class extends o{static{this.elementName=`sbb-timetable-form-field`}static{this.styles=[n(u)]}constructor(){super(),this._routeIcon=!1,this.borderless=!0,this.floatingLabel=!0,this.width=`collapse`,this.size=`l`}connectedCallback(){super.connectedCallback(),!t&&this.hydrationComplete.then(()=>this._routeIcon=this.matches(`:first-of-type, :last-of-type`))}render(){return e`
4
4
  ${this._routeIcon?e` <sbb-icon
5
- name="route-circle-start-small"
6
- class="sbb-timetable-form-field__start-route-icon"
7
- ></sbb-icon>`:e` <span class="sbb-timetable-form-field__via-route-icon"></span> `}
5
+ name="route-circle-start-small"
6
+ class="sbb-timetable-form-field__start-route-icon"
7
+ ></sbb-icon>`:e` <span class="sbb-timetable-form-field__via-route-icon"></span> `}
8
8
  ${super.render()}
9
9
  `}},f=`:host(:is(:state(timetable-form-context),[state--timetable-form-context])){--sbb-timetable-form-swap-button-margin-inline-end:var(--sbb-spacing-fixed-6x);--sbb-timetable-form-swap-button-translate:0 -50%;--sbb-timetable-form-swap-button-z-index:1;--sbb-timetable-form-swap-button-position:absolute;position:relative}.sbb-timetable-form-swap-button{position:var(--sbb-timetable-form-swap-button-position,relative);translate:var(--sbb-timetable-form-swap-button-translate);z-index:var(--sbb-timetable-form-swap-button-z-index);margin-inline-end:var(--sbb-timetable-form-swap-button-margin-inline-end);inset-inline-end:0}
10
10
  `,p=class extends s{static{this.elementName=`sbb-timetable-form-swap-button`}static{this.styles=[n(f)]}constructor(){super(),this._languageController=new i(this),this.size=`l`,this.addEventListener(`click`,()=>this._invertFieldValues())}connectedCallback(){super.connectedCallback(),this.toggleState(`timetable-form-context`,!!this.closest(`sbb-timetable-form`))}willUpdate(e){super.willUpdate(e),this.internals.ariaLabel=a[this._languageController.current]}_invertFieldValues(){let e=this.closest(`sbb-timetable-form`),t=Array.from(e?.querySelectorAll(`sbb-timetable-form-field`)||[]),n=t.map(e=>e.inputElement?.value);!e||n.length===0||n.every(e=>!e)||n.reverse().forEach((e,n)=>{let r=t[n].inputElement;r instanceof HTMLInputElement&&(r.value=e,r.dispatchEvent(new InputEvent(`input`,{bubbles:!0,composed:!0})),r.dispatchEvent(new Event(`change`,{bubbles:!0})))})}renderIconName(){return super.renderIconName()||`arrow-change-small`}},m=`:host{border-radius:var(--sbb-timetable-form-border-radius);background-color:var(--sbb-timetable-form-background-color);flex-direction:column;display:flex}
@@ -1,24 +1,24 @@
1
1
  import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbElement as o,SbbLanguageController as s,SbbNegativeMixin as c,i18nClass as l,listResetStyles as u,screenReaderOnlyStyles as d}from"./core.js";import{SbbTimetableOccupancyIconElement as f}from"./timetable-occupancy-icon.pure.js";var p=`:host{--sbb-icon-svg-width:.890625rem;--sbb-icon-svg-height:v0.75rem;display:inline-block}@media (width>=64rem){:host{--sbb-icon-svg-width:1.1875rem;--sbb-icon-svg-height:v1rem}}:host([negative]){--sbb-timetable-occupancy-color:var(--sbb-color-2-negative)}.sbb-timetable-occupancy__list{align-items:center;gap:var(--sbb-timetable-occupancy-list-gap);flex-wrap:nowrap;display:flex}.sbb-timetable-occupancy__list-item{align-items:center;gap:var(--sbb-timetable-occupancy-item-gap);flex-wrap:nowrap;display:flex}.sbb-timetable-occupancy__list-item-class{color:var(--sbb-timetable-occupancy-color);font-size:var(--sbb-timetable-occupancy-font-size);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:1}.sbb-timetable-occupancy__list-item-icon{display:flex}
2
2
  `;let m=(()=>{let m=c(o),h,g=[],_=[],v,y=[],b=[];return class extends m{constructor(){super(...arguments),this.#e=t(this,g,null),this.#t=(t(this,_),t(this,y,null)),this._language=(t(this,b),new s(this))}static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(m[Symbol.metadata]??null):void 0;h=[a({attribute:`first-class-occupancy`})],v=[a({attribute:`second-class-occupancy`})],e(this,null,h,{kind:`accessor`,name:`firstClassOccupancy`,static:!1,private:!1,access:{has:e=>`firstClassOccupancy`in e,get:e=>e.firstClassOccupancy,set:(e,t)=>{e.firstClassOccupancy=t}},metadata:t},g,_),e(this,null,v,{kind:`accessor`,name:`secondClassOccupancy`,static:!1,private:!1,access:{has:e=>`secondClassOccupancy`in e,get:e=>e.secondClassOccupancy,set:(e,t)=>{e.secondClassOccupancy=t}},metadata:t},y,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-timetable-occupancy`}static{this.elementDependencies=[f]}static{this.styles=[u,d,i(p)]}#e;get firstClassOccupancy(){return this.#e}set firstClassOccupancy(e){this.#e=e}#t;get secondClassOccupancy(){return this.#t}set secondClassOccupancy(e){this.#t=e}render(){return n` ${(this.firstClassOccupancy||this.secondClassOccupancy)&&n`
3
- <ul
4
- class="sbb-timetable-occupancy__list"
5
- role=${!this.firstClassOccupancy||!this.secondClassOccupancy?`presentation`:r}
6
- >
7
- ${[this.firstClassOccupancy,this.secondClassOccupancy].map((e,t)=>e&&n`
8
- <li class="sbb-timetable-occupancy__list-item">
9
- <span class="sbb-timetable-occupancy__list-item-class" aria-hidden="true">
10
- ${this.firstClassOccupancy&&t===0?`1`:`2`}.
11
- </span>
12
- <span class="sbb-screen-reader-only">
13
- ${`${l[this.firstClassOccupancy&&t===0?`first`:`second`][this._language.current]}.`}
14
- </span>
15
- <sbb-timetable-occupancy-icon
16
- class="sbb-timetable-occupancy__list-item-icon"
17
- ?negative=${this.negative}
18
- .occupancy=${e}
19
- >
20
- </sbb-timetable-occupancy-icon>
21
- </li>
22
- `)}
23
- </ul>
24
- `}`}}})();export{m as SbbTimetableOccupancyElement};
3
+ <ul
4
+ class="sbb-timetable-occupancy__list"
5
+ role=${!this.firstClassOccupancy||!this.secondClassOccupancy?`presentation`:r}
6
+ >
7
+ ${[this.firstClassOccupancy,this.secondClassOccupancy].map((e,t)=>e&&n`
8
+ <li class="sbb-timetable-occupancy__list-item">
9
+ <span class="sbb-timetable-occupancy__list-item-class" aria-hidden="true">
10
+ ${this.firstClassOccupancy&&t===0?`1`:`2`}.
11
+ </span>
12
+ <span class="sbb-screen-reader-only">
13
+ ${`${l[this.firstClassOccupancy&&t===0?`first`:`second`][this._language.current]}.`}
14
+ </span>
15
+ <sbb-timetable-occupancy-icon
16
+ class="sbb-timetable-occupancy__list-item-icon"
17
+ ?negative=${this.negative}
18
+ .occupancy=${e}
19
+ >
20
+ </sbb-timetable-occupancy-icon>
21
+ </li>
22
+ `)}
23
+ </ul>
24
+ `}`}}})();export{m as SbbTimetableOccupancyElement};
package/toast.pure.js CHANGED
@@ -16,12 +16,12 @@ import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,not
16
16
  ?negative=${this._isLightMode()}
17
17
  ></sbb-divider>
18
18
  ${this.readOnly?r:n`<sbb-transparent-button
19
- class="sbb-toast__close-button"
20
- icon-name="cross-small"
21
- ?negative=${this._isLightMode()}
22
- aria-label=${f[this._language.current]}
23
- sbb-toast-close
24
- ></sbb-transparent-button>`}
19
+ class="sbb-toast__close-button"
20
+ icon-name="cross-small"
21
+ ?negative=${this._isLightMode()}
22
+ aria-label=${f[this._language.current]}
23
+ sbb-toast-close
24
+ ></sbb-transparent-button>`}
25
25
  </div>
26
26
  </div>
27
27
  </div>
package/tooltip.pure.js CHANGED
@@ -1,6 +1,6 @@
1
- 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,sbbOverlayOutsidePointerEventListener as y}from"./core.js";var b=`: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)}}
2
- `;const x=f||p,S=new WeakMap;let C=(()=>{let f=o(c),p=[],C,w=[],T=[],E,D,O;return class extends f{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(f[Symbol.metadata]??null):void 0;C=[d(),a()],E=[a({attribute:`open-delay`,type:Number})],D=[a({attribute:`close-delay`,type:Number})],O=[a({attribute:`long-press-close-delay`,type:Number})],e(this,null,C,{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},w,T),e(this,null,E,{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,D,{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,O,{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(b)]}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,w,null)),this._openDelay=(t(this,T),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=S.get(e);if(t&&e.isConnected){n||(n=document.createElement(`sbb-tooltip`),S.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&&(S.delete(e),n._destroy?.())}connectedCallback(){super.connectedCallback(),this.popover=`manual`,this.state=`closed`,y.connect(this),this.hasUpdated&&this.trigger&&this._attach(this.trigger)}disconnectedCallback(){super.disconnectedCallback(),y.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};x||(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`,()=>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`
1
+ 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)}}
2
+ `;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`
3
3
  <div class="sbb-tooltip">
4
4
  <slot></slot>
5
5
  </div>
6
- `}}})();export{C as SbbTooltipElement};
6
+ `}}})();export{w as SbbTooltipElement};
package/train.pure.js CHANGED
@@ -2,15 +2,15 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
2
2
  `,L=class extends F(a){static{this.elementName=`sbb-train-blocked-passage`}static{this.styles=[r(I)]}},R=`:host{--sbb-train-formation-scroll-padding:var(--sbb-train-formation-padding);--_sbb-train-formation-wagon-width:var(--sbb-train-formation-wagon-dimension-long);--_sbb-train-formation-wagon-height:var(--sbb-train-formation-wagon-dimension-short);gap:var(--_sbb-train-formation-sectors-to-train-gap,0) 0;padding-block:var(--sbb-train-formation-padding);color:var(--sbb-train-formation-text-color);font-size:var(--sbb-text-font-size-xs);letter-spacing:var(--sbb-typo-letter-spacing-text);line-height:var(--sbb-typo-line-height-text);grid-template:"start sectors end""start trains end"/auto 1fr auto;display:grid;position:relative;overflow:auto visible}:host:before,:host:after{content:"";width:var(--sbb-train-formation-scroll-padding);display:block}:host:before{grid-area:start}:host:after{grid-area:end}: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)}:host(:is(:state(has-sectors),[state--has-sectors])){--_sbb-train-formation-sectors-to-train-gap:var(--sbb-train-formation-gap)}:host(:is(:state(has-direction-label),[state--has-direction-label])){--_sbb-train-formation-reserve-spacing-display:block}:host([orientation=vertical]){--_sbb-train-formation-wagon-width:var(--sbb-train-formation-wagon-dimension-short);--_sbb-train-formation-wagon-height:var(--sbb-train-formation-wagon-dimension-long);--_sbb-train-formation-flex-direction:column;--_sbb-train-formation-flex-direction-inverted:row;padding-block:unset;padding-inline:var(--sbb-train-formation-padding);gap:0 var(--_sbb-train-formation-sectors-to-train-gap,0);grid-template:"start start""sectors trains"1fr"end end";width:fit-content;overflow:visible auto}:host([orientation=vertical]):before,:host([orientation=vertical]):after{width:auto;height:var(--sbb-train-formation-scroll-padding)}.sbb-train-formation__sectors{gap:var(--sbb-train-formation-wagon-gap);flex-direction:var(--_sbb-train-formation-flex-direction);grid-area:sectors;display:flex}.sbb-train-formation__sector{--_wagon-sum:var(--sbb-train-formation-wagon-count) * var(--sbb-train-formation-wagon-dimension-long);--_blocked-passage-sum:var(--sbb-train-formation-wagon-blocked-passage-count) * var(--sbb-train-formation-blocked-passage-dimension);--_total-count:calc(var(--sbb-train-formation-wagon-count) + var(--sbb-train-formation-wagon-blocked-passage-count));--_gap-sum:calc((var(--_total-count) - 1) * var(--sbb-train-formation-wagon-gap));--_sector-width:calc(var(--_wagon-sum) + var(--_blocked-passage-sum) + var(--_gap-sum));--_sector-line-length:calc(.5 * var(--_sector-width));flex:0 0 var(--_sector-width);flex-direction:var(--_sbb-train-formation-flex-direction);justify-content:center;display:flex;overflow:clip visible}:host([orientation=vertical]) .sbb-train-formation__sector{overflow:visible clip}.sbb-train-formation__sector-sticky-wrapper{padding:0 var(--sbb-train-formation-sector-padding);margin:0 var(--sbb-train-formation-sector-margin);white-space:nowrap;position:sticky;inset:auto 0}:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper{writing-mode:sideways-lr;padding:var(--sbb-train-formation-sector-padding) 0;margin:var(--sbb-train-formation-sector-margin) 0;inset:0 auto}.sbb-train-formation__sector-sticky-wrapper:before,.sbb-train-formation__sector-sticky-wrapper:after{content:"";inset-block:calc(50% - var(--sbb-train-formation-sector-line-width) / 2);border-block-end:var(--sbb-train-formation-sector-line-width) solid var(--sbb-train-formation-sector-line-color);width:var(--_sector-line-length);position:absolute}:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper:before,:host([orientation=vertical]) .sbb-train-formation__sector-sticky-wrapper:after{width:auto;height:var(--_sector-line-length)}.sbb-train-formation__sector-sticky-wrapper:before{inset-inline-end:100%}.sbb-train-formation__sector-sticky-wrapper:after{inset-inline-start:100%}.sbb-train-formation__trains{grid-area:trains}.sbb-train-formation__train-list{flex-direction:var(--_sbb-train-formation-flex-direction);gap:var(--sbb-train-formation-wagon-gap);display:flex}.sbb-train-formation__train-list>:is(li,span){display:inline-flex}
3
3
  `;let z=(()=>{let t=c(a),i,s=[],l=[],u,d=[],p=[],m,h=[],g=[];return class extends t{static{let e=typeof Symbol==`function`&&Symbol.metadata?Object.create(t[Symbol.metadata]??null):void 0;i=[k({reflect:!0})],u=[k({reflect:!0})],m=[A()],D(this,null,i,{kind:`accessor`,name:`view`,static:!1,private:!1,access:{has:e=>`view`in e,get:e=>e.view,set:(e,t)=>{e.view=t}},metadata:e},s,l),D(this,null,u,{kind:`accessor`,name:`orientation`,static:!1,private:!1,access:{has:e=>`orientation`in e,get:e=>e.orientation,set:(e,t)=>{e.orientation=t}},metadata:e},d,p),D(this,null,m,{kind:`accessor`,name:`_sectors`,static:!1,private:!1,access:{has:e=>`_sectors`in e,get:e=>e._sectors,set:(e,t)=>{e._sectors=t}},metadata:e},h,g),e&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:e})}static{this.elementName=`sbb-train-formation`}static{this.styles=[f,r(R)]}#e;get view(){return this.#e}set view(e){this.#e=e}#t;get orientation(){return this.#t}set orientation(e){this.#t=e}#n;get _sectors(){return this.#n}set _sectors(e){this.#n=e}constructor(){super(),this.listChildLocalNames=[`sbb-train`],this.#e=O(this,s,`side`),this.#t=(O(this,l),O(this,d,`horizontal`)),this.#n=(O(this,p),O(this,h,[])),this._language=(O(this,g),new o(this)),this.addEventListener?.(`trainslotchange`,e=>{this._readSectors(e),this._readDirectionLabel(e)}),this.addEventListener?.(`sectorchange`,e=>this._readSectors(e)),this.addEventListener?.(`directionlabelchange`,e=>this._readDirectionLabel(e))}connectedCallback(){super.connectedCallback(),this.classList.add(`sbb-scrollbar`)}_readDirectionLabel(e){e?.stopPropagation(),this.toggleState(`has-direction-label`,Array.from(this.querySelectorAll?.(`sbb-train`)??[]).some(e=>!!e.directionLabel))}_readSectors(e){e?.stopPropagation(),this._sectors=Array.from(this.querySelectorAll?.(`sbb-train-wagon,sbb-train-wagon-button,sbb-train-wagon-link,sbb-train-blocked-passage`)??[]).reduce((e,t)=>{let n=e[e.length-1];if(t.localName.startsWith(`sbb-train-wagon`)){let r=t.sector??t.getAttribute(`sector`);!n.label&&r&&(n.label=r),!r||n.label===r?n.wagonCount++:e.push({label:r,wagonCount:1,blockedPassageCount:0})}else t.localName===`sbb-train-blocked-passage`&&n.blockedPassageCount++;return e},[{wagonCount:0,blockedPassageCount:0}]),this.toggleState(`has-sectors`,this._sectors.some(e=>!!e.label))}willUpdate(e){super.willUpdate(e),e.has(`listChildren`)&&(this._readSectors(),this._readDirectionLabel())}render(){return e`
4
4
  ${this._sectors.length&&this._sectors[0].label!==void 0?e`<div class="sbb-train-formation__sectors" aria-hidden="true">
5
- ${this._sectors.map(t=>e`<span
6
- class="sbb-train-formation__sector"
7
- style=${j({"--sbb-train-formation-wagon-count":t.wagonCount,"--sbb-train-formation-wagon-blocked-passage-count":t.blockedPassageCount})}
8
- >
9
- <span class="sbb-train-formation__sector-sticky-wrapper">
10
- ${`${t.wagonCount===1&&t.label?S[this._language.current]:x[this._language.current]} ${t.label?t.label:``}`}
11
- </span>
12
- </span>`)}
13
- </div>`:n}
5
+ ${this._sectors.map(t=>e`<span
6
+ class="sbb-train-formation__sector"
7
+ style=${j({"--sbb-train-formation-wagon-count":t.wagonCount,"--sbb-train-formation-wagon-blocked-passage-count":t.blockedPassageCount})}
8
+ >
9
+ <span class="sbb-train-formation__sector-sticky-wrapper">
10
+ ${`${t.wagonCount===1&&t.label?S[this._language.current]:x[this._language.current]} ${t.label?t.label:``}`}
11
+ </span>
12
+ </span>`)}
13
+ </div>`:n}
14
14
 
15
15
  <div class="sbb-train-formation__trains">
16
16
  ${this.renderList({class:`sbb-train-formation__train-list`,ariaLabel:w[this._language.current]})}
@@ -36,13 +36,13 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
36
36
  ${this.label?M`<li class="sbb-screen-reader-only">${a}</li>`:n}
37
37
  ${this.wagonClass&&this.wagonType!==`closed`?M`<li class="sbb-train-wagon__class">${o}</li>`:n}
38
38
  ${this.occupancy&&this.wagonType!==`closed`?M`<sbb-timetable-occupancy-icon
39
- class="sbb-train-wagon__occupancy"
40
- role="listitem"
41
- occupancy=${this.occupancy}
42
- ></sbb-timetable-occupancy-icon>`:n}
39
+ class="sbb-train-wagon__occupancy"
40
+ role="listitem"
41
+ occupancy=${this.occupancy}
42
+ ></sbb-timetable-occupancy-icon>`:n}
43
43
  ${t?M`<li class="sbb-screen-reader-only">
44
- ${h[e][this._language.current]}
45
- </li>`:n}
44
+ ${h[e][this._language.current]}
45
+ </li>`:n}
46
46
  </ul>`,()=>M`<div class="sbb-train-wagon__compartment">
47
47
  <span class="sbb-screen-reader-only">
48
48
  ${`${this._wagonTypeLabel()}${this.sector?`, ${i}`:``}`}
@@ -50,17 +50,17 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
50
50
  ${this.label?M`<span class="sbb-screen-reader-only">${a}</span>`:n}
51
51
  ${this.wagonClass&&this.wagonType!==`closed`?M`<span class="sbb-train-wagon__class">${o}</span>`:n}
52
52
  ${this.occupancy&&this.wagonType!==`closed`?M`<sbb-timetable-occupancy-icon
53
- class="sbb-train-wagon__occupancy"
54
- occupancy=${this.occupancy}
55
- ></sbb-timetable-occupancy-icon>`:n}
53
+ class="sbb-train-wagon__occupancy"
54
+ occupancy=${this.occupancy}
55
+ ></sbb-timetable-occupancy-icon>`:n}
56
56
  ${t?M`<span class="sbb-screen-reader-only">
57
- ${h[e][this._language.current]}
58
- </span>`:n}
57
+ ${h[e][this._language.current]}
58
+ </span>`:n}
59
59
  </div> `)}
60
60
  ${V[this.wagonType]?M`<sbb-icon
61
- name=${V[this.wagonType]}
62
- class="sbb-train-wagon__main-icon"
63
- ></sbb-icon>`:n}
61
+ name=${V[this.wagonType]}
62
+ class="sbb-train-wagon__main-icon"
63
+ ></sbb-icon>`:n}
64
64
  <svg class="sbb-train-wagon__shape" viewBox="0 0 84 36" aria-hidden="true">
65
65
  <path d=${s}></path>
66
66
  <path
@@ -73,18 +73,18 @@ import{html as e,isServer as t,nothing as n,unsafeCSS as r}from"lit";import{SbbB
73
73
  ></path>
74
74
  </svg>
75
75
  ${this.additionalAccessibilityText?M`<span class="sbb-screen-reader-only"
76
- >, ${this.additionalAccessibilityText}</span
77
- >`:n}
76
+ >, ${this.additionalAccessibilityText}</span
77
+ >`:n}
78
78
  <span
79
79
  class="sbb-train-wagon__information-wrapper"
80
80
  ?hidden=${!this.listChildren.length&&!this.label}
81
81
  >
82
82
  ${this.label?M`<span aria-hidden="true" class="sbb-train-wagon__label">${this.label}</span>`:n}
83
83
  ${this.label&&this.listChildren.length?M`<sbb-divider
84
- orientation=${this.orientation===`vertical`?`horizontal`:`vertical`}
85
- aria-hidden="true"
86
- class="sbb-train-wagon__label-divider"
87
- ></sbb-divider>`:n}
84
+ orientation=${this.orientation===`vertical`?`horizontal`:`vertical`}
85
+ aria-hidden="true"
86
+ class="sbb-train-wagon__label-divider"
87
+ ></sbb-divider>`:n}
88
88
  ${this.renderList({class:`sbb-train-wagon__attribute-icon-list`,ariaLabel:p[this._language.current]})}
89
89
  </span>
90
90
  </div>
@@ -1,17 +1,17 @@
1
1
  import{__esDecorate as e,__runInitializers as t}from"tslib";import{html as n,nothing as r,unsafeCSS as i}from"lit";import{property as a}from"lit/decorators.js";import{SbbDisabledMixin as o,SbbElement as s,SbbNegativeMixin as c,forceType as l}from"./core.js";var u=`:host{width:var(--sbb-visual-checkbox-dimension);height:var(--sbb-visual-checkbox-dimension);border-radius:var(--sbb-border-radius-2x);background-color:var(--sbb-visual-checkbox-background-color);cursor:var(--sbb-visual-checkbox-cursor);outline:var(--sbb-visual-checkbox-border-width) var(--sbb-visual-checkbox-border-style) var(--sbb-visual-checkbox-border-color);outline-offset:calc(-1 * var(--sbb-visual-checkbox-border-width));flex-shrink:0;justify-content:center;align-items:center;display:flex}:host([size=xs]){--sbb-visual-checkbox-dimension:var(--sbb-checkbox-dimension-xs)}:host([size=s]){--sbb-visual-checkbox-dimension:var(--sbb-checkbox-dimension-s)}:host([size=m]){--sbb-visual-checkbox-dimension:var(--sbb-checkbox-dimension-m)}:host([negative]){--sbb-visual-checkbox-background-color:var(--sbb-visual-checkbox-background-color-negative);--sbb-visual-checkbox-selection-color:var(--sbb-visual-checkbox-selection-color-negative)}:host([disabled]){--sbb-visual-checkbox-background-color:var(--sbb-visual-checkbox-background-color-disabled);--sbb-visual-checkbox-border-style:var(--sbb-visual-checkbox-border-style-disabled);--sbb-visual-checkbox-cursor:var(--sbb-cursor-default);--sbb-visual-checkbox-border-color:var(--sbb-visual-checkbox-border-color-disabled);--sbb-visual-checkbox-selection-color:var(--sbb-visual-checkbox-selection-color-disabled)}:host([disabled][negative]){--sbb-visual-checkbox-background-color:var(--sbb-visual-checkbox-background-color-negative-disabled);--sbb-visual-checkbox-selection-color:var(--sbb-visual-checkbox-selection-color-disabled-negative)}@media (forced-colors:active){:host([indeterminate]){--sbb-visual-checkbox-selection-color:ButtonBorder}:host([indeterminate][disabled]){--sbb-visual-checkbox-selection-color:GrayText}:host([checked]:not([indeterminate])){--sbb-visual-checkbox-background-color:Highlight;--sbb-visual-checkbox-border-width:0}:host([disabled][checked]:not([indeterminate])){--sbb-visual-checkbox-background-color:GrayText}}path{stroke:var(--sbb-visual-checkbox-selection-color)}
2
2
  `;let d=(()=>{let d=o(c(s)),f,p=[],m=[],h,g=[],_=[],v,y=[],b=[];return class extends d{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(d[Symbol.metadata]??null):void 0;f=[l(),a({reflect:!0,type:Boolean})],h=[l(),a({reflect:!0,type:Boolean})],v=[a({reflect:!0})],e(this,null,f,{kind:`accessor`,name:`checked`,static:!1,private:!1,access:{has:e=>`checked`in e,get:e=>e.checked,set:(e,t)=>{e.checked=t}},metadata:t},p,m),e(this,null,h,{kind:`accessor`,name:`indeterminate`,static:!1,private:!1,access:{has:e=>`indeterminate`in e,get:e=>e.indeterminate,set:(e,t)=>{e.indeterminate=t}},metadata:t},g,_),e(this,null,v,{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},y,b),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-visual-checkbox`}static{this.styles=[i(u)]}#e=t(this,p,!1);get checked(){return this.#e}set checked(e){this.#e=e}#t=(t(this,m),t(this,g,!1));get indeterminate(){return this.#t}set indeterminate(e){this.#t=e}#n=(t(this,_),t(this,y,null));get size(){return this.#n}set size(e){this.#n=e}render(){return n`
3
3
  ${this.checked||this.indeterminate?n`<svg
4
- viewBox="0 0 24 24"
5
- xmlns="http://www.w3.org/2000/svg"
6
- width="100%"
7
- height="100%"
8
- >
9
- <path
10
- fill="none"
11
- d=${this.indeterminate?`M9 12H15`:`M8 12.3304L10.4615 15L16 9`}
12
- stroke-width="2"
13
- stroke-linecap="round"
14
- stroke-linejoin="round"
15
- />
16
- </svg>`:r}
4
+ viewBox="0 0 24 24"
5
+ xmlns="http://www.w3.org/2000/svg"
6
+ width="100%"
7
+ height="100%"
8
+ >
9
+ <path
10
+ fill="none"
11
+ d=${this.indeterminate?`M9 12H15`:`M8 12.3304L10.4615 15L16 9`}
12
+ stroke-width="2"
13
+ stroke-linecap="round"
14
+ stroke-linejoin="round"
15
+ />
16
+ </svg>`:r}
17
17
  `}constructor(){super(...arguments),t(this,b)}}})();export{d as SbbVisualCheckboxElement};