@universal-material/web 3.0.28 → 3.0.30

package/field/field.d.ts

@@ -0,0 +1,57 @@
+import { PropertyValues } from '@lit/reactive-element';
+import { HTMLTemplateResult, LitElement } from 'lit';
+export declare class UmField extends LitElement {
+    static styles: import("lit").CSSResult[];
+    variant: 'filled' | 'outlined';
+    empty: boolean;
+    disabled: boolean;
+    invalid: boolean;
+    /**
+     * Whether the field has a leading icon or not
+     *
+     * _Note:_ Readonly
+     */
+    hasLeadingIcon: boolean;
+    /**
+     * Whether the field has a trailing icon or not
+     *
+     * _Note:_ Readonly
+     */
+    hasTrailingIcon: boolean;
+    /**
+     * Whether the field has an error text or not
+     *
+     * _Note:_ Readonly
+     */
+    hasErrorText: boolean;
+    /**
+     * Whether the field has a counter or not
+     *
+     * _Note:_ Readonly
+     */
+    hasCounter: boolean;
+    private readonly assignedLeadingIcons;
+    private readonly assignedTrailingIcons;
+    private readonly assignedErrorTexts;
+    private readonly assignedCounters;
+    counter: HTMLElement | undefined;
+    label: HTMLElement;
+    private control;
+    private labelSizeObserver;
+    protected render(): HTMLTemplateResult;
+    firstUpdated(changedProperties: PropertyValues): void;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    private handleControlInput;
+    private handleLeadingIconSlotChange;
+    private handleTrailingIconSlotChange;
+    private handleErrorTextSlotChange;
+    private handleCounterSlotChange;
+    private setLabelWidthProperties;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'u-field': UmField;
+    }
+}
+//# sourceMappingURL=field.d.ts.map

package/field/field.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.d.ts","sourceRoot":"","sources":["../../src/field/field.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,cAAc,EAAE,MAAM,uBAAuB,CAAC;AACvD,OAAO,EAAQ,kBAAkB,EAAE,UAAU,EAAE,MAAM,KAAK,CAAC;AAO3D,qBACa,OAAQ,SAAQ,UAAU;IACrC,OAAgB,MAAM,4BAAwB;IAEnB,OAAO,EAAE,QAAQ,GAAG,UAAU,CAAmC;IAClD,KAAK,UAAQ;IACb,QAAQ,UAAS;IACjB,OAAO,UAAS;IAE1D;;;;OAIG;IACsE,cAAc,UAAS;IAEhG;;;;OAIG;IACuE,eAAe,UAAS;IAElG;;;;OAIG;IACoE,YAAY,UAAS;IAE5F;;;;OAIG;IACiE,UAAU,UAAS;IAGvF,OAAO,CAAC,QAAQ,CAAC,oBAAoB,CAAiB;IAGtD,OAAO,CAAC,QAAQ,CAAC,qBAAqB,CAAiB;IAGvD,OAAO,CAAC,QAAQ,CAAC,kBAAkB,CAAiB;IAGpD,OAAO,CAAC,QAAQ,CAAC,gBAAgB,CAAiB;IAE/B,OAAO,EAAE,WAAW,GAAG,SAAS,CAAC;IACnC,KAAK,EAAG,WAAW,CAAC;IAErC,OAAO,CAAC,OAAO,CAAiC;IAChD,OAAO,CAAC,iBAAiB,CAA+B;cAErC,MAAM,IAAI,kBAAkB;IA8BtC,YAAY,CAAC,iBAAiB,EAAE,cAAc;IAS9C,iBAAiB;IAOjB,oBAAoB;IAS7B,OAAO,CAAC,kBAAkB,CAEzB;IAED,OAAO,CAAC,2BAA2B;IASnC,OAAO,CAAC,4BAA4B;IAIpC,OAAO,CAAC,yBAAyB;IAIjC,OAAO,CAAC,uBAAuB;IAI/B,OAAO,CAAC,uBAAuB;CAMhC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,OAAO,CAAC;KACpB;CACF"}

package/field/field.js

@@ -0,0 +1,167 @@
+var __decorate = (this && this.__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;
+};
+import { html, LitElement } from 'lit';
+import { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';
+import { config } from '../config.js';
+import { styles as baseStyles } from '../shared/base.styles.js';
+import { styles } from './field.styles.js';
+let UmField = class UmField extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.variant = config.fields.defaultAppearance;
+        this.empty = true;
+        this.disabled = false;
+        this.invalid = false;
+        /**
+         * Whether the field has a leading icon or not
+         *
+         * _Note:_ Readonly
+         */
+        this.hasLeadingIcon = false;
+        /**
+         * Whether the field has a trailing icon or not
+         *
+         * _Note:_ Readonly
+         */
+        this.hasTrailingIcon = false;
+        /**
+         * Whether the field has an error text or not
+         *
+         * _Note:_ Readonly
+         */
+        this.hasErrorText = false;
+        /**
+         * Whether the field has a counter or not
+         *
+         * _Note:_ Readonly
+         */
+        this.hasCounter = false;
+        this.control = null;
+        this.labelSizeObserver = null;
+        this.handleControlInput = () => {
+            this.empty = !this.control?.value;
+        };
+    }
+    render() {
+        return html `
+      <div class="field">
+        <slot
+          class="icon leading-icon"
+          name="leading-icon"
+          @slotchange="${this.handleLeadingIconSlotChange}">
+        </slot>
+        <slot class="label" name="label"></slot>
+        <slot class="input"></slot>
+        <slot
+          class="icon trailing-icon"
+          name="trailing-icon"
+          @slotchange="${this.handleTrailingIconSlotChange}">
+        </slot>
+      </div>
+      <div class="supporting-text">
+        <slot
+          class="error-text"
+          name="error-text"
+          @slotchange="${this.handleErrorTextSlotChange}"></slot>
+        <slot class="supporting-text-slot" name="supporting-text" id="supporting-text"></slot>
+        <slot
+          class="counter"
+          name="counter"
+          @slotchange="${this.handleCounterSlotChange}"></slot>
+      </div>
+    `;
+    }
+    firstUpdated(changedProperties) {
+        super.firstUpdated(changedProperties);
+        this.hasLeadingIcon = !!this.assignedLeadingIcons.length;
+        this.labelSizeObserver = new ResizeObserver(() => this.setLabelWidthProperties());
+        this.labelSizeObserver.observe(this.label);
+        this.setLabelWidthProperties();
+    }
+    connectedCallback() {
+        super.connectedCallback();
+        this.control = this.querySelector('input, select, button, textarea');
+        this.control?.addEventListener('input', this.handleControlInput);
+        this.empty = !this.control?.value;
+    }
+    disconnectedCallback() {
+        super.disconnectedCallback();
+        this.control?.removeEventListener('input', this.handleControlInput);
+        this.control = null;
+        this.labelSizeObserver.disconnect();
+        this.labelSizeObserver = null;
+    }
+    handleLeadingIconSlotChange() {
+        this.label.style.transition = 'none';
+        this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;
+        setTimeout(() => {
+            this.label.style.transition = '';
+        });
+    }
+    handleTrailingIconSlotChange() {
+        this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;
+    }
+    handleErrorTextSlotChange() {
+        this.hasErrorText = this.assignedErrorTexts.length > 0;
+    }
+    handleCounterSlotChange() {
+        this.hasCounter = this.assignedCounters.length > 0;
+    }
+    setLabelWidthProperties() {
+        const width = this.label.offsetWidth;
+        this.style.setProperty('--u-field-label-width', `${width}px`);
+        this.style.setProperty('--u-field-label-half-width', `${width / 2}px`);
+    }
+};
+UmField.styles = [baseStyles, styles];
+__decorate([
+    property({ reflect: true })
+], UmField.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmField.prototype, "empty", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmField.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], UmField.prototype, "invalid", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-leading-icon', reflect: true })
+], UmField.prototype, "hasLeadingIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-trailing-icon', reflect: true })
+], UmField.prototype, "hasTrailingIcon", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-error-text', reflect: true })
+], UmField.prototype, "hasErrorText", void 0);
+__decorate([
+    property({ type: Boolean, attribute: 'has-counter', reflect: true })
+], UmField.prototype, "hasCounter", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'leading-icon', flatten: true })
+], UmField.prototype, "assignedLeadingIcons", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'trailing-icon', flatten: true })
+], UmField.prototype, "assignedTrailingIcons", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'error-text', flatten: true })
+], UmField.prototype, "assignedErrorTexts", void 0);
+__decorate([
+    queryAssignedElements({ slot: 'counter', flatten: true })
+], UmField.prototype, "assignedCounters", void 0);
+__decorate([
+    query('.counter')
+], UmField.prototype, "counter", void 0);
+__decorate([
+    query('.label')
+], UmField.prototype, "label", void 0);
+UmField = __decorate([
+    customElement('u-field')
+], UmField);
+export { UmField };
+//# sourceMappingURL=field.js.map

package/field/field.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.js","sourceRoot":"","sources":["../../src/field/field.ts"],"names":[],"mappings":"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","sourcesContent":["import { PropertyValues } from '@lit/reactive-element';\nimport { html, HTMLTemplateResult, LitElement } from 'lit';\nimport { customElement, property, query, queryAssignedElements } from 'lit/decorators.js';\n\nimport { config } from '../config.js';\nimport { styles as baseStyles } from '../shared/base.styles.js';\nimport { styles } from './field.styles.js';\n\n@customElement('u-field')\nexport class UmField extends LitElement {\n  static override styles = [baseStyles, styles];\n\n  @property({reflect: true}) variant: 'filled' | 'outlined' = config.fields.defaultAppearance;\n  @property({type: Boolean, reflect: true}) empty = true;\n  @property({type: Boolean, reflect: true}) disabled = false;\n  @property({type: Boolean, reflect: true}) invalid = false;\n\n  /**\n   * Whether the field has a leading icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({type: Boolean, attribute: 'has-leading-icon', reflect: true}) hasLeadingIcon = false;\n\n  /**\n   * Whether the field has a trailing icon or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({type: Boolean, attribute: 'has-trailing-icon', reflect: true}) hasTrailingIcon = false;\n\n  /**\n   * Whether the field has an error text or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({type: Boolean, attribute: 'has-error-text', reflect: true}) hasErrorText = false;\n\n  /**\n   * Whether the field has a counter or not\n   *\n   * _Note:_ Readonly\n   */\n  @property({type: Boolean, attribute: 'has-counter', reflect: true}) hasCounter = false;\n\n  @queryAssignedElements({slot: 'leading-icon', flatten: true})\n  private readonly assignedLeadingIcons!: HTMLElement[];\n\n  @queryAssignedElements({slot: 'trailing-icon', flatten: true})\n  private readonly assignedTrailingIcons!: HTMLElement[];\n\n  @queryAssignedElements({slot: 'error-text', flatten: true})\n  private readonly assignedErrorTexts!: HTMLElement[];\n\n  @queryAssignedElements({slot: 'counter', flatten: true})\n  private readonly assignedCounters!: HTMLElement[];\n\n  @query('.counter') counter: HTMLElement | undefined;\n  @query('.label') label!: HTMLElement;\n\n  private control: HTMLInputElement | null = null;\n  private labelSizeObserver: ResizeObserver | null = null;\n\n  protected override render(): HTMLTemplateResult {\n    return html`\n      <div class=\"field\">\n        <slot\n          class=\"icon leading-icon\"\n          name=\"leading-icon\"\n          @slotchange=\"${this.handleLeadingIconSlotChange}\">\n        </slot>\n        <slot class=\"label\" name=\"label\"></slot>\n        <slot class=\"input\"></slot>\n        <slot\n          class=\"icon trailing-icon\"\n          name=\"trailing-icon\"\n          @slotchange=\"${this.handleTrailingIconSlotChange}\">\n        </slot>\n      </div>\n      <div class=\"supporting-text\">\n        <slot\n          class=\"error-text\"\n          name=\"error-text\"\n          @slotchange=\"${this.handleErrorTextSlotChange}\"></slot>\n        <slot class=\"supporting-text-slot\" name=\"supporting-text\" id=\"supporting-text\"></slot>\n        <slot\n          class=\"counter\"\n          name=\"counter\"\n          @slotchange=\"${this.handleCounterSlotChange}\"></slot>\n      </div>\n    `;\n  }\n\n  override firstUpdated(changedProperties: PropertyValues) {\n    super.firstUpdated(changedProperties);\n    this.hasLeadingIcon = !!this.assignedLeadingIcons.length;\n\n    this.labelSizeObserver = new ResizeObserver(() => this.setLabelWidthProperties())\n    this.labelSizeObserver.observe(this.label);\n    this.setLabelWidthProperties();\n  }\n\n  override connectedCallback() {\n    super.connectedCallback();\n    this.control = <HTMLInputElement | null>this.querySelector('input, select, button, textarea');\n    this.control?.addEventListener('input', this.handleControlInput);\n    this.empty = !this.control?.value;\n  }\n\n  override disconnectedCallback() {\n    super.disconnectedCallback();\n    this.control?.removeEventListener('input', this.handleControlInput);\n    this.control = null;\n\n    this.labelSizeObserver!.disconnect();\n    this.labelSizeObserver = null;\n  }\n\n  private handleControlInput = () => {\n    this.empty = !this.control?.value;\n  }\n\n  private handleLeadingIconSlotChange() {\n    this.label.style.transition = 'none';\n    this.hasLeadingIcon = this.assignedLeadingIcons.length > 0;\n\n    setTimeout(() => {\n      this.label.style.transition = '';\n    });\n  }\n\n  private handleTrailingIconSlotChange() {\n    this.hasTrailingIcon = this.assignedTrailingIcons.length > 0;\n  }\n\n  private handleErrorTextSlotChange() {\n    this.hasErrorText = this.assignedErrorTexts.length > 0;\n  }\n\n  private handleCounterSlotChange() {\n    this.hasCounter = this.assignedCounters.length > 0;\n  }\n\n  private setLabelWidthProperties() {\n\n    const width = this.label.offsetWidth;\n    this.style.setProperty('--u-field-label-width', `${width}px`);\n    this.style.setProperty('--u-field-label-half-width', `${width / 2}px`);\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'u-field': UmField;\n  }\n}\n"]}

package/{divider/divider.styles.d.ts → field/field.styles.d.ts}

@@ -1,2 +1,2 @@
 export declare const styles: import("lit").CSSResult;
-//# sourceMappingURL=divider.styles.d.ts.map
+//# sourceMappingURL=field.styles.d.ts.map

package/field/field.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.styles.d.ts","sourceRoot":"","sources":["../../src/field/field.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBA8RlB,CAAC"}

package/field/field.styles.js

@@ -0,0 +1,289 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    --_control-line-height: var(--u-field-control-line-height, 1.5rem);
+    --_label-line-height: var(--u-field-label-line-height, 1rem);
+    --_field-icon-size: var(--u-field-icon-size, 1.5rem);
+    --_field-control-padding: var(--u-field-control-padding, 16px);
+    --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));
+    --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));
+    --_field-min-height: var(--u-field-min-height, 56px);
+    --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+    --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-field-disabled-opacity, .38)));
+    --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));
+    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));
+    --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));
+    --_active-indicator-opacity: 1;
+    --_vertical-padding: var(--u-field-vertical-padding, 8px);
+    --_icon-size: var(--u-field-icon-size, 1.5rem);
+    --_icon-padding: var(--u-field-icon-padding, 12px);
+    --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+    --_focus-border-width: var(--u-text-field-focus-border-width, 2px);
+    --_field-control-leading-padding: var(--_field-control-inline-padding);
+    --_field-control-trailing-padding: var(--_field-control-inline-padding);
+    --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);
+    --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);
+    --u-label-input-start: auto;
+    --u-label-input-span-leading-offset: 0;
+    --u-label-input-span-trailing-offset: 0;
+    --u-text-field-horizontal-padding: 12px;
+  }
+
+  .field {
+    display: block;
+    position: relative;
+  }
+  .field::before, .field::after {
+    content: "";
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    pointer-events: none;
+  }
+  .field::before {
+    background: var(--u-color-on-surface, rgb(29, 27, 32));
+    transition: opacity 150ms;
+    opacity: 0;
+  }
+  .field::after {
+    border-width: var(--u-field-border-width, 1px);
+    border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+  }
+
+  @media (hover: hover) {
+    :host([variant=filled]:not([disabled]):not([invalid]):hover) .field::before {
+      opacity: var(--u-state-hover-opacity, 0.08);
+    }
+    :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .field::after {
+      border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));
+    }
+  }
+  .icon {
+    position: absolute;
+    width: var(--_icon-size);
+    height: 100%;
+    top: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    color: var(--_icon-color);
+    font-size: var(--_icon-size);
+    line-height: var(--_icon-size);
+  }
+  .icon::slotted(*) {
+    flex-shrink: 0;
+  }
+
+  .leading-icon {
+    inset-inline-start: var(--_icon-padding);
+  }
+
+  .trailing-icon {
+    inset-inline-end: var(--_icon-padding);
+  }
+
+  .label {
+    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
+    line-height: var(--u-field-label-line-height, var(--u-body-l-line-height, 1.5rem));
+    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));
+    letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));
+    font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));
+    font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));
+    display: block;
+    position: absolute;
+    inset-inline-start: var(--_field-control-leading-padding);
+    margin-bottom: 0;
+    line-height: var(--_label-line-height);
+    color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+    transition: inset 200ms, font-size 200ms;
+  }
+
+  .input {
+    display: block;
+    color: var(--u-on-surface-color);
+  }
+  .input:focus {
+    outline: 0;
+  }
+  .input::slotted(*) {
+    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
+    line-height: var(--u-field-control-line-height, var(--u-body-l-line-height, 1.5rem));
+    font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));
+    letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));
+    font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));
+    width: 100%;
+    color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));
+    min-height: var(--_field-min-height);
+    line-height: var(--_control-line-height);
+    padding-block: 0;
+    padding-inline: var(--_field-control-leading-padding) var(--_field-control-trailing-padding);
+    appearance: none;
+    background: transparent;
+    border: none;
+    outline: 0 !important;
+  }
+  .input, .input::slotted(select), .input::slotted(:is(input, textarea))::placeholder {
+    transition: color 150ms 100ms;
+  }
+  .input::slotted(:is(input, textarea))::placeholder {
+    color: var(--_field-placeholder-color);
+  }
+
+  .supporting-text {
+    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", "Noto Sans", "Liberation Sans", Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji"));
+    line-height: var(--u-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));
+    font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));
+    letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));
+    font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));
+    display: flex;
+    color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));
+    padding-inline: 16px;
+    gap: 16px;
+  }
+  .supporting-text .supporting-text-slot {
+    display: block;
+  }
+  .supporting-text ::slotted(*) {
+    display: inline-block;
+    margin-top: 4px;
+  }
+
+  .error-text {
+    display: none;
+  }
+
+  .counter {
+    display: none;
+    margin-inline-start: auto;
+  }
+
+  :host([has-counter]) .counter {
+    display: block;
+  }
+
+  :host([has-leading-icon]) {
+    --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;
+  }
+
+  :host([has-trailing-icon]) {
+    --_field-control-trailing-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;
+  }
+
+  :host(:focus-within) {
+    --u-field-border-width: var(--_focus-border-width);
+  }
+  :host(:focus-within) .field::after {
+    border-color: var(--u-field-focused-border-color, var(--_color-primary));
+  }
+  :host(:focus-within) .label {
+    color: var(--u-field-label-focused-color, var(--_color-primary));
+  }
+
+  :host([invalid]) .field::after {
+    border-color: var(--u-field-error-border-color, var(--_color-error));
+  }
+  :host([invalid]) .label {
+    color: var(--u-field-label-error-color, var(--_color-error));
+  }
+  :host([invalid]) .supporting-text {
+    color: var(--u-field-supporting-text-error-color, var(--_color-error));
+  }
+  :host([invalid]) .trailing-icon {
+    --u-standard-icon-button-color: var(--u-field-trailing-icon-error-color, var(--_color-error));
+    color: var(--u-field-trailing-icon-error-color, var(--_color-error));
+  }
+  :host([invalid]) .leading-icon {
+    --u-standard-icon-button-color: var(--u-field-leading-icon-error-color, var(--_color-error));
+    color: var(--u-field-leading-icon-error-color, var(--_icon-color));
+  }
+
+  :host([invalid][has-error-text]) .error-text {
+    display: block;
+  }
+  :host([invalid][has-error-text]) .supporting-text-slot {
+    display: none;
+  }
+
+  :host([disabled]) .field::after {
+    border-color: var(--u-field-disabled-border-color, var(--_disabled-color));
+  }
+  :host([disabled]) .supporting-text {
+    color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));
+  }
+  :host([disabled]) .label {
+    color: var(--u-field-label-disabled-color, var(--_disabled-color));
+  }
+  :host([disabled]) .input::slotted(*) {
+    color: var(--u-field-input-disabled-color, var(--_disabled-color));
+  }
+  :host([disabled]) .input::slotted(:is(input, textarea))::placeholder {
+    color: var(--u-field-input-disabled-color, var(--_disabled-color));
+  }
+  :host([disabled]) .trailing-icon {
+    color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));
+  }
+  :host([disabled]) .leading-icon {
+    color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));
+  }
+
+  :host([variant=filled]) .field {
+    border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);
+    background-color: var(--u-color-surface-variant);
+  }
+  :host([variant=filled]) .field::after {
+    border-bottom-style: solid;
+  }
+  :host([variant=filled]) .label {
+    top: var(--_vertical-padding);
+  }
+  :host([variant=filled]) .input::slotted(:is(input, textarea, select, button)) {
+    display: block;
+    border-top: calc(var(--_vertical-padding) + var(--_label-line-height)) solid transparent;
+    border-bottom: var(--_vertical-padding) solid transparent;
+  }
+
+  :host([variant=filled][disabled]) .field {
+    background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, 0.12)));
+  }
+
+  :host([variant=outlined]) .field::after {
+    --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));
+    border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));
+    border-style: solid;
+    clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);
+    transition: clip-path 100ms;
+  }
+  :host([variant=outlined]) .label {
+    top: calc(var(--_label-line-height) / -2);
+  }
+
+  :host([variant=outlined]:focus-within) .field::after,
+  :host([variant=outlined]:not([empty])) .field::after {
+    --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));
+    clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);
+  }
+  :host([variant=outlined]:focus-within) .label,
+  :host([variant=outlined]:not([empty])) .label {
+    inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));
+  }
+
+  :host([empty]) ::slotted(select) {
+    color: var(--_field-placeholder-color);
+  }
+
+  :host([empty]:not(:focus-within)) .label {
+    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));
+    pointer-events: none;
+    top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);
+  }
+  :host([empty]:not(:focus-within)) .input,
+  :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,
+  :host([empty]:not(:focus-within)) ::slotted(select) {
+    color: transparent;
+    transition: color 150ms;
+  }
+`;
+//# sourceMappingURL=field.styles.js.map

package/field/field.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"field.styles.js","sourceRoot":"","sources":["../../src/field/field.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA8RzB,CAAC","sourcesContent":["import { css } from 'lit';\n\nexport const styles = css `\n  :host {\n    --_control-line-height: var(--u-field-control-line-height, 1.5rem);\n    --_label-line-height: var(--u-field-label-line-height, 1rem);\n    --_field-icon-size: var(--u-field-icon-size, 1.5rem);\n    --_field-control-padding: var(--u-field-control-padding, 16px);\n    --_field-control-inline-padding: var(--u-field-control-inline-padding, var(--_field-control-padding));\n    --_field-control-block-padding: var(--u-field-control-block-padding, var(--_field-control-padding));\n    --_field-min-height: var(--u-field-min-height, 56px);\n    --_field-placeholder-color: var(--u-field-placeholder-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_disabled-color: var(--u-field-disabled-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-field-disabled-opacity, .38)));\n    --_disabled-background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, .12)));\n    --_color-primary: var(--u-color-primary, rgb(103, 80, 164));\n    --_color-error: var(--u-field-error-color, var(--u-color-error, rgb(179, 38, 30)));\n    --_active-indicator-opacity: 1;\n    --_vertical-padding: var(--u-field-vertical-padding, 8px);\n    --_icon-size: var(--u-field-icon-size, 1.5rem);\n    --_icon-padding: var(--u-field-icon-padding, 12px);\n    --_icon-color: var(--u-icon-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    --_focus-border-width: var(--u-text-field-focus-border-width, 2px);\n    --_field-control-leading-padding: var(--_field-control-inline-padding);\n    --_field-control-trailing-padding: var(--_field-control-inline-padding);\n    --_outlined-label-margin: var(--u-outlined-field-label-margin, 12px);\n    --_outlined-label-padding: var(--u-outlined-field-label-padding, 4px);\n    --u-label-input-start: auto;\n    --u-label-input-span-leading-offset: 0;\n    --u-label-input-span-trailing-offset: 0;\n    --u-text-field-horizontal-padding: 12px;\n  }\n\n  .field {\n    display: block;\n    position: relative;\n  }\n  .field::before, .field::after {\n    content: \"\";\n    position: absolute;\n    top: 0;\n    left: 0;\n    width: 100%;\n    height: 100%;\n    box-sizing: border-box;\n    pointer-events: none;\n  }\n  .field::before {\n    background: var(--u-color-on-surface, rgb(29, 27, 32));\n    transition: opacity 150ms;\n    opacity: 0;\n  }\n  .field::after {\n    border-width: var(--u-field-border-width, 1px);\n    border-color: var(--u-field-border-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n  }\n\n  @media (hover: hover) {\n    :host([variant=filled]:not([disabled]):not([invalid]):hover) .field::before {\n      opacity: var(--u-state-hover-opacity, 0.08);\n    }\n    :host(:not([disabled]):not([invalid]):not(:focus-within):hover) .field::after {\n      border-color: var(--u-field-hover-border-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    }\n  }\n  .icon {\n    position: absolute;\n    width: var(--_icon-size);\n    height: 100%;\n    top: 0;\n    display: flex;\n    justify-content: center;\n    align-items: center;\n    color: var(--_icon-color);\n    font-size: var(--_icon-size);\n    line-height: var(--_icon-size);\n  }\n  .icon::slotted(*) {\n    flex-shrink: 0;\n  }\n\n  .leading-icon {\n    inset-inline-start: var(--_icon-padding);\n  }\n\n  .trailing-icon {\n    inset-inline-end: var(--_icon-padding);\n  }\n\n  .label {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-label-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-label-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-label-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    font-size: var(--u-field-label-font-size, var(--u-body-s-font-size, 0.75rem));\n    display: block;\n    position: absolute;\n    inset-inline-start: var(--_field-control-leading-padding);\n    margin-bottom: 0;\n    line-height: var(--_label-line-height);\n    color: var(--u-field-label-color, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    transition: inset 200ms, font-size 200ms;\n  }\n\n  .input {\n    display: block;\n    color: var(--u-on-surface-color);\n  }\n  .input:focus {\n    outline: 0;\n  }\n  .input::slotted(*) {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-control-line-height, var(--u-body-l-line-height, 1.5rem));\n    font-size: var(--u-field-control-font-size, var(--u-body-l-font-size, 1rem));\n    letter-spacing: var(--u-field-control-letter-spacing, var(--u-body-l-letter-spacing, 0.03125rem));\n    font-weight: var(--u-field-control-font-weight, var(--u-body-l-font-weight, var(--u-font-weight-regular, 400)));\n    width: 100%;\n    color: var(--u-field-input-text-color, var(--u-color-on-surface, rgb(29, 27, 32)));\n    min-height: var(--_field-min-height);\n    line-height: var(--_control-line-height);\n    padding-block: 0;\n    padding-inline: var(--_field-control-leading-padding) var(--_field-control-trailing-padding);\n    appearance: none;\n    background: transparent;\n    border: none;\n    outline: 0 !important;\n  }\n  .input, .input::slotted(select), .input::slotted(:is(input, textarea))::placeholder {\n    transition: color 150ms 100ms;\n  }\n  .input::slotted(:is(input, textarea))::placeholder {\n    color: var(--_field-placeholder-color);\n  }\n\n  .supporting-text {\n    font-family: var(--u-font-family, var(--u-font-family, system-ui, -apple-system, \"Segoe UI\", Roboto, \"Helvetica Neue\", \"Noto Sans\", \"Liberation Sans\", Arial, sans-serif, \"Apple Color Emoji\", \"Segoe UI Emoji\", \"Segoe UI Symbol\", \"Noto Color Emoji\"));\n    line-height: var(--u-field-supporting-text-line-height, var(--u-body-s-line-height, 1rem));\n    font-size: var(--u-field-supporting-text-font-size, var(--u-body-s-font-size, 0.75rem));\n    letter-spacing: var(--u-field-supporting-text-letter-spacing, var(--u-body-s-letter-spacing, 0.0333333333rem));\n    font-weight: var(--u-field-supporting-text-font-weight, var(--u-body-s-font-weight, var(--u-font-weight-regular, 400)));\n    display: flex;\n    color: var(--u-field-supporting-text, var(--u-color-on-surface-variant, rgb(73, 69, 79)));\n    padding-inline: 16px;\n    gap: 16px;\n  }\n  .supporting-text .supporting-text-slot {\n    display: block;\n  }\n  .supporting-text ::slotted(*) {\n    display: inline-block;\n    margin-top: 4px;\n  }\n\n  .error-text {\n    display: none;\n  }\n\n  .counter {\n    display: none;\n    margin-inline-start: auto;\n  }\n\n  :host([has-counter]) .counter {\n    display: block;\n  }\n\n  :host([has-leading-icon]) {\n    --_field-control-leading-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n  }\n\n  :host([has-trailing-icon]) {\n    --_field-control-trailing-padding: calc(var(--_icon-padding) + var(--_icon-size) + var(--_field-control-inline-padding)) ;\n  }\n\n  :host(:focus-within) {\n    --u-field-border-width: var(--_focus-border-width);\n  }\n  :host(:focus-within) .field::after {\n    border-color: var(--u-field-focused-border-color, var(--_color-primary));\n  }\n  :host(:focus-within) .label {\n    color: var(--u-field-label-focused-color, var(--_color-primary));\n  }\n\n  :host([invalid]) .field::after {\n    border-color: var(--u-field-error-border-color, var(--_color-error));\n  }\n  :host([invalid]) .label {\n    color: var(--u-field-label-error-color, var(--_color-error));\n  }\n  :host([invalid]) .supporting-text {\n    color: var(--u-field-supporting-text-error-color, var(--_color-error));\n  }\n  :host([invalid]) .trailing-icon {\n    --u-standard-icon-button-color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n    color: var(--u-field-trailing-icon-error-color, var(--_color-error));\n  }\n  :host([invalid]) .leading-icon {\n    --u-standard-icon-button-color: var(--u-field-leading-icon-error-color, var(--_color-error));\n    color: var(--u-field-leading-icon-error-color, var(--_icon-color));\n  }\n\n  :host([invalid][has-error-text]) .error-text {\n    display: block;\n  }\n  :host([invalid][has-error-text]) .supporting-text-slot {\n    display: none;\n  }\n\n  :host([disabled]) .field::after {\n    border-color: var(--u-field-disabled-border-color, var(--_disabled-color));\n  }\n  :host([disabled]) .supporting-text {\n    color: var(--u-field-supporting-text-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .label {\n    color: var(--u-field-label-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .input::slotted(*) {\n    color: var(--u-field-input-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .input::slotted(:is(input, textarea))::placeholder {\n    color: var(--u-field-input-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .trailing-icon {\n    color: var(--u-field-trailing-icon-disabled-color, var(--_disabled-color));\n  }\n  :host([disabled]) .leading-icon {\n    color: var(--u-field-leading-icon-disabled-color, var(--_disabled-color));\n  }\n\n  :host([variant=filled]) .field {\n    border-radius: var(--u-field-filled-border-radius, 4px 4px 0 0);\n    background-color: var(--u-color-surface-variant);\n  }\n  :host([variant=filled]) .field::after {\n    border-bottom-style: solid;\n  }\n  :host([variant=filled]) .label {\n    top: var(--_vertical-padding);\n  }\n  :host([variant=filled]) .input::slotted(:is(input, textarea, select, button)) {\n    display: block;\n    border-top: calc(var(--_vertical-padding) + var(--_label-line-height)) solid transparent;\n    border-bottom: var(--_vertical-padding) solid transparent;\n  }\n\n  :host([variant=filled][disabled]) .field {\n    background-color: var(--u-filled-field-disabled-background-color, rgba(var(--u-color-on-surface-rgb, ), var(--u-filled-field-background-disabled-opacity, 0.12)));\n  }\n\n  :host([variant=outlined]) .field::after {\n    --_mid-point: calc(var(--u-field-label-half-width) + var(--_outlined-label-margin) + var(--_outlined-label-padding));\n    border-radius: var(--u-outlined-field-shape-corder, var(--u-shape-corner-small, 8px));\n    border-style: solid;\n    clip-path: polygon(0 0, var(--_mid-point) 0, var(--_mid-point) var(--_focus-border-width), var(--_mid-point) var(--_focus-border-width), var(--_mid-point) 0, 100% 0, 100% 100%, 0 100%);\n    transition: clip-path 100ms;\n  }\n  :host([variant=outlined]) .label {\n    top: calc(var(--_label-line-height) / -2);\n  }\n\n  :host([variant=outlined]:focus-within) .field::after,\n  :host([variant=outlined]:not([empty])) .field::after {\n    --_end-point: calc(var(--u-field-label-width) + var(--_outlined-label-margin) + (var(--_outlined-label-padding) * 2));\n    clip-path: polygon(0 0, var(--_outlined-label-margin) 0, var(--_outlined-label-margin) var(--_focus-border-width), var(--_end-point) var(--_focus-border-width), var(--_end-point) 0, 100% 0, 100% 100%, 0 100%);\n  }\n  :host([variant=outlined]:focus-within) .label,\n  :host([variant=outlined]:not([empty])) .label {\n    inset-inline-start: calc(var(--_outlined-label-margin) + var(--_outlined-label-padding));\n  }\n\n  :host([empty]) ::slotted(select) {\n    color: var(--_field-placeholder-color);\n  }\n\n  :host([empty]:not(:focus-within)) .label {\n    font-size: var(--u-field-label-font-size, var(--u-body-l-font-size, 1rem));\n    pointer-events: none;\n    top: calc(var(--_field-min-height) / 2 - var(--_label-line-height) / 2);\n  }\n  :host([empty]:not(:focus-within)) .input,\n  :host([empty]:not(:focus-within)) ::slotted(:is(input, textarea))::placeholder,\n  :host([empty]:not(:focus-within)) ::slotted(select) {\n    color: transparent;\n    transition: color 150ms;\n  }\n`;\n"]}

package/index.d.ts

@@ -5,10 +5,16 @@ import './button/fab.js';
 import './button/icon-button.js';
 import './card/card.js';
 import './checkbox/checkbox.js';
-import './container/container.js';
-import './container/grid.js';
-import './divider/divider.js';
+import './checkbox/checkbox-list-item.js';
+import './radio/radio.js';
+import './radio/radio-list-item.js';
+import './switch/switch.js';
+import './switch/switch-list-item.js';
 import './elevation/elevation.js';
+import './field/field.js';
+import './text-field/text-field.js';
+import './list/list.js';
+import './list/list-item.js';
 import './menu/menu.js';
 import './menu/menu-item.js';
 import './navigation/drawer.js';
@@ -16,27 +22,30 @@ import './navigation/drawer-item.js';
 import './navigation/side-navigation.js';
 import './ripple/ripple.js';
 import './snackbar/snackbar.js';
-export * from './app-bar/top-app-bar';
-export * from './button/button';
-export * from './button/button-base';
-export * from './button/button-set';
-export * from './button/fab';
-export * from './button/icon-button';
-export * from './card/card';
-export * from './card/card-content';
-export * from './card/card-media';
-export * from './checkbox/checkbox';
-export * from './container/grid-base';
-export * from './container/grid';
-export * from './container/container';
-export * from './divider/divider';
-export * from './elevation/elevation';
-export * from './menu/menu';
-export * from './menu/menu-item';
-export * from './navigation/drawer';
-export * from './navigation/drawer-item';
-export * from './navigation/side-navigation';
-export * from './ripple/ripple';
-export * from './snackbar/snackbar';
-export * from './theme/theme-builder';
+export * from './app-bar/top-app-bar.js';
+export * from './button/button.js';
+export * from './button/button-base.js';
+export * from './button/button-set.js';
+export * from './button/fab.js';
+export * from './button/icon-button.js';
+export * from './card/card.js';
+export * from './card/card-content.js';
+export * from './card/card-media.js';
+export * from './checkbox/checkbox.js';
+export * from './radio/radio.js';
+export * from './switch/switch.js';
+export * from './switch/switch-list-item.js';
+export * from './elevation/elevation.js';
+export * from './field/field.js';
+export * from './text-field/text-field.js';
+export * from './list/list.js';
+export * from './list/list-item.js';
+export * from './menu/menu.js';
+export * from './menu/menu-item.js';
+export * from './navigation/drawer.js';
+export * from './navigation/drawer-item.js';
+export * from './navigation/side-navigation.js';
+export * from './ripple/ripple.js';
+export * from './snackbar/snackbar.js';
+export * from './theme/theme-builder.js';
 //# sourceMappingURL=index.d.ts.map

package/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,wBAAwB,CAAC;AAChC,OAAO,0BAA0B,CAAC;AAClC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,0BAA0B,CAAC;AAClC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAEhC,cAAc,uBAAuB,CAAC;AACtC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,cAAc,qBAAqB,CAAC;AACpC,cAAc,cAAc,CAAC;AAC7B,cAAc,sBAAsB,CAAC;AACrC,cAAc,aAAa,CAAC;AAC5B,cAAc,qBAAqB,CAAC;AACpC,cAAc,mBAAmB,CAAC;AAClC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC;AACtC,cAAc,kBAAkB,CAAC;AACjC,cAAc,uBAAuB,CAAC;AACtC,cAAc,mBAAmB,CAAC;AAClC,cAAc,uBAAuB,CAAC;AACtC,cAAc,aAAa,CAAC;AAC5B,cAAc,kBAAkB,CAAC;AACjC,cAAc,qBAAqB,CAAC;AACpC,cAAc,0BAA0B,CAAC;AACzC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,iBAAiB,CAAC;AAChC,cAAc,qBAAqB,CAAC;AACpC,cAAc,uBAAuB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA,OAAO,0BAA0B,CAAC;AAClC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAChC,OAAO,iBAAiB,CAAC;AACzB,OAAO,yBAAyB,CAAC;AACjC,OAAO,gBAAgB,CAAC;AACxB,OAAO,wBAAwB,CAAC;AAChC,OAAO,kCAAkC,CAAC;AAC1C,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,8BAA8B,CAAC;AACtC,OAAO,0BAA0B,CAAC;AAClC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,4BAA4B,CAAC;AACpC,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,gBAAgB,CAAC;AACxB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,wBAAwB,CAAC;AAChC,OAAO,6BAA6B,CAAC;AACrC,OAAO,iCAAiC,CAAC;AACzC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,wBAAwB,CAAC;AAEhC,cAAc,0BAA0B,CAAC;AACzC,cAAc,oBAAoB,CAAC;AACnC,cAAc,yBAAyB,CAAC;AACxC,cAAc,wBAAwB,CAAC;AACvC,cAAc,iBAAiB,CAAC;AAChC,cAAc,yBAAyB,CAAC;AACxC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,wBAAwB,CAAC;AACvC,cAAc,sBAAsB,CAAC;AACrC,cAAc,wBAAwB,CAAC;AACvC,cAAc,kBAAkB,CAAC;AACjC,cAAc,oBAAoB,CAAC;AACnC,cAAc,8BAA8B,CAAC;AAC7C,cAAc,0BAA0B,CAAC;AACzC,cAAc,kBAAkB,CAAC;AACjC,cAAc,4BAA4B,CAAC;AAC3C,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AACpC,cAAc,wBAAwB,CAAC;AACvC,cAAc,6BAA6B,CAAC;AAC5C,cAAc,iCAAiC,CAAC;AAChD,cAAc,oBAAoB,CAAC;AACnC,cAAc,wBAAwB,CAAC;AACvC,cAAc,0BAA0B,CAAC"}