@tessera-ui/core 0.4.0

package/dist/cjs/ts-button.cjs.entry.js

@@ -0,0 +1,88 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const buttonCss = () => `:host{display:inline-block;vertical-align:middle;--ts-button-radius:var(--ts-shape-interactive);--ts-button-font-weight:var(--ts-font-weight-medium);--ts-button-focus-ring:var(--ts-focus-ring)}:host([block]){display:block;width:100%}.button__native{display:inline-flex;align-items:center;justify-content:center;gap:var(--ts-spacing-2);width:100%;border:1px solid transparent;border-radius:var(--ts-button-radius);font-family:var(--ts-font-family-base);font-weight:var(--ts-button-font-weight);line-height:var(--ts-line-height-tight);text-decoration:none;cursor:pointer;transition:background-color var(--ts-transition-fast),     border-color var(--ts-transition-fast),     color var(--ts-transition-fast),     box-shadow var(--ts-transition-fast),     opacity var(--ts-transition-fast),     transform var(--ts-transition-fast);position:relative;white-space:nowrap;user-select:none;-webkit-appearance:none;appearance:none;outline:none}.button__native:focus-visible{box-shadow:var(--ts-button-focus-ring)}.button__native:active:not([disabled]):not([aria-disabled="true"]){transform:scale(0.96)}:host([size="xs"]) .button__native{padding:calc(var(--ts-spacing-1) + 1px) var(--ts-spacing-2);font-size:var(--ts-font-size-xs)}:host([size="sm"]) .button__native{padding:calc(var(--ts-spacing-1) + 1px) var(--ts-spacing-3);font-size:var(--ts-font-size-sm)}:host([size="md"]) .button__native{padding:calc(var(--ts-spacing-2) + 1px) var(--ts-spacing-4);font-size:var(--ts-font-size-md)}:host([size="lg"]) .button__native{padding:calc(var(--ts-spacing-3) + 2px) var(--ts-spacing-6);font-size:var(--ts-font-size-lg)}:host([size="xl"]) .button__native{padding:calc(var(--ts-spacing-4) + 2px) var(--ts-spacing-8);font-size:var(--ts-font-size-xl)}:host([appearance="solid"]) .button__native{border-color:transparent}:host([appearance="solid"][variant="primary"]) .button__native{background-color:var(--ts-color-interactive-primary);color:var(--ts-color-text-on-primary)}:host([appearance="solid"][variant="primary"]) .button__native:hover:not([disabled]){background-color:var(--ts-color-interactive-primary-hover)}:host([appearance="solid"][variant="success"]) .button__native{background-color:var(--ts-color-success-600);color:var(--ts-color-text-on-success)}:host([appearance="solid"][variant="success"]) .button__native:hover:not([disabled]){background-color:var(--ts-color-success-500)}:host([appearance="solid"][variant="danger"]) .button__native{background-color:var(--ts-color-interactive-danger);color:var(--ts-color-text-on-danger)}:host([appearance="solid"][variant="danger"]) .button__native:hover:not([disabled]){background-color:var(--ts-color-interactive-danger-hover)}:host([appearance="solid"][variant="warning"]) .button__native{background-color:var(--ts-color-warning-600);color:var(--ts-color-text-on-warning)}:host([appearance="solid"][variant="warning"]) .button__native:hover:not([disabled]){background-color:var(--ts-color-warning-500)}:host([appearance="solid"][variant="neutral"]) .button__native{background-color:var(--ts-color-neutral-800);color:var(--ts-color-text-on-primary)}:host([appearance="solid"][variant="neutral"]) .button__native:hover:not([disabled]){background-color:var(--ts-color-neutral-700)}:host([appearance="solid"][variant="secondary"]) .button__native{background-color:var(--ts-color-neutral-200);color:var(--ts-color-text-primary)}:host([appearance="solid"][variant="secondary"]) .button__native:hover:not([disabled]){background-color:var(--ts-color-neutral-300)}:host([appearance="outline"]) .button__native{background-color:transparent}:host([appearance="outline"][variant="primary"]) .button__native{border-color:var(--ts-color-primary-500);color:var(--ts-color-interactive-primary)}:host([appearance="outline"][variant="primary"]) .button__native:hover:not([disabled]){background-color:var(--ts-color-interactive-primary-subtle)}:host([appearance="outline"][variant="danger"]) .button__native{border-color:var(--ts-color-danger-500);color:var(--ts-color-interactive-danger)}:host([appearance="outline"][variant="danger"]) .button__native:hover:not([disabled]){background-color:var(--ts-color-interactive-danger-subtle)}:host([appearance="outline"][variant="neutral"]) .button__native{border-color:var(--ts-color-border-default);color:var(--ts-color-text-secondary)}:host([appearance="outline"][variant="neutral"]) .button__native:hover:not([disabled]){background-color:var(--ts-color-bg-subtle)}:host([appearance="ghost"]) .button__native{background-color:transparent;border-color:transparent}:host([appearance="ghost"][variant="primary"]) .button__native{color:var(--ts-color-interactive-primary)}:host([appearance="ghost"][variant="primary"]) .button__native:hover:not([disabled]){background-color:var(--ts-color-interactive-primary-subtle);border-color:var(--ts-color-primary-200)}:host([appearance="ghost"][variant="neutral"]) .button__native{color:var(--ts-color-text-secondary)}:host([appearance="ghost"][variant="neutral"]) .button__native:hover:not([disabled]){background-color:var(--ts-color-neutral-100);border-color:var(--ts-color-neutral-200)}:host([appearance="link"]) .button__native{background:none;border:none;padding:0;text-decoration:underline;text-underline-offset:2px}:host([appearance="link"][variant="primary"]) .button__native{color:var(--ts-color-interactive-primary)}:host([appearance="link"]) .button__native:hover:not([disabled]){text-decoration-thickness:2px}:host([disabled]) .button__native,.button__native[disabled]{opacity:0.5;cursor:not-allowed;pointer-events:none}:host([loading]) .button__label,:host([loading]) .button__prefix,:host([loading]) .button__suffix{visibility:hidden}:host([loading]) .button__native{cursor:wait;position:relative}.button__spinner{position:absolute;display:flex;align-items:center;justify-content:center}.button__spinner svg{width:1.2em;height:1.2em;animation:ts-spin 0.8s linear infinite}@keyframes ts-spin{to{transform:rotate(360deg)}}.button__prefix,.button__suffix{display:inline-flex;align-items:center}.button__prefix:empty,.button__suffix:empty{display:none}.button__label{display:inline-flex;align-items:center}`;
+
+const TsButton = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsClick = index.createEvent(this, "tsClick");
+        this.tsFocus = index.createEvent(this, "tsFocus");
+        this.tsBlur = index.createEvent(this, "tsBlur");
+    }
+    get hostEl() { return index.getElement(this); }
+    /** The button's visual variant. */
+    variant = 'primary';
+    /** The button's visual weight / appearance. */
+    appearance = 'solid';
+    /** The button's size. */
+    size = 'md';
+    /** Renders the button in a disabled state. */
+    disabled = false;
+    /** Renders a loading spinner and disables the button. */
+    loading = false;
+    /** Makes the button take the full width of its container. */
+    block = false;
+    /** The type attribute for the native button. */
+    type = 'button';
+    /** An optional href — renders an anchor instead of a button. */
+    href;
+    /** Target attribute when href is set. */
+    target;
+    /** Emitted when the button is clicked (not fired when disabled/loading). */
+    tsClick;
+    /** Emitted when the button receives focus. */
+    tsFocus;
+    /** Emitted when the button loses focus. */
+    tsBlur;
+    handleClick = (event) => {
+        if (this.disabled || this.loading) {
+            event.preventDefault();
+            event.stopPropagation();
+            return;
+        }
+        this.tsClick.emit();
+    };
+    handleFocus = () => {
+        this.tsFocus.emit();
+    };
+    handleBlur = () => {
+        this.tsBlur.emit();
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    renderSpinner() {
+        return (index.h("span", { class: "button__spinner", part: "spinner", "aria-hidden": "true" }, index.h("svg", { viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg" }, index.h("circle", { cx: "12", cy: "12", r: "10", stroke: "currentColor", "stroke-width": "3", "stroke-linecap": "round", "stroke-dasharray": "31.4 31.4" }))));
+    }
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const isLink = !!this.href;
+        const Tag = isLink ? 'a' : 'button';
+        const attrs = isLink
+            ? {
+                href: this.disabled ? undefined : this.href,
+                target: this.target,
+                rel: this.target === '_blank' ? 'noopener noreferrer' : undefined,
+                role: 'button',
+            }
+            : {
+                type: this.type,
+                disabled: this.disabled || this.loading,
+            };
+        return (index.h(index.Host, { key: '235cf7dbe6284358fbdc55c2ce7550d6214336c1', class: {
+                'ts-button': true,
+                [`ts-button--${this.variant}`]: true,
+                [`ts-button--${this.appearance}`]: true,
+                [`ts-button--${this.size}`]: true,
+                'ts-button--disabled': this.disabled,
+                'ts-button--loading': this.loading,
+                'ts-button--block': this.block,
+            } }, index.h(Tag, { key: '23f3665b903ec3c95db788082a0ebcb1e49cceb7', ...attrs, class: "button__native", part: "base", "aria-disabled": this.disabled || this.loading ? 'true' : undefined, "aria-busy": this.loading ? 'true' : undefined, onClick: this.handleClick, onFocus: this.handleFocus, onBlur: this.handleBlur }, this.loading && this.renderSpinner(), index.h("span", { key: 'c08cc2427e4e97787dd6aca934bc90296b528f3e', class: "button__prefix", part: "prefix" }, index.h("slot", { key: 'b78c2bd8685f9ceea5bfe0645b091cdea9cbef99', name: "prefix" })), index.h("span", { key: 'c402094ba85026064f300b90311a84a35a0f1b72', class: "button__label", part: "label" }, index.h("slot", { key: '38801473cf5e03292a66344434ce1fd882e60ca7' })), index.h("span", { key: '559ee29b7ebe3f9746d83d69863454c65e251aba', class: "button__suffix", part: "suffix" }, index.h("slot", { key: '52fd64d18e25367625bbff0e995103245cbdaaa4', name: "suffix" })))));
+    }
+};
+TsButton.style = buttonCss();
+
+exports.ts_button = TsButton;
+//# sourceMappingURL=ts-button.entry.cjs.js.map
+
+//# sourceMappingURL=ts-button.cjs.entry.js.map

package/dist/cjs/ts-button.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-button.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["src/components/button/button.css?tag=ts-button&encapsulation=shadow","src/components/button/button.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-button — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-button-radius         Border radius\n     --ts-button-font-weight    Label font weight\n     --ts-button-focus-ring     Focus ring box-shadow\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  vertical-align: middle;\n\n  --ts-button-radius: var(--ts-shape-interactive);\n  --ts-button-font-weight: var(--ts-font-weight-medium);\n  --ts-button-focus-ring: var(--ts-focus-ring);\n}\n\n:host([block]) {\n  display: block;\n  width: 100%;\n}\n\n/* ---- Base native element ---- */\n.button__native {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  gap: var(--ts-spacing-2);\n  width: 100%;\n  border: 1px solid transparent;\n  border-radius: var(--ts-button-radius);\n  font-family: var(--ts-font-family-base);\n  font-weight: var(--ts-button-font-weight);\n  line-height: var(--ts-line-height-tight);\n  text-decoration: none;\n  cursor: pointer;\n  transition:\n    background-color var(--ts-transition-fast),\n    border-color var(--ts-transition-fast),\n    color var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast),\n    opacity var(--ts-transition-fast),\n    transform var(--ts-transition-fast);\n  position: relative;\n  white-space: nowrap;\n  user-select: none;\n  -webkit-appearance: none;\n  appearance: none;\n  outline: none;\n}\n\n/* ---- Focus visible ---- */\n.button__native:focus-visible {\n  box-shadow: var(--ts-button-focus-ring);\n}\n\n/* ---- Active press (M3 bouncier) ---- */\n.button__native:active:not([disabled]):not([aria-disabled=\"true\"]) {\n  transform: scale(0.96);\n}\n\n/* ---- Sizes ---- */\n:host([size=\"xs\"]) .button__native {\n  padding: calc(var(--ts-spacing-1) + 1px) var(--ts-spacing-2);\n  font-size: var(--ts-font-size-xs);\n}\n\n:host([size=\"sm\"]) .button__native {\n  padding: calc(var(--ts-spacing-1) + 1px) var(--ts-spacing-3);\n  font-size: var(--ts-font-size-sm);\n}\n\n:host([size=\"md\"]) .button__native {\n  padding: calc(var(--ts-spacing-2) + 1px) var(--ts-spacing-4);\n  font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) .button__native {\n  padding: calc(var(--ts-spacing-3) + 2px) var(--ts-spacing-6);\n  font-size: var(--ts-font-size-lg);\n}\n\n:host([size=\"xl\"]) .button__native {\n  padding: calc(var(--ts-spacing-4) + 2px) var(--ts-spacing-8);\n  font-size: var(--ts-font-size-xl);\n}\n\n/* ---- Solid Appearance ---- */\n:host([appearance=\"solid\"]) .button__native {\n  border-color: transparent;\n}\n:host([appearance=\"solid\"][variant=\"primary\"]) .button__native {\n  background-color: var(--ts-color-interactive-primary);\n  color: var(--ts-color-text-on-primary);\n}\n:host([appearance=\"solid\"][variant=\"primary\"]) .button__native:hover:not([disabled]) {\n  background-color: var(--ts-color-interactive-primary-hover);\n}\n\n:host([appearance=\"solid\"][variant=\"success\"]) .button__native {\n  background-color: var(--ts-color-success-600);\n  color: var(--ts-color-text-on-success);\n}\n:host([appearance=\"solid\"][variant=\"success\"]) .button__native:hover:not([disabled]) {\n  background-color: var(--ts-color-success-500);\n}\n\n:host([appearance=\"solid\"][variant=\"danger\"]) .button__native {\n  background-color: var(--ts-color-interactive-danger);\n  color: var(--ts-color-text-on-danger);\n}\n:host([appearance=\"solid\"][variant=\"danger\"]) .button__native:hover:not([disabled]) {\n  background-color: var(--ts-color-interactive-danger-hover);\n}\n\n:host([appearance=\"solid\"][variant=\"warning\"]) .button__native {\n  background-color: var(--ts-color-warning-600);\n  color: var(--ts-color-text-on-warning);\n}\n:host([appearance=\"solid\"][variant=\"warning\"]) .button__native:hover:not([disabled]) {\n  background-color: var(--ts-color-warning-500);\n}\n\n:host([appearance=\"solid\"][variant=\"neutral\"]) .button__native {\n  background-color: var(--ts-color-neutral-800);\n  color: var(--ts-color-text-on-primary);\n}\n:host([appearance=\"solid\"][variant=\"neutral\"]) .button__native:hover:not([disabled]) {\n  background-color: var(--ts-color-neutral-700);\n}\n\n:host([appearance=\"solid\"][variant=\"secondary\"]) .button__native {\n  background-color: var(--ts-color-neutral-200);\n  color: var(--ts-color-text-primary);\n}\n:host([appearance=\"solid\"][variant=\"secondary\"]) .button__native:hover:not([disabled]) {\n  background-color: var(--ts-color-neutral-300);\n}\n\n/* ---- Outline Appearance ---- */\n:host([appearance=\"outline\"]) .button__native {\n  background-color: transparent;\n}\n:host([appearance=\"outline\"][variant=\"primary\"]) .button__native {\n  border-color: var(--ts-color-primary-500);\n  color: var(--ts-color-interactive-primary);\n}\n:host([appearance=\"outline\"][variant=\"primary\"]) .button__native:hover:not([disabled]) {\n  background-color: var(--ts-color-interactive-primary-subtle);\n}\n\n:host([appearance=\"outline\"][variant=\"danger\"]) .button__native {\n  border-color: var(--ts-color-danger-500);\n  color: var(--ts-color-interactive-danger);\n}\n:host([appearance=\"outline\"][variant=\"danger\"]) .button__native:hover:not([disabled]) {\n  background-color: var(--ts-color-interactive-danger-subtle);\n}\n\n:host([appearance=\"outline\"][variant=\"neutral\"]) .button__native {\n  border-color: var(--ts-color-border-default);\n  color: var(--ts-color-text-secondary);\n}\n:host([appearance=\"outline\"][variant=\"neutral\"]) .button__native:hover:not([disabled]) {\n  background-color: var(--ts-color-bg-subtle);\n}\n\n/* ---- Ghost Appearance ---- */\n:host([appearance=\"ghost\"]) .button__native {\n  background-color: transparent;\n  border-color: transparent;\n}\n:host([appearance=\"ghost\"][variant=\"primary\"]) .button__native {\n  color: var(--ts-color-interactive-primary);\n}\n:host([appearance=\"ghost\"][variant=\"primary\"]) .button__native:hover:not([disabled]) {\n  background-color: var(--ts-color-interactive-primary-subtle);\n  border-color: var(--ts-color-primary-200);\n}\n\n:host([appearance=\"ghost\"][variant=\"neutral\"]) .button__native {\n  color: var(--ts-color-text-secondary);\n}\n:host([appearance=\"ghost\"][variant=\"neutral\"]) .button__native:hover:not([disabled]) {\n  background-color: var(--ts-color-neutral-100);\n  border-color: var(--ts-color-neutral-200);\n}\n\n/* ---- Link Appearance ---- */\n:host([appearance=\"link\"]) .button__native {\n  background: none;\n  border: none;\n  padding: 0;\n  text-decoration: underline;\n  text-underline-offset: 2px;\n}\n:host([appearance=\"link\"][variant=\"primary\"]) .button__native {\n  color: var(--ts-color-interactive-primary);\n}\n:host([appearance=\"link\"]) .button__native:hover:not([disabled]) {\n  text-decoration-thickness: 2px;\n}\n\n/* ---- Disabled State ---- */\n:host([disabled]) .button__native,\n.button__native[disabled] {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ---- Loading State ---- */\n:host([loading]) .button__label,\n:host([loading]) .button__prefix,\n:host([loading]) .button__suffix {\n  visibility: hidden;\n}\n\n:host([loading]) .button__native {\n  cursor: wait;\n  position: relative;\n}\n\n/* ---- Spinner ---- */\n.button__spinner {\n  position: absolute;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n}\n\n.button__spinner svg {\n  width: 1.2em;\n  height: 1.2em;\n  animation: ts-spin 0.8s linear infinite;\n}\n\n@keyframes ts-spin {\n  to {\n    transform: rotate(360deg);\n  }\n}\n\n/* ---- Slot wrappers ---- */\n.button__prefix,\n.button__suffix {\n  display: inline-flex;\n  align-items: center;\n}\n\n.button__prefix:empty,\n.button__suffix:empty {\n  display: none;\n}\n\n.button__label {\n  display: inline-flex;\n  align-items: center;\n}\n","import { Component, Prop, Event, h, Host, Element } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsSize, TsVariant, TsAppearance } from '../../types';\n\n/**\n * @slot - Default slot for button label content.\n * @slot prefix - Content before the label (e.g., icon).\n * @slot suffix - Content after the label (e.g., icon).\n *\n * @part base - The native button element.\n * @part label - The label wrapper.\n * @part prefix - The prefix slot wrapper.\n * @part suffix - The suffix slot wrapper.\n * @part spinner - The loading spinner element.\n */\n@Component({\n  tag: 'ts-button',\n  styleUrl: 'button.css',\n  shadow: true,\n})\nexport class TsButton {\n  @Element() hostEl!: HTMLElement;\n\n  /** The button's visual variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'primary';\n\n  /** The button's visual weight / appearance. */\n  @Prop({ reflect: true }) appearance: TsAppearance = 'solid';\n\n  /** The button's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Renders the button in a disabled state. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Renders a loading spinner and disables the button. */\n  @Prop({ reflect: true }) loading = false;\n\n  /** Makes the button take the full width of its container. */\n  @Prop({ reflect: true }) block = false;\n\n  /** The type attribute for the native button. */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /** An optional href — renders an anchor instead of a button. */\n  @Prop() href?: string;\n\n  /** Target attribute when href is set. */\n  @Prop() target?: '_blank' | '_self' | '_parent' | '_top';\n\n  /** Emitted when the button is clicked (not fired when disabled/loading). */\n  @Event({ eventName: 'tsClick' }) tsClick!: EventEmitter<void>;\n\n  /** Emitted when the button receives focus. */\n  @Event({ eventName: 'tsFocus' }) tsFocus!: EventEmitter<void>;\n\n  /** Emitted when the button loses focus. */\n  @Event({ eventName: 'tsBlur' }) tsBlur!: EventEmitter<void>;\n\n  private handleClick = (event: MouseEvent): void => {\n    if (this.disabled || this.loading) {\n      event.preventDefault();\n      event.stopPropagation();\n      return;\n    }\n    this.tsClick.emit();\n  };\n\n  private handleFocus = (): void => {\n    this.tsFocus.emit();\n  };\n\n  private handleBlur = (): void => {\n    this.tsBlur.emit();\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  private renderSpinner() {\n    return (\n      <span class=\"button__spinner\" part=\"spinner\" aria-hidden=\"true\">\n        <svg viewBox=\"0 0 24 24\" fill=\"none\" xmlns=\"http://www.w3.org/2000/svg\">\n          <circle cx=\"12\" cy=\"12\" r=\"10\" stroke=\"currentColor\" stroke-width=\"3\" stroke-linecap=\"round\" stroke-dasharray=\"31.4 31.4\" />\n        </svg>\n      </span>\n    );\n  }\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const isLink = !!this.href;\n    const Tag = isLink ? 'a' : 'button';\n\n    const attrs = isLink\n      ? {\n          href: this.disabled ? undefined : this.href,\n          target: this.target,\n          rel: this.target === '_blank' ? 'noopener noreferrer' : undefined,\n          role: 'button',\n        }\n      : {\n          type: this.type,\n          disabled: this.disabled || this.loading,\n        };\n\n    return (\n      <Host\n        class={{\n          'ts-button': true,\n          [`ts-button--${this.variant}`]: true,\n          [`ts-button--${this.appearance}`]: true,\n          [`ts-button--${this.size}`]: true,\n          'ts-button--disabled': this.disabled,\n          'ts-button--loading': this.loading,\n          'ts-button--block': this.block,\n        }}\n      >\n        <Tag\n          {...attrs}\n          class=\"button__native\"\n          part=\"base\"\n          aria-disabled={this.disabled || this.loading ? 'true' : undefined}\n          aria-busy={this.loading ? 'true' : undefined}\n          onClick={this.handleClick}\n          onFocus={this.handleFocus}\n          onBlur={this.handleBlur}\n        >\n          {this.loading && this.renderSpinner()}\n\n          <span class=\"button__prefix\" part=\"prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <span class=\"button__label\" part=\"label\">\n            <slot />\n          </span>\n\n          <span class=\"button__suffix\" part=\"suffix\">\n            <slot name=\"suffix\" />\n          </span>\n        </Tag>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-card.cjs.entry.js

@@ -0,0 +1,35 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const cardCss = () => `:host{display:block;font-family:var(--ts-font-family-base);--ts-card-bg:var(--ts-color-bg-elevated);--ts-card-radius:var(--ts-shape-container);--ts-card-border-color:var(--ts-color-border-subtle)}.card__base{border-radius:var(--ts-card-radius);background-color:var(--ts-card-bg);border:1px solid transparent;overflow:hidden;transition:box-shadow var(--ts-transition-normal),     transform var(--ts-transition-normal),     border-color var(--ts-transition-normal)}:host([elevation="none"]) .card__base{box-shadow:none}:host([elevation="sm"]) .card__base{box-shadow:var(--ts-shadow-sm)}:host([elevation="md"]) .card__base{box-shadow:var(--ts-shadow-md)}:host([elevation="lg"]) .card__base{box-shadow:var(--ts-shadow-lg)}:host([elevation="xl"]) .card__base{box-shadow:var(--ts-shadow-xl)}:host([bordered]) .card__base{border:1px solid var(--ts-card-border-color)}:host([interactive]){cursor:pointer}:host([interactive]) .card__base:hover{box-shadow:var(--ts-shadow-lg)}:host([interactive]) .card__base:active{box-shadow:var(--ts-shadow-md)}:host([interactive]:focus-visible) .card__base{box-shadow:var(--ts-focus-ring)}.card__media{overflow:hidden}.card__media:empty{display:none}.card__media ::slotted(img){display:block;width:100%;height:auto;object-fit:cover}.card__header{border-bottom:1px solid var(--ts-card-border-color)}.card__header:empty{display:none;border-bottom:none}.card__footer{border-top:1px solid var(--ts-card-border-color)}.card__footer:empty{display:none;border-top:none}:host([padding="none"]) .card__header,:host([padding="none"]) .card__body,:host([padding="none"]) .card__footer{padding:0}:host([padding="sm"]) .card__header,:host([padding="sm"]) .card__body,:host([padding="sm"]) .card__footer{padding:var(--ts-spacing-3)}:host([padding="md"]) .card__header,:host([padding="md"]) .card__body,:host([padding="md"]) .card__footer{padding:var(--ts-spacing-4)}:host([padding="lg"]) .card__header,:host([padding="lg"]) .card__body,:host([padding="lg"]) .card__footer{padding:var(--ts-spacing-6)}`;
+
+const TsCard = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** Elevation level controlling the shadow depth. */
+    elevation = 'sm';
+    /** Makes the card interactive (hover effect, cursor pointer). */
+    interactive = false;
+    /** Border style variant. */
+    bordered = false;
+    /** Padding size for the card body. */
+    padding = 'md';
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (index.h(index.Host, { key: 'df768436768c2a229b760dc2e1ec17eae2822231', class: {
+                'ts-card': true,
+                [`ts-card--elevation-${this.elevation}`]: true,
+                [`ts-card--padding-${this.padding}`]: true,
+                'ts-card--interactive': this.interactive,
+                'ts-card--bordered': this.bordered,
+            }, role: this.interactive ? 'button' : undefined, tabindex: this.interactive ? '0' : undefined }, index.h("div", { key: 'bbbaa65e8096402164f96625b2be3600e49fcdc1', class: "card__base", part: "base" }, index.h("div", { key: 'ad3c8630cdcdf5d4a7ab19c8c41a70f9d63c80fb', class: "card__media", part: "media" }, index.h("slot", { key: '2b7edddbfa16039b41c3ee0b689595a1de50a054', name: "media" })), index.h("div", { key: '6e606c675ba1320106106994e74044af137149ce', class: "card__header", part: "header" }, index.h("slot", { key: '979b30143ea98f5df47272753e0c3a56c17dadb6', name: "header" })), index.h("div", { key: '78edb38cedd9ea7546c8755b9901c03553daf361', class: "card__body", part: "body" }, index.h("slot", { key: '0675cffbc1a040606c071467d00021934ecff188' })), index.h("div", { key: 'f07414c17dc68315cf88e30e509f2736e274e3f2', class: "card__footer", part: "footer" }, index.h("slot", { key: '9a7eae045f925a2f0e4e21c857293ad7bc12ea0c', name: "footer" })))));
+    }
+};
+TsCard.style = cardCss();
+
+exports.ts_card = TsCard;
+//# sourceMappingURL=ts-card.entry.cjs.js.map
+
+//# sourceMappingURL=ts-card.cjs.entry.js.map

package/dist/cjs/ts-card.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-card.cjs.entry.js","mappings":";;;;AAAA,MAAM,OAAO,GAAG,MAAM,CAAC,69DAA69D,CAAC;;MCmBx+D,MAAM,GAAA,MAAA;;;;;IAEQ,SAAS,GAAuC,IAAI;;IAGpD,WAAW,GAAG,KAAK;;IAGnB,QAAQ,GAAG,KAAK;;IAGhB,OAAO,GAAgC,IAAI;;IAGpE,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,SAAS,EAAE,IAAI;AACf,gBAAA,CAAC,sBAAsB,IAAI,CAAC,SAAS,CAAA,CAAE,GAAG,IAAI;AAC9C,gBAAA,CAAC,oBAAoB,IAAI,CAAC,OAAO,CAAA,CAAE,GAAG,IAAI;gBAC1C,sBAAsB,EAAE,IAAI,CAAC,WAAW;gBACxC,mBAAmB,EAAE,IAAI,CAAC,QAAQ;AACnC,aAAA,EACD,IAAI,EAAE,IAAI,CAAC,WAAW,GAAG,QAAQ,GAAG,SAAS,EAC7C,QAAQ,EAAE,IAAI,CAAC,WAAW,GAAG,GAAG,GAAG,SAAS,EAAA,EAE5CD,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EACjCA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,aAAa,EAAC,IAAI,EAAC,OAAO,EAAA,EACnCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,OAAO,EAAA,CAAG,CACjB,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAA,EACrCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,YAAY,EAAC,IAAI,EAAC,MAAM,EAAA,EACjCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACJ,EAENA,OAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,cAAc,EAAC,IAAI,EAAC,QAAQ,EAAA,EACrCA,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,IAAI,EAAC,QAAQ,EAAA,CAAG,CAClB,CACF,CACD;;;;;;;","names":["h","Host"],"sources":["src/components/card/card.css?tag=ts-card&encapsulation=shadow","src/components/card/card.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-card — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-card-bg             Card background\n     --ts-card-radius         Border radius\n     --ts-card-border-color   Border color (when bordered)\n   ========================================================================== */\n\n:host {\n  display: block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-card-bg: var(--ts-color-bg-elevated);\n  --ts-card-radius: var(--ts-shape-container);\n  --ts-card-border-color: var(--ts-color-border-subtle);\n}\n\n.card__base {\n  border-radius: var(--ts-card-radius);\n  background-color: var(--ts-card-bg);\n  border: 1px solid transparent;\n  overflow: hidden;\n  transition:\n    box-shadow var(--ts-transition-normal),\n    transform var(--ts-transition-normal),\n    border-color var(--ts-transition-normal);\n}\n\n/* ---- Elevation ---- */\n:host([elevation=\"none\"]) .card__base { box-shadow: none; }\n:host([elevation=\"sm\"]) .card__base   { box-shadow: var(--ts-shadow-sm); }\n:host([elevation=\"md\"]) .card__base   { box-shadow: var(--ts-shadow-md); }\n:host([elevation=\"lg\"]) .card__base   { box-shadow: var(--ts-shadow-lg); }\n:host([elevation=\"xl\"]) .card__base   { box-shadow: var(--ts-shadow-xl); }\n\n/* ---- Bordered ---- */\n:host([bordered]) .card__base {\n  border: 1px solid var(--ts-card-border-color);\n}\n\n/* ---- Interactive ---- */\n:host([interactive]) {\n  cursor: pointer;\n}\n\n:host([interactive]) .card__base:hover {\n  box-shadow: var(--ts-shadow-lg);\n}\n\n:host([interactive]) .card__base:active {\n  box-shadow: var(--ts-shadow-md);\n}\n\n:host([interactive]:focus-visible) .card__base {\n  box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Sections ---- */\n.card__media {\n  overflow: hidden;\n}\n\n.card__media:empty {\n  display: none;\n}\n\n.card__media ::slotted(img) {\n  display: block;\n  width: 100%;\n  height: auto;\n  object-fit: cover;\n}\n\n.card__header {\n  border-bottom: 1px solid var(--ts-card-border-color);\n}\n\n.card__header:empty {\n  display: none;\n  border-bottom: none;\n}\n\n.card__footer {\n  border-top: 1px solid var(--ts-card-border-color);\n}\n\n.card__footer:empty {\n  display: none;\n  border-top: none;\n}\n\n/* ---- Padding ---- */\n:host([padding=\"none\"]) .card__header,\n:host([padding=\"none\"]) .card__body,\n:host([padding=\"none\"]) .card__footer { padding: 0; }\n\n:host([padding=\"sm\"]) .card__header,\n:host([padding=\"sm\"]) .card__body,\n:host([padding=\"sm\"]) .card__footer { padding: var(--ts-spacing-3); }\n\n:host([padding=\"md\"]) .card__header,\n:host([padding=\"md\"]) .card__body,\n:host([padding=\"md\"]) .card__footer { padding: var(--ts-spacing-4); }\n\n:host([padding=\"lg\"]) .card__header,\n:host([padding=\"lg\"]) .card__body,\n:host([padding=\"lg\"]) .card__footer { padding: var(--ts-spacing-6); }\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for card body content.\n * @slot header - Card header content.\n * @slot footer - Card footer content.\n * @slot media - Media content (image, video) displayed at the top.\n *\n * @part base - The card container.\n * @part header - The header wrapper.\n * @part body - The body wrapper.\n * @part footer - The footer wrapper.\n * @part media - The media wrapper.\n */\n@Component({\n  tag: 'ts-card',\n  styleUrl: 'card.css',\n  shadow: true,\n})\nexport class TsCard {\n  /** Elevation level controlling the shadow depth. */\n  @Prop({ reflect: true }) elevation: 'none' | 'sm' | 'md' | 'lg' | 'xl' = 'sm';\n\n  /** Makes the card interactive (hover effect, cursor pointer). */\n  @Prop({ reflect: true }) interactive = false;\n\n  /** Border style variant. */\n  @Prop({ reflect: true }) bordered = false;\n\n  /** Padding size for the card body. */\n  @Prop({ reflect: true }) padding: 'none' | 'sm' | 'md' | 'lg' = 'md';\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-card': true,\n          [`ts-card--elevation-${this.elevation}`]: true,\n          [`ts-card--padding-${this.padding}`]: true,\n          'ts-card--interactive': this.interactive,\n          'ts-card--bordered': this.bordered,\n        }}\n        role={this.interactive ? 'button' : undefined}\n        tabindex={this.interactive ? '0' : undefined}\n      >\n        <div class=\"card__base\" part=\"base\">\n          <div class=\"card__media\" part=\"media\">\n            <slot name=\"media\" />\n          </div>\n\n          <div class=\"card__header\" part=\"header\">\n            <slot name=\"header\" />\n          </div>\n\n          <div class=\"card__body\" part=\"body\">\n            <slot />\n          </div>\n\n          <div class=\"card__footer\" part=\"footer\">\n            <slot name=\"footer\" />\n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-checkbox.cjs.entry.js

@@ -0,0 +1,68 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+var aria = require('./aria-CeYIvz3U.js');
+
+const checkboxCss = () => `:host{display:inline-block;font-family:var(--ts-font-family-base);--ts-checkbox-size:1.25rem;--ts-checkbox-color:var(--ts-color-interactive-primary);--ts-checkbox-radius:4px;--ts-checkbox-border-color:var(--ts-color-border-default)}.checkbox__base{display:inline-flex;align-items:center;gap:var(--ts-spacing-2);cursor:pointer;outline:none}.checkbox__base:focus-visible .checkbox__control{box-shadow:var(--ts-focus-ring)}.checkbox__control{display:inline-flex;align-items:center;justify-content:center;width:var(--ts-checkbox-size);height:var(--ts-checkbox-size);box-sizing:border-box;border:2px solid var(--ts-checkbox-border-color);border-radius:var(--ts-checkbox-radius);background-color:var(--ts-color-bg-elevated);transition:background-color var(--ts-transition-fast),     border-color var(--ts-transition-fast),     box-shadow var(--ts-transition-fast);flex-shrink:0}:host([checked]) .checkbox__control,:host([indeterminate]) .checkbox__control{background-color:var(--ts-checkbox-color);border-color:var(--ts-checkbox-color);color:var(--ts-color-text-on-primary)}.checkbox__base:hover:not([aria-disabled="true"]) .checkbox__control{border-color:var(--ts-color-primary-500)}:host([error]) .checkbox__control{border-color:var(--ts-color-danger-500)}:host([disabled]) .checkbox__base{opacity:0.5;cursor:not-allowed;pointer-events:none}.checkbox__icon{width:100%;height:100%;transform:scale(1);transition:transform var(--ts-transition-fast)}:host([checked]) .checkbox__icon{animation:none}:host([size="sm"]){--ts-checkbox-size:1rem}:host([size="sm"]) .checkbox__label{font-size:var(--ts-font-size-sm)}:host([size="md"]) .checkbox__label{font-size:var(--ts-font-size-md)}:host([size="lg"]){--ts-checkbox-size:1.5rem}:host([size="lg"]) .checkbox__label{font-size:var(--ts-font-size-lg)}.checkbox__label{color:var(--ts-color-text-primary);line-height:var(--ts-line-height-normal);user-select:none}`;
+
+const TsCheckbox = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsChange = index.createEvent(this, "tsChange");
+    }
+    get hostEl() { return index.getElement(this); }
+    inputId = aria.generateId('ts-checkbox');
+    /** Whether the checkbox is checked. */
+    checked = false;
+    /** Whether the checkbox is in an indeterminate state. */
+    indeterminate = false;
+    /** Renders the checkbox as disabled. */
+    disabled = false;
+    /** The value associated with this checkbox. */
+    value = '';
+    /** Name attribute for form submission. */
+    name;
+    /** Label text. If omitted, use the default slot. */
+    label;
+    /** The checkbox size. */
+    size = 'md';
+    /** Renders the checkbox in an error state. */
+    error = false;
+    /** Emitted when the checked state changes. */
+    tsChange;
+    /** Programmatically toggle the checkbox. */
+    async toggle() {
+        if (!this.disabled) {
+            this.indeterminate = false;
+            this.checked = !this.checked;
+            this.tsChange.emit({ checked: this.checked, value: this.value });
+        }
+    }
+    handleClick = () => {
+        this.toggle();
+    };
+    handleKeydown = (event) => {
+        if (event.key === ' ') {
+            event.preventDefault();
+            this.toggle();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';
+        return (index.h(index.Host, { key: '9fc5e264e8b2491f0634f414ba8b1124e791bd32', class: {
+                'ts-checkbox': true,
+                [`ts-checkbox--${this.size}`]: true,
+                'ts-checkbox--checked': this.checked,
+                'ts-checkbox--indeterminate': this.indeterminate,
+                'ts-checkbox--disabled': this.disabled,
+                'ts-checkbox--error': this.error,
+            } }, index.h("div", { key: '9c5a2c9c28f00effd46caf892e0e91f8ca845bed', class: "checkbox__base", part: "base", role: "checkbox", "aria-checked": ariaChecked, "aria-disabled": this.disabled ? 'true' : undefined, tabindex: this.disabled ? -1 : 0, onClick: this.handleClick, onKeyDown: this.handleKeydown }, index.h("div", { key: '5be7cabec162a5fdbbef10e63b649c81fbd97322', class: "checkbox__control", part: "control" }, this.checked && !this.indeterminate && (index.h("svg", { key: 'e4e4a9e04b8c7bfbbdfd60de8d570823984c7eb4', class: "checkbox__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { key: '3f0e5fbb1fea51bf6b5b79a3909bc43cdee6d0f1', d: "M3.5 8L6.5 11L12.5 5", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round", "stroke-linejoin": "round" }))), this.indeterminate && (index.h("svg", { key: '521bbf1e40987c631ccdafda69e7d8f683b7b994', class: "checkbox__icon", viewBox: "0 0 16 16", fill: "none", "aria-hidden": "true" }, index.h("path", { key: 'd0d14bb0d20ef58997d4c567530f1c369d904b37', d: "M4 8H12", stroke: "currentColor", "stroke-width": "2", "stroke-linecap": "round" })))), index.h("label", { key: 'a939e2911282e988f110fd20c9c0f2fc71a892bd', class: "checkbox__label", part: "label", id: `${this.inputId}-label` }, this.label ? this.label : index.h("slot", null)))));
+    }
+};
+TsCheckbox.style = checkboxCss();
+
+exports.ts_checkbox = TsCheckbox;
+//# sourceMappingURL=ts-checkbox.entry.cjs.js.map
+
+//# sourceMappingURL=ts-checkbox.cjs.entry.js.map

package/dist/cjs/ts-checkbox.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-checkbox.cjs.entry.js","mappings":"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","names":["generateId","h","Host"],"sources":["src/components/checkbox/checkbox.css?tag=ts-checkbox&encapsulation=shadow","src/components/checkbox/checkbox.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-checkbox — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-checkbox-size           Checkbox box size\n     --ts-checkbox-color          Checked background color\n     --ts-checkbox-radius         Border radius\n     --ts-checkbox-border-color   Default border color\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  font-family: var(--ts-font-family-base);\n\n  --ts-checkbox-size: 1.25rem;\n  --ts-checkbox-color: var(--ts-color-interactive-primary);\n  --ts-checkbox-radius: 4px;\n  --ts-checkbox-border-color: var(--ts-color-border-default);\n}\n\n/* ---- Base container ---- */\n.checkbox__base {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ts-spacing-2);\n  cursor: pointer;\n  outline: none;\n}\n\n.checkbox__base:focus-visible .checkbox__control {\n  box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Control box ---- */\n.checkbox__control {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  width: var(--ts-checkbox-size);\n  height: var(--ts-checkbox-size);\n  box-sizing: border-box;\n  border: 2px solid var(--ts-checkbox-border-color);\n  border-radius: var(--ts-checkbox-radius);\n  background-color: var(--ts-color-bg-elevated);\n  transition:\n    background-color var(--ts-transition-fast),\n    border-color var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast);\n  flex-shrink: 0;\n}\n\n/* ---- Checked & indeterminate states ---- */\n:host([checked]) .checkbox__control,\n:host([indeterminate]) .checkbox__control {\n  background-color: var(--ts-checkbox-color);\n  border-color: var(--ts-checkbox-color);\n  color: var(--ts-color-text-on-primary);\n}\n\n/* ---- Hover ---- */\n.checkbox__base:hover:not([aria-disabled=\"true\"]) .checkbox__control {\n  border-color: var(--ts-color-primary-500);\n}\n\n/* ---- Error state ---- */\n:host([error]) .checkbox__control {\n  border-color: var(--ts-color-danger-500);\n}\n\n/* ---- Disabled state ---- */\n:host([disabled]) .checkbox__base {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ---- Checkmark icon ---- */\n.checkbox__icon {\n  width: 100%;\n  height: 100%;\n  transform: scale(1);\n  transition: transform var(--ts-transition-fast);\n}\n\n:host([checked]) .checkbox__icon {\n  animation: none;\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) {\n  --ts-checkbox-size: 1rem;\n}\n\n:host([size=\"sm\"]) .checkbox__label {\n  font-size: var(--ts-font-size-sm);\n}\n\n:host([size=\"md\"]) .checkbox__label {\n  font-size: var(--ts-font-size-md);\n}\n\n:host([size=\"lg\"]) {\n  --ts-checkbox-size: 1.5rem;\n}\n\n:host([size=\"lg\"]) .checkbox__label {\n  font-size: var(--ts-font-size-lg);\n}\n\n/* ---- Label ---- */\n.checkbox__label {\n  color: var(--ts-color-text-primary);\n  line-height: var(--ts-line-height-normal);\n  user-select: none;\n}\n","import { Component, Prop, Event, h, Host, Element, Method } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsCheckboxChangeEventDetail } from '../../types';\nimport { generateId } from '../../utils/aria';\n\n/**\n * @slot - Default slot for the checkbox label.\n *\n * @part base - The checkbox container.\n * @part control - The visual checkbox box.\n * @part label - The label wrapper.\n */\n@Component({\n  tag: 'ts-checkbox',\n  styleUrl: 'checkbox.css',\n  shadow: true,\n})\nexport class TsCheckbox {\n  @Element() hostEl!: HTMLElement;\n\n  private inputId = generateId('ts-checkbox');\n\n  /** Whether the checkbox is checked. */\n  @Prop({ mutable: true, reflect: true }) checked = false;\n\n  /** Whether the checkbox is in an indeterminate state. */\n  @Prop({ mutable: true, reflect: true }) indeterminate = false;\n\n  /** Renders the checkbox as disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** The value associated with this checkbox. */\n  @Prop() value = '';\n\n  /** Name attribute for form submission. */\n  @Prop() name?: string;\n\n  /** Label text. If omitted, use the default slot. */\n  @Prop() label?: string;\n\n  /** The checkbox size. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' = 'md';\n\n  /** Renders the checkbox in an error state. */\n  @Prop({ reflect: true }) error = false;\n\n  /** Emitted when the checked state changes. */\n  @Event({ eventName: 'tsChange' }) tsChange!: EventEmitter<TsCheckboxChangeEventDetail>;\n\n  /** Programmatically toggle the checkbox. */\n  @Method()\n  async toggle(): Promise<void> {\n    if (!this.disabled) {\n      this.indeterminate = false;\n      this.checked = !this.checked;\n      this.tsChange.emit({ checked: this.checked, value: this.value });\n    }\n  }\n\n  private handleClick = (): void => {\n    this.toggle();\n  };\n\n  private handleKeydown = (event: KeyboardEvent): void => {\n    if (event.key === ' ') {\n      event.preventDefault();\n      this.toggle();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const ariaChecked = this.indeterminate ? 'mixed' : this.checked ? 'true' : 'false';\n\n    return (\n      <Host\n        class={{\n          'ts-checkbox': true,\n          [`ts-checkbox--${this.size}`]: true,\n          'ts-checkbox--checked': this.checked,\n          'ts-checkbox--indeterminate': this.indeterminate,\n          'ts-checkbox--disabled': this.disabled,\n          'ts-checkbox--error': this.error,\n        }}\n      >\n        <div\n          class=\"checkbox__base\"\n          part=\"base\"\n          role=\"checkbox\"\n          aria-checked={ariaChecked}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          tabindex={this.disabled ? -1 : 0}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n        >\n          <div class=\"checkbox__control\" part=\"control\">\n            {this.checked && !this.indeterminate && (\n              <svg class=\"checkbox__icon\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n                <path\n                  d=\"M3.5 8L6.5 11L12.5 5\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                  stroke-linejoin=\"round\"\n                />\n              </svg>\n            )}\n            {this.indeterminate && (\n              <svg class=\"checkbox__icon\" viewBox=\"0 0 16 16\" fill=\"none\" aria-hidden=\"true\">\n                <path\n                  d=\"M4 8H12\"\n                  stroke=\"currentColor\"\n                  stroke-width=\"2\"\n                  stroke-linecap=\"round\"\n                />\n              </svg>\n            )}\n          </div>\n\n          <label class=\"checkbox__label\" part=\"label\" id={`${this.inputId}-label`}>\n            {this.label ? this.label : <slot />}\n          </label>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-chip.cjs.entry.js

@@ -0,0 +1,76 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const chipCss = () => `:host{display:inline-block;vertical-align:middle;font-family:var(--ts-font-family-base);--ts-chip-radius:var(--ts-radius-full, 9999px);--ts-chip-height:2rem}.chip__base{display:inline-flex;align-items:center;gap:var(--ts-spacing-1);block-size:var(--ts-chip-height);padding-inline:var(--ts-spacing-3);border-radius:var(--ts-chip-radius);font-size:var(--ts-font-size-sm);font-weight:var(--ts-font-weight-medium);line-height:1;cursor:pointer;user-select:none;border:1px solid transparent;outline:none;transition:background-color var(--ts-transition-fast),     border-color var(--ts-transition-fast),     color var(--ts-transition-fast),     box-shadow var(--ts-transition-fast)}.chip__base:focus-visible{box-shadow:var(--ts-focus-ring)}:host([size="sm"]){--ts-chip-height:1.5rem}:host([size="sm"]) .chip__base{padding-inline:var(--ts-spacing-2);font-size:var(--ts-font-size-xs)}:host([size="lg"]){--ts-chip-height:2.5rem}:host([size="lg"]) .chip__base{padding-inline:var(--ts-spacing-4);font-size:var(--ts-font-size-md)}:host([variant="neutral"]:not([outline])) .chip__base{background-color:var(--ts-color-neutral-200);color:var(--ts-color-text-primary)}:host([variant="neutral"]:not([outline])) .chip__base:hover{background-color:var(--ts-color-neutral-300)}:host([variant="primary"]:not([outline])) .chip__base{background-color:var(--ts-color-primary-100, var(--ts-color-primary-500));color:var(--ts-color-primary-700, var(--ts-color-text-primary))}:host([variant="primary"]:not([outline])) .chip__base:hover{background-color:var(--ts-color-primary-200, var(--ts-color-primary-600))}:host([variant="success"]:not([outline])) .chip__base{background-color:var(--ts-color-success-bg);color:var(--ts-color-success-600)}:host([variant="warning"]:not([outline])) .chip__base{background-color:var(--ts-color-warning-bg);color:var(--ts-color-warning-600)}:host([variant="danger"]:not([outline])) .chip__base{background-color:var(--ts-color-danger-bg);color:var(--ts-color-danger-600)}:host([variant="info"]:not([outline])) .chip__base{background-color:var(--ts-color-info-bg);color:var(--ts-color-info-600)}:host([variant="secondary"]:not([outline])) .chip__base{background-color:var(--ts-color-neutral-100);color:var(--ts-color-text-secondary)}:host([outline]) .chip__base{background-color:transparent}:host([outline][variant="neutral"]) .chip__base{border-color:var(--ts-color-border-strong);color:var(--ts-color-text-secondary)}:host([outline][variant="neutral"]) .chip__base:hover{background-color:var(--ts-color-bg-subtle)}:host([outline][variant="primary"]) .chip__base{border-color:var(--ts-color-primary-500);color:var(--ts-color-primary-600)}:host([outline][variant="primary"]) .chip__base:hover{background-color:var(--ts-color-primary-100, var(--ts-color-interactive-primary-subtle))}:host([outline][variant="danger"]) .chip__base{border-color:var(--ts-color-danger-500);color:var(--ts-color-danger-600)}:host([outline][variant="success"]) .chip__base{border-color:var(--ts-color-success-500, var(--ts-color-success-border));color:var(--ts-color-success-600)}:host([outline][variant="warning"]) .chip__base{border-color:var(--ts-color-warning-500, var(--ts-color-warning-border));color:var(--ts-color-warning-600)}:host([outline][variant="info"]) .chip__base{border-color:var(--ts-color-info-500, var(--ts-color-info-border));color:var(--ts-color-info-600)}:host([selected]) .chip__base{background-color:var(--ts-color-interactive-primary);color:var(--ts-color-text-on-primary);border-color:var(--ts-color-interactive-primary)}:host([selected]) .chip__base:hover{background-color:var(--ts-color-interactive-primary-hover);border-color:var(--ts-color-interactive-primary-hover)}:host([disabled]) .chip__base{opacity:0.5;cursor:not-allowed;pointer-events:none}.chip__prefix{display:inline-flex;align-items:center}.chip__prefix:empty{display:none}.chip__label{display:inline-flex;align-items:center}.chip__remove{display:inline-flex;align-items:center;justify-content:center;inline-size:1.1em;block-size:1.1em;border:none;border-radius:50%;background:transparent;color:currentColor;opacity:0.6;cursor:pointer;font-size:0.75em;padding:0;margin-inline-start:var(--ts-spacing-1);line-height:1;transition:opacity var(--ts-transition-fast)}.chip__remove:hover{opacity:1}.chip__remove:focus-visible{box-shadow:var(--ts-focus-ring);opacity:1}.chip__remove:disabled{cursor:not-allowed;pointer-events:none}`;
+
+const TsChip = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+        this.tsRemove = index.createEvent(this, "tsRemove");
+        this.tsClick = index.createEvent(this, "tsClick");
+    }
+    /** The chip's semantic variant. */
+    variant = 'neutral';
+    /** The chip's size. */
+    size = 'md';
+    /** Whether the chip shows a remove button. */
+    removable = false;
+    /** Whether the chip is disabled. */
+    disabled = false;
+    /** Whether the chip is selected. */
+    selected = false;
+    /** Whether to render as outline style. */
+    outline = false;
+    /** Emitted when the remove button is clicked. */
+    tsRemove;
+    /** Emitted when the chip body is clicked. */
+    tsClick;
+    handleClick = () => {
+        if (this.disabled)
+            return;
+        this.tsClick.emit();
+    };
+    handleRemove = (event) => {
+        event.stopPropagation();
+        if (this.disabled)
+            return;
+        this.tsRemove.emit();
+    };
+    handleKeydown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            this.tsClick.emit();
+        }
+    };
+    handleRemoveKeydown = (event) => {
+        if (this.disabled)
+            return;
+        if (event.key === 'Enter' || event.key === ' ') {
+            event.preventDefault();
+            event.stopPropagation();
+            this.tsRemove.emit();
+        }
+    };
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        const isInteractive = !this.disabled;
+        return (index.h(index.Host, { key: 'cf6fed27509592a4105f794976e8995ca03ddecd', class: {
+                'ts-chip': true,
+                [`ts-chip--${this.variant}`]: true,
+                [`ts-chip--${this.size}`]: true,
+                'ts-chip--selected': this.selected,
+                'ts-chip--outline': this.outline,
+                'ts-chip--disabled': this.disabled,
+                'ts-chip--removable': this.removable,
+            } }, index.h("span", { key: '355bf33f71eb0761f766a5363bc317066dfc1b5c', class: "chip__base", part: "base", role: "button", tabindex: isInteractive ? '0' : undefined, "aria-disabled": this.disabled ? 'true' : undefined, "aria-pressed": this.selected ? 'true' : undefined, onClick: this.handleClick, onKeyDown: this.handleKeydown }, index.h("span", { key: '8476fe8599f535022b2afc7c6229bd92ea3549ff', class: "chip__prefix", part: "prefix" }, index.h("slot", { key: '2379133e14d192afd474e06ce3a2140a6a7dcfa7', name: "prefix" })), index.h("span", { key: '8a1053c6315f717a12fc61f0dc3ffeb458a6fbb2', class: "chip__label", part: "label" }, index.h("slot", { key: '3d46aefd8fd7a03d6bd3d21d5679a6b90361b1ed' })), this.removable && (index.h("button", { key: '41de0966096540a5f9f29168a181a353661ee934', class: "chip__remove", part: "remove", type: "button", "aria-label": "Remove", disabled: this.disabled, onClick: this.handleRemove, onKeyDown: this.handleRemoveKeydown }, "\\u2715")))));
+    }
+};
+TsChip.style = chipCss();
+
+exports.ts_chip = TsChip;
+//# sourceMappingURL=ts-chip.entry.cjs.js.map
+
+//# sourceMappingURL=ts-chip.cjs.entry.js.map

package/dist/cjs/ts-chip.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-chip.cjs.entry.js","mappings":"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","names":["h","Host"],"sources":["src/components/chip/chip.css?tag=ts-chip&encapsulation=shadow","src/components/chip/chip.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-chip — Shadow DOM Scoped Styles\n\n   Component tokens (Tier 3):\n     --ts-chip-radius     Border radius (pill shape)\n     --ts-chip-height     Chip height per size\n   ========================================================================== */\n\n:host {\n  display: inline-block;\n  vertical-align: middle;\n  font-family: var(--ts-font-family-base);\n\n  --ts-chip-radius: var(--ts-radius-full, 9999px);\n  --ts-chip-height: 2rem;\n}\n\n/* ---- Base ---- */\n.chip__base {\n  display: inline-flex;\n  align-items: center;\n  gap: var(--ts-spacing-1);\n  block-size: var(--ts-chip-height);\n  padding-inline: var(--ts-spacing-3);\n  border-radius: var(--ts-chip-radius);\n  font-size: var(--ts-font-size-sm);\n  font-weight: var(--ts-font-weight-medium);\n  line-height: 1;\n  cursor: pointer;\n  user-select: none;\n  border: 1px solid transparent;\n  outline: none;\n  transition:\n    background-color var(--ts-transition-fast),\n    border-color var(--ts-transition-fast),\n    color var(--ts-transition-fast),\n    box-shadow var(--ts-transition-fast);\n}\n\n.chip__base:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) {\n  --ts-chip-height: 1.5rem;\n}\n:host([size=\"sm\"]) .chip__base {\n  padding-inline: var(--ts-spacing-2);\n  font-size: var(--ts-font-size-xs);\n}\n\n:host([size=\"lg\"]) {\n  --ts-chip-height: 2.5rem;\n}\n:host([size=\"lg\"]) .chip__base {\n  padding-inline: var(--ts-spacing-4);\n  font-size: var(--ts-font-size-md);\n}\n\n/* ---- Solid Variants ---- */\n:host([variant=\"neutral\"]:not([outline])) .chip__base {\n  background-color: var(--ts-color-neutral-200);\n  color: var(--ts-color-text-primary);\n}\n:host([variant=\"neutral\"]:not([outline])) .chip__base:hover {\n  background-color: var(--ts-color-neutral-300);\n}\n\n:host([variant=\"primary\"]:not([outline])) .chip__base {\n  background-color: var(--ts-color-primary-100, var(--ts-color-primary-500));\n  color: var(--ts-color-primary-700, var(--ts-color-text-primary));\n}\n:host([variant=\"primary\"]:not([outline])) .chip__base:hover {\n  background-color: var(--ts-color-primary-200, var(--ts-color-primary-600));\n}\n\n:host([variant=\"success\"]:not([outline])) .chip__base {\n  background-color: var(--ts-color-success-bg);\n  color: var(--ts-color-success-600);\n}\n\n:host([variant=\"warning\"]:not([outline])) .chip__base {\n  background-color: var(--ts-color-warning-bg);\n  color: var(--ts-color-warning-600);\n}\n\n:host([variant=\"danger\"]:not([outline])) .chip__base {\n  background-color: var(--ts-color-danger-bg);\n  color: var(--ts-color-danger-600);\n}\n\n:host([variant=\"info\"]:not([outline])) .chip__base {\n  background-color: var(--ts-color-info-bg);\n  color: var(--ts-color-info-600);\n}\n\n:host([variant=\"secondary\"]:not([outline])) .chip__base {\n  background-color: var(--ts-color-neutral-100);\n  color: var(--ts-color-text-secondary);\n}\n\n/* ---- Outline Variants ---- */\n:host([outline]) .chip__base {\n  background-color: transparent;\n}\n\n:host([outline][variant=\"neutral\"]) .chip__base {\n  border-color: var(--ts-color-border-strong);\n  color: var(--ts-color-text-secondary);\n}\n:host([outline][variant=\"neutral\"]) .chip__base:hover {\n  background-color: var(--ts-color-bg-subtle);\n}\n\n:host([outline][variant=\"primary\"]) .chip__base {\n  border-color: var(--ts-color-primary-500);\n  color: var(--ts-color-primary-600);\n}\n:host([outline][variant=\"primary\"]) .chip__base:hover {\n  background-color: var(--ts-color-primary-100, var(--ts-color-interactive-primary-subtle));\n}\n\n:host([outline][variant=\"danger\"]) .chip__base {\n  border-color: var(--ts-color-danger-500);\n  color: var(--ts-color-danger-600);\n}\n\n:host([outline][variant=\"success\"]) .chip__base {\n  border-color: var(--ts-color-success-500, var(--ts-color-success-border));\n  color: var(--ts-color-success-600);\n}\n\n:host([outline][variant=\"warning\"]) .chip__base {\n  border-color: var(--ts-color-warning-500, var(--ts-color-warning-border));\n  color: var(--ts-color-warning-600);\n}\n\n:host([outline][variant=\"info\"]) .chip__base {\n  border-color: var(--ts-color-info-500, var(--ts-color-info-border));\n  color: var(--ts-color-info-600);\n}\n\n/* ---- Selected state ---- */\n:host([selected]) .chip__base {\n  background-color: var(--ts-color-interactive-primary);\n  color: var(--ts-color-text-on-primary);\n  border-color: var(--ts-color-interactive-primary);\n}\n:host([selected]) .chip__base:hover {\n  background-color: var(--ts-color-interactive-primary-hover);\n  border-color: var(--ts-color-interactive-primary-hover);\n}\n\n/* ---- Disabled ---- */\n:host([disabled]) .chip__base {\n  opacity: 0.5;\n  cursor: not-allowed;\n  pointer-events: none;\n}\n\n/* ---- Prefix ---- */\n.chip__prefix {\n  display: inline-flex;\n  align-items: center;\n}\n\n.chip__prefix:empty {\n  display: none;\n}\n\n/* ---- Label ---- */\n.chip__label {\n  display: inline-flex;\n  align-items: center;\n}\n\n/* ---- Remove button ---- */\n.chip__remove {\n  display: inline-flex;\n  align-items: center;\n  justify-content: center;\n  inline-size: 1.1em;\n  block-size: 1.1em;\n  border: none;\n  border-radius: 50%;\n  background: transparent;\n  color: currentColor;\n  opacity: 0.6;\n  cursor: pointer;\n  font-size: 0.75em;\n  padding: 0;\n  margin-inline-start: var(--ts-spacing-1);\n  line-height: 1;\n  transition: opacity var(--ts-transition-fast);\n}\n\n.chip__remove:hover {\n  opacity: 1;\n}\n\n.chip__remove:focus-visible {\n  box-shadow: var(--ts-focus-ring);\n  opacity: 1;\n}\n\n.chip__remove:disabled {\n  cursor: not-allowed;\n  pointer-events: none;\n}\n","import { Component, Prop, Event, h, Host } from '@stencil/core';\nimport type { EventEmitter } from '@stencil/core';\nimport type { TsVariant, TsSize } from '../../types';\n\n/**\n * @slot - Default slot for chip label.\n * @slot prefix - Icon or content before the label.\n *\n * @part base - The chip container.\n * @part label - The label wrapper.\n * @part prefix - The prefix slot wrapper.\n * @part remove - The remove button.\n */\n@Component({\n  tag: 'ts-chip',\n  styleUrl: 'chip.css',\n  shadow: true,\n})\nexport class TsChip {\n  /** The chip's semantic variant. */\n  @Prop({ reflect: true }) variant: TsVariant = 'neutral';\n\n  /** The chip's size. */\n  @Prop({ reflect: true }) size: TsSize = 'md';\n\n  /** Whether the chip shows a remove button. */\n  @Prop({ reflect: true }) removable = false;\n\n  /** Whether the chip is disabled. */\n  @Prop({ reflect: true }) disabled = false;\n\n  /** Whether the chip is selected. */\n  @Prop({ reflect: true }) selected = false;\n\n  /** Whether to render as outline style. */\n  @Prop({ reflect: true }) outline = false;\n\n  /** Emitted when the remove button is clicked. */\n  @Event({ eventName: 'tsRemove' }) tsRemove!: EventEmitter<void>;\n\n  /** Emitted when the chip body is clicked. */\n  @Event({ eventName: 'tsClick' }) tsClick!: EventEmitter<void>;\n\n  private handleClick = (): void => {\n    if (this.disabled) return;\n    this.tsClick.emit();\n  };\n\n  private handleRemove = (event: MouseEvent): void => {\n    event.stopPropagation();\n    if (this.disabled) return;\n    this.tsRemove.emit();\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.tsClick.emit();\n    }\n  };\n\n  private handleRemoveKeydown = (event: KeyboardEvent): void => {\n    if (this.disabled) return;\n    if (event.key === 'Enter' || event.key === ' ') {\n      event.preventDefault();\n      event.stopPropagation();\n      this.tsRemove.emit();\n    }\n  };\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    const isInteractive = !this.disabled;\n\n    return (\n      <Host\n        class={{\n          'ts-chip': true,\n          [`ts-chip--${this.variant}`]: true,\n          [`ts-chip--${this.size}`]: true,\n          'ts-chip--selected': this.selected,\n          'ts-chip--outline': this.outline,\n          'ts-chip--disabled': this.disabled,\n          'ts-chip--removable': this.removable,\n        }}\n      >\n        <span\n          class=\"chip__base\"\n          part=\"base\"\n          role=\"button\"\n          tabindex={isInteractive ? '0' : undefined}\n          aria-disabled={this.disabled ? 'true' : undefined}\n          aria-pressed={this.selected ? 'true' : undefined}\n          onClick={this.handleClick}\n          onKeyDown={this.handleKeydown}\n        >\n          <span class=\"chip__prefix\" part=\"prefix\">\n            <slot name=\"prefix\" />\n          </span>\n\n          <span class=\"chip__label\" part=\"label\">\n            <slot />\n          </span>\n\n          {this.removable && (\n            <button\n              class=\"chip__remove\"\n              part=\"remove\"\n              type=\"button\"\n              aria-label=\"Remove\"\n              disabled={this.disabled}\n              onClick={this.handleRemove}\n              onKeyDown={this.handleRemoveKeydown}\n            >\n              \\u2715\n            </button>\n          )}\n        </span>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/cjs/ts-container.cjs.entry.js

@@ -0,0 +1,28 @@
+'use strict';
+
+var index = require('./index-Bel_x2OU.js');
+
+const containerCss = () => `:host{display:block;margin-inline:auto;width:100%;box-sizing:border-box;--ts-container-padding:var(--ts-grid-margin)}:host([size="sm"]){max-width:640px}:host([size="md"]){max-width:768px}:host([size="lg"]){max-width:1024px}:host([size="xl"]){max-width:1280px}:host([size="full"]){max-width:100%}:host(:not(.ts-container--no-padding)){padding-inline:var(--ts-container-padding)}:host(.ts-container--no-padding){padding-inline:0}`;
+
+const TsContainer = class {
+    constructor(hostRef) {
+        index.registerInstance(this, hostRef);
+    }
+    /** The maximum width of the container. */
+    size = 'lg';
+    /** Whether to apply horizontal padding. */
+    padding = true;
+    // eslint-disable-next-line @typescript-eslint/explicit-function-return-type
+    render() {
+        return (index.h(index.Host, { key: '45f43cf6088754adc81c04a59249361ee1484d73', class: {
+                'ts-container': true,
+                'ts-container--no-padding': !this.padding,
+            } }, index.h("slot", { key: '1b302d969a21f7c35bfa8e54523df064171fdaa5' })));
+    }
+};
+TsContainer.style = containerCss();
+
+exports.ts_container = TsContainer;
+//# sourceMappingURL=ts-container.entry.cjs.js.map
+
+//# sourceMappingURL=ts-container.cjs.entry.js.map

package/dist/cjs/ts-container.cjs.entry.js.map

@@ -0,0 +1 @@
+{"file":"ts-container.cjs.entry.js","mappings":";;;;AAAA,MAAM,YAAY,GAAG,MAAM,CAAC,2aAA2a,CAAC;;MCY3b,WAAW,GAAA,MAAA;;;;;IAEG,IAAI,GAAuC,IAAI;;IAG/C,OAAO,GAAY,IAAI;;IAGhD,MAAM,GAAA;QACJ,QACEA,OAAA,CAACC,UAAI,EAAA,EAAA,GAAA,EAAA,0CAAA,EACH,KAAK,EAAE;AACL,gBAAA,cAAc,EAAE,IAAI;AACpB,gBAAA,0BAA0B,EAAE,CAAC,IAAI,CAAC,OAAO;AAC1C,aAAA,EAAA,EAEDD,OAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAQ,CACH;;;;;;;","names":["h","Host"],"sources":["src/components/container/container.css?tag=ts-container&encapsulation=shadow","src/components/container/container.tsx"],"sourcesContent":["/* ==========================================================================\n   ts-container — Shadow DOM Scoped Styles\n\n   Centered max-width container with responsive padding.\n\n   Component tokens (Tier 3):\n     --ts-container-padding   Horizontal padding\n   ========================================================================== */\n\n:host {\n  display: block;\n  margin-inline: auto;\n  width: 100%;\n  box-sizing: border-box;\n\n  --ts-container-padding: var(--ts-grid-margin);\n}\n\n/* ---- Sizes ---- */\n:host([size=\"sm\"]) {\n  max-width: 640px;\n}\n\n:host([size=\"md\"]) {\n  max-width: 768px;\n}\n\n:host([size=\"lg\"]) {\n  max-width: 1024px;\n}\n\n:host([size=\"xl\"]) {\n  max-width: 1280px;\n}\n\n:host([size=\"full\"]) {\n  max-width: 100%;\n}\n\n/* ---- Padding ---- */\n:host(:not(.ts-container--no-padding)) {\n  padding-inline: var(--ts-container-padding);\n}\n\n:host(.ts-container--no-padding) {\n  padding-inline: 0;\n}\n","import { Component, Prop, h, Host } from '@stencil/core';\n\n/**\n * @slot - Default slot for container content.\n *\n * @part base - The container element.\n */\n@Component({\n  tag: 'ts-container',\n  styleUrl: 'container.css',\n  shadow: true,\n})\nexport class TsContainer {\n  /** The maximum width of the container. */\n  @Prop({ reflect: true }) size: 'sm' | 'md' | 'lg' | 'xl' | 'full' = 'lg';\n\n  /** Whether to apply horizontal padding. */\n  @Prop({ reflect: true }) padding: boolean = true;\n\n  // eslint-disable-next-line @typescript-eslint/explicit-function-return-type\n  render() {\n    return (\n      <Host\n        class={{\n          'ts-container': true,\n          'ts-container--no-padding': !this.padding,\n        }}\n      >\n        <slot />\n      </Host>\n    );\n  }\n}\n"],"version":3}