scb-wc-test 0.1.69 → 0.1.71

package/all.js

@@ -5,6 +5,7 @@ import './mvc/components/scb-accordion/scb-accordion-item.js';
 import './mvc/components/scb-accordion/scb-accordion.js';
 import './mvc/components/scb-app-bar/scb-app-bar.js';
 import './mvc/components/scb-avatar/scb-avatar.js';
+import './mvc/components/scb-badge/scb-badge.js';
 import './mvc/components/scb-breadcrumb/scb-breadcrumb-item.js';
 import './mvc/components/scb-breadcrumb/scb-breadcrumb.js';
 import './mvc/components/scb-button/scb-button.js';
@@ -66,6 +67,7 @@ import './scb-accordion/scb-accordion-item.js';
 import './scb-accordion/scb-accordion.js';
 import './scb-app-bar/scb-app-bar.js';
 import './scb-avatar/scb-avatar.js';
+import './scb-badge/scb-badge.js';
 import './scb-breadcrumb/scb-breadcrumb-item.js';
 import './scb-breadcrumb/scb-breadcrumb.js';
 import './scb-button/scb-button.js';

package/index.d.ts

@@ -2,6 +2,7 @@ export * from './scb-accordion/scb-accordion-item';
 export * from './scb-accordion/scb-accordion';
 export * from './scb-app-bar/scb-app-bar';
 export * from './scb-avatar/scb-avatar';
+export * from './scb-badge/scb-badge';
 export * from './scb-breadcrumb/scb-breadcrumb-item';
 export * from './scb-breadcrumb/scb-breadcrumb';
 export * from './scb-button/scb-button';

package/index.js

@@ -2,115 +2,117 @@ import { ScbAccordionItem as e } from "./scb-accordion/scb-accordion-item.js";
 import { ScbAccordion as c } from "./scb-accordion/scb-accordion.js";
 import { ScbAppBar as S } from "./scb-app-bar/scb-app-bar.js";
 import { ScbAvatar as p } from "./scb-avatar/scb-avatar.js";
-import { SCBBreadcrumbItem as f } from "./scb-breadcrumb/scb-breadcrumb-item.js";
-import { SCBBreadcrumb as i } from "./scb-breadcrumb/scb-breadcrumb.js";
-import { ScbButton as n } from "./scb-button/scb-button.js";
-import { ScbCalendarCard as C } from "./scb-calendar-card/scb-calendar-card.js";
-import { ScbCard as l } from "./scb-card/scb-card.js";
-import { ScbCheckboxGroup as D } from "./scb-checkbox/scb-checkbox-group.js";
-import { ScbCheckbox as w } from "./scb-checkbox/scb-checkbox.js";
-import { ScbChip as F } from "./scb-chip/scb-chip.js";
-import { ScbDialog as g } from "./scb-dialog/scb-dialog.js";
-import { ScbDivider as k } from "./scb-divider/scb-divider.js";
-import { ScbDrawerItem as y } from "./scb-drawer/scb-drawer-item.js";
-import { ScbDrawerSection as L } from "./scb-drawer/scb-drawer-section.js";
-import { ScbDrawer as P } from "./scb-drawer/scb-drawer.js";
-import { ScbSubDrawer as N } from "./scb-drawer/scb-sub-drawer.js";
-import { ScbFactCardContent as z } from "./scb-fact-card/scb-fact-card-content.js";
-import { ScbFactCard as U } from "./scb-fact-card/scb-fact-card.js";
-import { ScbFooterSection as q } from "./scb-footer/scb-footer-section.js";
-import { ScbFooter as J } from "./scb-footer/scb-footer.js";
-import { ScbGridItem as Q } from "./scb-grid/scb-grid-item.js";
-import { ScbGrid as W } from "./scb-grid/scb-grid.js";
-import { ScbStack as Y } from "./scb-grid/scb-stack.js";
-import { ScbHeaderDrawerGroup as _ } from "./scb-header/scb-header-drawer-group.js";
-import { ScbHeaderDrawerItem as rr } from "./scb-header/scb-header-drawer-item.js";
-import { ScbHeaderTab as er } from "./scb-header/scb-header-tab.js";
-import { ScbHeaderUtility as cr } from "./scb-header/scb-header-utility.js";
-import { ScbHeader as Sr } from "./scb-header/scb-header.js";
-import { ScbHorizontalScroller as pr } from "./scb-horizontal-scroller/scb-horizontal-scroller.js";
-import { ScbIconButton as fr } from "./scb-icon-button/scb-icon-button.js";
-import { ScbKeyFigureCard as ir } from "./scb-keyfigure-card/scb-keyfigure-card.js";
-import { ScbLink as nr } from "./scb-link/scb-link.js";
-import { ScbListItem as Cr } from "./scb-list/scb-list-item.js";
-import { ScbList as lr } from "./scb-list/scb-list.js";
-import { ScbMenuItem as Dr } from "./scb-menu/scb-menu-item.js";
-import { ScbMenu as wr } from "./scb-menu/scb-menu.js";
-import { ScbSubMenu as Fr } from "./scb-menu/scb-sub-menu.js";
-import { ScbNotification as gr } from "./scb-notification/scb-notification.js";
-import { ScbNotificationCard as kr } from "./scb-notification-card/scb-notification-card.js";
-import { ScbProgressIndicator as yr } from "./scb-progress-indicator/scb-progress-indicator.js";
-import { ScbRadioButton as Lr } from "./scb-radio-button/scb-radio-button.js";
-import { ScbRadioGroup as Pr } from "./scb-radio-button/scb-radio-group.js";
-import { ScbSearch as Nr } from "./scb-search/scb-search.js";
-import { ScbSegmentedButton as zr } from "./scb-segmented-button/scb-segmented-button.js";
-import { ScbSegmentedItem as Ur } from "./scb-segmented-button/scb-segmented-item.js";
-import { ScbSnackbar as qr } from "./scb-snackbar/scb-snackbar.js";
-import { ScbStatusPill as Jr } from "./scb-status-pill/scb-status-pill.js";
-import { ScbSwitch as Qr } from "./scb-switch/scb-switch.js";
-import { ScbPrimaryTab as Wr } from "./scb-tabs/scb-primary-tab.js";
-import { ScbSecondaryTab as Yr } from "./scb-tabs/scb-secondary-tab.js";
-import { ScbTabs as _r } from "./scb-tabs/scb-tabs.js";
-import { ScbTextField2 as ro } from "./scb-textfield/scb-textfield.js";
-import { ScbTocItem as eo } from "./scb-toc/scb-toc-item.js";
-import { ScbToc as co } from "./scb-toc/scb-toc.js";
-import { ScbTooltip as So } from "./scb-tooltip/scb-tooltip.js";
+import { ScbBadge as f } from "./scb-badge/scb-badge.js";
+import { SCBBreadcrumbItem as i } from "./scb-breadcrumb/scb-breadcrumb-item.js";
+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 { 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 { 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";
+import { ScbFactCard as q } from "./scb-fact-card/scb-fact-card.js";
+import { ScbFooterSection as J } from "./scb-footer/scb-footer-section.js";
+import { ScbFooter as Q } from "./scb-footer/scb-footer.js";
+import { ScbGridItem as W } from "./scb-grid/scb-grid-item.js";
+import { ScbGrid as Y } from "./scb-grid/scb-grid.js";
+import { ScbStack as _ } from "./scb-grid/scb-stack.js";
+import { ScbHeaderDrawerGroup as rr } from "./scb-header/scb-header-drawer-group.js";
+import { ScbHeaderDrawerItem as er } from "./scb-header/scb-header-drawer-item.js";
+import { ScbHeaderTab as cr } from "./scb-header/scb-header-tab.js";
+import { ScbHeaderUtility as Sr } from "./scb-header/scb-header-utility.js";
+import { ScbHeader as pr } from "./scb-header/scb-header.js";
+import { ScbHorizontalScroller as fr } from "./scb-horizontal-scroller/scb-horizontal-scroller.js";
+import { ScbIconButton as ir } from "./scb-icon-button/scb-icon-button.js";
+import { ScbKeyFigureCard as nr } from "./scb-keyfigure-card/scb-keyfigure-card.js";
+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 { 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";
 export {
-  i as SCBBreadcrumb,
-  f as SCBBreadcrumbItem,
+  n as SCBBreadcrumb,
+  i as SCBBreadcrumbItem,
   c as ScbAccordion,
   e as ScbAccordionItem,
   S as ScbAppBar,
   p as ScbAvatar,
-  n as ScbButton,
-  C as ScbCalendarCard,
-  l as ScbCard,
-  w as ScbCheckbox,
-  D as ScbCheckboxGroup,
-  F as ScbChip,
-  g as ScbDialog,
-  k as ScbDivider,
-  P as ScbDrawer,
-  y as ScbDrawerItem,
-  L as ScbDrawerSection,
-  U as ScbFactCard,
-  z as ScbFactCardContent,
-  J as ScbFooter,
-  q as ScbFooterSection,
-  W as ScbGrid,
-  Q as ScbGridItem,
-  Sr as ScbHeader,
-  _ as ScbHeaderDrawerGroup,
-  rr as ScbHeaderDrawerItem,
-  er as ScbHeaderTab,
-  cr as ScbHeaderUtility,
-  pr as ScbHorizontalScroller,
-  fr as ScbIconButton,
-  ir as ScbKeyFigureCard,
-  nr as ScbLink,
-  lr as ScbList,
-  Cr as ScbListItem,
-  wr as ScbMenu,
-  Dr as ScbMenuItem,
-  gr as ScbNotification,
-  kr as ScbNotificationCard,
-  Wr as ScbPrimaryTab,
-  yr as ScbProgressIndicator,
-  Lr as ScbRadioButton,
-  Pr as ScbRadioGroup,
-  Nr as ScbSearch,
-  Yr as ScbSecondaryTab,
-  zr as ScbSegmentedButton,
-  Ur as ScbSegmentedItem,
-  qr as ScbSnackbar,
-  Y as ScbStack,
-  Jr as ScbStatusPill,
-  N as ScbSubDrawer,
-  Fr as ScbSubMenu,
-  Qr as ScbSwitch,
-  _r as ScbTabs,
-  ro as ScbTextField2,
-  co as ScbToc,
-  eo as ScbTocItem,
-  So as ScbTooltip
+  f as ScbBadge,
+  C as ScbButton,
+  l as ScbCalendarCard,
+  D as ScbCard,
+  s as ScbCheckbox,
+  w as ScbCheckboxGroup,
+  H as ScbChip,
+  k as ScbDialog,
+  y as ScbDivider,
+  N as ScbDrawer,
+  L as ScbDrawerItem,
+  P as ScbDrawerSection,
+  q as ScbFactCard,
+  U as ScbFactCardContent,
+  Q as ScbFooter,
+  J as ScbFooterSection,
+  Y as ScbGrid,
+  W as ScbGridItem,
+  pr as ScbHeader,
+  rr as ScbHeaderDrawerGroup,
+  er as ScbHeaderDrawerItem,
+  cr as ScbHeaderTab,
+  Sr as ScbHeaderUtility,
+  fr as ScbHorizontalScroller,
+  ir as ScbIconButton,
+  nr as ScbKeyFigureCard,
+  Cr as ScbLink,
+  Dr as ScbList,
+  lr as ScbListItem,
+  sr as ScbMenu,
+  wr 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,
+  _ as ScbStack,
+  Qr 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
 };

package/mvc/components/all.js

@@ -2,6 +2,7 @@ import './scb-accordion/scb-accordion.js';
 import './scb-accordion/scb-accordion-item.js';
 import './scb-app-bar/scb-app-bar.js';
 import './scb-avatar/scb-avatar.js';
+import './scb-badge/scb-badge.js';
 import './scb-breadcrumb/scb-breadcrumb.js';
 import './scb-breadcrumb/scb-breadcrumb-item.js';
 import './scb-button/scb-button.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

@@ -0,0 +1,72 @@
+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>
+    `}};i.styles=c`
+    :host {
+      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;
+    }
+    .badge{
+      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/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.69",
+    "version":  "0.1.71",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -74,6 +74,10 @@
                                          "import":  "./scb-avatar/scb-avatar.js",
                                          "require":  "./scb-avatar/scb-avatar.js"
                                      },
+                    "./scb-badge":  {
+                                        "import":  "./scb-badge/scb-badge.js",
+                                        "require":  "./scb-badge/scb-badge.js"
+                                    },
                     "./scb-breadcrumb":  {
                                              "import":  "./scb-breadcrumb/scb-breadcrumb.js",
                                              "require":  "./scb-breadcrumb/scb-breadcrumb.js"
@@ -288,5 +292,5 @@
                                       },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "FE9B59510D9ECD28B7D24E5FB48881AD15C3F106C90BCCCB8F207A27AA59E61B"
+    "buildHash":  "4AFCE4286FCF8A151F1ACB56B2D0ABAE1670938C70F8E5DADA1BEA57F7034084"
 }

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

@@ -0,0 +1,24 @@
+import { LitElement } from 'lit';
+/**
+ * En badge-komponent baserad på Material 3 Web Component Badge.
+ * @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;
+    hidden: boolean;
+    variant: 'dot' | 'value';
+    static styles: import('lit').CSSResult;
+    firstUpdated(): void;
+    private _badgeVisible;
+    updated(): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private _onHideBadge;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/scb-badge/scb-badge.js

@@ -0,0 +1,143 @@
+import { css as c, LitElement as b, html as h } from "lit";
+import { property as r, customElement as p } from "lit/decorators.js";
+var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, o = (e, t, a, s) => {
+  for (var l = s > 1 ? void 0 : s ? u(t, a) : t, n = e.length - 1, d; n >= 0; n--)
+    (d = e[n]) && (l = (s ? d(t, a, l) : d(l)) || l);
+  return s && l && g(t, a, l), l;
+};
+let i = class extends b {
+  constructor() {
+    super(...arguments), this._slotClickHandler = (e) => {
+      var s;
+      const t = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot"), a = e.target;
+      a && a !== t && a.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() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot");
+    this.autoHide && e && e.addEventListener("click", this._slotClickHandler);
+  }
+  updated() {
+    var t;
+    const e = (t = this.shadowRoot) == null ? void 0 : t.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 t = this.variant === "value" && !this.value ? "badge-value-empty" : "", a = this._badgeVisible ? "" : "badge--hide", s = this.label || (this.variant === "dot" ? "Indikator" : `Märke: ${e}`);
+    return h`
+      <div class="badge-content">
+        <slot></slot>
+        <div 
+          class="badge ${t} ${a}"
+          role="status"
+          aria-label="${this.variant === "dot", s}"
+          aria-hidden="${this.variant === "dot" && !this.label ? "true" : "false"}">${this.variant === "dot" ? "" : e}</div>
+      </div>
+    `;
+  }
+};
+i.styles = c`
+    :host {
+      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;
+    }
+    .badge{
+      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);
+    }
+  `;
+o([
+  r({ type: Boolean, reflect: !0, attribute: "auto-hide" })
+], i.prototype, "autoHide", 2);
+o([
+  r({ type: String, reflect: !0 })
+], i.prototype, "position", 2);
+o([
+  r({ type: Number, attribute: "position-top" })
+], i.prototype, "positionTop", 2);
+o([
+  r({ type: Number, attribute: "position-right" })
+], i.prototype, "positionRight", 2);
+o([
+  r({ type: String, reflect: !0 })
+], i.prototype, "value", 2);
+o([
+  r({ type: String, reflect: !0 })
+], i.prototype, "label", 2);
+o([
+  r({ type: Boolean, reflect: !0 })
+], i.prototype, "hidden", 2);
+o([
+  r({ type: String, reflect: !0 })
+], i.prototype, "variant", 2);
+i = o([
+  p("scb-badge")
+], i);
+export {
+  i as ScbBadge
+};