@hypoth-ui/wc 0.1.1

package/dist/chunk-JMPTFALJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/utils/dev-warnings.ts"],"sourcesContent":["/**\n * Development Mode Warnings\n *\n * Provides console warnings in development mode for common component misuse.\n * These warnings are stripped in production builds via dead code elimination.\n *\n * ## Warning Codes Reference\n *\n * | Code | Name | Description | Example Fix |\n * |------|------|-------------|-------------|\n * | DS001 | MISSING_REQUIRED_CHILD | A required child element is missing | Add `<ds-dialog-title>` to dialogs |\n * | DS002 | INVALID_PROP_COMBINATION | Two incompatible props used together | Don't use `disabled` with `loading` |\n * | DS003 | ACCESSIBILITY_VIOLATION | ARIA or accessibility issue detected | Add `aria-label` or wrap in `<ds-field>` |\n * | DS004 | DEPRECATED_USAGE | Using deprecated API | Use the suggested replacement |\n * | DS005 | MISSING_CONTEXT | Component needs parent context | Wrap input in `<ds-field>` |\n * | DS006 | INVALID_VALUE | Invalid value for a prop | Use valid variant: \"primary\" | \"secondary\" |\n *\n * ## Production Builds\n *\n * All warnings are automatically stripped in production builds via:\n * - Dead code elimination on `process.env.NODE_ENV !== 'production'` check\n * - Tree-shaking removes the warning utility if unused\n *\n * @packageDocumentation\n */\n\n// =============================================================================\n// Warning Codes\n// =============================================================================\n\n/**\n * Warning code identifiers\n *\n * - DS001: Required child element is missing (e.g., DialogTitle in Dialog)\n * - DS002: Invalid combination of props (e.g., disabled + loading together)\n * - DS003: Accessibility violation (e.g., missing label on form input)\n * - DS004: Deprecated usage (e.g., old prop name)\n * - DS005: Missing required context (e.g., Input not in Field)\n * - DS006: Invalid value for a prop (e.g., invalid variant name)\n */\nexport const WarningCodes = {\n  MISSING_REQUIRED_CHILD: \"DS001\",\n  INVALID_PROP_COMBINATION: \"DS002\",\n  ACCESSIBILITY_VIOLATION: \"DS003\",\n  DEPRECATED_USAGE: \"DS004\",\n  MISSING_CONTEXT: \"DS005\",\n  INVALID_VALUE: \"DS006\",\n} as const;\n\nexport type WarningCode = keyof typeof WarningCodes;\n\n// =============================================================================\n// Warning Types\n// =============================================================================\n\n/**\n * Dev warning configuration\n */\nexport interface DevWarning {\n  /** Warning code identifier */\n  code: WarningCode;\n  /** Component that emitted the warning */\n  component: string;\n  /** Warning message */\n  message: string;\n  /** Suggestion for fixing the issue */\n  suggestion?: string;\n  /** Additional context data */\n  context?: Record<string, unknown>;\n}\n\n// =============================================================================\n// Warning Emission\n// =============================================================================\n\n/**\n * Whether warnings are enabled (only in development)\n */\nconst isDev = typeof process !== \"undefined\" && process.env.NODE_ENV !== \"production\";\n\n/**\n * Set of already-emitted warnings (to avoid duplicate spam)\n */\nconst emittedWarnings = new Set<string>();\n\n/**\n * Emit a development-only warning.\n * Stripped in production builds via dead code elimination.\n *\n * @example\n * ```ts\n * devWarn({\n *   code: \"MISSING_REQUIRED_CHILD\",\n *   component: \"ds-dialog\",\n *   message: \"Missing required ds-dialog-title for accessibility.\",\n *   suggestion: \"Add a <ds-dialog-title> element inside the dialog.\",\n * });\n * ```\n */\nexport function devWarn(warning: DevWarning): void {\n  if (!isDev) return;\n\n  const prefix = `[${warning.component}]`;\n  const codeStr = WarningCodes[warning.code];\n  const key = `${warning.component}:${warning.code}:${warning.message}`;\n\n  // Avoid duplicate warnings\n  if (emittedWarnings.has(key)) return;\n  emittedWarnings.add(key);\n\n  const suggestionText = warning.suggestion ? `\\n💡 ${warning.suggestion}` : \"\";\n  const fullMessage = `${prefix} ${warning.message} (${codeStr})${suggestionText}`;\n\n  console.warn(fullMessage);\n\n  if (warning.context) {\n    console.warn(\"Context:\", warning.context);\n  }\n}\n\n/**\n * Emit a warning only once per session (by key)\n */\nexport function devWarnOnce(key: string, warning: DevWarning): void {\n  if (emittedWarnings.has(key)) return;\n  emittedWarnings.add(key);\n  devWarn(warning);\n}\n\n/**\n * Clear all emitted warnings (useful for testing)\n */\nexport function clearWarnings(): void {\n  emittedWarnings.clear();\n}\n\n// =============================================================================\n// Pre-defined Warnings\n// =============================================================================\n\n/**\n * Pre-defined warnings for common misuse patterns\n */\nexport const Warnings = {\n  /**\n   * Dialog missing title element\n   */\n  dialogMissingTitle: (component: string): DevWarning => ({\n    code: \"MISSING_REQUIRED_CHILD\",\n    component,\n    message: \"Missing required ds-dialog-title for accessibility.\",\n    suggestion:\n      \"Add a <ds-dialog-title> element inside the dialog, or use aria-label on the dialog.\",\n  }),\n\n  /**\n   * Dialog missing description when using title\n   */\n  dialogMissingDescription: (component: string): DevWarning => ({\n    code: \"ACCESSIBILITY_VIOLATION\",\n    component,\n    message: \"Dialog has title but no description for screen readers.\",\n    suggestion:\n      \"Add a <ds-dialog-description> element, or use aria-describedby to reference existing content.\",\n  }),\n\n  /**\n   * Input missing accessible label\n   */\n  inputMissingLabel: (component: string): DevWarning => ({\n    code: \"ACCESSIBILITY_VIOLATION\",\n    component,\n    message: \"Input is missing an accessible label.\",\n    suggestion:\n      \"Add aria-label, aria-labelledby, or wrap in a <ds-field> with <ds-label>.\",\n  }),\n\n  /**\n   * Invalid variant value\n   */\n  invalidVariant: (\n    component: string,\n    variant: string,\n    validVariants: string[]\n  ): DevWarning => ({\n    code: \"INVALID_VALUE\",\n    component,\n    message: `Invalid variant \"${variant}\".`,\n    suggestion: `Use one of: ${validVariants.join(\", \")}.`,\n    context: { received: variant, valid: validVariants },\n  }),\n\n  /**\n   * Invalid size value\n   */\n  invalidSize: (\n    component: string,\n    size: string,\n    validSizes: string[]\n  ): DevWarning => ({\n    code: \"INVALID_VALUE\",\n    component,\n    message: `Invalid size \"${size}\".`,\n    suggestion: `Use one of: ${validSizes.join(\", \")}.`,\n    context: { received: size, valid: validSizes },\n  }),\n\n  /**\n   * Missing form field context\n   */\n  missingFieldContext: (component: string): DevWarning => ({\n    code: \"MISSING_CONTEXT\",\n    component,\n    message: \"Form input is not wrapped in a <ds-field> context.\",\n    suggestion:\n      \"Wrap your input in <ds-field> to enable automatic label association and error display.\",\n  }),\n\n  /**\n   * Missing form context\n   */\n  missingFormContext: (component: string): DevWarning => ({\n    code: \"MISSING_CONTEXT\",\n    component,\n    message: \"Form control is not inside a <ds-form> context.\",\n    suggestion:\n      \"Wrap your form controls in <ds-form> to enable form-level validation and submission.\",\n  }),\n\n  /**\n   * Deprecated prop usage\n   */\n  deprecatedProp: (\n    component: string,\n    oldProp: string,\n    newProp: string\n  ): DevWarning => ({\n    code: \"DEPRECATED_USAGE\",\n    component,\n    message: `Prop \"${oldProp}\" is deprecated.`,\n    suggestion: `Use \"${newProp}\" instead.`,\n    context: { deprecated: oldProp, replacement: newProp },\n  }),\n\n  /**\n   * Conflicting props\n   */\n  conflictingProps: (\n    component: string,\n    prop1: string,\n    prop2: string\n  ): DevWarning => ({\n    code: \"INVALID_PROP_COMBINATION\",\n    component,\n    message: `Props \"${prop1}\" and \"${prop2}\" should not be used together.`,\n    suggestion: \"Choose one or the other based on your use case.\",\n    context: { conflicting: [prop1, prop2] },\n  }),\n\n  /**\n   * Required children missing\n   */\n  missingRequiredChild: (\n    component: string,\n    childType: string\n  ): DevWarning => ({\n    code: \"MISSING_REQUIRED_CHILD\",\n    component,\n    message: `Missing required child element <${childType}>.`,\n    suggestion: `Add a <${childType}> element as a child of <${component}>.`,\n  }),\n\n  /**\n   * Invalid ARIA reference\n   */\n  invalidAriaReference: (\n    component: string,\n    attribute: string,\n    targetId: string\n  ): DevWarning => ({\n    code: \"ACCESSIBILITY_VIOLATION\",\n    component,\n    message: `${attribute} references \"${targetId}\" which does not exist in the document.`,\n    suggestion: `Ensure an element with id=\"${targetId}\" exists, or remove the ${attribute} attribute.`,\n    context: { attribute, targetId },\n  }),\n\n  /**\n   * Interactive element inside interactive element\n   */\n  nestedInteractive: (\n    component: string,\n    childType: string\n  ): DevWarning => ({\n    code: \"ACCESSIBILITY_VIOLATION\",\n    component,\n    message: `Interactive element <${childType}> is nested inside another interactive element.`,\n    suggestion:\n      \"Avoid nesting interactive elements. Screen readers may not announce them correctly.\",\n    context: { nestedElement: childType },\n  }),\n};\n\n// =============================================================================\n// Validation Helpers\n// =============================================================================\n\n/**\n * Validate a prop value against a list of valid values\n */\nexport function validateProp<T extends string>(\n  component: string,\n  propName: string,\n  value: T | undefined,\n  validValues: readonly T[]\n): boolean {\n  if (value !== undefined && !validValues.includes(value)) {\n    if (propName === \"variant\") {\n      devWarn(Warnings.invalidVariant(component, value, [...validValues]));\n    } else if (propName === \"size\") {\n      devWarn(Warnings.invalidSize(component, value, [...validValues]));\n    } else {\n      devWarn({\n        code: \"INVALID_VALUE\",\n        component,\n        message: `Invalid ${propName} \"${value}\".`,\n        suggestion: `Use one of: ${validValues.join(\", \")}.`,\n      });\n    }\n    return false;\n  }\n  return true;\n}\n\n/**\n * Check if an element has an accessible label\n */\nexport function hasAccessibleLabel(element: HTMLElement): boolean {\n  return !!(\n    element.getAttribute(\"aria-label\") ||\n    element.getAttribute(\"aria-labelledby\") ||\n    element.getAttribute(\"title\") ||\n    (element as HTMLInputElement).labels?.length\n  );\n}\n\n/**\n * Check if a required child element exists\n */\nexport function hasRequiredChild(\n  parent: HTMLElement,\n  selector: string\n): boolean {\n  return parent.querySelector(selector) !== null;\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-MYQWCLUJ.js

@@ -0,0 +1,45 @@
+import {
+  DSElement,
+  __decorateClass,
+  define
+} from "./chunk-H4GJJZ3N.js";
+
+// src/components/spinner/spinner.ts
+import { html } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DsSpinner = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.size = "md";
+    this.label = "Loading";
+  }
+  static {
+    this.styles = [];
+  }
+  render() {
+    const classes = {
+      "ds-spinner": true,
+      [`ds-spinner--${this.size}`]: true
+    };
+    return html`
+      <span
+        class=${classMap(classes)}
+        role="status"
+        aria-label=${this.label}
+      ></span>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsSpinner.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], DsSpinner.prototype, "label", 2);
+define("ds-spinner", DsSpinner);
+
+export {
+  DsSpinner
+};
+//# sourceMappingURL=chunk-MYQWCLUJ.js.map

package/dist/chunk-MYQWCLUJ.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/spinner/spinner.ts"],"sourcesContent":["import { type TemplateResult, html } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { DSElement } from \"../../base/ds-element.js\";\nimport { define } from \"../../registry/define.js\";\n\nexport type SpinnerSize = \"sm\" | \"md\" | \"lg\";\n\n/**\n * A loading spinner component with accessibility support.\n *\n * Automatically respects prefers-reduced-motion by replacing\n * rotation with an opacity pulse animation.\n *\n * @element ds-spinner\n *\n * @example\n * ```html\n * <ds-spinner label=\"Loading content\"></ds-spinner>\n * ```\n *\n * @example\n * ```html\n * <!-- In a loading region -->\n * <div aria-busy=\"true\">\n *   <ds-spinner label=\"Fetching data\"></ds-spinner>\n * </div>\n * ```\n */\nexport class DsSpinner extends DSElement {\n  static override styles = [];\n\n  /**\n   * The spinner size.\n   */\n  @property({ type: String, reflect: true })\n  size: SpinnerSize = \"md\";\n\n  /**\n   * Accessible label for the spinner.\n   * Announced by screen readers to indicate loading state.\n   */\n  @property({ type: String })\n  label = \"Loading\";\n\n  override render(): TemplateResult {\n    const classes = {\n      \"ds-spinner\": true,\n      [`ds-spinner--${this.size}`]: true,\n    };\n\n    return html`\n      <span\n        class=${classMap(classes)}\n        role=\"status\"\n        aria-label=${this.label}\n      ></span>\n    `;\n  }\n}\n\n// Register the component\ndefine(\"ds-spinner\", DsSpinner);\n\n// TypeScript declaration for HTML\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ds-spinner\": DsSpinner;\n  }\n}\n"],"mappings":";;;;;;;AAAA,SAA8B,YAAY;AAC1C,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AA2BlB,IAAM,YAAN,cAAwB,UAAU;AAAA,EAAlC;AAAA;AAOL,gBAAoB;AAOpB,iBAAQ;AAAA;AAAA,EAbR;AAAA,SAAgB,SAAS,CAAC;AAAA;AAAA,EAejB,SAAyB;AAChC,UAAM,UAAU;AAAA,MACd,cAAc;AAAA,MACd,CAAC,eAAe,KAAK,IAAI,EAAE,GAAG;AAAA,IAChC;AAEA,WAAO;AAAA;AAAA,gBAEK,SAAS,OAAO,CAAC;AAAA;AAAA,qBAEZ,KAAK,KAAK;AAAA;AAAA;AAAA,EAG7B;AACF;AAvBE;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAN9B,UAOX;AAOA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAbf,UAcX;AAmBF,OAAO,cAAc,SAAS;","names":[]}

package/dist/chunk-QZSPWT7L.js

@@ -0,0 +1,183 @@
+import {
+  Warnings,
+  devWarn,
+  hasAccessibleLabel
+} from "./chunk-JMPTFALJ.js";
+import {
+  StandardEvents,
+  emitEvent
+} from "./chunk-YDQ434UH.js";
+import {
+  DSElement,
+  __decorateClass,
+  define
+} from "./chunk-H4GJJZ3N.js";
+
+// src/components/input/input.ts
+import { html } from "lit";
+import { property, state } from "lit/decorators.js";
+import { ifDefined } from "lit/directives/if-defined.js";
+var DsInput = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.type = "text";
+    this.size = "md";
+    this.name = "";
+    this.value = "";
+    this.placeholder = "";
+    this.disabled = false;
+    this.readonly = false;
+    this.required = false;
+    this.error = false;
+    this.attributeObserver = null;
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.attributeObserver = new MutationObserver((mutations) => {
+      for (const mutation of mutations) {
+        if (mutation.type === "attributes") {
+          this.syncAriaAttributes();
+        }
+      }
+    });
+    this.attributeObserver.observe(this, {
+      attributes: true,
+      attributeFilter: [
+        "aria-labelledby",
+        "aria-describedby",
+        "aria-invalid",
+        "aria-required",
+        "aria-disabled"
+      ]
+    });
+    this.syncAriaAttributes();
+    requestAnimationFrame(() => {
+      if (!hasAccessibleLabel(this)) {
+        const field = this.closest("ds-field");
+        const hasFieldLabel = field?.querySelector("ds-label") !== null;
+        if (!hasFieldLabel) {
+          devWarn(Warnings.inputMissingLabel("ds-input"));
+        }
+      }
+    });
+  }
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.attributeObserver?.disconnect();
+    this.attributeObserver = null;
+  }
+  /**
+   * Syncs ARIA attributes from the host element to internal state.
+   * The render method will apply these to the native input.
+   */
+  syncAriaAttributes() {
+    this.ariaLabelledBy = this.getAttribute("aria-labelledby") ?? void 0;
+    this.ariaDescribedBy = this.getAttribute("aria-describedby") ?? void 0;
+    const ariaInvalid = this.getAttribute("aria-invalid");
+    if (ariaInvalid === "true") {
+      this.error = true;
+    } else if (ariaInvalid === "false") {
+      this.error = false;
+    }
+    const ariaRequired = this.getAttribute("aria-required");
+    if (ariaRequired === "true") {
+      this.required = true;
+    }
+    const ariaDisabled = this.getAttribute("aria-disabled");
+    if (ariaDisabled === "true") {
+      this.disabled = true;
+    }
+  }
+  handleInput(event) {
+    const input = event.target;
+    this.value = input.value;
+    this.dispatchEvent(
+      new CustomEvent("input", {
+        detail: { value: this.value },
+        bubbles: true,
+        composed: true
+      })
+    );
+  }
+  handleChange(event) {
+    const input = event.target;
+    this.value = input.value;
+    emitEvent(this, StandardEvents.CHANGE, {
+      detail: { value: this.value }
+    });
+  }
+  render() {
+    return html`
+      <div class="ds-input" part="container" data-size=${this.size}>
+        <input
+          part="input"
+          class="ds-input__field"
+          type=${this.type}
+          name=${this.name}
+          .value=${this.value}
+          placeholder=${this.placeholder}
+          ?disabled=${this.disabled}
+          ?readonly=${this.readonly}
+          ?required=${this.required}
+          aria-invalid=${this.error ? "true" : "false"}
+          aria-labelledby=${ifDefined(this.ariaLabelledBy)}
+          aria-describedby=${ifDefined(this.ariaDescribedBy)}
+          aria-required=${this.required ? "true" : "false"}
+          minlength=${this.minlength ?? ""}
+          maxlength=${this.maxlength ?? ""}
+          pattern=${this.pattern ?? ""}
+          @input=${this.handleInput}
+          @change=${this.handleChange}
+        />
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsInput.prototype, "type", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsInput.prototype, "size", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsInput.prototype, "name", 2);
+__decorateClass([
+  property({ type: String })
+], DsInput.prototype, "value", 2);
+__decorateClass([
+  property({ type: String })
+], DsInput.prototype, "placeholder", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DsInput.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DsInput.prototype, "readonly", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DsInput.prototype, "required", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DsInput.prototype, "error", 2);
+__decorateClass([
+  property({ type: Number })
+], DsInput.prototype, "minlength", 2);
+__decorateClass([
+  property({ type: Number })
+], DsInput.prototype, "maxlength", 2);
+__decorateClass([
+  property({ type: String })
+], DsInput.prototype, "pattern", 2);
+__decorateClass([
+  state()
+], DsInput.prototype, "ariaLabelledBy", 2);
+__decorateClass([
+  state()
+], DsInput.prototype, "ariaDescribedBy", 2);
+define("ds-input", DsInput);
+
+export {
+  DsInput
+};
+//# sourceMappingURL=chunk-QZSPWT7L.js.map

package/dist/chunk-QZSPWT7L.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/input/input.ts"],"sourcesContent":["import { html } from \"lit\";\nimport { property, state } from \"lit/decorators.js\";\nimport { ifDefined } from \"lit/directives/if-defined.js\";\nimport { DSElement } from \"../../base/ds-element.js\";\nimport { StandardEvents, emitEvent } from \"../../events/emit.js\";\nimport { define } from \"../../registry/define.js\";\nimport { devWarn, hasAccessibleLabel, Warnings } from \"../../utils/dev-warnings.js\";\n\nexport type InputType = \"text\" | \"email\" | \"password\" | \"number\" | \"tel\" | \"url\" | \"search\";\nexport type InputSize = \"sm\" | \"md\" | \"lg\";\n\n/**\n * A text input field component.\n *\n * @element ds-input\n * @fires input - Fired when the input value changes\n * @fires change - Fired when the input value is committed\n *\n * @example\n * ```html\n * <ds-field>\n *   <ds-label>Email</ds-label>\n *   <ds-input type=\"email\" name=\"email\"></ds-input>\n * </ds-field>\n * ```\n */\nexport class DsInput extends DSElement {\n  /** Input type */\n  @property({ type: String, reflect: true })\n  type: InputType = \"text\";\n\n  /** Input size */\n  @property({ type: String, reflect: true })\n  size: InputSize = \"md\";\n\n  /** Input name */\n  @property({ type: String, reflect: true })\n  name = \"\";\n\n  /** Input value */\n  @property({ type: String })\n  value = \"\";\n\n  /** Placeholder text */\n  @property({ type: String })\n  placeholder = \"\";\n\n  /** Disabled state */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /** Read-only state */\n  @property({ type: Boolean, reflect: true })\n  readonly = false;\n\n  /** Required state */\n  @property({ type: Boolean, reflect: true })\n  required = false;\n\n  /** Error state */\n  @property({ type: Boolean, reflect: true })\n  error = false;\n\n  /** Minimum length */\n  @property({ type: Number })\n  minlength?: number;\n\n  /** Maximum length */\n  @property({ type: Number })\n  maxlength?: number;\n\n  /** Pattern for validation */\n  @property({ type: String })\n  pattern?: string;\n\n  /** ARIA labelledby - ID of element that labels this input */\n  @state()\n  private ariaLabelledBy?: string;\n\n  /** ARIA describedby - IDs of elements that describe this input */\n  @state()\n  private ariaDescribedBy?: string;\n\n  private attributeObserver: MutationObserver | null = null;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n\n    // Observe ARIA attribute changes on the host element\n    this.attributeObserver = new MutationObserver((mutations) => {\n      for (const mutation of mutations) {\n        if (mutation.type === \"attributes\") {\n          this.syncAriaAttributes();\n        }\n      }\n    });\n\n    this.attributeObserver.observe(this, {\n      attributes: true,\n      attributeFilter: [\n        \"aria-labelledby\",\n        \"aria-describedby\",\n        \"aria-invalid\",\n        \"aria-required\",\n        \"aria-disabled\",\n      ],\n    });\n\n    // Initial sync\n    this.syncAriaAttributes();\n\n    // Dev warning: Check for accessible label after DOM is ready\n    requestAnimationFrame(() => {\n      if (!hasAccessibleLabel(this)) {\n        // Also check if inside a ds-field with a label\n        const field = this.closest(\"ds-field\");\n        const hasFieldLabel = field?.querySelector(\"ds-label\") !== null;\n        if (!hasFieldLabel) {\n          devWarn(Warnings.inputMissingLabel(\"ds-input\"));\n        }\n      }\n    });\n  }\n\n  override disconnectedCallback(): void {\n    super.disconnectedCallback();\n    this.attributeObserver?.disconnect();\n    this.attributeObserver = null;\n  }\n\n  /**\n   * Syncs ARIA attributes from the host element to internal state.\n   * The render method will apply these to the native input.\n   */\n  private syncAriaAttributes(): void {\n    this.ariaLabelledBy = this.getAttribute(\"aria-labelledby\") ?? undefined;\n    this.ariaDescribedBy = this.getAttribute(\"aria-describedby\") ?? undefined;\n\n    // Sync error state from aria-invalid\n    const ariaInvalid = this.getAttribute(\"aria-invalid\");\n    if (ariaInvalid === \"true\") {\n      this.error = true;\n    } else if (ariaInvalid === \"false\") {\n      this.error = false;\n    }\n\n    // Sync required state from aria-required\n    const ariaRequired = this.getAttribute(\"aria-required\");\n    if (ariaRequired === \"true\") {\n      this.required = true;\n    }\n\n    // Sync disabled state from aria-disabled\n    const ariaDisabled = this.getAttribute(\"aria-disabled\");\n    if (ariaDisabled === \"true\") {\n      this.disabled = true;\n    }\n  }\n\n  private handleInput(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    // Also emit native input event for compatibility\n    this.dispatchEvent(\n      new CustomEvent(\"input\", {\n        detail: { value: this.value },\n        bubbles: true,\n        composed: true,\n      })\n    );\n  }\n\n  private handleChange(event: Event) {\n    const input = event.target as HTMLInputElement;\n    this.value = input.value;\n    // Emit ds:change event using standard convention\n    emitEvent(this, StandardEvents.CHANGE, {\n      detail: { value: this.value },\n    });\n  }\n\n  override render() {\n    return html`\n      <div class=\"ds-input\" part=\"container\" data-size=${this.size}>\n        <input\n          part=\"input\"\n          class=\"ds-input__field\"\n          type=${this.type}\n          name=${this.name}\n          .value=${this.value}\n          placeholder=${this.placeholder}\n          ?disabled=${this.disabled}\n          ?readonly=${this.readonly}\n          ?required=${this.required}\n          aria-invalid=${this.error ? \"true\" : \"false\"}\n          aria-labelledby=${ifDefined(this.ariaLabelledBy)}\n          aria-describedby=${ifDefined(this.ariaDescribedBy)}\n          aria-required=${this.required ? \"true\" : \"false\"}\n          minlength=${this.minlength ?? \"\"}\n          maxlength=${this.maxlength ?? \"\"}\n          pattern=${this.pattern ?? \"\"}\n          @input=${this.handleInput}\n          @change=${this.handleChange}\n        />\n      </div>\n    `;\n  }\n}\n\ndefine(\"ds-input\", DsInput);\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ds-input\": DsInput;\n  }\n}\n"],"mappings":"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","names":[]}