fluent-svelte-extra 2.0.4 → 2.0.7

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 (7) hide show
  1. package/Expander/Expander.svelte +100 -98
  2. package/Expander/Expander.svelte.d.ts +1 -0
  3. package/MenuFlyout/MenuFlyoutWrapper.svelte +8 -3
  4. package/SplitButton/SplitButton.scss +4 -0
  5. package/SplitButton/SplitButton.svelte +21 -7
  6. package/SplitButton/SplitButton.svelte.d.ts +14 -4
  7. package/package.json +1 -1
package/Expander/Expander.svelte CHANGED
@@ -8,6 +8,8 @@ import { expoOut } from "svelte/easing";
8
8
  export let expanded = false;
9
9
  /** Determines whether the expander is expandable or not. */
10
10
  export let expandable = true;
11
+ /** Determines to use slide animation for the component. */
12
+ export let animate = true;
11
13
  /** Determines the direction that the expander will extend to. */
12
14
  export let direction = "down";
13
15
  // svelte-ignore unused-export-let
@@ -43,104 +45,104 @@ function fadeSlide(node, options) {
43
45
  return {
44
46
  duration: options.duration,
45
47
  easing: options.easing,
46
- css: t => `
47
- ${slideTrans.css(t, options.duration)}
48
- opacity: ${t};
48
+ css: t => `
49
+ ${slideTrans.css(t, options.duration)}
50
+ opacity: ${t};
49
51
  `
50
52
  };
51
53
  }
52
- </script>
53
-
54
- <!--
55
- @component
56
- Expanders are controls that display a header and a collapsable content area. The content area can be expanded clicking on the header. [Docs](https://fluent-svelte.vercel.app/docs/components/expander)
57
- - Usage:
58
- ```tsx
59
- <Expander>
60
- Header
61
- <svelte:fragment slot="content">
62
- Content
63
- </svelte:fragment>
64
- </Expander>
65
- ```
66
- -->
67
- <div
68
- use:forwardEvents
69
- class="expander direction-{direction} {className}"
70
- role="region"
71
- bind:this={containerElement}
72
- class:expanded
73
- class:expandable
74
- {...$$restProps}
75
- >
76
- <svelte:element this="h">
77
- <div
78
- role="button"
79
- id={headerId}
80
- aria-controls={contentId}
81
- class="expander-header"
82
- aria-expanded={expanded}
83
- tabindex={expandable ? 0 : -1}
84
- bind:this={headerElement}
85
- on:keydown={handleKeydown}
86
- on:click={() => {
87
- if (expandable) {
88
- expanded = !expanded;
89
- }
90
- }}
91
- >
92
- {#if $$slots.icon}
93
- <div class="expander-icon">
94
- <slot name="icon" />
95
- </div>
96
- {/if}
97
- <span class="expander-header-title">
98
- <slot />
99
- </span>
100
-
101
- {#if expandable}
102
- <button
103
- class="expander-chevron"
104
- type="button"
105
- tabindex="-1"
106
- id={contentId}
107
- aria-labelledby={headerId}
108
- >
109
- <svg
110
- xmlns="http://www.w3.org/2000/svg"
111
- width="12"
112
- height="12"
113
- viewBox="0 0 12 12"
114
- >
115
- {#if direction === "down"}
116
- <path
117
- fill="currentColor"
118
- d="M2.14645 4.64645C2.34171 4.45118 2.65829 4.45118 2.85355 4.64645L6 7.79289L9.14645 4.64645C9.34171 4.45118 9.65829 4.45118 9.85355 4.64645C10.0488 4.84171 10.0488 5.15829 9.85355 5.35355L6.35355 8.85355C6.15829 9.04882 5.84171 9.04882 5.64645 8.85355L2.14645 5.35355C1.95118 5.15829 1.95118 4.84171 2.14645 4.64645Z"
119
- />
120
- {:else}
121
- <path
122
- fill="currentColor"
123
- d="M2.14645 7.35355C2.34171 7.54882 2.65829 7.54882 2.85355 7.35355L6 4.20711L9.14645 7.35355C9.34171 7.54882 9.65829 7.54882 9.85355 7.35355C10.0488 7.15829 10.0488 6.84171 9.85355 6.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645L2.14645 6.64645C1.95118 6.84171 1.95118 7.15829 2.14645 7.35355Z"
124
- />
125
- {/if}
126
- </svg>
127
- </button>
128
- {/if}
129
- </div>
130
- </svelte:element>
131
- {#if expanded}
132
- <div
133
- class="expander-content-anchor"
134
- transition:fadeSlide={{
135
- duration: getCSSDuration("--fds-control-normal-duration") * 2,
136
- easing: expoOut
137
- }}
138
- >
139
- <div class="expander-content" bind:this={contentElement}>
140
- <slot name="content" />
141
- </div>
142
- </div>
143
- {/if}
144
- </div>
145
-
146
- <style >.expander{border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander .expander-header{transition:var(--fds-control-faster-duration) ease background}.expander.expandable .expander-header:hover{background-color:var(--fds-control-fill-secondary);border:1px solid var(--fds-control-stroke-default)}.expander.expandable .expander-header:active{background-color:var(--fds-control-fill-tertiary);border:1px solid var(--fds-control-stroke-default)}.expander.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.direction-down.expanded .expander-header{border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content{border-bottom:none;border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content-anchor{order:-1}.expander.direction-up.expanded .expander-header{border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.expanded .expander-content{transform:none}.expander.expanded .expander-chevron svg{transform:rotate(180deg)}.expander>h3{display:contents}.expander-icon{-webkit-margin-end:16px;block-size:16px;color:var(--fds-text-primary);flex:0 0 auto;inline-size:16px;margin-inline-end:16px}.expander-icon>:global(svg){fill:currentColor;block-size:auto;inline-size:16px}.expander-header{-webkit-padding-start:16px;align-items:center;background-clip:padding-box;background-color:var(--fds-card-background-default);border:1px solid var(--fds-card-stroke-default);border-radius:var(--fds-control-corner-radius);box-sizing:border-box;display:flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-height:50px;outline:none;padding:8px;padding-inline-start:16px;text-align:start;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-header-title{flex:1 1 auto}.expander-header:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-header:active .expander-chevron{color:var(--fds-text-secondary)}.expander-chevron{-webkit-margin-start:20px;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--fds-subtle-fill-transparent);block-size:32px;border:none;border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex:0 0 auto;inline-size:32px;justify-content:center;margin-inline-start:20px;outline:none}.expander-chevron:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-chevron svg{fill:currentColor;block-size:12px;inline-size:12px;transition:calc(var(--fds-control-fast-duration)) var(--fds-control-fast-out-slow-in-easing) transform var(--fds-control-fast-duration)}.expander-content{background-clip:padding-box;background-color:var(--fds-card-background-secondary);border:1px solid var(--fds-card-stroke-default);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;padding:16px;transition:var(--fds-control-fast-duration) cubic-bezier(1,1,0,1) transform;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-content-anchor{max-block-size:6.019999999999999e+23vmax;position:relative}</style>
54
+ </script>
55
+
56
+ <!--
57
+ @component
58
+ Expanders are controls that display a header and a collapsable content area. The content area can be expanded clicking on the header. [Docs](https://fluent-svelte.vercel.app/docs/components/expander)
59
+ - Usage:
60
+ ```tsx
61
+ <Expander>
62
+ Header
63
+ <svelte:fragment slot="content">
64
+ Content
65
+ </svelte:fragment>
66
+ </Expander>
67
+ ```
68
+ -->
69
+ <div
70
+ use:forwardEvents
71
+ class="expander direction-{direction} {className}"
72
+ role="region"
73
+ bind:this={containerElement}
74
+ class:expanded
75
+ class:expandable
76
+ {...$$restProps}
77
+ >
78
+ <svelte:element this="h">
79
+ <div
80
+ role="button"
81
+ id={headerId}
82
+ aria-controls={contentId}
83
+ class="expander-header"
84
+ aria-expanded={expanded}
85
+ tabindex={expandable ? 0 : -1}
86
+ bind:this={headerElement}
87
+ on:keydown={handleKeydown}
88
+ on:click={() => {
89
+ if (expandable) {
90
+ expanded = !expanded;
91
+ }
92
+ }}
93
+ >
94
+ {#if $$slots.icon}
95
+ <div class="expander-icon">
96
+ <slot name="icon" />
97
+ </div>
98
+ {/if}
99
+ <span class="expander-header-title">
100
+ <slot />
101
+ </span>
102
+
103
+ {#if expandable}
104
+ <button
105
+ class="expander-chevron"
106
+ type="button"
107
+ tabindex="-1"
108
+ id={contentId}
109
+ aria-labelledby={headerId}
110
+ >
111
+ <svg
112
+ xmlns="http://www.w3.org/2000/svg"
113
+ width="12"
114
+ height="12"
115
+ viewBox="0 0 12 12"
116
+ >
117
+ {#if direction === "down"}
118
+ <path
119
+ fill="currentColor"
120
+ d="M2.14645 4.64645C2.34171 4.45118 2.65829 4.45118 2.85355 4.64645L6 7.79289L9.14645 4.64645C9.34171 4.45118 9.65829 4.45118 9.85355 4.64645C10.0488 4.84171 10.0488 5.15829 9.85355 5.35355L6.35355 8.85355C6.15829 9.04882 5.84171 9.04882 5.64645 8.85355L2.14645 5.35355C1.95118 5.15829 1.95118 4.84171 2.14645 4.64645Z"
121
+ />
122
+ {:else}
123
+ <path
124
+ fill="currentColor"
125
+ d="M2.14645 7.35355C2.34171 7.54882 2.65829 7.54882 2.85355 7.35355L6 4.20711L9.14645 7.35355C9.34171 7.54882 9.65829 7.54882 9.85355 7.35355C10.0488 7.15829 10.0488 6.84171 9.85355 6.64645L6.35355 3.14645C6.15829 2.95118 5.84171 2.95118 5.64645 3.14645L2.14645 6.64645C1.95118 6.84171 1.95118 7.15829 2.14645 7.35355Z"
126
+ />
127
+ {/if}
128
+ </svg>
129
+ </button>
130
+ {/if}
131
+ </div>
132
+ </svelte:element>
133
+ {#if expanded}
134
+ <div
135
+ class="expander-content-anchor"
136
+ transition:fadeSlide={{
137
+ duration: animate ? getCSSDuration("--fds-control-normal-duration") * 2 : 0,
138
+ easing: expoOut
139
+ }}
140
+ >
141
+ <div class="expander-content" bind:this={contentElement}>
142
+ <slot name="content" />
143
+ </div>
144
+ </div>
145
+ {/if}
146
+ </div>
147
+
148
+ <style >.expander{border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex-direction:column;inline-size:100%;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander .expander-header{transition:var(--fds-control-faster-duration) ease background}.expander.expandable .expander-header:hover{background-color:var(--fds-control-fill-secondary);border:1px solid var(--fds-control-stroke-default)}.expander.expandable .expander-header:active{background-color:var(--fds-control-fill-tertiary);border:1px solid var(--fds-control-stroke-default)}.expander.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.direction-down.expanded .expander-header{border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content{border-bottom:none;border-end-end-radius:0!important;border-end-start-radius:0!important;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content-anchor{order:-1}.expander.direction-up.expanded .expander-header{border-radius:var(--fds-control-corner-radius);border-start-end-radius:0!important;border-start-start-radius:0!important}.expander.expanded .expander-content{transform:none}.expander.expanded .expander-chevron svg{transform:rotate(180deg)}.expander>h3{display:contents}.expander-icon{-webkit-margin-end:16px;block-size:16px;color:var(--fds-text-primary);flex:0 0 auto;inline-size:16px;margin-inline-end:16px}.expander-icon>:global(svg){fill:currentColor;block-size:auto;inline-size:16px}.expander-header{-webkit-padding-start:16px;align-items:center;background-clip:padding-box;background-color:var(--fds-card-background-default);border:1px solid var(--fds-card-stroke-default);border-radius:var(--fds-control-corner-radius);box-sizing:border-box;display:flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;min-height:50px;outline:none;padding:8px;padding-inline-start:16px;text-align:start;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-header-title{flex:1 1 auto}.expander-header:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-header:active .expander-chevron{color:var(--fds-text-secondary)}.expander-chevron{-webkit-margin-start:20px;align-items:center;-webkit-appearance:none;-moz-appearance:none;appearance:none;background-color:var(--fds-subtle-fill-transparent);block-size:32px;border:none;border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;flex:0 0 auto;inline-size:32px;justify-content:center;margin-inline-start:20px;outline:none}.expander-chevron:focus-visible{box-shadow:var(--fds-focus-stroke)}.expander-chevron svg{fill:currentColor;block-size:12px;inline-size:12px;transition:calc(var(--fds-control-fast-duration)) var(--fds-control-fast-out-slow-in-easing) transform var(--fds-control-fast-duration)}.expander-content{background-clip:padding-box;background-color:var(--fds-card-background-secondary);border:1px solid var(--fds-card-stroke-default);font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;line-height:20px;padding:16px;transition:var(--fds-control-fast-duration) cubic-bezier(1,1,0,1) transform;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.expander-content-anchor{max-block-size:6.019999999999999e+23vmax;position:relative}</style>
package/Expander/Expander.svelte.d.ts CHANGED
@@ -4,6 +4,7 @@ declare const __propDef: {
4
4
  [x: string]: any;
5
5
  expanded?: boolean;
6
6
  expandable?: boolean;
7
+ animate?: boolean;
7
8
  direction?: "down" | "up";
8
9
  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
9
10
  class?: string;
package/MenuFlyout/MenuFlyoutWrapper.svelte CHANGED
@@ -7,7 +7,7 @@ export let open = false;
7
7
  /** Determines if the flyout can be closed using conventional user interaction. */
8
8
  export let closable = true;
9
9
  /** Controls if the flyout will be closed when clicking a standard variant item. Only applies if `closable` is set to `true`. */
10
- export let closeOnSelect = true;
10
+ export let closeOnSelect = false;
11
11
  /** Direction that the flyout will be opened from. */
12
12
  export let placement = "top";
13
13
  /** Alignment of the menu along the clickable target's given axis. */
@@ -77,7 +77,12 @@ setContext("closeFlyout", event => {
77
77
  use:arrowNavigation={{ preventTab: true }}
78
78
  on:click={e => e.stopPropagation()}
79
79
  >
80
- <MenuFlyoutSurface bind:element={menuElement} bind:this={menu} {...$$restProps} {acrylic}>
80
+ <MenuFlyoutSurface
81
+ bind:element={menuElement}
82
+ bind:this={menu}
83
+ {...$$restProps}
84
+ {acrylic}
85
+ >
81
86
  <slot name="flyout" />
82
87
  </MenuFlyoutSurface>
83
88
  </div>
@@ -90,4 +95,4 @@ setContext("closeFlyout", event => {
90
95
  {/if}
91
96
  </div>
92
97
 
93
- <style >.menu-flyout-wrapper{display:inline-block;height:auto;position:relative}.menu-flyout-backdrop{height:100%;left:0;position:fixed;top:0;width:100%;z-index:9999}.menu-flyout-anchor{position:absolute;z-index:10000}.menu-flyout-anchor.placement-top{--fds-menu-flyout-transition-offset:50%;bottom:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-bottom{top:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-left{right:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-right{left:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-bottom.alignment-start,.menu-flyout-anchor.placement-top.alignment-start{inset-inline-start:0}.menu-flyout-anchor.placement-bottom.alignment-end,.menu-flyout-anchor.placement-top.alignment-end{inset-inline-end:0}.menu-flyout-anchor.placement-bottom.alignment-center,.menu-flyout-anchor.placement-top.alignment-center{inset-inline-start:50%;transform:translateX(-50%)}.menu-flyout-anchor.placement-left.alignment-start,.menu-flyout-anchor.placement-right.alignment-start{inset-block-start:0}.menu-flyout-anchor.placement-left.alignment-end,.menu-flyout-anchor.placement-right.alignment-end{inset-block-end:0}.menu-flyout-anchor.placement-left.alignment-center,.menu-flyout-anchor.placement-right.alignment-center{inset-block-start:50%;transform:translateY(-50%)}</style>
98
+ <style >.menu-flyout-wrapper{display:inline-block;height:auto;position:relative}.menu-flyout-backdrop{height:100%;left:0;position:fixed;top:0;width:100%;z-index:9999}.menu-flyout-anchor{position:absolute;z-index:10000}.menu-flyout-anchor.placement-top{--fds-menu-flyout-transition-offset:50%;bottom:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-bottom{top:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-left{right:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-right{left:calc(100% + var(--fds-menu-flyout-offset))}.menu-flyout-anchor.placement-bottom.alignment-start,.menu-flyout-anchor.placement-top.alignment-start{inset-inline-start:0}.menu-flyout-anchor.placement-bottom.alignment-end,.menu-flyout-anchor.placement-top.alignment-end{inset-inline-end:0}.menu-flyout-anchor.placement-bottom.alignment-center,.menu-flyout-anchor.placement-top.alignment-center{inset-inline-start:50%;transform:translateX(-50%)}.menu-flyout-anchor.placement-left.alignment-start,.menu-flyout-anchor.placement-right.alignment-start{inset-block-start:0}.menu-flyout-anchor.placement-left.alignment-end,.menu-flyout-anchor.placement-right.alignment-end{inset-block-end:0}.menu-flyout-anchor.placement-left.alignment-center,.menu-flyout-anchor.placement-right.alignment-center{inset-block-start:50%;transform:translateY(-50%)}</style>
package/SplitButton/SplitButton.scss CHANGED
@@ -4,6 +4,7 @@
4
4
  padding-block: 4px 6px;
5
5
  padding-inline: 11px;
6
6
  border-radius: var(--control-corner-radius) 0 0 var(--control-corner-radius);
7
+ flex: 1;
7
8
 
8
9
  &-container {
9
10
  @include flex($inline: true);
@@ -95,6 +96,9 @@
95
96
  &.disabled {
96
97
  pointer-events: none;
97
98
  }
99
+ &.hide-chevron {
100
+ border-radius: var(--control-corner-radius);
101
+ }
98
102
  }
99
103
  }
100
104
 
package/SplitButton/SplitButton.svelte CHANGED
@@ -1,6 +1,6 @@
1
1
  <script >import { get_current_component } from "svelte/internal";
2
2
  import MenuFlyoutWrapper from "../MenuFlyout/MenuFlyoutWrapper.svelte";
3
- import { createEventForwarder } from "../internal";
3
+ import { createEventForwarder, focusTrap } from "../internal";
4
4
  /** @restProps {button | a} */
5
5
  /** Specifies the visual styling of the button. */
6
6
  export let variant = "standard";
@@ -10,10 +10,12 @@ export let href = "";
10
10
  export let open = false;
11
11
  /** Controls whether the button is intended for user interaction, and styles it accordingly. */
12
12
  export let disabled = false;
13
- /** Controls the menu's disability state. */
13
+ /** Controls the menu's disability state. The default value is value of `disabled`. */
14
14
  export let menuDisabled = disabled;
15
+ /** Whether to trap focus for flyout*/
16
+ export let trapFocus = true;
15
17
  /** Controls the visibility of chevron menu button */
16
- export let showChevron = true;
18
+ export let hideChevron = false;
17
19
  /** Specifies the direction of the menu. */
18
20
  export let direction = "down";
19
21
  /** Alignment of the menu along the clickable target's given axis. */
@@ -38,15 +40,24 @@ export let chevronElement = null;
38
40
  /** Bound DOM reference to menu*/
39
41
  export let menuElement = null;
40
42
  let menu;
43
+ $: _focusTrap = trapFocus ? focusTrap : () => { };
41
44
  const forwardEvents = createEventForwarder(get_current_component());
42
45
  </script>
43
46
 
47
+ <!--
44
48
  <!--
45
49
  @component
46
50
  A button gives the user a way to trigger an immediate action. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus. [Docs](https://fluent-svelte.vercel.app/docs/components/button)
47
51
  - Usage:
48
52
  ```tsx
49
- <SplitButton>Click me!</SplitButton>
53
+ <SplitButton>
54
+ Click me!
55
+ <svelte:fragment slot="flyout">
56
+ <MenuFlyoutItem>Item 1</MenuFlyoutItem>
57
+ <MenuFlyoutItem>Item 2</MenuFlyoutItem>
58
+ <MenuFlyoutItem>Item 3</MenuFlyoutItem>
59
+ </svelte:fragment>
60
+ </SplitButton>
50
61
  ```
51
62
  -->
52
63
  <div class="split-button-container" bind:this={containerElement}>
@@ -59,12 +70,13 @@ A button gives the user a way to trigger an immediate action. Some buttons are s
59
70
  class="split-button style-{variant} {className}"
60
71
  tabindex={!disabled ? 0 : -1}
61
72
  class:disabled
73
+ class:hide-chevron={hideChevron}
62
74
  {disabled}
63
75
  {...$$restProps}
64
76
  >
65
77
  <slot />
66
78
  </svelte:element>
67
- {#if showChevron}
79
+ {#if !hideChevron}
68
80
  {#if !menuDisabled}
69
81
  <MenuFlyoutWrapper
70
82
  bind:this={menu}
@@ -80,9 +92,11 @@ A button gives the user a way to trigger an immediate action. Some buttons are s
80
92
  <button
81
93
  class={`split-button-chevron style-${variant}`}
82
94
  class:disabled={menuDisabled}
83
- aria-hidden="true"
84
95
  bind:this={chevronElement}
85
96
  disabled={menuDisabled}
97
+ aria-label="Open menu"
98
+ aria-haspopup="menu"
99
+ aria-expanded={open}
86
100
  >
87
101
  <svg
88
102
  xmlns="http://www.w3.org/2000/svg"
@@ -134,4 +148,4 @@ A button gives the user a way to trigger an immediate action. Some buttons are s
134
148
  {/if}
135
149
  </div>
136
150
 
137
- <style >.split-button{border-radius:var(--fds-control-corner-radius) 0 0 var(--fds-control-corner-radius);padding-block:4px 6px;padding-inline:11px}.split-button-container{display:inline-flex}.split-button-container :global(button){align-items:center;border:none;box-sizing:border-box;cursor:default;display:inline-flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;justify-content:center;line-height:20px;outline:none;position:relative;text-decoration:none;transition:var(--fds-control-faster-duration) ease background;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.split-button-container :global(button):focus-visible{box-shadow:var(--fds-focus-stroke)}.split-button-container :global(button).style-standard{background-clip:padding-box;background-color:var(--fds-control-fill-default);border:1px solid;border-color:var(--fds-control-border-default);color:var(--fds-text-primary)}.split-button-container :global(button).style-standard:hover{background-color:var(--fds-control-fill-secondary)}.split-button-container :global(button).style-standard:active{background-color:var(--fds-control-fill-tertiary);border-color:var(--fds-control-stroke-default);color:var(--fds-text-secondary)}.split-button-container :global(button).style-standard.disabled{background-color:var(--fds-control-fill-disabled);border-color:var(--fds-control-stroke-default);color:var(--fds-text-disabled)}.split-button-container :global(button).style-accent{background-color:var(--fds-accent-default);border:1px solid var(--fds-control-stroke-on-accent-default);border-bottom-color:var(--fds-control-stroke-on-accent-secondary);color:var(--fds-text-on-accent-primary);transition:var(--fds-control-faster-duration) ease border-color}.split-button-container :global(button).style-accent:hover{background-color:var(--fds-accent-secondary)}.split-button-container :global(button).style-accent:active{background-color:var(--fds-accent-tertiary);border-color:transparent;color:var(--fds-text-on-accent-secondary)}.split-button-container :global(button).style-accent.disabled{background-color:var(--fds-accent-disabled);border-color:transparent;color:var(--fds-text-on-accent-disabled)}.split-button-container :global(button).style-hyperlink{background-color:var(--fds-subtle-fill-transparent);color:var(--fds-accent-text-primary);cursor:pointer}.split-button-container :global(button).style-hyperlink:hover{background-color:var(--fds-subtle-fill-secondary)}.split-button-container :global(button).style-hyperlink:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-accent-text-tertiary)}.split-button-container :global(button).style-hyperlink.disabled{color:var(--fds-accent-text-disabled)}.split-button-container :global(button).disabled{pointer-events:none}.split-button-chevron{border-left-color:var(--fds-control-solid-fill-default)!important;border-radius:0 var(--fds-control-corner-radius) var(--fds-control-corner-radius) 0;height:100%;padding-inline:8px}</style>
151
+ <style >.split-button{border-radius:var(--fds-control-corner-radius) 0 0 var(--fds-control-corner-radius);flex:1;padding-block:4px 6px;padding-inline:11px}.split-button-container{display:inline-flex}.split-button-container :global(button){align-items:center;border:none;box-sizing:border-box;cursor:default;display:inline-flex;font-family:var(--fds-font-family-text);font-size:var(--fds-body-font-size);font-weight:400;justify-content:center;line-height:20px;outline:none;position:relative;text-decoration:none;transition:var(--fds-control-faster-duration) ease background;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.split-button-container :global(button):focus-visible{box-shadow:var(--fds-focus-stroke)}.split-button-container :global(button).style-standard{background-clip:padding-box;background-color:var(--fds-control-fill-default);border:1px solid;border-color:var(--fds-control-border-default);color:var(--fds-text-primary)}.split-button-container :global(button).style-standard:hover{background-color:var(--fds-control-fill-secondary)}.split-button-container :global(button).style-standard:active{background-color:var(--fds-control-fill-tertiary);border-color:var(--fds-control-stroke-default);color:var(--fds-text-secondary)}.split-button-container :global(button).style-standard.disabled{background-color:var(--fds-control-fill-disabled);border-color:var(--fds-control-stroke-default);color:var(--fds-text-disabled)}.split-button-container :global(button).style-accent{background-color:var(--fds-accent-default);border:1px solid var(--fds-control-stroke-on-accent-default);border-bottom-color:var(--fds-control-stroke-on-accent-secondary);color:var(--fds-text-on-accent-primary);transition:var(--fds-control-faster-duration) ease border-color}.split-button-container :global(button).style-accent:hover{background-color:var(--fds-accent-secondary)}.split-button-container :global(button).style-accent:active{background-color:var(--fds-accent-tertiary);border-color:transparent;color:var(--fds-text-on-accent-secondary)}.split-button-container :global(button).style-accent.disabled{background-color:var(--fds-accent-disabled);border-color:transparent;color:var(--fds-text-on-accent-disabled)}.split-button-container :global(button).style-hyperlink{background-color:var(--fds-subtle-fill-transparent);color:var(--fds-accent-text-primary);cursor:pointer}.split-button-container :global(button).style-hyperlink:hover{background-color:var(--fds-subtle-fill-secondary)}.split-button-container :global(button).style-hyperlink:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-accent-text-tertiary)}.split-button-container :global(button).style-hyperlink.disabled{color:var(--fds-accent-text-disabled)}.split-button-container :global(button).disabled{pointer-events:none}.split-button-container :global(button).hide-chevron{border-radius:var(--fds-control-corner-radius)}.split-button-chevron{border-left-color:var(--fds-control-solid-fill-default)!important;border-radius:0 var(--fds-control-corner-radius) var(--fds-control-corner-radius) 0;height:100%;padding-inline:8px}</style>
package/SplitButton/SplitButton.svelte.d.ts CHANGED
@@ -7,7 +7,8 @@ declare const __propDef: {
7
7
  open?: boolean;
8
8
  disabled?: boolean;
9
9
  menuDisabled?: boolean;
10
- showChevron?: boolean;
10
+ trapFocus?: boolean;
11
+ hideChevron?: boolean;
11
12
  direction?: "down" | "up";
12
13
  alignment?: "start" | "center" | "end";
13
14
  offset?: number;
@@ -32,11 +33,20 @@ export declare type SplitButtonProps = typeof __propDef.props;
32
33
  export declare type SplitButtonEvents = typeof __propDef.events;
33
34
  export declare type SplitButtonSlots = typeof __propDef.slots;
34
35
  /**
36
+ * <!--
37
+ *
35
38
  * A button gives the user a way to trigger an immediate action. Some buttons are specialized for particular tasks, such as navigation, repeated actions, or presenting menus. [Docs](https://fluent-svelte.vercel.app/docs/components/button)
36
39
  * - Usage:
37
- * ```tsx
38
- * <SplitButton>Click me!</SplitButton>
39
- * ```
40
+ * ```tsx
41
+ * <SplitButton>
42
+ * Click me!
43
+ * <svelte:fragment slot="flyout">
44
+ * <MenuFlyoutItem>Item 1</MenuFlyoutItem>
45
+ * <MenuFlyoutItem>Item 2</MenuFlyoutItem>
46
+ * <MenuFlyoutItem>Item 3</MenuFlyoutItem>
47
+ * </svelte:fragment>
48
+ * </SplitButton>
49
+ * ```
40
50
  */
41
51
  export default class SplitButton extends SvelteComponentTyped<SplitButtonProps, SplitButtonEvents, SplitButtonSlots> {
42
52
  }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fluent-svelte-extra",
3
- "version": "2.0.4",
3
+ "version": "2.0.7",
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",