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

package/dist/src/nile-badge/nile-badge.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-badge.css.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+LxB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * Tag CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .badge {\n    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-sm));\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: var(--nile-height-22px, var(--ng-height-22px));\n  }\n\n  .badge__content {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\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-font-size-text-xs));\n    letter-spacing: 0.2px;\n    display: flex;\n    align-items: center;\n  }\n\n  .badge--primary {\n    background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));\n    color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));\n  }\n\n  .badge--normal {\n    background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));\n  }\n\n  .badge--info {\n    background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));\n  }\n\n  /* for v2 */\n\n    .badge--pill-outline {\n    background: transparent ;\n  }\n  .badge--pink {\n    color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));\n    background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));\n  }\n\n  .badge--orange {\n    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));\n    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));\n  }\n\n  .badge--purple {\n    color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));\n    background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));\n  }\n\n  .badge--indigo {\n    color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));\n    background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));\n  }\n\n  .badge--blue {\n    color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));\n    background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));\n  }\n  .badge--blue-light {\n    color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));\n    background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));\n  }\n\n  .badge--gray-blue {\n    color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-grablue, var(--ng-componentcolors-utility-gray-blue-200));\n    background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));\n  }\n\n  .badge--success {\n    color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));\n    background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));\n  }\n  .badge--warning {\n    color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));\n    background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));\n  }\n\n  .badge--error {\n    color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));\n    background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));\n  }\n\n  .badge--brand {\n    color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));\n    background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));\n  }\n\n  .badge--gray {\n    color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));\n    background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));\n  }\n\n  .badge--pink.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-pink, var(--ng-componentcolors-utility-pink-200));\n  }\n\n  .badge--orange.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));\n  }\n\n  .badge--purple.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-purple, var(--ng-componentcolors-utility-purple-200));\n  }\n\n  .badge--indigo.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-indigo, var(--ng-componentcolors-utility-indigo-200));\n  }\n\n  .badge--blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-blue, var(--ng-componentcolors-utility-blue-200));\n  }\n\n  .badge--blue-light.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-bluelight,  var(--ng-componentcolors-utility-blue-light-200));\n  }\n\n  .badge--gray-blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-blue-200));\n  }\n\n  .badge--success.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-success, var(--ng-componentcolors-utility-success-200));\n  }\n\n  .badge--warning.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));\n  }\n\n  .badge--error.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-error, var(--ng-componentcolors-utility-error-200));\n  }\n\n  .badge--brand.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-brand, var(--ng-componentcolors-utility-brand-200));\n  }\n\n  .badge--gray.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-200));\n  }\n\n\n\n  .badge--rounded {\n    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md));\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n  }\n`;\nexport default [styles];\n\n"]}
+{"version":3,"file":"nile-badge.css.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkMxB,CAAC;AACF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * Tag 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  .badge {\n    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-sm, var(--ng-spacing-md));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-sm));\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: var(--nile-height-22px, var(--ng-height-22px));\n  }\n\n  .badge__content {\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-type-scale-2, var(--ng-font-size-text-xs));\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-font-size-text-xs));\n    letter-spacing: 0.2px;\n    display: flex;\n    align-items: center;\n  }\n\n  .badge--primary {\n    background: var(--nile-badge-color-background-primary, var(--ng-componentcolors-utility-brand-50));\n    color: var(--nile-badge-color-font-primary, var(--ng-componentcolors-utility-brand-700));\n  }\n\n  .badge--normal {\n    background: var(--nile-badge-color-background-normal, var(--ng-componentcolors-utility-gray-50));\n  }\n\n  .badge--info {\n    background: var(--nile-badge-color-background-info, var(--ng-componentcolors-utility-blue-light-50));\n  }\n\n  /* for v2 */\n\n    .badge--pill-outline {\n    background: transparent ;\n  }\n  .badge--pink {\n    color: var(--nile-badge-color-font-pink, var(--ng-componentcolors-utility-pink-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-pink, var(--ng-componentcolors-utility-pink-200));\n    background: var(--nile-badge-color-background-pink, var(--ng-componentcolors-utility-pink-50));\n  }\n\n  .badge--orange {\n    color: var(--nile-badge-color-font-orange, var(--ng-componentcolors-utility-orange-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-orange, var(--ng-componentcolors-utility-orange-dark-200));\n    background: var(--nile-badge-color-background-orange, var(--ng-componentcolors-utility-orange-dark-50));\n  }\n\n  .badge--purple {\n    color: var(--nile-badge-color-font-purple, var(--ng-componentcolors-utility-purple-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-purple, var(--ng-componentcolors-utility-purple-200));\n    background: var(--nile-badge-color-background-purple, var(--ng-componentcolors-utility-purple-50));\n  }\n\n  .badge--indigo {\n    color: var(--nile-badge-color-font-indigo, var(--ng-componentcolors-utility-indigo-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-indigo, var(--ng-componentcolors-utility-indigo-200));\n    background: var(--nile-badge-color-background-indigo, var(--ng-componentcolors-utility-indigo-50));\n  }\n\n  .badge--blue {\n    color: var(--nile-badge-color-font-blue, var(--ng-componentcolors-utility-blue-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-blue, var(--ng-componentcolors-utility-blue-200));\n    background: var(--nile-badge-color-background-blue, var(--ng-componentcolors-utility-blue-50));\n  }\n  .badge--blue-light {\n    color:var(--nile-badge-color-font-bluelight, var(--ng-componentcolors-utility-blue-light-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-bluelight, var(--ng-componentcolors-utility-blue-light-200));\n    background: var(--nile-badge-color-background-bluelight, var(--ng-componentcolors-utility-blue-light-50));\n  }\n\n  .badge--gray-blue {\n    color: var(--nile-badge-color-font-grayblue, var(--ng-componentcolors-utility-gray-blue-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-grablue, var(--ng-componentcolors-utility-gray-blue-200));\n    background: var(--nile-badge-color-background-grayblue, var(--ng-componentcolors-utility-gray-blue-50));\n  }\n\n  .badge--success {\n    color: var(--nile-badge-color-font-success, var(--ng-componentcolors-utility-success-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-success, var(--ng-componentcolors-utility-success-200));\n    background: var(--nile-badge-color-background-success, var(--ng-componentcolors-utility-success-50));\n  }\n  .badge--warning {\n    color: var(--nile-badge-color-font-warning, var(--ng-componentcolors-utility-warning-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-warning, var(--ng-componentcolors-utility-warning-200));\n    background: var(--nile-badge-color-background-warning, var(--ng-componentcolors-utility-warning-50));\n  }\n\n  .badge--error {\n    color: var(--nile-badge-color-font-error, var(--ng-componentcolors-utility-error-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-error, var(--ng-componentcolors-utility-error-200));\n    background: var(--nile-badge-color-background-error, var(--ng-componentcolors-utility-error-50));\n  }\n\n  .badge--brand {\n    color: var(--nile-badge-color-font-brand, var(--ng-componentcolors-utility-brand-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-brand, var(--ng-componentcolors-utility-brand-200));\n    background: var(--nile-badge-color-background-brand, var(--ng-componentcolors-utility-brand-50));\n  }\n\n  .badge--gray {\n    color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));\n    border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));\n    border-style: solid;\n    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));\n    background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));\n  }\n\n  .badge--pink.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-pink, var(--ng-componentcolors-utility-pink-200));\n  }\n\n  .badge--orange.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-orange, var(--ng-componentcolors-utility-orange-dark-200));\n  }\n\n  .badge--purple.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-purple, var(--ng-componentcolors-utility-purple-200));\n  }\n\n  .badge--indigo.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-indigo, var(--ng-componentcolors-utility-indigo-200));\n  }\n\n  .badge--blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-blue, var(--ng-componentcolors-utility-blue-200));\n  }\n\n  .badge--blue-light.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-bluelight,  var(--ng-componentcolors-utility-blue-light-200));\n  }\n\n  .badge--gray-blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-blue-200));\n  }\n\n  .badge--success.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-success, var(--ng-componentcolors-utility-success-200));\n  }\n\n  .badge--warning.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-warning, var(--ng-componentcolors-utility-warning-200));\n  }\n\n  .badge--error.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-error, var(--ng-componentcolors-utility-error-200));\n  }\n\n  .badge--brand.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-brand, var(--ng-componentcolors-utility-brand-200));\n  }\n\n  .badge--gray.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline, var(--ng-border-width-1)) solid var(--nile-badge-color-pill-outline-gray, var(--ng-componentcolors-utility-gray-200));\n  }\n\n\n\n  .badge--rounded {\n    padding: var(--nile-spacing-xxs, var(--ng-spacing-xxs)) var(--nile-spacing-md, var(--ng-spacing-md));\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n  }\n`;\nexport default [styles];\n\n"]}

package/dist/src/nile-breadcrumb/nile-breadcrumb.css.js

@@ -12,6 +12,9 @@ export const styles = css `
   :host {
     display: flex;
     align-items: center;
+    -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 default [styles];

package/dist/src/nile-breadcrumb/nile-breadcrumb.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-breadcrumb.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb/nile-breadcrumb.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;CAKxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * Breadcrumb CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    align-items: center;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-breadcrumb.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb/nile-breadcrumb.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;CAQxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * Breadcrumb CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    align-items: center;\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"]}

package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.css.js

@@ -19,6 +19,9 @@ export const styles = css `
     font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-600));
     line-height: var(--nile-line-height-xsmall, var(--ng-line-height-text-sm));
     letter-spacing: 0.2px; 
+    -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-breadcrumb-item__arrow {

package/dist/src/nile-breadcrumb-item/nile-breadcrumb-item.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-breadcrumb-item.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * Breadcrumb-item CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    align-items: center;\n    text-align: center;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, 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  .nile-breadcrumb-item__arrow {\n    margin: 0 var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .nile-breadcrumb-item__arrow-hidden {\n    display: none;\n  }\n\n  .nile-breadcrumb-item__slot-text {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));\n  }\n\n  .nile-breadcrumb-item__slot-text:hover {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-hover));\n    cursor: pointer;\n  }\n\n  .nile-breadcrumb-item__last-slot-text {\n    color: var(--nile-breadcrumb-color, var(--ng-colors-text-brand-secondary-700));\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-breadcrumb-item.css.js","sourceRoot":"","sources":["../../../src/nile-breadcrumb-item/nile-breadcrumb-item.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * Breadcrumb-item CSS\n */\nexport const styles = css`\n  :host {\n    display: flex;\n    align-items: center;\n    text-align: center;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    font-size: var(--nile-font-size-small, var(--ng-font-size-text-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular, 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    -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-breadcrumb-item__arrow {\n    margin: 0 var(--nile-spacing-md, var(--ng-spacing-md));\n  }\n\n  .nile-breadcrumb-item__arrow-hidden {\n    display: none;\n  }\n\n  .nile-breadcrumb-item__slot-text {\n    color: var(--nile-colors-dark-500, var(--ng-colors-text-quaternary-500));\n  }\n\n  .nile-breadcrumb-item__slot-text:hover {\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-tertiary-hover));\n    cursor: pointer;\n  }\n\n  .nile-breadcrumb-item__last-slot-text {\n    color: var(--nile-breadcrumb-color, var(--ng-colors-text-brand-secondary-700));\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -14,6 +14,9 @@ export const styles = css `
     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 {
@@ -70,23 +73,23 @@ export const styles = css `
   /* 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));
   }
 
@@ -108,7 +111,7 @@ export const styles = css `
 
   .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));
   }
@@ -249,25 +252,25 @@ export const styles = css `
   /* 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))
   }
@@ -282,7 +285,7 @@ export const styles = css `
 
   .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/src/nile-button/nile-button.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmtBxB,CAAC","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"]}
+{"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAstBxB,CAAC","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"]}

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

@@ -10,6 +10,9 @@ import { css } from 'lit';
  */
 export const styles = css `
   :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 {

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

@@ -1 +1 @@
-{"version":3,"file":"nile-button-filter.css.js","sourceRoot":"","sources":["../../../src/nile-button-filter/nile-button-filter.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;CAyBxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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"]}
+{"version":3,"file":"nile-button-filter.css.js","sourceRoot":"","sources":["../../../src/nile-button-filter/nile-button-filter.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4BxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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"]}

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

@@ -10,6 +10,9 @@ import { css } from 'lit';
  */
 export const styles = css `
   :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/src/nile-button-toggle/nile-button-toggle.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-button-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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"]}
+{"version":3,"file":"nile-button-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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"]}

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

@@ -14,6 +14,9 @@ export const styles = css `
     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 default [styles];

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

@@ -1 +1 @@
-{"version":3,"file":"nile-button-toggle-group.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle-group/nile-button-toggle-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;CAOxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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"]}
+{"version":3,"file":"nile-button-toggle-group.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle-group/nile-button-toggle-group.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;CAUxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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"]}

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

@@ -17,6 +17,9 @@ export const styles = css `
     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/src/nile-calendar/nile-calendar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8RxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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"]}
+{"version":3,"file":"nile-calendar.css.js","sourceRoot":"","sources":["../../../src/nile-calendar/nile-calendar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiSxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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"]}

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

@@ -11,6 +11,9 @@ import { css } from 'lit';
 export const styles = css `
   :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 *,

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

@@ -1 +1 @@
-{"version":3,"file":"nile-card.css.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0ExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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"]}
+{"version":3,"file":"nile-card.css.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6ExB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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"]}

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

@@ -11,6 +11,9 @@ import { css } from 'lit';
 export const styles = css `
   :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) {

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

@@ -1 +1 @@
-{"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAqLxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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"]}
+{"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwLxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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"]}

package/dist/src/nile-chip/nile-chip.css.js

@@ -11,6 +11,9 @@ import { css } from 'lit';
 export const styles = css `
   :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 *,

package/dist/src/nile-chip/nile-chip.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-chip.css.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4JxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * Chip 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  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: var(--nile-spacing-lg,var( --ng-spacing-sm));\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-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-500));\n    line-height: var(--nile-line-height-xsmall,var( --ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: undefined;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n    margin-top: var(--nile-spacing-xxs);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--nile-type-scale-2,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--nile-type-scale-4,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxs);\n  }\n\n  :host {\n    display: block;\n    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n  }\n\n  .nile-chip {\n    padding: var(--nile-spacing-sm,var( --ng-spacing-lg)) var(--nile-spacing-lg,var(--ng-spacing-lg));\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n    display: flex;\n    flex-wrap: wrap;\n    width: 100%;\n    overflow-x: hidden;\n    gap : var(--ng-spacing-md);\n    align-items: center;\n  }\n\n  .nile-chip--no-wrap {\n    flex-wrap: nowrap;\n    overflow-x: scroll;\n  }\n\n  .nile-chip::-webkit-scrollbar {\n    height: 2px;\n  }\n\n  .nile-chip::-webkit-scrollbar-thumb {\n    background: var(\n      --nile-colors-primary-600\n    );\n  }\n\n  .nile-chip--disabled {\n    background: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  :host([disabled]) nile-tag::part(base) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  :host([disabled]) .nile-chip {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .nile-chip:hover:not(.nile-chip--disabled) {\n    background-color: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1))  var(--nile-border-style-solid, var(--ng-border-style-solid)) var(--nile-outline-none, var(--ng-colors-border-brand))\n  }\n\n  .nile-chip.nile-chip--focused:not(.nile-chip--disabled) {\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-600,var(--ng-colors-border-brand));\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n  }\n\n  .nile-chip.nile-chip--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .nile-chip.nile-chip--warning {\n    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n  }\n\n  .nile-chip.nile-chip--error {\n    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n  }\n\n  .nile-chip.nile-chip--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .nile-chip__auto-complete {\n    flex: 1;\n  }\n  .nile-chip__tags {\n    margin: var(--nile-spacing-xxs);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-chip.css.js","sourceRoot":"","sources":["../../../src/nile-chip/nile-chip.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA+JxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","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 * Chip 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  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: inherit;\n    margin-bottom: var(--nile-spacing-lg,var( --ng-spacing-sm));\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-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-500));\n    line-height: var(--nile-line-height-xsmall,var( --ng-line-height-text-sm));\n    letter-spacing: 0.2px;\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-sm));\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n    color: undefined;\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--nile-colors-neutral-700,var( --ng-colors-text-primary-900));\n    margin-top: var(--nile-spacing-xxs);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--nile-type-scale-2,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--nile-type-scale-3,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--nile-type-scale-4,var(--ng-font-size-text-md));\n  }\n\n  .form-control--has-help-text.form-control--radio-group\n    .form-control__help-text {\n    margin-top: var(--nile-spacing-xxs);\n  }\n\n  :host {\n    display: block;\n    font-family: var(--nile-font-family-inherit,var(--ng-font-family-body));\n  }\n\n  .nile-chip {\n    padding: var(--nile-spacing-sm,var( --ng-spacing-lg)) var(--nile-spacing-lg,var(--ng-spacing-lg));\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-radius: var(--nile-radius-radius-xs,var(--ng-radius-md));\n    border: solid 1px var(--nile-colors-neutral-500,var(--ng-colors-border-primary));\n    display: flex;\n    flex-wrap: wrap;\n    width: 100%;\n    overflow-x: hidden;\n    gap : var(--ng-spacing-md);\n    align-items: center;\n  }\n\n  .nile-chip--no-wrap {\n    flex-wrap: nowrap;\n    overflow-x: scroll;\n  }\n\n  .nile-chip::-webkit-scrollbar {\n    height: 2px;\n  }\n\n  .nile-chip::-webkit-scrollbar-thumb {\n    background: var(\n      --nile-colors-primary-600\n    );\n  }\n\n  .nile-chip--disabled {\n    background: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    /* opacity: 0.5; */\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  :host([disabled]) nile-tag::part(base) {\n    background-color: var(--nile-colors-white-base, var(--ng-colors-bg-primary));\n  }\n\n  :host([disabled]) .nile-chip {\n    background-color: var(--nile-colors-dark-200, var(--ng-colors-bg-disabled-subtle));\n  }\n\n  .nile-chip:hover:not(.nile-chip--disabled) {\n    background-color: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n    outline: var(--nile-border-width-1, var(--ng-border-width-1))  var(--nile-border-style-solid, var(--ng-border-style-solid)) var(--nile-outline-none, var(--ng-colors-border-brand))\n  }\n\n  .nile-chip.nile-chip--focused:not(.nile-chip--disabled) {\n    background-color: var(--nile-colors-white-base,var( --ng-colors-bg-primary));\n    border-color: var(--nile-colors-primary-600,var(--ng-colors-border-brand));\n    box-shadow: var(--nile-box-shadow-10,var(--ng-shadow-xs));\n  }\n\n  .nile-chip.nile-chip--disabled {\n    background-color: var(--nile-colors-dark-200,var(--ng-colors-bg-disabled-subtle));\n    border-color: var(--nile-colors-neutral-400,var(--ng-colors-border-disabled));\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .nile-chip.nile-chip--warning {\n    border-color: var(--nile-colors-yellow-500,var( --ng-componentcolors-utility-warning-500));\n  }\n\n  .nile-chip.nile-chip--error {\n    border-color: var(--nile-colors-red-500,var(--ng-colors-border-error));\n  }\n\n  .nile-chip.nile-chip--success {\n    border-color: var(--nile-colors-green-500);\n  }\n\n  .nile-chip__auto-complete {\n    flex: 1;\n  }\n  .nile-chip__tags {\n    margin: var(--nile-spacing-xxs);\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js

@@ -12,6 +12,9 @@ export const styles = css `
  
   :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));
     
  }
  

package/dist/src/nile-circular-progressbar/nile-circular-progressbar.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-circular-progressbar.css.js","sourceRoot":"","sources":["../../../src/nile-circular-progressbar/nile-circular-progressbar.css.ts"],"names":[],"mappings":"AAAC;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAiDxB,CAAA;AACD,eAAe,CAAC,MAAM,CAAC,CAAC","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\n import { css } from 'lit';\n\n /**\n  * Progressbar CSS\n  */\n export const styles = css`\n \n  :host {\n   display: inline-block;\n    \n }\n \n .track {\n   stroke-width: var(--nile-stroke-width-3, var(--ng-stroke-width-6));\n   stroke: var(--nile-circular-progress-bar-track-color-stroke,var(--ng-colors-bg-quaternary));\n   opacity: 0.5;\n   fill: none;\n }\n \n .progress {\n   stroke-width: var(--nile-stroke-width-3,var(--ng-stroke-width-6));\n   stroke: var(--nile-circular-progress-bar-progress-color-stroke,var(--ng-colors-fg-brand-primary-600));\n   stroke-linecap: round;\n   fill: none;\n   transform: rotate(270deg);\n   transform-origin: center;\n   transition: stroke-dashoffset 0.8s ease-in-out;  \n }\n \n .circle__text {\n   fill: var(--nile-circular-progress-bar-circle-color-text, var(--ng-colors-text-primary-900));\n   text-align: center;\n   font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));\n   font-style: normal;\n   font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n   line-height: var(--nile-type-scale-1, var(--ng-line-height-text-sm));\n   letter-spacing: 0.2px;\n }\n \n .nile-progress-bar__status {\n   display: flex;\n   justify-content: space-between;\n   align-items: center;\n   margin-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n \n .nile-progress-bar__message {\n   flex-grow: 1;\n }\n \n .nile-progress-bar__percentage {\n   white-space: nowrap;\n }\n \n `\n export default [styles];\n \n"]}
+{"version":3,"file":"nile-circular-progressbar.css.js","sourceRoot":"","sources":["../../../src/nile-circular-progressbar/nile-circular-progressbar.css.ts"],"names":[],"mappings":"AAAC;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAoDxB,CAAA;AACD,eAAe,CAAC,MAAM,CAAC,CAAC","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\n import { css } from 'lit';\n\n /**\n  * Progressbar CSS\n  */\n export const styles = css`\n \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 \n .track {\n   stroke-width: var(--nile-stroke-width-3, var(--ng-stroke-width-6));\n   stroke: var(--nile-circular-progress-bar-track-color-stroke,var(--ng-colors-bg-quaternary));\n   opacity: 0.5;\n   fill: none;\n }\n \n .progress {\n   stroke-width: var(--nile-stroke-width-3,var(--ng-stroke-width-6));\n   stroke: var(--nile-circular-progress-bar-progress-color-stroke,var(--ng-colors-fg-brand-primary-600));\n   stroke-linecap: round;\n   fill: none;\n   transform: rotate(270deg);\n   transform-origin: center;\n   transition: stroke-dashoffset 0.8s ease-in-out;  \n }\n \n .circle__text {\n   fill: var(--nile-circular-progress-bar-circle-color-text, var(--ng-colors-text-primary-900));\n   text-align: center;\n   font-size: var(--nile-type-scale-1, var(--ng-font-size-text-sm));\n   font-style: normal;\n   font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-semibold));\n   line-height: var(--nile-type-scale-1, var(--ng-line-height-text-sm));\n   letter-spacing: 0.2px;\n }\n \n .nile-progress-bar__status {\n   display: flex;\n   justify-content: space-between;\n   align-items: center;\n   margin-bottom: var(--nile-spacing-xs, var(--ng-spacing-xs));\n }\n \n .nile-progress-bar__message {\n   flex-grow: 1;\n }\n \n .nile-progress-bar__percentage {\n   white-space: nowrap;\n }\n \n `\n export default [styles];\n \n"]}