@flightlesslabs/dodo-ui-date 0.2.0

package/dist/index.d.ts

@@ -0,0 +1,10 @@
+/**
+ * DatePicker component and related prop types.
+ */
+export { default as DatePicker, type DatePickerProps, } from './components/DatePicker/DatePicker.svelte';
+export { type DatePickerInputProps } from './components/DatePicker/DatePickerInput/DatePickerInput.svelte';
+export { type DatePickerPopupProps } from './components/DatePicker/DatePickerPopup/DatePickerPopup.svelte';
+/**
+ * Calendar component and related prop types.
+ */
+export { default as Calendar, type CalendarProps } from './components/Calendar/Calendar.svelte';

package/dist/index.js

@@ -0,0 +1,10 @@
+/**
+ * DatePicker component and related prop types.
+ */
+export { default as DatePicker, } from './components/DatePicker/DatePicker.svelte';
+export {} from './components/DatePicker/DatePickerInput/DatePickerInput.svelte';
+export {} from './components/DatePicker/DatePickerPopup/DatePickerPopup.svelte';
+/**
+ * Calendar component and related prop types.
+ */
+export { default as Calendar } from './components/Calendar/Calendar.svelte';

package/dist/storybook-types.d.ts

@@ -0,0 +1,129 @@
+type ControlType = 'object' | 'boolean' | 'check' | 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select' | 'number' | 'range' | 'file' | 'color' | 'date' | 'text';
+interface ControlBase {
+    [key: string]: any;
+    /** @see https://storybook.js.org/docs/api/arg-types#controltype */
+    type?: ControlType;
+    disable?: boolean;
+}
+type Control = ControlType | false | (ControlBase & (ControlBase | {
+    type: 'color';
+    /** @see https://storybook.js.org/docs/api/arg-types#controlpresetcolors */
+    presetColors?: string[];
+} | {
+    type: 'file';
+    /** @see https://storybook.js.org/docs/api/arg-types#controlaccept */
+    accept?: string;
+} | {
+    type: 'inline-check' | 'radio' | 'inline-radio' | 'select' | 'multi-select';
+    /** @see https://storybook.js.org/docs/api/arg-types#controllabels */
+    labels?: {
+        [options: string]: string;
+    };
+} | {
+    type: 'number' | 'range';
+    /** @see https://storybook.js.org/docs/api/arg-types#controlmax */
+    max?: number;
+    /** @see https://storybook.js.org/docs/api/arg-types#controlmin */
+    min?: number;
+    /** @see https://storybook.js.org/docs/api/arg-types#controlstep */
+    step?: number;
+}));
+type ConditionalTest = {
+    truthy?: boolean;
+} | {
+    exists: boolean;
+} | {
+    eq: any;
+} | {
+    neq: any;
+};
+type ConditionalValue = {
+    arg: string;
+} | {
+    global: string;
+};
+type Conditional = ConditionalValue & ConditionalTest;
+interface Args {
+    [name: string]: any;
+}
+interface SBBaseType {
+    required?: boolean;
+    raw?: string;
+}
+type SBScalarType = SBBaseType & {
+    name: 'boolean' | 'string' | 'number' | 'function' | 'symbol';
+};
+type SBArrayType = SBBaseType & {
+    name: 'array';
+    value: SBType;
+};
+type SBObjectType = SBBaseType & {
+    name: 'object';
+    value: Record<string, SBType>;
+};
+type SBEnumType = SBBaseType & {
+    name: 'enum';
+    value: (string | number)[];
+};
+type SBIntersectionType = SBBaseType & {
+    name: 'intersection';
+    value: SBType[];
+};
+type SBUnionType = SBBaseType & {
+    name: 'union';
+    value: SBType[];
+};
+type SBOtherType = SBBaseType & {
+    name: 'other';
+    value: string;
+};
+type SBType = SBScalarType | SBEnumType | SBArrayType | SBObjectType | SBIntersectionType | SBUnionType | SBOtherType;
+interface InputType {
+    /** @see https://storybook.js.org/docs/api/arg-types#control */
+    control?: Control;
+    /** @see https://storybook.js.org/docs/api/arg-types#description */
+    description?: string;
+    /** @see https://storybook.js.org/docs/api/arg-types#if */
+    if?: Conditional;
+    /** @see https://storybook.js.org/docs/api/arg-types#mapping */
+    mapping?: {
+        [key: string]: any;
+    };
+    /** @see https://storybook.js.org/docs/api/arg-types#name */
+    name?: string;
+    /** @see https://storybook.js.org/docs/api/arg-types#options */
+    options?: readonly any[];
+    /** @see https://storybook.js.org/docs/api/arg-types#table */
+    table?: {
+        [key: string]: unknown;
+        /** @see https://storybook.js.org/docs/api/arg-types#tablecategory */
+        category?: string;
+        /** @see https://storybook.js.org/docs/api/arg-types#tabledefaultvalue */
+        defaultValue?: {
+            summary?: string;
+            detail?: string;
+        };
+        /** @see https://storybook.js.org/docs/api/arg-types#tabledisable */
+        disable?: boolean;
+        /** @see https://storybook.js.org/docs/api/arg-types#tablesubcategory */
+        subcategory?: string;
+        /** @see https://storybook.js.org/docs/api/arg-types#tabletype */
+        type?: {
+            summary?: string;
+            detail?: string;
+        };
+    };
+    /** @see https://storybook.js.org/docs/api/arg-types#type */
+    type?: SBType | SBScalarType['name'];
+    /**
+     * @deprecated Use `table.defaultValue.summary` instead.
+     * @see https://storybook.js.org/docs/api/arg-types#defaultvalue
+     */
+    defaultValue?: any;
+    [key: string]: any;
+}
+export type ArgTypes<TArgs = Args> = {
+    [name in keyof TArgs]: InputType;
+};
+export type StoryBookArgTypes = Partial<ArgTypes<Args>>;
+export {};

package/dist/storybook-types.js

@@ -0,0 +1 @@
+export {};

package/dist/styles/global/_breakpoints.scss

@@ -0,0 +1,38 @@
+@use 'sass:map';
+
+$breakpoints-default: (
+  sm: 40rem,
+  md: 48rem,
+  lg: 64rem,
+  xl: 80rem,
+  xxl: 96rem,
+);
+
+$breakpoints: () !default;
+
+$breakpoints: map.merge($breakpoints-default, $breakpoints);
+
+@function breakpoint($key) {
+  @if not map.has-key($breakpoints, $key) {
+    @error "Invalid breakpoint: #{$key}";
+  }
+  @return map.get($breakpoints, $key);
+}
+
+@mixin up($key) {
+  @media (min-width: breakpoint($key)) {
+    @content;
+  }
+}
+
+@mixin down($key) {
+  @media (max-width: breakpoint($key)) {
+    @content;
+  }
+}
+
+@mixin between($min, $max) {
+  @media (min-width: breakpoint($min)) and (max-width: breakpoint($max)) {
+    @content;
+  }
+}

package/dist/styles/main.css

@@ -0,0 +1,155 @@
+:root {
+  --dodo-ui-Calendar-date-selected-bg: var(--dodo-color-primary-500);
+  --dodo-ui-Calendar-date-selected-hover-bg: var(--dodo-color-primary-600);
+}
+
+.dodo-theme--dark {
+  --dodo-ui-Calendar-date-selected-bg: var(--dodo-color-primary-300);
+  --dodo-ui-Calendar-date-selected-hover-bg: var(--dodo-color-primary-400);
+}
+
+.dodo-ui-Calendar {
+  font-size: 1rem;
+  color: var(--dodo-color-neutral-900);
+  display: inline-flex;
+  flex-direction: column;
+}
+@media (min-width: 40rem) {
+  .dodo-ui-Calendar {
+    padding: var(--dodo-ui-space);
+  }
+}
+.dodo-ui-Calendar [data-calendar-header] {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 calc(var(--dodo-ui-space) / 2);
+  margin-bottom: calc(var(--dodo-ui-space) * 2);
+  margin-top: var(--dodo-ui-space);
+}
+.dodo-ui-Calendar [data-calendar-heading] {
+  margin: 0 calc(var(--dodo-ui-space) / 2);
+  font-weight: 500;
+}
+.dodo-ui-Calendar button[data-calendar-next-button],
+.dodo-ui-Calendar button[data-calendar-prev-button] {
+  font-size: 1.4em;
+}
+.dodo-ui-Calendar [data-calendar-grid] {
+  width: 100%;
+  user-select: none;
+}
+.dodo-ui-Calendar [data-calendar-grid-row] {
+  display: flex;
+  width: 100%;
+  justify-content: space-around;
+}
+.dodo-ui-Calendar [data-calendar-grid-head] {
+  margin-bottom: var(--dodo-ui-space);
+  display: block;
+}
+.dodo-ui-Calendar [data-calendar-head-cell] {
+  display: inline-flex;
+  width: var(--dodo-ui-element-height-normal);
+  justify-content: center;
+  font-weight: 600;
+  color: var(--dodo-color-neutral-600);
+  font-size: 0.9rem;
+}
+.dodo-ui-Calendar [data-calendar-cell] {
+  display: inline-flex;
+}
+.dodo-ui-Calendar [data-calendar-day] {
+  transition: background-color 70ms, color 70ms, border-color 70ms;
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
+  width: var(--dodo-ui-element-height-normal);
+  height: var(--dodo-ui-element-height-normal);
+  border-radius: var(--dodo-ui-element-roundness-1);
+  border: var(--dodo-ui-element-border-width) solid transparent;
+  position: relative;
+}
+.dodo-ui-Calendar [data-calendar-day]:hover {
+  background-color: var(--dodo-color-neutral-100);
+  border-color: var(--dodo-color-neutral-400);
+}
+.dodo-ui-Calendar [data-calendar-day][data-selected] {
+  background-color: var(--dodo-ui-Calendar-date-selected-bg);
+  color: var(--dodo-color-constant-white);
+}
+.dodo-ui-Calendar [data-calendar-day][data-selected]:hover {
+  background-color: var(--dodo-ui-Calendar-date-selected-hover-bg);
+}
+.dodo-ui-Calendar [data-calendar-day][data-selected][data-today] {
+  background-color: var(--dodo-ui-Calendar-date-selected-bg);
+  color: var(--dodo-color-constant-white);
+}
+.dodo-ui-Calendar [data-calendar-day][data-selected][data-today]:hover {
+  background-color: var(--dodo-ui-Calendar-date-selected-hover-bg);
+}
+.dodo-ui-Calendar [data-calendar-day][data-selected][data-today]::after {
+  background-color: var(--dodo-color-constant-white);
+}
+.dodo-ui-Calendar [data-calendar-day][data-selected][data-today]::after:hover {
+  background-color: var(--dodo-color-constant-white);
+}
+.dodo-ui-Calendar [data-calendar-day][data-today] {
+  background-color: var(--dodo-color-primary-50);
+}
+.dodo-ui-Calendar [data-calendar-day][data-today]::after {
+  content: "";
+  width: var(--dodo-ui-track-element-height-small);
+  height: var(--dodo-ui-track-element-height-small);
+  border-radius: 50%;
+  display: inline-flex;
+  background-color: var(--dodo-color-primary-600);
+  position: absolute;
+  bottom: 0.2em;
+}
+.dodo-ui-Calendar [data-calendar-day][data-outside-month], .dodo-ui-Calendar [data-calendar-day][data-disabled] {
+  color: var(--dodo-color-neutral-400);
+}
+.dodo-ui-Calendar [data-calendar-day][data-outside-month]:hover, .dodo-ui-Calendar [data-calendar-day][data-disabled]:hover {
+  background-color: initial;
+  border-color: transparent;
+}
+.dodo-ui-Calendar [data-calendar-day][data-outside-month][data-today], .dodo-ui-Calendar [data-calendar-day][data-disabled][data-today] {
+  background-color: initial;
+}
+
+.dodo-ui-DatePicker button[data-popover-trigger] {
+  font-size: 1.4em;
+}
+.dodo-ui-DatePicker [data-date-field-input] {
+  display: flex;
+  align-items: center;
+}
+.dodo-ui-DatePicker [data-date-field-segment] {
+  height: 80%;
+  display: inline-flex;
+  align-items: center;
+}
+.dodo-ui-DatePicker [data-segment=literal] {
+  color: var(--dodo-color-neutral-500);
+}
+.dodo-ui-DatePicker.size--normal button[data-popover-trigger] {
+  margin: 0 calc(var(--dodo-ui-space) / 2.5);
+}
+.dodo-ui-DatePicker.size--normal [data-date-field-segment] {
+  padding: 0 calc(var(--dodo-ui-space) / 3);
+}
+.dodo-ui-DatePicker.size--small button[data-popover-trigger] {
+  margin: 0 calc(var(--dodo-ui-space--small) / 2.5);
+}
+.dodo-ui-DatePicker.size--small [data-date-field-segment] {
+  padding: 0 calc(var(--dodo-ui-space-small) / 3);
+}
+.dodo-ui-DatePicker.size--large button[data-popover-trigger] {
+  margin: 0 calc(var(--dodo-ui-space--large) / 2.5);
+}
+.dodo-ui-DatePicker.size--large [data-date-field-segment] {
+  padding: 0 calc(var(--dodo-ui-space-large) / 3);
+}
+
+/*# sourceMappingURL=main.css.map */

package/dist/styles/main.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../../src/lib/components/Calendar/Calendar.scss","../../src/lib/styles/global/_breakpoints.scss","../../src/lib/components/DatePicker/DatePicker.scss"],"names":[],"mappings":"AAKA;EACE;EACA;;;AAGF;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;ACGA;EDPF;IAOI;;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;EACA;;AAGF;AAAA;EAEE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;EACA;EACA;EACA;;AAGF;EACE;;AAGF;EACE,YACE;EAGF;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EACE;EACA;;AAEA;EACE;;AAGF;EACE;;AAEA;EACE;;AAMR;EACE;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIJ;EAEE;;AAEA;EACE;EACA;;AAGF;EACE;;;AE7IN;EACE;;AAGF;EACE;EACA;;AAGF;EACE;EACA;EACA;;AAGF;EACE;;AAQE;EACE;;AAGF;EACE;;AAKF;EACE;;AAGF;EACE;;AAKF;EACE;;AAGF;EACE","file":"main.css"}

package/dist/styles/main.scss

@@ -0,0 +1,2 @@
+@use '../components/Calendar/Calendar.scss';
+@use '../components/DatePicker/DatePicker.scss';

package/dist/test/setup.d.ts

@@ -0,0 +1 @@
+import '@testing-library/jest-dom/vitest';

package/dist/test/setup.js

@@ -0,0 +1,12 @@
+import '@testing-library/jest-dom/vitest';
+import { vi } from 'vitest';
+// mock matchMedia globally
+Object.defineProperty(window, 'matchMedia', {
+    writable: true,
+    value: vi.fn().mockImplementation((query) => ({
+        matches: false,
+        media: query,
+        addEventListener: vi.fn(),
+        removeEventListener: vi.fn(),
+    })),
+});

package/package.json

@@ -0,0 +1,114 @@
+{
+  "name": "@flightlesslabs/dodo-ui-date",
+  "version": "0.2.0",
+  "scripts": {
+    "scss:main": "sh -c \"mkdir -p dist/styles && sass src/lib/styles/main.scss dist/styles/main.css\"",
+    "scss": "pnpm scss:main",
+    "build": "vite build && pnpm run prepack",
+    "preview": "vite preview",
+    "prepare": "svelte-kit sync || echo ''",
+    "prepack": "svelte-kit sync && svelte-package && pnpm run scss && publint",
+    "svelte-check": "svelte-kit sync && svelte-check --tsconfig ./tsconfig.json",
+    "format": "prettier --write .",
+    "lint": "prettier --check . && eslint .",
+    "dev": "storybook dev -p 6006",
+    "build-storybook": "storybook build && touch ./storybook-static/.nojekyll",
+    "check": "pnpm run svelte-check && eslint . && pnpm run lint",
+    "check:fix": "pnpm run svelte-check && eslint . && pnpm run format",
+    "create:component": "node --experimental-strip-types scripts/create-component/create-component.ts",
+    "test": "vitest run"
+  },
+  "homepage": "https://flightlesslabs.github.io/dodo-ui",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/flightlesslabs/dodo-ui-date.git"
+  },
+  "license": "MIT",
+  "files": [
+    "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
+    "src/lib",
+    "!src/lib/**/*.test.*",
+    "!src/lib/**/*.spec.*",
+    "!src/lib/stories/**/*.stories.*",
+    "!src/lib/stories/**/*.mdx",
+    "!src/lib/stories/assets/**/*.png",
+    "!src/lib/stories/assets/**/*.jpg",
+    "!src/lib/stories/philosophy"
+  ],
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "svelte": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "svelte": "./dist/index.js"
+    },
+    "./styles/main.css": "./dist/styles/main.css",
+    "./styles/*": {
+      "sass": "./dist/styles/*",
+      "default": "./dist/styles/*"
+    }
+  },
+  "peerDependencies": {
+    "@flightlesslabs/dodo-ui": "^0.22.2",
+    "@internationalized/date": "^3.0.0",
+    "bits-ui": "^2.0.0",
+    "svelte": "^5.0.0"
+  },
+  "devDependencies": {
+    "@chromatic-com/storybook": "^5.1.1",
+    "@eslint/compat": "^2.0.4",
+    "@eslint/js": "^10.0.1",
+    "@flightlesslabs/dodo-ui": "^0.22.2",
+    "@iconify/svelte": "^5.2.1",
+    "@internationalized/date": "^3.12.0",
+    "@storybook/addon-a11y": "^10.3.5",
+    "@storybook/addon-docs": "^10.3.5",
+    "@storybook/addon-svelte-csf": "^5.1.2",
+    "@storybook/addon-vitest": "^10.3.5",
+    "@storybook/sveltekit": "^10.3.5",
+    "@sveltejs/adapter-auto": "^7.0.1",
+    "@sveltejs/adapter-static": "^3.0.10",
+    "@sveltejs/kit": "^2.57.0",
+    "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^7.0.0",
+    "@testing-library/jest-dom": "^6.9.1",
+    "@testing-library/svelte": "^5.3.1",
+    "@testing-library/user-event": "^14.6.1",
+    "@types/file-saver": "^2.0.7",
+    "@types/node": "^24",
+    "@vitest/browser": "^4.1.3",
+    "@vitest/browser-playwright": "^4.1.3",
+    "@vitest/coverage-v8": "^4.1.3",
+    "bits-ui": "^2.17.2",
+    "dayjs": "^1.11.20",
+    "eslint": "^10.2.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-storybook": "^10.3.5",
+    "eslint-plugin-svelte": "^3.17.0",
+    "esm-env": "^1.2.2",
+    "file-saver": "^2.0.5",
+    "globals": "^17.4.0",
+    "jsdom": "^29.0.2",
+    "playwright": "^1.59.1",
+    "prettier": "^3.8.1",
+    "prettier-plugin-svelte": "^3.5.1",
+    "publint": "^0.3.18",
+    "sass": "^1.99.0",
+    "storybook": "^10.3.5",
+    "svelte": "^5.55.2",
+    "svelte-check": "^4.4.6",
+    "typescript": "^6.0.2",
+    "typescript-eslint": "^8.58.1",
+    "vite": "^8.0.7",
+    "vitest": "^4.1.3"
+  },
+  "keywords": [
+    "svelte"
+  ]
+}

package/src/lib/components/Calendar/Calendar.scss

@@ -0,0 +1,147 @@
+@use '../../styles/global/breakpoints' as breakpoints;
+
+// ----------------------------------------
+// Theme tokens (global CSS variables)
+// ----------------------------------------
+:root {
+  --dodo-ui-Calendar-date-selected-bg: var(--dodo-color-primary-500);
+  --dodo-ui-Calendar-date-selected-hover-bg: var(--dodo-color-primary-600);
+}
+
+.dodo-theme--dark {
+  --dodo-ui-Calendar-date-selected-bg: var(--dodo-color-primary-300);
+  --dodo-ui-Calendar-date-selected-hover-bg: var(--dodo-color-primary-400);
+}
+
+.dodo-ui-Calendar {
+  font-size: 1rem;
+  color: var(--dodo-color-neutral-900);
+  display: inline-flex;
+  flex-direction: column;
+
+  @include breakpoints.up('sm') {
+    padding: var(--dodo-ui-space);
+  }
+
+  [data-calendar-header] {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0 calc(var(--dodo-ui-space) / 2);
+    margin-bottom: calc(var(--dodo-ui-space) * 2);
+    margin-top: var(--dodo-ui-space);
+  }
+
+  [data-calendar-heading] {
+    margin: 0 calc(var(--dodo-ui-space) / 2);
+    font-weight: 500;
+  }
+
+  button[data-calendar-next-button],
+  button[data-calendar-prev-button] {
+    font-size: 1.4em;
+  }
+
+  [data-calendar-grid] {
+    width: 100%;
+    user-select: none;
+  }
+
+  [data-calendar-grid-row] {
+    display: flex;
+    width: 100%;
+    justify-content: space-around;
+  }
+
+  [data-calendar-grid-head] {
+    margin-bottom: var(--dodo-ui-space);
+    display: block;
+  }
+
+  [data-calendar-head-cell] {
+    display: inline-flex;
+    width: var(--dodo-ui-element-height-normal);
+    justify-content: center;
+    font-weight: 600;
+    color: var(--dodo-color-neutral-600);
+    font-size: 0.9rem;
+  }
+
+  [data-calendar-cell] {
+    display: inline-flex;
+  }
+
+  [data-calendar-day] {
+    transition:
+      background-color 70ms,
+      color 70ms,
+      border-color 70ms;
+    display: inline-flex;
+    justify-content: center;
+    align-items: center;
+    width: var(--dodo-ui-element-height-normal);
+    height: var(--dodo-ui-element-height-normal);
+    border-radius: var(--dodo-ui-element-roundness-1);
+    border: var(--dodo-ui-element-border-width) solid transparent;
+    position: relative;
+
+    &:hover {
+      background-color: var(--dodo-color-neutral-100);
+      border-color: var(--dodo-color-neutral-400);
+    }
+
+    &[data-selected] {
+      background-color: var(--dodo-ui-Calendar-date-selected-bg);
+      color: var(--dodo-color-constant-white);
+
+      &:hover {
+        background-color: var(--dodo-ui-Calendar-date-selected-hover-bg);
+      }
+
+      &[data-today] {
+        background-color: var(--dodo-ui-Calendar-date-selected-bg);
+        color: var(--dodo-color-constant-white);
+
+        &:hover {
+          background-color: var(--dodo-ui-Calendar-date-selected-hover-bg);
+        }
+
+        &::after {
+          background-color: var(--dodo-color-constant-white);
+
+          &:hover {
+            background-color: var(--dodo-color-constant-white);
+          }
+        }
+      }
+    }
+
+    &[data-today] {
+      background-color: var(--dodo-color-primary-50);
+      &::after {
+        content: '';
+        width: var(--dodo-ui-track-element-height-small);
+        height: var(--dodo-ui-track-element-height-small);
+        border-radius: 50%;
+        display: inline-flex;
+        background-color: var(--dodo-color-primary-600);
+        position: absolute;
+        bottom: 0.2em;
+      }
+    }
+
+    &[data-outside-month],
+    &[data-disabled] {
+      color: var(--dodo-color-neutral-400);
+
+      &:hover {
+        background-color: initial;
+        border-color: transparent;
+      }
+
+      &[data-today] {
+        background-color: initial;
+      }
+    }
+  }
+}