From ad467f0691e4c4897a2d945a42cb88a220ab3577 Mon Sep 17 00:00:00 2001 From: lindsaym-fa Date: Wed, 18 Dec 2024 17:02:25 -0500 Subject: [PATCH] Add native details styles and share with `` --- docs/assets/styles/docs.css | 8 --- docs/assets/styles/outline.css | 1 + src/components/details/details.css | 37 +--------- src/components/details/details.ts | 3 +- src/styles/native/details.css | 108 +++++++++++++++-------------- 5 files changed, 61 insertions(+), 96 deletions(-) diff --git a/docs/assets/styles/docs.css b/docs/assets/styles/docs.css index fa7b8af47..ed0f587ba 100644 --- a/docs/assets/styles/docs.css +++ b/docs/assets/styles/docs.css @@ -104,17 +104,9 @@ wa-page > header { wa-details { border: none; background: none; - } - - wa-details::part(header) { padding: 0; } - wa-details::part(content) { - padding-inline: 0; - padding-block-end: 0; - } - ul { border-inline-start: var(--wa-border-width-s) solid var(--wa-color-surface-border); font-size: var(--wa-font-size-s); diff --git a/docs/assets/styles/outline.css b/docs/assets/styles/outline.css index 26ee6c274..954d60b68 100644 --- a/docs/assets/styles/outline.css +++ b/docs/assets/styles/outline.css @@ -42,5 +42,6 @@ #outline-expandable { display: block; + margin-block-end: var(--wa-space-xl); } } diff --git a/src/components/details/details.css b/src/components/details/details.css index 56eb7206f..035fc5f10 100644 --- a/src/components/details/details.css +++ b/src/components/details/details.css @@ -1,10 +1,4 @@ :host { - background-color: var(--wa-color-surface-default); - border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style); - border-radius: var(--wa-panel-border-radius); - - --icon-color: var(--wa-color-text-quiet); - --spacing: var(--wa-space-m); --show-duration: 200ms; --hide-duration: 200ms; @@ -30,35 +24,6 @@ details { } } -summary { - display: flex; - align-items: center; - padding: var(--spacing); - user-select: none; - -webkit-user-select: none; - cursor: pointer; - - &::marker, - &::-webkit-details-marker { - display: none; - } - - &:focus { - outline: none; - } - - &:focus-visible { - outline: var(--wa-focus-ring); - outline-offset: calc(1px + var(--wa-focus-ring-offset)); - } - - [part~='summary'] { - flex: 1 1 auto; - display: flex; - align-items: center; - } -} - [part~='icon'] { flex: 0 0 auto; display: flex; @@ -87,7 +52,7 @@ summary { .content { display: block; - padding: var(--spacing); + padding-block-start: var(--spacing); } .show { diff --git a/src/components/details/details.ts b/src/components/details/details.ts index abb9d13e7..175a394eb 100644 --- a/src/components/details/details.ts +++ b/src/components/details/details.ts @@ -8,6 +8,7 @@ import { animate, parseDuration } from '../../internal/animate.js'; import { getTargetElement, waitForEvent } from '../../internal/event.js'; import { watch } from '../../internal/watch.js'; import WebAwesomeElement from '../../internal/webawesome-element.js'; +import nativeStyles from '../../styles/native/details.css'; import { LocalizeController } from '../../utilities/localize.js'; import '../icon/icon.js'; import styles from './details.css'; @@ -44,7 +45,7 @@ import styles from './details.css'; */ @customElement('wa-details') export default class WaDetails extends WebAwesomeElement { - static shadowStyle = styles; + static shadowStyle = [nativeStyles, styles]; private detailsObserver: MutationObserver; private readonly localize = new LocalizeController(this); diff --git a/src/styles/native/details.css b/src/styles/native/details.css index 145535175..a5e7ceb74 100644 --- a/src/styles/native/details.css +++ b/src/styles/native/details.css @@ -1,55 +1,12 @@ -/* Details */ -details { - background-color: var(--wa-color-neutral-fill-quiet); +details:where(:not(:host *, .wa-off, .wa-off-deep *)), +:host { + --icon-color: var(--wa-color-text-quiet); + --spacing: var(--wa-space-m); + + background-color: var(--wa-color-surface-default); + border: var(--wa-panel-border-width) var(--wa-color-surface-border) var(--wa-panel-border-style); border-radius: var(--wa-panel-border-radius); - padding-block: 0; - padding-inline: var(--wa-space-m); - margin: 0; - margin-block-end: var(--wa-space-xl); - - > :last-child { - margin-block-end: 0; - } - - summary { - position: relative; - display: block; - cursor: pointer; - text-indent: calc(0.4em + 1em); - padding-inline: 0; - padding-block: var(--wa-space-m); - margin: 0; - user-select: none; - -webkit-user-select: none; - - &::marker, - &::-webkit-details-marker { - display: none; - } - - &::before { - content: ''; - border: 0.4em solid transparent; - border-left-color: currentColor; - position: absolute; - top: calc(50% - 0.4em); - left: calc(0.4em / 2); - rotate: 0deg; - transform-origin: calc(0.4em / 2) 50%; - } - } - - &[open] { - padding-block-end: var(--wa-space-m); - - > summary::before { - rotate: 90deg; - } - } - - + details { - margin-top: calc(-1 * var(--wa-space-xl) + var(--wa-border-width-s)); - } + padding: var(--spacing); /* Print styles */ @media print { @@ -61,3 +18,52 @@ details { } } } + +details:where(:not(:host *, .wa-off, .wa-off-deep *)) summary, +:host summary /* nesting these summary styles in the rule above breaks in Firefox and Safari */ { + display: flex; + align-items: center; + justify-content: space-between; + user-select: none; + -webkit-user-select: none; + cursor: pointer; + + &::marker, + &::-webkit-details-marker { + display: none; + } + + &:focus { + outline: none; + } + + &:focus-visible { + outline: var(--wa-focus-ring); + outline-offset: calc(var(--spacing) + var(--wa-focus-ring-offset)); + } +} + +details:not(:host *, .wa-off, .wa-off-deep *) { + summary::after { + content: ''; + background-color: var(--icon-color); + mask: url('data:image/svg+xml;utf8,') + center no-repeat; + width: 1rem; + height: 1rem; + rotate: 0deg; + transition: rotate var(--wa-transition-normal) var(--wa-transition-easing); + } + + &:dir(rtl) > summary::after { + rotate: 180deg; + } + + &[open] > summary::after { + rotate: 90deg; + } + + > :last-child { + margin-block-end: 0; + } +}