fluent-svelte-extra 1.9.5 → 1.9.6

package/CalendarDatePicker/CalendarDatePicker.svelte

@@ -26,48 +26,48 @@ function handleKeyDown(event) {
     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 >.calendar-date-picker-label{-webkit-padding-end:2px;padding-inline-end:2px}.calendar-date-picker-label.placeholder:not(.disabled){color:var(--fds-text-secondary)}.calendar-date-picker-icon{fill:currentColor;-webkit-margin-start:8px;block-size:auto;color:currentColor;inline-size:12px;margin-inline-start:8px}</style>
+</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 >.calendar-date-picker-label{-webkit-padding-end:2px;padding-inline-end:2px}.calendar-date-picker-label.placeholder:not(.disabled){color:var(--fds-text-secondary)}.calendar-date-picker-icon{fill:currentColor;-webkit-margin-start:8px;block-size:auto;color:currentColor;inline-size:12px;margin-inline-start:8px}</style>

package/CalendarView/CalendarView.scss

@@ -1,156 +1,156 @@
-@use "../mixins" as *;
-
-.calendar-view {
-	@include flex($inline: true, $direction: column);
-	text-align: start;
-	inline-size: 300px;
-	block-size: 347px;
-	position: relative;
-	user-select: none;
-	color: var(--text-primary);
-	background-clip: padding-box;
-	background-color: var(--fds-solid-background-quarternary);
-	border-radius: var(--control-corner-radius);
-	border: 1px solid var(--surface-stroke-flyout);
-	font-family: var(--font-family-text);
-	&.floating {
-		border-radius: var(--overlay-corner-radius);
-		box-shadow: var(--flyout-shadow);
-	}
-	&-header,
-	&-pagination-controls {
-		@include flex($align: center);
-	}
-	&-pagination-controls button {
-		padding: 0;
-		inline-size: 30px;
-		margin-inline-start: 4px;
-	}
-	&-header {
-		box-sizing: border-box;
-		border-block-end: 1px solid var(--card-stroke-default);
-		inline-size: 100%;
-		padding: 7px;
-		button {
-			@include flex($align: center, $justify: center);
-			border: none;
-			outline: none;
-			padding: 0;
-			min-block-size: 32px;
-			color: var(--text-primary);
-			background-color: var(--subtle-fill-transparent);
-			border-radius: var(--control-corner-radius);
-			line-height: 20px;
-			font: {
-				size: 14px;
-				weight: 600;
-				family: var(--font-family-text);
-			}
-			&:focus-visible {
-				box-shadow: var(--focus-stroke);
-			}
-			&:hover {
-				background-color: var(--subtle-fill-secondary);
-			}
-			&:active {
-				background-color: var(--subtle-fill-tertiary);
-				color: var(--text-secondary);
-			}
-			&:disabled {
-				background-color: var(--sutble-fill-disabled);
-				color: var(--text-disabled);
-				svg {
-					color: var(--control-strong-fill-disabled);
-				}
-			}
-			svg {
-				@include icon($size: 16px);
-				color: var(--control-strong-fill-default);
-			}
-		}
-		&-text {
-			flex: 1 1 auto;
-			button {
-				inline-size: 100%;
-				padding-inline: 9px;
-				justify-content: flex-start;
-				flex: 1 1 auto;
-			}
-		}
-	}
-	&-table {
-		inset: 0;
-		display: block;
-		overflow: hidden;
-		position: absolute;
-		box-sizing: border-box;
-		inline-size: calc(100% - 6px);
-		block-size: calc(100% - 6px);
-		margin: 3px;
-		font-size: 14px;
-		&-wrapper {
-			inline-size: 298px;
-			block-size: 298px;
-			position: relative;
-			contain: layout;
-			overflow: hidden;
-			background-color: var(--layer-on-acrylic-background-default);
-		}
-		&.view- {
-			&months,
-			&years {
-				margin: 11px;
-				inline-size: calc(100% - 22px);
-				block-size: calc(100% - 22px);
-				tr {
-					grid-template-columns: repeat(4, 1fr);
-					grid-gap: calc(52px / 3);
-					margin-block-end: calc(52px / 3);
-				}
-			}
-		}
-		td,
-		th {
-			padding: 0;
-		}
-		th {
-			@include flex($align: center, $justify: center);
-			block-size: 40px;
-			text-align: center;
-			font: {
-				size: 13px;
-				weight: 600;
-			}
-		}
-		thead,
-		tbody {
-			inline-size: 100%;
-			display: flex;
-			flex-direction: column;
-		}
-		thead tr,
-		tbody {
-			background-color: var(--fds-solid-background-quarternary);
-			box-shadow: inset 0 0 0 100vmax var(--fds-layer-on-acrylic-background-default);
-		}
-		thead {
-			position: relative;
-			z-index: 1;
-		}
-		tbody {
-			position: absolute;
-			inset-inline-start: 0;
-			inset-block-end: 0;
-			tr:last-child {
-				margin-block-end: 0;
-			}
-		}
-		tr {
-			display: grid;
-			inline-size: 100%;
-			grid-template-columns: repeat(7, 1fr);
-			grid-gap: 2px;
-			margin-block-end: 2px;
-		}
-	}
-}
+@use "../mixins" as *;
+
+.calendar-view {
+	@include flex($inline: true, $direction: column);
+	text-align: start;
+	inline-size: 300px;
+	block-size: 347px;
+	position: relative;
+	user-select: none;
+	color: var(--text-primary);
+	background-clip: padding-box;
+	background-color: var(--fds-solid-background-quarternary);
+	border-radius: var(--control-corner-radius);
+	border: 1px solid var(--surface-stroke-flyout);
+	font-family: var(--font-family-text);
+	&.floating {
+		border-radius: var(--overlay-corner-radius);
+		box-shadow: var(--flyout-shadow);
+	}
+	&-header,
+	&-pagination-controls {
+		@include flex($align: center);
+	}
+	&-pagination-controls button {
+		padding: 0;
+		inline-size: 30px;
+		margin-inline-start: 4px;
+	}
+	&-header {
+		box-sizing: border-box;
+		border-block-end: 1px solid var(--card-stroke-default);
+		inline-size: 100%;
+		padding: 7px;
+		button {
+			@include flex($align: center, $justify: center);
+			border: none;
+			outline: none;
+			padding: 0;
+			min-block-size: 32px;
+			color: var(--text-primary);
+			background-color: var(--subtle-fill-transparent);
+			border-radius: var(--control-corner-radius);
+			line-height: 20px;
+			font: {
+				size: 14px;
+				weight: 600;
+				family: var(--font-family-text);
+			}
+			&:focus-visible {
+				box-shadow: var(--focus-stroke);
+			}
+			&:hover {
+				background-color: var(--subtle-fill-secondary);
+			}
+			&:active {
+				background-color: var(--subtle-fill-tertiary);
+				color: var(--text-secondary);
+			}
+			&:disabled {
+				background-color: var(--sutble-fill-disabled);
+				color: var(--text-disabled);
+				svg {
+					color: var(--control-strong-fill-disabled);
+				}
+			}
+			svg {
+				@include icon($size: 16px);
+				color: var(--control-strong-fill-default);
+			}
+		}
+		&-text {
+			flex: 1 1 auto;
+			button {
+				inline-size: 100%;
+				padding-inline: 9px;
+				justify-content: flex-start;
+				flex: 1 1 auto;
+			}
+		}
+	}
+	&-table {
+		inset: 0;
+		display: block;
+		overflow: hidden;
+		position: absolute;
+		box-sizing: border-box;
+		inline-size: calc(100% - 6px);
+		block-size: calc(100% - 6px);
+		margin: 3px;
+		font-size: 14px;
+		&-wrapper {
+			inline-size: 298px;
+			block-size: 298px;
+			position: relative;
+			contain: layout;
+			overflow: hidden;
+			background-color: var(--layer-on-acrylic-background-default);
+		}
+		&.view- {
+			&months,
+			&years {
+				margin: 11px;
+				inline-size: calc(100% - 22px);
+				block-size: calc(100% - 22px);
+				tr {
+					grid-template-columns: repeat(4, 1fr);
+					grid-gap: calc(52px / 3);
+					margin-block-end: calc(52px / 3);
+				}
+			}
+		}
+		td,
+		th {
+			padding: 0;
+		}
+		th {
+			@include flex($align: center, $justify: center);
+			block-size: 40px;
+			text-align: center;
+			font: {
+				size: 13px;
+				weight: 600;
+			}
+		}
+		thead,
+		tbody {
+			inline-size: 100%;
+			display: flex;
+			flex-direction: column;
+		}
+		thead tr,
+		tbody {
+			background-color: var(--fds-solid-background-quarternary);
+			box-shadow: inset 0 0 0 100vmax var(--fds-layer-on-acrylic-background-default);
+		}
+		thead {
+			position: relative;
+			z-index: 1;
+		}
+		tbody {
+			position: absolute;
+			inset-inline-start: 0;
+			inset-block-end: 0;
+			tr:last-child {
+				margin-block-end: 0;
+			}
+		}
+		tr {
+			display: grid;
+			inline-size: 100%;
+			grid-template-columns: repeat(7, 1fr);
+			grid-gap: 2px;
+			margin-block-end: 2px;
+		}
+	}
+}