EnterpriseAI/ClosedCode
1
0
Fork 0
Code Issues Pull Requests Actions 29 Packages Projects Releases Wiki Activity

fix(data): select component ux

Browse Source
This commit is contained in:
Adam
2026-07-13 12:59:37 -05:00
parent b7fdb595df
commit f026c1422c
8 changed files with 241 additions and 252 deletions
Download Patch File Download Diff File Expand all files Collapse all files
packages/stats/app/src/routes/index.css
+127 -134
View File
@@ -2900,29 +2900,13 @@
color: var(--stats-faint);
}
[data-page="stats"] [data-component="lab-hero-menu"] {
position: relative;
display: inline-block;
}
[data-page="stats"] [data-component="lab-hero-menu"] summary {
cursor: pointer;
list-style: none;
}
[data-page="stats"] [data-component="lab-hero-menu"] summary::-webkit-details-marker {
display: none;
}
[data-page="stats"] [data-slot="lab-hero-crumb"][data-current="true"] {
padding-right: 4px;
color: var(--stats-text);
}
[data-page="stats"] a[data-slot="lab-hero-crumb"]:hover,
[data-page="stats"] a[data-slot="lab-hero-crumb"]:focus-visible,
[data-page="stats"] summary[data-slot="lab-hero-crumb"]:hover,
[data-page="stats"] summary[data-slot="lab-hero-crumb"]:focus-visible {
[data-page="stats"] a[data-slot="lab-hero-crumb"]:focus-visible {
color: var(--stats-text);
outline: none;
text-decoration: none;
@@ -2941,57 +2925,6 @@
color: currentColor;
}
[data-page="stats"] [data-component="lab-hero-menu"][open] [data-slot="lab-hero-crumb"] svg {
transform: rotate(180deg);
}
[data-page="stats"] [data-slot="lab-hero-options"] {
position: absolute;
top: calc(100% + 8px);
left: 50%;
z-index: 5;
display: grid;
width: max-content;
min-width: 180px;
max-width: min(280px, calc(100vw - 48px));
max-height: min(360px, calc(100vh - 160px));
padding: 6px;
overflow: auto;
border: 1px solid var(--stats-line);
background: var(--stats-bg);
box-shadow: 0 12px 32px #0000001a;
transform: translateX(-50%);
}
[data-page="stats"] [data-slot="lab-hero-option"] {
display: flex;
align-items: center;
min-width: 0;
height: 30px;
padding: 0 8px;
overflow: hidden;
color: var(--stats-muted);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="lab-hero-option"]:hover,
[data-page="stats"] [data-slot="lab-hero-option"]:focus-visible {
background: var(--stats-layer-2);
color: var(--stats-text);
outline: none;
text-decoration: none;
}
[data-page="stats"] [data-slot="lab-hero-option"][data-current="true"] {
background: var(--stats-layer-2);
color: var(--stats-text);
}
[data-page="stats"] [data-slot="lab-hero-separator"] {
display: inline-flex;
align-items: center;
@@ -3125,25 +3058,134 @@
color: var(--stats-text);
}
[data-page="stats"] [data-component="model-hero-menu"] {
position: relative;
display: inline-block;
[data-page="stats"] [data-component="stats-breadcrumb-select"] {
display: inline-flex;
min-width: 0;
}
[data-page="stats"] [data-component="model-hero-menu"] summary {
[data-page="stats"] [data-slot="stats-breadcrumb-select-trigger"] {
display: inline-flex;
align-items: center;
gap: 4px;
max-width: min(100%, 280px);
height: 24px;
box-sizing: border-box;
margin: 0;
padding: 0 4px 0 8px;
overflow: hidden;
border: 0;
border-radius: 0;
appearance: none;
background: var(--stats-layer-2);
color: var(--stats-hero-muted);
font: inherit;
font-size: 13px;
font-weight: 500;
line-height: 1.1;
white-space: nowrap;
cursor: pointer;
list-style: none;
}
[data-page="stats"] [data-component="model-hero-menu"] summary::-webkit-details-marker {
display: none;
[data-page="stats"] [data-slot="stats-breadcrumb-select-trigger"][data-variant="lab"] {
color: var(--stats-faint);
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-trigger"][data-current="true"],
[data-page="stats"] [data-slot="stats-breadcrumb-select-trigger"]:hover,
[data-page="stats"] [data-slot="stats-breadcrumb-select-trigger"][data-expanded] {
color: var(--stats-text);
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-trigger"]:focus-visible {
color: var(--stats-text);
outline: 1px solid var(--stats-text);
outline-offset: 2px;
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-value"] {
min-width: 0;
overflow: hidden;
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-value"] span {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-icon"] {
display: inline-flex;
flex: 0 0 auto;
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-icon"] svg {
width: 16px;
height: 16px;
color: currentColor;
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-trigger"][data-expanded]
[data-slot="stats-breadcrumb-select-icon"] {
transform: rotate(180deg);
}
[data-page="stats"] [data-popper-positioner]:has([data-component="stats-breadcrumb-select-content"]) {
z-index: 20;
}
[data-page="stats"] [data-component="stats-breadcrumb-select-content"] {
z-index: 20;
width: max-content;
min-width: 180px;
max-width: min(360px, calc(100vw - 48px));
overflow: hidden;
border: 1px solid var(--stats-line);
background: var(--stats-bg);
box-shadow: 0 12px 32px #0000001a;
}
[data-page="stats"] [data-component="stats-breadcrumb-select-content"][data-variant="lab"] {
max-width: min(280px, calc(100vw - 48px));
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-listbox"] {
display: grid;
max-height: min(360px, calc(100vh - 160px));
box-sizing: border-box;
margin: 0;
padding: 6px;
overflow: auto;
list-style: none;
outline: none;
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-option"] {
display: flex;
align-items: center;
min-width: 0;
height: 30px;
box-sizing: border-box;
padding: 0 8px;
overflow: hidden;
color: var(--stats-muted);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
text-overflow: ellipsis;
white-space: nowrap;
cursor: pointer;
outline: none;
}
[data-page="stats"] [data-slot="stats-breadcrumb-select-option"][data-highlighted],
[data-page="stats"] [data-slot="stats-breadcrumb-select-option"][data-selected] {
background: var(--stats-layer-2);
color: var(--stats-text);
}
[data-page="stats"] a[data-slot="model-hero-crumb"]:hover,
[data-page="stats"] a[data-slot="model-hero-crumb"]:focus-visible,
[data-page="stats"] summary[data-slot="model-hero-crumb"]:hover,
[data-page="stats"] summary[data-slot="model-hero-crumb"]:focus-visible {
[data-page="stats"] a[data-slot="model-hero-crumb"]:focus-visible {
color: var(--stats-text);
outline: none;
text-decoration: none;
@@ -3162,57 +3204,6 @@
color: currentColor;
}
[data-page="stats"] [data-component="model-hero-menu"][open] [data-slot="model-hero-crumb"] svg {
transform: rotate(180deg);
}
[data-page="stats"] [data-slot="model-hero-options"] {
position: absolute;
top: calc(100% + 8px);
left: 50%;
z-index: 5;
display: grid;
width: max-content;
min-width: 180px;
max-width: min(360px, calc(100vw - 48px));
max-height: min(360px, calc(100vh - 160px));
padding: 6px;
overflow: auto;
border: 1px solid var(--stats-line);
background: var(--stats-bg);
box-shadow: 0 12px 32px #0000001a;
transform: translateX(-50%);
}
[data-page="stats"] [data-slot="model-hero-option"] {
display: flex;
align-items: center;
min-width: 0;
height: 30px;
padding: 0 8px;
overflow: hidden;
color: var(--stats-muted);
font-size: 13px;
font-weight: 500;
line-height: 1.2;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
[data-page="stats"] [data-slot="model-hero-option"]:hover,
[data-page="stats"] [data-slot="model-hero-option"]:focus-visible {
background: var(--stats-layer-2);
color: var(--stats-text);
outline: none;
text-decoration: none;
}
[data-page="stats"] [data-slot="model-hero-option"][data-current="true"] {
background: var(--stats-layer-2);
color: var(--stats-text);
}
[data-page="stats"] [data-slot="model-hero-separator"] {
display: inline-flex;
align-items: center;
@@ -5545,7 +5536,8 @@
color: var(--stats-hero-muted);
}
[data-page="stats"] [data-slot="compare-home-crumb"][data-current="true"] {
[data-page="stats"] [data-component="compare-home-breadcrumb"]
[data-slot="compare-home-crumb"][data-current="true"] {
color: var(--stats-text);
}
@@ -7892,6 +7884,11 @@
max-width: min(100%, 240px);
}
[data-page="stats"] [data-component="model-hero-breadcrumb"]
[data-slot="stats-breadcrumb-select-trigger"] {
max-width: min(100%, 240px);
}
[data-page="stats"] [data-slot="model-hero-title-row"] {
flex-wrap: wrap;
gap: 16px;
@@ -7983,10 +7980,6 @@
min-width: 48px;
}
[data-page="stats"] [data-slot="lab-hero-options"] {
max-width: calc(100vw - 48px);
}
[data-page="stats"] [data-component="lab-related-list"] {
grid-auto-columns: minmax(320px, 392px);
grid-auto-flow: column;