le-kit 0.5.4 → 0.6.0

package/LLM_CONTEXT.md

@@ -5,6 +5,8 @@ This file is auto-generated and contains documentation for all Le-Kit web compon
 ## Table of Contents
 
 - [le-bar](#le-bar)
+- [le-bento-grid](#le-bento-grid)
+- [le-bento-tile](#le-bento-tile)
 - [le-box](#le-box)
 - [le-breadcrumbs](#le-breadcrumbs)
 - [le-button](#le-button)
@@ -19,6 +21,7 @@ This file is auto-generated and contains documentation for all Le-Kit web compon
 - [le-header](#le-header)
 - [le-header-placeholder](#le-header-placeholder)
 - [le-icon](#le-icon)
+- [le-item](#le-item)
 - [le-multiselect](#le-multiselect)
 - [le-navigation](#le-navigation)
 - [le-number-input](#le-number-input)
@@ -80,6 +83,83 @@ row and handles overflow according to the `overflow` prop.
 
 ---
 
+## <le-bento-grid>
+
+A responsive bento-style CSS grid container.
+
+`le-bento-grid` creates a dense auto-filling grid using `auto-fill` with
+`minmax()` columns. Pair it with `le-bento-tile` children that declare
+how many columns and rows they should span.
+
+All sizing props can also be controlled purely via CSS custom properties —
+useful when you want to configure from a stylesheet or a parent component.
+If a prop is set, it writes the corresponding CSS custom property as an
+inline style (which overrides any external stylesheet value).
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `columnMinWidth` | `number \| undefined` |  | Minimum column width in pixels (maps to the `min` of CSS `minmax()`). Controls how narrow a column can be before wrapping. |
+| `columnMaxWidth` | `number \| undefined` |  | Maximum column width in pixels (maps to the `max` of CSS `minmax()`). The grid stops adding columns when dividing `max-width` by this value. |
+| `minColumns` | `number \| undefined` |  | Minimum number of columns before overflow. Sets component `min-width` as: `columnMinWidth * minColumns + gap * (minColumns - 1)`. |
+| `maxColumns` | `number \| undefined` |  | Maximum number of columns before the grid wraps.  When set, this takes precedence over `maxWidth` and computes the grid's effective maximum width as: `maxColumns * columnMaxWidth + (maxColumns - 1) * gap`  This is useful when you want an explicit column cap without manually accounting for the gaps between tracks. |
+| `maxWidth` | `number \| undefined` |  | Maximum overall width of the grid in pixels.  Ignored when `maxColumns` is set. |
+| `rowHeight` | `number \| undefined` |  | Height of each row unit in pixels. A tile with `rows="2"` will be `2 × rowHeight + gap` tall. |
+| `gap` | `number \| undefined` |  | Gap between tiles in pixels. |
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| Default | Accepts `le-bento-tile` elements (or any block-level content) |
+
+### CSS Variables
+
+| Name | Description |
+|------|-------------|
+| `--le-bento-col-min` | Minimum column track width (default 200px) |
+| `--le-bento-col-max` | Maximum column track width (default 250px) |
+| `--le-bento-min-columns` | Minimum number of columns before overflow |
+| `--le-bento-max-columns` | Maximum number of columns before wrapping |
+| `--le-bento-row-height` | Height of each row unit (default 110px) |
+| `--le-bento-gap` | Gap between tiles (default 12px) |
+| `--le-bento-max-width` | Maximum grid container width (default none) |
+
+---
+
+## <le-bento-tile>
+
+A single tile for use inside `le-bento-grid`.
+
+Declares how many columns and rows it should span in the bento grid.
+Visual appearance (border-radius, shadow) is controlled via CSS custom
+properties so themes can override them.
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `cols` | `number` | `1` | Number of grid columns this tile should span. |
+| `rows` | `number` | `1` | Number of grid rows this tile should span. |
+
+### Slots
+
+| Name | Description |
+|------|-------------|
+| Default | Content displayed inside the tile |
+
+### CSS Variables
+
+| Name | Description |
+|------|-------------|
+| `--le-bento-tile-radius` | Border radius (default: var(--le-radius-xl, 0.75rem)) |
+| `--le-bento-tile-shadow` | Box shadow (default: subtle multi-layer shadow) |
+| `--le-bento-tile-bg` | Background color (default: transparent) |
+| `--le-bento-tile-padding` | Inner padding (default: 0) |
+
+---
+
 ## <le-box>
 
 A flexible box component for use as a flex item within le-stack.
@@ -526,6 +606,7 @@ Slots:
 | `revealOnScroll` | `string \| undefined` |  | Sticky-only reveal behavior (hide on scroll down, show on scroll up). - missing/false: disabled - true/empty attribute: enabled with default threshold (16) - number (as string): enabled and used as threshold |
 | `shrinkOffset` | `string \| undefined` |  | Shrink trigger. - missing/0: disabled - number (px): shrink when scrollY >= that value (but never before header height) - css var name (e.g. --foo): shrink when scrollY >= resolved var value - selector (e.g. .page-title): shrink when that element scrolls out of view above the viewport |
 | `expandOnHover` | `boolean` | `false` | If true, expand the header when hovered |
+| `layout` | `'default' \| 'space-between' \| undefined` | `'default'` | Layout Type - default is three cells in the grid: start, title, end - space-between will use the start and end slots but put space between them and hide the title slot |
 
 ### Events
 
@@ -564,7 +645,7 @@ Slots:
 | `--le-header-height` | Base height (main row) |
 | `--le-header-height-condensed` | Condensed height when shrunk |
 | `--le-header-transition` | Transition timing |
-| `--le-header-z` | Z-index (fixed mode) |
+| `--le-z-header` | Z-index (fixed mode) |
 
 ---
 
@@ -595,6 +676,16 @@ The header component updates that variable when it renders.
 
 ---
 
+## <le-item>
+
+### Properties
+
+| Name | Type | Default | Description |
+|------|------|---------|-------------|
+| `el` | `HTMLElement` |  |  |
+
+---
+
 ## <le-multiselect>
 
 A multiselect component for selecting multiple options.
@@ -905,6 +996,9 @@ Perfect for toggling between a small set of related options.
 | `side` | `LeSidePanelSide` | `'start'` | Which side the panel is attached to. |
 | `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). |
+| `top` | `number \| 'under-header'` | `0` | Top offset for the sticky panel. |
+| `fullHeight` | `boolean` | `false` | Whether the sticky panel should stretch to full height. |
 | `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. |

package/package.json

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