ics-ui-kit 0.1.15 → 0.1.17

package/dist/{opaqueCell-SGaiyL54.js → opaqueCell-D95h1mFM.js}

@@ -1,9 +1,9 @@
 import { T as r } from "./index-BVqs-uqP.js";
-const n = {
-  selected: "hsl(var(--alpha-high-05))",
+const s = {
+  selected: "hsl(var(--alpha-accent-high-secondary))",
   inactive: "hsl(var(--status-error) / 5%)"
-}, l = (...e) => {
-  const a = e.filter(Boolean).map((t) => `linear-gradient(${t},${t})`);
+}, l = (...t) => {
+  const a = t.filter(Boolean).map((e) => `linear-gradient(${e},${e})`);
   return a.length ? { "--table-row-tints": a.join(",") } : {};
 }, i = "bg-[image:var(--table-row-tints,none)]", o = "after:bg-[image:var(--table-row-tints,none)]", b = r({
   base: [
@@ -22,10 +22,10 @@ const n = {
   }
 });
 export {
-  n as T,
+  s as T,
   i as a,
   o as b,
   b as o,
   l as t
 };
-//# sourceMappingURL=opaqueCell-SGaiyL54.js.map
+//# sourceMappingURL=opaqueCell-D95h1mFM.js.map

package/dist/opaqueCell-D95h1mFM.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"opaqueCell-D95h1mFM.js","sources":["../src/components/table/rowTint.ts","../src/components/table/opaqueCell.ts"],"sourcesContent":["import type { CSSProperties } from \"react\";\n\n/**\n * Подкраска строки таблицы — стопка полупрозрачных слоёв поверх её заливки.\n *\n * **Когда нужно.** Когда состояний у строки больше одного. Заливка у строки одна\n * (`background-color`), и второе состояние вытеснило бы первое: выделенная деактивированная\n * строка выглядела бы просто выделенной. Слои же складываются альфами — и между собой,\n * и с заливкой, какой бы она ни была, включая заданную вами `className=\"bg-…\"`.\n *\n * **Почему это не пропсы строки.** `TableRow` не знает ни про «выделено», ни про «отключено»:\n * что означает подсветка и когда её включать — знание прикладного кода. Кит даёт механизм\n * (слои), готовые цвета (`TABLE_ROW_TINT`) и рисующие их классы; собирает их потребитель.\n *\n * @example\n * <TableRow style={tableRowTints(isSelected && TABLE_ROW_TINT.selected, isInactive && TABLE_ROW_TINT.inactive)}>\n */\n\n/**\n * Готовые цвета подкрасок: `selected` — выделенная строка, `inactive` — деактивированная.\n *\n * Оба полупрозрачные, поэтому сочетаются и друг с другом, и с наведением: наведение красит\n * заливку под слоями, и выделенная строка под курсором темнеет.\n *\n * Список открытый: свои состояния задавайте своими значениями, слоем годится любой\n * полупрозрачный CSS-цвет.\n */\nexport const TABLE_ROW_TINT = {\n\tselected: \"hsl(var(--alpha-accent-high-secondary))\",\n\tinactive: \"hsl(var(--status-error) / 5%)\"\n} as const;\n\n/**\n * Слои подкраски для `style` строки. Первый аргумент — верхний слой, каждый следующий\n * ложится под ним, под всеми — заливка строки.\n *\n * **Цвета должны быть полупрозрачными**, и следит за этим вызывающий код: значения уходят\n * в `background-image` как есть. Непрозрачный цвет закроет всё, что под ним, — остальные\n * слои и заливку вместе с наведением.\n *\n * Ложные значения отбрасываются, поэтому условия пишутся прямо в аргументах:\n * `tableRowTints(isSelected && TABLE_ROW_TINT.selected)`. Без единого слоя строка красится\n * одной заливкой.\n *\n * Результат — инлайновый стиль с CSS-переменной; она наследуется от `tr` к ячейкам, поэтому\n * закреплённые и перетаскиваемые колонки подхватывают подкраску сами.\n *\n * @example\n * <TableRow\n *   style={tableRowTints(\n *     isSelected && TABLE_ROW_TINT.selected,\n *     isOverdue && \"hsl(var(--status-warning) / 12%)\"\n *   )}\n * >\n */\nexport const tableRowTints = (...tints: (string | false | null | undefined)[]): CSSProperties => {\n\tconst layers = tints.filter(Boolean).map((tint) => `linear-gradient(${tint},${tint})`);\n\n\t// `linear-gradient(цвет, цвет)` — способ подать сплошную заливку как изображение: слоями\n\t// умеет быть только `background-image`, а `background-color` — единственный и последний.\n\treturn layers.length ? ({ \"--table-row-tints\": layers.join(\",\") } as CSSProperties) : {};\n};\n\n/**\n * Класс, рисующий слои подкраски на строке. Уже применён к `TableRow` — нужен, только если\n * вы рисуете строку своим элементом.\n */\nexport const TABLE_ROW_TINT_LAYERS = \"bg-[image:var(--table-row-tints,none)]\";\n\n/** То же самое для слоя `::after` непрозрачной ячейки — см. `opaqueCellStyles`. */\nexport const TABLE_ROW_TINT_LAYERS_AFTER = \"after:bg-[image:var(--table-row-tints,none)]\";\n","import { tv } from \"tailwind-variants\";\nimport { TABLE_ROW_TINT_LAYERS_AFTER } from \"./rowTint\";\n\n/**\n * Ячейка с непрозрачным фоном, сохраняющая подсветку строки.\n *\n * Нужна везде, где ячейка выезжает из потока и под ней оказывается чужое содержимое:\n * закреплённая колонка (`stickyCellStyles`) и колонка, которую перетаскивают\n * (`useColumnReorder`). Обе задачи одинаковые, поэтому рецепт один.\n *\n * **Почему фон нельзя просто задать.** Строка прозрачна — красит подложка секции\n * (`TableBody`, `TableHeader`), и такой ячейке нужен свой непрозрачный фон. Но подменять\n * им подсветку строки нельзя: `hover:bg-*` положил бы поверх полупрозрачный цвет, и чужое\n * содержимое снова стало бы просвечивать. Поэтому подсветку рисует слой `::after` теми же\n * переменными, что и сама строка, — заливкой (`--table-row-bg`, `--table-row-bg-hover`)\n * и списком слоёв (`--table-row-tints`). Переменные наследуются от `tr` к ячейке сами,\n * связывать их не нужно.\n *\n * Повторяются обе части: если рисовать только заливку, у закреплённой колонки пропадёт любая\n * подкраска — и выделение, и деактивация, и что там ещё собрал потребитель.\n *\n * `transition-colors` совпадает с переходом у `TableRow`, поэтому строка подсвечивается\n * целиком, а не двумя рывками. Разделители слой не задевает: `inset-0` у абсолютного\n * потомка отсчитывается от padding-box, а границы лежат снаружи него.\n *\n * **Требует контекста позиционирования** — `sticky` у закреплённой ячейки, `relative`\n * у перетаскиваемой: иначе `::after` растянется не по ячейке, а по ближайшему\n * позиционированному предку.\n *\n * @example\n * <TableCell className={opaqueCellStyles({ className: \"relative\" })}>…</TableCell>\n * <TableHead className={opaqueCellStyles({ part: \"head\", className: \"relative\" })}>…</TableHead>\n */\nexport const opaqueCellStyles = tv({\n\tbase: [\n\t\t\"after:pointer-events-none after:absolute after:inset-0 after:transition-colors\",\n\t\t\"after:bg-[color:var(--table-row-bg)] [tr:hover>&]:after:bg-[color:var(--table-row-bg-hover)]\",\n\t\tTABLE_ROW_TINT_LAYERS_AFTER\n\t],\n\tvariants: {\n\t\tpart: {\n\t\t\tcell: \"bg-secondary-bg\",\n\t\t\thead: \"bg-primary-bg\"\n\t\t}\n\t},\n\tdefaultVariants: {\n\t\tpart: \"cell\"\n\t}\n});\n"],"names":["TABLE_ROW_TINT","tableRowTints","tints","layers","tint","TABLE_ROW_TINT_LAYERS","TABLE_ROW_TINT_LAYERS_AFTER","opaqueCellStyles","tv"],"mappings":";AA2BO,MAAMA,IAAiB;AAAA,EAC7B,UAAU;AAAA,EACV,UAAU;AACX,GAyBaC,IAAgB,IAAIC,MAAgE;AAChG,QAAMC,IAASD,EAAM,OAAO,OAAO,EAAE,IAAI,CAACE,MAAS,mBAAmBA,CAAI,IAAIA,CAAI,GAAG;AAI9E,SAAAD,EAAO,SAAU,EAAE,qBAAqBA,EAAO,KAAK,GAAG,EAAE,IAAsB,CAAC;AACxF,GAMaE,IAAwB,0CAGxBC,IAA8B,gDCrC9BC,IAAmBC,EAAG;AAAA,EAClC,MAAM;AAAA,IACL;AAAA,IACA;AAAA,IACAF;AAAA,EACD;AAAA,EACA,UAAU;AAAA,IACT,MAAM;AAAA,MACL,MAAM;AAAA,MACN,MAAM;AAAA,IAAA;AAAA,EAER;AAAA,EACA,iBAAiB;AAAA,IAChB,MAAM;AAAA,EAAA;AAER,CAAC;"}

package/dist/styles-scoped.css

@@ -116,9 +116,6 @@
 	--status-error-secondary-border: 0 96% 89%;
 
 	/** Alpha **/
-	--alpha-03: 210 40% 96% / 3%;
-	--alpha-05: 210 40% 96% / 5%;
-	--alpha-08: 210 40% 96% / 8%;
 	--alpha-10: 210 40% 96% / 10%;
 	--alpha-20: 210 40% 96% / 20%;
 	--alpha-30: 210 40% 96% / 30%;
@@ -129,9 +126,6 @@
 	--alpha-80: 210 40% 96% / 80%;
 	--alpha-90: 210 40% 96% / 90%;
 
-	--alpha-high-03: 229 84% 5% / 3%;
-	--alpha-high-05: 229 84% 5% / 5%;
-	--alpha-high-08: 229 84% 5% / 8%;
 	--alpha-high-10: 229 84% 5% / 10%;
 	--alpha-high-20: 229 84% 5% / 20%;
 	--alpha-high-30: 229 84% 5% / 30%;
@@ -142,8 +136,12 @@
 	--alpha-high-80: 229 84% 5% / 80%;
 	--alpha-high-90: 229 84% 5% / 90%;
 
-	--alpha-accent-primary: 210 40% 96% / 12%;
+	--alpha-hover: 210 40% 96% / 6%;
+	--alpha-accent-primary: 210 40% 96% / 16%;
 	--alpha-accent-secondary: 210 40% 96% / 8%;
+	--alpha-high-hover: 229 84% 5% / 4%;
+	--alpha-accent-high-primary: 222 47% 11% / 16%;
+	--alpha-accent-high-secondary: 222 47% 11% / 8%;
 
 	/** Autofill **/
 	--autofill-bg: 213 100% 96%;
@@ -284,9 +282,6 @@
 	--status-error-secondary-border: 0 63% 31%;
 
 	/** Alpha **/
-	--alpha-03: 229 84% 5% / 3%;
-	--alpha-05: 229 84% 5% / 5%;
-	--alpha-08: 229 84% 5% / 8%;
 	--alpha-10: 229 84% 5% / 10%;
 	--alpha-20: 229 84% 5% / 20%;
 	--alpha-30: 229 84% 5% / 30%;
@@ -297,9 +292,6 @@
 	--alpha-80: 229 84% 5% / 80%;
 	--alpha-90: 229 84% 5% / 90%;
 
-	--alpha-high-03: 210 40% 96% / 3%;
-	--alpha-high-05: 210 40% 96% / 5%;
-	--alpha-high-08: 210 40% 96% / 8%;
 	--alpha-high-10: 210 40% 96% / 10%;
 	--alpha-high-20: 210 40% 96% / 20%;
 	--alpha-high-30: 210 40% 96% / 30%;
@@ -310,8 +302,12 @@
 	--alpha-high-80: 210 40% 96% / 80%;
 	--alpha-high-90: 210 40% 96% / 90%;
 
-	--alpha-accent-primary: 222 47% 11% / 8%;
-	--alpha-accent-secondary: 222 47% 11% / 5%;
+	--alpha-hover: 229 84% 5% / 4%;
+	--alpha-accent-primary: 222 47% 11% / 16%;
+	--alpha-accent-secondary: 222 47% 11% / 8%;
+	--alpha-high-hover: 210 40% 96% / 6%;
+	--alpha-accent-high-primary: 210 40% 96% / 16%;
+	--alpha-accent-high-secondary: 210 40% 96% / 8%;
 
 	/** Palette **/
 	--peony: 340 35% 47%;
@@ -1591,10 +1587,6 @@
 	margin-top: 0.25rem;
 	margin-bottom: 0.25rem;
 }
-.ui-kit .my-2 {
-	margin-top: 0.5rem;
-	margin-bottom: 0.5rem;
-}
 .ui-kit .my-4 {
 	margin-top: 1rem;
 	margin-bottom: 1rem;
@@ -2839,6 +2831,9 @@
 .ui-kit .overflow-x-hidden {
 	overflow-x: hidden;
 }
+.ui-kit .overflow-y-hidden {
+	overflow-y: hidden;
+}
 .ui-kit .truncate {
 	overflow: hidden;
 	text-overflow: ellipsis;
@@ -4013,8 +4008,8 @@
 	opacity: 0.8;
 }
 .ui-kit .\!shadow-focus {
-	--tw-shadow: 0 0 0 1px hsl(var(--primary-bg)), 0 0 0 2px hsl(var(--focus)) !important;
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color) !important;
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--focus)) !important;
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color) !important;
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
 .ui-kit .\!shadow-none {
@@ -4028,8 +4023,8 @@
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .shadow-focus {
-	--tw-shadow: 0 0 0 1px hsl(var(--primary-bg)), 0 0 0 2px hsl(var(--focus));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--focus));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .shadow-glass-md {
@@ -4308,8 +4303,8 @@
 .ui-kit .\@container {
 	container-type: inline-size;
 }
-.ui-kit .\[--table-row-bg-hover\:hsl\(var\(--alpha-high-03\)\)\] {
-	--table-row-bg-hover: hsl(var(--alpha-high-03));
+.ui-kit .\[--table-row-bg-hover\:hsl\(var\(--alpha-high-hover\)\)\] {
+	--table-row-bg-hover: hsl(var(--alpha-high-hover));
 }
 .ui-kit .\[--table-row-bg\:transparent\] {
 	--table-row-bg: transparent;
@@ -4347,6 +4342,9 @@
 .ui-kit .\[mask-image\:linear-gradient\(to_left\2c rgba\(255\2c 255\2c 255\2c 0\)\2c \#fff_30\%\)\] {
 	mask-image: linear-gradient(to left,rgba(255,255,255,0),#fff 30%);
 }
+.ui-kit .\[scrollbar-gutter\:stable\] {
+	scrollbar-gutter: stable;
+}
 .ui-kit .\[scrollbar-width\:none\] {
 	scrollbar-width: none;
 }
@@ -4583,9 +4581,6 @@
 	.ui-kit .hover\:bg-alpha-high-90:hover {
 		background-color: hsl(var(--alpha-high-10));
 	}
-	.ui-kit .hover\:bg-alpha-high-95:hover {
-		background-color: hsl(var(--alpha-high-05));
-	}
 	.ui-kit .hover\:bg-amber-100:hover {
 		--tw-bg-opacity: 1;
 		background-color: rgb(254 243 199 / var(--tw-bg-opacity, 1));
@@ -4681,8 +4676,8 @@
 		opacity: 0.65;
 	}
 	.ui-kit .hover\:shadow-focus:hover {
-		--tw-shadow: 0 0 0 1px hsl(var(--primary-bg)), 0 0 0 2px hsl(var(--focus));
-		--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
+		--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--focus));
+		--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 		box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 	}
 	.ui-kit .hover\:shadow-soft-base:hover {
@@ -4768,13 +4763,13 @@
 	color: hsl(var(--primary-fg));
 }
 .ui-kit .focus\:shadow-focus:focus {
-	--tw-shadow: 0 0 0 1px hsl(var(--primary-bg)), 0 0 0 2px hsl(var(--focus));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--focus));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .focus\:shadow-focus-error:focus {
-	--tw-shadow: 0 0 0 1px hsl(var(--status-error));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--status-error));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .focus\:shadow-soft-sm:focus {
@@ -4801,8 +4796,8 @@
 	border-color: hsl(var(--status-error-secondary-border));
 }
 .ui-kit .invalid\:focus\:shadow-focus-error:focus:invalid {
-	--tw-shadow: 0 0 0 1px hsl(var(--status-error));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--status-error));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .read-only\:focus\:bg-secondary-bg-hover:focus:read-only {
@@ -4842,23 +4837,23 @@
 	background-color: hsl(var(--secondary-bg-hover));
 }
 .ui-kit .focus-visible\:\!shadow-focus:focus-visible {
-	--tw-shadow: 0 0 0 1px hsl(var(--primary-bg)), 0 0 0 2px hsl(var(--focus)) !important;
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color) !important;
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--focus)) !important;
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color) !important;
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow) !important;
 }
 .ui-kit .focus-visible\:shadow-focus:focus-visible {
-	--tw-shadow: 0 0 0 1px hsl(var(--primary-bg)), 0 0 0 2px hsl(var(--focus));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--focus));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .focus-visible\:shadow-focus-error:focus-visible {
-	--tw-shadow: 0 0 0 1px hsl(var(--status-error));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--status-error));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .focus-visible\:shadow-inverse-focus:focus-visible {
-	--tw-shadow: 0 0 0 1px hsl(var(--inverse-primary-bg)), 0 0 0 2px hsl(var(--inverse-muted));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--inverse-primary-bg)), 0 0 0 1px hsl(var(--inverse-muted));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .focus-visible\:outline-none:focus-visible {
@@ -4901,8 +4896,8 @@
 	border-color: hsl(var(--status-error-secondary-border));
 }
 .ui-kit .invalid\:focus-visible\:shadow-focus-error:focus-visible:invalid {
-	--tw-shadow: 0 0 0 1px hsl(var(--status-error));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--status-error));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .active\:cursor-grabbing:active {
@@ -5043,8 +5038,8 @@
 	opacity: 1;
 }
 .ui-kit :is(.group\/search-select-trigger:focus-within .group-focus-within\/search-select-trigger\:shadow-focus) {
-	--tw-shadow: 0 0 0 1px hsl(var(--primary-bg)), 0 0 0 2px hsl(var(--focus));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--focus));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 @media (hover: hover) and (pointer: fine) {
@@ -5160,8 +5155,8 @@
 	opacity: 0.5;
 }
 .ui-kit .has-\[div\[data-input-group-element\=\'contenteditable\'\]\:focus\]\:shadow-focus:has(div[data-input-group-element='contenteditable']:focus) {
-	--tw-shadow: 0 0 0 1px hsl(var(--primary-bg)), 0 0 0 2px hsl(var(--focus));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--focus));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .has-\[input\:disabled\]\:shadow-soft-sm:has(input:disabled) {
@@ -5170,13 +5165,13 @@
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .has-\[input\:focus\]\:shadow-focus:has(input:focus) {
-	--tw-shadow: 0 0 0 1px hsl(var(--primary-bg)), 0 0 0 2px hsl(var(--focus));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--focus));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .has-\[input\:invalid\]\:has-\[input\:focus\]\:shadow-focus-error:has(input:focus):has(input:invalid) {
-	--tw-shadow: 0 0 0 1px hsl(var(--status-error));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--status-error));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .has-\[input\:invalid\]\:shadow-soft-base:has(input:invalid) {
@@ -5185,8 +5180,8 @@
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .has-\[input\:read-only\:not\(\[type\=\'file\'\]\)\]\:has-\[input\:focus\]\:shadow-focus:has(input:focus):has(input:read-only:not([type='file'])) {
-	--tw-shadow: 0 0 0 1px hsl(var(--primary-bg)), 0 0 0 2px hsl(var(--focus));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--focus));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .has-\[input\:read-only\:not\(\[type\=\'file\'\]\)\]\:shadow-soft-sm:has(input:read-only:not([type='file'])) {
@@ -5195,8 +5190,8 @@
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .has-\[input\[aria-invalid\=true\]\]\:has-\[input\:focus\]\:shadow-focus-error:has(input:focus):has(input[aria-invalid=true]) {
-	--tw-shadow: 0 0 0 1px hsl(var(--status-error));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--status-error));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .has-\[input\[aria-invalid\=true\]\]\:shadow-soft-base:has(input[aria-invalid=true]) {
@@ -5256,8 +5251,8 @@
 	border-color: hsl(var(--status-error-secondary-border));
 }
 .ui-kit .aria-\[invalid\=true\]\:focus\:shadow-focus-error:focus[aria-invalid="true"] {
-	--tw-shadow: 0 0 0 1px hsl(var(--status-error));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--status-error));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .data-\[disabled\=true\]\:pointer-events-none[data-disabled="true"] {
@@ -5669,13 +5664,13 @@
 	}
 }
 .ui-kit .data-\[state\=checked\]\:focus-visible\:shadow-focus:focus-visible[data-state="checked"] {
-	--tw-shadow: 0 0 0 1px hsl(var(--primary-bg)), 0 0 0 2px hsl(var(--focus));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--focus));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .data-\[state\=indeterminate\]\:focus-visible\:shadow-focus:focus-visible[data-state="indeterminate"] {
-	--tw-shadow: 0 0 0 1px hsl(var(--primary-bg)), 0 0 0 2px hsl(var(--focus));
-	--tw-shadow-colored: 0 0 0 1px var(--tw-shadow-color), 0 0 0 2px var(--tw-shadow-color);
+	--tw-shadow: 0 0 0 0.5px hsl(var(--primary-bg)), 0 0 0 1px hsl(var(--focus));
+	--tw-shadow-colored: 0 0 0 0.5px var(--tw-shadow-color), 0 0 0 1px var(--tw-shadow-color);
 	box-shadow: var(--tw-ring-offset-shadow, 0 0 #0000), var(--tw-ring-shadow, 0 0 #0000), var(--tw-shadow);
 }
 .ui-kit .active\:data-\[state\=open\]\:bg-secondary-bg-hover[data-state="open"]:active {