scb-wc 0.1.2 → 0.1.4

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

@@ -0,0 +1,98 @@
+import{_ as h,b,g as v,h as s,y}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as e}from"../../vendor/decorate.js";import{n as w,t as d}from"../../vendor/assertClassBrand.js";import"./scb-grid-item.js";import"./scb-stack.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var t=customElements.define.bind(customElements);customElements.define=function(i,n,l){try{customElements.get(i)||t(i,n,l)}catch(g){var c=String(g||"");if(c.indexOf("already been used")===-1&&c.indexOf("NotSupportedError")===-1)throw g}}}}catch{}})();var o,m,r=(o=new WeakSet,m=class extends h{constructor(...t){super(...t),w(this,o),this.colsCompact=4,this.colsMedium=8,this.colsExpanded=12,this.gap="",this.rowGap="",this.columnGap="",this.alignItems="stretch",this.justifyItems="stretch",this.paddingInline="",this.paddingBlock="",this.maxWidth="",this.autoRows=""}firstUpdated(){d(o,this,u).call(this)}updated(){d(o,this,u).call(this)}mapSpacingToken(t){if(!t)return;const i=String(t).trim();return/^\d+$/.test(i)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(i,10)))})`:i}parseGapShorthand(t){if(!t)return{};const i=t.trim().split(/\s+/);if(i.length===1){const n=this.mapSpacingToken(i[0]);return{row:n,col:n}}return{row:this.mapSpacingToken(i[0]),col:this.mapSpacingToken(i[1])}}render(){return y`<div class="grid"><slot></slot></div>`}},m.styles=b`
+  :host {
+    box-sizing: border-box;
+    display: block;
+    max-width: var(--scb-grid-max-width, 1440px);
+    margin-inline: auto;
+    padding-inline: var(--scb-grid-padding-inline, 0);
+    padding-block:  var(--scb-grid-padding-block, 0);
+    container-type: inline-size;
+  }
+
+  .grid {
+    display: grid;
+    width: 100%;
+    grid-auto-rows: var(--scb-grid-auto-rows, auto);
+
+    /* Longhands med fallback till --scb-grid-gap och sedan token-default */
+    row-gap:    var(--scb-grid-row-gap,    var(--scb-grid-gap, var(--spacing-7, 24px)));
+    column-gap: var(--scb-grid-column-gap, var(--scb-grid-gap, var(--spacing-7, 24px)));
+
+    grid-auto-flow: row dense;
+    grid-auto-rows: var(--scb-grid-auto-rows, auto);
+    align-items:   var(--scb-grid-align-items, stretch);
+    justify-items: var(--scb-grid-justify-items, stretch);
+
+    /* Compact baseline */
+    grid-template-columns: repeat(var(--scb-grid-cols-compact, 4), minmax(0, 1fr));
+  }
+
+  .grid > slot { display: contents; }
+
+  /* Kolumn-span + rad-span (compact) */
+  .grid ::slotted(*) {
+    min-width: 0;
+    min-height: 0;
+    grid-column: span min(
+      max(1, var(--col-span-compact, var(--col-span, var(--scb-grid-cols-compact, 4)))) ,
+      var(--scb-grid-cols-compact, 4)
+    );
+    grid-row: var(--row-rule-compact, var(--row-rule, auto));
+  }
+
+  /* Utan container queries -> media queries */
+  @supports not (container-type: inline-size) {
+    @media (min-width: 600px) {
+      .grid { grid-template-columns: repeat(var(--scb-grid-cols-medium, 8), minmax(0, 1fr)); }
+      .grid ::slotted(*) {
+        min-width: 0;
+        min-height: 0;
+        grid-column: span min(
+          max(1, var(--col-span-medium, var(--col-span, var(--scb-grid-cols-medium, 8)))) ,
+          var(--scb-grid-cols-medium, 8)
+        );
+        grid-row: var(--row-rule-medium, var(--row-rule, auto));
+      }
+    }
+    @media (min-width: 840px) {
+      .grid { grid-template-columns: repeat(var(--scb-grid-cols-expanded, 12), minmax(0, 1fr)); }
+      .grid ::slotted(*) {
+        min-width: 0;
+        min-height: 0;
+        grid-column: span min(
+          max(1, var(--col-span-expanded, var(--col-span, var(--scb-grid-cols-expanded, 12)))) ,
+          var(--scb-grid-cols-expanded, 12)
+        );
+        grid-row: var(--row-rule-expanded, var(--row-rule, auto));
+      }
+    }
+  }
+
+  /* Med container queries */
+  @supports (container-type: inline-size) {
+    @container (min-width: 600px) {
+      .grid { grid-template-columns: repeat(var(--scb-grid-cols-medium, 8), minmax(0, 1fr)); }
+      .grid ::slotted(*) {
+        min-width: 0;
+        min-height: 0;
+        grid-column: span min(
+          max(1, var(--col-span-medium, var(--col-span, var(--scb-grid-cols-medium, 8)))) ,
+          var(--scb-grid-cols-medium, 8)
+        );
+        grid-row: var(--row-rule-medium, var(--row-rule, auto));
+      }
+    }
+    @container (min-width: 840px) {
+      .grid { grid-template-columns: repeat(var(--scb-grid-cols-expanded, 12), minmax(0, 1fr)); }
+      .grid ::slotted(*) {
+        min-width: 0;
+        min-height: 0;
+        grid-column: span min(
+          max(1, var(--col-span-expanded, var(--col-span, var(--scb-grid-cols-expanded, 12)))) ,
+          var(--scb-grid-cols-expanded, 12)
+        );
+        grid-row: var(--row-rule-expanded, var(--row-rule, auto));
+      }
+    }
+  }
+`,m);function u(){this.style.setProperty("--scb-grid-cols-compact",String(this.colsCompact)),this.style.setProperty("--scb-grid-cols-medium",String(this.colsMedium)),this.style.setProperty("--scb-grid-cols-expanded",String(this.colsExpanded));const a="var(--spacing-7, 24px)",t=this.parseGapShorthand(this.gap),i=this.mapSpacingToken(this.rowGap)??t.row??a,n=this.mapSpacingToken(this.columnGap)??t.col??a;this.style.setProperty("--scb-grid-row-gap",i),this.style.setProperty("--scb-grid-column-gap",n),this.style.setProperty("--scb-grid-gap",`${i} ${n}`),this.style.setProperty("--scb-grid-align-items",this.alignItems),this.style.setProperty("--scb-grid-justify-items",this.justifyItems);const l=this.mapSpacingToken(this.paddingInline),c=this.mapSpacingToken(this.paddingBlock);d(o,this,p).call(this,"--scb-grid-max-width",this.maxWidth),d(o,this,p).call(this,"--scb-grid-padding-inline",l??""),d(o,this,p).call(this,"--scb-grid-padding-block",c??""),d(o,this,p).call(this,"--scb-grid-auto-rows",this.autoRows)}function p(a,t){t?this.style.setProperty(a,t):this.style.removeProperty(a)}e([s({type:Number,attribute:"cols-compact",reflect:!0})],r.prototype,"colsCompact",void 0);e([s({type:Number,attribute:"cols-medium",reflect:!0})],r.prototype,"colsMedium",void 0);e([s({type:Number,attribute:"cols-expanded",reflect:!0})],r.prototype,"colsExpanded",void 0);e([s({type:String,reflect:!0})],r.prototype,"gap",void 0);e([s({type:String,attribute:"row-gap",reflect:!0})],r.prototype,"rowGap",void 0);e([s({type:String,attribute:"column-gap",reflect:!0})],r.prototype,"columnGap",void 0);e([s({type:String,attribute:"align-items",reflect:!0})],r.prototype,"alignItems",void 0);e([s({type:String,attribute:"justify-items",reflect:!0})],r.prototype,"justifyItems",void 0);e([s({type:String,attribute:"padding-inline",reflect:!0})],r.prototype,"paddingInline",void 0);e([s({type:String,attribute:"padding-block",reflect:!0})],r.prototype,"paddingBlock",void 0);e([s({type:String,attribute:"max-width",reflect:!0})],r.prototype,"maxWidth",void 0);e([s({type:String,attribute:"auto-rows",reflect:!0})],r.prototype,"autoRows",void 0);r=e([v("scb-grid")],r);

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

@@ -0,0 +1,33 @@
+import{_ as f,b as y,g as b,h as r,y as g}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t as a}from"../../vendor/decorate.js";import{n as m,t as h}from"../../vendor/assertClassBrand.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(t,n,l){try{customElements.get(t)||e(t,n,l)}catch(d){var o=String(d||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var c,p,s=(c=new WeakSet,p=class extends f{constructor(...e){super(...e),m(this,c),this.direction="column",this.gap="",this.rowGap="",this.columnGap="",this.align="stretch",this.justify="start",this.wrap=!1,this.inline=!1}firstUpdated(){h(c,this,u).call(this)}updated(){h(c,this,u).call(this)}mapSpacingToken(e){if(!e)return;const t=String(e).trim();return/^\d+$/.test(t)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(t,10)))})`:t}parseGapShorthand(e){if(!e)return{};const t=e.trim().split(/\s+/);if(t.length===1){const n=this.mapSpacingToken(t[0]);return{row:n,col:n}}return{row:this.mapSpacingToken(t[0]),col:this.mapSpacingToken(t[1])}}render(){return g`<div class="base"><slot></slot></div>`}},p.styles=y`
+    :host {
+      box-sizing: border-box;
+      display: block;
+      width: auto;
+      max-width: 100%;
+      min-inline-size: 0;
+    }
+
+    /* Inre flexlayout så att gap även fungerar för slottat innehåll */
+    .base {
+      display: var(--scb-stack-display, flex);
+      flex-direction: var(--scb-stack-direction, column);
+
+      /* Longhands med fallback till --scb-stack-gap och token-default */
+      row-gap:    var(--scb-stack-row-gap,    var(--scb-stack-gap, var(--spacing-5, 16px)));
+      column-gap: var(--scb-stack-column-gap, var(--scb-stack-gap, var(--spacing-5, 16px)));
+
+      align-items: var(--scb-stack-align, stretch);
+      justify-content: var(--scb-stack-justify, flex-start);
+      flex-wrap: var(--scb-stack-wrap, nowrap);
+    }
+
+    /* Gör att slotens tilldelade noder blir barn till .base */
+    slot { display: contents; }
+
+    :host([inline]) .base { --scb-stack-display: inline-flex; }
+
+    /* Barnens flex-beteende i row-läge kan styras via variabeln och defaultar till att inte ta full bredd */
+    :host([direction="row"]) ::slotted(*) {
+      flex: var(--scb-stack-item-flex, 0 0 auto);
+    }
+  `,p);function u(){this.style.setProperty("--scb-stack-direction",this.direction);const i="var(--spacing-5, 16px)",e=this.parseGapShorthand(this.gap),t=this.mapSpacingToken(this.rowGap)??e.row??i,n=this.mapSpacingToken(this.columnGap)??e.col??i;this.style.setProperty("--scb-stack-gap",`${t}`),this.style.setProperty("--scb-stack-row-gap",t),this.style.setProperty("--scb-stack-column-gap",n);const l={start:"flex-start",center:"center",end:"flex-end",stretch:"stretch",baseline:"baseline"},o={start:"flex-start",center:"center",end:"flex-end",between:"space-between",around:"space-around",evenly:"space-evenly"};this.style.setProperty("--scb-stack-align",l[this.align]??"stretch"),this.style.setProperty("--scb-stack-justify",o[this.justify]??"flex-start"),this.style.setProperty("--scb-stack-wrap",this.wrap?"wrap":"nowrap")}a([r({type:String,reflect:!0})],s.prototype,"direction",void 0);a([r({type:String,reflect:!0})],s.prototype,"gap",void 0);a([r({type:String,attribute:"row-gap",reflect:!0})],s.prototype,"rowGap",void 0);a([r({type:String,attribute:"column-gap",reflect:!0})],s.prototype,"columnGap",void 0);a([r({type:String,reflect:!0})],s.prototype,"align",void 0);a([r({type:String,reflect:!0})],s.prototype,"justify",void 0);a([r({type:Boolean,reflect:!0})],s.prototype,"wrap",void 0);a([r({type:Boolean,reflect:!0})],s.prototype,"inline",void 0);s=a([b("scb-stack")],s);

package/mvc/components/scb-header/scb-header-menu-group.js

@@ -0,0 +1 @@
+(function(){try{var e=typeof globalThis<"u"?globalThis:window;if(!e.__scb_ce_guard_installed__){e.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(t,r,l){try{customElements.get(t)||s(t,r,l)}catch(n){var i=String(n||"");if(i.indexOf("already been used")===-1&&i.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var c=class extends HTMLElement{get label(){return this.getAttribute("label")??""}set label(e){this.setAttribute("label",e)}get icon(){return this.getAttribute("icon")??void 0}set icon(e){e==null||e===""?this.removeAttribute("icon"):this.setAttribute("icon",e)}connectedCallback(){this.style.display="none"}};customElements.define("scb-header-menu-group",c);

package/mvc/components/scb-header/scb-header-menu-item.js

@@ -0,0 +1,5 @@
+import{_ as u,b as _,g as p,h as s,y as m}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t}from"../../vendor/decorate.js";(function(){try{var r=typeof globalThis<"u"?globalThis:window;if(!r.__scb_ce_guard_installed__){r.__scb_ce_guard_installed__=!0;var o=customElements.define.bind(customElements);customElements.define=function(n,c,l){try{customElements.get(n)||o(n,c,l)}catch(d){var a=String(d||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var i,e=(i=class extends u{constructor(...o){super(...o),this.label="",this.href=""}render(){return m`<slot></slot>`}},i.styles=_`
+    :host {
+      display: none !important;
+    }
+  `,i);t([s({type:String})],e.prototype,"label",void 0);t([s({type:String})],e.prototype,"href",void 0);t([s({type:String})],e.prototype,"icon",void 0);e=t([p("scb-header-menu-item")],e);

package/mvc/components/scb-header/scb-header-tab.js

@@ -0,0 +1,5 @@
+import{_,b,g as p,h as s,y as u}from"../../vendor/vendor.js";import"../../vendor/vendor-lit.js";import{t}from"../../vendor/decorate.js";(function(){try{var r=typeof globalThis<"u"?globalThis:window;if(!r.__scb_ce_guard_installed__){r.__scb_ce_guard_installed__=!0;var a=customElements.define.bind(customElements);customElements.define=function(o,c,l){try{customElements.get(o)||a(o,c,l)}catch(n){var d=String(n||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var i,e=(i=class extends _{constructor(...a){super(...a),this.label="",this.href="",this.drawerId=""}render(){return u`<slot></slot>`}},i.styles=b`
+    :host {
+      display: none !important;
+    }
+  `,i);t([s({type:String})],e.prototype,"label",void 0);t([s({type:String})],e.prototype,"href",void 0);t([s({type:String,attribute:"drawer-id"})],e.prototype,"drawerId",void 0);e=t([p("scb-header-tab")],e);

package/mvc/components/scb-header/scb-header-utility.js

@@ -0,0 +1 @@
+(function(){try{var t=typeof globalThis<"u"?globalThis:window;if(!t.__scb_ce_guard_installed__){t.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(e,l,n){try{customElements.get(e)||s(e,l,n)}catch(i){var r=String(i||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw i}}}}catch{}})();var a=class extends HTMLElement{get label(){return this.getAttribute("label")??""}set label(t){this.setAttribute("label",t)}get href(){return this.getAttribute("href")??"#"}set href(t){this.setAttribute("href",t)}get target(){return this.getAttribute("target")??void 0}set target(t){t==null?this.removeAttribute("target"):this.setAttribute("target",t)}connectedCallback(){this.style.display="none"}};customElements.define("scb-header-utility",a);