@godxjp/ui 32.8.0 → 32.10.1

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 (48) hide show
  1. package/DESIGN.md +11 -3
  2. package/README.md +5 -5
  3. package/agent/DESIGN.md +11 -3
  4. package/agent/START-HERE.md +9 -7
  5. package/agent/components/AppShell.json +1 -0
  6. package/agent/components/BlockEditor.json +1 -0
  7. package/agent/components/PageContainer.json +1 -0
  8. package/agent/components/Progress.json +3 -3
  9. package/agent/components/SearchInput.json +1 -0
  10. package/agent/components/Topbar.json +2 -0
  11. package/agent/components/TopbarItem.json +1 -0
  12. package/agent/components/TopbarSearch.json +49 -0
  13. package/agent/components/Tree.json +1 -0
  14. package/agent/components-index.json +5 -0
  15. package/agent/components.json +60 -3
  16. package/agent/index.json +7 -7
  17. package/agent/llms.txt +7 -7
  18. package/agent/tokens.json +39 -3
  19. package/dist/components/data-display/progress.d.ts +12 -6
  20. package/dist/components/data-display/progress.js +1 -1
  21. package/dist/components/data-display/tree.js +39 -0
  22. package/dist/components/layout/breadcrumb.js +2 -2
  23. package/dist/components/layout/index.d.ts +2 -0
  24. package/dist/components/layout/index.js +2 -0
  25. package/dist/components/layout/page-container.js +2 -2
  26. package/dist/components/layout/topbar-search.d.ts +12 -0
  27. package/dist/components/layout/topbar-search.js +87 -0
  28. package/dist/contracts/measurement.json +1 -1
  29. package/dist/i18n/messages/en.json +1 -0
  30. package/dist/i18n/messages/ja.json +1 -0
  31. package/dist/i18n/messages/vi.json +1 -0
  32. package/dist/props/components/layout.prop.d.ts +22 -0
  33. package/dist/props/registry.d.ts +9 -0
  34. package/dist/props/registry.js +16 -0
  35. package/dist/styles/card-layout.css +1 -1
  36. package/dist/styles/data-display-layout.css +37 -2
  37. package/dist/styles/dialog-layout.css +2 -0
  38. package/dist/styles/layers.json +7 -1
  39. package/dist/styles/navigation-layout.css +3 -0
  40. package/dist/styles/shell-layout.css +123 -2
  41. package/dist/styles.css +1 -1
  42. package/dist/tokens/components/card.css +3 -1
  43. package/dist/tokens/components/data-display.css +2 -0
  44. package/dist/tokens/components/shell.css +7 -0
  45. package/package.json +2 -2
  46. package/scripts/_agent-setup.mjs +10 -5
  47. package/scripts/cli.mjs +16 -7
  48. package/scripts/visual-audit.mjs +1412 -92
package/dist/styles/shell-layout.css CHANGED
@@ -1653,9 +1653,9 @@
1653
1653
  color: var(--sidebar-section-label-foreground, hsl(var(--muted-foreground)));
1654
1654
  font-size: var(--sidebar-section-label-font-size);
1655
1655
  font-weight: 700;
1656
- letter-spacing: 0.08em;
1656
+ letter-spacing: var(--sidebar-section-label-letter-spacing);
1657
1657
  line-height: 1.2;
1658
- text-transform: uppercase;
1658
+ text-transform: var(--sidebar-section-label-letter-case);
1659
1659
  }
1660
1660
 
1661
1661
  .sb-nav {
@@ -2085,6 +2085,127 @@
2085
2085
  justify-content: center;
2086
2086
  }
2087
2087
 
2088
+ .ui-topbar-search,
2089
+ .ui-topbar-search-panel {
2090
+ display: flex;
2091
+ align-self: stretch;
2092
+ align-items: center;
2093
+ gap: var(--topbar-gap);
2094
+ }
2095
+
2096
+ .ui-topbar-search-panel > .ui-search-input {
2097
+ inline-size: var(--topbar-search-inline-size);
2098
+ flex: 0 1 auto;
2099
+ }
2100
+
2101
+ .ui-topbar-search .ui-search-input-control {
2102
+ min-inline-size: calc(
2103
+ var(--search-input-start-padding) + var(--topbar-search-min-text-inline-size) +
2104
+ max(
2105
+ var(--search-input-end-padding),
2106
+ var(--search-input-end-padding) - var(--control-icon-size) - var(--control-gap) + 6ch
2107
+ )
2108
+ );
2109
+ }
2110
+
2111
+ .app-topbar:has(.ui-topbar-search[data-open]),
2112
+ .ui-topbar:not(.app-topbar .ui-topbar):has(.ui-topbar-search[data-open]) {
2113
+ position: relative;
2114
+ }
2115
+
2116
+ @media (width >= 40rem) {
2117
+ .ui-topbar-search[data-collapse-below="sm"]
2118
+ :is(.ui-topbar-search-trigger, .ui-topbar-search-close) {
2119
+ display: none;
2120
+ }
2121
+ }
2122
+ @media (width >= 48rem) {
2123
+ .ui-topbar-search[data-collapse-below="md"]
2124
+ :is(.ui-topbar-search-trigger, .ui-topbar-search-close) {
2125
+ display: none;
2126
+ }
2127
+ }
2128
+ @media (width >= 64rem) {
2129
+ .ui-topbar-search[data-collapse-below="lg"]
2130
+ :is(.ui-topbar-search-trigger, .ui-topbar-search-close) {
2131
+ display: none;
2132
+ }
2133
+ }
2134
+ @media (width >= 80rem) {
2135
+ .ui-topbar-search[data-collapse-below="xl"]
2136
+ :is(.ui-topbar-search-trigger, .ui-topbar-search-close) {
2137
+ display: none;
2138
+ }
2139
+ }
2140
+ @media (width < 40rem) {
2141
+ .ui-topbar-search[data-collapse-below="sm"]:not([data-open]) .ui-topbar-search-panel {
2142
+ display: none;
2143
+ }
2144
+ .ui-topbar-search[data-collapse-below="sm"][data-open] .ui-topbar-search-panel {
2145
+ position: absolute;
2146
+ z-index: 1;
2147
+ inset: 0;
2148
+ padding-inline: var(--app-shell-bar-inset-compact);
2149
+ background: var(--app-shell-bar-background, hsl(var(--card) / var(--card-alpha, 100%)));
2150
+ }
2151
+ .ui-topbar-search[data-collapse-below="sm"][data-open]
2152
+ .ui-topbar-search-panel
2153
+ > .ui-search-input {
2154
+ flex: 1 1 auto;
2155
+ }
2156
+ }
2157
+ @media (width < 48rem) {
2158
+ .ui-topbar-search[data-collapse-below="md"]:not([data-open]) .ui-topbar-search-panel {
2159
+ display: none;
2160
+ }
2161
+ .ui-topbar-search[data-collapse-below="md"][data-open] .ui-topbar-search-panel {
2162
+ position: absolute;
2163
+ z-index: 1;
2164
+ inset: 0;
2165
+ padding-inline: var(--app-shell-bar-inset-compact);
2166
+ background: var(--app-shell-bar-background, hsl(var(--card) / var(--card-alpha, 100%)));
2167
+ }
2168
+ .ui-topbar-search[data-collapse-below="md"][data-open]
2169
+ .ui-topbar-search-panel
2170
+ > .ui-search-input {
2171
+ flex: 1 1 auto;
2172
+ }
2173
+ }
2174
+ @media (width < 64rem) {
2175
+ .ui-topbar-search[data-collapse-below="lg"]:not([data-open]) .ui-topbar-search-panel {
2176
+ display: none;
2177
+ }
2178
+ .ui-topbar-search[data-collapse-below="lg"][data-open] .ui-topbar-search-panel {
2179
+ position: absolute;
2180
+ z-index: 1;
2181
+ inset: 0;
2182
+ padding-inline: var(--app-shell-bar-inset-compact);
2183
+ background: var(--app-shell-bar-background, hsl(var(--card) / var(--card-alpha, 100%)));
2184
+ }
2185
+ .ui-topbar-search[data-collapse-below="lg"][data-open]
2186
+ .ui-topbar-search-panel
2187
+ > .ui-search-input {
2188
+ flex: 1 1 auto;
2189
+ }
2190
+ }
2191
+ @media (width < 80rem) {
2192
+ .ui-topbar-search[data-collapse-below="xl"]:not([data-open]) .ui-topbar-search-panel {
2193
+ display: none;
2194
+ }
2195
+ .ui-topbar-search[data-collapse-below="xl"][data-open] .ui-topbar-search-panel {
2196
+ position: absolute;
2197
+ z-index: 1;
2198
+ inset: 0;
2199
+ padding-inline: var(--app-shell-bar-inset-compact);
2200
+ background: var(--app-shell-bar-background, hsl(var(--card) / var(--card-alpha, 100%)));
2201
+ }
2202
+ .ui-topbar-search[data-collapse-below="xl"][data-open]
2203
+ .ui-topbar-search-panel
2204
+ > .ui-search-input {
2205
+ flex: 1 1 auto;
2206
+ }
2207
+ }
2208
+
2088
2209
  :is(.ui-topbar-start, .ui-topbar-center, .ui-topbar-end) > *:has(.ui-topbar-item) {
2089
2210
  align-self: stretch;
2090
2211
  }