@aquera/nile-elements 0.0.68 → 0.0.70

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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;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];\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;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoJxB,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--medium {\n    padding-top: 2px;\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: 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__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"]}

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

@@ -18,7 +18,6 @@ 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.
@@ -52,6 +51,8 @@ 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.
@@ -70,7 +71,6 @@ export declare class NileCheckbox extends NileElement {
     form: string;
     /** Makes the checkbox a required field. */
     required: boolean;
-    private toggleHelpText;
     private handleClick;
     private handleBlur;
     private handleInput;

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

@@ -26,7 +26,6 @@ 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.
@@ -57,6 +56,8 @@ 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.
@@ -76,9 +77,6 @@ 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;
@@ -207,7 +205,8 @@ let NileCheckbox = class NileCheckbox extends NileElement {
         </span>
 
         <div part="label" class="checkbox__label">
-          ${typeof this.label === 'boolean' ? '' : this.label}
+          ${this.label ? html `<span class="checkbox__label__text">${this.label}</span>` : ``}
+          ${this.label && this.subLabel ? html `<span class="checkbox__sublabel__text">${this.subLabel}</span>` : ``}
           <slot></slot>
         </div>
       </label>
@@ -222,7 +221,6 @@ let NileCheckbox = class NileCheckbox extends NileElement {
             </nile-tooltip>
           `
             : ``}
-
       ${hasErrorMessage
             ? html `
             <nile-form-error-message
@@ -261,6 +259,9 @@ __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);

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":"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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}\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 *\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  /**\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  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          ${this.label ? html`<span class=\"checkbox__label__text\">${this.label}</span>` : ``}\n          ${this.label && 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        : ``}\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}\n"]}

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

@@ -0,0 +1 @@
+import './nile-checkbox';

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

@@ -0,0 +1,152 @@
+import { fixture, html, expect, oneEvent } from '@open-wc/testing';
+import './nile-checkbox';
+describe('NileCheckbox', () => {
+    it('renders correctly with default properties', async () => {
+        const el = await fixture(html `<nile-checkbox></nile-checkbox>`);
+        expect(el).shadowDom.to.equalSnapshot();
+    });
+    it('toggles checked state on click', async () => {
+        const el = await fixture(html `<nile-checkbox></nile-checkbox>`);
+        const input = el.shadowRoot.querySelector('input[type="checkbox"]');
+        input.click();
+        expect(el.checked).to.be.true;
+        input.click();
+        expect(el.checked).to.be.false;
+    });
+    it('emits nile-change event on click', async () => {
+        const el = await fixture(html `<nile-checkbox></nile-checkbox>`);
+        const input = el.shadowRoot.querySelector('input[type="checkbox"]');
+        setTimeout(() => input.click());
+        const event = await oneEvent(el, 'valueChange');
+        expect(event.detail.checked).to.be.true;
+    });
+    it('handles focus and blur events', async () => {
+        const el = await fixture(html `<nile-checkbox></nile-checkbox>`);
+        const input = el.shadowRoot.querySelector('input[type="checkbox"]');
+        // Focus the input and wait for the focus event
+        setTimeout(() => input.focus());
+        const focusEvent = await oneEvent(el, 'focus');
+        expect(focusEvent).to.exist;
+        // Blur the input and wait for the blur event
+        setTimeout(() => input.blur());
+        const blurEvent = await oneEvent(el, 'blur');
+        expect(blurEvent).to.exist;
+    });
+    it('handles indeterminate state', async () => {
+        const el = await fixture(html `<nile-checkbox indeterminate></nile-checkbox>`);
+        const input = el.shadowRoot.querySelector('input[type="checkbox"]');
+        expect(input.indeterminate).to.be.true;
+        el.checked = true;
+        el.indeterminate = false;
+        await el.updateComplete;
+        expect(input.indeterminate).to.be.false;
+        expect(input.checked).to.be.true;
+    });
+    it('reflects properties to attributes', async () => {
+        const el = await fixture(html `
+      <nile-checkbox
+        name="test-name"
+        title="test-title"
+        disabled
+        required
+        label="test-label"
+        sub-label="test-sublabel"
+        help-text="test-help"
+        error-message="test-error"
+      ></nile-checkbox>
+    `);
+        expect(el.getAttribute('name')).to.equal('test-name');
+        expect(el.getAttribute('title')).to.equal('test-title');
+        expect(el.getAttribute('disabled')).to.equal('');
+        expect(el.getAttribute('required')).to.equal('');
+        expect(el.getAttribute('label')).to.equal('test-label');
+        expect(el.getAttribute('sub-label')).to.equal('test-sublabel');
+        expect(el.getAttribute('help-text')).to.equal('test-help');
+        expect(el.getAttribute('error-message')).to.equal('test-error');
+    });
+    it('displays help text when showHelpText is true', async () => {
+        const el = await fixture(html `<nile-checkbox help-text="test-help"></nile-checkbox>`);
+        el.showHelpText = true;
+        await el.updateComplete;
+        const helpTextIcon = el.shadowRoot.querySelector('.checkbox__helptext-icon');
+        expect(helpTextIcon).to.exist;
+    });
+    it('updates host class based on helpText', async () => {
+        const el = await fixture(html `<nile-checkbox></nile-checkbox>`);
+        el.helpText = 'test-help';
+        await el.updateComplete;
+        expect(el.classList.contains('full-width')).to.be.true;
+        el.helpText = '';
+        await el.updateComplete;
+        expect(el.classList.contains('full-width')).to.be.false;
+    });
+    it('emits custom events on connected and disconnected', async () => {
+        const el = document.createElement('nile-checkbox');
+        // Wait for the connected event
+        const initEventPromise = oneEvent(el, 'nile-init');
+        document.body.appendChild(el);
+        const initEvent = await initEventPromise;
+        expect(initEvent).to.exist;
+        // Wait for the disconnected event
+        const destroyEventPromise = oneEvent(el, 'nile-destroy');
+        document.body.removeChild(el);
+        const destroyEvent = await destroyEventPromise;
+        expect(destroyEvent).to.exist;
+    });
+    it('handles required attribute', async () => {
+        const el = await fixture(html `<nile-checkbox required></nile-checkbox>`);
+        const input = el.shadowRoot.querySelector('input[type="checkbox"]');
+        expect(input.required).to.be.true;
+    });
+    it('simulates click using click method', async () => {
+        const el = await fixture(html `<nile-checkbox></nile-checkbox>`);
+        el.click();
+        expect(el.checked).to.be.true;
+    });
+    it('sets and removes focus using focus and blur methods', async () => {
+        const el = await fixture(html `<nile-checkbox></nile-checkbox>`);
+        // Call the focus method and wait for the focus event
+        setTimeout(() => el.focus());
+        const focusEvent = await oneEvent(el, 'focus');
+        expect(focusEvent).to.exist;
+        // Call the blur method and wait for the blur event
+        setTimeout(() => el.blur());
+        const blurEvent = await oneEvent(el, 'blur');
+        expect(blurEvent).to.exist;
+    });
+    it('reflects checked attribute to property', async () => {
+        const el = await fixture(html `<nile-checkbox checked></nile-checkbox>`);
+        expect(el.checked).to.be.true;
+    });
+    it('reflects indeterminate attribute to property', async () => {
+        const el = await fixture(html `<nile-checkbox indeterminate></nile-checkbox>`);
+        expect(el.indeterminate).to.be.true;
+    });
+    it('associates form using form attribute', async () => {
+        const el = await fixture(html `
+      <div>
+        <form id="test-form"></form>
+        <nile-checkbox form="test-form"></nile-checkbox>
+      </div>
+    `);
+        const checkbox = el.querySelector('nile-checkbox');
+        expect(checkbox).to.not.be.null;
+        expect(checkbox.getAttribute('form')).to.equal('test-form');
+    });
+    it('displays and hides help text correctly', async () => {
+        const el = await fixture(html `<nile-checkbox help-text="test-help"></nile-checkbox>`);
+        // Initially, help text should not be shown
+        expect(el.showHelpText).to.be.false;
+        // Show the help text
+        el.showHelpText = true;
+        await el.updateComplete;
+        let helpTextIcon = el.shadowRoot.querySelector('.checkbox__helptext-icon');
+        expect(helpTextIcon).to.exist;
+        // Hide the help text
+        el.showHelpText = false;
+        await el.updateComplete;
+        helpTextIcon = el.shadowRoot.querySelector('.checkbox__helptext-icon');
+        expect(helpTextIcon).to.be.exist;
+    });
+});
+//# sourceMappingURL=nile-checkbox.test.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-checkbox.test.js","sourceRoot":"","sources":["../../../src/nile-checkbox/nile-checkbox.test.ts"],"names":[],"mappings":"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","sourcesContent":["import { fixture, html, expect, oneEvent } from '@open-wc/testing';\nimport './nile-checkbox';\nimport { NileCheckbox } from './nile-checkbox';\n\ndescribe('NileCheckbox', () => {\n  it('renders correctly with default properties', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    expect(el).shadowDom.to.equalSnapshot();\n  });\n\n  it('toggles checked state on click', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    input.click();\n    expect(el.checked).to.be.true;\n    input.click();\n    expect(el.checked).to.be.false;\n  });\n\n  it('emits nile-change event on click', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    setTimeout(() => input.click());\n    const event = await oneEvent(el, 'valueChange');\n    expect(event.detail.checked).to.be.true;\n  });\n\n  it('handles focus and blur events', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    // Focus the input and wait for the focus event\n    setTimeout(() => input.focus());\n    const focusEvent = await oneEvent(el, 'focus');\n    expect(focusEvent).to.exist;\n\n    // Blur the input and wait for the blur event\n    setTimeout(() => input.blur());\n    const blurEvent = await oneEvent(el, 'blur');\n    expect(blurEvent).to.exist;\n  });\n\n  it('handles indeterminate state', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    expect(input.indeterminate).to.be.true;\n\n    el.checked = true;\n    el.indeterminate = false;\n    await el.updateComplete;\n    expect(input.indeterminate).to.be.false;\n    expect(input.checked).to.be.true;\n  });\n\n  it('reflects properties to attributes', async () => {\n    const el = await fixture<NileCheckbox>(html`\n      <nile-checkbox\n        name=\"test-name\"\n        title=\"test-title\"\n        disabled\n        required\n        label=\"test-label\"\n        sub-label=\"test-sublabel\"\n        help-text=\"test-help\"\n        error-message=\"test-error\"\n      ></nile-checkbox>\n    `);\n\n    expect(el.getAttribute('name')).to.equal('test-name');\n    expect(el.getAttribute('title')).to.equal('test-title');\n    expect(el.getAttribute('disabled')).to.equal('');\n    expect(el.getAttribute('required')).to.equal('');\n    expect(el.getAttribute('label')).to.equal('test-label');\n    expect(el.getAttribute('sub-label')).to.equal('test-sublabel');\n    expect(el.getAttribute('help-text')).to.equal('test-help');\n    expect(el.getAttribute('error-message')).to.equal('test-error');\n  });\n\n  it('displays help text when showHelpText is true', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text=\"test-help\"></nile-checkbox>`);\n    el.showHelpText = true;\n    await el.updateComplete;\n\n    const helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');\n    expect(helpTextIcon).to.exist;\n  });\n\n  it('updates host class based on helpText', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    el.helpText = 'test-help';\n    await el.updateComplete;\n\n    expect(el.classList.contains('full-width')).to.be.true;\n\n    el.helpText = '';\n    await el.updateComplete;\n\n    expect(el.classList.contains('full-width')).to.be.false;\n  });\n\n  it('emits custom events on connected and disconnected', async () => {\n    const el = document.createElement('nile-checkbox');\n\n    // Wait for the connected event\n    const initEventPromise = oneEvent(el, 'nile-init');\n    document.body.appendChild(el);\n    const initEvent = await initEventPromise;\n    expect(initEvent).to.exist;\n\n    // Wait for the disconnected event\n    const destroyEventPromise = oneEvent(el, 'nile-destroy');\n    document.body.removeChild(el);\n    const destroyEvent = await destroyEventPromise;\n    expect(destroyEvent).to.exist;\n  });\n\n  it('handles required attribute', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox required></nile-checkbox>`);\n    const input = el.shadowRoot!.querySelector('input[type=\"checkbox\"]')! as HTMLInputElement;\n\n    expect(input.required).to.be.true;\n  });\n\n  it('simulates click using click method', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n    el.click();\n    expect(el.checked).to.be.true;\n  });\n\n  it('sets and removes focus using focus and blur methods', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox></nile-checkbox>`);\n\n    // Call the focus method and wait for the focus event\n    setTimeout(() => el.focus());\n    const focusEvent = await oneEvent(el, 'focus');\n    expect(focusEvent).to.exist;\n\n    // Call the blur method and wait for the blur event\n    setTimeout(() => el.blur());\n    const blurEvent = await oneEvent(el, 'blur');\n    expect(blurEvent).to.exist;\n  });\n\n  it('reflects checked attribute to property', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox checked></nile-checkbox>`);\n    expect(el.checked).to.be.true;\n  });\n\n  it('reflects indeterminate attribute to property', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox indeterminate></nile-checkbox>`);\n    expect(el.indeterminate).to.be.true;\n  });\n\n  it('associates form using form attribute', async () => {\n    const el = await fixture(html`\n      <div>\n        <form id=\"test-form\"></form>\n        <nile-checkbox form=\"test-form\"></nile-checkbox>\n      </div>\n    `);\n    const checkbox = el.querySelector('nile-checkbox') as NileCheckbox;\n    expect(checkbox).to.not.be.null;\n    expect(checkbox.getAttribute('form')).to.equal('test-form');\n  });\n\n  it('displays and hides help text correctly', async () => {\n    const el = await fixture<NileCheckbox>(html`<nile-checkbox help-text=\"test-help\"></nile-checkbox>`);\n\n    // Initially, help text should not be shown\n    expect(el.showHelpText).to.be.false;\n\n    // Show the help text\n    el.showHelpText = true;\n    await el.updateComplete;\n    let helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');\n    expect(helpTextIcon).to.exist;\n\n    // Hide the help text\n    el.showHelpText = false;\n    await el.updateComplete;\n    helpTextIcon = el.shadowRoot!.querySelector('.checkbox__helptext-icon');\n    expect(helpTextIcon).to.be.exist;\n  });\n});\n\n"]}

package/dist/src/nile-empty-state/nile-empty-state.css.js

@@ -11,57 +11,95 @@ import { css } from 'lit-element';
 export const styles = css `
   :host {
     display:inline-flex;
-    min-width:300px;
-    max-width:512px;
+    min-width:var(--nile-empty-state-max-width);
+    max-width:var(--nile-empty-state-min-width);
     width:100%;
   }
 
   .empty-state--sm {
     --nile-es-text-size:16px;
+    --nile-es-text-line-height:24px;
     --nile-es-subtext-size:14px;
+    --nile-es-subtext-line-height:20px;
+    
     --nile-es-icon-size:48px;
-    --es-flat-option-border-radius:5px;
+    --nile-es-flat-option-border-radius:5px;
     --nile-es-img-height:118px;
+    --nile-es-img-width:152px;
+
+    --nile-es-gap:var(--nile-spacing-spacing-3xl);
+    --nile-es-body-gap:var(--nile-spacing-spacing-xl);
+    --nile-es-text-gap:0px;
   }
 
   .empty-state--md {
     --nile-es-text-size:18px;
+    --nile-es-text-line-height:28px;
     --nile-es-subtext-size:14px;
+    --nile-es-subtext-line-height:20px;
+
     --nile-es-icon-size:48px;
-    --es-flat-option-border-radius:5px;
+    --nile-es-flat-option-border-radius:5px;
     --nile-es-img-height:128px;
+    --nile-es-img-width:172px;
+
+    --nile-es-gap:var(--nile-spacing-spacing-4xl);
+    --nile-es-body-gap:var(--nile-spacing-spacing-2xl);
+    --nile-es-text-gap:var(--nile-spacing-spacing-md);
   }
 
   .empty-state--lg {
     --nile-es-text-size:20px;
+    --nile-es-text-line-height:30px;
     --nile-es-subtext-size:16px;
+    --nile-es-subtext-line-height:24px;
+
     --nile-es-icon-size:56px;
-    --es-flat-option-border-radius:10px;
+    --nile-es-flat-option-border-radius:10px;
     --nile-es-img-height:160px;
+    --nile-es-img-width:220px;
+
+    --nile-es-gap:var(--nile-spacing-spacing-4xl);
+    --nile-es-body-gap:var(--nile-spacing-spacing-3xl);
+    --nile-es-text-gap:var(--nile-spacing-spacing-md)
   }
 
   .empty-state {
-    padding:1rem;
     min-width:300px;
     max-width:512px;
     width:100%;
     height:max-content;
     display:flex;
     flex-direction:column;
-    row-gap:2rem;
+    row-gap:var(--nile-es-gap);
   }
 
   .empty-state__body {
-    row-gap:5px;
     display:flex;
     flex-direction:column;
     justify-content:space-between;
     align-items:center;
+    row-gap:var(--nile-es-body-gap)
   }
 
   .empty-state__body--content {
     position:relative;
   }
+  .empty-state__image {    
+    background:var(--nile-empty-state-image);
+    background-size: var(--nile-es-img-width) var(--nile-es-img-height);
+    height: var(--nile-es-img-height);
+    width: var(--nile-es-img-width);
+    max-width: 100%;
+  }
+
+  .empty-state__image--grayscale {
+    -webkit-filter: grayscale(100%);
+    -moz-filter: grayscale(100%);
+    -o-filter: grayscale(100%);
+    -ms-filter: grayscale(100%);
+    filter: grayscale(100%);
+  }
 
   .empty-state__img__icon {
     height: var(--nile-es-icon-size);
@@ -70,19 +108,15 @@ export const styles = css `
     display: grid;
     place-items: center;
     background: #34405466;
-  }
-
-  .empty-state__img__icon--abs {
     position:absolute;
     left: calc(50% - calc(var(--nile-es-icon-size) / 2));
-    top:calc(50% - calc(var(--nile-es-icon-size) / 2));
+    top:calc(62.5% - calc(var(--nile-es-icon-size) / 2));
   }
 
   .empty-state__body--tonal {
     background: linear-gradient(180deg, #F9FAFB 0%, #EDF0F3 100%);
-    width: 100px;
-    height: 100px;
-    padding: 1rem;
+    width: 104px;
+    height: 104px;
     border-radius: 50%;
     display:flex;
     justify-content:center;
@@ -90,13 +124,12 @@ export const styles = css `
   }
 
   .empty-state__body--flat {
-    margin:2rem;
   }
 
   .nile-flat-type-icon {
     height:var(--nile-es-icon-size);
     aspect-ratio:1 / 1;
-    border-radius: var(--es-flat-option-border-radius);
+    border-radius: var(--nile-es-flat-option-border-radius);
 
     background-color: white;
     display: grid;
@@ -104,25 +137,33 @@ export const styles = css `
     border: 1px solid #EAECF0;
   }
 
+  .empty__state__text-section {
+    display:flex;
+    flex-direction:column;
+    gap:var(--nile-es-text-gap);
+    max-width:80%;
+  }
+
   .empty-state__text {
     font-size: var(--nile-es-text-size);
     font-weight: 600;
-    line-height: 28px;
+    line-height: var(--nile-es-text-line-height);
     text-align: center;
+    font-style: normal;
   }
 
   .empty-state__subtext {
     font-size: var(--nile-es-subtext-size);
     font-weight: 400;
-    line-height: 20px;
+    line-height: var(--nile-es-subtext-line-height);
     text-align: center;
     color:#475467;
+    font-style: normal;
   }
 
   .empty-state-actions {
     display:flex;
     justify-content:center;
-    gap:1rem;
   }
 `;
 export default [styles];

package/dist/src/nile-empty-state/nile-empty-state.css.js.map

@@ -1 +1 @@
-{"version":3,"file":"nile-empty-state.css.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoHxB,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 * EmptyState CSS\n */\nexport const styles = css`\n  :host {\n    display:inline-flex;\n    min-width:300px;\n    max-width:512px;\n    width:100%;\n  }\n\n  .empty-state--sm {\n    --nile-es-text-size:16px;\n    --nile-es-subtext-size:14px;\n    --nile-es-icon-size:48px;\n    --es-flat-option-border-radius:5px;\n    --nile-es-img-height:118px;\n  }\n\n  .empty-state--md {\n    --nile-es-text-size:18px;\n    --nile-es-subtext-size:14px;\n    --nile-es-icon-size:48px;\n    --es-flat-option-border-radius:5px;\n    --nile-es-img-height:128px;\n  }\n\n  .empty-state--lg {\n    --nile-es-text-size:20px;\n    --nile-es-subtext-size:16px;\n    --nile-es-icon-size:56px;\n    --es-flat-option-border-radius:10px;\n    --nile-es-img-height:160px;\n  }\n\n  .empty-state {\n    padding:1rem;\n    min-width:300px;\n    max-width:512px;\n    width:100%;\n    height:max-content;\n    display:flex;\n    flex-direction:column;\n    row-gap:2rem;\n  }\n\n  .empty-state__body {\n    row-gap:5px;\n    display:flex;\n    flex-direction:column;\n    justify-content:space-between;\n    align-items:center;\n  }\n\n  .empty-state__body--content {\n    position:relative;\n  }\n\n  .empty-state__img__icon {\n    height: var(--nile-es-icon-size);\n    aspect-ratio:1 / 1;\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    background: #34405466;\n  }\n\n  .empty-state__img__icon--abs {\n    position:absolute;\n    left: calc(50% - calc(var(--nile-es-icon-size) / 2));\n    top:calc(50% - calc(var(--nile-es-icon-size) / 2));\n  }\n\n  .empty-state__body--tonal {\n    background: linear-gradient(180deg, #F9FAFB 0%, #EDF0F3 100%);\n    width: 100px;\n    height: 100px;\n    padding: 1rem;\n    border-radius: 50%;\n    display:flex;\n    justify-content:center;\n    align-items:center;\n  }\n\n  .empty-state__body--flat {\n    margin:2rem;\n  }\n\n  .nile-flat-type-icon {\n    height:var(--nile-es-icon-size);\n    aspect-ratio:1 / 1;\n    border-radius: var(--es-flat-option-border-radius);\n\n    background-color: white;\n    display: grid;\n    place-items: center;\n    border: 1px solid #EAECF0;\n  }\n\n  .empty-state__text {\n    font-size: var(--nile-es-text-size);\n    font-weight: 600;\n    line-height: 28px;\n    text-align: center;\n  }\n\n  .empty-state__subtext {\n    font-size: var(--nile-es-subtext-size);\n    font-weight: 400;\n    line-height: 20px;\n    text-align: center;\n    color:#475467;\n  }\n\n  .empty-state-actions {\n    display:flex;\n    justify-content:center;\n    gap:1rem;\n  }\n`;\n\nexport default [styles];"]}
+{"version":3,"file":"nile-empty-state.css.js","sourceRoot":"","sources":["../../../src/nile-empty-state/nile-empty-state.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA6JxB,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 * EmptyState CSS\n */\nexport const styles = css`\n  :host {\n    display:inline-flex;\n    min-width:var(--nile-empty-state-max-width);\n    max-width:var(--nile-empty-state-min-width);\n    width:100%;\n  }\n\n  .empty-state--sm {\n    --nile-es-text-size:16px;\n    --nile-es-text-line-height:24px;\n    --nile-es-subtext-size:14px;\n    --nile-es-subtext-line-height:20px;\n    \n    --nile-es-icon-size:48px;\n    --nile-es-flat-option-border-radius:5px;\n    --nile-es-img-height:118px;\n    --nile-es-img-width:152px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-3xl);\n    --nile-es-body-gap:var(--nile-spacing-spacing-xl);\n    --nile-es-text-gap:0px;\n  }\n\n  .empty-state--md {\n    --nile-es-text-size:18px;\n    --nile-es-text-line-height:28px;\n    --nile-es-subtext-size:14px;\n    --nile-es-subtext-line-height:20px;\n\n    --nile-es-icon-size:48px;\n    --nile-es-flat-option-border-radius:5px;\n    --nile-es-img-height:128px;\n    --nile-es-img-width:172px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl);\n    --nile-es-body-gap:var(--nile-spacing-spacing-2xl);\n    --nile-es-text-gap:var(--nile-spacing-spacing-md);\n  }\n\n  .empty-state--lg {\n    --nile-es-text-size:20px;\n    --nile-es-text-line-height:30px;\n    --nile-es-subtext-size:16px;\n    --nile-es-subtext-line-height:24px;\n\n    --nile-es-icon-size:56px;\n    --nile-es-flat-option-border-radius:10px;\n    --nile-es-img-height:160px;\n    --nile-es-img-width:220px;\n\n    --nile-es-gap:var(--nile-spacing-spacing-4xl);\n    --nile-es-body-gap:var(--nile-spacing-spacing-3xl);\n    --nile-es-text-gap:var(--nile-spacing-spacing-md)\n  }\n\n  .empty-state {\n    min-width:300px;\n    max-width:512px;\n    width:100%;\n    height:max-content;\n    display:flex;\n    flex-direction:column;\n    row-gap:var(--nile-es-gap);\n  }\n\n  .empty-state__body {\n    display:flex;\n    flex-direction:column;\n    justify-content:space-between;\n    align-items:center;\n    row-gap:var(--nile-es-body-gap)\n  }\n\n  .empty-state__body--content {\n    position:relative;\n  }\n  .empty-state__image {    \n    background:var(--nile-empty-state-image);\n    background-size: var(--nile-es-img-width) var(--nile-es-img-height);\n    height: var(--nile-es-img-height);\n    width: var(--nile-es-img-width);\n    max-width: 100%;\n  }\n\n  .empty-state__image--grayscale {\n    -webkit-filter: grayscale(100%);\n    -moz-filter: grayscale(100%);\n    -o-filter: grayscale(100%);\n    -ms-filter: grayscale(100%);\n    filter: grayscale(100%);\n  }\n\n  .empty-state__img__icon {\n    height: var(--nile-es-icon-size);\n    aspect-ratio:1 / 1;\n    border-radius: 50%;\n    display: grid;\n    place-items: center;\n    background: #34405466;\n    position:absolute;\n    left: calc(50% - calc(var(--nile-es-icon-size) / 2));\n    top:calc(62.5% - calc(var(--nile-es-icon-size) / 2));\n  }\n\n  .empty-state__body--tonal {\n    background: linear-gradient(180deg, #F9FAFB 0%, #EDF0F3 100%);\n    width: 104px;\n    height: 104px;\n    border-radius: 50%;\n    display:flex;\n    justify-content:center;\n    align-items:center;\n  }\n\n  .empty-state__body--flat {\n  }\n\n  .nile-flat-type-icon {\n    height:var(--nile-es-icon-size);\n    aspect-ratio:1 / 1;\n    border-radius: var(--nile-es-flat-option-border-radius);\n\n    background-color: white;\n    display: grid;\n    place-items: center;\n    border: 1px solid #EAECF0;\n  }\n\n  .empty__state__text-section {\n    display:flex;\n    flex-direction:column;\n    gap:var(--nile-es-text-gap);\n    max-width:80%;\n  }\n\n  .empty-state__text {\n    font-size: var(--nile-es-text-size);\n    font-weight: 600;\n    line-height: var(--nile-es-text-line-height);\n    text-align: center;\n    font-style: normal;\n  }\n\n  .empty-state__subtext {\n    font-size: var(--nile-es-subtext-size);\n    font-weight: 400;\n    line-height: var(--nile-es-subtext-line-height);\n    text-align: center;\n    color:#475467;\n    font-style: normal;\n  }\n\n  .empty-state-actions {\n    display:flex;\n    justify-content:center;\n  }\n`;\n\nexport default [styles];"]}

package/dist/src/nile-empty-state/nile-empty-state.d.ts

@@ -18,10 +18,10 @@ export declare class NileEmptyState extends NileElement {
      * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
      */
     static get styles(): CSSResultArray;
-    private readonly hasSlotController;
     size: 'sm' | 'md' | 'lg';
     variant: 'flat' | 'content' | 'tonal';
     icon: string;
+    grayscale: boolean;
     text: String;
     subText: String;
     /**