@tmorrow/cre8-wc 2.0.5 → 2.0.7

package/dist/assets/select-tile-D-C8oSrm.js

@@ -0,0 +1,1112 @@
+import{a as b,j as f,b as d}from"./iframe-dHvya7sk.js";import{n as o}from"./cre8-element-DfmMtHJO.js";import{e as v}from"./query-BpjciUlk.js";import{o as x}from"./if-defined-HKKhGupN.js";import{n as y}from"./index.browser-BY9c7rfI.js";import{C as _}from"./cre8-form-element-bQpK8UYN.js";import"./icon-DeTLDzTS.js";const k=b`.cre8-u-content-knockout-brand {
+  color: var(----cre8-color-content-knockout-brand);
+}
+
+.cre8-u-is-hidden {
+  display: none !important;
+  visibility: hidden !important;
+}
+
+.cre8-u-is-vishidden {
+  position: absolute !important;
+  overflow: hidden;
+  width: 1px;
+  height: 1px;
+  padding: 0;
+  border: 0;
+  clip: rect(1px, 1px, 1px, 1px);
+}
+
+@media all and (min-width: 23.4375rem) {
+  .cre8-u-hide-sm {
+    display: none !important;
+  }
+}
+@media all and (min-width: 35rem) {
+  .cre8-u-hide-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (min-width: 48rem) {
+  .cre8-u-hide-md {
+    display: none !important;
+  }
+}
+@media all and (min-width: 60rem) {
+  .cre8-u-hide-lg {
+    display: none !important;
+  }
+}
+@media all and (min-width: 75rem) {
+  .cre8-u-hide-xl {
+    display: none !important;
+  }
+}
+@media all and (max-width: 23.4375rem) {
+  .cre8-u-show-sm {
+    display: none !important;
+  }
+}
+@media all and (max-width: 35rem) {
+  .cre8-u-show-sm-2 {
+    display: none !important;
+  }
+}
+@media all and (max-width: 48rem) {
+  .cre8-u-show-md {
+    display: none !important;
+  }
+}
+@media all and (max-width: 60rem) {
+  .cre8-u-show-lg {
+    display: none !important;
+  }
+}
+@media all and (max-width: 75rem) {
+  .cre8-u-show-xl {
+    display: none !important;
+  }
+}
+.cre8-u-margin-none {
+  margin: 0 !important;
+}
+
+.cre8-u-margin-sm {
+  margin: size(1) !important;
+}
+
+.cre8-u-margin-md {
+  margin: size(2) !important;
+}
+
+.cre8-u-margin-lg {
+  margin: size(3) !important;
+}
+
+.cre8-u-margin-xl {
+  margin: size(4) !important;
+}
+
+.cre8-u-margin-xxl {
+  margin: size(8) !important;
+}
+
+.cre8-u-margin-top-none {
+  margin-top: 0 !important;
+}
+
+.cre8-u-margin-top-sm {
+  margin-top: size(1) !important;
+}
+
+.cre8-u-margin-top-md {
+  margin-top: size(2) !important;
+}
+
+.cre8-u-margin-top-lg {
+  margin-top: size(3) !important;
+}
+
+.cre8-u-margin-top-xl {
+  margin-top: size(4) !important;
+}
+
+.cre8-u-margin-top-xxl {
+  margin-top: size(8) !important;
+}
+
+.cre8-u-margin-right-none {
+  margin-right: 0 !important;
+}
+
+.cre8-u-margin-right-sm {
+  margin-right: size(1) !important;
+}
+
+.cre8-u-margin-right-md {
+  margin-right: size(2) !important;
+}
+
+.cre8-u-margin-right-lg {
+  margin-right: size(3) !important;
+}
+
+.cre8-u-margin-right-xl {
+  margin-right: size(4) !important;
+}
+
+.cre8-u-margin-right-xxl {
+  margin-right: size(8) !important;
+}
+
+.cre8-u-margin-bottom-none {
+  margin-bottom: 0 !important;
+}
+
+.cre8-u-margin-bottom-sm {
+  margin-bottom: size(1) !important;
+}
+
+.cre8-u-margin-bottom-md {
+  margin-bottom: size(2) !important;
+}
+
+.cre8-u-margin-bottom-lg {
+  margin-bottom: size(3) !important;
+}
+
+.cre8-u-margin-bottom-xl {
+  margin-bottom: size(4) !important;
+}
+
+.cre8-u-margin-bottom-xxl {
+  margin-bottom: size(8) !important;
+}
+
+.cre8-u-margin-bottom-xl-xxl {
+  margin-bottom: size(4) !important;
+}
+
+@media all and (min-width: 768px) {
+  .cre8-u-margin-bottom-xl-xxl {
+    margin-bottom: size(8) !important;
+  }
+}
+.cre8-u-margin-left-none {
+  margin-left: 0 !important;
+}
+
+.cre8-u-margin-left-sm {
+  margin-left: size(1) !important;
+}
+
+.cre8-u-margin-left-md {
+  margin-left: size(2) !important;
+}
+
+.cre8-u-margin-left-lg {
+  margin-left: size(3) !important;
+}
+
+.cre8-u-margin-left-xl {
+  margin-left: size(4) !important;
+}
+
+.cre8-u-margin-left-xxl {
+  margin-left: size(8) !important;
+}
+
+.cre8-u-padding-none {
+  padding: 0 !important;
+}
+
+.cre8-u-padding-sm {
+  padding: size(1) !important;
+}
+
+.cre8-u-padding-md {
+  padding: size(2) !important;
+}
+
+.cre8-u-padding-lg {
+  padding: size(3) !important;
+}
+
+.cre8-u-padding-xl {
+  padding: size(4) !important;
+}
+
+.cre8-u-padding-xxl {
+  padding: size(8) !important;
+}
+
+.cre8-u-padding-top-none {
+  padding-top: 0 !important;
+}
+
+.cre8-u-padding-top-sm {
+  padding-top: size(1) !important;
+}
+
+.cre8-u-padding-top-md {
+  padding-top: size(2) !important;
+}
+
+.cre8-u-padding-top-lg {
+  padding-top: size(3) !important;
+}
+
+.cre8-u-padding-top-xl {
+  padding-top: size(4) !important;
+}
+
+.cre8-u-padding-top-xxl {
+  padding-top: size(8) !important;
+}
+
+.cre8-u-padding-right-none {
+  padding-right: 0 !important;
+}
+
+.cre8-u-padding-right-sm {
+  padding-right: size(1) !important;
+}
+
+.cre8-u-padding-right-md {
+  padding-right: size(2) !important;
+}
+
+.cre8-u-padding-right-lg {
+  padding-right: size(3) !important;
+}
+
+.cre8-u-padding-right-xl {
+  padding-right: size(4) !important;
+}
+
+.cre8-u-padding-right-xxl {
+  padding-right: size(8) !important;
+}
+
+.cre8-u-padding-bottom-none {
+  padding-bottom: 0 !important;
+}
+
+.cre8-u-padding-bottom-sm {
+  padding-bottom: size(1) !important;
+}
+
+.cre8-u-padding-bottom-md {
+  padding-bottom: size(2) !important;
+}
+
+.cre8-u-padding-bottom-lg {
+  padding-bottom: size(3) !important;
+}
+
+.cre8-u-padding-bottom-xl {
+  padding-bottom: size(4) !important;
+}
+
+.cre8-u-padding-bottom-xxl {
+  padding-bottom: size(8) !important;
+}
+
+.cre8-u-padding-left-none {
+  padding-left: 0 !important;
+}
+
+.cre8-u-padding-left-sm {
+  padding-left: size(1) !important;
+}
+
+.cre8-u-padding-left-md {
+  padding-left: size(2) !important;
+}
+
+.cre8-u-padding-left-lg {
+  padding-left: size(3) !important;
+}
+
+.cre8-u-padding-left-xl {
+  padding-left: size(4) !important;
+}
+
+.cre8-u-padding-left-xxl {
+  padding-left: size(8) !important;
+}
+
+.cre8-u-display-flex {
+  display: flex !important;
+}
+
+.cre8-u-display-block {
+  display: block !important;
+}
+
+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);
+  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-decoration: var(--cre8-typography-body-default-text-decoration);
+  text-transform: var(--cre8-typography-body-default-text-transform);
+  display: flex;
+  flex-direction: column;
+  padding: 0;
+  margin: 0;
+  color: var(--cre8-color-content-default);
+  background: var(--background-default);
+}
+
+@media all and (min-width: 60rem) {
+  .page-container {
+    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);
+  }
+}
+.band__inner {
+  margin-left: 2rem;
+  margin-right: 2rem;
+}
+
+@media all and (min-width: 60rem) {
+  .band__inner {
+    margin-right: 0;
+  }
+}
+img {
+  max-width: 100%;
+  height: auto;
+}
+
+/**
+ * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/
+ */
+*,
+::slotted(*),
+*:before,
+*:after {
+  box-sizing: border-box;
+}
+
+:root {
+  --size-base-unit: 0.5rem;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+/*
+=======
+Animations
+=======
+*/
+: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;
+  --cre8-l-max-width: 82.5rem;
+  /* 1 */
+  --cre8-l-linelength-width: 42rem;
+  /* 1 */
+}
+
+/**
+ * RTL support for values logical properties can't automatically adjust for
+ * 1) Percentage based horizontal translate values need to be flipped
+ * 2) Background gradients using "to-right" or "to-left" need to be switched to using deg values.
+ * 3) Inverse items that have 45degs
+ */
+[dir=rtl] {
+  --rtlTranslateX: 50%;
+  /* 1 */
+  --rtlGradientToRight: 270deg;
+  /* 2 */
+  --rtlRotate45Inverse: -45deg;
+  /* 3 */
+}
+
+/**
+ * Visible focus outline for elements on a light background
+ */
+/**
+ * Visible focus outline for elements with an error status
+ */
+/**
+ * Visible focus outline for elements on a dark background
+ */
+/**
+* Focus state for themes that need a dashed outline for focus
+* state
+**/
+/**
+ * Invisible focus outline for elements that need a more visible
+ * focus state for high-contrast mode
+ */
+/**
+ * Visually hidden from display
+ */
+:host {
+  display: inline-flex;
+}
+
+.cre8-c-select-tile-container {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  border-color: var(--cre8-color-border-default);
+  border-width: var(--cre8-border-width-default);
+  border-radius: var(--cre8-border-radius-container);
+  border-style: solid;
+}
+
+.cre8-c-select-tile {
+  position: relative;
+  overflow: hidden;
+  cursor: pointer;
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  width: 100%;
+  padding: 1rem;
+  gap: 1rem;
+  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;
+}
+
+/**
+ * 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;
+}
+
+@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;
+  }
+}
+
+/**
+ * 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 .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);
+}
+
+/**
+ * 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 .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-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.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;
+}
+
+/**
+* Radio field item custom radio container
+*/
+.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);
+  /**
+  * Radio field item custom radio focus visible  custom outline
+  */
+}
+.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__custom-radio {
+  /**
+  * Radio field item custom radio within radio field with error
+  */
+}
+.cre8-c-select-tile--error .cre8-c-select-tile__custom-radio {
+  border-color: var(--cre8-color-border-error);
+}
+.cre8-c-select-tile__custom-radio {
+  /**
+  * Radio field item custom radio within radio field disabled
+  */
+}
+.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;
+}
+
+/**
+ * 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: 0.75rem;
+  width: 0.75rem;
+  background: var(--cre8-color-content-brand);
+  border-radius: var(--cre8-border-radius-round);
+  /** Check radio variant */
+}
+.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__inner-circle {
+  /**
+  * Radio field item inner circle error
+  */
+}
+.cre8-c-select-tile--error .cre8-c-select-tile__inner-circle {
+  background: var(--cre8-color-bg-error-strong);
+}
+.cre8-c-select-tile__inner-circle {
+  /**
+  * Radio field item inner circle disabled
+  */
+}
+.cre8-c-select-tile--disabled .cre8-c-select-tile__inner-circle {
+  background: var(--cre8-color-content-disabled);
+}
+.cre8-c-select-tile__inner-circle {
+  /**
+  * Radio field item inner circle will display if the input is checked
+  */
+}
+input:checked ~ * .cre8-c-select-tile__custom-radio .cre8-c-select-tile__inner-circle {
+  display: flex;
+}
+
+/**
+ * Checkbox field item custom checkbox container
+ */
+.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);
+  /**
+  * Checkbox field item custom checkbox focus visible  custom outline
+  */
+}
+.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__custom-checkbox {
+  /**
+  * Checkbox field item custom checkbox within checkbox field with error
+  */
+}
+.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__custom-checkbox {
+  /**
+  * Checkbox field item custom checkbox within checkbox field with disabled
+  */
+}
+.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);
+}
+
+/**
+  * 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 input:checked ~ * .cre8-c-select-tile__custom-checkbox {
+  background-color: var(--cre8-color-bg-default);
+}
+input:checked ~ * .cre8-c-select-tile__custom-checkbox {
+  /**
+  * Checkbox field item custom checkbox when item is checked with disabled
+  */
+}
+.cre8-c-select-tile--disabled input:checked ~ * .cre8-c-select-tile__custom-checkbox {
+  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 .cre8-c-select-tile__icon {
+  color: var(--cre8-color-content-error);
+}
+.cre8-c-select-tile__icon {
+  /**
+  * Checkbox field item icon within checkbox field disabled
+  */
+}
+.cre8-c-select-tile--disabled .cre8-c-select-tile__icon {
+  color: var(--cre8-color-content-disabled);
+}
+.cre8-c-select-tile__icon {
+  /**
+  * Checkbox field item icon will display in the box if the input is checked
+  */
+}
+input:checked ~ * .cre8-c-select-tile__custom-checkbox .cre8-c-select-tile__icon {
+  display: flex;
+}`;function m(s,t){return t<0?s.length-1:t>=s.length?0:t}class p{constructor(t){this._clickHandler=e=>{e.preventDefault(),this._checkAndFocus(this.host)},this._checkAndFocus=e=>{const c=e.checked;this.removeChecked(),e.focus(),e.checked=!0,e.setAttribute("tabindex","0"),c||(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 c=this.findAllElementsInSameRadioButtonGroup({excludeDisabled:!0});if(c.length<=1)return;const l=c.findIndex(n=>n===this.host);let a;e.code==="ArrowLeft"||e.code==="ArrowUp"?a=c[m(c,l-1)]:(e.code==="ArrowRight"||e.code==="ArrowDown")&&(a=c[m(c,l+1)]),this._checkAndFocus(a),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(){}findAllElementsInSameRadioButtonGroup({excludeDisabled:t}={}){const e=this.host.name,c=this.host.form;if(e&&e.length>0){const l=this.host.ownerDocument,a=Array.from(l.querySelectorAll(`[role="radio"][name="${e}"]`)).filter(n=>n.form===c);return t===!0?a.filter(n=>!(n.disabled||n.ariaDisabled==="true")):a}return[]}removeChecked(){this.findAllElementsInSameRadioButtonGroup().forEach(e=>{e.checked=!1,e.setAttribute("tabindex","-1")})}}class u{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,i=(s,t,e,c)=>{for(var l=void 0,a=s.length-1,n;a>=0;a--)(n=s[a])&&(l=n(t,e,l)||l);return l&&w(t,e,l),l};const g=`<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 _{constructor(){super(...arguments),this._controller=void 0,this.type="radio",this.variantBreakToVertical="sm",this.checkPosition="right",this.radioVariant="dot"}get form(){return this._internals.form}connectedCallback(){super.connectedCallback(),this.fieldId=this.fieldId||y(),this._controller=this.type==="radio"?new p(this):new u(this),this.disabled&&(this._internals.ariaDisabled="true")}formResetCallback(){this.checked=this.defaultChecked,this.field.checked=this.defaultChecked}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 u(this)),t.has("disabled")&&(this.disabled?this._internals.ariaDisabled="true":this._internals.ariaDisabled="false")}renderInput(){return d`
+        <input
+            class="cre8-c-select-tile__input"
+            type=${this.type}
+            id=${this.fieldId}
+            aria-describedby="${x(this.ariaDescribedBy)}"
+            ?required=${this.required}
+            name=${this.name}
+            .value=${this.value}
+            ?disabled="${this.disabled}"
+            .checked="${this.checked}"
+        />
+        `}renderCheckboxIcon(){return this.type==="checkbox"?d`
+            <cre8-icon svg="${g}" 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"}),c=this.disabled?void 0:"0";return d`
+        <div class="cre8-c-select-tile__container" part="container">
+        ${this.renderInput()}
+        <label class="${t}" part="select-tile" for=${this.fieldId} tabindex=${c}>
+            ${this.slotNotEmpty("header")&&d`
+                <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")&&d`
+                    <div part="body-title" class="cre8-c-select-tile__body_title">
+                        <slot name="title"></slot>
+                    </div>
+                `}
+                ${this.slotNotEmpty("body")&&d`
+                    <div part="body-body" class="cre8-c-select-tile__body_body">
+                        <slot name="body"></slot>
+                    </div>
+                `}
+            </div>
+            <div part="footer" class="cre8-c-select-tile__footer">
+                <slot name="footer"></slot>
+            </div>
+            <div class="${e}">
+                ${this.renderCheckboxIcon()}
+                <div class="cre8-c-select-tile__inner-circle">
+                    <cre8-icon svg="${g}" class="cre8-c-select-tile__icon"></cre8-icon>
+                </div>
+            </div>
+        </label>
+        </div>`}};h.shadowRootOptions={...f.shadowRootOptions,delegatesFocus:!0},h.styles=[k];let r=h;i([o({reflect:!0})],r.prototype,"type");i([v("input")],r.prototype,"field");i([o({reflect:!0})],r.prototype,"variant");i([o({reflect:!0})],r.prototype,"variantBreakToVertical");i([o({reflect:!0})],r.prototype,"checkPosition");i([o({reflect:!0})],r.prototype,"radioVariant");i([o({reflect:!0})],r.prototype,"align");i([o({type:Boolean,reflect:!0})],r.prototype,"isError");i([o({type:Boolean,reflect:!0})],r.prototype,"disabled");i([o({type:Boolean,reflect:!0})],r.prototype,"required");i([o({type:Boolean,reflect:!0})],r.prototype,"checked");i([o({attribute:"checked",type:Boolean,reflect:!0})],r.prototype,"defaultChecked");i([o()],r.prototype,"fieldId");i([o()],r.prototype,"ariaDescribedBy");i([o({type:Boolean,reflect:!0})],r.prototype,"isSuccess");customElements.get("cre8-select-tile")===void 0&&customElements.define("cre8-select-tile",r);