scb-wc-test 0.1.63 → 0.1.65

package/scb-accordion/scb-accordion-item.js

@@ -1,137 +1,117 @@
-import { css as g, LitElement as v, nothing as p, html as l } from "lit";
-import { property as o, customElement as b } from "lit/decorators.js";
+import { css as m, LitElement as v, nothing as p, html as l } from "lit";
+import { property as o, customElement as h } from "lit/decorators.js";
 import "@material/web/focus/md-focus-ring.js";
-var u = Object.defineProperty, h = Object.getOwnPropertyDescriptor, i = (e, a, s, r) => {
-  for (var n = r > 1 ? void 0 : r ? h(a, s) : a, d = e.length - 1, c; d >= 0; d--)
-    (c = e[d]) && (n = (r ? c(a, s, n) : c(n)) || n);
-  return r && n && u(a, s, n), n;
+var u = Object.defineProperty, b = Object.getOwnPropertyDescriptor, a = (t, i, s, r) => {
+  for (var n = r > 1 ? void 0 : r ? b(i, s) : i, c = t.length - 1, d; c >= 0; c--)
+    (d = t[c]) && (n = (r ? d(i, s, n) : d(n)) || n);
+  return r && n && u(i, s, n), n;
 };
-let t = class extends v {
+let e = class extends v {
   constructor() {
-    super(...arguments), this.expanded = !1, this.label = "", this.content = "", this.overline = "", this.supportingText = "", this.leading = !1, this.leadingVariant = "", this.leadingIcon = "", this.imgHrefImage = "", this.avatarLabel = "", this.avatarAlt = "", this.avatarVariant = "icon", this.avatarSrc = "", this.density = 0, this._unique = t._uid(), this.toggleAccordion = () => {
-      const e = this.closest("scb-accordion");
-      e != null && e.hasAttribute("detached") || e.querySelectorAll("scb-accordion-item").forEach((s) => {
-        s !== this && (s.expanded = !1, s._applyInert());
-      }), this.expanded = !this.expanded, this._applyInert();
+    super(...arguments), this.open = !1, this.title = "", this.content = "", this.overline = "", this.supportingText = "", this.leading = !1, this.leadingVariant = "", this.leadingIcon = "", this.imgHrefImage = "", this.avatarLabel = "", this.avatarAlt = "", this.avatarVariant = "icon", this.avatarSrc = "", this.density = 0, this._unique = e._uid(), this._onToggle = (t) => {
+      const i = t.currentTarget;
+      this.open = !!i.open;
+      const s = this.closest("scb-accordion");
+      this.open && s && !s.hasAttribute("detached") && s.querySelectorAll("scb-accordion-item").forEach((n) => {
+        n !== this && n.setOpen(!1);
+      }), this._applyInertByOpen(), this.dispatchEvent(new CustomEvent("open-changed", {
+        detail: { open: this.open, title: this.title },
+        bubbles: !0,
+        composed: !0
+      }));
     };
   }
   static _uid() {
-    var e, a;
-    return ((a = (e = globalThis.crypto) == null ? void 0 : e.randomUUID) == null ? void 0 : a.call(e)) ?? `${t._uidPrefix}-${++t._uidSeq}`;
+    var t, i;
+    return ((i = (t = globalThis.crypto) == null ? void 0 : t.randomUUID) == null ? void 0 : i.call(t)) ?? `${e._uidPrefix}-${++e._uidSeq}`;
   }
   async firstUpdated() {
-    t._mdIconLoaded || (await import("@material/web/icon/icon.js"), t._mdIconLoaded = !0), t._mdRippleLoaded || (await import("@material/web/ripple/ripple.js"), t._mdRippleLoaded = !0), this._applyInert();
+    e._mdIconLoaded || (await import("@material/web/icon/icon.js"), e._mdIconLoaded = !0), e._mdRippleLoaded || (await import("@material/web/ripple/ripple.js"), e._mdRippleLoaded = !0), this._applyInertByOpen();
   }
-  disconnectedCallback() {
-    super.disconnectedCallback();
+  _applyInertByOpen() {
+    const t = this.renderRoot.querySelector(".scb-accordion-bottom"), i = this.renderRoot.querySelector("details");
+    !t || !i || (i.open ? (t.removeAttribute("inert"), t.setAttribute("aria-hidden", "false")) : (t.setAttribute("inert", ""), t.setAttribute("aria-hidden", "true")));
   }
-  _onKeyDown(e) {
-    const a = this.closest("scb-accordion"), r = Array.from((a == null ? void 0 : a.querySelectorAll("scb-accordion-item")) || []).map((c) => c.renderRoot.querySelector(".scb-accordion-top")).filter((c) => !!c), n = e.currentTarget, d = r.indexOf(n);
-    switch (e.key) {
-      case "Enter":
-      case " ":
-        e.preventDefault(), this.toggleAccordion();
-        break;
+  _onKeyDown(t) {
+    const i = this.closest("scb-accordion"), r = Array.from((i == null ? void 0 : i.querySelectorAll("scb-accordion-item")) || []).map((d) => {
+      var g;
+      return ((g = d.renderRoot.querySelector("details")) == null ? void 0 : g.querySelector(".scb-accordion-top")) || null;
+    }).filter((d) => !!d), n = t.currentTarget, c = r.indexOf(n);
+    switch (t.key) {
       case "ArrowDown":
-        e.preventDefault(), d < r.length - 1 && r[d + 1].focus();
+        t.preventDefault(), c < r.length - 1 && r[c + 1].focus();
         break;
       case "ArrowUp":
-        e.preventDefault(), d > 0 && r[d - 1].focus();
+        t.preventDefault(), c > 0 && r[c - 1].focus();
         break;
       case "Home":
-        e.preventDefault(), r.length && r[0].focus();
+        t.preventDefault(), r.length && r[0].focus();
         break;
       case "End":
-        e.preventDefault(), r.length && r[r.length - 1].focus();
+        t.preventDefault(), r.length && r[r.length - 1].focus();
         break;
     }
   }
-  _renderLeading() {
-    if (!this.leading) return p;
-    switch (this.leadingVariant) {
-      case "icon":
-        return l`<md-icon>${this.leadingIcon}</md-icon>`;
-      case "avatar":
-        return l`
-          <scb-avatar
-            label=${this.avatarLabel}
-            alt=${this.avatarAlt}
-            src=${this.avatarVariant === "image" ? this.avatarSrc : ""}
-            size="medium"
-            shape="circular"
-            variant=${this.avatarVariant}
-          ></scb-avatar>
-        `;
-      case "image":
-        return this.imgHrefImage ? l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />` : p;
-      default:
-        return p;
-    }
-  }
-  _applyInert() {
-    const e = this.renderRoot.querySelector(".scb-accordion-bottom");
-    e && (this.expanded ? (e.removeAttribute("inert"), e.setAttribute("aria-hidden", "false")) : (e.setAttribute("inert", ""), e.setAttribute("aria-hidden", "true")));
-  }
-  _emitExpandedChanged() {
-    this.dispatchEvent(new CustomEvent("expanded-changed", {
-      detail: { expanded: this.expanded, label: this.label },
-      bubbles: !0,
-      composed: !0
-    }));
+  setOpen(t) {
+    this.open = !!t;
+    const i = this.renderRoot.querySelector("details");
+    i && (i.open = this.open), this._applyInertByOpen();
   }
-  updated(e) {
-    e.has("expanded") && (this._applyInert(), e.get("expanded") !== void 0 && this._emitExpandedChanged());
+  updated(t) {
+    if (t.has("open")) {
+      const i = this.renderRoot.querySelector("details");
+      i && i.open !== this.open && (i.open = this.open), this._applyInertByOpen();
+    }
   }
   render() {
-    const e = `bottom-${this._unique}`, a = `header-${this._unique}`;
+    const t = `bottom-${this._unique}`, i = `header-${this._unique}`, s = this.leading ? this.leadingVariant === "image" && this.imgHrefImage ? l`<img part="leading-image" class="img" src="${this.imgHrefImage}" alt="" />` : this.leadingVariant === "avatar" ? l`
+              <scb-avatar
+                label=${this.avatarLabel}
+                alt=${this.avatarAlt}
+                src=${this.avatarVariant === "image" ? this.avatarSrc : ""}
+                size="medium"
+                shape="circular"
+                variant=${this.avatarVariant}
+              ></scb-avatar>
+            ` : this.leadingVariant === "icon" ? l`<md-icon>${this.leadingIcon}</md-icon>` : p : p;
     return l`
-      <div part="scb-accordion-item" class="scb-accordion-item">
-        <div
-          id=${a}
+      <details class="scb-accordion-item" ?open=${this.open} @toggle=${this._onToggle}>
+        <summary
+          id=${i}
           class="scb-accordion-top"
-          tabindex="0"
-          role="button"
-          aria-expanded=${this.expanded}
-          aria-controls=${e}
-          @click=${this.toggleAccordion}
+          aria-controls=${t}
           @keydown=${this._onKeyDown}
         >
           <md-ripple></md-ripple>
 
-          ${this.leading ? l`<div class="leading">${this._renderLeading()}</div>` : p}
+          ${this.leading ? l`<div class="leading">${s}</div>` : p}
 
           <div class="texts">
             ${this.overline ? l`<div class="overline">${this.overline}</div>` : p}
-            <div class="label">${this.label}</div>
+            <div class="title">${this.title}</div>
             ${this.supportingText ? l`<div class="supporting-text">${this.supportingText}</div>` : p}
           </div>
 
-          <md-icon class="chevron">${this.expanded ? "keyboard_arrow_up" : "keyboard_arrow_down"}</md-icon>
-        </div>
+          <md-icon class="chevron">keyboard_arrow_down</md-icon>
+        </summary>
 
-        <div
-          id=${e}
-          class="scb-accordion-bottom ${this.expanded ? "expanded" : ""}"
-          role="region"
-          aria-labelledby=${a}
-          aria-hidden=${this.expanded ? "false" : "true"}
-        >
+        <div id=${t} class="scb-accordion-bottom" role="region" aria-labelledby=${i}>
           <div class="bottom-inner">
             <slot>${this.content}</slot>
           </div>
         </div>
-      </div>
+      </details>
 
-      <md-focus-ring for=${a} inward></md-focus-ring>
+      <md-focus-ring for=${i} inward></md-focus-ring>
     `;
   }
 };
-t._uidPrefix = `uid-${Math.random().toString(36).slice(2)}`;
-t._uidSeq = 0;
-t._mdIconLoaded = !1;
-t._mdRippleLoaded = !1;
-t.styles = [
-  g`
+e._uidPrefix = `uid-${Math.random().toString(36).slice(2)}`;
+e._uidSeq = 0;
+e._mdIconLoaded = !1;
+e._mdRippleLoaded = !1;
+e.styles = [
+  m`
       :host {
         display: block;
         position: relative;
@@ -152,28 +132,29 @@ t.styles = [
       .scb-accordion-item {
         border-bottom: var(--stroke-border, 1px) solid var(--md-sys-color-outline-variant);
         margin-bottom: calc(var(--stroke-border, 1px) * -1);
-        display: flex;
-        flex-direction: column;
         color: var(--md-sys-color-on-surface);
         font-family: var(--brand-font);
       }
 
+      /* Header */
       .scb-accordion-top {
+        list-style: none;
         display: flex;
         flex-direction: row;
         align-items: center;
         cursor: pointer;
         padding-block: var(--spacing-7, 24px);
         padding-inline: var(--spacing-5, 16px);
-        outline: none;
         border-radius: var(--radius-none, 0px);
         gap: var(--spacing-5, 16px);
         color: var(--md-sys-color-on-surface);
         position: relative;
-        overflow: visible;
+        overflow: hidden;
         -webkit-tap-highlight-color: transparent;
+        outline: none;
       }
-      .scb-accordion-top:hover { border-radius: var(--scb-accordion-hover-radius); }
+      .scb-accordion-top::-webkit-details-marker { display: none; }
+      summary::marker { content: ''; }
 
       :host([density="-2"]) .scb-accordion-top,
       :host-context([data-density="-2"]) .scb-accordion-top {
@@ -184,6 +165,7 @@ t.styles = [
         padding-block: var(--spacing-4, 12px);
       }
 
+      /* Panelinnehåll + animationer (grid 0fr -> 1fr) */
       .scb-accordion-bottom {
         display: grid;
         grid-template-rows: 0fr;
@@ -196,7 +178,7 @@ t.styles = [
         padding-block: var(--scb-accordion-panel-padding-closed);
         padding-inline: var(--spacing-5, 16px);
       }
-      .scb-accordion-bottom.expanded {
+      details[open] .scb-accordion-bottom {
         grid-template-rows: 1fr;
         opacity: 1;
         padding-top: var(--spacing-2, 4px);
@@ -206,7 +188,7 @@ t.styles = [
       }
       .bottom-inner { overflow: hidden; }
 
-      .label {
+      .title {
         font-family: var(--brand-font);
         font-size: var(--md-sys-typescale-title-large-size);
         line-height: var(--md-sys-typescale-title-large-line-height);
@@ -240,7 +222,14 @@ t.styles = [
       }
 
       .texts { display: grid; gap: var(--spacing-1, 2px); }
-      .chevron { margin-left: auto; padding-top: var(--scb-accordion-chevron-nudge-y, 3px); font-size: var(--icon-size-small, 24px); }
+
+      .chevron {
+        margin-left: auto;
+        padding-top: var(--scb-accordion-chevron-nudge-y, 3px);
+        font-size: var(--icon-size-small, 24px);
+        transition: transform var(--scb-accordion-transition-duration) var(--scb-accordion-transition-easing);
+      }
+      details[open] .chevron { transform: rotate(180deg); }
 
       md-ripple {
         border-radius: inherit;
@@ -249,54 +238,56 @@ t.styles = [
         pointer-events: none;
         overflow: hidden;
       }
-      @media (prefers-reduced-motion: reduce) { md-ripple { display: none; } }
+      @media (prefers-reduced-motion: reduce) {
+        md-ripple { display: none; }
+      }
     `
 ];
-i([
-  o({ type: Boolean })
-], t.prototype, "expanded", 2);
-i([
+a([
+  o({ type: Boolean, reflect: !0 })
+], e.prototype, "open", 2);
+a([
   o({ type: String, reflect: !0 })
-], t.prototype, "label", 2);
-i([
+], e.prototype, "title", 2);
+a([
   o({ type: String })
-], t.prototype, "content", 2);
-i([
+], e.prototype, "content", 2);
+a([
   o({ type: String, attribute: "overline" })
-], t.prototype, "overline", 2);
-i([
+], e.prototype, "overline", 2);
+a([
   o({ type: String, attribute: "supporting-text" })
-], t.prototype, "supportingText", 2);
-i([
+], e.prototype, "supportingText", 2);
+a([
   o({ type: Boolean })
-], t.prototype, "leading", 2);
-i([
+], e.prototype, "leading", 2);
+a([
   o({ type: String, attribute: "leading-variant", reflect: !0 })
-], t.prototype, "leadingVariant", 2);
-i([
+], e.prototype, "leadingVariant", 2);
+a([
   o({ type: String, attribute: "leading-icon" })
-], t.prototype, "leadingIcon", 2);
-i([
+], e.prototype, "leadingIcon", 2);
+a([
   o({ type: String, attribute: "img-href-image", reflect: !0 })
-], t.prototype, "imgHrefImage", 2);
-i([
+], e.prototype, "imgHrefImage", 2);
+a([
   o({ type: String, attribute: "avatar-label" })
-], t.prototype, "avatarLabel", 2);
-i([
+], e.prototype, "avatarLabel", 2);
+a([
   o({ type: String, attribute: "avatar-alt" })
-], t.prototype, "avatarAlt", 2);
-i([
+], e.prototype, "avatarAlt", 2);
+a([
   o({ type: String, attribute: "avatar-variant" })
-], t.prototype, "avatarVariant", 2);
-i([
+], e.prototype, "avatarVariant", 2);
+a([
   o({ type: String, attribute: "avatar-src" })
-], t.prototype, "avatarSrc", 2);
-i([
+], e.prototype, "avatarSrc", 2);
+a([
   o({ type: Number, reflect: !0 })
-], t.prototype, "density", 2);
-t = i([
-  b("scb-accordion-item")
-], t);
+], e.prototype, "density", 2);
+e = a([
+  h("scb-accordion-item")
+], e);
 export {
-  t as ScbAccordionItem
+  e as ScbAccordionItem
 };

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
+};