@inglorious/ui 9.8.0 → 9.8.1

package/src/styles/tokens.css

@@ -1,7 +1,3 @@
-/* The writing direction as a number, for what moves sideways: a slide that
-   goes `translateX(calc(-100% * var(--iw-dir-sign)))` leaves to the left in
-   English and to the right in Arabic. Set again on any element with a `dir`,
-   so a subtree in the other direction gets its own. */
 :root,
 [dir="ltr"] {
   --iw-dir-sign: 1;
@@ -12,13 +8,9 @@
 }
 
 :root {
-  /* ========================================
-     COLOR PALETTE - Primitive Colors
-     ======================================== */
   --iw-color-white: #ffffff;
   --iw-color-black: #000000;
 
-  /* Brand Colors */
   --iw-color-primary-50: #e6fff0;
   --iw-color-primary-100: #b3ffd6;
   --iw-color-primary-200: #80ffbd;
@@ -30,7 +22,6 @@
   --iw-color-primary-800: #006637;
   --iw-color-primary-900: #00331c;
 
-  /* Neutral Colors */
   --iw-color-gray-50: #fafafa;
   --iw-color-gray-100: #f4f4f5;
   --iw-color-gray-200: #e4e4e7;
@@ -42,7 +33,6 @@
   --iw-color-gray-800: #27272a;
   --iw-color-gray-900: #18181b;
 
-  /* Semantic Colors */
   --iw-color-success-light: #d1fae5;
   --iw-color-success: #10b981;
   --iw-color-success-dark: #065f46;
@@ -59,9 +49,6 @@
   --iw-color-info: #3b82f6;
   --iw-color-info-dark: #1e40af;
 
-  /* ========================================
-     SPACING SCALE
-     ======================================== */
   --iw-space-0: 0;
   --iw-space-1: 0.25rem;
   --iw-space-2: 0.5rem;
@@ -77,18 +64,12 @@
   --iw-space-20: 5rem;
   --iw-space-24: 6rem;
 
-  /* ========================================
-     BREAKPOINTS
-     ======================================== */
   --iw-breakpoint-xs: 20rem;
   --iw-breakpoint-sm: 40rem;
   --iw-breakpoint-md: 48rem;
   --iw-breakpoint-lg: 64rem;
   --iw-breakpoint-xl: 80rem;
 
-  /* ========================================
-     BORDER RADIUS
-     ======================================== */
   --iw-radius-none: 0;
   --iw-radius-sm: 2px;
   --iw-radius-md: 4px;
@@ -97,9 +78,6 @@
   --iw-radius-2xl: 16px;
   --iw-radius-full: 9999px;
 
-  /* ========================================
-     TYPOGRAPHY
-     ======================================== */
   --iw-font-family-sans:
     system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
     "Helvetica Neue", Arial, sans-serif;
@@ -125,14 +103,10 @@
   --iw-line-height-normal: 1.5;
   --iw-line-height-relaxed: 1.75;
 
-  /* Labels of buttons and tabs: a theme can set them in capitals. */
   --iw-label-text-transform: none;
   --iw-label-letter-spacing: normal;
   --iw-label-font-weight: var(--iw-font-weight-normal);
 
-  /* ========================================
-     SHADOWS
-     ======================================== */
   --iw-shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
   --iw-shadow-md:
     0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
@@ -141,12 +115,6 @@
   --iw-shadow-xl:
     0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);
 
-  /* ========================================
-     TRANSITIONS
-     ======================================== */
-  /* A duration and an easing, so that motion can pick one of each. Anything
-     that has to vary them separately — a page arriving is not eased the way a
-     page leaving is — composes them rather than reaching for the shorthands. */
   --iw-duration-fast: 150ms;
   --iw-duration-normal: 200ms;
   --iw-duration-page: 250ms;
@@ -155,19 +123,11 @@
   --iw-easing-accelerate: cubic-bezier(0.4, 0, 1, 1);
   --iw-easing-decelerate: cubic-bezier(0, 0, 0.2, 1);
 
-  /* Shorthands for a plain `ease` at one of the durations above. These keep
-     working as they always have; reach for the tokens above instead when the
-     easing has to be anything other than `ease`. The page transitions in
-     `view-transitions` compose the two on purpose — a page arriving decelerates
-     and a page leaving accelerates — so they are not a shorthand case. */
   --iw-transition-fast: var(--iw-duration-fast) ease;
   --iw-transition-normal: var(--iw-duration-normal) ease;
   --iw-transition-page: var(--iw-duration-page) ease;
   --iw-transition-slow: var(--iw-duration-slow) ease;
 
-  /* ========================================
-     Z-INDEX SCALE
-     ======================================== */
   --iw-z-dropdown: 1000;
   --iw-z-sticky: 1020;
   --iw-z-fixed: 1030;

package/src/surfaces/accordion/style.css

@@ -11,8 +11,6 @@
   border-top: 1px solid var(--iw-color-border);
 }
 
-/* A <summary>: flex drops the browser's disclosure marker, and the caret
-   stands in for it. */
 .iw-accordion-trigger {
   padding: var(--iw-space-3) var(--iw-space-4);
   display: flex;

package/src/surfaces/accordion/template.js

@@ -86,12 +86,9 @@ export const Accordion = {
       name=${props.name || nothing}
       .open=${isExpanded}
       @toggle=${(event) => {
-        // newState is what the browser says; an environment whose toggle
-        // event lacks it, such as jsdom, still has the element's own state.
         const isOpen = event.newState
           ? event.newState === "open"
           : event.currentTarget.open
-        // Also fires when isExpanded opened it, which needs no report.
         if (isOpen === isExpanded) return
         onToggle?.(item, index, isOpen)
         props.onItemToggle?.(item, index, isOpen)
@@ -101,7 +98,6 @@ export const Accordion = {
         class="iw-accordion-trigger"
         aria-disabled=${isDisabled ? "true" : nothing}
         @click=${(event) => {
-          // A summary cannot be disabled, so its toggle is refused instead.
           if (isDisabled) event.preventDefault()
         }}
       >

package/src/surfaces/app-bar/style.css

@@ -2,9 +2,6 @@
   display: flex;
   align-items: center;
   min-height: var(--iw-space-16);
-  /* gap: var(--iw-space-3); */
-  /* Room either side of the title and controls, so they do not touch the
-     edges of the screen. */
   padding-inline: var(--iw-space-4);
   background: var(--iw-app-bar-bg, var(--iw-color-surface));
   color: var(--iw-color-text);

package/src/surfaces/card/style.css

@@ -11,15 +11,12 @@
     transform var(--iw-transition-normal);
 }
 
-/* Set into the page rather than raised from it, for content grouped inside
-   another surface. */
 .iw-card-sunk {
   background-color: var(--iw-color-bg-secondary, var(--iw-card-bg));
   border-color: transparent;
   box-shadow: none;
 }
 
-/* Only the grouping: no surface at all. */
 .iw-card-clear {
   background-color: transparent;
   border-color: transparent;

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

@@ -1,10 +1,12 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface ButtonGroupItem {
   id?: string
   value?: string
   label: string
-  children?: TemplateResult | string | number
+  children?: Renderable
   isDisabled?: boolean
   variant?: "default" | "outline" | "ghost"
   color?:
@@ -16,8 +18,8 @@ export interface ButtonGroupItem {
     | "error"
     | "info"
   size?: "sm" | "md" | "lg"
-  icon?: string
-  iconAfter?: string
+  icon?: TemplateResult | string
+  iconAfter?: TemplateResult | string
   [key: string]: unknown
 }
 

package/types/controls/button.d.ts

@@ -1,9 +1,11 @@
 import type { TemplateResult } from "@inglorious/web"
 
+import type { Renderable } from "../shared/renderable"
+
 export interface ButtonProps {
   id?: string
   type?: string
-  children?: TemplateResult | string | number
+  children?: Renderable
   variant?: "default" | "outline" | "ghost"
   color?:
     | "default"

package/types/controls/combobox.d.ts

@@ -70,3 +70,16 @@ export type ComboboxType = {
 }
 
 export declare const Combobox: ComboboxType
+
+export declare function getOptionValue(option: ComboboxOption): string | number
+export declare function getOptionLabel(option: ComboboxOption): string
+export declare function formatOption(option: ComboboxOption): ComboboxOption
+export declare function isOptionSelected(
+  option: ComboboxOption,
+  selectedValue: ComboboxProps["selectedValue"],
+  isMulti?: boolean,
+): boolean
+export declare function filterOptions(
+  options: ComboboxOption[],
+  searchTerm: string,
+): ComboboxOption[]

package/types/controls/fab.d.ts

@@ -16,7 +16,7 @@ export interface FabProps {
   type?: "button" | "submit" | "reset" | "menu"
   isExtended?: boolean
   ariaLabel?: string
-  onClick?: () => void
+  onClick?: (event: MouseEvent) => void
   [key: string]: unknown
 }
 

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
@@ -16,7 +18,7 @@ export interface DialogProps {
   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"`. */

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,7 +15,7 @@ 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"`. */

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
 }