diff --git a/libs/core/src/components/pds-accordion/pds-accordion.scss b/libs/core/src/components/pds-accordion/pds-accordion.scss index 3a9d9d56b..99e117542 100644 --- a/libs/core/src/components/pds-accordion/pds-accordion.scss +++ b/libs/core/src/components/pds-accordion/pds-accordion.scss @@ -8,7 +8,7 @@ details { --box-shadow-focus: inset 0 0 0 2px var(--pine-color-blue-200); --color-background-default: var(--pine-color-white); - --color-background-hover: var(--pine-color-mercury-150); + --color-background-hover: var(--pine-color-grey-150); --color-text-default: var(--pine-color-grey-700); --color-text-active: var(--pine-color-grey-950); --color-text-hover: var(--pine-color-grey-800); @@ -18,8 +18,8 @@ details { --number-animation-transform-timing: 200ms; --spacing-details-padding-inline: var(--pine-spacing-150); - --spacing-details-padding-block-end: calc(var(--pine-spacing-200) + 2) //18 + 2 = 18px; - --spacing-summary-padding-block: calc(var(--pine-spacing-150) / 2) //12 / 2 = 6px; + --spacing-details-padding-block-end: calc(var(--pine-spacing-200) + 2); //18 + 2 = 18px + --spacing-summary-padding-block: calc(var(--pine-spacing-150) / 2); //12 / 2 = 6px --spacing-summary-padding-inline-start: var(--pine-spacing-100); --spacing-summary-padding-inline-end: var(--pine-spacing-050); @@ -29,7 +29,6 @@ details { pds-icon { transform: scaleY(1); - transition: transform var(--number-animation-transform-timing); } } @@ -43,7 +42,6 @@ details[open] { pds-icon { transform: scaleY(-1); - transition: transform var(--number-animation-transform-timing); } } } diff --git a/libs/core/src/components/pds-accordion/pds-accordion.tsx b/libs/core/src/components/pds-accordion/pds-accordion.tsx index f766f9cf5..0ae290395 100644 --- a/libs/core/src/components/pds-accordion/pds-accordion.tsx +++ b/libs/core/src/components/pds-accordion/pds-accordion.tsx @@ -2,6 +2,7 @@ import { Component, h, Host, Prop, Watch } from '@stencil/core'; import { downSmall } from '@pine-ds/icons/icons'; /** + * @part accordion-body - Accordion body styles. * @slot (default) - Accordion body content. * @slot label - Accordion trigger button content. */ @@ -57,7 +58,7 @@ export class PdsAccordion { Details -
+
diff --git a/libs/core/src/components/pds-accordion/readme.md b/libs/core/src/components/pds-accordion/readme.md index 28d52378f..2bc652f24 100644 --- a/libs/core/src/components/pds-accordion/readme.md +++ b/libs/core/src/components/pds-accordion/readme.md @@ -21,6 +21,13 @@ | `"label"` | Accordion trigger button content. | +## Shadow Parts + +| Part | Description | +| ------------------ | ---------------------- | +| `"accordion-body"` | Accordion body styles. | + + ## Dependencies ### Depends on diff --git a/libs/core/src/components/pds-accordion/test/pds-accordion.spec.tsx b/libs/core/src/components/pds-accordion/test/pds-accordion.spec.tsx index 3c5b8d228..90df75395 100644 --- a/libs/core/src/components/pds-accordion/test/pds-accordion.spec.tsx +++ b/libs/core/src/components/pds-accordion/test/pds-accordion.spec.tsx @@ -16,7 +16,7 @@ describe('pds-accordion', () => { Details -
+
@@ -38,7 +38,7 @@ describe('pds-accordion', () => { Details -
+
@@ -61,7 +61,7 @@ describe('pds-accordion', () => { Details -
+
@@ -84,7 +84,7 @@ describe('pds-accordion', () => { Details -
+
@@ -108,7 +108,7 @@ describe('pds-accordion', () => { Details -
+
@@ -132,7 +132,7 @@ describe('pds-accordion', () => { Details -
+