@pantheon-systems/pds-toolkit-react 2.0.0-alpha.56 → 2.0.0-alpha.58

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

@@ -132,7 +132,7 @@
 				"usage": "Use to add light/dark/system theme switching to an app. Pair with the ThemeSwitcher component and consume state with useTheme."
 			},
 			{
-				"component": "PaginationMini",
+				"component": "PaginationChapter",
 				"description": "New for V2. A previous/next navigation control with descriptive page labels. Suited for article or document navigation where page numbers are less relevant than content names.",
 				"usage": "Use when navigating linearly through a series of pages such as blog posts, documentation chapters, or wizard steps."
 			},

package/dist/components/CodeBlock/prism-setup.d.ts

@@ -0,0 +1,2 @@
+import Prism from 'prismjs/components/prism-core';
+export default Prism;

package/dist/components/ResultCount/ResultCount.d.ts

@@ -0,0 +1,53 @@
+import { ComponentPropsWithoutRef } from 'react';
+import './result-count.css';
+export interface ResultCountLabelStrings {
+    /**
+     * Connector shown between the matching and total counts.
+     */
+    of?: string;
+    /**
+     * Leading word shown before the matching count once filtered (e.g.
+     * "Showing 4 of 14 sites"). Defaults to "Showing" — pass `null` to omit
+     * it and fall back to the bare "4 of 14 sites" form. Only ever appears
+     * in the filtered form; the unfiltered total is never prefixed.
+     */
+    showing?: string | null;
+    /**
+     * Plural form of the unit noun, e.g. "sites".
+     */
+    unitPlural?: string;
+    /**
+     * Singular form of the unit noun, e.g. "site".
+     */
+    unitSingular?: string;
+}
+export interface ResultCountProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * Additional class names.
+     */
+    className?: string;
+    /**
+     * Number of items matching the current filters. Omit entirely when no
+     * filters are active — passing it (even equal to `countTotal`) renders
+     * the "matching of total" form instead of the plain total.
+     */
+    countMatching?: number;
+    /**
+     * Total number of items, ignoring any active filters.
+     */
+    countTotal: number;
+    /**
+     * Label strings for the connector word and the singular/plural unit noun.
+     */
+    labelStrings?: ResultCountLabelStrings;
+    /**
+     * BCP 47 locale (e.g. `'en'`, `'fr'`) used to choose between
+     * `labelStrings.unitSingular`/`unitPlural` for a given count, via
+     * `Intl.PluralRules`. Defaults to the runtime's locale.
+     */
+    locale?: string;
+}
+/**
+ * ResultCount UI component
+ */
+export declare const ResultCount: ({ className, countMatching, countTotal, labelStrings, locale, ...props }: ResultCountProps) => 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-07-31T22:34:26.083Z
+ * Generated: 2026-08-04T16:35:53.109Z
  */
 import { customIcons } from './custom-icons';
 export { customIcons };

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

@@ -33,6 +33,14 @@ export interface CheckboxGroupWrapperProps extends ComponentPropsWithoutRef<'div
      * Field label. Will be rendered as the fieldset legend.
      */
     label: string;
+    /**
+     * Visual treatment of the legend. `'default'` matches other form field
+     * labels — use it when this group is one of several inputs on a form.
+     * `'heading'` is semibold with more room below it, for cases where the
+     * group reads as its own section label (e.g. a filter panel's category
+     * groups) rather than a form field among others.
+     */
+    labelVariant?: 'default' | 'heading';
     /**
      * Input message. Used to provide supplemental text. Will be displayed below the field.
      */
@@ -61,4 +69,4 @@ export interface CheckboxGroupWrapperProps extends ComponentPropsWithoutRef<'div
 /**
  * CheckboxFieldset UI component
  */
-export declare const CheckboxFieldset: ({ children, className, disabled, fieldsetProps, id, inputWidth, label, message, required, showLabel, tooltipText, validationMessage, validationStatus, ...props }: CheckboxGroupWrapperProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxFieldset: ({ children, className, disabled, fieldsetProps, id, inputWidth, label, labelVariant, message, required, showLabel, tooltipText, validationMessage, validationStatus, ...props }: CheckboxGroupWrapperProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -37,6 +37,14 @@ export interface CheckboxGroupProps extends ComponentPropsWithoutRef<'div'> {
      * Field label. Will be rendered as the fieldset legend.
      */
     label: string;
+    /**
+     * Visual treatment of the legend. `'default'` matches other form field
+     * labels — use it when this group is one of several inputs on a form.
+     * `'heading'` is semibold with more room below it, for cases where the
+     * group reads as its own section label (e.g. a filter panel's category
+     * groups) rather than a form field among others.
+     */
+    labelVariant?: 'default' | 'heading';
     /**
      * Input message. Used to provide supplemental text. Will be displayed below the field.
      */
@@ -77,4 +85,4 @@ export interface CheckboxGroupProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * CheckboxGroup UI component
  */
-export declare const CheckboxGroup: ({ className, disabled, fieldsetProps, id, inputWidth, label, message, onGroupBlur, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const CheckboxGroup: ({ className, disabled, fieldsetProps, id, inputWidth, label, labelVariant, message, onGroupBlur, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, ...props }: CheckboxGroupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -51,6 +51,14 @@ export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
      * Label for the radio group
      */
     label: string;
+    /**
+     * Visual treatment of the legend. `'default'` matches other form field
+     * labels — use it when this group is one of several inputs on a form.
+     * `'heading'` is semibold with more room below it, for cases where the
+     * group reads as its own section label (e.g. a filter panel's category
+     * groups) rather than a form field among others.
+     */
+    labelVariant?: 'default' | 'heading';
     /**
      * Input message
      */
@@ -101,4 +109,4 @@ export interface RadioGroupProps extends ComponentPropsWithoutRef<'div'> {
 /**
  * RadioGroup UI component
  */
-export declare const RadioGroup: ({ className, defaultValue, disabled, fieldsetProps, id, inputWidth, label, message, onBlur, onChange, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, value, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;
+export declare const RadioGroup: ({ className, defaultValue, disabled, fieldsetProps, id, inputWidth, label, labelVariant, message, onBlur, onChange, onValueChange, options, required, showLabel, tooltipText, validationMessage, validationStatus, value, ...props }: RadioGroupProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -109,6 +109,10 @@ export interface SelectProps {
      * Should the label be visible? If false, it will render for screen readers only.
      */
     showLabel?: boolean;
+    /**
+     * Should the selected option show a checkmark icon in the dropdown list? Defaults to true.
+     */
+    showSelectedIcon?: boolean;
     /**
      * Size of the select field.
      */
@@ -137,5 +141,5 @@ export declare const SelectOptionGroup: ({ children, label, }: SelectOptionGroup
 /**
  * Select UI component
  */
-export declare const Select: ({ autoWidth, className, defaultValue, disabled, icon, id, inputWidth, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, size, tooltipText, validationMessage, validationStatus, value, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
+export declare const Select: ({ autoWidth, className, defaultValue, disabled, icon, id, inputWidth, label, labelStrings, message, onBlur, onFocus, onOptionSelect, options, required, showLabel, showSelectedIcon, size, tooltipText, validationMessage, validationStatus, value, ...props }: SelectProps) => import("react/jsx-runtime").JSX.Element;
 export {};

package/dist/components/inputs/input-utilities.d.ts

@@ -41,6 +41,15 @@ interface InputLabelProps {
      * Label text.
      */
     label: string;
+    /**
+     * Visual treatment of the label/legend text. `'default'` matches other
+     * form field labels (medium weight, tight spacing to the field) — use it
+     * when the fieldset is one of several inputs on a form. `'heading'` is
+     * semibold with more room below it, for cases where the group reads as
+     * its own section label rather than a form field among others (e.g. a
+     * filter panel's category groups).
+     */
+    labelVariant?: 'default' | 'heading';
     /**
      * Is the field required?
      */
@@ -54,7 +63,7 @@ interface InputLabelProps {
      */
     tooltipText?: string;
 }
-export declare const InputLabel: ({ className, disabled, id, isLegend, isPseudoLabel, label, required, showLabel, tooltipText, }: InputLabelProps) => import("react/jsx-runtime").JSX.Element;
+export declare const InputLabel: ({ className, disabled, id, isLegend, isPseudoLabel, label, labelVariant, required, showLabel, tooltipText, }: InputLabelProps) => import("react/jsx-runtime").JSX.Element;
 export declare const InputMessage: ({ className, forInputGroup, hasValidationMessage, id, message, validationMessageHasDecorators, validationStatus, }: {
     className?: string;
     forInputGroup?: boolean;

package/dist/components/pagination/{PaginationMini/PaginationMini.d.ts → PaginationChapter/PaginationChapter.d.ts}

@@ -1,10 +1,10 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { HeadingLevelCommon } from '../../../libs/types/custom-types';
-import './pagination-mini.css';
+import './pagination-chapter.css';
 /**
- * Prop types for PaginationMini
+ * Prop types for PaginationChapter
  */
-export interface PaginationMiniProps extends ComponentPropsWithoutRef<'nav'> {
+export interface PaginationChapterProps extends ComponentPropsWithoutRef<'nav'> {
     /**
      * Additional class names.
      */
@@ -50,6 +50,6 @@ export interface PaginationMiniProps extends ComponentPropsWithoutRef<'nav'> {
     totalItemCount: number;
 }
 /**
- * PaginationMini UI component — previous/next navigation with page labels.
+ * PaginationChapter UI component — previous/next navigation with page labels.
  */
-export declare const PaginationMini: ({ className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, nextPage, onPageChange, previousPage, totalItemCount, ...props }: PaginationMiniProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationChapter: ({ className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, nextPage, onPageChange, previousPage, totalItemCount, ...props }: PaginationChapterProps) => import("react/jsx-runtime").JSX.Element;

package/dist/components/pagination/PaginationCompact/PaginationCompact.d.ts

@@ -1,6 +1,7 @@
 import { ComponentPropsWithoutRef } from 'react';
 import { HeadingLevelCommon } from '../../../libs/types/custom-types';
 import './pagination-compact.css';
+export type PaginationCompactPageControlType = 'dropdown' | 'input';
 /**
  * Prop types for PaginationCompact
  */
@@ -31,6 +32,14 @@ export interface PaginationCompactProps extends ComponentPropsWithoutRef<'nav'>
     labelStrings?: {
         next: string;
         of: string;
+        /**
+         * Label shown before the page selector (e.g. "Page 1 of 50"). Pass `null` to omit it.
+         */
+        page?: string | null;
+        /**
+         * Validation message shown when a typed page number is out of range. `{total}` is replaced with the total page count. Only used when `pageControlType` is `'input'`.
+         */
+        pageInputError: string;
         pageSelect: string;
         previous: string;
     };
@@ -38,6 +47,10 @@ export interface PaginationCompactProps extends ComponentPropsWithoutRef<'nav'>
      * Callback to handle page change.
      */
     onPageChange?: (page: number) => void;
+    /**
+     * Which control to use for jumping to a page: a dropdown select or a typed number input. Defaults to `'dropdown'`.
+     */
+    pageControlType?: PaginationCompactPageControlType;
     /**
      * Total number of items to paginate.
      */
@@ -46,4 +59,4 @@ export interface PaginationCompactProps extends ComponentPropsWithoutRef<'nav'>
 /**
  * PaginationCompact UI component — page selector dropdown with previous/next controls.
  */
-export declare const PaginationCompact: ({ className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, totalItemCount, ...props }: PaginationCompactProps) => import("react/jsx-runtime").JSX.Element;
+export declare const PaginationCompact: ({ className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, pageControlType, totalItemCount, ...props }: PaginationCompactProps) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,19 @@
+import { ComponentPropsWithoutRef, ReactNode } from 'react';
+import './panel-stack.css';
+/**
+ * Prop types for PanelStack
+ */
+export interface PanelStackProps extends ComponentPropsWithoutRef<'div'> {
+    /**
+     * A series of Panel components.
+     */
+    children?: ReactNode;
+    /**
+     * Additional class names
+     */
+    className?: string;
+}
+/**
+ * PanelStack UI component
+ */
+export declare const PanelStack: ({ children, className, ...props }: PanelStackProps) => import("react/jsx-runtime").JSX.Element;

package/dist/css/component-css/pds-checkbox-group.css

@@ -1 +1 @@
-@layer pds-v1, pds-v2;@layer pds-v2{.pds-checkbox-group__options{display:flex;flex-direction:column;margin-block-end:var(--pds-spacing-xs);margin-inline-start:var(--pds-spacing-4xs);row-gap:var(--pds-spacing-l)}}
+@layer pds-v1, pds-v2;@layer pds-v2{.pds-checkbox-group__options{display:flex;flex-direction:column;margin-block-end:var(--pds-spacing-xs);margin-inline-start:var(--pds-spacing-4xs);row-gap:var(--pds-spacing-m)}}

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

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

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

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

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;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-status-success-foreground);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;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)
 	.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}}