fluent-svelte-extra 1.9.5 → 1.9.6

package/CalendarView/CalendarView.svelte

@@ -361,272 +361,272 @@ function fadeScale(node, { delay = 0, duration = 0, easing = x => x, baseScale =
         }
     };
 }
-</script>
-
-<!--
-@component
-A calendar view lets a user view and interact with a calendar that they can navigate by month, year, or decade. A user can select a single date or multiple dates. [Docs](https://fluent-svelte.vercel.app/docs/components/calendarview)
-- Usage:
-    ```tsx
-    <CalendarView value={new Date(2022, 2, 14)} />
-    ```
--->
-<div
-	class="calendar-view {className}"
-	class:floating={__floating}
-	use:forwardEvents
-	bind:this={element}
-	{...$$restProps}
->
-	<header class="calendar-view-header">
-		<div class="calendar-view-header-text" role="heading" aria-live="polite">
-			<button
-				on:click={() => updateView(view === "days" ? "months" : "years")}
-				type="button"
-				disabled={view === "years"}>{header}</button
-			>
-		</div>
-		<div class="calendar-view-pagination-controls">
-			<button type="button" disabled={view && min >= page} on:click={() => updatePage(-1)}>
-				<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-					<path
-						d="M4.95681 10.998C4.14912 10.998 3.67466 10.09 4.13591 9.42698L6.76854 5.64257C7.36532 4.78469 8.63448 4.7847 9.23126 5.64257L11.8639 9.42698C12.3251 10.09 11.8507 10.998 11.043 10.998H4.95681Z"
-					/>
-				</svg>
-			</button>
-			<button type="button" disabled={max < nextPage} on:click={() => updatePage(1)}>
-				<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
-					<path
-						d="M4.95681 5C4.14912 5 3.67466 5.90803 4.13591 6.57107L6.76854 10.3555C7.36532 11.2134 8.63448 11.2133 9.23126 10.3555L11.8639 6.57106C12.3251 5.90803 11.8507 5 11.043 5H4.95681Z"
-					/>
-				</svg>
-			</button>
-		</div>
-	</header>
-	<div class="calendar-view-table-wrapper">
-		{#key view}
-			<table
-				class="calendar-view-table view-{view}"
-				role="grid"
-				in:fadeScale={{
-					duration: viewAnimationDirection !== "neutral" ? 500 : 0,
-					easing: circOut,
-					baseScale: viewAnimationDirection === "up" ? 1.29 : 0.84,
-					delay: viewAnimationDirection !== "neutral" ? 150 : 0
-				}}
-				out:fadeScale|local={{
-					duration: viewAnimationDirection !== "neutral" ? 150 : 0,
-					easing: circOut,
-					baseScale: viewAnimationDirection === "up" ? 0.84 : 1.29,
-					delay: 0
-				}}
-			>
-				{#if view === "days"}
-					<thead>
-						<tr>
-							{#each Array(7) as _, day}
-								<th
-									scope="col"
-									{...{
-										abbr: getWeekdayLocale(day, { locale, offset: weekStart })
-									}}
-								>
-									{getWeekdayLocale(day, {
-										locale,
-										format: "short",
-										offset: weekStart
-									})}
-								</th>
-							{/each}
-						</tr>
-					</thead>
-				{/if}
-				{#key page}
-					<tbody
-						use:bodyElementBinding
-						in:fly={{
-							opacity: 1,
-							duration: pageAnimationDuration,
-							easing: circOut,
-							y:
-								pageAnimationDirection === "neutral"
-									? 0
-									: pageAnimationDirection === "up"
-									? -198
-									: 198
-						}}
-						out:fly|local={{
-							opacity: 1,
-							duration: pageAnimationDuration,
-							easing: circOut,
-							y:
-								pageAnimationDirection === "neutral"
-									? 0
-									: pageAnimationDirection === "up"
-									? 198
-									: -198
-						}}
-					>
-						{#if view === "days"}
-							{#each Array(6) as _, week}
-								<tr>
-									{#each getCalendarDays(page).slice(week * 7, week * 7 + 7) as day, i}
-										{@const selected =
-											value !== null &&
-											(Array.isArray(value)
-												? indexOfDate(value, day, "day") > -1
-												: compareDates(value, day, "day"))}
-										{@const inMonth = compareDates(day, page, "month")}
-										{@const firstFocusableDay = getCalendarDays(page).find(
-											d =>
-												compareDates(d, page, "month") &&
-												(!blackout ||
-													indexOfDate(blackout, d, "day") === -1) &&
-												(!min || min <= d) &&
-												(!max || max >= d)
-										)}
-
-										<td role="gridcell">
-											<CalendarViewItem
-												on:click={() => selectDay(day)}
-												on:keydown={e => handleKeyDown(e, day)}
-												outOfRange={!inMonth}
-												current={compareDates(day, new Date(), "day")}
-												disabled={min > day || max < day}
-												blackout={blackout &&
-													indexOfDate(blackout, day, "day") > -1}
-												header={page &&
-													headers &&
-													day.getDate() === 1 &&
-													getMonthLocale(day.getMonth(), {
-														locale,
-														format: "short"
-													})}
-												tabindex={firstFocusableDay &&
-												compareDates(firstFocusableDay, day, "day")
-													? 0
-													: -1}
-												{selected}
-											>
-												{day.getDate()}
-											</CalendarViewItem>
-										</td>
-									{/each}
-								</tr>
-							{/each}
-						{:else}
-							{#each Array(4) as _, row}
-								<tr>
-									{#if view === "months"}
-										{#each getCalendarMonths(page).slice(row * 4, row * 4 + 4) as month, i}
-											{@const selected =
-												value !== null &&
-												(Array.isArray(value)
-													? indexOfDate(value, month, "month") > -1
-													: compareDates(value, month, "month"))}
-											{@const inYear =
-												month.getFullYear() === page.getFullYear()}
-											{@const firstFocusableMonth = getCalendarMonths(
-												page
-											).find(
-												d =>
-													compareDates(d, page, "year") &&
-													(!min ||
-														new Date(
-															min.getFullYear(),
-															min.getMonth(),
-															1
-														) <=
-															new Date(
-																d.getFullYear(),
-																d.getMonth(),
-																1
-															)) &&
-													(!max || max >= d)
-											)}
-
-											<td role="gridcell">
-												<CalendarViewItem
-													on:click={() => selectMonth(month)}
-													on:keydown={e => handleKeyDown(e, month)}
-													variant="monthYear"
-													outOfRange={!inYear}
-													current={compareDates(
-														month,
-														new Date(),
-														"month"
-													)}
-													disabled={(min?.getMonth() > month.getMonth() &&
-														min?.getFullYear() ===
-															month.getFullYear()) ||
-														max < month}
-													header={page &&
-														headers &&
-														month.getMonth() === 0 &&
-														month.getFullYear().toString()}
-													{selected}
-													tabindex={firstFocusableMonth &&
-													compareDates(
-														firstFocusableMonth,
-														month,
-														"month"
-													)
-														? 0
-														: -1}
-												>
-													{getMonthLocale(month.getMonth(), {
-														locale,
-														format: "short"
-													})}
-												</CalendarViewItem>
-											</td>
-										{/each}
-									{:else if view === "years"}
-										{#each getCalendarYears(page).slice(row * 4, row * 4 + 4) as year, i}
-											{@const selected =
-												value !== null &&
-												(Array.isArray(value)
-													? indexOfDate(value, year, "year") > -1
-													: compareDates(value, year, "year"))}
-											{@const inDecade = compareDates(year, page, "decade")}
-											{@const firstFocusableYear = getCalendarYears(
-												page
-											).find(
-												d =>
-													compareDates(d, page, "decade") &&
-													(!min ||
-														min.getFullYear() <= d.getFullYear()) &&
-													(!max || max >= d)
-											)}
-
-											<td role="gridcell">
-												<CalendarViewItem
-													on:click={() => selectYear(year)}
-													on:keydown={e => handleKeyDown(e, year)}
-													variant="monthYear"
-													outOfRange={!inDecade}
-													current={compareDates(year, new Date(), "year")}
-													disabled={min?.getFullYear() >
-														year.getFullYear() || max < year}
-													{selected}
-													tabindex={firstFocusableYear &&
-													compareDates(firstFocusableYear, year, "year")
-														? 0
-														: -1}
-												>
-													{year.getFullYear()}
-												</CalendarViewItem>
-											</td>
-										{/each}
-									{/if}
-								</tr>
-							{/each}
-						{/if}
-					</tbody>
-				{/key}
-			</table>
-		{/key}
-	</div>
-</div>
-
-<style >.calendar-view{background-clip:padding-box;background-color:var(--fds-solid-background-quarternary);block-size:347px;border:1px solid var(--fds-surface-stroke-flyout);border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:inline-flex;flex-direction:column;font-family:var(--fds-font-family-text);inline-size:300px;position:relative;text-align:start;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.calendar-view.floating{border-radius:var(--fds-overlay-corner-radius);box-shadow:var(--fds-flyout-shadow)}.calendar-view-header,.calendar-view-pagination-controls{align-items:center;display:flex}.calendar-view-pagination-controls button{-webkit-margin-start:4px;inline-size:30px;margin-inline-start:4px;padding:0}.calendar-view-header{-webkit-border-after:1px solid var(--fds-card-stroke-default);border-block-end:1px solid var(--fds-card-stroke-default);box-sizing:border-box;inline-size:100%;padding:7px}.calendar-view-header button{align-items:center;background-color:var(--fds-subtle-fill-transparent);border:none;border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;font-family:var(--fds-font-family-text);font-size:14px;font-weight:600;justify-content:center;line-height:20px;min-block-size:32px;outline:none;padding:0}.calendar-view-header button:focus-visible{box-shadow:var(--fds-focus-stroke)}.calendar-view-header button:hover{background-color:var(--fds-subtle-fill-secondary)}.calendar-view-header button:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-text-secondary)}.calendar-view-header button:disabled{background-color:var(--fds-sutble-fill-disabled);color:var(--fds-text-disabled)}.calendar-view-header button:disabled svg{color:var(--fds-control-strong-fill-disabled)}.calendar-view-header button svg{fill:currentColor;block-size:auto;color:var(--fds-control-strong-fill-default);inline-size:16px}.calendar-view-header-text{flex:1 1 auto}.calendar-view-header-text button{flex:1 1 auto;inline-size:100%;justify-content:flex-start;padding-inline:9px}.calendar-view-table{block-size:calc(100% - 6px);box-sizing:border-box;display:block;font-size:14px;inline-size:calc(100% - 6px);inset:0;margin:3px;overflow:hidden;position:absolute}.calendar-view-table-wrapper{background-color:var(--fds-layer-on-acrylic-background-default);block-size:298px;contain:layout;inline-size:298px;overflow:hidden;position:relative}.calendar-view-table.view-months,.calendar-view-table.view-years{block-size:calc(100% - 22px);inline-size:calc(100% - 22px);margin:11px}.calendar-view-table.view-months tr,.calendar-view-table.view-years tr{grid-gap:17.3333333333px;-webkit-margin-after:17.3333333333px;grid-template-columns:repeat(4,1fr);margin-block-end:17.3333333333px}.calendar-view-table td,.calendar-view-table th{padding:0}.calendar-view-table th{align-items:center;block-size:40px;display:flex;font-size:13px;font-weight:600;justify-content:center;text-align:center}.calendar-view-table tbody,.calendar-view-table thead{display:flex;flex-direction:column;inline-size:100%}.calendar-view-table tbody,.calendar-view-table thead tr{background-color:var(--fds-solid-background-quarternary);box-shadow:inset 0 0 0 100vmax var(--fds-layer-on-acrylic-background-default)}.calendar-view-table thead{position:relative;z-index:1}.calendar-view-table tbody{inset-block-end:0;inset-inline-start:0;position:absolute}.calendar-view-table tbody tr:last-child{-webkit-margin-after:0;margin-block-end:0}.calendar-view-table tr{grid-gap:2px;-webkit-margin-after:2px;display:grid;grid-template-columns:repeat(7,1fr);inline-size:100%;margin-block-end:2px}</style>
+</script>
+
+<!--
+@component
+A calendar view lets a user view and interact with a calendar that they can navigate by month, year, or decade. A user can select a single date or multiple dates. [Docs](https://fluent-svelte.vercel.app/docs/components/calendarview)
+- Usage:
+    ```tsx
+    <CalendarView value={new Date(2022, 2, 14)} />
+    ```
+-->
+<div
+	class="calendar-view {className}"
+	class:floating={__floating}
+	use:forwardEvents
+	bind:this={element}
+	{...$$restProps}
+>
+	<header class="calendar-view-header">
+		<div class="calendar-view-header-text" role="heading" aria-live="polite">
+			<button
+				on:click={() => updateView(view === "days" ? "months" : "years")}
+				type="button"
+				disabled={view === "years"}>{header}</button
+			>
+		</div>
+		<div class="calendar-view-pagination-controls">
+			<button type="button" disabled={view && min >= page} on:click={() => updatePage(-1)}>
+				<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+					<path
+						d="M4.95681 10.998C4.14912 10.998 3.67466 10.09 4.13591 9.42698L6.76854 5.64257C7.36532 4.78469 8.63448 4.7847 9.23126 5.64257L11.8639 9.42698C12.3251 10.09 11.8507 10.998 11.043 10.998H4.95681Z"
+					/>
+				</svg>
+			</button>
+			<button type="button" disabled={max < nextPage} on:click={() => updatePage(1)}>
+				<svg width="16" height="16" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg">
+					<path
+						d="M4.95681 5C4.14912 5 3.67466 5.90803 4.13591 6.57107L6.76854 10.3555C7.36532 11.2134 8.63448 11.2133 9.23126 10.3555L11.8639 6.57106C12.3251 5.90803 11.8507 5 11.043 5H4.95681Z"
+					/>
+				</svg>
+			</button>
+		</div>
+	</header>
+	<div class="calendar-view-table-wrapper">
+		{#key view}
+			<table
+				class="calendar-view-table view-{view}"
+				role="grid"
+				in:fadeScale={{
+					duration: viewAnimationDirection !== "neutral" ? 500 : 0,
+					easing: circOut,
+					baseScale: viewAnimationDirection === "up" ? 1.29 : 0.84,
+					delay: viewAnimationDirection !== "neutral" ? 150 : 0
+				}}
+				out:fadeScale|local={{
+					duration: viewAnimationDirection !== "neutral" ? 150 : 0,
+					easing: circOut,
+					baseScale: viewAnimationDirection === "up" ? 0.84 : 1.29,
+					delay: 0
+				}}
+			>
+				{#if view === "days"}
+					<thead>
+						<tr>
+							{#each Array(7) as _, day}
+								<th
+									scope="col"
+									{...{
+										abbr: getWeekdayLocale(day, { locale, offset: weekStart })
+									}}
+								>
+									{getWeekdayLocale(day, {
+										locale,
+										format: "short",
+										offset: weekStart
+									})}
+								</th>
+							{/each}
+						</tr>
+					</thead>
+				{/if}
+				{#key page}
+					<tbody
+						use:bodyElementBinding
+						in:fly={{
+							opacity: 1,
+							duration: pageAnimationDuration,
+							easing: circOut,
+							y:
+								pageAnimationDirection === "neutral"
+									? 0
+									: pageAnimationDirection === "up"
+									? -198
+									: 198
+						}}
+						out:fly|local={{
+							opacity: 1,
+							duration: pageAnimationDuration,
+							easing: circOut,
+							y:
+								pageAnimationDirection === "neutral"
+									? 0
+									: pageAnimationDirection === "up"
+									? 198
+									: -198
+						}}
+					>
+						{#if view === "days"}
+							{#each Array(6) as _, week}
+								<tr>
+									{#each getCalendarDays(page).slice(week * 7, week * 7 + 7) as day, i}
+										{@const selected =
+											value !== null &&
+											(Array.isArray(value)
+												? indexOfDate(value, day, "day") > -1
+												: compareDates(value, day, "day"))}
+										{@const inMonth = compareDates(day, page, "month")}
+										{@const firstFocusableDay = getCalendarDays(page).find(
+											d =>
+												compareDates(d, page, "month") &&
+												(!blackout ||
+													indexOfDate(blackout, d, "day") === -1) &&
+												(!min || min <= d) &&
+												(!max || max >= d)
+										)}
+
+										<td role="gridcell">
+											<CalendarViewItem
+												on:click={() => selectDay(day)}
+												on:keydown={e => handleKeyDown(e, day)}
+												outOfRange={!inMonth}
+												current={compareDates(day, new Date(), "day")}
+												disabled={min > day || max < day}
+												blackout={blackout &&
+													indexOfDate(blackout, day, "day") > -1}
+												header={page &&
+													headers &&
+													day.getDate() === 1 &&
+													getMonthLocale(day.getMonth(), {
+														locale,
+														format: "short"
+													})}
+												tabindex={firstFocusableDay &&
+												compareDates(firstFocusableDay, day, "day")
+													? 0
+													: -1}
+												{selected}
+											>
+												{day.getDate()}
+											</CalendarViewItem>
+										</td>
+									{/each}
+								</tr>
+							{/each}
+						{:else}
+							{#each Array(4) as _, row}
+								<tr>
+									{#if view === "months"}
+										{#each getCalendarMonths(page).slice(row * 4, row * 4 + 4) as month, i}
+											{@const selected =
+												value !== null &&
+												(Array.isArray(value)
+													? indexOfDate(value, month, "month") > -1
+													: compareDates(value, month, "month"))}
+											{@const inYear =
+												month.getFullYear() === page.getFullYear()}
+											{@const firstFocusableMonth = getCalendarMonths(
+												page
+											).find(
+												d =>
+													compareDates(d, page, "year") &&
+													(!min ||
+														new Date(
+															min.getFullYear(),
+															min.getMonth(),
+															1
+														) <=
+															new Date(
+																d.getFullYear(),
+																d.getMonth(),
+																1
+															)) &&
+													(!max || max >= d)
+											)}
+
+											<td role="gridcell">
+												<CalendarViewItem
+													on:click={() => selectMonth(month)}
+													on:keydown={e => handleKeyDown(e, month)}
+													variant="monthYear"
+													outOfRange={!inYear}
+													current={compareDates(
+														month,
+														new Date(),
+														"month"
+													)}
+													disabled={(min?.getMonth() > month.getMonth() &&
+														min?.getFullYear() ===
+															month.getFullYear()) ||
+														max < month}
+													header={page &&
+														headers &&
+														month.getMonth() === 0 &&
+														month.getFullYear().toString()}
+													{selected}
+													tabindex={firstFocusableMonth &&
+													compareDates(
+														firstFocusableMonth,
+														month,
+														"month"
+													)
+														? 0
+														: -1}
+												>
+													{getMonthLocale(month.getMonth(), {
+														locale,
+														format: "short"
+													})}
+												</CalendarViewItem>
+											</td>
+										{/each}
+									{:else if view === "years"}
+										{#each getCalendarYears(page).slice(row * 4, row * 4 + 4) as year, i}
+											{@const selected =
+												value !== null &&
+												(Array.isArray(value)
+													? indexOfDate(value, year, "year") > -1
+													: compareDates(value, year, "year"))}
+											{@const inDecade = compareDates(year, page, "decade")}
+											{@const firstFocusableYear = getCalendarYears(
+												page
+											).find(
+												d =>
+													compareDates(d, page, "decade") &&
+													(!min ||
+														min.getFullYear() <= d.getFullYear()) &&
+													(!max || max >= d)
+											)}
+
+											<td role="gridcell">
+												<CalendarViewItem
+													on:click={() => selectYear(year)}
+													on:keydown={e => handleKeyDown(e, year)}
+													variant="monthYear"
+													outOfRange={!inDecade}
+													current={compareDates(year, new Date(), "year")}
+													disabled={min?.getFullYear() >
+														year.getFullYear() || max < year}
+													{selected}
+													tabindex={firstFocusableYear &&
+													compareDates(firstFocusableYear, year, "year")
+														? 0
+														: -1}
+												>
+													{year.getFullYear()}
+												</CalendarViewItem>
+											</td>
+										{/each}
+									{/if}
+								</tr>
+							{/each}
+						{/if}
+					</tbody>
+				{/key}
+			</table>
+		{/key}
+	</div>
+</div>
+
+<style >.calendar-view{background-clip:padding-box;background-color:var(--fds-solid-background-quarternary);block-size:347px;border:1px solid var(--fds-surface-stroke-flyout);border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:inline-flex;flex-direction:column;font-family:var(--fds-font-family-text);inline-size:300px;position:relative;text-align:start;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none}.calendar-view.floating{border-radius:var(--fds-overlay-corner-radius);box-shadow:var(--fds-flyout-shadow)}.calendar-view-header,.calendar-view-pagination-controls{align-items:center;display:flex}.calendar-view-pagination-controls button{-webkit-margin-start:4px;inline-size:30px;margin-inline-start:4px;padding:0}.calendar-view-header{-webkit-border-after:1px solid var(--fds-card-stroke-default);border-block-end:1px solid var(--fds-card-stroke-default);box-sizing:border-box;inline-size:100%;padding:7px}.calendar-view-header button{align-items:center;background-color:var(--fds-subtle-fill-transparent);border:none;border-radius:var(--fds-control-corner-radius);color:var(--fds-text-primary);display:flex;font-family:var(--fds-font-family-text);font-size:14px;font-weight:600;justify-content:center;line-height:20px;min-block-size:32px;outline:none;padding:0}.calendar-view-header button:focus-visible{box-shadow:var(--fds-focus-stroke)}.calendar-view-header button:hover{background-color:var(--fds-subtle-fill-secondary)}.calendar-view-header button:active{background-color:var(--fds-subtle-fill-tertiary);color:var(--fds-text-secondary)}.calendar-view-header button:disabled{background-color:var(--fds-sutble-fill-disabled);color:var(--fds-text-disabled)}.calendar-view-header button:disabled svg{color:var(--fds-control-strong-fill-disabled)}.calendar-view-header button svg{fill:currentColor;block-size:auto;color:var(--fds-control-strong-fill-default);inline-size:16px}.calendar-view-header-text{flex:1 1 auto}.calendar-view-header-text button{flex:1 1 auto;inline-size:100%;justify-content:flex-start;padding-inline:9px}.calendar-view-table{block-size:calc(100% - 6px);box-sizing:border-box;display:block;font-size:14px;inline-size:calc(100% - 6px);inset:0;margin:3px;overflow:hidden;position:absolute}.calendar-view-table-wrapper{background-color:var(--fds-layer-on-acrylic-background-default);block-size:298px;contain:layout;inline-size:298px;overflow:hidden;position:relative}.calendar-view-table.view-months,.calendar-view-table.view-years{block-size:calc(100% - 22px);inline-size:calc(100% - 22px);margin:11px}.calendar-view-table.view-months tr,.calendar-view-table.view-years tr{grid-gap:17.3333333333px;-webkit-margin-after:17.3333333333px;grid-template-columns:repeat(4,1fr);margin-block-end:17.3333333333px}.calendar-view-table td,.calendar-view-table th{padding:0}.calendar-view-table th{align-items:center;block-size:40px;display:flex;font-size:13px;font-weight:600;justify-content:center;text-align:center}.calendar-view-table tbody,.calendar-view-table thead{display:flex;flex-direction:column;inline-size:100%}.calendar-view-table tbody,.calendar-view-table thead tr{background-color:var(--fds-solid-background-quarternary);box-shadow:inset 0 0 0 100vmax var(--fds-layer-on-acrylic-background-default)}.calendar-view-table thead{position:relative;z-index:1}.calendar-view-table tbody{inset-block-end:0;inset-inline-start:0;position:absolute}.calendar-view-table tbody tr:last-child{-webkit-margin-after:0;margin-block-end:0}.calendar-view-table tr{grid-gap:2px;-webkit-margin-after:2px;display:grid;grid-template-columns:repeat(7,1fr);inline-size:100%;margin-block-end:2px}</style>