scb-wc 0.1.2 → 0.1.4

package/scb-checkbox/scb-checkbox-group.js

@@ -0,0 +1,104 @@
+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 } from "lit/decorators.js";
+//#region src/scb-test-components/scb-checkbox/scb-checkbox-group.ts
+var o = class extends t {
+	constructor(...e) {
+		super(...e), this.orientation = "vertical", this.disabled = !1, this.size = "medium", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this.#e = () => {
+			let e = this.shadowRoot?.querySelector("slot");
+			if (!e) return;
+			let t = e.assignedElements({ flatten: !0 }).filter((e) => e.tagName.toLowerCase() === "scb-checkbox");
+			for (let e of t) {
+				this.disabled ? e.setAttribute("disabled", "") : e.removeAttribute("disabled"), this.orientation === "horizontal" ? e.setAttribute("orientation", "horizontal") : e.removeAttribute("orientation");
+				let t = e.hasAttribute("data-size-from-group");
+				this.size === "medium" ? t && (e.removeAttribute("size"), e.removeAttribute("data-size-from-group")) : (!e.hasAttribute("size") || t) && (e.setAttribute("size", this.size), e.setAttribute("data-size-from-group", ""));
+			}
+		};
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      /* Vertikal standard-spacing mellan items i gruppen */
+      --scb-checkbox-gap: var(--spacing-4, 12px);
+
+      margin-block-start: var(--scb-checkbox-group-spacing-block-start, 0);
+      margin-block-end: var(--scb-checkbox-group-spacing-block-end, 0);
+      margin-inline-start: var(--scb-checkbox-group-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-checkbox-group-spacing-inline-end, 0);
+    }
+
+    /* Horisontell standard-spacing mellan items om spacing för gruppen inte overrideas via CSS-variabel */
+    :host([orientation='horizontal']) {
+      --scb-checkbox-gap: var(--spacing-8, 32px);
+    }
+
+    .g {
+      display: flex;
+      flex-direction: var(--_dir, column);
+      align-items: flex-start;
+      gap: var(--scb-checkbox-gap);
+    }
+
+    /* När checkboxar ligger i en grupp ska spacing ägas av gruppen, inte av enskilda items */
+    ::slotted(scb-checkbox) {
+      --scb-checkbox-gap: 0;
+    }
+  `;
+	}
+	render() {
+		let e = this.orientation === "horizontal" ? "row" : "column";
+		return r`
+      <div class="g" role="group" aria-disabled=${String(this.disabled)} style=${`--_dir:${e}`}>
+        <slot @slotchange=${this.#e}></slot>
+      </div>
+    `;
+	}
+	firstUpdated() {
+		this.#t(), this.#e();
+	}
+	updated(e) {
+		(e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#t(), (e.has("disabled") || e.has("orientation") || e.has("size")) && this.#e();
+	}
+	#e;
+	#t() {
+		let e = this.#n(this.spacing), t = this.#n(this.spacingTop) ?? e, n = this.#n(this.spacingBottom) ?? e, r = this.#n(this.spacingLeft), i = this.#n(this.spacingRight);
+		t ? this.style.setProperty("--scb-checkbox-group-spacing-block-start", t) : this.style.removeProperty("--scb-checkbox-group-spacing-block-start"), n ? this.style.setProperty("--scb-checkbox-group-spacing-block-end", n) : this.style.removeProperty("--scb-checkbox-group-spacing-block-end"), r ? this.style.setProperty("--scb-checkbox-group-spacing-inline-start", r) : this.style.removeProperty("--scb-checkbox-group-spacing-inline-start"), i ? this.style.setProperty("--scb-checkbox-group-spacing-inline-end", i) : this.style.removeProperty("--scb-checkbox-group-spacing-inline-end");
+	}
+	#n(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([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "orientation", void 0), e([a({
+	type: Boolean,
+	reflect: !0
+})], o.prototype, "disabled", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "size", void 0), e([a({
+	type: String,
+	reflect: !0
+})], o.prototype, "spacing", void 0), e([a({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], o.prototype, "spacingTop", void 0), e([a({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], o.prototype, "spacingBottom", void 0), e([a({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], o.prototype, "spacingLeft", void 0), e([a({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], o.prototype, "spacingRight", void 0), o = e([i("scb-checkbox-group")], o);
+//#endregion
+export { o as ScbCheckboxGroup };

package/scb-checkbox/scb-checkbox.js

@@ -0,0 +1,316 @@
+import { __decorate as e } from "../_virtual/_@oxc-project_runtime@0.126.0/helpers/decorate.js";
+import "./scb-checkbox-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/checkbox/checkbox.js";
+//#region src/scb-test-components/scb-checkbox/scb-checkbox.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 {
+	static {
+		this.formAssociated = !0;
+	}
+	constructor() {
+		super(), this._internals = null, this.disabled = !1, this.indeterminate = !1, this.checked = !1, this.required = !1, this.size = "medium", this.label = "", this.supportingText = "", this.ariaLabel = "", this.name = "", this.value = "on", this.spacing = void 0, this.spacingTop = void 0, this.spacingBottom = void 0, this.spacingLeft = void 0, this.spacingRight = void 0, this._form = null, this._formResetHandler = null, this._initialChecked = !1, this._customValidationMessage = "", this._checkboxId = "", this._showOuterFocusRing = !1, this.#n = () => {
+			this.disabled || this.label?.trim() && s && this.#e(!0);
+		}, this.#r = () => {
+			this.#e(!1);
+		}, this.#i = () => {
+			this.#e(!1);
+		}, "attachInternals" in this && (this._internals = this.attachInternals());
+	}
+	#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._checkboxId = this.id || `scb-checkbox-${Math.random().toString(36).slice(2, 11)}`, this._initialChecked = this.checked, this.#t(), this.addEventListener("focusin", this.#n), this.addEventListener("focusout", this.#r), this.addEventListener("pointerdown", this.#i, !0), this._form = this.closest("form"), this._form && (this._formResetHandler = () => {
+			this.checked = this._initialChecked, this.indeterminate = !1, this.__syncFormValue();
+		}, this._form.addEventListener("reset", this._formResetHandler, !0)), this.__syncFormValue();
+	}
+	disconnectedCallback() {
+		super.disconnectedCallback(), f(), this.removeEventListener("focusin", this.#n), this.removeEventListener("focusout", this.#r), this.removeEventListener("pointerdown", this.#i, !0), this._form && this._formResetHandler && this._form.removeEventListener("reset", this._formResetHandler, !0);
+	}
+	firstUpdated() {
+		let e = this.shadowRoot?.querySelector("md-checkbox");
+		e && e.addEventListener("change", () => {
+			let t = e, n = !!t.checked, r = !!t.indeterminate;
+			this.checked = n, this.indeterminate = r, this.dispatchEvent(new CustomEvent("change", {
+				detail: {
+					checked: n,
+					indeterminate: r
+				},
+				bubbles: !0,
+				composed: !0
+			}));
+		}), (this.shadowRoot?.querySelector("label.wrap"))?.addEventListener("click", (e) => {
+			if (!this.disabled && !e.composedPath().some((e) => {
+				let t = e;
+				return t?.tagName?.toLowerCase?.() === "md-checkbox" || t?.classList?.contains("box-wrap");
+			})) {
+				e.preventDefault();
+				let t = this.shadowRoot.querySelector("md-checkbox");
+				t && (t.checked = !t.checked, t.dispatchEvent(new Event("change", {
+					bubbles: !0,
+					composed: !0
+				})));
+			}
+		}), this.__syncInnerAria(), this.__syncValidity(), 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") || e.has("disabled") || e.has("value")) && this.__syncFormValue(), (e.has("checked") || e.has("disabled") || e.has("required")) && this.__syncValidity(), (e.has("spacing") || e.has("spacingTop") || e.has("spacingBottom") || e.has("spacingLeft") || e.has("spacingRight")) && this.#a();
+	}
+	formDisabledCallback(e) {
+		this.disabled = e;
+	}
+	__syncInnerAria() {
+		let e = this.shadowRoot?.querySelector("md-checkbox")?.shadowRoot;
+		if (!e) return;
+		let t = e.querySelector("[role=\"checkbox\"]") || e.querySelector("input[type=\"checkbox\"]");
+		if (!t) return;
+		let n = !!this.label?.trim(), r = n ? `${this._checkboxId}-label` : "", i = this.supportingText ? `${this._checkboxId}-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");
+	}
+	__getValidationMessage() {
+		return this._customValidationMessage ? this._customValidationMessage : this.required && !this.checked ? "Markera det här fältet." : "";
+	}
+	__syncValidity() {
+		let e = this.shadowRoot?.querySelector("md-checkbox"), t = this.disabled ? "" : this.__getValidationMessage();
+		this._internals && (t ? this._internals.setValidity({ valueMissing: !0 }, t, e ?? void 0) : this._internals.setValidity({})), this.toggleAttribute("aria-invalid", !!t);
+	}
+	checkValidity() {
+		return !this.__getValidationMessage();
+	}
+	reportValidity() {
+		return this.__syncValidity(), this._internals ? this._internals.reportValidity() : this.checkValidity();
+	}
+	setCustomValidity(e) {
+		this._customValidationMessage = e, this.__syncValidity();
+	}
+	get validity() {
+		return this._internals?.validity;
+	}
+	get validationMessage() {
+		return this._internals?.validationMessage ?? this.__getValidationMessage();
+	}
+	get willValidate() {
+		return this._internals?.willValidate ?? !0;
+	}
+	__syncFormValue() {
+		if (!this._internals) return;
+		let e = this.disabled || !this.checked ? null : this.value;
+		this._internals.setFormValue(e);
+	}
+	#a() {
+		let e = this.#o(this.spacing), t = this.#o(this.spacingTop) ?? e, n = this.#o(this.spacingBottom) ?? e, r = this.#o(this.spacingLeft), i = this.#o(this.spacingRight);
+		t ? this.style.setProperty("--scb-checkbox-spacing-block-start", t) : this.style.removeProperty("--scb-checkbox-spacing-block-start"), n ? this.style.setProperty("--scb-checkbox-spacing-block-end", n) : this.style.removeProperty("--scb-checkbox-spacing-block-end"), r ? this.style.setProperty("--scb-checkbox-spacing-inline-start", r) : this.style.removeProperty("--scb-checkbox-spacing-inline-start"), i ? this.style.setProperty("--scb-checkbox-spacing-inline-end", i) : this.style.removeProperty("--scb-checkbox-spacing-inline-end");
+	}
+	#o(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;
+	}
+	static {
+		this.styles = n`
+    :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-checkbox-text-font: var(--md-sys-typescale-body-medium-font);
+      --scb-checkbox-text-size: var(--md-sys-typescale-body-medium-size);
+      --scb-checkbox-text-line-height: var(--md-sys-typescale-body-medium-line-height);
+      --scb-checkbox-text-tracking: var(--md-sys-typescale-body-medium-tracking);
+      --scb-checkbox-text-weight: var(--md-sys-typescale-body-medium-weight, var(--weight-regular, 400));
+
+      margin-block-start: var(--scb-checkbox-spacing-block-start, 0);
+      margin-block-end: var(--scb-checkbox-spacing-block-end, 0);
+      margin-inline-start: var(--scb-checkbox-spacing-inline-start, 0);
+      margin-inline-end: var(--scb-checkbox-spacing-inline-end, 0);
+    }
+
+    :host([size='small']) {
+      --scb-checkbox-text-font: var(--md-sys-typescale-body-small-font);
+      --scb-checkbox-text-size: var(--md-sys-typescale-body-small-size);
+      --scb-checkbox-text-line-height: var(--md-sys-typescale-body-small-line-height);
+      --scb-checkbox-text-tracking: var(--md-sys-typescale-body-small-tracking);
+      --scb-checkbox-text-weight: var(--md-sys-typescale-body-small-weight, var(--weight-regular, 400));
+    }
+
+    :host([size='large']) {
+      --scb-checkbox-text-font: var(--md-sys-typescale-body-large-font);
+      --scb-checkbox-text-size: var(--md-sys-typescale-body-large-size);
+      --scb-checkbox-text-line-height: var(--md-sys-typescale-body-large-line-height);
+      --scb-checkbox-text-tracking: var(--md-sys-typescale-body-large-tracking);
+      --scb-checkbox-text-weight: var(--md-sys-typescale-body-large-weight, var(--weight-regular, 400));
+    }
+
+    :host([orientation='horizontal']) {
+      margin-inline-end: var(--scb-checkbox-spacing-inline-end, var(--scb-checkbox-gap, var(--spacing-7, 24px)));
+    }
+
+    .wrap {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--spacing-5, 16px);
+      cursor: pointer;
+      position: relative;
+      overflow: visible;
+    }
+
+    .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, px);
+    }
+
+    :host([data-has-label]) md-checkbox::part(focus-ring) {
+      display: none;
+    }
+
+    :host([disabled]) .wrap {
+      cursor: default;
+    }
+
+    .box-wrap {
+      height: var(--scb-checkbox-target, 40px);
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      overflow: visible;
+    }
+
+    md-checkbox {
+      margin: 0;
+    }
+
+    .lbl {
+      color: var(--md-sys-color-on-surface);
+      font-family: var(--scb-checkbox-text-font, var(--brand-font));
+      font-size: var(--scb-checkbox-text-size);
+      line-height: var(--scb-checkbox-text-line-height);
+      font-weight: var(--scb-checkbox-text-weight);
+      letter-spacing: var(--scb-checkbox-text-tracking);
+    }
+
+    :host([disabled]) .lbl {
+      color: var(--n-60);
+    }
+
+    .supporting-text {
+      color: var(--md-sys-color-on-surface-variant);
+      font-family: var(--scb-checkbox-text-font, var(--brand-font));
+      font-size: var(--scb-checkbox-text-size);
+      line-height: var(--scb-checkbox-text-line-height, 20px);
+      font-weight: var(--scb-checkbox-text-weight);
+      letter-spacing: var(--scb-checkbox-text-tracking);
+      margin-left: calc(var(--spacing-3, 6px) + var(--scb-checkbox-target, 40px));
+      margin-bottom: var(--spacing-4, 8px);
+    }
+
+    :host([disabled]) .supporting-text {
+      color: var(--n-60);
+    }
+
+    @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._checkboxId}-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="box-wrap">
+          <md-checkbox
+            id="${this._checkboxId}"
+            ?disabled=${this.disabled}
+            ?indeterminate=${this.indeterminate}
+            ?checked=${this.checked}
+            ?required=${this.required}
+            aria-label=${n}
+          ></md-checkbox>
+        </div>
+        ${t ? r`<span class="lbl" id="${this._checkboxId}-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, "indeterminate", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "checked", void 0), e([o({
+	type: Boolean,
+	reflect: !0
+})], p.prototype, "required", void 0), e([o({
+	type: String,
+	reflect: !0
+})], p.prototype, "size", 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,
+	reflect: !0,
+	attribute: "aria-label"
+})], p.prototype, "ariaLabel", void 0), e([o({ type: String })], p.prototype, "name", void 0), e([o({ type: String })], p.prototype, "value", void 0), e([o({
+	type: String,
+	reflect: !0
+})], p.prototype, "spacing", void 0), e([o({
+	type: String,
+	attribute: "spacing-top",
+	reflect: !0
+})], p.prototype, "spacingTop", void 0), e([o({
+	type: String,
+	attribute: "spacing-bottom",
+	reflect: !0
+})], p.prototype, "spacingBottom", void 0), e([o({
+	type: String,
+	attribute: "spacing-left",
+	reflect: !0
+})], p.prototype, "spacingLeft", void 0), e([o({
+	type: String,
+	attribute: "spacing-right",
+	reflect: !0
+})], p.prototype, "spacingRight", void 0), p = e([a("scb-checkbox")], p);
+//#endregion
+export { p as ScbCheckbox };

package/scb-chevron/scb-chevron.js

@@ -0,0 +1,144 @@
+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";
+//#region src/scb-test-components/scb-chevron/scb-chevron.ts
+var s = class extends t {
+	constructor(...e) {
+		super(...e), this.open = !1, this.animationPhase = "idle";
+	}
+	static {
+		this.styles = n`
+    :host {
+      display: block;
+      width: var(--scb-chevron-size, 24px);
+      height: var(--scb-chevron-size, 24px);
+      color: inherit;
+      --chevron-offset-down: 2.3px;
+      --chevron-offset-up: -2.3px;
+    }
+
+    .chevron-icon {
+      display: block;
+      width: var(--scb-chevron-size, 24px);
+      height: var(--scb-chevron-size, 24px);
+      overflow: visible;
+    }
+
+    .chevron-icon .bar {
+      fill: none;
+      stroke: currentColor;
+      stroke-width: 1.5;
+      stroke-linecap: square;
+      stroke-linejoin: miter;
+      stroke-miterlimit: 2;
+      shape-rendering: geometricPrecision;
+      vector-effect: non-scaling-stroke;
+      transform-box: view-box;
+      transform-origin: 12px 12px;
+      will-change: transform;
+    }
+
+    .chevron-icon .bar--left {
+      transform: translateY(var(--chevron-offset-down)) rotate(45deg);
+    }
+
+    .chevron-icon .bar--right {
+      transform: translateY(var(--chevron-offset-down)) rotate(-45deg);
+    }
+
+    :host([open]) .chevron-icon .bar--left {
+      transform: translateY(var(--chevron-offset-up)) rotate(-45deg);
+    }
+
+    :host([open]) .chevron-icon .bar--right {
+      transform: translateY(var(--chevron-offset-up)) rotate(45deg);
+    }
+
+    .chevron-icon.chevron--opening .bar--left {
+      animation: chevron-left-open 100ms linear;
+    }
+
+    .chevron-icon.chevron--opening .bar--right {
+      animation: chevron-right-open 100ms linear;
+    }
+
+    .chevron-icon.chevron--closing .bar--left {
+      animation: chevron-left-close 100ms linear;
+    }
+
+    .chevron-icon.chevron--closing .bar--right {
+      animation: chevron-right-close 100ms linear;
+    }
+
+    @keyframes chevron-left-open {
+      0% {
+        transform: translateY(var(--chevron-offset-down)) rotate(45deg);
+      }
+      50% {
+        transform: translateY(0px) rotate(0deg);
+      }
+      100% {
+        transform: translateY(var(--chevron-offset-up)) rotate(-45deg);
+      }
+    }
+
+    @keyframes chevron-right-open {
+      0% {
+        transform: translateY(var(--chevron-offset-down)) rotate(-45deg);
+      }
+      50% {
+        transform: translateY(0px) rotate(0deg);
+      }
+      100% {
+        transform: translateY(var(--chevron-offset-up)) rotate(45deg);
+      }
+    }
+
+    @keyframes chevron-left-close {
+      0% {
+        transform: translateY(var(--chevron-offset-up)) rotate(-45deg);
+      }
+      50% {
+        transform: translateY(0px) rotate(0deg);
+      }
+      100% {
+        transform: translateY(var(--chevron-offset-down)) rotate(45deg);
+      }
+    }
+
+    @keyframes chevron-right-close {
+      0% {
+        transform: translateY(var(--chevron-offset-up)) rotate(45deg);
+      }
+      50% {
+        transform: translateY(0px) rotate(0deg);
+      }
+      100% {
+        transform: translateY(var(--chevron-offset-down)) rotate(-45deg);
+      }
+    }
+  `;
+	}
+	willUpdate(e) {
+		e.has("open") && (e.get("open") ?? !this.open) !== this.open && (this.animationPhase = this.open ? "opening" : "closing");
+	}
+	render() {
+		return r`
+      <svg
+        class="chevron-icon ${this.animationPhase === "idle" ? "" : `chevron--${this.animationPhase}`}"
+        viewBox="0 0 24 24"
+        aria-hidden="true"
+        focusable="false"
+      >
+        <line class="bar bar--left" x1="5" y1="12" x2="12" y2="12"></line>
+        <line class="bar bar--right" x1="12" y1="12" x2="19" y2="12"></line>
+      </svg>
+    `;
+	}
+};
+e([a({
+	type: Boolean,
+	reflect: !0
+})], s.prototype, "open", void 0), e([o()], s.prototype, "animationPhase", void 0), s = e([i("scb-chevron")], s);
+//#endregion
+export { s as ScbChevron };