@box/blueprint-web 12.127.1 → 12.128.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.
Files changed (3) hide show
  1. package/dist/lib-esm/collapsible/collapsible-section.module.js +1 -1
  2. package/dist/lib-esm/index.css +48 -28
  3. package/package.json +3 -3
package/dist/lib-esm/collapsible/collapsible-section.module.js CHANGED
@@ -1,4 +1,4 @@
1
1
  import '../index.css';
2
- var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--cb40a","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--cb40a","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--cb40a","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--cb40a","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--cb40a"};
2
+ var styles = {"collapsibleSection":"bp_collapsible_section_module_collapsibleSection--58278","collapsibleSectionHeader":"bp_collapsible_section_module_collapsibleSectionHeader--58278","collapsibleSectionHeaderArrow":"bp_collapsible_section_module_collapsibleSectionHeaderArrow--58278","collapsibleSectionContent":"bp_collapsible_section_module_collapsibleSectionContent--58278","collapsibleSectionBody":"bp_collapsible_section_module_collapsibleSectionBody--58278"};
3
3
 
4
4
  export { styles as default };
package/dist/lib-esm/index.css CHANGED
@@ -3125,7 +3125,7 @@
3125
3125
  .bp_checkbox_module_option--ae591.bp_checkbox_module_disabled--ae591 .bp_checkbox_module_label--ae591{
3126
3126
  cursor:default;
3127
3127
  }
3128
- .bp_collapsible_section_module_collapsibleSection--cb40a[data-modern=false]{
3128
+ .bp_collapsible_section_module_collapsibleSection--58278[data-modern=false]{
3129
3129
  --collapsible-section-header-padding:var(--space-5);
3130
3130
  --collapsible-section-body-padding:var(--space-5);
3131
3131
  --collapsible-section-padding:var(--space-5);
@@ -3140,7 +3140,7 @@
3140
3140
  --collapsible-section-header-expanded-border-bottom:var(--border-1) solid var(--border-collapsible-border);
3141
3141
  }
3142
3142
 
3143
- .bp_collapsible_section_module_collapsibleSection--cb40a[data-modern=true]{
3143
+ .bp_collapsible_section_module_collapsibleSection--58278[data-modern=true]{
3144
3144
  --collapsible-section-header-padding:var(--bp-space-050) var(--bp-space-020);
3145
3145
  --collapsible-section-body-padding:var(--bp-space-040) var(--bp-space-050);
3146
3146
  --collapsible-section-padding:var(--bp-space-050);
@@ -3155,7 +3155,21 @@
3155
3155
  --collapsible-section-header-expanded-border-bottom:none;
3156
3156
  }
3157
3157
 
3158
- .bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless]{
3158
+ .bp_collapsible_section_module_collapsibleSection--58278[data-modern=false][data-variant=borderless]{
3159
+ --collapsible-section-border:none;
3160
+ --collapsible-section-header-background-color:#0000;
3161
+ --collapsible-section-content-background-color:#0000;
3162
+ --collapsible-section-padding:var(--space-4);
3163
+ --collapsible-section-header-padding:0;
3164
+ --collapsible-section-body-padding:var(--space-2);
3165
+ --collapsible-section-header-expanded-border-bottom:inherit;
3166
+ --collapsible-section-borderless-arrow-margin:var(--space-2);
3167
+ --collapsible-section-borderless-header-padding-block:var(--space-2);
3168
+ --collapsible-section-borderless-header-padding-inline-start:var(--space-4);
3169
+ --collapsible-section-borderless-header-hover-background:var(--surface-cta-surface-tertiary-hover);
3170
+ }
3171
+
3172
+ .bp_collapsible_section_module_collapsibleSection--58278[data-modern=true][data-variant=borderless]{
3159
3173
  --collapsible-section-border:none;
3160
3174
  --collapsible-section-header-background-color:#0000;
3161
3175
  --collapsible-section-content-background-color:#0000;
@@ -3163,12 +3177,16 @@
3163
3177
  --collapsible-section-header-padding:0;
3164
3178
  --collapsible-section-body-padding:var(--bp-space-020);
3165
3179
  --collapsible-section-header-expanded-border-bottom:inherit;
3180
+ --collapsible-section-borderless-arrow-margin:var(--bp-space-020);
3181
+ --collapsible-section-borderless-header-padding-block:var(--bp-space-020);
3182
+ --collapsible-section-borderless-header-padding-inline-start:var(--bp-space-040);
3183
+ --collapsible-section-borderless-header-hover-background:var(--bp-surface-cta-surface-tertiary-hover);
3166
3184
  }
3167
3185
 
3168
- .bp_collapsible_section_module_collapsibleSection--cb40a{
3186
+ .bp_collapsible_section_module_collapsibleSection--58278{
3169
3187
  width:100%;
3170
3188
  }
3171
- .bp_collapsible_section_module_collapsibleSectionHeader--cb40a{
3189
+ .bp_collapsible_section_module_collapsibleSectionHeader--58278{
3172
3190
  align-items:center;
3173
3191
  background:var(--collapsible-section-header-background-color);
3174
3192
  border:var(--collapsible-section-border);
@@ -3185,7 +3203,7 @@
3185
3203
  user-select:none;
3186
3204
  width:100%;
3187
3205
  }
3188
- .bp_collapsible_section_module_collapsibleSectionHeader--cb40a:focus::before{
3206
+ .bp_collapsible_section_module_collapsibleSectionHeader--58278:focus::before{
3189
3207
  border:var(--collapsible-section-outline-width) solid var(--collapsible-section-header-focus-color);
3190
3208
  border-radius:var(--collapsible-section-outline-border-radius);
3191
3209
  bottom:var(--collapsible-section-outline-offset);
@@ -3195,53 +3213,55 @@
3195
3213
  right:var(--collapsible-section-outline-offset);
3196
3214
  top:var(--collapsible-section-outline-offset);
3197
3215
  }
3198
- .bp_collapsible_section_module_collapsibleSectionHeader--cb40a[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--cb40a[aria-expanded=true]::before{
3216
+ .bp_collapsible_section_module_collapsibleSectionHeader--58278[aria-expanded=true],.bp_collapsible_section_module_collapsibleSectionHeader--58278[aria-expanded=true]::before{
3199
3217
  border-end-end-radius:0;
3200
3218
  border-end-start-radius:0;
3201
3219
  }
3202
- .bp_collapsible_section_module_collapsibleSectionHeader--cb40a[aria-expanded=true]{
3220
+ .bp_collapsible_section_module_collapsibleSectionHeader--58278[aria-expanded=true]{
3203
3221
  border-bottom:var(--collapsible-section-header-expanded-border-bottom);
3204
3222
  padding-block:var(--collapsible-section-header-padding);
3205
3223
  }
3206
- .bp_collapsible_section_module_collapsibleSectionHeaderArrow--cb40a{
3224
+ .bp_collapsible_section_module_collapsibleSectionHeaderArrow--58278{
3207
3225
  display:block;
3208
3226
  margin-inline-start:var(--collapsible-section-padding);
3209
3227
  }
3210
- .bp_collapsible_section_module_collapsibleSectionHeaderArrow--cb40a > svg{
3228
+ .bp_collapsible_section_module_collapsibleSectionHeaderArrow--58278 > svg{
3211
3229
  vertical-align:middle;
3212
3230
  }
3213
- .bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeaderArrow--cb40a{
3214
- margin-inline-start:var(--bp-space-020);
3231
+ .bp_collapsible_section_module_collapsibleSection--58278[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeaderArrow--58278{
3232
+ margin-inline-start:var(--collapsible-section-borderless-arrow-margin);
3215
3233
  }
3216
- .bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a{
3234
+ .bp_collapsible_section_module_collapsibleSection--58278[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--58278{
3217
3235
  margin-inline-start:calc(var(--collapsible-section-padding)*-1);
3218
- padding-block:var(--bp-space-030);
3236
+ padding-block:var(--collapsible-section-borderless-header-padding-block);
3237
+ padding-inline-end:.875rem;
3238
+ padding-inline-start:var(--collapsible-section-borderless-header-padding-inline-start);
3219
3239
  width:-moz-fit-content;
3220
3240
  width:fit-content;
3221
3241
  }
3222
- .bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a:focus-visible,.bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a:hover{
3223
- background:var(--bp-surface-cta-surface-tertiary-hover);
3242
+ .bp_collapsible_section_module_collapsibleSection--58278[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--58278:focus-visible,.bp_collapsible_section_module_collapsibleSection--58278[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--58278:hover{
3243
+ background:var(--collapsible-section-borderless-header-hover-background);
3224
3244
  }
3225
- .bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a:focus-visible{
3245
+ .bp_collapsible_section_module_collapsibleSection--58278[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--58278:focus-visible{
3226
3246
  outline:var(--collapsible-section-outline-width) solid var(--collapsible-section-header-focus-color);
3227
3247
  outline-offset:var(--collapsible-section-outline-offset);
3228
3248
  }
3229
- .bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a:focus::before{
3249
+ .bp_collapsible_section_module_collapsibleSection--58278[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--58278:focus::before{
3230
3250
  display:none;
3231
3251
  }
3232
- .bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a[aria-expanded=false],.bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--cb40a[aria-expanded=true]{
3252
+ .bp_collapsible_section_module_collapsibleSection--58278[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--58278[aria-expanded=false],.bp_collapsible_section_module_collapsibleSection--58278[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionHeader--58278[aria-expanded=true]{
3233
3253
  border-radius:var(--collapsible-section-border-radius);
3234
3254
  }
3235
- .bp_collapsible_section_module_collapsibleSectionContent--cb40a{
3255
+ .bp_collapsible_section_module_collapsibleSectionContent--58278{
3236
3256
  overflow:hidden;
3237
3257
  }
3238
- .bp_collapsible_section_module_collapsibleSectionContent--cb40a[data-state=open]{
3239
- animation:bp_collapsible_section_module_slideDown--cb40a .25s ease-out;
3258
+ .bp_collapsible_section_module_collapsibleSectionContent--58278[data-state=open]{
3259
+ animation:bp_collapsible_section_module_slideDown--58278 .25s ease-out;
3240
3260
  }
3241
- .bp_collapsible_section_module_collapsibleSectionContent--cb40a[data-state=closed]{
3242
- animation:bp_collapsible_section_module_slideUp--cb40a .25s ease-out;
3261
+ .bp_collapsible_section_module_collapsibleSectionContent--58278[data-state=closed]{
3262
+ animation:bp_collapsible_section_module_slideUp--58278 .25s ease-out;
3243
3263
  }
3244
- .bp_collapsible_section_module_collapsibleSectionBody--cb40a{
3264
+ .bp_collapsible_section_module_collapsibleSectionBody--58278{
3245
3265
  align-items:center;
3246
3266
  background:var(--collapsible-section-content-background-color);
3247
3267
  border:var(--collapsible-section-border);
@@ -3253,11 +3273,11 @@
3253
3273
  padding-block:var(--collapsible-section-body-padding);
3254
3274
  padding-inline:var(--collapsible-section-padding);
3255
3275
  }
3256
- .bp_collapsible_section_module_collapsibleSection--cb40a[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionBody--cb40a{
3276
+ .bp_collapsible_section_module_collapsibleSection--58278[data-variant=borderless] .bp_collapsible_section_module_collapsibleSectionBody--58278{
3257
3277
  padding-inline:0;
3258
3278
  }
3259
3279
 
3260
- @keyframes bp_collapsible_section_module_slideDown--cb40a{
3280
+ @keyframes bp_collapsible_section_module_slideDown--58278{
3261
3281
  from{
3262
3282
  height:0;
3263
3283
  }
@@ -3265,7 +3285,7 @@
3265
3285
  height:var(--radix-collapsible-content-height);
3266
3286
  }
3267
3287
  }
3268
- @keyframes bp_collapsible_section_module_slideUp--cb40a{
3288
+ @keyframes bp_collapsible_section_module_slideUp--58278{
3269
3289
  from{
3270
3290
  height:var(--radix-collapsible-content-height);
3271
3291
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@box/blueprint-web",
3
- "version": "12.127.1",
3
+ "version": "12.128.0",
4
4
  "type": "module",
5
5
  "license": "SEE LICENSE IN LICENSE",
6
6
  "publishConfig": {
@@ -47,7 +47,7 @@
47
47
  "dependencies": {
48
48
  "@ariakit/react": "0.4.15",
49
49
  "@ariakit/react-core": "0.4.15",
50
- "@box/blueprint-web-assets": "^4.96.8",
50
+ "@box/blueprint-web-assets": "^4.96.9",
51
51
  "@internationalized/date": "^3.7.0",
52
52
  "@radix-ui/react-accordion": "1.1.2",
53
53
  "@radix-ui/react-checkbox": "1.0.4",
@@ -77,7 +77,7 @@
77
77
  "type-fest": "^3.2.0"
78
78
  },
79
79
  "devDependencies": {
80
- "@box/storybook-utils": "^0.16.19",
80
+ "@box/storybook-utils": "^0.16.20",
81
81
  "@figma/code-connect": "1.3.12",
82
82
  "@types/react": "^18.0.0",
83
83
  "@types/react-dom": "^18.0.0",