@shopify/ui-extensions 2025.10.0-rc.40 → 2025.10.0-rc.41

package/src/surfaces/checkout/components/components.d.ts

@@ -13,6 +13,7 @@
  * https://github.com/Shopify/ui-api-design/issues/139
  */
 export type ComponentChildren = any;
+export type StringChildren = string;
 export interface GlobalProps {
 	/**
 	 * A unique identifier for the element.
@@ -45,6 +46,109 @@ export interface ActionSlots {
 	 */
 	secondaryActions?: ComponentChildren;
 }
+export interface BaseOverlayProps {
+	/**
+	 * Callback fired after the overlay is shown.
+	 */
+	onShow?: (event: Event) => void;
+	/**
+	 * Callback fired when the overlay is shown **after** any animations to show the overlay have finished.
+	 */
+	onAfterShow?: (event: Event) => void;
+	/**
+	 * Callback fired after the overlay is hidden.
+	 */
+	onHide?: (event: Event) => void;
+	/**
+	 * Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished.
+	 */
+	onAfterHide?: (event: Event) => void;
+}
+/**
+ * Shared interfaces for web component methods.
+ *
+ * Methods are required (not optional) because:
+ * - Components implementing this interface must provide all methods
+ * - Unlike props/attributes, methods are not rendered in HTML but are JavaScript APIs
+ * - Consumers expect these methods to be consistently available on all instances
+ */
+export interface BaseOverlayMethods {
+	/**
+	 * Method to show an overlay.
+	 *
+	 * @implementation This is a method to be called on the element and not a callback and should hence be camelCase
+	 */
+	showOverlay: () => void;
+	/**
+	 * Method to hide an overlay.
+	 *
+	 * @implementation This is a method to be called on the element and not a callback and should hence be camelCase
+	 */
+	hideOverlay: () => void;
+	/**
+	 * Method to toggle the visiblity of an overlay.
+	 *
+	 * @implementation This is a method to be called on the element and not a callback and should hence be camelCase
+	 */
+	toggleOverlay: () => void;
+}
+export interface FocusEventProps {
+	/**
+	 * Callback when the element loses focus.
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
+	 */
+	onBlur?: (event: FocusEvent) => void;
+	/**
+	 * Callback when the element receives focus.
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
+	 */
+	onFocus?: (event: FocusEvent) => void;
+}
+export interface ToggleEventProps {
+	/**
+	 * Callback fired when the element state changes **after** any animations have finished.
+	 *
+	 * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the
+	 *   `newState` property will be set to `open`.
+	 * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the
+	 *   `newState` will be `closed`.
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
+	 */
+	onAfterToggle?: (event: ToggleEvent$1) => void;
+	/**
+	 * Callback straight after the element state changes.
+	 *
+	 * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the
+	 *   `newState` property will be set to `open`.
+	 * - If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the
+	 *   `newState` will be `closed`.
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
+	 */
+	onToggle?: (event: ToggleEvent$1) => void;
+}
+export type ToggleState = "open" | "closed";
+interface ToggleEvent$1 extends Event {
+	readonly newState: ToggleState;
+	readonly oldState: ToggleState;
+}
+export interface ExtendableEvent extends Event {
+	/**
+	 * Provide a promise that signals the length, and eventual success or failure of actions relating to the event.
+	 *
+	 * This may be called many times, which adds promises to the event.
+	 *
+	 * However, this may only be called synchronously during the dispatch of the event.
+	 * As in, you cannot call it after a `setTimeout` or microtask.
+	 */
+	waitUntil?: (promise: Promise<void>) => void;
+}
 export type SizeKeyword = "small-500" | "small-400" | "small-300" | "small-200" | "small-100" | "small" | "base" | "large" | "large-100" | "large-200" | "large-300" | "large-400" | "large-500";
 export type ColorKeyword = "subdued" | "base" | "strong";
 export type BackgroundColorKeyword = "transparent" | ColorKeyword;
@@ -66,7 +170,7 @@ export interface BackgroundProps {
  *
  * @default 'auto'
  */
-export type ToneKeyword = "auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical" | "custom";
+export type ToneKeyword = "auto" | "neutral" | "info" | "success" | "caution" | "warning" | "critical" | "accent" | "custom";
 declare const privateIconArray: readonly [
 	"adjust",
 	"affiliate",
@@ -75,23 +179,23 @@ declare const privateIconArray: readonly [
 	"alert-circle",
 	"alert-diamond",
 	"alert-location",
-	"alert-octagon-filled",
 	"alert-octagon",
-	"alert-triangle-filled",
+	"alert-octagon-filled",
 	"alert-triangle",
+	"alert-triangle-filled",
 	"app-extension",
 	"apps",
 	"archive",
+	"arrow-down",
 	"arrow-down-circle",
 	"arrow-down-right",
-	"arrow-down",
-	"arrow-left-circle",
 	"arrow-left",
-	"arrow-right-circle",
+	"arrow-left-circle",
 	"arrow-right",
+	"arrow-right-circle",
+	"arrow-up",
 	"arrow-up-circle",
 	"arrow-up-right",
-	"arrow-up",
 	"arrows-in-horizontal",
 	"arrows-out-horizontal",
 	"attachment",
@@ -100,36 +204,39 @@ declare const privateIconArray: readonly [
 	"bag",
 	"bank",
 	"barcode",
+	"battery-low",
 	"bill",
 	"blank",
 	"blog",
-	"bolt-filled",
 	"bolt",
-	"book-open",
+	"bolt-filled",
 	"book",
+	"book-open",
 	"bug",
 	"bullet",
 	"business-entity",
-	"button-press",
 	"button",
+	"button-press",
 	"calculator",
+	"calendar",
 	"calendar-check",
 	"calendar-compare",
 	"calendar-list",
 	"calendar-time",
-	"calendar",
-	"camera-flip",
 	"camera",
+	"camera-flip",
 	"caret-down",
 	"caret-left",
 	"caret-right",
 	"caret-up",
+	"cart",
 	"cart-abandoned",
 	"cart-discount",
 	"cart-down",
+	"cart-filled",
 	"cart-sale",
+	"cart-send",
 	"cart-up",
-	"cart",
 	"cash-dollar",
 	"cash-euro",
 	"cash-pound",
@@ -141,8 +248,8 @@ declare const privateIconArray: readonly [
 	"chart-cohort",
 	"chart-donut",
 	"chart-funnel",
-	"chart-histogram-first-last",
 	"chart-histogram-first",
+	"chart-histogram-first-last",
 	"chart-histogram-flat",
 	"chart-histogram-full",
 	"chart-histogram-growth",
@@ -153,36 +260,36 @@ declare const privateIconArray: readonly [
 	"chart-popular",
 	"chart-stacked",
 	"chart-vertical",
+	"chat",
 	"chat-new",
 	"chat-referral",
-	"chat",
-	"check-circle-filled",
-	"check-circle",
 	"check",
+	"check-circle",
+	"check-circle-filled",
 	"checkbox",
-	"chevron-down-circle",
 	"chevron-down",
-	"chevron-left-circle",
+	"chevron-down-circle",
 	"chevron-left",
-	"chevron-right-circle",
+	"chevron-left-circle",
 	"chevron-right",
-	"chevron-up-circle",
+	"chevron-right-circle",
 	"chevron-up",
-	"circle-dashed",
+	"chevron-up-circle",
 	"circle",
+	"circle-dashed",
+	"clipboard",
 	"clipboard-check",
 	"clipboard-checklist",
-	"clipboard",
-	"clock-revert",
 	"clock",
-	"code-add",
+	"clock-revert",
 	"code",
+	"code-add",
+	"collection",
 	"collection-featured",
 	"collection-list",
 	"collection-reference",
-	"collection",
-	"color-none",
 	"color",
+	"color-none",
 	"compass",
 	"complete",
 	"compose",
@@ -193,76 +300,81 @@ declare const privateIconArray: readonly [
 	"corner-pill",
 	"corner-round",
 	"corner-square",
+	"credit-card",
 	"credit-card-cancel",
 	"credit-card-percent",
+	"credit-card-reader",
 	"credit-card-reader-chip",
 	"credit-card-reader-tap",
-	"credit-card-reader",
 	"credit-card-secure",
 	"credit-card-tap-chip",
-	"credit-card",
 	"crop",
 	"currency-convert",
+	"cursor",
 	"cursor-banner",
 	"cursor-option",
-	"cursor",
 	"data-presentation",
 	"data-table",
+	"database",
 	"database-add",
 	"database-connect",
-	"database",
 	"delete",
 	"delivered",
 	"delivery",
 	"desktop",
 	"disabled",
+	"disabled-filled",
+	"discount",
 	"discount-add",
+	"discount-automatic",
 	"discount-code",
-	"discount",
+	"discount-remove",
 	"dns-settings",
 	"dock-floating",
 	"dock-side",
+	"domain",
 	"domain-landing-page",
 	"domain-new",
 	"domain-redirect",
-	"domain",
 	"download",
 	"drag-drop",
 	"drag-handle",
+	"drawer",
 	"duplicate",
 	"edit",
+	"email",
 	"email-follow-up",
 	"email-newsletter",
-	"email",
 	"empty",
 	"enabled",
 	"enter",
-	"envelope-soft-pack",
 	"envelope",
+	"envelope-soft-pack",
 	"eraser",
 	"exchange",
 	"exit",
 	"export",
 	"external",
 	"eye-check-mark",
-	"eye-dropper-list",
 	"eye-dropper",
+	"eye-dropper-list",
 	"eye-first",
 	"eyeglasses",
 	"fav",
 	"favicon",
-	"file-list",
 	"file",
+	"file-list",
 	"filter",
+	"filter-active",
 	"flag",
 	"flip-horizontal",
 	"flip-vertical",
 	"flower",
+	"folder",
 	"folder-add",
 	"folder-down",
 	"folder-remove",
 	"folder-up",
-	"folder",
 	"food",
 	"foreground",
 	"forklift",
@@ -270,56 +382,62 @@ declare const privateIconArray: readonly [
 	"games",
 	"gauge",
 	"geolocation",
-	"gift-card",
 	"gift",
+	"gift-card",
 	"git-branch",
 	"git-commit",
 	"git-repository",
+	"globe",
 	"globe-asia",
 	"globe-europe",
 	"globe-lines",
 	"globe-list",
-	"globe",
+	"graduation-hat",
 	"grid",
+	"hashtag",
 	"hashtag-decimal",
 	"hashtag-list",
-	"hashtag",
 	"heart",
-	"hide-filled",
 	"hide",
+	"hide-filled",
 	"home",
+	"home-filled",
 	"icons",
 	"identity-card",
+	"image",
 	"image-add",
 	"image-alt",
 	"image-explore",
 	"image-magic",
 	"image-none",
 	"image-with-text-overlay",
-	"image",
 	"images",
 	"import",
 	"in-progress",
 	"incentive",
 	"incoming",
 	"incomplete",
-	"info-filled",
 	"info",
+	"info-filled",
 	"inheritance",
-	"inventory-updated",
 	"inventory",
+	"inventory-edit",
+	"inventory-list",
+	"inventory-transfer",
+	"inventory-updated",
 	"iq",
 	"key",
+	"keyboard",
 	"keyboard-filled",
 	"keyboard-hide",
-	"keyboard",
+	"keypad",
 	"label-printer",
-	"language-translate",
 	"language",
+	"language-translate",
 	"layout-block",
+	"layout-buy-button",
 	"layout-buy-button-horizontal",
 	"layout-buy-button-vertical",
-	"layout-buy-button",
 	"layout-column-1",
 	"layout-columns-2",
 	"layout-columns-3",
@@ -332,64 +450,73 @@ declare const privateIconArray: readonly [
 	"layout-sidebar-left",
 	"layout-sidebar-right",
 	"lightbulb",
-	"link-list",
 	"link",
+	"link-list",
 	"list-bulleted",
+	"list-bulleted-filled",
 	"list-numbered",
 	"live",
-	"location-none",
+	"live-critical",
+	"live-none",
 	"location",
+	"location-none",
 	"lock",
 	"map",
+	"markets",
 	"markets-euro",
 	"markets-rupee",
 	"markets-yen",
-	"markets",
 	"maximize",
-	"measurement-size-list",
 	"measurement-size",
-	"measurement-volume-list",
+	"measurement-size-list",
 	"measurement-volume",
-	"measurement-weight-list",
+	"measurement-volume-list",
 	"measurement-weight",
+	"measurement-weight-list",
 	"media-receiver",
 	"megaphone",
 	"mention",
+	"menu",
+	"menu-filled",
 	"menu-horizontal",
 	"menu-vertical",
-	"menu",
 	"merge",
 	"metafields",
+	"metaobject",
 	"metaobject-list",
 	"metaobject-reference",
-	"metaobject",
 	"microphone",
 	"minimize",
-	"minus-circle",
 	"minus",
+	"minus-circle",
 	"mobile",
-	"money-none",
 	"money",
+	"money-none",
+	"money-split",
 	"moon",
 	"nature",
-	"note-add",
 	"note",
+	"note-add",
 	"notification",
+	"order",
 	"order-batches",
 	"order-draft",
+	"order-filled",
 	"order-first",
 	"order-fulfilled",
 	"order-repeat",
 	"order-unfulfilled",
-	"order",
 	"orders-status",
 	"organization",
 	"outdent",
 	"outgoing",
+	"package",
+	"package-cancel",
 	"package-fulfilled",
 	"package-on-hold",
+	"package-reassign",
 	"package-returned",
-	"package",
+	"page",
 	"page-add",
 	"page-attachment",
 	"page-clock",
@@ -400,7 +527,6 @@ declare const privateIconArray: readonly [
 	"page-remove",
 	"page-report",
 	"page-up",
-	"page",
 	"pagination-end",
 	"pagination-start",
 	"paint-brush-flat",
@@ -410,50 +536,55 @@ declare const privateIconArray: readonly [
 	"passkey",
 	"paste",
 	"pause-circle",
-	"payment-capture",
 	"payment",
+	"payment-capture",
+	"payout",
 	"payout-dollar",
 	"payout-euro",
 	"payout-pound",
 	"payout-rupee",
 	"payout-yen",
-	"payout",
+	"person",
 	"person-add",
 	"person-exit",
+	"person-filled",
 	"person-list",
 	"person-lock",
 	"person-remove",
 	"person-segment",
-	"person",
 	"personalized-text",
+	"phablet",
+	"phone",
 	"phone-in",
 	"phone-out",
-	"phone",
-	"pin-remove",
 	"pin",
+	"pin-remove",
 	"plan",
-	"play-circle",
 	"play",
+	"play-circle",
+	"plus",
+	"plus-circle",
 	"plus-circle-down",
 	"plus-circle-filled",
 	"plus-circle-up",
-	"plus-circle",
-	"plus",
 	"point-of-sale",
+	"point-of-sale-register",
 	"price-list",
 	"print",
+	"product",
 	"product-add",
 	"product-cost",
+	"product-filled",
 	"product-list",
 	"product-reference",
 	"product-remove",
 	"product-return",
 	"product-unavailable",
-	"product",
-	"profile-filled",
 	"profile",
-	"question-circle-filled",
+	"profile-filled",
 	"question-circle",
+	"question-circle-filled",
+	"receipt",
 	"receipt-dollar",
 	"receipt-euro",
 	"receipt-folded",
@@ -462,7 +593,6 @@ declare const privateIconArray: readonly [
 	"receipt-refund",
 	"receipt-rupee",
 	"receipt-yen",
-	"receipt",
 	"receivables",
 	"redo",
 	"referral-code",
@@ -480,11 +610,12 @@ declare const privateIconArray: readonly [
 	"sandbox",
 	"save",
 	"savings",
+	"scan-qr-code",
+	"search",
 	"search-add",
 	"search-list",
 	"search-recent",
 	"search-resource",
-	"search",
 	"select",
 	"send",
 	"settings",
@@ -494,6 +625,7 @@ declare const privateIconArray: readonly [
 	"shield-pending",
 	"shield-person",
 	"shipping-label",
+	"shipping-label-cancel",
 	"shopcodes",
 	"slideshow",
 	"smiley-happy",
@@ -502,68 +634,70 @@ declare const privateIconArray: readonly [
 	"smiley-sad",
 	"social-ad",
 	"social-post",
+	"sort",
 	"sort-ascending",
 	"sort-descending",
-	"sort",
 	"sound",
 	"sports",
+	"star",
+	"star-circle",
 	"star-filled",
 	"star-half",
 	"star-list",
-	"star",
-	"status-active",
 	"status",
+	"status-active",
 	"stop-circle",
+	"store",
 	"store-import",
 	"store-managed",
 	"store-online",
-	"store",
 	"sun",
-	"table-masonry",
 	"table",
+	"table-masonry",
 	"tablet",
 	"target",
 	"tax",
 	"team",
+	"text",
 	"text-align-center",
 	"text-align-left",
 	"text-align-right",
 	"text-block",
 	"text-bold",
 	"text-color",
-	"text-font-list",
 	"text-font",
+	"text-font-list",
 	"text-grammar",
 	"text-in-columns",
 	"text-in-rows",
-	"text-indent-remove",
 	"text-indent",
+	"text-indent-remove",
 	"text-italic",
 	"text-quote",
 	"text-title",
 	"text-underline",
 	"text-with-image",
-	"text",
+	"theme",
 	"theme-edit",
 	"theme-store",
 	"theme-template",
-	"theme",
 	"three-d-environment",
 	"thumbs-down",
 	"thumbs-up",
 	"tip-jar",
 	"toggle-off",
 	"toggle-on",
+	"transaction",
+	"transaction-fee-add",
 	"transaction-fee-dollar",
 	"transaction-fee-euro",
 	"transaction-fee-pound",
 	"transaction-fee-rupee",
 	"transaction-fee-yen",
-	"transaction",
+	"transfer",
 	"transfer-in",
 	"transfer-internal",
 	"transfer-out",
-	"transfer",
 	"truck",
 	"undo",
 	"unknown-device",
@@ -579,12 +713,12 @@ declare const privateIconArray: readonly [
 	"wand",
 	"watch",
 	"wifi",
-	"work-list",
 	"work",
+	"work-list",
 	"wrench",
-	"x-circle-filled",
+	"x",
 	"x-circle",
-	"x"
+	"x-circle-filled"
 ];
 export type IconType = (typeof privateIconArray)[number];
 /**
@@ -593,6 +727,7 @@ export type IconType = (typeof privateIconArray)[number];
 export type ExtractStrict<T, U extends T> = Extract<T, U>;
 export type MaybeAllValuesShorthandProperty<T extends string> = T | `${T} ${T}` | `${T} ${T} ${T}` | `${T} ${T} ${T} ${T}`;
 export type MaybeTwoValuesShorthandProperty<T extends string> = T | `${T} ${T}`;
+export type MaybeResponsive<T> = T | `@container${string}`;
 /**
  * Prevents widening string literal types in a union to `string`.
  * @example
@@ -728,7 +863,7 @@ export interface DisplayProps {
 	 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/display
 	 * @default 'auto'
 	 */
-	display?: "auto" | "none";
+	display?: MaybeResponsive<"auto" | "none">;
 }
 export interface AccessibilityRoleProps {
 	/**
@@ -903,7 +1038,7 @@ export interface PaddingProps {
 	 *
 	 * @default 'none'
 	 */
-	padding?: MaybeAllValuesShorthandProperty<PaddingKeyword>;
+	padding?: MaybeResponsive<MaybeAllValuesShorthandProperty<PaddingKeyword>>;
 	/**
 	 * Adjust the block-padding.
 	 *
@@ -913,7 +1048,7 @@ export interface PaddingProps {
 	 *
 	 * @default '' - meaning no override
 	 */
-	paddingBlock?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | "";
+	paddingBlock?: MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">;
 	/**
 	 * Adjust the block-start padding.
 	 *
@@ -921,7 +1056,7 @@ export interface PaddingProps {
 	 *
 	 * @default '' - meaning no override
 	 */
-	paddingBlockStart?: PaddingKeyword | "";
+	paddingBlockStart?: MaybeResponsive<PaddingKeyword | "">;
 	/**
 	 * Adjust the block-end padding.
 	 *
@@ -929,7 +1064,7 @@ export interface PaddingProps {
 	 *
 	 * @default '' - meaning no override
 	 */
-	paddingBlockEnd?: PaddingKeyword | "";
+	paddingBlockEnd?: MaybeResponsive<PaddingKeyword | "">;
 	/**
 	 * Adjust the inline padding.
 	 *
@@ -939,7 +1074,7 @@ export interface PaddingProps {
 	 *
 	 * @default '' - meaning no override
 	 */
-	paddingInline?: MaybeTwoValuesShorthandProperty<PaddingKeyword> | "";
+	paddingInline?: MaybeResponsive<MaybeTwoValuesShorthandProperty<PaddingKeyword> | "">;
 	/**
 	 * Adjust the inline-start padding.
 	 *
@@ -947,7 +1082,7 @@ export interface PaddingProps {
 	 *
 	 * @default '' - meaning no override
 	 */
-	paddingInlineStart?: PaddingKeyword | "";
+	paddingInlineStart?: MaybeResponsive<PaddingKeyword | "">;
 	/**
 	 * Adjust the inline-end padding.
 	 *
@@ -955,7 +1090,7 @@ export interface PaddingProps {
 	 *
 	 * @default '' - meaning no override
 	 */
-	paddingInlineEnd?: PaddingKeyword | "";
+	paddingInlineEnd?: MaybeResponsive<PaddingKeyword | "">;
 }
 export type SizeUnits = `${number}px` | `${number}%` | `0`;
 export type SizeUnitsOrAuto = SizeUnits | "auto";
@@ -968,7 +1103,7 @@ export interface SizingProps {
 	 *
 	 * @default 'auto'
 	 */
-	blockSize?: SizeUnitsOrAuto;
+	blockSize?: MaybeResponsive<SizeUnitsOrAuto>;
 	/**
 	 * Adjust the minimum block size.
 	 *
@@ -976,7 +1111,7 @@ export interface SizingProps {
 	 *
 	 * @default '0'
 	 */
-	minBlockSize?: SizeUnits;
+	minBlockSize?: MaybeResponsive<SizeUnits>;
 	/**
 	 * Adjust the maximum block size.
 	 *
@@ -984,7 +1119,7 @@ export interface SizingProps {
 	 *
 	 * @default 'none'
 	 */
-	maxBlockSize?: SizeUnitsOrNone;
+	maxBlockSize?: MaybeResponsive<SizeUnitsOrNone>;
 	/**
 	 * Adjust the inline size.
 	 *
@@ -992,7 +1127,7 @@ export interface SizingProps {
 	 *
 	 * @default 'auto'
 	 */
-	inlineSize?: SizeUnitsOrAuto;
+	inlineSize?: MaybeResponsive<SizeUnitsOrAuto>;
 	/**
 	 * Adjust the minimum inline size.
 	 *
@@ -1000,7 +1135,7 @@ export interface SizingProps {
 	 *
 	 * @default '0'
 	 */
-	minInlineSize?: SizeUnits;
+	minInlineSize?: MaybeResponsive<SizeUnits>;
 	/**
 	 * Adjust the maximum inline size.
 	 *
@@ -1008,7 +1143,7 @@ export interface SizingProps {
 	 *
 	 * @default 'none'
 	 */
-	maxInlineSize?: SizeUnitsOrNone;
+	maxInlineSize?: MaybeResponsive<SizeUnitsOrNone>;
 }
 export type BorderStyleKeyword = "none" | "solid" | "dashed" | "dotted" | "auto";
 export type BorderSizeKeyword = SizeKeyword | "none";
@@ -1131,66 +1266,9 @@ export interface BaseBoxPropsWithRole extends BaseBoxProps, AccessibilityRolePro
 }
 interface BoxProps$1 extends BaseBoxPropsWithRole, GlobalProps {
 }
-export interface FocusEventProps {
-	/**
-	 * Callback when the element loses focus.
-	 *
-	 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/blur_event
-	 */
-	onBlur?: (event: FocusEvent) => void;
-	/**
-	 * Callback when the element receives focus.
-	 *
-	 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/focus_event
-	 */
-	onFocus?: (event: FocusEvent) => void;
-}
-export interface ToggleEventProps {
-	/**
-	 * Callback fired when the element state changes **after** any animations have finished.
-	 *
-	 * - If the element transitioned from hidden to showing, the `oldState` property will be set to `closed` and the
-	 *   `newState` property will be set to `open`.
-	 * - If the element transitioned from showing to hidden, the `oldState` property will be set to `open` and the
-	 *   `newState` will be `closed`.
-	 *
-	 * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState
-	 * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
-	 */
-	onAfterToggle?: (event: ToggleEvent$1) => void;
-	/**
-	 * Callback straight after the element state changes.
-	 *
-	 * - If the element is transitioning from hidden to showing, the `oldState` property will be set to `closed` and the
-	 *   `newState` property will be set to `open`.
-	 * - If the element is transitioning from showing to hidden, then `oldState` property will be set to `open` and the
-	 *   `newState` will be `closed`.
-	 *
-	 * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/toggle_event
-	 * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/newState
-	 * @see https://developer.mozilla.org/en-US/docs/Web/API/ToggleEvent/oldState
-	 */
-	onToggle?: (event: ToggleEvent$1) => void;
-}
-export type ToggleState = "open" | "closed";
-interface ToggleEvent$1 extends Event {
-	readonly newState: ToggleState;
-	readonly oldState: ToggleState;
-}
-export interface ExtendableEvent extends Event {
-	/**
-	 * Provide a promise that signals the length, and eventual success or failure of actions relating to the event.
-	 *
-	 * This may be called many times, which adds promises to the event.
-	 *
-	 * However, this may only be called synchronously during the dispatch of the event.
-	 * As in, you cannot call it after a `setTimeout` or microtask.
-	 */
-	waitUntil?: (promise: Promise<void>) => void;
-}
 export interface ButtonBehaviorProps extends InteractionProps, FocusEventProps {
 	/**
-	 * The behavior of the button.
+	 * The behavior of the Button.
 	 *
 	 * - `submit`: Used to indicate the component acts as a submit button, meaning it submits the closest form.
 	 * - `button`: Used to indicate the component acts as a button, meaning it has no default action.
@@ -1202,14 +1280,14 @@ export interface ButtonBehaviorProps extends InteractionProps, FocusEventProps {
 	 */
 	type?: "submit" | "button" | "reset";
 	/**
-	 * Callback when the button is activated.
+	 * Callback when the Button is activated.
 	 * This will be called before the action indicated by `type`.
 	 *
 	 * @see https://developer.mozilla.org/en-US/docs/Web/API/Element/click_event
 	 */
 	onClick?: (event: Event) => void;
 	/**
-	 * Disables the button, meaning it cannot be clicked or receive focus.
+	 * Disables the Button meaning it cannot be clicked or receive focus.
 	 *
 	 * @default false
 	 */
@@ -1217,7 +1295,7 @@ export interface ButtonBehaviorProps extends InteractionProps, FocusEventProps {
 	/**
 	 * Replaces content with a loading indicator while a background action is being performed.
 	 *
-	 * This also disables the button.
+	 * This also disables the Button.
 	 *
 	 * @default false
 	 */
@@ -1247,7 +1325,7 @@ export interface LinkBehaviorProps extends InteractionProps, FocusEventProps {
 	target?: "auto" | "_blank" | "_self" | "_parent" | "_top" | AnyString;
 	/**
 	 * Causes the browser to treat the linked URL as a download with the string being the file name.
-	 * Download only works for same-origin URLs, or the blob: and data: schemes.
+	 * Download only works for same-origin URLs or the `blob:` and `data:` schemes.
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a#download
 	 */
 	download?: string;
@@ -1295,7 +1373,7 @@ interface ButtonProps$1 extends GlobalProps, BaseClickableProps {
 	/**
 	 * A label that describes the purpose or contents of the Button. It will be read to users using assistive technologies such as screen readers.
 	 *
-	 * Use this when using only an icon or the button text is not enough context
+	 * Use this when using only an icon or the Button text is not enough context
 	 * for users using assistive technologies.
 	 */
 	accessibilityLabel?: string;
@@ -1304,13 +1382,13 @@ interface ButtonProps$1 extends GlobalProps, BaseClickableProps {
 	 */
 	children?: ComponentChildren;
 	/**
-	 * The type of icon to be displayed in the button.
+	 * The type of icon to be displayed in the Button.
 	 *
 	 * @default ''
 	 */
 	icon?: IconType | AnyString;
 	/**
-	 * The displayed inline width of the button.
+	 * The displayed inline width of the Button.
 	 *
 	 * - `auto`: the size of the button depends on the surface and context.
 	 * - `fill`: the button will takes up 100% of the available inline size.
@@ -1326,7 +1404,7 @@ interface ButtonProps$1 extends GlobalProps, BaseClickableProps {
 	 */
 	variant?: "auto" | "primary" | "secondary" | "tertiary";
 	/**
-	 * Sets the tone of the Button, based on the intention of the information being conveyed.
+	 * Sets the tone of the Button based on the intention of the information being conveyed.
 	 *
 	 * @default 'auto'
 	 */
@@ -1374,22 +1452,54 @@ export interface InputProps extends BaseInputProps {
 	 */
 	defaultValue?: string;
 }
-export interface FileInputProps<T extends File[] | File = File[]> extends BaseInputProps {
+export interface MultipleInputProps extends BaseInputProps {
 	/**
-	 * Callback when the user has **finished editing** a field, e.g. once they have blurred the field.
+	 * Callback when the user has selected option(s).
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/change_event
 	 */
-	onChange?: (newValue: T) => void;
+	onChange?: (event: Event) => void;
 	/**
-	 * Callback when the user makes any changes in the field.
+	 * Callback when the user has selected option(s).
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/input_event
+	 */
+	onInput?: (event: Event) => void;
+	/**
+	 * An array of the `value`s of the selected options.
+	 *
+	 * This is a convenience prop for setting the `selected` prop on child options.
 	 */
-	onInput?: (newValue: T) => void;
+	values?: string[];
+}
+export interface FileInputProps extends BaseInputProps {
+	/**
+	 * Callback when the user has **finished selecting** a file or files.
+	 */
+	onChange?: (event: Event) => void;
+	/**
+	 * Callback when the user makes any changes in the file selection.
+	 */
+	onInput?: (event: Event) => void;
+	/**
+	 * A string that represents the path to the selected file(s). If no file is selected yet, the value is an empty string ("").
+	 * When the user selected multiple files, the value represents the first file in the list of files they selected.
+	 * The value is always the file's name prefixed with "C:\fakepath\", which isn't the real path of the file.
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/input/file#value
+	 *
+	 * @default ''
+	 */
+	value?: string;
 	/**
-	 * The current value for the field.
+	 * An array of File objects representing the files currently selected by the user.
+	 *
+	 * This property is read-only and cannot be directly modified.
+	 * To clear the selected files, set the `value` prop to an empty string or null.
 	 *
-	 * TODO: This is a read-only getter.
-	 * We haven't agreed how to represent that yet.
+	 * @default []
 	 */
-	value?: T;
+	files?: readonly File[];
 }
 export interface FieldErrorProps {
 	/**
@@ -1636,6 +1746,82 @@ interface CheckboxProps$1 extends GlobalProps, BaseCheckableProps, FieldErrorPro
 	 */
 	required?: boolean;
 }
+interface ChoiceProps$1 extends GlobalProps, BaseOptionProps {
+	/**
+	 * Content to use as the choice label.
+	 *
+	 * @implementation (StringChildren) The label is produced by extracting and
+	 * concatenating the text nodes from the provided content; any markup or
+	 * element structure is ignored.
+	 *
+	 * @implementation (ComponentChildren) Behaves as a slot: any elements passed
+	 * are rendered as the label content (subject to surface constraints); there
+	 * is no coercion to a string.
+	 */
+	children?: ComponentChildren | StringChildren;
+	/**
+	 * Additional text to provide context or guidance for the input.
+	 *
+	 * This text is displayed along with the input and its label
+	 * to offer more information or instructions to the user.
+	 *
+	 * @implementation this content should be linked to the input with an `aria-describedby` attribute.
+	 */
+	details?: ComponentChildren;
+	/**
+	 * Set to `true` to associate a choice with the error passed to `ChoiceList`
+	 *
+	 * @default false
+	 */
+	error?: boolean;
+	/**
+	 * Secondary content for a choice.
+	 */
+	secondaryContent?: ComponentChildren;
+	/**
+	 * Content to display when the option is selected.
+	 *
+	 * This can be used to provide additional information or options related to the choice.
+	 */
+	selectedContent?: ComponentChildren;
+}
+interface ChoiceListProps$1 extends GlobalProps, Pick<BasicFieldProps, "label" | "labelAccessibilityVisibility" | "error">, MultipleInputProps, FieldDetailsProps {
+	/**
+	 * Whether multiple choices can be selected.
+	 *
+	 * @default false
+	 */
+	multiple?: boolean;
+	/**
+	 * The choices a user can select from.
+	 *
+	 * Accepts `Choice` components.
+	 */
+	children?: ComponentChildren;
+	/**
+	 * Disables the field, disallowing any interaction.
+	 *
+	 * `disabled` on any child choices is ignored when this is true.
+	 *
+	 * @default false
+	 */
+	disabled?: MultipleInputProps["disabled"];
+	/**
+	 * The variant of the choice grid.
+	 *
+	 * - `auto`: The variant is determined by the context.
+	 * - `list`: The choices are displayed in a list.
+	 * - `inline`: The choices are displayed on the inline axis.
+	 * - `block`: The choices are displayed on the block axis.
+	 * - `grid`: The choices are displayed in a grid.
+	 *
+	 * @implementation The `block`, `inline` and `grid` variants are more suitable for button looking choices, but it's at the
+	 * discretion of each surface.
+	 *
+	 * @default 'auto'
+	 */
+	variant?: "auto" | "list" | "inline" | "block" | "grid";
+}
 interface ClickableProps$1 extends GlobalProps, BaseBoxProps, BaseClickableProps {
 	/**
 	 * Disables the clickable, and indicates to assistive technology that the loading is in progress.
@@ -1688,50 +1874,225 @@ export interface AutocompleteProps<AutocompleteField extends AnyAutocompleteFiel
 	 * autofill, but you do not have any more semantic information on the intended
 	 * contents.
 	 *
-	 * When set to `off`, you are indicating that this field contains sensitive
-	 * information, or contents that are never saved, like one-time codes.
+	 * When set to `off`, you are indicating that this field contains sensitive
+	 * information, or contents that are never saved, like one-time codes.
+	 *
+	 * Alternatively, you can provide value which describes the
+	 * specific data you would like to be entered into this field during autofill.
+	 *
+	 * @see Learn more about the set of {@link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens|autocomplete values} supported in browsers.
+	 *
+	 * @default 'tel' for PhoneField
+	 * @default 'email' for EmailField
+	 * @default 'url' for URLField
+	 * @default 'on' for everything else
+	 */
+	autocomplete?: AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | "on" | "off";
+}
+/**
+ * The “section” scopes the autocomplete data that should be inserted
+ * to a specific area of the page.
+ *
+ * Commonly used when there are multiple fields with the same autocomplete needs
+ * in the same page. For example: 2 shipping address forms in the same page.
+ */
+export type AutocompleteSection = `section-${string}`;
+/**
+ * The contact information group the autocomplete data should be sourced from.
+ */
+export type AutocompleteGroup = "shipping" | "billing";
+/**
+ * The contact information subgroup the autocomplete data should be sourced from.
+ */
+export type AutocompleteAddressGroup = "fax" | "home" | "mobile" | "pager";
+export type AnyAutocompleteField = "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "country-name" | "country" | "current-password" | "email" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "language" | "name" | "new-password" | "nickname" | "one-time-code" | "organization-title" | "organization" | "photo" | "postal-code" | "sex" | "street-address" | "transaction-amount" | "transaction-currency" | "url" | "username" | "bday-day" | "bday-month" | "bday-year" | "bday" | "cc-additional-name" | "cc-expiry-month" | "cc-expiry-year" | "cc-expiry" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-csc" | "cc-type" | `${AutocompleteAddressGroup} email` | "impp" | `${AutocompleteAddressGroup} impp` | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local-prefix" | "tel-local-suffix" | "tel-local" | "tel-national" | `${AutocompleteAddressGroup} tel` | `${AutocompleteAddressGroup} tel-area-code` | `${AutocompleteAddressGroup} tel-country-code` | `${AutocompleteAddressGroup} tel-extension` | `${AutocompleteAddressGroup} tel-local-prefix` | `${AutocompleteAddressGroup} tel-local-suffix` | `${AutocompleteAddressGroup} tel-local` | `${AutocompleteAddressGroup} tel-national`;
+export type TextAutocompleteField = ExtractStrict<AnyAutocompleteField, "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "country-name" | "country" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "language" | "name" | "nickname" | "one-time-code" | "organization-title" | "organization" | "postal-code" | "sex" | "street-address" | "transaction-currency" | "username" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-type">;
+export type PhoneAutocompleteField = ExtractStrict<AnyAutocompleteField, "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local-prefix" | "tel-local-suffix" | "tel-local" | "tel-national" | `${AutocompleteAddressGroup} tel` | `${AutocompleteAddressGroup} tel-area-code` | `${AutocompleteAddressGroup} tel-country-code` | `${AutocompleteAddressGroup} tel-extension` | `${AutocompleteAddressGroup} tel-local-prefix` | `${AutocompleteAddressGroup} tel-local-suffix` | `${AutocompleteAddressGroup} tel-local` | `${AutocompleteAddressGroup} tel-national`>;
+interface PhoneFieldProps$1 extends GlobalProps, BaseTextFieldProps, Pick<FieldDecorationProps, "accessory">, AutocompleteProps<PhoneAutocompleteField> {
+	/**
+	 * The type of number to collect.
+	 *
+	 * Specific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.
+	 *
+	 * @default '' meaning no specific kind of phone number
+	 */
+	type?: "mobile" | "";
+}
+interface DatePickerProps$1 extends GlobalProps, InputProps, FocusEventProps {
+	/**
+	 * Default month to display in `YYYY-MM` format.
+	 *
+	 * This value is used until `view` is set, either directly or as a result of user interaction.
+	 *
+	 * Defaults to the current month in the user's locale.
+	 */
+	defaultView?: string;
+	/**
+	 * Displayed month in `YYYY-MM` format.
+	 *
+	 * `onViewChange` is called when this value changes.
+	 *
+	 * Defaults to `defaultView`.
+	 */
+	view?: string;
+	/**
+	 * Called whenever the month to display changes.
+	 *
+	 * @param view The new month to display in `YYYY-MM` format.
+	 */
+	onViewChange?: (view: string) => void;
+	/**
+	 * The type of selection the date picker allows.
+	 *
+	 * - `single` allows selecting a single date.
+	 * - `multiple` allows selecting multiple non-contiguous dates.
+	 * - `range` allows selecting a single range of dates.
+	 *
+	 * @default "single"
+	 */
+	type?: "single" | "multiple" | "range";
+	/**
+	 * Dates that can be selected.
+	 *
+	 * A comma-separated list of dates, date ranges. Whitespace is allowed after commas.
+	 *
+	 * The default `''` allows all dates.
+	 *
+	 * - Dates in `YYYY-MM-DD` format allow a single date.
+	 * - Dates in `YYYY-MM` format allow a whole month.
+	 * - Dates in `YYYY` format allow a whole year.
+	 * - Ranges are expressed as `start--end`.
+	 *     - Ranges are inclusive.
+	 *     - If either `start` or `end` is omitted, the range is unbounded in that direction.
+	 *     - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.
+	 *       So `2024--` is equivalent to `2024-01-01--`.
+	 *     - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.
+	 *       So `--2024` is equivalent to `--2024-12-31`.
+	 *     - Whitespace is allowed either side of `--`.
+	 *
+	 * @default ""
+	 *
+	 * @example
+	 * `2024-02--2025` // allow any date from February 2024 to the end of 2025
+	 * `2024-02--` // allow any date from February 2024 to the end of the month
+	 * `2024-05-09, 2024-05-11` // allow only the 9th and 11th of May 2024
+	 */
+	allow?: string;
+	/**
+	 * Dates that cannot be selected. These subtract from `allow`.
+	 *
+	 * A comma-separated list of dates, date ranges. Whitespace is allowed after commas.
+	 *
+	 * The default `''` has no effect on `allow`.
+	 *
+	 * - Dates in `YYYY-MM-DD` format disallow a single date.
+	 * - Dates in `YYYY-MM` format disallow a whole month.
+	 * - Dates in `YYYY` format disallow a whole year.
+	 * - Ranges are expressed as `start--end`.
+	 *     - Ranges are inclusive.
+	 *     - If either `start` or `end` is omitted, the range is unbounded in that direction.
+	 *     - If parts of the date are omitted for `start`, they are assumed to be the minimum possible value.
+	 *       So `2024--` is equivalent to `2024-01-01--`.
+	 *     - If parts of the date are omitted for `end`, they are assumed to be the maximum possible value.
+	 *       So `--2024` is equivalent to `--2024-12-31`.
+	 *     - Whitespace is allowed either side of `--`.
+	 *
+	 * @default ""
+	 *
+	 * @example
+	 * `--2024-02` // disallow any date before February 2024
+	 * `2024-05-09, 2024-05-11` // disallow the 9th and 11th of May 2024
+	 */
+	disallow?: string;
+	/**
+	 * Days of the week that can be selected. These intersect with the result of `allow` and `disallow`.
+	 *
+	 * A comma-separated list of days. Whitespace is allowed after commas.
+	 *
+	 * The default `''` has no effect on the result of `allow` and `disallow`.
+	 *
+	 * Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.
+	 *
+	 * @default ""
+	 *
+	 * @example
+	 * 'saturday, sunday' // allow only weekends within the result of `allow` and `disallow`.
+	 */
+	allowDays?: string;
+	/**
+	 * Days of the week that cannot be selected. This subtracts from `allowDays`, and intersects with the result of `allow` and `disallow`.
+	 *
+	 * A comma-separated list of days. Whitespace is allowed after commas.
+	 *
+	 * The default `''` has no effect on `allowDays`.
+	 *
+	 * Days are `sunday`, `monday`, `tuesday`, `wednesday`, `thursday`, `friday`, `saturday`.
+	 *
+	 * @default ""
+	 *
+	 * @example
+	 * 'saturday, sunday' // disallow weekends within the result of `allow` and `disallow`.
+	 */
+	disallowDays?: string;
+	/**
+	 * Default selected value.
+	 *
+	 * The default means no date is selected.
+	 *
+	 * If the provided value is invalid, no date is selected.
+	 *
+	 * - If `type="single"`, this is a date in `YYYY-MM-DD` format.
+	 * - If `type="multiple"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.
+	 * - If `type="range"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.
+	 *
+	 * @default ""
+	 */
+	defaultValue?: string;
+	/**
+	 * Current selected value.
+	 *
+	 * The default means no date is selected.
 	 *
-	 * Alternatively, you can provide value which describes the
-	 * specific data you would like to be entered into this field during autofill.
+	 * If the provided value is invalid, no date is selected.
 	 *
-	 * @see Learn more about the set of {@link https://html.spec.whatwg.org/multipage/form-control-infrastructure.html#autofill-detail-tokens|autocomplete values} supported in browsers.
+	 * Otherwise:
 	 *
-	 * @default 'tel' for PhoneField
-	 * @default 'email' for EmailField
-	 * @default 'url' for URLField
-	 * @default 'on' for everything else
+	 * - If `type="single"`, this is a date in `YYYY-MM-DD` format.
+	 * - If `type="multiple"`, this is a comma-separated list of dates in `YYYY-MM-DD` format.
+	 * - If `type="range"`, this is a range in `YYYY-MM-DD--YYYY-MM-DD` format. The range is inclusive.
+	 *
+	 * @default ""
 	 */
-	autocomplete?: AutocompleteField | `${AutocompleteSection} ${AutocompleteField}` | `${AutocompleteGroup} ${AutocompleteField}` | `${AutocompleteSection} ${AutocompleteGroup} ${AutocompleteField}` | "on" | "off";
+	value?: string;
+	/**
+	 * Callback when any date is selected. Will fire before `onChange`.
+	 */
+	onInput?: (event: Event) => void;
+	/**
+	 * Callback when the `value` is changed. For `type="single"` and `type="multiple"`, this is the same as `onInput`.
+	 *      For `type="range"`, this is only called when the range is completed by selecting the end date of the range.
+	 */
+	onChange?: (event: Event) => void;
 }
-/**
- * The “section” scopes the autocomplete data that should be inserted
- * to a specific area of the page.
- *
- * Commonly used when there are multiple fields with the same autocomplete needs
- * in the same page. For example: 2 shipping address forms in the same page.
- */
-export type AutocompleteSection = `section-${string}`;
-/**
- * The contact information group the autocomplete data should be sourced from.
- */
-export type AutocompleteGroup = "shipping" | "billing";
-/**
- * The contact information subgroup the autocomplete data should be sourced from.
- */
-export type AutocompleteAddressGroup = "fax" | "home" | "mobile" | "pager";
-export type AnyAutocompleteField = "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "country-name" | "country" | "current-password" | "email" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "language" | "name" | "new-password" | "nickname" | "one-time-code" | "organization-title" | "organization" | "photo" | "postal-code" | "sex" | "street-address" | "transaction-amount" | "transaction-currency" | "url" | "username" | "bday-day" | "bday-month" | "bday-year" | "bday" | "cc-additional-name" | "cc-expiry-month" | "cc-expiry-year" | "cc-expiry" | "cc-family-name" | "cc-given-name" | "cc-name" | "cc-number" | "cc-csc" | "cc-type" | `${AutocompleteAddressGroup} email` | "impp" | `${AutocompleteAddressGroup} impp` | "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local-prefix" | "tel-local-suffix" | "tel-local" | "tel-national" | `${AutocompleteAddressGroup} tel` | `${AutocompleteAddressGroup} tel-area-code` | `${AutocompleteAddressGroup} tel-country-code` | `${AutocompleteAddressGroup} tel-extension` | `${AutocompleteAddressGroup} tel-local-prefix` | `${AutocompleteAddressGroup} tel-local-suffix` | `${AutocompleteAddressGroup} tel-local` | `${AutocompleteAddressGroup} tel-national`;
-export type TextAutocompleteField = ExtractStrict<AnyAutocompleteField, "additional-name" | "address-level1" | "address-level2" | "address-level3" | "address-level4" | "address-line1" | "address-line2" | "address-line3" | "country-name" | "country" | "family-name" | "given-name" | "honorific-prefix" | "honorific-suffix" | "language" | "name" | "nickname" | "one-time-code" | "organization-title" | "organization" | "postal-code" | "sex" | "street-address" | "transaction-currency" | "username" | "cc-name" | "cc-given-name" | "cc-additional-name" | "cc-family-name" | "cc-type">;
-export type PhoneAutocompleteField = ExtractStrict<AnyAutocompleteField, "tel" | "tel-area-code" | "tel-country-code" | "tel-extension" | "tel-local-prefix" | "tel-local-suffix" | "tel-local" | "tel-national" | `${AutocompleteAddressGroup} tel` | `${AutocompleteAddressGroup} tel-area-code` | `${AutocompleteAddressGroup} tel-country-code` | `${AutocompleteAddressGroup} tel-extension` | `${AutocompleteAddressGroup} tel-local-prefix` | `${AutocompleteAddressGroup} tel-local-suffix` | `${AutocompleteAddressGroup} tel-local` | `${AutocompleteAddressGroup} tel-national`>;
-interface PhoneFieldProps$1 extends GlobalProps, BaseTextFieldProps, Pick<FieldDecorationProps, "accessory">, AutocompleteProps<PhoneAutocompleteField> {
+interface DateFieldProps$1 extends GlobalProps, BaseTextFieldProps, Pick<DatePickerProps$1, "view" | "defaultView" | "value" | "defaultValue" | "allow" | "disallow" | "allowDays" | "disallowDays" | "onViewChange">, AutocompleteProps<DateAutocompleteField> {
 	/**
-	 * The type of number to collect.
+	 * Callback when the field has an invalid date.
+	 * This callback will be called, if the date typed is invalid or disabled.
 	 *
-	 * Specific style may be applied to each type to provide extra guidance to users. Note that no extra validation is performed based on the type.
+	 * Dates that don’t exist or have formatting errors are considered invalid. Some examples of invalid dates are:
+	 * - 2021-02-31: February doesn’t have 31 days
+	 * - 2021-02-00: The day can’t be 00
 	 *
-	 * @default '' meaning no specific kind of phone number
+	 * Disallowed dates are considered invalid.
+	 *
+	 * It’s important to note that this callback will be called only when the user **finishes editing** the date,
+	 * and it’s called right after the `onChange` callback.
+	 * The field is **not** validated on every change to the input. Once the buyer has signalled that
+	 * they have finished editing the field (typically, by blurring the field), the field gets validated and the callback is run if the value is invalid.
 	 */
-	type?: "mobile" | "";
+	onInvalid?: (event: Event) => void;
 }
+export type DateAutocompleteField = ExtractStrict<AnyAutocompleteField, "bday" | "bday-day" | "bday-month" | "bday-year" | "cc-expiry" | "cc-expiry-month" | "cc-expiry-year">;
 interface DetailsProps$1 extends GlobalProps, ToggleEventProps {
 	/**
 	 * The content of the details.
@@ -1772,13 +2133,7 @@ interface DetailsProps$1 extends GlobalProps, ToggleEventProps {
 }
 interface DividerProps$1 extends GlobalProps {
 	/**
-	 * Specify the direction of the divider.
-	 *
-	 * An 'inline' divider separates blocks of content.
-	 * In a left-to-right or right-to-left writing mode, this would typically be a horizontal line.
-	 *
-	 * A 'block' divider separates items within the current line of content.
-	 * In a left-to-right or right-to-left writing mode, this would typically be a vertical line.
+	 * Specify the direction of the divider. This uses [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
 	 *
 	 * @default 'inline'
 	 */
@@ -1790,16 +2145,17 @@ interface DividerProps$1 extends GlobalProps {
 	 */
 	color?: ColorKeyword;
 }
-interface DropZoneProps$1 extends GlobalProps, FileInputProps<File[]>, BasicFieldProps {
+interface DropZoneProps$1 extends GlobalProps, FileInputProps, BasicFieldProps {
 	/**
-	 * A string representing the types of files that are accepted by the dropzone.
+	 * A string representing the types of files that are accepted by the drop zone.
 	 * This string is a comma-separated list of unique file type specifiers which can be one of the following:
 	 * - A file extension starting with a period (".") character (e.g. .jpg, .pdf, .doc)
 	 * - A valid MIME type string with no extensions
 	 *
-	 * If left empty, the dropzone will accept all files.
+	 * If omitted, all file types are accepted.
 	 *
 	 * @see https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/accept
+	 * @default ''
 	 */
 	accept?: string;
 	/**
@@ -1809,15 +2165,16 @@ interface DropZoneProps$1 extends GlobalProps, FileInputProps<File[]>, BasicFiel
 	 */
 	accessibilityLabel?: string;
 	/**
-	 * Defines if the user can select or drop multiple files at once.
+	 * Whether multiple files can be selected or dropped at once.
 	 *
 	 * @default false
 	 */
 	multiple?: boolean;
 	/**
-	 * Callback when rejected files are dropped. Files are rejected based on the `accept` prop.
+	 * Callback fired when rejected files are dropped.
+	 * Files are rejected based on the `accept` prop and are not added to `files`.
 	 */
-	onDropRejected?: (files: File[]) => void;
+	onDropRejected?: (event: Event) => void;
 }
 interface EmailFieldProps$1 extends GlobalProps, BaseTextFieldProps, MinMaxLengthProps, AutocompleteProps<EmailAutocompleteField> {
 }
@@ -1860,7 +2217,7 @@ export interface GapProps {
 	 *
 	 * @default 'none'
 	 */
-	gap?: MaybeTwoValuesShorthandProperty<SpacingKeyword>;
+	gap?: MaybeResponsive<MaybeTwoValuesShorthandProperty<SpacingKeyword>>;
 	/**
 	 * Adjust spacing between elements in the block axis.
 	 *
@@ -1868,7 +2225,7 @@ export interface GapProps {
 	 *
 	 * @default '' - meaning no override
 	 */
-	rowGap?: SpacingKeyword | "";
+	rowGap?: MaybeResponsive<SpacingKeyword | "">;
 	/**
 	 * Adjust spacing between elements in the inline axis.
 	 *
@@ -1876,7 +2233,7 @@ export interface GapProps {
 	 *
 	 * @default '' - meaning no override
 	 */
-	columnGap?: SpacingKeyword | "";
+	columnGap?: MaybeResponsive<SpacingKeyword | "">;
 }
 export type BaselinePosition = "baseline" | "first baseline" | "last baseline";
 export type ContentDistribution = "space-between" | "space-around" | "space-evenly" | "stretch";
@@ -1913,14 +2270,14 @@ interface GridProps$1 extends GlobalProps, BaseBoxPropsWithRole, GapProps {
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-columns
 	  @default 'none'
 	*/
-	gridTemplateColumns?: string;
+	gridTemplateColumns?: MaybeResponsive<string>;
 	/**
 	  Define rows and specify their size.
   
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/grid-template-rows
 	  @default 'none'
 	*/
-	gridTemplateRows?: string;
+	gridTemplateRows?: MaybeResponsive<string>;
 	/**
 	  Aligns the grid items along the inline (row) axis.
   
@@ -1929,7 +2286,7 @@ interface GridProps$1 extends GlobalProps, BaseBoxPropsWithRole, GapProps {
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-items
 	  @default '' - meaning no override
 	*/
-	justifyItems?: JustifyItemsKeyword | "";
+	justifyItems?: MaybeResponsive<JustifyItemsKeyword | "">;
 	/**
 	  Aligns the grid items along the block (column) axis.
   
@@ -1938,14 +2295,14 @@ interface GridProps$1 extends GlobalProps, BaseBoxPropsWithRole, GapProps {
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 	  @default '' - meaning no override
 	*/
-	alignItems?: AlignItemsKeyword | "";
+	alignItems?: MaybeResponsive<AlignItemsKeyword | "">;
 	/**
 	  A shorthand property for `justify-items` and `align-items`.
   
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/place-items
 	  @default 'normal normal'
 	*/
-	placeItems?: `${AlignItemsKeyword} ${JustifyItemsKeyword}` | AlignItemsKeyword;
+	placeItems?: MaybeResponsive<`${AlignItemsKeyword} ${JustifyItemsKeyword}` | AlignItemsKeyword>;
 	/**
 	  Aligns the grid along the inline (row) axis.
   
@@ -1954,7 +2311,7 @@ interface GridProps$1 extends GlobalProps, BaseBoxPropsWithRole, GapProps {
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
 	  @default '' - meaning no override
 	*/
-	justifyContent?: JustifyContentKeyword | "";
+	justifyContent?: MaybeResponsive<JustifyContentKeyword | "">;
 	/**
 	  Aligns the grid along the block (column) axis.
   
@@ -1963,14 +2320,14 @@ interface GridProps$1 extends GlobalProps, BaseBoxPropsWithRole, GapProps {
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
 	  @default '' - meaning no override
 	*/
-	alignContent?: AlignContentKeyword | "";
+	alignContent?: MaybeResponsive<AlignContentKeyword | "">;
 	/**
 	  A shorthand property for `justify-content` and `align-content`.
   
 	  @see https://developer.mozilla.org/en-US/docs/Web/CSS/place-content
 	  @default 'normal normal'
 	*/
-	placeContent?: `${AlignContentKeyword} ${JustifyContentKeyword}` | AlignContentKeyword;
+	placeContent?: MaybeResponsive<`${AlignContentKeyword} ${JustifyContentKeyword}` | AlignContentKeyword>;
 }
 interface GridItemProps$1 extends GlobalProps, BaseBoxPropsWithRole {
 	/**
@@ -2069,7 +2426,7 @@ interface HeadingProps$1 extends GlobalProps, AccessibilityVisibilityProps, Bloc
 	 */
 	accessibilityRole?: "heading" | ExtractStrict<AccessibilityRole, "presentation" | "none">;
 }
-interface IconProps$1 extends GlobalProps {
+interface IconProps$1 extends GlobalProps, Pick<InteractionProps, "interestFor"> {
 	/**
 	 * Sets the tone of the icon, based on the intention of the information being conveyed.
 	 *
@@ -2363,52 +2720,6 @@ interface MapMarkerProps$1 extends GlobalProps, InteractionProps, Pick<SizingPro
 	 */
 	onClick?: (event: Event) => void;
 }
-export interface BaseOverlayProps {
-	/**
-	 * Callback fired after the overlay is shown.
-	 */
-	onShow?: (event: Event) => void;
-	/**
-	 * Callback fired when the overlay is shown **after** any animations to show the overlay have finished.
-	 */
-	onAfterShow?: (event: Event) => void;
-	/**
-	 * Callback fired after the overlay is hidden.
-	 */
-	onHide?: (event: Event) => void;
-	/**
-	 * Callback fired when the overlay is hidden **after** any animations to hide the overlay have finished.
-	 */
-	onAfterHide?: (event: Event) => void;
-}
-/**
- * Shared interfaces for web component methods.
- *
- * Methods are required (not optional) because:
- * - Components implementing this interface must provide all methods
- * - Unlike props/attributes, methods are not rendered in HTML but are JavaScript APIs
- * - Consumers expect these methods to be consistently available on all instances
- */
-export interface BaseOverlayMethods {
-	/**
-	 * Method to show an overlay.
-	 *
-	 * @implementation This is a method to be called on the element and not a callback and should hence be camelCase
-	 */
-	showOverlay: () => void;
-	/**
-	 * Method to hide an overlay.
-	 *
-	 * @implementation This is a method to be called on the element and not a callback and should hence be camelCase
-	 */
-	hideOverlay: () => void;
-	/**
-	 * Method to toggle the visiblity of an overlay.
-	 *
-	 * @implementation This is a method to be called on the element and not a callback and should hence be camelCase
-	 */
-	toggleOverlay: () => void;
-}
 interface ModalProps$1 extends GlobalProps, BaseOverlayProps, BaseOverlayMethods, ActionSlots {
 	/**
 	 * A label that describes the purpose of the modal. When set,
@@ -2448,6 +2759,9 @@ interface ModalProps$1 extends GlobalProps, BaseOverlayProps, BaseOverlayMethods
 	 */
 	children?: ComponentChildren;
 }
+interface MoneyFieldProps$1 extends GlobalProps, BaseTextFieldProps, NumberConstraintsProps, AutocompleteProps<MoneyAutocompleteField> {
+}
+export type MoneyAutocompleteField = ExtractStrict<AnyAutocompleteField, "transaction-amount">;
 interface NumberFieldProps$1 extends GlobalProps, BaseTextFieldProps, AutocompleteProps<NumberAutocompleteField>, NumberConstraintsProps, FieldDecorationProps {
 	/**
 	 * Sets the virtual keyboard.
@@ -2524,6 +2838,22 @@ interface PopoverProps$1 extends GlobalProps, BaseOverlayProps, BaseOverlayMetho
 	 */
 	children?: ComponentChildren;
 }
+interface PressButtonProps$1 extends GlobalProps, Pick<ButtonProps$1, "accessibilityLabel" | "children" | "icon" | "inlineSize" | "lang" | "tone" | "variant" | "disabled" | "loading" | "onClick" | "onBlur" | "onFocus"> {
+	/**
+	 * Whether the button is pressed.
+	 *
+	 * @default false
+	 */
+	pressed?: boolean;
+	/**
+	 * Whether the button is pressed by default.
+	 *
+	 * @default false
+	 *
+	 * @implementation `defaultPressed` reflects to the `pressed` attribute.
+	 */
+	defaultPressed?: boolean;
+}
 interface ProductThumbnailProps$1 extends GlobalProps, BaseImageProps {
 	/**
 	 * Decorates the product thumbnail with the quantity of the product.
@@ -2633,6 +2963,26 @@ interface QRCodeProps$1 extends GlobalProps {
 	 */
 	logo?: string;
 }
+interface QueryContainerProps$1 extends GlobalProps {
+	/**
+	 * The content of the container.
+	 */
+	children?: ComponentChildren;
+	/**
+	 * The name of the container, which can be used in your container queries to target this container specifically.
+	 *
+	 * We place the container name of `s-default` on every container. Because of this, it is not required to add a `containerName` identifier in your queries. For example, a `@container (inline-size <= 300px) none, auto` query is equivalent to `@container s-default (inline-size <= 300px) none, auto`.
+	 *
+	 * Any value set in `containerName` will be set alongside alongside `s-default`. For example, `containerName="my-container-name"` will result in a value of `s-default my-container-name` set on the `container-name` CSS property of the rendered HTML.
+	 *
+	 * @default ''
+	 *
+	 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/container-name
+	 *
+	 * @implementation You must always have a CSS `container-name` of `s-default` for this component.
+	 */
+	containerName?: string;
+}
 export type OverflowKeyword = "auto" | "hidden";
 interface ScrollBoxProps$1 extends GlobalProps, Omit<BaseBoxPropsWithRole, "overflow"> {
 	/**
@@ -2771,34 +3121,34 @@ interface StackProps$1 extends GlobalProps, BaseBoxPropsWithRole, GapProps {
 	 */
 	children?: ComponentChildren;
 	/**
-	 * Sets how the children are placed within the Stack.
+	 * Sets how the children are placed within the Stack. This uses [logical properties](https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_logical_properties_and_values).
 	 *
 	 * @default 'block'
 	 *
 	 * @implementation the content will wrap if the direction is 'inline', and not wrap if the direction is 'block'
 	 */
-	direction?: "block" | "inline";
+	direction?: MaybeResponsive<"block" | "inline">;
 	/**
 	 * Aligns the Stack along the main axis.
 	 *
 	 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/justify-content
 	 * @default 'normal'
 	 */
-	justifyContent?: JustifyContentKeyword;
+	justifyContent?: MaybeResponsive<JustifyContentKeyword>;
 	/**
 	 * Aligns the Stack's children along the cross axis.
 	 *
 	 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-items
 	 * @default 'normal'
 	 */
-	alignItems?: AlignItemsKeyword;
+	alignItems?: MaybeResponsive<AlignItemsKeyword>;
 	/**
 	 * Aligns the Stack along the cross axis.
 	 *
 	 * @see https://developer.mozilla.org/en-US/docs/Web/CSS/align-content
 	 * @default 'normal'
 	 */
-	alignContent?: AlignContentKeyword;
+	alignContent?: MaybeResponsive<AlignContentKeyword>;
 }
 interface SummaryProps$1 extends GlobalProps {
 	/**
@@ -2818,7 +3168,7 @@ interface SummaryProps$1 extends GlobalProps {
 }
 interface SwitchProps$1 extends GlobalProps, BaseCheckableProps, BasicFieldProps, FieldDetailsProps, FieldErrorProps {
 }
-interface TextProps$1 extends GlobalProps, AccessibilityVisibilityProps, BaseTypographyProps, DisplayProps {
+interface TextProps$1 extends GlobalProps, AccessibilityVisibilityProps, BaseTypographyProps, DisplayProps, Pick<InteractionProps, "interestFor"> {
 	/**
 	 * The content of the Text.
 	 */
@@ -2826,7 +3176,7 @@ interface TextProps$1 extends GlobalProps, AccessibilityVisibilityProps, BaseTyp
 	/**
 	 * Provide semantic meaning and default styling to the text.
 	 *
-	 * Other presentation properties on `<s-text>` override the default styling.
+	 * Other presentation properties on Text override the default styling.
 	 *
 	 * @default 'generic'
 	 */
@@ -2940,6 +3290,12 @@ interface TimeProps$1 extends GlobalProps {
 	 */
 	dateTime?: string;
 }
+interface TooltipProps$1 extends GlobalProps {
+	/**
+	 * The content of the Tooltip.
+	 */
+	children?: ComponentChildren;
+}
 interface UnorderedListProps$1 extends GlobalProps {
 }
 export interface URLFieldProps extends GlobalProps, BaseTextFieldProps, MinMaxLengthProps, AutocompleteProps<URLAutocompleteField> {
@@ -2948,7 +3304,6 @@ export type URLAutocompleteField = ExtractStrict<AnyAutocompleteField, "url" | "
 
 
 
-import { ReactNode } from 'react';
 
 type ReducedAlignContentKeyword = Extract<AlignContentKeyword, 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>;
 type ReducedAlignItemsKeyword = Extract<AlignItemsKeyword, 'normal' | 'stretch' | 'baseline' | 'center' | 'start' | 'end'>;
@@ -2971,14 +3326,9 @@ interface BaseElementProps<TClass = HTMLElement> {
 interface BaseElementPropsWithChildren<TClass = HTMLElement> extends BaseElementProps<TClass> {
     children?: preact.ComponentChildren;
 }
-/**
- * The list of available icon types.
- *
- * @see https://github.com/Shopify/ui-api-design/blob/main/packages/ui-api-design/src/components/Icon/Icon.ts#L10
- */
-type ReducedIconTypes = Extract<IconType, 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'filter' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'image' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'map' | 'menu-horizontal' | 'menu-vertical' | 'menu' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'reset' | 'return' | 'savings' | 'search' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x'>;
+type ReducedIconTypes = 'alert-circle' | 'alert-triangle-filled' | 'alert-triangle' | 'arrow-down' | 'arrow-left' | 'arrow-right' | 'arrow-up-right' | 'arrow-up' | 'bag' | 'bullet' | 'calendar' | 'camera' | 'caret-down' | 'cart' | 'cash-dollar' | 'categories' | 'check-circle' | 'check' | 'chevron-down' | 'chevron-left' | 'chevron-right' | 'chevron-up' | 'circle' | 'clipboard' | 'clock' | 'credit-card' | 'delete' | 'delivered' | 'delivery' | 'disabled' | 'discount' | 'edit' | 'email' | 'empty' | 'external' | 'filter' | 'geolocation' | 'gift-card' | 'globe' | 'grid' | 'image' | 'info-filled' | 'info' | 'list-bulleted' | 'location' | 'lock' | 'map' | 'menu-horizontal' | 'menu-vertical' | 'menu' | 'minus' | 'mobile' | 'note' | 'order' | 'organization' | 'plus' | 'profile' | 'question-circle-filled' | 'question-circle' | 'reorder' | 'reset' | 'return' | 'savings' | 'search' | 'settings' | 'star-filled' | 'star-half' | 'star' | 'store' | 'truck' | 'upload' | 'x-circle-filled' | 'x-circle' | 'x';
 
-declare const tagName$M = "s-abbreviation";
+declare const tagName$S = "s-abbreviation";
 interface AbbreviationProps extends Pick<AbbreviationProps$1, 'title' | 'id'> {
 }
 interface AbbreviationElement extends AbbreviationProps, Omit<HTMLElement, 'id' | 'title'> {
@@ -2990,13 +3340,13 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$M]: AbbreviationProps & BaseElementPropsWithChildren<AbbreviationElement>;
+            [tagName$S]: AbbreviationProps & BaseElementPropsWithChildren<AbbreviationElement>;
         }
     }
 }
 
-declare const tagName$L = "s-badge";
-interface BadgeProps extends Pick<BadgeProps$1, 'id' | 'tone' | 'iconPosition'> {
+declare const tagName$R = "s-badge";
+interface BadgeProps extends Pick<BadgeProps$1, 'color' | 'icon' | 'iconPosition' | 'id' | 'size' | 'tone'> {
     size?: Extract<BadgeProps$1['size'], 'small' | 'small-100' | 'base'>;
     tone?: Extract<BadgeProps$1['tone'], 'auto' | 'neutral' | 'critical'>;
     color?: Extract<BadgeProps$1['color'], 'base' | 'subdued'>;
@@ -3006,18 +3356,18 @@ interface BadgeElement extends BadgeProps, Omit<HTMLElement, 'id'> {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$L]: BadgeElement;
+        [tagName$R]: BadgeElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$L]: BadgeProps & BaseElementPropsWithChildren<BadgeElement>;
+            [tagName$R]: BadgeProps & BaseElementPropsWithChildren<BadgeElement>;
         }
     }
 }
 
-declare const tagName$K = "s-banner";
+declare const tagName$Q = "s-banner";
 interface BannerElementProps extends Pick<BannerProps$1, 'collapsible' | 'dismissible' | 'heading' | 'hidden' | 'id' | 'tone'> {
     tone?: Extract<BannerProps$1['tone'], 'auto' | 'info' | 'success' | 'warning' | 'critical'>;
 }
@@ -3036,12 +3386,12 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$K]: BannerProps & BaseElementPropsWithChildren<BannerElement>;
+            [tagName$Q]: BannerProps & BaseElementPropsWithChildren<BannerElement>;
         }
     }
 }
 
-declare const tagName$J = "s-box";
+declare const tagName$P = "s-box";
 interface BoxProps extends Pick<BoxProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityVisibility' | 'background' | 'blockSize' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'display' | 'id' | 'inlineSize' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart'> {
     background?: Extract<BoxProps$1['background'], 'transparent' | 'subdued' | 'base'>;
     border?: BorderShorthand;
@@ -3057,13 +3407,13 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$J]: BoxProps & BaseElementPropsWithChildren<BoxElement>;
+            [tagName$P]: BoxProps & BaseElementPropsWithChildren<BoxElement>;
         }
     }
 }
 
-declare const tagName$I = "s-button";
-interface ButtonElementProps extends Pick<ButtonProps$1, 'accessibilityLabel' | 'command' | 'commandFor' | 'disabled' | 'href' | 'id' | 'inlineSize' | 'loading' | 'target' | 'tone' | 'type' | 'variant'> {
+declare const tagName$O = "s-button";
+interface ButtonElementProps extends Pick<ButtonProps$1, 'accessibilityLabel' | 'command' | 'commandFor' | 'disabled' | 'href' | 'id' | 'inlineSize' | 'interestFor' | 'loading' | 'target' | 'tone' | 'type' | 'variant'> {
     target?: Extract<ButtonProps$1['target'], 'auto' | '_blank'>;
     tone?: Extract<ButtonProps$1['tone'], 'auto' | 'neutral' | 'critical'>;
     type?: Extract<ButtonProps$1['type'], 'submit' | 'button'>;
@@ -3083,12 +3433,12 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$I]: ButtonProps & BaseElementPropsWithChildren<ButtonElement>;
+            [tagName$O]: ButtonProps & BaseElementPropsWithChildren<ButtonElement>;
         }
     }
 }
 
-declare const tagName$H = "s-checkbox";
+declare const tagName$N = "s-checkbox";
 interface CheckboxElementProps extends Pick<CheckboxProps$1, 'accessibilityLabel' | 'checked' | 'command' | 'commandFor' | 'defaultChecked' | 'disabled' | 'error' | 'id' | 'label' | 'name' | 'required' | 'value'> {
     command?: Extract<CheckboxProps$1['command'], '--auto' | '--show' | '--hide' | '--toggle'>;
 }
@@ -3101,19 +3451,25 @@ interface CheckboxProps extends CheckboxElementProps, CheckboxEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$H]: CheckboxElement;
+        [tagName$N]: CheckboxElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$H]: CheckboxProps & BaseElementProps<CheckboxElement>;
+            [tagName$N]: CheckboxProps & BaseElementProps<CheckboxElement>;
         }
     }
 }
 
-declare const tagName$G = "s-clickable";
-interface ClickableElementProps extends Pick<ClickableProps$1, 'accessibilityLabel' | 'accessibilityVisibility' | 'background' | 'blockSize' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'command' | 'commandFor' | 'disabled' | 'display' | 'href' | 'id' | 'inlineSize' | 'lang' | 'loading' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'target' | 'type'> {
+interface ChoiceProps extends Pick<ChoiceProps$1, 'accessibilityLabel' | 'defaultSelected' | 'details' | 'disabled' | 'id' | 'secondaryContent' | 'selected' | 'selectedContent' | 'error' | 'value'> {
+}
+
+interface ChoiceListProps extends Pick<ChoiceListProps$1, 'disabled' | 'error' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'multiple' | 'name' | 'onChange' | 'values' | 'variant'> {
+}
+
+declare const tagName$M = "s-clickable";
+interface ClickableElementProps extends Pick<ClickableProps$1, 'accessibilityLabel' | 'accessibilityVisibility' | 'background' | 'blockSize' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'command' | 'commandFor' | 'disabled' | 'display' | 'href' | 'id' | 'inlineSize' | 'interestFor' | 'lang' | 'loading' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'target' | 'type'> {
     background?: Extract<ClickableProps$1['background'], 'transparent' | 'subdued' | 'base'>;
     border?: BorderShorthand;
     borderWidth?: MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | '';
@@ -3132,18 +3488,18 @@ interface ClickableProps extends ClickableElementProps, ClickableEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$G]: ClickableElement;
+        [tagName$M]: ClickableElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$G]: ClickableProps & BaseElementPropsWithChildren<ClickableElement>;
+            [tagName$M]: ClickableProps & BaseElementPropsWithChildren<ClickableElement>;
         }
     }
 }
 
-declare const tagName$F = "s-clipboard-item";
+declare const tagName$L = "s-clipboard-item";
 interface ClipboardItemElementProps extends Pick<ClipboardItemProps$1, 'id' | 'text'> {
 }
 interface ClipboardItemEvents extends Pick<ClipboardItemProps$1, 'onCopy' | 'onCopyError'> {
@@ -3161,60 +3517,117 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$F]: ClipboardItemProps & BaseElementProps<ClipboardItemElement>;
+            [tagName$L]: ClipboardItemProps & BaseElementProps<ClipboardItemElement>;
+        }
+    }
+}
+
+declare const tagName$K = "s-date-field";
+interface DateFieldElementProps extends Pick<DateFieldProps$1, 'allow' | 'allowDays' | 'autocomplete' | 'defaultValue' | 'defaultView' | 'disabled' | 'disallow' | 'disallowDays' | 'error' | 'id' | 'label' | 'name' | 'placeholder' | 'readOnly' | 'required' | 'value' | 'view'> {
+}
+interface DateFieldEvents extends Pick<DateFieldProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'onInvalid' | 'onViewChange'> {
+}
+interface DateFieldElement extends DateFieldElementProps, Omit<DateFieldEvents, 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'onInvalid' | 'onViewChange'>, Omit<HTMLElement, 'id' | 'inputMode' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'oninvalid' | 'prefix'> {
+    onblur: DateFieldEvents['onBlur'];
+    onchange: DateFieldEvents['onChange'];
+    onfocus: DateFieldEvents['onFocus'];
+    oninput: DateFieldEvents['onInput'];
+    oninvalid: DateFieldEvents['onInvalid'];
+    onviewchange: DateFieldEvents['onViewChange'];
+}
+interface DateFieldProps extends DateFieldElementProps, DateFieldEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$K]: DateFieldElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$K]: DateFieldProps & BaseElementProps<DateFieldElement>;
+        }
+    }
+}
+
+declare const tagName$J = "s-date-picker";
+interface DatePickerElementProps extends Pick<DatePickerProps$1, 'allow' | 'allowDays' | 'defaultValue' | 'defaultView' | 'disabled' | 'disallow' | 'disallowDays' | 'id' | 'name' | 'type' | 'value' | 'view'> {
+}
+interface DatePickerEvents extends Pick<DatePickerProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'onViewChange'> {
+}
+interface DatePickerElement extends DatePickerElementProps, Omit<DatePickerEvents, 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'onViewChange'>, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput'> {
+    onblur: DatePickerEvents['onBlur'];
+    onchange: DatePickerEvents['onChange'];
+    onfocus: DatePickerEvents['onFocus'];
+    oninput: DatePickerEvents['onInput'];
+    onviewchange: DatePickerEvents['onViewChange'];
+}
+interface DatePickerProps extends DatePickerElementProps, DatePickerEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$J]: DatePickerElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$J]: DatePickerProps & BaseElementProps<DatePickerElement>;
         }
     }
 }
 
-declare const tagName$E = "s-details";
-interface DetailsElementProps extends Pick<DetailsProps$1, 'defaultOpen' | 'open' | 'id' | 'toggleTransition'> {
+declare const tagName$I = "s-details";
+interface DetailsElementProps extends Pick<DetailsProps$1, 'defaultOpen' | 'id' | 'open' | 'toggleTransition'> {
 }
-interface DetailsEvents extends Pick<DetailsProps$1, 'onToggle'> {
+interface DetailsEvents extends Pick<DetailsProps$1, 'onToggle' | 'onAfterToggle'> {
 }
 interface DetailsElement extends Omit<HTMLElement, 'ontoggle' | 'id'> {
     ontoggle: DetailsEvents['onToggle'];
+    onaftertoggle: DetailsEvents['onAfterToggle'];
 }
 interface DetailsProps extends DetailsElementProps, DetailsEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$E]: DetailsElement;
+        [tagName$I]: DetailsElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$E]: DetailsProps & BaseElementPropsWithChildren<DetailsElement>;
+            [tagName$I]: DetailsProps & BaseElementPropsWithChildren<DetailsElement>;
         }
     }
 }
 
-declare const tagName$D = "s-divider";
-interface DividerProps extends DividerProps$1 {
+declare const tagName$H = "s-divider";
+interface DividerProps extends Pick<DividerProps$1, 'direction' | 'id'> {
 }
 interface DividerElement extends DividerProps, Omit<HTMLElement, 'id'> {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$D]: DividerElement;
+        [tagName$H]: DividerElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$D]: DividerProps$1;
+            [tagName$H]: DividerProps & BaseElementPropsWithChildren<DividerElement>;
         }
     }
 }
 
-declare const tagName$C = "s-drop-zone";
-interface DropZoneElementProps extends Pick<DropZoneProps$1, 'accept' | 'accessibilityLabel' | 'disabled' | 'error' | 'id' | 'label' | 'multiple' | 'name' | 'required'> {
+declare const tagName$G = "s-drop-zone";
+interface DropZoneElementProps extends Pick<DropZoneProps$1, 'accept' | 'accessibilityLabel' | 'disabled' | 'error' | 'id' | 'label' | 'multiple' | 'name' | 'required' | 'value'> {
 }
-interface DropZoneEvents extends Pick<DropZoneProps$1, 'onDropRejected' | 'onInput'> {
+interface DropZoneEvents extends Pick<DropZoneProps$1, 'onDropRejected' | 'onInput' | 'onChange'> {
 }
-interface DropZoneElement extends DropZoneElementProps, Omit<HTMLElement, 'id' | 'oninput'> {
+interface DropZoneElement extends DropZoneElementProps, Omit<HTMLElement, 'id' | 'oninput' | 'onchange'> {
     ondroprejected: DropZoneEvents['onDropRejected'];
     oninput: DropZoneEvents['onInput'];
+    onchange: DropZoneEvents['onChange'];
 }
 interface DropZoneProps extends DropZoneElementProps, DropZoneEvents {
 }
@@ -3225,12 +3638,12 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$C]: DropZoneProps & BaseElementProps<DropZoneElement>;
+            [tagName$G]: DropZoneProps & BaseElementProps<DropZoneElement>;
         }
     }
 }
 
-declare const tagName$B = "s-email-field";
+declare const tagName$F = "s-email-field";
 interface EmailFieldElementProps extends Pick<EmailFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'maxLength' | 'minLength' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'name' | 'readOnly' | 'required' | 'value'> {
     /**
      * @deprecated Use `label` instead.
@@ -3250,18 +3663,18 @@ interface EmailFieldProps extends EmailFieldElementProps, EmailFieldEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$B]: EmailFieldElement;
+        [tagName$F]: EmailFieldElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$B]: EmailFieldProps & BaseElementProps<EmailFieldElement>;
+            [tagName$F]: EmailFieldProps & BaseElementProps<EmailFieldElement>;
         }
     }
 }
 
-declare const tagName$A = "s-form";
+declare const tagName$E = "s-form";
 interface FormElementProps extends Pick<FormProps$1, 'disabled' | 'id'> {
 }
 interface FormEvents extends Pick<FormProps$1, 'onSubmit'> {
@@ -3282,12 +3695,12 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$A]: FormProps & BaseElementPropsWithChildren<FormElement>;
+            [tagName$E]: FormProps & BaseElementPropsWithChildren<FormElement>;
         }
     }
 }
 
-declare const tagName$z = "s-grid-item";
+declare const tagName$D = "s-grid-item";
 interface GridItemProps extends Pick<GridItemProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityVisibility' | 'background' | 'blockSize' | 'border' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'display' | 'gridColumn' | 'gridRow' | 'id' | 'inlineSize' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart'> {
     background?: Extract<GridItemProps$1['background'], 'transparent' | 'subdued' | 'base'>;
     border?: BorderShorthand;
@@ -3299,47 +3712,47 @@ interface GridItemElement extends GridItemProps, Omit<HTMLElement, 'id'> {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$z]: GridItemElement;
+        [tagName$D]: GridItemElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$z]: GridItemProps & BaseElementPropsWithChildren<GridItemElement>;
+            [tagName$D]: GridItemProps & BaseElementPropsWithChildren<GridItemElement>;
         }
     }
 }
 
-declare const tagName$y = "s-grid";
+declare const tagName$C = "s-grid";
 interface GridProps extends Pick<GridProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityVisibility' | 'alignContent' | 'alignItems' | 'background' | 'blockSize' | 'border' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'columnGap' | 'display' | 'gap' | 'gridTemplateColumns' | 'gridTemplateRows' | 'id' | 'inlineSize' | 'justifyContent' | 'justifyItems' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'placeContent' | 'placeItems' | 'rowGap'> {
-    alignContent?: ReducedAlignContentKeyword | '';
-    alignItems?: ReducedAlignItemsKeyword | '';
+    alignContent?: MaybeResponsive<ReducedAlignContentKeyword | ''>;
+    alignItems?: MaybeResponsive<ReducedAlignItemsKeyword | ''>;
     background?: Extract<GridProps$1['background'], 'transparent' | 'subdued' | 'base'>;
     border?: BorderShorthand;
     borderColor?: ReducedColorKeyword | '';
     borderWidth?: MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | '';
     borderRadius?: MaybeAllValuesShorthandProperty<Extract<GridProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>;
-    justifyContent?: ReducedJustifyContentKeyword | '';
-    justifyItems?: ReducedJustifyItemsKeyword | '';
-    placeContent?: `${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword;
-    placeItems?: `${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword;
+    justifyContent?: MaybeResponsive<ReducedJustifyContentKeyword | ''>;
+    justifyItems?: MaybeResponsive<ReducedJustifyItemsKeyword | ''>;
+    placeContent?: MaybeResponsive<`${ReducedAlignContentKeyword} ${ReducedJustifyContentKeyword}` | ReducedAlignContentKeyword>;
+    placeItems?: MaybeResponsive<`${ReducedAlignItemsKeyword} ${ReducedJustifyItemsKeyword}` | ReducedAlignItemsKeyword>;
 }
 interface GridElement extends GridProps, Omit<HTMLElement, 'id'> {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$y]: GridElement;
+        [tagName$C]: GridElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$y]: GridProps & BaseElementPropsWithChildren<GridElement>;
+            [tagName$C]: GridProps & BaseElementPropsWithChildren<GridElement>;
         }
     }
 }
 
-declare const tagName$x = "s-heading";
+declare const tagName$B = "s-heading";
 interface HeadingProps extends Pick<HeadingProps$1, 'accessibilityRole' | 'id'> {
 }
 interface HeadingElement extends HeadingProps, Omit<HTMLElement, 'id'> {
@@ -3351,12 +3764,12 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$x]: HeadingProps & BaseElementPropsWithChildren<HeadingElement>;
+            [tagName$B]: HeadingProps & BaseElementPropsWithChildren<HeadingElement>;
         }
     }
 }
 
-declare const tagName$w = "s-icon";
+declare const tagName$A = "s-icon";
 interface IconProps extends Pick<IconProps$1, 'id' | 'size' | 'tone' | 'type'> {
     tone?: Extract<IconProps$1['tone'], 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'custom'>;
     size?: Extract<IconProps$1['size'], 'small-200' | 'small-100' | 'small' | 'base' | 'large' | 'large-100'>;
@@ -3371,12 +3784,12 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$w]: IconProps & BaseElementProps<IconElement>;
+            [tagName$A]: IconProps & BaseElementProps<IconElement>;
         }
     }
 }
 
-declare const tagName$v = "s-image";
+declare const tagName$z = "s-image";
 interface ImageProps extends Pick<ImageProps$1, 'accessibilityRole' | 'alt' | 'aspectRatio' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'id' | 'inlineSize' | 'loading' | 'objectFit' | 'sizes' | 'src' | 'srcSet'> {
     border?: BorderShorthand;
     borderWidth?: MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | '';
@@ -3391,13 +3804,13 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$v]: ImageProps & BaseElementProps<ImageElement>;
+            [tagName$z]: ImageProps & BaseElementProps<ImageElement>;
         }
     }
 }
 
-declare const tagName$u = "s-link";
-interface LinkElementProps extends Pick<LinkProps$1, 'accessibilityLabel' | 'command' | 'commandFor' | 'href' | 'id' | 'lang' | 'target' | 'tone'> {
+declare const tagName$y = "s-link";
+interface LinkElementProps extends Pick<LinkProps$1, 'accessibilityLabel' | 'command' | 'commandFor' | 'href' | 'id' | 'interestFor' | 'lang' | 'target' | 'tone'> {
     target?: Extract<LinkProps$1['target'], 'auto' | '_blank'>;
     tone?: Extract<LinkProps$1['tone'], 'auto' | 'neutral'>;
 }
@@ -3415,12 +3828,12 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$u]: LinkProps & BaseElementPropsWithChildren<LinkElement>;
+            [tagName$y]: LinkProps & BaseElementPropsWithChildren<LinkElement>;
         }
     }
 }
 
-declare const tagName$t = "s-list-item";
+declare const tagName$x = "s-list-item";
 interface ListItemProps extends Pick<ListItemProps$1, 'id'> {
 }
 interface ListItemElement extends ListItemProps, Omit<HTMLElement, 'id'> {
@@ -3432,44 +3845,36 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$t]: ListItemProps & BaseElementPropsWithChildren<ListItemElement>;
+            [tagName$x]: ListItemProps & BaseElementPropsWithChildren<ListItemElement>;
         }
     }
 }
 
-declare const tagName$s = "s-map-marker";
+declare const tagName$w = "s-map-marker";
 interface MapMarkerElementProps extends Pick<MapMarkerProps$1, 'accessibilityLabel' | 'blockSize' | 'command' | 'commandFor' | 'clusterable' | 'inlineSize' | 'latitude' | 'longitude'> {
     command?: Extract<MapMarkerProps$1['command'], '--auto' | '--show' | '--hide' | '--toggle'>;
 }
 interface MapMarkerEvents extends Pick<MapMarkerProps$1, 'onClick'> {
 }
-interface MapMarkerSlots {
-    /**
-     * The graphic to use as the marker.
-     *
-     * If unset, it will default to the provider’s default marker.
-     */
-    graphic?: ReactNode;
-}
-interface MapMarkerElement extends MapMarkerElementProps, MapMarkerSlots, Omit<HTMLElement, 'id' | 'onclick'> {
+interface MapMarkerElement extends MapMarkerElementProps, Omit<HTMLElement, 'id' | 'onclick'> {
     onclick: MapMarkerEvents['onClick'];
 }
 interface MapMarkerProps extends MapMarkerElementProps, MapMarkerEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$s]: MapMarkerElement;
+        [tagName$w]: MapMarkerElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$s]: MapMarkerProps & BaseElementProps<MapMarkerElement>;
+            [tagName$w]: MapMarkerProps & BaseElementPropsWithChildren<MapMarkerElement>;
         }
     }
 }
 
-declare const tagName$r = "s-map";
+declare const tagName$v = "s-map";
 interface MapElementProps extends Pick<MapProps$1, 'accessibilityLabel' | 'apiKey' | 'blockSize' | 'id' | 'inlineSize' | 'latitude' | 'longitude' | 'maxBlockSize' | 'maxInlineSize' | 'maxZoom' | 'minBlockSize' | 'minInlineSize' | 'minZoom' | 'zoom'> {
 }
 interface MapEvents extends Pick<MapProps$1, 'onBoundsChange' | 'onClick' | 'onDblClick' | 'onViewChange'> {
@@ -3484,54 +3889,74 @@ interface MapProps extends MapElementProps, MapEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$r]: MapElement;
+        [tagName$v]: MapElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$r]: MapProps & BaseElementPropsWithChildren<MapElement>;
+            [tagName$v]: MapProps & BaseElementPropsWithChildren<MapElement>;
         }
     }
 }
 
-declare const tagName$q = "s-modal";
+declare const tagName$u = "s-modal";
 interface ModalElementProps extends Pick<ModalProps$1, 'accessibilityLabel' | 'heading' | 'id' | 'padding' | 'size'> {
     size?: Extract<ModalProps$1['size'], 'small-100' | 'small' | 'base' | 'large-100' | 'large' | 'max'>;
 }
-interface ModalSlots extends Pick<ModalProps$1, 'primaryAction' | 'secondaryActions'> {
-    /**
-     * The primary action to perform, provided as a button type element.
-     */
-    primaryAction?: ReactNode;
-    /**
-     * The secondary actions to perform, provided as button type elements.
-     */
-    secondaryActions?: ReactNode;
+interface ModalEvents extends Pick<ModalProps$1, 'onAfterHide' | 'onAfterShow' | 'onHide' | 'onShow'> {
 }
-interface ModalEvents extends Pick<ModalProps$1, 'onHide' | 'onShow'> {
+interface ModalElementMethods extends Pick<ModalProps$1, 'hideOverlay'> {
 }
-interface ModalElement extends ModalElementProps, ModalSlots, Omit<HTMLElement, 'id'> {
+interface ModalElement extends ModalElementProps, ModalElementMethods, Omit<HTMLElement, 'id'> {
+    onafterhide: ModalEvents['onAfterHide'];
+    onaftershow: ModalEvents['onAfterShow'];
     onhide: ModalEvents['onHide'];
     onshow: ModalEvents['onShow'];
 }
-interface ModalProps extends ModalElementProps, ModalSlots, ModalEvents {
+interface ModalProps extends ModalElementProps, ModalEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$u]: ModalElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$u]: ModalProps & BaseElementPropsWithChildren<ModalElement>;
+        }
+    }
+}
+
+declare const tagName$t = "s-money-field";
+interface MoneyFieldElementProps extends Pick<MoneyFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'max' | 'min' | 'name' | 'readOnly' | 'required' | 'step' | 'value'> {
+}
+interface MoneyFieldEvents extends Pick<MoneyFieldProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
+}
+interface MoneyFieldElement extends MoneyFieldElementProps {
+    onblur: MoneyFieldEvents['onBlur'];
+    onchange: MoneyFieldEvents['onChange'];
+    onfocus: MoneyFieldEvents['onFocus'];
+    oninput: MoneyFieldEvents['onInput'];
+}
+interface MoneyFieldProps extends MoneyFieldElementProps, MoneyFieldEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$q]: ModalElement;
+        [tagName$t]: MoneyFieldElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$q]: ModalProps & BaseElementPropsWithChildren<ModalElement>;
+            [tagName$t]: MoneyFieldProps & BaseElementProps<MoneyFieldElement>;
         }
     }
 }
 
-declare const tagName$p = "s-number-field";
-interface NumberFieldElementProps extends Pick<NumberFieldProps$1, 'accessory' | 'autocomplete' | 'controls' | 'defaultValue' | 'details' | 'disabled' | 'error' | 'icon' | 'id' | 'inputMode' | 'label' | 'labelAccessibilityVisibility' | 'max' | 'min' | 'name' | 'onBlur' | 'onChange' | 'onFocus' | 'onInput' | 'prefix' | 'readOnly' | 'required' | 'step' | 'suffix' | 'value'> {
+declare const tagName$s = "s-number-field";
+interface NumberFieldElementProps extends Pick<NumberFieldProps$1, 'accessory' | 'autocomplete' | 'controls' | 'defaultValue' | 'details' | 'disabled' | 'error' | 'icon' | 'id' | 'inputMode' | 'label' | 'labelAccessibilityVisibility' | 'max' | 'min' | 'name' | 'prefix' | 'readOnly' | 'required' | 'step' | 'suffix' | 'value'> {
     /**
      * @deprecated Use `label` instead.
      * @private
@@ -3550,36 +3975,36 @@ interface NumberFieldProps extends NumberFieldElementProps, NumberFieldEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$p]: NumberFieldElement;
+        [tagName$s]: NumberFieldElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$p]: NumberFieldProps & BaseElementProps<NumberFieldElement>;
+            [tagName$s]: NumberFieldProps & BaseElementPropsWithChildren<NumberFieldElement>;
         }
     }
 }
 
-declare const tagName$o = "s-option";
+declare const tagName$r = "s-option";
 interface OptionProps extends Pick<OptionProps$1, 'accessibilityLabel' | 'defaultSelected' | 'disabled' | 'id' | 'selected' | 'value'> {
 }
 interface OptionElement extends OptionProps, Omit<HTMLElement, 'id'> {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$o]: OptionElement;
+        [tagName$r]: OptionElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$o]: OptionProps & BaseElementPropsWithChildren<OptionElement>;
+            [tagName$r]: OptionProps & BaseElementPropsWithChildren<OptionElement>;
         }
     }
 }
 
-declare const tagName$n = "s-ordered-list";
+declare const tagName$q = "s-ordered-list";
 interface OrderedListProps extends OrderedListProps$1 {
 }
 interface OrderedListElement extends OrderedListProps, Omit<HTMLElement, 'id'> {
@@ -3591,12 +4016,12 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$n]: OrderedListProps & BaseElementPropsWithChildren<OrderedListElement>;
+            [tagName$q]: OrderedListProps & BaseElementPropsWithChildren<OrderedListElement>;
         }
     }
 }
 
-declare const tagName$m = "s-paragraph";
+declare const tagName$p = "s-paragraph";
 interface ParagraphProps extends Pick<ParagraphProps$1, 'accessibilityVisibility' | 'color' | 'dir' | 'id' | 'lang' | 'tone' | 'type'> {
     color?: Extract<ParagraphProps$1['color'], 'subdued' | 'base'>;
     tone?: Extract<ParagraphProps$1['tone'], 'auto' | 'info' | 'success' | 'warning' | 'critical' | 'neutral' | 'custom'>;
@@ -3610,17 +4035,13 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$m]: ParagraphProps & BaseElementPropsWithChildren<ParagraphElement>;
+            [tagName$p]: ParagraphProps & BaseElementPropsWithChildren<ParagraphElement>;
         }
     }
 }
 
-declare const tagName$l = "s-password-field";
-interface PasswordFieldElementProps extends Pick<PasswordFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'maxLength'
-/** @todo: implement `minLength` */
- | 'name'
-/** @todo: implement `placeholder` */
- | 'readOnly' | 'required' | 'value'> {
+declare const tagName$o = "s-password-field";
+interface PasswordFieldElementProps extends Pick<PasswordFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'maxLength' | 'minLength' | 'name' | 'readOnly' | 'required' | 'value'> {
 }
 interface PasswordFieldEvents extends Pick<PasswordFieldProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
 }
@@ -3634,18 +4055,18 @@ interface PasswordFieldProps extends PasswordFieldElementProps, PasswordFieldEve
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$l]: PasswordFieldElement;
+        [tagName$o]: PasswordFieldElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$l]: PasswordFieldProps & BaseElementProps<PasswordFieldElement>;
+            [tagName$o]: PasswordFieldProps & BaseElementPropsWithChildren<PasswordFieldElement>;
         }
     }
 }
 
-declare const tagName$k = "s-payment-icon";
+declare const tagName$n = "s-payment-icon";
 interface PaymentIconProps extends PaymentIconProps$1 {
 }
 interface PaymentIconElement extends PaymentIconProps, Omit<HTMLElement, 'id'> {
@@ -3657,12 +4078,12 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$k]: PaymentIconProps & BaseElementProps<PaymentIconElement>;
+            [tagName$n]: PaymentIconProps & BaseElementProps<PaymentIconElement>;
         }
     }
 }
 
-declare const tagName$j = "s-phone-field";
+declare const tagName$m = "s-phone-field";
 interface PhoneFieldElementProps extends Pick<PhoneFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'name' | 'readOnly' | 'required' | 'value' | 'type'> {
     /**
      * @deprecated Use `label` instead.
@@ -3672,36 +4093,77 @@ interface PhoneFieldElementProps extends Pick<PhoneFieldProps$1, 'autocomplete'
 }
 interface PhoneFieldEvents extends Pick<PhoneFieldProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
 }
-interface PhoneFieldSlots extends Pick<PhoneFieldProps$1, 'accessory'> {
-    /**
-     * Additional content to be displayed in the field.
-     * Commonly used to display an icon that activates a tooltip providing more information.
-     */
-    accessory?: ReactNode;
-}
-interface PhoneFieldElement extends PhoneFieldElementProps, PhoneFieldSlots, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
+interface PhoneFieldElement extends PhoneFieldElementProps, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
     onblur: PhoneFieldEvents['onBlur'];
     onchange: PhoneFieldEvents['onChange'];
     onfocus: PhoneFieldEvents['onFocus'];
     oninput: PhoneFieldEvents['onInput'];
 }
-interface PhoneFieldProps extends PhoneFieldElementProps, PhoneFieldSlots, PhoneFieldEvents {
+interface PhoneFieldProps extends PhoneFieldElementProps, PhoneFieldEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$j]: PhoneFieldElement;
+        [tagName$m]: PhoneFieldElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$j]: PhoneFieldProps & BaseElementProps<PhoneFieldElement>;
+            [tagName$m]: PhoneFieldProps & BaseElementPropsWithChildren<PhoneFieldElement>;
         }
     }
 }
 
-declare const tagName$i = "s-popover";
-interface PopoverElementProps extends Pick<PopoverProps$1, 'blockSize' | 'id' | 'inlineSize' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize'> {
+declare const tagName$l = "s-popover";
+interface PopoverElementProps extends Pick<PopoverProps$1, 'id'> {
+    /**
+     * Adjust the block size.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/block-size
+     *
+     * @default 'auto'
+     */
+    blockSize?: SizeUnitsOrAuto;
+    /**
+     * Adjust the inline size.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/inline-size
+     *
+     * @default 'auto'
+     */
+    inlineSize?: SizeUnitsOrAuto;
+    /**
+     * Adjust the maximum block size.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-block-size
+     *
+     * @default 'none'
+     */
+    maxBlockSize?: SizeUnitsOrNone;
+    /**
+     * Adjust the maximum inline size.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/max-inline-size
+     *
+     * @default 'none'
+     */
+    maxInlineSize?: SizeUnitsOrNone;
+    /**
+     * Adjust the minimum block size.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-block-size
+     *
+     * @default '0'
+     */
+    minBlockSize?: SizeUnits;
+    /**
+     * Adjust the minimum inline size.
+     *
+     * @see https://developer.mozilla.org/en-US/docs/Web/CSS/min-inline-size
+     *
+     * @default '0'
+     */
+    minInlineSize?: SizeUnits;
 }
 interface PopoverEvents extends Pick<PopoverProps$1, 'onHide' | 'onShow'> {
 }
@@ -3713,18 +4175,43 @@ interface PopoverProps extends PopoverElementProps, PopoverEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$i]: PopoverElement;
+        [tagName$l]: PopoverElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$l]: PopoverProps & BaseElementPropsWithChildren<PopoverElement>;
+        }
+    }
+}
+
+declare const tagName$k = "s-press-button";
+interface PressButtonElementProps extends Pick<PressButtonProps$1, 'accessibilityLabel' | 'id' | 'inlineSize' | 'lang' | 'disabled' | 'loading' | 'pressed' | 'defaultPressed'> {
+}
+interface PressButtonEvents extends Pick<PressButtonProps$1, 'onClick' | 'onBlur' | 'onFocus'> {
+}
+interface PressButtonElement extends PressButtonElementProps, Omit<HTMLElement, 'children' | 'lang' | 'id' | 'onblur' | 'onclick' | 'onfocus'> {
+    onblur: PressButtonEvents['onBlur'];
+    onclick: PressButtonEvents['onClick'];
+    onfocus: PressButtonEvents['onFocus'];
+}
+interface PressButtonProps extends PressButtonElementProps, PressButtonEvents {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$k]: PressButtonElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$i]: PopoverProps & BaseElementPropsWithChildren<PopoverElement>;
+            [tagName$k]: PressButtonProps & BaseElementPropsWithChildren<PressButtonElement>;
         }
     }
 }
 
-declare const tagName$h = "s-product-thumbnail";
+declare const tagName$j = "s-product-thumbnail";
 interface ProductThumbnailProps extends Pick<ProductThumbnailProps$1, 'alt' | 'size' | 'sizes' | 'src' | 'srcSet' | 'totalItems'> {
     size?: Extract<ProductThumbnailProps$1['size'], 'small-100' | 'small' | 'base'>;
 }
@@ -3732,18 +4219,18 @@ interface ProductThumbnailElement extends ProductThumbnailProps, Omit<HTMLElemen
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$h]: ProductThumbnailElement;
+        [tagName$j]: ProductThumbnailElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$h]: ProductThumbnailProps & BaseElementProps<ProductThumbnailElement>;
+            [tagName$j]: ProductThumbnailProps & BaseElementProps<ProductThumbnailElement>;
         }
     }
 }
 
-declare const tagName$g = "s-progress";
+declare const tagName$i = "s-progress";
 interface ProgressProps extends Pick<ProgressProps$1, 'accessibilityLabel' | 'id' | 'max' | 'tone' | 'value'> {
     tone?: Extract<ProgressProps$1['tone'], 'auto' | 'critical'>;
 }
@@ -3756,12 +4243,12 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$g]: ProgressProps & BaseElementProps<ProgressElement>;
+            [tagName$i]: ProgressProps & BaseElementProps<ProgressElement>;
         }
     }
 }
 
-declare const tagName$f = "s-qr-code";
+declare const tagName$h = "s-qr-code";
 interface QRCodeElementProps extends QRCodeProps$1 {
 }
 interface QRCodeEvents extends Pick<QRCodeProps$1, 'onError'> {
@@ -3773,18 +4260,38 @@ interface QRCodeProps extends QRCodeElementProps, QRCodeEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$f]: QRCodelement;
+        [tagName$h]: QRCodelement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$h]: QRCodeProps & BaseElementProps<QRCodelement>;
+        }
+    }
+}
+
+declare const tagName$g = "s-query-container";
+interface QueryContainerElementProps extends Pick<QueryContainerProps$1, 'containerName' | 'id'> {
+}
+interface QueryContainerElement extends QueryContainerElementProps, Omit<HTMLElement, 'id'> {
+}
+interface QueryContainerProps extends QueryContainerElementProps {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$g]: QueryContainerElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$f]: QRCodeProps & BaseElementProps<QRCodelement>;
+            [tagName$g]: QueryContainerProps & BaseElementPropsWithChildren<QueryContainerElement>;
         }
     }
 }
 
-declare const tagName$e = "s-scroll-box";
+declare const tagName$f = "s-scroll-box";
 interface ScrollBoxProps extends Pick<ScrollBoxProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'accessibilityVisibility' | 'background' | 'blockSize' | 'border' | 'borderColor' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'display' | 'id' | 'inlineSize' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart'> {
     background?: Extract<ScrollBoxProps$1['background'], 'transparent' | 'subdued' | 'base'>;
     border?: BorderShorthand;
@@ -3796,36 +4303,36 @@ interface ScrollBoxElement extends ScrollBoxProps, Omit<HTMLElement, 'id'> {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$e]: ScrollBoxElement;
+        [tagName$f]: ScrollBoxElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$e]: ScrollBoxProps & BaseElementPropsWithChildren<ScrollBoxElement>;
+            [tagName$f]: ScrollBoxProps & BaseElementPropsWithChildren<ScrollBoxElement>;
         }
     }
 }
 
-declare const tagName$d = "s-section";
+declare const tagName$e = "s-section";
 interface SectionProps extends Pick<SectionProps$1, 'accessibilityLabel' | 'heading' | 'id'> {
 }
 interface SectionElement extends SectionProps, Omit<HTMLElement, 'id'> {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$d]: SectionElement;
+        [tagName$e]: SectionElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$d]: SectionProps & BaseElementPropsWithChildren<SectionElement>;
+            [tagName$e]: SectionProps & BaseElementPropsWithChildren<SectionElement>;
         }
     }
 }
 
-declare const tagName$c = "s-select";
+declare const tagName$d = "s-select";
 interface SelectElementProps extends Pick<SelectProps$1, 'autocomplete' | 'disabled' | 'error' | 'id' | 'label' | 'name' | 'placeholder' | 'required' | 'value'> {
 }
 interface SelectEvents extends Pick<SelectProps$1, 'onBlur' | 'onChange' | 'onFocus'> {
@@ -3839,18 +4346,18 @@ interface SelectProps extends SelectElementProps, SelectEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$c]: SelectElement;
+        [tagName$d]: SelectElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$c]: SelectProps & BaseElementPropsWithChildren<SelectElement>;
+            [tagName$d]: SelectProps & BaseElementPropsWithChildren<SelectElement>;
         }
     }
 }
 
-declare const tagName$b = "s-sheet";
+declare const tagName$c = "s-sheet";
 interface SheetElementProps extends Pick<SheetProps$1, 'defaultOpen' | 'heading' | 'id'> {
     /**
      * A label that describes the purpose of the modal. When set,
@@ -3861,56 +4368,52 @@ interface SheetElementProps extends Pick<SheetProps$1, 'defaultOpen' | 'heading'
      */
     accessibilityLabel?: string;
 }
-interface SheetEvents extends Pick<SheetProps$1, 'onHide' | 'onShow' | 'onAfterHide' | 'onAfterShow'> {
+interface SheetEvents extends Pick<SheetProps$1, 'onAfterHide' | 'onAfterShow' | 'onHide' | 'onShow'> {
 }
-interface SheetSlots {
-    /**
-     * The primary action to perform, provided as a button type element.
-     */
-    primaryAction?: ReactNode;
-    /**
-     * The secondary actions to perform, provided as a button type element.
-     */
-    secondaryActions?: ReactNode;
+interface SheetElementMethods extends Pick<SheetProps$1, 'hideOverlay'> {
 }
-interface SheetElement extends SheetElementProps, SheetSlots, Omit<HTMLElement, 'id'> {
+interface SheetElement extends SheetElementProps, SheetElementMethods, Omit<HTMLElement, 'id'> {
+    afterhide: SheetEvents['onAfterHide'];
+    aftershow: SheetEvents['onAfterShow'];
     onhide: SheetEvents['onHide'];
     onshow: SheetEvents['onShow'];
+    onafterhide: SheetEvents['onAfterHide'];
+    onaftershow: SheetEvents['onAfterShow'];
 }
-interface SheetProps extends SheetElementProps, SheetEvents, SheetSlots {
+interface SheetProps extends SheetElementProps, SheetEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$b]: SheetElement;
+        [tagName$c]: SheetElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$b]: SheetProps & BaseElementPropsWithChildren<SheetElement>;
+            [tagName$c]: SheetProps & BaseElementPropsWithChildren<SheetElement>;
         }
     }
 }
 
-declare const tagName$a = "s-skeleton-paragraph";
+declare const tagName$b = "s-skeleton-paragraph";
 interface SkeletonParagraphProps extends SkeletonParagraphProps$1 {
 }
 interface SkeletonParagraphElement extends SkeletonParagraphProps, Omit<HTMLElement, 'id'> {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$a]: SkeletonParagraphElement;
+        [tagName$b]: SkeletonParagraphElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$a]: SkeletonParagraphProps & BaseElementProps<SkeletonParagraphElement>;
+            [tagName$b]: SkeletonParagraphProps & BaseElementProps<SkeletonParagraphElement>;
         }
     }
 }
 
-declare const tagName$9 = "s-spinner";
+declare const tagName$a = "s-spinner";
 interface SpinnerProps extends SpinnerProps$1 {
     size?: Extract<SpinnerProps$1['size'], 'small-100' | 'small' | 'base' | 'large' | 'large-100'>;
 }
@@ -3923,21 +4426,21 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$9]: SpinnerProps & BaseElementProps<SpinnerElement>;
+            [tagName$a]: SpinnerProps & BaseElementProps<SpinnerElement>;
         }
     }
 }
 
-declare const tagName$8 = "s-stack";
+declare const tagName$9 = "s-stack";
 interface StackProps extends Pick<StackProps$1, 'accessibilityLabel' | 'accessibilityRole' | 'alignContent' | 'alignItems' | 'background' | 'blockSize' | 'border' | 'borderRadius' | 'borderStyle' | 'borderWidth' | 'columnGap' | 'direction' | 'display' | 'gap' | 'id' | 'inlineSize' | 'justifyContent' | 'maxBlockSize' | 'maxInlineSize' | 'minBlockSize' | 'minInlineSize' | 'overflow' | 'padding' | 'paddingBlock' | 'paddingBlockEnd' | 'paddingBlockStart' | 'paddingInline' | 'paddingInlineEnd' | 'paddingInlineStart' | 'rowGap'> {
     accessibilityRole?: Extract<StackProps$1['accessibilityRole'], 'main' | 'header' | 'footer' | 'section' | 'aside' | 'navigation' | 'ordered-list' | 'list-item' | 'list-item-separator' | 'unordered-list' | 'separator' | 'status' | 'alert' | 'generic' | 'none'>;
     background?: Extract<StackProps$1['background'], 'transparent' | 'subdued' | 'base'>;
     border?: BorderShorthand;
     borderWidth?: MaybeAllValuesShorthandProperty<ReducedBorderSizeKeyword> | '';
     borderRadius?: MaybeAllValuesShorthandProperty<Extract<StackProps$1['borderRadius'], 'none' | 'small-100' | 'small' | 'base' | 'large' | 'large-100' | 'max'>>;
-    alignContent?: Extract<StackProps$1['alignContent'], 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>;
-    alignItems?: Extract<StackProps$1['alignItems'], 'normal' | 'stretch' | 'center' | 'start' | 'end'>;
-    justifyContent?: Extract<StackProps$1['justifyContent'], 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>;
+    alignContent?: MaybeResponsive<Extract<StackProps$1['alignContent'], 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>>;
+    alignItems?: MaybeResponsive<Extract<StackProps$1['alignItems'], 'normal' | 'stretch' | 'center' | 'start' | 'end'>>;
+    justifyContent?: MaybeResponsive<Extract<StackProps$1['justifyContent'], 'normal' | 'space-between' | 'space-around' | 'space-evenly' | 'stretch' | 'center' | 'start' | 'end'>>;
 }
 interface StackElement extends StackProps, Omit<HTMLElement, 'id'> {
 }
@@ -3948,19 +4451,19 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$8]: StackProps & BaseElementPropsWithChildren<StackElement>;
+            [tagName$9]: StackProps & BaseElementPropsWithChildren<StackElement>;
         }
     }
 }
 
-declare const tagName$7 = "s-summary";
+declare const tagName$8 = "s-summary";
 interface SummaryProps extends Pick<SummaryProps$1, 'id'> {
 }
 interface SummaryElement extends SummaryProps, Omit<HTMLElement, 'id'> {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$7]: SummaryElement;
+        [tagName$8]: SummaryElement;
     }
 }
 declare module 'preact' {
@@ -3970,12 +4473,12 @@ declare module 'preact' {
     }
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$7]: SummaryProps & BaseProps;
+            [tagName$8]: SummaryProps & BaseProps;
         }
     }
 }
 
-declare const tagName$6 = "s-switch";
+declare const tagName$7 = "s-switch";
 interface SwitchElementProps extends Pick<SwitchProps$1, 'accessibilityLabel' | 'checked' | 'command' | 'commandFor' | 'defaultChecked' | 'disabled' | 'id' | 'label' | 'name' | 'value'> {
     command?: Extract<SwitchProps$1['command'], '--auto' | '--show' | '--hide' | '--toggle'>;
 }
@@ -3988,18 +4491,18 @@ interface SwitchProps extends SwitchElementProps, SwitchEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$6]: SwitchElement;
+        [tagName$7]: SwitchElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$6]: SwitchProps & BaseElementProps<SwitchElement>;
+            [tagName$7]: SwitchProps & BaseElementProps<SwitchElement>;
         }
     }
 }
 
-declare const tagName$5 = "s-text-area";
+declare const tagName$6 = "s-text-area";
 interface TextAreaElementProps extends Pick<TextAreaProps$1, 'id' | 'label' | 'name' | 'required' | 'value' | 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'readOnly' | 'rows' | 'maxLength' | 'minLength' | 'labelAccessibilityVisibility'> {
     /**
      * @deprecated Use `label` instead.
@@ -4019,18 +4522,18 @@ interface TextAreaProps extends TextAreaElementProps, TextAreaEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
-        [tagName$5]: TextAreaElement;
+        [tagName$6]: TextAreaElement;
     }
 }
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$5]: TextAreaProps & BaseElementProps<TextAreaElement>;
+            [tagName$6]: TextAreaProps & BaseElementProps<TextAreaElement>;
         }
     }
 }
 
-declare const tagName$4 = "s-text-field";
+declare const tagName$5 = "s-text-field";
 interface TextFieldElementProps extends Pick<TextFieldProps$1, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'icon' | 'label' | 'labelAccessibilityVisibility' | 'maxLength' | 'minLength' | 'name' | 'prefix' | 'readOnly' | 'required' | 'suffix' | 'value'> {
     icon?: IconProps['type'];
     /**
@@ -4041,20 +4544,13 @@ interface TextFieldElementProps extends Pick<TextFieldProps$1, 'autocomplete' |
 }
 interface TextFieldEvents extends Pick<TextFieldProps$1, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
 }
-interface TextFieldSlots {
-    /**
-     * Additional content to be displayed in the field.
-     * Commonly used to display an icon that activates a tooltip providing more information.
-     */
-    accessory?: ReactNode;
-}
-interface TextFieldElement extends TextFieldElementProps, TextFieldSlots, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
+interface TextFieldElement extends TextFieldElementProps, Omit<HTMLElement, 'id' | 'onblur' | 'onchange' | 'onfocus' | 'oninput' | 'prefix'> {
     onblur: TextFieldEvents['onBlur'];
     onchange: TextFieldEvents['onChange'];
     onfocus: TextFieldEvents['onFocus'];
     oninput: TextFieldEvents['onInput'];
 }
-interface TextFieldProps extends TextFieldElementProps, TextFieldSlots, TextFieldEvents {
+interface TextFieldProps extends TextFieldElementProps, TextFieldEvents {
 }
 declare global {
     interface HTMLElementTagNameMap {
@@ -4063,12 +4559,12 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$4]: TextFieldProps & BaseElementProps<TextFieldElement>;
+            [tagName$5]: TextFieldProps & BaseElementPropsWithChildren<TextFieldElement>;
         }
     }
 }
 
-declare const tagName$3 = "s-text";
+declare const tagName$4 = "s-text";
 interface TextProps extends Pick<TextProps$1, 'accessibilityVisibility' | 'color' | 'dir' | 'display' | 'id' | 'lang' | 'tone' | 'type'> {
     color?: Extract<TextProps$1['color'], 'subdued' | 'base'>;
     tone?: Extract<TextProps$1['tone'], 'auto' | 'neutral' | 'info' | 'success' | 'warning' | 'critical' | 'custom'>;
@@ -4083,12 +4579,12 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$3]: TextProps & BaseElementPropsWithChildren<TextElement>;
+            [tagName$4]: TextProps & BaseElementPropsWithChildren<TextElement>;
         }
     }
 }
 
-declare const tagName$2 = "s-time";
+declare const tagName$3 = "s-time";
 interface TimeProps extends Pick<TimeProps$1, 'dateTime' | 'id'> {
 }
 interface TimeElement extends TimeProps, Omit<HTMLElement, 'id'> {
@@ -4100,7 +4596,27 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName$2]: TimeProps & BaseElementPropsWithChildren<TimeElement>;
+            [tagName$3]: TimeProps & BaseElementPropsWithChildren<TimeElement>;
+        }
+    }
+}
+
+declare const tagName$2 = "s-tooltip";
+interface TooltipElementProps extends Pick<TooltipProps$1, 'id'> {
+}
+interface TooltipElement extends TooltipElementProps {
+}
+interface TooltipProps extends TooltipElementProps {
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        [tagName$2]: TooltipElement;
+    }
+}
+declare module 'preact' {
+    namespace createElement.JSX {
+        interface IntrinsicElements {
+            [tagName$2]: TooltipProps & BaseElementPropsWithChildren<TooltipElement>;
         }
     }
 }
@@ -4123,11 +4639,7 @@ declare module 'preact' {
 }
 
 declare const tagName = "s-url-field";
-interface UrlFieldElementProps extends Pick<URLFieldProps, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'maxLength'
-/** @todo: implement `minLength` */
- | 'name'
-/** @todo: implement `placeholder` */
- | 'readOnly' | 'required' | 'value'> {
+interface UrlFieldElementProps extends Pick<URLFieldProps, 'autocomplete' | 'defaultValue' | 'disabled' | 'error' | 'id' | 'label' | 'labelAccessibilityVisibility' | 'maxLength' | 'minLength' | 'name' | 'readOnly' | 'required' | 'value'> {
 }
 interface UrlFieldEvents extends Pick<URLFieldProps, 'onBlur' | 'onChange' | 'onFocus' | 'onInput'> {
 }
@@ -4147,9 +4659,9 @@ declare global {
 declare module 'preact' {
     namespace createElement.JSX {
         interface IntrinsicElements {
-            [tagName]: UrlFieldProps & BaseElementProps<UrlFieldElement>;
+            [tagName]: UrlFieldProps & BaseElementPropsWithChildren<UrlFieldElement>;
         }
     }
 }
 
-export type { AbbreviationProps, BadgeProps, BannerProps, BoxProps, ButtonProps, CheckboxProps, ClickableProps, ClipboardItemProps, DetailsProps, DividerProps, DropZoneProps, EmailFieldProps, FormProps, GridItemProps, GridProps, HeadingProps, IconProps, ImageProps, LinkProps, ListItemProps, MapMarkerProps, MapProps, ModalProps, NumberFieldProps, OptionProps, OrderedListProps, ParagraphProps, PasswordFieldProps, PaymentIconProps, PhoneFieldProps, PopoverProps, ProductThumbnailProps, ProgressProps, QRCodeProps, ScrollBoxProps, SectionProps, SelectProps, SheetProps, SkeletonParagraphProps, SpinnerProps, StackProps, SummaryProps, SwitchProps, TextAreaProps, TextFieldProps, TextProps, TimeProps, UnorderedListProps, UrlFieldProps };
+export type { AbbreviationProps, BadgeProps, BannerProps, BoxProps, ButtonProps, CheckboxProps, ChoiceListProps, ChoiceProps, ClickableProps, ClipboardItemProps, DateFieldProps, DatePickerProps, DetailsProps, DividerProps, DropZoneProps, EmailFieldProps, FormProps, GridItemProps, GridProps, HeadingProps, IconProps, ImageProps, LinkProps, ListItemProps, MapMarkerProps, MapProps, ModalProps, MoneyFieldProps, NumberFieldProps, OptionProps, OrderedListProps, ParagraphProps, PasswordFieldProps, PaymentIconProps, PhoneFieldProps, PopoverProps, PressButtonProps, ProductThumbnailProps, ProgressProps, QRCodeProps, QueryContainerProps, ScrollBoxProps, SectionProps, SelectProps, SheetProps, SkeletonParagraphProps, SpinnerProps, StackProps, SummaryProps, SwitchProps, TextAreaProps, TextFieldProps, TextProps, TimeProps, TooltipProps, UnorderedListProps, UrlFieldProps };