@tmorrow/cre8-wc 1.1.2 → 1.1.3

package/lib/components/select-tile/select-tile.js

@@ -1,140 +1,142 @@
-import { s as u } from "../../icon-D22g8aWB.js";
-import { css as f, LitElement as _, html as n } from "lit";
-import { property as i, query as v } from "lit/decorators.js";
-import { ifDefined as y } from "lit-html/directives/if-defined.js";
-import { nanoid as g } from "nanoid";
-import { Cre8FormElement as x } from "../cre8-form-element.js";
-const k = f`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-select-tile{position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;height:100%;width:100%;padding:1rem;gap:1rem;border-color:var(--cre8-color-border-default);border-width:var(--cre8-border-width-default);border-radius:var(--cre8-border-radius-default);border-style:solid;background:var(--cre8-color-bg-default)}.cre8-c-select-tile:hover,.cre8-c-select-tile:focus,.cre8-c-select-tile:focus-visible,.cre8-c-select-tile:active{background:var(--cre8-color-bg-default-hover);border-color:var(--cre8-color-border-brand)}.cre8-c-select-tile:focus,.cre8-c-select-tile:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile.cre8-c-select-tile--error{border-color:var(--cre8-color-border-error);background:var(--cre8-color-bg-error)}.cre8-c-select-tile.cre8-c-select-tile--success{border-color:var(--cre8-color-border-success);background:var(--cre8-color-bg-success)}.cre8-c-select-tile.cre8-c-select-tile--disabled{border-color:var(--cre8-color-border-disabled);background:var(--cre8-color-bg-disabled);cursor:not-allowed}input:checked+.cre8-c-select-tile{border-width:2px;border-color:var(--cre8-color-border-brand)}.cre8-c-select-tile__input{display:none}.cre8-c-select-tile--horizontal{flex-direction:row;align-items:center;justify-content:center}@media all and (max-width: 560px){.cre8-c-select-tile--vertical-at-sm{flex-direction:column}.cre8-c-select-tile--vertical-at-sm .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 560px){.cre8-c-select-tile--vertical-at-sm-2{flex-direction:column}.cre8-c-select-tile--vertical-at-sm-2 .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 768px){.cre8-c-select-tile--vertical-at-md{flex-direction:column}.cre8-c-select-tile--vertical-at-md .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 960px){.cre8-c-select-tile--vertical-at-lg{flex-direction:column}.cre8-c-select-tile--vertical-at-lg .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 1200px){.cre8-c-select-tile--vertical-at-xl{flex-direction:column}.cre8-c-select-tile--vertical-at-xl .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 1400px){.cre8-c-select-tile--vertical-at-xxl{flex-direction:column}.cre8-c-select-tile--vertical-at-xxl .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}.cre8-c-select-tile--bare{border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);box-shadow:none}.cre8-c-select-tile--horizontal-bare{flex-direction:row;border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);box-shadow:none;align-items:center;justify-content:center}.cre8-c-select-tile--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.cre8-c-select-tile__header{display:block;flex:none}.cre8-c-select-tile__body{display:block;flex:1 1 auto}.cre8-c-select-tile--bare .cre8-c-select-tile__body{padding:var(--cre8-spacing-0)}.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__body{padding:var(--cre8-spacing-0)}.cre8-c-select-tile__body .cre8-c-select-tile__body_title{font-family:var(--cre8-typography-title-default-mobile-font-family);font-size:var(--cre8-typography-title-default-mobile-font-size);font-weight:var(--cre8-typography-title-default-mobile-font-weight);line-height:var(--cre8-typography-title-default-mobile-line-height);text-decoration:var(--cre8-typography-title-default-mobile-text-decoration);text-transform:var(--cre8-typography-title-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-select-tile__body .cre8-c-select-tile__body_title{font-family:var(--cre8-typography-title-default-font-family);font-size:var(--cre8-typography-title-default-font-size);font-weight:var(--cre8-typography-title-default-font-weight);line-height:var(--cre8-typography-title-default-line-height);text-decoration:var(--cre8-typography-title-default-text-decoration);text-transform:var(--cre8-typography-title-default-text-transform)}}.cre8-c-select-tile__body .cre8-c-select-tile__body_body{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform)}.cre8-c-select-tile__footer{display:flex;flex:none}.cre8-c-select-tile--bare .cre8-c-select-tile__footer{padding:var(--cre8-spacing-0)}.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__footer{padding:var(--cre8-spacing-0)}.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-left,.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-left{order:-1}.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-none,.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-none{display:none}.cre8-c-select-tile__custom-radio{display:flex;flex:none;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-round);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-default)}.cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-radio{border-color:var(--cre8-color-border-strong);outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem;border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--error .cre8-c-select-tile__custom-radio{border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-radio{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}.cre8-c-select-tile__custom-radio-top-right{position:absolute;top:0.5rem;right:0.5rem}.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__icon{display:flex}.cre8-c-select-tile__inner-circle{display:none;cursor:pointer;height:0.75rem;width:0.75rem;background:var(--cre8-color-content-brand);border-radius:var(--cre8-border-radius-round)}.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__inner-circle{flex:none;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}.cre8-c-select-tile--error .cre8-c-select-tile__inner-circle{background:var(--cre8-color-bg-error-strong)}.cre8-c-select-tile--disabled .cre8-c-select-tile__inner-circle{background:var(--cre8-color-content-disabled)}input:checked~* .cre8-c-select-tile__custom-radio .cre8-c-select-tile__inner-circle{display:flex}.cre8-c-select-tile__custom-checkbox{display:flex;flex:none;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-small);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-strong)}.cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-checkbox{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-brand-strong)}.cre8-c-select-tile--error input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-default)}.cre8-c-select-tile--disabled input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-disabled)}.cre8-c-select-tile__icon{display:none;color:var(--cre8-color-content-knockout)}.cre8-c-select-tile--error .cre8-c-select-tile__icon{color:var(--cre8-color-content-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__icon{color:var(--cre8-color-content-disabled)}input:checked~* .cre8-c-select-tile__custom-checkbox .cre8-c-select-tile__icon{display:flex}`;
-function b(d, t) {
-  return t < 0 ? d.length - 1 : t >= d.length ? 0 : t;
-}
-class p {
-  constructor(t) {
-    this._clickHandler = (e) => {
-      e.preventDefault(), this._checkAndFocus(this.host);
-    }, this._checkAndFocus = (e) => {
-      const o = e.checked;
-      this.removeChecked(), e.focus(), e.checked = !0, e.setAttribute("tabindex", "0"), o || (e.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), e.dispatchEvent(new Event("change", { bubbles: !0 })));
-    }, this._handleKeyDown = (e) => {
-      ["ArrowLeft", "ArrowUp", "ArrowRight", "ArrowDown"].includes(e.code) && this._handleArrowKeys(e), ["Enter", " "].includes(e.key) && this._handleEnterSpace(e);
-    }, this._handleArrowKeys = (e) => {
-      const o = this.findAllElementsInSameRadioButtonGroup({ excludeDisabled: !0 });
-      if (o.length <= 1)
-        return;
-      const l = o.findIndex((a) => a === this.host);
-      let s;
-      e.code === "ArrowLeft" || e.code === "ArrowUp" ? s = o[b(o, l - 1)] : (e.code === "ArrowRight" || e.code === "ArrowDown") && (s = o[b(o, l + 1)]), this._checkAndFocus(s), e.preventDefault();
-    }, this._handleEnterSpace = (e) => {
-      this._checkAndFocus(this.host), e.preventDefault();
-    }, this.host = t, t.addController(this);
-  }
-  hostConnected() {
-    this.host._internals.role = "radio", this.host.setAttribute("role", "radio"), this.host.setAttribute("tabindex", "0"), this.host.addEventListener("click", this._clickHandler), this.host.addEventListener("keydown", this._handleKeyDown);
-  }
-  hostDisconnected() {
-    this.host._internals.role = void 0, this.host.removeAttribute("role"), this.host.removeAttribute("tabindex"), this.host.removeEventListener("click", this._clickHandler), this.host.removeEventListener("keydown", this._handleKeyDown);
-  }
-  hostUpdate() {
-  }
-  /**
-   * Find all elements that are in the same "radio button group", following the HTML 5 spec,
-   * except that we're looking at `[role="radio"]` instead of `input[type="radio"]`.
-   *
-   * - They have the attribute role="radio" set
-   * - They have the same form owner, or both have no form owner
-   * - They're in the same tree (same document, don't look at shadow dom)
-   * - They both have non-empty name attributes, and the names are the same
-   *
-   */
-  findAllElementsInSameRadioButtonGroup({ excludeDisabled: t } = {}) {
-    const e = this.host.name, o = this.host.form;
-    if (e && e.length > 0) {
-      const l = this.host.ownerDocument, s = Array.from(
-        l.querySelectorAll(`[role="radio"][name="${e}"]`)
-      ).filter((a) => a.form === o);
-      return t === !0 ? s.filter((a) => !(a.disabled || a.ariaDisabled === "true")) : s;
-    }
-    return [];
-  }
-  /**
-    * Remove checked
-    * 1) Reset the form field to not checked
-    * 2) Remove checked property from all items and set tabindex to -1
-    */
-  removeChecked() {
-    this.findAllElementsInSameRadioButtonGroup().forEach((e) => {
-      e.checked = !1, e.setAttribute("tabindex", "-1");
-    });
-  }
-}
-class m {
-  constructor(t) {
-    this._clickHandler = (e) => {
-      this._checkAndFocus(), e.preventDefault();
-    }, this._checkAndFocus = () => {
-      this.host.checked = !this.host.checked, this.host.dispatchEvent(new Event("input", { bubbles: !0, composed: !0 })), this.host.dispatchEvent(new Event("change", { bubbles: !0 }));
-    }, this._handleKeyDown = (e) => {
-      ["Enter", " "].includes(e.key) && this._handleEnterSpace(e);
-    }, this._handleEnterSpace = (e) => {
-      this._checkAndFocus(), e.preventDefault();
-    }, this.host = t, t.addController(this);
-  }
-  hostConnected() {
-    this.host._internals.role = "checkbox", this.host.setAttribute("tabindex", "0"), this.host.addEventListener("click", this._clickHandler), this.host.addEventListener("keydown", this._handleKeyDown);
-  }
-  hostDisconnected() {
-    this.host._internals.role = void 0, this.host.removeAttribute("tabindex"), this.host.removeEventListener("click", this._clickHandler), this.host.removeEventListener("keydown", this._handleKeyDown);
-  }
-}
-var w = Object.defineProperty, c = (d, t, e, o) => {
-  for (var l = void 0, s = d.length - 1, a; s >= 0; s--)
-    (a = d[s]) && (l = a(t, e, l) || l);
-  return l && w(t, e, l), l;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const h = class h extends x {
-  constructor() {
-    super(...arguments), this._controller = void 0, this.type = "radio", this.variantBreakToVertical = "sm", this.checkPosition = "right", this.radioVariant = "dot";
-  }
-  /**
-   * The form associated with this field
-   *
-   * TOOD: maybe this goes on Cre8FormElement
-   */
-  get form() {
-    return this._internals.form;
-  }
-  /**
-   * Connected callback lifecycle
-   * 1) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible
-   * 2) Initialize the correct controller
-   */
-  connectedCallback() {
-    super.connectedCallback(), this.fieldId = this.fieldId || g(), this._controller = this.type === "radio" ? new p(this) : new m(this), this.disabled && (this._internals.ariaDisabled = "true");
-  }
-  /**
-   * Reset form callback
-   * 1) Remove the checked state from all radio elements
-   * 2) Set the checked state to the initial checked state
-   * 3) Set the radio field input checked attribute to the initial checked state
-   */
-  formResetCallback() {
-    this.checked = this.defaultChecked, this.field.checked = this.defaultChecked;
-  }
-  /**
-   * Whenever the "checked" property changes, update our form value, aria-checked,
-   * and the checked property of `this.field`.
-   *
-   */
-  updated(t) {
-    super.updated(t), t.has("checked") && this.setAttribute("aria-checked", this.checked ? "true" : "false"), t.has("type") && (this._controller.hostDisconnected(), this._controller = this.type === "radio" ? new p(this) : new m(this)), t.has("disabled") && (this.disabled ? this._internals.ariaDisabled = "true" : this._internals.ariaDisabled = "false");
-  }
-  renderInput() {
-    return n`
+import svgCheck from '../../icons/System/Regular/Check.svg?raw';
+import { LitElement, html, } from 'lit';
+import { property, query } from 'lit/decorators.js';
+import { ifDefined } from 'lit-html/directives/if-defined.js';
+import { nanoid } from 'nanoid';
+import { Cre8FormElement } from '../cre8-form-element';
+import '../icon/icon';
+import styles from './select-tile.styles.js';
+import { SelectTileRadioController } from './select-tile-radio-controller';
+import { SelectTileCheckboxController } from './select-tile-checkbox-controller';
+/**
+ * The Select Tile component is a short block of content inside a visual
+ * container that can be used in place of checkboxes, radio buttons, and
+ * links.  It allows you to add more descriptive and visually appealing
+ * content for these actions while letting you compare different choices
+ * either side-by-side or on top of each other.
+ *
+ * Typically you could use the "header" slot for an icon, and the "title"
+ * and "body" slots for a content title and body text below it.
+ *
+ * The css parts are shown here wrapped in ::part() because otherwise Storybook
+ * won't render them and the slots if they have the same name.
+ * See https://developer.mozilla.org/en-US/docs/Web/CSS/::part
+ *
+ * @fires change
+ * @fires input
+ * @slot "" - The default slot goes into the center, main part of the Select Tile.
+ *         Consider using title and body instead.
+ * @slot "header" - The top or left part of the Select Tile
+ * @slot footer - The bottom or right part of the Select Tile
+ * @slot title - The title part of the Select Tile, use with body slot and
+ *               instead of the default slot for appropriate typography.
+ * @slot "body" - The "body" part of the Select Tile, which appears under
+ *                the title slot and receives apporpriate typography.
+ *
+ * @csspart ::part(select-tile) - The main wrapping element
+ * @csspart ::part(header) - The header element wrapping the left or top element
+ * @csspart ::part(footer) - The footer element wrapping the right element
+ * @csspart ::part(body) - The main body of the select-tile, wrapper around the default slot
+ * @csspart ::part(body-title) - The element that wraps the "title" slot
+ * @csspart ::part(body-body) - The element that wraps the "body" slot
+ *
+*/
+export class Cre8SelectTile extends Cre8FormElement {
+    constructor() {
+        super(...arguments);
+        this._controller = undefined;
+        /**
+         * Should this Select Tile behave as a radio button or a checkbox?
+         */
+        this.type = 'radio';
+        /**
+         * Which breakpoint, if any, to switch to verticial.
+         * Only useful for horizontal variants. Defaults to 'sm'.
+         */
+        this.variantBreakToVertical = 'sm';
+        /**
+         * Where does the checkmark or radio button go?
+         * It disappears on 'none'. Only top-right is supported for vertical variants.
+         */
+        this.checkPosition = 'right';
+        /**
+         * In radio mode, whether to use the circle with the dot, or the rounded check.
+         */
+        this.radioVariant = 'dot';
+    }
+    /**
+     * The form associated with this field
+     *
+     * TOOD: maybe this goes on Cre8FormElement
+     */
+    get form() {
+        return this._internals.form;
+    }
+    /**
+     * Connected callback lifecycle
+     * 1) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible
+     * 2) Initialize the correct controller
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.fieldId = this.fieldId || nanoid(); /* 1 */
+        this._controller = this.type === 'radio'
+            ? new SelectTileRadioController(this)
+            : new SelectTileCheckboxController(this);
+        if (this.disabled) {
+            this._internals.ariaDisabled = 'true';
+        }
+    }
+    /**
+     * Reset form callback
+     * 1) Remove the checked state from all radio elements
+     * 2) Set the checked state to the initial checked state
+     * 3) Set the radio field input checked attribute to the initial checked state
+     */
+    formResetCallback() {
+        this.checked = this.defaultChecked;
+        this.field.checked = this.defaultChecked;
+    }
+    /**
+     * Whenever the "checked" property changes, update our form value, aria-checked,
+     * and the checked property of `this.field`.
+     *
+     */
+    updated(changedProps) {
+        super.updated(changedProps);
+        if (changedProps.has('checked')) {
+            // this.field.checked = this.checked;
+            // this.field.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null);
+            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');
+        }
+        if (changedProps.has('type')) {
+            this._controller.hostDisconnected();
+            this._controller = this.type === 'radio'
+                ? new SelectTileRadioController(this)
+                : new SelectTileCheckboxController(this);
+        }
+        if (changedProps.has('disabled')) {
+            if (this.disabled) {
+                this._internals.ariaDisabled = 'true';
+            }
+            else {
+                this._internals.ariaDisabled = 'false';
+            }
+        }
+    }
+    renderInput() {
+        return html `
         <input
             class="cre8-c-select-tile__input"
             type=${this.type}
             id=${this.fieldId}
-            aria-describedby="${y(this.ariaDescribedBy)}"
+            aria-describedby="${ifDefined(this.ariaDescribedBy)}"
             ?required=${this.required}
             name=${this.name}
             .value=${this.value}
@@ -142,52 +144,55 @@ const h = class h extends x {
             .checked="${this.checked}"
         />
         `;
-  }
-  renderCheckboxIcon() {
-    return this.type === "checkbox" ? n`
-            <cre8-icon svg="${u}" class="cre8-c-select-tile__icon" aria-hidden="${!this.checked}"></cre8-icon>
-        ` : null;
-  }
-  render() {
-    const t = this.componentClassNames("cre8-c-select-tile", {
-      "cre8-c-select-tile--bare": this.variant === "bare",
-      "cre8-c-select-tile--horizontal": this.variant === "horizontal",
-      "cre8-c-select-tile--horizontal-bare": this.variant === "horizontal-bare",
-      "cre8-c-select-tile--vertical-at-sm": this.variantBreakToVertical === "sm",
-      "cre8-c-select-tile--vertical-at-sm-2": this.variantBreakToVertical === "sm-2",
-      "cre8-c-select-tile--vertical-at-md": this.variantBreakToVertical === "md",
-      "cre8-c-select-tile--vertical-at-lg": this.variantBreakToVertical === "lg",
-      "cre8-c-select-tile--vertical-at-xl": this.variantBreakToVertical === "xl",
-      "cre8-c-select-tile--vertical-at-xxl": this.variantBreakToVertical === "xxl",
-      "cre8-c-select-tile--align-center": this.align === "center",
-      "cre8-c-select-tile--error": this.isError,
-      "cre8-c-select-tile--success": this.isSuccess,
-      "cre8-c-select-tile--disabled": this.disabled
-    }), e = this.componentClassNames(
-      this.type === "radio" ? "cre8-c-select-tile__custom-radio" : "cre8-c-select-tile__custom-checkbox",
-      {
-        "cre8-c-select-tile__custom-radio-top-right": !this.variant || this.variant === "bare" || this.checkPosition === "top-right",
-        "cre8-c-select-tile__custom-radio-left": this.checkPosition === "left",
-        "cre8-c-select-tile__custom-radio-none": this.checkPosition === "none",
-        "cre8-c-select-tile__custom-radio-check": this.radioVariant === "check"
-      }
-    ), o = this.disabled ? void 0 : "0";
-    return n`
+    }
+    renderCheckboxIcon() {
+        if (this.type === 'checkbox') {
+            return html `
+            <cre8-icon svg="${svgCheck}" class="cre8-c-select-tile__icon" aria-hidden="${!this.checked}"></cre8-icon>
+        `;
+        }
+        return null;
+    }
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-select-tile', {
+            'cre8-c-select-tile--bare': this.variant === 'bare',
+            'cre8-c-select-tile--horizontal': this.variant === 'horizontal',
+            'cre8-c-select-tile--horizontal-bare': this.variant === 'horizontal-bare',
+            'cre8-c-select-tile--vertical-at-sm': this.variantBreakToVertical === 'sm',
+            'cre8-c-select-tile--vertical-at-sm-2': this.variantBreakToVertical === 'sm-2',
+            'cre8-c-select-tile--vertical-at-md': this.variantBreakToVertical === 'md',
+            'cre8-c-select-tile--vertical-at-lg': this.variantBreakToVertical === 'lg',
+            'cre8-c-select-tile--vertical-at-xl': this.variantBreakToVertical === 'xl',
+            'cre8-c-select-tile--vertical-at-xxl': this.variantBreakToVertical === 'xxl',
+            'cre8-c-select-tile--align-center': this.align === 'center',
+            'cre8-c-select-tile--error': this.isError,
+            'cre8-c-select-tile--success': this.isSuccess,
+            'cre8-c-select-tile--disabled': this.disabled,
+        });
+        const checkboxClassNames = this.componentClassNames(this.type === 'radio' ? 'cre8-c-select-tile__custom-radio' : 'cre8-c-select-tile__custom-checkbox', {
+            'cre8-c-select-tile__custom-radio-top-right': !this.variant
+                || this.variant === 'bare' || this.checkPosition === 'top-right',
+            'cre8-c-select-tile__custom-radio-left': this.checkPosition === 'left',
+            'cre8-c-select-tile__custom-radio-none': this.checkPosition === 'none',
+            'cre8-c-select-tile__custom-radio-check': this.radioVariant === 'check',
+        });
+        const labelTabIndex = this.disabled ? undefined : '0';
+        return html `
         ${this.renderInput()}
-        <label class="${t}" part="select-tile" for=${this.fieldId} tabindex=${o}>
-            ${this.slotNotEmpty("header") && n`
+        <label class="${componentClassNames}" part="select-tile" for=${this.fieldId} tabindex=${labelTabIndex}>
+            ${this.slotNotEmpty('header') && html `
                 <div class="cre8-c-select-tile__header" part="header">
                     <slot name="header"></slot>
                 </div>
             `}
             <div part="body" class="cre8-c-select-tile__body">
                 <slot></slot>
-                ${this.slotNotEmpty("title") && n`
+                ${this.slotNotEmpty('title') && html `
                     <div part="body-title" class="cre8-c-select-tile__body_title">
                         <slot name="title"></slot>
                     </div>
                 `}
-                ${this.slotNotEmpty("body") && n`
+                ${this.slotNotEmpty('body') && html `
                     <div part="body-body" class="cre8-c-select-tile__body_body">
                         <slot name="body"></slot>
                     </div>
@@ -196,64 +201,64 @@ const h = class h extends x {
             <div part="footer" class="cre8-c-select-tile__footer">
                 <slot name="footer"></slot>
             </div>
-            <div class="${e}">
+            <div class="${checkboxClassNames}">
                 ${this.renderCheckboxIcon()}
                 <div class="cre8-c-select-tile__inner-circle">
-                    <cre8-icon svg="${u}" class="cre8-c-select-tile__icon"></cre8-icon>
+                    <cre8-icon svg="${svgCheck}" class="cre8-c-select-tile__icon"></cre8-icon>
                 </div>
             </div>
         </label>`;
-  }
-};
-h.shadowRootOptions = { ..._.shadowRootOptions, delegatesFocus: !0 }, h.styles = [k];
-let r = h;
-c([
-  i({ reflect: !0 })
-], r.prototype, "type");
-c([
-  v("input")
-], r.prototype, "field");
-c([
-  i({ reflect: !0 })
-], r.prototype, "variant");
-c([
-  i({ reflect: !0 })
-], r.prototype, "variantBreakToVertical");
-c([
-  i({ reflect: !0 })
-], r.prototype, "checkPosition");
-c([
-  i({ reflect: !0 })
-], r.prototype, "radioVariant");
-c([
-  i({ reflect: !0 })
-], r.prototype, "align");
-c([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "isError");
-c([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "disabled");
-c([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "required");
-c([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "checked");
-c([
-  i({ attribute: "checked", type: Boolean, reflect: !0 })
-], r.prototype, "defaultChecked");
-c([
-  i()
-], r.prototype, "fieldId");
-c([
-  i()
-], r.prototype, "ariaDescribedBy");
-c([
-  i({ type: Boolean, reflect: !0 })
-], r.prototype, "isSuccess");
-customElements.get("cre8-select-tile") === void 0 && customElements.define("cre8-select-tile", r);
-export {
-  r as Cre8SelectTile,
-  r as default
-};
+    }
+}
+Cre8SelectTile.shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };
+Cre8SelectTile.styles = [styles];
+__decorate([
+    property({ reflect: true })
+], Cre8SelectTile.prototype, "type", void 0);
+__decorate([
+    query('input')
+], Cre8SelectTile.prototype, "field", void 0);
+__decorate([
+    property({ reflect: true })
+], Cre8SelectTile.prototype, "variant", void 0);
+__decorate([
+    property({ reflect: true })
+], Cre8SelectTile.prototype, "variantBreakToVertical", void 0);
+__decorate([
+    property({ reflect: true })
+], Cre8SelectTile.prototype, "checkPosition", void 0);
+__decorate([
+    property({ reflect: true })
+], Cre8SelectTile.prototype, "radioVariant", void 0);
+__decorate([
+    property({ reflect: true })
+], Cre8SelectTile.prototype, "align", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8SelectTile.prototype, "isError", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8SelectTile.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8SelectTile.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8SelectTile.prototype, "checked", void 0);
+__decorate([
+    property({ attribute: 'checked', type: Boolean, reflect: true })
+], Cre8SelectTile.prototype, "defaultChecked", void 0);
+__decorate([
+    property()
+], Cre8SelectTile.prototype, "fieldId", void 0);
+__decorate([
+    property()
+], Cre8SelectTile.prototype, "ariaDescribedBy", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8SelectTile.prototype, "isSuccess", void 0);
+if (customElements.get('cre8-select-tile') === undefined) {
+    customElements.define('cre8-select-tile', Cre8SelectTile);
+}
+export default Cre8SelectTile;
+//# sourceMappingURL=select-tile.js.map

package/lib/components/select-tile/select-tile.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile.js","sourceRoot":"","sources":["../../../components/select-tile/select-tile.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,QAAQ,MAAM,0CAA0C,CAAC;AAChE,OAAO,EACH,UAAU,EAAkB,IAAI,GACnC,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,QAAQ,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,SAAS,EAAE,MAAM,mCAAmC,CAAC;AAC9D,OAAO,EAAE,MAAM,EAAE,MAAM,QAAQ,CAAC;AAEhC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AAEtB,OAAO,MAAM,MAAM,yBAAyB,CAAC;AAC7C,OAAO,EAAE,yBAAyB,EAAE,MAAM,gCAAgC,CAAC;AAC3E,OAAO,EAAE,4BAA4B,EAAE,MAAM,mCAAmC,CAAC;AAE7E;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACN,MAAM,OAAO,cAAe,SAAQ,eAAe;IAAnD;;QAGY,gBAAW,GAAyE,SAAS,CAAC;QAEtG;;WAEG;QAEC,SAAI,GAAyB,OAAO,CAAC;QAoBzC;;;WAGG;QAEC,2BAAsB,GAAwD,IAAI,CAAC;QAEvF;;;WAGG;QAEC,kBAAa,GAA4C,OAAO,CAAC;QAErE;;WAEG;QAEC,iBAAY,GAAoB,KAAK,CAAC;IA2N9C,CAAC;IAzJG;;;;OAIG;IACH,IAAI,IAAI;QACJ,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,CAAC;IAChC,CAAC;IAED;;;;OAIG;IACH,iBAAiB;QACb,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,IAAI,MAAM,EAAE,CAAC,CAAC,OAAO;QAChD,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO;YACpC,CAAC,CAAC,IAAI,yBAAyB,CAAC,IAAI,CAAC;YACrC,CAAC,CAAC,IAAI,4BAA4B,CAAC,IAAI,CAAC,CAAC;QAC7C,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;YAChB,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,MAAM,CAAC;QAC1C,CAAC;IACL,CAAC;IAED;;;;;OAKG;IACH,iBAAiB;QACb,IAAI,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;QACnC,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,cAAc,CAAC;IAC7C,CAAC;IAGD;;;;OAIG;IACH,OAAO,CAAC,YAA4B;QAChC,KAAK,CAAC,OAAO,CAAC,YAAY,CAAC,CAAC;QAE5B,IAAI,YAAY,CAAC,GAAG,CAAC,SAAS,CAAC,EAAE,CAAC;YAC9B,qCAAqC;YACrC,8GAA8G;YAC9G,IAAI,CAAC,YAAY,CAAC,cAAc,EAAE,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC;QACvE,CAAC;QACD,IAAI,YAAY,CAAC,GAAG,CAAC,MAAM,CAAC,EAAE,CAAC;YAC3B,IAAI,CAAC,WAAW,CAAC,gBAAgB,EAAE,CAAC;YACpC,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC,IAAI,KAAK,OAAO;gBACpC,CAAC,CAAC,IAAI,yBAAyB,CAAC,IAAI,CAAC;gBACrC,CAAC,CAAC,IAAI,4BAA4B,CAAC,IAAI,CAAC,CAAC;QACjD,CAAC;QACD,IAAI,YAAY,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE,CAAC;YAC/B,IAAI,IAAI,CAAC,QAAQ,EAAE,CAAC;gBAChB,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,MAAM,CAAC;YAC1C,CAAC;iBAAM,CAAC;gBACJ,IAAI,CAAC,UAAU,CAAC,YAAY,GAAG,OAAO,CAAC;YAC3C,CAAC;QACL,CAAC;IACL,CAAC;IAGD,WAAW;QACP,OAAO,IAAI,CAAA;;;mBAGA,IAAI,CAAC,IAAI;iBACX,IAAI,CAAC,OAAO;gCACG,SAAS,CAAC,IAAI,CAAC,eAAe,CAAC;wBACvC,IAAI,CAAC,QAAQ;mBAClB,IAAI,CAAC,IAAI;qBACP,IAAI,CAAC,KAAK;yBACN,IAAI,CAAC,QAAQ;wBACd,IAAI,CAAC,OAAO;;SAE3B,CAAC;IACN,CAAC;IAED,kBAAkB;QACd,IAAI,IAAI,CAAC,IAAI,KAAK,UAAU,EAAE,CAAC;YAC3B,OAAO,IAAI,CAAA;8BACO,QAAQ,mDAAmD,CAAC,IAAI,CAAC,OAAO;SAC7F,CAAC;QACF,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,oBAAoB,EAAE;YACvE,0BAA0B,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACnD,gCAAgC,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;YAC/D,qCAAqC,EAAE,IAAI,CAAC,OAAO,KAAK,iBAAiB;YACzE,oCAAoC,EAAE,IAAI,CAAC,sBAAsB,KAAK,IAAI;YAC1E,sCAAsC,EAAE,IAAI,CAAC,sBAAsB,KAAK,MAAM;YAC9E,oCAAoC,EAAE,IAAI,CAAC,sBAAsB,KAAK,IAAI;YAC1E,oCAAoC,EAAE,IAAI,CAAC,sBAAsB,KAAK,IAAI;YAC1E,oCAAoC,EAAE,IAAI,CAAC,sBAAsB,KAAK,IAAI;YAC1E,qCAAqC,EAAE,IAAI,CAAC,sBAAsB,KAAK,KAAK;YAC5E,kCAAkC,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;YAC3D,2BAA2B,EAAE,IAAI,CAAC,OAAO;YACzC,6BAA6B,EAAE,IAAI,CAAC,SAAS;YAC7C,8BAA8B,EAAE,IAAI,CAAC,QAAQ;SAChD,CAAC,CAAC;QAEH,MAAM,kBAAkB,GAAG,IAAI,CAAC,mBAAmB,CAC/C,IAAI,CAAC,IAAI,KAAK,OAAO,CAAC,CAAC,CAAC,kCAAkC,CAAC,CAAC,CAAC,qCAAqC,EAClG;YACI,4CAA4C,EAAE,CAAC,IAAI,CAAC,OAAO;mBACpD,IAAI,CAAC,OAAO,KAAK,MAAM,IAAI,IAAI,CAAC,aAAa,KAAK,WAAW;YACpE,uCAAuC,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;YACtE,uCAAuC,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;YACtE,wCAAwC,EAAE,IAAI,CAAC,YAAY,KAAK,OAAO;SAC1E,CACJ,CAAC;QAEF,MAAM,aAAa,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC,GAAG,CAAC;QAEtD,OAAO,IAAI,CAAA;UACT,IAAI,CAAC,WAAW,EAAE;wBACJ,mBAAmB,4BAA4B,IAAI,CAAC,OAAO,aAAa,aAAa;cAC/F,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC,IAAI,IAAI,CAAA;;;;aAIpC;;;kBAGK,IAAI,CAAC,YAAY,CAAC,OAAO,CAAC,IAAI,IAAI,CAAA;;;;iBAInC;kBACC,IAAI,CAAC,YAAY,CAAC,MAAM,CAAC,IAAI,IAAI,CAAA;;;;iBAIlC;;;;;0BAKS,kBAAkB;kBAC1B,IAAI,CAAC,kBAAkB,EAAE;;sCAEL,QAAQ;;;iBAG7B,CAAC;IACd,CAAC;;AAxQM,gCAAiB,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,EAAE,cAAc,EAAE,IAAI,EAAE,AAA5D,CAA6D;AAgB9E,qBAAM,GAAG,CAAC,MAAM,CAAC,AAAX,CAAY;AARrB;IADH,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;4CACa;AAMrC;IADH,KAAK,CAAC,OAAO,CAAC;6CACc;AAYzB;IADH,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CAC4B;AAOpD;IADH,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8DAC2D;AAOnF;IADH,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;qDACyC;AAMjE;IADH,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;oDACc;AAWtC;IADH,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CACP;AAMjB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACrB;AAMlB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACpB;AAMnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;gDACpB;AAQnB;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;+CACrB;AASlB;IADH,QAAQ,CAAC,EAAE,SAAS,EAAE,SAAS,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sDACrC;AAMxB;IADH,QAAQ,EAAE;+CACU;AAMb;IADP,QAAQ,EAAE;uDACsB;AAM7B;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;iDACnB;AA6J5B,IAAI,cAAc,CAAC,GAAG,CAAC,kBAAkB,CAAC,KAAK,SAAS,EAAE,CAAC;IACvD,cAAc,CAAC,MAAM,CAAC,kBAAkB,EAAE,cAAc,CAAC,CAAC;AAC9D,CAAC;AAQD,eAAe,cAAc,CAAC","sourcesContent":["import svgCheck from '../../icons/System/Regular/Check.svg?raw';\nimport {\n    LitElement, PropertyValues, html,\n} from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit-html/directives/if-defined.js';\nimport { nanoid } from 'nanoid';\n\nimport { Cre8FormElement } from '../cre8-form-element';\nimport '../icon/icon';\n\nimport styles from './select-tile.styles.js';\nimport { SelectTileRadioController } from './select-tile-radio-controller';\nimport { SelectTileCheckboxController } from './select-tile-checkbox-controller';\n\n    /**\n     * The Select Tile component is a short block of content inside a visual\n     * container that can be used in place of checkboxes, radio buttons, and\n     * links.  It allows you to add more descriptive and visually appealing\n     * content for these actions while letting you compare different choices\n     * either side-by-side or on top of each other.\n     *\n     * Typically you could use the \"header\" slot for an icon, and the \"title\"\n     * and \"body\" slots for a content title and body text below it.\n     *\n     * The css parts are shown here wrapped in ::part() because otherwise Storybook\n     * won't render them and the slots if they have the same name.\n     * See https://developer.mozilla.org/en-US/docs/Web/CSS/::part\n     *\n     * @fires change\n     * @fires input\n     * @slot \"\" - The default slot goes into the center, main part of the Select Tile.\n     *         Consider using title and body instead.\n     * @slot \"header\" - The top or left part of the Select Tile\n     * @slot footer - The bottom or right part of the Select Tile\n     * @slot title - The title part of the Select Tile, use with body slot and\n     *               instead of the default slot for appropriate typography.\n     * @slot \"body\" - The \"body\" part of the Select Tile, which appears under\n     *                the title slot and receives apporpriate typography.\n     *\n     * @csspart ::part(select-tile) - The main wrapping element\n     * @csspart ::part(header) - The header element wrapping the left or top element\n     * @csspart ::part(footer) - The footer element wrapping the right element\n     * @csspart ::part(body) - The main body of the select-tile, wrapper around the default slot\n     * @csspart ::part(body-title) - The element that wraps the \"title\" slot\n     * @csspart ::part(body-body) - The element that wraps the \"body\" slot\n     *\n    */\nexport class Cre8SelectTile extends Cre8FormElement {\n    static shadowRootOptions = { ...LitElement.shadowRootOptions, delegatesFocus: true };\n\n    private _controller: SelectTileRadioController | SelectTileCheckboxController | undefined = undefined;\n\n    /**\n     * Should this Select Tile behave as a radio button or a checkbox?\n     */\n    @property({ reflect: true })\n        type: 'radio' | 'checkbox' = 'radio';\n\n    /**\n     * Get the radio field item input\n     */\n    @query('input')\n        field!: HTMLInputElement;\n\n    static styles = [styles];\n\n    /**\n     * Style variants\n     * - **bare** renders a select-tile without a border and without padding around the content\n     * - **horizontal** renders a select-tile with header, body, footer oriented in a row rather than a column\n     * - **horizontal-bare** renders a select-tile with header, body, footer\n     *   oriented in a row rather than a column without a border and without padding around the content\n     */\n    @property({ reflect: true })\n        variant?: 'bare' | 'horizontal' | 'horizontal-bare';\n\n    /**\n     * Which breakpoint, if any, to switch to verticial.\n     * Only useful for horizontal variants. Defaults to 'sm'.\n     */\n    @property({ reflect: true })\n        variantBreakToVertical: 'sm' | 'sm-2' | 'md' | 'lg' | 'xl' | 'xxl' | 'none' = 'sm';\n\n    /**\n     * Where does the checkmark or radio button go?\n     * It disappears on 'none'. Only top-right is supported for vertical variants.\n     */\n    @property({ reflect: true })\n        checkPosition: 'left' | 'right' | 'top-right' | 'none' = 'right';\n\n    /**\n     * In radio mode, whether to use the circle with the dot, or the rounded check.\n     */\n    @property({ reflect: true })\n        radioVariant: 'dot' | 'check' = 'dot';\n\n    /**\n     * Align variants\n     * <cre8-text-passage size=\"sm\">\n     * <ul>\n     * <li>**center** renders a select-tile that has center aligned content/text</li>\n     * </ul>\n     * </cre8-text-passage>\n     */\n    @property({ reflect: true })\n        align?: 'center';\n\n    /**\n     * Error State\n     */\n    @property({ type: Boolean, reflect: true })\n        isError?: boolean;\n\n    /**\n     * Disabled State\n     */\n    @property({ type: Boolean, reflect: true })\n        disabled?: boolean;\n\n    /**\n     * Required attribute\n     */\n    @property({ type: Boolean, reflect: true })\n        required?: boolean;\n\n    /**\n     * Checked State.\n     * Note: the `checked` attribute sets the `defaultChecked` property, as well\n     * as sets the initial value for the `checked` property.\n     */\n    @property({ type: Boolean, reflect: true })\n        checked?: boolean;\n\n    /**\n     * The default checked state when the element first renders or is reset.\n     *\n     * Note: the attribute is named `checked` and the property is\n     * named `defaultChecked`. This is the same as a regular radio button.\n     */\n    @property({ attribute: 'checked', type: Boolean, reflect: true })\n        defaultChecked: boolean;\n\n    /**\n     * Select Tile FieldId\n     */\n    @property()\n        fieldId?: string;\n\n    /**\n     * Radio item fieldnote aria describe by\n     */\n    @property()\n    private ariaDescribedBy?: string;\n\n    /**\n     * Radio item fieldnote isSuccess\n     */\n    @property({ type: Boolean, reflect: true })\n        isSuccess?: boolean;\n\n    /**\n     * The form associated with this field\n     *\n     * TOOD: maybe this goes on Cre8FormElement\n     */\n    get form() {\n        return this._internals.form;\n    }\n\n    /**\n     * Connected callback lifecycle\n     * 1) Auto-generate the fieldId if a user doesn't provided so that the form field is accessible\n     * 2) Initialize the correct controller\n     */\n    connectedCallback() {\n        super.connectedCallback();\n        this.fieldId = this.fieldId || nanoid(); /* 1 */\n        this._controller = this.type === 'radio'\n            ? new SelectTileRadioController(this)\n            : new SelectTileCheckboxController(this);\n        if (this.disabled) {\n            this._internals.ariaDisabled = 'true';\n        }\n    }\n\n    /**\n     * Reset form callback\n     * 1) Remove the checked state from all radio elements\n     * 2) Set the checked state to the initial checked state\n     * 3) Set the radio field input checked attribute to the initial checked state\n     */\n    formResetCallback(): void {\n        this.checked = this.defaultChecked;\n        this.field.checked = this.defaultChecked;\n    }\n\n\n    /**\n     * Whenever the \"checked\" property changes, update our form value, aria-checked,\n     * and the checked property of `this.field`.\n     *\n     */\n    updated(changedProps: PropertyValues) {\n        super.updated(changedProps);\n\n        if (changedProps.has('checked')) {\n            // this.field.checked = this.checked;\n            // this.field.checked ? this._internals.setFormValue(this.value || 'on') : this._internals.setFormValue(null);\n            this.setAttribute('aria-checked', this.checked ? 'true' : 'false');\n        }\n        if (changedProps.has('type')) {\n            this._controller.hostDisconnected();\n            this._controller = this.type === 'radio'\n                ? new SelectTileRadioController(this)\n                : new SelectTileCheckboxController(this);\n        }\n        if (changedProps.has('disabled')) {\n            if (this.disabled) {\n                this._internals.ariaDisabled = 'true';\n            } else {\n                this._internals.ariaDisabled = 'false';\n            }\n        }\n    }\n\n\n    renderInput() {\n        return html`\n        <input\n            class=\"cre8-c-select-tile__input\"\n            type=${this.type}\n            id=${this.fieldId}\n            aria-describedby=\"${ifDefined(this.ariaDescribedBy)}\"\n            ?required=${this.required}\n            name=${this.name}\n            .value=${this.value}\n            ?disabled=\"${this.disabled}\"\n            .checked=\"${this.checked}\"\n        />\n        `;\n    }\n\n    renderCheckboxIcon() {\n        if (this.type === 'checkbox') {\n            return html`\n            <cre8-icon svg=\"${svgCheck}\" class=\"cre8-c-select-tile__icon\" aria-hidden=\"${!this.checked}\"></cre8-icon>\n        `;\n        }\n        return null;\n    }\n\n    render() {\n        const componentClassNames = this.componentClassNames('cre8-c-select-tile', {\n            'cre8-c-select-tile--bare': this.variant === 'bare',\n            'cre8-c-select-tile--horizontal': this.variant === 'horizontal',\n            'cre8-c-select-tile--horizontal-bare': this.variant === 'horizontal-bare',\n            'cre8-c-select-tile--vertical-at-sm': this.variantBreakToVertical === 'sm',\n            'cre8-c-select-tile--vertical-at-sm-2': this.variantBreakToVertical === 'sm-2',\n            'cre8-c-select-tile--vertical-at-md': this.variantBreakToVertical === 'md',\n            'cre8-c-select-tile--vertical-at-lg': this.variantBreakToVertical === 'lg',\n            'cre8-c-select-tile--vertical-at-xl': this.variantBreakToVertical === 'xl',\n            'cre8-c-select-tile--vertical-at-xxl': this.variantBreakToVertical === 'xxl',\n            'cre8-c-select-tile--align-center': this.align === 'center',\n            'cre8-c-select-tile--error': this.isError,\n            'cre8-c-select-tile--success': this.isSuccess,\n            'cre8-c-select-tile--disabled': this.disabled,\n        });\n\n        const checkboxClassNames = this.componentClassNames(\n            this.type === 'radio' ? 'cre8-c-select-tile__custom-radio' : 'cre8-c-select-tile__custom-checkbox',\n            {\n                'cre8-c-select-tile__custom-radio-top-right': !this.variant\n                    || this.variant === 'bare' || this.checkPosition === 'top-right',\n                'cre8-c-select-tile__custom-radio-left': this.checkPosition === 'left',\n                'cre8-c-select-tile__custom-radio-none': this.checkPosition === 'none',\n                'cre8-c-select-tile__custom-radio-check': this.radioVariant === 'check',\n            }\n        );\n\n        const labelTabIndex = this.disabled ? undefined : '0';\n\n        return html`\n        ${this.renderInput()}\n        <label class=\"${componentClassNames}\" part=\"select-tile\" for=${this.fieldId} tabindex=${labelTabIndex}>\n            ${this.slotNotEmpty('header') && html`\n                <div class=\"cre8-c-select-tile__header\" part=\"header\">\n                    <slot name=\"header\"></slot>\n                </div>\n            `}\n            <div part=\"body\" class=\"cre8-c-select-tile__body\">\n                <slot></slot>\n                ${this.slotNotEmpty('title') && html`\n                    <div part=\"body-title\" class=\"cre8-c-select-tile__body_title\">\n                        <slot name=\"title\"></slot>\n                    </div>\n                `}\n                ${this.slotNotEmpty('body') && html`\n                    <div part=\"body-body\" class=\"cre8-c-select-tile__body_body\">\n                        <slot name=\"body\"></slot>\n                    </div>\n                `}\n            </div>\n            <div part=\"footer\" class=\"cre8-c-select-tile__footer\">\n                <slot name=\"footer\"></slot>\n            </div>\n            <div class=\"${checkboxClassNames}\">\n                ${this.renderCheckboxIcon()}\n                <div class=\"cre8-c-select-tile__inner-circle\">\n                    <cre8-icon svg=\"${svgCheck}\" class=\"cre8-c-select-tile__icon\"></cre8-icon>\n                </div>\n            </div>\n        </label>`;\n    }\n}\n\nif (customElements.get('cre8-select-tile') === undefined) {\n    customElements.define('cre8-select-tile', Cre8SelectTile);\n}\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'cre8-select-tile': Cre8SelectTile;\n    }\n}\n\nexport default Cre8SelectTile;\n"]}

package/lib/components/select-tile/select-tile.styles.js

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-select-tile{position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;height:100%;width:100%;padding:1rem;gap:1rem;border-color:var(--cre8-color-border-default);border-width:var(--cre8-border-width-default);border-radius:var(--cre8-border-radius-default);border-style:solid;background:var(--cre8-color-bg-default)}.cre8-c-select-tile:hover,.cre8-c-select-tile:focus,.cre8-c-select-tile:focus-visible,.cre8-c-select-tile:active{background:var(--cre8-color-bg-default-hover);border-color:var(--cre8-color-border-brand)}.cre8-c-select-tile:focus,.cre8-c-select-tile:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile.cre8-c-select-tile--error{border-color:var(--cre8-color-border-error);background:var(--cre8-color-bg-error)}.cre8-c-select-tile.cre8-c-select-tile--success{border-color:var(--cre8-color-border-success);background:var(--cre8-color-bg-success)}.cre8-c-select-tile.cre8-c-select-tile--disabled{border-color:var(--cre8-color-border-disabled);background:var(--cre8-color-bg-disabled);cursor:not-allowed}input:checked+.cre8-c-select-tile{border-width:2px;border-color:var(--cre8-color-border-brand)}.cre8-c-select-tile__input{display:none}.cre8-c-select-tile--horizontal{flex-direction:row;align-items:center;justify-content:center}@media all and (max-width: 560px){.cre8-c-select-tile--vertical-at-sm{flex-direction:column}.cre8-c-select-tile--vertical-at-sm .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 560px){.cre8-c-select-tile--vertical-at-sm-2{flex-direction:column}.cre8-c-select-tile--vertical-at-sm-2 .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 768px){.cre8-c-select-tile--vertical-at-md{flex-direction:column}.cre8-c-select-tile--vertical-at-md .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 960px){.cre8-c-select-tile--vertical-at-lg{flex-direction:column}.cre8-c-select-tile--vertical-at-lg .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 1200px){.cre8-c-select-tile--vertical-at-xl{flex-direction:column}.cre8-c-select-tile--vertical-at-xl .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 1400px){.cre8-c-select-tile--vertical-at-xxl{flex-direction:column}.cre8-c-select-tile--vertical-at-xxl .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}.cre8-c-select-tile--bare{border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);box-shadow:none}.cre8-c-select-tile--horizontal-bare{flex-direction:row;border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);box-shadow:none;align-items:center;justify-content:center}.cre8-c-select-tile--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.cre8-c-select-tile__header{display:block;flex:none}.cre8-c-select-tile__body{display:block;flex:1 1 auto}.cre8-c-select-tile--bare .cre8-c-select-tile__body{padding:var(--cre8-spacing-0)}.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__body{padding:var(--cre8-spacing-0)}.cre8-c-select-tile__body .cre8-c-select-tile__body_title{font-family:var(--cre8-typography-title-default-mobile-font-family);font-size:var(--cre8-typography-title-default-mobile-font-size);font-weight:var(--cre8-typography-title-default-mobile-font-weight);line-height:var(--cre8-typography-title-default-mobile-line-height);text-decoration:var(--cre8-typography-title-default-mobile-text-decoration);text-transform:var(--cre8-typography-title-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-select-tile__body .cre8-c-select-tile__body_title{font-family:var(--cre8-typography-title-default-font-family);font-size:var(--cre8-typography-title-default-font-size);font-weight:var(--cre8-typography-title-default-font-weight);line-height:var(--cre8-typography-title-default-line-height);text-decoration:var(--cre8-typography-title-default-text-decoration);text-transform:var(--cre8-typography-title-default-text-transform)}}.cre8-c-select-tile__body .cre8-c-select-tile__body_body{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform)}.cre8-c-select-tile__footer{display:flex;flex:none}.cre8-c-select-tile--bare .cre8-c-select-tile__footer{padding:var(--cre8-spacing-0)}.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__footer{padding:var(--cre8-spacing-0)}.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-left,.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-left{order:-1}.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-none,.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-none{display:none}.cre8-c-select-tile__custom-radio{display:flex;flex:none;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-round);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-default)}.cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-radio{border-color:var(--cre8-color-border-strong);outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem;border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--error .cre8-c-select-tile__custom-radio{border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-radio{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}.cre8-c-select-tile__custom-radio-top-right{position:absolute;top:0.5rem;right:0.5rem}.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__icon{display:flex}.cre8-c-select-tile__inner-circle{display:none;cursor:pointer;height:0.75rem;width:0.75rem;background:var(--cre8-color-content-brand);border-radius:var(--cre8-border-radius-round)}.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__inner-circle{flex:none;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}.cre8-c-select-tile--error .cre8-c-select-tile__inner-circle{background:var(--cre8-color-bg-error-strong)}.cre8-c-select-tile--disabled .cre8-c-select-tile__inner-circle{background:var(--cre8-color-content-disabled)}input:checked~* .cre8-c-select-tile__custom-radio .cre8-c-select-tile__inner-circle{display:flex}.cre8-c-select-tile__custom-checkbox{display:flex;flex:none;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-small);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-strong)}.cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-checkbox{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-brand-strong)}.cre8-c-select-tile--error input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-default)}.cre8-c-select-tile--disabled input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-disabled)}.cre8-c-select-tile__icon{display:none;color:var(--cre8-color-content-knockout)}.cre8-c-select-tile--error .cre8-c-select-tile__icon{color:var(--cre8-color-content-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__icon{color:var(--cre8-color-content-disabled)}input:checked~* .cre8-c-select-tile__custom-checkbox .cre8-c-select-tile__icon{display:flex}`;
+export default styles;
+//# sourceMappingURL=select-tile.styles.js.map

package/lib/components/select-tile/select-tile.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile.styles.js","sourceRoot":"","sources":["../../../components/select-tile/select-tile.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA,+iVAA+iV,CAAC;AAClkV,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-select-tile{position:relative;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;height:100%;width:100%;padding:1rem;gap:1rem;border-color:var(--cre8-color-border-default);border-width:var(--cre8-border-width-default);border-radius:var(--cre8-border-radius-default);border-style:solid;background:var(--cre8-color-bg-default)}.cre8-c-select-tile:hover,.cre8-c-select-tile:focus,.cre8-c-select-tile:focus-visible,.cre8-c-select-tile:active{background:var(--cre8-color-bg-default-hover);border-color:var(--cre8-color-border-brand)}.cre8-c-select-tile:focus,.cre8-c-select-tile:focus-visible{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile.cre8-c-select-tile--error{border-color:var(--cre8-color-border-error);background:var(--cre8-color-bg-error)}.cre8-c-select-tile.cre8-c-select-tile--success{border-color:var(--cre8-color-border-success);background:var(--cre8-color-bg-success)}.cre8-c-select-tile.cre8-c-select-tile--disabled{border-color:var(--cre8-color-border-disabled);background:var(--cre8-color-bg-disabled);cursor:not-allowed}input:checked+.cre8-c-select-tile{border-width:2px;border-color:var(--cre8-color-border-brand)}.cre8-c-select-tile__input{display:none}.cre8-c-select-tile--horizontal{flex-direction:row;align-items:center;justify-content:center}@media all and (max-width: 560px){.cre8-c-select-tile--vertical-at-sm{flex-direction:column}.cre8-c-select-tile--vertical-at-sm .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 560px){.cre8-c-select-tile--vertical-at-sm-2{flex-direction:column}.cre8-c-select-tile--vertical-at-sm-2 .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 768px){.cre8-c-select-tile--vertical-at-md{flex-direction:column}.cre8-c-select-tile--vertical-at-md .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 960px){.cre8-c-select-tile--vertical-at-lg{flex-direction:column}.cre8-c-select-tile--vertical-at-lg .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 1200px){.cre8-c-select-tile--vertical-at-xl{flex-direction:column}.cre8-c-select-tile--vertical-at-xl .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}@media all and (max-width: 1400px){.cre8-c-select-tile--vertical-at-xxl{flex-direction:column}.cre8-c-select-tile--vertical-at-xxl .cre8-c-select-tile__custom-radio{position:absolute;top:0.5rem;right:0.5rem}}.cre8-c-select-tile--bare{border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);box-shadow:none}.cre8-c-select-tile--horizontal-bare{flex-direction:row;border:var(--cre8-border-width-none);padding:var(--cre8-spacing-0);box-shadow:none;align-items:center;justify-content:center}.cre8-c-select-tile--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.cre8-c-select-tile__header{display:block;flex:none}.cre8-c-select-tile__body{display:block;flex:1 1 auto}.cre8-c-select-tile--bare .cre8-c-select-tile__body{padding:var(--cre8-spacing-0)}.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__body{padding:var(--cre8-spacing-0)}.cre8-c-select-tile__body .cre8-c-select-tile__body_title{font-family:var(--cre8-typography-title-default-mobile-font-family);font-size:var(--cre8-typography-title-default-mobile-font-size);font-weight:var(--cre8-typography-title-default-mobile-font-weight);line-height:var(--cre8-typography-title-default-mobile-line-height);text-decoration:var(--cre8-typography-title-default-mobile-text-decoration);text-transform:var(--cre8-typography-title-default-mobile-text-transform)}@media all and (min-width: 768px){.cre8-c-select-tile__body .cre8-c-select-tile__body_title{font-family:var(--cre8-typography-title-default-font-family);font-size:var(--cre8-typography-title-default-font-size);font-weight:var(--cre8-typography-title-default-font-weight);line-height:var(--cre8-typography-title-default-line-height);text-decoration:var(--cre8-typography-title-default-text-decoration);text-transform:var(--cre8-typography-title-default-text-transform)}}.cre8-c-select-tile__body .cre8-c-select-tile__body_body{font-family:var(--cre8-typography-body-default-font-family);font-size:var(--cre8-typography-body-default-font-size);font-weight:var(--cre8-typography-body-default-font-weight);line-height:var(--cre8-typography-body-default-line-height);text-decoration:var(--cre8-typography-body-default-text-decoration);text-transform:var(--cre8-typography-body-default-text-transform)}.cre8-c-select-tile__footer{display:flex;flex:none}.cre8-c-select-tile--bare .cre8-c-select-tile__footer{padding:var(--cre8-spacing-0)}.cre8-c-select-tile--horizontal-bare .cre8-c-select-tile__footer{padding:var(--cre8-spacing-0)}.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-left,.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-left{order:-1}.cre8-c-select-tile__custom-radio.cre8-c-select-tile__custom-radio-none,.cre8-c-select-tile__custom-checkbox.cre8-c-select-tile__custom-radio-none{display:none}.cre8-c-select-tile__custom-radio{display:flex;flex:none;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-round);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-default)}.cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-radio{border-color:var(--cre8-color-border-strong);outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-radio{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem;border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--error .cre8-c-select-tile__custom-radio{border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-radio{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}.cre8-c-select-tile__custom-radio-top-right{position:absolute;top:0.5rem;right:0.5rem}.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__icon{display:flex}.cre8-c-select-tile__inner-circle{display:none;cursor:pointer;height:0.75rem;width:0.75rem;background:var(--cre8-color-content-brand);border-radius:var(--cre8-border-radius-round)}.cre8-c-select-tile__custom-radio-check .cre8-c-select-tile__inner-circle{flex:none;height:1.5rem;width:1.5rem;align-items:center;justify-content:center}.cre8-c-select-tile--error .cre8-c-select-tile__inner-circle{background:var(--cre8-color-bg-error-strong)}.cre8-c-select-tile--disabled .cre8-c-select-tile__inner-circle{background:var(--cre8-color-content-disabled)}input:checked~* .cre8-c-select-tile__custom-radio .cre8-c-select-tile__inner-circle{display:flex}.cre8-c-select-tile__custom-checkbox{display:flex;flex:none;height:1.5rem;width:1.5rem;cursor:pointer;align-items:center;justify-content:center;border-radius:var(--cre8-border-radius-small);border-width:var(--cre8-border-width-default);border-style:var(--cre8-border-style-default);background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-strong)}.cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__input:focus-visible+.cre8-c-select-tile__custom-checkbox{outline:var(--cre8-border-width-focus) solid var(--cre8-color-border-error);outline-offset:0.125rem}.cre8-c-select-tile--error .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-default);border-color:var(--cre8-color-border-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__custom-checkbox{cursor:not-allowed;background-color:var(--cre8-color-bg-disabled);border-color:var(--cre8-color-border-disabled)}input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-brand-strong)}.cre8-c-select-tile--error input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-default)}.cre8-c-select-tile--disabled input:checked~* .cre8-c-select-tile__custom-checkbox{background-color:var(--cre8-color-bg-disabled)}.cre8-c-select-tile__icon{display:none;color:var(--cre8-color-content-knockout)}.cre8-c-select-tile--error .cre8-c-select-tile__icon{color:var(--cre8-color-content-error)}.cre8-c-select-tile--disabled .cre8-c-select-tile__icon{color:var(--cre8-color-content-disabled)}input:checked~* .cre8-c-select-tile__custom-checkbox .cre8-c-select-tile__icon{display:flex}`;\nexport default styles;\n"]}