@pantheon-systems/pds-toolkit-react 2.0.0-alpha.15 → 2.0.0-alpha.16

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (31) hide show
  1. package/dist/components/ComparisonList/ComparisonList.d.ts +6 -1
  2. package/dist/components/Tabs/Tabs.d.ts +6 -1
  3. package/dist/components/icons/Icon/Icon.d.ts +2 -2
  4. package/dist/components/icons/PaymentIcon/PaymentIcon.d.ts +7 -3
  5. package/dist/components/icons/PlatformIcon/PlatformIcon.d.ts +6 -6
  6. package/dist/components/navigation/TabMenu/TabMenu.d.ts +6 -1
  7. package/dist/components/{Pagination → pagination/Pagination}/Pagination.d.ts +7 -2
  8. package/dist/components/pagination/PaginationCompact/PaginationCompact.d.ts +49 -0
  9. package/dist/components/pagination/PaginationMini/PaginationMini.d.ts +55 -0
  10. package/dist/css/component-css/pds-card-select-group.css +1 -1
  11. package/dist/css/component-css/pds-combobox.css +1 -1
  12. package/dist/css/component-css/pds-comparison-list.css +1 -1
  13. package/dist/css/component-css/pds-index.css +7 -5
  14. package/dist/css/component-css/pds-pagination-compact.css +1 -0
  15. package/dist/css/component-css/pds-pagination-mini.css +3 -0
  16. package/dist/css/component-css/pds-pagination.css +1 -1
  17. package/dist/css/component-css/pds-payment-icon.css +1 -1
  18. package/dist/css/component-css/pds-platform-icon.css +1 -1
  19. package/dist/css/component-css/pds-radio-group.css +1 -1
  20. package/dist/css/component-css/pds-select.css +1 -1
  21. package/dist/css/component-css/pds-tab-menu.css +2 -2
  22. package/dist/css/component-css/pds-tabs.css +1 -1
  23. package/dist/css/pds-components.css +7 -5
  24. package/dist/css/pds-core.css +1 -1
  25. package/dist/index.css +1 -1
  26. package/dist/index.d.ts +9 -0
  27. package/dist/index.js +4406 -3292
  28. package/dist/index.js.map +1 -1
  29. package/dist/index.source.d.ts +3 -1
  30. package/package.json +1 -1
  31. /package/dist/components/{Pagination → pagination/Pagination}/usePagination.d.ts +0 -0
package/dist/components/ComparisonList/ComparisonList.d.ts CHANGED
@@ -9,6 +9,7 @@ export interface ListItems {
9
9
  text: string;
10
10
  type: 'included' | 'notIncluded' | 'addon';
11
11
  }
12
+ export type ComparisonListSize = 's' | 'm';
12
13
  export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
13
14
  /**
14
15
  * Additional class names
@@ -34,6 +35,10 @@ export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
34
35
  * Whether to show the border on list items.
35
36
  */
36
37
  showBorder?: boolean;
38
+ /**
39
+ * Size variant.
40
+ */
41
+ size?: ComparisonListSize;
37
42
  /**
38
43
  * Icon labels
39
44
  */
@@ -42,5 +47,5 @@ export interface ComparisonListProps extends ComponentPropsWithoutRef<'div'> {
42
47
  /**
43
48
  * ComparisonList UI component
44
49
  */
45
- export declare const ComparisonList: ({ className, listItems, listLabel, moreLink, renderTypeLabels, showBorder, typeLabels, ...props }: ComparisonListProps) => import("react/jsx-runtime").JSX.Element;
50
+ export declare const ComparisonList: ({ className, listItems, listLabel, moreLink, renderTypeLabels, showBorder, size, typeLabels, ...props }: ComparisonListProps) => import("react/jsx-runtime").JSX.Element;
46
51
  export {};
package/dist/components/Tabs/Tabs.d.ts CHANGED
@@ -30,6 +30,7 @@ interface Tabs {
30
30
  type: 'neutral' | 'critical' | 'warning' | 'info' | 'success';
31
31
  };
32
32
  }
33
+ export type TabsSize = 's' | 'm';
33
34
  interface TabsProps extends ComponentPropsWithoutRef<'div'> {
34
35
  /**
35
36
  * Sets tabset aria label
@@ -51,6 +52,10 @@ interface TabsProps extends ComponentPropsWithoutRef<'div'> {
51
52
  * Sets currently selected tab using a zero-based index
52
53
  */
53
54
  selectedTab?: number;
55
+ /**
56
+ * Size of the tabs.
57
+ */
58
+ size?: TabsSize;
54
59
  /**
55
60
  * Array of objects for tab data
56
61
  */
@@ -59,5 +64,5 @@ interface TabsProps extends ComponentPropsWithoutRef<'div'> {
59
64
  /**
60
65
  * Tabs UI component
61
66
  */
62
- export declare const Tabs: ({ ariaLabel, className, defaultSelected, onActiveTabChange, selectedTab, tabs, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
67
+ export declare const Tabs: ({ ariaLabel, className, defaultSelected, onActiveTabChange, selectedTab, size, tabs, ...props }: TabsProps) => import("react/jsx-runtime").JSX.Element;
63
68
  export {};
package/dist/components/icons/Icon/Icon.d.ts CHANGED
@@ -22,7 +22,7 @@ export interface IconProps extends ComponentPropsWithoutRef<'svg'> {
22
22
  /**
23
23
  * Which size of icon to render
24
24
  */
25
- iconSize?: IconSize;
25
+ size?: IconSize;
26
26
  /**
27
27
  * Vertical align value
28
28
  */
@@ -31,4 +31,4 @@ export interface IconProps extends ComponentPropsWithoutRef<'svg'> {
31
31
  /**
32
32
  * A component used to display an icon.
33
33
  */
34
- export declare const Icon: ({ className, display, iconName, iconSize, style, verticalAlign, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
34
+ export declare const Icon: ({ className, display, iconName, size, style, verticalAlign, ...props }: IconProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/icons/PaymentIcon/PaymentIcon.d.ts CHANGED
@@ -1,6 +1,7 @@
1
1
  import { ComponentPropsWithoutRef } from 'react';
2
2
  import './payment-icon.css';
3
- type PaymentType = 'visa' | 'mastercard' | 'amex' | 'discover' | 'generic';
3
+ export type PaymentSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
4
+ export type PaymentType = 'visa' | 'mastercard' | 'amex' | 'discover' | 'generic';
4
5
  /**
5
6
  * Prop types for PaymentIcon
6
7
  */
@@ -13,9 +14,12 @@ export interface PaymentIconProps extends ComponentPropsWithoutRef<'div'> {
13
14
  * The type of payment icon to display.
14
15
  */
15
16
  paymentType: PaymentType;
17
+ /**
18
+ * Which size of icon to render
19
+ */
20
+ size?: PaymentSize;
16
21
  }
17
22
  /**
18
23
  * PaymentIcon UI component
19
24
  */
20
- export declare const PaymentIcon: ({ className, paymentType, ...props }: PaymentIconProps) => import("react/jsx-runtime").JSX.Element;
21
- export {};
25
+ export declare const PaymentIcon: ({ className, paymentType, size, ...props }: PaymentIconProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/icons/PlatformIcon/PlatformIcon.d.ts CHANGED
@@ -1,16 +1,16 @@
1
1
  import { ComponentPropsWithoutRef } from 'react';
2
2
  import './platform-icon.css';
3
- type PlatformType = 'drupal' | 'drupal7' | 'front-end-sites' | 'gatsby' | 'gatsby-wp' | 'google' | 'import-custom' | 'microsoft' | 'next' | 'next-drupal' | 'next-wp' | 'splunk' | 'sumo-logic' | 'wordpress';
4
- interface PlatformIconProps extends ComponentPropsWithoutRef<'div'> {
3
+ export type PlatformSize = 'xs' | 's' | 'm' | 'l' | 'xl' | '2xl' | '3xl';
4
+ export type PlatformType = 'drupal' | 'drupal7' | 'front-end-sites' | 'gatsby' | 'gatsby-wp' | 'google' | 'import-custom' | 'microsoft' | 'next' | 'next-drupal' | 'next-wp' | 'splunk' | 'sumo-logic' | 'wordpress';
5
+ export interface PlatformIconProps extends ComponentPropsWithoutRef<'div'> {
5
6
  className?: string;
7
+ platformType: PlatformType;
6
8
  /**
7
9
  * Which size of icon to render
8
10
  */
9
- iconSize?: 'm' | 'l' | 'xl' | '2xl';
10
- platformType: PlatformType;
11
+ size?: PlatformSize;
11
12
  }
12
13
  /**
13
14
  * PlatformIcon UI component
14
15
  */
15
- export declare const PlatformIcon: ({ className, iconSize, platformType, ...props }: PlatformIconProps) => import("react/jsx-runtime").JSX.Element;
16
- export {};
16
+ export declare const PlatformIcon: ({ className, platformType, size, ...props }: PlatformIconProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/navigation/TabMenu/TabMenu.d.ts CHANGED
@@ -19,6 +19,7 @@ export interface TabMenuItemProps extends NavigationItem {
19
19
  */
20
20
  promoteActiveChildLink?: boolean;
21
21
  }
22
+ export type TabMenuSize = 's' | 'm';
22
23
  /**
23
24
  * Prop types for TabMenu.
24
25
  */
@@ -35,9 +36,13 @@ export interface TabMenuProps extends ComponentPropsWithoutRef<'nav'> {
35
36
  * Menu items to render.
36
37
  */
37
38
  menuItems?: TabMenuItemProps[];
39
+ /**
40
+ * Size of the tab menu items.
41
+ */
42
+ size?: TabMenuSize;
38
43
  }
39
44
  /**
40
45
  * TabMenu UI component.
41
46
  */
42
- export declare const TabMenu: ({ ariaLabel, className, menuItems, ...props }: TabMenuProps) => import("react/jsx-runtime").JSX.Element;
47
+ export declare const TabMenu: ({ ariaLabel, className, menuItems, size, ...props }: TabMenuProps) => import("react/jsx-runtime").JSX.Element;
43
48
  export {};
package/dist/components/{Pagination → pagination/Pagination}/Pagination.d.ts RENAMED
@@ -1,6 +1,7 @@
1
1
  import { ComponentPropsWithoutRef } from 'react';
2
- import { HeadingLevelCommon } from '../../libs/types/custom-types';
2
+ import { HeadingLevelCommon } from '../../../libs/types/custom-types';
3
3
  import './pagination.css';
4
+ export type PaginationSize = 's' | 'm';
4
5
  /**
5
6
  * Prop types for Pagination
6
7
  */
@@ -43,6 +44,10 @@ export interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {
43
44
  * For example: `onPageChange={(page) => setCurrentPage(page)}`
44
45
  */
45
46
  onPageChange?: (page: number) => void;
47
+ /**
48
+ * Size of the pagination items.
49
+ */
50
+ size?: PaginationSize;
46
51
  /**
47
52
  * Total number of items to paginate.
48
53
  */
@@ -51,4 +56,4 @@ export interface PaginationProps extends ComponentPropsWithoutRef<'nav'> {
51
56
  /**
52
57
  * Pagination UI component
53
58
  */
54
- export declare const Pagination: ({ bufferCount, className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, totalItemCount, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
59
+ export declare const Pagination: ({ bufferCount, className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, size, totalItemCount, ...props }: PaginationProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/pagination/PaginationCompact/PaginationCompact.d.ts ADDED
@@ -0,0 +1,49 @@
1
+ import { ComponentPropsWithoutRef } from 'react';
2
+ import { HeadingLevelCommon } from '../../../libs/types/custom-types';
3
+ import './pagination-compact.css';
4
+ /**
5
+ * Prop types for PaginationCompact
6
+ */
7
+ export interface PaginationCompactProps extends ComponentPropsWithoutRef<'nav'> {
8
+ /**
9
+ * Additional class names.
10
+ */
11
+ className?: string;
12
+ /**
13
+ * Current page number.
14
+ */
15
+ currentPage: number;
16
+ /**
17
+ * Heading level. Defaults to `h2`.
18
+ */
19
+ headingLevel?: HeadingLevelCommon;
20
+ /**
21
+ * Heading text for the pagination component. Will only be accessible to screen readers.
22
+ */
23
+ headingText?: string;
24
+ /**
25
+ * Number of items per page.
26
+ */
27
+ itemsPerPage?: number;
28
+ /**
29
+ * Translatable label strings.
30
+ */
31
+ labelStrings?: {
32
+ next: string;
33
+ of: string;
34
+ pageSelect: string;
35
+ previous: string;
36
+ };
37
+ /**
38
+ * Callback to handle page change.
39
+ */
40
+ onPageChange?: (page: number) => void;
41
+ /**
42
+ * Total number of items to paginate.
43
+ */
44
+ totalItemCount: number;
45
+ }
46
+ /**
47
+ * PaginationCompact UI component — page selector dropdown with previous/next controls.
48
+ */
49
+ export declare const PaginationCompact: ({ className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, onPageChange, totalItemCount, ...props }: PaginationCompactProps) => import("react/jsx-runtime").JSX.Element;
package/dist/components/pagination/PaginationMini/PaginationMini.d.ts ADDED
@@ -0,0 +1,55 @@
1
+ import { ComponentPropsWithoutRef } from 'react';
2
+ import { HeadingLevelCommon } from '../../../libs/types/custom-types';
3
+ import './pagination-mini.css';
4
+ /**
5
+ * Prop types for PaginationMini
6
+ */
7
+ export interface PaginationMiniProps extends ComponentPropsWithoutRef<'nav'> {
8
+ /**
9
+ * Additional class names.
10
+ */
11
+ className?: string;
12
+ /**
13
+ * Current page number.
14
+ */
15
+ currentPage: number;
16
+ /**
17
+ * Heading level. Defaults to `h2`.
18
+ */
19
+ headingLevel?: HeadingLevelCommon;
20
+ /**
21
+ * Heading text for the pagination component. Will only be accessible to screen readers.
22
+ */
23
+ headingText?: string;
24
+ /**
25
+ * Number of items per page.
26
+ */
27
+ itemsPerPage?: number;
28
+ /**
29
+ * Translatable label strings.
30
+ */
31
+ labelStrings?: {
32
+ next: string;
33
+ previous: string;
34
+ };
35
+ /**
36
+ * Title of the next page. Displayed as the clickable label on the next button.
37
+ */
38
+ nextPage?: string;
39
+ /**
40
+ * Callback to handle page change.
41
+ */
42
+ onPageChange?: (page: number) => void;
43
+ /**
44
+ * Title of the previous page. Displayed as the clickable label on the previous button.
45
+ */
46
+ previousPage?: string;
47
+ /**
48
+ * Total number of items to paginate.
49
+ */
50
+ totalItemCount: number;
51
+ }
52
+ /**
53
+ * PaginationMini UI component — previous/next navigation with page labels.
54
+ */
55
+ export declare const PaginationMini: ({ className, currentPage, headingLevel, headingText, itemsPerPage, labelStrings, nextPage, onPageChange, previousPage, totalItemCount, ...props }: PaginationMiniProps) => import("react/jsx-runtime").JSX.Element;
package/dist/css/component-css/pds-card-select-group.css CHANGED
@@ -1 +1 @@
1
- .pds-card-select-group{border:none;color:var(--pds-color-fg-default);font-family:var(--pds-typography-ff-default);margin-inline:0;padding:0;padding-block-start:var(--pds-spacing-3xs)}.pds-card-select-group__legend{display:block;font-size:var(--pds-typography-size-l);font-weight:var(--pds-typography-fw-semibold);margin-block-end:var(--pds-spacing-s);text-align:left}.pds-card-select-group__legend--center{text-align:center}.pds-card-select-group__option input[type=radio]{appearance:none}.pds-card-select-group__option-label{background-color:var(--pds-color-card-background);border-radius:var(--pds-border-radius-card);box-shadow:var(--pds-elevation-raised);column-gap:var(--pds-spacing-s);display:inline-flex;font-size:var(--pds-typography-size-l);font-weight:var(--pds-typography-fw-semibold);height:100%;margin-block-end:0;padding:var(--pds-spacing-m);width:100%}.pds-card-select-group__option-label--selected,.pds-card-select-group__option-label:hover{background-color:var(--pds-color-interactive-background-hover);cursor:pointer}.pds-card-select-group__option-icon{color:var(--pds-color-border-input)}.pds-card-select-group__option-icon--selected{color:var(--pds-color-status-success-foreground)}.pds-card-select-group__option-description{color:var(--pds-color-fg-default-secondary);font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-regular);line-height:var(--pds-typography-lh-m);margin-block-start:var(--pds-spacing-3xs)}
1
+ .pds-card-select-group{border:none;color:var(--pds-color-fg-default);font-family:var(--pds-typography-ff-default);margin-inline:0;padding:0;padding-block-start:var(--pds-spacing-3xs)}.pds-card-select-group__legend{display:block;font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-semibold);margin-block-end:var(--pds-spacing-s);text-align:left}.pds-card-select-group__legend--center{text-align:center}.pds-card-select-group__option input[type=radio]{appearance:none}.pds-card-select-group__option-label{background-color:var(--pds-color-card-background);border-radius:var(--pds-border-radius-card);box-shadow:var(--pds-elevation-raised);column-gap:var(--pds-spacing-xs);display:inline-flex;font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-semibold);height:100%;margin-block-end:0;padding:var(--pds-spacing-m);width:100%}.pds-card-select-group__option-label--selected,.pds-card-select-group__option-label:hover{background-color:var(--pds-color-interactive-background-hover);cursor:pointer}.pds-card-select-group__option-icon{color:var(--pds-color-border-input)}.pds-card-select-group__option-icon--selected{color:var(--pds-color-status-success-foreground)}.pds-card-select-group__option-description{color:var(--pds-color-fg-default-secondary);font-size:var(--pds-typography-size-s);font-weight:var(--pds-typography-fw-regular);line-height:var(--pds-typography-lh-m);margin-block-start:var(--pds-spacing-3xs)}
package/dist/css/component-css/pds-combobox.css CHANGED
@@ -1 +1 @@
1
- .pds-combobox{position:relative}.pds-combobox__input-wrapper{align-items:center;background-color:var(--pds-color-bg-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{border-color:var(--pds-color-interactive-focus);outline:none;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--l .pds-combobox__input-wrapper{gap:var(--pds-spacing-s);height:var(--pds-spacing-input-height-l);padding-inline:var(--pds-spacing-s)}.pds-combobox--l .pds-combobox__input,.pds-combobox--l .pds-dropdown__item{font-size:var(--pds-typography-size-m)}.pds-combobox--l .pds-dropdown__item{padding-block:var(--pds-spacing-s)}.pds-combobox--l .pds-input-label{font-size:var(--pds-typography-size-s);margin-block-end:var(--pds-spacing-xs)}.pds-combobox--l .pds-input-message{font-size:var(--pds-typography-size-s);margin-block-start:var(--pds-spacing-xs)}.pds-combobox__input{background-color:transparent;border:none;caret-color:var(--pds-color-fg-default);color:var(--pds-color-fg-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);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-default) solid var(--pds-color-interactive-focus)}.pds-combobox__trigger-icon{color:var(--pds-color-fg-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--l .pds-combobox__trigger-icon.pds-icon--m,.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}.pds-combobox__dropdown:focus-visible{outline:none}.pds-combobox__options{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.pds-combobox__loading{color:var(--pds-color-fg-default);font-size:var(--pds-typography-size-m);padding:var(--pds-spacing-m)}
1
+ .pds-combobox{position:relative}.pds-combobox__input-wrapper{align-items:center;background-color:var(--pds-color-bg-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{border-color:var(--pds-color-interactive-focus);outline:none;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--l .pds-combobox__input-wrapper{gap:var(--pds-spacing-s);height:var(--pds-spacing-input-height-l);padding-inline:var(--pds-spacing-s)}.pds-combobox--l .pds-combobox__input,.pds-combobox--l .pds-dropdown__item{font-size:var(--pds-typography-size-m)}.pds-combobox--l .pds-dropdown__item{padding-block:var(--pds-spacing-s)}.pds-combobox--l .pds-input-label{font-size:var(--pds-typography-size-s);margin-block-end:var(--pds-spacing-xs)}.pds-combobox--l .pds-input-message{font-size:var(--pds-typography-size-s);margin-block-start:var(--pds-spacing-xs)}.pds-combobox__input{background-color:transparent;border:none;caret-color:var(--pds-color-fg-default);color:var(--pds-color-fg-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-default) solid var(--pds-color-interactive-focus)}.pds-combobox__trigger-icon{color:var(--pds-color-fg-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--l .pds-combobox__trigger-icon.pds-icon--m,.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}.pds-combobox__dropdown:focus-visible{outline:none}.pds-combobox__options{display:flex;flex-direction:column;list-style:none;margin:0;padding:0}.pds-combobox__loading{color:var(--pds-color-fg-default);font-size:var(--pds-typography-size-m);padding:var(--pds-spacing-m)}
package/dist/css/component-css/pds-comparison-list.css CHANGED
@@ -1 +1 @@
1
- .pds-comparison-list{color:var(--pds-color-fg-default);font-family:var(--pds-typography-ff-default)}.pds-comparison-list__intro{font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-bold);margin-block-end:var(--pds-spacing-xl)}.pds-comparison-list__list{all:unset;display:flex;flex-direction:column;list-style-type:none;row-gap:var(--pds-spacing-m)}.pds-comparison-list__list-item{border-bottom:var(--pds-border-width-default) solid var(--pds-color-border-default);column-gap:var(--pds-spacing-s);display:grid;font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-m);grid-template-columns:1rem auto;padding-block-end:var(--pds-spacing-s)}.pds-comparison-list__list-item--notIncluded{color:var(--pds-color-fg-default-secondary)}.pds-comparison-list__item-icon-wrapper{position:relative}.pds-comparison-list__item-icon{position:absolute;top:1px}.pds-comparison-list__more-link{margin-block-start:var(--pds-spacing-l)}.pds-comparison-list--no-border .pds-comparison-list__list-item{border-bottom:none}
1
+ .pds-comparison-list{--list-col-gap:var(--pds-spacing-xs);--list-font-size:var(--pds-typography-size-s);--list-icon-col-width:var(--pds-typography-size-s);--list-padding-block-end:var(--pds-spacing-xs);--list-row-gap:var(--pds-spacing-s);color:var(--pds-color-fg-default);font-family:var(--pds-typography-ff-default)}.pds-comparison-list--m{--list-col-gap:var(--pds-spacing-s);--list-font-size:var(--pds-typography-size-m);--list-icon-col-width:var(--pds-typography-size-m);--list-padding-block-end:var(--pds-spacing-s);--list-row-gap:var(--pds-spacing-m)}.pds-comparison-list__intro{font-size:var(--list-font-size);font-weight:var(--pds-typography-fw-bold);margin-block-end:var(--pds-spacing-xl)}.pds-comparison-list__list{all:unset;display:flex;flex-direction:column;list-style-type:none;row-gap:var(--list-row-gap)}.pds-comparison-list__list-item{border-bottom:var(--pds-border-width-default) solid var(--pds-color-border-default);column-gap:var(--list-col-gap);display:grid;font-family:var(--pds-typography-ff-default);font-size:var(--list-font-size);grid-template-columns:var(--list-icon-col-width) auto;padding-block-end:var(--list-padding-block-end)}.pds-comparison-list__list-item--notIncluded{color:var(--pds-color-fg-default-secondary)}.pds-comparison-list__item-icon-wrapper{position:relative}.pds-comparison-list__item-icon{position:absolute;top:1px}.pds-comparison-list__more-link{font-size:var(--list-font-size);margin-block-start:var(--pds-spacing-l)}.pds-comparison-list--no-border .pds-comparison-list__list-item{border-bottom:none}