@aurodesignsystem-dev/auro-drawer 0.0.0-pr132.0 → 0.0.0-pr134.0
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/demo/api.md +56 -12
- package/demo/auro-drawer.min.js +418 -145
- package/demo/keyboard-audit.html +766 -0
- package/dist/{auro-drawer-UEcwC42s.js → auro-drawer-DTS2mk2U.js} +25 -24
- package/dist/index.d.ts +18 -2
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +6 -2
package/demo/api.md
CHANGED
|
@@ -42,14 +42,23 @@ The `auro-drawer` element provides users a way to implement an expandable drawer
|
|
|
42
42
|
|
|
43
43
|
### CSS Shadow Parts
|
|
44
44
|
|
|
45
|
-
| Name | Description
|
|
46
|
-
| --------------- |
|
|
47
|
-
| close-button | to style the close button.
|
|
48
|
-
| drawer-backdrop | to
|
|
49
|
-
| drawer-content | to style the container of the drawer content.
|
|
50
|
-
| drawer-footer | to style the footer.
|
|
51
|
-
| drawer-header | to style the header.
|
|
52
|
-
| drawer-wrapper | to style the content wrapper.
|
|
45
|
+
| Name | Description |
|
|
46
|
+
| --------------- | ----------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
47
|
+
| close-button | to style the close button. |
|
|
48
|
+
| drawer-backdrop | DEPRECATED - To migrate to the token approach, set `display: none` on this part and use the `--auro-drawer-backdrop-*` CSS custom properties instead. |
|
|
49
|
+
| drawer-content | to style the container of the drawer content. |
|
|
50
|
+
| drawer-footer | to style the footer. |
|
|
51
|
+
| drawer-header | to style the header. |
|
|
52
|
+
| drawer-wrapper | to style the content wrapper. |
|
|
53
|
+
|
|
54
|
+
### CSS Custom Properties
|
|
55
|
+
|
|
56
|
+
| Name | Description |
|
|
57
|
+
| --------------------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- |
|
|
58
|
+
| --auro-drawer-backdrop-background | Background of the `::backdrop` pseudo-element. In modal/backdrop mode the component sets this to the design-system scrim token; consumers can override it. |
|
|
59
|
+
| --auro-drawer-backdrop-filter | `backdrop-filter` applied to the `::backdrop` pseudo-element (e.g. `blur(4px)`). |
|
|
60
|
+
| --auro-drawer-backdrop-opacity | Opacity of the `::backdrop` pseudo-element. |
|
|
61
|
+
| --auro-drawer-backdrop-transition | Transition applied to the `::backdrop` pseudo-element (e.g. `opacity 0.3s ease`). |
|
|
53
62
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
54
63
|
|
|
55
64
|
## Basic
|
|
@@ -1013,13 +1022,36 @@ To customize the aria-label text for the close button, use the `ariaLabel.drawer
|
|
|
1013
1022
|
|
|
1014
1023
|
The drawer's size and some styles can be styled using CSS `part`.
|
|
1015
1024
|
|
|
1016
|
-
- `auro-drawer::part(
|
|
1017
|
-
- `auro-drawer ::part(drawer-wrapper)` to style the container of the drawer content.
|
|
1025
|
+
- `auro-drawer::part(drawer-wrapper)` to style the container of the drawer content (the drawer panel itself).
|
|
1018
1026
|
- `auro-drawer ::part(drawer-header)` to style the header.
|
|
1019
1027
|
- `auro-drawer ::part(drawer-content)` to style the content wrapper.
|
|
1020
1028
|
- `auro-drawer ::part(drawer-footer)` to style the footer.
|
|
1021
1029
|
- `auro-drawer ::part(close-button)` to style the close button.
|
|
1022
1030
|
|
|
1031
|
+
The drawer backdrop cannot be targeted via `::part()` because browser restrictions prevent CSS parts from targeting `::backdrop`. The `drawer-backdrop` part is kept for backwards compatibility — it targets a decorative `<div>` that sits behind the drawer panel.
|
|
1032
|
+
|
|
1033
|
+
To migrate to the new token approach, hide the legacy div and use the CSS custom properties instead:
|
|
1034
|
+
|
|
1035
|
+
```css
|
|
1036
|
+
/* Step 1: disable the legacy backdrop div */
|
|
1037
|
+
auro-drawer::part(drawer-backdrop) {
|
|
1038
|
+
display: none;
|
|
1039
|
+
}
|
|
1040
|
+
|
|
1041
|
+
/* Step 2: style via tokens on the native ::backdrop */
|
|
1042
|
+
auro-drawer {
|
|
1043
|
+
--auro-drawer-backdrop-background: rgba(0, 0, 0, 0.6);
|
|
1044
|
+
--auro-drawer-backdrop-filter: blur(4px);
|
|
1045
|
+
}
|
|
1046
|
+
```
|
|
1047
|
+
|
|
1048
|
+
| Custom Property | Default | Description |
|
|
1049
|
+
|---|---|---|
|
|
1050
|
+
| `--auro-drawer-backdrop-background` | `transparent` | Background of the native `::backdrop`. |
|
|
1051
|
+
| `--auro-drawer-backdrop-filter` | `none` | `backdrop-filter` applied to the native `::backdrop` (e.g. `blur(4px)`). |
|
|
1052
|
+
| `--auro-drawer-backdrop-opacity` | `1` | Opacity of the native `::backdrop`. |
|
|
1053
|
+
| `--auro-drawer-backdrop-transition` | `opacity 0.3s ease` | Transition applied to the native `::backdrop`. |
|
|
1054
|
+
|
|
1023
1055
|
`close` slot can be used to replace the close button to a different element.
|
|
1024
1056
|
|
|
1025
1057
|
<div class="exampleWrapper">
|
|
@@ -1039,8 +1071,14 @@ The drawer's size and some styles can be styled using CSS `part`.
|
|
|
1039
1071
|
background: linear-gradient(180deg, var( --ds-advanced-color-accents-accent1) 50%, var(--ds-advanced-color-accents-accent1-muted) 100%);
|
|
1040
1072
|
width: 50%;
|
|
1041
1073
|
}
|
|
1074
|
+
/* Migrate to the token approach: disable the legacy backdrop div first,
|
|
1075
|
+
then style the native ::backdrop via CSS custom properties. */
|
|
1042
1076
|
#customizedDrawer::part(drawer-backdrop) {
|
|
1043
|
-
|
|
1077
|
+
display: none;
|
|
1078
|
+
}
|
|
1079
|
+
#customizedDrawer {
|
|
1080
|
+
--auro-drawer-backdrop-background: rgba(255, 0, 0, 0.5);
|
|
1081
|
+
--auro-drawer-backdrop-filter: blur(2px);
|
|
1044
1082
|
}
|
|
1045
1083
|
</style>
|
|
1046
1084
|
<div>
|
|
@@ -1135,8 +1173,14 @@ The drawer's size and some styles can be styled using CSS `part`.
|
|
|
1135
1173
|
background: linear-gradient(180deg, var( --ds-advanced-color-accents-accent1) 50%, var(--ds-advanced-color-accents-accent1-muted) 100%);
|
|
1136
1174
|
width: 50%;
|
|
1137
1175
|
}
|
|
1176
|
+
/* Migrate to the token approach: disable the legacy backdrop div first,
|
|
1177
|
+
then style the native ::backdrop via CSS custom properties. */
|
|
1138
1178
|
#customizedDrawer::part(drawer-backdrop) {
|
|
1139
|
-
|
|
1179
|
+
display: none;
|
|
1180
|
+
}
|
|
1181
|
+
#customizedDrawer {
|
|
1182
|
+
--auro-drawer-backdrop-background: rgba(255, 0, 0, 0.5);
|
|
1183
|
+
--auro-drawer-backdrop-filter: blur(2px);
|
|
1140
1184
|
}
|
|
1141
1185
|
</style>
|
|
1142
1186
|
<div>
|