@zywave/zui-bundle/dev/bundle.js

ZUI, out of the box, provides ES modules with bare path modifiers (e.g. `import '@zywave/zui-foo-bar'`). This is great as that's the way browsers are _going_, but they aren't there quite yet. Tooling exists to help solve this problem like webpack or rollu

import { c as css, p as property, q as query, Z as ZuiBaseElement, h as html, a as ZuiFormAssociatedElement, b as classMap, D as Directive, n as nothing, P as PartType, d as noChange, e as directive, f as queryAssignedElements, _ as _$LH, u as updateCustomState, r as render, i as instance } from './internals/_a9b1a7d3.js';
import { s as screenBreakpoints, q as queryAssignedNodes, a as state } from './internals/_53938435.js';
import { i as ifDefined } from './internals/_812fa620.js';

function findAssignedElement(slot, selector) {
  if (!slot) {
    return null;
  }
  for (const node of slot.assignedNodes({
    flatten: true
  })) {
    if (node.nodeType === Node.ELEMENT_NODE) {
      const el = node;
      if (el.matches(selector)) {
        return el;
      }
    }
  }
  return null;
}
function findAssignedElements(slot, selector) {
  const result = [];
  if (!slot) {
    return result;
  }
  for (const node of slot.assignedNodes({
    flatten: true
  })) {
    if (node.nodeType === Node.ELEMENT_NODE) {
      const el = node;
      if (el.matches(selector)) {
        result.push(el);
      }
    }
  }
  return result;
}

const style$L = css`:host{display:flex;width:100%;flex-wrap:wrap;align-items:center;line-height:1.6}:host .show-all-button{display:inline-flex;align-items:center;margin:0 0.625rem 0 0;padding:0;background:rgba(0,0,0,0);border:0;font-weight:700;line-height:inherit;cursor:pointer;color:var(--zui-blue-500);transition:color .25s ease-out}:host .show-all-button:hover{color:var(--zui-blue-700)}:host .show-all-button:focus{box-shadow:inset 0 0 0 1px var(--zui-blue);outline:none}:host .show-all-button zui-icon[icon=zui-left]{--zui-icon-size: 1rem;width:1rem;margin-right:0.1875rem}:host ::slotted(zui-breadcrumb:last-of-type:not(:first-of-type)){color:var(--zui-gray-400)}@media(max-width: 44.9375rem){:host ::slotted(zui-breadcrumb){display:none}:host ::slotted(zui-breadcrumb:nth-last-of-type(2)){display:inline-flex}:host ::slotted(zui-breadcrumb:first-of-type:last-of-type){display:inline-flex}}`;

function debounce(func, waitMilliseconds = 50, isImmediate) {
  let timeoutId;
  return function (...args) {
    // eslint-disable-next-line @typescript-eslint/no-this-alias
    const context = this;
    const doLater = function () {
      timeoutId = undefined;
      if (!isImmediate) {
        func.apply(context, args);
      }
    };
    const shouldCallNow = isImmediate && timeoutId === undefined;
    if (timeoutId !== undefined) {
      clearTimeout(timeoutId);
    }
    timeoutId = setTimeout(doLater, waitMilliseconds);
    if (shouldCallNow) {
      func.apply(context, args);
    }
  };
}

var __decorate$G = undefined && undefined.__decorate || function (decorators, target, key, desc) {
  var c = arguments.length,
    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
    d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/**
 * `<zui-breadcrumbs>` is a wrapper around `<zui-breadcrumb>` elements.
 *
 * @element zui-breadcrumbs
 *
 * @slot - Default, unnamed slot; for inserting `<zui-breadcrumb>` elements into `<zui-breadcrumbs>`
 */
class ZuiBreadcrumbs extends ZuiBaseElement {
  constructor() {
    super(...arguments);
    /**
     * Set to `true` if you do not want to truncate any of your breadcrumbs, making all visible
     */
    this.showAll = false;
    /**
     * Value determines how many visible breadcrumbs can be seen before truncation
     */
    this.visibleCount = 4;
    this._isMobile = false;
  }
  static get styles() {
    return [super.styles, style$L];
  }
  get _slottedBreadcrumbs() {
    return findAssignedElements(this._slotEl, 'zui-breadcrumb');
  }
  get _slottedFirstBreadcrumb() {
    return findAssignedElement(this._slotElFirstBreadcrumb, 'zui-breadcrumb');
  }
  get _listOfBreadcrumbsToTruncate() {
    // create an array with the breadcrumbs to be hidden by truncation
    return this._slottedBreadcrumbs.slice(0, this._slottedBreadcrumbs.length - (this.visibleCount - 1));
  }
  get _listOfBreadcrumbsToReveal() {
    // array of breadcrumbs that will be visible if truncated
    return this._slottedBreadcrumbs.slice(this._slottedBreadcrumbs.length - (this.visibleCount - 1), this._slottedBreadcrumbs.length);
  }
  get _isTruncated() {
    // determine if breadcrumbs should truncate based on multiple properties
    if (this.showAll || this._isMobile || this.visibleCount >= this._slottedBreadcrumbs.length + 1) {
      return false;
    }
    return true;
  }
  _onClickRevealHiddenBreadcrumbs() {
    // change truncated/hidden breadcrumbs to display: flex
    this._listOfBreadcrumbsToTruncate.forEach(crumb => {
      crumb.removeAttribute('style');
    });
    // hide ...show-all-button
    this.showAll = true;
    this.requestUpdate();
  }
  _moveFirstBreadcrumbToFirstSlot() {
    const breadcrumbs = this._slottedBreadcrumbs;
    const firstBreadcrumb = this._slottedBreadcrumbs[0];
    // remove slot attribute if someone is abusing slot names
    for (let i = 1; i < breadcrumbs.length; i++) {
      breadcrumbs[i].removeAttribute('slot');
    }
    // move first breadcrumb to first slot by changing slot attribute / value
    if (firstBreadcrumb) {
      firstBreadcrumb.setAttribute('slot', 'first');
    }
  }
  _hideBreadcrumbs(arr) {
    arr.forEach(crumb => {
      crumb.style.display = 'none';
    });
  }
  _unhideBreadcrumbs(arr) {
    arr.forEach(crumb => {
      crumb.removeAttribute('style');
    });
  }
  _setupMediaQueryListener() {
    const breakpoint = () => {
      // convert breakpoint to be value - 1px for correct trigger point value
      const array = screenBreakpoints.xsmall.split('em');
      return `${parseInt(array[0]) - 1 / 16}em`;
    };
    const xsmallMq = window.matchMedia(`(max-width: ${breakpoint()})`);
    if (xsmallMq.addEventListener) {
      xsmallMq.addEventListener('change', debounce(e => {
        this._isMobile = e.matches;
        if (!this._isTruncated) {
          this._unhideBreadcrumbs(this._listOfBreadcrumbsToTruncate);
        } else {
          this._hideBreadcrumbs(this._listOfBreadcrumbsToTruncate);
        }
        this.requestUpdate();
      }, 100));
    } else {
      // sad browsers like IE11 and Safari
      xsmallMq.addListener(debounce(e => {
        this._isMobile = e.matches;
        if (!this._isTruncated) {
          this._unhideBreadcrumbs(this._listOfBreadcrumbsToTruncate);
        } else {
          this._hideBreadcrumbs(this._listOfBreadcrumbsToTruncate);
        }
        this.requestUpdate();
      }, 100));
    }
    this._isMobile = xsmallMq.matches;
  }
  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    this._setupMediaQueryListener();
    this._moveFirstBreadcrumbToFirstSlot();
    if (this._isTruncated) {
      this.requestUpdate();
      this._hideBreadcrumbs(this._listOfBreadcrumbsToTruncate);
    }
    // list for changes on <slot name="first"></slot>, shuffle and display breadcrumbs as needed
    // TODO: IE11 does not support `slotchange` event, possible solution is a mutationObserver, plan is to release and test to see if we even need these eventListeners / mutationObservers wtih dynamic nature of breadcrumbs
    this._slotElFirstBreadcrumb.addEventListener('slotchange', () => {
      if (!this._slottedFirstBreadcrumb) {
        this._moveFirstBreadcrumbToFirstSlot();
        this._slottedFirstBreadcrumb.removeAttribute('style');
        if (this._isTruncated) {
          this._unhideBreadcrumbs(this._listOfBreadcrumbsToReveal);
          this._hideBreadcrumbs(this._listOfBreadcrumbsToTruncate);
        }
        this.requestUpdate();
      }
    });
    // listen for changes on default <slot>, shuffle and display breadcrumbs as needed
    this._slotEl.addEventListener('slotchange', () => {
      if (this._isTruncated) {
        this._unhideBreadcrumbs(this._listOfBreadcrumbsToReveal);
        this._hideBreadcrumbs(this._listOfBreadcrumbsToTruncate);
      } else {
        this._unhideBreadcrumbs(this._slottedBreadcrumbs);
      }
      this.requestUpdate();
    });
  }
  render() {
    return html`
      <slot name="first"></slot>
      ${this._isTruncated ? html`
            <button class="show-all-button" @click="${this._onClickRevealHiddenBreadcrumbs}">
              <zui-icon icon="zui-left"></zui-icon>
              <span>...</span>
            </button>
          ` : ''}
      <slot></slot>
    `;
  }
}
__decorate$G([property({
  type: Boolean,
  attribute: 'show-all'
})], ZuiBreadcrumbs.prototype, "showAll", void 0);
__decorate$G([property({
  type: Number,
  attribute: 'visible-count'
})], ZuiBreadcrumbs.prototype, "visibleCount", void 0);
__decorate$G([query('slot:not([name="first"])')], ZuiBreadcrumbs.prototype, "_slotEl", void 0);
__decorate$G([query('slot[name="first"]')], ZuiBreadcrumbs.prototype, "_slotElFirstBreadcrumb", void 0);
window.customElements.define('zui-breadcrumbs', ZuiBreadcrumbs);

const style$K = css`:host{display:inline-flex;align-items:center;line-height:inherit;cursor:pointer;color:var(--zui-blue-500);transition:color .25s ease-out}@media(max-width: 44.9375rem){:host{width:calc(100% - 1rem - 0.1875rem - 0.0625rem)}}:host(:hover){color:var(--zui-blue-400)}:host(:focus){box-shadow:inset 0 0 0 1px var(--zui-blue);outline:none}:host(:active){color:var(--zui-blue-600)}:host(:not(:last-of-type)),:host(:first-of-type:last-of-type){margin-right:0.625rem}zui-icon[icon=zui-left]{--zui-icon-size: 1rem;margin-right:0.1875rem}::slotted(*){display:inline-block;max-width:30ch;overflow-x:hidden;margin:0;padding:0;background:none;border:0;outline:none;font:inherit;line-height:inherit !important;text-align:left;white-space:nowrap;cursor:inherit;color:inherit;transition:inherit;text-overflow:ellipsis;text-decoration:none}@media(max-width: 44.9375rem){::slotted(*){width:calc(100% - 1rem - 0.1875rem - 0.0625rem);overflow:hidden;white-space:nowrap;text-overflow:ellipsis}}:host([expand-text]) ::slotted(*){max-width:none}`;

var __decorate$F = undefined && undefined.__decorate || function (decorators, target, key, desc) {
  var c = arguments.length,
    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
    d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/**
 * `<zui-breadcrumb>`s are passed as a direct descendant into the wrapper `<zui-breadcrumbs>`. `<zui-breadcrumb>` will accept and format correct styling for `<a>`, `<button>`, and other slotted elements. Choose your slotted element based upon your needs. If items can be opened in a new tab, we suggest using `<a>`.
 *
 * @element zui-breadcrumb
 *
 * @slot - Default, unnamed slot; for inserting `<div>`, `<a>`, or `<button>` elements into `<zui-breadcrumb>`
 */
class ZuiBreadcrumb extends ZuiBaseElement {
  constructor() {
    super(...arguments);
    /**
     * Apply attribute if you'd like to remove max character ellipsis on a single `zui-breadcrumb`
     */
    this.expandText = false;
  }
  get _slottedControl() {
    return findAssignedElement(this._slotEl, 'a,button,div');
  }
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute('role', 'button');
    const clickKeys = [13, 32];
    this.addEventListener('keydown', e => {
      if (clickKeys.includes(e.keyCode)) {
        this.focus();
        e.preventDefault();
        e.stopPropagation();
      }
    });
    this.addEventListener('keyup', e => {
      if (clickKeys.includes(e.keyCode)) {
        this.click();
        e.preventDefault();
        e.stopPropagation();
      }
    });
    this.addEventListener('click', e => {
      if (this._slottedControl && !e.composedPath().includes(this._slottedControl)) {
        this._slottedControl.click();
      }
    });
  }
  _setTabIndex() {
    if (this._slottedControl) {
      this._slottedControl.setAttribute('tabindex', '-1');
      this.tabIndex = 0;
    } else {
      this.tabIndex = 0;
    }
  }
  static get styles() {
    return [super.styles, style$K];
  }
  firstUpdated(changedProps) {
    super.firstUpdated(changedProps);
    this._setTabIndex();
  }
  render() {
    return html`
      <zui-icon icon="zui-left"></zui-icon>
      <slot></slot>
    `;
  }
}
__decorate$F([query('slot')], ZuiBreadcrumb.prototype, "_slotEl", void 0);
__decorate$F([property({
  type: Boolean,
  attribute: 'expand-text',
  reflect: true
})], ZuiBreadcrumb.prototype, "expandText", void 0);
window.customElements.define('zui-breadcrumb', ZuiBreadcrumb);

const style$J = css`:host{display:inline-flex}:host div{display:flex;height:2.25rem;flex-grow:0;flex-shrink:0;justify-content:center;align-items:center;padding:0 .9375rem;background:var(--zui-button-color, var(--zui-blue));border:0;border-radius:var(--zui-button-border-radius, 1.25rem);box-shadow:var(--zui-button-box-shadow, none);outline:none;font:inherit;font-weight:600;line-height:1.25rem;text-align:center;cursor:pointer;color:var(--zui-button-text-color, #fff);transition:background 100ms ease-out,box-shadow 100ms ease-out;user-select:none}:host div ::slotted(a){background:inherit !important;color:inherit !important;text-decoration:none !important}:host div ::slotted(button){margin:0 !important;padding:0 !important;background:rgba(0,0,0,0) !important;border:0 !important;outline:none !important;font:inherit !important;cursor:inherit !important;color:inherit !important}:host div ::slotted(zui-icon),:host div ::slotted(zui-svg),:host div ::slotted(svg){--zui-icon-size: 1rem;--zui-svg-width: 1rem;--zui-svg-height: 1rem;display:inline-block;width:1rem;height:1rem;vertical-align:middle;margin-right:.625rem;margin-left:0;fill:var(--zui-button-icon-color, currentColor)}:host(:hover) div{background:var(--zui-button-hover-color, var(--zui-blue-400));color:var(--zui-button-text-hover-color, var(--zui-button-text-color, #fff));text-decoration:none}:host(:focus){outline:none}:host(:focus) div{background:var(--zui-button-focus-color, var(--zui-button-hover-color, var(--zui-blue)));box-shadow:var(--zui-button-box-shadow-focus, 0 0 0 0.0625rem #fff, 0 0 0 0.125rem var(--zui-button-focus-color, var(--zui-button-hover-color, var(--zui-blue))));outline:none;color:var(--zui-button-text-focus-color, var(--zui-button-text-hover-color, var(--zui-button-text-color, #fff)))}:host(:active) div{background:var(--zui-button-active-color, var(--zui-blue-600));box-shadow:var(--zui-button-box-shadow, none);outline:none}:host([disabled]){pointer-events:none}:host([disabled]) div{background:var(--zui-gray-200);box-shadow:var(--zui-button-box-shadow, none);outline:none;color:var(--zui-gray);transform:none}:host([disabled]) div ::slotted(*){pointer-events:none}:host([disabled]) div ::slotted(zui-icon),:host([disabled]) div ::slotted(zui-svg),:host([disabled]) div ::slotted(svg){fill:var(--zui-gray)}:host(.secondary) div,:host([type~=secondary]) div{background:rgba(0,0,0,0);box-shadow:var(--zui-button-secondary-box-shadow, inset 0 0 0 0.0625rem var(--zui-gray-200));color:var(--zui-button-text-color, var(--zui-button-color, var(--zui-blue)))}:host(.secondary:hover) div,:host([type~=secondary]:hover) div{background:rgba(0,0,0,0);box-shadow:var(--zui-button-secondary-box-shadow-hover, inset 0 0 0 0.0625rem var(--zui-button-hover-color, var(--zui-blue-400)))}:host(.secondary:focus) div,:host([type~=secondary]:focus) div{background:rgba(0,0,0,0);box-shadow:var(--zui-button-secondary-box-shadow-focus, inset 0 0 0 0.0625rem var(--zui-gray-200), 0 0 0 0.0625rem #fff, 0 0 0 0.125rem var(--zui-button-focus-color, var(--zui-button-hover-color, var(--zui-blue))))}:host(.secondary:active) div,:host([type~=secondary]:active) div{background:rgba(0,0,0,0);box-shadow:var(--zui-button-secondary-box-shadow-active, inset 0 0 0 0.0625rem var(--zui-button-hover-color, var(--zui-blue-600)))}:host(.secondary[disabled]) div,:host([type~=secondary][disabled]) div{box-shadow:var(--zui-button-secondary-box-shadow, inset 0 0 0 0.0625rem var(--zui-gray-200));color:var(--zui-gray-400)}:host(.link) div,:host([type~=link]) div{background:rgba(0,0,0,0);color:var(--zui-link-button-text-color, var(--zui-button-color, var(--zui-blue)))}:host(.link:hover) div,:host([type~=link]:hover) div{background:var(--zui-link-button-hover-color, var(--zui-gray-100))}:host(.link:focus) div,:host([type~=link]:focus) div{box-shadow:inset 0 0 0 .0625rem var(--zui-link-button-text-color, var(--zui-button-focus-color, var(--zui-button-hover-color, var(--zui-blue))))}:host(.link:active) div,:host([type~=link]:active) div{background:var(--zui-link-button-active-color, var(--zui-gray-200));box-shadow:none}:host(.link[disabled]) div,:host([type~=link][disabled]) div{color:var(--zui-gray)}:host(.danger) div,:host([danger]) div{background:var(--zui-red);color:#fff}:host(.danger:hover) div,:host([danger]:hover) div{background:var(--zui-red-400)}:host(.danger:focus) div,:host([danger]:focus) div{background:var(--zui-red);box-shadow:0 0 0 .0625rem #fff,0 0 0 .125rem var(--zui-red)}:host(.danger:active) div,:host([danger]:active) div{background:var(--zui-red-600);box-shadow:none}:host(.danger[disabled]) div,:host([danger][disabled]) div{background:var(--zui-gray-200);color:var(--zui-gray)}:host([type~=link][danger]) div{background:rgba(0,0,0,0);color:var(--zui-red)}:host([type~=link][danger]:hover) div{background:var(--zui-gray-100)}:host([type~=link][danger]:focus) div{box-shadow:inset 0 0 0 .0625rem var(--zui-red)}:host([type~=link][danger]:active) div{background:var(--zui-gray-200);box-shadow:none}:host([type~=link][danger][disabled]) div{color:var(--zui-gray)}:host(.icon-right) div ::slotted(zui-icon),:host(.icon-right) div ::slotted(zui-svg),:host(.icon-right) div ::slotted(svg),:host([icon-right]) div ::slotted(zui-icon),:host([icon-right]) div ::slotted(zui-svg),:host([icon-right]) div ::slotted(svg){margin-right:0;margin-left:.625rem}:host(.icon-only) div,:host([icon]) div{width:var(--zui-button-width, 2.25rem);height:2.25rem;margin:0;padding:var(--zui-button-padding, 0);border-radius:var(--zui-button-border-radius, 50%)}:host(.icon-only) div ::slotted(zui-icon),:host(.icon-only) div ::slotted(zui-svg),:host(.icon-only) div ::slotted(svg),:host([icon]) div ::slotted(zui-icon),:host([icon]) div ::slotted(zui-svg),:host([icon]) div ::slotted(svg){width:1rem;height:1rem;margin:0}:host([block]){display:block;width:100%}:host([block]) div{width:100%}`;

var __decorate$E = undefined && undefined.__decorate || function (decorators, target, key, desc) {
  var c = arguments.length,
    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
    d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
const clickKeys = ['Space', 'Enter'];
const anchorNodeName = 'a';
/**
 * A Zywave-standard button.
 *
 * @element zui-button
 *
 * @slot - Default, unnamed slot; for inserting text, `<a>`, `<button>`, and `<zui-icon>` elements into `<zui-button>`
 *
 * @csspart button - The button container inside `<zui-button>`; this is exposed as a CSS shadow part and can be accessed with `::part(button)`
 *
 * @cssprop [--zui-button-icon-color=currentColor] - (all types): slotted `zui-icon` fill color
 * @cssprop [--zui-button-text-color=#fff] - (`primary` / default / `secondary`): text color
 * @cssprop [--zui-button-color=var(--zui-blue)] - (`primary` / default): button background color
 * @cssprop [--zui-button-hover-color=var(--zui-blue-400)] - (`primary` / default): hover state button background color
 * @cssprop [--zui-button-text-hover-color=var(--zui-button-text-color)] - (`primary` / default): hover state text color
 * @cssprop [--zui-button-focus-color=var(--zui-blue-400)] - (`primary` / default): focus state button background color
 * @cssprop [--zui-button-text-focus-color=var(--zui-button-text-color)] - (`primary` / default): focus state text color
 * @cssprop [--zui-button-active-color=var(--zui-blue-600)] - (`primary` / default): active state background color
 * @cssprop [--zui-button-secondary-box-shadow=var(--zui-blue)] - (`secondary`): button outline color
 * @cssprop [--zui-button-secondary-box-shadow-hover=var(--zui-blue-400)] - (`secondary`): hover state button outline color
 * @cssprop [--zui-button-secondary-box-shadow-focus=var(--zui-blue-400)] - (`secondary`): focus state button outline color
 * @cssprop [--zui-button-secondary-box-shadow-active=var(--zui-blue-600)] - (`secondary`): active state button outline color
 * @cssprop [--zui-link-button-text-color=var(--zui-blue)] - (`link`): text color
 * @cssprop [--zui-link-button-hover-color=var(--zui-gray-100)] - (`link`): hover state button background color
 * @cssprop [--zui-link-button-focus-color=var(--zui-blue)] - (`link`): focus state button outline color
 * @cssprop [--zui-link-button-active-color=var(--zui-gray-200)] - (`link`): active state button background color
 * @cssprop [--zui-button-width=2.25rem (36px)] - (`icon-only`): force an exact width for `icon-only` button types
 **/
class ZuiButton extends ZuiBaseElement {
  constructor() {
    super(...arguments);
    /**
     * Use this attribute to set the type of button dropdown you want. See <a href="https://booster.zywave.dev/design-system/components/buttons/">Buttons</a> for button style variations.
     * @type { primary | secondary | link }
     */
    this.type = 'primary';
    /**
     * Use this attribute when you want an icon-only button
     */
    this.icon = false;
    /**
     * Use this attribute when you want to right-align an icon in a button with text
     */
    this.iconRight = false;
    /**
     * Use this attribute when you want the button to span the whole width of its parent container
     */
    this.block = false;
    /**
     * Use this attribute when you want the button to stand out due to its destructive action
     */
    this.danger = false;
    /**
     * Use this attribute when you want to disable `<zui-button>`
     */
    this.disabled = false;
  }
  get _slottedControl() {
    return findAssignedElement(this._slotEl, 'a,button');
  }
  get _hasWrappedAnchor() {
    return this.parentElement ? this.parentElement.nodeName.toLowerCase() === anchorNodeName : false;
  }
  firstUpdated() {
    this._setTabIndex();
    this.setAttribute('role', 'button');
    if (this._slottedControl) {
      this._slottedControl.tabIndex = -1;
    }
    this.addEventListener('keydown', e => {
      this._onKeydown(e);
    });
    this.addEventListener('keyup', e => {
      this._onKeyup(e);
    });
    this.addEventListener('click', e => {
      if (!e.composedPath().includes(this._wrapperDivEl)) {
        this._onClick(e);
      }
    });
  }
  updated(changedProps) {
    if (changedProps.has('disabled')) {
      this._setTabIndex();
    }
  }
  _setTabIndex() {
    if (this.disabled || this._hasWrappedAnchor) {
      this.removeAttribute('tabindex');
    } else {
      this.tabIndex = 0;
    }
  }
  static get styles() {
    return [super.styles, style$J];
  }
  render() {
    return html`
      <div part="button" @click="${this._onClick}" @keyup="${this._onKeyup}" @keydown="${this._onKeydown}"
        ><slot></slot
      ></div>
    `;
  }
  /**
   *
   * @param e The raw event that calls this method
   * @param shouldClickSelf an optional parameter that, if provided, will cause the click() function to be called on ZuiButton
   * @returns
   */
  _onClick(e, shouldClickSelf) {
    if (this.disabled) {
      e.preventDefault();
      e.stopPropagation();
      return false;
    } else if (shouldClickSelf) {
      this.click();
    } else if (this._slottedControl && !e.composedPath().includes(this._slottedControl)) {
      this._slottedControl.click();
    }
  }
  _onKeyup(e) {
    if (clickKeys.includes(e.code)) {
      this._onClick(e, true);
    }
  }
  _onKeydown(e) {
    if (clickKeys.includes(e.code)) {
      if (!this.disabled) {
        this.focus();
        e.preventDefault();
        e.stopPropagation();
      }
    }
  }
}
__decorate$E([property({
  type: String,
  reflect: true
})], ZuiButton.prototype, "type", void 0);
__decorate$E([property({
  type: Boolean,
  reflect: true
})], ZuiButton.prototype, "icon", void 0);
__decorate$E([property({
  type: Boolean,
  reflect: true,
  attribute: 'icon-right'
})], ZuiButton.prototype, "iconRight", void 0);
__decorate$E([property({
  type: Boolean,
  reflect: true
})], ZuiButton.prototype, "block", void 0);
__decorate$E([property({
  type: Boolean,
  reflect: true
})], ZuiButton.prototype, "danger", void 0);
__decorate$E([property({
  type: Boolean,
  reflect: true
})], ZuiButton.prototype, "disabled", void 0);
__decorate$E([query('slot')], ZuiButton.prototype, "_slotEl", void 0);
__decorate$E([query('div')], ZuiButton.prototype, "_wrapperDivEl", void 0);
window.customElements.define('zui-button', ZuiButton);

const style$I = css`:host div{display:inline-flex;width:3.25rem;height:3.25rem;justify-content:center;align-items:center;padding:0;background-color:var(--zui-button-color, var(--zui-blue));border:0;border-radius:50%;box-shadow:0 .25rem .5rem 0 rgba(0,0,0,.25);cursor:pointer;color:var(--zui-button-text-color, #fff);transition:box-shadow 100ms ease-in-out;user-select:none;box-sizing:border-box;text-decoration:none}:host div ::slotted(zui-icon),:host div ::slotted(zui-svg),:host div ::slotted(svg){display:inline-block;width:var(--zui-button-icon-size, var(--zui-icon-size, 1.5rem));height:var(--zui-button-icon-size, var(--zui-icon-size, 1.5rem));font-size:var(--zui-button-icon-size, 1.875rem);font-weight:normal;font-style:normal;line-height:1;letter-spacing:normal;text-transform:none;white-space:nowrap;fill:var(--zui-floating-action-button-icon-color, currentColor);direction:ltr;word-wrap:normal}:host div:hover{background-color:var(--zui-button-hover-color, var(--zui-blue-400));box-shadow:0 .4375rem .75rem 0 rgba(0,0,0,.25);text-decoration:none}:host div:focus{background-color:var(--zui-button-hover-color, var(--zui-blue));outline:none}:host div:active{background-color:var(--zui-button-active-color, var(--zui-blue-600))}:host([disabled]){pointer-events:none}:host([disabled]) div{background-color:var(--zui-gray-200);box-shadow:none;outline:none;color:var(--zui-gray)}:host([disabled]) div ::slotted(*){pointer-events:none}:host([disabled]) div ::slotted(zui-icon),:host([disabled]) div ::slotted(zui-svg),:host([disabled]) div ::slotted(svg){fill:var(--zui-gray-400) !important}`;

var __decorate$D = undefined && undefined.__decorate || function (decorators, target, key, desc) {
  var c = arguments.length,
    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
    d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/**
 * A floating action button (fab) is used for displaying a sticky action that is always visible to the user; e.g., on many pages, as they scroll, etc.
 *
 * @element zui-fab
 *
 * @slot - Default, unnamed slot; for inserting an icon, `<zui-icon>`, or `<svg>` elements into `<zui-fab>`
 *
 * @cssprop [--zui-button-color=var(--zui-blue)] - Button background color
 * @cssprop [--zui-button-text-color=#fffs] - Button text color, will cause `svg`s to inherit this color unless specified otherwise
 * @cssprop [--zui-button-hover-color=var(--zui-blue-400)] - Hover and focus button background color
 * @cssprop [--zui-button-active-color=var(--zui-blue-400)] - Active button background color
 * @cssprop [--zui-floating-action-button-icon-color=#fff] - By default, will inherit `#fff` value from `--zui-button-text-color`, can override this value or CSS prop this inherits from
 * @cssprop [--zui-button-icon-size=1.5rem (24px)] - If using `<zui-icon>` it will take this size as width and height
 */
class ZuiFloatingActionButton extends ZuiBaseElement {
  constructor() {
    super(...arguments);
    /**
     * Use this attribute when you want to disable `<zui-fab>`
     */
    this.disabled = false;
  }
  connectedCallback() {
    super.connectedCallback();
    this.setAttribute('role', 'button');
    this.addEventListener('click', e => {
      if (this.disabled) {
        e.preventDefault();
        e.stopPropagation();
        return false;
      }
    });
  }
  static get styles() {
    return [super.styles, style$I];
  }
  render() {
    return html` <div tabindex="1"><slot></slot></div> `;
  }
}
__decorate$D([property({
  type: Boolean,
  attribute: 'disabled'
})], ZuiFloatingActionButton.prototype, "disabled", void 0);
window.customElements.define('zui-fab', ZuiFloatingActionButton);

const style$H = css`:host{contain:none;display:inline-flex}.zui-button-group{display:inline-flex}::slotted(zui-button),::slotted(zui-button-dropdown){--zui-button-border-radius: 0;--zui-button-box-shadow: inset 0.0625rem 0 0 0 var(--zui-button-group-divider-color, #fff);--zui-button-box-shadow-focus: inset 0.0625rem 0 0 0 var(--zui-button-group-divider-color, #fff), inset 0.125rem 0 0 0 var(--zui-button-focus-color, var(--zui-button-hover-color, var(--zui-blue))), inset 0 0 0 0.0625rem var(--zui-button-focus-color, var(--zui-button-hover-color, var(--zui-blue))), inset 0.1875rem 0 0 0 #fff, inset 0 0 0 0.125rem #fff;--zui-button-secondary-box-shadow: inset 0 -0.0625rem 0 0 var(--zui-gray-200), inset 0 0.0625rem 0 0 var(--zui-gray-200), inset 0.0625rem 0 0 0 var(--zui-gray-200);--zui-button-secondary-box-shadow-focus: inset 0 0.0625rem 0 0 var(--zui-gray-200), inset 0 -0.0625rem 0 0 var(--zui-gray-200), inset 0.0625rem 0 0 0 var(--zui-gray-200), inset 0 0.125rem 0 0 #fff, inset -0.0625rem 0 0 0 #fff, inset 0 -0.125rem 0 0 #fff, inset 0.125rem 0 0 0 #fff, inset 0 0.1875rem 0 0 var(--zui-button-focus-color, var(--zui-button-hover-color, var(--zui-blue))), inset -0.125rem 0 0 0 var(--zui-button-focus-color, var(--zui-button-hover-color, var(--zui-blue))), inset 0 -0.1875rem 0 0 var(--zui-button-focus-color, var(--zui-button-hover-color, var(--zui-blue))), inset 0.1875rem 0 0 0 var(--zui-button-focus-color, var(--zui-button-hover-color, var(--zui-blue)))}::slotted(zui-button:first-child),::slotted(zui-button-dropdown:first-child){--zui-button-border-radius: 1.25rem 0 0 1.25rem !important}::slotted(zui-button:last-child),::slotted(zui-button-dropdown:last-child){--zui-button-border-radius: 0 1.25rem 1.25rem 0 !important;--zui-button-secondary-box-shadow: inset 0 0 0 0.0625rem var(--zui-gray-200);--zui-button-secondary-box-shadow-focus: inset 0 0 0 0.0625rem var(--zui-gray-200), inset 0 0 0 0.125rem #fff, inset 0 0 0 0.1875rem var(--zui-button-focus-color, var(--zui-button-hover-color, var(--zui-blue)))}::slotted(zui-button.icon-only),::slotted(zui-button[icon]),::slotted(zui-button-dropdown[type=icon]),::slotted(zui-button-dropdown[icon]),::slotted(zui-button-dropdown:first-child),::slotted(zui-button-dropdown:last-child){--zui-button-width: 3.1875rem;--zui-button-padding: 0 0.9375rem}::slotted(zui-button:only-child),::slotted(zui-button-dropdown:only-child){--zui-button-border-radius: 1.25rem !important}`;

/**
 * Groups related actions into a combined presentation. Use with `<zui-button>` or `<zui-button-dropdown>` elements.
 *
 * @element zui-button-group
 *
 * @slot - Default, unnamed slot; for inserting `<zui-button>`, `<zui-button-dropdown>`, `<a>`, and `<button>` elements into `<zui-button-group>`
 */
class ZuiButtonGroup extends ZuiBaseElement {
  static get styles() {
    return [super.styles, style$H];
  }
  render() {
    return html`
      <div class="zui-button-group">
        <slot></slot>
      </div>
    `;
  }
}
window.customElements.define('zui-button-group', ZuiButtonGroup);

const style$G = css`:host{contain:none;position:relative;display:inline-flex}:host .menu{contain:layout;position:absolute;top:2.25rem;left:0;display:none;width:12.5rem;z-index:1;flex-direction:column;padding-top:.375rem;padding-bottom:.375rem;background-color:#fff;border-radius:.25rem;box-shadow:rgba(0,0,0,.04) 0 .25rem .375rem .125rem,rgba(0,0,0,.06) 0 .125rem .625rem .1875rem,rgba(0,0,0,.02) 0 .25rem .3125rem -0.125rem}:host .menu ::slotted(button),:host .menu ::slotted(a){display:flex;align-items:center;padding:.625rem .9375rem !important;font-weight:400;text-align:left;cursor:pointer;color:var(--zui-gray-800);transition:background-color .3s ease;gap:.625rem}:host .menu ::slotted(button:hover),:host .menu ::slotted(button:focus),:host .menu ::slotted(a:hover),:host .menu ::slotted(a:focus){background-color:var(--zui-gray-100);border:0;box-shadow:none;outline:0}:host .menu ::slotted(button){background-color:rgba(0,0,0,0);border:0;outline:none;font:inherit}:host .menu ::slotted(*:-moz-focusring){outline:0 !important}:host .menu ::slotted(button[disabled]){color:var(--zui-gray-400) !important;pointer-events:none}:host .menu ::slotted(button[disabled]:hover){background-color:rgba(0,0,0,0)}:host .menu ::slotted(a){text-decoration:none !important}:host([open]){z-index:1}:host([open]) .menu{display:flex}:host(:not([icon])) zui-icon{margin:0 0 0 .625rem}:host ::slotted(*:not([slot=option])){pointer-events:none}`;

var __decorate$C = undefined && undefined.__decorate || function (decorators, target, key, desc) {
  var c = arguments.length,
    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
    d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/**
 * A component that uses a `<zui-button>` to open a dropdown menu of options.
 *
 * @element zui-button-dropdown
 *
 * @slot - Default, unnamed slot; for inserting label text or an icon into `<zui-button-dropdown>`
 * @slot option - For each dropdown menu option, apply this slot attribute to your slotted menu item; e.g., `<button slot="option">`
 *
 * @csspart menu - The menu container that reveals when you click `<zui-button-dropdown>`; this is exposed as a CSS shadow part and can be accessed with `::part(menu)`
 */
class ZuiButtonDropdown extends ZuiBaseElement {
  constructor() {
    super(...arguments);
    /**
     * This attribute will decide whether the submenu is open or not
     */
    this.open = false;
    /**
     *This attribute will decide whether you want to disable the `<zui-button>` dropdown trigger
     */
    this.disabled = false;
    /**
     * Use this attribute to set the type of button dropdown you want. See [Buttons](https://booster.zywave.dev/design-system/components/buttons/) for button style variations.
     * @type { primary | secondary | link }
     */
    this.type = 'primary';
    /**
     * Use this attribute when you want an icon-only button dropdown
     */
    this.icon = false;
  }
  static get styles() {
    return [super.styles, style$G];
  }
  connectedCallback() {
    super.connectedCallback();
    this.addEventListener('keydown', e => {
      // if dropdown menu is open
      if (this.open) {
        // open menu, hitting 'Shift + Tab' closes menu
        if (e.shiftKey && e.code === 'Tab') {
          e.preventDefault();
          e.stopPropagation();
          this.#toggleDropdown();
        }
        // open menu, hitting 'Tab' closes menu and focuses on zui-button-dropdown
        if (e.code === 'Tab') {
          e.preventDefault();
          e.stopPropagation();
          this.#toggleDropdown();
          this.shadowRoot.querySelector('zui-button').focus();
        }
        // open menu, hitting 'Space' || 'Enter' selects menu item, closes menu and then focuses zui-button-dropdown
        if (e.code === 'Enter' || e.code === 'Space') {
          e.preventDefault();
          document.activeElement.click();
          this.shadowRoot.querySelector('zui-button').focus();
        }
        // open menu, hitting 'Escape' closes menu
        e.code === 'Escape' && this.#toggleDropdown();
        // arrow keys toggle through menu options
        const navigationKeys = ['ArrowUp', 'ArrowDown'];
        if (navigationKeys.includes(e.code)) {
          const selectableOptions = Array.from(this.querySelectorAll('a:not([disabled]),button:not([disabled])'));
          const activeElement = document.activeElement;
          let foundIndex = selectableOptions.findIndex(el => {
            return el === activeElement;
          });
          if (foundIndex !== -1) {
            if (e.code === 'ArrowDown') {
              const nextIndex = foundIndex + 1;
              foundIndex = nextIndex === selectableOptions.length ? selectableOptions.length - 1 : nextIndex;
            } else {
              const previousIndex = foundIndex - 1;
              foundIndex = previousIndex < 0 ? 0 : previousIndex;
            }
          } else {
            foundIndex = 0;
          }
          selectableOptions[foundIndex].focus();
          e.preventDefault();
          e.stopPropagation();
        }
      } // end if (this.open)
      // hitting 'Space' or 'Enter' will toggle dropdown open/closed
      const selectionKeys = ['Space', 'Enter'];
      selectionKeys.includes(e.code) && this.#toggleDropdown();
    }, {
      capture: true
    }); // end 'keydown' eventListener
    document.addEventListener('click', e => {
      const clickedWithinButtonDropdown = e.composedPath().includes(this);
      if (!clickedWithinButtonDropdown) {
        this.open = false;
      }
    });
  }
  updated(changedProps) {
    super.updated(changedProps);
    if (this._chevronIcon) {
      this._chevronIcon.style.transition = 'transform .3s ease-out';
      this._chevronIcon.style.transform = this.open ? 'rotate(-180deg)' : '';
    }
    // DEPRECATED: type="icon" and type="icon-only"
    if (this.type.includes('icon') || this.type.includes('icon-only') || this.icon) {
      this._zuiButton.setAttribute('icon', '');
    }
    // DEPRECATED: type="icon-right"
    if (this.type.includes('icon-right') || this.hasAttribute('icon-right')) {
      this._zuiButton.setAttribute('icon-right', '');
    }
    // DEPRECATED: type="danger"
    if (this.type.includes('danger') || this.hasAttribute('danger')) {
      this._zuiButton.setAttribute('danger', '');
    }
  }
  render() {
    return html`
      <zui-button type="${this.#getButtonType()}" @click="${this.#toggleDropdown}" ?disabled="${this.disabled}"
        ><slot></slot>${this.icon || this.type.includes('icon') ? html`` : html`<zui-icon icon="zui-down"></zui-icon></zui-button>`}
      </zui-button>
      <div part="menu" class="menu"><slot name="option" @click="${() => this.open = false}"></slot></div>
    `;
  }
  #getButtonType() {
    if (this.type.includes('primary')) {
      return 'primary';
    } else if (this.type.includes('secondary')) {
      return 'secondary';
    } else if (this.type.includes('link')) {
      return 'link';
    } else {
      return '';
    }
  }
  #toggleDropdown() {
    this.open = !this.open;
  }
}
__decorate$C([property({
  type: Boolean,
  reflect: true
})], ZuiButtonDropdown.prototype, "open", void 0);
__decorate$C([property({
  type: Boolean,
  reflect: true
})], ZuiButtonDropdown.prototype, "disabled", void 0);
__decorate$C([property({
  type: String,
  reflect: true
})], ZuiButtonDropdown.prototype, "type", void 0);
__decorate$C([property({
  type: Boolean,
  reflect: true
})], ZuiButtonDropdown.prototype, "icon", void 0);
__decorate$C([query('zui-icon')], ZuiButtonDropdown.prototype, "_chevronIcon", void 0);
__decorate$C([query('zui-button')], ZuiButtonDropdown.prototype, "_zuiButton", void 0);
window.customElements.define('zui-button-dropdown', ZuiButtonDropdown);

const style$F = css`:host{contain:none;position:relative;display:block;width:auto;flex-wrap:wrap;margin:var(--zui-card-margin, 0 0 1.875rem);background-color:var(--zui-card-background-color, #fff);border-radius:.125rem;box-shadow:0 .0625rem .1875rem rgba(0,0,0,.16)}.container{width:100%;height:100%;padding:1.25rem;transition:200ms padding ease-in-out;box-sizing:border-box}@media(min-width: 80em){.container{padding:1.875rem}}.container ::slotted(.header){margin-bottom:0;font-size:var(--zui-card-header-text);font-weight:600;color:var(--zui-card-header-color, inherit)}.container ::slotted(.footer){display:flex;justify-content:flex-end;margin:var(--zui-card-footer-margin, 1.875rem 0 0);background-color:var(--zui-card-footer-background-color, #fff)}.container ::slotted(.footer.align-left){justify-content:flex-start}`;

/**
 * Simple. Card-like. Insert content into `<zui-card>` to get the visual styling of our ZUI-defined cards.
 *
 * @element zui-card
 *
 * @slot - Default, unnamed slot; for inserting content into `<zui-card>`
 *
 * @csspart content - The content container inside `<zui-card>`; this is exposed as a CSS shadow part and can be accessed with `::part(content)`
 *
 * @cssprop [--zui-card-margin=0 0 30px] - Card margins
 * @cssprop [--zui-card-background-color=#fff] - Card background color
 */
class ZuiCard extends ZuiBaseElement {
  static get styles() {
    return [super.styles, style$F];
  }
  render() {
    return html` <div part="content" class="container"> <slot></slot> </div> `;
  }
}
window.customElements.define('zui-card', ZuiCard);

const style$E = css`:host{display:inline-flex;outline:none;font-size:inherit;cursor:pointer}:host .checkbox-container{position:relative;display:flex}:host .checkbox{position:relative;display:flex;width:1.25rem;height:1.25rem;flex-shrink:0;justify-content:center;align-items:center;margin:var(--zui-checkbox-checkbox-margin, 0.6875rem 0.6875rem 0.6875rem 0);background:#fff;border:.125rem solid var(--zui-gray);border-radius:.125rem;transition:border 125ms ease-out,opacity 125ms ease-out}:host .checkbox .checkmark-container{position:relative;display:flex;width:.75rem;height:.75rem;justify-content:center;align-items:center;transform:rotate(-50deg)}:host .checkbox .checkmark{position:absolute;top:.1875rem;left:.0625rem;display:block;width:.75rem;height:.35rem;border:solid rgba(0,0,0,0);border-width:0 0 .125rem .125rem;transform-origin:left top;border-bottom-left-radius:.09375rem}:host .checkbox .indeterminate-container{display:flex;width:.75rem;height:.75rem;justify-content:center;align-items:center}:host .checkbox .indeterminate{width:.75rem;height:0;border:solid #fff;border-width:.0625rem;border-radius:.0625rem}:host .label{display:block;width:100%;margin:var(--zui-checkbox-label-margin, 0.5625rem 1.25rem 0.5625rem 0)}:host .label .icon{display:none}:host .label .icon ::slotted(*){display:block}:host(:hover) .checkbox{border-color:var(--zui-gray-600)}:host(:hover) .checkbox .checkmark{border-color:rgba(0,0,0,0)}:host([checked]) .checkbox{background:var(--zui-checkbox-color, var(--zui-blue));border-color:var(--zui-checkbox-color, var(--zui-blue))}:host([checked]) .checkbox .checkmark{border-color:#fff}:host([checked]) .checkbox.checked-changed .checkmark{animation:check 500ms}:host([checked]) .checkbox.checked-changed .animate{position:absolute;top:0;right:0;bottom:0;left:-0.125rem;width:2.625rem;height:2.625rem;margin:auto auto auto -0.6875rem;background:var(--zui-checkbox-animate-color, var(--zui-blue-200));border-radius:.125rem;animation:scaleIn .35s ease-in-out forwards}:host(:hover[checked]) .checkbox{opacity:.9}:host(:hover[checked]) .checkbox .checkmark{border-color:#fff}:host([indeterminate]) .checkbox{background:var(--zui-checkbox-color, var(--zui-blue));border-color:var(--zui-checkbox-color, var(--zui-blue))}:host([indeterminate]) .checkbox .indeterminate{border-color:#fff}:host([indeterminate]) .checkbox.checked-changed .indeterminate{animation:indeterminate 250ms}:host([indeterminate]) .checkbox.checked-changed .animate{position:absolute;top:0;right:0;bottom:0;left:-0.125rem;width:2.625rem;height:2.625rem;margin:auto auto auto -0.6875rem;background:var(--zui-checkbox-animate-color, var(--zui-blue-200));border-radius:.125rem;animation:scaleIn .35s ease-in-out forwards}:host(:hover[indeterminate]) .checkbox{opacity:.9}:host(:hover[indeterminate]) .checkbox .indeterminate{border-color:#fff}:host([disabled]){cursor:not-allowed}:host([disabled]) .checkbox{border-color:var(--zui-gray-200)}:host([disabled]) .label{color:var(--zui-gray-300)}:host([disabled][checked]) .checkbox{background:var(--zui-gray-200)}:host([disabled][checked]) .checkbox .animate{background:var(--zui-gray-200)}:host(.gallery) .checkbox-container{position:relative;width:100%;max-width:var(--zui-checkbox-gallery-width, 8.125rem);padding:1.875rem;background:#fff;border:.0625rem solid rgba(0,0,0,0);border-radius:.375rem;box-shadow:0 .0625rem .1875rem 0 rgba(0,0,0,.16);transition:background .3s ease-out,border .3s ease-out,box-shadow .3s ease-out}:host(.gallery) .checkbox-container:hover{background:var(--zui-gray-50);box-shadow:0 .1875rem .375rem 0 rgba(0,0,0,.16)}:host(.gallery) .checkbox-container:hover .checkbox{background:rgba(0,0,0,0)}:host(.gallery) .checkbox{position:absolute;top:-0.375rem;left:-0.375rem;margin:.6875rem;transition:opacity .3s ease-out,background .3s ease-out}:host(.gallery) .label{display:block;margin:0;text-align:center}:host(.gallery) .label .icon{display:block;width:100%;padding-bottom:.9375rem}:host(.gallery) .label .icon *{max-width:100%;margin:0 auto}:host(.gallery) .label .label-text{font-weight:600}:host(.gallery[checked]) .checkbox-container{background:var(--zui-checkbox-gallery-background, var(--zui-blue-100));border:.0625rem solid var(--zui-checkbox-color, var(--zui-blue));box-shadow:none}:host(.gallery[checked]) .checkbox-container:hover{border-color:var(--zui-checkbox-hover-color, var(--zui-blue-600))}:host(.gallery[checked]) .checkbox-container:hover .checkbox{background:var(--zui-checkbox-color, var(--zui-blue))}:host(.gallery[checked]) .checkbox{background:var(--zui-checkbox-color, var(--zui-blue));border-color:var(--zui-checkbox-color, var(--zui-blue))}:host(.gallery[disabled]) .checkbox-container,:host(.gallery[disabled]) .checkbox-container:hover{background:var(--zui-gray-100);border:0;box-shadow:none}:host(.gallery[disabled]) .checkbox{background:rgba(0,0,0,0);border-color:var(--zui-gray-200)}:host(.gallery[disabled]) .checkbox .checkmark{border-color:rgba(0,0,0,0)}:host(.gallery[disabled]) .label .icon{opacity:.5}:host(.gallery[checked][disabled]) .checkbox-container:hover .checkbox{background:var(--zui-gray-200)}:host(.gallery[checked][disabled]) .checkbox{background:var(--zui-gray-200);border-color:var(--zui-gray-200)}:host(.gallery[checked][disabled]) .checkbox .checkmark{border-color:#fff}:host(.gallery.no-dropshadow) .checkbox-container{border:.0625rem solid var(--zui-gray-300);box-shadow:none}:host(.gallery.no-dropshadow) .checkbox-container:hover{background:var(--zui-gray-50)}:host(.gallery.no-dropshadow[checked]) .checkbox-container:hover{background:var(--zui-checkbox-gallery-color, var(--zui-blue-100))}@keyframes check{0%{width:0;height:0}33%{width:0;height:.35rem}66%{width:.6875rem;height:.35rem}}@keyframes scaleIn{from{opacity:.5;transform:scale(0.5, 0.5)}to{opacity:0;transform:scale(1, 1)}}@keyframes indeterminate{0%{width:0}50%{width:.34375rem}100%{width:.6875rem}}`;

var __decorate$B = undefined && undefined.__decorate || function (decorators, target, key, desc) {
  var c = arguments.length,
    r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc,
    d;
  if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
  return c > 3 && r && Object.defineProperty(target, key, r), r;
};
/**
 * Checkbox form control.
 * @element zui-checkbox
 *
 * @event change - When the checked state changes, an event is dispatched with the `checked` boolean details
 *
 * @slot - Default, unnamed slot; for inserting label text, if applicable, into `<zui-checkbox>`
 * @slot icon - Used to create "gallery" checkboxes
 *
 * @attr {string | null} [name=null] - The name of this element that is associated with form submission
 * @attr {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission
 *
 * @prop {string | null} [name=null] - The name of this element that is associated with form submission
 * @prop {boolean} [disabled=false] - Represents whether a user can make changes to this element; if true, the value of this element will be excluded from the form submission
 *
 * @cssprop [--zui-checkbox-color=var(--zui-blue)] - (default / `gallery`): checkbox background color
 * @cssprop [--zui-checkbox-animate-color=var(--zui-blue-200)] - (default): checkbox background color while animating, on click triggers animation
 * @cssprop [--zui-checkbox-checkbox-margin=0.6875rem 0.6875rem 0