@pantheon-systems/pds-toolkit-react 2.0.0-alpha.72 → 2.0.0-alpha.74

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (35) hide show
  1. package/dist/components/StatPanel/StatPanel.d.ts +14 -4
  2. package/dist/components/badges/Badge/Badge.d.ts +9 -2
  3. package/dist/components/buttons/MenuButton/MenuButton.d.ts +11 -1
  4. package/dist/components/buttons/SplitButton/SplitButton.d.ts +7 -1
  5. package/dist/components/icons/Icon/generated-icon-data.d.ts +1 -1
  6. package/dist/components/navigation/UserMenu/UserMenu.d.ts +11 -1
  7. package/dist/components/navigation/WorkspaceSelector/WorkspaceSelector.d.ts +11 -1
  8. package/dist/components/navigation/navigation-utilities.d.ts +3 -2
  9. package/dist/components/notifications/SectionMessage/SectionMessage.d.ts +6 -4
  10. package/dist/css/component-css/pds-badge.css +1 -1
  11. package/dist/css/component-css/pds-button.css +3 -3
  12. package/dist/css/component-css/pds-combobox.css +1 -1
  13. package/dist/css/component-css/pds-filter-button.css +1 -1
  14. package/dist/css/component-css/pds-index.css +18 -19
  15. package/dist/css/component-css/pds-inline-message.css +1 -1
  16. package/dist/css/component-css/pds-input-utilities.css +1 -1
  17. package/dist/css/component-css/pds-popover.css +1 -1
  18. package/dist/css/component-css/pds-section-message.css +1 -1
  19. package/dist/css/component-css/pds-side-nav-global.css +1 -1
  20. package/dist/css/component-css/pds-spinner.css +1 -1
  21. package/dist/css/component-css/pds-split-button.css +1 -1
  22. package/dist/css/component-css/pds-stat-panel.css +1 -1
  23. package/dist/css/component-css/pds-stepper.css +3 -1
  24. package/dist/css/component-css/pds-text-input.css +1 -1
  25. package/dist/css/component-css/pds-user-menu.css +1 -1
  26. package/dist/css/component-css/pds-workspace-selector.css +2 -5
  27. package/dist/css/design-tokens/variables.dark.css +1 -0
  28. package/dist/css/design-tokens/variables.global.css +1 -2
  29. package/dist/css/design-tokens/variables.light.css +1 -0
  30. package/dist/css/pds-components.css +18 -19
  31. package/dist/css/pds-core.css +1 -1
  32. package/dist/index.css +1 -1
  33. package/dist/index.js +823 -787
  34. package/dist/index.js.map +1 -1
  35. package/package.json +2 -2
package/dist/components/StatPanel/StatPanel.d.ts CHANGED
@@ -14,11 +14,12 @@ export type StatPanelIconColor = StatusType | 'neutral';
14
14
  export interface StatPanelProps extends ComponentPropsWithoutRef<'div'> {
15
15
  /**
16
16
  * Click handler for the optional action. Renders the action only when
17
- * `actionIcon`, `actionLabel`, and `actionCallback` are all provided.
17
+ * both `actionLabel` and `actionCallback` are provided.
18
18
  */
19
19
  actionCallback?: () => void;
20
20
  /**
21
21
  * Icon for the optional action button, shown in the upper-right corner.
22
+ * Defaults to the filter icon.
22
23
  */
23
24
  actionIcon?: PDSIcon;
24
25
  /**
@@ -37,15 +38,24 @@ export interface StatPanelProps extends ComponentPropsWithoutRef<'div'> {
37
38
  * Which icon to render alongside the stat. Pass `'spinner'` to render a
38
39
  * static (non-animated) version of the toolkit's `Spinner`.
39
40
  */
40
- icon: PDSIcon | 'spinner';
41
+ icon?: PDSIcon | 'spinner';
41
42
  /**
42
43
  * Icon color.
43
44
  */
44
45
  iconColor?: StatPanelIconColor;
46
+ /**
47
+ * Designates the panel as active, e.g. when the stat it summarizes is
48
+ * driving an applied filter.
49
+ */
50
+ isActive?: boolean;
51
+ /**
52
+ * Shows a skeleton in place of `stat` while its value is still loading.
53
+ */
54
+ isLoading?: boolean;
45
55
  /**
46
56
  * The headline value, e.g. "4 sites".
47
57
  */
48
- stat: string;
58
+ stat?: string;
49
59
  /**
50
60
  * Overline-style label describing the stat. Rendered as plain text (not a
51
61
  * heading) — the panel is labeled for assistive tech via `role="group"` +
@@ -57,4 +67,4 @@ export interface StatPanelProps extends ComponentPropsWithoutRef<'div'> {
57
67
  /**
58
68
  * StatPanel UI component
59
69
  */
60
- export declare const StatPanel: ({ actionCallback, actionIcon, actionLabel, className, description, icon, iconColor, stat, title, ...props }: StatPanelProps) => import("react/jsx-runtime").JSX.Element;
70
+ export declare const StatPanel: ({ actionCallback, actionIcon, actionLabel, className, description, icon, iconColor, isActive, isLoading, stat, title, ...props }: StatPanelProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/badges/Badge/Badge.d.ts CHANGED
@@ -1,6 +1,8 @@
1
1
  import { ComponentPropsWithoutRef, ReactNode } from 'react';
2
+ import { PDSIcon } from '../../icons/Icon/Icon';
2
3
  import './badge.css';
3
4
  export type BadgeColor = 'brand' | 'brand-muted' | 'critical' | 'critical-muted' | 'discovery' | 'discovery-muted' | 'gold' | 'gold-muted' | 'indigo' | 'indigo-muted' | 'info' | 'info-muted' | 'ink' | 'ink-muted' | 'lime' | 'lime-muted' | 'orange' | 'orange-muted' | 'rose' | 'rose-muted' | 'silver' | 'silver-muted' | 'sky' | 'sky-muted' | 'slate' | 'slate-muted' | 'stone' | 'stone-muted' | 'success' | 'success-muted' | 'warning' | 'warning-muted';
5
+ export type BadgeSize = 'xs' | 's' | 'm';
4
6
  /**
5
7
  * Badge component props
6
8
  */
@@ -13,6 +15,11 @@ export interface BadgeProps extends ComponentPropsWithoutRef<'span'> {
13
15
  * Badge color
14
16
  */
15
17
  color: BadgeColor;
18
+ /**
19
+ * Optional leading icon. Sized to fit the badge's `size` and always
20
+ * colored to match the badge's foreground color.
21
+ */
22
+ iconName?: PDSIcon;
16
23
  /**
17
24
  * Badge text or content.
18
25
  */
@@ -20,9 +27,9 @@ export interface BadgeProps extends ComponentPropsWithoutRef<'span'> {
20
27
  /**
21
28
  * Badge size
22
29
  */
23
- size?: 'xs' | 's' | 'm';
30
+ size?: BadgeSize;
24
31
  }
25
32
  /**
26
33
  * Badge UI component
27
34
  */
28
- export declare const Badge: ({ className, color, label, size, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
35
+ export declare const Badge: ({ className, color, iconName, label, size, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/buttons/MenuButton/MenuButton.d.ts CHANGED
@@ -30,6 +30,16 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
30
30
  * ID value for this component.
31
31
  */
32
32
  id: string;
33
+ /**
34
+ * Opt in to swapping the trigger + floating dropdown panel for an inline
35
+ * accordion at the mobile breakpoint. Defaults to `false` — MenuButton
36
+ * always renders its normal trigger + dropdown otherwise, regardless of
37
+ * viewport. Only set this when rendering inside a mobile nav menu that
38
+ * provides the accordion's expected layout (e.g. `Navbar` sets this
39
+ * automatically on its own mobile-menu copy of any MenuButton children —
40
+ * you shouldn't need to set it yourself in that case).
41
+ */
42
+ isMobileAccordion?: boolean;
33
43
  /**
34
44
  * Will this be used for a split button?
35
45
  */
@@ -80,5 +90,5 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
80
90
  /**
81
91
  * MenuButton UI component
82
92
  */
83
- export declare const MenuButton: ({ className, disabled, iconName, iconOnly, id, isSplitButton, label, menuItems, onClick, size, statusDot, tally, testId, undefinedLabel, variant, ...props }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
93
+ export declare const MenuButton: ({ className, disabled, iconName, iconOnly, id, isMobileAccordion, isSplitButton, label, menuItems, onClick, size, statusDot, tally, testId, undefinedLabel, variant, ...props }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
84
94
  export {};
package/dist/components/buttons/SplitButton/SplitButton.d.ts CHANGED
@@ -1,5 +1,6 @@
1
1
  import { ComponentPropsWithoutRef } from 'react';
2
2
  import { ButtonVariant, LinkItemType, MenuItemType } from '../../../libs/types/custom-types';
3
+ import { PDSIcon } from '../../icons/Icon/Icon';
3
4
  import './split-button.css';
4
5
  type SplitButtonSize = 's' | 'm';
5
6
  /**
@@ -18,6 +19,11 @@ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
18
19
  * Is the button disabled?
19
20
  */
20
21
  disabled?: boolean;
22
+ /**
23
+ * Icon shown at the start of the primary action, e.g. `'plus'`. Only
24
+ * applies to the primary action — there's no equivalent for menu items.
25
+ */
26
+ iconName?: PDSIcon;
21
27
  /**
22
28
  * ID value for this component.
23
29
  */
@@ -38,5 +44,5 @@ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
38
44
  /**
39
45
  * A component used to render a button with a primary action and a menu of additional options
40
46
  */
41
- export declare const SplitButton: ({ actionItems, className, disabled, id, moreActionsLabel, size, variant, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
47
+ export declare const SplitButton: ({ actionItems, className, disabled, iconName, id, moreActionsLabel, size, variant, ...props }: SplitButtonProps) => import("react/jsx-runtime").JSX.Element;
42
48
  export {};
package/dist/components/icons/Icon/generated-icon-data.d.ts CHANGED
@@ -3,7 +3,7 @@
3
3
  *
4
4
  * Generated by: npm run generate:icon-data
5
5
  * Source: icon-registry.ts + Font Awesome packages + custom-icons.tsx
6
- * Generated: 2026-08-20T16:39:21.760Z
6
+ * Generated: 2026-08-24T23:42:55.504Z
7
7
  */
8
8
  import { customIcons } from './custom-icons';
9
9
  export { customIcons };
package/dist/components/navigation/UserMenu/UserMenu.d.ts CHANGED
@@ -43,6 +43,16 @@ export interface UserMenuProps extends ComponentPropsWithoutRef<'span'> {
43
43
  * Additional class names.
44
44
  */
45
45
  className?: string;
46
+ /**
47
+ * Opt in to swapping the trigger + floating dropdown panel for an inline
48
+ * accordion at the mobile breakpoint. Defaults to `false` — UserMenu
49
+ * always renders its normal trigger + dropdown otherwise, regardless of
50
+ * viewport. Only set this when rendering inside a mobile nav menu that
51
+ * provides the accordion's expected layout (e.g. `Navbar` sets this
52
+ * automatically on its own mobile-menu copy — you shouldn't need to set
53
+ * it yourself in that case).
54
+ */
55
+ isMobileAccordion?: boolean;
46
56
  /**
47
57
  * Array of menu items.
48
58
  */
@@ -81,4 +91,4 @@ export interface UserMenuProps extends ComponentPropsWithoutRef<'span'> {
81
91
  /**
82
92
  * UserMenu UI component
83
93
  */
84
- export declare const UserMenu: ({ ariaLabel, className, menuItems, onThemeChange, theme, themeLabel, themeLabelStrings, userEmail, userImageSrc, userName, ...props }: UserMenuProps) => import("react/jsx-runtime").JSX.Element;
94
+ export declare const UserMenu: ({ ariaLabel, className, isMobileAccordion, menuItems, onThemeChange, theme, themeLabel, themeLabelStrings, userEmail, userImageSrc, userName, ...props }: UserMenuProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/navigation/WorkspaceSelector/WorkspaceSelector.d.ts CHANGED
@@ -65,6 +65,16 @@ export interface WorkspaceSelectorProps extends ComponentPropsWithoutRef<'span'>
65
65
  * Placeholder text for the filter input.
66
66
  */
67
67
  filterPlaceholder?: string;
68
+ /**
69
+ * Opt in to swapping the trigger + floating dropdown panel for an inline
70
+ * accordion at the mobile breakpoint. Defaults to `false` — WorkspaceSelector
71
+ * always renders its normal trigger + dropdown otherwise, regardless of
72
+ * viewport. Only set this when rendering inside a mobile nav menu that
73
+ * provides the accordion's expected layout (e.g. `Navbar` sets this
74
+ * automatically on its own mobile-menu copy — you shouldn't need to set
75
+ * it yourself in that case).
76
+ */
77
+ isMobileAccordion?: boolean;
68
78
  /**
69
79
  * Heading for the workspace dropdown menu.
70
80
  */
@@ -85,4 +95,4 @@ export interface WorkspaceSelectorProps extends ComponentPropsWithoutRef<'span'>
85
95
  /**
86
96
  * WorkspaceSelector UI component
87
97
  */
88
- export declare const WorkspaceSelector: ({ ariaLabel, className, createWorkspaceLink, filterLabel, filterPlaceholder, menuHeading, minFilterItems, noResultsText, workspaceList, ...props }: WorkspaceSelectorProps) => import("react/jsx-runtime").JSX.Element;
98
+ export declare const WorkspaceSelector: ({ ariaLabel, className, createWorkspaceLink, filterLabel, filterPlaceholder, isMobileAccordion, menuHeading, minFilterItems, noResultsText, workspaceList, ...props }: WorkspaceSelectorProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/navigation/navigation-utilities.d.ts CHANGED
@@ -55,11 +55,12 @@ export declare const buildActiveSignature: (items: NavigationItem[]) => string;
55
55
  * Checks if the provided content is an interactive element (link, button, etc.)
56
56
  * @param content - The React content to examine
57
57
  * @returns True if the content is an interactive element, false otherwise
58
- * @description Currently detects:
58
+ * @description Detects:
59
59
  * - Native anchor elements (`<a>`)
60
- * - React Router Link components (by displayName)
60
+ * - React Router Link/NavLink components (by displayName or by `to`/`href` props)
61
61
  * @example
62
62
  * const isInteractive = isInteractiveElement(<Link to="/home">Home</Link>); // true
63
+ * const isInteractive = isInteractiveElement(<NavLink to="/home">Home</NavLink>); // true
63
64
  * const isInteractive = isInteractiveElement(<span>Label</span>); // false
64
65
  * const isInteractive = isInteractiveElement("Plain text"); // false
65
66
  */
package/dist/components/notifications/SectionMessage/SectionMessage.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
2
- import { DataContext, StatusType } from '../../../libs/types/custom-types';
2
+ import { StatusType } from '../../../libs/types/custom-types';
3
3
  import { Button } from '../../buttons/Button/Button';
4
+ import { PDSIcon } from '../../icons/Icon/Icon';
4
5
  import './section-message.css';
5
6
  export type SectionMessageType = StatusType;
6
7
  type TypeLabels = Record<SectionMessageType, string>;
@@ -15,9 +16,10 @@ export interface SectionMessageProps extends ComponentPropsWithoutRef<'div'> {
15
16
  */
16
17
  ctaButton?: ComponentPropsWithoutRef<typeof Button>;
17
18
  /**
18
- * Data context for sizing. Marketing context increases all sizes by one step.
19
+ * Optional leading icon for `ctaButton`. Always colored to match the
20
+ * section message's own foreground color.
19
21
  */
20
- dataContext?: DataContext;
22
+ ctaIcon?: PDSIcon;
21
23
  /**
22
24
  * Label for dismiss button. Provide a translation string if needed.
23
25
  */
@@ -54,5 +56,5 @@ export interface SectionMessageProps extends ComponentPropsWithoutRef<'div'> {
54
56
  /**
55
57
  * SectionMessage UI component
56
58
  */
57
- export declare const SectionMessage: ({ className, ctaButton, dataContext, dismissLabel, id, isDismissible, message, onDismiss, title, type, typeLabels, ...props }: SectionMessageProps) => import("react/jsx-runtime").JSX.Element;
59
+ export declare const SectionMessage: ({ className, ctaButton, ctaIcon, dismissLabel, id, isDismissible, message, onDismiss, title, type, typeLabels, ...props }: SectionMessageProps) => import("react/jsx-runtime").JSX.Element;
58
60
  export {};
package/dist/css/component-css/pds-badge.css CHANGED
@@ -1 +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);--badge-font-size:var(--pds-typography-size-xs);--badge-height:var(--pds-spacing-xl);--badge-padding-inline:var(--pds-spacing-2xs);align-items:center;background-color:var(--badge-bg);border-radius:var(--pds-border-radius-default);color:var(--badge-fg);display:inline-flex;flex-shrink:0;font-size:var(--badge-font-size);font-weight:var(--pds-typography-fw-medium);height:var(--badge-height);inline-size:fit-content;line-height:1;padding-inline:var(--badge-padding-inline);white-space:nowrap}.pds-badge--xs{--badge-font-size:var(--pds-typography-size-2xs);--badge-height:var(--pds-spacing-l);--badge-padding-inline:var(--pds-spacing-3xs)}.pds-badge--s{--badge-font-size:var(--pds-typography-size-xs);--badge-height:var(--pds-spacing-xl);--badge-padding-inline:var(--pds-spacing-2xs)}.pds-badge--m{--badge-font-size:var(--pds-typography-size-s);--badge-height:1.875rem;--badge-padding-inline:var(--pds-spacing-s)}.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)}}
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);--badge-font-size:var(--pds-typography-size-xs);--badge-height:var(--pds-spacing-xl);--badge-icon-gap:var(--pds-spacing-3xs);--badge-padding-inline:var(--pds-spacing-2xs);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(--badge-font-size);font-weight:var(--pds-typography-fw-medium);gap:var(--badge-icon-gap);height:var(--badge-height);inline-size:fit-content;line-height:1;padding-inline:var(--badge-padding-inline);white-space:nowrap}.pds-badge,.pds-badge__icon{flex-shrink:0}.pds-badge--xs{--badge-font-size:var(--pds-typography-size-2xs);--badge-height:var(--pds-spacing-l);--badge-padding-inline:var(--pds-spacing-3xs)}.pds-badge--s{--badge-font-size:var(--pds-typography-size-xs);--badge-height:var(--pds-spacing-xl);--badge-padding-inline:var(--pds-spacing-2xs)}.pds-badge--m{--badge-font-size:var(--pds-typography-size-s);--badge-height:1.875rem;--badge-icon-gap:var(--pds-spacing-2xs);--badge-padding-inline:var(--pds-spacing-s)}.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-button.css CHANGED
@@ -24,7 +24,7 @@
24
24
  --pds-color-button-critical-background-active
25
25
  );--button-box-shadow-active:var(--pds-elevation-button-critical-active);--button-foreground-color:var(--pds-color-button-critical-foreground);--button-border-color:var(--pds-color-button-critical-background-default);--button-border-color-hover:var(
26
26
  --pds-color-button-critical-background-hover
27
- );--button-border-color-active:var(--button-background-color-active)}.pds-button--critical .pds-button__working-indicator{--spinner-color-1:var(--button-foreground-color);--spinner-color-2:color-mix(in oklch,var(--button-foreground-color) 50%,transparent);--spinner-color-3:transparent}.pds-button--critical-secondary{--button-background-color:var(
27
+ );--button-border-color-active:var(--button-background-color-active)}.pds-button--critical-secondary{--button-background-color:var(
28
28
  --pds-color-button-critical-secondary-background-default
29
29
  );--button-background-color-hover:var(
30
30
  --pds-color-button-critical-secondary-background-hover
@@ -40,7 +40,7 @@
40
40
  --pds-color-button-critical-secondary-border-default
41
41
  );--button-border-color-active:var(
42
42
  --pds-color-button-critical-secondary-border-default
43
- )}.pds-button--critical-secondary .pds-button__working-indicator{--spinner-color-1:var(--pds-color-spinner-critical-secondary-1);--spinner-color-2:var(--pds-color-spinner-critical-secondary-2);--spinner-color-3:var(--pds-color-spinner-critical-secondary-3)}.pds-button--brand{--button-background-color:var(--pds-color-button-brand-background-default);--button-background-color-hover:var(
43
+ )}.pds-button--brand{--button-background-color:var(--pds-color-button-brand-background-default);--button-background-color-hover:var(
44
44
  --pds-color-button-brand-background-hover
45
45
  );--button-background-color-active:var(
46
46
  --pds-color-button-brand-background-active
@@ -52,7 +52,7 @@
52
52
  --pds-color-button-highlight-background-active
53
53
  );--button-box-shadow-active:var(--pds-elevation-button-highlight-active);--button-foreground-color:var(--pds-color-button-highlight-foreground);--button-border-color:var(--pds-color-button-highlight-background-default);--button-border-color-hover:var(
54
54
  --pds-color-button-highlight-background-hover
55
- );--button-border-color-active:var(--button-background-color-active)}.pds-button--highlight .pds-button__working-indicator{--spinner-color-1:var(--button-foreground-color);--spinner-color-2:color-mix(in oklch,var(--button-foreground-color) 50%,transparent);--spinner-color-3:transparent}.pds-button--reverse{--button-background-color:var(--pds-color-button-reverse-background-default);--button-background-color-hover:var(
55
+ );--button-border-color-active:var(--button-background-color-active)}.pds-button--reverse{--button-background-color:var(--pds-color-button-reverse-background-default);--button-background-color-hover:var(
56
56
  --pds-color-button-reverse-background-hover
57
57
  );--button-background-color-active:var(
58
58
  --pds-color-button-reverse-background-active
package/dist/css/component-css/pds-combobox.css CHANGED
@@ -1 +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;padding-block-end:0}.pds-combobox__dropdown:focus-visible{outline:none}.pds-combobox__options{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.pds-combobox__options .pds-dropdown__item:last-child{margin-block-end:var(--pds-spacing-2xs)}.pds-combobox__option-label{flex:1;min-width:0}.pds-combobox__loading{color:var(--pds-color-foreground-default);font-size:var(--pds-typography-size-m);padding:var(--pds-spacing-m)}}
1
+ @layer pds-v1, pds-v2;@layer pds-v2{.pds-combobox{position:relative}.pds-combobox__input-wrapper{--input-wrapper-padding-inline-end:var(--pds-spacing-xs);align-items:center;background-color:var(--pds-color-surface-default);border:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:var(--pds-border-radius-input);display:flex;gap:var(--pds-spacing-xs);height:var(--pds-spacing-input-height-s);padding-inline-end:var(--input-wrapper-padding-inline-end);padding-inline-start:var(--pds-spacing-xs);position:relative;transition:var(--pds-animation-transition-input);width:100%}.pds-combobox__input-wrapper:focus-within{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0;transition:var(--pds-animation-transition-focus)}.pds-combobox__input-wrapper--has-search-shortcut{--input-wrapper-padding-inline-end:var(--pds-spacing-2xs)}.pds-combobox--m .pds-combobox__input-wrapper{--input-wrapper-padding-inline-end:var(--pds-spacing-s);gap:var(--pds-spacing-s);height:var(--pds-spacing-input-height-m);padding-inline-start:var(--pds-spacing-s)}.pds-combobox--m .pds-combobox__input-wrapper--has-search-shortcut{--input-wrapper-padding-inline-end:var(--pds-spacing-xs)}.pds-combobox__input{background-color:transparent;border:none;caret-color:var(--pds-color-foreground-default);color:var(--pds-color-foreground-default);flex-grow:1;font-size:var(--pds-typography-size-s);line-height:1;padding-inline:0;width:100%}.pds-combobox__input:focus{outline:none}.pds-combobox__input::placeholder{color:var(--pds-color-input-placeholder)}.pds-combobox__trigger{align-items:center;background-color:transparent;border:none;border-radius:var(--pds-border-radius-input);cursor:pointer;display:flex;justify-content:center;padding:var(--pds-spacing-4xs)}.pds-combobox__trigger:hover{background-color:var(--pds-color-interactive-background-hover)}.pds-combobox__trigger:focus-visible{background-color:var(--pds-color-interactive-background-hover);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-combobox__trigger-icon{color:var(--pds-color-foreground-default-secondary);pointer-events:none;transition:var(--pds-animation-transition-rotation)}.pds-combobox__trigger[aria-expanded=true] .pds-combobox__trigger-icon{transform:rotate(180deg);transition:var(--pds-animation-transition-rotation)}.pds-combobox__trigger-icon.pds-icon--m{height:.8125rem;width:.8125rem}.pds-combobox--m .pds-combobox__trigger-icon.pds-icon--m{height:1rem;width:1rem}.pds-combobox__dropdown{margin-block-start:var(--pds-spacing-xs);max-height:18rem;overflow-x:hidden;padding-block-end:0}.pds-combobox__dropdown:focus-visible{outline:none}.pds-combobox__options{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.pds-combobox__options .pds-dropdown__item:last-child{margin-block-end:var(--pds-spacing-2xs)}.pds-combobox__option-label{flex:1;min-width:0}.pds-combobox__loading{color:var(--pds-color-foreground-default);font-size:var(--pds-typography-size-m);padding:var(--pds-spacing-m)}}
package/dist/css/component-css/pds-filter-button.css CHANGED
@@ -1 +1 @@
1
- @layer pds-v1, pds-v2;@layer pds-v2{.pds-filter-button{--fb-bg:var(--pds-color-button-secondary-background-default);--fb-bg-hover:var(--pds-color-button-secondary-background-hover);--fb-border:var(--pds-color-button-secondary-border);--fb-clear-size:1.5rem;--fb-fg:var(--pds-color-button-secondary-foreground-default)}.pds-filter-button__panel{min-width:12rem;width:max-content}.pds-filter-button--has-search .pds-filter-button__panel{min-width:14rem}.pds-filter-button__trigger{background:var(--fb-bg);block-size:var(--pds-spacing-button-height-s);border:var(--pds-border-width-default) solid var(--fb-border);border-radius:var(--pds-border-radius-button);color:var(--fb-fg);font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-3xs);padding-block:0;padding-inline-end:var(--pds-spacing-s);padding-inline-start:calc(var(--pds-spacing-s) + var(--pds-spacing-5xs));white-space:nowrap}.pds-filter-button__trigger:hover{background-color:var(--fb-bg-hover)}.pds-filter-button--multiple .pds-filter-button__trigger,.pds-filter-button--single .pds-filter-button__trigger{padding-inline-start:calc(var(--pds-spacing-s) + var(--fb-clear-size) + var(--pds-spacing-4xs))}.pds-filter-button__label{align-items:center;display:inline-flex;gap:var(--pds-spacing-3xs)}.pds-filter-button__divider{background-color:var(--pds-color-border-separator);block-size:.75rem;inline-size:var(--pds-border-width-default)}.pds-filter-button__clear{align-items:center;background:transparent;block-size:var(--fb-clear-size);border:none;border-radius:var(--pds-border-radius-input);color:var(--fb-fg);cursor:pointer;display:inline-flex;inline-size:var(--fb-clear-size);inset-block-start:50%;inset-inline-start:var(--pds-spacing-s);justify-content:center;padding:var(--pds-spacing-5xs);position:absolute;transform:translateY(-50%)}.pds-filter-button__clear:hover{background-color:var(--fb-bg-hover)}.pds-filter-button__clear:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px}.pds-filter-button__clear:disabled{cursor:not-allowed;opacity:.5}}
1
+ @layer pds-v1, pds-v2;@layer pds-v2{.pds-filter-button{--fb-bg:var(--pds-color-button-secondary-background-default);--fb-bg-hover:var(--pds-color-button-secondary-background-hover);--fb-border:var(--pds-color-button-secondary-border);--fb-clear-size:1.5rem;--fb-fg:var(--pds-color-button-secondary-foreground-default)}.pds-filter-button__panel{min-width:12rem;width:max-content}.pds-filter-button--has-search .pds-filter-button__panel{min-width:14rem}.pds-filter-button__trigger{background:var(--fb-bg);block-size:var(--pds-spacing-button-height-s);border:var(--pds-border-width-default) solid var(--fb-border);border-radius:var(--pds-border-radius-button);color:var(--fb-fg);font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-3xs);padding-block:0;padding-inline-end:var(--pds-spacing-s);padding-inline-start:calc(var(--pds-spacing-s) + var(--pds-spacing-5xs));white-space:nowrap}.pds-filter-button__trigger:hover{background-color:var(--fb-bg-hover)}.pds-filter-button--multiple .pds-filter-button__trigger,.pds-filter-button--single .pds-filter-button__trigger{padding-inline-start:calc(var(--pds-spacing-s) + var(--fb-clear-size) + var(--pds-spacing-4xs))}.pds-filter-button__label{align-items:center;display:inline-flex;gap:var(--pds-spacing-3xs)}.pds-filter-button__divider{background-color:var(--pds-color-border-separator);block-size:.75rem;inline-size:var(--pds-border-width-default)}.pds-filter-button__clear{align-items:center;background:transparent;block-size:var(--fb-clear-size);border:none;border-radius:50%;color:var(--fb-fg);cursor:pointer;display:inline-flex;inline-size:var(--fb-clear-size);inset-block-start:50%;inset-inline-start:var(--pds-spacing-s);justify-content:center;padding:var(--pds-spacing-5xs);position:absolute;transform:translateY(-50%)}.pds-filter-button__clear:hover{background-color:var(--fb-bg-hover)}.pds-filter-button__clear:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0}.pds-filter-button__clear:disabled{cursor:not-allowed;opacity:.5}}