@inglorious/ui 1.0.2 → 2.0.1

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

@@ -43,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/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/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/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/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/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,7 +8,7 @@ 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.
@@ -70,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,7 +8,7 @@ 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.
@@ -84,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,10 +5,10 @@
 
 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.
@@ -52,7 +52,7 @@ export function render(props) {
     .join(" ")
 
   return html`
-    ${flex.render({
+    ${Flex.render({
       element: "aside",
       direction: "column",
       className: drawerClassName,
@@ -60,7 +60,7 @@ export function render(props) {
         when(
           title || onClose,
           () => html`
-            ${flex.render({
+            ${Flex.render({
               align: "center",
               justify: "between",
               gap: "sm",
@@ -71,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",
                     }),
@@ -89,7 +89,7 @@ export function render(props) {
           `,
         ),
 
-        flex.render({
+        Flex.render({
           direction: "column",
           className: "iw-drawer-body",
           children,
@@ -98,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",
@@ -111,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",
                 }),
@@ -123,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/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",

package/src/navigation/menu/template.js

@@ -8,7 +8,7 @@ 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.

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,11 +7,11 @@
 
 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.
@@ -92,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,
@@ -121,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,7 +6,7 @@
 
 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.

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,7 +6,7 @@
 
 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.

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,7 +6,7 @@
 
 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.

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"