@pantheon-systems/pds-toolkit-react 2.0.0-alpha.86 → 2.0.0-alpha.88

package/codemods/v1-to-v2/mappings.json

@@ -625,6 +625,18 @@
 				"prop": "defaultPresetLabel",
 				"description": "New optional prop naming which presets entry (by its own label) starts out active. The named preset renders pressed in the list, its computed range seeds the selection so the calendar opens on it, and the trigger renders as a real selection rather than muted placeholder text. onChange is deliberately not called for this initial value. Mount-only, like defaultValue on an HTML input, and a no-op (development warning only) when the label matches no entry.",
 				"usage": "Set defaultPresetLabel to one of your presets' labels when the surface's underlying query already has a default window (e.g. a log viewer defaulting to the last 15 minutes), so the trigger reports what is actually on screen. Read your own initial state from the same constant you pass here rather than waiting for onChange. Requires presets and mode='range'."
+			},
+			{
+				"component": "Datepicker",
+				"prop": "hourCycle",
+				"description": "New optional prop setting the hour format of the showTime field(s), forwarded to each embedded Timepicker. Defaults to 12 (hour + AM/PM, e.g. \"12:30 PM\"); 24 renders a 24-hour segment with no AM/PM (e.g. \"13:30\"). Existing pickers are unchanged.",
+				"usage": "Set hourCycle={24} on a surface whose other timestamps are already 24-hour, such as a log viewer. It cannot be reached through locale — the embedded fields always receive an explicit hourCycle, which overrides locale-derived formatting."
+			},
+			{
+				"component": "Datepicker",
+				"prop": "showTodayButton",
+				"description": "New opt-out prop for the calendar footer's \"Today\" button. Defaults to true, so existing footers are unchanged; false leaves just the end-aligned buttons — Clear, plus Done when mode is \"range\" or showTime is set.",
+				"usage": "Set showTodayButton={false} where jumping to today is meaningless or redundant — e.g. a range picker whose presets already cover the current window. Blanking translationStrings.todayButton only empties the label, leaving the button in place."
 			}
 		],
 		"removals": [

package/dist/components/StatusScrim/StatusScrim.d.ts

@@ -0,0 +1,22 @@
+import { ComponentPropsWithoutRef } from 'react';
+import './status-scrim.css';
+export type StatusScrimStatus = 'frozen' | 'restricted';
+export interface StatusScrimProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Label text. Defaults to 'Frozen' / 'Restricted' based on status; override
+     * for translation.
+     */
+    label?: string;
+    /**
+     * Which status the scrim represents. Sets the icon and default label.
+     */
+    status: StatusScrimStatus;
+}
+/**
+ * StatusScrim UI component
+ */
+export declare const StatusScrim: ({ className, label, status, ...props }: StatusScrimProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/buttons/MenuButton/MenuButton.d.ts

@@ -1,4 +1,5 @@
-import { ComponentPropsWithRef, ReactNode } from 'react';
+import { ComponentPropsWithRef, ReactNode, RefObject } from 'react';
+import { type Placement } from '@floating-ui/react';
 import { StatusDotType } from '../../../libs/components/StatusDot/StatusDot';
 import { ButtonVariant, HeadingItemType, LinkItemType, MenuItemType, NodeItemType, SeparatorItemType } from '../../../libs/types/custom-types';
 import { TallyProps } from '../../badges/Tally/Tally';
@@ -65,6 +66,21 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
      * default (which can otherwise leave focus on an ancestor panel).
      */
     onOpenChange?: (isOpen: boolean) => void;
+    /**
+     * Preferred placement of the dropdown panel relative to its anchor.
+     * Defaults to `bottom-start` (current behavior). `SplitButton` passes
+     * this through unchanged — see its own `placement` prop.
+     */
+    placement?: Placement;
+    /**
+     * Ref to an ancestor element that Floating UI should use as the
+     * *position* reference (while the trigger button remains the
+     * *interaction* reference for click/keyboard). Set internally by
+     * `SplitButton` when `isSplitButton` is true, so the panel anchors to
+     * the whole split-button control instead of just the caret half. Not
+     * intended for direct use outside `SplitButton`.
+     */
+    positionReferenceRef?: RefObject<HTMLElement | null>;
     /**
      * Which size of button to render.
      */

package/dist/components/buttons/SplitButton/SplitButton.d.ts

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
+import type { Placement } from '@floating-ui/react';
 import { ButtonVariant, LinkItemType, MenuItemType } from '../../../libs/types/custom-types';
 import { PDSIcon } from '../../icons/Icon/Icon';
 import './split-button.css';
@@ -11,6 +12,16 @@ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
      * Array of menu items
      */
     actionItems: Array<LinkItemType | MenuItemType>;
+    /**
+     * Anchor the actions menu panel to the whole button (primary action +
+     * caret combined) instead of just the caret trigger. Defaults to
+     * `false` — the panel positions relative to the caret alone, matching
+     * current behavior. Set this when `placement` needs to align the panel
+     * with an edge of the whole control (e.g. `bottom-start` under the
+     * primary action's left edge, for a table row action) rather than just
+     * the caret's narrow width.
+     */
+    anchorToFullButton?: boolean;
     /**
      * Additional class names
      */
@@ -32,6 +43,14 @@ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
      * Label for the buttons additional actions menu.
      */
     moreActionsLabel?: string;
+    /**
+     * Preferred placement of the actions menu panel. Defaults to
+     * `bottom-start`, matching `MenuButton`'s own default. Aligns relative
+     * to the caret trigger alone unless `anchorToFullButton` is set, in
+     * which case it aligns relative to the whole control instead. Passed
+     * straight through to the underlying `MenuButton`.
+     */
+    placement?: Placement;
     /**
      * Which size of button to render
      */
@@ -44,5 +63,5 @@ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
 /**
  * A component used to render a button with a primary action and a menu of additional options
  */
-export declare const SplitButton: ({ actionItems, className, disabled, iconName, id, moreActionsLabel, size, variant, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SplitButton: ({ actionItems, anchorToFullButton, className, disabled, iconName, id, moreActionsLabel, placement, size, variant, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/icons/Icon/generated-icon-data.d.ts

@@ -3,7 +3,7 @@
  *
  * Generated by: npm run generate:icon-data
  * Source: icon-registry.ts + Font Awesome packages + custom-icons.tsx
- * Generated: 2026-09-14T19:57:38.047Z
+ * Generated: 2026-09-21T20:03:42.361Z
  */
 import { customIcons } from './custom-icons';
 export { customIcons };
@@ -1002,6 +1002,13 @@ export declare const iconData: {
         readonly svgPathData: "M416 32L31.9 32C14.3 32 0 46.5 0 64.3L0 447.7C0 465.5 14.3 480 31.9 480L416 480c17.6 0 32-14.5 32-32.3l0-383.4C448 46.5 433.6 32 416 32zM135.4 416l-66.4 0 0-213.8 66.5 0 0 213.8-.1 0zM102.2 96a38.5 38.5 0 1 1 0 77 38.5 38.5 0 1 1 0-77zM384.3 416l-66.4 0 0-104c0-24.8-.5-56.7-34.5-56.7-34.6 0-39.9 27-39.9 54.9l0 105.8-66.4 0 0-213.8 63.7 0 0 29.2 .9 0c8.9-16.8 30.6-34.5 62.9-34.5 67.2 0 79.7 44.3 79.7 101.9l0 117.2z";
         readonly width: 448;
     };
+    readonly list: {
+        readonly aliases: readonly [];
+        readonly categories: readonly ["data", "navigation"];
+        readonly height: 512;
+        readonly svgPathData: "M40 48C26.7 48 16 58.7 16 72l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24L40 48zM184 72c-13.3 0-24 10.7-24 24s10.7 24 24 24l304 0c13.3 0 24-10.7 24-24s-10.7-24-24-24L184 72zm0 160c-13.3 0-24 10.7-24 24s10.7 24 24 24l304 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-304 0zm0 160c-13.3 0-24 10.7-24 24s10.7 24 24 24l304 0c13.3 0 24-10.7 24-24s-10.7-24-24-24l-304 0zM16 232l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0c-13.3 0-24 10.7-24 24zM40 368c-13.3 0-24 10.7-24 24l0 48c0 13.3 10.7 24 24 24l48 0c13.3 0 24-10.7 24-24l0-48c0-13.3-10.7-24-24-24l-48 0z";
+        readonly width: 512;
+    };
     readonly listCheck: {
         readonly aliases: readonly ["checklist", "todo", "tasks"];
         readonly categories: readonly ["actions"];
@@ -1191,6 +1198,13 @@ export declare const iconData: {
         readonly svgPathData: "M64 112c-8.8 0-16 7.2-16 16l0 256c0 8.8 7.2 16 16 16l384 0c8.8 0 16-7.2 16-16l0-256c0-8.8-7.2-16-16-16L64 112zM0 128C0 92.7 28.7 64 64 64l384 0c35.3 0 64 28.7 64 64l0 256c0 35.3-28.7 64-64 64L64 448c-35.3 0-64-28.7-64-64L0 128zM160 320a32 32 0 1 1 -64 0 32 32 0 1 1 64 0zm-32-96a32 32 0 1 1 0-64 32 32 0 1 1 0 64zm104-56l160 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-160 0c-13.3 0-24-10.7-24-24s10.7-24 24-24zm0 128l160 0c13.3 0 24 10.7 24 24s-10.7 24-24 24l-160 0c-13.3 0-24-10.7-24-24s10.7-24 24-24z";
         readonly width: 512;
     };
+    readonly rectanglesMixed: {
+        readonly aliases: readonly ["bento", "boxes"];
+        readonly categories: readonly ["navigation", "objects"];
+        readonly height: 512;
+        readonly svgPathData: "M240 112l0 96-192 0 0-96 192 0zM48 64C21.5 64 0 85.5 0 112l0 96c0 26.5 21.5 48 48 48l192 0c26.5 0 48-21.5 48-48l0-96c0-26.5-21.5-48-48-48L48 64zm416 48l0 256-64 0 0-256 64 0zM400 64c-26.5 0-48 21.5-48 48l0 256c0 26.5 21.5 48 48 48l64 0c26.5 0 48-21.5 48-48l0-256c0-26.5-21.5-48-48-48l-64 0zM112 368l128 0 0 64-128 0 0-64zm-48 0l0 64c0 26.5 21.5 48 48 48l128 0c26.5 0 48-21.5 48-48l0-64c0-26.5-21.5-48-48-48l-128 0c-26.5 0-48 21.5-48 48z";
+        readonly width: 512;
+    };
     readonly reply: {
         readonly aliases: readonly ["respond", "answer"];
         readonly categories: readonly ["actions", "communication"];
@@ -1640,7 +1654,7 @@ export declare const iconData: {
         readonly width: 576;
     };
 };
-export declare const iconList: readonly ["angleDown", "angleLeft", "angleRight", "anglesDown", "anglesLeft", "anglesRight", "anglesUp", "angleUp", "arrowDownToLine", "arrowDownWideShort", "arrowLeft", "arrowRight", "arrowsRetweet", "arrowUpShortWide", "asterisk", "banBug", "bars", "barsFilter", "barsStaggered", "bell", "billboard", "bitbucket", "bluesky", "bolt", "boltPantheon", "boltSolid", "book", "bookmark", "bookmarkSolid", "books", "box", "bracketRight", "bracketsSquare", "brainCircuit", "broomWide", "building", "buildings", "bullhorn", "calendarDays", "caretDown", "caretLeft", "caretRight", "caretUp", "ccAmex", "ccApplePay", "ccDiscover", "ccGeneric", "ccMC", "ccPaypal", "ccVisa", "chartLine", "chartNetwork", "chartSimple", "check", "circle", "circleCheck", "circleExclamation", "circleExclamationSolid", "circleHalfStroke", "circleInfo", "circleInfoSolid", "circleMinus", "circleNotch", "circlePlus", "circleQuestion", "circleQuestionSolid", "circleUser", "circleXmark", "claude", "clock", "cloud", "cloudArrowDown", "cloudArrowUp", "cloudPlus", "code", "codeBranch", "codeMerge", "collapseToCenter", "command", "comment", "compress", "copy", "desktop", "diagramVenn", "diamondExclamation", "diamonds4", "discourse", "display", "dollarSign", "download", "drupal", "ellipsis", "ellipsisVertical", "emptySet", "envelope", "envelopeOpen", "exclamation", "expand", "expandFromCenter", "externalLink", "eye", "eyeSlash", "facebook", "file", "fileCheck", "fileContract", "fileCSV", "fileDiff", "fileExport", "fileImport", "fileLines", "filePDF", "fileZip", "floppyDisk", "folder", "folders", "folderTree", "gear", "gem", "github", "gitlab", "globe", "graduationCap", "grid", "grid2", "gripDots", "gripDotsVertical", "heart", "heartSolid", "house", "idCard", "image", "inputText", "instagram", "keySkeleton", "landmark", "laptop", "laptopCode", "leaf", "lifeRing", "link", "linkedin", "listCheck", "locationCrosshairs", "lock", "lockOpen", "magnifyingGlass", "medal", "memo", "messages", "minus", "moon", "move", "nextJs", "octagonExclamation", "openai", "paperclip", "paperPlane", "pause", "pen", "penField", "penPaintbrush", "phone", "play", "plus", "question", "quotesLeft", "quotesRight", "rectangleList", "reply", "robot", "rocketLaunch", "rotate", "rotateClock", "rotateLeft", "rotateRight", "rss", "save", "server", "shareNodes", "shield", "shieldQuartered", "shovel", "sidebar", "siren", "sirenOn", "sitemap", "slack", "slashForward", "slider", "slidersSimple", "snowflake", "sparkles", "squareCheck", "squareCode", "squareDashed", "squareMinus", "squarePen", "squareQuestion", "squareTerminal", "star", "starSolid", "sun", "sunBright", "table", "tableColumns", "tableRows", "terminal", "text", "threads", "thumbsDown", "thumbsUp", "trash", "triangleExclamation", "twitter", "unlink", "upload", "user", "userAstronaut", "userGear", "userPlus", "users", "userSolid", "video", "wavePulse", "windowRestore", "wordpress", "wreathLaurel", "wrench", "xmark", "xmarkLarge", "xTwitter", "youtube"];
+export declare const iconList: readonly ["angleDown", "angleLeft", "angleRight", "anglesDown", "anglesLeft", "anglesRight", "anglesUp", "angleUp", "arrowDownToLine", "arrowDownWideShort", "arrowLeft", "arrowRight", "arrowsRetweet", "arrowUpShortWide", "asterisk", "banBug", "bars", "barsFilter", "barsStaggered", "bell", "billboard", "bitbucket", "bluesky", "bolt", "boltPantheon", "boltSolid", "book", "bookmark", "bookmarkSolid", "books", "box", "bracketRight", "bracketsSquare", "brainCircuit", "broomWide", "building", "buildings", "bullhorn", "calendarDays", "caretDown", "caretLeft", "caretRight", "caretUp", "ccAmex", "ccApplePay", "ccDiscover", "ccGeneric", "ccMC", "ccPaypal", "ccVisa", "chartLine", "chartNetwork", "chartSimple", "check", "circle", "circleCheck", "circleExclamation", "circleExclamationSolid", "circleHalfStroke", "circleInfo", "circleInfoSolid", "circleMinus", "circleNotch", "circlePlus", "circleQuestion", "circleQuestionSolid", "circleUser", "circleXmark", "claude", "clock", "cloud", "cloudArrowDown", "cloudArrowUp", "cloudPlus", "code", "codeBranch", "codeMerge", "collapseToCenter", "command", "comment", "compress", "copy", "desktop", "diagramVenn", "diamondExclamation", "diamonds4", "discourse", "display", "dollarSign", "download", "drupal", "ellipsis", "ellipsisVertical", "emptySet", "envelope", "envelopeOpen", "exclamation", "expand", "expandFromCenter", "externalLink", "eye", "eyeSlash", "facebook", "file", "fileCheck", "fileContract", "fileCSV", "fileDiff", "fileExport", "fileImport", "fileLines", "filePDF", "fileZip", "floppyDisk", "folder", "folders", "folderTree", "gear", "gem", "github", "gitlab", "globe", "graduationCap", "grid", "grid2", "gripDots", "gripDotsVertical", "heart", "heartSolid", "house", "idCard", "image", "inputText", "instagram", "keySkeleton", "landmark", "laptop", "laptopCode", "leaf", "lifeRing", "link", "linkedin", "list", "listCheck", "locationCrosshairs", "lock", "lockOpen", "magnifyingGlass", "medal", "memo", "messages", "minus", "moon", "move", "nextJs", "octagonExclamation", "openai", "paperclip", "paperPlane", "pause", "pen", "penField", "penPaintbrush", "phone", "play", "plus", "question", "quotesLeft", "quotesRight", "rectangleList", "rectanglesMixed", "reply", "robot", "rocketLaunch", "rotate", "rotateClock", "rotateLeft", "rotateRight", "rss", "save", "server", "shareNodes", "shield", "shieldQuartered", "shovel", "sidebar", "siren", "sirenOn", "sitemap", "slack", "slashForward", "slider", "slidersSimple", "snowflake", "sparkles", "squareCheck", "squareCode", "squareDashed", "squareMinus", "squarePen", "squareQuestion", "squareTerminal", "star", "starSolid", "sun", "sunBright", "table", "tableColumns", "tableRows", "terminal", "text", "threads", "thumbsDown", "thumbsUp", "trash", "triangleExclamation", "twitter", "unlink", "upload", "user", "userAstronaut", "userGear", "userPlus", "users", "userSolid", "video", "wavePulse", "windowRestore", "wordpress", "wreathLaurel", "wrench", "xmark", "xmarkLarge", "xTwitter", "youtube"];
 export type PDSIconName = (typeof iconList)[number];
 export declare const categoryList: readonly ["actions", "arrows", "brands", "communication", "custom", "data", "development", "documents", "financial", "media", "navigation", "objects", "security", "status", "users"];
 export type IconCategory = (typeof categoryList)[number];

package/dist/components/icons/PlatformIcon/PlatformIcon.d.ts

@@ -1,6 +1,6 @@
 import { ComponentPropsWithoutRef } from 'react';
 import './platform-icon.css';
-export type PlatformSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
+export type PlatformSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl' | '4xl' | '5xl';
 export type PlatformType = 'drupal' | 'gatsby' | 'google' | 'import-custom' | 'microsoft' | 'next' | 'splunk' | 'sumo-logic' | 'wordpress';
 export interface PlatformIconProps extends ComponentPropsWithoutRef<'div'> {
     className?: string;

package/dist/components/inputs/Combobox/Combobox.d.ts

@@ -36,6 +36,12 @@ export interface ComboboxProps extends Omit<ComponentPropsWithoutRef<'div'>, 'on
      * Is the field disabled?
      */
     disabled?: boolean;
+    /**
+     * Persistent content rendered below the options list (e.g. a "Create new…"
+     * link). Unlike an option, it isn't selectable and stays visible
+     * regardless of filtering, loading, or no-results state.
+     */
+    footer?: ReactNode;
     /**
      * Should the combobox have a clear button?
      */

package/dist/components/inputs/ComboboxMultiselect/ComboboxMultiselect.d.ts

@@ -42,6 +42,12 @@ export interface ComboboxMultiselectProps extends DivProps {
      * Is the field disabled?
      */
     disabled?: boolean;
+    /**
+     * Persistent content rendered below the options list (e.g. a "Create new…"
+     * link). Unlike an option, it isn't selectable and stays visible
+     * regardless of filtering, loading, or no-results state.
+     */
+    footer?: ReactNode;
     /**
      * ID of the combobox multiselect
      */
@@ -116,5 +122,5 @@ export interface ComboboxMultiselectProps extends DivProps {
 /**
  * ComboboxMultiselect UI component
  */
-export declare const ComboboxMultiselect: ({ aiSuggestions, className, disabled, id, initialSelectedItems, inputWidth, inputWidthMin, isLoading, label, labelStrings, loadingText, noResultsText, onChange, options, placeholder, required, showAllTags, showLabel, size, ...props }: ComboboxMultiselectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ComboboxMultiselect: ({ aiSuggestions, className, disabled, footer, id, initialSelectedItems, inputWidth, inputWidthMin, isLoading, label, labelStrings, loadingText, noResultsText, onChange, options, placeholder, required, showAllTags, showLabel, size, ...props }: ComboboxMultiselectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/Datepicker/Datepicker.d.ts

@@ -137,6 +137,14 @@ interface DatepickerSharedProps extends DatepickerHTMLProps {
      * doesn't prescribe what goes there.
      */
     footerNote?: ReactNode;
+    /**
+     * Hour format for the `showTime` field(s), forwarded to each embedded
+     * `Timepicker`. `12` displays hour + AM/PM (e.g. "12:30 PM"); `24`
+     * displays a 24-hour hour segment with no AM/PM (e.g. "13:30"). Not
+     * derivable from `locale` — the embedded fields always receive an
+     * explicit `hourCycle`, which overrides locale-derived formatting.
+     */
+    hourCycle?: 12 | 24;
     /**
      * Input ID.
      */
@@ -234,6 +242,14 @@ interface DatepickerSharedProps extends DatepickerHTMLProps {
      * date. Has no effect unless `showTime` is also true.
      */
     showTimeZoneSwitcher?: boolean;
+    /**
+     * Whether the calendar footer includes its "Today" button. Defaults to
+     * `true`. Set to `false` to leave only the end-aligned buttons —
+     * `Clear`, plus `Done` when `mode` is `'range'` or `showTime` is set.
+     * Blanking `translationStrings.todayButton` only empties the label,
+     * leaving the button itself in place.
+     */
+    showTodayButton?: boolean;
     /**
      * IANA time zone identifier (e.g. "America/Los_Angeles", "UTC") used to
      * combine the selected date with `showTime`'s entered time-of-day into a
@@ -318,5 +334,5 @@ export type DatepickerProps = SingleDatepickerProps | RangeDatepickerProps;
 /**
  * Datepicker UI component.
  */
-export declare const Datepicker: ({ allowCustomRange, allowDateRangeSelection, className, defaultPresetLabel, disabled, footerNote, id, inputWidth, inputWidthMin, label, locale, maxDate, message, minDate, mode, onChange, placeholder, presets, required, showLabel, showPresetCalendar, showTime, showTimeZoneSwitcher, timeZone, tooltipText, translationStrings: translationStringsProp, validationMessage, validationStatus, value, visibleMonths, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Datepicker: ({ allowCustomRange, allowDateRangeSelection, className, defaultPresetLabel, disabled, footerNote, hourCycle, id, inputWidth, inputWidthMin, label, locale, maxDate, message, minDate, mode, onChange, placeholder, presets, required, showLabel, showPresetCalendar, showTime, showTimeZoneSwitcher, showTodayButton, timeZone, tooltipText, translationStrings: translationStringsProp, validationMessage, validationStatus, value, visibleMonths, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/Select/Select.d.ts

@@ -67,6 +67,12 @@ export interface SelectProps {
      * Is the field disabled?
      */
     disabled?: boolean;
+    /**
+     * Persistent content rendered below the options list (e.g. a "Create new…"
+     * link). Unlike an option, it isn't selectable and stays visible
+     * regardless of the current options.
+     */
+    footer?: ReactNode;
     /**
      * Optional icon to display before the placeholder text (selectOptionText). Only shows when no value is selected.
      */
@@ -158,5 +164,5 @@ export declare const SelectOptionGroup: ({ children, label, }: SelectOptionGroup
 /**
  * Select UI component
  */
-export declare const Select: ({ autoWidth, className, defaultValue, disabled, icon, id, inputWidth, inputWidthMin, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, showSelectedIcon, size, tooltipText, validationMessage, validationStatus, value, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ autoWidth, className, defaultValue, disabled, footer, icon, id, inputWidth, inputWidthMin, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, showSelectedIcon, size, tooltipText, validationMessage, validationStatus, value, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/navigation/BookmarksMenu/BookmarksMenu.d.ts

@@ -0,0 +1,151 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import { MenuItemType } from '../../../libs/types/custom-types';
+import './bookmarks-menu.css';
+/**
+ * A single bookmark row, shared by `BookmarksMenu` and `BookmarksPanel`.
+ */
+export type BookmarkItem = {
+    /**
+     * Stable id, used for React list keys. Omit only if `title` is
+     * guaranteed unique across the list.
+     */
+    id?: string;
+    /**
+     * Link element the row navigates to on selection (e.g. `<a href='...'>`
+     * or a router `Link`).
+     */
+    linkContent: ReactNode;
+    /**
+     * Removes the bookmark. Omit to hide the kebab's Remove action.
+     */
+    onRemove?: () => void;
+    /**
+     * Renames the bookmark. Omit to hide the kebab's Rename action.
+     */
+    onRename?: () => void;
+    /**
+     * Secondary text below the title (e.g. site/team name).
+     */
+    subtitle?: string;
+    /**
+     * Bookmark title.
+     */
+    title: string;
+};
+/**
+ * Translation strings shared by `buildBookmarkMenuItems`'s two callers
+ * (`BookmarksMenu`, `BookmarksPanel`).
+ */
+export type BookmarkMenuItemLabels = {
+    /**
+     * Returns the accessible label for the Remove action when it's critical
+     * (destructive) styled.
+     * Defaults to `(bookmark) => \`Remove ${bookmark.title}\``.
+     */
+    getRemoveCriticalLabel?: (bookmark: BookmarkItem) => string;
+    /**
+     * Label for the kebab's Remove action.
+     * @default 'Remove'
+     */
+    removeLabel?: string;
+    /**
+     * Label for the kebab's Rename action.
+     * @default 'Rename'
+     */
+    renameLabel?: string;
+};
+/**
+ * Builds the kebab's Rename/Remove menu items for a bookmark row.
+ */
+export declare const buildBookmarkMenuItems: (bookmark: BookmarkItem, labels?: BookmarkMenuItemLabels) => MenuItemType[];
+/**
+ * Centered icon + message shown in place of the bookmark list when empty.
+ */
+export declare const BookmarksEmptyState: ({ text }: {
+    text: string;
+}) => import("react/jsx-runtime").JSX.Element;
+/**
+ * Prop types for BookmarksMenu
+ */
+export interface BookmarksMenuProps extends ComponentPropsWithoutRef<'span'> {
+    /**
+     * Aria label for the trigger button.
+     * @default 'Bookmarks'
+     */
+    ariaLabel?: string;
+    /**
+     * The user's bookmarks.
+     */
+    bookmarks?: BookmarkItem[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Label for the header's "+ Create" action.
+     * @default 'Create'
+     */
+    createLabel?: string;
+    /**
+     * Returns the accessible label for a row's kebab menu.
+     * Defaults to `(bookmark) => \`Actions for ${bookmark.title}\``.
+     */
+    getMenuAriaLabel?: (bookmark: BookmarkItem) => string;
+    /**
+     * Returns the accessible label for a row's Remove action.
+     * Defaults to `(bookmark) => \`Remove ${bookmark.title}\``.
+     */
+    getRemoveCriticalLabel?: (bookmark: BookmarkItem) => string;
+    /**
+     * Heading shown in the panel's header.
+     * @default 'Bookmarks'
+     */
+    heading?: string;
+    /**
+     * Fills the trigger icon to indicate the current page is already
+     * bookmarked. The component has no router access of its own, so the
+     * consumer derives this from its own current-page/router state.
+     */
+    isBookmarked?: boolean;
+    /**
+     * Opt in to swapping the trigger + floating panel for an inline
+     * accordion at the mobile breakpoint. Defaults to `false` —
+     * BookmarksMenu always renders its normal trigger + panel otherwise,
+     * regardless of viewport. Set this explicitly when placing
+     * BookmarksMenu inside a mobile nav menu that provides the accordion's
+     * expected layout (e.g. `Navbar`'s own mobile menu) — typically
+     * `isMobileAccordion={useIsMobile()}`, using the `useIsMobile` hook, so
+     * the swap only takes effect at the mobile breakpoint.
+     */
+    isMobileAccordion?: boolean;
+    /**
+     * Caps the panel's height in pixels. Omit to size it to the available
+     * viewport space only.
+     */
+    maxHeightValue?: number;
+    /**
+     * Text shown in place of the list when there are no bookmarks.
+     */
+    noResultsText?: string;
+    /**
+     * Called when the "+ Create" action in the panel's header is selected.
+     * Omit to hide that action entirely. The consumer owns what happens
+     * next (a modal, a new page, etc.).
+     */
+    onCreateBookmark?: () => void;
+    /**
+     * Label for a row's kebab Remove action.
+     * @default 'Remove'
+     */
+    removeLabel?: string;
+    /**
+     * Label for a row's kebab Rename action.
+     * @default 'Rename'
+     */
+    renameLabel?: string;
+}
+/**
+ * BookmarksMenu UI component. Top-nav icon trigger that opens a floating
+ * panel listing the user's bookmarks.
+ */
+export declare const BookmarksMenu: ({ ariaLabel, bookmarks, className, createLabel, getMenuAriaLabel, getRemoveCriticalLabel, heading, isBookmarked, isMobileAccordion, maxHeightValue, noResultsText, onCreateBookmark, removeLabel, renameLabel, ...props }: BookmarksMenuProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/navigation/Navbar/Navbar.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { ContainerWidth } from '../../../libs/types/custom-types';
+import { GapScale } from '../../../libs/types/layout-types';
 import './navbar.css';
 /**
  * Prop types for Navbar
@@ -26,14 +27,26 @@ export interface NavbarProps extends ComponentPropsWithoutRef<'header'> {
      */
     hideBorder?: boolean;
     /**
-     * Overrides the horizontal (inline) padding of the desktop navbar bar.
-     * Accepts any CSS length (e.g. '1rem', '26px', or a token such as
-     * 'var(--pds-spacing-m)'). Applied symmetrically. Defaults to the
-     * Container's standard gutter. Useful for aligning navbar content with an
-     * adjacent app shell (e.g. the AppLayout sidebar) when placed in a `header`
-     * slot.
+     * Overrides the desktop bar's horizontal padding (any CSS length) so it
+     * can align with something outside the Navbar, e.g. a sidebar's padding.
+     * @default Container's standard gutter
      */
     inlinePadding?: string;
+    /**
+     * Gap between items in the `items-center` slot, desktop only.
+     * @default 'm'
+     */
+    itemsCenterGap?: GapScale;
+    /**
+     * Gap between items in the `items-left` slot, desktop only.
+     * @default 'm'
+     */
+    itemsLeftGap?: GapScale;
+    /**
+     * Gap between items in the `items-right` slot, desktop only.
+     * @default 'm'
+     */
+    itemsRightGap?: GapScale;
     /**
      * Translation strings for accessibility.
      */
@@ -45,4 +58,4 @@ export interface NavbarProps extends ComponentPropsWithoutRef<'header'> {
 /**
  * Navbar UI component
  */
-export declare const Navbar: ({ children, className, colorType, containerWidth, hideBorder, inlinePadding, translationStrings, ...props }: NavbarProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Navbar: ({ children, className, colorType, containerWidth, hideBorder, inlinePadding, itemsCenterGap, itemsLeftGap, itemsRightGap, translationStrings, ...props }: NavbarProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/panels/BookmarksPanel/BookmarksPanel.d.ts

@@ -0,0 +1,67 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { BookmarkItem } from '../../navigation/BookmarksMenu/BookmarksMenu';
+import './bookmarks-panel.css';
+/**
+ * Prop types for BookmarksPanel
+ */
+export interface BookmarksPanelProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * The user's bookmarks.
+     */
+    bookmarks?: BookmarkItem[];
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Caps the height of the content region only. Passed straight through
+     * to `WidgetPanel`.
+     */
+    contentMaxHeight?: string;
+    /**
+     * Label for the footer's "Create bookmark" action.
+     * @default 'Create bookmark'
+     */
+    createLabel?: string;
+    /**
+     * Returns the accessible label for a row's kebab menu.
+     * Defaults to `(bookmark) => \`Actions for ${bookmark.title}\``.
+     */
+    getMenuAriaLabel?: (bookmark: BookmarkItem) => string;
+    /**
+     * Returns the accessible label for a row's Remove action.
+     * Defaults to `(bookmark) => \`Remove ${bookmark.title}\``.
+     */
+    getRemoveCriticalLabel?: (bookmark: BookmarkItem) => string;
+    /**
+     * Heading for the panel.
+     * @default 'Bookmarks'
+     */
+    heading?: string;
+    /**
+     * Text shown in place of the list when there are no bookmarks.
+     */
+    noResultsText?: string;
+    /**
+     * Called when the "Create bookmark" footer action is selected. Omit to
+     * hide that action entirely. The consumer owns what happens next (a
+     * modal, a new page, etc.).
+     */
+    onCreateBookmark?: () => void;
+    /**
+     * Label for a row's kebab Remove action.
+     * @default 'Remove'
+     */
+    removeLabel?: string;
+    /**
+     * Label for a row's kebab Rename action.
+     * @default 'Rename'
+     */
+    renameLabel?: string;
+}
+/**
+ * BookmarksPanel UI component. Persistently-visible, embedded variant of
+ * the bookmark list for homepage/sidebar widget slots, built on
+ * `WidgetPanel`.
+ */
+export declare const BookmarksPanel: ({ bookmarks, className, contentMaxHeight, createLabel, getMenuAriaLabel, getRemoveCriticalLabel, heading, noResultsText, onCreateBookmark, removeLabel, renameLabel, ...props }: BookmarksPanelProps) => import("react/jsx-runtime").JSX.Element;

package/dist/css/component-css/pds-bookmarks-menu.css

@@ -0,0 +1 @@
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-bookmarks-menu{display:inline-flex}.pds-bookmarks-menu .pds-nav-accordion{width:100%}[data-pds-mobile] .pds-navbar__mobile .pds-bookmarks-menu{background-color:var(--pds-color-surface-default);border-block-end:var(--pds-border-width-default) solid var(--pds-color-border-default);left:50%;margin-inline-start:-50vw;position:relative;right:50%;width:100vw}.pds-bookmarks-menu__panel{padding-block-start:0;width:17.5rem}.pds-bookmarks-menu__header{align-items:center;background-color:var(--pds-color-dropdown-background);border-block-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);color:var(--pds-color-dropdown-foreground);display:flex;font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-semibold);justify-content:space-between;letter-spacing:normal;line-height:1;margin-block-end:var(--pds-spacing-4xs);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding-block:var(--pds-spacing-2xs);padding-inline:calc(var(--pds-spacing-2xs) + var(--pds-spacing-xs));position:sticky;top:0;z-index:1}.pds-bookmarks-menu__panel .pds-dropdown__action-item{line-height:var(--pds-typography-lh-s)}.pds-bookmarks-menu__panel .pds-dropdown__item-content,.pds-bookmarks-menu__panel .pds-dropdown__item-label{min-width:0}.pds-bookmarks-menu__panel .pds-dropdown__item-description{margin-block-start:var(--pds-spacing-5xs);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-bookmarks-menu__item-title{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-bookmarks-menu__empty{padding-block:var(--pds-spacing-m)}.pds-bookmarks-empty-state{align-items:center;display:flex;flex-direction:column;gap:var(--pds-spacing-xs);padding-inline:var(--pds-spacing-s);text-align:center}.pds-bookmarks-empty-state__icon,.pds-bookmarks-empty-state__text{color:var(--pds-color-foreground-default-secondary)}.pds-bookmarks-empty-state__text{font-size:var(--pds-typography-size-s);line-height:var(--pds-typography-lh-m);margin:0}.pds-bookmarks-menu__mobile-label{align-items:center;display:flex;gap:var(--pds-spacing-xs)}.pds-bookmarks-menu__mobile-list{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.pds-bookmarks-menu__mobile-item .pds-row-actions-menu{min-height:unset;padding-block:var(--pds-spacing-xs);padding-inline-end:var(--pds-spacing-l)}.pds-bookmarks-menu__mobile-item .pds-row-actions-menu__content a{padding-inline-start:var(--pds-spacing-m)}.pds-bookmarks-menu__mobile-item-label{display:flex;flex-direction:column;min-width:0}.pds-bookmarks-menu__mobile-item-title{font-size:var(--pds-typography-size-s);line-height:var(--pds-typography-lh-s)}.pds-bookmarks-menu__mobile-item-subtitle{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-xs);line-height:var(--pds-typography-lh-s);margin-block-start:var(--pds-spacing-5xs)}}

package/dist/css/component-css/pds-bookmarks-panel.css

@@ -0,0 +1 @@
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-bookmarks-panel .pds-widget-panel__content{padding-block:var(--pds-spacing-3xs)}.pds-bookmarks-panel .pds-bookmarks-empty-state{padding-block:var(--pds-spacing-m)}.pds-bookmarks-panel__list{display:flex;flex-direction:column;list-style:none;margin-block:0;margin-inline:calc(var(--panel-padding-inline)*-1);padding:0;row-gap:var(--pds-spacing-xs)}.pds-bookmarks-panel__item-label{display:flex;flex-direction:column;min-width:0}.pds-bookmarks-panel__item-subtitle,.pds-bookmarks-panel__item-title{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.pds-bookmarks-panel__item-title{font-size:var(--pds-typography-size-s);line-height:var(--pds-typography-lh-s)}.pds-bookmarks-panel__item-subtitle{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-xs);line-height:var(--pds-typography-lh-s);margin-block-start:var(--pds-spacing-5xs)}}

package/dist/css/component-css/pds-combobox-multiselect.css

@@ -1,3 +1,3 @@
 @layer pds-v1, pds-v2;@layer pds-v2{.pds-combobox-multi{position:relative}.pds-combobox-multi:disabled .pds-combobox-multi__input-wrapper{border-color:var(--pds-color-border-disabled)}.pds-combobox-multi__items-wrapper .pds-combobox-multi__selected-item:not(:last-child){display:none}.pds-combobox-multi--show-all-tags .pds-combobox-multi__input-wrapper:has(.pds-combobox-multi__items-wrapper){height:auto;min-height:var(--pds-spacing-input-height-s);padding-block:var(--pds-spacing-3xs)}.pds-combobox-multi--show-all-tags .pds-combobox-multi__items-wrapper{column-gap:var(--pds-spacing-3xs);display:flex;flex-wrap:wrap;row-gap:var(--pds-spacing-3xs)}.pds-combobox-multi--show-all-tags .pds-combobox-multi__items-wrapper .pds-combobox-multi__selected-item:not(:last-child){display:inline-flex}.pds-combobox-multi--m .pds-combobox-multi__input-wrapper{gap:var(--pds-spacing-3xs);height:var(--pds-spacing-input-height-m);padding-inline-end:var(--pds-spacing-s);padding-inline-start:var(--pds-spacing-2xs)}.pds-combobox-multi--show-all-tags.pds-combobox-multi--m
 	.pds-combobox-multi__input-wrapper:has(.pds-combobox-multi__items-wrapper){min-height:var(--pds-spacing-input-height-m)}.pds-combobox-multi--m .pds-combobox-multi__aux-panel-button{height:1.5rem;width:1.5rem}.pds-combobox-multi--m .pds-combobox-multi__ai-button{padding:var(--pds-spacing-3xs) var(--pds-spacing-2xs)}.pds-combobox-multi--m .pds-combobox-multi__aux-panel{padding:var(--pds-spacing-s) var(--pds-spacing-s)}.pds-combobox-multi--m .pds-combobox-multi__aux-panel-item{font-size:var(--pds-typography-size-xs);padding:var(--pds-spacing-3xs) var(--pds-spacing-2xs)}.pds-combobox-multi--m .pds-combobox-multi__selected-item{padding:var(--pds-spacing-3xs) var(--pds-spacing-2xs)}.pds-combobox-multi--m .pds-combobox-multi__selected-item-remove,.pds-combobox-multi--m .pds-combobox-multi__selected-item-remove svg{height:.75rem;width:.75rem}.pds-combobox-multi--m .pds-combobox-multi__counter,.pds-combobox-multi--m .pds-combobox-multi__counter-item,.pds-combobox-multi--m .pds-combobox-multi__counter-layer{height:1.5rem}.pds-combobox-multi__selected-item{align-items:center;background:var(--pds-color-input-tag-background-default);border-radius:var(--pds-border-radius-default);color:var(--pds-color-input-tag-foreground-default);display:inline-flex;font-size:.75rem;font-weight:var(--pds-typography-fw-regular);gap:var(--pds-spacing-3xs);justify-content:center;line-height:1;padding:var(--pds-spacing-4xs) var(--pds-spacing-3xs);text-wrap:nowrap}.pds-combobox-multi__selected-item:hover{background:var(--pds-color-input-tag-background-hover)}.pds-combobox-multi__selected-item:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0}.pds-combobox-multi__selected-item-text{margin-top:1px}.pds-combobox-multi__selected-item-remove{align-items:center;background:transparent;border:none;border-radius:var(--pds-border-radius-default);color:var(--pds-color-foreground-default-secondary);cursor:pointer;display:flex;height:.75rem;justify-content:center;padding:0;width:.75rem}.pds-combobox-multi__selected-item-remove:hover{color:var(--pds-color-foreground-default)}.pds-combobox-multi__selected-item-remove:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px}.pds-combobox-multi__selected-item--marked-for-deletion .pds-combobox-multi__selected-item-remove{outline:1px solid var(--pds-color-interactive-focus)}.pds-combobox-multi__input-wrapper{align-items:center;background-color:var(--pds-color-surface-default);border:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:var(--pds-border-radius-input);box-sizing:border-box;cursor:pointer;display:flex;gap:var(--pds-spacing-3xs);height:var(--pds-spacing-input-height-s);overflow:hidden;padding-block:0;padding-inline-end:var(--pds-spacing-xs);padding-inline-start:var(--pds-spacing-3xs);transition:var(--pds-animation-transition-input);width:100%}.pds-combobox-multi__input-wrapper:focus{outline:none}.pds-combobox-multi__input-wrapper:focus-visible,.pds-combobox-multi__input-wrapper[data-focus-method=keyboard]:focus{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0;transition:var(--pds-animation-transition-focus)}.pds-combobox-multi__input-wrapper:has(:focus-visible){outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0;transition:var(--pds-animation-transition-focus)}.pds-combobox-multi__counter{display:inline-block;height:1.25rem;position:relative}.pds-combobox-multi__counter-wrapper{display:flex;position:relative}.pds-combobox-multi__counter-layer{background-color:var(--pds-color-input-tag-background-default);width:.375rem}.pds-combobox-multi__counter-item,.pds-combobox-multi__counter-layer{border-radius:var(--pds-border-radius-default);box-shadow:-2px 0 0 0 var(--pds-color-surface-default);height:1.25rem}.pds-combobox-multi__counter-item{align-items:center;background:var(--pds-color-input-tag-background-default);color:var(--pds-color-input-tag-foreground-default);display:flex;font-size:.75rem;font-weight:var(--pds-typography-fw-regular);justify-content:center;width:1.28125rem}.pds-combobox-multi__end-actions{align-items:center;align-self:center;display:flex;flex-shrink:0;gap:var(--pds-spacing-2xs);margin-inline-start:auto}.pds-combobox-multi__trigger{align-items:center;background-color:transparent;border:none;border-radius:var(--pds-border-radius-input);color:var(--pds-color-foreground-default);display:flex;justify-content:center;padding:var(--pds-spacing-4xs)}.pds-combobox-multi__trigger:disabled{cursor:not-allowed}.pds-combobox-multi__trigger:focus-visible{outline:none}.pds-combobox-multi__trigger-icon{color:var(--pds-color-foreground-default-secondary);pointer-events:none;transition:var(--pds-animation-transition-rotation)}.pds-combobox-multi__trigger[aria-expanded=true]
-	.pds-combobox-multi__trigger-icon{transform:rotate(180deg);transition:var(--pds-animation-transition-rotation)}.pds-combobox-multi__dropdown{box-sizing:border-box;margin-block-start:var(--pds-spacing-2xs);max-height:18rem;overflow-x:hidden;padding-block-end:0;width:100%}.pds-combobox-multi__dropdown:focus-visible{outline:none}.pds-combobox-multi__dropdown-list{flex:1;margin-block:0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 1rem);mask-image:linear-gradient(180deg,transparent,#000 1rem);overflow-y:auto;padding:0}.pds-combobox-multi__dropdown-list .pds-dropdown__item:last-child{margin-block-end:var(--pds-spacing-2xs)}.pds-combobox-multi__dropdown-input-wrapper{align-items:center;background-color:var(--pds-color-dropdown-background);border-bottom:1px solid var(--pds-color-border-default);column-gap:var(--pds-spacing-2xs);display:flex;gap:var(--pds-spacing-xs);margin-block-end:var(--pds-spacing-s);margin-block-start:calc(var(--pds-spacing-2xs)*-1);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding-block-end:calc(var(--pds-spacing-s)*1.1);padding-block-start:var(--pds-spacing-3xs);padding-inline:var(--pds-spacing-m);position:sticky;top:0;z-index:1}.pds-combobox-multi__dropdown-input{background-color:transparent;border:none;caret-color:var(--pds-color-foreground-default);color:var(--pds-color-foreground-default);flex-grow:1;font-size:var(--pds-typography-size-s);line-height:1;padding-inline:0;width:100%}.pds-combobox-multi__dropdown-input:focus{outline:none}.pds-combobox-multi__dropdown-input::placeholder{color:var(--pds-color-input-placeholder)}.pds-combobox-multi__dropdown-item{padding:var(--pds-spacing-xs) var(--pds-spacing-m)}.pds-combobox-multi__dropdown-item-label{align-items:center;display:flex;gap:.375rem;justify-content:space-between;line-height:normal;width:100%}.pds-combobox-multi__dropdown-item-text{align-items:center;display:flex;gap:var(--pds-spacing-m)}.pds-combobox-multi__dropdown-item-badge{align-items:center;background-color:var(--pds-color-category-ai-background);border-radius:var(--pds-border-radius-default);color:var(--pds-color-category-ai-foreground);display:inline-flex;font-size:var(--pds-typography-size-xs);gap:var(--pds-spacing-4xs);padding:var(--pds-spacing-4xs) var(--pds-spacing-2xs)}.pds-combobox-multi__loading{color:var(--pds-color-foreground-default);font-size:var(--pds-typography-size-m);padding:var(--pds-spacing-m)}.pds-combobox-multi__ai-button{align-items:center;background-color:var(--pds-color-category-ai-background);border:none;border-radius:var(--pds-border-radius-default);color:var(--pds-color-category-ai-foreground);cursor:pointer;display:flex;justify-content:center;padding:var(--pds-spacing-4xs);transition:opacity .2s ease}.pds-combobox-multi__ai-button:hover{opacity:.8}.pds-combobox-multi__ai-button:disabled{cursor:not-allowed;opacity:.5}.pds-combobox-multi__ai-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-combobox-multi__ai-icon{color:var(--pds-color-category-ai-foreground);font-size:.875rem;pointer-events:none}[data-theme=dark] .pds-combobox-multi__aux-panel{background-color:oklch(.36 .004 264)}.pds-combobox-multi__aux-panel{align-items:center;background-color:var(--pds-color-surface-default-secondary);border:none;border-radius:var(--pds-border-radius-container);box-shadow:var(--pds-elevation-overlay);box-sizing:border-box;display:flex;flex-direction:row;gap:var(--pds-spacing-2xs);padding:var(--pds-spacing-xs) var(--pds-spacing-xs);position:absolute}.pds-combobox-multi__aux-panel-content{align-items:center;display:flex;flex:1;gap:var(--pds-spacing-xs)}.pds-combobox-multi__aux-panel-header{align-items:center;display:flex;gap:var(--pds-spacing-xs);margin-inline-start:auto}.pds-combobox-multi__aux-panel-icon{color:var(--pds-color-foreground-default-secondary);flex-shrink:0}.pds-combobox-multi__aux-panel-button{align-items:center;background-color:transparent;border:none;border-radius:var(--pds-border-radius-input);color:var(--pds-color-foreground-default);cursor:pointer;display:flex;flex-shrink:0;height:1.25rem;justify-content:center;transition:background-color .2s ease;width:1.25rem}.pds-combobox-multi__aux-panel-button:hover{background-color:var(--pds-color-surface-default);color:var(--pds-color-foreground-default)}.pds-combobox-multi__aux-panel-button:disabled{cursor:not-allowed}.pds-combobox-multi__aux-panel-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}[data-theme=dark] .pds-combobox-multi__aux-panel-button:hover{background-color:oklch(.3 .02 275);color:var(--pds-color-foreground-default)}.pds-combobox-multi__aux-panel-refresh-icon{height:.8125rem;width:.8125rem}.pds-combobox-multi__aux-panel-button-icon--rotating{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.pds-combobox-multi__aux-panel-items{display:flex;flex:1;flex-wrap:wrap;gap:var(--pds-spacing-3xs);padding-inline-start:var(--pds-spacing-4xs)}.pds-combobox-multi__aux-panel-item{align-items:center;background-color:var(--pds-color-surface-default);border:1px solid transparent;border-radius:var(--pds-border-radius-input);color:var(--pds-color-foreground-default);cursor:pointer;display:inline-flex;font-size:.75rem;font-weight:var(--pds-typography-fw-regular);justify-content:center;line-height:1;padding:var(--pds-spacing-4xs) var(--pds-spacing-3xs);text-wrap:nowrap;transition:background-color .2s ease,border-color .2s ease}.pds-combobox-multi__aux-panel-item:hover{background-color:var(--pds-color-category-ai-background);border-color:var(--pds-color-category-ai-foreground)}.pds-combobox-multi__aux-panel-item:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-combobox-multi__aux-panel-item--selected{border-color:var(--pds-color-category-ai-foreground)}[data-theme=dark] .pds-combobox-multi__aux-panel-item{background-color:oklch(.3 .02 275)}[data-theme=dark] .pds-combobox-multi__aux-panel-item:hover{background-color:oklch(.42 .06 275);border-color:var(--pds-color-category-ai-utility)}[data-theme=dark] .pds-combobox-multi__aux-panel-item--selected{border-color:var(--pds-color-category-ai-utility)}.pds-combobox-multi__aux-panel-content{padding:var(--pds-spacing-3xs) var(--pds-spacing-6xs)}}
+	.pds-combobox-multi__trigger-icon{transform:rotate(180deg);transition:var(--pds-animation-transition-rotation)}.pds-combobox-multi__dropdown{box-sizing:border-box;margin-block-start:var(--pds-spacing-2xs);max-height:18rem;overflow-x:hidden;padding-block-end:0;width:100%}.pds-combobox-multi__dropdown:focus-visible{outline:none}.pds-combobox-multi__dropdown--has-footer{padding-block-end:var(--pds-spacing-2xs)}.pds-combobox-multi__dropdown-list{flex:1;margin-block:0;-webkit-mask-image:linear-gradient(180deg,transparent,#000 1rem);mask-image:linear-gradient(180deg,transparent,#000 1rem);overflow-y:auto;padding:0}.pds-combobox-multi__dropdown-list .pds-dropdown__item:last-child{margin-block-end:var(--pds-spacing-2xs)}.pds-combobox-multi__dropdown-input-wrapper{align-items:center;background-color:var(--pds-color-dropdown-background);border-bottom:1px solid var(--pds-color-border-default);column-gap:var(--pds-spacing-2xs);display:flex;gap:var(--pds-spacing-xs);margin-block-end:var(--pds-spacing-s);margin-block-start:calc(var(--pds-spacing-2xs)*-1);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding-block-end:calc(var(--pds-spacing-s)*1.1);padding-block-start:var(--pds-spacing-3xs);padding-inline:var(--pds-spacing-m);position:sticky;top:0;z-index:1}.pds-combobox-multi__dropdown-input{background-color:transparent;border:none;caret-color:var(--pds-color-foreground-default);color:var(--pds-color-foreground-default);flex-grow:1;font-size:var(--pds-typography-size-s);line-height:1;padding-inline:0;width:100%}.pds-combobox-multi__dropdown-input:focus{outline:none}.pds-combobox-multi__dropdown-input::placeholder{color:var(--pds-color-input-placeholder)}.pds-combobox-multi__dropdown-item{padding:var(--pds-spacing-xs) var(--pds-spacing-m)}.pds-combobox-multi__dropdown-item-label{align-items:center;display:flex;gap:.375rem;justify-content:space-between;line-height:normal;width:100%}.pds-combobox-multi__dropdown-item-text{align-items:center;display:flex;gap:var(--pds-spacing-m)}.pds-combobox-multi__dropdown-item-badge{align-items:center;background-color:var(--pds-color-category-ai-background);border-radius:var(--pds-border-radius-default);color:var(--pds-color-category-ai-foreground);display:inline-flex;font-size:var(--pds-typography-size-xs);gap:var(--pds-spacing-4xs);padding:var(--pds-spacing-4xs) var(--pds-spacing-2xs)}.pds-combobox-multi__loading{color:var(--pds-color-foreground-default);font-size:var(--pds-typography-size-m);padding:var(--pds-spacing-m)}.pds-combobox-multi__ai-button{align-items:center;background-color:var(--pds-color-category-ai-background);border:none;border-radius:var(--pds-border-radius-default);color:var(--pds-color-category-ai-foreground);cursor:pointer;display:flex;justify-content:center;padding:var(--pds-spacing-4xs);transition:opacity .2s ease}.pds-combobox-multi__ai-button:hover{opacity:.8}.pds-combobox-multi__ai-button:disabled{cursor:not-allowed;opacity:.5}.pds-combobox-multi__ai-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-combobox-multi__ai-icon{color:var(--pds-color-category-ai-foreground);font-size:.875rem;pointer-events:none}[data-theme=dark] .pds-combobox-multi__aux-panel{background-color:oklch(.36 .004 264)}.pds-combobox-multi__aux-panel{align-items:center;background-color:var(--pds-color-surface-default-secondary);border:none;border-radius:var(--pds-border-radius-container);box-shadow:var(--pds-elevation-overlay);box-sizing:border-box;display:flex;flex-direction:row;gap:var(--pds-spacing-2xs);padding:var(--pds-spacing-xs) var(--pds-spacing-xs);position:absolute}.pds-combobox-multi__aux-panel-content{align-items:center;display:flex;flex:1;gap:var(--pds-spacing-xs)}.pds-combobox-multi__aux-panel-header{align-items:center;display:flex;gap:var(--pds-spacing-xs);margin-inline-start:auto}.pds-combobox-multi__aux-panel-icon{color:var(--pds-color-foreground-default-secondary);flex-shrink:0}.pds-combobox-multi__aux-panel-button{align-items:center;background-color:transparent;border:none;border-radius:var(--pds-border-radius-input);color:var(--pds-color-foreground-default);cursor:pointer;display:flex;flex-shrink:0;height:1.25rem;justify-content:center;transition:background-color .2s ease;width:1.25rem}.pds-combobox-multi__aux-panel-button:hover{background-color:var(--pds-color-surface-default);color:var(--pds-color-foreground-default)}.pds-combobox-multi__aux-panel-button:disabled{cursor:not-allowed}.pds-combobox-multi__aux-panel-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}[data-theme=dark] .pds-combobox-multi__aux-panel-button:hover{background-color:oklch(.3 .02 275);color:var(--pds-color-foreground-default)}.pds-combobox-multi__aux-panel-refresh-icon{height:.8125rem;width:.8125rem}.pds-combobox-multi__aux-panel-button-icon--rotating{animation:rotate 1s linear infinite}@keyframes rotate{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.pds-combobox-multi__aux-panel-items{display:flex;flex:1;flex-wrap:wrap;gap:var(--pds-spacing-3xs);padding-inline-start:var(--pds-spacing-4xs)}.pds-combobox-multi__aux-panel-item{align-items:center;background-color:var(--pds-color-surface-default);border:1px solid transparent;border-radius:var(--pds-border-radius-input);color:var(--pds-color-foreground-default);cursor:pointer;display:inline-flex;font-size:.75rem;font-weight:var(--pds-typography-fw-regular);justify-content:center;line-height:1;padding:var(--pds-spacing-4xs) var(--pds-spacing-3xs);text-wrap:nowrap;transition:background-color .2s ease,border-color .2s ease}.pds-combobox-multi__aux-panel-item:hover{background-color:var(--pds-color-category-ai-background);border-color:var(--pds-color-category-ai-foreground)}.pds-combobox-multi__aux-panel-item:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-combobox-multi__aux-panel-item--selected{border-color:var(--pds-color-category-ai-foreground)}[data-theme=dark] .pds-combobox-multi__aux-panel-item{background-color:oklch(.3 .02 275)}[data-theme=dark] .pds-combobox-multi__aux-panel-item:hover{background-color:oklch(.42 .06 275);border-color:var(--pds-color-category-ai-utility)}[data-theme=dark] .pds-combobox-multi__aux-panel-item--selected{border-color:var(--pds-color-category-ai-utility)}.pds-combobox-multi__aux-panel-content{padding:var(--pds-spacing-3xs) var(--pds-spacing-6xs)}}

package/dist/css/component-css/pds-combobox.css

@@ -1 +1 @@
-@layer pds-v1, pds-v2;@layer pds-v2{.pds-combobox{position:relative}.pds-combobox__input-wrapper{--input-wrapper-padding-inline-end:var(--pds-spacing-xs);align-items:center;background-color:var(--pds-color-surface-default);border:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:var(--pds-border-radius-input);display:flex;gap:var(--pds-spacing-xs);height:var(--pds-spacing-input-height-s);padding-inline-end:var(--input-wrapper-padding-inline-end);padding-inline-start:var(--pds-spacing-xs);position:relative;transition:var(--pds-animation-transition-input);width:100%}.pds-combobox__input-wrapper:focus-within{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0;transition:var(--pds-animation-transition-focus)}.pds-combobox__input-wrapper--has-search-shortcut{--input-wrapper-padding-inline-end:var(--pds-spacing-2xs)}.pds-combobox--m .pds-combobox__input-wrapper{--input-wrapper-padding-inline-end:var(--pds-spacing-s);gap:var(--pds-spacing-s);height:var(--pds-spacing-input-height-m);padding-inline-start:var(--pds-spacing-s)}.pds-combobox--m .pds-combobox__input-wrapper--has-search-shortcut{--input-wrapper-padding-inline-end:var(--pds-spacing-xs)}.pds-combobox__input{background-color:transparent;border:none;caret-color:var(--pds-color-foreground-default);color:var(--pds-color-foreground-default);flex-grow:1;font-size:var(--pds-typography-size-s);line-height:1;padding-inline:0;width:100%}.pds-combobox__input:focus{outline:none}.pds-combobox__input::placeholder{color:var(--pds-color-input-placeholder)}.pds-combobox__trigger{align-items:center;background-color:transparent;border:none;border-radius:var(--pds-border-radius-input);cursor:pointer;display:flex;justify-content:center;padding:var(--pds-spacing-4xs)}.pds-combobox__trigger:hover{background-color:var(--pds-color-interactive-background-hover)}.pds-combobox__trigger:focus-visible{background-color:var(--pds-color-interactive-background-hover);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-combobox__trigger-icon{color:var(--pds-color-foreground-default-secondary);pointer-events:none;transition:var(--pds-animation-transition-rotation)}.pds-combobox__trigger[aria-expanded=true] .pds-combobox__trigger-icon{transform:rotate(180deg);transition:var(--pds-animation-transition-rotation)}.pds-combobox__trigger-icon.pds-icon--m{height:.8125rem;width:.8125rem}.pds-combobox--m .pds-combobox__trigger-icon.pds-icon--m{height:1rem;width:1rem}.pds-combobox__dropdown{margin-block-start:var(--pds-spacing-xs);max-height:18rem;overflow-x:hidden;padding-block-end:0}.pds-combobox__dropdown:focus-visible{outline:none}.pds-combobox__options{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.pds-combobox__options .pds-dropdown__item:last-child{margin-block-end:var(--pds-spacing-2xs)}.pds-combobox__option-label{flex:1;min-width:0}.pds-combobox__loading{color:var(--pds-color-foreground-default);font-size:var(--pds-typography-size-m);padding:var(--pds-spacing-m)}}
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-combobox{position:relative}.pds-combobox__input-wrapper{--input-wrapper-padding-inline-end:var(--pds-spacing-xs);align-items:center;background-color:var(--pds-color-surface-default);border:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:var(--pds-border-radius-input);display:flex;gap:var(--pds-spacing-xs);height:var(--pds-spacing-input-height-s);padding-inline-end:var(--input-wrapper-padding-inline-end);padding-inline-start:var(--pds-spacing-xs);position:relative;transition:var(--pds-animation-transition-input);width:100%}.pds-combobox__input-wrapper:focus-within{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0;transition:var(--pds-animation-transition-focus)}.pds-combobox__input-wrapper--has-search-shortcut{--input-wrapper-padding-inline-end:var(--pds-spacing-2xs)}.pds-combobox--m .pds-combobox__input-wrapper{--input-wrapper-padding-inline-end:var(--pds-spacing-s);gap:var(--pds-spacing-s);height:var(--pds-spacing-input-height-m);padding-inline-start:var(--pds-spacing-s)}.pds-combobox--m .pds-combobox__input-wrapper--has-search-shortcut{--input-wrapper-padding-inline-end:var(--pds-spacing-xs)}.pds-combobox__input{background-color:transparent;border:none;caret-color:var(--pds-color-foreground-default);color:var(--pds-color-foreground-default);flex-grow:1;font-size:var(--pds-typography-size-s);line-height:1;padding-inline:0;width:100%}.pds-combobox__input:focus{outline:none}.pds-combobox__input::placeholder{color:var(--pds-color-input-placeholder)}.pds-combobox__trigger{align-items:center;background-color:transparent;border:none;border-radius:var(--pds-border-radius-input);cursor:pointer;display:flex;justify-content:center;padding:var(--pds-spacing-4xs)}.pds-combobox__trigger:hover{background-color:var(--pds-color-interactive-background-hover)}.pds-combobox__trigger:focus-visible{background-color:var(--pds-color-interactive-background-hover);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-combobox__trigger-icon{color:var(--pds-color-foreground-default-secondary);pointer-events:none;transition:var(--pds-animation-transition-rotation)}.pds-combobox__trigger[aria-expanded=true] .pds-combobox__trigger-icon{transform:rotate(180deg);transition:var(--pds-animation-transition-rotation)}.pds-combobox__trigger-icon.pds-icon--m{height:.8125rem;width:.8125rem}.pds-combobox--m .pds-combobox__trigger-icon.pds-icon--m{height:1rem;width:1rem}.pds-combobox__dropdown{margin-block-start:var(--pds-spacing-xs);max-height:18rem;overflow-x:hidden;padding-block-end:0}.pds-combobox__dropdown:focus-visible{outline:none}.pds-combobox__dropdown--has-footer{padding-block-end:var(--pds-spacing-2xs)}.pds-combobox__options{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.pds-combobox__options .pds-dropdown__item:last-child{margin-block-end:var(--pds-spacing-2xs)}.pds-combobox__option-label{flex:1;min-width:0}.pds-combobox__loading{color:var(--pds-color-foreground-default);font-size:var(--pds-typography-size-m);padding:var(--pds-spacing-m)}}