le-kit 0.1.6 → 0.1.8

package/dist/core/collection/components/le-button/le-button.default.css

@@ -0,0 +1,263 @@
+/**
+ * Default mode styles for le-button
+ * Uses global design tokens with component-specific overrides
+ */
+:host {
+  display: inline-block;
+  
+  /* Component-specific tokens */
+  --le-button-border-radius: var(--le-radius-md);
+  --le-button-padding-x: 0.4rem;
+  --le-button-padding-y: 0.4rem;
+  --le-button-small-padding: 0.25rem;
+  --le-button-font-size: var(--le-font-size-md);
+  --le-button-font-weight: var(--le-font-weight-medium);
+  --le-button-transition: var(--le-transition-fast);
+  --le-button-icon-aspect-ratio: 1;
+  
+  /* Internal state variables - set by color classes */
+  --_btn-bg: var(--le-color-primary);
+  --_btn-bg-hover: var(--le-color-primary-dark);
+  --_btn-bg-system: var(--le-color-black);
+  --_btn-color: var(--le-color-primary-contrast);
+  --_btn-border-color: var(--le-color-primary);
+}
+
+:host([full-width]) {
+  display: block;
+  width: 100%;
+}
+
+.button {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--le-spacing-3);
+  width: 100%;
+  padding: var(--le-button-padding-y) var(--le-button-padding-x);
+  border: 1px solid var(--_btn-border-color);
+  border-radius: var(--le-button-border-radius);
+  background: var(--_btn-bg);
+  color: var(--_btn-color);
+  font-family: var(--le-font-family-base);
+  font-size: var(--le-button-font-size);
+  font-weight: var(--le-button-font-weight);
+  line-height: var(--le-line-height-tight);
+  text-decoration: none;
+  cursor: pointer;
+  transition: 
+    background-color var(--le-button-transition) var(--le-transition-easing),
+    border-color var(--le-button-transition) var(--le-transition-easing),
+    box-shadow var(--le-button-transition) var(--le-transition-easing),
+    transform var(--le-button-transition) var(--le-transition-easing);
+}
+
+.button:hover:not(:disabled) {
+  background: var(--_btn-bg-hover);
+  border-color: var(--_btn-bg-hover);
+}
+
+.button:active:not(:disabled) {
+  transform: translateY(1px);
+}
+
+.button:focus-visible {
+  outline: 2px solid var(--le-color-focus);
+  outline-offset: 2px;
+}
+
+.button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+/* ===========================================
+ * COLOR VARIANTS - Use theme semantic colors
+ * =========================================== */
+
+/* Primary (default) */
+:host > le-component.color-primary {
+  --_btn-bg: var(--le-color-primary);
+  --_btn-bg-hover: var(--le-color-primary-dark);
+  --_btn-color: var(--le-color-primary-contrast);
+  --_btn-border-color: var(--le-color-primary);
+}
+
+/* Secondary */
+:host > le-component.color-secondary {
+  --_btn-bg: var(--le-color-secondary);
+  --_btn-bg-hover: var(--le-color-secondary-dark);
+  --_btn-color: var(--le-color-secondary-contrast);
+  --_btn-border-color: var(--le-color-secondary);
+}
+
+/* Success */
+:host > le-component.color-success {
+  --_btn-bg: var(--le-color-success);
+  --_btn-bg-hover: var(--le-color-success-dark);
+  --_btn-color: var(--le-color-success-contrast);
+  --_btn-border-color: var(--le-color-success);
+}
+
+/* Warning */
+:host > le-component.color-warning {
+  --_btn-bg: var(--le-color-warning);
+  --_btn-bg-hover: var(--le-color-warning-dark);
+  --_btn-color: var(--le-color-warning-contrast);
+  --_btn-border-color: var(--le-color-warning);
+}
+
+/* Danger */
+:host > le-component.color-danger {
+  --_btn-bg: var(--le-color-danger);
+  --_btn-bg-hover: var(--le-color-danger-dark);
+  --_btn-color: var(--le-color-danger-contrast);
+  --_btn-border-color: var(--le-color-danger);
+}
+
+/* Info */
+:host > le-component.color-info {
+  --_btn-bg: var(--le-color-info);
+  --_btn-bg-hover: var(--le-color-info-dark);
+  --_btn-color: var(--le-color-info-contrast);
+  --_btn-border-color: var(--le-color-info);
+}
+
+/* ===========================================
+ * STYLE VARIANTS
+ * =========================================== */
+
+/* Solid (default) - already styled by color classes */
+:host > le-component.variant-solid .button {
+  box-shadow: var(--le-shadow-sm);
+}
+
+:host > le-component.variant-solid .button:hover:not(:disabled) {
+  box-shadow: var(--le-shadow-md);
+}
+
+/* Outlined */
+:host > le-component.variant-outlined .button {
+  background: transparent;
+  color: var(--_btn-bg);
+  border-color: var(--_btn-border-color);
+}
+
+:host > le-component.variant-outlined .button:hover:not(:disabled) {
+  background: var(--_btn-bg);
+  color: var(--_btn-color);
+}
+
+/* Clear (ghost) */
+:host > le-component.variant-clear .button {
+  background: transparent;
+  color: var(--_btn-bg);
+  border-color: transparent;
+}
+
+:host > le-component.variant-clear .button:hover:not(:disabled) {
+  background: var(--le-color-gray-100);
+  border-color: transparent;
+}
+
+/* System (controls without access) */
+:host > le-component.variant-system .button {
+  background: transparent;
+  color: var(--_btn-bg-system);
+  border-color: transparent;
+}
+
+/* ===========================================
+ * SIZES
+ * =========================================== */
+:host > le-component.size-small .button {
+  --le-button-padding-x: 0.4rem;
+  --le-button-padding-y: 0.3rem;
+  --le-button-padding-top: 0.35rem;
+  --le-button-font-size: var(--le-button-small-font-size, var(--le-font-size-xs));
+}
+
+:host > le-component.size-large .button {
+  --le-button-padding-x: 0.9rem;
+  --le-button-padding-y: 0.6rem;
+  --le-button-font-size: var(--le-font-size-xl);
+}
+
+/* ===========================================
+ * STATES & MODIFIERS
+ * =========================================== */
+
+/* Full width */
+:host > le-component.full-width {
+  display: block;
+  width: 100%;
+}
+
+/* Selected state */
+:host > le-component.selected .button {
+  box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.2);
+}
+
+:host > le-component.variant-outlined.selected .button,
+:host > le-component.variant-clear.selected .button {
+  background: var(--_btn-bg);
+  color: var(--_btn-color);
+}
+
+/* Icon only */
+:host > le-component.icon-only .button {
+  padding: 0.5rem;
+  padding-bottom: 0.6rem;
+  aspect-ratio: var(--le-button-icon-aspect-ratio, 1);
+}
+
+:host > le-component.icon-only.size-small .button {
+  padding: var(--le-button-small-padding, 0.25rem);
+}
+
+:host > le-component.icon-only.size-large .button {
+  padding: 0.75rem;
+}
+
+/* Hide content in icon-only mode */
+:host > le-component.icon-only .content {
+  display: none;
+}
+
+/* ===========================================
+ * CONTENT (le-slot wrapper)
+ * =========================================== */
+.content {
+  display: inline;
+}
+
+.content:empty {
+  display: none;
+}
+
+/* ===========================================
+ * ICON WRAPPERS & SLOTS
+ * =========================================== */
+.icon-start,
+.icon-only,
+.icon-end {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.icon-start:empty,
+.icon-only:empty,
+.icon-end:empty {
+  display: none;
+}
+
+::slotted([slot="icon-start"]),
+::slotted([slot="icon-only"]),
+::slotted([slot="icon-end"]) {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 1.125em;
+  height: 1.125em;
+}

package/dist/core/collection/components/le-button/le-button.js

@@ -0,0 +1,368 @@
+import { h, Fragment, Host } from "@stencil/core";
+import { classnames } from "../../utils/utils";
+/**
+ * A flexible button component with multiple variants and states.
+ *
+ * @slot - Button text content
+ * @slot icon-start - Icon before the text
+ * @slot icon-end - Icon after the text
+ *
+ * @cssprop --le-button-bg - Button background color
+ * @cssprop --le-button-color - Button text color
+ * @cssprop --le-button-border-radius - Button border radius
+ * @cssprop --le-button-padding-x - Button horizontal padding
+ * @cssprop --le-button-padding-y - Button vertical padding
+ *
+ * @csspart button - The native button element
+ * @csspart content - The button content wrapper
+ *
+ * @cmsEditable true
+ * @cmsCategory Actions
+ */
+export class LeButton {
+    el;
+    /**
+     * Mode of the popover should be 'default' for internal use
+     */
+    mode;
+    /**
+     * Button variant style
+     * @allowedValues solid | outlined | clear
+     */
+    variant = 'solid';
+    /**
+     * Button color theme (uses theme semantic colors)
+     * @allowedValues primary | secondary | success | warning | danger | info
+     */
+    color = 'primary';
+    /**
+     * Button size
+     * @allowedValues small | medium | large
+     */
+    size = 'medium';
+    /**
+     * Whether the button is in a selected/active state
+     */
+    selected = false;
+    /**
+     * Whether the button takes full width of its container
+     */
+    fullWidth = false;
+    /**
+     * Whether the button displays only an icon (square aspect ratio)
+     */
+    iconOnly = false;
+    /**
+     * Whether the button is disabled
+     */
+    disabled = false;
+    /**
+     * The button type attribute
+     * @allowedValues button | submit | reset
+     */
+    type = 'button';
+    /**
+     * Optional href to make the button act as a link
+     */
+    href;
+    /**
+     * Link target when href is set
+     */
+    target;
+    /**
+     * Emitted when the button is clicked.
+     * This is a custom event that wraps the native click but ensures the target is the le-button.
+     */
+    leClick;
+    handleClick = (event) => {
+        // We stop the internal button click from bubbling up
+        event.stopPropagation();
+        if (this.disabled) {
+            event.preventDefault();
+            return;
+        }
+        // And emit our own click event from the host element
+        this.leClick.emit(event);
+    };
+    render() {
+        const classes = classnames(`variant-${this.variant}`, `color-${this.color}`, `size-${this.size}`, {
+            'selected': this.selected,
+            'full-width': this.fullWidth,
+            'icon-only': this.iconOnly,
+            'disabled': this.disabled,
+        });
+        const TagType = this.href ? 'a' : 'button';
+        const attrs = this.href ? { href: this.href, target: this.target, role: 'button' } : { type: this.type, disabled: this.disabled };
+        return (h(Host, { key: 'b33f47d87026e4b76837f8ae9f7d51d22d1f86d9', class: classes }, h(TagType, { key: 'ad711cfb6c04e258761db1f724fdef2a67d91933', class: "button", part: "button", ...attrs, onClick: this.handleClick }, this.iconOnly ? (h("span", { class: "icon-start" }, h("slot", { name: "icon-only" }))) : (h(Fragment, null, h("span", { class: "icon-start" }, h("slot", { name: "icon-start" })), h("slot", null), h("span", { class: "icon-end" }, h("slot", { name: "icon-end" })))))));
+    }
+    static get is() { return "le-button"; }
+    static get encapsulation() { return "shadow"; }
+    static get originalStyleUrls() {
+        return {
+            "$": ["le-button.default.css"]
+        };
+    }
+    static get styleUrls() {
+        return {
+            "$": ["le-button.default.css"]
+        };
+    }
+    static get properties() {
+        return {
+            "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"
+            },
+            "variant": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'solid' | 'outlined' | 'clear' | 'system'",
+                    "resolved": "\"clear\" | \"outlined\" | \"solid\" | \"system\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "solid | outlined | clear"
+                        }],
+                    "text": "Button variant style"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "variant",
+                "defaultValue": "'solid'"
+            },
+            "color": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info'",
+                    "resolved": "\"danger\" | \"info\" | \"primary\" | \"secondary\" | \"success\" | \"warning\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "primary | secondary | success | warning | danger | info"
+                        }],
+                    "text": "Button color theme (uses theme semantic colors)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "color",
+                "defaultValue": "'primary'"
+            },
+            "size": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'small' | 'medium' | 'large'",
+                    "resolved": "\"large\" | \"medium\" | \"small\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "small | medium | large"
+                        }],
+                    "text": "Button size"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "size",
+                "defaultValue": "'medium'"
+            },
+            "selected": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is in a selected/active state"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "selected",
+                "defaultValue": "false"
+            },
+            "fullWidth": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button takes full width of its container"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": true,
+                "attribute": "full-width",
+                "defaultValue": "false"
+            },
+            "iconOnly": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button displays only an icon (square aspect ratio)"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "icon-only",
+                "defaultValue": "false"
+            },
+            "disabled": {
+                "type": "boolean",
+                "mutable": false,
+                "complexType": {
+                    "original": "boolean",
+                    "resolved": "boolean",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [],
+                    "text": "Whether the button is disabled"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "disabled",
+                "defaultValue": "false"
+            },
+            "type": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "'button' | 'submit' | 'reset'",
+                    "resolved": "\"button\" | \"reset\" | \"submit\"",
+                    "references": {}
+                },
+                "required": false,
+                "optional": false,
+                "docs": {
+                    "tags": [{
+                            "name": "allowedValues",
+                            "text": "button | submit | reset"
+                        }],
+                    "text": "The button type attribute"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "type",
+                "defaultValue": "'button'"
+            },
+            "href": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Optional href to make the button act as a link"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "href"
+            },
+            "target": {
+                "type": "string",
+                "mutable": false,
+                "complexType": {
+                    "original": "string",
+                    "resolved": "string",
+                    "references": {}
+                },
+                "required": false,
+                "optional": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Link target when href is set"
+                },
+                "getter": false,
+                "setter": false,
+                "reflect": false,
+                "attribute": "target"
+            }
+        };
+    }
+    static get events() {
+        return [{
+                "method": "leClick",
+                "name": "click",
+                "bubbles": true,
+                "cancelable": true,
+                "composed": true,
+                "docs": {
+                    "tags": [],
+                    "text": "Emitted when the button is clicked.\nThis is a custom event that wraps the native click but ensures the target is the le-button."
+                },
+                "complexType": {
+                    "original": "PointerEvent",
+                    "resolved": "PointerEvent",
+                    "references": {
+                        "PointerEvent": {
+                            "location": "global",
+                            "id": "global::PointerEvent"
+                        }
+                    }
+                }
+            }];
+    }
+    static get elementRef() { return "el"; }
+}
+//# sourceMappingURL=le-button.js.map

package/dist/core/collection/components/le-button/le-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"le-button.js","sourceRoot":"","sources":["../../../src-core/components/le-button/le-button.tsx"],"names":[],"mappings":"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","sourcesContent":["import { Component, Prop, h, Element, Fragment, Event, EventEmitter , Host } from '@stencil/core';\nimport { classnames } from '../../utils/utils';\n\n/**\n * A flexible button component with multiple variants and states.\n *\n * @slot - Button text content\n * @slot icon-start - Icon before the text\n * @slot icon-end - Icon after the text\n *\n * @cssprop --le-button-bg - Button background color\n * @cssprop --le-button-color - Button text color\n * @cssprop --le-button-border-radius - Button border radius\n * @cssprop --le-button-padding-x - Button horizontal padding\n * @cssprop --le-button-padding-y - Button vertical padding\n *\n * @csspart button - The native button element\n * @csspart content - The button content wrapper\n *\n * @cmsEditable true\n * @cmsCategory Actions\n */\n@Component({\n  tag: 'le-button',\n  styleUrl: 'le-button.default.css',\n  shadow: true,\n})\nexport class LeButton {\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   * Button variant style\n   * @allowedValues solid | outlined | clear\n   */\n  @Prop() variant: 'solid' | 'outlined' | 'clear' | 'system' = 'solid';\n\n  /**\n   * Button color theme (uses theme semantic colors)\n   * @allowedValues primary | secondary | success | warning | danger | info\n   */\n  @Prop() color: 'primary' | 'secondary' | 'success' | 'warning' | 'danger' | 'info' = 'primary';\n\n  /**\n   * Button size\n   * @allowedValues small | medium | large\n   */\n  @Prop() size: 'small' | 'medium' | 'large' = 'medium';\n\n  /**\n   * Whether the button is in a selected/active state\n   */\n  @Prop() selected: boolean = false;\n\n  /**\n   * Whether the button takes full width of its container\n   */\n  @Prop({ reflect: true }) fullWidth: boolean = false;\n\n  /**\n   * Whether the button displays only an icon (square aspect ratio)\n   */\n  @Prop() iconOnly: boolean = false;\n\n  /**\n   * Whether the button is disabled\n   */\n  @Prop() disabled: boolean = false;\n\n  /**\n   * The button type attribute\n   * @allowedValues button | submit | reset\n   */\n  @Prop() type: 'button' | 'submit' | 'reset' = 'button';\n\n  /**\n   * Optional href to make the button act as a link\n   */\n  @Prop() href?: string;\n\n  /**\n   * Link target when href is set\n   */\n  @Prop() target?: string;\n\n  /**\n   * Emitted when the button is clicked.\n   * This is a custom event that wraps the native click but ensures the target is the le-button.\n   */\n  @Event({ eventName: 'click' }) leClick: EventEmitter<PointerEvent>;\n\n  private handleClick = (event: PointerEvent) => {\n    // We stop the internal button click from bubbling up\n    event.stopPropagation();\n\n    if (this.disabled) {\n      event.preventDefault();\n      return;\n    }\n    \n    // And emit our own click event from the host element\n    this.leClick.emit(event);\n  };\n\n  render() {\n    const classes = classnames(`variant-${this.variant}`, `color-${this.color}`, `size-${this.size}`, {\n      'selected': this.selected,\n      'full-width': this.fullWidth,\n      'icon-only': this.iconOnly,\n      'disabled': this.disabled,\n    });\n\n    const TagType = this.href ? 'a' : 'button';\n    const attrs = this.href ? { href: this.href, target: this.target, role: 'button' } : { type: this.type, disabled: this.disabled };\n\n    return (\n      <Host  class={classes}>\n        <TagType class=\"button\" part=\"button\" {...attrs} onClick={this.handleClick}>\n          {this.iconOnly ? (\n            <span class=\"icon-start\">\n              <slot name=\"icon-only\"></slot>\n            </span>\n          ) : (\n            <Fragment>\n              <span class=\"icon-start\">\n                <slot name=\"icon-start\"></slot>\n              </span>\n              \n                <slot></slot>\n              \n              <span class=\"icon-end\">\n                <slot name=\"icon-end\"></slot>\n              </span>\n            </Fragment>\n          )}\n        </TagType>\n      </Host>\n    );\n  }\n}\n"]}