@aquera/nile-elements 0.1.39-beta-1.1 → 0.1.39-beta-1.2

package/dist/nile-button/nile-button.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-button.css.cjs.js","sources":["../../../src/nile-button/nile-button.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n    font-style: normal;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n    cursor: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n    padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-sm, var(--ng-spacing-xs));\n    line-height: var(--nile-line-height-small);\n    box-sizing: border-box;\n    height: var(--nile-height-40px, var(--ng-height-40px));\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n    outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--nile-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(\n      --nile-textarea-standard-disabled-box-shadow,\n      var(--ng-shadow-xs-skeuomorphic)\n    );\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n    border-color: var(--nile-colors-primary-700, var(--nile-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-900, var(--nile-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--nile-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: transparent;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-neutral-400);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--nile-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n    border-color: var(--nile-colors-red-700, var(--nile-primary-standard));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--nile-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--nile-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--nile-primary-standard));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-700);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  .button--pill.button--medium {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: var(--nile-spacing-none);\n    padding-right: var(--nile-spacing-none);\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: var(--nile-type-scale-4);\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-button.css.cjs.js","sources":["../../../src/nile-button/nile-button.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: var(--nile-border-size-1, var(--ng-border-width-1));\n    font-style: normal;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default, var(--ng-transition-duration-default)) background-color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) color,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) border,\n      var(--nile-transition-duration-default, var(--ng-transition-duration-default)) box-shadow;\n    cursor: inherit;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n    border-radius: var(--nile-radius-base-standard, var(--ng-radius-md));\n    padding: var(--nile-spacing-10px, var(--ng-spacing-md-alt)) var(--nile-spacing-14px, var(--ng-spacing-lg));\n    gap: var(--nile-spacing-sm, var(--ng-spacing-xs));\n    line-height: var(--nile-line-height-small);\n    box-sizing: border-box;\n    height: var(--nile-height-40px, var(--ng-height-40px));\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: var(--nile-outline-5px, --ng-outline-5px) auto var(--ng-colors-bg-brand-solid, -webkit-focus-ring-color);\n    outline-offset: var(--ng-outline-2px, --ng-outline-4px);\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));  \n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(\n      --nile-textarea-standard-disabled-box-shadow,\n      var(--ng-shadow-xs-skeuomorphic)\n    ); //TODO: fix\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n    border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-primary-hover));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-hover));\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-700, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n  }\n\n  .button--standard.button--tertiary.button--disabled,\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-tertiary-600));\n    box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring));\n  }\n\n  /* ghost  */\n  .button--standard.button--ghost {\n    background-color: var(--nile-colors-white-base);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: transparent;\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--ghost.button--disabled,\n  .button--standard.button--ghost.button--disabled:hover,\n  .button--standard.button--ghost.button--disabled:active {\n    border-color: transparent;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution.button--disabled,\n  .button--standard.button--caution.button--disabled:hover,\n  .button--standard.button--caution.button--disabled:active {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-neutral-400);\n  }\n\n  /* destructive */\n  .button--standard.button--destructive {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));\n    border-color: var(--nile-colors-red-700, var(--ng-primary-standard));\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));\n    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))\n  }\n\n  .button--standard.button--destructive.button--disabled {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));\n    border-color: var(--nile-colors-neutral-400, var(--ng-colors-border-disabled-subtle));\n    color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));\n    cursor: not-allowed;\n  }\n\n  /* secondary-Grey */\n  .button--standard.button--secondary-grey {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-grey:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-primary-900);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(152, 162, 179, 0.14);\n  }\n\n  .button--standard.button--secondary-grey.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-grey.button--disabled:hover,\n  .button--standard.button--secondary-grey.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* secondary-blue */\n  .button--standard.button--secondary-blue {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-blue-100);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--secondary-blue:active:not(.button--disabled) {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-primary-500);\n    color: var(--nile-colors-primary-700);\n    box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),\n      0px 0px 0px 4px rgba(0, 94, 166, 0.15);\n  }\n\n  .button--standard.button--secondary-blue.button--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary-blue.button--disabled:hover,\n  .button--standard.button--secondary-blue.button--disabled:active {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /* Primary Variant - Nile Icon Fill */\n  .button--standard.button--primary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon)) !important;\n  }\n  .button--standard.button--primary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--primary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-primary-icon-hover)) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Secondary Variant */\n  .button--standard.button--secondary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--secondary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--secondary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /* Tertiary Variant */\n  .button--standard.button--tertiary ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n  .button--standard.button--tertiary:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--tertiary:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900, var(--ng-colors-fg-quaternary-hover)) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500, var(--ng-colors-fg-quaternary-400)) !important;\n  }\n\n  /* Ghost Variant */\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--ghost:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-900) !important;\n  }\n  .button--standard.button--ghost ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !important;\n  }\n\n  /* Caution Variant */\n  .button--standard.button--caution ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !important;\n  }\n  .button--standard.button--caution.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-400) !important;\n  }\n\n  /* destructive */\n  .button--standard.button--destructive ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon)) !important;\n  }\n  .button--standard.button--destructive:hover:not(.button--disabled)\n    ::slotted(nile-icon:not([color])),\n  .button--standard.button--caution:active:not(.button--disabled)\n    ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-componentcolors-components-button-destructive-primary-icon-hover)) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base, var(--ng-colors-fg-disabled-subtle)) !important;\n  }\n\n  /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* destructive  */\n  .button--outline.button--destructive {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--destructive:hover:not(.button--disabled),\n  .button--outline.button--destructive.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-100);\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400);\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* destructive - focus-visible */\n  .button--outline.button--destructive:focus-visible:not(.button--disabled) {\n    border-color: var(--nile-colors-red-400, var(--ng-colors-effects-focus-ring-error));\n    color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),\n      0px 0px 0px 4px rgba(240, 68, 56, 0.24);\n  }\n\n  /* secondary-grey  */\n  .button--outline.button--secondary-grey {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:hover:not(.button--disabled),\n  .button--outline.button--secondary-grey.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-900);\n    background-color: var(--nile-colors-neutral-100);\n  }\n\n  .button--outline.button--secondary-grey:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-grey:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  /* secondary-blue  */\n  .button--outline.button--secondary-blue {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:hover:not(.button--disabled),\n  .button--outline.button--secondary-blue.button--checked:not(\n      .button--disabled\n    ) {\n    color: var(--nile-colors-primary-700);\n    background-color: var(--nile-colors-blue-100);\n  }\n\n  .button--outline.button--secondary-blue:active:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  .button--outline.button--secondary-blue:focus-visible:not(.button--disabled) {\n    box-shadow: 0px;\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  .button--pill.button--medium {\n    border-radius: var(--nile-radius-2xl);\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: var(--nile-spacing-none);\n    padding-right: var(--nile-spacing-none);\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: var(--nile-type-scale-4);\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  /* outline with no border */\n  .button--outline.button--hideborder {\n    border: 0px;\n  }\n`;\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-button/nile-button.css.esm.js

@@ -4,6 +4,9 @@ import{css as o}from"lit";const r=o`
     position: relative;
     width: auto;
     cursor: pointer;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .button {
@@ -60,23 +63,23 @@ import{css as o}from"lit";const r=o`
   /* Primary */
   .button--standard.button--primary {
     background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
-    border-color: var(--nile-colors-primary-600, var(--nile-primary-standard));
+    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));  
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
     box-shadow: var(
       --nile-textarea-standard-disabled-box-shadow,
       var(--ng-shadow-xs-skeuomorphic)
-    );
+    ); //TODO: fix
   }
 
   .button--standard.button--primary:hover:not(.button--disabled) {
     background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));
-    border-color: var(--nile-colors-primary-700, var(--nile-primary-standard));
+    border-color: var(--nile-colors-primary-700, var(--ng-primary-standard));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
   }
 
   .button--standard.button--primary:active:not(.button--disabled) {
     background-color: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid));
-    border-color: var(--nile-colors-primary-900, var(--nile-primary-standard));
+    border-color: var(--nile-colors-primary-900, var(--ng-primary-standard));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
   }
 
@@ -98,7 +101,7 @@ import{css as o}from"lit";const r=o`
 
   .button--standard.button--primary:focus-visible:not(.button--disabled) {
     background-color: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));
-    border-color: var(--nile-colors-primary-600, var(--nile-primary-standard));
+    border-color: var(--nile-colors-primary-600, var(--ng-primary-standard));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
     box-shadow: var(--nile-box-shadow-none,var(--ng-focus-ring-shadow-xs-skeumorphic));
   }
@@ -239,25 +242,25 @@ import{css as o}from"lit";const r=o`
   /* destructive */
   .button--standard.button--destructive {
     background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--nile-primary-standard));
+    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
     box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));
   }
 
   .button--standard.button--destructive:hover:not(.button--disabled) {
     background-color: var(--nile-colors-red-700, var(--ng-colors-bg-error-solid-hover));
-    border-color: var(--nile-colors-red-700, var(--nile-primary-standard));
+    border-color: var(--nile-colors-red-700, var(--ng-primary-standard));
     box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));
   }
 
   .button--standard.button--destructive:active:not(.button--disabled) {
     background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--nile-primary-standard));
+    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
   }
   .button--standard.button--destructive:focus-visible:not(.button--disabled) {
     background-color: var(--nile-colors-red-500, var(--ng-colors-bg-error-solid));
-    border-color:  var(--nile-colors-red-500, var(--nile-primary-standard));
+    border-color:  var(--nile-colors-red-500, var(--ng-primary-standard));
     color: var(--nile-colors-white-base, var(--ng-colors-text-white));
     box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring-error-shadow-xs-skeumorphic))
   }
@@ -272,7 +275,7 @@ import{css as o}from"lit";const r=o`
 
   .button--standard.button--destructive.button--disabled:active {
     background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-disabled));
-    border-color: var(--nile-colors-neutral-400, var(--nile-primary-standard));
+    border-color: var(--nile-colors-neutral-400, var(--ng-primary-standard));
     color: var(--nile-colors-neutral-500, var(--ng-colors-fg-disabled));
     cursor: not-allowed;
   }

package/dist/nile-button-filter/nile-button-filter.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var e,_templateObject,t;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){e=_lit.css;}],execute:function execute(){_export("s",t=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n  }\n\n  .inner__text {\n    display: flex;\n    gap: var(--nile-radius-base-standard);\n\talign-items: flex-start;\n  }\n\n  .inner__text span {\n    color: var(--nile-colors-dark-900);\n    text-align: center;\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-font-size-base);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-semi-bold);\n    line-height: var(--nile-font-size-base); /* 100% */\n    letter-spacing: 0.2px;\n  }\n\n  .inner__text nile-badge {\n    color:var(--nile-colors-white-base);\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var t,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){t=_lit.css;}],execute:function execute(){_export("s",e=t(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .inner__text {\n    display: flex;\n    gap: var(--nile-radius-base-standard);\n\talign-items: flex-start;\n  }\n\n  .inner__text span {\n    color: var(--nile-colors-dark-900);\n    text-align: center;\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-font-size-base);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-semi-bold);\n    line-height: var(--nile-font-size-base); /* 100% */\n    letter-spacing: 0.2px;\n  }\n\n  .inner__text nile-badge {\n    color:var(--nile-colors-white-base);\n  }\n"]))));}};});
 //# sourceMappingURL=nile-button-filter.css.cjs.js.map

package/dist/nile-button-filter/nile-button-filter.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-button-filter.css.cjs.js","sources":["../../../src/nile-button-filter/nile-button-filter.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ButtonFilter CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .inner__text {\n    display: flex;\n    gap: var(--nile-radius-base-standard);\n\talign-items: flex-start;\n  }\n\n  .inner__text span {\n    color: var(--nile-colors-dark-900);\n    text-align: center;\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-font-size-base);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-semi-bold);\n    line-height: var(--nile-font-size-base); /* 100% */\n    letter-spacing: 0.2px;\n  }\n\n  .inner__text nile-badge {\n    color:var(--nile-colors-white-base);\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-button-filter.css.cjs.js","sources":["../../../src/nile-button-filter/nile-button-filter.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ButtonFilter CSS\n */\nexport const styles = css`\n  :host {\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .inner__text {\n    display: flex;\n    gap: var(--nile-radius-base-standard);\n\talign-items: flex-start;\n  }\n\n  .inner__text span {\n    color: var(--nile-colors-dark-900);\n    text-align: center;\n    font-feature-settings: 'clig' off, 'liga' off;\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-font-size-base);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-semi-bold);\n    line-height: var(--nile-font-size-base); /* 100% */\n    letter-spacing: 0.2px;\n  }\n\n  .inner__text nile-badge {\n    color:var(--nile-colors-white-base);\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-button-filter/nile-button-filter.css.esm.js

@@ -1,5 +1,8 @@
-import{css as e}from"lit";const t=e`
+import{css as t}from"lit";const e=t`
   :host {
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .inner__text {
@@ -23,4 +26,4 @@ import{css as e}from"lit";const t=e`
   .inner__text nile-badge {
     color:var(--nile-colors-white-base);
   }
-`;export{t as s};
+`;export{e as s};

package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",n=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n  }\n\n  .nile-button-toggle {\n    display: flex;\n    padding: var(--nile-spacing-sm, var(--ng-spacing-1-5)) var(--nile-spacing-xl, var(--ng-spacing-4));\n    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    text-align: center;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    justify-content: center;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    height: 40px;\n    box-sizing: border-box;\n  }\n\n  .nile-button-toggle:hover {\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  }\n\n  .nile-button-toggle:active {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n  }\n\n  .nile-button-toggle__initial {\n    border-radius: \n    var(--nile-radius-radius-xs, var(--ng-radius-md)) \n    var(--nile-radius-radius-none, var(--ng-radius-none)) \n    var(--nile-radius-radius-none, var(--ng-radius-none)) \n    var(--nile-radius-radius-xs, var(--ng-radius-md));\n  }\n\n  .nile-button-toggle__end {\n    border-radius: \n    var(--nile-radius-radius-none, var(--ng-radius-none))\n    var(--nile-radius-radius-xs, var(--ng-radius-md))\n    var(--nile-radius-radius-xs, var(--ng-radius-md))\n    var(--nile-radius-radius-none, var(--ng-radius-none));\n    border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n  }\n\n  .nile-button-toggle__middle {\n    border-width: 1px 1px 1px 0;\n    border-style: solid;\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n  }\n\n  .nile-button-toggle__active {\n    background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .nile-button-toggle__active:hover {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .nile-button-toggle__disabled {\n    cursor: not-allowed;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",n=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-button-toggle {\n    display: flex;\n    padding: var(--nile-spacing-sm, var(--ng-spacing-1-5)) var(--nile-spacing-xl, var(--ng-spacing-4));\n    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    text-align: center;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    justify-content: center;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    height: 40px;\n    box-sizing: border-box;\n  }\n\n  .nile-button-toggle:hover {\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  }\n\n  .nile-button-toggle:active {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n  }\n\n  .nile-button-toggle__initial {\n    border-radius: \n    var(--nile-radius-radius-xs, var(--ng-radius-md)) \n    var(--nile-radius-radius-none, var(--ng-radius-none)) \n    var(--nile-radius-radius-none, var(--ng-radius-none)) \n    var(--nile-radius-radius-xs, var(--ng-radius-md));\n  }\n\n  .nile-button-toggle__end {\n    border-radius: \n    var(--nile-radius-radius-none, var(--ng-radius-none))\n    var(--nile-radius-radius-xs, var(--ng-radius-md))\n    var(--nile-radius-radius-xs, var(--ng-radius-md))\n    var(--nile-radius-radius-none, var(--ng-radius-none));\n    border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n  }\n\n  .nile-button-toggle__middle {\n    border-width: 1px 1px 1px 0;\n    border-style: solid;\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n  }\n\n  .nile-button-toggle__active {\n    background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .nile-button-toggle__active:hover {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .nile-button-toggle__disabled {\n    cursor: not-allowed;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-button-toggle.css.cjs.js.map

package/dist/nile-button-toggle/nile-button-toggle.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-button-toggle.css.cjs.js","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ButtonToggle CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-button-toggle {\n    display: flex;\n    padding: var(--nile-spacing-sm, var(--ng-spacing-1-5)) var(--nile-spacing-xl, var(--ng-spacing-4));\n    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    text-align: center;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    justify-content: center;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    height: 40px;\n    box-sizing: border-box;\n  }\n\n  .nile-button-toggle:hover {\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  }\n\n  .nile-button-toggle:active {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n  }\n\n  .nile-button-toggle__initial {\n    border-radius: \n    var(--nile-radius-radius-xs, var(--ng-radius-md)) \n    var(--nile-radius-radius-none, var(--ng-radius-none)) \n    var(--nile-radius-radius-none, var(--ng-radius-none)) \n    var(--nile-radius-radius-xs, var(--ng-radius-md));\n  }\n\n  .nile-button-toggle__end {\n    border-radius: \n    var(--nile-radius-radius-none, var(--ng-radius-none))\n    var(--nile-radius-radius-xs, var(--ng-radius-md))\n    var(--nile-radius-radius-xs, var(--ng-radius-md))\n    var(--nile-radius-radius-none, var(--ng-radius-none));\n    border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n  }\n\n  .nile-button-toggle__middle {\n    border-width: 1px 1px 1px 0;\n    border-style: solid;\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n  }\n\n  .nile-button-toggle__active {\n    background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .nile-button-toggle__active:hover {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .nile-button-toggle__disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-button-toggle.css.cjs.js","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ButtonToggle CSS\n */\nexport const styles = css`\n  :host {\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-button-toggle {\n    display: flex;\n    padding: var(--nile-spacing-sm, var(--ng-spacing-1-5)) var(--nile-spacing-xl, var(--ng-spacing-4));\n    border: 1px solid var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-md));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-600));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    text-align: center;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n    justify-content: center;\n    align-items: center;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    height: 40px;\n    box-sizing: border-box;\n  }\n\n  .nile-button-toggle:hover {\n    background: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary-hover));\n  }\n\n  .nile-button-toggle:active {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-primary-hover));\n  }\n\n  .nile-button-toggle__initial {\n    border-radius: \n    var(--nile-radius-radius-xs, var(--ng-radius-md)) \n    var(--nile-radius-radius-none, var(--ng-radius-none)) \n    var(--nile-radius-radius-none, var(--ng-radius-none)) \n    var(--nile-radius-radius-xs, var(--ng-radius-md));\n  }\n\n  .nile-button-toggle__end {\n    border-radius: \n    var(--nile-radius-radius-none, var(--ng-radius-none))\n    var(--nile-radius-radius-xs, var(--ng-radius-md))\n    var(--nile-radius-radius-xs, var(--ng-radius-md))\n    var(--nile-radius-radius-none, var(--ng-radius-none));\n    border-left: var(--nile-radius-radius-none, var(--ng-radius-none));\n  }\n\n  .nile-button-toggle__middle {\n    border-width: 1px 1px 1px 0;\n    border-style: solid;\n    border-color: var(--nile-colors-neutral-500, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none));\n  }\n\n  .nile-button-toggle__active {\n    background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-primary-hover) );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .nile-button-toggle__active:hover {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-primary-hover));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-hover));\n  }\n\n  .nile-button-toggle__disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-button-toggle/nile-button-toggle.css.esm.js

@@ -1,5 +1,8 @@
 import{css as r}from"lit";const n=r`
   :host {
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .nile-button-toggle {

package/dist/nile-button-toggle-group/nile-button-toggle-group.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,o;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",o=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-flex;\n    border-radius: var(--nile-radius-none, var(--ng-radius-md));\n    border:var(--nile-border-style-none), var(--ng-border-width-1) var(--ng-border-style-solid) var(--ng-colors-border-primary);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-flex;\n    border-radius: var(--nile-radius-none, var(--ng-radius-md));\n    border:var(--nile-border-style-none), var(--ng-border-width-1) var(--ng-border-style-solid) var(--ng-colors-border-primary);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n"]))));}};});
 //# sourceMappingURL=nile-button-toggle-group.css.cjs.js.map

package/dist/nile-button-toggle-group/nile-button-toggle-group.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-button-toggle-group.css.cjs.js","sources":["../../../src/nile-button-toggle-group/nile-button-toggle-group.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ButtonToggleGroup CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-flex;\n    border-radius: var(--nile-radius-none, var(--ng-radius-md));\n    border:var(--nile-border-style-none), var(--ng-border-width-1) var(--ng-border-style-solid) var(--ng-colors-border-primary);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-button-toggle-group.css.cjs.js","sources":["../../../src/nile-button-toggle-group/nile-button-toggle-group.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ButtonToggleGroup CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-flex;\n    border-radius: var(--nile-radius-none, var(--ng-radius-md));\n    border:var(--nile-border-style-none), var(--ng-border-width-1) var(--ng-border-style-solid) var(--ng-colors-border-primary);\n    box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-button-toggle-group/nile-button-toggle-group.css.esm.js

@@ -1,8 +1,11 @@
-import{css as r}from"lit";const o=r`
+import{css as o}from"lit";const r=o`
   :host {
     display: inline-flex;
     border-radius: var(--nile-radius-none, var(--ng-radius-md));
     border:var(--nile-border-style-none), var(--ng-border-width-1) var(--ng-border-style-solid) var(--ng-colors-border-primary);
     box-shadow: var(--nile-box-shadow-1, var(--ng-shadow-xs-skeuomorphic));
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
-`;export{o as s};
+`;export{r as s};

package/dist/nile-calendar/nile-calendar.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",r=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\n  .base {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n    width: 300px;\n    box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n    box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100, var(--ng-colors-effects-shadow-xl-01));\n    border: var(--nile-spacing-spacing-none, 1px solid var(--ng-colors-border-secondary-alt));\n  }\n\n  .calendar-container {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    width: 100%;\n    height: auto;\n    text-align: center;\n    background: white;\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n  }\n\n  .calendar-wrapper {\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  /* Date CSS_START */\n\n  .days_container {\n\t\tdisplay: grid;\n    padding: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-3));\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n\t\tfont-style: normal;\n\t\tfont-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\t\tline-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\t\ttext-align: center;\n\n\t\t/* width: 40px;\n\t\theight: 30px; */\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n  }\n\n  .day_name{\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n  }\n\n  .day_date{\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    user-select:none;\n  }\n\n\t.current__date__dot{\n\t\tbackground-color:white;\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n  .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n\n  .day_date:hover {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));\n  }\n\n  .filler {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .selected-date:hover {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: white;\n  }\n\n  .selected-date:hover,\n  .range-start:hover,\n  .range-end:hover,\n  .day_date.in-range:hover {\n    background: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n  }\n\n  .range-start.in-range {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  .range-end {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  .range-middle {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n  }\n\n  .day_date.selected {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));\n  }\n\n  .selected-date {\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .not-allowed{\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  /* Date CSS_END */\n\n  .calender-input {\n    box-sizing:border-box;\n    padding: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-xl, var(--ng-spacing-4));\n    width:100%;\n    justify-content: space-between;\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    flex-wrap: wrap;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    width: auto;\n  }\n\n  .manual-input-label {\n    color: var(--nile-colors-dark-500);\n    font-family: Colfax-regular;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  } \n\n  .button-container {\n    width: 100%;\n    display:flex;\n    justify-content: end;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-3));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-4)) var(--nile-spacing-lg, var(--ng-spacing-4)) var(--nile-spacing-lg, var(--ng-spacing-4));\n    box-sizing: border-box;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .calendar-switcher {\n    width: 100%;\n    margin: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-lg, var(--ng-spacing-3));\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-4));\n  }\n\n  .units-wrapper{\n    width:min-content;\n    margin:auto;\n  }\n\n  .unit-container{\n    display:grid;\n    grid-template-columns: auto auto;\n    row-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-5));\n    column-gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-1-5));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-4));\n    padding-bottom: var(--nile-spacing-none, var(--ng-spacing-0));\n  }\n\n  .duration-name{\n    display:flex;\n    align-items:center;\n    font-family:  var( --nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm)); \n  }\n  \n  .duration-units{\n    display:flex;\n    font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n  }\n\n  .duration__value{\n    display: grid;\n    place-items:center;\n    width: 34px;\n    height: 34px;\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .duration__value:hover{\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .duration__value--selected{\n    background-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .duration__value--selected:hover{\n    background:var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n  }\n\n  nile-input::part(input)::-webkit-inner-spin-button,\n  nile-input::part(input)::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .unit-input-container {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    padding: var(--nile-spacing-none, var(--ng-spacing-4)) var(--nile-spacing-xl, var(--ng-spacing-4));\n    padding-top: var(--nile-spacing-xl, var(--ng-spacing-4));\n  }\n\n  .duration-input,.time-input,.manual-input {\n    width: 125px;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var a,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){a=_lit.css;}],execute:function execute(){_export("s",r=a(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n\n  .base {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n    width: 300px;\n    box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n    box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100, var(--ng-colors-effects-shadow-xl-01));\n    border: var(--nile-spacing-spacing-none, 1px solid var(--ng-colors-border-secondary-alt));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .calendar-container {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    width: 100%;\n    height: auto;\n    text-align: center;\n    background: white;\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n  }\n\n  .calendar-wrapper {\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  /* Date CSS_START */\n\n  .days_container {\n\t\tdisplay: grid;\n    padding: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-3));\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n\t\tfont-style: normal;\n\t\tfont-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\t\tline-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\t\ttext-align: center;\n\n\t\t/* width: 40px;\n\t\theight: 30px; */\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n  }\n\n  .day_name{\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n  }\n\n  .day_date{\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    user-select:none;\n  }\n\n\t.current__date__dot{\n\t\tbackground-color:white;\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n  .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n\n  .day_date:hover {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));\n  }\n\n  .filler {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .selected-date:hover {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: white;\n  }\n\n  .selected-date:hover,\n  .range-start:hover,\n  .range-end:hover,\n  .day_date.in-range:hover {\n    background: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n  }\n\n  .range-start.in-range {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  .range-end {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  .range-middle {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n  }\n\n  .day_date.selected {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));\n  }\n\n  .selected-date {\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .not-allowed{\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  /* Date CSS_END */\n\n  .calender-input {\n    box-sizing:border-box;\n    padding: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-xl, var(--ng-spacing-4));\n    width:100%;\n    justify-content: space-between;\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    flex-wrap: wrap;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    width: auto;\n  }\n\n  .manual-input-label {\n    color: var(--nile-colors-dark-500);\n    font-family: Colfax-regular;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  } \n\n  .button-container {\n    width: 100%;\n    display:flex;\n    justify-content: end;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-3));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-4)) var(--nile-spacing-lg, var(--ng-spacing-4)) var(--nile-spacing-lg, var(--ng-spacing-4));\n    box-sizing: border-box;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .calendar-switcher {\n    width: 100%;\n    margin: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-lg, var(--ng-spacing-3));\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-4));\n  }\n\n  .units-wrapper{\n    width:min-content;\n    margin:auto;\n  }\n\n  .unit-container{\n    display:grid;\n    grid-template-columns: auto auto;\n    row-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-5));\n    column-gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-1-5));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-4));\n    padding-bottom: var(--nile-spacing-none, var(--ng-spacing-0));\n  }\n\n  .duration-name{\n    display:flex;\n    align-items:center;\n    font-family:  var( --nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm)); \n  }\n  \n  .duration-units{\n    display:flex;\n    font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n  }\n\n  .duration__value{\n    display: grid;\n    place-items:center;\n    width: 34px;\n    height: 34px;\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .duration__value:hover{\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .duration__value--selected{\n    background-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .duration__value--selected:hover{\n    background:var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n  }\n\n  nile-input::part(input)::-webkit-inner-spin-button,\n  nile-input::part(input)::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .unit-input-container {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    padding: var(--nile-spacing-none, var(--ng-spacing-4)) var(--nile-spacing-xl, var(--ng-spacing-4));\n    padding-top: var(--nile-spacing-xl, var(--ng-spacing-4));\n  }\n\n  .duration-input,.time-input,.manual-input {\n    width: 125px;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-calendar.css.cjs.js.map

package/dist/nile-calendar/nile-calendar.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-calendar.css.cjs.js","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * DatePicker CSS\n */\nexport const styles = css`\n\n  .base {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n    width: 300px;\n    box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n    box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100, var(--ng-colors-effects-shadow-xl-01));\n    border: var(--nile-spacing-spacing-none, 1px solid var(--ng-colors-border-secondary-alt));\n  }\n\n  .calendar-container {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    width: 100%;\n    height: auto;\n    text-align: center;\n    background: white;\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n  }\n\n  .calendar-wrapper {\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  /* Date CSS_START */\n\n  .days_container {\n\t\tdisplay: grid;\n    padding: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-3));\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n\t\tfont-style: normal;\n\t\tfont-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\t\tline-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\t\ttext-align: center;\n\n\t\t/* width: 40px;\n\t\theight: 30px; */\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n  }\n\n  .day_name{\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n  }\n\n  .day_date{\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    user-select:none;\n  }\n\n\t.current__date__dot{\n\t\tbackground-color:white;\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n  .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n\n  .day_date:hover {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));\n  }\n\n  .filler {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .selected-date:hover {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: white;\n  }\n\n  .selected-date:hover,\n  .range-start:hover,\n  .range-end:hover,\n  .day_date.in-range:hover {\n    background: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n  }\n\n  .range-start.in-range {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  .range-end {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  .range-middle {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n  }\n\n  .day_date.selected {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));\n  }\n\n  .selected-date {\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .not-allowed{\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  /* Date CSS_END */\n\n  .calender-input {\n    box-sizing:border-box;\n    padding: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-xl, var(--ng-spacing-4));\n    width:100%;\n    justify-content: space-between;\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    flex-wrap: wrap;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    width: auto;\n  }\n\n  .manual-input-label {\n    color: var(--nile-colors-dark-500);\n    font-family: Colfax-regular;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  } \n\n  .button-container {\n    width: 100%;\n    display:flex;\n    justify-content: end;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-3));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-4)) var(--nile-spacing-lg, var(--ng-spacing-4)) var(--nile-spacing-lg, var(--ng-spacing-4));\n    box-sizing: border-box;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .calendar-switcher {\n    width: 100%;\n    margin: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-lg, var(--ng-spacing-3));\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-4));\n  }\n\n  .units-wrapper{\n    width:min-content;\n    margin:auto;\n  }\n\n  .unit-container{\n    display:grid;\n    grid-template-columns: auto auto;\n    row-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-5));\n    column-gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-1-5));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-4));\n    padding-bottom: var(--nile-spacing-none, var(--ng-spacing-0));\n  }\n\n  .duration-name{\n    display:flex;\n    align-items:center;\n    font-family:  var( --nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm)); \n  }\n  \n  .duration-units{\n    display:flex;\n    font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n  }\n\n  .duration__value{\n    display: grid;\n    place-items:center;\n    width: 34px;\n    height: 34px;\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .duration__value:hover{\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .duration__value--selected{\n    background-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .duration__value--selected:hover{\n    background:var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n  }\n\n  nile-input::part(input)::-webkit-inner-spin-button,\n  nile-input::part(input)::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .unit-input-container {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    padding: var(--nile-spacing-none, var(--ng-spacing-4)) var(--nile-spacing-xl, var(--ng-spacing-4));\n    padding-top: var(--nile-spacing-xl, var(--ng-spacing-4));\n  }\n\n  .duration-input,.time-input,.manual-input {\n    width: 125px;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-calendar.css.cjs.js","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * DatePicker CSS\n */\nexport const styles = css`\n\n  .base {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n    width: 300px;\n    box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);\n    box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100, var(--ng-colors-effects-shadow-xl-01));\n    border: var(--nile-spacing-spacing-none, 1px solid var(--ng-colors-border-secondary-alt));\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .calendar-container {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    width: 100%;\n    height: auto;\n    text-align: center;\n    background: white;\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n  }\n\n  .calendar-wrapper {\n    background: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    display: flex;\n    justify-content: space-between;\n    width: 100%;\n    border-radius: var(--nile-radius-radius-xl, var(--ng-radius-2xl));\n  }\n\n  .calendar-header {\n    display: flex;\n    justify-content: space-between;\n    padding: var(--nile-spacing-2xl, var(--ng-spacing-2xl)) var(--nile-spacing-2xl, var(--ng-spacing-2xl));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-semi-bold, var(--ng-font-weight-600));\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .calendar-header__month-navigation {\n    cursor: pointer;\n  }\n\n  /* Date CSS_START */\n\n  .days_container {\n\t\tdisplay: grid;\n    padding: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-3));\n\t\tgrid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr;\n\t\tgrid-row-gap: var(--nile-spacing-xs, var(--ng-spacing-xs));\n  }\n\n  .day_date ,.day_name{\n\t\tfont-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n\t\tfont-style: normal;\n\t\tfont-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n\t\tline-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n\t\ttext-align: center;\n\n\t\t/* width: 40px;\n\t\theight: 30px; */\n\t\tpadding: 5px 8px;\n\t\tdisplay:grid;\n\t\tplace-items:center;\n  }\n\n  .day_name{\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n  }\n\n  .day_date{\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    user-select:none;\n  }\n\n\t.current__date__dot{\n\t\tbackground-color:white;\n\t\tposition:absolute;\n\t\tborder-radius:50%;\n\t\theight:5px;\n\t\twidth:5px;\n\t\tleft:25%;\n\t\ttop:90%;\n\t}\n\n  .day_date:not(.range-start, .selected-date, .range-end) .current__date__dot{\n\t\tbackground-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n\n  .day_date:hover {\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-secondary-hover));\n  }\n\n  .filler {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  .selected-date {\n    color: white;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .selected-date:hover {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .selected-date,\n  .range-start,\n  .range-end {\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: white;\n  }\n\n  .selected-date:hover,\n  .range-start:hover,\n  .range-end:hover,\n  .day_date.in-range:hover {\n    background: var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n  }\n\n  .range-start.in-range {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  .range-end {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-xs, var(--ng-radius-xs)) var(--nile-radius-radius-none, var(--ng-radius-none));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  .range-middle {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-none, var(--ng-radius-none))\n  }\n\n  .day_date.selected {\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .day_date.in-range:not(.range-start,.range-end, .selected-date) {\n    background: var(--nile-colors-neutral-400, var(--ng-colors-bg-active));\n  }\n\n  .selected-date {\n    color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    background: var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n  }\n\n  .not-allowed{\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-disabled));\n    pointer-events: none;\n  }\n\n  /* Date CSS_END */\n\n  .calender-input {\n    box-sizing:border-box;\n    padding: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-xl, var(--ng-spacing-4));\n    width:100%;\n    justify-content: space-between;\n    display: flex;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    flex-wrap: wrap;\n  }\n\n  .from {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    width: auto;\n  }\n\n  .manual-input-label {\n    color: var(--nile-colors-dark-500);\n    font-family: Colfax-regular;\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: 12px;\n    letter-spacing: 0.2px;\n  } \n\n  .button-container {\n    width: 100%;\n    display:flex;\n    justify-content: end;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-3));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-3)) var(--nile-spacing-lg, var(--ng-spacing-4)) var(--nile-spacing-lg, var(--ng-spacing-4)) var(--nile-spacing-lg, var(--ng-spacing-4));\n    box-sizing: border-box;\n  }\n\n  .calendar-config {\n    display: flex;\n    align-items: center;\n    justify-content: space-between;\n  }\n\n  .calendar-switcher {\n    width: 100%;\n    margin: var(--nile-spacing-none, var(--ng-spacing-0)) var(--nile-spacing-lg, var(--ng-spacing-3));\n    margin-top: var(--nile-spacing-xl, var(--ng-spacing-4));\n  }\n\n  .units-wrapper{\n    width:min-content;\n    margin:auto;\n  }\n\n  .unit-container{\n    display:grid;\n    grid-template-columns: auto auto;\n    row-gap:var(--nile-spacing-spacing-2xl, var(--ng-spacing-5));\n    column-gap: var(--nile-spacing-spacing-sm, var(--ng-spacing-1-5));\n    padding: var(--nile-spacing-xl, var(--ng-spacing-4));\n    padding-bottom: var(--nile-spacing-none, var(--ng-spacing-0));\n  }\n\n  .duration-name{\n    display:flex;\n    align-items:center;\n    font-family:  var( --nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm)); \n  }\n  \n  .duration-units{\n    display:flex;\n    font-family: var( --nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: var(--nile-line-height-small, var(--ng-line-height-text-sm));\n  }\n\n  .duration__value{\n    display: grid;\n    place-items:center;\n    width: 34px;\n    height: 34px;\n    cursor: pointer;\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n  }\n\n  .duration__value:hover{\n    background: var(--nile-colors-neutral-100);\n  }\n\n  .duration__value--selected{\n    background-color:var(--nile-colors-primary-600, var(--ng-colors-bg-brand-solid));\n    color: var(--nile-colors-white-base, var(--ng-colors-text-white));\n  }\n\n  .duration__value--selected:hover{\n    background:var(--nile-colors-primary-700, var(--ng-colors-bg-brand-solid-hover));\n  }\n\n  nile-input::part(input)::-webkit-inner-spin-button,\n  nile-input::part(input)::-webkit-outer-spin-button {\n    -webkit-appearance: none;\n  }\n\n  .hidden {\n    display: none !important;\n  }\n\n  .unit-input-container {\n    display: flex;\n    justify-content: space-between;\n    gap: var(--nile-spacing-md, var(--ng-spacing-2));\n    padding: var(--nile-spacing-none, var(--ng-spacing-4)) var(--nile-spacing-xl, var(--ng-spacing-4));\n    padding-top: var(--nile-spacing-xl, var(--ng-spacing-4));\n  }\n\n  .duration-input,.time-input,.manual-input {\n    width: 125px;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-calendar/nile-calendar.css.esm.js

@@ -7,6 +7,9 @@ import{css as a}from"lit";const r=a`
     box-shadow: 0px 8px 8px -4px var(--nile-colors-neutral-400);
     box-shadow: 0px 20px 24px -4px var(--nile-colors-dark-100, var(--ng-colors-effects-shadow-xl-01));
     border: var(--nile-spacing-spacing-none, 1px solid var(--ng-colors-border-secondary-alt));
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .calendar-container {

package/dist/nile-card/nile-card.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,a;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",a=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n    --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n    --border-width: 0.5px;\n    --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    display: inline-block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    justify-items: strecth;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: solid var(--border-width) var(--border-color);\n    border-radius: var(--border-radius);\n    min-width: 273px;\n    max-width: 350px;\n    overflow: hidden;\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .body__wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .body__wrapper_nf {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  .card__header {\n    display: block;\n  }\n\n  .card__body {\n    display: block;\n  }\n\n  .card__footer {\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    display: block;\n    box-sizing: border-box;\n    align-content: center;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n    border-top: 1px solid var(--nile-colors-white-base , var(--ng-colors-border-secondary));\n    height: 40px;\n  }\n\n  .card:not(.card--has-footer) .card__footer {\n    display: none;\n  }\n\n  .card:hover {\n    box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-xs-skeuomorphic));\n    outline: solid 1px var(--border-color);\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",n=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n    --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n    --border-width: 0.5px;\n    --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    display: inline-block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    justify-items: strecth;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: solid var(--border-width) var(--border-color);\n    border-radius: var(--border-radius);\n    min-width: 273px;\n    max-width: 350px;\n    overflow: hidden;\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .body__wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .body__wrapper_nf {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  .card__header {\n    display: block;\n  }\n\n  .card__body {\n    display: block;\n  }\n\n  .card__footer {\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    display: block;\n    box-sizing: border-box;\n    align-content: center;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n    border-top: 1px solid var(--nile-colors-white-base , var(--ng-colors-border-secondary));\n    height: 40px;\n  }\n\n  .card:not(.card--has-footer) .card__footer {\n    display: none;\n  }\n\n  .card:hover {\n    box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-xs-skeuomorphic));\n    outline: solid 1px var(--border-color);\n  }\n"]))));}};});
 //# sourceMappingURL=nile-card.css.cjs.js.map

package/dist/nile-card/nile-card.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-card.css.cjs.js","sources":["../../../src/nile-card/nile-card.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Card CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n    --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n    --border-width: 0.5px;\n    --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    display: inline-block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    justify-items: strecth;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: solid var(--border-width) var(--border-color);\n    border-radius: var(--border-radius);\n    min-width: 273px;\n    max-width: 350px;\n    overflow: hidden;\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .body__wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .body__wrapper_nf {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  .card__header {\n    display: block;\n  }\n\n  .card__body {\n    display: block;\n  }\n\n  .card__footer {\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    display: block;\n    box-sizing: border-box;\n    align-content: center;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n    border-top: 1px solid var(--nile-colors-white-base , var(--ng-colors-border-secondary));\n    height: 40px;\n  }\n\n  .card:not(.card--has-footer) .card__footer {\n    display: none;\n  }\n\n  .card:hover {\n    box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-xs-skeuomorphic));\n    outline: solid 1px var(--border-color);\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-card.css.cjs.js","sources":["../../../src/nile-card/nile-card.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Card CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --border-color: var(--nile-card-color-border, var(--ng-colors-border-secondary));\n    --border-radius: var(--nile-radius-radius-xl, var(--ng-radius-xl));\n    --border-width: 0.5px;\n    --padding: var(--nile-spacing-xl, var(--ng-spacing-xl));\n    display: inline-block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    justify-items: strecth;\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n    outline: solid var(--border-width) var(--border-color);\n    border-radius: var(--border-radius);\n    min-width: 273px;\n    max-width: 350px;\n    overflow: hidden;\n    box-shadow: var(--nile-box-shadow-none, var(--ng-shadow-xs-skeuomorphic));\n  }\n\n  .body__wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-none, var(--ng-spacing-none)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .body__wrapper_nf {\n    padding: var(--nile-spacing-lg, var(--ng-spacing-lg)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n  .card__header {\n    display: block;\n  }\n\n  .card__body {\n    display: block;\n  }\n\n  .card__footer {\n    margin-top: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    display: block;\n    box-sizing: border-box;\n    align-content: center;\n    align-items: center;\n    padding: var(--nile-spacing-md, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n    background-color: var(--nile-colors-neutral-100, var(--ng-colors-bg-primary));\n    border-top: 1px solid var(--nile-colors-white-base , var(--ng-colors-border-secondary));\n    height: 40px;\n  }\n\n  .card:not(.card--has-footer) .card__footer {\n    display: none;\n  }\n\n  .card:hover {\n    box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-xs-skeuomorphic));\n    outline: solid 1px var(--border-color);\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-card/nile-card.css.esm.js

@@ -1,6 +1,9 @@
-import{css as r}from"lit";const a=r`
+import{css as r}from"lit";const n=r`
   :host {
     box-sizing: border-box;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host *,
@@ -72,4 +75,4 @@ import{css as r}from"lit";const a=r`
     box-shadow: var(--nile-box-shadow-7, var(--ng-shadow-xs-skeuomorphic));
     outline: solid 1px var(--border-color);
   }
-`;export{a as s};
+`;export{n as s};

package/dist/nile-checkbox/nile-checkbox.css.cjs.js

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",e=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n  }\n\n  :host(.full-width) {\n    width: 100%;\n  }\n\n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: top;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .checkbox--medium {\n    --toggle-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3, var(--ng-width-4));\n    height: var(--nile-type-scale-3, var(--ng-height-16px));\n    border: solid 1px\n      var(\n        --nile-checkbox-color-border-standard,\n        var(--ng-colors-border-primary)\n      );\n    background-color: var(\n      --nile-checkbox-color-background-standard,\n      var(--ng-colors-bg-primary)\n    );\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    transition: var(--nile-transition-duration-default border-color),\n      var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default box-shadow);\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* svg {\n      display:none !important;\n  } */\n\n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(\n      .checkbox--indeterminate\n    )\n    .checkbox__control:hover {\n    background: var(\n      --nile-checkbox-color-background-hover,\n      var(--ng-colors-bg-primary)\n    );\n    border: 1px solid\n      var(--nile-checkbox-color-border-hover, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n  }\n\n  /* Disabled */\n  .checkbox--disabled {\n    opacity: var(--nile-opacity-30, var(--ng-opacity-100));\n    cursor: not-allowed;\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(\n      --nile-checkbox-color-border-checked-standard,\n      var(--ng-colors-bg-brand-solid)\n    );\n    background-color: var(\n      --nile-checkbox-color-background-checked-standard,\n      var(--ng-colors-bg-brand-solid)\n    );\n  }\n\n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(\n      --nile-checkbox-color-background-checked-hover,\n      var(--ng-colors-bg-brand-solid)\n    );\n    /* border: 1px solid var(--nile-checkbox-color-border-checked-hover),\n      var(--ng-colors-border-border-disabled); */\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n  }\n\n  /* .checkbox.checkbox--indeterminate .checkbox_control:hover {\n    border: none;\n  } */\n\n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px var(--ng-nile-checkbox-color-outline-standard);\n    outline-offset: 1px;\n  }\n\n  .checkbox--disabled .checkbox__control {\n    background-color: var(\n      --nile-checkbox-color-background-standard,\n      var(--ng-colors-bg-disabled-subtle)\n    );\n    border-color: var(\n      --nile-checkbox-color-border-standard,\n      var(--ng-colors-border-disabled)\n    );\n  }\n\n  .checkbox__label {\n    display: inline-block;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    margin-inline-start: 0.5em;\n    user-select: none;\n    margin-top: var(--nile-spacing-xxs);\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    letter-spacing: 0.2px;\n  }\n\n  :host([required]) .checkbox__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  .checkbox__checked-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__indeterminate-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox--disabled .checkbox__checked-icon,\n  .checkbox--disabled .checkbox__indeterminate-icon {\n    --nile-svg-stroke: var(\n      --ng-colors-border-border-disabled,\n      var(--ng-colors-fg-disabled-subtle)\n    );\n  }\n\n  .checkbox__helptext-icon {\n    float: right;\n    cursor: pointer;\n    margin-right: var(--nile-spacing-lg);\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,e;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",e=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    display: inline-block;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host(.full-width) {\n    width: 100%;\n  }\n\n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: top;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .checkbox--medium {\n    --toggle-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3, var(--ng-width-4));\n    height: var(--nile-type-scale-3, var(--ng-height-16px));\n    border: solid 1px\n      var(\n        --nile-checkbox-color-border-standard,\n        var(--ng-colors-border-primary)\n      );\n    background-color: var(\n      --nile-checkbox-color-background-standard,\n      var(--ng-colors-bg-primary)\n    );\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    transition: var(--nile-transition-duration-default border-color),\n      var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default box-shadow);\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* svg {\n      display:none !important;\n  } */\n\n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(\n      .checkbox--indeterminate\n    )\n    .checkbox__control:hover {\n    background: var(\n      --nile-checkbox-color-background-hover,\n      var(--ng-colors-bg-primary)\n    );\n    border: 1px solid\n      var(--nile-checkbox-color-border-hover, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n  }\n\n  /* Disabled */\n  .checkbox--disabled {\n    opacity: var(--nile-opacity-30, var(--ng-opacity-100));\n    cursor: not-allowed;\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(\n      --nile-checkbox-color-border-checked-standard,\n      var(--ng-colors-bg-brand-solid)\n    );\n    background-color: var(\n      --nile-checkbox-color-background-checked-standard,\n      var(--ng-colors-bg-brand-solid)\n    );\n  }\n\n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(\n      --nile-checkbox-color-background-checked-hover,\n      var(--ng-colors-bg-brand-solid)\n    );\n    /* border: 1px solid var(--nile-checkbox-color-border-checked-hover),\n      var(--ng-colors-border-border-disabled); */\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n  }\n\n  /* .checkbox.checkbox--indeterminate .checkbox_control:hover {\n    border: none;\n  } */\n\n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px var(--ng-nile-checkbox-color-outline-standard);\n    outline-offset: 1px;\n  }\n\n  .checkbox--disabled .checkbox__control {\n    background-color: var(\n      --nile-checkbox-color-background-standard,\n      var(--ng-colors-bg-disabled-subtle)\n    );\n    border-color: var(\n      --nile-checkbox-color-border-standard,\n      var(--ng-colors-border-disabled)\n    );\n  }\n\n  .checkbox__label {\n    display: inline-block;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    margin-inline-start: 0.5em;\n    user-select: none;\n    margin-top: var(--nile-spacing-xxs);\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    letter-spacing: 0.2px;\n  }\n\n  :host([required]) .checkbox__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  .checkbox__checked-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__indeterminate-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox--disabled .checkbox__checked-icon,\n  .checkbox--disabled .checkbox__indeterminate-icon {\n    --nile-svg-stroke: var(\n      --ng-colors-border-border-disabled,\n      var(--ng-colors-fg-disabled-subtle)\n    );\n  }\n\n  .checkbox__helptext-icon {\n    float: right;\n    cursor: pointer;\n    margin-right: var(--nile-spacing-lg);\n  }\n"]))));}};});
 //# sourceMappingURL=nile-checkbox.css.cjs.js.map

package/dist/nile-checkbox/nile-checkbox.css.cjs.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-checkbox.css.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Checkbox CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host(.full-width) {\n    width: 100%;\n  }\n\n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: top;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .checkbox--medium {\n    --toggle-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3, var(--ng-width-4));\n    height: var(--nile-type-scale-3, var(--ng-height-16px));\n    border: solid 1px\n      var(\n        --nile-checkbox-color-border-standard,\n        var(--ng-colors-border-primary)\n      );\n    background-color: var(\n      --nile-checkbox-color-background-standard,\n      var(--ng-colors-bg-primary)\n    );\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    transition: var(--nile-transition-duration-default border-color),\n      var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default box-shadow);\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* svg {\n      display:none !important;\n  } */\n\n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(\n      .checkbox--indeterminate\n    )\n    .checkbox__control:hover {\n    background: var(\n      --nile-checkbox-color-background-hover,\n      var(--ng-colors-bg-primary)\n    );\n    border: 1px solid\n      var(--nile-checkbox-color-border-hover, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n  }\n\n  /* Disabled */\n  .checkbox--disabled {\n    opacity: var(--nile-opacity-30, var(--ng-opacity-100));\n    cursor: not-allowed;\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(\n      --nile-checkbox-color-border-checked-standard,\n      var(--ng-colors-bg-brand-solid)\n    );\n    background-color: var(\n      --nile-checkbox-color-background-checked-standard,\n      var(--ng-colors-bg-brand-solid)\n    );\n  }\n\n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(\n      --nile-checkbox-color-background-checked-hover,\n      var(--ng-colors-bg-brand-solid)\n    );\n    /* border: 1px solid var(--nile-checkbox-color-border-checked-hover),\n      var(--ng-colors-border-border-disabled); */\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n  }\n\n  /* .checkbox.checkbox--indeterminate .checkbox_control:hover {\n    border: none;\n  } */\n\n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px var(--ng-nile-checkbox-color-outline-standard);\n    outline-offset: 1px;\n  }\n\n  .checkbox--disabled .checkbox__control {\n    background-color: var(\n      --nile-checkbox-color-background-standard,\n      var(--ng-colors-bg-disabled-subtle)\n    );\n    border-color: var(\n      --nile-checkbox-color-border-standard,\n      var(--ng-colors-border-disabled)\n    );\n  }\n\n  .checkbox__label {\n    display: inline-block;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    margin-inline-start: 0.5em;\n    user-select: none;\n    margin-top: var(--nile-spacing-xxs);\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    letter-spacing: 0.2px;\n  }\n\n  :host([required]) .checkbox__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  .checkbox__checked-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__indeterminate-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox--disabled .checkbox__checked-icon,\n  .checkbox--disabled .checkbox__indeterminate-icon {\n    --nile-svg-stroke: var(\n      --ng-colors-border-border-disabled,\n      var(--ng-colors-fg-disabled-subtle)\n    );\n  }\n\n  .checkbox__helptext-icon {\n    float: right;\n    cursor: pointer;\n    margin-right: var(--nile-spacing-lg);\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-checkbox.css.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * Checkbox CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host(.full-width) {\n    width: 100%;\n  }\n\n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: top;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .checkbox--medium {\n    --toggle-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n  }\n\n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3, var(--ng-width-4));\n    height: var(--nile-type-scale-3, var(--ng-height-16px));\n    border: solid 1px\n      var(\n        --nile-checkbox-color-border-standard,\n        var(--ng-colors-border-primary)\n      );\n    background-color: var(\n      --nile-checkbox-color-background-standard,\n      var(--ng-colors-bg-primary)\n    );\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    transition: var(--nile-transition-duration-default border-color),\n      var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default box-shadow);\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* svg {\n      display:none !important;\n  } */\n\n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled):not(\n      .checkbox--indeterminate\n    )\n    .checkbox__control:hover {\n    background: var(\n      --nile-checkbox-color-background-hover,\n      var(--ng-colors-bg-primary)\n    );\n    border: 1px solid\n      var(--nile-checkbox-color-border-hover, var(--ng-colors-border-primary));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-xs));\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n  }\n\n  /* Disabled */\n  .checkbox--disabled {\n    opacity: var(--nile-opacity-30, var(--ng-opacity-100));\n    cursor: not-allowed;\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(\n      --nile-checkbox-color-border-checked-standard,\n      var(--ng-colors-bg-brand-solid)\n    );\n    background-color: var(\n      --nile-checkbox-color-background-checked-standard,\n      var(--ng-colors-bg-brand-solid)\n    );\n  }\n\n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(\n      --nile-checkbox-color-background-checked-hover,\n      var(--ng-colors-bg-brand-solid)\n    );\n    /* border: 1px solid var(--nile-checkbox-color-border-checked-hover),\n      var(--ng-colors-border-border-disabled); */\n    box-shadow: var(--nile-box-shadow-none, var(--ng-focus-ring));\n  }\n\n  /* .checkbox.checkbox--indeterminate .checkbox_control:hover {\n    border: none;\n  } */\n\n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px var(--ng-nile-checkbox-color-outline-standard);\n    outline-offset: 1px;\n  }\n\n  .checkbox--disabled .checkbox__control {\n    background-color: var(\n      --nile-checkbox-color-background-standard,\n      var(--ng-colors-bg-disabled-subtle)\n    );\n    border-color: var(\n      --nile-checkbox-color-border-standard,\n      var(--ng-colors-border-disabled)\n    );\n  }\n\n  .checkbox__label {\n    display: inline-block;\n    line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-sm));\n    margin-inline-start: 0.5em;\n    user-select: none;\n    margin-top: var(--nile-spacing-xxs);\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-secondary-700));\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-500));\n    letter-spacing: 0.2px;\n  }\n\n  :host([required]) .checkbox__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  .checkbox__checked-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__indeterminate-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox--disabled .checkbox__checked-icon,\n  .checkbox--disabled .checkbox__indeterminate-icon {\n    --nile-svg-stroke: var(\n      --ng-colors-border-border-disabled,\n      var(--ng-colors-fg-disabled-subtle)\n    );\n  }\n\n  .checkbox__helptext-icon {\n    float: right;\n    cursor: pointer;\n    margin-right: var(--nile-spacing-lg);\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

package/dist/nile-checkbox/nile-checkbox.css.esm.js

@@ -1,6 +1,9 @@
 import{css as o}from"lit";const e=o`
   :host {
     display: inline-block;
+    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
+    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
+    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host(.full-width) {