npm - @tmorrow/cre8-wc - Versions diffs - 2.0.4 → 2.0.5 - Mend

@tmorrow/cre8-wc 2.0.4 → 2.0.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (194) hide show

package/lib/components/button/button.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../components/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAi3BjB,CAAC;AACF,eAAe,MAAM,CAAC","sourcesContent":["import { css } from \"lit\";\n\nconst styles = css`\n@import '../../design-tokens/core/scss/theming/component';\n\n:host {\n display: inline-flex;\n}\n:host([fullWidth]) {\n display: flex;\n\n}\n/*\n 1) Button or link that has functionality to it\n /\n\n/\n Primary button\n /\n.cre8-c-button {\n @include cre8-typography-label-default();\n width: var(--cre8-button-width, auto);\n height: var(--cre8-button-height, auto);\n min-width: var(--cre8-button-min-width, auto);\n min-height: var(--cre8-button-min-height, auto);\n justify-content: center;\n text-align: center;\n margin-top: var( --cre8-button-margin-top, 0);\n margin-bottom: var( --cre8-button-margin-bottom, 0);\n margin-left: var( --cre8-button-margin-left, 0);\n margin-right: var( --cre8-button-margin-right, 0);\n display: inline-flex;\n align-items: center;\n border-width: var(--cre8-border-width-button-default);\n box-shadow: var(--cre8-shadow-button);\n padding-top: var(--cre8-button-padding-vertical-medium);\n padding-right: var(--cre8-button-padding-horizontal-medium);\n padding-bottom: var(--cre8-button-padding-vertical-medium);\n padding-left: var(--cre8-button-padding-horizontal-medium);\n margin: 0;\n cursor: pointer;\n border-style: var(--cre8-border-style-default);\n transition: revert;\n transform: revert;\n white-space: nowrap;\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n border-style: var(--cre8-border-style-default);\n box-shadow: none;\n transform: revert;\n transition: revert;\n }\n &.cre8-c-button--primary {\n background: var(--cre8-color-button-primary-bg);\n border-width: var(--cre8-border-width-button-default);\n border-color: var(--cre8-color-button-primary-border);\n border-radius: var(--cre8-border-radius-button);\n box-shadow: var(--cre8-shadow-button);\n color: var(--cre8-color-button-primary-content);\n --cre8-icon-fill: var(--cre8-color-button-primary-content);\n &:hover,\n &:focus {\n box-shadow: none;\n --cre8-icon-fill: var(--cre8-color-button-primary-content-hover);\n color: var(--cre8-color-button-primary-content-hover);\n border-color: var(--cre8-color-button-primary-border-hover);\n background: var(--cre8-color-button-primary-bg-hover);\n text-decoration: none;\n &:focus {\n @includefocus();\n }\n }\n &:focus-visible,\n &:active,\n &.cre8-c-button--loading {\n box-shadow: none;\n color: var(--cre8-color-button-primary-content-active);\n --cre8-icon-fill: var(--cre8-color-button-primary-content-active);\n border-color: var(--cre8-color-button-primary-border-active);\n background-color: var(--cre8-color-button-primary-bg-active);\n }\n &:focus-visible{\n @includefocus();\n }\n &.cre8-c-button--loading{\n cursor: not-allowed;\n }\n /\n Disabled primary and secondary button\n /\n &:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-primary-bg-disabled);\n border-color: var(--cre8-color-button-primary-border-disabled);\n color: var(--cre8-color-button-primary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-primary-content-disabled);\n cursor: not-allowed;\n outline: none;\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-primary-bg-disabled);\n border-color: var(--cre8-color-button-primary-border-disabled);\n color: var(--cre8-color-button-primary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-primary-content-disabled);\n }\n }\n}\n\n/\n Primary button inverse\n/\n&.cre8-c-button--primary.cre8-c-button--inverse {\nbackground: var(--cre8-color-button-primary-inverse-bg);\nborder-width: var(--cre8-border-width-button-default);\nborder-color: var(--cre8-color-button-primary-inverse-border);\nborder-radius: var(--cre8-border-radius-button);\nbox-shadow: var(--cre8-shadow-button);\ncolor: var(--cre8-color-button-primary-inverse-content);\n--cre8-icon-fill: var(--cre8-color-button-primary-inverse-content);\n&:hover,\n&:focus {\n box-shadow: none;\n --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-hover);\n color: var(--cre8-color-button-primary-inverse-content-hover);\n border-color: var(--cre8-color-button-primary-inverse-border-hover);\n background: var(--cre8-color-button-primary-inverse-bg-hover);\n text-decoration: none;\n &:focus {\n @includefocus();\n }\n}\n&:focus-visible,\n&:active,\n&.cre8-c-button--loading {\n box-shadow: none;\n color: var(--cre8-color-button-primary-inverse-content-active);\n --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-active);\n border-color: var(--cre8-color-button-primary-inverse-border-active);\n background-color: var(--cre8-color-button-primary-inverse-bg-active);\n}\n&:focus-visible{\n @includefocus();\n}\n&.cre8-c-button--loading{\n cursor: not-allowed;\n}\n\n&:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-primary-inverse-bg-disabled);\n border-color: var(--cre8-color-button-primary-inverse-border-disabled);\n color: var(--cre8-color-button-primary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-disabled);\n cursor: not-allowed;\n outline: none;\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-primary-inverse-bg-disabled);\n border-color: var(--cre8-color-button-primary-inverse-border-disabled);\n color: var(--cre8-color-button-primary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-disabled);\n }\n}\n}\n\n/\n Secondary button\n * The icon button shares the styles of the standard secondary button\n /\n &.cre8-c-button--secondary {\n background-color: var(--cre8-color-button-secondary-bg);\n border-color: var(--cre8-color-button-secondary-border);\n color: var(--cre8-color-button-secondary-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content);\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n\n &:hover,\n &:focus {\n background-color: var(--cre8-color-button-secondary-bg-hover);\n border-color: var(--cre8-color-button-secondary-border-hover);\n color: var(--cre8-color-button-secondary-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-hover);\n &:focus {\n @includefocus();\n }\n }\n &:focus-visible,\n &:active,\n &.cre8-c-button--loading {\n transition: none;\n transform: none;\n background-color: var(--cre8-color-button-secondary-bg-active);\n border-color: var(--cre8-color-button-secondary-border-active);\n color: var(--cre8-color-button-secondary-content-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);\n }\n &:focus-visible {\n @includefocus();\n }\n &.cre8-c-button--loading {\n cursor: not-allowed;\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-secondary-bg-disabled);\n border-color: var(--cre8-color-button-secondary-border-disabled);\n color: var(--cre8-color-button-secondary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-disabled);\n outline: none;\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n cursor: not-allowed;\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-secondary-bg-disabled);\n border-color: var(--cre8-color-button-secondary-border-disabled);\n color: var(--cre8-color-button-secondary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-disabled);\n }\n }\n}\n\n /\n Secondary button neutral\n /\n &.cre8-c-button--secondary.cre8-c-button--neutral {\n background-color: var(--cre8-color-button-secondary-neutral-bg);\n border-color: var(--cre8-color-button-secondary-neutral-border);\n color: var(--cre8-color-button-secondary-neutral-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content);\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n\n &:hover,\n &:focus {\n background-color: var(--cre8-color-button-secondary-neutral-bg-hover);\n border-color: var(--cre8-color-button-secondary-neutral-border-hover);\n color: var(--cre8-color-button-secondary-neutral-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-hover);\n &:focus {\n @includefocus();\n }\n }\n &:focus-visible,\n &:active,\n &.cre8-c-button--loading {\n transition: none;\n transform: none;\n background-color: var(--cre8-color-button-secondary-neutral-bg-active);\n border-color: var(--cre8-color-button-secondary-neutral-border-active);\n color: var(--cre8-color-button-secondary-neutral-content-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-active);\n }\n &:focus-visible {\n @includefocus();\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-secondary-neutral-bg-disabled);\n border-color: var(--cre8-color-button-secondary-neutral-border-disabled);\n color: var(--cre8-color-button-secondary-neutral-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-disabled);\n outline: none;\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n cursor: not-allowed;\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-secondary-neutral-bg-disabled);\n border-color: var(--cre8-color-button-secondary-neutral-border-disabled);\n color: var(--cre8-color-button-secondary-neutral-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-disabled);\n }\n }\n }\n\n/\n Secondary button inverse\n /\n &.cre8-c-button--secondary.cre8-c-button--inverse {\n background-color: var(--cre8-color-button-secondary-inverse-bg);\n border-color: var(--cre8-color-button-secondary-inverse-border);\n color: var(--cre8-color-button-secondary-inverse-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content);\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n\n&:hover,\n&:focus {\n background-color: var(--cre8-color-button-secondary-inverse-bg-hover);\n border-color: var(--cre8-color-button-secondary-inverse-border-hover);\n color: var(--cre8-color-button-secondary-inverse-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-hover);\n &:focus {\n @includefocus();\n }\n}\n&:focus-visible,\n&:active,\n&.cre8-c-button--loading {\n transition: none;\n transform: none;\n background-color: var(--cre8-color-button-secondary-inverse-bg-active);\n border-color: var(--cre8-color-button-secondary-inverse-border-active);\n color: var(--cre8-color-button-secondary-inverse-content-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-active);\n}\n&:focus-visible {\n @includefocus();\n}\n\n&:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-secondary-inverse-bg-disabled);\n border-color: var(--cre8-color-button-secondary-inverse-border-disabled);\n color: var(--cre8-color-button-secondary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-disabled);\n outline: none;\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n cursor: not-allowed;\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-secondary-inverse-bg-disabled);\n border-color: var(--cre8-color-button-secondary-inverse-border-disabled);\n color: var(--cre8-color-button-secondary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-disabled);\n }\n}\n}\n\n /\n Secondary button neutral inverse\n /\n &.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse {\n background-color: var(--cre8-color-button-secondary-neutral-inverse-bg);\n border-color: var(--cre8-color-button-secondary-neutral-inverse-border);\n color: var(--cre8-color-button-secondary-neutral-inverse-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content);\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n\n&:hover,\n&:focus {\n @includefocus();\n background-color: var(--cre8-color-button-secondary-neutral-bg-active);\n border-color: var(--cre8-color-button-secondary-neutral-inverse-border-active);\n outline-color: var(--cre8-color-button-secondary-neutral-inverse-outline);\n color: var(--cre8-color-button-secondary-neutral-inverse-content-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-active);\n}\n\n&:focus-visible,\n&:active,\n&.cre8-c-button--loading {\n transition: none;\n transform: none;\n background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-active);\n border-color: var(--cre8-color-button-secondary-neutral-inverse-border-active);\n color: var(--cre8-color-button-secondary-neutral-inverse-content-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-active);\n}\n&:focus-visible {\n @includefocus();\n}\n\n&:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-disabled);\n border-color: var(--cre8-color-button-secondary-neutral-inverse-border-disabled);\n color: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);\n outline: none;\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n cursor: not-allowed;\n &:hover,\n &:focus,\n &:active,\n &:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-disabled);\n border-color: var(--cre8-color-button-secondary-neutral-inverse-border-disabled);\n color: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);\n }\n}\n}\n\n /\n Tertiary button\n /\n &.cre8-c-button--tertiary {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-bg);\n border-width: var(--cre8-border-width-button-default);\n border-color: var(--cre8-color-button-tertiary-border);\n color: var(--cre8-color-button-tertiary-content);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-content);\n box-shadow: none;\n &:hover,\n &:focus {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-bg-hover);\n border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);\n border-color: var(--cre8-color-button-tertiary-border-hover);\n color: var(--cre8-color-button-tertiary-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-content-hover);\n &:focus {\n @includefocusTertiary();\n }\n }\n\n &:focus-visible,\n &:active,\n &.cre8-c-button--loading {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-bg-active);\n border-color: var(--cre8-color-button-tertiary-border-active);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-tertiary-content-active);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-content-active);\n }\n &:focus-visible {\n @includefocusTertiary();\n }\n &.cre8-c-button--loading {\n cursor: not-allowed;\n }\n &:disabled {\n background-color: var(--cre8-color-button-tertiary-bg-disabled);\n border-color: transparent;\n color: var(--cre8-color-button-tertiary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);\n outline: none;\n box-shadow: none;\n cursor: not-allowed;\n\n &:hover,\n &:focus {\n outline: none;\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-bg-disabled);\n color: var(--cre8-color-button-tertiary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);\n }\n &:active,\n &:focus-visible {\n outline: none;\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-bg-disabled);\n color: var(--cre8-color-button-tertiary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);\n }\n }\n}\n\n /\n Tertiary button neutral\n /\n &.cre8-c-button--tertiary.cre8-c-button--neutral {\n background-color: var(--cre8-color-button-tertiary-neutral-bg);\n border-color: var(--cre8-color-button-tertiary-border);\n color: var(--cre8-color-button-tertiary-neutral-content);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content);\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n\n &:hover,\n &:focus {\n background-color: var(--cre8-color-button-tertiary-neutral-bg-hover);\n border-color: var(--cre8-color-button-tertiary-neutral-border-hover);\n color: var(--cre8-color-button-tertiary-neutral-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-hover);\n outline-color: var(--cre8-color-button-tertiary-neutral-outline);\n }\n\n &:focus-visible,\n &:active,\n &.cre8-c-button--loading {\n transition: none;\n transform: none;\n background-color: var(--cre8-color-button-tertiary-neutral-bg-active);\n border-color: var(--cre8-color-button-tertiary-neutral-border-active);\n color: var(--cre8-color-button-tertiary-neutral-content-active);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-active);\n }\n\n &:focus-visible {\n @includefocus();\n }\n\n &:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-neutral-bg-disabled);\n border-color: var(--cre8-color-button-tertiary-neutral-border-disabled);\n color: var(--cre8-color-button-tertiary-neutral-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-disabled);\n outline: none;\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n\n cursor: not-allowed;\n }\n }\n\n/\n Tertiary button inverse\n /\n &.cre8-c-button--tertiary.cre8-c-button--inverse {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-inverse-bg);\n border-width: var(--cre8-border-width-button-default);\n border-color: var(--cre8-color-button-tertiary-inverse-border);\n color: var(--cre8-color-button-tertiary-inverse-content);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content);\n box-shadow: none;\n\n &:hover,\n &:focus {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-inverse-bg-hover);\n border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);\n border-color: var(--cre8-color-button-tertiary-inverse-border-hover);\n color: var(--cre8-color-button-tertiary-inverse-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-hover);\n outline-color: var(--cre8-color-button-tertiary-inverse-outline);\n }\n\n&:focus-visible,\n&:active,\n&.cre8-c-button--loading {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-inverse-bg-active);\n border-color: var(--cre8-color-button-tertiary-inverse-border-active);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-tertiary-inverse-content-active);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-active);\n outline-color: var(--cre8-color-button-tertiary-inverse-outline);\n}\n\n&.cre8-c-button--loading {\n cursor: not-allowed;\n}\n&:disabled {\n background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);\n border-color: transparent;\n color: var(--cre8-color-button-tertiary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);\n outline: none;\n box-shadow: none;\n cursor: not-allowed;\n\n &:hover,\n &:focus {\n outline: none;\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);\n color: var(--cre8-color-button-tertiary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);\n }\n &:active,\n &:focus-visible {\n outline: none;\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);\n color: var(--cre8-color-button-tertiary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);\n }\n}\n}\n\n /\n Tertiary Neutral button inverse\n /\n &.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-tertiary-neutral-inverse-content);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content);\n box-shadow: none;\n\n &:hover,\n &:focus {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-hover);\n border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);\n border-color: var(--cre8-color-button-tertiary-neutral-inverse-border-hover);\n color: var(--cre8-color-button-tertiary-neutral-inverse-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-hover);\n outline-color: var(--cre8-color-button-tertiary-neutral-inverse-outline);\n }\n\n &:focus-visible,\n &:active,\n &.cre8-c-button--loading {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-active);\n border-color: var(--cre8-color-button-tertiary-neutral-inverse-border-active);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-tertiary-neutral-inverse-content-active);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-active);\n outline-color: var(--cre8-color-button-tertiary-neutral-inverse-outline);\n }\n\n &.cre8-c-button--loading {\n cursor: not-allowed;\n }\n\n &:disabled {\n background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-disabled);\n border-color: transparent;\n color: var(--cre8-color-button-tertiary-neutral-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-disabled);\n outline: none;\n box-shadow: none;\n cursor: not-allowed;\n }\n }\n\n &.cre8-c-button.cre8-c-button--secondary.cre8-c-button--split-button-text {\n border-radius: var(--cre8-border-radius-button) var(--cre8-border-radius-none) var(--cre8-border-radius-none) var(--cre8-border-radius-button);\n border-color: var(--cre8-color-button-secondary-border);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-secondary-content);\n &:active,\n &:focus-visible {\n outline: none;\n }\n &.cre8-c-button--lg {\n padding: var(--cre8-button-padding-vertical-large) var(--cre8-button-padding-horizontal-large);\n }\n &.cre8-c-button--sm {\n padding: var(--cre8-button-padding-vertical-small) var(--cre8-button-padding-horizontal-small);\n }\n }\n\n &.cre8-c-button.cre8-c-button--icon-only.cre8-c-button--split-button-caret {\n padding: var(--cre8-button-padding-vertical-medium);\n border-radius: var(--cre8-border-radius-none) var(--cre8-border-radius-button) var(--cre8-border-radius-button) var(--cre8-border-radius-none);\n height: 100%;\n border-left: none !important ;\n border-collapse: collapse;\n background: var(--cre8-color-button-secondary-bg);\n border-color: var(--cre8-color-button-secondary-border);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-secondary-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content);\n\n &:hover,\n &:focus {\n background: var(--cre8-color-button-secondary-bg-hover);\n border-color: var(--cre8-color-button-secondary-border-hover);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-hover);\n outline: none;\n border-left: none;\n border-collapse: collapse;\n }\n &:active,\n &:focus-visible {\n background: var(--cre8-color-button-secondary-bg-active);\n border-color: var(--cre8-color-button-secondary-border-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);\n outline: none;\n border-left: none;\n border-collapse: collapse;\n }\n }\n}\n\n.cre8-c-button--lg {\n padding: var(--cre8-button-padding-vertical-large);\n}\n.cre8-c-button--sm {\n padding: var(--cre8-button-padding-vertical-small);\n}\n\n.cre8-c-button--icon-only {\n padding: var(--cre8-button-padding-vertical-small);\n color: var(--cre8-icon-fill, currentColor);\n}\n\n/\n Full-width button\n /\n.cre8-c-button--full-width {\n width: 100%;\n display: flex;\n}\n\n/\n Small button\n /\n.cre8-c-button--sm {\n @include cre8-typography-label-small();\n padding-top: var(--cre8-button-padding-vertical-small);\n padding-right: var(--cre8-button-padding-horizontal-small);\n padding-bottom: var(--cre8-button-padding-vertical-small);\n padding-left: var(--cre8-button-padding-horizontal-small);\n}\n\n/\n Small button sized for icon only\n /\n .cre8-c-button--sm.cre8-c-button--icon-only {\n @include cre8-typography-label-small();\n padding-top: var(--cre8-button-padding-vertical-small-icon-only);\n padding-right: var(--cre8-button-padding-horizontal-small-icon-only);\n padding-bottom: var(--cre8-button-padding-vertical-small-icon-only);\n padding-left: var(--cre8-button-padding-horizontal-small-icon-only);\n}\n\n/\n Large button\n /\n.cre8-c-button--lg {\n @include cre8-typography-label-large();\n padding-top: var(--cre8-button-padding-vertical-large);\n padding-right: var(--cre8-button-padding-horizontal-large);\n padding-bottom: var(--cre8-button-padding-vertical-large);\n padding-left: var(--cre8-button-padding-horizontal-large);\n}\n\n/\n Large button sized for icon only\n /\n .cre8-c-button--lg.cre8-c-button--icon-only {\n @include cre8-typography-label-large();\n padding-top: var(--cre8-button-padding-vertical-large-icon-only);\n padding-right: var(--cre8-button-padding-horizontal-large-icon-only);\n padding-bottom: var(--cre8-button-padding-vertical-large-icon-only);\n padding-left: var(--cre8-button-padding-horizontal-large-icon-only);\n}\n\n/\n Icon within small button\n /\n.cre8-c-button--sm cre8-icon-legacy {\n --cre8-icon-height: var(--cre8-icon-size-small);\n --cre8-icon-width: var(--cre8-icon-size-small);\n}\n\n.cre8-c-button--sm cre8-icon {\n svg {\n height: size(1.75);\n width: size(1.75);\n }\n}\n\n/\n Icon within large button\n /\n.cre8-c-button--lg cre8-icon-legacy {\n --cre8-icon-height: var(--cre8-icon-size-large);\n --cre8-icon-width: var(--cre8-icon-size-large);\n}\n\n.cre8-c-button--lg cre8-icon {\n svg {\n height: size(2.25);\n width: size(2.25);\n }\n}\n\n::slotted() {\n margin-right: 0;\n}\n/*\n Button icon directly before button text\n /\n\ncre8-icon-legacy + .cre8-c-button__text:not(.cre8-u-is-vishidden) {\n margin-left: size(1);\n}\n\ncre8-icon + .cre8-c-button__text:not(.cre8-u-is-vishidden) {\n margin-left: size(1);\n}\n\n/\n Button icon directly after button text\n /\n.cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon-legacy {\n margin-left: size(1);\n}\n\n.cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon {\n margin-left: size(1);\n}\n/\n Button icon only\n /\n.cre8-c-button:has(.cre8-c-button__text.cre8-u-is-vishidden) + cre8-icon-legacy {\n border-radius: var(--cre8-border-radius-button);\n}\n\n.cre8-c-button:has(.cre8-c-button__text.cre8-u-is-vishidden) + cre8-icon {\n border-radius: var(--cre8-border-radius-button);\n}\n\n.cre8-c-button__text.cre8-u-is-vishidden + cre8-icon-legacy {\n margin-left: 0px;\n margin-right: 0px;\n}\n\n.cre8-c-button__text.cre8-u-is-vishidden + cre8-icon {\n margin-left: 0px;\n margin-right: 0px;\n}\n\n.cre8-c-button__text.cre8-u-is-vishidden {\n @include visuallyHidden();\n}\n\n.cre8-c-button--primary.cre8-c-button--loading {\n --cre8-icon-fill: var(--cre8-color-content-knockout);\n}\n.cre8-c-button--secondary.cre8-c-button--loading,\n.cre8-c-button--tertiary.cre8-c-button--loading {\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);\n}\n\n/\n Aria live span\n */\n.cre8-u-is-vishidden {\n --cre8-icon-height: 0px;\n --cre8-icon-width: 0px;\n max-width: fit-content;\n min-width: 0px;\n width: auto;\n height: auto;\n max-height: fit-content;\n min-width: 0px;\n\n @include visuallyHidden();\n}\n\ncre8-icon-legacy.cre8-u-is-vishidden {\n @include visuallyHidden();\n}\n\nspan.cre8-c-button__icon {\n margin-left: size(1);\n max-width: fit-content;\n min-width: 0px;\n width: auto;\n height: auto;\n max-height: fit-content;\n min-width: 0px;\n}\n\ncre8-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n\n svg {\n height: size(2);\n width: size(2);\n }\n}\n`;\nexport default styles;"]}
1	+ {"version":3,"file":"button.styles.js","sourceRoot":"","sources":["../../../components/button/button.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAo6ChB,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:host {\n display: inline-flex;\n}\n\n:host([fullWidth]) {\n display: flex;\n}\n\n/\n 1) Button or link that has functionality to it\n /\n/\n Primary button\n /\n.cre8-c-button {\n font-family: var(--cre8-typography-label-default-font-family);\n font-size: var(--cre8-typography-label-default-font-size);\n font-weight: var(--cre8-typography-label-default-font-weight);\n line-height: var(--cre8-typography-label-default-line-height);\n text-decoration: var(--cre8-typography-label-default-text-decoration);\n text-transform: var(--cre8-typography-label-default-text-transform);\n width: var(--cre8-button-width, auto);\n height: var(--cre8-button-height, auto);\n min-width: var(--cre8-button-min-width, auto);\n min-height: var(--cre8-button-min-height, auto);\n justify-content: center;\n text-align: center;\n margin-top: var(--cre8-button-margin-top, 0);\n margin-bottom: var(--cre8-button-margin-bottom, 0);\n margin-left: var(--cre8-button-margin-left, 0);\n margin-right: var(--cre8-button-margin-right, 0);\n display: inline-flex;\n align-items: center;\n border-width: var(--cre8-border-width-button-default);\n box-shadow: var(--cre8-shadow-button);\n padding-top: var(--cre8-button-padding-vertical-medium);\n padding-right: var(--cre8-button-padding-horizontal-medium);\n padding-bottom: var(--cre8-button-padding-vertical-medium);\n padding-left: var(--cre8-button-padding-horizontal-medium);\n margin: 0;\n cursor: pointer;\n border-style: var(--cre8-border-style-default);\n transition: revert;\n transform: revert;\n white-space: nowrap;\n}\n.cre8-c-button:hover, .cre8-c-button:focus, .cre8-c-button:active, .cre8-c-button:focus-visible {\n border-style: var(--cre8-border-style-default);\n box-shadow: none;\n transform: revert;\n transition: revert;\n}\n.cre8-c-button.cre8-c-button--primary {\n background: var(--cre8-color-button-primary-bg);\n border-width: var(--cre8-border-width-button-default);\n border-color: var(--cre8-color-button-primary-border);\n border-radius: var(--cre8-border-radius-button);\n box-shadow: var(--cre8-shadow-button);\n color: var(--cre8-color-button-primary-content);\n --cre8-icon-fill: var(--cre8-color-button-primary-content);\n}\n.cre8-c-button.cre8-c-button--primary:hover, .cre8-c-button.cre8-c-button--primary:focus {\n box-shadow: none;\n --cre8-icon-fill: var(--cre8-color-button-primary-content-hover);\n color: var(--cre8-color-button-primary-content-hover);\n border-color: var(--cre8-color-button-primary-border-hover);\n background: var(--cre8-color-button-primary-bg-hover);\n text-decoration: none;\n}\n.cre8-c-button.cre8-c-button--primary:hover:focus, .cre8-c-button.cre8-c-button--primary:focus:focus {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--primary:focus-visible, .cre8-c-button.cre8-c-button--primary:active, .cre8-c-button.cre8-c-button--primary.cre8-c-button--loading {\n box-shadow: none;\n color: var(--cre8-color-button-primary-content-active);\n --cre8-icon-fill: var(--cre8-color-button-primary-content-active);\n border-color: var(--cre8-color-button-primary-border-active);\n background-color: var(--cre8-color-button-primary-bg-active);\n}\n.cre8-c-button.cre8-c-button--primary:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--primary.cre8-c-button--loading {\n cursor: not-allowed;\n}\n.cre8-c-button.cre8-c-button--primary {\n /\n Disabled primary and secondary button\n /\n}\n.cre8-c-button.cre8-c-button--primary:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-primary-bg-disabled);\n border-color: var(--cre8-color-button-primary-border-disabled);\n color: var(--cre8-color-button-primary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-primary-content-disabled);\n cursor: not-allowed;\n outline: none;\n}\n.cre8-c-button.cre8-c-button--primary:disabled:hover, .cre8-c-button.cre8-c-button--primary:disabled:focus, .cre8-c-button.cre8-c-button--primary:disabled:active, .cre8-c-button.cre8-c-button--primary:disabled:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-primary-bg-disabled);\n border-color: var(--cre8-color-button-primary-border-disabled);\n color: var(--cre8-color-button-primary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-primary-content-disabled);\n}\n.cre8-c-button {\n /\n Primary button inverse\n /\n}\n.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse {\n background: var(--cre8-color-button-primary-inverse-bg);\n border-width: var(--cre8-border-width-button-default);\n border-color: var(--cre8-color-button-primary-inverse-border);\n border-radius: var(--cre8-border-radius-button);\n box-shadow: var(--cre8-shadow-button);\n color: var(--cre8-color-button-primary-inverse-content);\n --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content);\n}\n.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:hover, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:focus {\n box-shadow: none;\n --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-hover);\n color: var(--cre8-color-button-primary-inverse-content-hover);\n border-color: var(--cre8-color-button-primary-inverse-border-hover);\n background: var(--cre8-color-button-primary-inverse-bg-hover);\n text-decoration: none;\n}\n.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:hover:focus, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:focus:focus {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:focus-visible, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:active, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse.cre8-c-button--loading {\n box-shadow: none;\n color: var(--cre8-color-button-primary-inverse-content-active);\n --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-active);\n border-color: var(--cre8-color-button-primary-inverse-border-active);\n background-color: var(--cre8-color-button-primary-inverse-bg-active);\n}\n.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse.cre8-c-button--loading {\n cursor: not-allowed;\n}\n.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-primary-inverse-bg-disabled);\n border-color: var(--cre8-color-button-primary-inverse-border-disabled);\n color: var(--cre8-color-button-primary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-disabled);\n cursor: not-allowed;\n outline: none;\n}\n.cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:disabled:hover, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:disabled:focus, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:disabled:active, .cre8-c-button.cre8-c-button--primary.cre8-c-button--inverse:disabled:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-primary-inverse-bg-disabled);\n border-color: var(--cre8-color-button-primary-inverse-border-disabled);\n color: var(--cre8-color-button-primary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-primary-inverse-content-disabled);\n}\n.cre8-c-button {\n /\n Secondary button\n * The icon button shares the styles of the standard secondary button\n /\n}\n.cre8-c-button.cre8-c-button--secondary {\n background-color: var(--cre8-color-button-secondary-bg);\n border-color: var(--cre8-color-button-secondary-border);\n color: var(--cre8-color-button-secondary-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content);\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n}\n.cre8-c-button.cre8-c-button--secondary:hover, .cre8-c-button.cre8-c-button--secondary:focus {\n background-color: var(--cre8-color-button-secondary-bg-hover);\n border-color: var(--cre8-color-button-secondary-border-hover);\n color: var(--cre8-color-button-secondary-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-hover);\n}\n.cre8-c-button.cre8-c-button--secondary:hover:focus, .cre8-c-button.cre8-c-button--secondary:focus:focus {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--secondary:focus-visible, .cre8-c-button.cre8-c-button--secondary:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--loading {\n transition: none;\n transform: none;\n background-color: var(--cre8-color-button-secondary-bg-active);\n border-color: var(--cre8-color-button-secondary-border-active);\n color: var(--cre8-color-button-secondary-content-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);\n}\n.cre8-c-button.cre8-c-button--secondary:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--loading {\n cursor: not-allowed;\n}\n.cre8-c-button.cre8-c-button--secondary:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-secondary-bg-disabled);\n border-color: var(--cre8-color-button-secondary-border-disabled);\n color: var(--cre8-color-button-secondary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-disabled);\n outline: none;\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n cursor: not-allowed;\n}\n.cre8-c-button.cre8-c-button--secondary:disabled:hover, .cre8-c-button.cre8-c-button--secondary:disabled:focus, .cre8-c-button.cre8-c-button--secondary:disabled:active, .cre8-c-button.cre8-c-button--secondary:disabled:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-secondary-bg-disabled);\n border-color: var(--cre8-color-button-secondary-border-disabled);\n color: var(--cre8-color-button-secondary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-disabled);\n}\n.cre8-c-button {\n /\n Secondary button neutral\n /\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral {\n background-color: var(--cre8-color-button-secondary-neutral-bg);\n border-color: var(--cre8-color-button-secondary-neutral-border);\n color: var(--cre8-color-button-secondary-neutral-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content);\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:hover, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:focus {\n background-color: var(--cre8-color-button-secondary-neutral-bg-hover);\n border-color: var(--cre8-color-button-secondary-neutral-border-hover);\n color: var(--cre8-color-button-secondary-neutral-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-hover);\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:hover:focus, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:focus:focus {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:focus-visible, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--loading {\n transition: none;\n transform: none;\n background-color: var(--cre8-color-button-secondary-neutral-bg-active);\n border-color: var(--cre8-color-button-secondary-neutral-border-active);\n color: var(--cre8-color-button-secondary-neutral-content-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-active);\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-secondary-neutral-bg-disabled);\n border-color: var(--cre8-color-button-secondary-neutral-border-disabled);\n color: var(--cre8-color-button-secondary-neutral-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-disabled);\n outline: none;\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n cursor: not-allowed;\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:disabled:hover, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:disabled:focus, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:disabled:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral:disabled:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-secondary-neutral-bg-disabled);\n border-color: var(--cre8-color-button-secondary-neutral-border-disabled);\n color: var(--cre8-color-button-secondary-neutral-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-content-disabled);\n}\n.cre8-c-button {\n /\n Secondary button inverse\n /\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse {\n background-color: var(--cre8-color-button-secondary-inverse-bg);\n border-color: var(--cre8-color-button-secondary-inverse-border);\n color: var(--cre8-color-button-secondary-inverse-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content);\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:hover, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:focus {\n background-color: var(--cre8-color-button-secondary-inverse-bg-hover);\n border-color: var(--cre8-color-button-secondary-inverse-border-hover);\n color: var(--cre8-color-button-secondary-inverse-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-hover);\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:hover:focus, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:focus:focus {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:focus-visible, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse.cre8-c-button--loading {\n transition: none;\n transform: none;\n background-color: var(--cre8-color-button-secondary-inverse-bg-active);\n border-color: var(--cre8-color-button-secondary-inverse-border-active);\n color: var(--cre8-color-button-secondary-inverse-content-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-active);\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-secondary-inverse-bg-disabled);\n border-color: var(--cre8-color-button-secondary-inverse-border-disabled);\n color: var(--cre8-color-button-secondary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-disabled);\n outline: none;\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n cursor: not-allowed;\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:disabled:hover, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:disabled:focus, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:disabled:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--inverse:disabled:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-secondary-inverse-bg-disabled);\n border-color: var(--cre8-color-button-secondary-inverse-border-disabled);\n color: var(--cre8-color-button-secondary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-inverse-content-disabled);\n}\n.cre8-c-button {\n /\n Secondary button neutral inverse\n /\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse {\n background-color: var(--cre8-color-button-secondary-neutral-inverse-bg);\n border-color: var(--cre8-color-button-secondary-neutral-inverse-border);\n color: var(--cre8-color-button-secondary-neutral-inverse-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content);\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:hover, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:focus {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n background-color: var(--cre8-color-button-secondary-neutral-bg-active);\n border-color: var(--cre8-color-button-secondary-neutral-inverse-border-active);\n outline-color: var(--cre8-color-button-secondary-neutral-inverse-outline);\n color: var(--cre8-color-button-secondary-neutral-inverse-content-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-active);\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:focus-visible, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse.cre8-c-button--loading {\n transition: none;\n transform: none;\n background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-active);\n border-color: var(--cre8-color-button-secondary-neutral-inverse-border-active);\n color: var(--cre8-color-button-secondary-neutral-inverse-content-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-active);\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-disabled);\n border-color: var(--cre8-color-button-secondary-neutral-inverse-border-disabled);\n color: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);\n outline: none;\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n cursor: not-allowed;\n}\n.cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:disabled:hover, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:disabled:focus, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:disabled:active, .cre8-c-button.cre8-c-button--secondary.cre8-c-button--neutral.cre8-c-button--inverse:disabled:focus-visible {\n outline: none;\n background-color: var(--cre8-color-button-secondary-neutral-inverse-bg-disabled);\n border-color: var(--cre8-color-button-secondary-neutral-inverse-border-disabled);\n color: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-secondary-neutral-inverse-content-disabled);\n}\n.cre8-c-button {\n /\n Tertiary button\n /\n}\n.cre8-c-button.cre8-c-button--tertiary {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-bg);\n border-width: var(--cre8-border-width-button-default);\n border-color: var(--cre8-color-button-tertiary-border);\n color: var(--cre8-color-button-tertiary-content);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-content);\n box-shadow: none;\n}\n.cre8-c-button.cre8-c-button--tertiary:hover, .cre8-c-button.cre8-c-button--tertiary:focus {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-bg-hover);\n border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);\n border-color: var(--cre8-color-button-tertiary-border-hover);\n color: var(--cre8-color-button-tertiary-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-content-hover);\n}\n.cre8-c-button.cre8-c-button--tertiary:hover:focus, .cre8-c-button.cre8-c-button--tertiary:focus:focus {\n outline: var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--tertiary:focus-visible, .cre8-c-button.cre8-c-button--tertiary:active, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--loading {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-bg-active);\n border-color: var(--cre8-color-button-tertiary-border-active);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-tertiary-content-active);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-content-active);\n}\n.cre8-c-button.cre8-c-button--tertiary:focus-visible {\n outline: var(--cre8-border-width-focus) var(--cre8-border-style-button-tertiary-outline-focus) var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--loading {\n cursor: not-allowed;\n}\n.cre8-c-button.cre8-c-button--tertiary:disabled {\n background-color: var(--cre8-color-button-tertiary-bg-disabled);\n border-color: transparent;\n color: var(--cre8-color-button-tertiary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);\n outline: none;\n box-shadow: none;\n cursor: not-allowed;\n}\n.cre8-c-button.cre8-c-button--tertiary:disabled:hover, .cre8-c-button.cre8-c-button--tertiary:disabled:focus {\n outline: none;\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-bg-disabled);\n color: var(--cre8-color-button-tertiary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);\n}\n.cre8-c-button.cre8-c-button--tertiary:disabled:active, .cre8-c-button.cre8-c-button--tertiary:disabled:focus-visible {\n outline: none;\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-bg-disabled);\n color: var(--cre8-color-button-tertiary-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-content-disabled);\n}\n.cre8-c-button {\n /\n Tertiary button neutral\n /\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral {\n background-color: var(--cre8-color-button-tertiary-neutral-bg);\n border-color: var(--cre8-color-button-tertiary-border);\n color: var(--cre8-color-button-tertiary-neutral-content);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content);\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral:hover, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral:focus {\n background-color: var(--cre8-color-button-tertiary-neutral-bg-hover);\n border-color: var(--cre8-color-button-tertiary-neutral-border-hover);\n color: var(--cre8-color-button-tertiary-neutral-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-hover);\n outline-color: var(--cre8-color-button-tertiary-neutral-outline);\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral:focus-visible, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral:active, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--loading {\n transition: none;\n transform: none;\n background-color: var(--cre8-color-button-tertiary-neutral-bg-active);\n border-color: var(--cre8-color-button-tertiary-neutral-border-active);\n color: var(--cre8-color-button-tertiary-neutral-content-active);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-active);\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral:focus-visible {\n outline: var(--cre8-border-width-focus) solid var(--cre8-color-border-active-outline);\n outline-offset: 0.125rem;\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral:disabled {\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-neutral-bg-disabled);\n border-color: var(--cre8-color-button-tertiary-neutral-border-disabled);\n color: var(--cre8-color-button-tertiary-neutral-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-content-disabled);\n outline: none;\n border-radius: var(--cre8-border-radius-button);\n border-width: var(--cre8-border-width-button-default);\n cursor: not-allowed;\n}\n.cre8-c-button {\n /\n Tertiary button inverse\n /\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-inverse-bg);\n border-width: var(--cre8-border-width-button-default);\n border-color: var(--cre8-color-button-tertiary-inverse-border);\n color: var(--cre8-color-button-tertiary-inverse-content);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content);\n box-shadow: none;\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:hover, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:focus {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-inverse-bg-hover);\n border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);\n border-color: var(--cre8-color-button-tertiary-inverse-border-hover);\n color: var(--cre8-color-button-tertiary-inverse-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-hover);\n outline-color: var(--cre8-color-button-tertiary-inverse-outline);\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:focus-visible, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:active, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse.cre8-c-button--loading {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-inverse-bg-active);\n border-color: var(--cre8-color-button-tertiary-inverse-border-active);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-tertiary-inverse-content-active);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-active);\n outline-color: var(--cre8-color-button-tertiary-inverse-outline);\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse.cre8-c-button--loading {\n cursor: not-allowed;\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:disabled {\n background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);\n border-color: transparent;\n color: var(--cre8-color-button-tertiary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);\n outline: none;\n box-shadow: none;\n cursor: not-allowed;\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:disabled:hover, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:disabled:focus {\n outline: none;\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);\n color: var(--cre8-color-button-tertiary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:disabled:active, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--inverse:disabled:focus-visible {\n outline: none;\n box-shadow: none;\n background-color: var(--cre8-color-button-tertiary-inverse-bg-disabled);\n color: var(--cre8-color-button-tertiary-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-inverse-content-disabled);\n}\n.cre8-c-button {\n /\n Tertiary Neutral button inverse\n /\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-tertiary-neutral-inverse-content);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content);\n box-shadow: none;\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse:hover, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse:focus {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-hover);\n border-width: var(--cre8-border-width-button-default, --cre8-border-width-none);\n border-color: var(--cre8-color-button-tertiary-neutral-inverse-border-hover);\n color: var(--cre8-color-button-tertiary-neutral-inverse-content-hover);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-hover);\n outline-color: var(--cre8-color-button-tertiary-neutral-inverse-outline);\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse:focus-visible, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse:active, .cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse.cre8-c-button--loading {\n border-radius: var(--cre8-border-radius-button);\n background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-active);\n border-color: var(--cre8-color-button-tertiary-neutral-inverse-border-active);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-tertiary-neutral-inverse-content-active);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-active);\n outline-color: var(--cre8-color-button-tertiary-neutral-inverse-outline);\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse.cre8-c-button--loading {\n cursor: not-allowed;\n}\n.cre8-c-button.cre8-c-button--tertiary.cre8-c-button--neutral.cre8-c-button--inverse:disabled {\n background-color: var(--cre8-color-button-tertiary-neutral-inverse-bg-disabled);\n border-color: transparent;\n color: var(--cre8-color-button-tertiary-neutral-inverse-content-disabled);\n --cre8-icon-fill: var(--cre8-color-button-tertiary-neutral-inverse-content-disabled);\n outline: none;\n box-shadow: none;\n cursor: not-allowed;\n}\n.cre8-c-button.cre8-c-button.cre8-c-button--secondary.cre8-c-button--split-button-text {\n border-radius: var(--cre8-border-radius-button) var(--cre8-border-radius-none) var(--cre8-border-radius-none) var(--cre8-border-radius-button);\n border-color: var(--cre8-color-button-secondary-border);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-secondary-content);\n}\n.cre8-c-button.cre8-c-button.cre8-c-button--secondary.cre8-c-button--split-button-text:active, .cre8-c-button.cre8-c-button.cre8-c-button--secondary.cre8-c-button--split-button-text:focus-visible {\n outline: none;\n}\n.cre8-c-button.cre8-c-button.cre8-c-button--secondary.cre8-c-button--split-button-text.cre8-c-button--lg {\n padding: var(--cre8-button-padding-vertical-large) var(--cre8-button-padding-horizontal-large);\n}\n.cre8-c-button.cre8-c-button.cre8-c-button--secondary.cre8-c-button--split-button-text.cre8-c-button--sm {\n padding: var(--cre8-button-padding-vertical-small) var(--cre8-button-padding-horizontal-small);\n}\n.cre8-c-button.cre8-c-button.cre8-c-button--icon-only.cre8-c-button--split-button-caret {\n padding: var(--cre8-button-padding-vertical-medium);\n border-radius: var(--cre8-border-radius-none) var(--cre8-border-radius-button) var(--cre8-border-radius-button) var(--cre8-border-radius-none);\n height: 100%;\n border-left: none !important;\n border-collapse: collapse;\n background: var(--cre8-color-button-secondary-bg);\n border-color: var(--cre8-color-button-secondary-border);\n border-width: var(--cre8-border-width-button-default);\n color: var(--cre8-color-button-secondary-content);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content);\n}\n.cre8-c-button.cre8-c-button.cre8-c-button--icon-only.cre8-c-button--split-button-caret:hover, .cre8-c-button.cre8-c-button.cre8-c-button--icon-only.cre8-c-button--split-button-caret:focus {\n background: var(--cre8-color-button-secondary-bg-hover);\n border-color: var(--cre8-color-button-secondary-border-hover);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-hover);\n outline: none;\n border-left: none;\n border-collapse: collapse;\n}\n.cre8-c-button.cre8-c-button.cre8-c-button--icon-only.cre8-c-button--split-button-caret:active, .cre8-c-button.cre8-c-button.cre8-c-button--icon-only.cre8-c-button--split-button-caret:focus-visible {\n background: var(--cre8-color-button-secondary-bg-active);\n border-color: var(--cre8-color-button-secondary-border-active);\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);\n outline: none;\n border-left: none;\n border-collapse: collapse;\n}\n\n.cre8-c-button--lg {\n padding: var(--cre8-button-padding-vertical-large);\n}\n\n.cre8-c-button--sm {\n padding: var(--cre8-button-padding-vertical-small);\n}\n\n.cre8-c-button--icon-only {\n padding: var(--cre8-button-padding-vertical-small);\n color: var(--cre8-icon-fill, currentColor);\n}\n\n/\n Full-width button\n /\n.cre8-c-button--full-width {\n width: 100%;\n display: flex;\n}\n\n/\n Small button\n /\n.cre8-c-button--sm {\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 padding-top: var(--cre8-button-padding-vertical-small);\n padding-right: var(--cre8-button-padding-horizontal-small);\n padding-bottom: var(--cre8-button-padding-vertical-small);\n padding-left: var(--cre8-button-padding-horizontal-small);\n}\n\n/\n Small button sized for icon only\n /\n.cre8-c-button--sm.cre8-c-button--icon-only {\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 padding-top: var(--cre8-button-padding-vertical-small-icon-only);\n padding-right: var(--cre8-button-padding-horizontal-small-icon-only);\n padding-bottom: var(--cre8-button-padding-vertical-small-icon-only);\n padding-left: var(--cre8-button-padding-horizontal-small-icon-only);\n}\n\n/\n Large button\n /\n.cre8-c-button--lg {\n font-family: var(--cre8-typography-label-large-font-family);\n font-size: var(--cre8-typography-label-large-font-size);\n font-weight: var(--cre8-typography-label-large-font-weight);\n line-height: var(--cre8-typography-label-large-line-height);\n text-decoration: var(--cre8-typography-label-large-text-decoration);\n text-transform: var(--cre8-typography-label-large-text-transform);\n padding-top: var(--cre8-button-padding-vertical-large);\n padding-right: var(--cre8-button-padding-horizontal-large);\n padding-bottom: var(--cre8-button-padding-vertical-large);\n padding-left: var(--cre8-button-padding-horizontal-large);\n}\n\n/\n Large button sized for icon only\n /\n.cre8-c-button--lg.cre8-c-button--icon-only {\n font-family: var(--cre8-typography-label-large-font-family);\n font-size: var(--cre8-typography-label-large-font-size);\n font-weight: var(--cre8-typography-label-large-font-weight);\n line-height: var(--cre8-typography-label-large-line-height);\n text-decoration: var(--cre8-typography-label-large-text-decoration);\n text-transform: var(--cre8-typography-label-large-text-transform);\n padding-top: var(--cre8-button-padding-vertical-large-icon-only);\n padding-right: var(--cre8-button-padding-horizontal-large-icon-only);\n padding-bottom: var(--cre8-button-padding-vertical-large-icon-only);\n padding-left: var(--cre8-button-padding-horizontal-large-icon-only);\n}\n\n/\n Icon within small button\n /\n.cre8-c-button--sm cre8-icon-legacy {\n --cre8-icon-height: var(--cre8-icon-size-small);\n --cre8-icon-width: var(--cre8-icon-size-small);\n}\n\n.cre8-c-button--sm cre8-icon svg {\n height: 0.875rem;\n width: 0.875rem;\n}\n\n/\n Icon within large button\n /\n.cre8-c-button--lg cre8-icon-legacy {\n --cre8-icon-height: var(--cre8-icon-size-large);\n --cre8-icon-width: var(--cre8-icon-size-large);\n}\n\n.cre8-c-button--lg cre8-icon svg {\n height: 1.125rem;\n width: 1.125rem;\n}\n\n::slotted() {\n margin-right: 0;\n}\n\n/*\n Button icon directly before button text\n /\ncre8-icon-legacy + .cre8-c-button__text:not(.cre8-u-is-vishidden) {\n margin-left: 0.5rem;\n}\n\ncre8-icon + .cre8-c-button__text:not(.cre8-u-is-vishidden) {\n margin-left: 0.5rem;\n}\n\n/\n Button icon directly after button text\n /\n.cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon-legacy {\n margin-left: 0.5rem;\n}\n\n.cre8-c-button__text:not(.cre8-u-is-vishidden) + cre8-icon {\n margin-left: 0.5rem;\n}\n\n/\n Button icon only\n /\n.cre8-c-button:has(.cre8-c-button__text.cre8-u-is-vishidden) + cre8-icon-legacy {\n border-radius: var(--cre8-border-radius-button);\n}\n\n.cre8-c-button:has(.cre8-c-button__text.cre8-u-is-vishidden) + cre8-icon {\n border-radius: var(--cre8-border-radius-button);\n}\n\n.cre8-c-button__text.cre8-u-is-vishidden + cre8-icon-legacy {\n margin-left: 0px;\n margin-right: 0px;\n}\n\n.cre8-c-button__text.cre8-u-is-vishidden + cre8-icon {\n margin-left: 0px;\n margin-right: 0px;\n}\n\n.cre8-c-button__text.cre8-u-is-vishidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\n.cre8-c-button--primary.cre8-c-button--loading {\n --cre8-icon-fill: var(--cre8-color-content-knockout);\n}\n\n.cre8-c-button--secondary.cre8-c-button--loading,\n.cre8-c-button--tertiary.cre8-c-button--loading {\n --cre8-icon-fill: var(--cre8-color-button-secondary-content-active);\n}\n\n/\n Aria live span\n */\n.cre8-u-is-vishidden {\n --cre8-icon-height: 0px;\n --cre8-icon-width: 0px;\n max-width: fit-content;\n min-width: 0px;\n width: auto;\n height: auto;\n max-height: fit-content;\n min-width: 0px;\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\ncre8-icon-legacy.cre8-u-is-vishidden {\n border: 0;\n clip: rect(0 0 0 0);\n height: 1px;\n margin: -1px;\n overflow: hidden;\n padding: 0;\n position: absolute;\n width: 1px;\n}\n\nspan.cre8-c-button__icon {\n margin-left: 0.5rem;\n max-width: fit-content;\n min-width: 0px;\n width: auto;\n height: auto;\n max-height: fit-content;\n min-width: 0px;\n}\n\ncre8-icon {\n display: flex;\n align-items: center;\n justify-content: center;\n}\ncre8-icon svg {\n height: 1rem;\n width: 1rem;\n}`;\nexport default styles;\n"]}

package/lib/components/button-group/button-group.d.ts CHANGED Viewed

@@ -8,6 +8,15 @@ export declare class Cre8ButtonGroup extends Cre8Element {
      * Responsive Button Group (for modals)
      */
     orientation?: 'responsive-full-width';
+    /**
+     * Stretch button group to fill its container width
+     */
+    fullWidth?: boolean;
+    /**
+     * Gap between buttons
+     * - **sm** reduces gap to 8px (useful in compact contexts)
+     */
+    gap?: 'sm';
     render(): import("lit-html").TemplateResult<1>;
 }
 declare global {

package/lib/components/button-group/button-group.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AAEH,qBAAa,eAAgB,SAAQ,WAAW;IAC5C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,WAAW,CAAC,EAAE,uBAAuB,CAAC;IAE1C,MAAM;~~CAWP~~;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF;AAED,eAAe,eAAe,CAAC"}
1	+ {"version":3,"file":"button-group.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;GAEG;AAEH,qBAAa,eAAgB,SAAQ,WAAW;IAC5C,MAAM,CAAC,MAAM,4BAAY;IAE3B;;OAEG;IAEC,WAAW,CAAC,EAAE,uBAAuB,CAAC;IAE1C;;OAEG;IAEC,SAAS,CAAC,EAAE,OAAO,CAAC;IAExB;;;OAGG;IAEC,GAAG,CAAC,EAAE,IAAI,CAAC;IAEf,MAAM;CAaP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,mBAAmB,EAAE,eAAe,CAAC;KACtC;CACF;AAED,eAAe,eAAe,CAAC"}

package/lib/components/button-group/button-group.js CHANGED Viewed

@@ -15,6 +15,8 @@ export class Cre8ButtonGroup extends Cre8Element {
     render() {
         const componentClassNames = this.componentClassNames('cre8-c-button-group', {
             'cre8-c-button-group--responsive-full-width': this.orientation === 'responsive-full-width',
+            'cre8-c-button-group--full-width': !!this.fullWidth,
+            'cre8-c-button-group--gap-sm': this.gap === 'sm',
         });
         return html `
       <div class="${componentClassNames}">
@@ -27,6 +29,12 @@ Cre8ButtonGroup.styles = [styles];
 __decorate([
     property()
 ], Cre8ButtonGroup.prototype, "orientation", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], Cre8ButtonGroup.prototype, "fullWidth", void 0);
+__decorate([
+    property()
+], Cre8ButtonGroup.prototype, "gap", void 0);
 if (customElements.get('cre8-button-group') === undefined) {
     customElements.define('cre8-button-group', Cre8ButtonGroup);
 }

package/lib/components/button-group/button-group.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button-group.js","sourceRoot":"","sources":["../../../components/button-group/button-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C;;GAEG;AAEH,MAAM,OAAO,eAAgB,SAAQ,WAAW;~~IAS9C~~,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE;YACxE,4CAA4C,EAAE,IAAI,CAAC,WAAW,KAAK,uBAAuB;~~SAC7F~~,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;;;KAGlC,CAAC;IACJ,CAAC;;~~AAlBQ~~,sBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;oDAC+B;~~AAe5C~~,IAAI,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,KAAK,SAAS,EAAE,CAAC;IACxD,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AAChE,CAAC;AAQD,eAAe,eAAe,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './button-group.styles.js';\n\n/*\n @slot - The component content\n /\n\nexport class Cre8ButtonGroup extends Cre8Element {\n static styles = [styles];\n\n /\n Responsive Button Group (for modals)\n */\n @property()\n orientation?: 'responsive-full-width';\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-button-group', {\n 'cre8-c-button-group--responsive-full-width': this.orientation === 'responsive-full-width',\n });\n\n return html`\n <div class=\"${componentClassNames}\">\n <slot></slot>\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-button-group') === undefined) {\n customElements.define('cre8-button-group', Cre8ButtonGroup);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-button-group': Cre8ButtonGroup;\n }\n}\n\nexport default Cre8ButtonGroup;\n"]}
1	+ {"version":3,"file":"button-group.js","sourceRoot":"","sources":["../../../components/button-group/button-group.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAI,MAAM,KAAK,CAAC;AAC7B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,0BAA0B,CAAC;AAE9C;;GAEG;AAEH,MAAM,OAAO,eAAgB,SAAQ,WAAW;IAsB9C,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,qBAAqB,EAAE;YACxE,4CAA4C,EAAE,IAAI,CAAC,WAAW,KAAK,uBAAuB;YAC1F,iCAAiC,EAAE,CAAC,CAAC,IAAI,CAAC,SAAS;YACnD,6BAA6B,EAAE,IAAI,CAAC,GAAG,KAAK,IAAI;SACnD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;;;KAGlC,CAAC;IACJ,CAAC;;AAjCQ,sBAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAMvB;IADH,QAAQ,EAAE;oDAC+B;AAMtC;IADH,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDACnB;AAOpB;IADH,QAAQ,EAAE;4CACI;AAiBjB,IAAI,cAAc,CAAC,GAAG,CAAC,mBAAmB,CAAC,KAAK,SAAS,EAAE,CAAC;IACxD,cAAc,CAAC,MAAM,CAAC,mBAAmB,EAAE,eAAe,CAAC,CAAC;AAChE,CAAC;AAQD,eAAe,eAAe,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './button-group.styles.js';\n\n/*\n @slot - The component content\n /\n\nexport class Cre8ButtonGroup extends Cre8Element {\n static styles = [styles];\n\n /\n Responsive Button Group (for modals)\n /\n @property()\n orientation?: 'responsive-full-width';\n\n /\n Stretch button group to fill its container width\n /\n @property({ type: Boolean, reflect: true })\n fullWidth?: boolean;\n\n /\n Gap between buttons\n * - sm reduces gap to 8px (useful in compact contexts)\n */\n @property()\n gap?: 'sm';\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-button-group', {\n 'cre8-c-button-group--responsive-full-width': this.orientation === 'responsive-full-width',\n 'cre8-c-button-group--full-width': !!this.fullWidth,\n 'cre8-c-button-group--gap-sm': this.gap === 'sm',\n });\n\n return html`\n <div class=\"${componentClassNames}\">\n <slot></slot>\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-button-group') === undefined) {\n customElements.define('cre8-button-group', Cre8ButtonGroup);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-button-group': Cre8ButtonGroup;\n }\n}\n\nexport default Cre8ButtonGroup;\n"]}

package/lib/components/button-group/button-group.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,~~yBAmmBV~~,CAAC;AACH,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"button-group.styles.d.ts","sourceRoot":"","sources":["../../../components/button-group/button-group.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBA+mBV,CAAC;AACH,eAAe,MAAM,CAAC"}

package/lib/components/button-group/button-group.styles.js CHANGED Viewed

@@ -598,6 +598,18 @@ span.ripple {
   gap: 1rem;
 }
+:host([fullWidth]) {
+  display: flex;
+}
+.cre8-c-button-group--full-width {
+  width: 100%;
+}
+.cre8-c-button-group--gap-sm {
+  gap: 0.5rem;
+}
 /**
   * Button group for Modals
   */

package/lib/components/button-group/button-group.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"button-group.styles.js","sourceRoot":"","sources":["../../../components/button-group/button-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmmBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(8) !important;\n }\n}\n.cre8-u-margin-left-none {\n margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n display: flex !important;\n}\n\n.cre8-u-display-block {\n display: block !important;\n}\n\nbody {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n color: var(--cre8-color-content-default);\n background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/------------------------------------\\\\\n #BUTTON-GROUP\n\\\\------------------------------------/\n:host {\n display: inline-flex;\n}\n\n/\n 1) Button Group\n /\n.cre8-c-button-group {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n}\n\n/\n Button group for Modals\n */\n.cre8-c-button-group--responsive-full-width {\n flex-direction: column;\n --cre8-button-width: 100%;\n}\n@media all and (min-width: 768px) {\n .cre8-c-button-group--responsive-full-width {\n flex-direction: row;\n --cre8-button-width: auto;\n }\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"button-group.styles.js","sourceRoot":"","sources":["../../../components/button-group/button-group.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA+mBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(8) !important;\n }\n}\n.cre8-u-margin-left-none {\n margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n display: flex !important;\n}\n\n.cre8-u-display-block {\n display: block !important;\n}\n\nbody {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n color: var(--cre8-color-content-default);\n background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/------------------------------------\\\\\n #BUTTON-GROUP\n\\\\------------------------------------/\n:host {\n display: inline-flex;\n}\n\n/\n 1) Button Group\n /\n.cre8-c-button-group {\n display: flex;\n flex-wrap: wrap;\n gap: 1rem;\n}\n\n:host([fullWidth]) {\n display: flex;\n}\n\n.cre8-c-button-group--full-width {\n width: 100%;\n}\n\n.cre8-c-button-group--gap-sm {\n gap: 0.5rem;\n}\n\n/\n Button group for Modals\n */\n.cre8-c-button-group--responsive-full-width {\n flex-direction: column;\n --cre8-button-width: 100%;\n}\n@media all and (min-width: 768px) {\n .cre8-c-button-group--responsive-full-width {\n flex-direction: row;\n --cre8-button-width: auto;\n }\n}`;\nexport default styles;\n"]}

package/lib/components/card/card.d.ts CHANGED Viewed

@@ -28,7 +28,7 @@ export declare class Cre8Card extends Cre8Element {
      * - **horizontal-bare** renders a card with header, body, footer oriented in a row rather than a column
      *   without a border and without padding around the content
      */
-    variant?: 'bare' | 'horizontal' | 'horizontal-bare';
+    variant?: 'bare' | 'compact' | 'horizontal' | 'horizontal-bare';
     /**
      * Alignment variant
      * - **center** renders a card that has center aligned content/text

package/lib/components/card/card.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../components/card/card.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;EAmBE;AACF,qBAAa,QAAS,SAAQ,WAAW;IACvC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;OAMG;IAEH,OAAO,CAAC,EAAE,MAAM,GAAG,YAAY,GAAG,iBAAiB,CAAC;~~IAEpD~~;;;OAGG;IAEH,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB,MAAM;~~CAoBP~~;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF;AAED,eAAe,QAAQ,CAAC"}
1	+ {"version":3,"file":"card.d.ts","sourceRoot":"","sources":["../../../components/card/card.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAG9C;;;;;;;;;;;;;;;;;;;EAmBE;AACF,qBAAa,QAAS,SAAQ,WAAW;IACvC,MAAM,CAAC,MAAM,4BAAY;IAEzB;;;;;;OAMG;IAEH,OAAO,CAAC,EAAE,MAAM,GAAG,SAAS,GAAG,YAAY,GAAG,iBAAiB,CAAC;IAEhE;;;OAGG;IAEH,KAAK,CAAC,EAAE,QAAQ,CAAC;IAEjB,MAAM;CAqBP;AAMD,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF;AAED,eAAe,QAAQ,CAAC"}

package/lib/components/card/card.js CHANGED Viewed

@@ -32,6 +32,7 @@ export class Cre8Card extends Cre8Element {
     render() {
         const componentClassNames = this.componentClassNames('cre8-c-card', {
             'cre8-c-card--bare': this.variant === 'bare',
+            'cre8-c-card--compact': this.variant === 'compact',
             'cre8-c-card--horizontal': this.variant === 'horizontal',
             'cre8-c-card--horizontal-bare': this.variant === 'horizontal-bare',
             'cre8-c-card--align-center': this.align === 'center',

package/lib/components/card/card.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../components/card/card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;EAmBE;AACF,MAAM,OAAO,QAAS,SAAQ,WAAW;IAoBvC,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAClE,mBAAmB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC5C,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;YACxD,8BAA8B,EAAE,IAAI,CAAC,OAAO,KAAK,iBAAiB;YAClE,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACrD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,mBAAmB;UAC7B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eAC5B,IAAI,CAAA,kFAAkF;;;;UAIrF,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eAC5B,IAAI,CAAA,kFAAkF;;KAE1F,CAAC;IACJ,CAAC;;~~AAtCM~~,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAUzB;IADC,QAAQ,EAAE;~~yCACyC~~;~~AAOpD~~;IADC,QAAQ,EAAE;uCACM;~~AAwBnB~~,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC/C,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './card.styles.js';\n\n/** The card component acts a general container element sectioned off by slots: `header`, `body`, `footer`.\n\n # How to Use\n* 1. Wrap the card component tags around any html template code which has been properly imported into the file.\n* 2. Decide the layout that best fits the designs assigned to your work.\n* Generally, we recommend visual elements appear in the `header` (optional slot),\n* while `body` remains reserved for custom html content that gives further context and meaning to the `header`.\n* 3. The card defaults to a column and includes a `horizontal` directional variant.\n* If you have a card where the layout of the content is more aligned horizontally,\n* using the `horizontal` variant will ease the construction of your component\n* 4. Finally, we typically recommend reserving the footer for any interactive elements\n* such as buttons for navigating to further information.\n\n\n* NOTE: Adjusting props not mentioned above may result in unpredictable states\n\n @slot body - The card's body content\n* @slot header - (Optional) Content in the card's header\n* @slot footer - (Optional) Content in the card's footer\n/\nexport class Cre8Card extends Cre8Element {\n static styles = [styles];\n\n /\n Style variants\n * - bare renders a card without a border and without padding around the content\n * - horizontal renders a card with header, body, footer oriented in a row rather than a column\n * - horizontal-bare renders a card with header, body, footer oriented in a row rather than a column\n * without a border and without padding around the content\n /\n @property()\n variant?: 'bare' \| 'horizontal' \| 'horizontal-bare';\n\n /\n Alignment variant\n * - center renders a card that has center aligned content/text\n */\n @property()\n align?: 'center';\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-card', {\n 'cre8-c-card--bare': this.variant === 'bare',\n 'cre8-c-card--horizontal': this.variant === 'horizontal',\n 'cre8-c-card--horizontal-bare': this.variant === 'horizontal-bare',\n 'cre8-c-card--align-center': this.align === 'center',\n });\n\n return html`\n <div class=\"${componentClassNames}\" part=\"card\">\n ${this.slotNotEmpty('header')\n && html`<div class=\"cre8-c-card__header\" part=\"header\"><slot name=\"header\"></slot></div>`}\n <div class=\"cre8-c-card__body\" part=\"body\">\n <slot></slot>\n </div>\n ${this.slotNotEmpty('footer')\n && html`<div class=\"cre8-c-card__footer\" part=\"footer\"><slot name=\"footer\"></slot></div>`}\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-card') === undefined) {\n customElements.define('cre8-card', Cre8Card);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-card': Cre8Card;\n }\n}\n\nexport default Cre8Card;\n"]}
1	+ {"version":3,"file":"card.js","sourceRoot":"","sources":["../../../components/card/card.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,IAAI,GAAG,MAAM,KAAK,CAAC;AAC5B,OAAO,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC7C,OAAO,EAAE,WAAW,EAAE,MAAM,iBAAiB,CAAC;AAC9C,OAAO,MAAM,MAAM,kBAAkB,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;EAmBE;AACF,MAAM,OAAO,QAAS,SAAQ,WAAW;IAoBvC,MAAM;QACJ,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAClE,mBAAmB,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YAC5C,sBAAsB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAClD,yBAAyB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;YACxD,8BAA8B,EAAE,IAAI,CAAC,OAAO,KAAK,iBAAiB;YAClE,2BAA2B,EAAE,IAAI,CAAC,KAAK,KAAK,QAAQ;SACrD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACK,mBAAmB;UAC7B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eAC5B,IAAI,CAAA,kFAAkF;;;;UAIrF,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eAC5B,IAAI,CAAA,kFAAkF;;KAE1F,CAAC;IACJ,CAAC;;AAvCM,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAUzB;IADC,QAAQ,EAAE;yCACqD;AAOhE;IADC,QAAQ,EAAE;uCACM;AAyBnB,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAClD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AAC/C,CAAC;AAQD,eAAe,QAAQ,CAAC","sourcesContent":["import { html, } from 'lit';\nimport { property } from 'lit/decorators.js';\nimport { Cre8Element } from '../cre8-element';\nimport styles from './card.styles.js';\n\n/** The card component acts a general container element sectioned off by slots: `header`, `body`, `footer`.\n\n # How to Use\n* 1. Wrap the card component tags around any html template code which has been properly imported into the file.\n* 2. Decide the layout that best fits the designs assigned to your work.\n* Generally, we recommend visual elements appear in the `header` (optional slot),\n* while `body` remains reserved for custom html content that gives further context and meaning to the `header`.\n* 3. The card defaults to a column and includes a `horizontal` directional variant.\n* If you have a card where the layout of the content is more aligned horizontally,\n* using the `horizontal` variant will ease the construction of your component\n* 4. Finally, we typically recommend reserving the footer for any interactive elements\n* such as buttons for navigating to further information.\n\n\n* NOTE: Adjusting props not mentioned above may result in unpredictable states\n\n @slot body - The card's body content\n* @slot header - (Optional) Content in the card's header\n* @slot footer - (Optional) Content in the card's footer\n/\nexport class Cre8Card extends Cre8Element {\n static styles = [styles];\n\n /\n Style variants\n * - bare renders a card without a border and without padding around the content\n * - horizontal renders a card with header, body, footer oriented in a row rather than a column\n * - horizontal-bare renders a card with header, body, footer oriented in a row rather than a column\n * without a border and without padding around the content\n /\n @property()\n variant?: 'bare' \| 'compact' \| 'horizontal' \| 'horizontal-bare';\n\n /\n Alignment variant\n * - center renders a card that has center aligned content/text\n */\n @property()\n align?: 'center';\n\n render() {\n const componentClassNames = this.componentClassNames('cre8-c-card', {\n 'cre8-c-card--bare': this.variant === 'bare',\n 'cre8-c-card--compact': this.variant === 'compact',\n 'cre8-c-card--horizontal': this.variant === 'horizontal',\n 'cre8-c-card--horizontal-bare': this.variant === 'horizontal-bare',\n 'cre8-c-card--align-center': this.align === 'center',\n });\n\n return html`\n <div class=\"${componentClassNames}\" part=\"card\">\n ${this.slotNotEmpty('header')\n && html`<div class=\"cre8-c-card__header\" part=\"header\"><slot name=\"header\"></slot></div>`}\n <div class=\"cre8-c-card__body\" part=\"body\">\n <slot></slot>\n </div>\n ${this.slotNotEmpty('footer')\n && html`<div class=\"cre8-c-card__footer\" part=\"footer\"><slot name=\"footer\"></slot></div>`}\n </div>\n `;\n }\n}\n\nif (customElements.get('cre8-card') === undefined) {\n customElements.define('cre8-card', Cre8Card);\n}\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'cre8-card': Cre8Card;\n }\n}\n\nexport default Cre8Card;\n"]}

package/lib/components/card/card.styles.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,~~yBA2rBV~~,CAAC;AACH,eAAe,MAAM,CAAC"}
1	+ {"version":3,"file":"card.styles.d.ts","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AACA,QAAA,MAAM,MAAM,yBAmsBV,CAAC;AACH,eAAe,MAAM,CAAC"}

package/lib/components/card/card.styles.js CHANGED Viewed

@@ -606,6 +606,14 @@ span.ripple {
   background: var(--cre8-color-bg-default);
 }
+/**
+ * Compact card - reduced padding for narrow layouts
+ */
+.cre8-c-card--compact {
+  padding: 1rem;
+  gap: 0.5rem;
+}
 /**
  * Horizontal card
  * 1) Organized block with flex-direction set to row so that header => footer appears

package/lib/components/card/card.styles.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EA2rBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(8) !important;\n }\n}\n.cre8-u-margin-left-none {\n margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n display: flex !important;\n}\n\n.cre8-u-display-block {\n display: block !important;\n}\n\nbody {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n color: var(--cre8-color-content-default);\n background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n:host {\n display: block;\n}\n\n/\n 1) A card is an organized block that typically contains a title, image,\n * text, and/or calls to action. It is made up of an optional header slot, required\n * body slot, and optional footer slot to place other Components and content within.\n /\n.cre8-c-card {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n padding: 1.5rem;\n gap: 1rem;\n border-color: var(--cre8-color-border-default);\n border-style: var(--cre8-border-style-default);\n border-width: var(--cre8-border-width-default);\n border-radius: var(--cre8-border-radius-container);\n background: var(--cre8-color-bg-default);\n}\n\n/\n Horizontal card\n * 1) Organized block with flex-direction set to row so that header => footer appears\n * from left to right rather than top to bottom\n /\n.cre8-c-card--horizontal {\n flex-direction: row;\n align-items: center;\n justify-content: center;\n}\n\n/\n Bare card\n * 1) Organized block without a border, background, or padding\n /\n.cre8-c-card--bare {\n border: 0;\n padding: 0;\n gap: 0;\n box-shadow: none;\n}\n\n/\n Horizontal-bare card\n * 1) Organized block with flex-direction set to row so that header => footer appears\n * from left to right rather than top to bottom without a border, background, or padding\n /\n.cre8-c-card--horizontal-bare {\n flex-direction: row;\n border: 0;\n padding: 0;\n gap: 0;\n box-shadow: none;\n align-items: center;\n justify-content: center;\n}\n\n/\n Center aligned card\n * 1) Center content and text within the card\n /\n.cre8-c-card--align-center {\n text-align: center;\n / 1 /\n align-items: center;\n / 1 /\n justify-content: center;\n / 1 /\n}\n\n/\n Slotted image within a card\n * 1) Make the image full width\n /\n::slotted(img) {\n width: 100%;\n}\n\n/\n Card header\n * 1) Remove flex so that body always takes up remaining space\n /\n.cre8-c-card__header {\n display: block;\n flex: none;\n / 1 /\n}\n\n/\n Card body\n * 1) Flex applied to always fill the remaining space of the card\n /\n.cre8-c-card__body {\n display: block;\n flex: 1 1 auto;\n / 1 /\n}\n\n/\n Card footer\n * 1) Remove flex so that body always takes up remaining space\n /\n.cre8-c-card__footer {\n display: block;\n flex: none;\n / 1 */\n}\n.cre8-c-card--bare .cre8-c-card__footer {\n padding: 0;\n}\n.cre8-c-card--horizontal-bare .cre8-c-card__footer {\n padding: 0;\n}`;\nexport default styles;\n"]}
1	+ {"version":3,"file":"card.styles.js","sourceRoot":"","sources":["../../../components/card/card.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAC1B,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAmsBhB,CAAC;AACH,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`.cre8-u-content-knockout-brand {\n color: var(----cre8-color-content-knockout-brand);\n}\n\n.cre8-u-is-hidden {\n display: none !important;\n visibility: hidden !important;\n}\n\n.cre8-u-is-vishidden {\n position: absolute !important;\n overflow: hidden;\n width: 1px;\n height: 1px;\n padding: 0;\n border: 0;\n clip: rect(1px, 1px, 1px, 1px);\n}\n\n@media all and (min-width: 23.4375rem) {\n .cre8-u-hide-sm {\n display: none !important;\n }\n}\n@media all and (min-width: 35rem) {\n .cre8-u-hide-sm-2 {\n display: none !important;\n }\n}\n@media all and (min-width: 48rem) {\n .cre8-u-hide-md {\n display: none !important;\n }\n}\n@media all and (min-width: 60rem) {\n .cre8-u-hide-lg {\n display: none !important;\n }\n}\n@media all and (min-width: 75rem) {\n .cre8-u-hide-xl {\n display: none !important;\n }\n}\n@media all and (max-width: 23.4375rem) {\n .cre8-u-show-sm {\n display: none !important;\n }\n}\n@media all and (max-width: 35rem) {\n .cre8-u-show-sm-2 {\n display: none !important;\n }\n}\n@media all and (max-width: 48rem) {\n .cre8-u-show-md {\n display: none !important;\n }\n}\n@media all and (max-width: 60rem) {\n .cre8-u-show-lg {\n display: none !important;\n }\n}\n@media all and (max-width: 75rem) {\n .cre8-u-show-xl {\n display: none !important;\n }\n}\n.cre8-u-margin-none {\n margin: 0 !important;\n}\n\n.cre8-u-margin-sm {\n margin: size(1) !important;\n}\n\n.cre8-u-margin-md {\n margin: size(2) !important;\n}\n\n.cre8-u-margin-lg {\n margin: size(3) !important;\n}\n\n.cre8-u-margin-xl {\n margin: size(4) !important;\n}\n\n.cre8-u-margin-xxl {\n margin: size(8) !important;\n}\n\n.cre8-u-margin-top-none {\n margin-top: 0 !important;\n}\n\n.cre8-u-margin-top-sm {\n margin-top: size(1) !important;\n}\n\n.cre8-u-margin-top-md {\n margin-top: size(2) !important;\n}\n\n.cre8-u-margin-top-lg {\n margin-top: size(3) !important;\n}\n\n.cre8-u-margin-top-xl {\n margin-top: size(4) !important;\n}\n\n.cre8-u-margin-top-xxl {\n margin-top: size(8) !important;\n}\n\n.cre8-u-margin-right-none {\n margin-right: 0 !important;\n}\n\n.cre8-u-margin-right-sm {\n margin-right: size(1) !important;\n}\n\n.cre8-u-margin-right-md {\n margin-right: size(2) !important;\n}\n\n.cre8-u-margin-right-lg {\n margin-right: size(3) !important;\n}\n\n.cre8-u-margin-right-xl {\n margin-right: size(4) !important;\n}\n\n.cre8-u-margin-right-xxl {\n margin-right: size(8) !important;\n}\n\n.cre8-u-margin-bottom-none {\n margin-bottom: 0 !important;\n}\n\n.cre8-u-margin-bottom-sm {\n margin-bottom: size(1) !important;\n}\n\n.cre8-u-margin-bottom-md {\n margin-bottom: size(2) !important;\n}\n\n.cre8-u-margin-bottom-lg {\n margin-bottom: size(3) !important;\n}\n\n.cre8-u-margin-bottom-xl {\n margin-bottom: size(4) !important;\n}\n\n.cre8-u-margin-bottom-xxl {\n margin-bottom: size(8) !important;\n}\n\n.cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(4) !important;\n}\n\n@media all and (min-width: 768px) {\n .cre8-u-margin-bottom-xl-xxl {\n margin-bottom: size(8) !important;\n }\n}\n.cre8-u-margin-left-none {\n margin-left: 0 !important;\n}\n\n.cre8-u-margin-left-sm {\n margin-left: size(1) !important;\n}\n\n.cre8-u-margin-left-md {\n margin-left: size(2) !important;\n}\n\n.cre8-u-margin-left-lg {\n margin-left: size(3) !important;\n}\n\n.cre8-u-margin-left-xl {\n margin-left: size(4) !important;\n}\n\n.cre8-u-margin-left-xxl {\n margin-left: size(8) !important;\n}\n\n.cre8-u-padding-none {\n padding: 0 !important;\n}\n\n.cre8-u-padding-sm {\n padding: size(1) !important;\n}\n\n.cre8-u-padding-md {\n padding: size(2) !important;\n}\n\n.cre8-u-padding-lg {\n padding: size(3) !important;\n}\n\n.cre8-u-padding-xl {\n padding: size(4) !important;\n}\n\n.cre8-u-padding-xxl {\n padding: size(8) !important;\n}\n\n.cre8-u-padding-top-none {\n padding-top: 0 !important;\n}\n\n.cre8-u-padding-top-sm {\n padding-top: size(1) !important;\n}\n\n.cre8-u-padding-top-md {\n padding-top: size(2) !important;\n}\n\n.cre8-u-padding-top-lg {\n padding-top: size(3) !important;\n}\n\n.cre8-u-padding-top-xl {\n padding-top: size(4) !important;\n}\n\n.cre8-u-padding-top-xxl {\n padding-top: size(8) !important;\n}\n\n.cre8-u-padding-right-none {\n padding-right: 0 !important;\n}\n\n.cre8-u-padding-right-sm {\n padding-right: size(1) !important;\n}\n\n.cre8-u-padding-right-md {\n padding-right: size(2) !important;\n}\n\n.cre8-u-padding-right-lg {\n padding-right: size(3) !important;\n}\n\n.cre8-u-padding-right-xl {\n padding-right: size(4) !important;\n}\n\n.cre8-u-padding-right-xxl {\n padding-right: size(8) !important;\n}\n\n.cre8-u-padding-bottom-none {\n padding-bottom: 0 !important;\n}\n\n.cre8-u-padding-bottom-sm {\n padding-bottom: size(1) !important;\n}\n\n.cre8-u-padding-bottom-md {\n padding-bottom: size(2) !important;\n}\n\n.cre8-u-padding-bottom-lg {\n padding-bottom: size(3) !important;\n}\n\n.cre8-u-padding-bottom-xl {\n padding-bottom: size(4) !important;\n}\n\n.cre8-u-padding-bottom-xxl {\n padding-bottom: size(8) !important;\n}\n\n.cre8-u-padding-left-none {\n padding-left: 0 !important;\n}\n\n.cre8-u-padding-left-sm {\n padding-left: size(1) !important;\n}\n\n.cre8-u-padding-left-md {\n padding-left: size(2) !important;\n}\n\n.cre8-u-padding-left-lg {\n padding-left: size(3) !important;\n}\n\n.cre8-u-padding-left-xl {\n padding-left: size(4) !important;\n}\n\n.cre8-u-padding-left-xxl {\n padding-left: size(8) !important;\n}\n\n.cre8-u-display-flex {\n display: flex !important;\n}\n\n.cre8-u-display-block {\n display: block !important;\n}\n\nbody {\n font-family: var(--cre8-typography-body-default-font-family);\n font-size: var(--cre8-typography-body-default-font-size);\n font-weight: var(--cre8-typography-body-default-font-weight);\n line-height: var(--cre8-typography-body-default-line-height);\n -webkit-text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-decoration: var(--cre8-typography-body-default-text-decoration);\n text-transform: var(--cre8-typography-body-default-text-transform);\n display: flex;\n flex-direction: column;\n padding: 0;\n margin: 0;\n color: var(--cre8-color-content-default);\n background: var(--background-default);\n}\n\n@media all and (min-width: 60rem) {\n .page-container {\n background: linear-gradient(90deg, #fff 0, #fff 66.66%, #f8f8f9 0, #f8f8f9 0);\n }\n}\n.band__inner {\n margin-left: 2rem;\n margin-right: 2rem;\n}\n\n@media all and (min-width: 60rem) {\n .band__inner {\n margin-right: 0;\n }\n}\nimg {\n max-width: 100%;\n height: auto;\n}\n\n/*\n Border-Box http:/paulirish.com/2012/box-sizing-border-box-ftw/\n /\n,\n::slotted(),\n:before,\n:after {\n box-sizing: border-box;\n}\n\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n/\n=======\nAnimations\n=======\n/\n:host {\n --cre8-z-index-1: 1;\n --cre8-z-index-50: 50;\n --cre8-z-index-100: 100;\n --cre8-z-index-200: 200;\n --cre8-z-index-1030: 1030;\n --cre8-anim-fade-quick: 0.35s;\n --cre8-anim-ease: ease;\n}\n\n@keyframes fadeIn {\n 100% {\n opacity: 1;\n }\n}\n@keyframes slideIn {\n 100% {\n transform: translateX(0);\n }\n}\n@keyframes slideInFwd {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideOutRight {\n 100% {\n width: 272px;\n height: 272px;\n }\n}\n@keyframes slideUp {\n 100% {\n transform: translateY(0);\n }\n}\n@media (width >= 481px) {\n @keyframes slideInFwd {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 417px;\n height: 417px;\n }\n }\n}\n@media (width >= 48rem) {\n @keyframes slideInFwd {\n 100% {\n width: 330px;\n height: 330px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 330px;\n height: 330px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 60rem) {\n @keyframes slideInFwd {\n 100% {\n width: 460px;\n height: 460px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 460px;\n height: 460px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 75rem) {\n @keyframes slideInFwd {\n 100% {\n width: 592px;\n height: 591px;\n }\n }\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 45px));\n }\n }\n}\n@media (width >= 87.5rem) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 120px));\n }\n }\n}\n@media (width >= 2200px) {\n @keyframes slideOutRight {\n 100% {\n width: 592px;\n height: 591px;\n transform: translateX(calc(100vw - 592px));\n }\n }\n}\nspan.ripple {\n position: absolute;\n border-radius: 50%;\n transform: scale(0);\n animation: ripple 600ms linear;\n background-color: var(--ripple-bg-color);\n}\n\n@keyframes ripple {\n to {\n transform: scale(4);\n opacity: 1;\n }\n}\n:root {\n --size-base-unit: 0.5rem;\n}\n\n/\n RTL support for values logical properties can't automatically adjust for\n * 1) Percentage based horizontal translate values need to be flipped\n * 2) Background gradients using \"to-right\" or \"to-left\" need to be switched to using deg values.\n * 3) Inverse items that have 45degs\n /\n[dir=rtl] {\n --rtlTranslateX: 50%;\n / 1 /\n --rtlGradientToRight: 270deg;\n / 2 /\n --rtlRotate45Inverse: -45deg;\n / 3 /\n}\n\n/\n Visible focus outline for elements on a light background\n /\n/\n Visible focus outline for elements with an error status\n /\n/\n Visible focus outline for elements on a dark background\n /\n/\n Focus state for themes that need a dashed outline for focus\n* state\n/\n/\n * Invisible focus outline for elements that need a more visible\n * focus state for high-contrast mode\n /\n/\n Visually hidden from display\n /\n:host {\n display: block;\n}\n\n/\n 1) A card is an organized block that typically contains a title, image,\n * text, and/or calls to action. It is made up of an optional header slot, required\n * body slot, and optional footer slot to place other Components and content within.\n /\n.cre8-c-card {\n overflow: hidden;\n display: flex;\n flex-direction: column;\n height: 100%;\n width: 100%;\n padding: 1.5rem;\n gap: 1rem;\n border-color: var(--cre8-color-border-default);\n border-style: var(--cre8-border-style-default);\n border-width: var(--cre8-border-width-default);\n border-radius: var(--cre8-border-radius-container);\n background: var(--cre8-color-bg-default);\n}\n\n/\n Compact card - reduced padding for narrow layouts\n /\n.cre8-c-card--compact {\n padding: 1rem;\n gap: 0.5rem;\n}\n\n/\n Horizontal card\n * 1) Organized block with flex-direction set to row so that header => footer appears\n * from left to right rather than top to bottom\n /\n.cre8-c-card--horizontal {\n flex-direction: row;\n align-items: center;\n justify-content: center;\n}\n\n/\n Bare card\n * 1) Organized block without a border, background, or padding\n /\n.cre8-c-card--bare {\n border: 0;\n padding: 0;\n gap: 0;\n box-shadow: none;\n}\n\n/\n Horizontal-bare card\n * 1) Organized block with flex-direction set to row so that header => footer appears\n * from left to right rather than top to bottom without a border, background, or padding\n /\n.cre8-c-card--horizontal-bare {\n flex-direction: row;\n border: 0;\n padding: 0;\n gap: 0;\n box-shadow: none;\n align-items: center;\n justify-content: center;\n}\n\n/\n Center aligned card\n * 1) Center content and text within the card\n /\n.cre8-c-card--align-center {\n text-align: center;\n / 1 /\n align-items: center;\n / 1 /\n justify-content: center;\n / 1 /\n}\n\n/\n Slotted image within a card\n * 1) Make the image full width\n /\n::slotted(img) {\n width: 100%;\n}\n\n/\n Card header\n * 1) Remove flex so that body always takes up remaining space\n /\n.cre8-c-card__header {\n display: block;\n flex: none;\n / 1 /\n}\n\n/\n Card body\n * 1) Flex applied to always fill the remaining space of the card\n /\n.cre8-c-card__body {\n display: block;\n flex: 1 1 auto;\n / 1 /\n}\n\n/\n Card footer\n * 1) Remove flex so that body always takes up remaining space\n /\n.cre8-c-card__footer {\n display: block;\n flex: none;\n / 1 */\n}\n.cre8-c-card--bare .cre8-c-card__footer {\n padding: 0;\n}\n.cre8-c-card--horizontal-bare .cre8-c-card__footer {\n padding: 0;\n}`;\nexport default styles;\n"]}

package/lib/components/checkbox-field-item/checkbox-field-item.d.ts CHANGED Viewed

@@ -22,6 +22,12 @@ import { Cre8FormElement } from '../cre8-form-element';
  *   Minimize the number of optional fields to keep forms as short as possible.
  * - Always include a label written in sentence case.
  * - Avoid using the read-only and disabled states as much as possible.
+ *
+ * @slot fieldNote - Container for optional field note content
+ *
+ * @cssproperty "--cre8-border-radius-checkbox" - border radius of the checkbox box; falls back to --cre8-border-radius-small
+ *
+ * @fires change - Fires when the checkbox is toggled. `event.detail` is `{ name, value }`.
  */
 export declare class Cre8CheckboxFieldItem extends Cre8FormElement {
     readonly type = "checkbox";

package/lib/components/checkbox-field-item/checkbox-field-item.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"checkbox-field-item.d.ts","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.ts"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AACtB,OAAO,0BAA0B,CAAC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD~~;;;;;;;;;;;;;;;;;;;;;GAqBG~~;AACH,qBAAa,qBAAsB,SAAQ,eAAe;IACtD,QAAQ,CAAC,IAAI,cAAc;IAE3B,MAAM,CAAC,MAAM,4BAAY;IAEzB;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,SAAS,EAAE,MAAM,CAAW;IAE5B;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,WAAW,EAAE,MAAM,CAAa;IAEhC;;OAEG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IAEH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAInC;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IAEH,KAAK,EAAG,gBAAgB,CAAC;IAEzB,UAAmB,YAAY,EAAE,OAAO,CAAC;IAEzC;;;;;;;MAOE;IAEF,iBAAiB;IAMjB;;OAEG;IACH,OAAO,CAAC,OAAO;IAQf;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAInB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAKrB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAkBvB;;;;;;OAMG;IACH,iBAAiB,IAAI,IAAI;IAOzB;;;OAGG;IACH,YAAY;IAKZ;;OAEG;IACH,cAAc;IAUd;;;;;;;OAOG;IACH,aAAa,IAAI,MAAM;IASvB;;;;OAIG;IACH,2BAA2B;IA0B3B,MAAM;CAqCT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,0BAA0B,EAAE,qBAAqB,CAAC;KACrD;CACJ;AAED,eAAe,qBAAqB,CAAC"}
1	+ {"version":3,"file":"checkbox-field-item.d.ts","sourceRoot":"","sources":["../../../components/checkbox-field-item/checkbox-field-item.ts"],"names":[],"mappings":"AAIA,OAAO,cAAc,CAAC;AACtB,OAAO,0BAA0B,CAAC;AAGlC,OAAO,EAAE,eAAe,EAAE,MAAM,sBAAsB,CAAC;AAEvD;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2BG;AACH,qBAAa,qBAAsB,SAAQ,eAAe;IACtD,QAAQ,CAAC,IAAI,cAAc;IAE3B,MAAM,CAAC,MAAM,4BAAY;IAEzB;;OAEG;IAEH,KAAK,CAAC,EAAE,MAAM,CAAC;IAEf;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,SAAS,EAAE,MAAM,CAAW;IAE5B;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,SAAS,CAAC,EAAE,OAAO,CAAC;IAEpB;;OAEG;IAEH,WAAW,EAAE,MAAM,CAAa;IAEhC;;OAEG;IAEH,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;;OAGG;IAEH,OAAO,CAAC,EAAE,OAAO,CAAC;IAElB;;;OAGG;IAEH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;OAEG;IAEH,SAAS,CAAC,EAAE,MAAM,CAAC;IAEnB;;;OAGG;IAEH,eAAe,CAAC,EAAE,MAAM,CAAC;IAEzB;;OAEG;IAEH,yBAAyB,CAAC,EAAE,MAAM,CAAC;IAInC;;;OAGG;IAEH,QAAQ,CAAC,EAAE,OAAO,CAAC;IAEnB;;OAEG;IAEH,iBAAiB,CAAC,EAAE,MAAM,CAAC;IAE3B;;OAEG;IAEH,KAAK,EAAG,gBAAgB,CAAC;IAEzB,UAAmB,YAAY,EAAE,OAAO,CAAC;IAEzC;;;;;;;MAOE;IAEF,iBAAiB;IAMjB;;OAEG;IACH,OAAO,CAAC,OAAO;IAQf;;;;OAIG;IACH,OAAO,CAAC,WAAW;IAInB;;;OAGG;IACH,OAAO,CAAC,aAAa;IAKrB;;;;OAIG;IACH,OAAO,CAAC,eAAe;IAkBvB;;;;;;OAMG;IACH,iBAAiB,IAAI,IAAI;IAOzB;;;OAGG;IACH,YAAY;IAKZ;;OAEG;IACH,cAAc;IAUd;;;;;;;OAOG;IACH,aAAa,IAAI,MAAM;IASvB;;;;OAIG;IACH,2BAA2B;IA0B3B,MAAM;CAqCT;AAMD,OAAO,CAAC,MAAM,CAAC;IACX,UAAU,qBAAqB;QAC3B,0BAA0B,EAAE,qBAAqB,CAAC;KACrD;CACJ;AAED,eAAe,qBAAqB,CAAC"}

package/lib/components/checkbox-field-item/checkbox-field-item.js CHANGED Viewed

@@ -34,6 +34,12 @@ import { Cre8FormElement } from '../cre8-form-element';
  *   Minimize the number of optional fields to keep forms as short as possible.
  * - Always include a label written in sentence case.
  * - Avoid using the read-only and disabled states as much as possible.
+ *
+ * @slot fieldNote - Container for optional field note content
+ *
+ * @cssproperty "--cre8-border-radius-checkbox" - border radius of the checkbox box; falls back to --cre8-border-radius-small
+ *
+ * @fires change - Fires when the checkbox is toggled. `event.detail` is `{ name, value }`.
  */
 export class Cre8CheckboxFieldItem extends Cre8FormElement {
     constructor() {