@pantheon-systems/pds-toolkit-react 2.0.0-alpha.35 → 2.0.0-alpha.36
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/codemods/v1-to-v2/mappings.json +24 -1
- package/dist/components/buttons/Button/Button.d.ts +15 -0
- package/dist/components/buttons/MenuButton/MenuButton.d.ts +20 -7
- package/dist/components/buttons/SplitButton/SplitButton.d.ts +1 -1
- package/dist/components/icons/Icon/generated-icon-data.d.ts +1 -1
- package/dist/components/inputs/Datepicker/Datepicker.d.ts +22 -13
- package/dist/css/component-css/pds-button.css +6 -6
- package/dist/css/component-css/pds-datepicker.css +2 -2
- package/dist/css/component-css/pds-index.css +14 -14
- package/dist/css/component-css/pds-input-utilities.css +1 -1
- package/dist/css/component-css/pds-menu-button.css +1 -1
- package/dist/css/component-css/pds-split-button.css +1 -1
- package/dist/css/component-css/pds-stepper.css +1 -1
- package/dist/css/component-css/pds-tab-menu.css +1 -1
- package/dist/css/component-css/pds-tabs.css +1 -1
- package/dist/css/component-css/pds-tally.css +1 -1
- package/dist/css/component-css/pds-vertical-stepper.css +1 -1
- package/dist/css/design-tokens/variables.dark.css +20 -20
- package/dist/css/design-tokens/variables.light.css +1 -1
- package/dist/css/pds-components.css +14 -14
- package/dist/css/pds-core.css +1 -1
- package/dist/index.css +1 -1
- package/dist/index.d.ts +1 -0
- package/dist/index.js +1244 -979
- package/dist/index.js.map +1 -1
- package/dist/libs/components/StatusDot/StatusDot.d.ts +15 -0
- package/package.json +2 -2
|
@@ -430,7 +430,7 @@
|
|
|
430
430
|
"prop": "variant",
|
|
431
431
|
"oldValue": "navbar",
|
|
432
432
|
"replacement": "Use variant=\"subtle\"",
|
|
433
|
-
"reason": "The navbar variant has been removed in v2. It was visually identical to subtle
|
|
433
|
+
"reason": "The navbar variant has been removed in v2. It was visually identical to subtle \u2014 replace with subtle."
|
|
434
434
|
},
|
|
435
435
|
{
|
|
436
436
|
"component": "MenuButton",
|
|
@@ -920,6 +920,29 @@
|
|
|
920
920
|
"note": "Backwards compatible \u2014 existing size values are unchanged. Use size=\"xs\" when a smaller CTA link is needed."
|
|
921
921
|
},
|
|
922
922
|
"reason": "Added to support compact contexts such as the Payment Card pattern footer."
|
|
923
|
+
},
|
|
924
|
+
{
|
|
925
|
+
"component": "MenuButton",
|
|
926
|
+
"prop": "displayType",
|
|
927
|
+
"description": "Replaced with the boolean `iconOnly` prop. `displayType='icon-end'` (the default) becomes `iconOnly={false}` or simply omitting the prop. `displayType='icon-only'` becomes `iconOnly={true}`.",
|
|
928
|
+
"v1Type": "'icon-end' | 'icon-only'",
|
|
929
|
+
"v2Type": "boolean",
|
|
930
|
+
"migration": {
|
|
931
|
+
"note": "Remove `displayType='icon-end'` (no-op, it was the default). Replace `displayType='icon-only'` with `iconOnly`."
|
|
932
|
+
},
|
|
933
|
+
"reason": "The displayType prop offered only two modes and the name implied richer configurability than existed. A boolean is clearer."
|
|
934
|
+
},
|
|
935
|
+
{
|
|
936
|
+
"component": "Datepicker",
|
|
937
|
+
"prop": "presets",
|
|
938
|
+
"replacement": "Use the exported getPresetDateRange utility alongside an external SegmentedButton, Select, or other control. See the Datepicker With Presets pattern for composition examples.",
|
|
939
|
+
"reason": "Preset management has been decoupled from the Datepicker in v2 so consuming apps can use any control (SegmentedButton, Select, custom) and own their own preset state."
|
|
940
|
+
},
|
|
941
|
+
{
|
|
942
|
+
"component": "Datepicker",
|
|
943
|
+
"prop": "onInitialize",
|
|
944
|
+
"replacement": "Initialize date range state directly using getPresetDateRange in your component's useState initializer.",
|
|
945
|
+
"reason": "Removed along with the presets prop. Since preset state is now owned externally, the consuming component already knows the initial value and does not need a callback."
|
|
923
946
|
}
|
|
924
947
|
]
|
|
925
948
|
},
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import React, { ComponentPropsWithoutRef, MouseEvent, ReactNode } from 'react';
|
|
2
|
+
import { StatusDotType } from '../../../libs/components/StatusDot/StatusDot';
|
|
2
3
|
import { ButtonDisplayType, ButtonSize, ButtonType, ButtonVariant } from '../../../libs/types/custom-types';
|
|
4
|
+
import { TallyProps } from '../../badges/Tally/Tally';
|
|
3
5
|
import { PDSIcon } from '../../icons/Icon/Icon';
|
|
4
6
|
import './button.css';
|
|
5
7
|
interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
|
|
@@ -56,6 +58,19 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
|
|
|
56
58
|
* @default 's'
|
|
57
59
|
*/
|
|
58
60
|
size?: ButtonSize;
|
|
61
|
+
/**
|
|
62
|
+
* A status dot displayed in the left icon slot. Mutually exclusive with `iconName` when `displayType` is `icon-start`.
|
|
63
|
+
* Only valid on `primary`, `secondary`, and `subtle` variants.
|
|
64
|
+
*/
|
|
65
|
+
statusDot?: StatusDotType;
|
|
66
|
+
/**
|
|
67
|
+
* A tally badge displayed in the right icon slot. Mutually exclusive with `iconName` when `displayType` is `icon-end`.
|
|
68
|
+
* Only valid on `primary`, `secondary`, `subtle`, and `highlight` variants.
|
|
69
|
+
*/
|
|
70
|
+
tally?: {
|
|
71
|
+
label: TallyProps['label'];
|
|
72
|
+
type: TallyProps['type'];
|
|
73
|
+
};
|
|
59
74
|
/**
|
|
60
75
|
* Text for an optional tooltip to be displayed when the button is `disabled`, `isLoading`, or `isWorking`.
|
|
61
76
|
*/
|
|
@@ -1,5 +1,7 @@
|
|
|
1
1
|
import { ComponentPropsWithRef, ReactNode } from 'react';
|
|
2
|
+
import { StatusDotType } from '../../../libs/components/StatusDot/StatusDot';
|
|
2
3
|
import { ButtonVariant, HeadingItemType, LinkItemType, MenuItemType, NodeItemType, SeparatorItemType } from '../../../libs/types/custom-types';
|
|
4
|
+
import { TallyProps } from '../../badges/Tally/Tally';
|
|
3
5
|
import { PDSIcon } from '../../icons/Icon/Icon';
|
|
4
6
|
import '@components/Dropdown/dropdown.css';
|
|
5
7
|
import './menu-button.css';
|
|
@@ -17,13 +19,13 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
|
|
|
17
19
|
*/
|
|
18
20
|
disabled?: boolean;
|
|
19
21
|
/**
|
|
20
|
-
*
|
|
22
|
+
* Icon name for icon-only mode.
|
|
21
23
|
*/
|
|
22
|
-
|
|
24
|
+
iconName?: PDSIcon;
|
|
23
25
|
/**
|
|
24
|
-
*
|
|
26
|
+
* Render as an icon-only button (no label, no angle-down). Not compatible with `tally` or `statusDot`.
|
|
25
27
|
*/
|
|
26
|
-
|
|
28
|
+
iconOnly?: boolean;
|
|
27
29
|
/**
|
|
28
30
|
* ID value for this component.
|
|
29
31
|
*/
|
|
@@ -52,6 +54,17 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
|
|
|
52
54
|
* Which size of button to render.
|
|
53
55
|
*/
|
|
54
56
|
size?: MenuButtonSize;
|
|
57
|
+
/**
|
|
58
|
+
* A status dot displayed in the left icon slot. Not available in `iconOnly` mode.
|
|
59
|
+
*/
|
|
60
|
+
statusDot?: StatusDotType;
|
|
61
|
+
/**
|
|
62
|
+
* A tally badge displayed between the label and the angle-down icon. Not available in `iconOnly` mode.
|
|
63
|
+
*/
|
|
64
|
+
tally?: {
|
|
65
|
+
label: TallyProps['label'];
|
|
66
|
+
type: TallyProps['type'];
|
|
67
|
+
};
|
|
55
68
|
/**
|
|
56
69
|
* Optional `data-testid` value for this component.
|
|
57
70
|
*/
|
|
@@ -61,12 +74,12 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
|
|
|
61
74
|
*/
|
|
62
75
|
undefinedLabel?: string;
|
|
63
76
|
/**
|
|
64
|
-
* Which variant of button to render
|
|
77
|
+
* Which variant of button to render. Not available in `iconOnly` mode.
|
|
65
78
|
*/
|
|
66
|
-
variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle'>;
|
|
79
|
+
variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle' | 'highlight'>;
|
|
67
80
|
}
|
|
68
81
|
/**
|
|
69
82
|
* MenuButton UI component
|
|
70
83
|
*/
|
|
71
|
-
export declare const MenuButton: ({ className, disabled,
|
|
84
|
+
export declare const MenuButton: ({ className, disabled, iconName, iconOnly, id, isSplitButton, label, menuItems, menuPosition, onClick, size, statusDot, tally, testId, undefinedLabel, variant, ...props }: MenuButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
72
85
|
export {};
|
|
@@ -33,7 +33,7 @@ interface SplitButtonProps extends ComponentPropsWithoutRef<'span'> {
|
|
|
33
33
|
/**
|
|
34
34
|
* Which variant of button to render
|
|
35
35
|
*/
|
|
36
|
-
variant?: Extract<ButtonVariant, 'primary' | 'secondary'>;
|
|
36
|
+
variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'highlight'>;
|
|
37
37
|
}
|
|
38
38
|
/**
|
|
39
39
|
* A component used to render a button with a primary action and a menu of additional options
|
|
@@ -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-
|
|
6
|
+
* Generated: 2026-07-02T02:04:49.319Z
|
|
7
7
|
*/
|
|
8
8
|
import { customIcons } from './custom-icons';
|
|
9
9
|
export { customIcons };
|
|
@@ -1,16 +1,21 @@
|
|
|
1
|
-
import { HTMLAttributes } from 'react';
|
|
1
|
+
import { HTMLAttributes, ReactNode } from 'react';
|
|
2
2
|
import { Locale } from 'date-fns';
|
|
3
3
|
import { DateRange } from 'react-day-picker';
|
|
4
|
+
import { ValidationStatus } from '../../../libs/types/input-types';
|
|
4
5
|
import 'react-day-picker/dist/style.css';
|
|
5
6
|
import './datepicker.css';
|
|
6
|
-
type PresetType = 'today' | 'current-week' | 'current-month' | 'last-week' | 'last-month';
|
|
7
|
+
export type PresetType = 'today' | 'current-week' | 'current-month' | 'last-week' | 'last-month';
|
|
7
8
|
export interface CustomPresetConfig {
|
|
8
|
-
active?: boolean;
|
|
9
9
|
custom?: () => DateRange;
|
|
10
10
|
days?: number;
|
|
11
11
|
label: string;
|
|
12
12
|
type?: PresetType;
|
|
13
13
|
}
|
|
14
|
+
/**
|
|
15
|
+
* Converts a preset config to a DateRange. Use this alongside an external
|
|
16
|
+
* SegmentedButton, Select, or other control to compose preset date pickers.
|
|
17
|
+
*/
|
|
18
|
+
export declare const getPresetDateRange: (preset: CustomPresetConfig) => DateRange;
|
|
14
19
|
export interface DatepickerTranslationStrings {
|
|
15
20
|
clearButton?: string;
|
|
16
21
|
doneButton?: string;
|
|
@@ -21,6 +26,7 @@ export interface DatepickerTranslationStrings {
|
|
|
21
26
|
selectedDateRange?: string;
|
|
22
27
|
selectedStartDate?: string;
|
|
23
28
|
to?: string;
|
|
29
|
+
todayButton?: string;
|
|
24
30
|
}
|
|
25
31
|
/**
|
|
26
32
|
* Prop types for Datepicker.
|
|
@@ -61,6 +67,10 @@ export interface DatepickerProps extends DatepickerHTMLProps {
|
|
|
61
67
|
* Maximum selectable date.
|
|
62
68
|
*/
|
|
63
69
|
maxDate?: Date;
|
|
70
|
+
/**
|
|
71
|
+
* Helper text displayed below the input.
|
|
72
|
+
*/
|
|
73
|
+
message?: string | ReactNode;
|
|
64
74
|
/**
|
|
65
75
|
* Minimum selectable date.
|
|
66
76
|
*/
|
|
@@ -69,19 +79,10 @@ export interface DatepickerProps extends DatepickerHTMLProps {
|
|
|
69
79
|
* onChange handler
|
|
70
80
|
*/
|
|
71
81
|
onChange?: (value: DateRange | Date | undefined) => void;
|
|
72
|
-
/**
|
|
73
|
-
* Callback fired once on mount when an active preset is applied.
|
|
74
|
-
* Only fires if no initial value is provided and a preset has active: true.
|
|
75
|
-
*/
|
|
76
|
-
onInitialize?: (value: DateRange | Date | undefined) => void;
|
|
77
82
|
/**
|
|
78
83
|
* Placeholder text for the trigger button.
|
|
79
84
|
*/
|
|
80
85
|
placeholder?: string;
|
|
81
|
-
/**
|
|
82
|
-
* Optional preset date ranges (only available when hasDateRange is true).
|
|
83
|
-
*/
|
|
84
|
-
presets?: CustomPresetConfig[];
|
|
85
86
|
/**
|
|
86
87
|
* Is this field required?
|
|
87
88
|
*/
|
|
@@ -98,6 +99,14 @@ export interface DatepickerProps extends DatepickerHTMLProps {
|
|
|
98
99
|
* Translation strings for labels.
|
|
99
100
|
*/
|
|
100
101
|
translationStrings?: DatepickerTranslationStrings;
|
|
102
|
+
/**
|
|
103
|
+
* Validation message that takes priority over `message` when set.
|
|
104
|
+
*/
|
|
105
|
+
validationMessage?: string;
|
|
106
|
+
/**
|
|
107
|
+
* Validation status. Controls error/success styling and message display.
|
|
108
|
+
*/
|
|
109
|
+
validationStatus?: ValidationStatus;
|
|
101
110
|
/**
|
|
102
111
|
* Selected date or date range.
|
|
103
112
|
*/
|
|
@@ -106,5 +115,5 @@ export interface DatepickerProps extends DatepickerHTMLProps {
|
|
|
106
115
|
/**
|
|
107
116
|
* Datepicker UI component.
|
|
108
117
|
*/
|
|
109
|
-
export declare const Datepicker: ({ className, disabled, hasDateRange, id, inputWidth, label, locale, maxDate, minDate, onChange,
|
|
118
|
+
export declare const Datepicker: ({ className, disabled, hasDateRange, id, inputWidth, label, locale, maxDate, message, minDate, onChange, placeholder, required, showLabel, tooltipText, translationStrings: translationStringsProp, validationMessage, validationStatus, value, ...props }: DatepickerProps) => import("react/jsx-runtime").JSX.Element;
|
|
110
119
|
export {};
|
|
@@ -2,7 +2,7 @@
|
|
|
2
2
|
--pds-color-button-primary-background-hover
|
|
3
3
|
);--button-background-color-active:var(
|
|
4
4
|
--pds-color-button-primary-background-active
|
|
5
|
-
);--button-foreground-color:var(--pds-color-button-primary-foreground);--button-foreground-color-hover:var(--button-foreground-color);--button-border-color:var(--pds-color-button-primary-background-default);--button-border-color-hover:var(--pds-color-button-primary-background-hover);--button-border-color-active:var(--button-background-color-active);--button-box-shadow-active:var(--pds-elevation-button-primary-active);align-items:center;background-color:var(--button-background-color);border-color:var(--button-border-color);border-radius:var(--pds-border-radius-button);border-style:solid;border-width:var(--pds-border-width-default);color:var(--button-foreground-color);cursor:pointer;display:inline-flex;font-family:var(--pds-typography-ff-default);font-size:var(--button-font-size);font-weight:var(--pds-typography-fw-medium);gap:var(--button-gap-inline);height:var(--button-height);justify-content:center;line-height:1;max-height:var(--button-height);padding-block:0;padding-inline:var(--button-padding-inline);text-decoration:none;transition:var(--pds-animation-transition-button);white-space:nowrap}.pds-button:disabled{cursor:not-allowed;opacity:40%}.pds-button:hover:enabled,a.pds-button:hover{--button-background-color:var(--button-background-color-hover);--button-border-color:var(--button-border-color-hover);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:active:enabled,a.pds-button:active{--button-background-color:var(--button-background-color-active);--button-border-color:var(--button-border-color-active);box-shadow:var(--button-box-shadow-active);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px;transition:var(--pds-animation-transition-focus)}.pds-button__icon{flex-shrink:0}.pds-button--full-width{width:100%}.pds-button--xs{--button-font-size:var(--pds-typography-size-xs);--button-height:var(--pds-spacing-button-height-xs);--button-padding-inline:var(--pds-spacing-button-padding-inline-xs);--button-gap-inline:var(--pds-spacing-button-gap-inline-xs)}.pds-button--s{--button-font-size:var(--pds-typography-size-s);--button-height:var(--pds-spacing-button-height-s);--button-padding-inline:var(--pds-spacing-button-padding-inline-s);-button-gap-inline:var(--pds-spacing-button-gap-inline-s)}.pds-button--m{--button-font-size:var(--pds-typography-size-m);--button-height:var(--pds-spacing-button-height-m);--button-padding-inline:var(--pds-spacing-button-padding-inline-m);--button-gap-inline:var(--pds-spacing-button-gap-inline-m)}.pds-button--l{--button-font-size:var(--pds-typography-size-l);--button-height:var(--pds-spacing-button-height-l);--button-padding-inline:var(--pds-spacing-button-padding-inline-l);--button-gap-inline:var(--pds-spacing-button-gap-inline-l)}.pds-button--secondary{--button-background-color:var(
|
|
5
|
+
);--button-foreground-color:var(--pds-color-button-primary-foreground);--button-foreground-color-hover:var(--button-foreground-color);--button-border-color:var(--pds-color-button-primary-background-default);--button-border-color-hover:var(--pds-color-button-primary-background-hover);--button-border-color-active:var(--button-background-color-active);--button-box-shadow-active:var(--pds-elevation-button-primary-active);align-items:center;background-color:var(--button-background-color);border-color:var(--button-border-color);border-radius:var(--pds-border-radius-button);border-style:solid;border-width:var(--pds-border-width-default);color:var(--button-foreground-color);cursor:pointer;display:inline-flex;font-family:var(--pds-typography-ff-default);font-size:var(--button-font-size);font-weight:var(--pds-typography-fw-medium);gap:var(--button-gap-inline);height:var(--button-height);justify-content:center;line-height:1;max-height:var(--button-height);padding-block:0;padding-inline:var(--button-padding-inline);text-decoration:none;transition:var(--pds-animation-transition-button);white-space:nowrap}.pds-button:disabled{cursor:not-allowed;opacity:40%}.pds-button:hover:enabled,a.pds-button:hover{--button-background-color:var(--button-background-color-hover);--button-border-color:var(--button-border-color-hover);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:active:enabled,a.pds-button:active{--button-background-color:var(--button-background-color-active);--button-border-color:var(--button-border-color-active);box-shadow:var(--button-box-shadow-active);color:var(--button-foreground-color-hover);text-decoration:none}.pds-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:1px;transition:var(--pds-animation-transition-focus)}.pds-button__icon{flex-shrink:0}.pds-button--l .pds-button__icon:not(.pds-status-dot){height:var(--button-font-size);width:var(--button-font-size)}.pds-button__tally{flex-shrink:0}.pds-button--highlight .pds-button__tally,.pds-button--primary .pds-button__tally{box-shadow:0 0 0 1px hsla(0,0%,100%,.75)}.pds-button--xs .pds-status-dot{--dot-size:8px}.pds-button--s .pds-status-dot{--dot-size:10px}.pds-button--m .pds-status-dot{--dot-size:12px;margin-inline-end:2px}.pds-button--l .pds-status-dot{--dot-size:14px;margin-inline-end:4px}.pds-button--full-width{width:100%}.pds-button--xs{--button-font-size:var(--pds-typography-size-xs);--button-height:var(--pds-spacing-button-height-xs);--button-padding-inline:var(--pds-spacing-button-padding-inline-xs);--button-gap-inline:var(--pds-spacing-button-gap-inline-xs)}.pds-button--s{--button-font-size:var(--pds-typography-size-s);--button-height:var(--pds-spacing-button-height-s);--button-padding-inline:var(--pds-spacing-button-padding-inline-s);-button-gap-inline:var(--pds-spacing-button-gap-inline-s)}.pds-button--m{--button-font-size:var(--pds-typography-size-m);--button-height:var(--pds-spacing-button-height-m);--button-padding-inline:var(--pds-spacing-button-padding-inline-m);--button-gap-inline:var(--pds-spacing-button-gap-inline-m)}.pds-button--l{--button-font-size:var(--pds-typography-size-l);--button-height:var(--pds-spacing-button-height-l);--button-padding-inline:var(--pds-spacing-button-padding-inline-l);--button-gap-inline:var(--pds-spacing-button-gap-inline-l)}.pds-button--secondary{--button-background-color:var(
|
|
6
6
|
--pds-color-button-secondary-background-default
|
|
7
7
|
);--button-background-color-hover:var(
|
|
8
8
|
--pds-color-button-secondary-background-hover
|
|
@@ -44,13 +44,13 @@
|
|
|
44
44
|
--pds-color-button-brand-background-hover
|
|
45
45
|
);--button-background-color-active:var(
|
|
46
46
|
--pds-color-button-brand-background-active
|
|
47
|
-
);--button-box-shadow-active:var(--pds-elevation-button-brand-active);--button-foreground-color:var(--pds-color-button-brand-foreground);--button-border-color:var(--pds-color-button-brand-background-default);--button-border-color-hover:var(--pds-color-button-brand-background-hover);--button-border-color-active:var(--button-background-color-active)}.pds-button--highlight{--button-background-color:var(
|
|
48
|
-
--pds-color-button-highlight-background-default
|
|
49
|
-
);--button-background-color-hover:var(
|
|
47
|
+
);--button-box-shadow-active:var(--pds-elevation-button-brand-active);--button-foreground-color:var(--pds-color-button-brand-foreground);--button-border-color:var(--pds-color-button-brand-background-default);--button-border-color-hover:var(--pds-color-button-brand-background-hover);--button-border-color-active:var(--button-background-color-active)}.pds-button--highlight{--button-background-color:var(--pds-color-interactive-background-current);--button-background-color-hover:var(
|
|
50
48
|
--pds-color-button-highlight-background-hover
|
|
51
49
|
);--button-background-color-active:var(
|
|
52
50
|
--pds-color-button-highlight-background-active
|
|
53
|
-
);--button-box-shadow-active:var(--pds-elevation-button-highlight-active);--button-foreground-color:var(
|
|
51
|
+
);--button-box-shadow-active:var(--pds-elevation-button-highlight-active);--button-foreground-color:var(
|
|
52
|
+
--pds-color-interactive-background-current-foreground
|
|
53
|
+
);--button-border-color:var(--pds-color-interactive-background-current);--button-border-color-hover:var(
|
|
54
54
|
--pds-color-button-highlight-background-hover
|
|
55
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(
|
|
56
56
|
--pds-color-button-reverse-background-hover
|
|
@@ -68,4 +68,4 @@
|
|
|
68
68
|
--pds-color-button-reverse-secondary-foreground
|
|
69
69
|
);--button-border-color:var(--pds-color-button-reverse-secondary-border);--button-border-color-hover:var(--pds-color-button-reverse-secondary-border);--button-border-color-active:var(
|
|
70
70
|
--pds-color-button-reverse-secondary-border
|
|
71
|
-
)}.pds-button--inline{background-color:transparent;border:none;border-radius:0;color:var(--pds-color-interactive-link-default);height:unset;justify-content:unset;letter-spacing:0;max-height:unset;padding-inline:0;padding:0;transition:var(--pds-animation-transition-button)}.pds-button--inline:hover:enabled,a.pds-button--inline:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-button--inline:active:enabled,a.pds-button--inline:active{box-shadow:none;color:var(--pds-color-interactive-link-active)}.pds-button--loading{cursor:not-allowed}.pds-button--loading:active,.pds-button--loading:hover:enabled{--button-background-color:var(--pulse-regular-base-color);--button-border-color:var(--pulse-regular-base-color)}.pds-button--loading.pds-pulse{background-color:var(--pulse-regular-base-color);border-color:var(--pulse-regular-base-color);color:transparent}.pds-button--loading .pds-button__icon,.pds-button--loading .pds-button__working-indicator{opacity:0}.pds-button-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m);width:100%}@media (min-width:768px){.pds-button-group{column-gap:var(--pds-spacing-m);flex-direction:row;width:unset}.pds-button-group--lg{column-gap:var(--pds-spacing-l)}}
|
|
71
|
+
)}.pds-button--inline{background-color:transparent;border:none;border-radius:0;color:var(--pds-color-interactive-link-default);height:unset;justify-content:unset;letter-spacing:0;max-height:unset;padding-inline:0;padding:0;transition:var(--pds-animation-transition-button)}.pds-button--inline:hover:enabled,a.pds-button--inline:hover{color:var(--pds-color-interactive-link-hover);text-decoration:underline}.pds-button--inline:active:enabled,a.pds-button--inline:active{box-shadow:none;color:var(--pds-color-interactive-link-active)}.pds-button--loading{cursor:not-allowed}.pds-button--loading:active,.pds-button--loading:hover:enabled{--button-background-color:var(--pulse-regular-base-color);--button-border-color:var(--pulse-regular-base-color)}.pds-button--loading.pds-pulse{background-color:var(--pulse-regular-base-color);border-color:var(--pulse-regular-base-color);color:transparent}.pds-button--loading .pds-button__icon,.pds-button--loading .pds-button__tally,.pds-button--loading .pds-button__working-indicator{opacity:0}.pds-button-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m);width:100%}@media (min-width:768px){.pds-button-group{column-gap:var(--pds-spacing-m);flex-direction:row;width:unset}.pds-button-group--lg{column-gap:var(--pds-spacing-l)}}
|
|
@@ -1,3 +1,3 @@
|
|
|
1
|
-
.pds-datepicker{color:var(--pds-color-foreground-default);font-family:var(--pds-typography-ff-default)}.pds-datepicker__input-wrapper{column-gap:var(--pds-spacing-s);row-gap:var(--pds-spacing-xs);width:100%}.pds-
|
|
1
|
+
.pds-datepicker{color:var(--pds-color-foreground-default);font-family:var(--pds-typography-ff-default)}.pds-datepicker__input-wrapper{align-items:center;column-gap:var(--pds-spacing-s);display:flex;row-gap:var(--pds-spacing-xs);width:100%}.pds-datepicker__trigger{align-items:center;background:var(--pds-color-surface-default);border:var(--pds-border-width-default) solid var(--pds-color-border-input);border-radius:var(--pds-border-radius-input);color:var(--pds-color-foreground-default);cursor:pointer;display:flex;font-size:var(--pds-typography-size-s);gap:var(--pds-spacing-s);height:var(--pds-spacing-input-height-s);justify-content:space-between;min-width:10rem;padding:var(--pds-spacing-s);width:100%}.pds-datepicker__trigger:disabled{cursor:not-allowed}.pds-datepicker__trigger--open,.pds-datepicker__trigger:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:0;transition:var(--pds-animation-transition-focus)}.pds-datepicker__trigger-text{align-items:center;display:flex;flex:1;overflow:hidden;text-align:left;text-overflow:ellipsis;white-space:nowrap}.pds-datepicker__trigger-text--placeholder{color:var(--pds-color-input-placeholder)}.pds-datepicker__trigger-icon{color:var(--pds-color-foreground-default);flex-shrink:0;margin-block-start:-1px}.pds-datepicker__separator{padding-inline:var(--pds-spacing-s)}.pds-datepicker__popover{background-color:var(--pds-color-surface-default);border-radius:var(--pds-border-radius-container);box-shadow:var(--pds-elevation-overlay);overflow:hidden;z-index:var(--pds-z-index-overlay)}.pds-datepicker__calendar{background-color:var(--pds-color-surface-default);padding:var(--pds-spacing-s) var(--pds-spacing-s) var(--pds-spacing-xs)}.pds-datepicker__actions{display:flex;justify-content:space-between;padding:0 var(--pds-spacing-m) var(--pds-spacing-m) var(--pds-spacing-m)}.pds-datepicker__actions-group{display:flex;gap:var(--pds-spacing-s)}.pds-datepicker{--day-size:2rem}.pds-datepicker .rdp-month_grid{width:auto}.pds-datepicker .rdp-month_grid tr{border-block-end:none}.pds-datepicker .rdp-month_grid td,.pds-datepicker .rdp-month_grid th{padding:0}.pds-datepicker .rdp-root{--rdp-accent-color:var(--pds-color-datepicker-accent-foreground);--rdp-range_middle-background-color:var(
|
|
2
2
|
--pds-color-datepicker-range-background
|
|
3
|
-
);--rdp-today-color:var(--pds-color-foreground-default);--rdp-day-height:var(--day-size);--rdp-day-width:var(--day-size);--rdp-day_button-height:var(--day-size);--rdp-day_button-width:var(--day-size)}.pds-datepicker .rdp-month_caption{margin-block-end:var(--pds-spacing-
|
|
3
|
+
);--rdp-today-color:var(--pds-color-foreground-default);--rdp-day-height:var(--day-size);--rdp-day-width:calc(var(--day-size) + 4px);--rdp-day_button-height:var(--day-size);--rdp-day_button-width:var(--day-size)}.pds-datepicker .rdp-month_caption{margin-block-end:var(--pds-spacing-2xs)}.pds-datepicker .rdp-caption_label{color:var(--pds-color-foreground-default)}.pds-datepicker .rdp-caption_label,.pds-datepicker .rdp-weekday{font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-semibold)}.pds-datepicker .rdp-weekday{color:var(--pds-color-foreground-default-secondary);opacity:1}.pds-datepicker .rdp-week{border:var(--pds-spacing-3xs) solid var(--pds-color-surface-default)}.pds-datepicker .rdp-day_button{font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular)}.pds-datepicker .rdp-day_button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-datepicker .rdp-selected:not(.rdp-range_middle) .rdp-day_button{background-color:var(--pds-color-datepicker-selected-background);border-radius:50%;color:var(--pds-color-datepicker-selected-foreground)}.pds-datepicker .rdp-today .rdp-day_button{border-radius:50%;box-shadow:inset 0 0 0 var(--pds-border-width-default) var(--pds-color-datepicker-accent-foreground)}.pds-datepicker .rdp-today.rdp-selected:not(.rdp-range_middle) .rdp-day_button{box-shadow:inset 0 0 0 var(--pds-border-width-default) var(--pds-color-datepicker-selected-foreground)}.pds-datepicker .rdp-button_next,.pds-datepicker .rdp-button_previous{color:var(--pds-color-foreground-default-secondary)}.pds-datepicker .rdp-button_next:hover,.pds-datepicker .rdp-button_previous:hover{color:var(--pds-color-button-secondary-foreground-hover)}.pds-datepicker .rdp-button_next:focus-visible,.pds-datepicker .rdp-button_previous:focus-visible{border-radius:var(--pds-border-radius-button);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}@media (max-width:767px){.pds-datepicker__input-wrapper{align-items:stretch;flex-direction:column}.pds-datepicker .rdp-root .rdp-months{flex-direction:column}}
|