scb-wc-test 0.1.349 → 0.1.351

package/all.js

@@ -31,6 +31,7 @@ import './mvc/components/scb-fact-card/scb-fact-card-content.js';
 import './mvc/components/scb-fact-card/scb-fact-card.js';
 import './mvc/components/scb-footer/scb-footer-section.js';
 import './mvc/components/scb-footer/scb-footer.js';
+import './mvc/components/scb-gallery-grid/scb-gallery-grid.js';
 import './mvc/components/scb-grid/scb-grid-item.js';
 import './mvc/components/scb-grid/scb-grid.js';
 import './mvc/components/scb-grid/scb-stack.js';
@@ -55,6 +56,7 @@ import './mvc/components/scb-notification-card/scb-notification-card.js';
 import './mvc/components/scb-options-menu/scb-options-menu-item.js';
 import './mvc/components/scb-options-menu/scb-options-menu.js';
 import './mvc/components/scb-options-menu/scb-options-sub-menu.js';
+import './mvc/components/scb-overlay/scb-overlay.js';
 import './mvc/components/scb-pagination/scb-pagination.js';
 import './mvc/components/scb-progress-indicator/scb-progress-indicator.js';
 import './mvc/components/scb-progress-stepper/scb-progress-step.js';
@@ -123,6 +125,7 @@ import './scb-fact-card/scb-fact-card-content.js';
 import './scb-fact-card/scb-fact-card.js';
 import './scb-footer/scb-footer-section.js';
 import './scb-footer/scb-footer.js';
+import './scb-gallery-grid/scb-gallery-grid.js';
 import './scb-grid/scb-grid-item.js';
 import './scb-grid/scb-grid.js';
 import './scb-grid/scb-stack.js';
@@ -147,6 +150,7 @@ import './scb-notification-card/scb-notification-card.js';
 import './scb-options-menu/scb-options-menu-item.js';
 import './scb-options-menu/scb-options-menu.js';
 import './scb-options-menu/scb-options-sub-menu.js';
+import './scb-overlay/scb-overlay.js';
 import './scb-pagination/scb-pagination.js';
 import './scb-progress-indicator/scb-progress-indicator.js';
 import './scb-progress-stepper/scb-progress-step.js';

package/index.d.ts

@@ -27,6 +27,7 @@ export * from './scb-fact-card/scb-fact-card-content';
 export * from './scb-fact-card/scb-fact-card';
 export * from './scb-footer/scb-footer-section';
 export * from './scb-footer/scb-footer';
+export * from './scb-gallery-grid/scb-gallery-grid';
 export * from './scb-grid/scb-grid-item';
 export * from './scb-grid/scb-grid';
 export * from './scb-grid/scb-stack';
@@ -51,6 +52,7 @@ export * from './scb-notification-card/scb-notification-card';
 export * from './scb-options-menu/scb-options-menu-item';
 export * from './scb-options-menu/scb-options-menu';
 export * from './scb-options-menu/scb-options-sub-menu';
+export * from './scb-overlay/scb-overlay';
 export * from './scb-pagination/scb-pagination';
 export * from './scb-progress-indicator/scb-progress-indicator';
 export * from './scb-progress-stepper/scb-progress-step';

package/index.js

@@ -27,6 +27,7 @@ import "./scb-fact-card/scb-fact-card-content.js";
 import "./scb-fact-card/scb-fact-card.js";
 import "./scb-footer/scb-footer-section.js";
 import "./scb-footer/scb-footer.js";
+import "./scb-gallery-grid/scb-gallery-grid.js";
 import "./scb-grid/scb-grid-item.js";
 import "./scb-grid/scb-grid.js";
 import "./scb-grid/scb-stack.js";
@@ -51,6 +52,7 @@ import "./scb-notification-card/scb-notification-card.js";
 import "./scb-options-menu/scb-options-menu-item.js";
 import "./scb-options-menu/scb-options-menu.js";
 import "./scb-options-menu/scb-options-sub-menu.js";
+import "./scb-overlay/scb-overlay.js";
 import "./scb-pagination/scb-pagination.js";
 import "./scb-progress-indicator/scb-progress-indicator.js";
 import "./scb-progress-stepper/scb-progress-step.js";

package/mvc/components/all.js

@@ -27,6 +27,7 @@ import './scb-fact-card/scb-fact-card.js';
 import './scb-fact-card/scb-fact-card-content.js';
 import './scb-footer/scb-footer.js';
 import './scb-footer/scb-footer-section.js';
+import './scb-gallery-grid/scb-gallery-grid.js';
 import './scb-grid/scb-grid.js';
 import './scb-grid/scb-grid-item.js';
 import './scb-grid/scb-stack.js';
@@ -51,6 +52,7 @@ import './scb-notification-card/scb-notification-card.js';
 import './scb-options-menu/scb-options-menu.js';
 import './scb-options-menu/scb-options-menu-item.js';
 import './scb-options-menu/scb-options-sub-menu.js';
+import './scb-overlay/scb-overlay.js';
 import './scb-pagination/scb-pagination.js';
 import './scb-progress-indicator/scb-progress-indicator.js';
 import './scb-progress-stepper/scb-progress-step.js';

package/mvc/components/scb-card/scb-card.js

@@ -1,11 +1,11 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js"])))=>i.map(i=>d[i]);
-import{_ as T}from"../../vendor/preload-helper.js";import{a as F,n as a,i as H,x as r,E as g,t as D}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-link/scb-link.js";import"../scb-avatar/scb-avatar.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-list/scb-list-item.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(n,c,o){try{customElements.get(n)||e(n,c,o)}catch(p){var d=String(p||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var B=Object.defineProperty,N=Object.getOwnPropertyDescriptor,P=t=>{throw TypeError(t)},s=(t,e,n,c)=>{for(var o=c>1?void 0:c?N(e,n):e,d=t.length-1,p;d>=0;d--)(p=t[d])&&(o=(c?p(e,n,o):p(o))||o);return c&&o&&B(e,n,o),o},R=(t,e,n)=>e.has(t)||P("Cannot "+n),W=(t,e,n)=>e.has(t)?P("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,n),x=(t,e,n)=>(R(t,e,"access private method"),n),f,_,$;const l={fromAttribute:t=>t??"",toAttribute:t=>typeof t!="string"||t.trim()===""?null:t};let i=class extends H{constructor(){super(...arguments),W(this,f),this.__managedSocialAttributes=new Set(["social-comments-text","social-comments","social-comments-href","social-likes-text","social-likes","social-likes-hover-content","social-has-liked","social-likes-interactive","social-author","social-author-text","social-author-href"]),this.__isSyncingManagedSocialAttributes=!1,this.type="standard",this.variant="standard",this.direction="dynamic",this.size="large",this.mediaType="",this.mediaHref="",this.mediaAlt="",this.mediaSrcset="",this.mediaSizes="",this.mediaLoading="auto",this.mediaDecoding="async",this.mediaFetchPriority="auto",this.mediaFit="cover",this.mediaPosition="center",this.mediaWidth="",this.mediaHeight="",this.mediaAspect="",this.mediaPlaceholder=!1,this.cardHref="",this.href="",this.title="",this.subtitle="",this.supportingText="",this.commentsText="",this.commentsDisabled=!1,this.commentsHref="",this.likesText="",this.likesDisabled=!1,this.likesHoverContent="",this.hasLiked=!1,this.likesInteractive=!0,this.author=!1,this.authorText="",this.authorHref="",this.replyEnabled=!1,this.editEnabled=!1,this.deleteEnabled=!1,this.sizing="stretch",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.innerPadding=void 0,this.paddingTop=void 0,this.paddingBottom=void 0,this.paddingLeft=void 0,this.paddingRight=void 0,this.__onImgLoad=t=>{const e=t.currentTarget.closest(".media");e&&e.classList.add("is-loaded")},this.__onKeyDown=t=>{const e=this.__effectiveHref();(t.key==="Enter"||t.key===" ")&&e&&(t.preventDefault(),this.__navigate(e,t))},this.__handleHrefNavigation=t=>{const e=this.__effectiveHref();e&&(t.target.closest("a")||this.__navigate(e,t))}}attributeChangedCallback(t,e,n){this.__isSyncingManagedSocialAttributes&&this.__managedSocialAttributes.has(t)||super.attributeChangedCallback(t,e,n)}get likeButton(){return this.type!=="social"?null:this.renderRoot.querySelector(".likes scb-icon-button")}__calcAspectWH(t){const e=(t||"").trim();if(!e)return{w:640,h:360};const n=e.includes("/")?e.split("/"):e.includes(":")?e.split(":"):e.includes("x")?e.split("x"):null;if(n&&n.length===2){const o=Number(n[0]),d=Number(n[1]);if(o>0&&d>0)return{w:o,h:d}}const c=Number(e);return isFinite(c)&&c>0?{w:1e3,h:Math.round(1e3/c)}:{w:640,h:360}}__noWrapText(t){return(t??"").replace(/ /g," ").replace(/-/g,"‑")}__dispatchLikeEvent(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e})),this.dispatchEvent(new CustomEvent(t.replace("-",""),{bubbles:!0,composed:!0,detail:e}))}__dispatchSocialActionEvent(t,e){this.dispatchEvent(new CustomEvent(`social-${t}`,{bubbles:!0,composed:!0,detail:{action:t,originalEvent:e}}))}__dispatchCardNavigate(t,e){const n={href:t,originalEvent:e},c=new CustomEvent("card-navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:n});if(this.dispatchEvent(c),c.defaultPrevented)return!1;const o=new CustomEvent("cardnavigate",{bubbles:!0,composed:!0,cancelable:!0,detail:n});return this.dispatchEvent(o),!o.defaultPrevented}__effectiveHref(){return this.cardHref||this.href}__navigate(t,e){t&&this.__dispatchCardNavigate(t,e)&&window.open(t,"_self")}__mediaTemplate(){if((this.mediaType||"").toLowerCase()==="avatar")return r`
+import{_ as T}from"../../vendor/preload-helper.js";import{a as F,n as a,i as H,x as r,E as g,t as D}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";import"../scb-list/scb-list.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-link/scb-link.js";import"../scb-avatar/scb-avatar.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-list/scb-list-item.js";(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(n,c,o){try{customElements.get(n)||e(n,c,o)}catch(p){var d=String(p||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw p}}}}catch{}})();var B=Object.defineProperty,N=Object.getOwnPropertyDescriptor,P=t=>{throw TypeError(t)},s=(t,e,n,c)=>{for(var o=c>1?void 0:c?N(e,n):e,d=t.length-1,p;d>=0;d--)(p=t[d])&&(o=(c?p(e,n,o):p(o))||o);return c&&o&&B(e,n,o),o},R=(t,e,n)=>e.has(t)||P("Cannot "+n),W=(t,e,n)=>e.has(t)?P("Cannot add the same private member more than once"):e instanceof WeakSet?e.add(t):e.set(t,n),x=(t,e,n)=>(R(t,e,"access private method"),n),f,_,$;const l={fromAttribute:t=>t??"",toAttribute:t=>typeof t!="string"||t.trim()===""?null:t};let i=class extends H{constructor(){super(...arguments),W(this,f),this.__managedSocialAttributes=new Set(["social-comments-text","social-comments","social-comments-href","social-likes-text","social-likes","social-likes-hover-content","social-has-liked","social-likes-interactive","social-author","social-author-text","social-author-href"]),this.__isSyncingManagedSocialAttributes=!1,this.type="standard",this.variant="standard",this.direction="dynamic",this.size="large",this.mediaType="",this.mediaHref="",this.mediaAlt="",this.mediaSrcset="",this.mediaSizes="",this.mediaLoading="auto",this.mediaDecoding="async",this.mediaFetchPriority="auto",this.mediaFit="cover",this.mediaPosition="center",this.mediaWidth="",this.mediaHeight="",this.mediaAspect="",this.mediaPlaceholder=!1,this.cardHref="",this.href="",this.title="",this.subtitle="",this.supportingText="",this.commentsText="",this.commentsDisabled=!1,this.commentsHref="",this.likesText="",this.likesDisabled=!1,this.likesHoverContent="",this.hasLiked=!1,this.likesInteractive=!0,this.author=!1,this.authorText="",this.authorHref="",this.replyEnabled=!1,this.editEnabled=!1,this.deleteEnabled=!1,this.sizing="stretch",this.width="",this.maxWidth="",this.height="",this.maxHeight="",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0,this.innerPadding=void 0,this.paddingTop=void 0,this.paddingBottom=void 0,this.paddingLeft=void 0,this.paddingRight=void 0,this.__onImgLoad=t=>{const e=t.currentTarget.closest(".media");e&&e.classList.add("is-loaded")},this.__onKeyDown=t=>{const e=this.__effectiveHref();(t.key==="Enter"||t.key===" ")&&e&&(t.preventDefault(),this.__navigate(e,t))},this.__handleHrefNavigation=t=>{const e=this.__effectiveHref();e&&(t.target.closest("a")||this.__navigate(e,t))}}attributeChangedCallback(t,e,n){this.__isSyncingManagedSocialAttributes&&this.__managedSocialAttributes.has(t)||super.attributeChangedCallback(t,e,n)}get likeButton(){return this.type!=="social"?null:this.renderRoot.querySelector(".likes scb-icon-button")}__calcAspectWH(t){const e=(t||"").trim();if(!e)return{w:600,h:400};const n=e.includes("/")?e.split("/"):e.includes(":")?e.split(":"):e.includes("x")?e.split("x"):null;if(n&&n.length===2){const o=Number(n[0]),d=Number(n[1]);if(o>0&&d>0)return{w:o,h:d}}const c=Number(e);return isFinite(c)&&c>0?{w:1e3,h:Math.round(1e3/c)}:{w:600,h:400}}__noWrapText(t){return(t??"").replace(/ /g," ").replace(/-/g,"‑")}__dispatchLikeEvent(t,e){this.dispatchEvent(new CustomEvent(t,{bubbles:!0,composed:!0,detail:e})),this.dispatchEvent(new CustomEvent(t.replace("-",""),{bubbles:!0,composed:!0,detail:e}))}__dispatchSocialActionEvent(t,e){this.dispatchEvent(new CustomEvent(`social-${t}`,{bubbles:!0,composed:!0,detail:{action:t,originalEvent:e}}))}__dispatchCardNavigate(t,e){const n={href:t,originalEvent:e},c=new CustomEvent("card-navigate",{bubbles:!0,composed:!0,cancelable:!0,detail:n});if(this.dispatchEvent(c),c.defaultPrevented)return!1;const o=new CustomEvent("cardnavigate",{bubbles:!0,composed:!0,cancelable:!0,detail:n});return this.dispatchEvent(o),!o.defaultPrevented}__effectiveHref(){return this.cardHref||this.href}__navigate(t,e){t&&this.__dispatchCardNavigate(t,e)&&window.open(t,"_self")}__mediaTemplate(){if((this.mediaType||"").toLowerCase()==="avatar")return r`
         <div class="media">
           <slot name="media">
             <scb-avatar variant="icon" label="${this.title}" icon-name="person"></scb-avatar>
           </slot>
         </div>
-      `;if(this.mediaHref||this.mediaSrcset){let e=Number(this.mediaWidth)||0,n=Number(this.mediaHeight)||0;const c=(this.mediaAspect||"").trim();if(!e||!n){const p=this.__calcAspectWH(c||"16/9");e||(e=p.w),n||(n=p.h)}const o=`aspect-ratio:${c||`${e}/${n}`};`,d=this.mediaPlaceholder?"has-ph":"";return r`
+      `;if(this.mediaHref||this.mediaSrcset){let e=Number(this.mediaWidth)||0,n=Number(this.mediaHeight)||0;const c=(this.mediaAspect||"").trim();if(!e||!n){const p=this.__calcAspectWH(c||"3/2");e||(e=p.w),n||(n=p.h)}const o=`aspect-ratio:${c||`${e}/${n}`};`,d=this.mediaPlaceholder?"has-ph":"";return r`
         <div class="media ${d}" style="${o}">
           <slot name="media-sources"></slot>
           <img
@@ -224,7 +224,7 @@ import{_ as T}from"../../vendor/preload-helper.js";import{a as F,n as a,i as H,x
       padding: var(--scb-card-focus-ring-gap, 4px);
       --scb-card-horizontal-media-max: 176px;
       --scb-card-horizontal-media-min: 96px;
-      --scb-card-horizontal-media-aspect: 16 / 9;
+      --scb-card-horizontal-media-aspect: 3 / 2;
 
       margin-block-start: var(--scb-card-spacing-block-start, 0);
       margin-block-end: var(--scb-card-spacing-block-end, 0);
@@ -572,6 +572,7 @@ import{_ as T}from"../../vendor/preload-helper.js";import{a as F,n as a,i as H,x
     }
     .header md-icon {
       flex: 0 0 auto;
+      align-self: start;
     }
 
     .sub-label {
@@ -628,7 +629,7 @@ import{_ as T}from"../../vendor/preload-helper.js";import{a as F,n as a,i as H,x
     .scb-card.horizontal .media img {
       margin: 0;
       object-fit: var(--scb-card-media-fit, cover);
-      aspect-ratio: var(--scb-card-horizontal-media-aspect, 16 / 9);
+      aspect-ratio: var(--scb-card-horizontal-media-aspect, 3 / 2);
       inline-size: 100%;
       block-size: auto;
     }
@@ -667,7 +668,7 @@ import{_ as T}from"../../vendor/preload-helper.js";import{a as F,n as a,i as H,x
       .scb-card.dynamic-direction .media img {
         margin: 0;
         object-fit: var(--scb-card-media-fit, cover);
-        aspect-ratio: var(--scb-card-horizontal-media-aspect, 16 / 9);
+        aspect-ratio: var(--scb-card-horizontal-media-aspect, 3 / 2);
         inline-size: 100%;
         block-size: auto;
       }

package/mvc/components/scb-gallery-grid/scb-gallery-grid.js

@@ -0,0 +1,131 @@
+import{a as S,n as E,r as k,i as T,x,t as A}from"../../vendor/vendor.js";import"../scb-horizontal-scroller/scb-horizontal-scroller.js";import"../scb-overlay/scb-overlay.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-button/scb-button.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(a,r,l){try{customElements.get(a)||t(a,r,l)}catch(h){var n=String(h||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw h}}}}catch{}})();var W=Object.defineProperty,$=Object.getOwnPropertyDescriptor,I=e=>{throw TypeError(e)},v=(e,t,a,r)=>{for(var l=r>1?void 0:r?$(t,a):t,n=e.length-1,h;n>=0;n--)(h=e[n])&&(l=(r?h(t,a,l):h(l))||l);return r&&l&&W(t,a,l),l},w=(e,t,a)=>t.has(e)||I("Cannot "+a),s=(e,t,a)=>(w(e,t,"read from private field"),t.get(e)),o=(e,t,a)=>t.has(e)?I("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,a),M=(e,t,a,r)=>(w(e,t,"write to private field"),t.set(e,a),a),c=(e,t,a)=>(w(e,t,"access private method"),a),y,u,_,m,b,f,i,C,z,p,O,L,g;let d=class extends T{constructor(){super(...arguments),o(this,i),this.variant="default",this.enableClickCarousel=!0,this.overlayOpen=!1,this.overlayIndex=0,this.overlayImages=[],o(this,y,[]),o(this,u,e=>{e.key==="Escape"&&this.overlayOpen&&s(this,g).call(this)}),o(this,_,()=>{c(this,i,p).call(this)}),o(this,m,e=>{if(!this.enableClickCarousel)return;const t=e.currentTarget;t instanceof HTMLElement&&t.setAttribute("data-scb-gallery-hover","")}),o(this,b,e=>{if(!this.enableClickCarousel)return;const t=e.currentTarget;t instanceof HTMLElement&&t.removeAttribute("data-scb-gallery-hover")}),o(this,f,e=>{if(!this.enableClickCarousel)return;const t=e.currentTarget;if(!(t instanceof HTMLElement))return;const a=t.getAttribute("data-scb-gallery-slide-index");if(a==null)return;const r=Number(a);Number.isFinite(r)&&c(this,i,L).call(this,r)}),o(this,g,()=>{this.overlayOpen=!1})}connectedCallback(){super.connectedCallback(),window.addEventListener("keydown",s(this,u))}disconnectedCallback(){window.removeEventListener("keydown",s(this,u)),c(this,i,C).call(this),super.disconnectedCallback()}firstUpdated(){c(this,i,p).call(this)}updated(e){e.has("enableClickCarousel")&&(this.enableClickCarousel||s(this,g).call(this),c(this,i,p).call(this))}render(){return x`
+      <div class="gallery">
+        <slot @slotchange=${s(this,_)}></slot>
+      </div>
+      ${this.overlayOpen&&this.enableClickCarousel?x`
+            <scb-overlay open aria-label="Bildkarusell" @scb-overlay-dismiss=${s(this,g)}>
+              <div class="overlay-dialog">
+                <scb-horizontal-scroller show-scrollbar class="overlay-carousel" variant="standard" width="100%" content-flex internal-gap="0">
+                  ${c(this,i,O).call(this).map((e,t)=>x`
+                      <div
+                        class="overlay-slide ${t===0?"is-active":""}"
+                        data-overlay-slide-index="${t}"
+                      >
+                        <img src="${e.src}" alt="${e.alt}" />
+                      </div>
+                    `)}
+                </scb-horizontal-scroller>
+              </div>
+            </scb-overlay>
+          `:""}
+    `}};y=new WeakMap;u=new WeakMap;_=new WeakMap;m=new WeakMap;b=new WeakMap;f=new WeakMap;i=new WeakSet;C=function(){s(this,y).forEach(e=>{e.removeEventListener("pointerenter",s(this,m)),e.removeEventListener("pointerleave",s(this,b)),e.removeEventListener("click",s(this,f)),e.removeAttribute("data-scb-gallery-hover"),e.removeAttribute("data-scb-gallery-clickable"),e.removeAttribute("data-scb-gallery-slide-index")}),M(this,y,[])};z=function(e){if(e instanceof HTMLImageElement){const t=e.currentSrc||e.src;return t?{src:t,alt:e.alt||"Galleri-bild"}:null}return null};p=function(){c(this,i,C).call(this);const e=this.renderRoot.querySelector("slot");if(!(e instanceof HTMLSlotElement)){this.overlayImages=[];return}const t=e.assignedElements({flatten:!0}).filter(r=>r instanceof HTMLElement);M(this,y,t);const a=[];t.forEach(r=>{if(!this.enableClickCarousel)return;const l=c(this,i,z).call(this,r);if(!l)return;r.addEventListener("pointerenter",s(this,m)),r.addEventListener("pointerleave",s(this,b));const n=a.length;a.push(l),r.setAttribute("data-scb-gallery-clickable",""),r.setAttribute("data-scb-gallery-slide-index",String(n)),r.addEventListener("click",s(this,f))}),this.overlayImages=a};O=function(){if(this.overlayImages.length===0)return[];const e=Math.max(0,Math.min(this.overlayIndex,this.overlayImages.length-1));return[...this.overlayImages.slice(e),...this.overlayImages.slice(0,e)]};L=function(e){if(!this.enableClickCarousel||this.overlayImages.length===0)return;const t=Math.max(0,Math.min(e,this.overlayImages.length-1));this.overlayIndex=t,this.overlayOpen=!0};g=new WeakMap;d.styles=S`
+    :host {
+      display: block;
+      --scb-gallery-grid-gap: var(--spacing-4, 12px);
+      --scb-gallery-grid-item-min: 180px;
+      --scb-gallery-grid-item-height: 220px;
+      --scb-gallery-grid-masonry-columns: 3;
+      --scb-gallery-overlay-max-width: 980px;
+      --scb-gallery-overlay-slide-height: min(68vh, 620px);
+    }
+
+    .gallery {
+      display: grid;
+      grid-template-columns: repeat(auto-fill, minmax(var(--scb-gallery-grid-item-min), 1fr));
+      gap: var(--scb-gallery-grid-gap);
+      align-items: start;
+    }
+
+    .gallery > slot {
+      display: contents;
+    }
+
+    .gallery ::slotted(*) {
+      box-sizing: border-box;
+      inline-size: 100%;
+      min-inline-size: 0;
+      block-size: var(--scb-gallery-grid-item-height);
+      overflow: hidden;
+      transition:
+        transform 160ms ease,
+        box-shadow 160ms ease;
+      will-change: transform;
+    }
+
+    .gallery ::slotted([data-scb-gallery-hover]) {
+      transform: translateY(-6px);
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
+    }
+
+    .gallery ::slotted([data-scb-gallery-clickable]) {
+      cursor: pointer;
+    }
+
+    .gallery ::slotted(img),
+    .gallery ::slotted(picture),
+    .gallery ::slotted(video) {
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: cover;
+      display: block;
+        border-radius: var(--md-sys-shape-corner-medium, 12px);
+    }
+
+    :host([variant='masonry']) .gallery {
+      display: block;
+      column-count: var(--scb-gallery-grid-masonry-columns);
+      column-gap: var(--scb-gallery-grid-gap);
+    }
+
+    :host([variant='masonry']) .gallery ::slotted(*) {
+      break-inside: avoid;
+      -webkit-column-break-inside: avoid;
+      margin-block-end: var(--scb-gallery-grid-gap);
+      block-size: auto;
+    }
+
+    :host([variant='masonry']) .gallery ::slotted(img),
+    :host([variant='masonry']) .gallery ::slotted(picture),
+    :host([variant='masonry']) .gallery ::slotted(video) {
+      block-size: auto;
+    }
+
+    @media (max-width: 960px) {
+      :host([variant='masonry']) .gallery {
+        column-count: 2;
+      }
+    }
+
+    @media (max-width: 640px) {
+      :host([variant='masonry']) .gallery {
+        column-count: 1;
+      }
+    }
+
+    .overlay-dialog {
+      position: relative;
+      inline-size: min(var(--scb-gallery-overlay-max-width), 100%);
+      max-block-size: 100%;
+      border-radius: var(--md-sys-shape-corner-extra-large, 28px);
+      background: var(--md-sys-color-surface-container-low, #1f1f1f);
+      padding: var(--spacing-4, 12px);
+      overflow: hidden;
+    }
+
+    .overlay-slide {
+      inline-size: 100%;
+      flex: 0 0 100%;
+      block-size: var(--scb-gallery-overlay-slide-height);
+      border-radius: var(--md-sys-shape-corner-large, 16px);
+      overflow: hidden;
+      box-shadow: inset 0 0 0 2px transparent;
+      transition: box-shadow 160ms ease;
+    }
+
+    .overlay-slide img {
+      inline-size: 100%;
+      block-size: 100%;
+      object-fit: contain;
+      display: block;
+    }
+  `;v([E({type:String,reflect:!0})],d.prototype,"variant",2);v([E({type:Boolean,reflect:!0,attribute:"enable-carousel"})],d.prototype,"enableClickCarousel",2);v([k()],d.prototype,"overlayOpen",2);v([k()],d.prototype,"overlayIndex",2);v([k()],d.prototype,"overlayImages",2);d=v([A("scb-gallery-grid")],d);

package/mvc/components/scb-overlay/scb-overlay.js

@@ -0,0 +1,42 @@
+import{a as x,n as _,i as w,E as f,x as k,t as E}from"../../vendor/vendor.js";(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(s,n,i){try{customElements.get(s)||t(s,n,i)}catch(r){var a=String(r||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw r}}}}catch{}})();var C=Object.defineProperty,z=Object.getOwnPropertyDescriptor,y=e=>{throw TypeError(e)},b=(e,t,s,n)=>{for(var i=n>1?void 0:n?z(t,s):t,a=e.length-1,r;a>=0;a--)(r=e[a])&&(i=(n?r(t,s,i):r(i))||i);return n&&i&&C(t,s,i),i},m=(e,t,s)=>t.has(e)||y("Cannot "+s),d=(e,t,s)=>(m(e,t,"read from private field"),s?s.call(e):t.get(e)),p=(e,t,s)=>t.has(e)?y("Cannot add the same private member more than once"):t instanceof WeakSet?t.add(e):t.set(e,s),v=(e,t,s)=>(m(e,t,"access private method"),s),o,u,g,h,c;let l=class extends w{constructor(){super(...arguments),p(this,o),this.open=!1,this.ariaLabel="",p(this,h,e=>{v(this,o,g).call(this,e)||v(this,o,u).call(this)}),p(this,c,e=>{this.open&&e.key==="Escape"&&v(this,o,u).call(this)})}render(){return this.open?k`
+      <div class="scrim" @click=${d(this,h)}>
+        <div class="content" role="dialog" aria-modal="true" aria-label="${this.ariaLabel||f}">
+          <slot></slot>
+        </div>
+      </div>
+    `:f}connectedCallback(){super.connectedCallback(),window.addEventListener("keydown",d(this,c))}disconnectedCallback(){window.removeEventListener("keydown",d(this,c)),super.disconnectedCallback()}};o=new WeakSet;u=function(){this.open&&(this.open=!1,this.dispatchEvent(new CustomEvent("scb-overlay-dismiss",{bubbles:!0,composed:!0})))};g=function(e){const t=this.renderRoot.querySelector("slot");if(!(t instanceof HTMLSlotElement))return!1;const s=e.composedPath();return t.assignedNodes({flatten:!0}).some(i=>s.includes(i))};h=new WeakMap;c=new WeakMap;l.styles=x`
+    :host {
+      position: fixed;
+      inset: 0;
+      z-index: var(--scb-overlay-z-index, 1000);
+      display: none;
+      box-sizing: border-box;
+    }
+
+    :host([open]) {
+      display: block;
+    }
+
+    .scrim {
+      display: grid;
+      place-items: center;
+      inline-size: 100%;
+      block-size: 100%;
+      padding: var(--scb-overlay-padding, var(--spacing-6, 24px));
+      background: var(--scb-overlay-backdrop, color-mix(in srgb, var(--md-sys-color-scrim) 32%, transparent));
+      box-sizing: border-box;
+    }
+
+    .content {
+      position: relative;
+      max-inline-size: 100%;
+      max-block-size: 100%;
+      box-sizing: border-box;
+    }
+
+    .content ::slotted(*) {
+      margin: auto;
+      max-inline-size: 100%;
+      max-block-size: 100%;
+    }
+  `;b([_({type:Boolean,reflect:!0})],l.prototype,"open",2);b([_({type:String,attribute:"aria-label"})],l.prototype,"ariaLabel",2);l=b([E("scb-overlay")],l);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.349",
+    "version":  "0.1.351",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -180,6 +180,10 @@
                                                             "import":  "./scb-footer/scb-footer-section.js",
                                                             "require":  "./scb-footer/scb-footer-section.js"
                                                         },
+                    "./scb-gallery-grid":  {
+                                               "import":  "./scb-gallery-grid/scb-gallery-grid.js",
+                                               "require":  "./scb-gallery-grid/scb-gallery-grid.js"
+                                           },
                     "./scb-grid":  {
                                        "import":  "./scb-grid/scb-grid.js",
                                        "require":  "./scb-grid/scb-grid.js"
@@ -276,6 +280,10 @@
                                                                     "import":  "./scb-options-menu/scb-options-sub-menu.js",
                                                                     "require":  "./scb-options-menu/scb-options-sub-menu.js"
                                                                 },
+                    "./scb-overlay":  {
+                                          "import":  "./scb-overlay/scb-overlay.js",
+                                          "require":  "./scb-overlay/scb-overlay.js"
+                                      },
                     "./scb-pagination":  {
                                              "import":  "./scb-pagination/scb-pagination.js",
                                              "require":  "./scb-pagination/scb-pagination.js"
@@ -414,5 +422,5 @@
                                                         },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "8ACAE0EACE17B5D625FC0363C8E877B27149AFEA5AF1F2FB99D400E6D8D40C09"
+    "buildHash":  "2CA2B0AC9C2FF74C81A20BF63BC2927E22EF16936F4CB2CC36E6ADECED370630"
 }

package/scb-card/scb-card.js

@@ -55,14 +55,14 @@ let i = class extends E {
   /* Beräkna fallback-mått från media-aspect. Används endast om width/height saknas. */
   __calcAspectWH(t) {
     const e = (t || "").trim();
-    if (!e) return { w: 640, h: 360 };
+    if (!e) return { w: 600, h: 400 };
     const n = e.includes("/") ? e.split("/") : e.includes(":") ? e.split(":") : e.includes("x") ? e.split("x") : null;
     if (n && n.length === 2) {
       const o = Number(n[0]), p = Number(n[1]);
       if (o > 0 && p > 0) return { w: o, h: p };
     }
     const c = Number(e);
-    return isFinite(c) && c > 0 ? { w: 1e3, h: Math.round(1e3 / c) } : { w: 640, h: 360 };
+    return isFinite(c) && c > 0 ? { w: 1e3, h: Math.round(1e3 / c) } : { w: 600, h: 400 };
   }
   __noWrapText(t) {
     return (t ?? "").replace(/ /g, " ").replace(/-/g, "‑");
@@ -114,7 +114,7 @@ let i = class extends E {
       let e = Number(this.mediaWidth) || 0, n = Number(this.mediaHeight) || 0;
       const c = (this.mediaAspect || "").trim();
       if (!e || !n) {
-        const h = this.__calcAspectWH(c || "16/9");
+        const h = this.__calcAspectWH(c || "3/2");
         e || (e = h.w), n || (n = h.h);
       }
       const o = `aspect-ratio:${c || `${e}/${n}`};`, p = this.mediaPlaceholder ? "has-ph" : "";
@@ -435,7 +435,7 @@ i.styles = H`
       padding: var(--scb-card-focus-ring-gap, 4px);
       --scb-card-horizontal-media-max: 176px;
       --scb-card-horizontal-media-min: 96px;
-      --scb-card-horizontal-media-aspect: 16 / 9;
+      --scb-card-horizontal-media-aspect: 3 / 2;
 
       margin-block-start: var(--scb-card-spacing-block-start, 0);
       margin-block-end: var(--scb-card-spacing-block-end, 0);
@@ -783,6 +783,7 @@ i.styles = H`
     }
     .header md-icon {
       flex: 0 0 auto;
+      align-self: start;
     }
 
     .sub-label {
@@ -839,7 +840,7 @@ i.styles = H`
     .scb-card.horizontal .media img {
       margin: 0;
       object-fit: var(--scb-card-media-fit, cover);
-      aspect-ratio: var(--scb-card-horizontal-media-aspect, 16 / 9);
+      aspect-ratio: var(--scb-card-horizontal-media-aspect, 3 / 2);
       inline-size: 100%;
       block-size: auto;
     }
@@ -878,7 +879,7 @@ i.styles = H`
       .scb-card.dynamic-direction .media img {
         margin: 0;
         object-fit: var(--scb-card-media-fit, cover);
-        aspect-ratio: var(--scb-card-horizontal-media-aspect, 16 / 9);
+        aspect-ratio: var(--scb-card-horizontal-media-aspect, 3 / 2);
         inline-size: 100%;
         block-size: auto;
       }

package/scb-gallery-grid/scb-gallery-grid.d.ts

@@ -0,0 +1,20 @@
+import { LitElement } from 'lit';
+export declare class ScbGalleryGrid extends LitElement {
+    #private;
+    variant: 'default' | 'masonry';
+    enableClickCarousel: boolean;
+    private overlayOpen;
+    private overlayIndex;
+    private overlayImages;
+    static styles: import('lit').CSSResult;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    protected firstUpdated(): void;
+    protected updated(changed: Map<string, unknown>): void;
+    render(): import('lit-html').TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'scb-gallery-grid': ScbGalleryGrid;
+    }
+}