@aquera/nile-elements 0.0.74 → 0.0.76

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

@@ -1 +1 @@
-{"version":3,"file":"nile-card.css.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyExB,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-element';\n\n/**\n * Card CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --border-color: var(--nile-card-color-border);\n    --border-radius: 8px;\n    --border-width: 0.5px;\n    --padding: 18px;\n    display: inline-block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    justify-items: strecth;\n    background-color: var(--nile-colors-white-base);\n    border: solid var(--border-width) var(--border-color);\n    border-radius: var(--border-radius);\n    min-width: 273px;\n    max-width: 350px;\n    overflow: hidden;\n  }\n\n  .body__wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 12px 16px 0 16px;\n  }\n\n  .body__wrapper_nf {\n    padding: 12px 16px 16px 16px;\n  }\n  .card__header {\n    display: block;\n  }\n\n  .card__body {\n    display: block;\n  }\n\n  .card__footer {\n    margin-top: 12px;\n    display: block;\n    box-sizing: border-box;\n    align-content: center;\n    align-items: center;\n    padding: 8px 16px;\n    background-color: #f9fafb;\n    height: 40px;\n  }\n\n  .card:not(.card--has-footer) .card__footer {\n    display: none;\n  }\n\n  .card:hover {\n    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n      0px 2px 4px -2px rgba(16, 24, 40, 0.06);\n    border: solid 1px var(--border-color);\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-card.css.js","sourceRoot":"","sources":["../../../src/nile-card/nile-card.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyExB,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-element';\n\n/**\n * Card CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n  }\n\n  :host *,\n  :host *::before,\n  :host *::after {\n    box-sizing: inherit;\n  }\n\n  [hidden] {\n    display: none !important;\n  }\n\n  :host {\n    --border-color: var(--nile-card-color-border);\n    --border-radius: 8px;\n    --border-width: 0.5px;\n    --padding: 18px;\n    display: inline-block;\n  }\n\n  .card {\n    display: flex;\n    flex-direction: column;\n    justify-items: strecth;\n    background-color: var(--nile-colors-white-base);\n    outline: solid var(--border-width) var(--border-color);\n    border-radius: var(--border-radius);\n    min-width: 273px;\n    max-width: 350px;\n    overflow: hidden;\n  }\n\n  .body__wrapper {\n    display: flex;\n    flex-direction: column;\n    gap: 12px;\n    padding: 12px 16px 0 16px;\n  }\n\n  .body__wrapper_nf {\n    padding: 12px 16px 16px 16px;\n  }\n  .card__header {\n    display: block;\n  }\n\n  .card__body {\n    display: block;\n  }\n\n  .card__footer {\n    margin-top: 12px;\n    display: block;\n    box-sizing: border-box;\n    align-content: center;\n    align-items: center;\n    padding: 8px 16px;\n    background-color: #f9fafb;\n    height: 40px;\n  }\n\n  .card:not(.card--has-footer) .card__footer {\n    display: none;\n  }\n\n  .card:hover {\n    box-shadow: 0px 4px 8px -2px rgba(16, 24, 40, 0.1),\n      0px 2px 4px -2px rgba(16, 24, 40, 0.06);\n    outline: solid 1px var(--border-color);\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -12,25 +12,26 @@ export const styles = css `
   :host {
     display: inline-block;
   }
-
+ 
   :host(.full-width) {
     width: 100%;
   }
-
+ 
   .checkbox {
     position: relative;
     display: inline-flex;
-    align-items: stretch;
+    align-items: top;
     font-weight: 400;
     color: var(--nile-colors-dark-900);
     vertical-align: middle;
     cursor: pointer;
   }
-
-  .checkbox--only__subtitle{
-    align-items: center;
+ 
+  .checkbox--medium {
+    --toggle-size: var(--nile-type-scale-3);
+    font-size: var(--nile-type-scale-3);
   }
-
+ 
   .checkbox__control {
     flex: 0 0 auto;
     position: relative;
@@ -41,13 +42,13 @@ export const styles = css `
     height: var(--nile-type-scale-3);
     border: solid 1px var(--nile-checkbox-color-border-standard);
     background-color: var(--nile-checkbox-color-background-standard);
-    border-radius: 3px;
+    border-radius: 4px;
     transition: var(--nile-transition-duration-default border-color),
       var(--nile-transition-duration-default) background-color,
       var(--nile-transition-duration-default) color,
       var(--nile-transition-duration-default box-shadow);
   }
-
+ 
   .checkbox__input {
     position: absolute;
     opacity: 0;
@@ -55,11 +56,11 @@ export const styles = css `
     margin: 0;
     pointer-events: none;
   }
-
+ 
   /* svg {
       display:none !important;
   } */
-
+ 
   /* Hover */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
     .checkbox__control:hover {
@@ -67,7 +68,7 @@ export const styles = css `
     border: 1px solid var(--nile-checkbox-color-border-hover);
     border-radius: 4px;
   }
-
+ 
   /* Focus */
   .checkbox:not(.checkbox--checked):not(.checkbox--disabled)
     .checkbox__input:focus-visible
@@ -75,14 +76,14 @@ export const styles = css `
     outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);
     outline-offset: 1px;
   }
-
+ 
   /* Checked/indeterminate */
   .checkbox--checked .checkbox__control,
   .checkbox--indeterminate .checkbox__control {
     border-color: var(--nile-checkbox-color-border-checked-standard);
     background-color: var(--nile-checkbox-color-background-checked-standard);
   }
-
+ 
   /* Checked/indeterminate + hover */
   .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,
   .checkbox.checkbox--indeterminate:not(.checkbox--disabled)
@@ -90,7 +91,7 @@ export const styles = css `
     background: var(--nile-checkbox-color-background-checked-hover);
     border: 1px solid var(--nile-checkbox-color-border-checked-hover);
   }
-
+ 
   /* Checked/indeterminate + focus */
   .checkbox.checkbox--checked:not(.checkbox--disabled)
     .checkbox__input:focus-visible
@@ -101,59 +102,41 @@ export const styles = css `
     outline: solid 3px var(--nile-checkbox-color-outline-standard);
     outline-offset: 1px;
   }
-
+ 
   /* Disabled */
   .checkbox--disabled {
     opacity: 0.3;
     cursor: not-allowed;
   }
-
+ 
+ 
   .checkbox__label {
-    display: flex;
-    flex-direction: column;
-    justify-content: flex-start;
-    font-family: var(--nile-font-family-serif);
-    margin-left: 8px;
+    display: inline-block;
+    line-height: 14px;
+    font-size: 14px;
+    margin-inline-start: 0.5em;
     user-select: none;
+    margin-top: 2px;
     color: var(--nile-colors-dark-900);
+    font-family: Colfax-regular;
     font-style: normal;
-    letter-spacing: 0.2px;
-    box-sizing: border-box;
-  }
-
-  .checkbox__icon__container{
-    display:flex;
-    align-items:center;
-  }
-
-  .checkbox__label__text {
-    display: block;
-    font-size: 14px;
-    font-weight: 500;
-    color: #344054;
-  }
-
-  .checkbox__sublabel__text {
-    display: block;
-    font-size: 14px;
     font-weight: 400;
-    line-height: 20px;
-    color: #475467;
+    letter-spacing: 0.2px;
   }
-
+ 
   :host([required]) .checkbox__label::after {
     content: '*';
     margin-inline-start: -2px;
   }
-
+ 
   .checkbox__checked-icon {
     --nile-svg-stroke: white;
   }
-
+ 
   .checkbox__indeterminate-icon {
     --nile-svg-stroke: white;
   }
-
+ 
   .checkbox__helptext-icon {
     float: right;
     cursor: pointer;

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

@@ -1 +1 @@
-{"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuJxB,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-element';\n\n/**\n * Checkbox CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n\n  :host(.full-width) {\n    width: 100%;\n  }\n\n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: stretch;\n    font-weight: 400;\n    color: var(--nile-colors-dark-900);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n\n  .checkbox--only__subtitle{\n    align-items: center;\n  }\n\n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3);\n    height: var(--nile-type-scale-3);\n    border: solid 1px var(--nile-checkbox-color-border-standard);\n    background-color: var(--nile-checkbox-color-background-standard);\n    border-radius: 3px;\n    transition: var(--nile-transition-duration-default border-color),\n      var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default box-shadow);\n  }\n\n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n\n  /* svg {\n      display:none !important;\n  } */\n\n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-hover);\n    border: 1px solid var(--nile-checkbox-color-border-hover);\n    border-radius: 4px;\n  }\n\n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n\n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(--nile-checkbox-color-border-checked-standard);\n    background-color: var(--nile-checkbox-color-background-checked-standard);\n  }\n\n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-checked-hover);\n    border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n  }\n\n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px var(--nile-checkbox-color-outline-standard);\n    outline-offset: 1px;\n  }\n\n  /* Disabled */\n  .checkbox--disabled {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n\n  .checkbox__label {\n    display: flex;\n    flex-direction: column;\n    justify-content: flex-start;\n    font-family: var(--nile-font-family-serif);\n    margin-left: 8px;\n    user-select: none;\n    color: var(--nile-colors-dark-900);\n    font-style: normal;\n    letter-spacing: 0.2px;\n    box-sizing: border-box;\n  }\n\n  .checkbox__icon__container{\n    display:flex;\n    align-items:center;\n  }\n\n  .checkbox__label__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 500;\n    color: #344054;\n  }\n\n  .checkbox__sublabel__text {\n    display: block;\n    font-size: 14px;\n    font-weight: 400;\n    line-height: 20px;\n    color: #475467;\n  }\n\n  :host([required]) .checkbox__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n\n  .checkbox__checked-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__indeterminate-icon {\n    --nile-svg-stroke: white;\n  }\n\n  .checkbox__helptext-icon {\n    float: right;\n    cursor: pointer;\n    margin-right: 12px;\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-checkbox.css.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsIxB,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-element';\n \n/**\n * Checkbox CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n  }\n \n  :host(.full-width) {\n    width: 100%;\n  }\n \n  .checkbox {\n    position: relative;\n    display: inline-flex;\n    align-items: top;\n    font-weight: 400;\n    color: var(--nile-colors-dark-900);\n    vertical-align: middle;\n    cursor: pointer;\n  }\n \n  .checkbox--medium {\n    --toggle-size: var(--nile-type-scale-3);\n    font-size: var(--nile-type-scale-3);\n  }\n \n  .checkbox__control {\n    flex: 0 0 auto;\n    position: relative;\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    width: var(--nile-type-scale-3);\n    height: var(--nile-type-scale-3);\n    border: solid 1px var(--nile-checkbox-color-border-standard);\n    background-color: var(--nile-checkbox-color-background-standard);\n    border-radius: 4px;\n    transition: var(--nile-transition-duration-default border-color),\n      var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default box-shadow);\n  }\n \n  .checkbox__input {\n    position: absolute;\n    opacity: 0;\n    padding: 0;\n    margin: 0;\n    pointer-events: none;\n  }\n \n  /* svg {\n      display:none !important;\n  } */\n \n  /* Hover */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-hover);\n    border: 1px solid var(--nile-checkbox-color-border-hover);\n    border-radius: 4px;\n  }\n \n  /* Focus */\n  .checkbox:not(.checkbox--checked):not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px hsl(198.6 88.7% 48.4% / 40%);\n    outline-offset: 1px;\n  }\n \n  /* Checked/indeterminate */\n  .checkbox--checked .checkbox__control,\n  .checkbox--indeterminate .checkbox__control {\n    border-color: var(--nile-checkbox-color-border-checked-standard);\n    background-color: var(--nile-checkbox-color-background-checked-standard);\n  }\n \n  /* Checked/indeterminate + hover */\n  .checkbox.checkbox--checked:not(.checkbox--disabled) .checkbox__control:hover,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__control:hover {\n    background: var(--nile-checkbox-color-background-checked-hover);\n    border: 1px solid var(--nile-checkbox-color-border-checked-hover);\n  }\n \n  /* Checked/indeterminate + focus */\n  .checkbox.checkbox--checked:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control,\n  .checkbox.checkbox--indeterminate:not(.checkbox--disabled)\n    .checkbox__input:focus-visible\n    ~ .checkbox__control {\n    outline: solid 3px var(--nile-checkbox-color-outline-standard);\n    outline-offset: 1px;\n  }\n \n  /* Disabled */\n  .checkbox--disabled {\n    opacity: 0.3;\n    cursor: not-allowed;\n  }\n \n \n  .checkbox__label {\n    display: inline-block;\n    line-height: 14px;\n    font-size: 14px;\n    margin-inline-start: 0.5em;\n    user-select: none;\n    margin-top: 2px;\n    color: var(--nile-colors-dark-900);\n    font-family: Colfax-regular;\n    font-style: normal;\n    font-weight: 400;\n    letter-spacing: 0.2px;\n  }\n \n  :host([required]) .checkbox__label::after {\n    content: '*';\n    margin-inline-start: -2px;\n  }\n \n  .checkbox__checked-icon {\n    --nile-svg-stroke: white;\n  }\n \n  .checkbox__indeterminate-icon {\n    --nile-svg-stroke: white;\n  }\n \n  .checkbox__helptext-icon {\n    float: right;\n    cursor: pointer;\n    margin-right: 12px;\n  }\n`;\n \nexport default [styles];"]}

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

@@ -18,6 +18,7 @@ import type { CSSResultGroup } from 'lit';
  * @event nile-change - Emitted when the checked state changes.
  * @event nile-focus - Emitted when the checkbox gains focus.
  * @event nile-input - Emitted when the checkbox receives input.
+ * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart base - The component's base wrapper.
  * @csspart control - The square container that wraps the checkbox's checked state.
@@ -51,8 +52,6 @@ export declare class NileCheckbox extends NileElement {
     checked: boolean;
     /** Label, declared this property for backward compatibility of old component  */
     label: string;
-    /** Sublabel, declared this property for backward compatibility of old component  */
-    subLabel: string;
     /**
      * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
      * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
@@ -71,8 +70,7 @@ export declare class NileCheckbox extends NileElement {
     form: string;
     /** Makes the checkbox a required field. */
     required: boolean;
-    labelContainer: HTMLElement;
-    checkboxIconContainer: HTMLElement;
+    private toggleHelpText;
     private handleClick;
     private handleBlur;
     private handleInput;

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

@@ -5,7 +5,7 @@
  * LICENSE file in the root directory of this source tree.
  */
 import { __decorate } from "tslib";
-import { html, property, nothing, } from 'lit-element';
+import { html, property, } from 'lit-element';
 import { customElement } from 'lit/decorators.js';
 import { styles } from './nile-checkbox.css';
 import { classMap } from 'lit/directives/class-map.js';
@@ -26,6 +26,7 @@ import NileElement from '../internal/nile-element';
  * @event nile-change - Emitted when the checked state changes.
  * @event nile-focus - Emitted when the checkbox gains focus.
  * @event nile-input - Emitted when the checkbox receives input.
+ * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
  *
  * @csspart base - The component's base wrapper.
  * @csspart control - The square container that wraps the checkbox's checked state.
@@ -56,8 +57,6 @@ let NileCheckbox = class NileCheckbox extends NileElement {
         this.checked = false;
         /** Label, declared this property for backward compatibility of old component  */
         this.label = '';
-        /** Sublabel, declared this property for backward compatibility of old component  */
-        this.subLabel = '';
         /**
          * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a "select
          * all/none" behavior when associated checkboxes have a mix of checked and unchecked states.
@@ -77,6 +76,9 @@ let NileCheckbox = class NileCheckbox extends NileElement {
         /** Makes the checkbox a required field. */
         this.required = false;
     }
+    toggleHelpText() {
+        this.showHelpText = !this.showHelpText;
+    }
     handleClick() {
         this.checked = !this.checked;
         this.indeterminate = false;
@@ -129,7 +131,6 @@ let NileCheckbox = class NileCheckbox extends NileElement {
         if (changedProperties.has('helpText')) {
             this.updateHostClass();
         }
-        this.checkboxIconContainer.style.height = this.labelContainer.scrollHeight + 'px';
     }
     updateHostClass() {
         if (this.helpText) {
@@ -150,68 +151,67 @@ let NileCheckbox = class NileCheckbox extends NileElement {
             'checkbox--checked': this.checked,
             'checkbox--disabled': this.disabled,
             'checkbox--focused': this.hasFocus,
-            'checkbox--indeterminate': this.indeterminate
-        })} 
+            'checkbox--indeterminate': this.indeterminate,
+            'checkbox--medium': this.size === 'medium',
+        })}
       >
-        <div class="checkbox__icon__container">
-          <span
-            part="control${this.checked ? ' control--checked' : ''}${this
+        <input
+          class="checkbox__input"
+          type="checkbox"
+          title=${this
+            .title /* An empty title prevents browser validation tooltips from appearing on hover */}
+          name=${this.name}
+          value=${ifDefined(this.value)}
+          .indeterminate=${live(this.indeterminate)}
+          .checked=${live(this.checked)}
+          .disabled=${this.disabled}
+          .required=${this.required}
+          aria-checked=${this.checked ? 'true' : 'false'}
+          @click=${this.handleClick}
+          @input=${this.handleInput}
+          @blur=${this.handleBlur}
+          @focus=${this.handleFocus}
+        />
+ 
+        <span
+          part="control${this.checked ? ' control--checked' : ''}${this
             .indeterminate
             ? ' control--indeterminate'
             : ''}"
-            class="checkbox__control"
-          >
-            <!-- An empty title prevents browser validation tooltips from appearing on hover -->
-            <input
-              class="checkbox__input"
-              type="checkbox"
-              title=${this.title}
-              name=${this.name}
-              value=${ifDefined(this.value)}
-              .indeterminate=${live(this.indeterminate)}
-              .checked=${live(this.checked)}
-              .disabled=${this.disabled}
-              .required=${this.required}
-              aria-checked=${this.checked ? 'true' : 'false'}
-              @click=${this.handleClick}
-              @input=${this.handleInput}
-              @blur=${this.handleBlur}
-              @focus=${this.handleFocus}
-            />
-            ${this.checked
+          class="checkbox__control"
+        >
+          ${this.checked
             ? html `
-                  <nile-icon
-                    part="checked-icon"
-                    class="checkbox__checked-icon"
-                    color="white"
-                    library="system"
-                    name="tick"
-                    size="12"
-                  ></nile-icon>
-                `
+                <nile-icon
+                  part="checked-icon"
+                  class="checkbox__checked-icon"
+                  color="white"
+                  library="system"
+                  name="tick"
+                  size="12"
+                ></nile-icon>
+              `
             : ''}
-            ${!this.checked && this.indeterminate
+          ${!this.checked && this.indeterminate
             ? html `
-                  <nile-icon
-                    part="indeterminate-icon"
-                    class="checkbox__indeterminate-icon"
-                    library="system"
-                    color="white"
-                    name="minus"
-                    size="12"
-                  ></nile-icon>
-                `
+                <nile-icon
+                  part="indeterminate-icon"
+                  class="checkbox__indeterminate-icon"
+                  library="system"
+                  color="white"
+                  name="minus"
+                  size="12"
+                ></nile-icon>
+              `
             : ''}
-          </span>
-        </div>
-
-        <div part="label" class="checkbox__label" style="${!this.label && !this.subLabel ? 'margin-left:0;' : ''}">
-          ${this.label ? html `<span class="checkbox__label__text">${this.label}</span>` : ``}
-          ${this.subLabel ? html `<span class="checkbox__sublabel__text">${this.subLabel}</span>` : ``}
+        </span>
+ 
+        <div part="label" class="checkbox__label">
+          ${typeof this.label === 'boolean' ? '' : this.label}
           <slot></slot>
         </div>
       </label>
-
+ 
       ${hasHelpText
             ? html `
             <nile-tooltip content="${this.helpText}" placement="bottom">
@@ -221,10 +221,15 @@ let NileCheckbox = class NileCheckbox extends NileElement {
               ></nile-icon>
             </nile-tooltip>
           `
-            : nothing}
+            : ``}
+ 
       ${hasErrorMessage
-            ? html `<nile-form-error-message>${this.errorMessage}</nile-form-error-message>`
-            : nothing}
+            ? html `
+            <nile-form-error-message
+              >${this.errorMessage}</nile-form-error-message
+            >
+          `
+            : ``}
     `;
     }
 };
@@ -256,9 +261,6 @@ __decorate([
 __decorate([
     property({ type: String, reflect: true })
 ], NileCheckbox.prototype, "label", void 0);
-__decorate([
-    property({ type: String, reflect: true, attribute: 'sub-label' })
-], NileCheckbox.prototype, "subLabel", void 0);
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileCheckbox.prototype, "indeterminate", void 0);
@@ -280,12 +282,6 @@ __decorate([
 __decorate([
     property({ type: Boolean, reflect: true })
 ], NileCheckbox.prototype, "required", void 0);
-__decorate([
-    query('.checkbox__label__text')
-], NileCheckbox.prototype, "labelContainer", void 0);
-__decorate([
-    query('div.checkbox__icon__container')
-], NileCheckbox.prototype, "checkboxIconContainer", void 0);
 __decorate([
     watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })
 ], NileCheckbox.prototype, "handleStateChange", null);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-checkbox.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,EACR,OAAO,GAGR,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,KAAK,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AACjD,OAAO,EAAE,YAAY,EAAE,MAAM,2BAA2B,CAAC;AACzD,OAAO,EAAE,SAAS,EAAE,MAAM,8BAA8B,CAAC;AACzD,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAC9C,OAAO,EAAE,KAAK,EAAE,MAAM,mBAAmB,CAAC;AAC1C,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAGnD;;;;;;;;;;;;;;;;;;;GAmBG;AAEH;;;;;GAKG;AAEI,IAAM,YAAY,GAAlB,MAAM,YAAa,SAAQ,WAAW;IAC3C;QACE,KAAK,EAAE,CAAC;QAOO,aAAQ,GAAG,KAAK,CAAC;QAEtB,UAAK,GAAG,EAAE,CAAC,CAAC,gCAAgC;QAExD,+EAA+E;QACnE,SAAI,GAAG,EAAE,CAAC;QAKtB,2BAA2B;QACE,SAAI,GAAiC,QAAQ,CAAC;QAE3E,6BAA6B;QACe,aAAQ,GAAG,KAAK,CAAC;QAE7D,6CAA6C;QACD,YAAO,GAAG,KAAK,CAAC;QAE5D,iFAAiF;QACtC,UAAK,GAAG,EAAE,CAAC;QAEtD,oFAAoF;QACjB,aAAQ,GAAG,EAAE,CAAC;QAEjF;;;WAGG;QACyC,kBAAa,GAAG,KAAK,CAAC;QAElE,4FAA4F;QACnE,mBAAc,GAAG,KAAK,CAAC;QAEK,aAAQ,GAAG,EAAE,CAAC;QAEV,iBAAY,GAAG,EAAE,CAAC;QAE9C,iBAAY,GAAG,KAAK,CAAC;QAElD;;;;WAIG;QAC0B,SAAI,GAAG,EAAE,CAAC;QAEvC,2CAA2C;QACC,aAAQ,GAAG,KAAK,CAAC;IAtD7D,CAAC;IA4DO,WAAW;QACjB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;QAC7B,IAAI,CAAC,aAAa,GAAG,KAAK,CAAC;QAC3B,IAAI,CAAC,aAAa,CAChB,IAAI,WAAW,CAAC,aAAa,EAAE;YAC7B,QAAQ,EAAE,IAAI;YACd,OAAO,EAAE,IAAI;YACb,MAAM,EAAE;gBACN,OAAO,EAAE,IAAI,CAAC,OAAO;aACtB;SACF,CAAC,CACH,CAAC;IACJ,CAAC;IAEO,UAAU;QAChB,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC;QACtB,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,CAAC;IACpB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrB,CAAC;IAEO,WAAW;QACjB,IAAI,CAAC,QAAQ,GAAG,IAAI,CAAC;QACrB,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;IACrB,CAAC;IAGD,iBAAiB;QACf,IAAI,CAAC,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO,CAAC,CAAC,sBAAsB;QACzD,IAAI,CAAC,KAAK,CAAC,aAAa,GAAG,IAAI,CAAC,aAAa,CAAC,CAAC,sBAAsB;IACvE,CAAC;IAED,yCAAyC;IACzC,KAAK;QACH,IAAI,CAAC,KAAK,CAAC,KAAK,EAAE,CAAC;IACrB,CAAC;IAED,kCAAkC;IAClC,KAAK,CAAC,OAAsB;QAC1B,IAAI,CAAC,KAAK,CAAC,KAAK,CAAC,OAAO,CAAC,CAAC;IAC5B,CAAC;IAED,uCAAuC;IACvC,IAAI;QACF,IAAI,CAAC,KAAK,CAAC,IAAI,EAAE,CAAC;IACpB,CAAC;IAED,iBAAiB;QACf,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,eAAe,EAAE,CAAC;QACvB,IAAI,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;IACzB,CAAC;IAED,oBAAoB;QAClB,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAC7B,IAAI,CAAC,IAAI,CAAC,cAAc,CAAC,CAAC;IAC5B,CAAC;IAED,OAAO,CAAC,iBAAyD;QAC/D,KAAK,CAAC,OAAO,CAAC,iBAAiB,CAAC,CAAC;QACjC,IAAI,iBAAiB,CAAC,GAAG,CAAC,UAAU,CAAC,EAAE;YACrC,IAAI,CAAC,eAAe,EAAE,CAAC;SACxB;QACD,IAAI,CAAC,qBAAqB,CAAC,KAAK,CAAC,MAAM,GAAC,IAAI,CAAC,cAAc,CAAC,YAAY,GAAC,IAAI,CAAC;IAChF,CAAC;IAEO,eAAe;QACrB,IAAI,IAAI,CAAC,QAAQ,EAAE;YACjB,IAAI,CAAC,SAAS,CAAC,GAAG,CAAC,YAAY,CAAC,CAAC;SAClC;aAAM;YACL,IAAI,CAAC,SAAS,CAAC,MAAM,CAAC,YAAY,CAAC,CAAC;SACrC;IACH,CAAC;IAED,MAAM;QACJ,MAAM,WAAW,GAAG,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QACjD,MAAM,eAAe,GAAG,IAAI,CAAC,YAAY,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC;QAEzD,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,QAAQ,EAAE,IAAI;YACd,mBAAmB,EAAE,IAAI,CAAC,OAAO;YACjC,oBAAoB,EAAE,IAAI,CAAC,QAAQ;YACnC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;YAClC,yBAAyB,EAAE,IAAI,CAAC,aAAa;SAC9C,CAAC;;;;2BAIiB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,GAAG,IAAI;aAC1D,aAAa;YACd,CAAC,CAAC,yBAAyB;YAC3B,CAAC,CAAC,EAAE;;;;;;;sBAOK,IAAI,CAAC,KAAM;qBACb,IAAI,CAAC,IAAI;sBACR,SAAS,CAAC,IAAI,CAAC,KAAK,CAAC;+BACZ,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;yBAC9B,IAAI,CAAC,IAAI,CAAC,OAAO,CAAC;0BACjB,IAAI,CAAC,QAAQ;0BACb,IAAI,CAAC,QAAQ;6BACV,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;uBACrC,IAAI,CAAC,WAAW;uBAChB,IAAI,CAAC,WAAW;sBACjB,IAAI,CAAC,UAAU;uBACd,IAAI,CAAC,WAAW;;cAEzB,IAAI,CAAC,OAAO;YACZ,CAAC,CAAC,IAAI,CAAA;;;;;;;;;iBASH;YACH,CAAC,CAAC,EAAE;cACJ,CAAC,IAAI,CAAC,OAAO,IAAI,IAAI,CAAC,aAAa;YACnC,CAAC,CAAC,IAAI,CAAA;;;;;;;;;iBASH;YACH,CAAC,CAAC,EAAE;;;;2DAIyC,CAAC,IAAI,CAAC,KAAK,IAAI,CAAC,IAAI,CAAC,QAAQ,CAAA,CAAC,CAAA,gBAAgB,CAAA,CAAC,CAAA,EAAE;YAChG,IAAI,CAAC,KAAK,CAAC,CAAC,CAAC,IAAI,CAAA,uCAAuC,IAAI,CAAC,KAAK,SAAS,CAAC,CAAC,CAAC,EAAE;YAChF,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAA,0CAA0C,IAAI,CAAC,QAAQ,SAAS,CAAC,CAAC,CAAC,EAAE;;;;;QAK7F,WAAW;YACX,CAAC,CAAC,IAAI,CAAA;qCACuB,IAAI,CAAC,QAAQ;;;;;;WAMvC;YACH,CAAC,CAAC,OAAO;QACT,eAAe;YACf,CAAC,CAAC,IAAI,CAAA,4BAA4B,IAAI,CAAC,YAAY,4BAA4B;YAC/E,CAAC,CAAC,OAAO;KACZ,CAAC;IACJ,CAAC;;AA9NM,mBAAM,GAAmB,MAAM,CAAC;AAEN;IAAhC,KAAK,CAAC,wBAAwB,CAAC;2CAAyB;AAEhD;IAAR,KAAK,EAAE;8CAA0B;AAEtB;IAAX,QAAQ,EAAE;2CAAY;AAGX;IAAX,QAAQ,EAAE;0CAAW;AAGV;IAAX,QAAQ,EAAE;2CAAgB;AAGE;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAA+C;AAG/B;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AAGjB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;6CAAiB;AAGjB;IAA1C,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;2CAAY;AAGa;IAAlE,QAAQ,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC;8CAAe;AAMrC;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;mDAAuB;AAGzC;IAAxB,YAAY,CAAC,SAAS,CAAC;oDAAwB;AAEK;IAApD,QAAQ,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAe;AAEV;IAAxD,QAAQ,CAAC,EAAE,SAAS,EAAE,eAAe,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;kDAAmB;AAE9C;IAA5B,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;kDAAsB;AAOrB;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAW;AAGK;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;8CAAkB;AAE5B;IAAhC,KAAK,CAAC,wBAAwB,CAAC;oDAA4B;AAEpB;IAAvC,KAAK,CAAC,+BAA+B,CAAC;2DAAmC;AA+B1E;IADC,KAAK,CAAC,CAAC,SAAS,EAAE,eAAe,CAAC,EAAE,EAAE,oBAAoB,EAAE,IAAI,EAAE,CAAC;qDAInE;AA/FU,YAAY;IADxB,aAAa,CAAC,eAAe,CAAC;GAClB,YAAY,CAoOxB;SApOY,YAAY;AAsOzB,eAAe,YAAY,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  property,\n  nothing,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n\nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n\n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n *\n * @dependency nile-icon\n *\n * @slot - The checkbox's label.\n *\n * @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\n\n/**\n * Nile icon component.\n *\n * @tag nile-checkbox\n *\n */\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n  constructor() {\n    super();\n  }\n\n  static styles: CSSResultGroup = styles;\n\n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n\n  @state() private hasFocus = false;\n\n  @property() title = ''; // make reactive to pass through\n\n  /** The name of the checkbox, submitted as a name/value pair with form data. */\n  @property() name = '';\n\n  /** The current value of the checkbox, submitted as a name/value pair with form data. */\n  @property() value: boolean;\n\n  /** The checkbox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /** Disables the checkbox. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n\n  /** Label, declared this property for backward compatibility of old component  */\n  @property({ type: String, reflect: true }) label = '';\n\n  /** Sublabel, declared this property for backward compatibility of old component  */\n  @property({ type: String, reflect: true, attribute: 'sub-label' }) subLabel = '';\n\n  /**\n   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n   * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n\n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = false;\n\n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n\n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n\n  @property({ type: Boolean }) showHelpText = false;\n\n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n\n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  @query('.checkbox__label__text') labelContainer:HTMLElement;\n\n  @query('div.checkbox__icon__container') checkboxIconContainer:HTMLElement;\n\n  private handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.dispatchEvent(\n      new CustomEvent('valueChange', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          checked: this.checked,\n        },\n      })\n    );\n  }\n\n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('blur');\n  }\n\n  private handleInput() {\n    this.emit('input');\n  }\n\n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('focus');\n  }\n\n  @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n  handleStateChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.input.indeterminate = this.indeterminate; // force a sync update\n  }\n\n  /** Simulates a click on the checkbox. */\n  click() {\n    this.input.click();\n  }\n\n  /** Sets focus on the checkbox. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n\n  /** Removes focus from the checkbox. */\n  blur() {\n    this.input.blur();\n  }\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.updateHostClass();\n    this.emit('nile-init');\n  }\n\n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('helpText')) {\n      this.updateHostClass();\n    }\n    this.checkboxIconContainer.style.height=this.labelContainer.scrollHeight+'px';\n  }\n\n  private updateHostClass() {\n    if (this.helpText) {\n      this.classList.add('full-width');\n    } else {\n      this.classList.remove('full-width');\n    }\n  }\n\n  render() {\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n\n    return html`\n      <label\n        part=\"base\"\n        class=${classMap({\n          checkbox: true,\n          'checkbox--checked': this.checked,\n          'checkbox--disabled': this.disabled,\n          'checkbox--focused': this.hasFocus,\n          'checkbox--indeterminate': this.indeterminate\n        })} \n      >\n        <div class=\"checkbox__icon__container\">\n          <span\n            part=\"control${this.checked ? ' control--checked' : ''}${this\n              .indeterminate\n              ? ' control--indeterminate'\n              : ''}\"\n            class=\"checkbox__control\"\n          >\n            <!-- An empty title prevents browser validation tooltips from appearing on hover -->\n            <input\n              class=\"checkbox__input\"\n              type=\"checkbox\"\n              title=${ this.title }\n              name=${this.name}\n              value=${ifDefined(this.value)}\n              .indeterminate=${live(this.indeterminate)}\n              .checked=${live(this.checked)}\n              .disabled=${this.disabled}\n              .required=${this.required}\n              aria-checked=${this.checked ? 'true' : 'false'}\n              @click=${this.handleClick}\n              @input=${this.handleInput}\n              @blur=${this.handleBlur}\n              @focus=${this.handleFocus}\n            />\n            ${this.checked\n              ? html`\n                  <nile-icon\n                    part=\"checked-icon\"\n                    class=\"checkbox__checked-icon\"\n                    color=\"white\"\n                    library=\"system\"\n                    name=\"tick\"\n                    size=\"12\"\n                  ></nile-icon>\n                `\n              : ''}\n            ${!this.checked && this.indeterminate\n              ? html`\n                  <nile-icon\n                    part=\"indeterminate-icon\"\n                    class=\"checkbox__indeterminate-icon\"\n                    library=\"system\"\n                    color=\"white\"\n                    name=\"minus\"\n                    size=\"12\"\n                  ></nile-icon>\n                `\n              : ''}\n          </span>\n        </div>\n\n        <div part=\"label\" class=\"checkbox__label\" style=\"${!this.label && !this.subLabel?'margin-left:0;':''}\">\n          ${this.label ? html`<span class=\"checkbox__label__text\">${this.label}</span>` : ``}\n          ${this.subLabel ? html`<span class=\"checkbox__sublabel__text\">${this.subLabel}</span>` : ``}\n          <slot></slot>\n        </div>\n      </label>\n\n      ${hasHelpText\n        ? html`\n            <nile-tooltip content=\"${this.helpText}\" placement=\"bottom\">\n              <nile-icon\n                name=\"question\"\n                class=\"checkbox__helptext-icon\"\n              ></nile-icon>\n            </nile-tooltip>\n          `\n        : nothing}\n      ${hasErrorMessage\n        ? html`<nile-form-error-message>${this.errorMessage}</nile-form-error-message>`\n        : nothing}\n    `;\n  }\n}\n\nexport default NileCheckbox;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-checkbox': NileCheckbox;\n  }\n}\n"]}
+{"version":3,"file":"nile-checkbox.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.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 {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport { styles } from './nile-checkbox.css';\n \nimport { classMap } from 'lit/directives/class-map.js';\nimport { query, state } from 'lit/decorators.js';\nimport { defaultValue } from '../internal/default-value';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { watch } from '../internal/watch';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n \n/**\n * @summary Checkboxes allow the user to toggle an option on or off.\n *\n * @dependency nile-icon\n *\n * @slot - The checkbox's label.\n *\n * @event nile-blur - Emitted when the checkbox loses focus.\n * @event nile-change - Emitted when the checked state changes.\n * @event nile-focus - Emitted when the checkbox gains focus.\n * @event nile-input - Emitted when the checkbox receives input.\n * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.\n *\n * @csspart base - The component's base wrapper.\n * @csspart control - The square container that wraps the checkbox's checked state.\n * @csspart control--checked - Matches the control part when the checkbox is checked.\n * @csspart control--indeterminate - Matches the control part when the checkbox is indeterminate.\n * @csspart checked-icon - The checked icon, an `<nile-icon>` element.\n * @csspart indeterminate-icon - The indeterminate icon, an `<nile-icon>` element.\n * @csspart label - The container that wraps the checkbox's label.\n */\n \n/**\n * Nile icon component.\n *\n * @tag nile-checkbox\n *\n */\n@customElement('nile-checkbox')\nexport class NileCheckbox extends NileElement {\n  constructor() {\n    super();\n  }\n \n  static styles: CSSResultGroup = styles;\n \n  @query('input[type=\"checkbox\"]') input: HTMLInputElement;\n \n  @state() private hasFocus = false;\n \n  @property() title = ''; // make reactive to pass through\n \n  /** The name of the checkbox, submitted as a name/value pair with form data. */\n  @property() name = '';\n \n  /** The current value of the checkbox, submitted as a name/value pair with form data. */\n  @property() value: boolean;\n \n  /** The checkbox's size. */\n  @property({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n \n  /** Disables the checkbox. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n \n  /** Draws the checkbox in a checked state. */\n  @property({ type: Boolean, reflect: true }) checked = false;\n \n  /** Label, declared this property for backward compatibility of old component  */\n  @property({ type: String, reflect: true }) label = '';\n \n  /**\n   * Draws the checkbox in an indeterminate state. This is usually applied to checkboxes that represents a \"select\n   * all/none\" behavior when associated checkboxes have a mix of checked and unchecked states.\n   */\n  @property({ type: Boolean, reflect: true }) indeterminate = false;\n \n  /** The default value of the form control. Primarily used for resetting the form control. */\n  @defaultValue('checked') defaultChecked = false;\n \n  @property({ attribute: 'help-text', reflect: true }) helpText = '';\n \n  @property({ attribute: 'error-message', reflect: true }) errorMessage = '';\n \n  @property({ type: Boolean }) showHelpText = false;\n \n \n  /**\n   * By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\n   * to place the form control outside of a form and associate it with the form that has this `id`. The form must be in\n   * the same document or shadow root for this to work.\n   */\n  @property({ reflect: true }) form = '';\n \n  /** Makes the checkbox a required field. */\n  @property({ type: Boolean, reflect: true }) required = false;\n \n  private toggleHelpText() {\n    this.showHelpText = !this.showHelpText;\n  }\n \n  private handleClick() {\n    this.checked = !this.checked;\n    this.indeterminate = false;\n    this.dispatchEvent(\n      new CustomEvent('valueChange', {\n        composed: true,\n        bubbles: true,\n        detail: {\n          checked: this.checked,\n        },\n      })\n    );\n  }\n \n  private handleBlur() {\n    this.hasFocus = false;\n    this.emit('blur');\n  }\n \n  private handleInput() {\n    this.emit('input');\n  }\n \n  private handleFocus() {\n    this.hasFocus = true;\n    this.emit('focus');\n  }\n \n  @watch(['checked', 'indeterminate'], { waitUntilFirstUpdate: true })\n  handleStateChange() {\n    this.input.checked = this.checked; // force a sync update\n    this.input.indeterminate = this.indeterminate; // force a sync update\n  }\n \n  /** Simulates a click on the checkbox. */\n  click() {\n    this.input.click();\n  }\n \n  /** Sets focus on the checkbox. */\n  focus(options?: FocusOptions) {\n    this.input.focus(options);\n  }\n \n  /** Removes focus from the checkbox. */\n  blur() {\n    this.input.blur();\n  }\n \n  connectedCallback() {\n    super.connectedCallback();\n    this.updateHostClass();\n    this.emit('nile-init');\n  }\n \n  disconnectedCallback() {\n    super.disconnectedCallback();\n    this.emit('nile-destroy');\n  }\n \n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('helpText')) {\n      this.updateHostClass();\n    }\n  }\n \n  private updateHostClass() {\n    if (this.helpText) {\n      this.classList.add('full-width');\n    } else {\n      this.classList.remove('full-width');\n    }\n  }\n \n  render() {\n    const hasHelpText = this.helpText ? true : false;\n    const hasErrorMessage = this.errorMessage ? true : false;\n \n    return html`\n      <label\n        part=\"base\"\n        class=${classMap({\n          checkbox: true,\n          'checkbox--checked': this.checked,\n          'checkbox--disabled': this.disabled,\n          'checkbox--focused': this.hasFocus,\n          'checkbox--indeterminate': this.indeterminate,\n          'checkbox--medium': this.size === 'medium',\n        })}\n      >\n        <input\n          class=\"checkbox__input\"\n          type=\"checkbox\"\n          title=${\n            this\n              .title /* An empty title prevents browser validation tooltips from appearing on hover */\n          }\n          name=${this.name}\n          value=${ifDefined(this.value)}\n          .indeterminate=${live(this.indeterminate)}\n          .checked=${live(this.checked)}\n          .disabled=${this.disabled}\n          .required=${this.required}\n          aria-checked=${this.checked ? 'true' : 'false'}\n          @click=${this.handleClick}\n          @input=${this.handleInput}\n          @blur=${this.handleBlur}\n          @focus=${this.handleFocus}\n        />\n \n        <span\n          part=\"control${this.checked ? ' control--checked' : ''}${this\n            .indeterminate\n            ? ' control--indeterminate'\n            : ''}\"\n          class=\"checkbox__control\"\n        >\n          ${this.checked\n            ? html`\n                <nile-icon\n                  part=\"checked-icon\"\n                  class=\"checkbox__checked-icon\"\n                  color=\"white\"\n                  library=\"system\"\n                  name=\"tick\"\n                  size=\"12\"\n                ></nile-icon>\n              `\n            : ''}\n          ${!this.checked && this.indeterminate\n            ? html`\n                <nile-icon\n                  part=\"indeterminate-icon\"\n                  class=\"checkbox__indeterminate-icon\"\n                  library=\"system\"\n                  color=\"white\"\n                  name=\"minus\"\n                  size=\"12\"\n                ></nile-icon>\n              `\n            : ''}\n        </span>\n \n        <div part=\"label\" class=\"checkbox__label\">\n          ${typeof this.label === 'boolean' ? '' : this.label}\n          <slot></slot>\n        </div>\n      </label>\n \n      ${hasHelpText\n        ? html`\n            <nile-tooltip content=\"${this.helpText}\" placement=\"bottom\">\n              <nile-icon\n                name=\"question\"\n                class=\"checkbox__helptext-icon\"\n              ></nile-icon>\n            </nile-tooltip>\n          `\n        : ``}\n \n      ${hasErrorMessage\n        ? html`\n            <nile-form-error-message\n              >${this.errorMessage}</nile-form-error-message\n            >\n          `\n        : ``}\n    `;\n  }\n}\n \nexport default NileCheckbox;\n \ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-checkbox': NileCheckbox;\n  }\n}"]}

package/dist/src/nile-drawer/nile-drawer.css.d.ts

@@ -1,9 +1,9 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 /**
  * Drawer CSS
  */

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

@@ -1,9 +1,9 @@
 /**
-* Copyright Aquera Inc 2023
-*
-* This source code is licensed under the BSD-3-Clause license found in the
-* LICENSE file in the root directory of this source tree.
-*/
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
 import { css } from 'lit-element';
 /**
  * Drawer CSS
@@ -11,6 +11,7 @@ import { css } from 'lit-element';
 export const styles = css `
   :host {
     box-sizing: border-box;
+    --nile-drawer-remove-icon-color:#000;
   }
 
   :host *,
@@ -170,6 +171,10 @@ export const styles = css `
     display: none;
   }
 
+  .drawer__close:hover {
+    cursor:pointer;
+  }
+
   @media (forced-colors: active) {
     .drawer__panel {
       border: solid 1px hsl(0, 0%, 100%);

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

@@ -1 +1 @@
-{"version":3,"file":"nile-drawer.css.js","sourceRoot":"","sources":["../../../src/nile-drawer/nile-drawer.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAuKxB,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-element';\n\n/**\n * Drawer 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    --size: 25rem;\n    --header-spacing: 1.25rem;\n    --body-spacing: 1.25rem;\n    --footer-spacing: 1.25rem;\n\n    display: contents;\n  }\n\n  .drawer {\n    top: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    overflow: hidden;\n  }\n\n  .drawer--contained {\n    position: absolute;\n    z-index: initial;\n  }\n\n  .drawer--fixed {\n    position: fixed;\n    z-index: 700;\n  }\n\n  .drawer__panel {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    z-index: 2;\n    max-width: 100%;\n    max-height: 100%;\n    background-color: hsl(0, 0%, 100%);\n    box-shadow: 0 4px 16px hsl(240 3.8% 46.1% / 12%);\n    overflow: auto;\n    pointer-events: all;\n  }\n\n  .drawer__panel:focus {\n    outline: none;\n  }\n\n  .drawer--top .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--end .drawer__panel {\n    top: 0;\n    inset-inline-end: 0;\n    bottom: auto;\n    inset-inline-start: auto;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer--bottom .drawer__panel {\n    top: auto;\n    inset-inline-end: auto;\n    bottom: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--start .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer__header {\n    display: flex;\n  }\n\n  .drawer__title {\n    flex: 1 1 auto;\n    font: inherit;\n    font-size: 1.25rem;\n    line-height: 1.4;\n    padding: var(--header-spacing);\n    margin: 0;\n  }\n\n  .drawer__header-actions {\n    flex-shrink: 0;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: end;\n    gap: 0.25rem;\n    padding: 0 var(--header-spacing);\n  }\n\n  .drawer__header-actions nile-icon-button,\n  .drawer__header-actions ::slotted(nile-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 1rem;\n  }\n\n  .drawer__body {\n    flex: 1 1 auto;\n    display: block;\n    padding: var(--body-spacing);\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .drawer__footer {\n    text-align: right;\n    padding: var(--footer-spacing);\n  }\n\n  .drawer__footer ::slotted(nile-button:not(:last-of-type)) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .drawer:not(.drawer--has-footer) .drawer__footer {\n    display: none;\n  }\n\n  .drawer__overlay {\n    display: block;\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: hsl(240 3.8% 46.1% / 33%);\n    pointer-events: all;\n  }\n\n  .drawer--contained .drawer__overlay {\n    display: none;\n  }\n\n  @media (forced-colors: active) {\n    .drawer__panel {\n      border: solid 1px hsl(0, 0%, 100%);\n    }\n  }\n`;\n\nexport default [styles];\n"]}
+{"version":3,"file":"nile-drawer.css.js","sourceRoot":"","sources":["../../../src/nile-drawer/nile-drawer.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA4KxB,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-element';\n\n/**\n * Drawer CSS\n */\nexport const styles = css`\n  :host {\n    box-sizing: border-box;\n    --nile-drawer-remove-icon-color:#000;\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    --size: 25rem;\n    --header-spacing: 1.25rem;\n    --body-spacing: 1.25rem;\n    --footer-spacing: 1.25rem;\n\n    display: contents;\n  }\n\n  .drawer {\n    top: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: 100%;\n    pointer-events: none;\n    overflow: hidden;\n  }\n\n  .drawer--contained {\n    position: absolute;\n    z-index: initial;\n  }\n\n  .drawer--fixed {\n    position: fixed;\n    z-index: 700;\n  }\n\n  .drawer__panel {\n    position: absolute;\n    display: flex;\n    flex-direction: column;\n    z-index: 2;\n    max-width: 100%;\n    max-height: 100%;\n    background-color: hsl(0, 0%, 100%);\n    box-shadow: 0 4px 16px hsl(240 3.8% 46.1% / 12%);\n    overflow: auto;\n    pointer-events: all;\n  }\n\n  .drawer__panel:focus {\n    outline: none;\n  }\n\n  .drawer--top .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--end .drawer__panel {\n    top: 0;\n    inset-inline-end: 0;\n    bottom: auto;\n    inset-inline-start: auto;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer--bottom .drawer__panel {\n    top: auto;\n    inset-inline-end: auto;\n    bottom: 0;\n    inset-inline-start: 0;\n    width: 100%;\n    height: var(--size);\n  }\n\n  .drawer--start .drawer__panel {\n    top: 0;\n    inset-inline-end: auto;\n    bottom: auto;\n    inset-inline-start: 0;\n    width: var(--size);\n    height: 100%;\n  }\n\n  .drawer__header {\n    display: flex;\n  }\n\n  .drawer__title {\n    flex: 1 1 auto;\n    font: inherit;\n    font-size: 1.25rem;\n    line-height: 1.4;\n    padding: var(--header-spacing);\n    margin: 0;\n  }\n\n  .drawer__header-actions {\n    flex-shrink: 0;\n    display: flex;\n    flex-wrap: wrap;\n    justify-content: end;\n    gap: 0.25rem;\n    padding: 0 var(--header-spacing);\n  }\n\n  .drawer__header-actions nile-icon-button,\n  .drawer__header-actions ::slotted(nile-icon-button) {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    font-size: 1rem;\n  }\n\n  .drawer__body {\n    flex: 1 1 auto;\n    display: block;\n    padding: var(--body-spacing);\n    overflow: auto;\n    -webkit-overflow-scrolling: touch;\n  }\n\n  .drawer__footer {\n    text-align: right;\n    padding: var(--footer-spacing);\n  }\n\n  .drawer__footer ::slotted(nile-button:not(:last-of-type)) {\n    margin-inline-end: 0.5rem;\n  }\n\n  .drawer:not(.drawer--has-footer) .drawer__footer {\n    display: none;\n  }\n\n  .drawer__overlay {\n    display: block;\n    position: fixed;\n    top: 0;\n    right: 0;\n    bottom: 0;\n    left: 0;\n    background-color: hsl(240 3.8% 46.1% / 33%);\n    pointer-events: all;\n  }\n\n  .drawer--contained .drawer__overlay {\n    display: none;\n  }\n\n  .drawer__close:hover {\n    cursor:pointer;\n  }\n\n  @media (forced-colors: active) {\n    .drawer__panel {\n      border: solid 1px hsl(0, 0%, 100%);\n    }\n  }\n`;\n\nexport default [styles];\n"]}

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

@@ -269,10 +269,15 @@ let NileDrawer = class NileDrawer extends NileElement {
             'drawer--contained': this.contained,
             'drawer--fixed': !this.contained,
             'drawer--rtl': 'rtl',
-            'drawer--has-footer': this.hasSlotController.test('footer')
+            'drawer--has-footer': this.hasSlotController.test('footer'),
         })}
       >
-        <div part="overlay" class="drawer__overlay" @click=${() => this.requestClose('overlay')} tabindex="-1"></div>
+        <div
+          part="overlay"
+          class="drawer__overlay"
+          @click=${() => this.requestClose('overlay')}
+          tabindex="-1"
+        ></div>
 
         <div
           part="panel"
@@ -289,19 +294,23 @@ let NileDrawer = class NileDrawer extends NileElement {
                 <header part="header" class="drawer__header">
                   <h2 part="title" class="drawer__title" id="title">
                     <!-- If there's no label, use an invisible character to prevent the header from collapsing -->
-                    <slot name="label"> ${this.label.length > 0 ? this.label : String.fromCharCode(65279)} </slot>
+                    <slot name="label">
+                      ${this.label.length > 0
+                ? this.label
+                : String.fromCharCode(65279)}
+                    </slot>
                   </h2>
                   <div part="header-actions" class="drawer__header-actions">
                     <slot name="header-actions"></slot>
-                    <nile-icon-button
-                      part="close-button"
-                      exportparts="base:close-button__base"
+                    <nile-icon
                       class="drawer__close"
                       name="close"
-                      label='close'
-                      library="system"
+                      label="close"
+                      part="close-button"
+                      exportparts="base:close-button__base"
+                      color="var(--nile-drawer-remove-icon-color)"
                       @click=${() => this.requestClose('close-button')}
-                    ></nile-icon-button>
+                    ></nile-icon>
                   </div>
                 </header>
               `