@pantheon-systems/pds-toolkit-react 2.0.0-beta.3 → 2.0.0-beta.5
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/StatusChecker/StatusChecker.d.ts +8 -1
- package/dist/components/buttons/Button/Button.d.ts +11 -1
- package/dist/components/buttons/ClipboardButton/ClipboardButton.d.ts +6 -1
- package/dist/components/buttons/IconButton/IconButton.d.ts +1 -1
- package/dist/components/buttons/SSOButton/SSOButton.d.ts +7 -1
- package/dist/components/buttons/UtilityButton/UtilityButton.d.ts +10 -2
- package/dist/components/icons/Icon/generated-icon-data.d.ts +1 -1
- package/dist/components/inputs/Datepicker/Datepicker.d.ts +18 -18
- package/dist/css/component-css/pds-button.css +1 -1
- package/dist/css/component-css/pds-datepicker.css +1 -1
- package/dist/css/component-css/pds-index.css +7 -7
- package/dist/css/component-css/pds-segmented-button.css +2 -2
- package/dist/css/component-css/pds-status-checker.css +1 -1
- package/dist/css/component-css/pds-table.css +3 -3
- package/dist/css/pds-components.css +7 -7
- package/dist/index.css +1 -1
- package/dist/index.js +743 -720
- package/dist/index.js.map +1 -1
- package/package.json +3 -2
|
@@ -13,8 +13,15 @@ export interface StatusCheckerProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
13
13
|
className?: string;
|
|
14
14
|
/**
|
|
15
15
|
* Custom width in rems for the component. This will override the default.
|
|
16
|
+
* Ignored when `displayType` is `'icon-button'`.
|
|
16
17
|
*/
|
|
17
18
|
componentWidth?: number;
|
|
19
|
+
/**
|
|
20
|
+
* `'icon-button'` renders a bordered, icon-only square matching
|
|
21
|
+
* `IconButton`. The label stays in the DOM, visually hidden, for the
|
|
22
|
+
* live region.
|
|
23
|
+
*/
|
|
24
|
+
displayType?: 'label' | 'icon-button';
|
|
18
25
|
/**
|
|
19
26
|
* Internationalization props for labels.
|
|
20
27
|
*/
|
|
@@ -38,4 +45,4 @@ export interface StatusCheckerProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
38
45
|
*/
|
|
39
46
|
state?: StatusCheckerState;
|
|
40
47
|
}
|
|
41
|
-
export declare const StatusChecker: ({ alignment, className, componentWidth, labelStrings, lastChecked, onCheck, state, ...props }: StatusCheckerProps) => import("react/jsx-runtime").JSX.Element;
|
|
48
|
+
export declare const StatusChecker: ({ alignment, className, componentWidth, displayType, labelStrings, lastChecked, onCheck, state, ...props }: StatusCheckerProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -21,6 +21,14 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
|
|
|
21
21
|
* Is the button disabled?
|
|
22
22
|
*/
|
|
23
23
|
disabled?: boolean;
|
|
24
|
+
/**
|
|
25
|
+
* Whether `isWorking` disables the button. Defaults to `true`, matching the
|
|
26
|
+
* one-off "action in flight" use case (e.g. a submit button mid-request).
|
|
27
|
+
* Set to `false` for an ongoing, interactive working state — such as a
|
|
28
|
+
* toggle that starts/stops a live process and must stay clickable while
|
|
29
|
+
* it runs.
|
|
30
|
+
*/
|
|
31
|
+
disableWhenWorking?: boolean;
|
|
24
32
|
/**
|
|
25
33
|
* How the button is displayed.
|
|
26
34
|
*/
|
|
@@ -42,7 +50,9 @@ interface ButtonProps extends ComponentPropsWithoutRef<'button'> {
|
|
|
42
50
|
*/
|
|
43
51
|
isSplitButton?: boolean;
|
|
44
52
|
/**
|
|
45
|
-
* Is the button in a working state?
|
|
53
|
+
* Is the button in a working state? Renders a leading spinner (colored and
|
|
54
|
+
* sized to match the button) while keeping the label and icon visible.
|
|
55
|
+
* Disables the button unless `disableWhenWorking` is set to `false`.
|
|
46
56
|
*/
|
|
47
57
|
isWorking?: boolean;
|
|
48
58
|
/**
|
|
@@ -1,4 +1,5 @@
|
|
|
1
1
|
import { ComponentPropsWithoutRef } from 'react';
|
|
2
|
+
import { IconButtonSize } from '../../buttons/IconButton/IconButton';
|
|
2
3
|
/**
|
|
3
4
|
* Prop types for ClipboardButton
|
|
4
5
|
*/
|
|
@@ -23,6 +24,10 @@ export interface ClipboardButtonProps extends ComponentPropsWithoutRef<'button'>
|
|
|
23
24
|
* Show a visible border around the button.
|
|
24
25
|
*/
|
|
25
26
|
hasBorder?: boolean;
|
|
27
|
+
/**
|
|
28
|
+
* Which size of button to render.
|
|
29
|
+
*/
|
|
30
|
+
size?: IconButtonSize;
|
|
26
31
|
/**
|
|
27
32
|
* Which variant of button to render.
|
|
28
33
|
*/
|
|
@@ -31,4 +36,4 @@ export interface ClipboardButtonProps extends ComponentPropsWithoutRef<'button'>
|
|
|
31
36
|
/**
|
|
32
37
|
* ClipboardButton UI component
|
|
33
38
|
*/
|
|
34
|
-
export declare const ClipboardButton: ({ ariaLabel, className, clipboardText, disabled, hasBorder, variant, ...props }: ClipboardButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
39
|
+
export declare const ClipboardButton: ({ ariaLabel, className, clipboardText, disabled, hasBorder, size, variant, ...props }: ClipboardButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -2,7 +2,7 @@ import React, { ComponentPropsWithoutRef, MouseEvent } from 'react';
|
|
|
2
2
|
import { ButtonType } from '../../../libs/types/custom-types';
|
|
3
3
|
import { PDSIcon } from '../../icons/Icon/Icon';
|
|
4
4
|
import './icon-button.css';
|
|
5
|
-
type IconButtonSize = 'xs' | 's' | 'm';
|
|
5
|
+
export type IconButtonSize = 'xs' | 's' | 'm';
|
|
6
6
|
interface IconButtonProps extends ComponentPropsWithoutRef<'button'> {
|
|
7
7
|
/**
|
|
8
8
|
* Aria-label attribute.
|
|
@@ -16,6 +16,12 @@ interface SSOButtonProps extends ComponentPropsWithoutRef<'button'> {
|
|
|
16
16
|
* Is the button disabled?
|
|
17
17
|
*/
|
|
18
18
|
disabled?: boolean;
|
|
19
|
+
/**
|
|
20
|
+
* Whether `isWorking` disables the button. Defaults to `true`. Set to
|
|
21
|
+
* `false` for an ongoing, interactive working state that must stay
|
|
22
|
+
* clickable while it runs.
|
|
23
|
+
*/
|
|
24
|
+
disableWhenWorking?: boolean;
|
|
19
25
|
/**
|
|
20
26
|
* Is the button in a working state?
|
|
21
27
|
*/
|
|
@@ -45,5 +51,5 @@ interface SSOButtonProps extends ComponentPropsWithoutRef<'button'> {
|
|
|
45
51
|
/**
|
|
46
52
|
* A Component used to render an SSO Button
|
|
47
53
|
*/
|
|
48
|
-
export declare const SSOButton: ({ buttonType, className, disabled, isWorking, label, onClick, platform, size, tooltipText, ...props }: SSOButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
54
|
+
export declare const SSOButton: ({ buttonType, className, disabled, disableWhenWorking, isWorking, label, onClick, platform, size, tooltipText, ...props }: SSOButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
49
55
|
export {};
|
|
@@ -17,6 +17,12 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
17
17
|
* Is the button disabled?
|
|
18
18
|
*/
|
|
19
19
|
disabled?: boolean;
|
|
20
|
+
/**
|
|
21
|
+
* Whether `isWorking` disables the button. Defaults to `true`. Set to
|
|
22
|
+
* `false` for an ongoing, interactive working state that must stay
|
|
23
|
+
* clickable while it runs.
|
|
24
|
+
*/
|
|
25
|
+
disableWhenWorking?: boolean;
|
|
20
26
|
/**
|
|
21
27
|
* Should the button have a border?
|
|
22
28
|
*/
|
|
@@ -42,7 +48,9 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
42
48
|
*/
|
|
43
49
|
isMonospace?: boolean;
|
|
44
50
|
/**
|
|
45
|
-
* Is the button in the process of performing a task
|
|
51
|
+
* Is the button in the process of performing a task? Renders a spinner in
|
|
52
|
+
* place of the icon, and disables the button unless `disableWhenWorking`
|
|
53
|
+
* is set to `false`.
|
|
46
54
|
*/
|
|
47
55
|
isWorking?: boolean;
|
|
48
56
|
/**
|
|
@@ -67,4 +75,4 @@ export interface UtilityButtonProps extends ComponentPropsWithoutRef<'div'> {
|
|
|
67
75
|
/**
|
|
68
76
|
* UtilityButton UI component
|
|
69
77
|
*/
|
|
70
|
-
export declare const UtilityButton: ({ buttonProps, className, disabled, hasBorder, iconName, iconPosition, isCritical, isLoading, isMonospace, isWorking, label, linkContent, onClick, tooltipText, ...props }: UtilityButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
78
|
+
export declare const UtilityButton: ({ buttonProps, className, disabled, disableWhenWorking, hasBorder, iconName, iconPosition, isCritical, isLoading, isMonospace, isWorking, label, linkContent, onClick, tooltipText, ...props }: UtilityButtonProps) => import("react/jsx-runtime").JSX.Element;
|
|
@@ -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-10-02T01:41:08.579Z
|
|
7
7
|
*/
|
|
8
8
|
import { customIcons } from './custom-icons';
|
|
9
9
|
export { customIcons };
|
|
@@ -204,10 +204,28 @@ interface DatepickerSharedProps extends DatepickerHTMLProps {
|
|
|
204
204
|
* Maximum selectable date.
|
|
205
205
|
*/
|
|
206
206
|
maxDate?: Date;
|
|
207
|
+
/**
|
|
208
|
+
* Helper text displayed below the input.
|
|
209
|
+
*/
|
|
210
|
+
message?: string | ReactNode;
|
|
207
211
|
/**
|
|
208
212
|
* Minimum selectable date.
|
|
209
213
|
*/
|
|
210
214
|
minDate?: Date;
|
|
215
|
+
/**
|
|
216
|
+
* Fired when the viewer toggles the `showTimeZoneSwitcher` control,
|
|
217
|
+
* reporting the newly selected zone. `timeZone` is the resolved IANA
|
|
218
|
+
* identifier to format your own UI in (`'UTC'`, or the viewer's own
|
|
219
|
+
* browser zone for the "Local" side); `mode` is which side was
|
|
220
|
+
* chosen. Called once per toggle, and only for a real viewer change — not
|
|
221
|
+
* when the `timeZone` prop changes underneath it. The switcher stays
|
|
222
|
+
* internally managed; mirror the zone into your own state from here (e.g.
|
|
223
|
+
* an Edge Logs table labelling its timestamp column to match the picker).
|
|
224
|
+
* `onChange` deliberately does *not* fire for a zone toggle, since the
|
|
225
|
+
* selected instant is unchanged. Has no effect unless
|
|
226
|
+
* `showTimeZoneSwitcher` (and therefore `showTime`) is set.
|
|
227
|
+
*/
|
|
228
|
+
onTimeZoneChange?: (timeZone: string, mode: 'local' | 'utc') => void;
|
|
211
229
|
/**
|
|
212
230
|
* Placeholder text for the trigger button.
|
|
213
231
|
*/
|
|
@@ -268,24 +286,6 @@ interface DatepickerSharedProps extends DatepickerHTMLProps {
|
|
|
268
286
|
* date. Has no effect unless `showTime` is also true.
|
|
269
287
|
*/
|
|
270
288
|
showTimeZoneSwitcher?: boolean;
|
|
271
|
-
/**
|
|
272
|
-
* Fired when the viewer toggles the `showTimeZoneSwitcher` control,
|
|
273
|
-
* reporting the newly selected zone. `timeZone` is the resolved IANA
|
|
274
|
-
* identifier to format your own UI in (`'UTC'`, or the viewer's own
|
|
275
|
-
* browser zone for the "Local" side); `mode` is which side was
|
|
276
|
-
* chosen. Called once per toggle, and only for a real viewer change — not
|
|
277
|
-
* when the `timeZone` prop changes underneath it. The switcher stays
|
|
278
|
-
* internally managed; mirror the zone into your own state from here (e.g.
|
|
279
|
-
* an Edge Logs table labelling its timestamp column to match the picker).
|
|
280
|
-
* `onChange` deliberately does *not* fire for a zone toggle, since the
|
|
281
|
-
* selected instant is unchanged. Has no effect unless
|
|
282
|
-
* `showTimeZoneSwitcher` (and therefore `showTime`) is set.
|
|
283
|
-
*/
|
|
284
|
-
onTimeZoneChange?: (timeZone: string, mode: 'local' | 'utc') => void;
|
|
285
|
-
/**
|
|
286
|
-
* Helper text displayed below the input.
|
|
287
|
-
*/
|
|
288
|
-
message?: string | ReactNode;
|
|
289
289
|
/**
|
|
290
290
|
* Whether the calendar footer includes its "Today" button. Defaults to
|
|
291
291
|
* `true`. Set to `false` to leave only the end-aligned buttons —
|
|
@@ -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--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(
|
|
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:has(>.pds-button__working-indicator){padding-inline-start:calc(var(--button-padding-inline) - var(--pds-spacing-4xs))}.pds-button__working-indicator{margin-inline-end:var(--pds-spacing-4xs)}.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
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@layer pds-v1, pds-v2;@layer pds-v2{.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{--day-size:1.75rem;--day-gap:4px;background-color:var(--pds-color-surface-default);border-radius:var(--pds-border-radius-container);box-shadow:var(--pds-elevation-overlay);display:flex;overflow-x:hidden;overflow-y:auto;z-index:var(--pds-z-index-overlay)}.pds-datepicker__presets{border-inline-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);display:flex;flex-direction:column;justify-content:space-between;min-width:
|
|
1
|
+
@layer pds-v1, pds-v2;@layer pds-v2{.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{--day-size:1.75rem;--day-gap:4px;background-color:var(--pds-color-surface-default);border-radius:var(--pds-border-radius-container);box-shadow:var(--pds-elevation-overlay);display:flex;overflow-x:hidden;overflow-y:auto;z-index:var(--pds-z-index-overlay)}.pds-datepicker__presets{border-inline-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);display:flex;flex-direction:column;justify-content:space-between;min-width:12.5rem;padding-block:var(--pds-spacing-s);padding-inline:var(--pds-spacing-xs);width:12.5rem}.pds-datepicker__presets--collapsed{border-inline-end:none}.pds-datepicker__calendar-wrapper{flex-basis:0;flex-shrink:0;overflow:hidden;transition:flex-basis .3s cubic-bezier(.2,0,0,1)}.pds-datepicker__calendar-wrapper-inner{display:flex;flex-direction:column;height:100%;min-height:0}.pds-datepicker__preset-list{display:flex;flex-direction:column;gap:var(--pds-spacing-4xs);min-height:0;overflow-y:auto;padding:var(--pds-border-width-outline)}.pds-datepicker__preset-item{align-items:center;background:none;border:none;border-radius:var(--pds-border-radius-container);color:var(--pds-color-dropdown-foreground);cursor:pointer;display:flex;font-size:var(--pds-typography-size-s);justify-content:space-between;min-height:var(--pds-spacing-2xl);padding-block:var(--pds-spacing-2xs);padding-inline:var(--pds-spacing-xs);text-align:start}.pds-datepicker__preset-item:hover{background-color:var(--pds-color-dropdown-item-background-hover)}.pds-datepicker__preset-item:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-datepicker__preset-item--active{font-weight:var(--pds-typography-fw-medium)}.pds-datepicker__preset-item--active,.pds-datepicker__preset-item--active:hover{background-color:var(--pds-color-interactive-background-active)}.pds-datepicker__preset-divider{background-color:var(--pds-color-dropdown-separator);height:var(--pds-border-width-default);margin-block:var(--pds-spacing-2xs)}.pds-datepicker__calendar{background-color:var(--pds-color-surface-default);display:flex;flex-direction:column;gap:var(--pds-spacing-m);max-height:100%;min-height:0;padding:var(--pds-spacing-s) var(--pds-spacing-s) var(--pds-spacing-s)}.pds-datepicker__nav{align-items:center;display:flex;justify-content:space-between;margin-block-end:var(--pds-spacing-s)}.pds-datepicker__nav-title{color:var(--pds-color-foreground-default);flex:1;font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-semibold);text-align:center}.pds-datepicker__nav-button{align-items:center;background:none;border:none;border-radius:var(--pds-border-radius-button);color:var(--pds-color-foreground-default-secondary);cursor:pointer;display:flex;justify-content:center;padding:var(--pds-spacing-2xs)}.pds-datepicker__nav-button:hover:enabled{background-color:var(--pds-color-button-subtle-background-hover);color:var(--pds-color-button-secondary-foreground-hover)}.pds-datepicker__nav-button:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-datepicker__nav-button:disabled{cursor:not-allowed;opacity:40%}.pds-datepicker__nav-button-spacer{visibility:hidden}.pds-datepicker__grids{display:flex;flex:1 1 auto;gap:var(--pds-spacing-l);min-height:0;overflow-y:auto}.pds-datepicker__actions,.pds-datepicker__footer-note,.pds-datepicker__time-section{flex-shrink:0}.pds-datepicker__month{flex:1}.pds-datepicker__grid{border-collapse:collapse;margin-inline:auto;width:auto}.pds-datepicker__grid th{padding:0}.pds-datepicker__grid tr{border-block-end:none}.pds-datepicker__weekday{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-semibold);height:var(--day-size);text-align:center}.pds-datepicker__cell{padding-block:3px;padding-inline:0;position:relative;text-align:center;width:calc(var(--day-size) + var(--day-gap))}.pds-datepicker__day{align-items:center;border-radius:50%;cursor:pointer;display:flex;font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular);height:var(--day-size);justify-content:center;outline:none;position:relative;width:var(--day-size);z-index:0}.pds-datepicker__day[hidden]{display:none}.pds-datepicker__day:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-datepicker__day--today{box-shadow:inset 0 0 0 var(--pds-border-width-default) var(--pds-color-datepicker-accent-foreground)}.pds-datepicker__cell--in-range{background-clip:content-box;background-color:var(--pds-color-interactive-background-selected)}.pds-datepicker__cell--range-start{border-end-start-radius:calc(var(--day-size)/2);border-start-start-radius:calc(var(--day-size)/2)}.pds-datepicker__cell--range-end{border-end-end-radius:calc(var(--day-size)/2);border-start-end-radius:calc(var(--day-size)/2);padding-inline-end:var(--day-gap)}.pds-datepicker__day--selected{background-color:var(--pds-color-datepicker-selected-background);color:var(--pds-color-datepicker-selected-foreground)}.pds-datepicker__day--today.pds-datepicker__day--selected{box-shadow:inset 0 0 0 var(--pds-border-width-default) var(--pds-color-datepicker-selected-foreground)}.pds-datepicker__day--disabled,.pds-datepicker__day--unavailable{cursor:not-allowed;opacity:40%}.pds-datepicker__time-section{border-block-start:var(--pds-border-width-default) solid var(--pds-color-border-default);display:flex;flex-direction:column;gap:var(--pds-spacing-s);padding-block-start:var(--pds-spacing-m)}.pds-datepicker__timezone-switcher{align-items:center;display:flex;gap:var(--pds-spacing-s)}.pds-datepicker__presets .pds-datepicker__timezone-switcher{border-block-start:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);gap:var(--pds-spacing-m);margin-block-start:var(--pds-spacing-2xs);margin-inline:var(--pds-border-width-outline);padding-block-start:var(--pds-spacing-s);padding-inline:var(--pds-spacing-xs)}.pds-datepicker__timezone-switcher-label{color:var(--pds-color-foreground-default);font-size:var(--pds-typography-size-input-label);font-weight:var(--pds-typography-fw-medium);white-space:nowrap}.pds-datepicker__time-fields{display:flex;gap:var(--pds-spacing-l)}.pds-datepicker__time-fields>*{flex:1}.pds-datepicker__footer-note{color:var(--pds-color-foreground-default-secondary);font-size:var(--pds-typography-size-s)}.pds-datepicker__actions{display:flex;padding:var(--pds-spacing-xs) var(--pds-spacing-4xs) var(--pds-spacing-3xs)}.pds-datepicker__actions-group{display:flex;gap:var(--pds-spacing-s);margin-inline-start:auto}@media (max-width:767px){.pds-datepicker__input-wrapper{align-items:stretch;flex-direction:column}.pds-datepicker__grids{flex-direction:column;flex-shrink:0;overflow-y:visible}.pds-datepicker__time-fields{flex-direction:column}.pds-datepicker__popover{flex-direction:column;max-width:calc(100vw - var(--pds-spacing-l)*2)}.pds-datepicker__presets{border-block-end:var(--pds-border-width-default) solid var(--pds-color-dropdown-separator);border-inline-end:none;min-width:0;width:100%}.pds-datepicker__calendar-wrapper{flex-basis:auto;transition:none;width:100%}.pds-datepicker__calendar-wrapper--collapsed{display:none}.pds-datepicker__calendar-wrapper-inner{width:100%}}}
|