le-kit 0.6.3 → 0.6.5

package/LLM_CONTEXT.md

@@ -10,6 +10,7 @@ This file is auto-generated and contains documentation for all Le-Kit web compon
 - [le-box](#le-box)
 - [le-breadcrumbs](#le-breadcrumbs)
 - [le-button](#le-button)
+- [le-button-group](#le-button-group)
 - [le-card](#le-card)
 - [le-checkbox](#le-checkbox)
 - [le-code-input](#le-code-input)
@@ -22,9 +23,11 @@ This file is auto-generated and contains documentation for all Le-Kit web compon
 - [le-header-placeholder](#le-header-placeholder)
 - [le-icon](#le-icon)
 - [le-item](#le-item)
+- [le-kit](#le-kit)
 - [le-multiselect](#le-multiselect)
 - [le-navigation](#le-navigation)
 - [le-number-input](#le-number-input)
+- [le-overflow-menu](#le-overflow-menu)
 - [le-popover](#le-popover)
 - [le-popup](#le-popup)
 - [le-round-progress](#le-round-progress)
@@ -42,7 +45,9 @@ This file is auto-generated and contains documentation for all Le-Kit web compon
 - [le-tabs](#le-tabs)
 - [le-tag](#le-tag)
 - [le-text](#le-text)
+- [le-tooltip](#le-tooltip)
 - [le-turntable](#le-turntable)
+- [le-visibility](#le-visibility)
 
 ---
 
@@ -240,7 +245,7 @@ A flexible button component with multiple variants and states.
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `el` | `HTMLElement` |  |  |
-| `mode` | `'default' \| 'admin'` |  | Mode of the popover should be 'default' for internal use |
+| `mode` | `'default' \| 'admin' \| undefined` |  | Mode of the popover should be 'default' for internal use |
 | `variant` | `'solid' \| 'outlined' \| 'clear' \| 'system'` | `'solid'` | Button variant style |
 | `color` | `\| 'primary'
     \| 'secondary'
@@ -248,10 +253,16 @@ A flexible button component with multiple variants and states.
     \| 'warning'
     \| 'danger'
     \| 'info'
-    \| 'transparent'` | `'primary'` | Button color theme (uses theme semantic colors) |
+    \| 'transparent' \| undefined` |  | Button color theme (uses theme semantic colors) |
 | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Button size |
 | `selected` | `boolean` | `false` | Whether the button is in a selected/active state |
+| `label` | `string \| undefined` |  | Optional label for the button, used for accessibility and tooltips when the button is icon-only. |
+| `tooltip` | `string \| undefined` |  | Tooltip text to show on hover |
+| `tooltipPosition` | `TooltipPlacement` | `'top'` | Tooltip position around the button |
 | `fullWidth` | `boolean` | `false` | Whether the button takes full width of its container |
+| `visibility` | `'visible' \| 'collapsing' \| 'collapsed' \| 'expanding'` | `'visible'` | Visibility state used by responsive containers to animate show/hide transitions. |
+| `groupShape` | `'start' \| 'middle' \| 'end' \| 'single'` | `'single'` | Shape of the button when rendered inside grouped containers. |
+| `motionPreset` | `'none' \| 'soft' \| 'fluid' \| 'spring' \| undefined` |  | Optional per-instance motion preset override. |
 | `iconOnly` | `string \| Node \| undefined` |  | Icon only button image or emoji if this prop is set, the button will render only the icon slot |
 | `iconStart` | `string \| Node \| undefined` |  | Start icon image or emoji |
 | `iconEnd` | `string \| Node \| undefined` |  | End icon image or emoji |
@@ -286,6 +297,34 @@ A flexible button component with multiple variants and states.
 
 ---
 
+## <le-button-group>
+
+Groups multiple `le-button` elements and optionally collapses low-priority actions
+into an overflow "more" menu.
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `el` | `HTMLElement` |  |  |
+| `collapse` | `boolean \| number \| string \| undefined` |  | Collapse mode.  - `true`: show only the top-priority button - positive number: show top N buttons - `0`: show only the more button - negative number: hide abs(N) lowest-priority buttons  Non-integers are rounded with `Math.round`. |
+| `overflowIcons` | `boolean` | `false` | When true, icons from collapsed buttons are shown in the overflow navigation list. |
+
+### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `leOverflowSelect` | `EventEmitter<{ id: string }>` |  |
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| Default | Group button elements (`le-button` children) |
+| `"more"` | Custom icon/content for the overflow trigger button |
+
+---
+
 ## <le-card>
 
 A flexible card component with header, content, and footer slots.
@@ -699,6 +738,27 @@ The header component updates that variable when it renders.
 
 ---
 
+## <le-kit>
+
+Optional app-level context orchestrator for theme, appearance, and active state.
+
+Components continue to work without this wrapper; `le-kit` is opt-in.
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `el` | `HTMLElement` |  |  |
+| `theme` | `string` | `'default'` | Current theme scope value. |
+| `appearance` | `string` | `'default'` | Current appearance scope value. |
+| `activeContext` | `LeActiveContext` | `'active'` | Current active context scope value. |
+| `watchWindow` | `boolean` | `true` | Whether this instance reacts to window focus/blur. |
+| `watchModals` | `boolean` | `true` | Whether this instance reacts to descendant modal popup open/close events. |
+| `storageKey` | `string` | `'le-kit'` | Local storage namespace for persisted values. |
+| `persist` | `string` | `'theme appearance'` | Persistence keys as a space-separated list: `all`, `none`, `theme`, `appearance`. |
+
+---
+
 ## <le-multiselect>
 
 A multiselect component for selecting multiple options.
@@ -758,6 +818,7 @@ Navigation component with vertical (tree) and horizontal (menu) layouts.
 | `searchPlaceholder` | `string` | `'Search...'` | Placeholder text for the search input. |
 | `emptyText` | `string` | `'No results found'` | Text shown when no items match the filter. |
 | `submenuSearchable` | `boolean` | `false` | Whether submenu popovers should include a filter input. |
+| `activationMode` | `LeNavigationActivationMode` | `'manual'` | Whether keyboard focus only highlights, or also activates immediately. |
 
 ### Events
 
@@ -837,6 +898,32 @@ A number input component with validation, keyboard controls, and custom spinners
 
 ---
 
+## <le-overflow-menu>
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `open` | `boolean` | `false` | Whether the menu popover is open. |
+| `disabled` | `boolean` | `false` | Disables trigger interactions. |
+| `position` | `'top' \| 'right' \| 'bottom' \| 'left'` | `'bottom'` | Popover position. |
+| `align` | `'start' \| 'center' \| 'end'` | `'end'` | Popover alignment relative to trigger. |
+| `offset` | `number` | `8` | Popover offset in px. |
+| `minWidth` | `string` | `'160px'` | Minimum popover width. |
+| `icon` | `string` | `'ellipsis-horizontal'` | Fallback icon name for trigger. |
+| `triggerAriaLabel` | `string` | `'Open menu'` | Aria label for fallback trigger button. |
+| `triggerPart` | `string` | `'trigger-button'` | Part name for fallback trigger button. |
+| `items` | `LeOverflowMenuItem[] \| string` | `[]` | List of menu items represented as options. |
+
+### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `leOverflowMenuItemSelect` | `EventEmitter<LeOverflowMenuItemSelectDetail>` |  |
+| `leOverflowMenuClose` | `EventEmitter<void>` |  |
+
+---
+
 ## <le-popover>
 
 A popover component for displaying floating content.
@@ -983,7 +1070,7 @@ Perfect for toggling between a small set of related options.
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `el` | `HTMLElement` |  |  |
-| `options` | `LeOption[]` | `[]` | Array of options for the segmented control. |
+| `options` | `LeOption[] \| string` | `[]` | Array of options for the segmented control. |
 | `value` | `LeOptionValue \| undefined` |  | The value of the currently selected option. |
 | `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size of the control. |
 | `overflow` | `'auto' \| 'hidden' \| 'visible' \| 'scroll'` | `'auto'` | Scroll behavior for overflowing tabs. |
@@ -1193,7 +1280,7 @@ A text input component with support for labels, descriptions, icons, and externa
 |------|------|---------|-------------|
 | `el` | `HTMLElement` |  |  |
 | `inputRef` | `(el: HTMLInputElement) => void \| undefined` |  | Pass the ref of the input element to the parent component |
-| `mode` | `'default' \| 'admin'` | `'default'` | Mode of the popover should be 'default' for internal use |
+| `mode` | `'default' \| 'admin' \| undefined` |  | Mode of the popover should be 'default' for internal use |
 | `value` | `string \| undefined` |  | The value of the input |
 | `name` | `string \| undefined` |  | The name of the input |
 | `type` | `'text' \| 'email' \| 'password' \| 'search' \| 'tel' \| 'url'` | `'text'` | The type of the input (text, email, password, etc.) |
@@ -1498,6 +1585,34 @@ toolbar for bold, italic, links, and paragraph type selection.
 
 ---
 
+## <le-tooltip>
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `el` | `HTMLElement` |  |  |
+| `mode` | `LeKitMode` | `'default'` | The mode of Le Kit. |
+| `open` | `boolean` | `false` | Controls whether the tooltip is open. |
+| `text` | `string` | `''` | Tooltip text shown when no custom content slot is provided. |
+| `placement` | `TooltipPlacement` | `'auto'` | Preferred tooltip placement relative to trigger. |
+| `align` | `TooltipAlign` | `'center'` | Alignment along the cross axis for the chosen placement. |
+| `variant` | `TooltipVariant` | `'default'` | Visual variant of tooltip. |
+| `disabled` | `boolean` | `false` | Disable tooltip interactions and visibility. |
+| `showDelay` | `number` | `500` | Delay in milliseconds before showing the tooltip. |
+| `hideDelay` | `number` | `160` | Delay in milliseconds before hiding the tooltip after leaving trigger/content. |
+| `offset` | `number` | `8` | Distance in pixels between trigger and tooltip. |
+| `maxWidth` | `string` | `'280px'` | Max width of the tooltip box. |
+
+### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `leTooltipOpen` | `EventEmitter<void> \| undefined` | Emitted when the tooltip opens. |
+| `leTooltipClose` | `EventEmitter<void> \| undefined` | Emitted when the tooltip closes. |
+
+---
+
 ## <le-turntable>
 
 ### Properties
@@ -1517,3 +1632,25 @@ toolbar for bold, italic, links, and paragraph type selection.
 
 ---
 
+## <le-visibility>
+
+Internal visibility transition controller.
+
+This component controls transition phase + measured size variables.
+
+Preferred usage wraps the target content:
+<le-visibility state="collapsed"><div>...</div></le-visibility>
+
+For backward compatibility, when no children are provided it
+falls back to controlling the parent host element.
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `el` | `HTMLElement` |  |  |
+| `state` | `LeVisibilityState` | `'visible'` | Desired visibility state. |
+| `mode` | `LeVisibilityMode` | `'width'` | Which dimensions to measure and expose as CSS vars. |
+
+---
+

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "le-kit",
-  "version": "0.6.3",
+  "version": "0.6.5",
   "description": "Themable web components library with CMS admin mode support",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -51,12 +51,16 @@
     "analyze": "cem analyze --stencil && npm run generate:llm",
     "generate:llm": "node scripts/generate-llm-context.mjs"
   },
+  "dependencies": {
+    "@nanostores/persistent": "^0.10.2",
+    "nanostores": "^0.11.4"
+  },
   "devDependencies": {
     "@custom-elements-manifest/analyzer": "^0.11.0",
     "@stencil/core": "^4.27.1",
     "@stencil/react-output-target": "^1.2.0",
     "@types/jest": "^29.5.14",
-    "@types/node": "^22.13.5",
+    "@types/node": "^22.19.17",
     "jest": "^29.7.0",
     "jest-cli": "^29.7.0",
     "puppeteer": "^24.3.0"