@rokkit/themes 1.0.0-next.142 → 1.0.0-next.143

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 (19) hide show
  1. package/dist/base.css +58 -5
  2. package/dist/glass.css +19 -0
  3. package/dist/index.css +171 -15
  4. package/dist/material.css +19 -0
  5. package/dist/minimal.css +19 -0
  6. package/dist/rokkit.css +56 -10
  7. package/package.json +1 -1
  8. package/src/base/index.css +1 -0
  9. package/src/base/list.css +9 -5
  10. package/src/base/toc.css +48 -0
  11. package/src/glass/index.css +1 -0
  12. package/src/glass/toc.css +18 -0
  13. package/src/material/index.css +1 -0
  14. package/src/material/toc.css +18 -0
  15. package/src/minimal/index.css +1 -0
  16. package/src/minimal/toc.css +18 -0
  17. package/src/rokkit/index.css +1 -0
  18. package/src/rokkit/list.css +33 -6
  19. package/src/rokkit/toc.css +18 -0
package/dist/base.css CHANGED
@@ -1794,6 +1794,7 @@ button[data-list-item] {
1794
1794
  padding-block: 0.25rem;
1795
1795
  font-size: 0.75rem;
1796
1796
  font-weight: 600;
1797
+ text-align: left;
1797
1798
  text-transform: uppercase;
1798
1799
  letter-spacing: 0.05em;
1799
1800
  cursor: pointer;
@@ -1821,19 +1822,22 @@ button[data-list-item] {
1821
1822
  padding: 0.5rem 1rem;
1822
1823
  }
1823
1824
 
1824
- /* Group item content — inherits font from [data-list-group], label stays inline */
1825
+ /* Group item content — icon slightly muted, text stacks label + description */
1825
1826
  [data-list-group] > [data-item-icon] {
1826
1827
  opacity: 0.7;
1827
1828
  }
1828
1829
 
1829
- [data-list-group] > [data-item-text] {
1830
- display: contents;
1831
- }
1832
-
1833
1830
  [data-list-group] [data-item-label] {
1834
1831
  font-weight: inherit;
1835
1832
  }
1836
1833
 
1834
+ [data-list-group] [data-item-description] {
1835
+ text-transform: none;
1836
+ letter-spacing: normal;
1837
+ font-weight: 400;
1838
+ opacity: 0.8;
1839
+ }
1840
+
1837
1841
  /* Expand/collapse chevron — pushed to the right edge */
1838
1842
  [data-list-expand-icon] {
1839
1843
  flex-shrink: 0;
@@ -4932,3 +4936,52 @@ a[data-card] {
4932
4936
  width: 100%;
4933
4937
  }
4934
4938
 
4939
+ /* TableOfContents — base structural styles */
4940
+
4941
+ [data-toc] {
4942
+ display: flex;
4943
+ flex-direction: column;
4944
+ gap: 0.25rem;
4945
+ }
4946
+
4947
+ [data-toc-label] {
4948
+ margin: 0 0 0.5rem;
4949
+ padding: 0;
4950
+ font-size: 0.75rem;
4951
+ font-weight: 600;
4952
+ text-transform: uppercase;
4953
+ letter-spacing: 0.05em;
4954
+ }
4955
+
4956
+ [data-toc-list] {
4957
+ display: flex;
4958
+ flex-direction: column;
4959
+ list-style: none;
4960
+ padding: 0;
4961
+ margin: 0;
4962
+ gap: 0.125rem;
4963
+ }
4964
+
4965
+ [data-toc-item] {
4966
+ display: block;
4967
+ width: 100%;
4968
+ padding: 0.25rem 0.5rem;
4969
+ background: none;
4970
+ border: none;
4971
+ border-left: 2px solid transparent;
4972
+ font: inherit;
4973
+ font-size: 0.8125rem;
4974
+ text-align: left;
4975
+ cursor: pointer;
4976
+ white-space: nowrap;
4977
+ overflow: hidden;
4978
+ text-overflow: ellipsis;
4979
+ transition: color 150ms ease, border-color 150ms ease;
4980
+ }
4981
+
4982
+ /* h3 items indented */
4983
+ [data-toc-item][data-toc-level='h3'] {
4984
+ padding-left: 1rem;
4985
+ font-size: 0.75rem;
4986
+ }
4987
+
package/dist/glass.css CHANGED
@@ -1398,3 +1398,22 @@
1398
1398
  background-color:rgba(var(--color-primary-500),0.8);
1399
1399
  }[data-mode="dark"][data-style="glass"] [data-floating-nav-indicator],[data-mode="dark"] [data-style="glass"] [data-floating-nav-indicator]{background-color:rgba(var(--color-primary-500),0.8);}
1400
1400
 
1401
+ /* TableOfContents — Glass theme */
1402
+
1403
+ [data-style='glass'] [data-toc] [data-toc-label] {
1404
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1405
+ }[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-label],[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-label]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1406
+
1407
+ [data-style='glass'] [data-toc] [data-toc-item] {
1408
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1409
+ }[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-item],[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-item]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1410
+
1411
+ [data-style='glass'] [data-toc] [data-toc-item]:hover,
1412
+ [data-style='glass'] [data-toc] [data-toc-item][data-toc-focused] {
1413
+ background-color:rgba(var(--color-surface-200),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1414
+ }[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-item]:hover,[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-item]:hover,[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-item][data-toc-focused],[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-item][data-toc-focused]{background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1415
+
1416
+ [data-style='glass'] [data-toc] [data-toc-item][data-toc-active] {
1417
+ --un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
1418
+ }[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-item][data-toc-active],[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-item][data-toc-active]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
1419
+
package/dist/index.css CHANGED
@@ -1794,6 +1794,7 @@ button[data-list-item] {
1794
1794
  padding-block: 0.25rem;
1795
1795
  font-size: 0.75rem;
1796
1796
  font-weight: 600;
1797
+ text-align: left;
1797
1798
  text-transform: uppercase;
1798
1799
  letter-spacing: 0.05em;
1799
1800
  cursor: pointer;
@@ -1821,19 +1822,22 @@ button[data-list-item] {
1821
1822
  padding: 0.5rem 1rem;
1822
1823
  }
1823
1824
 
1824
- /* Group item content — inherits font from [data-list-group], label stays inline */
1825
+ /* Group item content — icon slightly muted, text stacks label + description */
1825
1826
  [data-list-group] > [data-item-icon] {
1826
1827
  opacity: 0.7;
1827
1828
  }
1828
1829
 
1829
- [data-list-group] > [data-item-text] {
1830
- display: contents;
1831
- }
1832
-
1833
1830
  [data-list-group] [data-item-label] {
1834
1831
  font-weight: inherit;
1835
1832
  }
1836
1833
 
1834
+ [data-list-group] [data-item-description] {
1835
+ text-transform: none;
1836
+ letter-spacing: normal;
1837
+ font-weight: 400;
1838
+ opacity: 0.8;
1839
+ }
1840
+
1837
1841
  /* Expand/collapse chevron — pushed to the right edge */
1838
1842
  [data-list-expand-icon] {
1839
1843
  flex-shrink: 0;
@@ -4932,6 +4936,55 @@ a[data-card] {
4932
4936
  width: 100%;
4933
4937
  }
4934
4938
 
4939
+ /* TableOfContents — base structural styles */
4940
+
4941
+ [data-toc] {
4942
+ display: flex;
4943
+ flex-direction: column;
4944
+ gap: 0.25rem;
4945
+ }
4946
+
4947
+ [data-toc-label] {
4948
+ margin: 0 0 0.5rem;
4949
+ padding: 0;
4950
+ font-size: 0.75rem;
4951
+ font-weight: 600;
4952
+ text-transform: uppercase;
4953
+ letter-spacing: 0.05em;
4954
+ }
4955
+
4956
+ [data-toc-list] {
4957
+ display: flex;
4958
+ flex-direction: column;
4959
+ list-style: none;
4960
+ padding: 0;
4961
+ margin: 0;
4962
+ gap: 0.125rem;
4963
+ }
4964
+
4965
+ [data-toc-item] {
4966
+ display: block;
4967
+ width: 100%;
4968
+ padding: 0.25rem 0.5rem;
4969
+ background: none;
4970
+ border: none;
4971
+ border-left: 2px solid transparent;
4972
+ font: inherit;
4973
+ font-size: 0.8125rem;
4974
+ text-align: left;
4975
+ cursor: pointer;
4976
+ white-space: nowrap;
4977
+ overflow: hidden;
4978
+ text-overflow: ellipsis;
4979
+ transition: color 150ms ease, border-color 150ms ease;
4980
+ }
4981
+
4982
+ /* h3 items indented */
4983
+ [data-toc-item][data-toc-level='h3'] {
4984
+ padding-left: 1rem;
4985
+ font-size: 0.75rem;
4986
+ }
4987
+
4935
4988
 
4936
4989
  /**
4937
4990
  * @rokkit/themes - Rokkit Theme
@@ -5481,26 +5534,27 @@ a[data-card] {
5481
5534
  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
5482
5535
  }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled="true"]){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
5483
5536
 
5484
- /* Active state — muted when list not focused */
5537
+ /* Active state — muted gradient when list not focused */
5485
5538
  [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] {
5486
- border-left-width:2px;--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
5487
- }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
5539
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
5540
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
5488
5541
 
5489
5542
  /* Active state — full gradient when list has focus */
5490
5543
  [data-style='rokkit'] [data-list]:focus-within [data-list-item][data-active='true'] {
5491
- border-left-width:2px;--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
5492
- }[data-mode="dark"][data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
5544
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
5545
+ }[data-mode="dark"][data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
5493
5546
 
5494
- /* Active + hover — intensified gradient on hover */
5547
+ /* Active + hover — same as focus-within gradient */
5495
5548
  [data-style='rokkit'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled) {
5496
- --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-300),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
5497
- }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-700),1) var(--un-gradient-to-position);}
5549
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
5550
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
5498
5551
 
5499
5552
  /* =============================================================================
5500
5553
  Item Elements
5501
5554
  ============================================================================= */
5502
5555
 
5503
5556
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon] {
5557
+ font-size: 1rem;
5504
5558
  --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
5505
5559
  }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
5506
5560
 
@@ -5516,9 +5570,13 @@ a[data-card] {
5516
5570
  [data-style='rokkit']
5517
5571
  [data-list]:focus-within
5518
5572
  [data-list-item][data-active='true']
5573
+ [data-item-icon],
5574
+ [data-style='rokkit']
5575
+ [data-list]
5576
+ [data-list-item][data-active='true']:hover:not(:disabled)
5519
5577
  [data-item-icon] {
5520
- --un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
5521
- }[data-mode="dark"][data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
5578
+ --un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
5579
+ }
5522
5580
 
5523
5581
  /* Item description */
5524
5582
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-description] {
@@ -5529,6 +5587,17 @@ a[data-card] {
5529
5587
  --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
5530
5588
  }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-description],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
5531
5589
 
5590
+ [data-style='rokkit']
5591
+ [data-list]:focus-within
5592
+ [data-list-item][data-active='true']
5593
+ [data-item-description],
5594
+ [data-style='rokkit']
5595
+ [data-list]
5596
+ [data-list-item][data-active='true']:hover:not(:disabled)
5597
+ [data-item-description] {
5598
+ --un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
5599
+ }
5600
+
5532
5601
  /* Item badge */
5533
5602
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-badge] {
5534
5603
  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
@@ -5538,6 +5607,13 @@ a[data-card] {
5538
5607
  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-primary-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-800),var(--un-text-opacity));
5539
5608
  }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-badge]{--un-border-opacity:1;border-color:rgba(var(--color-primary-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-200),var(--un-text-opacity));}
5540
5609
 
5610
+ [data-style='rokkit']
5611
+ [data-list]:focus-within
5612
+ [data-list-item][data-active='true']
5613
+ [data-item-badge] {
5614
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
5615
+ }[data-mode="dark"][data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"] [data-item-badge]{--un-border-opacity:1;border-color:rgba(var(--color-primary-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-500),1) var(--un-gradient-to-position);}
5616
+
5541
5617
  /* =============================================================================
5542
5618
  Groups
5543
5619
  ============================================================================= */
@@ -5546,6 +5622,10 @@ a[data-card] {
5546
5622
  --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
5547
5623
  }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-group],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-group]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
5548
5624
 
5625
+ [data-style='rokkit'] [data-list] [data-list-group] [data-item-icon] {
5626
+ font-size: 1rem;
5627
+ }
5628
+
5549
5629
  [data-style='rokkit'] [data-list] [data-list-group]:hover:not(:disabled),
5550
5630
  [data-style='rokkit'] [data-list] [data-list-group]:focus:not(:disabled) {
5551
5631
  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-300),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
@@ -6762,6 +6842,25 @@ a[data-card] {
6762
6842
  --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
6763
6843
  }[data-mode="dark"][data-style="rokkit"] [data-upload-file-status][data-status="error"] [data-upload-retry]:hover,[data-mode="dark"] [data-style="rokkit"] [data-upload-file-status][data-status="error"] [data-upload-retry]:hover{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
6764
6844
 
6845
+ /* TableOfContents — Rokkit theme */
6846
+
6847
+ [data-style='rokkit'] [data-toc] [data-toc-label] {
6848
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
6849
+ }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-label],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-label]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
6850
+
6851
+ [data-style='rokkit'] [data-toc] [data-toc-item] {
6852
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
6853
+ }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
6854
+
6855
+ [data-style='rokkit'] [data-toc] [data-toc-item]:hover,
6856
+ [data-style='rokkit'] [data-toc] [data-toc-item][data-toc-focused] {
6857
+ --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
6858
+ }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item]:hover,[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item]:hover,[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item][data-toc-focused],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item][data-toc-focused]{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
6859
+
6860
+ [data-style='rokkit'] [data-toc] [data-toc-item][data-toc-active] {
6861
+ --un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
6862
+ }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item][data-toc-active],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item][data-toc-active]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
6863
+
6765
6864
 
6766
6865
  /**
6767
6866
  * @rokkit/themes - Minimal Theme
@@ -8152,6 +8251,25 @@ a[data-card] {
8152
8251
  --un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));
8153
8252
  }[data-mode="dark"][data-style="minimal"] [data-floating-nav-indicator],[data-mode="dark"] [data-style="minimal"] [data-floating-nav-indicator]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));}
8154
8253
 
8254
+ /* TableOfContents — Minimal theme */
8255
+
8256
+ [data-style='minimal'] [data-toc] [data-toc-label] {
8257
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
8258
+ }[data-mode="dark"][data-style="minimal"] [data-toc] [data-toc-label],[data-mode="dark"] [data-style="minimal"] [data-toc] [data-toc-label]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
8259
+
8260
+ [data-style='minimal'] [data-toc] [data-toc-item] {
8261
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
8262
+ }[data-mode="dark"][data-style="minimal"] [data-toc] [data-toc-item],[data-mode="dark"] [data-style="minimal"] [data-toc] [data-toc-item]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
8263
+
8264
+ [data-style='minimal'] [data-toc] [data-toc-item]:hover,
8265
+ [data-style='minimal'] [data-toc] [data-toc-item][data-toc-focused] {
8266
+ --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
8267
+ }[data-mode="dark"][data-style="minimal"] [data-toc] [data-toc-item]:hover,[data-mode="dark"] [data-style="minimal"] [data-toc] [data-toc-item]:hover,[data-mode="dark"][data-style="minimal"] [data-toc] [data-toc-item][data-toc-focused],[data-mode="dark"] [data-style="minimal"] [data-toc] [data-toc-item][data-toc-focused]{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
8268
+
8269
+ [data-style='minimal'] [data-toc] [data-toc-item][data-toc-active] {
8270
+ --un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-400),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
8271
+ }[data-mode="dark"][data-style="minimal"] [data-toc] [data-toc-item][data-toc-active],[data-mode="dark"] [data-style="minimal"] [data-toc] [data-toc-item][data-toc-active]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-600),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
8272
+
8155
8273
 
8156
8274
  /**
8157
8275
  * @rokkit/themes - Material Theme
@@ -9588,6 +9706,25 @@ a[data-card] {
9588
9706
  --un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
9589
9707
  }[data-mode="dark"][data-style="material"] [data-floating-nav-indicator],[data-mode="dark"] [data-style="material"] [data-floating-nav-indicator]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
9590
9708
 
9709
+ /* TableOfContents — Material theme */
9710
+
9711
+ [data-style='material'] [data-toc] [data-toc-label] {
9712
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
9713
+ }[data-mode="dark"][data-style="material"] [data-toc] [data-toc-label],[data-mode="dark"] [data-style="material"] [data-toc] [data-toc-label]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
9714
+
9715
+ [data-style='material'] [data-toc] [data-toc-item] {
9716
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
9717
+ }[data-mode="dark"][data-style="material"] [data-toc] [data-toc-item],[data-mode="dark"] [data-style="material"] [data-toc] [data-toc-item]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
9718
+
9719
+ [data-style='material'] [data-toc] [data-toc-item]:hover,
9720
+ [data-style='material'] [data-toc] [data-toc-item][data-toc-focused] {
9721
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
9722
+ }[data-mode="dark"][data-style="material"] [data-toc] [data-toc-item]:hover,[data-mode="dark"] [data-style="material"] [data-toc] [data-toc-item]:hover,[data-mode="dark"][data-style="material"] [data-toc] [data-toc-item][data-toc-focused],[data-mode="dark"] [data-style="material"] [data-toc] [data-toc-item][data-toc-focused]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
9723
+
9724
+ [data-style='material'] [data-toc] [data-toc-item][data-toc-active] {
9725
+ --un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-600),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
9726
+ }[data-mode="dark"][data-style="material"] [data-toc] [data-toc-item][data-toc-active],[data-mode="dark"] [data-style="material"] [data-toc] [data-toc-item][data-toc-active]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-400),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
9727
+
9591
9728
 
9592
9729
  /**
9593
9730
  * @rokkit/themes - Glass Theme
@@ -10989,3 +11126,22 @@ a[data-card] {
10989
11126
  background-color:rgba(var(--color-primary-500),0.8);
10990
11127
  }[data-mode="dark"][data-style="glass"] [data-floating-nav-indicator],[data-mode="dark"] [data-style="glass"] [data-floating-nav-indicator]{background-color:rgba(var(--color-primary-500),0.8);}
10991
11128
 
11129
+ /* TableOfContents — Glass theme */
11130
+
11131
+ [data-style='glass'] [data-toc] [data-toc-label] {
11132
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
11133
+ }[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-label],[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-label]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
11134
+
11135
+ [data-style='glass'] [data-toc] [data-toc-item] {
11136
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
11137
+ }[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-item],[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-item]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
11138
+
11139
+ [data-style='glass'] [data-toc] [data-toc-item]:hover,
11140
+ [data-style='glass'] [data-toc] [data-toc-item][data-toc-focused] {
11141
+ background-color:rgba(var(--color-surface-200),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
11142
+ }[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-item]:hover,[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-item]:hover,[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-item][data-toc-focused],[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-item][data-toc-focused]{background-color:rgba(var(--color-surface-800),0.15);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
11143
+
11144
+ [data-style='glass'] [data-toc] [data-toc-item][data-toc-active] {
11145
+ --un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
11146
+ }[data-mode="dark"][data-style="glass"] [data-toc] [data-toc-item][data-toc-active],[data-mode="dark"] [data-style="glass"] [data-toc] [data-toc-item][data-toc-active]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
11147
+
package/dist/material.css CHANGED
@@ -1433,3 +1433,22 @@
1433
1433
  --un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));--un-shadow:var(--un-shadow-inset) 0 1px 2px 0 var(--un-shadow-color, rgb(0 0 0 / 0.05));box-shadow:var(--un-ring-offset-shadow), var(--un-ring-shadow), var(--un-shadow);
1434
1434
  }[data-mode="dark"][data-style="material"] [data-floating-nav-indicator],[data-mode="dark"] [data-style="material"] [data-floating-nav-indicator]{--un-bg-opacity:1;background-color:rgba(var(--color-primary-500),var(--un-bg-opacity));}
1435
1435
 
1436
+ /* TableOfContents — Material theme */
1437
+
1438
+ [data-style='material'] [data-toc] [data-toc-label] {
1439
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1440
+ }[data-mode="dark"][data-style="material"] [data-toc] [data-toc-label],[data-mode="dark"] [data-style="material"] [data-toc] [data-toc-label]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1441
+
1442
+ [data-style='material'] [data-toc] [data-toc-item] {
1443
+ --un-text-opacity:1;color:rgba(var(--color-surface-700),var(--un-text-opacity));
1444
+ }[data-mode="dark"][data-style="material"] [data-toc] [data-toc-item],[data-mode="dark"] [data-style="material"] [data-toc] [data-toc-item]{--un-text-opacity:1;color:rgba(var(--color-surface-300),var(--un-text-opacity));}
1445
+
1446
+ [data-style='material'] [data-toc] [data-toc-item]:hover,
1447
+ [data-style='material'] [data-toc] [data-toc-item][data-toc-focused] {
1448
+ --un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1449
+ }[data-mode="dark"][data-style="material"] [data-toc] [data-toc-item]:hover,[data-mode="dark"] [data-style="material"] [data-toc] [data-toc-item]:hover,[data-mode="dark"][data-style="material"] [data-toc] [data-toc-item][data-toc-focused],[data-mode="dark"] [data-style="material"] [data-toc] [data-toc-item][data-toc-focused]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
1450
+
1451
+ [data-style='material'] [data-toc] [data-toc-item][data-toc-active] {
1452
+ --un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-600),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
1453
+ }[data-mode="dark"][data-style="material"] [data-toc] [data-toc-item][data-toc-active],[data-mode="dark"] [data-style="material"] [data-toc] [data-toc-item][data-toc-active]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-400),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
1454
+
package/dist/minimal.css CHANGED
@@ -1387,3 +1387,22 @@
1387
1387
  --un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));
1388
1388
  }[data-mode="dark"][data-style="minimal"] [data-floating-nav-indicator],[data-mode="dark"] [data-style="minimal"] [data-floating-nav-indicator]{--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));}
1389
1389
 
1390
+ /* TableOfContents — Minimal theme */
1391
+
1392
+ [data-style='minimal'] [data-toc] [data-toc-label] {
1393
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1394
+ }[data-mode="dark"][data-style="minimal"] [data-toc] [data-toc-label],[data-mode="dark"] [data-style="minimal"] [data-toc] [data-toc-label]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1395
+
1396
+ [data-style='minimal'] [data-toc] [data-toc-item] {
1397
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1398
+ }[data-mode="dark"][data-style="minimal"] [data-toc] [data-toc-item],[data-mode="dark"] [data-style="minimal"] [data-toc] [data-toc-item]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1399
+
1400
+ [data-style='minimal'] [data-toc] [data-toc-item]:hover,
1401
+ [data-style='minimal'] [data-toc] [data-toc-item][data-toc-focused] {
1402
+ --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1403
+ }[data-mode="dark"][data-style="minimal"] [data-toc] [data-toc-item]:hover,[data-mode="dark"] [data-style="minimal"] [data-toc] [data-toc-item]:hover,[data-mode="dark"][data-style="minimal"] [data-toc] [data-toc-item][data-toc-focused],[data-mode="dark"] [data-style="minimal"] [data-toc] [data-toc-item][data-toc-focused]{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1404
+
1405
+ [data-style='minimal'] [data-toc] [data-toc-item][data-toc-active] {
1406
+ --un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-400),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1407
+ }[data-mode="dark"][data-style="minimal"] [data-toc] [data-toc-item][data-toc-active],[data-mode="dark"] [data-style="minimal"] [data-toc] [data-toc-item][data-toc-active]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-600),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1408
+
package/dist/rokkit.css CHANGED
@@ -546,26 +546,27 @@
546
546
  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-950),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
547
547
  }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item]:hover:not(:disabled):not([data-disabled="true"]),[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled="true"]),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item]:focus:not(:disabled):not([data-disabled="true"]){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));}
548
548
 
549
- /* Active state — muted when list not focused */
549
+ /* Active state — muted gradient when list not focused */
550
550
  [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] {
551
- border-left-width:2px;--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-200),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
552
- }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-bg-opacity:1;background-color:rgba(var(--color-surface-800),var(--un-bg-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
551
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
552
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
553
553
 
554
554
  /* Active state — full gradient when list has focus */
555
555
  [data-style='rokkit'] [data-list]:focus-within [data-list-item][data-active='true'] {
556
- border-left-width:2px;--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
557
- }[data-mode="dark"][data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
556
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
557
+ }[data-mode="dark"][data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"],[data-mode="dark"] [data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"]{--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
558
558
 
559
- /* Active + hover — intensified gradient on hover */
559
+ /* Active + hover — same as focus-within gradient */
560
560
  [data-style='rokkit'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled) {
561
- --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-300),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));
562
- }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-700),1) var(--un-gradient-to-position);}
561
+ --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
562
+ }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled),[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"]:hover:not(:disabled){--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-500),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-secondary-500),1) var(--un-gradient-to-position);}
563
563
 
564
564
  /* =============================================================================
565
565
  Item Elements
566
566
  ============================================================================= */
567
567
 
568
568
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon] {
569
+ font-size: 1rem;
569
570
  --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
570
571
  }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
571
572
 
@@ -581,9 +582,13 @@
581
582
  [data-style='rokkit']
582
583
  [data-list]:focus-within
583
584
  [data-list-item][data-active='true']
585
+ [data-item-icon],
586
+ [data-style='rokkit']
587
+ [data-list]
588
+ [data-list-item][data-active='true']:hover:not(:disabled)
584
589
  [data-item-icon] {
585
- --un-text-opacity:1;color:rgba(var(--color-primary-900),var(--un-text-opacity));
586
- }[data-mode="dark"][data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"] [data-item-icon],[data-mode="dark"] [data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"] [data-item-icon]{--un-text-opacity:1;color:rgba(var(--color-primary-100),var(--un-text-opacity));}
590
+ --un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
591
+ }
587
592
 
588
593
  /* Item description */
589
594
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-description] {
@@ -594,6 +599,17 @@
594
599
  --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
595
600
  }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-description],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-description]{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
596
601
 
602
+ [data-style='rokkit']
603
+ [data-list]:focus-within
604
+ [data-list-item][data-active='true']
605
+ [data-item-description],
606
+ [data-style='rokkit']
607
+ [data-list]
608
+ [data-list-item][data-active='true']:hover:not(:disabled)
609
+ [data-item-description] {
610
+ --un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
611
+ }
612
+
597
613
  /* Item badge */
598
614
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-badge] {
599
615
  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-surface-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
@@ -603,6 +619,13 @@
603
619
  border-width:1px;--un-border-opacity:1;border-color:rgba(var(--color-primary-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-300),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-200),1) var(--un-gradient-to-position);--un-gradient-shape:to bottom in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-primary-800),var(--un-text-opacity));
604
620
  }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-item][data-active="true"] [data-item-badge]{--un-border-opacity:1;border-color:rgba(var(--color-primary-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-700),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-800),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-primary-200),var(--un-text-opacity));}
605
621
 
622
+ [data-style='rokkit']
623
+ [data-list]:focus-within
624
+ [data-list-item][data-active='true']
625
+ [data-item-badge] {
626
+ --un-border-opacity:1;border-color:rgba(var(--color-primary-600),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-600),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-500),1) var(--un-gradient-to-position);--un-text-opacity:1;color:rgba(var(--color-surface-50),var(--un-text-opacity));
627
+ }[data-mode="dark"][data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"] [data-item-badge],[data-mode="dark"] [data-style="rokkit"] [data-list]:focus-within [data-list-item][data-active="true"] [data-item-badge]{--un-border-opacity:1;border-color:rgba(var(--color-primary-400),var(--un-border-opacity));--un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-primary-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-primary-500),1) var(--un-gradient-to-position);}
628
+
606
629
  /* =============================================================================
607
630
  Groups
608
631
  ============================================================================= */
@@ -611,6 +634,10 @@
611
634
  --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
612
635
  }[data-mode="dark"][data-style="rokkit"] [data-list] [data-list-group],[data-mode="dark"] [data-style="rokkit"] [data-list] [data-list-group]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
613
636
 
637
+ [data-style='rokkit'] [data-list] [data-list-group] [data-item-icon] {
638
+ font-size: 1rem;
639
+ }
640
+
614
641
  [data-style='rokkit'] [data-list] [data-list-group]:hover:not(:disabled),
615
642
  [data-style='rokkit'] [data-list] [data-list-group]:focus:not(:disabled) {
616
643
  --un-gradient-from-position:0%;--un-gradient-from:rgba(var(--color-surface-400),1) var(--un-gradient-from-position);--un-gradient-to-position:100%;--un-gradient-to:rgb(255 255 255 / 0) var(--un-gradient-to-position);--un-gradient-stops:var(--un-gradient-from), var(--un-gradient-to);--un-gradient-to-position:100%;--un-gradient-to:rgba(var(--color-surface-300),1) var(--un-gradient-to-position);--un-gradient-shape:to right in oklch;--un-gradient:var(--un-gradient-shape), var(--un-gradient-stops);background-image:linear-gradient(var(--un-gradient));--un-text-opacity:1;color:rgba(var(--color-surface-800),var(--un-text-opacity));
@@ -1827,3 +1854,22 @@
1827
1854
  --un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1828
1855
  }[data-mode="dark"][data-style="rokkit"] [data-upload-file-status][data-status="error"] [data-upload-retry]:hover,[data-mode="dark"] [data-style="rokkit"] [data-upload-file-status][data-status="error"] [data-upload-retry]:hover{--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1829
1856
 
1857
+ /* TableOfContents — Rokkit theme */
1858
+
1859
+ [data-style='rokkit'] [data-toc] [data-toc-label] {
1860
+ --un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));
1861
+ }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-label],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-label]{--un-text-opacity:1;color:rgba(var(--color-surface-500),var(--un-text-opacity));}
1862
+
1863
+ [data-style='rokkit'] [data-toc] [data-toc-item] {
1864
+ --un-text-opacity:1;color:rgba(var(--color-surface-600),var(--un-text-opacity));
1865
+ }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item]{--un-text-opacity:1;color:rgba(var(--color-surface-400),var(--un-text-opacity));}
1866
+
1867
+ [data-style='rokkit'] [data-toc] [data-toc-item]:hover,
1868
+ [data-style='rokkit'] [data-toc] [data-toc-item][data-toc-focused] {
1869
+ --un-text-opacity:1;color:rgba(var(--color-surface-900),var(--un-text-opacity));outline:2px solid transparent;outline-offset:2px;
1870
+ }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item]:hover,[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item]:hover,[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item][data-toc-focused],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item][data-toc-focused]{--un-text-opacity:1;color:rgba(var(--color-surface-100),var(--un-text-opacity));}
1871
+
1872
+ [data-style='rokkit'] [data-toc] [data-toc-item][data-toc-active] {
1873
+ --un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-700),var(--un-text-opacity));
1874
+ }[data-mode="dark"][data-style="rokkit"] [data-toc] [data-toc-item][data-toc-active],[data-mode="dark"] [data-style="rokkit"] [data-toc] [data-toc-item][data-toc-active]{--un-border-opacity:1;--un-border-left-opacity:var(--un-border-opacity);border-left-color:rgba(var(--color-primary-500),var(--un-border-left-opacity));--un-text-opacity:1;color:rgba(var(--color-primary-300),var(--un-text-opacity));}
1875
+
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@rokkit/themes",
3
- "version": "1.0.0-next.142",
3
+ "version": "1.0.0-next.143",
4
4
  "description": "Theme styles for @rokkit/ui components",
5
5
  "repository": {
6
6
  "type": "git",
package/src/base/index.css CHANGED
@@ -38,3 +38,4 @@
38
38
  @import './grid.css';
39
39
  @import './upload-target.css';
40
40
  @import './upload-progress.css';
41
+ @import './toc.css';
package/src/base/list.css CHANGED
@@ -109,6 +109,7 @@ button[data-list-item] {
109
109
  padding-block: 0.25rem;
110
110
  font-size: 0.75rem;
111
111
  font-weight: 600;
112
+ text-align: left;
112
113
  text-transform: uppercase;
113
114
  letter-spacing: 0.05em;
114
115
  cursor: pointer;
@@ -136,19 +137,22 @@ button[data-list-item] {
136
137
  padding: 0.5rem 1rem;
137
138
  }
138
139
 
139
- /* Group item content — inherits font from [data-list-group], label stays inline */
140
+ /* Group item content — icon slightly muted, text stacks label + description */
140
141
  [data-list-group] > [data-item-icon] {
141
142
  opacity: 0.7;
142
143
  }
143
144
 
144
- [data-list-group] > [data-item-text] {
145
- display: contents;
146
- }
147
-
148
145
  [data-list-group] [data-item-label] {
149
146
  font-weight: inherit;
150
147
  }
151
148
 
149
+ [data-list-group] [data-item-description] {
150
+ text-transform: none;
151
+ letter-spacing: normal;
152
+ font-weight: 400;
153
+ opacity: 0.8;
154
+ }
155
+
152
156
  /* Expand/collapse chevron — pushed to the right edge */
153
157
  [data-list-expand-icon] {
154
158
  flex-shrink: 0;
package/src/base/toc.css ADDED
@@ -0,0 +1,48 @@
1
+ /* TableOfContents — base structural styles */
2
+
3
+ [data-toc] {
4
+ display: flex;
5
+ flex-direction: column;
6
+ gap: 0.25rem;
7
+ }
8
+
9
+ [data-toc-label] {
10
+ margin: 0 0 0.5rem;
11
+ padding: 0;
12
+ font-size: 0.75rem;
13
+ font-weight: 600;
14
+ text-transform: uppercase;
15
+ letter-spacing: 0.05em;
16
+ }
17
+
18
+ [data-toc-list] {
19
+ display: flex;
20
+ flex-direction: column;
21
+ list-style: none;
22
+ padding: 0;
23
+ margin: 0;
24
+ gap: 0.125rem;
25
+ }
26
+
27
+ [data-toc-item] {
28
+ display: block;
29
+ width: 100%;
30
+ padding: 0.25rem 0.5rem;
31
+ background: none;
32
+ border: none;
33
+ border-left: 2px solid transparent;
34
+ font: inherit;
35
+ font-size: 0.8125rem;
36
+ text-align: left;
37
+ cursor: pointer;
38
+ white-space: nowrap;
39
+ overflow: hidden;
40
+ text-overflow: ellipsis;
41
+ transition: color 150ms ease, border-color 150ms ease;
42
+ }
43
+
44
+ /* h3 items indented */
45
+ [data-toc-item][data-toc-level='h3'] {
46
+ padding-left: 1rem;
47
+ font-size: 0.75rem;
48
+ }
package/src/glass/index.css CHANGED
@@ -21,3 +21,4 @@
21
21
  @import './range.css';
22
22
  @import './timeline.css';
23
23
  @import './floating-navigation.css';
24
+ @import './toc.css';
package/src/glass/toc.css ADDED
@@ -0,0 +1,18 @@
1
+ /* TableOfContents — Glass theme */
2
+
3
+ [data-style='glass'] [data-toc] [data-toc-label] {
4
+ @apply text-surface-z6;
5
+ }
6
+
7
+ [data-style='glass'] [data-toc] [data-toc-item] {
8
+ @apply text-surface-z7;
9
+ }
10
+
11
+ [data-style='glass'] [data-toc] [data-toc-item]:hover,
12
+ [data-style='glass'] [data-toc] [data-toc-item][data-toc-focused] {
13
+ @apply text-surface-z10 bg-surface-z2/15 outline-none;
14
+ }
15
+
16
+ [data-style='glass'] [data-toc] [data-toc-item][data-toc-active] {
17
+ @apply text-primary-z9 border-l-primary-z5;
18
+ }
package/src/material/index.css CHANGED
@@ -21,3 +21,4 @@
21
21
  @import './range.css';
22
22
  @import './timeline.css';
23
23
  @import './floating-navigation.css';
24
+ @import './toc.css';
package/src/material/toc.css ADDED
@@ -0,0 +1,18 @@
1
+ /* TableOfContents — Material theme */
2
+
3
+ [data-style='material'] [data-toc] [data-toc-label] {
4
+ @apply text-surface-z6;
5
+ }
6
+
7
+ [data-style='material'] [data-toc] [data-toc-item] {
8
+ @apply text-surface-z7;
9
+ }
10
+
11
+ [data-style='material'] [data-toc] [data-toc-item]:hover,
12
+ [data-style='material'] [data-toc] [data-toc-item][data-toc-focused] {
13
+ @apply text-surface-z10 bg-surface-z2 outline-none;
14
+ }
15
+
16
+ [data-style='material'] [data-toc] [data-toc-item][data-toc-active] {
17
+ @apply text-primary-z9 border-l-primary-z6;
18
+ }
package/src/minimal/index.css CHANGED
@@ -21,3 +21,4 @@
21
21
  @import './range.css';
22
22
  @import './timeline.css';
23
23
  @import './floating-navigation.css';
24
+ @import './toc.css';
package/src/minimal/toc.css ADDED
@@ -0,0 +1,18 @@
1
+ /* TableOfContents — Minimal theme */
2
+
3
+ [data-style='minimal'] [data-toc] [data-toc-label] {
4
+ @apply text-surface-z5;
5
+ }
6
+
7
+ [data-style='minimal'] [data-toc] [data-toc-item] {
8
+ @apply text-surface-z6;
9
+ }
10
+
11
+ [data-style='minimal'] [data-toc] [data-toc-item]:hover,
12
+ [data-style='minimal'] [data-toc] [data-toc-item][data-toc-focused] {
13
+ @apply text-surface-z9 outline-none;
14
+ }
15
+
16
+ [data-style='minimal'] [data-toc] [data-toc-item][data-toc-active] {
17
+ @apply text-primary-z7 border-l-primary-z4;
18
+ }
package/src/rokkit/index.css CHANGED
@@ -25,3 +25,4 @@
25
25
  @import './grid.css';
26
26
  @import './upload-target.css';
27
27
  @import './upload-progress.css';
28
+ @import './toc.css';
package/src/rokkit/list.css CHANGED
@@ -33,19 +33,19 @@
33
33
  @apply from-surface-z3 to-surface-z2 text-surface-z10 bg-gradient-to-r outline-none;
34
34
  }
35
35
 
36
- /* Active state — muted when list not focused */
36
+ /* Active state — muted gradient when list not focused */
37
37
  [data-style='rokkit'] [data-list] [data-list-item][data-active='true'] {
38
- @apply bg-surface-z2 text-primary-z9 border-l-primary-z5 border-l-2;
38
+ @apply from-surface-z3 to-surface-z2 text-primary-z9 bg-gradient-to-r;
39
39
  }
40
40
 
41
41
  /* Active state — full gradient when list has focus */
42
42
  [data-style='rokkit'] [data-list]:focus-within [data-list-item][data-active='true'] {
43
- @apply from-primary-z5 to-secondary-z5 text-primary-z9 border-l-primary-z5 border-l-2 bg-gradient-to-r;
43
+ @apply from-primary-z5 to-secondary-z5 text-on-primary bg-gradient-to-r;
44
44
  }
45
45
 
46
- /* Active + hover — intensified gradient on hover */
46
+ /* Active + hover — same as focus-within gradient */
47
47
  [data-style='rokkit'] [data-list] [data-list-item][data-active='true']:hover:not(:disabled) {
48
- @apply from-primary-z4 to-primary-z3 bg-gradient-to-r;
48
+ @apply from-primary-z5 to-secondary-z5 text-on-primary bg-gradient-to-r;
49
49
  }
50
50
 
51
51
  /* =============================================================================
@@ -53,6 +53,7 @@
53
53
  ============================================================================= */
54
54
 
55
55
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-icon] {
56
+ font-size: 1rem;
56
57
  @apply text-surface-z5;
57
58
  }
58
59
 
@@ -68,8 +69,12 @@
68
69
  [data-style='rokkit']
69
70
  [data-list]:focus-within
70
71
  [data-list-item][data-active='true']
72
+ [data-item-icon],
73
+ [data-style='rokkit']
74
+ [data-list]
75
+ [data-list-item][data-active='true']:hover:not(:disabled)
71
76
  [data-item-icon] {
72
- @apply text-primary-z9;
77
+ @apply text-on-primary;
73
78
  }
74
79
 
75
80
  /* Item description */
@@ -81,6 +86,17 @@
81
86
  @apply text-primary-z7;
82
87
  }
83
88
 
89
+ [data-style='rokkit']
90
+ [data-list]:focus-within
91
+ [data-list-item][data-active='true']
92
+ [data-item-description],
93
+ [data-style='rokkit']
94
+ [data-list]
95
+ [data-list-item][data-active='true']:hover:not(:disabled)
96
+ [data-item-description] {
97
+ @apply text-on-primary;
98
+ }
99
+
84
100
  /* Item badge */
85
101
  [data-style='rokkit'] [data-list] [data-list-item] [data-item-badge] {
86
102
  @apply text-surface-z6 from-surface-z3 to-surface-z2 border-surface-z4 border bg-gradient-to-b;
@@ -90,6 +106,13 @@
90
106
  @apply text-primary-z8 from-primary-z3 to-primary-z2 border-primary-z4 border bg-gradient-to-b;
91
107
  }
92
108
 
109
+ [data-style='rokkit']
110
+ [data-list]:focus-within
111
+ [data-list-item][data-active='true']
112
+ [data-item-badge] {
113
+ @apply text-on-primary from-primary-z6 to-primary-z5 border-primary-z6;
114
+ }
115
+
93
116
  /* =============================================================================
94
117
  Groups
95
118
  ============================================================================= */
@@ -98,6 +121,10 @@
98
121
  @apply text-surface-z6;
99
122
  }
100
123
 
124
+ [data-style='rokkit'] [data-list] [data-list-group] [data-item-icon] {
125
+ font-size: 1rem;
126
+ }
127
+
101
128
  [data-style='rokkit'] [data-list] [data-list-group]:hover:not(:disabled),
102
129
  [data-style='rokkit'] [data-list] [data-list-group]:focus:not(:disabled) {
103
130
  @apply from-surface-z4 to-surface-z3 text-surface-z8 bg-gradient-to-r;
package/src/rokkit/toc.css ADDED
@@ -0,0 +1,18 @@
1
+ /* TableOfContents — Rokkit theme */
2
+
3
+ [data-style='rokkit'] [data-toc] [data-toc-label] {
4
+ @apply text-surface-z5;
5
+ }
6
+
7
+ [data-style='rokkit'] [data-toc] [data-toc-item] {
8
+ @apply text-surface-z6;
9
+ }
10
+
11
+ [data-style='rokkit'] [data-toc] [data-toc-item]:hover,
12
+ [data-style='rokkit'] [data-toc] [data-toc-item][data-toc-focused] {
13
+ @apply text-surface-z9 outline-none;
14
+ }
15
+
16
+ [data-style='rokkit'] [data-toc] [data-toc-item][data-toc-active] {
17
+ @apply text-primary-z7 border-l-primary-z5;
18
+ }