@pantheon-systems/pds-toolkit-react 2.0.0-beta.1 → 2.0.0-beta.10

package/dist/components/StatusChecker/StatusChecker.d.ts

@@ -13,8 +13,15 @@ export interface StatusCheckerProps extends ComponentPropsWithoutRef<'div'> {
     className?: string;
     /**
      * Custom width in rems for the component. This will override the default.
+     * Ignored when `displayType` is `'icon-button'`.
      */
     componentWidth?: number;
+    /**
+     * `'icon-button'` renders a bordered, icon-only square matching
+     * `IconButton`. The label stays in the DOM, visually hidden, for the
+     * live region.
+     */
+    displayType?: 'label' | 'icon-button';
     /**
      * Internationalization props for labels.
      */
@@ -38,4 +45,4 @@ export interface StatusCheckerProps extends ComponentPropsWithoutRef<'div'> {
      */
     state?: StatusCheckerState;
 }
-export declare const StatusChecker: ({ alignment, className, componentWidth, labelStrings, lastChecked, onCheck, state, ...props }: StatusCheckerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const StatusChecker: ({ alignment, className, componentWidth, displayType, labelStrings, lastChecked, onCheck, state, ...props }: StatusCheckerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/Table/Table.d.ts

@@ -39,12 +39,14 @@ export type DetailPanelContext = {
 export interface TableColumn {
     /**
      * When true, this column's cell content is shown on the compact card
-     * rendered at mobile widths, in addition to the full detail view. The
-     * first card-visible column reads as the card's title; any further ones
-     * render as a secondary line. Columns without this flag are omitted from
-     * the card front but still appear in the full detail view (the row's
-     * `renderDetailPanel` content, or the auto-generated one — see
-     * `hasMobileDetailSheet`). Has no effect above the mobile breakpoint.
+     * rendered at mobile widths, in addition to the full detail view. With
+     * the default `cardLayout="stacked"`, the first card-visible column reads
+     * as the card's title and any further ones render as a secondary line
+     * below it; with `cardLayout="inline"` every card-visible column is a
+     * peer in one row instead (see `cardLayout`). Columns without this flag
+     * are omitted from the card front but still appear in the full detail
+     * view (the row's `renderDetailPanel` content, or the auto-generated one
+     * — see `hasMobileDetailSheet`). Has no effect above the mobile breakpoint.
      */
     cardVisible?: boolean;
     /**
@@ -76,6 +78,16 @@ export interface TableColumn {
     sortKey?: string;
 }
 export interface TableProps extends ComponentPropsWithoutRef<'table'> {
+    /**
+     * Layout of a mobile card's `cardVisible` columns (see `hasMobileCards`).
+     * `'stacked'` (default) gives the first one a bold title treatment with
+     * the rest in a smaller secondary line below it. `'inline'` drops that
+     * distinction and lays out every `cardVisible` column as an equal peer in
+     * one row — for a card whose "title" is really a visual chip (a card
+     * network logo, an avatar) rather than a name, where forcing a
+     * title/subtext hierarchy onto it doesn't make sense.
+     */
+    cardLayout?: 'stacked' | 'inline';
     /** Additional class names */
     className?: string;
     /**
@@ -130,6 +142,11 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * When provided, takes precedence over `emptyStateHeading` and `emptyStateMessage`.
      */
     emptyState?: ReactNode;
+    /**
+     * Optional action (e.g. a Button or link) rendered below the message in
+     * the default empty state. Ignored when `emptyState` is provided.
+     */
+    emptyStateAction?: ReactNode;
     /**
      * Heading text for the default empty state. Defaults to `"No results found."`
      * Override for translation or context-specific messaging.
@@ -393,4 +410,4 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      */
     totalItemCount?: number;
 }
-export declare const Table: ({ className, closeDetailPanelLabel, columns, currentPage, defaultSortKey, defaultSortOrder, density, detailPanelNav, detailPanelTitle, detailPanelWidth, emptyState, emptyStateHeading, emptyStateMessage, footer, getDetailPanelPositionLabel, getPageSizeLabel, getRowClassName, getRowId, getRowSelectDisabledReason, getSelectRowLabel, getSortLabel, hasDesktopDetailPanel, hasMobileCards, hasMobileDetailSheet, hasPanel, inspectedRowId, isLoading, isRowSelectable, itemsPerPage, loadingRowCount, maxHeight, minHeight, nextDetailPanelRowLabel, onDetailPanelNext, onDetailPanelPrev, onPageChange, onPageSizeChange, onRowInspect, onRowSelectionChange, onSort, pageSizeOptions, pageSizeSelectLabel, paginationLabels, prevDetailPanelRowLabel, renderDetailPanel, renderDetailPanelFooter, rowData, selectAllLabel, selectedRows, sortKey, sortOrder, totalItemCount, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ cardLayout, className, closeDetailPanelLabel, columns, currentPage, defaultSortKey, defaultSortOrder, density, detailPanelNav, detailPanelTitle, detailPanelWidth, emptyState, emptyStateAction, emptyStateHeading, emptyStateMessage, footer, getDetailPanelPositionLabel, getPageSizeLabel, getRowClassName, getRowId, getRowSelectDisabledReason, getSelectRowLabel, getSortLabel, hasDesktopDetailPanel, hasMobileCards, hasMobileDetailSheet, hasPanel, inspectedRowId, isLoading, isRowSelectable, itemsPerPage, loadingRowCount, maxHeight, minHeight, nextDetailPanelRowLabel, onDetailPanelNext, onDetailPanelPrev, onPageChange, onPageSizeChange, onRowInspect, onRowSelectionChange, onSort, pageSizeOptions, pageSizeSelectLabel, paginationLabels, prevDetailPanelRowLabel, renderDetailPanel, renderDetailPanelFooter, rowData, selectAllLabel, selectedRows, sortKey, sortOrder, totalItemCount, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -21,6 +21,14 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
      * Is the button disabled?
      */
     disabled?: boolean;
+    /**
+     * Whether `isWorking` disables the button. Defaults to `true`, matching the
+     * one-off "action in flight" use case (e.g. a submit button mid-request).
+     * Set to `false` for an ongoing, interactive working state — such as a
+     * toggle that starts/stops a live process and must stay clickable while
+     * it runs.
+     */
+    disableWhenWorking?: boolean;
     /**
      * How the button is displayed.
      */
@@ -42,7 +50,9 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
      */
     isSplitButton?: boolean;
     /**
-     * Is the button in a working state?
+     * Is the button in a working state? Renders a leading spinner (colored and
+     * sized to match the button) while keeping the label and icon visible.
+     * Disables the button unless `disableWhenWorking` is set to `false`.
      */
     isWorking?: boolean;
     /**

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

@@ -1,4 +1,5 @@
 import { ComponentPropsWithoutRef } from 'react';
+import { IconButtonSize } from '../../buttons/IconButton/IconButton';
 /**
  * Prop types for ClipboardButton
  */
@@ -23,6 +24,10 @@ export interface ClipboardButtonProps extends ComponentPropsWithoutRef<'button'>
      * Show a visible border around the button.
      */
     hasBorder?: boolean;
+    /**
+     * Which size of button to render.
+     */
+    size?: IconButtonSize;
     /**
      * Which variant of button to render.
      */
@@ -31,4 +36,4 @@ export interface ClipboardButtonProps extends ComponentPropsWithoutRef<'button'>
 /**
  * ClipboardButton UI component
  */
-export declare const ClipboardButton: ({ ariaLabel, className, clipboardText, disabled, hasBorder, variant, ...props }: ClipboardButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const ClipboardButton: ({ ariaLabel, className, clipboardText, disabled, hasBorder, size, variant, ...props }: ClipboardButtonProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -2,7 +2,7 @@ import React, { ComponentPropsWithoutRef, MouseEvent } from 'react';
 import { ButtonType } from '../../../libs/types/custom-types';
 import { PDSIcon } from '../../icons/Icon/Icon';
 import './icon-button.css';
-type IconButtonSize = 'xs' | 's' | 'm';
+export type IconButtonSize = 'xs' | 's' | 'm';
 interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
     /**
      * Aria-label attribute.

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

@@ -16,6 +16,12 @@ interface SSOButtonProps extends ComponentPropsWithoutRef<'button'> {
      * Is the button disabled?
      */
     disabled?: boolean;
+    /**
+     * Whether `isWorking` disables the button. Defaults to `true`. Set to
+     * `false` for an ongoing, interactive working state that must stay
+     * clickable while it runs.
+     */
+    disableWhenWorking?: boolean;
     /**
      * Is the button in a working state?
      */
@@ -45,5 +51,5 @@ interface SSOButtonProps extends ComponentPropsWithoutRef<'button'> {
 /**
  * A Component used to render an SSO Button
  */
-export declare const SSOButton: ({ buttonType, className, disabled, isWorking, label, onClick, platform, size, tooltipText, ...props }: SSOButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const SSOButton: ({ buttonType, className, disabled, disableWhenWorking, isWorking, label, onClick, platform, size, tooltipText, ...props }: SSOButtonProps) => import("react/jsx-runtime").JSX.Element;
 export {};

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

@@ -17,6 +17,12 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
      * Is the button disabled?
      */
     disabled?: boolean;
+    /**
+     * Whether `isWorking` disables the button. Defaults to `true`. Set to
+     * `false` for an ongoing, interactive working state that must stay
+     * clickable while it runs.
+     */
+    disableWhenWorking?: boolean;
     /**
      * Should the button have a border?
      */
@@ -42,7 +48,9 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
      */
     isMonospace?: boolean;
     /**
-     * Is the button in the process of performing a task and should be disabled?
+     * Is the button in the process of performing a task? Renders a spinner in
+     * place of the icon, and disables the button unless `disableWhenWorking`
+     * is set to `false`.
      */
     isWorking?: boolean;
     /**
@@ -67,4 +75,4 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * UtilityButton UI component
  */
-export declare const UtilityButton: ({ buttonProps, className, disabled, hasBorder, iconName, iconPosition, isCritical, isLoading, isMonospace, isWorking, label, linkContent, onClick, tooltipText, ...props }: UtilityButtonProps) => import("react/jsx-runtime").JSX.Element;
+export declare const UtilityButton: ({ buttonProps, className, disabled, disableWhenWorking, hasBorder, iconName, iconPosition, isCritical, isLoading, isMonospace, isWorking, label, linkContent, onClick, tooltipText, ...props }: UtilityButtonProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/empty-states/VerticalEmptyState/VerticalEmptyState.d.ts

@@ -1,5 +1,6 @@
 import { ComponentPropsWithoutRef, ReactNode } from 'react';
 import { HeadingLevel } from '../../../libs/types/custom-types';
+import { PDSIllustration } from '../../media/Illustration/Illustration';
 import './vertical-empty-state.css';
 /**
  * Prop types for VerticalEmptyState
@@ -14,6 +15,20 @@ export interface VerticalEmptyStateProps extends ComponentPropsWithoutRef<'div'>
      * This should be a Button, ButtonLink, or two items wrapped in a `pds-button-group` div.
      */
     ctaRegion?: ReactNode;
+    /**
+     * Grows this component to fill its parent's available height and
+     * vertically centers its content within it — for a full-page empty state
+     * (404, access denied, etc.) that should sit centered in the remaining
+     * viewport rather than top-aligned.
+     *
+     * Only takes effect when the immediate parent is itself a flex container
+     * with room to grow into (e.g. `AppLayout`'s `main-inner`) — otherwise
+     * `flex: 1` has nothing to act on and this is a no-op. Prefer this over
+     * hand-rolled centering CSS (a guessed `height`/`min-height` calc, or
+     * wrapping in `FlexContainer`), which breaks whenever real content grows
+     * taller than the guess.
+     */
+    fillHeight?: boolean;
     /**
      * heading to explain the empty state.
      */
@@ -23,20 +38,43 @@ export interface VerticalEmptyStateProps extends ComponentPropsWithoutRef<'div'>
      */
     headingLevel?: HeadingLevel;
     /**
-     * PDS illustration image to display above the heading.
-     * Can be a string (a link to an SVG file, either from Brandfolder or
-     * local) or a React node (e.g. a Spinner, for in-progress empty states).
-     * See full documentation for details.
+     * Which illustration to show above the heading, using the toolkit's
+     * `Illustration` component — the preferred way to provide media here.
+     * Decorative (no accessible name). Takes precedence over `image` if both
+     * are set.
+     */
+    illustration?: PDSIllustration;
+    /**
+     * Width of `illustration` (CSS value). Height follows automatically from
+     * its aspect ratio.
+     */
+    illustrationWidth?: string;
+    /**
+     * Media to display above the heading. Can be a string (a link to an SVG
+     * file, either from Brandfolder or local) or a React node, such as
+     * `Picture` for a raster image. Prefer `illustration`/`isLoading` for a
+     * new illustration or loading state — `image` is a legacy fallback for
+     * anything else, slated for eventual deprecation.
+     *
+     * `imageWidth`/`imageHeight` size the container a string `image` renders
+     * into; it fills that container's height, scaling width proportionally.
+     * Any React node is responsible for its own sizing within it (pass
+     * matching `width`/`height` if you want it to fill the container).
      */
     image?: string | ReactNode;
     /**
-     * Height of the image (CSS value like '200px', '50%', etc.)
+     * Height of the image container (CSS value like '120px', '50%', etc.)
      */
     imageHeight?: string;
     /**
-     * Width of the image (CSS value like '200px', '50%', etc.)
+     * Width of the image container (CSS value like '200px', '50%', etc.)
      */
     imageWidth?: string;
+    /**
+     * Shows a loading spinner instead of `illustration`/`image`, for an
+     * in-progress empty state. Takes precedence over both.
+     */
+    isLoading?: boolean;
     /**
      * Message to display below the heading.
      */
@@ -45,4 +83,4 @@ export interface VerticalEmptyStateProps extends ComponentPropsWithoutRef<'div'>
 /**
  * VerticalEmptyState UI component
  */
-export declare const VerticalEmptyState: ({ className, ctaRegion, heading, headingLevel, image, imageHeight, imageWidth, message, ...props }: VerticalEmptyStateProps) => import("react/jsx-runtime").JSX.Element;
+export declare const VerticalEmptyState: ({ className, ctaRegion, fillHeight, heading, headingLevel, illustration, illustrationWidth, image, imageHeight, imageWidth, isLoading, message, ...props }: VerticalEmptyStateProps) => import("react/jsx-runtime").JSX.Element;

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-28T21:46:31.338Z
+ * Generated: 2026-10-12T20:45:24.386Z
  */
 import { customIcons } from './custom-icons';
 export { customIcons };

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

@@ -204,10 +204,28 @@ interface DatepickerSharedProps extends DatepickerHTMLProps {
      * Maximum selectable date.
      */
     maxDate?: Date;
+    /**
+     * Helper text displayed below the input.
+     */
+    message?: string | ReactNode;
     /**
      * Minimum selectable date.
      */
     minDate?: Date;
+    /**
+     * Fired when the viewer toggles the `showTimeZoneSwitcher` control,
+     * reporting the newly selected zone. `timeZone` is the resolved IANA
+     * identifier to format your own UI in (`'UTC'`, or the viewer's own
+     * browser zone for the "Local" side); `mode` is which side was
+     * chosen. Called once per toggle, and only for a real viewer change — not
+     * when the `timeZone` prop changes underneath it. The switcher stays
+     * internally managed; mirror the zone into your own state from here (e.g.
+     * an Edge Logs table labelling its timestamp column to match the picker).
+     * `onChange` deliberately does *not* fire for a zone toggle, since the
+     * selected instant is unchanged. Has no effect unless
+     * `showTimeZoneSwitcher` (and therefore `showTime`) is set.
+     */
+    onTimeZoneChange?: (timeZone: string, mode: 'local' | 'utc') => void;
     /**
      * Placeholder text for the trigger button.
      */
@@ -268,24 +286,6 @@ interface DatepickerSharedProps extends DatepickerHTMLProps {
      * date. Has no effect unless `showTime` is also true.
      */
     showTimeZoneSwitcher?: boolean;
-    /**
-     * Fired when the viewer toggles the `showTimeZoneSwitcher` control,
-     * reporting the newly selected zone. `timeZone` is the resolved IANA
-     * identifier to format your own UI in (`'UTC'`, or the viewer's own
-     * browser zone for the "Local" side); `mode` is which side was
-     * chosen. Called once per toggle, and only for a real viewer change — not
-     * when the `timeZone` prop changes underneath it. The switcher stays
-     * internally managed; mirror the zone into your own state from here (e.g.
-     * an Edge Logs table labelling its timestamp column to match the picker).
-     * `onChange` deliberately does *not* fire for a zone toggle, since the
-     * selected instant is unchanged. Has no effect unless
-     * `showTimeZoneSwitcher` (and therefore `showTime`) is set.
-     */
-    onTimeZoneChange?: (timeZone: string, mode: 'local' | 'utc') => void;
-    /**
-     * Helper text displayed below the input.
-     */
-    message?: string | ReactNode;
     /**
      * Whether the calendar footer includes its "Today" button. Defaults to
      * `true`. Set to `false` to leave only the end-aligned buttons —

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

@@ -46,6 +46,13 @@ export interface SwitchProps extends ComponentPropsWithoutRef<'div'> {
      * Label of the switch field.
      */
     label: string;
+    /**
+     * Visual treatment of the label. `'default'` matches other form field
+     * labels. `'heading'` is semibold and a size up, for a switch that reads as
+     * its own setting among a list of settings rather than a form field. It
+     * stays a `<label>`, not a heading element.
+     */
+    labelVariant?: 'default' | 'heading';
     /**
      * Message or description used to help clarify the usage of the input.
      */

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

@@ -0,0 +1,90 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import type { WorkspaceSelectorItem } from '../../navigation/WorkspaceSelector/WorkspaceSelector';
+import './workspace-picker.css';
+/**
+ * Prop types for WorkspacePicker
+ */
+export interface WorkspacePickerProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Accessible label for the `<nav>` landmark, distinct from `label` (the
+     * visible field legend). Optional since the legend already names the
+     * picker as a whole -- set this only if the nav landmark itself needs a
+     * different name.
+     */
+    ariaLabel?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Label for the filter input.
+     */
+    filterLabel?: string;
+    /**
+     * Placeholder text for the filter input.
+     */
+    filterPlaceholder?: string;
+    /**
+     * Unique ID for the picker.
+     */
+    id: string;
+    /**
+     * Maximum width of the input field in pixels. The input fills its
+     * container up to this cap, then shrinks below it rather than
+     * overflowing in a tight flex/grid layout. When omitted, the input
+     * fills its container with no cap.
+     */
+    inputWidth?: number;
+    /**
+     * Minimum width of the input field in pixels, in a tight flex/grid layout
+     * that wraps (e.g. flexWrap="wrap"). Has no effect without inputWidth,
+     * and no effect on its own without a wrapping layout.
+     */
+    inputWidthMin?: number;
+    /**
+     * Label for the picker. Will be rendered as the fieldset legend.
+     */
+    label: string;
+    /**
+     * Input message. Used to provide supplemental text. Will be displayed
+     * below the picker.
+     */
+    message?: string | ReactNode;
+    /**
+     * Minimum number of items before the filter input is shown.
+     * @default 8
+     */
+    minFilterItems?: number;
+    /**
+     * Text to display when no results are found.
+     */
+    noResultsText?: string;
+    /**
+     * Called when a workspace without its own `workspaceLink` is selected
+     * (e.g. picking a workspace as a value rather than navigating to it).
+     */
+    onSelectWorkspace?: (workspace: WorkspaceSelectorItem) => void;
+    /**
+     * Should the label (legend) be visible? If false, it will render for
+     * screen readers only.
+     * @default true
+     */
+    showLabel?: boolean;
+    /**
+     * Number of whole item rows visible before the list scrolls.
+     * @default 6
+     */
+    visibleItemCount?: number;
+    /**
+     * List of all workspaces for a user.
+     */
+    workspaceList?: WorkspaceSelectorItem[];
+}
+/**
+ * WorkspacePicker UI component. A standalone search + selectable list of
+ * workspaces, for use as an input (e.g. choosing a workspace before creating
+ * a site) rather than navigation -- unlike `WorkspaceSelector`'s dropdown
+ * menu or `WorkspaceSelectorPanel`'s embedded display, both of which select
+ * a workspace by linking to it.
+ */
+export declare const WorkspacePicker: ({ ariaLabel, className, filterLabel, filterPlaceholder, id, inputWidth, inputWidthMin, label, message, minFilterItems, noResultsText, onSelectWorkspace, showLabel, visibleItemCount, workspaceList, ...props }: WorkspacePickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/media/Illustration/Illustration.d.ts

@@ -0,0 +1,37 @@
+import { ComponentPropsWithoutRef } from 'react';
+import { type PDSIllustrationName } from './generated-illustration-data';
+import './illustration.css';
+export type PDSIllustration = PDSIllustrationName;
+/**
+ * Prop types for Illustration
+ */
+export interface IllustrationProps extends ComponentPropsWithoutRef<'svg'> {
+    /**
+     * Accessible name for the illustration. Defaults to '' (decorative,
+     * hidden from assistive tech). When provided, renders an SVG <title>
+     * and exposes the illustration as role="img" with that accessible name.
+     */
+    alt?: string;
+    /**
+     * Additional class names
+     */
+    className?: string;
+    /**
+     * Optional height (CSS value). If not provided, the illustration is
+     * sized by its intrinsic viewBox, same as Picture.
+     */
+    height?: string | number;
+    /**
+     * Which illustration to render.
+     */
+    name: PDSIllustration;
+    /**
+     * Optional width (CSS value). If not provided, the illustration is
+     * sized by its intrinsic viewBox, same as Picture.
+     */
+    width?: string | number;
+}
+/**
+ * Illustration UI component
+ */
+export declare const Illustration: ({ alt, className, height, name, width, ...props }: IllustrationProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/media/Illustration/generated-illustration-data.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Auto-generated illustration data - DO NOT EDIT MANUALLY
+ *
+ * Generated by: npm run generate:illustration-data
+ * Source: illustration-registry.ts + illustrations/*.svg
+ * Generated: 2026-10-12T20:45:25.027Z
+ */
+import React from 'react';
+export interface IllustrationData {
+    height: number;
+    render: () => React.ReactNode;
+    width: number;
+}
+export declare const illustrationData: Record<string, IllustrationData>;
+export declare const illustrationList: readonly ["createEnvLive", "createEnvMultidev", "createEnvTest", "underConstruction"];
+export type PDSIllustrationName = (typeof illustrationList)[number];

package/dist/components/media/Illustration/illustration-registry.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Illustration Registry - Source of truth for PDS illustration mappings.
+ *
+ * Maps PDS camelCase illustration names to their raw SVG source file.
+ *
+ * To add an illustration:
+ *   1. Export the polished SVG from Figma into illustrations/<kebab-case-name>.svg
+ *   2. Run: npm run generate:illustration
+ *      (prompts for a PDS name — suggests one from the filename — adds the
+ *      entry below, and runs generate:illustration-data for you)
+ *   3. Commit the SVG, this file, and generated-illustration-data.tsx
+ *
+ * To add an entry manually instead: add it below, then run
+ * npm run generate:illustration-data yourself.
+ */
+export interface IllustrationRegistryEntry {
+    file: string;
+}
+export declare const illustrationRegistry: Record<string, IllustrationRegistryEntry>;

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

@@ -38,6 +38,18 @@ export interface BookmarksPanelProps extends ComponentPropsWithoutRef<'div'> {
      * @default 'Bookmarks'
      */
     heading?: string;
+    /**
+     * Shows skeleton rows in place of the list. Keeps the same `WidgetPanel`
+     * heading/icon across a loading-to-loaded transition, rather than a
+     * consumer swapping this component out for a different loading
+     * placeholder (which unmounts and remounts the whole panel).
+     */
+    isLoading?: boolean;
+    /**
+     * Number of skeleton rows shown while `isLoading`.
+     * @default 5
+     */
+    loadingRowCount?: number;
     /**
      * Text shown in place of the list when there are no bookmarks.
      */
@@ -64,4 +76,4 @@ export interface BookmarksPanelProps extends ComponentPropsWithoutRef<'div'> {
  * 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;
+export declare const BookmarksPanel: ({ bookmarks, className, contentMaxHeight, createLabel, getMenuAriaLabel, getRemoveCriticalLabel, heading, isLoading, loadingRowCount, noResultsText, onCreateBookmark, removeLabel, renameLabel, ...props }: BookmarksPanelProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -1 +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)}}
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-bookmarks-panel .pds-widget-panel__content{padding-block:var(--pds-spacing-3xs) var(--pds-spacing-2xs)}.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 .pds-row-actions-menu__content a{padding-inline-start:calc(var(--panel-padding-inline)*1.125)}.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)}.pds-bookmarks-panel__item--loading{padding-inline:calc(var(--panel-padding-inline)*1.125)}.pds-bookmarks-panel__list--loading{padding-block:var(--pds-spacing-2xs)}}

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

@@ -2,7 +2,7 @@
 		--pds-color-button-primary-background-hover
 	);--button-background-color-active:var(
 		--pds-color-button-primary-background-active
-	);--button-foreground-color:var(--pds-color-button-primary-foreground);--button-foreground-color-hover:var(--button-foreground-color);--button-border-color:var(--pds-color-button-primary-background-default);--button-border-color-hover:var(--pds-color-button-primary-background-hover);--button-border-color-active:var(--button-background-color-active);--button-box-shadow-active:var(--pds-elevation-button-primary-active);align-items:center;background-color:var(--button-background-color);border-color:var(--button-border-color);border-radius:var(--pds-border-radius-button);border-style:solid;border-width:var(--pds-border-width-default);color:var(--button-foreground-color);cursor:pointer;display:inline-flex;font-family:var(--pds-typography-ff-default);font-size:var(--button-font-size);font-weight:var(--pds-typography-fw-medium);gap:var(--button-gap-inline);height:var(--button-height);justify-content:center;line-height:1;max-height:var(--button-height);padding-block:0;padding-inline:var(--button-padding-inline);text-decoration:none;transition:var(--pds-animation-transition-button);white-space:nowrap}.pds-button:disabled{cursor:not-allowed;opacity:40%}.pds-button:hover:enabled,a.pds-button:hover{--button-background-color:var(--button-background-color-hover);--button-border-color:var(--button-border-color-hover);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:active:enabled,a.pds-button:active{--button-background-color:var(--button-background-color-active);--button-border-color:var(--button-border-color-active);box-shadow:var(--button-box-shadow-active);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px;transition:var(--pds-animation-transition-focus)}.pds-button__icon{flex-shrink:0}.pds-button--l .pds-button__icon:not(.pds-status-dot){height:var(--button-font-size);width:var(--button-font-size)}.pds-button__tally{flex-shrink:0}.pds-button--highlight .pds-button__tally,.pds-button--primary .pds-button__tally{box-shadow:0 0 0 1px hsla(0,0%,100%,.75)}.pds-button--xs .pds-status-dot{--dot-size:8px}.pds-button--s .pds-status-dot{--dot-size:10px}.pds-button--m .pds-status-dot{--dot-size:12px;margin-inline-end:2px}.pds-button--l .pds-status-dot{--dot-size:14px;margin-inline-end:4px}.pds-button--full-width{width:100%}.pds-button--xs{--button-font-size:var(--pds-typography-size-xs);--button-height:var(--pds-spacing-button-height-xs);--button-padding-inline:var(--pds-spacing-button-padding-inline-xs);--button-gap-inline:var(--pds-spacing-button-gap-inline-xs)}.pds-button--s{--button-font-size:var(--pds-typography-size-s);--button-height:var(--pds-spacing-button-height-s);--button-padding-inline:var(--pds-spacing-button-padding-inline-s);-button-gap-inline:var(--pds-spacing-button-gap-inline-s)}.pds-button--m{--button-font-size:var(--pds-typography-size-m);--button-height:var(--pds-spacing-button-height-m);--button-padding-inline:var(--pds-spacing-button-padding-inline-m);--button-gap-inline:var(--pds-spacing-button-gap-inline-m)}.pds-button--l{--button-font-size:var(--pds-typography-size-l);--button-height:var(--pds-spacing-button-height-l);--button-padding-inline:var(--pds-spacing-button-padding-inline-l);--button-gap-inline:var(--pds-spacing-button-gap-inline-l)}.pds-button--secondary{--button-background-color:var(
+	);--button-foreground-color:var(--pds-color-button-primary-foreground);--button-foreground-color-hover:var(--button-foreground-color);--button-border-color:var(--pds-color-button-primary-background-default);--button-border-color-hover:var(--pds-color-button-primary-background-hover);--button-border-color-active:var(--button-background-color-active);--button-box-shadow-active:var(--pds-elevation-button-primary-active);align-items:center;background-color:var(--button-background-color);border-color:var(--button-border-color);border-radius:var(--pds-border-radius-button);border-style:solid;border-width:var(--pds-border-width-default);color:var(--button-foreground-color);cursor:pointer;display:inline-flex;font-family:var(--pds-typography-ff-default);font-size:var(--button-font-size);font-weight:var(--pds-typography-fw-medium);gap:var(--button-gap-inline);height:var(--button-height);justify-content:center;line-height:1;max-height:var(--button-height);padding-block:0;padding-inline:var(--button-padding-inline);text-decoration:none;transition:var(--pds-animation-transition-button);white-space:nowrap}.pds-button:has(>.pds-button__leading>.pds-button__working-indicator){padding-inline-start:calc(var(--button-padding-inline) - var(--pds-spacing-4xs))}.pds-button__working-indicator{margin-inline-end:var(--pds-spacing-4xs)}.pds-button__leading{display:contents}.pds-button:disabled{cursor:not-allowed;opacity:40%}.pds-button:hover:enabled,a.pds-button:hover{--button-background-color:var(--button-background-color-hover);--button-border-color:var(--button-border-color-hover);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:active:enabled,a.pds-button:active{--button-background-color:var(--button-background-color-active);--button-border-color:var(--button-border-color-active);box-shadow:var(--button-box-shadow-active);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px;transition:var(--pds-animation-transition-focus)}.pds-button__icon{flex-shrink:0}.pds-button--l .pds-button__icon:not(.pds-status-dot){height:var(--button-font-size);width:var(--button-font-size)}.pds-button__tally{flex-shrink:0}.pds-button--highlight .pds-button__tally,.pds-button--primary .pds-button__tally{box-shadow:0 0 0 1px hsla(0,0%,100%,.75)}.pds-button--xs .pds-status-dot{--dot-size:8px}.pds-button--s .pds-status-dot{--dot-size:10px}.pds-button--m .pds-status-dot{--dot-size:12px;margin-inline-end:2px}.pds-button--l .pds-status-dot{--dot-size:14px;margin-inline-end:4px}.pds-button--full-width{width:100%}.pds-button--xs{--button-font-size:var(--pds-typography-size-xs);--button-height:var(--pds-spacing-button-height-xs);--button-padding-inline:var(--pds-spacing-button-padding-inline-xs);--button-gap-inline:var(--pds-spacing-button-gap-inline-xs)}.pds-button--s{--button-font-size:var(--pds-typography-size-s);--button-height:var(--pds-spacing-button-height-s);--button-padding-inline:var(--pds-spacing-button-padding-inline-s);-button-gap-inline:var(--pds-spacing-button-gap-inline-s)}.pds-button--m{--button-font-size:var(--pds-typography-size-m);--button-height:var(--pds-spacing-button-height-m);--button-padding-inline:var(--pds-spacing-button-padding-inline-m);--button-gap-inline:var(--pds-spacing-button-gap-inline-m)}.pds-button--l{--button-font-size:var(--pds-typography-size-l);--button-height:var(--pds-spacing-button-height-l);--button-padding-inline:var(--pds-spacing-button-padding-inline-l);--button-gap-inline:var(--pds-spacing-button-gap-inline-l)}.pds-button--secondary{--button-background-color:var(
 		--pds-color-button-secondary-background-default
 	);--button-background-color-hover:var(
 		--pds-color-button-secondary-background-hover
@@ -68,4 +68,4 @@
 		--pds-color-button-reverse-secondary-foreground
 	);--button-border-color:var(--pds-color-button-reverse-secondary-border);--button-border-color-hover:var(--pds-color-button-reverse-secondary-border);--button-border-color-active:var(
 		--pds-color-button-reverse-secondary-border
-	)}.pds-button--link{background-color:transparent;border:none;border-radius:0;color:var(--pds-color-interactive-link-default);height:unset;justify-content:unset;letter-spacing:0;max-height:unset;padding-inline:0;padding:0;transition:var(--pds-animation-transition-button)}.pds-button--link:hover:enabled,a.pds-button--link:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-button--link:active:enabled,a.pds-button--link:active{box-shadow:none;color:var(--pds-color-interactive-link-active)}.pds-button--link .pds-button-link__icon,.pds-button--link .pds-button__icon{transform:scale(.9)}.pds-button--loading{cursor:not-allowed}.pds-button--loading:active,.pds-button--loading:hover:enabled{--button-background-color:var(--pulse-regular-base-color);--button-border-color:var(--pulse-regular-base-color)}.pds-button--loading.pds-pulse{background-color:var(--pulse-regular-base-color);border-color:var(--pulse-regular-base-color);color:transparent}.pds-button--loading .pds-button__icon,.pds-button--loading .pds-button__tally,.pds-button--loading .pds-button__working-indicator{opacity:0}.pds-button-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m);width:100%}@media (min-width:768px){.pds-button-group{column-gap:var(--pds-spacing-s);flex-direction:row;width:unset}.pds-button-group--lg{column-gap:var(--pds-spacing-m)}}}
+	)}.pds-button--link{background-color:transparent;border:none;border-radius:0;color:var(--pds-color-interactive-link-default);height:unset;justify-content:unset;letter-spacing:0;max-height:unset;padding-inline:0;padding:0;transition:var(--pds-animation-transition-button)}.pds-button--link:hover:enabled,a.pds-button--link:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-button--link:active:enabled,a.pds-button--link:active{box-shadow:none;color:var(--pds-color-interactive-link-active)}.pds-button--link .pds-button-link__icon,.pds-button--link .pds-button__icon{transform:scale(.9)}.pds-button--loading{cursor:not-allowed}.pds-button--loading:active,.pds-button--loading:hover:enabled{--button-background-color:var(--pulse-regular-base-color);--button-border-color:var(--pulse-regular-base-color)}.pds-button--loading.pds-pulse{background-color:var(--pulse-regular-base-color);border-color:var(--pulse-regular-base-color);color:transparent}.pds-button--loading .pds-button__icon,.pds-button--loading .pds-button__tally,.pds-button--loading .pds-button__working-indicator{opacity:0}.pds-button-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m);width:100%}.pds-button-group--inline{column-gap:var(--pds-spacing-s);flex-direction:row;flex-wrap:wrap;row-gap:var(--pds-spacing-s);width:unset}@media (min-width:768px){.pds-button-group{column-gap:var(--pds-spacing-s);flex-direction:row;width:unset}.pds-button-group--l{column-gap:var(--pds-spacing-m)}}}

package/dist/css/component-css/pds-compact-empty-state.css

@@ -1 +1 @@
-@layer pds-v1, pds-v2;@layer pds-v2{.pds-compact-empty-state{align-items:center;display:flex;flex-direction:column;font-family:var(--pds-typography-ff-default);padding-block:var(--pds-spacing-5xl);row-gap:var(--pds-spacing-xl);text-align:center;width:100%}.pds-compact-empty-state__icon{color:var(--pds-color-foreground-default-secondary)}.pds-compact-empty-state__heading{display:block;font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-l);font-weight:var(--pds-typography-fw-bold);margin-block-end:var(--pds-spacing-3xs)}.pds-compact-empty-state__message{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-m);margin-block-end:0;margin-inline:auto;max-width:600px;text-wrap:pretty}}
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-compact-empty-state{align-items:center;display:flex;flex-direction:column;font-family:var(--pds-typography-ff-default);padding-block:var(--pds-spacing-5xl);padding-inline:var(--pds-spacing-l);row-gap:var(--pds-spacing-xl);text-align:center;width:100%}.pds-compact-empty-state__icon{color:var(--pds-color-foreground-default-secondary)}.pds-compact-empty-state__heading{display:block;font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-l);font-weight:var(--pds-typography-fw-bold);margin-block-end:var(--pds-spacing-3xs)}.pds-compact-empty-state__message{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-m);margin-block-end:0;margin-inline:auto;max-width:600px;text-wrap:pretty}}

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

@@ -1 +1 @@
-@layer pds-v1, pds-v2;@layer pds-v2{.pds-datepicker{color:var(--pds-color-foreground-default);font-family:var(--pds-typography-ff-default)}.pds-datepicker__input-wrapper{align-items:center;column-gap:var(--pds-spacing-s);display:flex;row-gap:var(--pds-spacing-xs);width:100%}.pds-datepicker__trigger{align-items:center;background:var(--pds-color-surface-default);border:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:var(--pds-border-radius-input);color:var(--pds-color-foreground-default);cursor:pointer;display:flex;font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-s);height:var(--pds-spacing-input-height-s);justify-content:space-between;min-width:10rem;padding:var(--pds-spacing-s);width:100%}.pds-datepicker__trigger:disabled{cursor:not-allowed}.pds-datepicker__trigger--open,.pds-datepicker__trigger:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0;transition:var(--pds-animation-transition-focus)}.pds-datepicker__trigger-text{align-items:center;display:flex;flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.pds-datepicker__trigger-text--placeholder{color:var(--pds-color-input-placeholder)}.pds-datepicker__trigger-icon{color:var(--pds-color-foreground-default);flex-shrink:0;margin-block-start:-1px}.pds-datepicker__separator{padding-inline:var(--pds-spacing-s)}.pds-datepicker__popover{--day-size:1.75rem;--day-gap:4px;background-color:var(--pds-color-surface-default);border-radius:var(--pds-border-radius-container);box-shadow:var(--pds-elevation-overlay);display:flex;overflow-x:hidden;overflow-y:auto;z-index:var(--pds-z-index-overlay)}.pds-datepicker__presets{border-inline-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);display:flex;flex-direction:column;justify-content:space-between;min-width:13.75rem;padding:var(--pds-spacing-s);width:13.75rem}.pds-datepicker__presets--collapsed{border-inline-end:none}.pds-datepicker__calendar-wrapper{flex-basis:0;flex-shrink:0;overflow:hidden;transition:flex-basis .3s cubic-bezier(.2,0,0,1)}.pds-datepicker__calendar-wrapper-inner{display:flex;flex-direction:column;height:100%;min-height:0}.pds-datepicker__preset-list{display:flex;flex-direction:column;gap:var(--pds-spacing-4xs);min-height:0;overflow-y:auto}.pds-datepicker__preset-item{align-items:center;background:none;border:none;border-radius:var(--pds-border-radius-container);color:var(--pds-color-dropdown-foreground);cursor:pointer;display:flex;font-size:var(--pds-typography-size-s);justify-content:space-between;min-height:var(--pds-spacing-2xl);padding-block:var(--pds-spacing-2xs);padding-inline:var(--pds-spacing-xs);text-align:start}.pds-datepicker__preset-item:hover{background-color:var(--pds-color-dropdown-item-background-hover)}.pds-datepicker__preset-item:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-datepicker__preset-item--active{font-weight:var(--pds-typography-fw-medium)}.pds-datepicker__preset-item--active,.pds-datepicker__preset-item--active:hover{background-color:var(--pds-color-interactive-background-active)}.pds-datepicker__preset-divider{background-color:var(--pds-color-dropdown-separator);height:var(--pds-border-width-default);margin-block:var(--pds-spacing-2xs)}.pds-datepicker__calendar{background-color:var(--pds-color-surface-default);display:flex;flex-direction:column;gap:var(--pds-spacing-m);max-height:100%;min-height:0;padding:var(--pds-spacing-s) var(--pds-spacing-s) var(--pds-spacing-s)}.pds-datepicker__nav{align-items:center;display:flex;justify-content:space-between;margin-block-end:var(--pds-spacing-s)}.pds-datepicker__nav-title{color:var(--pds-color-foreground-default);flex:1;font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-semibold);text-align:center}.pds-datepicker__nav-button{align-items:center;background:none;border:none;border-radius:var(--pds-border-radius-button);color:var(--pds-color-foreground-default-secondary);cursor:pointer;display:flex;justify-content:center;padding:var(--pds-spacing-2xs)}.pds-datepicker__nav-button:hover:enabled{background-color:var(--pds-color-button-subtle-background-hover);color:var(--pds-color-button-secondary-foreground-hover)}.pds-datepicker__nav-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-datepicker__nav-button:disabled{cursor:not-allowed;opacity:40%}.pds-datepicker__nav-button-spacer{visibility:hidden}.pds-datepicker__grids{display:flex;flex:1 1 auto;gap:var(--pds-spacing-l);min-height:0;overflow-y:auto}.pds-datepicker__actions,.pds-datepicker__footer-note,.pds-datepicker__time-section{flex-shrink:0}.pds-datepicker__month{flex:1}.pds-datepicker__grid{border-collapse:collapse;margin-inline:auto;width:auto}.pds-datepicker__grid th{padding:0}.pds-datepicker__grid tr{border-block-end:none}.pds-datepicker__weekday{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-semibold);height:var(--day-size);text-align:center}.pds-datepicker__cell{padding-block:3px;padding-inline:0;position:relative;text-align:center;width:calc(var(--day-size) + var(--day-gap))}.pds-datepicker__day{align-items:center;border-radius:50%;cursor:pointer;display:flex;font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular);height:var(--day-size);justify-content:center;outline:none;position:relative;width:var(--day-size);z-index:0}.pds-datepicker__day[hidden]{display:none}.pds-datepicker__day:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-datepicker__day--today{box-shadow:inset 0 0 0 var(--pds-border-width-default) var(--pds-color-datepicker-accent-foreground)}.pds-datepicker__cell--in-range{background-clip:content-box;background-color:var(--pds-color-interactive-background-selected)}.pds-datepicker__cell--range-start{border-end-start-radius:calc(var(--day-size)/2);border-start-start-radius:calc(var(--day-size)/2)}.pds-datepicker__cell--range-end{border-end-end-radius:calc(var(--day-size)/2);border-start-end-radius:calc(var(--day-size)/2);padding-inline-end:var(--day-gap)}.pds-datepicker__day--selected{background-color:var(--pds-color-datepicker-selected-background);color:var(--pds-color-datepicker-selected-foreground)}.pds-datepicker__day--today.pds-datepicker__day--selected{box-shadow:inset 0 0 0 var(--pds-border-width-default) var(--pds-color-datepicker-selected-foreground)}.pds-datepicker__day--disabled,.pds-datepicker__day--unavailable{cursor:not-allowed;opacity:40%}.pds-datepicker__time-section{border-block-start:var(--pds-border-width-default) solid var(--pds-color-border-default);display:flex;flex-direction:column;gap:var(--pds-spacing-s);padding-block-start:var(--pds-spacing-m)}.pds-datepicker__timezone-switcher{align-items:center;display:flex;gap:var(--pds-spacing-s)}.pds-datepicker__timezone-switcher-label{color:var(--pds-color-foreground-default);font-size:var(--pds-typography-size-input-label);font-weight:var(--pds-typography-fw-medium);white-space:nowrap}.pds-datepicker__time-fields{display:flex;gap:var(--pds-spacing-l)}.pds-datepicker__time-fields>*{flex:1}.pds-datepicker__footer-note{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-s)}.pds-datepicker__actions{display:flex;padding:var(--pds-spacing-xs) var(--pds-spacing-4xs) var(--pds-spacing-3xs)}.pds-datepicker__actions-group{display:flex;gap:var(--pds-spacing-s);margin-inline-start:auto}@media (max-width:767px){.pds-datepicker__input-wrapper{align-items:stretch;flex-direction:column}.pds-datepicker__grids{flex-direction:column}}}
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-datepicker{color:var(--pds-color-foreground-default);font-family:var(--pds-typography-ff-default)}.pds-datepicker__input-wrapper{align-items:center;column-gap:var(--pds-spacing-s);display:flex;row-gap:var(--pds-spacing-xs);width:100%}.pds-datepicker__trigger{align-items:center;background:var(--pds-color-surface-default);border:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:var(--pds-border-radius-input);color:var(--pds-color-foreground-default);cursor:pointer;display:flex;font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-s);height:var(--pds-spacing-input-height-s);justify-content:space-between;min-width:10rem;padding:var(--pds-spacing-s);width:100%}.pds-datepicker__trigger:disabled{cursor:not-allowed}.pds-datepicker__trigger--open,.pds-datepicker__trigger:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0;transition:var(--pds-animation-transition-focus)}.pds-datepicker__trigger-text{align-items:center;display:flex;flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.pds-datepicker__trigger-text--placeholder{color:var(--pds-color-input-placeholder)}.pds-datepicker__trigger-icon{color:var(--pds-color-foreground-default);flex-shrink:0;margin-block-start:-1px}.pds-datepicker__separator{padding-inline:var(--pds-spacing-s)}.pds-datepicker__popover{--day-size:1.75rem;--day-gap:4px;background-color:var(--pds-color-surface-default);border-radius:var(--pds-border-radius-container);box-shadow:var(--pds-elevation-overlay);display:flex;overflow-x:hidden;overflow-y:auto;z-index:var(--pds-z-index-overlay)}.pds-datepicker__presets{border-inline-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);display:flex;flex-direction:column;justify-content:space-between;min-width:12.5rem;padding-block:var(--pds-spacing-s);padding-inline:var(--pds-spacing-xs);width:12.5rem}.pds-datepicker__presets--collapsed{border-inline-end:none}.pds-datepicker__calendar-wrapper{flex-basis:0;flex-shrink:0;overflow:hidden;transition:flex-basis .3s cubic-bezier(.2,0,0,1)}.pds-datepicker__calendar-wrapper-inner{display:flex;flex-direction:column;height:100%;min-height:0}.pds-datepicker__preset-list{display:flex;flex-direction:column;gap:var(--pds-spacing-4xs);min-height:0;overflow-y:auto;padding:var(--pds-border-width-outline)}.pds-datepicker__preset-item{align-items:center;background:none;border:none;border-radius:var(--pds-border-radius-container);color:var(--pds-color-dropdown-foreground);cursor:pointer;display:flex;font-size:var(--pds-typography-size-s);justify-content:space-between;min-height:var(--pds-spacing-2xl);padding-block:var(--pds-spacing-2xs);padding-inline:var(--pds-spacing-xs);text-align:start}.pds-datepicker__preset-item:hover{background-color:var(--pds-color-dropdown-item-background-hover)}.pds-datepicker__preset-item:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-datepicker__preset-item--active{font-weight:var(--pds-typography-fw-medium)}.pds-datepicker__preset-item--active,.pds-datepicker__preset-item--active:hover{background-color:var(--pds-color-interactive-background-active)}.pds-datepicker__preset-divider{background-color:var(--pds-color-dropdown-separator);height:var(--pds-border-width-default);margin-block:var(--pds-spacing-2xs)}.pds-datepicker__calendar{background-color:var(--pds-color-surface-default);display:flex;flex-direction:column;gap:var(--pds-spacing-m);max-height:100%;min-height:0;padding:var(--pds-spacing-s) var(--pds-spacing-s) var(--pds-spacing-s)}.pds-datepicker__nav{align-items:center;display:flex;justify-content:space-between;margin-block-end:var(--pds-spacing-s)}.pds-datepicker__nav-title{color:var(--pds-color-foreground-default);flex:1;font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-semibold);text-align:center}.pds-datepicker__nav-button{align-items:center;background:none;border:none;border-radius:var(--pds-border-radius-button);color:var(--pds-color-foreground-default-secondary);cursor:pointer;display:flex;justify-content:center;padding:var(--pds-spacing-2xs)}.pds-datepicker__nav-button:hover:enabled{background-color:var(--pds-color-button-subtle-background-hover);color:var(--pds-color-button-secondary-foreground-hover)}.pds-datepicker__nav-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-datepicker__nav-button:disabled{cursor:not-allowed;opacity:40%}.pds-datepicker__nav-button-spacer{visibility:hidden}.pds-datepicker__grids{display:flex;flex:1 1 auto;gap:var(--pds-spacing-l);min-height:0;overflow-y:auto}.pds-datepicker__actions,.pds-datepicker__footer-note,.pds-datepicker__time-section{flex-shrink:0}.pds-datepicker__month{flex:1}.pds-datepicker__grid{border-collapse:collapse;margin-inline:auto;width:auto}.pds-datepicker__grid th{padding:0}.pds-datepicker__grid tr{border-block-end:none}.pds-datepicker__weekday{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-semibold);height:var(--day-size);text-align:center}.pds-datepicker__cell{padding-block:3px;padding-inline:0;position:relative;text-align:center;width:calc(var(--day-size) + var(--day-gap))}.pds-datepicker__day{align-items:center;border-radius:50%;cursor:pointer;display:flex;font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular);height:var(--day-size);justify-content:center;outline:none;position:relative;width:var(--day-size);z-index:0}.pds-datepicker__day[hidden]{display:none}.pds-datepicker__day:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-datepicker__day--today{box-shadow:inset 0 0 0 var(--pds-border-width-default) var(--pds-color-datepicker-accent-foreground)}.pds-datepicker__cell--in-range{background-clip:content-box;background-color:var(--pds-color-interactive-background-selected)}.pds-datepicker__cell--range-start{border-end-start-radius:calc(var(--day-size)/2);border-start-start-radius:calc(var(--day-size)/2)}.pds-datepicker__cell--range-end{border-end-end-radius:calc(var(--day-size)/2);border-start-end-radius:calc(var(--day-size)/2);padding-inline-end:var(--day-gap)}.pds-datepicker__day--selected{background-color:var(--pds-color-datepicker-selected-background);color:var(--pds-color-datepicker-selected-foreground)}.pds-datepicker__day--today.pds-datepicker__day--selected{box-shadow:inset 0 0 0 var(--pds-border-width-default) var(--pds-color-datepicker-selected-foreground)}.pds-datepicker__day--disabled,.pds-datepicker__day--unavailable{cursor:not-allowed;opacity:40%}.pds-datepicker__time-section{border-block-start:var(--pds-border-width-default) solid var(--pds-color-border-default);display:flex;flex-direction:column;gap:var(--pds-spacing-s);padding-block-start:var(--pds-spacing-m)}.pds-datepicker__timezone-switcher{align-items:center;display:flex;gap:var(--pds-spacing-s)}.pds-datepicker__presets .pds-datepicker__timezone-switcher{border-block-start:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);gap:var(--pds-spacing-m);margin-block-start:var(--pds-spacing-2xs);margin-inline:var(--pds-border-width-outline);padding-block-start:var(--pds-spacing-s);padding-inline:var(--pds-spacing-xs)}.pds-datepicker__timezone-switcher-label{color:var(--pds-color-foreground-default);font-size:var(--pds-typography-size-input-label);font-weight:var(--pds-typography-fw-medium);white-space:nowrap}.pds-datepicker__time-fields{display:flex;gap:var(--pds-spacing-l)}.pds-datepicker__time-fields>*{flex:1}.pds-datepicker__footer-note{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-s)}.pds-datepicker__actions{display:flex;padding:var(--pds-spacing-xs) var(--pds-spacing-4xs) var(--pds-spacing-3xs)}.pds-datepicker__actions-group{display:flex;gap:var(--pds-spacing-s);margin-inline-start:auto}@media (max-width:767px){.pds-datepicker__input-wrapper{align-items:stretch;flex-direction:column}.pds-datepicker__grids{flex-direction:column;flex-shrink:0;overflow-y:visible}.pds-datepicker__time-fields{flex-direction:column}.pds-datepicker__popover{flex-direction:column;max-width:calc(100vw - var(--pds-spacing-l)*2)}.pds-datepicker__presets{border-block-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);border-inline-end:none;min-width:0;width:100%}.pds-datepicker__calendar-wrapper{flex-basis:auto;transition:none;width:100%}.pds-datepicker__calendar-wrapper--collapsed{display:none}.pds-datepicker__calendar-wrapper-inner{width:100%}}}