scb-wc-test 0.1.350 → 0.1.352

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';
@@ -83,6 +85,7 @@ import './mvc/components/scb-textfield/scb-textfield.js';
 import './mvc/components/scb-toc/scb-toc-item.js';
 import './mvc/components/scb-toc/scb-toc.js';
 import './mvc/components/scb-tooltip/scb-tooltip.js';
+import './mvc/components/scb-vignette/scb-vignette.js';
 import './mvc/components/scb-viz/scb-viz-actions-runtime.js';
 import './mvc/components/scb-viz/scb-viz-print-runtime.js';
 import './mvc/components/scb-viz/scb-viz-series-differentiation-registry.js';
@@ -123,6 +126,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 +151,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';
@@ -175,6 +180,7 @@ import './scb-textfield/scb-textfield.js';
 import './scb-toc/scb-toc-item.js';
 import './scb-toc/scb-toc.js';
 import './scb-tooltip/scb-tooltip.js';
+import './scb-vignette/scb-vignette.js';
 import './scb-viz/scb-viz-actions-runtime.js';
 import './scb-viz/scb-viz-print-runtime.js';
 import './scb-viz/scb-viz-series-differentiation-registry.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';
@@ -79,6 +81,7 @@ export * from './scb-textfield/scb-textfield';
 export * from './scb-toc/scb-toc-item';
 export * from './scb-toc/scb-toc';
 export * from './scb-tooltip/scb-tooltip';
+export * from './scb-vignette/scb-vignette';
 export * from './scb-viz/scb-viz-actions-runtime';
 export * from './scb-viz/scb-viz-print-runtime';
 export * from './scb-viz/scb-viz-series-differentiation-registry';

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";
@@ -79,4 +81,5 @@ import "./scb-textfield/scb-textfield.js";
 import "./scb-toc/scb-toc-item.js";
 import "./scb-toc/scb-toc.js";
 import "./scb-tooltip/scb-tooltip.js";
+import "./scb-vignette/scb-vignette.js";
 import "./scb-viz/scb-viz.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';
@@ -79,6 +81,7 @@ import './scb-textfield/scb-textfield.js';
 import './scb-toc/scb-toc.js';
 import './scb-toc/scb-toc-item.js';
 import './scb-tooltip/scb-tooltip.js';
+import './scb-vignette/scb-vignette.js';
 import './scb-viz/scb-viz.js';
 import './scb-viz/scb-viz-actions-runtime.js';
 import './scb-viz/scb-viz-print-runtime.js';

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/mvc/components/scb-vignette/scb-vignette.js

@@ -0,0 +1,30 @@
+import{a as g,n as c,i as l,x as h,t as b}from"../../vendor/vendor.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(s,n,i){try{customElements.get(s)||e(s,n,i)}catch(o){var a=String(o||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var v=Object.defineProperty,d=Object.getOwnPropertyDescriptor,p=(t,e,s,n)=>{for(var i=n>1?void 0:n?d(e,s):e,a=t.length-1,o;a>=0;a--)(o=t[a])&&(i=(n?o(e,s,i):o(i))||i);return n&&i&&v(e,s,i),i};let r=class extends l{constructor(){super(...arguments),this.label="",this.spacing=void 0,this.spacingTop=void 0,this.spacingBottom=void 0,this.spacingLeft=void 0,this.spacingRight=void 0}updated(t){super.updated(t),(t.has("spacing")||t.has("spacingTop")||t.has("spacingBottom")||t.has("spacingLeft")||t.has("spacingRight"))&&this.applySpacing()}mapSpacingToken(t){if(!t)return;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}applySpacing(){const t=this.mapSpacingToken(this.spacing),e=this.mapSpacingToken(this.spacingTop)??t,s=this.mapSpacingToken(this.spacingBottom)??t,n=this.mapSpacingToken(this.spacingLeft),i=this.mapSpacingToken(this.spacingRight);e?this.style.setProperty("--scb-vignette-spacing-block-start",e):this.style.removeProperty("--scb-vignette-spacing-block-start"),s?this.style.setProperty("--scb-vignette-spacing-block-end",s):this.style.removeProperty("--scb-vignette-spacing-block-end"),n?this.style.setProperty("--scb-vignette-spacing-inline-start",n):this.style.removeProperty("--scb-vignette-spacing-inline-start"),i?this.style.setProperty("--scb-vignette-spacing-inline-end",i):this.style.removeProperty("--scb-vignette-spacing-inline-end")}render(){return h`
+      <div class="vignette">
+        <p>${this.label}</p>
+      </div>
+    `}};r.styles=g`
+    :host {
+      display: block;
+      margin-block-start: var(--scb-vignette-spacing-block-start, 0);
+      margin-block-end: var(--scb-vignette-spacing-block-end, 0);
+      margin-inline-start: var(--scb-vignette-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-vignette-spacing-inline-end, 0);
+    }
+
+    .vignette {
+      padding: 4px 8px;
+      border-radius: 8px;
+      border: 1px solid #484473;
+      width: fit-content;
+      color: #484473;
+    }
+
+    .vignette p {
+      font-size: 14px;
+      font-style: normal;
+      font-weight: 550;
+      line-height: 22px;
+      margin: 0;
+      color: var(--md-sys-color-on-surface);
+    }
+  `;p([c({type:String})],r.prototype,"label",2);p([c({type:String,reflect:!0})],r.prototype,"spacing",2);p([c({type:String,attribute:"spacing-top",reflect:!0})],r.prototype,"spacingTop",2);p([c({type:String,attribute:"spacing-bottom",reflect:!0})],r.prototype,"spacingBottom",2);p([c({type:String,attribute:"spacing-left",reflect:!0})],r.prototype,"spacingLeft",2);p([c({type:String,attribute:"spacing-right",reflect:!0})],r.prototype,"spacingRight",2);r=p([b("scb-vignette")],r);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.350",
+    "version":  "0.1.352",
     "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"
@@ -388,6 +396,10 @@
                                           "import":  "./scb-tooltip/scb-tooltip.js",
                                           "require":  "./scb-tooltip/scb-tooltip.js"
                                       },
+                    "./scb-vignette":  {
+                                           "import":  "./scb-vignette/scb-vignette.js",
+                                           "require":  "./scb-vignette/scb-vignette.js"
+                                       },
                     "./scb-viz":  {
                                       "import":  "./scb-viz/scb-viz.js",
                                       "require":  "./scb-viz/scb-viz.js"
@@ -414,5 +426,5 @@
                                                         },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "05102215406A454D0DADF69752C8A9BEB1E891DB5FB7585282AA83071E8736B3"
+    "buildHash":  "B73507616BFC413BD85E78BCEEAD144DF989B1B457AD9F6AD678E76661A0D5A1"
 }

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;
+    }
+}

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

@@ -0,0 +1,263 @@
+import { css as S, LitElement as A, html as k } from "lit";
+import { property as E, state as w, customElement as T } from "lit/decorators.js";
+import "../scb-horizontal-scroller/scb-horizontal-scroller.js";
+import "../scb-overlay/scb-overlay.js";
+var W = Object.defineProperty, $ = Object.getOwnPropertyDescriptor, I = (e) => {
+  throw TypeError(e);
+}, d = (e, t, a, r) => {
+  for (var s = r > 1 ? void 0 : r ? $(t, a) : t, h = e.length - 1, f; h >= 0; h--)
+    (f = e[h]) && (s = (r ? f(t, a, s) : f(s)) || s);
+  return r && s && W(t, a, s), s;
+}, _ = (e, t, a) => t.has(e) || I("Cannot " + a), l = (e, t, a) => (_(e, t, "read from private field"), t.get(e)), n = (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) => (_(e, t, "write to private field"), t.set(e, a), a), o = (e, t, a) => (_(e, t, "access private method"), a), g, y, x, u, m, b, i, C, z, p, L, O, v;
+let c = class extends A {
+  constructor() {
+    super(...arguments), n(this, i), this.variant = "default", this.enableClickCarousel = !0, this.overlayOpen = !1, this.overlayIndex = 0, this.overlayImages = [], n(this, g, []), n(this, y, (e) => {
+      e.key === "Escape" && this.overlayOpen && l(this, v).call(this);
+    }), n(this, x, () => {
+      o(this, i, p).call(this);
+    }), n(this, u, (e) => {
+      if (!this.enableClickCarousel) return;
+      const t = e.currentTarget;
+      t instanceof HTMLElement && t.setAttribute("data-scb-gallery-hover", "");
+    }), n(this, m, (e) => {
+      if (!this.enableClickCarousel) return;
+      const t = e.currentTarget;
+      t instanceof HTMLElement && t.removeAttribute("data-scb-gallery-hover");
+    }), n(this, b, (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) && o(this, i, O).call(this, r);
+    }), n(this, v, () => {
+      this.overlayOpen = !1;
+    });
+  }
+  connectedCallback() {
+    super.connectedCallback(), window.addEventListener("keydown", l(this, y));
+  }
+  disconnectedCallback() {
+    window.removeEventListener("keydown", l(this, y)), o(this, i, C).call(this), super.disconnectedCallback();
+  }
+  firstUpdated() {
+    o(this, i, p).call(this);
+  }
+  updated(e) {
+    e.has("enableClickCarousel") && (this.enableClickCarousel || l(this, v).call(this), o(this, i, p).call(this));
+  }
+  render() {
+    return k`
+      <div class="gallery">
+        <slot @slotchange=${l(this, x)}></slot>
+      </div>
+      ${this.overlayOpen && this.enableClickCarousel ? k`
+            <scb-overlay open aria-label="Bildkarusell" @scb-overlay-dismiss=${l(this, v)}>
+              <div class="overlay-dialog">
+                <scb-horizontal-scroller show-scrollbar class="overlay-carousel" variant="standard" width="100%" content-flex internal-gap="0">
+                  ${o(this, i, L).call(this).map(
+      (e, t) => k`
+                      <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>
+          ` : ""}
+    `;
+  }
+};
+g = /* @__PURE__ */ new WeakMap();
+y = /* @__PURE__ */ new WeakMap();
+x = /* @__PURE__ */ new WeakMap();
+u = /* @__PURE__ */ new WeakMap();
+m = /* @__PURE__ */ new WeakMap();
+b = /* @__PURE__ */ new WeakMap();
+i = /* @__PURE__ */ new WeakSet();
+C = function() {
+  l(this, g).forEach((e) => {
+    e.removeEventListener("pointerenter", l(this, u)), e.removeEventListener("pointerleave", l(this, m)), e.removeEventListener("click", l(this, b)), e.removeAttribute("data-scb-gallery-hover"), e.removeAttribute("data-scb-gallery-clickable"), e.removeAttribute("data-scb-gallery-slide-index");
+  }), M(this, g, []);
+};
+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() {
+  o(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, g, t);
+  const a = [];
+  t.forEach((r) => {
+    if (!this.enableClickCarousel)
+      return;
+    const s = o(this, i, z).call(this, r);
+    if (!s)
+      return;
+    r.addEventListener("pointerenter", l(this, u)), r.addEventListener("pointerleave", l(this, m));
+    const h = a.length;
+    a.push(s), r.setAttribute("data-scb-gallery-clickable", ""), r.setAttribute("data-scb-gallery-slide-index", String(h)), r.addEventListener("click", l(this, b));
+  }), this.overlayImages = a;
+};
+L = 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)
+  ];
+};
+O = 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;
+};
+v = /* @__PURE__ */ new WeakMap();
+c.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;
+    }
+  `;
+d([
+  E({ type: String, reflect: !0 })
+], c.prototype, "variant", 2);
+d([
+  E({ type: Boolean, reflect: !0, attribute: "enable-carousel" })
+], c.prototype, "enableClickCarousel", 2);
+d([
+  w()
+], c.prototype, "overlayOpen", 2);
+d([
+  w()
+], c.prototype, "overlayIndex", 2);
+d([
+  w()
+], c.prototype, "overlayImages", 2);
+c = d([
+  T("scb-gallery-grid")
+], c);
+export {
+  c as ScbGalleryGrid
+};