@pathscale/ui 3.1.0 → 3.2.0

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

@@ -3,7 +3,8 @@ import { Show, createSignal, onCleanup, onSettled } from "solid-js";
 import button_0 from "../../button/index.js";
 import flex from "../../flex/index.js";
 import { CLASSES } from "../ImmersiveLanding.recipe.js";
-var _tmpl$ = /*#__PURE__*/ template("<p>"), _tmpl$2 = /*#__PURE__*/ template("<button>"), _tmpl$3 = /*#__PURE__*/ template("<div><div>"), _tmpl$4 = /*#__PURE__*/ template("<h2>"), _tmpl$5 = /*#__PURE__*/ template("<label><span></span><input>"), _tmpl$6 = /*#__PURE__*/ template("<div><div><!><!><!>");
+import { dismissesOnBackdropPress } from "./CookieConsent.interactions.js";
+var _tmpl$ = /*#__PURE__*/ template("<p>"), _tmpl$2 = /*#__PURE__*/ template("<div><div>"), _tmpl$3 = /*#__PURE__*/ template("<h2>"), _tmpl$4 = /*#__PURE__*/ template("<label><span></span><input>"), _tmpl$5 = /*#__PURE__*/ template("<div><div><!><!><!>");
 const defaultTexts = {
     message: "We use cookies to improve your experience. You can accept all cookies or manage your preferences.",
     acceptAll: "Accept all",
@@ -79,6 +80,10 @@ const CookieConsent = (props)=>{
     const handleManageClose = ()=>{
         setShowManage(false);
     };
+    const handleBackdropClick = (event)=>{
+        if (!dismissesOnBackdropPress(event)) return;
+        handleManageClose();
+    };
     const handleManageSave = ()=>{
         localStorage.setItem(CONSENT_KEY(), "custom");
         localStorage.setItem(ANALYTICS_KEY(), analyticsEnabled().toString());
@@ -110,7 +115,7 @@ const CookieConsent = (props)=>{
                 return showBanner();
             },
             get children () {
-                var _el$ = _tmpl$3(), _el$2 = _el$.firstChild;
+                var _el$ = _tmpl$2(), _el$2 = _el$.firstChild;
                 spread(_el$, mergeProps({
                     role: "dialog",
                     "aria-modal": "false",
@@ -168,18 +173,18 @@ const CookieConsent = (props)=>{
                                                 return texts().decline;
                                             }
                                         })),
-                                        (()=>{
-                                            var _el$4 = _tmpl$2();
-                                            spread(_el$4, mergeProps({
-                                                type: "button"
-                                            }, ()=>({
-                                                    class: CLASSES.cookie.manageButton
-                                                }), {
-                                                onClick: handleManageOpen
-                                            }), true);
-                                            insert(_el$4, ()=>texts().manage);
-                                            return _el$4;
-                                        })()
+                                        createComponent(button_0, mergeProps({
+                                            type: "button",
+                                            variant: "ghost",
+                                            size: "sm"
+                                        }, ()=>({
+                                                class: CLASSES.cookie.manageButton
+                                            }), {
+                                            onClick: handleManageOpen,
+                                            get children () {
+                                                return texts().manage;
+                                            }
+                                        }))
                                     ];
                                 }
                             }))
@@ -194,22 +199,22 @@ const CookieConsent = (props)=>{
                 return showManage();
             },
             get children () {
-                var _el$5 = _tmpl$6(), _el$6 = _el$5.firstChild, _el$15 = _el$6.firstChild, _el$16 = _el$15.nextSibling, _el$17 = _el$16.nextSibling;
-                spread(_el$5, mergeProps({
+                var _el$4 = _tmpl$5(), _el$5 = _el$4.firstChild, _el$14 = _el$5.firstChild, _el$15 = _el$14.nextSibling, _el$16 = _el$15.nextSibling;
+                spread(_el$4, mergeProps({
                     role: "dialog",
                     "aria-modal": "true",
                     "aria-labelledby": "cookie-manage-title"
                 }, ()=>({
                         class: CLASSES.cookie.modalBackdrop
                     }), {
-                    onClick: handleManageClose
+                    onClick: handleBackdropClick
                 }), true);
-                spread(_el$6, mergeProps(()=>({
+                spread(_el$5, mergeProps(()=>({
                         class: CLASSES.cookie.modalCard
                     }), {
                     onClick: (e)=>e.stopPropagation()
                 }), true);
-                insert(_el$6, createComponent(flex, mergeProps({
+                insert(_el$5, createComponent(flex, mergeProps({
                     justify: "between",
                     align: "center"
                 }, ()=>({
@@ -218,14 +223,14 @@ const CookieConsent = (props)=>{
                     get children () {
                         return [
                             (()=>{
-                                var _el$7 = _tmpl$4();
-                                spread(_el$7, mergeProps({
+                                var _el$6 = _tmpl$3();
+                                spread(_el$6, mergeProps({
                                     id: "cookie-manage-title"
                                 }, ()=>({
                                         class: CLASSES.cookie.modalTitle
                                     })), true);
-                                insert(_el$7, ()=>texts().manageTitle);
-                                return _el$7;
+                                insert(_el$6, ()=>texts().manageTitle);
+                                return _el$6;
                             })(),
                             createComponent(button_0, {
                                 size: "sm",
@@ -239,8 +244,8 @@ const CookieConsent = (props)=>{
                             })
                         ];
                     }
-                })), _el$15);
-                insert(_el$6, createComponent(flex, mergeProps({
+                })), _el$14);
+                insert(_el$5, createComponent(flex, mergeProps({
                     direction: "col",
                     gap: "md"
                 }, ()=>({
@@ -249,33 +254,33 @@ const CookieConsent = (props)=>{
                     get children () {
                         return [
                             (()=>{
-                                var _el$8 = _tmpl$5(), _el$9 = _el$8.firstChild, _el$0 = _el$9.nextSibling;
-                                spread(_el$8, mergeProps(()=>({
+                                var _el$7 = _tmpl$4(), _el$8 = _el$7.firstChild, _el$9 = _el$8.nextSibling;
+                                spread(_el$7, mergeProps(()=>({
                                         class: `${CLASSES.cookie.preferenceRow} ${CLASSES.cookie.preferenceRowLocked}`
                                     })), true);
-                                spread(_el$9, mergeProps(()=>({
+                                spread(_el$8, mergeProps(()=>({
                                         class: CLASSES.cookie.preferenceLabel
                                     })), true);
-                                insert(_el$9, ()=>texts().essential);
-                                spread(_el$0, mergeProps({
+                                insert(_el$8, ()=>texts().essential);
+                                spread(_el$9, mergeProps({
                                     type: "checkbox",
                                     checked: true,
                                     disabled: true
                                 }, ()=>({
                                         class: CLASSES.cookie.toggle
                                     })), false);
-                                return _el$8;
+                                return _el$7;
                             })(),
                             (()=>{
-                                var _el$1 = _tmpl$5(), _el$10 = _el$1.firstChild, _el$11 = _el$10.nextSibling;
-                                spread(_el$1, mergeProps(()=>({
+                                var _el$0 = _tmpl$4(), _el$1 = _el$0.firstChild, _el$10 = _el$1.nextSibling;
+                                spread(_el$0, mergeProps(()=>({
                                         class: CLASSES.cookie.preferenceRow
                                     })), true);
-                                spread(_el$10, mergeProps(()=>({
+                                spread(_el$1, mergeProps(()=>({
                                         class: CLASSES.cookie.preferenceLabel
                                     })), true);
-                                insert(_el$10, ()=>texts().analytics);
-                                spread(_el$11, mergeProps({
+                                insert(_el$1, ()=>texts().analytics);
+                                spread(_el$10, mergeProps({
                                     type: "checkbox",
                                     get checked () {
                                         return analyticsEnabled();
@@ -284,18 +289,18 @@ const CookieConsent = (props)=>{
                                 }, ()=>({
                                         class: CLASSES.cookie.toggle
                                     })), false);
-                                return _el$1;
+                                return _el$0;
                             })(),
                             (()=>{
-                                var _el$12 = _tmpl$5(), _el$13 = _el$12.firstChild, _el$14 = _el$13.nextSibling;
-                                spread(_el$12, mergeProps(()=>({
+                                var _el$11 = _tmpl$4(), _el$12 = _el$11.firstChild, _el$13 = _el$12.nextSibling;
+                                spread(_el$11, mergeProps(()=>({
                                         class: CLASSES.cookie.preferenceRow
                                     })), true);
-                                spread(_el$13, mergeProps(()=>({
+                                spread(_el$12, mergeProps(()=>({
                                         class: CLASSES.cookie.preferenceLabel
                                     })), true);
-                                insert(_el$13, ()=>texts().marketing);
-                                spread(_el$14, mergeProps({
+                                insert(_el$12, ()=>texts().marketing);
+                                spread(_el$13, mergeProps({
                                     type: "checkbox",
                                     get checked () {
                                         return marketingEnabled();
@@ -304,12 +309,12 @@ const CookieConsent = (props)=>{
                                 }, ()=>({
                                         class: CLASSES.cookie.toggle
                                     })), false);
-                                return _el$12;
+                                return _el$11;
                             })()
                         ];
                     }
-                })), _el$16);
-                insert(_el$6, createComponent(flex, mergeProps({
+                })), _el$15);
+                insert(_el$5, createComponent(flex, mergeProps({
                     gap: "sm",
                     justify: "end"
                 }, ()=>({
@@ -338,8 +343,8 @@ const CookieConsent = (props)=>{
                             }))
                         ];
                     }
-                })), _el$17);
-                return _el$5;
+                })), _el$16);
+                return _el$4;
             }
         })
     ];

package/dist/components/immersive-landing/components/FirefoxPWABanner.js

@@ -1,9 +1,9 @@
-import { createComponent, insert, mergeProps, spread, template } from "@solidjs/web";
+import { createComponent, insert, memo, mergeProps, spread, template } from "@solidjs/web";
 import { Show, createSignal, onSettled } from "solid-js";
 import button_0 from "../../button/index.js";
 import card from "../../card/index.js";
 import flex from "../../flex/index.js";
-import icon from "../../icon/index.js";
+import icon_0 from "../../icon/index.js";
 import { CLASSES } from "../ImmersiveLanding.recipe.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template("<h3>"), _tmpl$3 = /*#__PURE__*/ template("<p>");
 const defaultTexts = {
@@ -89,8 +89,8 @@ const FirefoxPWABanner = (props)=>{
                                 return texts().closeLabel;
                             },
                             get children () {
-                                return createComponent(icon, {
-                                    src: "icon-[mdi--close]",
+                                return createComponent(icon_0, {
+                                    src: "icon-[lucide--x]",
                                     width: 16,
                                     height: 16
                                 });
@@ -115,17 +115,17 @@ const FirefoxPWABanner = (props)=>{
                                                     })), true);
                                                 insert(_el$2, createComponent(Show, {
                                                     get when () {
-                                                        return "firefox" === browser();
+                                                        return memo(()=>"firefox" === browser())() && props.icon;
                                                     },
-                                                    get children () {
-                                                        return createComponent(icon, mergeProps({
-                                                            src: "icon-[mdi--firefox]",
+                                                    children: (icon)=>createComponent(icon_0, mergeProps({
+                                                            get src () {
+                                                                return icon();
+                                                            },
                                                             width: 40,
                                                             height: 40
                                                         }, ()=>({
                                                                 class: CLASSES.firefoxBanner.browserIcon
-                                                            })));
-                                                    }
+                                                            })))
                                                 }));
                                                 return _el$2;
                                             })(),

package/dist/components/immersive-landing/types.d.ts

@@ -115,6 +115,21 @@ export interface FirefoxPWABannerProps {
     extensionUrl?: string;
     storageKey?: string;
     texts?: FirefoxPWABannerTexts;
+    /**
+     * The browser mark shown beside the text. Omit it and the banner renders
+     * without one.
+     *
+     * A default lived here as `icon-[mdi--firefox]`, and it was the only reason
+     * this library needed a second Iconify set. Everything else it draws is
+     * `lucide`, which has no brand glyphs, so one banner in one optional
+     * component obliged every consumer to install all of `-json/mdi` --
+     * and a consumer who installed only `lucide` got build warnings and a blank
+     * space, which is what happened on crates.vip.
+     *
+     * Accepts what `Icon` accepts: an Iconify class such as
+     * `"icon-[mdi--firefox]"`, or an inline SVG element.
+     */
+    icon?: string | JSX.Element;
     onInstall?: () => void;
     onDismiss?: () => void;
 }

package/dist/components/language-switcher/LanguageSwitcher.generated.js

@@ -51,7 +51,7 @@ const __solidLayoutLanguageSwitcher = (_stable, p)=>{
                             },
                             get fallback () {
                                 return createComponent(icon, mergeProps({
-                                    src: "icon-[mdi--loading]"
+                                    src: "icon-[lucide--loader-circle]"
                                 }, ()=>({
                                         class: CLASSES.loadingIcon
                                     }), {

package/dist/components/live-chat/LiveChatPanel.generated.js

@@ -6,6 +6,7 @@ import { twMerge } from "../../lib/twMerge.js";
 import button_0 from "../button/index.js";
 import input from "../input/index.js";
 import { CLASSES, componentRecipe } from "./LiveChat.recipe.js";
+import { formatChatTime } from "./LiveChatPanel.interactions.js";
 var _tmpl$ = /*#__PURE__*/ template("<div>"), _tmpl$2 = /*#__PURE__*/ template('<div><div><div><svg><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M8 12h.01M12 12h.01M16 12h.01M21 12c0 4.418-4.03 8-9 8a9.863 9.863 0 01-4.255-.949L3 20l1.395-3.72C3.512 15.042 3 13.574 3 12c0-4.418 4.03-8 9-8s9 3.582 9 8z"></path></svg><h3></h3></div><button><svg><path stroke-linecap=round stroke-linejoin=round stroke-width=2 d="M6 18L18 6M6 6l12 12"></path></svg></button></div><div><!><!></div><div><!><!>'), _tmpl$3 = /*#__PURE__*/ template("<div><div></div><div><div><p></p></div><span>"), _tmpl$4 = /*#__PURE__*/ template("<span>");
 const getMockMessages = ()=>{
     const salesMessages = [
@@ -59,11 +60,6 @@ const getMockMessages = ()=>{
         ...supportMessages
     ].sort((a, b)=>a.timestamp - b.timestamp);
 };
-const formatTime = (timestamp)=>new Intl.DateTimeFormat("en-US", {
-        hour: "numeric",
-        minute: "2-digit",
-        hour12: true
-    }).format(new Date(timestamp));
 const __solidLayoutLiveChatPanel = (_stable, p)=>{
     const others = omit(p, "onClose", "title", "placeholder", "closeLabel", "sendLabel", "emptyMessage", "mockMode", "messages", "onSendMessage", "isSending", "autoScrollOnNewMessage", "autoScrollBehavior", "stickToBottomThreshold", "class", "style");
     const [internalMessages, setInternalMessages] = createSignal([]);
@@ -267,7 +263,7 @@ const __solidLayoutLiveChatPanel = (_stable, p)=>{
             spread(_el$18, mergeProps(()=>({
                     class: CLASSES.panel.timestamp
                 })), true);
-            insert(_el$18, ()=>formatTime(message.timestamp));
+            insert(_el$18, ()=>formatChatTime(message.timestamp));
             return _el$13;
         }
     }), _el$0);

package/dist/components/live-chat/LiveChatPanel.interactions.d.ts

@@ -0,0 +1,21 @@
+/**
+ * A chat timestamp, formatted without `Intl`.
+ *
+ * The panel used to build its timestamps with
+ * `new Intl.DateTimeFormat("en-US", { hour: "numeric", minute: "2-digit",
+ * hour12: true })`. `Intl` is not defined in the browser engine the fleet
+ * ships, so that constructor threw a `ReferenceError` while a message list was
+ * rendering. The consequence is not a wrong timestamp: the error escapes the
+ * render, Solid halts its reactive system, and the page keeps painting the
+ * frame it already had while every control on it is dead. Measured on
+ * pathscale.com, where opening the support chat killed the whole application,
+ * and this one call was the only `Intl` reference in that bundle.
+ *
+ * A clock reading of `3:07 PM` needs no locale database, so this does the
+ * conversion with plain `Date` accessors and keeps the `en-US` output byte for
+ * byte: a bare 12-hour hour, a colon, two-digit minutes, a space, and `AM` or
+ * `PM`. `Meter` guards its `Intl.NumberFormat` in a `try`/`catch` for the same
+ * reason; a fallback is not needed here because there is nothing to fall back
+ * from.
+ */
+export declare const formatChatTime: (timestamp: number) => string;

package/dist/components/live-chat/LiveChatPanel.interactions.js

@@ -0,0 +1,10 @@
+const formatChatTime = (timestamp)=>{
+    const date = new Date(timestamp);
+    const hours = date.getHours();
+    const minutes = date.getMinutes();
+    const hour12 = hours % 12 === 0 ? 12 : hours % 12;
+    const suffix = hours < 12 ? "AM" : "PM";
+    const paddedMinutes = minutes < 10 ? `0${minutes}` : `${minutes}`;
+    return `${hour12}:${paddedMinutes} ${suffix}`;
+};
+export { formatChatTime };

package/dist/components/popover/Popover.a11y.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Which name reaches the node that carries `role="dialog"`.
+ *
+ * `role="dialog"` is on `Popover.Content`, because the content is the
+ * portalled overlay and `Popover.Dialog` is an optional panel inside it. A
+ * reader naming a dialog writes `aria-label` on `Popover.Dialog`, which is the
+ * part called Dialog, so the name landed on a generic inside the dialog and
+ * named nothing at all. Measured on two sites: every popover dialog in the
+ * fleet was anonymous.
+ *
+ * The name travels up to the role rather than the role travelling down to the
+ * name. Moving `role="dialog"` onto `Popover.Dialog` would leave a popover
+ * written without one with no dialog, and would make two dialogs of a popover
+ * written with two panels.
+ *
+ * `aria-labelledby` outranks `aria-label` in the accessible name calculation,
+ * so a supplied name has to *replace* the fallback reference to the trigger
+ * rather than sit beside it. Leaving both would keep the dialog named after
+ * the button that opened it while the author's own name was ignored, which is
+ * the same silent failure in a new place.
+ */
+export type PopoverDialogNameInput = {
+    /** `aria-label` written on `Popover.Content` itself. Outranks everything. */
+    contentLabel?: string;
+    /** `aria-labelledby` written on `Popover.Content` itself. */
+    contentLabelledBy?: string;
+    /** `aria-label` written on a `Popover.Dialog` inside the content. */
+    dialogLabel?: string;
+    /** `aria-labelledby` written on a `Popover.Dialog` inside the content. */
+    dialogLabelledBy?: string;
+    /** The trigger's id, used only when nothing else names the dialog. */
+    triggerId?: string;
+};
+export type PopoverDialogName = {
+    "aria-label": string | undefined;
+    "aria-labelledby": string | undefined;
+};
+/**
+ * An ARIA attribute value as a name, or nothing.
+ *
+ * Solid types every `aria-*` attribute as `string | RemoveAttribute`, where the
+ * second member is `false` and means "do not emit this". A name is only ever
+ * the first, and the second has to become `undefined` before it can be
+ * compared, stored or handed to another element.
+ */
+export declare const asAriaName: (value: unknown) => string | undefined;
+export declare const resolvePopoverDialogName: (input: PopoverDialogNameInput) => PopoverDialogName;

package/dist/components/popover/Popover.a11y.js

@@ -0,0 +1,19 @@
+const asAriaName = (value)=>"string" == typeof value ? value : void 0;
+const firstNonEmpty = (...values)=>values.find((value)=>void 0 !== value && "" !== value);
+const resolvePopoverDialogName = (input)=>{
+    const labelledBy = firstNonEmpty(input.contentLabelledBy, input.dialogLabelledBy);
+    const label = firstNonEmpty(input.contentLabel, input.dialogLabel);
+    if (void 0 !== labelledBy) return {
+        "aria-label": void 0,
+        "aria-labelledby": labelledBy
+    };
+    if (void 0 !== label) return {
+        "aria-label": label,
+        "aria-labelledby": void 0
+    };
+    return {
+        "aria-label": void 0,
+        "aria-labelledby": firstNonEmpty(input.triggerId)
+    };
+};
+export { asAriaName, resolvePopoverDialogName };

package/dist/components/popover/Popover.generated.d.ts

@@ -1,6 +1,7 @@
 import type { Component as __LayoutComponent } from "solid-js";
 import "./Popover.css";
 import { type JSX } from "@solidjs/web";
+import { type ValidComponent } from "solid-js";
 import "../_shared/material.css";
 import { type OverlayAnchorRect, type OverlayPlacement } from "../_shared/overlayPosition";
 import type { Material, UIBaseProps } from "../vocabulary";
@@ -23,6 +24,31 @@ export type PopoverRootProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElem
 declare const PopoverRoot: __LayoutComponent<PopoverRootProps>;
 export type PopoverTriggerProps = UIBaseProps & Omit<JSX.ButtonHTMLAttributes<HTMLButtonElement>, "children"> & {
     children: JSX.Element;
+    /**
+     * The component to be the trigger, instead of a bare button.
+     *
+     * `Popover.Trigger` renders a `button`, which is right when the trigger is
+     * a word or a glyph. It is wrong when the call site hands it a control:
+     * `<Popover.Trigger><Button>Filters</Button></Popover.Trigger>` emitted a
+     * second, anonymous button wrapping the named one at identical
+     * coordinates. Found on three separate sites. Nested interactive content
+     * is invalid HTML, and a press by coordinate lands on the anonymous outer
+     * one rather than on the control that was written.
+     *
+     * `as` makes the control *be* the trigger, so there is one element:
+     *
+     * ```tsx
+     * <Popover.Trigger as={Button} flavor="primary">Filters</Popover.Trigger>
+     * ```
+     *
+     * The wiring -- id, `aria-haspopup`, `aria-expanded`, `aria-controls`, the
+     * ref and both handlers -- goes to the delegate, and anything else written
+     * here goes with it. The trigger's own class is a button reset and is
+     * dropped, because a control does not want one; so is
+     * `data-slot="popover-trigger"`, since the delegate's recipe owns that
+     * attribute. Select the delegate's own slot, or `[aria-haspopup="dialog"]`.
+     */
+    as?: ValidComponent;
 };
 declare const PopoverTrigger: __LayoutComponent<PopoverTriggerProps>;
 export type PopoverContentProps = UIBaseProps & Omit<JSX.HTMLAttributes<HTMLDivElement>, "children"> & {