@aurodesignsystem-dev/auro-drawer 0.0.0-pr134.0 → 0.0.0-pr136.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 +12 -56
- package/demo/auro-drawer.min.js +145 -418
- package/dist/{auro-drawer-DTS2mk2U.js → auro-drawer-UEcwC42s.js} +24 -25
- package/dist/index.d.ts +2 -18
- package/dist/index.js +1 -1
- package/dist/registered.js +1 -1
- package/package.json +2 -6
- package/demo/keyboard-audit.html +0 -766
package/demo/api.md
CHANGED
|
@@ -42,23 +42,14 @@ 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 |
|
|
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`). |
|
|
45
|
+
| Name | Description |
|
|
46
|
+
| --------------- | ----------------------------------------------------- |
|
|
47
|
+
| close-button | to style the close button. |
|
|
48
|
+
| drawer-backdrop | to style the backdrop behind the the content wrapper. |
|
|
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. |
|
|
62
53
|
<!-- AURO-GENERATED-CONTENT:END -->
|
|
63
54
|
|
|
64
55
|
## Basic
|
|
@@ -1022,36 +1013,13 @@ To customize the aria-label text for the close button, use the `ariaLabel.drawer
|
|
|
1022
1013
|
|
|
1023
1014
|
The drawer's size and some styles can be styled using CSS `part`.
|
|
1024
1015
|
|
|
1025
|
-
- `auro-drawer::part(
|
|
1016
|
+
- `auro-drawer::part(backdrop)` to style the backdrop behind the the content wrapper.
|
|
1017
|
+
- `auro-drawer ::part(drawer-wrapper)` to style the container of the drawer content.
|
|
1026
1018
|
- `auro-drawer ::part(drawer-header)` to style the header.
|
|
1027
1019
|
- `auro-drawer ::part(drawer-content)` to style the content wrapper.
|
|
1028
1020
|
- `auro-drawer ::part(drawer-footer)` to style the footer.
|
|
1029
1021
|
- `auro-drawer ::part(close-button)` to style the close button.
|
|
1030
1022
|
|
|
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
|
-
|
|
1055
1023
|
`close` slot can be used to replace the close button to a different element.
|
|
1056
1024
|
|
|
1057
1025
|
<div class="exampleWrapper">
|
|
@@ -1071,14 +1039,8 @@ auro-drawer {
|
|
|
1071
1039
|
background: linear-gradient(180deg, var( --ds-advanced-color-accents-accent1) 50%, var(--ds-advanced-color-accents-accent1-muted) 100%);
|
|
1072
1040
|
width: 50%;
|
|
1073
1041
|
}
|
|
1074
|
-
/* Migrate to the token approach: disable the legacy backdrop div first,
|
|
1075
|
-
then style the native ::backdrop via CSS custom properties. */
|
|
1076
1042
|
#customizedDrawer::part(drawer-backdrop) {
|
|
1077
|
-
|
|
1078
|
-
}
|
|
1079
|
-
#customizedDrawer {
|
|
1080
|
-
--auro-drawer-backdrop-background: rgba(255, 0, 0, 0.5);
|
|
1081
|
-
--auro-drawer-backdrop-filter: blur(2px);
|
|
1043
|
+
background: var(--ds-advanced-color-button-primary-background-inverse-disabled);
|
|
1082
1044
|
}
|
|
1083
1045
|
</style>
|
|
1084
1046
|
<div>
|
|
@@ -1173,14 +1135,8 @@ auro-drawer {
|
|
|
1173
1135
|
background: linear-gradient(180deg, var( --ds-advanced-color-accents-accent1) 50%, var(--ds-advanced-color-accents-accent1-muted) 100%);
|
|
1174
1136
|
width: 50%;
|
|
1175
1137
|
}
|
|
1176
|
-
/* Migrate to the token approach: disable the legacy backdrop div first,
|
|
1177
|
-
then style the native ::backdrop via CSS custom properties. */
|
|
1178
1138
|
#customizedDrawer::part(drawer-backdrop) {
|
|
1179
|
-
|
|
1180
|
-
}
|
|
1181
|
-
#customizedDrawer {
|
|
1182
|
-
--auro-drawer-backdrop-background: rgba(255, 0, 0, 0.5);
|
|
1183
|
-
--auro-drawer-backdrop-filter: blur(2px);
|
|
1139
|
+
background: var(--ds-advanced-color-button-primary-background-inverse-disabled);
|
|
1184
1140
|
}
|
|
1185
1141
|
</style>
|
|
1186
1142
|
<div>
|