@tmorrow/cre8-wc 1.1.2 → 1.1.3

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

@@ -0,0 +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;"]}

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

@@ -1,31 +1,34 @@
-import { css as o, html as l } from "lit";
-import { property as p } from "lit/decorators.js";
-import { Cre8Element as h } from "../cre8-element.js";
-const m = o`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-button-group{display:flex;flex-wrap:wrap;gap:1rem}.cre8-c-button-group--responsive-full-width{flex-direction:column;--cre8-button-width: 100%}@media all and (min-width: 768px){.cre8-c-button-group--responsive-full-width{flex-direction:row;--cre8-button-width: auto}}`;
-var c = Object.defineProperty, f = (a, t, d, x) => {
-  for (var e = void 0, i = a.length - 1, n; i >= 0; i--)
-    (n = a[i]) && (e = n(t, d, e) || e);
-  return e && c(t, d, e), e;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const s = class s extends h {
-  render() {
-    const t = this.componentClassNames("cre8-c-button-group", {
-      "cre8-c-button-group--responsive-full-width": this.orientation === "responsive-full-width"
-    });
-    return l`
-      <div class="${t}">
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './button-group.styles.js';
+/**
+ * @slot - The component content
+ */
+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',
+        });
+        return html `
+      <div class="${componentClassNames}">
         <slot></slot>
       </div>
     `;
-  }
-};
-s.styles = [m];
-let r = s;
-f([
-  p()
-], r.prototype, "orientation");
-customElements.get("cre8-button-group") === void 0 && customElements.define("cre8-button-group", r);
-export {
-  r as Cre8ButtonGroup,
-  r as default
-};
+    }
+}
+Cre8ButtonGroup.styles = [styles];
+__decorate([
+    property()
+], Cre8ButtonGroup.prototype, "orientation", void 0);
+if (customElements.get('cre8-button-group') === undefined) {
+    customElements.define('cre8-button-group', Cre8ButtonGroup);
+}
+export default Cre8ButtonGroup;
+//# sourceMappingURL=button-group.js.map

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

@@ -0,0 +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"]}

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-button-group{display:flex;flex-wrap:wrap;gap:1rem}.cre8-c-button-group--responsive-full-width{flex-direction:column;--cre8-button-width: 100%}@media all and (min-width: 768px){.cre8-c-button-group--responsive-full-width{flex-direction:row;--cre8-button-width: auto}}`;
+export default styles;
+//# sourceMappingURL=button-group.styles.js.map

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

@@ -0,0 +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,sjEAAsjE,CAAC;AACzkE,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:inline-flex}.cre8-c-button-group{display:flex;flex-wrap:wrap;gap:1rem}.cre8-c-button-group--responsive-full-width{flex-direction:column;--cre8-button-width: 100%}@media all and (min-width: 768px){.cre8-c-button-group--responsive-full-width{flex-direction:row;--cre8-button-width: auto}}`;\nexport default styles;\n"]}

package/lib/components/card/card.js

@@ -1,41 +1,63 @@
-import { css as h, html as i } from "lit";
-import { property as n } from "lit/decorators.js";
-import { Cre8Element as p } from "../cre8-element.js";
-const m = h`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-card{overflow:hidden;display:flex;flex-direction:column;height:100%;width:100%;padding:1.5rem;gap:1rem;border-color:var(--cre8-color-border-default);border-style:var(--cre8-border-style-default);border-width:var(--cre8-border-width-default);border-radius:var(--cre8-border-radius-default);background:var(--cre8-color-bg-default)}.cre8-c-card--horizontal{flex-direction:row;align-items:center;justify-content:center}.cre8-c-card--bare{border:0;padding:0;gap:0;box-shadow:none}.cre8-c-card--horizontal-bare{flex-direction:row;border:0;padding:0;gap:0;box-shadow:none;align-items:center;justify-content:center}.cre8-c-card--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.cre8-c-card__header{display:block;flex:none}.cre8-c-card__body{display:block;flex:1 1 auto}.cre8-c-card__footer{display:block;flex:none}.cre8-c-card--bare .cre8-c-card__footer{padding:0}.cre8-c-card--horizontal-bare .cre8-c-card__footer{padding:0}`;
-var f = Object.defineProperty, l = (o, t, s, x) => {
-  for (var e = void 0, a = o.length - 1, c; a >= 0; a--)
-    (c = o[a]) && (e = c(t, s, e) || e);
-  return e && f(t, s, e), e;
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
 };
-const d = class d extends p {
-  render() {
-    const t = this.componentClassNames("cre8-c-card", {
-      "cre8-c-card--bare": this.variant === "bare",
-      "cre8-c-card--horizontal": this.variant === "horizontal",
-      "cre8-c-card--horizontal-bare": this.variant === "horizontal-bare",
-      "cre8-c-card--align-center": this.align === "center"
-    });
-    return i`
-      <div class="${t}" part="card">
-        ${this.slotNotEmpty("header") && i`<div class="cre8-c-card__header" part="header"><slot name="header"></slot></div>`}
+import { html, } from 'lit';
+import { property } from 'lit/decorators.js';
+import { Cre8Element } from '../cre8-element';
+import styles from './card.styles.js';
+/** The card component acts a general container element sectioned off by slots: `header`, `body`, `footer`.
+*
+* # How to Use
+* 1. Wrap the card component tags around any html template code which has been properly imported into the file.
+* 2. Decide the layout that best fits the designs assigned to your work.
+*   Generally, we recommend visual elements appear in the `header` (optional slot),
+*   while `body` remains reserved for custom html content that gives further context and meaning to the `header`.
+* 3. The card defaults to a column and includes a `horizontal` directional variant.
+*   If you have a card where the layout of the content is more aligned horizontally,
+*   using the `horizontal` variant will ease the construction of your component
+* 4. Finally, we typically recommend reserving the footer for any interactive elements
+*   such as buttons for navigating to further information.
+*
+*
+* NOTE: Adjusting props not mentioned above may result in unpredictable states
+*
+* @slot body - The card's body content
+* @slot header - (Optional) Content in the card's header
+* @slot footer - (Optional) Content in the card's footer
+*/
+export class Cre8Card extends Cre8Element {
+    render() {
+        const componentClassNames = this.componentClassNames('cre8-c-card', {
+            'cre8-c-card--bare': this.variant === 'bare',
+            'cre8-c-card--horizontal': this.variant === 'horizontal',
+            'cre8-c-card--horizontal-bare': this.variant === 'horizontal-bare',
+            'cre8-c-card--align-center': this.align === 'center',
+        });
+        return html `
+      <div class="${componentClassNames}" part="card">
+        ${this.slotNotEmpty('header')
+            && html `<div class="cre8-c-card__header" part="header"><slot name="header"></slot></div>`}
         <div class="cre8-c-card__body" part="body">
           <slot></slot>
         </div>
-        ${this.slotNotEmpty("footer") && i`<div class="cre8-c-card__footer" part="footer"><slot name="footer"></slot></div>`}
+        ${this.slotNotEmpty('footer')
+            && html `<div class="cre8-c-card__footer" part="footer"><slot name="footer"></slot></div>`}
       </div>
     `;
-  }
-};
-d.styles = [m];
-let r = d;
-l([
-  n()
-], r.prototype, "variant");
-l([
-  n()
-], r.prototype, "align");
-customElements.get("cre8-card") === void 0 && customElements.define("cre8-card", r);
-export {
-  r as Cre8Card,
-  r as default
-};
+    }
+}
+Cre8Card.styles = [styles];
+__decorate([
+    property()
+], Cre8Card.prototype, "variant", void 0);
+__decorate([
+    property()
+], Cre8Card.prototype, "align", void 0);
+if (customElements.get('cre8-card') === undefined) {
+    customElements.define('cre8-card', Cre8Card);
+}
+export default Cre8Card;
+//# sourceMappingURL=card.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"card.js","sourceRoot":"","sources":["../../../components/card/card.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,kBAAkB,CAAC;AAEtC;;;;;;;;;;;;;;;;;;;EAmBE;AACF,MAAM,OAAO,QAAS,SAAQ,WAAW;IAoBvC,MAAM;QACF,MAAM,mBAAmB,GAAG,IAAI,CAAC,mBAAmB,CAAC,aAAa,EAAE;YAChE,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;SACvD,CAAC,CAAC;QAEH,OAAO,IAAI,CAAA;oBACG,mBAAmB;UAC7B,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eACxB,IAAI,CAAA,kFAAkF;;;;UAIzF,IAAI,CAAC,YAAY,CAAC,QAAQ,CAAC;eACxB,IAAI,CAAA,kFAAkF;;KAE9F,CAAC;IACJ,CAAC;;AAtCQ,eAAM,GAAG,CAAC,MAAM,CAAC,CAAC;AAUvB;IADH,QAAQ,EAAE;yCAC6C;AAOpD;IADH,QAAQ,EAAE;uCACU;AAwBvB,IAAI,cAAc,CAAC,GAAG,CAAC,WAAW,CAAC,KAAK,SAAS,EAAE,CAAC;IAChD,cAAc,CAAC,MAAM,CAAC,WAAW,EAAE,QAAQ,CAAC,CAAC;AACjD,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"]}

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

@@ -0,0 +1,4 @@
+import { css } from 'lit';
+const styles = css `*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-card{overflow:hidden;display:flex;flex-direction:column;height:100%;width:100%;padding:1.5rem;gap:1rem;border-color:var(--cre8-color-border-default);border-style:var(--cre8-border-style-default);border-width:var(--cre8-border-width-default);border-radius:var(--cre8-border-radius-default);background:var(--cre8-color-bg-default)}.cre8-c-card--horizontal{flex-direction:row;align-items:center;justify-content:center}.cre8-c-card--bare{border:0;padding:0;gap:0;box-shadow:none}.cre8-c-card--horizontal-bare{flex-direction:row;border:0;padding:0;gap:0;box-shadow:none;align-items:center;justify-content:center}.cre8-c-card--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.cre8-c-card__header{display:block;flex:none}.cre8-c-card__body{display:block;flex:1 1 auto}.cre8-c-card__footer{display:block;flex:none}.cre8-c-card--bare .cre8-c-card__footer{padding:0}.cre8-c-card--horizontal-bare .cre8-c-card__footer{padding:0}`;
+export default styles;
+//# sourceMappingURL=card.styles.js.map

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

@@ -0,0 +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,8uFAA8uF,CAAC;AACjwF,eAAe,MAAM,CAAC","sourcesContent":["import { css } from 'lit';\nconst styles = css`*,::slotted(*),*:before,*:after{box-sizing:border-box}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{--cre8-z-index-1: 1;--cre8-z-index-50: 50;--cre8-z-index-100: 100;--cre8-z-index-200: 200;--cre8-z-index-1030: 1030;--cre8-anim-fade-quick: 0.35s;--cre8-anim-ease: ease}@keyframes fadeIn{100%{opacity:1}}@keyframes slideIn{100%{transform:translateX(0)}}@keyframes slideInFwd{100%{width:272px;height:272px}}@keyframes slideOutRight{100%{width:272px;height:272px}}@keyframes slideUp{100%{transform:translateY(0)}}@media(width >= 481px){@keyframes slideInFwd{100%{width:417px;height:417px}}@keyframes slideOutRight{100%{width:417px;height:417px}}}@media(width >= 48rem){@keyframes slideInFwd{100%{width:330px;height:330px}}@keyframes slideOutRight{100%{width:330px;height:330px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 60rem){@keyframes slideInFwd{100%{width:460px;height:460px}}@keyframes slideOutRight{100%{width:460px;height:460px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 75rem){@keyframes slideInFwd{100%{width:592px;height:591px}}@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 45px))}}}@media(width >= 87.5rem){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 120px))}}}@media(width >= 2200px){@keyframes slideOutRight{100%{width:592px;height:591px;transform:translateX(calc(100vw - 592px))}}}span.ripple{position:absolute;border-radius:50%;transform:scale(0);animation:ripple 600ms linear;background-color:var(--ripple-bg-color)}@keyframes ripple{to{transform:scale(4);opacity:1}}:root{--size-base-unit: 0.5rem}[dir=rtl]{--rtlTranslateX: 50%;--rtlGradientToRight: 270deg;--rtlRotate45Inverse: -45deg}:host{display:block}.cre8-c-card{overflow:hidden;display:flex;flex-direction:column;height:100%;width:100%;padding:1.5rem;gap:1rem;border-color:var(--cre8-color-border-default);border-style:var(--cre8-border-style-default);border-width:var(--cre8-border-width-default);border-radius:var(--cre8-border-radius-default);background:var(--cre8-color-bg-default)}.cre8-c-card--horizontal{flex-direction:row;align-items:center;justify-content:center}.cre8-c-card--bare{border:0;padding:0;gap:0;box-shadow:none}.cre8-c-card--horizontal-bare{flex-direction:row;border:0;padding:0;gap:0;box-shadow:none;align-items:center;justify-content:center}.cre8-c-card--align-center{text-align:center;align-items:center;justify-content:center}::slotted(img){width:100%}.cre8-c-card__header{display:block;flex:none}.cre8-c-card__body{display:block;flex:1 1 auto}.cre8-c-card__footer{display:block;flex:none}.cre8-c-card--bare .cre8-c-card__footer{padding:0}.cre8-c-card--horizontal-bare .cre8-c-card__footer{padding:0}`;\nexport default styles;\n"]}