@godxjp/ui 9.2.0 → 11.0.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (137) hide show
  1. package/README.md +58 -29
  2. package/dist/app/index.d.ts +1 -1
  3. package/dist/app/index.js +4 -4
  4. package/dist/{app.prop-UTc4j4nj.d.ts → app.prop-Cy6dJnU8.d.ts} +18 -40
  5. package/dist/{checkbox-ChRsR7Nk.d.ts → checkbox-em-oFM5D.d.ts} +1 -1
  6. package/dist/{chunk-LJLGABFV.js → chunk-2HXZT2WJ.js} +17 -9
  7. package/dist/{chunk-QLMXEJSY.js → chunk-3Q4A4U2P.js} +24 -1
  8. package/dist/{chunk-26CPAKUP.js → chunk-44YRPSZ7.js} +1 -2
  9. package/dist/{chunk-HB2OHB5X.js → chunk-5NCFLCM7.js} +27 -16
  10. package/dist/{chunk-FXFJF4YA.js → chunk-6CSBMMZS.js} +262 -31
  11. package/dist/{chunk-457KVJTX.js → chunk-7Q45MBFW.js} +7 -5
  12. package/dist/{chunk-O24Z3ULJ.js → chunk-BE6GJGKJ.js} +1 -1
  13. package/dist/{chunk-FVPCVZL3.js → chunk-BG5RNXTH.js} +1 -1
  14. package/dist/{chunk-AINW5WYN.js → chunk-COD66MFF.js} +1 -2
  15. package/dist/{chunk-IOGU3ZWF.js → chunk-DNGJHWJZ.js} +3 -3
  16. package/dist/{chunk-3TS3G4U3.js → chunk-EE5DKOHX.js} +3 -1
  17. package/dist/{chunk-BHV2FUOA.js → chunk-EZHHJQWQ.js} +1 -1
  18. package/dist/{chunk-G6Q32VHO.js → chunk-FAB3LMTK.js} +33 -8
  19. package/dist/{chunk-N3JPLJ3B.js → chunk-GDDCSKCB.js} +12 -5
  20. package/dist/{chunk-RLGHEV4A.js → chunk-HTG5VHU7.js} +10 -1
  21. package/dist/{chunk-R2W2FX5Q.js → chunk-I7NQ2LIL.js} +1 -9
  22. package/dist/{chunk-XQMPK4GM.js → chunk-IHRMOJXD.js} +86 -39
  23. package/dist/{chunk-TILFZBTE.js → chunk-INIIF7F7.js} +1 -4
  24. package/dist/{chunk-UIYEAUWA.js → chunk-IY347EQA.js} +2 -2
  25. package/dist/{chunk-HCM4JAC2.js → chunk-JWGLJXQU.js} +39 -11
  26. package/dist/{chunk-TO33OY4L.js → chunk-LMKUKCTN.js} +1 -1
  27. package/dist/chunk-NXVCI6YB.js +453 -0
  28. package/dist/{chunk-O2OUNXV4.js → chunk-P5KPCT6R.js} +3 -3
  29. package/dist/{chunk-6HQMUUQW.js → chunk-PDXFQS7M.js} +14 -30
  30. package/dist/{chunk-26WDEDWL.js → chunk-PUGEOUWZ.js} +32 -23
  31. package/dist/{chunk-F7PG4OEV.js → chunk-QSGW3ZWK.js} +12 -4
  32. package/dist/{chunk-E7HBHUJY.js → chunk-QVLUCB47.js} +8 -6
  33. package/dist/{chunk-25RYBC5T.js → chunk-S2IJKT3D.js} +1 -1
  34. package/dist/{chunk-OJZ6C2HM.js → chunk-SARQRCKO.js} +54 -48
  35. package/dist/chunk-T2QO2S65.js +126 -0
  36. package/dist/{chunk-6J7GRCDA.js → chunk-UNVRNJCB.js} +71 -11
  37. package/dist/{chunk-S6TBIL7J.js → chunk-USNR424B.js} +63 -44
  38. package/dist/{chunk-6YBYAEXD.js → chunk-VSM44AYE.js} +94 -24
  39. package/dist/{chunk-QWLXN6CT.js → chunk-VSUYVT2Q.js} +3 -2
  40. package/dist/{chunk-4R7QL3MW.js → chunk-X2VY4MOW.js} +14 -29
  41. package/dist/{chunk-ETLAI3QU.js → chunk-Z46J47FY.js} +73 -77
  42. package/dist/components/admin/index.d.ts +22 -12
  43. package/dist/components/admin/index.js +29 -30
  44. package/dist/components/data-display/badge.js +3 -3
  45. package/dist/components/data-display/card.d.ts +3 -3
  46. package/dist/components/data-display/card.js +1 -1
  47. package/dist/components/data-display/carousel.js +3 -1
  48. package/dist/components/data-display/index.js +55 -33
  49. package/dist/components/data-entry/calendar.d.ts +1 -1
  50. package/dist/components/data-entry/calendar.js +1 -1
  51. package/dist/components/data-entry/cascader.d.ts +1 -1
  52. package/dist/components/data-entry/cascader.js +5 -5
  53. package/dist/components/data-entry/checkbox.d.ts +2 -2
  54. package/dist/components/data-entry/checkbox.js +2 -2
  55. package/dist/components/data-entry/color-picker.d.ts +1 -1
  56. package/dist/components/data-entry/color-picker.js +3 -3
  57. package/dist/components/data-entry/date-picker.d.ts +2 -2
  58. package/dist/components/data-entry/date-picker.js +4 -4
  59. package/dist/components/data-entry/date-range-picker.d.ts +2 -2
  60. package/dist/components/data-entry/date-range-picker.js +4 -4
  61. package/dist/components/data-entry/index.d.ts +9 -25
  62. package/dist/components/data-entry/index.js +22 -26
  63. package/dist/components/data-entry/radio.d.ts +1 -1
  64. package/dist/components/data-entry/radio.js +2 -2
  65. package/dist/components/data-entry/select.d.ts +2 -2
  66. package/dist/components/data-entry/select.js +3 -4
  67. package/dist/components/data-entry/slider.d.ts +1 -1
  68. package/dist/components/data-entry/switch.d.ts +2 -2
  69. package/dist/components/data-entry/switch.js +1 -1
  70. package/dist/components/data-entry/time-input.js +2 -2
  71. package/dist/components/data-entry/time-picker.d.ts +3 -1
  72. package/dist/components/data-entry/time-picker.js +3 -3
  73. package/dist/components/data-entry/transfer.d.ts +2 -2
  74. package/dist/components/data-entry/transfer.js +5 -5
  75. package/dist/components/data-entry/tree-select.d.ts +1 -1
  76. package/dist/components/data-entry/tree-select.js +5 -5
  77. package/dist/components/data-entry/upload.d.ts +2 -2
  78. package/dist/components/data-entry/upload.js +5 -5
  79. package/dist/components/feedback/alert.js +5 -5
  80. package/dist/components/feedback/dialog.js +3 -3
  81. package/dist/components/feedback/index.d.ts +4 -4
  82. package/dist/components/feedback/index.js +9 -9
  83. package/dist/components/feedback/sheet.js +1 -1
  84. package/dist/components/layout/index.d.ts +6 -9
  85. package/dist/components/layout/index.js +6 -4
  86. package/dist/components/navigation/dropdown-menu.js +1 -1
  87. package/dist/components/navigation/index.d.ts +14 -16
  88. package/dist/components/navigation/index.js +7 -8
  89. package/dist/components/navigation/pagination.d.ts +11 -8
  90. package/dist/components/navigation/pagination.js +4 -5
  91. package/dist/components/navigation/steps.d.ts +3 -3
  92. package/dist/components/navigation/steps.js +3 -1
  93. package/dist/components/query/index.d.ts +1 -5
  94. package/dist/components/query/index.js +6 -8
  95. package/dist/components/ui/index.d.ts +5 -7
  96. package/dist/components/ui/index.js +30 -33
  97. package/dist/{data-entry.prop-CDkOajPj.d.ts → data-entry.prop-BR4vNA1j.d.ts} +7 -35
  98. package/dist/filter-bar-BxjSJJnQ.d.ts +7 -0
  99. package/dist/{inline-CDSVAN54.d.ts → flex-D_EXRFSW.d.ts} +2 -8
  100. package/dist/form/index.js +1 -1
  101. package/dist/i18n/index.d.ts +82 -10
  102. package/dist/i18n/index.js +2 -2
  103. package/dist/index.d.ts +6 -6
  104. package/dist/index.js +41 -44
  105. package/dist/lib/datetime/index.js +1 -1
  106. package/dist/{navigation.prop-8DgElO0c.d.ts → navigation.prop-DMcXkR-J.d.ts} +9 -11
  107. package/dist/{password-strength-kQkloEeo.d.ts → password-strength-DVRvXEOK.d.ts} +2 -2
  108. package/dist/props/components/index.d.ts +3 -3
  109. package/dist/props/index.d.ts +3 -3
  110. package/dist/props/index.js +1 -1
  111. package/dist/props/registry.d.ts +84 -39
  112. package/dist/props/registry.js +1 -1
  113. package/dist/{search-input-cezAxpgb.d.ts → search-input-DpqDMXcn.d.ts} +2 -4
  114. package/dist/{skeleton-uWAjSacg.d.ts → skeleton-cj9kh5wo.d.ts} +1 -3
  115. package/dist/styles/control.css +176 -41
  116. package/dist/styles/data-display-layout.css +41 -15
  117. package/dist/styles/feedback-layout.css +44 -12
  118. package/dist/styles/index.css +45 -1
  119. package/dist/styles/layout.css +18 -17
  120. package/dist/styles/navigation-layout.css +3 -1
  121. package/dist/styles/shell-layout.css +3 -3
  122. package/dist/styles/table-layout.css +13 -0
  123. package/dist/tokens/foundation.css +12 -1
  124. package/dist/tokens/semantic/layout.css +2 -2
  125. package/package.json +6 -7
  126. package/scripts/ui-audit.mjs +35 -2
  127. package/dist/chunk-6MCI7W5G.js +0 -201
  128. package/dist/chunk-CAEL2ZD2.js +0 -222
  129. package/dist/chunk-GKXPALFT.js +0 -32
  130. package/dist/chunk-JKHWLPM5.js +0 -101
  131. package/dist/chunk-KDBGFJJI.js +0 -220
  132. package/dist/components/data-entry/autocomplete.d.ts +0 -24
  133. package/dist/components/data-entry/autocomplete.js +0 -10
  134. package/dist/components/data-entry/combobox.d.ts +0 -22
  135. package/dist/components/data-entry/combobox.js +0 -6
  136. package/dist/filter-bar-B5TPUqEO.d.ts +0 -14
  137. /package/dist/{chunk-LDSLS6HE.js → chunk-7CFO5FFE.js} +0 -0
@@ -572,59 +572,194 @@
572
572
  }
573
573
 
574
574
  /* PasswordInput */
575
- .ui-password-input { position: relative; display: block; }
576
- .ui-password-input-field { padding-right: 2.5rem; }
575
+ .ui-password-input {
576
+ position: relative;
577
+ display: block;
578
+ }
579
+ .ui-password-input-field {
580
+ padding-right: 2.5rem;
581
+ }
577
582
  .ui-password-input-toggle {
578
- position: absolute; inset-block: 0; inset-inline-end: 0; display: inline-flex;
579
- align-items: center; justify-content: center; width: 2.5rem;
580
- color: hsl(var(--muted-foreground)); background: transparent; border: 0; cursor: pointer;
583
+ position: absolute;
584
+ inset-block: 0;
585
+ inset-inline-end: 0;
586
+ display: inline-flex;
587
+ align-items: center;
588
+ justify-content: center;
589
+ width: 2.5rem;
590
+ color: hsl(var(--muted-foreground));
591
+ background: transparent;
592
+ border: 0;
593
+ cursor: pointer;
594
+ }
595
+ .ui-password-input-toggle:hover {
596
+ color: hsl(var(--foreground));
597
+ }
598
+ .ui-password-input-toggle svg {
599
+ width: 1rem;
600
+ height: 1rem;
581
601
  }
582
- .ui-password-input-toggle:hover { color: hsl(var(--foreground)); }
583
- .ui-password-input-toggle svg { width: 1rem; height: 1rem; }
584
602
 
585
603
  /* InputOTP */
586
- .ui-otp-container { display: flex; align-items: center; gap: var(--space-2); }
587
- .ui-otp-input:disabled { cursor: not-allowed; }
588
- .ui-otp-group { display: flex; align-items: center; }
604
+ .ui-otp-container {
605
+ display: flex;
606
+ align-items: center;
607
+ gap: var(--space-2);
608
+ }
609
+ .ui-otp-input:disabled {
610
+ cursor: not-allowed;
611
+ }
612
+ .ui-otp-group {
613
+ display: flex;
614
+ align-items: center;
615
+ }
589
616
  .ui-otp-slot {
590
- position: relative; display: flex; width: 2.25rem; height: 2.25rem;
591
- align-items: center; justify-content: center; font-size: 0.875rem;
592
- border: 1px solid hsl(var(--border)); border-inline-start-width: 0;
593
- background: hsl(var(--background)); transition: box-shadow 0.15s ease;
617
+ position: relative;
618
+ display: flex;
619
+ width: 2.25rem;
620
+ height: 2.25rem;
621
+ align-items: center;
622
+ justify-content: center;
623
+ font-size: 0.875rem;
624
+ border: 1px solid hsl(var(--border));
625
+ border-inline-start-width: 0;
626
+ background: hsl(var(--background));
627
+ transition: box-shadow 0.15s ease;
594
628
  }
595
629
  .ui-otp-group .ui-otp-slot:first-child {
596
- border-inline-start-width: 1px; border-start-start-radius: var(--radius-md); border-end-start-radius: var(--radius-md);
630
+ border-inline-start-width: 1px;
631
+ border-start-start-radius: var(--radius-md);
632
+ border-end-start-radius: var(--radius-md);
633
+ }
634
+ .ui-otp-group .ui-otp-slot:last-child {
635
+ border-start-end-radius: var(--radius-md);
636
+ border-end-end-radius: var(--radius-md);
637
+ }
638
+ .ui-otp-slot[data-active="true"] {
639
+ z-index: 1;
640
+ box-shadow: 0 0 0 2px hsl(var(--ring));
641
+ }
642
+ .ui-otp-caret-wrapper {
643
+ position: absolute;
644
+ inset: 0;
645
+ display: flex;
646
+ align-items: center;
647
+ justify-content: center;
648
+ }
649
+ .ui-otp-caret {
650
+ width: 1px;
651
+ height: 1rem;
652
+ background: hsl(var(--foreground));
653
+ animation: ui-otp-blink 1s step-end infinite;
654
+ }
655
+ @keyframes ui-otp-blink {
656
+ 50% {
657
+ opacity: 0;
658
+ }
659
+ }
660
+ .ui-otp-separator-icon {
661
+ width: 1rem;
662
+ height: 1rem;
663
+ color: hsl(var(--muted-foreground));
597
664
  }
598
- .ui-otp-group .ui-otp-slot:last-child { border-start-end-radius: var(--radius-md); border-end-end-radius: var(--radius-md); }
599
- .ui-otp-slot[data-active="true"] { z-index: 1; box-shadow: 0 0 0 2px hsl(var(--ring)); }
600
- .ui-otp-caret-wrapper { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
601
- .ui-otp-caret { width: 1px; height: 1rem; background: hsl(var(--foreground)); animation: ui-otp-blink 1s step-end infinite; }
602
- @keyframes ui-otp-blink { 50% { opacity: 0; } }
603
- .ui-otp-separator-icon { width: 1rem; height: 1rem; color: hsl(var(--muted-foreground)); }
604
665
 
605
666
  /* Rating */
606
- .ui-rating { display: inline-flex; align-items: center; gap: var(--space-1); }
607
- .ui-rating-star { background: transparent; border: 0; padding: 0; cursor: pointer; color: hsl(var(--muted-foreground) / 0.45); line-height: 0; }
608
- .ui-rating-star:disabled { cursor: default; }
609
- .ui-rating-star svg { width: 1.25rem; height: 1.25rem; }
610
- .ui-rating-star-filled { color: hsl(var(--warning)); }
611
- .ui-rating-star-filled svg { fill: currentColor; }
612
- .ui-rating-star:focus-visible { outline: 2px solid hsl(var(--ring)); outline-offset: 2px; border-radius: var(--radius-sm); }
667
+ .ui-rating {
668
+ display: inline-flex;
669
+ align-items: center;
670
+ gap: var(--space-1);
671
+ }
672
+ .ui-rating-star {
673
+ /* ≥24px hit area (WCAG 2.5.8) around the 20px glyph */
674
+ display: inline-flex;
675
+ align-items: center;
676
+ justify-content: center;
677
+ min-width: 1.5rem;
678
+ min-height: 1.5rem;
679
+ background: transparent;
680
+ border: 0;
681
+ padding: 0;
682
+ cursor: pointer;
683
+ color: hsl(var(--muted-foreground) / 0.45);
684
+ line-height: 0;
685
+ }
686
+ .ui-rating-star:disabled {
687
+ cursor: default;
688
+ }
689
+ .ui-rating-star svg {
690
+ width: 1.25rem;
691
+ height: 1.25rem;
692
+ }
693
+ .ui-rating-star-filled {
694
+ color: hsl(var(--warning));
695
+ }
696
+ .ui-rating-star-filled svg {
697
+ fill: currentColor;
698
+ }
699
+ .ui-rating-star:focus-visible {
700
+ outline: 2px solid hsl(var(--ring));
701
+ outline-offset: 2px;
702
+ border-radius: var(--radius-sm);
703
+ }
613
704
 
614
705
  /* TagInput */
615
706
  .ui-tag-input {
616
- display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-1);
617
- min-height: 2.25rem; padding: var(--space-1) var(--space-2);
618
- border: 1px solid hsl(var(--input)); border-radius: var(--radius-md); background: hsl(var(--background));
707
+ display: flex;
708
+ flex-wrap: wrap;
709
+ align-items: center;
710
+ gap: var(--space-1);
711
+ min-height: 2.25rem;
712
+ padding: var(--space-1) var(--space-2);
713
+ border: 1px solid hsl(var(--input));
714
+ border-radius: var(--radius-md);
715
+ background: hsl(var(--background));
716
+ }
717
+ .ui-tag-input:focus-within {
718
+ box-shadow: 0 0 0 2px hsl(var(--ring));
719
+ border-color: hsl(var(--ring));
720
+ }
721
+ .ui-tag-input-disabled {
722
+ opacity: 0.6;
723
+ cursor: not-allowed;
619
724
  }
620
- .ui-tag-input:focus-within { box-shadow: 0 0 0 2px hsl(var(--ring)); border-color: hsl(var(--ring)); }
621
- .ui-tag-input-disabled { opacity: 0.6; cursor: not-allowed; }
622
725
  .ui-tag-input-chip {
623
- display: inline-flex; align-items: center; gap: var(--space-1); font-size: 0.8125rem;
624
- padding: 0.0625rem var(--space-2); border-radius: var(--radius-sm);
625
- background: hsl(var(--secondary)); color: hsl(var(--secondary-foreground));
626
- }
627
- .ui-tag-input-remove { display: inline-flex; background: transparent; border: 0; padding: 0; cursor: pointer; color: inherit; opacity: 0.7; }
628
- .ui-tag-input-remove:hover { opacity: 1; }
629
- .ui-tag-input-remove svg { width: 0.75rem; height: 0.75rem; }
630
- .ui-tag-input-field { flex: 1; min-width: 6rem; border: 0; outline: none; background: transparent; font-size: 0.875rem; color: inherit; }
726
+ display: inline-flex;
727
+ align-items: center;
728
+ gap: var(--space-1);
729
+ font-size: 0.8125rem;
730
+ padding: 0.0625rem var(--space-2);
731
+ border-radius: var(--radius-sm);
732
+ background: hsl(var(--secondary));
733
+ color: hsl(var(--secondary-foreground));
734
+ }
735
+ .ui-tag-input-remove {
736
+ /* ≥24px hit area (WCAG 2.5.8) around the 12px glyph; negative inline margin keeps the chip tight */
737
+ display: inline-flex;
738
+ align-items: center;
739
+ justify-content: center;
740
+ min-width: 1.5rem;
741
+ min-height: 1.5rem;
742
+ margin-inline-end: -0.25rem;
743
+ background: transparent;
744
+ border: 0;
745
+ padding: 0;
746
+ cursor: pointer;
747
+ color: inherit;
748
+ opacity: 0.7;
749
+ }
750
+ .ui-tag-input-remove:hover {
751
+ opacity: 1;
752
+ }
753
+ .ui-tag-input-remove svg {
754
+ width: 0.75rem;
755
+ height: 0.75rem;
756
+ }
757
+ .ui-tag-input-field {
758
+ flex: 1;
759
+ min-width: 6rem;
760
+ border: 0;
761
+ outline: none;
762
+ background: transparent;
763
+ font-size: 0.875rem;
764
+ color: inherit;
765
+ }
@@ -184,32 +184,58 @@
184
184
  margin-top: var(--space-1);
185
185
  font-size: var(--font-size-sm);
186
186
  }
187
-
188
187
  }
189
188
 
190
189
  /* Accordion */
191
- .ui-accordion-item { border-bottom: 1px solid hsl(var(--border)); }
192
- .ui-accordion-header { display: flex; }
190
+ .ui-accordion-item {
191
+ border-bottom: 1px solid hsl(var(--border));
192
+ }
193
+ .ui-accordion-header {
194
+ display: flex;
195
+ }
193
196
  .ui-accordion-trigger {
194
- display: flex; flex: 1; align-items: center; justify-content: space-between;
195
- gap: var(--space-2); padding-block: var(--space-4); font-weight: 500; text-align: left;
197
+ display: flex;
198
+ flex: 1;
199
+ align-items: center;
200
+ justify-content: space-between;
201
+ gap: var(--space-2);
202
+ padding-block: var(--space-4);
203
+ font-weight: 500;
204
+ text-align: left;
196
205
  transition: color 0.15s ease;
197
206
  }
198
- .ui-accordion-trigger:hover { text-decoration: underline; }
207
+ .ui-accordion-trigger:hover {
208
+ text-decoration: underline;
209
+ }
199
210
  .ui-accordion-chevron {
200
- width: 1rem; height: 1rem; color: hsl(var(--muted-foreground));
201
- transition: transform 0.2s ease; flex-shrink: 0;
211
+ width: 1rem;
212
+ height: 1rem;
213
+ color: hsl(var(--muted-foreground));
214
+ transition: transform 0.2s ease;
215
+ flex-shrink: 0;
216
+ }
217
+ .ui-accordion-trigger[data-state="open"] .ui-accordion-chevron {
218
+ transform: rotate(180deg);
219
+ }
220
+ .ui-accordion-content {
221
+ overflow: hidden;
222
+ font-size: 0.875rem;
223
+ }
224
+ .ui-accordion-content-inner {
225
+ padding-bottom: var(--space-4);
202
226
  }
203
- .ui-accordion-trigger[data-state="open"] .ui-accordion-chevron { transform: rotate(180deg); }
204
- .ui-accordion-content { overflow: hidden; font-size: 0.875rem; }
205
- .ui-accordion-content-inner { padding-bottom: var(--space-4); }
206
227
 
207
228
  /* HoverCard */
208
229
  .ui-hover-card-content {
209
- z-index: 50; width: 16rem; border-radius: var(--radius-md);
210
- border: 1px solid hsl(var(--border)); background: hsl(var(--popover));
211
- color: hsl(var(--popover-foreground)); padding: var(--space-4);
212
- box-shadow: var(--shadow-md); outline: none;
230
+ z-index: 50;
231
+ width: 16rem;
232
+ border-radius: var(--radius-md);
233
+ border: 1px solid hsl(var(--border));
234
+ background: hsl(var(--popover));
235
+ color: hsl(var(--popover-foreground));
236
+ padding: var(--space-4);
237
+ box-shadow: var(--shadow-md);
238
+ outline: none;
213
239
  }
214
240
 
215
241
  .ui-carousel {
@@ -1,17 +1,49 @@
1
-
2
1
  /* Drawer (bottom-sheet, vaul) */
3
- .ui-drawer-overlay { position: fixed; inset: 0; z-index: 50; background: hsl(var(--overlay, 0 0% 0% / 0.4)); }
2
+ .ui-drawer-overlay {
3
+ position: fixed;
4
+ inset: 0;
5
+ z-index: 50;
6
+ background: hsl(var(--overlay, 0 0% 0% / 0.4));
7
+ }
4
8
  .ui-drawer-content {
5
- position: fixed; inset-inline: 0; inset-block-end: 0; z-index: 50;
6
- display: flex; flex-direction: column; max-height: 82vh;
7
- border-start-start-radius: var(--radius-lg); border-start-end-radius: var(--radius-lg);
8
- border: 1px solid hsl(var(--border)); background: hsl(var(--background));
9
+ position: fixed;
10
+ inset-inline: 0;
11
+ inset-block-end: 0;
12
+ z-index: 50;
13
+ display: flex;
14
+ flex-direction: column;
15
+ max-height: 82vh;
16
+ border-start-start-radius: var(--radius-lg);
17
+ border-start-end-radius: var(--radius-lg);
18
+ border: 1px solid hsl(var(--border));
19
+ background: hsl(var(--background));
9
20
  }
10
21
  .ui-drawer-handle {
11
- margin: var(--space-3) auto; height: 0.375rem; width: 6rem; flex-shrink: 0;
12
- border-radius: 9999px; background: hsl(var(--muted));
22
+ margin: var(--space-3) auto;
23
+ height: 0.375rem;
24
+ width: 6rem;
25
+ flex-shrink: 0;
26
+ border-radius: 9999px;
27
+ background: hsl(var(--muted));
28
+ }
29
+ .ui-drawer-header {
30
+ display: grid;
31
+ gap: var(--space-1);
32
+ padding: var(--space-4);
33
+ text-align: center;
34
+ }
35
+ .ui-drawer-footer {
36
+ display: flex;
37
+ flex-direction: column;
38
+ gap: var(--space-2);
39
+ margin-top: auto;
40
+ padding: var(--space-4);
41
+ }
42
+ .ui-drawer-title {
43
+ font-weight: var(--font-weight-medium);
44
+ line-height: 1.2;
45
+ }
46
+ .ui-drawer-description {
47
+ font-size: 0.875rem;
48
+ color: hsl(var(--muted-foreground));
13
49
  }
14
- .ui-drawer-header { display: grid; gap: var(--space-1); padding: var(--space-4); text-align: center; }
15
- .ui-drawer-footer { display: flex; flex-direction: column; gap: var(--space-2); margin-top: auto; padding: var(--space-4); }
16
- .ui-drawer-title { font-weight: 600; line-height: 1.2; }
17
- .ui-drawer-description { font-size: 0.875rem; color: hsl(var(--muted-foreground)); }
@@ -3,9 +3,19 @@
3
3
  /* Default sans font — self-contained so consumers need no font config (subsetted: latin/vi/jp). */
4
4
  @import "@fontsource/m-plus-2/400.css";
5
5
  @import "@fontsource/m-plus-2/500.css";
6
- @import "@fontsource/m-plus-2/600.css";
7
6
  @import "@fontsource/m-plus-2/700.css";
8
7
  @import "tailwindcss";
8
+
9
+ /* Guarantee the full set of semantic color utilities ships in the compiled CSS
10
+ * even when the library itself only references a few — consumers (and the token
11
+ * docs) must be able to use bg/text/border for EVERY semantic role. Without this
12
+ * Tailwind's JIT drops unused roles (success/info/attention) → transparent. */
13
+ @source inline(
14
+ "{bg,text,border,ring}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}"
15
+ );
16
+ @source inline(
17
+ "{bg,text}-{primary,secondary,muted,accent,destructive,success,warning,info,attention}-foreground"
18
+ );
9
19
  @source "../**/*.{tsx,ts}";
10
20
  @import "../tokens/base.css";
11
21
  @import "./density.css";
@@ -104,6 +114,40 @@
104
114
  "calt" 1;
105
115
  }
106
116
 
117
+ /* Semantic heading scale — SEO + accessibility: real <h1>–<h6> elements carry
118
+ * the document outline (one <h1> per page, levels never skipped). Visual size
119
+ * follows the dxs-kintai scale; component titles override via their own class. */
120
+ h1 {
121
+ font-size: var(--heading-h1);
122
+ font-weight: var(--font-weight-medium);
123
+ line-height: var(--line-height-tight);
124
+ }
125
+
126
+ h2 {
127
+ font-size: var(--heading-h2);
128
+ font-weight: var(--font-weight-medium);
129
+ line-height: var(--line-height-tight);
130
+ }
131
+
132
+ h3 {
133
+ font-size: var(--heading-h3);
134
+ font-weight: var(--font-weight-medium);
135
+ line-height: var(--line-height-tight);
136
+ }
137
+
138
+ h4 {
139
+ font-size: var(--heading-h4);
140
+ font-weight: var(--font-weight-medium);
141
+ line-height: var(--line-height-tight);
142
+ }
143
+
144
+ h5,
145
+ h6 {
146
+ font-size: var(--font-size-xs);
147
+ font-weight: var(--font-weight-medium);
148
+ line-height: var(--line-height-tight);
149
+ }
150
+
107
151
  code {
108
152
  font-family: var(--font-family-mono);
109
153
  }
@@ -173,9 +173,9 @@
173
173
  }
174
174
 
175
175
  @container (min-width: 1024px) {
176
- .ui-responsive-grid {
177
- grid-template-columns: repeat(var(--responsive-grid-lg, 4), minmax(0, 1fr));
178
- }
176
+ .ui-responsive-grid {
177
+ grid-template-columns: repeat(var(--responsive-grid-lg, 4), minmax(0, 1fr));
178
+ }
179
179
  }
180
180
 
181
181
  .ui-split-pane {
@@ -235,25 +235,30 @@
235
235
  display: flex;
236
236
  flex-direction: column;
237
237
  min-height: 100%;
238
- padding: var(--space-page-active-y) var(--space-page-active-x);
238
+ padding: var(--space-page-active-y) 0;
239
239
  gap: var(--space-section-active);
240
240
  }
241
241
 
242
+ /* Horizontal page insets live on the header/body/footer — NOT the container —
243
+ * so the header divider and footer border span the full page width
244
+ * (full-bleed) while their content stays aligned with the body. */
245
+ .ui-page-header,
246
+ .ui-page-body,
247
+ .ui-page-footer {
248
+ padding-left: var(--space-page-active-x);
249
+ padding-right: var(--space-page-active-x);
250
+ }
251
+
242
252
  .ui-page-container--narrow .ui-page-body {
243
253
  max-width: 42rem;
244
254
  }
245
255
 
246
- .ui-page-container--flush {
256
+ /* flush = full-bleed body (DataTable); header/footer keep their inset. */
257
+ .ui-page-container--flush .ui-page-body {
247
258
  padding-left: 0;
248
259
  padding-right: 0;
249
260
  }
250
261
 
251
- .ui-page-container--flush .ui-page-header,
252
- .ui-page-container--flush .ui-page-footer {
253
- padding-left: var(--space-page-active-x);
254
- padding-right: var(--space-page-active-x);
255
- }
256
-
257
262
  .ui-page-container-inset,
258
263
  .ui-page-inset {
259
264
  padding-left: var(--space-page-active-x);
@@ -308,8 +313,8 @@
308
313
  }
309
314
 
310
315
  .ui-page-title {
311
- font-size: var(--font-size-xl);
312
- font-weight: var(--font-weight-semibold);
316
+ font-size: var(--heading-h1);
317
+ font-weight: var(--font-weight-medium);
313
318
  letter-spacing: var(--letter-spacing-tight);
314
319
  line-height: var(--line-height-tight);
315
320
  overflow-wrap: anywhere;
@@ -328,10 +333,6 @@
328
333
  flex-shrink: 0;
329
334
  justify-content: flex-end;
330
335
  }
331
-
332
- .ui-page-title {
333
- font-size: var(--font-size-2xl);
334
- }
335
336
  }
336
337
 
337
338
  .ui-page-subtitle {
@@ -45,7 +45,9 @@
45
45
  cursor: pointer;
46
46
  outline: none;
47
47
  user-select: none;
48
- transition: background-color 150ms ease, color 150ms ease;
48
+ transition:
49
+ background-color 150ms ease,
50
+ color 150ms ease;
49
51
  }
50
52
 
51
53
  .ui-context-menu-item:hover,
@@ -241,7 +241,7 @@
241
241
  }
242
242
 
243
243
  .sb-nav-item[data-active="true"] {
244
- font-weight: 600;
244
+ font-weight: var(--font-weight-medium);
245
245
  }
246
246
 
247
247
  .sb-icon {
@@ -274,7 +274,7 @@
274
274
  background: hsl(var(--secondary));
275
275
  color: hsl(var(--muted-foreground));
276
276
  font-size: 10px;
277
- font-weight: 600;
277
+ font-weight: var(--font-weight-medium);
278
278
  line-height: 1.125rem;
279
279
  padding-inline: 0.375rem;
280
280
  }
@@ -355,7 +355,7 @@
355
355
  padding: var(--space-1) var(--space-2);
356
356
  color: hsl(var(--muted-foreground));
357
357
  font-size: var(--font-size-xs);
358
- font-weight: 600;
358
+ font-weight: var(--font-weight-medium);
359
359
  white-space: nowrap;
360
360
  }
361
361
 
@@ -48,6 +48,19 @@
48
48
  gap: var(--space-inline-md);
49
49
  }
50
50
 
51
+ /* Sortable header label is a real button (keyboard + aria-sort); inherits the cell's type. */
52
+ .ui-data-table-sort-button {
53
+ display: inline-flex;
54
+ align-items: center;
55
+ gap: var(--space-inline-xs);
56
+ padding: 0;
57
+ background: transparent;
58
+ color: inherit;
59
+ font: inherit;
60
+ cursor: pointer;
61
+ outline: none;
62
+ }
63
+
51
64
  .ui-data-table-bulk {
52
65
  display: flex;
53
66
  align-items: center;
@@ -74,9 +74,20 @@
74
74
  --font-size-lg: 1.1875rem; /* 19px */
75
75
  --font-size-xl: 1.375rem; /* 22px */
76
76
  --font-size-2xl: 1.625rem; /* 26px */
77
+
78
+ /* Semantic heading scale (dxs-kintai: info-dense JP enterprise, weight 500,
79
+ * never marketing-size). Applied to base h1–h4 + component titles. */
80
+ --heading-h1: 1.25rem; /* 20px — page title / h1 */
81
+ --heading-h2: 1.125rem; /* 18px — section / h2 */
82
+ --heading-h3: 0.875rem; /* 14px — h3 */
83
+ --heading-h4: 0.8125rem; /* 13px — h4 */
84
+
77
85
  --font-weight-normal: 400;
78
86
  --font-weight-medium: 500;
79
- --font-weight-semibold: 600;
87
+ /* dxs-kintai uses three weights only (400/500/700). 600 is forbidden
88
+ * (ambiguous between 500 and 700) — the legacy "semibold" token collapses to
89
+ * medium so any remaining reference renders at 500. */
90
+ --font-weight-semibold: 500;
80
91
  --line-height-tight: 1.25;
81
92
  --line-height-normal: 1.5;
82
93
  --line-height-body: 1.7;
@@ -1,8 +1,8 @@
1
1
  /* Layout primitive tokens: page, section, stack, inline. */
2
2
 
3
3
  :root {
4
- --space-page-x: var(--phi-0);
5
- --space-page-y: var(--phi-0);
4
+ --space-page-x: var(--space-6); /* 24px — comfortable page gutter (4px grid) */
5
+ --space-page-y: var(--space-6); /* 24px */
6
6
  --space-section: var(--phi-0);
7
7
  --space-stack-xs: var(--space-1);
8
8
  --space-stack-sm: var(--space-2);
package/package.json CHANGED
@@ -1,7 +1,8 @@
1
1
  {
2
2
  "name": "@godxjp/ui",
3
- "version": "9.2.0",
3
+ "version": "11.0.0",
4
4
  "type": "module",
5
+ "packageManager": "pnpm@10.29.1",
5
6
  "sideEffects": false,
6
7
  "description": "@godxjp/ui — shared React UI framework (shadcn + Radix + Tailwind v4).",
7
8
  "files": [
@@ -182,10 +183,6 @@
182
183
  "types": "./dist/components/data-entry/transfer.d.ts",
183
184
  "import": "./dist/components/data-entry/transfer.js"
184
185
  },
185
- "./ui/combobox": {
186
- "types": "./dist/components/data-entry/combobox.d.ts",
187
- "import": "./dist/components/data-entry/combobox.js"
188
- },
189
186
  "./ui/command": {
190
187
  "types": "./dist/components/data-entry/command.d.ts",
191
188
  "import": "./dist/components/data-entry/command.js"
@@ -268,8 +265,9 @@
268
265
  "test": "vitest run",
269
266
  "test:watch": "vitest",
270
267
  "test:coverage": "vitest run --coverage",
271
- "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm test",
272
- "verify:release": "pnpm typecheck && pnpm lint && pnpm build && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm test",
268
+ "check:example-imports": "node scripts/check-example-imports.mjs",
269
+ "verify": "pnpm typecheck && pnpm lint && pnpm format && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm test",
270
+ "verify:release": "pnpm typecheck && pnpm lint && pnpm build && pnpm preview:build && pnpm check:example-imports && pnpm check:core-isolation && pnpm check:prop-vocabulary && pnpm check:token-tiers && pnpm check:mcp-sync && pnpm check:mcp-orphans && pnpm test",
273
271
  "check:mcp-sync": "node scripts/check-mcp-sync.mjs",
274
272
  "check:mcp-orphans": "node scripts/check-mcp-orphans.mjs",
275
273
  "check:prop-vocabulary": "node scripts/check-prop-vocabulary.mjs",
@@ -366,6 +364,7 @@
366
364
  "typescript-eslint": "^8.60.0",
367
365
  "vite": "^8.0.10",
368
366
  "vitest": "^4.1.5",
367
+ "vitest-axe": "1.0.0-pre.5",
369
368
  "zod": "^4.4.3"
370
369
  },
371
370
  "bin": {