@pantheon-systems/pds-toolkit-react 2.0.0-alpha.71 → 2.0.0-alpha.73
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.
- package/dist/components/StatPanel/StatPanel.d.ts +70 -0
- package/dist/components/badges/Badge/Badge.d.ts +9 -2
- package/dist/components/buttons/SplitButton/SplitButton.d.ts +7 -1
- package/dist/components/icons/Icon/generated-icon-data.d.ts +1 -1
- package/dist/components/notifications/SectionMessage/SectionMessage.d.ts +6 -4
- package/dist/css/component-css/pds-badge.css +1 -1
- package/dist/css/component-css/pds-button.css +3 -3
- package/dist/css/component-css/pds-combobox.css +1 -1
- package/dist/css/component-css/pds-filter-button.css +1 -1
- package/dist/css/component-css/pds-index.css +15 -13
- package/dist/css/component-css/pds-inline-message.css +1 -1
- package/dist/css/component-css/pds-input-utilities.css +1 -1
- package/dist/css/component-css/pds-popover.css +1 -1
- package/dist/css/component-css/pds-section-message.css +1 -1
- package/dist/css/component-css/pds-side-nav-global.css +1 -1
- package/dist/css/component-css/pds-spinner.css +1 -1
- package/dist/css/component-css/pds-split-button.css +1 -1
- package/dist/css/component-css/pds-stat-panel.css +1 -0
- package/dist/css/component-css/pds-stepper.css +3 -1
- package/dist/css/component-css/pds-text-input.css +1 -1
- package/dist/css/design-tokens/variables.dark.css +1 -0
- package/dist/css/design-tokens/variables.global.css +1 -2
- package/dist/css/design-tokens/variables.light.css +1 -0
- package/dist/css/layout-css/pds-index.css +1 -1
- package/dist/css/layout-css/pds-stat-panel-group.css +1 -0
- package/dist/css/pds-components.css +15 -13
- package/dist/css/pds-core.css +1 -1
- package/dist/css/pds-layouts.css +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +2 -0
- package/dist/index.js +286 -208
- package/dist/index.js.map +1 -1
- package/dist/index.source.d.ts +2 -0
- package/dist/layouts/StatPanelGroup/StatPanelGroup.d.ts +32 -0
- package/package.json +2 -2
|
@@ -0,0 +1,70 @@
|
|
|
1
|
+
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { StatusType } from '../../libs/types/custom-types';
|
|
3
|
+
import { PDSIcon } from '../icons/Icon/Icon';
|
|
4
|
+
import './stat-panel.css';
|
|
5
|
+
/**
|
|
6
|
+
* Color options for the icon, from the toolkit's standard status vocabulary
|
|
7
|
+
* plus `neutral`. Ignored when `icon` is `'spinner'`, which always renders in
|
|
8
|
+
* the default foreground color.
|
|
9
|
+
*/
|
|
10
|
+
export type StatPanelIconColor = StatusType | 'neutral';
|
|
11
|
+
/**
|
|
12
|
+
* Prop types for StatPanel
|
|
13
|
+
*/
|
|
14
|
+
export interface StatPanelProps extends ComponentPropsWithoutRef<'div'> {
|
|
15
|
+
/**
|
|
16
|
+
* Click handler for the optional action. Renders the action only when
|
|
17
|
+
* both `actionLabel` and `actionCallback` are provided.
|
|
18
|
+
*/
|
|
19
|
+
actionCallback?: () => void;
|
|
20
|
+
/**
|
|
21
|
+
* Icon for the optional action button, shown in the upper-right corner.
|
|
22
|
+
* Defaults to the filter icon.
|
|
23
|
+
*/
|
|
24
|
+
actionIcon?: PDSIcon;
|
|
25
|
+
/**
|
|
26
|
+
* Accessible name for the action, also shown as its tooltip.
|
|
27
|
+
*/
|
|
28
|
+
actionLabel?: string;
|
|
29
|
+
/**
|
|
30
|
+
* Additional class names
|
|
31
|
+
*/
|
|
32
|
+
className?: string;
|
|
33
|
+
/**
|
|
34
|
+
* Optional supporting text shown below the stat.
|
|
35
|
+
*/
|
|
36
|
+
description?: string;
|
|
37
|
+
/**
|
|
38
|
+
* Which icon to render alongside the stat. Pass `'spinner'` to render a
|
|
39
|
+
* static (non-animated) version of the toolkit's `Spinner`.
|
|
40
|
+
*/
|
|
41
|
+
icon?: PDSIcon | 'spinner';
|
|
42
|
+
/**
|
|
43
|
+
* Icon color.
|
|
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;
|
|
55
|
+
/**
|
|
56
|
+
* The headline value, e.g. "4 sites".
|
|
57
|
+
*/
|
|
58
|
+
stat?: string;
|
|
59
|
+
/**
|
|
60
|
+
* Overline-style label describing the stat. Rendered as plain text (not a
|
|
61
|
+
* heading) — the panel is labeled for assistive tech via `role="group"` +
|
|
62
|
+
* `aria-labelledby` instead, so a grid of panels doesn't add a heading per
|
|
63
|
+
* panel to the page's heading outline.
|
|
64
|
+
*/
|
|
65
|
+
title: string;
|
|
66
|
+
}
|
|
67
|
+
/**
|
|
68
|
+
* StatPanel UI component
|
|
69
|
+
*/
|
|
70
|
+
export declare const StatPanel: ({ actionCallback, actionIcon, actionLabel, className, description, icon, iconColor, isActive, isLoading, stat, title, ...props }: StatPanelProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -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?:
|
|
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;
|
|
@@ -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 {};
|
|
@@ -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-
|
|
6
|
+
* Generated: 2026-08-22T00:38:01.682Z
|
|
7
7
|
*/
|
|
8
8
|
import { customIcons } from './custom-icons';
|
|
9
9
|
export { customIcons };
|
|
@@ -1,6 +1,7 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
|
|
2
|
-
import {
|
|
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
|
-
*
|
|
19
|
+
* Optional leading icon for `ctaButton`. Always colored to match the
|
|
20
|
+
* section message's own foreground color.
|
|
19
21
|
*/
|
|
20
|
-
|
|
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,
|
|
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 {};
|
|
@@ -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;
|
|
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)}}
|
|
@@ -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
|
|
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--
|
|
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--
|
|
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
|
|
@@ -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)}}
|
|
@@ -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:
|
|
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}}
|