@proximus/lavender-tile 2.0.0-alpha.21 → 2.0.0-alpha.210

package/dist/index.es.js

@@ -1,922 +1,804 @@
-import { VerticallyExtendedElement as D, checkName as q, log as v, PxElement as k, WithExtraAttributes as p } from "@proximus/lavender-common";
+import { PxElement as e, VerticallyExtendedElement as t, WithExtraAttributes as n, booleanPropertyToAttributeSetter as r, checkName as i, createTemplate as a, log as o, propertyToAttributeSetter as s, renderTemplate as c } from "@proximus/lavender-common";
 import "@proximus/lavender-layout";
-import { checkboxStateValues as P } from "@proximus/lavender-checkbox";
-import { stateValues as z } from "@proximus/lavender-radio-group";
-function l(o) {
-  o.hasAttribute("width") || o.setAttribute("width", "s"), o.setAttribute("border-radius", "pill");
+import { checkboxStateValues as l } from "@proximus/lavender-checkbox";
+import { stateValues as u } from "@proximus/lavender-radio-group";
+//#region src/Common.ts
+function d(e) {
+	e.hasAttribute("width") || e.setAttribute("width", "s"), e.setAttribute("border-radius", "pill");
 }
-function h(o, t, e, i = []) {
-  e ? (o.setAttribute("inverted", ""), i.forEach((s) => s.setAttribute("inverted", "")), t.forEach((s) => {
-    s.hasAttribute("inverted") || s.setAttribute("inverted", "");
-  })) : (o.removeAttribute("inverted"), i.forEach((s) => s.removeAttribute("inverted")), t.forEach((s) => {
-    s.hasAttribute("inverted") && s.removeAttribute("inverted");
-  }));
+function f(e, t, n, r = []) {
+	n ? (e.setAttribute("inverted", ""), r.forEach((e) => e.setAttribute("inverted", "")), t.forEach((e) => {
+		e.hasAttribute("inverted") || e.setAttribute("inverted", "");
+	})) : (e.removeAttribute("inverted"), r.forEach((e) => e.removeAttribute("inverted")), t.forEach((e) => {
+		e.hasAttribute("inverted") && e.removeAttribute("inverted");
+	}));
 }
-function x(o, t, e, i = [], s = {}) {
-  e ? (o.setAttribute("disabled", ""), i.forEach((r) => r.setAttribute("disabled", "")), t.forEach((r) => {
-    r.hasAttribute("disabled") || r.setAttribute("disabled", "");
-  }), s.ariaEl && s.setAria && s.ariaEl.setAttribute("aria-disabled", "true"), s.ariaEl && s.setTabIndex && (s.ariaEl.tabIndex = -1)) : (o.removeAttribute("disabled"), i.forEach((r) => r.removeAttribute("disabled")), t.forEach((r) => {
-    r.hasAttribute("disabled") && r.removeAttribute("disabled");
-  }), s.ariaEl && s.setAria && s.ariaEl.setAttribute("aria-disabled", "false"), s.ariaEl && s.setTabIndex && (s.ariaEl.tabIndex = 0));
+function p(e, t, n, r = [], i = {}) {
+	n ? (e.setAttribute("disabled", ""), r.forEach((e) => e.setAttribute("disabled", "")), t.forEach((e) => {
+		e.hasAttribute("disabled") || e.setAttribute("disabled", "");
+	}), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "true"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = -1)) : (e.removeAttribute("disabled"), r.forEach((e) => e.removeAttribute("disabled")), t.forEach((e) => {
+		e.hasAttribute("disabled") && e.removeAttribute("disabled");
+	}), i.ariaEl && i.setAria && i.ariaEl.setAttribute("aria-disabled", "false"), i.ariaEl && i.setTabIndex && (i.ariaEl.tabIndex = 0));
 }
-const I = '.tile{display:flex;flex-direction:column;padding:var(--px-padding-s-mobile);text-align:left;font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-main);background:var( --tile-background-color-default, var(--px-color-background-container-light-default) )}.tile ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title)}.tile ::slotted([slot="prefix"]){font-size:var(--px-text-size-label-m-mobile);margin-bottom:var(--px-spacing-default-mobile)}.tile ::slotted([slot="suffix"]){margin-left:auto;margin-bottom:var(--px-spacing-default-mobile)}.tile ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-mobile)}:host([hoverable]:hover:not([disabled])) .tile{background-color:var(--px-color-background-state-hover-bordered-default)}:host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-default)}:host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-default)}@media only screen and (min-width: 48em){.tile{padding:var(--px-padding-s-tablet)}.tile ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-tablet)}.tile ::slotted([slot="prefix"]){font-size:var(--px-text-size-label-m-tablet)}.tile ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-tablet)}}@media only screen and (min-width: 64.0625em){.tile{padding:var(--px-padding-s-laptop)}.tile ::slotted([slot="label"]){font-size:var(--px-text-size-label-m-laptop)}.tile ::slotted([slot="prefix"]){font-size:var(--px-text-size-label-m-laptop)}.tile ::slotted([slot="description"]){font-size:var(--px-text-size-label-m-laptop)}}:host([inverted]) .tile{color:var(--px-color-text-neutral-inverted);background:var( --tile-background-color-inverted, var(--px-color-background-container-light-inverted) )}:host([inverted]):host([hoverable]:hover:not([disabled])) .tile{background-color:var( --px-color-background-state-hover-bordered-inverted )}:host([inverted]):host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-inverted)}', a = ':host{display:block;outline:none}:host .tile,:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border-radius:var(--px-radius-main);--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition)}:host .tile,:host .tile *,:host .tile-link,:host .tile-link *,:host .tile-button,:host .tile-button *,:host .tile-checkbox,:host .tile-checkbox *,:host .tile-radio,:host .tile-radio *,:host .tile-switch,:host .tile-switch *{box-sizing:border-box}:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{display:block;cursor:pointer;width:100%;border:var(--px-size-border-m) solid transparent;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile)}:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border:var(--px-size-border-m) solid var(--px-color-border-neutral-default)}:host:host(:not([disabled])):host(:hover) .tile-link,:host:host(:not([disabled])):host(:hover) .tile-button,:host:host(:not([disabled])):host(:hover) .tile-checkbox,:host:host(:not([disabled])):host(:hover) .tile-radio,:host:host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-default)}:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host(:not([disabled])) .tile-link:focus-visible,:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host([checked]) .tile-checkbox,:host:host([checked]) .tile-radio,:host:host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-default)}:host:host([disabled]) .tile-link,:host:host([disabled]) .tile-button,:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{cursor:default;pointer-events:none}:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{border-color:transparent}:host:host([state="error"]) .tile-checkbox,:host:host([state="error"]) .tile-radio,:host:host([state="error"]) .tile-switch{border-color:var(--px-color-border-purpose-error-default)}:host:host([state="error"]):hover:not([disabled]) .tile-checkbox,:host:host([state="error"]):hover:not([disabled]) .tile-radio,:host:host([state="error"]):hover:not([disabled]) .tile-switch{border-color:var(--px-color-border-state-hover-default)}@media only screen and (min-width: 768px){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}@media only screen and (min-width: 1025px){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])) .tile-link:focus-visible,:scope:host:host(:not([disabled])) .tile-button:focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .tile-link,:host([inverted]) .tile-button,:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{outline-color:var(--px-color-border-focus-outline-inverted)}:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{border-color:var(--px-color-border-neutral-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .tile-link,:host([inverted]):host(:not([disabled])):host(:hover) .tile-button,:host([inverted]):host(:not([disabled])):host(:hover) .tile-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .tile-radio,:host([inverted]):host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host([checked]) .tile-checkbox,:host([inverted]):host([checked]) .tile-radio,:host([inverted]):host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([state="error"]) .tile-checkbox,:host([inverted]):host([state="error"]) .tile-radio,:host([inverted]):host([state="error"]) .tile-switch{border-color:var(--px-color-border-purpose-error-inverted)}:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-checkbox,:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-radio,:host([inverted]):host([state="error"]):host(:hover:not([disabled])) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}', g = new CSSStyleSheet();
-g.replaceSync(I);
-const m = new CSSStyleSheet();
-m.replaceSync(a);
-const L = [
-  "",
-  "default",
-  "container-light",
-  "container-default"
-], c = class c extends D {
-  template() {
-    return `
-      <px-hstack gap="s" align-items="center" class="tile__header">
-        <slot name="prefix"></slot>
-        <slot name="suffix"></slot>
-      </px-hstack>
-      <px-vstack gap="2xs" class="tile__content">
-        <slot name="label"></slot>
-        <slot name="description"></slot>
-      </px-vstack>
-    `;
-  }
-  constructor() {
-    super(m, g);
-    const t = document.createElement(c.nativeName);
-    t.classList.add("tile"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
-  }
-  connectedCallback() {
-    if (super.connectedCallback(), this.$slotPrefix) {
-      const t = this.querySelector('px-img[slot="prefix"]');
-      t && l(t);
-    }
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "center-prefix",
-      "center-content",
-      "background-color",
-      "inverted",
-      "disabled"
-    ];
-  }
-  attributeChangedCallback(t, e, i) {
-    if (super.attributeChangedCallback(t, e, i), e !== i)
-      switch (t) {
-        case "center-prefix":
-          this.updateCenterPrefix();
-          break;
-        case "center-content":
-          this.updateCenterContent();
-          break;
-        case "background-color":
-          this.updateBackgroundColor(
-            e,
-            i,
-            L
-          );
-          break;
-        default:
-          super.attributeChangedCallback(t, e, i);
-          break;
-      }
-  }
-  updateCenterPrefix() {
-    this.centerPrefix ? this.$tileHeader.setAttribute("justify-content", "center") : this.$tileHeader.setAttribute("justify-content", "flex-start");
-  }
-  updateCenterContent() {
-    this.centerContent ? this.$tileContent.style.textAlign = "center" : this.$tileContent.style.textAlign = "left";
-  }
-  updateBackgroundColor(t, e, i) {
-    if (!q(i, e)) {
-      v(
-        `${e} is not an allowed background-color value for ${this.tagName.toLowerCase()}`
-      );
-      return;
-    }
-    const s = (r) => {
-      r !== null && r !== "" && r !== "default" && (this.$el.style.setProperty(
-        "--tile-background-color-default",
-        `var(--px-color-background-${r}-default)`
-      ), this.$el.style.setProperty(
-        "--tile-background-color-inverted",
-        `var(--px-color-background-${r}-inverted)`
-      ));
-    };
-    s(t), s(e);
-  }
-  get $tileHeader() {
-    return this.shadowRoot.querySelector(".tile__header");
-  }
-  get $tileContent() {
-    return this.shadowRoot.querySelector(".tile__content");
-  }
-  get $children() {
-    return this.querySelectorAll("px-tile > *");
-  }
-  get $slotPrefix() {
-    return this.querySelector('[slot="prefix"]');
-  }
-  get $slotSuffix() {
-    return this.querySelector('[slot="suffix"]');
-  }
-  get centerPrefix() {
-    return this.hasAttribute("center-prefix");
-  }
-  set centerPrefix(t) {
-    t ? this.setAttribute("center-prefix", "") : this.removeAttribute("center-prefix");
-  }
-  get centerContent() {
-    return this.hasAttribute("center-content");
-  }
-  set centerContent(t) {
-    t ? this.setAttribute("center-content", "") : this.removeAttribute("center-content");
-  }
-  get backgroundColor() {
-    return this.getAttribute("background-color");
-  }
-  set backgroundColor(t) {
-    t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(t) {
-    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
-  }
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-  set disabled(t) {
-    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
-  }
+//#endregion
+//#region src/tile.css?inline
+var m = ":host{display:block}.tile,.tile *{box-sizing:border-box}.tile{height:100%;padding:var(--px-padding-s-mobile);text-align:left;font-family:var(--px-font-family);color:var(--px-color-text-neutral-default);border-radius:var(--px-radius-main);background:var(--tile-background-color-default,var(--px-color-background-container-light-default));flex-direction:column;display:flex}.tile ::slotted([slot=prefix]){font-size:var(--px-text-size-label-m-mobile);margin-bottom:var(--px-spacing-xs-mobile)}.tile ::slotted([slot=suffix]){margin-left:auto;margin-bottom:var(--px-spacing-xs-mobile)}.tile ::slotted([slot=label]){font-size:var(--px-text-size-label-m-mobile);font-weight:var(--px-font-weight-title);line-height:var(--px-line-height-ratio-l)}.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-mobile);line-height:var(--px-line-height-ratio-l)}:host([visual=none]) .tile{flex-direction:row-reverse;align-items:flex-start}:host([visual=none]) .tile .tile__content{flex-grow:1}:host([hoverable]:hover:not([disabled])) .tile{background-color:var(--px-color-background-state-hover-bordered-default)}:host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-default)}:host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-default)}@media screen and (width>=48rem){.tile{padding:var(--px-padding-s-tablet)}.tile ::slotted([slot=prefix]){font-size:var(--px-text-size-label-m-tablet);margin-bottom:var(--px-spacing-xs-tablet)}.tile ::slotted([slot=suffix]){margin-bottom:var(--px-spacing-xs-tablet)}.tile ::slotted([slot=label]),.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-tablet)}}@media screen and (width>=64.0625rem){.tile{padding:var(--px-padding-s-laptop)}.tile ::slotted([slot=prefix]){font-size:var(--px-text-size-label-m-laptop);margin-bottom:var(--px-spacing-xs-laptop)}.tile ::slotted([slot=suffix]){margin-bottom:var(--px-spacing-xs-laptop)}.tile ::slotted([slot=label]),.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-laptop)}}@media screen and (width>=90.0625rem){.tile{padding:var(--px-padding-s-desktop)}.tile ::slotted([slot=prefix]){font-size:var(--px-text-size-label-m-desktop);margin-bottom:var(--px-spacing-xs-desktop)}.tile ::slotted([slot=suffix]){margin-bottom:var(--px-spacing-xs-desktop)}.tile ::slotted([slot=label]),.tile ::slotted([slot=description]){font-size:var(--px-text-size-label-m-desktop)}}:host([inverted]) .tile{color:var(--px-color-text-neutral-inverted);background:var(--tile-background-color-inverted,var(--px-color-background-container-light-inverted))}:host([inverted]):host([hoverable]:hover:not([disabled])) .tile{background-color:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]):host([hoverable][disabled]) .tile{color:var(--px-color-text-state-disabled-inverted)}:host([inverted]):host([disabled]) .tile{background-color:var(--px-color-background-state-disabled-inverted)}", h = new CSSStyleSheet();
+h.replaceSync(m);
+var g = [
+	"",
+	"default",
+	"container-light",
+	"container-default"
+], _ = class e extends t {
+	static {
+		this.template = a("<div class=\"tile\"><px-hstack gap=\"s\" align-items=\"center\" class=\"tile__header\"><slot name=\"prefix\"></slot><slot name=\"suffix\"></slot></px-hstack><px-vstack gap=\"none\" class=\"tile__content\"><slot name=\"label\"></slot><slot name=\"description\"></slot></px-vstack></div>");
+	}
+	static {
+		this.nativeName = "div";
+	}
+	constructor() {
+		super(h), c(this.shadowRoot, e.template);
+	}
+	connectedCallback() {
+		if (super.connectedCallback(), this.$slotPrefix) {
+			let e = this.querySelector("px-img[slot=\"prefix\"]");
+			e && d(e);
+		}
+	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"center-prefix",
+			"center-content",
+			"background-color",
+			"inverted",
+			"disabled",
+			"visual"
+		];
+	}
+	attributeChangedCallback(e, t, n) {
+		if (super.attributeChangedCallback(e, t, n), t !== n) switch (e) {
+			case "center-prefix":
+				this.updateCenterPrefix();
+				break;
+			case "center-content":
+				this.updateCenterContent();
+				break;
+			case "background-color":
+				this.updateBackgroundColor(t, n, g);
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	updateCenterPrefix() {
+		this.centerPrefix ? this.$tileHeader.setAttribute("justify-content", "center") : this.$tileHeader.setAttribute("justify-content", "flex-start");
+	}
+	updateCenterContent() {
+		this.centerContent ? this.$tileContent.style.textAlign = "center" : this.$tileContent.style.textAlign = "left";
+	}
+	updateBackgroundColor(e, t, n) {
+		if (!i(n, t)) {
+			o(`"${t}" is not a valid background-color value for ${this.tagName.toLowerCase()}. Allowed values are: "${n.join("\", \"")}".`);
+			return;
+		}
+		let r = (e) => {
+			e !== null && e !== "" && e !== "default" && (this.$el.style.setProperty("--tile-background-color-default", `var(--px-color-background-${e}-default)`), this.$el.style.setProperty("--tile-background-color-inverted", `var(--px-color-background-${e}-inverted)`));
+		};
+		r(e), r(t);
+	}
+	get $tileHeader() {
+		return this.shadowRoot.querySelector(".tile__header");
+	}
+	get $tileContent() {
+		return this.shadowRoot.querySelector(".tile__content");
+	}
+	get $children() {
+		return this.querySelectorAll("px-tile > *");
+	}
+	get $slotPrefix() {
+		return this.querySelector("[slot=\"prefix\"]");
+	}
+	get $slotSuffix() {
+		return this.querySelector("[slot=\"suffix\"]");
+	}
+	get centerPrefix() {
+		return this.hasAttribute("center-prefix");
+	}
+	set centerPrefix(e) {
+		this._updateBooleanAttribute("center-prefix", e);
+	}
+	get centerContent() {
+		return this.hasAttribute("center-content");
+	}
+	set centerContent(e) {
+		this._updateBooleanAttribute("center-content", e);
+	}
+	get backgroundColor() {
+		return this.getAttribute("background-color");
+	}
+	set backgroundColor(e) {
+		this._updateAttribute("background-color", e);
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		this._updateBooleanAttribute("inverted", e);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		this._updateBooleanAttribute("disabled", e);
+	}
+	get visual() {
+		return this.getAttribute("visual");
+	}
+	set visual(e) {
+		this._updateAttribute("visual", e);
+	}
 };
-c.nativeName = "div";
-let b = c;
-customElements.get("px-tile") || customElements.define("px-tile", b);
-const R = ".tile-button{padding:0;background:none;font-size:var(--px-text-size-body-m-mobile)}@media only screen and (min-width: 48em){.tile-button{font-size:var(--px-text-size-body-m-tablet)}}@media only screen and (min-width: 64.0625em){.tile-button{font-size:var(--px-text-size-body-m-laptop)}}", A = new CSSStyleSheet();
-A.replaceSync(R);
-const $ = new CSSStyleSheet();
-$.replaceSync(a);
-const n = class n extends k {
-  template() {
-    return `
-      <px-tile hoverable>
-        <slot name="prefix" slot="prefix"></slot>
-        <slot name="suffix" slot="suffix"></slot>
-        <slot name="label" slot="label"></slot>
-        <slot name="description" slot="description"></slot>
-      </px-tile>
-    `;
-  }
-  constructor() {
-    super($, A);
-    const t = document.createElement(n.nativeName);
-    t.classList.add("tile-button"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
-  }
-  connectedCallback() {
-    if (this.$slotPrefix) {
-      const t = this.querySelector('px-img[slot="prefix"]');
-      t && l(t);
-    }
-    this.backgroundColor || (this.backgroundColor = "container-default");
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "center-prefix",
-      "center-content",
-      "background-color",
-      "inverted",
-      "disabled"
-    ];
-  }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i)
-      switch (t) {
-        case "center-prefix":
-        case "center-content":
-          this.$tile.setAttribute(t, "");
-          break;
-        case "background-color":
-          this.$tile.setAttribute(t, this.getAttribute(t) || "");
-          break;
-        case "inverted":
-          h(this.$tile, this.$children, this.inverted);
-          break;
-        case "disabled":
-          x(this.$tile, this.$children, this.disabled, [], {
-            ariaEl: this.$el,
-            setAria: !0,
-            setTabIndex: !0
-          });
-          break;
-        default:
-          super.attributeChangedCallback(t, e, i);
-          break;
-      }
-  }
-  get $tile() {
-    return this.shadowRoot.querySelector("px-tile");
-  }
-  get $slotPrefix() {
-    return this.querySelector('[slot="prefix"]');
-  }
-  get $children() {
-    return this.querySelectorAll("px-tile-button > *");
-  }
-  get centerPrefix() {
-    return this.hasAttribute("center-prefix");
-  }
-  set centerPrefix(t) {
-    t ? this.setAttribute("center-prefix", "") : this.removeAttribute("center-prefix");
-  }
-  get centerContent() {
-    return this.hasAttribute("center-content");
-  }
-  set centerContent(t) {
-    t ? this.setAttribute("center-content", "") : this.removeAttribute("center-content");
-  }
-  get backgroundColor() {
-    return this.getAttribute("background-color");
-  }
-  set backgroundColor(t) {
-    this.setAttribute("background-color", t);
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(t) {
-    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
-  }
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-  set disabled(t) {
-    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
-  }
+customElements.get("px-tile") || customElements.define("px-tile", _);
+//#endregion
+//#region src/tile-button.css?inline
+var v = ":host(:not([disabled])):host(:active){padding:0}:host(:not([disabled])):host(:active) .tile-button{border-width:var(--px-size-border-m);border-color:var(--px-color-border-state-active-default)}.tile-button{font-size:var(--px-text-size-body-m-mobile);background:0 0;padding:0}@media screen and (width>=48rem){.tile-button{font-size:var(--px-text-size-body-m-tablet)}}@media screen and (width>=64.0625rem){.tile-button{font-size:var(--px-text-size-body-m-laptop)}}@media screen and (width>=90.0625rem){.tile-button{font-size:var(--px-text-size-body-m-desktop)}}:host([inverted]):host(:not([disabled])):host(:active) .tile-button{border-color:var(--px-color-border-state-active-inverted)}", y = ":host{padding:calc(var(--px-size-border-m) - var(--px-size-border-s));outline:none;display:block}:is(:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch),:is(:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch) *{box-sizing:border-box}:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{border-radius:var(--px-radius-main);height:100%}:is(:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch) px-tile{height:100%}:host .tile-link,:host .tile-button,:host .tile-checkbox,:host .tile-radio,:host .tile-switch{cursor:pointer;border:var(--px-size-border-s) solid transparent;outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);border:var(--px-size-border-s) solid var(--px-color-border-main-default);width:100%;display:block}:host:host(:not([disabled])):host(:hover) .tile-link,:host:host(:not([disabled])):host(:hover) .tile-button,:host:host(:not([disabled])):host(:hover) .tile-checkbox,:host:host(:not([disabled])):host(:hover) .tile-radio,:host:host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-default)}:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:is(:host:host(:not([disabled])) .tile-link,:host:host(:not([disabled])) .tile-button):focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}:host:host([checked]){padding:0}:host:host([checked]) .tile-checkbox,:host:host([checked]) .tile-radio,:host:host([checked]) .tile-switch{border-width:var(--px-size-border-m);border-color:var(--px-color-border-state-active-default)}:host:host([disabled]) .tile-link,:host:host([disabled]) .tile-button,:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{cursor:default;pointer-events:none}:host:host([disabled]) .tile-checkbox,:host:host([disabled]) .tile-radio,:host:host([disabled]) .tile-switch{border-color:#0000}:host:host([state=error]) .tile-checkbox,:host:host([state=error]) .tile-radio,:host:host([state=error]) .tile-switch{border-color:var(--px-color-border-purpose-error-default)}:host:host([state=error]):hover:not([disabled]) .tile-checkbox,:host:host([state=error]):hover:not([disabled]) .tile-radio,:host:host([state=error]):hover:not([disabled]) .tile-switch{border-color:var(--px-color-border-state-hover-default)}@media screen and (width>=48rem){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(:scope:host:host(:not([disabled])) .tile-link,:scope:host:host(:not([disabled])) .tile-button):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}@media screen and (width>=64.0625rem){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-laptop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(:scope:host:host(:not([disabled])) .tile-link,:scope:host:host(:not([disabled])) .tile-button):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}@media screen and (width>=90.0625rem){:scope:host .tile-link,:scope:host .tile-button,:scope:host .tile-checkbox,:scope:host .tile-radio,:scope:host .tile-switch{outline-width:var(--px-focus-outline-desktop)}:scope:host:host(:not([disabled])):host(:focus-visible) .tile-checkbox,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-radio,:scope:host:host(:not([disabled])):host(:focus-visible) .tile-switch{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}:is(:scope:host:host(:not([disabled])) .tile-link,:scope:host:host(:not([disabled])) .tile-button):focus-visible{outline-offset:var(--px-focus-offset-desktop);outline-width:var(--px-focus-outline-desktop)}}:host([inverted]) .tile-link,:host([inverted]) .tile-button,:host([inverted]) .tile-checkbox,:host([inverted]) .tile-radio,:host([inverted]) .tile-switch{outline-color:var(--px-color-border-focus-outline-inverted);border-color:var(--px-color-border-main-inverted)}:host([inverted]):host(:not([disabled])):host(:hover) .tile-link,:host([inverted]):host(:not([disabled])):host(:hover) .tile-button,:host([inverted]):host(:not([disabled])):host(:hover) .tile-checkbox,:host([inverted]):host(:not([disabled])):host(:hover) .tile-radio,:host([inverted]):host(:not([disabled])):host(:hover) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]):host(:not([disabled])):host(:active) .tile-link,:host([inverted]):host(:not([disabled])):host(:active) .tile-button{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([checked]) .tile-checkbox,:host([inverted]):host([checked]) .tile-radio,:host([inverted]):host([checked]) .tile-switch{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]):host([state=error]) .tile-checkbox,:host([inverted]):host([state=error]) .tile-radio,:host([inverted]):host([state=error]) .tile-switch{border-color:var(--px-color-border-purpose-error-inverted)}:host([inverted]):host([state=error]):host(:hover:not([disabled])) .tile-checkbox,:host([inverted]):host([state=error]):host(:hover:not([disabled])) .tile-radio,:host([inverted]):host([state=error]):host(:hover:not([disabled])) .tile-switch{border-color:var(--px-color-border-state-hover-inverted)}", b = new CSSStyleSheet();
+b.replaceSync(v);
+var x = new CSSStyleSheet();
+x.replaceSync(y);
+var S = class t extends e {
+	static {
+		this.template = a("<button class=\"tile-button\"><px-tile hoverable><slot name=\"prefix\" slot=\"prefix\"></slot><slot name=\"suffix\" slot=\"suffix\"></slot><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot></px-tile></button>");
+	}
+	static {
+		this.nativeName = "button";
+	}
+	static {
+		this.accessorExclusions = ["disabled"];
+	}
+	constructor() {
+		super(x, b), c(this.shadowRoot, t.template);
+	}
+	connectedCallback() {
+		if (this.$slotPrefix) {
+			let e = this.querySelector("px-img[slot=\"prefix\"]");
+			e && d(e);
+		}
+		this.backgroundColor ||= "container-default";
+	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"center-prefix",
+			"center-content",
+			"background-color",
+			"inverted",
+			"disabled",
+			"visual"
+		];
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "center-prefix":
+			case "center-content":
+				this.$tile.setAttribute(e, "");
+				break;
+			case "background-color":
+			case "visual":
+				this.$tile.setAttribute(e, this.getAttribute(e) || "");
+				break;
+			case "inverted":
+				f(this.$tile, this.$children, this.inverted);
+				break;
+			case "disabled":
+				p(this.$tile, this.$children, this.disabled, [], {
+					ariaEl: this.$el,
+					setAria: !0,
+					setTabIndex: !0
+				});
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	get $tile() {
+		return this.shadowRoot.querySelector("px-tile");
+	}
+	get $slotPrefix() {
+		return this.querySelector("[slot=\"prefix\"]");
+	}
+	get $children() {
+		return this.querySelectorAll("px-tile-button > *");
+	}
+	get centerPrefix() {
+		return this.hasAttribute("center-prefix");
+	}
+	set centerPrefix(e) {
+		this._updateBooleanAttribute("center-prefix", e);
+	}
+	get centerContent() {
+		return this.hasAttribute("center-content");
+	}
+	set centerContent(e) {
+		this._updateBooleanAttribute("center-content", e);
+	}
+	get backgroundColor() {
+		return this.getAttribute("background-color");
+	}
+	set backgroundColor(e) {
+		this._updateAttribute("background-color", e);
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		this._updateBooleanAttribute("inverted", e);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		this._updateBooleanAttribute("disabled", e);
+	}
+	get visual() {
+		return this.getAttribute("visual");
+	}
+	set visual(e) {
+		this._updateAttribute("visual", e);
+	}
 };
-n.nativeName = "button", n.accessorExclusions = ["disabled"];
-let u = n;
-customElements.get("px-tile-button") || customElements.define("px-tile-button", u);
-const C = new CSSStyleSheet();
-C.replaceSync(a);
-class H extends p {
-  template() {
-    return `
-      <div class="tile-checkbox">
-        <px-tile hoverable>
-          <slot name="prefix" slot="prefix"></slot>
-          <px-checkbox slot="suffix" inert></px-checkbox>
-          <slot name="label" slot="label"></slot>
-          <slot name="description" slot="description"></slot>
-        </px-tile>
-      </div>
-    `;
-  }
-  constructor() {
-    var t;
-    super(C), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
-  }
-  connectedCallback() {
-    if (this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotPrefix) {
-      const t = this.querySelector('px-img[slot="prefix"]');
-      t && l(t);
-    }
-    this.addEventListener("mouseover", () => {
-      this.$checkbox.setAttribute("hover", "");
-    }), this.addEventListener("mouseout", () => {
-      this.$checkbox.removeAttribute("hover");
-    }), this.addEventListener("keypress", (t) => {
-      switch (t.stopPropagation(), t.preventDefault(), t.code) {
-        case "Space":
-          this.click();
-          break;
-      }
-    }), this.addEventListener("click", (t) => {
-      this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
-    }), this.hasAttribute("checked") && (this.checked = !0);
-  }
-  static get observedAttributes() {
-    return [
-      "center-content",
-      "background-color",
-      "inverted",
-      "name",
-      "value",
-      "state",
-      "checked",
-      "disabled"
-    ];
-  }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i)
-      switch (t) {
-        case "center-content":
-        case "background-color":
-          this.$tile.setAttribute(t, this.getAttribute(t) || "");
-          break;
-        case "inverted":
-          h(this, this.$children, this.inverted, [
-            this.$tile,
-            this.$checkbox
-          ]);
-          break;
-        case "name":
-        case "value":
-          this.$checkbox && this.$checkbox.setAttribute(t, i);
-          break;
-        case "state":
-          if (this.$checkbox)
-            if (this.checkName(P, i))
-              this.$checkbox.setAttribute("state", i);
-            else {
-              v(
-                `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
-              );
-              return;
-            }
-          break;
-        case "disabled":
-          this.handleDisabledAttributeChange(i !== null);
-          break;
-        case "checked":
-          this.handleCheckedAttributeChange(i);
-          break;
-      }
-  }
-  handleDisabledAttributeChange(t) {
-    t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$tile.disabled = !0, this.$checkbox.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$tile.disabled = !1, this.$checkbox.removeAttribute("disabled"));
-  }
-  handleCheckedAttributeChange(t) {
-    var e;
-    (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(
-      new Event("change", {
-        bubbles: !0,
-        composed: !0
-        // Allow the event to pass through shadow DOM boundaries
-      })
-    ));
-  }
-  // Form-associated callbacks
-  static get formAssociated() {
-    return !0;
-  }
-  // Set default behavior when the element is attached to a form
-  formResetCallback() {
-    this.checked = !1;
-  }
-  formStateRestoreCallback(t) {
-    this.checked = t;
-  }
-  formData() {
-    if (this.name) {
-      const t = new FormData(), e = this.getAttribute("name");
-      return e && (this.checked ? t.set(e, this.value) : t.delete(e)), t;
-    }
-  }
-  get $tile() {
-    return this.shadowRoot.querySelector("px-tile");
-  }
-  get $el() {
-    return this.shadowRoot.querySelector(".tile-checkbox");
-  }
-  get $checkbox() {
-    return this.shadowRoot.querySelector("px-checkbox");
-  }
-  get $slotPrefix() {
-    return this.querySelector('[slot="prefix"]');
-  }
-  get $children() {
-    return this.querySelectorAll("px-tile-checkbox > *");
-  }
-  get centerContent() {
-    return this.hasAttribute("center-content");
-  }
-  set centerContent(t) {
-    t ? this.setAttribute("center-content", "") : this.removeAttribute("center-content");
-  }
-  get backgroundColor() {
-    return this.getAttribute("background-color");
-  }
-  set backgroundColor(t) {
-    this.setAttribute("background-color", t);
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(t) {
-    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
-  }
-  get checked() {
-    return this.hasAttribute("checked");
-  }
-  set checked(t) {
-    t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
-  }
-  get name() {
-    return this.getAttribute("name");
-  }
-  set name(t) {
-    t ? this.setAttribute("name", t) : this.removeAttribute("name");
-  }
-  get state() {
-    return this.getAttribute("state");
-  }
-  set state(t) {
-    t ? this.setAttribute("state", t) : this.removeAttribute("state");
-  }
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-  set disabled(t) {
-    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
-  }
-  get value() {
-    return this.getAttribute("value");
-  }
-  set value(t) {
-    t ? this.setAttribute("value", t) : this.removeAttribute("value");
-  }
-}
-customElements.get("px-tile-checkbox") || customElements.define("px-tile-checkbox", H);
-const S = new CSSStyleSheet();
-S.replaceSync(a);
-class B extends p {
-  template() {
-    return `
-      <div class="tile-radio">
-        <px-tile hoverable>
-          <slot name="prefix" slot="prefix"></slot>
-          <px-radio slot="suffix" inert></px-radio>
-          <slot name="label" slot="label"></slot>
-          <slot name="description" slot="description"></slot>
-        </px-tile>
-      </div>
-    `;
-  }
-  constructor() {
-    var t;
-    super(S), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
-  }
-  connectedCallback() {
-    var t;
-    if (this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.tabIndex = ((t = this.parentElement) == null ? void 0 : t.firstElementChild) === this ? 0 : -1, this.$slotPrefix) {
-      const e = this.querySelector('px-img[slot="prefix"]');
-      e && l(e);
-    }
-    this.addEventListener("mouseover", () => {
-      this.$radio.setAttribute("hover", "");
-    }), this.addEventListener("mouseout", () => {
-      this.$radio.removeAttribute("hover");
-    }), this.addEventListener("keypress", (e) => {
-      switch (e.stopPropagation(), e.preventDefault(), e.code) {
-        case "Space":
-          this.click();
-          break;
-      }
-    }), this.addEventListener("click", (e) => {
-      this.checked || (this.checked = !0), e.stopPropagation(), e.preventDefault();
-    }), this.hasAttribute("checked") && (this.checked = !0);
-  }
-  static get observedAttributes() {
-    return [
-      "center-content",
-      "background-color",
-      "inverted",
-      "name",
-      "value",
-      "state",
-      "checked",
-      "disabled"
-    ];
-  }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i)
-      switch (t) {
-        case "center-content":
-        case "background-color":
-          this.$tile.setAttribute(t, this.getAttribute(t) || "");
-          break;
-        case "inverted":
-          h(this, this.$children, this.inverted, [
-            this.$tile,
-            this.$radio
-          ]);
-          break;
-        case "name":
-        case "value":
-          this.$radio && this.$radio.setAttribute(t, i);
-          break;
-        case "state":
-          if (this.$radio)
-            if (this.checkName(z, i))
-              this.$radio.setAttribute("state", i);
-            else {
-              v(
-                `${i} is not an allowed ${t} value for ${this.tagName.toLowerCase()}`
-              );
-              return;
-            }
-          break;
-        case "disabled":
-          this.handleDisabledAttributeChange(i !== null);
-          break;
-        case "checked":
-          this.handleCheckedAttributeChange(i);
-          break;
-      }
-  }
-  handleDisabledAttributeChange(t) {
-    t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$tile.disabled = !0, this.$radio.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$tile.disabled = !1, this.$radio.removeAttribute("disabled"));
-  }
-  handleCheckedAttributeChange(t) {
-    var e;
-    (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(
-      new Event("change", {
-        bubbles: !0,
-        composed: !0
-        // Allow the event to pass through shadow DOM boundaries
-      })
-    ));
-  }
-  // Form-associated callbacks
-  static get formAssociated() {
-    return !0;
-  }
-  // Set default behavior when the element is attached to a form
-  formResetCallback() {
-    this.checked = !1;
-  }
-  formStateRestoreCallback(t) {
-    this.checked = t;
-  }
-  formData() {
-    if (this.name) {
-      const t = new FormData(), e = this.getAttribute("name");
-      return e && (this.checked ? t.set(e, this.$radio.value) : t.delete(e)), t;
-    }
-  }
-  get $tile() {
-    return this.shadowRoot.querySelector("px-tile");
-  }
-  get $el() {
-    return this.shadowRoot.querySelector(".tile-radio");
-  }
-  get $radio() {
-    return this.shadowRoot.querySelector("px-radio");
-  }
-  get $slotPrefix() {
-    return this.querySelector('[slot="prefix"]');
-  }
-  get $children() {
-    return this.querySelectorAll("px-tile-radio > *");
-  }
-  get centerContent() {
-    return this.hasAttribute("center-content");
-  }
-  set centerContent(t) {
-    t ? this.setAttribute("center-content", "") : this.removeAttribute("center-content");
-  }
-  get backgroundColor() {
-    return this.getAttribute("background-color");
-  }
-  set backgroundColor(t) {
-    t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(t) {
-    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
-  }
-  get checked() {
-    return this.hasAttribute("checked");
-  }
-  set checked(t) {
-    t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
-  }
-  get name() {
-    return this.getAttribute("name");
-  }
-  set name(t) {
-    t ? this.setAttribute("name", t) : this.removeAttribute("name");
-  }
-  get state() {
-    return this.getAttribute("state");
-  }
-  set state(t) {
-    t ? this.setAttribute("state", t) : this.removeAttribute("state");
-  }
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-  set disabled(t) {
-    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
-  }
-  get value() {
-    return this.getAttribute("value");
-  }
-  set value(t) {
-    t ? this.setAttribute("value", t) : this.removeAttribute("value");
-  }
-}
-customElements.get("px-tile-radio") || customElements.define("px-tile-radio", B);
-const T = ".tile-link{text-decoration:none}.tile-link px-icon{color:var(--px-color-icon-brand-default)}.tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}:host([inverted]) .tile-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}", w = new CSSStyleSheet();
-w.replaceSync(T);
-const y = new CSSStyleSheet();
-y.replaceSync(a);
-const d = class d extends k {
-  template() {
-    return `
-      <px-tile hoverable>
-        <slot name="prefix" slot="prefix"></slot>
-        <px-icon
-          name="chevron_right"
-          slot="suffix"
-          from="lavender"
-          size="s"
-          color="inherit"
-        ></px-icon>
-        <slot name="label" slot="label"></slot>
-        <slot name="description" slot="description"></slot>
-      </px-tile>
-    `;
-  }
-  constructor() {
-    super(y, w);
-    const t = document.createElement(d.nativeName);
-    t.classList.add("tile-link"), t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
-  }
-  connectedCallback() {
-    if (this.$slotPrefix) {
-      const e = this.querySelector('px-img[slot="prefix"]');
-      e && l(e);
-    }
-    this.backgroundColor || (this.backgroundColor = "container-default"), this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute(
-      "aria-label",
-      this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"
-    ));
-  }
-  static get observedAttributes() {
-    return [
-      ...super.observedAttributes,
-      "center-content",
-      "background-color",
-      "inverted",
-      "disabled",
-      "target-blank-aria-label"
-    ];
-  }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i)
-      switch (t) {
-        case "center-content":
-          this.$tile.setAttribute(t, "");
-          break;
-        case "background-color":
-          this.$tile.setAttribute(t, this.getAttribute(t) || "");
-          break;
-        case "inverted":
-          h(this.$tile, this.$children, this.inverted, [
-            this.$pxIcon
-          ]);
-          break;
-        case "disabled":
-          x(this.$tile, this.$children, this.disabled, [], {
-            ariaEl: this.$el,
-            setAria: !0,
-            setTabIndex: !0
-          });
-          break;
-        case "target-blank-aria-label":
-          this.$pxIcon && this.$pxIcon.setAttribute(
-            "aria-label",
-            this.targetBlankAriaLabel || "Opens in a new tab"
-          );
-          break;
-        default:
-          super.attributeChangedCallback(t, e, i);
-          break;
-      }
-  }
-  get $tile() {
-    return this.shadowRoot.querySelector("px-tile");
-  }
-  get $slotPrefix() {
-    return this.querySelector('[slot="prefix"]');
-  }
-  get $children() {
-    return this.querySelectorAll("px-tile-link > *");
-  }
-  get $pxIcon() {
-    return this.shadowRoot.querySelector('px-icon[slot="suffix"]');
-  }
-  get centerContent() {
-    return this.hasAttribute("center-content");
-  }
-  set centerContent(t) {
-    t ? this.setAttribute("center-content", "") : this.removeAttribute("center-content");
-  }
-  get backgroundColor() {
-    return this.getAttribute("background-color");
-  }
-  set backgroundColor(t) {
-    this.setAttribute("background-color", t);
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(t) {
-    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
-  }
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-  set disabled(t) {
-    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
-  }
-  get targetBlankAriaLabel() {
-    return this.getAttribute("target-blank-aria-label");
-  }
-  set targetBlankAriaLabel(t) {
-    this.setAttribute("target-blank-aria-label", t);
-  }
+customElements.get("px-tile-button") || customElements.define("px-tile-button", S);
+//#endregion
+//#region src/TileCheckbox.ts
+var C = new CSSStyleSheet();
+C.replaceSync(y);
+var w = class e extends n {
+	static {
+		this.template = a("<div class=\"tile-checkbox\"><px-tile hoverable><slot name=\"prefix\" slot=\"prefix\"></slot><px-checkbox slot=\"suffix\" inert></px-checkbox><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot></px-tile></div>");
+	}
+	constructor() {
+		super(C), c(this.shadowRoot, e.template), this.internals = this.attachInternals?.();
+	}
+	connectedCallback() {
+		if (this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotPrefix) {
+			let e = this.querySelector("px-img[slot=\"prefix\"]");
+			e && d(e);
+		}
+		this.addEventListener("mouseover", () => {
+			this.$checkbox.setAttribute("hover", "");
+		}), this.addEventListener("mouseout", () => {
+			this.$checkbox.removeAttribute("hover");
+		}), this.addEventListener("keypress", (e) => {
+			e.stopPropagation(), e.preventDefault(), e.code === "Space" && this.click();
+		}), this.addEventListener("click", (e) => {
+			this.checked = !this.checked, e.stopPropagation(), e.preventDefault();
+		}), this.hasAttribute("checked") && (this.checked = !0);
+	}
+	static get observedAttributes() {
+		return [
+			"background-color",
+			"inverted",
+			"visual",
+			"name",
+			"value",
+			"state",
+			"checked",
+			"disabled"
+		];
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "background-color":
+			case "visual":
+				this.$tile.setAttribute(e, this.getAttribute(e) || "");
+				break;
+			case "inverted":
+				f(this, this.$children, this.inverted, [this.$tile, this.$checkbox]);
+				break;
+			case "name":
+			case "value":
+				this.$checkbox && this.$checkbox.setAttribute(e, n);
+				break;
+			case "state":
+				if (this.$checkbox) {
+					if (this.checkName(l, n)) this.$checkbox.setAttribute("state", n);
+					else {
+						o(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${l.join("\", \"")}".`);
+						return;
+					}
+				}
+				break;
+			case "disabled":
+				this.handleDisabledAttributeChange(n !== null);
+				break;
+			case "checked": this.handleCheckedAttributeChange(n);
+		}
+	}
+	handleDisabledAttributeChange(e) {
+		e ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$tile.disabled = !0, this.$checkbox.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$tile.disabled = !1, this.$checkbox.removeAttribute("disabled"));
+	}
+	handleCheckedAttributeChange(e) {
+		this.internals?.setFormValue(this.formData()), e === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$checkbox && this.$checkbox.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$checkbox && this.$checkbox.setAttribute("checked", ""), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	static get formAssociated() {
+		return !0;
+	}
+	formResetCallback() {
+		this.checked = !1;
+	}
+	formStateRestoreCallback(e) {
+		this.checked = e;
+	}
+	formData() {
+		let e = new FormData();
+		if (this.name) {
+			let t = this.getAttribute("name");
+			t && (this.checked ? e.set(t, this.value ?? "") : e.delete(t));
+		}
+		return e;
+	}
+	get $tile() {
+		return this.shadowRoot.querySelector("px-tile");
+	}
+	get $el() {
+		return this.shadowRoot.querySelector(".tile-checkbox");
+	}
+	get $checkbox() {
+		return this.shadowRoot.querySelector("px-checkbox");
+	}
+	get $slotPrefix() {
+		return this.querySelector("[slot=\"prefix\"]");
+	}
+	get $children() {
+		return this.querySelectorAll("px-tile-checkbox > *");
+	}
+	get backgroundColor() {
+		return this.getAttribute("background-color");
+	}
+	set backgroundColor(e) {
+		s(this, "background-color", e);
+	}
+	get visual() {
+		return this.getAttribute("visual");
+	}
+	set visual(e) {
+		s(this, "visual", e);
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		r(this, "inverted", e);
+	}
+	get checked() {
+		return this.hasAttribute("checked");
+	}
+	set checked(e) {
+		r(this, "checked", e);
+	}
+	get name() {
+		return this.getAttribute("name");
+	}
+	set name(e) {
+		s(this, "name", e);
+	}
+	get state() {
+		return this.getAttribute("state");
+	}
+	set state(e) {
+		s(this, "state", e);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		r(this, "disabled", e);
+	}
+	get value() {
+		return this.getAttribute("value");
+	}
+	set value(e) {
+		s(this, "value", e);
+	}
 };
-d.nativeName = "a";
-let f = d;
-customElements.get("px-tile-link") || customElements.define("px-tile-link", f);
-const E = new CSSStyleSheet();
-E.replaceSync(a);
-class F extends p {
-  template() {
-    return `
-      <div class="tile-switch">
-        <px-tile hoverable>
-          <slot name="prefix" slot="prefix"></slot>
-          <px-switch slot="suffix" inert></px-switch>
-          <slot name="label" slot="label"></slot>
-          <slot name="description" slot="description"></slot>
-        </px-tile>
-      </div>
-    `;
-  }
-  constructor() {
-    var t;
-    super(E), this.shadowRoot.innerHTML = this.template(), this.internals = (t = this.attachInternals) == null ? void 0 : t.call(this);
-  }
-  connectedCallback() {
-    if (this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotPrefix) {
-      const t = this.querySelector('px-img[slot="prefix"]');
-      t && l(t);
-    }
-    this.addEventListener("mouseover", () => {
-      this.$switch.setAttribute("hover", "");
-    }), this.addEventListener("mouseout", () => {
-      this.$switch.removeAttribute("hover");
-    }), this.addEventListener("keypress", (t) => {
-      switch (t.stopPropagation(), t.preventDefault(), t.code) {
-        case "Space":
-          this.click();
-          break;
-      }
-    }), this.addEventListener("click", (t) => {
-      this.checked = !this.checked, t.stopPropagation(), t.preventDefault();
-    }), this.hasAttribute("checked") && (this.checked = !0);
-  }
-  static get observedAttributes() {
-    return [
-      "center-content",
-      "background-color",
-      "inverted",
-      "name",
-      "value",
-      "checked",
-      "disabled"
-    ];
-  }
-  attributeChangedCallback(t, e, i) {
-    if (e !== i)
-      switch (t) {
-        case "center-content":
-        case "background-color":
-          this.$tile.setAttribute(t, this.getAttribute(t) || "");
-          break;
-        case "inverted":
-          h(this, this.$children, this.inverted, [
-            this.$tile,
-            this.$switch
-          ]);
-          break;
-        case "name":
-        case "value":
-          this.$switch && this.$switch.setAttribute(t, i);
-          break;
-        case "disabled":
-          this.handleDisabledAttributeChange(i !== null);
-          break;
-        case "checked":
-          this.handleCheckedAttributeChange(i);
-          break;
-      }
-  }
-  handleDisabledAttributeChange(t) {
-    t ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$tile.disabled = !0, this.$switch.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$tile.disabled = !1, this.$switch.removeAttribute("disabled"));
-  }
-  handleCheckedAttributeChange(t) {
-    var e;
-    (e = this.internals) == null || e.setFormValue(this.formData()), t === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$switch && this.$switch.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$switch && this.$switch.setAttribute("checked", ""), this.dispatchEvent(
-      new Event("change", {
-        bubbles: !0,
-        composed: !0
-        // Allow the event to pass through shadow DOM boundaries
-      })
-    ));
-  }
-  // Form-associated callbacks
-  static get formAssociated() {
-    return !0;
-  }
-  // Set default behavior when the element is attached to a form
-  formResetCallback() {
-    this.checked = !1;
-  }
-  formStateRestoreCallback(t) {
-    this.checked = t;
-  }
-  formData() {
-    if (this.name) {
-      const t = new FormData(), e = this.getAttribute("name");
-      return e && (this.checked ? t.set(e, this.$switch.value) : t.delete(e)), t;
-    }
-  }
-  get $tile() {
-    return this.shadowRoot.querySelector("px-tile");
-  }
-  get $el() {
-    return this.shadowRoot.querySelector(".tile-switch");
-  }
-  get $switch() {
-    return this.shadowRoot.querySelector("px-switch");
-  }
-  get $slotPrefix() {
-    return this.querySelector('[slot="prefix"]');
-  }
-  get $children() {
-    return this.querySelectorAll("px-tile-switch > *");
-  }
-  get centerContent() {
-    return this.hasAttribute("center-content");
-  }
-  set centerContent(t) {
-    t ? this.setAttribute("center-content", "") : this.removeAttribute("center-content");
-  }
-  get backgroundColor() {
-    return this.getAttribute("background-color");
-  }
-  set backgroundColor(t) {
-    t ? this.setAttribute("background-color", t) : this.removeAttribute("background-color");
-  }
-  get inverted() {
-    return this.hasAttribute("inverted");
-  }
-  set inverted(t) {
-    t ? this.setAttribute("inverted", "") : this.removeAttribute("inverted");
-  }
-  get checked() {
-    return this.hasAttribute("checked");
-  }
-  set checked(t) {
-    t ? this.setAttribute("checked", "") : this.removeAttribute("checked");
-  }
-  get name() {
-    return this.getAttribute("name");
-  }
-  set name(t) {
-    t ? this.setAttribute("name", t) : this.removeAttribute("name");
-  }
-  get disabled() {
-    return this.hasAttribute("disabled");
-  }
-  set disabled(t) {
-    t ? this.setAttribute("disabled", "") : this.removeAttribute("disabled");
-  }
-  get value() {
-    return this.getAttribute("value");
-  }
-  set value(t) {
-    t ? this.setAttribute("value", t) : this.removeAttribute("value");
-  }
-}
-customElements.get("px-tile-switch") || customElements.define("px-tile-switch", F);
-export {
-  b as Tile,
-  u as TileButton,
-  H as TileCheckbox,
-  f as TileLink,
-  B as TileRadio,
-  F as TileSwitch,
-  L as tileBackgroundColorValues
+customElements.get("px-tile-checkbox") || customElements.define("px-tile-checkbox", w);
+//#endregion
+//#region src/TileRadio.ts
+var T = new CSSStyleSheet();
+T.replaceSync(y);
+var E = class e extends n {
+	static {
+		this.template = a("<div class=\"tile-radio\"><px-tile hoverable><slot name=\"prefix\" slot=\"prefix\"></slot><px-radio slot=\"suffix\" inert></px-radio><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot></px-tile></div>");
+	}
+	constructor() {
+		super(T), c(this.shadowRoot, e.template), this.internals = this.attachInternals?.();
+	}
+	connectedCallback() {
+		if (this.role = "radio", this.internals && (this.internals.role = "radio", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.tabIndex = this.parentElement?.querySelector("px-tile-radio") === this ? 0 : -1, this.$slotPrefix) {
+			let e = this.querySelector("px-img[slot=\"prefix\"]");
+			e && d(e);
+		}
+		this.addEventListener("mouseover", () => {
+			this.$radio.setAttribute("hover", "");
+		}), this.addEventListener("mouseout", () => {
+			this.$radio.removeAttribute("hover");
+		}), this.addEventListener("keypress", (e) => {
+			e.stopPropagation(), e.preventDefault(), e.code === "Space" && this.click();
+		}), this.addEventListener("click", (e) => {
+			this.checked ||= !0, e.stopPropagation(), e.preventDefault();
+		}), this.hasAttribute("checked") && (this.checked = !0);
+	}
+	static get observedAttributes() {
+		return [
+			"background-color",
+			"inverted",
+			"visual",
+			"name",
+			"value",
+			"state",
+			"checked",
+			"disabled"
+		];
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "background-color":
+			case "visual":
+				this.$tile.setAttribute(e, this.getAttribute(e) || "");
+				break;
+			case "inverted":
+				f(this, this.$children, this.inverted, [this.$tile, this.$radio]);
+				break;
+			case "name":
+			case "value":
+				this.$radio && this.$radio.setAttribute(e, n);
+				break;
+			case "state":
+				if (this.$radio) {
+					if (this.checkName(u, n)) this.$radio.setAttribute("state", n);
+					else {
+						o(`"${n}" is not a valid ${e} value for ${this.tagName.toLowerCase()}. Allowed values are: "${u.join("\", \"")}".`);
+						return;
+					}
+				}
+				break;
+			case "disabled":
+				this.handleDisabledAttributeChange(n !== null);
+				break;
+			case "checked": this.handleCheckedAttributeChange(n);
+		}
+	}
+	handleDisabledAttributeChange(e) {
+		e ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$tile.disabled = !0, this.$radio.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$tile.disabled = !1, this.$radio.removeAttribute("disabled"));
+	}
+	handleCheckedAttributeChange(e) {
+		this.internals?.setFormValue(this.formData()), e === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.tabIndex = -1, this.checked = !1, this.$radio && this.$radio.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.tabIndex = 0, this.checked = !0, this.$radio && this.$radio.setAttribute("checked", ""), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	static get formAssociated() {
+		return !0;
+	}
+	formResetCallback() {
+		this.checked = !1;
+	}
+	formStateRestoreCallback(e) {
+		this.checked = e;
+	}
+	formData() {
+		let e = new FormData();
+		if (this.name) {
+			let t = this.getAttribute("name");
+			t && (this.checked ? e.set(t, this.$radio.value) : e.delete(t));
+		}
+		return e;
+	}
+	get $tile() {
+		return this.shadowRoot.querySelector("px-tile");
+	}
+	get $el() {
+		return this.shadowRoot.querySelector(".tile-radio");
+	}
+	get $radio() {
+		return this.shadowRoot.querySelector("px-radio");
+	}
+	get $slotPrefix() {
+		return this.querySelector("[slot=\"prefix\"]");
+	}
+	get $children() {
+		return this.querySelectorAll("px-tile-radio > *");
+	}
+	get backgroundColor() {
+		return this.getAttribute("background-color");
+	}
+	set backgroundColor(e) {
+		s(this, "background-color", e);
+	}
+	get visual() {
+		return this.getAttribute("visual");
+	}
+	set visual(e) {
+		s(this, "visual", e);
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		r(this, "inverted", e);
+	}
+	get checked() {
+		return this.hasAttribute("checked");
+	}
+	set checked(e) {
+		r(this, "checked", e);
+	}
+	get name() {
+		return this.getAttribute("name");
+	}
+	set name(e) {
+		s(this, "name", e);
+	}
+	get state() {
+		return this.getAttribute("state") ?? "";
+	}
+	set state(e) {
+		s(this, "state", e);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		r(this, "disabled", e);
+	}
+	get value() {
+		return this.getAttribute("value");
+	}
+	set value(e) {
+		s(this, "value", e);
+	}
+};
+customElements.get("px-tile-radio") || customElements.define("px-tile-radio", E);
+//#endregion
+//#region src/tile-link.css?inline
+var D = ":host(:not([disabled])):host(:active){padding:0}:host(:not([disabled])):host(:active) .tile-link{border-width:var(--px-size-border-m);border-color:var(--px-color-border-state-active-default)}.tile-link{text-decoration:none}.tile-link px-icon{color:var(--px-color-icon-brand-default)}.tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-default)}:host([inverted]):host(:not([disabled])):host(:active) .tile-link{border-color:var(--px-color-border-state-active-inverted)}:host([inverted]) .tile-link px-icon{color:var(--px-color-icon-brand-inverted)}:host([inverted]) .tile-link[aria-disabled=true] px-icon{color:var(--px-color-icon-state-disabled-inverted)}", O = new CSSStyleSheet();
+O.replaceSync(D);
+var k = new CSSStyleSheet();
+k.replaceSync(y);
+var A = class t extends e {
+	static {
+		this.template = a("<a class=\"tile-link\"><px-tile hoverable><slot name=\"prefix\" slot=\"prefix\"></slot><px-icon\n        name=\"chevron_right\"\n        slot=\"suffix\"\n        from=\"lavender\"\n        size=\"s\"\n        color=\"inherit\"\n      ></px-icon><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot></px-tile></a>");
+	}
+	static {
+		this.nativeName = "a";
+	}
+	constructor() {
+		super(k, O), c(this.shadowRoot, t.template);
+	}
+	connectedCallback() {
+		if (this.$slotPrefix) {
+			let e = this.querySelector("px-img[slot=\"prefix\"]");
+			e && d(e);
+		}
+		this.backgroundColor ||= "container-default", this.hasAttribute("target") && this.getAttribute("target") === "_blank" && (this.$pxIcon.setAttribute("name", "target_blank"), this.$pxIcon.setAttribute("aria-label", this.targetBlankAriaLabel ? this.targetBlankAriaLabel : "Opens in a new tab"));
+	}
+	static get observedAttributes() {
+		return [
+			...super.observedAttributes,
+			"background-color",
+			"inverted",
+			"disabled",
+			"visual",
+			"target-blank-aria-label"
+		];
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "background-color":
+			case "visual":
+				this.$tile.setAttribute(e, this.getAttribute(e) || "");
+				break;
+			case "inverted":
+				f(this.$tile, this.$children, this.inverted, [this.$pxIcon]);
+				break;
+			case "disabled":
+				p(this.$tile, this.$children, this.disabled, [], {
+					ariaEl: this.$el,
+					setAria: !0,
+					setTabIndex: !0
+				});
+				break;
+			case "target-blank-aria-label":
+				this.$pxIcon && this.$pxIcon.setAttribute("aria-label", this.targetBlankAriaLabel || "Opens in a new tab");
+				break;
+			default: super.attributeChangedCallback(e, t, n);
+		}
+	}
+	get $tile() {
+		return this.shadowRoot.querySelector("px-tile");
+	}
+	get $slotPrefix() {
+		return this.querySelector("[slot=\"prefix\"]");
+	}
+	get $children() {
+		return this.querySelectorAll("px-tile-link > *");
+	}
+	get $pxIcon() {
+		return this.shadowRoot.querySelector("px-icon[slot=\"suffix\"]");
+	}
+	get backgroundColor() {
+		return this.getAttribute("background-color");
+	}
+	set backgroundColor(e) {
+		this._updateAttribute("background-color", e);
+	}
+	get visual() {
+		return this.getAttribute("visual");
+	}
+	set visual(e) {
+		this._updateAttribute("visual", e);
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		this._updateBooleanAttribute("inverted", e);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		this._updateBooleanAttribute("disabled", e);
+	}
+	get targetBlankAriaLabel() {
+		return this.getAttribute("target-blank-aria-label");
+	}
+	set targetBlankAriaLabel(e) {
+		this._updateAttribute("target-blank-aria-label", e);
+	}
+};
+customElements.get("px-tile-link") || customElements.define("px-tile-link", A);
+//#endregion
+//#region src/TileSwitch.ts
+var j = new CSSStyleSheet();
+j.replaceSync(y);
+var M = class e extends n {
+	static {
+		this.template = a("<div class=\"tile-switch\"><px-tile hoverable><slot name=\"prefix\" slot=\"prefix\"></slot><px-switch slot=\"suffix\" inert></px-switch><slot name=\"label\" slot=\"label\"></slot><slot name=\"description\" slot=\"description\"></slot></px-tile></div>");
+	}
+	constructor() {
+		super(j), c(this.shadowRoot, e.template), this.internals = this.attachInternals?.();
+	}
+	connectedCallback() {
+		if (this.tabIndex = 0, this.role = "checkbox", this.internals && (this.internals.role = "checkbox", this.internals.ariaChecked = `${this.checked}`), this.ariaChecked = `${this.checked}`, this.$slotPrefix) {
+			let e = this.querySelector("px-img[slot=\"prefix\"]");
+			e && d(e);
+		}
+		this.addEventListener("mouseover", () => {
+			this.$switch.setAttribute("hover", "");
+		}), this.addEventListener("mouseout", () => {
+			this.$switch.removeAttribute("hover");
+		}), this.addEventListener("keypress", (e) => {
+			e.stopPropagation(), e.preventDefault(), e.code === "Space" && this.click();
+		}), this.addEventListener("click", (e) => {
+			this.checked = !this.checked, e.stopPropagation(), e.preventDefault();
+		}), this.hasAttribute("checked") && (this.checked = !0);
+	}
+	static get observedAttributes() {
+		return [
+			"background-color",
+			"inverted",
+			"visual",
+			"name",
+			"value",
+			"checked",
+			"disabled"
+		];
+	}
+	attributeChangedCallback(e, t, n) {
+		if (t !== n) switch (e) {
+			case "background-color":
+			case "visual":
+				this.$tile.setAttribute(e, this.getAttribute(e) || "");
+				break;
+			case "inverted":
+				f(this, this.$children, this.inverted, [this.$tile, this.$switch]);
+				break;
+			case "name":
+			case "value":
+				this.$switch && this.$switch.setAttribute(e, n);
+				break;
+			case "disabled":
+				this.handleDisabledAttributeChange(n !== null);
+				break;
+			case "checked": this.handleCheckedAttributeChange(n);
+		}
+	}
+	handleDisabledAttributeChange(e) {
+		e ? (this.disabled = !0, this.internals && (this.internals.ariaDisabled = "true"), this.ariaDisabled = "true", this.$tile.disabled = !0, this.$switch.setAttribute("disabled", "")) : (this.disabled = !1, this.internals && (this.internals.ariaDisabled = "false"), this.ariaDisabled = "false", this.$tile.disabled = !1, this.$switch.removeAttribute("disabled"));
+	}
+	handleCheckedAttributeChange(e) {
+		this.internals?.setFormValue(this.formData()), e === null ? (this.internals && (this.internals.ariaChecked = "false"), this.ariaChecked = "false", this.checked = !1, this.$switch && this.$switch.removeAttribute("checked")) : (this.internals && (this.internals.ariaChecked = "true"), this.ariaChecked = "true", this.checked = !0, this.$switch && this.$switch.setAttribute("checked", ""), this.dispatchEvent(new Event("change", {
+			bubbles: !0,
+			composed: !0
+		})));
+	}
+	static get formAssociated() {
+		return !0;
+	}
+	formResetCallback() {
+		this.checked = !1;
+	}
+	formStateRestoreCallback(e) {
+		this.checked = e;
+	}
+	formData() {
+		let e = new FormData();
+		if (this.name) {
+			let t = this.getAttribute("name");
+			t && (this.checked ? e.set(t, this.$switch.value) : e.delete(t));
+		}
+		return e;
+	}
+	get $tile() {
+		return this.shadowRoot.querySelector("px-tile");
+	}
+	get $el() {
+		return this.shadowRoot.querySelector(".tile-switch");
+	}
+	get $switch() {
+		return this.shadowRoot.querySelector("px-switch");
+	}
+	get $slotPrefix() {
+		return this.querySelector("[slot=\"prefix\"]");
+	}
+	get $children() {
+		return this.querySelectorAll("px-tile-switch > *");
+	}
+	get backgroundColor() {
+		return this.getAttribute("background-color");
+	}
+	set backgroundColor(e) {
+		s(this, "background-color", e);
+	}
+	get visual() {
+		return this.getAttribute("visual");
+	}
+	set visual(e) {
+		s(this, "visual", e);
+	}
+	get inverted() {
+		return this.hasAttribute("inverted");
+	}
+	set inverted(e) {
+		r(this, "inverted", e);
+	}
+	get checked() {
+		return this.hasAttribute("checked");
+	}
+	set checked(e) {
+		r(this, "checked", e);
+	}
+	get name() {
+		return this.getAttribute("name");
+	}
+	set name(e) {
+		s(this, "name", e);
+	}
+	get disabled() {
+		return this.hasAttribute("disabled");
+	}
+	set disabled(e) {
+		r(this, "disabled", e);
+	}
+	get value() {
+		return this.getAttribute("value");
+	}
+	set value(e) {
+		s(this, "value", e);
+	}
 };
+customElements.get("px-tile-switch") || customElements.define("px-tile-switch", M);
+//#endregion
+export { _ as Tile, S as TileButton, w as TileCheckbox, A as TileLink, E as TileRadio, M as TileSwitch, g as tileBackgroundColorValues };