@aquera/nile-elements 0.1.35-beta-1.7 → 0.1.35-beta-1.11

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

@@ -1 +1 @@
-{"version":3,"file":"nile-accordion.css.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HxB,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 * Detail CSS\n */\nexport const styles = css`\n\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    display: block;\n  }\n\n  .accordian {\n    border-top:solid 1px var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-white-base);\n    overflow-anchor: none;\n  }\n\n  .accordian--lg{\n    --accordian-text-size:var(--nile-type-scale-3);\n    --accordian-heading-padding: var(--nile-spacing-xl) var(--nile-spacing-lg);\n    --accordian-content-padding: var(--nile-spacing-sm) var(--nile-spacing-lg) var(--nile-spacing-xl);\n  }\n\n  .accordian--md{\n    --accordian-text-size:var(--nile-type-scale-3);\n    --accordian-heading-padding: var(--nile-spacing-lg) var(--nile-spacing-lg);\n    --accordian-content-padding: var(--nile-spacing-sm) var(--nile-spacing-lg) var(--nile-spacing-xl);\n  }\n\n  .accordian--sm{\n    --accordian-text-size:var(--nile-type-scale-3);\n    --accordian-heading-padding: var(--nile-spacing-sm) var(--nile-spacing-lg);\n    --accordian-content-padding: var(--nile-spacing-sm) var(--nile-spacing-lg) var(--nile-spacing-lg);\n  }\n  \n  .accordian {\n    font-size: var(--accordian-text-size);\n  }\n\n  .accordian--disabled {\n    opacity: 0.5;\n  }\n\n  .accordian__header {\n    display: flex;\n    gap:var(--nile-spacing-lg);\n    align-items: center;\n    border-radius: inherit;\n    font-weight: var(--nile-font-weight-medium);\n    padding: var(--accordian-heading-padding);\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .accordian__header--dark{\n    background-color:var(--nile-colors-dark-200);\n  }\n\n  .accordian__header--arrow-left{\n    flex-direction: row-reverse;\n  }\n\n  .accordian__header:focus {\n    outline: none;\n  }\n\n  .accordian__header:focus-visible {\n    outline: solid 3px var(--nile-colors-blue-500);\n    outline-offset: calc(1px + 1px);\n  }\n\n  .accordian--disabled .accordian__header {\n    cursor: not-allowed;\n  }\n\n  .accordian--disabled .accordian__header:focus-visible {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .accordian__summary {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .accordian__summary-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n  }\n\n  .accordian--open .accordian__summary-icon {\n    rotate: 90deg;\n  }\n\n  .accordian--open slot[name='expand-icon'],\n  .accordian:not(.accordian--open) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .accordian__body {\n    overflow: hidden;\n  }\n\n  .accordian__content {\n    display: block;\n    padding: var(--accordian-content-padding);\n  }\n\n  .accordian__content--arrow-left{\n   margin-left: var(--nile-spacing-3xl);  \n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-accordion.css.js","sourceRoot":"","sources":["../../../src/nile-accordion/nile-accordion.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,KAAK,CAAC;AAExB;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2HxB,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 * Detail CSS\n */\nexport const styles = css`\n\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    display: block;\n  }\n\n  .accordian {\n    border-top:solid 1px var(--nile-colors-neutral-500);\n    background-color: var(--nile-colors-white-base);\n    overflow-anchor: none;\n  }\n\n  .accordian--lg{\n    --accordian-text-size:var(--sm-tesx, 14px);\n    --accordian-heading-padding: 16px 12px;\n    --accordian-content-padding: 6px 12px 18px;\n  }\n\n  .accordian--md{\n    --accordian-text-size:var(--sm-tesx, 14px);\n    --accordian-heading-padding: 12px 12px;\n    --accordian-content-padding: 6px 12px 18px;\n  }\n\n  .accordian--sm{\n    --accordian-text-size:var(--sm-tesx, 12px);\n    --accordian-heading-padding: 6px 12px;\n    --accordian-content-padding: 6px 12px 12px;\n  }\n  \n  .accordian {\n    font-size: var(--accordian-text-size);\n  }\n\n  .accordian--disabled {\n    opacity: 0.5;\n  }\n\n  .accordian__header {\n    display: flex;\n    gap:12px;\n    align-items: center;\n    border-radius: inherit;\n    font-weight:500;\n    padding: var(--accordian-heading-padding);\n    user-select: none;\n    cursor: pointer;\n  }\n\n  .accordian__header--dark{\n    background-color:var(--nile-colors-dark-200);\n  }\n\n  .accordian__header--arrow-left{\n    flex-direction: row-reverse;\n  }\n\n  .accordian__header:focus {\n    outline: none;\n  }\n\n  .accordian__header:focus-visible {\n    outline: solid 3px hsl(200.4, 98%, 39.4%);\n    outline-offset: calc(1px + 1px);\n  }\n\n  .accordian--disabled .accordian__header {\n    cursor: not-allowed;\n  }\n\n  .accordian--disabled .accordian__header:focus-visible {\n    outline: none;\n    box-shadow: none;\n  }\n\n  .accordian__summary {\n    flex: 1 1 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .accordian__summary-icon {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    transition: 250ms rotate ease;\n  }\n\n  .accordian--open .accordian__summary-icon {\n    rotate: 90deg;\n  }\n\n  .accordian--open slot[name='expand-icon'],\n  .accordian:not(.accordian--open) slot[name='collapse-icon'] {\n    display: none;\n  }\n\n  .accordian__body {\n    overflow: hidden;\n  }\n\n  .accordian__content {\n    display: block;\n    padding: var(--accordian-content-padding);\n  }\n\n  .accordian__content--arrow-left{\n   margin-left:28px;\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -16,9 +16,9 @@ export const styles = css `
     box-sizing: border-box;
     font-family: var(--nile-font-family-serif);
     font-style: normal;
-    font-weight: var(--nile-font-weight-semi-bold);
+    font-weight: 600;
     color: var(--nile-colors-white-base);
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: 4px;
     text-transform: uppercase;
     display: flex;
     flex-direction: column;
@@ -30,7 +30,7 @@ export const styles = css `
   .avatar {
     box-sizing: border-box;
     border: 0.5px solid var(--nile-colors-neutral-500);
-    border-radius: var(--nile-radius-radius-xs);
+    border-radius: 4px;
     background-position: 50% 50%;
     background-size: cover;
     background-repeat: no-repeat;
@@ -47,21 +47,21 @@ export const styles = css `
   .avatar__medium {
     width: var(--nile-spacing-3-x);
     height: var(--nile-spacing-3-x);
-    font-size: var(--nile-type-scale-2);
+    font-size: 12px;
     line-height: 18px;
   }
 
   .avatar__large {
     width: 32px;
     height: 32px;
-    font-size: var(--nile-type-scale-3);
+    font-size: 14px;
     line-height: 20px;
   }
 
   .avatar__extralarge {
     height: 40px;
     width: 40px;
-    font-size: var(--nile-type-scale-4);
+    font-size: 16px;
     line-height: 24px;
   }
 

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

@@ -1 +1 @@
-{"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFxB,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 * Avatar CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-semi-bold);\n    color: var(--nile-colors-white-base);\n    border-radius: var(--nile-radius-radius-xs);\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n  }\n\n  .avatar {\n    box-sizing: border-box;\n    border: 0.5px solid var(--nile-colors-neutral-500);\n    border-radius: var(--nile-radius-radius-xs);\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__small {\n    width: var(--nile-type-scale-4);\n    height: var(--nile-type-scale-4);\n    font-size: 6.516px;\n    line-height: 6.516px;\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x);\n    height: var(--nile-spacing-3-x);\n    font-size: var(--nile-type-scale-2);\n    line-height: 18px;\n  }\n\n  .avatar__large {\n    width: 32px;\n    height: 32px;\n    font-size: var(--nile-type-scale-3);\n    line-height: 20px;\n  }\n\n  .avatar__extralarge {\n    height: 40px;\n    width: 40px;\n    font-size: var(--nile-type-scale-4);\n    line-height: 24px;\n  }\n\n  .avatar__2xl {\n    height: 64px;\n    width: 64px;\n    font-size: 24px;\n    line-height: 32px;\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background:var(--nile-avatar-background-color-orange);\n  }\n\n  .variant__pink {\n    background: var(--nile-avatar-background-color-pink);\n  }\n\n  .variant__blue {\n    background: var(--nile-avatar-background-color-blue);\n  }\n\n  .variant__light_blue {\n    background: var(--nile-avatar-background-color-lightblue);\n  }\n\n  .variant__green {\n    background: var(--nile-avatar-background-color-green);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-avatar.css.js","sourceRoot":"","sources":["../../../src/nile-avatar/nile-avatar.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuFxB,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 * Avatar CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .text__avatar {\n    box-sizing: border-box;\n    font-family: var(--nile-font-family-serif);\n    font-style: normal;\n    font-weight: 600;\n    color: var(--nile-colors-white-base);\n    border-radius: 4px;\n    text-transform: uppercase;\n    display: flex;\n    flex-direction: column;\n    justify-content: center;\n    align-items: center;\n    box-sizing: border-box;\n  }\n\n  .avatar {\n    box-sizing: border-box;\n    border: 0.5px solid var(--nile-colors-neutral-500);\n    border-radius: 4px;\n    background-position: 50% 50%;\n    background-size: cover;\n    background-repeat: no-repeat;\n    overflow: hidden;\n  }\n\n  .avatar__small {\n    width: var(--nile-type-scale-4);\n    height: var(--nile-type-scale-4);\n    font-size: 6.516px;\n    line-height: 6.516px;\n  }\n\n  .avatar__medium {\n    width: var(--nile-spacing-3-x);\n    height: var(--nile-spacing-3-x);\n    font-size: 12px;\n    line-height: 18px;\n  }\n\n  .avatar__large {\n    width: 32px;\n    height: 32px;\n    font-size: 14px;\n    line-height: 20px;\n  }\n\n  .avatar__extralarge {\n    height: 40px;\n    width: 40px;\n    font-size: 16px;\n    line-height: 24px;\n  }\n\n  .avatar__2xl {\n    height: 64px;\n    width: 64px;\n    font-size: 24px;\n    line-height: 32px;\n  }\n\n  .avatar__rounded {\n    border-radius: 50%;\n  }\n\n  .variant__orange {\n    background:var(--nile-avatar-background-color-orange);\n  }\n\n  .variant__pink {\n    background: var(--nile-avatar-background-color-pink);\n  }\n\n  .variant__blue {\n    background: var(--nile-avatar-background-color-blue);\n  }\n\n  .variant__light_blue {\n    background: var(--nile-avatar-background-color-lightblue);\n  }\n\n  .variant__green {\n    background: var(--nile-avatar-background-color-green);\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -13,8 +13,8 @@ export const styles = css `
   }
 
   .badge {
-    padding: var(--nile-spacing-xxs) var(--nile-spacing-sm);
-    border-radius: var(--nile-radius-radius-xs);
+    padding: 2px 6px;
+    border-radius: 4px;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -24,10 +24,10 @@ export const styles = css `
 
   .badge__content {
     font-family: var(--nile-font-family-serif);
-    font-size: var(--nile-type-scale-2);
+    font-size: 12px;
     font-style: normal;
-    font-weight: var(--nile-font-weight-medium);
-    line-height: var(--nile-line-height-small);
+    font-weight: 500;
+    line-height: 18px;
     letter-spacing: 0.2px;
   }
 
@@ -168,7 +168,7 @@ export const styles = css `
   }
 
   .badge--rounded {
-    padding: var(--nile-spacing-xxs) var(--nile-spacing-md);
+    padding: 2px 8px;
     border-radius: 100px;
   }
 `;

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,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(--nile-spacing-sm);\n    border-radius: var(--nile-radius-radius-xs);\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 22px;\n  }\n\n  .badge__content {\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-2);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-medium);\n    line-height: var(--nile-line-height-small);\n    letter-spacing: 0.2px;\n  }\n\n  .badge--primary {\n    background: var(--nile-badge-color-background-primary);\n    color: var(--nile-badge-color-font-primary);\n  }\n\n  .badge--normal {\n    background: var(--nile-badge-color-background-normal);\n  }\n\n  .badge--info {\n    background: var(--nile-badge-color-background-info);\n  }\n\n  /* for v2 */\n  .badge--pink {\n    color: var(--nile-badge-color-font-pink);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-pink);\n    background: var(--nile-badge-color-background-pink);\n  }\n\n  .badge--orange {\n    color: var(--nile-badge-color-font-orange);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-orange);\n    background: var(--nile-badge-color-background-orange);\n  }\n\n  .badge--purple {\n    color: var(--nile-badge-color-font-purple);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-purple);\n    background: var(--nile-badge-color-background-purple);\n  }\n\n  .badge--indigo {\n    color: var(--nile-badge-color-font-indigo);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-indigo);\n    background: var(--nile-badge-color-background-indigo);\n  }\n\n  .badge--blue {\n    color: var(--nile-badge-color-font-blue);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-blue);\n    background: var(--nile-badge-color-background-blue);\n  }\n  .badge--blue-light {\n    color:var(--nile-badge-color-font-bluelight);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-bluelight);\n    background: var(--nile-badge-color-background-bluelight);\n  }\n\n  .badge--gray-blue {\n    color: var(--nile-badge-color-font-grayblue);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-grablue);\n    background: var(--nile-badge-color-background-grayblue);\n  }\n\n  .badge--success {\n    color: var(--nile-badge-color-font-success);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-success);\n    background: var(--nile-badge-color-background-success);\n  }\n  .badge--warning {\n    color: var(--nile-badge-color-font-warning);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-warning);\n    background: var(--nile-badge-color-background-warning);\n  }\n\n  .badge--error {\n    color: var(--nile-badge-color-font-error);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-error);\n    background: var(--nile-badge-color-background-error);\n  }\n\n  .badge--brand {\n    color: var(--nile-badge-color-font-brand);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-brand);\n    background: var(--nile-badge-color-background-brand);\n  }\n\n  .badge--gray {\n    color: var(--nile-badge-color-font-gray);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-gray);\n    background: var(--nile-badge-color-background-gray);\n  }\n\n  .badge--pink.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-pink);\n  }\n\n  .badge--orange.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-orange);\n  }\n\n  .badge--purple.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-purple);\n  }\n\n  .badge--indigo.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-indigo));\n  }\n\n  .badge--blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-blue));\n  }\n\n  .badge--blue-light.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-bluelight);\n  }\n\n  .badge--gray-blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);\n  }\n\n  .badge--success.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-success);\n  }\n\n  .badge--warning.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-warning);\n  }\n\n  .badge--error.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-error);\n  }\n\n  .badge--brand.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-brand);\n  }\n\n  .badge--gray.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);\n  }\n\n  .badge--pill-outline {\n    background: transparent;\n  }\n\n  .badge--rounded {\n    padding: var(--nile-spacing-xxs) var(--nile-spacing-md);\n    border-radius: 100px;\n  }\n`;\nexport default [styles];\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAmKxB,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: 2px 6px;\n    border-radius: 4px;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    box-sizing: border-box;\n    height: 22px;\n  }\n\n  .badge__content {\n    font-family: var(--nile-font-family-serif);\n    font-size: 12px;\n    font-style: normal;\n    font-weight: 500;\n    line-height: 18px;\n    letter-spacing: 0.2px;\n  }\n\n  .badge--primary {\n    background: var(--nile-badge-color-background-primary);\n    color: var(--nile-badge-color-font-primary);\n  }\n\n  .badge--normal {\n    background: var(--nile-badge-color-background-normal);\n  }\n\n  .badge--info {\n    background: var(--nile-badge-color-background-info);\n  }\n\n  /* for v2 */\n  .badge--pink {\n    color: var(--nile-badge-color-font-pink);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-pink);\n    background: var(--nile-badge-color-background-pink);\n  }\n\n  .badge--orange {\n    color: var(--nile-badge-color-font-orange);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-orange);\n    background: var(--nile-badge-color-background-orange);\n  }\n\n  .badge--purple {\n    color: var(--nile-badge-color-font-purple);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-purple);\n    background: var(--nile-badge-color-background-purple);\n  }\n\n  .badge--indigo {\n    color: var(--nile-badge-color-font-indigo);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-indigo);\n    background: var(--nile-badge-color-background-indigo);\n  }\n\n  .badge--blue {\n    color: var(--nile-badge-color-font-blue);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-blue);\n    background: var(--nile-badge-color-background-blue);\n  }\n  .badge--blue-light {\n    color:var(--nile-badge-color-font-bluelight);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-bluelight);\n    background: var(--nile-badge-color-background-bluelight);\n  }\n\n  .badge--gray-blue {\n    color: var(--nile-badge-color-font-grayblue);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-grablue);\n    background: var(--nile-badge-color-background-grayblue);\n  }\n\n  .badge--success {\n    color: var(--nile-badge-color-font-success);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-success);\n    background: var(--nile-badge-color-background-success);\n  }\n  .badge--warning {\n    color: var(--nile-badge-color-font-warning);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-warning);\n    background: var(--nile-badge-color-background-warning);\n  }\n\n  .badge--error {\n    color: var(--nile-badge-color-font-error);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-error);\n    background: var(--nile-badge-color-background-error);\n  }\n\n  .badge--brand {\n    color: var(--nile-badge-color-font-brand);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-brand);\n    background: var(--nile-badge-color-background-brand);\n  }\n\n  .badge--gray {\n    color: var(--nile-badge-color-font-gray);\n    border: var(--nile-badge-color-border-width) solid var(--nile-badge-color-border-color-gray);\n    background: var(--nile-badge-color-background-gray);\n  }\n\n  .badge--pink.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-pink);\n  }\n\n  .badge--orange.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-orange);\n  }\n\n  .badge--purple.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-purple);\n  }\n\n  .badge--indigo.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-indigo));\n  }\n\n  .badge--blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(var(--nile-badge-color-pill-outline-blue));\n  }\n\n  .badge--blue-light.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-bluelight);\n  }\n\n  .badge--gray-blue.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);\n  }\n\n  .badge--success.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-success);\n  }\n\n  .badge--warning.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-warning);\n  }\n\n  .badge--error.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-error);\n  }\n\n  .badge--brand.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-brand);\n  }\n\n  .badge--gray.badge--pill-outline {\n    border: var(--nile-badge-color-border-width-pill-outline) solid var(--nile-badge-color-pill-outline-gray);\n  }\n\n  .badge--pill-outline {\n    background: transparent;\n  }\n\n  .badge--rounded {\n    padding: 2px 8px;\n    border-radius: 100px;\n  }\n`;\nexport default [styles];\n"]}

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

@@ -70,7 +70,7 @@ let NileBadge = class NileBadge extends NileElement {
                 this.pilltype == 'pill-color',
         })}
       >
-        <slot part="content" class="badge__content"></slot>
+        <slot name="badge" part="badge" class="badge__content"></slot>
       </span>
     `;
     }

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

@@ -1 +1 @@
-{"version":3,"file":"nile-badge.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AAGI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAAnC;;QAGL,iCAAiC;QACJ,YAAO,GAgBlB,QAAQ,CAAC;QAE3B,mDAAmD;QACP,YAAO,GAAG,KAAK,CAAC;QAE5D,yBAAyB;QACI,aAAQ,GAGnB,aAAa,CAAC;IAmClC,CAAC;IAjCC,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,KAAK,EAAE,IAAI;YACX,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,mBAAmB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;YAClD,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAChD,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACxC,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACxC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,qBAAqB,EAAE,IAAI,CAAC,QAAQ,IAAI,cAAc;YACtD,oBAAoB,EAAE,IAAI,CAAC,QAAQ,IAAI,aAAa;YACpD,gBAAgB,EACd,IAAI,CAAC,OAAO;gBACZ,IAAI,CAAC,QAAQ,IAAI,cAAc;gBAC/B,IAAI,CAAC,QAAQ,IAAI,YAAY;SAChC,CAAC;;;;KAIL,CAAC;IACJ,CAAC;;AA9DM,gBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAGV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAgBD;AAGiB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAiB;AAG/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAGI;AA7BrB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAgErB;;AAED,eAAe,SAAS,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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { styles } from './nile-badge.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-badge\n *\n */\n\n/**\n * @summary badges are used as labels to organize things or to indicate a selection.\n * @status stable\n *\n * @dependency nile-icon-button\n *\n * @slot - The badge's content.\n *\n * @event nile-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The badge's content.\n * @csspart remove-button - The badge's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\n\n@customElement('nile-badge')\nexport class NileBadge extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  /** The badge's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'primary'\n    | 'success'\n    | 'normal'\n    | 'warning'\n    | 'error'\n    | 'info'\n    | 'gray'\n    | 'brand'\n    | 'blue-light'\n    | 'blue'\n    | 'indigo'\n    | 'purple'\n    | 'pink'\n    | 'orange'\n    | 'blue-gray'\n    | 'gray-blue' = 'normal';\n\n  /** Draws a pill-style badge with rounded edges. */\n  @property({ type: Boolean, reflect: true }) rounded = false;\n\n  //  For setting pill type\n  @property({ reflect: true }) pilltype:\n    | 'pill-color'\n    | 'pill-outline'\n    | 'badge-color'='badge-color';\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          badge: true,\n          'badge--primary': this.variant === 'primary',\n          'badge--normal': this.variant === 'normal',\n          'badge--info': this.variant === 'info',\n          'badge--pink': this.variant === 'pink',\n          'badge--orange': this.variant === 'orange',\n          'badge--purple': this.variant === 'purple',\n          'badge--indigo': this.variant === 'indigo',\n          'badge--blue': this.variant === 'blue',\n          'badge--blue-light': this.variant === 'blue-light',\n          'badge--gray-blue': this.variant === 'gray-blue',\n          'badge--success': this.variant === 'success',\n          'badge--warning': this.variant === 'warning',\n          'badge--error': this.variant === 'error',\n          'badge--brand': this.variant === 'brand',\n          'badge--gray': this.variant === 'gray',\n          'badge--pill-outline': this.pilltype == 'pill-outline',\n          'badge--badge-color': this.pilltype == 'badge-color',\n          'badge--rounded':\n            this.rounded ||\n            this.pilltype == 'pill-outline' ||\n            this.pilltype == 'pill-color',\n        })}\n      >\n        <slot part=\"content\" class=\"badge__content\"></slot>\n      </span>\n    `;\n  }\n}\n\nexport default NileBadge;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-badge': NileBadge;\n  }\n}\n"]}
+{"version":3,"file":"nile-badge.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,GAGL,MAAM,KAAK,CAAC;AACb,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AAGI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAAnC;;QAGL,iCAAiC;QACJ,YAAO,GAgBlB,QAAQ,CAAC;QAE3B,mDAAmD;QACP,YAAO,GAAG,KAAK,CAAC;QAE5D,yBAAyB;QACI,aAAQ,GAGnB,aAAa,CAAC;IAmClC,CAAC;IAjCC,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,KAAK,EAAE,IAAI;YACX,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,mBAAmB,EAAE,IAAI,CAAC,OAAO,KAAK,YAAY;YAClD,kBAAkB,EAAE,IAAI,CAAC,OAAO,KAAK,WAAW;YAChD,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACxC,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACxC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,qBAAqB,EAAE,IAAI,CAAC,QAAQ,IAAI,cAAc;YACtD,oBAAoB,EAAE,IAAI,CAAC,QAAQ,IAAI,aAAa;YACpD,gBAAgB,EACd,IAAI,CAAC,OAAO;gBACZ,IAAI,CAAC,QAAQ,IAAI,cAAc;gBAC/B,IAAI,CAAC,QAAQ,IAAI,YAAY;SAChC,CAAC;;;;KAIL,CAAC;IACJ,CAAC;;AA9DM,gBAAM,GAAmB,MAAM,AAAzB,CAA0B;AAGV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAgBD;AAGiB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAiB;AAG/B;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAGI;AA7BrB,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAgErB;;AAED,eAAe,SAAS,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 {\n  LitElement,\n  html,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit';\nimport { styles } from './nile-badge.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-badge\n *\n */\n\n/**\n * @summary badges are used as labels to organize things or to indicate a selection.\n * @status stable\n *\n * @dependency nile-icon-button\n *\n * @slot - The badge's content.\n *\n * @event nile-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The badge's content.\n * @csspart remove-button - The badge's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\n\n@customElement('nile-badge')\nexport class NileBadge extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  /** The badge's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'primary'\n    | 'success'\n    | 'normal'\n    | 'warning'\n    | 'error'\n    | 'info'\n    | 'gray'\n    | 'brand'\n    | 'blue-light'\n    | 'blue'\n    | 'indigo'\n    | 'purple'\n    | 'pink'\n    | 'orange'\n    | 'blue-gray'\n    | 'gray-blue' = 'normal';\n\n  /** Draws a pill-style badge with rounded edges. */\n  @property({ type: Boolean, reflect: true }) rounded = false;\n\n  //  For setting pill type\n  @property({ reflect: true }) pilltype:\n    | 'pill-color'\n    | 'pill-outline'\n    | 'badge-color'='badge-color';\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          badge: true,\n          'badge--primary': this.variant === 'primary',\n          'badge--normal': this.variant === 'normal',\n          'badge--info': this.variant === 'info',\n          'badge--pink': this.variant === 'pink',\n          'badge--orange': this.variant === 'orange',\n          'badge--purple': this.variant === 'purple',\n          'badge--indigo': this.variant === 'indigo',\n          'badge--blue': this.variant === 'blue',\n          'badge--blue-light': this.variant === 'blue-light',\n          'badge--gray-blue': this.variant === 'gray-blue',\n          'badge--success': this.variant === 'success',\n          'badge--warning': this.variant === 'warning',\n          'badge--error': this.variant === 'error',\n          'badge--brand': this.variant === 'brand',\n          'badge--gray': this.variant === 'gray',\n          'badge--pill-outline': this.pilltype == 'pill-outline',\n          'badge--badge-color': this.pilltype == 'badge-color',\n          'badge--rounded':\n            this.rounded ||\n            this.pilltype == 'pill-outline' ||\n            this.pilltype == 'pill-color',\n        })}\n      >\n        <slot name=\"badge\" part=\"badge\" class=\"badge__content\"></slot>\n      </span>\n    `;\n  }\n}\n\nexport default NileBadge;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-badge': NileBadge;\n  }\n}\n"]}

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

@@ -17,12 +17,12 @@ export const styles = css `
     font-size: var(--nile-font-size-small);
     font-style: normal;
     font-weight: var(--nile-font-weight-regular);
-    line-height: var(--nile-line-height-xsmall);
+    line-height: 16.8px;
     letter-spacing: 0.2px;
   }
 
   .nile-breadcrumb-item__arrow {
-    margin: 0 var(--nile-spacing-md);
+    margin: 0 8px;
   }
 
   .nile-breadcrumb-item__arrow-hidden {

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);\n    font-size: var(--nile-font-size-small);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: var(--nile-line-height-xsmall);\n    letter-spacing: 0.2px;\n  }\n\n  .nile-breadcrumb-item__arrow {\n    margin: 0 var(--nile-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);\n  }\n\n  .nile-breadcrumb-item__slot-text:hover {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n  }\n\n  .nile-breadcrumb-item__last-slot-text {\n    color: var(--nile-breadcrumb-color);\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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);\n    font-size: var(--nile-font-size-small);\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: 16.8px;\n    letter-spacing: 0.2px;\n  }\n\n  .nile-breadcrumb-item__arrow {\n    margin: 0 8px;\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);\n  }\n\n  .nile-breadcrumb-item__slot-text:hover {\n    color: var(--nile-colors-primary-600);\n    cursor: pointer;\n  }\n\n  .nile-breadcrumb-item__last-slot-text {\n    color: var(--nile-breadcrumb-color);\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -35,12 +35,12 @@ export const styles = css `
       var(--nile-transition-duration-default) border,
       var(--nile-transition-duration-default) box-shadow;
     cursor: inherit;
-    font-size: var(--nile-type-scale-3);
-    font-weight: var(--nile-font-weight-medium);
+    font-size: 14px;
+    font-weight: 500;
     border-radius: var(--nile-radius-base-standard);
-    padding: var(--nile-spacing-lg);
-    gap: var(--nile-spacing-sm);
-    line-height: var(--nile-line-height-small);
+    padding: 10px 14px;
+    gap: 5px;
+    line-height: 20px;
     box-sizing: border-box;
     height: 40px;
   }
@@ -211,7 +211,7 @@ export const styles = css `
 
   .button--standard.button--caution:active:not(.button--disabled) {
     background-color: var(--nile-colors-red-700);
-    border-color: var(--nile-colors-red-700);
+    border-color: #820B0B;
     color: var(--nile-colors-white-base);
   }
 
@@ -225,121 +225,121 @@ export const styles = css `
 
   /* destructive */
   .button--standard.button--destructive {
-    background-color: var(--nile-colors-red-500);
-    border-color:  var(--nile-colors-red-500);
+    background-color: #d92d20;
+    border-color: #d92d20;
     color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--destructive:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-red-700);
-    border-color: var(--nile-colors-red-700);
+    background-color: #b42318;
+    border-color: #b42318;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--destructive:active:not(.button--disabled) {
-    background-color: var(--nile-colors-red-500);
-    border-color:  var(--nile-colors-red-500);
+    background-color: #d92d20;
+    border-color: #d92d20;
     color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
   }
   .button--standard.button--destructive:focus-visible:not(.button--disabled) {
-    background-color: var(--nile-colors-red-500);
-    border-color:  var(--nile-colors-red-500);
+    background-color: #d92d20;
+    border-color: #d92d20;
     color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
   }
 
   .button--standard.button--destructive.button--disabled {
-    background-color: var(--nile-colors-neutral-100);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-500);
+    background-color: #f2f4f7;
+    border-color: #eaecf0;
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   .button--standard.button--destructive.button--disabled:hover,
   .button--standard.button--destructive.button--disabled:active {
-    background-color: var(--nile-colors-neutral-100);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-500);
+    background-color: #f2f4f7;
+    border-color: #eaecf0;
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   /* secondary-Grey */
   .button--standard.button--secondary-grey {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-primary-900);
+    border-color: #d0d5dd;
+    color: #344054;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--secondary-grey:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-neutral-100);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-dark-900);
+    background-color: #f9fafb;
+    border-color: #d0d5dd;
+    color: #182230;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--secondary-grey:active:not(.button--disabled) {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-primary-900);
+    border-color: #d0d5dd;
+    color: #344054;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(152, 162, 179, 0.14);
   }
 
   .button--standard.button--secondary-grey.button--disabled {
-    background-color: var(--nile-colors-neutral-400);
+    background-color: #eaecf0;
     border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-500);
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   .button--standard.button--secondary-grey.button--disabled:hover,
   .button--standard.button--secondary-grey.button--disabled:active {
-    background-color: var(--nile-colors-neutral-400);
+    background-color: #eaecf0;
     border-color: var(--nile-colors-neutral-700);
-    color: var(--nile-colors-neutral-500);
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   /* secondary-blue */
   .button--standard.button--secondary-blue {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-primary-500);
-    color: var(--nile-colors-primary-700);
+    border-color: #85aad1;
+    color: #005291;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--secondary-blue:hover:not(.button--disabled) {
-    background-color: var(--nile-colors-blue-100);
-    border-color: var(--nile-colors-primary-500);
-    color: var(--nile-colors-primary-700);
+    background-color: #eaf0f8;
+    border-color: #85aad1;
+    color: #004678;
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);
   }
 
   .button--standard.button--secondary-blue:active:not(.button--disabled) {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-primary-500);
-    color: var(--nile-colors-primary-700);
+    border-color: #85aad1;
+    color: #005291;
     box-shadow: 0px 1px 2px 0px rgba(0, 82, 145, 0.1),
       0px 0px 0px 4px rgba(0, 94, 166, 0.15);
   }
 
   .button--standard.button--secondary-blue.button--disabled {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-500);
+    border-color: #eaecf0;
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
   .button--standard.button--secondary-blue.button--disabled:hover,
   .button--standard.button--secondary-blue.button--disabled:active {
     background-color: var(--nile-colors-white-base);
-    border-color: var(--nile-colors-neutral-400);
-    color: var(--nile-colors-neutral-500);
+    border-color: #eaecf0;
+    color: #98a2b3;
     cursor: not-allowed;
   }
 
@@ -537,21 +537,21 @@ export const styles = css `
 
   /* destructive  */
   .button--outline.button--destructive {
-    border-color: var(--nile-colors-red-400);
-    color: var(--nile-colors-red-700);
+    border-color: #fda29b;
+    color: #b42318;
     box-shadow: 0px;
   }
 
   .button--outline.button--destructive:hover:not(.button--disabled),
   .button--outline.button--destructive.button--checked:not(.button--disabled) {
-    border-color: var(--nile-colors-red-400);
-    color: var(--nile-colors-red-700);
-    background-color: var(--nile-colors-red-100);
+    border-color: #fda29b;
+    color: #912018;
+    background-color: #fef3f2;
   }
 
   .button--outline.button--destructive:active:not(.button--disabled) {
-    border-color: var(--nile-colors-red-400);
-    color: var(--nile-colors-red-700);
+    border-color: #fda29b;
+    color: #b42318;
     background-color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
@@ -559,8 +559,8 @@ export const styles = css `
 
   /* destructive - focus-visible */
   .button--outline.button--destructive:focus-visible:not(.button--disabled) {
-    border-color: var(--nile-colors-red-400);
-    color: var(--nile-colors-red-700);
+    border-color: #fda29b;
+    color: #b42318;
     background-color: var(--nile-colors-white-base);
     box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05),
       0px 0px 0px 4px rgba(240, 68, 56, 0.24);
@@ -575,8 +575,8 @@ export const styles = css `
   .button--outline.button--secondary-grey.button--checked:not(
       .button--disabled
     ) {
-    color: var(--nile-colors-primary-900);
-    background-color: var(--nile-colors-neutral-100);
+    color: #344054;
+    background-color: #f9fafb;
   }
 
   .button--outline.button--secondary-grey:active:not(.button--disabled) {
@@ -596,8 +596,8 @@ export const styles = css `
   .button--outline.button--secondary-blue.button--checked:not(
       .button--disabled
     ) {
-    color: var(--nile-colors-primary-700);
-    background-color: var(--nile-colors-blue-100);
+    color: #004678;
+    background-color: #eaf0f8;
   }
 
   .button--outline.button--secondary-blue:active:not(.button--disabled) {
@@ -619,11 +619,11 @@ export const styles = css `
  */
 
   .button--pill.button--small {
-    border-radius: var(--nile-radius-2xl);
+    border-radius: 24px;
   }
 
   .button--pill.button--medium {
-    border-radius: var(--nile-radius-2xl);
+    border-radius: 32px;
   }
 
   /*
@@ -631,8 +631,8 @@ export const styles = css `
  */
 
   .button--circle {
-    padding-left: var(--nile-spacing-none);
-    padding-right: var(--nile-spacing-none);
+    padding-left: 0;
+    padding-right: 0;
   }
 
   .button--circle.button--small {
@@ -682,7 +682,7 @@ export const styles = css `
   .button--loading nile-spinner {
     --indicator-color: currentColor;
     position: absolute;
-    font-size: var(--nile-type-scale-4);
+    font-size: 1em;
     height: 1em;
     width: 1em;
     top: calc(50% - 0.5em);

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwrBxB,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: 1px;\n    font-style: normal;\n    font-family: var(--nile-font-family-serif);\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) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    font-size: var(--nile-type-scale-3);\n    font-weight: var(--nile-font-weight-medium);\n    border-radius: var(--nile-radius-base-standard);\n    padding: var(--nile-spacing-lg);\n    gap: var(--nile-spacing-sm);\n    line-height: var(--nile-line-height-small);\n    box-sizing: border-box;\n    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: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\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);\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-900);\n    color: var(--nile-colors-white-base);\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--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700);\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--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\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);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-dark-900);\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    border-color: var(--nile-colors-neutral-500);\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  /* 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);\n    border-color:  var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500);\n    border-color:  var(--nile-colors-red-500);\n    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  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: var(--nile-colors-red-500);\n    border-color:  var(--nile-colors-red-500);\n    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  .button--standard.button--destructive.button--disabled {\n    background-color: var(--nile-colors-neutral-100);\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--destructive.button--disabled:hover,\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-500);\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) !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) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !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) !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) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500) !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) !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) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !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) !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) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !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);\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);\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwrBxB,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: 1px;\n    font-style: normal;\n    font-family: var(--nile-font-family-serif);\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) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    font-size: 14px;\n    font-weight: 500;\n    border-radius: var(--nile-radius-base-standard);\n    padding: 10px 14px;\n    gap: 5px;\n    line-height: 20px;\n    box-sizing: border-box;\n    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: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\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);\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-900);\n    color: var(--nile-colors-white-base);\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--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700);\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--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-500);\n    cursor: not-allowed;\n  }\n\n  /*  Secondary */\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\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);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    cursor: not-allowed;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-dark-200);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-dark-900);\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    border-color: var(--nile-colors-neutral-500);\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  /* 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: #820B0B;\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: #d92d20;\n    border-color: #d92d20;\n    color: var(--nile-colors-white-base);\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:hover:not(.button--disabled) {\n    background-color: #b42318;\n    border-color: #b42318;\n    box-shadow: 0px 1px 2px 0px rgba(16, 24, 40, 0.05);\n  }\n\n  .button--standard.button--destructive:active:not(.button--disabled) {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    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  .button--standard.button--destructive:focus-visible:not(.button--disabled) {\n    background-color: #d92d20;\n    border-color: #d92d20;\n    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  .button--standard.button--destructive.button--disabled {\n    background-color: #f2f4f7;\n    border-color: #eaecf0;\n    color: #98a2b3;\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--destructive.button--disabled:hover,\n  .button--standard.button--destructive.button--disabled:active {\n    background-color: #f2f4f7;\n    border-color: #eaecf0;\n    color: #98a2b3;\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: #d0d5dd;\n    color: #344054;\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: #f9fafb;\n    border-color: #d0d5dd;\n    color: #182230;\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: #d0d5dd;\n    color: #344054;\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: #eaecf0;\n    border-color: var(--nile-colors-neutral-700);\n    color: #98a2b3;\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: #eaecf0;\n    border-color: var(--nile-colors-neutral-700);\n    color: #98a2b3;\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: #85aad1;\n    color: #005291;\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: #eaf0f8;\n    border-color: #85aad1;\n    color: #004678;\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: #85aad1;\n    color: #005291;\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: #eaecf0;\n    color: #98a2b3;\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: #eaecf0;\n    color: #98a2b3;\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) !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) !important;\n  }\n  .button--standard.button--primary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !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) !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) !important;\n  }\n  .button--standard.button--secondary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-dark-500) !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) !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) !important;\n  }\n  .button--standard.button--tertiary.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-neutral-500) !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) !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) !important;\n  }\n  .button--standard.button--destructive.button--disabled ::slotted(nile-icon:not([color])) {\n    --nile-svg-fill: var(--nile-colors-white-base) !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: #fda29b;\n    color: #b42318;\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: #fda29b;\n    color: #912018;\n    background-color: #fef3f2;\n  }\n\n  .button--outline.button--destructive:active:not(.button--disabled) {\n    border-color: #fda29b;\n    color: #b42318;\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: #fda29b;\n    color: #b42318;\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: #344054;\n    background-color: #f9fafb;\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: #004678;\n    background-color: #eaf0f8;\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: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\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: 1em;\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

@@ -22,10 +22,10 @@ export const styles = css `
     color: var(--nile-colors-dark-900);
     text-align: center;
     font-feature-settings: 'clig' off, 'liga' off;
-    font-family: var(--nile-font-family-serif);
+    font-family: Colfax-regular;
     font-size: var(--nile-font-size-base);
     font-style: normal;
-    font-weight: var(--nile-font-weight-semi-bold);
+    font-weight: 600;
     line-height: var(--nile-font-size-base); /* 100% */
     letter-spacing: 0.2px;
   }

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;;;;;;;;;;;;;;;;;;;;;;;;;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: Colfax-regular;\n    font-size: var(--nile-font-size-base);\n    font-style: normal;\n    font-weight: 600;\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"]}