scb-wc-test 0.1.63 → 0.1.64

package/all.js

@@ -46,6 +46,8 @@ 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';
 import './mvc/components/scb-search/scb-search.js';
+import './mvc/components/scb-segmented-button/scb-segmented-button.js';
+import './mvc/components/scb-segmented-button/scb-segmented-item.js';
 import './mvc/components/scb-snackbar/scb-snackbar.js';
 import './mvc/components/scb-status-pill/scb-status-pill.js';
 import './mvc/components/scb-switch/scb-switch.js';
@@ -105,6 +107,8 @@ import './scb-progress-indicator/scb-progress-indicator.js';
 import './scb-radio-button/scb-radio-button.js';
 import './scb-radio-button/scb-radio-group.js';
 import './scb-search/scb-search.js';
+import './scb-segmented-button/scb-segmented-button.js';
+import './scb-segmented-button/scb-segmented-item.js';
 import './scb-snackbar/scb-snackbar.js';
 import './scb-status-pill/scb-status-pill.js';
 import './scb-switch/scb-switch.js';

package/index.d.ts

@@ -43,6 +43,8 @@ export * from './scb-progress-indicator/scb-progress-indicator';
 export * from './scb-radio-button/scb-radio-button';
 export * from './scb-radio-button/scb-radio-group';
 export * from './scb-search/scb-search';
+export * from './scb-segmented-button/scb-segmented-button';
+export * from './scb-segmented-button/scb-segmented-item';
 export * from './scb-snackbar/scb-snackbar';
 export * from './scb-status-pill/scb-status-pill';
 export * from './scb-switch/scb-switch';

package/index.js

@@ -6,13 +6,13 @@ 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 I } from "./scb-card/scb-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 h } from "./scb-dialog/scb-dialog.js";
-import { ScbDivider as G } from "./scb-divider/scb-divider.js";
-import { ScbDrawerItem as A } from "./scb-drawer/scb-drawer-item.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";
@@ -33,26 +33,28 @@ 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 Ir } from "./scb-list/scb-list.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 hr } from "./scb-notification/scb-notification.js";
-import { ScbNotificationCard as Gr } from "./scb-notification-card/scb-notification-card.js";
-import { ScbProgressIndicator as Ar } from "./scb-progress-indicator/scb-progress-indicator.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 { ScbSnackbar as zr } from "./scb-snackbar/scb-snackbar.js";
-import { ScbStatusPill as Ur } from "./scb-status-pill/scb-status-pill.js";
-import { ScbSwitch as qr } from "./scb-switch/scb-switch.js";
-import { ScbPrimaryTab as Jr } from "./scb-tabs/scb-primary-tab.js";
-import { ScbSecondaryTab as Qr } from "./scb-tabs/scb-secondary-tab.js";
-import { ScbTabs as Wr } from "./scb-tabs/scb-tabs.js";
-import { ScbTextField2 as Yr } from "./scb-textfield/scb-textfield.js";
-import { ScbTocItem as _r } from "./scb-toc/scb-toc-item.js";
-import { ScbToc as ro } from "./scb-toc/scb-toc.js";
-import { ScbTooltip as eo } from "./scb-tooltip/scb-tooltip.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";
 export {
   i as SCBBreadcrumb,
   f as SCBBreadcrumbItem,
@@ -62,14 +64,14 @@ export {
   p as ScbAvatar,
   n as ScbButton,
   C as ScbCalendarCard,
-  I as ScbCard,
+  l as ScbCard,
   w as ScbCheckbox,
   D as ScbCheckboxGroup,
   F as ScbChip,
-  h as ScbDialog,
-  G as ScbDivider,
+  g as ScbDialog,
+  k as ScbDivider,
   P as ScbDrawer,
-  A as ScbDrawerItem,
+  y as ScbDrawerItem,
   L as ScbDrawerSection,
   U as ScbFactCard,
   z as ScbFactCardContent,
@@ -86,27 +88,29 @@ export {
   fr as ScbIconButton,
   ir as ScbKeyFigureCard,
   nr as ScbLink,
-  Ir as ScbList,
+  lr as ScbList,
   Cr as ScbListItem,
   wr as ScbMenu,
   Dr as ScbMenuItem,
-  hr as ScbNotification,
-  Gr as ScbNotificationCard,
-  Jr as ScbPrimaryTab,
-  Ar as ScbProgressIndicator,
+  gr as ScbNotification,
+  kr as ScbNotificationCard,
+  Wr as ScbPrimaryTab,
+  yr as ScbProgressIndicator,
   Lr as ScbRadioButton,
   Pr as ScbRadioGroup,
   Nr as ScbSearch,
-  Qr as ScbSecondaryTab,
-  zr as ScbSnackbar,
+  Yr as ScbSecondaryTab,
+  zr as ScbSegmentedButton,
+  Ur as ScbSegmentedItem,
+  qr as ScbSnackbar,
   Y as ScbStack,
-  Ur as ScbStatusPill,
+  Jr as ScbStatusPill,
   N as ScbSubDrawer,
   Fr as ScbSubMenu,
-  qr as ScbSwitch,
-  Wr as ScbTabs,
-  Yr as ScbTextField2,
-  ro as ScbToc,
-  _r as ScbTocItem,
-  eo as ScbTooltip
+  Qr as ScbSwitch,
+  _r as ScbTabs,
+  ro as ScbTextField2,
+  co as ScbToc,
+  eo as ScbTocItem,
+  So as ScbTooltip
 };

package/mvc/components/all.js

@@ -43,6 +43,8 @@ import './scb-progress-indicator/scb-progress-indicator.js';
 import './scb-radio-button/scb-radio-button.js';
 import './scb-radio-button/scb-radio-group.js';
 import './scb-search/scb-search.js';
+import './scb-segmented-button/scb-segmented-button.js';
+import './scb-segmented-button/scb-segmented-item.js';
 import './scb-snackbar/scb-snackbar.js';
 import './scb-status-pill/scb-status-pill.js';
 import './scb-switch/scb-switch.js';

package/mvc/components/scb-segmented-button/scb-segmented-button.js

@@ -0,0 +1,21 @@
+import{a as u,n,i as c,x as f,t as h}from"../../vendor/vendor.js";import"./scb-segmented-item.js";import"../../vendor/vendor-material.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var r=customElements.define.bind(customElements);customElements.define=function(t,e,s){try{customElements.get(t)||r(t,e,s)}catch(a){var l=String(a||"");if(l.indexOf("already been used")===-1&&l.indexOf("NotSupportedError")===-1)throw a}}}}catch{}})();var m=Object.defineProperty,b=Object.getOwnPropertyDescriptor,d=(i,r,t,e)=>{for(var s=e>1?void 0:e?b(r,t):r,l=i.length-1,a;l>=0;l--)(a=i[l])&&(s=(e?a(r,t,s):a(s))||s);return e&&s&&m(r,t,s),s};let o=class extends c{constructor(){super(...arguments),this.variant="single-select",this.value="",this.values=[],this.disabled=!1}onSlotClick(i){let r=i.target;if(!r||!r.closest)return;const t=r.closest("scb-segmented-item");if(!t||this.disabled||t.hasAttribute("disabled"))return;const e=t.getAttribute("value")||"";e&&(this.variant==="multi-select"?(this.values.indexOf(e)===-1?this.values=[...this.values,e]:this.values=this.values.filter(l=>l!==e),this.dispatchEvent(new CustomEvent("change",{detail:{values:this.values},bubbles:!0,composed:!0})),this.updateSegments()):e!==this.value&&(this.value=e,this.dispatchEvent(new CustomEvent("change",{detail:{value:e},bubbles:!0,composed:!0})),this.updateSegments()))}updateSegments(){const i=this.shadowRoot?.querySelector("slot");if(!i)return;i.assignedElements().forEach(t=>{if(t.tagName==="SCB-SEGMENTED-ITEM"){const e=t.getAttribute("value")||"";if(e){let s=!1;this.variant==="multi-select"?s=!!this.values&&this.values.includes(e):s=e===this.value,t.setAttribute("aria-pressed",s?"true":"false")}this.disabled&&t.setAttribute("disabled","true")}})}firstUpdated(){this.updateSegments();const i=this.shadowRoot?.querySelector("slot");i&&i.addEventListener("click",r=>this.onSlotClick(r))}updated(){this.updateSegments()}render(){return f`<slot></slot>`}};o.styles=u`
+    :host {
+      display: flex;
+    }
+    /* Border radius only on first and last button */
+    ::slotted(scb-segmented-item:first-child .segmented-item),
+    ::slotted([role="button"]:first-child .segmented-item) {
+      border-top-left-radius: var(--md-sys-shape-corner-full);
+      border-bottom-left-radius: var(--md-sys-shape-corner-full);
+    }
+    ::slotted(scb-segmented-item:last-child .segmented-item),
+    ::slotted([role="button"]:last-child .segmented-item) {
+      border-top-right-radius: var(--md-sys-shape-corner-full);
+      border-bottom-right-radius: var(--md-sys-shape-corner-full);
+    }
+    /* First button gets left border */
+    ::slotted(scb-segmented-item:first-child .segmented-item),
+    ::slotted([role="button"]:first-child .segmented-item) {
+      border-left: 1px solid var(--md-sys-color-outline);
+    }
+  `;d([n({type:String,reflect:!0})],o.prototype,"variant",2);d([n({type:String,reflect:!0})],o.prototype,"value",2);d([n({type:Array})],o.prototype,"values",2);d([n({type:Boolean,reflect:!0})],o.prototype,"disabled",2);o=d([h("scb-segmented-button")],o);

package/mvc/components/scb-segmented-button/scb-segmented-item.js

@@ -0,0 +1,72 @@
+import{a as p,n as l,i as u,x as c,t as m}from"../../vendor/vendor.js";import"../../vendor/vendor-material.js";(function(){try{var i=typeof globalThis<"u"?globalThis:window;if(!i.__scb_ce_guard_installed__){i.__scb_ce_guard_installed__=!0;var s=customElements.define.bind(customElements);customElements.define=function(e,o,t){try{customElements.get(e)||s(e,o,t)}catch(n){var a=String(n||"");if(a.indexOf("already been used")===-1&&a.indexOf("NotSupportedError")===-1)throw n}}}}catch{}})();var f=Object.defineProperty,h=Object.getOwnPropertyDescriptor,d=(i,s,e,o)=>{for(var t=o>1?void 0:o?h(s,e):s,a=i.length-1,n;a>=0;a--)(n=i[a])&&(t=(o?n(s,e,t):n(t))||t);return o&&t&&f(s,e,t),t};let r=class extends u{constructor(){super(...arguments),this.label="",this.value="",this.selected=!1,this.icon="",this.disabled=!1}render(){const s=this.parentElement?.hasAttribute?.("disabled"),e=this.disabled||s;return c`
+      <div class="segmented-item" aria-disabled="${e?"true":"false"}">
+        <md-ripple ?disabled="${e}"></md-ripple>
+        ${this.icon?c`<md-icon>${this.icon}</md-icon>`:""}
+        <span>${this.label}</span>
+        <md-focus-ring inward></md-focus-ring>
+      </div>
+    `}firstUpdated(){this.setAttribute("tabindex",this.disabled?"-1":"0"),this.setAttribute("role","button")}};r.styles=p`
+    .segmented-item {
+                display: flex;
+                gap: var(--spacing-3);
+      border: 1px solid var(--md-sys-color-outline);
+      border-left: none;
+      background-color: var(--md-sys-color-surface);
+      padding: var(--spacing-3) var(--spacing-8);
+      font: inherit;
+      cursor: pointer;
+      position: relative;
+      font-size: var(--md-sys-typescale-label-medium-size);
+      line-height: var(--md-sys-typescale-label-medium-line-height);
+      font-weight: var(--md-sys-typescale-label-medium-weight);
+      letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+      color: var(--md-sys-color-on-surface);
+      opacity: 1;
+      pointer-events: auto;
+      transition: opacity 0.2s;
+
+    }
+    md-icon {
+        font-size: 20px;
+        width: 18px;
+        height: 18px;
+    }
+    :host([disabled]) .segmented-item,
+    .segmented-item[aria-disabled="true"] {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+      filter: grayscale(0.5);
+    }
+    :host([aria-pressed="true"]) .segmented-item {
+      background-color: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-primary);
+    }
+    :host(:focus){
+      outline: none;
+    }
+    md-focus-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: inherit;
+    }
+    :host(:focus) md-focus-ring,
+    md-focus-ring[data-show="true"] {
+      display: block;
+    }
+    :host([disabled]):host(:focus) md-focus-ring,
+    :host([disabled]) md-focus-ring[data-show="true"] {
+      display: none;
+    }
+    :host(:first-child) .segmented-item{
+        border: 1px solid var(--md-sys-color-outline);
+      border-top-left-radius: var(--md-sys-shape-corner-full);
+      border-bottom-left-radius: var(--md-sys-shape-corner-full);
+    }
+    :host(:last-child) .segmented-item {
+      border-top-right-radius: var(--md-sys-shape-corner-full);
+      border-bottom-right-radius: var(--md-sys-shape-corner-full);
+    }
+  `;d([l({type:String,reflect:!0})],r.prototype,"label",2);d([l({type:String,reflect:!0})],r.prototype,"value",2);d([l({type:Boolean,reflect:!0})],r.prototype,"selected",2);d([l({type:String,reflect:!0})],r.prototype,"icon",2);d([l({type:Boolean,reflect:!0})],r.prototype,"disabled",2);r=d([m("scb-segmented-item")],r);

package/package.json

@@ -1,6 +1,6 @@
 {
     "name":  "scb-wc-test",
-    "version":  "0.1.63",
+    "version":  "0.1.64",
     "type":  "module",
     "main":  "index.js",
     "module":  "index.js",
@@ -238,6 +238,14 @@
                                          "import":  "./scb-search/scb-search.js",
                                          "require":  "./scb-search/scb-search.js"
                                      },
+                    "./scb-segmented-button":  {
+                                                   "import":  "./scb-segmented-button/scb-segmented-button.js",
+                                                   "require":  "./scb-segmented-button/scb-segmented-button.js"
+                                               },
+                    "./scb-segmented-button/scb-segmented-item":  {
+                                                                      "import":  "./scb-segmented-button/scb-segmented-item.js",
+                                                                      "require":  "./scb-segmented-button/scb-segmented-item.js"
+                                                                  },
                     "./scb-snackbar":  {
                                            "import":  "./scb-snackbar/scb-snackbar.js",
                                            "require":  "./scb-snackbar/scb-snackbar.js"
@@ -280,5 +288,5 @@
                                       },
                     "./mvc/*":  "./mvc/*"
                 },
-    "buildHash":  "E492862AA916AE07F7AF99579CC78F959F68B95FACD6E0585D36D72D53A91B61"
+    "buildHash":  "196EA9D0A787C5364D547B6BC0D9A2F40B5BED4D0B8371787D7FF52C55981313"
 }

package/scb-segmented-button/scb-segmented-button.d.ts

@@ -0,0 +1,25 @@
+import { LitElement } from 'lit';
+/**
+ * En komponent för segmenterade knappar (segmented button).
+ *
+ * @slot - Plats för knappar eller segment.
+ * @fires change - När valt segment ändras (detail: { value })
+ */
+export declare class ScbSegmentedButton extends LitElement {
+    /**
+     * Variant: 'single-select' (default) eller 'multi-select'.
+     */
+    variant: 'single-select' | 'multi-select';
+    /**
+     * Aktuellt valt värde (single) eller array av värden (multi)
+     */
+    value: string;
+    values: string[];
+    disabled: boolean;
+    static styles: import('lit').CSSResult;
+    private onSlotClick;
+    private updateSegments;
+    firstUpdated(): void;
+    updated(): void;
+    render(): import('lit-html').TemplateResult<1>;
+}

package/scb-segmented-button/scb-segmented-button.js

@@ -0,0 +1,87 @@
+import { css as u, LitElement as c, html as m } from "lit";
+import { property as d, customElement as h } from "lit/decorators.js";
+import "./scb-segmented-item.js";
+var f = Object.defineProperty, p = Object.getOwnPropertyDescriptor, a = (i, t, s, e) => {
+  for (var r = e > 1 ? void 0 : e ? p(t, s) : t, l = i.length - 1, n; l >= 0; l--)
+    (n = i[l]) && (r = (e ? n(t, s, r) : n(r)) || r);
+  return e && r && f(t, s, r), r;
+};
+let o = class extends c {
+  constructor() {
+    super(...arguments), this.variant = "single-select", this.value = "", this.values = [], this.disabled = !1;
+  }
+  onSlotClick(i) {
+    let t = i.target;
+    if (!t || !t.closest) return;
+    const s = t.closest("scb-segmented-item");
+    if (!s || this.disabled || s.hasAttribute("disabled")) return;
+    const e = s.getAttribute("value") || "";
+    e && (this.variant === "multi-select" ? (this.values.indexOf(e) === -1 ? this.values = [...this.values, e] : this.values = this.values.filter((l) => l !== e), this.dispatchEvent(new CustomEvent("change", { detail: { values: this.values }, bubbles: !0, composed: !0 })), this.updateSegments()) : e !== this.value && (this.value = e, this.dispatchEvent(new CustomEvent("change", { detail: { value: e }, bubbles: !0, composed: !0 })), this.updateSegments()));
+  }
+  updateSegments() {
+    var s;
+    const i = (s = this.shadowRoot) == null ? void 0 : s.querySelector("slot");
+    if (!i) return;
+    i.assignedElements().forEach((e) => {
+      if (e.tagName === "SCB-SEGMENTED-ITEM") {
+        const r = e.getAttribute("value") || "";
+        if (r) {
+          let l = !1;
+          this.variant === "multi-select" ? l = !!this.values && this.values.includes(r) : l = r === this.value, e.setAttribute("aria-pressed", l ? "true" : "false");
+        }
+        this.disabled && e.setAttribute("disabled", "true");
+      }
+    });
+  }
+  firstUpdated() {
+    var t;
+    this.updateSegments();
+    const i = (t = this.shadowRoot) == null ? void 0 : t.querySelector("slot");
+    i && i.addEventListener("click", (s) => this.onSlotClick(s));
+  }
+  updated() {
+    this.updateSegments();
+  }
+  render() {
+    return m`<slot></slot>`;
+  }
+};
+o.styles = u`
+    :host {
+      display: flex;
+    }
+    /* Border radius only on first and last button */
+    ::slotted(scb-segmented-item:first-child .segmented-item),
+    ::slotted([role="button"]:first-child .segmented-item) {
+      border-top-left-radius: var(--md-sys-shape-corner-full);
+      border-bottom-left-radius: var(--md-sys-shape-corner-full);
+    }
+    ::slotted(scb-segmented-item:last-child .segmented-item),
+    ::slotted([role="button"]:last-child .segmented-item) {
+      border-top-right-radius: var(--md-sys-shape-corner-full);
+      border-bottom-right-radius: var(--md-sys-shape-corner-full);
+    }
+    /* First button gets left border */
+    ::slotted(scb-segmented-item:first-child .segmented-item),
+    ::slotted([role="button"]:first-child .segmented-item) {
+      border-left: 1px solid var(--md-sys-color-outline);
+    }
+  `;
+a([
+  d({ type: String, reflect: !0 })
+], o.prototype, "variant", 2);
+a([
+  d({ type: String, reflect: !0 })
+], o.prototype, "value", 2);
+a([
+  d({ type: Array })
+], o.prototype, "values", 2);
+a([
+  d({ type: Boolean, reflect: !0 })
+], o.prototype, "disabled", 2);
+o = a([
+  h("scb-segmented-button")
+], o);
+export {
+  o as ScbSegmentedButton
+};

package/scb-segmented-button/scb-segmented-item.d.ts

@@ -0,0 +1,15 @@
+import { LitElement } from 'lit';
+/**
+ * Ett segment (option) i en segmented button.
+ * @slot - Label och ev. ikon
+ */
+export declare class ScbSegmentedItem extends LitElement {
+    label: string;
+    value: string;
+    selected: boolean;
+    icon: string;
+    disabled: boolean;
+    static styles: import('lit').CSSResult;
+    render(): import('lit-html').TemplateResult<1>;
+    firstUpdated(): void;
+}

package/scb-segmented-button/scb-segmented-item.js

@@ -0,0 +1,116 @@
+import { css as p, LitElement as m, html as c } from "lit";
+import { property as l, customElement as u } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/ripple/ripple.js";
+var h = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (e, o, i, s) => {
+  for (var r = s > 1 ? void 0 : s ? b(o, i) : o, d = e.length - 1, n; d >= 0; d--)
+    (n = e[d]) && (r = (s ? n(o, i, r) : n(r)) || r);
+  return s && r && h(o, i, r), r;
+};
+let t = class extends m {
+  constructor() {
+    super(...arguments), this.label = "", this.value = "", this.selected = !1, this.icon = "", this.disabled = !1;
+  }
+  render() {
+    var s;
+    const e = this.parentElement, o = (s = e == null ? void 0 : e.hasAttribute) == null ? void 0 : s.call(e, "disabled"), i = this.disabled || o;
+    return c`
+      <div class="segmented-item" aria-disabled="${i ? "true" : "false"}">
+        <md-ripple ?disabled="${i}"></md-ripple>
+        ${this.icon ? c`<md-icon>${this.icon}</md-icon>` : ""}
+        <span>${this.label}</span>
+        <md-focus-ring inward></md-focus-ring>
+      </div>
+    `;
+  }
+  firstUpdated() {
+    this.setAttribute("tabindex", this.disabled ? "-1" : "0"), this.setAttribute("role", "button");
+  }
+};
+t.styles = p`
+    .segmented-item {
+                display: flex;
+                gap: var(--spacing-3);
+      border: 1px solid var(--md-sys-color-outline);
+      border-left: none;
+      background-color: var(--md-sys-color-surface);
+      padding: var(--spacing-3) var(--spacing-8);
+      font: inherit;
+      cursor: pointer;
+      position: relative;
+      font-size: var(--md-sys-typescale-label-medium-size);
+      line-height: var(--md-sys-typescale-label-medium-line-height);
+      font-weight: var(--md-sys-typescale-label-medium-weight);
+      letter-spacing: var(--md-sys-typescale-label-medium-tracking);
+      color: var(--md-sys-color-on-surface);
+      opacity: 1;
+      pointer-events: auto;
+      transition: opacity 0.2s;
+
+    }
+    md-icon {
+        font-size: 20px;
+        width: 18px;
+        height: 18px;
+    }
+    :host([disabled]) .segmented-item,
+    .segmented-item[aria-disabled="true"] {
+      opacity: 0.5;
+      cursor: not-allowed;
+      pointer-events: none;
+      filter: grayscale(0.5);
+    }
+    :host([aria-pressed="true"]) .segmented-item {
+      background-color: var(--md-sys-color-secondary-container);
+      color: var(--md-sys-color-primary);
+    }
+    :host(:focus){
+      outline: none;
+    }
+    md-focus-ring {
+      position: absolute;
+      inset: 0;
+      pointer-events: none;
+      display: none;
+      border-radius: inherit;
+    }
+    :host(:focus) md-focus-ring,
+    md-focus-ring[data-show="true"] {
+      display: block;
+    }
+    :host([disabled]):host(:focus) md-focus-ring,
+    :host([disabled]) md-focus-ring[data-show="true"] {
+      display: none;
+    }
+    :host(:first-child) .segmented-item{
+        border: 1px solid var(--md-sys-color-outline);
+      border-top-left-radius: var(--md-sys-shape-corner-full);
+      border-bottom-left-radius: var(--md-sys-shape-corner-full);
+    }
+    :host(:last-child) .segmented-item {
+      border-top-right-radius: var(--md-sys-shape-corner-full);
+      border-bottom-right-radius: var(--md-sys-shape-corner-full);
+    }
+  `;
+a([
+  l({ type: String, reflect: !0 })
+], t.prototype, "label", 2);
+a([
+  l({ type: String, reflect: !0 })
+], t.prototype, "value", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], t.prototype, "selected", 2);
+a([
+  l({ type: String, reflect: !0 })
+], t.prototype, "icon", 2);
+a([
+  l({ type: Boolean, reflect: !0 })
+], t.prototype, "disabled", 2);
+t = a([
+  u("scb-segmented-item")
+], t);
+export {
+  t as ScbSegmentedItem
+};