@quieto/ui 0.0.0-stage → 0.1.0

package/dist/components/qds-chip/qds-chip.js

@@ -0,0 +1,314 @@
+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 { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { QdsElement } from '../../internal/qds-element.js';
+/**
+ * A compact label for a status, category, or applied filter.
+ *
+ * A chip is not interactive on its own. With `removable` it gains a remove
+ * button — the only focusable thing in it — which fires `qds-remove` and leaves
+ * the decision to the page: the chip does not delete itself, because the page
+ * usually needs to update its own state (a filter list, a set of tags) first.
+ *
+ * With `selectable` it becomes a filter chip instead: the whole chip is a toggle
+ * button, announced as pressed or not, showing a check mark while selected.
+ * Wrap a set of them in an element with `role="group"` and an `aria-label` so
+ * the set is announced together. A selectable chip ignores `removable`, since a
+ * button cannot contain another button.
+ *
+ * Meaning is never carried by color alone: the variant tints the chip, but the
+ * text has to say what it means.
+ *
+ * @element qds-chip
+ *
+ * @slot - The chip text.
+ * @slot start - Content before the text, typically an icon.
+ *
+ * @fires {CustomEvent<void>} qds-remove - Fired when the remove button is
+ * activated. The chip stays in the DOM; remove it in the handler.
+ * @fires {CustomEvent<{ selected: boolean }>} qds-change - Fired when the user
+ * toggles a selectable chip. Not fired for programmatic changes.
+ *
+ * @csspart base - The chip body. A button when the chip is selectable.
+ * @csspart label - The wrapper around the default slot.
+ * @csspart remove - The remove button.
+ *
+ * @cssprop [--qds-component-chip-gap] - Space between the icon, text, and remove button.
+ * @cssprop [--qds-component-chip-padding-block] - Vertical padding.
+ * @cssprop [--qds-component-chip-padding-inline] - Horizontal padding.
+ * @cssprop [--qds-component-chip-border-radius] - Corner radius.
+ * @cssprop [--qds-component-chip-border-width] - Border thickness.
+ * @cssprop [--qds-component-chip-font-size] - Text size.
+ * @cssprop [--qds-component-chip-font-weight] - Text weight.
+ * @cssprop [--qds-component-chip-line-height] - Text line height.
+ * @cssprop [--qds-component-chip-{variant}-color-background-rest] - Fill per variant.
+ * @cssprop [--qds-component-chip-{variant}-color-content-rest] - Text color per variant.
+ * @cssprop [--qds-component-chip-{variant}-color-border-rest] - Border color per variant.
+ * @cssprop [--qds-component-chip-selectable-color-border-rest] - Border of an unselected selectable chip.
+ * @cssprop [--qds-component-chip-selectable-color-background-hover] - Fill of an unselected selectable chip under the pointer.
+ * @cssprop [--qds-component-chip-selected-color-background-{state}] - Fill of a selected chip: `rest`, `hover`.
+ * @cssprop [--qds-component-chip-selected-color-content-rest] - Text of a selected chip.
+ * @cssprop [--qds-component-chip-selected-color-border-rest] - Border of a selected chip.
+ */
+let QdsChip = class QdsChip extends QdsElement {
+    constructor() {
+        super(...arguments);
+        /** Tone. Pair it with text that states the meaning; color alone does not. */
+        this.variant = 'neutral';
+        /** Makes the chip a toggle button, for filtering. */
+        this.selectable = false;
+        /** Whether a selectable chip is selected. */
+        this.selected = false;
+        /** Prevents toggling a selectable chip. */
+        this.disabled = false;
+        /** Adds a remove button that fires `qds-remove`. Ignored when `selectable`. */
+        this.removable = false;
+        /**
+         * Accessible name for the remove button. Defaults to "Remove" followed by the
+         * chip's text, so a list of chips does not read as a list of identical
+         * "Remove" buttons. Set it when the chip text alone would not make sense after
+         * "Remove", or to translate it.
+         */
+        this.removeLabel = '';
+    }
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: inline-block;
+        vertical-align: middle;
+
+        --_bg: var(--qds-component-chip-neutral-color-background-rest, #f1f5f9);
+        --_fg: var(--qds-component-chip-neutral-color-content-rest, #0f172a);
+        --_border: var(--qds-component-chip-neutral-color-border-rest, #cbd5e1);
+      }
+
+      :host([variant='info']) {
+        --_bg: var(--qds-component-chip-info-color-background-rest, #dbeafe);
+        --_fg: var(--qds-component-chip-info-color-content-rest, #1d4ed8);
+        --_border: var(--qds-component-chip-info-color-border-rest, transparent);
+      }
+
+      :host([variant='success']) {
+        --_bg: var(--qds-component-chip-success-color-background-rest, #dcfce7);
+        --_fg: var(--qds-component-chip-success-color-content-rest, #15803d);
+        --_border: var(--qds-component-chip-success-color-border-rest, transparent);
+      }
+
+      :host([variant='warning']) {
+        --_bg: var(--qds-component-chip-warning-color-background-rest, #fef9c3);
+        --_fg: var(--qds-component-chip-warning-color-content-rest, #854d0e);
+        --_border: var(--qds-component-chip-warning-color-border-rest, transparent);
+      }
+
+      :host([variant='error']) {
+        --_bg: var(--qds-component-chip-error-color-background-rest, #fee2e2);
+        --_fg: var(--qds-component-chip-error-color-content-rest, #b91c1c);
+        --_border: var(--qds-component-chip-error-color-border-rest, transparent);
+      }
+
+      .base {
+        display: inline-flex;
+        align-items: center;
+        gap: var(--qds-component-chip-gap, 0.25rem);
+        padding: var(--qds-component-chip-padding-block, 0.25rem)
+          var(--qds-component-chip-padding-inline, 0.75rem);
+
+        font-family: var(--qds-typography-font-family-sans, inherit);
+        font-size: var(--qds-component-chip-font-size, 0.75rem);
+        font-weight: var(--qds-component-chip-font-weight, 500);
+        line-height: var(--qds-component-chip-line-height, 1.375);
+        white-space: nowrap;
+
+        color: var(--_fg);
+        background-color: var(--_bg);
+        border: var(--qds-component-chip-border-width, 0.0625rem) solid var(--_border);
+        border-radius: var(--qds-component-chip-border-radius, 9999px);
+      }
+
+      /* Pull the remove button toward the edge so the padding looks even. */
+      :host([removable]) .base {
+        padding-inline-end: var(--qds-component-chip-padding-block, 0.25rem);
+      }
+
+      .remove {
+        display: inline-grid;
+        place-items: center;
+        width: 1.25em;
+        height: 1.25em;
+        margin: 0;
+        padding: 0;
+
+        font: inherit;
+        line-height: 1;
+        color: inherit;
+        background: none;
+        border: 0;
+        border-radius: 50%;
+        cursor: pointer;
+      }
+
+      /*
+       * Tinted from the text color, so the hover state works on every variant
+       * without a token per variant.
+       */
+      .remove:hover {
+        background-color: color-mix(in srgb, currentColor 15%, transparent);
+      }
+
+      .remove:focus-visible {
+        outline: var(--_focus-ring);
+        outline-offset: 0.0625rem;
+      }
+
+      .remove svg {
+        width: 0.75em;
+        height: 0.75em;
+      }
+
+      /*
+       * Selectable: an interactive control, so its border must reach 3:1 against
+       * the page, which the decorative variant borders do not.
+       */
+      :host([selectable]) {
+        --_border: var(--qds-component-chip-selectable-color-border-rest, #64748b);
+      }
+
+      :host([selectable][selected]) {
+        --_bg: var(--qds-component-chip-selected-color-background-rest, #2563eb);
+        --_fg: var(--qds-component-chip-selected-color-content-rest, #f8fafc);
+        --_border: var(--qds-component-chip-selected-color-border-rest, transparent);
+      }
+
+      button.base {
+        margin: 0;
+        font-family: var(--qds-typography-font-family-sans, inherit);
+        cursor: pointer;
+        -webkit-appearance: none;
+        appearance: none;
+      }
+
+      /* Hover only while enabled: a disabled chip must not look interactive. */
+      button.base:where(:hover:not(:disabled)) {
+        background-color: var(--qds-component-chip-selectable-color-background-hover, #e2e8f0);
+      }
+
+      :host([selected]) button.base:where(:hover:not(:disabled)) {
+        background-color: var(--qds-component-chip-selected-color-background-hover, #1d4ed8);
+      }
+
+      button.base:focus-visible {
+        outline: var(--_focus-ring);
+        outline-offset: 0.125rem;
+      }
+
+      button.base:disabled {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      .check {
+        width: 0.875em;
+        height: 0.875em;
+        /* Pull it toward the edge so the chip does not grow lopsided when selected. */
+        margin-inline-start: -0.25em;
+      }
+
+      @media (forced-colors: active) {
+        .base {
+          border-color: CanvasText;
+        }
+
+        :host([selected]) .base {
+          border-color: Highlight;
+        }
+      }
+    `,
+    ]; }
+    #handleRemove() {
+        this.dispatchEvent(new CustomEvent('qds-remove', { bubbles: true, composed: true }));
+    }
+    #handleToggle() {
+        this.selected = !this.selected;
+        this.dispatchEvent(new CustomEvent('qds-change', {
+            detail: { selected: this.selected },
+            bubbles: true,
+            composed: true,
+        }));
+    }
+    render() {
+        if (this.selectable) {
+            return html `
+        <button
+          class="base"
+          part="base"
+          type="button"
+          aria-pressed=${String(this.selected)}
+          ?disabled=${this.disabled}
+          @click=${this.#handleToggle}
+        >
+          ${this.selected
+                ? html `<svg class="check" viewBox="0 0 16 16" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
+                <polyline points="3.5 8.5 6.5 11.5 12.5 4.5"></polyline>
+              </svg>`
+                : html `<slot name="start"></slot>`}
+          <span id="label" part="label"><slot></slot></span>
+        </button>
+      `;
+        }
+        return html `
+      <span class="base" part="base">
+        <slot name="start"></slot>
+        <span id="label" part="label"><slot></slot></span>
+        ${this.removable
+            ? html `<button
+              class="remove"
+              part="remove"
+              type="button"
+              aria-label=${this.removeLabel || nothing}
+              aria-labelledby=${this.removeLabel ? nothing : 'remove-text label'}
+              @click=${this.#handleRemove}
+            >
+              <!--
+                Named by reference rather than by reading textContent: the
+                server has no light DOM to read, and a hydrating render does not
+                correct an attribute that differs from the server's.
+              -->
+              <span id="remove-text" hidden>Remove</span>
+              <svg viewBox="0 0 12 12" aria-hidden="true" fill="none" stroke="currentColor" stroke-width="1.75" stroke-linecap="round">
+                <path d="M3 3l6 6M9 3l-6 6"></path>
+              </svg>
+            </button>`
+            : nothing}
+      </span>
+    `;
+    }
+};
+__decorate([
+    property({ reflect: true })
+], QdsChip.prototype, "variant", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsChip.prototype, "selectable", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsChip.prototype, "selected", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsChip.prototype, "disabled", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsChip.prototype, "removable", void 0);
+__decorate([
+    property({ attribute: 'remove-label' })
+], QdsChip.prototype, "removeLabel", void 0);
+QdsChip = __decorate([
+    customElement('qds-chip')
+], QdsChip);
+export { QdsChip };
+//# sourceMappingURL=qds-chip.js.map

package/dist/components/qds-chip/qds-chip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-chip.js","sourceRoot":"","sources":["../../../src/components/qds-chip/qds-chip.ts"],"names":[],"mappings":"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"}

package/dist/components/qds-input/qds-input.d.ts

@@ -0,0 +1,64 @@
+import { type TemplateResult } from 'lit';
+import { QdsTextControl, type QdsTextControlType } from '../../internal/qds-text-control.js';
+export type QdsInputType = QdsTextControlType;
+export type QdsInputSize = 'sm' | 'md' | 'lg';
+/**
+ * A single-line text input, on its own.
+ *
+ * This is the bare control. It has no visible label, so it takes its accessible
+ * name from the `label` attribute — a `<label for>` outside cannot reach an input
+ * inside a shadow root. Where a visible label, hint, or error message is wanted,
+ * use `qds-text-field`, which renders all three inside its own shadow root so
+ * they can be wired to the input.
+ *
+ * Constraint validation is the native input's: `required`, `minlength`,
+ * `pattern`, and the type's own rules (`email`, `url`) are mirrored to the form,
+ * and the error border appears only after the user has interacted, via
+ * `:user-invalid`.
+ *
+ * @element qds-input
+ *
+ * @slot start - Content before the text, such as an icon or a prefix.
+ * @slot end - Content after the text, such as a unit or a button.
+ *
+ * @fires {CustomEvent<{ value: string }>} qds-input - Fired on every keystroke.
+ * @fires {CustomEvent<{ value: string }>} qds-change - Fired when the value is
+ * committed: on blur after editing, or on Enter.
+ *
+ * @csspart base - The box drawn around the input and its affixes.
+ * @csspart input - The native input.
+ *
+ * @cssprop [--qds-component-input-gap] - Space between the text and the affixes.
+ * @cssprop [--qds-component-input-border-radius] - Corner radius.
+ * @cssprop [--qds-component-input-border-width] - Border thickness.
+ * @cssprop [--qds-component-input-line-height] - Text line height.
+ * @cssprop [--qds-component-input-duration] - Border transition duration.
+ * @cssprop [--qds-component-input-{size}-padding-block] - Vertical padding per size.
+ * @cssprop [--qds-component-input-{size}-padding-inline] - Horizontal padding per size.
+ * @cssprop [--qds-component-input-{size}-font-size] - Text size per size.
+ * @cssprop [--qds-component-input-color-background-{state}] - Fill: `rest`, `disabled`.
+ * @cssprop [--qds-component-input-color-border-{state}] - Border: `rest`, `focus`, `disabled`.
+ * @cssprop [--qds-component-input-color-content-{state}] - Text: `rest`, `disabled`.
+ * @cssprop [--qds-component-input-invalid-color-border-rest] - Border while invalid.
+ * @cssprop [--qds-component-input-placeholder-color-content-rest] - Placeholder text.
+ * @cssprop [--qds-component-input-affix-color-content-rest] - Color of slotted start and end content.
+ */
+export declare class QdsInput extends QdsTextControl {
+    static styles: import("lit").CSSResult[];
+    /** Accessible name. Required, since this control has no visible label. */
+    label: string;
+    /** Control size. */
+    size: QdsInputSize;
+    /**
+     * Shows the error state and sets `aria-invalid`, for errors the form itself
+     * cannot detect, such as a server-side check. Does not block submission.
+     */
+    invalid: boolean;
+    render(): TemplateResult;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'qds-input': QdsInput;
+    }
+}
+//# sourceMappingURL=qds-input.d.ts.map

package/dist/components/qds-input/qds-input.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-input.d.ts","sourceRoot":"","sources":["../../../src/components/qds-input/qds-input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAsB,KAAK,cAAc,EAAE,MAAM,KAAK,CAAC;AAK9D,OAAO,EAAE,cAAc,EAAE,KAAK,kBAAkB,EAAE,MAAM,oCAAoC,CAAC;AAE7F,MAAM,MAAM,YAAY,GAAG,kBAAkB,CAAC;AAC9C,MAAM,MAAM,YAAY,GAAG,IAAI,GAAG,IAAI,GAAG,IAAI,CAAC;AAE9C;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AACH,qBACa,QAAS,SAAQ,cAAc;IAC1C,OAAgB,MAAM,4BAqHpB;IAEF,0EAA0E;IAE1E,KAAK,SAAM;IAEX,oBAAoB;IAEpB,IAAI,EAAE,YAAY,CAAQ;IAE1B;;;OAGG;IAEH,OAAO,UAAS;IAEP,MAAM,IAAI,cAAc;CA0BlC;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,WAAW,EAAE,QAAQ,CAAC;KACvB;CACF"}

package/dist/components/qds-input/qds-input.js

@@ -0,0 +1,224 @@
+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 { css, html, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { live } from 'lit/directives/live.js';
+import { QdsElement } from '../../internal/qds-element.js';
+import { QdsTextControl } from '../../internal/qds-text-control.js';
+/**
+ * A single-line text input, on its own.
+ *
+ * This is the bare control. It has no visible label, so it takes its accessible
+ * name from the `label` attribute — a `<label for>` outside cannot reach an input
+ * inside a shadow root. Where a visible label, hint, or error message is wanted,
+ * use `qds-text-field`, which renders all three inside its own shadow root so
+ * they can be wired to the input.
+ *
+ * Constraint validation is the native input's: `required`, `minlength`,
+ * `pattern`, and the type's own rules (`email`, `url`) are mirrored to the form,
+ * and the error border appears only after the user has interacted, via
+ * `:user-invalid`.
+ *
+ * @element qds-input
+ *
+ * @slot start - Content before the text, such as an icon or a prefix.
+ * @slot end - Content after the text, such as a unit or a button.
+ *
+ * @fires {CustomEvent<{ value: string }>} qds-input - Fired on every keystroke.
+ * @fires {CustomEvent<{ value: string }>} qds-change - Fired when the value is
+ * committed: on blur after editing, or on Enter.
+ *
+ * @csspart base - The box drawn around the input and its affixes.
+ * @csspart input - The native input.
+ *
+ * @cssprop [--qds-component-input-gap] - Space between the text and the affixes.
+ * @cssprop [--qds-component-input-border-radius] - Corner radius.
+ * @cssprop [--qds-component-input-border-width] - Border thickness.
+ * @cssprop [--qds-component-input-line-height] - Text line height.
+ * @cssprop [--qds-component-input-duration] - Border transition duration.
+ * @cssprop [--qds-component-input-{size}-padding-block] - Vertical padding per size.
+ * @cssprop [--qds-component-input-{size}-padding-inline] - Horizontal padding per size.
+ * @cssprop [--qds-component-input-{size}-font-size] - Text size per size.
+ * @cssprop [--qds-component-input-color-background-{state}] - Fill: `rest`, `disabled`.
+ * @cssprop [--qds-component-input-color-border-{state}] - Border: `rest`, `focus`, `disabled`.
+ * @cssprop [--qds-component-input-color-content-{state}] - Text: `rest`, `disabled`.
+ * @cssprop [--qds-component-input-invalid-color-border-rest] - Border while invalid.
+ * @cssprop [--qds-component-input-placeholder-color-content-rest] - Placeholder text.
+ * @cssprop [--qds-component-input-affix-color-content-rest] - Color of slotted start and end content.
+ */
+let QdsInput = class QdsInput extends QdsTextControl {
+    constructor() {
+        super(...arguments);
+        /** Accessible name. Required, since this control has no visible label. */
+        this.label = '';
+        /** Control size. */
+        this.size = 'md';
+        /**
+         * Shows the error state and sets `aria-invalid`, for errors the form itself
+         * cannot detect, such as a server-side check. Does not block submission.
+         */
+        this.invalid = false;
+    }
+    static { this.styles = [
+        QdsElement.baseStyles,
+        css `
+      :host {
+        display: inline-block;
+
+        --_padding-block: var(--qds-component-input-md-padding-block, 0.5rem);
+        --_padding-inline: var(--qds-component-input-md-padding-inline, 0.75rem);
+        --_font-size: var(--qds-component-input-md-font-size, 0.875rem);
+        --_border: var(--qds-component-input-color-border-rest, #64748b);
+      }
+
+      :host([size='sm']) {
+        --_padding-block: var(--qds-component-input-sm-padding-block, 0.25rem);
+        --_padding-inline: var(--qds-component-input-sm-padding-inline, 0.5rem);
+        --_font-size: var(--qds-component-input-sm-font-size, 0.75rem);
+      }
+
+      :host([size='lg']) {
+        --_padding-block: var(--qds-component-input-lg-padding-block, 0.75rem);
+        --_padding-inline: var(--qds-component-input-lg-padding-inline, 1rem);
+        --_font-size: var(--qds-component-input-lg-font-size, 1rem);
+      }
+
+      /*
+       * Invalid either because the author said so, or because the user has
+       * interacted and native validation fails. :user-invalid rather than
+       * :invalid, so an empty required field is not red before anyone touched it.
+       *
+       * Set on .base, not :host — :host(:has()) only sees light DOM children, so
+       * it can never match the input inside this shadow root.
+       */
+      :host([invalid]) .base,
+      .base:has(input:user-invalid) {
+        --_border: var(--qds-component-input-invalid-color-border-rest, #dc2626);
+      }
+
+      .base {
+        display: flex;
+        align-items: center;
+        gap: var(--qds-component-input-gap, 0.5rem);
+        width: 100%;
+        padding: 0 var(--_padding-inline);
+
+        font-family: var(--qds-typography-font-family-sans, inherit);
+        font-size: var(--_font-size);
+        line-height: var(--qds-component-input-line-height, 1.5);
+        color: var(--qds-component-input-color-content-rest, #0f172a);
+
+        background-color: var(--qds-component-input-color-background-rest, #f8fafc);
+        border: var(--qds-component-input-border-width, 0.0625rem) solid var(--_border);
+        border-radius: var(--qds-component-input-border-radius, 0.375rem);
+        cursor: text;
+
+        transition: border-color var(--qds-component-input-duration, 120ms);
+      }
+
+      /*
+       * The focus ring goes on the box rather than the input, so that it wraps
+       * the affixes too and reads as one control.
+       */
+      .base:focus-within {
+        border-color: var(--qds-component-input-color-border-focus, #2563eb);
+        outline: var(--_focus-ring);
+        outline-offset: 0.0625rem;
+      }
+
+      input {
+        flex: 1;
+        min-width: 0;
+        margin: 0;
+        padding: var(--_padding-block) 0;
+
+        font: inherit;
+        color: inherit;
+        background: none;
+        border: 0;
+        outline: none;
+      }
+
+      input::placeholder {
+        color: var(--qds-component-input-placeholder-color-content-rest, #64748b);
+        opacity: 1;
+      }
+
+      ::slotted(*) {
+        flex: none;
+        color: var(--qds-component-input-affix-color-content-rest, #64748b);
+      }
+
+      :host(:disabled) .base {
+        color: var(--qds-component-input-color-content-disabled, #64748b);
+        background-color: var(--qds-component-input-color-background-disabled, #f1f5f9);
+        border-color: var(--qds-component-input-color-border-disabled, #e2e8f0);
+        cursor: not-allowed;
+      }
+
+      :host(:disabled) input {
+        cursor: not-allowed;
+      }
+
+      @media (prefers-reduced-motion: reduce) {
+        .base {
+          transition: none;
+        }
+      }
+
+      @media (forced-colors: active) {
+        .base {
+          border-color: FieldText;
+        }
+
+        :host(:disabled) .base {
+          border-color: GrayText;
+        }
+      }
+    `,
+    ]; }
+    render() {
+        return html `
+      <div class="base" part="base" @click=${this.focusInput}>
+        <slot name="start"></slot>
+        <input
+          part="input"
+          type=${this.type}
+          .value=${live(this.value)}
+          name=${this.name || nothing}
+          placeholder=${this.placeholder || nothing}
+          aria-label=${this.label || nothing}
+          aria-invalid=${this.invalid ? 'true' : nothing}
+          autocomplete=${this.autocomplete ?? nothing}
+          minlength=${this.minlength ?? nothing}
+          maxlength=${this.maxlength ?? nothing}
+          pattern=${this.pattern ?? nothing}
+          ?disabled=${this.disabled || this.formDisabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        />
+        <slot name="end"></slot>
+      </div>
+    `;
+    }
+};
+__decorate([
+    property()
+], QdsInput.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true })
+], QdsInput.prototype, "size", void 0);
+__decorate([
+    property({ type: Boolean, reflect: true })
+], QdsInput.prototype, "invalid", void 0);
+QdsInput = __decorate([
+    customElement('qds-input')
+], QdsInput);
+export { QdsInput };
+//# sourceMappingURL=qds-input.js.map

package/dist/components/qds-input/qds-input.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"qds-input.js","sourceRoot":"","sources":["../../../src/components/qds-input/qds-input.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,OAAO,EAAuB,MAAM,KAAK,CAAC;AAC9D,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,IAAI,EAAE,MAAM,wBAAwB,CAAC;AAE9C,OAAO,EAAE,UAAU,EAAE,MAAM,+BAA+B,CAAC;AAC3D,OAAO,EAAE,cAAc,EAA2B,MAAM,oCAAoC,CAAC;AAK7F;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAwCG;AAEI,IAAM,QAAQ,GAAd,MAAM,QAAS,SAAQ,cAAc;IAArC;;QAwHL,0EAA0E;QAE1E,UAAK,GAAG,EAAE,CAAC;QAEX,oBAAoB;QAEpB,SAAI,GAAiB,IAAI,CAAC;QAE1B;;;WAGG;QAEH,YAAO,GAAG,KAAK,CAAC;IA4BlB,CAAC;aAhKiB,WAAM,GAAG;QACvB,UAAU,CAAC,UAAU;QACrB,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;KAkHF;KACF,AArHqB,CAqHpB;IAiBO,MAAM;QACb,OAAO,IAAI,CAAA;6CAC8B,IAAI,CAAC,UAAU;;;;iBAI3C,IAAI,CAAC,IAAI;mBACP,IAAI,CAAC,IAAI,CAAC,KAAK,CAAC;iBAClB,IAAI,CAAC,IAAI,IAAI,OAAO;wBACb,IAAI,CAAC,WAAW,IAAI,OAAO;uBAC5B,IAAI,CAAC,KAAK,IAAI,OAAO;yBACnB,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO;yBAC/B,IAAI,CAAC,YAAY,IAAI,OAAO;sBAC/B,IAAI,CAAC,SAAS,IAAI,OAAO;sBACzB,IAAI,CAAC,SAAS,IAAI,OAAO;oBAC3B,IAAI,CAAC,OAAO,IAAI,OAAO;sBACrB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY;sBAClC,IAAI,CAAC,QAAQ;sBACb,IAAI,CAAC,QAAQ;mBAChB,IAAI,CAAC,WAAW;oBACf,IAAI,CAAC,YAAY;;;;KAIhC,CAAC;IACJ,CAAC;;AAtCD;IADC,QAAQ,EAAE;uCACA;AAIX;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;sCACF;AAO1B;IADC,QAAQ,CAAC,EAAE,IAAI,EAAE,OAAO,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;yCAC3B;AArIL,QAAQ;IADpB,aAAa,CAAC,WAAW,CAAC;GACd,QAAQ,CAiKpB"}