@aquera/nile-elements 0.0.6 → 0.0.7

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

@@ -0,0 +1,80 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, property, } from 'lit-element';
+import { styles } from './nile-badge.css';
+import '../nile-icon-button/nile-icon-button';
+import { classMap } from 'lit/directives/class-map.js';
+import { customElement } from 'lit/decorators.js';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-badge
+ *
+ */
+/**
+ * @summary badges are used as labels to organize things or to indicate a selection.
+ * @status stable
+ *
+ * @dependency nile-icon-button
+ *
+ * @slot - The badge's content.
+ *
+ * @event nile-remove - Emitted when the remove button is activated.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart content - The badge's content.
+ * @csspart remove-button - The badge's remove button, an `<nile-icon-button>`.
+ * @csspart remove-button__base - The remove button's exported `base` part.
+ */
+let NileBadge = class NileBadge extends NileElement {
+    constructor() {
+        super(...arguments);
+        /** The badge's theme variant. */
+        this.variant = 'normal';
+        /** Draws a pill-style badge with rounded edges. */
+        this.rounded = false;
+    }
+    render() {
+        return html `
+      <span
+        part="base"
+        class=${classMap({
+            badge: true,
+            // Types
+            'badge--primary': this.variant === 'primary',
+            'badge--success': this.variant === 'success',
+            'badge--normal': this.variant === 'normal',
+            'badge--warning': this.variant === 'warning',
+            'badge--error': this.variant === 'error',
+            'badge--info': this.variant === 'info',
+            'badge--rounded': this.rounded,
+        })}
+      >
+
+
+        <slot  part="content" class="badge__content"></slot>
+
+
+      </span>
+    `;
+    }
+};
+NileBadge.styles = styles;
+__decorate([
+    property({ reflect: true })
+], NileBadge.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileBadge.prototype, "rounded", void 0);
+NileBadge = __decorate([
+    customElement('nile-badge')
+], NileBadge);
+export { NileBadge };
+export default NileBadge;
+//# sourceMappingURL=nile-badge.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-badge.js","sourceRoot":"","sources":["../../../src/nile-badge/nile-badge.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;;AAEH,OAAO,EAEL,IAAI,EACJ,QAAQ,GAGT,MAAM,aAAa,CAAC;AACrB,OAAO,EAAE,MAAM,EAAE,MAAM,kBAAkB,CAAC;AAC1C,OAAO,sCAAsC,CAAC;AAC9C,OAAO,EAAE,QAAQ,EAAE,MAAM,6BAA6B,CAAC;AACvD,OAAO,EAAE,aAAa,EAAE,MAAM,mBAAmB,CAAC;AAClD,OAAO,WAAW,MAAM,0BAA0B,CAAC;AAEnD;;;;;GAKG;AAEH;;;;;;;;;;;;;;GAcG;AAGI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,WAAW;IAAnC;;QAGL,iCAAiC;QACJ,YAAO,GAMvB,QAAQ,CAAC;QAEtB,mDAAmD;QACP,YAAO,GAAG,KAAK,CAAC;IA4B9D,CAAC;IAzBC,MAAM;QACJ,OAAO,IAAI,CAAA;;;gBAGC,QAAQ,CAAC;YACf,KAAK,EAAE,IAAI;YAEX,QAAQ;YACR,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,eAAe,EAAE,IAAI,CAAC,OAAO,KAAK,QAAQ;YAC1C,gBAAgB,EAAE,IAAI,CAAC,OAAO,KAAK,SAAS;YAC5C,cAAc,EAAE,IAAI,CAAC,OAAO,KAAK,OAAO;YACxC,aAAa,EAAE,IAAI,CAAC,OAAO,KAAK,MAAM;YACtC,gBAAgB,EAAE,IAAI,CAAC,OAAO;SAC/B,CAAC;;;;;;;;KAQL,CAAC;IACJ,CAAC;;AAvCM,gBAAM,GAAmB,MAAM,CAAC;AAGV;IAA5B,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAMN;AAGsB;IAA3C,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;0CAAiB;AAbjD,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CAyCrB;SAzCY,SAAS;AA2CtB,eAAe,SAAS,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {\n  LitElement,\n  html,\n  property,\n  CSSResultArray,\n  TemplateResult,\n} from 'lit-element';\nimport { styles } from './nile-badge.css';\nimport '../nile-icon-button/nile-icon-button';\nimport { classMap } from 'lit/directives/class-map.js';\nimport { customElement } from 'lit/decorators.js';\nimport NileElement from '../internal/nile-element';\nimport type { CSSResultGroup } from 'lit';\n/**\n * Nile icon component.\n *\n * @tag nile-badge\n *\n */\n\n/**\n * @summary badges are used as labels to organize things or to indicate a selection.\n * @status stable\n *\n * @dependency nile-icon-button\n *\n * @slot - The badge's content.\n *\n * @event nile-remove - Emitted when the remove button is activated.\n *\n * @csspart base - The component's base wrapper.\n * @csspart content - The badge's content.\n * @csspart remove-button - The badge's remove button, an `<nile-icon-button>`.\n * @csspart remove-button__base - The remove button's exported `base` part.\n */\n\n@customElement('nile-badge')\nexport class NileBadge extends NileElement {\n  static styles: CSSResultGroup = styles;\n\n  /** The badge's theme variant. */\n  @property({ reflect: true }) variant:\n    | 'primary'\n    | 'success'\n    | 'normal'\n    | 'warning'\n    | 'error'\n    | 'info' = 'normal';\n\n  /** Draws a pill-style badge with rounded edges. */\n  @property({ type: Boolean, reflect: true }) rounded = false;\n\n\n  render() {\n    return html`\n      <span\n        part=\"base\"\n        class=${classMap({\n          badge: true,\n\n          // Types\n          'badge--primary': this.variant === 'primary',\n          'badge--success': this.variant === 'success',\n          'badge--normal': this.variant === 'normal',\n          'badge--warning': this.variant === 'warning',\n          'badge--error': this.variant === 'error',\n          'badge--info': this.variant === 'info',\n          'badge--rounded': this.rounded,\n        })}\n      >\n\n\n        <slot  part=\"content\" class=\"badge__content\"></slot>\n\n\n      </span>\n    `;\n  }\n}\n\nexport default NileBadge;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-badge': NileBadge;\n  }\n}\n"]}

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

@@ -144,7 +144,7 @@ export const styles = css `
   .button--standard.button--tertiary {
     background-color: var(--nile-colors-white-base);
     border-color: var(--nile-colors-neutral-500);
-    color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-dark-900);
     box-shadow: 0px 2px 4px var(--nile-colors-dark-200);
   }
 
@@ -216,7 +216,7 @@ export const styles = css `
   }
 
   .button--outline.button--secondary:active:not(.button--disabled) {
-    border-color: var(--nile-colors-primary-700);
+    border-color: var(--nile-colors-neutral-700);
     color: var(--nile-colors-white-base);
   }
 

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

@@ -1 +1 @@
-{"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkYxB,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 * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: 1px;\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    padding: var(--nile-spacing-2-x);\n    gap: var(--nile-spacing-2-x);\n    border-radius: var(--nile-radius-base-standard);\n    line-height: var(--nile-type-scale-3);\n    box-sizing: border-box;\n    height: 38px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-900);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border : none;\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-neutral-900);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-900);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    box-shadow: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-700);\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-900);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n    box-shadow: none;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-neutral-700);\n    box-shadow: 0px 2px 4px var(--nile-colors-dark-200);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-700);\n  }\n  .button--standard.button--tertiary.button--disabled {\n    border-color: #e5e9eb;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-700);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: #e5e9eb;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-700);\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n    /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n`;\n"]}
+{"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAkYxB,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 * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    border-style: solid;\n    border-width: 1px;\n    font-style: normal;\n    font-weight: var(--nile-font-weight-regular);\n    font-family: var(--nile-font-family-serif);\n    font-size: var(--nile-type-scale-3);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n    padding: var(--nile-spacing-2-x);\n    gap: var(--nile-spacing-2-x);\n    border-radius: var(--nile-radius-base-standard);\n    line-height: var(--nile-type-scale-3);\n    box-sizing: border-box;\n    height: 38px;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__label::slotted(nile-icon) {\n    /* vertical-align: -2px; */\n  }\n\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-900);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border : none;\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-neutral-900);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-900);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    box-shadow: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-700);\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-900);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-700);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n    box-shadow: none;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-dark-900);\n    box-shadow: 0px 2px 4px var(--nile-colors-dark-200);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-700);\n  }\n  .button--standard.button--tertiary.button--disabled {\n    border-color: #e5e9eb;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-700);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    border-color: #e5e9eb;\n    background-color: var(--nile-colors-white-base);\n    color: var(--nile-colors-neutral-700);\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n    /*\n   * Outline buttons\n   */\n\n  .button--outline {\n    background: none;\n    border: solid 2px;\n  }\n\n  /* Default */\n  .button--outline.button--secondary {\n    border-color: var(--nile-colors-neutral-300);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--outline.button--secondary:hover:not(.button--disabled),\n  .button--outline.button--secondary.button--checked:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--secondary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Primary */\n  .button--outline.button--primary {\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-primary-600);\n  }\n\n  .button--outline.button--primary:hover:not(.button--disabled),\n  .button--outline.button--primary.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--primary:active:not(.button--disabled) {\n    border-color: var(--nile-colors-primary-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Success */\n  .button--outline.button--success {\n    border-color: var(--nile-colors-green-600);\n    color: var(--nile-colors-green-600);\n  }\n\n  .button--outline.button--success:hover:not(.button--disabled),\n  .button--outline.button--success.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--success:active:not(.button--disabled) {\n    border-color: var(--nile-colors-green-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Neutral */\n  .button--outline.button--neutral {\n    border-color: var(--nile-colors-neutral-600);\n    color: var(--nile-colors-neutral-600);\n  }\n\n  .button--outline.button--neutral:hover:not(.button--disabled),\n  .button--outline.button--neutral.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--neutral:active:not(.button--disabled) {\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Warning */\n  .button--outline.button--warning {\n    border-color: var(--nile-colors-orange-600);\n    color: var(--nile-colors-orange-600);\n  }\n\n  .button--outline.button--warning:hover:not(.button--disabled),\n  .button--outline.button--warning.button--checked:not(.button--disabled) {\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--outline.button--warning:active:not(.button--disabled) {\n    border-color: var(--nile-colors-orange-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  /* Danger */\n  .button--outline.button--danger {\n    border-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-red-600);\n  }\n\n  .button--outline.button--danger:hover:not(.button--disabled),\n  .button--outline.button--danger.button--checked:not(.button--disabled) {\n    background-color: var(--nile-colors-red-600);\n    color: var(--nile-colors-white-base);\n  }\n\n .button--outline.button--danger:active:not(.button--disabled) {\n    border-color: var(--nile-colors-red-700);\n    background-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  @media (forced-colors: active) {\n    .button.button--outline.button--checked:not(.button--disabled) {\n      outline: solid 2px transparent;\n    }\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n`;\n"]}

package/dist/src/nile-button-toggle/index.d.ts

@@ -0,0 +1 @@
+export { NileButtonToggle } from './nile-button-toggle';

package/dist/src/nile-button-toggle/index.js

@@ -0,0 +1,2 @@
+export { NileButtonToggle } from './nile-button-toggle';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-button-toggle/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,gBAAgB,EAAE,MAAM,sBAAsB,CAAC","sourcesContent":["export { NileButtonToggle } from './nile-button-toggle';\n"]}

package/dist/src/nile-button-toggle/nile-button-toggle.css.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * ButtonToggle CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;

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

@@ -0,0 +1,56 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit-element';
+/**
+ * ButtonToggle CSS
+ */
+export const styles = css `
+  :host {
+  }
+
+  .nile-button-toggle {
+    display: flex;
+    padding: 12px;
+    border: 1px solid #ccc;
+    cursor: pointer;
+    border-radius: 4px;
+    color: #000;
+    text-align: center;
+    font-family: Colfax-regular;
+    font-size: 14px;
+    line-height: 14px;
+    letter-spacing: 0.2px;
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+  }
+
+  .nile-button-toggle__initial {
+    border-radius: 4px 0 0 4px;
+  }
+
+  .nile-button-toggle__end {
+    border-radius: 0 4px 4px 0;
+  }
+
+  .nile-button-toggle__middle {
+    border-width: 1px 0px;
+    border-style: solid;
+    border-color: #ccc;
+    border-radius: 0;
+  }
+
+  .nile-button-toggle__active {
+    background-color: #c7ced4;
+  }
+
+  .nile-button-toggle__disabled {
+    cursor: not-allowed;
+  }
+`;
+export default [styles];
+//# sourceMappingURL=nile-button-toggle.css.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"nile-button-toggle.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA2CxB,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 * ButtonToggle CSS\n */\nexport const styles = css`\n  :host {\n  }\n\n  .nile-button-toggle {\n    display: flex;\n    padding: 12px;\n    border: 1px solid #ccc;\n    cursor: pointer;\n    border-radius: 4px;\n    color: #000;\n    text-align: center;\n    font-family: Colfax-regular;\n    font-size: 14px;\n    line-height: 14px;\n    letter-spacing: 0.2px;\n    justify-content: center;\n    align-items: center;\n    gap: 10px;\n  }\n\n  .nile-button-toggle__initial {\n    border-radius: 4px 0 0 4px;\n  }\n\n  .nile-button-toggle__end {\n    border-radius: 0 4px 4px 0;\n  }\n\n  .nile-button-toggle__middle {\n    border-width: 1px 0px;\n    border-style: solid;\n    border-color: #ccc;\n    border-radius: 0;\n  }\n\n  .nile-button-toggle__active {\n    background-color: #c7ced4;\n  }\n\n  .nile-button-toggle__disabled {\n    cursor: not-allowed;\n  }\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-button-toggle/nile-button-toggle.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult } from 'lit-element';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-button-toggle
+ *
+ */
+export declare class NileButtonToggle extends NileElement {
+    /**
+     * The styles for ButtonToggle
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    active: boolean;
+    initial: boolean;
+    middle: boolean;
+    end: boolean;
+    disabled: boolean;
+    value: string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    toggle(): void;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render(): TemplateResult;
+}
+export default NileButtonToggle;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-button-toggle': NileButtonToggle;
+    }
+}

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

@@ -0,0 +1,104 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, property } from 'lit-element';
+import { customElement } from 'lit/decorators.js';
+import { styles } from './nile-button-toggle.css';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-button-toggle
+ *
+ */
+let NileButtonToggle = class NileButtonToggle extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.active = false;
+        this.initial = false;
+        this.middle = false;
+        this.end = false;
+        this.disabled = false;
+        this.value = '';
+        /* #endregion */
+    }
+    /**
+     * The styles for ButtonToggle
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.addEventListener('click', this.toggle);
+    }
+    disconnectedCallback() {
+        this.removeEventListener('click', this.toggle);
+        super.disconnectedCallback();
+    }
+    toggle() {
+        if (this.disabled)
+            return;
+        this.active = true;
+        const eventData = { active: this.active, value: this.value };
+        this.dispatchEvent(new CustomEvent('nile-toggle-changed', { detail: eventData, bubbles: true }));
+    }
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        let classes = ['nile-button-toggle'];
+        if (this.active) {
+            classes.push('nile-button-toggle__active');
+        }
+        if (this.initial) {
+            classes.push('nile-button-toggle__initial');
+        }
+        if (this.middle) {
+            classes.push('nile-button-toggle__middle');
+        }
+        if (this.end) {
+            classes.push('nile-button-toggle__end');
+        }
+        if (this.disabled) {
+            classes.push('nile-button-toggle__disabled');
+        }
+        const classString = classes.join(' ');
+        return html `
+      <div class="${classString}">
+        <slot name="prefix"></slot>
+        <slot> </slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileButtonToggle.prototype, "active", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileButtonToggle.prototype, "initial", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileButtonToggle.prototype, "middle", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileButtonToggle.prototype, "end", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileButtonToggle.prototype, "disabled", void 0);
+__decorate([
+    property({ type: String })
+], NileButtonToggle.prototype, "value", void 0);
+NileButtonToggle = __decorate([
+    customElement('nile-button-toggle')
+], NileButtonToggle);
+export { NileButtonToggle };
+export default NileButtonToggle;
+//# sourceMappingURL=nile-button-toggle.js.map

package/dist/src/nile-button-toggle/nile-button-toggle.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-button-toggle.js","sourceRoot":"","sources":["../../../src/nile-button-toggle/nile-button-toggle.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement } from 'lit/decorators.js';\nimport {styles} from './nile-button-toggle.css';\nimport NileElement from '../internal/nile-element';\n\n/**\n * Nile icon component.\n *\n * @tag nile-button-toggle\n *\n */\n@customElement('nile-button-toggle')\nexport class NileButtonToggle extends NileElement {\n\n\t/**\n\t * The styles for ButtonToggle\n\t * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n\t */\n\tpublic static get styles(): CSSResultArray {\n\t\treturn [styles];\n\t}\n\n  @property({ type: Boolean, reflect: true })\n  active = false;\n\n  @property({ type: Boolean, reflect: true })\n  initial = false;\n\n  @property({ type: Boolean, reflect: true })\n  middle = false;\n\n  @property({ type: Boolean, reflect: true })\n  end = false;\n\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  @property({ type: String })\n  value = '';\n\n  connectedCallback() {\n    super.connectedCallback();\n    this.addEventListener('click', this.toggle);\n  }\n\n  disconnectedCallback() {\n    this.removeEventListener('click', this.toggle);\n    super.disconnectedCallback();\n  }\n\n  toggle() {\n    if (this.disabled) return;\n    this.active = true;\n    const eventData = { active: this.active, value: this.value };\n    this.dispatchEvent(new CustomEvent('nile-toggle-changed', { detail: eventData, bubbles: true }));\n  }\n\n\t/**\n\t * Render method\n\t * @slot This is a slot test\n\t */\n  public render(): TemplateResult {\n    let classes = ['nile-button-toggle'];\n    if (this.active) {\n      classes.push('nile-button-toggle__active');\n    }\n    if (this.initial) {\n      classes.push('nile-button-toggle__initial');\n    }\n    if (this.middle) {\n      classes.push('nile-button-toggle__middle');\n    }\n    if (this.end) {\n      classes.push('nile-button-toggle__end');\n    }\n    if (this.disabled) {\n      classes.push('nile-button-toggle__disabled');\n    }\n\n    const classString = classes.join(' ');\n\n    return html`\n      <div class=\"${classString}\">\n        <slot name=\"prefix\"></slot>\n        <slot> </slot>\n      </div>\n    `;\n  }\n\n\t/* #endregion */\n}\n\nexport default NileButtonToggle;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-button-toggle': NileButtonToggle;\n  }\n}\n"]}

package/dist/src/nile-button-toggle-group/index.d.ts

@@ -0,0 +1 @@
+export { NileButtonToggleGroup } from './nile-button-toggle-group';

package/dist/src/nile-button-toggle-group/index.js

@@ -0,0 +1,2 @@
+export { NileButtonToggleGroup } from './nile-button-toggle-group';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-button-toggle-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-button-toggle-group/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,4BAA4B,CAAC","sourcesContent":["export { NileButtonToggleGroup } from './nile-button-toggle-group';\n"]}

package/dist/src/nile-button-toggle-group/nile-button-toggle-group.css.d.ts

@@ -0,0 +1,12 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+/**
+ * ButtonToggleGroup CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;

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

@@ -0,0 +1,17 @@
+/**
+* Copyright Aquera Inc 2023
+*
+* This source code is licensed under the BSD-3-Clause license found in the
+* LICENSE file in the root directory of this source tree.
+*/
+import { css } from 'lit-element';
+/**
+ * ButtonToggleGroup CSS
+ */
+export const styles = css `
+	:host {
+    display: inline-flex;
+	}
+`;
+export default [styles];
+//# sourceMappingURL=nile-button-toggle-group.css.js.map

package/dist/src/nile-button-toggle-group/nile-button-toggle-group.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-button-toggle-group.css.js","sourceRoot":"","sources":["../../../src/nile-button-toggle-group/nile-button-toggle-group.css.ts"],"names":[],"mappings":"AAAA;;;;;EAKE;AAEF,OAAO,EAAC,GAAG,EAAC,MAAM,aAAa,CAAC;AAEhC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;CAIxB,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 * ButtonToggleGroup CSS\n */\nexport const styles = css`\n\t:host {\n    display: inline-flex;\n\t}\n`;\n\nexport default [styles];\n"]}

package/dist/src/nile-button-toggle-group/nile-button-toggle-group.d.ts

@@ -0,0 +1,41 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { CSSResultArray, TemplateResult } from 'lit-element';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-button-toggle-group
+ *
+ */
+export declare class NileButtonToggleGroup extends NileElement {
+    /**
+     * The styles for ButtonToggleGroup
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles(): CSSResultArray;
+    private toggles;
+    private defaultSlot;
+    disabled: boolean;
+    connectedCallback(): void;
+    firstUpdated(): void;
+    updated(changedProperties: Map<string | number | symbol, unknown>): void;
+    private updateDisabledState;
+    updateTogglePositions(): void;
+    handleToggle(event: CustomEvent): void;
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render(): TemplateResult;
+}
+export default NileButtonToggleGroup;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-button-toggle-group': NileButtonToggleGroup;
+    }
+}

package/dist/src/nile-button-toggle-group/nile-button-toggle-group.js

@@ -0,0 +1,99 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { __decorate } from "tslib";
+import { html, property } from 'lit-element';
+import { customElement, query, queryAll } from 'lit/decorators.js';
+import { styles } from './nile-button-toggle-group.css';
+import NileButtonToggle from '../nile-button-toggle/nile-button-toggle';
+import NileElement from '../internal/nile-element';
+/**
+ * Nile icon component.
+ *
+ * @tag nile-button-toggle-group
+ *
+ */
+let NileButtonToggleGroup = class NileButtonToggleGroup extends NileElement {
+    constructor() {
+        super(...arguments);
+        this.disabled = false;
+        /* #endregion */
+    }
+    /**
+     * The styles for ButtonToggleGroup
+     * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`
+     */
+    static get styles() {
+        return [styles];
+    }
+    connectedCallback() {
+        super.connectedCallback();
+    }
+    firstUpdated() {
+        this.defaultSlot.addEventListener('slotchange', () => this.updateTogglePositions());
+        this.addEventListener('nile-toggle-changed', this.handleToggle);
+        this.updateTogglePositions();
+    }
+    updated(changedProperties) {
+        super.updated(changedProperties);
+        if (changedProperties.has('disabled')) {
+            this.updateDisabledState();
+        }
+    }
+    updateDisabledState() {
+        const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });
+        const toggles = assignedNodes.filter(node => node instanceof NileButtonToggle);
+        toggles.forEach(toggle => {
+            if (!toggle.disabled) {
+                toggle.disabled = this.disabled;
+            }
+        });
+    }
+    updateTogglePositions() {
+        const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });
+        const toggles = assignedNodes.filter(node => node instanceof NileButtonToggle);
+        toggles.forEach((toggle, index) => {
+            toggle.initial = index === 0;
+            toggle.middle = index > 0 && index < toggles.length - 1;
+            toggle.end = index === toggles.length - 1;
+        });
+    }
+    handleToggle(event) {
+        if (this.disabled)
+            return;
+        const toggles = this.querySelectorAll('nile-button-toggle');
+        if (toggles && event.detail.active) {
+            toggles.forEach((toggle) => {
+                if (toggle !== event.target) {
+                    toggle.active = false;
+                }
+            });
+            this.emit('nile-change', { value: event.detail.value });
+        }
+    }
+    /**
+     * Render method
+     * @slot This is a slot test
+     */
+    render() {
+        return html ` <slot> </slot> `;
+    }
+};
+__decorate([
+    queryAll('nile-button-toggle')
+], NileButtonToggleGroup.prototype, "toggles", void 0);
+__decorate([
+    query('slot:not([name])')
+], NileButtonToggleGroup.prototype, "defaultSlot", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], NileButtonToggleGroup.prototype, "disabled", void 0);
+NileButtonToggleGroup = __decorate([
+    customElement('nile-button-toggle-group')
+], NileButtonToggleGroup);
+export { NileButtonToggleGroup };
+export default NileButtonToggleGroup;
+//# sourceMappingURL=nile-button-toggle-group.js.map

package/dist/src/nile-button-toggle-group/nile-button-toggle-group.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-button-toggle-group.js","sourceRoot":"","sources":["../../../src/nile-button-toggle-group/nile-button-toggle-group.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport {LitElement, html, property, CSSResultArray, TemplateResult} from 'lit-element';\nimport { customElement, query, queryAll } from 'lit/decorators.js';\nimport {styles} from './nile-button-toggle-group.css';\nimport NileButtonToggle from '../nile-button-toggle/nile-button-toggle';\nimport NileElement from '../internal/nile-element';\n/**\n * Nile icon component.\n *\n * @tag nile-button-toggle-group\n *\n */\n@customElement('nile-button-toggle-group')\nexport class NileButtonToggleGroup extends NileElement {\n  /**\n   * The styles for ButtonToggleGroup\n   * @remarks If you are extending this class you can extend the base styles with super. Eg `return [super(), myCustomStyles]`\n   */\n  public static get styles(): CSSResultArray {\n    return [styles];\n  }\n\n  @queryAll('nile-button-toggle')\n  private toggles!: NodeListOf<NileButtonToggle>;\n\n  @query('slot:not([name])')\n  private defaultSlot!: HTMLSlotElement;\n\n  @property({ type: Boolean, reflect: true })\n  public disabled: boolean = false;\n\n  connectedCallback() {\n    super.connectedCallback();\n  }\n\n  firstUpdated() {\n    this.defaultSlot.addEventListener('slotchange', () =>\n      this.updateTogglePositions()\n    );\n    this.addEventListener('nile-toggle-changed', this.handleToggle);\n    this.updateTogglePositions();\n  }\n\n  updated(changedProperties: Map<string | number | symbol, unknown>) {\n    super.updated(changedProperties);\n    if (changedProperties.has('disabled')) {\n      this.updateDisabledState();\n    }\n  }\n\n  private updateDisabledState() {\n    const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });\n    const toggles = assignedNodes.filter(\n      node => node instanceof NileButtonToggle\n    ) as NileButtonToggle[];\n\n    toggles.forEach(toggle => {\n      if (!toggle.disabled) {\n        toggle.disabled = this.disabled;\n      }\n    });\n  }\n\n  updateTogglePositions() {\n    const assignedNodes = this.defaultSlot.assignedNodes({ flatten: true });\n    const toggles = assignedNodes.filter(\n      node => node instanceof NileButtonToggle\n    ) as NileButtonToggle[];\n\n    toggles.forEach((toggle, index) => {\n      toggle.initial = index === 0;\n      toggle.middle = index > 0 && index < toggles.length - 1;\n      toggle.end = index === toggles.length - 1;\n    });\n  }\n\n  handleToggle(event: CustomEvent) {\n    if (this.disabled) return;\n    const toggles = this.querySelectorAll('nile-button-toggle');\n\n    if (toggles && event.detail.active) {\n      toggles.forEach((toggle: any) => {\n        if (toggle !== event.target) {\n          toggle.active = false;\n        }\n      });\n\n      this.emit('nile-change', { value: event.detail.value });\n    }\n  }\n\n  /**\n   * Render method\n   * @slot This is a slot test\n   */\n  public render(): TemplateResult {\n    return html` <slot> </slot> `;\n  }\n\n  /* #endregion */\n}\n\nexport default NileButtonToggleGroup;\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nile-button-toggle-group': NileButtonToggleGroup;\n  }\n}\n"]}

package/dist/src/nile-content-editor/index.d.ts

@@ -0,0 +1 @@
+export { NileContentEditor } from './nile-content-editor';

package/dist/src/nile-content-editor/index.js

@@ -0,0 +1,2 @@
+export { NileContentEditor } from './nile-content-editor';
+//# sourceMappingURL=index.js.map

package/dist/src/nile-content-editor/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/nile-content-editor/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,iBAAiB,EAAE,MAAM,uBAAuB,CAAC","sourcesContent":["export { NileContentEditor } from './nile-content-editor';\n"]}

package/dist/src/nile-content-editor/nile-content-editor.css.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+/**
+ * AttributeExpression CSS
+ */
+export declare const styles: import("lit-element").CSSResult;
+declare const _default: import("lit-element").CSSResult[];
+export default _default;