@sbb-esta/lyne-elements-dev 5.2.0-dev.1783952043 → 5.2.0-dev.1783958434

package/development/flip-card.pure.js

@@ -232,7 +232,7 @@ let SbbFlipCardElement = (() => {
 		}
 		/** Returns the card details content element wrapper. */
 		get _detailsContentElement() {
-			return this.details.shadowRoot.firstElementChild;
+			return this.details?.shadowRoot?.querySelector(".sbb-flip-card-details") ?? null;
 		}
 		/** Whether the flip card is flipped. */
 		get isFlipped() {
@@ -268,10 +268,11 @@ let SbbFlipCardElement = (() => {
 		/** Toggles the state of the sbb-flip-card. */
 		toggle() {
 			this._flipped = !this._flipped;
-			if (this._flipped) {
+			const detailsContentElement = this._detailsContentElement;
+			if (this._flipped && detailsContentElement) {
 				this._setCardDetailsHeight();
-				this._cardDetailsResizeObserver.observe(this._detailsContentElement);
-			} else this._cardDetailsResizeObserver.unobserve(this._detailsContentElement);
+				this._cardDetailsResizeObserver.observe(detailsContentElement);
+			} else if (detailsContentElement) this._cardDetailsResizeObserver.unobserve(detailsContentElement);
 			this.toggleState("flipped", this._flipped);
 			ɵstateController(this.details)?.toggle("flipped", this._flipped);
 			this.summary.inert = this._flipped;

package/flip-card.pure.js

@@ -10,7 +10,7 @@ import{MutationController as e}from"@lit-labs/observers/mutation-controller.js";
         <slot name="image"></slot>
       </div>
     `}constructor(){super(...arguments),h(this,o)}}})();var T=`:host{--sbb-flip-card-summary-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-5x));--sbb-flip-card-summary-transition-delay:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-flip-card-details-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-4x));display:block;position:relative}@media (any-hover:hover){:host(:hover){--sbb-flip-card-background-color:light-dark(color-mix(in srgb, var(--sbb-color-cloud) 80%, transparent),var(--sbb-color-iron));--sbb-flip-card-translate-title-y-hover:-.0625rem}}:host(:is(:state(flipped),[state--flipped])){--sbb-flip-card-toggle-icon-transform:rotate(45deg);--sbb-flip-card-details-transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-2x));--sbb-flip-card-summary-transition-delay:0s}:host(:is(:state(flipped),[state--flipped])) ::slotted(sbb-flip-card-summary){--sbb-flip-card-summary-opacity:0;--sbb-flip-card-summary-pointer-events:none}:host(:is(:state(flipped),[state--flipped])) ::slotted(sbb-flip-card-details){--sbb-flip-card-details-opacity:1;--sbb-flip-card-details-translate-y:0}@media (width>=37.5rem) and (width<=63.9375rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height:15rem}}@media (width>=90rem){:host(:is(:state(image-alignment-after),[state--image-alignment-after])){--sbb-flip-card-min-height:25rem}}.sbb-flip-card{height:100%;min-height:var(--sbb-flip-card-min-height);background-color:var(--sbb-flip-card-background-color);border-radius:var(--sbb-flip-card-border-radius);transition:all var(--sbb-flip-card-summary-transition-duration) ease-out, min-height var(--sbb-flip-card-details-transition-duration);transition-delay:var(--sbb-flip-card-summary-transition-delay);cursor:var(--sbb-cursor-pointer);flex-flow:column wrap;display:flex;position:relative}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card{min-height:max(var(--sbb-flip-card-min-height), var(--sbb-flip-card-details-height))}@media (forced-colors:active){.sbb-flip-card:after{content:"";border:var(--sbb-flip-card-border) solid CanvasText;border-radius:var(--sbb-flip-card-border-radius);pointer-events:none;position:absolute;inset:0}}@media (forced-colors:active) and (any-hover:hover){:host(:hover) .sbb-flip-card:after{border-color:highlight}}.sbb-flip-card:before{content:"";opacity:0;pointer-events:none;background-color:var(--sbb-color-midnight);background-color:light-dark(var(--sbb-color-midnight),var(--sbb-color-iron));width:var(--sbb-flip-card-button-dimensions);height:var(--sbb-flip-card-button-dimensions);transition:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-3x)) ease-out;border-radius:16rem;position:absolute;inset-block-end:var(--sbb-flip-card-padding);inset-inline-start:var(--sbb-flip-card-padding)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card:before{opacity:1;border-radius:var(--sbb-flip-card-border-radius);width:100%;height:100%;transition-duration:var(--sbb-disable-animation-duration,var(--sbb-animation-duration-5x));inset-block-end:0;inset-inline-start:0}.sbb-flip-card--toggle-button{position:absolute;inset-block-end:var(--sbb-flip-card-padding);inset-inline-start:var(--sbb-flip-card-padding)}:host(:is(:state(flipped),[state--flipped])) .sbb-flip-card--toggle-button{--sbb-focus-outline-color:var(--sbb-focus-outline-color-dark)}.sbb-flip-card--toggle-button-icon{transform:var(--sbb-flip-card-toggle-icon-transform,none);transition:transform var(--sbb-flip-card-summary-transition-duration) ease-out}.sbb-flip-card-button{border-radius:var(--sbb-flip-card-border-radius);width:100%;cursor:var(--sbb-cursor-pointer);position:absolute;inset:0}.sbb-flip-card-button: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)}
-`;let E=(()=>{let e=a,x,S=[],C=[],w,E=[],D=[];return class extends e{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;x=[l(),g({attribute:`accessibility-label`})],w=[_()],m(this,null,x,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},S,C),m(this,null,w,{kind:`accessor`,name:`_flipped`,static:!1,private:!1,access:{has:e=>`_flipped`in e,get:e=>e._flipped,set:(e,t)=>{e._flipped=t}},metadata:t},E,D),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-flip-card`}static{this.elementDependencies=[b]}static{this.styles=[c,f,r(T)]}static{this.events={flip:`flip`}}#e;get accessibilityLabel(){return this.#e}set accessibilityLabel(e){this.#e=e}get summary(){return this.querySelector?.(`sbb-flip-card-summary`)}get details(){return this.querySelector?.(`sbb-flip-card-details`)}get _detailsContentElement(){return this.details.shadowRoot.firstElementChild}get isFlipped(){return this._flipped}#t;get _flipped(){return this.#t}set _flipped(e){this.#t=e}constructor(){super(),this.#e=h(this,S,``),this.#t=(h(this,C),h(this,E,!1)),this._language=(h(this,D),new o(this)),this._cardDetailsResizeObserver=new v(this,{target:null,skipInitial:!0,callback:()=>this._setCardDetailsHeight()}),this.addEventListener?.(`click`,e=>{(e.target===this||!e.target?.matches?.(i))&&this.toggle()}),this.addController(new s(this,()=>this.summary,{imageAlignment:e=>{this._previousImageAlignment&&this.internals.states.delete(`image-alignment-${this._previousImageAlignment}`),this._previousImageAlignment=e.imageAlignment,this._previousImageAlignment&&this.internals.states.add(`image-alignment-${this._previousImageAlignment}`)}}))}toggle(){this._flipped=!this._flipped,this._flipped?(this._setCardDetailsHeight(),this._cardDetailsResizeObserver.observe(this._detailsContentElement)):this._cardDetailsResizeObserver.unobserve(this._detailsContentElement),this.toggleState(`flipped`,this._flipped),p(this.details)?.toggle(`flipped`,this._flipped),this.summary.inert=this._flipped,this.details.inert=!this._flipped,this.dispatchEvent(new Event(`flip`,{bubbles:!0,composed:!0}))}_setCardDetailsHeight(){let e=Math.floor(this._detailsContentElement.offsetHeight);this.style?.setProperty(`--sbb-flip-card-details-height`,`${e}px`)}async _accessibilityLabel(){return n?``:(await this.hydrationComplete,this._flipped?d[this._language.current]:`${(this.accessibilityLabel?this.accessibilityLabel:this.summary?.textContent?.trim())??``}, ${u[this._language.current]}`)}render(){return t`
+`;let E=(()=>{let e=a,x,S=[],C=[],w,E=[],D=[];return class extends e{static{let t=typeof Symbol==`function`&&Symbol.metadata?Object.create(e[Symbol.metadata]??null):void 0;x=[l(),g({attribute:`accessibility-label`})],w=[_()],m(this,null,x,{kind:`accessor`,name:`accessibilityLabel`,static:!1,private:!1,access:{has:e=>`accessibilityLabel`in e,get:e=>e.accessibilityLabel,set:(e,t)=>{e.accessibilityLabel=t}},metadata:t},S,C),m(this,null,w,{kind:`accessor`,name:`_flipped`,static:!1,private:!1,access:{has:e=>`_flipped`in e,get:e=>e._flipped,set:(e,t)=>{e._flipped=t}},metadata:t},E,D),t&&Object.defineProperty(this,Symbol.metadata,{enumerable:!0,configurable:!0,writable:!0,value:t})}static{this.elementName=`sbb-flip-card`}static{this.elementDependencies=[b]}static{this.styles=[c,f,r(T)]}static{this.events={flip:`flip`}}#e;get accessibilityLabel(){return this.#e}set accessibilityLabel(e){this.#e=e}get summary(){return this.querySelector?.(`sbb-flip-card-summary`)}get details(){return this.querySelector?.(`sbb-flip-card-details`)}get _detailsContentElement(){return this.details?.shadowRoot?.querySelector(`.sbb-flip-card-details`)??null}get isFlipped(){return this._flipped}#t;get _flipped(){return this.#t}set _flipped(e){this.#t=e}constructor(){super(),this.#e=h(this,S,``),this.#t=(h(this,C),h(this,E,!1)),this._language=(h(this,D),new o(this)),this._cardDetailsResizeObserver=new v(this,{target:null,skipInitial:!0,callback:()=>this._setCardDetailsHeight()}),this.addEventListener?.(`click`,e=>{(e.target===this||!e.target?.matches?.(i))&&this.toggle()}),this.addController(new s(this,()=>this.summary,{imageAlignment:e=>{this._previousImageAlignment&&this.internals.states.delete(`image-alignment-${this._previousImageAlignment}`),this._previousImageAlignment=e.imageAlignment,this._previousImageAlignment&&this.internals.states.add(`image-alignment-${this._previousImageAlignment}`)}}))}toggle(){this._flipped=!this._flipped;let e=this._detailsContentElement;this._flipped&&e?(this._setCardDetailsHeight(),this._cardDetailsResizeObserver.observe(e)):e&&this._cardDetailsResizeObserver.unobserve(e),this.toggleState(`flipped`,this._flipped),p(this.details)?.toggle(`flipped`,this._flipped),this.summary.inert=this._flipped,this.details.inert=!this._flipped,this.dispatchEvent(new Event(`flip`,{bubbles:!0,composed:!0}))}_setCardDetailsHeight(){let e=Math.floor(this._detailsContentElement.offsetHeight);this.style?.setProperty(`--sbb-flip-card-details-height`,`${e}px`)}async _accessibilityLabel(){return n?``:(await this.hydrationComplete,this._flipped?d[this._language.current]:`${(this.accessibilityLabel?this.accessibilityLabel:this.summary?.textContent?.trim())??``}, ${u[this._language.current]}`)}render(){return t`
       <div class="sbb-flip-card">
         <button
           class="sbb-flip-card-button"

package/package.json

@@ -1,12 +1,12 @@
 {
   "name": "@sbb-esta/lyne-elements-dev",
-  "version": "5.2.0-dev.1783952043",
+  "version": "5.2.0-dev.1783958434",
   "description": "Lyne Design System",
   "keywords": [
     "design system",
     "web components",
     "lit",
-    "https://github.com/sbb-design-systems/lyne-components/commit/bc8ebc2dd6df932d5ed51f1dd6f95610db2baa64"
+    "https://github.com/sbb-design-systems/lyne-components/commit/c688c9c7a63e037821deb08e93e484cd464e3830"
   ],
   "type": "module",
   "exports": {