scb-wc 0.1.2 → 0.1.4

package/scb-horizontal-scroller/scb-horizontal-scroller.js

@@ -0,0 +1,353 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "../scb-button/scb-button.js";
+import "../scb-icon-button/scb-icon-button.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";
+//#region src/scb-test-components/scb-horizontal-scroller/scb-horizontal-scroller.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.variant = "standard", this.width = "100%", this.showScrollbar = !1, this.rightScrollButtonLabel = "Scrolla höger", this.leftScrollButtonLabel = "Scrolla vänster", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.contentFlex = !1, this.internalGap = "", this._canScrollLeft = !1, this._canScrollRight = !1, this.updateScrollButtons = () => {
+			let e = this.scrollerEl || this.shadowRoot?.querySelector(".scb-horizontal-scroller");
+			if (!e) {
+				this._canScrollLeft &&= !1, this._canScrollRight &&= !1, this.removeAttribute("data-scroll-left"), this.removeAttribute("data-scroll-right");
+				return;
+			}
+			let t = e.scrollLeft > 0, n = e.scrollLeft + e.clientWidth < e.scrollWidth - 1;
+			this._canScrollLeft !== t && (this._canScrollLeft = t), this._canScrollRight !== n && (this._canScrollRight = n), t ? this.setAttribute("data-scroll-left", "") : this.removeAttribute("data-scroll-left"), n ? this.setAttribute("data-scroll-right", "") : this.removeAttribute("data-scroll-right");
+		}, this.lastScrollLeft = 0, this.isScrolling = !1, this.scrollEndTimeout = null, this.scrollerEl = null, this.slotEl = null, this.sizeObserver = null, this.resizeRaf = null, this.handleScroll = () => {
+			let e = this.shadowRoot?.querySelector(".scb-horizontal-scroller");
+			e && (this.updateScrollButtons(), this.dispatchCustomEventWithAlias("scb-scroll", { scrollLeft: e.scrollLeft }), this.isScrolling || (this.isScrolling = !0, this.dispatchCustomEventWithAlias("scb-scroll-start", { scrollLeft: e.scrollLeft })), clearTimeout(this.scrollEndTimeout), this.scrollEndTimeout = setTimeout(() => {
+				this.isScrolling = !1, this.dispatchCustomEventWithAlias("scb-scroll-end", { scrollLeft: e.scrollLeft });
+			}, 120), e.scrollLeft > this.lastScrollLeft ? this.dispatchCustomEventWithAlias("scb-scroll-right", { scrollLeft: e.scrollLeft }) : e.scrollLeft < this.lastScrollLeft && this.dispatchCustomEventWithAlias("scb-scroll-left", { scrollLeft: e.scrollLeft }), this.lastScrollLeft = e.scrollLeft);
+		}, this.handleWheel = (e) => {
+			let t = this.scrollerEl || this.shadowRoot?.querySelector(".scb-horizontal-scroller");
+			if (!t || e.deltaY === 0) return;
+			let n = t.scrollLeft, r = n > 0, i = n + t.clientWidth < t.scrollWidth - 1;
+			!r && !i || (t.scrollLeft += e.deltaY, t.scrollLeft !== n && e.preventDefault());
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: flex;
+      position: relative;
+      align-items: center;
+      gap: var(--spacing-3);
+      padding: 0;
+      overflow: hidden;
+      margin-block-start: var(--scb-horizontal-scroller-spacing-block-start, 0);
+      margin-block-end: var(--scb-horizontal-scroller-spacing-block-end, 0);
+      margin-inline-start: var(--scb-horizontal-scroller-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-horizontal-scroller-spacing-inline-end, 0);
+    }
+    .scb-horizontal-scroller {
+      overflow-x: auto;
+      -ms-overflow-style: none; /* IE and Edge */
+      scrollbar-width: none;
+      width: 100%;
+    }
+    :host([show-scrollbar]) .scb-horizontal-scroller {
+      scrollbar-width: auto;
+    }
+
+    :host([content-flex]) .scb-horizontal-scroller {
+      display: flex;
+      flex-direction: row;
+      flex: 1 1 auto;
+    }
+
+    .scb-horizontal-scroller::-webkit-scrollbar {
+      border-radius: var(--md-sys-shape-corner-large);
+      height: 4px;
+      width: 10px;
+    }
+    .scb-horizontal-scroller::-webkit-scrollbar-thumb {
+      background: var(--md-sys-color-on-surface);
+      border-radius: var(--md-sys-shape-corner-large);
+      cursor: pointer;
+    }
+    .scb-horizontal-scroller::-webkit-scrollbar-track {
+      background: var(--md-sys-color-secondary-container);
+      border-radius: var(--md-sys-shape-corner-large);
+    }
+    .scb-horizontal-scroller:focus {
+      outline: none;
+    }
+    md-focus-ring {
+      border-radius: var(--scb-card-focus-ring-radius, var(--md-sys-shape-corner-large));
+    }
+
+    :host([show-scrollbar]) .scb-horizontal-scroller.canScroll {
+      padding-bottom: var(--spacing-5);
+    }
+    slot {
+      display: block;
+      box-sizing: border-box;
+      padding-block: var(--spacing-3);
+      padding-inline: 2px;
+      min-width: var(--scb-horizontal-scroller-width, auto);
+    }
+    :host([content-flex]) .scb-horizontal-scroller slot {
+      display: flex;
+      gap: var(--scb-horizontal-scroller-internal-gap);
+    }
+    .scroll-button-left {
+      left: 0px;
+      position: absolute;
+      z-index: 3;
+    }
+    .scroll-button-right {
+      right: 2px;
+      position: absolute;
+      z-index: 3;
+    }
+    .scroll-shadow-left,
+    .scroll-shadow-right {
+      position: absolute;
+      top: 0;
+      width: 5px;
+      bottom: 0;
+      pointer-events: none;
+      background: none;
+      box-shadow: none;
+      transition: box-shadow 0.2s;
+      z-index: 2;
+    }
+    .scroll-shadow-left {
+      left: 0;
+    }
+    .scroll-shadow-right {
+      right: 0;
+    }
+    :host([data-scroll-left]) .scroll-shadow-left {
+      background: var(--md-sys-color-surface-container-lowest);
+      box-shadow:
+        12px 0 30px rgba(0, 0, 0, 0.24),
+        4px 0 12px rgba(78, 5, 5, 0.14);
+    }
+    :host([data-scroll-left]) .scroll-shadow-left::after {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+    }
+    :host([data-scroll-right]) .scroll-shadow-right {
+      background: var(--md-sys-color-surface-container-lowest);
+      box-shadow:
+        -12px 0 30px rgba(0, 0, 0, 0.24),
+        -4px 0 12px rgba(0, 0, 0, 0.14);      
+    }
+    :host([data-scroll-right]) .scroll-shadow-right::after {
+      content: '';
+      position: absolute;
+      inset-block: 0;
+    }
+    :host([variant='inline']) {
+      flex-direction: column;
+      align-items: unset;
+      padding: 0;
+      .scroll-buttons {
+        display: flex;
+        gap: var(--spacing-3);
+      }
+      .scroll-button-right {
+        position: relative;
+        right: unset;
+        z-index: auto;
+        margin-left: auto;
+      }
+      .scroll-button-left {
+        position: relative;
+        left: unset;
+        z-index: auto;
+      }
+    }
+    :host([variant='inline'][show-scrollbar]) {
+      gap: var(--spacing-5);
+    }
+  `;
+	}
+	getScrollStep() {
+		let e = this.scrollerEl || this.shadowRoot?.querySelector(".scb-horizontal-scroller");
+		return e ? Math.max(Math.round(e.clientWidth * .8), 120) : 200;
+	}
+	doScrollBy(e) {
+		let t = this.shadowRoot?.querySelector(".scb-horizontal-scroller");
+		t && t.scrollBy({
+			left: e,
+			behavior: "smooth"
+		});
+	}
+	connectedCallback() {
+		super.connectedCallback(), this.style.setProperty("--scb-horizontal-scroller-width", this.width);
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), this.scrollerEl && (this.scrollerEl.removeEventListener("scroll", this.handleScroll), this.scrollerEl.removeEventListener("wheel", this.handleWheel)), this.sizeObserver &&= (this.sizeObserver.disconnect(), null), this.resizeRaf !== null && (cancelAnimationFrame(this.resizeRaf), this.resizeRaf = null), this.scrollEndTimeout &&= (clearTimeout(this.scrollEndTimeout), null), this.scrollerEl = null, this.slotEl = null;
+	}
+	dispatchCustomEvent(e, t = {}) {
+		this.dispatchEvent(new CustomEvent(e, {
+			detail: t,
+			bubbles: !0,
+			composed: !0
+		}));
+	}
+	dispatchCustomEventWithAlias(e, t = {}) {
+		if (this.dispatchCustomEvent(e, t), e.includes("-")) {
+			let n = e.replace(/-/g, "");
+			this.dispatchCustomEvent(n, t);
+		}
+	}
+	firstUpdated() {
+		this.scrollerEl = this.shadowRoot?.querySelector(".scb-horizontal-scroller"), this.slotEl = this.shadowRoot?.querySelector("slot");
+		let e = this.shadowRoot?.querySelector(".scroll-shadow-left"), t = this.shadowRoot?.querySelector(".scroll-shadow-right");
+		this.scrollerEl && (this.scrollerEl.addEventListener("scroll", this.handleScroll), this.scrollerEl.addEventListener("wheel", this.handleWheel, { passive: !1 }));
+		let n = () => {
+			if (this.slotEl && e && t) {
+				let n = this.slotEl.getBoundingClientRect();
+				e.style.height = `${n.height}px`, t.style.height = `${n.height}px`;
+			}
+		}, r = () => {
+			n(), this.updateScrollButtons();
+		}, i = () => {
+			this.resizeRaf === null && (this.resizeRaf = requestAnimationFrame(() => {
+				this.resizeRaf = null, r();
+			}));
+		};
+		requestAnimationFrame(() => {
+			r();
+		}), this.slotEl && this.slotEl.addEventListener("slotchange", () => {
+			i();
+		}), this.sizeObserver = new ResizeObserver(() => {
+			i();
+		}), this.scrollerEl && this.sizeObserver.observe(this.scrollerEl), this.slotEl && this.sizeObserver.observe(this.slotEl), this.#e(), this.#t();
+	}
+	updated(e) {
+		e.has("width") && this.style.setProperty("--scb-horizontal-scroller-width", this.width), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e(), (e.has("internalGap") || e.has("contentFlex")) && this.#t();
+	}
+	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;
+	}
+	#e() {
+		let e = this.mapSpacingToken(this.spacing), t = this.mapSpacingToken(this.spacingTop), n = this.mapSpacingToken(this.spacingBottom), r = this.mapSpacingToken(this.spacingLeft), i = this.mapSpacingToken(this.spacingRight), a = t ?? e, o = n ?? e;
+		a ? this.style.setProperty("--scb-horizontal-scroller-spacing-block-start", a) : this.style.removeProperty("--scb-horizontal-scroller-spacing-block-start"), o ? this.style.setProperty("--scb-horizontal-scroller-spacing-block-end", o) : this.style.removeProperty("--scb-horizontal-scroller-spacing-block-end"), r ? this.style.setProperty("--scb-horizontal-scroller-spacing-inline-start", r) : this.style.removeProperty("--scb-horizontal-scroller-spacing-inline-start"), i ? this.style.setProperty("--scb-horizontal-scroller-spacing-inline-end", i) : this.style.removeProperty("--scb-horizontal-scroller-spacing-inline-end");
+	}
+	#t() {
+		let e = this.mapSpacingToken(this.internalGap);
+		this.contentFlex && e ? this.style.setProperty("--scb-horizontal-scroller-internal-gap", e) : this.style.removeProperty("--scb-horizontal-scroller-internal-gap");
+	}
+	render() {
+		let e = this.variant, t = this._canScrollLeft || this._canScrollRight;
+		switch (e) {
+			case "inline": return r`
+          <div class="scb-horizontal-scroller ${t ? "canScroll" : ""}" tabindex="0">
+            ${this.variant == "inline" ? "" : r`<div class="scroll-shadow-left"></div>`}
+            <slot></slot>
+            <md-focus-ring inward></md-focus-ring>
+            ${this.variant == "inline" ? "" : r`<div class="scroll-shadow-right"></div>`}
+          </div>
+          ${t ? r`
+                <div class="scroll-buttons">
+                  ${this._canScrollLeft ? r`
+                        <scb-button
+                          class="scroll-button-left"
+                          variant="text"
+                          label="${this.leftScrollButtonLabel}"
+                          aria-label="Scrolla vänster"
+                          icon="chevron_left"
+                          @click="${() => this.doScrollBy(-this.getScrollStep())}"
+                        ></scb-button>
+                      ` : ""}
+
+                  ${this._canScrollRight ? r`
+                        <scb-button
+                          class="scroll-button-right"
+                          variant="text"
+                          label="${this.rightScrollButtonLabel}"
+                          aria-label="Scrolla höger"
+                          icon="chevron_right"
+                          trailing-icon
+                          @click="${() => this.doScrollBy(this.getScrollStep())}"
+                        ></scb-button>
+                      ` : ""}
+                </div>
+              ` : ""}
+        `;
+			default: return r`
+          ${this._canScrollLeft ? r`
+                <scb-icon-button
+                  class="scroll-button-left"
+                  icon="chevron_left"
+                  aria-label="Scrolla vänster"
+                  variant="filled-tonal"
+                  @click="${() => this.doScrollBy(-this.getScrollStep())}"
+                ></scb-icon-button>
+              ` : ""}
+          <div class="scroll-shadow-left"></div>
+          <div class="scb-horizontal-scroller ${t ? "canScroll" : ""}">
+            <slot></slot>
+            <md-focus-ring inward></md-focus-ring>
+          </div>
+          <div class="scroll-shadow-right"></div>
+          ${this._canScrollRight ? r`
+                <scb-icon-button
+                  class="scroll-button-right"
+                  icon="chevron_right"
+                  aria-label="Scrolla höger"
+                  variant="filled-tonal"
+                  @click="${() => this.doScrollBy(this.getScrollStep())}"
+                ></scb-icon-button>
+              ` : ""}
+        `;
+		}
+	}
+};
+e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "variant", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "width", void 0), e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "show-scrollbar"
+})], s.prototype, "showScrollbar", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "right-scroll-button-label"
+})], s.prototype, "rightScrollButtonLabel", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "left-scroll-button-label"
+})], s.prototype, "leftScrollButtonLabel", void 0), e([a({
+	type: String,
+	reflect: !0
+})], s.prototype, "spacing", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-top"
+})], s.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-bottom"
+})], s.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-left"
+})], s.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "spacing-right"
+})], s.prototype, "spacingRight", void 0), e([a({
+	type: Boolean,
+	reflect: !0,
+	attribute: "content-flex"
+})], s.prototype, "contentFlex", void 0), e([a({
+	type: String,
+	reflect: !0,
+	attribute: "internal-gap"
+})], s.prototype, "internalGap", void 0), e([o()], s.prototype, "_canScrollLeft", void 0), e([o()], s.prototype, "_canScrollRight", void 0), s = e([i("scb-horizontal-scroller")], s);
+//#endregion
+export { s as ScbHorizontalScroller };

package/scb-icon-button/scb-icon-button.js

@@ -0,0 +1,335 @@
+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, nothing as i } from "lit";
+import { customElement as a, property as o } from "lit/decorators.js";
+import "@material/web/icon/icon.js";
+//#region src/scb-test-components/scb-icon-button/scb-icon-button.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.icon = "home", this.ariaLabel = "", this.variant = "standard", this.size = "medium", this.shape = "round", this.toggle = !1, this.selected = !1, this.toggleofficon = "add", this.toggleonicon = "remove", this.disabled = !1, this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.href = "", this.target = "", this.rel = "", this.__filledValue = !1, this.__loadedVariants = /* @__PURE__ */ new Set(), this.__iconLoaded = !1, this.__lastMdHost = null, this.__onInnerChange = () => {
+			let e = !!this.__getMdHost()?.selected;
+			this.toggle && (this.selected = e), this.dispatchEvent(new CustomEvent("change", {
+				detail: { selected: e },
+				bubbles: !0,
+				composed: !0
+			}));
+		};
+	}
+	get filled() {
+		return this.__filledValue;
+	}
+	set filled(e) {
+		let t = !!e, n = this.__filledValue;
+		n !== t && (this.__filledValue = t, this.requestUpdate("filled", n), this.requestUpdate("iconFilled", n));
+	}
+	get iconFilled() {
+		return this.__filledValue;
+	}
+	set iconFilled(e) {
+		let t = !!e, n = this.__filledValue;
+		n !== t && (this.__filledValue = t, this.requestUpdate("iconFilled", n), this.requestUpdate("filled", n));
+	}
+	async firstUpdated() {
+		await this.__ensureDepsLoaded(), await this.updateComplete, this.__attachChangeListener(), this.__syncTitleAndAria(), this.#e();
+	}
+	updated(e) {
+		if (super.updated(e), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#e(), e.has("variant")) {
+			this.__ensureDepsLoaded().then(() => {
+				queueMicrotask(() => {
+					this.__attachChangeListener(), this.__syncTitleAndAria();
+				});
+			});
+			return;
+		}
+		(e.has("toggle") || e.has("icon") || e.has("toggleofficon") || e.has("toggleonicon") || e.has("selected") || e.has("disabled") || e.has("ariaLabel")) && queueMicrotask(() => {
+			this.__attachChangeListener(), this.__syncTitleAndAria();
+		});
+	}
+	disconnectedCallback() {
+		this.__lastMdHost?.removeEventListener?.("change", this.__onInnerChange), this.__lastMdHost = null, super.disconnectedCallback();
+	}
+	async __ensureDepsLoaded() {
+		if (!this.__loadedVariants.has(this.variant)) {
+			switch (this.variant) {
+				case "filled":
+					await import("@material/web/iconbutton/filled-icon-button.js");
+					break;
+				case "outlined":
+					await import("@material/web/iconbutton/outlined-icon-button.js");
+					break;
+				case "filled-tonal":
+					await import("@material/web/iconbutton/filled-tonal-icon-button.js");
+					break;
+				default:
+					await import("@material/web/iconbutton/icon-button.js");
+					break;
+			}
+			this.__loadedVariants.add(this.variant);
+		}
+		this.__iconLoaded ||= (await import("@material/web/icon/icon.js"), !0);
+	}
+	__getMdHost() {
+		return this.renderRoot.querySelector("md-filled-icon-button, md-outlined-icon-button, md-filled-tonal-icon-button, md-icon-button");
+	}
+	__attachChangeListener() {
+		let e = this.__getMdHost();
+		e && e !== this.__lastMdHost && (this.__lastMdHost?.removeEventListener?.("change", this.__onInnerChange), e.addEventListener("change", this.__onInnerChange), this.__lastMdHost = e), this.toggle && e && "selected" in e && (e.selected = this.selected);
+	}
+	__syncTitleAndAria() {
+		let e = this.__getMdHost();
+		if (!e) return;
+		let t = (this.getAttribute("title") || "").trim(), n = (this.ariaLabel || this.getAttribute("aria-label") || "").trim(), r = this.getAttribute("aria-controls"), i = this.getAttribute("aria-expanded"), a = n || t || this.icon.trim() || void 0;
+		a ? e.setAttribute("aria-label", a) : e.removeAttribute("aria-label"), r === null ? e.removeAttribute("aria-controls") : e.setAttribute("aria-controls", r), i === null ? e.removeAttribute("aria-expanded") : e.setAttribute("aria-expanded", i);
+	}
+	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;
+	}
+	#e() {
+		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-icon-button-spacing-block-start", t) : this.style.removeProperty("--scb-icon-button-spacing-block-start"), n ? this.style.setProperty("--scb-icon-button-spacing-block-end", n) : this.style.removeProperty("--scb-icon-button-spacing-block-end"), r ? this.style.setProperty("--scb-icon-button-spacing-inline-start", r) : this.style.removeProperty("--scb-icon-button-spacing-inline-start"), i ? this.style.setProperty("--scb-icon-button-spacing-inline-end", i) : this.style.removeProperty("--scb-icon-button-spacing-inline-end");
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: inline-flex;
+      margin-block-start: var(--scb-icon-button-spacing-block-start, 0);
+      margin-block-end: var(--scb-icon-button-spacing-block-end, 0);
+      margin-inline-start: var(--scb-icon-button-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-icon-button-spacing-inline-end, 0);
+      --scb-icon-button-font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+      --scb-icon-button-shape-radius: var(--radius-full, 1000px);
+
+      --scb-icon-button-shape-square-radius: var(--radius-m, 12px);
+      --scb-icon-button-shape-square-radius-large: var(--radius-l, 16px);
+
+      --scb-icon-button-icon-size: var(--icon-size-medium, 24px);
+      --scb-icon-button-padding: var(--spacing-3, 12px);
+      --scb-icon-button-container-size: calc(
+        var(--scb-icon-button-icon-size) + (var(--scb-icon-button-padding) * 2)
+      );
+    }
+
+    :host([size="tiny"]) {
+      --scb-icon-button-icon-size: var(--icon-size-tiny, 12px);
+      --scb-icon-button-padding: var(--spacing-1, 4px);
+    }
+
+    :host([size="extra-small"]) {
+      --scb-icon-button-icon-size: var(--icon-size-extra-small, 16px);
+      --scb-icon-button-padding: var(--spacing-2, 8px);
+    }
+
+    :host([size="small"]) {
+      --scb-icon-button-icon-size: var(--icon-size-small, 20px);
+      --scb-icon-button-padding: calc(var(--spacing-3, 12px) - var(--spacing-1, 4px));
+    }
+
+    :host([size="medium"]) {
+      --scb-icon-button-icon-size: var(--icon-size-medium, 24px);
+      --scb-icon-button-padding: var(--spacing-3, 12px);
+    }
+
+    :host([size="large"]) {
+      --scb-icon-button-icon-size: var(--icon-size-medium, 24px);
+      --scb-icon-button-padding: var(--spacing-5, 20px);
+    }
+
+    :host([shape="square"]) {
+      --scb-icon-button-shape-radius: var(--scb-icon-button-shape-square-radius);
+    }
+
+    :host([shape="square"][size="large"]) {
+      --scb-icon-button-shape-radius: var(--scb-icon-button-shape-square-radius-large);
+    }
+
+    :host([filled]),
+    :host([icon-filled]) {
+      --scb-icon-button-font-variation-settings: 'FILL' 1, 'wght' 400, 'GRAD' 0, 'opsz' 24;
+    }
+
+    md-icon {
+      --md-icon-size: var(--scb-icon-button-icon-size);
+      font-size: var(--scb-icon-button-icon-size) !important;
+      --md-icon-font-variation-settings: var(--scb-icon-button-font-variation-settings) !important;
+      font-variation-settings: var(--scb-icon-button-font-variation-settings) !important;
+    }
+
+    md-icon-button {
+      --md-icon-button-icon-size: var(--scb-icon-button-icon-size);
+      --md-icon-button-container-size: var(--scb-icon-button-container-size);
+      --md-icon-button-state-layer-size: var(--scb-icon-button-container-size);
+      --md-icon-button-container-width: var(--scb-icon-button-container-size);
+      --md-icon-button-container-height: var(--scb-icon-button-container-size);
+      --md-icon-button-state-layer-width: var(--scb-icon-button-container-size);
+      --md-icon-button-state-layer-height: var(--scb-icon-button-container-size);
+      --md-icon-button-container-shape: var(--scb-icon-button-shape-radius);
+      border-radius: var(--scb-icon-button-shape-radius) !important;
+    }
+
+    md-filled-icon-button {
+      --md-filled-icon-button-icon-size: var(--scb-icon-button-icon-size);
+      --md-filled-icon-button-container-width: var(--scb-icon-button-container-size);
+      --md-filled-icon-button-container-height: var(--scb-icon-button-container-size);
+    }
+
+    md-filled-tonal-icon-button {
+      --md-filled-tonal-icon-button-icon-size: var(--scb-icon-button-icon-size);
+      --md-filled-tonal-icon-button-container-width: var(--scb-icon-button-container-size);
+      --md-filled-tonal-icon-button-container-height: var(--scb-icon-button-container-size);
+    }
+
+    md-outlined-icon-button {
+      --md-outlined-icon-button-icon-size: var(--scb-icon-button-icon-size);
+      --md-outlined-icon-button-container-width: var(--scb-icon-button-container-size);
+      --md-outlined-icon-button-container-height: var(--scb-icon-button-container-size);
+    }
+
+    md-icon-button,
+    md-filled-icon-button,
+    md-outlined-icon-button,
+    md-filled-tonal-icon-button {
+      --md-icon-button-container-shape: var(--scb-icon-button-shape-radius);
+      --md-filled-icon-button-container-shape: var(--scb-icon-button-shape-radius);
+      --md-outlined-icon-button-container-shape: var(--scb-icon-button-shape-radius);
+      --md-filled-tonal-icon-button-container-shape: var(--scb-icon-button-shape-radius);
+      --md-icon-font-variation-settings: var(--scb-icon-button-font-variation-settings);
+      border-radius: var(--scb-icon-button-shape-radius) !important;
+    }
+
+    md-icon-button::part(button),
+    md-filled-icon-button::part(button),
+    md-outlined-icon-button::part(button),
+    md-filled-tonal-icon-button::part(button) {
+      border-radius: var(--scb-icon-button-shape-radius) !important;
+    }
+`;
+	}
+	__renderToggleIcons() {
+		return r`
+      <md-icon ?filled=${this.iconFilled || this.filled} aria-hidden="true">${this.toggleofficon}</md-icon>
+      <md-icon ?filled=${this.iconFilled || this.filled} slot="selected" aria-hidden="true">${this.toggleonicon}</md-icon>
+    `;
+	}
+	__renderSingleIcon() {
+		return r`<md-icon ?filled=${this.iconFilled || this.filled} aria-hidden="true">${this.icon}</md-icon>`;
+	}
+	__renderMd() {
+		let e = this.toggle ? this.__renderToggleIcons() : this.__renderSingleIcon();
+		if (this.toggle) switch (this.variant) {
+			case "filled": return r`
+            <md-filled-icon-button
+              toggle
+              ?selected=${this.selected}
+              ?disabled=${this.disabled}
+              href=${this.href || i}
+              target=${this.target || i}
+              rel=${this.rel || i}
+            >
+              ${e}
+            </md-filled-icon-button>
+          `;
+			case "outlined": return r`
+            <md-outlined-icon-button
+              toggle
+              ?selected=${this.selected}
+              ?disabled=${this.disabled}
+              href=${this.href || i}
+              target=${this.target || i}
+              rel=${this.rel || i}
+            >
+              ${e}
+            </md-outlined-icon-button>
+          `;
+			case "filled-tonal": return r`
+            <md-filled-tonal-icon-button
+              toggle
+              ?selected=${this.selected}
+              ?disabled=${this.disabled}
+              href=${this.href || i}
+              target=${this.target || i}
+              rel=${this.rel || i}
+            >
+              ${e}
+            </md-filled-tonal-icon-button>
+          `;
+			default: return r`
+            <md-icon-button toggle ?selected=${this.selected} ?disabled=${this.disabled} href=${this.href || i} target=${this.target || i} rel=${this.rel || i}>
+              ${e}
+            </md-icon-button>
+          `;
+		}
+		switch (this.variant) {
+			case "filled": return r`
+          <md-filled-icon-button ?disabled=${this.disabled} href=${this.href || i} target=${this.target || i} rel=${this.rel || i}>
+            ${e}
+          </md-filled-icon-button>
+        `;
+			case "outlined": return r`
+          <md-outlined-icon-button ?disabled=${this.disabled} href=${this.href || i} target=${this.target || i} rel=${this.rel || i}>
+            ${e}
+          </md-outlined-icon-button>
+        `;
+			case "filled-tonal": return r`
+          <md-filled-tonal-icon-button ?disabled=${this.disabled} href=${this.href || i} target=${this.target || i} rel=${this.rel || i}>
+            ${e}
+          </md-filled-tonal-icon-button>
+        `;
+			default: return r`
+          <md-icon-button ?disabled=${this.disabled} href=${this.href || i} target=${this.target || i} rel=${this.rel || i}>
+            ${e}
+          </md-icon-button>
+        `;
+		}
+	}
+	render() {
+		return this.__renderMd();
+	}
+};
+e([o({ type: String })], s.prototype, "icon", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "filled", null), e([o({
+	type: Boolean,
+	attribute: "icon-filled",
+	reflect: !0
+})], s.prototype, "iconFilled", null), e([o({
+	type: String,
+	attribute: "aria-label"
+})], s.prototype, "ariaLabel", void 0), e([o({ type: String })], s.prototype, "variant", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "size", void 0), e([o({
+	type: String,
+	reflect: !0
+})], s.prototype, "shape", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "toggle", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "selected", void 0), e([o({ type: String })], s.prototype, "toggleofficon", void 0), e([o({ type: String })], s.prototype, "toggleonicon", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "disabled", 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), e([o({ type: String })], s.prototype, "href", void 0), e([o({ type: String })], s.prototype, "target", void 0), e([o({ type: String })], s.prototype, "rel", void 0), s = e([a("scb-icon-button")], s);
+//#endregion
+export { s as ScbIconButton };