@inglorious/ui 8.2.1 → 8.2.3

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@inglorious/ui",
-  "version": "8.2.1",
+  "version": "8.2.3",
   "description": "A design system for Inglorious Web with render-function components and customizable themes",
   "author": "Matteo Antony Mistretta <antony.mistretta@gmail.com> (https://ingloriouscoderz.it)",
   "license": "MIT",
@@ -301,21 +301,21 @@
     "**/*.css"
   ],
   "peerDependencies": {
-    "@inglorious/store": "11.0.4",
+    "@inglorious/store": "11.1.0",
     "@inglorious/utils": "5.0.0",
-    "@inglorious/web": "6.6.1"
+    "@inglorious/web": "6.7.0"
   },
   "devDependencies": {
     "@iconify-icons/fa7-brands": "^2.0.0",
     "@iconify-icons/fa7-regular": "^2.0.0",
     "@iconify-icons/fa7-solid": "^2.0.0",
     "@iconify-icons/material-symbols": "^2.0.6",
-    "@inglorious/charts": "11.1.0",
-    "@inglorious/eslint-config": "1.1.3",
-    "@inglorious/store": "11.0.4",
+    "@inglorious/charts": "11.1.2",
+    "@inglorious/eslint-config": "1.1.4",
+    "@inglorious/store": "11.1.0",
     "@inglorious/vite-plugin-jsx": "2.0.4",
     "@inglorious/vite-plugin-vue": "1.0.5",
-    "@inglorious/web": "6.6.1",
+    "@inglorious/web": "6.7.0",
     "@storybook/addon-docs": "^10.6.0",
     "@storybook/web-components-vite": "^10.6.0",
     "happy-dom": "^20.14.0",
@@ -323,6 +323,7 @@
     "prettier": "^3.9.6",
     "remark-gfm": "^4.0.1",
     "storybook": "^10.6.0",
+    "typescript": "~7.0.2",
     "vite": "^8.2.2",
     "vitest": "^5.0.0"
   },
@@ -336,8 +337,9 @@
     "format": "prettier --write .",
     "lint": "eslint .",
     "test:watch": "vitest",
-    "test": "vitest run",
+    "test": "vitest run && tsc -p type-tests",
     "storybook": "storybook dev -p 6006",
-    "build-storybook": "storybook build"
+    "build-storybook": "storybook build",
+    "test:types": "tsc -p type-tests"
   }
 }

package/src/controls/button/style.css

@@ -6,8 +6,8 @@
   padding: var(--iw-space-2) var(--iw-space-4);
   font-family: var(--iw-font-family-sans);
   font-size: var(--iw-font-size-base);
-  font-weight: var(--iw-font-weight-normal);
   line-height: var(--iw-line-height-normal);
+  font-weight: var(--iw-label-font-weight, var(--iw-font-weight-normal));
   text-transform: var(--iw-label-text-transform);
   letter-spacing: var(--iw-label-letter-spacing);
   text-decoration: none;
@@ -60,13 +60,20 @@
     }
   }
 
+  /* Neutral, unless a theme gives the default color its own tokens */
   &.iw-button-default {
-    --iw-button-color: var(--iw-color-text);
-    --iw-button-bg: var(--iw-color-surface);
-    --iw-button-bg-hover: var(--iw-color-surface-hover);
-    --iw-button-bg-active: var(--iw-color-surface-active);
-    --iw-button-border: var(--iw-color-border);
-    --iw-button-text: var(--iw-color-text);
+    --iw-button-color: var(--iw-button-default-color, var(--iw-color-text));
+    --iw-button-bg: var(--iw-button-default-bg, var(--iw-color-surface));
+    --iw-button-bg-hover: var(
+      --iw-button-default-bg-hover,
+      var(--iw-color-surface-hover)
+    );
+    --iw-button-bg-active: var(
+      --iw-button-default-bg-active,
+      var(--iw-color-surface-active)
+    );
+    --iw-button-border: var(--iw-button-default-border, var(--iw-color-border));
+    --iw-button-text: var(--iw-button-default-text, var(--iw-color-text));
 
     &.iw-button-outline,
     &.iw-button-ghost {

package/src/data-display/chip/style.css

@@ -4,10 +4,11 @@
   gap: var(--iw-space-1);
   padding: var(--iw-space-1) var(--iw-space-2);
   border-radius: 999px;
-  background: var(--iw-color-bg-secondary);
+  background: var(--iw-chip-bg, var(--iw-color-bg-secondary));
   color: var(--iw-color-text);
   font-size: var(--iw-font-size-sm);
   line-height: 1;
+  white-space: nowrap;
 
   .iw-chip-label {
     display: inline-flex;

package/src/data-display/table/style.css

@@ -18,9 +18,11 @@
   &.iw-table-wrapping {
     min-width: 0;
 
+    /* Wrap between words; break a word only when it cannot fit alone, so
+       short values such as percentages stay whole. */
     .iw-table-header-cell,
     .iw-table-cell {
-      overflow-wrap: anywhere;
+      overflow-wrap: break-word;
     }
   }
 

package/src/navigation/tabs/style.css

@@ -22,6 +22,7 @@
   align-items: center;
   gap: var(--iw-space-2);
   padding: var(--iw-space-3) var(--iw-space-4);
+  font-weight: var(--iw-label-font-weight, var(--iw-font-weight-normal));
   text-transform: var(--iw-label-text-transform);
   letter-spacing: var(--iw-label-letter-spacing);
   cursor: pointer;

package/src/styles/themes/material.css

@@ -33,9 +33,10 @@
   --iw-color-accent-hover: #c2185b;
   --iw-color-accent-active: #ad1457;
 
-  /* Buttons and tabs carry their labels in capitals, as Material does. */
+  /* Buttons and tabs carry their labels as Material UI does */
   --iw-label-text-transform: uppercase;
-  --iw-label-letter-spacing: 0.06em;
+  --iw-label-letter-spacing: 0.02857em;
+  --iw-label-font-weight: var(--iw-font-weight-medium);
 
   /* ========================================
      COMPONENT TOKENS
@@ -54,6 +55,14 @@
     0 1px 2px rgba(60, 64, 67, 0.3), 0 2px 6px 2px rgba(60, 64, 67, 0.15);
   --iw-button-shadow-active: 0 1px 3px rgba(60, 64, 67, 0.4);
 
+  /* A button's default color is primary, as in Material UI */
+  --iw-button-default-color: var(--iw-color-primary);
+  --iw-button-default-bg: var(--iw-color-primary);
+  --iw-button-default-bg-hover: var(--iw-color-primary-hover);
+  --iw-button-default-bg-active: var(--iw-color-primary-active);
+  --iw-button-default-border: var(--iw-color-primary);
+  --iw-button-default-text: var(--iw-color-primary-text);
+
   --iw-button-outline-bg: transparent;
   --iw-button-outline-bg-hover: rgba(26, 115, 232, 0.08);
   --iw-button-outline-text: var(--iw-color-primary);
@@ -95,6 +104,9 @@
   /* Badge */
   --iw-badge-radius: var(--iw-radius-sm);
 
+  /* Chip: a tint of the text, as cards and tables share the white background */
+  --iw-chip-bg: color-mix(in srgb, var(--iw-color-text) 8%, transparent);
+
   /* List */
   --iw-list-item: transparent;
   --iw-list-item-selected: color-mix(
@@ -146,6 +158,8 @@
   --iw-card-shadow:
     0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
 
+  --iw-chip-bg: color-mix(in srgb, var(--iw-color-text) 16%, transparent);
+
   --iw-list-item: transparent;
   --iw-list-item-active: #2d2d2d;
   --iw-list-item-selected: color-mix(

package/src/styles/tokens.css

@@ -128,6 +128,7 @@
   /* 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

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

@@ -43,7 +43,7 @@ export interface ButtonGroupProps {
   [key: string]: unknown
 }
 
-export interface ButtonGroupType {
+export type ButtonGroupType = {
   render(props: ButtonGroupProps): TemplateResult
 }
 

package/types/controls/button.d.ts

@@ -2,7 +2,7 @@ import type { TemplateResult } from "@inglorious/web"
 
 export interface ButtonProps {
   id?: string
-  type: "Button"
+  type?: string
   children?: TemplateResult | string | number
   variant?: "default" | "outline" | "ghost"
   color?:
@@ -26,7 +26,7 @@ export interface ButtonProps {
   [key: string]: unknown
 }
 
-export interface ButtonType {
+export type ButtonType = {
   render(props: ButtonProps): TemplateResult
 }
 

package/types/controls/checkbox.d.ts

@@ -13,7 +13,7 @@ export interface CheckboxProps {
   [key: string]: unknown
 }
 
-export interface CheckboxType {
+export type CheckboxType = {
   render(props: CheckboxProps): TemplateResult
 }
 

package/types/controls/combobox.d.ts

@@ -53,7 +53,7 @@ export interface ComboboxProps {
   [key: string]: unknown
 }
 
-export interface ComboboxType {
+export type ComboboxType = {
   create(entity: ComboboxProps): void
   render(entity: ComboboxProps, api: Api): TemplateResult
   renderCombobox(props: ComboboxProps): TemplateResult

package/types/controls/fab.d.ts

@@ -20,7 +20,7 @@ export interface FabProps {
   [key: string]: unknown
 }
 
-export interface FabType {
+export type FabType = {
   render(props: FabProps): TemplateResult
 }
 

package/types/controls/file-upload.d.ts

@@ -20,7 +20,7 @@ export interface FileUploadProps {
   [key: string]: unknown
 }
 
-export interface FileUploadType {
+export type FileUploadType = {
   render(props: FileUploadProps): TemplateResult
 }
 

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

@@ -24,7 +24,7 @@ export interface IconButtonProps {
   onClick?: () => void
 }
 
-export interface IconButtonType {
+export type IconButtonType = {
   render(props: IconButtonProps): TemplateResult
 }
 

package/types/controls/input.d.ts

@@ -35,7 +35,7 @@ export interface InputProps {
   [key: string]: unknown
 }
 
-export interface InputType {
+export type InputType = {
   render(props: InputProps): TemplateResult
 }
 

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

@@ -20,7 +20,7 @@ export interface RadioGroupProps {
   [key: string]: unknown
 }
 
-export interface RadioGroupType {
+export type RadioGroupType = {
   render(props: RadioGroupProps): TemplateResult
 }
 

package/types/controls/rating.d.ts

@@ -12,7 +12,7 @@ export interface RatingProps {
   size?: "sm" | "md" | "lg"
 }
 
-export interface RatingType {
+export type RatingType = {
   render(props: RatingProps): TemplateResult
 }
 

package/types/controls/select.d.ts

@@ -32,7 +32,7 @@ export interface SelectProps {
   [key: string]: unknown
 }
 
-export interface SelectType {
+export type SelectType = {
   render(props: SelectProps): TemplateResult
 }
 

package/types/controls/slider.d.ts

@@ -16,7 +16,7 @@ export interface SliderProps {
   [key: string]: unknown
 }
 
-export interface SliderType {
+export type SliderType = {
   render(props: SliderProps): TemplateResult
 }
 

package/types/controls/switch.d.ts

@@ -12,7 +12,7 @@ export interface SwitchProps {
   [key: string]: unknown
 }
 
-export interface SwitchType {
+export type SwitchType = {
   render(props: SwitchProps): TemplateResult
 }
 

package/types/controls/textarea.d.ts

@@ -22,7 +22,7 @@ export interface TextareaProps {
   [key: string]: unknown
 }
 
-export interface TextareaType {
+export type TextareaType = {
   render(props: TextareaProps): TemplateResult
 }
 

package/types/controls/upload-field.d.ts

@@ -20,7 +20,7 @@ export interface FileUploadProps {
   [key: string]: unknown
 }
 
-export interface FileUploadType {
+export type FileUploadType = {
   render(props: FileUploadProps): TemplateResult
 }
 

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

@@ -23,7 +23,7 @@ export interface AvatarProps {
   [key: string]: unknown
 }
 
-export interface AvatarType {
+export type AvatarType = {
   render(props: AvatarProps): TemplateResult
 }
 

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

@@ -13,7 +13,7 @@ export interface BadgeProps {
   [key: string]: unknown
 }
 
-export interface BadgeType {
+export type BadgeType = {
   render(props: BadgeProps): TemplateResult
 }
 

package/types/data-display/before-after.d.ts

@@ -25,7 +25,7 @@ export interface BeforeAfterProps {
   [key: string]: unknown
 }
 
-export interface BeforeAfterType {
+export type BeforeAfterType = {
   create(entity: BeforeAfterProps): void
   positionChange(entity: BeforeAfterProps, position: number): void
   render(entity: BeforeAfterProps, api: Api): TemplateResult

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

@@ -42,7 +42,7 @@ export interface CarouselProps {
   [key: string]: unknown
 }
 
-export interface CarouselType {
+export type CarouselType = {
   create(entity: CarouselProps): void
   indicatorSelect(
     props: CarouselProps,

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

@@ -18,7 +18,7 @@ export interface ChipProps {
   [key: string]: unknown
 }
 
-export interface ChipType {
+export type ChipType = {
   render(props: ChipProps): TemplateResult
 }
 

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

@@ -50,7 +50,7 @@ export interface Column {
 }
 
 export interface DataGridProps<T extends Row = Row> {
-  id: string | number
+  id?: string
   type: string
   data: T[]
   columns: Column[]
@@ -89,7 +89,7 @@ export interface DataGridProps<T extends Row = Row> {
   [key: string]: any
 }
 
-export interface DataGridType {
+export type DataGridType = {
   create(entity: DataGridProps): void
   sortChange(entity: DataGridProps, columnId: string): void
   sortsClear(entity: DataGridProps): void
@@ -150,3 +150,34 @@ export interface DataGridType {
     api: Api,
   ): any
 }
+
+export declare const DataGrid: DataGridType
+
+export interface DataGridPaginationInfo {
+  page: number
+  pageSize: number
+  pageSizes: number[]
+  totalPages: number
+  totalRows: number
+  start: number
+  end: number
+  hasNextPage: boolean
+  hasPrevPage: boolean
+}
+
+/** The rows to show: filtered, searched, sorted and paginated. */
+export declare function getRows<T extends Row = Row>(
+  entity: DataGridProps<T>,
+): T[]
+/** How many rows match the filters and search, across all pages. */
+export declare function getTotalRows(entity: DataGridProps): number
+/** The current page, or null without pagination. */
+export declare function getPaginationInfo(
+  entity: DataGridProps,
+): DataGridPaginationInfo | null
+export declare function getSortDirection(
+  entity: DataGridProps,
+  columnId: string,
+): "asc" | "desc" | null
+export declare function isAllSelected(entity: DataGridProps): boolean
+export declare function isSomeSelected(entity: DataGridProps): boolean

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

@@ -7,7 +7,7 @@ export interface DividerProps {
   [key: string]: unknown
 }
 
-export interface DividerType {
+export type DividerType = {
   render(props: DividerProps): TemplateResult
 }
 

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

@@ -34,7 +34,7 @@ export interface IconProps {
   [key: string]: unknown
 }
 
-export interface IconType {
+export type IconType = {
   render(props: IconProps): TemplateResult
 }
 

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

@@ -37,7 +37,7 @@ export interface ListProps {
   [key: string]: unknown
 }
 
-export interface ListType {
+export type ListType = {
   render(props: ListProps): TemplateResult
   renderList(props: ListProps): TemplateResult
   renderItem(

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

@@ -22,7 +22,7 @@ export interface TableProps {
   [key: string]: unknown
 }
 
-export interface TableType {
+export type TableType = {
   render(props: TableProps): TemplateResult
   renderTable(props: TableProps): TemplateResult
   renderHeaderCell(

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

@@ -13,7 +13,7 @@ export interface TooltipProps {
   [key: string]: unknown
 }
 
-export interface TooltipType {
+export type TooltipType = {
   render(props: TooltipProps): TemplateResult
 }
 

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

@@ -16,7 +16,7 @@ export interface TypographyProps {
   [key: string]: unknown
 }
 
-export interface TypographyType {
+export type TypographyType = {
   render(props: TypographyProps): TemplateResult
 }
 

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

@@ -13,7 +13,7 @@ export interface VirtualListEntity<
   T extends VirtualListItem = VirtualListItem,
 > {
   /** A unique identifier for the list entity. */
-  id: string | number
+  id?: string
 
   /** The entity type, used to look up rendering logic. */
   type: string
@@ -46,7 +46,7 @@ export interface VirtualListEntity<
 /**
  * The virtual list type implementation, combining logic and rendering.
  */
-export interface VirtualListType {
+export type VirtualListType = {
   /**
    * Initializes the list entity with default state.
    * @param entity The list entity to initialize.

package/types/feedback/alert.d.ts

@@ -15,7 +15,7 @@ export interface AlertProps {
   [key: string]: unknown
 }
 
-export interface AlertType {
+export type AlertType = {
   render(props: AlertProps): TemplateResult
 }
 

package/types/feedback/backdrop.d.ts

@@ -10,7 +10,7 @@ export interface BackdropProps {
   [key: string]: unknown
 }
 
-export interface BackdropType {
+export type BackdropType = {
   render(props: BackdropProps): TemplateResult | null
 }
 

package/types/feedback/dialog.d.ts

@@ -14,7 +14,7 @@ export interface DialogProps {
   [key: string]: unknown
 }
 
-export interface DialogType {
+export type DialogType = {
   render(props: DialogProps): TemplateResult | null
 }
 

package/types/feedback/progress.d.ts

@@ -19,7 +19,7 @@ export interface ProgressProps {
   [key: string]: unknown
 }
 
-export interface ProgressType {
+export type ProgressType = {
   render(props: ProgressProps): TemplateResult
 }
 

package/types/feedback/skeleton.d.ts

@@ -11,7 +11,7 @@ export interface SkeletonProps {
   [key: string]: unknown
 }
 
-export interface SkeletonType {
+export type SkeletonType = {
   render(props: SkeletonProps): TemplateResult
 }
 

package/types/feedback/snackbar.d.ts

@@ -12,7 +12,7 @@ export interface SnackbarProps {
   [key: string]: unknown
 }
 
-export interface SnackbarType {
+export type SnackbarType = {
   render(props: SnackbarProps): TemplateResult | null
 }
 

package/types/index.d.ts

@@ -1,3 +1,53 @@
+export { Button } from "./controls/button"
+export { ButtonGroup } from "./controls/button-group"
+export { Checkbox } from "./controls/checkbox"
+export { Fab } from "./controls/fab"
+export { FileUpload } from "./controls/file-upload"
+export { IconButton } from "./controls/icon-button"
+export { Input } from "./controls/input"
+export { RadioGroup } from "./controls/radio-group"
+export { Rating } from "./controls/rating"
+export { Select } from "./controls/select"
+export { Slider } from "./controls/slider"
+export { Switch } from "./controls/switch"
+export { Textarea } from "./controls/textarea"
+export { Avatar } from "./data-display/avatar"
+export { Badge } from "./data-display/badge"
+export { BeforeAfter } from "./data-display/before-after"
+export { Carousel } from "./data-display/carousel"
+export { Chip } from "./data-display/chip"
+export { DataGrid } from "./data-display/data-grid"
+export { Divider } from "./data-display/divider"
+export { Icon } from "./data-display/icon"
+export { List } from "./data-display/list"
+export { Table } from "./data-display/table"
+export { Tooltip } from "./data-display/tooltip"
+export { Typography } from "./data-display/typography"
+export { VirtualList } from "./data-display/virtual-list"
+export { Alert } from "./feedback/alert"
+export { Backdrop } from "./feedback/backdrop"
+export { Dialog } from "./feedback/dialog"
+export { Progress } from "./feedback/progress"
+export { Skeleton } from "./feedback/skeleton"
+export { Snackbar } from "./feedback/snackbar"
+export { Container } from "./layout/container"
+export { Flex } from "./layout/flex"
+export { Grid } from "./layout/grid"
+export { BottomNavigation } from "./navigation/bottom-navigation"
+export { Breadcrumbs } from "./navigation/breadcrumbs"
+export { Drawer } from "./navigation/drawer"
+export { Link } from "./navigation/link"
+export { Menu } from "./navigation/menu"
+export { Pagination } from "./navigation/pagination"
+export { SpeedDial } from "./navigation/speed-dial"
+export { Stepper } from "./navigation/stepper"
+export { Tabs } from "./navigation/tabs"
+export { withTransitions } from "./navigation/view-transitions"
+export { Accordion } from "./surfaces/accordion"
+export { AppBar } from "./surfaces/app-bar"
+export { Card } from "./surfaces/card"
+export { Paper } from "./surfaces/paper"
+
 export type { ButtonProps, ButtonType } from "./controls/button"
 export type { ButtonGroupProps, ButtonGroupType } from "./controls/button-group"
 export type { CheckboxProps, CheckboxType } from "./controls/checkbox"

package/types/layout/container.d.ts

@@ -21,7 +21,7 @@ export interface ContainerProps {
   [key: string]: unknown
 }
 
-export interface ContainerType {
+export type ContainerType = {
   render(props: ContainerProps): TemplateResult
 }
 

package/types/layout/flex.d.ts

@@ -25,7 +25,7 @@ export interface FlexProps {
   onClick?: () => void
 }
 
-export interface FlexType {
+export type FlexType = {
   render(props: FlexProps): TemplateResult
 }
 

package/types/layout/grid.d.ts

@@ -23,7 +23,7 @@ export interface GridProps {
   onClick?: () => void
 }
 
-export interface GridType {
+export type GridType = {
   render(props: GridProps): TemplateResult
 }
 

package/types/navigation/bottom-navigation.d.ts

@@ -21,7 +21,7 @@ export interface BottomNavigationProps {
   [key: string]: unknown
 }
 
-export interface BottomNavigationType {
+export type BottomNavigationType = {
   render(props: BottomNavigationProps): TemplateResult
   renderBottomNavigation(props: BottomNavigationProps): TemplateResult
   renderAction(

package/types/navigation/breadcrumbs.d.ts

@@ -17,7 +17,7 @@ export interface BreadcrumbsProps {
   [key: string]: unknown
 }
 
-export interface BreadcrumbsType {
+export type BreadcrumbsType = {
   render(props: BreadcrumbsProps): TemplateResult
   renderBreadcrumbs(props: BreadcrumbsProps): TemplateResult
   renderItem(

package/types/navigation/drawer.d.ts

@@ -16,7 +16,7 @@ export interface DrawerProps {
   [key: string]: unknown
 }
 
-export interface DrawerType {
+export type DrawerType = {
   render(props: DrawerProps): TemplateResult | null
 }
 

package/types/navigation/link.d.ts

@@ -15,7 +15,7 @@ export interface LinkProps {
   [key: string]: unknown
 }
 
-export interface LinkType {
+export type LinkType = {
   render(props: LinkProps): TemplateResult
 }
 

package/types/navigation/menu.d.ts

@@ -24,7 +24,7 @@ export interface MenuProps {
   [key: string]: unknown
 }
 
-export interface MenuType {
+export type MenuType = {
   render(props: MenuProps): TemplateResult | null
   renderMenu(props: MenuProps): TemplateResult | null
   renderItem(item: MenuItem, index: number, props: MenuProps): TemplateResult

package/types/navigation/pagination.d.ts

@@ -30,7 +30,7 @@ export interface PaginationControlRenderProps {
   onChange?: (page: number) => void
 }
 
-export interface PaginationType {
+export type PaginationType = {
   render(props: PaginationProps): TemplateResult
   renderPagination(props: PaginationProps): TemplateResult
   renderItem(

package/types/navigation/speed-dial.d.ts

@@ -23,7 +23,7 @@ export interface SpeedDialProps {
   [key: string]: unknown
 }
 
-export interface SpeedDialType {
+export type SpeedDialType = {
   render(props: SpeedDialProps): TemplateResult
   renderSpeedDial(props: SpeedDialProps): TemplateResult
   renderAction(

package/types/navigation/stepper.d.ts

@@ -18,7 +18,7 @@ export interface StepperProps {
   [key: string]: unknown
 }
 
-export interface StepperType {
+export type StepperType = {
   render(props: StepperProps): TemplateResult
   renderStepper(props: StepperProps): TemplateResult
   renderStep(step: Step, index: number, props: StepperProps): TemplateResult

package/types/navigation/tabs.d.ts

@@ -22,7 +22,7 @@ export interface TabsProps {
   [key: string]: unknown
 }
 
-export interface TabsType {
+export type TabsType = {
   render(props: TabsProps): TemplateResult
   renderTabs(props: TabsProps): TemplateResult
   renderTab(item: TabItem, index: number, props: TabsProps): TemplateResult

package/types/surfaces/accordion.d.ts

@@ -20,7 +20,7 @@ export interface AccordionProps {
   [key: string]: unknown
 }
 
-export interface AccordionType {
+export type AccordionType = {
   render(props: AccordionProps): TemplateResult
   renderAccordion(props: AccordionProps): TemplateResult
   renderItem(

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

@@ -18,7 +18,7 @@ export interface AppBarProps {
   [key: string]: unknown
 }
 
-export interface AppBarType {
+export type AppBarType = {
   render(props: AppBarProps): TemplateResult
 }
 

package/types/surfaces/card.d.ts

@@ -29,7 +29,7 @@ export interface CardProps {
   [key: string]: unknown
 }
 
-export interface CardType {
+export type CardType = {
   render(props: CardProps): TemplateResult
   renderCard(props: CardProps): TemplateResult
   renderHeader(props: CardProps): TemplateResult | null

package/types/surfaces/paper.d.ts

@@ -21,7 +21,7 @@ export interface PaperProps {
   [key: string]: unknown
 }
 
-export interface PaperType {
+export type PaperType = {
   render(props: PaperProps): TemplateResult
 }