@tmorrow/cre8-wc 1.2.4 → 1.2.5

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

@@ -0,0 +1 @@
+{"version":3,"file":"select.styles.js","sourceRoot":"","sources":["../../../components/select/select.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAkuBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n  color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n  position: absolute !important;\n  overflow: hidden;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  border: 0;\n  clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n.cre8-u-margin-none {\n  margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n  margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n  margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n  margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n  margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n  margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n  margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n  margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n  margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n  margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n  margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n  margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n  margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n  margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n  margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n  margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n  margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n  margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n  margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n  margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n  margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n  margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n  margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n  margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n  margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n  .cre8-u-margin-bottom-xl-xxl {\n    margin-bottom: size(8) !important;\n  }\n}\n.cre8-u-margin-left-none {\n  margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n  margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n  margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n  margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n  margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n  margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n  padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n  padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n  padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n  padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n  padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n  padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n  padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n  padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n  padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n  padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n  padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n  padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n  padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n  padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n  padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n  padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n  padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n  padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n  padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n  padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n  padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n  padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n  padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n  padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n  padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n  padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n  padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n  padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n  padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n  padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n  display: flex !important;\n}\n\n.cre8-u-display-block {\n  display: block !important;\n}\n\nbody {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  display: flex;\n  flex-direction: column;\n  padding: 0;\n  margin: 0;\n  color: var(--cre8-color-content-default);\n  background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n  .page-container {\n    background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n  }\n}\n.band__inner {\n  margin-left: 2rem;\n  margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n  .band__inner {\n    margin-right: 0;\n  }\n}\nimg {\n  max-width: 100%;\n  height: auto;\n}\n\n/**\n * Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n */\n*,\n::slotted(*),\n*:before,\n*:after {\n  box-sizing: border-box;\n}\n\n:root {\n  --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*\n=======\nAnimations\n=======\n*/\n:host {\n  --cre8-z-index-1: 1;\n  --cre8-z-index-50: 50;\n  --cre8-z-index-100: 100;\n  --cre8-z-index-200: 200;\n  --cre8-z-index-1030: 1030;\n  --cre8-anim-fade-quick: 0.35s;\n  --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n  100% {\n    opacity: 1;\n  }\n}\n@keyframes slideIn {\n  100% {\n    transform: translateX(0);\n  }\n}\n@keyframes slideInFwd {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideOutRight {\n  100% {\n    width: 272px;\n    height: 272px;\n  }\n}\n@keyframes slideUp {\n  100% {\n    transform: translateY(0);\n  }\n}\n@media (width >= 481px) {\n  @keyframes slideInFwd {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 417px;\n      height: 417px;\n    }\n  }\n}\n@media (width >= 48rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 330px;\n      height: 330px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 330px;\n      height: 330px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 60rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 460px;\n      height: 460px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 460px;\n      height: 460px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 75rem) {\n  @keyframes slideInFwd {\n    100% {\n      width: 592px;\n      height: 591px;\n    }\n  }\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 45px));\n    }\n  }\n}\n@media (width >= 87.5rem) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 120px));\n    }\n  }\n}\n@media (width >= 2200px) {\n  @keyframes slideOutRight {\n    100% {\n      width: 592px;\n      height: 591px;\n      transform: translateX(calc(100vw - 592px));\n    }\n  }\n}\nspan.ripple {\n  position: absolute;\n  border-radius: 50%;\n  transform: scale(0);\n  animation: ripple 600ms linear;\n  background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n  to {\n    transform: scale(4);\n    opacity: 1;\n  }\n}\n:root {\n  --size-base-unit: 0.5rem;\n}\n\n/**\n * RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n */\n[dir=rtl] {\n  --rtlTranslateX: 50%;\n  /* 1 */\n  --rtlGradientToRight: 270deg;\n  /* 2 */\n  --rtlRotate45Inverse: -45deg;\n  /* 3 */\n}\n\n/**\n * Visible focus outline for elements on a light background\n */\n/**\n * Visible focus outline for elements with an error status\n */\n/**\n * Visible focus outline for elements on a dark background\n */\n/**\n* Focus state for themes that need a dashed outline for focus\n* state\n**/\n/**\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n */\n/**\n * Visually hidden from display\n */\n/*------------------------------------*\\\\\n #SELECT\n\\\\*------------------------------------*/\n:host {\n  display: inline-flex;\n  flex-wrap: wrap;\n}\n\n/**\n * Select Label\n */\n.cre8-c-select__label {\n  font-family: var(--cre8-typography-label-small-font-family);\n  font-size: var(--cre8-typography-label-small-font-size);\n  font-weight: var(--cre8-typography-label-small-font-weight);\n  line-height: var(--cre8-typography-label-small-line-height);\n  text-decoration: var(--cre8-typography-label-small-text-decoration);\n  text-transform: var(--cre8-typography-label-small-text-transform);\n  display: block;\n  margin-bottom: 0.5rem;\n  margin-left: var(--cre8-input-label-margin-left, 0px);\n}\n\n/**\n * Select Body\n * 1) The div that contains the input and icons\n */\n.cre8-c-select__body {\n  position: relative;\n}\n\n/**\n * Select Input\n * 1) The html5 select element\n */\n.cre8-c-select__input {\n  font-family: var(--cre8-typography-body-default-font-family);\n  font-size: var(--cre8-typography-body-default-font-size);\n  font-weight: var(--cre8-typography-body-default-font-weight);\n  line-height: var(--cre8-typography-body-default-line-height);\n  text-decoration: var(--cre8-typography-body-default-text-decoration);\n  text-transform: var(--cre8-typography-body-default-text-transform);\n  outline: var(--cre8-border-width-focus) solid transparent;\n  outline-offset: 0.125rem;\n  --size-base-unit: .5rem;\n  -webkit-appearance: none;\n  width: 100%;\n  border-width: var(--cre8-border-width-default);\n  border-style: solid;\n  border-color: var(--cre8-color-border-strong);\n  border-radius: var(--cre8-border-radius-default);\n  padding: var(--cre8-input-padding, 0.75rem 0.5rem);\n  color: var(--cre8-color-content-default);\n  background-color: var(--cre8-color-bg-default);\n  transition: outline-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), border-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), background-color var(--cre8-anim-fade-quick) var(--cre8-anim-ease), color var(--cre8-anim-fade-quick) var(--cre8-anim-ease);\n  /**\n   * Hover, focus, active, and focus-visible styles for default input elements\n   */\n}\n.cre8-c-select__input:hover:not(:disabled), .cre8-c-select__input:focus:not(:disabled), .cre8-c-select__input:active:not(:disabled), .cre8-c-select__input:focus-visible {\n  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n  outline-offset: 0.125rem;\n  /**\n   * Error state\n   */\n}\n.cre8-is-error .cre8-c-select__input:hover:not(:disabled), .cre8-is-error .cre8-c-select__input:focus:not(:disabled), .cre8-is-error .cre8-c-select__input:active:not(:disabled), .cre8-is-error .cre8-c-select__input:focus-visible {\n  outline-color: var(--cre8-color-border-error);\n}\n.cre8-c-select__input:hover:not(:disabled), .cre8-c-select__input:focus:not(:disabled), .cre8-c-select__input:active:not(:disabled), .cre8-c-select__input:focus-visible {\n  /**\n   * Success state\n   */\n}\n.cre8-is-success .cre8-c-select__input:hover:not(:disabled), .cre8-is-success .cre8-c-select__input:focus:not(:disabled), .cre8-is-success .cre8-c-select__input:active:not(:disabled), .cre8-is-success .cre8-c-select__input:focus-visible {\n  outline-color: var(--cre8-color-border-success);\n}\n.cre8-c-select__input {\n  /**\n   * Disabled styles for default input elements\n   */\n}\n.cre8-c-select__input:disabled {\n  background-color: var(--cre8-color-bg-disabled);\n  border-color: var(--cre8-color-border-disabled);\n  color: var(--cre8-color-content-disabled);\n  cursor: not-allowed;\n  /**\n   * Disabled text colors\n   */\n}\n.cre8-c-select__input:disabled::placeholder {\n  color: var(--cre8-color-content-disabled);\n}\n.cre8-c-select__input {\n  /**\n   * Placeholder styles for default input elements\n   */\n}\n.cre8-c-select__input::placeholder {\n  color: var(--cre8-color-content-subtle);\n}\n.cre8-c-select__input {\n  /**\n   * Error state for default input elements\n   */\n}\n.cre8-is-error .cre8-c-select__input {\n  border-color: var(--cre8-color-border-error);\n}\n.cre8-c-select__input {\n  /**\n   * Success state for default input elements\n   */\n}\n.cre8-is-success .cre8-c-select__input {\n  border-color: var(--cre8-color-border-success);\n}\n.cre8-c-select__input {\n  padding-inline-end: 2.75rem;\n  cursor: pointer;\n}\n\n/**\n * Select Icon\n * 1) The icons within the body container positioned absolutely over the input\n */\n.cre8-c-select__icons {\n  position: absolute;\n  inset-block-start: 50%;\n  transform: translateY(-50%);\n  inset-inline-end: 0.5rem;\n  display: flex;\n  align-items: center;\n  justify-content: flex-end;\n  gap: 0.5rem;\n  pointer-events: none;\n}\n\n/**\n * Select Arrow Icon\n */\n.cre8-c-select__icon-arrow {\n  margin-right: 0.375rem;\n  width: 0.75rem;\n  height: 0.75rem;\n}\n\n/**\n * Select field notes\n */\n.cre8-c-select__field-note,\n.cre8-c-select__field-note-success,\n.cre8-c-select__field-note-error {\n  flex-basis: 100%;\n}`;\nexport default styles;\n"]}

package/lib/components/select-tile/select-tile-checkbox-controller.d.ts

@@ -0,0 +1,40 @@
+import { ReactiveController } from 'lit';
+import { Cre8FormElement } from '../cre8-form-element';
+type FormElement = Cre8FormElement & {
+    form: HTMLFormElement;
+    name?: string;
+    checked?: boolean;
+};
+/**
+ * This Controller handles the special checkbox logic.
+ * This should be a lot simpler than the radio version.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role
+ */
+export declare class SelectTileCheckboxController implements ReactiveController {
+    private host;
+    constructor(host: FormElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    /**
+     * Handle clicking on the radio button
+     * @see _checkAndFocus
+     */
+    private _clickHandler;
+    /**
+     * Set the element to `checked`
+     * 2) Set us to checked.
+     */
+    private _checkAndFocus;
+    /**
+     * Handle keydown
+     */
+    private _handleKeyDown;
+    /**
+     * Handle Enter and Space
+     * @see _checkAndFocus
+     */
+    private _handleEnterSpace;
+}
+export default SelectTileCheckboxController;
+//# sourceMappingURL=select-tile-checkbox-controller.d.ts.map

package/lib/components/select-tile/select-tile-checkbox-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile-checkbox-controller.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile-checkbox-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD,KAAK,WAAW,GAAG,eAAe,GAAG;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAGjG;;;;;GAKG;AACH,qBAAa,4BAA6B,YAAW,kBAAkB;IACnE,OAAO,CAAC,IAAI,CAAc;gBAEd,IAAI,EAAE,WAAW;IAK7B,aAAa,IAAI,IAAI;IAQrB,gBAAgB,IAAI,IAAI;IAQ1B;;;OAGG;IACD,OAAO,CAAC,aAAa,CAGnB;IAEJ;;;OAGG;IACD,OAAO,CAAC,cAAc,CAIpB;IAEJ;;OAEG;IACD,OAAO,CAAC,cAAc,CAKpB;IAEJ;;;OAGG;IACD,OAAO,CAAC,iBAAiB,CAGvB;CACL;AAED,eAAe,4BAA4B,CAAC"}

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

@@ -0,0 +1,60 @@
+/**
+ * This Controller handles the special checkbox logic.
+ * This should be a lot simpler than the radio version.
+ *
+ * See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role
+ */
+export class SelectTileCheckboxController {
+    constructor(host) {
+        /**
+         * Handle clicking on the radio button
+         * @see _checkAndFocus
+         */
+        this._clickHandler = (e) => {
+            this._checkAndFocus();
+            e.preventDefault();
+        };
+        /**
+         * Set the element to `checked`
+         * 2) Set us to checked.
+         */
+        this._checkAndFocus = () => {
+            this.host.checked = !this.host.checked;
+            this.host.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+            this.host.dispatchEvent(new Event('change', { bubbles: true }));
+        };
+        /**
+         * Handle keydown
+         */
+        this._handleKeyDown = (e) => {
+            // Enter and Space
+            if (['Enter', ' '].includes(e.key)) {
+                this._handleEnterSpace(e);
+            }
+        };
+        /**
+         * Handle Enter and Space
+         * @see _checkAndFocus
+         */
+        this._handleEnterSpace = (e) => {
+            this._checkAndFocus();
+            e.preventDefault();
+        };
+        this.host = host;
+        host.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 = undefined;
+        this.host.removeAttribute('tabindex');
+        this.host.removeEventListener('click', this._clickHandler);
+        this.host.removeEventListener('keydown', this._handleKeyDown);
+    }
+}
+export default SelectTileCheckboxController;
+//# sourceMappingURL=select-tile-checkbox-controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile-checkbox-controller.js","sourceRoot":"","sources":["../../../components/select-tile/select-tile-checkbox-controller.ts"],"names":[],"mappings":"AAMA;;;;;GAKG;AACH,MAAM,OAAO,4BAA4B;IAGrC,YAAY,IAAiB;QAqB/B;;;WAGG;QACO,kBAAa,GAAG,CAAC,CAA6B,EAAE,EAAE;YACtD,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,CAAC,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC,CAAC;QAEJ;;;WAGG;QACO,mBAAc,GAAG,GAAG,EAAE;YAC1B,IAAI,CAAC,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;YACvC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,OAAO,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;YAC/E,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,IAAI,KAAK,CAAC,QAAQ,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;QACpE,CAAC,CAAC;QAEJ;;WAEG;QACO,mBAAc,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC9C,kBAAkB;YACd,IAAI,CAAC,OAAO,EAAE,GAAG,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,GAAG,CAAC,EAAE,CAAC;gBACjC,IAAI,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC;YAC9B,CAAC;QACL,CAAC,CAAC;QAEJ;;;WAGG;QACO,sBAAiB,GAAG,CAAC,CAAgB,EAAE,EAAE;YAC7C,IAAI,CAAC,cAAc,EAAE,CAAC;YACtB,CAAC,CAAC,cAAc,EAAE,CAAC;QACvB,CAAC,CAAC;QAxDE,IAAI,CAAC,IAAI,GAAG,IAAI,CAAC;QACjB,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,CAAC;IAC7B,CAAC;IAED,aAAa;QACT,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,UAAU,CAAC;QACvC,IAAI,CAAC,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;QAExC,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QACxD,IAAI,CAAC,IAAI,CAAC,gBAAgB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAC/D,CAAC;IAED,gBAAgB;QACZ,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,IAAI,GAAG,SAAS,CAAC;QACtC,IAAI,CAAC,IAAI,CAAC,eAAe,CAAC,UAAU,CAAC,CAAC;QAEtC,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,OAAO,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC;QAC3D,IAAI,CAAC,IAAI,CAAC,mBAAmB,CAAC,SAAS,EAAE,IAAI,CAAC,cAAc,CAAC,CAAC;IAClE,CAAC;CAuCJ;AAED,eAAe,4BAA4B,CAAC","sourcesContent":["import { ReactiveController } from 'lit';\nimport { Cre8FormElement } from '../cre8-form-element';\n\ntype FormElement = Cre8FormElement & { form: HTMLFormElement, name?: string, checked?: boolean };\n\n\n/**\n * This Controller handles the special checkbox logic.\n * This should be a lot simpler than the radio version.\n *\n * See https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/checkbox_role\n */\nexport class SelectTileCheckboxController implements ReactiveController {\n    private host: FormElement;\n\n    constructor(host: FormElement) {\n        this.host = host;\n        host.addController(this);\n    }\n\n    hostConnected(): void {\n        this.host._internals.role = 'checkbox';\n        this.host.setAttribute('tabindex', '0');\n\n        this.host.addEventListener('click', this._clickHandler);\n        this.host.addEventListener('keydown', this._handleKeyDown);\n    }\n\n    hostDisconnected(): void {\n        this.host._internals.role = undefined;\n        this.host.removeAttribute('tabindex');\n\n        this.host.removeEventListener('click', this._clickHandler);\n        this.host.removeEventListener('keydown', this._handleKeyDown);\n    }\n\n  /**\n   * Handle clicking on the radio button\n   * @see _checkAndFocus\n   */\n    private _clickHandler = (e: MouseEvent | KeyboardEvent) => {\n        this._checkAndFocus();\n        e.preventDefault();\n    };\n\n  /**\n   * Set the element to `checked`\n   * 2) Set us to checked.\n   */\n    private _checkAndFocus = () => {\n        this.host.checked = !this.host.checked;\n        this.host.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n        this.host.dispatchEvent(new Event('change', { bubbles: true }));\n    };\n\n  /**\n   * Handle keydown\n   */\n    private _handleKeyDown = (e: KeyboardEvent) => {\n    // Enter and Space\n        if (['Enter', ' '].includes(e.key)) {\n            this._handleEnterSpace(e);\n        }\n    };\n\n  /**\n   * Handle Enter and Space\n   * @see _checkAndFocus\n   */\n    private _handleEnterSpace = (e: KeyboardEvent) => {\n        this._checkAndFocus();\n        e.preventDefault();\n    };\n}\n\nexport default SelectTileCheckboxController;\n"]}

package/lib/components/select-tile/select-tile-radio-controller.d.ts

@@ -0,0 +1,87 @@
+import { ReactiveController } from 'lit';
+import { Cre8FormElement } from '../cre8-form-element';
+type FormElement = Cre8FormElement & {
+    form: HTMLFormElement;
+    name?: string;
+    checked?: boolean;
+};
+/**
+ * This Controller handles the special radio button logic.
+ *
+ * - Handle clicks and key presses, which involves
+ *   - Unchecking other select-tile's when this one is checked, if they are in the same form.
+ *   - Changing focus between `0` and `-1`, and moving focus correctly on key press
+ *   - checking/unchecking on spacebar
+ *
+ * See also https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role
+ * and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role
+ *
+ * Also see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-autonomous-drawbacks
+ *
+ * This started out as a copy of radio-field-item.ts.
+ *
+ * Part of the reason I extracted this was to see if I could share this logic with radio-field-item,
+ * but that would be separate refactor.
+ *
+ * It might also be good for the "checkbox" mode of select-tile.
+ *
+ * And it might also just be a cleaner separation of concerns.
+ */
+export declare class SelectTileRadioController implements ReactiveController {
+    private host;
+    constructor(host: FormElement);
+    hostConnected(): void;
+    hostDisconnected(): void;
+    hostUpdate(): void;
+    /**
+     * 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 }?: {
+        excludeDisabled?: boolean;
+    }): Element[];
+    /**
+      * Remove checked
+      * 1) Reset the form field to not checked
+      * 2) Remove checked property from all items and set tabindex to -1
+      */
+    removeChecked(): void;
+    /**
+     * Handle clicking on the radio button
+     * @see _checkAndFocus
+     */
+    private _clickHandler;
+    /**
+     * Set the element to `checked`
+     * 1) Remove `checked` and set tabindex to -1 on all elements in our radio group
+     * 2) Set us to checked.
+     * 3) Set our tabindex to 0
+     */
+    private _checkAndFocus;
+    /**
+     * Handle keydown
+     * 1) If left or up arrow key is struck and radio field item exists before current item,
+     *    remove checked from all items and add it to the next item
+     * 2) If right or down arrow key is struck and radio field item exists after current item,
+     *    remove checked from all items and add checked to the next item.
+     *    Focus on this item and set tabindex for when focusing out of radio field and back onto checked item.
+     * 3) If the element is in focused, then for event emission the
+     *    current focues element should be clicked to emit event.
+     * 4) If the Enter key is pressed, then check the radio if no other radio items are checked
+     */
+    private _handleKeyDown;
+    private _handleArrowKeys;
+    /**
+     * Handle Enter and Space
+     * @see _checkAndFocus
+     */
+    private _handleEnterSpace;
+}
+export default SelectTileRadioController;
+//# sourceMappingURL=select-tile-radio-controller.d.ts.map

package/lib/components/select-tile/select-tile-radio-controller.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile-radio-controller.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile-radio-controller.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,KAAK,CAAC;AACzC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAGvD,KAAK,WAAW,GAAG,eAAe,GAAG;IAAE,IAAI,EAAE,eAAe,CAAC;IAAC,IAAI,CAAC,EAAE,MAAM,CAAC;IAAC,OAAO,CAAC,EAAE,OAAO,CAAA;CAAE,CAAC;AAcjG;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,qBAAa,yBAA0B,YAAW,kBAAkB;IAChE,OAAO,CAAC,IAAI,CAAc;gBAEd,IAAI,EAAE,WAAW;IAK7B,aAAa,IAAI,IAAI;IAUrB,gBAAgB,IAAI,IAAI;IASxB,UAAU,IAAI,IAAI;IAIlB;;;;;;;;;OASG;IACH,qCAAqC,CAAC,EAAE,eAAe,EAAE,GAAE;QAAE,eAAe,CAAC,EAAE,OAAO,CAAA;KAAM;IAqB/F;;;;QAII;IACD,aAAa;IAQf;;;OAGG;IACD,OAAO,CAAC,aAAa,CAGnB;IAEJ;;;;;OAKG;IACD,OAAO,CAAC,cAAc,CAUpB;IAEJ;;;;;;;;;;OAUG;IACD,OAAO,CAAC,cAAc,CASpB;IAEF,OAAO,CAAC,gBAAgB,CAmBtB;IAEJ;;;OAGG;IACD,OAAO,CAAC,iBAAiB,CAGvB;CACL;AAED,eAAe,yBAAyB,CAAC"}

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

@@ -0,0 +1,167 @@
+/**
+ * Helper function to wrap indexes around, to help us treat the array as a ring.
+ */
+function wrapIndex(arr, index) {
+    if (index < 0) {
+        return arr.length - 1;
+    }
+    if (index >= arr.length) {
+        return 0;
+    }
+    return index;
+}
+/**
+ * This Controller handles the special radio button logic.
+ *
+ * - Handle clicks and key presses, which involves
+ *   - Unchecking other select-tile's when this one is checked, if they are in the same form.
+ *   - Changing focus between `0` and `-1`, and moving focus correctly on key press
+ *   - checking/unchecking on spacebar
+ *
+ * See also https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role
+ * and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role
+ *
+ * Also see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-autonomous-drawbacks
+ *
+ * This started out as a copy of radio-field-item.ts.
+ *
+ * Part of the reason I extracted this was to see if I could share this logic with radio-field-item,
+ * but that would be separate refactor.
+ *
+ * It might also be good for the "checkbox" mode of select-tile.
+ *
+ * And it might also just be a cleaner separation of concerns.
+ */
+export class SelectTileRadioController {
+    constructor(host) {
+        /**
+         * Handle clicking on the radio button
+         * @see _checkAndFocus
+         */
+        this._clickHandler = (e) => {
+            e.preventDefault();
+            this._checkAndFocus(this.host);
+        };
+        /**
+         * Set the element to `checked`
+         * 1) Remove `checked` and set tabindex to -1 on all elements in our radio group
+         * 2) Set us to checked.
+         * 3) Set our tabindex to 0
+         */
+        this._checkAndFocus = (target) => {
+            const wasChecked = target.checked;
+            this.removeChecked(); /* 1 */
+            target.focus();
+            target.checked = true; /* 2 */
+            target.setAttribute('tabindex', '0'); /* 3 */
+            if (!wasChecked) {
+                target.dispatchEvent(new Event('input', { bubbles: true, composed: true }));
+                target.dispatchEvent(new Event('change', { bubbles: true }));
+            }
+        };
+        /**
+         * Handle keydown
+         * 1) If left or up arrow key is struck and radio field item exists before current item,
+         *    remove checked from all items and add it to the next item
+         * 2) If right or down arrow key is struck and radio field item exists after current item,
+         *    remove checked from all items and add checked to the next item.
+         *    Focus on this item and set tabindex for when focusing out of radio field and back onto checked item.
+         * 3) If the element is in focused, then for event emission the
+         *    current focues element should be clicked to emit event.
+         * 4) If the Enter key is pressed, then check the radio if no other radio items are checked
+         */
+        this._handleKeyDown = (e) => {
+            // The arrow keys
+            if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].includes(e.code)) {
+                this._handleArrowKeys(e);
+            }
+            // Enter and Space
+            if (['Enter', ' '].includes(e.key)) {
+                this._handleEnterSpace(e);
+            }
+        };
+        this._handleArrowKeys = (e) => {
+            const siblings = this.findAllElementsInSameRadioButtonGroup({ excludeDisabled: true });
+            // If we're the only radio-like element, nothing to do
+            if (siblings.length <= 1) {
+                return;
+            }
+            const ourIndex = siblings.findIndex((item) => item === this.host);
+            let moveToElement;
+            if (e.code === 'ArrowLeft' || e.code === 'ArrowUp') {
+                moveToElement = siblings[wrapIndex(siblings, ourIndex - 1)];
+            }
+            else if (e.code === 'ArrowRight' || e.code === 'ArrowDown') {
+                moveToElement = siblings[wrapIndex(siblings, ourIndex + 1)];
+            }
+            this._checkAndFocus(moveToElement);
+            e.preventDefault();
+        };
+        /**
+         * Handle Enter and Space
+         * @see _checkAndFocus
+         */
+        this._handleEnterSpace = (e) => {
+            this._checkAndFocus(this.host);
+            e.preventDefault();
+        };
+        this.host = host;
+        host.addController(this);
+    }
+    hostConnected() {
+        this.host._internals.role = 'radio';
+        // If we don't also do this, we can't use css selectors to find ourselves
+        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 = undefined;
+        this.host.removeAttribute('role');
+        this.host.removeAttribute('tabindex');
+        this.host.removeEventListener('click', this._clickHandler);
+        this.host.removeEventListener('keydown', this._handleKeyDown);
+    }
+    hostUpdate() {
+        // TODO: do stuff if name, checked, etc change.
+    }
+    /**
+     * 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 } = {}) {
+        const name = this.host.name;
+        const form = this.host.form;
+        if (name && name.length > 0) {
+            const document = this.host.ownerDocument;
+            const matches = Array.from(document.querySelectorAll(`[role="radio"][name="${name}"]`)).filter((element) => element.form === form);
+            if (excludeDisabled === true) {
+                return matches
+                    .filter((element) => !(element.disabled || element.ariaDisabled === 'true'));
+            }
+            return matches;
+        }
+        return [];
+    }
+    /**
+      * Remove checked
+      * 1) Reset the form field to not checked
+      * 2) Remove checked property from all items and set tabindex to -1
+      */
+    removeChecked() {
+        const radioFieldItems = this.findAllElementsInSameRadioButtonGroup();
+        radioFieldItems.forEach((element) => {
+            element.checked = false; /* 1 */
+            element.setAttribute('tabindex', '-1'); /* 2 */
+        });
+    }
+}
+export default SelectTileRadioController;
+//# sourceMappingURL=select-tile-radio-controller.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile-radio-controller.js","sourceRoot":"","sources":["../../../components/select-tile/select-tile-radio-controller.ts"],"names":[],"mappings":"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","sourcesContent":["import { ReactiveController } from 'lit';\nimport { Cre8FormElement } from '../cre8-form-element';\nimport { Cre8RadioFieldItem } from '../radio-field-item/radio-field-item';\n\ntype FormElement = Cre8FormElement & { form: HTMLFormElement, name?: string, checked?: boolean };\n\n/**\n * Helper function to wrap indexes around, to help us treat the array as a ring.\n */\nfunction wrapIndex(arr: unknown[], index: number) {\n    if (index < 0) {\n        return arr.length - 1;\n    } if (index >= arr.length) {\n        return 0;\n    }\n    return index;\n}\n\n/**\n * This Controller handles the special radio button logic.\n *\n * - Handle clicks and key presses, which involves\n *   - Unchecking other select-tile's when this one is checked, if they are in the same form.\n *   - Changing focus between `0` and `-1`, and moving focus correctly on key press\n *   - checking/unchecking on spacebar\n *\n * See also https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radio_role\n * and https://developer.mozilla.org/en-US/docs/Web/Accessibility/ARIA/Roles/radiogroup_role\n *\n * Also see https://html.spec.whatwg.org/multipage/custom-elements.html#custom-elements-autonomous-drawbacks\n *\n * This started out as a copy of radio-field-item.ts.\n *\n * Part of the reason I extracted this was to see if I could share this logic with radio-field-item,\n * but that would be separate refactor.\n *\n * It might also be good for the \"checkbox\" mode of select-tile.\n *\n * And it might also just be a cleaner separation of concerns.\n */\nexport class SelectTileRadioController implements ReactiveController {\n    private host: FormElement;\n\n    constructor(host: FormElement) {\n        this.host = host;\n        host.addController(this);\n    }\n\n    hostConnected(): void {\n        this.host._internals.role = 'radio';\n        // If we don't also do this, we can't use css selectors to find ourselves\n        this.host.setAttribute('role', 'radio');\n        this.host.setAttribute('tabindex', '0');\n\n        this.host.addEventListener('click', this._clickHandler);\n        this.host.addEventListener('keydown', this._handleKeyDown);\n    }\n\n    hostDisconnected(): void {\n        this.host._internals.role = undefined;\n        this.host.removeAttribute('role');\n        this.host.removeAttribute('tabindex');\n\n        this.host.removeEventListener('click', this._clickHandler);\n        this.host.removeEventListener('keydown', this._handleKeyDown);\n    }\n\n    hostUpdate(): void {\n        // TODO: do stuff if name, checked, etc change.\n    }\n\n    /**\n     * Find all elements that are in the same \"radio button group\", following the HTML 5 spec,\n     * except that we're looking at `[role=\"radio\"]` instead of `input[type=\"radio\"]`.\n     *\n     * - They have the attribute role=\"radio\" set\n     * - They have the same form owner, or both have no form owner\n     * - They're in the same tree (same document, don't look at shadow dom)\n     * - They both have non-empty name attributes, and the names are the same\n     *\n     */\n    findAllElementsInSameRadioButtonGroup({ excludeDisabled }: { excludeDisabled?: boolean} = {}) {\n        const name = this.host.name;\n        const form = this.host.form;\n        if (name && name.length > 0) {\n            const document = this.host.ownerDocument;\n            const matches = Array.from(\n                document.querySelectorAll(`[role=\"radio\"][name=\"${name}\"]`)\n            ).filter((element: HTMLElement & { form?: HTMLFormElement}) => element.form === form);\n\n            if (excludeDisabled === true) {\n                return matches\n                    .filter((element: HTMLElement & { disabled?: boolean}) => !(\n                        element.disabled || element.ariaDisabled === 'true'\n                    ));\n            }\n\n            return matches;\n        }\n        return [];\n    }\n\n /**\n   * Remove checked\n   * 1) Reset the form field to not checked\n   * 2) Remove checked property from all items and set tabindex to -1\n   */\n    removeChecked() {\n        const radioFieldItems = this.findAllElementsInSameRadioButtonGroup();\n        radioFieldItems.forEach((element: Cre8RadioFieldItem) => {\n            element.checked = false; /* 1 */\n            element.setAttribute('tabindex', '-1'); /* 2 */\n        });\n    }\n\n  /**\n   * Handle clicking on the radio button\n   * @see _checkAndFocus\n   */\n    private _clickHandler = (e: MouseEvent | KeyboardEvent) => {\n        e.preventDefault();\n        this._checkAndFocus(this.host);\n    };\n\n  /**\n   * Set the element to `checked`\n   * 1) Remove `checked` and set tabindex to -1 on all elements in our radio group\n   * 2) Set us to checked.\n   * 3) Set our tabindex to 0\n   */\n    private _checkAndFocus = (target: HTMLElement & { checked?: boolean }) => {\n        const wasChecked = target.checked;\n        this.removeChecked(); /* 1 */\n        target.focus();\n        target.checked = true; /* 2 */\n        target.setAttribute('tabindex', '0'); /* 3 */\n        if (!wasChecked) {\n            target.dispatchEvent(new Event('input', { bubbles: true, composed: true }));\n            target.dispatchEvent(new Event('change', { bubbles: true }));\n        }\n    };\n\n  /**\n   * Handle keydown\n   * 1) If left or up arrow key is struck and radio field item exists before current item,\n   *    remove checked from all items and add it to the next item\n   * 2) If right or down arrow key is struck and radio field item exists after current item,\n   *    remove checked from all items and add checked to the next item.\n   *    Focus on this item and set tabindex for when focusing out of radio field and back onto checked item.\n   * 3) If the element is in focused, then for event emission the\n   *    current focues element should be clicked to emit event.\n   * 4) If the Enter key is pressed, then check the radio if no other radio items are checked\n   */\n    private _handleKeyDown = (e: KeyboardEvent) => {\n    // The arrow keys\n        if (['ArrowLeft', 'ArrowUp', 'ArrowRight', 'ArrowDown'].includes(e.code)) {\n            this._handleArrowKeys(e);\n        }\n    // Enter and Space\n        if (['Enter', ' '].includes(e.key)) {\n            this._handleEnterSpace(e);\n        }\n    };\n\n    private _handleArrowKeys = (e: KeyboardEvent) => {\n        const siblings = this.findAllElementsInSameRadioButtonGroup({ excludeDisabled: true });\n\n    // If we're the only radio-like element, nothing to do\n        if (siblings.length <= 1) {\n            return;\n        }\n\n        const ourIndex = siblings.findIndex((item) => item === this.host);\n        let moveToElement: HTMLElement & { checked?: boolean };\n        if (e.code === 'ArrowLeft' || e.code === 'ArrowUp') {\n            moveToElement = siblings[wrapIndex(siblings, ourIndex - 1)] as HTMLElement;\n        } else if (e.code === 'ArrowRight' || e.code === 'ArrowDown') {\n            moveToElement = siblings[wrapIndex(siblings, ourIndex + 1)] as HTMLElement;\n        }\n\n        this._checkAndFocus(moveToElement);\n\n        e.preventDefault();\n    };\n\n  /**\n   * Handle Enter and Space\n   * @see _checkAndFocus\n   */\n    private _handleEnterSpace = (e: KeyboardEvent) => {\n        this._checkAndFocus(this.host);\n        e.preventDefault();\n    };\n}\n\nexport default SelectTileRadioController;\n"]}

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

@@ -0,0 +1,159 @@
+import { PropertyValues } from 'lit';
+import { Cre8FormElement } from '../cre8-form-element';
+import '../icon/icon';
+/**
+ * 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 declare class Cre8SelectTile extends Cre8FormElement {
+    static shadowRootOptions: {
+        delegatesFocus: boolean;
+        clonable?: boolean;
+        customElementRegistry?: CustomElementRegistry;
+        mode: ShadowRootMode;
+        serializable?: boolean;
+        slotAssignment?: SlotAssignmentMode;
+    };
+    private _controller;
+    /**
+     * Should this Select Tile behave as a radio button or a checkbox?
+     */
+    type: 'radio' | 'checkbox';
+    /**
+     * Get the radio field item input
+     */
+    field: HTMLInputElement;
+    static styles: import("lit").CSSResult[];
+    /**
+     * Style variants
+     * - **bare** renders a select-tile without a border and without padding around the content
+     * - **horizontal** renders a select-tile with header, body, footer oriented in a row rather than a column
+     * - **horizontal-bare** renders a select-tile with header, body, footer
+     *   oriented in a row rather than a column without a border and without padding around the content
+     */
+    variant?: 'bare' | 'horizontal' | 'horizontal-bare';
+    /**
+     * Which breakpoint, if any, to switch to verticial.
+     * Only useful for horizontal variants. Defaults to 'sm'.
+     */
+    variantBreakToVertical: 'sm' | 'sm-2' | 'md' | 'lg' | 'xl' | 'xxl' | 'none';
+    /**
+     * Where does the checkmark or radio button go?
+     * It disappears on 'none'. Only top-right is supported for vertical variants.
+     */
+    checkPosition: 'left' | 'right' | 'top-right' | 'none';
+    /**
+     * In radio mode, whether to use the circle with the dot, or the rounded check.
+     */
+    radioVariant: 'dot' | 'check';
+    /**
+     * Align variants
+     * <cre8-text-passage size="sm">
+     * <ul>
+     * <li>**center** renders a select-tile that has center aligned content/text</li>
+     * </ul>
+     * </cre8-text-passage>
+     */
+    align?: 'center';
+    /**
+     * Error State
+     */
+    isError?: boolean;
+    /**
+     * Disabled State
+     */
+    disabled?: boolean;
+    /**
+     * Required attribute
+     */
+    required?: boolean;
+    /**
+     * Checked State.
+     * Note: the `checked` attribute sets the `defaultChecked` property, as well
+     * as sets the initial value for the `checked` property.
+     */
+    checked?: boolean;
+    /**
+     * The default checked state when the element first renders or is reset.
+     *
+     * Note: the attribute is named `checked` and the property is
+     * named `defaultChecked`. This is the same as a regular radio button.
+     */
+    defaultChecked: boolean;
+    /**
+     * Select Tile FieldId
+     */
+    fieldId?: string;
+    /**
+     * Radio item fieldnote aria describe by
+     */
+    private ariaDescribedBy?;
+    /**
+     * Radio item fieldnote isSuccess
+     */
+    isSuccess?: boolean;
+    /**
+     * The form associated with this field
+     *
+     * TOOD: maybe this goes on Cre8FormElement
+     */
+    get form(): HTMLFormElement;
+    /**
+     * 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(): void;
+    /**
+     * 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(): void;
+    /**
+     * Whenever the "checked" property changes, update our form value, aria-checked,
+     * and the checked property of `this.field`.
+     *
+     */
+    updated(changedProps: PropertyValues): void;
+    renderInput(): import("lit-html").TemplateResult<1>;
+    renderCheckboxIcon(): import("lit-html").TemplateResult<1>;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-select-tile': Cre8SelectTile;
+    }
+}
+export default Cre8SelectTile;
+//# sourceMappingURL=select-tile.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"select-tile.d.ts","sourceRoot":"","sources":["../../../components/select-tile/select-tile.ts"],"names":[],"mappings":"AACA,OAAO,EACS,cAAc,EAC7B,MAAM,KAAK,CAAC;AAKb,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AACvD,OAAO,cAAc,CAAC;AAMtB;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAgCE;AACF,qBAAa,cAAe,SAAQ,eAAe;IAC/C,MAAM,CAAC,iBAAiB;;;;;;;MAA6D;IAErF,OAAO,CAAC,WAAW,CAAmF;IAEtG;;OAEG;IAEH,IAAI,EAAE,OAAO,GAAG,UAAU,CAAW;IAErC;;OAEG;IAEH,KAAK,EAAG,gBAAgB,CAAC;IAEzB,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;OAMG;IAEH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC;IAEpD;;;OAGG;IAEH,sBAAsB,EAAE,IAAI,GAAG,MAAM,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,GAAG,KAAK,GAAG,MAAM,CAAQ;IAEnF;;;OAGG;IAEH,aAAa,EAAE,MAAM,GAAG,OAAO,GAAG,WAAW,GAAG,MAAM,CAAW;IAEjE;;OAEG;IAEH,YAAY,EAAE,KAAK,GAAG,OAAO,CAAS;IAEtC;;;;;;;OAOG;IAEH,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;;OAIG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;;;OAKG;IAEH,cAAc,EAAE,OAAO,CAAC;IAExB;;OAEG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,OAAO,CAAC,eAAe,CAAC,CAAS;IAEjC;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;;;OAIG;IACH,IAAI,IAAI,oBAEP;IAED;;;;OAIG;IACH,iBAAiB;IAWjB;;;;;OAKG;IACH,iBAAiB,IAAI,IAAI;IAMzB;;;;OAIG;IACH,OAAO,CAAC,YAAY,EAAE,cAAc;IAwBpC,WAAW;IAgBX,kBAAkB;IASlB,MAAM;CAgET;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,kBAAkB,EAAE,cAAc,CAAC;KACtC;CACJ;AAED,eAAe,cAAc,CAAC"}