@inglorious/ui 1.0.1 → 2.0.0

package/src/feedback/dialog/dialog.stories.js

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

package/src/feedback/dialog/index.js

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

package/src/feedback/dialog/template.js

@@ -6,6 +6,8 @@
 import { classMap, html } from "@inglorious/web"
 
 /**
+ * Renders a modal dialog with header, body, and actions when open.
+ * Clicking the backdrop can close the dialog when handlers are provided.
  * @param {DialogProps} props
  * @returns {TemplateResult | null}
  */

package/src/feedback/progress/index.js

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

package/src/feedback/progress/progress.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { progress } from "."
+import { Progress } from "."
 
 export default {
   title: "Feedback/Progress",
   tags: ["autodocs"],
-  render: createRender(progress),
+  render: createRender(Progress),
   argTypes: {
     variant: { control: "select", options: ["linear", "circular"] },
     value: { control: "number" },

package/src/feedback/progress/template.js

@@ -10,6 +10,8 @@ function clamp(value) {
 }
 
 /**
+ * Renders a linear or circular progress indicator.
+ * Indeterminate mode is used when no explicit value is provided.
  * @param {ProgressProps} props
  * @returns {TemplateResult}
  */
@@ -41,7 +43,7 @@ export function render(props) {
       class=${classMap({
         "iw-progress": true,
         "iw-progress-circular": true,
-        "iw-progress-${color}": true,
+        [`iw-progress-${color}`]: true,
         "iw-progress-indeterminate": progress == null,
         ...extraClasses,
       })}

package/src/feedback/skeleton/index.js

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

package/src/feedback/skeleton/skeleton.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { skeleton } from "."
+import { Skeleton } from "."
 
 export default {
   title: "Feedback/Skeleton",
   tags: ["autodocs"],
-  render: createRender(skeleton),
+  render: createRender(Skeleton),
   argTypes: {
     variant: { control: "select", options: ["text", "rect", "circle"] },
     width: { control: "text" },

package/src/feedback/skeleton/template.js

@@ -6,6 +6,8 @@
 import { classMap, html } from "@inglorious/web"
 
 /**
+ * Renders a loading skeleton placeholder for text, blocks, or multiple lines.
+ * Use it to indicate content is loading without layout shifts.
  * @param {SkeletonProps} props
  * @returns {TemplateResult}
  */

package/src/feedback/snackbar/index.js

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

package/src/feedback/snackbar/snackbar.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { snackbar } from "."
+import { Snackbar } from "."
 
 export default {
   title: "Feedback/Snackbar",
   tags: ["autodocs"],
-  render: createRender(snackbar),
+  render: createRender(Snackbar),
   argTypes: {
     isOpen: { control: "boolean" },
     message: { control: "text" },

package/src/feedback/snackbar/template.js

@@ -6,6 +6,8 @@
 import { classMap, html } from "@inglorious/web"
 
 /**
+ * Renders a transient snackbar message with optional action and dismiss control.
+ * Position is configurable (for example bottom-left or top-right).
  * @param {SnackbarProps} props
  * @returns {TemplateResult | null}
  */

package/src/index.js

@@ -1,45 +1,45 @@
-export { button } from "./controls/button/index.js"
-export { buttonGroup } from "./controls/button-group/index.js"
-export { checkbox } from "./controls/checkbox/index.js"
-export { fab } from "./controls/fab/index.js"
-export { iconButton } from "./controls/icon-button/index.js"
-export { input } from "./controls/input/index.js"
-export { radioGroup } from "./controls/radio-group/index.js"
-export { rating } from "./controls/rating/index.js"
-export { select } from "./controls/select/index.js"
-export { slider } from "./controls/slider/index.js"
-export { switchControl } from "./controls/switch/index.js"
-export { avatar } from "./data-display/avatar/index.js"
-export { badge } from "./data-display/badge/index.js"
-export { chip } from "./data-display/chip/index.js"
-export { dataGrid } from "./data-display/data-grid/index.js"
-export { divider } from "./data-display/divider/index.js"
-export { icon } from "./data-display/icon/index.js"
-export { list } from "./data-display/list/index.js"
-export { materialIcon } from "./data-display/material-icon/index.js"
-export { table } from "./data-display/table/index.js"
-export { tooltip } from "./data-display/tooltip/index.js"
-export { typography } from "./data-display/typography/index.js"
-export { virtualList } from "./data-display/virtual-list/index.js"
-export { alert } from "./feedback/alert/index.js"
-export { backdrop } from "./feedback/backdrop/index.js"
-export { dialog } from "./feedback/dialog/index.js"
-export { progress } from "./feedback/progress/index.js"
-export { skeleton } from "./feedback/skeleton/index.js"
-export { snackbar } from "./feedback/snackbar/index.js"
-export { container } from "./layout/container/index.js"
-export { flex } from "./layout/flex/index.js"
-export { grid } from "./layout/grid/index.js"
-export { bottomNavigation } from "./navigation/bottom-navigation/index.js"
-export { breadcrumbs } from "./navigation/breadcrumbs/index.js"
-export { drawer } from "./navigation/drawer/index.js"
-export { link } from "./navigation/link/index.js"
-export { menu } from "./navigation/menu/index.js"
-export { pagination } from "./navigation/pagination/index.js"
-export { speedDial } from "./navigation/speed-dial/index.js"
-export { stepper } from "./navigation/stepper/index.js"
-export { tabs } from "./navigation/tabs/index.js"
-export { accordion } from "./surfaces/accordion/index.js"
-export { appBar } from "./surfaces/app-bar/index.js"
-export { card } from "./surfaces/card/index.js"
-export { paper } from "./surfaces/paper/index.js"
+export { Button } from "./controls/button/index.js"
+export { ButtonGroup } from "./controls/button-group/index.js"
+export { Checkbox } from "./controls/checkbox/index.js"
+export { Fab } from "./controls/fab/index.js"
+export { IconButton } from "./controls/icon-button/index.js"
+export { Input } from "./controls/input/index.js"
+export { RadioGroup } from "./controls/radio-group/index.js"
+export { Rating } from "./controls/rating/index.js"
+export { Select } from "./controls/select/index.js"
+export { Slider } from "./controls/slider/index.js"
+export { Switch } from "./controls/switch/index.js"
+export { Avatar } from "./data-display/avatar/index.js"
+export { Badge } from "./data-display/badge/index.js"
+export { Chip } from "./data-display/chip/index.js"
+export { DataGrid } from "./data-display/data-grid/index.js"
+export { Divider } from "./data-display/divider/index.js"
+export { Icon } from "./data-display/icon/index.js"
+export { List } from "./data-display/list/index.js"
+export { MaterialIcon } from "./data-display/material-icon/index.js"
+export { Table } from "./data-display/table/index.js"
+export { Tooltip } from "./data-display/tooltip/index.js"
+export { Typography } from "./data-display/typography/index.js"
+export { VirtualList } from "./data-display/virtual-list/index.js"
+export { Alert } from "./feedback/alert/index.js"
+export { Backdrop } from "./feedback/backdrop/index.js"
+export { Dialog } from "./feedback/dialog/index.js"
+export { Progress } from "./feedback/progress/index.js"
+export { Skeleton } from "./feedback/skeleton/index.js"
+export { Snackbar } from "./feedback/snackbar/index.js"
+export { Container } from "./layout/container/index.js"
+export { Flex } from "./layout/flex/index.js"
+export { Grid } from "./layout/grid/index.js"
+export { BottomNavigation } from "./navigation/bottom-navigation/index.js"
+export { Breadcrumbs } from "./navigation/breadcrumbs/index.js"
+export { Drawer } from "./navigation/drawer/index.js"
+export { Link } from "./navigation/link/index.js"
+export { Menu } from "./navigation/menu/index.js"
+export { Pagination } from "./navigation/pagination/index.js"
+export { SpeedDial } from "./navigation/speed-dial/index.js"
+export { Stepper } from "./navigation/stepper/index.js"
+export { Tabs } from "./navigation/tabs/index.js"
+export { Accordion } from "./surfaces/accordion/index.js"
+export { AppBar } from "./surfaces/app-bar/index.js"
+export { Card } from "./surfaces/card/index.js"
+export { Paper } from "./surfaces/paper/index.js"

package/src/layout/container/container.stories.js

@@ -1,12 +1,12 @@
 import { html } from "@inglorious/web"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { container } from "."
+import { Container } from "."
 
 export default {
   title: "Layout/Container",
   tags: ["autodocs"],
-  render: createRender(container),
+  render: createRender(Container),
   argTypes: {
     maxWidth: {
       control: "text",
@@ -79,7 +79,7 @@ export const WidthPresets = {
             >
               ${size}
             </div>
-            ${container.render({
+            ${Container.render({
               maxWidth: size,
               children: html`<div
                 style="padding: 0.5rem 0.75rem; border: 1px solid var(--iw-color-border);"

package/src/layout/container/index.js

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

package/src/layout/container/template.js

@@ -16,6 +16,8 @@ const SIZE_TO_MAX_WIDTH = {
 }
 
 /**
+ * Renders a responsive layout container with optional max width and padding.
+ * Use it to constrain page content while keeping semantic HTML tags.
  * @param {ContainerProps} props
  * @returns {TemplateResult}
  */

package/src/layout/flex/flex.stories.js

@@ -1,12 +1,12 @@
 import { html } from "@inglorious/web"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { flex } from "."
+import { Flex } from "."
 
 export default {
   title: "Layout/Flex",
   tags: ["autodocs"],
-  render: createRender(flex),
+  render: createRender(Flex),
   argTypes: {
     direction: {
       control: "select",

package/src/layout/flex/index.js

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

package/src/layout/flex/template.js

@@ -8,9 +8,8 @@ import { classMap, ref, staticHtml, unsafeStatic } from "@inglorious/web"
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
- * Flex layout component for Inglorious Web.
- * Children are rendered as-is (templates/content composition).
- *
+ * Renders a flexible layout container with direction, alignment, spacing, and wrap control.
+ * Use it to compose layouts without writing custom flexbox CSS.
  * @param {FlexProps} props
  * @returns {TemplateResult}
  */

package/src/layout/grid/grid.stories.js

@@ -1,12 +1,12 @@
 import { html } from "@inglorious/web"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { grid } from "."
+import { Grid } from "."
 
 export default {
   title: "Layout/Grid",
   tags: ["autodocs"],
-  render: createRender(grid),
+  render: createRender(Grid),
   argTypes: {
     columns: {
       control: "number",

package/src/layout/grid/index.js

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

package/src/layout/grid/template.js

@@ -6,9 +6,8 @@
 import { classMap, html, styleMap } from "@inglorious/web"
 
 /**
- * Grid layout component for Inglorious Web.
- * Children are rendered as-is (templates/content composition).
- *
+ * Renders a CSS grid container with configurable columns, gaps, and alignment.
+ * Supports fixed column counts or auto-fit with a minimum column width.
  * @param {GridProps} props
  * @returns {TemplateResult}
  */

package/src/navigation/bottom-navigation/bottom-navigation.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { bottomNavigation } from "."
+import { BottomNavigation } from "."
 
 export default {
   title: "Navigation/Bottom Navigation",
   tags: ["autodocs"],
-  render: createRender(bottomNavigation),
+  render: createRender(BottomNavigation),
   argTypes: {
     actions: { control: "object", description: "Bottom navigation actions." },
     value: { control: "text", description: "Currently selected action value." },

package/src/navigation/bottom-navigation/index.js

@@ -1 +1 @@
-export { bottomNavigation } from "./template.js"
+export { BottomNavigation } from "./template.js"

package/src/navigation/bottom-navigation/template.js

@@ -8,12 +8,24 @@ import { classMap, html, ref } from "@inglorious/web"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
-export const bottomNavigation = {
+export const BottomNavigation = {
   /**
+   * Main entrypoint for bottom navigation. Delegates to the base renderer for overrides.
+   * Renders a row of actions with optional labels.
    * @param {BottomNavigationProps} props
    * @returns {TemplateResult}
    */
   render(props) {
+    return this.renderBottomNavigation(props)
+  },
+
+  /**
+   * Renders the navigation container and iterates actions.
+   * Each action is delegated to `renderAction`.
+   * @param {BottomNavigationProps} props
+   * @returns {TemplateResult}
+   */
+  renderBottomNavigation(props) {
     const {
       type, // eslint-disable-line no-unused-vars
       actions = [],
@@ -41,6 +53,8 @@ export const bottomNavigation = {
   },
 
   /**
+   * Renders a single bottom navigation action.
+   * Handles selection state and click callbacks.
    * @param {BottomNavigationAction} action
    * @param {number} index
    * @param {BottomNavigationProps} props
@@ -56,7 +70,7 @@ export const bottomNavigation = {
         "iw-bottom-navigation-action": true,
         "iw-bottom-navigation-action-selected": selected,
       })}
-      aria-current=${selected ? "page" : null}
+      aria-current=${selected ? "page" : "false"}
       ?disabled=${action.isDisabled}
       @click=${() => {
         action.onClick?.(currentValue)

package/src/navigation/breadcrumbs/breadcrumbs.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { breadcrumbs } from "."
+import { Breadcrumbs } from "."
 
 export default {
   title: "Navigation/Breadcrumbs",
   tags: ["autodocs"],
-  render: createRender(breadcrumbs),
+  render: createRender(Breadcrumbs),
   argTypes: {
     items: { control: "object", description: "Ordered breadcrumb path items." },
     separator: {

package/src/navigation/breadcrumbs/index.js

@@ -1 +1 @@
-export { breadcrumbs } from "./template.js"
+export { Breadcrumbs } from "./template.js"

package/src/navigation/breadcrumbs/template.js

@@ -8,12 +8,24 @@ import { classMap, html, ref } from "@inglorious/web"
 
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
-export const breadcrumbs = {
+export const Breadcrumbs = {
   /**
+   * Main entrypoint for breadcrumbs navigation. Delegates to the base renderer for overrides.
+   * Renders a list of path items separated by a configurable separator.
    * @param {BreadcrumbsProps} props
    * @returns {TemplateResult}
    */
   render(props) {
+    return this.renderBreadcrumbs(props)
+  },
+
+  /**
+   * Renders the breadcrumb container and iterates items.
+   * Each item is delegated to `renderItem`.
+   * @param {BreadcrumbsProps} props
+   * @returns {TemplateResult}
+   */
+  renderBreadcrumbs(props) {
     const {
       type, // eslint-disable-line no-unused-vars
       items = [],
@@ -49,6 +61,8 @@ export const breadcrumbs = {
   },
 
   /**
+   * Renders a single breadcrumb item, handling current vs. link states.
+   * Override to customize labels or link behavior.
    * @param {BreadcrumbItem} item
    * @param {number} index
    * @param {BreadcrumbsProps} props
@@ -70,7 +84,7 @@ export const breadcrumbs = {
             class=${classMap({
               "iw-breadcrumbs-current": isLast,
             })}
-            aria-current=${isLast ? "page" : null}
+            aria-current=${isLast ? "page" : "false"}
           >
             ${item.label}
           </span>`}

package/src/navigation/drawer/drawer.stories.js

@@ -1,12 +1,12 @@
 import { html } from "@inglorious/web"
 
 import { createRender } from "../../stories/notifyStory.js"
-import { drawer } from "."
+import { Drawer } from "."
 
 export default {
   title: "Navigation/Drawer",
   tags: ["autodocs"],
-  render: createRender(drawer),
+  render: createRender(Drawer),
   argTypes: {
     isOpen: {
       control: "boolean",

package/src/navigation/drawer/index.js

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

package/src/navigation/drawer/template.js

@@ -5,12 +5,14 @@
 
 import { html, when } from "@inglorious/web"
 
-import { button } from "../../controls/button"
-import { materialIcon } from "../../data-display/material-icon"
-import { backdrop } from "../../feedback/backdrop"
-import { flex } from "../../layout/flex"
+import { Button } from "../../controls/button"
+import { MaterialIcon } from "../../data-display/material-icon"
+import { Backdrop } from "../../feedback/backdrop"
+import { Flex } from "../../layout/flex"
 
 /**
+ * Renders a side drawer panel with optional header, body, and collapse controls.
+ * Can show a backdrop when open and supports left/right anchoring.
  * @param {DrawerProps} props
  * @returns {TemplateResult}
  */
@@ -50,7 +52,7 @@ export function render(props) {
     .join(" ")
 
   return html`
-    ${flex.render({
+    ${Flex.render({
       element: "aside",
       direction: "column",
       className: drawerClassName,
@@ -58,7 +60,7 @@ export function render(props) {
         when(
           title || onClose,
           () => html`
-            ${flex.render({
+            ${Flex.render({
               align: "center",
               justify: "between",
               gap: "sm",
@@ -69,14 +71,14 @@ export function render(props) {
                   () => html`<div class="iw-drawer-title">${title}</div>`,
                 ),
                 when(onClose, () =>
-                  button.render({
+                  Button.render({
                     color: "secondary",
                     variant: "ghost",
                     shape: "square",
                     className: "iw-drawer-close",
                     "aria-label": "Close",
                     onClick: onClose,
-                    children: materialIcon.render({
+                    children: MaterialIcon.render({
                       name: "close",
                       size: "lg",
                     }),
@@ -87,7 +89,7 @@ export function render(props) {
           `,
         ),
 
-        flex.render({
+        Flex.render({
           direction: "column",
           className: "iw-drawer-body",
           children,
@@ -96,11 +98,11 @@ export function render(props) {
         when(
           onCollapseToggle,
           () => html`
-            ${flex.render({
+            ${Flex.render({
               justify: "end",
               padding: "sm",
               className: "iw-drawer-footer",
-              children: button.render({
+              children: Button.render({
                 color: "secondary",
                 variant: "ghost",
                 shape: "square",
@@ -109,7 +111,7 @@ export function render(props) {
                   ? "Expand sidebar"
                   : "Collapse sidebar",
                 onClick: onCollapseToggle,
-                children: materialIcon.render({
+                children: MaterialIcon.render({
                   name: "left_panel_close",
                   size: "lg",
                 }),
@@ -121,7 +123,7 @@ export function render(props) {
       ...rest,
     })}
     ${when(isOpen && hasBackdrop, () =>
-      backdrop.render({
+      Backdrop.render({
         isOpen: true,
         className: "iw-drawer-backdrop",
         onClick: onClose,

package/src/navigation/link/index.js

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

package/src/navigation/link/link.stories.js

@@ -1,10 +1,10 @@
 import { createRender } from "../../stories/notifyStory.js"
-import { link } from "."
+import { Link } from "."
 
 export default {
   title: "Navigation/Link",
   tags: ["autodocs"],
-  render: createRender(link),
+  render: createRender(Link),
   argTypes: {
     href: { control: "text", description: "Destination URL." },
     label: { control: "text", description: "Fallback text content." },

package/src/navigation/link/template.js

@@ -8,6 +8,8 @@ import { classMap, html, ref } from "@inglorious/web"
 import { applyElementProps } from "../../shared/applyElementProps.js"
 
 /**
+ * Renders a styled link element with optional underline and color variants.
+ * Supports external link behavior and click handling.
  * @param {LinkProps} props
  * @returns {TemplateResult}
  */

package/src/navigation/menu/index.js

@@ -1 +1 @@
-export { menu } from "./template.js"
+export { Menu } from "./template.js"

package/src/navigation/menu/menu.stories.js

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