scb-wc-test 0.1.199 → 0.1.201

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

@@ -1,13 +1,13 @@
-import{a as c,n,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,o,r){try{customElements.get(t)||s(t,o,r)}catch(d){var l=String(d||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw d}}}}catch{}})();var g=Object.defineProperty,u=Object.getOwnPropertyDescriptor,a=(e,s,t,o)=>{for(var r=o>1?void 0:o?u(s,t):s,l=e.length-1,d;l>=0;l--)(d=e[l])&&(r=(o?d(s,t,r):d(r))||r);return o&&r&&g(s,t,r),r};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.sizing="fit-content",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",o=this.label||(this.variant==="dot"?"Indikator":`Märke: ${e}`);return h`
+import{a as c,n as r,i as p,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(i,n,o){try{customElements.get(i)||e(i,n,o)}catch(l){var d=String(l||"");if(d.indexOf("already been used")===-1&&d.indexOf("NotSupportedError")===-1)throw l}}}}catch{}})();var g=Object.defineProperty,u=Object.getOwnPropertyDescriptor,a=(t,e,i,n)=>{for(var o=n>1?void 0:n?u(e,i):e,d=t.length-1,l;d>=0;d--)(l=t[d])&&(o=(n?l(e,i,o):l(o))||o);return n&&o&&g(e,i,o),o};let s=class extends p{constructor(){super(...arguments),this._slotClickHandler=t=>{const e=this.shadowRoot?.querySelector("slot"),i=t.target;i&&i!==e&&i.dispatchEvent(new CustomEvent("hide-badge",{bubbles:!0,composed:!0}))},this.autoHide=!1,this.sizing="fit-content",this.position="relative",this.positionTop=0,this.positionRight=void 0,this.positionSide="right",this.positionLeft=void 0,this.value="",this.label="",this.hidden=!1,this.variant="dot",this._badgeVisible=!0,this._onHideBadge=()=>{this._badgeVisible=!1,this.requestUpdate()}}firstUpdated(){const t=this.shadowRoot?.querySelector("slot");this.autoHide&&t&&t.addEventListener("click",this._slotClickHandler)}updated(){const t=this.shadowRoot?.querySelector("slot");t&&(this.autoHide?t.addEventListener("click",this._slotClickHandler):t.removeEventListener("click",this._slotClickHandler))}connectedCallback(){super.connectedCallback(),this.addEventListener("hide-badge",this._onHideBadge)}disconnectedCallback(){this.removeEventListener("hide-badge",this._onHideBadge),super.disconnectedCallback()}mapSpacingToken(t){if(t==null)return;if(typeof t=="number"&&!Number.isNaN(t))return`${t}px`;const e=String(t).trim();if(e)return/^\d+$/.test(e)?`var(--spacing-${Math.max(0,Math.min(14,parseInt(e,10)))})`:e}render(){const t=this.mapSpacingToken(this.positionRight)??"var(--spacing-4)",e=this.mapSpacingToken(this.positionLeft)??"var(--spacing-4)",i=this.mapSpacingToken(this.positionTop)??"0px";this.style.setProperty("--scb-badge-absolute-top",i),this.style.setProperty("--scb-badge-absolute-right",t),this.style.setProperty("--scb-badge-absolute-left",e);let n=this.value;!isNaN(Number(this.value))&&this.value.length>4&&(n=this.value.slice(0,4)+"+");const o=this.variant==="value"&&!this.value?"badge-value-empty":"",d=this._badgeVisible?"":"badge--hide",l=this.label||(this.variant==="dot"?"Indikator":`Märke: ${n}`);return h`
       <div class="badge-content">
         <slot></slot>
         <div 
-          class="badge ${s} ${t}"
+          class="badge ${o} ${d}"
           role="status"
-          aria-label="${this.variant==="dot",o}"
-          aria-hidden="${this.variant==="dot"&&!this.label?"true":"false"}">${this.variant==="dot"?"":e}</div>
+          aria-label="${this.variant==="dot",l}"
+          aria-hidden="${this.variant==="dot"&&!this.label?"true":"false"}">${this.variant==="dot"?"":n}</div>
       </div>
-    `}};i.styles=c`
+    `}};s.styles=c`
     :host {
       display: block;
       position: relative;
@@ -61,6 +61,10 @@ import{a as c,n,i as b,x as h,t as p}from"../../vendor/vendor.js";(function(){tr
       left: calc(100% - var(--scb-badge-absolute-right));
       white-space: nowrap;
     }
+    :host([position-side="left"]) .badge {
+      left: var(--scb-badge-absolute-left);
+    }
+
     :host([position="relative"]) .badge {
       position: relative;
       top: unset;
@@ -72,4 +76,4 @@ import{a as c,n,i as b,x as h,t as p}from"../../vendor/vendor.js";(function(){tr
       justify-content: center;
       gap: var(--scb-badge-relative-gap);
     }
-  `;a([n({type:Boolean,reflect:!0,attribute:"auto-hide"})],i.prototype,"autoHide",2);a([n({type:String,reflect:!0})],i.prototype,"sizing",2);a([n({type:String,reflect:!0})],i.prototype,"position",2);a([n({type:Number,attribute:"position-top"})],i.prototype,"positionTop",2);a([n({type:Number,attribute:"position-right"})],i.prototype,"positionRight",2);a([n({type:String,reflect:!0})],i.prototype,"value",2);a([n({type:String,reflect:!0})],i.prototype,"label",2);a([n({type:Boolean,reflect:!0})],i.prototype,"hidden",2);a([n({type:String,reflect:!0})],i.prototype,"variant",2);i=a([p("scb-badge")],i);
+  `;a([r({type:Boolean,reflect:!0,attribute:"auto-hide"})],s.prototype,"autoHide",2);a([r({type:String,reflect:!0})],s.prototype,"sizing",2);a([r({type:String,reflect:!0})],s.prototype,"position",2);a([r({type:String,attribute:"position-top"})],s.prototype,"positionTop",2);a([r({type:String,attribute:"position-right"})],s.prototype,"positionRight",2);a([r({type:String,reflect:!0,attribute:"position-side"})],s.prototype,"positionSide",2);a([r({type:String,attribute:"position-left"})],s.prototype,"positionLeft",2);a([r({type:String,reflect:!0})],s.prototype,"value",2);a([r({type:String,reflect:!0})],s.prototype,"label",2);a([r({type:Boolean,reflect:!0})],s.prototype,"hidden",2);a([r({type:String,reflect:!0})],s.prototype,"variant",2);s=a([b("scb-badge")],s);

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

@@ -1,5 +1,5 @@
 const __vite__mapDeps=(i,m=__vite__mapDeps,d=(m.f||(m.f=["../../vendor/vendor-material.js","../../vendor/vendor.js","../scb-icon-button/scb-icon-button.js","../../vendor/preload-helper.js"])))=>i.map(i=>d[i]);
-import{_ as u}from"../../vendor/preload-helper.js";import{a as h,n as l,r as p,i as b,E as m,x as d,t as _}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 n=customElements.define.bind(customElements);customElements.define=function(i,s,o){try{customElements.get(i)||n(i,s,o)}catch(c){var r=String(c||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,a=(e,n,i,s)=>{for(var o=s>1?void 0:s?f(n,i):n,r=e.length-1,c;r>=0;r--)(c=e[r])&&(o=(s?c(n,i,o):c(o))||o);return s&&o&&g(n,i,o),o};let t=class extends b{constructor(){super(...arguments),this.label="",this.selected=!1,this.noHighlightSelected=!1,this.leadingIcon="",this.itemHref="",this.hasSlotContent=!1,this.expanded=!1,this.__submenuId=`sub-${Math.random().toString(36).slice(2)}`,this.__focusId=`f-${Math.random().toString(36).slice(2)}`,this._toggleExpand=e=>{e&&e.stopPropagation(),this.hasSlotContent&&this.__setExpanded(!this.expanded)},this._onButtonClick=e=>{e.stopPropagation(),this._dispatchSelect(),this._toggleExpand()},this._onLinkClick=()=>{this._dispatchSelect()},this._onKeyDown=e=>{const n=Array.from(this.parentElement?.querySelectorAll("scb-menu-item")||[]),i=n.indexOf(this);switch(e.key){case"ArrowDown":{e.preventDefault(),(n[i+1]||n[0]).shadowRoot?.querySelector(".scb-menu-label-text")?.focus();break}case"ArrowUp":{e.preventDefault(),(n[i-1]||n[n.length-1]).shadowRoot?.querySelector(".scb-menu-label-text")?.focus();break}case"Home":{e.preventDefault(),n[0].shadowRoot?.querySelector(".scb-menu-label-text")?.focus();break}case"End":{e.preventDefault(),n[n.length-1].shadowRoot?.querySelector(".scb-menu-label-text")?.focus();break}}}}get __submenuEl(){return this.renderRoot.querySelector(`#${this.__submenuId}`)}async __ensureDepsLoaded(){t.__rippleLoaded||(await u(()=>import("../../vendor/vendor-material.js").then(e=>e.r),__vite__mapDeps([0,1]),import.meta.url),t.__rippleLoaded=!0),t.__focusRingLoaded||(await u(()=>import("../../vendor/vendor-material.js").then(e=>e.m),__vite__mapDeps([0,1]),import.meta.url),t.__focusRingLoaded=!0),this.leadingIcon&&!t.__iconLoaded&&(await u(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),t.__iconLoaded=!0),this.hasSlotContent&&!t.__iconButtonLoaded&&(await u(()=>import("../scb-icon-button/scb-icon-button.js"),__vite__mapDeps([2,3,1,0]),import.meta.url),t.__iconButtonLoaded=!0)}__syncHasSlotContentFromLightDom(){const e=Array.from(this.children);this.hasSlotContent=e.length>0&&e.every(n=>n.tagName==="SCB-SUB-MENU")}connectedCallback(){super.connectedCallback(),this.__syncHasSlotContentFromLightDom()}_onSlotChange(e){const i=e.target.assignedElements({flatten:!0});this.hasSlotContent=i.length>0&&i.every(s=>s.tagName==="SCB-SUB-MENU")}__setExpanded(e){this.hasSlotContent&&(this.expanded=e,this.dispatchEvent(new CustomEvent("scb-menu-expand",{bubbles:!0,composed:!0,detail:{item:this,expanded:e}})))}_dispatchSelect(){this.dispatchEvent(new CustomEvent("scb-menu-select",{bubbles:!0,composed:!0,detail:{item:this}}))}async firstUpdated(){await this.__ensureDepsLoaded()}updated(e){e.has("leadingIcon")&&this.leadingIcon&&this.__ensureDepsLoaded(),e.has("hasSlotContent")&&this.hasSlotContent&&this.__ensureDepsLoaded(),e.has("expanded")&&this.__applyInert()}__applyInert(){const e=this.__submenuEl;e&&(this.expanded?(e.removeAttribute("inert"),e.setAttribute("aria-hidden","false")):(e.setAttribute("inert",""),e.setAttribute("aria-hidden","true")))}render(){const e=!!this.leadingIcon,n=!!this.itemHref,i=this.hasSlotContent;return d`
+import{_ as u}from"../../vendor/preload-helper.js";import{a as h,n as l,r as p,i as b,E as m,x as d,t as _}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 n=customElements.define.bind(customElements);customElements.define=function(i,s,o){try{customElements.get(i)||n(i,s,o)}catch(c){var r=String(c||"");if(r.indexOf("already been used")===-1&&r.indexOf("NotSupportedError")===-1)throw c}}}}catch{}})();var g=Object.defineProperty,f=Object.getOwnPropertyDescriptor,a=(e,n,i,s)=>{for(var o=s>1?void 0:s?f(n,i):n,r=e.length-1,c;r>=0;r--)(c=e[r])&&(o=(s?c(n,i,o):c(o))||o);return s&&o&&g(n,i,o),o};let t=class extends b{constructor(){super(...arguments),this.label="",this.selected=!1,this.noHighlightSelected=!1,this.leadingIcon="",this.itemHref="",this.hasSlotContent=!1,this.expanded=!1,this.__submenuId=`sub-${Math.random().toString(36).slice(2)}`,this.__focusId=`f-${Math.random().toString(36).slice(2)}`,this._toggleExpand=e=>{e&&e.stopPropagation(),this.hasSlotContent&&this.__setExpanded(!this.expanded)},this._onButtonClick=e=>{e.stopPropagation(),this._dispatchSelect(),this._toggleExpand()},this._onLinkClick=()=>{this._dispatchSelect()},this._onKeyDown=e=>{const n=Array.from(this.closest("scb-sub-menu, scb-menu")?.querySelectorAll("scb-menu-item")||[]),i=n.indexOf(this);switch(e.key){case"ArrowDown":{e.preventDefault(),(n[i+1]||n[0]).shadowRoot?.querySelector(".scb-menu-label-text")?.focus();break}case"ArrowUp":{e.preventDefault(),(n[i-1]||n[n.length-1]).shadowRoot?.querySelector(".scb-menu-label-text")?.focus();break}case"Home":{e.preventDefault(),n[0].shadowRoot?.querySelector(".scb-menu-label-text")?.focus();break}case"End":{e.preventDefault(),n[n.length-1].shadowRoot?.querySelector(".scb-menu-label-text")?.focus();break}}}}get __submenuEl(){return this.renderRoot.querySelector(`#${this.__submenuId}`)}async __ensureDepsLoaded(){t.__rippleLoaded||(await u(()=>import("../../vendor/vendor-material.js").then(e=>e.r),__vite__mapDeps([0,1]),import.meta.url),t.__rippleLoaded=!0),t.__focusRingLoaded||(await u(()=>import("../../vendor/vendor-material.js").then(e=>e.m),__vite__mapDeps([0,1]),import.meta.url),t.__focusRingLoaded=!0),this.leadingIcon&&!t.__iconLoaded&&(await u(()=>import("../../vendor/vendor-material.js").then(e=>e.i),__vite__mapDeps([0,1]),import.meta.url),t.__iconLoaded=!0),this.hasSlotContent&&!t.__iconButtonLoaded&&(await u(()=>import("../scb-icon-button/scb-icon-button.js"),__vite__mapDeps([2,3,1,0]),import.meta.url),t.__iconButtonLoaded=!0)}__syncHasSlotContentFromLightDom(){const e=Array.from(this.children);this.hasSlotContent=e.length>0&&e.every(n=>n.tagName==="SCB-SUB-MENU")}connectedCallback(){super.connectedCallback(),this.__syncHasSlotContentFromLightDom()}_onSlotChange(e){const i=e.target.assignedElements({flatten:!0});this.hasSlotContent=i.length>0&&i.every(s=>s.tagName==="SCB-SUB-MENU")}__setExpanded(e){this.hasSlotContent&&(this.expanded=e,this.dispatchEvent(new CustomEvent("scb-menu-expand",{bubbles:!0,composed:!0,detail:{item:this,expanded:e}})))}_dispatchSelect(){this.dispatchEvent(new CustomEvent("scb-menu-select",{bubbles:!0,composed:!0,detail:{item:this}}))}async firstUpdated(){await this.__ensureDepsLoaded()}updated(e){e.has("leadingIcon")&&this.leadingIcon&&this.__ensureDepsLoaded(),e.has("hasSlotContent")&&this.hasSlotContent&&this.__ensureDepsLoaded(),e.has("expanded")&&this.__applyInert()}__applyInert(){const e=this.__submenuEl;e&&(this.expanded?(e.removeAttribute("inert"),e.setAttribute("aria-hidden","false")):(e.setAttribute("inert",""),e.setAttribute("aria-hidden","true")))}render(){const e=!!this.leadingIcon,n=!!this.itemHref,i=this.hasSlotContent;return d`
       <div class="scb-menu-item">
         <div class="scb-menu-item-label" ?selected=${this.selected} ?no-highlight-selected=${this.noHighlightSelected}>
           ${n?d`

package/mvc/components/scb-status-pill/scb-status-pill.js

@@ -13,6 +13,7 @@ import{a as g,n as o,i as u,x as l,t as d}from"../../vendor/vendor.js";import"..
       align-items: center;
       gap: var(--spacing-3);
       width: fit-content;
+      font-family: var(--brand-font);
 
       margin-block-start: var(--scb-status-pill-spacing-block-start, 0);
       margin-block-end: var(--scb-status-pill-spacing-block-end, 0);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.199",
+    "version":  "0.1.201",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -378,5 +378,5 @@
                                   },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "302E3B547C6F0CD4D8BBF7F2EDA7E16EC37B5D99B109118CBDD69A3C5C0DEF86"
+    "buildHash":  "00AD4846E4EDC1BD6F1BB8D6A01B704FBB514DFDB7FBA1623B29ED48AEF1637E"
 }

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

@@ -8,8 +8,10 @@ export declare class ScbBadge extends LitElement {
     autoHide: boolean;
     sizing: 'fit-content' | 'fit-parent';
     position: 'absolute' | 'relative';
-    positionTop: number;
-    positionRight: number;
+    positionTop: string | number;
+    positionRight: string | undefined;
+    positionSide: 'left' | 'right';
+    positionLeft: string | undefined;
     value: string;
     label: string;
     hidden: boolean;
@@ -21,5 +23,6 @@ export declare class ScbBadge extends LitElement {
     connectedCallback(): void;
     disconnectedCallback(): void;
     private _onHideBadge;
+    private mapSpacingToken;
     render(): import('lit-html').TemplateResult<1>;
 }

package/scb-badge/scb-badge.js

@@ -1,17 +1,17 @@
-import { css as c, LitElement as p, html as b } from "lit";
-import { property as r, customElement as h } from "lit/decorators.js";
-var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, a = (t, e, o, s) => {
-  for (var l = s > 1 ? void 0 : s ? u(e, o) : e, n = t.length - 1, d; n >= 0; n--)
-    (d = t[n]) && (l = (s ? d(e, o, l) : d(l)) || l);
-  return s && l && g(e, o, l), l;
+import { css as p, LitElement as c, html as h } from "lit";
+import { property as a, customElement as b } from "lit/decorators.js";
+var g = Object.defineProperty, u = Object.getOwnPropertyDescriptor, s = (t, e, r, o) => {
+  for (var n = o > 1 ? void 0 : o ? u(e, r) : e, d = t.length - 1, l; d >= 0; d--)
+    (l = t[d]) && (n = (o ? l(e, r, n) : l(n)) || n);
+  return o && n && g(e, r, n), n;
 };
-let i = class extends p {
+let i = class extends c {
   constructor() {
     super(...arguments), this._slotClickHandler = (t) => {
-      var s;
-      const e = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot"), o = t.target;
-      o && o !== e && o.dispatchEvent(new CustomEvent("hide-badge", { bubbles: !0, composed: !0 }));
-    }, this.autoHide = !1, this.sizing = "fit-content", this.position = "relative", this.positionTop = 0, this.positionRight = 12, this.value = "", this.label = "", this.hidden = !1, this.variant = "dot", this._badgeVisible = !0, this._onHideBadge = () => {
+      var o;
+      const e = (o = this.shadowRoot) == null ? void 0 : o.querySelector("slot"), r = t.target;
+      r && r !== e && r.dispatchEvent(new CustomEvent("hide-badge", { bubbles: !0, composed: !0 }));
+    }, this.autoHide = !1, this.sizing = "fit-content", this.position = "relative", this.positionTop = 0, this.positionRight = void 0, this.positionSide = "right", this.positionLeft = void 0, this.value = "", this.label = "", this.hidden = !1, this.variant = "dot", this._badgeVisible = !0, this._onHideBadge = () => {
       this._badgeVisible = !1, this.requestUpdate();
     };
   }
@@ -31,24 +31,32 @@ let i = class extends p {
   disconnectedCallback() {
     this.removeEventListener("hide-badge", this._onHideBadge), super.disconnectedCallback();
   }
+  mapSpacingToken(t) {
+    if (t == null) return;
+    if (typeof t == "number" && !Number.isNaN(t)) return `${t}px`;
+    const e = String(t).trim();
+    if (e)
+      return /^\d+$/.test(e) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(e, 10)))})` : e;
+  }
   render() {
-    this.style.setProperty("--scb-badge-absolute-top", this.positionTop + "px"), this.style.setProperty("--scb-badge-absolute-right", this.positionRight + "px");
-    let t = this.value;
-    !isNaN(Number(this.value)) && this.value.length > 4 && (t = this.value.slice(0, 4) + "+");
-    const e = this.variant === "value" && !this.value ? "badge-value-empty" : "", o = this._badgeVisible ? "" : "badge--hide", s = this.label || (this.variant === "dot" ? "Indikator" : `Märke: ${t}`);
-    return b`
+    const t = this.mapSpacingToken(this.positionRight) ?? "var(--spacing-4)", e = this.mapSpacingToken(this.positionLeft) ?? "var(--spacing-4)", r = this.mapSpacingToken(this.positionTop) ?? "0px";
+    this.style.setProperty("--scb-badge-absolute-top", r), this.style.setProperty("--scb-badge-absolute-right", t), this.style.setProperty("--scb-badge-absolute-left", e);
+    let o = this.value;
+    !isNaN(Number(this.value)) && this.value.length > 4 && (o = this.value.slice(0, 4) + "+");
+    const n = this.variant === "value" && !this.value ? "badge-value-empty" : "", d = this._badgeVisible ? "" : "badge--hide", l = this.label || (this.variant === "dot" ? "Indikator" : `Märke: ${o}`);
+    return h`
       <div class="badge-content">
         <slot></slot>
         <div 
-          class="badge ${e} ${o}"
+          class="badge ${n} ${d}"
           role="status"
-          aria-label="${this.variant === "dot", s}"
-          aria-hidden="${this.variant === "dot" && !this.label ? "true" : "false"}">${this.variant === "dot" ? "" : t}</div>
+          aria-label="${this.variant === "dot", l}"
+          aria-hidden="${this.variant === "dot" && !this.label ? "true" : "false"}">${this.variant === "dot" ? "" : o}</div>
       </div>
     `;
   }
 };
-i.styles = c`
+i.styles = p`
     :host {
       display: block;
       position: relative;
@@ -102,6 +110,10 @@ i.styles = c`
       left: calc(100% - var(--scb-badge-absolute-right));
       white-space: nowrap;
     }
+    :host([position-side="left"]) .badge {
+      left: var(--scb-badge-absolute-left);
+    }
+
     :host([position="relative"]) .badge {
       position: relative;
       top: unset;
@@ -114,35 +126,41 @@ i.styles = c`
       gap: var(--scb-badge-relative-gap);
     }
   `;
-a([
-  r({ type: Boolean, reflect: !0, attribute: "auto-hide" })
+s([
+  a({ type: Boolean, reflect: !0, attribute: "auto-hide" })
 ], i.prototype, "autoHide", 2);
-a([
-  r({ type: String, reflect: !0 })
+s([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "sizing", 2);
-a([
-  r({ type: String, reflect: !0 })
+s([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "position", 2);
-a([
-  r({ type: Number, attribute: "position-top" })
+s([
+  a({ type: String, attribute: "position-top" })
 ], i.prototype, "positionTop", 2);
-a([
-  r({ type: Number, attribute: "position-right" })
+s([
+  a({ type: String, attribute: "position-right" })
 ], i.prototype, "positionRight", 2);
-a([
-  r({ type: String, reflect: !0 })
+s([
+  a({ type: String, reflect: !0, attribute: "position-side" })
+], i.prototype, "positionSide", 2);
+s([
+  a({ type: String, attribute: "position-left" })
+], i.prototype, "positionLeft", 2);
+s([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "value", 2);
-a([
-  r({ type: String, reflect: !0 })
+s([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "label", 2);
-a([
-  r({ type: Boolean, reflect: !0 })
+s([
+  a({ type: Boolean, reflect: !0 })
 ], i.prototype, "hidden", 2);
-a([
-  r({ type: String, reflect: !0 })
+s([
+  a({ type: String, reflect: !0 })
 ], i.prototype, "variant", 2);
-i = a([
-  h("scb-badge")
+i = s([
+  b("scb-badge")
 ], i);
 export {
   i as ScbBadge

package/scb-menu/scb-menu-item.js

@@ -16,7 +16,7 @@ let t = class extends v {
     }, this._onKeyDown = (e) => {
       var s, o, r, c, h, p, b, g, f;
       const n = Array.from(
-        ((s = this.parentElement) == null ? void 0 : s.querySelectorAll("scb-menu-item")) || []
+        ((s = this.closest("scb-sub-menu, scb-menu")) == null ? void 0 : s.querySelectorAll("scb-menu-item")) || []
       ), i = n.indexOf(this);
       switch (e.key) {
         case "ArrowDown": {

package/scb-status-pill/scb-status-pill.js

@@ -45,6 +45,7 @@ i.styles = g`
       align-items: center;
       gap: var(--spacing-3);
       width: fit-content;
+      font-family: var(--brand-font);
 
       margin-block-start: var(--scb-status-pill-spacing-block-start, 0);
       margin-block-end: var(--scb-status-pill-spacing-block-end, 0);