@pantheon-systems/pds-toolkit-react 2.0.0-alpha.59 → 2.0.0-alpha.60

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/codemods/v1-to-v2/css-token-renames.js +186 -0
  2. package/codemods/v1-to-v2/mappings.json +85 -7
  3. package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-removals/basic.input.tsx +24 -0
  4. package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-removals/basic.output.tsx +24 -0
  5. package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-renames/basic.input.tsx +29 -0
  6. package/codemods/v1-to-v2/transforms/__testfixtures__/css-class-renames/basic.output.tsx +29 -0
  7. package/codemods/v1-to-v2/transforms/css-class-removals.js +97 -27
  8. package/codemods/v1-to-v2/transforms/css-class-renames.js +80 -16
  9. package/dist/components/SiteFooter/SiteFooter.d.ts +7 -3
  10. package/dist/components/buttons/MenuButton/MenuButton.d.ts +4 -1
  11. package/dist/components/icons/Icon/generated-icon-data.d.ts +1 -1
  12. package/dist/css/component-css/pds-button.css +1 -3
  13. package/dist/css/component-css/pds-checkbox.css +1 -1
  14. package/dist/css/component-css/pds-cta-link.css +1 -1
  15. package/dist/css/component-css/pds-expansion-panel-group.css +1 -1
  16. package/dist/css/component-css/pds-expansion-panel.css +1 -1
  17. package/dist/css/component-css/pds-index.css +11 -13
  18. package/dist/css/component-css/pds-menu-button.css +1 -1
  19. package/dist/css/component-css/pds-side-nav.css +1 -1
  20. package/dist/css/component-css/pds-tab-menu.css +2 -2
  21. package/dist/css/component-css/pds-utility-button.css +1 -1
  22. package/dist/css/component-css/pds-workspace-selector.css +1 -1
  23. package/dist/css/design-tokens/variables.dark.css +6 -13
  24. package/dist/css/design-tokens/variables.global.css +1 -0
  25. package/dist/css/design-tokens/variables.light.css +7 -14
  26. package/dist/css/pds-components.css +11 -13
  27. package/dist/css/pds-core.css +1 -1
  28. package/dist/index.css +1 -1
  29. package/dist/index.js +148 -141
  30. package/dist/index.js.map +1 -1
  31. package/package.json +7 -6
package/codemods/v1-to-v2/transforms/css-class-renames.js CHANGED
@@ -1,7 +1,9 @@
1
1
  /**
2
2
  * Codemod: css-class-renames
3
3
  *
4
- * Renames PDS CSS utility classes in JSX className attributes.
4
+ * Renames PDS CSS utility classes in JSX className attributes — and any
5
+ * other prop ending in "ClassName" (e.g. iconClassName, labelClassName),
6
+ * a common pattern for components with multiple styleable slots.
5
7
  * Driven entirely by cssClasses.renames in mappings.json.
6
8
  *
7
9
  * Usage:
@@ -13,10 +15,19 @@
13
15
  * - String literals: className="pds-overline-text foo"
14
16
  * - Expression containers: className={'pds-overline-text'}
15
17
  * - Template literals: className={`pds-overline-text ${styles.x}`}
18
+ * - Ternaries / logical expressions, as a bare className expression or
19
+ * nested inside a template literal's ${...} slot, as long as every
20
+ * branch reached is itself a plain string literal:
21
+ * className={isActive ? 'pds-overline-text' : 'other-class'}
22
+ * className={`base ${isEmployee ? 'pds-color-bg-info' : 'pds-color-bg-default'}`}
23
+ * className={isOpen && 'pds-overline-text'}
24
+ * - Any other *ClassName prop, matched the same way as className:
25
+ * iconClassName={isActive ? 'pds-overline-text' : 'other-class'}
16
26
  *
17
27
  * Does not handle:
18
28
  * - CSS/SCSS files — run a find-and-replace over those separately.
19
- * - Dynamic class names built at runtime (e.g. computed from variables).
29
+ * - Truly dynamic class names (a variable, function call, or any branch
30
+ * of a ternary/logical expression that isn't itself a string literal).
20
31
  *
21
32
  * No --only flag: CSS utility classes can appear on any element (including
22
33
  * native HTML), so there is no meaningful component-level scope to filter by.
@@ -24,6 +35,7 @@
24
35
  */
25
36
 
26
37
  const path = require('path');
38
+
27
39
  const mappings = require(path.join(__dirname, '../mappings.json'));
28
40
 
29
41
  // Build lookup: { 'oldClass': 'newClass' }
@@ -58,6 +70,43 @@ function renameClasses(classString) {
58
70
  return { result, changed };
59
71
  }
60
72
 
73
+ // Recursively rename any string-literal branch reachable from `node` without
74
+ // crossing into a non-literal value — i.e. it descends into ternaries
75
+ // (ConditionalExpression) and logical expressions (&&/||), renaming each
76
+ // branch that is itself a string literal, but leaves anything else (a
77
+ // variable, a function call, a member expression, ...) untouched since its
78
+ // value isn't knowable statically. Returns the (possibly replaced) node and
79
+ // whether anything changed; does not mutate in place, so callers must
80
+ // reassign the returned node back onto its parent.
81
+ function renameStringLiteralBranches(node, j) {
82
+ if (!node) return { node, changed: false };
83
+
84
+ if (node.type === 'StringLiteral' || node.type === 'Literal') {
85
+ const { changed, result } = renameClasses(node.value);
86
+ return changed
87
+ ? { node: j.stringLiteral(result), changed: true }
88
+ : { node, changed: false };
89
+ }
90
+
91
+ if (node.type === 'ConditionalExpression') {
92
+ const consequent = renameStringLiteralBranches(node.consequent, j);
93
+ const alternate = renameStringLiteralBranches(node.alternate, j);
94
+ if (consequent.changed) node.consequent = consequent.node;
95
+ if (alternate.changed) node.alternate = alternate.node;
96
+ return { node, changed: consequent.changed || alternate.changed };
97
+ }
98
+
99
+ if (node.type === 'LogicalExpression') {
100
+ const left = renameStringLiteralBranches(node.left, j);
101
+ const right = renameStringLiteralBranches(node.right, j);
102
+ if (left.changed) node.left = left.node;
103
+ if (right.changed) node.right = right.node;
104
+ return { node, changed: left.changed || right.changed };
105
+ }
106
+
107
+ return { node, changed: false };
108
+ }
109
+
61
110
  module.exports = function transform(file, api) {
62
111
  const j = api.jscodeshift;
63
112
  const root = j(file.source);
@@ -67,14 +116,15 @@ module.exports = function transform(file, api) {
67
116
  let changed = false;
68
117
 
69
118
  root
70
- .find(j.JSXAttribute, { name: { name: 'className' } })
119
+ .find(j.JSXAttribute)
120
+ .filter((nodePath) => /className$/i.test(nodePath.node.name.name))
71
121
  .forEach((nodePath) => {
72
122
  const { value } = nodePath.node;
73
123
  if (!value) return;
74
124
 
75
125
  // className="pds-overline-text foo"
76
126
  if (value.type === 'StringLiteral') {
77
- const { result, changed: c } = renameClasses(value.value);
127
+ const { changed: c, result } = renameClasses(value.value);
78
128
  if (c) {
79
129
  nodePath.node.value = j.stringLiteral(result);
80
130
  changed = true;
@@ -85,26 +135,40 @@ module.exports = function transform(file, api) {
85
135
  if (value.type !== 'JSXExpressionContainer') return;
86
136
  const { expression } = value;
87
137
 
88
- // className={'pds-overline-text'}
89
- if (expression.type === 'StringLiteral') {
90
- const { result, changed: c } = renameClasses(expression.value);
91
- if (c) {
92
- value.expression = j.stringLiteral(result);
93
- changed = true;
94
- }
95
- return;
96
- }
97
-
98
- // className={`pds-overline-text ${styles.x}`}
138
+ // className={`pds-overline-text ${isActive ? 'a' : 'b'}`}
99
139
  if (expression.type === 'TemplateLiteral') {
100
140
  expression.quasis.forEach((quasi) => {
101
- const { result, changed: c } = renameClasses(quasi.value.raw);
141
+ const { changed: c, result } = renameClasses(quasi.value.raw);
102
142
  if (c) {
103
143
  quasi.value.raw = result;
104
144
  quasi.value.cooked = result;
105
145
  changed = true;
106
146
  }
107
147
  });
148
+
149
+ expression.expressions.forEach((expr, index) => {
150
+ const { changed: c, node: renamed } = renameStringLiteralBranches(
151
+ expr,
152
+ j,
153
+ );
154
+ if (c) {
155
+ expression.expressions[index] = renamed;
156
+ changed = true;
157
+ }
158
+ });
159
+ return;
160
+ }
161
+
162
+ // className={'pds-overline-text'}
163
+ // className={isActive ? 'pds-overline-text' : 'other-class'}
164
+ // className={isOpen && 'pds-overline-text'}
165
+ const { changed: c, node: renamed } = renameStringLiteralBranches(
166
+ expression,
167
+ j,
168
+ );
169
+ if (c) {
170
+ value.expression = renamed;
171
+ changed = true;
108
172
  }
109
173
  });
110
174
 
package/dist/components/SiteFooter/SiteFooter.d.ts CHANGED
@@ -1,6 +1,7 @@
1
- import { ComponentPropsWithoutRef, ReactNode } from 'react';
1
+ import { ComponentPropsWithoutRef, ReactElement, ReactNode } from 'react';
2
2
  import { ContainerWidth } from '../../libs/types/custom-types';
3
3
  import './site-footer.css';
4
+ type LegalLinkKey = 'privacy' | 'dataSubjectRequest' | 'cookiePolicy' | 'termsOfUse' | 'acceptableUse' | 'accessibilityStatement';
4
5
  export interface SiteFooterProps extends ComponentPropsWithoutRef<'footer'> {
5
6
  /**
6
7
  * HTML element to render. Use 'footer' for standalone usage or 'div' when nested inside another footer landmark.
@@ -26,9 +27,11 @@ export interface SiteFooterProps extends ComponentPropsWithoutRef<'footer'> {
26
27
  */
27
28
  hasTopBorder?: boolean;
28
29
  /**
29
- * Legal policy links.
30
+ * Legal policy links, in display order. Accepts the predefined Pantheon
31
+ * legal link keys and/or custom links or buttons (e.g. a cookie
32
+ * preferences trigger), interspersed in whatever order you need.
30
33
  */
31
- legalLinks?: Array<'privacy' | 'dataSubjectRequest' | 'cookiePolicy' | 'termsOfUse' | 'acceptableUse' | 'accessibilityStatement'>;
34
+ legalLinks?: Array<LegalLinkKey | ReactElement>;
32
35
  /**
33
36
  * The background color of the surface this footer is placed on.
34
37
  * Use 'secondary' to strengthen the internal divider border when the footer sits on a secondary background.
@@ -39,3 +42,4 @@ export interface SiteFooterProps extends ComponentPropsWithoutRef<'footer'> {
39
42
  * SiteFooter UI component
40
43
  */
41
44
  export declare const SiteFooter: ({ as: Element, children, className, containerWidth, hasTopBorder, legalLinks, surfaceColor, ...props }: SiteFooterProps) => import("react/jsx-runtime").JSX.Element;
45
+ export {};
package/dist/components/buttons/MenuButton/MenuButton.d.ts CHANGED
@@ -71,8 +71,11 @@ export interface MenuButtonProps extends ComponentPropsWithRef<'span'> {
71
71
  undefinedLabel?: string;
72
72
  /**
73
73
  * Which variant of button to render. Not available in `iconOnly` mode.
74
+ * `navbar` is visually identical to `subtle` except it has no background
75
+ * at rest — only on hover/expanded — for triggers that sit directly on a
76
+ * nav/toolbar surface rather than a plain page background.
74
77
  */
75
- variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle'>;
78
+ variant?: Extract<ButtonVariant, 'primary' | 'secondary' | 'subtle'> | 'navbar';
76
79
  }
77
80
  /**
78
81
  * MenuButton UI component
package/dist/components/icons/Icon/generated-icon-data.d.ts CHANGED
@@ -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-06T03:14:38.458Z
6
+ * Generated: 2026-08-07T16:53:41.427Z
7
7
  */
8
8
  import { customIcons } from './custom-icons';
9
9
  export { customIcons };
package/dist/css/component-css/pds-button.css CHANGED
@@ -16,9 +16,7 @@
16
16
  --pds-color-button-subtle-background-hover
17
17
  );--button-background-color-active:var(
18
18
  --pds-color-button-subtle-background-active
19
- );--button-box-shadow-active:var(--pds-elevation-button-subtle-active);--button-foreground-color:var(--pds-color-button-subtle-foreground);--button-border-color:var(--pds-color-button-subtle-background-default);--button-border-color-hover:var(
20
- --pds-color-button-subtle-background-default
21
- );--button-border-color-active:var(--button-background-color-active)}.pds-button--critical{--button-background-color:var(
19
+ );--button-box-shadow-active:var(--pds-elevation-button-subtle-active);--button-foreground-color:var(--pds-color-button-subtle-foreground);--button-border-color:transparent;--button-border-color-hover:transparent;--button-border-color-active:transparent}.pds-button--critical{--button-background-color:var(
22
20
  --pds-color-button-critical-background-default
23
21
  );--button-background-color-hover:var(
24
22
  --pds-color-button-critical-background-hover
package/dist/css/component-css/pds-checkbox.css CHANGED
@@ -1 +1 @@
1
- @layer pds-v1, pds-v2;@layer pds-v2{.pds-checkbox{--checkbox-font-size:var(--pds-typography-size-input-label);--checkbox-input-size:1rem;--checkbox-input-gap:var(--pds-spacing-2xs);line-height:1.2}.pds-checkbox--m{--checkbox-font-size:var(--pds-typography-size-s);--checkbox-input-size:1.25rem}.pds-checkbox__input-wrapper{display:flex}.pds-checkbox input[type=checkbox]{appearance:none}.pds-checkbox__label{align-items:center;column-gap:var(--checkbox-input-gap);display:grid;grid-template-columns:var(--checkbox-input-size) auto;margin-block-end:0}.pds-checkbox__label-text{color:var(--pds-color-foreground-default);font-size:var(--checkbox-font-size);font-weight:var(--pds-typography-fw-regular)}.pds-checkbox__box{align-items:center;background-color:transparent;border:var(--pds-border-width-default) solid var(--pds-color-foreground-default);border-radius:var(--pds-border-radius-input);display:flex;height:var(--checkbox-input-size);padding:.0625rem;transition:var(--pds-animation-transition-default);width:var(--checkbox-input-size)}.pds-checkbox__box--checked,.pds-checkbox__box--indeterminate{background-color:var(--pds-color-input-selected-background);border-color:var(--pds-color-input-selected-background);transition:var(--pds-animation-transition-default)}.pds-checkbox__icon{color:var(--pds-color-input-selected-foreground);height:100%;transition:var(--pds-animation-transition-default);width:100%}.pds-checkbox:hover .pds-checkbox__box{cursor:pointer}.pds-checkbox input[type=checkbox]:focus-visible~label .pds-checkbox__box{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:.0625rem}.pds-checkbox.pds-is-disabled .pds-checkbox__label{cursor:not-allowed;opacity:40%}.pds-checkbox.pds-has-error .pds-checkbox__box{border-color:var(--pds-color-status-critical-foreground)}.pds-checkbox.pds-has-error .pds-checkbox__label-text{color:var(--pds-color-status-critical-foreground)}.pds-checkbox .pds-input-label__required{margin-inline-start:.125rem}div.pds-checkbox-group .pds-checkbox--indent-1{margin-inline-start:calc(var(--checkbox-input-size)*2 - var(--checkbox-input-gap))}div.pds-checkbox-group .pds-checkbox--indent-2{margin-inline-start:calc(var(--checkbox-input-size)*4 - var(--checkbox-input-gap)*2)}}
1
+ @layer pds-v1, pds-v2;@layer pds-v2{.pds-checkbox{--checkbox-font-size:var(--pds-typography-size-input-label);--checkbox-input-size:1rem;--checkbox-input-gap:var(--pds-spacing-2xs);line-height:1.2}.pds-checkbox--m{--checkbox-font-size:var(--pds-typography-size-s);--checkbox-input-size:1.25rem}.pds-checkbox__input-wrapper{display:flex}.pds-checkbox input[type=checkbox]{appearance:none}.pds-checkbox__label{align-items:center;column-gap:var(--checkbox-input-gap);display:grid;grid-template-columns:var(--checkbox-input-size) auto;margin-block-end:0}.pds-checkbox__label-text{color:var(--pds-color-foreground-default);font-size:var(--checkbox-font-size);font-weight:var(--pds-typography-fw-regular)}.pds-checkbox__box{align-items:center;background-color:transparent;border:var(--pds-border-width-default) solid var(--pds-color-foreground-default);border-radius:var(--pds-border-radius-default);display:flex;height:var(--checkbox-input-size);padding:.0625rem;transition:var(--pds-animation-transition-default);width:var(--checkbox-input-size)}.pds-checkbox__box--checked,.pds-checkbox__box--indeterminate{background-color:var(--pds-color-input-selected-background);border-color:var(--pds-color-input-selected-background);transition:var(--pds-animation-transition-default)}.pds-checkbox__icon{color:var(--pds-color-input-selected-foreground);height:100%;transition:var(--pds-animation-transition-default);width:100%}.pds-checkbox:hover .pds-checkbox__box{cursor:pointer}.pds-checkbox input[type=checkbox]:focus-visible~label .pds-checkbox__box{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:.0625rem}.pds-checkbox.pds-is-disabled .pds-checkbox__label{cursor:not-allowed;opacity:40%}.pds-checkbox.pds-has-error .pds-checkbox__box{border-color:var(--pds-color-status-critical-foreground)}.pds-checkbox.pds-has-error .pds-checkbox__label-text{color:var(--pds-color-status-critical-foreground)}.pds-checkbox .pds-input-label__required{margin-inline-start:.125rem}div.pds-checkbox-group .pds-checkbox--indent-1{margin-inline-start:calc(var(--checkbox-input-size)*2 - var(--checkbox-input-gap))}div.pds-checkbox-group .pds-checkbox--indent-2{margin-inline-start:calc(var(--checkbox-input-size)*4 - var(--checkbox-input-gap)*2)}}
package/dist/css/component-css/pds-cta-link.css CHANGED
@@ -1 +1 @@
1
- @layer pds-v1, pds-v2;@layer pds-v2{.pds-cta-link{--cta-link-size:var(--pds-typography-size-m);--cta-link-color:var(--pds-color-interactive-link-default);--cta-link-gap:var(--pds-spacing-3xs);align-items:center;display:inline-flex;gap:var(--cta-link-gap);padding:.25rem 0}.pds-cta-link a,.pds-cta-link button{color:var(--cta-link-color);font-family:var(--pds-typography-ff-default);font-size:var(--cta-link-size);font-weight:var(--pds-typography-fw-bold);letter-spacing:var(--pds-typography-ls-s);line-height:var(--pds-typography-lh-s);text-decoration:none;transition:var(--pds-animation-transition-link)}.pds-cta-link a:focus-visible,.pds-cta-link button:focus-visible{border-radius:var(--pds-border-radius-default);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:.25rem;text-decoration:none}.pds-cta-link button{background:none;border:none;cursor:pointer;padding:0}.pds-cta-link .pds-cta-link__icon{color:var(--cta-link-color);transition:var(--pds-animation-transition-link)}.pds-cta-link:hover{--cta-link-color:var(--pds-color-interactive-link-hover)}.pds-cta-link:active{--cta-link-color:var(--pds-color-interactive-link-active);outline:none;text-decoration:none}.pds-cta-link--xs{--cta-link-gap:var(--pds-spacing-3xs);--cta-link-size:var(--pds-typography-size-s)}.pds-cta-link--m{--cta-link-gap:var(--pds-spacing-2xs);--cta-link-size:var(--pds-typography-size-l)}.pds-link-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m)}}
1
+ @layer pds-v1, pds-v2;@layer pds-v2{.pds-cta-link{--cta-link-size:var(--pds-typography-size-m);--cta-link-color:var(--pds-color-interactive-link-default);--cta-link-gap:var(--pds-spacing-3xs);align-items:center;display:inline-flex;gap:var(--cta-link-gap);padding:.25rem 0}.pds-cta-link a,.pds-cta-link button{color:var(--cta-link-color);font-family:var(--pds-typography-ff-default);font-size:var(--cta-link-size);font-weight:var(--pds-typography-fw-bold);letter-spacing:var(--pds-typography-ls-s);line-height:var(--pds-typography-lh-s);text-decoration:none;transition:var(--pds-animation-transition-link)}.pds-cta-link a:hover,.pds-cta-link button:hover{color:var(--cta-link-color)}.pds-cta-link a:focus-visible,.pds-cta-link button:focus-visible{border-radius:var(--pds-border-radius-default);outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus);outline-offset:.25rem;text-decoration:none}.pds-cta-link button{background:none;border:none;cursor:pointer;padding:0}.pds-cta-link .pds-cta-link__icon{color:var(--cta-link-color);transition:var(--pds-animation-transition-link)}.pds-cta-link:hover{--cta-link-color:var(--pds-color-interactive-link-hover)}.pds-cta-link:active{--cta-link-color:var(--pds-color-interactive-link-active);outline:none;text-decoration:none}.pds-cta-link--xs{--cta-link-gap:var(--pds-spacing-3xs);--cta-link-size:var(--pds-typography-size-s)}.pds-cta-link--m{--cta-link-gap:var(--pds-spacing-2xs);--cta-link-size:var(--pds-typography-size-l)}.pds-link-group{display:flex;flex-direction:column;row-gap:var(--pds-spacing-m)}}
package/dist/css/component-css/pds-expansion-panel-group.css CHANGED
@@ -1 +1 @@
1
- @layer pds-v1, pds-v2;@layer pds-v2{.pds-expansion-panel-group .pds-expansion-panel{margin-block-end:var(--pds-spacing-m)}.pds-expansion-panel-group:last-child{margin-block-end:0}.pds-expansion-panel-group--no-border .pds-expansion-panel{margin-block-end:var(--pds-spacing-xs)}.pds-expansion-panel-group--no-border .pds-expansion-panel details{border-color:transparent}.pds-expansion-panel-group--no-border .pds-expansion-panel details[open]>summary{border-radius:var(--pds-border-radius-container)}.pds-expansion-panel-group--no-border .pds-expansion-panel .pds-expansion-panel__content{padding-block-end:0}.pds-expansion-panel-group--stacked .pds-expansion-panel{margin-block-end:0}.pds-expansion-panel-group--stacked .pds-expansion-panel details,.pds-expansion-panel-group--stacked .pds-expansion-panel details>summary,.pds-expansion-panel-group--stacked .pds-expansion-panel details[open]>summary{border-radius:0;border-top:none}.pds-expansion-panel-group--stacked .pds-expansion-panel:first-child details{border-top:var(--pds-border-width-default) solid var(--pds-color-border-default)}.pds-expansion-panel-group--stacked .pds-expansion-panel:first-child details,.pds-expansion-panel-group--stacked .pds-expansion-panel:first-child details>summary,.pds-expansion-panel-group--stacked .pds-expansion-panel:first-child details[open]>summary{border-radius:var(--pds-border-radius-container) var(--pds-border-radius-container) 0 0}.pds-expansion-panel-group--stacked .pds-expansion-panel:last-child details,.pds-expansion-panel-group--stacked .pds-expansion-panel:last-child details>summary{border-radius:0 0 var(--pds-border-radius-container) var(--pds-border-radius-container)}.pds-expansion-panel-group--stacked .pds-expansion-panel:last-child details[open]>summary{border-radius:0}}
1
+ @layer pds-v1, pds-v2;@layer pds-v2{.pds-expansion-panel-group .pds-expansion-panel{margin-block-end:var(--pds-spacing-xs)}.pds-expansion-panel-group:last-child{margin-block-end:0}.pds-expansion-panel-group--no-border .pds-expansion-panel{margin-block-end:var(--pds-spacing-3xs)}.pds-expansion-panel-group--no-border .pds-expansion-panel details{border-color:transparent}.pds-expansion-panel-group--no-border .pds-expansion-panel details[open]>summary{border-radius:var(--pds-border-radius-container)}.pds-expansion-panel-group--no-border .pds-expansion-panel .pds-expansion-panel__content{padding-block-end:0}.pds-expansion-panel-group--stacked .pds-expansion-panel{margin-block-end:0}.pds-expansion-panel-group--stacked .pds-expansion-panel details,.pds-expansion-panel-group--stacked .pds-expansion-panel details>summary,.pds-expansion-panel-group--stacked .pds-expansion-panel details[open]>summary{border-radius:0;border-top:none}.pds-expansion-panel-group--stacked .pds-expansion-panel:first-child details{border-top:var(--pds-border-width-default) solid var(--pds-color-border-default)}.pds-expansion-panel-group--stacked .pds-expansion-panel:first-child details,.pds-expansion-panel-group--stacked .pds-expansion-panel:first-child details>summary,.pds-expansion-panel-group--stacked .pds-expansion-panel:first-child details[open]>summary{border-radius:var(--pds-border-radius-container) var(--pds-border-radius-container) 0 0}.pds-expansion-panel-group--stacked .pds-expansion-panel:last-child details,.pds-expansion-panel-group--stacked .pds-expansion-panel:last-child details>summary{border-radius:0 0 var(--pds-border-radius-container) var(--pds-border-radius-container)}.pds-expansion-panel-group--stacked .pds-expansion-panel:last-child details[open]>summary{border-radius:0}}
package/dist/css/component-css/pds-expansion-panel.css CHANGED
@@ -1,2 +1,2 @@
1
- @layer pds-v1, pds-v2;@layer pds-v2{.pds-expansion-panel details{border:var(--pds-border-width-default) solid var(--pds-color-border-default);border-radius:var(--pds-border-radius-container);line-height:normal}.pds-expansion-panel details>summary::-webkit-details-marker{display:none}.pds-expansion-panel details>summary{align-items:center;border-radius:var(--pds-border-radius-container);color:var(--pds-color-foreground-default);cursor:pointer;display:flex;flex-wrap:nowrap;font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-medium);gap:var(--pds-spacing-l);justify-content:space-between;padding:var(--pds-spacing-s) var(--pds-spacing-m);transition:var(--pds-animation-transition-button)}.pds-expansion-panel details>summary:hover{background-color:var(--pds-color-expansion-panel-hover);transition:background-color var(--pds-animation-transition-button)}.pds-expansion-panel details>summary:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-expansion-panel details>summary .pds-expansion-panel__icon{color:var(--pds-color-foreground-default-secondary);transition:var(--pds-animation-transition-rotation)}.pds-expansion-panel .pds-expansion-panel__icon.rotated{transform:rotate(180deg);transition:var(--pds-animation-transition-rotation)}.pds-expansion-panel details[open]>summary{background-color:var(--pds-color-expansion-panel-open);border-radius:var(--pds-border-radius-container) var(--pds-border-radius-container) 0 0}.pds-expansion-panel details[open]>summary .pds-expansion-panel__icon{color:var(--pds-color-foreground-default)}.pds-expansion-panel .pds-expansion-panel__content{padding:var(--pds-spacing-s) var(--pds-spacing-m)}.pds-expansion-panel .pds-expansion-panel__content
1
+ @layer pds-v1, pds-v2;@layer pds-v2{.pds-expansion-panel details{background-color:var(--pds-color-surface-default);border:var(--pds-border-width-default) solid var(--pds-color-border-default);border-radius:var(--pds-border-radius-container);line-height:normal}.pds-expansion-panel details>summary::-webkit-details-marker{display:none}.pds-expansion-panel details>summary{align-items:center;border-radius:var(--pds-border-radius-container);color:var(--pds-color-foreground-default);cursor:pointer;display:flex;flex-wrap:nowrap;font-family:var(--pds-typography-ff-default);font-size:var(--pds-typography-size-m);font-weight:var(--pds-typography-fw-medium);gap:var(--pds-spacing-l);justify-content:space-between;padding:var(--pds-spacing-s) var(--pds-spacing-m);transition:var(--pds-animation-transition-button)}.pds-expansion-panel details>summary:hover{background-color:var(--pds-color-expansion-panel-hover);transition:background-color var(--pds-animation-transition-button)}.pds-expansion-panel details>summary:focus-visible{outline:var(--pds-border-width-outline) solid var(--pds-color-interactive-focus)}.pds-expansion-panel details>summary .pds-expansion-panel__icon{color:var(--pds-color-foreground-default-secondary);transition:var(--pds-animation-transition-rotation)}.pds-expansion-panel .pds-expansion-panel__icon.rotated{transform:rotate(180deg);transition:var(--pds-animation-transition-rotation)}.pds-expansion-panel details[open]>summary{background-color:var(--pds-color-surface-default);border-bottom:var(--pds-border-width-default) solid var(--pds-color-border-default);border-radius:var(--pds-border-radius-container) var(--pds-border-radius-container) 0 0}.pds-expansion-panel details[open]>summary .pds-expansion-panel__icon{color:var(--pds-color-foreground-default)}.pds-expansion-panel details[open]>summary:hover{background-color:var(--pds-color-expansion-panel-hover)}.pds-expansion-panel .pds-expansion-panel__content{padding-block-end:var(--pds-spacing-s);padding-block-start:var(--pds-spacing-m);padding-inline:var(--pds-spacing-m)}.pds-expansion-panel .pds-expansion-panel__content
2
2
  :is(h1,h2,h3,h4,h5,h6):not(.visually-hidden)+*{margin-block-start:var(--pds-spacing-s)}.pds-expansion-panel.pds-expansion-panel--no-border details{border:none}}