@kashi-ui/css 0.0.0-stage → 0.3.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Kashi contributors
+
+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

@@ -1,3 +1,27 @@
-# Temporary Holding Version
+# @kashi-ui/css
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+استایل همهٔ کامپوننت‌های [کاشی](https://github.com/Sepantapouya/Kashi) با CSS خالص؛ برای React، Vue، Svelte، Angular یا HTML ساده.
+
+```bash
+npm i @kashi-ui/css
+```
+
+```js
+import "@kashi-ui/css";
+```
+
+یا از CDN:
+
+```html
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@kashi-ui/css/dist/kashi.css">
+
+<html lang="fa" dir="rtl">
+<button class="k-btn k-btn--primary">ثبت‌نام</button>
+```
+
+- راست‌به‌چپ از پایه با Logical Properties
+- تم تیره (پیش‌فرض) و روشن با `data-theme="light"`
+- همهٔ استایل‌ها در Cascade Layer؛ CSS شما همیشه اولویت دارد
+- فونت متغیر وزیرمتن همراه پکیج (لایسنس SIL OFL 1.1، اثر صابر راستی‌کردار)
+
+مستندات کامل: [kashi.sepantapouya.com](https://kashi.sepantapouya.com) · کد: [GitHub](https://github.com/Sepantapouya/Kashi) · لایسنس MIT

package/dist/base.css

@@ -0,0 +1,82 @@
+/* پایه — فقط در ریشه یا داخل .k-root اعمال می‌شود */
+*, *::before, *::after { box-sizing: border-box; }
+
+:where(html) {
+  -webkit-text-size-adjust: 100%;
+  text-size-adjust: 100%;
+}
+
+:where(body, .k-root) {
+  margin: 0;
+  background: var(--k-bg-primary);
+  color: var(--k-text-primary);
+  font-family: var(--k-font-sans);
+  font-size: var(--k-text-md);
+  line-height: var(--k-leading-normal);
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  /* کشیده‌نویسی و اتصال درست حروف فارسی */
+  font-feature-settings: "kern", "liga", "calt";
+}
+
+:where(h1, h2, h3, h4, h5, h6) {
+  margin: 0;
+  line-height: var(--k-leading-tight);
+  font-weight: var(--k-weight-bold);
+}
+
+:where(:focus-visible) {
+  outline: 2px solid var(--k-border-brand);
+  outline-offset: 2px;
+}
+
+::selection {
+  background: var(--k-bg-brand-subtle);
+  color: var(--k-text-primary);
+}
+
+/* فقط برای صفحه‌خوان قابل‌خواندن است */
+.k-sr-only {
+  position: absolute;
+  inline-size: 1px;
+  block-size: 1px;
+  padding: 0;
+  margin: -1px;
+  overflow: hidden;
+  clip-path: inset(50%);
+  white-space: nowrap;
+  border: 0;
+}
+
+/* لینک «رفتن به محتوای اصلی» برای کاربران کیبورد */
+.k-skip-link {
+  position: absolute;
+  inset-inline-start: var(--k-space-4);
+  inset-block-start: var(--k-space-4);
+  z-index: var(--k-z-toast);
+  padding: var(--k-space-2) var(--k-space-4);
+  border-radius: var(--k-radius-md);
+  background: var(--k-bg-brand);
+  color: var(--k-text-on-brand);
+  translate: 0 -200%;
+}
+.k-skip-link:focus { translate: 0 0; }
+
+/* کاربرانی که کنتراست بیشتر خواسته‌اند */
+@media (prefers-contrast: more) {
+  :root {
+    --k-text-tertiary: var(--k-text-secondary);
+    --k-border-primary: var(--k-text-tertiary);
+    --k-border-secondary: var(--k-border-primary);
+  }
+}
+
+/* ارقام لاتین در کنار متن فارسی: tabular برای جدول‌ها و اعداد */
+.k-tabular { font-variant-numeric: tabular-nums; }
+
+@media (prefers-reduced-motion: reduce) {
+  *, *::before, *::after {
+    animation-duration: 0.01ms !important;
+    transition-duration: 0.01ms !important;
+  }
+}

package/dist/components/alert.css

@@ -0,0 +1,92 @@
+/* هشدار (Alert) — به سبک Untitled UI: سطح خنثی، رنگ فقط در آیکون شاخص
+ * <div class="k-alert k-alert--warning" role="alert">  ← role="status" برای پیام‌های غیرفوری
+ *   <span class="k-alert__icon" aria-hidden="true"><svg>…</svg></span>
+ *   <div class="k-alert__content">
+ *     <p class="k-alert__title">عنوان</p>
+ *     <p class="k-alert__description">توضیح</p>
+ *     <div class="k-alert__actions">…</div>
+ *   </div>
+ *   <button class="k-btn k-btn--tertiary k-btn--icon k-btn--sm k-alert__close" aria-label="بستن">×</button>
+ * </div>
+ * رنگ‌ها: neutral | brand | info | success | warning | error
+ * k-alert--tinted: پس‌زمینهٔ رنگی کم‌رنگ به‌جای سطح خنثی
+ *
+ * متغیرها: --k-alert-radius  --k-alert-padding  --k-alert-bg
+ */
+.k-alert {
+  --_accent: var(--k-text-tertiary);
+  --_bg: var(--k-alert-bg, var(--k-bg-secondary));
+
+  display: flex;
+  align-items: flex-start;
+  gap: var(--k-space-4);
+  padding: var(--k-alert-padding, calc(1rem * var(--k-density)));
+  border: 1px solid var(--k-border-primary);
+  border-radius: var(--k-alert-radius, var(--k-radius-xl));
+  background: var(--_bg);
+  color: var(--k-text-tertiary);
+  font-size: var(--k-text-sm);
+  box-shadow: var(--k-shadow-xs);
+}
+
+.k-alert--brand { --_accent: var(--k-text-brand); }
+.k-alert--info { --_accent: var(--k-text-info); }
+.k-alert--success { --_accent: var(--k-text-success); }
+.k-alert--warning { --_accent: var(--k-text-warning); }
+.k-alert--error { --_accent: var(--k-text-error); }
+
+.k-alert--tinted {
+  --_bg: var(--k-alert-bg, color-mix(in srgb, var(--_accent) 8%, var(--k-bg-primary)));
+  border-color: color-mix(in srgb, var(--_accent) 32%, transparent);
+}
+
+/* آیکون شاخص با دو حلقهٔ هم‌مرکز (featured icon) */
+.k-alert__icon {
+  position: relative;
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: 1.25rem;
+  block-size: 1.25rem;
+  margin: 0.375rem;
+  color: var(--_accent);
+}
+.k-alert__icon::before,
+.k-alert__icon::after {
+  content: "";
+  position: absolute;
+  border: 2px solid var(--_accent);
+  border-radius: var(--k-radius-full);
+}
+.k-alert__icon::before { inset: -0.3125rem; opacity: 0.3; }
+.k-alert__icon::after { inset: -0.625rem; opacity: 0.1; }
+.k-alert__icon svg { inline-size: 100%; block-size: 100%; }
+
+.k-alert__content {
+  flex: 1;
+  display: grid;
+  gap: var(--k-space-1);
+  min-inline-size: 0;
+  padding-block-start: 0.125rem;
+}
+
+.k-alert__title {
+  margin: 0;
+  color: var(--k-text-secondary);
+  font-weight: var(--k-weight-semibold);
+}
+
+.k-alert__description { margin: 0; }
+
+.k-alert__actions {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--k-space-3);
+  margin-block-start: var(--k-space-2);
+}
+
+.k-alert__close { margin-block: -0.375rem; margin-inline-end: -0.375rem; }
+
+@media (forced-colors: active) {
+  .k-alert { border-color: CanvasText; }
+}

package/dist/components/avatar.css

@@ -0,0 +1,77 @@
+/* آواتار
+ * <span class="k-avatar k-avatar--lg">
+ *   <img class="k-avatar__image" src="…" alt="سارا احمدی">   ← یا حروف اول: <span aria-hidden="true">س‌ا</span> + role="img" aria-label روی والد
+ *   <span class="k-avatar__status k-avatar__status--online"></span>
+ * </span>
+ * اندازه‌ها: xs | sm | md | lg | xl | 2xl — شکل: k-avatar--square — رنگ: k-avatar--brand
+ * گروه: <div class="k-avatar-group">…</div>
+ *
+ * متغیرها: --k-avatar-size  --k-avatar-radius  --k-avatar-bg  --k-avatar-fg
+ */
+.k-avatar {
+  --_s: var(--k-avatar-size, 2.5rem);
+
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: var(--_s);
+  block-size: var(--_s);
+  border-radius: var(--k-avatar-radius, var(--k-radius-full));
+  background: var(--k-avatar-bg, var(--k-bg-tertiary));
+  color: var(--k-avatar-fg, var(--k-text-secondary));
+  font-size: calc(var(--_s) * 0.36);
+  font-weight: var(--k-weight-semibold);
+  line-height: 1;
+  user-select: none;
+  /* حاشیهٔ داخلی ظریف مثل Untitled UI */
+  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--k-text-primary) 8%, transparent);
+}
+
+.k-avatar__image {
+  position: absolute;
+  inset: 0;
+  inline-size: 100%;
+  block-size: 100%;
+  object-fit: cover;
+  border-radius: inherit;
+}
+
+.k-avatar--xs { --_s: var(--k-avatar-size, 1.5rem); }
+.k-avatar--sm { --_s: var(--k-avatar-size, 2rem); }
+.k-avatar--lg { --_s: var(--k-avatar-size, 3rem); }
+.k-avatar--xl { --_s: var(--k-avatar-size, 3.5rem); }
+.k-avatar--2xl { --_s: var(--k-avatar-size, 4rem); }
+
+.k-avatar--square { border-radius: var(--k-avatar-radius, var(--k-radius-md)); }
+.k-avatar--brand {
+  background: var(--k-avatar-bg, var(--k-bg-brand-subtle));
+  color: var(--k-avatar-fg, var(--k-text-brand));
+}
+
+.k-avatar__status {
+  position: absolute;
+  inset-block-end: 0;
+  inset-inline-end: 0;
+  inline-size: max(0.5rem, calc(var(--_s) * 0.28));
+  block-size: max(0.5rem, calc(var(--_s) * 0.28));
+  border: 2px solid var(--k-bg-primary);
+  border-radius: var(--k-radius-full);
+  background: var(--k-border-input);
+}
+.k-avatar__status--online { background: var(--k-text-success); }
+.k-avatar__status--busy { background: var(--k-text-error); }
+.k-avatar__status--away { background: var(--k-text-warning); }
+
+.k-avatar-group { display: inline-flex; align-items: center; }
+.k-avatar-group > .k-avatar {
+  box-shadow: 0 0 0 2px var(--k-bg-primary);
+}
+.k-avatar-group > .k-avatar + .k-avatar {
+  margin-inline-start: calc(var(--_s) * -0.28);
+}
+
+@media (forced-colors: active) {
+  .k-avatar { border: 1px solid CanvasText; }
+  .k-avatar__status { background: CanvasText; }
+}

package/dist/components/badge.css

@@ -0,0 +1,48 @@
+/* نشان (Badge)
+ * <span class="k-badge k-badge--success"><span class="k-badge__dot" aria-hidden="true"></span>فعال</span>
+ * رنگ‌ها: neutral | brand | error | warning | success | info — اندازه‌ها: sm | md | lg
+ * شکل: پیش‌فرض گرد (pill)؛ k-badge--square برای گوشهٔ کم
+ *
+ * متغیرها: --k-badge-radius  --k-badge-font-weight
+ */
+.k-badge {
+  --_bg: var(--k-bg-tertiary);
+  --_fg: var(--k-text-secondary);
+  --_px: 0.625rem;
+
+  display: inline-flex;
+  align-items: center;
+  gap: var(--k-space-1);
+  padding-block: 0.125rem;
+  padding-inline: var(--_px);
+  border: 1px solid color-mix(in srgb, var(--_fg) 24%, transparent);
+  border-radius: var(--k-badge-radius, var(--k-radius-full));
+  background: var(--_bg);
+  color: var(--_fg);
+  font-size: var(--k-text-sm);
+  font-weight: var(--k-badge-font-weight, var(--k-weight-medium));
+  line-height: 1.5;
+  white-space: nowrap;
+}
+
+.k-badge--brand { --_bg: var(--k-bg-brand-subtle); --_fg: var(--k-text-brand); }
+.k-badge--error { --_bg: var(--k-bg-error-subtle); --_fg: var(--k-text-error); }
+.k-badge--warning { --_bg: var(--k-bg-warning-subtle); --_fg: var(--k-text-warning); }
+.k-badge--success { --_bg: var(--k-bg-success-subtle); --_fg: var(--k-text-success); }
+.k-badge--info { --_bg: var(--k-bg-info-subtle); --_fg: var(--k-text-info); }
+
+.k-badge--sm { --_px: 0.5rem; font-size: var(--k-text-xs); }
+.k-badge--lg { --_px: 0.75rem; padding-block: 0.25rem; }
+.k-badge--square { border-radius: var(--k-badge-radius, var(--k-radius-sm)); }
+
+.k-badge__dot {
+  inline-size: 0.375rem;
+  block-size: 0.375rem;
+  border-radius: var(--k-radius-full);
+  background: currentColor;
+}
+.k-badge svg { inline-size: 0.875em; block-size: 0.875em; }
+
+@media (forced-colors: active) {
+  .k-badge { border-color: CanvasText; }
+}

package/dist/components/button.css

@@ -0,0 +1,169 @@
+/* دکمه — به سبک Untitled UI: سایهٔ اسکئومورفیک و حلقهٔ فوکوس نرم
+ * <button class="k-btn k-btn--primary k-btn--md">ثبت</button>
+ * گونه‌ها: primary | secondary | tertiary | link | danger | danger-secondary
+ * اندازه‌ها: sm | md | lg | xl — حالت‌ها: disabled، aria-disabled، aria-busy="true"
+ *
+ * متغیرهای قابل‌بازنویسی (روی :root یا هر والدی):
+ *   --k-btn-height-{sm,md,lg,xl}  --k-btn-padding-{sm,md,lg,xl}
+ *   --k-btn-radius  --k-btn-font-weight  --k-btn-gap
+ */
+.k-btn {
+  --_h: var(--k-btn-height-md, calc(2.5rem * var(--k-density)));
+  --_px: var(--k-btn-padding-md, calc(0.875rem * var(--k-density)));
+  --_fs: var(--k-text-sm);
+  --_bg: var(--k-bg-primary);
+  --_bg-hover: var(--k-bg-hover);
+  --_fg: var(--k-text-secondary);
+  --_fg-hover: var(--k-text-primary);
+  --_border: var(--k-border-primary);
+  --_shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
+  --_ring: var(--k-ring-brand);
+
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--k-btn-gap, var(--k-space-1_5));
+  block-size: var(--_h);
+  /* حداقل ناحیهٔ لمس WCAG 2.5.8 */
+  min-block-size: 24px;
+  min-inline-size: 24px;
+  padding-inline: var(--_px);
+  border: 1px solid var(--_border);
+  border-radius: var(--k-btn-radius, var(--k-radius-md));
+  background: var(--_bg);
+  color: var(--_fg);
+  box-shadow: var(--_shadow);
+  font: inherit;
+  font-size: var(--_fs);
+  font-weight: var(--k-btn-font-weight, var(--k-weight-semibold));
+  line-height: 1;
+  white-space: nowrap;
+  text-decoration: none;
+  cursor: pointer;
+  user-select: none;
+  transition:
+    background-color var(--k-duration-fast) var(--k-ease-standard),
+    color var(--k-duration-fast) var(--k-ease-standard),
+    box-shadow var(--k-duration-fast) var(--k-ease-standard);
+}
+
+.k-btn:hover { background: var(--_bg-hover); color: var(--_fg-hover); }
+
+.k-btn:focus-visible {
+  /* outline شفاف در حالت forced-colors ویندوز قابل‌مشاهده می‌شود */
+  outline: 2px solid transparent;
+  box-shadow: var(--_shadow), var(--_ring);
+}
+
+.k-btn:disabled,
+.k-btn[aria-disabled="true"]:not([aria-busy="true"]) {
+  --_bg: var(--k-bg-secondary);
+  --_fg: var(--k-text-quaternary);
+  --_border: var(--k-border-secondary);
+  --_shadow: var(--k-shadow-xs);
+  cursor: not-allowed;
+}
+.k-btn[aria-disabled="true"]:hover { background: var(--_bg); color: var(--_fg); }
+
+
+/* گونه‌ها */
+.k-btn--primary {
+  --_bg: var(--k-bg-brand);
+  --_bg-hover: var(--k-bg-brand-hover);
+  --_fg: var(--k-text-on-brand);
+  --_fg-hover: var(--k-text-on-brand);
+  --_border: transparent;
+  --_shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
+}
+/* حاشیهٔ داخلی سفید که به پایین محو می‌شود (Untitled UI) */
+.k-btn:is(.k-btn--primary, .k-btn--danger)::before {
+  content: "";
+  position: absolute;
+  inset: 1px;
+  border: 1px solid rgb(255 255 255 / 0.12);
+  border-radius: inherit;
+  mask: linear-gradient(to bottom, #000, transparent);
+  pointer-events: none;
+}
+.k-btn:is(.k-btn--primary, .k-btn--danger):is(:disabled, [aria-disabled="true"]:not([aria-busy="true"]))::before { display: none; }
+.k-btn--tertiary {
+  --_bg: transparent;
+  --_border: transparent;
+  --_shadow: none;
+}
+.k-btn--link {
+  --_bg: transparent;
+  --_bg-hover: transparent;
+  --_fg: var(--k-text-brand);
+  --_fg-hover: var(--k-text-brand);
+  --_border: transparent;
+  --_shadow: none;
+  --_h: auto;
+  --_px: 0;
+}
+.k-btn--link:hover { text-decoration: underline; text-underline-offset: 0.3em; }
+.k-btn--danger {
+  --_bg: var(--k-bg-error);
+  --_bg-hover: var(--k-bg-error-hover);
+  --_fg: var(--k-text-on-brand);
+  --_fg-hover: var(--k-text-on-brand);
+  --_border: transparent;
+  --_shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
+  --_ring: var(--k-ring-error);
+}
+.k-btn--danger-secondary {
+  --_fg: var(--k-text-error);
+  --_fg-hover: var(--k-text-error);
+  --_bg-hover: var(--k-bg-error-subtle);
+  --_ring: var(--k-ring-error);
+}
+
+/* اندازه‌ها */
+.k-btn--sm {
+  --_h: var(--k-btn-height-sm, calc(2.25rem * var(--k-density)));
+  --_px: var(--k-btn-padding-sm, calc(0.75rem * var(--k-density)));
+}
+.k-btn--lg {
+  --_h: var(--k-btn-height-lg, calc(2.75rem * var(--k-density)));
+  --_px: var(--k-btn-padding-lg, calc(1.125rem * var(--k-density)));
+  --_fs: var(--k-text-md);
+}
+.k-btn--xl {
+  --_h: var(--k-btn-height-xl, calc(3rem * var(--k-density)));
+  --_px: var(--k-btn-padding-xl, calc(1.25rem * var(--k-density)));
+  --_fs: var(--k-text-md);
+}
+.k-btn--icon { padding-inline: 0; inline-size: var(--_h); }
+.k-btn--block { display: flex; inline-size: 100%; }
+
+.k-btn svg { inline-size: 1.25em; block-size: 1.25em; flex-shrink: 0; }
+
+/* آیکون‌های جهت‌دار (فلش و…) در RTL آینه می‌شوند */
+[dir="rtl"] .k-btn [data-k-mirror] { transform: scaleX(-1); }
+
+/* در حال بارگذاری */
+.k-btn[aria-busy="true"] {
+  color: transparent;
+  cursor: progress;
+}
+.k-btn[aria-busy="true"]::after {
+  content: "";
+  position: absolute;
+  inline-size: 1.1em;
+  block-size: 1.1em;
+  border: 2px solid var(--_fg);
+  border-block-start-color: transparent;
+  border-radius: var(--k-radius-full);
+  animation: k-spin 0.7s linear infinite;
+}
+
+@keyframes k-spin { to { rotate: 360deg; } }
+
+/* حالت کنتراست بالای ویندوز */
+@media (forced-colors: active) {
+  .k-btn { border-color: ButtonText; }
+  .k-btn--primary, .k-btn--danger { border-color: ButtonText; }
+  .k-btn:disabled, .k-btn[aria-disabled="true"] { border-color: GrayText; color: GrayText; }
+  .k-btn[aria-busy="true"]::after { border-color: ButtonText; border-block-start-color: transparent; }
+}

package/dist/components/calendar.css

@@ -0,0 +1,143 @@
+/* تقویم شمسی و انتخاب تاریخ
+ * ساختار را کامپوننت React می‌سازد (Calendar و DatePicker)؛ این استایل برای هر پیاده‌سازی دیگری هم قابل‌استفاده است.
+ *
+ * متغیرها: --k-calendar-day-size  --k-calendar-radius  --k-calendar-bg  --k-datepicker-width
+ */
+.k-calendar {
+  --_day: var(--k-calendar-day-size, calc(2.5rem * var(--k-density)));
+
+  display: grid;
+  gap: var(--k-space-2);
+  inline-size: max-content;
+  max-inline-size: 100%;
+  color: var(--k-text-primary);
+  font-size: var(--k-text-sm);
+}
+
+.k-calendar__header {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: var(--k-space-2);
+}
+
+.k-calendar__selects { display: flex; gap: var(--k-space-1); }
+
+.k-calendar__select {
+  appearance: none;
+  min-block-size: 2.25rem;
+  padding-block: 0;
+  padding-inline: var(--k-space-3) var(--k-space-6);
+  border: 1px solid transparent;
+  border-radius: var(--k-radius-md);
+  background:
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23687491' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") no-repeat,
+    transparent;
+  background-position: left var(--k-space-1_5) center;
+  background-size: 1rem;
+  color: var(--k-text-primary);
+  font: inherit;
+  font-weight: var(--k-weight-semibold);
+  cursor: pointer;
+}
+[dir="ltr"] .k-calendar__select { background-position: right var(--k-space-1_5) center; }
+.k-calendar__select:hover { background-color: var(--k-bg-hover); }
+.k-calendar__select:focus-visible { outline: 2px solid transparent; border-color: var(--k-border-brand); box-shadow: var(--k-ring-brand); }
+.k-calendar__select option { background: var(--k-bg-elevated); color: var(--k-text-primary); }
+
+.k-calendar__grid { border-collapse: collapse; margin-inline: auto; }
+.k-calendar__grid th {
+  block-size: 2rem;
+  padding: 0;
+  color: var(--k-text-tertiary);
+  font-size: var(--k-text-xs);
+  font-weight: var(--k-weight-medium);
+  text-align: center;
+}
+.k-calendar__grid td { padding: 1px; text-align: center; }
+
+.k-calendar__day {
+  position: relative;
+  display: inline-grid;
+  place-items: center;
+  inline-size: var(--_day);
+  block-size: var(--_day);
+  padding: 0;
+  border: 0;
+  border-radius: var(--k-calendar-radius, var(--k-radius-full));
+  background: transparent;
+  color: var(--k-text-secondary);
+  font: inherit;
+  font-variant-numeric: tabular-nums;
+  cursor: pointer;
+  transition: background-color var(--k-duration-fast) var(--k-ease-standard);
+}
+.k-calendar__day:hover { background: var(--k-bg-hover); color: var(--k-text-primary); }
+.k-calendar__day:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
+
+/* امروز: نقطهٔ زیر عدد */
+.k-calendar__day[aria-current="date"] { color: var(--k-text-brand); font-weight: var(--k-weight-bold); }
+.k-calendar__day[aria-current="date"]::after {
+  content: "";
+  position: absolute;
+  inset-block-end: 0.3rem;
+  inline-size: 0.25rem;
+  block-size: 0.25rem;
+  border-radius: 50%;
+  background: currentColor;
+}
+
+[aria-selected="true"] > .k-calendar__day {
+  background: var(--k-bg-brand);
+  color: var(--k-text-on-brand);
+  font-weight: var(--k-weight-semibold);
+  box-shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
+}
+[aria-selected="true"] > .k-calendar__day:focus-visible { box-shadow: var(--k-ring-brand); }
+
+.k-calendar__day[aria-disabled="true"] {
+  color: var(--k-text-quaternary);
+  text-decoration: line-through;
+  cursor: not-allowed;
+}
+.k-calendar__day[aria-disabled="true"]:hover { background: transparent; }
+
+.k-calendar__footer {
+  display: flex;
+  justify-content: center;
+  padding-block-start: var(--k-space-2);
+  border-block-start: 1px solid var(--k-border-secondary);
+}
+
+/* انتخاب تاریخ: فیلد + تقویم شناور */
+.k-datepicker { position: relative; }
+.k-datepicker .k-input { padding-inline-end: var(--k-space-1); }
+.k-datepicker__toggle { margin-block: -0.25rem; }
+
+.k-datepicker__popover {
+  position: absolute;
+  inset-inline-end: 0;
+  z-index: var(--k-z-dropdown);
+  inline-size: var(--k-datepicker-width, max-content);
+  max-inline-size: calc(100vw - 2rem);
+  padding: var(--k-space-4);
+  border: 1px solid var(--k-border-secondary);
+  border-radius: var(--k-radius-xl);
+  background: var(--k-calendar-bg, var(--k-bg-elevated));
+  box-shadow: var(--k-shadow-xl);
+  animation: k-pop-in var(--k-duration-fast) var(--k-ease-standard);
+}
+@keyframes k-pop-in { from { opacity: 0; translate: 0 -4px; } }
+
+/* متن کوچک داخل فیلد، مثل نام بانک */
+.k-input__meta {
+  color: var(--k-text-tertiary);
+  font-size: var(--k-text-sm);
+  white-space: nowrap;
+}
+
+@media (forced-colors: active) {
+  [aria-selected="true"] > .k-calendar__day { forced-color-adjust: none; background: Highlight; color: HighlightText; }
+  .k-calendar__day[aria-current="date"] { outline: 1px solid CanvasText; }
+  .k-datepicker__popover { border-color: CanvasText; }
+}