fluent-svelte-extra 2.2.0 → 2.2.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.
Files changed (4) hide show
  1. package/SegmentedControl/SegmentedControl.svelte +5 -3
  2. package/TeachingTip/TeachingTipWrapper.scss +19 -4
  3. package/TeachingTip/TeachingTipWrapper.svelte +1 -1
  4. package/package.json +1 -1
package/SegmentedControl/SegmentedControl.svelte CHANGED
@@ -23,7 +23,7 @@ const highlight = tweened({
23
23
  left: 0
24
24
  }, {
25
25
  easing: expoOut,
26
- duration: 333
26
+ duration: getCSSDuration("--fds-control-slow-duration")
27
27
  });
28
28
  setKey(`${segmentId}-setValue`, target => {
29
29
  value = target;
@@ -42,10 +42,12 @@ $: {
42
42
  if (setSelected) {
43
43
  setSelected(value === buttonValue);
44
44
  if (value === buttonValue) {
45
- const { width, left } = button.getBoundingClientRect();
45
+ const htmlButton = button;
46
+ const width = htmlButton.offsetWidth;
47
+ const left = htmlButton.offsetLeft - 1;
46
48
  highlight.set({
47
49
  width,
48
- left: left - containerElement.getBoundingClientRect().left - 1
50
+ left
49
51
  });
50
52
  isSelectedDisabled = button.classList.contains("disabled");
51
53
  }
package/TeachingTip/TeachingTipWrapper.scss CHANGED
@@ -96,6 +96,9 @@
96
96
  --caret-translate-x: -50%;
97
97
  --caret-translate-y: -50%;
98
98
 
99
+ --transform-origin-x: 50%;
100
+ --transform-origin-y: 50%;
101
+
99
102
  &top {
100
103
  & .teaching-tip-caret {
101
104
  bottom: -8px;
@@ -104,7 +107,7 @@
104
107
  transform: translate(var(--caret-translate-x), 0%) rotate(0deg);
105
108
  }
106
109
 
107
- transform-origin: bottom;
110
+ transform-origin: var(--transform-origin-x) bottom;
108
111
  bottom: calc(100% + var(--fds-teaching-tip-offset));
109
112
  --teaching-tip-transition-offset: translateY(12px);
110
113
  }
@@ -117,7 +120,7 @@
117
120
  transform: translate(var(--caret-translate-x), 0%) rotate(180deg);
118
121
  }
119
122
 
120
- transform-origin: top;
123
+ transform-origin: var(--transform-origin-x) top;
121
124
  top: calc(100% + var(--fds-teaching-tip-offset));
122
125
  --teaching-tip-transition-offset: translateY(-12px);
123
126
  }
@@ -130,7 +133,7 @@
130
133
  transform: translate(0%, var(--caret-translate-y)) rotate(270deg);
131
134
  }
132
135
 
133
- transform-origin: right;
136
+ transform-origin: right var(--transform-origin-y);
134
137
  right: calc(100% + var(--fds-teaching-tip-offset));
135
138
  --teaching-tip-transition-offset: translateX(12px);
136
139
  }
@@ -143,7 +146,7 @@
143
146
  transform: translate(0%, var(--caret-translate-y)) rotate(90deg);
144
147
  }
145
148
 
146
- transform-origin: left;
149
+ transform-origin: left var(--transform-origin-y);
147
150
  left: calc(100% + var(--fds-teaching-tip-offset));
148
151
  --teaching-tip-transition-offset: translateX(-12px);
149
152
  }
@@ -157,6 +160,8 @@
157
160
  --caret-left: calc(var(--fds-trigger-width, 32px) / 2);
158
161
  --caret-right: auto;
159
162
  --caret-translate-x: -50%;
163
+
164
+ --transform-origin-x: calc(var(--fds-trigger-width, 32px) / 2);
160
165
  }
161
166
 
162
167
  &end {
@@ -165,6 +170,8 @@
165
170
  --caret-left: auto;
166
171
  --caret-right: calc(var(--fds-trigger-width, 32px) / 2);
167
172
  --caret-translate-x: 50%;
173
+
174
+ --transform-origin-x: calc(100% - (var(--fds-trigger-width, 32px) / 2));
168
175
  }
169
176
 
170
177
  &center {
@@ -173,6 +180,8 @@
173
180
  --caret-left: 50%;
174
181
  --caret-right: auto;
175
182
  --caret-translate-x: -50%;
183
+
184
+ --transform-origin-x: 50%;
176
185
  }
177
186
  }
178
187
  }
@@ -186,6 +195,8 @@
186
195
  --caret-top: calc(var(--fds-trigger-height, 32px) / 2);
187
196
  --caret-bottom: auto;
188
197
  --caret-translate-y: -50%;
198
+
199
+ --transform-origin-y: calc(var(--fds-trigger-height, 32px) / 2);
189
200
  }
190
201
 
191
202
  &end {
@@ -194,6 +205,8 @@
194
205
  --caret-top: auto;
195
206
  --caret-bottom: calc(var(--fds-trigger-height, 32px) / 2);
196
207
  --caret-translate-y: 50%;
208
+
209
+ --transform-origin-y: calc(100% - (var(--fds-trigger-height, 32px) / 2));
197
210
  }
198
211
 
199
212
  &center {
@@ -202,6 +215,8 @@
202
215
  --caret-top: 50%;
203
216
  --caret-bottom: auto;
204
217
  --caret-translate-y: -50%;
218
+
219
+ --transform-origin-y: 50%;
205
220
  }
206
221
  }
207
222
  }
package/TeachingTip/TeachingTipWrapper.svelte CHANGED
@@ -246,4 +246,4 @@ TeachingTips represent a control that displays lightweight UI that is either inf
246
246
  {/if}
247
247
  </div>
248
248
 
249
- <style >.teaching-tip-wrapper{block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;display:inline-block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;position:relative}.teaching-tip-backdrop{block-size:100%;inline-size:100%;left:0;position:fixed;top:0;z-index:9999}.teaching-tip-content{align-items:flex-start;display:flex;flex-direction:column;justify-content:flex-start;padding:9px 12px 11px;position:relative}.teaching-tip-footer{-webkit-margin-before:8px;grid-gap:8px;display:grid;grid-auto-flow:column;grid-auto-rows:1fr;margin-block-start:8px;white-space:nowrap;width:100%}.teaching-tip-footer>:global(.button:only-child){inline-size:50%;justify-self:end}.teaching-tip-image{display:block;max-block-size:100%;max-inline-size:100%;position:relative;z-index:10}.teaching-tip-image.placement-top{-webkit-margin-after:4px;border-radius:var(--fds-overlay-corner-radius) var(--fds-overlay-corner-radius) 0 0;margin-block-end:4px}.teaching-tip-image.placement-bottom{-webkit-margin-before:4px;border-radius:0 0 var(--fds-overlay-corner-radius) var(--fds-overlay-corner-radius);margin-block-start:4px}.teaching-tip-caret{color:var(--fds-solid-background-quarternary);position:absolute;z-index:10000}.teaching-tip-caret .stroke{color:var(--fds-surface-stroke-default)}.teaching-tip-anchor{position:absolute;transform:var(--fds-teaching-tip-transform);z-index:10000}.teaching-tip-anchor :global(.teaching-tip-close-button){color:var(--fds-text-primary);inset-block-start:6px;inset-inline-end:6px;position:absolute;z-index:5}.teaching-tip-anchor :global(.teaching-tip-close-button) :global(svg){block-size:12px;inline-size:12px}.teaching-tip-anchor.placement-{--fds-teaching-tip-transform:translateX(0%);--fds-caret-left:50%;--fds-caret-right:auto;--fds-caret-top:50%;--fds-caret-bottom:auto;--fds-caret-translate-x:-50%;--fds-caret-translate-y:-50%}.teaching-tip-anchor.placement-top{--fds-teaching-tip-transition-offset:translateY(12px);bottom:calc(100% + var(--fds-teaching-tip-offset));transform-origin:bottom}.teaching-tip-anchor.placement-top .teaching-tip-caret{bottom:-8px;left:var(--fds-caret-left);right:var(--fds-caret-right);transform:translate(var(--fds-caret-translate-x)) rotate(0deg)}.teaching-tip-anchor.placement-bottom{--fds-teaching-tip-transition-offset:translateY(-12px);top:calc(100% + var(--fds-teaching-tip-offset));transform-origin:top}.teaching-tip-anchor.placement-bottom .teaching-tip-caret{left:var(--fds-caret-left);right:var(--fds-caret-right);top:-8px;transform:translate(var(--fds-caret-translate-x)) rotate(180deg)}.teaching-tip-anchor.placement-left{--fds-teaching-tip-transition-offset:translateX(12px);right:calc(100% + var(--fds-teaching-tip-offset));transform-origin:right}.teaching-tip-anchor.placement-left .teaching-tip-caret{bottom:var(--fds-caret-bottom);right:-11px;top:var(--fds-caret-top);transform:translateY(var(--fds-caret-translate-y)) rotate(270deg)}.teaching-tip-anchor.placement-right{--fds-teaching-tip-transition-offset:translateX(-12px);left:calc(100% + var(--fds-teaching-tip-offset));transform-origin:left}.teaching-tip-anchor.placement-right .teaching-tip-caret{bottom:var(--fds-caret-bottom);left:-11px;top:var(--fds-caret-top);transform:translateY(var(--fds-caret-translate-y)) rotate(90deg)}.teaching-tip-anchor.placement-bottom.alignment-start,.teaching-tip-anchor.placement-top.alignment-start{--fds-teaching-tip-transform:translateX(0%);--fds-caret-left:calc(var(--fds-trigger-width, 32px)/2);--fds-caret-right:auto;--fds-caret-translate-x:-50%;inset-inline-start:0}.teaching-tip-anchor.placement-bottom.alignment-end,.teaching-tip-anchor.placement-top.alignment-end{--fds-teaching-tip-transform:translateX(0%);--fds-caret-left:auto;--fds-caret-right:calc(var(--fds-trigger-width, 32px)/2);--fds-caret-translate-x:50%;inset-inline-end:0}.teaching-tip-anchor.placement-bottom.alignment-center,.teaching-tip-anchor.placement-top.alignment-center{--fds-teaching-tip-transform:translateX(-50%);--fds-caret-left:50%;--fds-caret-right:auto;--fds-caret-translate-x:-50%;inset-inline-start:50%}.teaching-tip-anchor.placement-left.alignment-start,.teaching-tip-anchor.placement-right.alignment-start{--fds-teaching-tip-transform:translateY(0%);--fds-caret-top:calc(var(--fds-trigger-height, 32px)/2);--fds-caret-bottom:auto;--fds-caret-translate-y:-50%;inset-block-start:0}.teaching-tip-anchor.placement-left.alignment-end,.teaching-tip-anchor.placement-right.alignment-end{--fds-teaching-tip-transform:translateY(0%);--fds-caret-top:auto;--fds-caret-bottom:calc(var(--fds-trigger-height, 32px)/2);--fds-caret-translate-y:50%;inset-block-end:0}.teaching-tip-anchor.placement-left.alignment-center,.teaching-tip-anchor.placement-right.alignment-center{--fds-teaching-tip-transform:translateY(-50%);--fds-caret-top:50%;--fds-caret-bottom:auto;--fds-caret-translate-y:-50%;inset-block-start:50%}</style>
249
+ <style >.teaching-tip-wrapper{block-size:-webkit-fit-content;block-size:-moz-fit-content;block-size:fit-content;display:inline-block;inline-size:-webkit-fit-content;inline-size:-moz-fit-content;inline-size:fit-content;position:relative}.teaching-tip-backdrop{block-size:100%;inline-size:100%;left:0;position:fixed;top:0;z-index:9999}.teaching-tip-content{align-items:flex-start;display:flex;flex-direction:column;justify-content:flex-start;padding:9px 12px 11px;position:relative}.teaching-tip-footer{-webkit-margin-before:8px;grid-gap:8px;display:grid;grid-auto-flow:column;grid-auto-rows:1fr;margin-block-start:8px;white-space:nowrap;width:100%}.teaching-tip-footer>:global(.button:only-child){inline-size:50%;justify-self:end}.teaching-tip-image{display:block;max-block-size:100%;max-inline-size:100%;position:relative;z-index:10}.teaching-tip-image.placement-top{-webkit-margin-after:4px;border-radius:var(--fds-overlay-corner-radius) var(--fds-overlay-corner-radius) 0 0;margin-block-end:4px}.teaching-tip-image.placement-bottom{-webkit-margin-before:4px;border-radius:0 0 var(--fds-overlay-corner-radius) var(--fds-overlay-corner-radius);margin-block-start:4px}.teaching-tip-caret{color:var(--fds-solid-background-quarternary);position:absolute;z-index:10000}.teaching-tip-caret .stroke{color:var(--fds-surface-stroke-default)}.teaching-tip-anchor{position:absolute;transform:var(--fds-teaching-tip-transform);z-index:10000}.teaching-tip-anchor :global(.teaching-tip-close-button){color:var(--fds-text-primary);inset-block-start:6px;inset-inline-end:6px;position:absolute;z-index:5}.teaching-tip-anchor :global(.teaching-tip-close-button) :global(svg){block-size:12px;inline-size:12px}.teaching-tip-anchor.placement-{--fds-teaching-tip-transform:translateX(0%);--fds-caret-left:50%;--fds-caret-right:auto;--fds-caret-top:50%;--fds-caret-bottom:auto;--fds-caret-translate-x:-50%;--fds-caret-translate-y:-50%;--fds-transform-origin-x:50%;--fds-transform-origin-y:50%}.teaching-tip-anchor.placement-top{--fds-teaching-tip-transition-offset:translateY(12px);bottom:calc(100% + var(--fds-teaching-tip-offset));transform-origin:var(--fds-transform-origin-x) bottom}.teaching-tip-anchor.placement-top .teaching-tip-caret{bottom:-8px;left:var(--fds-caret-left);right:var(--fds-caret-right);transform:translate(var(--fds-caret-translate-x)) rotate(0deg)}.teaching-tip-anchor.placement-bottom{--fds-teaching-tip-transition-offset:translateY(-12px);top:calc(100% + var(--fds-teaching-tip-offset));transform-origin:var(--fds-transform-origin-x) top}.teaching-tip-anchor.placement-bottom .teaching-tip-caret{left:var(--fds-caret-left);right:var(--fds-caret-right);top:-8px;transform:translate(var(--fds-caret-translate-x)) rotate(180deg)}.teaching-tip-anchor.placement-left{--fds-teaching-tip-transition-offset:translateX(12px);right:calc(100% + var(--fds-teaching-tip-offset));transform-origin:right var(--fds-transform-origin-y)}.teaching-tip-anchor.placement-left .teaching-tip-caret{bottom:var(--fds-caret-bottom);right:-11px;top:var(--fds-caret-top);transform:translateY(var(--fds-caret-translate-y)) rotate(270deg)}.teaching-tip-anchor.placement-right{--fds-teaching-tip-transition-offset:translateX(-12px);left:calc(100% + var(--fds-teaching-tip-offset));transform-origin:left var(--fds-transform-origin-y)}.teaching-tip-anchor.placement-right .teaching-tip-caret{bottom:var(--fds-caret-bottom);left:-11px;top:var(--fds-caret-top);transform:translateY(var(--fds-caret-translate-y)) rotate(90deg)}.teaching-tip-anchor.placement-bottom.alignment-start,.teaching-tip-anchor.placement-top.alignment-start{--fds-teaching-tip-transform:translateX(0%);--fds-caret-left:calc(var(--fds-trigger-width, 32px)/2);--fds-caret-right:auto;--fds-caret-translate-x:-50%;--fds-transform-origin-x:calc(var(--fds-trigger-width, 32px)/2);inset-inline-start:0}.teaching-tip-anchor.placement-bottom.alignment-end,.teaching-tip-anchor.placement-top.alignment-end{--fds-teaching-tip-transform:translateX(0%);--fds-caret-left:auto;--fds-caret-right:calc(var(--fds-trigger-width, 32px)/2);--fds-caret-translate-x:50%;--fds-transform-origin-x:calc(100% - var(--fds-trigger-width, 32px)/2);inset-inline-end:0}.teaching-tip-anchor.placement-bottom.alignment-center,.teaching-tip-anchor.placement-top.alignment-center{--fds-teaching-tip-transform:translateX(-50%);--fds-caret-left:50%;--fds-caret-right:auto;--fds-caret-translate-x:-50%;--fds-transform-origin-x:50%;inset-inline-start:50%}.teaching-tip-anchor.placement-left.alignment-start,.teaching-tip-anchor.placement-right.alignment-start{--fds-teaching-tip-transform:translateY(0%);--fds-caret-top:calc(var(--fds-trigger-height, 32px)/2);--fds-caret-bottom:auto;--fds-caret-translate-y:-50%;--fds-transform-origin-y:calc(var(--fds-trigger-height, 32px)/2);inset-block-start:0}.teaching-tip-anchor.placement-left.alignment-end,.teaching-tip-anchor.placement-right.alignment-end{--fds-teaching-tip-transform:translateY(0%);--fds-caret-top:auto;--fds-caret-bottom:calc(var(--fds-trigger-height, 32px)/2);--fds-caret-translate-y:50%;--fds-transform-origin-y:calc(100% - var(--fds-trigger-height, 32px)/2);inset-block-end:0}.teaching-tip-anchor.placement-left.alignment-center,.teaching-tip-anchor.placement-right.alignment-center{--fds-teaching-tip-transform:translateY(-50%);--fds-caret-top:50%;--fds-caret-bottom:auto;--fds-caret-translate-y:-50%;--fds-transform-origin-y:50%;inset-block-start:50%}</style>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fluent-svelte-extra",
3
- "version": "2.2.0",
3
+ "version": "2.2.2",
4
4
  "description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
5
5
  "homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
6
6
  "license": "MIT",