/*!
 * (C) Gasco https://gasco-web-component.herokuapp.com/ - MIT License
 */
'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-9c2d04b3.js');
const index$1 = require('./index-94ee0584.js');
const helpers = require('./helpers-fd0d0292.js');
const index$2 = require('./index-fb27bfc6.js');
const theme = require('./theme-dfe81c2b.js');

const gascoItemMdCss = ":host{--border-radius:0px;--border-width:0px;--border-style:solid;--padding-top:0px;--padding-bottom:0px;--padding-end:0px;--padding-start:0px;--inner-border-width:0px;--inner-padding-top:0px;--inner-padding-bottom:0px;--inner-padding-start:0px;--inner-padding-end:0px;--inner-box-shadow:none;--show-full-highlight:0;--show-inset-highlight:0;--detail-icon-color:initial;--detail-icon-font-size:20px;--detail-icon-opacity:0.25;--color-activated:var(--color);--color-focused:var(--color);--color-hover:var(--color);--ripple-color:currentColor;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;display:block;position:relative;align-items:center;justify-content:space-between;outline:none;color:var(--color);font-family:var(--gasco-font-family, inherit);text-align:initial;text-decoration:none;overflow:hidden;box-sizing:border-box;transition:300ms}:host(.table-action) .input-wrapper{text-align:center;justify-content:center}:host(.gasco-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native{background:var(--gasco-color-base);color:var(--gasco-color-contrast)}:host(.gasco-color:not(.item-fill-solid):not(.item-fill-outline)) .item-native,:host(.gasco-color:not(.item-fill-solid):not(.item-fill-outline)) .item-inner{border-color:var(--gasco-color-shade)}:host(.gasco-activated) .item-native{color:var(--color-activated)}:host(.gasco-activated) .item-native::after{background:var(--background-activated);opacity:var(--background-activated-opacity)}:host(.gasco-color.gasco-activated) .item-native{color:var(--gasco-color-contrast)}:host(.gasco-focused) .item-native{color:var(--color-focused)}:host(.gasco-focused) .item-native::after{background:var(--background-focused);opacity:var(--background-focused-opacity)}:host(.gasco-color.gasco-focused) .item-native{color:var(--gasco-color-contrast)}:host(.gasco-color.gasco-focused) .item-native::after{background:var(--gasco-color-contrast)}@media (any-hover: hover){:host(.gasco-activatable:not(.gasco-focused):hover) .item-native{color:var(--color-hover)}:host(.gasco-activatable:not(.gasco-focused):hover) .item-native::after{background:var(--background-hover);opacity:var(--background-hover-opacity)}:host(.gasco-color.gasco-activatable:not(.gasco-focused):hover) .item-native{color:var(--gasco-color-contrast)}:host(.gasco-color.gasco-activatable:not(.gasco-focused):hover) .item-native::after{background:var(--gasco-color-contrast)}:host-context(.accordion-animated) .item-native::after{background:#F2FCFF !important}}:host(.item-interactive-disabled:not(.item-multiple-inputs)){cursor:default;pointer-events:none}:host(.item-disabled){cursor:default;opacity:0.3;pointer-events:none}.item-native{border-radius:var(--border-radius);margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--gasco-safe-area-left, 0px));padding-right:var(--padding-end);padding-top:var(--padding-top);padding-bottom:var(--padding-bottom);display:flex;position:relative;align-items:inherit;justify-content:inherit;color:var(--color);font-size:16px;font-weight:400;line-height:24px;width:100%;min-height:var(--min-height);transition:var(--transition);border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);outline:none;background:var(--background);transition:300ms;overflow:inherit;box-sizing:border-box;z-index:1}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-native{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--gasco-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--gasco-safe-area-left, 0px));-webkit-padding-end:var(--padding-end);padding-inline-end:var(--padding-end)}}a.item-native{font-weight:400;font-size:16px;line-height:24px;color:#4D4D4D;text-decoration:none;transition:300ms}a.item-native.router-active{color:#0090C6}.item-native::-moz-focus-inner{border:0}.item-native::after{left:0;right:0;top:0;bottom:0;position:absolute;content:\"\";opacity:0;transition:var(--transition);z-index:-1}button,a{cursor:pointer;user-select:none;-webkit-user-drag:none}.item-inner{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:var(--inner-padding-start);padding-right:calc(var(--gasco-safe-area-right, 0px) + var(--inner-padding-end));padding-top:var(--inner-padding-top);padding-bottom:var(--inner-padding-bottom);display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);box-shadow:var(--inner-box-shadow);overflow:inherit;box-sizing:border-box}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-inner{padding-left:unset;padding-right:unset;-webkit-padding-start:var(--inner-padding-start);padding-inline-start:var(--inner-padding-start);-webkit-padding-end:calc(var(--gasco-safe-area-right, 0px) + var(--inner-padding-end));padding-inline-end:calc(var(--gasco-safe-area-right, 0px) + var(--inner-padding-end))}}.item-bottom{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:calc(var(--padding-start) + var(--gasco-safe-area-left, 0px));padding-right:var(--inner-padding-end);padding-top:0;padding-bottom:0;display:flex;justify-content:space-between}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-bottom{padding-left:unset;padding-right:unset;-webkit-padding-start:calc(var(--padding-start) + var(--gasco-safe-area-left, 0px));padding-inline-start:calc(var(--padding-start) + var(--gasco-safe-area-left, 0px));-webkit-padding-end:var(--inner-padding-end);padding-inline-end:var(--inner-padding-end)}}.item-detail-icon{color:var(--detail-icon-color);font-size:var(--detail-icon-font-size);opacity:var(--detail-icon-opacity)}::slotted(gasco-icon){font-size:1.6em}::slotted(gasco-button){--margin-top:0;--margin-bottom:0;--margin-start:0;--margin-end:0;z-index:1}::slotted(gasco-label:not([slot=end])){flex:1}:host(.item-input){align-items:center}.input-wrapper{display:flex;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;text-overflow:ellipsis;overflow:inherit;box-sizing:border-box}:host-context(.accordion-animated) .input-wrapper{gap:2rem}:host(.item-label-stacked),:host(.item-label-floating){align-items:start}:host(.item-label-stacked) .input-wrapper,:host(.item-label-floating) .input-wrapper{flex:1;flex-direction:column}.item-highlight,.item-inner-highlight{left:0;right:0;top:0;bottom:0;border-radius:inherit;position:absolute;width:100%;height:100%;transform:scaleX(0);transition:transform 200ms, border-bottom-width 200ms;z-index:2;box-sizing:border-box;pointer-events:none}:host(.item-interactive.item-has-focus) .item-native{caret-color:var(--highlight-background)}:host(.item-interactive.gasco-focused),:host(.item-interactive.item-has-focus),:host(.item-interactive.gasco-touched.gasco-invalid){--full-highlight-height:calc(var(--highlight-height) * var(--show-full-highlight));--inset-highlight-height:calc(var(--highlight-height) * var(--show-inset-highlight))}:host(.item-interactive.gasco-focused),:host(.item-interactive.item-has-focus){--highlight-background:var(--highlight-color-focused)}:host(.item-interactive.gasco-valid){--highlight-background:var(--highlight-color-valid)}:host(.item-interactive.gasco-invalid){--highlight-background:var(--highlight-color-invalid)}:host(.item-interactive.gasco-invalid) ::slotted([slot=helper]){display:none}::slotted([slot=error]){display:none;color:var(--highlight-color-invalid)}:host(.item-interactive.gasco-invalid) ::slotted([slot=error]){display:block}:host(:not(.item-label)) ::slotted(gasco-select){--padding-start:0;max-width:none}:host(.item-label-stacked) ::slotted(gasco-select),:host(.item-label-floating) ::slotted(gasco-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0;align-self:stretch;width:100%;max-width:100%}:host(:not(.item-label)) ::slotted(gasco-datetime){--padding-start:0}:host(.item-label-stacked) ::slotted(gasco-datetime),:host(.item-label-floating) ::slotted(gasco-datetime){--padding-start:0;width:100%}:host(.item-multiple-inputs) ::slotted(gasco-checkbox),:host(.item-multiple-inputs) ::slotted(gasco-datetime),:host(.item-multiple-inputs) ::slotted(gasco-radio),:host(.item-multiple-inputs) ::slotted(gasco-select){position:relative}:host(.item-textarea){align-items:stretch}::slotted(gasco-reorder[slot]){margin-top:0;margin-bottom:0}gasco-ripple-effect{color:var(--ripple-color)}:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted([slot=helper]),::slotted([slot=error]),.item-counter{padding-top:5px;font-size:12px;z-index:1}.item-counter{margin-left:auto;color:var(--gasco-color-step-550, #737373);white-space:nowrap;padding-inline-start:16px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.item-counter{margin-left:unset;-webkit-margin-start:auto;margin-inline-start:auto}}@media (prefers-reduced-motion: reduce){.item-highlight,.item-inner-highlight{transition:none}}:host{--min-height:48px;--background:var(--gasco-item-background, var(--gasco-background-color, #fff));--background-activated:transparent;--background-focused:currentColor;--background-hover:currentColor;--background-activated-opacity:0;--background-focused-opacity:.12;--background-hover-opacity:.04;--border-color:var(--gasco-color-light-contrast, #CCCCCC);--color:#4D4D4D;--transition:all 15ms linear;--padding-start:16px;--inner-padding-end:16px;--inner-border-width:1px 0 0 0;--highlight-height:1px;--highlight-color-focused:var(--gasco-color-primary, #00A3E0);--highlight-color-valid:var(--gasco-color-success, #339900);--highlight-color-invalid:var(--gasco-color-danger, #FA6969);font-size:16px;line-height:24px;font-weight:400;color:var(--color);text-transform:none}:host(.item-fill-outline){--highlight-height:2px}:host(.sub-item){--min-height:0}:host(.sub-item) .input-wrapper{padding-left:2.8rem;font-weight:400;font-size:12px;line-height:16px;padding-block:10px}:host(.item-fill-none.item-interactive.gasco-focus) .item-highlight,:host(.item-fill-none.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-none.item-interactive.gasco-touched.gasco-invalid) .item-highlight{transform:scaleX(1);border-width:0 0 var(--full-highlight-height) 0;border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-none.item-interactive.gasco-focus) .item-native,:host(.item-fill-none.item-interactive.item-has-focus) .item-native,:host(.item-fill-none.item-interactive.gasco-touched.gasco-invalid) .item-native{border-bottom-color:var(--highlight-background)}:host(.item-fill-outline.item-interactive.gasco-focus) .item-highlight,:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight{transform:scaleX(1)}:host(.item-fill-outline.item-interactive.gasco-focus) .item-highlight,:host(.item-fill-outline.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-outline.item-interactive.gasco-touched.gasco-invalid) .item-highlight{border-width:var(--full-highlight-height);border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-outline.item-interactive.gasco-touched.gasco-invalid) .item-native{border-color:var(--highlight-background)}:host(.item-fill-solid.item-interactive.gasco-focus) .item-highlight,:host(.item-fill-solid.item-interactive.item-has-focus) .item-highlight,:host(.item-fill-solid.item-interactive.gasco-touched.gasco-invalid) .item-highlight{transform:scaleX(1);border-width:0 0 var(--full-highlight-height) 0;border-style:var(--border-style);border-color:var(--highlight-background)}:host(.item-fill-solid.item-interactive.gasco-focus) .item-native,:host(.item-fill-solid.item-interactive.item-has-focus) .item-native,:host(.item-fill-solid.item-interactive.gasco-touched.gasco-invalid) .item-native{border-bottom-color:var(--highlight-background)}:host(.gasco-color.gasco-activated) .item-native::after{background:transparent}:host(.item-has-focus) .item-native{caret-color:var(--highlight-color-focused)}:host(.item-interactive){--border-width:1px 0 0 0;--inner-border-width:0;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-full.item-divider){--border-width:1px 0 0 0;--show-full-highlight:1;--show-inset-highlight:0}:host(.item-lines-inset){--inner-border-width:1px 0 0 0;--show-full-highlight:0;--show-inset-highlight:1}:host(.item-lines-inset),:host(.item-lines-none){--border-width:0;--show-full-highlight:0}:host(.item-lines-full),:host(.item-lines-none){--inner-border-width:0;--show-inset-highlight:0}:host(.item-fill-outline) .item-highlight{--position-gasco-offset:calc(-1 * var(--border-width));left:var(--positgasco-offset);top:var(--positgasco-offset);width:calc(100% + 2 * var(--border-width));height:calc(100% + 2 * var(--border-width));transition:none}:host-context([dir=rtl]):host(.item-fill-outline) .item-highlight,:host-context([dir=rtl]).item-fill-outline .item-highlight{left:unset;right:unset;right:var(--positgasco-offset)}:host(.item-fill-outline.gasco-focused) .item-native,:host(.item-fill-outline.item-has-focus) .item-native{border-color:transparent}:host(.item-multi-line) ::slotted([slot=start]),:host(.item-multi-line) ::slotted([slot=end]){margin-top:16px;margin-bottom:16px;align-self:flex-start}::slotted([slot=start]){margin-right:20px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=start]){margin-right:unset;-webkit-margin-end:20px;margin-inline-end:20px}}::slotted([slot=end]){margin-left:20px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){::slotted([slot=end]){margin-left:unset;-webkit-margin-start:20px;margin-inline-start:20px}}:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-solid) ::slotted([slot=end]),:host(.item-fill-outline) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=end]){align-self:center}::slotted(gasco-icon){color:rgba(var(--gasco-text-color-rgb, 0, 0, 0), 0.54);font-size:24px}:host(.gasco-color:not(.item-fill-solid):not(.item-fill-outline)) ::slotted(gasco-icon){color:var(--gasco-color-contrast)}:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=start]){margin-right:8px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-fill-solid) ::slotted([slot=start]),:host(.item-fill-outline) ::slotted([slot=start]){margin-right:unset;-webkit-margin-end:8px;margin-inline-end:8px}}::slotted(gasco-label){margin-left:0;margin-right:0;margin-top:10px;margin-bottom:10px}:host(.item-label-stacked) ::slotted([slot=end]),:host(.item-label-floating) ::slotted([slot=end]){margin-top:7px;margin-bottom:7px}:host(.item-label-fixed) ::slotted(gasco-select),:host(.item-label-fixed) ::slotted(gasco-datetime){--padding-start:8px}:host(.item-toggle) ::slotted(gasco-label),:host(.item-radio) ::slotted(gasco-label){margin-left:0}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-toggle) ::slotted(gasco-label),:host(.item-radio) ::slotted(gasco-label){margin-left:unset;-webkit-margin-start:0;margin-inline-start:0}}::slotted(.button-small){--padding-top:0;--padding-bottom:0;--padding-start:.6em;--padding-end:.6em;height:25px;font-size:12px}:host(.item-label-floating),:host(.item-label-stacked){--min-height:55px}:host(.item-label-stacked) ::slotted(gasco-select),:host(.item-label-floating) ::slotted(gasco-select){--padding-top:8px;--padding-bottom:8px;--padding-start:0}:host(.gasco-focused:not(.gasco-color)) ::slotted(.label-stacked),:host(.gasco-focused:not(.gasco-color)) ::slotted(.label-floating),:host(.item-has-focus:not(.gasco-color)) ::slotted(.label-stacked),:host(.item-has-focus:not(.gasco-color)) ::slotted(.label-floating){color:var(--gasco-color-primary, #00A3E0)}:host(.gasco-color){--highlight-color-focused:var(--gasco-color-contrast)}:host(.item-label-color){--highlight-color-focused:var(--gasco-color-base)}:host(.item-fill-solid.gasco-color),:host(.item-fill-outline.gasco-color){--highlight-color-focused:var(--gasco-color-base)}:host(.item-fill-solid){--background:var(--gasco-color-step-50, #f2f2f2);--background-hover:var(--gasco-color-step-100, #e6e6e6);--background-focused:var(--gasco-color-step-150, #d9d9d9);--border-width:1px 0 0 0;--inner-border-width:0;border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.item-fill-solid),:host-context([dir=rtl]).item-fill-solid{border-top-left-radius:4px;border-top-right-radius:4px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host(.item-fill-solid) .item-native{--border-color:var(--gasco-color-step-500, gray)}:host(.item-fill-solid.gasco-focused) .item-native,:host(.item-fill-solid.item-has-focus) .item-native{--background:var(--background-focused)}:host(.item-fill-solid.item-shape-round){border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-right-radius:0;border-bottom-left-radius:0}:host-context([dir=rtl]):host(.item-fill-solid.item-shape-round),:host-context([dir=rtl]).item-fill-solid.item-shape-round{border-top-left-radius:16px;border-top-right-radius:16px;border-bottom-right-radius:0;border-bottom-left-radius:0}@media (any-hover: hover){:host(.item-fill-solid:hover) .item-native{--background:var(--background-hover);--border-color:var(--gasco-color-step-750, #404040)}}:host(.item-fill-outline){--ripple-color:transparent;--background-focused:transparent;--background-hover:transparent;--border-color:var(--gasco-color-step-500, gray);--border-width:1px;border:none;overflow:visible}:host(.item-fill-outline) .item-native{--native-padding-left:16px;border-radius:4px}:host(.item-fill-outline.item-shape-round) .item-native{--inner-padding-start:16px;border-radius:28px}:host(.item-fill-outline.item-shape-round) .item-bottom{padding-left:32px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host(.item-fill-outline.item-shape-round) .item-bottom{padding-left:unset;-webkit-padding-start:32px;padding-inline-start:32px}}:host(.item-fill-outline.item-label-floating.gasco-focused) .item-native ::slotted(gasco-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.gasco-focused) .item-native ::slotted(gasco-textarea:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(gasco-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-focus) .item-native ::slotted(gasco-textarea:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(gasco-input:not(:first-child)),:host(.item-fill-outline.item-label-floating.item-has-value) .item-native ::slotted(gasco-textarea:not(:first-child)){transform:translateY(-14px)}@media (any-hover: hover){:host(.item-fill-outline:hover) .item-native{--border-color:var(--gasco-color-step-750, #404040)}}.item-counter{letter-spacing:0.0333333333em}";

const GascoItem = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.labelColorStyles = {};
    this.itemStyles = new Map();
    this.multipleInputs = false;
    this.focusable = true;
    /**
     * If `true`, a button tag will be rendered and the item will be tappable.
     */
    this.button = true;
    /**
     * The icon to use when `detail` is set to `true`.
     */
    this.detailIcon = index$1.chevronForward;
    /**
     * If `true`, the user cannot interact with the item.
     */
    this.disabled = false;
    /**
     * If `true`, the user cannot interact with the item.
     */
    this.divider = false;
    this.subItem = false;
    /**
     * How the bottom border should be displayed on the item.
     */
    this.lines = 'full';
    /**
     * If `true`, a character counter will display the ratio of characters used and the total character limit. Only applies when the `maxlength` property is set on the inner `gasco-input` or `gasco-textarea`.
     */
    this.counter = false;
    /**
     * The type of the button. Only used when an `onclick` or `button` property is present.
     */
    this.type = 'button';
  }
  counterFormatterChanged() {
    this.updateCounterOutput(this.getFirstInput());
  }
  handleGascoChange(ev) {
    if (this.counter && ev.target === this.getFirstInput()) {
      this.updateCounterOutput(ev.target);
    }
  }
  labelColorChanged(ev) {
    const { color } = this;
    // There will be a conflict with item color if
    // we apply the label color to item, so we ignore
    // the label color if the user sets a color on item
    if (color === undefined) {
      this.labelColorStyles = ev.detail;
    }
  }
  itemStyle(ev) {
    ev.stopPropagation();
    const tagName = ev.target.tagName;
    const updatedStyles = ev.detail;
    const newStyles = {};
    const childStyles = this.itemStyles.get(tagName) || {};
    let hasStyleChange = false;
    Object.keys(updatedStyles).forEach((key) => {
      if (updatedStyles[key]) {
        const itemKey = `item-${key}`;
        if (!childStyles[itemKey]) {
          hasStyleChange = true;
        }
        newStyles[itemKey] = true;
      }
    });
    if (!hasStyleChange && Object.keys(newStyles).length !== Object.keys(childStyles).length) {
      hasStyleChange = true;
    }
    if (hasStyleChange) {
      this.itemStyles.set(tagName, newStyles);
      index.forceUpdate(this);
    }
  }
  connectedCallback() {
    if (this.counter) {
      this.updateCounterOutput(this.getFirstInput());
    }
    this.hasStartEl();
  }
  componentDidUpdate() {
    // Do not use @Listen here to avoid making all items
    // appear as clickable to screen readers
    const input = this.getFirstInput();
    if (input && !this.clickListener) {
      this.clickListener = (ev) => this.delegateFocus(ev, input);
      this.el.addEventListener('click', this.clickListener);
    }
  }
  disconnectedCallback() {
    const input = this.getFirstInput();
    if (input && this.clickListener) {
      this.el.removeEventListener('click', this.clickListener);
      this.clickListener = undefined;
    }
  }
  componentDidLoad() {
    helpers.raf(() => {
      this.setMultipleInputs();
      this.focusable = this.isFocusable();
    });
  }
  // If the item contains multiple clickable elements and/or inputs, then the item
  // should not have a clickable input cover over the entire item to prevent
  // interfering with their individual click events
  setMultipleInputs() {
    // The following elements have a clickable cover that is relative to the entire item
    const covers = this.el.querySelectorAll('gasco-checkbox, gasco-datetime, gasco-select, gasco-radio');
    // The following elements can accept focus alongside the previous elements
    // therefore if these elements are also a child of item, we don't want the
    // input cover on top of those interfering with their clicks
    const inputs = this.el.querySelectorAll('gasco-input, gasco-range, gasco-autocomplete');
    // The following elements should also stay clickable when an input with cover is present
    const clickables = this.el.querySelectorAll('gasco-button, a, button');
    // Check for multiple inputs to change the position of the input cover to relative
    // for all of the covered inputs above
    this.multipleInputs =
      covers.length + inputs.length > 1 ||
        covers.length + clickables.length > 1 ||
        (covers.length > 0 && this.isClickable());
  }
  // If the item contains an input including a checkbox, datetime, select, or radio
  // then the item will have a clickable input cover that covers the item
  // that should get the hover, focused and activated states UNLESS it has multiple
  // inputs, then those need to individually get each click
  hasCover() {
    const inputs = this.el.querySelectorAll('gasco-checkbox, gasco-datetime, gasco-select, gasco-radio');
    return inputs.length === 1 && !this.multipleInputs;
  }
  // If the item has an href or button property it will render a native
  // anchor or button that is clickable
  isClickable() {
    return this.href !== undefined || this.button;
  }
  canActivate() {
    return this.isClickable() || this.hasCover();
  }
  isFocusable() {
    const focusableChild = this.el.querySelector('.gasco-focusable');
    return this.canActivate() || focusableChild !== null;
  }
  getFirstInput() {
    const inputs = this.el.querySelectorAll('gasco-input, gasco-textarea');
    return inputs[0];
  }
  // This is needed for WebKit due to a delegatesFocus bug where
  // clicking on the left padding of an item is not focusing the input
  // but is opening the keyboard. It will no longer be needed with
  // iOS 14.
  delegateFocus(ev, input) {
    const clickedItem = ev.target.tagName === 'GASCO-ITEM';
    let firstActive = false;
    // If the first input is the same as the active element we need
    // to focus the first input again, but if the active element
    // is another input inside of the item we shouldn't switch focus
    if (document.activeElement) {
      firstActive = input.querySelector('input, textarea') === document.activeElement;
    }
    // Only focus the first input if we clicked on an gasco-item
    // and the first input exists
    if (clickedItem && (firstActive || !this.multipleInputs)) {
      input.fireFocusEvents = false;
      input.setBlur();
      input.setFocus();
      helpers.raf(() => {
        input.fireFocusEvents = true;
      });
    }
  }
  updateCounterOutput(inputEl) {
    var _a, _b;
    const { counter, counterFormatter, defaultCounterFormatter } = this;
    if (counter && !this.multipleInputs && (inputEl === null || inputEl === void 0 ? void 0 : inputEl.maxlength) !== undefined) {
      const length = (_b = (_a = inputEl === null || inputEl === void 0 ? void 0 : inputEl.value) === null || _a === void 0 ? void 0 : _a.toString().length) !== null && _b !== void 0 ? _b : 0;
      if (counterFormatter === undefined) {
        this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
      }
      else {
        try {
          this.counterString = counterFormatter(length, inputEl.maxlength);
        }
        catch (e) {
          index$2.printGascoError('Exception in provided `counterFormatter`.', e);
          // Fallback to the default counter formatter when an exception happens
          this.counterString = defaultCounterFormatter(length, inputEl.maxlength);
        }
      }
    }
  }
  defaultCounterFormatter(length, maxlength) {
    return `${length} / ${maxlength}`;
  }
  hasStartEl() {
    const startEl = this.el.querySelector('[slot="start"]');
    if (startEl !== null) {
      this.el.classList.add('item-has-start-slot');
    }
  }
  render() {
    const { download, fill, labelColorStyles, lines, disabled, subItem, href, divider, rel, shape, target, } = this;
    const childStyles = {};
    const clickable = this.isClickable();
    const canActivate = this.canActivate();
    const TagType = clickable ? (href === undefined ? 'button' : 'a') : 'div';
    const attrs = TagType === 'button'
      ? { type: this.type }
      : {
        download,
        href,
        rel,
        target,
      };
    this.itemStyles.forEach((value) => {
      Object.assign(childStyles, value);
    });
    const exactRouter = attrs.href === window.location.pathname ? ' router-active' : '';
    const ariaDisabled = disabled || childStyles['item-interactive-disabled'] ? 'true' : null;
    const fillValue = fill || 'none';
    const inList = theme.hostContext('gasco-list', this.el);
    return (index.h(index.Host, { "aria-disabled": ariaDisabled, class: Object.assign(Object.assign(Object.assign({}, childStyles), labelColorStyles), theme.createColorClasses(this.color, {
        item: true,
        [`item-lines-${lines}`]: lines !== undefined,
        [`item-fill-${fillValue}`]: true,
        [`item-shape-${shape}`]: shape !== undefined,
        'item-divider': divider,
        'item-disabled': disabled,
        'sub-item': subItem,
        'in-list': inList,
        'item-multiple-inputs': this.multipleInputs,
        'gasco-activatable': canActivate,
        'gasco-focusable': this.focusable,
        'item-rtl': document.dir === 'rtl',
      })), role: inList ? 'listitem' : null }, index.h(TagType, Object.assign({}, attrs, { part: "native", disabled: disabled, class: `item-native${exactRouter}` }), index.h("slot", { name: "start" }), index.h("div", { class: "item-inner" }, index.h("div", { class: "input-wrapper" }, index.h("slot", null)), index.h("slot", { name: "end" }), index.h("div", { class: "item-inner-highlight" })), index.h("div", { class: "item-highlight" })), index.h("slot", { name: "sub-list" }), index.h("div", { class: "item-bottom" }, index.h("slot", { name: "error" }), index.h("slot", { name: "helper" }))));
  }
  static get delegatesFocus() { return true; }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "counterFormatter": ["counterFormatterChanged"]
  }; }
};
GascoItem.style = gascoItemMdCss;

const gascoLabelMdCss = ".item.sc-gasco-label-h,.item .sc-gasco-label-h{--color:#072531;display:block;color:var(--color);font-family:var(--gasco-font-family, inherit);font-size:initial;text-overflow:ellipsis;white-space:nowrap;overflow:hidden;box-sizing:border-box}.accordion-animated.sc-gasco-label-h,.accordion-animated .sc-gasco-label-h{font-weight:600;font-size:28px;line-height:36px;text-align:left;color:var(--color);max-width:max-content}.accordion-animated.sc-gasco-label-h:nth-child(2),.accordion-animated .sc-gasco-label-h:nth-child(2){font-weight:400;font-size:18px;line-height:28px;color:#4D4D4D}.gasco-color.sc-gasco-label-h{color:var(--gasco-color-base)}.gasco-text-wrap.sc-gasco-label-h,[text-wrap].sc-gasco-label-h{white-space:normal}.item-interactive-disabled.sc-gasco-label-h:not(.item-multiple-inputs),.item-interactive-disabled:not(.item-multiple-inputs) .sc-gasco-label-h{cursor:default;opacity:0.3;pointer-events:none}.item-input.sc-gasco-label-h,.item-input .sc-gasco-label-h{flex:initial;max-width:200px;pointer-events:none}.item-textarea.sc-gasco-label-h,.item-textarea .sc-gasco-label-h{align-self:baseline}.label-fixed.sc-gasco-label-h{flex:0 0 100px;width:100px;min-width:100px;max-width:200px}.label-stacked.sc-gasco-label-h,.label-floating.sc-gasco-label-h{margin-bottom:0;align-self:stretch;width:auto;max-width:100%}.label-no-animate.label-floating.sc-gasco-label-h{transition:none}.sc-gasco-label-s h1,.sc-gasco-label-s h2,.sc-gasco-label-s h3,.sc-gasco-label-s h4,.sc-gasco-label-s h5,.sc-gasco-label-s h6{text-overflow:inherit;overflow:inherit}@media only screen and (max-width: 768px){.accordion-animated.sc-gasco-label-h,.accordion-animated .sc-gasco-label-h{font-size:20px;line-height:28px}}.gasco-text-wrap.sc-gasco-label-h,[text-wrap].sc-gasco-label-h{line-height:1.5}.label-stacked.sc-gasco-label-h,.label-floating.sc-gasco-label-h{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;transform-origin:top left}.label-stacked.label-rtl.sc-gasco-label-h,.label-floating.label-rtl.sc-gasco-label-h{transform-origin:top right}.label-stacked.sc-gasco-label-h{transform:translateY(50%) scale(0.75);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1)}.label-floating.sc-gasco-label-h{transform:translateY(96%);transition:color 150ms cubic-bezier(0.4, 0, 0.2, 1), transform 150ms cubic-bezier(0.4, 0, 0.2, 1)}.gasco-focused.label-floating.sc-gasco-label-h,.gasco-focused .label-floating.sc-gasco-label-h,.item-has-focus.label-floating.sc-gasco-label-h,.item-has-focus .label-floating.sc-gasco-label-h,.item-has-placeholder.sc-gasco-label-h:not(.item-input).label-floating,.item-has-placeholder:not(.item-input) .label-floating.sc-gasco-label-h,.item-has-value.label-floating.sc-gasco-label-h,.item-has-value .label-floating.sc-gasco-label-h{transform:translateY(50%) scale(0.75)}.item-fill-outline.gasco-focused.label-floating.sc-gasco-label-h,.item-fill-outline.gasco-focused .label-floating.sc-gasco-label-h,.item-fill-outline.item-has-focus.label-floating.sc-gasco-label-h,.item-fill-outline.item-has-focus .label-floating.sc-gasco-label-h,.item-fill-outline.item-has-placeholder.sc-gasco-label-h:not(.item-input).label-floating,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-gasco-label-h,.item-fill-outline.item-has-value.label-floating.sc-gasco-label-h,.item-fill-outline.item-has-value .label-floating.sc-gasco-label-h{transform:translateY(-6px) scale(0.75);position:relative;max-width:min-content;background-color:var(--gasco-item-background, var(--gasco-background-color, #fff));overflow:visible;z-index:3}.item-fill-outline.gasco-focused.label-floating.sc-gasco-label-h::before,.item-fill-outline.gasco-focused .label-floating.sc-gasco-label-h::before,.item-fill-outline.gasco-focused.label-floating.sc-gasco-label-h::after,.item-fill-outline.gasco-focused .label-floating.sc-gasco-label-h::after,.item-fill-outline.item-has-focus.label-floating.sc-gasco-label-h::before,.item-fill-outline.item-has-focus .label-floating.sc-gasco-label-h::before,.item-fill-outline.item-has-focus.label-floating.sc-gasco-label-h::after,.item-fill-outline.item-has-focus .label-floating.sc-gasco-label-h::after,.item-fill-outline.item-has-placeholder.sc-gasco-label-h:not(.item-input).label-floating::before,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-gasco-label-h::before,.item-fill-outline.item-has-placeholder.sc-gasco-label-h:not(.item-input).label-floating::after,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-gasco-label-h::after,.item-fill-outline.item-has-value.label-floating.sc-gasco-label-h::before,.item-fill-outline.item-has-value .label-floating.sc-gasco-label-h::before,.item-fill-outline.item-has-value.label-floating.sc-gasco-label-h::after,.item-fill-outline.item-has-value .label-floating.sc-gasco-label-h::after{position:absolute;width:4px;height:100%;background-color:var(--gasco-item-background, var(--gasco-background-color, #fff));content:\"\"}.item-fill-outline.gasco-focused.label-floating.sc-gasco-label-h::before,.item-fill-outline.gasco-focused .label-floating.sc-gasco-label-h::before,.item-fill-outline.item-has-focus.label-floating.sc-gasco-label-h::before,.item-fill-outline.item-has-focus .label-floating.sc-gasco-label-h::before,.item-fill-outline.item-has-placeholder.sc-gasco-label-h:not(.item-input).label-floating::before,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-gasco-label-h::before,.item-fill-outline.item-has-value.label-floating.sc-gasco-label-h::before,.item-fill-outline.item-has-value .label-floating.sc-gasco-label-h::before{left:calc(-1 * 4px)}.item-fill-outline.gasco-focused.label-floating.sc-gasco-label-h::after,.item-fill-outline.gasco-focused .label-floating.sc-gasco-label-h::after,.item-fill-outline.item-has-focus.label-floating.sc-gasco-label-h::after,.item-fill-outline.item-has-focus .label-floating.sc-gasco-label-h::after,.item-fill-outline.item-has-placeholder.sc-gasco-label-h:not(.item-input).label-floating::after,.item-fill-outline.item-has-placeholder:not(.item-input) .label-floating.sc-gasco-label-h::after,.item-fill-outline.item-has-value.label-floating.sc-gasco-label-h::after,.item-fill-outline.item-has-value .label-floating.sc-gasco-label-h::after{right:calc(-1 * 4px)}.item-fill-outline.gasco-focused.item-has-start-slot.label-floating.sc-gasco-label-h,.item-fill-outline.gasco-focused.item-has-start-slot .label-floating.sc-gasco-label-h,.item-fill-outline.item-has-focus.item-has-start-slot.label-floating.sc-gasco-label-h,.item-fill-outline.item-has-focus.item-has-start-slot .label-floating.sc-gasco-label-h,.item-fill-outline.item-has-placeholder.sc-gasco-label-h:not(.item-input).item-has-start-slot.label-floating,.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot .label-floating.sc-gasco-label-h,.item-fill-outline.item-has-value.item-has-start-slot.label-floating.sc-gasco-label-h,.item-fill-outline.item-has-value.item-has-start-slot .label-floating.sc-gasco-label-h{transform:translateX(-32px) translateY(-6px) scale(0.75)}.item-fill-outline.gasco-focused.item-has-start-slot.label-floating.label-rtl.sc-gasco-label-h,.item-fill-outline.gasco-focused.item-has-start-slot .label-floating.label-rtl.sc-gasco-label-h,.item-fill-outline.item-has-focus.item-has-start-slot.label-floating.label-rtl.sc-gasco-label-h,.item-fill-outline.item-has-focus.item-has-start-slot .label-floating.label-rtl.sc-gasco-label-h,.item-fill-outline.item-has-placeholder.sc-gasco-label-h:not(.item-input).item-has-start-slot.label-floating.label-rtl,.item-fill-outline.item-has-placeholder:not(.item-input).item-has-start-slot .label-floating.label-rtl.sc-gasco-label-h,.item-fill-outline.item-has-value.item-has-start-slot.label-floating.label-rtl.sc-gasco-label-h,.item-fill-outline.item-has-value.item-has-start-slot .label-floating.label-rtl.sc-gasco-label-h{transform:translateX(calc(-1 * -32px)) translateY(-6px) scale(0.75)}.gasco-focused.label-stacked.sc-gasco-label-h:not(.gasco-color),.gasco-focused .label-stacked.sc-gasco-label-h:not(.gasco-color),.gasco-focused.label-floating.sc-gasco-label-h:not(.gasco-color),.gasco-focused .label-floating.sc-gasco-label-h:not(.gasco-color),.item-has-focus.label-stacked.sc-gasco-label-h:not(.gasco-color),.item-has-focus .label-stacked.sc-gasco-label-h:not(.gasco-color),.item-has-focus.label-floating.sc-gasco-label-h:not(.gasco-color),.item-has-focus .label-floating.sc-gasco-label-h:not(.gasco-color){color:var(--gasco-color-primary, #00A3E0)}.gasco-focused.gasco-color.label-stacked.sc-gasco-label-h:not(.gasco-color),.gasco-focused.gasco-color .label-stacked.sc-gasco-label-h:not(.gasco-color),.gasco-focused.gasco-color.label-floating.sc-gasco-label-h:not(.gasco-color),.gasco-focused.gasco-color .label-floating.sc-gasco-label-h:not(.gasco-color),.item-has-focus.gasco-color.label-stacked.sc-gasco-label-h:not(.gasco-color),.item-has-focus.gasco-color .label-stacked.sc-gasco-label-h:not(.gasco-color),.item-has-focus.gasco-color.label-floating.sc-gasco-label-h:not(.gasco-color),.item-has-focus.gasco-color .label-floating.sc-gasco-label-h:not(.gasco-color){color:var(--gasco-color-contrast)}.item-fill-solid.gasco-focused.gasco-color.label-stacked.sc-gasco-label-h:not(.gasco-color),.item-fill-solid.gasco-focused.gasco-color .label-stacked.sc-gasco-label-h:not(.gasco-color),.item-fill-solid.gasco-focused.gasco-color.label-floating.sc-gasco-label-h:not(.gasco-color),.item-fill-solid.gasco-focused.gasco-color .label-floating.sc-gasco-label-h:not(.gasco-color),.item-fill-outline.gasco-focused.gasco-color.label-stacked.sc-gasco-label-h:not(.gasco-color),.item-fill-outline.gasco-focused.gasco-color .label-stacked.sc-gasco-label-h:not(.gasco-color),.item-fill-outline.gasco-focused.gasco-color.label-floating.sc-gasco-label-h:not(.gasco-color),.item-fill-outline.gasco-focused.gasco-color .label-floating.sc-gasco-label-h:not(.gasco-color),.item-fill-solid.item-has-focus.gasco-color.label-stacked.sc-gasco-label-h:not(.gasco-color),.item-fill-solid.item-has-focus.gasco-color .label-stacked.sc-gasco-label-h:not(.gasco-color),.item-fill-solid.item-has-focus.gasco-color.label-floating.sc-gasco-label-h:not(.gasco-color),.item-fill-solid.item-has-focus.gasco-color .label-floating.sc-gasco-label-h:not(.gasco-color),.item-fill-outline.item-has-focus.gasco-color.label-stacked.sc-gasco-label-h:not(.gasco-color),.item-fill-outline.item-has-focus.gasco-color .label-stacked.sc-gasco-label-h:not(.gasco-color),.item-fill-outline.item-has-focus.gasco-color.label-floating.sc-gasco-label-h:not(.gasco-color),.item-fill-outline.item-has-focus.gasco-color .label-floating.sc-gasco-label-h:not(.gasco-color){color:var(--gasco-color-base)}.gasco-invalid.gasco-touched.label-stacked.sc-gasco-label-h:not(.gasco-color),.gasco-invalid.gasco-touched .label-stacked.sc-gasco-label-h:not(.gasco-color),.gasco-invalid.gasco-touched.label-floating.sc-gasco-label-h:not(.gasco-color),.gasco-invalid.gasco-touched .label-floating.sc-gasco-label-h:not(.gasco-color){color:var(--highlight-color-invalid)}.sc-gasco-label-s h1{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:24px;font-weight:normal}.sc-gasco-label-s h2{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:16px;font-weight:normal}.sc-gasco-label-s h3,.sc-gasco-label-s h4,.sc-gasco-label-s h5,.sc-gasco-label-s h6{margin-left:0;margin-right:0;margin-top:2px;margin-bottom:2px;font-size:14px;font-weight:normal;line-height:normal}.sc-gasco-label-s p{margin-left:0;margin-right:0;margin-top:0;margin-bottom:2px;font-size:14px;line-height:20px;text-overflow:inherit;overflow:inherit}.sc-gasco-label-s>p{color:var(--gasco-color-step-600, #666666)}.sc-gasco-label-h.in-item-color.sc-gasco-label-s>p{color:inherit}";

const GascoLabel = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    this.gascoColor = index.createEvent(this, "gascoColor", 7);
    this.gascoStyle = index.createEvent(this, "gascoStyle", 7);
    this.inRange = false;
    this.noAnimate = false;
  }
  componentWillLoad() {
    this.inRange = !!this.el.closest('gasco-range');
    this.noAnimate = this.position === 'floating';
    this.emitStyle();
    this.emitColor();
  }
  componentDidLoad() {
    if (this.noAnimate) {
      setTimeout(() => {
        this.noAnimate = false;
      }, 1000);
    }
  }
  colorChanged() {
    this.emitColor();
  }
  positionChanged() {
    this.emitStyle();
  }
  emitColor() {
    const { color } = this;
    this.gascoColor.emit({
      'item-label-color': color !== undefined,
      [`gasco-color-${color}`]: color !== undefined,
    });
  }
  emitStyle() {
    const { inRange, position } = this;
    // If the label is inside of a range we don't want
    // to override the classes added by the label that
    // is a direct child of the item
    if (!inRange) {
      this.gascoStyle.emit({
        label: true,
        [`label-${position}`]: position !== undefined,
      });
    }
  }
  render() {
    const position = this.position;
    return (index.h(index.Host, { class: theme.createColorClasses(this.color, {
        'in-item-color': theme.hostContext('gasco-item.gasco-color', this.el),
        [`label-${position}`]: position !== undefined,
        [`label-no-animate`]: this.noAnimate,
        'label-rtl': document.dir === 'rtl',
      }) }));
  }
  get el() { return index.getElement(this); }
  static get watchers() { return {
    "color": ["colorChanged"],
    "position": ["positionChanged"]
  }; }
};
GascoLabel.style = gascoLabelMdCss;

const gascoListMdCss = "gasco-list{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:block;contain:content;list-style-type:none;max-width:320px;width:100%;background:#FFFFFF;box-shadow:0px 2px 4px rgba(171, 190, 209, 0.6);border-radius:0 0 4px 4px}gasco-list.list-inset{transform:translateZ(0);overflow:hidden}:host(.gasco-expanded){height:auto}.list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:8px;padding-bottom:8px;background:var(--gasco-item-background, var(--gasco-background-color, #fff))}.list-md>.input:last-child::after{left:0}[dir=rtl] .list-md>.input:last-child::after,:host-context([dir=rtl]) .list-md>.input:last-child::after{left:unset;right:unset;right:0}.list-md.list-inset{margin-left:16px;margin-right:16px;margin-top:16px;margin-bottom:16px;border-radius:2px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){.list-md.list-inset{margin-left:unset;margin-right:unset;-webkit-margin-start:16px;margin-inline-start:16px;-webkit-margin-end:16px;margin-inline-end:16px}}.list-md.list-inset gasco-item:first-child{--border-radius:2px 2px 0 0;--border-width:1px 0 0 0}.list-md.list-inset gasco-item:last-child{--border-radius:0 0 2px, 2px;--border-width:0}.list-md.list-inset .item-interactive{--padding-start:0;--padding-end:0}.list-md.list-inset+gasco-list.list-inset{margin-top:0}.list-md-lines-none .item{--border-width:0;--inner-border-width:0}.list-md-lines-full .item,.list-md .item-lines-full{--border-width:1px 0 0 0}.list-md-lines-full .item{--inner-border-width:0}.list-md-lines-inset .item,.list-md .item-lines-inset{--inner-border-width:0 0 1px 0}.list-md .item-lines-inset{--border-width:0}.list-md .item-lines-full{--inner-border-width:0}.list-md .item-lines-none{--border-width:0;--inner-border-width:0}gasco-card .list-md{margin-left:0;margin-right:0;margin-top:0;margin-bottom:0}";

const GascoList = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
    /**
     * If `true`, the list will have margin around it and rounded corners.
     */
    this.inset = false;
  }
  render() {
    const { lines, inset } = this;
    return (index.h(index.Host, { role: "list", class: {
        'list-inset': inset,
        [`list-lines-${lines}`]: lines !== undefined,
      } }));
  }
};
GascoList.style = gascoListMdCss;

const gascoListHeaderMdCss = ":host{--border-style:solid;--border-width:0;--inner-border-width:0;-moz-osx-font-smoothing:grayscale;-webkit-font-smoothing:antialiased;margin-left:0;margin-right:0;margin-top:0;margin-bottom:0;padding-left:0;padding-right:0;padding-top:0;padding-bottom:0;display:flex;align-items:center;justify-content:space-between;width:100%;min-height:40px;border-width:var(--border-width);border-style:var(--border-style);border-color:var(--border-color);background:var(--background);color:var(--color);overflow:hidden}:host(.gasco-color){background:var(--gasco-color-base);color:var(--gasco-color-contrast)}.list-header-inner{display:flex;position:relative;flex:1;flex-direction:inherit;align-items:inherit;align-self:stretch;min-height:inherit;border-width:var(--inner-border-width);border-style:var(--border-style);border-color:var(--border-color);overflow:inherit;box-sizing:border-box}::slotted(gasco-label){flex:1 1 auto}:host(.list-header-lines-inset),:host(.list-header-lines-none){--border-width:0}:host(.list-header-lines-full),:host(.list-header-lines-none){--inner-border-width:0}:host{--background:transparent;--color:var(--gasco-text-color, #000);--border-color:var(--gasco-color-light-contrast, #CCCCCC);padding-left:calc(var(--gasco-safe-area-left, 0) + 16px);min-height:45px;font-size:14px;box-shadow:0px 2px 4px rgba(171, 190, 209, 0.6);border-radius:4px}@supports (margin-inline-start: 0) or (-webkit-margin-start: 0){:host{padding-left:unset;-webkit-padding-start:calc(var(--gasco-safe-area-left, 0) + 16px);padding-inline-start:calc(var(--gasco-safe-area-left, 0) + 16px)}}:host(.list-header-lines-full){--border-width:1px 0 0 0}:host(.list-header-lines-inset){--inner-border-width:1px 0 0 0}";

const GascoListHeader = class {
  constructor(hostRef) {
    index.registerInstance(this, hostRef);
  }
  render() {
    const { lines } = this;
    return (index.h(index.Host, { class: theme.createColorClasses(this.color, {
        [`list-header-lines-${lines}`]: lines !== undefined,
      }) }, index.h("div", { class: "list-header-inner" }, index.h("slot", null))));
  }
};
GascoListHeader.style = gascoListHeaderMdCss;

exports.gasco_item = GascoItem;
exports.gasco_label = GascoLabel;
exports.gasco_list = GascoList;
exports.gasco_list_header = GascoListHeader;
