le-kit 0.1.11 → 0.1.13

package/dist/core/components/le-stack.js.map

@@ -0,0 +1 @@
+{"file":"le-stack.js","mappings":"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","names":["LeStack","__stencil_proxyCustomElement"],"sources":["src-core/components/le-stack/le-stack.default.css?tag=le-stack&encapsulation=shadow","src-core/components/le-stack/le-stack.tsx"],"sourcesContent":["/**\n * le-stack default styles\n *\n * The component uses inline styles for flex properties to allow\n * dynamic prop-based configuration. This CSS handles theming.\n */\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Base stack container */\n.stack {\n  gap: var(--le-stack-gap, var(--le-space-md));\n}\n\n/* Full width/height variants */\n:host(.full-width) {\n  width: 100%;\n}\n\n:host(.full-height) {\n  height: 100%;\n}\n\n/* Direction-specific defaults */\n:host(.direction-horizontal) .stack {\n  min-height: 0;\n}\n\n:host(.direction-vertical) .stack {\n  min-width: 0;\n}\n","import { Component, Prop, h, Element , Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible stack layout component using CSS flexbox.\n *\n * `le-stack` arranges its children in a row (horizontal) or column (vertical)\n * with configurable spacing, alignment, and wrapping behavior. Perfect for\n * creating responsive layouts.\n *\n * @slot - Default slot for stack items (le-box components recommended)\n *\n * @cssprop --le-stack-gap - Gap between items (defaults to var(--le-space-md))\n *\n * @csspart stack - The main stack container\n *\n * @cmsEditable true\n * @cmsCategory Layout\n */\n@Component({\n  tag: 'le-stack',\n  styleUrl: 'le-stack.default.css',\n  shadow: true,\n})\nexport class LeStack {\n  @Element() el: HTMLElement;\n\n  /**\n   * Direction of the stack layout\n   * @allowedValues horizontal | vertical\n   */\n  @Prop() direction: 'horizontal' | 'vertical' = 'horizontal';\n\n  /**\n   * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')\n   */\n  @Prop() gap?: string;\n\n  /**\n   * Alignment of items on the cross axis\n   * @allowedValues start | center | end | stretch | baseline\n   */\n  @Prop() align: 'start' | 'center' | 'end' | 'stretch' | 'baseline' = 'stretch';\n\n  /**\n   * Distribution of items on the main axis\n   * @allowedValues start | center | end | space-between | space-around | space-evenly\n   */\n  @Prop() justify: 'start' | 'center' | 'end' | 'space-between' | 'space-around' | 'space-evenly' = 'start';\n\n  /**\n   * Whether items should wrap to multiple lines\n   */\n  @Prop() wrap: boolean = false;\n\n  /**\n   * Alignment of wrapped lines (only applies when wrap is true)\n   * @allowedValues start | center | end | stretch | space-between | space-around\n   */\n  @Prop() alignContent: 'start' | 'center' | 'end' | 'stretch' | 'space-between' | 'space-around' = 'stretch';\n\n  /**\n   * Whether to reverse the order of items\n   */\n  @Prop() reverse: boolean = false;\n\n  /**\n   * Maximum number of items allowed in the stack (for CMS validation)\n   * @min 1\n   */\n  @Prop() maxItems?: number;\n\n  /**\n   * Whether the stack should take full width of its container\n   */\n  @Prop() fullWidth: boolean = false;\n\n  /**\n   * Whether the stack should take full height of its container\n   */\n  @Prop() fullHeight: boolean = false;\n\n  /**\n   * Padding inside the stack container (CSS value)\n   */\n  @Prop() padding?: string;\n\n  private getFlexDirection(): string {\n    const base = this.direction === 'vertical' ? 'column' : 'row';\n    return this.reverse ? `${base}-reverse` : base;\n  }\n\n  private getAlignItems(): string {\n    const alignMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      baseline: 'baseline',\n    };\n    return alignMap[this.align] || 'stretch';\n  }\n\n  private getJustifyContent(): string {\n    const justifyMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      'space-between': 'space-between',\n      'space-around': 'space-around',\n      'space-evenly': 'space-evenly',\n    };\n    return justifyMap[this.justify] || 'flex-start';\n  }\n\n  private getAlignContent(): string {\n    const alignContentMap: Record<string, string> = {\n      start: 'flex-start',\n      center: 'center',\n      end: 'flex-end',\n      stretch: 'stretch',\n      'space-between': 'space-between',\n      'space-around': 'space-around',\n    };\n    return alignContentMap[this.alignContent] || 'stretch';\n  }\n\n  render() {\n    const style: { [key: string]: string } = {\n      display: 'flex',\n      flexDirection: this.getFlexDirection(),\n      alignItems: this.getAlignItems(),\n      justifyContent: this.getJustifyContent(),\n      flexWrap: this.wrap ? 'wrap' : 'nowrap',\n    };\n\n    if (this.wrap) {\n      style.alignContent = this.getAlignContent();\n    }\n\n    if (this.gap) {\n      style.gap = this.gap;\n    }\n\n    if (this.padding) {\n      style.padding = this.padding;\n    }\n\n    // if (this.fullWidth) {\n    //   style.width = '100%';\n    // }\n\n    // if (this.fullHeight) {\n    //   style.height = '100%';\n    // }\n\n    const hostClass = classnames(\n      `direction-${this.direction}`,\n      {\n        'wrap': this.wrap,\n        'reverse': this.reverse,\n        'full-width': this.fullWidth,\n        'full-height': this.fullHeight,\n      }\n    );\n\n    // Slot style for admin mode - make items display in the same direction\n    const slotStyle = `display: flex; flex-direction: ${this.getFlexDirection()}; gap: ${this.gap || 'var(--le-space-md)'}; flex-wrap: ${this.wrap ? 'wrap' : 'nowrap'}; justify-content: ${this.getJustifyContent()}; align-items: ${this.getAlignItems()};`;\n\n    return (\n      <Host  class={hostClass}>\n        <div class=\"stack\" part=\"stack\" style={style}>\n          \n            <slot></slot>\n          \n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/core/components/le-string-input.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../dist/types/components";
+
+interface LeStringInput extends Components.LeStringInput, HTMLElement {}
+export const LeStringInput: {
+    prototype: LeStringInput;
+    new (): LeStringInput;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/core/components/le-string-input.js

@@ -0,0 +1,127 @@
+import { proxyCustomElement, HTMLElement, createEvent, h, Host } from '@stencil/core/internal/client';
+import { h as classnames } from './utils.js';
+
+const leStringInputCss = ":host{display:block;--le-input-bg:var(--le-color-surface, #ffffff);--le-input-color:var(--le-color-text-primary, #333333);--le-input-border:var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);--le-input-radius:var(--le-radius-sm, 4px);--le-input-padding:2px 6px;--le-input-height:1.5rem;--le-input-label-color:var(--le-color-text-primary, #333333);--le-input-desc-color:var(--le-color-text-secondary, #666666);--le-input-placeholder-color:#999999}.le-input-wrapper{display:flex;flex-direction:column;gap:2px}.le-input-label{display:block;font-size:0.9em;font-weight:500;color:var(--le-input-label-color);margin-bottom:2px}.le-input-container{position:relative;display:flex;align-items:center;background:var(--le-input-bg);border:var(--le-input-border);border-radius:var(--le-input-radius);transition:border-color 0.2s}.le-input-container:focus-within{outline:2px solid var(--le-color-focus);outline-offset:2px}:host([disabled]) .le-input-container{opacity:0.6;background-color:rgba(0,0,0,0.05);cursor:not-allowed}input{flex:1;min-height:var(--le-input-height);padding:var(--le-input-padding);border:none;background:transparent;color:var(--le-input-color);font-family:inherit;font-size:inherit;outline:none;width:100%}input::placeholder{color:var(--le-input-placeholder-color)}.icon-start,.icon-end{display:flex;align-items:center;justify-content:center;padding:0 8px;color:var(--le-input-desc-color)}.le-input-description{font-size:0.85em;color:var(--le-input-desc-color);margin-top:2px}.le-input-description::has(slot[name=description]:empty){display:none}";
+
+const LeStringInput$1 = /*@__PURE__*/ proxyCustomElement(class LeStringInput extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+        this.leChange = createEvent(this, "change", 7);
+        this.leInput = createEvent(this, "input", 7);
+    }
+    get el() { return this; }
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode;
+    /**
+     * The value of the input
+     */
+    value;
+    /**
+     * The name of the input
+     */
+    name;
+    /**
+     * The type of the input (text, email, password, etc.)
+     */
+    type = 'text';
+    /**
+     * Label for the input
+     */
+    label;
+    /**
+     * Icon for the start icon
+     */
+    iconStart;
+    /**
+     * Icon for the end icon
+     */
+    iconEnd;
+    /**
+     * Placeholder text
+     */
+    placeholder;
+    /**
+     * Whether the input is disabled
+     */
+    disabled = false;
+    /**
+     * Whether the input is read-only
+     */
+    readonly = false;
+    /**
+     * External ID for linking with external systems
+     */
+    externalId;
+    /**
+     * Emitted when the value changes (on blur or Enter)
+     */
+    leChange;
+    /**
+     * Emitted when the input value changes (on keystroke)
+     */
+    leInput;
+    handleInput = (ev) => {
+        const input = ev.target;
+        this.value = input.value;
+        this.leInput.emit({
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId
+        });
+    };
+    handleChange = (ev) => {
+        const input = ev.target;
+        this.value = input.value;
+        this.leChange.emit({
+            value: this.value,
+            name: this.name,
+            externalId: this.externalId
+        });
+    };
+    handleClick = (ev) => {
+        ev.stopPropagation();
+    };
+    render() {
+        return (h(Host, { key: '5c841074ac9288c448c2c09e18530c91bc62e3da', class: classnames({ 'disabled': this.disabled }) }, h("div", { key: 'b2f7bea3e6c52033153caf9f18df4a815e9de14e', class: "le-input-wrapper" }, this.label && (h("label", { key: 'ce3cb46e176ec1016c93f5742ff0856badfe7d26', class: "le-input-label", htmlFor: this.name }, this.label)), h("div", { key: 'ea5cbbe1e178f964631aa67ec9833a17c3362be7', class: "le-input-container" }, this.iconStart && (h("span", { key: 'df8b39dcbe87ecb232ed23f2d965c707b16b1b50', class: "icon-start" }, this.iconStart)), h("input", { key: '53aff08b71412d2676c3ff90dc9af6e45d8aa438', id: this.name, type: this.type, name: this.name, value: this.value, placeholder: this.placeholder, disabled: this.disabled, readOnly: this.readonly, onInput: this.handleInput, onChange: this.handleChange, onClick: this.handleClick }), this.iconEnd && (h("span", { key: 'a726a70aa97b74ecd1a69266bcbfff18b504266b', class: "icon-end" }, this.iconEnd))), h("div", { key: '950270b513255a6dd7a53b80d3827efe3b043aac', class: "le-input-description" }, h("slot", { key: 'cb083064937a07085c11d421d2f42cf700f47892', name: "description" })))));
+    }
+    static get style() { return leStringInputCss; }
+}, [769, "le-string-input", {
+        "mode": [1537],
+        "value": [1537],
+        "name": [1],
+        "type": [1],
+        "label": [1],
+        "iconStart": [1, "icon-start"],
+        "iconEnd": [1, "icon-end"],
+        "placeholder": [1],
+        "disabled": [4],
+        "readonly": [4],
+        "externalId": [1, "external-id"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-string-input"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-string-input":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeStringInput$1);
+            }
+            break;
+    } });
+}
+
+const LeStringInput = LeStringInput$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeStringInput, defineCustomElement };
+//# sourceMappingURL=le-string-input.js.map
+
+//# sourceMappingURL=le-string-input.js.map

package/dist/core/components/le-string-input.js.map

@@ -0,0 +1 @@
+{"file":"le-string-input.js","mappings":"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","names":["LeStringInput","__stencil_proxyCustomElement"],"sources":["src-core/components/le-string-input/le-string-input.css?tag=le-string-input&encapsulation=shadow","src-core/components/le-string-input/le-string-input.tsx"],"sourcesContent":[":host {\n  display: block;\n  --le-input-bg: var(--le-color-surface, #ffffff);\n  --le-input-color: var(--le-color-text-primary, #333333);\n  --le-input-border: var(--le-border-width, 2px) solid var(--le-color-border-input, #007bff);\n  --le-input-radius: var(--le-radius-sm, 4px);\n  --le-input-padding: 2px 6px;\n  --le-input-height: 1.5rem;\n  --le-input-label-color: var(--le-color-text-primary, #333333);\n  --le-input-desc-color: var(--le-color-text-secondary, #666666);\n  --le-input-placeholder-color: #999999;\n}\n\n.le-input-wrapper {\n  display: flex;\n  flex-direction: column;\n  gap: 2px;\n}\n\n.le-input-label {\n  display: block;\n  font-size: 0.9em;\n  font-weight: 500;\n  color: var(--le-input-label-color);\n  margin-bottom: 2px;\n}\n\n.le-input-container {\n  position: relative;\n  display: flex;\n  align-items: center;\n  background: var(--le-input-bg);\n  border: var(--le-input-border);\n  border-radius: var(--le-input-radius);\n  transition: border-color 0.2s;\n}\n\n.le-input-container:focus-within {\n  outline: 2px solid var(--le-color-focus);\n  outline-offset: 2px;\n}\n\n\n:host([disabled]) .le-input-container {\n  opacity: 0.6;\n  background-color: rgba(0,0,0,0.05);\n  cursor: not-allowed;\n}\n\ninput {\n  flex: 1;\n  min-height: var(--le-input-height);\n  padding: var(--le-input-padding);\n  border: none;\n  background: transparent;\n  color: var(--le-input-color);\n  font-family: inherit;\n  font-size: inherit;\n  outline: none;\n  width: 100%;\n}\n\ninput::placeholder {\n  color: var(--le-input-placeholder-color);\n}\n\n.icon-start, .icon-end {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  padding: 0 8px;\n  color: var(--le-input-desc-color);\n}\n\n.le-input-description {\n  font-size: 0.85em;\n  color: var(--le-input-desc-color);\n  margin-top: 2px;\n}\n\n.le-input-description::has(slot[name=description]:empty) {\n  display: none;\n}\n","import { Component, Prop, Event, EventEmitter, h, Element , Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A text input component with support for labels, descriptions, icons, and external IDs.\n *\n * @slot - The label text for the input\n * @slot description - Additional description text displayed below the input\n * @slot icon-start - Icon to display at the start of the input\n * @slot icon-end - Icon to display at the end of the input\n *\n * @cssprop --le-input-bg - Input background color\n * @cssprop --le-input-color - Input text color\n * @cssprop --le-input-border - Input border style\n * @cssprop --le-input-border-focus - Input border style when focused\n * @cssprop --le-input-radius - Input border radius\n * @cssprop --le-input-padding - Input padding\n */\n@Component({\n  tag: 'le-string-input',\n  styleUrl: 'le-string-input.css',\n  shadow: true,\n})\nexport class LeStringInput {\n  @Element() el: HTMLElement;\n\n  /**\n   * Mode of the popover should be 'default' for internal use\n   */\n  @Prop({ mutable: true, reflect: true }) mode: 'default' | 'admin';\n\n  /**\n   * The value of the input\n   */\n  @Prop({ mutable: true, reflect: true }) value: string;\n\n  /**\n   * The name of the input\n   */\n  @Prop() name: string;\n\n  /**\n   * The type of the input (text, email, password, etc.)\n   */\n  @Prop() type: 'text' | 'email' | 'password' | 'tel' | 'url' = 'text';\n\n  /**\n   * Label for the input\n   */\n  @Prop() label: string;\n\n  /**\n   * Icon for the start icon\n   */\n  @Prop() iconStart: string;\n\n  /**\n   * Icon for the end icon\n   */\n  @Prop() iconEnd: string;\n\n  /**\n   * Placeholder text\n   */\n  @Prop() placeholder: string;\n\n  /**\n   * Whether the input is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * Whether the input is read-only\n   */\n  @Prop() readonly: boolean = false;\n\n  /**\n   * External ID for linking with external systems\n   */\n  @Prop() externalId: string;\n\n  /**\n   * Emitted when the value changes (on blur or Enter)\n   */\n  @Event({ eventName: 'change' }) leChange: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  /**\n   * Emitted when the input value changes (on keystroke)\n   */\n  @Event({ eventName: 'input' }) leInput: EventEmitter<{ value: string; name: string; externalId: string }>;\n\n  private handleInput = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    this.value = input.value;\n    this.leInput.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId\n    });\n  };\n\n  private handleChange = (ev: Event) => {\n    const input = ev.target as HTMLInputElement;\n    this.value = input.value;\n    this.leChange.emit({\n      value: this.value,\n      name: this.name,\n      externalId: this.externalId\n    });\n  };\n\n  private handleClick = (ev: Event) => {\n    ev.stopPropagation();\n  };\n\n  render() {\n    return (\n      <Host  class={classnames({ 'disabled': this.disabled })}>\n        <div class=\"le-input-wrapper\">\n          {this.label && (\n            <label class=\"le-input-label\" htmlFor={this.name}>{this.label}</label>\n          )}\n          \n          <div class=\"le-input-container\">\n            {this.iconStart && (\n              <span class=\"icon-start\">{this.iconStart}</span>\n            )}\n            <input\n              id={this.name}\n              type={this.type}\n              name={this.name}\n              value={this.value}\n              placeholder={this.placeholder}\n              disabled={this.disabled}\n              readOnly={this.readonly}\n              onInput={this.handleInput}\n              onChange={this.handleChange}\n              onClick={this.handleClick}\n            />\n            {this.iconEnd && (\n              <span class=\"icon-end\">{this.iconEnd}</span>\n            )}\n          </div>\n\n          <div class=\"le-input-description\">\n            \n              <slot name=\"description\"></slot>\n            \n          </div>\n        </div>\n      </Host>\n    );\n  }\n}\n"],"version":3}

package/dist/core/components/le-text.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../dist/types/components";
+
+interface LeText extends Components.LeText, HTMLElement {}
+export const LeText: {
+    prototype: LeText;
+    new (): LeText;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;

package/dist/core/components/le-text.js

@@ -0,0 +1,367 @@
+import { proxyCustomElement, HTMLElement, h, Host } from '@stencil/core/internal/client';
+import { o as observeModeChanges } from './utils.js';
+
+const leTextDefaultCss = ":host{display:block}:host([hidden]){display:none}.le-text{margin:0;color:var(--le-text-color, var(--le-color-text));font-family:var(--le-font-family);line-height:var(--le-text-line-height, 1.5)}.variant-p{font-size:var(--le-font-size-base, 1rem);font-weight:var(--le-font-weight-normal, 400);color:var(--le-color-text)}.variant-h1{font-size:var(--le-font-size-4xl, 2.5rem);font-weight:var(--le-font-weight-bold, 700);line-height:1.2;color:var(--le-color-text);letter-spacing:-0.02em}.variant-h2{font-size:var(--le-font-size-3xl, 2rem);font-weight:var(--le-font-weight-bold, 700);line-height:1.25;color:var(--le-color-text);letter-spacing:-0.01em}.variant-h3{font-size:var(--le-font-size-2xl, 1.5rem);font-weight:var(--le-font-weight-semibold, 600);line-height:1.3;color:var(--le-color-text)}.variant-h4{font-size:var(--le-font-size-xl, 1.25rem);font-weight:var(--le-font-weight-semibold, 600);line-height:1.35;color:var(--le-color-text)}.variant-h5{font-size:var(--le-font-size-lg, 1.125rem);font-weight:var(--le-font-weight-medium, 500);line-height:1.4;color:var(--le-color-text)}.variant-h6{font-size:var(--le-font-size-base, 1rem);font-weight:var(--le-font-weight-medium, 500);line-height:1.45;color:var(--le-color-text);text-transform:uppercase;letter-spacing:0.05em}.variant-code{font-family:var(--le-font-family-mono, 'SF Mono', 'Fira Code', 'Consolas', monospace);font-size:var(--le-font-size-sm, 0.875rem);background:var(--le-color-surface-alt, #f5f5f5);padding:var(--le-space-md);border-radius:var(--le-radius-md);overflow-x:auto;white-space:pre-wrap;color:var(--le-color-text)}.variant-quote{font-size:var(--le-font-size-lg, 1.125rem);font-style:italic;color:var(--le-color-text-secondary);border-left:4px solid var(--le-color-primary);padding-left:var(--le-space-lg);margin-left:0;margin-right:0}.variant-label{font-size:var(--le-font-size-sm, 0.875rem);font-weight:var(--le-font-weight-medium, 500);color:var(--le-color-text-secondary);text-transform:uppercase;letter-spacing:0.05em}.variant-small{font-size:var(--le-font-size-sm, 0.875rem);color:var(--le-color-text-secondary)}.truncate{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.truncate.max-lines-2,.truncate.max-lines-3,.truncate.max-lines-4,.truncate.max-lines-5{white-space:normal;display:-webkit-box;-webkit-box-orient:vertical}.truncate.max-lines-2{-webkit-line-clamp:2;line-clamp:2}.truncate.max-lines-3{-webkit-line-clamp:3;line-clamp:3}.truncate.max-lines-4{-webkit-line-clamp:4;line-clamp:4}.truncate.max-lines-5{-webkit-line-clamp:5;line-clamp:5}:host([align=\"center\"]) .le-text{text-align:center}:host([align=\"right\"]) .le-text{text-align:right}:host([align=\"justify\"]) .le-text{text-align:justify}.le-text a{color:var(--le-color-primary);text-decoration:underline}.le-text a:hover{color:var(--le-color-primary-dark)}.le-text strong,.le-text b{font-weight:var(--le-font-weight-bold, 700)}.le-text em,.le-text i{font-style:italic}.le-text u{text-decoration:underline}.le-text s,.le-text strike{text-decoration:line-through}";
+
+const LeText$1 = /*@__PURE__*/ proxyCustomElement(class LeText extends HTMLElement {
+    constructor(registerHost) {
+        super();
+        if (registerHost !== false) {
+            this.__registerHost();
+        }
+        this.__attachShadow();
+    }
+    get el() { return this; }
+    /**
+     * The semantic variant/type of text element
+     * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small
+     */
+    variant = 'p';
+    /**
+     * Text alignment
+     * @allowedValues left | center | right | justify
+     */
+    align = 'left';
+    /**
+     * Text color (CSS value or theme token)
+     */
+    color;
+    /**
+     * Whether the text should truncate with ellipsis
+     */
+    truncate = false;
+    /**
+     * Maximum number of lines before truncating (requires truncate=true)
+     */
+    maxLines;
+    /**
+     * Internal state to track admin mode
+     */
+    adminMode = false;
+    /**
+     * The HTML content being edited
+     */
+    content = '';
+    /**
+     * Whether the editor is focused (shows toolbar)
+     */
+    isFocused = false;
+    /**
+     * Current selection state for toolbar button highlighting
+     */
+    selectionState = {
+        isBold: false,
+        isItalic: false,
+        isUnderline: false,
+        isStrikethrough: false,
+        isLink: false,
+        blockType: 'p',
+    };
+    /**
+     * Reference to the contenteditable element
+     */
+    editorRef;
+    /**
+     * Reference to the slot element
+     */
+    slotRef;
+    disconnectModeObserver;
+    connectedCallback() {
+        this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
+            const wasAdmin = this.adminMode;
+            this.adminMode = mode === 'admin';
+            if (this.adminMode && !wasAdmin) {
+                // Entering admin mode - read content from slot
+                requestAnimationFrame(() => this.readSlottedContent());
+            }
+            else if (!this.adminMode && wasAdmin) {
+                // Leaving admin mode - sync content back to slot
+                this.syncContentToSlot();
+            }
+        });
+    }
+    disconnectedCallback() {
+        this.disconnectModeObserver?.();
+    }
+    onVariantChange() {
+        // When variant changes in admin mode, update the content wrapper
+        if (this.adminMode && this.editorRef) {
+            this.syncContentToSlot();
+        }
+    }
+    /**
+     * Read content from slotted elements
+     */
+    readSlottedContent() {
+        if (!this.slotRef)
+            return;
+        const assignedNodes = this.slotRef.assignedNodes({ flatten: true });
+        // Collect all content from assigned nodes
+        let html = '';
+        assignedNodes.forEach(node => {
+            if (node.nodeType === Node.TEXT_NODE) {
+                html += node.textContent;
+            }
+            else if (node.nodeType === Node.ELEMENT_NODE) {
+                html += node.innerHTML || node.textContent;
+            }
+        });
+        this.content = html.trim();
+    }
+    /**
+     * Sync edited content back to the slot
+     */
+    syncContentToSlot() {
+        if (!this.editorRef)
+            return;
+        const newContent = this.editorRef.innerHTML;
+        // Update the light DOM content
+        // We need to update the actual slotted content
+        const slot = this.slotRef;
+        if (slot) {
+            const assignedNodes = slot.assignedNodes({ flatten: true });
+            if (assignedNodes.length > 0) {
+                const firstNode = assignedNodes[0];
+                if (firstNode.nodeType === Node.ELEMENT_NODE) {
+                    firstNode.innerHTML = newContent;
+                }
+                else if (firstNode.nodeType === Node.TEXT_NODE) {
+                    // Replace text node with the new content
+                    const parent = firstNode.parentNode;
+                    if (parent) {
+                        // Create a temporary element to parse HTML
+                        const temp = document.createElement('span');
+                        temp.innerHTML = newContent;
+                        // Replace the text node
+                        parent.replaceChild(temp, firstNode);
+                        // Unwrap the span if it only contains text
+                        if (temp.childNodes.length === 1 && temp.firstChild?.nodeType === Node.TEXT_NODE) {
+                            parent.replaceChild(temp.firstChild, temp);
+                        }
+                    }
+                }
+            }
+            else {
+                // No assigned nodes, set innerHTML on the host's light DOM
+                this.el.innerHTML = newContent;
+            }
+        }
+    }
+    /**
+     * Handle input in the contenteditable
+     */
+    handleInput = () => {
+        if (this.editorRef) {
+            this.content = this.editorRef.innerHTML;
+            this.updateSelectionState();
+        }
+    };
+    /**
+     * Handle focus on the editor
+     */
+    handleFocus = () => {
+        this.isFocused = true;
+        this.updateSelectionState();
+    };
+    /**
+     * Handle blur on the editor
+     */
+    handleBlur = (e) => {
+        // Check if focus moved to toolbar
+        const relatedTarget = e.relatedTarget;
+        const toolbar = this.el.shadowRoot?.querySelector('.le-text-toolbar');
+        if (toolbar?.contains(relatedTarget)) {
+            // Focus moved to toolbar, keep it open
+            return;
+        }
+        // Small delay to allow toolbar clicks to register
+        setTimeout(() => {
+            if (!this.el.shadowRoot?.activeElement) {
+                this.isFocused = false;
+                this.syncContentToSlot();
+            }
+        }, 150);
+    };
+    /**
+     * Handle selection change to update toolbar state
+     */
+    handleSelectionChange = () => {
+        this.updateSelectionState();
+    };
+    /**
+     * Update the selection state for toolbar highlighting
+     */
+    updateSelectionState() {
+        const selection = window.getSelection();
+        if (!selection || selection.rangeCount === 0)
+            return;
+        this.selectionState = {
+            isBold: document.queryCommandState('bold'),
+            isItalic: document.queryCommandState('italic'),
+            isUnderline: document.queryCommandState('underline'),
+            isStrikethrough: document.queryCommandState('strikeThrough'),
+            isLink: this.isSelectionInLink(selection),
+            blockType: this.variant,
+        };
+    }
+    /**
+     * Check if current selection is within a link
+     */
+    isSelectionInLink(selection) {
+        if (!selection.anchorNode)
+            return false;
+        let node = selection.anchorNode;
+        while (node && node !== this.editorRef) {
+            if (node.nodeName === 'A')
+                return true;
+            node = node.parentNode;
+        }
+        return false;
+    }
+    /**
+     * Execute a formatting command
+     */
+    execCommand(command, value) {
+        // Focus the editor first
+        this.editorRef?.focus();
+        // Execute the command
+        document.execCommand(command, false, value);
+        // Update state
+        this.handleInput();
+        this.updateSelectionState();
+    }
+    /**
+     * Toggle bold formatting
+     */
+    toggleBold = (e) => {
+        e.preventDefault();
+        this.execCommand('bold');
+    };
+    /**
+     * Toggle italic formatting
+     */
+    toggleItalic = (e) => {
+        e.preventDefault();
+        this.execCommand('italic');
+    };
+    /**
+     * Toggle underline formatting
+     */
+    toggleUnderline = (e) => {
+        e.preventDefault();
+        this.execCommand('underline');
+    };
+    /**
+     * Toggle strikethrough formatting
+     */
+    toggleStrikethrough = (e) => {
+        e.preventDefault();
+        this.execCommand('strikeThrough');
+    };
+    /**
+     * Add or edit a link
+     */
+    toggleLink = (e) => {
+        e.preventDefault();
+        if (this.selectionState.isLink) {
+            // Remove link
+            this.execCommand('unlink');
+        }
+        else {
+            // Add link
+            const url = prompt('Enter URL:', 'https://');
+            if (url) {
+                this.execCommand('createLink', url);
+            }
+        }
+    };
+    /**
+     * Change the block type/variant
+     */
+    changeVariant = (e) => {
+        const select = e.target;
+        this.variant = select.value;
+    };
+    /**
+     * Render the formatting toolbar
+     */
+    renderToolbar() {
+        return (h("div", { class: "le-text-toolbar" }, h("select", { class: "le-text-toolbar-select", onChange: this.changeVariant, onMouseDown: (e) => e.preventDefault() }, h("option", { value: "p", selected: this.variant === 'p' }, "Paragraph"), h("option", { value: "h1", selected: this.variant === 'h1' }, "Heading 1"), h("option", { value: "h2", selected: this.variant === 'h2' }, "Heading 2"), h("option", { value: "h3", selected: this.variant === 'h3' }, "Heading 3"), h("option", { value: "h4", selected: this.variant === 'h4' }, "Heading 4"), h("option", { value: "h5", selected: this.variant === 'h5' }, "Heading 5"), h("option", { value: "h6", selected: this.variant === 'h6' }, "Heading 6"), h("option", { value: "quote", selected: this.variant === 'quote' }, "Quote"), h("option", { value: "code", selected: this.variant === 'code' }, "Code"), h("option", { value: "label", selected: this.variant === 'label' }, "Label"), h("option", { value: "small", selected: this.variant === 'small' }, "Small")), h("div", { class: "le-text-toolbar-divider" }), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isBold }, onMouseDown: this.toggleBold, title: "Bold (Ctrl+B)" }, h("strong", null, "B")), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isItalic }, onMouseDown: this.toggleItalic, title: "Italic (Ctrl+I)" }, h("em", null, "I")), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isUnderline }, onMouseDown: this.toggleUnderline, title: "Underline (Ctrl+U)" }, h("span", { style: { textDecoration: 'underline' } }, "U")), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isStrikethrough }, onMouseDown: this.toggleStrikethrough, title: "Strikethrough" }, h("span", { style: { textDecoration: 'line-through' } }, "S")), h("div", { class: "le-text-toolbar-divider" }), h("button", { type: "button", class: { 'le-text-toolbar-btn': true, 'active': this.selectionState.isLink }, onMouseDown: this.toggleLink, title: this.selectionState.isLink ? 'Remove link' : 'Add link' }, "\uD83D\uDD17")));
+    }
+    /**
+     * Get the semantic tag for the current variant
+     */
+    getTag() {
+        switch (this.variant) {
+            case 'quote':
+                return 'blockquote';
+            case 'code':
+                return 'pre';
+            case 'label':
+                return 'label';
+            case 'small':
+                return 'small';
+            default:
+                return this.variant; // h1-h6, p
+        }
+    }
+    render() {
+        const Tag = this.getTag();
+        const textStyle = {};
+        if (this.color) {
+            textStyle.color = this.color;
+        }
+        if (this.align) {
+            textStyle.textAlign = this.align;
+        }
+        const textClass = {
+            'le-text': true,
+            [`variant-${this.variant}`]: true,
+            'truncate': this.truncate,
+            [`max-lines-${this.maxLines}`]: this.truncate && this.maxLines,
+        };
+        // Admin mode - show rich text editor
+        if (this.adminMode) {
+            return (h(Host, { class: "admin-mode" }, h("div", { class: "le-text-editor-wrapper" }, this.isFocused && this.renderToolbar(), h(Tag, { class: textClass, part: "text", style: textStyle }, h("div", { ref: (el) => this.editorRef = el, class: "le-text-editor", contentEditable: true, onInput: this.handleInput, onFocus: this.handleFocus, onBlur: this.handleBlur, onKeyUp: this.handleSelectionChange, onMouseUp: this.handleSelectionChange, innerHTML: this.content })), h("div", { class: "hidden-slot" }, h("slot", { ref: (el) => this.slotRef = el, onSlotchange: () => this.readSlottedContent() })))));
+        }
+        // Default mode - render semantic element with slotted content
+        return (h(Host, null, h(Tag, { class: textClass, part: "text", style: textStyle }, h("slot", { ref: (el) => this.slotRef = el }))));
+    }
+    static get watchers() { return {
+        "variant": ["onVariantChange"]
+    }; }
+    static get style() { return leTextDefaultCss; }
+}, [769, "le-text", {
+        "variant": [1537],
+        "align": [513],
+        "color": [1],
+        "truncate": [4],
+        "maxLines": [2, "max-lines"],
+        "adminMode": [32],
+        "content": [32],
+        "isFocused": [32],
+        "selectionState": [32]
+    }, undefined, {
+        "variant": ["onVariantChange"]
+    }]);
+function defineCustomElement$1() {
+    if (typeof customElements === "undefined") {
+        return;
+    }
+    const components = ["le-text"];
+    components.forEach(tagName => { switch (tagName) {
+        case "le-text":
+            if (!customElements.get(tagName)) {
+                customElements.define(tagName, LeText$1);
+            }
+            break;
+    } });
+}
+
+const LeText = LeText$1;
+const defineCustomElement = defineCustomElement$1;
+
+export { LeText, defineCustomElement };
+//# sourceMappingURL=le-text.js.map
+
+//# sourceMappingURL=le-text.js.map

package/dist/core/components/le-text.js.map

@@ -0,0 +1 @@
+{"file":"le-text.js","mappings":"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","names":["LeText","__stencil_proxyCustomElement"],"sources":["src-core/components/le-text/le-text.default.css?tag=le-text&encapsulation=shadow","src-core/components/le-text/le-text.tsx"],"sourcesContent":["/**\n * le-text default styles\n *\n * Semantic text element with variant-based styling\n */\n\n:host {\n  display: block;\n}\n\n:host([hidden]) {\n  display: none;\n}\n\n/* Base text styles */\n.le-text {\n  margin: 0;\n  color: var(--le-text-color, var(--le-color-text));\n  font-family: var(--le-font-family);\n  line-height: var(--le-text-line-height, 1.5);\n}\n\n/* Paragraph */\n.variant-p {\n  font-size: var(--le-font-size-base, 1rem);\n  font-weight: var(--le-font-weight-normal, 400);\n  color: var(--le-color-text);\n}\n\n/* Headings */\n.variant-h1 {\n  font-size: var(--le-font-size-4xl, 2.5rem);\n  font-weight: var(--le-font-weight-bold, 700);\n  line-height: 1.2;\n  color: var(--le-color-text);\n  letter-spacing: -0.02em;\n}\n\n.variant-h2 {\n  font-size: var(--le-font-size-3xl, 2rem);\n  font-weight: var(--le-font-weight-bold, 700);\n  line-height: 1.25;\n  color: var(--le-color-text);\n  letter-spacing: -0.01em;\n}\n\n.variant-h3 {\n  font-size: var(--le-font-size-2xl, 1.5rem);\n  font-weight: var(--le-font-weight-semibold, 600);\n  line-height: 1.3;\n  color: var(--le-color-text);\n}\n\n.variant-h4 {\n  font-size: var(--le-font-size-xl, 1.25rem);\n  font-weight: var(--le-font-weight-semibold, 600);\n  line-height: 1.35;\n  color: var(--le-color-text);\n}\n\n.variant-h5 {\n  font-size: var(--le-font-size-lg, 1.125rem);\n  font-weight: var(--le-font-weight-medium, 500);\n  line-height: 1.4;\n  color: var(--le-color-text);\n}\n\n.variant-h6 {\n  font-size: var(--le-font-size-base, 1rem);\n  font-weight: var(--le-font-weight-medium, 500);\n  line-height: 1.45;\n  color: var(--le-color-text);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n/* Code */\n.variant-code {\n  font-family: var(--le-font-family-mono, 'SF Mono', 'Fira Code', 'Consolas', monospace);\n  font-size: var(--le-font-size-sm, 0.875rem);\n  background: var(--le-color-surface-alt, #f5f5f5);\n  padding: var(--le-space-md);\n  border-radius: var(--le-radius-md);\n  overflow-x: auto;\n  white-space: pre-wrap;\n  color: var(--le-color-text);\n}\n\n/* Quote */\n.variant-quote {\n  font-size: var(--le-font-size-lg, 1.125rem);\n  font-style: italic;\n  color: var(--le-color-text-secondary);\n  border-left: 4px solid var(--le-color-primary);\n  padding-left: var(--le-space-lg);\n  margin-left: 0;\n  margin-right: 0;\n}\n\n/* Label */\n.variant-label {\n  font-size: var(--le-font-size-sm, 0.875rem);\n  font-weight: var(--le-font-weight-medium, 500);\n  color: var(--le-color-text-secondary);\n  text-transform: uppercase;\n  letter-spacing: 0.05em;\n}\n\n/* Small */\n.variant-small {\n  font-size: var(--le-font-size-sm, 0.875rem);\n  color: var(--le-color-text-secondary);\n}\n\n/* Truncation */\n.truncate {\n  overflow: hidden;\n  text-overflow: ellipsis;\n  white-space: nowrap;\n}\n\n.truncate.max-lines-2,\n.truncate.max-lines-3,\n.truncate.max-lines-4,\n.truncate.max-lines-5 {\n  white-space: normal;\n  display: -webkit-box;\n  -webkit-box-orient: vertical;\n}\n\n.truncate.max-lines-2 { -webkit-line-clamp: 2; line-clamp: 2; }\n.truncate.max-lines-3 { -webkit-line-clamp: 3; line-clamp: 3; }\n.truncate.max-lines-4 { -webkit-line-clamp: 4; line-clamp: 4; }\n.truncate.max-lines-5 { -webkit-line-clamp: 5; line-clamp: 5; }\n\n/* Alignment */\n:host([align=\"center\"]) .le-text { text-align: center; }\n:host([align=\"right\"]) .le-text { text-align: right; }\n:host([align=\"justify\"]) .le-text { text-align: justify; }\n\n/* Links inside text */\n.le-text a {\n  color: var(--le-color-primary);\n  text-decoration: underline;\n}\n\n.le-text a:hover {\n  color: var(--le-color-primary-dark);\n}\n\n/* Bold, italic, etc. */\n.le-text strong,\n.le-text b {\n  font-weight: var(--le-font-weight-bold, 700);\n}\n\n.le-text em,\n.le-text i {\n  font-style: italic;\n}\n\n.le-text u {\n  text-decoration: underline;\n}\n\n.le-text s,\n.le-text strike {\n  text-decoration: line-through;\n}\n","import { Component, Prop, State, h, Host, Element, Watch } from '@stencil/core';\nimport { observeModeChanges } from '../../utils/utils';\n\n/**\n * A text component with rich text editing capabilities in admin mode.\n *\n * `le-text` renders semantic text elements (headings, paragraphs, code, quotes)\n * and provides a Notion-like rich text editor in admin mode with formatting\n * toolbar for bold, italic, links, and paragraph type selection.\n *\n * @slot - Default slot for text content\n *\n * @cssprop --le-text-color - Text color\n * @cssprop --le-text-font-size - Font size\n * @cssprop --le-text-line-height - Line height\n * @cssprop --le-text-font-weight - Font weight\n *\n * @csspart text - The text container element\n *\n * @cmsEditable true\n * @cmsCategory Content\n */\n@Component({\n  tag: 'le-text',\n  styleUrl: 'le-text.default.css',\n  shadow: true,\n})\nexport class LeText {\n  @Element() el: HTMLElement;\n\n  /**\n   * The semantic variant/type of text element\n   * @allowedValues p | h1 | h2 | h3 | h4 | h5 | h6 | code | quote | label | small\n   */\n  @Prop({ mutable: true, reflect: true }) variant: 'p' | 'h1' | 'h2' | 'h3' | 'h4' | 'h5' | 'h6' | 'code' | 'quote' | 'label' | 'small' = 'p';\n\n  /**\n   * Text alignment\n   * @allowedValues left | center | right | justify\n   */\n  @Prop({ reflect: true }) align: 'left' | 'center' | 'right' | 'justify' = 'left';\n\n  /**\n   * Text color (CSS value or theme token)\n   */\n  @Prop() color?: string;\n\n  /**\n   * Whether the text should truncate with ellipsis\n   */\n  @Prop() truncate: boolean = false;\n\n  /**\n   * Maximum number of lines before truncating (requires truncate=true)\n   */\n  @Prop() maxLines?: number;\n\n  /**\n   * Internal state to track admin mode\n   */\n  @State() private adminMode: boolean = false;\n\n  /**\n   * The HTML content being edited\n   */\n  @State() private content: string = '';\n\n  /**\n   * Whether the editor is focused (shows toolbar)\n   */\n  @State() private isFocused: boolean = false;\n\n  /**\n   * Current selection state for toolbar button highlighting\n   */\n  @State() private selectionState: SelectionState = {\n    isBold: false,\n    isItalic: false,\n    isUnderline: false,\n    isStrikethrough: false,\n    isLink: false,\n    blockType: 'p',\n  };\n\n  /**\n   * Reference to the contenteditable element\n   */\n  private editorRef?: HTMLDivElement;\n\n  /**\n   * Reference to the slot element\n   */\n  private slotRef?: HTMLSlotElement;\n\n  private disconnectModeObserver?: () => void;\n\n  connectedCallback() {\n    this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n      const wasAdmin = this.adminMode;\n      this.adminMode = mode === 'admin';\n      \n      if (this.adminMode && !wasAdmin) {\n        // Entering admin mode - read content from slot\n        requestAnimationFrame(() => this.readSlottedContent());\n      } else if (!this.adminMode && wasAdmin) {\n        // Leaving admin mode - sync content back to slot\n        this.syncContentToSlot();\n      }\n    });\n  }\n\n  disconnectedCallback() {\n    this.disconnectModeObserver?.();\n  }\n\n  @Watch('variant')\n  onVariantChange() {\n    // When variant changes in admin mode, update the content wrapper\n    if (this.adminMode && this.editorRef) {\n      this.syncContentToSlot();\n    }\n  }\n\n  /**\n   * Read content from slotted elements\n   */\n  private readSlottedContent() {\n    if (!this.slotRef) return;\n    \n    const assignedNodes = this.slotRef.assignedNodes({ flatten: true });\n    \n    // Collect all content from assigned nodes\n    let html = '';\n    assignedNodes.forEach(node => {\n      if (node.nodeType === Node.TEXT_NODE) {\n        html += node.textContent;\n      } else if (node.nodeType === Node.ELEMENT_NODE) {\n        html += (node as Element).innerHTML || node.textContent;\n      }\n    });\n    \n    this.content = html.trim();\n  }\n\n  /**\n   * Sync edited content back to the slot\n   */\n  private syncContentToSlot() {\n    if (!this.editorRef) return;\n    \n    const newContent = this.editorRef.innerHTML;\n    \n    // Update the light DOM content\n    // We need to update the actual slotted content\n    const slot = this.slotRef;\n    if (slot) {\n      const assignedNodes = slot.assignedNodes({ flatten: true });\n      if (assignedNodes.length > 0) {\n        const firstNode = assignedNodes[0];\n        if (firstNode.nodeType === Node.ELEMENT_NODE) {\n          (firstNode as Element).innerHTML = newContent;\n        } else if (firstNode.nodeType === Node.TEXT_NODE) {\n          // Replace text node with the new content\n          const parent = firstNode.parentNode;\n          if (parent) {\n            // Create a temporary element to parse HTML\n            const temp = document.createElement('span');\n            temp.innerHTML = newContent;\n            // Replace the text node\n            parent.replaceChild(temp, firstNode);\n            // Unwrap the span if it only contains text\n            if (temp.childNodes.length === 1 && temp.firstChild?.nodeType === Node.TEXT_NODE) {\n              parent.replaceChild(temp.firstChild, temp);\n            }\n          }\n        }\n      } else {\n        // No assigned nodes, set innerHTML on the host's light DOM\n        this.el.innerHTML = newContent;\n      }\n    }\n  }\n\n  /**\n   * Handle input in the contenteditable\n   */\n  private handleInput = () => {\n    if (this.editorRef) {\n      this.content = this.editorRef.innerHTML;\n      this.updateSelectionState();\n    }\n  };\n\n  /**\n   * Handle focus on the editor\n   */\n  private handleFocus = () => {\n    this.isFocused = true;\n    this.updateSelectionState();\n  };\n\n  /**\n   * Handle blur on the editor\n   */\n  private handleBlur = (e: FocusEvent) => {\n    // Check if focus moved to toolbar\n    const relatedTarget = e.relatedTarget as HTMLElement;\n    const toolbar = this.el.shadowRoot?.querySelector('.le-text-toolbar');\n    \n    if (toolbar?.contains(relatedTarget)) {\n      // Focus moved to toolbar, keep it open\n      return;\n    }\n    \n    // Small delay to allow toolbar clicks to register\n    setTimeout(() => {\n      if (!this.el.shadowRoot?.activeElement) {\n        this.isFocused = false;\n        this.syncContentToSlot();\n      }\n    }, 150);\n  };\n\n  /**\n   * Handle selection change to update toolbar state\n   */\n  private handleSelectionChange = () => {\n    this.updateSelectionState();\n  };\n\n  /**\n   * Update the selection state for toolbar highlighting\n   */\n  private updateSelectionState() {\n    const selection = window.getSelection();\n    if (!selection || selection.rangeCount === 0) return;\n\n    this.selectionState = {\n      isBold: document.queryCommandState('bold'),\n      isItalic: document.queryCommandState('italic'),\n      isUnderline: document.queryCommandState('underline'),\n      isStrikethrough: document.queryCommandState('strikeThrough'),\n      isLink: this.isSelectionInLink(selection),\n      blockType: this.variant,\n    };\n  }\n\n  /**\n   * Check if current selection is within a link\n   */\n  private isSelectionInLink(selection: Selection): boolean {\n    if (!selection.anchorNode) return false;\n    \n    let node: Node | null = selection.anchorNode;\n    while (node && node !== this.editorRef) {\n      if (node.nodeName === 'A') return true;\n      node = node.parentNode;\n    }\n    return false;\n  }\n\n  /**\n   * Execute a formatting command\n   */\n  private execCommand(command: string, value?: string) {\n    // Focus the editor first\n    this.editorRef?.focus();\n    \n    // Execute the command\n    document.execCommand(command, false, value);\n    \n    // Update state\n    this.handleInput();\n    this.updateSelectionState();\n  }\n\n  /**\n   * Toggle bold formatting\n   */\n  private toggleBold = (e: Event) => {\n    e.preventDefault();\n    this.execCommand('bold');\n  };\n\n  /**\n   * Toggle italic formatting\n   */\n  private toggleItalic = (e: Event) => {\n    e.preventDefault();\n    this.execCommand('italic');\n  };\n\n  /**\n   * Toggle underline formatting\n   */\n  private toggleUnderline = (e: Event) => {\n    e.preventDefault();\n    this.execCommand('underline');\n  };\n\n  /**\n   * Toggle strikethrough formatting\n   */\n  private toggleStrikethrough = (e: Event) => {\n    e.preventDefault();\n    this.execCommand('strikeThrough');\n  };\n\n  /**\n   * Add or edit a link\n   */\n  private toggleLink = (e: Event) => {\n    e.preventDefault();\n    \n    if (this.selectionState.isLink) {\n      // Remove link\n      this.execCommand('unlink');\n    } else {\n      // Add link\n      const url = prompt('Enter URL:', 'https://');\n      if (url) {\n        this.execCommand('createLink', url);\n      }\n    }\n  };\n\n  /**\n   * Change the block type/variant\n   */\n  private changeVariant = (e: Event) => {\n    const select = e.target as HTMLSelectElement;\n    this.variant = select.value as typeof this.variant;\n  };\n\n  /**\n   * Render the formatting toolbar\n   */\n  private renderToolbar() {\n    return (\n      <div class=\"le-text-toolbar\">\n        <select \n          class=\"le-text-toolbar-select\"\n          onChange={this.changeVariant}\n          onMouseDown={(e) => e.preventDefault()}\n        >\n          <option value=\"p\" selected={this.variant === 'p'}>Paragraph</option>\n          <option value=\"h1\" selected={this.variant === 'h1'}>Heading 1</option>\n          <option value=\"h2\" selected={this.variant === 'h2'}>Heading 2</option>\n          <option value=\"h3\" selected={this.variant === 'h3'}>Heading 3</option>\n          <option value=\"h4\" selected={this.variant === 'h4'}>Heading 4</option>\n          <option value=\"h5\" selected={this.variant === 'h5'}>Heading 5</option>\n          <option value=\"h6\" selected={this.variant === 'h6'}>Heading 6</option>\n          <option value=\"quote\" selected={this.variant === 'quote'}>Quote</option>\n          <option value=\"code\" selected={this.variant === 'code'}>Code</option>\n          <option value=\"label\" selected={this.variant === 'label'}>Label</option>\n          <option value=\"small\" selected={this.variant === 'small'}>Small</option>\n        </select>\n        \n        <div class=\"le-text-toolbar-divider\"></div>\n        \n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isBold }}\n          onMouseDown={this.toggleBold}\n          title=\"Bold (Ctrl+B)\"\n        >\n          <strong>B</strong>\n        </button>\n        \n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isItalic }}\n          onMouseDown={this.toggleItalic}\n          title=\"Italic (Ctrl+I)\"\n        >\n          <em>I</em>\n        </button>\n        \n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isUnderline }}\n          onMouseDown={this.toggleUnderline}\n          title=\"Underline (Ctrl+U)\"\n        >\n          <span style={{ textDecoration: 'underline' }}>U</span>\n        </button>\n        \n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isStrikethrough }}\n          onMouseDown={this.toggleStrikethrough}\n          title=\"Strikethrough\"\n        >\n          <span style={{ textDecoration: 'line-through' }}>S</span>\n        </button>\n        \n        <div class=\"le-text-toolbar-divider\"></div>\n        \n        <button\n          type=\"button\"\n          class={{ 'le-text-toolbar-btn': true, 'active': this.selectionState.isLink }}\n          onMouseDown={this.toggleLink}\n          title={this.selectionState.isLink ? 'Remove link' : 'Add link'}\n        >\n          🔗\n        </button>\n      </div>\n    );\n  }\n\n  /**\n   * Get the semantic tag for the current variant\n   */\n  private getTag(): string {\n    switch (this.variant) {\n      case 'quote':\n        return 'blockquote';\n      case 'code':\n        return 'pre';\n      case 'label':\n        return 'label';\n      case 'small':\n        return 'small';\n      default:\n        return this.variant; // h1-h6, p\n    }\n  }\n\n  render() {\n    const Tag = this.getTag();\n    \n    const textStyle: { [key: string]: string } = {};\n    if (this.color) {\n      textStyle.color = this.color;\n    }\n    if (this.align) {\n      textStyle.textAlign = this.align;\n    }\n\n    const textClass = {\n      'le-text': true,\n      [`variant-${this.variant}`]: true,\n      'truncate': this.truncate,\n      [`max-lines-${this.maxLines}`]: this.truncate && this.maxLines,\n    };\n\n    // Admin mode - show rich text editor\n    if (this.adminMode) {\n      return (\n        <Host class=\"admin-mode\">\n          \n            <div class=\"le-text-editor-wrapper\">\n              {this.isFocused && this.renderToolbar()}\n              <Tag \n                class={textClass}\n                part=\"text\"\n                style={textStyle}\n              >\n                <div\n                  ref={(el) => this.editorRef = el}\n                  class=\"le-text-editor\"\n                  contentEditable={true}\n                  onInput={this.handleInput}\n                  onFocus={this.handleFocus}\n                  onBlur={this.handleBlur}\n                  onKeyUp={this.handleSelectionChange}\n                  onMouseUp={this.handleSelectionChange}\n                  innerHTML={this.content}\n                ></div>\n              </Tag>\n              {/* Hidden slot to receive light DOM content */}\n              <div class=\"hidden-slot\">\n                <slot \n                  ref={(el) => this.slotRef = el as HTMLSlotElement}\n                  onSlotchange={() => this.readSlottedContent()}\n                ></slot>\n              </div>\n            </div>\n          \n        </Host>\n      );\n    }\n\n    // Default mode - render semantic element with slotted content\n    return (\n      <Host>\n        <Tag \n          class={textClass}\n          part=\"text\"\n          style={textStyle}\n        >\n          <slot ref={(el) => this.slotRef = el as HTMLSlotElement}></slot>\n        </Tag>\n      </Host>\n    );\n  }\n}\n\n/**\n * Selection state for toolbar\n */\ninterface SelectionState {\n  isBold: boolean;\n  isItalic: boolean;\n  isUnderline: boolean;\n  isStrikethrough: boolean;\n  isLink: boolean;\n  blockType: string;\n}\n"],"version":3}

package/dist/core/components/le-turntable.d.ts

@@ -0,0 +1,11 @@
+import type { Components, JSX } from "../../dist/types/components";
+
+interface LeTurntable extends Components.LeTurntable, HTMLElement {}
+export const LeTurntable: {
+    prototype: LeTurntable;
+    new (): LeTurntable;
+};
+/**
+ * Used to define this component and all nested components recursively.
+ */
+export const defineCustomElement: () => void;