@tmorrow/cre8-wc 1.0.25 → 1.1.1

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

@@ -1,435 +1,11 @@
-import { s as b } from "../../icon-DImqxDiW.js";
-import { css as m, LitElement as v, html as n } from "lit";
-import { property as i, query as k } from "lit/decorators.js";
+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 _ } from "nanoid";
-import { Cre8FormElement as g } from "../cre8-form-element.js";
-const x = m`@import '../../design-tokens/core/scss/theming/component';
-
-// #SELECT-TILE
-
-:host {
-  display: inline-flex;
-}
-
-.cre8-c-select-tile {
-  position: relative;
-  overflow: hidden;
-  cursor: pointer;
-  display: flex;
-  flex-direction: column;
-  height: 100%;
-  width: 100%;
-  padding: calc(8px * 2);
-  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);
-  &:hover,
-  &:focus,
-  &:focus-visible,
-  &:active {
-    background: var(--cre8-color-bg-default-hover);
-    border-color: var(--cre8-color-border-brand);
-  }
-  &:focus,
-  &:focus-visible {
-    @includefocus();
-  }
-
-  &.cre8-c-select-tile--error {
-    border-color: var(--cre8-color-border-error);
-    background: var(--cre8-color-bg-error);
-  }
-
-  &.cre8-c-select-tile--success {
-    border-color: var(--cre8-color-border-success);
-    background: var(--cre8-color-bg-success);
-  }
-
-  &.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;
-}
-
-/**
- * Horizontal select-tile
- * 1) Organized block with flex-direction set to row so that header => footer appears
- * from left to right rather than top to bottom
- */
- .cre8-c-select-tile--horizontal {
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-}
-
-@mixin cre8-c-select-tile--vertical-at-bp($breakpoint) {
-  @media all and (max-width: $breakpoint) {
-    flex-direction: column;
-
-    .cre8-c-select-tile__custom-radio {
-      position: absolute;
-      top: calc(8px * 1);
-      right: calc(8px * 1);
-    }
-  }
-}
-
-.cre8-c-select-tile--vertical-at-sm {
-  @include cre8-c-select-tile--vertical-at-bp(component.$cre8-breakpoint-sm);
-}
-.cre8-c-select-tile--vertical-at-sm-2 {
-  @include cre8-c-select-tile--vertical-at-bp(component.$cre8-breakpoint-sm);
-}
-.cre8-c-select-tile--vertical-at-md {
-  @include cre8-c-select-tile--vertical-at-bp(component.$cre8-breakpoint-md);
-}
-.cre8-c-select-tile--vertical-at-lg {
-  @include cre8-c-select-tile--vertical-at-bp(component.$cre8-breakpoint-lg);
-}
-.cre8-c-select-tile--vertical-at-xl {
-  @include cre8-c-select-tile--vertical-at-bp(component.$cre8-breakpoint-xl);
-}
-.cre8-c-select-tile--vertical-at-xxl {
-  @include cre8-c-select-tile--vertical-at-bp(component.$cre8-breakpoint-xxl);
-}
-
-
-/**
- * Bare select-tile
- * 1) Organized block without a border, background, or padding
- */
-.cre8-c-select-tile--bare {
-  border: var(--cre8-border-width-none);
-  padding: var(--cre8-spacing-0);
-  box-shadow: none;
-}
-/**
- * Horizontal-bare select-tile
- * 1) Organized block with flex-direction set to row so that header => footer appears
- * from left to right rather than top to bottom without a border, background, or padding
- */
-.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;
- }
-/**
- * Center aligned select-tile
- * 1) Center content and text within the select-tile
- */
-.cre8-c-select-tile--align-center {
-  text-align: center; /* 1 */
-  align-items: center; /* 1 */
-  justify-content: center; /* 1 */
-}
-
-/**
- * Slotted image within a select-tile
- * 1) Make the image full width
- */
-::slotted(img) {
-  width: 100%;
-}
-
-/**
- * Select tile header
- * 1) Remove flex so that body always takes up remaining space
- */
-.cre8-c-select-tile__header {
-  display: block;
-  flex: none; /* 1 */
-}
-
-/**
- * Select Tile body
- * 1) Flex applied to always fill the remaining space of the select-tile
- */
-.cre8-c-select-tile__body {
-  display: block;
-  flex: 1 1 auto; /* 1 */
-
-  /**
-  * Select Tile body within bare select-tile
-  * 1) Remove padding
-  */
-  .cre8-c-select-tile--bare & {
-    padding: var(--cre8-spacing-0);
-  }
-  .cre8-c-select-tile--horizontal-bare & {
-    padding: var(--cre8-spacing-0);
-  }
-
-  .cre8-c-select-tile__body_title {
-    @include cre8-typography-title-default();
-  }
-  .cre8-c-select-tile__body_body {
-    @include cre8-typography-body-default();
-  }
-}
-
-/**
- * Select Tile footer
- * 1) Remove flex so that body always takes up remaining space
- */
-.cre8-c-select-tile__footer {
-  display: flex;
-  flex: none; /* 1 */
-
-  .cre8-c-select-tile--bare & {
-    padding: var(--cre8-spacing-0);
-  }
-  .cre8-c-select-tile--horizontal-bare & {
-    padding: var(--cre8-spacing-0);
-  }
-}
-
-.cre8-c-select-tile__custom-radio, .cre8-c-select-tile__custom-checkbox  {
-
-  /**
-   * Render the checkmark/radio button on the left instead of the right.
-   * Since it is only visual and the "checked" state is also set via aria,
-   * there are hopefully no a11y issues with using order here.
-   */
-  &.cre8-c-select-tile__custom-radio-left {
-    order: -1;
-  }
-
-  &.cre8-c-select-tile__custom-radio-none {
-    display: none;
-  }
-}
-
-@mixin cre8-c-select-radio-top-right($breakpoint: 0) {
-  position: absolute;
-  top: calc(8px * 1);
-  right: calc(8px * 1);
-  @if $breakpoint != 0 {
-    @media all and (min-width: $breakpoint) {
-      position: static;
-    }
-  }
-}
-
-/**
-* Radio field item custom radio container
-*/
-.cre8-c-select-tile__custom-radio {
-  display: flex;
-  flex: none;
-  height: calc(8px * 3);
-  width: calc(8px * 3);
-  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);
-
-  /**
-  * Radio field item custom radio focus visible  custom outline
-  */
-  .cre8-c-select-tile__input:focus-visible + & {
-    border-color: var(--cre8-color-border-strong);
-    @include focus;
-
-    .cre8-c-select-tile--error & {
-      @include focusError;
-      border-color: var(--cre8-color-border-error);
-    }
-  }
-
-  /**
-  * Radio field item custom radio within radio field with error
-  */
-  .cre8-c-select-tile--error & {
-    border-color: var(--cre8-color-border-error);
-  }
-
-  /**
-  * Radio field item custom radio within radio field disabled
-  */
-  .cre8-c-select-tile--disabled & {
-    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 {
-  @include technology.cre8-c-select-radio-top-right();
-}
-
-/**
- * Check radio variant
- */
-.cre8-c-select-tile__custom-radio-check {
-    .cre8-c-select-tile__icon {
-      display: flex;
-    }
-}
-
-/**
- * Radio field item inner circle
- */
-.cre8-c-select-tile__inner-circle {
-  display: none;
-
-  cursor: pointer;
-  height: calc(8px * 1.5);
-  width: calc(8px * 1.5);
-  background: var(--cre8-color-content-brand);
-  border-radius: var(--cre8-border-radius-round);
-
-  /** Check radio variant */
-  .cre8-c-select-tile__custom-radio-check & {
-    flex: none;
-    height: calc(8px * 3);
-    width: calc(8px * 3);
-    align-items: center;
-    justify-content: center;
-  }
-
-  /**
-  * Radio field item inner circle error
-  */
-  .cre8-c-select-tile--error & {
-    background: var(--cre8-color-bg-error-strong);
-  }
-
-  /**
-  * Radio field item inner circle disabled
-  */
-  .cre8-c-select-tile--disabled & {
-    background: var(--cre8-color-content-disabled);
-  }
-
-  /**
- * Radio field item inner circle will display if the input is checked
- */
-  input:checked ~ * .cre8-c-select-tile__custom-radio & {
-    display: flex;
-  }
-}
-
-
-// These styles are for the checkbox version
-
-/**
- * Checkbox field item custom checkbox container
- */
- .cre8-c-select-tile__custom-checkbox {
-  display: flex;
-  flex: none;
-  height: calc(8px * 3);
-  width: calc(8px * 3);
-  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);
-
-  /**
-  * Checkbox field item custom checkbox focus visible  custom outline
-  */
-  .cre8-c-select-tile__input:focus-visible + & {
-    @include focus;
-
-    .cre8-c-select-tile--error & {
-      @include focusError;
-    }
-  }
-
-  /**
-  * Checkbox field item custom checkbox within checkbox field with error
-  */
-  .cre8-c-select-tile--error & {
-    background-color: var(--cre8-color-bg-default);
-    border-color: var(--cre8-color-border-error);
-  }
-
-  /**
-  * Checkbox field item custom checkbox within checkbox field with disabled
-  */
-  .cre8-c-select-tile--disabled & {
-    cursor: not-allowed;
-    background-color: var(--cre8-color-bg-disabled);
-    border-color: var(--cre8-color-border-disabled);
-  }
-}
-
-/**
-  * Checkbox field item custom checkbox when item is checked
-  */
-input:checked ~ * .cre8-c-select-tile__custom-checkbox {
-  background-color: var(--cre8-color-bg-brand-strong);
-
-  /**
-  * Checkbox field item custom checkbox when item is checked with error
-  */
-  .cre8-c-select-tile--error & {
-    background-color: var(--cre8-color-bg-default);
-  }
-
-  /**
-  * Checkbox field item custom checkbox when item is checked with disabled
-  */
-  .cre8-c-select-tile--disabled & {
-    background-color: var(--cre8-color-bg-disabled);
-  }
-}
-
-/**
- * Checkbox field item checkmark icon
- */
-.cre8-c-select-tile__icon {
-  display: none;
-  color: var(--cre8-color-content-knockout);
-
-  /**
-  * Checkbox field item icon within checkbox field with error
-  */
-  .cre8-c-select-tile--error & {
-    color: var(--cre8-color-content-error);
-  }
-
-  /**
-  * Checkbox field item icon within checkbox field disabled
-  */
-  .cre8-c-select-tile--disabled & {
-    color: var(--cre8-color-content-disabled);
-  }
-
-  /**
-  * Checkbox field item icon will display in the box if the input is checked
-  */
-  input:checked ~ * .cre8-c-select-tile__custom-checkbox & {
-    display: flex;
-  }
-}
-`;
-function u(d, t) {
+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 {
@@ -447,16 +23,16 @@ class p {
         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();
+      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);
+    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);
+    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() {
   }
@@ -491,7 +67,7 @@ class p {
     });
   }
 }
-class f {
+class m {
   constructor(t) {
     this._clickHandler = (e) => {
       this._checkAndFocus(), e.preventDefault();
@@ -504,10 +80,10 @@ class f {
     }, 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);
+    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);
+    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) => {
@@ -515,7 +91,7 @@ var w = Object.defineProperty, c = (d, t, e, o) => {
     (a = d[s]) && (l = a(t, e, l) || l);
   return l && w(t, e, l), l;
 };
-const h = class h extends g {
+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";
   }
@@ -525,7 +101,7 @@ const h = class h extends g {
    * TOOD: maybe this goes on Cre8FormElement
    */
   get form() {
-    return this.internals.form;
+    return this._internals.form;
   }
   /**
    * Connected callback lifecycle
@@ -533,7 +109,7 @@ const h = class h extends g {
    * 2) Initialize the correct controller
    */
   connectedCallback() {
-    super.connectedCallback(), this.fieldId = this.fieldId || _(), this._controller = this.type === "radio" ? new p(this) : new f(this), this.disabled && (this.internals.ariaDisabled = "true");
+    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
@@ -550,7 +126,7 @@ const h = class h extends g {
    *
    */
   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 f(this)), t.has("disabled") && (this.disabled ? this.internals.ariaDisabled = "true" : this.internals.ariaDisabled = "false");
+    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`
@@ -569,7 +145,7 @@ const h = class h extends g {
   }
   renderCheckboxIcon() {
     return this.type === "checkbox" ? n`
-            <cre8-icon svg="${b}" class="cre8-c-select-tile__icon" aria-hidden="${!this.checked}"></cre8-icon>
+            <cre8-icon svg="${u}" class="cre8-c-select-tile__icon" aria-hidden="${!this.checked}"></cre8-icon>
         ` : null;
   }
   render() {
@@ -623,19 +199,19 @@ const h = class h extends g {
             <div class="${e}">
                 ${this.renderCheckboxIcon()}
                 <div class="cre8-c-select-tile__inner-circle">
-                    <cre8-icon svg="${b}" class="cre8-c-select-tile__icon"></cre8-icon>
+                    <cre8-icon svg="${u}" class="cre8-c-select-tile__icon"></cre8-icon>
                 </div>
             </div>
         </label>`;
   }
 };
-h.shadowRootOptions = { ...v.shadowRootOptions, delegatesFocus: !0 }, h.styles = [x];
+h.shadowRootOptions = { ..._.shadowRootOptions, delegatesFocus: !0 }, h.styles = [k];
 let r = h;
 c([
   i({ reflect: !0 })
 ], r.prototype, "type");
 c([
-  k("input")
+  v("input")
 ], r.prototype, "field");
 c([
   i({ reflect: !0 })
@@ -670,9 +246,6 @@ c([
 c([
   i()
 ], r.prototype, "fieldId");
-c([
-  i({ reflect: !0 })
-], r.prototype, "name");
 c([
   i()
 ], r.prototype, "ariaDescribedBy");

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

@@ -1 +1 @@
-{"version":3,"file":"select-tile.styles.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAwaX,CAAC;AACF,eAAe,MAAM,CAAC"}
+{"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"}