fluent-svelte-extra 1.9.6 → 1.9.8

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/TeachingTip/TeachingTipWrapper.scss +181 -181
  2. package/TeachingTip/TeachingTipWrapper.svelte +139 -140
  3. package/TeachingTip/TeachingTipWrapper.svelte.d.ts +1 -1
  4. package/package.json +1 -1
package/TeachingTip/TeachingTipWrapper.scss CHANGED
@@ -1,181 +1,181 @@
1
- @use "../mixins" as *;
2
-
3
- .teaching-tip- {
4
- &wrapper {
5
- display: inline-block;
6
- inline-size: fit-content;
7
- block-size: fit-content;
8
- position: relative;
9
- }
10
-
11
- &backdrop {
12
- position: fixed;
13
- top: 0;
14
- left: 0;
15
- inline-size: 100%;
16
- block-size: 100%;
17
- z-index: 9999;
18
- }
19
-
20
- &content {
21
- position: relative;
22
- @include flex($direction: column, $justify: flex-start, $align: flex-start);
23
- padding: 9px 12px 11px 12px;
24
- }
25
-
26
- &footer {
27
- margin-block-start: 8px;
28
- display: grid;
29
- grid-auto-rows: 1fr;
30
- grid-auto-flow: column;
31
- grid-gap: 8px;
32
- border-block-start: 1px solid var(--card-stroke-default);
33
- white-space: nowrap;
34
-
35
- > :global(.button:only-child) {
36
- inline-size: 50%;
37
- justify-self: end;
38
- }
39
- }
40
-
41
- &image {
42
- display: block;
43
- max-inline-size: 100%;
44
- max-block-size: 100%;
45
- position: relative;
46
- z-index: 10;
47
-
48
- &.placement- {
49
- &top {
50
- margin-block-end: 4px;
51
- border-radius: var(--overlay-corner-radius) var(--overlay-corner-radius) 0 0;
52
- }
53
-
54
- &bottom {
55
- margin-block-start: 4px;
56
- border-radius: 0 0 var(--overlay-corner-radius) var(--overlay-corner-radius);
57
- }
58
- }
59
- }
60
-
61
- &caret {
62
- position: absolute;
63
- z-index: 10000;
64
- color: var(--solid-background-quarternary);
65
-
66
- & .stroke {
67
- color: var(--surface-stroke-default);
68
- }
69
- }
70
-
71
- &anchor {
72
- :global(.teaching-tip-close-button) {
73
- position: absolute;
74
- inset-block-start: 6px;
75
- inset-inline-end: 6px;
76
- color: var(--text-primary);
77
- z-index: 5;
78
-
79
- & :global(svg) {
80
- inline-size: 12px;
81
- block-size: 12px;
82
- }
83
- }
84
-
85
- position: absolute;
86
- z-index: 10000;
87
- transform: var(--teaching-tip-transform);
88
-
89
- &.placement- {
90
- --teaching-tip-transform: translateX(0%);
91
-
92
- &top {
93
- & .teaching-tip-caret {
94
- bottom: -8px;
95
- left: 50%;
96
- transform: translate(-50%, 0%);
97
- }
98
-
99
- transform-origin: bottom;
100
- bottom: calc(100% + var(--teaching-tip-offset));
101
- --teaching-tip-transition-offset: translateY(12px);
102
- }
103
-
104
- &bottom {
105
- & .teaching-tip-caret {
106
- top: -8px;
107
- left: 50%;
108
- transform: translate(-50%, 0%) rotate(180deg);
109
- }
110
-
111
- transform-origin: top;
112
- top: calc(100% + var(--teaching-tip-offset));
113
- --teaching-tip-transition-offset: translateY(-12px);
114
- }
115
-
116
- &left {
117
- & .teaching-tip-caret {
118
- right: -11px;
119
- top: 50%;
120
- transform: translate(0%, -50%) rotate(270deg);
121
- }
122
-
123
- transform-origin: right;
124
- right: calc(100% + var(--teaching-tip-offset));
125
- --teaching-tip-transition-offset: translateX(12px);
126
- }
127
-
128
- &right {
129
- & .teaching-tip-caret {
130
- left: -11px;
131
- top: 50%;
132
- transform: translate(0%, -50%) rotate(90deg);
133
- }
134
-
135
- transform-origin: left;
136
- left: calc(100% + var(--teaching-tip-offset));
137
- --teaching-tip-transition-offset: translateX(-12px);
138
- }
139
-
140
- &top,
141
- &bottom {
142
- &.alignment- {
143
- &start {
144
- inset-inline-start: 0;
145
- --teaching-tip-transform: translateX(0%);
146
- }
147
-
148
- &end {
149
- inset-inline-end: 0;
150
- --teaching-tip-transform: translateX(0%);
151
- }
152
-
153
- &center {
154
- inset-inline-start: 50%;
155
- --teaching-tip-transform: translateX(-50%);
156
- }
157
- }
158
- }
159
-
160
- &left,
161
- &right {
162
- &.alignment- {
163
- &start {
164
- inset-block-start: 0;
165
- --teaching-tip-transform: translateY(0%);
166
- }
167
-
168
- &end {
169
- inset-block-end: 0;
170
- --teaching-tip-transform: translateY(0%);
171
- }
172
-
173
- &center {
174
- inset-block-start: 50%;
175
- --teaching-tip-transform: translateY(-50%);
176
- }
177
- }
178
- }
179
- }
180
- }
181
- }
1
+ @use "../mixins" as *;
2
+
3
+ .teaching-tip- {
4
+ &wrapper {
5
+ display: inline-block;
6
+ inline-size: fit-content;
7
+ block-size: fit-content;
8
+ position: relative;
9
+ }
10
+
11
+ &backdrop {
12
+ position: fixed;
13
+ top: 0;
14
+ left: 0;
15
+ inline-size: 100%;
16
+ block-size: 100%;
17
+ z-index: 9999;
18
+ }
19
+
20
+ &content {
21
+ position: relative;
22
+ @include flex($direction: column, $justify: start, $align: start);
23
+ padding: 9px 12px 11px 12px;
24
+ }
25
+
26
+ &footer {
27
+ margin-block-start: 8px;
28
+ display: grid;
29
+ grid-auto-rows: 1fr;
30
+ grid-auto-flow: column;
31
+ grid-gap: 8px;
32
+ white-space: nowrap;
33
+ width: 100%;
34
+
35
+ > :global(.button:only-child) {
36
+ inline-size: 50%;
37
+ justify-self: end;
38
+ }
39
+ }
40
+
41
+ &image {
42
+ display: block;
43
+ max-inline-size: 100%;
44
+ max-block-size: 100%;
45
+ position: relative;
46
+ z-index: 10;
47
+
48
+ &.placement- {
49
+ &top {
50
+ margin-block-end: 4px;
51
+ border-radius: var(--overlay-corner-radius) var(--overlay-corner-radius) 0 0;
52
+ }
53
+
54
+ &bottom {
55
+ margin-block-start: 4px;
56
+ border-radius: 0 0 var(--overlay-corner-radius) var(--overlay-corner-radius);
57
+ }
58
+ }
59
+ }
60
+
61
+ &caret {
62
+ position: absolute;
63
+ z-index: 10000;
64
+ color: var(--solid-background-quarternary);
65
+
66
+ & .stroke {
67
+ color: var(--surface-stroke-default);
68
+ }
69
+ }
70
+
71
+ &anchor {
72
+ :global(.teaching-tip-close-button) {
73
+ position: absolute;
74
+ inset-block-start: 6px;
75
+ inset-inline-end: 6px;
76
+ color: var(--text-primary);
77
+ z-index: 5;
78
+
79
+ & :global(svg) {
80
+ inline-size: 12px;
81
+ block-size: 12px;
82
+ }
83
+ }
84
+
85
+ position: absolute;
86
+ z-index: 10000;
87
+ transform: var(--teaching-tip-transform);
88
+
89
+ &.placement- {
90
+ --teaching-tip-transform: translateX(0%);
91
+
92
+ &top {
93
+ & .teaching-tip-caret {
94
+ bottom: -8px;
95
+ left: 50%;
96
+ transform: translate(-50%, 0%);
97
+ }
98
+
99
+ transform-origin: bottom;
100
+ bottom: calc(100% + var(--teaching-tip-offset));
101
+ --teaching-tip-transition-offset: translateY(12px);
102
+ }
103
+
104
+ &bottom {
105
+ & .teaching-tip-caret {
106
+ top: -8px;
107
+ left: 50%;
108
+ transform: translate(-50%, 0%) rotate(180deg);
109
+ }
110
+
111
+ transform-origin: top;
112
+ top: calc(100% + var(--teaching-tip-offset));
113
+ --teaching-tip-transition-offset: translateY(-12px);
114
+ }
115
+
116
+ &left {
117
+ & .teaching-tip-caret {
118
+ right: -11px;
119
+ top: 50%;
120
+ transform: translate(0%, -50%) rotate(270deg);
121
+ }
122
+
123
+ transform-origin: right;
124
+ right: calc(100% + var(--teaching-tip-offset));
125
+ --teaching-tip-transition-offset: translateX(12px);
126
+ }
127
+
128
+ &right {
129
+ & .teaching-tip-caret {
130
+ left: -11px;
131
+ top: 50%;
132
+ transform: translate(0%, -50%) rotate(90deg);
133
+ }
134
+
135
+ transform-origin: left;
136
+ left: calc(100% + var(--teaching-tip-offset));
137
+ --teaching-tip-transition-offset: translateX(-12px);
138
+ }
139
+
140
+ &top,
141
+ &bottom {
142
+ &.alignment- {
143
+ &start {
144
+ inset-inline-start: 0;
145
+ --teaching-tip-transform: translateX(0%);
146
+ }
147
+
148
+ &end {
149
+ inset-inline-end: 0;
150
+ --teaching-tip-transform: translateX(0%);
151
+ }
152
+
153
+ &center {
154
+ inset-inline-start: 50%;
155
+ --teaching-tip-transform: translateX(-50%);
156
+ }
157
+ }
158
+ }
159
+
160
+ &left,
161
+ &right {
162
+ &.alignment- {
163
+ &start {
164
+ inset-block-start: 0;
165
+ --teaching-tip-transform: translateY(0%);
166
+ }
167
+
168
+ &end {
169
+ inset-block-end: 0;
170
+ --teaching-tip-transform: translateY(0%);
171
+ }
172
+
173
+ &center {
174
+ inset-block-start: 50%;
175
+ --teaching-tip-transform: translateY(-50%);
176
+ }
177
+ }
178
+ }
179
+ }
180
+ }
181
+ }
package/TeachingTip/TeachingTipWrapper.svelte CHANGED
@@ -1,6 +1,7 @@
1
1
  <script >import { createEventDispatcher } from "svelte";
2
2
  import { uid, focusTrap, getCSSDuration } from "../internal";
3
- import { IconButton, TextBlock } from "$lib";
3
+ import IconButton from "../IconButton/IconButton.svelte";
4
+ import TextBlock from "../TextBlock/TextBlock.svelte";
4
5
  import { scale } from "svelte/transition";
5
6
  import { expoIn, expoOut } from "svelte/easing";
6
7
  import TeachingTipSurface from "./TeachingTipSurface.svelte";
@@ -103,142 +104,140 @@ $: {
103
104
  }
104
105
  }
105
106
  let resizeTimeout;
106
- </script>
107
-
108
- <!--
109
- @component
110
- TeachingTips represent a control that displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a TeachingTip can be dismissed by clicking or tapping outside of it, or pressing the Esc key. [Docs](https://fluent-svelte.vercel.app/docs/components/teaching-tip)
111
- - Usage:
112
- ```tsx
113
- <TeachingTip>
114
- <Button>Trigger Button</Button>
115
- <svelte:fragment slot="teaching-tip">
116
- TeachingTip Contents
117
- </svelte:fragment>
118
- </TeachingTip>
119
- ```
120
- -->
121
-
122
- <svelte:window
123
- on:keydown={handleEscapeKey}
124
- on:resize={() => {
125
- clearTimeout(resizeTimeout);
126
-
127
- resizeTimeout = setTimeout(handleResize, 100);
128
- }}
129
- />
130
-
131
- <div
132
- class="teaching-tip-wrapper {className}"
133
- aria-expanded={open}
134
- aria-haspopup={open}
135
- aria-controls={menuId}
136
- on:click={() => {
137
- enableClick && (open = !open);
138
- }}
139
- on:keydown={handleKeyDown}
140
- bind:this={wrapperElement}
141
- >
142
- <slot />
143
-
144
- {#if open}
145
- <div
146
- id={menuId}
147
- class="teaching-tip-anchor placement-{placement} alignment-{alignment}"
148
- style="--fds-teaching-tip-offset: {offset}px;"
149
- use:_focusTrap
150
- in:customScale|local={{
151
- duration: getCSSDuration("--fds-control-slow-duration"),
152
- easing: expoOut,
153
- opacity: 1,
154
- start: 0.1,
155
- intro: true
156
- }}
157
- out:customScale|local={{
158
- duration: getCSSDuration("--fds-control-slow-duration"),
159
- easing: expoIn,
160
- opacity: 1,
161
- start: 0.1
162
- }}
163
- bind:this={anchorElement}
164
- bind:clientHeight={anchorElementHeight}
165
- bind:clientWidth={anchorElementWidth}
166
- on:click={e => e.stopPropagation()}
167
- {...$$restProps}
168
- >
169
- <slot name="override">
170
- <TeachingTipSurface bind:element={menuElement}>
171
- {#if src && imagePlacement === "top"}
172
- <div bind:clientHeight={imageHeight}>
173
- <img class="teaching-tip-image placement-top" {src} alt={title} />
174
- </div>
175
- {/if}
176
- <div class="teaching-tip-content">
177
- {#if closeButton}
178
- <IconButton
179
- class="teaching-tip-close-button"
180
- on:click={closeTeachingTip}
181
- >
182
- <svg
183
- aria-hidden="true"
184
- xmlns="http://www.w3.org/2000/svg"
185
- width="12"
186
- height="12"
187
- viewBox="0 0 1024 1024"
188
- >
189
- <path
190
- fill="currentColor"
191
- d="M512,584.5L87.5,1009C77.5,1019 65.5,1024 51.5,1024C36.8333,1024 24.5833,1019.08 14.75,1009.25C4.91667,999.417 0,987.167 0,972.5C0,958.5 5,946.5 15,936.5L439.5,512L15,87.5C5,77.5 0,65.3334 0,51C0,44 1.33333,37.3334 4,31C6.66667,24.6667 10.3333,19.25 15,14.75C19.6667,10.25 25.1667,6.66669 31.5,4C37.8333,1.33337 44.5,0 51.5,0C65.5,0 77.5,5 87.5,15L512,439.5L936.5,15C946.5,5 958.667,0 973,0C980,0 986.583,1.33337 992.75,4C998.917,6.66669 1004.33,10.3334 1009,15C1013.67,19.6667 1017.33,25.0834 1020,31.25C1022.67,37.4167 1024,44 1024,51C1024,65.3334 1019,77.5 1009,87.5L584.5,512L1009,936.5C1019,946.5 1024,958.5 1024,972.5C1024,979.5 1022.67,986.167 1020,992.5C1017.33,998.833 1013.75,1004.33 1009.25,1009C1004.75,1013.67 999.333,1017.33 993,1020C986.667,1022.67 980,1024 973,1024C958.667,1024 946.5,1019 936.5,1009Z"
192
- />
193
- </svg>
194
- </IconButton>
195
- {/if}
196
- {#if title}
197
- <TextBlock class="teaching-tip-title" variant="bodyStrong">
198
- {title}
199
- </TextBlock>
200
- {/if}
201
- <slot name="flyout" />
202
- {#if $$slots.footer}
203
- <footer class="teaching-tip-footer" bind:this={footerElement}>
204
- <slot name="footer" />
205
- </footer>
206
- {/if}
207
- </div>
208
- {#if src && imagePlacement === "bottom"}
209
- <img class="teaching-tip-image placement-bottom" {src} alt={title} />
210
- {/if}
211
- </TeachingTipSurface>
212
- </slot>
213
- <svg
214
- width="16"
215
- height="10"
216
- viewBox="0 0 16 10"
217
- class="teaching-tip-caret"
218
- fill="none"
219
- xmlns="http://www.w3.org/2000/svg"
220
- >
221
- <path
222
- d="M7.99902 7.79297L14.999 0.792969H0.999023L7.99902 7.79297Z"
223
- fill="currentColor"
224
- />
225
- <path
226
- d="M7.99917 9.20718L0.584961 1.79297H1.99917L7.99917 7.79297L13.9992 1.79297H15.4134L7.99917 9.20718Z"
227
- class="stroke"
228
- fill="currentColor"
229
- />
230
- </svg>
231
- </div>
232
- {#if closeOnBackdropClick}
233
- <!-- svelte-ignore a11y-click-events-have-key-events -->
234
- <div
235
- class="teaching-tip-backdrop"
236
- bind:this={backdropElement}
237
- on:click={e => e.stopPropagation()}
238
- on:mousedown={backdropClick}
239
- />
240
- {/if}
241
- {/if}
242
- </div>
243
-
244
- <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{display:flex;flex-direction:column;padding:9px 12px 11px;position:relative}.teaching-tip-footer{-webkit-margin-before:8px;grid-gap:8px;-webkit-border-before:1px solid var(--fds-card-stroke-default);border-block-start:1px solid var(--fds-card-stroke-default);display:grid;grid-auto-flow:column;grid-auto-rows:1fr;margin-block-start:8px;white-space:nowrap}.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%)}.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:50%;transform:translate(-50%)}.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:50%;top:-8px;transform:translate(-50%) 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{right:-11px;top:50%;transform:translateY(-50%) 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{left:-11px;top:50%;transform:translateY(-50%) rotate(90deg)}.teaching-tip-anchor.placement-bottom.alignment-start,.teaching-tip-anchor.placement-top.alignment-start{--fds-teaching-tip-transform:translateX(0%);inset-inline-start:0}.teaching-tip-anchor.placement-bottom.alignment-end,.teaching-tip-anchor.placement-top.alignment-end{--fds-teaching-tip-transform:translateX(0%);inset-inline-end:0}.teaching-tip-anchor.placement-bottom.alignment-center,.teaching-tip-anchor.placement-top.alignment-center{--fds-teaching-tip-transform:translateX(-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%);inset-block-start:0}.teaching-tip-anchor.placement-left.alignment-end,.teaching-tip-anchor.placement-right.alignment-end{--fds-teaching-tip-transform:translateY(0%);inset-block-end:0}.teaching-tip-anchor.placement-left.alignment-center,.teaching-tip-anchor.placement-right.alignment-center{--fds-teaching-tip-transform:translateY(-50%);inset-block-start:50%}</style>
107
+ </script>
108
+
109
+ <!--
110
+ @component
111
+ TeachingTips represent a control that displays lightweight UI that is either information, or requires user interaction. Unlike a dialog, a TeachingTip can be dismissed by clicking or tapping outside of it, or pressing the Esc key. [Docs](https://fluent-svelte.vercel.app/docs/components/teaching-tip)
112
+ - Usage:
113
+ ```tsx
114
+ <TeachingTip>
115
+ <Button>Button</Button>
116
+ <svelte:fragment slot="teaching-tip">
117
+ TeachingTip Contents
118
+ </svelte:fragment>
119
+ </TeachingTip>
120
+ ```
121
+ -->
122
+
123
+ <svelte:window
124
+ on:keydown={handleEscapeKey}
125
+ on:resize={() => {
126
+ clearTimeout(resizeTimeout);
127
+
128
+ resizeTimeout = setTimeout(handleResize, 100);
129
+ }}
130
+ />
131
+
132
+ <div
133
+ class="teaching-tip-wrapper {className}"
134
+ aria-expanded={open}
135
+ aria-haspopup={open}
136
+ aria-controls={menuId}
137
+ on:keydown={handleKeyDown}
138
+ bind:this={wrapperElement}
139
+ >
140
+ <slot />
141
+
142
+ {#if open}
143
+ <div
144
+ id={menuId}
145
+ class="teaching-tip-anchor placement-{placement} alignment-{alignment}"
146
+ style="--fds-teaching-tip-offset: {offset}px;"
147
+ use:_focusTrap
148
+ in:customScale|local={{
149
+ duration: getCSSDuration("--fds-control-slow-duration"),
150
+ easing: expoOut,
151
+ opacity: 1,
152
+ start: 0.1,
153
+ intro: true
154
+ }}
155
+ out:customScale|local={{
156
+ duration: getCSSDuration("--fds-control-slow-duration"),
157
+ easing: expoIn,
158
+ opacity: 1,
159
+ start: 0.1
160
+ }}
161
+ bind:this={anchorElement}
162
+ bind:clientHeight={anchorElementHeight}
163
+ bind:clientWidth={anchorElementWidth}
164
+ on:click={e => e.stopPropagation()}
165
+ {...$$restProps}
166
+ >
167
+ <slot name="override">
168
+ <TeachingTipSurface bind:element={menuElement}>
169
+ {#if src && imagePlacement === "top"}
170
+ <div bind:clientHeight={imageHeight}>
171
+ <img class="teaching-tip-image placement-top" {src} alt={title} />
172
+ </div>
173
+ {/if}
174
+ <div class="teaching-tip-content">
175
+ {#if closeButton}
176
+ <IconButton
177
+ class="teaching-tip-close-button"
178
+ on:click={closeTeachingTip}
179
+ >
180
+ <svg
181
+ aria-hidden="true"
182
+ xmlns="http://www.w3.org/2000/svg"
183
+ width="12"
184
+ height="12"
185
+ viewBox="0 0 1024 1024"
186
+ >
187
+ <path
188
+ fill="currentColor"
189
+ d="M512,584.5L87.5,1009C77.5,1019 65.5,1024 51.5,1024C36.8333,1024 24.5833,1019.08 14.75,1009.25C4.91667,999.417 0,987.167 0,972.5C0,958.5 5,946.5 15,936.5L439.5,512L15,87.5C5,77.5 0,65.3334 0,51C0,44 1.33333,37.3334 4,31C6.66667,24.6667 10.3333,19.25 15,14.75C19.6667,10.25 25.1667,6.66669 31.5,4C37.8333,1.33337 44.5,0 51.5,0C65.5,0 77.5,5 87.5,15L512,439.5L936.5,15C946.5,5 958.667,0 973,0C980,0 986.583,1.33337 992.75,4C998.917,6.66669 1004.33,10.3334 1009,15C1013.67,19.6667 1017.33,25.0834 1020,31.25C1022.67,37.4167 1024,44 1024,51C1024,65.3334 1019,77.5 1009,87.5L584.5,512L1009,936.5C1019,946.5 1024,958.5 1024,972.5C1024,979.5 1022.67,986.167 1020,992.5C1017.33,998.833 1013.75,1004.33 1009.25,1009C1004.75,1013.67 999.333,1017.33 993,1020C986.667,1022.67 980,1024 973,1024C958.667,1024 946.5,1019 936.5,1009Z"
190
+ />
191
+ </svg>
192
+ </IconButton>
193
+ {/if}
194
+ {#if title}
195
+ <TextBlock class="teaching-tip-title" variant="bodyStrong">
196
+ {title}
197
+ </TextBlock>
198
+ {/if}
199
+ <slot name="flyout" />
200
+ {#if $$slots.footer}
201
+ <footer class="teaching-tip-footer" bind:this={footerElement}>
202
+ <slot name="footer" />
203
+ </footer>
204
+ {/if}
205
+ </div>
206
+ {#if src && imagePlacement === "bottom"}
207
+ <img class="teaching-tip-image placement-bottom" {src} alt={title} />
208
+ {/if}
209
+ </TeachingTipSurface>
210
+ </slot>
211
+
212
+ <svg
213
+ width="16"
214
+ height="10"
215
+ viewBox="0 0 16 10"
216
+ class="teaching-tip-caret"
217
+ fill="none"
218
+ xmlns="http://www.w3.org/2000/svg"
219
+ >
220
+ <path
221
+ d="M7.99902 7.79297L14.999 0.792969H0.999023L7.99902 7.79297Z"
222
+ fill="currentColor"
223
+ />
224
+ <path
225
+ d="M7.99917 9.20718L0.584961 1.79297H1.99917L7.99917 7.79297L13.9992 1.79297H15.4134L7.99917 9.20718Z"
226
+ class="stroke"
227
+ fill="currentColor"
228
+ />
229
+ </svg>
230
+ </div>
231
+ {#if closeOnBackdropClick}
232
+ <!-- svelte-ignore a11y-click-events-have-key-events -->
233
+ <div
234
+ class="teaching-tip-backdrop"
235
+ bind:this={backdropElement}
236
+ on:click={e => e.stopPropagation()}
237
+ on:mousedown={backdropClick}
238
+ />
239
+ {/if}
240
+ {/if}
241
+ </div>
242
+
243
+ <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%)}.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:50%;transform:translate(-50%)}.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:50%;top:-8px;transform:translate(-50%) 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{right:-11px;top:50%;transform:translateY(-50%) 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{left:-11px;top:50%;transform:translateY(-50%) rotate(90deg)}.teaching-tip-anchor.placement-bottom.alignment-start,.teaching-tip-anchor.placement-top.alignment-start{--fds-teaching-tip-transform:translateX(0%);inset-inline-start:0}.teaching-tip-anchor.placement-bottom.alignment-end,.teaching-tip-anchor.placement-top.alignment-end{--fds-teaching-tip-transform:translateX(0%);inset-inline-end:0}.teaching-tip-anchor.placement-bottom.alignment-center,.teaching-tip-anchor.placement-top.alignment-center{--fds-teaching-tip-transform:translateX(-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%);inset-block-start:0}.teaching-tip-anchor.placement-left.alignment-end,.teaching-tip-anchor.placement-right.alignment-end{--fds-teaching-tip-transform:translateY(0%);inset-block-end:0}.teaching-tip-anchor.placement-left.alignment-center,.teaching-tip-anchor.placement-right.alignment-center{--fds-teaching-tip-transform:translateY(-50%);inset-block-start:50%}</style>
package/TeachingTip/TeachingTipWrapper.svelte.d.ts CHANGED
@@ -42,7 +42,7 @@ export declare type TeachingTipWrapperSlots = typeof __propDef.slots;
42
42
  * - Usage:
43
43
  * ```tsx
44
44
  * <TeachingTip>
45
- * <Button>Trigger Button</Button>
45
+ * <Button>Button</Button>
46
46
  * <svelte:fragment slot="teaching-tip">
47
47
  * TeachingTip Contents
48
48
  * </svelte:fragment>
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fluent-svelte-extra",
3
- "version": "1.9.6",
3
+ "version": "1.9.8",
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",