@inkra/react 0.3.0 → 0.5.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (245) hide show
  1. package/README.md +113 -3
  2. package/dist/Button.js +3 -2
  3. package/dist/PencilIcon.d.ts +10 -0
  4. package/dist/PencilIcon.js +83 -39
  5. package/dist/PencilLine.js +9 -1
  6. package/dist/PencilText.js +15 -9
  7. package/dist/accordion/Accordion.js +65 -5
  8. package/dist/alert-dialog/index.js +14 -4
  9. package/dist/audio-player/index.d.ts +2 -0
  10. package/dist/audio-player/index.js +131 -34
  11. package/dist/breadcrumb/index.js +4 -1
  12. package/dist/calendar/index.d.ts +4 -1
  13. package/dist/calendar/index.js +37 -12
  14. package/dist/calendar/locales.d.ts +7 -0
  15. package/dist/calendar/locales.js +2 -0
  16. package/dist/carousel/index.js +20 -10
  17. package/dist/choice-grid/index.d.ts +6 -1
  18. package/dist/choice-grid/index.js +63 -33
  19. package/dist/color-picker/GradientEditor.d.ts +40 -0
  20. package/dist/color-picker/GradientEditor.js +64 -0
  21. package/dist/color-picker/gradient.d.ts +25 -0
  22. package/dist/color-picker/gradient.js +60 -0
  23. package/dist/color-picker/index.d.ts +27 -7
  24. package/dist/color-picker/index.js +144 -40
  25. package/dist/color-swatch/index.d.ts +10 -0
  26. package/dist/color-swatch/index.js +9 -0
  27. package/dist/command/index.js +27 -4
  28. package/dist/content/index.d.ts +5 -0
  29. package/dist/content/index.js +15 -3
  30. package/dist/context-menu/index.js +1 -1
  31. package/dist/data-table/index.d.ts +7 -1
  32. package/dist/data-table/index.js +67 -16
  33. package/dist/data-table/model.d.ts +2 -0
  34. package/dist/data-table/model.js +7 -0
  35. package/dist/date-picker/index.d.ts +2 -0
  36. package/dist/date-picker/index.js +20 -21
  37. package/dist/day-agenda/index.d.ts +6 -1
  38. package/dist/day-agenda/index.js +49 -21
  39. package/dist/day-agenda/layout.js +65 -9
  40. package/dist/display/ProgressRing.js +7 -3
  41. package/dist/display/index.d.ts +4 -1
  42. package/dist/display/index.js +3 -2
  43. package/dist/dockable-panel/index.js +15 -13
  44. package/dist/drawer/index.js +11 -5
  45. package/dist/editable/index.d.ts +24 -2
  46. package/dist/editable/index.js +148 -40
  47. package/dist/empty/illustrations.d.ts +8 -0
  48. package/dist/empty/illustrations.js +78 -0
  49. package/dist/empty/index.d.ts +6 -1
  50. package/dist/empty/index.js +11 -3
  51. package/dist/flip/index.js +28 -8
  52. package/dist/form/Field.js +11 -10
  53. package/dist/form/Input.js +4 -1
  54. package/dist/form/Textarea.d.ts +3 -1
  55. package/dist/form/Textarea.js +9 -5
  56. package/dist/heatmap/index.js +4 -1
  57. package/dist/hotkey/index.d.ts +1 -0
  58. package/dist/hotkey/index.js +9 -4
  59. package/dist/hover-card/index.js +1 -1
  60. package/dist/i18n/catalog.d.ts +5 -0
  61. package/dist/i18n/catalog.js +289 -0
  62. package/dist/i18n/index.d.ts +23 -0
  63. package/dist/i18n/index.js +50 -0
  64. package/dist/image-cropper/index.js +21 -17
  65. package/dist/image-viewer/VideoResource.d.ts +21 -0
  66. package/dist/image-viewer/VideoResource.js +196 -0
  67. package/dist/image-viewer/index.d.ts +14 -0
  68. package/dist/image-viewer/index.js +141 -86
  69. package/dist/image-viewer/lucideGeometry.d.ts +3 -0
  70. package/dist/image-viewer/lucideGeometry.js +19 -0
  71. package/dist/index.d.ts +4 -0
  72. package/dist/index.js +4 -0
  73. package/dist/input-number/index.js +13 -5
  74. package/dist/internal/cache.d.ts +4 -0
  75. package/dist/internal/cache.js +18 -1
  76. package/dist/internal/iconGeometry.d.ts +2 -0
  77. package/dist/internal/iconGeometry.js +32 -0
  78. package/dist/internal/renderTokens.d.ts +4 -0
  79. package/dist/internal/renderTokens.js +4 -0
  80. package/dist/internal/stroke.d.ts +7 -0
  81. package/dist/internal/stroke.js +63 -7
  82. package/dist/internal/surfaceBudget.d.ts +20 -0
  83. package/dist/internal/surfaceBudget.js +69 -0
  84. package/dist/internal/surfaceRenderer.js +87 -28
  85. package/dist/internal/surfaceVisibility.d.ts +3 -0
  86. package/dist/internal/surfaceVisibility.js +60 -0
  87. package/dist/internal/textRenderer.d.ts +3 -0
  88. package/dist/internal/textRenderer.js +13 -5
  89. package/dist/internal/usePencilSurface.js +17 -1
  90. package/dist/internal/wash.js +4 -3
  91. package/dist/journey-map/index.d.ts +1 -1
  92. package/dist/journey-map/index.js +6 -3
  93. package/dist/journey-map/terrain.js +10 -5
  94. package/dist/keypad/index.js +4 -1
  95. package/dist/layout/index.js +1 -1
  96. package/dist/log/index.js +42 -33
  97. package/dist/markdown/CodeBlock.d.ts +19 -0
  98. package/dist/markdown/CodeBlock.js +86 -0
  99. package/dist/markdown/Deletion.d.ts +2 -0
  100. package/dist/markdown/Deletion.js +69 -0
  101. package/dist/markdown/icons.d.ts +14 -0
  102. package/dist/markdown/icons.js +16 -0
  103. package/dist/markdown/index.d.ts +17 -0
  104. package/dist/markdown/index.js +177 -0
  105. package/dist/node-graph/index.d.ts +3 -1
  106. package/dist/node-graph/index.js +63 -28
  107. package/dist/number-ticker/index.js +4 -1
  108. package/dist/number-ticker/precision.js +9 -2
  109. package/dist/overflow-list/index.js +9 -6
  110. package/dist/overlay/Overlay.js +8 -3
  111. package/dist/overlay/Popover.js +3 -3
  112. package/dist/overlay/themeBridge.js +14 -2
  113. package/dist/pagination/index.d.ts +10 -1
  114. package/dist/pagination/index.js +13 -9
  115. package/dist/pan-zoom/index.d.ts +2 -0
  116. package/dist/pan-zoom/index.js +12 -8
  117. package/dist/pencil.d.ts +1 -0
  118. package/dist/pencil.js +4 -4
  119. package/dist/radar/index.d.ts +2 -0
  120. package/dist/radar/index.js +44 -21
  121. package/dist/range-slider/index.js +4 -3
  122. package/dist/rating/index.d.ts +4 -0
  123. package/dist/rating/index.js +131 -24
  124. package/dist/resizable/index.d.ts +1 -1
  125. package/dist/resizable/index.js +5 -2
  126. package/dist/scroll-area/index.d.ts +1 -1
  127. package/dist/scroll-area/index.js +5 -2
  128. package/dist/select/MultipleSelect.js +5 -4
  129. package/dist/select/SearchableSelect.js +64 -7
  130. package/dist/select/Select.d.ts +1 -0
  131. package/dist/select/Select.js +6 -2
  132. package/dist/select/StepperSelect.d.ts +29 -0
  133. package/dist/select/StepperSelect.js +122 -0
  134. package/dist/select/index.d.ts +2 -0
  135. package/dist/select/index.js +1 -0
  136. package/dist/select/stepperModel.d.ts +7 -0
  137. package/dist/select/stepperModel.js +29 -0
  138. package/dist/selection/Checkbox.js +4 -3
  139. package/dist/selection/RadioGroup.js +29 -13
  140. package/dist/selection/Switch.js +4 -3
  141. package/dist/selection/useNativeChecked.d.ts +2 -1
  142. package/dist/selection/useNativeChecked.js +26 -8
  143. package/dist/slider/index.js +50 -6
  144. package/dist/sortable/index.js +17 -11
  145. package/dist/sparkline/index.js +21 -6
  146. package/dist/sparkline/model.js +11 -4
  147. package/dist/steps/index.js +4 -1
  148. package/dist/styles/accordion.css +228 -0
  149. package/dist/styles/alert-dialog.css +139 -0
  150. package/dist/styles/audio-player.css +22 -0
  151. package/dist/styles/base.css +638 -0
  152. package/dist/styles/breadcrumb.css +7 -0
  153. package/dist/styles/calendar.css +62 -0
  154. package/dist/styles/carousel.css +173 -0
  155. package/dist/styles/choice-grid.css +226 -0
  156. package/dist/styles/color-picker.css +281 -0
  157. package/dist/styles/color-swatch.css +47 -0
  158. package/dist/styles/command.css +52 -0
  159. package/dist/styles/content.css +79 -0
  160. package/dist/styles/context-menu.css +35 -0
  161. package/dist/styles/data-table.css +31 -0
  162. package/dist/styles/date-picker.css +107 -0
  163. package/dist/styles/day-agenda.css +30 -0
  164. package/dist/styles/display.css +304 -0
  165. package/dist/styles/dockable-panel.css +110 -0
  166. package/dist/styles/drawer.css +133 -0
  167. package/dist/styles/dropdown-menu.css +68 -0
  168. package/dist/styles/editable.css +145 -0
  169. package/dist/styles/empty.css +108 -0
  170. package/dist/styles/flip.css +101 -0
  171. package/dist/styles/form.css +634 -0
  172. package/dist/styles/heatmap.css +256 -0
  173. package/dist/styles/hotkey.css +189 -0
  174. package/dist/styles/hover-card.css +27 -0
  175. package/dist/styles/image-cropper.css +205 -0
  176. package/dist/styles/image-viewer.css +422 -0
  177. package/dist/styles/input-number.css +21 -0
  178. package/dist/styles/journey-map.css +19 -0
  179. package/dist/styles/keypad.css +92 -0
  180. package/dist/styles/layout.css +72 -0
  181. package/dist/styles/leaflet.css +661 -0
  182. package/dist/styles/log.css +203 -0
  183. package/dist/styles/markdown.css +379 -0
  184. package/dist/styles/node-graph.css +142 -0
  185. package/dist/styles/number-ticker.css +83 -0
  186. package/dist/styles/overflow-list.css +51 -0
  187. package/dist/styles/overlay.css +284 -0
  188. package/dist/styles/pagination.css +21 -0
  189. package/dist/styles/pan-zoom.css +136 -0
  190. package/dist/styles/radar.css +1 -0
  191. package/dist/styles/rating.css +121 -0
  192. package/dist/styles/resizable.css +108 -0
  193. package/dist/styles/scroll-area.css +122 -0
  194. package/dist/styles/select.css +554 -0
  195. package/dist/styles/selection.css +264 -0
  196. package/dist/styles/slider.css +145 -0
  197. package/dist/styles/slot.css +109 -0
  198. package/dist/styles/sortable.css +159 -0
  199. package/dist/styles/sparkline.css +24 -0
  200. package/dist/styles/steps.css +27 -0
  201. package/dist/styles/tabs.css +79 -0
  202. package/dist/styles/tag-input.css +213 -0
  203. package/dist/styles/time-picker.css +66 -0
  204. package/dist/styles/timeline.css +24 -0
  205. package/dist/styles/toast.css +160 -0
  206. package/dist/styles/toggle-group.css +107 -0
  207. package/dist/styles/tooltip.css +78 -0
  208. package/dist/styles/transfer.css +148 -0
  209. package/dist/styles/tree-select.css +131 -0
  210. package/dist/styles/tree.css +59 -0
  211. package/dist/styles/typewriter.css +62 -0
  212. package/dist/styles/upload.css +60 -0
  213. package/dist/styles/virtual-list.css +112 -0
  214. package/dist/styles.css +2091 -421
  215. package/dist/tabs/index.d.ts +9 -0
  216. package/dist/tabs/index.js +69 -16
  217. package/dist/tabs/useOverflow.d.ts +20 -0
  218. package/dist/tabs/useOverflow.js +145 -0
  219. package/dist/tag-input/index.d.ts +7 -2
  220. package/dist/tag-input/index.js +81 -42
  221. package/dist/theme/index.d.ts +11 -0
  222. package/dist/theme/index.js +23 -0
  223. package/dist/time-picker/index.js +45 -27
  224. package/dist/timeline/index.js +4 -1
  225. package/dist/toast/index.d.ts +19 -11
  226. package/dist/toast/index.js +51 -8
  227. package/dist/toast/manager.d.ts +42 -0
  228. package/dist/toast/manager.js +85 -0
  229. package/dist/toast/useToastNavigation.d.ts +3 -0
  230. package/dist/toast/useToastNavigation.js +75 -0
  231. package/dist/tokens.css +4 -0
  232. package/dist/tooltip/Tooltip.js +3 -3
  233. package/dist/transfer/index.d.ts +5 -0
  234. package/dist/transfer/index.js +120 -53
  235. package/dist/transfer/model.d.ts +4 -0
  236. package/dist/transfer/model.js +37 -11
  237. package/dist/tree/index.d.ts +5 -1
  238. package/dist/tree/index.js +11 -6
  239. package/dist/tree-select/index.js +70 -31
  240. package/dist/tree-select/model.d.ts +11 -5
  241. package/dist/tree-select/model.js +111 -83
  242. package/dist/typewriter/index.js +10 -10
  243. package/dist/upload/index.js +50 -33
  244. package/dist/virtual-list/index.js +11 -6
  245. package/package.json +423 -3
package/dist/styles.css CHANGED
@@ -800,7 +800,8 @@
800
800
  z-index: 3;
801
801
  left: 0;
802
802
  top: 0;
803
- display: block;
803
+ /* Inactive canvases may retain geometry from a previous size or direction. */
804
+ display: none;
804
805
  width: 100%;
805
806
  height: 100%;
806
807
  opacity: 0;
@@ -808,6 +809,7 @@
808
809
  }
809
810
 
810
811
  .inkra-field-control-hit[data-pencil-editable-ready="true"] .inkra-editable-text {
812
+ display: block;
811
813
  opacity: 1;
812
814
  }
813
815
 
@@ -876,6 +878,46 @@
876
878
  z-index: 3;
877
879
  }
878
880
 
881
+ .inkra-field-control-hit--textarea[data-end-action="true"] .inkra-field-control--textarea {
882
+ display: grid !important;
883
+ grid-template-columns: minmax(0, 1fr) auto;
884
+ }
885
+
886
+ .inkra-textarea__end-action {
887
+ position: relative;
888
+ z-index: 3;
889
+ display: flex;
890
+ align-self: start;
891
+ align-items: center;
892
+ min-block-size: var(--inkra-touch-target);
893
+ }
894
+
895
+ .inkra-field-control-hit--textarea[data-end-action="true"] .inkra-textarea__footer {
896
+ grid-column: 1 / -1;
897
+ }
898
+
899
+ .inkra-textarea__underline {
900
+ position: absolute !important;
901
+ inset-inline: 0;
902
+ inset-block-end: -4px;
903
+ inline-size: 100%;
904
+ pointer-events: none;
905
+ }
906
+
907
+ .inkra-field-control-hit--textarea[data-invalid="true"] .inkra-textarea__underline {
908
+ color: var(--inkra-danger);
909
+ }
910
+
911
+ .inkra-field-control-hit--textarea[data-variant="underline"] .inkra-input__action-wash {
912
+ inset: 4px;
913
+ border-radius: 3px;
914
+ }
915
+
916
+ .inkra-field-control-hit--textarea[data-variant="underline"] .inkra-input__action-divider {
917
+ inset-block-start: 8px;
918
+ block-size: calc(100% - 16px);
919
+ }
920
+
879
921
  .inkra-textarea__count {
880
922
  display: flex;
881
923
  align-items: center;
@@ -1195,7 +1237,8 @@
1195
1237
  color: ButtonText;
1196
1238
  }
1197
1239
 
1198
- .inkra-input-root[data-variant="underline"] .inkra-field-control {
1240
+ .inkra-input-root[data-variant="underline"] .inkra-field-control,
1241
+ .inkra-field-control-hit--textarea[data-variant="underline"] .inkra-field-control {
1199
1242
  border: 0;
1200
1243
  }
1201
1244
 
@@ -1453,11 +1496,23 @@
1453
1496
  line-height: var(--inkra-line-ui);
1454
1497
  }
1455
1498
 
1456
- .inkra-selection-control:has(.inkra-selection-control__input:focus-visible) .inkra-selection-control__mark,
1457
- .inkra-selection-control:has(.inkra-selection-control__input:focus-visible) .inkra-switch__track,
1458
- .inkra-selection-control:has(.inkra-selection-control__input:focus-visible) .inkra-radio-group__segment {
1459
- outline: var(--inkra-focus-width) solid var(--inkra-focus);
1460
- outline-offset: var(--inkra-focus-offset);
1499
+ .inkra-selection-control__focus-ring {
1500
+ --inkra-accent-strong: var(--inkra-focus);
1501
+
1502
+ inset: calc(-1 * var(--inkra-focus-offset));
1503
+ opacity: 0;
1504
+ pointer-events: none;
1505
+ position: absolute !important;
1506
+ z-index: 3;
1507
+ }
1508
+
1509
+ .inkra-selection-control__focus-ring--inset {
1510
+ inset: var(--inkra-focus-width);
1511
+ }
1512
+
1513
+ .inkra-selection-control:has(.inkra-selection-control__input:focus-visible)
1514
+ .inkra-selection-control__focus-ring {
1515
+ opacity: 1;
1461
1516
  }
1462
1517
 
1463
1518
  .inkra-selection-control[data-disabled="true"] {
@@ -1505,6 +1560,7 @@
1505
1560
 
1506
1561
  .inkra-radio-group__mark {
1507
1562
  color: var(--inkra-ink);
1563
+ position: relative;
1508
1564
  }
1509
1565
 
1510
1566
  .inkra-radio-group__icon {
@@ -1538,10 +1594,6 @@
1538
1594
  margin: 0;
1539
1595
  }
1540
1596
 
1541
- .inkra-radio-group__frame .inkra-selection-control:has(.inkra-selection-control__input:focus-visible) .inkra-radio-group__segment {
1542
- outline-offset: calc(-1 * var(--inkra-focus-width));
1543
- }
1544
-
1545
1597
  .inkra-radio-group__segment {
1546
1598
  align-items: center;
1547
1599
  color: var(--inkra-ink);
@@ -1592,7 +1644,7 @@
1592
1644
  display: inline-flex;
1593
1645
  height: 32px;
1594
1646
  justify-content: flex-start;
1595
- overflow: hidden;
1647
+ overflow: visible;
1596
1648
  padding-inline: 4px;
1597
1649
  width: 52px;
1598
1650
  }
@@ -1606,6 +1658,11 @@
1606
1658
  transition: transform var(--inkra-motion-fast) var(--inkra-ease);
1607
1659
  }
1608
1660
 
1661
+ .inkra-switch__track > .inkra-pencil-surface__ink {
1662
+ border-radius: inherit;
1663
+ overflow: hidden;
1664
+ }
1665
+
1609
1666
  .inkra-switch[data-checked="true"] .inkra-switch__thumb {
1610
1667
  --inkra-switch-thumb-shift: 20px;
1611
1668
 
@@ -1617,6 +1674,7 @@
1617
1674
  }
1618
1675
 
1619
1676
  @media (prefers-reduced-motion: reduce) {
1677
+ .inkra-selection-control__focus-ring,
1620
1678
  .inkra-radio-segment__surface,
1621
1679
  .inkra-switch__thumb {
1622
1680
  transition: none;
@@ -1634,11 +1692,17 @@
1634
1692
  z-index: auto;
1635
1693
  }
1636
1694
 
1637
- .inkra-selection-control__mark,
1638
- .inkra-switch__track,
1639
- .inkra-radio-segment__surface {
1695
+ .inkra-selection-control .inkra-selection-control__mark,
1696
+ .inkra-selection-control .inkra-switch__track,
1697
+ .inkra-selection-control .inkra-radio-segment__surface,
1698
+ .inkra-selection-control .inkra-selection-control__focus-ring {
1640
1699
  display: none;
1641
1700
  }
1701
+
1702
+ .inkra-selection-control__input:focus-visible {
1703
+ outline: var(--inkra-focus-width) solid Highlight;
1704
+ outline-offset: var(--inkra-focus-offset);
1705
+ }
1642
1706
  }
1643
1707
 
1644
1708
  .inkra-portal-theme-bridge {
@@ -1661,7 +1725,7 @@
1661
1725
  .inkra-overlay__content {
1662
1726
  animation: inkra-overlay-content-in var(--inkra-motion-normal) var(--inkra-ease) both;
1663
1727
  inset-block-start: 50%;
1664
- inset-inline-start: 50%;
1728
+ left: 50%;
1665
1729
  max-height: min(80vh, calc(100dvh - var(--inkra-space-8)));
1666
1730
  outline: 0;
1667
1731
  position: fixed;
@@ -1771,8 +1835,8 @@
1771
1835
 
1772
1836
  .inkra-popover__content {
1773
1837
  animation: inkra-popover-content-in var(--inkra-motion-normal) var(--inkra-ease) both;
1774
- max-height: min(70vh, var(--radix-popover-content-available-height, 70vh));
1775
- max-width: min(24rem, calc(100vw - var(--inkra-space-8)));
1838
+ max-height: min(70dvh, var(--radix-popover-content-available-height, 70dvh));
1839
+ max-width: min(24rem, var(--radix-popover-content-available-width, calc(100dvw - var(--inkra-space-6))));
1776
1840
  outline: 0;
1777
1841
  transform-origin: var(--radix-popover-content-transform-origin);
1778
1842
  width: max-content;
@@ -1789,6 +1853,7 @@
1789
1853
  display: block;
1790
1854
  max-height: inherit;
1791
1855
  max-width: inherit;
1856
+ min-width: 0;
1792
1857
  }
1793
1858
 
1794
1859
  .inkra-popover__content-body {
@@ -1796,11 +1861,18 @@
1796
1861
  max-height: inherit;
1797
1862
  max-width: inherit;
1798
1863
  overflow: auto;
1864
+ overflow-wrap: anywhere;
1799
1865
  overscroll-behavior: contain;
1800
1866
  padding: var(--inkra-space-4);
1801
1867
  scrollbar-gutter: stable;
1802
1868
  }
1803
1869
 
1870
+ .inkra-popover__title,
1871
+ .inkra-popover__description {
1872
+ max-width: 100%;
1873
+ overflow-wrap: anywhere;
1874
+ }
1875
+
1804
1876
  .inkra-popover__arrow {
1805
1877
  color: var(--inkra-paper);
1806
1878
  fill: currentcolor;
@@ -1918,11 +1990,45 @@
1918
1990
  }
1919
1991
  }
1920
1992
 
1921
- .inkra-search-select { width: 100%; min-width: 0; }
1922
- .inkra-search-select__anchor { display: flex; align-items: center; gap: 4px; min-width: 0; }
1923
- .inkra-search-select__anchor > .inkra-input-root,
1924
- .inkra-search-select__trigger { flex: 1; min-width: 0; }
1925
- .inkra-search-select__anchor > button:not(.inkra-search-select__trigger) { flex: none; }
1993
+ .inkra-search-select {
1994
+ --inkra-search-select-control-height: var(--inkra-control-md);
1995
+ --inkra-field-control-height: var(--inkra-search-select-control-height);
1996
+
1997
+ min-height: var(--inkra-touch-target);
1998
+ min-width: 0;
1999
+ width: 100%;
2000
+ }
2001
+ .inkra-search-select[data-size="sm"] { --inkra-search-select-control-height: var(--inkra-control-sm); }
2002
+ .inkra-search-select[data-size="lg"] { --inkra-search-select-control-height: var(--inkra-control-lg); }
2003
+ .inkra-search-select__anchor {
2004
+ align-items: center;
2005
+ block-size: var(--inkra-search-select-control-height);
2006
+ display: flex;
2007
+ gap: 0;
2008
+ min-width: 0;
2009
+ overflow: visible;
2010
+ width: 100%;
2011
+ }
2012
+ .inkra-search-select__input,
2013
+ .inkra-search-select__trigger { flex: 1 1 auto; min-width: 0; width: auto; }
2014
+ .inkra-search-select__input .inkra-search-select__input-control > .inkra-pencil-surface__ink,
2015
+ .inkra-search-select__input .inkra-search-select__input-control > .inkra-pencil-surface__border { display: none; }
2016
+ .inkra-search-select__anchor > .inkra-input__end-action { flex: 0 0 auto; }
2017
+ .inkra-search-select__anchor > .inkra-input__end-action:has(.inkra-search-select__clear:not([data-visible])) {
2018
+ display: none;
2019
+ }
2020
+ .inkra-search-select__trigger .inkra-button__content,
2021
+ .inkra-search-select__trigger .inkra-button__label,
2022
+ .inkra-search-select__trigger .inkra-button__label > span { min-width: 0; width: 100%; }
2023
+ .inkra-search-select__trigger .inkra-button__label > span { gap: var(--inkra-space-2); }
2024
+ .inkra-search-select__trigger .inkra-pencil-text { flex: 1 1 auto; min-width: 0; text-align: start; }
2025
+ .inkra-search-select__trigger .inkra-pencil-icon { flex: none; }
2026
+ .inkra-search-select__control:focus-within > .inkra-pencil-surface__ink,
2027
+ .inkra-search-select__control:focus-within > .inkra-pencil-surface__border {
2028
+ filter: contrast(1.28) saturate(1.08);
2029
+ }
2030
+ .inkra-search-select[data-disabled] .inkra-search-select__control { opacity: 0.55; }
2031
+ .inkra-search-select[data-disabled] :is(.inkra-input-root, .inkra-button) { opacity: 1; }
1926
2032
  .inkra-search-select__summary { display: block; margin-top: 8px; font-size: var(--inkra-text-sm); }
1927
2033
  .inkra-search-select__positioner { width: var(--anchor-width); max-width: calc(100vw - 16px); }
1928
2034
  .inkra-search-select__popup { outline: 0; width: 100%; }
@@ -1933,6 +2039,95 @@
1933
2039
  .inkra-search-select__popup [data-highlighted] .inkra-select__item-surface { color: var(--inkra-selection-foreground); }
1934
2040
  .inkra-search-select__popup [data-disabled] { opacity: 0.5; }
1935
2041
 
2042
+ .inkra-select-stepper {
2043
+ inline-size: 20rem;
2044
+ max-inline-size: 100%;
2045
+ vertical-align: middle;
2046
+ }
2047
+
2048
+ .inkra-select-stepper[data-full-width="true"] {
2049
+ display: flex;
2050
+ inline-size: 100%;
2051
+ }
2052
+
2053
+ .inkra-select-stepper .inkra-select-stepper__control,
2054
+ .inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
2055
+ flex-wrap: nowrap;
2056
+ gap: 0;
2057
+ padding-inline: 0;
2058
+ }
2059
+
2060
+ .inkra-select-stepper__control {
2061
+ outline: 0;
2062
+ }
2063
+
2064
+ .inkra-select-stepper__value {
2065
+ align-items: center;
2066
+ appearance: none;
2067
+ align-self: stretch;
2068
+ background: transparent;
2069
+ border: 0;
2070
+ box-sizing: border-box;
2071
+ color: var(--inkra-ink);
2072
+ cursor: default;
2073
+ display: flex;
2074
+ flex: 1 1 auto;
2075
+ font-family: var(--inkra-font-body);
2076
+ font-size: var(--inkra-field-control-font-size);
2077
+ justify-content: center;
2078
+ line-height: var(--inkra-line-ui);
2079
+ min-inline-size: 0;
2080
+ overflow: hidden;
2081
+ padding-inline: var(--inkra-field-control-padding);
2082
+ text-align: center;
2083
+ }
2084
+
2085
+ .inkra-select-stepper__value:focus-visible {
2086
+ outline: 0;
2087
+ }
2088
+
2089
+ .inkra-select-stepper__value[data-placeholder="true"] {
2090
+ color: var(--inkra-ink-subtle);
2091
+ }
2092
+
2093
+ .inkra-select-stepper__value .inkra-pencil-text {
2094
+ max-inline-size: 100%;
2095
+ }
2096
+
2097
+ .inkra-select-stepper__button .inkra-pencil-icon {
2098
+ transition: transform var(--inkra-motion-fast) var(--inkra-ease);
2099
+ }
2100
+
2101
+ .inkra-select-stepper:dir(rtl) .inkra-select-stepper__button .inkra-pencil-icon {
2102
+ transform: scaleX(-1);
2103
+ }
2104
+
2105
+ .inkra-select-stepper__native {
2106
+ block-size: 1px;
2107
+ clip-path: inset(50%);
2108
+ inline-size: 1px;
2109
+ inset: 50%;
2110
+ overflow: hidden;
2111
+ position: absolute;
2112
+ white-space: nowrap;
2113
+ }
2114
+
2115
+ @media (forced-colors: active) {
2116
+ .inkra-search-select__control {
2117
+ background: Canvas;
2118
+ border: 1px solid CanvasText;
2119
+ }
2120
+
2121
+ .inkra-search-select[data-invalid] .inkra-search-select__control {
2122
+ border-color: Mark;
2123
+ }
2124
+
2125
+ .inkra-select-stepper__value:focus-visible {
2126
+ outline: var(--inkra-focus-width) solid Highlight;
2127
+ outline-offset: calc(-1 * var(--inkra-focus-width));
2128
+ }
2129
+ }
2130
+
1936
2131
  .inkra-select__trigger {
1937
2132
  --inkra-select-height: var(--inkra-control-md);
1938
2133
  --inkra-select-font-size: var(--inkra-text-md);
@@ -2304,6 +2499,7 @@
2304
2499
 
2305
2500
  .inkra-select__trigger-icon,
2306
2501
  .inkra-select__focus-ring,
2502
+ .inkra-select-stepper__button .inkra-pencil-icon,
2307
2503
  .inkra-select__item-surface > .inkra-pencil-surface__ink {
2308
2504
  transition-duration: 0ms;
2309
2505
  }
@@ -2352,7 +2548,14 @@
2352
2548
  .inkra-tabs { min-width: 0; --inkra-tabs-font-size: var(--inkra-text-md); --inkra-tabs-padding: var(--inkra-space-3); --inkra-tabs-icon-size: 20px; }
2353
2549
  .inkra-tabs[data-size="sm"] { --inkra-tabs-font-size: var(--inkra-text-sm); --inkra-tabs-padding: var(--inkra-space-2); --inkra-tabs-icon-size: 16px; }
2354
2550
  .inkra-tabs[data-size="lg"] { --inkra-tabs-font-size: 17px; --inkra-tabs-padding: var(--inkra-space-4); --inkra-tabs-icon-size: 24px; }
2355
- .inkra-tabs__list { display: flex; gap: var(--inkra-space-2); max-width: 100%; overflow-x: auto; }
2551
+ .inkra-tabs__list {
2552
+ display: flex;
2553
+ gap: var(--inkra-space-2);
2554
+ max-width: 100%;
2555
+ overflow-x: auto;
2556
+ overflow-y: hidden;
2557
+ scroll-padding-inline: var(--inkra-focus-offset);
2558
+ }
2356
2559
  .inkra-tabs__list[data-orientation="vertical"] { flex-direction: column; }
2357
2560
  .inkra-tabs__list[data-divided] { gap: 24px; }
2358
2561
  .inkra-tabs__divider { position: absolute; color: var(--inkra-ink-muted); opacity: 0.56; }
@@ -2378,36 +2581,54 @@
2378
2581
  .inkra-tabs__trigger[data-state="active"] { color: var(--inkra-selection-foreground); }
2379
2582
  .inkra-tabs__trigger:disabled { cursor: not-allowed; opacity: 0.55; }
2380
2583
  .inkra-tabs__trigger:focus-visible { outline: 0; }
2381
- .inkra-tabs__focus-ring {
2584
+ .inkra-pencil-surface.inkra-tabs__focus-ring {
2382
2585
  --inkra-accent-strong: var(--inkra-focus);
2383
2586
  position: absolute !important;
2384
2587
  display: block !important;
2385
- inset: 0;
2588
+ inset: var(--inkra-focus-width);
2386
2589
  pointer-events: none;
2387
2590
  opacity: 0;
2388
2591
  z-index: 2;
2389
2592
  }
2390
- .inkra-tabs__trigger:focus-visible > .inkra-tabs__focus-ring { opacity: 1; }
2593
+ .inkra-tabs__trigger:focus-visible > .inkra-pencil-surface.inkra-tabs__focus-ring { opacity: 1; }
2391
2594
  .inkra-tabs__content:focus-visible {
2392
2595
  outline: var(--inkra-focus-width) solid var(--inkra-focus);
2393
2596
  outline-offset: calc(-1 * var(--inkra-focus-width));
2394
2597
  }
2395
- .inkra-tabs__selection { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
2396
- .inkra-tabs__trigger[data-state="active"] > .inkra-tabs__selection { opacity: 1; }
2598
+ .inkra-pencil-surface.inkra-tabs__selection { position: absolute; inset: 0; pointer-events: none; opacity: 0; }
2599
+ .inkra-tabs__trigger[data-state="active"] > .inkra-pencil-surface.inkra-tabs__selection { opacity: 1; }
2397
2600
  .inkra-tabs__label { position: relative; }
2398
2601
  .inkra-tabs__content { min-width: 0; }
2399
2602
  .inkra-tabs__content[hidden] { display: none !important; }
2603
+ .inkra-tabs__overflow { display: flex; align-items: center; min-width: 0; max-width: 100%; position: relative; }
2604
+ .inkra-tabs__overflow > .inkra-tabs__list { flex: 1 1 auto; min-width: 0; }
2605
+ .inkra-tabs__scroll-button, .inkra-tabs__more { flex: 0 0 44px; }
2606
+ .inkra-tabs__overflow-icon { display: inline-flex; width: 32px; height: 32px; position: relative; pointer-events: none; }
2607
+ .inkra-tabs__overflow-icon[data-down] { transform: rotate(90deg); }
2608
+ .inkra-tabs__overflow-icon > svg { position: absolute; inset: 0; width: 100%; height: 100%; }
2609
+ .inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: none; }
2610
+ .inkra-tabs__overflow-icon > canvas:not([data-pencil-icon-ready]) { visibility: hidden; }
2611
+ .inkra-tabs__list[data-overflow="menu"] { position: relative; overflow: hidden; }
2612
+ .inkra-tabs__list[data-overflow="menu"][data-full-width] > .inkra-tabs__trigger { flex: 1 0 auto; }
2613
+ .inkra-tabs__trigger[data-overflow-hidden] { position: absolute; visibility: hidden; pointer-events: none; inset-inline-start: 0; top: 0; }
2614
+ .inkra-tabs__list[data-overflow="buttons"] { scrollbar-width: none; }
2615
+ .inkra-tabs__list[data-overflow="buttons"]::-webkit-scrollbar { display: none; }
2400
2616
  @media (forced-colors: active) {
2401
- .inkra-tabs__focus-ring { display: none !important; }
2617
+ .inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
2618
+ .inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
2402
2619
  .inkra-tabs__trigger:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
2403
- .inkra-tabs__selection { display: none; }
2620
+ .inkra-pencil-surface.inkra-tabs__selection { display: none !important; }
2404
2621
  .inkra-tabs__trigger[data-state="active"] { color: Highlight; outline: 2px solid Highlight; outline-offset: -2px; }
2405
2622
  }
2406
- @media print { .inkra-tabs__selection, .inkra-tabs__focus-ring { display: none !important; } }
2623
+ @media print {
2624
+ .inkra-pencil-surface.inkra-tabs__selection, .inkra-pencil-surface.inkra-tabs__focus-ring { display: none !important; }
2625
+ .inkra-tabs__overflow-icon > [data-pencil-icon-ready] + svg { display: block; }
2626
+ }
2407
2627
 
2408
2628
  .inkra-tooltip__content {
2409
2629
  animation: inkra-tooltip-content-in var(--inkra-motion-fast) var(--inkra-ease) both;
2410
- max-width: min(20rem, calc(100vw - var(--inkra-space-4)));
2630
+ max-height: min(50dvh, var(--radix-tooltip-content-available-height, 50dvh));
2631
+ max-width: min(20rem, var(--radix-tooltip-content-available-width, calc(100dvw - var(--inkra-space-4))));
2411
2632
  outline: 0;
2412
2633
  transform-origin: var(--radix-tooltip-content-transform-origin);
2413
2634
  z-index: calc(var(--inkra-z-tooltip, 40) + var(--inkra-floating-layer-offset, 0));
@@ -2421,7 +2642,9 @@
2421
2642
  .inkra-tooltip__surface {
2422
2643
  color: var(--inkra-ink);
2423
2644
  display: block;
2645
+ max-height: inherit;
2424
2646
  max-width: inherit;
2647
+ min-width: 0;
2425
2648
  }
2426
2649
 
2427
2650
  .inkra-tooltip__content-body {
@@ -2429,9 +2652,13 @@
2429
2652
  font-family: var(--inkra-font-body);
2430
2653
  font-size: var(--inkra-text-sm);
2431
2654
  line-height: var(--inkra-line-ui);
2655
+ max-height: inherit;
2432
2656
  max-width: inherit;
2657
+ overflow: auto;
2433
2658
  overflow-wrap: anywhere;
2659
+ overscroll-behavior: contain;
2434
2660
  padding: var(--inkra-space-2) var(--inkra-space-3);
2661
+ scrollbar-gutter: stable;
2435
2662
  user-select: text;
2436
2663
  }
2437
2664
 
@@ -2541,7 +2768,7 @@
2541
2768
  --inkra-accent-strong: var(--inkra-focus);
2542
2769
 
2543
2770
  display: block !important;
2544
- inset: calc(-1 * var(--inkra-focus-offset));
2771
+ inset: var(--inkra-focus-width);
2545
2772
  opacity: 0;
2546
2773
  pointer-events: none;
2547
2774
  position: absolute !important;
@@ -2588,7 +2815,8 @@
2588
2815
  }
2589
2816
 
2590
2817
  .inkra-accordion__content[data-state="closed"] {
2591
- animation: inkra-accordion-content-up var(--inkra-motion-normal) var(--inkra-ease);
2818
+ animation: inkra-accordion-content-up var(--inkra-motion-normal) var(--inkra-ease) both;
2819
+ height: 0;
2592
2820
  }
2593
2821
 
2594
2822
  .inkra-accordion__content-body {
@@ -2609,6 +2837,10 @@
2609
2837
  pointer-events: none;
2610
2838
  }
2611
2839
 
2840
+ .inkra-accordion__content-body.inkra-accordion__content[data-state="closed"] {
2841
+ padding: 0;
2842
+ }
2843
+
2612
2844
  @keyframes inkra-accordion-body-in {
2613
2845
  from { opacity: 0; transform: translateY(calc(-1 * var(--inkra-space-1))); }
2614
2846
  to { opacity: 1; transform: translateY(0); }
@@ -2659,6 +2891,8 @@
2659
2891
 
2660
2892
  .inkra-accordion[data-orientation="horizontal"] .inkra-accordion__content[data-state="closed"] {
2661
2893
  animation-name: inkra-accordion-content-close-horizontal;
2894
+ height: auto;
2895
+ width: 0;
2662
2896
  }
2663
2897
 
2664
2898
  @media (prefers-reduced-motion: reduce) {
@@ -2674,13 +2908,13 @@
2674
2908
  }
2675
2909
 
2676
2910
  @media (forced-colors: active) {
2677
- .inkra-accordion__focus-ring {
2911
+ .inkra-pencil-surface.inkra-accordion__focus-ring {
2678
2912
  display: none !important;
2679
2913
  }
2680
2914
 
2681
2915
  .inkra-accordion__trigger:focus-visible {
2682
2916
  outline: var(--inkra-focus-width) solid Highlight;
2683
- outline-offset: var(--inkra-focus-offset);
2917
+ outline-offset: calc(-1 * var(--inkra-focus-width));
2684
2918
  }
2685
2919
 
2686
2920
  .inkra-accordion__trigger-icon::before {
@@ -2739,11 +2973,24 @@
2739
2973
  }
2740
2974
 
2741
2975
  .inkra-skeleton {
2976
+ --inkra-selection-pigment: var(--inkra-ink-muted);
2742
2977
  block-size: 16px;
2743
2978
  inline-size: 100%;
2744
2979
  max-inline-size: 100%;
2745
2980
  min-inline-size: 8px;
2746
2981
  }
2982
+ .inkra-skeleton[data-pencil-fallback="true"] {
2983
+ background: color-mix(in srgb, var(--inkra-ink-muted) 18%, transparent);
2984
+ border: 0;
2985
+ }
2986
+ .inkra-skeleton[data-animation="pulse"] { animation: inkra-skeleton-pulse calc(var(--inkra-motion-slow) * 4) var(--inkra-ease) infinite; }
2987
+ @keyframes inkra-skeleton-pulse {
2988
+ 0%, 100% { opacity: 1; }
2989
+ 50% { opacity: .45; }
2990
+ }
2991
+ @media (prefers-reduced-motion: reduce), (forced-colors: active), print {
2992
+ .inkra-skeleton[data-animation="pulse"] { animation: none; }
2993
+ }
2747
2994
 
2748
2995
  .inkra-progress {
2749
2996
  display: grid;
@@ -2971,11 +3218,18 @@
2971
3218
  .inkra-progress__segment-outline { border: 1px solid CanvasText; }
2972
3219
  .inkra-progress__segment-fill { background: Highlight; border: 0; }
2973
3220
 
2974
- .inkra-skeleton {
2975
- outline: 1px solid CanvasText;
3221
+ .inkra-skeleton.inkra-pencil-surface {
3222
+ background: CanvasText;
3223
+ border: 0;
3224
+ forced-color-adjust: none;
3225
+ opacity: .18;
2976
3226
  }
2977
3227
  }
2978
3228
 
3229
+ @media print {
3230
+ .inkra-skeleton.inkra-pencil-surface { background: color-mix(in srgb, currentColor 18%, transparent); border: 0; }
3231
+ }
3232
+
2979
3233
  @media print {
2980
3234
  .inkra-progress__ring-ink[data-ready="true"] { visibility: hidden; }
2981
3235
  .inkra-progress__ring-ink[data-ready="true"] + .inkra-progress__ring-fallback { visibility: visible; }
@@ -3017,6 +3271,8 @@
3017
3271
  .inkra-alert__icon { display: inline-flex; width: 20px; height: 20px; flex: none; }
3018
3272
  .inkra-alert__icon > * { width: 100%; height: 100%; }
3019
3273
  .inkra-alert__body { display: grid; gap: var(--inkra-space-2); min-width: 0; overflow-wrap: anywhere; }
3274
+ .inkra-alert:has(> .inkra-alert__close) .inkra-alert__body { flex: 1; }
3275
+ .inkra-alert__close { flex: none; align-self: flex-start; }
3020
3276
  .inkra-alert__title { margin: 0; font-size: 17px; line-height: var(--inkra-line-ui); }
3021
3277
  .inkra-alert__description { font-size: var(--inkra-text-md); line-height: var(--inkra-line-body); }
3022
3278
  .inkra-avatar { position: relative; display: inline-flex; width: 44px; height: 44px; flex: none; isolation: isolate; }
@@ -3065,8 +3321,8 @@
3065
3321
  .inkra-menu {
3066
3322
  --inkra-menu-enter-x: 0px;
3067
3323
  --inkra-menu-enter-y: var(--inkra-space-1);
3068
- min-width: 180px;
3069
- max-width: min(320px, calc(100vw - 16px));
3324
+ min-width: min(180px, var(--radix-dropdown-menu-content-available-width, calc(100vw - 16px)));
3325
+ max-width: min(320px, var(--radix-dropdown-menu-content-available-width, calc(100vw - 16px)), calc(100vw - 16px));
3070
3326
  outline: 0;
3071
3327
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
3072
3328
  z-index: calc(40 + var(--inkra-floating-layer-offset, 0));
@@ -3076,14 +3332,24 @@
3076
3332
  .inkra-menu[data-side="right"] { --inkra-menu-enter-x: var(--inkra-space-1); --inkra-menu-enter-y: 0px; }
3077
3333
  .inkra-menu[data-state="open"] { animation: inkra-menu-enter var(--inkra-motion-normal) var(--inkra-ease) both; }
3078
3334
  .inkra-menu[data-state="closed"] { animation: inkra-menu-exit var(--inkra-motion-fast) var(--inkra-ease) both; pointer-events: none; }
3079
- .inkra-menu__paper { padding: 4px; max-height: var(--radix-dropdown-menu-content-available-height); overflow-y: auto; }
3335
+ .inkra-menu__paper {
3336
+ box-sizing: border-box;
3337
+ max-height: min(var(--radix-dropdown-menu-content-available-height, calc(100dvh - 16px)), calc(100dvh - 16px));
3338
+ max-width: 100%;
3339
+ overflow-x: hidden;
3340
+ overflow-y: auto;
3341
+ overscroll-behavior: contain;
3342
+ padding: 4px;
3343
+ scrollbar-gutter: stable;
3344
+ }
3080
3345
  .inkra-menu__item { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 12px; min-height: 44px; box-sizing: border-box; color: var(--inkra-ink); outline: 0; cursor: default; font-family: var(--inkra-font-body); font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); }
3081
3346
  .inkra-menu__item[data-destructive] { color: var(--inkra-danger-foreground); }
3082
3347
  .inkra-menu__item[data-disabled] { opacity: 0.5; pointer-events: none; }
3083
3348
  .inkra-menu__highlight { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity var(--inkra-motion-fast) var(--inkra-ease); }
3084
3349
  .inkra-menu__item[data-highlighted] > .inkra-menu__highlight { opacity: 1; }
3085
3350
  .inkra-menu__icon { display: inline-flex; width: 16px; height: 16px; flex: none; position: relative; }
3086
- .inkra-menu__label { position: relative; min-width: 0; overflow-wrap: anywhere; }
3351
+ .inkra-menu__label { flex: 1 1 auto; position: relative; min-width: 0; overflow-wrap: anywhere; }
3352
+ .inkra-menu__label > .inkra-pencil-text { min-width: 0; overflow-wrap: anywhere; width: 100%; }
3087
3353
  .inkra-menu__group-label { padding: 8px 12px; color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); }
3088
3354
  .inkra-menu__separator { height: 8px; }
3089
3355
 
@@ -3107,7 +3373,18 @@
3107
3373
  }
3108
3374
  @media (forced-colors: active) {
3109
3375
  .inkra-menu { border: 1px solid CanvasText; background: Canvas; }
3110
- .inkra-menu__item[data-highlighted] { outline: 2px solid Highlight; outline-offset: -2px; }
3376
+ .inkra-menu__highlight { display: none !important; }
3377
+ .inkra-menu__item[data-highlighted] {
3378
+ background: Highlight;
3379
+ color: HighlightText;
3380
+ forced-color-adjust: none;
3381
+ outline: 2px solid Highlight;
3382
+ outline-offset: -2px;
3383
+ }
3384
+ .inkra-menu__item[data-disabled] { color: GrayText; opacity: 1; }
3385
+ .inkra-menu__icon .inkra-pencil-icon { display: none !important; }
3386
+ .inkra-menu__item[data-state="checked"] .inkra-menu__icon::after { content: "✓"; }
3387
+ .inkra-menu__item[data-state="indeterminate"] .inkra-menu__icon::after { content: "—"; }
3111
3388
  }
3112
3389
 
3113
3390
  .inkra-slot {
@@ -3221,15 +3498,22 @@
3221
3498
  }
3222
3499
 
3223
3500
  .inkra-log {
3501
+ box-sizing: border-box;
3224
3502
  color: var(--inkra-ink);
3503
+ container-type: inline-size;
3225
3504
  display: grid;
3226
- grid-template-rows: minmax(0, 1fr);
3505
+ grid-template-columns: minmax(0, 1fr);
3506
+ grid-template-rows: minmax(var(--inkra-touch-target), 1fr);
3507
+ inline-size: 100%;
3227
3508
  min-block-size: 12rem;
3228
3509
  min-inline-size: 0;
3229
- overflow: hidden;
3510
+ overflow-x: hidden;
3511
+ overflow-y: auto;
3230
3512
  }
3231
3513
 
3232
- .inkra-log[data-toolbar="true"] { grid-template-rows: auto minmax(0, 1fr); }
3514
+ .inkra-log[data-toolbar="true"] { grid-template-rows: auto minmax(var(--inkra-touch-target), 1fr); }
3515
+ .inkra-log:has(> .inkra-log__latest) { grid-template-rows: minmax(var(--inkra-touch-target), 1fr) auto; }
3516
+ .inkra-log[data-toolbar="true"]:has(> .inkra-log__latest) { grid-template-rows: auto minmax(var(--inkra-touch-target), 1fr) auto; }
3233
3517
 
3234
3518
  .inkra-log__toolbar {
3235
3519
  align-items: center;
@@ -3237,6 +3521,8 @@
3237
3521
  flex-wrap: wrap;
3238
3522
  gap: var(--inkra-space-2);
3239
3523
  justify-content: space-between;
3524
+ max-inline-size: 100%;
3525
+ min-inline-size: 0;
3240
3526
  padding: var(--inkra-space-2) var(--inkra-space-3);
3241
3527
  position: relative;
3242
3528
  }
@@ -3260,14 +3546,36 @@
3260
3546
  min-inline-size: 0;
3261
3547
  }
3262
3548
 
3549
+ .inkra-log__filters > .inkra-button { flex: none; max-inline-size: 100%; }
3550
+
3263
3551
  .inkra-log__filters .inkra-button[data-tone="info"] { color: var(--inkra-info-foreground); }
3264
3552
  .inkra-log__filters .inkra-button[data-tone="success"] { color: var(--inkra-success-foreground); }
3265
3553
  .inkra-log__filters .inkra-button[data-tone="warning"] { color: var(--inkra-warning-foreground); }
3266
3554
  .inkra-log__filters .inkra-button[data-tone="danger"] { color: var(--inkra-danger-foreground); }
3267
3555
  .inkra-log__follow-control { flex: none; }
3268
3556
 
3557
+ .inkra-log__viewport-frame {
3558
+ max-inline-size: 100%;
3559
+ min-block-size: var(--inkra-touch-target);
3560
+ min-inline-size: 0;
3561
+ position: relative;
3562
+ }
3563
+
3564
+ .inkra-log__focus-ring {
3565
+ --inkra-accent-strong: var(--inkra-focus);
3566
+ inset: var(--inkra-focus-width);
3567
+ opacity: 0;
3568
+ pointer-events: none;
3569
+ position: absolute !important;
3570
+ z-index: 3;
3571
+ }
3572
+
3269
3573
  .inkra-log__viewport {
3574
+ block-size: 100%;
3575
+ box-sizing: border-box;
3270
3576
  min-block-size: 0;
3577
+ max-inline-size: 100%;
3578
+ min-inline-size: 0;
3271
3579
  outline: 0;
3272
3580
  overflow: auto;
3273
3581
  overscroll-behavior: contain;
@@ -3276,10 +3584,11 @@
3276
3584
  }
3277
3585
 
3278
3586
  .inkra-log__viewport:focus-visible {
3279
- outline: var(--inkra-focus-width) solid var(--inkra-focus);
3280
- outline-offset: calc(-1 * var(--inkra-focus-width));
3587
+ outline: 0;
3281
3588
  }
3282
3589
 
3590
+ .inkra-log__viewport-frame:has(.inkra-log__viewport:focus-visible) > .inkra-log__focus-ring { opacity: 1; }
3591
+
3283
3592
  .inkra-log__list {
3284
3593
  display: grid;
3285
3594
  list-style: none;
@@ -3350,20 +3659,44 @@
3350
3659
  .inkra-log__latest {
3351
3660
  align-items: center;
3352
3661
  display: flex;
3353
- inset-block-end: var(--inkra-space-3);
3354
- inset-inline-end: var(--inkra-space-3);
3355
- position: absolute;
3662
+ justify-content: flex-end;
3663
+ max-inline-size: 100%;
3664
+ min-inline-size: 0;
3665
+ padding: var(--inkra-space-2) var(--inkra-space-3);
3666
+ position: relative;
3356
3667
  z-index: 2;
3357
3668
  }
3358
3669
 
3359
- @media (max-width: 36rem) {
3670
+ .inkra-log__latest-divider {
3671
+ color: var(--inkra-border);
3672
+ inset-block-start: -4px;
3673
+ inset-inline: 0;
3674
+ position: absolute;
3675
+ }
3676
+
3677
+ @container (max-width: 36rem) {
3360
3678
  .inkra-log__toolbar { align-items: stretch; }
3361
3679
  .inkra-log__filters { flex-basis: 100%; overflow-x: auto; flex-wrap: nowrap; padding-block-end: var(--inkra-space-1); }
3362
- .inkra-log__follow-control { margin-inline-start: auto; }
3680
+ .inkra-log__filters > .inkra-button .inkra-button__surface { height: auto; max-inline-size: 100%; min-height: var(--inkra-button-visual-height); padding-block: var(--inkra-space-2); }
3681
+ .inkra-log__filters > .inkra-button .inkra-button__content,
3682
+ .inkra-log__filters > .inkra-button .inkra-button__label,
3683
+ .inkra-log__filters > .inkra-button .inkra-pencil-text,
3684
+ .inkra-log__filters > .inkra-button .inkra-pencil-text__source { max-inline-size: 100%; min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
3685
+ .inkra-log__follow-control { inline-size: 100%; margin-inline-start: 0; }
3686
+ .inkra-log__follow-control .inkra-button__surface { height: auto; inline-size: 100%; max-inline-size: 100%; min-height: var(--inkra-button-visual-height); padding-block: var(--inkra-space-2); }
3687
+ .inkra-log__follow-control .inkra-button__content,
3688
+ .inkra-log__follow-control .inkra-button__label,
3689
+ .inkra-log__follow-control .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
3690
+ .inkra-log__latest .inkra-button { inline-size: 100%; }
3691
+ .inkra-log__latest .inkra-button__surface { height: auto; inline-size: 100%; max-inline-size: 100%; min-height: var(--inkra-button-visual-height); padding-block: var(--inkra-space-2); }
3692
+ .inkra-log__latest .inkra-button__content,
3693
+ .inkra-log__latest .inkra-button__label,
3694
+ .inkra-log__latest .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
3363
3695
  }
3364
3696
 
3365
3697
  @media (forced-colors: active) {
3366
- .inkra-log__viewport:focus-visible { outline-color: Highlight; }
3698
+ .inkra-pencil-surface.inkra-log__focus-ring { display: none !important; }
3699
+ .inkra-log__viewport:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
3367
3700
  .inkra-log__icon,
3368
3701
  .inkra-log__level { color: CanvasText; }
3369
3702
  }
@@ -3421,6 +3754,7 @@
3421
3754
  .inkra-hotkey-input {
3422
3755
  --inkra-hotkey-input-height: var(--inkra-control-md);
3423
3756
 
3757
+ position: relative;
3424
3758
  display: grid;
3425
3759
  inline-size: 20rem;
3426
3760
  max-inline-size: 100%;
@@ -3440,17 +3774,25 @@
3440
3774
  box-sizing: border-box;
3441
3775
  inline-size: 100%;
3442
3776
  min-inline-size: 0;
3443
- min-block-size: max(var(--inkra-hotkey-input-height), var(--inkra-touch-target));
3777
+ block-size: var(--inkra-hotkey-input-height);
3778
+ min-block-size: var(--inkra-hotkey-input-height);
3444
3779
  align-items: center;
3780
+ margin-block: max(0px, calc((var(--inkra-touch-target) - var(--inkra-hotkey-input-height)) / 2));
3781
+ }
3782
+
3783
+ .inkra-hotkey-input__control > .inkra-pencil-surface__content {
3784
+ overflow: visible;
3785
+ clip-path: none;
3445
3786
  }
3446
3787
 
3447
3788
  .inkra-hotkey-input__native {
3448
3789
  position: absolute;
3449
3790
  z-index: 2;
3450
- inset: 0;
3791
+ inset-inline: 0;
3792
+ inset-block: min(0px, calc((var(--inkra-hotkey-input-height) - var(--inkra-touch-target)) / 2));
3451
3793
  box-sizing: border-box;
3452
3794
  inline-size: 100%;
3453
- block-size: 100%;
3795
+ block-size: auto;
3454
3796
  border: 0;
3455
3797
  outline: 0;
3456
3798
  background: transparent;
@@ -3474,19 +3816,45 @@
3474
3816
  }
3475
3817
 
3476
3818
  .inkra-hotkey-input:has(.inkra-hotkey-input__clear) .inkra-hotkey-input__value {
3477
- padding-inline-end: calc(var(--inkra-touch-target) + var(--inkra-space-2));
3819
+ padding-inline-end: calc(max(var(--inkra-touch-target), var(--inkra-hotkey-input-height)) + var(--inkra-space-2));
3478
3820
  }
3479
3821
 
3480
3822
  .inkra-hotkey-input__placeholder { color: var(--inkra-ink-subtle); }
3481
3823
 
3824
+ .inkra-hotkey-input__recording {
3825
+ color: var(--inkra-accent-strong);
3826
+ }
3827
+
3828
+ .inkra-hotkey-input__focus-ring {
3829
+ position: absolute !important;
3830
+ z-index: 4;
3831
+ inset: 2px;
3832
+ opacity: 0;
3833
+ pointer-events: none;
3834
+ transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
3835
+ }
3836
+
3837
+ .inkra-hotkey-input[data-recording="true"] .inkra-hotkey-input__focus-ring { opacity: 1; }
3838
+
3839
+ .inkra-hotkey-input__status {
3840
+ position: absolute;
3841
+ inline-size: 1px;
3842
+ block-size: 1px;
3843
+ padding: 0;
3844
+ margin: -1px;
3845
+ overflow: hidden;
3846
+ clip: rect(0, 0, 0, 0);
3847
+ white-space: nowrap;
3848
+ }
3849
+
3482
3850
  .inkra-hotkey-input__clear {
3483
3851
  position: absolute;
3484
3852
  z-index: 3;
3485
- inset-block: 0;
3853
+ inset-block: min(0px, calc((var(--inkra-hotkey-input-height) - var(--inkra-touch-target)) / 2));
3486
3854
  inset-inline-end: 0;
3487
3855
  display: inline-flex;
3488
- inline-size: var(--inkra-touch-target);
3489
- block-size: 100%;
3856
+ inline-size: max(var(--inkra-touch-target), var(--inkra-hotkey-input-height));
3857
+ block-size: auto;
3490
3858
  align-items: center;
3491
3859
  justify-content: center;
3492
3860
  border: 0;
@@ -3514,6 +3882,10 @@
3514
3882
  .inkra-hotkey-input__message { color: Mark; }
3515
3883
  }
3516
3884
 
3885
+ @media (prefers-reduced-motion: reduce) {
3886
+ .inkra-hotkey-input__focus-ring { transition: none; }
3887
+ }
3888
+
3517
3889
  @media print {
3518
3890
  .inkra-hotkey__key,
3519
3891
  .inkra-hotkey-input__control { border: 1px solid currentColor; }
@@ -3603,7 +3975,7 @@
3603
3975
  }
3604
3976
  }
3605
3977
 
3606
- .inkra-audio-player { box-sizing: border-box; color: var(--inkra-ink); display: grid; gap: var(--inkra-space-3); min-inline-size: 0; padding: var(--inkra-space-4); width: min(100%, 42rem); }
3978
+ .inkra-audio-player { box-sizing: border-box; color: var(--inkra-ink); container-type: inline-size; display: grid; gap: var(--inkra-space-3); min-inline-size: 0; padding: var(--inkra-space-4); width: min(100%, 42rem); }
3607
3979
  .inkra-audio-player > audio { height: 1px; opacity: 0; position: absolute; width: 1px; }
3608
3980
  .inkra-audio-player__controls { align-items: center; display: flex; flex-wrap: wrap; gap: var(--inkra-space-2); min-inline-size: 0; }
3609
3981
  .inkra-audio-player__seek { flex: 1 1 12rem; min-inline-size: 8rem; }
@@ -3611,12 +3983,13 @@
3611
3983
  .inkra-audio-player__seek .inkra-slider, .inkra-audio-player__volume .inkra-slider { min-inline-size: 0; width: 100%; }
3612
3984
  .inkra-audio-player__seek .inkra-slider { --inkra-slider-track-size: 28px; }
3613
3985
  .inkra-audio-player__volume .inkra-slider { --inkra-slider-track-size: 24px; }
3614
- .inkra-audio-player__settings { align-items: center; display: flex; flex: 0 1 auto; gap: var(--inkra-space-2); min-inline-size: 0; }
3615
- .inkra-audio-player__time { color: var(--inkra-ink-muted); font-variant-numeric: tabular-nums; min-inline-size: 7rem; text-align: center; }
3986
+ .inkra-audio-player__settings { align-items: center; display: flex; flex: 0 1 auto; flex-wrap: wrap; gap: var(--inkra-space-2); min-inline-size: 0; }
3987
+ .inkra-audio-player__time { color: var(--inkra-ink-muted); font-variant-numeric: tabular-nums; min-inline-size: 7rem; max-inline-size: 100%; overflow-wrap: anywhere; text-align: center; }
3616
3988
  .inkra-audio-player__settings > .inkra-select__trigger { flex: none; min-width: 5.5rem; }
3617
3989
  .inkra-audio-player__message { color: var(--inkra-ink-muted); margin: 0; }
3618
3990
  .inkra-audio-player__sr-only { block-size: 1px; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden; position: absolute; white-space: nowrap; inline-size: 1px; }
3619
- @media (max-width: 40rem) { .inkra-audio-player__controls { align-items: stretch; } .inkra-audio-player__time { flex: 1 0 100%; order: 4; text-align: start; } .inkra-audio-player__seek { flex-basis: 10rem; } .inkra-audio-player__settings { flex: 1 1 100%; order: 5; } .inkra-audio-player__volume { flex: 1 1 8rem; } }
3991
+ @container (max-width: 40rem) { .inkra-audio-player__controls { align-items: stretch; } .inkra-audio-player__time { flex: 1 0 100%; min-inline-size: 0; order: 4; text-align: start; } .inkra-audio-player__seek { flex-basis: 10rem; } .inkra-audio-player__settings { flex: 1 1 100%; order: 5; } .inkra-audio-player__volume { flex: 1 1 8rem; } }
3992
+ @container (max-width: 20rem) { .inkra-audio-player__controls { display: grid; grid-template-columns: var(--inkra-touch-target) minmax(0, 1fr); } .inkra-audio-player__seek { min-inline-size: 0; } .inkra-audio-player__time, .inkra-audio-player__settings { grid-column: 1 / -1; } .inkra-audio-player__settings { display: grid; grid-template-columns: var(--inkra-touch-target) minmax(0, 1fr); width: 100%; } .inkra-audio-player__volume { min-inline-size: 0; } .inkra-audio-player__settings > .inkra-select__trigger { grid-column: 1 / -1; min-width: 0; width: 100%; } }
3620
3993
  @media (forced-colors: active) {
3621
3994
  .inkra-audio-player__controls { color: ButtonText; }
3622
3995
  .inkra-audio-player__time, .inkra-audio-player__message { color: CanvasText; }
@@ -3627,8 +4000,6 @@
3627
4000
 
3628
4001
  .inkra-carousel {
3629
4002
  --inkra-carousel-gap: 16px;
3630
- --inkra-carousel-visible: var(--inkra-carousel-visible-base, 1);
3631
-
3632
4003
  container-type: inline-size;
3633
4004
  display: grid;
3634
4005
  gap: var(--inkra-space-3);
@@ -3637,7 +4008,19 @@
3637
4008
  position: relative;
3638
4009
  }
3639
4010
 
4011
+ .inkra-carousel__focus-ring {
4012
+ --inkra-accent-strong: var(--inkra-focus);
4013
+ inset: var(--inkra-focus-width);
4014
+ opacity: 0;
4015
+ pointer-events: none;
4016
+ position: absolute !important;
4017
+ z-index: 3;
4018
+ }
4019
+ .inkra-carousel:focus-visible { outline: 0; }
4020
+ .inkra-carousel:focus-visible > .inkra-carousel__focus-ring { opacity: 1; }
4021
+
3640
4022
  .inkra-carousel__viewport {
4023
+ --inkra-carousel-visible: var(--inkra-carousel-visible-base, 1);
3641
4024
  cursor: grab;
3642
4025
  min-inline-size: 0;
3643
4026
  overflow: hidden;
@@ -3648,8 +4031,8 @@
3648
4031
  .inkra-carousel[data-disabled] .inkra-carousel__viewport { cursor: default; }
3649
4032
 
3650
4033
  .inkra-carousel__container {
4034
+ column-gap: var(--inkra-carousel-gap);
3651
4035
  display: flex;
3652
- margin-inline-end: calc(-1 * var(--inkra-carousel-gap));
3653
4036
  min-inline-size: 0;
3654
4037
  }
3655
4038
 
@@ -3657,7 +4040,6 @@
3657
4040
  box-sizing: border-box;
3658
4041
  flex: 0 0 calc((100% - (var(--inkra-carousel-visible) - 1) * var(--inkra-carousel-gap)) / var(--inkra-carousel-visible));
3659
4042
  min-inline-size: 0;
3660
- padding-inline-end: var(--inkra-carousel-gap);
3661
4043
  position: relative;
3662
4044
  }
3663
4045
 
@@ -3715,15 +4097,21 @@
3715
4097
  pointer-events: none;
3716
4098
  }
3717
4099
 
4100
+ .inkra-carousel__page-focus {
4101
+ --inkra-accent-strong: var(--inkra-focus);
4102
+ block-size: calc(var(--inkra-touch-target) - 4px);
4103
+ inline-size: calc(var(--inkra-touch-target) - 4px);
4104
+ opacity: 0;
4105
+ pointer-events: none;
4106
+ position: absolute !important;
4107
+ }
4108
+
3718
4109
  .inkra-carousel__page[aria-current="true"] .inkra-carousel__page-mark {
3719
4110
  block-size: 14px;
3720
4111
  inline-size: 14px;
3721
4112
  }
3722
4113
 
3723
- .inkra-carousel__page:focus-visible .inkra-carousel__page-mark {
3724
- --inkra-border: var(--inkra-focus);
3725
- --inkra-border-strong: var(--inkra-focus);
3726
- }
4114
+ .inkra-carousel__page:focus-visible .inkra-carousel__page-focus { opacity: 1; }
3727
4115
 
3728
4116
  .inkra-carousel__empty {
3729
4117
  align-items: center;
@@ -3748,18 +4136,18 @@
3748
4136
  }
3749
4137
 
3750
4138
  @container (min-width: 30rem) {
3751
- .inkra-carousel { --inkra-carousel-visible: var(--inkra-carousel-visible-sm, var(--inkra-carousel-visible-base, 1)); }
4139
+ .inkra-carousel__viewport { --inkra-carousel-visible: var(--inkra-carousel-visible-sm, var(--inkra-carousel-visible-base, 1)); }
3752
4140
  }
3753
4141
 
3754
4142
  @container (min-width: 48rem) {
3755
- .inkra-carousel { --inkra-carousel-visible: var(--inkra-carousel-visible-md, var(--inkra-carousel-visible-sm, var(--inkra-carousel-visible-base, 1))); }
4143
+ .inkra-carousel__viewport { --inkra-carousel-visible: var(--inkra-carousel-visible-md, var(--inkra-carousel-visible-sm, var(--inkra-carousel-visible-base, 1))); }
3756
4144
  }
3757
4145
 
3758
4146
  @container (min-width: 64rem) {
3759
- .inkra-carousel { --inkra-carousel-visible: var(--inkra-carousel-visible-lg, var(--inkra-carousel-visible-md, var(--inkra-carousel-visible-sm, var(--inkra-carousel-visible-base, 1)))); }
4147
+ .inkra-carousel__viewport { --inkra-carousel-visible: var(--inkra-carousel-visible-lg, var(--inkra-carousel-visible-md, var(--inkra-carousel-visible-sm, var(--inkra-carousel-visible-base, 1)))); }
3760
4148
  }
3761
4149
 
3762
- @media (max-width: 390px) {
4150
+ @container (max-width: 390px) {
3763
4151
  .inkra-carousel__toolbar { align-items: flex-start; flex-wrap: wrap; }
3764
4152
  .inkra-carousel__pagination { order: 3; flex-basis: 100%; }
3765
4153
  }
@@ -3769,21 +4157,25 @@
3769
4157
  }
3770
4158
 
3771
4159
  @media (forced-colors: active) {
4160
+ .inkra-pencil-surface.inkra-carousel__focus-ring,
4161
+ .inkra-pencil-surface.inkra-carousel__page-focus { display: none !important; }
4162
+ .inkra-carousel:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
3772
4163
  .inkra-carousel__page-mark { background: Canvas; border: 1px solid ButtonText; }
3773
4164
  .inkra-carousel__page[aria-current="true"] .inkra-carousel__page-mark { background: Highlight; border-color: Highlight; forced-color-adjust: none; }
3774
- .inkra-carousel__page:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: var(--inkra-focus-offset); }
4165
+ .inkra-carousel__page:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
3775
4166
  }
3776
4167
 
3777
4168
  @media print {
3778
4169
  .inkra-carousel__toolbar { display: none; }
3779
4170
  .inkra-carousel__viewport { overflow: visible; }
3780
- .inkra-carousel__container { flex-wrap: wrap; gap: var(--inkra-carousel-gap); margin: 0; }
3781
- .inkra-carousel__slide { flex-basis: auto; padding: 0; }
4171
+ .inkra-carousel__container { flex-wrap: wrap; gap: var(--inkra-carousel-gap); }
4172
+ .inkra-carousel__slide { flex-basis: auto; }
3782
4173
  }
3783
4174
 
3784
4175
  .inkra-choice-grid {
3785
4176
  border: 0;
3786
4177
  color: var(--inkra-ink);
4178
+ container-type: inline-size;
3787
4179
  margin: 0;
3788
4180
  max-inline-size: 100%;
3789
4181
  min-inline-size: 0;
@@ -3824,6 +4216,7 @@ div.inkra-choice-grid > .inkra-radio-group {
3824
4216
  }
3825
4217
 
3826
4218
  .inkra-choice-grid__selection,
4219
+ .inkra-choice-grid__focus,
3827
4220
  .inkra-choice-grid__outline {
3828
4221
  inset: 0;
3829
4222
  pointer-events: none;
@@ -3835,6 +4228,13 @@ div.inkra-choice-grid > .inkra-radio-group {
3835
4228
  z-index: 0;
3836
4229
  }
3837
4230
 
4231
+ .inkra-choice-grid__focus {
4232
+ --inkra-accent-strong: var(--inkra-focus);
4233
+ inset: calc(-1 * var(--inkra-focus-offset));
4234
+ opacity: 0;
4235
+ z-index: 3;
4236
+ }
4237
+
3838
4238
  .inkra-choice-grid__outline { z-index: 2; }
3839
4239
 
3840
4240
  .inkra-choice-grid__option:has(.inkra-selection-control__input:checked) .inkra-choice-grid__selection {
@@ -3921,6 +4321,10 @@ div.inkra-choice-grid > .inkra-radio-group {
3921
4321
  overflow-wrap: anywhere;
3922
4322
  }
3923
4323
 
4324
+ .inkra-choice-grid__control .inkra-selection-control__focus-ring {
4325
+ display: none !important;
4326
+ }
4327
+
3924
4328
  .inkra-choice-grid__messages {
3925
4329
  display: grid;
3926
4330
  gap: var(--inkra-space-1);
@@ -3942,8 +4346,11 @@ div.inkra-choice-grid > .inkra-radio-group {
3942
4346
  }
3943
4347
 
3944
4348
  .inkra-choice-grid__option:has(.inkra-selection-control__input:focus-visible) {
3945
- outline: var(--inkra-focus-width) solid var(--inkra-focus);
3946
- outline-offset: var(--inkra-focus-offset);
4349
+ outline: none;
4350
+ }
4351
+
4352
+ .inkra-choice-grid__option:has(.inkra-selection-control__input:focus-visible) .inkra-choice-grid__focus {
4353
+ opacity: 1;
3947
4354
  }
3948
4355
 
3949
4356
  .inkra-choice-grid__option:has(.inkra-selection-control__input:focus-visible) .inkra-selection-control__mark {
@@ -3957,6 +4364,13 @@ div.inkra-choice-grid > .inkra-radio-group {
3957
4364
  }
3958
4365
  }
3959
4366
 
4367
+ @container (max-width: 640px) {
4368
+ .inkra-choice-grid[data-columns] .inkra-radio-group__items,
4369
+ .inkra-choice-grid[data-columns] .inkra-choice-grid__items {
4370
+ grid-template-columns: minmax(0, 1fr);
4371
+ }
4372
+ }
4373
+
3960
4374
  @media (forced-colors: active) {
3961
4375
  .inkra-choice-grid__option {
3962
4376
  border: 1px solid CanvasText;
@@ -3968,12 +4382,70 @@ div.inkra-choice-grid > .inkra-radio-group {
3968
4382
  outline-offset: -3px;
3969
4383
  }
3970
4384
 
3971
- .inkra-choice-grid__selection,
3972
- .inkra-choice-grid__outline {
4385
+ .inkra-choice-grid__option:has(.inkra-selection-control__input:focus-visible) {
4386
+ outline: var(--inkra-focus-width) solid Highlight;
4387
+ outline-offset: var(--inkra-focus-offset);
4388
+ }
4389
+
4390
+ .inkra-choice-grid__option > .inkra-choice-grid__selection,
4391
+ .inkra-choice-grid__option > .inkra-choice-grid__focus,
4392
+ .inkra-choice-grid__option > .inkra-choice-grid__outline {
3973
4393
  display: none;
3974
4394
  }
4395
+
4396
+ .inkra-choice-grid__control > .inkra-selection-control__input:focus-visible {
4397
+ outline: none;
4398
+ }
4399
+ }
4400
+
4401
+
4402
+ .inkra-color-swatch {
4403
+ flex: none;
4404
+ }
4405
+
4406
+ .inkra-color-swatch__background {
4407
+ display: block;
4408
+ inline-size: 100%;
4409
+ block-size: 100%;
4410
+ border-radius: 3px;
4411
+ forced-color-adjust: none;
4412
+ }
4413
+
4414
+ .inkra-color-swatch__pigment,
4415
+ .inkra-color-swatch__wash {
4416
+ display: block;
4417
+ inline-size: 28px;
4418
+ block-size: 28px;
4419
+ pointer-events: none;
4420
+ }
4421
+
4422
+ .inkra-color-swatch[data-swatch-size="sm"] .inkra-color-swatch__pigment,
4423
+ .inkra-color-swatch[data-swatch-size="sm"] .inkra-color-swatch__wash {
4424
+ inline-size: 20px;
4425
+ block-size: 20px;
4426
+ }
4427
+
4428
+ .inkra-color-swatch[data-swatch-size="lg"] .inkra-color-swatch__pigment,
4429
+ .inkra-color-swatch[data-swatch-size="lg"] .inkra-color-swatch__wash {
4430
+ inline-size: 32px;
4431
+ block-size: 32px;
4432
+ }
4433
+
4434
+ .inkra-color-swatch__wash[data-pencil-fallback="true"] {
4435
+ background: currentColor;
4436
+ border: 0;
3975
4437
  }
3976
4438
 
4439
+ @media (forced-colors: active) {
4440
+ .inkra-color-swatch__pigment {
4441
+ background: currentColor;
4442
+ forced-color-adjust: none;
4443
+ }
4444
+ .inkra-color-swatch[aria-pressed="true"] {
4445
+ outline: 2px solid Highlight;
4446
+ outline-offset: -3px;
4447
+ }
4448
+ }
3977
4449
 
3978
4450
  .inkra-color-picker {
3979
4451
  box-sizing: border-box;
@@ -3982,7 +4454,7 @@ div.inkra-choice-grid > .inkra-radio-group {
3982
4454
  min-inline-size: 0;
3983
4455
  inline-size: min(100%, 28rem);
3984
4456
  margin: 0;
3985
- padding: var(--inkra-space-4);
4457
+ padding: 0;
3986
4458
  border: 0;
3987
4459
  color: var(--inkra-ink);
3988
4460
  font-family: var(--inkra-font-body);
@@ -3994,25 +4466,71 @@ div.inkra-choice-grid > .inkra-radio-group {
3994
4466
  }
3995
4467
 
3996
4468
  .inkra-color-picker__legend {
3997
- padding: 0;
4469
+ padding: 0 0 var(--inkra-space-2);
3998
4470
  color: var(--inkra-ink);
3999
- font-size: var(--inkra-text-lg);
4471
+ font-size: var(--inkra-text-md);
4472
+ }
4473
+
4474
+ .inkra-color-picker__editor {
4475
+ display: grid;
4476
+ gap: var(--inkra-space-3);
4477
+ min-inline-size: 0;
4478
+ }
4479
+
4480
+ .inkra-color-picker__gradient {
4481
+ display: grid;
4482
+ gap: var(--inkra-space-3);
4483
+ min-inline-size: 0;
4484
+ inline-size: 100%;
4485
+ }
4486
+ .inkra-color-picker__types { max-inline-size: 100%; }
4487
+ .inkra-color-picker__gradient-preview {
4488
+ position: relative;
4489
+ isolation: isolate;
4490
+ block-size: 88px;
4491
+ inline-size: 100%;
4492
+ forced-color-adjust: none;
4000
4493
  }
4494
+ .inkra-color-picker__stop-toolbar,
4495
+ .inkra-color-picker__stops,
4496
+ .inkra-color-picker__stop-actions,
4497
+ .inkra-color-picker__radial-options {
4498
+ display: flex;
4499
+ flex-wrap: wrap;
4500
+ align-items: center;
4501
+ gap: var(--inkra-space-2);
4502
+ min-inline-size: 0;
4503
+ }
4504
+ .inkra-color-picker__stop-toolbar { justify-content: space-between; }
4505
+ .inkra-color-picker__stop-actions { gap: 0; }
4506
+ .inkra-color-picker__stop { display: grid; justify-items: center; font-size: var(--inkra-text-sm); }
4507
+ .inkra-color-picker__stop-position {
4508
+ display: grid;
4509
+ grid-template-columns: minmax(0, 6rem) minmax(0, 1fr);
4510
+ align-items: end;
4511
+ gap: var(--inkra-space-3);
4512
+ }
4513
+ .inkra-color-picker__geometry {
4514
+ display: grid;
4515
+ grid-template-columns: repeat(auto-fit, minmax(min(100%, 6rem), 1fr));
4516
+ gap: var(--inkra-space-3);
4517
+ }
4518
+ .inkra-color-picker__gradient .inkra-input-root { inline-size: 100%; }
4519
+ .inkra-color-picker__radial-options > * { max-inline-size: 100%; }
4001
4520
 
4002
4521
  .inkra-color-picker__main {
4003
4522
  display: grid;
4004
4523
  grid-template-columns: var(--inkra-control-lg) minmax(0, 1fr);
4005
4524
  gap: var(--inkra-space-3);
4006
- align-items: start;
4525
+ align-items: center;
4007
4526
  min-width: 0;
4008
4527
  }
4009
4528
 
4010
- .inkra-color-picker__palette,
4011
- .inkra-color-picker__preset {
4529
+ .inkra-color-picker__palette {
4012
4530
  position: relative;
4013
4531
  isolation: isolate;
4014
4532
  display: block;
4015
- overflow: hidden;
4533
+ overflow: visible;
4016
4534
  box-sizing: border-box;
4017
4535
  flex: none;
4018
4536
  padding: 0;
@@ -4042,20 +4560,26 @@ div.inkra-choice-grid > .inkra-radio-group {
4042
4560
  background-size: 12px 12px;
4043
4561
  }
4044
4562
 
4045
- .inkra-color-picker__current,
4046
- .inkra-color-picker__preset-color {
4563
+ .inkra-color-picker__current {
4047
4564
  position: absolute;
4048
4565
  z-index: -1;
4049
4566
  inset: 3px;
4050
4567
  }
4051
4568
 
4052
4569
  .inkra-color-picker__palette-outline,
4053
- .inkra-color-picker__preset-outline {
4570
+ .inkra-color-picker__focus {
4054
4571
  position: absolute !important;
4055
4572
  inset: 0;
4056
4573
  pointer-events: none;
4057
4574
  }
4058
4575
 
4576
+ .inkra-color-picker__focus {
4577
+ --inkra-accent-strong: var(--inkra-focus);
4578
+ inset: calc(-1 * var(--inkra-focus-offset));
4579
+ opacity: 0;
4580
+ z-index: 2;
4581
+ }
4582
+
4059
4583
  .inkra-color-picker__native {
4060
4584
  position: absolute;
4061
4585
  z-index: 1;
@@ -4068,10 +4592,8 @@ div.inkra-choice-grid > .inkra-radio-group {
4068
4592
  opacity: 0;
4069
4593
  }
4070
4594
 
4071
- .inkra-color-picker__palette:focus-within,
4072
- .inkra-color-picker__preset:focus-visible {
4073
- outline: var(--inkra-focus-width) solid var(--inkra-focus);
4074
- outline-offset: var(--inkra-focus-offset);
4595
+ .inkra-color-picker__palette:focus-within .inkra-color-picker__focus {
4596
+ opacity: 1;
4075
4597
  }
4076
4598
 
4077
4599
  .inkra-color-picker__value-field {
@@ -4124,17 +4646,14 @@ div.inkra-choice-grid > .inkra-radio-group {
4124
4646
  }
4125
4647
 
4126
4648
  .inkra-color-picker__presets {
4127
- display: grid;
4128
- grid-template-columns: repeat(auto-fill, minmax(44px, 1fr));
4649
+ display: flex;
4650
+ flex-wrap: wrap;
4129
4651
  gap: var(--inkra-space-2);
4130
4652
  min-width: 0;
4131
4653
  }
4132
4654
 
4133
4655
  .inkra-color-picker__preset {
4134
- width: 100%;
4135
4656
  min-width: var(--inkra-touch-target);
4136
- height: var(--inkra-touch-target);
4137
- cursor: pointer;
4138
4657
  }
4139
4658
 
4140
4659
  .inkra-color-picker__preset:disabled,
@@ -4142,27 +4661,72 @@ div.inkra-choice-grid > .inkra-radio-group {
4142
4661
  cursor: not-allowed;
4143
4662
  }
4144
4663
 
4145
- @media (max-width: 360px) {
4146
- .inkra-color-picker {
4147
- padding: var(--inkra-space-3);
4148
- }
4664
+ .inkra-color-picker__trigger-content {
4665
+ display: flex;
4666
+ align-items: center;
4667
+ gap: var(--inkra-space-2);
4668
+ }
4149
4669
 
4150
- .inkra-color-picker__main {
4151
- grid-template-columns: 1fr;
4152
- }
4670
+ .inkra-color-picker__preview {
4671
+ position: relative;
4672
+ isolation: isolate;
4673
+ flex: none;
4674
+ inline-size: 28px;
4675
+ block-size: 28px;
4676
+ }
4677
+
4678
+ .inkra-color-picker__trigger {
4679
+ justify-self: start;
4680
+ max-inline-size: 100%;
4681
+ }
4682
+
4683
+ .inkra-color-picker__popover {
4684
+ inline-size: min(22rem, calc(100vw - 24px));
4685
+ max-inline-size: var(--radix-popover-content-available-width);
4686
+ }
4687
+
4688
+ .inkra-color-picker__editor[data-presentation="compact"] {
4689
+ display: flex;
4690
+ flex-wrap: wrap;
4691
+ align-items: center;
4692
+ column-gap: var(--inkra-space-4);
4693
+ }
4694
+
4695
+ .inkra-color-picker__editor[data-presentation="compact"] .inkra-color-picker__main {
4696
+ flex: 1 1 12rem;
4697
+ }
4698
+
4699
+ .inkra-color-picker__editor[data-presentation="compact"] .inkra-color-picker__alpha {
4700
+ flex: 1 1 8rem;
4701
+ }
4702
+
4703
+ .inkra-color-picker__editor[data-presentation="compact"] .inkra-color-picker__presets {
4704
+ flex-basis: 100%;
4705
+ }
4706
+
4707
+ .inkra-color-picker__editor[data-presentation="compact"] .inkra-color-picker__divider {
4708
+ display: none;
4153
4709
  }
4154
4710
 
4155
4711
  @media (forced-colors: active) {
4156
- .inkra-color-picker__palette,
4157
- .inkra-color-picker__preset {
4712
+ .inkra-color-picker__palette {
4158
4713
  border: 1px solid ButtonText;
4159
4714
  forced-color-adjust: none;
4160
4715
  }
4161
4716
 
4162
- .inkra-color-picker__palette:focus-within,
4163
- .inkra-color-picker__preset:focus-visible {
4717
+ .inkra-color-picker__palette:focus-within {
4718
+ outline: var(--inkra-focus-width) solid Highlight;
4719
+ outline-offset: var(--inkra-focus-offset);
4164
4720
  outline-color: Highlight;
4165
4721
  }
4722
+
4723
+ .inkra-color-picker__focus {
4724
+ display: none !important;
4725
+ }
4726
+
4727
+ .inkra-color-picker__preview {
4728
+ forced-color-adjust: none;
4729
+ }
4166
4730
  }
4167
4731
 
4168
4732
  .inkra-context-menu__anchor {
@@ -4185,7 +4749,8 @@ div.inkra-choice-grid > .inkra-radio-group {
4185
4749
  }
4186
4750
 
4187
4751
  .inkra-context-menu__sub-content {
4188
- max-block-size: var(--radix-dropdown-menu-content-available-height);
4752
+ max-block-size: var(--radix-dropdown-menu-content-available-height, calc(100dvh - 16px));
4753
+ max-inline-size: min(320px, var(--radix-dropdown-menu-content-available-width, calc(100vw - 16px)), calc(100vw - 16px));
4189
4754
  transform-origin: var(--radix-dropdown-menu-content-transform-origin);
4190
4755
  }
4191
4756
 
@@ -4312,51 +4877,150 @@ div.inkra-choice-grid > .inkra-radio-group {
4312
4877
  }
4313
4878
 
4314
4879
  .inkra-editable {
4880
+ --inkra-editable-control-height: var(--inkra-control-md);
4881
+
4882
+ display: inline-grid;
4883
+ inline-size: min(100%, 30rem);
4884
+ min-inline-size: 0;
4315
4885
  color: var(--inkra-ink);
4316
- display: inline-flex;
4317
- flex-direction: column;
4886
+ vertical-align: middle;
4887
+ }
4888
+
4889
+ .inkra-editable[data-size="sm"] { --inkra-editable-control-height: var(--inkra-control-sm); }
4890
+ .inkra-editable[data-size="lg"] { --inkra-editable-control-height: var(--inkra-control-lg); }
4891
+
4892
+ .inkra-editable__frame {
4893
+ display: grid;
4894
+ min-inline-size: 0;
4895
+ align-items: start;
4318
4896
  gap: var(--inkra-space-2);
4319
- max-inline-size: 100%;
4897
+ min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
4898
+ }
4899
+
4900
+ .inkra-editable__display-shell {
4901
+ position: relative;
4902
+ display: grid;
4320
4903
  min-inline-size: 0;
4321
- vertical-align: middle;
4904
+ min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
4905
+ align-items: center;
4906
+ }
4907
+
4908
+ .inkra-editable__focus-ring {
4909
+ position: absolute !important;
4910
+ inset-inline: 0;
4911
+ inset-block: 50% auto;
4912
+ block-size: var(--inkra-editable-control-height);
4913
+ transform: translateY(-50%);
4914
+ opacity: 0;
4915
+ pointer-events: none;
4916
+ transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
4917
+ }
4918
+
4919
+ .inkra-editable__display-shell:has(:focus-visible) .inkra-editable__focus-ring {
4920
+ opacity: 1;
4322
4921
  }
4323
4922
 
4324
4923
  .inkra-editable__display {
4924
+ position: relative;
4925
+ z-index: 1;
4926
+ display: flex;
4927
+ min-inline-size: 0;
4928
+ box-sizing: border-box;
4929
+ inline-size: 100%;
4930
+ min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
4325
4931
  align-items: center;
4326
- border-radius: var(--inkra-radius-sm);
4327
- cursor: text;
4328
- display: inline-flex;
4329
- min-block-size: var(--inkra-touch-target);
4330
- min-inline-size: 2.75rem;
4932
+ padding: 0 var(--inkra-space-3);
4933
+ border: 0;
4331
4934
  outline: 0;
4935
+ background: transparent;
4936
+ color: inherit;
4937
+ font: inherit;
4938
+ cursor: text;
4332
4939
  overflow-wrap: anywhere;
4333
- padding-inline: var(--inkra-space-2);
4334
- position: relative;
4335
4940
  text-align: start;
4336
- transition: background-color var(--inkra-motion-fast) var(--inkra-ease), outline-color var(--inkra-motion-fast) var(--inkra-ease);
4337
4941
  }
4338
4942
 
4339
- .inkra-editable__display:hover { background: color-mix(in srgb, var(--inkra-accent-soft) 12%, transparent); }
4340
- .inkra-editable__display:focus-visible { outline: var(--inkra-focus-width) solid var(--inkra-focus); outline-offset: var(--inkra-focus-offset); }
4341
- .inkra-editable__display[aria-disabled="true"] { cursor: default; opacity: .62; }
4342
-
4343
- .inkra-editable__editor { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--inkra-space-2); min-inline-size: min(100%, 15rem); }
4344
- .inkra-editable__editor > :first-child { flex: 1 1 12rem; min-inline-size: 0; }
4345
- .inkra-editable__actions { display: inline-flex; flex: 0 0 auto; flex-wrap: wrap; gap: var(--inkra-space-2); min-block-size: var(--inkra-touch-target); align-items: center; }
4346
- .inkra-editable__error { color: var(--inkra-danger); font-size: var(--inkra-text-sm); inline-size: 100%; }
4943
+ .inkra-editable[data-multiline="true"] .inkra-editable__display {
4944
+ block-size: auto;
4945
+ min-block-size: var(--inkra-editable-control-height);
4946
+ align-items: flex-start;
4947
+ padding-block: var(--inkra-space-2);
4948
+ white-space: pre-wrap;
4949
+ }
4347
4950
 
4348
- @media (max-width: 30rem) {
4349
- .inkra-editable__editor { align-items: stretch; flex-direction: column; }
4350
- .inkra-editable__editor > :first-child, .inkra-editable__actions { inline-size: 100%; }
4951
+ .inkra-editable[data-disabled="true"] .inkra-editable__display,
4952
+ .inkra-editable[data-readonly="true"] .inkra-editable__display {
4953
+ cursor: default;
4351
4954
  }
4352
4955
 
4353
- @media (prefers-reduced-motion: reduce) { .inkra-editable__display { transition: none; } }
4354
- @media (forced-colors: active) {
4355
- .inkra-editable__display:hover { background: transparent; }
4356
- .inkra-editable__display:focus-visible { outline: 2px solid Highlight; }
4357
- .inkra-editable__error { color: CanvasText; }
4956
+ .inkra-editable[data-disabled="true"] .inkra-editable__display-shell {
4957
+ opacity: .62;
4958
+ }
4959
+
4960
+ .inkra-editable__editor {
4961
+ display: grid;
4962
+ min-inline-size: 0;
4963
+ min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
4964
+ align-content: center;
4965
+ gap: var(--inkra-space-2);
4966
+ }
4967
+
4968
+ .inkra-editable__editor > :first-child {
4969
+ inline-size: 100%;
4970
+ min-inline-size: 0;
4971
+ }
4972
+
4973
+ .inkra-editable__actions {
4974
+ display: inline-grid;
4975
+ flex: none;
4976
+ min-block-size: max(var(--inkra-editable-control-height), var(--inkra-touch-target));
4977
+ grid-template-columns: repeat(2, var(--inkra-touch-target));
4978
+ align-items: center;
4979
+ }
4980
+
4981
+ .inkra-editable__action {
4982
+ inline-size: var(--inkra-touch-target);
4983
+ block-size: var(--inkra-touch-target);
4984
+ }
4985
+
4986
+ .inkra-editable__custom-trigger {
4987
+ position: absolute;
4988
+ inline-size: 1px;
4989
+ block-size: 1px;
4990
+ overflow: hidden;
4991
+ clip-path: inset(50%);
4992
+ white-space: nowrap;
4993
+ }
4994
+
4995
+ .inkra-editable__select-row,
4996
+ .inkra-editable__custom-row {
4997
+ display: grid;
4998
+ grid-template-columns: minmax(0, 1fr) auto;
4999
+ align-items: start;
5000
+ gap: var(--inkra-space-1);
5001
+ min-inline-size: 0;
5002
+ }
5003
+
5004
+ .inkra-editable__error {
5005
+ inline-size: 100%;
5006
+ color: var(--inkra-danger-foreground, var(--inkra-danger));
5007
+ font-size: var(--inkra-text-sm);
5008
+ }
5009
+
5010
+ @media (prefers-reduced-motion: reduce) {
5011
+ .inkra-editable__focus-ring { transition: none; }
5012
+ }
5013
+
5014
+ @media (forced-colors: active) {
5015
+ .inkra-editable__display-shell:has(:focus-visible) { outline: 2px solid Highlight; outline-offset: -2px; }
5016
+ .inkra-editable__focus-ring { display: none; }
5017
+ .inkra-editable__error { color: Mark; }
5018
+ }
5019
+
5020
+ @media print {
5021
+ .inkra-editable__actions,
5022
+ .inkra-editable__focus-ring { display: none; }
4358
5023
  }
4359
- @media print { .inkra-editable__display { background: transparent; } }
4360
5024
 
4361
5025
  .inkra-tilt {
4362
5026
  --inkra-tilt-response: 120ms;
@@ -4952,40 +5616,91 @@ div.inkra-choice-grid > .inkra-radio-group {
4952
5616
  }
4953
5617
 
4954
5618
  .inkra-image-viewer.inkra-overlay__content {
4955
- height: min(52rem, calc(100dvh - var(--inkra-space-8)));
4956
- max-height: calc(100dvh - var(--inkra-space-8));
4957
- width: min(72rem, calc(100vw - var(--inkra-space-8)));
5619
+ animation: inkra-image-viewer-in var(--inkra-motion-normal) var(--inkra-ease) both;
5620
+ height: 100dvh;
5621
+ inset: 0;
5622
+ left: 0;
5623
+ max-height: none;
5624
+ max-width: none;
5625
+ transform: none;
5626
+ width: 100dvw;
4958
5627
  }
4959
5628
 
4960
- .inkra-image-viewer .inkra-overlay__surface,
4961
- .inkra-image-viewer .inkra-overlay__content-body {
4962
- height: 100%;
5629
+ .inkra-image-viewer.inkra-overlay__content[data-state="closed"] {
5630
+ animation: inkra-image-viewer-out var(--inkra-motion-normal) var(--inkra-ease) both;
4963
5631
  }
4964
5632
 
4965
- .inkra-image-viewer__description {
5633
+ .inkra-image-viewer > .inkra-overlay__surface {
5634
+ border-radius: 0;
5635
+ block-size: 0;
5636
+ inline-size: 0;
5637
+ inset: 0;
5638
+ max-height: none;
5639
+ overflow: visible;
4966
5640
  position: absolute;
4967
- width: 1px;
4968
- height: 1px;
5641
+ }
5642
+
5643
+ .inkra-image-viewer > .inkra-overlay__surface { background: var(--inkra-paper); }
5644
+
5645
+ .inkra-image-viewer > .inkra-overlay__surface > .inkra-pencil-surface__ink { display: none !important; }
5646
+
5647
+ .inkra-image-viewer > .inkra-overlay__surface > .inkra-overlay__content-body {
5648
+ background: var(--inkra-paper);
5649
+ display: flex;
5650
+ flex-direction: column;
5651
+ height: 100dvh;
5652
+ inset: 0;
5653
+ max-height: none;
5654
+ overflow: hidden;
4969
5655
  padding: 0;
5656
+ position: fixed;
5657
+ width: 100dvw;
5658
+ }
5659
+
5660
+ .inkra-image-viewer__accessible-label {
5661
+ block-size: 1px;
5662
+ clip: rect(0 0 0 0);
5663
+ clip-path: inset(50%);
5664
+ inline-size: 1px;
4970
5665
  margin: -1px;
4971
5666
  overflow: hidden;
4972
- clip: rect(0, 0, 0, 0);
5667
+ padding: 0;
5668
+ position: absolute;
4973
5669
  white-space: nowrap;
4974
5670
  }
4975
5671
 
5672
+ .inkra-image-viewer__close-control {
5673
+ inset-block-start: max(var(--inkra-space-3), env(safe-area-inset-top));
5674
+ inset-inline-end: max(var(--inkra-space-3), env(safe-area-inset-right));
5675
+ isolation: isolate;
5676
+ position: absolute;
5677
+ z-index: 8;
5678
+ }
5679
+
5680
+ .inkra-image-viewer__close-paper {
5681
+ inset: 0;
5682
+ pointer-events: none;
5683
+ position: absolute !important;
5684
+ z-index: 0;
5685
+ }
5686
+
5687
+ .inkra-image-viewer__close-control > .inkra-button { position: relative; z-index: 1; }
5688
+
4976
5689
  .inkra-image-viewer__counter {
4977
5690
  color: var(--inkra-ink-muted);
5691
+ flex: 0 0 auto;
4978
5692
  font-size: var(--inkra-text-sm);
4979
5693
  line-height: var(--inkra-line-ui);
5694
+ unicode-bidi: isolate;
5695
+ white-space: nowrap;
4980
5696
  }
4981
5697
 
4982
5698
  .inkra-image-viewer__body {
4983
5699
  display: grid;
4984
5700
  flex: 1 1 auto;
4985
- min-block-size: 0;
5701
+ min-block-size: var(--inkra-touch-target);
4986
5702
  min-inline-size: 0;
4987
5703
  overflow: hidden;
4988
- padding: var(--inkra-space-4);
4989
5704
  }
4990
5705
 
4991
5706
  .inkra-image-viewer__stage,
@@ -4993,192 +5708,348 @@ div.inkra-choice-grid > .inkra-radio-group {
4993
5708
  min-block-size: 0;
4994
5709
  min-inline-size: 0;
4995
5710
  outline: 0;
5711
+ position: relative;
4996
5712
  }
4997
5713
 
4998
5714
  .inkra-image-viewer__stage {
4999
- position: relative;
5000
- display: grid;
5001
- place-items: center;
5002
- overflow: hidden;
5003
- background: var(--inkra-surface-muted);
5004
5715
  background: color-mix(in srgb, var(--inkra-ink) 7%, var(--inkra-paper));
5005
- border-radius: var(--inkra-radius-md);
5006
5716
  contain: layout paint;
5717
+ display: grid;
5718
+ overflow: hidden;
5719
+ place-items: center;
5007
5720
  }
5008
5721
 
5009
- .inkra-image-viewer__stage:focus-visible {
5010
- box-shadow: inset 0 0 0 var(--inkra-focus-width) var(--inkra-focus);
5722
+ .inkra-image-viewer__stage-focus {
5723
+ --inkra-accent-strong: var(--inkra-focus);
5724
+
5725
+ display: block !important;
5726
+ inset: var(--inkra-focus-width);
5727
+ opacity: 0;
5728
+ pointer-events: none;
5729
+ position: absolute !important;
5730
+ z-index: 7;
5011
5731
  }
5012
5732
 
5733
+ .inkra-image-viewer__stage:focus-visible > .inkra-image-viewer__stage-focus,
5734
+ .inkra-image-viewer__state:focus-visible > .inkra-image-viewer__stage-focus { opacity: 1; }
5735
+
5013
5736
  .inkra-image-viewer__image {
5737
+ block-size: 100%;
5014
5738
  display: block;
5015
5739
  inline-size: 100%;
5016
- block-size: 100%;
5017
- max-inline-size: 100%;
5018
5740
  max-block-size: 100%;
5741
+ max-inline-size: 100%;
5019
5742
  object-fit: contain;
5020
5743
  user-select: none;
5021
5744
  }
5022
5745
 
5023
- .inkra-image-viewer__pan-zoom,
5024
- .inkra-image-viewer__pan-zoom > .react-transform-wrapper {
5025
- inline-size: 100%;
5746
+ .inkra-image-viewer .inkra-image-viewer__pan-zoom.inkra-pan-zoom {
5747
+ --inkra-pan-zoom-min-block-size: 0px;
5748
+ }
5749
+
5750
+ .inkra-image-viewer .inkra-image-viewer__pan-zoom,
5751
+ .inkra-image-viewer .inkra-image-viewer__pan-zoom > .inkra-pan-zoom__clip,
5752
+ .inkra-image-viewer .inkra-image-viewer__pan-zoom > .inkra-pan-zoom__clip > .react-transform-wrapper,
5753
+ .inkra-image-viewer .inkra-image-viewer__pan-zoom .inkra-pan-zoom__viewport {
5026
5754
  block-size: 100%;
5755
+ inline-size: 100%;
5756
+ max-block-size: 100%;
5027
5757
  min-block-size: 0;
5028
5758
  }
5029
5759
 
5030
5760
  .inkra-image-viewer__pan-zoom .inkra-pan-zoom__viewport {
5031
- inline-size: 100%;
5032
- block-size: 100%;
5033
- min-block-size: 0;
5761
+ background: transparent;
5034
5762
  border: 0;
5035
5763
  border-radius: 0;
5036
- background: transparent;
5037
5764
  }
5038
5765
 
5039
5766
  .inkra-image-viewer__pan-zoom .inkra-pan-zoom__content {
5040
- inline-size: 100%;
5041
- block-size: 100%;
5042
5767
  align-items: center;
5768
+ block-size: 100%;
5769
+ inline-size: 100%;
5043
5770
  justify-content: center;
5044
5771
  }
5045
5772
 
5046
5773
  .inkra-image-viewer__image-transform {
5774
+ block-size: 100%;
5047
5775
  display: grid;
5048
5776
  inline-size: 100%;
5049
- block-size: 100%;
5050
5777
  place-items: center;
5051
5778
  transform-origin: center;
5052
5779
  }
5053
5780
 
5054
- .inkra-image-viewer__tools {
5055
- position: absolute;
5056
- inset-block-end: var(--inkra-space-3);
5057
- inset-inline-start: 50%;
5058
- display: flex;
5059
- align-items: center;
5060
- gap: var(--inkra-space-1);
5061
- transform: translateX(-50%);
5062
- z-index: 1;
5063
- }
5064
-
5065
5781
  .inkra-image-viewer__navigation {
5066
- position: absolute;
5067
5782
  inset: 0;
5068
5783
  pointer-events: none;
5784
+ position: absolute;
5069
5785
  }
5070
5786
 
5071
5787
  .inkra-image-viewer__navigation > .inkra-button {
5072
- position: absolute;
5073
5788
  inset-block-start: 50%;
5074
- transform: translateY(-50%);
5075
5789
  pointer-events: auto;
5790
+ position: absolute;
5791
+ transform: translateY(-50%);
5076
5792
  }
5077
5793
 
5078
- .inkra-image-viewer__previous { inset-inline-start: var(--inkra-space-3); }
5079
- .inkra-image-viewer__next { inset-inline-end: var(--inkra-space-3); }
5794
+ .inkra-image-viewer__previous { inset-inline-start: max(var(--inkra-space-3), env(safe-area-inset-left)); }
5795
+ .inkra-image-viewer__next { inset-inline-end: max(var(--inkra-space-3), env(safe-area-inset-right)); }
5080
5796
 
5081
5797
  .inkra-image-viewer__state {
5082
- display: grid;
5083
5798
  align-content: center;
5084
- justify-items: center;
5799
+ display: grid;
5085
5800
  gap: var(--inkra-space-3);
5801
+ justify-items: center;
5802
+ overflow-wrap: anywhere;
5086
5803
  padding: var(--inkra-space-5);
5087
5804
  text-align: center;
5088
- overflow-wrap: anywhere;
5089
5805
  }
5090
5806
 
5091
5807
  .inkra-image-viewer__state h3,
5092
5808
  .inkra-image-viewer__state p { margin: 0; }
5093
5809
  .inkra-image-viewer__state p { color: var(--inkra-ink-muted); }
5094
5810
 
5095
- .inkra-image-viewer__thumbnails {
5811
+ .inkra-image-viewer__bottom {
5812
+ flex: none;
5813
+ max-block-size: min(34dvh, 15rem);
5814
+ min-inline-size: 0;
5815
+ overflow: auto;
5816
+ overscroll-behavior: contain;
5817
+ padding-block-end: env(safe-area-inset-bottom);
5818
+ scrollbar-gutter: auto;
5819
+ }
5820
+
5821
+ .inkra-image-viewer__bottom-row {
5822
+ align-items: center;
5823
+ display: flex;
5824
+ gap: var(--inkra-space-3);
5825
+ justify-content: center;
5826
+ min-block-size: var(--inkra-touch-target);
5827
+ min-inline-size: 0;
5828
+ overflow-x: auto;
5829
+ overscroll-behavior-inline: contain;
5830
+ padding: var(--inkra-space-2) var(--inkra-space-4);
5831
+ scrollbar-gutter: auto;
5832
+ }
5833
+
5834
+ .inkra-image-viewer__tools {
5835
+ align-items: center;
5836
+ display: flex;
5837
+ flex: none;
5838
+ gap: var(--inkra-space-1);
5839
+ isolation: isolate;
5840
+ max-inline-size: 100%;
5841
+ overflow-x: auto;
5842
+ overscroll-behavior-inline: contain;
5843
+ padding: var(--inkra-focus-offset);
5844
+ position: relative;
5845
+ scrollbar-gutter: auto;
5846
+ }
5847
+
5848
+ .inkra-image-viewer__video-navigation {
5849
+ align-items: center;
5850
+ align-self: center;
5096
5851
  display: flex;
5097
5852
  flex: none;
5098
5853
  gap: var(--inkra-space-2);
5854
+ min-inline-size: max-content;
5855
+ }
5856
+
5857
+ .inkra-image-viewer__tools-paper {
5858
+ inset: 0;
5859
+ pointer-events: none;
5860
+ position: absolute !important;
5861
+ z-index: 0;
5862
+ }
5863
+ .inkra-image-viewer__tools > .inkra-button { position: relative; z-index: 1; }
5864
+
5865
+ .inkra-image-viewer__thumbnails {
5866
+ display: flex;
5867
+ gap: var(--inkra-space-2);
5868
+ justify-content: safe center;
5099
5869
  min-inline-size: 0;
5100
5870
  overflow-x: auto;
5101
5871
  overscroll-behavior-inline: contain;
5102
- padding: var(--inkra-space-3) var(--inkra-space-5) var(--inkra-space-4);
5103
- scrollbar-gutter: stable;
5872
+ padding: var(--inkra-space-2) var(--inkra-space-4) var(--inkra-space-3);
5873
+ scrollbar-gutter: auto;
5104
5874
  }
5105
5875
 
5106
5876
  .inkra-image-viewer__thumbnail {
5107
- position: relative;
5108
- flex: 0 0 5rem;
5109
- inline-size: 5rem;
5877
+ background: transparent;
5110
5878
  block-size: 3.75rem;
5111
- padding: 0;
5112
5879
  border: 0;
5113
5880
  color: inherit;
5114
- background: transparent;
5115
5881
  cursor: pointer;
5882
+ flex: 0 0 5rem;
5883
+ inline-size: 5rem;
5884
+ padding: 0;
5885
+ position: relative;
5116
5886
  }
5117
5887
 
5118
5888
  .inkra-image-viewer__thumbnail-surface,
5119
5889
  .inkra-image-viewer__thumbnail-focus {
5120
- position: absolute;
5121
- inset: 0;
5122
5890
  display: block;
5891
+ inset: 0;
5892
+ position: absolute;
5123
5893
  }
5124
5894
 
5125
- .inkra-image-viewer__thumbnail-focus {
5126
- opacity: 0;
5895
+ .inkra-image-viewer__thumbnail-surface { align-items: center; justify-content: center; }
5896
+ .inkra-image-viewer__thumbnail-video {
5897
+ align-items: center;
5898
+ block-size: 1.75rem;
5899
+ display: inline-flex !important;
5900
+ inline-size: 1.75rem;
5901
+ inset-block-end: var(--inkra-space-1);
5902
+ inset-inline-end: var(--inkra-space-1);
5903
+ justify-content: center;
5127
5904
  pointer-events: none;
5905
+ position: absolute !important;
5906
+ z-index: 2;
5128
5907
  }
5129
-
5908
+ .inkra-image-viewer__thumbnail-focus { opacity: 0; pointer-events: none; }
5130
5909
  .inkra-image-viewer__thumbnail:focus-visible { outline: 0; }
5131
5910
  .inkra-image-viewer__thumbnail:focus-visible .inkra-image-viewer__thumbnail-focus { opacity: 1; }
5132
5911
 
5133
5912
  .inkra-image-viewer__thumbnail-image {
5134
- position: absolute;
5135
- inset: var(--inkra-space-1);
5136
- inline-size: calc(100% - var(--inkra-space-2));
5137
5913
  block-size: calc(100% - var(--inkra-space-2));
5138
5914
  border-radius: var(--inkra-radius-sm);
5915
+ inline-size: calc(100% - var(--inkra-space-2));
5916
+ inset: var(--inkra-space-1);
5139
5917
  object-fit: cover;
5140
5918
  pointer-events: none;
5919
+ position: absolute;
5141
5920
  user-select: none;
5142
5921
  }
5143
5922
 
5144
- @media (max-width: 30rem) {
5145
- .inkra-image-viewer.inkra-overlay__content {
5146
- height: calc(100dvh - var(--inkra-space-4));
5147
- max-height: calc(100dvh - var(--inkra-space-4));
5148
- width: calc(100vw - var(--inkra-space-4));
5149
- }
5923
+ @keyframes inkra-image-viewer-in { from { opacity: 0; } to { opacity: 1; } }
5924
+ @keyframes inkra-image-viewer-out { from { opacity: 1; } to { opacity: 0; } }
5925
+
5926
+ @media (max-width: 30rem) and (min-height: 30.001rem) {
5927
+ .inkra-image-viewer__bottom-row { align-items: stretch; flex-direction: column; gap: var(--inkra-space-1); }
5928
+ .inkra-image-viewer__counter { align-self: center; }
5929
+ .inkra-image-viewer__tools { align-self: center; }
5930
+ }
5150
5931
 
5151
- .inkra-image-viewer__body { padding: var(--inkra-space-2); }
5932
+ @media (max-width: 30rem) {
5152
5933
  .inkra-image-viewer__previous { inset-inline-start: var(--inkra-space-2); }
5153
5934
  .inkra-image-viewer__next { inset-inline-end: var(--inkra-space-2); }
5154
5935
  .inkra-image-viewer__thumbnails { padding-inline: var(--inkra-space-3); }
5155
- .inkra-image-viewer__tools { inset-block-end: var(--inkra-space-2); }
5936
+ }
5937
+
5938
+ @media (max-height: 30rem) {
5939
+ .inkra-image-viewer__bottom { max-block-size: min(40dvh, 12rem); }
5940
+ .inkra-image-viewer__bottom-row { justify-content: safe center; padding-block: var(--inkra-space-1); }
5941
+ .inkra-image-viewer__thumbnails { padding-block: var(--inkra-space-1); }
5942
+ .inkra-image-viewer__thumbnail { block-size: var(--inkra-touch-target); }
5943
+ }
5944
+
5945
+ @media (prefers-reduced-motion: reduce) {
5946
+ .inkra-image-viewer.inkra-overlay__content { animation: none !important; }
5156
5947
  }
5157
5948
 
5158
5949
  @media (forced-colors: active) {
5159
5950
  .inkra-image-viewer__stage { border: 1px solid CanvasText; }
5951
+ .inkra-pencil-surface.inkra-image-viewer__stage-focus,
5952
+ .inkra-pencil-surface.inkra-image-viewer__tools-paper,
5953
+ .inkra-pencil-surface.inkra-image-viewer__close-paper { display: none !important; }
5954
+ .inkra-image-viewer__stage:focus-visible,
5955
+ .inkra-image-viewer__state:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
5160
5956
  .inkra-image-viewer__thumbnail { border: 1px solid CanvasText; }
5161
5957
  .inkra-image-viewer__thumbnail[aria-selected="true"] { border-width: 3px; }
5958
+ .inkra-pencil-surface.inkra-image-viewer__thumbnail-video { display: none !important; }
5162
5959
  .inkra-image-viewer__pan-zoom .inkra-pan-zoom__viewport { border: 0; }
5163
5960
  }
5164
5961
 
5165
5962
  @media print {
5963
+ .inkra-image-viewer__close-control,
5166
5964
  .inkra-image-viewer__navigation,
5167
- .inkra-image-viewer__thumbnails { display: none; }
5168
- }
5169
-
5170
- .inkra-keypad {
5171
- --inkra-keypad-columns: 3;
5172
- display: grid;
5173
- gap: var(--inkra-space-2);
5174
- inline-size: min(100%, 24rem);
5175
- min-inline-size: 0;
5965
+ .inkra-image-viewer__bottom { display: none; }
5176
5966
  }
5177
5967
 
5178
- .inkra-keypad__row {
5968
+ .inkra-image-viewer__video-resource {
5969
+ block-size: 100%;
5970
+ box-sizing: border-box;
5971
+ container-type: inline-size;
5179
5972
  display: grid;
5180
- grid-template-columns: repeat(var(--inkra-keypad-columns), minmax(0, 1fr));
5181
- gap: var(--inkra-space-2);
5973
+ grid-template-rows: minmax(var(--inkra-touch-target), 1fr) auto;
5974
+ inline-size: 100%;
5975
+ min-block-size: 0;
5976
+ min-inline-size: 0;
5977
+ overflow: hidden;
5978
+ }
5979
+
5980
+ .inkra-image-viewer__video-media {
5981
+ align-self: stretch;
5982
+ background: #000;
5983
+ block-size: 100%;
5984
+ display: block;
5985
+ inline-size: 100%;
5986
+ min-block-size: 0;
5987
+ object-fit: contain;
5988
+ }
5989
+
5990
+ .inkra-image-viewer__video-controls {
5991
+ align-items: center;
5992
+ background: var(--inkra-paper);
5993
+ box-sizing: border-box;
5994
+ color: var(--inkra-ink);
5995
+ display: grid;
5996
+ gap: var(--inkra-space-2);
5997
+ grid-template-areas:
5998
+ "play seek time"
5999
+ "settings settings settings";
6000
+ grid-template-columns: var(--inkra-touch-target) minmax(var(--inkra-touch-target), 1fr) minmax(0, 6.5rem);
6001
+ grid-template-rows: minmax(var(--inkra-touch-target), auto) minmax(var(--inkra-touch-target), auto);
6002
+ inline-size: 100%;
6003
+ min-inline-size: 0;
6004
+ padding: var(--inkra-space-2) var(--inkra-space-3);
6005
+ }
6006
+
6007
+ .inkra-image-viewer__video-play { grid-area: play; }
6008
+ .inkra-image-viewer__video-seek { grid-area: seek; min-inline-size: 0; }
6009
+ .inkra-image-viewer__video-volume { grid-area: volume; min-inline-size: 0; }
6010
+ .inkra-image-viewer__video-seek .inkra-slider,
6011
+ .inkra-image-viewer__video-volume .inkra-slider { inline-size: 100%; min-inline-size: 0; }
6012
+ .inkra-image-viewer__video-time { color: var(--inkra-ink-muted); font-variant-numeric: tabular-nums; grid-area: time; min-inline-size: 0; overflow-wrap: anywhere; text-align: center; unicode-bidi: isolate; }
6013
+ .inkra-image-viewer__video-settings {
6014
+ align-items: center;
6015
+ display: grid;
6016
+ gap: var(--inkra-space-2);
6017
+ grid-area: settings;
6018
+ grid-template-areas: "mute volume rate";
6019
+ grid-template-columns: var(--inkra-touch-target) minmax(var(--inkra-touch-target), 1fr) minmax(5.5rem, max-content);
6020
+ min-inline-size: 0;
6021
+ }
6022
+ .inkra-image-viewer__video-mute { grid-area: mute; }
6023
+ .inkra-image-viewer__video-settings > .inkra-select__trigger { grid-area: rate; inline-size: 100%; min-inline-size: 5.5rem; }
6024
+ .inkra-image-viewer__video-error { color: var(--inkra-danger); grid-column: 1 / -1; margin: 0; overflow-wrap: anywhere; }
6025
+
6026
+ @container (max-width: 22rem) {
6027
+ .inkra-image-viewer__video-controls { column-gap: var(--inkra-space-1); padding-inline: var(--inkra-space-2); }
6028
+ .inkra-image-viewer__video-settings { column-gap: var(--inkra-space-1); }
6029
+ }
6030
+
6031
+ @media (forced-colors: active) {
6032
+ .inkra-image-viewer__video-media { border: 1px solid CanvasText; }
6033
+ .inkra-image-viewer__video-controls { border-block-start: 1px solid CanvasText; }
6034
+ .inkra-image-viewer__video-error { color: Mark; }
6035
+ }
6036
+
6037
+ @media (prefers-reduced-motion: reduce) {
6038
+ .inkra-image-viewer__video-resource * { animation: none !important; transition: none !important; }
6039
+ }
6040
+
6041
+ .inkra-keypad {
6042
+ --inkra-keypad-columns: 3;
6043
+ display: grid;
6044
+ gap: var(--inkra-space-2);
6045
+ inline-size: min(100%, 24rem);
6046
+ min-inline-size: 0;
6047
+ }
6048
+
6049
+ .inkra-keypad__row {
6050
+ display: grid;
6051
+ grid-template-columns: repeat(var(--inkra-keypad-columns), minmax(0, 1fr));
6052
+ gap: var(--inkra-space-2);
5182
6053
  min-inline-size: 0;
5183
6054
  }
5184
6055
 
@@ -5600,16 +6471,30 @@ div.inkra-choice-grid > .inkra-radio-group {
5600
6471
  display: inline-flex;
5601
6472
  max-inline-size: 100%;
5602
6473
  outline: none;
5603
- overflow-x: auto;
5604
- overscroll-behavior-inline: contain;
6474
+ position: relative;
5605
6475
  touch-action: manipulation;
5606
6476
  }
5607
6477
 
6478
+ .inkra-rating__focus-ring {
6479
+ --inkra-accent-strong: var(--inkra-focus);
6480
+ inset: 1px;
6481
+ opacity: 0;
6482
+ pointer-events: none;
6483
+ position: absolute !important;
6484
+ z-index: 2;
6485
+ }
6486
+
5608
6487
  .inkra-rating__symbols {
5609
6488
  display: inline-flex;
5610
6489
  flex: 0 0 auto;
6490
+ max-inline-size: 100%;
6491
+ overflow-x: auto;
6492
+ overscroll-behavior-inline: contain;
6493
+ scrollbar-width: none;
5611
6494
  }
5612
6495
 
6496
+ .inkra-rating__symbols::-webkit-scrollbar { display: none; }
6497
+
5613
6498
  .inkra-rating__symbol-target {
5614
6499
  block-size: var(--inkra-touch-target);
5615
6500
  cursor: pointer;
@@ -5649,8 +6534,11 @@ div.inkra-choice-grid > .inkra-radio-group {
5649
6534
  }
5650
6535
 
5651
6536
  .inkra-rating:focus-visible {
5652
- outline: var(--inkra-focus-width) solid var(--inkra-focus);
5653
- outline-offset: var(--inkra-focus-offset);
6537
+ outline: none;
6538
+ }
6539
+
6540
+ .inkra-rating:focus-visible > .inkra-rating__focus-ring {
6541
+ opacity: 1;
5654
6542
  }
5655
6543
 
5656
6544
  .inkra-rating[data-readonly] .inkra-rating__symbol-target,
@@ -5673,7 +6561,18 @@ div.inkra-choice-grid > .inkra-radio-group {
5673
6561
  }
5674
6562
 
5675
6563
  .inkra-rating:focus-visible {
5676
- outline: 2px solid Highlight;
6564
+ outline: var(--inkra-focus-width) solid Highlight;
6565
+ outline-offset: calc(-1 * var(--inkra-focus-width));
6566
+ }
6567
+
6568
+ .inkra-rating__focus-ring {
6569
+ display: none !important;
6570
+ }
6571
+ }
6572
+
6573
+ @media (prefers-reduced-motion: no-preference) {
6574
+ .inkra-rating__focus-ring {
6575
+ transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
5677
6576
  }
5678
6577
  }
5679
6578
 
@@ -5682,6 +6581,10 @@ div.inkra-choice-grid > .inkra-radio-group {
5682
6581
  color: CanvasText;
5683
6582
  overflow: visible;
5684
6583
  }
6584
+
6585
+ .inkra-rating__focus-ring {
6586
+ display: none !important;
6587
+ }
5685
6588
  }
5686
6589
 
5687
6590
  .inkra-resizable {
@@ -5794,8 +6697,8 @@ div.inkra-choice-grid > .inkra-radio-group {
5794
6697
  }
5795
6698
 
5796
6699
  .inkra-scroll-area {
5797
- --inkra-scroll-area-size: 10px;
5798
- --inkra-scroll-area-gap: 3px;
6700
+ --inkra-scroll-area-size: 14px;
6701
+ --inkra-scroll-area-gap: 2px;
5799
6702
  color: var(--inkra-ink);
5800
6703
  min-block-size: 0;
5801
6704
  min-inline-size: 0;
@@ -5816,6 +6719,7 @@ div.inkra-choice-grid > .inkra-radio-group {
5816
6719
  .inkra-scroll-area__content { min-block-size: 100%; min-inline-size: 100%; }
5817
6720
 
5818
6721
  .inkra-scroll-area__scrollbar {
6722
+ align-items: stretch;
5819
6723
  box-sizing: border-box;
5820
6724
  display: flex;
5821
6725
  opacity: 0;
@@ -5825,10 +6729,12 @@ div.inkra-choice-grid > .inkra-radio-group {
5825
6729
  z-index: 2;
5826
6730
  }
5827
6731
 
5828
- .inkra-scroll-area[data-type="always"] .inkra-scroll-area__scrollbar,
6732
+ .inkra-scroll-area[data-type="always"] .inkra-scroll-area__scrollbar { opacity: .76; pointer-events: auto; }
5829
6733
  .inkra-scroll-area:hover .inkra-scroll-area__scrollbar,
5830
6734
  .inkra-scroll-area:focus-within .inkra-scroll-area__scrollbar,
6735
+ .inkra-scroll-area__scrollbar[data-hovering],
5831
6736
  .inkra-scroll-area__scrollbar[data-scrolling] { opacity: 1; pointer-events: auto; }
6737
+ .inkra-scroll-area__scrollbar[data-scrolling] { transition-duration: 0ms; }
5832
6738
 
5833
6739
  .inkra-scroll-area__scrollbar[data-orientation="vertical"] {
5834
6740
  inset-block: 0;
@@ -5846,25 +6752,66 @@ div.inkra-choice-grid > .inkra-radio-group {
5846
6752
  .inkra-scroll-area__thumb,
5847
6753
  .inkra-scroll-area__thumb-surface {
5848
6754
  display: block !important;
5849
- pointer-events: none;
5850
6755
  position: absolute !important;
5851
6756
  }
5852
6757
 
5853
- .inkra-scroll-area__track { inset: 0; opacity: .55; }
5854
- .inkra-scroll-area__thumb { cursor: grab; min-block-size: 18px; min-inline-size: 18px; pointer-events: auto; }
6758
+ .inkra-scroll-area__track,
6759
+ .inkra-scroll-area__thumb-surface {
6760
+ pointer-events: none;
6761
+ transition: opacity var(--inkra-motion-fast) var(--inkra-ease);
6762
+ }
6763
+ .inkra-scroll-area__track { opacity: .34; }
6764
+ .inkra-scroll-area__thumb { cursor: grab; pointer-events: auto; }
5855
6765
  .inkra-scroll-area__thumb:active { cursor: grabbing; }
5856
- .inkra-scroll-area__thumb-surface { inset: var(--inkra-scroll-area-gap); }
5857
- .inkra-scroll-area__scrollbar[data-orientation="horizontal"] .inkra-scroll-area__thumb { min-inline-size: 24px; }
6766
+ .inkra-scroll-area__thumb-surface { opacity: .82; }
6767
+
6768
+ .inkra-scroll-area__scrollbar[data-orientation="vertical"] .inkra-scroll-area__track {
6769
+ inset-block: var(--inkra-scroll-area-gap);
6770
+ inset-inline: 4px;
6771
+ }
6772
+ .inkra-scroll-area__scrollbar[data-orientation="vertical"] .inkra-scroll-area__thumb {
6773
+ inset-inline: var(--inkra-scroll-area-gap);
6774
+ min-block-size: 28px;
6775
+ }
6776
+ .inkra-scroll-area__scrollbar[data-orientation="vertical"] .inkra-scroll-area__thumb-surface {
6777
+ inset-block: 2px;
6778
+ inset-inline: 1px;
6779
+ }
6780
+ .inkra-scroll-area__scrollbar[data-orientation="horizontal"] .inkra-scroll-area__track {
6781
+ inset-block: 4px;
6782
+ inset-inline: var(--inkra-scroll-area-gap);
6783
+ }
6784
+ .inkra-scroll-area__scrollbar[data-orientation="horizontal"] .inkra-scroll-area__thumb {
6785
+ inset-block: var(--inkra-scroll-area-gap);
6786
+ min-inline-size: 32px;
6787
+ }
6788
+ .inkra-scroll-area__scrollbar[data-orientation="horizontal"] .inkra-scroll-area__thumb-surface {
6789
+ inset-block: 1px;
6790
+ inset-inline: 2px;
6791
+ }
6792
+
6793
+ .inkra-scroll-area:hover .inkra-scroll-area__track,
6794
+ .inkra-scroll-area:focus-within .inkra-scroll-area__track,
6795
+ .inkra-scroll-area__scrollbar[data-hovering] .inkra-scroll-area__track,
6796
+ .inkra-scroll-area__scrollbar[data-scrolling] .inkra-scroll-area__track { opacity: .5; }
6797
+ .inkra-scroll-area:hover .inkra-scroll-area__thumb-surface,
6798
+ .inkra-scroll-area:focus-within .inkra-scroll-area__thumb-surface,
6799
+ .inkra-scroll-area__scrollbar[data-hovering] .inkra-scroll-area__thumb-surface,
6800
+ .inkra-scroll-area__scrollbar[data-scrolling] .inkra-scroll-area__thumb-surface { opacity: 1; }
6801
+ .inkra-scroll-area__scrollbar[data-scrolling] .inkra-scroll-area__track { opacity: .62; }
5858
6802
  .inkra-scroll-area__corner { background: transparent; }
5859
6803
 
5860
6804
  @media (prefers-reduced-motion: reduce) {
5861
- .inkra-scroll-area__scrollbar { transition: none; }
6805
+ .inkra-scroll-area__scrollbar,
6806
+ .inkra-scroll-area__track,
6807
+ .inkra-scroll-area__thumb-surface { transition: none; }
5862
6808
  }
5863
6809
 
5864
6810
  @media (forced-colors: active) {
5865
6811
  .inkra-scroll-area__scrollbar { opacity: 1; }
5866
- .inkra-scroll-area__track { background: Canvas; border: 1px solid CanvasText; }
5867
- .inkra-scroll-area__thumb-surface { background: ButtonText; border: 2px solid ButtonText; }
6812
+ .inkra-scroll-area__track { background: Canvas; border: 1px solid CanvasText; opacity: 1; }
6813
+ .inkra-scroll-area__thumb-surface { background: ButtonText; border: 1px solid ButtonText; opacity: 1; }
6814
+ .inkra-scroll-area__viewport:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
5868
6815
  }
5869
6816
 
5870
6817
  @media print {
@@ -6061,6 +7008,13 @@ div.inkra-choice-grid > .inkra-radio-group {
6061
7008
  --inkra-field-control-height: var(--inkra-control-md);
6062
7009
  --inkra-field-control-font-size: var(--inkra-text-md);
6063
7010
  --inkra-field-control-padding: var(--inkra-space-3);
7011
+ --inkra-tag-input-control-inset: var(--inkra-space-1);
7012
+ --inkra-tag-input-item-height: calc(var(--inkra-field-control-height) - 2 * var(--inkra-tag-input-control-inset));
7013
+ --inkra-tag-input-row-gap: max(
7014
+ var(--inkra-space-1),
7015
+ calc(var(--inkra-touch-target) - var(--inkra-tag-input-item-height))
7016
+ );
7017
+ --inkra-tag-input-tag-inset: var(--inkra-space-1);
6064
7018
 
6065
7019
  display: inline-grid;
6066
7020
  inline-size: 24rem;
@@ -6093,12 +7047,17 @@ div.inkra-choice-grid > .inkra-radio-group {
6093
7047
  block-size: auto;
6094
7048
  align-items: center;
6095
7049
  flex-wrap: wrap;
6096
- gap: var(--inkra-space-1);
6097
- padding: var(--inkra-space-1) var(--inkra-field-control-padding);
7050
+ column-gap: var(--inkra-space-1);
7051
+ row-gap: var(--inkra-tag-input-row-gap);
7052
+ padding: var(--inkra-tag-input-control-inset) var(--inkra-field-control-padding);
6098
7053
  color: var(--inkra-ink);
6099
7054
  cursor: text;
6100
7055
  }
6101
7056
 
7057
+ .inkra-tag-input[data-has-tags="true"] .inkra-tag-input__control {
7058
+ padding-inline: var(--inkra-tag-input-control-inset);
7059
+ }
7060
+
6102
7061
  .inkra-tag-input[data-focus-within="true"] .inkra-tag-input__control > :is(.inkra-pencil-surface__ink, .inkra-pencil-surface__border) {
6103
7062
  filter: contrast(1.28) saturate(1.08);
6104
7063
  }
@@ -6109,7 +7068,8 @@ div.inkra-choice-grid > .inkra-radio-group {
6109
7068
  align-items: center;
6110
7069
  flex: 0 1 auto;
6111
7070
  flex-wrap: wrap;
6112
- gap: var(--inkra-space-1);
7071
+ column-gap: var(--inkra-space-1);
7072
+ row-gap: var(--inkra-tag-input-row-gap);
6113
7073
  margin: 0;
6114
7074
  padding: 0;
6115
7075
  list-style: none;
@@ -6119,27 +7079,22 @@ div.inkra-choice-grid > .inkra-radio-group {
6119
7079
 
6120
7080
  .inkra-tag-input__tag {
6121
7081
  display: inline-flex !important;
7082
+ box-sizing: border-box;
6122
7083
  min-inline-size: 0;
6123
- min-block-size: var(--inkra-touch-target);
7084
+ block-size: var(--inkra-tag-input-item-height);
6124
7085
  align-items: center;
6125
- overflow: hidden;
7086
+ gap: var(--inkra-space-1);
7087
+ padding: var(--inkra-tag-input-tag-inset);
6126
7088
  color: var(--inkra-ink);
6127
7089
  font-family: var(--inkra-font-body);
6128
7090
  font-size: var(--inkra-field-control-font-size);
6129
7091
  line-height: var(--inkra-line-ui);
6130
7092
  }
6131
7093
 
6132
- .inkra-tag-input__tag > .inkra-pencil-surface__content {
6133
- display: inline-flex;
6134
- align-items: center;
6135
- min-inline-size: 0;
6136
- }
6137
-
6138
7094
  .inkra-tag-input__tag-label {
6139
7095
  min-inline-size: 0;
6140
7096
  max-inline-size: min(16rem, 50vw);
6141
7097
  overflow: hidden;
6142
- padding-inline: var(--inkra-space-3);
6143
7098
  text-overflow: ellipsis;
6144
7099
  white-space: nowrap;
6145
7100
  }
@@ -6147,9 +7102,9 @@ div.inkra-choice-grid > .inkra-radio-group {
6147
7102
  .inkra-tag-input__remove,
6148
7103
  .inkra-tag-input__clear {
6149
7104
  display: inline-flex;
7105
+ position: relative;
6150
7106
  box-sizing: border-box;
6151
7107
  inline-size: var(--inkra-touch-target);
6152
- block-size: var(--inkra-touch-target);
6153
7108
  flex: 0 0 var(--inkra-touch-target);
6154
7109
  align-items: center;
6155
7110
  justify-content: center;
@@ -6161,7 +7116,19 @@ div.inkra-choice-grid > .inkra-radio-group {
6161
7116
  cursor: pointer;
6162
7117
  }
6163
7118
 
6164
- .inkra-tag-input__remove { margin-inline-start: calc(-1 * var(--inkra-space-2)); }
7119
+ .inkra-tag-input__remove { block-size: 18px; }
7120
+ .inkra-tag-input__clear { block-size: var(--inkra-tag-input-item-height); }
7121
+
7122
+ .inkra-tag-input__remove::before,
7123
+ .inkra-tag-input__clear::before {
7124
+ position: absolute;
7125
+ inset-block-start: 50%;
7126
+ inset-inline: 0;
7127
+ min-block-size: var(--inkra-touch-target);
7128
+ content: "";
7129
+ transform: translateY(-50%);
7130
+ }
7131
+
6165
7132
  .inkra-tag-input__remove:hover,
6166
7133
  .inkra-tag-input__clear:hover { color: var(--inkra-ink); }
6167
7134
 
@@ -6173,20 +7140,26 @@ div.inkra-choice-grid > .inkra-radio-group {
6173
7140
 
6174
7141
  .inkra-tag-input__input {
6175
7142
  min-inline-size: min(8rem, 100%);
6176
- min-block-size: var(--inkra-touch-target);
6177
- block-size: var(--inkra-field-control-height);
7143
+ min-block-size: var(--inkra-tag-input-item-height);
7144
+ block-size: var(--inkra-tag-input-item-height);
6178
7145
  flex: 1 1 8rem;
6179
7146
  padding: 0;
6180
7147
  color: var(--inkra-ink);
6181
7148
  font-size: var(--inkra-field-control-font-size);
6182
7149
  }
6183
7150
 
7151
+ .inkra-tag-input[data-draft-empty="true"][data-has-tags="true"]:not([data-has-placeholder="true"])
7152
+ .inkra-tag-input__input {
7153
+ min-inline-size: 1px;
7154
+ flex-basis: 1px;
7155
+ }
7156
+
6184
7157
  .inkra-tag-input__input::placeholder {
6185
7158
  color: var(--inkra-ink-subtle);
6186
7159
  opacity: 1;
6187
7160
  }
6188
7161
 
6189
- .inkra-tag-input__clear { margin-inline-end: calc(-1 * var(--inkra-field-control-padding)); }
7162
+ .inkra-tag-input__clear { margin-inline-end: 0; }
6190
7163
 
6191
7164
  .inkra-tag-input__underline {
6192
7165
  position: absolute;
@@ -6246,12 +7219,20 @@ div.inkra-choice-grid > .inkra-radio-group {
6246
7219
  }
6247
7220
 
6248
7221
  .inkra-transfer {
7222
+ color: var(--inkra-ink);
7223
+ container-name: inkra-transfer;
7224
+ container-type: inline-size;
7225
+ font-family: var(--inkra-font-body);
7226
+ line-height: var(--inkra-line-ui);
7227
+ min-width: 0;
7228
+ }
7229
+
7230
+ .inkra-transfer__layout {
6249
7231
  display: grid;
6250
7232
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
6251
7233
  align-items: stretch;
6252
7234
  gap: var(--inkra-space-4);
6253
7235
  min-width: 0;
6254
- color: var(--inkra-ink);
6255
7236
  }
6256
7237
 
6257
7238
  .inkra-transfer__panel {
@@ -6268,9 +7249,20 @@ div.inkra-choice-grid > .inkra-radio-group {
6268
7249
  grid-template-rows: auto auto auto auto minmax(180px, 1fr);
6269
7250
  }
6270
7251
 
6271
- .inkra-transfer__panel:focus-visible {
6272
- outline: 2px solid var(--inkra-accent-strong);
6273
- outline-offset: 3px;
7252
+ .inkra-transfer__panel-focus {
7253
+ --inkra-accent-strong: var(--inkra-focus);
7254
+
7255
+ display: block !important;
7256
+ inset: calc(-1 * var(--inkra-focus-offset));
7257
+ opacity: 0;
7258
+ pointer-events: none;
7259
+ position: absolute !important;
7260
+ z-index: 3;
7261
+ }
7262
+
7263
+ .inkra-transfer__panel:focus-visible { outline: 0; }
7264
+ .inkra-transfer__panel:focus-visible > .inkra-transfer__panel-focus {
7265
+ opacity: 1;
6274
7266
  }
6275
7267
 
6276
7268
  .inkra-transfer__header,
@@ -6343,40 +7335,63 @@ div.inkra-choice-grid > .inkra-radio-group {
6343
7335
 
6344
7336
  .inkra-transfer[data-disabled] { opacity: .72; }
6345
7337
 
6346
- @media (max-width: 720px) {
6347
- .inkra-transfer { grid-template-columns: minmax(0, 1fr); }
7338
+ .inkra-transfer .inkra-transfer__direction-icon[data-direction="to-source"] { transform: scaleX(-1); }
7339
+ .inkra-transfer:dir(rtl) .inkra-transfer__direction-icon[data-direction="to-target"] { transform: scaleX(-1); }
7340
+ .inkra-transfer:dir(rtl) .inkra-transfer__direction-icon[data-direction="to-source"] { transform: none; }
7341
+
7342
+ @container inkra-transfer (max-width: 720px) {
7343
+ .inkra-transfer__layout { grid-template-columns: minmax(0, 1fr); }
6348
7344
  .inkra-transfer__panel { min-height: 320px; }
6349
7345
  .inkra-transfer__list { max-height: 280px; }
6350
7346
  .inkra-transfer__actions { grid-auto-flow: column; justify-self: center; }
6351
- .inkra-transfer__actions .inkra-transfer__direction-icon { transform: rotate(90deg); }
7347
+ .inkra-transfer:dir(ltr) .inkra-transfer__direction-icon[data-direction="to-target"],
7348
+ .inkra-transfer:dir(rtl) .inkra-transfer__direction-icon[data-direction="to-target"] {
7349
+ transform: rotate(90deg);
7350
+ }
7351
+ .inkra-transfer:dir(ltr) .inkra-transfer__direction-icon[data-direction="to-source"],
7352
+ .inkra-transfer:dir(rtl) .inkra-transfer__direction-icon[data-direction="to-source"] {
7353
+ transform: rotate(-90deg);
7354
+ }
6352
7355
  }
6353
7356
 
6354
7357
  @media (forced-colors: active) {
6355
7358
  .inkra-transfer__panel { border: 1px solid CanvasText; }
6356
- .inkra-transfer__panel:focus-visible { outline-color: Highlight; }
7359
+ .inkra-transfer__panel:focus-visible { outline: 2px solid Highlight; outline-offset: 3px; }
7360
+ .inkra-transfer__panel-focus { display: none !important; }
6357
7361
  }
6358
7362
 
6359
7363
  @media print {
6360
- .inkra-transfer { grid-template-columns: 1fr 1fr; }
7364
+ .inkra-transfer__layout { grid-template-columns: 1fr 1fr; }
6361
7365
  .inkra-transfer__actions { display: none; }
6362
7366
  .inkra-transfer__panel { border: 1px solid currentColor; }
6363
7367
  }
6364
7368
 
6365
7369
 
6366
7370
  .inkra-tree-select {
6367
- display: block;
7371
+ --inkra-tree-select-control-height: var(--inkra-control-md);
7372
+
7373
+ display: flex;
7374
+ align-items: center;
7375
+ min-height: var(--inkra-touch-target);
6368
7376
  min-width: 0;
6369
7377
  width: 100%;
6370
7378
  color: var(--inkra-ink);
6371
7379
  }
6372
7380
 
6373
- .inkra-tree-select__control {
6374
- display: grid;
6375
- grid-template-columns: minmax(0, 1fr) auto;
6376
- gap: var(--inkra-space-2);
7381
+ .inkra-tree-select[data-size="sm"] { --inkra-tree-select-control-height: var(--inkra-control-sm); }
7382
+ .inkra-tree-select[data-size="lg"] { --inkra-tree-select-control-height: var(--inkra-control-lg); }
7383
+
7384
+ .inkra-button-group.inkra-tree-select__control {
7385
+ align-items: center;
7386
+ block-size: var(--inkra-tree-select-control-height);
6377
7387
  min-width: 0;
7388
+ overflow: visible;
7389
+ width: 100%;
6378
7390
  }
6379
7391
 
7392
+ .inkra-tree-select__control > .inkra-tree-select__trigger { flex: 1 1 auto; }
7393
+ .inkra-tree-select__control > .inkra-tree-select__clear { flex: 0 0 auto; }
7394
+
6380
7395
  .inkra-tree-select__trigger,
6381
7396
  .inkra-tree-select__trigger > .inkra-button__surface {
6382
7397
  min-width: 0;
@@ -6402,10 +7417,24 @@ div.inkra-choice-grid > .inkra-radio-group {
6402
7417
  color: var(--inkra-ink-subtle);
6403
7418
  }
6404
7419
 
6405
- .inkra-tree-select__clear[data-visible="false"] {
7420
+ .inkra-tree-select__clear[aria-hidden="true"] {
6406
7421
  visibility: hidden;
6407
7422
  }
6408
7423
 
7424
+ .inkra-tree-select__control .inkra-button-group__divider[data-orientation="vertical"] {
7425
+ block-size: var(--inkra-tree-select-control-height);
7426
+ inset-block-start: 50%;
7427
+ transform: translateY(-50%);
7428
+ }
7429
+
7430
+ .inkra-tree-select[data-invalid] {
7431
+ color: var(--inkra-danger);
7432
+ }
7433
+
7434
+ .inkra-tree-select[data-invalid] .inkra-tree-select__control {
7435
+ --inkra-accent-strong: var(--inkra-danger);
7436
+ }
7437
+
6409
7438
  .inkra-tree-select__popover {
6410
7439
  width: max(var(--radix-popover-trigger-width, 18rem), 18rem);
6411
7440
  max-width: min(32rem, calc(100vw - var(--inkra-space-4)));
@@ -6450,6 +7479,11 @@ div.inkra-choice-grid > .inkra-radio-group {
6450
7479
  }
6451
7480
 
6452
7481
  @media (forced-colors: active) {
7482
+ .inkra-tree-select[data-invalid] .inkra-tree-select__control {
7483
+ outline: 2px solid Mark;
7484
+ outline-offset: 2px;
7485
+ }
7486
+
6453
7487
  .inkra-tree-select__popover {
6454
7488
  border: 1px solid CanvasText;
6455
7489
  }
@@ -6528,117 +7562,497 @@ div.inkra-choice-grid > .inkra-radio-group {
6528
7562
  }
6529
7563
  }
6530
7564
 
6531
- .inkra-virtual-list__frame {
6532
- min-inline-size: 0;
7565
+ .inkra-virtual-list__frame {
7566
+ min-inline-size: 0;
7567
+ position: relative;
7568
+ }
7569
+
7570
+ .inkra-virtual-list__focus {
7571
+ position: absolute;
7572
+ inset: 0;
7573
+ opacity: 0;
7574
+ pointer-events: none;
7575
+ }
7576
+
7577
+ .inkra-virtual-list__frame:has(> .inkra-virtual-list:focus-visible) > .inkra-virtual-list__focus {
7578
+ opacity: 1;
7579
+ }
7580
+
7581
+ .inkra-virtual-list {
7582
+ block-size: 20rem;
7583
+ color: var(--inkra-ink);
7584
+ min-block-size: 8rem;
7585
+ min-inline-size: 0;
7586
+ outline: 0;
7587
+ overflow: auto;
7588
+ overscroll-behavior: contain;
7589
+ position: relative;
7590
+ scrollbar-gutter: stable;
7591
+ }
7592
+
7593
+ .inkra-virtual-list[data-external-scroll="true"] {
7594
+ block-size: auto;
7595
+ min-block-size: 0;
7596
+ overflow: visible;
7597
+ scrollbar-gutter: auto;
7598
+ }
7599
+
7600
+ .inkra-virtual-list:focus-visible {
7601
+ outline: none;
7602
+ }
7603
+
7604
+ .inkra-virtual-list__items {
7605
+ inline-size: 100%;
7606
+ list-style: none;
7607
+ margin: 0;
7608
+ min-inline-size: 0;
7609
+ padding: 0;
7610
+ position: relative;
7611
+ }
7612
+
7613
+ .inkra-virtual-list[data-virtualized="true"] .inkra-virtual-list__item {
7614
+ inset-block-start: 0;
7615
+ inset-inline-start: 0;
7616
+ position: absolute;
7617
+ }
7618
+
7619
+ .inkra-virtual-list__item {
7620
+ box-sizing: border-box;
7621
+ inline-size: 100%;
7622
+ min-block-size: var(--inkra-touch-target);
7623
+ min-inline-size: 0;
7624
+ overflow-wrap: anywhere;
7625
+ padding: var(--inkra-space-2) var(--inkra-space-3);
7626
+ position: relative;
7627
+ will-change: transform;
7628
+ }
7629
+
7630
+ .inkra-virtual-list:not([data-virtualized="true"]) .inkra-virtual-list__item {
7631
+ will-change: auto;
7632
+ }
7633
+
7634
+ .inkra-virtual-list__item > .inkra-virtual-list__separator {
7635
+ color: var(--inkra-border);
7636
+ inset-block-start: -4px;
7637
+ inset-inline: var(--inkra-space-3);
7638
+ inline-size: auto;
7639
+ opacity: .58;
7640
+ position: absolute;
7641
+ width: auto;
7642
+ }
7643
+
7644
+ .inkra-virtual-list__empty {
7645
+ color: var(--inkra-ink-muted);
7646
+ display: grid;
7647
+ min-block-size: 8rem;
7648
+ padding: var(--inkra-space-6);
7649
+ place-items: center;
7650
+ text-align: center;
7651
+ }
7652
+
7653
+ @media (forced-colors: active) {
7654
+ .inkra-virtual-list__frame { border: 1px solid CanvasText; }
7655
+ .inkra-virtual-list:focus-visible {
7656
+ outline: var(--inkra-focus-width) solid Highlight;
7657
+ outline-color: Highlight;
7658
+ outline-offset: calc(-1 * var(--inkra-focus-width));
7659
+ }
7660
+ .inkra-virtual-list__item > .inkra-virtual-list__separator {
7661
+ inset-block-start: 0;
7662
+ opacity: 1;
7663
+ }
7664
+ }
7665
+
7666
+ @media print {
7667
+ .inkra-virtual-list {
7668
+ block-size: auto !important;
7669
+ overflow: visible;
7670
+ }
7671
+
7672
+ .inkra-virtual-list__item > .inkra-virtual-list__separator {
7673
+ inset-block-start: 0;
7674
+ opacity: 1;
7675
+ }
7676
+ }
7677
+
7678
+ .inkra-markdown {
7679
+ color: var(--inkra-ink);
7680
+ font-family: var(--inkra-font-body);
7681
+ font-size: var(--inkra-text-md);
7682
+ line-height: var(--inkra-line-body);
7683
+ max-width: 100%;
7684
+ min-width: 0;
7685
+ overflow-wrap: anywhere;
7686
+ }
7687
+
7688
+ .inkra-markdown > :first-child { margin-block-start: 0; }
7689
+ .inkra-markdown > :last-child { margin-block-end: 0; }
7690
+
7691
+ .inkra-markdown__heading {
7692
+ color: var(--inkra-ink);
7693
+ font-weight: var(--inkra-weight-regular);
7694
+ letter-spacing: 0;
7695
+ line-height: 1.25;
7696
+ margin-block: var(--inkra-space-6) var(--inkra-space-3);
7697
+ }
7698
+
7699
+ .inkra-markdown h1 { font-size: var(--inkra-text-3xl); }
7700
+ .inkra-markdown h2 { font-size: var(--inkra-text-2xl); }
7701
+ .inkra-markdown h3 { font-size: var(--inkra-text-xl); }
7702
+ .inkra-markdown h4 { font-size: var(--inkra-text-lg); }
7703
+ .inkra-markdown h5 { font-size: var(--inkra-text-md); }
7704
+ .inkra-markdown h6 { color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); }
7705
+
7706
+ .inkra-markdown__paragraph {
7707
+ margin-block: 0 var(--inkra-space-4);
7708
+ }
7709
+
7710
+ .inkra-markdown strong { color: var(--inkra-ink); font-weight: var(--inkra-weight-semibold); }
7711
+ .inkra-markdown em { color: var(--inkra-ink-muted); font-style: italic; }
7712
+ .inkra-markdown del { color: var(--inkra-ink-muted); text-decoration-thickness: 1px; }
7713
+
7714
+ .inkra-markdown__deleted {
7715
+ display: inline-block;
7716
+ max-width: 100%;
7717
+ position: relative;
7718
+ vertical-align: baseline;
7719
+ }
7720
+ .inkra-markdown__deleted[data-pencil-strike-ready="true"] { text-decoration: none; }
7721
+ .inkra-markdown__deleted:not([data-pencil-strike-ready="true"]) .inkra-pencil-text { text-decoration: line-through; }
7722
+ .inkra-markdown__deleted > .inkra-markdown__strike {
7723
+ height: 6px;
7724
+ pointer-events: none;
7725
+ position: absolute;
7726
+ }
7727
+
7728
+ .inkra-markdown__link {
7729
+ color: var(--inkra-accent-strong);
7730
+ display: inline-block;
7731
+ max-width: 100%;
7732
+ position: relative;
7733
+ text-decoration: none;
7734
+ vertical-align: baseline;
7735
+ }
7736
+
7737
+ .inkra-markdown__link > span { max-width: 100%; }
7738
+ .inkra-markdown__link > .inkra-markdown__link-line {
7739
+ bottom: 0;
7740
+ height: 5px;
7741
+ inset-inline: 0;
7742
+ pointer-events: none;
7743
+ position: absolute;
7744
+ width: 100%;
7745
+ }
7746
+ .inkra-markdown__link:focus-visible { outline: 0; }
7747
+ .inkra-pencil-surface.inkra-markdown__link-focus,
7748
+ .inkra-pencil-surface.inkra-markdown__code-focus,
7749
+ .inkra-pencil-surface.inkra-markdown__table-focus {
7750
+ --inkra-accent-strong: var(--inkra-focus);
7751
+ display: block;
7752
+ opacity: 0;
7753
+ pointer-events: none;
7754
+ position: absolute;
7755
+ z-index: 2;
7756
+ }
7757
+ .inkra-pencil-surface.inkra-markdown__link-focus { inset: -2px; }
7758
+ .inkra-markdown__link:focus-visible > .inkra-markdown__link-focus { opacity: 1; }
7759
+ .inkra-markdown__link-text,
7760
+ .inkra-markdown__image-alt { color: var(--inkra-ink-muted); }
7761
+
7762
+ .inkra-markdown__list {
7763
+ margin-block: 0 var(--inkra-space-4);
7764
+ padding-inline-start: 1.65rem;
7765
+ }
7766
+
7767
+ .inkra-markdown__list--unordered,
7768
+ .inkra-markdown__list--ordered { list-style: none; padding-inline-start: 0; }
7769
+ .inkra-markdown__list--ordered { font-variant-numeric: tabular-nums; }
7770
+
7771
+ .inkra-markdown__list-item {
7772
+ margin-block: var(--inkra-space-1);
7773
+ min-width: 0;
7774
+ }
7775
+
7776
+ .inkra-markdown__list--unordered > .inkra-markdown__list-item,
7777
+ .inkra-markdown__list--ordered > .inkra-markdown__list-item {
7778
+ align-items: flex-start;
7779
+ display: grid;
7780
+ gap: var(--inkra-space-2);
7781
+ grid-template-columns: 14px minmax(0, 1fr);
7782
+ }
7783
+
7784
+ .inkra-markdown__list--ordered > .inkra-markdown__list-item { grid-template-columns: var(--inkra-markdown-ordered-marker-width, 1.75rem) minmax(0, 1fr); }
7785
+ .inkra-markdown__list--unordered > .task-list-item { grid-template-columns: minmax(0, 1fr); }
7786
+ .inkra-markdown__bullet { color: var(--inkra-accent-strong); margin-block-start: 0.42em; }
7787
+ .inkra-markdown__ordered-marker {
7788
+ align-self: start;
7789
+ color: var(--inkra-accent-strong);
7790
+ justify-self: end;
7791
+ line-height: var(--inkra-line-body);
7792
+ max-width: none;
7793
+ text-align: end;
7794
+ white-space: nowrap;
7795
+ width: 100%;
7796
+ }
7797
+ .inkra-markdown__list-content { grid-column: 2; min-width: 0; }
7798
+ .inkra-markdown__list--unordered > .task-list-item > .inkra-markdown__list-content { grid-column: 1; }
7799
+ .inkra-markdown__list-content > :last-child { margin-block-end: 0; }
7800
+ .inkra-markdown .contains-task-list { list-style: none; padding-inline-start: 0; }
7801
+ .inkra-markdown__list--unordered > .task-list-item { list-style: none; }
7802
+ .inkra-markdown__task-row {
7803
+ align-items: start;
7804
+ display: grid;
7805
+ gap: var(--inkra-space-2);
7806
+ grid-template-columns: 18px minmax(0, 1fr);
7807
+ }
7808
+ .inkra-markdown__task-content { min-width: 0; }
7809
+ .inkra-markdown__task-content > :last-child { margin-block-end: 0; }
7810
+
7811
+ .inkra-selection-control.inkra-markdown__task-checkbox {
7812
+ align-items: center;
7813
+ cursor: default;
7814
+ display: inline-grid;
7815
+ gap: 0;
7816
+ grid-template-columns: 18px;
7817
+ inline-size: 18px;
7818
+ margin-block-start: 0.18em;
7819
+ margin-inline-end: 0;
7820
+ min-height: 0;
7821
+ opacity: 1;
7822
+ vertical-align: -0.18em;
7823
+ }
7824
+ .inkra-markdown__task-checkbox > .inkra-selection-control__copy { display: none; }
7825
+ .inkra-markdown__task-checkbox > .inkra-selection-control__mark {
7826
+ align-items: center;
7827
+ block-size: 18px;
7828
+ display: inline-flex;
7829
+ inline-size: 18px;
7830
+ justify-content: center;
7831
+ }
7832
+
7833
+ .inkra-markdown__quote {
7834
+ color: var(--inkra-ink-muted);
7835
+ display: grid;
7836
+ gap: var(--inkra-space-3);
7837
+ grid-template-columns: 8px minmax(0, 1fr);
7838
+ margin: 0 0 var(--inkra-space-4);
7839
+ padding: var(--inkra-space-2) 0;
7840
+ }
7841
+
7842
+ .inkra-markdown__quote-line { min-height: 100%; }
7843
+ .inkra-markdown__quote :last-child { margin-block-end: 0; }
7844
+
7845
+ .inkra-markdown__divider { margin-block: var(--inkra-space-6); }
7846
+
7847
+ .inkra-markdown :not(pre) > .inkra-markdown__code {
7848
+ background: transparent;
7849
+ border-radius: var(--inkra-radius-sm);
7850
+ color: var(--inkra-selection-foreground);
7851
+ display: inline-block;
7852
+ font-family: var(--inkra-font-mono);
7853
+ font-size: 0.9em;
7854
+ isolation: isolate;
7855
+ max-width: 100%;
7856
+ padding: 0.12em 0.4em;
6533
7857
  position: relative;
7858
+ vertical-align: baseline;
6534
7859
  }
6535
7860
 
6536
- .inkra-virtual-list__focus {
6537
- position: absolute;
7861
+ .inkra-markdown__code > .inkra-pencil-surface.inkra-markdown__code-wash {
7862
+ --inkra-accent: var(--inkra-selection-pigment);
7863
+ border-radius: 3px;
7864
+ display: block;
6538
7865
  inset: 0;
6539
- opacity: 0;
7866
+ overflow: hidden;
6540
7867
  pointer-events: none;
7868
+ position: absolute;
7869
+ z-index: -1;
6541
7870
  }
7871
+ .inkra-markdown__code-wash[data-pencil-fallback="true"] { background: var(--inkra-selection); }
6542
7872
 
6543
- .inkra-virtual-list__frame:has(> .inkra-virtual-list:focus-visible) > .inkra-virtual-list__focus {
6544
- opacity: 1;
7873
+ .inkra-markdown__code-text {
7874
+ --inkra-letter-fill: 0.24;
7875
+ --inkra-letter-grain: 0.34;
7876
+ --inkra-letter-outline: 0.84;
7877
+ font-family: inherit;
6545
7878
  }
6546
7879
 
6547
- .inkra-virtual-list {
6548
- block-size: 20rem;
6549
- color: var(--inkra-ink);
6550
- min-block-size: 8rem;
6551
- min-inline-size: 0;
6552
- outline: 0;
6553
- overflow: auto;
6554
- overscroll-behavior: contain;
7880
+ .inkra-markdown__code-text > .inkra-pencil-text__source { font-family: inherit; }
7881
+
7882
+ .inkra-markdown__code-frame {
7883
+ margin-block: 0 var(--inkra-space-4);
7884
+ max-width: 100%;
7885
+ min-width: 0;
6555
7886
  position: relative;
6556
- scrollbar-gutter: stable;
6557
7887
  }
6558
7888
 
6559
- .inkra-virtual-list[data-external-scroll="true"] {
6560
- block-size: auto;
6561
- min-block-size: 0;
6562
- overflow: visible;
6563
- scrollbar-gutter: auto;
7889
+ .inkra-markdown__code-frame > .inkra-markdown__code-header {
7890
+ padding: var(--inkra-space-2) var(--inkra-space-4);
6564
7891
  }
6565
-
6566
- .inkra-virtual-list:focus-visible {
6567
- outline: none;
7892
+ .inkra-markdown__code-language {
7893
+ align-items: center;
7894
+ display: flex;
7895
+ gap: var(--inkra-space-2);
7896
+ font-size: var(--inkra-text-sm);
7897
+ min-width: 0;
7898
+ }
7899
+ .inkra-markdown__code-language > .inkra-pencil-icon { flex: none; }
7900
+ .inkra-markdown__code-status {
7901
+ clip-path: inset(50%);
7902
+ height: 1px;
7903
+ overflow: hidden;
7904
+ position: absolute;
7905
+ white-space: nowrap;
7906
+ width: 1px;
6568
7907
  }
6569
7908
 
6570
- .inkra-virtual-list__items {
6571
- inline-size: 100%;
6572
- list-style: none;
7909
+ .inkra-markdown__code-surface {
7910
+ background: transparent;
7911
+ color: var(--inkra-ink);
7912
+ font-family: "Trip Map Hand", var(--inkra-font-hand);
7913
+ font-size: var(--inkra-text-md);
7914
+ font-weight: var(--inkra-weight-regular);
7915
+ line-height: 1.8;
6573
7916
  margin: 0;
6574
- min-inline-size: 0;
6575
- padding: 0;
6576
- position: relative;
7917
+ max-width: 100%;
7918
+ min-width: 0;
7919
+ overflow-x: auto;
7920
+ overflow-wrap: normal;
7921
+ overscroll-behavior-inline: contain;
7922
+ padding: var(--inkra-space-4);
7923
+ tab-size: 2;
7924
+ white-space: pre;
6577
7925
  }
6578
7926
 
6579
- .inkra-virtual-list[data-virtualized="true"] .inkra-virtual-list__item {
6580
- inset-block-start: 0;
6581
- inset-inline-start: 0;
6582
- position: absolute;
7927
+ .inkra-markdown__code-surface:focus-visible {
7928
+ outline: 0;
6583
7929
  }
7930
+ .inkra-markdown__code-focus { inset: 0; }
7931
+ .inkra-markdown__code-surface:focus-visible + .inkra-markdown__code-focus { opacity: 1; }
6584
7932
 
6585
- .inkra-virtual-list__item {
6586
- box-sizing: border-box;
6587
- inline-size: 100%;
6588
- min-block-size: var(--inkra-touch-target);
6589
- min-inline-size: 0;
6590
- overflow-wrap: anywhere;
6591
- padding: var(--inkra-space-2) var(--inkra-space-3);
7933
+ .inkra-markdown__code-surface > .inkra-markdown__code {
7934
+ color: var(--inkra-ink);
7935
+ font: inherit;
7936
+ overflow-wrap: normal;
7937
+ white-space: pre;
7938
+ }
7939
+
7940
+ .inkra-markdown__code-surface .inkra-pencil-text,
7941
+ .inkra-markdown__code-surface .inkra-pencil-text__source {
7942
+ max-width: none;
7943
+ overflow-wrap: normal;
7944
+ white-space: pre;
7945
+ }
7946
+
7947
+ .inkra-markdown__code-surface .token-comment,
7948
+ .inkra-markdown__code-surface .token-prolog { color: var(--inkra-ink-muted); }
7949
+ .inkra-markdown__code-surface .token-keyword,
7950
+ .inkra-markdown__code-surface .token-tag { color: var(--inkra-danger); }
7951
+ .inkra-markdown__code-surface .token-function,
7952
+ .inkra-markdown__code-surface .token-class-name,
7953
+ .inkra-markdown__code-surface .token-attr-name,
7954
+ .inkra-markdown__code-surface .token-property { color: var(--inkra-info-foreground); }
7955
+ .inkra-markdown__code-surface .token-string,
7956
+ .inkra-markdown__code-surface .token-attr-value { color: var(--inkra-success-foreground); }
7957
+ .inkra-markdown__code-surface .token-number,
7958
+ .inkra-markdown__code-surface .token-boolean { color: var(--inkra-warning-foreground); }
7959
+ .inkra-markdown__code-surface .token-punctuation,
7960
+ .inkra-markdown__code-surface .token-operator { color: var(--inkra-ink); }
7961
+
7962
+ .inkra-markdown__table-frame {
7963
+ margin-block: 0 var(--inkra-space-4);
7964
+ max-width: 100%;
7965
+ min-width: 0;
6592
7966
  position: relative;
6593
- will-change: transform;
6594
7967
  }
6595
7968
 
6596
- .inkra-virtual-list:not([data-virtualized="true"]) .inkra-virtual-list__item {
6597
- will-change: auto;
7969
+ .inkra-markdown__table {
7970
+ margin: 0;
7971
+ max-width: 100%;
7972
+ overscroll-behavior-inline: contain;
6598
7973
  }
6599
7974
 
6600
- .inkra-virtual-list__item > .inkra-virtual-list__separator {
6601
- color: var(--inkra-border);
6602
- inset-block-start: -4px;
6603
- inset-inline: var(--inkra-space-3);
6604
- inline-size: auto;
6605
- opacity: .58;
6606
- position: absolute;
6607
- width: auto;
7975
+ .inkra-markdown .inkra-markdown__table:focus-visible { outline: 0; }
7976
+ .inkra-markdown__table-focus { inset: 0; }
7977
+ .inkra-markdown__table:focus-visible + .inkra-markdown__table-focus { opacity: 1; }
7978
+
7979
+ .inkra-markdown__image-frame {
7980
+ display: inline-block;
7981
+ margin-block: var(--inkra-space-2);
7982
+ max-width: 100%;
7983
+ padding: var(--inkra-space-1);
6608
7984
  }
6609
7985
 
6610
- .inkra-virtual-list__empty {
6611
- color: var(--inkra-ink-muted);
6612
- display: grid;
6613
- min-block-size: 8rem;
6614
- padding: var(--inkra-space-6);
6615
- place-items: center;
6616
- text-align: center;
7986
+ .inkra-markdown__image {
7987
+ display: block;
7988
+ height: auto;
7989
+ max-width: 100%;
7990
+ }
7991
+
7992
+ @media (max-width: 520px) {
7993
+ .inkra-markdown__heading { overflow-wrap: anywhere; }
7994
+ .inkra-markdown__code-surface { padding: var(--inkra-space-3); }
6617
7995
  }
6618
7996
 
6619
7997
  @media (forced-colors: active) {
6620
- .inkra-virtual-list__frame { border: 1px solid CanvasText; }
6621
- .inkra-virtual-list:focus-visible {
7998
+ .inkra-markdown__link { text-decoration: underline; }
7999
+ .inkra-markdown__link:focus-visible,
8000
+ .inkra-markdown__code-surface:focus-visible,
8001
+ .inkra-markdown .inkra-markdown__table:focus-visible {
6622
8002
  outline: var(--inkra-focus-width) solid Highlight;
6623
- outline-color: Highlight;
6624
8003
  outline-offset: calc(-1 * var(--inkra-focus-width));
6625
8004
  }
6626
- .inkra-virtual-list__item > .inkra-virtual-list__separator {
6627
- inset-block-start: 0;
6628
- opacity: 1;
6629
- }
8005
+ .inkra-pencil-surface.inkra-markdown__link-focus,
8006
+ .inkra-pencil-surface.inkra-markdown__code-focus,
8007
+ .inkra-pencil-surface.inkra-markdown__table-focus { display: none !important; }
8008
+ .inkra-markdown__link-line,
8009
+ .inkra-markdown__bullet,
8010
+ .inkra-markdown__ordered-marker { display: none; }
8011
+ .inkra-markdown .inkra-markdown__list--unordered { list-style: disc; padding-inline-start: 1.4rem; }
8012
+ .inkra-markdown .inkra-markdown__list--ordered { list-style: decimal; padding-inline-start: 1.8rem; }
8013
+ .inkra-markdown__list--unordered > .inkra-markdown__list-item,
8014
+ .inkra-markdown__list--ordered > .inkra-markdown__list-item { display: list-item; }
8015
+ .inkra-markdown__list--unordered > .task-list-item { list-style: none; }
8016
+ .inkra-markdown__list-content { grid-column: auto; }
8017
+ .inkra-markdown :not(pre) > .inkra-markdown__code { background: Canvas; border: 1px solid CanvasText; color: CanvasText; }
8018
+ .inkra-markdown__code-surface,
8019
+ .inkra-markdown__code-surface .inkra-pencil-text { color: CanvasText; }
8020
+ .inkra-markdown__task-checkbox > .inkra-selection-control__input { height: 18px; width: 18px; }
6630
8021
  }
6631
8022
 
6632
8023
  @media print {
6633
- .inkra-virtual-list {
6634
- block-size: auto !important;
6635
- overflow: visible;
6636
- }
6637
-
6638
- .inkra-virtual-list__item > .inkra-virtual-list__separator {
6639
- inset-block-start: 0;
8024
+ .inkra-markdown__link { color: currentcolor; text-decoration: underline; }
8025
+ .inkra-pencil-surface.inkra-markdown__link-focus,
8026
+ .inkra-pencil-surface.inkra-markdown__code-focus,
8027
+ .inkra-pencil-surface.inkra-markdown__table-focus { display: none !important; }
8028
+ .inkra-markdown__link-line,
8029
+ .inkra-markdown__bullet,
8030
+ .inkra-markdown__ordered-marker { display: none; }
8031
+ .inkra-markdown .inkra-markdown__list--unordered { list-style: disc; padding-inline-start: 1.4rem; }
8032
+ .inkra-markdown .inkra-markdown__list--ordered { list-style: decimal; padding-inline-start: 1.8rem; }
8033
+ .inkra-markdown__list--unordered > .inkra-markdown__list-item,
8034
+ .inkra-markdown__list--ordered > .inkra-markdown__list-item { display: list-item; }
8035
+ .inkra-markdown__list--unordered > .task-list-item { list-style: none; }
8036
+ .inkra-markdown__list-content { grid-column: auto; }
8037
+ .inkra-markdown__code-frame { border: 1px solid currentcolor; }
8038
+ .inkra-markdown__code-header { border-bottom: 1px solid currentcolor; }
8039
+ .inkra-markdown__code-header .inkra-card__action { display: none; }
8040
+ .inkra-markdown__code-surface .inkra-pencil-text { color: currentcolor; }
8041
+ .inkra-markdown__task-checkbox > .inkra-selection-control__input {
8042
+ appearance: auto;
8043
+ height: 18px;
6640
8044
  opacity: 1;
8045
+ position: static;
8046
+ width: 18px;
8047
+ z-index: auto;
6641
8048
  }
8049
+ .inkra-markdown__task-checkbox > .inkra-selection-control__mark { display: none !important; }
8050
+ }
8051
+
8052
+ @media print, (forced-colors: active) {
8053
+ .inkra-markdown__deleted[data-pencil-strike-ready="true"],
8054
+ .inkra-markdown__deleted .inkra-pencil-text { text-decoration: line-through; }
8055
+ .inkra-markdown__deleted > .inkra-markdown__strike { display: none; }
6642
8056
  }
6643
8057
 
6644
8058
  /* required styles */
@@ -7366,6 +8780,14 @@ svg.leaflet-image-layer.leaflet-interactive path {
7366
8780
  .inkra-calendar__accessory { top: 46px; inset-inline: 0; margin: auto; max-width: 100%; }
7367
8781
  }
7368
8782
 
8783
+ /* Opt-in summaries remain operable at every width. The legacy responsive
8784
+ clipping must not hide a disclosure or events the user explicitly revealed. */
8785
+ .inkra-calendar__events-toggle { pointer-events: auto; min-width: 0; max-width: 100%; white-space: normal; }
8786
+ .inkra-calendar__events-toggle .inkra-button__label { min-width: 0; white-space: normal; overflow-wrap: anywhere; }
8787
+ .inkra-calendar-scroll[data-event-summary] .inkra-calendar__events { display: grid; }
8788
+ .inkra-calendar-scroll[data-event-summary] .inkra-calendar__event-card:nth-child(n + 3) { display: block; }
8789
+ .inkra-calendar-scroll[data-event-summary] .inkra-calendar__day-card { padding: 44px 5px 8px; }
8790
+
7369
8791
  .inkra-agenda { display: flex; flex-direction: column; gap: 12px; min-width: 0; height: 100%; color: var(--inkra-ink); }
7370
8792
  .inkra-agenda__heading { display: flex; align-items: baseline; justify-content: space-between; flex-wrap: wrap; gap: 8px; flex: none; }
7371
8793
  .inkra-agenda__heading h3 { margin: 0; font-size: 20px; font-weight: 400; }
@@ -7420,23 +8842,47 @@ svg.leaflet-image-layer.leaflet-interactive path {
7420
8842
  .inkra-toast__theme-anchor { display: none; }
7421
8843
 
7422
8844
  .inkra-toast__viewport {
8845
+ --inkra-toast-enter-x: 0px;
8846
+ --inkra-toast-enter-y: 12px;
8847
+ --inkra-toast-edge: var(--inkra-space-5);
8848
+ --inkra-toast-start: max(var(--inkra-toast-edge), env(safe-area-inset-left));
8849
+ --inkra-toast-end: max(var(--inkra-toast-edge), env(safe-area-inset-right));
7423
8850
  display: flex;
7424
8851
  flex-direction: column;
7425
8852
  gap: var(--inkra-space-3);
7426
- inset-block: auto var(--inkra-space-5);
7427
- inset-inline: auto var(--inkra-space-5);
8853
+ inset-block: auto max(var(--inkra-toast-edge), env(safe-area-inset-bottom));
8854
+ inset-inline: auto var(--inkra-toast-end);
7428
8855
  margin: 0;
7429
8856
  max-height: calc(100dvh - var(--inkra-space-10));
7430
8857
  max-width: calc(100vw - var(--inkra-space-10));
7431
8858
  outline: 0;
7432
- padding: 0;
8859
+ padding: 4px;
8860
+ box-sizing: border-box;
8861
+ pointer-events: none;
8862
+ overflow: auto;
7433
8863
  position: fixed;
7434
- width: min(24rem, calc(100vw - var(--inkra-space-10)));
8864
+ width: min(24rem, calc(100vw - 2 * var(--inkra-toast-edge)));
7435
8865
  z-index: calc(var(--inkra-z-toast, 50) + var(--inkra-floating-layer-offset, 0));
7436
8866
  }
7437
8867
 
7438
- .inkra-toast__viewport[data-placement^="top"] { inset-block: var(--inkra-space-5) auto; }
7439
- .inkra-toast__viewport[data-placement$="start"] { inset-inline: var(--inkra-space-5) auto; }
8868
+ .inkra-toast__viewport[data-placement^="top"] { inset-block: max(var(--inkra-toast-edge), env(safe-area-inset-top)) auto; --inkra-toast-enter-y: -12px; }
8869
+ .inkra-toast__viewport[data-placement^="bottom"] { flex-direction: column-reverse; }
8870
+ .inkra-toast__viewport:dir(rtl) { --inkra-toast-start: max(var(--inkra-toast-edge), env(safe-area-inset-right)); --inkra-toast-end: max(var(--inkra-toast-edge), env(safe-area-inset-left)); }
8871
+ .inkra-toast__viewport[data-placement$="start"] { inset-inline: var(--inkra-toast-start) auto; align-items: flex-start; }
8872
+ .inkra-toast__viewport[data-placement$="end"] { align-items: flex-end; }
8873
+ .inkra-toast__viewport:is([data-placement="top-center"], [data-placement="bottom-center"], [data-placement="center"]) {
8874
+ inset-inline: auto;
8875
+ left: 50%;
8876
+ right: auto;
8877
+ transform: translateX(-50%);
8878
+ align-items: center;
8879
+ }
8880
+ .inkra-toast__viewport[data-placement^="center"] { top: 50%; bottom: auto; transform: translateY(-50%); --inkra-toast-enter-y: 0px; }
8881
+ .inkra-toast__viewport[data-placement="center"] { transform: translate(-50%, -50%); --inkra-toast-enter-y: 8px; }
8882
+ .inkra-toast__viewport[data-placement="center-start"] { --inkra-toast-enter-x: -12px; }
8883
+ .inkra-toast__viewport[data-placement="center-end"] { --inkra-toast-enter-x: 12px; }
8884
+ .inkra-toast__viewport:dir(rtl)[data-placement="center-start"] { --inkra-toast-enter-x: 12px; }
8885
+ .inkra-toast__viewport:dir(rtl)[data-placement="center-end"] { --inkra-toast-enter-x: -12px; }
7440
8886
 
7441
8887
  .inkra-toast__root {
7442
8888
  --inkra-toast-translate-x: var(--toast-swipe-movement-x, 0px);
@@ -7445,6 +8891,9 @@ svg.leaflet-image-layer.leaflet-interactive path {
7445
8891
  color: var(--inkra-toast-foreground, var(--inkra-ink));
7446
8892
  max-width: 100%;
7447
8893
  min-width: 0;
8894
+ flex: 0 0 auto;
8895
+ width: 100%;
8896
+ pointer-events: auto;
7448
8897
  position: relative;
7449
8898
  transform: translate(var(--inkra-toast-translate-x), var(--inkra-toast-translate-y));
7450
8899
  transition: opacity var(--inkra-motion-normal) var(--inkra-ease), transform var(--inkra-motion-normal) var(--inkra-ease);
@@ -7454,7 +8903,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
7454
8903
  .inkra-toast__root[data-ending-style],
7455
8904
  .inkra-toast__root[data-limited] { opacity: 0; }
7456
8905
 
7457
- .inkra-toast__root[data-starting-style] { transform: translateY(8px); }
8906
+ .inkra-toast__root[data-limited] { position: absolute; visibility: hidden; pointer-events: none; }
8907
+ .inkra-toast__root:focus-visible { outline: 0; }
8908
+ .inkra-toast__focus.inkra-pencil-surface { --inkra-accent-strong: var(--inkra-focus); display: none; position: absolute; inset: -3px; pointer-events: none; z-index: 2; }
8909
+ .inkra-toast__root:focus-visible > .inkra-toast__focus { display: block; }
8910
+ .inkra-toast__root[data-starting-style],
8911
+ .inkra-toast__root[data-ending-style] { transform: translate(var(--inkra-toast-enter-x), var(--inkra-toast-enter-y)); }
7458
8912
  .inkra-toast__root[data-ending-style][data-swipe-direction="left"] { transform: translateX(-110%); }
7459
8913
  .inkra-toast__root[data-ending-style][data-swipe-direction="right"] { transform: translateX(110%); }
7460
8914
  .inkra-toast__root[data-ending-style][data-swipe-direction="up"] { transform: translateY(-110%); }
@@ -7486,10 +8940,21 @@ svg.leaflet-image-layer.leaflet-interactive path {
7486
8940
  position: absolute;
7487
8941
  z-index: 0;
7488
8942
  }
8943
+ .inkra-toast__wash { inset: 0; position: absolute; z-index: 0; --inkra-selection-pigment: var(--inkra-accent-soft); }
8944
+ .inkra-toast__root[data-tone="neutral"] .inkra-toast__wash { --inkra-selection-pigment: var(--inkra-ink-muted); opacity: .5; }
8945
+
8946
+ .inkra-toast__root[data-variant="compact"] { width: fit-content; border-radius: var(--inkra-radius-md); }
8947
+ .inkra-toast__root[data-variant="compact"] .inkra-toast__surface { border-radius: inherit; overflow: hidden; }
8948
+ .inkra-toast__root[data-variant="compact"] .inkra-toast__surface[data-pencil-fallback="true"] { border: 0; }
8949
+ .inkra-toast__root[data-variant="compact"] .inkra-toast__content { align-items: center; padding: var(--inkra-space-1) var(--inkra-space-3); gap: var(--inkra-space-2); }
8950
+ .inkra-toast__root[data-variant="compact"] .inkra-toast__title { font-size: var(--inkra-text-md); }
8951
+ .inkra-toast__root[data-variant="compact"] .inkra-toast__copy { gap: 2px; flex-basis: 0; }
8952
+ .inkra-toast__root[data-variant="card"] .inkra-toast__copy { flex-basis: 120px; }
7489
8953
 
7490
8954
  .inkra-toast__content {
7491
8955
  align-items: flex-start;
7492
8956
  display: flex;
8957
+ flex-wrap: wrap;
7493
8958
  gap: var(--inkra-space-3);
7494
8959
  justify-content: space-between;
7495
8960
  min-height: var(--inkra-control-md);
@@ -7503,26 +8968,35 @@ svg.leaflet-image-layer.leaflet-interactive path {
7503
8968
  .inkra-toast__title { font-size: var(--inkra-text-lg); line-height: var(--inkra-line-ui); margin: 0; overflow-wrap: anywhere; }
7504
8969
  .inkra-toast__description { color: var(--inkra-toast-foreground, var(--inkra-ink-muted)); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); margin: 0; overflow-wrap: anywhere; }
7505
8970
  .inkra-toast__actions { align-items: center; display: flex; flex: none; gap: var(--inkra-space-1); }
8971
+ .inkra-toast__actions { max-width: 100%; flex-wrap: wrap; margin-inline-start: auto; }
8972
+ .inkra-toast__action { max-width: 100%; }
8973
+ .inkra-toast__action .inkra-button__surface { height: auto; min-height: var(--inkra-button-visual-height); max-width: 100%; padding-block: var(--inkra-space-2); }
8974
+ .inkra-toast__action > .inkra-button__focus-ring { height: calc(100% + 2 * var(--inkra-focus-offset)); }
8975
+ .inkra-toast__action .inkra-button__label,
8976
+ .inkra-toast__action .inkra-pencil-text,
8977
+ .inkra-toast__action .inkra-pencil-text__source { min-inline-size: 0; white-space: normal; overflow-wrap: anywhere; }
7506
8978
  .inkra-toast__action,
7507
8979
  .inkra-toast__close { position: relative; z-index: 1; }
7508
8980
 
7509
8981
  @media (max-width: 30rem) {
7510
8982
  .inkra-toast__viewport {
7511
- inset-inline: var(--inkra-space-4);
7512
- max-width: none;
7513
- width: auto;
8983
+ --inkra-toast-edge: var(--inkra-space-3);
8984
+ max-width: calc(100vw - 2 * var(--inkra-toast-edge));
7514
8985
  }
7515
- .inkra-toast__content { align-items: stretch; flex-direction: column; }
8986
+ .inkra-toast__content { flex-wrap: wrap; }
8987
+ .inkra-toast__copy { flex-basis: 120px; }
7516
8988
  .inkra-toast__actions { justify-content: flex-end; }
7517
8989
  }
7518
8990
 
7519
8991
  @media (prefers-reduced-motion: reduce) {
7520
8992
  .inkra-toast__root { transition: none; }
8993
+ .inkra-toast__root[data-starting-style], .inkra-toast__root[data-ending-style] { transform: none; }
7521
8994
  }
7522
8995
 
7523
8996
  @media (forced-colors: active) {
7524
- .inkra-toast__surface { display: none; }
8997
+ .inkra-toast__surface, .inkra-toast__wash, .inkra-toast__focus.inkra-pencil-surface { display: none !important; }
7525
8998
  .inkra-toast__root { border: 1px solid CanvasText; background: Canvas; color: CanvasText; forced-color-adjust: none; }
8999
+ .inkra-toast__root:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: 0; }
7526
9000
  .inkra-toast__description { color: CanvasText; }
7527
9001
  }
7528
9002
 
@@ -7533,6 +9007,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
7533
9007
  color: var(--inkra-ink);
7534
9008
  display: grid;
7535
9009
  gap: var(--inkra-space-2);
9010
+ grid-template-columns: minmax(0, 1fr);
7536
9011
  justify-items: var(--inkra-empty-align, center);
7537
9012
  min-width: 0;
7538
9013
  padding: var(--inkra-empty-padding, var(--inkra-space-6));
@@ -7555,8 +9030,47 @@ svg.leaflet-image-layer.leaflet-interactive path {
7555
9030
  min-height: 2rem;
7556
9031
  min-width: 2rem;
7557
9032
  }
7558
- .inkra-empty[data-size="sm"] .inkra-empty__icon { min-height: 1.5rem; min-width: 1.5rem; }
7559
- .inkra-empty[data-size="lg"] .inkra-empty__icon { min-height: 2.5rem; min-width: 2.5rem; }
9033
+ .inkra-empty[data-size="sm"] .inkra-empty__icon:not([data-illustration]) { min-height: 1.5rem; min-width: 1.5rem; }
9034
+ .inkra-empty[data-size="lg"] .inkra-empty__icon:not([data-illustration]) { min-height: 2.5rem; min-width: 2.5rem; }
9035
+
9036
+ .inkra-empty { --inkra-empty-illustration-size: 160px; }
9037
+ .inkra-empty[data-size="sm"] { --inkra-empty-illustration-size: 112px; }
9038
+ .inkra-empty[data-size="lg"] { --inkra-empty-illustration-size: 192px; }
9039
+ .inkra-empty__icon[data-illustration] {
9040
+ width: var(--inkra-empty-icon-size, var(--inkra-empty-illustration-size, 160px));
9041
+ max-width: 100%;
9042
+ min-width: 0;
9043
+ min-height: 0;
9044
+ }
9045
+ .inkra-empty__illustration {
9046
+ aspect-ratio: 1;
9047
+ display: block;
9048
+ flex: 1;
9049
+ min-width: 0;
9050
+ pointer-events: none;
9051
+ position: relative;
9052
+ }
9053
+ .inkra-empty__illustration-layer,
9054
+ .inkra-empty__illustration-fallback {
9055
+ position: absolute;
9056
+ inset: 0;
9057
+ width: 100%;
9058
+ height: 100%;
9059
+ }
9060
+ .inkra-empty__illustration-layer--accent { color: var(--inkra-accent); }
9061
+ .inkra-empty__illustration-layer > .inkra-pencil-icon {
9062
+ width: 100% !important;
9063
+ height: 100% !important;
9064
+ }
9065
+ .inkra-empty__illustration-layer > [data-pencil-icon-ready] + svg { display: none; }
9066
+ .inkra-empty__illustration-layer > canvas:not([data-pencil-icon-ready]) { visibility: hidden; }
9067
+ @media (forced-colors: active), print {
9068
+ .inkra-empty__illustration-layer > .inkra-pencil-icon { display: none; }
9069
+ .inkra-empty__illustration-layer > [data-pencil-icon-ready] + svg { display: block; }
9070
+ }
9071
+ @media (forced-colors: active) {
9072
+ .inkra-empty__illustration-layer--accent { color: CanvasText; }
9073
+ }
7560
9074
 
7561
9075
  .inkra-empty__title {
7562
9076
  font-size: var(--inkra-text-xl);
@@ -7718,7 +9232,7 @@ svg.leaflet-image-layer.leaflet-interactive path {
7718
9232
  .inkra-alert-dialog__content {
7719
9233
  animation: inkra-alert-dialog-content-in var(--inkra-motion-normal) var(--inkra-ease);
7720
9234
  inset-block-start: 50%;
7721
- inset-inline-start: 50%;
9235
+ left: 50%;
7722
9236
  max-height: min(80vh, calc(100dvh - var(--inkra-space-8)));
7723
9237
  outline: 0;
7724
9238
  position: fixed;
@@ -7735,9 +9249,17 @@ svg.leaflet-image-layer.leaflet-interactive path {
7735
9249
  .inkra-alert-dialog__backdrop[data-state],
7736
9250
  .inkra-alert-dialog__content[data-state] { animation-fill-mode: both; }
7737
9251
 
7738
- .inkra-alert-dialog__content:focus-visible {
7739
- outline: var(--inkra-focus-width) solid var(--inkra-focus);
7740
- outline-offset: var(--inkra-focus-offset);
9252
+ .inkra-alert-dialog__focus-ring {
9253
+ --inkra-accent-strong: var(--inkra-focus);
9254
+ inset: var(--inkra-focus-width);
9255
+ opacity: 0;
9256
+ pointer-events: none;
9257
+ position: absolute !important;
9258
+ z-index: 2;
9259
+ }
9260
+
9261
+ .inkra-alert-dialog__content:focus > .inkra-alert-dialog__focus-ring {
9262
+ opacity: 1;
7741
9263
  }
7742
9264
 
7743
9265
  .inkra-alert-dialog__surface,
@@ -7749,8 +9271,9 @@ svg.leaflet-image-layer.leaflet-interactive path {
7749
9271
  width: 100%;
7750
9272
  }
7751
9273
 
7752
- .inkra-alert-dialog__surface { color: var(--inkra-ink); }
7753
- .inkra-alert-dialog__layout { overflow: hidden; }
9274
+ .inkra-alert-dialog__surface { color: var(--inkra-ink); overflow: hidden; }
9275
+ .inkra-alert-dialog__layout { overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; }
9276
+ .inkra-alert-dialog__layout:has(> .inkra-alert-dialog__body) { overflow: hidden; }
7754
9277
 
7755
9278
  .inkra-alert-dialog__header,
7756
9279
  .inkra-alert-dialog__body,
@@ -7804,7 +9327,6 @@ svg.leaflet-image-layer.leaflet-interactive path {
7804
9327
 
7805
9328
  @media (max-width: 30rem) {
7806
9329
  .inkra-alert-dialog__content {
7807
- max-height: calc(100dvh - var(--inkra-space-4));
7808
9330
  width: calc(100vw - var(--inkra-space-4));
7809
9331
  }
7810
9332
  .inkra-alert-dialog__header,
@@ -7812,6 +9334,10 @@ svg.leaflet-image-layer.leaflet-interactive path {
7812
9334
  .inkra-alert-dialog__footer { padding: var(--inkra-space-4); }
7813
9335
  }
7814
9336
 
9337
+ @media (max-height: 30rem) {
9338
+ .inkra-alert-dialog__content { max-height: calc(100dvh - var(--inkra-space-4)); }
9339
+ }
9340
+
7815
9341
  @media (prefers-reduced-motion: reduce) {
7816
9342
  .inkra-alert-dialog__backdrop,
7817
9343
  .inkra-alert-dialog__content { animation: none !important; }
@@ -7825,6 +9351,8 @@ svg.leaflet-image-layer.leaflet-interactive path {
7825
9351
  @media (forced-colors: active) {
7826
9352
  .inkra-alert-dialog__backdrop { background: CanvasText; opacity: .25; }
7827
9353
  .inkra-alert-dialog__surface { background: Canvas; border: 1px solid CanvasText; }
9354
+ .inkra-pencil-surface.inkra-alert-dialog__focus-ring { display: none !important; }
9355
+ .inkra-alert-dialog__content:focus { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
7828
9356
  .inkra-alert-dialog__header[data-divided] { border-bottom: 1px solid CanvasText; }
7829
9357
  .inkra-alert-dialog__footer[data-divided] { border-top: 1px solid CanvasText; }
7830
9358
  }
@@ -7840,13 +9368,26 @@ svg.leaflet-image-layer.leaflet-interactive path {
7840
9368
 
7841
9369
  .inkra-drawer__content {
7842
9370
  box-sizing: border-box;
9371
+ container-name: inkra-drawer;
9372
+ container-type: inline-size;
7843
9373
  max-height: 100dvh;
7844
9374
  max-width: 100vw;
7845
9375
  outline: 0;
7846
9376
  position: fixed;
7847
9377
  z-index: calc(var(--inkra-z-modal, 30) + var(--inkra-floating-layer-offset, 0) + 1);
7848
9378
  }
7849
- .inkra-drawer__content:focus-visible { outline: var(--inkra-focus-width) solid var(--inkra-focus); outline-offset: calc(-1 * var(--inkra-focus-width)); }
9379
+ .inkra-drawer__content:focus-visible { outline: 0; }
9380
+ .inkra-drawer__focus-ring {
9381
+ --inkra-accent-strong: var(--inkra-focus);
9382
+
9383
+ display: block !important;
9384
+ inset: var(--inkra-focus-width);
9385
+ opacity: 0;
9386
+ pointer-events: none;
9387
+ position: absolute !important;
9388
+ z-index: 3;
9389
+ }
9390
+ .inkra-drawer__content:focus-visible > .inkra-drawer__focus-ring { opacity: 1; }
7850
9391
  .inkra-drawer__content[data-direction="left"],
7851
9392
  .inkra-drawer__content[data-direction="right"] { block-size: 100dvh; inset-block: 0; inline-size: min(var(--inkra-drawer-size), 100vw); }
7852
9393
  .inkra-drawer__content[data-direction="left"] { animation: inkra-drawer-left-in var(--inkra-motion-slow) var(--inkra-ease); left: 0; }
@@ -7875,13 +9416,23 @@ svg.leaflet-image-layer.leaflet-interactive path {
7875
9416
  .inkra-drawer__content[data-direction="bottom"] .inkra-drawer__edge { block-size: 8px; inline-size: 100%; inset-block-start: -4px; inset-inline: 0; }
7876
9417
 
7877
9418
  .inkra-drawer__header,
7878
- .inkra-drawer__footer { display: flex; flex: none; gap: var(--inkra-space-3); min-width: 0; padding: var(--inkra-space-5); position: relative; }
7879
- .inkra-drawer__header { align-items: center; }
7880
- .inkra-drawer__heading { display: grid; flex: 1; gap: var(--inkra-space-2); min-width: 0; overflow-wrap: anywhere; }
7881
- .inkra-drawer__header-actions { align-items: center; display: flex; flex: none; gap: var(--inkra-space-2); }
9419
+ .inkra-drawer__body,
9420
+ .inkra-drawer__footer { box-sizing: border-box; gap: var(--inkra-space-3); min-width: 0; padding: var(--inkra-space-5); position: relative; }
9421
+ .inkra-drawer__header,
9422
+ .inkra-drawer__footer { flex: 0 1 auto; min-height: 0; }
9423
+ .inkra-drawer__header {
9424
+ align-items: center;
9425
+ display: flex;
9426
+ max-block-size: 50%;
9427
+ overflow: auto;
9428
+ overscroll-behavior: contain;
9429
+ scrollbar-gutter: stable;
9430
+ }
9431
+ .inkra-drawer__heading { display: grid; flex: 1 1 auto; gap: var(--inkra-space-2); min-width: 0; overflow-wrap: anywhere; }
9432
+ .inkra-drawer__header-actions { align-items: center; display: flex; flex: none; flex-wrap: wrap; gap: var(--inkra-space-2); justify-content: flex-end; max-inline-size: 100%; min-width: 0; overflow: auto; overscroll-behavior: contain; }
7882
9433
  .inkra-drawer__close-button { flex: none; }
7883
- .inkra-drawer__body { flex: 1 1 auto; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: var(--inkra-space-5); scrollbar-gutter: stable; }
7884
- .inkra-drawer__footer { align-items: center; flex-wrap: wrap; justify-content: flex-end; }
9434
+ .inkra-drawer__body { flex: 1 1 0; min-height: 0; min-width: 0; overflow: auto; overscroll-behavior: contain; padding: var(--inkra-space-5); scrollbar-gutter: stable; }
9435
+ .inkra-drawer__footer { align-items: center; display: flex; flex-wrap: wrap; justify-content: flex-end; max-block-size: 40%; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: auto; }
7885
9436
  .inkra-drawer__footer[data-align="start"] { justify-content: flex-start; }
7886
9437
  .inkra-drawer__footer[data-align="center"] { justify-content: center; }
7887
9438
  .inkra-drawer__footer > .inkra-button { max-width: 100%; }
@@ -7892,6 +9443,11 @@ svg.leaflet-image-layer.leaflet-interactive path {
7892
9443
  .inkra-drawer__header > .inkra-drawer__divider { bottom: -4px; }
7893
9444
  .inkra-drawer__footer > .inkra-drawer__divider { top: -4px; }
7894
9445
 
9446
+ @container inkra-drawer (max-width: 24rem) {
9447
+ .inkra-drawer__header[data-custom-action] { align-items: stretch; flex-direction: column; }
9448
+ .inkra-drawer__header[data-custom-action] .inkra-drawer__header-actions { align-self: stretch; order: -1; }
9449
+ }
9450
+
7895
9451
  @keyframes inkra-drawer-backdrop-in { from { opacity: 0; } to { opacity: 1; } }
7896
9452
  @keyframes inkra-drawer-backdrop-out { from { opacity: 1; } to { opacity: 0; } }
7897
9453
  @keyframes inkra-drawer-left-in { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@@ -7930,26 +9486,51 @@ svg.leaflet-image-layer.leaflet-interactive path {
7930
9486
  .inkra-drawer__content[data-direction="bottom"] { border-top: 1px solid CanvasText; }
7931
9487
  .inkra-drawer__header[data-divided] { border-bottom: 1px solid CanvasText; }
7932
9488
  .inkra-drawer__footer[data-divided] { border-top: 1px solid CanvasText; }
7933
- .inkra-drawer__edge { display: none; }
9489
+ .inkra-drawer__edge,
9490
+ .inkra-drawer__focus-ring { display: none !important; }
9491
+ .inkra-drawer__content:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
7934
9492
  }
7935
9493
 
7936
9494
  .inkra-date-picker {
9495
+ --inkra-date-picker-control-height: var(--inkra-control-md);
9496
+
7937
9497
  align-items: center;
7938
9498
  display: inline-flex;
7939
- gap: var(--inkra-space-1);
7940
9499
  max-width: 100%;
9500
+ min-height: var(--inkra-touch-target);
7941
9501
  min-width: 0;
7942
9502
  }
7943
9503
 
9504
+ .inkra-date-picker[data-size="sm"] {
9505
+ --inkra-date-picker-control-height: var(--inkra-control-sm);
9506
+ }
9507
+
9508
+ .inkra-date-picker[data-size="lg"] {
9509
+ --inkra-date-picker-control-height: var(--inkra-control-lg);
9510
+ }
9511
+
7944
9512
  .inkra-date-picker[data-full-width] {
7945
9513
  display: flex;
7946
9514
  width: 100%;
7947
9515
  }
7948
9516
 
7949
- .inkra-date-picker__trigger {
9517
+ .inkra-button-group.inkra-date-picker__control {
9518
+ align-items: center;
9519
+ block-size: var(--inkra-date-picker-control-height);
9520
+ flex: 1 1 auto;
9521
+ min-width: 0;
9522
+ overflow: visible;
9523
+ }
9524
+
9525
+ .inkra-date-picker__control > .inkra-date-picker__trigger {
9526
+ flex: 1 1 auto;
7950
9527
  min-width: 0;
7951
9528
  }
7952
9529
 
9530
+ .inkra-date-picker__control > .inkra-date-picker__clear {
9531
+ flex: 0 0 auto;
9532
+ }
9533
+
7953
9534
  .inkra-date-picker__trigger .inkra-button__content {
7954
9535
  justify-content: flex-start;
7955
9536
  min-width: 0;
@@ -7972,6 +9553,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
7972
9553
  visibility: hidden;
7973
9554
  }
7974
9555
 
9556
+ .inkra-date-picker__control .inkra-button-group__divider[data-orientation="vertical"] {
9557
+ block-size: var(--inkra-date-picker-control-height);
9558
+ inset-block-start: 50%;
9559
+ transform: translateY(-50%);
9560
+ }
9561
+
7975
9562
  .inkra-date-picker__form-field,
7976
9563
  .inkra-date-picker__accessible-value {
7977
9564
  block-size: 1px;
@@ -8013,18 +9600,35 @@ svg.leaflet-image-layer.leaflet-interactive path {
8013
9600
  }
8014
9601
 
8015
9602
  .inkra-time-picker {
9603
+ --inkra-time-picker-control-height: var(--inkra-control-md);
9604
+
8016
9605
  display: flex;
8017
9606
  align-items: center;
8018
9607
  gap: var(--inkra-space-2);
8019
9608
  position: relative;
9609
+ min-height: var(--inkra-touch-target);
8020
9610
  min-width: 0;
8021
9611
  width: fit-content;
8022
9612
  max-width: 100%;
8023
9613
  }
9614
+ .inkra-time-picker[data-size="sm"] { --inkra-time-picker-control-height: var(--inkra-control-sm); }
9615
+ .inkra-time-picker[data-size="lg"] { --inkra-time-picker-control-height: var(--inkra-control-lg); }
8024
9616
  .inkra-time-picker[data-full-width="true"] { width: 100%; }
8025
- .inkra-time-picker__trigger { flex: 1; min-width: 0; }
8026
- .inkra-time-picker__clear { flex: none; }
9617
+ .inkra-button-group.inkra-time-picker__control {
9618
+ align-items: center;
9619
+ block-size: var(--inkra-time-picker-control-height);
9620
+ flex: 1 1 auto;
9621
+ min-width: 0;
9622
+ overflow: visible;
9623
+ }
9624
+ .inkra-time-picker__control > .inkra-time-picker__trigger { flex: 1 1 auto; min-width: 0; }
9625
+ .inkra-time-picker__control > .inkra-time-picker__clear { flex: 0 0 auto; }
8027
9626
  .inkra-time-picker__clear[aria-hidden="true"] { visibility: hidden; }
9627
+ .inkra-time-picker__control .inkra-button-group__divider[data-orientation="vertical"] {
9628
+ block-size: var(--inkra-time-picker-control-height);
9629
+ inset-block-start: 50%;
9630
+ transform: translateY(-50%);
9631
+ }
8028
9632
  .inkra-time-picker[data-invalid="true"] { color: var(--inkra-danger); }
8029
9633
  .inkra-time-picker__native,
8030
9634
  .inkra-time-picker__accessible-value {
@@ -8065,11 +9669,14 @@ svg.leaflet-image-layer.leaflet-interactive path {
8065
9669
  .inkra-pagination { min-inline-size: 0; max-inline-size: 100%; color: var(--inkra-ink); }
8066
9670
  .inkra-pagination__list { box-sizing: border-box; display: flex; flex-wrap: nowrap; align-items: center; gap: var(--inkra-space-1); max-inline-size: 100%; overflow-x: auto; overscroll-behavior-inline: contain; scroll-padding-inline: 8px; list-style: none; padding: 8px; margin: 0; }
8067
9671
  .inkra-pagination__list > li { display: flex; flex: 0 0 auto; }
8068
- .inkra-pagination__page.inkra-button { min-inline-size: var(--inkra-touch-target); }
8069
- .inkra-pagination__page .inkra-button__surface { padding-inline: var(--inkra-space-2); }
9672
+ .inkra-pagination__summary { align-items: center; box-sizing: border-box; font-variant-numeric: tabular-nums; justify-content: center; max-inline-size: 100%; min-block-size: var(--inkra-touch-target); min-inline-size: 0; overflow-wrap: anywhere; padding-inline: var(--inkra-space-2); text-align: center; white-space: normal; }
9673
+ .inkra-pagination__page-item { max-inline-size: max(var(--inkra-touch-target), 50%); }
9674
+ .inkra-pagination__page.inkra-button { max-inline-size: 100%; min-inline-size: var(--inkra-touch-target); scroll-margin-inline: 8px; }
9675
+ .inkra-pagination__page .inkra-button__surface { height: auto; min-height: var(--inkra-button-visual-height); padding-block: var(--inkra-space-1); padding-inline: var(--inkra-space-2); }
8070
9676
  .inkra-pagination__page .inkra-button__surface { isolation: isolate; }
9677
+ .inkra-pagination__page > .inkra-button__focus-ring { height: auto; inset-block: 0; top: 0; transform: none; }
8071
9678
  .inkra-pagination__page .inkra-button__content,
8072
- .inkra-pagination__page .inkra-button__label { position: static; }
9679
+ .inkra-pagination__page .inkra-button__label { max-inline-size: 100%; min-inline-size: 0; overflow-wrap: anywhere; position: static; white-space: normal; }
8073
9680
  .inkra-pagination__selection { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
8074
9681
  .inkra-pagination__page[aria-current="page"] { color: var(--inkra-selection-foreground); }
8075
9682
  .inkra-pagination__ellipsis { min-inline-size: 24px; min-block-size: var(--inkra-touch-target); align-items: center; justify-content: center; }
@@ -8077,71 +9684,102 @@ svg.leaflet-image-layer.leaflet-interactive path {
8077
9684
  .inkra-pagination__sr-only { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
8078
9685
  @media (forced-colors: active) {
8079
9686
  .inkra-pagination__page[aria-current="page"] { color: HighlightText; background: Highlight; outline: 1px solid Highlight; }
8080
- .inkra-pagination__selection { display: none; }
9687
+ .inkra-pencil-surface.inkra-pagination__selection { display: none !important; }
8081
9688
  }
8082
9689
  @media (prefers-reduced-motion: reduce) { .inkra-pagination * { transition: none !important; animation: none !important; } }
8083
9690
 
8084
9691
  .inkra-command { inline-size: 100%; min-inline-size: 0; color: var(--inkra-ink); font-family: var(--inkra-font-body); font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); }
8085
9692
  .inkra-command__paper { min-inline-size: 0; }
8086
9693
  .inkra-command__input-wrap { position: relative; padding: var(--inkra-space-2) var(--inkra-space-3); }
8087
- .inkra-command__input { display: block; box-sizing: border-box; inline-size: 100%; min-inline-size: 0; min-block-size: var(--inkra-touch-target); border: 0; border-radius: 0; background: transparent; color: inherit; font: inherit; padding: var(--inkra-space-2); }
9694
+ .inkra-command__input-frame { align-items: center; box-sizing: border-box; display: flex; flex: 1 1 auto; inline-size: 100%; min-block-size: var(--inkra-touch-target); min-inline-size: 0; padding-inline: var(--inkra-space-3); position: relative; }
9695
+ .inkra-command__input-icon { align-items: center; color: var(--inkra-ink-muted); display: inline-flex; flex: 0 0 22px; block-size: 22px; inline-size: 22px; }
9696
+ .inkra-command__input { --inkra-editable-placeholder-color: var(--inkra-ink-subtle); --inkra-editable-text-color: var(--inkra-ink); display: block; box-sizing: border-box; flex: 1 1 auto; inline-size: 0; min-inline-size: 0; min-block-size: var(--inkra-touch-target); border: 0; border-radius: 0; background: transparent; caret-color: var(--inkra-ink); color: inherit; font: inherit; padding: 0 var(--inkra-space-2); outline: 0; position: relative; z-index: 2; }
8088
9697
  .inkra-command__input::placeholder { color: var(--inkra-ink-subtle); opacity: 1; }
8089
- .inkra-command__input:focus-visible { outline: var(--inkra-focus-width) solid var(--inkra-focus); outline-offset: 0; border-radius: var(--inkra-radius-md); }
9698
+ .inkra-command__input-frame > .inkra-editable-text { display: none; opacity: 0; pointer-events: none; position: absolute; z-index: 3; }
9699
+ .inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-editable-text { display: block; opacity: 1; }
9700
+ .inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input { color: transparent !important; }
9701
+ .inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input::placeholder { color: transparent !important; }
9702
+ .inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input::selection { background: var(--inkra-selection); color: transparent; }
8090
9703
  .inkra-command__input-line { position: absolute; inset-inline: 12px; inset-block-end: 0; }
8091
- .inkra-command__list { box-sizing: border-box; max-block-size: min(360px, 50vh); overflow: auto; overscroll-behavior: contain; padding: var(--inkra-space-2); scroll-padding-block: var(--inkra-space-2); }
9704
+ .inkra-command__input-focus-line { color: var(--inkra-focus); opacity: 0; pointer-events: none; position: absolute; inset-inline: 12px; inset-block-end: 0; z-index: 4; }
9705
+ .inkra-command__input-wrap > .inkra-pencil-line[data-orientation="horizontal"] { width: calc(100% - 24px); }
9706
+ .inkra-command__input-wrap:focus-within .inkra-command__input-focus-line { opacity: 1; }
9707
+ .inkra-command__list { box-sizing: border-box; max-block-size: min(360px, 50dvh); overflow: auto; overscroll-behavior: contain; padding: var(--inkra-space-2); scroll-padding-block: var(--inkra-space-2); }
8092
9708
  .inkra-command__group[hidden] { display: none; }
8093
9709
  .inkra-command__group [cmdk-group-heading] { padding: var(--inkra-space-2) var(--inkra-space-3); color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); overflow-wrap: anywhere; }
8094
- .inkra-command__item { position: relative; isolation: isolate; box-sizing: border-box; display: flex; align-items: center; gap: var(--inkra-space-2); min-block-size: var(--inkra-touch-target); padding: var(--inkra-space-2) var(--inkra-space-3); cursor: pointer; border-radius: var(--inkra-radius-md); overflow-wrap: anywhere; }
9710
+ .inkra-command__item { position: relative; isolation: isolate; box-sizing: border-box; display: flex; align-items: center; gap: var(--inkra-space-2); min-block-size: var(--inkra-touch-target); min-inline-size: 0; padding: var(--inkra-space-2) var(--inkra-space-3); cursor: pointer; border-radius: var(--inkra-radius-md); overflow-wrap: anywhere; }
8095
9711
  .inkra-command__highlight { position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; }
9712
+ .inkra-command__item-focus { --inkra-accent-strong: var(--inkra-focus); inset: var(--inkra-focus-width); opacity: 0; pointer-events: none; position: absolute !important; z-index: 2; }
8096
9713
  .inkra-command__item[data-selected="true"] { color: var(--inkra-selection-foreground); }
8097
9714
  .inkra-command__item[data-selected="true"] > .inkra-command__highlight { opacity: 1; }
8098
9715
  .inkra-command__item[data-disabled="true"] { color: var(--inkra-ink-subtle); cursor: not-allowed; }
8099
- .inkra-command__item:focus-visible { outline: var(--inkra-focus-width) solid var(--inkra-focus); outline-offset: -2px; }
9716
+ .inkra-command__item:focus-visible { outline: 0; }
9717
+ .inkra-command__item:focus-visible > .inkra-command__item-focus { opacity: 1; }
8100
9718
  .inkra-command__icon { flex: 0 0 24px; inline-size: 24px; display: inline-flex; align-items: center; justify-content: center; }
8101
- .inkra-command__label { min-inline-size: 0; flex: 1; }
8102
- .inkra-command__shortcut { flex: 0 1 auto; margin-inline-start: auto; font: inherit; font-size: var(--inkra-text-sm); color: inherit; text-align: end; overflow-wrap: anywhere; }
9719
+ .inkra-command__label { flex: 1 1 auto; min-inline-size: 0; overflow-wrap: anywhere; }
9720
+ .inkra-command__shortcut { flex: 0 1 12rem; min-inline-size: 0; max-inline-size: 45%; margin-inline-start: auto; font: inherit; font-size: var(--inkra-text-sm); color: inherit; text-align: end; overflow-wrap: anywhere; }
8103
9721
  .inkra-command__empty { padding: var(--inkra-space-6) var(--inkra-space-3); text-align: center; color: var(--inkra-ink-muted); overflow-wrap: anywhere; }
8104
9722
  .inkra-command__separator { padding-block: var(--inkra-space-1); }
8105
9723
  @media (forced-colors: active) {
8106
9724
  .inkra-command__paper { border: 1px solid CanvasText; }
8107
- .inkra-command__input { border-block-end: 1px solid CanvasText; }
8108
- .inkra-command__item[data-selected="true"] { background: Highlight; color: HighlightText; outline: 1px solid Highlight; }
9725
+ .inkra-command__input-focus-line, .inkra-command__item-focus { display: none !important; }
9726
+ .inkra-command__input-frame > .inkra-editable-text { display: none !important; }
9727
+ .inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input { color: FieldText !important; caret-color: FieldText; }
9728
+ .inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input::placeholder { color: GrayText !important; opacity: 1; }
9729
+ .inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input::selection { background: Highlight; color: HighlightText; }
9730
+ .inkra-command__input:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
9731
+ .inkra-command__item[data-selected="true"] { background: Highlight; color: HighlightText; outline: 1px solid Highlight; forced-color-adjust: none; }
9732
+ .inkra-command__item:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
8109
9733
  .inkra-command__item[data-disabled="true"] { color: GrayText; }
8110
9734
  .inkra-command__highlight { display: none; }
8111
9735
  .inkra-command__separator { border-block-end: 1px solid CanvasText; }
8112
9736
  }
8113
9737
  @media (prefers-reduced-motion: reduce) { .inkra-command * { animation: none !important; transition: none !important; } }
9738
+ @media print {
9739
+ .inkra-command__input-frame > .inkra-editable-text { display: none !important; }
9740
+ .inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input { color: var(--inkra-ink) !important; }
9741
+ .inkra-command__input-wrap[data-pencil-editable-ready="true"] .inkra-command__input::placeholder { color: var(--inkra-ink-subtle) !important; opacity: 1; }
9742
+ }
8114
9743
 
8115
- .inkra-data-table { display: grid; gap: var(--inkra-space-3); min-width: 0; width: 100%; color: var(--inkra-ink); }
9744
+ .inkra-data-table { container-type: inline-size; display: grid; gap: var(--inkra-space-3); min-width: 0; width: 100%; color: var(--inkra-ink); }
8116
9745
  .inkra-data-table__toolbar { display: flex; flex-wrap: wrap; align-items: end; gap: var(--inkra-space-3); }
8117
9746
  .inkra-data-table__filter { display: grid; gap: var(--inkra-space-1); width: min(100%, 320px); font-size: var(--inkra-text-sm); color: var(--inkra-ink-muted); }
8118
9747
  .inkra-data-table__container { width: 100%; }
8119
- .inkra-data-table__sort { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; display: inline-flex; align-items: center; gap: var(--inkra-space-2); min-height: var(--inkra-touch-target); max-width: 100%; padding: 0; text-align: start; cursor: pointer; }
8120
- .inkra-data-table__sort > span:first-child { min-width: 0; overflow-wrap: anywhere; }
8121
- .inkra-data-table__sort canvas { flex: none; opacity: .55; }
8122
- .inkra-data-table__sort[data-sorted] canvas { opacity: 1; color: var(--inkra-accent-strong); }
8123
- .inkra-data-table__sort:focus-visible { outline: 2px solid var(--inkra-focus); outline-offset: 2px; }
9748
+ .inkra-data-table__sort { appearance: none; border: 0; background: transparent; color: inherit; font: inherit; display: inline-flex; align-items: center; gap: var(--inkra-space-2); min-height: var(--inkra-touch-target); min-width: 0; max-width: 100%; padding: 0 var(--inkra-space-1); position: relative; text-align: start; cursor: pointer; }
9749
+ .inkra-data-table__sort-label { min-width: 0; overflow-wrap: anywhere; position: relative; z-index: 1; }
9750
+ .inkra-data-table__sort-icon { flex: none; opacity: .55; position: relative; z-index: 1; }
9751
+ .inkra-data-table__sort[data-sorted] .inkra-data-table__sort-icon { opacity: 1; color: var(--inkra-accent-strong); }
9752
+ .inkra-data-table__sort:focus-visible { outline: 0; }
9753
+ .inkra-data-table__sort-focus { --inkra-accent-strong: var(--inkra-focus); display: block !important; inset: 1px; opacity: 0; pointer-events: none; position: absolute !important; z-index: 2; }
9754
+ .inkra-data-table__sort:focus-visible > .inkra-data-table__sort-focus { opacity: 1; }
8124
9755
  .inkra-data-table__select-cell { width: 52px; padding-inline: var(--inkra-space-2) !important; text-align: center !important; }
8125
9756
  .inkra-data-table__selection.inkra-selection-control { display: inline-grid; grid-template-columns: var(--inkra-touch-target); gap: 0; width: var(--inkra-touch-target); min-height: var(--inkra-touch-target); vertical-align: middle; }
8126
9757
  .inkra-data-table__selection .inkra-selection-control__copy { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0, 0, 0, 0); }
8127
9758
  .inkra-data-table__state { min-height: 72px; display: grid; place-items: center; color: var(--inkra-ink-muted); text-align: center; }
8128
- .inkra-data-table__pagination { display: flex; align-items: center; justify-content: flex-end; gap: var(--inkra-space-2); min-width: 0; }
8129
- .inkra-data-table__pagination > span { min-width: 8rem; text-align: center; color: var(--inkra-ink-muted); }
9759
+ .inkra-data-table__pagination { display: flex; align-items: center; justify-content: flex-end; gap: var(--inkra-space-2); min-width: 0; width: 100%; }
9760
+ .inkra-data-table__pagination > .inkra-button { flex: none; }
9761
+ .inkra-data-table__pagination > span { min-width: 8rem; max-width: 100%; text-align: center; color: var(--inkra-ink-muted); overflow-wrap: anywhere; }
9762
+ .inkra-data-table__page-arrow:dir(rtl) { transform: scaleX(-1); }
8130
9763
  .inkra-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; }
8131
- @media (max-width: 30rem) {
8132
- .inkra-data-table__pagination { justify-content: space-between; }
9764
+ @container (max-width: 30rem) {
9765
+ .inkra-data-table__pagination { display: grid; grid-template-columns: var(--inkra-touch-target) minmax(0, 1fr) var(--inkra-touch-target); justify-content: stretch; }
8133
9766
  .inkra-data-table__pagination > span { min-width: 0; }
8134
9767
  }
8135
9768
  @media (forced-colors: active) {
8136
- .inkra-data-table__sort:focus-visible { outline: 2px solid Highlight; }
9769
+ .inkra-data-table__sort-focus { display: none !important; }
9770
+ .inkra-data-table__sort:focus-visible { outline: var(--inkra-focus-width) solid Highlight; outline-offset: calc(-1 * var(--inkra-focus-width)); }
9771
+ .inkra-data-table__sort[data-sorted] .inkra-data-table__sort-icon { color: Highlight; }
8137
9772
  }
9773
+ @media (prefers-reduced-motion: reduce) { .inkra-data-table * { animation: none !important; transition: none !important; } }
9774
+ @media print { .inkra-data-table__sort-focus { display: none !important; } }
8138
9775
 
8139
9776
  .inkra-tree { display: grid; gap: 2px; min-width: 0; color: var(--inkra-ink); outline: none; }
8140
9777
  .inkra-tree__item { position: relative; min-width: 0; outline: none; }
8141
- .inkra-tree__item-content { position: relative; isolation: isolate; display: grid; grid-template-columns: var(--inkra-touch-target) minmax(0, auto) minmax(0, 1fr); align-items: center; min-height: var(--inkra-touch-target); padding-inline-start: calc((var(--inkra-tree-level, 1) - 1) * 24px); padding-inline-end: var(--inkra-space-2); border-radius: var(--inkra-radius-md); overflow: visible; }
9778
+ .inkra-tree__item-content { --inkra-tree-reserved-inline: calc(var(--inkra-touch-target) + var(--inkra-space-2) + 5rem); position: relative; isolation: isolate; display: grid; grid-template-columns: var(--inkra-touch-target) minmax(0, auto) minmax(0, 1fr); align-items: start; box-sizing: border-box; inline-size: 100%; min-height: var(--inkra-touch-target); padding-inline-start: min(calc((var(--inkra-tree-level, 1) - 1) * var(--inkra-tree-indent, 24px)), max(0px, calc(100% - var(--inkra-tree-reserved-inline)))); padding-inline-end: var(--inkra-space-2); border-radius: var(--inkra-radius-md); overflow: visible; }
9779
+ .inkra-tree__item-content[data-has-icon] { --inkra-tree-reserved-inline: calc(var(--inkra-touch-target) + 28px + var(--inkra-space-2) + 5rem); }
8142
9780
  .inkra-tree__item-content:not([data-has-icon]) { grid-template-columns: var(--inkra-touch-target) minmax(0, 1fr); }
8143
9781
  .inkra-tree__selection, .inkra-tree__focus { position: absolute; inset: 2px; z-index: -1; pointer-events: none; }
8144
- .inkra-tree__focus { inset: -1px; z-index: 2; }
9782
+ .inkra-tree__focus { inset: 1px; z-index: 2; }
8145
9783
  .inkra-tree__disclosure, .inkra-tree__disclosure-spacer { width: var(--inkra-touch-target); height: var(--inkra-touch-target); }
8146
9784
  .inkra-tree__disclosure { position: relative; appearance: none; display: inline-grid; place-items: center; border: 0; padding: 0; background: transparent; color: var(--inkra-ink); cursor: pointer; }
8147
9785
  .inkra-tree__disclosure:focus { outline: none; }
@@ -8152,9 +9790,12 @@ svg.leaflet-image-layer.leaflet-interactive path {
8152
9790
  .inkra-tree__item-content[data-expanded] .inkra-tree__chevron { transform: rotate(0deg); }
8153
9791
  .inkra-tree:dir(rtl) .inkra-tree__chevron { transform: rotate(90deg); }
8154
9792
  .inkra-tree:dir(rtl) .inkra-tree__item-content[data-expanded] .inkra-tree__chevron { transform: rotate(0deg); }
8155
- .inkra-tree__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; color: var(--inkra-accent-strong); }
9793
+ .inkra-tree__icon { display: inline-grid; place-items: center; width: 28px; height: 28px; margin-block-start: var(--inkra-space-1); color: var(--inkra-accent-strong); }
8156
9794
  .inkra-tree__icon > * { max-width: 100%; max-height: 100%; }
8157
9795
  .inkra-tree__copy { display: grid; gap: 2px; min-width: 0; padding-block: var(--inkra-space-2); overflow-wrap: anywhere; }
9796
+ .inkra-tree[data-size="sm"] .inkra-tree__copy { padding-block: var(--inkra-space-1); }
9797
+ .inkra-tree[data-size="lg"] .inkra-tree__copy { padding-block: var(--inkra-space-3); }
9798
+ .inkra-tree[data-size="lg"] .inkra-tree__item-content { min-height: 52px; }
8158
9799
  .inkra-tree__title { min-width: 0; font-size: var(--inkra-text-md); line-height: var(--inkra-line-ui); }
8159
9800
  .inkra-tree__description { min-width: 0; color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); line-height: var(--inkra-line-body); }
8160
9801
  .inkra-tree__item[data-disabled] .inkra-tree__item-content { opacity: .55; }
@@ -8184,31 +9825,48 @@ svg.leaflet-image-layer.leaflet-interactive path {
8184
9825
  .inkra-tree__selection { animation: none !important; }
8185
9826
  }
8186
9827
  @media (forced-colors: active) {
9828
+ .inkra-pencil-surface.inkra-tree__selection,
9829
+ .inkra-pencil-surface.inkra-tree__focus,
9830
+ .inkra-pencil-surface.inkra-tree__disclosure-focus { display: none !important; }
8187
9831
  .inkra-tree__item[data-selected] .inkra-tree__item-content { outline: 1px solid Highlight; color: HighlightText; background: Highlight; forced-color-adjust: none; }
8188
9832
  .inkra-tree__item[data-focus-visible] .inkra-tree__item-content { outline: 2px solid Highlight; outline-offset: -2px; }
8189
9833
  .inkra-tree__disclosure[data-focus-visible] { outline: 2px solid Highlight; outline-offset: -2px; }
8190
9834
  }
8191
9835
 
8192
- .inkra-upload { display: grid; gap: var(--inkra-space-4); min-width: 0; color: var(--inkra-ink); }
9836
+ .inkra-upload { container-type: inline-size; display: grid; gap: var(--inkra-space-4); min-width: 0; color: var(--inkra-ink); }
8193
9837
  .inkra-upload__dropzone {
8194
- min-height: 148px; padding: var(--inkra-space-6); display: grid; place-items: center; align-content: center;
9838
+ position: relative; min-height: 148px; padding: var(--inkra-space-6); display: grid; place-items: center; align-content: center;
8195
9839
  gap: var(--inkra-space-2); text-align: center; cursor: pointer; border-radius: var(--inkra-radius-lg);
8196
9840
  }
8197
- .inkra-upload__dropzone:focus-visible { outline: var(--inkra-focus-width) solid var(--inkra-focus); outline-offset: var(--inkra-focus-offset); }
9841
+ .inkra-upload__focus-ring {
9842
+ --inkra-accent-strong: var(--inkra-focus);
9843
+ position: absolute !important; inset: var(--inkra-focus-width); display: block !important;
9844
+ opacity: 0; pointer-events: none; z-index: 3;
9845
+ }
9846
+ .inkra-upload__dropzone:focus-visible { outline: 0; }
9847
+ .inkra-upload__dropzone:focus-visible .inkra-upload__focus-ring { opacity: 1; }
8198
9848
  .inkra-upload__dropzone[data-drag-active] { color: var(--inkra-selection-foreground); }
8199
9849
  .inkra-upload[data-disabled] .inkra-upload__dropzone { cursor: not-allowed; opacity: 0.55; }
8200
- .inkra-upload__input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
9850
+ .inkra-upload__input { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; pointer-events: none; }
8201
9851
  .inkra-upload__icon { color: currentColor; }
8202
9852
  .inkra-upload__prompt { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--inkra-space-2); font-size: var(--inkra-text-md); }
8203
9853
  .inkra-upload__hint, .inkra-upload__meta { color: var(--inkra-ink-muted); font-size: var(--inkra-text-sm); }
8204
9854
  .inkra-upload__rejections { color: var(--inkra-danger-foreground); }
8205
9855
  .inkra-upload__rejections ul { margin: var(--inkra-space-2) 0 0; padding-inline-start: var(--inkra-space-6); }
8206
9856
  .inkra-upload__list { display: grid; gap: var(--inkra-space-3); margin: 0; padding: 0; list-style: none; }
8207
- .inkra-upload__item-surface { display: flex; align-items: center; justify-content: space-between; gap: var(--inkra-space-4); padding: var(--inkra-space-4); }
9857
+ .inkra-upload__item-surface { display: flex; align-items: center; justify-content: space-between; gap: var(--inkra-space-4); min-width: 0; padding: var(--inkra-space-4); }
8208
9858
  .inkra-upload__file { display: grid; min-width: 0; flex: 1; gap: var(--inkra-space-1); }
8209
- .inkra-upload__name { overflow-wrap: anywhere; }
9859
+ .inkra-upload__name { max-width: 100%; }
8210
9860
  .inkra-upload__error { color: var(--inkra-danger-foreground); font-size: var(--inkra-text-sm); }
8211
- .inkra-upload__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--inkra-space-1); }
9861
+ .inkra-upload__actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: var(--inkra-space-1); max-width: 100%; min-width: 0; }
9862
+ .inkra-upload__actions > .inkra-button { max-width: 100%; }
9863
+ .inkra-upload__actions .inkra-button__surface,
9864
+ .inkra-upload__actions .inkra-button__content { max-width: 100%; min-width: 0; }
9865
+ .inkra-upload__actions .inkra-button__label { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
9866
+ .inkra-upload__actions .inkra-button__label > .inkra-pencil-text,
9867
+ .inkra-upload__actions .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source {
9868
+ display: block; max-width: 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
9869
+ }
8212
9870
  .inkra-upload .inkra-progress { inline-size: min(280px, 100%); }
8213
9871
  .inkra-upload__item[data-status="success"] .inkra-upload__meta { color: var(--inkra-success-foreground); }
8214
9872
  .inkra-upload__item[data-status="error"] .inkra-upload__meta,
@@ -8216,10 +9874,22 @@ svg.leaflet-image-layer.leaflet-interactive path {
8216
9874
  @media (max-width: 36rem) {
8217
9875
  .inkra-upload__dropzone { padding: var(--inkra-space-4); }
8218
9876
  .inkra-upload__item-surface { align-items: stretch; flex-direction: column; }
8219
- .inkra-upload__actions { justify-content: flex-start; }
9877
+ .inkra-upload__actions { inline-size: 100%; justify-content: flex-start; }
9878
+ }
9879
+ @container (max-width: 36rem) {
9880
+ .inkra-upload__dropzone { padding: var(--inkra-space-4); }
9881
+ .inkra-upload__item-surface { align-items: stretch; flex-direction: column; }
9882
+ .inkra-upload__actions { inline-size: 100%; justify-content: flex-start; }
9883
+ }
9884
+ @container (max-width: 24rem) {
9885
+ .inkra-upload__actions { display: grid; grid-template-columns: minmax(0, 1fr); }
9886
+ .inkra-upload__actions > .inkra-button { inline-size: 100%; }
9887
+ .inkra-upload__actions .inkra-button__surface { inline-size: 100%; }
8220
9888
  }
8221
9889
  @media (forced-colors: active) {
8222
9890
  .inkra-upload__dropzone { border: 1px solid CanvasText; }
9891
+ .inkra-upload__dropzone:focus-visible { outline: 2px solid Highlight; outline-offset: var(--inkra-focus-offset); }
9892
+ .inkra-upload__focus-ring { display: none !important; }
8223
9893
  .inkra-upload__dropzone[data-drag-active] { outline: 2px solid Highlight; }
8224
9894
  .inkra-upload__error, .inkra-upload__rejections { color: CanvasText; }
8225
9895
  }