@kashi-ui/css 0.0.0-stage → 0.2.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/card.css

@@ -0,0 +1,77 @@
+/* کارت
+ * <article class="k-card">
+ *   <header class="k-card__header">
+ *     <h3 class="k-card__title">عنوان</h3>
+ *     <p class="k-card__description">توضیح</p>
+ *   </header>
+ *   <div class="k-card__body">...</div>
+ *   <footer class="k-card__footer">...دکمه‌ها</footer>
+ * </article>
+ * گونه‌ها: k-card--flat (بدون سایه) | k-card--interactive (برای کارت قابل‌کلیک، همراه با <a> یا <button>)
+ *
+ * متغیرها: --k-card-padding  --k-card-radius  --k-card-bg  --k-card-border  --k-card-shadow
+ */
+.k-card {
+  --_p: var(--k-card-padding, calc(1.5rem * var(--k-density)));
+
+  display: flex;
+  flex-direction: column;
+  border: 1px solid var(--k-card-border, var(--k-border-secondary));
+  border-radius: var(--k-card-radius, var(--k-radius-xl));
+  background: var(--k-card-bg, var(--k-bg-elevated));
+  color: var(--k-text-primary);
+  box-shadow: var(--k-card-shadow, var(--k-shadow-xs));
+  overflow: clip;
+}
+
+.k-card__header,
+.k-card__body,
+.k-card__footer { padding: var(--_p); }
+
+.k-card__header + .k-card__body { padding-block-start: 0; }
+
+.k-card__header { display: grid; gap: var(--k-space-1); }
+
+.k-card__title {
+  margin: 0;
+  font-size: var(--k-text-lg);
+  font-weight: var(--k-weight-semibold);
+  line-height: var(--k-leading-tight);
+}
+
+.k-card__description {
+  margin: 0;
+  color: var(--k-text-tertiary);
+  font-size: var(--k-text-sm);
+}
+
+.k-card__footer {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--k-space-3);
+  justify-content: flex-end;
+  padding-block: calc(var(--_p) * 0.66);
+  border-block-start: 1px solid var(--k-border-secondary);
+  margin-block-start: auto;
+}
+
+.k-card__media { display: block; inline-size: 100%; object-fit: cover; }
+
+.k-card--flat { box-shadow: none; }
+
+.k-card--interactive {
+  position: relative;
+  transition:
+    border-color var(--k-duration-fast) var(--k-ease-standard),
+    box-shadow var(--k-duration-normal) var(--k-ease-standard);
+}
+.k-card--interactive:hover { border-color: var(--k-border-primary); box-shadow: var(--k-shadow-md); }
+.k-card--interactive:has(:focus-visible) { box-shadow: var(--k-shadow-md), var(--k-ring-brand); }
+/* لینک اصلی کل کارت را قابل‌کلیک می‌کند ولی فقط یک توقف Tab دارد */
+.k-card--interactive :is(a, button).k-card__link::after { content: ""; position: absolute; inset: 0; }
+.k-card--interactive .k-card__link:focus-visible { outline: none; }
+
+@media (forced-colors: active) {
+  .k-card { border-color: CanvasText; }
+  .k-card--interactive:has(:focus-visible) { outline: 2px solid Highlight; }
+}

package/dist/components/checkbox.css

@@ -0,0 +1,93 @@
+/* چک‌باکس — روی <input type="checkbox"> بومی، پس کیبورد و صفحه‌خوان خودکار کار می‌کنند
+ * <label class="k-check">
+ *   <input type="checkbox" class="k-checkbox">
+ *   <span class="k-check__text">
+ *     <span class="k-check__label">مرا به خاطر بسپار</span>
+ *     <span class="k-check__description">توضیح اختیاری</span>
+ *   </span>
+ * </label>
+ * حالت نیمه: input.indeterminate = true — خطا: aria-invalid="true" — اندازه: k-checkbox--lg
+ *
+ * متغیرها: --k-checkbox-size  --k-checkbox-radius
+ */
+.k-checkbox {
+  --_s: var(--k-checkbox-size, 1.125rem);
+  --_border: var(--k-border-input);
+
+  appearance: none;
+  display: inline-grid;
+  place-content: center;
+  flex-shrink: 0;
+  inline-size: var(--_s);
+  block-size: var(--_s);
+  margin: 0;
+  border: 1px solid var(--_border);
+  border-radius: var(--k-checkbox-radius, calc(0.3125rem * var(--k-radius-factor)));
+  background: var(--k-bg-primary);
+  color: var(--k-text-on-brand);
+  cursor: pointer;
+  transition:
+    background-color var(--k-duration-fast) var(--k-ease-standard),
+    border-color var(--k-duration-fast) var(--k-ease-standard),
+    box-shadow var(--k-duration-fast) var(--k-ease-standard);
+}
+
+.k-checkbox::before {
+  content: "";
+  inline-size: calc(var(--_s) * 0.7);
+  block-size: calc(var(--_s) * 0.7);
+  background: currentColor;
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M11.5 3.5 5.5 10 2.5 7'/%3E%3C/svg%3E") center / contain no-repeat;
+  scale: 0;
+  transition: scale var(--k-duration-fast) var(--k-ease-emphasized);
+}
+.k-checkbox:indeterminate::before {
+  mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 14' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M3 7h8'/%3E%3C/svg%3E");
+}
+
+.k-checkbox:hover { --_border: var(--k-border-brand); }
+
+.k-checkbox:is(:checked, :indeterminate) {
+  --_border: var(--k-bg-brand);
+  background: var(--k-bg-brand);
+}
+.k-checkbox:is(:checked, :indeterminate)::before { scale: 1; }
+
+.k-checkbox:focus-visible {
+  outline: 2px solid transparent;
+  box-shadow: var(--k-ring-brand);
+}
+
+.k-checkbox[aria-invalid="true"] { --_border: var(--k-border-error); }
+.k-checkbox[aria-invalid="true"]:focus-visible { box-shadow: var(--k-ring-error); }
+
+.k-checkbox:disabled {
+  --_border: var(--k-border-secondary);
+  background: var(--k-bg-tertiary);
+  color: var(--k-text-quaternary);
+  cursor: not-allowed;
+}
+
+.k-checkbox--lg { --_s: var(--k-checkbox-size, 1.25rem); }
+
+/* ردیف برچسب — مشترک بین چک‌باکس و سوییچ */
+.k-check {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: var(--k-space-2);
+  cursor: pointer;
+  /* ارتفاع خط متن با کنترل هم‌تراز شود */
+  line-height: 1.25rem;
+}
+.k-check > :is(.k-checkbox, .k-switch) { margin-block-start: calc((1.25rem - var(--_h, var(--_s))) / 2); }
+.k-check:has(:disabled) { cursor: not-allowed; }
+.k-check__text { display: grid; gap: 0.125rem; }
+.k-check__label { color: var(--k-text-secondary); font-size: var(--k-text-sm); font-weight: var(--k-weight-medium); }
+.k-check__description { color: var(--k-text-tertiary); font-size: var(--k-text-sm); }
+.k-check:has(:disabled) .k-check__label { color: var(--k-text-quaternary); }
+
+/* حالت کنتراست بالای ویندوز: برگشت به کنترل بومی سیستم */
+@media (forced-colors: active) {
+  .k-checkbox { appearance: auto; }
+  .k-checkbox::before { display: none; }
+}