scb-wc 0.1.3 → 0.1.4

package/scb-progress-stepper/scb-progress-step.js

@@ -0,0 +1,213 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { LitElement as t, css as n, html as r } from "lit";
+import { customElement as i, property as a, state as o } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/ripple/ripple.js";
+//#region src/scb-test-components/scb-progress-stepper/scb-progress-step.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.width = "100%", this.active = !1, this.disabled = !1, this.href = "", this.label = "", this.position = "top", this._stepId = `scb-step-${Math.random().toString(36).slice(2)}`;
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      width: var(--progress-step-width, 100%);
+      height: 100%;
+      cursor: pointer;
+      background: transparent;
+      position: relative;
+    }
+    .progress-step {
+      width: 100%;
+      height: 100%;
+      background: transparent;
+      position: relative;
+      overflow: hidden;
+      border-right: 2px solid var(--md-sys-color-surface);
+      outline: none;
+      box-shadow: none;
+      display: block;
+    }
+    :host(.last-step) .progress-step {
+      border-right: none !important;
+    }
+    .progress-step:focus {
+      outline: none;
+      box-shadow: none;
+    }
+    :host([active]) .progress-step {
+      border-right: 2px solid var(--md-sys-color-surface);
+    }
+    :host([disabled]) {
+      cursor: not-allowed;
+    }
+    :host([disabled]) .progress-step {
+      background: #e6e6e699;
+      border-right: 2px solid #e6e6e699;
+    }
+
+    md-focus-ring {
+      pointer-events: none;
+      position: absolute;
+      inset: 0;
+      opacity: 0;
+      border-radius: 0;
+      transition: opacity 0.15s;
+      z-index: 4;
+    }
+    .progress-step:focus + md-focus-ring,
+    .progress-step:focus-visible + md-focus-ring {
+      opacity: 1;
+    }
+
+    .tooltip {
+      visibility: hidden;
+      opacity: 0;
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      z-index: 10;
+      max-width: 220px;
+      width: max-content;
+      background: var(--md-sys-color-inverse-surface);
+      border-radius: var(--md-sys-shape-corner-extra-small);
+      padding: var(--spacing-2) var(--spacing-3);
+      color: var(--md-sys-color-inverse-on-surface);
+      font-family: var(--brand-font);
+      font-size: var(--md-sys-typescale-body-small-size);
+      font-style: normal;
+      line-height: var(--md-sys-typescale-body-small-line-height);
+      letter-spacing: var(--md-sys-typescale-body-small-tracking);
+      white-space: normal;
+      pointer-events: none;
+      transition: opacity 0.2s, visibility 0.2s;
+      text-align: center;
+    }
+    .tooltip.top {
+      top: calc(100% + 10px);
+    }
+    .tooltip.bottom {
+      bottom: calc(100% + 10px);
+    }
+    .progress-step:hover ~ .tooltip,
+    .progress-step:focus ~ .tooltip {
+      visibility: visible;
+      opacity: 1;
+    }
+    .tooltip::after {
+      content: '';
+      position: absolute;
+      left: 50%;
+      transform: translateX(-50%);
+      width: 0;
+      height: 0;
+      pointer-events: none;
+      display: block;
+    }
+    .tooltip.top::after {
+      top: -6px;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-bottom: 8px solid var(--md-sys-color-inverse-surface);
+      border-top: none;
+    }
+    .tooltip.bottom::after {
+      bottom: -6px;
+      border-left: 8px solid transparent;
+      border-right: 8px solid transparent;
+      border-top: 8px solid var(--md-sys-color-inverse-surface);
+      border-bottom: none;
+    }
+    .tooltip.tooltip-left::after {
+      left: 2px;
+      transform: none;
+    }
+    .tooltip.tooltip-right::after {
+      right: 2px;
+      left: auto;
+      transform: none;
+    }
+  `;
+	}
+	updated(e) {
+		super.updated?.(e), this.style.setProperty("--progress-step-width", this.width);
+	}
+	_onClick() {
+		let e = {
+			width: this.width,
+			label: this.label,
+			active: this.active,
+			disabled: this.disabled,
+			href: this.href || void 0
+		};
+		this.dispatchEvent(new CustomEvent("step-click", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		})), this.dispatchEvent(new CustomEvent("stepclick", {
+			detail: e,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	firstUpdated(e) {
+		super.firstUpdated?.(e), this._setupTooltipPositioning();
+	}
+	_setupTooltipPositioning() {
+		new MutationObserver(() => this._adjustTooltipPosition()).observe(this, {
+			attributes: !0,
+			childList: !0,
+			subtree: !0
+		}), window.addEventListener("resize", () => this._adjustTooltipPosition());
+	}
+	_adjustTooltipPosition() {
+		let e = this.renderRoot.querySelector(".tooltip");
+		if (!e) return;
+		e.style.left = "50%", e.style.right = "", e.style.transform = "translateX(-50%)", e.classList.remove("tooltip-left", "tooltip-right");
+		let t = e.getBoundingClientRect();
+		t.right > window.innerWidth - 8 && (e.style.left = "auto", e.style.right = "8px", e.style.transform = "none", e.classList.add("tooltip-right")), t.left < 8 && (e.style.left = "8px", e.style.right = "auto", e.style.transform = "none", e.classList.add("tooltip-left"));
+	}
+	render() {
+		return r`
+      ${this.href && !this.disabled ? r`
+            <a
+              id=${this._stepId}
+              class="progress-step"
+              href=${this.href}
+              @click=${this._onClick}
+              tabindex="0"
+              role="link"
+              aria-disabled="false"
+            >
+              <md-ripple></md-ripple>
+            </a>
+          ` : r`
+            <div
+              id=${this._stepId}
+              class="progress-step"
+              @click=${this._onClick}
+              tabindex=${this.disabled ? -1 : 0}
+              role="button"
+              aria-disabled=${this.disabled ? "true" : "false"}
+            >
+              ${this.disabled ? "" : r`<md-ripple></md-ripple>`}
+            </div>
+          `}
+      ${this.disabled ? "" : r`<md-focus-ring for="${this._stepId}"></md-focus-ring>`}
+      ${this.label && !this.disabled ? r`<div class="tooltip ${this.position === "bottom" ? "bottom" : "top"}">${this.label}</div>` : ""}
+    `;
+	}
+};
+e([a({ type: String })], s.prototype, "width", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "active", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "href", void 0), e([a({ type: String })], s.prototype, "label", void 0), e([a({ type: String })], s.prototype, "position", void 0), e([o()], s.prototype, "_stepId", void 0), s = e([i("scb-progress-step")], s);
+//#endregion
+export { s as ScbProgressStep };

package/scb-progress-stepper/scb-progress-stepper.js

@@ -0,0 +1,132 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import { ScbProgressStep as t } from "./scb-progress-step.js";
+import { LitElement as n, css as r, html as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+//#region src/scb-test-components/scb-progress-stepper/scb-progress-stepper.ts
+var s = class extends n {
+	constructor(...e) {
+		super(...e), this.progressWidth = 23, this.height = "normal", this.position = "top", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0;
+	}
+	static {
+		this.styles = r`
+    :host {
+      display: block;
+      width: 100%;
+      font-family: var(--brand-font);
+      position: absolute;
+      top: 0;
+      --progress-step-height: 8px;
+
+      margin-block-start: var(--scb-progress-stepper-spacing-block-start, 0);
+      margin-block-end: var(--scb-progress-stepper-spacing-block-end, 0);
+      margin-inline-start: var(--scb-progress-stepper-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-progress-stepper-spacing-inline-end, 0);
+    }
+    :host([position="bottom"]) {
+      top: auto;
+      bottom: 0;
+    }
+
+    :host([height="normal"]) .progress-bar, :host([height="normal"]) .progress-container {
+      height: var(--progress-step-height);
+    }
+    :host(:hover[height="normal"]) .progress-bar, :host(:hover[height="normal"]) .progress-container {
+      --progress-step-height: 16px;
+      height: var(--progress-step-height);
+    }
+    :host([height="high"]) .progress-bar, :host([height="high"]) .progress-container {
+      --progress-step-height: 16px;
+      height: var(--progress-step-height);
+    }
+    .progress-bar, .progress-container {
+      transition: height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+    }
+    .progress-bar {
+      width: 100%;
+      background: var(--md-sys-color-secondary-container);
+      overflow: hidden;
+      position: absolute;
+    }
+    .progress-bar__fill {
+      height: 100%;
+      background: var(--md-sys-color-primary);
+      transition: width 0.3s ease;
+      position: absolute;
+        z-index: 0;
+        max-width: 100%;
+    }
+    .progress-container {
+        display: flex;
+        align-items: center;
+        width: 100%;
+        position: relative;
+        gap: 0;
+    }
+  `;
+	}
+	mapSpacingToken(e) {
+		if (!e) return;
+		let t = String(e).trim();
+		if (t) return /^\d+$/.test(t) ? `var(--spacing-${Math.max(0, Math.min(14, parseInt(t, 10)))})` : t;
+	}
+	applySpacing() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop) ?? e, n = this.mapSpacingToken(this.spacingBottom) ?? e, r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight);
+		t ? this.style.setProperty("--scb-progress-stepper-spacing-block-start", t) : this.style.removeProperty("--scb-progress-stepper-spacing-block-start"), n ? this.style.setProperty("--scb-progress-stepper-spacing-block-end", n) : this.style.removeProperty("--scb-progress-stepper-spacing-block-end"), r ? this.style.setProperty("--scb-progress-stepper-spacing-inline-start", r) : this.style.removeProperty("--scb-progress-stepper-spacing-inline-start"), i ? this.style.setProperty("--scb-progress-stepper-spacing-inline-end", i) : this.style.removeProperty("--scb-progress-stepper-spacing-inline-end");
+	}
+	updated(e) {
+		(e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.applySpacing();
+		let n = this.shadowRoot?.querySelector("slot");
+		if (!n) return;
+		e.has("progressWidth") && n.dispatchEvent(new Event("slotchange"));
+		let r = n.assignedElements({ flatten: !0 }), i = this.progressWidth, a = 0;
+		r.forEach((e, n) => {
+			if (e instanceof t) {
+				let t = typeof e.width == "string" ? parseFloat(e.width.replace("%", "")) : Number(e.width);
+				a += t, this.position == "bottom" ? e.setAttribute("position", "bottom") : e.setAttribute("position", "top"), a <= i + 2 ? e.setAttribute("active", "true") : e.removeAttribute("active"), n === r.length - 1 ? e.classList.add("last-step") : e.classList.remove("last-step");
+			}
+		});
+	}
+	render() {
+		return i`
+      <div class="progress-bar">
+        <div class="progress-bar__fill" style="width: ${this.progressWidth}%;"></div>
+      </div>
+      <div class="progress-container">
+        <slot></slot>
+      </div>
+    `;
+	}
+};
+e([o({
+	type: Number,
+	reflect: !0,
+	attribute: "progress-width",
+	hasChanged: (e, t) => e !== t
+})], s.prototype, "progressWidth", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "height", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "position", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "spacing", void 0), e([o({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], s.prototype, "spacingTop", void 0), e([o({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], s.prototype, "spacingBottom", void 0), e([o({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], s.prototype, "spacingLeft", void 0), e([o({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], s.prototype, "spacingRight", void 0), s = e([a("scb-progress-stepper")], s);
+//#endregion
+export { s as ScbProgressStepper };

package/scb-radio-button/scb-radio-button.js

@@ -0,0 +1,249 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "./scb-radio-group.js";
+import { LitElement as t, css as n, html as r, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import "@material/web/focus/md-focus-ring.js";
+import "@material/web/radio/radio.js";
+//#region src/scb-test-components/scb-radio-button/scb-radio-button.ts
+var s = !1, c = 0, l = (e) => {
+	e.metaKey || e.altKey || e.ctrlKey || (s = !0);
+}, u = () => {
+	s = !1;
+}, d = () => {
+	c === 0 && (window.addEventListener("keydown", l, !0), window.addEventListener("pointerdown", u, !0), window.addEventListener("mousedown", u, !0), window.addEventListener("touchstart", u, !0)), c += 1;
+}, f = () => {
+	c = Math.max(0, c - 1), c === 0 && (window.removeEventListener("keydown", l, !0), window.removeEventListener("pointerdown", u, !0), window.removeEventListener("mousedown", u, !0), window.removeEventListener("touchstart", u, !0));
+}, p = class extends t {
+	constructor(...e) {
+		super(...e), this.disabled = !1, this.checked = !1, this.name = "", this.value = "", this.size = "medium", this.deselectable = !1, this.label = "", this.supportingText = "", this.ariaLabel = "", this._radioId = "", this._showOuterFocusRing = !1, this.#n = () => {
+			this.disabled || this.label?.trim() && s && this.#e(!0);
+		}, this.#r = () => {
+			this.#e(!1);
+		}, this.#i = () => {
+			this.#e(!1);
+		}, this._onClick = (e) => {
+			if (this.disabled) return;
+			e.preventDefault(), e.stopPropagation();
+			let t = this.deselectable ? !this.checked : !0;
+			t !== this.checked && (this.checked = t, this.#a(), this.checked && this.dispatchEvent(new CustomEvent("scb-radio-change", {
+				detail: {
+					name: this.name,
+					source: this
+				},
+				bubbles: !0,
+				composed: !0
+			})), this.dispatchEvent(new Event("input", {
+				bubbles: !0,
+				composed: !0
+			})), this.dispatchEvent(new CustomEvent("change", {
+				detail: {
+					checked: this.checked,
+					value: this.checked ? this.value : ""
+				},
+				bubbles: !0,
+				composed: !0
+			})));
+		}, this._onRadioChange = (e) => {
+			e.detail.name === this.name && e.detail.source !== this && (this.checked = !1);
+		};
+	}
+	#e(e) {
+		this._showOuterFocusRing !== e && (this._showOuterFocusRing = e, this.requestUpdate());
+	}
+	#t() {
+		let e = !!this.label?.trim();
+		this.toggleAttribute("data-has-label", e), e || this.#e(!1);
+	}
+	#n;
+	#r;
+	#i;
+	connectedCallback() {
+		super.connectedCallback(), d(), this._radioId = this.id || `scb-radio-${Math.random().toString(36).substr(2, 9)}`, this.#t(), this.addEventListener("focusin", this.#n), this.addEventListener("focusout", this.#r), this.addEventListener("pointerdown", this.#i, !0), document.addEventListener("scb-radio-change", this._onRadioChange);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), f(), this.removeEventListener("focusin", this.#n), this.removeEventListener("focusout", this.#r), this.removeEventListener("pointerdown", this.#i, !0), document.removeEventListener("scb-radio-change", this._onRadioChange);
+	}
+	firstUpdated() {
+		this.__syncInnerAria(), this.#a();
+	}
+	updated(e) {
+		super.updated(e), e.has("disabled") && (this.toggleAttribute("aria-disabled", this.disabled), this.disabled && this.#e(!1)), (e.has("label") || e.has("supportingText") || e.has("ariaLabel")) && this.__syncInnerAria(), e.has("label") && this.#t(), e.has("checked") && this.#a();
+	}
+	#a() {
+		let e = this.shadowRoot?.querySelector("md-radio");
+		e && (e.checked = this.checked, this.checked ? e.setAttribute("checked", "") : e.removeAttribute("checked"));
+	}
+	__syncInnerAria() {
+		let e = this.shadowRoot?.querySelector("md-radio")?.shadowRoot;
+		if (!e) return;
+		let t = e.querySelector("[role=\"radio\"]") || e.querySelector("input[type=\"radio\"]");
+		if (!t) return;
+		let n = !!this.label?.trim(), r = n ? `${this._radioId}-label` : "", i = this.supportingText ? `${this._radioId}-supporting-text` : "";
+		n && r ? (t.setAttribute("aria-labelledby", r), t.removeAttribute("aria-label")) : (t.removeAttribute("aria-labelledby"), this.ariaLabel?.trim() ? t.setAttribute("aria-label", this.ariaLabel.trim()) : t.removeAttribute("aria-label")), i ? t.setAttribute("aria-describedby", i) : t.removeAttribute("aria-describedby");
+	}
+	static {
+		this.styles = n`
+  /* layout med inline-grid */
+  :host {
+    display: inline-grid;
+    grid-template-columns: auto;
+    grid-template-rows: auto auto;
+    row-gap: 0;
+    font-family: var(--brand-font, 'Inter', sans-serif);
+
+    --scb-radio-text-font: var(--md-sys-typescale-body-medium-font);
+    --scb-radio-text-size: var(--md-sys-typescale-body-medium-size);
+    --scb-radio-text-line-height: var(--md-sys-typescale-body-medium-line-height);
+    --scb-radio-text-tracking: var(--md-sys-typescale-body-medium-tracking);
+    --scb-radio-text-weight: var(--md-sys-typescale-body-medium-weight, var(--weight-regular, 400));
+  }
+
+  :host([size='small']) {
+    --scb-radio-text-font: var(--md-sys-typescale-body-small-font);
+    --scb-radio-text-size: var(--md-sys-typescale-body-small-size);
+    --scb-radio-text-line-height: var(--md-sys-typescale-body-small-line-height);
+    --scb-radio-text-tracking: var(--md-sys-typescale-body-small-tracking);
+    --scb-radio-text-weight: var(--md-sys-typescale-body-small-weight, var(--weight-regular, 400));
+  }
+
+  :host([size='large']) {
+    --scb-radio-text-font: var(--md-sys-typescale-body-large-font);
+    --scb-radio-text-size: var(--md-sys-typescale-body-large-size);
+    --scb-radio-text-line-height: var(--md-sys-typescale-body-large-line-height);
+    --scb-radio-text-tracking: var(--md-sys-typescale-body-large-tracking);
+    --scb-radio-text-weight: var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400));
+  }
+
+  /* Styr horisontellt avstånd när den placeras i horisontell layout */
+  :host([orientation="horizontal"]) {
+    margin-inline-end: var(--scb-radio-gap, var(--spacing-7, 24px));
+  }
+
+  /* Wrapper för md-radio + label */
+  .wrap {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--spacing-5, 16px);
+    cursor: pointer;
+    overflow: visible;
+    position: relative;
+  }
+  :host([disabled]) .wrap { cursor: default; }
+
+  .outer-focus-ring {
+    position: absolute;
+      inset:
+         calc(var(--spacing-2, 4px) * -1)   /* topp */
+         calc(var(--spacing-4, 12px) * -1)  /* höger */
+         calc(var(--spacing-2, 4px) * -1)   /* botten */
+         calc(var(--spacing-4, 12px) * -1); /* vänster */
+    pointer-events: none;
+    --md-focus-ring-shape-start-start: var(--radius-s, 8px);
+    --md-focus-ring-shape-start-end: var(--radius-s, 8px);
+    --md-focus-ring-shape-end-start: var(--radius-s, 8px);
+    --md-focus-ring-shape-end-end: var(--radius-s, 8px);
+  }
+
+  :host([data-has-label]) md-radio::part(focus-ring) {
+    display: none;
+  }
+
+  /* Hit-yta runt md-radio */
+  .radio-wrap {
+    height: var(--scb-radio-target, 40px);
+    align-items: center;
+    display: flex;
+    justify-content: center;
+    overflow: visible;
+  }
+
+  /* Nollställ md-radio marginal */
+  md-radio { margin: 0; }
+
+  /* Label-styling */
+  .lbl {
+    color: var(--md-sys-color-on-surface);
+    font-family: var(--scb-radio-text-font, var(--brand-font));
+    font-size: var(--scb-radio-text-size);
+    line-height: var(--scb-radio-text-line-height);
+    font-weight: var(--scb-radio-text-weight);
+    letter-spacing: var(--scb-radio-text-tracking);
+    margin-top: var(--spacing-1, 2px);
+  }
+  :host([disabled]) .lbl { color: var(--n-60); }
+
+  /* Supporting text styling */
+  .supporting-text {
+    color: var(--md-sys-color-on-surface-variant);
+    font-family: var(--scb-radio-text-font, var(--brand-font));
+    font-size: var(--scb-radio-text-size);
+    line-height: var(--scb-radio-text-line-height, 20px);
+    font-weight: var(--scb-radio-text-weight);
+    letter-spacing: var(--scb-radio-text-tracking);
+    /* gap + wrapperbredd så texten linjerar med labeln */
+    margin-left: calc(var(--spacing-3, 6px) + var(--scb-radio-target, 40px));
+    margin-bottom: var(--spacing-4, 8px);
+  }
+  :host([disabled]) .supporting-text { color: var(--n-60); }
+
+  /* Anpassning för mörkt läge */
+  @media (prefers-color-scheme: dark) {
+    .lbl { color: var(--md-sys-color-on-surface); }
+    .supporting-text { color: var(--md-sys-color-on-surface-variant); }
+  }
+`;
+	}
+	render() {
+		let e = this.supportingText ? `${this._radioId}-supporting-text` : void 0, t = !!this.label?.trim(), n = t ? i : this.ariaLabel || i;
+		return r`
+      <label class="wrap">
+        ${t ? r`<md-focus-ring class="outer-focus-ring" ?visible=${this._showOuterFocusRing}></md-focus-ring>` : i}
+        <div class="radio-wrap">
+          <md-radio
+            id="${this._radioId}"
+            ?disabled=${this.disabled}
+            ?checked=${this.checked}
+            name="${this.name}"
+            value="${this.value}"
+            aria-label=${n}
+            aria-describedby=${e ?? i}
+            @click=${this._onClick}
+          ></md-radio>
+        </div>
+        ${t ? r`<span class="lbl" id="${this._radioId}-label">${this.label}</span>` : i}
+      </label>
+
+      ${this.supportingText ? r`<div id="${e}" class="supporting-text">
+            ${this.supportingText}
+          </div>` : i}
+      <slot></slot>
+    `;
+	}
+};
+e([o({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "disabled", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "checked", void 0), e([o({
+	type: String,
+	reflect: !0
+})], p.prototype, "name", void 0), e([o({
+	type: String,
+	reflect: !0
+})], p.prototype, "value", void 0), e([o({
+	type: String,
+	reflect: !0
+})], p.prototype, "size", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "deselectable", void 0), e([o({ type: String })], p.prototype, "label", void 0), e([o({
+	type: String,
+	attribute: "supporting-text"
+})], p.prototype, "supportingText", void 0), e([o({
+	type: String,
+	attribute: "aria-label"
+})], p.prototype, "ariaLabel", void 0), p = e([a("scb-radio-button")], p);
+//#endregion
+export { p as ScbRadioButton };