@pantheon-systems/pds-toolkit-react 2.0.0-alpha.62 → 2.0.0-alpha.64

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

@@ -162,6 +162,19 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      * Number of skeleton rows to render when `isLoading` is true. Defaults to 5.
      */
     loadingRowCount?: number;
+    /**
+     * Sets a max-height on the scrollable table area. Accepts any valid CSS
+     * value (e.g. `'30rem'`, `'70vh'`). Enables vertical scrolling once content
+     * exceeds it. Undefined by default — the table grows to fit its content.
+     */
+    maxHeight?: string;
+    /**
+     * Sets a min-height on the scrollable table area. Accepts any valid CSS
+     * value. Use alongside `maxHeight` to keep a table with very few rows (or
+     * the empty state) from collapsing to an awkwardly small height. Undefined
+     * by default.
+     */
+    minHeight?: string;
     /**
      * Accessible label for the detail panel "next row" button.
      * Defaults to `'Next row'`. Override for translation.
@@ -284,4 +297,4 @@ export interface TableProps extends ComponentPropsWithoutRef<'table'> {
      */
     totalItemCount?: number;
 }
-export declare const Table: ({ className, closeDetailPanelLabel, columns, currentPage, defaultSortKey, defaultSortOrder, detailPanelNav, detailPanelTitle, detailPanelWidth, emptyState, emptyStateHeading, emptyStateMessage, footer, getPageSizeLabel, getRowClassName, getRowId, getRowSelectDisabledReason, getSelectRowLabel, getSortLabel, inspectedRowId, isLoading, isRowSelectable, itemsPerPage, loadingRowCount, nextDetailPanelRowLabel, onDetailPanelNext, onDetailPanelPrev, onPageChange, onPageSizeChange, onRowInspect, onRowSelectionChange, onSort, pageSizeOptions, pageSizeSelectLabel, paginationLabels, panel, prevDetailPanelRowLabel, renderDetailPanel, renderDetailPanelFooter, rowData, selectAllLabel, selectedRows, sortKey, sortOrder, totalItemCount, ...props }: TableProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Table: ({ className, closeDetailPanelLabel, columns, currentPage, defaultSortKey, defaultSortOrder, detailPanelNav, detailPanelTitle, detailPanelWidth, emptyState, emptyStateHeading, emptyStateMessage, footer, getPageSizeLabel, getRowClassName, getRowId, getRowSelectDisabledReason, getSelectRowLabel, getSortLabel, inspectedRowId, isLoading, isRowSelectable, itemsPerPage, loadingRowCount, maxHeight, minHeight, nextDetailPanelRowLabel, onDetailPanelNext, onDetailPanelPrev, onPageChange, onPageSizeChange, onRowInspect, onRowSelectionChange, onSort, pageSizeOptions, pageSizeSelectLabel, paginationLabels, panel, prevDetailPanelRowLabel, renderDetailPanel, renderDetailPanelFooter, rowData, selectAllLabel, selectedRows, sortKey, sortOrder, totalItemCount, ...props }: TableProps) => 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-08-10T17:23:11.621Z
+ * Generated: 2026-08-11T19:57:03.681Z
  */
 import { customIcons } from './custom-icons';
 export { customIcons };

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

@@ -1,38 +1,89 @@
 import { HTMLAttributes, ReactNode } from 'react';
 import { Locale } from 'date-fns';
-import { DateRange } from 'react-day-picker';
 import { ValidationStatus } from '../../../libs/types/input-types';
-import 'react-day-picker/dist/style.css';
 import './datepicker.css';
+/**
+ * A date range, as plain native `Date` objects. Replaces `react-day-picker`'s
+ * `DateRange` type (which consumers previously imported directly from
+ * `react-day-picker`) now that Datepicker's calendar core is built on
+ * react-aria instead. See guides/DATEPICKER-CONSUMER-MIGRATION.md.
+ */
+export interface DateRange {
+    from?: Date;
+    to?: Date;
+}
 export type PresetType = 'today' | 'current-week' | 'current-month' | 'last-week' | 'last-month';
 export interface CustomPresetConfig {
     custom?: () => DateRange;
     days?: number;
+    hours?: number;
     label: string;
+    minutes?: number;
+    /**
+     * Whether this preset's own `label` (e.g. "Last 15 min") should replace the
+     * trigger's computed date/time text while this preset is active. Defaults
+     * to `true` for sub-day presets (`hours`/`minutes` set, no `days`/`type`)
+     * and `false` otherwise — rolling sub-day windows read better as their own
+     * label than as a precise, already-stale-by-the-time-you-read-it
+     * timestamp. Set explicitly to override the default either way.
+     */
+    showLabelInTrigger?: boolean;
     type?: PresetType;
 }
+/**
+ * Options for `getPresetDateRange`. Both are optional and additive — omitting
+ * them preserves the function's original behavior (browser-local time zone,
+ * Sunday-first weeks).
+ */
+export interface GetPresetDateRangeOptions {
+    /**
+     * BCP-47 locale, used only for `current-week`/`last-week`'s week-start day
+     * (e.g. Monday-first in most of Europe vs. Sunday-first in the US).
+     * Defaults to `'en-US'` (Sunday-first), matching this function's original,
+     * locale-unaware behavior.
+     */
+    locale?: string;
+    /**
+     * IANA time zone identifier. Determines which calendar day/week/month
+     * "today" resolves to for `days`/`type` presets — irrelevant for
+     * `hours`/`minutes` presets, which are absolute-time offsets from the
+     * current instant, not calendar-day boundaries. Defaults to the browser's
+     * local time zone.
+     */
+    timeZone?: string;
+}
 /**
  * Converts a preset config to a DateRange. Use this alongside an external
  * SegmentedButton, Select, or other control to compose preset date pickers.
  */
-export declare const getPresetDateRange: (preset: CustomPresetConfig) => DateRange;
+export declare const getPresetDateRange: (preset: CustomPresetConfig, options?: GetPresetDateRangeOptions) => DateRange;
 export interface DatepickerTranslationStrings {
     clearButton?: string;
+    customPresetLabel?: string;
     doneButton?: string;
+    endTimeLabel?: string;
+    localTimeZoneLabel?: string;
+    nextMonthLabel?: string;
     noDateRangeSelected?: string;
     noDateSelected?: string;
     pleaseSelectEndDate?: string;
+    presetsGroupLabel?: string;
+    previousMonthLabel?: string;
     selectedDate?: string;
     selectedDateRange?: string;
     selectedStartDate?: string;
+    startTimeLabel?: string;
+    timeLabel?: string;
+    timeZoneSwitcherLabel?: string;
     to?: string;
     todayButton?: string;
+    utcTimeZoneLabel?: string;
 }
 /**
  * Prop types for Datepicker.
  */
 type DatepickerHTMLProps = Omit<HTMLAttributes<HTMLDivElement>, 'onChange' | 'value'>;
-export interface DatepickerProps extends DatepickerHTMLProps {
+interface DatepickerSharedProps extends DatepickerHTMLProps {
     /**
      * Additional class names.
      */
@@ -42,9 +93,13 @@ export interface DatepickerProps extends DatepickerHTMLProps {
      */
     disabled?: boolean;
     /**
-     * Has date range selection. If false, single date selection is used.
+     * Optional note rendered at the bottom of the calendar dropdown, below the
+     * `showTime` field(s) when present (otherwise directly below the calendar
+     * grid(s)) and above the footer actions. Accepts any `ReactNode` — e.g. an
+     * "Available window: [start] – [end]" constraint hint — this component
+     * doesn't prescribe what goes there.
      */
-    hasDateRange?: boolean;
+    footerNote?: ReactNode;
     /**
      * Input ID.
      */
@@ -75,14 +130,24 @@ export interface DatepickerProps extends DatepickerHTMLProps {
      * Minimum selectable date.
      */
     minDate?: Date;
-    /**
-     * onChange handler
-     */
-    onChange?: (value: DateRange | Date | undefined) => void;
     /**
      * Placeholder text for the trigger button.
      */
     placeholder?: string;
+    /**
+     * Renders a preset list (each computed via `getPresetDateRange`) in a
+     * dedicated column to the left of the calendar, with a "Custom" entry
+     * below it for picking dates directly from the calendar. The calendar
+     * itself is always shown alongside the list, never hidden/collapsed.
+     * Selecting a preset drives the calendar's own selection; picking a date
+     * directly from the calendar (or editing a `showTime` field) marks
+     * "Custom" as active. Only meaningful in range mode (`mode="range"`) —
+     * every preset computes a `DateRange`. This is purely additive: the
+     * existing external-composition pattern (`getPresetDateRange` +
+     * `CustomPresetConfig` wired to an external `SegmentedButton`/`Select`)
+     * keeps working unchanged whether or not this prop is used.
+     */
+    presets?: CustomPresetConfig[];
     /**
      * Is this field required?
      */
@@ -91,6 +156,48 @@ export interface DatepickerProps extends DatepickerHTMLProps {
      * Should the label be visible? If false, it will render for screen readers only.
      */
     showLabel?: boolean;
+    /**
+     * Whether the calendar (and, when `showTime` is on, the time fields) is
+     * shown alongside the `presets` list from the start, or only once "Custom"
+     * is clicked. Has no effect unless `presets` is also set. Defaults to
+     * `true` — the calendar is always visible, matching this component's
+     * original `presets` behavior. Set to `false` for a compact, list-only
+     * popover (e.g. a log viewer's rolling-window picker) that expands to
+     * reveal the calendar only when the viewer picks "Custom" — once
+     * expanded, it stays expanded for the rest of that popover session (even
+     * if the viewer clicks back to a different preset afterward); it only
+     * collapses again the next time the popover is freshly opened.
+     */
+    showPresetCalendar?: boolean;
+    /**
+     * Embeds Timepicker field(s) in the calendar dropdown (one in single mode,
+     * start/end in range mode) — the selected time-of-day is baked directly
+     * into the emitted `value`'s own `Date`(s); `value`/`onChange` stay plain
+     * `Date`/`DateRange`, no shape change.
+     */
+    showTime?: boolean;
+    /**
+     * Renders an inline-labeled "UTC" / "Local" `SegmentedButton` below the
+     * embedded time field(s) that lets the viewer swap which zone the
+     * displayed (and subsequently entered) time-of-day is shown in. "Local" is
+     * whatever `timeZone` resolves to (the configured zone, not necessarily
+     * the browser's own). Only the *displayed/emitted time-of-day* changes
+     * when toggled — the selected calendar day never moves, even though, for
+     * a time near midnight, converting to a different zone can technically
+     * land in the neighboring day; this is an accepted, documented
+     * simplification rather than a full zoned re-derivation of the selected
+     * date. Has no effect unless `showTime` is also true.
+     */
+    showTimeZoneSwitcher?: 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
+     * correct absolute instant. Passed straight through to each embedded
+     * `Timepicker`'s own `timeZone` prop as well. Defaults to the browser's
+     * local time zone. Has no effect when `showTime` is false. Also acts as
+     * the "Local" side of `showTimeZoneSwitcher`, when enabled.
+     */
+    timeZone?: string;
     /**
      * Optional tooltip text to display additional information.
      */
@@ -108,12 +215,58 @@ export interface DatepickerProps extends DatepickerHTMLProps {
      */
     validationStatus?: ValidationStatus;
     /**
-     * Selected date or date range.
+     * Number of months shown side by side in range mode. Defaults to `2`.
+     * Fixed for the lifetime of a given `Datepicker` instance — it does not
+     * auto-adjust based on the selected range or active preset, matching the
+     * static layout shown in Figma's own "Edge logs" recipe (a one-month
+     * range+time+presets picker for short windows, since its calendar grid
+     * never needs to show more than a single month at once). Has no effect
+     * in single mode, which always shows one month.
+     */
+    visibleMonths?: 1 | 2;
+}
+export interface SingleDatepickerProps extends DatepickerSharedProps {
+    /**
+     * Single-date selection (the default) — omit `mode` entirely, or set it
+     * explicitly to `'single'`.
+     */
+    mode?: 'single';
+    /**
+     * onChange handler.
+     */
+    onChange?: (value: Date | undefined) => void;
+    /**
+     * Selected date.
+     */
+    value?: Date;
+}
+export interface RangeDatepickerProps extends DatepickerSharedProps {
+    /**
+     * Date-range selection: the calendar shows two months side-by-side and
+     * the selected span is visually highlighted.
+     */
+    mode: 'range';
+    /**
+     * onChange handler.
+     */
+    onChange?: (value: DateRange | undefined) => void;
+    /**
+     * Selected date range.
      */
-    value?: DateRange | Date;
+    value?: DateRange;
 }
+/**
+ * `mode` is a discriminated union rather than a `hasDateRange` boolean —
+ * `value`/`onChange` narrow to the correct shape for the given mode at the
+ * type level, instead of relying on a boolean the compiler can't actually
+ * tie to the value's shape (which required internal `as DateRange`/`as Date`
+ * casts throughout). `mode` is optional and defaults to `'single'`, so
+ * existing single-date consumers (the common case) need no changes — only
+ * `hasDateRange` → `mode="range"` for range consumers.
+ */
+export type DatepickerProps = SingleDatepickerProps | RangeDatepickerProps;
 /**
  * Datepicker UI component.
  */
-export declare const Datepicker: ({ className, disabled, hasDateRange, id, inputWidth, label, locale, maxDate, message, minDate, onChange, placeholder, required, showLabel, tooltipText, translationStrings: translationStringsProp, validationMessage, validationStatus, value, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Datepicker: ({ className, disabled, footerNote, id, inputWidth, 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 {};

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

@@ -120,7 +120,7 @@ export interface TextInputProps extends ComponentPropsWithoutRef<'div'> {
      */
     translationStrings?: LabelStrings;
     /**
-     * Type of input field to use. For `time`, prefer the TimeInput component when possible — it offers segmented entry, 12/24-hour display, and timezone support. Use TextInput's native `time` type only as a lightweight fallback where that complexity isn't warranted; note it renders with browser-native time picker UI that isn't fully styleable to match PDS.
+     * Type of input field to use. For `time`, prefer the Timepicker component when possible — it offers segmented entry, 12/24-hour display, and timezone support. Use TextInput's native `time` type only as a lightweight fallback where that complexity isn't warranted; note it renders with browser-native time picker UI that isn't fully styleable to match PDS.
      */
     type?: HtmlInputTypes;
     /**

package/dist/components/inputs/{TimeInput/TimeInput.d.ts → Timepicker/Timepicker.d.ts}

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
 import { CalendarDate } from '@internationalized/date';
 import { ValidationStatus } from '../../../libs/types/input-types';
-import './time-input.css';
-export type TimeInputSize = 's' | 'm';
+import './timepicker.css';
+export type TimepickerSize = 's' | 'm';
 /**
- * Prop types for TimeInput
+ * Prop types for Timepicker
  */
-export interface TimeInputProps {
+export interface TimepickerProps {
     /**
      * Anchor calendar date used for DST-safe conversion math when `timeZone` changes. Defaults to today (in the previous timezone) if omitted — correct for the vast majority of scheduling UIs. Pass a real date (e.g. from Datepicker's selection) for full precision on/near DST transition dates.
      */
@@ -66,7 +66,7 @@ export interface TimeInputProps {
     /**
      * Input size.
      */
-    size?: TimeInputSize;
+    size?: TimepickerSize;
     /**
      * IANA timezone identifier (e.g. "America/Los_Angeles", "UTC"). Drives the auto-derived display label (e.g. "PDT") and, when this prop changes, converts the current value into the new zone using `@internationalized/date` — a real, DST-safe conversion, not just a relabel.
      */
@@ -89,6 +89,6 @@ export interface TimeInputProps {
     value?: string;
 }
 /**
- * TimeInput UI component
+ * Timepicker UI component
  */
-export declare const TimeInput: ({ anchorDate, className, defaultValue, disabled, hourCycle, id, inputWidth, label, message, onBlur, onChange, onFocus, required, showLabel, size, timeZone, tooltipText, validationMessage, validationStatus, value, }: TimeInputProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Timepicker: ({ anchorDate, className, defaultValue, disabled, hourCycle, id, inputWidth, label, message, onBlur, onChange, onFocus, required, showLabel, size, timeZone, tooltipText, validationMessage, validationStatus, value, }: TimepickerProps) => import("react/jsx-runtime").JSX.Element;

package/dist/css/component-css/pds-action-card.css

@@ -1 +1 @@
-@layer pds-v1, pds-v2;@layer pds-v2{.pds-action-card{background-color:var(--pds-color-card-background);border-radius:var(--pds-border-radius-card);box-shadow:var(--pds-elevation-raised);color:var(--pds-color-foreground-default);cursor:pointer;display:flex;flex-direction:column;height:100%;position:relative}.pds-action-card:hover{box-shadow:var(--pds-elevation-overlay)}.pds-action-card__primary{background:transparent;border:none;border-radius:inherit;font:inherit;inset:0;padding:0;position:absolute;z-index:0}.pds-action-card__primary:focus-visible{outline:none}.pds-action-card__primary:focus-visible~.pds-action-card__inner:after{border:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);border-radius:var(--pds-border-radius-card);content:"";inset:0;pointer-events:none;position:absolute;transition:var(--pds-animation-transition-button)}.pds-action-card__inner{display:flex;flex-direction:column;flex-grow:1;pointer-events:none;position:relative;z-index:1}.pds-action-card__inner [role=button],.pds-action-card__inner [tabindex],.pds-action-card__inner a,.pds-action-card__inner button,.pds-action-card__inner input,.pds-action-card__inner select,.pds-action-card__inner textarea{pointer-events:auto}.pds-action-card__image{border-radius:var(--pds-border-radius-card) var(--pds-border-radius-card) 0 0;display:block;overflow:hidden}.pds-action-card__image img{display:block;object-fit:cover;object-position:top;width:100%}.pds-action-card__main{flex-grow:1;padding:var(--pds-spacing-l) var(--pds-spacing-xl)}.pds-action-card__footer{padding:0 var(--pds-spacing-xl) var(--pds-spacing-l)}.pds-action-card--secondary{background-color:var(--pds-color-surface-default-secondary)}.pds-action-card--transparent{background-color:transparent}.pds-action-card--image-inset .pds-action-card__image{border-radius:var(--pds-border-radius-card);margin:var(--pds-spacing-m) var(--pds-spacing-m) 0;overflow:hidden;width:auto}.pds-action-card--pad-condensed .pds-action-card__main{padding:var(--pds-spacing-m)}.pds-action-card--pad-condensed .pds-action-card__footer{padding:0 var(--pds-spacing-m) var(--pds-spacing-m)}.pds-action-card--pad-spacious .pds-action-card__main{padding:var(--pds-spacing-xl) var(--pds-spacing-2xl)}.pds-action-card--pad-spacious .pds-action-card__footer{padding:0 var(--pds-spacing-2xl) var(--pds-spacing-xl)}}
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-action-card{background-color:var(--pds-color-card-background);border-radius:var(--pds-border-radius-card);box-shadow:var(--pds-elevation-raised);color:var(--pds-color-foreground-default);cursor:pointer;display:flex;flex-direction:column;height:100%;position:relative}.pds-action-card:hover{box-shadow:var(--pds-elevation-overlay)}.pds-action-card__primary{background:transparent;border:none;border-radius:inherit;cursor:pointer;font:inherit;inset:0;padding:0;position:absolute;z-index:0}.pds-action-card__primary:focus-visible{outline:none}.pds-action-card__primary:focus-visible~.pds-action-card__inner:after{border:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);border-radius:var(--pds-border-radius-card);content:"";inset:0;pointer-events:none;position:absolute;transition:var(--pds-animation-transition-button)}.pds-action-card__inner{display:flex;flex-direction:column;flex-grow:1;pointer-events:none;position:relative;z-index:1}.pds-action-card__inner [role=button],.pds-action-card__inner [tabindex],.pds-action-card__inner a,.pds-action-card__inner button,.pds-action-card__inner input,.pds-action-card__inner select,.pds-action-card__inner textarea{pointer-events:auto}.pds-action-card__image{border-radius:var(--pds-border-radius-card) var(--pds-border-radius-card) 0 0;display:block;overflow:hidden}.pds-action-card__image img{display:block;object-fit:cover;object-position:top;width:100%}.pds-action-card__main{flex-grow:1;padding:var(--pds-spacing-l) var(--pds-spacing-xl)}.pds-action-card__footer{padding:0 var(--pds-spacing-xl) var(--pds-spacing-l)}.pds-action-card--secondary{background-color:var(--pds-color-surface-default-secondary)}.pds-action-card--transparent{background-color:transparent}.pds-action-card--image-inset .pds-action-card__image{border-radius:var(--pds-border-radius-card);margin:var(--pds-spacing-m) var(--pds-spacing-m) 0;overflow:hidden;width:auto}.pds-action-card--pad-condensed .pds-action-card__main{padding:var(--pds-spacing-m)}.pds-action-card--pad-condensed .pds-action-card__footer{padding:0 var(--pds-spacing-m) var(--pds-spacing-m)}.pds-action-card--pad-spacious .pds-action-card__main{padding:var(--pds-spacing-xl) var(--pds-spacing-2xl)}.pds-action-card--pad-spacious .pds-action-card__footer{padding:0 var(--pds-spacing-2xl) var(--pds-spacing-xl)}}

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

@@ -1 +1 @@
-@layer pds-v1, pds-v2;@layer pds-v2{.pds-badge{--badge-bg:var(--pds-color-badge-brand-muted-background);--badge-fg:var(--pds-color-badge-brand-muted-foreground);align-items:center;background-color:var(--badge-bg);border-radius:var(--pds-border-radius-input);color:var(--badge-fg);display:inline-flex;font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-medium);height:var(--pds-spacing-button-height-s);line-height:1;padding-inline:var(--pds-spacing-s);white-space:nowrap}.pds-badge--s{font-size:var(--pds-typography-size-xs);height:var(--pds-spacing-button-height-xs);padding-inline:var(--pds-spacing-xs)}.pds-badge--xs{font-size:.6875rem;height:var(--pds-spacing-l);padding-inline:var(--pds-spacing-3xs)}.pds-badge--brand{--badge-bg:var(--pds-color-badge-brand-background);--badge-fg:var(--pds-color-badge-brand-foreground)}.pds-badge--critical{--badge-bg:var(--pds-color-badge-critical-background);--badge-fg:var(--pds-color-badge-critical-foreground)}.pds-badge--discovery{--badge-bg:var(--pds-color-badge-discovery-background);--badge-fg:var(--pds-color-badge-discovery-foreground)}.pds-badge--gold{--badge-bg:var(--pds-color-badge-gold-background);--badge-fg:var(--pds-color-badge-gold-foreground)}.pds-badge--indigo{--badge-bg:var(--pds-color-badge-indigo-background);--badge-fg:var(--pds-color-badge-indigo-foreground)}.pds-badge--info{--badge-bg:var(--pds-color-badge-info-background);--badge-fg:var(--pds-color-badge-info-foreground)}.pds-badge--ink{--badge-bg:var(--pds-color-badge-ink-background);--badge-fg:var(--pds-color-badge-ink-foreground)}.pds-badge--lime{--badge-bg:var(--pds-color-badge-lime-background);--badge-fg:var(--pds-color-badge-lime-foreground)}.pds-badge--orange{--badge-bg:var(--pds-color-badge-orange-background);--badge-fg:var(--pds-color-badge-orange-foreground)}.pds-badge--rose{--badge-bg:var(--pds-color-badge-rose-background);--badge-fg:var(--pds-color-badge-rose-foreground)}.pds-badge--silver{--badge-bg:var(--pds-color-badge-silver-background);--badge-fg:var(--pds-color-badge-silver-foreground)}.pds-badge--sky{--badge-bg:var(--pds-color-badge-sky-background);--badge-fg:var(--pds-color-badge-sky-foreground)}.pds-badge--slate{--badge-bg:var(--pds-color-badge-slate-background);--badge-fg:var(--pds-color-badge-slate-foreground)}.pds-badge--stone{--badge-bg:var(--pds-color-badge-stone-background);--badge-fg:var(--pds-color-badge-stone-foreground)}.pds-badge--success{--badge-bg:var(--pds-color-badge-success-background);--badge-fg:var(--pds-color-badge-success-foreground)}.pds-badge--warning{--badge-bg:var(--pds-color-badge-warning-background);--badge-fg:var(--pds-color-badge-warning-foreground)}.pds-badge--brand-muted{--badge-bg:var(--pds-color-badge-brand-muted-background);--badge-fg:var(--pds-color-badge-brand-muted-foreground)}.pds-badge--critical-muted{--badge-bg:var(--pds-color-badge-critical-muted-background);--badge-fg:var(--pds-color-badge-critical-muted-foreground)}.pds-badge--discovery-muted{--badge-bg:var(--pds-color-badge-discovery-muted-background);--badge-fg:var(--pds-color-badge-discovery-muted-foreground)}.pds-badge--gold-muted{--badge-bg:var(--pds-color-badge-gold-muted-background);--badge-fg:var(--pds-color-badge-gold-muted-foreground)}.pds-badge--indigo-muted{--badge-bg:var(--pds-color-badge-indigo-muted-background);--badge-fg:var(--pds-color-badge-indigo-muted-foreground)}.pds-badge--info-muted{--badge-bg:var(--pds-color-badge-info-muted-background);--badge-fg:var(--pds-color-badge-info-muted-foreground)}.pds-badge--ink-muted{--badge-bg:var(--pds-color-badge-ink-muted-background);--badge-fg:var(--pds-color-badge-ink-muted-foreground)}.pds-badge--lime-muted{--badge-bg:var(--pds-color-badge-lime-muted-background);--badge-fg:var(--pds-color-badge-lime-muted-foreground)}.pds-badge--orange-muted{--badge-bg:var(--pds-color-badge-orange-muted-background);--badge-fg:var(--pds-color-badge-orange-muted-foreground)}.pds-badge--rose-muted{--badge-bg:var(--pds-color-badge-rose-muted-background);--badge-fg:var(--pds-color-badge-rose-muted-foreground)}.pds-badge--silver-muted{--badge-bg:var(--pds-color-badge-silver-muted-background);--badge-fg:var(--pds-color-badge-silver-muted-foreground)}.pds-badge--sky-muted{--badge-bg:var(--pds-color-badge-sky-muted-background);--badge-fg:var(--pds-color-badge-sky-muted-foreground)}.pds-badge--slate-muted{--badge-bg:var(--pds-color-badge-slate-muted-background);--badge-fg:var(--pds-color-badge-slate-muted-foreground)}.pds-badge--stone-muted{--badge-bg:var(--pds-color-badge-stone-muted-background);--badge-fg:var(--pds-color-badge-stone-muted-foreground)}.pds-badge--success-muted{--badge-bg:var(--pds-color-badge-success-muted-background);--badge-fg:var(--pds-color-badge-success-muted-foreground)}.pds-badge--warning-muted{--badge-bg:var(--pds-color-badge-warning-muted-background);--badge-fg:var(--pds-color-badge-warning-muted-foreground)}}
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-badge{--badge-bg:var(--pds-color-badge-brand-muted-background);--badge-fg:var(--pds-color-badge-brand-muted-foreground);align-items:center;background-color:var(--badge-bg);border-radius:var(--pds-border-radius-default);color:var(--badge-fg);display:inline-flex;font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-medium);height:var(--pds-spacing-button-height-s);line-height:1;padding-inline:var(--pds-spacing-s);white-space:nowrap}.pds-badge--s{font-size:var(--pds-typography-size-xs);height:var(--pds-spacing-button-height-xs);padding-inline:var(--pds-spacing-xs)}.pds-badge--xs{font-size:.6875rem;height:var(--pds-spacing-l);padding-inline:var(--pds-spacing-3xs)}.pds-badge--brand{--badge-bg:var(--pds-color-badge-brand-background);--badge-fg:var(--pds-color-badge-brand-foreground)}.pds-badge--critical{--badge-bg:var(--pds-color-badge-critical-background);--badge-fg:var(--pds-color-badge-critical-foreground)}.pds-badge--discovery{--badge-bg:var(--pds-color-badge-discovery-background);--badge-fg:var(--pds-color-badge-discovery-foreground)}.pds-badge--gold{--badge-bg:var(--pds-color-badge-gold-background);--badge-fg:var(--pds-color-badge-gold-foreground)}.pds-badge--indigo{--badge-bg:var(--pds-color-badge-indigo-background);--badge-fg:var(--pds-color-badge-indigo-foreground)}.pds-badge--info{--badge-bg:var(--pds-color-badge-info-background);--badge-fg:var(--pds-color-badge-info-foreground)}.pds-badge--ink{--badge-bg:var(--pds-color-badge-ink-background);--badge-fg:var(--pds-color-badge-ink-foreground)}.pds-badge--lime{--badge-bg:var(--pds-color-badge-lime-background);--badge-fg:var(--pds-color-badge-lime-foreground)}.pds-badge--orange{--badge-bg:var(--pds-color-badge-orange-background);--badge-fg:var(--pds-color-badge-orange-foreground)}.pds-badge--rose{--badge-bg:var(--pds-color-badge-rose-background);--badge-fg:var(--pds-color-badge-rose-foreground)}.pds-badge--silver{--badge-bg:var(--pds-color-badge-silver-background);--badge-fg:var(--pds-color-badge-silver-foreground)}.pds-badge--sky{--badge-bg:var(--pds-color-badge-sky-background);--badge-fg:var(--pds-color-badge-sky-foreground)}.pds-badge--slate{--badge-bg:var(--pds-color-badge-slate-background);--badge-fg:var(--pds-color-badge-slate-foreground)}.pds-badge--stone{--badge-bg:var(--pds-color-badge-stone-background);--badge-fg:var(--pds-color-badge-stone-foreground)}.pds-badge--success{--badge-bg:var(--pds-color-badge-success-background);--badge-fg:var(--pds-color-badge-success-foreground)}.pds-badge--warning{--badge-bg:var(--pds-color-badge-warning-background);--badge-fg:var(--pds-color-badge-warning-foreground)}.pds-badge--brand-muted{--badge-bg:var(--pds-color-badge-brand-muted-background);--badge-fg:var(--pds-color-badge-brand-muted-foreground)}.pds-badge--critical-muted{--badge-bg:var(--pds-color-badge-critical-muted-background);--badge-fg:var(--pds-color-badge-critical-muted-foreground)}.pds-badge--discovery-muted{--badge-bg:var(--pds-color-badge-discovery-muted-background);--badge-fg:var(--pds-color-badge-discovery-muted-foreground)}.pds-badge--gold-muted{--badge-bg:var(--pds-color-badge-gold-muted-background);--badge-fg:var(--pds-color-badge-gold-muted-foreground)}.pds-badge--indigo-muted{--badge-bg:var(--pds-color-badge-indigo-muted-background);--badge-fg:var(--pds-color-badge-indigo-muted-foreground)}.pds-badge--info-muted{--badge-bg:var(--pds-color-badge-info-muted-background);--badge-fg:var(--pds-color-badge-info-muted-foreground)}.pds-badge--ink-muted{--badge-bg:var(--pds-color-badge-ink-muted-background);--badge-fg:var(--pds-color-badge-ink-muted-foreground)}.pds-badge--lime-muted{--badge-bg:var(--pds-color-badge-lime-muted-background);--badge-fg:var(--pds-color-badge-lime-muted-foreground)}.pds-badge--orange-muted{--badge-bg:var(--pds-color-badge-orange-muted-background);--badge-fg:var(--pds-color-badge-orange-muted-foreground)}.pds-badge--rose-muted{--badge-bg:var(--pds-color-badge-rose-muted-background);--badge-fg:var(--pds-color-badge-rose-muted-foreground)}.pds-badge--silver-muted{--badge-bg:var(--pds-color-badge-silver-muted-background);--badge-fg:var(--pds-color-badge-silver-muted-foreground)}.pds-badge--sky-muted{--badge-bg:var(--pds-color-badge-sky-muted-background);--badge-fg:var(--pds-color-badge-sky-muted-foreground)}.pds-badge--slate-muted{--badge-bg:var(--pds-color-badge-slate-muted-background);--badge-fg:var(--pds-color-badge-slate-muted-foreground)}.pds-badge--stone-muted{--badge-bg:var(--pds-color-badge-stone-muted-background);--badge-fg:var(--pds-color-badge-stone-muted-foreground)}.pds-badge--success-muted{--badge-bg:var(--pds-color-badge-success-muted-background);--badge-fg:var(--pds-color-badge-success-muted-foreground)}.pds-badge--warning-muted{--badge-bg:var(--pds-color-badge-warning-muted-background);--badge-fg:var(--pds-color-badge-warning-muted-foreground)}}

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

@@ -1,5 +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{background-color:var(--pds-color-surface-default);border-radius:var(--pds-border-radius-container);box-shadow:var(--pds-elevation-overlay);overflow:hidden;z-index:var(--pds-z-index-overlay)}.pds-datepicker__calendar{background-color:var(--pds-color-surface-default);padding:var(--pds-spacing-s) var(--pds-spacing-s) var(--pds-spacing-xs)}.pds-datepicker__actions{display:flex;justify-content:space-between;padding:0 var(--pds-spacing-m) var(--pds-spacing-m) var(--pds-spacing-m)}.pds-datepicker__actions-group{display:flex;gap:var(--pds-spacing-s)}.pds-datepicker{--day-size:2rem}.pds-datepicker .rdp-month_grid{width:auto}.pds-datepicker .rdp-month_grid tr{border-block-end:none}.pds-datepicker .rdp-month_grid td,.pds-datepicker .rdp-month_grid th{padding:0}.pds-datepicker .rdp-root{--rdp-accent-color:var(--pds-color-datepicker-accent-foreground);--rdp-range_middle-background-color:var(
-			--pds-color-interactive-background-selected
-		);--rdp-range_middle-color:var(
-			--pds-color-interactive-background-selected-foreground
-		);--rdp-today-color:var(--pds-color-foreground-default);--rdp-day-height:var(--day-size);--rdp-day-width:calc(var(--day-size) + 4px);--rdp-day_button-height:var(--day-size);--rdp-day_button-width:var(--day-size)}.pds-datepicker .rdp-month_caption{margin-block-end:var(--pds-spacing-2xs)}.pds-datepicker .rdp-caption_label{color:var(--pds-color-foreground-default)}.pds-datepicker .rdp-caption_label,.pds-datepicker .rdp-weekday{font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-semibold)}.pds-datepicker .rdp-weekday{color:var(--pds-color-foreground-default-secondary);opacity:1}.pds-datepicker .rdp-week{border:var(--pds-spacing-3xs) solid var(--pds-color-surface-default)}.pds-datepicker .rdp-day_button{font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular)}.pds-datepicker .rdp-day_button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-datepicker .rdp-selected:not(.rdp-range_middle) .rdp-day_button{background-color:var(--pds-color-datepicker-selected-background);border-radius:50%;color:var(--pds-color-datepicker-selected-foreground)}.pds-datepicker .rdp-today .rdp-day_button{border-radius:50%;box-shadow:inset 0 0 0 var(--pds-border-width-default) var(--pds-color-datepicker-accent-foreground)}.pds-datepicker .rdp-today.rdp-selected:not(.rdp-range_middle) .rdp-day_button{box-shadow:inset 0 0 0 var(--pds-border-width-default) var(--pds-color-datepicker-selected-foreground)}.pds-datepicker .rdp-button_next,.pds-datepicker .rdp-button_previous{color:var(--pds-color-foreground-default-secondary)}.pds-datepicker .rdp-button_next:hover,.pds-datepicker .rdp-button_previous:hover{color:var(--pds-color-button-secondary-foreground-hover)}.pds-datepicker .rdp-button_next:focus-visible,.pds-datepicker .rdp-button_previous:focus-visible{border-radius:var(--pds-border-radius-button);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}@media (max-width:767px){.pds-datepicker__input-wrapper{align-items:stretch;flex-direction:column}.pds-datepicker .rdp-root .rdp-months{flex-direction:column}}}
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-datepicker{--day-size:2rem;--day-gap:4px;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{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__preset-list{display:flex;flex-direction:column;gap:var(--pds-spacing-4xs)}.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);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;gap:var(--pds-spacing-l)}.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;justify-content:space-between;padding:var(--pds-spacing-xs) var(--pds-spacing-4xs) var(--pds-spacing-3xs)}.pds-datepicker__actions-group{display:flex;gap:var(--pds-spacing-s)}@media (max-width:767px){.pds-datepicker__input-wrapper{align-items:stretch;flex-direction:column}.pds-datepicker__grids{flex-direction:column}}}

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

@@ -1,2 +1,2 @@
-@layer pds-v1, pds-v2;@layer pds-v2{.pds-dropdown{position:relative}.pds-dropdown--inline{display:inline-block}.pds-dropdown__trigger{align-items:center;background:transparent;border:none;border-radius:var(--pds-border-radius-container);color:inherit;cursor:pointer;display:inline-flex;font-family:inherit;gap:var(--pds-spacing-3xs);padding:var(--pds-spacing-3xs) var(--pds-spacing-2xs);transition:background-color .15s ease}.pds-dropdown__trigger:hover{background-color:var(--pds-color-interactive-background-hover)}.pds-dropdown__trigger:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px}.pds-dropdown__trigger-icon{color:var(--pds-color-foreground-default-secondary);transition:var(--pds-animation-transition-rotation)}.pds-dropdown__trigger[aria-expanded=true] .pds-dropdown__trigger-icon{transform:rotate(180deg)}.pds-dropdown__panel{background-color:var(--pds-color-dropdown-background);box-shadow:var(--pds-elevation-overlay);flex-direction:column;gap:var(--pds-spacing-4xs);margin:0;min-width:10rem;overflow-y:auto;padding-inline:var(--pds-spacing-2xs);z-index:var(--pds-z-index-dropdown)}.pds-dropdown__item,.pds-dropdown__panel{border-radius:var(--pds-border-radius-container);display:flex;list-style:none;outline:none;padding-block:var(--pds-spacing-2xs)}.pds-dropdown__item{align-items:center;color:var(--pds-color-dropdown-foreground);cursor:pointer;font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-s);justify-content:space-between;min-height:var(--pds-spacing-2xl);padding-inline:var(--pds-spacing-xs)}.pds-dropdown__item:focus-visible:not(:hover){outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-1px}.pds-dropdown__item--focused,.pds-dropdown__item:hover{background-color:var(--pds-color-dropdown-item-background-hover)}.pds-dropdown__item:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-dropdown__selected-icon{align-self:center;color:var(--pds-color-foreground-default);display:flex;flex-shrink:0;height:.875em;width:.875em}.pds-dropdown__item--critical{color:var(--pds-color-status-critical-foreground)}.pds-dropdown__item--critical.pds-dropdown__item--focused,.pds-dropdown__item--critical:hover{background-color:var(--pds-color-status-critical-background)}.pds-dropdown__item--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.pds-dropdown__item-content{align-items:center;display:flex;gap:var(--pds-spacing-2xs)}.pds-dropdown__item-icon{display:flex;flex-shrink:0}.pds-dropdown__item-label{display:flex;flex-direction:column}.pds-dropdown__item-description{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-4xs)}.pds-dropdown__item-trailing{display:flex;flex-shrink:0}.pds-dropdown__checkbox-box{align-items:center;background-color:transparent;border:var(--pds-border-width-default) solid var(--pds-color-foreground-default);border-radius:var(--pds-border-radius-input);color:var(--pds-color-input-selected-foreground);display:flex;flex-shrink:0;height:1rem;justify-content:center;padding:.0625rem;transition:var(--pds-animation-transition-default);width:1rem}.pds-dropdown__checkbox-box--checked,.pds-dropdown__checkbox-box--indeterminate{background-color:var(--pds-color-input-selected-background);border-color:var(--pds-color-input-selected-background)}.pds-dropdown__checkbox-icon{height:100%;width:100%}.pds-dropdown__heading{color:var(--pds-color-dropdown-heading);font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-xs);font-weight:var(--pds-typography-fw-regular);line-height:var(--pds-typography-lh-s);list-style:none;padding:var(--pds-spacing-xs) var(--pds-spacing-xs) var(--pds-spacing-3xs)}.pds-dropdown__separator{border-block-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);list-style:none;margin-block-end:2px;margin-inline:calc(var(--pds-spacing-2xs)*-1);padding-block:2px}.pds-dropdown__filter{list-style:none;margin-block-start:calc(var(--pds-spacing-2xs)*-1);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding:0}.pds-dropdown__filter-wrapper{align-items:center;display:flex;position:relative}.pds-dropdown__filter-icon{block-size:.875rem;color:var(--pds-color-foreground-default-secondary);inline-size:.875rem;left:var(--pds-spacing-s);pointer-events:none;position:absolute}.pds-dropdown__filter-wrapper:has(.pds-dropdown__filter-icon)
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-dropdown{position:relative}.pds-dropdown--inline{display:inline-block}.pds-dropdown__trigger{align-items:center;background:transparent;border:none;border-radius:var(--pds-border-radius-container);color:inherit;cursor:pointer;display:inline-flex;font-family:inherit;gap:var(--pds-spacing-3xs);padding:var(--pds-spacing-3xs) var(--pds-spacing-2xs);transition:background-color .15s ease}.pds-dropdown__trigger:hover{background-color:var(--pds-color-interactive-background-hover)}.pds-dropdown__trigger:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px}.pds-dropdown__trigger-icon{color:var(--pds-color-foreground-default-secondary);transition:var(--pds-animation-transition-rotation)}.pds-dropdown__trigger[aria-expanded=true] .pds-dropdown__trigger-icon{transform:rotate(180deg)}.pds-dropdown__panel{background-color:var(--pds-color-dropdown-background);box-shadow:var(--pds-elevation-overlay);flex-direction:column;gap:var(--pds-spacing-4xs);margin:0;min-width:10rem;overflow-y:auto;padding-inline:var(--pds-spacing-2xs);z-index:var(--pds-z-index-dropdown)}.pds-dropdown__item,.pds-dropdown__panel{border-radius:var(--pds-border-radius-container);display:flex;list-style:none;outline:none;padding-block:var(--pds-spacing-2xs)}.pds-dropdown__item{align-items:center;color:var(--pds-color-dropdown-foreground);cursor:pointer;font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-s);justify-content:space-between;min-height:var(--pds-spacing-2xl);padding-inline:var(--pds-spacing-xs)}.pds-dropdown__item:focus-visible:not(:hover){outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-1px}.pds-dropdown__item--focused,.pds-dropdown__item:hover{background-color:var(--pds-color-dropdown-item-background-hover)}.pds-dropdown__item:active{background-color:var(--pds-color-dropdown-item-background-active)}.pds-dropdown__selected-icon{align-self:center;color:var(--pds-color-foreground-default);display:flex;flex-shrink:0;height:.875em;width:.875em}.pds-dropdown__item--critical{color:var(--pds-color-status-critical-foreground)}.pds-dropdown__item--critical.pds-dropdown__item--focused,.pds-dropdown__item--critical:hover{background-color:var(--pds-color-status-critical-background)}.pds-dropdown__item--disabled{cursor:not-allowed;opacity:.5;pointer-events:none}.pds-dropdown__item-content{align-items:center;display:flex;gap:var(--pds-spacing-2xs)}.pds-dropdown__item-icon{display:flex;flex-shrink:0}.pds-dropdown__item-label{display:flex;flex-direction:column}.pds-dropdown__item-description{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-4xs)}.pds-dropdown__item-trailing{display:flex;flex-shrink:0}.pds-dropdown__checkbox-box{align-items:center;background-color:transparent;border:var(--pds-border-width-default) solid var(--pds-color-foreground-default);border-radius:var(--pds-border-radius-default);color:var(--pds-color-input-selected-foreground);display:flex;flex-shrink:0;height:1rem;justify-content:center;padding:.0625rem;transition:var(--pds-animation-transition-default);width:1rem}.pds-dropdown__checkbox-box--checked,.pds-dropdown__checkbox-box--indeterminate{background-color:var(--pds-color-input-selected-background);border-color:var(--pds-color-input-selected-background)}.pds-dropdown__checkbox-icon{height:100%;width:100%}.pds-dropdown__heading{color:var(--pds-color-dropdown-heading);font-family:var(--pds-typography-ff-compact);font-size:var(--pds-typography-size-xs);font-weight:var(--pds-typography-fw-regular);line-height:var(--pds-typography-lh-s);list-style:none;padding:var(--pds-spacing-xs) var(--pds-spacing-xs) var(--pds-spacing-3xs)}.pds-dropdown__separator{border-block-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);list-style:none;margin-block-end:2px;margin-inline:calc(var(--pds-spacing-2xs)*-1);padding-block:2px}.pds-dropdown__filter{list-style:none;margin-block-start:calc(var(--pds-spacing-2xs)*-1);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding:0}.pds-dropdown__filter-wrapper{align-items:center;display:flex;position:relative}.pds-dropdown__filter-icon{block-size:.875rem;color:var(--pds-color-foreground-default-secondary);inline-size:.875rem;left:var(--pds-spacing-s);pointer-events:none;position:absolute}.pds-dropdown__filter-wrapper:has(.pds-dropdown__filter-icon)
 	.pds-dropdown__filter-input{padding-inline-start:calc(var(--pds-spacing-s) + var(--pds-spacing-xl))}.pds-dropdown__filter-input{background-color:transparent;border:none;border-block-end:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:0;box-sizing:border-box;color:var(--pds-color-foreground-default);font-family:inherit;font-size:var(--pds-typography-size-s);padding:var(--pds-spacing-s);width:100%}.pds-dropdown__filter-input::placeholder{color:var(--pds-color-input-placeholder);font-size:var(--pds-typography-size-s)}.pds-dropdown__filter-input:focus-visible{border-radius:var(--pds-border-radius-container) var(--pds-border-radius-container) 0 0;outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:-3px}.pds-dropdown__no-results{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-s);padding-block-end:var(--pds-spacing-s);padding-block-start:var(--pds-spacing-xs);padding-inline:var(--pds-spacing-s)}.pds-dropdown__footer{background-color:var(--pds-color-dropdown-background);border-block-start:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);bottom:calc(var(--pds-spacing-2xs)*-1);list-style:none;margin-block-end:calc(var(--pds-spacing-2xs)*-1);margin-block-start:var(--pds-spacing-3xs);margin-inline:calc(var(--pds-spacing-2xs)*-1);padding:var(--pds-spacing-s);position:sticky}.pds-dropdown__footer a,.pds-dropdown__footer button{align-items:center;background:none;border:none;color:var(--pds-color-interactive-link-default);cursor:pointer;display:flex;font:inherit;gap:var(--pds-spacing-3xs);padding:0;text-decoration:none;width:100%}.pds-dropdown__footer a:hover,.pds-dropdown__footer button:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-dropdown__footer a:focus-visible,.pds-dropdown__footer button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:2px}}