=============== LIBRARY RULES =============== From library maintainers: - Lime Elements components are web components built with Stencil - Use kebab-case for component tags (e.g., , ) - All components are prefixed with 'limel-' - Install via npm: npm install @limetech/lime-elements - TypeScript is fully supported with built-in type definitions - Components use shadow DOM and work with any framework (React, Vue, Angular, vanilla JS) - CSS custom properties are used for theming and customization - Icons require setup - components accept icon names that correspond to SVG filenames - Most components emit custom events - listen with addEventListener or framework event bindings - Components inherit font styles from parent - set font-family on body or parent element - Use the --lime-primary-color CSS variable to set the accent color for your application - Import components via script tag or module bundler as needed - For dark mode support, load color-palette-extended.css from the package - All prop names use camelCase in JavaScript/TypeScript but kebab-case in HTML attributes ### Quick Setup for Lime Elements Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/README.md Follow these steps to clone the repository, install dependencies, and start the local development server. ```bash git clone https://github.com/Lundalogik/lime-elements.git cd lime-elements npm install npm start # Starts local development server ``` -------------------------------- ### Update Dependencies and Fetch Latest Changes Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/CONTRIBUTING.md Before starting work, ensure your local repository is up-to-date with the upstream main branch and install all necessary dependencies. ```bash $ git checkout main $ git pull -r upstream main $ npm install ``` -------------------------------- ### Plugin Initialization Example Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/text-editor/menu-state-tracking.md Example of how to integrate the menu state tracking plugin into the ProseMirror adapter's `createEditorState` function. Ensure all necessary parameters, including the update callback, are provided. ```typescript createMenuStateTrackingPlugin( editorMenuTypesArray, this.menuCommandFactory, this.updateActiveActionBarItems, ), ``` -------------------------------- ### Clone and Set Up Repository Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/CONTRIBUTING.md Clone the lime-elements repository, set up the upstream remote, and install project dependencies. ```bash # Clone your fork of the repo into the current directory $ git clone https://github.com/Lundalogik/lime-elements # Navigate to the newly cloned directory $ cd lime-elements # Assign the original repo to a remote called "upstream" $ git remote add upstream https://github.com/Lundalogik/lime-elements # Install the dependencies $ npm install ``` -------------------------------- ### Breaking Change Example Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/guides/commits-and-prs.md An example of a commit message footer indicating a breaking change and providing migration instructions. ```text feat(picker): replace `value` with `values` to support multi-select BREAKING CHANGE: The `value` prop has been removed. Use `values: string[]` instead. To migrate, wrap any single value in an array. ``` -------------------------------- ### Install Lime Elements Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/INDEX.md Install the Lime Elements package using npm. This command is typically run once at the beginning of a project. ```bash npm install @limetech/lime-elements ``` -------------------------------- ### Include Example Component with @exampleComponent Tag Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/guides/authoring-docs.md Use the `@exampleComponent` tag in a component's doc block to automatically include its example. This is useful for demonstrating a component's usage within its own documentation. ```tsx /** * @exampleComponent my-component-example */ @Component({ tag: 'my-component', shadow: true, }) export class MyComponent {} ``` -------------------------------- ### Conventional Commit Example: Documentation Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/guides/commits-and-prs.md Example of a Conventional Commit message for documentation updates. ```text docs(commits-and-prs): clarify the meaning of `feat` ``` -------------------------------- ### Colors in Components Example Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/color-system/color-system.md An example demonstrating how colors are applied within various Lime Elements components, such as buttons, checkboxes, and inputs, to indicate status or state. ```html ``` -------------------------------- ### Conventional Commit Example: Performance Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/guides/commits-and-prs.md Example of a Conventional Commit message for a performance optimization, noting that the rendered output remains unchanged. ```text perf(list): skip re-renders when items are unchanged Memoize the per-item key computation so identical updates no longer trigger child re-renders. No change to rendered output. ``` -------------------------------- ### Create a New Markdown Page Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/guides/authoring-docs.md Add new documentation pages by creating a `.md` file and registering it in `guides.ts`. This example shows the basic structure of a markdown document. ```markdown # Hello world I'm a markdown document that can have components! ``` -------------------------------- ### Use Lime Elements Button in HTML Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/INDEX.md Include the Lime Elements script from a CDN and use the limel-button component in your HTML. This is a basic example to get started with a button. ```html ``` -------------------------------- ### Dark/Light Mode Color Example Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/color-system/color-system.md Shows how colors automatically adapt between dark and light modes. Note that '--color-white' and '--color-black' do not change. ```html ``` -------------------------------- ### UI Palette Example Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/color-system/color-system.md Illustrates the default UI palette, which includes 10 color swatches for common interface elements. It offers default and light variants for interactive feedback. ```html ``` -------------------------------- ### Conventional Commit Example: Feature Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/guides/commits-and-prs.md Example of a Conventional Commit message for a new feature, including a scope and a brief description. ```text feat(text-editor): support read-only mode Render the editor in a read-only state via the new `readonly` prop, without disabling keyboard navigation or selection. ``` -------------------------------- ### Contrast Color Palette Example Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/color-system/color-system.md Illustrates the use of contrast color swatches, which are prefixed with '--contrast-' and range from 100 to 1700, suitable for backgrounds and text. ```html ``` -------------------------------- ### getSelectionStart() Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/components/input-field/readme.md Returns the start position of the current text selection. Returns null if the input element is not available or if the input type does not support selection. ```APIDOC ### `getSelectionStart() => Promise` Returns the start position of the current text selection. Returns `null` if the input element is not available or if the input type does not support selection (e.g., `number`). #### Returns Type: `Promise` ``` -------------------------------- ### Tooltip for Supplemental Information Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/declutter/declutter.md This example shows how a tooltip can be used to hide supplemental but disposable information, displaying it only when the user explicitly requests it, thus decluttering the main interface. ```html ``` -------------------------------- ### Conventional Commit Example: Fix Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/guides/commits-and-prs.md Example of a Conventional Commit message for a bug fix, including a scope and details about the resolution. ```text fix(chip-set): don't enter edit mode on chip click Previously, clicking a chip would put the set into edit mode even when the consumer had not enabled editing. Limit edit-mode activation to the explicit edit affordance. ``` -------------------------------- ### Primary Palette Example Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/color-system/color-system.md Showcases the Primary palette, offering 40 color swatches for more extensive use cases like icons and diagrams, providing harmonic colors for meaningful communication. ```html ``` -------------------------------- ### Extended Color Palette Example Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/color-system/color-system.md Demonstrates the usage of the extended color palette, showcasing various hues and their variations (lighter, light, default, dark, darker). ```html ``` -------------------------------- ### Handling Component Value Changes Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/guides/events.md This example demonstrates how to bind to a component's 'onChange' event and update the component's internal state. It also shows how to handle a 'click' event on a button. ```tsx class MyComponent { @State() private value: string; public render() { return [ , ]; } private handleChange = (event: CustomEvent) => { this.value = event.detail; } private handleClick = (event: MouseEvent) => { console.log(this.value); } } ``` -------------------------------- ### Conventional Commit Example: Refactor Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/guides/commits-and-prs.md Example of a Conventional Commit message for a refactoring task, indicating no change in behavior or public API. ```text refactor(picker): extract item-rendering into a private method No change to behavior or public API. ``` -------------------------------- ### Input Field with Conditional Helper Text and Counters Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/declutter/declutter.md This example demonstrates how helper text and character counters in an input field are displayed only when the field is focused, reducing visual clutter when the user is not actively typing. ```html ``` -------------------------------- ### Initialize ProseMirror Schema with Custom Nodes and Marks Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/text-editor/node-vs-mark-types.md Initializes a ProseMirror schema by adding custom node and mark types to an existing schema. This example demonstrates how to extend the default schema with a custom paragraph node and a strikethrough mark. ```typescript import { Schema } from 'prosemirror-model'; import { addListNodes } from 'prosemirror-schema-list'; import { strikethrough, paragraph } from './menu-schema-extender'; private initializeSchema() { return new Schema({ nodes: addListNodes({ ...schema.spec.nodes, paragraph: paragraph, }, 'paragraph block*', 'block'), marks: schema.spec.marks.append({ strikethrough: strikethrough, }), }); } ``` -------------------------------- ### Conventional Commit Example: Feature with Breaking Change Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/guides/commits-and-prs.md Example of a Conventional Commit message for a feature that includes a breaking change, clearly indicating the modification to the API. ```text feat(picker): support selecting multiple items BREAKING CHANGE: The `value` prop has been removed. Use `values: string[]` instead. ``` -------------------------------- ### Run All Tests Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/CONTRIBUTING.md Execute all unit and end-to-end tests to ensure code quality. It is recommended to add tests for new code changes. ```bash $ npm test ``` -------------------------------- ### Include Component in Markdown Document Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/guides/authoring-docs.md Embed a component directly into a markdown document by using its HTML tag. This allows for inline examples of component behavior. ```html ``` -------------------------------- ### Distinguishing Primary and Secondary Actions Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/action-buttons/action-buttons.md Demonstrates how to use the `primary={true}` property on `limel-button` to visually differentiate the primary action. ```html ``` -------------------------------- ### show() Method (Deprecated) Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/components/snackbar/readme.md This method is deprecated and should not be used. Use the `open` property instead to control the visibility of the snackbar. ```APIDOC ## Methods ### `show() => Promise` **[DEPRECATED]** Use the `open` property instead.

Show the snackbar #### Returns Type: `Promise` ``` -------------------------------- ### triggerStart Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/components/text-editor/readme.md Dispatched if a trigger character is detected. ```APIDOC ## Event: triggerStart ### Description Dispatched if a trigger character is detected. ### Type `CustomEvent` ``` -------------------------------- ### Load and Use Lime Elements Components Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/README.md Load the Lime Elements package via CDN and use its components directly in your HTML. ```html ``` -------------------------------- ### Lime Technologies Brand Colors Example Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/color-system/color-system.md Displays the Lime Technologies brand colors, which are integrated into all palettes and can be used for branding and marketing purposes. These colors have fixed brightness across light and dark UIs. ```html ``` -------------------------------- ### File Input Component Properties Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/components/file-input/readme.md This section details the configurable properties of the limel-file-input component. ```APIDOC ## Properties | Property | Attribute | Description | Type | Default | | ---------- | ---------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | --------- | ------- | | `accept` | `accept` | Specifies the types of files that the dropzone will accept. By default, all file types are accepted. For media files, formats can be specified using: `audio/*`, `video/*`, `image/*`. Unique file type specifiers can also be used, for example: `.jpg`, `.pdf`. A comma-separated list of file extensions or MIME types is also acceptable, e.g., `image/png, image/jpeg` or `.png, .jpg, .jpeg`. | `string` | `'*'` | | `disabled` | `disabled` | Set to `true` to disable file input selection. | `boolean` | `false` | | `multiple` | `multiple` | Set to `true` to enable selection of multiple files | `boolean` | `false` | ``` -------------------------------- ### Get Menu Item States Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/text-editor/menu-state-tracking.md Retrieves the active state for each specified menu item type. Requires menu types, a command factory, and the current editor view. Use this to determine which toolbar buttons should appear selected. ```typescript const getMenuItemStates = ( menuTypes: EditorMenuTypes[], menuCommandFactory: MenuCommandFactory, view: EditorView, ): ActiveMenuItems => { const activeTypes: ActiveMenuItems = {}; menuTypes.forEach((type) => { const command: CommandWithActive = menuCommandFactory.getCommand(type); activeTypes[type] = command && command.active && command.active(view.state); }); return activeTypes; }; ``` -------------------------------- ### Chip Set Component Dependency Graph Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/components/chip-set/readme.md This Mermaid graph visualizes the dependencies of the limel-chip-set component and its related elements. It shows how limel-chip-set interacts with limel-helper-line, limel-notched-outline, limel-chip, and limel-icon, as well as the dependencies of limel-chip and other components. ```mermaid graph TD; limel-chip-set --> limel-helper-line limel-chip-set --> limel-notched-outline limel-chip-set --> limel-chip limel-chip-set --> limel-icon limel-chip --> limel-icon limel-chip --> limel-badge limel-chip --> limel-menu limel-chip --> limel-linear-progress limel-menu --> limel-spinner limel-menu --> limel-breadcrumbs limel-menu --> limel-input-field limel-menu --> limel-menu-list limel-menu --> limel-badge limel-menu --> limel-portal limel-menu --> limel-menu-surface limel-breadcrumbs --> limel-icon limel-breadcrumbs --> limel-tooltip limel-tooltip --> limel-portal limel-tooltip --> limel-tooltip-content limel-tooltip-content --> limel-hotkey limel-input-field --> limel-helper-line limel-input-field --> limel-icon limel-input-field --> limel-portal limel-input-field --> limel-menu-surface limel-input-field --> limel-list limel-input-field --> limel-notched-outline limel-example-chip-icon-color --> limel-chip-set limel-example-chip-set-basic --> limel-chip-set limel-example-chip-set-choice --> limel-chip-set limel-example-chip-set-composite --> limel-chip-set limel-example-chip-set-filter --> limel-chip-set limel-example-chip-set-filter-badge --> limel-chip-set limel-example-chip-set-image --> limel-chip-set limel-example-chip-set-input --> limel-chip-set limel-example-chip-set-input-non-removable --> limel-chip-set limel-example-chip-set-input-type-search --> limel-chip-set limel-example-chip-set-input-type-text --> limel-chip-set limel-example-chip-set-input-type-with-menu-items --> limel-chip-set limel-example-chip-set-invalid-chips --> limel-chip-set limel-file --> limel-chip-set limel-picker --> limel-chip-set style limel-chip-set fill:#f9f,stroke:#333,stroke-width:4px ``` -------------------------------- ### Create a Fixup Commit Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/guides/commits-and-prs.md Command to create a fixup commit, which is used to address review feedback by creating a new commit that will be automatically squashed into a target commit. ```shell git commit --fixup= ``` -------------------------------- ### File Input Component Events Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/components/file-input/readme.md This section details the events emitted by the limel-file-input component. ```APIDOC ## Events | Event | Description | | --------------- | ------------------------------- | | `filesSelected` | Emitted when files are selected | ``` -------------------------------- ### Initialize Text Editor Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/text-editor/editor-development.md Initializes the ProseMirror editor view, schema, and state. Handles parsing initial content and setting up the dispatch function for transactions. ```typescript private async initializeTextEditor() { this.schema = this.initializeSchema(); const initialDoc = await this.parseInitialContent(); this.menuCommandFactory = new MenuCommandFactory(this.schema); this.view = new EditorView( this.host.shadowRoot.querySelector('#editor'), { state: this.createEditorState(initialDoc), dispatchTransaction: this.handleTransaction, }, ); if (this.value) { this.updateView(this.value); } } ``` -------------------------------- ### Create a New Topic Branch Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/CONTRIBUTING.md Create a new branch for your feature, bug fix, or change, branching off the main development branch. ```bash $ git checkout -b ``` -------------------------------- ### Hotkey Properties Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/components/hotkey/readme.md This component accepts the following properties to customize its appearance and behavior. ```APIDOC ## Properties | Property | Attribute | Description | | ---------- | ---------- | ------------------------------------------------------------------- | | `disabled` | `disabled` | When `true`, the hotkey is rendered in a visually disabled state. | | `value` | `value` | The hotkey string to visualize, e.g. `"meta+c"` or `"shift+enter"`. | ``` -------------------------------- ### List Component Properties Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/components/list/readme.md This snippet details the configurable properties of the List component. ```APIDOC ## List Component Properties ### Properties | Property | Attribute | Description | | ----------------------- | -------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `badgeIcons` | `badge-icons` | Set to `true` if the list should display larger icons with a background | | `iconSize` | `icon-size` | Size of the icons in the list | | `items` | -- | List of items to display | | `maxLinesSecondaryText` | `max-lines-secondary-text` | By default, lists will display 3 lines of text, and then truncate the rest. Consumers can increase or decrease this number by specifying `maxLinesSecondaryText`. If consumer enters zero or negative numbers we default to 1; and if they type decimals we round up. | | `type` | `type` | The type of the list, omit to get a regular list. Available types are: `selectable`: regular list with single selection. `radio`: radio button list with single selection. `checkbox`: checkbox list with multiple selection. | ``` -------------------------------- ### Contradictory Action Labels Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/action-buttons/action-buttons.md Illustrates using clear, contradictory labels for action buttons to ensure users understand the consequences of their choices. ```html ``` -------------------------------- ### Create Insert Link Command Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/text-editor/menu-command.md Creates a command to insert or replace text with a link. It handles both cases: when text is selected (replacement) and when no text is selected (insertion). ```typescript const createInsertLinkCommand: CommandFunction = ( schema: Schema, _: EditorMenuTypes, link?: EditorTextLink, ): CommandWithActive => { const command: Command = (state, dispatch) => { const { from, to } = state.selection; const linkMark = schema.marks.link.create( getLinkAttributes(link.href, link.href), ); if (from === to) { // If no text is selected, insert new text with link const linkText = link.text || link.href; const newLink = schema.text(linkText, [linkMark]); dispatch(state.tr.insert(from, newLink)); } else { // If text is selected, replace selected text with link text const selectedText = state.doc.textBetween(from, to, ' '); const newLink = schema.text(link.text || selectedText, [linkMark]); dispatch(state.tr.replaceWith(from, to, newLink)); } return true; }; setActiveMethodForMark(command, schema.marks.link); return command; }; ``` -------------------------------- ### Create Menu State Tracking Plugin Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/design-guidelines/text-editor/menu-state-tracking.md Creates a ProseMirror plugin that monitors menu item states and dispatches updates. This plugin is essential for keeping the toolbar synchronized with the editor's current state. It uses `getMenuItemStates` and a callback to update the UI. ```typescript export const createMenuStateTrackingPlugin = ( menuTypes: EditorMenuTypes[], menuCommandFactory: MenuCommandFactory, updateCallback: UpdateMenuItemsCallBack, ) => { return new Plugin({ key: actionBarPluginKey, state: { init: () => { return {}; }, apply: (tr, menuStates) => { const newMenuStates = tr.getMeta(actionBarPluginKey); return newMenuStates ? newMenuStates : menuStates; }, }, view: () => ({ update: (view) => { const oldItemStates = actionBarPluginKey.getState(view.state); const menuItemStates = getMenuItemStates( menuTypes, menuCommandFactory, view, ); if (!isEqual(oldItemStates, menuItemStates)) { const tr = view.state.tr.setMeta( actionBarPluginKey, menuItemStates, ); view.dispatch(tr); updateCallback(menuItemStates); } }, }), }); }; ``` -------------------------------- ### Menu List Properties Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/components/menu-list/readme.md This section details the configurable properties of the limel-menu-list component. ```APIDOC ## Properties | Property | Attribute | Description | | ------------ | ------------- | ----------------------------------------------------------------------- | | `badgeIcons` | `badge-icons` | Set to `true` if the list should display larger icons with a background | | `iconSize` | `icon-size` | Size of the icons in the list | | `items` | -- | List of items to display | ``` -------------------------------- ### Configure Global Icon Path Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/README.md Set a global icon path for Lime Elements components when 'assets' is in a sub-folder. ```typescript ``` -------------------------------- ### Menu Properties Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/components/menu/readme.md This snippet outlines the configurable properties of the Menu component, including display options, item management, and state control. ```APIDOC ## Menu Component Properties This documentation details the properties available for the Menu component. ### Properties | Property | Attribute | Description | | -------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `badgeIcons` | `badge-icons` | Defines whether the menu should show badges. | | `disabled` | `disabled` | Sets the disabled state of the menu. | | `emptyResultMessage` | `empty-result-message` | Message to display when search returns 0 results. | | `gridLayout` | `grid-layout` | Renders list items in a grid layout, rather than a vertical list | | `items` | -- | A list of items and separators to show in the menu. | | `keepOpenOnSelect` | `keep-open-on-select` | When `true`, the menu stays open after an item is selected. | | `open` | `open` | Sets the open state of the menu. | ``` -------------------------------- ### Menu Surface Properties Source: https://github.com/lundalogik/lime-elements/blob/gh-pages/versions/latest/markdown-docs/components/menu-surface/readme.md These are the configurable properties for the Menu Surface component. ```APIDOC ## Properties | Property | Attribute | Description | | -------------------- | --------- | ---------------------------------------------------------------------------- | | `allowClicksElement` | -- | Clicks in this element should not be prevented when the menu surface is open | | `open` | `open` | True if the menu surface is open, false otherwise | ```