fluent-svelte-extra 1.5.9 → 1.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (4) hide show
  1. package/Expander/Expander.scss +1 -0
  2. package/Expander/Expander.svelte +37 -23
  3. package/Expander/Expander.svelte.d.ts +1 -0
  4. package/package.json +1 -1
package/Expander/Expander.scss CHANGED
@@ -74,6 +74,7 @@
74
74
  text-align: start;
75
75
  outline: none;
76
76
  box-sizing: border-box;
77
+ min-height: 50px;
77
78
  padding-inline-start: 16px;
78
79
  padding: 8px;
79
80
  background-clip: padding-box;
package/Expander/Expander.svelte CHANGED
@@ -4,6 +4,8 @@ import { get_current_component } from "svelte/internal";
4
4
  import { createEventForwarder, uid } from "../internal";
5
5
  /** Determines whether the expander is expanded (open) or not. */
6
6
  export let expanded = false;
7
+ /** Determines whether the expander is expandable or not. */
8
+ export let expandable = true;
7
9
  /** Determines the direction that the expander will extend to. */
8
10
  export let direction = "down";
9
11
  // svelte-ignore unused-export-let
@@ -67,7 +69,11 @@ Expanders are controls that display a header and a collapsable content area. The
67
69
  tabindex="0"
68
70
  bind:this={headerElement}
69
71
  on:keydown={handleKeydown}
70
- on:click={() => (expanded = !expanded)}
72
+ on:click={() => {
73
+ if (expandable) {
74
+ expanded = !expanded;
75
+ }
76
+ }}
71
77
  >
72
78
  {#if $$slots.icon}
73
79
  <div class="expander-icon">
@@ -77,27 +83,35 @@ Expanders are controls that display a header and a collapsable content area. The
77
83
  <span class="expander-header-title">
78
84
  <slot />
79
85
  </span>
80
- <button
81
- class="expander-chevron"
82
- type="button"
83
- tabindex="-1"
84
- id={contentId}
85
- aria-labelledby={headerId}
86
- >
87
- <svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 12 12">
88
- {#if direction === "down"}
89
- <path
90
- fill="currentColor"
91
- 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"
92
- />
93
- {:else}
94
- <path
95
- fill="currentColor"
96
- 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"
97
- />
98
- {/if}
99
- </svg>
100
- </button>
86
+
87
+ {#if expandable}
88
+ <button
89
+ class="expander-chevron"
90
+ type="button"
91
+ tabindex="-1"
92
+ id={contentId}
93
+ aria-labelledby={headerId}
94
+ >
95
+ <svg
96
+ xmlns="http://www.w3.org/2000/svg"
97
+ width="12"
98
+ height="12"
99
+ viewBox="0 0 12 12"
100
+ >
101
+ {#if direction === "down"}
102
+ <path
103
+ fill="currentColor"
104
+ 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"
105
+ />
106
+ {:else}
107
+ <path
108
+ fill="currentColor"
109
+ 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"
110
+ />
111
+ {/if}
112
+ </svg>
113
+ </button>
114
+ {/if}
101
115
  </div>
102
116
  </svelte:element>
103
117
  <div class="expander-content-anchor">
@@ -107,4 +121,4 @@ Expanders are controls that display a header and a collapsable content area. The
107
121
  </div>
108
122
  </div>
109
123
 
110
- <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.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0;border-start-start-radius:0;transform:translateY(-100%)}.expander.direction-down.expanded .expander-header{border-end-end-radius:0;border-end-start-radius:0;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content{border-bottom:none;border-end-end-radius:0;border-end-start-radius:0;border-radius:var(--fds-control-corner-radius);transform:translateY(100%)}.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;border-start-start-radius:0}.expander.expanded .expander-content{transform:none;transition:var(--fds-control-slow-duration) var(--fds-control-fast-out-slow-in-easing) transform}.expander.expanded .expander-content-anchor{max-block-size:6.019999999999999e+23vmax;transition: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;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:hover .expander-chevron{background-color:var(--fds-subtle-fill-secondary)}.expander-header:active .expander-chevron{background-color:var(--fds-subtle-fill-tertiary);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-faster-duration)*1.2) linear transform var(--fds-control-faster-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-height:0;overflow:hidden;position:relative;transition:0ms linear var(--fds-control-slow-duration) max-height}</style>
124
+ <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.direction-down .expander-content{-webkit-border-before:none;border-block-start:none;border-radius:var(--fds-control-corner-radius);border-start-end-radius:0;border-start-start-radius:0;transform:translateY(-100%)}.expander.direction-down.expanded .expander-header{border-end-end-radius:0;border-end-start-radius:0;border-radius:var(--fds-control-corner-radius)}.expander.direction-up .expander-content{border-bottom:none;border-end-end-radius:0;border-end-start-radius:0;border-radius:var(--fds-control-corner-radius);transform:translateY(100%)}.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;border-start-start-radius:0}.expander.expanded .expander-content{transform:none;transition:var(--fds-control-slow-duration) var(--fds-control-fast-out-slow-in-easing) transform}.expander.expanded .expander-content-anchor{max-block-size:6.019999999999999e+23vmax;transition: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:hover .expander-chevron{background-color:var(--fds-subtle-fill-secondary)}.expander-header:active .expander-chevron{background-color:var(--fds-subtle-fill-tertiary);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-faster-duration)*1.2) linear transform var(--fds-control-faster-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-height:0;overflow:hidden;position:relative;transition:0ms linear var(--fds-control-slow-duration) max-height}</style>
package/Expander/Expander.svelte.d.ts CHANGED
@@ -3,6 +3,7 @@ declare const __propDef: {
3
3
  props: {
4
4
  [x: string]: any;
5
5
  expanded?: boolean;
6
+ expandable?: boolean;
6
7
  direction?: "down" | "up";
7
8
  headingLevel?: 1 | 2 | 3 | 4 | 5 | 6;
8
9
  class?: string;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "fluent-svelte-extra",
3
- "version": "1.5.9",
3
+ "version": "1.6.0",
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",