@lostgradient/cinder 0.3.0 → 0.4.1

package/src/_internal/locale-context.ts

@@ -0,0 +1,21 @@
+import { createContext } from 'svelte';
+
+import { optionalContext } from './optional-context.ts';
+
+export type TextDirection = 'ltr' | 'rtl';
+
+export type LocaleContext = {
+  /** BCP 47 locale tag used by locale-aware components when no local prop is set. */
+  readonly locale: string | undefined;
+  /** Text direction for components that need direction-aware behavior. */
+  readonly direction: TextDirection | undefined;
+};
+
+const [getLocaleContextStrict, setLocaleContextRaw] = createContext<LocaleContext>();
+
+export function setLocaleContext(context: LocaleContext): void {
+  setLocaleContextRaw(context);
+}
+
+export const getLocaleContext: () => LocaleContext | undefined =
+  optionalContext(getLocaleContextStrict);

package/src/_internal/text-direction.ts

@@ -0,0 +1,213 @@
+import type { TextDirection } from './locale-context.ts';
+
+export function resolveTextDirection(
+  element: HTMLElement | null | undefined,
+  fallback?: TextDirection,
+): TextDirection | undefined {
+  let currentElement: HTMLElement | null = element ?? null;
+  let documentDirection: TextDirection | undefined;
+  let styledDirectionElement: HTMLElement | null = null;
+  while (currentElement) {
+    const direction = currentElement.getAttribute('dir')?.toLowerCase();
+    if (direction === 'rtl' || direction === 'ltr') {
+      if (typeof getComputedStyle === 'function' && styledDirectionElement) {
+        const styledDirection = getComputedStyle(styledDirectionElement).direction;
+        if (styledDirection === 'rtl' || styledDirection === 'ltr') return styledDirection;
+      }
+      if (currentElement === currentElement.ownerDocument.documentElement) {
+        documentDirection = direction;
+        break;
+      }
+      return direction;
+    }
+    if (direction === 'auto' && typeof getComputedStyle === 'function') {
+      const computedDirection = getComputedStyle(currentElement).direction;
+      if (computedDirection === 'rtl' || computedDirection === 'ltr') return computedDirection;
+    }
+    const styledDirection = currentElement.style.direction;
+    if (!styledDirectionElement && (styledDirection === 'rtl' || styledDirection === 'ltr')) {
+      styledDirectionElement = currentElement;
+    }
+    currentElement = currentElement.parentElement;
+  }
+
+  if (typeof getComputedStyle === 'function' && styledDirectionElement) {
+    const direction = getComputedStyle(styledDirectionElement).direction;
+    if (direction === 'rtl' || direction === 'ltr') return direction;
+  }
+
+  const computedDirection = readComputedTextDirection(element);
+  const rootComputedDirection = readComputedTextDirection(element?.ownerDocument.documentElement);
+  if (computedDirection && computedDirection !== rootComputedDirection) return computedDirection;
+  if (
+    computedDirection &&
+    fallback &&
+    computedDirection !== fallback &&
+    hasDirectionStylingHint(element)
+  ) {
+    return computedDirection;
+  }
+  if (!fallback && computedDirection === 'rtl') return computedDirection;
+
+  if (fallback) return fallback;
+  if (documentDirection) return documentDirection;
+
+  return undefined;
+}
+
+function readComputedTextDirection(
+  element: HTMLElement | null | undefined,
+): TextDirection | undefined {
+  if (!element || typeof getComputedStyle !== 'function') return undefined;
+  const direction = getComputedStyle(element).direction;
+  return direction === 'rtl' || direction === 'ltr' ? direction : undefined;
+}
+
+function hasDirectionStylingHint(element: HTMLElement | null | undefined): boolean {
+  let currentElement = element?.parentElement;
+  while (currentElement && currentElement !== currentElement.ownerDocument.documentElement) {
+    if (currentElement.style.direction) return true;
+    if (matchesDirectionStyleRule(currentElement)) return true;
+    currentElement = currentElement.parentElement;
+  }
+  return false;
+}
+
+function matchesDirectionStyleRule(element: HTMLElement): boolean {
+  for (const sheet of Array.from(element.ownerDocument.styleSheets)) {
+    let rules: CSSRuleList;
+    try {
+      rules = sheet.cssRules;
+    } catch {
+      continue;
+    }
+    if (matchesDirectionStyleRuleList(element, rules)) return true;
+  }
+  return false;
+}
+
+function matchesDirectionStyleRuleList(
+  element: HTMLElement,
+  rules: CSSRuleList | Iterable<CSSRule>,
+): boolean {
+  for (const rule of Array.from(rules)) {
+    if (isCssStyleRule(rule)) {
+      if (!rule.style.direction) {
+        const nestedRules = readNestedCssRules(rule);
+        if (nestedRules && matchesDirectionStyleRuleList(element, nestedRules)) return true;
+        continue;
+      }
+      try {
+        if (element.matches(rule.selectorText)) return true;
+      } catch {
+        continue;
+      }
+    }
+
+    const nestedRules = readNestedCssRules(rule);
+    if (
+      nestedRules &&
+      isConditionalRuleActive(rule) &&
+      matchesDirectionStyleRuleList(element, nestedRules)
+    ) {
+      return true;
+    }
+  }
+  return false;
+}
+
+function readNestedCssRules(rule: CSSRule): CSSRuleList | Iterable<CSSRule> | undefined {
+  if (!('cssRules' in rule)) return undefined;
+  try {
+    const nestedRules: unknown = Reflect.get(rule, 'cssRules');
+    return isCssRuleCollection(nestedRules) ? nestedRules : undefined;
+  } catch {
+    return undefined;
+  }
+}
+
+function isCssRuleCollection(value: unknown): value is CSSRuleList | Iterable<CSSRule> {
+  if (typeof CSSRuleList !== 'undefined' && value instanceof CSSRuleList) return true;
+  return Array.isArray(value) && value.every(isCssRule);
+}
+
+function isCssRule(value: unknown): value is CSSRule {
+  return (
+    typeof value === 'object' &&
+    value !== null &&
+    typeof Reflect.get(value, 'cssText') === 'string' &&
+    typeof Reflect.get(value, 'type') === 'number'
+  );
+}
+
+function isCssStyleRule(rule: CSSRule): rule is CSSStyleRule {
+  return (
+    typeof Reflect.get(rule, 'selectorText') === 'string' &&
+    typeof Reflect.get(rule, 'style') === 'object' &&
+    Reflect.get(rule, 'style') !== null
+  );
+}
+
+function isConditionalRuleActive(rule: CSSRule): boolean {
+  const conditionText = Reflect.get(rule, 'conditionText');
+  if (typeof conditionText !== 'string' || !conditionText.trim()) return true;
+
+  if (isMediaRule(rule) && typeof matchMedia === 'function') {
+    return matchMedia(conditionText).matches;
+  }
+
+  if (isSupportsRule(rule) && typeof CSS !== 'undefined' && typeof CSS.supports === 'function') {
+    return CSS.supports(conditionText);
+  }
+
+  return true;
+}
+
+function isMediaRule(rule: CSSRule): boolean {
+  return typeof Reflect.get(rule, 'media') === 'object' && Reflect.get(rule, 'media') !== null;
+}
+
+function isSupportsRule(rule: CSSRule): boolean {
+  return rule.constructor.name === 'CSSSupportsRule' || Reflect.get(rule, 'type') === 12;
+}
+
+export function isRightToLeftElement(element: HTMLElement | null | undefined): boolean {
+  return resolveTextDirection(element) === 'rtl';
+}
+
+export function observeTextDirection(
+  element: HTMLElement | null | undefined,
+  onChange: () => void,
+): (() => void) | undefined {
+  if (!element || typeof MutationObserver === 'undefined') return undefined;
+  const observedElement = element;
+  const observer = new MutationObserver((mutations) => {
+    if (
+      mutations.some(
+        (mutation) => mutation.type === 'attributes' && mutation.attributeName === 'dir',
+      )
+    ) {
+      observeDirectionChain();
+    }
+    onChange();
+  });
+
+  function observeDirectionChain(): void {
+    observer.disconnect();
+    let currentElement: HTMLElement | null = observedElement;
+    while (currentElement) {
+      const isAutoDirection = currentElement.getAttribute('dir')?.toLowerCase() === 'auto';
+      observer.observe(currentElement, {
+        attributes: true,
+        attributeFilter: ['dir', 'style', 'class'],
+        childList: isAutoDirection,
+        characterData: isAutoDirection,
+        subtree: isAutoDirection,
+      });
+      currentElement = currentElement.parentElement;
+    }
+  }
+
+  observeDirectionChain();
+  return () => observer.disconnect();
+}

package/src/_internal/tree-context.ts

@@ -44,6 +44,8 @@ export type TreeContext = {
   isExpanded(id: string): boolean;
   isSelected(id: string): boolean;
   isFocused(id: string): boolean;
+  positionInSet(id: string): number | undefined;
+  setSize(id: string): number | undefined;
   isVisible(id: string): boolean;
   hasVisibleDescendant(id: string): boolean;
   matchesFilter(label: string, id: string): boolean;

package/src/_internal/tree-registry.svelte.ts

@@ -1,6 +1,7 @@
 import { SvelteMap } from 'svelte/reactivity';
 
 import { inDocumentOrder } from '../utilities/document-order.ts';
+import { findTypeaheadMatch } from '../utilities/typeahead.ts';
 
 /** A single registered tree node. */
 export type TreeNodeRegistration = {
@@ -224,20 +225,17 @@ export class TreeRegistry {
     visibilityPredicate?: TreeVisibilityPredicate,
   ): string | undefined {
     const visible = this.getVisible(expandedIds, visibilityPredicate);
-    const lower = prefix.toLowerCase();
-    const startIndex = visible.indexOf(currentId);
-
-    // Search from item after current, then wrap around to the start.
-    // visible[index] is always defined: index = (startIndex + offset) % visible.length
-    // and we only enter this loop when visible.length > 0 (offset <= visible.length guard).
-    for (let offset = 1; offset <= visible.length; offset++) {
-      const index = (startIndex + offset) % visible.length;
-      const id = visible[index]!;
-      const node = this.#nodes.get(id);
-      if (node && node.label().toLowerCase().startsWith(lower)) {
-        return id;
-      }
-    }
-    return undefined;
+    return findTypeaheadMatch(
+      visible.map((id) => {
+        const node = this.#nodes.get(id);
+        return {
+          value: id,
+          label: node?.label() ?? '',
+          disabled: node?.disabled,
+        };
+      }),
+      prefix,
+      visible.indexOf(currentId),
+    );
   }
 }

package/src/components/_internal/create-command-list-state.svelte.ts

@@ -0,0 +1,171 @@
+import { inDocumentOrder } from '../../utilities/document-order.ts';
+import type { CommandItemRegistrationInput, CommandListContext } from './command-list-context.ts';
+
+type RegistrationRecord = CommandItemRegistrationInput & { id: string; node: HTMLElement };
+
+export type CommandListKeyboardOptions = {
+  event: KeyboardEvent;
+  onEnter?: (id: string) => void;
+  onEscape?: () => void;
+  ignoreModifiedNavigation?: boolean;
+  preventDefaultOnEmptyEnter?: boolean;
+};
+
+export class CommandListState {
+  readonly listboxId: string;
+  registrations = $state<RegistrationRecord[]>([]);
+  registrationsReady = $state(false);
+  #itemCounter = 0;
+  #readyCycle = 0;
+  #intendedActiveId = $state<string | null>(null);
+
+  enabledIds = $derived.by(() => {
+    return inDocumentOrder(this.registrations)
+      .filter((registration) => !registration.getDisabled())
+      .map((registration) => registration.id);
+  });
+
+  activeItemId = $derived(
+    this.#intendedActiveId !== null && this.enabledIds.includes(this.#intendedActiveId)
+      ? this.#intendedActiveId
+      : (this.enabledIds[0] ?? null),
+  );
+
+  constructor(listboxId: string) {
+    this.listboxId = listboxId;
+  }
+
+  resetActiveItem(): void {
+    this.#intendedActiveId = null;
+  }
+
+  refreshRegistrationsReady(): void {
+    this.registrationsReady = false;
+    const cycle = ++this.#readyCycle;
+    queueMicrotask(() => {
+      if (cycle === this.#readyCycle) this.registrationsReady = true;
+    });
+  }
+
+  scrollActiveItemIntoView(): void {
+    if (this.activeItemId === null) return;
+    const record = this.registrations.find((registration) => registration.id === this.activeItemId);
+    record?.node.scrollIntoView({ block: 'nearest' });
+  }
+
+  setActiveById(id: string): void {
+    this.#intendedActiveId = id;
+  }
+
+  register(input: CommandItemRegistrationInput, node: HTMLElement) {
+    const id = `${this.listboxId}-item-${++this.#itemCounter}`;
+    this.registrations.push({
+      id,
+      node,
+      getValue: input.getValue,
+      getOnselect: input.getOnselect,
+      getDisabled: input.getDisabled,
+    });
+    return {
+      id,
+      unregister: () => {
+        const index = this.registrations.findIndex((registration) => registration.id === id);
+        if (index !== -1) this.registrations.splice(index, 1);
+      },
+    };
+  }
+
+  activateItemById(id: string): RegistrationRecord | null {
+    const record = this.registrations.find((registration) => registration.id === id);
+    if (!record || record.getDisabled()) return null;
+    record.getOnselect()();
+    return record;
+  }
+
+  handleKeydown({
+    event,
+    onEnter,
+    onEscape,
+    ignoreModifiedNavigation = false,
+    preventDefaultOnEmptyEnter = false,
+  }: CommandListKeyboardOptions): boolean {
+    if (event.isComposing || event.keyCode === 229) return false;
+    const isModified = event.altKey || event.ctrlKey || event.metaKey || event.shiftKey;
+    const ids = this.enabledIds;
+
+    if (event.key === 'ArrowDown') {
+      if (ignoreModifiedNavigation && isModified) return false;
+      event.preventDefault();
+      if (ids.length === 0) return true;
+      const index = this.activeItemId === null ? -1 : ids.indexOf(this.activeItemId);
+      this.#intendedActiveId = ids[(index + 1) % ids.length] ?? null;
+      return true;
+    }
+
+    if (event.key === 'ArrowUp') {
+      if (ignoreModifiedNavigation && isModified) return false;
+      event.preventDefault();
+      if (ids.length === 0) return true;
+      const index = this.activeItemId === null ? 0 : ids.indexOf(this.activeItemId);
+      this.#intendedActiveId = ids[index <= 0 ? ids.length - 1 : index - 1] ?? null;
+      return true;
+    }
+
+    if (event.key === 'Home') {
+      if (ignoreModifiedNavigation && isModified) return false;
+      event.preventDefault();
+      this.#intendedActiveId = ids[0] ?? null;
+      return true;
+    }
+
+    if (event.key === 'End') {
+      if (ignoreModifiedNavigation && isModified) return false;
+      event.preventDefault();
+      this.#intendedActiveId = ids[ids.length - 1] ?? null;
+      return true;
+    }
+
+    if (event.key === 'Enter') {
+      if (!onEnter) return false;
+      if (this.activeItemId === null && !preventDefaultOnEmptyEnter) return false;
+      event.preventDefault();
+      event.stopPropagation();
+      if (this.activeItemId === null) return true;
+      onEnter?.(this.activeItemId);
+      return true;
+    }
+
+    if (event.key === 'Escape' && onEscape) {
+      event.preventDefault();
+      event.stopPropagation();
+      onEscape();
+      return true;
+    }
+
+    return false;
+  }
+
+  createContext(activateItemById: (id: string) => void = (id) => void this.activateItemById(id)) {
+    const listboxId = this.listboxId;
+    const getActiveItemId = () => this.activeItemId;
+    const register = (input: CommandItemRegistrationInput, node: HTMLElement) =>
+      this.register(input, node);
+    const setActiveById = (id: string) => this.setActiveById(id);
+
+    return {
+      get listboxId() {
+        return listboxId;
+      },
+      get activeItemId() {
+        return getActiveItemId();
+      },
+      register,
+      setActiveById,
+      activateItemById,
+    } satisfies CommandListContext;
+  }
+}
+
+export function createCommandListState(listboxId: string): CommandListState {
+  return new CommandListState(listboxId);
+}

package/src/components/_internal/create-sliding-dialog-state.svelte.ts

@@ -0,0 +1,170 @@
+import { captureFocus, lockBodyScroll, pushEscapeHandler } from '../../_internal/overlay.ts';
+import { waitForTransitionCompletion } from '../../_internal/transition-completion.ts';
+import { restoreFocusTo } from '../../utilities/focus.ts';
+
+export type SlidingDialogStateOptions = {
+  getOpen: () => boolean;
+  setOpen: (open: boolean) => void;
+  getDialogElement: () => HTMLDialogElement | undefined;
+  getPanelElement: () => HTMLElement | undefined;
+  getReducedMotion: () => boolean;
+  getTriggerRef: () => HTMLElement | null;
+  onOpen?: () => void;
+  onClosed?: () => void;
+};
+
+export class SlidingDialogState {
+  hydrated = $state(false);
+  renderPanel = $state(false);
+  isClosing = $state(false);
+  readonly #options: SlidingDialogStateOptions;
+  #closeGeneration = $state(0);
+  #capturedFocus: HTMLElement | null = null;
+  #releaseScrollLock: (() => void) | null = null;
+  #releaseEscape: (() => void) | null = null;
+  #cancelPendingClose: (() => void) | null = null;
+
+  constructor(options: SlidingDialogStateOptions) {
+    this.#options = options;
+    this.renderPanel = options.getOpen();
+  }
+
+  markHydrated(): void {
+    this.hydrated = true;
+  }
+
+  syncOpenState(): void {
+    const dialogElement = this.#options.getDialogElement();
+    if (!dialogElement) return;
+
+    if (this.#options.getOpen()) {
+      if (this.isClosing) {
+        this.#closeGeneration += 1;
+        this.#cancelPendingClose?.();
+        this.#cancelPendingClose = null;
+        this.isClosing = false;
+      }
+
+      if (!this.renderPanel) {
+        this.renderPanel = true;
+      }
+
+      if (!dialogElement.open) {
+        this.#capturedFocus = captureFocus();
+        dialogElement.showModal();
+        this.#acquireScrollLock();
+        this.#acquireEscapeMarker();
+        this.#options.onOpen?.();
+      }
+      return;
+    }
+
+    if (dialogElement.open) {
+      this.beginClosing();
+    } else {
+      this.renderPanel = false;
+    }
+  }
+
+  beginClosing(): void {
+    const dialogElement = this.#options.getDialogElement();
+    if (!dialogElement?.open || this.isClosing) return;
+    const panelElement = this.#options.getPanelElement();
+    if (!panelElement) {
+      this.#finishClosing(this.#closeGeneration);
+      return;
+    }
+
+    this.isClosing = true;
+    const generation = ++this.#closeGeneration;
+    this.#cancelPendingClose?.();
+    this.#cancelPendingClose = waitForTransitionCompletion({
+      element: panelElement,
+      reducedMotion: this.#options.getReducedMotion(),
+      onComplete: () => this.#finishClosing(generation),
+    });
+  }
+
+  handleClose(): void {
+    this.#releaseScrollLock?.();
+    this.#releaseScrollLock = null;
+    this.#releaseEscape?.();
+    this.#releaseEscape = null;
+    this.#options.setOpen(false);
+    this.#returnFocus();
+  }
+
+  requestClose(): void {
+    if (!this.#options.getOpen() && (this.isClosing || !this.#options.getDialogElement()?.open)) {
+      return;
+    }
+    this.#options.setOpen(false);
+    this.beginClosing();
+  }
+
+  handleBackdropClick(event: MouseEvent): void {
+    if (event.target === this.#options.getDialogElement()) {
+      this.requestClose();
+    }
+  }
+
+  handleNativeCancel(event: Event): void {
+    event.preventDefault();
+    this.requestClose();
+  }
+
+  destroy(): void {
+    this.#cancelPendingClose?.();
+    this.#cancelPendingClose = null;
+    const wasOpen = this.#releaseScrollLock !== null || this.#releaseEscape !== null;
+    this.#releaseScrollLock?.();
+    this.#releaseScrollLock = null;
+    this.#releaseEscape?.();
+    this.#releaseEscape = null;
+    if (wasOpen) {
+      this.#returnFocus();
+    }
+  }
+
+  #finishClosing(generation: number): void {
+    if (generation !== this.#closeGeneration) return;
+    this.#cancelPendingClose?.();
+    this.#cancelPendingClose = null;
+    this.isClosing = false;
+    if (this.#options.getOpen()) {
+      this.renderPanel = true;
+      return;
+    }
+    this.renderPanel = false;
+    this.#options.onClosed?.();
+    const dialogElement = this.#options.getDialogElement();
+    if (dialogElement?.open) {
+      dialogElement.close();
+    }
+  }
+
+  #acquireScrollLock(): void {
+    if (this.#releaseScrollLock) return;
+    this.#releaseScrollLock = lockBodyScroll();
+  }
+
+  #acquireEscapeMarker(): void {
+    if (this.#releaseEscape) return;
+    this.#releaseEscape = pushEscapeHandler(() => {});
+  }
+
+  #returnFocus(): void {
+    const candidates: Array<HTMLElement | null> = [
+      this.#options.getTriggerRef(),
+      this.#capturedFocus,
+    ];
+    this.#capturedFocus = null;
+    for (const candidate of candidates) {
+      if (restoreFocusTo(candidate)) break;
+    }
+  }
+}
+
+export function createSlidingDialogState(options: SlidingDialogStateOptions): SlidingDialogState {
+  return new SlidingDialogState(options);
+}

package/src/components/_radio/README.md

@@ -13,7 +13,7 @@ runtime. (A standalone `Checkbox`, by contrast, is a legitimate independent cont
   import { RadioGroup } from '@lostgradient/cinder/radio-group';
 </script>
 
-<RadioGroup name="plan" legend="Pricing tier">
+<RadioGroup name="plan" label="Pricing tier">
   <RadioGroup.Option id="free" value="free" label="Free" />
   <RadioGroup.Option id="pro" value="pro" label="Pro" />
 </RadioGroup>

package/src/components/_sortable-item.svelte

@@ -1,6 +1,6 @@
 <script lang="ts" module>
   import type { Snippet } from 'svelte';
-  import type { SortableItemContext } from '../utilities/sortable-controller.svelte.ts';
+  import type { SortableItemContext } from '../utilities/sortable-controller.types.ts';
 
   /** Internal props for SortableItem — not part of the public package API. */
   export type SortableItemProps<Item> = {

package/src/components/access-gate/access-gate-inline.svelte

@@ -231,7 +231,9 @@
       moveFocusOffControl(control);
     }
 
-    function syncDisabledControls(stateRefreshes?: ConsumerStateRefreshes): void {
+    function syncDisabledControls(
+      stateRefreshes: ConsumerStateRefreshes | undefined = undefined,
+    ): void {
       const currentControls = new Set(element.querySelectorAll<HTMLElement>(INTERACTIVE_SELECTOR));
 
       for (const control of currentControls) {

package/src/components/alert/README.md

@@ -16,14 +16,14 @@ A status message that communicates contextual feedback and can optionally be dis
 
 <!-- generated:props:start -->
 
-| Prop          | Type                                                              | Required | Default  | Description                                                                                                                |
-| ------------- | ----------------------------------------------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
-| `class`       | `string`                                                          | no       | —        | Custom class merged with `.cinder-alert`.                                                                                  |
-| `dismissible` | `boolean`                                                         | no       | `false`  | Allow the alert to be dismissed.                                                                                           |
-| `variant`     | `"info"` \| `"success"` \| `"warning"` \| `"error"` \| `"danger"` | no       | `"info"` | Visual style. `danger` is an accepted alias for `error` — both render identically.                                         |
-| `children`    | `(opaque)`                                                        | yes      | —        | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
-| `icon`        | `(opaque)`                                                        | no       | —        | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
-| `onDismiss`   | `(opaque)`                                                        | no       | —        | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| Prop          | Type                                                 | Required | Default  | Description                                                                                                                |
+| ------------- | ---------------------------------------------------- | -------- | -------- | -------------------------------------------------------------------------------------------------------------------------- |
+| `class`       | `string`                                             | no       | —        | Custom class merged with `.cinder-alert`.                                                                                  |
+| `dismissible` | `boolean`                                            | no       | `false`  | Allow the alert to be dismissed.                                                                                           |
+| `variant`     | `"info"` \| `"success"` \| `"warning"` \| `"danger"` | no       | `"info"` | Visual severity variant. `danger` is the canonical failure-severity spelling, consistent with banner and callout.          |
+| `children`    | `(opaque)`                                           | yes      | —        | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `icon`        | `(opaque)`                                           | no       | —        | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
+| `ondismiss`   | `(opaque)`                                           | no       | —        | A function or snippet prop. Its shape is not captured by the JSON schema; see the component types for the exact signature. |
 
 <!-- generated:props:end -->