<div id="selector-20197-55134" class="selector">
<div class="selector__label" id="selector-20197-55134-label">
What should your tool do?
</div>
<ul class="selector__items" aria-labelledby="selector-20197-55134-label">
<li class="selector__item">
<a class="selector__link" href="#">
<span class="selector__link-text">Show all</span>
</a>
</li>
<li class="selector__item">
<a class="selector__link selector__link--orange" href="#">
<span class="selector__link-text">Analysis</span>
</a>
</li>
<li class="selector__item">
<a class="selector__link selector__link--yellow" aria-current="true" href="#">
<span class="selector__link-text">Broadcast</span>
</a>
</li>
<li class="selector__item">
<a class="selector__link selector__link--green" href="#">
<span class="selector__link-text">DJ-Tool</span>
</a>
</li>
<li class="selector__item">
<a class="selector__link selector__link--steel" href="#">
<span class="selector__link-text">Music</span>
</a>
</li>
</ul>
</div>
{% set id = id ??? html_id('selector') %}
{% set labelId = label|default ? 'label' | namespaceInputId(id) %}
<div {{ html_attributes({
id: id ?? false,
class: 'selector',
}, attrs ?? {}) }}>
{% if label|default %}
<div class="selector__label" id="{{ labelId }}">
{{ label }}
</div>
{% endif %}
<ul {{ html_attributes({
class: 'selector__items',
'aria-labelledby': labelId,
'aria-label': not labelId ? 'Select an item' | t('site'),
}) }}>
{% for item in items %}
<li class="selector__item">
<a {{ html_attributes({
class: html_cva(
base: 'selector__link',
variants: {
color: {
steel: 'selector__link--steel',
yellow: 'selector__link--yellow',
orange: 'selector__link--orange',
green: 'selector__link--green',
},
},
).apply({ color: item.color ?? null }),
'aria-current': item.active|default ? 'true',
}, link_attributes(item.link), item.attrs ?? {}) }}>
<span class="selector__link-text">{{ item.text }}</span>
</a>
</li>
{% endfor %}
</ul>
</div>
{
"label": "What should your tool do?",
"items": [
{
"text": "Show all",
"link": "#"
},
{
"text": "Analysis",
"link": "#",
"color": "orange"
},
{
"text": "Broadcast",
"link": "#",
"color": "yellow",
"active": true
},
{
"text": "DJ-Tool",
"link": "#",
"color": "green"
},
{
"text": "Music",
"link": "#",
"color": "steel"
}
]
}
.selector {
align-items: var(--selector-align, center);
container-name: selector;
container-type: inline-size;
display: flex;
flex-direction: column;
inline-size: 100%;
row-gap: 1.6rem;
}
.selector__label {
color: var(--color-gray-800);
font-size: var(--font-size-default);
font-style: italic;
line-height: var(--line-height-narrow);
text-align: center;
}
.selector__items {
--_selector-items-block-size: clamp(5rem, 13cqi, 7.2rem);
--_selector-items-border-radius: calc(var(--_selector-items-block-size) / 2);
--_selector-item-indicator-size: min(3.5cqi, 1.8rem);
--_selector-item-indicator-offset: -50%;
--_selector-link-color: var(--color-steel-800);
background-color: var(--color-white);
block-size: var(--_selector-items-block-size);
border-radius: var(--_selector-items-border-radius);
box-shadow: var(--box-shadow-xxl);
display: flex;
flex-shrink: 0;
font-size: calc(var(--_selector-items-block-size) / 4);
font-weight: var(--font-weight-bold);
inline-size: max-content;
margin-block-end: calc(var(--_selector-item-indicator-size) * 2);
}
.selector__item {
block-size: 100%;
position: relative;
&:is(:first-child) {
--_selector-item-indicator-offset: -37.5%;
}
&:is(:last-child) {
--_selector-item-indicator-offset: -62.5%;
}
&:not(:first-child) {
border-inline-start: 1px solid var(--color-gray-100);
}
&:has(:hover, :focus-visible, [aria-current='true'])::after {
border-color: var(--_selector-link-color);
}
&::after {
aspect-ratio: 1;
border: calc(var(--_selector-item-indicator-size) * 0.25) solid var(--color-gray-300);
border-radius: 50%;
content: '';
display: flow-root;
inline-size: var(--_selector-item-indicator-size);
inset-block-end: calc(var(--_selector-item-indicator-size) * -1.75);
inset-inline-start: 50%;
position: absolute;
transition-property: border-color;
translate: var(--_selector-item-indicator-offset) 0;
}
}
.selector__item:has(.selector__link--steel) {
--_selector-link-color: var(--color-steel-500);
}
.selector__item:has(.selector__link--green) {
--_selector-link-color: var(--color-green-500);
}
.selector__item:has(.selector__link--yellow) {
--_selector-link-color: var(--color-yellow-500);
}
.selector__item:has(.selector__link--orange) {
--_selector-link-color: var(--color-orange-500);
}
.selector__link {
--_selector-link-line-scale: 1;
--_selector-link-padding-inline: calc(var(--_selector-items-block-size) * 0.25);
align-items: center;
block-size: 100%;
display: flex;
overflow: clip;
padding-inline: var(--_selector-link-padding-inline);
position: relative;
.selector__item:first-child & {
border-end-start-radius: var(--_selector-items-border-radius);
border-start-start-radius: var(--_selector-items-border-radius);
padding-inline-start: calc(var(--_selector-link-padding-inline) * 1.25);
}
.selector__item:last-child & {
border-end-end-radius: var(--_selector-items-border-radius);
border-start-end-radius: var(--_selector-items-border-radius);
padding-inline-end: calc(var(--_selector-link-padding-inline) * 1.25);
}
&:is(:hover, :focus-visible, [aria-current='true']) {
--_selector-link-line-scale: 1.5;
@container selector (inline-size >= 50rem) {
--_selector-link-line-scale: 2.5;
}
}
&::before {
background-color: var(--_selector-link-color);
block-size: 0.5rem;
content: '';
inset-block-end: 0;
inset-inline: 0;
position: absolute;
scale: 1 var(--_selector-link-line-scale);
transform-origin: 100% 100%;
transition-property: scale;
}
}
.selector__link-text {
color: var(--color-steel-800);
}
No notes defined.