le-kit 0.5.2 → 0.5.4

package/dist/cjs/utils-Dxx9WhWK.js

@@ -1,152 +0,0 @@
-'use strict';
-
-var index = require('./index-BzadfLTc.js');
-
-/**
- * Utility functions for le-kit components
- */
-/**
- * Generates a unique ID for component instances
- */
-function generateId(prefix = 'le') {
-    return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;
-}
-/**
- * Parses a comma-separated string into an array
- */
-function parseCommaSeparated(value) {
-    if (!value)
-        return [];
-    return value
-        .split(',')
-        .map(s => s.trim())
-        .filter(Boolean);
-}
-/**
- * Checks if a slot has content
- */
-function slotHasContent(el, slotName = '') {
-    const selector = slotName ? `[slot="${slotName}"]` : ':not([slot])';
-    return el.querySelector(selector) !== null;
-}
-/**
- * Sets up a MutationObserver to track mode changes on ancestor elements.
- * Returns a cleanup function to disconnect the observer.
- *
- * If the element or any ancestor has an explicit `mode` attribute, that creates
- * a "mode boundary" - the mode is determined from that point, not from further up.
- * This allows components like le-popover to force default mode for their children.
- *
- * @param el - The component's host element
- * @param callback - Function to call when mode changes, receives the new mode
- * @returns Cleanup function to disconnect the observer
- *
- * @example
- * ```tsx
- * export class MyComponent {
- *   @Element() el: HTMLElement;
- *   @State() adminMode: boolean = false;
- *   private disconnectModeObserver?: () => void;
- *
- *   connectedCallback() {
- *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {
- *       this.adminMode = mode === 'admin';
- *     });
- *   }
- *
- *   disconnectedCallback() {
- *     this.disconnectModeObserver?.();
- *   }
- * }
- * ```
- */
-function observeModeChanges(el, callback) {
-    // Call immediately with current mode
-    callback(index.getMode(el));
-    // Set up observer for mode attribute changes
-    const observer = new MutationObserver(() => {
-        callback(index.getMode(el));
-    });
-    // Observe the element itself (for mode boundary changes)
-    observer.observe(el, {
-        attributes: true,
-        attributeFilter: ['mode'],
-    });
-    // Observe document root
-    observer.observe(document.documentElement, {
-        attributes: true,
-        attributeFilter: ['mode'],
-    });
-    // Traverse up, crossing shadow boundaries, and observe each element
-    let current = el;
-    while (current) {
-        if (current instanceof Element && current.parentElement) {
-            current = current.parentElement;
-            observer.observe(current, {
-                attributes: true,
-                attributeFilter: ['mode'],
-            });
-            // If this element has an explicit mode, it's a boundary
-            if (current.hasAttribute('mode')) {
-                break;
-            }
-        }
-        else {
-            // Check if we're in a shadow root
-            const root = current.getRootNode();
-            if (root instanceof ShadowRoot) {
-                // Cross the shadow boundary and observe the host
-                current = root.host;
-                observer.observe(current, {
-                    attributes: true,
-                    attributeFilter: ['mode'],
-                });
-                // If the host has an explicit mode, it's a boundary
-                if (current.hasAttribute('mode')) {
-                    break;
-                }
-            }
-            else {
-                break;
-            }
-        }
-    }
-    // Return cleanup function
-    return () => observer.disconnect();
-}
-/**
- * Combines multiple class names into a single string, filtering out falsy values.
- *
- * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these
- * @returns Combined class names string
- */
-function classnames(...classes) {
-    const result = [];
-    classes.forEach(cls => {
-        if (!cls)
-            return;
-        if (typeof cls === 'string') {
-            result.push(cls);
-        }
-        else if (Array.isArray(cls)) {
-            result.push(classnames(...cls));
-        }
-        else if (typeof cls === 'object') {
-            Object.entries(cls).forEach(([key, value]) => {
-                if (value) {
-                    result.push(key);
-                }
-            });
-        }
-    });
-    return result.join(' ');
-}
-
-exports.classnames = classnames;
-exports.generateId = generateId;
-exports.observeModeChanges = observeModeChanges;
-exports.parseCommaSeparated = parseCommaSeparated;
-exports.slotHasContent = slotHasContent;
-//# sourceMappingURL=utils-Dxx9WhWK.js.map
-
-//# sourceMappingURL=utils-Dxx9WhWK.js.map

package/dist/cjs/utils-Dxx9WhWK.js.map

@@ -1 +0,0 @@
-{"version":3,"file":"utils-Dxx9WhWK.js","sources":["src/utils/utils.ts"],"sourcesContent":["/**\n * Utility functions for le-kit components\n */\n\nimport { getMode } from '../global/app';\n\n/**\n * Generates a unique ID for component instances\n */\nexport function generateId(prefix: string = 'le'): string {\n  return `${prefix}-${Math.random().toString(36).substring(2, 9)}`;\n}\n\n/**\n * Parses a comma-separated string into an array\n */\nexport function parseCommaSeparated(value: string | undefined): string[] {\n  if (!value) return [];\n  return value\n    .split(',')\n    .map(s => s.trim())\n    .filter(Boolean);\n}\n\n/**\n * Checks if a slot has content\n */\nexport function slotHasContent(el: HTMLElement, slotName: string = ''): boolean {\n  const selector = slotName ? `[slot=\"${slotName}\"]` : ':not([slot])';\n  return el.querySelector(selector) !== null;\n}\n\n/**\n * Sets up a MutationObserver to track mode changes on ancestor elements.\n * Returns a cleanup function to disconnect the observer.\n * \n * If the element or any ancestor has an explicit `mode` attribute, that creates\n * a \"mode boundary\" - the mode is determined from that point, not from further up.\n * This allows components like le-popover to force default mode for their children.\n * \n * @param el - The component's host element\n * @param callback - Function to call when mode changes, receives the new mode\n * @returns Cleanup function to disconnect the observer\n * \n * @example\n * ```tsx\n * export class MyComponent {\n *   @Element() el: HTMLElement;\n *   @State() adminMode: boolean = false;\n *   private disconnectModeObserver?: () => void;\n * \n *   connectedCallback() {\n *     this.disconnectModeObserver = observeModeChanges(this.el, (mode) => {\n *       this.adminMode = mode === 'admin';\n *     });\n *   }\n * \n *   disconnectedCallback() {\n *     this.disconnectModeObserver?.();\n *   }\n * }\n * ```\n */\nexport function observeModeChanges(\n  el: HTMLElement,\n  callback: (mode: string) => void\n): () => void {\n  // Call immediately with current mode\n  callback(getMode(el));\n\n  // Set up observer for mode attribute changes\n  const observer = new MutationObserver(() => {\n    callback(getMode(el));\n  });\n\n  // Observe the element itself (for mode boundary changes)\n  observer.observe(el, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Observe document root\n  observer.observe(document.documentElement, {\n    attributes: true,\n    attributeFilter: ['mode'],\n  });\n\n  // Traverse up, crossing shadow boundaries, and observe each element\n  let current: Node | null = el;\n  while (current) {\n    if (current instanceof Element && current.parentElement) {\n      current = current.parentElement;\n      observer.observe(current, {\n        attributes: true,\n        attributeFilter: ['mode'],\n      });\n      // If this element has an explicit mode, it's a boundary\n      if ((current as Element).hasAttribute('mode')) {\n        break;\n      }\n    } else {\n      // Check if we're in a shadow root\n      const root = current.getRootNode();\n      if (root instanceof ShadowRoot) {\n        // Cross the shadow boundary and observe the host\n        current = root.host;\n        observer.observe(current, {\n          attributes: true,\n          attributeFilter: ['mode'],\n        });\n        // If the host has an explicit mode, it's a boundary\n        if ((current as Element).hasAttribute('mode')) {\n          break;\n        }\n      } else {\n        break;\n      }\n    }\n  }\n\n  // Return cleanup function\n  return () => observer.disconnect();\n}\n\n/**\n * Combines multiple class names into a single string, filtering out falsy values.\n * \n * @param classes - arguments of class names, undefined, arrays, objects with boolean values and nested combinations of these\n * @returns Combined class names string\n */\nexport function classnames(...classes: any[]): string {\n  const result: string[] = [];\n\n  classes.forEach(cls => {\n    if (!cls) return;\n\n    if (typeof cls === 'string') {\n      result.push(cls);\n    } else if (Array.isArray(cls)) {\n      result.push(classnames(...cls));\n    } else if (typeof cls === 'object') {\n      Object.entries(cls).forEach(([key, value]) => {\n        if (value) {\n          result.push(key);\n        }\n      });\n    }\n  });\n\n  return result.join(' ');\n}\n"],"names":["getMode"],"mappings":"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"}

package/dist/collection/assets/icons/chevron-down.svg

@@ -1,3 +0,0 @@
-<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-  <path d="M4 6l4 4 4-4" fill="none" stroke="currentColor" stroke-width="2" />
-</svg>

package/dist/collection/collection-manifest.json

@@ -1,47 +0,0 @@
-{
-  "entries": [
-    "components/le-bar/le-bar.js",
-    "components/le-navigation/le-navigation.js",
-    "components/le-popup/le-popup.js",
-    "components/le-side-panel/le-side-panel.js",
-    "components/le-side-panel-toggle/le-side-panel-toggle.js",
-    "components/le-box/le-box.js",
-    "components/le-button/le-button.js",
-    "components/le-card/le-card.js",
-    "components/le-checkbox/le-checkbox.js",
-    "components/le-code-input/le-code-input.js",
-    "components/le-collapse/le-collapse.js",
-    "components/le-combobox/le-combobox.js",
-    "components/le-component/le-component.js",
-    "components/le-current-heading/le-current-heading.js",
-    "components/le-dropdown-base/le-dropdown-base.js",
-    "components/le-header/le-header.js",
-    "components/le-header-placeholder/le-header-placeholder.js",
-    "components/le-icon/le-icon.js",
-    "components/le-multiselect/le-multiselect.js",
-    "components/le-number-input/le-number-input.js",
-    "components/le-popover/le-popover.js",
-    "components/le-round-progress/le-round-progress.js",
-    "components/le-scroll-progress/le-scroll-progress.js",
-    "components/le-segmented-control/le-segmented-control.js",
-    "components/le-select/le-select.js",
-    "components/le-slot/le-slot.js",
-    "components/le-stack/le-stack.js",
-    "components/le-string-input/le-string-input.js",
-    "components/le-tab/le-tab.js",
-    "components/le-tab-bar/le-tab-bar.js",
-    "components/le-tab-panel/le-tab-panel.js",
-    "components/le-tabs/le-tabs.js",
-    "components/le-tag/le-tag.js",
-    "components/le-text/le-text.js",
-    "components/le-turntable/le-turntable.js"
-  ],
-  "compiler": {
-    "name": "@stencil/core",
-    "version": "4.39.0",
-    "typescriptVersion": "5.8.3"
-  },
-  "collections": [],
-  "bundles": [],
-  "global": "global/app.js"
-}

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

@@ -1,255 +0,0 @@
-/**
- * le-bar - Flexible bar with overflow handling
- */
-
-:host {
-  display: block;
-
-  /* Spacing & sizing */
-  --le-bar-gap: var(--le-spacing-2);
-  --le-bar-padding: var(--le-spacing-2);
-  --le-bar-min-height: 2.5rem;
-
-  /* Colors */
-  --le-bar-background: transparent;
-  --le-bar-border-color: var(--le-color-border);
-  --le-bar-border-radius: var(--le-radius-md);
-
-  /* Button styling */
-  --le-bar-button-size: 2rem;
-  --le-bar-button-color: var(--le-color-text-primary);
-  --le-bar-button-hover-bg: var(--le-color-gray-100);
-  --le-bar-button-border-radius: var(--le-radius-sm);
-
-  /* Arrow styling */
-  --le-bar-arrow-size: 1.5rem;
-
-  /* Popover */
-  --le-bar-popover-min-width: 200px;
-  --le-bar-popover-gap: var(--le-spacing-1);
-}
-
-/* ============================================
- * MAIN CONTAINER
- * ============================================ */
-
-.bar-container {
-  display: flex;
-  align-items: center;
-  gap: var(--le-bar-gap);
-  min-height: var(--le-bar-min-height);
-  background: var(--le-bar-background);
-  border-radius: var(--le-bar-border-radius);
-  padding: var(--le-bar-padding);
-}
-
-/* Alignment variations */
-.bar-container.align-start {
-  justify-content: flex-start;
-}
-
-.bar-container.align-end .bar-items {
-  justify-content: flex-end;
-}
-
-.bar-container.align-center .bar-items {
-  justify-content: center;
-}
-
-.bar-container.align-stretch .bar-items {
-  /* justify-content: stretch; */
-  justify-content: space-evenly;
-}
-
-
-/* ============================================
- * ITEMS CONTAINER
- * ============================================ */
-
-.bar-items {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--le-bar-gap);
-  overflow: hidden;
-  min-width: 0;
-  flex: 1 1 0%;
-  position: relative;
-}
-
-/* When height is set (overflow mode), clip content */
-.bar-items[style*="height"] {
-  overflow: hidden;
-}
-
-/* Scroll mode */
-.bar-items.is-scrollable {
-  flex-wrap: nowrap;
-  overflow-x: auto;
-  overflow-y: hidden;
-  scroll-behavior: smooth;
-  scroll-snap-type: x mandatory;
-  -webkit-overflow-scrolling: touch;
-
-  /* Hide scrollbar but keep functionality */
-  scrollbar-width: none;
-  -ms-overflow-style: none;
-}
-
-.bar-items.is-scrollable::-webkit-scrollbar {
-  display: none;
-}
-
-.bar-items.is-scrollable ::slotted(*) {
-  scroll-snap-align: start;
-  flex-shrink: 0;
-}
-
-/* Wrap mode */
-.bar-items.is-wrapping {
-  flex-wrap: wrap;
-  overflow: visible;
-  height: auto !important;
-}
-
-/* ============================================
- * CONTROLS (arrows, buttons)
- * ============================================ */
-
-.bar-controls {
-  display: flex;
-  align-items: center;
-  gap: var(--le-spacing-1);
-  flex-shrink: 0;
-}
-
-.bar-controls-start {
-  order: -1;
-}
-
-.bar-controls-end {
-  order: 1;
-}
-
-/* ============================================
- * BUTTONS (more, hamburger, all-menu)
- * ============================================ */
-
-.bar-more-button,
-.bar-hamburger-button,
-.bar-all-menu-button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--le-bar-button-size);
-  height: var(--le-bar-button-size);
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--le-bar-button-color);
-  border-radius: var(--le-bar-button-border-radius);
-  cursor: pointer;
-  transition: background-color 0.15s ease;
-}
-
-.bar-more-button:hover,
-.bar-hamburger-button:hover,
-.bar-all-menu-button:hover {
-  background: var(--le-bar-button-hover-bg);
-}
-
-.bar-more-button:focus-visible,
-.bar-hamburger-button:focus-visible,
-.bar-all-menu-button:focus-visible {
-  outline: 2px solid var(--le-color-focus);
-  outline-offset: 2px;
-}
-
-/* ============================================
- * SCROLL ARROWS
- * ============================================ */
-
-.bar-arrow {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: var(--le-bar-arrow-size);
-  height: var(--le-bar-arrow-size);
-  padding: 0;
-  border: none;
-  background: transparent;
-  color: var(--le-bar-button-color);
-  border-radius: var(--le-bar-button-border-radius);
-  cursor: pointer;
-  transition: background-color 0.15s ease, opacity 0.15s ease;
-}
-
-.bar-arrow:hover:not(:disabled) {
-  background: var(--le-bar-button-hover-bg);
-}
-
-.bar-arrow:focus-visible {
-  outline: 2px solid var(--le-color-focus);
-  outline-offset: 2px;
-}
-
-.bar-arrow:disabled,
-.bar-arrow.disabled {
-  opacity: 0.3;
-  cursor: not-allowed;
-}
-
-/* Rotate chevron icons for arrows */
-.arrow-icon-start {
-  transform: rotate(90deg);
-}
-
-.arrow-icon-end {
-  transform: rotate(-90deg);
-}
-
-/* ============================================
- * POPOVER TRIGGERS
- * ============================================ */
-
-.bar-overflow-trigger,
-.bar-all-menu-trigger {
-  display: inline-flex;
-}
-
-/* ============================================
- * POPOVER CONTENT
- * ============================================ */
-
-.bar-popover-content {
-  display: flex;
-  flex-direction: column;
-  gap: var(--le-bar-popover-gap);
-  min-width: var(--le-bar-popover-min-width);
-  padding: var(--le-spacing-2);
-}
-
-.bar-popover-item {
-  cursor: pointer;
-}
-
-.bar-popover-item:hover {
-  background: var(--le-bar-button-hover-bg);
-  border-radius: var(--le-bar-button-border-radius);
-}
-
-/* ============================================
- * HAMBURGER MODE - HIDE ITEMS
- * ============================================ */
-
-:host(.hamburger-active) .bar-items {
-  visibility: hidden;
-  pointer-events: none;
-}
-
-
-/* ============================================
- * HOST VARIANTS
- * ============================================ */
-
-/* Remove redundant flex:1 since bar-items already has it */