@inglorious/ui 1.0.1 → 2.0.0

package/src/navigation/menu/template.js

@@ -8,12 +8,24 @@ import { classMap, html, ref } from "@inglorious/web"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
-export const menu = {
+export const Menu = {
   /**
+   * Main entrypoint for a menu list. Delegates to the base renderer for overrides.
+   * Menus render selectable items and optional dividers.
    * @param {MenuProps} props
    * @returns {TemplateResult | null}
    */
   render(props) {
+    return this.renderMenu(props)
+  },
+
+  /**
+   * Renders the menu container and iterates items when open.
+   * Each item is delegated to `renderItem`.
+   * @param {MenuProps} props
+   * @returns {TemplateResult | null}
+   */
+  renderMenu(props) {
     const {
       type, // eslint-disable-line no-unused-vars
       isOpen = false,
@@ -46,6 +58,8 @@ export const menu = {
   },
 
   /**
+   * Renders a single menu item or divider.
+   * Handles selection, disabled state, and click callbacks.
    * @param {MenuItem} item
    * @param {number} index
    * @param {MenuProps} props

package/src/navigation/pagination/index.js

@@ -1 +1 @@
-export { pagination } from "./template.js"
+export { Pagination } from "./template.js"

package/src/navigation/pagination/pagination.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { pagination } from "."
+import { Pagination } from "."
 
 export default {
   title: "Navigation/Pagination",
   tags: ["autodocs"],
-  render: createRender(pagination),
+  render: createRender(Pagination),
   argTypes: {
     page: { control: "number", description: "Current page (1-based)." },
     count: { control: "number", description: "Total number of pages." },

package/src/navigation/pagination/template.js

@@ -7,16 +7,28 @@
 
 import { classMap, html } from "@inglorious/web"
 
-import { button } from "../../controls/button/index.js"
+import { Button } from "../../controls/button/index.js"
 
 const PRETTY_PAGE = 1
 
-export const pagination = {
+export const Pagination = {
   /**
+   * Main entrypoint for pagination controls. Delegates to the base renderer for overrides.
+   * Supports sibling ranges, first/last buttons, and disabled state.
    * @param {PaginationProps} props
    * @returns {TemplateResult}
    */
   render(props) {
+    return this.renderPagination(props)
+  },
+
+  /**
+   * Renders the pagination container and page/control items.
+   * Items are delegated to `renderItem` and `renderControl`.
+   * @param {PaginationProps} props
+   * @returns {TemplateResult}
+   */
+  renderPagination(props) {
     const {
       page = 1,
       count = 1,
@@ -68,6 +80,8 @@ export const pagination = {
   },
 
   /**
+   * Renders a single page number item or ellipsis.
+   * Uses the button primitive for interactive pages.
    * @param {PaginationProps} props
    * @param {PaginationItemRenderProps} payload
    * @returns {TemplateResult}
@@ -78,7 +92,7 @@ export const pagination = {
     }
 
     const isCurrent = item === props.page
-    return button.render({
+    return Button.render({
       variant: isCurrent ? "default" : props.buttonVariant,
       color: isCurrent ? "primary" : props.buttonColor,
       size: props.buttonSize,
@@ -97,6 +111,8 @@ export const pagination = {
   },
 
   /**
+   * Renders a navigation control (first/prev/next/last).
+   * Uses the button primitive and wires change events.
    * @param {PaginationProps} props
    * @param {PaginationControlRenderProps} payload
    * @returns {TemplateResult}
@@ -105,7 +121,7 @@ export const pagination = {
     props,
     { label, target, isDisabled = false, onChange = props.onChange },
   ) {
-    return button.render({
+    return Button.render({
       variant: props.buttonVariant,
       color: props.buttonColor,
       size: props.buttonSize,

package/src/navigation/speed-dial/index.js

@@ -1 +1 @@
-export { speedDial } from "./template.js"
+export { SpeedDial } from "./template.js"

package/src/navigation/speed-dial/speed-dial.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { speedDial } from "."
+import { SpeedDial } from "."
 
 export default {
   title: "Navigation/Speed Dial",
   tags: ["autodocs"],
-  render: createRender(speedDial),
+  render: createRender(SpeedDial),
   argTypes: {
     isOpen: {
       control: "boolean",

package/src/navigation/speed-dial/template.js

@@ -6,12 +6,24 @@
 
 import { classMap, html } from "@inglorious/web"
 
-export const speedDial = {
+export const SpeedDial = {
   /**
+   * Main entrypoint for the speed dial. Delegates to the base renderer for overrides.
+   * Shows a trigger button and an expandable list of actions.
    * @param {SpeedDialProps} props
    * @returns {TemplateResult}
    */
   render(props) {
+    return this.renderSpeedDial(props)
+  },
+
+  /**
+   * Renders the speed dial container, trigger, and optional actions list.
+   * Actions are delegated to `renderAction`.
+   * @param {SpeedDialProps} props
+   * @returns {TemplateResult}
+   */
+  renderSpeedDial(props) {
     const {
       isOpen = false,
       direction = "up",
@@ -46,6 +58,8 @@ export const speedDial = {
   },
 
   /**
+   * Renders a single speed dial action button.
+   * Handles click callbacks and disabled state.
    * @param {SpeedDialAction} action
    * @param {number} index
    * @param {SpeedDialProps} props

package/src/navigation/stepper/index.js

@@ -1 +1 @@
-export { stepper } from "./template.js"
+export { Stepper } from "./template.js"

package/src/navigation/stepper/stepper.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { stepper } from "."
+import { Stepper } from "."
 
 export default {
   title: "Navigation/Stepper",
   tags: ["autodocs"],
-  render: createRender(stepper),
+  render: createRender(Stepper),
   argTypes: {
     steps: { control: "object", description: "Ordered step definitions." },
     activeStep: {

package/src/navigation/stepper/template.js

@@ -6,12 +6,24 @@
 
 import { classMap, html } from "@inglorious/web"
 
-export const stepper = {
+export const Stepper = {
   /**
+   * Main entrypoint for the stepper component. Delegates to the base renderer for overrides.
+   * Steppers render a sequence of steps with completion states.
    * @param {StepperProps} props
    * @returns {TemplateResult}
    */
   render(props) {
+    return this.renderStepper(props)
+  },
+
+  /**
+   * Renders the ordered list of steps with orientation styling.
+   * Each step is delegated to `renderStep`.
+   * @param {StepperProps} props
+   * @returns {TemplateResult}
+   */
+  renderStepper(props) {
     const {
       steps = [],
       activeStep = 0,
@@ -33,6 +45,8 @@ export const stepper = {
   },
 
   /**
+   * Renders a single step with label, optional text, and completion state.
+   * Calculates active/completed styling based on the current step.
    * @param {Step} step
    * @param {number} index
    * @param {StepperProps} props

package/src/navigation/tabs/index.js

@@ -1 +1 @@
-export { tabs } from "./template.js"
+export { Tabs } from "./template.js"

package/src/navigation/tabs/tabs.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { tabs } from "."
+import { Tabs } from "."
 
 export default {
   title: "Navigation/Tabs",
   tags: ["autodocs"],
-  render: createRender(tabs),
+  render: createRender(Tabs),
   argTypes: {
     items: {
       control: "object",

package/src/navigation/tabs/template.js

@@ -6,12 +6,24 @@
 
 import { classMap, html } from "@inglorious/web"
 
-export const tabs = {
+export const Tabs = {
   /**
+   * Main entrypoint for tabbed navigation. Delegates to the base renderer for overrides.
+   * Renders tab labels and the active panel.
    * @param {TabsProps} props
    * @returns {TemplateResult}
    */
   render(props) {
+    return this.renderTabs(props)
+  },
+
+  /**
+   * Renders the tabs list and the active panel container.
+   * Individual tabs are delegated to `renderTab`.
+   * @param {TabsProps} props
+   * @returns {TemplateResult}
+   */
+  renderTabs(props) {
     const {
       items = [],
       value = items[0]?.value ?? 0,
@@ -40,6 +52,8 @@ export const tabs = {
   },
 
   /**
+   * Renders a single tab button with selected/disabled states.
+   * Wires click events to update the active tab.
    * @param {TabItem} item
    * @param {number} index
    * @param {TabsProps} props
@@ -69,6 +83,8 @@ export const tabs = {
   },
 
   /**
+   * Renders the active tab panel content.
+   * Returns `null` when the active item has no panel.
    * @param {TabItem | null} item
    * @returns {TemplateResult | null}
    */

package/src/surfaces/accordion/accordion.stories.js

@@ -1,12 +1,12 @@
 import { html } from "@inglorious/web"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { accordion } from "."
+import { Accordion } from "."
 
 export default {
   title: "Surfaces/Accordion",
   tags: ["autodocs"],
-  render: createRender(accordion),
+  render: createRender(Accordion),
   argTypes: {
     items: {
       control: "object",

package/src/surfaces/accordion/index.js

@@ -1 +1 @@
-export { accordion } from "./template.js"
+export { Accordion } from "./template.js"

package/src/surfaces/accordion/template.js

@@ -8,12 +8,24 @@ import { classMap, html, ref } from "@inglorious/web"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
-export const accordion = {
+export const Accordion = {
   /**
+   * Main entrypoint for the accordion component. Delegates to the base accordion renderer for overrides.
+   * Accordions render a list of collapsible items with optional icons.
    * @param {AccordionProps} props
    * @returns {TemplateResult}
    */
   render(props) {
+    return this.renderAccordion(props)
+  },
+
+  /**
+   * Renders the accordion container and iterates items.
+   * Each item is delegated to `renderItem`.
+   * @param {AccordionProps} props
+   * @returns {TemplateResult}
+   */
+  renderAccordion(props) {
     const {
       type, // eslint-disable-line no-unused-vars
       items = [],
@@ -40,6 +52,8 @@ export const accordion = {
   },
 
   /**
+   * Renders a single accordion item with trigger and panel content.
+   * Handles expand/collapse behavior and item-level callbacks.
    * @param {AccordionItem} item
    * @param {number} index
    * @param {AccordionProps} props

package/src/surfaces/app-bar/app-bar.stories.js

@@ -1,12 +1,12 @@
 import { html } from "@inglorious/web"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { appBar } from "."
+import { AppBar } from "."
 
 export default {
   title: "Surfaces/App Bar",
   tags: ["autodocs"],
-  render: createRender(appBar),
+  render: createRender(AppBar),
   argTypes: {
     title: {
       control: "text",

package/src/surfaces/app-bar/index.js

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

package/src/surfaces/app-bar/template.js

@@ -8,6 +8,8 @@ import { classMap, html, ref, when } from "@inglorious/web"
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
+ * Renders a top app bar with optional leading/trailing content and title metadata.
+ * Supports variants, density, color, and positioning modes.
  * @param {AppBarProps} props
  * @returns {TemplateResult}
  */

package/src/surfaces/card/card.stories.js

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

package/src/surfaces/card/index.js

@@ -1 +1 @@
-export { card } from "./template.js"
+export { Card } from "./template.js"

package/src/surfaces/card/template.js

@@ -7,12 +7,24 @@ import { classMap, html, ref } from "@inglorious/web"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
-export const card = {
+export const Card = {
   /**
+   * Main entrypoint for the card component. Delegates to the base card renderer for easy overrides.
+   * Cards support header, body, and footer slots with optional click behavior.
    * @param {CardProps} props
    * @returns {TemplateResult}
    */
   render(props) {
+    return this.renderCard(props)
+  },
+
+  /**
+   * Renders the card container and composes header, body, and footer sub-sections.
+   * Uses `element` to control the semantic tag.
+   * @param {CardProps} props
+   * @returns {TemplateResult}
+   */
+  renderCard(props) {
     const {
       type, // eslint-disable-line no-unused-vars
       element = "article",
@@ -52,6 +64,8 @@ export const card = {
   },
 
   /**
+   * Renders the optional card header area (title, subtitle, or custom header content).
+   * Returns `null` when no header content is provided.
    * @param {CardProps} props
    * @returns {TemplateResult | null}
    */
@@ -83,6 +97,8 @@ export const card = {
   },
 
   /**
+   * Renders the main card content area.
+   * Returns `null` when there is no body or children content.
    * @param {CardProps} props
    * @returns {TemplateResult | null}
    */
@@ -103,6 +119,8 @@ export const card = {
   },
 
   /**
+   * Renders the optional card footer area, typically for actions.
+   * Returns `null` when no footer content is provided.
    * @param {CardProps} props
    * @returns {TemplateResult | null}
    */

package/src/surfaces/paper/index.js

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

package/src/surfaces/paper/paper.stories.js

@@ -1,12 +1,12 @@
 import { html } from "@inglorious/web"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { paper } from "."
+import { Paper } from "."
 
 export default {
   title: "Surfaces/Paper",
   tags: ["autodocs"],
-  render: createRender(paper),
+  render: createRender(Paper),
   argTypes: {
     variant: {
       control: "select",
@@ -85,7 +85,7 @@ export const AllElevations = {
       ${[0, 1, 2, 3, 4].map(
         (level) =>
           html`<div>
-            ${paper.render({
+            ${Paper.render({
               variant: "elevated",
               elevation: level,
               padding: "md",

package/src/surfaces/paper/template.js

@@ -8,6 +8,8 @@ import { classMap, html, ref } from "@inglorious/web"
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
+ * Renders a surface container with elevation, radius, and padding options.
+ * Use it as a generic surface for grouping content.
  * @param {PaperProps} props
  * @returns {TemplateResult}
  */

package/types/controls/button-group.d.ts

@@ -33,4 +33,4 @@ export interface ButtonGroupType {
   render(props: ButtonGroupProps): TemplateResult
 }
 
-export declare const buttonGroup: ButtonGroupType
+export declare const ButtonGroup: ButtonGroupType

package/types/controls/button.d.ts

@@ -2,7 +2,7 @@ import type { TemplateResult } from "@inglorious/web"
 
 export interface ButtonProps {
   id?: string
-  type: "button"
+  type: "Button"
   children?: TemplateResult | string | number
   variant?: "default" | "outline" | "ghost"
   color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
@@ -23,4 +23,4 @@ export interface ButtonType {
   render(props: ButtonProps): TemplateResult
 }
 
-export declare const button: ButtonType
+export declare const Button: ButtonType

package/types/controls/checkbox.d.ts

@@ -17,4 +17,4 @@ export interface CheckboxType {
   render(props: CheckboxProps): TemplateResult
 }
 
-export declare const checkbox: CheckboxType
+export declare const Checkbox: CheckboxType

package/types/controls/combobox.d.ts

@@ -51,6 +51,7 @@ export interface ComboboxProps {
 export interface ComboboxType {
   create(entity: ComboboxProps): void
   render(entity: ComboboxProps, api: Api): TemplateResult
+  renderCombobox(props: ComboboxProps): TemplateResult
   open(entity: ComboboxProps): void
   close(entity: ComboboxProps): void
   toggle(entity: ComboboxProps): void
@@ -63,4 +64,4 @@ export interface ComboboxType {
   focusLast(entity: ComboboxProps): void
 }
 
-export declare const combobox: ComboboxType
+export declare const Combobox: ComboboxType

package/types/controls/fab.d.ts

@@ -17,4 +17,4 @@ export interface FabType {
   render(props: FabProps): TemplateResult
 }
 
-export declare const fab: FabType
+export declare const Fab: FabType

package/types/controls/icon-button.d.ts

@@ -21,4 +21,4 @@ export interface IconButtonType {
   render(props: IconButtonProps): TemplateResult
 }
 
-export declare const iconButton: IconButtonType
+export declare const IconButton: IconButtonType

package/types/controls/input.d.ts

@@ -33,4 +33,4 @@ export interface InputType {
   render(props: InputProps): TemplateResult
 }
 
-export declare const input: InputType
+export declare const Input: InputType

package/types/controls/radio-group.d.ts

@@ -24,4 +24,4 @@ export interface RadioGroupType {
   render(props: RadioGroupProps): TemplateResult
 }
 
-export declare const radioGroup: RadioGroupType
+export declare const RadioGroup: RadioGroupType

package/types/controls/rating.d.ts

@@ -16,4 +16,4 @@ export interface RatingType {
   render(props: RatingProps): TemplateResult
 }
 
-export declare const rating: RatingType
+export declare const Rating: RatingType

package/types/controls/select.d.ts

@@ -30,4 +30,4 @@ export interface SelectType {
   render(props: SelectProps): TemplateResult
 }
 
-export declare const select: SelectType
+export declare const Select: SelectType

package/types/controls/slider.d.ts

@@ -20,4 +20,4 @@ export interface SliderType {
   render(props: SliderProps): TemplateResult
 }
 
-export declare const slider: SliderType
+export declare const Slider: SliderType

package/types/controls/switch.d.ts

@@ -16,4 +16,4 @@ export interface SwitchType {
   render(props: SwitchProps): TemplateResult
 }
 
-export declare const switchControl: SwitchType
+export declare const Switch: SwitchType

package/types/data-display/avatar.d.ts

@@ -27,4 +27,4 @@ export interface AvatarType {
   render(props: AvatarProps): TemplateResult
 }
 
-export declare const avatar: AvatarType
+export declare const Avatar: AvatarType

package/types/data-display/badge.d.ts

@@ -17,4 +17,4 @@ export interface BadgeType {
   render(props: BadgeProps): TemplateResult
 }
 
-export declare const badge: BadgeType
+export declare const Badge: BadgeType

package/types/data-display/chip.d.ts

@@ -22,4 +22,4 @@ export interface ChipType {
   render(props: ChipProps): TemplateResult
 }
 
-export declare const chip: ChipType
+export declare const Chip: ChipType

package/types/data-display/data-grid.d.ts

@@ -122,9 +122,10 @@ export interface DataGridType {
   rowsToggleAll(entity: DataGridProps): void
   rowsSelectAll(entity: DataGridProps): void
   selectionClear(entity: DataGridProps): void
-  virtualScroll(entity: DataGridProps, containerEl: HTMLElement): void
   virtualMount(entity: DataGridProps, containerEl: HTMLElement): void
+  virtualScroll(entity: DataGridProps, containerEl: HTMLElement): void
   render(entity: DataGridProps, api: Api): TemplateResult
+  renderDataGrid(entity: DataGridProps, api: Api): TemplateResult
   renderHeader(entity: DataGridProps, api: Api): TemplateResult
   renderToolbar(entity: DataGridProps, api: Api): TemplateResult
   renderHeaderColumn(

package/types/data-display/divider.d.ts

@@ -11,4 +11,4 @@ export interface DividerType {
   render(props: DividerProps): TemplateResult
 }
 
-export declare const divider: DividerType
+export declare const Divider: DividerType

package/types/data-display/icon.d.ts

@@ -13,4 +13,4 @@ export interface IconType {
   render(props: IconProps): TemplateResult
 }
 
-export declare const icon: IconType
+export declare const Icon: IconType

package/types/data-display/list.d.ts

@@ -39,6 +39,7 @@ export interface ListProps {
 
 export interface ListType {
   render(props: ListProps): TemplateResult
+  renderList(props: ListProps): TemplateResult
   renderItem(
     props: ListProps,
     payload: {
@@ -63,4 +64,4 @@ export interface ListType {
   ): TemplateResult
 }
 
-export declare const list: ListType
+export declare const List: ListType