@hypoth-ui/wc 0.1.1

package/dist/chunk-TXIIUVL3.js

@@ -0,0 +1,130 @@
+import {
+  validateProp
+} from "./chunk-JMPTFALJ.js";
+import {
+  StandardEvents,
+  emitEvent
+} from "./chunk-YDQ434UH.js";
+import {
+  DSElement,
+  __decorateClass,
+  define
+} from "./chunk-H4GJJZ3N.js";
+
+// src/components/button/button.ts
+import { createButtonBehavior } from "@hypoth-ui/primitives-dom";
+import { html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var VALID_VARIANTS = ["primary", "secondary", "ghost", "destructive"];
+var VALID_SIZES = ["sm", "md", "lg"];
+var DsButton = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "primary";
+    this.size = "md";
+    this.disabled = false;
+    this.loading = false;
+    this.type = "button";
+  }
+  static {
+    this.styles = [];
+  }
+  connectedCallback() {
+    super.connectedCallback();
+    this.behavior = createButtonBehavior({
+      disabled: this.disabled,
+      loading: this.loading,
+      type: this.type
+    });
+    validateProp("ds-button", "variant", this.variant, VALID_VARIANTS);
+    validateProp("ds-button", "size", this.size, VALID_SIZES);
+  }
+  updated(changedProperties) {
+    super.updated(changedProperties);
+    if (changedProperties.has("disabled") || changedProperties.has("loading") || changedProperties.has("type")) {
+      this.behavior.setState({
+        disabled: this.disabled,
+        loading: this.loading,
+        type: this.type
+      });
+    }
+  }
+  handleClick(event) {
+    if (this.disabled || this.loading) {
+      event.preventDefault();
+      event.stopPropagation();
+      return;
+    }
+    emitEvent(this, StandardEvents.PRESS, {
+      detail: {
+        originalEvent: event,
+        target: this,
+        isKeyboard: false
+      }
+    });
+  }
+  handleKeyDown(event) {
+    if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      if (!this.disabled && !this.loading) {
+        emitEvent(this, StandardEvents.PRESS, {
+          detail: {
+            originalEvent: event,
+            target: this,
+            isKeyboard: true
+          }
+        });
+      }
+    }
+  }
+  render() {
+    const classes = {
+      "ds-button": true,
+      [`ds-button--${this.variant}`]: true,
+      [`ds-button--${this.size}`]: true,
+      "ds-button--disabled": this.disabled,
+      "ds-button--loading": this.loading
+    };
+    const isDisabled = this.disabled || this.loading;
+    return html`
+      <button
+        part="button"
+        class=${classMap(classes)}
+        type=${this.type}
+        ?disabled=${this.disabled}
+        aria-disabled=${isDisabled ? "true" : nothing}
+        aria-busy=${this.loading ? "true" : nothing}
+        tabindex=${isDisabled ? -1 : 0}
+        @click=${this.handleClick}
+        @keydown=${this.handleKeyDown}
+      >
+        ${this.loading ? html`<span class="ds-button__spinner" aria-hidden="true"></span>` : null}
+        <span class="ds-button__content">
+          <slot></slot>
+        </span>
+      </button>
+    `;
+  }
+};
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsButton.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsButton.prototype, "size", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DsButton.prototype, "disabled", 2);
+__decorateClass([
+  property({ type: Boolean, reflect: true })
+], DsButton.prototype, "loading", 2);
+__decorateClass([
+  property({ type: String })
+], DsButton.prototype, "type", 2);
+define("ds-button", DsButton);
+
+export {
+  DsButton
+};
+//# sourceMappingURL=chunk-TXIIUVL3.js.map

package/dist/chunk-TXIIUVL3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/button/button.ts"],"sourcesContent":["import { type ButtonBehavior, createButtonBehavior } from \"@hypoth-ui/primitives-dom\";\nimport { type TemplateResult, html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { DSElement } from \"../../base/ds-element.js\";\nimport { StandardEvents, emitEvent } from \"../../events/emit.js\";\nimport { define } from \"../../registry/define.js\";\nimport { validateProp } from \"../../utils/dev-warnings.js\";\n\nexport type ButtonVariant = \"primary\" | \"secondary\" | \"ghost\" | \"destructive\";\nexport type ButtonSize = \"sm\" | \"md\" | \"lg\";\n\nconst VALID_VARIANTS: readonly ButtonVariant[] = [\"primary\", \"secondary\", \"ghost\", \"destructive\"];\nconst VALID_SIZES: readonly ButtonSize[] = [\"sm\", \"md\", \"lg\"];\n\n/**\n * A button component following WAI-ARIA button pattern.\n *\n * @element ds-button\n * @slot - Default slot for button content\n *\n * @csspart button - The button element\n *\n * @fires ds:press - When the button is activated (click, Enter, Space)\n */\nexport class DsButton extends DSElement {\n  static override styles = [];\n\n  /**\n   * The button variant.\n   */\n  @property({ type: String, reflect: true })\n  variant: ButtonVariant = \"primary\";\n\n  /**\n   * The button size.\n   */\n  @property({ type: String, reflect: true })\n  size: ButtonSize = \"md\";\n\n  /**\n   * Whether the button is disabled.\n   */\n  @property({ type: Boolean, reflect: true })\n  disabled = false;\n\n  /**\n   * Whether the button is in a loading state.\n   */\n  @property({ type: Boolean, reflect: true })\n  loading = false;\n\n  /**\n   * Button type attribute.\n   */\n  @property({ type: String })\n  type: \"button\" | \"submit\" | \"reset\" = \"button\";\n\n  /** Button behavior instance */\n  private behavior!: ButtonBehavior;\n\n  override connectedCallback(): void {\n    super.connectedCallback();\n    // Create behavior with current property values\n    this.behavior = createButtonBehavior({\n      disabled: this.disabled,\n      loading: this.loading,\n      type: this.type,\n    });\n\n    // Dev warnings: Validate variant and size\n    validateProp(\"ds-button\", \"variant\", this.variant, VALID_VARIANTS);\n    validateProp(\"ds-button\", \"size\", this.size, VALID_SIZES);\n  }\n\n  override updated(changedProperties: Map<string, unknown>): void {\n    super.updated(changedProperties);\n    // Sync behavior state with component properties\n    if (\n      changedProperties.has(\"disabled\") ||\n      changedProperties.has(\"loading\") ||\n      changedProperties.has(\"type\")\n    ) {\n      this.behavior.setState({\n        disabled: this.disabled,\n        loading: this.loading,\n        type: this.type,\n      });\n    }\n  }\n\n  private handleClick(event: MouseEvent): void {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n\n    // Dispatch ds:press event per standard event naming convention\n    emitEvent(this, StandardEvents.PRESS, {\n      detail: {\n        originalEvent: event,\n        target: this,\n        isKeyboard: false,\n      },\n    });\n  }\n\n  private handleKeyDown(event: KeyboardEvent): void {\n    // For WC compatibility, handle both Enter and Space on keydown\n    // The behavior only handles Enter on keydown (Space is typically keyup)\n    if (event.key === \"Enter\" || event.key === \" \") {\n      event.preventDefault();\n      if (!this.disabled && !this.loading) {\n        // Dispatch ds:press event with keyboard flag\n        // Note: We do NOT call this.click() to avoid double event emission\n        emitEvent(this, StandardEvents.PRESS, {\n          detail: {\n            originalEvent: event,\n            target: this,\n            isKeyboard: true,\n          },\n        });\n      }\n    }\n  }\n\n  override render(): TemplateResult {\n    const classes = {\n      \"ds-button\": true,\n      [`ds-button--${this.variant}`]: true,\n      [`ds-button--${this.size}`]: true,\n      \"ds-button--disabled\": this.disabled,\n      \"ds-button--loading\": this.loading,\n    };\n\n    // Compute ARIA props based on current component state\n    const isDisabled = this.disabled || this.loading;\n\n    return html`\n      <button\n        part=\"button\"\n        class=${classMap(classes)}\n        type=${this.type}\n        ?disabled=${this.disabled}\n        aria-disabled=${isDisabled ? \"true\" : nothing}\n        aria-busy=${this.loading ? \"true\" : nothing}\n        tabindex=${isDisabled ? -1 : 0}\n        @click=${this.handleClick}\n        @keydown=${this.handleKeyDown}\n      >\n        ${this.loading ? html`<span class=\"ds-button__spinner\" aria-hidden=\"true\"></span>` : null}\n        <span class=\"ds-button__content\">\n          <slot></slot>\n        </span>\n      </button>\n    `;\n  }\n}\n\n// Register the component\ndefine(\"ds-button\", DsButton);\n\n// TypeScript declaration for HTML\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ds-button\": DsButton;\n  }\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-UM7WRO7W.js

@@ -0,0 +1,237 @@
+import {
+  __decorateClass
+} from "./chunk-H4GJJZ3N.js";
+
+// src/base/form-associated.ts
+import { property } from "lit/decorators.js";
+function FormAssociatedMixin(Base) {
+  class FormAssociatedClass extends Base {
+    // biome-ignore lint/suspicious/noExplicitAny: Mixin pattern requires any[] for constructor args
+    constructor(...args) {
+      super(...args);
+      /**
+       * Default value for form reset.
+       */
+      this._defaultValue = null;
+      this.name = "";
+      this.value = "";
+      this.disabled = false;
+      this.required = false;
+      this.customValidation = false;
+      /**
+       * Custom error message set via setCustomValidity().
+       */
+      this._customValidityMessage = "";
+      this._internals = this.attachInternals();
+    }
+    static {
+      /**
+       * Required static property for form association.
+       * Signals to the browser that this element participates in forms.
+       */
+      this.formAssociated = true;
+    }
+    connectedCallback() {
+      super.connectedCallback();
+      this._defaultValue = this.value;
+    }
+    /**
+     * Current validity state of the control.
+     */
+    get validity() {
+      return this._internals.validity;
+    }
+    /**
+     * Localized message describing the validation error.
+     */
+    get validationMessage() {
+      return this._internals.validationMessage;
+    }
+    /**
+     * Whether the control will be validated when the form is submitted.
+     */
+    get willValidate() {
+      return this._internals.willValidate;
+    }
+    /**
+     * The form element that this control is associated with.
+     */
+    get form() {
+      return this._internals.form;
+    }
+    /**
+     * Check if the control satisfies its constraints.
+     * Does not show any UI feedback.
+     */
+    checkValidity() {
+      return this._internals.checkValidity();
+    }
+    /**
+     * Check validity and show validation UI if invalid.
+     * When customValidation is true, emits ds:invalid event instead of native UI.
+     */
+    reportValidity() {
+      if (this.customValidation) {
+        const valid = this._internals.checkValidity();
+        if (!valid) {
+          this.dispatchEvent(
+            new CustomEvent("ds:invalid", {
+              detail: { message: this._internals.validationMessage },
+              bubbles: true,
+              composed: true
+            })
+          );
+        }
+        return valid;
+      }
+      return this._internals.reportValidity();
+    }
+    /**
+     * Set a custom validation message.
+     * Empty string clears custom validity.
+     */
+    setCustomValidity(message) {
+      this._customValidityMessage = message;
+      if (message) {
+        this._internals.setValidity({ customError: true }, message, this.getValidationAnchor());
+      } else {
+        this.updateValidity();
+      }
+    }
+    /**
+     * Called when the element is associated with a form.
+     */
+    formAssociatedCallback(form) {
+      void form;
+    }
+    /**
+     * Called when the element or ancestor fieldset is disabled/enabled.
+     */
+    formDisabledCallback(disabled) {
+      this.disabled = disabled;
+    }
+    /**
+     * Called when the form is reset.
+     * Subclasses should override to restore their specific default state.
+     */
+    formResetCallback() {
+      this.value = this._defaultValue ?? "";
+      this._customValidityMessage = "";
+      this._internals.setFormValue(null);
+      this._internals.setValidity({});
+      this.onFormReset();
+    }
+    /**
+     * Called during form state restoration (navigation, autofill).
+     */
+    formStateRestoreCallback(state, mode) {
+      if (typeof state === "string") {
+        this.value = state;
+      }
+      this.onFormStateRestore(state, mode);
+    }
+    /**
+     * Override in subclass to return the anchor element for validation messages.
+     * This is typically the interactive element within the component.
+     */
+    getValidationAnchor() {
+      return void 0;
+    }
+    /**
+     * Override in subclass to return validation flags.
+     * Called by updateValidity() to determine validity state.
+     */
+    getValidationFlags() {
+      return {};
+    }
+    /**
+     * Override in subclass to return validation message for current flags.
+     */
+    getValidationMessage(_flags) {
+      return "";
+    }
+    /**
+     * Hook for subclasses to handle form reset.
+     */
+    onFormReset() {
+    }
+    /**
+     * Hook for subclasses to handle form state restore.
+     */
+    onFormStateRestore(_state, _mode) {
+    }
+    /**
+     * Updates the form value. Call this when the component's value changes.
+     */
+    updateFormValue() {
+      const value = this.getFormValue();
+      this._internals.setFormValue(value);
+    }
+    /**
+     * Updates the validity state. Call this when validation-relevant state changes.
+     */
+    updateValidity() {
+      if (this._customValidityMessage) {
+        this._internals.setValidity(
+          { customError: true },
+          this._customValidityMessage,
+          this.getValidationAnchor()
+        );
+        return;
+      }
+      const flags = this.getValidationFlags();
+      const hasError = Object.values(flags).some(Boolean);
+      if (hasError) {
+        const message = this.getValidationMessage(flags);
+        this._internals.setValidity(flags, message, this.getValidationAnchor());
+      } else {
+        this._internals.setValidity({});
+      }
+    }
+    /**
+     * Lifecycle hook to sync form value and validity on property changes.
+     */
+    updated(changedProperties) {
+      super.updated(changedProperties);
+      if (changedProperties.has("value") || this.shouldUpdateFormValue(changedProperties)) {
+        this.updateFormValue();
+      }
+      if (changedProperties.has("required") || changedProperties.has("disabled") || this.shouldUpdateValidity(changedProperties)) {
+        this.updateValidity();
+      }
+    }
+    /**
+     * Override to specify additional properties that should trigger form value update.
+     */
+    shouldUpdateFormValue(_changedProperties) {
+      return false;
+    }
+    /**
+     * Override to specify additional properties that should trigger validity update.
+     */
+    shouldUpdateValidity(_changedProperties) {
+      return false;
+    }
+  }
+  __decorateClass([
+    property({ type: String, reflect: true })
+  ], FormAssociatedClass.prototype, "name", 2);
+  __decorateClass([
+    property({ type: String })
+  ], FormAssociatedClass.prototype, "value", 2);
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], FormAssociatedClass.prototype, "disabled", 2);
+  __decorateClass([
+    property({ type: Boolean, reflect: true })
+  ], FormAssociatedClass.prototype, "required", 2);
+  __decorateClass([
+    property({ type: Boolean, attribute: "custom-validation" })
+  ], FormAssociatedClass.prototype, "customValidation", 2);
+  return FormAssociatedClass;
+}
+
+export {
+  FormAssociatedMixin
+};
+//# sourceMappingURL=chunk-UM7WRO7W.js.map

package/dist/chunk-UM7WRO7W.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/base/form-associated.ts"],"sourcesContent":["import type { LitElement } from \"lit\";\nimport type { PropertyValues } from \"lit\";\nimport { property } from \"lit/decorators.js\";\n\n/**\n * Validation flags for ElementInternals.setValidity().\n */\nexport interface ValidationFlags {\n  /** Element is required but has no value */\n  valueMissing?: boolean;\n  /** Value doesn't match the expected type */\n  typeMismatch?: boolean;\n  /** Value doesn't match the pattern attribute */\n  patternMismatch?: boolean;\n  /** Value exceeds maxlength */\n  tooLong?: boolean;\n  /** Value is shorter than minlength */\n  tooShort?: boolean;\n  /** Value exceeds max */\n  rangeOverflow?: boolean;\n  /** Value is less than min */\n  rangeUnderflow?: boolean;\n  /** Value doesn't match step */\n  stepMismatch?: boolean;\n  /** Custom validation failed */\n  customError?: boolean;\n  /** Value doesn't match any option */\n  badInput?: boolean;\n}\n\n/**\n * Type for mixin constructor with any args.\n */\n// biome-ignore lint/suspicious/noExplicitAny: Mixin pattern requires any[] for constructor args\ntype Constructor<T = object> = new (...args: any[]) => T;\n\n/**\n * Interface for form-associated element properties and methods.\n */\nexport interface FormAssociatedInterface {\n  name: string;\n  value: string;\n  disabled: boolean;\n  required: boolean;\n  customValidation: boolean;\n  readonly validity: ValidityState;\n  readonly validationMessage: string;\n  readonly willValidate: boolean;\n  readonly form: HTMLFormElement | null;\n  checkValidity(): boolean;\n  reportValidity(): boolean;\n  setCustomValidity(message: string): void;\n}\n\n/**\n * Type for form lifecycle callbacks.\n */\nexport interface FormLifecycleCallbacks {\n  formAssociatedCallback?(form: HTMLFormElement | null): void;\n  formDisabledCallback?(disabled: boolean): void;\n  formResetCallback?(): void;\n  formStateRestoreCallback?(\n    state: string | File | FormData | null,\n    mode: \"restore\" | \"autocomplete\"\n  ): void;\n}\n\n/**\n * Combined interface for form-associated elements.\n */\nexport type FormAssociatedElement = FormAssociatedInterface & FormLifecycleCallbacks;\n\n/**\n * Form-associated mixin for Lit elements.\n *\n * Adds ElementInternals-based form participation to any Lit component.\n * Components using this mixin participate in native HTML form submission,\n * validation, and lifecycle callbacks.\n *\n * @example\n * ```typescript\n * import { FormAssociatedMixin } from '../base/form-associated.js';\n * import { DSElement } from '../base/ds-element.js';\n *\n * class DsCheckbox extends FormAssociatedMixin(DSElement) {\n *   @property({ type: Boolean }) checked = false;\n *\n *   protected getFormValue(): FormData | string | null {\n *     return this.checked ? this.value : null;\n *   }\n *\n *   protected getValidationAnchor(): HTMLElement | undefined {\n *     return this.renderRoot.querySelector('.ds-checkbox__control') ?? undefined;\n *   }\n * }\n * ```\n */\nexport function FormAssociatedMixin<T extends Constructor<LitElement>>(Base: T) {\n  abstract class FormAssociatedClass extends Base implements FormAssociatedInterface {\n    /**\n     * Required static property for form association.\n     * Signals to the browser that this element participates in forms.\n     */\n    static formAssociated = true;\n\n    /**\n     * ElementInternals reference for form participation.\n     */\n    private _internals!: ElementInternals;\n\n    /**\n     * Default value for form reset.\n     */\n    private _defaultValue: string | null = null;\n\n    /**\n     * Form field name, used as the key in FormData.\n     */\n    @property({ type: String, reflect: true })\n    name = \"\";\n\n    /**\n     * Current value of the control.\n     */\n    @property({ type: String })\n    value = \"\";\n\n    /**\n     * Whether the control is disabled.\n     */\n    @property({ type: Boolean, reflect: true })\n    disabled = false;\n\n    /**\n     * Whether the control is required.\n     */\n    @property({ type: Boolean, reflect: true })\n    required = false;\n\n    /**\n     * Opt-in for custom validation UI (ds-field-error) instead of native browser UI.\n     */\n    @property({ type: Boolean, attribute: \"custom-validation\" })\n    customValidation = false;\n\n    /**\n     * Custom error message set via setCustomValidity().\n     */\n    private _customValidityMessage = \"\";\n\n    // biome-ignore lint/suspicious/noExplicitAny: Mixin pattern requires any[] for constructor args\n    constructor(...args: any[]) {\n      super(...args);\n      this._internals = this.attachInternals();\n    }\n\n    override connectedCallback(): void {\n      super.connectedCallback();\n      // Store default value for form reset\n      this._defaultValue = this.value;\n    }\n\n    /**\n     * Current validity state of the control.\n     */\n    get validity(): ValidityState {\n      return this._internals.validity;\n    }\n\n    /**\n     * Localized message describing the validation error.\n     */\n    get validationMessage(): string {\n      return this._internals.validationMessage;\n    }\n\n    /**\n     * Whether the control will be validated when the form is submitted.\n     */\n    get willValidate(): boolean {\n      return this._internals.willValidate;\n    }\n\n    /**\n     * The form element that this control is associated with.\n     */\n    get form(): HTMLFormElement | null {\n      return this._internals.form;\n    }\n\n    /**\n     * Check if the control satisfies its constraints.\n     * Does not show any UI feedback.\n     */\n    checkValidity(): boolean {\n      return this._internals.checkValidity();\n    }\n\n    /**\n     * Check validity and show validation UI if invalid.\n     * When customValidation is true, emits ds:invalid event instead of native UI.\n     */\n    reportValidity(): boolean {\n      if (this.customValidation) {\n        const valid = this._internals.checkValidity();\n        if (!valid) {\n          this.dispatchEvent(\n            new CustomEvent(\"ds:invalid\", {\n              detail: { message: this._internals.validationMessage },\n              bubbles: true,\n              composed: true,\n            })\n          );\n        }\n        return valid;\n      }\n      return this._internals.reportValidity();\n    }\n\n    /**\n     * Set a custom validation message.\n     * Empty string clears custom validity.\n     */\n    setCustomValidity(message: string): void {\n      this._customValidityMessage = message;\n      if (message) {\n        this._internals.setValidity({ customError: true }, message, this.getValidationAnchor());\n      } else {\n        this.updateValidity();\n      }\n    }\n\n    /**\n     * Called when the element is associated with a form.\n     */\n    formAssociatedCallback(form: HTMLFormElement | null): void {\n      // Can be overridden by subclasses\n      void form;\n    }\n\n    /**\n     * Called when the element or ancestor fieldset is disabled/enabled.\n     */\n    formDisabledCallback(disabled: boolean): void {\n      this.disabled = disabled;\n    }\n\n    /**\n     * Called when the form is reset.\n     * Subclasses should override to restore their specific default state.\n     */\n    formResetCallback(): void {\n      this.value = this._defaultValue ?? \"\";\n      this._customValidityMessage = \"\";\n      this._internals.setFormValue(null);\n      this._internals.setValidity({});\n      this.onFormReset();\n    }\n\n    /**\n     * Called during form state restoration (navigation, autofill).\n     */\n    formStateRestoreCallback(\n      state: string | File | FormData | null,\n      mode: \"restore\" | \"autocomplete\"\n    ): void {\n      if (typeof state === \"string\") {\n        this.value = state;\n      }\n      this.onFormStateRestore(state, mode);\n    }\n\n    /**\n     * Override in subclass to return the form value.\n     * Return null to indicate no value (won't be submitted).\n     */\n    protected abstract getFormValue(): FormData | string | null;\n\n    /**\n     * Override in subclass to return the anchor element for validation messages.\n     * This is typically the interactive element within the component.\n     */\n    protected getValidationAnchor(): HTMLElement | undefined {\n      return undefined;\n    }\n\n    /**\n     * Override in subclass to return validation flags.\n     * Called by updateValidity() to determine validity state.\n     */\n    protected getValidationFlags(): ValidationFlags {\n      return {};\n    }\n\n    /**\n     * Override in subclass to return validation message for current flags.\n     */\n    protected getValidationMessage(_flags: ValidationFlags): string {\n      return \"\";\n    }\n\n    /**\n     * Hook for subclasses to handle form reset.\n     */\n    protected onFormReset(): void {\n      // Override in subclass\n    }\n\n    /**\n     * Hook for subclasses to handle form state restore.\n     */\n    protected onFormStateRestore(\n      _state: string | File | FormData | null,\n      _mode: \"restore\" | \"autocomplete\"\n    ): void {\n      // Override in subclass\n    }\n\n    /**\n     * Updates the form value. Call this when the component's value changes.\n     */\n    protected updateFormValue(): void {\n      const value = this.getFormValue();\n      this._internals.setFormValue(value);\n    }\n\n    /**\n     * Updates the validity state. Call this when validation-relevant state changes.\n     */\n    protected updateValidity(): void {\n      // Check for custom validity first\n      if (this._customValidityMessage) {\n        this._internals.setValidity(\n          { customError: true },\n          this._customValidityMessage,\n          this.getValidationAnchor()\n        );\n        return;\n      }\n\n      // Get validation flags from subclass\n      const flags = this.getValidationFlags();\n      const hasError = Object.values(flags).some(Boolean);\n\n      if (hasError) {\n        const message = this.getValidationMessage(flags);\n        this._internals.setValidity(flags, message, this.getValidationAnchor());\n      } else {\n        this._internals.setValidity({});\n      }\n    }\n\n    /**\n     * Lifecycle hook to sync form value and validity on property changes.\n     */\n    protected override updated(changedProperties: PropertyValues): void {\n      super.updated(changedProperties);\n\n      // Update form value when value or relevant state changes\n      if (changedProperties.has(\"value\") || this.shouldUpdateFormValue(changedProperties)) {\n        this.updateFormValue();\n      }\n\n      // Update validity when validation-relevant properties change\n      if (\n        changedProperties.has(\"required\") ||\n        changedProperties.has(\"disabled\") ||\n        this.shouldUpdateValidity(changedProperties)\n      ) {\n        this.updateValidity();\n      }\n    }\n\n    /**\n     * Override to specify additional properties that should trigger form value update.\n     */\n    protected shouldUpdateFormValue(_changedProperties: PropertyValues): boolean {\n      return false;\n    }\n\n    /**\n     * Override to specify additional properties that should trigger validity update.\n     */\n    protected shouldUpdateValidity(_changedProperties: PropertyValues): boolean {\n      return false;\n    }\n  }\n\n  return FormAssociatedClass as unknown as Constructor<FormAssociatedInterface & LitElement> & T & { formAssociated: true };\n}\n"],"mappings":"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","names":[]}

package/dist/chunk-VPXL4RB3.js

@@ -0,0 +1,202 @@
+import {
+  DSElement,
+  __decorateClass,
+  define
+} from "./chunk-H4GJJZ3N.js";
+
+// src/components/progress/progress.ts
+import { html, nothing } from "lit";
+import { property } from "lit/decorators.js";
+import { classMap } from "lit/directives/class-map.js";
+var DsProgress = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.max = 100;
+    this.variant = "linear";
+    this.size = "md";
+    this.label = "";
+    this.showValue = false;
+  }
+  static {
+    this.styles = [];
+  }
+  get isIndeterminate() {
+    return this.value === void 0 || this.value === null;
+  }
+  get percentage() {
+    if (this.isIndeterminate) return 0;
+    return Math.min(100, Math.max(0, (this.value ?? 0) / this.max * 100));
+  }
+  get valueText() {
+    if (this.isIndeterminate) {
+      return this.label || "Loading...";
+    }
+    return `${Math.round(this.percentage)}% complete`;
+  }
+  renderLinear() {
+    const classes = {
+      "ds-progress": true
+    };
+    return html`
+      <div
+        part="track"
+        class=${classMap(classes)}
+        role="progressbar"
+        aria-valuenow=${this.isIndeterminate ? nothing : this.value}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        aria-valuetext=${this.valueText}
+        aria-label=${this.label || nothing}
+        ?aria-busy=${this.isIndeterminate}
+        data-size=${this.size}
+        ?data-indeterminate=${this.isIndeterminate}
+      >
+        <div
+          part="bar"
+          class="ds-progress__bar"
+          style=${this.isIndeterminate ? "" : `width: ${this.percentage}%`}
+        ></div>
+        ${this.label ? html`<span part="label" class="ds-progress__label">${this.label}</span>` : nothing}
+      </div>
+    `;
+  }
+  renderCircular() {
+    const size = this.size === "sm" ? 24 : this.size === "lg" ? 64 : 40;
+    const strokeWidth = this.size === "sm" ? 3 : this.size === "lg" ? 6 : 4;
+    const radius = (size - strokeWidth) / 2;
+    const circumference = 2 * Math.PI * radius;
+    const offset = circumference - this.percentage / 100 * circumference;
+    const classes = {
+      "ds-progress-circular": true
+    };
+    return html`
+      <div
+        class=${classMap(classes)}
+        role="progressbar"
+        aria-valuenow=${this.isIndeterminate ? nothing : this.value}
+        aria-valuemin="0"
+        aria-valuemax=${this.max}
+        aria-valuetext=${this.valueText}
+        aria-label=${this.label || nothing}
+        ?aria-busy=${this.isIndeterminate}
+        data-size=${this.size}
+        ?data-indeterminate=${this.isIndeterminate}
+      >
+        <svg class="ds-progress-circular__svg" viewBox="0 0 ${size} ${size}">
+          <circle
+            class="ds-progress-circular__track"
+            cx=${size / 2}
+            cy=${size / 2}
+            r=${radius}
+          />
+          <circle
+            class="ds-progress-circular__fill"
+            cx=${size / 2}
+            cy=${size / 2}
+            r=${radius}
+            stroke-dasharray=${circumference}
+            stroke-dashoffset=${this.isIndeterminate ? 0 : offset}
+          />
+        </svg>
+        ${this.showValue && !this.isIndeterminate ? html`<span class="ds-progress-circular__label">${Math.round(this.percentage)}%</span>` : nothing}
+      </div>
+    `;
+  }
+  render() {
+    return this.variant === "circular" ? this.renderCircular() : this.renderLinear();
+  }
+};
+__decorateClass([
+  property({ type: Number })
+], DsProgress.prototype, "value", 2);
+__decorateClass([
+  property({ type: Number })
+], DsProgress.prototype, "max", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsProgress.prototype, "variant", 2);
+__decorateClass([
+  property({ type: String, reflect: true })
+], DsProgress.prototype, "size", 2);
+__decorateClass([
+  property({ type: String })
+], DsProgress.prototype, "label", 2);
+__decorateClass([
+  property({ type: Boolean, attribute: "show-value" })
+], DsProgress.prototype, "showValue", 2);
+define("ds-progress", DsProgress);
+
+// src/components/skeleton/skeleton.ts
+import { html as html2, nothing as nothing2 } from "lit";
+import { property as property2 } from "lit/decorators.js";
+import { classMap as classMap2 } from "lit/directives/class-map.js";
+import { styleMap } from "lit/directives/style-map.js";
+var DsSkeleton = class extends DSElement {
+  constructor() {
+    super(...arguments);
+    this.variant = "text";
+    this.customWidth = "";
+    this.customHeight = "";
+    this.animation = "wave";
+    this.label = "Loading...";
+  }
+  static {
+    this.styles = [];
+  }
+  render() {
+    const classes = {
+      "ds-skeleton": true
+    };
+    const styles = {};
+    if (this.customWidth) {
+      styles.width = this.customWidth;
+    }
+    if (this.customHeight) {
+      styles.height = this.customHeight;
+    }
+    return html2`
+      <div
+        class=${classMap2(classes)}
+        role="status"
+        aria-busy="true"
+        aria-label=${this.label}
+        data-variant=${this.variant}
+        data-size=${this.size || nothing2}
+        data-width=${!this.customWidth && this.width ? this.width : nothing2}
+        data-animation=${this.animation}
+        ?data-no-animation=${this.animation === "none"}
+        style=${Object.keys(styles).length > 0 ? styleMap(styles) : nothing2}
+      >
+        <span class="ds-visually-hidden">${this.label}</span>
+      </div>
+    `;
+  }
+};
+__decorateClass([
+  property2({ type: String, reflect: true })
+], DsSkeleton.prototype, "variant", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], DsSkeleton.prototype, "size", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], DsSkeleton.prototype, "width", 2);
+__decorateClass([
+  property2({ type: String, attribute: "custom-width" })
+], DsSkeleton.prototype, "customWidth", 2);
+__decorateClass([
+  property2({ type: String, attribute: "custom-height" })
+], DsSkeleton.prototype, "customHeight", 2);
+__decorateClass([
+  property2({ type: String, reflect: true })
+], DsSkeleton.prototype, "animation", 2);
+__decorateClass([
+  property2({ type: String })
+], DsSkeleton.prototype, "label", 2);
+define("ds-skeleton", DsSkeleton);
+
+export {
+  DsProgress,
+  DsSkeleton
+};
+//# sourceMappingURL=chunk-VPXL4RB3.js.map

package/dist/chunk-VPXL4RB3.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/components/progress/progress.ts","../src/components/skeleton/skeleton.ts"],"sourcesContent":["import { type TemplateResult, html, nothing } 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 ProgressVariant = \"linear\" | \"circular\";\nexport type ProgressSize = \"sm\" | \"md\" | \"lg\";\n\n/**\n * Progress indicator component.\n *\n * @element ds-progress\n *\n * @csspart track - The progress track\n * @csspart bar - The progress bar/fill\n * @csspart label - The accessible label\n *\n * @cssprop --ds-progress-track - Track background color\n * @cssprop --ds-progress-fill - Fill/indicator color\n * @cssprop --ds-progress-height - Track height (linear)\n */\nexport class DsProgress extends DSElement {\n  static override styles = [];\n\n  /**\n   * Current progress value (0-100). Omit for indeterminate.\n   */\n  @property({ type: Number })\n  value?: number;\n\n  /**\n   * Maximum value.\n   */\n  @property({ type: Number })\n  max = 100;\n\n  /**\n   * Visual variant.\n   */\n  @property({ type: String, reflect: true })\n  variant: ProgressVariant = \"linear\";\n\n  /**\n   * Size variant.\n   */\n  @property({ type: String, reflect: true })\n  size: ProgressSize = \"md\";\n\n  /**\n   * Accessible label.\n   */\n  @property({ type: String })\n  label = \"\";\n\n  /**\n   * Show value as percentage text (circular only).\n   */\n  @property({ type: Boolean, attribute: \"show-value\" })\n  showValue = false;\n\n  private get isIndeterminate(): boolean {\n    return this.value === undefined || this.value === null;\n  }\n\n  private get percentage(): number {\n    if (this.isIndeterminate) return 0;\n    return Math.min(100, Math.max(0, ((this.value ?? 0) / this.max) * 100));\n  }\n\n  private get valueText(): string {\n    if (this.isIndeterminate) {\n      return this.label || \"Loading...\";\n    }\n    return `${Math.round(this.percentage)}% complete`;\n  }\n\n  private renderLinear(): TemplateResult {\n    const classes = {\n      \"ds-progress\": true,\n    };\n\n    return html`\n      <div\n        part=\"track\"\n        class=${classMap(classes)}\n        role=\"progressbar\"\n        aria-valuenow=${this.isIndeterminate ? nothing : this.value}\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuetext=${this.valueText}\n        aria-label=${this.label || nothing}\n        ?aria-busy=${this.isIndeterminate}\n        data-size=${this.size}\n        ?data-indeterminate=${this.isIndeterminate}\n      >\n        <div\n          part=\"bar\"\n          class=\"ds-progress__bar\"\n          style=${this.isIndeterminate ? \"\" : `width: ${this.percentage}%`}\n        ></div>\n        ${\n          this.label\n            ? html`<span part=\"label\" class=\"ds-progress__label\">${this.label}</span>`\n            : nothing\n        }\n      </div>\n    `;\n  }\n\n  private renderCircular(): TemplateResult {\n    // SVG circle calculations\n    const size = this.size === \"sm\" ? 24 : this.size === \"lg\" ? 64 : 40;\n    const strokeWidth = this.size === \"sm\" ? 3 : this.size === \"lg\" ? 6 : 4;\n    const radius = (size - strokeWidth) / 2;\n    const circumference = 2 * Math.PI * radius;\n    const offset = circumference - (this.percentage / 100) * circumference;\n\n    const classes = {\n      \"ds-progress-circular\": true,\n    };\n\n    return html`\n      <div\n        class=${classMap(classes)}\n        role=\"progressbar\"\n        aria-valuenow=${this.isIndeterminate ? nothing : this.value}\n        aria-valuemin=\"0\"\n        aria-valuemax=${this.max}\n        aria-valuetext=${this.valueText}\n        aria-label=${this.label || nothing}\n        ?aria-busy=${this.isIndeterminate}\n        data-size=${this.size}\n        ?data-indeterminate=${this.isIndeterminate}\n      >\n        <svg class=\"ds-progress-circular__svg\" viewBox=\"0 0 ${size} ${size}\">\n          <circle\n            class=\"ds-progress-circular__track\"\n            cx=${size / 2}\n            cy=${size / 2}\n            r=${radius}\n          />\n          <circle\n            class=\"ds-progress-circular__fill\"\n            cx=${size / 2}\n            cy=${size / 2}\n            r=${radius}\n            stroke-dasharray=${circumference}\n            stroke-dashoffset=${this.isIndeterminate ? 0 : offset}\n          />\n        </svg>\n        ${\n          this.showValue && !this.isIndeterminate\n            ? html`<span class=\"ds-progress-circular__label\">${Math.round(this.percentage)}%</span>`\n            : nothing\n        }\n      </div>\n    `;\n  }\n\n  override render(): TemplateResult {\n    return this.variant === \"circular\" ? this.renderCircular() : this.renderLinear();\n  }\n}\n\n// Register the component\ndefine(\"ds-progress\", DsProgress);\n\n// TypeScript declaration for HTML\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ds-progress\": DsProgress;\n  }\n}\n","import { type TemplateResult, html, nothing } from \"lit\";\nimport { property } from \"lit/decorators.js\";\nimport { classMap } from \"lit/directives/class-map.js\";\nimport { styleMap } from \"lit/directives/style-map.js\";\nimport { DSElement } from \"../../base/ds-element.js\";\nimport { define } from \"../../registry/define.js\";\n\nexport type SkeletonVariant = \"text\" | \"circular\" | \"rectangular\" | \"rounded\";\nexport type SkeletonSize = \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\";\nexport type SkeletonWidth = \"full\" | \"3/4\" | \"1/2\" | \"1/4\";\nexport type SkeletonAnimation = \"wave\" | \"pulse\" | \"none\";\n\n/**\n * Skeleton loading placeholder component.\n *\n * @element ds-skeleton\n *\n * @cssprop --ds-skeleton-bg - Background color\n * @cssprop --ds-skeleton-highlight - Shimmer highlight color\n * @cssprop --ds-skeleton-radius - Border radius\n */\nexport class DsSkeleton extends DSElement {\n  static override styles = [];\n\n  /**\n   * Shape variant.\n   */\n  @property({ type: String, reflect: true })\n  variant: SkeletonVariant = \"text\";\n\n  /**\n   * Size preset for height.\n   */\n  @property({ type: String, reflect: true })\n  size?: SkeletonSize;\n\n  /**\n   * Width preset.\n   */\n  @property({ type: String, reflect: true })\n  width?: SkeletonWidth;\n\n  /**\n   * Custom width (CSS value).\n   */\n  @property({ type: String, attribute: \"custom-width\" })\n  customWidth = \"\";\n\n  /**\n   * Custom height (CSS value).\n   */\n  @property({ type: String, attribute: \"custom-height\" })\n  customHeight = \"\";\n\n  /**\n   * Animation type.\n   */\n  @property({ type: String, reflect: true })\n  animation: SkeletonAnimation = \"wave\";\n\n  /**\n   * Accessible label for screen readers.\n   */\n  @property({ type: String })\n  label = \"Loading...\";\n\n  override render(): TemplateResult {\n    const classes = {\n      \"ds-skeleton\": true,\n    };\n\n    const styles: Record<string, string> = {};\n    if (this.customWidth) {\n      styles.width = this.customWidth;\n    }\n    if (this.customHeight) {\n      styles.height = this.customHeight;\n    }\n\n    return html`\n      <div\n        class=${classMap(classes)}\n        role=\"status\"\n        aria-busy=\"true\"\n        aria-label=${this.label}\n        data-variant=${this.variant}\n        data-size=${this.size || nothing}\n        data-width=${!this.customWidth && this.width ? this.width : nothing}\n        data-animation=${this.animation}\n        ?data-no-animation=${this.animation === \"none\"}\n        style=${Object.keys(styles).length > 0 ? styleMap(styles) : nothing}\n      >\n        <span class=\"ds-visually-hidden\">${this.label}</span>\n      </div>\n    `;\n  }\n}\n\n// Register the component\ndefine(\"ds-skeleton\", DsSkeleton);\n\n// TypeScript declaration for HTML\ndeclare global {\n  interface HTMLElementTagNameMap {\n    \"ds-skeleton\": DsSkeleton;\n  }\n}\n"],"mappings":";;;;;;;AAAA,SAA8B,MAAM,eAAe;AACnD,SAAS,gBAAgB;AACzB,SAAS,gBAAgB;AAoBlB,IAAM,aAAN,cAAyB,UAAU;AAAA,EAAnC;AAAA;AAaL,eAAM;AAMN,mBAA2B;AAM3B,gBAAqB;AAMrB,iBAAQ;AAMR,qBAAY;AAAA;AAAA,EApCZ;AAAA,SAAgB,SAAS,CAAC;AAAA;AAAA,EAsC1B,IAAY,kBAA2B;AACrC,WAAO,KAAK,UAAU,UAAa,KAAK,UAAU;AAAA,EACpD;AAAA,EAEA,IAAY,aAAqB;AAC/B,QAAI,KAAK,gBAAiB,QAAO;AACjC,WAAO,KAAK,IAAI,KAAK,KAAK,IAAI,IAAK,KAAK,SAAS,KAAK,KAAK,MAAO,GAAG,CAAC;AAAA,EACxE;AAAA,EAEA,IAAY,YAAoB;AAC9B,QAAI,KAAK,iBAAiB;AACxB,aAAO,KAAK,SAAS;AAAA,IACvB;AACA,WAAO,GAAG,KAAK,MAAM,KAAK,UAAU,CAAC;AAAA,EACvC;AAAA,EAEQ,eAA+B;AACrC,UAAM,UAAU;AAAA,MACd,eAAe;AAAA,IACjB;AAEA,WAAO;AAAA;AAAA;AAAA,gBAGK,SAAS,OAAO,CAAC;AAAA;AAAA,wBAET,KAAK,kBAAkB,UAAU,KAAK,KAAK;AAAA;AAAA,wBAE3C,KAAK,GAAG;AAAA,yBACP,KAAK,SAAS;AAAA,qBAClB,KAAK,SAAS,OAAO;AAAA,qBACrB,KAAK,eAAe;AAAA,oBACrB,KAAK,IAAI;AAAA,8BACC,KAAK,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA,kBAKhC,KAAK,kBAAkB,KAAK,UAAU,KAAK,UAAU,GAAG;AAAA;AAAA,UAGhE,KAAK,QACD,qDAAqD,KAAK,KAAK,YAC/D,OACN;AAAA;AAAA;AAAA,EAGN;AAAA,EAEQ,iBAAiC;AAEvC,UAAM,OAAO,KAAK,SAAS,OAAO,KAAK,KAAK,SAAS,OAAO,KAAK;AACjE,UAAM,cAAc,KAAK,SAAS,OAAO,IAAI,KAAK,SAAS,OAAO,IAAI;AACtE,UAAM,UAAU,OAAO,eAAe;AACtC,UAAM,gBAAgB,IAAI,KAAK,KAAK;AACpC,UAAM,SAAS,gBAAiB,KAAK,aAAa,MAAO;AAEzD,UAAM,UAAU;AAAA,MACd,wBAAwB;AAAA,IAC1B;AAEA,WAAO;AAAA;AAAA,gBAEK,SAAS,OAAO,CAAC;AAAA;AAAA,wBAET,KAAK,kBAAkB,UAAU,KAAK,KAAK;AAAA;AAAA,wBAE3C,KAAK,GAAG;AAAA,yBACP,KAAK,SAAS;AAAA,qBAClB,KAAK,SAAS,OAAO;AAAA,qBACrB,KAAK,eAAe;AAAA,oBACrB,KAAK,IAAI;AAAA,8BACC,KAAK,eAAe;AAAA;AAAA,8DAEY,IAAI,IAAI,IAAI;AAAA;AAAA;AAAA,iBAGzD,OAAO,CAAC;AAAA,iBACR,OAAO,CAAC;AAAA,gBACT,MAAM;AAAA;AAAA;AAAA;AAAA,iBAIL,OAAO,CAAC;AAAA,iBACR,OAAO,CAAC;AAAA,gBACT,MAAM;AAAA,+BACS,aAAa;AAAA,gCACZ,KAAK,kBAAkB,IAAI,MAAM;AAAA;AAAA;AAAA,UAIvD,KAAK,aAAa,CAAC,KAAK,kBACpB,iDAAiD,KAAK,MAAM,KAAK,UAAU,CAAC,aAC5E,OACN;AAAA;AAAA;AAAA,EAGN;AAAA,EAES,SAAyB;AAChC,WAAO,KAAK,YAAY,aAAa,KAAK,eAAe,IAAI,KAAK,aAAa;AAAA,EACjF;AACF;AAtIE;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GANf,WAOX;AAMA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GAZf,WAaX;AAMA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlB9B,WAmBX;AAMA;AAAA,EADC,SAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAxB9B,WAyBX;AAMA;AAAA,EADC,SAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA9Bf,WA+BX;AAMA;AAAA,EADC,SAAS,EAAE,MAAM,SAAS,WAAW,aAAa,CAAC;AAAA,GApCzC,WAqCX;AA2GF,OAAO,eAAe,UAAU;;;ACtKhC,SAA8B,QAAAA,OAAM,WAAAC,gBAAe;AACnD,SAAS,YAAAC,iBAAgB;AACzB,SAAS,YAAAC,iBAAgB;AACzB,SAAS,gBAAgB;AAkBlB,IAAM,aAAN,cAAyB,UAAU;AAAA,EAAnC;AAAA;AAOL,mBAA2B;AAkB3B,uBAAc;AAMd,wBAAe;AAMf,qBAA+B;AAM/B,iBAAQ;AAAA;AAAA,EA1CR;AAAA,SAAgB,SAAS,CAAC;AAAA;AAAA,EA4CjB,SAAyB;AAChC,UAAM,UAAU;AAAA,MACd,eAAe;AAAA,IACjB;AAEA,UAAM,SAAiC,CAAC;AACxC,QAAI,KAAK,aAAa;AACpB,aAAO,QAAQ,KAAK;AAAA,IACtB;AACA,QAAI,KAAK,cAAc;AACrB,aAAO,SAAS,KAAK;AAAA,IACvB;AAEA,WAAOC;AAAA;AAAA,gBAEKC,UAAS,OAAO,CAAC;AAAA;AAAA;AAAA,qBAGZ,KAAK,KAAK;AAAA,uBACR,KAAK,OAAO;AAAA,oBACf,KAAK,QAAQC,QAAO;AAAA,qBACnB,CAAC,KAAK,eAAe,KAAK,QAAQ,KAAK,QAAQA,QAAO;AAAA,yBAClD,KAAK,SAAS;AAAA,6BACV,KAAK,cAAc,MAAM;AAAA,gBACtC,OAAO,KAAK,MAAM,EAAE,SAAS,IAAI,SAAS,MAAM,IAAIA,QAAO;AAAA;AAAA,2CAEhC,KAAK,KAAK;AAAA;AAAA;AAAA,EAGnD;AACF;AApEE;AAAA,EADCC,UAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAN9B,WAOX;AAMA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAZ9B,WAaX;AAMA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GAlB9B,WAmBX;AAMA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,eAAe,CAAC;AAAA,GAxB1C,WAyBX;AAMA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,WAAW,gBAAgB,CAAC;AAAA,GA9B3C,WA+BX;AAMA;AAAA,EADCA,UAAS,EAAE,MAAM,QAAQ,SAAS,KAAK,CAAC;AAAA,GApC9B,WAqCX;AAMA;AAAA,EADCA,UAAS,EAAE,MAAM,OAAO,CAAC;AAAA,GA1Cf,WA2CX;AAmCF,OAAO,eAAe,UAAU;","names":["html","nothing","property","classMap","html","classMap","nothing","property"]}