@kashi-ui/css 0.4.0 → 0.5.0

package/dist/kashi.css

@@ -21,7 +21,7 @@
   --k-firoozeh-300: #4fd8cb;
   --k-firoozeh-400: #22c2b4;
   --k-firoozeh-500: #0fa89b;
-  --k-firoozeh-600: #08877e;
+  --k-firoozeh-600: #0b8077;
   --k-firoozeh-700: #0a6b65;
   --k-firoozeh-800: #0d5551;
   --k-firoozeh-900: #0f4644;
@@ -76,12 +76,15 @@
   --k-shab-200: #d5d9e2;
   --k-shab-300: #b1b9c9;
   --k-shab-400: #8792ab;
+  --k-shab-450: #848fa7;
   --k-shab-500: #687491;
+  --k-shab-550: #5a637a;
   --k-shab-600: #535d78;
   --k-shab-700: #444c62;
   --k-shab-800: #2a2f3d;
   --k-shab-850: #1e222c;
   --k-shab-900: #161921;
+  --k-shab-925: #111319;
   --k-shab-950: #0d0f14;
   --k-shab-1000: #08090c;
   --k-brand-50: var(--k-firoozeh-50);
@@ -162,11 +165,11 @@
   --k-bg-primary: var(--k-shab-1000);
   --k-bg-secondary: var(--k-shab-950);
   --k-bg-tertiary: var(--k-shab-900);
-  --k-bg-elevated: var(--k-shab-900);
+  --k-bg-elevated: var(--k-shab-925);
   --k-bg-hover: rgb(255 255 255 / 0.05);
   --k-bg-active: rgb(255 255 255 / 0.08);
-  --k-bg-brand: var(--k-brand-700);
-  --k-bg-brand-hover: var(--k-brand-800);
+  --k-bg-brand: var(--k-brand-400);
+  --k-bg-brand-hover: var(--k-brand-300);
   --k-bg-brand-subtle: color-mix(in srgb, var(--k-brand-500) 14%, transparent);
   --k-bg-error: var(--k-anar-600);
   --k-bg-error-hover: var(--k-anar-700);
@@ -178,7 +181,8 @@
   --k-text-secondary: var(--k-shab-200);
   --k-text-tertiary: var(--k-shab-400);
   --k-text-quaternary: var(--k-shab-500);
-  --k-text-on-brand: var(--k-shab-0);
+  --k-text-on-brand: var(--k-shab-1000);
+  --k-text-on-error: var(--k-shab-0);
   --k-text-brand: var(--k-brand-300);
   --k-text-error: var(--k-anar-400);
   --k-text-warning: var(--k-zafaran-400);
@@ -187,11 +191,18 @@
   --k-border-primary: var(--k-shab-700);
   --k-border-secondary: var(--k-shab-800);
   --k-border-brand: var(--k-brand-400);
-  --k-border-input: var(--k-shab-500);
+  --k-border-input: var(--k-shab-550);
   --k-border-error: var(--k-anar-400);
   --k-ring-brand: 0 0 0 4px color-mix(in srgb, var(--k-brand-400) 28%, transparent);
   --k-ring-error: 0 0 0 4px rgb(248 59 71 / 0.28);
-  --k-shadow-skeuomorphic: inset 0 0 0 1px rgb(12 14 18 / 0.18), inset 0 -2px 0 rgb(12 14 18 / 0.05);
+  --k-shadow-skeuomorphic: inset 0 0 0 1px rgb(0 0 0 / 0.2), inset 0 -2px 0 rgb(0 0 0 / 0.12);
+  --k-highlight: inset 0 1px 0 rgb(255 255 255 / 0.05);
+  --k-shadow-xs: 0 1px 2px rgb(0 0 0 / 0.4);
+  --k-shadow-sm: 0 1px 3px rgb(0 0 0 / 0.45), 0 1px 2px -1px rgb(0 0 0 / 0.4);
+  --k-shadow-md: 0 4px 8px -2px rgb(0 0 0 / 0.5), 0 2px 4px -2px rgb(0 0 0 / 0.35);
+  --k-shadow-lg: 0 12px 24px -4px rgb(0 0 0 / 0.55), 0 4px 8px -4px rgb(0 0 0 / 0.35);
+  --k-shadow-xl: 0 20px 32px -6px rgb(0 0 0 / 0.6), 0 8px 12px -6px rgb(0 0 0 / 0.4);
+  --k-shadow-2xl: 0 28px 56px -12px rgb(0 0 0 / 0.7);
 }
 
 [data-theme="light"] {
@@ -202,8 +213,8 @@
   --k-bg-elevated: var(--k-shab-0);
   --k-bg-hover: var(--k-shab-50);
   --k-bg-active: var(--k-shab-100);
-  --k-bg-brand: var(--k-brand-700);
-  --k-bg-brand-hover: var(--k-brand-800);
+  --k-bg-brand: var(--k-brand-600);
+  --k-bg-brand-hover: var(--k-brand-700);
   --k-bg-brand-subtle: var(--k-brand-50);
   --k-bg-error: var(--k-anar-600);
   --k-bg-error-hover: var(--k-anar-700);
@@ -216,6 +227,7 @@
   --k-text-tertiary: var(--k-shab-600);
   --k-text-quaternary: var(--k-shab-500);
   --k-text-on-brand: var(--k-shab-0);
+  --k-text-on-error: var(--k-shab-0);
   --k-text-brand: var(--k-brand-700);
   --k-text-error: var(--k-anar-700);
   --k-text-warning: var(--k-zafaran-700);
@@ -224,11 +236,18 @@
   --k-border-primary: var(--k-shab-300);
   --k-border-secondary: var(--k-shab-200);
   --k-border-brand: var(--k-brand-600);
-  --k-border-input: var(--k-shab-500);
+  --k-border-input: var(--k-shab-450);
   --k-border-error: var(--k-anar-500);
   --k-ring-brand: 0 0 0 4px color-mix(in srgb, var(--k-brand-500) 20%, transparent);
   --k-ring-error: 0 0 0 4px rgb(229 29 42 / 0.2);
   --k-shadow-skeuomorphic: inset 0 0 0 1px rgb(10 13 18 / 0.18), inset 0 -2px 0 rgb(10 13 18 / 0.05);
+  --k-highlight: 0 0 #0000;
+  --k-shadow-xs: 0 1px 2px rgb(10 13 18 / 0.05);
+  --k-shadow-sm: 0 1px 3px rgb(10 13 18 / 0.1), 0 1px 2px -1px rgb(10 13 18 / 0.1);
+  --k-shadow-md: 0 4px 6px -1px rgb(10 13 18 / 0.1), 0 2px 4px -2px rgb(10 13 18 / 0.06);
+  --k-shadow-lg: 0 12px 16px -4px rgb(10 13 18 / 0.08), 0 4px 6px -2px rgb(10 13 18 / 0.03);
+  --k-shadow-xl: 0 20px 24px -4px rgb(10 13 18 / 0.08), 0 8px 8px -4px rgb(10 13 18 / 0.03);
+  --k-shadow-2xl: 0 24px 48px -12px rgb(10 13 18 / 0.18);
 }
 
 }
@@ -250,6 +269,9 @@
   font-size: var(--k-text-md);
   line-height: var(--k-leading-normal);
   -webkit-font-smoothing: antialiased;
+  text-rendering: optimizeLegibility;
+  /* نوار اسکرول هم‌رنگ تم */
+  scrollbar-color: var(--k-border-primary) transparent;
   -moz-osx-font-smoothing: grayscale;
   /* کشیده‌نویسی و اتصال درست حروف فارسی */
   font-feature-settings: "kern", "liga", "calt";
@@ -307,6 +329,9 @@
   }
 }
 
+/* متن پاراگراف‌ها بدون تک‌کلمهٔ تنها در خط آخر */
+:where(p, li, figcaption) { text-wrap: pretty; }
+
 /* ارقام لاتین در کنار متن فارسی: tabular برای جدول‌ها و اعداد */
 .k-tabular { font-variant-numeric: tabular-nums; }
 
@@ -348,7 +373,7 @@
   background: var(--_bg);
   color: var(--k-text-tertiary);
   font-size: var(--k-text-sm);
-  box-shadow: var(--k-shadow-xs);
+  box-shadow: var(--k-shadow-xs), var(--k-highlight);
 }
 
 .k-alert--brand { --_accent: var(--k-text-brand); }
@@ -508,7 +533,7 @@
   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: 1px solid color-mix(in srgb, var(--_fg) 20%, transparent);
   border-radius: var(--k-badge-radius, var(--k-radius-full));
   background: var(--_bg);
   color: var(--_fg);
@@ -553,8 +578,8 @@
   --_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);
+  --_bg: var(--k-btn-secondary-bg, var(--k-bg-elevated));
+  --_bg-hover: color-mix(in srgb, var(--_bg), var(--k-text-primary) 5%);
   --_fg: var(--k-text-secondary);
   --_fg-hover: var(--k-text-primary);
   --_border: var(--k-border-primary);
@@ -623,7 +648,7 @@
   content: "";
   position: absolute;
   inset: 1px;
-  border: 1px solid rgb(255 255 255 / 0.12);
+  border: 1px solid rgb(255 255 255 / var(--k-btn-highlight, 0.14));
   border-radius: inherit;
   mask: linear-gradient(to bottom, #000, transparent);
   pointer-events: none;
@@ -631,6 +656,7 @@
 .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;
+  --_bg-hover: var(--k-bg-hover);
   --_border: transparent;
   --_shadow: none;
 }
@@ -648,8 +674,8 @@
 .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);
+  --_fg: var(--k-text-on-error);
+  --_fg-hover: var(--k-text-on-error);
   --_border: transparent;
   --_shadow: var(--k-shadow-xs), var(--k-shadow-skeuomorphic);
   --_ring: var(--k-ring-error);
@@ -657,7 +683,6 @@
 .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);
 }
 
@@ -836,7 +861,7 @@
   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);
+  box-shadow: var(--k-shadow-xl), var(--k-highlight);
   animation: k-pop-in var(--k-duration-fast) var(--k-ease-standard);
 }
 @keyframes k-pop-in { from { opacity: 0; translate: 0 -4px; } }
@@ -898,7 +923,7 @@
   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));
+  box-shadow: var(--k-card-shadow, var(--k-shadow-xs)), var(--k-highlight);
   overflow: clip;
 }
 
@@ -935,7 +960,7 @@
 
 .k-card__media { display: block; inline-size: 100%; object-fit: cover; }
 
-.k-card--flat { box-shadow: none; }
+.k-card--flat { box-shadow: var(--k-highlight); }
 
 .k-card--interactive {
   position: relative;
@@ -943,7 +968,7 @@
     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:hover { border-color: var(--k-border-primary); box-shadow: var(--k-shadow-md), var(--k-highlight); }
 .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; }
@@ -979,8 +1004,9 @@
   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);
+  background: var(--k-bg-elevated);
   color: var(--k-text-on-brand);
+  box-shadow: var(--k-shadow-xs);
   cursor: pointer;
   transition:
     background-color var(--k-duration-fast) var(--k-ease-standard),
@@ -1001,7 +1027,7 @@
   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:hover:not(:disabled) { --_border: var(--k-border-brand); box-shadow: 0 0 0 4px var(--k-bg-hover); }
 
 .k-checkbox:is(:checked, :indeterminate) {
   --_border: var(--k-bg-brand);
@@ -1048,6 +1074,81 @@
   .k-checkbox::before { display: none; }
 }
 
+/* پنجرهٔ گفتگو — روی <dialog> بومی: تلهٔ فوکوس، Esc و غیرفعال شدن پس‌زمینه رایگان
+ * اندازه‌ها: k-dialog--sm | k-dialog--md (پیش‌فرض) | k-dialog--lg
+ *
+ * متغیرها: --k-dialog-width  --k-dialog-radius  --k-dialog-padding
+ */
+.k-dialog {
+  --_p: var(--k-dialog-padding, var(--k-space-6));
+
+  inline-size: min(var(--k-dialog-width, 30rem), calc(100vw - 2rem));
+  max-block-size: calc(100dvh - 2rem);
+  margin: auto;
+  padding: 0;
+  border: 1px solid var(--k-border-secondary);
+  border-radius: var(--k-dialog-radius, var(--k-radius-2xl));
+  background: var(--k-bg-elevated);
+  color: var(--k-text-primary);
+  box-shadow: var(--k-shadow-2xl), var(--k-highlight);
+  overflow: auto;
+}
+.k-dialog--sm { --k-dialog-width: 24rem; }
+.k-dialog--lg { --k-dialog-width: 42rem; }
+
+.k-dialog::backdrop {
+  background: rgb(8 9 12 / 0.6);
+  backdrop-filter: blur(4px);
+}
+.k-dialog[open] { animation: k-dialog-in var(--k-duration-normal) var(--k-ease-emphasized); }
+.k-dialog[open]::backdrop { animation: k-fade-in var(--k-duration-normal) var(--k-ease-standard); }
+@keyframes k-dialog-in { from { opacity: 0; scale: 0.96; translate: 0 8px; } }
+@keyframes k-fade-in { from { opacity: 0; } }
+
+.k-dialog__header {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--k-space-4);
+  padding: var(--_p) var(--_p) 0;
+}
+.k-dialog__icon {
+  display: grid;
+  place-items: center;
+  flex-shrink: 0;
+  inline-size: 3rem;
+  block-size: 3rem;
+  border-radius: 50%;
+  background: var(--k-bg-brand-subtle);
+  color: var(--k-text-brand);
+  box-shadow: 0 0 0 8px color-mix(in srgb, var(--k-bg-brand-subtle) 50%, transparent);
+}
+.k-dialog__icon svg { inline-size: 1.5rem; block-size: 1.5rem; }
+.k-dialog--danger .k-dialog__icon { background: var(--k-bg-error-subtle); color: var(--k-text-error); box-shadow: 0 0 0 8px color-mix(in srgb, var(--k-bg-error-subtle) 50%, transparent); }
+.k-dialog__heading { flex: 1; display: grid; gap: var(--k-space-1); padding-block-start: var(--k-space-1); }
+.k-dialog__title { margin: 0; font-size: var(--k-text-lg); font-weight: var(--k-weight-semibold); line-height: var(--k-leading-tight); }
+.k-dialog__description { margin: 0; color: var(--k-text-tertiary); font-size: var(--k-text-sm); line-height: var(--k-leading-normal); }
+.k-dialog__close { margin-block: -0.25rem; margin-inline-end: -0.5rem; }
+.k-dialog__body { padding: var(--k-space-5) var(--_p) 0; }
+.k-dialog__footer {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: flex-end;
+  gap: var(--k-space-3);
+  padding: var(--k-space-6) var(--_p) var(--_p);
+}
+.k-dialog__footer--block > * { flex: 1; }
+
+/* قفل اسکرول صفحه هنگام باز بودن */
+html:has(.k-dialog[open]) { overflow: hidden; }
+
+@media (max-width: 30rem) {
+  .k-dialog__footer { flex-direction: column-reverse; }
+  .k-dialog__footer > * { inline-size: 100%; }
+}
+@media (forced-colors: active) {
+  .k-dialog { border-color: CanvasText; }
+}
+
 /* فیلد: برچسب + کنترل + راهنما/خطا — مشترک بین Input، Checkbox و Switch
  * <div class="k-field">
  *   <label class="k-label" for="email">ایمیل <span class="k-label__required" aria-hidden="true">*</span></label>
@@ -1103,11 +1204,16 @@
   color: var(--k-text-primary);
   box-shadow: var(--k-shadow-xs);
   cursor: text;
+  font-size: var(--k-text-md);
   transition:
     border-color var(--k-duration-fast) var(--k-ease-standard),
     box-shadow var(--k-duration-fast) var(--k-ease-standard);
 }
 
+.k-input:hover:not(:focus-within, :has(:disabled, [aria-invalid="true"])) {
+  --_border: var(--k-input-border-hover, var(--k-text-quaternary));
+}
+
 .k-input:focus-within {
   --_border: var(--k-border-brand);
   box-shadow: var(--k-shadow-xs), var(--_ring);
@@ -1139,6 +1245,17 @@
   font: inherit;
   font-size: var(--k-text-md);
 }
+/* ارقام هم‌عرض تا عدد هنگام تایپ جابه‌جا نشود */
+.k-input__control:is([inputmode="numeric"], [inputmode="tel"], [inputmode="decimal"]) {
+  font-variant-numeric: tabular-nums;
+  letter-spacing: 0.02em;
+}
+
+/* iOS هنگام فوکوس روی فیلدی با متن کوچک‌تر از ۱۶ پیکسل کل صفحه را بزرگ می‌کند */
+@supports (-webkit-touch-callout: none) {
+  .k-input__control { font-size: max(16px, 1em); }
+}
+
 .k-input__control::placeholder { color: var(--k-text-tertiary); opacity: 1; }
 .k-input__control:disabled { color: var(--k-text-quaternary); cursor: not-allowed; }
 
@@ -1173,7 +1290,150 @@
 
 @media (forced-colors: active) {
   .k-input { border-color: FieldText; }
-  .k-input:focus-within { outline-color: Highlight; }
+  .k-input:hover:not(:focus-within, :has(:disabled, [aria-invalid="true"])) {
+  --_border: var(--k-input-border-hover, var(--k-text-quaternary));
+}
+
+.k-input:focus-within { outline-color: Highlight; }
+}
+
+/* رادیو — روی <input type="radio"> بومی؛ برای گروه از <fieldset class="k-radio-group"> استفاده کنید
+ * <fieldset class="k-radio-group">
+ *   <legend class="k-label">روش ارسال</legend>
+ *   <label class="k-check"><input type="radio" name="ship" class="k-radio"><span class="k-check__text">…</span></label>
+ * </fieldset>
+ * کارت‌های قابل‌انتخاب: k-radio-group--cards
+ *
+ * متغیرها: --k-radio-size
+ */
+.k-radio {
+  --_s: var(--k-radio-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: 50%;
+  background: var(--k-bg-elevated);
+  box-shadow: var(--k-shadow-xs);
+  cursor: pointer;
+  transition: border-color var(--k-duration-fast), background-color var(--k-duration-fast), box-shadow var(--k-duration-fast);
+}
+.k-radio::before {
+  content: "";
+  inline-size: calc(var(--_s) * 0.4);
+  block-size: calc(var(--_s) * 0.4);
+  border-radius: 50%;
+  background: var(--k-text-on-brand);
+  scale: 0;
+  transition: scale var(--k-duration-fast) var(--k-ease-emphasized);
+}
+.k-radio:hover:not(:disabled) { --_border: var(--k-border-brand); box-shadow: 0 0 0 4px var(--k-bg-hover); }
+.k-radio:checked { --_border: var(--k-bg-brand); background: var(--k-bg-brand); }
+.k-radio:checked::before { scale: 1; }
+.k-radio:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
+.k-radio[aria-invalid="true"] { --_border: var(--k-border-error); }
+.k-radio:disabled { --_border: var(--k-border-secondary); background: var(--k-bg-tertiary); cursor: not-allowed; }
+.k-radio:disabled::before { background: var(--k-text-quaternary); }
+
+.k-check > .k-radio { margin-block-start: calc((1.25rem - var(--_s)) / 2); }
+
+.k-radio-group {
+  display: grid;
+  gap: var(--k-space-3);
+  min-inline-size: 0;
+  margin: 0;
+  padding: 0;
+  border: 0;
+}
+.k-radio-group > legend { padding: 0; margin-block-end: var(--k-space-3); }
+.k-radio-group--inline { display: flex; flex-wrap: wrap; gap: var(--k-space-3) var(--k-space-6); }
+
+/* کارت‌های قابل‌انتخاب (مثل انتخاب پلن یا روش ارسال) */
+.k-radio-group--cards .k-check {
+  display: flex;
+  padding: var(--k-space-4);
+  border: 1px solid var(--k-border-secondary);
+  border-radius: var(--k-radius-lg);
+  background: var(--k-bg-elevated);
+  box-shadow: var(--k-shadow-xs), var(--k-highlight);
+  transition: border-color var(--k-duration-fast), box-shadow var(--k-duration-fast);
+}
+.k-radio-group--cards .k-check:hover { border-color: var(--k-border-primary); }
+.k-radio-group--cards .k-check:has(:checked) {
+  border-color: var(--k-border-brand);
+  box-shadow: 0 0 0 1px var(--k-border-brand), var(--k-shadow-xs);
+}
+.k-radio-group--cards .k-check:has(:focus-visible) { box-shadow: var(--k-ring-brand); }
+.k-radio-group--cards .k-check:has(:focus-visible) .k-radio { box-shadow: none; }
+.k-radio-group--cards .k-check__text { flex: 1; }
+
+@media (forced-colors: active) {
+  .k-radio { appearance: auto; }
+  .k-radio::before { display: none; }
+  .k-radio-group--cards .k-check:has(:checked) { outline: 2px solid Highlight; }
+}
+
+/* انتخاب از فهرست — <select> بومی با ظاهر کاشی (دسترس‌پذیر و سازگار با گوشی)
+ * <div class="k-select"><select class="k-select__control">…</select></div>
+ * اندازه‌ها: k-select--sm | k-select--lg — خطا: aria-invalid="true"
+ */
+.k-select {
+  --_h: var(--k-input-height-md, calc(2.75rem * var(--k-density)));
+  position: relative;
+  display: flex;
+}
+.k-select--sm { --_h: var(--k-input-height-sm, calc(2.5rem * var(--k-density))); }
+.k-select--lg { --_h: var(--k-input-height-lg, calc(3rem * var(--k-density))); }
+
+.k-select__control {
+  appearance: none;
+  flex: 1;
+  min-inline-size: 0;
+  block-size: var(--_h);
+  padding-inline: calc(0.875rem * var(--k-density)) 2.5rem;
+  border: 1px solid var(--k-input-border, var(--k-border-input));
+  border-radius: var(--k-input-radius, var(--k-radius-md));
+  background: var(--k-input-bg, var(--k-bg-primary));
+  color: var(--k-text-primary);
+  box-shadow: var(--k-shadow-xs);
+  font: inherit;
+  font-size: var(--k-text-md);
+  cursor: pointer;
+  transition: border-color var(--k-duration-fast), box-shadow var(--k-duration-fast);
+}
+.k-select__control:hover:not(:disabled, :focus) { border-color: var(--k-text-quaternary); }
+.k-select__control:focus-visible { outline: 2px solid transparent; border-color: var(--k-border-brand); box-shadow: var(--k-shadow-xs), var(--k-ring-brand); }
+.k-select__control[aria-invalid="true"] { border-color: var(--k-border-error); }
+.k-select__control[aria-invalid="true"]:focus-visible { box-shadow: var(--k-ring-error); }
+.k-select__control:disabled { background: var(--k-bg-secondary); border-color: var(--k-border-secondary); color: var(--k-text-quaternary); box-shadow: none; cursor: not-allowed; }
+.k-select__control:has(option[value=""]:checked) { color: var(--k-text-tertiary); }
+.k-select__control option { background: var(--k-bg-elevated); color: var(--k-text-primary); }
+
+/* فلش در انتهای فیلد */
+.k-select::after {
+  content: "";
+  position: absolute;
+  inset-block: 0;
+  inset-inline-end: 0.875rem;
+  inline-size: 1.125rem;
+  margin-block: auto;
+  block-size: 1.125rem;
+  background: var(--k-text-tertiary);
+  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='black' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 8 4 4 4-4'/%3E%3C/svg%3E") center / contain no-repeat;
+  pointer-events: none;
+}
+
+@supports (-webkit-touch-callout: none) {
+  .k-select__control { font-size: max(16px, 1em); }
+}
+@media (forced-colors: active) {
+  .k-select::after { background: CanvasText; }
 }
 
 /* سوییچ — روی <input type="checkbox" role="switch"> بومی
@@ -1204,6 +1464,7 @@
   border-radius: var(--k-radius-full);
   background: var(--_track);
   cursor: pointer;
+  box-shadow: inset 0 1px 2px rgb(0 0 0 / 0.12);
   transition:
     background-color var(--k-duration-normal) var(--k-ease-standard),
     box-shadow var(--k-duration-fast) var(--k-ease-standard);
@@ -1215,7 +1476,7 @@
   block-size: calc(var(--_h) - var(--_pad) * 2);
   border-radius: var(--k-radius-full);
   background: var(--k-switch-thumb, #fff);
-  box-shadow: var(--k-shadow-sm);
+  box-shadow: 0 1px 3px rgb(10 13 18 / 0.2), 0 1px 2px rgb(10 13 18 / 0.12);
   transition: margin-inline-start var(--k-duration-normal) var(--k-ease-emphasized);
 }
 
@@ -1246,4 +1507,208 @@
   .k-switch:checked::before { background: HighlightText; }
 }
 
+/* زبانه‌ها (Tabs) — ساختار ARIA را کامپوننت React می‌سازد
+ * گونه‌ها: k-tabs--line (پیش‌فرض) | k-tabs--pill | k-tabs--segmented — تمام‌عرض: k-tabs--block
+ */
+.k-tabs { display: grid; gap: var(--k-space-4); }
+
+.k-tabs__list {
+  position: relative;
+  display: flex;
+  gap: var(--k-space-1);
+  overflow-x: auto;
+  scrollbar-width: none;
+}
+
+.k-tabs__tab {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--k-space-2);
+  min-block-size: calc(2.5rem * var(--k-density));
+  padding-inline: var(--k-space-3);
+  border: 0;
+  border-radius: var(--k-radius-md);
+  background: transparent;
+  color: var(--k-text-tertiary);
+  font: inherit;
+  font-size: var(--k-text-sm);
+  font-weight: var(--k-weight-semibold);
+  white-space: nowrap;
+  cursor: pointer;
+  transition: color var(--k-duration-fast), background-color var(--k-duration-fast);
+}
+.k-tabs__tab:hover { color: var(--k-text-primary); }
+.k-tabs__tab[aria-selected="true"] { color: var(--k-text-primary); }
+.k-tabs__tab:focus-visible { outline: 2px solid transparent; box-shadow: var(--k-ring-brand); }
+.k-tabs__tab:disabled { color: var(--k-text-quaternary); cursor: not-allowed; }
+.k-tabs__tab .k-badge { font-size: var(--k-text-xs); padding-block: 0; }
+
+.k-tabs__panel:focus-visible { outline: 2px solid var(--k-border-brand); outline-offset: 4px; border-radius: var(--k-radius-sm); }
+
+/* خطی: خط زیر زبانهٔ فعال */
+.k-tabs--line .k-tabs__list { border-block-end: 1px solid var(--k-border-secondary); gap: var(--k-space-4); }
+.k-tabs--line .k-tabs__tab { padding-inline: var(--k-space-1); border-radius: 0; }
+.k-tabs--line .k-tabs__tab:focus-visible { border-radius: var(--k-radius-sm); }
+.k-tabs--line .k-tabs__tab[aria-selected="true"]::after {
+  content: "";
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: -1px;
+  block-size: 2px;
+  border-radius: 2px;
+  background: var(--k-border-brand);
+}
+
+/* قرصی */
+.k-tabs--pill .k-tabs__tab:hover { background: var(--k-bg-hover); }
+.k-tabs--pill .k-tabs__tab[aria-selected="true"] { background: var(--k-bg-brand-subtle); color: var(--k-text-brand); }
+
+/* چندبخشی: مثل کنترل iOS */
+.k-tabs--segmented .k-tabs__list {
+  inline-size: fit-content;
+  padding: 3px;
+  border: 1px solid var(--k-border-secondary);
+  border-radius: calc(var(--k-radius-md) + 3px);
+  background: var(--k-bg-secondary);
+}
+.k-tabs--segmented .k-tabs__tab { min-block-size: calc(2.25rem * var(--k-density)); }
+.k-tabs--segmented .k-tabs__tab[aria-selected="true"] {
+  background: var(--k-bg-elevated);
+  box-shadow: var(--k-shadow-sm), var(--k-highlight);
+}
+.k-tabs--block .k-tabs__list { inline-size: auto; }
+.k-tabs--block .k-tabs__tab { flex: 1; }
+
+@media (forced-colors: active) {
+  .k-tabs__tab[aria-selected="true"] { outline: 2px solid Highlight; }
+}
+
+/* اعلان کوتاه (Toast) — محل نمایش را کامپوننت <Toaster> می‌سازد
+ * رنگ‌ها: neutral | success | error | warning | info
+ */
+.k-toaster {
+  position: fixed;
+  inset-block-end: var(--k-space-6);
+  inset-inline-end: var(--k-space-6);
+  z-index: var(--k-z-toast);
+  display: grid;
+  gap: var(--k-space-3);
+  inline-size: min(24rem, calc(100vw - 2rem));
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  pointer-events: none;
+}
+.k-toaster--top { inset-block: var(--k-space-6) auto; }
+@media (max-width: 30rem) {
+  .k-toaster { inset-inline: var(--k-space-4); inset-block-end: var(--k-space-4); inline-size: auto; }
+}
+
+.k-toast {
+  --_accent: var(--k-text-tertiary);
+
+  position: relative;
+  display: flex;
+  align-items: flex-start;
+  gap: var(--k-space-3);
+  padding: var(--k-space-4);
+  border: 1px solid var(--k-border-secondary);
+  border-radius: var(--k-radius-xl);
+  background: var(--k-bg-elevated);
+  color: var(--k-text-primary);
+  box-shadow: var(--k-shadow-lg), var(--k-highlight);
+  pointer-events: auto;
+  animation: k-toast-in var(--k-duration-slow) var(--k-ease-emphasized);
+  overflow: hidden;
+}
+.k-toast[data-state="closing"] { animation: k-toast-out var(--k-duration-normal) var(--k-ease-standard) forwards; }
+@keyframes k-toast-in { from { opacity: 0; translate: 0 12px; scale: 0.97; } }
+@keyframes k-toast-out { to { opacity: 0; translate: 0 8px; scale: 0.97; } }
+
+.k-toast--success { --_accent: var(--k-text-success); }
+.k-toast--error { --_accent: var(--k-text-error); }
+.k-toast--warning { --_accent: var(--k-text-warning); }
+.k-toast--info { --_accent: var(--k-text-info); }
+
+.k-toast__icon { flex-shrink: 0; inline-size: 1.25rem; block-size: 1.25rem; margin-block-start: 0.125rem; color: var(--_accent); }
+.k-toast__icon svg { inline-size: 100%; block-size: 100%; }
+.k-toast__content { flex: 1; display: grid; gap: 0.125rem; min-inline-size: 0; font-size: var(--k-text-sm); }
+.k-toast__title { margin: 0; font-weight: var(--k-weight-semibold); }
+.k-toast__description { margin: 0; color: var(--k-text-tertiary); }
+.k-toast__action { margin-block-start: var(--k-space-2); justify-self: start; }
+.k-toast__close { margin-block: -0.375rem; margin-inline-end: -0.375rem; }
+
+/* نوار زمان باقی‌مانده */
+.k-toast__progress {
+  position: absolute;
+  inset-inline: 0;
+  inset-block-end: 0;
+  block-size: 2px;
+  background: var(--_accent);
+  opacity: 0.6;
+  transform-origin: var(--_origin, right);
+  animation: k-toast-progress linear forwards;
+}
+[dir="ltr"] .k-toast__progress { --_origin: left; }
+.k-toast:is(:hover, :focus-within) .k-toast__progress { animation-play-state: paused; }
+@keyframes k-toast-progress { to { scale: 0 1; } }
+
+@media (prefers-reduced-motion: reduce) {
+  .k-toast__progress { display: none; }
+}
+@media (forced-colors: active) {
+  .k-toast { border-color: CanvasText; }
+}
+
+/* راهنمای کوتاه (Tooltip) — با hover و فوکوس، بسته شدن با Esc (WCAG 1.4.13)
+ * فقط برای توضیح تکمیلی؛ اطلاعات ضروری را در tooltip پنهان نکنید.
+ */
+.k-tooltip-anchor { position: relative; display: inline-flex; }
+
+.k-tooltip {
+  position: absolute;
+  inset-block-end: calc(100% + 8px);
+  inset-inline-start: 50%;
+  z-index: var(--k-z-dropdown);
+  inline-size: max-content;
+  max-inline-size: 16rem;
+  padding: var(--k-space-1_5) var(--k-space-3);
+  border-radius: var(--k-radius-md);
+  background: var(--k-tooltip-bg, var(--k-text-primary));
+  color: var(--k-tooltip-fg, var(--k-bg-primary));
+  box-shadow: var(--k-shadow-lg);
+  font-size: var(--k-text-xs);
+  font-weight: var(--k-weight-medium);
+  line-height: 1.6;
+  text-align: center;
+  translate: 50% 0;
+  pointer-events: auto;
+  animation: k-tip-in var(--k-duration-fast) var(--k-ease-standard);
+}
+[dir="ltr"] .k-tooltip { translate: -50% 0; }
+.k-tooltip[hidden] { display: none; }
+.k-tooltip--bottom { inset-block: calc(100% + 8px) auto; }
+
+/* پیکان */
+.k-tooltip::after {
+  content: "";
+  position: absolute;
+  inset-block-start: 100%;
+  inset-inline-start: 50%;
+  translate: 50% 0;
+  border: 5px solid transparent;
+  border-block-start-color: var(--k-tooltip-bg, var(--k-text-primary));
+}
+[dir="ltr"] .k-tooltip::after { translate: -50% 0; }
+.k-tooltip--bottom::after { inset-block: auto 100%; border-block-start-color: transparent; border-block-end-color: var(--k-tooltip-bg, var(--k-text-primary)); }
+@keyframes k-tip-in { from { opacity: 0; translate: 50% 3px; } }
+[dir="ltr"] .k-tooltip { animation-name: k-tip-in-ltr; }
+@keyframes k-tip-in-ltr { from { opacity: 0; translate: -50% 3px; } }
+
+@media (forced-colors: active) {
+  .k-tooltip { border: 1px solid CanvasText; }
+}
+
 }