@tmorrow/cre8-wc 1.2.4 → 1.2.6

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.d.ts

@@ -0,0 +1,19 @@
+import { Cre8Element } from '../cre8-element';
+/**
+ * @slot - The component content
+ */
+export declare class Cre8ButtonGroup extends Cre8Element {
+    static styles: import("lit").CSSResult[];
+    /**
+     * Responsive Button Group (for modals)
+     */
+    orientation?: 'responsive-full-width';
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'cre8-button-group': Cre8ButtonGroup;
+    }
+}
+export default Cre8ButtonGroup;
+//# sourceMappingURL=button-group.d.ts.map

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

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