11 | 12 | 15 | -------------------------------------------------------------------------------- /src/lib/MenuFlyout/MenuFlyoutItem.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | 3 | .menu-flyout-item { 4 | @include flex($align: center); 5 | @include typography-body; 6 | 7 | inline-size: calc(100% - 8px); 8 | position: relative; 9 | box-sizing: border-box; 10 | flex: 0 0 auto; 11 | // overflow: hidden; 12 | margin: 2px 4px; 13 | padding-inline: 12px; 14 | border-radius: var(--control-corner-radius); 15 | outline: none; 16 | background-color: var(--subtle-fill-transparent); 17 | color: var(--text-primary); 18 | text-decoration: none; 19 | cursor: default; 20 | user-select: none; 21 | min-block-size: 28px; 22 | white-space: nowrap; 23 | text-overflow: ellipsis; 24 | text-decoration: none; 25 | 26 | &::before { 27 | content: ""; 28 | position: absolute; 29 | border-radius: 3px; 30 | background-color: var(--accent-default); 31 | transition: transform var(--control-fast-duration) var(--control-fast-out-slow-in-easing); 32 | opacity: 0; 33 | inset-inline-start: 0; 34 | inline-size: 3px; 35 | block-size: 0; 36 | } 37 | 38 | &:focus-visible { 39 | box-shadow: var(--focus-stroke); 40 | } 41 | 42 | &:hover, 43 | &[aria-expanded="true"], 44 | &.selected { 45 | background-color: var(--subtle-fill-secondary); 46 | } 47 | 48 | &.checked { 49 | :global { 50 | .menu-flyout-item- { 51 | &bullet, 52 | &checkmark { 53 | visibility: visible; 54 | } 55 | } 56 | } 57 | } 58 | 59 | &:active { 60 | background-color: var(--subtle-fill-tertiary); 61 | 62 | &::before { 63 | transform: scaleY(0.625); 64 | } 65 | } 66 | 67 | &.disabled { 68 | background-color: var(--subtle-fill-transparent); 69 | color: var(--text-disabled); 70 | pointer-events: none; 71 | &.selected { 72 | background-color: var(--subtle-fill-secondary); 73 | &::before { 74 | background-color: var(--accent-disabled); 75 | } 76 | } 77 | > :global(.menu-flyout-item-hint) { 78 | color: var(--text-disabled); 79 | } 80 | } 81 | 82 | &.selected::before { 83 | opacity: 1; 84 | block-size: 16px; 85 | } 86 | 87 | &.indented { 88 | padding-inline-start: 40px; 89 | } 90 | 91 | &-checkmark, 92 | &-bullet { 93 | visibility: hidden; 94 | } 95 | 96 | & &-arrow { 97 | box-sizing: content-box; 98 | inline-size: 12px; 99 | block-size: 12px; 100 | margin-inline-end: 0; 101 | margin-inline-start: auto; 102 | padding-inline-start: 24px; 103 | } 104 | 105 | &-checkmark { 106 | @include flex($align: center, $justify: center); 107 | inline-size: 12px; 108 | block-size: 12px; 109 | margin-inline-start: 2px; 110 | margin-inline-end: 14px; 111 | } 112 | 113 | &-bullet { 114 | inline-size: 4px; 115 | block-size: 4px; 116 | border-radius: 4px; 117 | margin-inline-start: 6px; 118 | margin-inline-end: 18px; 119 | background-color: currentColor; 120 | } 121 | 122 | &-input-label { 123 | display: contents; 124 | } 125 | 126 | > :global(svg) { 127 | @include icon($size: 16px); 128 | margin-inline-end: 12px; 129 | } 130 | 131 | > :global(.menu-flyout-item-hint) { 132 | flex: 1 1 auto; 133 | text-align: end; 134 | padding-left: 24px; 135 | overflow: hidden; 136 | text-overflow: ellipsis; 137 | color: var(--text-secondary); 138 | } 139 | } 140 | 141 | .menu-flyout-submenu-anchor { 142 | z-index: 10000; 143 | position: absolute; 144 | inset-block-start: 0; 145 | inset-inline-start: 100%; 146 | } 147 | -------------------------------------------------------------------------------- /src/lib/MenuFlyout/MenuFlyoutSurface.scss: -------------------------------------------------------------------------------- 1 | @use "../mixins" as *; 2 | 3 | @keyframes menu-open { 4 | from { 5 | transform: translateY(var(--menu-flyout-transition-offset, -50%)); 6 | } 7 | to { 8 | transform: none; 9 | } 10 | } 11 | 12 | @keyframes menu-shadow { 13 | from { 14 | box-shadow: none; 15 | } 16 | to { 17 | box-shadow: var(--flyout-shadow); 18 | } 19 | } 20 | 21 | .menu-flyout { 22 | @include typography-body; 23 | @include flex($direction: column); 24 | animation: menu-open var(--control-normal-duration) var(--control-fast-out-slow-in-easing), 25 | menu-shadow var(--control-fast-duration) var(--control-fast-out-slow-in-easing) 26 | var(--control-normal-duration) forwards; 27 | min-inline-size: 120px; 28 | max-inline-size: 100%; 29 | max-block-size: 100vh; 30 | margin: 0; 31 | padding: 0; 32 | padding-block: 2px; 33 | box-sizing: border-box; 34 | color: var(--text-primary); 35 | border-radius: var(--overlay-corner-radius); 36 | border: 1px solid var(--surface-stroke-flyout); 37 | background-color: var(--solid-background-quarternary); 38 | background-clip: padding-box; 39 | &-surface-container { 40 | overflow: hidden; 41 | } 42 | &.acrylic { 43 | background-color: var(--acrylic-fallback-background-base); 44 | background-image: var(--acrylic-noise-asset-alpha); 45 | backdrop-filter: var(--acrylic-fallback-filter); 46 | background-clip: border-box; 47 | } 48 | } -------------------------------------------------------------------------------- /src/lib/MenuFlyout/MenuFlyoutSurface.svelte: -------------------------------------------------------------------------------- 1 | 14 | 15 | 29 | 30 | 33 | -------------------------------------------------------------------------------- /src/lib/MenuFlyout/MenuFlyoutWrapper.scss: -------------------------------------------------------------------------------- 1 | .menu-flyout- { 2 | &wrapper { 3 | display: inline-block; 4 | height: auto; 5 | position: relative; 6 | } 7 | &backdrop { 8 | position: fixed; 9 | top: 0; 10 | left: 0; 11 | width: 100%; 12 | height: 100%; 13 | z-index: 9999; 14 | } 15 | &anchor { 16 | position: absolute; 17 | z-index: 10000; 18 | &.placement- { 19 | &top { 20 | --fds-menu-flyout-transition-offset: 50%; 21 | bottom: calc(100% + var(--menu-flyout-offset)); 22 | } 23 | &bottom { 24 | top: calc(100% + var(--menu-flyout-offset)); 25 | } 26 | &left { 27 | right: calc(100% + var(--menu-flyout-offset)); 28 | } 29 | &right { 30 | left: calc(100% + var(--menu-flyout-offset)); 31 | } 32 | &top, 33 | &bottom { 34 | &.alignment- { 35 | &start { 36 | inset-inline-start: 0; 37 | } 38 | &end { 39 | inset-inline-end: 0; 40 | } 41 | ¢er { 42 | inset-inline-start: 50%; 43 | transform: translateX(-50%); 44 | } 45 | } 46 | } 47 | &left, 48 | &right { 49 | &.alignment- { 50 | &start { 51 | inset-block-start: 0; 52 | } 53 | &end { 54 | inset-block-end: 0; 55 | } 56 | ¢er { 57 | inset-block-start: 50%; 58 | transform: translateY(-50%); 59 | } 60 | } 61 | } 62 | } 63 | } 64 | } -------------------------------------------------------------------------------- /src/lib/MenuFlyout/MenuFlyoutWrapper.svelte: -------------------------------------------------------------------------------- 1 | 80 | 81 |
91 |
13 |
33 |
34 |
36 |
37 |
38 |
83 |
--------------------------------------------------------------------------------
/src/lib/NumberBox/NumberBox.scss:
--------------------------------------------------------------------------------
1 | @use "../mixins" as *;
2 |
3 | :global {
4 | .number-box input {
5 | appearance: textfield;
6 | &::-webkit-outer-spin-button,
7 | &::-webkit-inner-spin-button {
8 | appearance: none;
9 | margin: 0;
10 | }
11 | }
12 | }
13 |
14 | .number-box-spinner-flyout {
15 | @include flex($direction: column);
16 | border-radius: var(--overlay-corner-radius);
17 | border: 1px solid var(--surface-stroke-flyout);
18 | background-clip: padding-box;
19 | box-sizing: border-box;
20 | background-color: var(--fds-solid-background-quarternary);
21 | box-shadow: var(--flyout-shadow);
22 | position: absolute;
23 | padding: 2px 4px;
24 | inset-inline-end: -16px;
25 | z-index: 100;
26 | :global(.number-box-spinner) {
27 | margin: 2px 1px;
28 | inline-size: 36px;
29 | block-size: 36px;
30 | }
31 | }
32 |
--------------------------------------------------------------------------------
/src/lib/PersonPicture/PersonPicture.scss:
--------------------------------------------------------------------------------
1 | @use "../mixins" as *;
2 |
3 | .person-picture {
4 | @include flex($justify: center, $align: center);
5 | user-select: none;
6 | text-align: center;
7 | overflow: hidden;
8 | inline-size: 100%;
9 | block-size: 100%;
10 | flex: 0 0 auto;
11 | background-color: var(--control-alt-fill-quarternary);
12 | border: 1px solid var(--card-stroke-default);
13 | background-clip: padding-box;
14 | box-sizing: border-box;
15 | border-radius: 50%;
16 | font: {
17 | family: var(--font-family-display);
18 | weight: 600;
19 | size: calc(var(--person-picture-size) * (5 / 12));
20 | }
21 | &-container {
22 | display: flex;
23 | position: relative;
24 | inline-size: var(--person-picture-size);
25 | block-size: var(--person-picture-size);
26 | }
27 | &-badge {
28 | @include flex($direction: column, $align: end);
29 | position: absolute;
30 | inset-inline-start: 0;
31 | inset-block-start: 0;
32 | inline-size: 100%;
33 | block-size: 100%;
34 | }
35 | }
36 |
--------------------------------------------------------------------------------
/src/lib/PersonPicture/PersonPicture.svelte:
--------------------------------------------------------------------------------
1 |
25 |
26 |
31 | {#if src && !error}
32 | ![]()
(error = true)}
35 | class="person-picture {className}"
36 | width={size}
37 | height={size}
38 | {src}
39 | {alt}
40 | {...$$restProps}
41 | />
42 | {:else}
43 |
59 |
60 |
63 |
--------------------------------------------------------------------------------
/src/lib/ProgressBar/ProgressBar.scss:
--------------------------------------------------------------------------------
1 | @use "../mixins" as *;
2 |
3 | @keyframes indeterminate-1 {
4 | 0% {
5 | opacity: 1;
6 | transform: translateX(-100%);
7 | }
8 | 75% {
9 | opacity: 1;
10 | transform: translateX(300%);
11 | }
12 | 75.01% {
13 | opacity: 0;
14 | }
15 | 100% {
16 | opacity: 0;
17 | transform: translateX(300%);
18 | }
19 | }
20 | @keyframes indeterminate-2 {
21 | 0% {
22 | opacity: 0;
23 | transform: translateX(-150%);
24 | }
25 | 37.49% {
26 | opacity: 0;
27 | }
28 | 37.5% {
29 | opacity: 1;
30 | transform: translateX(-150%);
31 | }
32 | 100% {
33 | transform: translateX(166.66%);
34 | opacity: 1;
35 | }
36 | }
37 |
38 | .progress-bar {
39 | @include flex($align: center);
40 | width: 100%;
41 | min-block-size: 3px;
42 | &-track {
43 | height: 3px;
44 | max-width: 50%;
45 | transition: var(--control-fast-duration) linear fill;
46 | fill: var(--accent-default);
47 | }
48 | &-rail {
49 | fill: var(--control-strong-stroke-default);
50 | width: 100%;
51 | height: 1px;
52 | }
53 | &.indeterminate {
54 | .progress-bar- {
55 | &rail {
56 | display: none;
57 | }
58 | &track {
59 | animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);
60 | &:first-of-type {
61 | width: 40%;
62 | animation: 2s infinite indeterminate-1;
63 | }
64 | &:nth-of-type(2) {
65 | width: 60%;
66 | animation: 2s infinite indeterminate-2;
67 | }
68 | }
69 | }
70 | }
71 | // &.status- {
72 | // &paused {
73 | // .progress-bar-fill {
74 | // fill: var(--system-caution);
75 | // }
76 | // }
77 | // &error {
78 | // .progress-bar-fill {
79 | // fill: var(--system-critical);
80 | // }
81 | // }
82 | // }
83 | }
84 |
--------------------------------------------------------------------------------
/src/lib/ProgressBar/ProgressBar.svelte:
--------------------------------------------------------------------------------
1 |
24 |
25 |
57 |
58 |
61 |
--------------------------------------------------------------------------------
/src/lib/ProgressRing/ProgressRing.scss:
--------------------------------------------------------------------------------
1 | @keyframes progress-ring-indeterminate {
2 | 0% {
3 | stroke-dasharray: 0.01px 43.97px;
4 | transform: rotate(0);
5 | }
6 | 50% {
7 | stroke-dasharray: 21.99px 21.99px;
8 | transform: rotate(450deg);
9 | }
10 | 100% {
11 | stroke-dasharray: 0.01px 43.97px;
12 | transform: rotate(1080deg);
13 | }
14 | }
15 |
16 | .progress-ring {
17 | outline: none;
18 | min-inline-size: 16px;
19 | min-block-size: 16px;
20 |
21 | circle {
22 | transform: rotate(-90deg);
23 | transform-origin: 50% 50%;
24 | transition: all var(--control-normal-duration) linear;
25 | fill: none;
26 | stroke: var(--accent-default);
27 | stroke: {
28 | width: 1.5;
29 | linecap: round;
30 | dasharray: 43.97;
31 | }
32 | }
33 |
34 | &.indeterminate circle {
35 | animation: progress-ring-indeterminate 2s linear infinite;
36 | }
37 | }
38 |
--------------------------------------------------------------------------------
/src/lib/ProgressRing/ProgressRing.svelte:
--------------------------------------------------------------------------------
1 |
36 |
37 |
46 |
70 |
71 |
74 |
--------------------------------------------------------------------------------
/src/lib/RadioButton/RadioButton.scss:
--------------------------------------------------------------------------------
1 | @use "../mixins" as *;
2 |
3 | .radio-button {
4 | @include flex($inline: true, $align: center, $justify: center);
5 | @include typography-body;
6 |
7 | position: relative;
8 | margin: 0;
9 | border: 1px solid var(--control-strong-stroke-default);
10 | border-radius: 20px;
11 | outline: none;
12 | background-clip: padding-box;
13 | background-color: var(--control-alt-fill-secondary);
14 | appearance: none;
15 | inline-size: 20px;
16 | block-size: 20px;
17 |
18 | &::before {
19 | content: "";
20 | inline-size: 4px;
21 | block-size: 4px;
22 | visibility: hidden;
23 | position: absolute;
24 | border-radius: 12px;
25 | background-color: var(--text-on-accent-primary);
26 | }
27 |
28 | &:focus-visible {
29 | box-shadow: var(--focus-stroke);
30 | }
31 |
32 | &:hover {
33 | background-color: var(--control-alt-fill-tertiary);
34 | }
35 |
36 | &:active {
37 | border-color: var(--control-strong-stroke-disabled);
38 | background-color: var(--control-alt-fill-quarternary);
39 |
40 | &::before {
41 | transition: var(--control-normal-duration) var(--control-fast-out-slow-in-easing);
42 | visibility: visible;
43 | inline-size: 10px;
44 | block-size: 10px;
45 | }
46 | }
47 |
48 | &:disabled {
49 | border-color: var(--control-strong-stroke-disabled);
50 | background-color: var(--control-alt-fill-disabled);
51 |
52 | &::before {
53 | visibility: hidden;
54 | }
55 |
56 | + span {
57 | color: var(--text-disabled);
58 | }
59 | }
60 |
61 | &:checked {
62 | border: none;
63 | background-color: var(--accent-default);
64 |
65 | &::before {
66 | visibility: visible;
67 | transition: var(--control-normal-duration) var(--control-fast-out-slow-in-easing);
68 | box-shadow: 0 0 0 1px var(--control-stroke-default);
69 | inline-size: 12px;
70 | block-size: 12px;
71 | }
72 |
73 | &:hover {
74 | background-color: var(--accent-secondary);
75 |
76 | &::before {
77 | inline-size: 14px;
78 | block-size: 14px;
79 | }
80 | }
81 |
82 | &:active {
83 | background-color: var(--accent-tertiary);
84 |
85 | &::before {
86 | inline-size: 10px;
87 | block-size: 10px;
88 | }
89 | }
90 |
91 | &:disabled {
92 | background-color: var(--accent-disabled);
93 |
94 | &::before {
95 | box-shadow: none;
96 | inline-size: 12px;
97 | block-size: 12px;
98 | }
99 | }
100 | }
101 |
102 | &-container {
103 | @include flex($inline: true, $align: center);
104 | @include typography-body;
105 |
106 | color: var(--text-primary);
107 | user-select: none;
108 | min-block-size: 32px;
109 |
110 | > span {
111 | padding-inline-start: 8px;
112 | }
113 | }
114 | }
115 |
--------------------------------------------------------------------------------
/src/lib/RadioButton/RadioButton.svelte:
--------------------------------------------------------------------------------
1 |
29 |
30 |
46 |
64 |
65 |
68 |
--------------------------------------------------------------------------------
/src/lib/RangeSlider/RangeSlider.svelte:
--------------------------------------------------------------------------------
1 |
46 |
47 |
44 |
45 | {alt
46 | ?.split(" ")
47 | .map(i => i.charAt(0))
48 | .join("")
49 | .toUpperCase() ?? ""}
50 |
51 |
52 | {/if}
53 | {#if $$slots.badge}
54 |
55 |
48 |
69 |
70 |
120 |
--------------------------------------------------------------------------------
/src/lib/ScrollView/ScrollView.svelte:
--------------------------------------------------------------------------------
1 |
2 |
3 |
10 |
--------------------------------------------------------------------------------
/src/lib/SegmentedControl/SegmentedControl.scss:
--------------------------------------------------------------------------------
1 | @use "../mixins" as *;
2 |
3 | $segmented-control-caret-color: var(--accent-default);
4 |
5 | .segmented-control {
6 | @include flex($inline: true, $align: center, $direction: row);
7 | @include typography-body;
8 | background-color: var(--control-alt-fill-secondary);
9 | border: 1px solid;
10 | border-color: var(--control-border-default);
11 | background-clip: padding-box;
12 | position: relative;
13 | box-sizing: border-box;
14 | text-decoration: none;
15 | outline: none;
16 | cursor: default;
17 | overflow: hidden;
18 | border-radius: var(--control-corner-radius);
19 |
20 | &-highlight {
21 | position: absolute;
22 | height: 100%;
23 | pointer-events: none;
24 | background-color: var(--control-fill-default);
25 | border-radius: var(--control-corner-radius);
26 | border: 1px solid;
27 | border-color: var(--control-border-default);
28 | background-clip: padding-box;
29 |
30 | &::after {
31 | background-color: $segmented-control-caret-color;
32 | block-size: 3px;
33 | border-radius: 3px;
34 | content: "";
35 | inline-size: 16px;
36 | inset-block-end: 0;
37 | position: absolute;
38 | left: 50%;
39 | transform: translateX(-50%);
40 | }
41 |
42 | &.disabled {
43 | background-color: var(--control-fill-disabled);
44 |
45 | &::after {
46 | background-color: var(--accent-disabled);
47 | }
48 | }
49 | }
50 |
51 | &.disabled {
52 | background-color: var(--control-fill-disabled);
53 | pointer-events: none;
54 |
55 | & :global(button) {
56 | color: var(--text-disabled);
57 | }
58 | }
59 | }
--------------------------------------------------------------------------------
/src/lib/SegmentedControl/SegmentedControl.svelte:
--------------------------------------------------------------------------------
1 |
92 |
93 |
49 |
50 |
56 |
62 |
63 |
68 |
64 | {valuesText.split(",")[0]}
65 | {valuesText.split(",")[1]}
66 |
67 |
102 | {#if animation}
103 |
109 | {/if}
110 |
112 |
113 |
116 |
--------------------------------------------------------------------------------
/src/lib/SegmentedControl/SegmentedControlButton.scss:
--------------------------------------------------------------------------------
1 | @use "../mixins" as *;
2 |
3 | .segmented-control-button {
4 | @include flex($inline: true, $align: center, $justify: center);
5 | @include typography-body;
6 | position: relative;
7 | box-sizing: border-box;
8 | border: 1px solid;
9 | border-color: transparent;
10 | padding-block: 4px 6px;
11 | padding-inline: 11px;
12 | text-decoration: none;
13 | outline: none;
14 | background-clip: padding-box;
15 | cursor: default;
16 | background-color: transparent;
17 | border-radius: var(--control-corner-radius);
18 | transition: color var(--control-faster-duration);
19 |
20 | & .icon {
21 | @include flex($inline: true, $align: center, $justify: center);
22 | margin-inline-end: 4px;
23 |
24 | & svg {
25 | width: 16px;
26 | height: 16px;
27 | }
28 | }
29 |
30 | &:hover {
31 | color: var(--text-secondary);
32 | }
33 |
34 | &:active {
35 | color: var(--text-tertiary);
36 | }
37 |
38 | &.disabled {
39 | pointer-events: none;
40 | color: var(--text-disabled);
41 | }
42 |
43 | &:global(.no-animation) {
44 | &.selected {
45 | background-color: var(--control-fill-default);
46 | border-color: var(--control-border-default);
47 | }
48 |
49 | &.selected {
50 | &::after {
51 | transform: scaleX(100%);
52 | opacity: 1;
53 | }
54 | }
55 |
56 | &::after {
57 | background-color: var(--accent-default);
58 | block-size: 3px;
59 | border-radius: 3px;
60 | content: "";
61 | inline-size: 16px;
62 | inset-block-end: 0;
63 | transform: scaleX(0%);
64 | opacity: 0;
65 | position: absolute;
66 | transition: transform var(--control-fast-duration) var(--control-fast-out-slow-in-easing);
67 | }
68 |
69 | &.disabled {
70 | &::after {
71 | background-color: var(--accent-disabled) !important;
72 | }
73 | }
74 | }
75 |
76 | }
--------------------------------------------------------------------------------
/src/lib/SegmentedControl/SegmentedControlButton.svelte:
--------------------------------------------------------------------------------
1 |
55 |
56 |
75 |
76 |
79 |
--------------------------------------------------------------------------------
/src/lib/TeachingTip/TeachingTipSurface.scss:
--------------------------------------------------------------------------------
1 | @use "../mixins" as *;
2 |
3 | .teaching-tip {
4 | @include typography-body;
5 | @include flex($direction: column, $justify: flex-start, $align: flex-start);
6 | min-inline-size: 320px;
7 | box-sizing: border-box;
8 | color: var(--text-primary);
9 | border-radius: var(--overlay-corner-radius);
10 | border: 1px solid var(--surface-stroke-default);
11 | background-color: var(--solid-background-quarternary);
12 | background-clip: padding-box;
13 | box-shadow: var(--flyout-shadow);
14 | &.acrylic {
15 | background-color: var(--acrylic-fallback-background-base);
16 | background-image: var(--acrylic-noise-asset-alpha);
17 | backdrop-filter: var(--acrylic-fallback-filter);
18 | background-clip: border-box;
19 | }
20 | }
21 |
--------------------------------------------------------------------------------
/src/lib/TeachingTip/TeachingTipSurface.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 |
19 |
21 |
22 |
25 |
--------------------------------------------------------------------------------
/src/lib/TextArea/TextArea.scss:
--------------------------------------------------------------------------------
1 | @use "../mixins" as *;
2 |
3 | .text-area {
4 | @include typography-body;
5 | box-sizing: border-box;
6 | word-break: break-all;
7 | flex-grow: 1;
8 | overflow-y: auto;
9 | overflow-x: hidden;
10 | border: none;
11 | outline: none;
12 | cursor: unset;
13 | margin: 0;
14 | flex: 1 1 auto;
15 | inline-size: 100%;
16 | min-block-size: 30px;
17 | padding: 6px 12px;
18 | border-radius: var(--control-corner-radius);
19 | background-color: transparent;
20 | &:empty:before {
21 | content: attr(placeholder);
22 | pointer-events: none;
23 | display: block;
24 | color: var(--text-secondary);
25 | }
26 | &::-webkit-search-decoration,
27 | &::-webkit-search-cancel-button,
28 | &::-webkit-search-results-button,
29 | &::-webkit-search-results-decoration {
30 | -webkit-appearance: none;
31 | }
32 | &::-ms-reveal {
33 | display: none;
34 | }
35 | &:disabled {
36 | color: var(--text-disabled);
37 |
38 | &::placeholder {
39 | color: var(--text-disabled);
40 | }
41 | }
42 | &-container {
43 | @include flex($align: center);
44 | cursor: text;
45 | position: relative;
46 | inline-size: 100%;
47 | border-radius: var(--control-corner-radius);
48 | background-clip: padding-box;
49 | background-color: var(--control-fill-default);
50 | border: 1px solid var(--control-stroke-default);
51 | &:hover {
52 | background-color: var(--control-fill-secondary);
53 | }
54 | &.disabled {
55 | cursor: default !important;
56 |
57 | color: var(--text-disabled) !important;
58 | background-color: var(--control-fill-disabled);
59 | .text-area-underline {
60 | display: none;
61 | }
62 | }
63 | &:focus-within {
64 | background-color: var(--control-fill-input-active);
65 | .text-area::placeholder {
66 | color: var(--text-tertiary);
67 | }
68 | .text-area-underline::after {
69 | border-bottom: 2px solid var(--accent-default);
70 | }
71 | :global(.text-area-clear-button) {
72 | display: flex;
73 | }
74 | }
75 | }
76 | &-underline {
77 | position: absolute;
78 | inset-inline-start: -1px;
79 | inset-block-start: -1px;
80 | inline-size: calc(100% + 2px);
81 | block-size: calc(100% + 2px);
82 | pointer-events: none;
83 | border-radius: var(--control-corner-radius);
84 | overflow: hidden;
85 | &::after {
86 | content: "";
87 | box-sizing: border-box;
88 | position: absolute;
89 | inset-block-end: 0;
90 | inset-inline-start: 0;
91 | inline-size: 100%;
92 | block-size: 100%;
93 | border-bottom: var(--bottom-border);
94 | }
95 | }
96 | &-buttons {
97 | @include flex($align: center);
98 | cursor: default;
99 | flex: 0 0 auto;
100 | :global {
101 | > .text-area-button {
102 | margin-inline-start: 6px;
103 | &:first-of-type {
104 | margin-inline-start: 0;
105 | }
106 | &:last-of-type {
107 | margin-inline-end: 4px;
108 | }
109 | }
110 | .text-area-clear-button {
111 | display: none;
112 | }
113 | }
114 | }
115 | }
116 |
--------------------------------------------------------------------------------
/src/lib/TextArea/TextArea.svelte:
--------------------------------------------------------------------------------
1 |
46 |
47 |
55 |
62 |
70 |
72 |
73 |
76 |
--------------------------------------------------------------------------------
/src/lib/TextBox/TextBox.scss:
--------------------------------------------------------------------------------
1 | @use "../mixins" as *;
2 |
3 | .text-box {
4 | @include typography-body;
5 | box-sizing: border-box;
6 | border: none;
7 | outline: none;
8 | cursor: unset;
9 | margin: 0;
10 | flex: 1 1 auto;
11 | inline-size: 100%;
12 | min-block-size: 30px;
13 | padding-inline: 10px;
14 | border-radius: var(--control-corner-radius);
15 | color: var(--text-primary);
16 | background-color: transparent;
17 | &::placeholder {
18 | user-select: none;
19 | color: var(--text-secondary);
20 | }
21 | &::-webkit-search-decoration,
22 | &::-webkit-search-cancel-button,
23 | &::-webkit-search-results-button,
24 | &::-webkit-search-results-decoration {
25 | -webkit-appearance: none;
26 | }
27 | &::-ms-reveal {
28 | display: none;
29 | }
30 | &:disabled {
31 | color: var(--text-disabled);
32 |
33 | &::placeholder {
34 | color: var(--text-disabled);
35 | }
36 | }
37 | &-container {
38 | @include flex($align: center);
39 | cursor: text;
40 | position: relative;
41 | inline-size: 100%;
42 | border-radius: var(--control-corner-radius);
43 | background-clip: padding-box;
44 | background-color: var(--control-fill-default);
45 | border: 1px solid var(--control-stroke-default);
46 | &:hover {
47 | background-color: var(--control-fill-secondary);
48 | }
49 | &.disabled {
50 | cursor: default;
51 | background-color: var(--control-fill-disabled);
52 | .text-box-underline {
53 | display: none;
54 | }
55 | }
56 | &:focus-within {
57 | background-color: var(--control-fill-input-active);
58 | .text-box::placeholder {
59 | color: var(--text-tertiary);
60 | }
61 | .text-box-underline::after {
62 | border-bottom: 2px solid var(--accent-default);
63 | }
64 | :global(.text-box-clear-button) {
65 | display: flex;
66 | }
67 | }
68 | }
69 | &-underline {
70 | position: absolute;
71 | inset-inline-start: -1px;
72 | inset-block-start: -1px;
73 | inline-size: calc(100% + 2px);
74 | block-size: calc(100% + 2px);
75 | pointer-events: none;
76 | border-radius: var(--control-corner-radius);
77 | overflow: hidden;
78 | &::after {
79 | content: "";
80 | box-sizing: border-box;
81 | position: absolute;
82 | inset-block-end: 0;
83 | inset-inline-start: 0;
84 | inline-size: 100%;
85 | block-size: 100%;
86 | border-bottom: var(--bottom-border);
87 | }
88 | }
89 | &-buttons {
90 | @include flex($align: center);
91 | cursor: default;
92 | flex: 0 0 auto;
93 | :global {
94 | > .text-box-button {
95 | margin-inline-start: 6px;
96 | &:first-of-type {
97 | margin-inline-start: 0;
98 | }
99 | &:last-of-type {
100 | margin-inline-end: 4px;
101 | }
102 | }
103 | .text-box-clear-button {
104 | display: none;
105 | }
106 | }
107 | }
108 | }
109 |
--------------------------------------------------------------------------------
/src/lib/TextBox/TextBoxButton.scss:
--------------------------------------------------------------------------------
1 | @use "../mixins" as *;
2 |
3 | .text-box-button {
4 | @include flex($align: center, $justify: center);
5 | outline: none;
6 | border: none;
7 | box-sizing: border-box;
8 | min-inline-size: 26px;
9 | min-block-size: 22px;
10 | padding: 3px 5px;
11 | color: var(--text-secondary);
12 | border-radius: var(--control-corner-radius);
13 | background-color: var(--subtle-fill-transparent);
14 | &:focus-visible {
15 | box-shadow: var(--focus-stroke);
16 | }
17 | &:hover {
18 | background-color: var(--subtle-fill-secondary);
19 | }
20 | &:active {
21 | color: var(--text-tertiary);
22 | background-color: var(--subtle-fill-tertiary);
23 | }
24 | &:disabled {
25 | background-color: var(--subtle-fill-tertiary);
26 | color: var(--text-disabled);
27 | }
28 | :global(svg) {
29 | pointer-events: none;
30 | min-inline-size: 12px;
31 | min-block-size: 12px;
32 | fill: currentColor;
33 | }
34 | }
35 |
--------------------------------------------------------------------------------
/src/lib/TextBox/TextBoxButton.svelte:
--------------------------------------------------------------------------------
1 |
14 |
15 |
24 |
25 |
28 |
--------------------------------------------------------------------------------
/src/lib/ToggleSwitch/ToggleSwitch.scss:
--------------------------------------------------------------------------------
1 | @use "../mixins" as *;
2 |
3 | .toggle-switch {
4 | @include flex($inline: true, $align: center);
5 | @include typography-body;
6 |
7 | position: relative;
8 | margin: 0;
9 | border: 1px solid var(--control-strong-stroke-default);
10 | border-radius: 20px;
11 | outline: none;
12 | background-color: var(--control-alt-fill-secondary);
13 | appearance: none;
14 | inline-size: 40px;
15 | block-size: 20px;
16 |
17 | &::before {
18 | content: "";
19 | position: absolute;
20 | border-radius: 7px;
21 | background-color: var(--text-secondary);
22 | transition: var(--control-fast-duration) ease-in-out transform,
23 | var(--control-fast-duration) var(--control-fast-out-slow-in-easing) height,
24 | var(--control-fast-duration) var(--control-fast-out-slow-in-easing) width,
25 | var(--control-fast-duration) var(--control-fast-out-slow-in-easing) margin,
26 | var(--control-faster-duration) linear background;
27 | inset-inline-start: 3px;
28 | inline-size: 12px;
29 | block-size: 12px;
30 | }
31 |
32 | &:focus-visible {
33 | box-shadow: var(--focus-stroke);
34 | }
35 |
36 | &:hover {
37 | background-color: var(--control-alt-fill-tertiary);
38 |
39 | &::before {
40 | inline-size: 14px;
41 | block-size: 14px;
42 | }
43 | }
44 |
45 | &:active {
46 | background-color: var(--control-alt-fill-quarternary);
47 |
48 | &::before {
49 | inline-size: 17px;
50 | block-size: 14px;
51 | }
52 | }
53 |
54 | &:disabled {
55 | border-color: var(--control-strong-stroke-disabled);
56 | background-color: var(--control-alt-fill-disabled);
57 |
58 | &::before {
59 | margin: 0 !important;
60 | background-color: var(--text-disabled);
61 | box-shadow: none;
62 | inline-size: 12px;
63 | block-size: 12px;
64 | }
65 |
66 | + span {
67 | color: var(--text-disabled);
68 | }
69 | }
70 |
71 | &:checked {
72 | border: none;
73 | background-color: var(--accent-default);
74 |
75 | &::before {
76 | background-color: var(--text-on-accent-primary);
77 | box-shadow: 0 0 0 1px solid var(--control-stroke-default);
78 | transform: translateX(20px);
79 | }
80 |
81 | &:hover {
82 | background-color: var(--accent-secondary);
83 |
84 | &::before {
85 | margin-inline-start: -1px;
86 | }
87 | }
88 |
89 | &:active {
90 | background-color: var(--accent-tertiary);
91 |
92 | &::before {
93 | margin-inline-start: -4px;
94 | }
95 | }
96 |
97 | &:disabled {
98 | background-color: var(--accent-disabled);
99 | &::before {
100 | box-shadow: none;
101 | background-color: var(--text-on-accent-disabled);
102 | }
103 | }
104 | }
105 |
106 | &-container {
107 | @include flex($inline: true, $align: center);
108 | @include typography-body;
109 |
110 | color: var(--text-primary);
111 | user-select: none;
112 | min-block-size: 32px;
113 |
114 | > span {
115 | padding-inline-start: 8px;
116 | }
117 | }
118 | }
119 |
--------------------------------------------------------------------------------
/src/lib/ToggleSwitch/ToggleSwitch.svelte:
--------------------------------------------------------------------------------
1 |
26 |
27 |
35 |
52 |
53 |
56 |
--------------------------------------------------------------------------------
/src/lib/Tooltip/TooltipSurface.scss:
--------------------------------------------------------------------------------
1 | @use "../mixins" as *;
2 |
3 | .tooltip {
4 | @include flex($inline: true, $align: center, $justify: center);
5 | @include typography-body;
6 | box-sizing: border-box;
7 | inline-size: max-content;
8 | max-inline-size: 320px;
9 | padding-inline: 8px;
10 | padding-block: 5px 7px;
11 | background-clip: padding-box;
12 | background-color: var(--fds-solid-background-quarternary);
13 | border: 1px solid var(--surface-stroke-flyout);
14 | border-radius: var(--control-corner-radius);
15 | box-shadow: var(--tooltip-shadow);
16 | &.acrylic {
17 | background-color: var(--acrylic-fallback-background-base);
18 | background-image: var(--acrylic-noise-asset-alpha);
19 | backdrop-filter: var(--acrylic-fallback-filter);
20 | background-clip: border-box;
21 | }
22 | }
23 |
--------------------------------------------------------------------------------
/src/lib/Tooltip/TooltipSurface.svelte:
--------------------------------------------------------------------------------
1 |
17 |
18 | {
3 | onouterclick?: () => void;
4 | onoutercontextmenu?: () => void;
5 | onouterdblclick?: () => void;
6 | onoutermousedown?: () => void;
7 | onoutermouseenter?: () => void;
8 | onoutermouseleave?: () => void;
9 | onoutermousemove?: () => void;
10 | onoutermouseout?: () => void;
11 | onoutermouseover?: () => void;
12 | onoutermouseup?: () => void;
13 | }
14 | }
15 |
--------------------------------------------------------------------------------
/src/routes/__layout.svelte:
--------------------------------------------------------------------------------
1 |
25 |
26 |
27 |
28 |
29 |
35 |
36 |
37 |
38 |
39 |
41 |
42 |
45 |
--------------------------------------------------------------------------------
/src/routes/docs/__layout.svelte:
--------------------------------------------------------------------------------
1 |
21 |
22 |
58 |
59 |
62 |
119 |
120 |
123 |
--------------------------------------------------------------------------------
/src/routes/docs/components/button.md:
--------------------------------------------------------------------------------
1 |
7 |
8 | 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.
9 |
10 | ```ts
11 | import { Button } from "fluent-svelte";
12 | ```
13 |
14 |
15 |
16 |
17 |
18 |
19 |
20 |
21 |
22 |
23 | ## Usage
24 |
25 | A button can either be a clickable action or a link. By default, a button will be rendered as a standard HTML `
{
70 | if (maxLength != undefined && textAreaElement.innerText.length + 1 > maxLength)
71 | e.preventDefault();
72 | }}
73 | on:paste={e => {
74 | if (includeImages) return;
75 |
76 | const pastedData = e.clipboardData.getData("text");
77 | const regex = /^[a-zA-Z0-9çÇşŞğĞüÜöÖıİəƏ@ `!@#$%^&*()_+\-=\[\]{};':"\\|,.<>\/?~]+$/;
78 |
79 | const emojiRegex = /\p{Emoji}/u;
80 |
81 | if (emojiRegex.test(pastedData) !== true) {
82 | if (regex.test(pastedData) !== true) {
83 | e.preventDefault();
84 | }
85 | }
86 |
87 | if (textAreaElement.innerText.length + pastedData.length > maxLength)
88 | e.preventDefault();
89 | }}
90 | on:focus={e => {
91 | if (disabled) e.target.blur();
92 | }}
93 | class="text-area"
94 | {disabled}
95 | {readonly}
96 | {placeholder}
97 | {...$$restProps}
98 | bind:innerText={value}
99 | />
100 |
108 |
109 |
112 |
--------------------------------------------------------------------------------
/src/lib/TextBlock/TextBlock.scss:
--------------------------------------------------------------------------------
1 | .text-block {
2 | color: currentColor;
3 | display: inline-block;
4 | margin: 0;
5 | padding: 0;
6 | &.type- {
7 | &subtitle,
8 | &title,
9 | &title-large,
10 | &display {
11 | font: {
12 | family: var(--font-family-display);
13 | weight: 600;
14 | }
15 | }
16 | &body,
17 | &body-strong,
18 | &body-large,
19 | &body-large-strong {
20 | font-family: var(--font-family-text);
21 | }
22 | &caption {
23 | line-height: 16px;
24 | font: {
25 | size: var(--caption-font-size);
26 | weight: 400;
27 | family: var(--font-family-small);
28 | }
29 | }
30 | &body,
31 | &body-strong,
32 | &body-large,
33 | &body-large-strong {
34 | line-height: 20px;
35 | font: {
36 | weight: 400;
37 | size: var(--body-font-size);
38 | }
39 | }
40 | &body-strong,
41 | &body-large-strong {
42 | font-weight: 600;
43 | }
44 | &body-large,
45 | &body-large-strong {
46 | font-size: var(--body-large-font-size);
47 | line-height: 24px;
48 | }
49 | &subtitle {
50 | font-size: var(--subtitle-font-size);
51 | line-height: 28px;
52 | }
53 | &title {
54 | font-size: var(--title-font-size);
55 | line-height: 36px;
56 | }
57 | &title-large {
58 | font-size: var(--title-large-font-size);
59 | line-height: 52px;
60 | }
61 | &display {
62 | font-size: var(--display-font-size);
63 | line-height: 92px;
64 | }
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/lib/TextBlock/TextBlock.svelte:
--------------------------------------------------------------------------------
1 |
63 |
64 |
26 |
28 |
29 |
32 |
--------------------------------------------------------------------------------
/src/lib/Tooltip/TooltipWrapper.scss:
--------------------------------------------------------------------------------
1 | .tooltip- {
2 | &wrapper {
3 | position: relative;
4 | display: block;
5 | }
6 | &anchor {
7 | pointer-events: none;
8 | position: absolute;
9 | z-index: 100;
10 | &.placement- {
11 | &top {
12 | bottom: calc(100% + var(--tooltip-offset));
13 | }
14 | &bottom {
15 | top: calc(100% + var(--tooltip-offset));
16 | }
17 | &left {
18 | right: calc(100% + var(--tooltip-offset));
19 | }
20 | &right {
21 | left: calc(100% + var(--tooltip-offset));
22 | }
23 | &top,
24 | &bottom {
25 | &.alignment- {
26 | &start {
27 | inset-inline-start: 0;
28 | }
29 | &end {
30 | inset-inline-end: 0;
31 | }
32 | ¢er {
33 | inset-inline-start: 50%;
34 | transform: translateX(-50%);
35 | }
36 | }
37 | }
38 | &left,
39 | &right {
40 | &.alignment- {
41 | &start {
42 | inset-block-start: 0;
43 | }
44 | &end {
45 | inset-block-end: 0;
46 | }
47 | ¢er {
48 | inset-block-start: 50%;
49 | transform: translateY(-50%);
50 | }
51 | }
52 | }
53 | &auto {
54 | transform: translateY(-100%);
55 | &.alignment- {
56 | ¢er {
57 | transform: translate(-50%, -100%);
58 | }
59 | &end {
60 | transform: translate(-100%, -100%);
61 | }
62 | }
63 | }
64 | }
65 | }
66 | }
67 |
--------------------------------------------------------------------------------
/src/lib/Tooltip/TooltipWrapper.svelte:
--------------------------------------------------------------------------------
1 |
83 |
84 |
94 | placement === "auto" &&
95 | followCursor &&
96 | updateTooltipPositionAuto(wrapperElement.getBoundingClientRect())}
97 | >
98 |
117 |
118 |
121 |
--------------------------------------------------------------------------------
/src/lib/_mixins.scss:
--------------------------------------------------------------------------------
1 | @use "sass:selector";
2 |
3 | @mixin unify-parent($child) {
4 | @at-root #{selector.unify(&, $child)} {
5 | @content;
6 | }
7 | }
8 |
9 | @mixin flex(
10 | $direction: false,
11 | $justify: false,
12 | $align: false,
13 | $inline: false,
14 | $wrap: false,
15 | $gap: false
16 | ) {
17 | // display: flex/inline-flex
18 | @if $inline {
19 | display: inline-flex;
20 | } @else {
21 | display: flex;
22 | }
23 |
24 | // flex-direction
25 | @if $direction != false {
26 | @if $direction == row {
27 | flex-direction: row;
28 | } @else if $direction == column {
29 | flex-direction: column;
30 | } @else if $direction == row-reverse {
31 | flex-direction: row-reverse;
32 | } @else if $direction == column-reverse {
33 | flex-direction: column-reverse;
34 | }
35 | }
36 |
37 | // justify-content
38 | @if $justify != false {
39 | @if $justify == normal {
40 | justify-content: normal;
41 | } @else if $justify == center {
42 | justify-content: center;
43 | } @else if $justify == start {
44 | justify-content: flex-start;
45 | } @else if $justify == end {
46 | justify-content: flex-end;
47 | } @else if $justify == between {
48 | justify-content: space-between;
49 | } @else if $justify == around {
50 | justify-content: space-around;
51 | } @else if $justify == evenly {
52 | justify-content: space-evenly;
53 | }
54 | }
55 |
56 | // align-items/align-content
57 | @if $align != false {
58 | @if $align == normal {
59 | align-items: normal;
60 | } @else if $align == center {
61 | align-items: center;
62 | } @else if $align == start {
63 | align-items: flex-start;
64 | } @else if $align == end {
65 | align-items: flex-end;
66 | } @else if $align == between {
67 | align-content: space-between;
68 | } @else if $align == around {
69 | align-content: space-around;
70 | } @else if $align == evenly {
71 | align-content: space-evenly;
72 | }
73 | }
74 |
75 | // flex-wrap
76 | @if $wrap {
77 | flex-wrap: wrap;
78 | }
79 |
80 | // gap
81 | @if $gap {
82 | gap: $gap;
83 | }
84 | }
85 |
86 | @mixin icon($size: var(--body-font-size)) {
87 | inline-size: $size;
88 | block-size: auto;
89 | fill: currentColor;
90 | }
91 |
92 | @mixin typography-body {
93 | user-select: none;
94 | font: {
95 | family: var(--font-family-text);
96 | size: var(--body-font-size);
97 | weight: normal;
98 | }
99 | line-height: 20px;
100 | }
101 |
102 | // can't use this until chromium fixes their compositor
103 | @mixin acrylic-brush {
104 | background-color: var(--fds-solid-background-quarternary);
105 | @supports (backdrop-filter: var(--fds-acrylic-blur-factor)) {
106 | background-color: transparent;
107 | &::before,
108 | &::after {
109 | content: "";
110 | position: absolute;
111 | inset: 0;
112 | inline-size: 100%;
113 | block-size: 100%;
114 | }
115 | &::after {
116 | content: "";
117 | background: var(--acrylic-noise-asset) center/256px repeat;
118 | inset: 0;
119 | z-index: -1;
120 | opacity: 0.02;
121 | }
122 | &::before {
123 | z-index: 0;
124 | mix-blend-mode: luminosity;
125 | background: var(--fds-acrylic-background-default);
126 | background-blend-mode: color, luminosity;
127 | backdrop-filter: var(--fds-acrylic-blur-factor);
128 | }
129 | }
130 | }
131 |
--------------------------------------------------------------------------------
/src/lib/index.ts:
--------------------------------------------------------------------------------
1 | export { default as Button } from "./Button/Button.svelte";
2 | export { default as Checkbox } from "./Checkbox/Checkbox.svelte";
3 | export { default as ToggleSwitch } from "./ToggleSwitch/ToggleSwitch.svelte";
4 | export { default as RadioButton } from "./RadioButton/RadioButton.svelte";
5 | export { default as ProgressRing } from "./ProgressRing/ProgressRing.svelte";
6 | export { default as ProgressBar } from "./ProgressBar/ProgressBar.svelte";
7 | export { default as ComboBox } from "./ComboBox/ComboBox.svelte";
8 | export { default as InfoBadge } from "./InfoBadge/InfoBadge.svelte";
9 | export { default as Flyout } from "./Flyout/FlyoutWrapper.svelte";
10 | export { default as TeachingTip } from "./TeachingTip/TeachingTipWrapper.svelte";
11 | export { default as InfoBar } from "./InfoBar/InfoBar.svelte";
12 | export { default as TextBox } from "./TextBox/TextBox.svelte";
13 | export { default as TextBoxButton } from "./TextBox/TextBoxButton.svelte";
14 | export { default as NumberBox } from "./NumberBox/NumberBox.svelte";
15 | export { default as AutoSuggestBox } from "./AutoSuggestBox/AutoSuggestBox.svelte";
16 | export { default as Slider } from "./Slider/Slider.svelte";
17 | export { default as PersonPicture } from "./PersonPicture/PersonPicture.svelte";
18 | export { default as Tooltip } from "./Tooltip/TooltipWrapper.svelte";
19 | export { default as ContentDialog } from "./ContentDialog/ContentDialog.svelte";
20 | export { default as Expander } from "./Expander/Expander.svelte";
21 | export { default as TextBlock } from "./TextBlock/TextBlock.svelte";
22 | export { default as IconButton } from "./IconButton/IconButton.svelte";
23 | export { default as ListItem } from "./ListItem/ListItem.svelte";
24 | export { default as MenuBar } from "./MenuBar/MenuBar.svelte";
25 | export { default as MenuBarItem } from "./MenuBar/MenuBarItem.svelte";
26 | export { default as MenuFlyout } from "./MenuFlyout/MenuFlyoutWrapper.svelte";
27 | export { default as MenuFlyoutItem } from "./MenuFlyout/MenuFlyoutItem.svelte";
28 | export { default as MenuFlyoutDivider } from "./MenuFlyout/MenuFlyoutDivider.svelte";
29 | export { default as ContextMenu } from "./ContextMenu/ContextMenu.svelte";
30 | export { default as CalendarView } from "./CalendarView/CalendarView.svelte";
31 | export { default as CalendarDatePicker } from "./CalendarDatePicker/CalendarDatePicker.svelte";
32 | export { default as NavigationView } from "./NavigationView/NavigationView.svelte";
33 | export { default as RangeSlider } from "./RangeSlider/RangeSlider.svelte";
34 | export { default as Flipper } from "./Flipper/Flipper.svelte";
35 | export { default as ExpandMenu } from "./ExpandMenu/ExpandMenu.svelte";
36 | export { default as TextArea } from "./TextArea/TextArea.svelte";
37 | export { default as GridViewItem } from "./GridView/GridViewItem.svelte";
38 | export { default as AcrylicSurface } from "./Acrylic/AcrylicSurface.svelte";
39 | export { default as SegmentedControl } from "./SegmentedControl/SegmentedControl.svelte";
40 | export { default as SegmentedControlButton } from "./SegmentedControl/SegmentedControlButton.svelte";
41 | export { default as SplitButton } from "./SplitButton/SplitButton.svelte";
--------------------------------------------------------------------------------
/src/lib/svelte-jsx.d.ts:
--------------------------------------------------------------------------------
1 | declare namespace svelte.JSX {
2 | interface HTMLAttributes
110 |
111 | {text}
112 |
114 |
115 | {/if}
116 |
63 |
98 |
99 |
100 |
101 |
110 |
112 |
113 |
117 |
118 |