@tangible/ui 0.0.10 → 0.0.11

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 (21) hide show
  1. package/components/Checkbox/Checkbox.js +2 -2
  2. package/components/Chip/Chip.d.ts +1 -1
  3. package/components/Chip/Chip.js +1 -1
  4. package/icons/icons.svg +34 -12
  5. package/icons/lms/index.d.ts +8 -8
  6. package/icons/lms/index.js +16 -16
  7. package/icons/manifest.json +192 -16
  8. package/icons/membersync/index.d.ts +51 -0
  9. package/icons/membersync/index.js +246 -0
  10. package/icons/registry.d.ts +52 -8
  11. package/icons/registry.js +27 -4
  12. package/icons/system/index.js +4 -4
  13. package/package.json +1 -1
  14. package/styles/all.css +1 -1
  15. package/styles/all.expanded.css +58 -116
  16. package/styles/all.expanded.unlayered.css +58 -116
  17. package/styles/all.unlayered.css +1 -1
  18. package/styles/components/input/index.scss +4 -22
  19. package/styles/index.scss +3 -3
  20. package/styles/system/_tokens.scss +1 -8
  21. package/tui-manifest.json +8 -5
package/styles/all.expanded.css CHANGED
@@ -91,6 +91,8 @@
91
91
  --tui-chip-icon
92
92
  --tui-chip-radius
93
93
  --tui-chip-selected-ring
94
+ --tui-chip-icon-slot-bg
95
+ --tui-chip-icon-slot-fg
94
96
  */
95
97
  /* @tui-tokens
96
98
  --tui-chip-group-gap
@@ -530,96 +532,6 @@
530
532
  --tui-shadow-color: 0, 0, 0;
531
533
  }
532
534
  }
533
- :where(.tui-interface) {
534
- /* Accent: section (fallback → warning) */
535
- --tui-theme-section-base: var(--tui-theme-warning-base);
536
- --tui-theme-section-soft: var(--tui-theme-warning-subtle);
537
- --tui-theme-section-border: var(--tui-theme-warning-soft);
538
- --tui-theme-section-on-base: var(--tui-color-fg-on-accent);
539
- --tui-theme-section-on-soft: var(--tui-color-fg);
540
- /* Accent: page (fallback → primary) */
541
- --tui-theme-page-base: var(--tui-theme-primary-base);
542
- --tui-theme-page-soft: var(--tui-theme-primary-subtle);
543
- --tui-theme-page-border: var(--tui-theme-primary-soft);
544
- --tui-theme-page-on-base: var(--tui-color-fg-on-accent);
545
- --tui-theme-page-on-soft: var(--tui-color-fg);
546
- /* Accent: step (fallback → info) */
547
- --tui-theme-step-base: var(--tui-theme-info-base);
548
- --tui-theme-step-soft: var(--tui-theme-info-subtle);
549
- --tui-theme-step-border: var(--tui-theme-info-soft);
550
- --tui-theme-step-on-base: var(--tui-color-fg-on-accent);
551
- --tui-theme-step-on-soft: var(--tui-color-fg);
552
- }
553
-
554
- @supports (color: oklch(50% 0.1 0deg)) {
555
- :where(.tui-interface) {
556
- /* Accent: section (OKLCH c=0.17 h=55) */
557
- --tui-palette-section-c: 0.17;
558
- --tui-palette-section-h: 55;
559
- --tui-theme-section-base: oklch(0.62 var(--tui-palette-section-c) var(--tui-palette-section-h));
560
- --tui-theme-section-soft: oklch(0.92 calc(var(--tui-palette-section-c) * 0.55) var(--tui-palette-section-h));
561
- --tui-theme-section-border: oklch(0.80 calc(var(--tui-palette-section-c) * 0.45) var(--tui-palette-section-h));
562
- --tui-theme-section-on-base: oklch(0.98 0 0);
563
- --tui-theme-section-on-soft: var(--tui-color-fg);
564
- /* Accent: page (OKLCH c=0.15 h=280) */
565
- --tui-palette-page-c: 0.15;
566
- --tui-palette-page-h: 280;
567
- --tui-theme-page-base: oklch(0.62 var(--tui-palette-page-c) var(--tui-palette-page-h));
568
- --tui-theme-page-soft: oklch(0.92 calc(var(--tui-palette-page-c) * 0.55) var(--tui-palette-page-h));
569
- --tui-theme-page-border: oklch(0.80 calc(var(--tui-palette-page-c) * 0.45) var(--tui-palette-page-h));
570
- --tui-theme-page-on-base: oklch(0.98 0 0);
571
- --tui-theme-page-on-soft: var(--tui-color-fg);
572
- /* Accent: step (OKLCH c=0.14 h=200) */
573
- --tui-palette-step-c: 0.14;
574
- --tui-palette-step-h: 200;
575
- --tui-theme-step-base: oklch(0.62 var(--tui-palette-step-c) var(--tui-palette-step-h));
576
- --tui-theme-step-soft: oklch(0.92 calc(var(--tui-palette-step-c) * 0.55) var(--tui-palette-step-h));
577
- --tui-theme-step-border: oklch(0.80 calc(var(--tui-palette-step-c) * 0.45) var(--tui-palette-step-h));
578
- --tui-theme-step-on-base: oklch(0.98 0 0);
579
- --tui-theme-step-on-soft: var(--tui-color-fg);
580
- }
581
- }
582
- @supports (color: oklch(50% 0.1 0deg)) {
583
- :where(.tui-interface)[data-theme=dark] {
584
- --tui-theme-section-base: oklch(0.72 var(--tui-palette-section-c) var(--tui-palette-section-h));
585
- --tui-theme-section-soft: oklch(0.30 calc(var(--tui-palette-section-c) * 0.35) var(--tui-palette-section-h));
586
- --tui-theme-section-border: oklch(0.38 calc(var(--tui-palette-section-c) * 0.30) var(--tui-palette-section-h));
587
- --tui-theme-section-on-base: oklch(0.18 0 0);
588
- --tui-theme-section-on-soft: var(--tui-color-fg);
589
- --tui-theme-page-base: oklch(0.72 var(--tui-palette-page-c) var(--tui-palette-page-h));
590
- --tui-theme-page-soft: oklch(0.30 calc(var(--tui-palette-page-c) * 0.35) var(--tui-palette-page-h));
591
- --tui-theme-page-border: oklch(0.38 calc(var(--tui-palette-page-c) * 0.30) var(--tui-palette-page-h));
592
- --tui-theme-page-on-base: oklch(0.18 0 0);
593
- --tui-theme-page-on-soft: var(--tui-color-fg);
594
- --tui-theme-step-base: oklch(0.72 var(--tui-palette-step-c) var(--tui-palette-step-h));
595
- --tui-theme-step-soft: oklch(0.30 calc(var(--tui-palette-step-c) * 0.35) var(--tui-palette-step-h));
596
- --tui-theme-step-border: oklch(0.38 calc(var(--tui-palette-step-c) * 0.30) var(--tui-palette-step-h));
597
- --tui-theme-step-on-base: oklch(0.18 0 0);
598
- --tui-theme-step-on-soft: var(--tui-color-fg);
599
- }
600
- }
601
-
602
- @media (prefers-color-scheme: dark) {
603
- @supports (color: oklch(50% 0.1 0deg)) {
604
- :where(.tui-interface)[data-theme=auto] {
605
- --tui-theme-section-base: oklch(0.72 var(--tui-palette-section-c) var(--tui-palette-section-h));
606
- --tui-theme-section-soft: oklch(0.30 calc(var(--tui-palette-section-c) * 0.35) var(--tui-palette-section-h));
607
- --tui-theme-section-border: oklch(0.38 calc(var(--tui-palette-section-c) * 0.30) var(--tui-palette-section-h));
608
- --tui-theme-section-on-base: oklch(0.18 0 0);
609
- --tui-theme-section-on-soft: var(--tui-color-fg);
610
- --tui-theme-page-base: oklch(0.72 var(--tui-palette-page-c) var(--tui-palette-page-h));
611
- --tui-theme-page-soft: oklch(0.30 calc(var(--tui-palette-page-c) * 0.35) var(--tui-palette-page-h));
612
- --tui-theme-page-border: oklch(0.38 calc(var(--tui-palette-page-c) * 0.30) var(--tui-palette-page-h));
613
- --tui-theme-page-on-base: oklch(0.18 0 0);
614
- --tui-theme-page-on-soft: var(--tui-color-fg);
615
- --tui-theme-step-base: oklch(0.72 var(--tui-palette-step-c) var(--tui-palette-step-h));
616
- --tui-theme-step-soft: oklch(0.30 calc(var(--tui-palette-step-c) * 0.35) var(--tui-palette-step-h));
617
- --tui-theme-step-border: oklch(0.38 calc(var(--tui-palette-step-c) * 0.30) var(--tui-palette-step-h));
618
- --tui-theme-step-on-base: oklch(0.18 0 0);
619
- --tui-theme-step-on-soft: var(--tui-color-fg);
620
- }
621
- }
622
- }
623
535
  @media (prefers-reduced-motion: reduce) {
624
536
  :where(.tui-interface) {
625
537
  --tui-motion-duration: 0ms;
@@ -1504,13 +1416,15 @@
1504
1416
  :where(.tui-interface) .tui-card.is-style-elevated:hover {
1505
1417
  box-shadow: var(--_shadow-interact);
1506
1418
  }
1507
- .tui-interface input[type=checkbox] {
1419
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1420
+ .tui-inline-choice input[type=checkbox]) {
1508
1421
  --_accent: var(--tui-checkbox-accent, var(--tui-input-accent, var(--tui-theme-primary-base)));
1509
1422
  --_border: var(--tui-checkbox-border, var(--tui-color-border));
1510
1423
  --_radius: var(--tui-checkbox-radius, var(--tui-radius-sm));
1511
1424
  --_bg: var(--tui-checkbox-bg, var(--tui-color-bg));
1512
1425
  appearance: none;
1513
1426
  margin: 0;
1427
+ font-size: inherit;
1514
1428
  display: inline-block;
1515
1429
  width: 1em;
1516
1430
  height: 1em;
@@ -1526,36 +1440,42 @@
1526
1440
  transition-timing-function: var(--tui-motion-timing);
1527
1441
  transition-property: background-color, border-color;
1528
1442
  }
1529
- .tui-interface input[type=checkbox]:checked {
1443
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1444
+ .tui-inline-choice input[type=checkbox]):checked {
1530
1445
  background-color: var(--_accent);
1531
1446
  border-color: var(--_accent);
1532
1447
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
1533
1448
  }
1534
- .tui-interface input[type=checkbox]:indeterminate {
1449
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1450
+ .tui-inline-choice input[type=checkbox]):indeterminate {
1535
1451
  background-color: var(--_accent);
1536
1452
  border-color: var(--_accent);
1537
1453
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
1538
1454
  }
1539
- .tui-interface input[type=checkbox][aria-invalid=true] {
1455
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1456
+ .tui-inline-choice input[type=checkbox])[aria-invalid=true] {
1540
1457
  --_border: var(--tui-checkbox-border-invalid, var(--tui-theme-danger-base));
1541
1458
  }
1542
- .tui-interface input[type=checkbox]:focus-visible {
1459
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1460
+ .tui-inline-choice input[type=checkbox]):focus-visible {
1543
1461
  outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
1544
1462
  outline-offset: var(--tui-focus-ring-offset);
1545
1463
  }
1546
- .tui-interface input[type=checkbox]:disabled {
1464
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1465
+ .tui-inline-choice input[type=checkbox]):disabled {
1547
1466
  cursor: not-allowed;
1548
1467
  }
1549
- .tui-interface input[type=checkbox]:disabled {
1468
+ .tui-interface .tui-inline-choice__control[type=checkbox]:disabled {
1550
1469
  opacity: var(--tui-opacity-disabled);
1551
1470
  }
1552
- .tui-interface .tui-inline-choice input[type=checkbox]:disabled {
1471
+ .tui-interface .tui-inline-choice :is(.tui-inline-choice__control[type=checkbox],
1472
+ input[type=checkbox]):disabled {
1553
1473
  opacity: 1;
1554
1474
  }
1555
1475
  .tui-interface .tui-inline-choice:has(input[type=checkbox]) {
1556
1476
  gap: var(--tui-checkbox-gap, var(--tui-spacing-xs));
1557
1477
  }
1558
- .tui-interface .tui-inline-choice:has(input[type=checkbox]) input[type=checkbox] {
1478
+ .tui-interface .tui-inline-choice:has(input[type=checkbox]) :is(.tui-inline-choice__control[type=checkbox], input[type=checkbox]) {
1559
1479
  font-size: var(--tui-checkbox-size, 1.15em);
1560
1480
  flex: 0 0 1em;
1561
1481
  }
@@ -1570,7 +1490,8 @@
1570
1490
  cursor: not-allowed;
1571
1491
  }
1572
1492
  @media (forced-colors: active) {
1573
- .tui-interface input[type=checkbox] {
1493
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1494
+ .tui-inline-choice input[type=checkbox]) {
1574
1495
  forced-color-adjust: auto;
1575
1496
  }
1576
1497
  }
@@ -1615,6 +1536,25 @@
1615
1536
  :where(.tui-interface) .tui-chip.is-size-md {
1616
1537
  font-size: var(--tui-typography-size-md);
1617
1538
  }
1539
+ :where(.tui-interface) .tui-chip.is-size-lg {
1540
+ font-size: var(--tui-typography-size-md);
1541
+ min-height: var(--tui-control-height-lg, 3rem);
1542
+ }
1543
+ :where(.tui-interface) .tui-chip .tui-chip__icon-slot {
1544
+ align-self: stretch;
1545
+ display: inline-flex;
1546
+ align-items: center;
1547
+ justify-content: center;
1548
+ margin-inline-start: calc(-1 * 0.75em);
1549
+ margin-block: calc(-1 * 0.375em);
1550
+ margin-inline-end: calc(0.75em - 0.25em);
1551
+ padding-inline: 0.4em;
1552
+ background-color: var(--tui-chip-icon-slot-bg, var(--tui-color-bg-surface));
1553
+ color: var(--tui-chip-icon-slot-fg, var(--tui-color-fg));
1554
+ border-inline-end: var(--tui-border-width) solid var(--_border);
1555
+ border-start-start-radius: calc(var(--_radius) - var(--tui-border-width));
1556
+ border-end-start-radius: calc(var(--_radius) - var(--tui-border-width));
1557
+ }
1618
1558
  :where(.tui-interface) .tui-chip.is-interactive, :where(.tui-interface) .tui-chip:is(a, button, [role=button]), :where(.tui-interface) .tui-chip:has(input[type=checkbox], input[type=radio]) {
1619
1559
  cursor: pointer;
1620
1560
  }
@@ -2603,7 +2543,6 @@
2603
2543
  .tui-interface .tui-select__trigger-wrap {
2604
2544
  position: relative;
2605
2545
  display: inline-flex;
2606
- width: 100%;
2607
2546
  }
2608
2547
  .tui-interface .tui-select__trigger {
2609
2548
  --_bg: var(--tui-select-trigger-bg, var(--tui-color-bg-surface));
@@ -3083,21 +3022,6 @@
3083
3022
  gap: var(--tui-spacing-xs);
3084
3023
  cursor: pointer;
3085
3024
  }
3086
- :where(.tui-interface) .tui-inline-choice input[type=radio] {
3087
- --_accent: var(--tui-input-accent, var(--tui-theme-primary-base));
3088
- font-size: 1.15em;
3089
- width: 1em;
3090
- height: 1em;
3091
- flex: 0 0 1em;
3092
- margin: 0;
3093
- }
3094
- :where(.tui-interface) .tui-inline-choice input[type=radio]:focus-visible {
3095
- outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
3096
- outline-offset: var(--tui-focus-ring-offset);
3097
- }
3098
- :where(.tui-interface) .tui-inline-choice input[type=radio]:checked {
3099
- accent-color: var(--_accent);
3100
- }
3101
3025
  :where(.tui-interface) .tui-inline-choice label {
3102
3026
  font-weight: unset;
3103
3027
  line-height: 1.25em;
@@ -4256,6 +4180,24 @@
4256
4180
  transition: none;
4257
4181
  }
4258
4182
  }
4183
+ .tui-interface :is(.tui-inline-choice__control[type=radio],
4184
+ .tui-inline-choice input[type=radio]) {
4185
+ --_accent: var(--tui-input-accent, var(--tui-theme-primary-base));
4186
+ font-size: 1.15em;
4187
+ width: 1em;
4188
+ height: 1em;
4189
+ flex: 0 0 1em;
4190
+ margin: 0;
4191
+ }
4192
+ .tui-interface :is(.tui-inline-choice__control[type=radio],
4193
+ .tui-inline-choice input[type=radio]):focus-visible {
4194
+ outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
4195
+ outline-offset: var(--tui-focus-ring-offset);
4196
+ }
4197
+ .tui-interface :is(.tui-inline-choice__control[type=radio],
4198
+ .tui-inline-choice input[type=radio]):checked {
4199
+ accent-color: var(--_accent);
4200
+ }
4259
4201
  @media (forced-colors: active) {
4260
4202
  :where(.tui-interface) .tui-radio__indicator {
4261
4203
  forced-color-adjust: none;
package/styles/all.expanded.unlayered.css CHANGED
@@ -91,6 +91,8 @@
91
91
  --tui-chip-icon
92
92
  --tui-chip-radius
93
93
  --tui-chip-selected-ring
94
+ --tui-chip-icon-slot-bg
95
+ --tui-chip-icon-slot-fg
94
96
  */
95
97
  /* @tui-tokens
96
98
  --tui-chip-group-gap
@@ -530,96 +532,6 @@
530
532
  --tui-shadow-color: 0, 0, 0;
531
533
  }
532
534
  }
533
- :where(.tui-interface) {
534
- /* Accent: section (fallback → warning) */
535
- --tui-theme-section-base: var(--tui-theme-warning-base);
536
- --tui-theme-section-soft: var(--tui-theme-warning-subtle);
537
- --tui-theme-section-border: var(--tui-theme-warning-soft);
538
- --tui-theme-section-on-base: var(--tui-color-fg-on-accent);
539
- --tui-theme-section-on-soft: var(--tui-color-fg);
540
- /* Accent: page (fallback → primary) */
541
- --tui-theme-page-base: var(--tui-theme-primary-base);
542
- --tui-theme-page-soft: var(--tui-theme-primary-subtle);
543
- --tui-theme-page-border: var(--tui-theme-primary-soft);
544
- --tui-theme-page-on-base: var(--tui-color-fg-on-accent);
545
- --tui-theme-page-on-soft: var(--tui-color-fg);
546
- /* Accent: step (fallback → info) */
547
- --tui-theme-step-base: var(--tui-theme-info-base);
548
- --tui-theme-step-soft: var(--tui-theme-info-subtle);
549
- --tui-theme-step-border: var(--tui-theme-info-soft);
550
- --tui-theme-step-on-base: var(--tui-color-fg-on-accent);
551
- --tui-theme-step-on-soft: var(--tui-color-fg);
552
- }
553
-
554
- @supports (color: oklch(50% 0.1 0deg)) {
555
- :where(.tui-interface) {
556
- /* Accent: section (OKLCH c=0.17 h=55) */
557
- --tui-palette-section-c: 0.17;
558
- --tui-palette-section-h: 55;
559
- --tui-theme-section-base: oklch(0.62 var(--tui-palette-section-c) var(--tui-palette-section-h));
560
- --tui-theme-section-soft: oklch(0.92 calc(var(--tui-palette-section-c) * 0.55) var(--tui-palette-section-h));
561
- --tui-theme-section-border: oklch(0.80 calc(var(--tui-palette-section-c) * 0.45) var(--tui-palette-section-h));
562
- --tui-theme-section-on-base: oklch(0.98 0 0);
563
- --tui-theme-section-on-soft: var(--tui-color-fg);
564
- /* Accent: page (OKLCH c=0.15 h=280) */
565
- --tui-palette-page-c: 0.15;
566
- --tui-palette-page-h: 280;
567
- --tui-theme-page-base: oklch(0.62 var(--tui-palette-page-c) var(--tui-palette-page-h));
568
- --tui-theme-page-soft: oklch(0.92 calc(var(--tui-palette-page-c) * 0.55) var(--tui-palette-page-h));
569
- --tui-theme-page-border: oklch(0.80 calc(var(--tui-palette-page-c) * 0.45) var(--tui-palette-page-h));
570
- --tui-theme-page-on-base: oklch(0.98 0 0);
571
- --tui-theme-page-on-soft: var(--tui-color-fg);
572
- /* Accent: step (OKLCH c=0.14 h=200) */
573
- --tui-palette-step-c: 0.14;
574
- --tui-palette-step-h: 200;
575
- --tui-theme-step-base: oklch(0.62 var(--tui-palette-step-c) var(--tui-palette-step-h));
576
- --tui-theme-step-soft: oklch(0.92 calc(var(--tui-palette-step-c) * 0.55) var(--tui-palette-step-h));
577
- --tui-theme-step-border: oklch(0.80 calc(var(--tui-palette-step-c) * 0.45) var(--tui-palette-step-h));
578
- --tui-theme-step-on-base: oklch(0.98 0 0);
579
- --tui-theme-step-on-soft: var(--tui-color-fg);
580
- }
581
- }
582
- @supports (color: oklch(50% 0.1 0deg)) {
583
- :where(.tui-interface)[data-theme=dark] {
584
- --tui-theme-section-base: oklch(0.72 var(--tui-palette-section-c) var(--tui-palette-section-h));
585
- --tui-theme-section-soft: oklch(0.30 calc(var(--tui-palette-section-c) * 0.35) var(--tui-palette-section-h));
586
- --tui-theme-section-border: oklch(0.38 calc(var(--tui-palette-section-c) * 0.30) var(--tui-palette-section-h));
587
- --tui-theme-section-on-base: oklch(0.18 0 0);
588
- --tui-theme-section-on-soft: var(--tui-color-fg);
589
- --tui-theme-page-base: oklch(0.72 var(--tui-palette-page-c) var(--tui-palette-page-h));
590
- --tui-theme-page-soft: oklch(0.30 calc(var(--tui-palette-page-c) * 0.35) var(--tui-palette-page-h));
591
- --tui-theme-page-border: oklch(0.38 calc(var(--tui-palette-page-c) * 0.30) var(--tui-palette-page-h));
592
- --tui-theme-page-on-base: oklch(0.18 0 0);
593
- --tui-theme-page-on-soft: var(--tui-color-fg);
594
- --tui-theme-step-base: oklch(0.72 var(--tui-palette-step-c) var(--tui-palette-step-h));
595
- --tui-theme-step-soft: oklch(0.30 calc(var(--tui-palette-step-c) * 0.35) var(--tui-palette-step-h));
596
- --tui-theme-step-border: oklch(0.38 calc(var(--tui-palette-step-c) * 0.30) var(--tui-palette-step-h));
597
- --tui-theme-step-on-base: oklch(0.18 0 0);
598
- --tui-theme-step-on-soft: var(--tui-color-fg);
599
- }
600
- }
601
-
602
- @media (prefers-color-scheme: dark) {
603
- @supports (color: oklch(50% 0.1 0deg)) {
604
- :where(.tui-interface)[data-theme=auto] {
605
- --tui-theme-section-base: oklch(0.72 var(--tui-palette-section-c) var(--tui-palette-section-h));
606
- --tui-theme-section-soft: oklch(0.30 calc(var(--tui-palette-section-c) * 0.35) var(--tui-palette-section-h));
607
- --tui-theme-section-border: oklch(0.38 calc(var(--tui-palette-section-c) * 0.30) var(--tui-palette-section-h));
608
- --tui-theme-section-on-base: oklch(0.18 0 0);
609
- --tui-theme-section-on-soft: var(--tui-color-fg);
610
- --tui-theme-page-base: oklch(0.72 var(--tui-palette-page-c) var(--tui-palette-page-h));
611
- --tui-theme-page-soft: oklch(0.30 calc(var(--tui-palette-page-c) * 0.35) var(--tui-palette-page-h));
612
- --tui-theme-page-border: oklch(0.38 calc(var(--tui-palette-page-c) * 0.30) var(--tui-palette-page-h));
613
- --tui-theme-page-on-base: oklch(0.18 0 0);
614
- --tui-theme-page-on-soft: var(--tui-color-fg);
615
- --tui-theme-step-base: oklch(0.72 var(--tui-palette-step-c) var(--tui-palette-step-h));
616
- --tui-theme-step-soft: oklch(0.30 calc(var(--tui-palette-step-c) * 0.35) var(--tui-palette-step-h));
617
- --tui-theme-step-border: oklch(0.38 calc(var(--tui-palette-step-c) * 0.30) var(--tui-palette-step-h));
618
- --tui-theme-step-on-base: oklch(0.18 0 0);
619
- --tui-theme-step-on-soft: var(--tui-color-fg);
620
- }
621
- }
622
- }
623
535
  @media (prefers-reduced-motion: reduce) {
624
536
  :where(.tui-interface) {
625
537
  --tui-motion-duration: 0ms;
@@ -1504,13 +1416,15 @@
1504
1416
  :where(.tui-interface) .tui-card.is-style-elevated:hover {
1505
1417
  box-shadow: var(--_shadow-interact);
1506
1418
  }
1507
- .tui-interface input[type=checkbox] {
1419
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1420
+ .tui-inline-choice input[type=checkbox]) {
1508
1421
  --_accent: var(--tui-checkbox-accent, var(--tui-input-accent, var(--tui-theme-primary-base)));
1509
1422
  --_border: var(--tui-checkbox-border, var(--tui-color-border));
1510
1423
  --_radius: var(--tui-checkbox-radius, var(--tui-radius-sm));
1511
1424
  --_bg: var(--tui-checkbox-bg, var(--tui-color-bg));
1512
1425
  appearance: none;
1513
1426
  margin: 0;
1427
+ font-size: inherit;
1514
1428
  display: inline-block;
1515
1429
  width: 1em;
1516
1430
  height: 1em;
@@ -1526,36 +1440,42 @@
1526
1440
  transition-timing-function: var(--tui-motion-timing);
1527
1441
  transition-property: background-color, border-color;
1528
1442
  }
1529
- .tui-interface input[type=checkbox]:checked {
1443
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1444
+ .tui-inline-choice input[type=checkbox]):checked {
1530
1445
  background-color: var(--_accent);
1531
1446
  border-color: var(--_accent);
1532
1447
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 6 9 17l-5-5'/%3E%3C/svg%3E");
1533
1448
  }
1534
- .tui-interface input[type=checkbox]:indeterminate {
1449
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1450
+ .tui-inline-choice input[type=checkbox]):indeterminate {
1535
1451
  background-color: var(--_accent);
1536
1452
  border-color: var(--_accent);
1537
1453
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E");
1538
1454
  }
1539
- .tui-interface input[type=checkbox][aria-invalid=true] {
1455
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1456
+ .tui-inline-choice input[type=checkbox])[aria-invalid=true] {
1540
1457
  --_border: var(--tui-checkbox-border-invalid, var(--tui-theme-danger-base));
1541
1458
  }
1542
- .tui-interface input[type=checkbox]:focus-visible {
1459
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1460
+ .tui-inline-choice input[type=checkbox]):focus-visible {
1543
1461
  outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
1544
1462
  outline-offset: var(--tui-focus-ring-offset);
1545
1463
  }
1546
- .tui-interface input[type=checkbox]:disabled {
1464
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1465
+ .tui-inline-choice input[type=checkbox]):disabled {
1547
1466
  cursor: not-allowed;
1548
1467
  }
1549
- .tui-interface input[type=checkbox]:disabled {
1468
+ .tui-interface .tui-inline-choice__control[type=checkbox]:disabled {
1550
1469
  opacity: var(--tui-opacity-disabled);
1551
1470
  }
1552
- .tui-interface .tui-inline-choice input[type=checkbox]:disabled {
1471
+ .tui-interface .tui-inline-choice :is(.tui-inline-choice__control[type=checkbox],
1472
+ input[type=checkbox]):disabled {
1553
1473
  opacity: 1;
1554
1474
  }
1555
1475
  .tui-interface .tui-inline-choice:has(input[type=checkbox]) {
1556
1476
  gap: var(--tui-checkbox-gap, var(--tui-spacing-xs));
1557
1477
  }
1558
- .tui-interface .tui-inline-choice:has(input[type=checkbox]) input[type=checkbox] {
1478
+ .tui-interface .tui-inline-choice:has(input[type=checkbox]) :is(.tui-inline-choice__control[type=checkbox], input[type=checkbox]) {
1559
1479
  font-size: var(--tui-checkbox-size, 1.15em);
1560
1480
  flex: 0 0 1em;
1561
1481
  }
@@ -1570,7 +1490,8 @@
1570
1490
  cursor: not-allowed;
1571
1491
  }
1572
1492
  @media (forced-colors: active) {
1573
- .tui-interface input[type=checkbox] {
1493
+ .tui-interface :is(.tui-inline-choice__control[type=checkbox],
1494
+ .tui-inline-choice input[type=checkbox]) {
1574
1495
  forced-color-adjust: auto;
1575
1496
  }
1576
1497
  }
@@ -1615,6 +1536,25 @@
1615
1536
  :where(.tui-interface) .tui-chip.is-size-md {
1616
1537
  font-size: var(--tui-typography-size-md);
1617
1538
  }
1539
+ :where(.tui-interface) .tui-chip.is-size-lg {
1540
+ font-size: var(--tui-typography-size-md);
1541
+ min-height: var(--tui-control-height-lg, 3rem);
1542
+ }
1543
+ :where(.tui-interface) .tui-chip .tui-chip__icon-slot {
1544
+ align-self: stretch;
1545
+ display: inline-flex;
1546
+ align-items: center;
1547
+ justify-content: center;
1548
+ margin-inline-start: calc(-1 * 0.75em);
1549
+ margin-block: calc(-1 * 0.375em);
1550
+ margin-inline-end: calc(0.75em - 0.25em);
1551
+ padding-inline: 0.4em;
1552
+ background-color: var(--tui-chip-icon-slot-bg, var(--tui-color-bg-surface));
1553
+ color: var(--tui-chip-icon-slot-fg, var(--tui-color-fg));
1554
+ border-inline-end: var(--tui-border-width) solid var(--_border);
1555
+ border-start-start-radius: calc(var(--_radius) - var(--tui-border-width));
1556
+ border-end-start-radius: calc(var(--_radius) - var(--tui-border-width));
1557
+ }
1618
1558
  :where(.tui-interface) .tui-chip.is-interactive, :where(.tui-interface) .tui-chip:is(a, button, [role=button]), :where(.tui-interface) .tui-chip:has(input[type=checkbox], input[type=radio]) {
1619
1559
  cursor: pointer;
1620
1560
  }
@@ -2603,7 +2543,6 @@
2603
2543
  .tui-interface .tui-select__trigger-wrap {
2604
2544
  position: relative;
2605
2545
  display: inline-flex;
2606
- width: 100%;
2607
2546
  }
2608
2547
  .tui-interface .tui-select__trigger {
2609
2548
  --_bg: var(--tui-select-trigger-bg, var(--tui-color-bg-surface));
@@ -3083,21 +3022,6 @@
3083
3022
  gap: var(--tui-spacing-xs);
3084
3023
  cursor: pointer;
3085
3024
  }
3086
- :where(.tui-interface) .tui-inline-choice input[type=radio] {
3087
- --_accent: var(--tui-input-accent, var(--tui-theme-primary-base));
3088
- font-size: 1.15em;
3089
- width: 1em;
3090
- height: 1em;
3091
- flex: 0 0 1em;
3092
- margin: 0;
3093
- }
3094
- :where(.tui-interface) .tui-inline-choice input[type=radio]:focus-visible {
3095
- outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
3096
- outline-offset: var(--tui-focus-ring-offset);
3097
- }
3098
- :where(.tui-interface) .tui-inline-choice input[type=radio]:checked {
3099
- accent-color: var(--_accent);
3100
- }
3101
3025
  :where(.tui-interface) .tui-inline-choice label {
3102
3026
  font-weight: unset;
3103
3027
  line-height: 1.25em;
@@ -4256,6 +4180,24 @@
4256
4180
  transition: none;
4257
4181
  }
4258
4182
  }
4183
+ .tui-interface :is(.tui-inline-choice__control[type=radio],
4184
+ .tui-inline-choice input[type=radio]) {
4185
+ --_accent: var(--tui-input-accent, var(--tui-theme-primary-base));
4186
+ font-size: 1.15em;
4187
+ width: 1em;
4188
+ height: 1em;
4189
+ flex: 0 0 1em;
4190
+ margin: 0;
4191
+ }
4192
+ .tui-interface :is(.tui-inline-choice__control[type=radio],
4193
+ .tui-inline-choice input[type=radio]):focus-visible {
4194
+ outline: var(--tui-focus-ring-width) solid var(--tui-focus-ring-color);
4195
+ outline-offset: var(--tui-focus-ring-offset);
4196
+ }
4197
+ .tui-interface :is(.tui-inline-choice__control[type=radio],
4198
+ .tui-inline-choice input[type=radio]):checked {
4199
+ accent-color: var(--_accent);
4200
+ }
4259
4201
  @media (forced-colors: active) {
4260
4202
  :where(.tui-interface) .tui-radio__indicator {
4261
4203
  forced-color-adjust: none;