@inglorious/ui 1.0.1 → 2.0.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "1.0.1",
+  "version": "2.0.0",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "IceOnFire <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -280,25 +280,27 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/utils": "3.7.3",
-    "@inglorious/charts": "4.0.1",
-    "@inglorious/web": "4.5.1"
+    "@inglorious/charts": "5.0.0",
+    "@inglorious/web": "5.0.0",
+    "@inglorious/utils": "3.8.0"
   },
   "devDependencies": {
     "@fontsource/material-symbols-outlined": "^5.2.36",
     "@fortawesome/fontawesome-free": "^7.2.0",
-    "@storybook/addon-docs": "^10.2.19",
-    "@storybook/web-components-vite": "^10.2.19",
+    "@storybook/addon-docs": "^10.3.3",
+    "@storybook/web-components-vite": "^10.3.3",
     "happy-dom": "^15.11.0",
     "jsdom": "^25.0.0",
     "lucide": "^0.575.0",
     "prettier": "^3.6.2",
-    "storybook": "^10.2.19",
+    "storybook": "^10.3.3",
     "vite": "^7.3.1",
     "vitest": "^4.0.15",
     "@inglorious/eslint-config": "1.1.2",
-    "@inglorious/store": "9.6.0",
-    "@inglorious/web": "4.5.1"
+    "@inglorious/vite-plugin-vue": "1.0.0",
+    "@inglorious/web": "5.0.0",
+    "@inglorious/store": "10.0.0",
+    "@inglorious/vite-plugin-jsx": "2.0.0"
   },
   "engines": {
     "node": ">= 22"

package/src/controls/button/button.stories.js

@@ -1,12 +1,12 @@
 import { html } from "@inglorious/web"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { button } from "."
+import { Button } from "."
 
 export default {
   title: "Controls/Button",
   tags: ["autodocs"],
-  render: createRender(button),
+  render: createRender(Button),
   argTypes: {
     children: {
       control: "text",

package/src/controls/button/index.js

@@ -1,3 +1,3 @@
 import * as renderers from "./template.js"
 
-export const button = { ...renderers }
+export const Button = { ...renderers }

package/src/controls/button/template.js

@@ -8,8 +8,8 @@ import { classMap, html, ref } from "@inglorious/web"
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
- * Button type for Inglorious Web.
- *
+ * Renders a themed button for actions and form submission.
+ * Supports variants, sizes, shapes, pressed state, and full-width layout.
  * @example
  * // Stateless usage
  * button.render({ children: 'Click me', variant: 'primary' })

package/src/controls/button-group/button-group.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { buttonGroup } from "."
+import { ButtonGroup } from "."
 
 export default {
   title: "Controls/ButtonGroup",
   tags: ["autodocs"],
-  render: createRender(buttonGroup),
+  render: createRender(ButtonGroup),
   argTypes: {
     value: {
       control: "object",

package/src/controls/button-group/index.js

@@ -1,3 +1,3 @@
 import * as renderers from "./template.js"
 
-export const buttonGroup = { ...renderers }
+export const ButtonGroup = { ...renderers }

package/src/controls/button-group/template.js

@@ -6,11 +6,11 @@
 import { classMap, html, ref } from "@inglorious/web"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
-import { button } from "../button/index.js"
+import { Button } from "../button/index.js"
 
 /**
- * Button group control for grouped actions.
- *
+ * Renders a grouped set of buttons with optional single or multi selection.
+ * Handles attached layout, selection state, and per-item overrides.
  * @param {ButtonGroupProps} props
  * @returns {TemplateResult}
  */
@@ -69,7 +69,7 @@ export function render(props) {
             ? value === itemValue
             : false
 
-        return button.render({
+        return Button.render({
           children: html`
             ${icon ? html`<span class="iw-button-icon">${icon}</span>` : null}
             ${children ?? label}

package/src/controls/checkbox/checkbox.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { checkbox } from "."
+import { Checkbox } from "."
 
 export default {
   title: "Controls/Checkbox",
   tags: ["autodocs"],
-  render: createRender(checkbox),
+  render: createRender(Checkbox),
   argTypes: {
     label: { control: "text", description: "Label text." },
     name: { control: "text", description: "Native HTML name attribute." },

package/src/controls/checkbox/index.js

@@ -1,3 +1,3 @@
 import * as renderers from "./template.js"
 
-export const checkbox = { ...renderers }
+export const Checkbox = { ...renderers }

package/src/controls/checkbox/template.js

@@ -8,8 +8,8 @@ import { classMap, html, ref } from "@inglorious/web"
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
- * Checkbox control for boolean values.
- *
+ * Renders a labeled checkbox for boolean input.
+ * Supports disabled/required states plus size and color variants.
  * @param {CheckboxProps} props
  * @returns {TemplateResult}
  */

package/src/controls/combobox/combobox.stories.js

@@ -2,7 +2,7 @@ import {
   createEntityRender,
   notifyActionArgType,
 } from "../../stories/notifyStory.js"
-import { combobox } from "./index.js"
+import { Combobox } from "./index.js"
 
 const options = [
   { label: "Italy", value: "it" },
@@ -14,7 +14,7 @@ const options = [
 export default {
   title: "Controls/Combobox",
   tags: ["autodocs"],
-  render: createEntityRender({ combobox }),
+  render: createEntityRender({ Combobox }),
   argTypes: {
     ...notifyActionArgType,
     label: { control: "text", description: "Field label." },
@@ -59,7 +59,7 @@ export default {
 export const SingleClosed = {}
 SingleClosed.args = {
   id: "combobox",
-  type: "combobox",
+  type: "Combobox",
   label: "Country",
   selectedValue: "it",
   isMulti: false,

package/src/controls/combobox/index.js

@@ -1,8 +1,8 @@
 import * as handlers from "./handlers.js"
 import * as helpers from "./helpers.js"
-import { combobox as renderers } from "./template.js"
+import { Combobox as renderers } from "./template.js"
 
-export const combobox = {
+export const Combobox = {
   ...handlers,
   ...renderers,
   render(entity, api) {

package/src/controls/combobox/template.js

@@ -6,7 +6,7 @@
 
 import { classMap, html, ref, repeat, when } from "@inglorious/web"
 
-import { chip } from "../../data-display/chip/index.js"
+import { Chip } from "../../data-display/chip/index.js"
 import {
   filterOptions,
   formatOption,
@@ -17,13 +17,24 @@ import {
 
 const NO_FOCUSED_INDEX = -1
 
-export const combobox = {
+export const Combobox = {
   /**
-   * Select control render function.
+   * Main entrypoint for the combobox control. It renders the wrapper, label, control, and dropdown when open.
+   * Comboboxes support search, single or multi-select values, and clearable selection.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
    */
   render(props) {
+    return this.renderCombobox(props)
+  },
+
+  /**
+   * Main entrypoint for the combobox control. It renders the wrapper, label, control, and dropdown when open.
+   * Comboboxes support search, single or multi-select values, and clearable selection.
+   * @param {ComboboxProps} props
+   * @returns {TemplateResult}
+   */
+  renderCombobox(props) {
     return html`<div
       class=${classMap({
         "iw-combobox": true,
@@ -40,7 +51,8 @@ export const combobox = {
   },
 
   /**
-   * Render trigger control.
+   * Renders the clickable control element that shows the current selection and toggles the dropdown.
+   * Handles placeholder, clear button, and the open/disabled state.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
    */
@@ -85,7 +97,8 @@ export const combobox = {
   },
 
   /**
-   * Render single selected value.
+   * Renders the currently selected value in single-select mode.
+   * Falls back to the placeholder when no value is selected.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
    */
@@ -108,7 +121,8 @@ export const combobox = {
   },
 
   /**
-   * Render multi selected value tags.
+   * Renders the selected values in multi-select mode as a row of tags.
+   * Falls back to the placeholder when the selection is empty.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
    */
@@ -129,7 +143,8 @@ export const combobox = {
   },
 
   /**
-   * Render a selected multi-value tag.
+   * Renders a single selected tag in multi-select mode.
+   * Used to customize chip styling and remove behavior.
    * @param {ComboboxProps} props
    * @param {string|number} value
    * @returns {TemplateResult}
@@ -143,7 +158,7 @@ export const combobox = {
       class="iw-combobox-multi-value-tag"
       @click=${(event) => event.stopPropagation()}
     >
-      ${chip.render({
+      ${Chip.render({
         id: tagId,
         children: option ? getOptionLabel(option) : String(value),
         isRemovable: true,
@@ -158,7 +173,8 @@ export const combobox = {
   },
 
   /**
-   * Render dropdown.
+   * Renders the dropdown panel that contains search input, options, and empty/loading states.
+   * Shown only when the combobox is open.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
    */
@@ -195,7 +211,8 @@ export const combobox = {
   },
 
   /**
-   * Render search input.
+   * Renders the optional search input used to filter options.
+   * Emits search change events as the user types.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
    */
@@ -214,7 +231,8 @@ export const combobox = {
   },
 
   /**
-   * Render options list.
+   * Renders the list of available options in the dropdown.
+   * Delegates each option to `renderOption` for customization.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
    */
@@ -231,7 +249,8 @@ export const combobox = {
   },
 
   /**
-   * Render an option row.
+   * Renders a single option row, including selection and focus styling.
+   * Handles click/selection for the option.
    * @param {ComboboxProps} props
    * @param {{ option: ComboboxOption, index: number }} payload
    * @returns {TemplateResult}
@@ -272,7 +291,8 @@ export const combobox = {
   },
 
   /**
-   * Render loading state.
+   * Renders the loading state shown while options are being fetched or filtered.
+   * Displayed when `isLoading` is true.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
    */
@@ -281,7 +301,8 @@ export const combobox = {
   },
 
   /**
-   * Render no options state.
+   * Renders the empty state when no options match the search or list is empty.
+   * Uses the `noOptionsMessage` prop when provided.
    * @param {ComboboxProps} props
    * @returns {TemplateResult}
    */

package/src/controls/fab/fab.stories.js

@@ -1,12 +1,12 @@
 import { html } from "@inglorious/web"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { fab } from "."
+import { Fab } from "."
 
 export default {
   title: "Controls/Fab",
   tags: ["autodocs"],
-  render: createRender(fab),
+  render: createRender(Fab),
   argTypes: {
     children: { control: "text", description: "Content of the FAB." },
     color: {

package/src/controls/fab/index.js

@@ -1,3 +1,3 @@
 import * as renderers from "./template.js"
 
-export const fab = { ...renderers }
+export const Fab = { ...renderers }

package/src/controls/fab/template.js

@@ -5,11 +5,11 @@
 
 import { html } from "@inglorious/web"
 
-import { button } from "../button/index.js"
+import { Button } from "../button/index.js"
 
 /**
- * Floating action button for primary contextual actions.
- *
+ * Renders a floating action button for primary contextual actions.
+ * Supports extended mode to display label text alongside the icon.
  * @param {FabProps} props
  * @returns {TemplateResult}
  */
@@ -22,7 +22,7 @@ export function render(props) {
     ...rest
   } = props
 
-  return button.render({
+  return Button.render({
     ...rest,
     shape: isExtended ? "pill" : "round",
     className:

package/src/controls/icon-button/icon-button.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { iconButton } from "."
+import { IconButton } from "."
 
 export default {
   title: "Controls/IconButton",
   tags: ["autodocs"],
-  render: createRender(iconButton),
+  render: createRender(IconButton),
   argTypes: {
     icon: { control: "text", description: "Leading icon content." },
     label: { control: "text", description: "Optional button label." },

package/src/controls/icon-button/index.js

@@ -1,3 +1,3 @@
 import * as renderers from "./template.js"
 
-export const iconButton = { ...renderers }
+export const IconButton = { ...renderers }

package/src/controls/icon-button/template.js

@@ -5,11 +5,11 @@
 
 import { html } from "@inglorious/web"
 
-import { button } from "../button/index.js"
+import { Button } from "../button/index.js"
 
 /**
- * Icon button wrapper built on top of the base button renderer.
- *
+ * Renders a button optimized for icons with optional label and icon placement.
+ * Built on top of the base button renderer for consistent theming.
  * @param {IconButtonProps} props
  * @returns {TemplateResult}
  */
@@ -33,7 +33,7 @@ export function render(props) {
     </span>
   `
 
-  return button.render({
+  return Button.render({
     ...props,
     children,
     onClick,

package/src/controls/input/index.js

@@ -1,3 +1,3 @@
 import * as renderers from "./template.js"
 
-export const input = { ...renderers }
+export const Input = { ...renderers }

package/src/controls/input/input.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { input } from "."
+import { Input } from "."
 
 export default {
   title: "Controls/Input",
   tags: ["autodocs"],
-  render: createRender(input),
+  render: createRender(Input),
   argTypes: {
     // ...notifyActionArgType,
     label: {

package/src/controls/input/template.js

@@ -8,8 +8,8 @@ import { classMap, html, ref } from "@inglorious/web"
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
- * Input component for Inglorious Web.
- *
+ * Renders a labeled input field with optional icons, hint text, and error messaging.
+ * Supports disabled/readonly/required states and emits `onChange` on input.
  * @example
  * // Stateless usage
  * input.render({ label: 'Email', type: 'email', placeholder: 'you@example.com' })

package/src/controls/radio-group/index.js

@@ -1,3 +1,3 @@
 import * as renderers from "./template.js"
 
-export const radioGroup = { ...renderers }
+export const RadioGroup = { ...renderers }

package/src/controls/radio-group/radio-group.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { radioGroup } from "."
+import { RadioGroup } from "."
 
 export default {
   title: "Controls/RadioGroup",
   tags: ["autodocs"],
-  render: createRender(radioGroup),
+  render: createRender(RadioGroup),
   argTypes: {
     label: { control: "text", description: "Fieldset label." },
     name: { control: "text", description: "Native radio input name." },

package/src/controls/radio-group/template.js

@@ -8,8 +8,8 @@ import { classMap, html, ref } from "@inglorious/web"
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
- * Radio group control for selecting one option.
- *
+ * Renders a group of radio options for single selection.
+ * Supports horizontal/vertical layouts and disabled state.
  * @param {RadioGroupProps} props
  * @returns {TemplateResult}
  */

package/src/controls/rating/index.js

@@ -1,3 +1,3 @@
 import * as renderers from "./template.js"
 
-export const rating = { ...renderers }
+export const Rating = { ...renderers }

package/src/controls/rating/rating.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { rating } from "."
+import { Rating } from "."
 
 export default {
   title: "Controls/Rating",
   tags: ["autodocs"],
-  render: createRender(rating),
+  render: createRender(Rating),
   argTypes: {
     value: { control: "number", description: "Current rating value." },
     max: { control: "number", description: "Maximum rating value." },

package/src/controls/rating/template.js

@@ -10,8 +10,8 @@ const DEFAULT_MAX = 5
 const INDEX_TO_RATING = 1
 
 /**
- * Rating control rendered as clickable symbols.
- *
+ * Renders a star (or custom symbol) rating control.
+ * Supports max value, read-only/disabled states, and emits selection changes.
  * @param {RatingProps} props
  * @returns {TemplateResult}
  */

package/src/controls/select/index.js

@@ -1,3 +1,3 @@
 import * as renderers from "./template.js"
 
-export const select = { ...renderers }
+export const Select = { ...renderers }

package/src/controls/select/select.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { select } from "./index.js"
+import { Select } from "./index.js"
 
 export default {
   title: "Controls/Select",
   tags: ["autodocs"],
-  render: createRender(select),
+  render: createRender(Select),
   argTypes: {
     name: {
       control: "text",

package/src/controls/select/template.js

@@ -9,8 +9,8 @@ import { applyElementProps } from "../../shared/applyElementProps.js"
 import { formatOption, getOptionValue, isOptionSelected } from "./helpers.js"
 
 /**
- * Select component for Inglorious Web.
- *
+ * Renders a styled native select control with optional single or multi-select modes.
+ * Options can be primitives or objects and are rendered with consistent theming.
  * @example
  * // Stateless usage
  * select.render({ options: ['true', 'false'], value: 'true' })

package/src/controls/slider/index.js

@@ -1,3 +1,3 @@
 import * as renderers from "./template.js"
 
-export const slider = { ...renderers }
+export const Slider = { ...renderers }

package/src/controls/slider/slider.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { slider } from "."
+import { Slider } from "."
 
 export default {
   title: "Controls/Slider",
   tags: ["autodocs"],
-  render: createRender(slider),
+  render: createRender(Slider),
   argTypes: {
     label: { control: "text", description: "Field label." },
     name: { control: "text", description: "Native input name." },

package/src/controls/slider/template.js

@@ -13,8 +13,8 @@ const DEFAULT_MAX = 100
 const DEFAULT_STEP = 1
 
 /**
- * Slider control based on native range input.
- *
+ * Renders a range slider with optional label and current value display.
+ * Supports min/max/step, color, disabled state, and full-width layout.
  * @param {SliderProps} props
  * @returns {TemplateResult}
  */

package/src/controls/switch/index.js

@@ -1,3 +1,3 @@
 import * as renderers from "./template.js"
 
-export const switchControl = { ...renderers }
+export const Switch = { ...renderers }

package/src/controls/switch/switch.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { switchControl } from "."
+import { Switch } from "."
 
 export default {
   title: "Controls/Switch",
   tags: ["autodocs"],
-  render: createRender(switchControl),
+  render: createRender(Switch),
   argTypes: {
     label: { control: "text", description: "Label text." },
     name: { control: "text", description: "Native input name." },

package/src/controls/switch/template.js

@@ -8,8 +8,8 @@ import { classMap, html, ref } from "@inglorious/web"
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
- * Switch control implemented with a checkbox input.
- *
+ * Renders a toggle switch backed by a checkbox input.
+ * Use it for boolean settings with optional labels and disabled state.
  * @param {SwitchProps} props
  * @returns {TemplateResult}
  */

package/src/data-display/avatar/avatar.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { avatar } from "."
+import { Avatar } from "."
 
 export default {
   title: "Data Display/Avatar",
   tags: ["autodocs"],
-  render: createRender(avatar),
+  render: createRender(Avatar),
   argTypes: {
     src: {
       control: "text",

package/src/data-display/avatar/index.js

@@ -1,3 +1,3 @@
 import * as renderers from "./template.js"
 
-export const avatar = { ...renderers }
+export const Avatar = { ...renderers }