@fusion.dev/helix 0.16.0 → 0.16.2

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.
@@ -289,7 +289,8 @@ align-items: var(--_carousel-controls-along);
289
289
 
290
290
  justify-content: flex-start;
291
291
  padding-block-start: var(--helix-space-none);
292
- padding-inline: var(--helix-space-md);
292
+
293
+ padding-inline: calc(var(--_carousel-bleed) + var(--helix-space-md));
293
294
  pointer-events: none;
294
295
  z-index: var(--helix-layer-raised);
295
296
  }
@@ -27,7 +27,8 @@ flex-wrap: wrap;
27
27
  min-block-size: var(--helix-size-control);
28
28
 
29
29
  padding-block: var(--helix-space-2xs);
30
- padding-inline-end: calc(var(--helix-space-xs) + var(--helix-size-icon));
30
+
31
+ padding-inline-end: calc(var(--helix-space-xs) + var(--helix-size-icon-tight));
31
32
  position: relative;
32
33
  }
33
34
 
@@ -95,10 +96,10 @@ opacity: 0.5;
95
96
  }
96
97
 
97
98
  [part="indicator"] {
98
- block-size: var(--helix-size-icon);
99
+ block-size: var(--helix-size-icon-tight);
99
100
  color: var(--helix-color-foreground-muted);
100
101
  flex: 0 0 auto;
101
- inline-size: var(--helix-size-icon);
102
+ inline-size: var(--helix-size-icon-tight);
102
103
  }
103
104
 
104
105
  :host(:state(open)) [part="indicator"],
@@ -81,6 +81,23 @@ clip-path: inset(0 calc(var(--helix-space-xl) * -1) 100% calc(var(--helix-space-
81
81
  }
82
82
  }
83
83
 
84
+ :host(:not([variant="full"])) [part="surface"] {
85
+ clip-path: inset(0 100% 100% calc(var(--helix-space-xl) * -1));
86
+ }
87
+
88
+ :host(:not([variant="full"])) [part="surface"]:popover-open {
89
+ clip-path: inset(
90
+ 0 calc(var(--helix-space-xl) * -1) calc(var(--helix-space-xl) * -1)
91
+ calc(var(--helix-space-xl) * -1)
92
+ );
93
+ }
94
+
95
+ @starting-style {
96
+ :host(:not([variant="full"])) [part="surface"]:popover-open {
97
+ clip-path: inset(0 100% 100% calc(var(--helix-space-xl) * -1));
98
+ }
99
+ }
100
+
84
101
  :host([variant="full"]) [part="surface"],
85
102
  :host([data-narrow]) [part="surface"] {
86
103
 
@@ -11,11 +11,12 @@ display: grid;
11
11
  grid-template-rows: minmax(0, 1fr);
12
12
 
13
13
  margin-block-start: var(--_toast-gap, var(--helix-space-xs));
14
+
14
15
  transition:
15
- grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard),
16
- margin-block-start var(--helix-duration-normal) var(--helix-easing-standard),
17
- opacity var(--helix-duration-fast) var(--helix-easing-standard),
18
- translate var(--helix-duration-normal) var(--helix-easing-standard);
16
+ grid-template-rows var(--helix-duration-normal) var(--helix-easing-decelerate),
17
+ margin-block-start var(--helix-duration-normal) var(--helix-easing-decelerate),
18
+ opacity var(--helix-duration-normal) var(--helix-easing-decelerate),
19
+ translate var(--helix-duration-normal) var(--helix-easing-decelerate);
19
20
 
20
21
  inline-size: var(--toast-inline-size, 22rem);
21
22
  max-inline-size: calc(100vw - var(--helix-space-xl));
@@ -188,7 +189,7 @@ translate: 0 var(--_toast-enter, var(--helix-space-lg));
188
189
  :host([data-closed]) [part="item"] {
189
190
 
190
191
  padding-block: 0;
191
- transition: padding-block var(--helix-duration-normal) var(--helix-easing-standard);
192
+ transition: padding-block var(--helix-duration-normal) var(--helix-easing-accelerate);
192
193
  }
193
194
 
194
195
  :host([hidden]:not([hidden="until-found"])) {
@@ -201,11 +202,12 @@ margin-block-start: 0;
201
202
  opacity: 0;
202
203
  translate: 0 var(--_toast-enter, var(--helix-space-lg));
203
204
  visibility: hidden;
205
+
204
206
  transition:
205
- grid-template-rows var(--helix-duration-normal) var(--helix-easing-standard),
206
- margin-block-start var(--helix-duration-normal) var(--helix-easing-standard),
207
- opacity var(--helix-duration-fast) var(--helix-easing-standard),
208
- translate var(--helix-duration-normal) var(--helix-easing-standard),
207
+ grid-template-rows var(--helix-duration-normal) var(--helix-easing-accelerate),
208
+ margin-block-start var(--helix-duration-normal) var(--helix-easing-accelerate),
209
+ opacity var(--helix-duration-normal) var(--helix-easing-accelerate),
210
+ translate var(--helix-duration-normal) var(--helix-easing-accelerate),
209
211
  visibility var(--helix-duration-normal) step-end;
210
212
  }
211
213
 
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@fusion.dev/helix",
3
3
  "description": "Styled component tier. Extends the headless tier with token-driven presentation.",
4
- "version": "0.16.0",
4
+ "version": "0.16.2",
5
5
  "license": "MIT",
6
6
  "author": "Ross Sheppard <ross.sheppard@fusion.dev>",
7
7
  "repository": {
@@ -46,14 +46,14 @@
46
46
  },
47
47
  "bugs": "https://github.com/project-fusion/fusion/issues",
48
48
  "dependencies": {
49
- "@fusion.dev/helix-core": "0.16.0",
50
- "@fusion.dev/helix-headless": "0.16.0",
51
- "@fusion.dev/helix-styles": "0.16.0"
49
+ "@fusion.dev/helix-core": "0.16.2",
50
+ "@fusion.dev/helix-headless": "0.16.2",
51
+ "@fusion.dev/helix-styles": "0.16.2"
52
52
  },
53
53
  "devDependencies": {
54
54
  "@custom-elements-manifest/analyzer": "^0.11.0",
55
- "@fusion.dev/helix-cem": "0.16.0",
56
- "@fusion.dev/helix-testing": "0.16.0",
55
+ "@fusion.dev/helix-cem": "0.16.2",
56
+ "@fusion.dev/helix-testing": "0.16.2",
57
57
  "@fusion.dev/scripts": "0.0.0-dev",
58
58
  "@happy-dom/global-registrator": "^20.0.0",
59
59
  "@lit-labs/ssr": "^3.3.0",