le-kit 0.5.3 → 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)
@@ -27,7 +30,6 @@ This file is auto-generated and contains documentation for all Le-Kit web compon
 - [le-round-progress](#le-round-progress)
 - [le-scroll-progress](#le-scroll-progress)
 - [le-segmented-control](#le-segmented-control)
-- [le-select](#le-select)
 - [le-side-panel](#le-side-panel)
 - [le-side-panel-toggle](#le-side-panel-toggle)
 - [le-slot](#le-slot)
@@ -81,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.
@@ -527,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
 
@@ -565,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) |
 
 ---
 
@@ -596,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.
@@ -895,38 +985,6 @@ Perfect for toggling between a small set of related options.
 
 ---
 
-## <le-select>
-
-A select dropdown component for single selection.
-
-### Properties
-
-| Name | Type | Default | Description |
-|------|------|---------|-------------|
-| `el` | `HTMLElement` |  |  |
-| `options` | `LeOption[] \| string` | `[]` | The options to display in the dropdown. |
-| `value` | `LeOptionValue \| undefined` |  | The currently selected value. |
-| `placeholder` | `string` | `'Select an option'` | Placeholder text when no option is selected. |
-| `disabled` | `boolean` | `false` | Whether the select is disabled. |
-| `required` | `boolean` | `false` | Whether selection is required. |
-| `name` | `string \| undefined` |  | Name attribute for form submission. |
-| `fullWidth` | `boolean` | `false` | Whether the select should take full width of its container. |
-| `size` | `'small' \| 'medium' \| 'large'` | `'medium'` | Size variant of the select. |
-| `variant` | `'default' \| 'outlined' \| 'solid'` | `'default'` | Visual variant of the select. |
-| `searchable` | `boolean` | `false` | Whether the input is searchable. |
-| `emptyText` | `string` | `'No results found'` | Text to show when no options match the search. |
-| `open` | `boolean` | `false` | Whether the dropdown is currently open. |
-
-### Events
-
-| Event | Type | Description |
-|-------|------|-------------|
-| `change` | `EventEmitter<LeOptionSelectDetail>` | Emitted when the selected value changes. |
-| `leOpen` | `EventEmitter<void>` | Emitted when the dropdown opens. |
-| `leClose` | `EventEmitter<void>` | Emitted when the dropdown closes. |
-
----
-
 ## <le-side-panel>
 
 ### Properties
@@ -938,6 +996,9 @@ A select dropdown component for single selection.
 | `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.3",
+  "version": "0.6.0",
   "description": "Themable web components library with CMS admin mode support",
   "main": "dist/index.cjs.js",
   "module": "dist/index.js",
@@ -18,11 +18,13 @@
       "import": "./dist/components/index.js",
       "types": "./dist/components/index.d.ts"
     },
+    "./components/*": "./dist/components/*",
     "./loader": {
       "import": "./loader/index.js",
       "require": "./loader/index.cjs.js",
       "types": "./loader/index.d.ts"
     },
+    "./dist/docs.json": "./dist/docs.json",
     "./dist/themes/*.css": "./dist/themes/*.css"
   },
   "repository": {

package/readme.md

@@ -1,5 +1,7 @@
 # Le-Kit
 
+> **Note:** You are looking at the NPM package documentation. If you are looking to contribute to the library, please see the [Monorepo Documentation](../../README.md) at the root of the repository.
+
 [![npm version](https://img.shields.io/npm/v/le-kit.svg)](https://www.npmjs.com/package/le-kit)
 [![Built With Stencil](https://img.shields.io/badge/-Built%20With%20Stencil-16161d.svg?logo=data%3Aimage%2Fsvg%2Bxml%3Bbase64%2CPD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz4KPCEtLSBHZW5lcmF0b3I6IEFkb2JlIElsbHVzdHJhdG9yIDE5LjIuMSwgU1ZHIEV4cG9ydCBQbHVnLUluIC4gU1ZHIFZlcnNpb246IDYuMDAgQnVpbGQgMCkgIC0tPgo8c3ZnIHZlcnNpb249IjEuMSIgaWQ9IkxheWVyXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4IgoJIHZpZXdCb3g9IjAgMCA1MTIgNTEyIiBzdHlsZT0iZW5hYmxlLWJhY2tncm91bmQ6bmV3IDAgMCA1MTIgNTEyOyIgeG1sOnNwYWNlPSJwcmVzZXJ2ZSI%2BCjxzdHlsZSB0eXBlPSJ0ZXh0L2NzcyI%2BCgkuc3Qwe2ZpbGw6I0ZGRkZGRjt9Cjwvc3R5bGU%2BCjxwYXRoIGNsYXNzPSJzdDAiIGQ9Ik00MjQuNywzNzMuOWMwLDM3LjYtNTUuMSw2OC42LTkyLjcsNjguNkgxODAuNGMtMzcuOSwwLTkyLjctMzAuNy05Mi43LTY4LjZ2LTMuNmgzMzYuOVYzNzMuOXoiLz4KPHBhdGggY2xhc3M9InN0MCIgZD0iTTQyNC43LDI5Mi4xSDE4MC40Yy0zNy42LDAtOTIuNy0zMS05Mi43LTY4LjZ2LTMuNkgzMzJjMzcuNiwwLDkyLjcsMzEsOTIuNyw2OC42VjI5Mi4xeiIvPgo8cGF0aCBjbGFzcz0ic3QwIiBkPSJNNDI0LjcsMTQxLjdIODcuN3YtMy42YzAtMzcuNiw1NC44LTY4LjYsOTIuNy02OC42SDMzMmMzNy45LDAsOTIuNywzMC43LDkyLjcsNjguNlYxNDEuN3oiLz4KPC9zdmc%2BCg%3D%3D&colorA=16161d&style=flat-square)](https://stenciljs.com)