@tmorrow/cre8-wc 1.2.4 → 1.2.6

package/lib/components/checkbox-field-item/checkbox-field-item.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox-field-item.styles.js","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+1BhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`@charset \"UTF-8\";\n.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* #VISIBILITY UTILITIES\n*/\n/* Completely remove from the flow and screen readers. */\n.cre8-u-is-hidden {\n  display: none !important;\n  visibility: hidden !important;\n}\n\n/* Completely remove from the flow but leave available to screen readers. */\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/**\n * Hide element at sm breakpoint\n */\n@media all and (min-width: 23.4375rem) {\n  .cre8-u-hide-sm {\n    display: none !important;\n  }\n}\n\n/**\n * Hide element at sm-2 breakpoint\n */\n@media all and (min-width: 35rem) {\n  .cre8-u-hide-sm-2 {\n    display: none !important;\n  }\n}\n\n/**\n * Hide element at md breakpoint\n */\n@media all and (min-width: 48rem) {\n  .cre8-u-hide-md {\n    display: none !important;\n  }\n}\n\n/**\n * Hide element at lg breakpoint\n */\n@media all and (min-width: 60rem) {\n  .cre8-u-hide-lg {\n    display: none !important;\n  }\n}\n\n/**\n * Hide element at xl breakpoint\n */\n@media all and (min-width: 75rem) {\n  .cre8-u-hide-xl {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at sm breakpoint\n */\n@media all and (max-width: 23.4375rem) {\n  .cre8-u-show-sm {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at sm-2 breakpoint\n */\n@media all and (max-width: 35rem) {\n  .cre8-u-show-sm-2 {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at md breakpoint\n */\n@media all and (max-width: 48rem) {\n  .cre8-u-show-md {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at lg breakpoint\n */\n@media all and (max-width: 60rem) {\n  .cre8-u-show-lg {\n    display: none !important;\n  }\n}\n\n/**\n * Show element at xl breakpoint\n */\n@media all and (max-width: 75rem) {\n  .cre8-u-show-xl {\n    display: none !important;\n  }\n}\n\n/*------------------------------------*\\\\\n #CHECKBOX-FIELD-ITEM\n\\\\*------------------------------------*/\n:host {\n  display: inline-flex;\n  flex-wrap: wrap;\n}\n\n/** \n * 1) Form field that is composed of a checkbox input, label, and an optional field note.\n */\n.cre8-c-checkbox-field-item {\n  display: flex;\n  position: relative;\n  align-items: center;\n  margin-bottom: 0.5rem;\n  min-height: 1.5rem;\n  /** \n  * Checkbox field item within last cre8-checkbox-field-item wrapper in a fieldset\n  * 1) Remove margin bottom on last item\n  */\n}\n:host(:last-child) .cre8-c-checkbox-field-item {\n  margin-bottom: 0;\n  /* 1 */\n}\n\n/** \n * Checkbox field item input \n */\n.cre8-c-checkbox-field-item__input {\n  opacity: 0;\n  cursor: pointer;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 1.5rem;\n  min-width: 1.5rem;\n  margin: 0;\n  z-index: 1;\n  /** \n  * Checkbox field item input error\n  */\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input {\n  cursor: not-allowed;\n}\n\n/** \n * Checkbox field item custom checkbox container\n */\n.cre8-c-checkbox-field-item__custom-checkbox {\n  display: flex;\n  position: absolute;\n  top: 0;\n  left: 0;\n  height: 1.5rem;\n  width: 1.5rem;\n  cursor: pointer;\n  align-items: center;\n  justify-content: center;\n  border-radius: var(--cre8-border-radius-small);\n  border-width: var(--cre8-border-width-default);\n  border-style: var(--cre8-border-style-default);\n  background-color: var(--cre8-color-bg-default);\n  border-color: var(--cre8-color-border-strong);\n  /** \n  * Checkbox field item custom checkbox focus visible  custom outline\n  */\n}\n.cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n  outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:focus-visible + .cre8-c-checkbox-field-item__custom-checkbox {\n  outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-error);\n  outline-offset: 0.125rem;\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n  /** \n  * Checkbox field item custom checkbox within checkbox field with error\n  */\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__custom-checkbox {\n  background-color: var(--cre8-color-bg-default);\n  border-color: var(--cre8-color-border-error);\n}\n.cre8-c-checkbox-field-item__custom-checkbox {\n  /** \n  * Checkbox field item custom checkbox within checkbox field with disabled\n  */\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__custom-checkbox {\n  cursor: not-allowed;\n  background-color: var(--cre8-color-bg-disabled);\n  border-color: var(--cre8-color-border-disabled);\n}\n\n/**\n  * Checkbox field item custom checkbox when item is checked\n  */\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n  background-color: var(--cre8-color-bg-brand-strong);\n  /** \n  * Checkbox field item custom checkbox when item is checked with error\n  */\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n  background-color: var(--cre8-color-bg-default);\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n  /** \n  * Checkbox field item custom checkbox when item is checked with disabled\n  */\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox {\n  background-color: var(--cre8-color-bg-disabled);\n}\n\n/** \n * Checkbox field item checkmark icon\n */\n.cre8-c-checkbox-field-item__icon {\n  display: none;\n  color: var(--cre8-color-content-knockout);\n  /** \n  * Checkbox field item icon within checkbox field with error\n  */\n}\n.cre8-c-checkbox-field-item--error .cre8-c-checkbox-field-item__icon {\n  color: var(--cre8-color-content-error);\n}\n.cre8-c-checkbox-field-item__icon {\n  /** \n  * Checkbox field item icon within checkbox field disabled\n  */\n}\n.cre8-c-checkbox-field-item--disabled .cre8-c-checkbox-field-item__icon {\n  color: var(--cre8-color-content-disabled);\n}\n.cre8-c-checkbox-field-item__icon {\n  /**\n  * Checkbox field item icon will display in the box if the input is checked\n  */\n}\n.cre8-c-checkbox-field-item__input:checked + .cre8-c-checkbox-field-item__custom-checkbox .cre8-c-checkbox-field-item__icon {\n  display: flex;\n}\n\n/** \n * Checkbox field item input \n */\n.cre8-c-checkbox-field-item__label {\n  margin-left: 2rem;\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}\n\n/** \n * Checkbox field item field notes\n */\n.cre8-c-checkbox-field-item__field-note,\n.cre8-c-checkbox-field-item__field-note-success,\n.cre8-c-checkbox-field-item__field-note-error {\n  flex-basis: 100%;\n}`;\nexport default styles;\n"]}

package/lib/components/contexts/form-internals-context.d.ts

@@ -0,0 +1,35 @@
+/**
+ * Extended ElementInternals interface with form lifecycle callbacks
+ */
+export interface Cre8ElementInternals extends ElementInternals {
+    placeholder: any;
+    min: any;
+    max: any;
+    autocomplete: any;
+    readonly: any;
+    formResetCallback?: () => void;
+    ariaRole?: string;
+}
+/**
+ * Context for sharing form element internals with descendant components.
+ * This allows nested components to access the parent form element's
+ * ElementInternals for form participation, validation, and ARIA.
+ */
+export declare const formInternalsContext: {
+    __context__: Cre8ElementInternals;
+};
+/**
+ * Context for sharing form element state with descendants
+ */
+export interface FormElementState {
+    value: string;
+    disabled: boolean;
+    required: boolean;
+    isError: boolean;
+    isSuccess: boolean;
+    name?: string;
+}
+export declare const formStateContext: {
+    __context__: FormElementState;
+};
+//# sourceMappingURL=form-internals-context.d.ts.map

package/lib/components/contexts/form-internals-context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-internals-context.d.ts","sourceRoot":"","sources":["../../../components/contexts/form-internals-context.ts"],"names":[],"mappings":"AAEA;;GAEG;AACH,MAAM,WAAW,oBAAqB,SAAQ,gBAAgB;IAC1D,WAAW,EAAE,GAAG,CAAC;IACjB,GAAG,EAAE,GAAG,CAAC;IACT,GAAG,EAAE,GAAG,CAAC;IACT,YAAY,EAAE,GAAG,CAAC;IAClB,QAAQ,EAAE,GAAG,CAAC;IACd,iBAAiB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC/B,QAAQ,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;;;GAIG;AACH,eAAO,MAAM,oBAAoB;;CAEhC,CAAC;AAEF;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC7B,KAAK,EAAE,MAAM,CAAC;IACd,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,OAAO,CAAC;IACnB,IAAI,CAAC,EAAE,MAAM,CAAC;CACjB;AAED,eAAO,MAAM,gBAAgB;;CAE5B,CAAC"}

package/lib/components/contexts/form-internals-context.js

@@ -0,0 +1,9 @@
+import { createContext } from '@lit/context';
+/**
+ * Context for sharing form element internals with descendant components.
+ * This allows nested components to access the parent form element's
+ * ElementInternals for form participation, validation, and ARIA.
+ */
+export const formInternalsContext = createContext(Symbol('cre8-form-internals'));
+export const formStateContext = createContext(Symbol('cre8-form-state'));
+//# sourceMappingURL=form-internals-context.js.map

package/lib/components/contexts/form-internals-context.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form-internals-context.js","sourceRoot":"","sources":["../../../components/contexts/form-internals-context.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,aAAa,EAAE,MAAM,cAAc,CAAC;AAe7C;;;;GAIG;AACH,MAAM,CAAC,MAAM,oBAAoB,GAAG,aAAa,CAC7C,MAAM,CAAC,qBAAqB,CAAC,CAChC,CAAC;AAcF,MAAM,CAAC,MAAM,gBAAgB,GAAG,aAAa,CACzC,MAAM,CAAC,iBAAiB,CAAC,CAC5B,CAAC","sourcesContent":["import { createContext } from '@lit/context';\n\n/**\n * Extended ElementInternals interface with form lifecycle callbacks\n */\nexport interface Cre8ElementInternals extends ElementInternals {\n    placeholder: any;\n    min: any;\n    max: any;\n    autocomplete: any;\n    readonly: any;\n    formResetCallback?: () => void;\n    ariaRole?: string;\n}\n\n/**\n * Context for sharing form element internals with descendant components.\n * This allows nested components to access the parent form element's\n * ElementInternals for form participation, validation, and ARIA.\n */\nexport const formInternalsContext = createContext<Cre8ElementInternals | null>(\n    Symbol('cre8-form-internals')\n);\n\n/**\n * Context for sharing form element state with descendants\n */\nexport interface FormElementState {\n    value: string;\n    disabled: boolean;\n    required: boolean;\n    isError: boolean;\n    isSuccess: boolean;\n    name?: string;\n}\n\nexport const formStateContext = createContext<FormElementState>(\n    Symbol('cre8-form-state')\n);\n"]}

package/lib/components/cre8-element.d.ts

@@ -0,0 +1,54 @@
+import { LitElement } from 'lit';
+export interface DetailObj {
+    [key: string]: unknown;
+}
+export interface Cre8DispatchProps {
+    e?: Event;
+    eventName: string;
+    detailObj?: DetailObj;
+    optionsObj?: {
+        [key: string]: unknown;
+    };
+}
+export interface Cre8Event extends Event {
+    detail: {
+        originalEvent: Event;
+        detailObj: DetailObj;
+    };
+}
+/**
+ * A base element.
+ */
+export declare class Cre8Element extends LitElement {
+    /**
+     * Abstraction of `classnames` that automatically includes any style modifier
+     * as well as any set variants.
+     *
+     * It is expected that `variant` would be overridden in a subclass with more
+     * specific types, `@property() variant?: 'foo' | 'bar'`
+     *
+     * @param baseClassName
+     */
+    componentClassNames(baseClassName: string, additionalClassNames?: {}): string;
+    /**
+     * Check if a slot is empty
+     *
+     * @param slotName
+     */
+    slotEmpty(slotName: string): boolean;
+    /**
+     * Check if a slot is not empty
+     *
+     * @param slotName
+     */
+    slotNotEmpty(slotName: string): boolean;
+    /**
+   * Dispatch a custom event.
+   */
+    dispatch({ e, eventName, detailObj, optionsObj, }: Cre8DispatchProps): CustomEvent;
+    /**
+     * Example render, should not be used
+     */
+    render(): import("lit-html").TemplateResult<1>;
+}
+//# sourceMappingURL=cre8-element.d.ts.map

package/lib/components/cre8-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cre8-element.d.ts","sourceRoot":"","sources":["../../components/cre8-element.ts"],"names":[],"mappings":"AACA,OAAO,EAAQ,UAAU,EAAE,MAAM,KAAK,CAAC;AAEvC,MAAM,WAAW,SAAS;IACxB,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB;AAED,MAAM,WAAW,iBAAiB;IAChC,CAAC,CAAC,EAAE,KAAK,CAAC;IACV,SAAS,EAAE,MAAM,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,UAAU,CAAC,EAAE;QAAE,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAA;KAAE,CAAC;CACzC;AAED,MAAM,WAAW,SAAU,SAAQ,KAAK;IACtC,MAAM,EAAE;QACN,aAAa,EAAE,KAAK,CAAC;QACrB,SAAS,EAAE,SAAS,CAAC;KACtB,CAAC;CACH;AAED;;GAEG;AACH,qBAAa,WAAY,SAAQ,UAAU;IACzC;;;;;;;;OAQG;IACD,mBAAmB,CAAC,aAAa,EAAE,MAAM,EAAE,oBAAoB,KAAK;IAItE;;;;OAIG;IACD,SAAS,CAAC,QAAQ,EAAE,MAAM;IAI5B;;;;OAIG;IACD,YAAY,CAAC,QAAQ,EAAE,MAAM;IAO7B;;KAEC;IACD,QAAQ,CAAC,EACL,CAAC,EAAE,SAAS,EAAE,SAAc,EAAE,UAAe,GAChD,EAAE,iBAAiB,GAAG,WAAW;IAYpC;;OAEG;IACD,MAAM;CAGT"}

package/lib/components/cre8-element.js

@@ -1,58 +1,59 @@
-import l from "classnames";
-import { LitElement as m, html as i } from "lit";
-class c extends m {
-  /**
-   * Abstraction of `classnames` that automatically includes any style modifier
-   * as well as any set variants.
-   *
-   * It is expected that `variant` would be overridden in a subclass with more
-   * specific types, `@property() variant?: 'foo' | 'bar'`
-   *
-   * @param baseClassName
+import classnames from 'classnames';
+import { html, LitElement } from 'lit';
+/**
+ * A base element.
+ */
+export class Cre8Element extends LitElement {
+    /**
+     * Abstraction of `classnames` that automatically includes any style modifier
+     * as well as any set variants.
+     *
+     * It is expected that `variant` would be overridden in a subclass with more
+     * specific types, `@property() variant?: 'foo' | 'bar'`
+     *
+     * @param baseClassName
+     */
+    componentClassNames(baseClassName, additionalClassNames = {}) {
+        return classnames(baseClassName, additionalClassNames);
+    }
+    /**
+     * Check if a slot is empty
+     *
+     * @param slotName
+     */
+    slotEmpty(slotName) {
+        return !this.querySelector(`[slot="${slotName}"]`);
+    }
+    /**
+     * Check if a slot is not empty
+     *
+     * @param slotName
+     */
+    slotNotEmpty(slotName) {
+        if (!this.slotEmpty(slotName) !== false) {
+            return !this.slotEmpty(slotName);
+        }
+        return null;
+    }
+    /**
+   * Dispatch a custom event.
    */
-  componentClassNames(t, e = {}) {
-    return l(t, e);
-  }
-  /**
-   * Check if a slot is empty
-   *
-   * @param slotName
-   */
-  slotEmpty(t) {
-    return !this.querySelector(`[slot="${t}"]`);
-  }
-  /**
-   * Check if a slot is not empty
-   *
-   * @param slotName
-   */
-  slotNotEmpty(t) {
-    return this.slotEmpty(t) ? null : !this.slotEmpty(t);
-  }
-  /**
-  * Dispatch a custom event.
-  */
-  dispatch({
-    e: t,
-    eventName: e,
-    detailObj: r = {},
-    optionsObj: n = {}
-  }) {
-    const o = {
-      bubbles: !0,
-      composed: !0,
-      ...n,
-      detail: { ...t && { originalEvent: t }, ...r }
-    }, s = new CustomEvent(e, o);
-    return this.dispatchEvent(s), s;
-  }
-  /**
-   * Example render, should not be used
-   */
-  render() {
-    return i`<slot></slot>`;
-  }
+    dispatch({ e, eventName, detailObj = {}, optionsObj = {}, }) {
+        const options = {
+            bubbles: true,
+            composed: true,
+            ...optionsObj,
+            detail: { ...(e && { originalEvent: e }), ...detailObj },
+        };
+        const event = new CustomEvent(eventName, options);
+        this.dispatchEvent(event);
+        return event;
+    }
+    /**
+     * Example render, should not be used
+     */
+    render() {
+        return html `<slot></slot>`;
+    }
 }
-export {
-  c as Cre8Element
-};
+//# sourceMappingURL=cre8-element.js.map

package/lib/components/cre8-element.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"cre8-element.js","sourceRoot":"","sources":["../../components/cre8-element.ts"],"names":[],"mappings":"AAAA,OAAO,UAAU,MAAM,YAAY,CAAC;AACpC,OAAO,EAAE,IAAI,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAoBvC;;GAEG;AACH,MAAM,OAAO,WAAY,SAAQ,UAAU;IACzC;;;;;;;;OAQG;IACD,mBAAmB,CAAC,aAAqB,EAAE,oBAAoB,GAAG,EAAE;QAChE,OAAO,UAAU,CAAC,aAAa,EAAE,oBAAoB,CAAC,CAAC;IAC3D,CAAC;IAEH;;;;OAIG;IACD,SAAS,CAAC,QAAgB;QACtB,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,UAAU,QAAQ,IAAI,CAAC,CAAC;IACvD,CAAC;IAEH;;;;OAIG;IACD,YAAY,CAAC,QAAgB;QACzB,IAAI,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,KAAK,KAAK,EAAE,CAAC;YACtC,OAAO,CAAC,IAAI,CAAC,SAAS,CAAC,QAAQ,CAAC,CAAC;QACrC,CAAC;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;KAEC;IACD,QAAQ,CAAC,EACL,CAAC,EAAE,SAAS,EAAE,SAAS,GAAG,EAAE,EAAE,UAAU,GAAG,EAAE,GAC7B;QAChB,MAAM,OAAO,GAAG;YACZ,OAAO,EAAE,IAAI;YACb,QAAQ,EAAE,IAAI;YACd,GAAG,UAAU;YACb,MAAM,EAAE,EAAE,GAAG,CAAC,CAAC,IAAI,EAAE,aAAa,EAAE,CAAC,EAAE,CAAC,EAAE,GAAG,SAAS,EAAE;SAC3D,CAAC;QACF,MAAM,KAAK,GAAG,IAAI,WAAW,CAAC,SAAS,EAAE,OAAO,CAAC,CAAC;QAClD,IAAI,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;QAC1B,OAAO,KAAK,CAAC;IACjB,CAAC;IAEH;;OAEG;IACD,MAAM;QACF,OAAO,IAAI,CAAA,eAAe,CAAC;IAC/B,CAAC;CACJ","sourcesContent":["import classnames from 'classnames';\nimport { html, LitElement } from 'lit';\n\nexport interface DetailObj {\n  [key: string]: unknown;\n}\n\nexport interface Cre8DispatchProps {\n  e?: Event;\n  eventName: string;\n  detailObj?: DetailObj;\n  optionsObj?: { [key: string]: unknown };\n}\n\nexport interface Cre8Event extends Event {\n  detail: {\n    originalEvent: Event;\n    detailObj: DetailObj;\n  };\n}\n\n/**\n * A base element.\n */\nexport class Cre8Element extends LitElement {\n  /**\n   * Abstraction of `classnames` that automatically includes any style modifier\n   * as well as any set variants.\n   *\n   * It is expected that `variant` would be overridden in a subclass with more\n   * specific types, `@property() variant?: 'foo' | 'bar'`\n   *\n   * @param baseClassName\n   */\n    componentClassNames(baseClassName: string, additionalClassNames = {}) {\n        return classnames(baseClassName, additionalClassNames);\n    }\n\n  /**\n   * Check if a slot is empty\n   *\n   * @param slotName\n   */\n    slotEmpty(slotName: string) {\n        return !this.querySelector(`[slot=\"${slotName}\"]`);\n    }\n\n  /**\n   * Check if a slot is not empty\n   *\n   * @param slotName\n   */\n    slotNotEmpty(slotName: string) {\n        if (!this.slotEmpty(slotName) !== false) {\n            return !this.slotEmpty(slotName);\n        }\n        return null;\n    }\n\n    /**\n   * Dispatch a custom event.\n   */\n    dispatch({\n        e, eventName, detailObj = {}, optionsObj = {},\n    }: Cre8DispatchProps): CustomEvent {\n        const options = {\n            bubbles: true,\n            composed: true,\n            ...optionsObj,\n            detail: { ...(e && { originalEvent: e }), ...detailObj },\n        };\n        const event = new CustomEvent(eventName, options);\n        this.dispatchEvent(event);\n        return event;\n    }\n\n  /**\n   * Example render, should not be used\n   */\n    render() {\n        return html`<slot></slot>`;\n    }\n}\n"]}

package/lib/components/cre8-form-element.d.ts

@@ -0,0 +1,137 @@
+import { Cre8Element } from './cre8-element';
+import { type Cre8ElementInternals, type FormElementState } from './contexts/form-internals-context';
+export { type Cre8ElementInternals, type FormElementState } from './contexts/form-internals-context';
+/**
+ * Base class for form-associated custom elements.
+ * Provides ElementInternals context to descendant components.
+ */
+export declare abstract class Cre8FormElement extends Cre8Element {
+    /**
+     * @internal
+     * Tells the browser to treat the element like a form field.
+     * Ties the element to the HTML form it is in.
+     */
+    static formAssociated: boolean;
+    /**
+     * The type of form control (text, checkbox, radio, etc.)
+     */
+    abstract type: string;
+    /**
+     * @protected
+     * @internal
+     * Stores the value for the `value` getter and setter.
+     */
+    protected internalValue: string;
+    /**
+     * The underlying HTML form field element.
+     * Should be implemented with `@query` in extending classes.
+     */
+    protected field?: HTMLInputElement | HTMLSelectElement | HTMLTextAreaElement | HTMLButtonElement;
+    /**
+     * @internal
+     * Stores the initial value for form reset functionality
+     */
+    protected defaultValue: string | boolean;
+    /**
+     * Provides ElementInternals to descendant components via context.
+     * Descendants can consume this to access form participation APIs.
+     */
+    _internals: Cre8ElementInternals;
+    /**
+     * Provides form element state to descendants via context.
+     * Useful for nested components that need to react to form state.
+     */
+    _formState: FormElementState;
+    /**
+     * The name of the form field
+     */
+    name?: string;
+    /**
+     * Whether the field is disabled
+     */
+    disabled?: boolean;
+    /**
+     * Whether the field is required
+     */
+    required?: boolean;
+    /**
+     * Whether the field is in an error state
+     */
+    isError?: boolean;
+    /**
+     * Whether the field is in a success state
+     */
+    isSuccess?: boolean;
+    /**
+     * The value of the form field.
+     */
+    get value(): string;
+    /**
+     * Sets the value of the form field.
+     * 1. Stores the new value so it can be retrieved by the getter.
+     * 2. Sets the current value of the control via ElementInternals.
+     * 3. Updates the actual field element.
+     * 4. Updates the form state context.
+     * 5. Triggers a re-render.
+     */
+    set value(newValue: string);
+    /**
+     * Updates the form state context for descendant consumption
+     */
+    protected updateFormState(): void;
+    /**
+     * Updates the actual field element's value
+     */
+    protected updateField(): void;
+    /**
+     * Lifecycle hook called after first render
+     */
+    protected firstUpdated(): void;
+    /**
+     * Called when properties change
+     */
+    protected updated(changedProperties: Map<PropertyKey, unknown>): void;
+    /**
+     * Form lifecycle callback - called when the form is reset
+     */
+    formResetCallback(): void;
+    /**
+     * Form lifecycle callback - called when the element is disabled via fieldset
+     */
+    formDisabledCallback(disabled: boolean): void;
+    /**
+     * Form lifecycle callback - called when form state is restored
+     */
+    formStateRestoreCallback(state: string | FormData | null, _mode: 'restore' | 'autocomplete'): void;
+    /**
+     * Gets the form associated with this element
+     */
+    get form(): HTMLFormElement | null;
+    /**
+     * Gets the validation message
+     */
+    get validationMessage(): string;
+    /**
+     * Gets the validity state
+     */
+    get validity(): ValidityState | undefined;
+    /**
+     * Gets whether the element will be validated
+     */
+    get willValidate(): boolean;
+    /**
+     * Checks validity and reports to the user
+     */
+    reportValidity(): boolean;
+    /**
+     * Checks validity without reporting
+     */
+    checkValidity(): boolean;
+    /**
+     * Sets a custom validity message
+     */
+    setCustomValidity(message: string): void;
+    constructor();
+}
+export default Cre8FormElement;
+//# sourceMappingURL=cre8-form-element.d.ts.map

package/lib/components/cre8-form-element.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"cre8-form-element.d.ts","sourceRoot":"","sources":["../../components/cre8-form-element.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAGH,KAAK,oBAAoB,EACzB,KAAK,gBAAgB,EACxB,MAAM,mCAAmC,CAAC;AAE3C,OAAO,EAAE,KAAK,oBAAoB,EAAE,KAAK,gBAAgB,EAAE,MAAM,mCAAmC,CAAC;AAErG;;;GAGG;AACH,8BAAsB,eAAgB,SAAQ,WAAW;IACrD;;;;OAIG;IACH,MAAM,CAAC,cAAc,UAAQ;IAE7B;;OAEG;IACH,QAAQ,CAAC,IAAI,EAAE,MAAM,CAAC;IAEtB;;;;OAIG;IACH,SAAS,CAAC,aAAa,EAAE,MAAM,CAAM;IAErC;;;OAGG;IACH,SAAS,CAAC,KAAK,CAAC,EAAE,gBAAgB,GAAG,iBAAiB,GAAG,mBAAmB,GAAG,iBAAiB,CAAC;IAEjG;;;OAGG;IACH,SAAS,CAAC,YAAY,EAAE,MAAM,GAAG,OAAO,CAAM;IAE9C;;;OAGG;IAEH,UAAU,EAAE,oBAAoB,CAAC;IAEjC;;;OAGG;IAEH,UAAU,EAAE,gBAAgB,CAM1B;IAEF;;OAEG;IAEH,IAAI,CAAC,EAAE,MAAM,CAAC;IAEd;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;OAEG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IACH,IACI,KAAK,IAAI,MAAM,CAElB;IAED;;;;;;;OAOG;IACH,IAAI,KAAK,CAAC,QAAQ,EAAE,MAAM,EAYzB;IAED;;OAEG;IACH,SAAS,CAAC,eAAe,IAAI,IAAI;IAWjC;;OAEG;IACH,SAAS,CAAC,WAAW,IAAI,IAAI;IAM7B;;OAEG;IACH,SAAS,CAAC,YAAY,IAAI,IAAI;IAQ9B;;OAEG;IACH,SAAS,CAAC,OAAO,CAAC,iBAAiB,EAAE,GAAG,CAAC,WAAW,EAAE,OAAO,CAAC,GAAG,IAAI;IAerE;;OAEG;IACH,iBAAiB,IAAI,IAAI;IAKzB;;OAEG;IACH,oBAAoB,CAAC,QAAQ,EAAE,OAAO,GAAG,IAAI;IAI7C;;OAEG;IACH,wBAAwB,CAAC,KAAK,EAAE,MAAM,GAAG,QAAQ,GAAG,IAAI,EAAE,KAAK,EAAE,SAAS,GAAG,cAAc,GAAG,IAAI;IAMlG;;OAEG;IACH,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED;;OAEG;IACH,IAAI,iBAAiB,IAAI,MAAM,CAE9B;IAED;;OAEG;IACH,IAAI,QAAQ,IAAI,aAAa,GAAG,SAAS,CAExC;IAED;;OAEG;IACH,IAAI,YAAY,IAAI,OAAO,CAE1B;IAED;;OAEG;IACH,cAAc,IAAI,OAAO;IAIzB;;OAEG;IACH,aAAa,IAAI,OAAO;IAIxB;;OAEG;IACH,iBAAiB,CAAC,OAAO,EAAE,MAAM,GAAG,IAAI;;CAc3C;AAED,eAAe,eAAe,CAAC"}

package/lib/components/cre8-form-element.js

@@ -1,7 +1,214 @@
-import "lit/decorators.js";
-import { C as t, C as a } from "../cre8-form-element-BymRdQUC.js";
-import "./cre8-element.js";
-export {
-  t as Cre8FormElement,
-  a as default
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
+import { property } from 'lit/decorators.js';
+import { provide } from '@lit/context';
+import { Cre8Element } from './cre8-element';
+import { formInternalsContext, formStateContext } from './contexts/form-internals-context';
+/**
+ * Base class for form-associated custom elements.
+ * Provides ElementInternals context to descendant components.
+ */
+export class Cre8FormElement extends Cre8Element {
+    /**
+     * The value of the form field.
+     */
+    get value() {
+        return this.internalValue;
+    }
+    /**
+     * Sets the value of the form field.
+     * 1. Stores the new value so it can be retrieved by the getter.
+     * 2. Sets the current value of the control via ElementInternals.
+     * 3. Updates the actual field element.
+     * 4. Updates the form state context.
+     * 5. Triggers a re-render.
+     */
+    set value(newValue) {
+        const oldValue = this.value;
+        this.internalValue = newValue;
+        // Update form value for non-checkbox/radio types
+        if (this.type !== 'checkbox' && this.type !== 'radio') {
+            this._internals?.setFormValue(newValue);
+        }
+        this.updateField();
+        this.updateFormState();
+        this.requestUpdate('value', oldValue);
+    }
+    /**
+     * Updates the form state context for descendant consumption
+     */
+    updateFormState() {
+        this._formState = {
+            value: this.internalValue,
+            disabled: this.disabled ?? false,
+            required: this.required ?? false,
+            isError: this.isError ?? false,
+            isSuccess: this.isSuccess ?? false,
+            name: this.name,
+        };
+    }
+    /**
+     * Updates the actual field element's value
+     */
+    updateField() {
+        if (this.field && this.internalValue !== undefined) {
+            this.field.value = this.internalValue ?? '';
+        }
+    }
+    /**
+     * Lifecycle hook called after first render
+     */
+    firstUpdated() {
+        if (this.type !== 'checkbox' && this.type !== 'radio') {
+            this.defaultValue = this.value || this.getAttribute('value') || '';
+        }
+        this.updateField();
+        this.updateFormState();
+    }
+    /**
+     * Called when properties change
+     */
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        // Update form state context when relevant properties change
+        if (changedProperties.has('disabled') ||
+            changedProperties.has('required') ||
+            changedProperties.has('isError') ||
+            changedProperties.has('isSuccess') ||
+            changedProperties.has('name')) {
+            this.updateFormState();
+        }
+    }
+    /**
+     * Form lifecycle callback - called when the form is reset
+     */
+    formResetCallback() {
+        this.value = this.defaultValue;
+        this.updateField();
+    }
+    /**
+     * Form lifecycle callback - called when the element is disabled via fieldset
+     */
+    formDisabledCallback(disabled) {
+        this.disabled = disabled;
+    }
+    /**
+     * Form lifecycle callback - called when form state is restored
+     */
+    formStateRestoreCallback(state, _mode) {
+        if (typeof state === 'string') {
+            this.value = state;
+        }
+    }
+    /**
+     * Gets the form associated with this element
+     */
+    get form() {
+        return this._internals?.form ?? null;
+    }
+    /**
+     * Gets the validation message
+     */
+    get validationMessage() {
+        return this._internals?.validationMessage ?? '';
+    }
+    /**
+     * Gets the validity state
+     */
+    get validity() {
+        return this._internals?.validity;
+    }
+    /**
+     * Gets whether the element will be validated
+     */
+    get willValidate() {
+        return this._internals?.willValidate ?? false;
+    }
+    /**
+     * Checks validity and reports to the user
+     */
+    reportValidity() {
+        return this._internals?.reportValidity() ?? true;
+    }
+    /**
+     * Checks validity without reporting
+     */
+    checkValidity() {
+        return this._internals?.checkValidity() ?? true;
+    }
+    /**
+     * Sets a custom validity message
+     */
+    setCustomValidity(message) {
+        if (this._internals && this.field) {
+            if (message) {
+                this._internals.setValidity({ customError: true }, message, this.field);
+            }
+            else {
+                this._internals.setValidity({});
+            }
+        }
+    }
+    constructor() {
+        super();
+        /**
+         * @protected
+         * @internal
+         * Stores the value for the `value` getter and setter.
+         */
+        this.internalValue = '';
+        /**
+         * @internal
+         * Stores the initial value for form reset functionality
+         */
+        this.defaultValue = '';
+        /**
+         * Provides form element state to descendants via context.
+         * Useful for nested components that need to react to form state.
+         */
+        this._formState = {
+            value: '',
+            disabled: false,
+            required: false,
+            isError: false,
+            isSuccess: false,
+        };
+        this._internals = this.attachInternals();
+    }
+}
+/**
+ * @internal
+ * Tells the browser to treat the element like a form field.
+ * Ties the element to the HTML form it is in.
+ */
+Cre8FormElement.formAssociated = true;
+__decorate([
+    provide({ context: formInternalsContext })
+], Cre8FormElement.prototype, "_internals", void 0);
+__decorate([
+    provide({ context: formStateContext })
+], Cre8FormElement.prototype, "_formState", void 0);
+__decorate([
+    property()
+], Cre8FormElement.prototype, "name", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8FormElement.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8FormElement.prototype, "required", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8FormElement.prototype, "isError", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8FormElement.prototype, "isSuccess", void 0);
+__decorate([
+    property()
+], Cre8FormElement.prototype, "value", null);
+export default Cre8FormElement;
+//# sourceMappingURL=cre8-form-element.js.map