@tessera-ui/core 0.4.0

package/dist/esm/ts-empty-state.entry.js

@@ -0,0 +1,30 @@
+import { r as registerInstance, h, H as Host } from './index-V8-ENixA.js';
+
+const emptyStateCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-empty-state-icon-size:3rem;--ts-empty-state-icon-color:var(--ts-color-text-tertiary)}.empty-state__base{display:flex;flex-direction:column;align-items:center;text-align:center;padding-inline:var(--ts-spacing-6);padding-block:var(--ts-spacing-8);gap:var(--ts-spacing-3)}.empty-state__icon{display:flex;align-items:center;justify-content:center;color:var(--ts-empty-state-icon-color);font-size:var(--ts-empty-state-icon-size);margin-block-end:var(--ts-spacing-2)}.empty-state__icon:empty{display:none}.empty-state__heading{margin:0;font-size:var(--ts-font-size-lg);font-weight:var(--ts-font-weight-semi);color:var(--ts-color-text-primary);line-height:var(--ts-line-height-tight)}.empty-state__description{margin:0;font-size:var(--ts-font-size-sm);color:var(--ts-color-text-secondary);line-height:var(--ts-line-height-normal);max-inline-size:36ch}.empty-state__content:empty{display:none}.empty-state__action{display:flex;align-items:center;gap:var(--ts-spacing-2);margin-block-start:var(--ts-spacing-2)}.empty-state__action:empty{display:none}:host([size="sm"]) .empty-state__base{padding-inline:var(--ts-spacing-4);padding-block:var(--ts-spacing-4);gap:var(--ts-spacing-2)}:host([size="sm"]) .empty-state__icon{--ts-empty-state-icon-size:2rem}:host([size="sm"]) .empty-state__heading{font-size:var(--ts-font-size-md)}:host([size="sm"]) .empty-state__description{font-size:var(--ts-font-size-xs)}:host([size="lg"]) .empty-state__base{padding-inline:var(--ts-spacing-8);padding-block:var(--ts-spacing-12);gap:var(--ts-spacing-4)}:host([size="lg"]) .empty-state__icon{--ts-empty-state-icon-size:4.5rem}:host([size="lg"]) .empty-state__heading{font-size:var(--ts-font-size-xl)}:host([size="lg"]) .empty-state__description{font-size:var(--ts-font-size-md);max-inline-size:48ch}`;
+
+const TsEmptyState = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** The heading text. */
+    heading;
+    /** The description text. */
+    description;
+    /** Lucide icon name displayed large. */
+    icon;
+    /** The size of the empty state. */
+    size = 'md';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '517bcb74b651797e31e8b631c88e6805493e85fc', class: {
+                'ts-empty-state': true,
+                [`ts-empty-state--${this.size}`]: true,
+            } }, h("div", { key: '738a7d08d1657b83672a53d1dd8d07f174176739', class: "empty-state__base", part: "base" }, h("div", { key: 'bbc92546c5172180e64f817a8a0bd5c766d12869', class: "empty-state__icon", part: "icon" }, h("slot", { key: '46be0b9827a41af2d05647dcc56ac19c5484a364', name: "icon" }, this.icon && h("ts-icon", { key: '14720f6e52094f08a79b067d228a35ff3d94ce66', name: this.icon }))), this.heading && (h("h3", { key: '88a6cad61c93cc07b274ea7f8bf4e0b4cb0eee57', class: "empty-state__heading", part: "heading" }, this.heading)), this.description && (h("p", { key: 'a59a3db32e57a06c95174708cbd935288de9d3ae', class: "empty-state__description", part: "description" }, this.description)), h("div", { key: '183fb5fbc08a0bf80fe1dd14c31bc5c55ba14fb7', class: "empty-state__content", part: "content" }, h("slot", { key: 'e51960738181881636c7cb8a6c31d72d6213a026' })), h("div", { key: '5cb324a51b4a210952eba2e556a64f9bc39d8383', class: "empty-state__action", part: "action" }, h("slot", { key: '173a07dc3546f213e3f5a3ed67d6ed94c3e34386', name: "action" })))));
+    }
+};
+TsEmptyState.style = emptyStateCss();
+
+export { TsEmptyState as ts_empty_state };
+//# sourceMappingURL=ts-empty-state.entry.js.map
+
+//# sourceMappingURL=ts-empty-state.entry.js.map

package/dist/esm/ts-empty-state.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-empty-state.entry.js","sources":["src/components/empty-state/empty-state.css?tag=ts-empty-state&encapsulation=shadow","src/components/empty-state/empty-state.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-empty-state — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-empty-state-icon-size    Icon size\n     --ts-empty-state-icon-color   Icon color\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-empty-state-icon-size: 3rem;\n  --ts-empty-state-icon-color: var(--ts-color-text-tertiary);\n}\n\n.empty-state__base {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  text-align: center;\n  padding-inline: var(--ts-spacing-6);\n  padding-block: var(--ts-spacing-8);\n  gap: var(--ts-spacing-3);\n}\n\n/* ---- Icon ---- */\n.empty-state__icon {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  color: var(--ts-empty-state-icon-color);\n  font-size: var(--ts-empty-state-icon-size);\n  margin-block-end: var(--ts-spacing-2);\n}\n\n.empty-state__icon:empty {\n  display: none;\n}\n\n/* ---- Heading ---- */\n.empty-state__heading {\n  margin: 0;\n  font-size: var(--ts-font-size-lg);\n  font-weight: var(--ts-font-weight-semi);\n  color: var(--ts-color-text-primary);\n  line-height: var(--ts-line-height-tight);\n}\n\n/* ---- Description ---- */\n.empty-state__description {\n  margin: 0;\n  font-size: var(--ts-font-size-sm);\n  color: var(--ts-color-text-secondary);\n  line-height: var(--ts-line-height-normal);\n  max-inline-size: 36ch;\n}\n\n/* ---- Content ---- */\n.empty-state__content:empty {\n  display: none;\n}\n\n/* ---- Action ---- */\n.empty-state__action {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-spacing-2);\n  margin-block-start: var(--ts-spacing-2);\n}\n\n.empty-state__action:empty {\n  display: none;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) .empty-state__base {\n  padding-inline: var(--ts-spacing-4);\n  padding-block: var(--ts-spacing-4);\n  gap: var(--ts-spacing-2);\n}\n\n:host([size=\"sm\"]) .empty-state__icon {\n  --ts-empty-state-icon-size: 2rem;\n}\n\n:host([size=\"sm\"]) .empty-state__heading {\n  font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"sm\"]) .empty-state__description {\n  font-size: var(--ts-font-size-xs);\n}\n\n:host([size=\"lg\"]) .empty-state__base {\n  padding-inline: var(--ts-spacing-8);\n  padding-block: var(--ts-spacing-12);\n  gap: var(--ts-spacing-4);\n}\n\n:host([size=\"lg\"]) .empty-state__icon {\n  --ts-empty-state-icon-size: 4.5rem;\n}\n\n:host([size=\"lg\"]) .empty-state__heading {\n  font-size: var(--ts-font-size-xl);\n}\n\n:host([size=\"lg\"]) .empty-state__description {\n  font-size: var(--ts-font-size-md);\n  max-inline-size: 48ch;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\nimport type { TsSize } from '../../types';\n\n/**\n * @slot - Custom content below the description.\n * @slot action - CTA buttons.\n * @slot icon - Custom icon or illustration.\n *\n * @part base - The empty state container.\n * @part icon - The icon wrapper.\n * @part heading - The heading element.\n * @part description - The description text.\n * @part content - The custom content wrapper.\n * @part action - The action slot wrapper.\n */\n@Component({\n  tag: 'ts-empty-state',\n  styleUrl: 'empty-state.css',\n  shadow: true,\n})\nexport class TsEmptyState {\n  /** The heading text. */\n  @Prop() heading?: string;\n\n  /** The description text. */\n  @Prop() description?: string;\n\n  /** Lucide icon name displayed large. */\n  @Prop() icon?: string;\n\n  /** The size of the empty state. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-empty-state': true,\n          [`ts-empty-state--${this.size}`]: true,\n        }}\n      >\n        <div class=\"empty-state__base\" part=\"base\">\n          <div class=\"empty-state__icon\" part=\"icon\">\n            <slot name=\"icon\">\n              {this.icon && <ts-icon name={this.icon} />}\n            </slot>\n          </div>\n\n          {this.heading && (\n            <h3 class=\"empty-state__heading\" part=\"heading\">\n              {this.heading}\n            </h3>\n          )}\n\n          {this.description && (\n            <p class=\"empty-state__description\" part=\"description\">\n              {this.description}\n            </p>\n          )}\n\n          <div class=\"empty-state__content\" part=\"content\">\n            <slot />\n          </div>\n\n          <div class=\"empty-state__action\" part=\"action\">\n            <slot name=\"action\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,aAAa,GAAG,MAAM,CAAC,2yDAA2yD,CAAC;;MCoB5zD,YAAY,GAAA,MAAA;;;;;AAEf,IAAA,OAAO;;AAGP,IAAA,WAAW;;AAGX,IAAA,IAAI;;IAGa,IAAI,GAAW,IAAI;;IAG5C,MAAM,GAAA;QACJ,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,gBAAgB,EAAE,IAAI;AACtB,gBAAA,CAAC,mBAAmB,IAAI,CAAC,IAAI,CAAA,CAAE,GAAG,IAAI;aACvC,EAAA,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,EAAA,EACxC,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,mBAAmB,EAAC,IAAI,EAAC,MAAM,EAAA,EACxC,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,MAAM,EAAA,EACd,IAAI,CAAC,IAAI,IAAI,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAS,IAAI,EAAE,IAAI,CAAC,IAAI,EAAA,CAAI,CACrC,CACH,EAEL,IAAI,CAAC,OAAO,KACX,CAAA,CAAA,IAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAI,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,SAAS,EAAA,EAC5C,IAAI,CAAC,OAAO,CACV,CACN,EAEA,IAAI,CAAC,WAAW,KACf,CAAA,CAAA,GAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAG,KAAK,EAAC,0BAA0B,EAAC,IAAI,EAAC,aAAa,EAAA,EACnD,IAAI,CAAC,WAAW,CACf,CACL,EAED,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,sBAAsB,EAAC,IAAI,EAAC,SAAS,EAAA,EAC9C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EAEN,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,qBAAqB,EAAC,IAAI,EAAC,QAAQ,EAAA,EAC5C,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACF,CACD;;;;;;;"}

package/dist/esm/ts-file-upload.entry.js

@@ -0,0 +1,120 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+
+const fileUploadCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-file-upload-border-color:var(--ts-color-border-default);--ts-file-upload-bg:var(--ts-color-bg-surface);--ts-file-upload-radius:var(--ts-radius-md)}.file-upload__dropzone{display:flex;align-items:center;justify-content:center;min-block-size:120px;padding:var(--ts-spacing-6);border:2px dashed var(--ts-file-upload-border-color);border-radius:var(--ts-file-upload-radius);background-color:var(--ts-file-upload-bg);cursor:pointer;outline:none;transition:border-color var(--ts-transition-fast),     background-color var(--ts-transition-fast),     box-shadow var(--ts-transition-fast)}.file-upload__dropzone:hover:not([aria-disabled="true"]){border-color:var(--ts-color-interactive-primary);background-color:var(--ts-color-interactive-primary-subtle, rgba(59, 130, 246, 0.05))}.file-upload__dropzone:focus-visible{box-shadow:var(--ts-focus-ring);border-color:var(--ts-color-interactive-primary)}.file-upload__dropzone--drag-over{border-color:var(--ts-color-interactive-primary);background-color:var(--ts-color-interactive-primary-subtle, rgba(59, 130, 246, 0.1));border-style:solid}:host([disabled]) .file-upload__dropzone{opacity:0.5;cursor:not-allowed;pointer-events:none}.file-upload__label{display:flex;flex-direction:column;align-items:center;gap:var(--ts-spacing-2);font-size:var(--ts-font-size-sm);color:var(--ts-color-text-secondary);text-align:center;pointer-events:none}.file-upload__input{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0, 0, 0, 0);white-space:nowrap;border:0}`;
+
+const TsFileUpload = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tsChange = createEvent(this, "tsChange");
+    }
+    get hostEl() { return getElement(this); }
+    fileInputEl;
+    /** Accepted file types (e.g. '.jpg,.png'). */
+    accept;
+    /** Whether multiple files can be selected. */
+    multiple = false;
+    /** Maximum file size in bytes. */
+    maxSize;
+    /** Whether the file upload is disabled. */
+    disabled = false;
+    /** Label text for the dropzone. */
+    label = 'Drop files here or click to upload';
+    /** Form field name. */
+    name;
+    /** Emitted when files are selected or dropped. */
+    tsChange;
+    /** Whether a drag operation is over the dropzone. */
+    isDragOver = false;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.fileInputEl?.click();
+    };
+    handleKeydown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.fileInputEl?.click();
+        }
+    };
+    handleFileChange = (event) => {
+        const input = event.target;
+        if (input.files) {
+            const files = this.validateFiles(Array.from(input.files));
+            if (files.length > 0) {
+                this.tsChange.emit({ files });
+            }
+        }
+        // Reset input so the same file can be selected again
+        if (this.fileInputEl) {
+            this.fileInputEl.value = '';
+        }
+    };
+    handleDragOver = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        if (!this.disabled) {
+            this.isDragOver = true;
+        }
+    };
+    handleDragLeave = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = false;
+    };
+    handleDrop = (event) => {
+        event.preventDefault();
+        event.stopPropagation();
+        this.isDragOver = false;
+        if (this.disabled)
+            return;
+        const droppedFiles = event.dataTransfer?.files;
+        if (droppedFiles) {
+            const files = this.validateFiles(Array.from(droppedFiles));
+            if (files.length > 0) {
+                this.tsChange.emit({ files });
+            }
+        }
+    };
+    validateFiles(files) {
+        let validFiles = files;
+        // Filter by accepted types
+        if (this.accept) {
+            const acceptedTypes = this.accept.split(',').map((t) => t.trim().toLowerCase());
+            validFiles = validFiles.filter((file) => {
+                const ext = '.' + file.name.split('.').pop()?.toLowerCase();
+                const mime = file.type.toLowerCase();
+                return acceptedTypes.some((accepted) => accepted === ext ||
+                    accepted === mime ||
+                    (accepted.endsWith('/*') && mime.startsWith(accepted.replace('/*', '/'))));
+            });
+        }
+        // Filter by max size
+        if (this.maxSize) {
+            validFiles = validFiles.filter((file) => file.size <= this.maxSize);
+        }
+        // If not multiple, take only the first
+        if (!this.multiple && validFiles.length > 1) {
+            validFiles = [validFiles[0]];
+        }
+        return validFiles;
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (h(Host, { key: '8f52d515a31a1def7761e0a5e9537de64a6c5658', class: {
+                'ts-file-upload': true,
+                'ts-file-upload--drag-over': this.isDragOver,
+                'ts-file-upload--disabled': this.disabled,
+            } }, h("div", { key: '297acea91c7ad20eab02c5266f197ca0f7fe9c49', class: {
+                'file-upload__dropzone': true,
+                'file-upload__dropzone--drag-over': this.isDragOver,
+            }, part: "dropzone", role: "button", tabindex: this.disabled ? -1 : 0, "aria-disabled": this.disabled ? 'true' : undefined, "aria-label": this.label, onClick: this.handleClick, onKeyDown: this.handleKeydown, onDragOver: this.handleDragOver, onDragLeave: this.handleDragLeave, onDrop: this.handleDrop }, h("span", { key: 'ad3d90ac4f39ae38ab6d484c1f4841a0e70e7269', class: "file-upload__label", part: "label" }, h("slot", { key: '04a7a2073171d48adb57339477f51d28f0379612' }, this.label)), h("input", { key: '93051be2348247796ffd11d02723b400c969054e', ref: (el) => (this.fileInputEl = el), class: "file-upload__input", part: "input", type: "file", name: this.name, accept: this.accept, multiple: this.multiple, disabled: this.disabled, tabindex: -1, "aria-hidden": "true", onChange: this.handleFileChange }))));
+    }
+};
+TsFileUpload.style = fileUploadCss();
+
+export { TsFileUpload as ts_file_upload };
+//# sourceMappingURL=ts-file-upload.entry.js.map
+
+//# sourceMappingURL=ts-file-upload.entry.js.map

package/dist/esm/ts-file-upload.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-file-upload.entry.js","sources":["src/components/file-upload/file-upload.css?tag=ts-file-upload&encapsulation=shadow","src/components/file-upload/file-upload.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-file-upload — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-file-upload-border-color  Dropzone border color\n     --ts-file-upload-bg            Dropzone background\n     --ts-file-upload-radius        Dropzone border radius\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-file-upload-border-color: var(--ts-color-border-default);\n  --ts-file-upload-bg: var(--ts-color-bg-surface);\n  --ts-file-upload-radius: var(--ts-radius-md);\n}\n\n/* ---- Dropzone ---- */\n.file-upload__dropzone {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  min-block-size: 120px;\n  padding: var(--ts-spacing-6);\n  border: 2px dashed var(--ts-file-upload-border-color);\n  border-radius: var(--ts-file-upload-radius);\n  background-color: var(--ts-file-upload-bg);\n  cursor: pointer;\n  outline: none;\n  transition:\n    border-color var(--ts-transition-fast),\n    background-color var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast);\n}\n\n.file-upload__dropzone:hover:not([aria-disabled=\"true\"]) {\n  border-color: var(--ts-color-interactive-primary);\n  background-color: var(--ts-color-interactive-primary-subtle, rgba(59, 130, 246, 0.05));\n}\n\n.file-upload__dropzone:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n  border-color: var(--ts-color-interactive-primary);\n}\n\n/* ---- Drag over state ---- */\n.file-upload__dropzone--drag-over {\n  border-color: var(--ts-color-interactive-primary);\n  background-color: var(--ts-color-interactive-primary-subtle, rgba(59, 130, 246, 0.1));\n  border-style: solid;\n}\n\n/* ---- Disabled ---- */\n:host([disabled]) .file-upload__dropzone {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ---- Label ---- */\n.file-upload__label {\n  display: flex;\n  flex-direction: column;\n  align-items: center;\n  gap: var(--ts-spacing-2);\n  font-size: var(--ts-font-size-sm);\n  color: var(--ts-color-text-secondary);\n  text-align: center;\n  pointer-events: none;\n}\n\n/* ---- Hidden file input ---- */\n.file-upload__input {\n  position: absolute;\n  width: 1px;\n  height: 1px;\n  padding: 0;\n  margin: -1px;\n  overflow: hidden;\n  clip: rect(0, 0, 0, 0);\n  white-space: nowrap;\n  border: 0;\n}\n","import { Component, Prop, State, Event, h, Host, Element } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\n\n/**\n * @slot - Default slot for custom dropzone content.\n *\n * @part dropzone - The dropzone area.\n * @part label - The label text.\n * @part input - The hidden file input.\n */\n@Component({\n  tag: 'ts-file-upload',\n  styleUrl: 'file-upload.css',\n  shadow: true,\n})\nexport class TsFileUpload {\n  @Element() hostEl!: HTMLElement;\n\n  private fileInputEl?: HTMLInputElement;\n\n  /** Accepted file types (e.g. '.jpg,.png'). */\n  @Prop() accept?: string;\n\n  /** Whether multiple files can be selected. */\n  @Prop() multiple = false;\n\n  /** Maximum file size in bytes. */\n  @Prop() maxSize?: number;\n\n  /** Whether the file upload is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Label text for the dropzone. */\n  @Prop() label = 'Drop files here or click to upload';\n\n  /** Form field name. */\n  @Prop() name?: string;\n\n  /** Emitted when files are selected or dropped. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<{ files: File[] }>;\n\n  /** Whether a drag operation is over the dropzone. */\n  @State() isDragOver = false;\n\n  private handleClick = (): void => {\n    if (this.disabled) return;\n    this.fileInputEl?.click();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (this.disabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      this.fileInputEl?.click();\n    }\n  };\n\n  private handleFileChange = (event: Event): void => {\n    const input = event.target as HTMLInputElement;\n    if (input.files) {\n      const files = this.validateFiles(Array.from(input.files));\n      if (files.length > 0) {\n        this.tsChange.emit({ files });\n      }\n    }\n    // Reset input so the same file can be selected again\n    if (this.fileInputEl) {\n      this.fileInputEl.value = '';\n    }\n  };\n\n  private handleDragOver = (event: DragEvent): void => {\n    event.preventDefault();\n    event.stopPropagation();\n    if (!this.disabled) {\n      this.isDragOver = true;\n    }\n  };\n\n  private handleDragLeave = (event: DragEvent): void => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragOver = false;\n  };\n\n  private handleDrop = (event: DragEvent): void => {\n    event.preventDefault();\n    event.stopPropagation();\n    this.isDragOver = false;\n\n    if (this.disabled) return;\n\n    const droppedFiles = event.dataTransfer?.files;\n    if (droppedFiles) {\n      const files = this.validateFiles(Array.from(droppedFiles));\n      if (files.length > 0) {\n        this.tsChange.emit({ files });\n      }\n    }\n  };\n\n  private validateFiles(files: File[]): File[] {\n    let validFiles = files;\n\n    // Filter by accepted types\n    if (this.accept) {\n      const acceptedTypes = this.accept.split(',').map((t) => t.trim().toLowerCase());\n      validFiles = validFiles.filter((file) => {\n        const ext = '.' + file.name.split('.').pop()?.toLowerCase();\n        const mime = file.type.toLowerCase();\n        return acceptedTypes.some(\n          (accepted) =>\n            accepted === ext ||\n            accepted === mime ||\n            (accepted.endsWith('/*') && mime.startsWith(accepted.replace('/*', '/'))),\n        );\n      });\n    }\n\n    // Filter by max size\n    if (this.maxSize) {\n      validFiles = validFiles.filter((file) => file.size <= this.maxSize!);\n    }\n\n    // If not multiple, take only the first\n    if (!this.multiple && validFiles.length > 1) {\n      validFiles = [validFiles[0]];\n    }\n\n    return validFiles;\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-file-upload': true,\n          'ts-file-upload--drag-over': this.isDragOver,\n          'ts-file-upload--disabled': this.disabled,\n        }}\n      >\n        <div\n          class={{\n            'file-upload__dropzone': true,\n            'file-upload__dropzone--drag-over': this.isDragOver,\n          }}\n          part=\"dropzone\"\n          role=\"button\"\n          tabindex={this.disabled ? -1 : 0}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          aria-label={this.label}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n          onDragOver={this.handleDragOver}\n          onDragLeave={this.handleDragLeave}\n          onDrop={this.handleDrop}\n        >\n          <span class=\"file-upload__label\" part=\"label\">\n            <slot>{this.label}</slot>\n          </span>\n\n          <input\n            ref={(el) => (this.fileInputEl = el)}\n            class=\"file-upload__input\"\n            part=\"input\"\n            type=\"file\"\n            name={this.name}\n            accept={this.accept}\n            multiple={this.multiple}\n            disabled={this.disabled}\n            tabindex={-1}\n            aria-hidden=\"true\"\n            onChange={this.handleFileChange}\n          />\n        </div>\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ts-grid.entry.js

@@ -0,0 +1,35 @@
+import { r as registerInstance, h, H as Host } from './index-V8-ENixA.js';
+
+const gridCss = () => `:host{display:grid;width:100%;box-sizing:border-box}`;
+
+const TsGrid = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    /** Number of columns or 'auto' for responsive auto-fill. */
+    columns = 'auto';
+    /** Spacing token number for gap between items. */
+    gap = '4';
+    /** Minimum column width when columns is 'auto'. */
+    minColumnWidth = '280px';
+    /** Vertical alignment of grid items. */
+    align = 'stretch';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const gridTemplateColumns = this.columns === 'auto'
+            ? `repeat(auto-fill, minmax(${this.minColumnWidth}, 1fr))`
+            : `repeat(${this.columns}, 1fr)`;
+        const style = {
+            gridTemplateColumns,
+            gap: `var(--ts-spacing-${this.gap})`,
+            alignItems: this.align,
+        };
+        return (h(Host, { key: 'f2d1238a19d2235c676d1fd08f045b18dc3b40fa', style: style }, h("slot", { key: '3c454fc9910bcf8960b4a2833f82e91eb6d5be03' })));
+    }
+};
+TsGrid.style = gridCss();
+
+export { TsGrid as ts_grid };
+//# sourceMappingURL=ts-grid.entry.js.map
+
+//# sourceMappingURL=ts-grid.entry.js.map

package/dist/esm/ts-grid.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-grid.entry.js","sources":["src/components/grid/grid.css?tag=ts-grid&encapsulation=shadow","src/components/grid/grid.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-grid — Shadow DOM Scoped Styles\n\n   CSS Grid layout component with responsive auto-fill columns.\n   ========================================================================== */\n\n:host {\n  display: grid;\n  width: 100%;\n  box-sizing: border-box;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for grid items.\n *\n * @part base - The grid container.\n */\n@Component({\n  tag: 'ts-grid',\n  styleUrl: 'grid.css',\n  shadow: true,\n})\nexport class TsGrid {\n  /** Number of columns or 'auto' for responsive auto-fill. */\n  @Prop({ reflect: true }) columns: string = 'auto';\n\n  /** Spacing token number for gap between items. */\n  @Prop({ reflect: true }) gap: string = '4';\n\n  /** Minimum column width when columns is 'auto'. */\n  @Prop({ reflect: true }) minColumnWidth: string = '280px';\n\n  /** Vertical alignment of grid items. */\n  @Prop({ reflect: true }) align: 'start' | 'center' | 'end' | 'stretch' = 'stretch';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const gridTemplateColumns =\n      this.columns === 'auto'\n        ? `repeat(auto-fill, minmax(${this.minColumnWidth}, 1fr))`\n        : `repeat(${this.columns}, 1fr)`;\n\n    const style = {\n      gridTemplateColumns,\n      gap: `var(--ts-spacing-${this.gap})`,\n      alignItems: this.align,\n    };\n\n    return (\n      <Host style={style}>\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,oDAAoD,CAAC;;MCY/D,MAAM,GAAA,MAAA;;;;;IAEQ,OAAO,GAAW,MAAM;;IAGxB,GAAG,GAAW,GAAG;;IAGjB,cAAc,GAAW,OAAO;;IAGhC,KAAK,GAA2C,SAAS;;IAGlF,MAAM,GAAA;AACJ,QAAA,MAAM,mBAAmB,GACvB,IAAI,CAAC,OAAO,KAAK;AACf,cAAE,CAAA,yBAAA,EAA4B,IAAI,CAAC,cAAc,CAAA,OAAA;AACjD,cAAE,CAAA,OAAA,EAAU,IAAI,CAAC,OAAO,QAAQ;AAEpC,QAAA,MAAM,KAAK,GAAG;YACZ,mBAAmB;AACnB,YAAA,GAAG,EAAE,CAAA,iBAAA,EAAoB,IAAI,CAAC,GAAG,CAAA,CAAA,CAAG;YACpC,UAAU,EAAE,IAAI,CAAC,KAAK;SACvB;QAED,QACE,CAAA,CAAC,IAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAC,KAAK,EAAE,KAAK,EAAA,EAChB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;"}

package/dist/esm/ts-icon-Jz9ioZag.js

@@ -0,0 +1,155 @@
+import { r as registerInstance, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+
+/**
+ * Icon Registry
+ *
+ * A global registry for SVG icon strings. Components look up icons by name
+ * from this registry. Works with any icon library — register SVG strings
+ * directly or use the Lucide helper (`registerLucideIcons`).
+ */
+const registry = new Map();
+/**
+ * Register multiple icons at once.
+ * @param icons - A map of icon name to SVG string.
+ */
+function registerIcons(icons) {
+    for (const [name, svg] of Object.entries(icons)) {
+        registry.set(name, svg);
+    }
+}
+/**
+ * Register a single icon.
+ * @param name - The icon name used in `<ts-icon name="...">`.
+ * @param svg  - The full SVG markup string.
+ */
+function registerIcon(name, svg) {
+    registry.set(name, svg);
+}
+/**
+ * Retrieve an icon's SVG string by name.
+ * @returns The SVG string, or `undefined` if the icon is not registered.
+ */
+function getIcon(name) {
+    return registry.get(name);
+}
+/**
+ * List all registered icon names.
+ */
+function getRegisteredIconNames() {
+    return Array.from(registry.keys());
+}
+
+const iconCss = () => `:host{display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;--ts-icon-size:1em;--ts-icon-color:currentColor;width:var(--ts-icon-size);height:var(--ts-icon-size);color:var(--ts-icon-color);line-height:0}:host([size="xs"]){--ts-icon-size:12px}:host([size="sm"]){--ts-icon-size:14px}:host([size="md"]){--ts-icon-size:16px}:host([size="lg"]){--ts-icon-size:18px}:host([size="xl"]){--ts-icon-size:20px}::slotted(svg){width:100%;height:100%;fill:currentColor}span{display:contents}span>svg{width:100%;height:100%;fill:none;stroke:currentColor}img{width:100%;height:100%}`;
+
+/** Cached reference to the Lucide icons map — loaded lazily on first use. */
+let lucideCache = null;
+/**
+ * Converts a PascalCase or kebab-case icon name to the PascalCase key used by Lucide.
+ * e.g. "search" → "Search", "arrow-left" → "ArrowLeft"
+ */
+function toLucideKey(name) {
+    return name
+        .split('-')
+        .map((part) => part.charAt(0).toUpperCase() + part.slice(1))
+        .join('');
+}
+/**
+ * Renders a Lucide icon node array to an SVG string.
+ */
+function renderLucideSvg(nodes) {
+    const children = nodes
+        .map(([tag, attrs]) => {
+        const attrStr = Object.entries(attrs)
+            .map(([k, v]) => `${k}="${v}"`)
+            .join(' ');
+        return `<${tag} ${attrStr}/>`;
+    })
+        .join('');
+    return `<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${children}</svg>`;
+}
+const TsIcon = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /** Icon name — resolves from custom registry first, then built-in Lucide icons. Accepts kebab-case or PascalCase. */
+    name;
+    /** URL to an external SVG icon file. */
+    src;
+    /** The icon's size. */
+    size = 'md';
+    /** Accessible label. When set, applies role="img" and aria-label. When absent, sets aria-hidden="true". */
+    label;
+    /** CSS color value applied to the icon. */
+    color = 'currentColor';
+    svgContent;
+    nameChanged() {
+        this.loadIcon();
+    }
+    componentWillLoad() {
+        return this.loadIcon();
+    }
+    /**
+     * Checks whether built-in Lucide icons are disabled via data-icons="none"
+     * on any ancestor element.
+     */
+    isBuiltInDisabled() {
+        return this.el.closest('[data-icons="none"]') !== null;
+    }
+    async loadIcon() {
+        if (this.name && !this.src) {
+            // 1. Check custom registry first (allows overrides)
+            const registered = getIcon(this.name);
+            if (registered) {
+                this.svgContent = registered;
+                return;
+            }
+            // 2. If built-in icons are disabled via data-icons="none", stop here
+            if (this.isBuiltInDisabled()) {
+                this.svgContent = undefined;
+                return;
+            }
+            // 3. Lazy-load Lucide icons (only fetched on first name lookup)
+            if (!lucideCache) {
+                try {
+                    // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                    const mod = await import('./lucide-BOxYojS-.js');
+                    lucideCache = mod.icons;
+                }
+                catch {
+                    this.svgContent = undefined;
+                    return;
+                }
+            }
+            const key = toLucideKey(this.name);
+            const lucideIcon = lucideCache[key];
+            if (lucideIcon) {
+                this.svgContent = renderLucideSvg(lucideIcon);
+                return;
+            }
+            this.svgContent = undefined;
+        }
+        else {
+            this.svgContent = undefined;
+        }
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const hasLabel = !!this.label;
+        return (h(Host, { key: 'f1a6c10915bf60ee50be384b8b879a73a1bf73e7', class: {
+                'ts-icon': true,
+                [`ts-icon--${this.size}`]: true,
+            }, role: hasLabel ? 'img' : undefined, "aria-label": hasLabel ? this.label : undefined, "aria-hidden": hasLabel ? undefined : 'true', style: { '--ts-icon-color': this.color } }, this.src ? (h("img", { src: this.src, alt: "", part: "img" })) : this.svgContent ? (h("span", { part: "svg", innerHTML: this.svgContent })) : (h("slot", null))));
+    }
+    static get watchers() { return {
+        "name": [{
+                "nameChanged": 0
+            }]
+    }; }
+};
+TsIcon.style = iconCss();
+
+export { TsIcon as T, registerIcon as a, getRegisteredIconNames as b, getIcon as g, registerIcons as r };
+//# sourceMappingURL=ts-icon-Jz9ioZag.js.map
+
+//# sourceMappingURL=ts-icon-Jz9ioZag.js.map

package/dist/esm/ts-icon-Jz9ioZag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-icon-Jz9ioZag.js","sources":["src/components/icon/icon-registry.ts","src/components/icon/icon.css?tag=ts-icon&encapsulation=shadow","src/components/icon/icon.tsx"],"sourcesContent":["/**\n * Icon Registry\n *\n * A global registry for SVG icon strings. Components look up icons by name\n * from this registry. Works with any icon library — register SVG strings\n * directly or use the Lucide helper (`registerLucideIcons`).\n */\n\nconst registry = new Map<string, string>();\n\n/**\n * Register multiple icons at once.\n * @param icons - A map of icon name to SVG string.\n */\nexport function registerIcons(icons: Record<string, string>): void {\n  for (const [name, svg] of Object.entries(icons)) {\n    registry.set(name, svg);\n  }\n}\n\n/**\n * Register a single icon.\n * @param name - The icon name used in `<ts-icon name=\"...\">`.\n * @param svg  - The full SVG markup string.\n */\nexport function registerIcon(name: string, svg: string): void {\n  registry.set(name, svg);\n}\n\n/**\n * Retrieve an icon's SVG string by name.\n * @returns The SVG string, or `undefined` if the icon is not registered.\n */\nexport function getIcon(name: string): string | undefined {\n  return registry.get(name);\n}\n\n/**\n * List all registered icon names.\n */\nexport function getRegisteredIconNames(): string[] {\n  return Array.from(registry.keys());\n}\n","/* ==========================================================================\n   ts-icon — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-icon-size    Width & height of the icon\n     --ts-icon-color   Fill / stroke color\n   ========================================================================== */\n\n:host {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  vertical-align: middle;\n\n  --ts-icon-size: 1em;\n  --ts-icon-color: currentColor;\n\n  width: var(--ts-icon-size);\n  height: var(--ts-icon-size);\n  color: var(--ts-icon-color);\n  line-height: 0;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"xs\"]) { --ts-icon-size: 12px; }\n:host([size=\"sm\"]) { --ts-icon-size: 14px; }\n:host([size=\"md\"]) { --ts-icon-size: 16px; }\n:host([size=\"lg\"]) { --ts-icon-size: 18px; }\n:host([size=\"xl\"]) { --ts-icon-size: 20px; }\n\n/* ---- Slotted SVG ---- */\n::slotted(svg) {\n  width: 100%;\n  height: 100%;\n  fill: currentColor;\n}\n\n/* ---- Registry SVG ---- */\nspan {\n  display: contents;\n}\n\nspan > svg {\n  width: 100%;\n  height: 100%;\n  fill: none;\n  stroke: currentColor;\n}\n\n/* ---- External image ---- */\nimg {\n  width: 100%;\n  height: 100%;\n}\n","import { Component, Prop, h, Host, Element, Watch, State } from '@stencil/core';\nimport type { TsSize } from '../../types';\nimport { getIcon } from './icon-registry';\n\ntype LucideNode = [string, Record<string, string>][];\n\n/** Cached reference to the Lucide icons map — loaded lazily on first use. */\nlet lucideCache: Record<string, LucideNode> | null = null;\n\n/**\n * Converts a PascalCase or kebab-case icon name to the PascalCase key used by Lucide.\n * e.g. \"search\" → \"Search\", \"arrow-left\" → \"ArrowLeft\"\n */\nfunction toLucideKey(name: string): string {\n  return name\n    .split('-')\n    .map((part: string) => part.charAt(0).toUpperCase() + part.slice(1))\n    .join('');\n}\n\n/**\n * Renders a Lucide icon node array to an SVG string.\n */\nfunction renderLucideSvg(nodes: LucideNode): string {\n  const children = nodes\n    .map(([tag, attrs]: [string, Record<string, string>]) => {\n      const attrStr = Object.entries(attrs)\n        .map(([k, v]: [string, string]) => `${k}=\"${v}\"`)\n        .join(' ');\n      return `<${tag} ${attrStr}/>`;\n    })\n    .join('');\n  return `<svg xmlns=\"http://www.w3.org/2000/svg\" width=\"100%\" height=\"100%\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\" stroke-linecap=\"round\" stroke-linejoin=\"round\">${children}</svg>`;\n}\n\n/**\n * @slot - Default slot for inline SVG content.\n *\n * @part img - The img element (when using src prop).\n * @part svg - The container for resolved SVG content (when using name prop).\n */\n@Component({\n  tag: 'ts-icon',\n  styleUrl: 'icon.css',\n  shadow: true,\n})\nexport class TsIcon {\n  @Element() el!: HTMLElement;\n\n  /** Icon name — resolves from custom registry first, then built-in Lucide icons. Accepts kebab-case or PascalCase. */\n  @Prop({ reflect: true }) name?: string;\n\n  /** URL to an external SVG icon file. */\n  @Prop() src?: string;\n\n  /** The icon's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Accessible label. When set, applies role=\"img\" and aria-label. When absent, sets aria-hidden=\"true\". */\n  @Prop() label?: string;\n\n  /** CSS color value applied to the icon. */\n  @Prop({ reflect: true }) color: string = 'currentColor';\n\n  @State() private svgContent?: string;\n\n  @Watch('name')\n  nameChanged(): void {\n    this.loadIcon();\n  }\n\n  componentWillLoad(): void {\n    return this.loadIcon() as unknown as void;\n  }\n\n  /**\n   * Checks whether built-in Lucide icons are disabled via data-icons=\"none\"\n   * on any ancestor element.\n   */\n  private isBuiltInDisabled(): boolean {\n    return this.el.closest('[data-icons=\"none\"]') !== null;\n  }\n\n  private async loadIcon(): Promise<void> {\n    if (this.name && !this.src) {\n      // 1. Check custom registry first (allows overrides)\n      const registered = getIcon(this.name);\n      if (registered) {\n        this.svgContent = registered;\n        return;\n      }\n\n      // 2. If built-in icons are disabled via data-icons=\"none\", stop here\n      if (this.isBuiltInDisabled()) {\n        this.svgContent = undefined;\n        return;\n      }\n\n      // 3. Lazy-load Lucide icons (only fetched on first name lookup)\n      if (!lucideCache) {\n        try {\n          // eslint-disable-next-line @typescript-eslint/no-explicit-any\n          const mod: { icons: Record<string, LucideNode> } = await import('lucide') as any;\n          lucideCache = mod.icons;\n        } catch {\n          this.svgContent = undefined;\n          return;\n        }\n      }\n\n      const key = toLucideKey(this.name);\n      const lucideIcon = lucideCache[key];\n      if (lucideIcon) {\n        this.svgContent = renderLucideSvg(lucideIcon);\n        return;\n      }\n\n      this.svgContent = undefined;\n    } else {\n      this.svgContent = undefined;\n    }\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const hasLabel = !!this.label;\n\n    return (\n      <Host\n        class={{\n          'ts-icon': true,\n          [`ts-icon--${this.size}`]: true,\n        }}\n        role={hasLabel ? 'img' : undefined}\n        aria-label={hasLabel ? this.label : undefined}\n        aria-hidden={hasLabel ? undefined : 'true'}\n        style={{ '--ts-icon-color': this.color }}\n      >\n        {this.src ? (\n          <img src={this.src} alt=\"\" part=\"img\" />\n        ) : this.svgContent ? (\n          <span part=\"svg\" innerHTML={this.svgContent}></span>\n        ) : (\n          <slot />\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}

package/dist/esm/ts-icon.entry.js

@@ -0,0 +1,5 @@
+export { T as ts_icon } from './ts-icon-Jz9ioZag.js';
+import './index-V8-ENixA.js';
+//# sourceMappingURL=ts-icon.entry.js.map
+
+//# sourceMappingURL=ts-icon.entry.js.map

package/dist/esm/ts-icon.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-icon.entry.js","sources":[],"sourcesContent":[],"names":[],"mappings":";"}

package/dist/esm/ts-input.entry.js

@@ -0,0 +1,128 @@
+import { r as registerInstance, c as createEvent, a as getElement, h, H as Host } from './index-V8-ENixA.js';
+import { g as generateId } from './aria-lpqZSiIf.js';
+
+const inputCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-input-bg:var(--ts-color-neutral-50);--ts-input-color:var(--ts-color-text-primary);--ts-input-border-color:var(--ts-color-border-default);--ts-input-radius:var(--ts-radius-md);--ts-input-focus-ring:var(--ts-focus-ring)}.input__label{display:block;margin-bottom:var(--ts-spacing-1);font-size:var(--ts-font-size-sm);font-weight:var(--ts-font-weight-medium);color:var(--ts-color-text-secondary);line-height:var(--ts-line-height-normal)}.input__required{color:var(--ts-color-danger-500)}.input__wrapper{display:flex;align-items:center;gap:var(--ts-spacing-2);border:1px solid var(--ts-input-border-color);border-radius:var(--ts-input-radius);background-color:var(--ts-input-bg);box-shadow:none;transition:border-color var(--ts-transition-fast),     box-shadow var(--ts-transition-fast),     background-color var(--ts-transition-fast);overflow:hidden}.input__wrapper--focused{border-color:var(--ts-color-primary-500);box-shadow:var(--ts-input-focus-ring)}.input__wrapper--error{border-color:var(--ts-color-danger-500)}.input__wrapper--error.input__wrapper--focused{box-shadow:0 0 0 3px var(--ts-color-focus-ring-danger)}.input__wrapper--disabled{background-color:var(--ts-color-bg-disabled);opacity:0.6;cursor:not-allowed}.input__native{flex:1;border:none;outline:none;background:transparent;font-family:inherit;color:var(--ts-input-color);width:100%;min-width:0}.input__native::placeholder{color:var(--ts-color-text-tertiary)}.input__native:disabled{cursor:not-allowed}:host([size="sm"]) .input__wrapper{border-radius:var(--ts-radius-sm)}:host([size="sm"]) .input__native{padding:var(--ts-spacing-1) var(--ts-spacing-2);font-size:var(--ts-font-size-sm)}:host([size="md"]) .input__native{padding:var(--ts-spacing-2) var(--ts-spacing-3);font-size:var(--ts-font-size-md)}:host([size="lg"]) .input__native{padding:var(--ts-spacing-3) var(--ts-spacing-4);font-size:var(--ts-font-size-lg)}:host([size="xl"]) .input__wrapper{border-radius:var(--ts-radius-lg)}:host([size="xl"]) .input__native{padding:var(--ts-spacing-4) var(--ts-spacing-5);font-size:var(--ts-font-size-xl)}.input__prefix,.input__suffix{display:inline-flex;align-items:center;color:var(--ts-color-text-tertiary)}.input__prefix{padding-inline-start:var(--ts-spacing-3)}.input__suffix{padding-inline-end:var(--ts-spacing-3)}.input__prefix:empty,.input__suffix:empty{display:none}.input__help,.input__error{margin-top:var(--ts-spacing-1);font-size:var(--ts-font-size-xs);line-height:var(--ts-line-height-normal)}.input__help{color:var(--ts-color-text-tertiary)}.input__error{color:var(--ts-color-danger-600);font-weight:var(--ts-font-weight-medium)}`;
+
+const TsInput = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+        this.tsInput = createEvent(this, "tsInput");
+        this.tsChange = createEvent(this, "tsChange");
+        this.tsFocus = createEvent(this, "tsFocus");
+        this.tsBlur = createEvent(this, "tsBlur");
+        this.tsValidate = createEvent(this, "tsValidate");
+    }
+    get hostEl() { return getElement(this); }
+    inputEl;
+    inputId = generateId('ts-input');
+    /** The input's value. */
+    value = '';
+    /** The input type. */
+    type = 'text';
+    /** The input's size. */
+    size = 'md';
+    /** Label text displayed above the input. */
+    label;
+    /** Placeholder text. */
+    placeholder;
+    /** Help text displayed below the input. */
+    helpText;
+    /** Renders the input in an error state with an error message. */
+    error;
+    /** Makes the input required. */
+    required = false;
+    /** Renders the input as disabled. */
+    disabled = false;
+    /** Renders the input as readonly. */
+    readonly = false;
+    /** Maximum character length. */
+    maxlength;
+    /** Minimum character length. */
+    minlength;
+    /** Pattern for validation (regex string). */
+    pattern;
+    /** Autocomplete attribute. */
+    autocomplete;
+    /** Name attribute for form submission. */
+    name;
+    /** Whether the input is currently focused. */
+    hasFocus = false;
+    /** Emitted when the value changes (on input). */
+    tsInput;
+    /** Emitted when the value changes (on blur / commit). */
+    tsChange;
+    /** Emitted when the input gains focus. */
+    tsFocus;
+    /** Emitted when the input loses focus. */
+    tsBlur;
+    /** Emitted on validation. */
+    tsValidate;
+    handleValueChange(newValue, oldValue) {
+        if (newValue !== oldValue && this.inputEl) {
+            this.inputEl.value = newValue;
+        }
+    }
+    /** Programmatically focus the input. */
+    async setFocus() {
+        this.inputEl?.focus();
+    }
+    /** Programmatically select the input text. */
+    async selectText() {
+        this.inputEl?.select();
+    }
+    handleInput = (event) => {
+        const target = event.target;
+        const previousValue = this.value;
+        this.value = target.value;
+        this.tsInput.emit({ value: this.value, previousValue });
+    };
+    handleChange = () => {
+        this.tsChange.emit({ value: this.value, previousValue: this.value });
+        // Run native validation
+        if (this.inputEl) {
+            const valid = this.inputEl.checkValidity();
+            this.tsValidate.emit({
+                valid,
+                message: this.inputEl.validationMessage,
+            });
+        }
+    };
+    handleFocus = () => {
+        this.hasFocus = true;
+        this.tsFocus.emit();
+    };
+    handleBlur = () => {
+        this.hasFocus = false;
+        this.tsBlur.emit();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const hasError = !!this.error;
+        const labelId = `${this.inputId}-label`;
+        const helpId = `${this.inputId}-help`;
+        const errorId = `${this.inputId}-error`;
+        return (h(Host, { key: 'dad72942d32c6df8756d8c42b238364799a9df83', class: {
+                'ts-input': true,
+                [`ts-input--${this.size}`]: true,
+                'ts-input--focused': this.hasFocus,
+                'ts-input--disabled': this.disabled,
+                'ts-input--error': hasError,
+            } }, this.label && (h("label", { key: 'a012025c350bd6f593d19477793263b79a68a4f7', class: "input__label", part: "label", id: labelId, htmlFor: this.inputId }, this.label, this.required && h("span", { key: '71316213839857560e4ed37950985196d17242e4', class: "input__required", "aria-hidden": "true" }, " *"))), h("div", { key: '098dd8b4dcaadf87798307b14c2c5def6fc4359e', class: {
+                'input__wrapper': true,
+                'input__wrapper--focused': this.hasFocus,
+                'input__wrapper--error': hasError,
+                'input__wrapper--disabled': this.disabled,
+            }, part: "base" }, h("span", { key: 'c2b7252cde16f5a08ca6e4beeb88fb9e4a48fc32', class: "input__prefix", part: "prefix" }, h("slot", { key: 'adf46d466d45c9937406846ed3762b0ed41a04db', name: "prefix" })), h("input", { key: 'e0649a147ae0ef54e497443f0cd9e607b87a0ffb', ref: (el) => (this.inputEl = el), id: this.inputId, class: "input__native", part: "input", type: this.type, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, required: this.required, maxlength: this.maxlength, minlength: this.minlength, pattern: this.pattern, autoComplete: this.autocomplete, name: this.name, "aria-labelledby": this.label ? labelId : undefined, "aria-describedby": hasError ? errorId : this.helpText ? helpId : undefined, "aria-invalid": hasError ? 'true' : undefined, "aria-required": this.required ? 'true' : undefined, onInput: this.handleInput, onChange: this.handleChange, onFocus: this.handleFocus, onBlur: this.handleBlur }), h("span", { key: 'bec3bfcd47130f240d609f461f74140a970fa7cb', class: "input__suffix", part: "suffix" }, h("slot", { key: '1ddd5c810ab5542a019a842a4bb3c725877ac1b0', name: "suffix" }))), hasError && (h("div", { key: '0e9e25e65ced8ee9ddf5091aa8e32408a6489f17', class: "input__error", part: "error-text", id: errorId, role: "alert" }, this.error)), !hasError && this.helpText && (h("div", { key: 'b28ff0b6e908edd201e17b4da927685f2fa77943', class: "input__help", part: "help-text", id: helpId }, this.helpText))));
+    }
+    static get watchers() { return {
+        "value": [{
+                "handleValueChange": 0
+            }]
+    }; }
+};
+TsInput.style = inputCss();
+
+export { TsInput as ts_input };
+//# sourceMappingURL=ts-input.entry.js.map
+
+//# sourceMappingURL=ts-input.entry.js.map

package/dist/esm/ts-input.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ts-input.entry.js","sources":["src/components/input/input.css?tag=ts-input&encapsulation=shadow","src/components/input/input.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-input — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-input-bg               Input background\n     --ts-input-color            Input text color\n     --ts-input-border-color     Default border color\n     --ts-input-radius           Border radius\n     --ts-input-focus-ring       Focus ring box-shadow\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-input-bg: var(--ts-color-neutral-50);\n  --ts-input-color: var(--ts-color-text-primary);\n  --ts-input-border-color: var(--ts-color-border-default);\n  --ts-input-radius: var(--ts-radius-md);\n  --ts-input-focus-ring: var(--ts-focus-ring);\n}\n\n/* ---- Label ---- */\n.input__label {\n  display: block;\n  margin-bottom: var(--ts-spacing-1);\n  font-size: var(--ts-font-size-sm);\n  font-weight: var(--ts-font-weight-medium);\n  color: var(--ts-color-text-secondary);\n  line-height: var(--ts-line-height-normal);\n}\n\n.input__required {\n  color: var(--ts-color-danger-500);\n}\n\n/* ---- Wrapper ---- */\n.input__wrapper {\n  display: flex;\n  align-items: center;\n  gap: var(--ts-spacing-2);\n  border: 1px solid var(--ts-input-border-color);\n  border-radius: var(--ts-input-radius);\n  background-color: var(--ts-input-bg);\n  box-shadow: none;\n  transition:\n    border-color var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast),\n    background-color var(--ts-transition-fast);\n  overflow: hidden;\n}\n\n.input__wrapper--focused {\n  border-color: var(--ts-color-primary-500);\n  box-shadow: var(--ts-input-focus-ring);\n}\n\n.input__wrapper--error {\n  border-color: var(--ts-color-danger-500);\n}\n\n.input__wrapper--error.input__wrapper--focused {\n  box-shadow: 0 0 0 3px var(--ts-color-focus-ring-danger);\n}\n\n.input__wrapper--disabled {\n  background-color: var(--ts-color-bg-disabled);\n  opacity: 0.6;\n  cursor: not-allowed;\n}\n\n/* ---- Native Input ---- */\n.input__native {\n  flex: 1;\n  border: none;\n  outline: none;\n  background: transparent;\n  font-family: inherit;\n  color: var(--ts-input-color);\n  width: 100%;\n  min-width: 0;\n}\n\n.input__native::placeholder {\n  color: var(--ts-color-text-tertiary);\n}\n\n.input__native:disabled {\n  cursor: not-allowed;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) .input__wrapper {\n  border-radius: var(--ts-radius-sm);\n}\n:host([size=\"sm\"]) .input__native {\n  padding: var(--ts-spacing-1) var(--ts-spacing-2);\n  font-size: var(--ts-font-size-sm);\n}\n\n:host([size=\"md\"]) .input__native {\n  padding: var(--ts-spacing-2) var(--ts-spacing-3);\n  font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) .input__native {\n  padding: var(--ts-spacing-3) var(--ts-spacing-4);\n  font-size: var(--ts-font-size-lg);\n}\n\n:host([size=\"xl\"]) .input__wrapper {\n  border-radius: var(--ts-radius-lg);\n}\n:host([size=\"xl\"]) .input__native {\n  padding: var(--ts-spacing-4) var(--ts-spacing-5);\n  font-size: var(--ts-font-size-xl);\n}\n\n/* ---- Prefix / Suffix ---- */\n.input__prefix,\n.input__suffix {\n  display: inline-flex;\n  align-items: center;\n  color: var(--ts-color-text-tertiary);\n}\n\n.input__prefix {\n  padding-inline-start: var(--ts-spacing-3);\n}\n\n.input__suffix {\n  padding-inline-end: var(--ts-spacing-3);\n}\n\n.input__prefix:empty,\n.input__suffix:empty {\n  display: none;\n}\n\n/* ---- Help & Error Text ---- */\n.input__help,\n.input__error {\n  margin-top: var(--ts-spacing-1);\n  font-size: var(--ts-font-size-xs);\n  line-height: var(--ts-line-height-normal);\n}\n\n.input__help {\n  color: var(--ts-color-text-tertiary);\n}\n\n.input__error {\n  color: var(--ts-color-danger-600);\n  font-weight: var(--ts-font-weight-medium);\n}\n","import {\n  Component,\n  Prop,\n  State,\n  Event,\n  Watch,\n  h,\n  Host,\n  Element,\n  Method,\n} from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsChangeEventDetail, TsValidationEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot prefix - Content before the input (e.g., icon or currency symbol).\n * @slot suffix - Content after the input (e.g., icon or clear button).\n * @slot help-text - Help text displayed below the input.\n *\n * @part base - The outer wrapper.\n * @part label - The label element.\n * @part input - The native input element.\n * @part prefix - The prefix slot wrapper.\n * @part suffix - The suffix slot wrapper.\n * @part help-text - The help text wrapper.\n * @part error-text - The error message wrapper.\n */\n@Component({\n  tag: 'ts-input',\n  styleUrl: 'input.css',\n  shadow: true,\n})\nexport class TsInput {\n  @Element() hostEl!: HTMLElement;\n\n  private inputEl?: HTMLInputElement;\n  private inputId = generateId('ts-input');\n\n  /** The input's value. */\n  @Prop({ mutable: true, reflect: true }) value = '';\n\n  /** The input type. */\n  @Prop({ reflect: true }) type:\n    | 'text'\n    | 'email'\n    | 'password'\n    | 'number'\n    | 'tel'\n    | 'url'\n    | 'search' = 'text';\n\n  /** The input's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Label text displayed above the input. */\n  @Prop() label?: string;\n\n  /** Placeholder text. */\n  @Prop() placeholder?: string;\n\n  /** Help text displayed below the input. */\n  @Prop() helpText?: string;\n\n  /** Renders the input in an error state with an error message. */\n  @Prop() error?: string;\n\n  /** Makes the input required. */\n  @Prop({ reflect: true }) required = false;\n\n  /** Renders the input as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Renders the input as readonly. */\n  @Prop({ reflect: true }) readonly = false;\n\n  /** Maximum character length. */\n  @Prop() maxlength?: number;\n\n  /** Minimum character length. */\n  @Prop() minlength?: number;\n\n  /** Pattern for validation (regex string). */\n  @Prop() pattern?: string;\n\n  /** Autocomplete attribute. */\n  @Prop() autocomplete?: string;\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Whether the input is currently focused. */\n  @State() hasFocus = false;\n\n  /** Emitted when the value changes (on input). */\n  @Event({ eventName: 'tsInput' }) tsInput!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the value changes (on blur / commit). */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsChangeEventDetail<string>>;\n\n  /** Emitted when the input gains focus. */\n  @Event({ eventName: 'tsFocus' }) tsFocus!: EventEmitter<void>;\n\n  /** Emitted when the input loses focus. */\n  @Event({ eventName: 'tsBlur' }) tsBlur!: EventEmitter<void>;\n\n  /** Emitted on validation. */\n  @Event({ eventName: 'tsValidate' }) tsValidate!: EventEmitter<TsValidationEventDetail>;\n\n  @Watch('value')\n  handleValueChange(newValue: string, oldValue: string): void {\n    if (newValue !== oldValue && this.inputEl) {\n      this.inputEl.value = newValue;\n    }\n  }\n\n  /** Programmatically focus the input. */\n  @Method()\n  async setFocus(): Promise<void> {\n    this.inputEl?.focus();\n  }\n\n  /** Programmatically select the input text. */\n  @Method()\n  async selectText(): Promise<void> {\n    this.inputEl?.select();\n  }\n\n  private handleInput = (event: Event): void => {\n    const target = event.target as HTMLInputElement;\n    const previousValue = this.value;\n    this.value = target.value;\n    this.tsInput.emit({ value: this.value, previousValue });\n  };\n\n  private handleChange = (): void => {\n    this.tsChange.emit({ value: this.value, previousValue: this.value });\n\n    // Run native validation\n    if (this.inputEl) {\n      const valid = this.inputEl.checkValidity();\n      this.tsValidate.emit({\n        valid,\n        message: this.inputEl.validationMessage,\n      });\n    }\n  };\n\n  private handleFocus = (): void => {\n    this.hasFocus = true;\n    this.tsFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.hasFocus = false;\n    this.tsBlur.emit();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const hasError = !!this.error;\n    const labelId = `${this.inputId}-label`;\n    const helpId = `${this.inputId}-help`;\n    const errorId = `${this.inputId}-error`;\n\n    return (\n      <Host\n        class={{\n          'ts-input': true,\n          [`ts-input--${this.size}`]: true,\n          'ts-input--focused': this.hasFocus,\n          'ts-input--disabled': this.disabled,\n          'ts-input--error': hasError,\n        }}\n      >\n        {this.label && (\n          <label class=\"input__label\" part=\"label\" id={labelId} htmlFor={this.inputId}>\n            {this.label}\n            {this.required && <span class=\"input__required\" aria-hidden=\"true\"> *</span>}\n          </label>\n        )}\n\n        <div\n          class={{\n            'input__wrapper': true,\n            'input__wrapper--focused': this.hasFocus,\n            'input__wrapper--error': hasError,\n            'input__wrapper--disabled': this.disabled,\n          }}\n          part=\"base\"\n        >\n          <span class=\"input__prefix\" part=\"prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <input\n            ref={(el) => (this.inputEl = el)}\n            id={this.inputId}\n            class=\"input__native\"\n            part=\"input\"\n            type={this.type}\n            value={this.value}\n            placeholder={this.placeholder}\n            disabled={this.disabled}\n            readOnly={this.readonly}\n            required={this.required}\n            maxlength={this.maxlength}\n            minlength={this.minlength}\n            pattern={this.pattern}\n            autoComplete={this.autocomplete}\n            name={this.name}\n            aria-labelledby={this.label ? labelId : undefined}\n            aria-describedby={hasError ? errorId : this.helpText ? helpId : undefined}\n            aria-invalid={hasError ? 'true' : undefined}\n            aria-required={this.required ? 'true' : undefined}\n            onInput={this.handleInput}\n            onChange={this.handleChange}\n            onFocus={this.handleFocus}\n            onBlur={this.handleBlur}\n          />\n\n          <span class=\"input__suffix\" part=\"suffix\">\n            <slot name=\"suffix\" />\n          </span>\n        </div>\n\n        {hasError && (\n          <div class=\"input__error\" part=\"error-text\" id={errorId} role=\"alert\">\n            {this.error}\n          </div>\n        )}\n\n        {!hasError && this.helpText && (\n          <div class=\"input__help\" part=\"help-text\" id={helpId}>\n            {this.helpText}\n          </div>\n        )}\n      </Host>\n    );\n  }\n}\n"],"names":[],"mappings":"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"}