@inglorious/ui 9.7.3 → 9.8.1

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

@@ -1,27 +1,13 @@
 import type { TemplateResult } from "@inglorious/web"
 
-export interface IconButtonProps {
-  id?: string
-  type?: string
-  icon?: string
-  label?: string
-  iconAfter?: string
+import type { ButtonProps } from "./button"
+
+/** A Button, with its content given as icons and a label. */
+export interface IconButtonProps extends ButtonProps {
+  icon?: TemplateResult | string
+  label?: TemplateResult | string | number
+  iconAfter?: TemplateResult | string
   direction?: "row" | "column"
-  ariaLabel?: string
-  variant?: "default" | "outline" | "ghost"
-  color?:
-    | "default"
-    | "primary"
-    | "secondary"
-    | "success"
-    | "warning"
-    | "error"
-    | "info"
-  size?: "sm" | "md" | "lg"
-  isDisabled?: boolean
-  isFullWidth?: boolean
-  buttonType?: "button" | "submit" | "reset" | "menu"
-  onClick?: () => void
 }
 
 export type IconButtonType = {

package/types/controls/input.d.ts

@@ -29,8 +29,8 @@ export interface InputProps {
   isReadOnly?: boolean
   isRequired?: boolean
   isFullWidth?: boolean
-  icon?: string
-  iconAfter?: string
+  icon?: TemplateResult | string
+  iconAfter?: TemplateResult | string
   onChange?: (value: string) => void
   onBlur?: () => void
   onFocus?: () => void

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

@@ -19,7 +19,7 @@ export interface AvatarProps {
   backgroundColor?: string
   textColor?: string
   children?: TemplateResult | string | number
-  onClick?: () => void
+  onClick?: (event: MouseEvent) => void
   [key: string]: unknown
 }
 

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

@@ -1,15 +1,17 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface BadgeProps {
   id?: string
-  children?: TemplateResult | string | number
+  children?: Renderable
   color?: "primary" | "secondary" | "success" | "warning" | "error" | "info"
   variant?: "solid" | "outline"
   size?: "sm" | "md" | "lg"
   shape?: "rectangle" | "pill" | "circle" | "square"
   ringWidth?: string
   className?: string
-  onClick?: () => void
+  onClick?: (event: MouseEvent) => void
   [key: string]: unknown
 }
 

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

@@ -1,10 +1,12 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface ChipProps {
   id?: string
-  children?: TemplateResult | string | number
+  children?: Renderable
   /** Shown before the label, such as an `Icon.render(...)`. Decorative. */
-  icon?: TemplateResult
+  icon?: TemplateResult | string
   isRemovable?: boolean
   color?:
     | "default"
@@ -23,7 +25,7 @@ export interface ChipProps {
   isSelected?: boolean
   /** Only for a chip with `isSelected`. */
   isDisabled?: boolean
-  onClick?: () => void
+  onClick?: (event: MouseEvent) => void
   [key: string]: unknown
 }
 

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

@@ -1,5 +1,7 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 /**
  * An icon in the Iconify format, as every set on `@iconify-icons/*` exports
  * it: `import arrowBack from "@iconify-icons/material-symbols/arrow-back"`.
@@ -19,7 +21,7 @@ export interface IconProps {
   /** The icon to draw, as inline SVG at the size's font size. */
   icon?: IconData
   /** Shown when there is no `icon`: an emoji, a glyph, any markup. */
-  children?: TemplateResult | string | number
+  children?: Renderable
   size?: "sm" | "md" | "lg"
   color?: string
   /**
@@ -30,7 +32,7 @@ export interface IconProps {
   /** Names an icon that means something on its own. Without it the icon is decorative. */
   label?: string
   className?: string
-  onClick?: () => void
+  onClick?: (event: MouseEvent) => void
   [key: string]: unknown
 }
 

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

@@ -1,15 +1,17 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface TooltipProps {
   id?: string
-  children?: TemplateResult | string | number
+  children?: Renderable
   content?: TemplateResult | string | number
   position?: "top" | "right" | "bottom" | "left"
   size?: "sm" | "md" | "lg"
   isOpen?: boolean
   maxWidth?: string
   className?: string
-  onClick?: () => void
+  onClick?: (event: MouseEvent) => void
   [key: string]: unknown
 }
 

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

@@ -1,11 +1,13 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export type TypographyVariant =
   "body" | "h1" | "h2" | "h3" | "caption" | "overline"
 
 export interface TypographyProps {
   id?: string
-  children?: TemplateResult | string | number
+  children?: Renderable
   variant?: TypographyVariant
   align?: "left" | "center" | "right"
   weight?: string | number

package/types/feedback/alert.d.ts

@@ -1,11 +1,13 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface AlertProps {
   id?: string
   type?: string
   title?: TemplateResult | string | number
   description?: TemplateResult | string | number
-  children?: TemplateResult | string | number
+  children?: Renderable
   severity?: "info" | "success" | "warning" | "error" | "neutral"
   variant?: "filled" | "outlined"
   icon?: TemplateResult | string | number

package/types/feedback/backdrop.d.ts

@@ -1,12 +1,14 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface BackdropProps {
   id?: string
   type?: string
   isOpen?: boolean
   className?: string
-  children?: TemplateResult | string | number
-  onClick?: () => void
+  children?: Renderable
+  onClick?: (event: MouseEvent) => void
   [key: string]: unknown
 }
 

package/types/feedback/dialog.d.ts

@@ -1,5 +1,7 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface DialogProps {
   id?: string
   type?: string
@@ -8,11 +10,19 @@ export interface DialogProps {
   isModal?: boolean
   /** Its width: `"sm"`, `"md"` (default) or `"lg"`. */
   size?: "sm" | "md" | "lg"
+  /**
+   * How it presents itself: `"dialog"` (default) centred, or `"sheet"`, which
+   * below 48rem is anchored to the bottom edge at full width, rising from
+   * below, and from 48rem is the centred dialog. Either can be modal or not.
+   */
+  variant?: "dialog" | "sheet"
   title?: TemplateResult | string | number
   description?: TemplateResult | string | number
-  children?: TemplateResult | string | number
+  children?: Renderable
   actions?: TemplateResult | string | number
   className?: string
+  /** The close button's accessible name, for the app's language. Defaults to `"Close"`. */
+  closeLabel?: string
   onClose?: () => void
   onBackdropClick?: () => void
   [key: string]: unknown

package/types/index.d.ts

@@ -80,6 +80,7 @@ export type { TextareaProps, TextareaType } from "./controls/textarea"
 export type { FileUploadProps, FileUploadType } from "./controls/file-upload"
 export type { ContainerProps, ContainerType } from "./layout/container"
 export type { FlexProps, FlexType } from "./layout/flex"
+export type { Renderable } from "./shared/renderable"
 export type { GridProps, GridType } from "./layout/grid"
 export type {
   BottomNavigationProps,

package/types/layout/container.d.ts

@@ -1,5 +1,7 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface ContainerProps {
   id?: string
   type?: string
@@ -12,7 +14,7 @@ export interface ContainerProps {
     | "nav"
     | "aside"
     | "article"
-  children?: TemplateResult | string | number
+  children?: Renderable
   maxWidth?: "xs" | "sm" | "md" | "lg" | "xl" | "none" | false | number | string
   isFixed?: boolean
   padding?: "none" | "sm" | "md" | "lg" | "xl"

package/types/layout/flex.d.ts

@@ -1,17 +1,13 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface FlexProps {
   id?: string
   type?: string
-  element?:
-    | "div"
-    | "section"
-    | "main"
-    | "header"
-    | "footer"
-    | "nav"
-    | "aside"
-    | "article"
+  /** The tag to render. Defaults to `"div"`. */
+  element?: keyof HTMLElementTagNameMap
+  className?: string
   direction?: "row" | "column" | "row-reverse" | "column-reverse"
   wrap?: "nowrap" | "wrap" | "wrap-reverse"
   justify?: "start" | "center" | "end" | "between" | "around" | "evenly"
@@ -21,8 +17,10 @@ export interface FlexProps {
   overflow?: "visible" | "hidden" | "clip" | "scroll" | "auto"
   isInline?: boolean
   isFullWidth?: boolean
-  children?: Array<TemplateResult | string | number>
-  onClick?: () => void
+  children?: Renderable
+  onClick?: (event: MouseEvent) => void
+  /** Any other property is set on the element, such as `style` or `data-*`. */
+  [key: string]: unknown
 }
 
 export type FlexType = {

package/types/layout/grid.d.ts

@@ -1,5 +1,7 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface GridProps {
   id?: string
   type?: string
@@ -19,8 +21,8 @@ export interface GridProps {
   align?: "stretch" | "start" | "center" | "end"
   justify?: "stretch" | "start" | "center" | "end"
   isFullWidth?: boolean
-  children?: Array<TemplateResult | string | number>
-  onClick?: () => void
+  children?: Renderable
+  onClick?: (event: MouseEvent) => void
 }
 
 export type GridType = {

package/types/navigation/breadcrumbs.d.ts

@@ -4,7 +4,7 @@ export interface BreadcrumbItem {
   id?: string | number
   label: TemplateResult | string | number
   href?: string
-  onClick?: () => void
+  onClick?: (event: MouseEvent) => void
   [key: string]: unknown
 }
 

package/types/navigation/drawer.d.ts

@@ -1,5 +1,7 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface DrawerProps {
   id?: string
   type?: string
@@ -13,9 +15,15 @@ export interface DrawerProps {
   isHidden?: boolean
   isCollapsed?: boolean
   title?: TemplateResult | string | number
-  children?: TemplateResult | string | number
+  children?: Renderable
   hasBackdrop?: boolean
   className?: string
+  /** The close button's accessible name, for the app's language. Defaults to `"Close"`. */
+  closeLabel?: string
+  /** The collapse toggle's accessible name while expanded. Defaults to `"Collapse sidebar"`. */
+  collapseLabel?: string
+  /** The collapse toggle's accessible name while collapsed. Defaults to `"Expand sidebar"`. */
+  expandLabel?: string
   onClose?: () => void
   onCollapseToggle?: () => void
   [key: string]: unknown

package/types/navigation/link.d.ts

@@ -1,17 +1,19 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface LinkProps {
   id?: string
   type?: string
   href?: string
   label?: TemplateResult | string | number
-  children?: TemplateResult | string | number
+  children?: Renderable
   underline?: "always" | "hover" | "none"
   color?: "primary" | "secondary" | "inherit"
   isMuted?: boolean
   isExternal?: boolean
   className?: string
-  onClick?: () => void
+  onClick?: (event: MouseEvent) => void
   [key: string]: unknown
 }
 

package/types/shared/renderable.d.ts

@@ -0,0 +1,12 @@
+import type { TemplateResult } from "@inglorious/web"
+
+/** What a template can render, `nothing` and `when()`'s results included. */
+export type Renderable =
+  | TemplateResult
+  | string
+  | number
+  | boolean
+  | symbol
+  | null
+  | undefined
+  | Renderable[]

package/types/surfaces/app-bar.d.ts

@@ -1,5 +1,7 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface AppBarProps {
   id?: string
   type?: string
@@ -7,7 +9,7 @@ export interface AppBarProps {
   subtitle?: TemplateResult | string | number
   leading?: TemplateResult | string | number
   trailing?: TemplateResult | string | number
-  children?: TemplateResult | string | number
+  children?: Renderable
   isDense?: boolean
   variant?: "regular" | "dense" | "prominent"
   color?: "default" | "primary" | "secondary" | "transparent" | "inherit"

package/types/surfaces/card.d.ts

@@ -1,5 +1,7 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface CardProps {
   id?: string
   type?: string
@@ -21,7 +23,7 @@ export interface CardProps {
   subtitle?: TemplateResult | string | number
   header?: TemplateResult | string | number
   body?: TemplateResult | string | number
-  children?: TemplateResult | string | number
+  children?: Renderable
   footer?: TemplateResult | string | number
   headerPadding?: "none" | "sm" | "md" | "lg" | "xl"
   bodyPadding?: "none" | "sm" | "md" | "lg" | "xl"
@@ -30,7 +32,7 @@ export interface CardProps {
   isClickable?: boolean
   isFullWidth?: boolean
   className?: string
-  onClick?: () => void
+  onClick?: (event: MouseEvent) => void
   [key: string]: unknown
 }
 

package/types/surfaces/paper.d.ts

@@ -1,5 +1,7 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface PaperProps {
   id?: string
   type?: string
@@ -12,7 +14,7 @@ export interface PaperProps {
     | "nav"
     | "aside"
     | "article"
-  children?: TemplateResult | string | number
+  children?: Renderable
   variant?: "elevated" | "outlined"
   elevation?: number
   padding?: "none" | "sm" | "md" | "lg"