le-kit 0.7.1 → 0.8.0

package/LLM_CONTEXT.md

@@ -4,6 +4,7 @@ This file is auto-generated and contains documentation for all Le-Kit web compon
 
 ## Table of Contents
 
+- [le-actions-sequence](#le-actions-sequence)
 - [le-bar](#le-bar)
 - [le-bento-grid](#le-bento-grid)
 - [le-bento-tile](#le-bento-tile)
@@ -56,6 +57,36 @@ This file is auto-generated and contains documentation for all Le-Kit web compon
 
 ---
 
+## <le-actions-sequence>
+
+A non-visual component that runs a sequence of timed actions on its children.
+Designed for creating automated interaction loops and interactive demos.
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `el` | `HTMLElement` |  |  |
+| `steps` | `ActionStep[] \| string` | `[]` | Array of ActionStep objects or a JSON string representation. |
+| `startOn` | `'init' \| 'in-view' \| 'manual'` | `'init'` | Playback triggers: 'init' (starts immediately), 'in-view' (scrolled into viewport), 'manual'. |
+| `inViewThreshold` | `number` | `0.5` | Visibility threshold ratio (0.0 to 1.0) before triggering in-view. |
+| `loop` | `boolean` | `false` | Repeat the sequence when finished. |
+| `loopDelay` | `number` | `0` | Loop delay in milliseconds before restarting the sequence. |
+| `direction` | `'forward' \| 'reverse' \| 'alternate'` | `'forward'` | Playback direction. |
+| `debug` | `boolean` | `false` | Output debug logs to console. |
+| `pauseOnHover` | `boolean` | `false` | Pause the sequence when the user hovers over the element. Resumes on mouseleave. |
+| `pauseOnInteraction` | `boolean` | `false` | Pause the sequence when the user interacts (click/focus/drag) inside the element. |
+
+### Events
+
+| Event | Type | Description |
+|-------|------|-------------|
+| `leStart` | `EventEmitter<void>` | Emitted when the sequence starts playing |
+| `leStep` | `EventEmitter<{ index: number; step: ActionStep; target: HTMLElement }>` | Emitted when a step starts executing |
+| `leFinish` | `EventEmitter<void>` | Emitted when the sequence finishes |
+
+---
+
 ## <le-bar>
 
 A flexible bar component that handles overflow gracefully.
@@ -261,6 +292,7 @@ A flexible button component with multiple variants and states.
     \| '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 |
+| `value` | `string \| undefined` |  | The value associated with the button (useful when in a button group) |
 | `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 |
@@ -270,10 +302,14 @@ 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 |
+| `iconCount` | `number \| undefined` |  | Notification count for shorthand icons. Applies to start icon, or icon-only if set. |
+| `iconStartCount` | `number \| undefined` |  | Count specifically for iconStart. |
 | `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 |
+| `iconEndCount` | `number \| undefined` |  | Count specifically for iconEnd. |
+| `iconOnlyCount` | `number \| undefined` |  | Count specifically for iconOnly. |
 | `disabled` | `boolean` | `false` | Whether the button is disabled |
 | `type` | `'button' \| 'submit' \| 'reset'` | `'button'` | The button type attribute |
 | `href` | `string \| undefined` |  | Optional href to make the button act as a link |
@@ -292,6 +328,8 @@ A flexible button component with multiple variants and states.
 |------|-------------|
 | Default | Button text content |
 | `"icon-only"` | Icon for icon-only buttons |
+| `"icon-start"` | Icon placed in the beginning of the button |
+| `"icon-end"` | Icon placed in the end of the button |
 
 ### CSS Variables
 
@@ -320,12 +358,15 @@ into an overflow "more" menu.
 | `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. |
+| `type` | `'radio' \| 'checkbox' \| undefined` |  | Selection type: radio (single select) or checkbox (multi select) |
+| `value` | `string \| string[] \| undefined` |  | Selected value(s). If type is 'radio', value is a string. If type is 'checkbox', value is a string or string[]. |
 
 ### Events
 
 | Event | Type | Description |
 |-------|------|-------------|
 | `leOverflowSelect` | `EventEmitter<{ id: string }>` |  |
+| `leChange` | `EventEmitter<LeOptionSelectDetail \| LeMultiOptionSelectDetail>` |  |
 
 ### Slots
 
@@ -788,6 +829,24 @@ The header component updates that variable when it renders.
 | `el` | `HTMLElement` |  |  |
 | `name` | `string \| undefined` | `undefined` | Name of the icon to display. Corresponds to a JSON file in the assets folder. For example, "search" will load the "search.json" file. |
 | `size` | `number` | `16` | Size of the icon in pixels. Default is 16. |
+| `viewBox` | `string \| undefined` |  | Custom viewBox for the SVG. When set, overrides the viewBox from the loaded icon data. Useful for layer-only compositions without a base icon. |
+| `badge` | `string \| undefined` |  | Name of a badge icon to overlay on top of the base icon. The badge icon is loaded and composed with mask-based knockout. |
+| `badgePosition` | `string \| undefined` |  | Position of the badge icon within the base icon's viewBox. Comma-separated x,y values in viewBox units or percentages. Positive values = from start/top, Negative values = from end/bottom. Percentages work like CSS background-position. Default: "-5, -5" (bottom-right area). |
+| `badgeScale` | `number \| undefined` |  | Scale factor for the badge icon. Default: 1.0. Badge icons are designed at their natural display size, so 1.0 means no scaling. Use >1 to enlarge, <1 to shrink. |
+| `badgeOpacity` | `number \| undefined` |  | Optional opacity for the badge icon (0 to 1). |
+| `count` | `number \| undefined` |  | Optional numeric count for notification badge (e.g. 5 or 120). |
+| `maxCount` | `number \| undefined` |  | Optional max count threshold (e.g. 99 -> "99+"). |
+| `badgeText` | `string \| boolean \| undefined` |  | Optional text string for notification badge (e.g. "NEW"). Can also be set as boolean attribute `<le-icon badge-text></le-icon>` for an empty dot. |
+| `dot` | `boolean \| undefined` |  | Whether to display an empty circle dot badge. |
+| `badgeTextColor` | `string \| undefined` |  | Optional text/font color for the badge text. |
+| `badgeColor` | `string \| undefined` |  | Optional color for the badge icon or background (CSS color or variable). Defaults to 'transparent'. |
+| `baseColor` | `string \| undefined` |  | Optional color for the base icon (CSS color or variable). |
+| `layers` | `string \| undefined` |  | JSON string defining additional icon layers to compose on top of the base icon. Each layer has a name, optional position, and optional scale. Layers are rendered in order (first = bottom, last = top), and each layer's maskShape (if present) cuts through all layers below it. |
+| `rounded` | `boolean \| undefined` |  | Whether to use rounded variants of icon elements if defined in icon JSON. If not explicitly set, defaults to the global le-kit config (`icons.defaultRounded`). |
+| `sharp` | `boolean \| undefined` |  | Whether to force sharp (non-rounded) variants of icon elements. Overrides `rounded` prop, registry settings, and global defaults. |
+| `filled` | `boolean \| undefined` |  | Whether to use filled variants of icon elements if defined in icon JSON. If not explicitly set, defaults to the global le-kit config (`icons.defaultFilled`). |
+| `outlined` | `boolean \| undefined` |  | Whether to force outlined (non-filled) variants of icon elements. Overrides `filled` prop, registry settings, and global defaults. |
+| `thin` | `boolean \| undefined` |  | Whether to use thin variants of icon elements if defined in icon JSON. If not explicitly set, defaults to the global le-kit config (`icons.defaultThin`). |
 
 ---
 
@@ -1093,7 +1152,8 @@ component demos and documentation.
 | `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). |
+| `showControls` | `boolean \| 'none' \| 'width' \| 'breakpoints' \| 'all'` | `'all'` | What controls to show in the toolbar. - none: hide the entire controls bar - width: show only the width badge - breakpoints: show only the breakpoint preset buttons - all: show both the buttons and the width badge |
+| `showFrame` | `'no' \| 'hover' \| 'always'` | `'always'` | Visibility strategy for the preview frame border, background, and controls. - always: Frame controls and borders are always visible. - hover: Invisible by default, fades in on hover or focus-within. - no: Always invisible (only viewport content is visible). |
 | `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 |

package/package.json

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