@aquera/nile-elements 0.1.60-beta-1.0 → 0.1.61-beta-1.0

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

@@ -12,13 +12,10 @@ export const styles = css `
   :host {
     display: block;
     position: relative;
-    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));
-    border: solid 1px var(--nile-custom-color-288,var(--ng-colors-border-secondary-alt));
-    border-radius: var(--nile-radius-radius-lg,var(--ng-radius-md));
+    background: hsl(0, 0%, 100%);
+    border: solid 1px hsl(240 5.9% 90%);
+    border-radius: 6px;
     overflow: hidden;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
     height: 100%;
     box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),
       0px 8px 8px -4px rgba(16, 24, 40, 0.03);
@@ -29,11 +26,11 @@ export const styles = css `
 
   .search__wrapper {
     box-sizing: border-box;
-    padding: var(--nile-spacing-lg,var(--ng-spacing-lg)) var(--nile-spacing-sm,var(--ng-spacing-sm));
+    padding: 12px 6px;
     position: sticky;
     z-index: 999;
     top: 0px;
-    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));
+    background: hsl(0, 0%, 100%);
     height: 64px;
   }
 
@@ -43,30 +40,29 @@ export const styles = css `
   }
 
   ::slotted(nile-divider) {
-    --spacing: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
+    --spacing: 0.5rem;
   }
 
   .menu__footer {
-    display: var(--nile-display-flex, var(--ng-display-none)); 
-    /* No need to tokenize below - token not required*/
-    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));
+    display: flex;
+    border-radius: var(--nile-radius-radius-sm);
     align-items: stretch;
-    font-size: var(--nile-font-size-rem-large, var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));
+    font-size: 1rem;
+    font-weight: var(--nile-font-weight-regular);
     line-height: 180%;
     letter-spacing: normal;
-    color: var(--nile-colors-primary-600,var(--ng-colors-text-brand-secondary-700));
+    color: var(--nile-colors-primary-600);
     min-height: 40px;
     transition: 150ms fill;
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
-    padding: var(--nile-spacing-none) var(--nile-spacing-spacing-xl);
-    margin: auto var(--nile-spacing-none, var(--ng-spacing-none));
+    padding: 0 var(--nile-spacing-spacing-xl);
+    margin: auto 0;
   }
 
   .menu__footer:hover {
-    background-color:var(--nile-menu-item-background-color, var(--ng-colors-bg-secondary));
+    background-color:var(--nile-menu-item-background-color);
   }
 `;
 export default [styles];

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

@@ -1 +1 @@
-{"version":3,"file":"nile-menu.css.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4DxB,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 * Menu CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    position: relative;\n    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n    border: solid 1px var(--nile-custom-color-288,var(--ng-colors-border-secondary-alt));\n    border-radius: var(--nile-radius-radius-lg,var(--ng-radius-md));\n    overflow: hidden;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n    height: 100%;\n    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n      0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n    /* overscroll-behavior: none; */\n    /* -ms-overflow-style: none; */\n    /* scrollbar-width: none; */\n  }\n\n  .search__wrapper {\n    box-sizing: border-box;\n    padding: var(--nile-spacing-lg,var(--ng-spacing-lg)) var(--nile-spacing-sm,var(--ng-spacing-sm));\n    position: sticky;\n    z-index: 999;\n    top: 0px;\n    background: var(--nile-colors-white-base,var(--ng-colors-bg-primary));\n    height: 64px;\n  }\n\n  .menu__items-wrapper {\n    overflow: auto;\n    max-height: var(--auto-size-available-height);\n  }\n\n  ::slotted(nile-divider) {\n    --spacing: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .menu__footer {\n    display: var(--nile-display-flex, var(--ng-display-none)); \n    /* No need to tokenize below - token not required*/\n    border-radius: var(--nile-radius-sm, var(--ng-radius-xs));\n    align-items: stretch;\n    font-size: var(--nile-font-size-rem-large, var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-regular));\n    line-height: 180%;\n    letter-spacing: normal;\n    color: var(--nile-colors-primary-600,var(--ng-colors-text-brand-secondary-700));\n    min-height: 40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: var(--nile-spacing-none) var(--nile-spacing-spacing-xl);\n    margin: auto var(--nile-spacing-none, var(--ng-spacing-none));\n  }\n\n  .menu__footer:hover {\n    background-color:var(--nile-menu-item-background-color, var(--ng-colors-bg-secondary));\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-menu.css.js","sourceRoot":"","sources":["../../../src/nile-menu/nile-menu.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAwDxB,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 * Menu CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    position: relative;\n    background: hsl(0, 0%, 100%);\n    border: solid 1px hsl(240 5.9% 90%);\n    border-radius: 6px;\n    overflow: hidden;\n    height: 100%;\n    box-shadow: 0px 20px 24px -4px rgba(16, 24, 40, 0.08),\n      0px 8px 8px -4px rgba(16, 24, 40, 0.03);\n    /* overscroll-behavior: none; */\n    /* -ms-overflow-style: none; */\n    /* scrollbar-width: none; */\n  }\n\n  .search__wrapper {\n    box-sizing: border-box;\n    padding: 12px 6px;\n    position: sticky;\n    z-index: 999;\n    top: 0px;\n    background: hsl(0, 0%, 100%);\n    height: 64px;\n  }\n\n  .menu__items-wrapper {\n    overflow: auto;\n    max-height: var(--auto-size-available-height);\n  }\n\n  ::slotted(nile-divider) {\n    --spacing: 0.5rem;\n  }\n\n  .menu__footer {\n    display: flex;\n    border-radius: var(--nile-radius-radius-sm);\n    align-items: stretch;\n    font-size: 1rem;\n    font-weight: var(--nile-font-weight-regular);\n    line-height: 180%;\n    letter-spacing: normal;\n    color: var(--nile-colors-primary-600);\n    min-height: 40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: 0 var(--nile-spacing-spacing-xl);\n    margin: auto 0;\n  }\n\n  .menu__footer:hover {\n    background-color:var(--nile-menu-item-background-color);\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -11,9 +11,6 @@ import { css } from 'lit';
 export const styles = css `
   :host {
     box-sizing: border-box;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host *,
@@ -37,19 +34,19 @@ export const styles = css `
   .menu-item {
     position: relative;
     display: flex;
-    border-radius: var(--nile-radius-sm,var(--ng-radius-sm));
+    border-radius: 4px;
     align-items: stretch;
-    font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));
-    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));
-    line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.8;
     letter-spacing: normal;
-    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));
+    color: hsl(240 5.3% 26.1%);
     min-height:40px;
     transition: 150ms fill;
     user-select: none;
     white-space: nowrap;
     cursor: pointer;
-    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));
+    padding:0 var(--nile-spacing-spacing-xl);
   }
 
   .menu-item.menu-item--disabled {
@@ -59,7 +56,7 @@ export const styles = css `
   }
 
   .menu-item .menu-item__label {
-    margin: auto var(--nile-spacing-none,var(--ng-spacing-none));
+    margin: auto 0;
     display: inline-flex;
   }
 
@@ -70,7 +67,7 @@ export const styles = css `
   }
 
   .menu-item .menu-item__prefix::slotted(*) {
-    margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));
+    margin-inline-end: 0.5rem;
   }
 
   .menu-item .menu-item__suffix {
@@ -80,7 +77,7 @@ export const styles = css `
   }
 
   .menu-item .menu-item__suffix::slotted(*) {
-    margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));
+    margin-inline-start: 0.5rem;
   }
 
   :host(:focus-visible) {
@@ -88,14 +85,14 @@ export const styles = css `
   }
 
   :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {
-    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));
-    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));
+    background-color: var(--nile-colors-neutral-100);
+    color: hsl(0, 0%, 0%);
   }
 
   :host(:focus-visible) .menu-item {
     outline: none;
-    background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));
-    color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));
+    background-color: hsl(200.4 98% 39.4%);
+    color: hsl(0, 0%, 100%);
     opacity: 1;
   }
 

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

@@ -1 +1 @@
-{"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAiHxB,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 * MenuItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    border-radius: var(--nile-radius-sm,var(--ng-radius-sm));\n    align-items: stretch;\n    font-size: var(--nile-font-size-rem-large ,var(--ng-font-size-text-sm));\n    font-weight: var(--nile-font-weight-regular,var(--ng-font-weight-semibold));\n    line-height: var(--nile-line-height-1-8,var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-secondary-700));\n    min-height:40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding: var(--nile-spacing-none, var(--ng-spacing-md)) var(--nile-spacing-xl, var(--ng-spacing-xl));\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item .menu-item__label {\n    margin: auto var(--nile-spacing-none,var(--ng-spacing-none));\n    display: inline-flex;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall,var(--ng-spacing-md));\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: var(--nile-colors-neutral-100,var(--ng-colors-bg-primary-hover));\n    color: var(--nile-colors-dark-900,var(--ng-colors-text-secondary-hover));\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: var(--nile-colors-blue-500,var(--ng-colors-bg-active));\n    color: var(--nile-colors-white-base,var(--ng-colors-text-primary-900));\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-menu-item.css.js","sourceRoot":"","sources":["../../../src/nile-menu-item/nile-menu-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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8GxB,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 * MenuItem CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    display: block;\n  }\n\n  :host([inert]) {\n    display: none;\n  }\n\n  .menu-item {\n    position: relative;\n    display: flex;\n    border-radius: 4px;\n    align-items: stretch;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.8;\n    letter-spacing: normal;\n    color: hsl(240 5.3% 26.1%);\n    min-height:40px;\n    transition: 150ms fill;\n    user-select: none;\n    white-space: nowrap;\n    cursor: pointer;\n    padding:0 var(--nile-spacing-spacing-xl);\n  }\n\n  .menu-item.menu-item--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .menu-item .menu-item__label {\n    margin: auto 0;\n    display: inline-flex;\n  }\n\n  .menu-item .menu-item__prefix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__prefix::slotted(*) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .menu-item .menu-item__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .menu-item .menu-item__suffix::slotted(*) {\n    margin-inline-start: 0.5rem;\n  }\n\n  :host(:focus-visible) {\n    outline: none;\n  }\n\n  :host(:hover:not([aria-disabled='true'], :focus-visible)) .menu-item {\n    background-color: var(--nile-colors-neutral-100);\n    color: hsl(0, 0%, 0%);\n  }\n\n  :host(:focus-visible) .menu-item {\n    outline: none;\n    background-color: hsl(200.4 98% 39.4%);\n    color: hsl(0, 0%, 100%);\n    opacity: 1;\n  }\n\n  .menu-item .menu-item__check,\n  .menu-item .menu-item__chevron {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    width: 1.5em;\n    visibility: hidden;\n  }\n\n  .menu-item--checked .menu-item__check,\n  .menu-item--has-submenu .menu-item__chevron {\n    visibility: visible;\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .menu-item,\n    :host(:focus-visible) .menu-item {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -12,9 +12,6 @@ export const styles = css `
   :host {
     display: block;
     user-select: none;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   :host(:focus) {
@@ -25,34 +22,30 @@ export const styles = css `
     position: relative;
     display: flex;
     align-items: center;
-    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));
-    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));
-    line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));
+    font-size: 1rem;
+    font-weight: 400;
+    line-height: 1.8;
     letter-spacing: normal;
-    color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));
-    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));
+    color: hsl(240 5.3% 26.1%);
+    padding: 6px 0;
     transition: 150ms fill;
-    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));
     cursor: pointer;
-    margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )
   }
 
   .option--single-select {
-    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));
+    padding: 9px 12px;
   }
 
   .option--hover:not(.option--current):not(.option--disabled) {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
-    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));
-    border-radius: var(--nile-radius-none, var(--ng-radius-sm));
+    background-color: rgba(0, 94, 166, 0.1);
+    color: hsl(0, 0%, 0%);
   }
 
   .option--current,
   .option--current.option--disabled {
-    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));
-    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));
+    background-color: rgba(0, 94, 166, 0.1);
+    color: var(--nile-colors-primary-600);
     opacity: 1;
-    border-radius: var(--nile-radius-none, var(--ng-radius-sm));
   }
 
   .option--disabled {
@@ -74,7 +67,7 @@ export const styles = css `
     align-items: center;
     justify-content: center;
     visibility: hidden;
-    padding-inline-end: var(--nile-spacing-xs);
+    padding-inline-end: 0.25rem;
   }
 
   .option--selected .option__check {
@@ -89,26 +82,20 @@ export const styles = css `
   }
 
   .option__prefix::slotted(*) {
-    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
+    margin-inline-end: 0.5rem;
   }
 
   .option__suffix::slotted(*) {
-    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));
-  }
-
-  :host(:not([aria-selected='true'])) .option .option__suffix{
-    display: var(--nile-display-block, var(--ng-display-none));
+    margin-inline-start: 0.5rem;
   }
 
   .option--checkbox{
     pointer-events: none;
-    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));
-    margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));
+    margin-left: 12px;
+    margin-right: 12px;
     width:auto;
-    display:var(--nile-display-inline-block, var(--ng-display-none));
   }
 
-
   @media (forced-colors: active) {
     :host(:hover:not([aria-disabled='true'])) .option {
       outline: dashed 1px SelectedItem;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2GxB,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 * Option_2 CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    user-select: none;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  .option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    font-size: var(--nile-type-scale-3, var(--ng-font-size-text-md));\n    font-weight: var(--nile-font-weight-regular, var(--ng-font-weight-medium));\n    line-height: var(--nile-line-height-1-8, var(--ng-line-height-text-md));\n    letter-spacing: normal;\n    color: var(--nile-color-dark-1, var(--ng-colors-text-primary-900));\n    padding: var(--nile-spacing-sm, var(--ng-spacing-md)) var(--nile-spacing-none, var(--ng-spacing-md));\n    transition: 150ms fill;\n    font-family: var(--nile-font-family-serif, var(--ng-font-family-body));\n    cursor: pointer;\n    margin-bottom: var(--nile-spacing-none, var(--ng-spacing-xxs) )\n  }\n\n  .option--single-select {\n    padding: var(--nile-spacing-9px, var(--ng-spacing-md)) var(--nile-spacing-lg, var(--ng-spacing-md));\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n    color: var(--nile-colors-dark-900, var(--ng-colors-text-primary-900));\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--current,\n  .option--current.option--disabled {\n    background-color: var(--nile-colors-primary-100, var(--ng-colors-bg-active));\n    color: var(--nile-colors-primary-600, var(--ng-colors-text-primary-900));\n    opacity: 1;\n    border-radius: var(--nile-radius-none, var(--ng-radius-sm));\n  }\n\n  .option--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    line-height: 1.4;\n    word-break: break-all;\n  }\n\n  .option .option__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: hidden;\n    padding-inline-end: var(--nile-spacing-xs);\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  .option__prefix,\n  .option__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option__prefix::slotted(*) {\n    margin-inline-end: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: var(--nile-font-size-rem-xsmall, var(--ng-spacing-md));\n  }\n\n  :host(:not([aria-selected='true'])) .option .option__suffix{\n    display: var(--nile-display-block, var(--ng-display-none));\n  }\n\n  .option--checkbox{\n    pointer-events: none;\n    margin-left: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    margin-right: var(--nile-spacing-lg, var(--ng-spacing-lg));\n    width:auto;\n    display:var(--nile-display-inline-block, var(--ng-display-none));\n  }\n\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-option.css.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8FxB,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 * Option_2 CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    user-select: none;\n  }\n\n  :host(:focus) {\n    outline: none;\n  }\n\n  .option {\n    position: relative;\n    display: flex;\n    align-items: center;\n    font-size: 1rem;\n    font-weight: 400;\n    line-height: 1.8;\n    letter-spacing: normal;\n    color: hsl(240 5.3% 26.1%);\n    padding: 6px 0;\n    transition: 150ms fill;\n    cursor: pointer;\n  }\n\n  .option--single-select {\n    padding: 9px 12px;\n  }\n\n  .option--hover:not(.option--current):not(.option--disabled) {\n    background-color: rgba(0, 94, 166, 0.1);\n    color: hsl(0, 0%, 0%);\n  }\n\n  .option--current,\n  .option--current.option--disabled {\n    background-color: rgba(0, 94, 166, 0.1);\n    color: var(--nile-colors-primary-600);\n    opacity: 1;\n  }\n\n  .option--disabled {\n    outline: none;\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .option__label {\n    flex: 1 1 auto;\n    display: inline-block;\n    line-height: 1.4;\n    word-break: break-all;\n  }\n\n  .option .option__check {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    justify-content: center;\n    visibility: hidden;\n    padding-inline-end: 0.25rem;\n  }\n\n  .option--selected .option__check {\n    visibility: visible;\n  }\n\n  .option__prefix,\n  .option__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n  }\n\n  .option__prefix::slotted(*) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .option__suffix::slotted(*) {\n    margin-inline-start: 0.5rem;\n  }\n\n  .option--checkbox{\n    pointer-events: none;\n    margin-left: 12px;\n    margin-right: 12px;\n    width:auto;\n  }\n\n  @media (forced-colors: active) {\n    :host(:hover:not([aria-disabled='true'])) .option {\n      outline: dashed 1px SelectedItem;\n      outline-offset: -1px;\n    }\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-option/nile-option.d.ts

@@ -36,6 +36,7 @@ export declare class NileOption extends NileElement {
     private cachedTextLabel;
     defaultSlot: HTMLSlotElement;
     current: boolean;
+    selected: boolean;
     hasHover: boolean;
     hidden: boolean;
     isMultipleSelect: boolean;
@@ -48,9 +49,8 @@ export declare class NileOption extends NileElement {
     showCheckbox: boolean;
     /** Draws the option in a disabled state, preventing selection. */
     disabled: boolean;
-    /** Indicates whether the option is selected. */
-    selected: boolean;
     connectedCallback(): void;
+    checkIfMultipleSelect(): void;
     protected updated(_changedProperties: PropertyValues): void;
     private handleDefaultSlotChange;
     private handleMouseEnter;

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

@@ -39,6 +39,7 @@ let NileOption = class NileOption extends NileElement {
     constructor() {
         super(...arguments);
         this.current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)
+        this.selected = false; // the option is selected and has aria-selected="true"
         this.hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging
         this.hidden = false; // the option is hidden
         this.isMultipleSelect = false;
@@ -51,30 +52,32 @@ let NileOption = class NileOption extends NileElement {
         this.showCheckbox = false;
         /** Draws the option in a disabled state, preventing selection. */
         this.disabled = false;
-        /** Indicates whether the option is selected. */
-        this.selected = false;
     }
     connectedCallback() {
         super.connectedCallback();
         this.setAttribute('role', 'option');
         this.setAttribute('aria-selected', 'false');
-        // Find the closest parent 'nile-select' or 'nile-virtual-select' element
-        const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');
+        this.checkIfMultipleSelect();
+    }
+    checkIfMultipleSelect() {
+        // Find the closest parent 'nile-select' element
+        const parentSelect = this.closest('nile-select');
         // Check if the parent has the 'multiple' attribute
         if (parentSelect && parentSelect.hasAttribute('multiple')) {
-            let multipleValue = parentSelect.getAttribute('multiple');
-            if (multipleValue !== 'false') {
-                if (multipleValue === '') {
-                    multipleValue = 'true';
-                }
-                this.isMultipleSelect = Boolean(multipleValue);
+            // let multipleValue = parentSelect.getAttribute('multiple');
+            if (parentSelect.hasAttribute('multiple') && parentSelect.getAttribute('multiple') === '') {
+                this.isMultipleSelect = true;
+            }
+            else if (parentSelect.getAttribute('multiple') === 'true') {
+                this.isMultipleSelect = true;
+            }
+            else {
+                this.isMultipleSelect = false;
             }
         }
     }
     updated(_changedProperties) {
-        if (_changedProperties.has('showCheckbox')) {
-            this.isMultipleSelect = this.showCheckbox;
-        }
+        this.checkIfMultipleSelect();
     }
     handleDefaultSlotChange() {
         const textLabel = this.getTextLabel();
@@ -164,6 +167,9 @@ __decorate([
 __decorate([
     state()
 ], NileOption.prototype, "current", void 0);
+__decorate([
+    state()
+], NileOption.prototype, "selected", void 0);
 __decorate([
     state()
 ], NileOption.prototype, "hasHover", void 0);
@@ -182,9 +188,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileOption.prototype, "disabled", void 0);
-__decorate([
-    property({ type: Boolean, reflect: true })
-], NileOption.prototype, "selected", void 0);
 __decorate([
     watch('disabled')
 ], NileOption.prototype, "handleDisabledChange", null);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.ts"],"names":[],"mappings":"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","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 { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-option.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport NileElement from '../internal/nile-element';\nimport '../nile-checkbox';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option\n *\n */\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n *\n * @dependency nile-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\n\n@customElement('nile-option')\nexport class NileOption extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n  @state() hidden = false; // the option is hidden\n  @state() isMultipleSelect = false;\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  @property({ type: Boolean }) showCheckbox: boolean = false;\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Indicates whether the option is selected. */\n  @property({ type: Boolean, reflect: true }) selected = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n\n    // Find the closest parent 'nile-select' or 'nile-virtual-select' element\n    const parentSelect = this.closest('nile-select') || this.closest('nile-virtual-select');\n\n    // Check if the parent has the 'multiple' attribute\n    if (parentSelect && parentSelect.hasAttribute('multiple')) {\n      let multipleValue = parentSelect.getAttribute('multiple');\n      if (multipleValue !== 'false') {\n        if(multipleValue === ''){\n          multipleValue = 'true';\n        }\n        this.isMultipleSelect = Boolean(multipleValue);\n      }\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    if(_changedProperties.has('showCheckbox')) {\n      this.isMultipleSelect = this.showCheckbox;\n    }\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange');\n    }\n  }\n\n  private handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    // if (this.value.includes(' ')) {\n    //   console.error(\n    //     `Option values cannot include a space. All spaces have been replaced with underscores.`,\n    //     this\n    //   );\n    //   this.value = this.value.replace(/ /g, '_');\n    // }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    // Search for a label element inside the component\n    const labelElement = this.querySelector('label');\n\n    // If a label element is found, return its text content\n    if (labelElement) {\n      return labelElement.textContent?.trim() ?? '';\n    }\n\n    // If no label element is found, return the existing behavior\n    return (this.textContent ?? '').trim();\n  }\n\n  render() {\n    return html`\n      ${!this.hidden\n        ? html` <div\n            part=\"base\"\n            class=${classMap({\n              option: true,\n              'option--single-select': !this.isMultipleSelect,\n              'option--current': this.selected && !this.isMultipleSelect,\n              'option--disabled': this.disabled,\n              'option--selected': this.selected && !this.isMultipleSelect,\n              'option--hover': this.hasHover,\n            })}\n            @mouseenter=${this.handleMouseEnter}\n            @mouseleave=${this.handleMouseLeave}\n          >\n\n          ${this.isMultipleSelect ? html`<nile-checkbox class=\"option--checkbox\" .checked=${this.selected}></nile-checkbox>` : ''}\n\n            <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n            <slot\n              part=\"label\"\n              class=\"option__label\"\n              @slotchange=${this.handleDefaultSlotChange}\n            ></slot>\n            <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n          </div>`\n        : ''}\n    `;\n  }\n}\n\nexport default NileOption;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option': NileOption;\n  }\n}\n"]}
+{"version":3,"file":"nile-option.js","sourceRoot":"","sources":["../../../src/nile-option/nile-option.ts"],"names":[],"mappings":"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","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 { LitElement, CSSResultArray, TemplateResult } from 'lit';\nimport { styles } from './nile-option.css';\nimport '../nile-icon';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement, property, query, state } from 'lit/decorators.js';\nimport { html } from 'lit';\nimport { watch } from '../internal/watch';\nimport type { CSSResultGroup, PropertyValues } from 'lit';\nimport NileElement from '../internal/nile-element';\nimport '../nile-checkbox';\n\n/**\n * Nile icon component.\n *\n * @tag nile-option\n *\n */\n\n/**\n * @summary Options define the selectable items within various form controls such as [select](/components/select).\n * @status stable\n *\n * @dependency nile-icon\n *\n * @slot - The option's label.\n * @slot prefix - Used to prepend an icon or similar element to the menu item.\n * @slot suffix - Used to append an icon or similar element to the menu item.\n *\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart base - The component's base wrapper.\n * @csspart label - The option's label.\n * @csspart prefix - The container that wraps the prefix.\n * @csspart suffix - The container that wraps the suffix.\n */\n\n@customElement('nile-option')\nexport class NileOption extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  private cachedTextLabel: string;\n\n  @query('.option__label') defaultSlot: HTMLSlotElement;\n\n  @state() current = false; // the user has keyed into the option, but hasn't selected it yet (shows a highlight)\n  @state() selected = false; // the option is selected and has aria-selected=\"true\"\n  @state() hasHover = false; // we need this because Safari doesn't honor :hover styles while dragging\n  @state() hidden = false; // the option is hidden\n  @state() isMultipleSelect = false;\n\n  /**\n   * The option's value. When selected, the containing form control will receive this value. The value must be unique\n   * from other options in the same group. Values may not contain spaces, as spaces are used as delimiters when listing\n   * multiple values.\n   */\n  @property({ reflect: true }) value = '';\n\n  @property({ type: Boolean }) showCheckbox: boolean = false;\n\n  /** Draws the option in a disabled state, preventing selection. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.setAttribute('role', 'option');\n    this.setAttribute('aria-selected', 'false');\n\n    this.checkIfMultipleSelect();\n  }\n\n  checkIfMultipleSelect() {\n    // Find the closest parent 'nile-select' element\n    const parentSelect = this.closest('nile-select');\n\n    // Check if the parent has the 'multiple' attribute\n    if (parentSelect && parentSelect.hasAttribute('multiple')) {\n      // let multipleValue = parentSelect.getAttribute('multiple');\n      if(parentSelect.hasAttribute('multiple') && parentSelect.getAttribute('multiple') === '') {\n        this.isMultipleSelect = true;\n      } else if (parentSelect.getAttribute('multiple') === 'true') {\n        this.isMultipleSelect = true;\n      } else {\n        this.isMultipleSelect = false;\n      }\n    }\n  }\n\n  protected updated(_changedProperties: PropertyValues): void {\n    this.checkIfMultipleSelect();\n  }\n\n  private handleDefaultSlotChange() {\n    const textLabel = this.getTextLabel();\n\n    // Ignore the first time the label is set\n    if (typeof this.cachedTextLabel === 'undefined') {\n      this.cachedTextLabel = textLabel;\n      return;\n    }\n\n    // When the label changes, emit a slotchange event so parent controls see it\n    if (textLabel !== this.cachedTextLabel) {\n      this.cachedTextLabel = textLabel;\n      this.emit('slotchange');\n    }\n  }\n\n  private handleMouseEnter() {\n    this.hasHover = true;\n  }\n\n  private handleMouseLeave() {\n    this.hasHover = false;\n  }\n\n  @watch('disabled')\n  handleDisabledChange() {\n    this.setAttribute('aria-disabled', this.disabled ? 'true' : 'false');\n  }\n\n  @watch('selected')\n  handleSelectedChange() {\n    this.setAttribute('aria-selected', this.selected ? 'true' : 'false');\n  }\n\n  @watch('value')\n  handleValueChange() {\n    // Ensure the value is a string. This ensures the next line doesn't error and allows framework users to pass numbers\n    // instead of requiring them to cast the value to a string.\n    if (typeof this.value !== 'string') {\n      this.value = String(this.value);\n    }\n\n    // if (this.value.includes(' ')) {\n    //   console.error(\n    //     `Option values cannot include a space. All spaces have been replaced with underscores.`,\n    //     this\n    //   );\n    //   this.value = this.value.replace(/ /g, '_');\n    // }\n  }\n\n  /** Returns a plain text label based on the option's content. */\n  getTextLabel() {\n    // Search for a label element inside the component\n    const labelElement = this.querySelector('label');\n\n    // If a label element is found, return its text content\n    if (labelElement) {\n      return labelElement.textContent?.trim() ?? '';\n    }\n\n    // If no label element is found, return the existing behavior\n    return (this.textContent ?? '').trim();\n  }\n\n  render() {\n    return html`\n      ${!this.hidden\n        ? html` <div\n            part=\"base\"\n            class=${classMap({\n              option: true,\n              'option--single-select': !this.isMultipleSelect,\n              'option--current': this.selected && !this.isMultipleSelect,\n              'option--disabled': this.disabled,\n              'option--selected': this.selected && !this.isMultipleSelect,\n              'option--hover': this.hasHover,\n            })}\n            @mouseenter=${this.handleMouseEnter}\n            @mouseleave=${this.handleMouseLeave}\n          >\n\n          ${this.isMultipleSelect ? html`<nile-checkbox class=\"option--checkbox\" .checked=${this.selected}></nile-checkbox>` : ''}\n\n            <slot part=\"prefix\" name=\"prefix\" class=\"option__prefix\"></slot>\n            <slot\n              part=\"label\"\n              class=\"option__label\"\n              @slotchange=${this.handleDefaultSlotChange}\n            ></slot>\n            <slot part=\"suffix\" name=\"suffix\" class=\"option__suffix\"></slot>\n          </div>`\n        : ''}\n    `;\n  }\n}\n\nexport default NileOption;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-option': NileOption;\n  }\n}\n"]}

package/dist/src/nile-page-header/nile-page-header.css.js

@@ -12,9 +12,6 @@ export const styles = css `
   :host {
     display: block;
     width: 100%;
-    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));
-    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));
-    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));
   }
 
   .header {
@@ -41,7 +38,7 @@ export const styles = css `
     font-style: normal;
     font-weight: var(--nile-page-header-subheading-font-weight);
     line-height: var(--nile-page-header-subheading-line-height);
-    margin-top: var(--nile-spacing-xs);
+    margin-top: 3px;
   }
 
   [hidden] {

package/dist/src/nile-page-header/nile-page-header.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-page-header.css.js","sourceRoot":"","sources":["../../../src/nile-page-header/nile-page-header.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuCxB,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 * PageHeader CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n    -webkit-font-smoothing: var(--nile-webkit-font-smoothing, var(--ng-webkit-font-smoothing));\n    -moz-osx-font-smoothing: var(--nile-moz-osx-font-smoothing, var(--ng-moz-osx-font-smoothing));\n    text-rendering: var(--nile-text-rendering, var(--ng-text-rendering));\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    text-align: start;\n    font-family: var(--nile-font-family-sans-serif);\n    font-style: normal;\n  }\n\n  .header__heading {\n    display: block;\n    color: var(--nile-page-header-heading-font-color);\n    font-size: var(--nile-page-header-heading-font-size);\n    font-style: normal;\n    font-weight: var(--nile-page-header-heading-font-weight);\n    line-height: var(--nile-page-header-heading-line-height);\n  }\n\n  .header__subheading {\n    display: block;\n    color: var(--nile-page-header-subheading-font-color);\n    font-size: var(--nile-page-header-subheading-font-size);\n    font-style: normal;\n    font-weight: var(--nile-page-header-subheading-font-weight);\n    line-height: var(--nile-page-header-subheading-line-height);\n    margin-top: var(--nile-spacing-xs);\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-page-header.css.js","sourceRoot":"","sources":["../../../src/nile-page-header/nile-page-header.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCxB,CAAC;AAEF,eAAe,CAAC,MAAM,CAAC,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit';\n\n/**\n * PageHeader CSS\n */\nexport const styles = css`\n  :host {\n    display: block;\n    width: 100%;\n  }\n\n  .header {\n    display: flex;\n    flex-direction: column;\n    text-align: start;\n    font-family: var(--nile-font-family-sans-serif);\n    font-style: normal;\n  }\n\n  .header__heading {\n    display: block;\n    color: var(--nile-page-header-heading-font-color);\n    font-size: var(--nile-page-header-heading-font-size);\n    font-style: normal;\n    font-weight: var(--nile-page-header-heading-font-weight);\n    line-height: var(--nile-page-header-heading-line-height);\n  }\n\n  .header__subheading {\n    display: block;\n    color: var(--nile-page-header-subheading-font-color);\n    font-size: var(--nile-page-header-subheading-font-size);\n    font-style: normal;\n    font-weight: var(--nile-page-header-subheading-font-weight);\n    line-height: var(--nile-page-header-subheading-line-height);\n    margin-top: 3px;\n  }\n\n  [hidden] {\n    display: none;\n  }\n`;\n\nexport default [styles];\n"]}