@tmorrow/cre8-wc 2.1.0 → 2.2.0

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

@@ -1 +1 @@
-{"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../../components/field/field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA0sBhB,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  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\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  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\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:host {\n  display: block;\n}\n\n/** \n * Field Label \n */\n.cre8-c-field__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 * Field Body\n * 1) The div that contains the input and icons \n */\n.cre8-c-field__body {\n  position: relative;\n}\n\n/** \n * Field Input \n * 1) The html5 input element\n */\n.cre8-c-field__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-field__input:hover:not(:disabled), .cre8-c-field__input:focus:not(:disabled), .cre8-c-field__input:active:not(:disabled), .cre8-c-field__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-field__input:hover:not(:disabled), .cre8-is-error .cre8-c-field__input:focus:not(:disabled), .cre8-is-error .cre8-c-field__input:active:not(:disabled), .cre8-is-error .cre8-c-field__input:focus-visible {\n  outline-color: var(--cre8-color-border-error);\n}\n.cre8-c-field__input:hover:not(:disabled), .cre8-c-field__input:focus:not(:disabled), .cre8-c-field__input:active:not(:disabled), .cre8-c-field__input:focus-visible {\n  /**\n   * Success state\n   */\n}\n.cre8-is-success .cre8-c-field__input:hover:not(:disabled), .cre8-is-success .cre8-c-field__input:focus:not(:disabled), .cre8-is-success .cre8-c-field__input:active:not(:disabled), .cre8-is-success .cre8-c-field__input:focus-visible {\n  outline-color: var(--cre8-color-border-success);\n}\n.cre8-c-field__input {\n  /**\n   * Disabled styles for default input elements\n   */\n}\n.cre8-c-field__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-field__input:disabled::placeholder {\n  color: var(--cre8-color-content-disabled);\n}\n.cre8-c-field__input {\n  /**\n   * Placeholder styles for default input elements\n   */\n}\n.cre8-c-field__input::placeholder {\n  color: var(--cre8-color-content-subtle);\n}\n.cre8-c-field__input {\n  /**\n   * Error state for default input elements\n   */\n}\n.cre8-is-error .cre8-c-field__input {\n  border-color: var(--cre8-color-border-error);\n}\n.cre8-c-field__input {\n  /**\n   * Success state for default input elements\n   */\n}\n.cre8-is-success .cre8-c-field__input {\n  border-color: var(--cre8-color-border-success);\n}\n.cre8-c-field__input {\n  /**\n   * Readonly input styles\n   */\n}\n.cre8-c-field__input:read-only {\n  background-color: var(--cre8-color-bg-disabled);\n  border-color: var(--cre8-color-border-disabled);\n  cursor: default;\n}`;\nexport default styles;\n"]}
+{"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../../components/field/field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4sBjB,CAAC;AAAA,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\n\nconst styles = css`\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  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\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  --cre8-l-max-width: 82.5rem;\n  /* 1 */\n  --cre8-l-linelength-width: 42rem;\n  /* 1 */\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:host {\n  display: block;\n}\n\n/** \n * Field Label \n */\n.cre8-c-field__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 * Field Body\n * 1) The div that contains the input and icons \n */\n.cre8-c-field__body {\n  position: relative;\n}\n\n/** \n * Field Input \n * 1) The html5 input element\n */\n.cre8-c-field__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-field__input:hover:not(:disabled), .cre8-c-field__input:focus:not(:disabled), .cre8-c-field__input:active:not(:disabled), .cre8-c-field__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-field__input:hover:not(:disabled), .cre8-is-error .cre8-c-field__input:focus:not(:disabled), .cre8-is-error .cre8-c-field__input:active:not(:disabled), .cre8-is-error .cre8-c-field__input:focus-visible {\n  outline-color: var(--cre8-color-border-error);\n}\n.cre8-c-field__input:hover:not(:disabled), .cre8-c-field__input:focus:not(:disabled), .cre8-c-field__input:active:not(:disabled), .cre8-c-field__input:focus-visible {\n  /**\n   * Success state\n   */\n}\n.cre8-is-success .cre8-c-field__input:hover:not(:disabled), .cre8-is-success .cre8-c-field__input:focus:not(:disabled), .cre8-is-success .cre8-c-field__input:active:not(:disabled), .cre8-is-success .cre8-c-field__input:focus-visible {\n  outline-color: var(--cre8-color-border-success);\n}\n.cre8-c-field__input {\n  /**\n   * Disabled styles for default input elements\n   */\n}\n.cre8-c-field__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-field__input:disabled::placeholder {\n  color: var(--cre8-color-content-disabled);\n}\n.cre8-c-field__input {\n  /**\n   * Placeholder styles for default input elements\n   */\n}\n.cre8-c-field__input::placeholder {\n  color: var(--cre8-color-content-subtle);\n}\n.cre8-c-field__input {\n  /**\n   * Error state for default input elements\n   */\n}\n.cre8-is-error .cre8-c-field__input {\n  border-color: var(--cre8-color-border-error);\n}\n.cre8-c-field__input {\n  /**\n   * Success state for default input elements\n   */\n}\n.cre8-is-success .cre8-c-field__input {\n  border-color: var(--cre8-color-border-success);\n}\n.cre8-c-field__input {\n  /**\n   * Readonly input styles\n   */\n}\n.cre8-c-field__input:read-only {\n  background-color: var(--cre8-color-bg-disabled);\n  border-color: var(--cre8-color-border-disabled);\n  cursor: default;\n}\n`;export default styles;\n"]}

package/lib/components/form/form.d.ts

@@ -0,0 +1,87 @@
+import { type PropertyValues } from 'lit';
+import { Cre8Element } from '../cre8-element';
+import type { Cre8FormElement } from '../cre8-form-element';
+/**
+ * The form component groups form-associated Cre8 controls, aggregates their
+ * validation on submit, and orchestrates submit and reset.
+ *
+ * # How to Use
+ * 1. Place any Cre8 form controls inside `cre8-form`. They may be nested inside
+ *    layout components such as `cre8-grid` or `cre8-layout`.
+ * 2. Add a `cre8-button` with `type="submit"` to submit the form.
+ * 3. Listen for `form-submit` to receive the collected `FormData`.
+ *
+ * Note: this component renders to light DOM. A form-associated control's form
+ * owner is the nearest `<form>` in its own node tree, so a shadow-DOM `<form>`
+ * would own nothing and `new FormData(form)` would come back empty.
+ *
+ * @slot The form's controls and layout.
+ */
+export declare class Cre8Form extends Cre8Element {
+    /**
+     * Skips aggregate validation on submit.
+     */
+    novalidate?: boolean;
+    /**
+     * Disables every control in the form, for example while submitting.
+     */
+    disabled?: boolean;
+    private _form;
+    /** Renders to light DOM so child controls are owned by the form. */
+    createRenderRoot(): this;
+    /**
+     * Renders nothing. The `<form>` and the author's controls are managed
+     * imperatively in `_ensureForm` so that Lit never owns, and therefore never
+     * clears, the light-DOM children.
+     */
+    render(): import("lit-html").TemplateResult<1>;
+    connectedCallback(): void;
+    /**
+     * Installs the component's stylesheet into its root node.
+     *
+     * Light-DOM components have no shadow root, so Lit never attaches
+     * `static styles`. The sheet is instead adopted by the document (or the
+     * enclosing shadow root, when the form is composed inside one) exactly
+     * once per root. Falls back to appending a `<style>` element where
+     * constructable stylesheets are unavailable (e.g. jsdom).
+     */
+    private _adoptStyles;
+    protected updated(changed: PropertyValues): void;
+    private _ensureForm;
+    /** The wrapped native form element. */
+    get form(): HTMLFormElement | null;
+    /**
+     * Every form-associated Cre8 control owned by this form, in document order.
+     * Reaches through layout components because slotting does not move nodes
+     * out of the light-DOM tree.
+     */
+    get controls(): Cre8FormElement[];
+    /** The form's current values, derived from FormData. */
+    get values(): Record<string, FormDataEntryValue | FormDataEntryValue[]>;
+    private _onSubmit;
+    private _onReset;
+    /** Submits the form, running aggregate validation unless `novalidate`. */
+    submit(): void;
+    /** Resets the form to its default values. */
+    reset(): void;
+    /** True when every control is valid. Does not change error state. */
+    checkValidity(): boolean;
+    /**
+     * Like `checkValidity`, but flags errors and focuses the first invalid
+     * control.
+     */
+    reportValidity(): boolean;
+    /**
+     * Checks every control, reflects the result onto their `isError` state,
+     * focuses the first invalid one, and emits `form-invalid`.
+     * Returns true when the form is valid.
+     */
+    private _validate;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-form': Cre8Form;
+    }
+}
+export default Cre8Form;
+//# sourceMappingURL=form.d.ts.map

package/lib/components/form/form.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../../components/form/form.ts"],"names":[],"mappings":"AAAA,OAAO,EAAQ,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAEhD,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAG5D;;;;;;;;;;;;;;;GAeG;AACH,qBAAa,QAAS,SAAQ,WAAW;IACrC;;OAEG;IAEC,UAAU,CAAC,EAAE,OAAO,CAAC;IAEzB;;OAEG;IAEC,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEvB,OAAO,CAAC,KAAK,CAAgC;IAE7C,oEAAoE;IACpE,gBAAgB;IAIhB;;;;OAIG;IACH,MAAM;IAIN,iBAAiB;IAMjB;;;;;;;;OAQG;IACH,OAAO,CAAC,YAAY;IAoBpB,SAAS,CAAC,OAAO,CAAC,OAAO,EAAE,cAAc;IASzC,OAAO,CAAC,WAAW;IAsBnB,uCAAuC;IACvC,IAAI,IAAI,IAAI,eAAe,GAAG,IAAI,CAEjC;IAED;;;;OAIG;IACH,IAAI,QAAQ,IAAI,eAAe,EAAE,CAOhC;IAED,wDAAwD;IACxD,IAAI,MAAM,IAAI,MAAM,CAAC,MAAM,EAAE,kBAAkB,GAAG,kBAAkB,EAAE,CAAC,CAgBtE;IAED,OAAO,CAAC,SAAS,CAmBf;IAEF,OAAO,CAAC,QAAQ,CAOd;IAEF,0EAA0E;IAC1E,MAAM;IAIN,6CAA6C;IAC7C,KAAK;IAIL,qEAAqE;IACrE,aAAa,IAAI,OAAO;IAIxB;;;OAGG;IACH,cAAc,IAAI,OAAO;IAIzB;;;;OAIG;IACH,OAAO,CAAC,SAAS;CAsBpB;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF;AAED,eAAe,QAAQ,CAAC"}

package/lib/components/form/form.js

@@ -0,0 +1,209 @@
+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 { html } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './form.styles';
+/**
+ * The form component groups form-associated Cre8 controls, aggregates their
+ * validation on submit, and orchestrates submit and reset.
+ *
+ * # How to Use
+ * 1. Place any Cre8 form controls inside `cre8-form`. They may be nested inside
+ *    layout components such as `cre8-grid` or `cre8-layout`.
+ * 2. Add a `cre8-button` with `type="submit"` to submit the form.
+ * 3. Listen for `form-submit` to receive the collected `FormData`.
+ *
+ * Note: this component renders to light DOM. A form-associated control's form
+ * owner is the nearest `<form>` in its own node tree, so a shadow-DOM `<form>`
+ * would own nothing and `new FormData(form)` would come back empty.
+ *
+ * @slot The form's controls and layout.
+ */
+export class Cre8Form extends Cre8Element {
+    constructor() {
+        super(...arguments);
+        this._form = null;
+        this._onSubmit = (event) => {
+            // This component never performs a native navigation.
+            event.preventDefault();
+            if (!this.novalidate && !this._validate()) {
+                return;
+            }
+            this.dispatchEvent(new CustomEvent('form-submit', {
+                detail: {
+                    data: new FormData(this._form),
+                    values: this.values,
+                    form: this._form,
+                },
+                bubbles: true,
+                composed: true,
+            }));
+        };
+        this._onReset = () => {
+            this.controls.forEach((control) => {
+                control.isError = false;
+            });
+            this.dispatchEvent(new CustomEvent('form-reset', { bubbles: true, composed: true }));
+        };
+    }
+    /** Renders to light DOM so child controls are owned by the form. */
+    createRenderRoot() {
+        return this;
+    }
+    /**
+     * Renders nothing. The `<form>` and the author's controls are managed
+     * imperatively in `_ensureForm` so that Lit never owns, and therefore never
+     * clears, the light-DOM children.
+     */
+    render() {
+        return html ``;
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this._ensureForm();
+        this._adoptStyles();
+    }
+    /**
+     * Installs the component's stylesheet into its root node.
+     *
+     * Light-DOM components have no shadow root, so Lit never attaches
+     * `static styles`. The sheet is instead adopted by the document (or the
+     * enclosing shadow root, when the form is composed inside one) exactly
+     * once per root. Falls back to appending a `<style>` element where
+     * constructable stylesheets are unavailable (e.g. jsdom).
+     */
+    _adoptStyles() {
+        const root = this.getRootNode();
+        const sheet = styles.styleSheet;
+        if (sheet && 'adoptedStyleSheets' in root) {
+            if (!root.adoptedStyleSheets.includes(sheet)) {
+                root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];
+            }
+            return;
+        }
+        const target = root instanceof Document ? root.head : root;
+        if (!target.querySelector('style[data-cre8-form]')) {
+            const styleEl = document.createElement('style');
+            styleEl.setAttribute('data-cre8-form', '');
+            styleEl.textContent = styles.cssText;
+            target.appendChild(styleEl);
+        }
+    }
+    updated(changed) {
+        super.updated(changed);
+        if (changed.has('disabled')) {
+            this.controls.forEach((control) => {
+                control.disabled = this.disabled;
+            });
+        }
+    }
+    _ensureForm() {
+        if (this._form?.isConnected) {
+            return;
+        }
+        const form = document.createElement('form');
+        form.className = 'cre8-c-form';
+        // We own the validation UX. Without this the browser blocks submission
+        // on invalid controls and our submit handler never runs.
+        form.noValidate = true;
+        while (this.firstChild) {
+            form.appendChild(this.firstChild);
+        }
+        this.appendChild(form);
+        this._form = form;
+        form.addEventListener('submit', this._onSubmit);
+        form.addEventListener('reset', this._onReset);
+    }
+    /** The wrapped native form element. */
+    get form() {
+        return this._form;
+    }
+    /**
+     * Every form-associated Cre8 control owned by this form, in document order.
+     * Reaches through layout components because slotting does not move nodes
+     * out of the light-DOM tree.
+     */
+    get controls() {
+        if (!this._form) {
+            return [];
+        }
+        return Array.from(this.querySelectorAll('*')).filter((el) => el._internals?.form === this._form);
+    }
+    /** The form's current values, derived from FormData. */
+    get values() {
+        const out = {};
+        if (!this._form) {
+            return out;
+        }
+        for (const [key, value] of new FormData(this._form).entries()) {
+            const existing = out[key];
+            if (existing === undefined) {
+                out[key] = value;
+            }
+            else if (Array.isArray(existing)) {
+                existing.push(value);
+            }
+            else {
+                out[key] = [existing, value];
+            }
+        }
+        return out;
+    }
+    /** Submits the form, running aggregate validation unless `novalidate`. */
+    submit() {
+        this._form?.requestSubmit();
+    }
+    /** Resets the form to its default values. */
+    reset() {
+        this._form?.reset();
+    }
+    /** True when every control is valid. Does not change error state. */
+    checkValidity() {
+        return this.controls.every((control) => control.checkValidity());
+    }
+    /**
+     * Like `checkValidity`, but flags errors and focuses the first invalid
+     * control.
+     */
+    reportValidity() {
+        return this._validate();
+    }
+    /**
+     * Checks every control, reflects the result onto their `isError` state,
+     * focuses the first invalid one, and emits `form-invalid`.
+     * Returns true when the form is valid.
+     */
+    _validate() {
+        const controls = this.controls;
+        const invalid = controls.filter((control) => !control.checkValidity());
+        controls.forEach((control) => {
+            control.isError = invalid.includes(control);
+        });
+        if (invalid.length === 0) {
+            return true;
+        }
+        invalid[0].focus?.();
+        this.dispatchEvent(new CustomEvent('form-invalid', {
+            detail: { invalidControls: invalid },
+            bubbles: true,
+            composed: true,
+        }));
+        return false;
+    }
+}
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Form.prototype, "novalidate", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8Form.prototype, "disabled", void 0);
+if (customElements.get('cre8-form') === undefined) {
+    customElements.define('cre8-form', Cre8Form);
+}
+export default Cre8Form;
+//# sourceMappingURL=form.js.map

package/lib/components/form/form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../../components/form/form.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, type PropertyValues } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport type { Cre8FormElement } from '../cre8-form-element';\nimport styles from './form.styles';\n\n/**\n * The form component groups form-associated Cre8 controls, aggregates their\n * validation on submit, and orchestrates submit and reset.\n *\n * # How to Use\n * 1. Place any Cre8 form controls inside `cre8-form`. They may be nested inside\n *    layout components such as `cre8-grid` or `cre8-layout`.\n * 2. Add a `cre8-button` with `type=\"submit\"` to submit the form.\n * 3. Listen for `form-submit` to receive the collected `FormData`.\n *\n * Note: this component renders to light DOM. A form-associated control's form\n * owner is the nearest `<form>` in its own node tree, so a shadow-DOM `<form>`\n * would own nothing and `new FormData(form)` would come back empty.\n *\n * @slot The form's controls and layout.\n */\nexport class Cre8Form extends Cre8Element {\n    /**\n     * Skips aggregate validation on submit.\n     */\n    @property({ type: Boolean, reflect: true })\n        novalidate?: boolean;\n\n    /**\n     * Disables every control in the form, for example while submitting.\n     */\n    @property({ type: Boolean, reflect: true })\n        disabled?: boolean;\n\n    private _form: HTMLFormElement | null = null;\n\n    /** Renders to light DOM so child controls are owned by the form. */\n    createRenderRoot() {\n        return this;\n    }\n\n    /**\n     * Renders nothing. The `<form>` and the author's controls are managed\n     * imperatively in `_ensureForm` so that Lit never owns, and therefore never\n     * clears, the light-DOM children.\n     */\n    render() {\n        return html``;\n    }\n\n    connectedCallback() {\n        super.connectedCallback();\n        this._ensureForm();\n        this._adoptStyles();\n    }\n\n    /**\n     * Installs the component's stylesheet into its root node.\n     *\n     * Light-DOM components have no shadow root, so Lit never attaches\n     * `static styles`. The sheet is instead adopted by the document (or the\n     * enclosing shadow root, when the form is composed inside one) exactly\n     * once per root. Falls back to appending a `<style>` element where\n     * constructable stylesheets are unavailable (e.g. jsdom).\n     */\n    private _adoptStyles() {\n        const root = this.getRootNode() as Document | ShadowRoot;\n        const sheet = styles.styleSheet;\n\n        if (sheet && 'adoptedStyleSheets' in root) {\n            if (!root.adoptedStyleSheets.includes(sheet)) {\n                root.adoptedStyleSheets = [...root.adoptedStyleSheets, sheet];\n            }\n            return;\n        }\n\n        const target = root instanceof Document ? root.head : root;\n        if (!target.querySelector('style[data-cre8-form]')) {\n            const styleEl = document.createElement('style');\n            styleEl.setAttribute('data-cre8-form', '');\n            styleEl.textContent = styles.cssText;\n            target.appendChild(styleEl);\n        }\n    }\n\n    protected updated(changed: PropertyValues) {\n        super.updated(changed);\n        if (changed.has('disabled')) {\n            this.controls.forEach((control) => {\n                control.disabled = this.disabled;\n            });\n        }\n    }\n\n    private _ensureForm() {\n        if (this._form?.isConnected) {\n            return;\n        }\n\n        const form = document.createElement('form');\n        form.className = 'cre8-c-form';\n        // We own the validation UX. Without this the browser blocks submission\n        // on invalid controls and our submit handler never runs.\n        form.noValidate = true;\n\n        while (this.firstChild) {\n            form.appendChild(this.firstChild);\n        }\n\n        this.appendChild(form);\n        this._form = form;\n\n        form.addEventListener('submit', this._onSubmit);\n        form.addEventListener('reset', this._onReset);\n    }\n\n    /** The wrapped native form element. */\n    get form(): HTMLFormElement | null {\n        return this._form;\n    }\n\n    /**\n     * Every form-associated Cre8 control owned by this form, in document order.\n     * Reaches through layout components because slotting does not move nodes\n     * out of the light-DOM tree.\n     */\n    get controls(): Cre8FormElement[] {\n        if (!this._form) {\n            return [];\n        }\n        return Array.from(this.querySelectorAll<HTMLElement>('*')).filter(\n            (el) => (el as unknown as Cre8FormElement)._internals?.form === this._form\n        ) as unknown as Cre8FormElement[];\n    }\n\n    /** The form's current values, derived from FormData. */\n    get values(): Record<string, FormDataEntryValue | FormDataEntryValue[]> {\n        const out: Record<string, FormDataEntryValue | FormDataEntryValue[]> = {};\n        if (!this._form) {\n            return out;\n        }\n        for (const [key, value] of new FormData(this._form).entries()) {\n            const existing = out[key];\n            if (existing === undefined) {\n                out[key] = value;\n            } else if (Array.isArray(existing)) {\n                existing.push(value);\n            } else {\n                out[key] = [existing, value];\n            }\n        }\n        return out;\n    }\n\n    private _onSubmit = (event: Event) => {\n        // This component never performs a native navigation.\n        event.preventDefault();\n\n        if (!this.novalidate && !this._validate()) {\n            return;\n        }\n\n        this.dispatchEvent(\n            new CustomEvent('form-submit', {\n                detail: {\n                    data: new FormData(this._form!),\n                    values: this.values,\n                    form: this._form,\n                },\n                bubbles: true,\n                composed: true,\n            })\n        );\n    };\n\n    private _onReset = () => {\n        this.controls.forEach((control) => {\n            control.isError = false;\n        });\n        this.dispatchEvent(\n            new CustomEvent('form-reset', { bubbles: true, composed: true })\n        );\n    };\n\n    /** Submits the form, running aggregate validation unless `novalidate`. */\n    submit() {\n        this._form?.requestSubmit();\n    }\n\n    /** Resets the form to its default values. */\n    reset() {\n        this._form?.reset();\n    }\n\n    /** True when every control is valid. Does not change error state. */\n    checkValidity(): boolean {\n        return this.controls.every((control) => control.checkValidity());\n    }\n\n    /**\n     * Like `checkValidity`, but flags errors and focuses the first invalid\n     * control.\n     */\n    reportValidity(): boolean {\n        return this._validate();\n    }\n\n    /**\n     * Checks every control, reflects the result onto their `isError` state,\n     * focuses the first invalid one, and emits `form-invalid`.\n     * Returns true when the form is valid.\n     */\n    private _validate(): boolean {\n        const controls = this.controls;\n        const invalid = controls.filter((control) => !control.checkValidity());\n\n        controls.forEach((control) => {\n            control.isError = invalid.includes(control);\n        });\n\n        if (invalid.length === 0) {\n            return true;\n        }\n\n        (invalid[0] as unknown as HTMLElement).focus?.();\n        this.dispatchEvent(\n            new CustomEvent('form-invalid', {\n                detail: { invalidControls: invalid },\n                bubbles: true,\n                composed: true,\n            })\n        );\n        return false;\n    }\n}\n\nif (customElements.get('cre8-form') === undefined) {\n    customElements.define('cre8-form', Cre8Form);\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'cre8-form': Cre8Form;\n  }\n}\n\nexport default Cre8Form;\n"]}

package/lib/components/form/form.styles.d.ts

@@ -0,0 +1,14 @@
+/**
+ * Document-level styles for the light-DOM `cre8-form` component.
+ *
+ * Hand-authored rather than generated from a `.module.scss`: the SCSS
+ * pipeline prepends global theming boilerplate (body and utility rules)
+ * that is inert inside a shadow root but must never be adopted into the
+ * host document. Every selector here is scoped under `cre8-form`.
+ *
+ * `--cre8-form-gap` is the themeable knob for vertical rhythm between
+ * rows; it defaults to the 24px step of the spacing scale.
+ */
+declare const styles: import("lit").CSSResult;
+export default styles;
+//# sourceMappingURL=form.styles.d.ts.map

package/lib/components/form/form.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"form.styles.d.ts","sourceRoot":"","sources":["../../../components/form/form.styles.ts"],"names":[],"mappings":"AAEA;;;;;;;;;;GAUG;AACH,QAAA,MAAM,MAAM,yBAgBX,CAAC;AAEF,eAAe,MAAM,CAAC"}

package/lib/components/form/form.styles.js

@@ -0,0 +1,31 @@
+import { css } from 'lit';
+/**
+ * Document-level styles for the light-DOM `cre8-form` component.
+ *
+ * Hand-authored rather than generated from a `.module.scss`: the SCSS
+ * pipeline prepends global theming boilerplate (body and utility rules)
+ * that is inert inside a shadow root but must never be adopted into the
+ * host document. Every selector here is scoped under `cre8-form`.
+ *
+ * `--cre8-form-gap` is the themeable knob for vertical rhythm between
+ * rows; it defaults to the 24px step of the spacing scale.
+ */
+const styles = css `
+  cre8-form {
+    display: block;
+  }
+
+  cre8-form .cre8-c-form {
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+    gap: var(--cre8-form-gap, 1.5rem);
+  }
+
+  cre8-form .cre8-c-form > cre8-button,
+  cre8-form .cre8-c-form > cre8-button-group:not([fullwidth]) {
+    align-self: flex-start;
+  }
+`;
+export default styles;
+//# sourceMappingURL=form.styles.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"form.styles.js","sourceRoot":"","sources":["../../../components/form/form.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;;;;;GAUG;AACH,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;CAgBjB,CAAC;AAEF,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\n\n/**\n * Document-level styles for the light-DOM `cre8-form` component.\n *\n * Hand-authored rather than generated from a `.module.scss`: the SCSS\n * pipeline prepends global theming boilerplate (body and utility rules)\n * that is inert inside a shadow root but must never be adopted into the\n * host document. Every selector here is scoped under `cre8-form`.\n *\n * `--cre8-form-gap` is the themeable knob for vertical rhythm between\n * rows; it defaults to the 24px step of the spacing scale.\n */\nconst styles = css`\n  cre8-form {\n    display: block;\n  }\n\n  cre8-form .cre8-c-form {\n    display: flex;\n    flex-direction: column;\n    align-items: stretch;\n    gap: var(--cre8-form-gap, 1.5rem);\n  }\n\n  cre8-form .cre8-c-form > cre8-button,\n  cre8-form .cre8-c-form > cre8-button-group:not([fullwidth]) {\n    align-self: flex-start;\n  }\n`;\n\nexport default styles;\n"]}

package/lib/{cre8-form-element-BymRdQUC.js → cre8-form-element-CCzBYtDm.js}

@@ -1,11 +1,11 @@
-import { property as h } from "lit/decorators.js";
+import { property as u } from "lit/decorators.js";
 import { Cre8Element as f } from "./components/cre8-element.js";
-let b = class extends Event {
+let v = class extends Event {
   constructor(t, s, i, e) {
     super("context-request", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = s, this.callback = i, this.subscribe = e ?? !1;
   }
 };
-class v {
+class b {
   get value() {
     return this.o;
   }
@@ -33,12 +33,12 @@ class v {
     this.subscriptions.clear();
   }
 }
-let x = class extends Event {
+let m = class extends Event {
   constructor(t, s) {
     super("context-provider", { bubbles: !0, composed: !0 }), this.context = t, this.contextTarget = s;
   }
 };
-class d extends v {
+class d extends b {
   constructor(t, s, i) {
     super(s.context !== void 0 ? s.initialValue : i), this.onContextRequest = (e) => {
       if (e.context !== this.context) return;
@@ -47,7 +47,7 @@ class d extends v {
     }, this.onProviderRequest = (e) => {
       if (e.context !== this.context || (e.contextTarget ?? e.composedPath()[0]) === this.host) return;
       const a = /* @__PURE__ */ new Set();
-      for (const [r, { consumerHost: l }] of this.subscriptions) a.has(r) || (a.add(r), l.dispatchEvent(new b(this.context, l, r, !0)));
+      for (const [r, { consumerHost: l }] of this.subscriptions) a.has(r) || (a.add(r), l.dispatchEvent(new v(this.context, l, r, !0)));
       e.stopPropagation();
     }, this.host = t, s.context !== void 0 ? this.context = s.context : this.context = s, this.attachListeners(), this.host.addController?.(this);
   }
@@ -55,7 +55,7 @@ class d extends v {
     this.host.addEventListener("context-request", this.onContextRequest), this.host.addEventListener("context-provider", this.onProviderRequest);
   }
   hostConnected() {
-    this.host.dispatchEvent(new x(this.context, this.host));
+    this.host.dispatchEvent(new m(this.context, this.host));
   }
 }
 function p({ context: n }) {
@@ -91,15 +91,15 @@ function p({ context: n }) {
     }
   };
 }
-const m = /* @__PURE__ */ Symbol("cre8-form-internals"), y = /* @__PURE__ */ Symbol("cre8-form-state");
-var V = Object.defineProperty, _ = Object.getOwnPropertyDescriptor, u = (n, t, s, i) => {
-  for (var e = i > 1 ? void 0 : i ? _(t, s) : t, a = n.length - 1, r; a >= 0; a--)
+const y = /* @__PURE__ */ Symbol("cre8-form-internals"), x = /* @__PURE__ */ Symbol("cre8-form-state");
+var g = Object.defineProperty, V = Object.getOwnPropertyDescriptor, h = (n, t, s, i) => {
+  for (var e = i > 1 ? void 0 : i ? V(t, s) : t, a = n.length - 1, r; a >= 0; a--)
     (r = n[a]) && (e = (i ? r(t, s, e) : r(e)) || e);
-  return i && e && V(t, s, e), e;
+  return i && e && g(t, s, e), e;
 };
 const c = class c extends f {
   constructor() {
-    super(), this.internalValue = "", this.defaultValue = "", this._formState = {
+    super(), this.internalValue = "", this.hasCustomError = !1, this.defaultValue = "", this._formState = {
       value: "",
       disabled: !1,
       required: !1,
@@ -141,6 +141,59 @@ const c = class c extends f {
   updateField() {
     this.field && this.internalValue !== void 0 && (this.field.value = this.internalValue ?? "");
   }
+  /**
+   * Moves focus to the underlying field.
+   *
+   * Custom elements are not focusable by default, so without this calling
+   * `focus()` on the host silently did nothing and focus stayed where it was.
+   * Anything that needs to move focus to a control - such as a form focusing
+   * its first invalid field - depends on this.
+   */
+  focus(t) {
+    if (this.field) {
+      this.field.focus(t);
+      return;
+    }
+    super.focus(t);
+  }
+  /**
+   * Forwards the underlying field's constraint validity to ElementInternals.
+   *
+   * The inner field renders the constraint attributes (`required`, `pattern`,
+   * `min`, `max`, ...), so the browser already computes a correct
+   * ValidityState for it. Without this the host element's own
+   * `checkValidity()` always returned true and `required` was effectively
+   * ignored by any form containing it.
+   *
+   * A message set through `setCustomValidity` takes precedence and is left
+   * untouched.
+   */
+  syncValidity() {
+    if (!this._internals || !this.field || this.hasCustomError)
+      return;
+    const t = this.field.validity;
+    if (t.valid) {
+      this._internals.setValidity({});
+      return;
+    }
+    const s = {
+      badInput: t.badInput,
+      customError: t.customError,
+      patternMismatch: t.patternMismatch,
+      rangeOverflow: t.rangeOverflow,
+      rangeUnderflow: t.rangeUnderflow,
+      stepMismatch: t.stepMismatch,
+      tooLong: t.tooLong,
+      tooShort: t.tooShort,
+      typeMismatch: t.typeMismatch,
+      valueMissing: t.valueMissing
+    };
+    this._internals.setValidity(
+      s,
+      this.field.validationMessage || "This field is invalid.",
+      this.field
+    );
+  }
   /**
    * Lifecycle hook called after first render
    */
@@ -151,7 +204,7 @@ const c = class c extends f {
    * Called when properties change
    */
   updated(t) {
-    super.updated(t), (t.has("disabled") || t.has("required") || t.has("isError") || t.has("isSuccess") || t.has("name")) && this.updateFormState();
+    super.updated(t), (t.has("disabled") || t.has("required") || t.has("isError") || t.has("isSuccess") || t.has("name")) && this.updateFormState(), this.syncValidity();
   }
   /**
    * Form lifecycle callback - called when the form is reset
@@ -211,37 +264,37 @@ const c = class c extends f {
    * Sets a custom validity message
    */
   setCustomValidity(t) {
-    this._internals && this.field && (t ? this._internals.setValidity({ customError: !0 }, t, this.field) : this._internals.setValidity({}));
+    this._internals && this.field && (t ? (this.hasCustomError = !0, this._internals.setValidity({ customError: !0 }, t, this.field)) : (this.hasCustomError = !1, this.syncValidity()));
   }
 };
 c.formAssociated = !0;
 let o = c;
-u([
-  p({ context: m })
-], o.prototype, "_internals", 2);
-u([
+h([
   p({ context: y })
+], o.prototype, "_internals", 2);
+h([
+  p({ context: x })
 ], o.prototype, "_formState", 2);
-u([
-  h()
+h([
+  u()
 ], o.prototype, "name", 2);
-u([
-  h({ type: Boolean, reflect: !0 })
+h([
+  u({ type: Boolean, reflect: !0 })
 ], o.prototype, "disabled", 2);
-u([
-  h({ type: Boolean, reflect: !0 })
+h([
+  u({ type: Boolean, reflect: !0 })
 ], o.prototype, "required", 2);
-u([
-  h({ type: Boolean, reflect: !0 })
+h([
+  u({ type: Boolean, reflect: !0 })
 ], o.prototype, "isError", 2);
-u([
-  h({ type: Boolean, reflect: !0 })
+h([
+  u({ type: Boolean, reflect: !0 })
 ], o.prototype, "isSuccess", 2);
-u([
-  h()
+h([
+  u()
 ], o.prototype, "value", 1);
 export {
   o as C,
-  m as f,
-  b as s
+  y as f,
+  v as s
 };