@tmorrow/cre8-wc 1.2.4 → 1.2.6

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

@@ -1,143 +1,142 @@
-import { css as f, LitElement as v, html as n } from "lit";
-import { property as i, query as _ } from "lit/decorators.js";
-import { ifDefined as y } from "lit-html/directives/if-defined.js";
-import { nanoid as g } from "nanoid";
-import { C as x } from "../../cre8-form-element-BymRdQUC.js";
-import "../icon/icon.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 u(d, t) {
-  return t < 0 ? d.length - 1 : t >= d.length ? 0 : t;
-}
-class b {
-  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[u(o, l - 1)] : (e.code === "ArrowRight" || e.code === "ArrowDown") && (s = o[u(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 p {
-  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 m = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-<path d="M15.8125 3.33285L5.57291 13.5724C5.51347 13.6319 5.44289 13.6791 5.3652 13.7113C5.28751 13.7435 5.20423 13.7601 5.12013 13.7601C5.03603 13.7601 4.95275 13.7435 4.87506 13.7113C4.79737 13.6791 4.72678 13.6319 4.66735 13.5724L0.187547 9.0926C0.0674628 8.97251 0 8.80964 0 8.63982C0 8.46999 0.0674628 8.30712 0.187547 8.18704C0.307632 8.06695 0.470502 7.99949 0.640327 7.99949C0.810153 7.99949 0.973022 8.06695 1.09311 8.18704L5.12013 12.2149L14.9069 2.42729C15.027 2.30721 15.1898 2.23975 15.3597 2.23975C15.5295 2.23975 15.6924 2.30721 15.8125 2.42729C15.9325 2.54738 16 2.71025 16 2.88007C16 3.0499 15.9325 3.21277 15.8125 3.33285Z"/>
-</svg>
-`, 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 b(this) : new p(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 b(this) : new p(this)), t.has("disabled") && (this.disabled ? this._internals.ariaDisabled = "true" : this._internals.ariaDisabled = "false");
-  }
-  renderInput() {
-    return n`
+import svgCheck from '@tmorrow/cre8-wc/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}
@@ -145,53 +144,56 @@ const m = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" x
             .checked="${this.checked}"
         />
         `;
-  }
-  renderCheckboxIcon() {
-    return this.type === "checkbox" ? n`
-            <cre8-icon svg="${m}" 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 `
         <div class="cre8-c-select-tile__container" part="container">
         ${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>
@@ -200,65 +202,65 @@ const m = `<svg fill="currentColor" width="16" height="16" viewBox="0 0 16 16" 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="${m}" class="cre8-c-select-tile__icon"></cre8-icon>
+                    <cre8-icon svg="${svgCheck}" class="cre8-c-select-tile__icon"></cre8-icon>
                 </div>
             </div>
         </label>
         </div>`;
-  }
-};
-h.shadowRootOptions = { ...v.shadowRootOptions, delegatesFocus: !0 }, h.styles = [k];
-let r = h;
-c([
-  i({ reflect: !0 })
-], r.prototype, "type");
-c([
-  _("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":"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","sourcesContent":["import svgCheck from '@tmorrow/cre8-wc/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        <div class=\"cre8-c-select-tile__container\" part=\"container\">\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        </div>`;\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.d.ts

@@ -0,0 +1,3 @@
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=select-tile.styles.d.ts.map

package/lib/components/select-tile/select-tile.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile.styles.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAAqjV,CAAC;AAClkV,eAAe,MAAM,CAAC"}

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