le-kit 0.6.5 → 0.7.1

package/LLM_CONTEXT.md

@@ -17,7 +17,9 @@ This file is auto-generated and contains documentation for all Le-Kit web compon
 - [le-collapse](#le-collapse)
 - [le-combobox](#le-combobox)
 - [le-component](#le-component)
+- [le-context-menu](#le-context-menu)
 - [le-current-heading](#le-current-heading)
+- [le-drag-handle](#le-drag-handle)
 - [le-dropdown-base](#le-dropdown-base)
 - [le-header](#le-header)
 - [le-header-placeholder](#le-header-placeholder)
@@ -30,6 +32,7 @@ This file is auto-generated and contains documentation for all Le-Kit web compon
 - [le-overflow-menu](#le-overflow-menu)
 - [le-popover](#le-popover)
 - [le-popup](#le-popup)
+- [le-preview-frame](#le-preview-frame)
 - [le-round-progress](#le-round-progress)
 - [le-scroll-progress](#le-scroll-progress)
 - [le-segmented-control](#le-segmented-control)
@@ -45,6 +48,8 @@ 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-toolbar](#le-toolbar)
+- [le-toolbar-spacer](#le-toolbar-spacer)
 - [le-tooltip](#le-tooltip)
 - [le-turntable](#le-turntable)
 - [le-visibility](#le-visibility)
@@ -246,7 +251,7 @@ A flexible button component with multiple variants and states.
 |------|------|---------|-------------|
 | `el` | `HTMLElement` |  |  |
 | `mode` | `'default' \| 'admin' \| undefined` |  | Mode of the popover should be 'default' for internal use |
-| `variant` | `'solid' \| 'outlined' \| 'clear' \| 'system'` | `'solid'` | Button variant style |
+| `variant` | `'solid' \| 'outlined' \| 'clear' \| 'system'` | `'outlined'` | Button variant style |
 | `color` | `\| 'primary'
     \| 'secondary'
     \| 'success'
@@ -265,6 +270,9 @@ A flexible button component with multiple variants and states.
 | `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 |
+| `collapsible` | `boolean` | `false` | Enables responsive collapse to icon-only when the toolbar applies `collapse="icon"`. |
+| `collapse` | `string \| undefined` |  | Runtime collapse state controlled by responsive containers. |
+| `collapsePriorityOffset` | `number` | `100` | Relative collapse priority offset for toolbar stepping. Higher numbers collapse earlier while keeping the button visible longer. |
 | `iconEnd` | `string \| Node \| undefined` |  | End icon image or emoji |
 | `disabled` | `boolean` | `false` | Whether the button is disabled |
 | `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | The button type attribute |
@@ -307,8 +315,11 @@ into an overflow "more" menu.
 | Name | Type | Default | Description |
 |------|------|---------|-------------|
 | `el` | `HTMLElement` |  |  |
+| `label` | `string \| undefined` |  | Optional label used when the whole group is represented as a parent item inside another component's overflow menu. |
 | `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. |
+| `disabled` | `boolean` | `false` | Disabled attribute, when the button group is disabled, all buttons inside will be disabled and the overflow menu will not be accessible. |
+| `visibility` | `'visible' \| 'collapsing' \| 'collapsed' \| 'expanding'` | `'visible'` | Visibility state used by responsive containers such as le-toolbar. |
 
 ### Events
 
@@ -564,6 +575,39 @@ render() {
 
 ---
 
+## <le-context-menu>
+
+Context menu component that displays a vertical navigation menu
+when the user right-clicks or long-presses on its children.
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `el` | `HTMLElement` |  |  |
+| `open` | `boolean` | `false` | Whether the context menu is open. |
+| `disabled` | `boolean` | `false` | Disables right-click and touch interactions. |
+| `items` | `LeOption[] \| string` | `[]` | List of menu items represented as options. |
+| `backdrop` | `boolean` | `false` | Whether to show a backdrop behind the menu, lifting the active item. |
+| `pageScrollBehavior` | `'blocked' \| 'menu-close' \| 'fixed-menu'` | `'menu-close'` | Behavior of the menu on page scroll: - 'blocked': blocks page scroll - 'menu-close': closes the menu automatically on scroll (default) - 'fixed-menu': menu scrolls with the page |
+| `position` | `'top' \| 'bottom' \| 'left' \| 'right' \| 'mouse'` | `'mouse'` | Position of the menu relative to the trigger. If 'mouse', positions next to mouse/touch coords. |
+| `align` | `'start' \| 'center' \| 'end'` | `'start'` | Alignment of the menu relative to the trigger. |
+
+### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `leContextMenuSelect` | `EventEmitter<LeContextMenuSelectDetail>` | Emitted when a menu item is selected. |
+| `leContextMenuClose` | `EventEmitter<void>` | Emitted when the context menu is closed. |
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| Default | Trigger content |
+
+---
+
 ## <le-current-heading>
 
 Shows a "smart" header title based on what has scrolled out of view.
@@ -586,6 +630,25 @@ When `selector` matches multiple elements, the title becomes the last element
 
 ---
 
+## <le-drag-handle>
+
+Reusable drag handle used by resizable components.
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `orientation` | `LeDragHandleOrientation` | `'vertical'` | Handle orientation (vertical = width drag, horizontal = height drag). |
+| `placement` | `LeDragHandlePlacement` | `'end'` | Handle position on the owning edge. |
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| Default | Optional assistive text for screen readers. |
+
+---
+
 ## <le-dropdown-base>
 
 Internal dropdown base component that provides shared functionality
@@ -819,6 +882,8 @@ Navigation component with vertical (tree) and horizontal (menu) layouts.
 | `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. |
+| `autoScroll` | `boolean` | `false` | Automatically scroll the active item into view when the active URL changes or on initial load.  - Initial load: instant (no animation) - Subsequent `activeUrl` changes: smooth  Only applies to `vertical` orientation. |
+| `togglePosition` | `'start' \| 'end'` | `'start'` | Position of the toggle arrow for items with children: 'start' | 'end' |
 
 ### Events
 
@@ -1012,6 +1077,47 @@ via leAlert(), leConfirm(), lePrompt().
 
 ---
 
+## <le-preview-frame>
+
+A resizable preview frame for showcasing responsive component behavior.
+
+Wraps any content in a resizable viewport, complete with drag handle,
+width indicator, and preset device-size buttons. Designed for use in
+component demos and documentation.
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `el` | `HTMLElement` |  |  |
+| `frameWidth` | `number \| undefined` |  | Initial inner width of the preview viewport in pixels. Set to 0 or 'auto' to fill the available container width. |
+| `minWidth` | `number` | `240` | Minimum resizable width in pixels. |
+| `maxWidth` | `number` | `0` | Maximum resizable width in pixels. 0 = unconstrained. |
+| `showControls` | `boolean` | `true` | Whether to show the controls bar (breakpoint buttons + width badge). |
+| `resizable` | `boolean` | `true` | Whether to show drag resize handles. |
+| `handles` | `LePreviewFrameHandleSide[] \| string` | `'right'` | Which handles are rendered. Accepts "right", "left", "bottom", "left,right", etc. or a JSON string/array. |
+| `origin` | `LePreviewFrameResizeOrigin` | `'auto'` | Horizontal resize origin strategy. - auto: detects centered layouts and switches to center math - edge: keeps opposite edge fixed (default left-aligned behavior) - center: grows/shrinks from center |
+| `padding` | `number` | `0` | Extra layout padding to subtract from available container space. Useful when visual page padding is not detectable from the immediate parent. |
+| `breakpoints` | `LePreviewFrameBreakpoint[] \| string` | `DEFAULT_BREAKPOINTS` | Preset breakpoints shown as buttons. Can be a JSON string or a LePreviewFrameBreakpoint[]. |
+| `widthUnit` | `string` | `'px'` | Label for the width badge. Set empty to hide the unit suffix. |
+| `minHeight` | `number` | `64` | Minimum height of the viewport in pixels. |
+| `maxHeight` | `number` | `0` | Maximum resizable viewport height in pixels. 0 = unconstrained. |
+
+### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `lePreviewFrameResize` | `EventEmitter<LePreviewFrameResizeDetail> \| undefined` | Emitted whenever the frame width changes (drag or preset button). |
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| Default | The content to preview |
+| `"controls"` | Extra content inserted after the preset buttons |
+
+---
+
 ## <le-round-progress>
 
 ### Properties
@@ -1135,8 +1241,11 @@ A select dropdown component for single selection.
 | `collapseAt` | `string \| undefined` |  | Width breakpoint (in px or a CSS var like `--le-breakpoint-md`) below which the panel enters "narrow" mode. |
 | `narrowBehavior` | `LeSidePanelNarrowBehavior` | `'overlay'` | Behavior when in narrow mode. |
 | `sticky` | `boolean` | `false` | Whether the panel is sticky (remains visible when scrolling). |
+| `minPanelHeight` | `number` | `200` | Minimum panel height (px) when sticky full-height logic is active. |
 | `top` | `number \| 'under-header'` | `0` | Top offset for the sticky panel. |
+| `bottom` | `number \| 'under-footer'` | `0` | Bottom offset for sticky full-height calculations. |
 | `fullHeight` | `boolean` | `false` | Whether the sticky panel should stretch to full height. |
+| `margin` | `string \| number \| undefined` |  | Optional panel margin override. Accepts CSS length (e.g. `16px`, `1rem`, `var(--space-4)`). |
 | `open` | `boolean` | `false` | Panel open state for narrow mode. - overlay: controls modal drawer visibility - push: controls whether panel is shown (non-modal) |
 | `collapsed` | `boolean` | `false` | Panel collapsed state for wide mode (fully hidden). |
 | `panelWidth` | `number` | `280` | Default panel width in pixels. |
@@ -1585,6 +1694,61 @@ toolbar for bold, italic, links, and paragraph type selection.
 
 ---
 
+## <le-toolbar>
+
+A priority-aware, overflow-safe toolbar component.
+
+Items are slotted light-DOM children. Each item may carry a
+`priority` attribute (lower = more important). When there
+isn't enough space, lower-priority items move to an overflow menu.
+
+Collapsible `le-button-group` children are asked to reduce their own
+footprint first before their contents are overflowed entirely.
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `el` | `HTMLElement` |  |  |
+| `items` | `unknown \| undefined` |  | Optional declarative items input.  The current implementation is slot-driven, but when this prop changes we still invalidate the slotted-items cache and recompute layout. |
+| `alignItems` | `'start' \| 'center' \| 'end' \| 'stretch'` | `'start'` | Alignment of items along the main axis. |
+| `itemGap` | `string` | `'var(--le-toolbar-gap, var(--le-spacing-1, 4px))'` | Spacing between top-level toolbar items. Accepts any valid CSS length (e.g. `8px`, `0.5rem`, `var(--le-spacing-2)`). |
+| `overflowIcon` | `string` | `'ellipsis-horizontal'` | Icon for the overflow trigger button when no custom slot content is provided. |
+| `overflowLabel` | `string` | `'More'` | Accessible label for the overflow trigger button. |
+| `disablePopover` | `boolean` | `false` | Disable the built-in overflow popover. The toolbar will still compute overflow state and emit events, but won't render its own menu. Useful for custom overflow handling. |
+| `debugVirtualToolbar` | `boolean` | `false` | Temporary debug mode: render the virtual toolbar visibly above the live toolbar so collapse measurements can be inspected. |
+| `debugPauseBeforeMeasure` | `boolean` | `false` | Temporary debug mode: stop before measuring virtual widths so the virtual DOM can be inspected before collapse simulation mutates it. |
+
+### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `leToolbarOverflowChange` | `EventEmitter<LeToolbarOverflowChangeDetail> \| undefined` | Emitted when the overflow state changes. |
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| Default | Toolbar items |
+| `"more"` | Custom content for the overflow trigger button |
+
+---
+
+## <le-toolbar-spacer>
+
+Flexible spacer for le-toolbar layouts.
+
+Default behavior (no width): occupies available free space and shrinks naturally.
+With numeric `width`: behaves as a fixed-width spacer that can be collapsed by le-toolbar.
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `width` | `number \| string \| undefined` |  | Optional fixed width. Numeric values (e.g. `24`) are treated as px. String values may be any valid CSS width (e.g. `2rem`, `var(--le-spacing-2)`). |
+
+---
+
 ## <le-tooltip>
 
 ### Properties

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "le-kit",
-  "version": "0.6.5",
+  "version": "0.7.1",
   "description": "Themable web components library with CMS admin mode support",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",