@pantheon-systems/pds-toolkit-react 2.0.0-alpha.72 → 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 +14 -4
- 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 -1
- 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/pds-components.css +15 -13
- package/dist/css/pds-core.css +1 -1
- package/dist/index.css +1 -1
- package/dist/index.js +205 -175
- package/dist/index.js.map +1 -1
- package/package.json +2 -2
|
@@ -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
|
-
*
|
|
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
|
|
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
|
|
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;
|
|
@@ -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;background-color:var(--badge-bg);border-radius:var(--pds-border-radius-default);color:var(--badge-fg);display:inline-flex;
|
|
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}}
|