@aquera/nile-elements 2.0.8 → 2.0.10

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    -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-alt));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));\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-24px));\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-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\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-grayblue, 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-alt));\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var o,_templateObject,r;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){o=_lit.css;}],execute:function execute(){_export("s",r=o(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    -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-alt));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));\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-24px));\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-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\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-grayblue, 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-300));\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-300));\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-alt));\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n  }\n"]))));}};});
 //# sourceMappingURL=nile-badge.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-badge.css.cjs.js","sources":["../../../src/nile-badge/nile-badge.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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-alt));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));\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-24px));\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-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\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-grayblue, 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-alt));\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n  }\n`;\nexport default [styles];\n\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-badge.css.cjs.js","sources":["../../../src/nile-badge/nile-badge.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * 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-alt));\n    border-radius: var(--nile-radius-radius-xs, var(--ng-radius-full));\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-24px));\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-sm));\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium, var(--ng-font-weight-medium));\n    line-height: var(--nile-type-scale-5, var(--ng-line-height-text-sm));\n    letter-spacing: 0.2px;\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-grayblue, 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-300));\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-300));\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-alt));\n    border-radius: var(--nile-radius-full, var(--ng-radius-full));\n  }\n`;\nexport default [styles];\n\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -132,7 +132,7 @@ import{css as o}from"lit";const r=o`
     color: var(--nile-badge-color-font-gray, var(--ng-componentcolors-utility-gray-700));
     border-width: var(--nile-badge-color-border-width, var(--ng-border-width-1));
     border-style: solid;
-    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-200));
+    border-color: var(--nile-badge-color-border-color-gray, var(--ng-componentcolors-utility-gray-300));
     background: var(--nile-badge-color-background-gray, var(--ng-componentcolors-utility-gray-50));
   }
 
@@ -181,7 +181,7 @@ import{css as o}from"lit";const r=o`
   }
 
   .badge--gray.badge--pill-outline {
-    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));
+    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-300));
   }
 
 

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

@@ -1,2 +1,2 @@
-System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",n=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    -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-md))\n      var(--nile-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-sm, var(--ng-spacing-md))\n      var(--nile-spacing-14px, var(--ng-spacing-xl));\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-semibold));\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-md));\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-secondary-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-brand-primary) );\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));\n  }\n\n  .nile-button-toggle__active:hover {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));\n  }\n\n  .nile-button-toggle__disabled {\n    cursor: not-allowed;\n  }\n"]))));}};});
+System.register(["lit"],function(_export,_context){"use strict";var r,_templateObject,n;function _taggedTemplateLiteral(e,t){return t||(t=e.slice(0)),Object.freeze(Object.defineProperties(e,{raw:{value:Object.freeze(t)}}));}return{setters:[function(_lit){r=_lit.css;}],execute:function execute(){_export("s",n=r(_templateObject||(_templateObject=_taggedTemplateLiteral(["\n  :host {\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-button-toggle {\n    display: flex;\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md))\n      var(--nile-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-sm, var(--ng-spacing-md))\n      var(--nile-spacing-14px, var(--ng-spacing-xl));\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-semibold));\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-md));\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-secondary-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-brand-primary) );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-primary-900));\n  }\n\n  .nile-button-toggle__active:hover {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-primary-900));\n  }\n\n  .nile-button-toggle__disabled {\n    cursor: not-allowed;\n  }\n"]))));}};});
 //# sourceMappingURL=nile-button-toggle.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-button-toggle.css.cjs.js","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ButtonToggle CSS\n */\nexport const styles = css`\n  :host {\n    -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-md))\n      var(--nile-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-sm, var(--ng-spacing-md))\n      var(--nile-spacing-14px, var(--ng-spacing-xl));\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-semibold));\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-md));\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-secondary-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-brand-primary) );\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));\n  }\n\n  .nile-button-toggle__active:hover {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));\n  }\n\n  .nile-button-toggle__disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-button-toggle.css.cjs.js","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * ButtonToggle CSS\n */\nexport const styles = css`\n  :host {\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .nile-button-toggle {\n    display: flex;\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md))\n      var(--nile-spacing-xl, var(--ng-spacing-xl))\n      var(--nile-spacing-sm, var(--ng-spacing-md))\n      var(--nile-spacing-14px, var(--ng-spacing-xl));\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-semibold));\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-md));\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-secondary-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-brand-primary) );\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-primary-900));\n  }\n\n  .nile-button-toggle__active:hover {\n    background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-primary-900));\n  }\n\n  .nile-button-toggle__disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport default [styles];\n"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"oTAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -62,12 +62,12 @@ import{css as r}from"lit";const n=r`
 
   .nile-button-toggle__active {
     background-color: var( --nile-colors-neutral-500, var(--ng-colors-bg-brand-primary) );
-    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-primary-900));
   }
 
   .nile-button-toggle__active:hover {
     background-color: var(--nile-colors-neutral-500, var(--ng-colors-bg-brand-primary));
-    color: var(--nile-colors-dark-900, var(--ng-colors-bg-brand-solid));
+    color: var(--nile-colors-dark-900, var(--ng-colors-text-brand-primary-900));
   }
 
   .nile-button-toggle__disabled {