You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
421 lines
12 KiB
421 lines
12 KiB
[data-combobox] {
|
|
display: inline-grid;
|
|
gap: var(--space-2);
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
font-family: var(--font-ui);
|
|
color: var(--color-content-primary);
|
|
}
|
|
|
|
[data-combobox-control],
|
|
[data-combobox-input],
|
|
[data-combobox-trigger],
|
|
[data-combobox-content] {
|
|
--_combobox-accent-track: var(--color-primary-track);
|
|
--_combobox-accent-border: var(--color-primary-border);
|
|
--_combobox-accent-text: var(--color-primary-text);
|
|
}
|
|
|
|
[data-combobox-control][data-color='secondary'],
|
|
[data-combobox-input][data-color='secondary'],
|
|
[data-combobox-trigger][data-color='secondary'],
|
|
[data-combobox-content][data-color='secondary'] {
|
|
--_combobox-accent-track: var(--color-secondary-track);
|
|
--_combobox-accent-border: var(--color-secondary-border);
|
|
--_combobox-accent-text: var(--color-secondary-text);
|
|
}
|
|
|
|
[data-combobox-control][data-color='neutral'],
|
|
[data-combobox-input][data-color='neutral'],
|
|
[data-combobox-trigger][data-color='neutral'],
|
|
[data-combobox-content][data-color='neutral'] {
|
|
--_combobox-accent-track: var(--color-neutral-track);
|
|
--_combobox-accent-border: var(--color-neutral-border);
|
|
--_combobox-accent-text: var(--color-neutral-text);
|
|
}
|
|
|
|
[data-combobox-control][data-color='affirm'],
|
|
[data-combobox-input][data-color='affirm'],
|
|
[data-combobox-trigger][data-color='affirm'],
|
|
[data-combobox-content][data-color='affirm'] {
|
|
--_combobox-accent-track: var(--color-affirm-track);
|
|
--_combobox-accent-border: var(--color-affirm-border);
|
|
--_combobox-accent-text: var(--color-affirm-text);
|
|
}
|
|
|
|
[data-combobox-control][data-color='fulfill'],
|
|
[data-combobox-input][data-color='fulfill'],
|
|
[data-combobox-trigger][data-color='fulfill'],
|
|
[data-combobox-content][data-color='fulfill'] {
|
|
--_combobox-accent-track: var(--color-fulfill-track);
|
|
--_combobox-accent-border: var(--color-fulfill-border);
|
|
--_combobox-accent-text: var(--color-fulfill-text);
|
|
}
|
|
|
|
[data-combobox-control][data-color='risk'],
|
|
[data-combobox-input][data-color='risk'],
|
|
[data-combobox-trigger][data-color='risk'],
|
|
[data-combobox-content][data-color='risk'] {
|
|
--_combobox-accent-track: var(--color-risk-track);
|
|
--_combobox-accent-border: var(--color-risk-border);
|
|
--_combobox-accent-text: var(--color-risk-text);
|
|
}
|
|
|
|
[data-combobox-control][data-color='threat'],
|
|
[data-combobox-input][data-color='threat'],
|
|
[data-combobox-trigger][data-color='threat'],
|
|
[data-combobox-content][data-color='threat'] {
|
|
--_combobox-accent-track: var(--color-threat-track);
|
|
--_combobox-accent-border: var(--color-threat-border);
|
|
--_combobox-accent-text: var(--color-threat-text);
|
|
}
|
|
|
|
[data-combobox-control][data-color='loss'],
|
|
[data-combobox-input][data-color='loss'],
|
|
[data-combobox-trigger][data-color='loss'],
|
|
[data-combobox-content][data-color='loss'] {
|
|
--_combobox-accent-track: var(--color-loss-track);
|
|
--_combobox-accent-border: var(--color-loss-border);
|
|
--_combobox-accent-text: var(--color-loss-text);
|
|
}
|
|
|
|
[data-combobox-control] {
|
|
--_combobox-control-height: var(--control-height-md);
|
|
--_combobox-control-px: var(--space-3);
|
|
--_combobox-control-gap: var(--space-2);
|
|
--_combobox-font-size: var(--font-size-sm);
|
|
|
|
box-sizing: border-box;
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--_combobox-control-gap);
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
min-block-size: var(--_combobox-control-height);
|
|
padding-inline: var(--_combobox-control-px);
|
|
border: var(--border-width) solid var(--color-border-default);
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-surface-default);
|
|
box-shadow: var(--shadow-xs);
|
|
color: var(--color-content-primary);
|
|
font-size: var(--_combobox-font-size);
|
|
line-height: var(--leading-ui);
|
|
transition:
|
|
background var(--duration-fast) var(--ease-default),
|
|
border-color var(--duration-fast) var(--ease-default),
|
|
box-shadow var(--duration-fast) var(--ease-default);
|
|
}
|
|
|
|
[data-combobox-control][data-size='sm'] {
|
|
--_combobox-control-height: var(--control-height-sm);
|
|
--_combobox-control-px: var(--space-2-5);
|
|
--_combobox-control-gap: var(--space-1-5);
|
|
--_combobox-font-size: var(--font-size-xs);
|
|
}
|
|
|
|
[data-combobox-control][data-size='lg'] {
|
|
--_combobox-control-height: var(--control-height-lg);
|
|
--_combobox-control-px: var(--space-3-5);
|
|
--_combobox-control-gap: var(--space-2-5);
|
|
--_combobox-font-size: var(--font-size-md);
|
|
}
|
|
|
|
[data-combobox-control][data-variant='outline'] {
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-combobox-control][data-variant='ghost'] {
|
|
border-color: transparent;
|
|
background: transparent;
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-combobox-control]:has([data-combobox-input]:focus-visible),
|
|
[data-combobox-control]:has([data-combobox-trigger]:focus-visible),
|
|
[data-combobox-control]:has([data-state='open']) {
|
|
border-color: var(--_combobox-accent-border);
|
|
box-shadow:
|
|
0 0 0 var(--focus-ring-offset) var(--color-surface-default),
|
|
0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
}
|
|
|
|
[data-combobox-control]:has([data-disabled]),
|
|
[data-combobox][data-disabled] [data-combobox-control] {
|
|
border-color: var(--color-border-subtle);
|
|
background: var(--color-surface-raised);
|
|
color: var(--color-content-disabled);
|
|
box-shadow: none;
|
|
}
|
|
|
|
[data-combobox-input] {
|
|
box-sizing: border-box;
|
|
flex: 1 1 auto;
|
|
inline-size: 100%;
|
|
min-inline-size: 0;
|
|
border: 0;
|
|
background: transparent;
|
|
color: inherit;
|
|
font: inherit;
|
|
line-height: var(--leading-ui);
|
|
outline: none;
|
|
}
|
|
|
|
[data-combobox-input]::placeholder {
|
|
color: var(--color-content-muted);
|
|
}
|
|
|
|
[data-combobox-input]:disabled {
|
|
color: var(--color-content-disabled);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
[data-combobox-input]:not([data-combobox-control] [data-combobox-input]) {
|
|
min-block-size: var(--control-height-md);
|
|
padding-inline: var(--space-3);
|
|
border: var(--border-width) solid var(--color-border-default);
|
|
border-radius: var(--radius-md);
|
|
background: var(--color-surface-default);
|
|
box-shadow: var(--shadow-xs);
|
|
}
|
|
|
|
[data-combobox-trigger] {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--control-height-xs);
|
|
block-size: var(--control-height-xs);
|
|
padding: 0;
|
|
border: 0;
|
|
border-radius: var(--radius-full);
|
|
background: transparent;
|
|
color: var(--color-content-secondary);
|
|
font: inherit;
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition:
|
|
background var(--duration-fast) var(--ease-default),
|
|
color var(--duration-fast) var(--ease-default),
|
|
transform var(--duration-fast) var(--ease-default);
|
|
}
|
|
|
|
[data-combobox-trigger]:hover:not(:disabled):not([data-disabled]) {
|
|
background: var(--color-surface-raised);
|
|
color: var(--color-content-primary);
|
|
}
|
|
|
|
[data-combobox-trigger]:focus-visible {
|
|
box-shadow:
|
|
0 0 0 var(--focus-ring-offset) var(--color-surface-default),
|
|
0 0 0 calc(var(--focus-ring-offset) + var(--focus-ring-width)) var(--focus-ring-color);
|
|
}
|
|
|
|
[data-combobox-trigger][data-disabled],
|
|
[data-combobox-trigger]:disabled {
|
|
color: var(--color-content-disabled);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
[data-combobox-indicator] {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--icon-size-sm);
|
|
block-size: var(--icon-size-sm);
|
|
color: currentColor;
|
|
transition: transform var(--duration-fast) var(--ease-default);
|
|
}
|
|
|
|
[data-combobox-trigger][data-state='open'] [data-combobox-indicator] {
|
|
transform: rotate(180deg);
|
|
color: var(--_combobox-accent-text);
|
|
}
|
|
|
|
[data-floating-wrapper]:has(> [data-combobox-content]) {
|
|
z-index: 80;
|
|
}
|
|
|
|
[data-combobox-content] {
|
|
--_combobox-content-py: var(--space-1-5);
|
|
--_combobox-content-px: var(--space-1-5);
|
|
--_combobox-font-size: var(--font-size-sm);
|
|
--_combobox-content-width: var(--_combobox-match-anchor-width, 14rem);
|
|
|
|
box-sizing: border-box;
|
|
inline-size: min(var(--_combobox-content-width), calc(100vw - var(--space-4)));
|
|
min-inline-size: min(14rem, calc(100vw - var(--space-4)));
|
|
max-inline-size: min(28rem, calc(100vw - var(--space-4)));
|
|
max-block-size: min(22rem, var(--floating-available-height, 100dvh));
|
|
padding: var(--_combobox-content-py) var(--_combobox-content-px);
|
|
overflow: hidden;
|
|
border: var(--border-width) solid var(--color-border-default);
|
|
border-radius: var(--radius-lg);
|
|
background: var(--color-surface-overlay);
|
|
box-shadow: var(--shadow-lg);
|
|
color: var(--color-content-primary);
|
|
font-family: var(--font-ui);
|
|
font-size: var(--_combobox-font-size);
|
|
line-height: var(--leading-ui);
|
|
outline: none;
|
|
transform-origin: var(--floating-transform-origin, center);
|
|
}
|
|
|
|
[data-combobox-content][data-size='sm'] {
|
|
--_combobox-content-py: var(--space-1);
|
|
--_combobox-content-px: var(--space-1);
|
|
--_combobox-font-size: var(--font-size-xs);
|
|
}
|
|
|
|
[data-combobox-content][data-size='lg'] {
|
|
--_combobox-content-py: var(--space-2);
|
|
--_combobox-content-px: var(--space-2);
|
|
--_combobox-font-size: var(--font-size-md);
|
|
}
|
|
|
|
[data-combobox-content][data-variant='outline'] {
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
[data-combobox-content][data-variant='ghost'] {
|
|
border-color: transparent;
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
[data-combobox-content][data-state='open'] {
|
|
animation: combobox-content-in var(--duration-normal) var(--ease-out) both;
|
|
}
|
|
|
|
[data-combobox-content][data-state='closed'] {
|
|
animation: combobox-content-out var(--duration-fast) var(--ease-default) both;
|
|
}
|
|
|
|
@keyframes combobox-content-in {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-2px) scale(0.98);
|
|
}
|
|
}
|
|
|
|
@keyframes combobox-content-out {
|
|
to {
|
|
opacity: 0;
|
|
transform: translateY(-2px) scale(0.98);
|
|
}
|
|
}
|
|
|
|
[data-combobox-viewport] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-0-5);
|
|
max-block-size: calc(22rem - (var(--_combobox-content-py) * 2));
|
|
overflow: auto;
|
|
padding: var(--space-0-5);
|
|
}
|
|
|
|
[data-combobox-group] {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--space-0-5);
|
|
padding-block: var(--space-1);
|
|
}
|
|
|
|
[data-combobox-group-heading] {
|
|
padding: var(--space-1) var(--space-2);
|
|
color: var(--color-content-muted);
|
|
font-family: var(--font-ui);
|
|
font-size: var(--font-size-xs);
|
|
font-weight: var(--font-weight-semibold);
|
|
line-height: var(--leading-ui);
|
|
letter-spacing: 0.04em;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
[data-combobox-separator] {
|
|
block-size: var(--border-width);
|
|
margin-block: var(--space-1);
|
|
background: var(--color-border-subtle);
|
|
}
|
|
|
|
[data-combobox-item] {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--space-2);
|
|
min-inline-size: 0;
|
|
min-block-size: var(--control-height-sm);
|
|
padding-inline: var(--space-2);
|
|
border-radius: var(--radius-md);
|
|
color: var(--color-content-primary);
|
|
cursor: pointer;
|
|
outline: none;
|
|
transition:
|
|
background var(--duration-fast) var(--ease-default),
|
|
color var(--duration-fast) var(--ease-default);
|
|
}
|
|
|
|
[data-combobox-item][data-highlighted] {
|
|
background: var(--color-surface-raised);
|
|
color: var(--color-content-primary);
|
|
}
|
|
|
|
[data-combobox-item][data-state='checked'] {
|
|
background: var(--_combobox-accent-track);
|
|
color: var(--_combobox-accent-text);
|
|
}
|
|
|
|
[data-combobox-item][data-disabled] {
|
|
color: var(--color-content-disabled);
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
[data-combobox-item-indicator] {
|
|
display: inline-flex;
|
|
flex: 0 0 auto;
|
|
align-items: center;
|
|
justify-content: center;
|
|
inline-size: var(--icon-size-sm);
|
|
block-size: var(--icon-size-sm);
|
|
color: currentColor;
|
|
opacity: 0;
|
|
transform: scale(0.75);
|
|
transition:
|
|
opacity var(--duration-fast) var(--ease-default),
|
|
transform var(--duration-fast) var(--ease-default);
|
|
}
|
|
|
|
[data-combobox-item][data-state='checked'] [data-combobox-item-indicator] {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
|
|
[data-combobox-arrow] svg {
|
|
display: block;
|
|
overflow: visible;
|
|
}
|
|
|
|
[data-combobox-arrow] polygon {
|
|
fill: var(--color-surface-overlay);
|
|
stroke: none;
|
|
}
|
|
|
|
[data-combobox-arrow] path {
|
|
stroke: var(--color-border-default);
|
|
stroke-width: var(--border-width);
|
|
stroke-linecap: round;
|
|
stroke-linejoin: round;
|
|
vector-effect: non-scaling-stroke;
|
|
}
|
|
|
|
@media (prefers-reduced-motion: reduce) {
|
|
[data-combobox-control],
|
|
[data-combobox-trigger],
|
|
[data-combobox-indicator],
|
|
[data-combobox-content],
|
|
[data-combobox-item],
|
|
[data-combobox-item-indicator] {
|
|
animation: none;
|
|
transition: none;
|
|
}
|
|
}
|