@kodffe/ui 0.0.0-stage → 0.10.1

package/dist/tooltip/tooltip.d.ts

@@ -0,0 +1,29 @@
+import { type ReactElement, type ReactNode } from 'react';
+export type FloatingSide = 'top' | 'right' | 'bottom' | 'left';
+export interface TooltipProviderProps {
+    children: ReactNode;
+    /** Wait before the first tooltip opens (ms). Moving to another trigger right after opens it instantly. */
+    delayDuration?: number;
+}
+/** Shares timing between tooltips. Mount once near the app root (each `Tooltip` also works without it). */
+export declare function TooltipProvider({ children, delayDuration }: TooltipProviderProps): import("react").JSX.Element;
+export interface TooltipProps {
+    /** Short text label. No links or buttons inside: use `Popover` for interactive content. */
+    content: ReactNode;
+    /** A single focusable element (Button, icon button, link). */
+    children: ReactElement;
+    side?: FloatingSide;
+    align?: 'start' | 'center' | 'end';
+    /** Keyboard shortcut shown after the label, e.g. `⌘K`. */
+    shortcut?: string;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    delayDuration?: number;
+    className?: string;
+}
+/**
+ * Short label that appears on hover and keyboard focus. It supplements, never replaces, an
+ * accessible name: icon buttons still need `aria-label`. Touch screens do not show tooltips.
+ */
+export declare function Tooltip({ content, children, side, align, shortcut, open, defaultOpen, onOpenChange, delayDuration, className, }: TooltipProps): import("react").JSX.Element;

package/dist/tooltip/tooltip.js

@@ -0,0 +1,54 @@
+"use client";
+import { cx as e } from "../lib/cx.js";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { createContext as r, useContext as i } from "react";
+import * as a from "@radix-ui/react-tooltip";
+//#region src/tooltip/tooltip.tsx
+var o = r(!1);
+function s({ children: e, delayDuration: n = 400 }) {
+	return /* @__PURE__ */ t(a.Provider, {
+		delayDuration: n,
+		children: /* @__PURE__ */ t(o.Provider, {
+			value: !0,
+			children: e
+		})
+	});
+}
+function c({ content: r, children: s, side: c = "top", align: l = "center", shortcut: u, open: d, defaultOpen: f, onOpenChange: p, delayDuration: m, className: h }) {
+	let g = i(o), _ = /* @__PURE__ */ n(a.Root, {
+		open: d,
+		defaultOpen: f,
+		onOpenChange: p,
+		delayDuration: m,
+		children: [/* @__PURE__ */ t(a.Trigger, {
+			asChild: !0,
+			children: s
+		}), /* @__PURE__ */ t(a.Portal, { children: /* @__PURE__ */ n(a.Content, {
+			side: c,
+			align: l,
+			sideOffset: 6,
+			collisionPadding: 8,
+			className: e("kf-tooltip z-[70] flex max-w-[16rem] items-center gap-2 rounded-xs bg-fg px-2.5 py-1.5 font-sans text-[13px] leading-snug font-medium text-bg shadow-overlay", h),
+			children: [
+				r,
+				u && /* @__PURE__ */ t("kbd", {
+					className: "rounded-[4px] bg-bg/15 px-1.5 py-px font-mono text-[11px] opacity-80",
+					children: u
+				}),
+				/* @__PURE__ */ t(a.Arrow, {
+					width: 10,
+					height: 5,
+					className: "fill-fg"
+				})
+			]
+		}) })]
+	});
+	return g ? _ : /* @__PURE__ */ t(a.Provider, {
+		delayDuration: m ?? 400,
+		children: _
+	});
+}
+//#endregion
+export { c as Tooltip, s as TooltipProvider };
+
+//# sourceMappingURL=tooltip.js.map

package/dist/tooltip/tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"tooltip.js","names":["RadixTooltip","HasProvider","createContext","TooltipProvider","Tooltip","shared","useContext","tooltip","cx","className","content","shortcut","delayDuration"],"sources":["../../src/tooltip/tooltip.tsx"],"sourcesContent":["'use client';\n\nimport * as RadixTooltip from '@radix-ui/react-tooltip';\nimport { createContext, useContext, type ReactElement, type ReactNode } from 'react';\nimport { cx } from '../lib/cx';\n\nexport type FloatingSide = 'top' | 'right' | 'bottom' | 'left';\n\nconst HasProvider = createContext(false);\n\nexport interface TooltipProviderProps {\n  children: ReactNode;\n  /** Wait before the first tooltip opens (ms). Moving to another trigger right after opens it instantly. */\n  delayDuration?: number;\n}\n\n/** Shares timing between tooltips. Mount once near the app root (each `Tooltip` also works without it). */\nexport function TooltipProvider({ children, delayDuration = 400 }: TooltipProviderProps) {\n  return (\n    <RadixTooltip.Provider delayDuration={delayDuration}>\n      <HasProvider.Provider value={true}>{children}</HasProvider.Provider>\n    </RadixTooltip.Provider>\n  );\n}\n\nexport interface TooltipProps {\n  /** Short text label. No links or buttons inside: use `Popover` for interactive content. */\n  content: ReactNode;\n  /** A single focusable element (Button, icon button, link). */\n  children: ReactElement;\n  side?: FloatingSide;\n  align?: 'start' | 'center' | 'end';\n  /** Keyboard shortcut shown after the label, e.g. `⌘K`. */\n  shortcut?: string;\n  open?: boolean;\n  defaultOpen?: boolean;\n  onOpenChange?: (open: boolean) => void;\n  delayDuration?: number;\n  className?: string;\n}\n\n/**\n * Short label that appears on hover and keyboard focus. It supplements, never replaces, an\n * accessible name: icon buttons still need `aria-label`. Touch screens do not show tooltips.\n */\nexport function Tooltip({\n  content,\n  children,\n  side = 'top',\n  align = 'center',\n  shortcut,\n  open,\n  defaultOpen,\n  onOpenChange,\n  delayDuration,\n  className,\n}: TooltipProps) {\n  const shared = useContext(HasProvider);\n  const tooltip = (\n    <RadixTooltip.Root open={open} defaultOpen={defaultOpen} onOpenChange={onOpenChange} delayDuration={delayDuration}>\n      <RadixTooltip.Trigger asChild>{children}</RadixTooltip.Trigger>\n      <RadixTooltip.Portal>\n        <RadixTooltip.Content\n          side={side}\n          align={align}\n          sideOffset={6}\n          collisionPadding={8}\n          className={cx(\n            // Inverse surface: dark in light theme, light in dark theme.\n            'kf-tooltip z-[70] flex max-w-[16rem] items-center gap-2 rounded-xs bg-fg px-2.5 py-1.5 font-sans text-[13px] leading-snug font-medium text-bg shadow-overlay',\n            className,\n          )}\n        >\n          {content}\n          {shortcut && (\n            <kbd className=\"rounded-[4px] bg-bg/15 px-1.5 py-px font-mono text-[11px] opacity-80\">{shortcut}</kbd>\n          )}\n          <RadixTooltip.Arrow width={10} height={5} className=\"fill-fg\" />\n        </RadixTooltip.Content>\n      </RadixTooltip.Portal>\n    </RadixTooltip.Root>\n  );\n  return shared ? (\n    tooltip\n  ) : (\n    <RadixTooltip.Provider delayDuration={delayDuration ?? 400}>{tooltip}</RadixTooltip.Provider>\n  );\n}\n"],"mappings":";;;;;;AAQA,IAAMC,IAAcC,EAAc,EAAK;AASvC,SAAgBC,EAAgB,EAAE,aAAU,mBAAgB,OAA6B;CACvF,OACE,kBAACH,EAAa,UAAd;EAAsC;EACpC,UAAA,kBAACC,EAAY,UAAb;GAAsB,OAAO;GAAO;EAA+B,CAAA;CAC9C,CAAA;AAE3B;AAsBA,SAAgBG,EAAQ,EACtB,YACA,aACA,UAAO,OACP,WAAQ,UACR,aACA,SACA,gBACA,iBACA,kBACA,gBACe;CACf,IAAMC,IAASC,EAAWL,CAAW,GAC/BM,IACJ,kBAACP,EAAa,MAAd;EAAyB;EAAmB;EAA2B;EAA6B;EAApG,UAAA,CACE,kBAACA,EAAa,SAAd;GAAsB,SAAA;GAAS;EAA+B,CAAA,GAC9D,kBAACA,EAAa,QAAd,EAAA,UACE,kBAACA,EAAa,SAAd;GACQ;GACC;GACP,YAAY;GACZ,kBAAkB;GAClB,WAAWQ,EAET,gKACAC,CACF;GATF,UAAA;IAWGC;IACAC,KACC,kBAAC,OAAD;KAAK,WAAU;KAAwE,UAAAA;IAAc,CAAA;IAEvG,kBAACX,EAAa,OAAd;KAAoB,OAAO;KAAI,QAAQ;KAAG,WAAU;IAAW,CAAA;GAC3C;EACH,CAAA,EAAA,CAAA,CACJ;;CAErB,OAAOK,IACLE,IAEA,kBAACP,EAAa,UAAd;EAAuB,eAAeY,KAAiB;EAAM,UAAAL;CAA+B,CAAA;AAEhG"}

package/package.json

@@ -1,6 +1,91 @@
 {
   "name": "@kodffe/ui",
-  "version": "0.0.0-stage",
-  "stub": true,
-  "description": "Temporary package placeholder for staged publishing"
+  "version": "0.10.1",
+  "description": "Kodffe React components (React 19 + Tailwind v4), documented in Storybook.",
+  "type": "module",
+  "license": "UNLICENSED",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/kodffe/kodffe-web.git",
+    "directory": "packages/ui"
+  },
+  "sideEffects": [
+    "*.css"
+  ],
+  "files": [
+    "dist",
+    "styles.css"
+  ],
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    },
+    "./styles.css": "./styles.css"
+  },
+  "dependencies": {
+    "@kodffe/tokens": "0.7.0",
+    "@radix-ui/react-accordion": "1.3.1",
+    "@radix-ui/react-alert-dialog": "1.2.1",
+    "@radix-ui/react-checkbox": "1.4.1",
+    "@radix-ui/react-collapsible": "1.2.1",
+    "@radix-ui/react-context-menu": "2.4.1",
+    "@radix-ui/react-dialog": "1.3.1",
+    "@radix-ui/react-dropdown-menu": "2.2.1",
+    "@radix-ui/react-hover-card": "1.2.1",
+    "@radix-ui/react-menubar": "1.2.1",
+    "@radix-ui/react-popover": "1.3.1",
+    "@radix-ui/react-radio-group": "1.5.1",
+    "@radix-ui/react-select": "2.4.1",
+    "@radix-ui/react-slider": "1.6.1",
+    "@radix-ui/react-switch": "1.4.1",
+    "@radix-ui/react-tabs": "1.2.1",
+    "@radix-ui/react-toast": "1.3.1",
+    "@radix-ui/react-tooltip": "1.4.1",
+    "@tanstack/react-table": "9.3.1",
+    "@tanstack/react-virtual": "3.14.21",
+    "date-fns": "4.4.0",
+    "react-day-picker": "10.0.2",
+    "recharts": "3.10.1"
+  },
+  "peerDependencies": {
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0"
+  },
+  "devDependencies": {
+    "@kodffe/config": "0.0.0",
+    "@storybook/addon-a11y": "10.6.2",
+    "@storybook/addon-docs": "10.6.2",
+    "@storybook/addon-themes": "10.6.2",
+    "@storybook/addon-vitest": "10.6.2",
+    "@storybook/react-vite": "10.6.2",
+    "@tailwindcss/vite": "4.3.3",
+    "@types/react": "19.3.0",
+    "@types/react-dom": "19.3.0",
+    "@vitejs/plugin-react": "6.1.2",
+    "@vitest/browser": "5.0.5",
+    "@vitest/browser-playwright": "5.0.5",
+    "@vitest/coverage-v8": "5.0.5",
+    "playwright": "1.64.1",
+    "react": "19.3.1",
+    "react-dom": "19.3.1",
+    "remark-gfm": "4.0.1",
+    "storybook": "10.6.2",
+    "tailwindcss": "4.3.3",
+    "typescript": "6.0.3",
+    "vite": "8.3.4",
+    "vitest": "5.0.5"
+  },
+  "publishConfig": {
+    "access": "public",
+    "registry": "https://registry.npmjs.org"
+  },
+  "scripts": {
+    "icons": "node scripts/generate-icons.mjs",
+    "build": "vite build -c vite.lib.config.ts && tsc -p tsconfig.build.json",
+    "typecheck": "tsc --noEmit",
+    "storybook": "storybook dev -p 6006",
+    "build-storybook": "storybook build",
+    "test": "vitest run"
+  }
 }

package/styles.css

@@ -0,0 +1,521 @@
+/*
+ * @kodffe/ui styles. In a product:
+ *   @import "tailwindcss";
+ *   @import "@kodffe/tokens/tokens.css";
+ *   @import "@kodffe/ui/styles.css";
+ */
+@source "./dist";
+
+/*
+ * Logo, option B "Open D" (docs/adr/0012-open-d-logo.md): K | slot with the mark (eye + open D) | F F E,
+ * 1 em = 50 units (geometry: docs/design/logo/generate.py). Collapsible logos (headers) fade the letters and
+ * slide the mark into the K's place; only transform and opacity animate, so nothing reflows and the hover
+ * area stays put. One symmetric ease-in-out, no bounce or pause; instant with reduced motion.
+ */
+.kf-logo {
+  --kf-logo-motion: 320ms cubic-bezier(0.65, 0, 0.35, 1);
+  display: inline-flex;
+  align-items: flex-start;
+  height: 1em;
+  line-height: 1;
+  vertical-align: -0.14em;
+}
+.kf-logo > svg {
+  display: block;
+  flex: none;
+  height: 1em;
+  overflow: visible;
+}
+.kf-logo__k {
+  width: 0.6484em;
+}
+.kf-logo__slot {
+  width: 1.3276em;
+}
+.kf-logo__ffe {
+  width: 1.7304em;
+}
+.kf-logo--mark .kf-logo__mark {
+  width: 1.44em;
+}
+.kf-logo--collapsible > svg {
+  transition:
+    transform var(--kf-logo-motion),
+    opacity var(--kf-logo-motion);
+}
+/* Collapsed: the mark moves to where the K starts; the letters fade (F F E with a short slide). */
+.kf-logo.is-collapsed .kf-logo__k {
+  opacity: 0;
+}
+.kf-logo.is-collapsed .kf-logo__slot {
+  transform: translateX(-0.7004em);
+}
+.kf-logo.is-collapsed .kf-logo__ffe {
+  opacity: 0;
+  transform: translateX(-0.5em);
+}
+/* Hover or keyboard focus on the logo's link shows the full name again. */
+.kf-logo--collapsible.is-collapsed:hover > svg,
+:focus-visible > .kf-logo--collapsible.is-collapsed > svg {
+  opacity: 1;
+  transform: none;
+}
+@media (prefers-reduced-motion: reduce) {
+  .kf-logo--collapsible > svg {
+    transition: none;
+  }
+}
+
+/* Mascot (ADR-0015): each SVG carries its own scoped animation; `animated={false}` stops it. */
+.kf-mascot {
+  overflow: visible;
+}
+.kf-mascot--still,
+.kf-mascot--still * {
+  animation: none !important;
+}
+
+/* Spinner: the eye's pupil goes round. With reduced motion it keeps turning, slowly, because it reports progress. */
+.kf-spinner__pupil {
+  transform-box: view-box;
+  transform-origin: 50px 34px;
+  animation: kf-spinner 0.9s linear infinite;
+}
+@keyframes kf-spinner {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* Overlays (Modal, Drawer). Exit keyframes only define their end state, so a swiped panel
+   leaves from where the finger released it. */
+.kf-overlay[data-state='open'] {
+  animation: kf-fade-in 200ms var(--ease-standard);
+}
+.kf-overlay[data-state='closed'] {
+  animation: kf-fade-out 160ms var(--ease-standard) forwards;
+}
+.kf-modal[data-state='open'],
+.kf-drawer--bottom[data-state='open'] {
+  animation: kf-in-bottom 300ms var(--ease-standard);
+}
+.kf-modal[data-state='closed'],
+.kf-drawer--bottom[data-state='closed'] {
+  animation: kf-out-bottom 200ms var(--ease-standard) forwards;
+}
+.kf-drawer--right[data-state='open'] {
+  animation: kf-in-right 300ms var(--ease-standard);
+}
+.kf-drawer--right[data-state='closed'] {
+  animation: kf-out-right 200ms var(--ease-standard) forwards;
+}
+.kf-drawer--left[data-state='open'] {
+  animation: kf-in-left 300ms var(--ease-standard);
+}
+.kf-drawer--left[data-state='closed'] {
+  animation: kf-out-left 200ms var(--ease-standard) forwards;
+}
+@media (min-width: 40rem) {
+  .kf-modal[data-state='open'] {
+    animation: kf-pop-in 220ms var(--ease-standard);
+  }
+  .kf-modal[data-state='closed'] {
+    animation: kf-pop-out 150ms var(--ease-standard) forwards;
+  }
+}
+
+@keyframes kf-fade-in {
+  from {
+    opacity: 0;
+  }
+}
+@keyframes kf-fade-out {
+  to {
+    opacity: 0;
+  }
+}
+@keyframes kf-in-bottom {
+  from {
+    transform: translateY(100%);
+  }
+}
+@keyframes kf-out-bottom {
+  to {
+    transform: translateY(100%);
+  }
+}
+@keyframes kf-in-right {
+  from {
+    transform: translateX(100%);
+  }
+}
+@keyframes kf-out-right {
+  to {
+    transform: translateX(100%);
+  }
+}
+@keyframes kf-in-left {
+  from {
+    transform: translateX(-100%);
+  }
+}
+@keyframes kf-out-left {
+  to {
+    transform: translateX(-100%);
+  }
+}
+@keyframes kf-pop-in {
+  from {
+    opacity: 0;
+    transform: translateY(8px) scale(0.97);
+  }
+}
+@keyframes kf-pop-out {
+  to {
+    opacity: 0;
+    transform: scale(0.97);
+  }
+}
+
+/* Toasts (Radix Toast). Mobile: enter from the bottom; desktop: from the right. Swipe follows the finger. */
+.kf-toast[data-state='open'] {
+  animation: kf-in-bottom 280ms var(--ease-standard);
+}
+.kf-toast[data-state='closed'] {
+  animation: kf-fade-out 160ms var(--ease-standard) forwards;
+}
+.kf-toast[data-swipe='move'] {
+  transform: translate(var(--radix-toast-swipe-move-x), var(--radix-toast-swipe-move-y));
+}
+.kf-toast[data-swipe='cancel'] {
+  transform: translate(0, 0);
+  transition: transform 200ms var(--ease-standard);
+}
+.kf-toast[data-swipe='end'] {
+  animation: kf-toast-swipe-out 160ms var(--ease-standard) forwards;
+}
+@media (min-width: 40rem) {
+  .kf-toast[data-state='open'] {
+    animation: kf-in-right 280ms var(--ease-standard);
+  }
+}
+@keyframes kf-toast-swipe-out {
+  from {
+    transform: translate(var(--radix-toast-swipe-end-x), var(--radix-toast-swipe-end-y));
+  }
+  to {
+    transform: translate(var(--radix-toast-swipe-end-x), var(--radix-toast-swipe-end-y));
+    opacity: 0;
+  }
+}
+
+/* Floating content: Popover, HoverCard, Tooltip (and NotificationCenter). */
+.kf-popover {
+  transform-origin: var(--radix-popover-content-transform-origin);
+}
+.kf-hovercard {
+  transform-origin: var(--radix-hover-card-content-transform-origin);
+}
+.kf-tooltip {
+  transform-origin: var(--radix-tooltip-content-transform-origin);
+}
+.kf-popover[data-state='open'],
+.kf-hovercard[data-state='open'] {
+  animation: kf-pop-in 160ms var(--ease-standard);
+}
+.kf-tooltip[data-state='delayed-open'] {
+  animation: kf-fade-in 120ms var(--ease-standard);
+}
+.kf-popover[data-state='closed'],
+.kf-hovercard[data-state='closed'],
+.kf-tooltip[data-state='closed'] {
+  animation: kf-fade-out 100ms var(--ease-standard) forwards;
+}
+
+/* Progress: indeterminate bar */
+.kf-progress-indeterminate {
+  animation: kf-indeterminate 1.4s var(--ease-standard) infinite;
+}
+@keyframes kf-indeterminate {
+  0% {
+    transform: translateX(-100%) scaleX(0.4);
+  }
+  60% {
+    transform: translateX(60%) scaleX(0.6);
+  }
+  100% {
+    transform: translateX(160%) scaleX(0.4);
+  }
+}
+
+/* Skeleton shimmer */
+.kf-skeleton {
+  background: linear-gradient(
+      90deg,
+      var(--kf-surface-muted) 0%,
+      color-mix(in oklab, var(--kf-surface-muted), var(--kf-fg) 6%) 50%,
+      var(--kf-surface-muted) 100%
+    )
+    0 0 / 200% 100%;
+  animation: kf-shimmer 1.6s linear infinite;
+}
+@keyframes kf-shimmer {
+  to {
+    background-position: -200% 0;
+  }
+}
+
+/* Menus (DropdownMenu, ContextMenu, Menubar) */
+.kf-menu[data-state='open'] {
+  animation: kf-pop-in 140ms var(--ease-standard);
+}
+.kf-menu[data-state='closed'] {
+  animation: kf-fade-out 100ms var(--ease-standard) forwards;
+}
+
+/* Collapsible / Accordion height animation */
+.kf-collapse[data-state='open'] {
+  animation: kf-expand 220ms var(--ease-standard);
+}
+.kf-collapse[data-state='closed'] {
+  animation: kf-collapse 180ms var(--ease-standard);
+}
+@keyframes kf-expand {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--radix-collapsible-content-height, var(--radix-accordion-content-height));
+  }
+}
+@keyframes kf-collapse {
+  from {
+    height: var(--radix-collapsible-content-height, var(--radix-accordion-content-height));
+  }
+  to {
+    height: 0;
+  }
+}
+
+/* Command palette: drops in on desktop, slides up on mobile */
+.kf-palette[data-state='open'] {
+  animation: kf-in-bottom 260ms var(--ease-standard);
+}
+@media (min-width: 40rem) {
+  .kf-palette[data-state='open'] {
+    animation: kf-pop-in 180ms var(--ease-standard);
+  }
+}
+.kf-palette[data-state='closed'] {
+  animation: kf-fade-out 120ms var(--ease-standard) forwards;
+}
+
+/*
+ * Calendar (react-day-picker, ADR-0004). Cell size grows on touch screens (`--kf-cal-size`) but never
+ * past a seventh of the viewport minus the gutters, so a week fits on 320px phones.
+ */
+.kf-cal {
+  --kf-cal-size: 2.25rem;
+  --kf-cal-cell: min(var(--kf-cal-size), calc((100vw - 2rem) / 7));
+  font-family: var(--font-sans);
+  color: var(--kf-fg);
+  position: relative;
+}
+@media (pointer: coarse) {
+  .kf-cal {
+    --kf-cal-size: 2.75rem;
+  }
+}
+.kf-cal-months {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 1.5rem;
+}
+.kf-cal-month {
+  display: grid;
+  gap: 0.5rem;
+}
+.kf-cal-caption {
+  display: flex;
+  align-items: center;
+  height: 2.25rem;
+  padding-inline: 0.25rem;
+}
+.kf-cal-caption-label {
+  font-weight: 700;
+  font-size: 0.9375rem;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+.kf-cal-nav {
+  position: absolute;
+  top: 0;
+  right: 0;
+  display: flex;
+  gap: 0.25rem;
+  z-index: 1;
+}
+.kf-cal-nav-btn {
+  display: grid;
+  place-items: center;
+  width: 2.25rem;
+  height: 2.25rem;
+  border: 0;
+  border-radius: 9999px;
+  background: transparent;
+  color: var(--kf-fg);
+  cursor: pointer;
+}
+.kf-cal-nav-btn:hover {
+  background: var(--kf-surface-muted);
+}
+.kf-cal-nav-btn:disabled {
+  opacity: 0.35;
+  cursor: default;
+}
+.kf-cal-grid {
+  border-collapse: separate;
+  border-spacing: 0 2px;
+}
+.kf-cal-weekday {
+  width: var(--kf-cal-cell);
+  height: 2rem;
+  font-size: 0.75rem;
+  font-weight: 600;
+  color: var(--kf-fg-muted);
+  text-transform: uppercase;
+}
+.kf-cal-day {
+  width: var(--kf-cal-cell);
+  height: var(--kf-cal-cell);
+  padding: 0;
+  text-align: center;
+}
+.kf-cal-day-btn {
+  width: var(--kf-cal-cell);
+  height: var(--kf-cal-cell);
+  border: 0;
+  border-radius: 9999px;
+  background: transparent;
+  color: inherit;
+  font: inherit;
+  font-size: 0.875rem;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background-color 120ms var(--ease-standard);
+}
+.kf-cal-day-btn:hover {
+  background: var(--kf-surface-muted);
+}
+.kf-cal-day-btn:focus-visible {
+  outline: 3px solid var(--kf-focus);
+  outline-offset: 1px;
+}
+.kf-cal-day.is-today .kf-cal-day-btn {
+  font-weight: 800;
+  color: var(--kf-link);
+  box-shadow: inset 0 0 0 1.5px currentColor;
+}
+.kf-cal-day.is-outside {
+  /* Muted text, not opacity: --kf-fg-muted stays AA on the surface in both themes. */
+  color: var(--kf-fg-muted);
+  font-weight: 400;
+}
+.kf-cal-day.is-disabled .kf-cal-day-btn {
+  opacity: 0.35;
+  text-decoration: line-through;
+  cursor: not-allowed;
+  background: transparent;
+}
+.kf-cal-day.is-hidden {
+  visibility: hidden;
+}
+.kf-cal-day.is-selected .kf-cal-day-btn {
+  background: var(--kf-primary);
+  color: var(--kf-on-primary);
+  font-weight: 700;
+  box-shadow: none;
+}
+.kf-cal-day.is-range-middle {
+  background: var(--kf-info-surface);
+}
+.kf-cal-day.is-range-middle .kf-cal-day-btn {
+  background: transparent;
+  color: var(--kf-fg);
+  font-weight: 500;
+}
+.kf-cal-day.is-range-start:not(.is-range-end) {
+  background: linear-gradient(to right, transparent 50%, var(--kf-info-surface) 50%);
+}
+.kf-cal-day.is-range-end:not(.is-range-start) {
+  background: linear-gradient(to left, transparent 50%, var(--kf-info-surface) 50%);
+}
+.kf-cal-dropdowns {
+  display: inline-flex;
+  gap: 0.5rem;
+  align-items: center;
+}
+.kf-cal-dropdown-root {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  font-weight: 700;
+}
+.kf-cal-dropdown {
+  position: absolute;
+  inset: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.kf-cal-dropdown-root:has(:focus-visible) {
+  outline: 3px solid var(--kf-focus);
+  outline-offset: 2px;
+  border-radius: 6px;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  .kf-spinner__pupil {
+    animation-duration: 3s;
+  }
+  .kf-overlay,
+  .kf-modal,
+  .kf-drawer,
+  .kf-toast,
+  .kf-popover,
+  .kf-hovercard,
+  .kf-tooltip,
+  .kf-menu,
+  .kf-collapse,
+  .kf-palette {
+    animation-duration: 1ms !important;
+  }
+  .kf-skeleton,
+  .kf-progress-indeterminate {
+    animation: none;
+  }
+}
+
+/*
+ * Scroll reveal for marketing sections: a short rise as content enters the viewport. Restrained on
+ * purpose: transform only (no opacity, so contrast checks and readers never meet half-visible text),
+ * scroll-driven (no JavaScript), only where supported and only without reduced motion.
+ */
+@media (prefers-reduced-motion: no-preference) {
+  @supports (animation-timeline: view()) {
+    .kf-reveal {
+      animation: kf-rise linear both;
+      animation-timeline: view();
+      animation-range: entry 0% entry 60%;
+    }
+  }
+}
+@keyframes kf-rise {
+  from {
+    transform: translateY(24px);
+  }
+  to {
+    transform: none;
+  }
+}