fluent-svelte-extra 1.0.0

package/.prettierignore

@@ -0,0 +1 @@
+src/routes/docs/**

package/.prettierrc

@@ -0,0 +1,7 @@
+{
+	"useTabs": true,
+	"tabWidth": 4,
+	"trailingComma": "none",
+	"arrowParens": "avoid",
+	"printWidth": 100
+}

package/CHANGELOG.md

@@ -0,0 +1,7 @@
+# fluent-svelte-extra
+
+like fluent-svelte but with more components lol.
+
+# Note
+
+this is a fork of the fluent-svelte package. The difference between is this package has more components. Thanks to the creator of fluent-svelte package.

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2021-2022 Fluent Svelte Team
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -0,0 +1,33 @@
+<h1 align="center">
+  <img src="https://raw.githubusercontent.com/Tropix126/fluent-svelte/e78982fb9fa48a6ea0b7cc61f4ff8fae9df88db3/static/logo.svg" width="72" height="128" />
+  <br />
+  Fluent Svelte
+</h1>
+
+> Warning: This project is still in alpha stages; I would not consider it production ready _yet_. Assume any undocumented component to be in the 0.x. phase of development and therefore unstable.
+
+### What is this?
+
+`fluent-svelte` is an experimental [Svelte](http://svelte.dev/) component UI library that emulates the look and feel of [Microsoft's Windows UI Controls](https://github.com/microsoft/microsoft-ui-xaml/) which conform to the Fluent Design System.
+
+### Features
+
+-   [SvelteKit](https://kit.svelte.dev/) and SSR Compatible
+-   [TypeScript](https://typescriptlang.org/) and type definitions are supported, but optional.
+-   Full RTL support with no additional configuration.
+-   All components are accessible according to [WAI-ARIA](https://www.w3.org/WAI/standards-guidelines/aria/) standards.
+-   Theming support using CSS custom properties.
+-   Minimal third-party dependency usage.
+-   Reduced motion support.
+-   Easy setup. Just install the library, add some base styles, and you're ready to go.
+-   Minimal CSS overhead. Styles are included and scoped alongside their respective components, only bundling the CSS you need.
+
+### Undocumented Components
+
+The documentation site (https://fluent-svelte.vercel.app/) is still not entirely finished. Many components exported in the library are not yet documented. That progress can be tracked [here](https://github.com/Tropix126/fluent-svelte/issues/13). For now, i've setup a testing page with every component included in the library that is viewable [here](https://fluent-svelte.vercel.app/test). It's source can be viewed [here](https://github.com/Tropix126/fluent-svelte/blob/main/src/routes/test/index.svelte).
+
+Please keep in mind that any undocumented component is _considered to be in the 0.x phase of development_. This means that they could potentially recieve breaking API changes or be heavily updated before being finalized.
+
+### Changelog
+
+See [CHANGELOG.md](https://github.com/Tropix126/fluent-svelte/blob/main/CHANGELOG.md).

package/package.json

@@ -0,0 +1,83 @@
+{
+	"name": "fluent-svelte-extra",
+	"version": "1.0.0",
+	"description": "A faithful implementation of Microsoft's Fluent Design System in Svelte.",
+	"homepage": "https://github.com/OpenAnime/fluent-svelte-extra",
+	"license": "MIT",
+	"author": {
+		"name": "SpongeBed",
+		"url": "https://github.com/SpongeBed81"
+	},
+	"keywords": [
+		"design",
+		"design-system",
+		"design-language",
+		"microsoft",
+		"fluent",
+		"fluentui",
+		"fluent-design",
+		"fluent-design-system",
+		"svelte",
+		"svelte3",
+		"sveltejs",
+		"svelte-component",
+		"svelte-components",
+		"ui-components",
+		"winui",
+		"windows"
+	],
+	"repository": {
+		"type": "git",
+		"url": "https://github.com/OpenAnime/fluent-svelte-extra.git"
+	},
+	"bugs": {
+		"url": "https://github.com/OpenAnime/fluent-svelte-extra/issues"
+	},
+	"scripts": {
+		"dev": "svelte-kit dev",
+		"build": "svelte-kit build",
+		"package": "svelte-kit package",
+		"preview": "svelte-kit preview",
+		"check": "svelte-check --tsconfig ./tsconfig.json",
+		"check:watch": "svelte-check --tsconfig ./tsconfig.json --watch",
+		"lint": "prettier --ignore-path .gitignore --check --plugin-search-dir=. .",
+		"format": "prettier --ignore-path .gitignore --write --plugin-search-dir=. ."
+	},
+	"devDependencies": {
+		"@fec/remark-a11y-emoji": "^3.1.0",
+		"@fluentui/svg-icons": "^1.1.166",
+		"@sveltejs/adapter-vercel": "next",
+		"@sveltejs/kit": "^1.0.0-next.310",
+		"@sveltejs/svelte-repl": "^0.2.2",
+		"@types/prismjs": "^1.26.0",
+		"autoprefixer": "^10.4.4",
+		"cssnano": "^5.1.7",
+		"mdsvex": "^0.9.8",
+		"mdsvexamples": "0.2.3",
+		"panzoom": "^9.4.2",
+		"postcss": "^8.4.12",
+		"postcss-variables-prefixer": "^1.1.1",
+		"prettier": "^2.6.2",
+		"prettier-plugin-svelte": "^2.7.0",
+		"prism-svelte": "^0.4.7",
+		"prismjs": "^1.27.0",
+		"rehype-slug": "^5.0.1",
+		"remark-github": "^11.2.2",
+		"sass": "^1.50.0",
+		"svelte": "^3.47.0",
+		"svelte-check": "^2.6.0",
+		"svelte-codesandbox": "^1.0.0",
+		"svelte-preprocess": "^4.10.5",
+		"svelte2tsx": "^0.4.14",
+		"tslib": "^2.3.1",
+		"typescript": "^4.6.3",
+		"vite-node": "^0.1.27",
+		"vite-plugin-sveld": "^1.0.3"
+	},
+	"dependencies": {
+		"@bulatdashiev/svelte-slider": "^1.0.3",
+		"focus-trap": "^6.7.3",
+		"tabbable": "^5.2.1"
+	},
+	"type": "module"
+}

package/src/app.html

@@ -0,0 +1,12 @@
+<!DOCTYPE html>
+<html lang="en">
+	<head>
+		<meta charset="utf-8" />
+		<link rel="icon" href="/logo.svg" />
+		<meta name="viewport" content="width=device-width, initial-scale=1" />
+		%svelte.head%
+	</head>
+	<body>
+		<div id="svelte">%svelte.body%</div>
+	</body>
+</html>

package/src/global.d.ts

@@ -0,0 +1 @@
+/// <reference types="@sveltejs/kit" />

package/src/lib/AutoSuggestBox/AutoSuggestBox.scss

@@ -0,0 +1,44 @@
+@use "../mixins" as *;
+
+.auto-suggest-box-flyout {
+	z-index: 100;
+	overflow: auto;
+	position: absolute;
+	inset-inline-start: -1px;
+	inset-block-start: calc(100% + 1px);
+	inline-size: calc(100% + 2px);
+	margin: 0;
+	padding: 0;
+	padding-block: 2px;
+	box-sizing: border-box;
+	color: var(--text-primary);
+	border-radius: var(--overlay-corner-radius);
+	border-end-start-radius: 0;
+	border-end-end-radius: 0;
+	border: 1px solid var(--surface-stroke-flyout);
+	background-color: var(--solid-background-quarternary);
+	background-clip: padding-box;
+	box-shadow: var(--flyout-shadow);
+	max-block-size: 472px;
+}
+
+.auto-suggest-item-wrapper {
+	display: block;
+}
+
+:global {
+	.auto-suggest-box.open {
+		background-color: var(--control-fill-input-active) !important;
+		.text-box-underline::after {
+			content: "";
+			border-bottom: 2px solid var(--fds-accent-default);
+		}
+		input::placeholder {
+			color: var(--text-tertiary);
+		}
+		.text-box-underline {
+			border-bottom-left-radius: 0;
+			border-bottom-right-radius: 0;
+		}
+	}
+}

package/src/lib/AutoSuggestBox/AutoSuggestBox.svelte

@@ -0,0 +1,173 @@
+<script lang="ts">
+	import { createEventDispatcher } from "svelte";
+	import { uid } from "$lib/internal";
+
+	import TextBox from "../TextBox/TextBox.svelte";
+	import ListItem from "../ListItem/ListItem.svelte";
+
+	/** @extends {"../TextBox/TextBox.svelte"} */
+	/** The input's current value. */
+	export let value: any = "";
+
+	/** Array of strings that will be suggested to the user as options. */
+	export let items: string[] = [];
+
+	/** The current visibility state of the suggestion flyout. */
+	export let open = false;
+
+	/** Bindable index of the currently selected item. */
+	export let selection = 0;
+
+	/** Bindable array of currently suggested items. */
+	export let matches: string[] = [];
+
+	/** Specifies a custom class name for the component. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the input element. */
+	export let inputElement: HTMLInputElement = null;
+
+	/** Obtains a bound DOM reference to the AutoSuggestBox's container element. */
+	export let containerElement: HTMLDivElement = null;
+
+	/** Obtains a bound DOM reference to the AutoSuggestBox's buttons container element. */
+	export let buttonsContainerElement: HTMLDivElement = null;
+
+	/** Obtains a bound DOM reference to the AutoSuggestBox's clear button element. Only available if `clearButton` is set to true, `readonly` is set to false, and a `value` is present. */
+	export let clearButtonElement: HTMLButtonElement = null;
+
+	/** Obtains a bound DOM reference to the AutoSuggestBox's search button element. Only available if `type` is set to `search`. */
+	export let searchButtonElement: HTMLButtonElement = null;
+
+	export let flyoutElement: HTMLUListElement = null;
+
+	let focused = false;
+	let typedValue = "";
+
+	const dispatch = createEventDispatcher();
+	const flyoutId = uid("fds-auto-suggest-flyout-");
+
+	$: matches = items.filter(item => item.toLowerCase().includes(typedValue.toLowerCase()));
+	$: selection, dispatchSelect();
+
+	function dispatchSelect() {
+		dispatch("select", {
+			item: items[selection],
+			index: selection
+		});
+	}
+
+	function handleInput() {
+		typedValue = inputElement.value;
+		if (focused && value && items.length > 0) open = true;
+	}
+
+	function handleKeyDown(event: KeyboardEvent) {
+		const { key } = event;
+		if (open && matches.length > 0) {
+			if (key === "ArrowDown") {
+				selection++;
+				if (selection > matches.length - 1) selection = 0;
+			} else if (key === "ArrowUp") {
+				selection--;
+				if (selection < 0) selection = matches.length - 1;
+			} else if (key === "Enter" || key === "Escape") {
+				open = false;
+			}
+			if (key === "Enter" || key === "ArrowDown" || key === "ArrowUp") {
+				event.preventDefault();
+				value = matches[selection];
+				flyoutElement?.children[selection].scrollIntoView({ block: "nearest" });
+			}
+		} else if (!open && matches.length > 0 && (key === "ArrowDown" || key === "ArrowUp")) {
+			open = true;
+		}
+	}
+</script>
+
+<TextBox
+	type="search"
+	class="auto-suggest-box {open && matches.length > 0 ? 'open' : ''} {className}"
+	aria-autocomplete="list"
+	aria-activedescendant={open && matches.length > 0
+		? `${flyoutId}-item-${items.indexOf(matches[selection])}`
+		: ""}
+	aria-expanded={open && matches.length > 0}
+	aria-controls={flyoutId}
+	on:search={() => {
+		if (open && matches.length > 0) value = matches[selection];
+	}}
+	on:search
+	on:input
+	on:input={handleInput}
+	on:outermousedown={() => (open = false)}
+	on:focus={() => (focused = true)}
+	on:focus
+	on:blur={() => (focused = false)}
+	on:blur
+	on:keydown={handleKeyDown}
+	on:keydown
+	on:change
+	on:beforeinput
+	on:click
+	on:dblclick
+	on:contextmenu
+	on:mousedown
+	on:mouseup
+	on:mouseover
+	on:mouseout
+	on:mouseenter
+	on:mouseleave
+	on:keypress
+	on:keyup
+	on:clear={() => {
+		typedValue = "";
+		if (items.length > 0) open = true;
+	}}
+	on:clear
+	bind:inputElement
+	bind:containerElement
+	bind:clearButtonElement
+	bind:searchButtonElement
+	bind:buttonsContainerElement
+	bind:value
+	{...$$restProps}
+>
+	{#if open && matches.length > 0}
+		<ul id={flyoutId} role="listbox" class="auto-suggest-box-flyout" bind:this={flyoutElement}>
+			{#each matches as item, index (item)}
+				<div class="auto-suggest-item-wrapper">
+					<slot
+						name="item-template"
+						id="{flyoutId}-item-{index}"
+						{value}
+						{matches}
+						{selection}
+						{item}
+						{index}
+					>
+						<ListItem
+							tabindex={-1}
+							id="{flyoutId}-item-{index}"
+							role="option"
+							on:click={() => {
+								value = matches[selection];
+								selection = index;
+								open = false;
+							}}
+							selected={selection === index}>{item}</ListItem
+						>
+					</slot>
+				</div>
+			{/each}
+		</ul>
+	{/if}
+
+	<slot />
+	<slot name="buttons" slot="buttons" />
+</TextBox>
+
+<style lang="scss">
+	@use "./AutoSuggestBox";
+</style>

package/src/lib/Button/Button.scss

@@ -0,0 +1,94 @@
+@use "../mixins" as *;
+
+.button {
+	@include flex($inline: true, $align: center, $justify: center);
+	@include typography-body;
+
+	position: relative;
+	box-sizing: border-box;
+	padding-block: 4px 6px;
+	padding-inline: 11px;
+	text-decoration: none;
+	border: none;
+	outline: none;
+	cursor: default;
+	border-radius: var(--control-corner-radius);
+	transition: var(--control-faster-duration) ease background;
+
+	&:focus-visible {
+		box-shadow: var(--focus-stroke);
+	}
+
+	&.style- {
+		&standard {
+			border: 1px solid;
+			border-color: var(--control-border-default);
+			background-color: var(--control-fill-default);
+			color: var(--text-primary);
+			background-clip: padding-box;
+
+			&:hover {
+				background-color: var(--control-fill-secondary);
+			}
+
+			&:active {
+				border-color: var(--control-stroke-default);
+				background-color: var(--control-fill-tertiary);
+				color: var(--text-secondary);
+			}
+
+			&.disabled {
+				border-color: var(--control-stroke-default);
+				background-color: var(--control-fill-disabled);
+				color: var(--text-disabled);
+			}
+		}
+
+		&accent {
+			border: 1px solid var(--control-stroke-on-accent-default);
+			border-bottom-color: var(--control-stroke-on-accent-secondary);
+			background-color: var(--accent-default);
+			color: var(--text-on-accent-primary);
+			transition: var(--control-faster-duration) ease border-color;
+
+			&:hover {
+				background-color: var(--accent-secondary);
+			}
+
+			&:active {
+				border-color: transparent;
+				background-color: var(--accent-tertiary);
+				color: var(--text-on-accent-secondary);
+			}
+
+			&.disabled {
+				border-color: transparent;
+				background-color: var(--accent-disabled);
+				color: var(--text-on-accent-disabled);
+			}
+		}
+
+		&hyperlink {
+			background-color: var(--subtle-fill-transparent);
+			color: var(--accent-text-primary);
+			cursor: pointer;
+
+			&:hover {
+				background-color: var(--subtle-fill-secondary);
+			}
+
+			&:active {
+				background-color: var(--subtle-fill-tertiary);
+				color: var(--accent-text-tertiary);
+			}
+
+			&.disabled {
+				color: var(--accent-text-disabled);
+			}
+		}
+	}
+
+	&.disabled {
+		pointer-events: none;
+	}
+}

package/src/lib/Button/Button.svelte

@@ -0,0 +1,48 @@
+<script lang="ts">
+	import { get_current_component } from "svelte/internal";
+	import { createEventForwarder } from "$lib/internal";
+
+	/** @restProps {button | a} */
+	/** Specifies the visual styling of the button. */
+	export let variant: "standard" | "accent" | "hyperlink" = "standard";
+
+	/** Sets an href value and converts the button element into an anchor/ */
+	export let href = "";
+
+	/** Controls whether the button is intended for user interaction, and styles it accordingly. */
+	export let disabled = false;
+
+	/** Specifies a custom class name for the button. */
+	let className = "";
+	export { className as class };
+
+	/** Obtains a bound DOM reference to the button or anchor element. */
+	export let element: HTMLElement = null;
+
+	const forwardEvents = createEventForwarder(get_current_component());
+</script>
+
+<!--
+@component
+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)
+- Usage:
+    ```tsx
+    <Button>Click me!</Button>
+    ```
+-->
+<svelte:element
+	this={href && !disabled ? "a" : "button"}
+	use:forwardEvents
+	bind:this={element}
+	role={href && !disabled ? "button" : undefined}
+	href={href && !disabled ? href : undefined}
+	class="button style-{variant} {className}"
+	class:disabled
+	{...$$restProps}
+>
+	<slot />
+</svelte:element>
+
+<style lang="scss">
+	@use "./Button";
+</style>

package/src/lib/CalendarDatePicker/CalendarDatePicker.scss

@@ -0,0 +1,15 @@
+@use "../mixins" as *;
+
+.calendar-date-picker- {
+	&label {
+		padding-inline-end: 2px;
+		&.placeholder:not(.disabled) {
+			color: var(--text-secondary);
+		}
+	}
+	&icon {
+		@include icon($size: 12px);
+		margin-inline-start: 8px;
+		color: currentColor;
+	}
+}

package/src/lib/CalendarDatePicker/CalendarDatePicker.svelte

@@ -0,0 +1,86 @@
+<script lang="ts">
+	import CalendarView from "../CalendarView/CalendarView.svelte";
+	import Flyout from "../Flyout/FlyoutWrapper.svelte";
+	import Button from "../Button/Button.svelte";
+
+	/** The currently selected calendar date. */
+	export let value: Date | null;
+
+	/** Determines the calendar's flyout's visibility. */
+	export let open = false;
+
+	/** Locale code used for specifying the language of the calendar. If unset, the locale will be automatically inferred from `navigator.language`. */
+	export let locale: string = undefined;
+
+	/** Placeholder text that will be displayed on the calendar's input field if no value is specified. This string is not localized and will be displayed in english if no property is set. */
+	export let placeholder = "Pick a date";
+
+	/** Controls whether the picker is intended for user interaction, and styles it accordingly. */
+	export let disabled = false;
+
+	/** Determines if the flyout can be closed using conventional user interaction. */
+	export let closable = true;
+
+	/** Direction that the flyout will be opened from. */
+	export let placement: "top" | "bottom" | "left" | "right" = "bottom";
+
+	/** Alignment of the menu along the clickable target's given axis. */
+	export let alignment: "start" | "center" | "end" = "center";
+
+	/** Distance of the flyout from the control button in pixels. */
+	export let offset = 4;
+
+	/** Determines if keyboard focus should be locked to the flyout's contents. */
+	export let trapFocus = true;
+
+	function handleKeyDown(event) {
+		event.stopPropagation();
+		if (event.key === "Escape") open = false;
+	}
+</script>
+
+<Flyout
+	class="calendar-date-picker-container"
+	bind:open
+	{closable}
+	{placement}
+	{alignment}
+	{offset}
+	{trapFocus}
+>
+	<Button class="calendar-date-picker-button" {disabled}>
+		<span
+			class="calendar-date-picker-label"
+			class:disabled
+			class:placeholder={typeof value === "undefined" || value === null}
+		>
+			{value?.toLocaleDateString(locale) ?? placeholder}
+		</span>
+		<svg
+			class="calendar-date-picker-icon"
+			width="12"
+			height="12"
+			viewBox="0 0 11 12"
+			fill="none"
+			xmlns="http://www.w3.org/2000/svg"
+		>
+			<path
+				d="M9.2793 0.75C9.47461 0.75 9.66016 0.791016 9.83594 0.873047C10.0156 0.951172 10.1719 1.05859 10.3047 1.19531C10.4414 1.32813 10.5488 1.48437 10.627 1.66406C10.709 1.83984 10.75 2.02539 10.75 2.2207V9.7793C10.75 9.97461 10.709 10.1621 10.627 10.3418C10.5488 10.5176 10.4414 10.6738 10.3047 10.8105C10.1719 10.9434 10.0156 11.0508 9.83594 11.1328C9.66016 11.2109 9.47461 11.25 9.2793 11.25H1.7207C1.52539 11.25 1.33789 11.2109 1.1582 11.1328C0.982422 11.0508 0.826172 10.9434 0.689453 10.8105C0.556641 10.6738 0.449219 10.5176 0.367188 10.3418C0.289062 10.1621 0.25 9.97461 0.25 9.7793V2.2207C0.25 2.02539 0.289062 1.83984 0.367188 1.66406C0.449219 1.48437 0.556641 1.32813 0.689453 1.19531C0.826172 1.05859 0.982422 0.951172 1.1582 0.873047C1.33789 0.791016 1.52539 0.75 1.7207 0.75H9.2793ZM1.75 1.5C1.64453 1.5 1.54688 1.51953 1.45703 1.55859C1.36719 1.59766 1.28711 1.65234 1.2168 1.72266C1.15039 1.78906 1.09766 1.86719 1.05859 1.95703C1.01953 2.04688 1 2.14453 1 2.25V3H10V2.25C10 2.14844 9.98047 2.05273 9.94141 1.96289C9.90234 1.86914 9.84766 1.78906 9.77734 1.72266C9.71094 1.65234 9.63086 1.59766 9.53711 1.55859C9.44727 1.51953 9.35156 1.5 9.25 1.5H1.75ZM9.25 10.5C9.35547 10.5 9.45312 10.4805 9.54297 10.4414C9.63281 10.4023 9.71094 10.3496 9.77734 10.2832C9.84766 10.2129 9.90234 10.1328 9.94141 10.043C9.98047 9.95312 10 9.85547 10 9.75V3.75H1V9.75C1 9.85547 1.01953 9.95508 1.05859 10.0488C1.09766 10.1387 1.15039 10.2168 1.2168 10.2832C1.2832 10.3496 1.36133 10.4023 1.45117 10.4414C1.54492 10.4805 1.64453 10.5 1.75 10.5H9.25ZM2.5 6C2.5 5.89453 2.51953 5.79688 2.55859 5.70703C2.59766 5.61719 2.65039 5.53906 2.7168 5.47266C2.78711 5.40234 2.86719 5.34766 2.95703 5.30859C3.05078 5.26953 3.15039 5.25 3.25586 5.25C3.36133 5.25 3.45898 5.26953 3.54883 5.30859C3.63867 5.34766 3.7168 5.40039 3.7832 5.4668C3.84961 5.5332 3.90234 5.61133 3.94141 5.70117C3.98047 5.79102 4 5.88867 4 5.99414C4 6.09961 3.98047 6.19922 3.94141 6.29297C3.90234 6.38281 3.84766 6.46289 3.77734 6.5332C3.71094 6.59961 3.63281 6.65234 3.54297 6.69141C3.45312 6.73047 3.35547 6.75 3.25 6.75C3.14453 6.75 3.04492 6.73047 2.95117 6.69141C2.86133 6.65234 2.7832 6.59961 2.7168 6.5332C2.65039 6.4668 2.59766 6.38867 2.55859 6.29883C2.51953 6.20508 2.5 6.10547 2.5 6ZM4.75 6C4.75 5.89453 4.76953 5.79688 4.80859 5.70703C4.84766 5.61719 4.90039 5.53906 4.9668 5.47266C5.03711 5.40234 5.11719 5.34766 5.20703 5.30859C5.30078 5.26953 5.40039 5.25 5.50586 5.25C5.61133 5.25 5.70898 5.26953 5.79883 5.30859C5.88867 5.34766 5.9668 5.40039 6.0332 5.4668C6.09961 5.5332 6.15234 5.61133 6.19141 5.70117C6.23047 5.79102 6.25 5.88867 6.25 5.99414C6.25 6.09961 6.23047 6.19922 6.19141 6.29297C6.15234 6.38281 6.09766 6.46289 6.02734 6.5332C5.96094 6.59961 5.88281 6.65234 5.79297 6.69141C5.70312 6.73047 5.60547 6.75 5.5 6.75C5.39453 6.75 5.29492 6.73047 5.20117 6.69141C5.11133 6.65234 5.0332 6.59961 4.9668 6.5332C4.90039 6.4668 4.84766 6.38867 4.80859 6.29883C4.76953 6.20508 4.75 6.10547 4.75 6ZM8.5 5.99414C8.5 6.09961 8.48047 6.19922 8.44141 6.29297C8.40234 6.38281 8.34766 6.46289 8.27734 6.5332C8.21094 6.59961 8.13281 6.65234 8.04297 6.69141C7.95312 6.73047 7.85547 6.75 7.75 6.75C7.64453 6.75 7.54492 6.73047 7.45117 6.69141C7.36133 6.65234 7.2832 6.59961 7.2168 6.5332C7.15039 6.4668 7.09766 6.38867 7.05859 6.29883C7.01953 6.20508 7 6.10547 7 6C7 5.89453 7.01953 5.79688 7.05859 5.70703C7.09766 5.61719 7.15039 5.53906 7.2168 5.47266C7.28711 5.40234 7.36719 5.34766 7.45703 5.30859C7.55078 5.26953 7.65039 5.25 7.75586 5.25C7.86133 5.25 7.95898 5.26953 8.04883 5.30859C8.13867 5.34766 8.2168 5.40039 8.2832 5.4668C8.34961 5.5332 8.40234 5.61133 8.44141 5.70117C8.48047 5.79102 8.5 5.88867 8.5 5.99414ZM4 8.25C4 8.35547 3.98047 8.45312 3.94141 8.54297C3.90234 8.63281 3.84766 8.71289 3.77734 8.7832C3.71094 8.84961 3.63086 8.90234 3.53711 8.94141C3.44727 8.98047 3.34961 9 3.24414 9C3.13867 9 3.04102 8.98047 2.95117 8.94141C2.86133 8.90234 2.7832 8.84961 2.7168 8.7832C2.65039 8.7168 2.59766 8.63867 2.55859 8.54883C2.51953 8.45898 2.5 8.36133 2.5 8.25586C2.5 8.15039 2.51953 8.05273 2.55859 7.96289C2.59766 7.86914 2.65039 7.78906 2.7168 7.72266C2.78711 7.65234 2.86719 7.59766 2.95703 7.55859C3.04688 7.51953 3.14453 7.5 3.25 7.5C3.35547 7.5 3.45312 7.51953 3.54297 7.55859C3.63672 7.59766 3.7168 7.65039 3.7832 7.7168C3.84961 7.7832 3.90234 7.86328 3.94141 7.95703C3.98047 8.04688 4 8.14453 4 8.25ZM6.25 8.25C6.25 8.35547 6.23047 8.45312 6.19141 8.54297C6.15234 8.63281 6.09766 8.71289 6.02734 8.7832C5.96094 8.84961 5.88086 8.90234 5.78711 8.94141C5.69727 8.98047 5.59961 9 5.49414 9C5.38867 9 5.29102 8.98047 5.20117 8.94141C5.11133 8.90234 5.0332 8.84961 4.9668 8.7832C4.90039 8.7168 4.84766 8.63867 4.80859 8.54883C4.76953 8.45898 4.75 8.36133 4.75 8.25586C4.75 8.15039 4.76953 8.05273 4.80859 7.96289C4.84766 7.86914 4.90039 7.78906 4.9668 7.72266C5.03711 7.65234 5.11719 7.59766 5.20703 7.55859C5.29688 7.51953 5.39453 7.5 5.5 7.5C5.60547 7.5 5.70312 7.51953 5.79297 7.55859C5.88672 7.59766 5.9668 7.65039 6.0332 7.7168C6.09961 7.7832 6.15234 7.86328 6.19141 7.95703C6.23047 8.04688 6.25 8.14453 6.25 8.25Z"
+			/>
+		</svg>
+	</Button>
+	<CalendarView
+		slot="override"
+		class="calendar-date-picker-calendar"
+		multiple={false}
+		__floating
+		on:keydown={handleKeyDown}
+		on:change={() => (open = false)}
+		bind:value
+		{...$$restProps}
+	/>
+</Flyout>
+
+<style lang="scss">
+	@use "./CalendarDatePicker";
+</style>