@limetech/lime-elements 39.11.1 → 39.12.0

package/dist/types/components.d.ts

@@ -2498,6 +2498,29 @@ export namespace Components {
          */
         "whitelist"?: CustomElementDefinition[];
     }
+    /**
+     * A responsive masonry grid layout component.
+     * This component arranges slotted elements into a masonry-style grid,
+     * where items are placed in the shortest column, resulting in a
+     * Pinterest-like layout with minimal vertical gaps.
+     * The component uses JavaScript to calculate positions, providing
+     * reliable cross-browser support — unlike CSS-only approaches such as
+     * `columns` or `grid-template-rows: masonry`, which have limited
+     * browser support or produce poor results.
+     * The number of columns is determined automatically based on the
+     * available width and the minimum column width.
+     * @exampleComponent limel-example-masonry-layout-basic
+     * @exampleComponent limel-example-masonry-layout-images
+     * @exampleComponent limel-example-masonry-layout-ordered
+     * @beta 
+     */
+    interface LimelMasonryLayout {
+        /**
+          * When `true`, items are placed left-to-right in DOM order. When `false` (default), items are placed in the shortest column.
+          * @default false
+         */
+        "ordered": boolean;
+    }
     /**
      * @exampleComponent limel-example-menu-basic
      * @exampleComponent limel-example-menu-disabled
@@ -5501,6 +5524,28 @@ declare global {
         prototype: HTMLLimelMarkdownElement;
         new (): HTMLLimelMarkdownElement;
     };
+    /**
+     * A responsive masonry grid layout component.
+     * This component arranges slotted elements into a masonry-style grid,
+     * where items are placed in the shortest column, resulting in a
+     * Pinterest-like layout with minimal vertical gaps.
+     * The component uses JavaScript to calculate positions, providing
+     * reliable cross-browser support — unlike CSS-only approaches such as
+     * `columns` or `grid-template-rows: masonry`, which have limited
+     * browser support or produce poor results.
+     * The number of columns is determined automatically based on the
+     * available width and the minimum column width.
+     * @exampleComponent limel-example-masonry-layout-basic
+     * @exampleComponent limel-example-masonry-layout-images
+     * @exampleComponent limel-example-masonry-layout-ordered
+     * @beta 
+     */
+    interface HTMLLimelMasonryLayoutElement extends Components.LimelMasonryLayout, HTMLStencilElement {
+    }
+    var HTMLLimelMasonryLayoutElement: {
+        prototype: HTMLLimelMasonryLayoutElement;
+        new (): HTMLLimelMasonryLayoutElement;
+    };
     interface HTMLLimelMenuElementEventMap {
         "cancel": void;
         "select": MenuItem;
@@ -6387,6 +6432,7 @@ declare global {
         "limel-list": HTMLLimelListElement;
         "limel-list-item": HTMLLimelListItemElement;
         "limel-markdown": HTMLLimelMarkdownElement;
+        "limel-masonry-layout": HTMLLimelMasonryLayoutElement;
         "limel-menu": HTMLLimelMenuElement;
         "limel-menu-item-meta": HTMLLimelMenuItemMetaElement;
         "limel-menu-list": HTMLLimelMenuListElement;
@@ -8973,6 +9019,29 @@ declare namespace LocalJSX {
          */
         "whitelist"?: CustomElementDefinition[];
     }
+    /**
+     * A responsive masonry grid layout component.
+     * This component arranges slotted elements into a masonry-style grid,
+     * where items are placed in the shortest column, resulting in a
+     * Pinterest-like layout with minimal vertical gaps.
+     * The component uses JavaScript to calculate positions, providing
+     * reliable cross-browser support — unlike CSS-only approaches such as
+     * `columns` or `grid-template-rows: masonry`, which have limited
+     * browser support or produce poor results.
+     * The number of columns is determined automatically based on the
+     * available width and the minimum column width.
+     * @exampleComponent limel-example-masonry-layout-basic
+     * @exampleComponent limel-example-masonry-layout-images
+     * @exampleComponent limel-example-masonry-layout-ordered
+     * @beta 
+     */
+    interface LimelMasonryLayout {
+        /**
+          * When `true`, items are placed left-to-right in DOM order. When `false` (default), items are placed in the shortest column.
+          * @default false
+         */
+        "ordered"?: boolean;
+    }
     /**
      * @exampleComponent limel-example-menu-basic
      * @exampleComponent limel-example-menu-disabled
@@ -10903,6 +10972,9 @@ declare namespace LocalJSX {
         "lazyLoadImages": boolean;
         "removeEmptyParagraphs": boolean;
     }
+    interface LimelMasonryLayoutAttributes {
+        "ordered": boolean;
+    }
     interface LimelMenuAttributes {
         "disabled": boolean;
         "openDirection": OpenDirection;
@@ -11162,6 +11234,7 @@ declare namespace LocalJSX {
         "limel-list": Omit<LimelList, keyof LimelListAttributes> & { [K in keyof LimelList & keyof LimelListAttributes]?: LimelList[K] } & { [K in keyof LimelList & keyof LimelListAttributes as `attr:${K}`]?: LimelListAttributes[K] } & { [K in keyof LimelList & keyof LimelListAttributes as `prop:${K}`]?: LimelList[K] };
         "limel-list-item": Omit<LimelListItem, keyof LimelListItemAttributes> & { [K in keyof LimelListItem & keyof LimelListItemAttributes]?: LimelListItem[K] } & { [K in keyof LimelListItem & keyof LimelListItemAttributes as `attr:${K}`]?: LimelListItemAttributes[K] } & { [K in keyof LimelListItem & keyof LimelListItemAttributes as `prop:${K}`]?: LimelListItem[K] };
         "limel-markdown": Omit<LimelMarkdown, keyof LimelMarkdownAttributes> & { [K in keyof LimelMarkdown & keyof LimelMarkdownAttributes]?: LimelMarkdown[K] } & { [K in keyof LimelMarkdown & keyof LimelMarkdownAttributes as `attr:${K}`]?: LimelMarkdownAttributes[K] } & { [K in keyof LimelMarkdown & keyof LimelMarkdownAttributes as `prop:${K}`]?: LimelMarkdown[K] };
+        "limel-masonry-layout": Omit<LimelMasonryLayout, keyof LimelMasonryLayoutAttributes> & { [K in keyof LimelMasonryLayout & keyof LimelMasonryLayoutAttributes]?: LimelMasonryLayout[K] } & { [K in keyof LimelMasonryLayout & keyof LimelMasonryLayoutAttributes as `attr:${K}`]?: LimelMasonryLayoutAttributes[K] } & { [K in keyof LimelMasonryLayout & keyof LimelMasonryLayoutAttributes as `prop:${K}`]?: LimelMasonryLayout[K] };
         "limel-menu": Omit<LimelMenu, keyof LimelMenuAttributes> & { [K in keyof LimelMenu & keyof LimelMenuAttributes]?: LimelMenu[K] } & { [K in keyof LimelMenu & keyof LimelMenuAttributes as `attr:${K}`]?: LimelMenuAttributes[K] } & { [K in keyof LimelMenu & keyof LimelMenuAttributes as `prop:${K}`]?: LimelMenu[K] };
         "limel-menu-item-meta": Omit<LimelMenuItemMeta, keyof LimelMenuItemMetaAttributes> & { [K in keyof LimelMenuItemMeta & keyof LimelMenuItemMetaAttributes]?: LimelMenuItemMeta[K] } & { [K in keyof LimelMenuItemMeta & keyof LimelMenuItemMetaAttributes as `attr:${K}`]?: LimelMenuItemMetaAttributes[K] } & { [K in keyof LimelMenuItemMeta & keyof LimelMenuItemMetaAttributes as `prop:${K}`]?: LimelMenuItemMeta[K] };
         "limel-menu-list": Omit<LimelMenuList, keyof LimelMenuListAttributes> & { [K in keyof LimelMenuList & keyof LimelMenuListAttributes]?: LimelMenuList[K] } & { [K in keyof LimelMenuList & keyof LimelMenuListAttributes as `attr:${K}`]?: LimelMenuListAttributes[K] } & { [K in keyof LimelMenuList & keyof LimelMenuListAttributes as `prop:${K}`]?: LimelMenuList[K] };
@@ -12066,6 +12139,23 @@ declare module "@stencil/core" {
              * @exampleComponent limel-example-markdown-composite
              */
             "limel-markdown": LocalJSX.IntrinsicElements["limel-markdown"] & JSXBase.HTMLAttributes<HTMLLimelMarkdownElement>;
+            /**
+             * A responsive masonry grid layout component.
+             * This component arranges slotted elements into a masonry-style grid,
+             * where items are placed in the shortest column, resulting in a
+             * Pinterest-like layout with minimal vertical gaps.
+             * The component uses JavaScript to calculate positions, providing
+             * reliable cross-browser support — unlike CSS-only approaches such as
+             * `columns` or `grid-template-rows: masonry`, which have limited
+             * browser support or produce poor results.
+             * The number of columns is determined automatically based on the
+             * available width and the minimum column width.
+             * @exampleComponent limel-example-masonry-layout-basic
+             * @exampleComponent limel-example-masonry-layout-images
+             * @exampleComponent limel-example-masonry-layout-ordered
+             * @beta 
+             */
+            "limel-masonry-layout": LocalJSX.IntrinsicElements["limel-masonry-layout"] & JSXBase.HTMLAttributes<HTMLLimelMasonryLayoutElement>;
             /**
              * @exampleComponent limel-example-menu-basic
              * @exampleComponent limel-example-menu-disabled

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@limetech/lime-elements",
-  "version": "39.11.1",
+  "version": "39.12.0",
   "description": "Lime Elements",
   "author": "Lime Technologies",
   "license": "Apache-2.0",

package/dist/lime-elements/p-59716b48.entry.js

@@ -1 +0,0 @@
-import{r as t,c as s,h as e}from"./p-DBTJNfo7.js";const i=class{constructor(e){t(this,e),this.change=s(this,"change"),this.disabled=!1,this.maxLinesSecondaryText=3,this.handleChange=t=>{t.stopPropagation(),this.disabled||this.change.emit(t.detail)}}render(){return e("limel-list",{key:"d42e6342d4fd79d34cb2c6a9d25d3dfe577e9a99",items:this.createItems(),type:"radio",badgeIcons:this.badgeIcons,maxLinesSecondaryText:this.maxLinesSecondaryText,onChange:this.handleChange})}createItems(){return this.items.map((t=>{var s;return"separator"in t?t:Object.assign(Object.assign({},t),{selected:t.value===(null===(s=this.selectedItem)||void 0===s?void 0:s.value),disabled:this.disabled||t.disabled})}))}};export{i as limel_radio_button_group}