@aquera/nile-elements 0.0.68 → 0.0.70

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

@@ -1 +1 @@
-{"version":3,"file":"nile-checkbox.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\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"],"names":["NileCheckbox","p","constructor","super","this","hasFocus","title","name","size","disabled","checked","label","indeterminate","defaultChecked","helpText","errorMessage","showHelpText","form","required","_this","_inherits","_d","_createClass","key","value","toggleHelpText","handleClick","dispatchEvent","CustomEvent","composed","bubbles","detail","handleBlur","emit","handleInput","handleFocus","handleStateChange","input","click","focus","options","blur","connectedCallback","updateHostClass","disconnectedCallback","updated","changedProperties","has","classList","add","remove","render","hasHelpText","hasErrorMessage","html","_templateObject","_taggedTemplateLiteral","classMap","checkbox","ifDefined","live","_templateObject2","_templateObject3","_templateObject4","_templateObject5","NileElement","styles","__decorate","query","prototype","state","property","reflect","type","Boolean","String","defaultValue","attribute","watch","waitUntilFirstUpdate","customElement"],"mappings":"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"}
+{"version":3,"file":"nile-checkbox.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\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"],"names":["NileCheckbox","m","super","this","hasFocus","title","name","size","disabled","checked","label","subLabel","indeterminate","defaultChecked","helpText","errorMessage","showHelpText","form","required","_this","_inherits","_d","_createClass","key","value","handleClick","dispatchEvent","CustomEvent","composed","bubbles","detail","handleBlur","emit","handleInput","handleFocus","handleStateChange","input","click","focus","options","blur","connectedCallback","updateHostClass","disconnectedCallback","updated","changedProperties","has","classList","add","remove","render","hasHelpText","hasErrorMessage","html","_templateObject","_taggedTemplateLiteral","classMap","checkbox","ifDefined","live","_templateObject2","_templateObject3","_templateObject4","_templateObject5","_templateObject6","_templateObject7","NileElement","styles","__decorate","query","prototype","state","property","reflect","type","Boolean","String","attribute","defaultValue","watch","waitUntilFirstUpdate","_export","customElement"],"mappings":"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"}

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

@@ -1,2 +1,2 @@
-System.register(["../index-c7ad3b47.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,o;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function execute(){_export("s",o=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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"]))));}};});
+System.register(["../index-c7ad3b47.cjs.js"],function(_export,_context){"use strict";var e,_templateObject,o;function _taggedTemplateLiteral(strings,raw){if(!raw){raw=strings.slice(0);}return Object.freeze(Object.defineProperties(strings,{raw:{value:Object.freeze(raw)}}));}return{setters:[function(_index001CjsJs){e=_index001CjsJs.i;}],execute:function execute(){_export("s",o=e(_templateObject||(_templateObject=_taggedTemplateLiteral(["\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"]))));}};});
 //# sourceMappingURL=nile-checkbox.css.cjs.js.map

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

@@ -1 +1 @@
-{"version":3,"file":"nile-checkbox.css.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"wXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}
+{"version":3,"file":"nile-checkbox.css.cjs.js","sources":["../../../src/nile-checkbox/nile-checkbox.css.ts"],"sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-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"],"names":["styles","css","_templateObject","_taggedTemplateLiteral"],"mappings":"wXAYaA,CAAAA,CAASC,CAAG,CAAAC,eAAA,GAAAA,eAAA,CAAAC,sBAAA"}

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

@@ -10,7 +10,7 @@ import{i as e}from"../index-0a3007c5.esm.js";const o=e`
   .checkbox {
     position: relative;
     display: inline-flex;
-    align-items: top;
+    align-items: stretch;
     font-weight: 400;
     color: var(--nile-colors-dark-900);
     vertical-align: middle;
@@ -18,6 +18,7 @@ import{i as e}from"../index-0a3007c5.esm.js";const o=e`
   }
 
   .checkbox--medium {
+    padding-top: 2px;
     --toggle-size: var(--nile-type-scale-3);
     font-size: var(--nile-type-scale-3);
   }
@@ -32,7 +33,7 @@ import{i as e}from"../index-0a3007c5.esm.js";const o=e`
     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: 4px;
+    border-radius: 3px;
     transition: var(--nile-transition-duration-default border-color),
       var(--nile-transition-duration-default) background-color,
       var(--nile-transition-duration-default) color,
@@ -98,20 +99,33 @@ import{i as e}from"../index-0a3007c5.esm.js";const o=e`
     opacity: 0.3;
     cursor: not-allowed;
   }
-  
 
   .checkbox__label {
-    display: inline-block;
-    line-height: 14px;
-    font-size: 14px;
-    margin-inline-start: 0.5em;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    font-family: var(--nile-font-family-serif);
+    margin-left: 8px;
     user-select: none;
-    margin-top: 2px;
     color: var(--nile-colors-dark-900);
-    font-family: Colfax-regular;
     font-style: normal;
-    font-weight: 400;
     letter-spacing: 0.2px;
+    box-sizing: border-box;
+  }
+
+  .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;
   }
 
   :host([required]) .checkbox__label::after {

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

@@ -1,4 +1,4 @@
-import{__decorate as e}from"tslib";import{x as t}from"../index-0a3007c5.esm.js";import{query as i,state as s,customElement as o}from"lit/decorators.js";import{s as l}from"./nile-checkbox.css.esm.js";import{classMap as c}from"lit/directives/class-map.js";import{d as h}from"../internal/default-value.esm.js";import{ifDefined as r}from"lit/directives/if-defined.js";import{live as n}from"lit/directives/live.js";import{w as a}from"../internal/watch.esm.js";import{N as d}from"../internal/nile-element.esm.js";import{n as m}from"../property-09139d3c.esm.js";import"lit";let p=class extends d{constructor(){super(),this.hasFocus=!1,this.title="",this.name="",this.size="medium",this.disabled=!1,this.checked=!1,this.label="",this.indeterminate=!1,this.defaultChecked=!1,this.helpText="",this.errorMessage="",this.showHelpText=!1,this.form="",this.required=!1}toggleHelpText(){this.showHelpText=!this.showHelpText}handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.dispatchEvent(new CustomEvent("valueChange",{composed:!0,bubbles:!0,detail:{checked:this.checked}}))}handleBlur(){this.hasFocus=!1,this.emit("blur")}handleInput(){this.emit("input")}handleFocus(){this.hasFocus=!0,this.emit("focus")}handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate}click(){this.input.click()}focus(e){this.input.focus(e)}blur(){this.input.blur()}connectedCallback(){super.connectedCallback(),this.updateHostClass(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(e){super.updated(e),e.has("helpText")&&this.updateHostClass()}updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width")}render(){const e=!!this.helpText,i=!!this.errorMessage;return t`
+import{__decorate as e}from"tslib";import{x as t}from"../index-0a3007c5.esm.js";import{query as i,state as s,customElement as o}from"lit/decorators.js";import{s as l}from"./nile-checkbox.css.esm.js";import{classMap as c}from"lit/directives/class-map.js";import{d as h}from"../internal/default-value.esm.js";import{ifDefined as r}from"lit/directives/if-defined.js";import{live as n}from"lit/directives/live.js";import{w as a}from"../internal/watch.esm.js";import{N as d}from"../internal/nile-element.esm.js";import{n as m}from"../property-09139d3c.esm.js";import"lit";let p=class extends d{constructor(){super(),this.hasFocus=!1,this.title="",this.name="",this.size="medium",this.disabled=!1,this.checked=!1,this.label="",this.subLabel="",this.indeterminate=!1,this.defaultChecked=!1,this.helpText="",this.errorMessage="",this.showHelpText=!1,this.form="",this.required=!1}handleClick(){this.checked=!this.checked,this.indeterminate=!1,this.dispatchEvent(new CustomEvent("valueChange",{composed:!0,bubbles:!0,detail:{checked:this.checked}}))}handleBlur(){this.hasFocus=!1,this.emit("blur")}handleInput(){this.emit("input")}handleFocus(){this.hasFocus=!0,this.emit("focus")}handleStateChange(){this.input.checked=this.checked,this.input.indeterminate=this.indeterminate}click(){this.input.click()}focus(e){this.input.focus(e)}blur(){this.input.blur()}connectedCallback(){super.connectedCallback(),this.updateHostClass(),this.emit("nile-init")}disconnectedCallback(){super.disconnectedCallback(),this.emit("nile-destroy")}updated(e){super.updated(e),e.has("helpText")&&this.updateHostClass()}updateHostClass(){this.helpText?this.classList.add("full-width"):this.classList.remove("full-width")}render(){const e=!!this.helpText,i=!!this.errorMessage;return t`
       <label
         part="base"
         class=${c({checkbox:!0,"checkbox--checked":this.checked,"checkbox--disabled":this.disabled,"checkbox--focused":this.hasFocus,"checkbox--indeterminate":this.indeterminate,"checkbox--medium":"medium"===this.size})}
@@ -47,7 +47,8 @@ import{__decorate as e}from"tslib";import{x as t}from"../index-0a3007c5.esm.js";
         </span>
 
         <div part="label" class="checkbox__label">
-          ${"boolean"==typeof this.label?"":this.label}
+          ${this.label?t`<span class="checkbox__label__text">${this.label}</span>`:""}
+          ${this.label&&this.subLabel?t`<span class="checkbox__sublabel__text">${this.subLabel}</span>`:""}
           <slot></slot>
         </div>
       </label>
@@ -60,10 +61,9 @@ import{__decorate as e}from"tslib";import{x as t}from"../index-0a3007c5.esm.js";
               ></nile-icon>
             </nile-tooltip>
           `:""}
-
       ${i?t`
             <nile-form-error-message
               >${this.errorMessage}</nile-form-error-message
             >
           `:""}
-    `}};p.styles=l,e([i('input[type="checkbox"]')],p.prototype,"input",void 0),e([s()],p.prototype,"hasFocus",void 0),e([m()],p.prototype,"title",void 0),e([m()],p.prototype,"name",void 0),e([m()],p.prototype,"value",void 0),e([m({reflect:!0})],p.prototype,"size",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"checked",void 0),e([m({type:String,reflect:!0})],p.prototype,"label",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"indeterminate",void 0),e([h("checked")],p.prototype,"defaultChecked",void 0),e([m({attribute:"help-text",reflect:!0})],p.prototype,"helpText",void 0),e([m({attribute:"error-message",reflect:!0})],p.prototype,"errorMessage",void 0),e([m({type:Boolean})],p.prototype,"showHelpText",void 0),e([m({reflect:!0})],p.prototype,"form",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([a(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],p.prototype,"handleStateChange",null),p=e([o("nile-checkbox")],p);export{p as N};
+    `}};p.styles=l,e([i('input[type="checkbox"]')],p.prototype,"input",void 0),e([s()],p.prototype,"hasFocus",void 0),e([m()],p.prototype,"title",void 0),e([m()],p.prototype,"name",void 0),e([m()],p.prototype,"value",void 0),e([m({reflect:!0})],p.prototype,"size",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"disabled",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"checked",void 0),e([m({type:String,reflect:!0})],p.prototype,"label",void 0),e([m({type:String,reflect:!0,attribute:"sub-label"})],p.prototype,"subLabel",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"indeterminate",void 0),e([h("checked")],p.prototype,"defaultChecked",void 0),e([m({attribute:"help-text",reflect:!0})],p.prototype,"helpText",void 0),e([m({attribute:"error-message",reflect:!0})],p.prototype,"errorMessage",void 0),e([m({type:Boolean})],p.prototype,"showHelpText",void 0),e([m({reflect:!0})],p.prototype,"form",void 0),e([m({type:Boolean,reflect:!0})],p.prototype,"required",void 0),e([a(["checked","indeterminate"],{waitUntilFirstUpdate:!0})],p.prototype,"handleStateChange",null),p=e([o("nile-checkbox")],p);export{p as N};