le-kit 0.1.13 → 0.1.15

package/dist/collection/components/le-tag/le-tag.css

@@ -0,0 +1,139 @@
+/**
+ * le-tag component styles
+ *
+ * CSS Custom Properties:
+ * --le-tag-font-size
+ * --le-tag-font-weight
+ * --le-tag-padding-x
+ * --le-tag-padding-y
+ * --le-tag-border-radius
+ * --le-tag-gap
+ * --le-tag-bg
+ * --le-tag-color
+ * --le-tag-border-color
+ */
+
+:host {
+  display: inline-flex;
+  --le-tag-font-size: var(--le-font-size-sm);
+  --le-tag-font-weight: var(--le-font-weight-medium);
+  --le-tag-color: var(--le-color-text);
+  --le-tag-bg: var(--le-color-surface-alt);
+  --le-tag-dismiss-size: 1.75em;
+}
+
+:host([disabled]) {
+  opacity: 0.5;
+  pointer-events: none;
+}
+
+.tag {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--le-tag-gap, 0.375rem);
+  padding: var(--le-tag-padding-y, 0.25rem) var(--le-tag-padding-x, 0.625rem);
+  font-size: var(--le-tag-font-size);
+  font-weight: var(--le-tag-font-weight);
+  line-height: 1.4;
+  color: var(--le-tag-color, var(--le-color-text, #1f2937));
+  background: var(--le-tag-bg, var(--le-color-surface-alt, #f3f4f6));
+  border: 1px solid var(--le-tag-border-color, transparent);
+  border-radius: var(--le-tag-border-radius, 9999px);
+  white-space: nowrap;
+  user-select: none;
+}
+
+/* Sizes */
+:host([size='small']) .tag {
+  --le-tag-font-size: 0.75rem;
+  --le-tag-padding-x: 0.5rem;
+  --le-tag-padding-y: 0.125rem;
+  --le-tag-gap: 0.25rem;
+  --le-tag-dismiss-size: 1.25em;
+}
+
+:host([size='large']) .tag {
+  --le-tag-font-size: 1rem;
+  --le-tag-padding-x: 0.875rem;
+  --le-tag-padding-y: 0.375rem;
+  --le-tag-gap: 0.5rem;
+  --le-tag-dismiss-size: 2em;
+}
+
+/* Variants */
+:host([variant='primary']) .tag {
+  --le-tag-bg: var(--le-color-primary, #dbeafe);
+  --le-tag-color: var(--le-color-primary-contrast, #1e40af);
+}
+
+:host([variant='success']) .tag {
+  --le-tag-bg: var(--le-color-success, #dcfce7);
+  --le-tag-color: var(--le-color-success-contrast, #166534);
+}
+
+:host([variant='warning']) .tag {
+  --le-tag-bg: var(--le-color-warning-light, #fef3c7);
+  --le-tag-color: var(--le-color-warning-contrast, #92400e);
+}
+
+:host([variant='danger']) .tag {
+  --le-tag-bg: var(--le-color-danger, #fee2e2);
+  --le-tag-color: var(--le-color-danger-contrast, #991b1b);
+}
+
+/* Icon */
+.tag-icon {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+}
+
+.tag-icon img {
+  width: 1em;
+  height: 1em;
+  object-fit: contain;
+}
+
+/* Label */
+.tag-label {
+  display: inline-block;
+}
+
+/* Dismiss button */
+.tag-dismiss {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--le-tag-dismiss-size);
+  height: var(--le-tag-dismiss-size);
+  padding: 0;
+  margin-block: calc(var(--le-tag-dismiss-size) * -1);
+  margin-right: calc(var(--le-tag-dismiss-size) / 3 * -1);
+  border: none;
+  background: transparent;
+  color: currentColor;
+  opacity: 0.6;
+  cursor: pointer;
+  border-radius: 50%;
+  transition: opacity 0.15s ease, background-color 0.15s ease;
+}
+
+.tag-dismiss:hover {
+  opacity: 1;
+  background: rgba(0, 0, 0, 0.1);
+}
+
+.tag-dismiss:focus-visible {
+  outline: 2px solid var(--le-color-primary, #3b82f6);
+  outline-offset: 1px;
+}
+
+.tag-dismiss svg {
+  width: 0.75em;
+  height: 0.75em;
+}
+
+.tag-dismiss:disabled {
+  cursor: not-allowed;
+}

package/dist/collection/components/le-tag/le-tag.js

@@ -0,0 +1,266 @@
+import { h } from "@stencil/core";
+/**
+ * A tag/chip component for displaying labels with optional dismiss functionality.
+ *
+ * @cmsEditable false
+ * @cmsCategory Form
+ *
+ * @slot - Default slot for custom content (overrides label prop)
+ *
+ * @example Basic tag
+ * ```html
+ * <le-tag label="JavaScript"></le-tag>
+ * ```
+ *
+ * @example Dismissible tag
+ * ```html
+ * <le-tag label="Remove me" dismissible></le-tag>
+ * ```
+ *
+ * @example With icon
+ * ```html
+ * <le-tag label="Settings" icon="⚙️"></le-tag>
+ * ```
+ *
+ * @example Different sizes
+ * ```html
+ * <le-tag label="Small" size="small"></le-tag>
+ * <le-tag label="Medium" size="medium"></le-tag>
+ * <le-tag label="Large" size="large"></le-tag>
+ * ```
+ *
+ * @example Different variants
+ * ```html
+ * <le-tag label="Default" variant="default"></le-tag>
+ * <le-tag label="Primary" variant="primary"></le-tag>
+ * <le-tag label="Success" variant="success"></le-tag>
+ * <le-tag label="Warning" variant="warning"></le-tag>
+ * <le-tag label="Danger" variant="danger"></le-tag>
+ * ```
+ */
+export class LeTag {
+    /**
+     * The text label to display in the tag.
+     */
+    label;
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode;
+    /**
+     * Icon to display before the label.
+     * Can be an emoji, URL, or icon name.
+     */
+    icon;
+    /**
+     * Whether the tag can be dismissed (shows close button).
+     */
+    dismissible = false;
+    /**
+     * Whether the tag is disabled.
+     */
+    disabled = false;
+    /**
+     * The size of the tag.
+     */
+    size = 'medium';
+    /**
+     * The visual variant of the tag.
+     */
+    variant = 'default';
+    /**
+     * Emitted when the dismiss button is clicked.
+     */
+    leDismiss;
+    handleDismiss = (e) => {
+        e.stopPropagation();
+        if (!this.disabled) {
+            this.leDismiss.emit();
+        }
+    };
+    renderIcon() {
+        if (!this.icon)
+            return null;
+        // Check if it's a URL (starts with http, https, or /)
+        if (this.icon.startsWith('http') || this.icon.startsWith('/')) {
+            return h("img", { class: "tag-icon", src: this.icon, alt: "" });
+        }
+        // Otherwise render as text (emoji or icon font)
+        return h("span", { class: "tag-icon" }, this.icon);
+    }
+    render() {
+        return (h("le-component", { key: 'a9af40ce7f93cf0fd866847b534ec7b387e46630', component: "le-tag" }, h("span", { key: '714d50b01509122992a7687b1df57fed42c7b74d', class: "tag" }, this.renderIcon(), h("span", { key: '0ca3f1427e7900f6a756881467d076df0b85a181', class: "tag-label" }, h("le-slot", { key: 'd2cf2b614a82b63db7fffd82aa4b27dfc4b306b0', name: "", tag: "span", type: "text" }, h("slot", { key: 'bf96f35dfea1258e2b351ac9c527a2ad2da0a28b' }, this.label))), this.dismissible && (h("button", { key: '841019b44d6a403123176840befc0d1111e26412', type: "button", class: "tag-dismiss", onClick: this.handleDismiss, disabled: this.disabled, "aria-label": "Remove" }, h("svg", { key: '3085736bd99aec5f65f6b595e0ada1afe72df81d', viewBox: "0 0 16 16", fill: "none", stroke: "currentColor", "stroke-width": "2" }, h("path", { key: 'd4b27569785c37154153294fe00f9d20661741dc', d: "M4 4l8 8M12 4l-8 8" })))))));
+    }
+    static get is() { return "le-tag"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-tag.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-tag.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "label": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The text label to display in the tag."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "label"
+            },
+            "mode": {
+                "type": "string",
+                "mutable": true,
+                "complexType": {
+                    "original": "'default' | 'admin'",
+                    "resolved": "\"admin\" | \"default\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Mode of the popover should be 'default' for internal use"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "mode"
+            },
+            "icon": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Icon to display before the label.\nCan be an emoji, URL, or icon name."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon"
+            },
+            "dismissible": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tag can be dismissed (shows close button)."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "dismissible",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the tag is disabled."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The size of the tag."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'default' | 'primary' | 'success' | 'warning' | 'danger'",
+                    "resolved": "\"danger\" | \"default\" | \"primary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "The visual variant of the tag."
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "variant",
+                "defaultValue": "'default'"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "leDismiss",
+                "name": "leDismiss",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the dismiss button is clicked."
+                },
+                "complexType": {
+                    "original": "void",
+                    "resolved": "void",
+                    "references": {}
+                }
+            }];
+    }
+}
+//# sourceMappingURL=le-tag.js.map

package/dist/collection/components/le-tag/le-tag.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-tag.js","sourceRoot":"","sources":["../../../src/components/le-tag/le-tag.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,KAAK,EAAgB,CAAC,EAAE,MAAM,eAAe,CAAC;AAExE;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AAMH,MAAM,OAAO,KAAK;IAChB;;OAEG;IACK,KAAK,CAAS;IAEtB;;OAEG;IACqC,IAAI,CAAsB;IAElE;;;OAGG;IACK,IAAI,CAAU;IAEtB;;OAEG;IACK,WAAW,GAAY,KAAK,CAAC;IAErC;;OAEG;IACsB,QAAQ,GAAY,KAAK,CAAC;IAEnD;;OAEG;IACsB,IAAI,GAAiC,QAAQ,CAAC;IAEvE;;OAEG;IACsB,OAAO,GAA6D,SAAS,CAAC;IAEvG;;OAEG;IACM,SAAS,CAAqB;IAE/B,aAAa,GAAG,CAAC,CAAa,EAAE,EAAE;QACxC,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,IAAI,CAAC,IAAI,CAAC,QAAQ,EAAE,CAAC;YACnB,IAAI,CAAC,SAAS,CAAC,IAAI,EAAE,CAAC;QACxB,CAAC;IACH,CAAC,CAAC;IAEM,UAAU;QAChB,IAAI,CAAC,IAAI,CAAC,IAAI;YAAE,OAAO,IAAI,CAAC;QAE5B,sDAAsD;QACtD,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,MAAM,CAAC,IAAI,IAAI,CAAC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,CAAC;YAC9D,OAAO,WAAK,KAAK,EAAC,UAAU,EAAC,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,GAAG,EAAC,EAAE,GAAG,CAAC;QACzD,CAAC;QAED,gDAAgD;QAChD,OAAO,YAAM,KAAK,EAAC,UAAU,IAAE,IAAI,CAAC,IAAI,CAAQ,CAAC;IACnD,CAAC;IAED,MAAM;QACJ,OAAO,CACL,qEAAc,SAAS,EAAC,QAAQ;YAC9B,6DAAM,KAAK,EAAC,KAAK;gBACd,IAAI,CAAC,UAAU,EAAE;gBAClB,6DAAM,KAAK,EAAC,WAAW;oBACrB,gEAAS,IAAI,EAAC,EAAE,EAAC,GAAG,EAAC,MAAM,EAAC,IAAI,EAAC,MAAM;wBACrC,+DAAO,IAAI,CAAC,KAAK,CAAQ,CACjB,CACL;gBACN,IAAI,CAAC,WAAW,IAAI,CACnB,+DAAQ,IAAI,EAAC,QAAQ,EAAC,KAAK,EAAC,aAAa,EAAC,OAAO,EAAE,IAAI,CAAC,aAAa,EAAE,QAAQ,EAAE,IAAI,CAAC,QAAQ,gBAAa,QAAQ;oBACjH,4DAAK,OAAO,EAAC,WAAW,EAAC,IAAI,EAAC,MAAM,EAAC,MAAM,EAAC,cAAc,kBAAc,GAAG;wBACzE,6DAAM,CAAC,EAAC,oBAAoB,GAAG,CAC3B,CACC,CACV,CACI,CACM,CAChB,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CACF","sourcesContent":["import { Component, Prop, Event, EventEmitter, h } from '@stencil/core';\n\n/**\n * A tag/chip component for displaying labels with optional dismiss functionality.\n *\n * @cmsEditable false\n * @cmsCategory Form\n *\n * @slot - Default slot for custom content (overrides label prop)\n *\n * @example Basic tag\n * ```html\n * <le-tag label=\"JavaScript\"></le-tag>\n * ```\n *\n * @example Dismissible tag\n * ```html\n * <le-tag label=\"Remove me\" dismissible></le-tag>\n * ```\n *\n * @example With icon\n * ```html\n * <le-tag label=\"Settings\" icon=\"⚙️\"></le-tag>\n * ```\n *\n * @example Different sizes\n * ```html\n * <le-tag label=\"Small\" size=\"small\"></le-tag>\n * <le-tag label=\"Medium\" size=\"medium\"></le-tag>\n * <le-tag label=\"Large\" size=\"large\"></le-tag>\n * ```\n *\n * @example Different variants\n * ```html\n * <le-tag label=\"Default\" variant=\"default\"></le-tag>\n * <le-tag label=\"Primary\" variant=\"primary\"></le-tag>\n * <le-tag label=\"Success\" variant=\"success\"></le-tag>\n * <le-tag label=\"Warning\" variant=\"warning\"></le-tag>\n * <le-tag label=\"Danger\" variant=\"danger\"></le-tag>\n * ```\n */\n@Component({\n  tag: 'le-tag',\n  styleUrl: 'le-tag.css',\n  shadow: true,\n})\nexport class LeTag {\n  /**\n   * The text label to display in the tag.\n   */\n  @Prop() label: string;\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   * Icon to display before the label.\n   * Can be an emoji, URL, or icon name.\n   */\n  @Prop() icon?: string;\n\n  /**\n   * Whether the tag can be dismissed (shows close button).\n   */\n  @Prop() dismissible: boolean = false;\n\n  /**\n   * Whether the tag is disabled.\n   */\n  @Prop({ reflect: true }) disabled: boolean = false;\n\n  /**\n   * The size of the tag.\n   */\n  @Prop({ reflect: true }) size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * The visual variant of the tag.\n   */\n  @Prop({ reflect: true }) variant: 'default' | 'primary' | 'success' | 'warning' | 'danger' = 'default';\n\n  /**\n   * Emitted when the dismiss button is clicked.\n   */\n  @Event() leDismiss: EventEmitter<void>;\n\n  private handleDismiss = (e: MouseEvent) => {\n    e.stopPropagation();\n    if (!this.disabled) {\n      this.leDismiss.emit();\n    }\n  };\n\n  private renderIcon() {\n    if (!this.icon) return null;\n\n    // Check if it's a URL (starts with http, https, or /)\n    if (this.icon.startsWith('http') || this.icon.startsWith('/')) {\n      return <img class=\"tag-icon\" src={this.icon} alt=\"\" />;\n    }\n\n    // Otherwise render as text (emoji or icon font)\n    return <span class=\"tag-icon\">{this.icon}</span>;\n  }\n\n  render() {\n    return (\n      <le-component component=\"le-tag\">\n        <span class=\"tag\">\n          {this.renderIcon()}\n          <span class=\"tag-label\">\n            <le-slot name=\"\" tag=\"span\" type=\"text\">\n              <slot>{this.label}</slot>\n            </le-slot>\n          </span>\n          {this.dismissible && (\n            <button type=\"button\" class=\"tag-dismiss\" onClick={this.handleDismiss} disabled={this.disabled} aria-label=\"Remove\">\n              <svg viewBox=\"0 0 16 16\" fill=\"none\" stroke=\"currentColor\" stroke-width=\"2\">\n                <path d=\"M4 4l8 8M12 4l-8 8\" />\n              </svg>\n            </button>\n          )}\n        </span>\n      </le-component>\n    );\n  }\n}\n"]}

package/dist/collection/components/le-turntable/le-turntable.js

@@ -120,7 +120,7 @@ export class LeTurntable {
         this.el.style.transform = `rotate(${angle}deg)`;
     }
     render() {
-        return (h("div", { key: 'ec9a506a360881ab3c3df97027c8a25d663f6819', class: "turntable", onMouseDown: this.handleMouseDown.bind(this) }, h("slot", { key: '926a84fa75952bdc3e44f1b2146848401e8ab10f' })));
+        return (h("div", { key: '9c762d15b467b7c5fa6170b49581d31104f6e76d', class: "turntable", onMouseDown: this.handleMouseDown.bind(this) }, h("slot", { key: '8d30d85ebf8002771ff05f758b4b4bc6c12b72c2' })));
     }
     static get is() { return "le-turntable"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/dist/components/assets/.gitkeep

@@ -0,0 +1 @@
+Assets directory for le-kit components