@pathscale/ui 3.1.0 → 3.2.0

package/dist/components/card/Card.interactions.d.ts

@@ -0,0 +1,70 @@
+/**
+ * What an interactive card *is*, as one function.
+ *
+ * `isInteractive` gave a card `role="button"` and `tabindex="0"` with no way
+ * off either. That is right for a card that is the only activatable thing in
+ * its box, and wrong the moment a card is put inside a link, which is the
+ * ordinary way to make a whole card navigate. Measured on one site: every card
+ * on it was a `button` inside a `link`, same name, same box. Nested
+ * interactive content is invalid HTML, a reader hears the card twice, and a
+ * press by coordinate lands on whichever of the two is on top.
+ *
+ * Three things come out of this, and the first is what fixes the sites without
+ * anyone editing a call site. A card is announced as a button when it looks
+ * pressable *and has something to press*: `<a href><Card isInteractive /></a>`
+ * hands the card no handler, because the anchor is what navigates, so the card
+ * stops claiming to be a button and the nesting goes away where it stands.
+ * `isInteractive` was doing two jobs at once and only one of them survives
+ * inside a link: it is how a card asks for hover and press affordance, which is
+ * exactly what a card inside a link wants, and all it wants.
+ *
+ * The second is `href`: a card that navigates should *be* the anchor rather
+ * than sit inside one, exactly as `Button` already does. The third is an
+ * explicit `role`, which was accepted and then half-ignored --
+ * `role="presentation"` left `tabindex="0"` behind, so the escape hatch
+ * produced a presentational element that was still in the tab order and still
+ * announced as focusable.
+ *
+ * A `.layout.tsx` binds free identifiers to props, so the rule lives beside
+ * the markup rather than inside it, and the repository's tests are pure.
+ */
+import type { JSX } from "@solidjs/web";
+type RoleAttribute = JSX.HTMLAttributes<HTMLElement>["role"];
+type TabIndexAttribute = JSX.HTMLAttributes<HTMLElement>["tabindex"];
+type Role = Exclude<RoleAttribute, false | undefined>;
+type TabIndex = Exclude<TabIndexAttribute, false | undefined>;
+export type CardSemanticsInput = {
+    href?: string | false;
+    isInteractive?: boolean;
+    /**
+     * Whether the card has an activation of its own.
+     *
+     * This is the half that fixes the fleet without anyone editing a call site.
+     * `<a href><Card isInteractive /></a>` gives the card no handler: the anchor
+     * is what navigates. A card with nothing to activate is not a button, so it
+     * stops claiming to be one, and the nesting goes away where it is.
+     *
+     * `isInteractive` alone was read as "announce this as a button", and it
+     * cannot be: it is also how a card asks for hover and press *affordance*,
+     * which is exactly what a card inside a link wants and all it wants.
+     */
+    hasActivation?: boolean;
+    /** An explicit `role` from the call site. Wins outright. */
+    role?: RoleAttribute;
+    /** An explicit `tabindex` from the call site. Wins outright. */
+    tabindex?: TabIndexAttribute;
+};
+export type CardSemantics = {
+    element: "a" | "div";
+    role: Role | undefined;
+    tabindex: TabIndex | undefined;
+    /**
+     * Whether the card has to implement Enter and Space itself.
+     *
+     * Only a `div` wearing `role="button"` does. An anchor activates on Enter
+     * natively, and a presentational card activates on nothing.
+     */
+    handlesKeyboardActivation: boolean;
+};
+export declare const cardSemantics: (input: CardSemanticsInput) => CardSemantics;
+export {};

package/dist/components/card/Card.interactions.js

@@ -0,0 +1,19 @@
+const given = (value)=>false === value || void 0 === value ? void 0 : value;
+const cardSemantics = (input)=>{
+    const role = given(input.role);
+    const tabindex = given(input.tabindex);
+    if ("string" == typeof input.href) return {
+        element: "a",
+        role,
+        tabindex,
+        handlesKeyboardActivation: false
+    };
+    const resolvedRole = role ?? (input.isInteractive && input.hasActivation ? "button" : void 0);
+    return {
+        element: "div",
+        role: resolvedRole,
+        tabindex: tabindex ?? ("button" === resolvedRole ? 0 : void 0),
+        handlesKeyboardActivation: "button" === resolvedRole
+    };
+};
+export { cardSemantics };

package/dist/components/collapsible/Collapsible.css

@@ -50,19 +50,35 @@
     transform: rotate(-180deg);
   }
 
+  /*
+   * A closed panel is out of the page, not merely flattened. Same fault and
+   * same fix as `.accordion__content`: `keepMounted` is the default, so a
+   * closed panel stays in the document carrying `aria-hidden="true"` while
+   * everything inside it kept `visibility: visible` and stayed in the tab
+   * order. Tab moved focus into a panel nobody can see, inside an
+   * `aria-hidden` subtree, which is the one thing `aria-hidden` must never
+   * contain.
+   */
   .collapsible__content {
     display: grid;
     grid-template-rows: 0fr;
     opacity: 0;
     overflow: hidden;
+    visibility: hidden;
     transition:
       grid-template-rows 200ms ease,
-      opacity 200ms ease;
+      opacity 200ms ease,
+      visibility 0s linear 200ms;
   }
 
   .collapsible__content[data-expanded="true"] {
     grid-template-rows: 1fr;
     opacity: 1;
+    visibility: visible;
+    transition:
+      grid-template-rows 200ms ease,
+      opacity 200ms ease,
+      visibility 0s linear 0s;
   }
 
   .collapsible__body {

package/dist/components/color-wheel-flower/ColorWheelFlower.generated.d.ts

@@ -1,5 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./ColorWheelFlower.css";
+import { type ColorValue } from "./ColorUtils";
 import { type ColorWheelFlowerMode } from "./ColorWheelFlower.palette";
 export interface ColorWheelFlowerProps {
     /** Stable base for the flower and each interactive petal. */
@@ -9,6 +10,13 @@ export interface ColorWheelFlowerProps {
     mode?: ColorWheelFlowerMode;
     /** Exactly 31 literal colors, ordered outer ring, middle ring, inner ring, center. */
     palette?: readonly string[];
+    /** Controlled selection. A hex, `rgb()` or `hsl()` string, or a parsed value. */
+    color?: ColorValue | string;
+    /** Initial selection when uncontrolled. */
+    defaultColor?: ColorValue | string;
+    disabled?: boolean;
+    /** The colour a petal was clicked to choose. */
+    onChange?: (color: ColorValue) => void;
 }
 declare const ColorWheelFlower: __LayoutComponent<ColorWheelFlowerProps>;
 export default ColorWheelFlower;

package/dist/components/color-wheel-flower/ColorWheelFlower.generated.js

@@ -231,7 +231,20 @@ function buildColors(palette) {
 }
 const CENTER_INDEX = LAYOUT.findIndex((l)=>l.isCenter);
 const __solidLayoutColorWheelFlower = (_stable, p)=>{
-    const context = useColorPickerContext();
+    const providedContext = useColorPickerContext();
+    const toColorValue = (value)=>void 0 === value ? null : "string" == typeof value ? parseColor(value) : value;
+    const WHITE = createColorFromHsl(0, 0, 100, 1);
+    const [standaloneColor, setStandaloneColor] = createSignal(toColorValue(p.defaultColor) ?? WHITE);
+    const context = providedContext ?? {
+        color: ()=>toColorValue(p.color) ?? standaloneColor(),
+        format: ()=>"hex",
+        disabled: ()=>Boolean(p.disabled),
+        onChange: (next)=>{
+            if (void 0 === p.color) setStandaloneColor(next);
+            p.onChange?.(next);
+        },
+        onFormatChange: ()=>{}
+    };
     const [selectedIndex, setSelectedIndex] = createSignal(null);
     const [pulseState, setPulseState] = createSignal(null);
     const [currentTheme, setCurrentTheme] = createSignal("u" > typeof document && "dark" === document.documentElement.getAttribute("data-theme") ? "dark" : "light");

package/dist/components/color-wheel-flower/colorWheelFlowerContext.d.ts

@@ -7,5 +7,12 @@ export interface ColorPickerContextType {
     onChange: (color: ColorValue) => void;
     onFormatChange: (format: ColorFormat) => void;
 }
-export declare const ColorPickerContext: import("solid-js").Context<ColorPickerContextType | undefined>;
-export declare function useColorPickerContext(): ColorPickerContextType;
+export declare const ColorPickerContext: import("solid-js").Context<ColorPickerContextType | null>;
+/**
+ * The surrounding picker's state, or `null` when there is no picker.
+ *
+ * Returning `null` rather than throwing is deliberate: a consumer that can
+ * stand alone decides for itself what to do without a provider, and one that
+ * genuinely cannot say so in its own words.
+ */
+export declare function useColorPickerContext(): ColorPickerContextType | null;

package/dist/components/color-wheel-flower/colorWheelFlowerContext.js

@@ -1,8 +1,6 @@
 import { createContext, useContext } from "solid-js";
-const ColorPickerContext = createContext(void 0);
+const ColorPickerContext = createContext(null);
 function useColorPickerContext() {
-    const context = useContext(ColorPickerContext);
-    if (!context) throw new Error("useColorPickerContext must be used within a ColorPickerContext.Provider");
-    return context;
+    return useContext(ColorPickerContext);
 }
 export { ColorPickerContext, useColorPickerContext };

package/dist/components/date-picker/DatePicker.generated.d.ts

@@ -1,7 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./DatePicker.css";
 import type { JSX } from "@solidjs/web";
-import { type CalendarWeekdayFormat } from "../calendar";
+import { type CalendarWeekdayFormat, type DateNames } from "../calendar";
 import type { UIBaseProps, State } from "../vocabulary";
 type DatePickerBaseProps = {
     value?: Date;
@@ -13,6 +13,8 @@ type DatePickerBaseProps = {
     name?: string;
     placeholder?: string;
     locale?: string;
+    /** Month and weekday names for a language other than English. See `Calendar`. */
+    dateNames?: DateNames;
     weekdayFormat?: CalendarWeekdayFormat;
     minValue?: Date;
     maxValue?: Date;

package/dist/components/date-picker/DatePicker.generated.js

@@ -3,12 +3,12 @@ import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./DatePicker.css";
 import { Show, createMemo, createUniqueId, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
-import { formatDate, toISODate, useDateSelection, usePickerOpenState } from "../../hooks/date/index.js";
+import { formatDate, resolveDateNames, toISODate, useDateSelection, usePickerOpenState } from "../../hooks/date/index.js";
 import calendar from "../calendar/index.js";
 import { CLASSES, componentRecipe } from "./DatePicker.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<input type=hidden>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<div><button><span></span><span><svg><rect x=3 y=4 width=18 height=18 rx=2 ry=2></rect><line x1=16 y1=2 x2=16 y2=6></line><line x1=8 y1=2 x2=8 y2=6></line><line x1=3 y1=10 x2=21 y2=10></line></svg></span></button><!>");
 const __solidLayoutDatePicker = (_stable, p)=>{
-    const others = omit(p, "class", "dataTheme", "style", "ref", "value", "defaultValue", "onChange", "open", "defaultOpen", "onOpenChange", "name", "placeholder", "locale", "weekdayFormat", "minValue", "maxValue", "isDateUnavailable", "state", "disabled");
+    const others = omit(p, "class", "dataTheme", "style", "ref", "value", "defaultValue", "onChange", "open", "defaultOpen", "onOpenChange", "name", "placeholder", "locale", "dateNames", "weekdayFormat", "minValue", "maxValue", "isDateUnavailable", "state", "disabled");
     const isDisabled = createMemo(()=>Boolean("disabled" === p.state) || Boolean(p.disabled));
     const selection = useDateSelection({
         value: ()=>p.value,
@@ -21,11 +21,11 @@ const __solidLayoutDatePicker = (_stable, p)=>{
         onOpenChange: ()=>p.onOpenChange,
         isDisabled
     });
-    const locale = createMemo(()=>p.locale ?? "en-US");
+    const dateNames = createMemo(()=>resolveDateNames(p.locale, p.dateNames).names);
     const displayValue = createMemo(()=>{
         const selectedDate = selection.selectedDate();
         if (!selectedDate) return p.placeholder ?? "Select date";
-        return formatDate(selectedDate, locale());
+        return formatDate(selectedDate, dateNames());
     });
     const uniqueId = createUniqueId();
     const popoverId = `date-picker-popover-${uniqueId}`;
@@ -154,7 +154,10 @@ const __solidLayoutDatePicker = (_stable, p)=>{
                 },
                 onChange: handleDateChange,
                 get locale () {
-                    return locale();
+                    return p.locale;
+                },
+                get dateNames () {
+                    return p.dateNames;
                 },
                 get weekdayFormat () {
                     return p.weekdayFormat;

package/dist/components/date-range-picker/DateRangePicker.generated.d.ts

@@ -2,7 +2,7 @@ import type { Component as __LayoutComponent } from "solid-js";
 import "./DateRangePicker.css";
 import type { JSX } from "@solidjs/web";
 import { type ControlledDateRangeValue } from "../../hooks/date";
-import { type CalendarWeekdayFormat } from "../calendar";
+import { type CalendarWeekdayFormat, type DateNames } from "../calendar";
 import type { UIBaseProps, State } from "../vocabulary";
 export type DateRangeValue = ControlledDateRangeValue;
 type DateRangePickerBaseProps = {
@@ -17,6 +17,8 @@ type DateRangePickerBaseProps = {
     startPlaceholder?: string;
     endPlaceholder?: string;
     locale?: string;
+    /** Month and weekday names for a language other than English. See `Calendar`. */
+    dateNames?: DateNames;
     weekdayFormat?: CalendarWeekdayFormat;
     minValue?: Date;
     maxValue?: Date;

package/dist/components/date-range-picker/DateRangePicker.generated.js

@@ -3,12 +3,12 @@ import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./DateRangePicker.css";
 import { Show, createMemo, createTrackedEffect, createUniqueId, omit } from "solid-js";
 import { twMerge } from "../../lib/twMerge.js";
-import { formatDate, toISODate, usePickerOpenState, useRangeSelection } from "../../hooks/date/index.js";
+import { formatDate, resolveDateNames, toISODate, usePickerOpenState, useRangeSelection } from "../../hooks/date/index.js";
 import calendar from "../calendar/index.js";
 import { CLASSES, componentRecipe } from "./DateRangePicker.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<input type=hidden>"), _tmpl$2 = /*#__PURE__*/ template("<div>"), _tmpl$3 = /*#__PURE__*/ template("<div><!><button><span></span><span>-</span><span></span><span><svg><rect x=3 y=4 width=18 height=18 rx=2 ry=2></rect><line x1=16 y1=2 x2=16 y2=6></line><line x1=8 y1=2 x2=8 y2=6></line><line x1=3 y1=10 x2=21 y2=10></line></svg></span></button><!>");
 const __solidLayoutDateRangePicker = (_stable, p)=>{
-    const others = omit(p, "class", "dataTheme", "style", "ref", "value", "defaultValue", "onChange", "open", "defaultOpen", "onOpenChange", "startName", "endName", "startPlaceholder", "endPlaceholder", "locale", "weekdayFormat", "minValue", "maxValue", "isDateUnavailable", "state", "disabled");
+    const others = omit(p, "class", "dataTheme", "style", "ref", "value", "defaultValue", "onChange", "open", "defaultOpen", "onOpenChange", "startName", "endName", "startPlaceholder", "endPlaceholder", "locale", "dateNames", "weekdayFormat", "minValue", "maxValue", "isDateUnavailable", "state", "disabled");
     const isDisabled = createMemo(()=>Boolean("disabled" === p.state) || Boolean(p.disabled));
     const rangeSelection = useRangeSelection({
         value: ()=>p.value,
@@ -25,17 +25,17 @@ const __solidLayoutDateRangePicker = (_stable, p)=>{
         if (openState.isOpen()) return;
         rangeSelection.clearPendingSelection();
     });
-    const locale = createMemo(()=>p.locale ?? "en-US");
+    const dateNames = createMemo(()=>resolveDateNames(p.locale, p.dateNames).names);
     const startValue = createMemo(()=>rangeSelection.rangeStart());
     const endValue = createMemo(()=>rangeSelection.rangeEnd());
     const focusDate = createMemo(()=>rangeSelection.focusDate());
     const startDisplay = createMemo(()=>{
         if (!startValue()) return p.startPlaceholder ?? "Start date";
-        return formatDate(startValue(), locale());
+        return formatDate(startValue(), dateNames());
     });
     const endDisplay = createMemo(()=>{
         if (!endValue()) return p.endPlaceholder ?? "End date";
-        return formatDate(endValue(), locale());
+        return formatDate(endValue(), dateNames());
     });
     const handleDateSelect = (date)=>{
         const wasSelectingEnd = rangeSelection.isSelectingEnd();
@@ -208,7 +208,10 @@ const __solidLayoutDateRangePicker = (_stable, p)=>{
                     return rangeSelection.setHoverDate;
                 },
                 get locale () {
-                    return locale();
+                    return p.locale;
+                },
+                get dateNames () {
+                    return p.dateNames;
                 },
                 get weekdayFormat () {
                     return p.weekdayFormat;

package/dist/components/drawer/Drawer.generated.d.ts

@@ -1,5 +1,6 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Drawer.css";
+import { type ValidComponent } from "solid-js";
 import { type JSX } from "@solidjs/web";
 import "../_shared/material.css";
 import type { Material, UIBaseProps } from "../vocabulary";
@@ -22,6 +23,29 @@ export type DrawerRootProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children
 };
 export type DrawerTriggerProps = Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & UIBaseProps & {
     children: JSX.Element;
+    /**
+     * The component to be the trigger, instead of a bare button.
+     *
+     * `Drawer.Trigger` renders a `button`, which is right when the trigger is
+     * a word or a glyph and wrong when the call site hands it a control:
+     * `<Drawer.Trigger><Button>Menu</Button></Drawer.Trigger>` produced a
+     * `button` wrapping a `button` at an identical box with an identical name,
+     * so every trigger was announced twice and the press by coordinate landed
+     * on the outer one rather than on the control that was written. Nested
+     * interactive content is also invalid HTML.
+     *
+     * `as` makes the control *be* the trigger, so there is one element:
+     *
+     * ```tsx
+     * <Drawer.Trigger as={Button} variant="ghost">Menu</Drawer.Trigger>
+     * ```
+     *
+     * The wiring and anything else written here go to the delegate. The
+     * trigger's own class is a button reset and is dropped, because a control
+     * does not want one; so is `data-slot="drawer-trigger"`, since the
+     * delegate's recipe owns that attribute.
+     */
+    as?: ValidComponent;
 };
 export type DrawerBackdropProps = Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & UIBaseProps & {
     children: JSX.Element;

package/dist/components/drawer/Drawer.generated.js

@@ -1,4 +1,4 @@
-import { Portal, className, createComponent, delegateEvents, effect, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
+import { Dynamic, Portal, className, createComponent, delegateEvents, effect, insert, memo, mergeProps, ref, spread, template } from "@solidjs/web";
 import { defineComponent } from "solid-layouts/solid-2/application-boundary";
 import "./Drawer.css";
 import { Show, createSignal, createTrackedEffect, createUniqueId, omit, onCleanup } from "solid-js";
@@ -179,36 +179,66 @@ const DrawerRoot = defineComponent({
     ]
 });
 const __solidLayoutDrawerTrigger = (_stable, p)=>{
-    const others = omit(p, "children", "class", "dataTheme", "style", "onClick");
+    const others = omit(p, "children", "class", "dataTheme", "style", "onClick", "as");
     const ctx = useDrawerContext();
     const handleClick = (event)=>{
         ctx.setIsOpen(true);
         if ("function" == typeof p.onClick) p.onClick(event);
     };
-    var _el$2 = _tmpl$2();
-    spread(_el$2, mergeProps(others, {
-        type: "button",
-        get ["class"] () {
-            return twMerge(CLASSES.Trigger.base, p.class);
-        },
-        "data-slot": "drawer-trigger",
-        get ["data-theme"] () {
-            return p.dataTheme;
+    return createComponent(Show, {
+        get when () {
+            return p.as;
         },
-        get style () {
-            return p.style;
+        get fallback () {
+            var _el$2 = _tmpl$2();
+            spread(_el$2, mergeProps(others, {
+                type: "button",
+                get ["class"] () {
+                    return twMerge(CLASSES.Trigger.base, p.class);
+                },
+                "data-slot": "drawer-trigger",
+                get ["data-theme"] () {
+                    return p.dataTheme;
+                },
+                get style () {
+                    return p.style;
+                },
+                onClick: handleClick
+            }), true);
+            insert(_el$2, ()=>p.children);
+            return _el$2;
         },
-        onClick: handleClick
-    }), true);
-    insert(_el$2, ()=>p.children);
-    return _el$2;
+        get children () {
+            return createComponent(Dynamic, mergeProps({
+                get component () {
+                    return p.as;
+                }
+            }, others, {
+                type: "button",
+                get ["class"] () {
+                    return p.class;
+                },
+                get ["data-theme"] () {
+                    return p.dataTheme;
+                },
+                get style () {
+                    return p.style;
+                },
+                onClick: handleClick,
+                get children () {
+                    return p.children;
+                }
+            }));
+        }
+    });
 };
 const DrawerTrigger = defineComponent({
     recipe: componentRecipe,
     layout: __solidLayoutDrawerTrigger,
     embedded: true,
     behaviour: [
-        "children"
+        "children",
+        "as"
     ]
 });
 const __solidLayoutDrawerContent = (_stable, p)=>{

package/dist/components/icon/Icon.generated.d.ts

@@ -19,5 +19,20 @@ export type IconProps = UIBaseProps & {
     width?: number;
     height?: number;
     flavor?: Flavor;
+    /**
+     * What this icon means, for an icon that carries meaning on its own.
+     *
+     * Most icons sit beside a label that already says it, and repeating it makes
+     * a reader hear the same thing twice; those stay hidden, which is the
+     * default and stays the default. The ones that need this are the icons that
+     * *are* the label: a status glyph in a table cell, a lone mark in a square
+     * button, a trend arrow next to a bare number.
+     *
+     * Setting it swaps `aria-hidden="true"` for `role="img"` and this name. The
+     * default was right and there was simply no way off it: `aria-hidden` was
+     * written straight into the markup, so it survived any `aria-label` a call
+     * site passed through and the icon stayed out of the tree regardless.
+     */
+    label?: string;
 };
 export declare const IconLayout: __LayoutComponent<IconProps>;

package/dist/components/icon/Icon.generated.js

@@ -21,7 +21,15 @@ const __solidLayoutIconLayout = (_stable, p)=>(()=>{
             get ["data-source"] () {
                 return "string" == typeof p.src ? "preload" : "svg";
             },
-            "aria-hidden": "true"
+            get role () {
+                return p.label ? "img" : void 0;
+            },
+            get ["aria-label"] () {
+                return p.label;
+            },
+            get ["aria-hidden"] () {
+                return p.label ? void 0 : "true";
+            }
         }), true);
         insert(_el$, createComponent(Show, {
             get when () {
@@ -53,7 +61,8 @@ const IconLayout = defineComponent({
         "src",
         "width",
         "height",
-        "flavor"
+        "flavor",
+        "label"
     ]
 });
 export { IconLayout };

package/dist/components/immersive-landing/ImmersiveLanding.css

@@ -358,7 +358,7 @@
   .immersive-landing-cookie__manage-button {
     border: 0;
     background: transparent;
-    color: color-mix(in oklab, var(--color-base-content) 70%, transparent);
+    color: var(--color-base-content);
     font-size: 0.875rem;
     text-decoration: underline;
     cursor: pointer;

package/dist/components/immersive-landing/components/CookieConsent.interactions.d.ts

@@ -0,0 +1,24 @@
+/**
+ * Whether a press on the preferences backdrop should dismiss the dialog.
+ *
+ * The backdrop closes the dialog and is an ancestor of the panel, so every
+ * press inside the panel reaches it too. The panel guarded itself the usual
+ * way, with `stopPropagation()` on its own click handler, and that guard does
+ * not hold in the browser engine the fleet ships: `stopPropagation` is defined
+ * there, but event dispatch is deferred, so the host has finished propagating
+ * before it calls into the page and the call is a no-op. The engine expresses
+ * the same intent as a flag fixed when the listener is registered, which means
+ * no runtime call can ever express it. Measured on two sites: pressing
+ * Analytics or Marketing closed the whole dialog, so no category could be
+ * changed at all.
+ *
+ * Comparing the press target against the element the handler is bound to needs
+ * nothing from the engine beyond the two properties every event already
+ * carries. A press that started inside the panel reports the panel, or
+ * something under it, as its target, and only a press that landed on the
+ * backdrop itself reports the backdrop.
+ */
+export declare const dismissesOnBackdropPress: (event: {
+    target: EventTarget | null;
+    currentTarget: EventTarget | null;
+}) => boolean;

package/dist/components/immersive-landing/components/CookieConsent.interactions.js

@@ -0,0 +1,2 @@
+const dismissesOnBackdropPress = (event)=>event.target === event.currentTarget;
+export { dismissesOnBackdropPress };