@inglorious/ui 9.7.3 → 9.8.1

package/src/styles/themes/material-3.css

@@ -2,17 +2,10 @@
 
 .iw-theme-material-3 {
   --iw-font-family-sans: "Roboto", "Helvetica", "Arial", sans-serif;
-  /* The theme on the page itself: the element with the theme class, usually
-     <body>, takes its background, text color and font. */
   background-color: var(--iw-color-bg);
   color: var(--iw-color-text);
   font-family: var(--iw-font-family-sans);
 
-  /* ========================================
-     MATERIAL 3 THEME - Material Design 3 baseline
-     ======================================== */
-
-  /* Material 3 color roles the shared tokens have no name for */
   --iw-m3-outline: #79747e;
   --iw-m3-surface-container-low: #f7f2fa;
   --iw-m3-surface-container: #f3edf7;
@@ -24,7 +17,6 @@
   --iw-m3-inverse-on-surface: #f5eff7;
   --iw-m3-inverse-primary: #d0bcff;
 
-  /* Semantic Colors */
   --iw-color-bg: #fef7ff;
   --iw-color-bg-secondary: var(--iw-m3-surface-container);
   --iw-color-bg-tertiary: var(--iw-m3-surface-container-highest);
@@ -52,19 +44,15 @@
   --iw-color-primary-active: color-mix(in srgb, #6750a4 90%, #ffffff);
   --iw-color-primary-text: var(--iw-color-white);
 
-  /* Material 3's secondary color */
   --iw-color-accent: #625b71;
   --iw-color-accent-hover: color-mix(in srgb, #625b71 92%, #ffffff);
   --iw-color-accent-active: color-mix(in srgb, #625b71 90%, #ffffff);
 
-  /* Material 3 defines only an error color: the others are custom colors at
-     the same tones as the primary */
   --iw-color-success: #386a20;
   --iw-color-warning: #7d5700;
   --iw-color-error: #b3261e;
   --iw-color-info: #00639a;
 
-  /* Elevation levels 1 to 4 */
   --iw-shadow-sm:
     0 1px 2px 0 rgba(0, 0, 0, 0.3), 0 1px 3px 1px rgba(0, 0, 0, 0.15);
   --iw-shadow-md:
@@ -74,23 +62,16 @@
   --iw-shadow-xl:
     0 2px 3px 0 rgba(0, 0, 0, 0.3), 0 6px 10px 4px rgba(0, 0, 0, 0.15);
 
-  /* Material 3's shape scale: extra small to extra large */
   --iw-radius-sm: 4px;
   --iw-radius-md: 8px;
   --iw-radius-lg: 12px;
   --iw-radius-xl: 16px;
   --iw-radius-2xl: 28px;
 
-  /* Labels in the label-large style: medium weight, as written */
   --iw-label-text-transform: none;
   --iw-label-letter-spacing: 0.00714em;
   --iw-label-font-weight: var(--iw-font-weight-medium);
 
-  /* ========================================
-     COMPONENT TOKENS
-     ======================================== */
-
-  /* Button: filled, in a pill */
   --iw-button-bg: var(--iw-color-primary);
   --iw-button-bg-hover: var(--iw-color-primary-hover);
   --iw-button-bg-active: var(--iw-color-primary-active);
@@ -101,8 +82,6 @@
   --iw-button-shadow-hover: var(--iw-shadow-sm);
   --iw-button-shadow-active: none;
 
-  /* A button's default color is a filled tonal button, whose outlined and
-     ghost forms take the primary color */
   --iw-button-default-color: var(--iw-color-primary);
   --iw-button-default-bg: var(--iw-m3-secondary-container);
   --iw-button-default-bg-hover: var(--iw-m3-secondary-container);
@@ -110,7 +89,6 @@
   --iw-button-default-border: var(--iw-m3-secondary-container);
   --iw-button-default-text: var(--iw-m3-on-secondary-container);
 
-  /* Input: a filled text field */
   --iw-input-bg: var(--iw-m3-surface-container-highest);
   --iw-input-bg-hover: color-mix(
     in srgb,
@@ -124,40 +102,31 @@
   --iw-input-border-hover: var(--iw-color-text);
   --iw-input-border-focus: var(--iw-color-primary);
   --iw-input-radius: var(--iw-radius-sm) var(--iw-radius-sm) 0 0;
-  /* With the bottom border, a 2px active indicator */
   --iw-input-shadow-focus: inset 0 -1px 0 var(--iw-input-border-focus);
 
-  /* App bar: a top app bar on the surface */
   --iw-app-bar-bg: var(--iw-color-bg);
 
-  /* Drawer: a navigation drawer */
   --iw-drawer-bg: var(--iw-m3-surface-container-low);
 
-  /* Card: an elevated card */
   --iw-card-bg: var(--iw-m3-surface-container-low);
   --iw-card-border: transparent;
   --iw-card-radius: var(--iw-radius-lg);
   --iw-card-shadow: var(--iw-shadow-sm);
   --iw-card-shadow-hover: var(--iw-shadow-md);
 
-  /* Badge */
   --iw-badge-radius: var(--iw-radius-full);
 
-  /* Chip: outlined, on no background of its own */
   --iw-chip-bg: transparent;
 
-  /* List */
   --iw-list-item: transparent;
   --iw-list-item-active: var(--iw-color-surface-hover);
   --iw-list-item-selected: var(--iw-m3-secondary-container);
 
-  /* Alert */
   --iw-alert-radius: var(--iw-radius-lg);
   --iw-alert-shadow: none;
   color-scheme: light;
 }
 
-/* Dark variant */
 .iw-theme-material-3.iw-theme-dark {
   color-scheme: dark;
 
@@ -196,8 +165,6 @@
 }
 
 .iw-theme-material-3 {
-  /* Buttons: pills 40px tall. Hovering and pressing lay the label's color
-     over the container, as Material 3's state layers */
   .iw-button {
     padding: 10px 24px;
     font-size: 0.875rem;
@@ -256,7 +223,6 @@
       );
     }
 
-    /* Outlined buttons have a neutral outline, whatever their color */
     &.iw-button-outline {
       border-color: var(--iw-m3-outline);
     }
@@ -309,7 +275,6 @@
     }
   }
 
-  /* On dark, labels on a color are a deep tone of it */
   &.iw-theme-dark .iw-button {
     &.iw-button-secondary,
     &.iw-button-success,
@@ -324,8 +289,6 @@
     }
   }
 
-  /* Filled text fields: a tinted box with an indicator along its bottom,
-     2px and in the primary color while it has focus */
   .iw-input .iw-input-frame,
   .iw-select .iw-select-frame,
   .iw-combobox .iw-combobox-frame,
@@ -388,8 +351,6 @@
     height: 1.125rem;
   }
 
-  /* Switch: a tall outlined track whose thumb grows and takes the track's
-     opposite color when on */
   .iw-switch {
     .iw-switch-track {
       width: 3.25rem;
@@ -481,7 +442,6 @@
     );
   }
 
-  /* Tabs: primary tabs, with a rounded indicator as wide as the label */
   .iw-tabs-list {
     gap: 0;
   }
@@ -514,8 +474,6 @@
     }
   }
 
-  /* Chips: outlined, with small rounded corners, and filled with the
-     secondary container when selected */
   .iw-chip {
     min-height: 2rem;
     padding-inline: 16px;
@@ -557,8 +515,6 @@
     font-weight: var(--iw-font-weight-medium);
   }
 
-  /* Cards: elevated, with no rules between their parts. A sunk card is a
-     filled one */
   .iw-card-header,
   .iw-card-footer {
     border: 0 none;
@@ -583,8 +539,6 @@
     color: var(--iw-color-text-secondary);
   }
 
-  /* Alerts: Material 3 has none, so they are tonal containers of their
-     color, with rounded corners and no border */
   .iw-alert {
     padding: 12px 16px;
     font-size: 0.875rem;
@@ -639,8 +593,6 @@
     }
   }
 
-  /* Tables: Material 3 has none either, so plain rows ruled by the outline
-     variant */
   .iw-table {
     border: 0 none;
     background: transparent;
@@ -662,7 +614,6 @@
     background: var(--iw-m3-surface-container);
   }
 
-  /* Dialogs: a container with extra large corners */
   .iw-dialog {
     border: 0 none;
     border-radius: var(--iw-radius-2xl);
@@ -697,7 +648,6 @@
     gap: 8px;
   }
 
-  /* Menus, tooltips and snackbars */
   .iw-menu {
     padding: 8px 0;
     border: 0 none;
@@ -726,8 +676,6 @@
     color: var(--iw-m3-inverse-primary);
   }
 
-  /* App bars: top app bars, flat on the surface, which take a container
-     color instead of a shadow when raised */
   .iw-app-bar {
     border-bottom: 0 none;
   }

package/src/styles/themes/material-ui.css

@@ -2,17 +2,10 @@
 
 .iw-theme-material-ui {
   --iw-font-family-sans: "Roboto", "Helvetica", "Arial", sans-serif;
-  /* The theme on the page itself: the element with the theme class, usually
-     <body>, takes its background, text color and font. */
   background-color: var(--iw-color-bg);
   color: var(--iw-color-text);
   font-family: var(--iw-font-family-sans);
 
-  /* ========================================
-     MATERIAL UI THEME - Material UI defaults
-     ======================================== */
-
-  /* Semantic Colors */
   --iw-color-bg: var(--iw-color-white);
   --iw-color-bg-secondary: #f5f5f5;
   --iw-color-bg-tertiary: #eeeeee;
@@ -32,7 +25,6 @@
   --iw-color-primary-active: #1565c0;
   --iw-color-primary-text: var(--iw-color-white);
 
-  /* Material UI's secondary color */
   --iw-color-accent: #9c27b0;
   --iw-color-accent-hover: #7b1fa2;
   --iw-color-accent-active: #7b1fa2;
@@ -46,7 +38,6 @@
   --iw-color-info: #0288d1;
   --iw-color-info-dark: #01579b;
 
-  /* Elevations 1, 2, 4, 8 and 24 */
   --iw-shadow-sm:
     0 2px 1px -1px rgba(0, 0, 0, 0.2), 0 1px 1px 0 rgba(0, 0, 0, 0.14),
     0 1px 3px 0 rgba(0, 0, 0, 0.12);
@@ -63,21 +54,14 @@
     0 11px 15px -7px rgba(0, 0, 0, 0.2), 0 24px 38px 3px rgba(0, 0, 0, 0.14),
     0 9px 46px 8px rgba(0, 0, 0, 0.12);
 
-  /* One corner radius for everything, as Material UI's shape */
   --iw-radius-sm: 4px;
   --iw-radius-md: 4px;
   --iw-radius-lg: 4px;
 
-  /* Buttons and tabs carry their labels as Material UI does */
   --iw-label-text-transform: uppercase;
   --iw-label-letter-spacing: 0.02857em;
   --iw-label-font-weight: var(--iw-font-weight-medium);
 
-  /* ========================================
-     COMPONENT TOKENS
-     ======================================== */
-
-  /* Button */
   --iw-button-bg: var(--iw-color-primary);
   --iw-button-bg-hover: var(--iw-color-primary-hover);
   --iw-button-bg-active: var(--iw-color-primary-active);
@@ -88,7 +72,6 @@
   --iw-button-shadow-hover: var(--iw-shadow-lg);
   --iw-button-shadow-active: var(--iw-shadow-xl);
 
-  /* 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);
@@ -96,7 +79,6 @@
   --iw-button-default-border: var(--iw-color-primary);
   --iw-button-default-text: var(--iw-color-primary-text);
 
-  /* Input: an outlined text field */
   --iw-input-bg: transparent;
   --iw-input-bg-hover: transparent;
   --iw-input-bg-focus: transparent;
@@ -106,29 +88,22 @@
   --iw-input-border-hover: var(--iw-color-text);
   --iw-input-border-focus: var(--iw-color-primary);
   --iw-input-radius: var(--iw-radius-md);
-  /* With the border, a 2px outline */
   --iw-input-shadow-focus: inset 0 0 0 1px var(--iw-input-border-focus);
 
-  /* App bar */
   --iw-app-bar-bg: #f5f5f5;
 
-  /* Drawer */
   --iw-drawer-bg: var(--iw-color-surface);
 
-  /* Card: a Paper at elevation 1 */
   --iw-card-bg: var(--iw-color-surface);
   --iw-card-border: transparent;
   --iw-card-radius: var(--iw-radius-md);
   --iw-card-shadow: var(--iw-shadow-sm);
   --iw-card-shadow-hover: var(--iw-shadow-xl);
 
-  /* Badge */
   --iw-badge-radius: var(--iw-radius-full);
 
-  /* Chip */
   --iw-chip-bg: rgba(0, 0, 0, 0.08);
 
-  /* List */
   --iw-list-item: transparent;
   --iw-list-item-selected: color-mix(
     in srgb,
@@ -136,20 +111,17 @@
     transparent
   );
 
-  /* Alert */
   --iw-alert-radius: var(--iw-radius-md);
   --iw-alert-shadow: none;
   color-scheme: light;
 }
 
-/* Dark variant */
 .iw-theme-material-ui.iw-theme-dark {
   color-scheme: dark;
 
   --iw-color-bg: #121212;
   --iw-color-bg-secondary: #1e1e1e;
   --iw-color-bg-tertiary: #2c2c2c;
-  /* A raised surface is lightened, as Material UI's elevation overlay */
   --iw-color-surface: #1e1e1e;
   --iw-color-surface-hover: rgba(255, 255, 255, 0.08);
   --iw-color-surface-active: rgba(255, 255, 255, 0.16);
@@ -181,7 +153,6 @@
   --iw-input-text-placeholder: rgba(255, 255, 255, 0.5);
   --iw-input-border: rgba(255, 255, 255, 0.23);
 
-  /* Dark app bars are surfaces, as Material UI's enableColorOnDark is off */
   --iw-app-bar-bg: #272727;
 
   --iw-chip-bg: rgba(255, 255, 255, 0.16);
@@ -196,7 +167,6 @@
 }
 
 .iw-theme-material-ui {
-  /* Contained buttons: Material UI's sizes and colors, raised on hover */
   .iw-button {
     padding: 6px 16px;
     font-size: 0.875rem;
@@ -255,7 +225,6 @@
     &.iw-button-outline {
       border: 1px solid
         color-mix(in srgb, var(--iw-button-color) 50%, transparent);
-      /* One pixel less, for the border */
       padding: 5px 15px;
 
       &.iw-button-sm {
@@ -327,8 +296,6 @@
     }
   }
 
-  /* Outlined text fields: the label and helper text sit as Material UI's do,
-     and the label takes the primary color while the field has focus */
   .iw-input,
   .iw-select,
   .iw-textarea-field {
@@ -374,12 +341,10 @@
     }
   }
 
-  /* Switch: a thin track under a larger, raised thumb that takes the color */
   .iw-switch {
     .iw-switch-track {
       width: 2.125rem;
       height: 0.875rem;
-      /* Room for the thumb, which overhangs the track */
       margin-inline: 3px;
       padding: 0;
       overflow: visible;
@@ -450,7 +415,6 @@
     }
   }
 
-  /* Tabs */
   .iw-tabs-list {
     gap: 0;
   }
@@ -466,7 +430,6 @@
     color: var(--iw-color-primary);
   }
 
-  /* Chips: Material UI's height, and filled when they have a color */
   .iw-chip {
     min-height: 2rem;
     padding-inline: 12px;
@@ -530,7 +493,6 @@
     font-weight: var(--iw-font-weight-medium);
   }
 
-  /* Cards: a raised Paper, with no rules between its parts */
   .iw-card-header,
   .iw-card-footer {
     border: 0 none;
@@ -540,7 +502,6 @@
     background-color: transparent;
   }
 
-  /* Unless given a padding of its own */
   .iw-card-footer:not([class*="iw-card-footer-padding-"]) {
     padding: var(--iw-space-2);
   }
@@ -555,7 +516,6 @@
     margin: 0;
   }
 
-  /* Alerts: tinted with the color, the text a deep shade of it */
   .iw-alert {
     padding: 6px 16px;
     font-size: 0.875rem;
@@ -614,7 +574,6 @@
     }
   }
 
-  /* Tables sit on a Paper, which draws no border of its own */
   .iw-table {
     border: 0 none;
     font-size: 0.875rem;
@@ -630,7 +589,6 @@
     font-weight: var(--iw-font-weight-medium);
   }
 
-  /* Dialogs: a Paper at elevation 24 */
   .iw-dialog {
     border: 0 none;
     box-shadow: var(--iw-shadow-2xl);
@@ -664,7 +622,6 @@
     padding: 0;
   }
 
-  /* App bars: no border, and raised to elevation 4 */
   .iw-app-bar {
     border-bottom: 0 none;
   }

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
 }