le-kit 0.0.3 → 0.1.1

package/dist/esm/le-round-progress.entry.js

@@ -0,0 +1,104 @@
+import { r as registerInstance, h as getElement, i as h } from './index-D71TXvJa.js';
+
+const leRoundProgressCss = ".round-progress--container{position:relative}.round-progress{position:absolute;top:0;left:0;right:0;bottom:0;display:block}.round-progress--progress{filter:drop-shadow(var(--progress-shadow))}.round-progress--circle{fill:none;stroke:var(--progress-color, #999);stroke-width:var(--progress-width, 4);stroke-linecap:var(--progress-linecap, round);animation:progress--circle 0.5s ease-out forwards;transition:stroke-dasharray 0.5s ease-out}@keyframes progress--circle{0%{stroke-dasharray:0 1000}}.round-progress--path{fill:none;stroke-linecap:round}";
+
+const LeRoundProgress = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    // progress value coming from an attribute
+    value = 0;
+    updateValue(newValue) {
+        this.value = parseFloat(newValue);
+    }
+    // padding value coming from an attribute
+    padding = 0;
+    updatePadding(newValue) {
+        this.padding = parseFloat(newValue);
+        this.calcParams();
+    }
+    // the progress backgrounds can be as many as needed
+    // but it should be JSON format: double quotes and strict commas
+    paths;
+    updateProgressBackgrounds(newValue) {
+        this.progressPaths = JSON.parse(newValue);
+    }
+    progressPaths;
+    params;
+    /**
+     * Component lifecycles
+     *
+     * Before the component is loaded, we need to calculate and update params
+     * using the component size (width of the round progress)
+     * and progress width (max of )
+     */
+    componentWillLoad() {
+        if (typeof this.paths === 'string') {
+            this.updateProgressBackgrounds(this.paths);
+        }
+        this.calcParams();
+    }
+    calcParams() {
+        // get element width
+        const width = this.el.getBoundingClientRect().width;
+        const diameter = width - this.padding;
+        // calc circumference — we'll need it later to calc the stroke paths
+        const circumference = Math.PI * diameter;
+        this.params = { width, diameter, circumference };
+    }
+    /**
+     * Returns the viewPath attribute value for the SVG
+     * based on the width of the parent element
+     */
+    getViewBox() {
+        return '0 0 ' + this.params.width + ' ' + this.params.width;
+    }
+    /**
+     * Returns the circular path for the progress stroke
+     * and additional paths in the background
+     */
+    getPath() {
+        return ('M' +
+            this.params.width / 2 +
+            ' ' +
+            (this.params.width - this.params.diameter) / 2 +
+            ' a ' +
+            this.params.diameter / 2 +
+            ' ' +
+            this.params.diameter / 2 +
+            ' 0 0 1 0 ' +
+            this.params.diameter +
+            ' a ' +
+            this.params.diameter / 2 +
+            ' ' +
+            this.params.diameter / 2 +
+            ' 0 0 1 0 -' +
+            this.params.diameter);
+    }
+    getStrokeDashArray() {
+        return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;
+    }
+    getPaths() {
+        if (!this.progressPaths || !this.progressPaths.length) {
+            return null;
+        }
+        let paths = [];
+        this.progressPaths.forEach(bg => {
+            paths.push(h("path", { class: "round-progress--path", d: this.getPath(), stroke: bg.color, "stroke-width": bg.width, "stroke-dasharray": bg.dasharray, "stroke-linecap": bg.linecap }));
+        });
+        return (h("svg", { viewBox: this.getViewBox(), class: "round-progress" }, paths));
+    }
+    render() {
+        return (h("div", { key: '1ffc36704bee5d0822623ac4559ad2d4690095a4', class: "round-progress--container" }, this.getPaths(), h("svg", { key: '12e4dfe5fe2df0cb672d4c001459b8dcc8253591', viewBox: this.getViewBox(), class: "round-progress round-progress--progress" }, h("path", { key: 'd8ce69610687fb578ce2104bd3eccba24951dd96', class: "round-progress--circle", "stroke-dasharray": this.getStrokeDashArray(), d: this.getPath() })), h("slot", { key: '3976b08a7e838579d6af34a778a8756255d98e57' })));
+    }
+    static get watchers() { return {
+        "value": ["updateValue"],
+        "padding": ["updatePadding"],
+        "paths": ["updateProgressBackgrounds"]
+    }; }
+};
+LeRoundProgress.style = leRoundProgressCss;
+
+export { LeRoundProgress as le_round_progress };
+//# sourceMappingURL=le-round-progress.entry.js.map

package/dist/esm/le-round-progress.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-round-progress.entry.js","sources":["src/components/le-round-progress/le-round-progress.css?tag=le-round-progress&encapsulation=shadow","src/components/le-round-progress/le-round-progress.tsx"],"sourcesContent":[".round-progress--container {\n  position: relative;\n}\n\n.round-progress {\n  position: absolute;\n  top: 0;\n  left: 0;\n  right: 0;\n  bottom: 0;\n  display: block;\n}\n\n.round-progress--progress {\n  filter: drop-shadow(var(--progress-shadow));\n}\n\n.round-progress--circle {\n  fill: none;\n  stroke: var(--progress-color, #999);\n  stroke-width: var(--progress-width, 4);\n  stroke-linecap: var(--progress-linecap, round);\n  animation: progress--circle 0.5s ease-out forwards;\n  transition: stroke-dasharray 0.5s ease-out;\n}\n\n@keyframes progress--circle {\n  0% { stroke-dasharray: 0 1000; }\n}\n\n.round-progress--path {\n  fill: none;\n  stroke-linecap: round;\n}\n","import { Component, Element, h, Prop, State, Watch } from '@stencil/core';\n\n@Component({\n  tag: 'le-round-progress',\n  styleUrl: 'le-round-progress.css',\n  shadow: true,\n})\nexport class LeRoundProgress {\n  // host element\n  @Element() el: HTMLElement;\n\n  // progress value coming from an attribute\n  @Prop() value: number = 0;\n  @Watch('value')\n  updateValue(newValue: string) {\n    this.value = parseFloat(newValue);\n  }\n\n  // padding value coming from an attribute\n  @Prop() padding: number = 0;\n  @Watch('padding')\n  updatePadding(newValue: string) {\n    this.padding = parseFloat(newValue);\n    this.calcParams();\n  }\n\n  // the progress backgrounds can be as many as needed\n  // but it should be JSON format: double quotes and strict commas\n  @Prop() paths: string;\n  @Watch('paths')\n  updateProgressBackgrounds(newValue: string) {\n    this.progressPaths = JSON.parse(newValue);\n  }\n  progressPaths: any[];\n\n  @State() params: {\n    width: number;\n    diameter: number;\n    circumference: number;\n  };\n\n  /**\n   * Component lifecycles\n   *\n   * Before the component is loaded, we need to calculate and update params\n   * using the component size (width of the round progress)\n   * and progress width (max of )\n   */\n  componentWillLoad() {\n    if (typeof this.paths === 'string') {\n      this.updateProgressBackgrounds(this.paths);\n    }\n    this.calcParams();\n  }\n\n  calcParams() {\n    // get element width\n    const width = this.el.getBoundingClientRect().width;\n    const diameter = width - this.padding;\n    // calc circumference — we'll need it later to calc the stroke paths\n    const circumference = Math.PI * diameter;\n\n    this.params = { width, diameter, circumference };\n  }\n\n  /**\n   * Returns the viewPath attribute value for the SVG\n   * based on the width of the parent element\n   */\n  getViewBox() {\n    return '0 0 ' + this.params.width + ' ' + this.params.width;\n  }\n\n  /**\n   * Returns the circular path for the progress stroke\n   * and additional paths in the background\n   */\n  getPath() {\n    return (\n      'M' +\n      this.params.width / 2 +\n      ' ' +\n      (this.params.width - this.params.diameter) / 2 +\n      ' a ' +\n      this.params.diameter / 2 +\n      ' ' +\n      this.params.diameter / 2 +\n      ' 0 0 1 0 ' +\n      this.params.diameter +\n      ' a ' +\n      this.params.diameter / 2 +\n      ' ' +\n      this.params.diameter / 2 +\n      ' 0 0 1 0 -' +\n      this.params.diameter\n    );\n  }\n\n  getStrokeDashArray() {\n    return (this.value / 100) * this.params.circumference + ', ' + this.params.circumference;\n  }\n\n  getPaths() {\n    if (!this.progressPaths || !this.progressPaths.length) {\n      return null;\n    }\n    let paths = [];\n    this.progressPaths.forEach(bg => {\n      paths.push(<path class=\"round-progress--path\" d={this.getPath()} stroke={bg.color} stroke-width={bg.width} stroke-dasharray={bg.dasharray} stroke-linecap={bg.linecap} />);\n    });\n    return (\n      <svg viewBox={this.getViewBox()} class=\"round-progress\">\n        {paths}\n      </svg>\n    );\n  }\n\n  render() {\n    return (\n      <div class=\"round-progress--container\">\n        {this.getPaths()}\n        <svg viewBox={this.getViewBox()} class=\"round-progress round-progress--progress\">\n          <path class=\"round-progress--circle\" stroke-dasharray={this.getStrokeDashArray()} d={this.getPath()} />\n        </svg>\n        <slot />\n      </div>\n    );\n  }\n}\n"],"names":[],"mappings":";;AAAA,MAAM,kBAAkB,GAAG,oiBAAoiB;;MCOljB,eAAe,GAAA,MAAA;;;;;;IAKlB,KAAK,GAAW,CAAC;AAEzB,IAAA,WAAW,CAAC,QAAgB,EAAA;AAC1B,QAAA,IAAI,CAAC,KAAK,GAAG,UAAU,CAAC,QAAQ,CAAC;;;IAI3B,OAAO,GAAW,CAAC;AAE3B,IAAA,aAAa,CAAC,QAAgB,EAAA;AAC5B,QAAA,IAAI,CAAC,OAAO,GAAG,UAAU,CAAC,QAAQ,CAAC;QACnC,IAAI,CAAC,UAAU,EAAE;;;;AAKX,IAAA,KAAK;AAEb,IAAA,yBAAyB,CAAC,QAAgB,EAAA;QACxC,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,KAAK,CAAC,QAAQ,CAAC;;AAE3C,IAAA,aAAa;AAEJ,IAAA,MAAM;AAMf;;;;;;AAMG;IACH,iBAAiB,GAAA;AACf,QAAA,IAAI,OAAO,IAAI,CAAC,KAAK,KAAK,QAAQ,EAAE;AAClC,YAAA,IAAI,CAAC,yBAAyB,CAAC,IAAI,CAAC,KAAK,CAAC;;QAE5C,IAAI,CAAC,UAAU,EAAE;;IAGnB,UAAU,GAAA;;QAER,MAAM,KAAK,GAAG,IAAI,CAAC,EAAE,CAAC,qBAAqB,EAAE,CAAC,KAAK;AACnD,QAAA,MAAM,QAAQ,GAAG,KAAK,GAAG,IAAI,CAAC,OAAO;;AAErC,QAAA,MAAM,aAAa,GAAG,IAAI,CAAC,EAAE,GAAG,QAAQ;QAExC,IAAI,CAAC,MAAM,GAAG,EAAE,KAAK,EAAE,QAAQ,EAAE,aAAa,EAAE;;AAGlD;;;AAGG;IACH,UAAU,GAAA;AACR,QAAA,OAAO,MAAM,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,GAAG,GAAG,IAAI,CAAC,MAAM,CAAC,KAAK;;AAG7D;;;AAGG;IACH,OAAO,GAAA;AACL,QAAA,QACE,GAAG;AACH,YAAA,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,CAAC;YACrB,GAAG;AACH,YAAA,CAAC,IAAI,CAAC,MAAM,CAAC,KAAK,GAAG,IAAI,CAAC,MAAM,CAAC,QAAQ,IAAI,CAAC;YAC9C,KAAK;AACL,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC;YACxB,GAAG;AACH,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC;YACxB,WAAW;YACX,IAAI,CAAC,MAAM,CAAC,QAAQ;YACpB,KAAK;AACL,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC;YACxB,GAAG;AACH,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ,GAAG,CAAC;YACxB,YAAY;AACZ,YAAA,IAAI,CAAC,MAAM,CAAC,QAAQ;;IAIxB,kBAAkB,GAAA;QAChB,OAAO,CAAC,IAAI,CAAC,KAAK,GAAG,GAAG,IAAI,IAAI,CAAC,MAAM,CAAC,aAAa,GAAG,IAAI,GAAG,IAAI,CAAC,MAAM,CAAC,aAAa;;IAG1F,QAAQ,GAAA;AACN,QAAA,IAAI,CAAC,IAAI,CAAC,aAAa,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,MAAM,EAAE;AACrD,YAAA,OAAO,IAAI;;QAEb,IAAI,KAAK,GAAG,EAAE;AACd,QAAA,IAAI,CAAC,aAAa,CAAC,OAAO,CAAC,EAAE,IAAG;YAC9B,KAAK,CAAC,IAAI,CAAC,CAAA,CAAA,MAAA,EAAA,EAAM,KAAK,EAAC,sBAAsB,EAAC,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,EAAE,MAAM,EAAE,EAAE,CAAC,KAAK,EAAA,cAAA,EAAgB,EAAE,CAAC,KAAK,EAAoB,kBAAA,EAAA,EAAE,CAAC,SAAS,oBAAkB,EAAE,CAAC,OAAO,EAAA,CAAI,CAAC;AAC5K,SAAC,CAAC;QACF,QACE,CAAK,CAAA,KAAA,EAAA,EAAA,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAC,gBAAgB,EAAA,EACpD,KAAK,CACF;;IAIV,MAAM,GAAA;AACJ,QAAA,QACE,CAAA,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAK,KAAK,EAAC,2BAA2B,EAAA,EACnC,IAAI,CAAC,QAAQ,EAAE,EAChB,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,OAAO,EAAE,IAAI,CAAC,UAAU,EAAE,EAAE,KAAK,EAAC,yCAAyC,EAAA,EAC9E,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAM,KAAK,EAAC,wBAAwB,EAAmB,kBAAA,EAAA,IAAI,CAAC,kBAAkB,EAAE,EAAE,CAAC,EAAE,IAAI,CAAC,OAAO,EAAE,GAAI,CACnG,EACN,CAAQ,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAA,CACJ;;;;;;;;;;;;"}

package/dist/esm/le-stack.entry.js

@@ -0,0 +1,133 @@
+import { r as registerInstance, h as getElement, i as h } from './index-D71TXvJa.js';
+import { c as classnames } from './utils-CJLZrrdC.js';
+
+const leStackDefaultCss = ":host{display:block}:host([hidden]){display:none}.stack{gap:var(--le-stack-gap, var(--le-space-md))}:host(.full-width){width:100%}:host(.full-height){height:100%}:host(.direction-horizontal) .stack{min-height:0}:host(.direction-vertical) .stack{min-width:0}";
+
+const LeStack = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(this); }
+    /**
+     * Direction of the stack layout
+     * @allowedValues horizontal | vertical
+     */
+    direction = 'horizontal';
+    /**
+     * Gap between items (CSS value like '8px', '1rem', 'var(--le-space-md)')
+     */
+    gap;
+    /**
+     * Alignment of items on the cross axis
+     * @allowedValues start | center | end | stretch | baseline
+     */
+    align = 'stretch';
+    /**
+     * Distribution of items on the main axis
+     * @allowedValues start | center | end | space-between | space-around | space-evenly
+     */
+    justify = 'start';
+    /**
+     * Whether items should wrap to multiple lines
+     */
+    wrap = false;
+    /**
+     * Alignment of wrapped lines (only applies when wrap is true)
+     * @allowedValues start | center | end | stretch | space-between | space-around
+     */
+    alignContent = 'stretch';
+    /**
+     * Whether to reverse the order of items
+     */
+    reverse = false;
+    /**
+     * Maximum number of items allowed in the stack (for CMS validation)
+     * @min 1
+     */
+    maxItems;
+    /**
+     * Whether the stack should take full width of its container
+     */
+    fullWidth = false;
+    /**
+     * Whether the stack should take full height of its container
+     */
+    fullHeight = false;
+    /**
+     * Padding inside the stack container (CSS value)
+     */
+    padding;
+    getFlexDirection() {
+        const base = this.direction === 'vertical' ? 'column' : 'row';
+        return this.reverse ? `${base}-reverse` : base;
+    }
+    getAlignItems() {
+        const alignMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+            baseline: 'baseline',
+        };
+        return alignMap[this.align] || 'stretch';
+    }
+    getJustifyContent() {
+        const justifyMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            'space-between': 'space-between',
+            'space-around': 'space-around',
+            'space-evenly': 'space-evenly',
+        };
+        return justifyMap[this.justify] || 'flex-start';
+    }
+    getAlignContent() {
+        const alignContentMap = {
+            start: 'flex-start',
+            center: 'center',
+            end: 'flex-end',
+            stretch: 'stretch',
+            'space-between': 'space-between',
+            'space-around': 'space-around',
+        };
+        return alignContentMap[this.alignContent] || 'stretch';
+    }
+    render() {
+        const style = {
+            display: 'flex',
+            flexDirection: this.getFlexDirection(),
+            alignItems: this.getAlignItems(),
+            justifyContent: this.getJustifyContent(),
+            flexWrap: this.wrap ? 'wrap' : 'nowrap',
+        };
+        if (this.wrap) {
+            style.alignContent = this.getAlignContent();
+        }
+        if (this.gap) {
+            style.gap = this.gap;
+        }
+        if (this.padding) {
+            style.padding = this.padding;
+        }
+        // if (this.fullWidth) {
+        //   style.width = '100%';
+        // }
+        // if (this.fullHeight) {
+        //   style.height = '100%';
+        // }
+        const hostClass = classnames(`direction-${this.direction}`, {
+            'wrap': this.wrap,
+            'reverse': this.reverse,
+            'full-width': this.fullWidth,
+            'full-height': this.fullHeight,
+        });
+        // Slot style for admin mode - make items display in the same direction
+        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()};`;
+        return (h("le-component", { key: 'e1547512915e47e4c5ddbcbcbd3971579e45a140', component: "le-stack", hostClass: hostClass }, h("div", { key: '61a4fd57c61c56a8abac0ae2348e6e48034efc4d', class: "stack", part: "stack", style: style }, h("le-slot", { key: '0ef0f996ce0efcb20a47171197d82e5b326c7e8c', name: "", description: `Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`, type: "slot", "allowed-components": "le-text,le-box,le-card,le-button,le-stack", slotStyle: slotStyle }, h("slot", { key: 'f41f351d8b6dbdaf20756e9bc317a35a0424fc6c' })))));
+    }
+};
+LeStack.style = leStackDefaultCss;
+
+export { LeStack as le_stack };
+//# sourceMappingURL=le-stack.entry.js.map

package/dist/esm/le-stack.entry.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-stack.entry.js","sources":["src/components/le-stack/le-stack.default.css?tag=le-stack&encapsulation=shadow","src/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 } 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      <le-component component=\"le-stack\" hostClass={hostClass}>\n        <div class=\"stack\" part=\"stack\" style={style}>\n          <le-slot\n            name=\"\"\n            description={`Items arranged ${this.direction}ly${this.maxItems ? ` (max ${this.maxItems})` : ''}`}\n            type=\"slot\"\n            allowed-components=\"le-text,le-box,le-card,le-button,le-stack\"\n            slotStyle={slotStyle}\n          >\n            <slot></slot>\n          </le-slot>\n        </div>\n      </le-component>\n    );\n  }\n}\n"],"names":[],"mappings":";;;AAAA,MAAM,iBAAiB,GAAG,mQAAmQ;;MCwBhR,OAAO,GAAA,MAAA;;;;;AAGlB;;;AAGG;IACK,SAAS,GAA8B,YAAY;AAE3D;;AAEG;AACK,IAAA,GAAG;AAEX;;;AAGG;IACK,KAAK,GAAwD,SAAS;AAE9E;;;AAGG;IACK,OAAO,GAAmF,OAAO;AAEzG;;AAEG;IACK,IAAI,GAAY,KAAK;AAE7B;;;AAGG;IACK,YAAY,GAA8E,SAAS;AAE3G;;AAEG;IACK,OAAO,GAAY,KAAK;AAEhC;;;AAGG;AACK,IAAA,QAAQ;AAEhB;;AAEG;IACK,SAAS,GAAY,KAAK;AAElC;;AAEG;IACK,UAAU,GAAY,KAAK;AAEnC;;AAEG;AACK,IAAA,OAAO;IAEP,gBAAgB,GAAA;AACtB,QAAA,MAAM,IAAI,GAAG,IAAI,CAAC,SAAS,KAAK,UAAU,GAAG,QAAQ,GAAG,KAAK;AAC7D,QAAA,OAAO,IAAI,CAAC,OAAO,GAAG,CAAG,EAAA,IAAI,CAAU,QAAA,CAAA,GAAG,IAAI;;IAGxC,aAAa,GAAA;AACnB,QAAA,MAAM,QAAQ,GAA2B;AACvC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,QAAQ,EAAE,UAAU;SACrB;QACD,OAAO,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,IAAI,SAAS;;IAGlC,iBAAiB,GAAA;AACvB,QAAA,MAAM,UAAU,GAA2B;AACzC,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,eAAe,EAAE,eAAe;AAChC,YAAA,cAAc,EAAE,cAAc;AAC9B,YAAA,cAAc,EAAE,cAAc;SAC/B;QACD,OAAO,UAAU,CAAC,IAAI,CAAC,OAAO,CAAC,IAAI,YAAY;;IAGzC,eAAe,GAAA;AACrB,QAAA,MAAM,eAAe,GAA2B;AAC9C,YAAA,KAAK,EAAE,YAAY;AACnB,YAAA,MAAM,EAAE,QAAQ;AAChB,YAAA,GAAG,EAAE,UAAU;AACf,YAAA,OAAO,EAAE,SAAS;AAClB,YAAA,eAAe,EAAE,eAAe;AAChC,YAAA,cAAc,EAAE,cAAc;SAC/B;QACD,OAAO,eAAe,CAAC,IAAI,CAAC,YAAY,CAAC,IAAI,SAAS;;IAGxD,MAAM,GAAA;AACJ,QAAA,MAAM,KAAK,GAA8B;AACvC,YAAA,OAAO,EAAE,MAAM;AACf,YAAA,aAAa,EAAE,IAAI,CAAC,gBAAgB,EAAE;AACtC,YAAA,UAAU,EAAE,IAAI,CAAC,aAAa,EAAE;AAChC,YAAA,cAAc,EAAE,IAAI,CAAC,iBAAiB,EAAE;YACxC,QAAQ,EAAE,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ;SACxC;AAED,QAAA,IAAI,IAAI,CAAC,IAAI,EAAE;AACb,YAAA,KAAK,CAAC,YAAY,GAAG,IAAI,CAAC,eAAe,EAAE;;AAG7C,QAAA,IAAI,IAAI,CAAC,GAAG,EAAE;AACZ,YAAA,KAAK,CAAC,GAAG,GAAG,IAAI,CAAC,GAAG;;AAGtB,QAAA,IAAI,IAAI,CAAC,OAAO,EAAE;AAChB,YAAA,KAAK,CAAC,OAAO,GAAG,IAAI,CAAC,OAAO;;;;;;;;QAW9B,MAAM,SAAS,GAAG,UAAU,CAC1B,aAAa,IAAI,CAAC,SAAS,CAAA,CAAE,EAC7B;YACE,MAAM,EAAE,IAAI,CAAC,IAAI;YACjB,SAAS,EAAE,IAAI,CAAC,OAAO;YACvB,YAAY,EAAE,IAAI,CAAC,SAAS;YAC5B,aAAa,EAAE,IAAI,CAAC,UAAU;AAC/B,SAAA,CACF;;AAGD,QAAA,MAAM,SAAS,GAAG,CAAA,+BAAA,EAAkC,IAAI,CAAC,gBAAgB,EAAE,CAAA,OAAA,EAAU,IAAI,CAAC,GAAG,IAAI,oBAAoB,CAAgB,aAAA,EAAA,IAAI,CAAC,IAAI,GAAG,MAAM,GAAG,QAAQ,sBAAsB,IAAI,CAAC,iBAAiB,EAAE,kBAAkB,IAAI,CAAC,aAAa,EAAE,GAAG;QAEzP,QACE,qEAAc,SAAS,EAAC,UAAU,EAAC,SAAS,EAAE,SAAS,EAAA,EACrD,CAAK,CAAA,KAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,KAAK,EAAC,OAAO,EAAC,IAAI,EAAC,OAAO,EAAC,KAAK,EAAE,KAAK,EAAA,EAC1C,CAAA,CAAA,SAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EACE,IAAI,EAAC,EAAE,EACP,WAAW,EAAE,CAAkB,eAAA,EAAA,IAAI,CAAC,SAAS,CAAA,EAAA,EAAK,IAAI,CAAC,QAAQ,GAAG,CAAA,MAAA,EAAS,IAAI,CAAC,QAAQ,CAAA,CAAA,CAAG,GAAG,EAAE,CAAA,CAAE,EAClG,IAAI,EAAC,MAAM,EACQ,oBAAA,EAAA,2CAA2C,EAC9D,SAAS,EAAE,SAAS,EAAA,EAEpB,CAAA,CAAA,MAAA,EAAA,EAAA,GAAA,EAAA,0CAAA,EAAA,CAAa,CACL,CACN,CACO;;;;;;;"}

package/dist/esm/le-text.entry.js

@@ -0,0 +1,333 @@
+import { r as registerInstance, h as getElement, i as h, H as Host } from './index-D71TXvJa.js';
+import { o as observeModeChanges } from './utils-CJLZrrdC.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 = class {
+    constructor(hostRef) {
+        registerInstance(this, hostRef);
+    }
+    get el() { return getElement(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("le-component", { component: "le-text" }, 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"]
+    }; }
+};
+LeText.style = leTextDefaultCss;
+
+export { LeText as le_text };
+//# sourceMappingURL=le-text.entry.js.map