scb-wc-test 0.1.70 → 0.1.72

package/all.js

@@ -43,6 +43,7 @@ import './mvc/components/scb-menu/scb-menu.js';
 import './mvc/components/scb-menu/scb-sub-menu.js';
 import './mvc/components/scb-notification/scb-notification.js';
 import './mvc/components/scb-notification-card/scb-notification-card.js';
+import './mvc/components/scb-pagination/scb-pagination.js';
 import './mvc/components/scb-progress-indicator/scb-progress-indicator.js';
 import './mvc/components/scb-radio-button/scb-radio-button.js';
 import './mvc/components/scb-radio-button/scb-radio-group.js';
@@ -105,6 +106,7 @@ import './scb-menu/scb-menu.js';
 import './scb-menu/scb-sub-menu.js';
 import './scb-notification/scb-notification.js';
 import './scb-notification-card/scb-notification-card.js';
+import './scb-pagination/scb-pagination.js';
 import './scb-progress-indicator/scb-progress-indicator.js';
 import './scb-radio-button/scb-radio-button.js';
 import './scb-radio-button/scb-radio-group.js';

package/index.d.ts

@@ -40,6 +40,7 @@ export * from './scb-menu/scb-menu';
 export * from './scb-menu/scb-sub-menu';
 export * from './scb-notification/scb-notification';
 export * from './scb-notification-card/scb-notification-card';
+export * from './scb-pagination/scb-pagination';
 export * from './scb-progress-indicator/scb-progress-indicator';
 export * from './scb-radio-button/scb-radio-button';
 export * from './scb-radio-button/scb-radio-group';

package/index.js

@@ -8,13 +8,13 @@ import { SCBBreadcrumb as n } from "./scb-breadcrumb/scb-breadcrumb.js";
 import { ScbButton as C } from "./scb-button/scb-button.js";
 import { ScbCalendarCard as l } from "./scb-calendar-card/scb-calendar-card.js";
 import { ScbCard as D } from "./scb-card/scb-card.js";
-import { ScbCheckboxGroup as w } from "./scb-checkbox/scb-checkbox-group.js";
+import { ScbCheckboxGroup as g } from "./scb-checkbox/scb-checkbox-group.js";
 import { ScbCheckbox as s } from "./scb-checkbox/scb-checkbox.js";
 import { ScbChip as H } from "./scb-chip/scb-chip.js";
 import { ScbDialog as k } from "./scb-dialog/scb-dialog.js";
 import { ScbDivider as y } from "./scb-divider/scb-divider.js";
-import { ScbDrawerItem as L } from "./scb-drawer/scb-drawer-item.js";
-import { ScbDrawerSection as P } from "./scb-drawer/scb-drawer-section.js";
+import { ScbDrawerItem as P } from "./scb-drawer/scb-drawer-item.js";
+import { ScbDrawerSection as M } from "./scb-drawer/scb-drawer-section.js";
 import { ScbDrawer as N } from "./scb-drawer/scb-drawer.js";
 import { ScbSubDrawer as z } from "./scb-drawer/scb-sub-drawer.js";
 import { ScbFactCardContent as U } from "./scb-fact-card/scb-fact-card-content.js";
@@ -35,27 +35,28 @@ import { ScbKeyFigureCard as nr } from "./scb-keyfigure-card/scb-keyfigure-card.
 import { ScbLink as Cr } from "./scb-link/scb-link.js";
 import { ScbListItem as lr } from "./scb-list/scb-list-item.js";
 import { ScbList as Dr } from "./scb-list/scb-list.js";
-import { ScbMenuItem as wr } from "./scb-menu/scb-menu-item.js";
+import { ScbMenuItem as gr } from "./scb-menu/scb-menu-item.js";
 import { ScbMenu as sr } from "./scb-menu/scb-menu.js";
 import { ScbSubMenu as Hr } from "./scb-menu/scb-sub-menu.js";
 import { ScbNotification as kr } from "./scb-notification/scb-notification.js";
 import { ScbNotificationCard as yr } from "./scb-notification-card/scb-notification-card.js";
-import { ScbProgressIndicator as Lr } from "./scb-progress-indicator/scb-progress-indicator.js";
-import { ScbRadioButton as Pr } from "./scb-radio-button/scb-radio-button.js";
-import { ScbRadioGroup as Nr } from "./scb-radio-button/scb-radio-group.js";
-import { ScbSearch as zr } from "./scb-search/scb-search.js";
-import { ScbSegmentedButton as Ur } from "./scb-segmented-button/scb-segmented-button.js";
-import { ScbSegmentedItem as qr } from "./scb-segmented-button/scb-segmented-item.js";
-import { ScbSnackbar as Jr } from "./scb-snackbar/scb-snackbar.js";
-import { ScbStatusPill as Qr } from "./scb-status-pill/scb-status-pill.js";
-import { ScbSwitch as Wr } from "./scb-switch/scb-switch.js";
-import { ScbPrimaryTab as Yr } from "./scb-tabs/scb-primary-tab.js";
-import { ScbSecondaryTab as _r } from "./scb-tabs/scb-secondary-tab.js";
-import { ScbTabs as ro } from "./scb-tabs/scb-tabs.js";
-import { ScbTextField2 as eo } from "./scb-textfield/scb-textfield.js";
-import { ScbTocItem as co } from "./scb-toc/scb-toc-item.js";
-import { ScbToc as So } from "./scb-toc/scb-toc.js";
-import { ScbTooltip as po } from "./scb-tooltip/scb-tooltip.js";
+import { ScbPagination as Pr } from "./scb-pagination/scb-pagination.js";
+import { ScbProgressIndicator as Mr } from "./scb-progress-indicator/scb-progress-indicator.js";
+import { ScbRadioButton as Nr } from "./scb-radio-button/scb-radio-button.js";
+import { ScbRadioGroup as zr } from "./scb-radio-button/scb-radio-group.js";
+import { ScbSearch as Ur } from "./scb-search/scb-search.js";
+import { ScbSegmentedButton as qr } from "./scb-segmented-button/scb-segmented-button.js";
+import { ScbSegmentedItem as Jr } from "./scb-segmented-button/scb-segmented-item.js";
+import { ScbSnackbar as Qr } from "./scb-snackbar/scb-snackbar.js";
+import { ScbStatusPill as Wr } from "./scb-status-pill/scb-status-pill.js";
+import { ScbSwitch as Yr } from "./scb-switch/scb-switch.js";
+import { ScbPrimaryTab as _r } from "./scb-tabs/scb-primary-tab.js";
+import { ScbSecondaryTab as ro } from "./scb-tabs/scb-secondary-tab.js";
+import { ScbTabs as eo } from "./scb-tabs/scb-tabs.js";
+import { ScbTextField2 as co } from "./scb-textfield/scb-textfield.js";
+import { ScbTocItem as So } from "./scb-toc/scb-toc-item.js";
+import { ScbToc as po } from "./scb-toc/scb-toc.js";
+import { ScbTooltip as fo } from "./scb-tooltip/scb-tooltip.js";
 export {
   n as SCBBreadcrumb,
   i as SCBBreadcrumbItem,
@@ -68,13 +69,13 @@ export {
   l as ScbCalendarCard,
   D as ScbCard,
   s as ScbCheckbox,
-  w as ScbCheckboxGroup,
+  g as ScbCheckboxGroup,
   H as ScbChip,
   k as ScbDialog,
   y as ScbDivider,
   N as ScbDrawer,
-  L as ScbDrawerItem,
-  P as ScbDrawerSection,
+  P as ScbDrawerItem,
+  M as ScbDrawerSection,
   q as ScbFactCard,
   U as ScbFactCardContent,
   Q as ScbFooter,
@@ -93,26 +94,27 @@ export {
   Dr as ScbList,
   lr as ScbListItem,
   sr as ScbMenu,
-  wr as ScbMenuItem,
+  gr as ScbMenuItem,
   kr as ScbNotification,
   yr as ScbNotificationCard,
-  Yr as ScbPrimaryTab,
-  Lr as ScbProgressIndicator,
-  Pr as ScbRadioButton,
-  Nr as ScbRadioGroup,
-  zr as ScbSearch,
-  _r as ScbSecondaryTab,
-  Ur as ScbSegmentedButton,
-  qr as ScbSegmentedItem,
-  Jr as ScbSnackbar,
+  Pr as ScbPagination,
+  _r as ScbPrimaryTab,
+  Mr as ScbProgressIndicator,
+  Nr as ScbRadioButton,
+  zr as ScbRadioGroup,
+  Ur as ScbSearch,
+  ro as ScbSecondaryTab,
+  qr as ScbSegmentedButton,
+  Jr as ScbSegmentedItem,
+  Qr as ScbSnackbar,
   _ as ScbStack,
-  Qr as ScbStatusPill,
+  Wr as ScbStatusPill,
   z as ScbSubDrawer,
   Hr as ScbSubMenu,
-  Wr as ScbSwitch,
-  ro as ScbTabs,
-  eo as ScbTextField2,
-  So as ScbToc,
-  co as ScbTocItem,
-  po as ScbTooltip
+  Yr as ScbSwitch,
+  eo as ScbTabs,
+  co as ScbTextField2,
+  po as ScbToc,
+  So as ScbTocItem,
+  fo as ScbTooltip
 };

package/mvc/components/all.js

@@ -40,6 +40,7 @@ import './scb-menu/scb-menu-item.js';
 import './scb-menu/scb-sub-menu.js';
 import './scb-notification-card/scb-notification-card.js';
 import './scb-notification/scb-notification.js';
+import './scb-pagination/scb-pagination.js';
 import './scb-progress-indicator/scb-progress-indicator.js';
 import './scb-radio-button/scb-radio-button.js';
 import './scb-radio-button/scb-radio-group.js';

package/mvc/components/scb-app-bar/scb-app-bar.js

@@ -1,4 +1,4 @@
-import{a as h,n as d,i as c,x as r,t as g}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-search/scb-search.js";import"../scb-avatar/scb-avatar.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";import"../scb-list/scb-list.js";import"../scb-list/scb-list-item.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(i,e,t){try{customElements.get(i)||s(i,e,t)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,p=(a,s,i,e)=>{for(var t=e>1?void 0:e?f(s,i):s,n=a.length-1,o;n>=0;n--)(o=a[n])&&(t=(e?o(s,i,t):o(t))||t);return e&&t&&m(s,i,t),t};let l=class extends c{constructor(){super(...arguments),this.title="App title",this.type="default",this.position="default",this.searchSupportingText=""}handleAvatarSlotChange(a){a.target.assignedElements({flatten:!0}).forEach(e=>{e.tagName==="SCB-AVATAR"&&e.setAttribute("size","small")})}render(){switch(this.type){case"small-flexible":return r`
+import{a as h,n as d,i as c,x as r,t as g}from"../../vendor/vendor.js";import"../scb-icon-button/scb-icon-button.js";import"../scb-search/scb-search.js";import"../scb-avatar/scb-avatar.js";import"../../vendor/preload-helper.js";import"../../vendor/vendor-material.js";import"../scb-tooltip/scb-tooltip.js";import"../scb-button/scb-button.js";import"../scb-list/scb-list.js";import"../scb-list/scb-list-item.js";(function(){try{var a=typeof globalThis<"u"?globalThis:window;if(!a.__scb_ce_guard_installed__){a.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(i,e,t){try{customElements.get(i)||s(i,e,t)}catch(o){var n=String(o||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var m=Object.defineProperty,f=Object.getOwnPropertyDescriptor,p=(a,s,i,e)=>{for(var t=e>1?void 0:e?f(s,i):s,n=a.length-1,o;n>=0;n--)(o=a[n])&&(t=(e?o(s,i,t):o(t))||t);return e&&t&&m(s,i,t),t};let l=class extends c{constructor(){super(...arguments),this.title="",this.type="default",this.position="default",this.searchSupportingText=""}handleAvatarSlotChange(a){a.target.assignedElements({flatten:!0}).forEach(e=>{e.tagName==="SCB-AVATAR"&&e.setAttribute("size","small")})}render(){switch(this.type){case"small-flexible":return r`
                     <header class="small-flexible ${this.position=="bottom"?"position-bottom":this.position=="top"?"position-top":""}" role="banner" aria-label="Small app bar">
                         <div class="leading">
                             <slot name="leading"></slot>
@@ -151,4 +151,8 @@ import{a as h,n as d,i as c,x as r,t as g}from"../../vendor/vendor.js";import"..
                 display: flex;
                 align-items: center;
             }
+            .leading {
+                display: flex;
+                align-items: center;
+            }
         `];p([d({type:String})],l.prototype,"title",2);p([d({type:String})],l.prototype,"type",2);p([d({type:String,reflect:!0})],l.prototype,"position",2);p([d({type:String,attribute:"search-supporting-text"})],l.prototype,"searchSupportingText",2);l=p([g("scb-app-bar")],l);

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

@@ -1,43 +1,72 @@
-import{a as c,n,i as p,x as u,t as b}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 a=customElements.define.bind(customElements);customElements.define=function(i,r,t){try{customElements.get(i)||a(i,r,t)}catch(o){var l=String(o||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw o}}}}catch{}})();var v=Object.defineProperty,h=Object.getOwnPropertyDescriptor,d=(e,a,i,r)=>{for(var t=r>1?void 0:r?h(a,i):a,l=e.length-1,o;l>=0;l--)(o=e[l])&&(t=(r?o(a,i,t):o(t))||t);return r&&t&&v(a,i,t),t};let s=class extends p{constructor(){super(...arguments),this.value="",this.label="",this.disabled=!1,this.variant="dot"}updated(){}render(){let e=this.value;!isNaN(Number(this.value))&&this.value.length>4&&(e=this.value.slice(0,4)+"+");const a=this.variant==="value"&&!this.value?"badge-value-empty":"";return this.variant==="dot"&&(e=""),u`
-      <div class="badge-content"
-        .value=${this.value}
-        .label=${this.label}
-        ?disabled=${this.disabled}
-      >
-        <div class="badge ${a}">${e}</div>
+import{a as c,n as l,i as b,x as h,t as p}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 s=customElements.define.bind(customElements);customElements.define=function(t,a,o){try{customElements.get(t)||s(t,a,o)}catch(d){var n=String(d||"");if(n.indexOf("already been used")===-1&&n.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var g=Object.defineProperty,u=Object.getOwnPropertyDescriptor,r=(e,s,t,a)=>{for(var o=a>1?void 0:a?u(s,t):s,n=e.length-1,d;n>=0;n--)(d=e[n])&&(o=(a?d(s,t,o):d(o))||o);return a&&o&&g(s,t,o),o};let i=class extends b{constructor(){super(...arguments),this._slotClickHandler=e=>{const s=this.shadowRoot?.querySelector("slot"),t=e.target;t&&t!==s&&t.dispatchEvent(new CustomEvent("hide-badge",{bubbles:!0,composed:!0}))},this.autoHide=!1,this.position="relative",this.positionTop=0,this.positionRight=12,this.value="",this.label="",this.hidden=!1,this.variant="dot",this._badgeVisible=!0,this._onHideBadge=()=>{this._badgeVisible=!1,this.requestUpdate()}}firstUpdated(){const e=this.shadowRoot?.querySelector("slot");this.autoHide&&e&&e.addEventListener("click",this._slotClickHandler)}updated(){const e=this.shadowRoot?.querySelector("slot");e&&(this.autoHide?e.addEventListener("click",this._slotClickHandler):e.removeEventListener("click",this._slotClickHandler))}connectedCallback(){super.connectedCallback(),this.addEventListener("hide-badge",this._onHideBadge)}disconnectedCallback(){this.removeEventListener("hide-badge",this._onHideBadge),super.disconnectedCallback()}render(){this.style.setProperty("--scb-badge-absolute-top",this.positionTop+"px"),this.style.setProperty("--scb-badge-absolute-right",this.positionRight+"px");let e=this.value;!isNaN(Number(this.value))&&this.value.length>4&&(e=this.value.slice(0,4)+"+");const s=this.variant==="value"&&!this.value?"badge-value-empty":"",t=this._badgeVisible?"":"badge--hide",a=this.label||(this.variant==="dot"?"Indikator":`Märke: ${e}`);return h`
+      <div class="badge-content">
         <slot></slot>
+        <div 
+          class="badge ${s} ${t}"
+          role="status"
+          aria-label="${this.variant==="dot",a}"
+          aria-hidden="${this.variant==="dot"&&!this.label?"true":"false"}">${this.variant==="dot"?"":e}</div>
       </div>
-    `}};s.styles=c`
+    `}};i.styles=c`
     :host {
-        --scb-badge-top: 0;
-        --scb-badge-right: 12px;
       display: block;
       position: relative;
       width: fit-content;
+      --scb-badge-font-size: var(--scale-01);
+      --scb-badge-line-height: 100%;
+      --scb-badge-relative-gap: 0px;
+      --scb-badge-background-color: var(--md-sys-color-error);
+      --scb-badge-color: var(--md-sys-color-on-error);
+      --scb-badge-width: 8px;
+      --scb-badge-height: 8px;
+    }
+    :host([variant="value"]) .badge {
+      width: fit-content;
+      padding: 6px;
+    }
+    :host([variant="value"]) .badge.badge-value-empty{
+      width: var(--scb-badge-width);
+      padding: var(--spacing-2);
+    }
+    :host([hidden]) .badge {
+      display: none;
+    }
+    .badge {
+      transition: transform 0.25s cubic-bezier(.4,2,.6,1), opacity 0.18s linear;
+      will-change: transform, opacity;
+    }
+    .badge--hide {
+      opacity: 0;
+      transform: scale(1.3);
+      pointer-events: none;
     }
-  :host([variant="value"]) .badge {
-    width: fit-content;
-    padding: 6px;
-  }
-  :host([variant="value"]) .badge.badge-value-empty{
-    width: 8px;
-    padding: 4px;
-  }
     .badge{
-        background-color: var(--md-sys-color-error);
-        color: var(--md-sys-color-on-error);
-        font-size: 12px;
-        line-height: 100%; /* 150% */
-        letter-spacing: var(--md-sys-typescale-label-medium-tracking);
-        border-radius: 9999px;
-        display: flex;
-        align-items: center;
-        justify-content: center;
-        width: 8px;
-        height: 8px;
-        position: absolute;
-        top: var(--scb-badge-top);
-        left: calc(100% - var(--scb-badge-right));
-        white-space: nowrap;
-    }
-  `;d([n({type:String,reflect:!0})],s.prototype,"value",2);d([n({type:String,reflect:!0})],s.prototype,"label",2);d([n({type:Boolean,reflect:!0})],s.prototype,"disabled",2);d([n({type:String,reflect:!0})],s.prototype,"variant",2);s=d([b("scb-badge")],s);
+      background-color: var(--scb-badge-background-color);
+      color: var(--scb-badge-color);
+      font-size: var(--scb-badge-font-size);
+      font-weight: var(--weight-semibold);
+      line-height: var(--scb-badge-line-height);
+      letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+      border-radius: var(--md-sys-shape-corner-full);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: var(--scb-badge-width);
+      height: var(--scb-badge-height);
+      position: absolute;
+      top: var(--scb-badge-absolute-top);
+      left: calc(100% - var(--scb-badge-absolute-right));
+      white-space: nowrap;
+    }
+    :host([position="relative"]) .badge {
+      position: relative;
+      top: unset;
+      left: unset;
+    }
+    :host([position="relative"]) .badge-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      gap: var(--scb-badge-relative-gap);
+    }
+  `;r([l({type:Boolean,reflect:!0,attribute:"auto-hide"})],i.prototype,"autoHide",2);r([l({type:String,reflect:!0})],i.prototype,"position",2);r([l({type:Number,attribute:"position-top"})],i.prototype,"positionTop",2);r([l({type:Number,attribute:"position-right"})],i.prototype,"positionRight",2);r([l({type:String,reflect:!0})],i.prototype,"value",2);r([l({type:String,reflect:!0})],i.prototype,"label",2);r([l({type:Boolean,reflect:!0})],i.prototype,"hidden",2);r([l({type:String,reflect:!0})],i.prototype,"variant",2);i=r([p("scb-badge")],i);

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

@@ -0,0 +1,175 @@
+import{a as g,n as d,i as b,x as s,t as h}from"../../vendor/vendor.js";import"../scb-link/scb-link.js";import"../scb-button/scb-button.js";import"../scb-icon-button/scb-icon-button.js";import"../../vendor/vendor-material.js";import"../../vendor/preload-helper.js";import"../scb-tooltip/scb-tooltip.js";(function(){try{var p=typeof globalThis<"u"?globalThis:window;if(!p.__scb_ce_guard_installed__){p.__scb_ce_guard_installed__=!0;var e=customElements.define.bind(customElements);customElements.define=function(n,i,r){try{customElements.get(n)||e(n,i,r)}catch(a){var o=String(a||"");if(o.indexOf("already been used")===-1&&o.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var u=Object.defineProperty,v=Object.getOwnPropertyDescriptor,c=(p,e,n,i)=>{for(var r=i>1?void 0:i?v(e,n):e,o=p.length-1,a;o>=0;o--)(a=p[o])&&(r=(i?a(e,n,r):a(r))||r);return i&&r&&u(e,n,r),r};let l=class extends b{constructor(){super(...arguments),this.variant="icon-text",this.page=1,this.totalPages=0,this.pagingHref="/products?page=",this.paginationAriaLabel="Paginering",this.currentAriaLabel="Nuvarande sida, ",this.pagingNumberAriaLabel="Gå till sida ",this.isNarrow=window.innerWidth<=768,this._onResize=()=>{this.isNarrow=window.innerWidth<=768}}_prevPage(){this.page>1&&this.page--,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:this.page}}))}_nextPage(){this.page<this.totalPages&&this.page++,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:this.page}}))}connectedCallback(){super.connectedCallback(),window.addEventListener("resize",this._onResize),this._onResize()}disconnectedCallback(){super.disconnectedCallback(),window.removeEventListener("resize",this._onResize)}render(){if(this.totalPages===0)return null;const p=this.variant?`${this.variant.toLowerCase()}`:"",e=[],{page:n,totalPages:i}=this,r=window.innerWidth<=768,o=r?1:2,a=t=>t===n?s`
+        <li>
+            <span
+            class="page-number active"
+            aria-current="page"
+            aria-label="${this.currentAriaLabel} ${t}"
+            >${t}</span>
+        </li>
+        `:s`
+        <li>
+            <scb-link
+                class="page-number${t===n?" active":""}"
+                @click=${()=>{this.page=t,this.dispatchEvent(new CustomEvent("page-change",{detail:{page:t}}))}}
+                aria-current=${t===n?"page":void 0}
+                aria-label="${this.pagingNumberAriaLabel} ${t}"
+                href=${this.pagingHref}${t}
+                ?disabled=${t===n}>${t}
+            </scb-link>
+        </li>
+    `;if(i<=8)for(let t=1;t<=i;t++)e.push(a(t));else if(e.push(a(1)),n<=4&&!r){for(let t=2;t<=5;t++)e.push(a(t));i>6?(e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),e.push(a(i))):i===6&&e.push(a(i))}else if(n<=3&&r){for(let t=2;t<=3;t++)e.push(a(t));i>4?(e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),e.push(a(i))):i===4&&e.push(a(i))}else if(n>=i-(o+1)){e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);for(let t=i-o*2;t<=i;t++)t>1&&e.push(a(t))}else{e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`);for(let t=n-o;t<=n+o;t++)t>1&&t<i&&e.push(a(t));e.push(s`<li><span class="ellipsis" aria-hidden="true">…</span></li>`),e.push(a(i))}return r?s`      
+         <nav aria-label="${this.paginationAriaLabel}" class="pagination ${p}">
+            <div class="pagination-row">
+                <div class="prev">
+                    ${this.variant==="icon"?s`<scb-icon-button icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page===1} aria-label="Föregående sida"></scb-icon-button>`:s`<scb-button variant="text" label="Föregående" icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page===1} aria-label="Föregående sida"></scb-button>`}       
+                </div>
+                <ol>
+                    ${e}
+                </ol>
+            </div>
+            <div class="next">
+            ${this.variant==="icon"?s`<scb-icon-button icon="chevron_right" @click=${this._nextPage} ?disabled=${this.page===this.totalPages} aria-label="Nästa sida"></scb-icon-button>`:s`<scb-button variant="text" label="Nästa" icon="chevron_right" iconPosition="right" @click=${this._nextPage} ?disabled=${this.page===this.totalPages} aria-label="Nästa sida" trailing-icon></scb-button>`}
+            </div>
+        </nav>
+      `:s`
+        <nav aria-label="${this.paginationAriaLabel}" class="pagination ${p}">
+            <div class="pagination-row">
+                <div class="prev">
+                 ${this.variant==="icon"?s`<scb-icon-button icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page===1} aria-label="Föregående sida"></scb-icon-button>`:s`<scb-button variant="text" label="Föregående" icon="chevron_left" @click=${this._prevPage} ?disabled=${this.page===1} aria-label="Föregående sida"></scb-button>`}
+                </div>
+                <ol>
+                    ${e}
+                </ol>
+                <div class="next">
+                    ${this.variant==="icon"?s`<scb-icon-button icon="chevron_right" @click=${this._nextPage} ?disabled=${this.page===this.totalPages} aria-label="Nästa sida"></scb-icon-button>`:s`<scb-button variant="text" label="Nästa" icon="chevron_right" iconPosition="right" @click=${this._nextPage} ?disabled=${this.page===this.totalPages} aria-label="Nästa sida" trailing-icon></scb-button>`}
+                </div>
+            </div>
+        </nav>
+      `}};l.styles=[g`
+    :host .pagination {
+        --md-text-button-label-text-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-pressed-state-layer-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-focus-label-text-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-hover-label-text-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-pressed-label-text-color: var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-label-text-weight: var(--weight-regular, 400);
+        --md-text-button-label-text-line-height: var(--md-sys-typescale-body-medium-line-height, 24px);
+        --md-text-button-label-text-size: var(--md-sys-typescale-body-medium-size, 16px);
+        --md-text-button-icon-color : var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-focus-icon-color : var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-hover-icon-color : var(--md-sys-color-on-surface, #0F0865);
+        --md-text-button-pressed-icon-color : var(--md-sys-color-on-surface, #0F0865);
+        --scb-link-decoration: none;
+        --scb-link-color: var(--md-sys-color-on-surface, #0F0865);
+
+        scb-link.page-number a {
+            cursor: pointer;
+            text-decoration: none;
+            display: inline-flex;
+        }
+    }
+
+    .pagination {
+        width: 100%;
+        display: flex;
+        flex-direction: column;
+        gap: 0;
+    }
+    .pagination-row {
+        width: 100%;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        gap: 4px;
+    }
+    .pagination-row .prev {
+        display: flex;
+        justify-content: flex-start;
+        width: auto;
+    }
+    .pagination-row ol {
+        width: auto;
+        display: flex;
+        flex-direction: row;
+        justify-content: flex-start; 
+        gap: 4px;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+    .pagination-row ol li {
+        min-width: 40px;
+        min-height: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+    .pagination-row .next {
+        display: flex;
+        justify-content: flex-start;
+        align-items: center; 
+        width: auto;
+        margin-top: 0;      
+    }
+    scb-link.page-number a {
+        cursor: pointer;
+        text-decoration: none;
+        display: inline-flex;
+    }
+    .page-number.active {
+        display: inline-flex;
+        align-items: center;
+        justify-content: center;
+        border-radius: 50%;
+        background: var(--md-sys-color-primary, #1F44FF);
+        color: var(--md-sys-color-on-primary, #FFF);
+        text-align: center;
+        width: 40px;
+        height: 40px;
+    }
+    .page-number.active {
+        font-family: var(--brand-font, 'Inter', sans-serif);
+    }
+    .ellipsis {
+        margin: 0 4px;
+        color: #888;
+        user-select: none;
+        pointer-events: none;
+    }
+    scb-button[disabled] {
+        opacity: 0.5;
+        pointer-events: none;
+      }
+
+@media (max-width: 768px) {
+
+    .pagination .prev {
+        display: flex;
+        justify-content: flex-start;
+    }
+    .pagination .next {
+        width: 100%;
+        margin-top: 8px;
+    }
+ }
+
+@media (max-width: 390px) {
+    .pagination-row {
+        flex-direction: column;
+        gap: 0;
+    }
+    .pagination-row .prev {
+        width: 100%;
+        margin-bottom: 8px;
+        align-items: center;
+    }
+    .pagination-row ol {
+        width: 100%;
+        align-items: center;
+    }
+    .pagination-row .next {
+        width: 100%;
+        margin-top: 8px;
+    }
+  }
+`];c([d({type:String})],l.prototype,"variant",2);c([d({type:Number})],l.prototype,"page",2);c([d({type:Number,attribute:"total-pages"})],l.prototype,"totalPages",2);c([d({type:String,attribute:"paging-href"})],l.prototype,"pagingHref",2);c([d({type:String,attribute:"pagination-aria-label"})],l.prototype,"paginationAriaLabel",2);c([d({type:String,attribute:"current-aria-label"})],l.prototype,"currentAriaLabel",2);c([d({type:String,attribute:"paging-number-aria-label"})],l.prototype,"pagingNumberAriaLabel",2);c([d({type:Boolean})],l.prototype,"isNarrow",2);l=c([h("scb-pagination")],l);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.70",
+    "version":  "0.1.72",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -226,6 +226,10 @@
                                                     "import":  "./scb-notification-card/scb-notification-card.js",
                                                     "require":  "./scb-notification-card/scb-notification-card.js"
                                                 },
+                    "./scb-pagination":  {
+                                             "import":  "./scb-pagination/scb-pagination.js",
+                                             "require":  "./scb-pagination/scb-pagination.js"
+                                         },
                     "./scb-progress-indicator":  {
                                                      "import":  "./scb-progress-indicator/scb-progress-indicator.js",
                                                      "require":  "./scb-progress-indicator/scb-progress-indicator.js"
@@ -292,5 +296,5 @@
                                       },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "24ECE43A6671F3197386F295DD01218859A336BAAD7DC1D81CADEFBF56001DA1"
+    "buildHash":  "33CE97F08BBD09532DCCF9A27161C746EE8DD54CC4DB0581E0FFCFE28A6BE144"
 }

package/scb-app-bar/scb-app-bar.js

@@ -10,7 +10,7 @@ var m = Object.defineProperty, v = Object.getOwnPropertyDescriptor, l = (n, a, o
 };
 let i = class extends c {
   constructor() {
-    super(...arguments), this.title = "App title", this.type = "default", this.position = "default", this.searchSupportingText = "";
+    super(...arguments), this.title = "", this.type = "default", this.position = "default", this.searchSupportingText = "";
   }
   handleAvatarSlotChange(n) {
     n.target.assignedElements({ flatten: !0 }).forEach((e) => {
@@ -186,6 +186,10 @@ i.styles = [
                 display: flex;
                 align-items: center;
             }
+            .leading {
+                display: flex;
+                align-items: center;
+            }
         `
 ];
 l([

package/scb-badge/scb-badge.d.ts

@@ -4,11 +4,21 @@ import { LitElement } from 'lit';
  * @slot - Innehåll som badgen placeras på (t.ex. ikon, text)
  */
 export declare class ScbBadge extends LitElement {
+    private _slotClickHandler;
+    autoHide: boolean;
+    position: 'absolute' | 'relative';
+    positionTop: number;
+    positionRight: number;
     value: string;
     label: string;
-    disabled: boolean;
+    hidden: boolean;
     variant: 'dot' | 'value';
-    updated(): void;
     static styles: import('lit').CSSResult;
+    firstUpdated(): void;
+    private _badgeVisible;
+    updated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onHideBadge;
     render(): import('lit-html').TemplateResult<1>;
 }