@inkra/react 0.3.0 → 0.4.3

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