fluent-svelte-extra 1.9.4 → 1.9.5

package/ContentDialog/ContentDialog.svelte

@@ -68,6 +68,7 @@ function handleEscapeKey({ key }) {
 <svelte:window on:keydown={handleEscapeKey} />
 
 {#if open}
+	<!-- svelte-ignore a11y-click-events-have-key-events -->
 	<div
 		class="content-dialog-smoke"
 		class:darken

package/Expander/Expander.svelte

@@ -80,7 +80,7 @@ Expanders are controls that display a header and a collapsable content area. The
 			aria-controls={contentId}
 			class="expander-header"
 			aria-expanded={expanded}
-			tabindex="0"
+			tabindex={expandable ? 0 : -1}
 			bind:this={headerElement}
 			on:keydown={handleKeydown}
 			on:click={() => {

package/TeachingTip/TeachingTipSurface.scss

@@ -0,0 +1,14 @@
+@use "../mixins" as *;
+
+.teaching-tip {
+    @include typography-body;
+    padding: 16px;
+    min-inline-size: 320px;
+    box-sizing: border-box;
+    color: var(--text-primary);
+    border-radius: var(--overlay-corner-radius);
+    border: 1px solid var(--surface-stroke-default);
+    background-color: var(--solid-background-quarternary);
+    background-clip: padding-box;
+    box-shadow: var(--flyout-shadow);
+}

package/TeachingTip/TeachingTipSurface.svelte

@@ -0,0 +1,15 @@
+<script >import { get_current_component } from "svelte/internal";
+import { createEventForwarder } from "../internal";
+/** Specifies a custom class name for the surface. */
+let className = "";
+export { className as class };
+/** Obtains a bound DOM reference to the surface element. */
+export let element = null;
+const forwardEvents = createEventForwarder(get_current_component());
+</script>
+
+<div class="teaching-tip {className}" use:forwardEvents bind:this={element} {...$$restProps}>
+	<slot />
+</div>
+
+<style >.teaching-tip{background-clip:padding-box;background-color:var(--fds-solid-background-quarternary);border:1px solid var(--fds-surface-stroke-default);border-radius:var(--fds-overlay-corner-radius);box-shadow:var(--fds-flyout-shadow);box-sizing:border-box;color:var(--fds-text-primary);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-inline-size:320px;padding:16px;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}</style>

package/TeachingTip/TeachingTipSurface.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        class?: string;
+        element?: HTMLDivElement;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+    };
+};
+export declare type TeachingTipSurfaceProps = typeof __propDef.props;
+export declare type TeachingTipSurfaceEvents = typeof __propDef.events;
+export declare type TeachingTipSurfaceSlots = typeof __propDef.slots;
+export default class TeachingTipSurface extends SvelteComponentTyped<TeachingTipSurfaceProps, TeachingTipSurfaceEvents, TeachingTipSurfaceSlots> {
+}
+export {};

package/TeachingTip/TeachingTipWrapper.scss

@@ -0,0 +1,79 @@
+
+.teaching-tip- {
+	&wrapper {
+		display: inline-block;
+		inline-size: fit-content;
+		block-size: fit-content;
+		position: relative;
+	}
+	&backdrop {
+		position: fixed;
+		top: 0;
+		left: 0;
+		inline-size: 100%;
+		block-size: 100%;
+		z-index: 9999;
+	}
+	&anchor {
+		position: absolute;
+		z-index: 10000;
+		transform: var(--teaching-tip-transform);
+		&.placement- {
+			--teaching-tip-transform: translateX(0%);
+			&top {
+                transform-origin: bottom;
+				bottom: calc(100% + var(--teaching-tip-offset));
+				--teaching-tip-transition-offset: translateY(12px);
+			}
+			&bottom {
+                transform-origin: top;
+				top: calc(100% + var(--teaching-tip-offset));
+				--teaching-tip-transition-offset: translateY(-12px);
+			}
+			&left {
+                transform-origin: right;
+				right: calc(100% + var(--teaching-tip-offset));
+				--teaching-tip-transition-offset: translateX(12px);
+			}
+			&right {
+                transform-origin: left;
+				left: calc(100% + var(--teaching-tip-offset));
+				--teaching-tip-transition-offset: translateX(-12px);
+			}
+			&top,
+			&bottom {
+				&.alignment- {
+					&start {
+						inset-inline-start: 0;
+						--teaching-tip-transform: translateX(0%);
+					}
+					&end {
+						inset-inline-end: 0;
+						--teaching-tip-transform: translateX(0%);
+					}
+					&center {
+						inset-inline-start: 50%;
+						--teaching-tip-transform: translateX(-50%);
+					}
+				}
+			}
+			&left,
+			&right {
+				&.alignment- {
+					&start {
+						inset-block-start: 0;
+						--teaching-tip-transform: translateY(0%);
+					}
+					&end {
+						inset-block-end: 0;
+						--teaching-tip-transform: translateY(0%);
+					}
+					&center {
+						inset-block-start: 50%;
+						--teaching-tip-transform: translateY(-50%);
+					}
+				}
+			}
+		}
+	}
+}

package/TeachingTip/TeachingTipWrapper.svelte

@@ -0,0 +1,121 @@
+<script >import { createEventDispatcher } from "svelte";
+import { uid, focusTrap, getCSSDuration } from "../internal";
+import { fade, scale } from "svelte/transition";
+import { expoIn, expoOut } from "svelte/easing";
+import TeachingTipSurface from "./TeachingTipSurface.svelte";
+/** Determines the teaching-tip's visibility. */
+export let open = false;
+/** Determines if the teaching-tip can be closed using conventional user interaction. */
+export let closable = true;
+/** Determines if the teaching-tip can be closed by clicking outside of it. */
+export let closeOnBackdropClick = false;
+/** Determines if the teaching-tip can be clicked. */
+export let enableClick = true;
+/** Direction that the teaching-tip will be opened from. */
+export let placement = "top";
+/** Alignment of the menu along the clickable target's given axis. */
+export let alignment = "center";
+/** Distance of the teaching-tip from the control button in pixels. */
+export let offset = 4;
+/** Determines if keyboard focus should be locked to the teaching-tip's contents. */
+export let trapFocus = true;
+/** Specifies a custom class name for the content wrapper. */
+let className = "";
+export { className as class };
+/** Obtains a bound DOM reference to the content wrapper element. */
+export let wrapperElement = null;
+/** Obtains a bound DOM reference to the menu's positioning anchor element. */
+export let anchorElement = null;
+/** Obtains a bound DOM reference to the inner menu element. */
+export let menuElement = null;
+/** Obtains a bound DOM reference to the menu backdrop, which is present while the menu is `open`. */
+export let backdropElement = null;
+const dispatch = createEventDispatcher();
+const menuId = uid("fds-teaching-tip-anchor-");
+$: _focusTrap = trapFocus ? focusTrap : () => { };
+$: if (open) {
+    dispatch("open");
+}
+else {
+    dispatch("close");
+}
+function handleEscapeKey({ key }) {
+    if (key === "Escape" && closable)
+        open = false;
+}
+function closeTeachingTip() {
+    if (closable && closeOnBackdropClick)
+        open = false;
+}
+function handleKeyDown(event) {
+    if (event.key === " " || event.key === "Enter") {
+        event.preventDefault();
+        open = !open;
+    }
+}
+</script>
+
+<!--
+@component
+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)
+- Usage:
+    ```tsx
+    <TeachingTip>
+        <Button>Trigger Button</Button>
+        <svelte:fragment slot="teaching-tip">
+            TeachingTip Contents
+        </svelte:fragment>
+    </TeachingTip>
+    ```
+-->
+
+<svelte:window on:keydown={handleEscapeKey} />
+
+<div
+	class="teaching-tip-wrapper {className}"
+	aria-expanded={open}
+	aria-haspopup={open}
+	aria-controls={menuId}
+	on:click={() => {
+		enableClick && (open = !open);
+	}}
+	on:keydown={handleKeyDown}
+	bind:this={wrapperElement}
+>
+	<slot />
+	{#if open}
+		<div
+			id={menuId}
+			class="teaching-tip-anchor placement-{placement} alignment-{alignment}"
+			style="--fds-teaching-tip-offset: {offset}px;"
+			use:_focusTrap
+			in:scale|local={{
+				duration: getCSSDuration("--fds-control-slow-duration"),
+				easing: expoOut,
+				opacity: 1
+			}}
+			out:scale|local={{
+				duration: getCSSDuration("--fds-control-slow-duration"),
+				easing: expoIn,
+				opacity: 1
+			}}
+			bind:this={anchorElement}
+			on:click={e => e.stopPropagation()}
+			{...$$restProps}
+		>
+			<slot name="override">
+				<TeachingTipSurface bind:element={menuElement}>
+					<slot name="flyout" />
+				</TeachingTipSurface>
+			</slot>
+		</div>
+		<div
+			class="teaching-tip-backdrop"
+			bind:this={backdropElement}
+			on:click={e => e.stopPropagation()}
+			on:mousedown={closeTeachingTip}
+		/>
+	{/if}
+</div>
+
+<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-anchor{position:absolute;transform:var(--fds-teaching-tip-transform);z-index:10000}.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-bottom{--fds-teaching-tip-transition-offset:translateY(-12px);top:calc(100% + var(--fds-teaching-tip-offset));transform-origin:top}.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-right{--fds-teaching-tip-transition-offset:translateX(-12px);left:calc(100% + var(--fds-teaching-tip-offset));transform-origin:left}.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

@@ -0,0 +1,48 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: any;
+        open?: boolean;
+        closable?: boolean;
+        closeOnBackdropClick?: boolean;
+        enableClick?: boolean;
+        placement?: "top" | "bottom" | "left" | "right";
+        alignment?: "start" | "center" | "end";
+        offset?: number;
+        trapFocus?: boolean;
+        class?: string;
+        wrapperElement?: HTMLDivElement;
+        anchorElement?: HTMLDivElement;
+        menuElement?: HTMLDivElement;
+        backdropElement?: HTMLDivElement;
+    };
+    events: {
+        open: CustomEvent<any>;
+        close: CustomEvent<any>;
+    } & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {
+        default: {};
+        override: {};
+        flyout: {};
+    };
+};
+export declare type TeachingTipWrapperProps = typeof __propDef.props;
+export declare type TeachingTipWrapperEvents = typeof __propDef.events;
+export declare type TeachingTipWrapperSlots = typeof __propDef.slots;
+/**
+ * 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)
+ * - Usage:
+ * ```tsx
+ * <TeachingTip>
+ *     <Button>Trigger Button</Button>
+ *     <svelte:fragment slot="teaching-tip">
+ *         TeachingTip Contents
+ *     </svelte:fragment>
+ * </TeachingTip>
+ * ```
+ */
+export default class TeachingTipWrapper extends SvelteComponentTyped<TeachingTipWrapperProps, TeachingTipWrapperEvents, TeachingTipWrapperSlots> {
+}
+export {};

package/index.d.ts

@@ -7,6 +7,7 @@ export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";
 export { default as ComboBox } from "./ComboBox/ComboBox.svelte";
 export { default as InfoBadge } from "./InfoBadge/InfoBadge.svelte";
 export { default as Flyout } from "./Flyout/FlyoutWrapper.svelte";
+export { default as TeachingTip } from "./TeachingTip/TeachingTipWrapper.svelte";
 export { default as InfoBar } from "./InfoBar/InfoBar.svelte";
 export { default as TextBox } from "./TextBox/TextBox.svelte";
 export { default as TextBoxButton } from "./TextBox/TextBoxButton.svelte";

package/index.js

@@ -7,6 +7,7 @@ export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";
 export { default as ComboBox } from "./ComboBox/ComboBox.svelte";
 export { default as InfoBadge } from "./InfoBadge/InfoBadge.svelte";
 export { default as Flyout } from "./Flyout/FlyoutWrapper.svelte";
+export { default as TeachingTip } from "./TeachingTip/TeachingTipWrapper.svelte";
 export { default as InfoBar } from "./InfoBar/InfoBar.svelte";
 export { default as TextBox } from "./TextBox/TextBox.svelte";
 export { default as TextBoxButton } from "./TextBox/TextBoxButton.svelte";

package/internal.js

@@ -33,7 +33,7 @@ export function externalMouseEvents(node, options = { type: "click", stopPropaga
 }
 // Basic wrapper action around focus-trap
 export function focusTrap(node, options) {
-    const trap = createFocusTrap(node, (options = { ...options, fallbackFocus: node }));
+    const trap = createFocusTrap(node, (options = { allowOutsideClick: true, ...options, fallbackFocus: node }));
     trap.activate();
     return {
         destroy() {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "fluent-svelte-extra",
-  "version": "1.9.4",
+  "version": "1.9.5",
   "description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
   "homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
   "license": "MIT",
@@ -146,6 +146,10 @@
     "./Slider/Slider.scss": "./Slider/Slider.scss",
     "./Slider/Slider.svelte": "./Slider/Slider.svelte",
     "./switchable.css": "./switchable.css",
+    "./TeachingTip/TeachingTipSurface.scss": "./TeachingTip/TeachingTipSurface.scss",
+    "./TeachingTip/TeachingTipSurface.svelte": "./TeachingTip/TeachingTipSurface.svelte",
+    "./TeachingTip/TeachingTipWrapper.scss": "./TeachingTip/TeachingTipWrapper.scss",
+    "./TeachingTip/TeachingTipWrapper.svelte": "./TeachingTip/TeachingTipWrapper.svelte",
     "./TextArea/TextArea.scss": "./TextArea/TextArea.scss",
     "./TextArea/TextArea.svelte": "./TextArea/TextArea.svelte",
     "./TextBlock/TextBlock.scss": "./TextBlock/TextBlock.scss",