@manzanohq/components 0.1.1

package/dist/components/icon/icon.d.ts

@@ -0,0 +1,8 @@
+import { MzIcon } from './icon.component.js';
+export * from './icon.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-icon': MzIcon;
+    }
+}
+//# sourceMappingURL=icon.d.ts.map

package/dist/components/icon/icon.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C,cAAc,qBAAqB,CAAC;AAIpC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,SAAS,EAAE,MAAM,CAAC;KACnB;CACF"}

package/dist/components/icon/icon.js

@@ -0,0 +1,4 @@
+import { MzIcon } from "./icon.component.js";
+export * from "./icon.component.js";
+MzIcon.define("mz-icon");
+//# sourceMappingURL=icon.js.map

package/dist/components/icon/icon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/icon/icon.ts"],
+  "sourcesContent": ["import { MzIcon } from './icon.component.js';\n\nexport * from './icon.component.js';\n\nMzIcon.define('mz-icon');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-icon': MzIcon;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,cAAc;AAEvB,cAAc;AAEd,OAAO,OAAO,SAAS;",
+  "names": []
+}

package/dist/components/icon/icon.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;
+//# sourceMappingURL=icon.styles.d.ts.map

package/dist/components/icon/icon.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"icon.styles.d.ts","sourceRoot":"","sources":["../../../src/components/icon/icon.styles.ts"],"names":[],"mappings":";AAGA,wBAuBE"}

package/dist/components/icon/icon.styles.js

@@ -0,0 +1,30 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var icon_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: inline-flex;
+      width: var(--mz-icon-size, 1em);
+      height: var(--mz-icon-size, 1em);
+      color: inherit;
+      flex: none;
+    }
+
+    svg {
+      display: block;
+      width: 100%;
+      height: 100%;
+      fill: currentColor;
+    }
+
+    /* RTL: Flip directional icons */
+    :host([dir='rtl']) svg.flip-rtl {
+      transform: scaleX(-1);
+    }
+  `
+];
+export {
+  icon_styles_default as default
+};
+//# sourceMappingURL=icon.styles.js.map

package/dist/components/icon/icon.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/icon/icon.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: inline-flex;\n      width: var(--mz-icon-size, 1em);\n      height: var(--mz-icon-size, 1em);\n      color: inherit;\n      flex: none;\n    }\n\n    svg {\n      display: block;\n      width: 100%;\n      height: 100%;\n      fill: currentColor;\n    }\n\n    /* RTL: Flip directional icons */\n    :host([dir='rtl']) svg.flip-rtl {\n      transform: scaleX(-1);\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,sBAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBF;",
+  "names": []
+}

package/dist/components/input/input.component.d.ts

@@ -0,0 +1,74 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A text input field.
+ *
+ * @tag mz-input
+ *
+ * @slot prefix - Content before the input.
+ * @slot suffix - Content after the input.
+ * @slot label - The input label.
+ * @slot help-text - Help text below the input.
+ *
+ * @event mz-input - Emitted when the user types.
+ * @event mz-change - Emitted when the value changes and the input loses focus.
+ * @event mz-focus - Emitted when the input gains focus.
+ * @event mz-blur - Emitted when the input loses focus.
+ *
+ * @csspart base - The form control wrapper.
+ * @csspart label - The label element.
+ * @csspart control-wrapper - The input + prefix/suffix wrapper.
+ * @csspart control - The native input element.
+ * @csspart prefix - The prefix container.
+ * @csspart suffix - The suffix container.
+ * @csspart help-text - The help text element.
+ *
+ * @cssproperty --mz-input-bg - Override the input background.
+ */
+export declare class MzInput extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    static formAssociated: boolean;
+    private readonly hasSlotController;
+    private inputEl;
+    /** The input's type. */
+    type: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number';
+    /** The input's name for form participation. */
+    name: string;
+    /** The input's value. */
+    value: string;
+    /** Placeholder text. */
+    placeholder: string;
+    /** The input's size. */
+    size: 'sm' | 'md' | 'lg';
+    /** The label text (alternative to label slot). */
+    label: string;
+    /** Help text (alternative to help-text slot). */
+    helpText: string;
+    /** Disables the input. */
+    disabled: boolean;
+    /** Makes the input readonly. */
+    readonly: boolean;
+    /** Makes the input required. */
+    required: boolean;
+    /** Renders a pill-shaped input. */
+    pill: boolean;
+    /** Minimum length. */
+    minlength?: number;
+    /** Maximum length. */
+    maxlength?: number;
+    /** Pattern for validation. */
+    pattern?: string;
+    /** Autocomplete attribute. */
+    autocomplete?: string;
+    /** Sets focus on the input. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the input. */
+    blur(): void;
+    /** Selects all text. */
+    select(): void;
+    private handleInput;
+    private handleChange;
+    private handleFocus;
+    private handleBlur;
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=input.component.d.ts.map

package/dist/components/input/input.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.component.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.component.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAInE;;;;;;;;;;;;;;;;;;;;;;;;GAwBG;AACH,qBAAa,OAAQ,SAAQ,cAAc;IACzC,MAAM,CAAC,MAAM,4BAAU;IACvB,MAAM,CAAC,cAAc,UAAQ;IAE7B,OAAO,CAAC,QAAQ,CAAC,iBAAiB,CAAyE;IAEjF,OAAO,CAAC,OAAO,CAAoB;IAE7D,wBAAwB;IACZ,IAAI,EAAE,MAAM,GAAG,OAAO,GAAG,UAAU,GAAG,QAAQ,GAAG,KAAK,GAAG,KAAK,GAAG,QAAQ,CAAU;IAE/F,+CAA+C;IACnC,IAAI,SAAM;IAEtB,yBAAyB;IACb,KAAK,SAAM;IAEvB,wBAAwB;IACZ,WAAW,SAAM;IAE7B,wBAAwB;IACK,IAAI,EAAE,IAAI,GAAG,IAAI,GAAG,IAAI,CAAQ;IAE7D,kDAAkD;IACtC,KAAK,SAAM;IAEvB,iDAAiD;IACX,QAAQ,SAAM;IAEpD,0BAA0B;IACkB,QAAQ,UAAS;IAE7D,gCAAgC;IACY,QAAQ,UAAS;IAE7D,gCAAgC;IACY,QAAQ,UAAS;IAE7D,mCAAmC;IACS,IAAI,UAAS;IAEzD,sBAAsB;IACM,SAAS,CAAC,EAAE,MAAM,CAAC;IAE/C,sBAAsB;IACM,SAAS,CAAC,EAAE,MAAM,CAAC;IAE/C,8BAA8B;IAClB,OAAO,CAAC,EAAE,MAAM,CAAC;IAE7B,8BAA8B;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IAElC,+BAA+B;IAC/B,KAAK,CAAC,OAAO,CAAC,EAAE,YAAY,GAAG,IAAI;IAInC,oCAAoC;IACpC,IAAI,IAAI,IAAI;IAIZ,wBAAwB;IACxB,MAAM,IAAI,IAAI;IAId,OAAO,CAAC,WAAW;IAKnB,OAAO,CAAC,YAAY;IAIpB,OAAO,CAAC,WAAW;IAInB,OAAO,CAAC,UAAU;IAIlB,MAAM;CA4CP"}

package/dist/components/input/input.component.js

@@ -0,0 +1,152 @@
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result) __defProp(target, key, result);
+  return result;
+};
+import { html, nothing } from "lit";
+import { property, query } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+import { live } from "lit/directives/live.js";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import { HasSlotController } from "../../internal/slot.js";
+import styles from "./input.styles.js";
+class MzInput extends ManzanoElement {
+  constructor() {
+    super(...arguments);
+    this.hasSlotController = new HasSlotController(this, "label", "help-text", "prefix", "suffix");
+    this.type = "text";
+    this.name = "";
+    this.value = "";
+    this.placeholder = "";
+    this.size = "md";
+    this.label = "";
+    this.helpText = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.pill = false;
+  }
+  /** Sets focus on the input. */
+  focus(options) {
+    this.inputEl?.focus(options);
+  }
+  /** Removes focus from the input. */
+  blur() {
+    this.inputEl?.blur();
+  }
+  /** Selects all text. */
+  select() {
+    this.inputEl?.select();
+  }
+  handleInput() {
+    this.value = this.inputEl.value;
+    this.emit("mz-input");
+  }
+  handleChange() {
+    this.emit("mz-change");
+  }
+  handleFocus() {
+    this.emit("mz-focus");
+  }
+  handleBlur() {
+    this.emit("mz-blur");
+  }
+  render() {
+    const hasLabel = this.label || this.hasSlotController.test("label");
+    const hasHelpText = this.helpText || this.hasSlotController.test("help-text");
+    return html`
+      <div part="base" class="form-control">
+        ${hasLabel ? html`<label part="label" class="form-control__label" for="control">
+              ${this.label || html`<slot name="label"></slot>`}
+            </label>` : nothing}
+        <div part="control-wrapper" class="input__control-wrapper">
+          <span part="prefix" class="input__prefix"><slot name="prefix"></slot></span>
+          <input
+            id="control"
+            part="control"
+            class="input__control"
+            type=${this.type}
+            name=${ifDefined(this.name || void 0)}
+            .value=${live(this.value)}
+            placeholder=${ifDefined(this.placeholder || void 0)}
+            ?disabled=${this.disabled}
+            ?readonly=${this.readonly}
+            ?required=${this.required}
+            minlength=${ifDefined(this.minlength)}
+            maxlength=${ifDefined(this.maxlength)}
+            pattern=${ifDefined(this.pattern)}
+            autocomplete=${ifDefined(this.autocomplete)}
+            aria-label=${ifDefined(!hasLabel ? this.placeholder || void 0 : void 0)}
+            @input=${this.handleInput}
+            @change=${this.handleChange}
+            @focus=${this.handleFocus}
+            @blur=${this.handleBlur}
+          />
+          <span part="suffix" class="input__suffix"><slot name="suffix"></slot></span>
+        </div>
+        ${hasHelpText ? html`<span part="help-text" class="form-control__help-text">
+              ${this.helpText || html`<slot name="help-text"></slot>`}
+            </span>` : nothing}
+      </div>
+    `;
+  }
+}
+MzInput.styles = styles;
+MzInput.formAssociated = true;
+__decorateClass([
+  query(".input__control")
+], MzInput.prototype, "inputEl", 2);
+__decorateClass([
+  property()
+], MzInput.prototype, "type", 2);
+__decorateClass([
+  property()
+], MzInput.prototype, "name", 2);
+__decorateClass([
+  property()
+], MzInput.prototype, "value", 2);
+__decorateClass([
+  property()
+], MzInput.prototype, "placeholder", 2);
+__decorateClass([
+  property({ reflect: true })
+], MzInput.prototype, "size", 2);
+__decorateClass([
+  property()
+], MzInput.prototype, "label", 2);
+__decorateClass([
+  property({ attribute: "help-text" })
+], MzInput.prototype, "helpText", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzInput.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzInput.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzInput.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], MzInput.prototype, "pill", 2);
+__decorateClass([
+  property({ type: Number })
+], MzInput.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Number })
+], MzInput.prototype, "maxlength", 2);
+__decorateClass([
+  property()
+], MzInput.prototype, "pattern", 2);
+__decorateClass([
+  property()
+], MzInput.prototype, "autocomplete", 2);
+export {
+  MzInput
+};
+//# sourceMappingURL=input.component.js.map

package/dist/components/input/input.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/input/input.component.ts"],
+  "sourcesContent": ["import { html, nothing } from 'lit';\nimport { property, query } from 'lit/decorators.js';\nimport { ifDefined } from 'lit/directives/if-defined.js';\nimport { live } from 'lit/directives/live.js';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport { HasSlotController } from '../../internal/slot.js';\nimport styles from './input.styles.js';\n\n/**\n * @summary A text input field.\n *\n * @tag mz-input\n *\n * @slot prefix - Content before the input.\n * @slot suffix - Content after the input.\n * @slot label - The input label.\n * @slot help-text - Help text below the input.\n *\n * @event mz-input - Emitted when the user types.\n * @event mz-change - Emitted when the value changes and the input loses focus.\n * @event mz-focus - Emitted when the input gains focus.\n * @event mz-blur - Emitted when the input loses focus.\n *\n * @csspart base - The form control wrapper.\n * @csspart label - The label element.\n * @csspart control-wrapper - The input + prefix/suffix wrapper.\n * @csspart control - The native input element.\n * @csspart prefix - The prefix container.\n * @csspart suffix - The suffix container.\n * @csspart help-text - The help text element.\n *\n * @cssproperty --mz-input-bg - Override the input background.\n */\nexport class MzInput extends ManzanoElement {\n  static styles = styles;\n  static formAssociated = true;\n\n  private readonly hasSlotController = new HasSlotController(this, 'label', 'help-text', 'prefix', 'suffix');\n\n  @query('.input__control') private inputEl!: HTMLInputElement;\n\n  /** The input's type. */\n  @property() type: 'text' | 'email' | 'password' | 'search' | 'tel' | 'url' | 'number' = 'text';\n\n  /** The input's name for form participation. */\n  @property() name = '';\n\n  /** The input's value. */\n  @property() value = '';\n\n  /** Placeholder text. */\n  @property() placeholder = '';\n\n  /** The input's size. */\n  @property({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** The label text (alternative to label slot). */\n  @property() label = '';\n\n  /** Help text (alternative to help-text slot). */\n  @property({ attribute: 'help-text' }) helpText = '';\n\n  /** Disables the input. */\n  @property({ type: Boolean, reflect: true }) disabled = false;\n\n  /** Makes the input readonly. */\n  @property({ type: Boolean, reflect: true }) readonly = false;\n\n  /** Makes the input required. */\n  @property({ type: Boolean, reflect: true }) required = false;\n\n  /** Renders a pill-shaped input. */\n  @property({ type: Boolean, reflect: true }) pill = false;\n\n  /** Minimum length. */\n  @property({ type: Number }) minlength?: number;\n\n  /** Maximum length. */\n  @property({ type: Number }) maxlength?: number;\n\n  /** Pattern for validation. */\n  @property() pattern?: string;\n\n  /** Autocomplete attribute. */\n  @property() autocomplete?: string;\n\n  /** Sets focus on the input. */\n  focus(options?: FocusOptions): void {\n    this.inputEl?.focus(options);\n  }\n\n  /** Removes focus from the input. */\n  blur(): void {\n    this.inputEl?.blur();\n  }\n\n  /** Selects all text. */\n  select(): void {\n    this.inputEl?.select();\n  }\n\n  private handleInput(): void {\n    this.value = this.inputEl.value;\n    this.emit('mz-input');\n  }\n\n  private handleChange(): void {\n    this.emit('mz-change');\n  }\n\n  private handleFocus(): void {\n    this.emit('mz-focus');\n  }\n\n  private handleBlur(): void {\n    this.emit('mz-blur');\n  }\n\n  render() {\n    const hasLabel = this.label || this.hasSlotController.test('label');\n    const hasHelpText = this.helpText || this.hasSlotController.test('help-text');\n\n    return html`\n      <div part=\"base\" class=\"form-control\">\n        ${hasLabel\n          ? html`<label part=\"label\" class=\"form-control__label\" for=\"control\">\n              ${this.label || html`<slot name=\"label\"></slot>`}\n            </label>`\n          : nothing}\n        <div part=\"control-wrapper\" class=\"input__control-wrapper\">\n          <span part=\"prefix\" class=\"input__prefix\"><slot name=\"prefix\"></slot></span>\n          <input\n            id=\"control\"\n            part=\"control\"\n            class=\"input__control\"\n            type=${this.type}\n            name=${ifDefined(this.name || undefined)}\n            .value=${live(this.value)}\n            placeholder=${ifDefined(this.placeholder || undefined)}\n            ?disabled=${this.disabled}\n            ?readonly=${this.readonly}\n            ?required=${this.required}\n            minlength=${ifDefined(this.minlength)}\n            maxlength=${ifDefined(this.maxlength)}\n            pattern=${ifDefined(this.pattern)}\n            autocomplete=${ifDefined(this.autocomplete)}\n            aria-label=${ifDefined(!hasLabel ? this.placeholder || undefined : undefined)}\n            @input=${this.handleInput}\n            @change=${this.handleChange}\n            @focus=${this.handleFocus}\n            @blur=${this.handleBlur}\n          />\n          <span part=\"suffix\" class=\"input__suffix\"><slot name=\"suffix\"></slot></span>\n        </div>\n        ${hasHelpText\n          ? html`<span part=\"help-text\" class=\"form-control__help-text\">\n              ${this.helpText || html`<slot name=\"help-text\"></slot>`}\n            </span>`\n          : nothing}\n      </div>\n    `;\n  }\n}\n"],
+  "mappings": "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",
+  "names": []
+}

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

@@ -0,0 +1,8 @@
+import { MzInput } from './input.component.js';
+export * from './input.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-input': MzInput;
+    }
+}
+//# sourceMappingURL=input.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"input.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,sBAAsB,CAAC;AAE/C,cAAc,sBAAsB,CAAC;AAIrC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,UAAU,EAAE,OAAO,CAAC;KACrB;CACF"}

package/dist/components/input/input.js

@@ -0,0 +1,4 @@
+import { MzInput } from "./input.component.js";
+export * from "./input.component.js";
+MzInput.define("mz-input");
+//# sourceMappingURL=input.js.map

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

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/input/input.ts"],
+  "sourcesContent": ["import { MzInput } from './input.component.js';\n\nexport * from './input.component.js';\n\nMzInput.define('mz-input');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-input': MzInput;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,eAAe;AAExB,cAAc;AAEd,QAAQ,OAAO,UAAU;",
+  "names": []
+}

package/dist/components/input/input.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;
+//# sourceMappingURL=input.styles.d.ts.map

package/dist/components/input/input.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"input.styles.d.ts","sourceRoot":"","sources":["../../../src/components/input/input.styles.ts"],"names":[],"mappings":";AAIA,wBAuHE"}

package/dist/components/input/input.styles.js

@@ -0,0 +1,127 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+import formControlStyles from "../../styles/form-control.styles.js";
+var input_styles_default = [
+  componentStyles,
+  formControlStyles,
+  css`
+    @layer base, sizes, states;
+
+    @layer base {
+      :host {
+        display: block;
+      }
+
+      .input__control-wrapper {
+        display: flex;
+        align-items: center;
+        border: var(--mz-border-width-sm) solid var(--mz-input-border-color);
+        border-radius: var(--_radius, var(--mz-input-border-radius));
+        background: var(--mz-input-bg, var(--mz-color-surface));
+        transition:
+          border-color var(--mz-transition-fast),
+          box-shadow var(--mz-transition-fast);
+        height: var(--_height);
+        cursor: text;
+      }
+
+      .input__control-wrapper:hover {
+        border-color: var(--mz-color-border-hover);
+      }
+
+      .input__control-wrapper:focus-within {
+        border-color: var(--mz-color-primary);
+        outline: var(--mz-focus-ring);
+        outline-offset: var(--mz-focus-ring-offset);
+      }
+
+      .input__control {
+        flex: 1;
+        min-width: 0;
+        border: none;
+        outline: none;
+        background: transparent;
+        color: var(--mz-color-text);
+        font-family: var(--mz-font-sans);
+        font-size: var(--_font-size);
+        line-height: var(--mz-line-height-normal);
+        padding: 0 var(--_padding-inline);
+        width: 100%;
+        height: 100%;
+      }
+
+      .input__control::placeholder {
+        color: var(--mz-color-text-disabled);
+      }
+
+      .input__prefix,
+      .input__suffix {
+        display: flex;
+        align-items: center;
+        flex-shrink: 0;
+        color: var(--mz-color-text-secondary);
+      }
+
+      .input__prefix {
+        padding-inline-start: var(--_padding-inline);
+      }
+
+      .input__suffix {
+        padding-inline-end: var(--_padding-inline);
+      }
+
+      .input__prefix:empty,
+      .input__suffix:empty {
+        display: none;
+      }
+    }
+
+    @layer sizes {
+      :host([size='sm']) {
+        --_height: var(--mz-input-height-sm);
+        --_font-size: var(--mz-input-font-size-sm);
+        --_padding-inline: var(--mz-space-sm);
+      }
+
+      :host([size='md']),
+      :host(:not([size])) {
+        --_height: var(--mz-input-height-md);
+        --_font-size: var(--mz-input-font-size-md);
+        --_padding-inline: var(--mz-space-md);
+      }
+
+      :host([size='lg']) {
+        --_height: var(--mz-input-height-lg);
+        --_font-size: var(--mz-input-font-size-lg);
+        --_padding-inline: var(--mz-space-md);
+      }
+    }
+
+    @layer states {
+      :host([disabled]) .input__control-wrapper {
+        opacity: 0.5;
+        cursor: not-allowed;
+      }
+
+      :host([disabled]) .input__control {
+        cursor: not-allowed;
+      }
+
+      :host([data-user-invalid]) .input__control-wrapper {
+        border-color: var(--mz-color-danger);
+      }
+
+      :host([data-user-invalid]) .input__control-wrapper:focus-within {
+        --mz-focus-ring-color: var(--mz-color-danger);
+      }
+
+      :host([pill]) {
+        --_radius: var(--mz-radius-pill);
+      }
+    }
+  `
+];
+export {
+  input_styles_default as default
+};
+//# sourceMappingURL=input.styles.js.map

package/dist/components/input/input.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/input/input.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\n\nexport default [\n  componentStyles,\n  formControlStyles,\n  css`\n    @layer base, sizes, states;\n\n    @layer base {\n      :host {\n        display: block;\n      }\n\n      .input__control-wrapper {\n        display: flex;\n        align-items: center;\n        border: var(--mz-border-width-sm) solid var(--mz-input-border-color);\n        border-radius: var(--_radius, var(--mz-input-border-radius));\n        background: var(--mz-input-bg, var(--mz-color-surface));\n        transition:\n          border-color var(--mz-transition-fast),\n          box-shadow var(--mz-transition-fast);\n        height: var(--_height);\n        cursor: text;\n      }\n\n      .input__control-wrapper:hover {\n        border-color: var(--mz-color-border-hover);\n      }\n\n      .input__control-wrapper:focus-within {\n        border-color: var(--mz-color-primary);\n        outline: var(--mz-focus-ring);\n        outline-offset: var(--mz-focus-ring-offset);\n      }\n\n      .input__control {\n        flex: 1;\n        min-width: 0;\n        border: none;\n        outline: none;\n        background: transparent;\n        color: var(--mz-color-text);\n        font-family: var(--mz-font-sans);\n        font-size: var(--_font-size);\n        line-height: var(--mz-line-height-normal);\n        padding: 0 var(--_padding-inline);\n        width: 100%;\n        height: 100%;\n      }\n\n      .input__control::placeholder {\n        color: var(--mz-color-text-disabled);\n      }\n\n      .input__prefix,\n      .input__suffix {\n        display: flex;\n        align-items: center;\n        flex-shrink: 0;\n        color: var(--mz-color-text-secondary);\n      }\n\n      .input__prefix {\n        padding-inline-start: var(--_padding-inline);\n      }\n\n      .input__suffix {\n        padding-inline-end: var(--_padding-inline);\n      }\n\n      .input__prefix:empty,\n      .input__suffix:empty {\n        display: none;\n      }\n    }\n\n    @layer sizes {\n      :host([size='sm']) {\n        --_height: var(--mz-input-height-sm);\n        --_font-size: var(--mz-input-font-size-sm);\n        --_padding-inline: var(--mz-space-sm);\n      }\n\n      :host([size='md']),\n      :host(:not([size])) {\n        --_height: var(--mz-input-height-md);\n        --_font-size: var(--mz-input-font-size-md);\n        --_padding-inline: var(--mz-space-md);\n      }\n\n      :host([size='lg']) {\n        --_height: var(--mz-input-height-lg);\n        --_font-size: var(--mz-input-font-size-lg);\n        --_padding-inline: var(--mz-space-md);\n      }\n    }\n\n    @layer states {\n      :host([disabled]) .input__control-wrapper {\n        opacity: 0.5;\n        cursor: not-allowed;\n      }\n\n      :host([disabled]) .input__control {\n        cursor: not-allowed;\n      }\n\n      :host([data-user-invalid]) .input__control-wrapper {\n        border-color: var(--mz-color-danger);\n      }\n\n      :host([data-user-invalid]) .input__control-wrapper:focus-within {\n        --mz-focus-ring-color: var(--mz-color-danger);\n      }\n\n      :host([pill]) {\n        --_radius: var(--mz-radius-pill);\n      }\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAC5B,OAAO,uBAAuB;AAE9B,IAAO,uBAAQ;AAAA,EACb;AAAA,EACA;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAoHF;",
+  "names": []
+}

package/dist/components/kbd/kbd.component.d.ts

@@ -0,0 +1,17 @@
+import { ManzanoElement } from '../../internal/manzano-element.js';
+/**
+ * @summary A keyboard shortcut indicator.
+ *
+ * @tag mz-kbd
+ *
+ * @slot - The keyboard shortcut text.
+ *
+ * @csspart base - The kbd element.
+ *
+ * @cssproperty --mz-kbd-font-size - Override the kbd font size.
+ */
+export declare class MzKbd extends ManzanoElement {
+    static styles: import("lit").CSSResult[];
+    render(): import("lit").TemplateResult<1>;
+}
+//# sourceMappingURL=kbd.component.d.ts.map

package/dist/components/kbd/kbd.component.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.component.d.ts","sourceRoot":"","sources":["../../../src/components/kbd/kbd.component.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AAGnE;;;;;;;;;;GAUG;AACH,qBAAa,KAAM,SAAQ,cAAc;IACvC,MAAM,CAAC,MAAM,4BAAU;IAEvB,MAAM;CAOP"}

package/dist/components/kbd/kbd.component.js

@@ -0,0 +1,17 @@
+import { html } from "lit";
+import { ManzanoElement } from "../../internal/manzano-element.js";
+import styles from "./kbd.styles.js";
+class MzKbd extends ManzanoElement {
+  render() {
+    return html`
+      <kbd part="base" class="kbd">
+        <slot></slot>
+      </kbd>
+    `;
+  }
+}
+MzKbd.styles = styles;
+export {
+  MzKbd
+};
+//# sourceMappingURL=kbd.component.js.map

package/dist/components/kbd/kbd.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/kbd/kbd.component.ts"],
+  "sourcesContent": ["import { html } from 'lit';\nimport { ManzanoElement } from '../../internal/manzano-element.js';\nimport styles from './kbd.styles.js';\n\n/**\n * @summary A keyboard shortcut indicator.\n *\n * @tag mz-kbd\n *\n * @slot - The keyboard shortcut text.\n *\n * @csspart base - The kbd element.\n *\n * @cssproperty --mz-kbd-font-size - Override the kbd font size.\n */\nexport class MzKbd extends ManzanoElement {\n  static styles = styles;\n\n  render() {\n    return html`\n      <kbd part=\"base\" class=\"kbd\">\n        <slot></slot>\n      </kbd>\n    `;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,YAAY;AACrB,SAAS,sBAAsB;AAC/B,OAAO,YAAY;AAaZ,MAAM,cAAc,eAAe;AAAA,EAGxC,SAAS;AACP,WAAO;AAAA;AAAA;AAAA;AAAA;AAAA,EAKT;AACF;AAVa,MACJ,SAAS;",
+  "names": []
+}

package/dist/components/kbd/kbd.d.ts

@@ -0,0 +1,8 @@
+import { MzKbd } from './kbd.component.js';
+export * from './kbd.component.js';
+declare global {
+    interface HTMLElementTagNameMap {
+        'mz-kbd': MzKbd;
+    }
+}
+//# sourceMappingURL=kbd.d.ts.map

package/dist/components/kbd/kbd.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.d.ts","sourceRoot":"","sources":["../../../src/components/kbd/kbd.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,oBAAoB,CAAC;AAE3C,cAAc,oBAAoB,CAAC;AAInC,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,QAAQ,EAAE,KAAK,CAAC;KACjB;CACF"}

package/dist/components/kbd/kbd.js

@@ -0,0 +1,4 @@
+import { MzKbd } from "./kbd.component.js";
+export * from "./kbd.component.js";
+MzKbd.define("mz-kbd");
+//# sourceMappingURL=kbd.js.map

package/dist/components/kbd/kbd.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/kbd/kbd.ts"],
+  "sourcesContent": ["import { MzKbd } from './kbd.component.js';\n\nexport * from './kbd.component.js';\n\nMzKbd.define('mz-kbd');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'mz-kbd': MzKbd;\n  }\n}\n"],
+  "mappings": "AAAA,SAAS,aAAa;AAEtB,cAAc;AAEd,MAAM,OAAO,QAAQ;",
+  "names": []
+}

package/dist/components/kbd/kbd.styles.d.ts

@@ -0,0 +1,3 @@
+declare const _default: import("lit").CSSResult[];
+export default _default;
+//# sourceMappingURL=kbd.styles.d.ts.map

package/dist/components/kbd/kbd.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"kbd.styles.d.ts","sourceRoot":"","sources":["../../../src/components/kbd/kbd.styles.ts"],"names":[],"mappings":";AAGA,wBAuBE"}

package/dist/components/kbd/kbd.styles.js

@@ -0,0 +1,30 @@
+import { css } from "lit";
+import componentStyles from "../../styles/component.styles.js";
+var kbd_styles_default = [
+  componentStyles,
+  css`
+    :host {
+      display: inline-block;
+    }
+
+    .kbd {
+      display: inline-flex;
+      align-items: center;
+      gap: var(--mz-space-3xs);
+      font-family: var(--mz-font-mono);
+      font-size: var(--mz-kbd-font-size, var(--mz-font-size-xs));
+      line-height: var(--mz-line-height-dense);
+      padding: var(--mz-space-3xs) var(--mz-space-2xs);
+      background: var(--mz-color-surface-raised);
+      border: var(--mz-border-width-sm) solid var(--mz-color-border);
+      border-radius: var(--mz-radius-sm);
+      box-shadow: 0 1px 0 0 var(--mz-color-border);
+      color: var(--mz-color-text);
+      white-space: nowrap;
+    }
+  `
+];
+export {
+  kbd_styles_default as default
+};
+//# sourceMappingURL=kbd.styles.js.map

package/dist/components/kbd/kbd.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/kbd/kbd.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\nimport componentStyles from '../../styles/component.styles.js';\n\nexport default [\n  componentStyles,\n  css`\n    :host {\n      display: inline-block;\n    }\n\n    .kbd {\n      display: inline-flex;\n      align-items: center;\n      gap: var(--mz-space-3xs);\n      font-family: var(--mz-font-mono);\n      font-size: var(--mz-kbd-font-size, var(--mz-font-size-xs));\n      line-height: var(--mz-line-height-dense);\n      padding: var(--mz-space-3xs) var(--mz-space-2xs);\n      background: var(--mz-color-surface-raised);\n      border: var(--mz-border-width-sm) solid var(--mz-color-border);\n      border-radius: var(--mz-radius-sm);\n      box-shadow: 0 1px 0 0 var(--mz-color-border);\n      color: var(--mz-color-text);\n      white-space: nowrap;\n    }\n  `\n];\n"],
+  "mappings": "AAAA,SAAS,WAAW;AACpB,OAAO,qBAAqB;AAE5B,IAAO,qBAAQ;AAAA,EACb;AAAA,EACA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAqBF;",
+  "names": []
+}