@flux-ui/components 3.0.0 → 3.1.0

package/src/component/FluxFormRadioGroup.vue

@@ -0,0 +1,53 @@
+<template>
+    <div
+        :class="clsx(
+            $style.formRadioGroup,
+            isInline && $style.isInline
+        )"
+        role="radiogroup"
+        :aria-label="ariaLabel">
+        <slot/>
+    </div>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import type { FluxFormInputBaseProps } from '@flux-ui/types';
+    import { clsx } from 'clsx';
+    import { provide, toRef, useId, type VNode } from 'vue';
+    import { useDisabled } from '~flux/components/composable';
+    import { FluxFormRadioGroupInjectionKey, type FluxFormRadioGroupValue } from '~flux/components/data';
+    import $style from '~flux/components/css/component/Form.module.scss';
+
+    const modelValue = defineModel<FluxFormRadioGroupValue>();
+
+    const {
+        disabled: componentDisabled,
+        error,
+        isReadonly,
+        name
+    } = defineProps<Pick<FluxFormInputBaseProps, 'disabled' | 'error' | 'isReadonly'> & {
+        readonly ariaLabel?: string;
+        readonly isInline?: boolean;
+        readonly name?: string;
+    }>();
+
+    defineSlots<{
+        default(): VNode[];
+    }>();
+
+    const disabled = useDisabled(toRef(() => componentDisabled));
+    const generatedName = useId();
+
+    provide(FluxFormRadioGroupInjectionKey, {
+        name: name ?? generatedName,
+        modelValue,
+        disabled,
+        isReadonly: toRef(() => isReadonly ?? false),
+        error: toRef(() => error),
+        select(value) {
+            modelValue.value = value;
+        }
+    });
+</script>

package/src/component/FluxQuantitySelector.vue

@@ -1,9 +1,9 @@
 <template>
     <FluxButtonGroup
-        :class="$style.quantitySelector"
+        :class="$style.formQuantitySelector"
         :aria-disabled="disabled ? true : undefined">
         <FluxSecondaryButton
-            :class="$style.quantitySelectorButton"
+            :class="$style.formQuantitySelectorButton"
             :disabled="disabled || modelValue <= min"
             icon-leading="minus"
             tabindex="-1"
@@ -12,7 +12,7 @@
         <input
             ref="input"
             v-model="modelValue"
-            :class="$style.quantitySelectorInput"
+            :class="$style.formQuantitySelectorInput"
             :style="{
                 width: `${width}px`
             }"
@@ -24,7 +24,7 @@
             :step="step"/>
 
         <FluxSecondaryButton
-            :class="$style.quantitySelectorButton"
+            :class="$style.formQuantitySelectorButton"
             :disabled="disabled || modelValue >= max"
             icon-leading="plus"
             tabindex="-1"

package/src/component/FluxSkeleton.vue

@@ -0,0 +1,46 @@
+<template>
+    <component
+        :is="is"
+        :class="clsx(
+            $style.skeleton,
+            variant === 'circle' && $style.isCircle,
+            variant === 'rectangle' && $style.isRectangle,
+            variant === 'rounded' && $style.isRounded,
+            variant === 'text' && $style.isText
+        )"
+        :style="style"
+        aria-hidden="true"/>
+</template>
+
+<script
+    lang="ts"
+    setup>
+    import { clsx } from 'clsx';
+    import { computed, type CSSProperties } from 'vue';
+    import $style from '~flux/components/css/component/Skeleton.module.scss';
+
+    const {
+        height,
+        is = 'div',
+        variant = 'text',
+        width
+    } = defineProps<{
+        readonly height?: string | number;
+        readonly is?: string;
+        readonly variant?: 'text' | 'circle' | 'rectangle' | 'rounded';
+        readonly width?: string | number;
+    }>();
+
+    const style = computed<CSSProperties>(() => ({
+        height: toSize(height),
+        width: toSize(width)
+    }));
+
+    function toSize(value: string | number | undefined): string | undefined {
+        if (value === undefined) {
+            return undefined;
+        }
+
+        return typeof value === 'number' ? `${value}px` : value;
+    }
+</script>

package/src/component/FluxToggle.vue

@@ -1,7 +1,7 @@
 <template>
     <label
         :class="clsx(
-            $style.toggle,
+            $style.formToggle,
             modelValue && $style.isChecked,
             disabled && $style.isDisabled,
             isReadonly && $style.isReadonly,
@@ -14,18 +14,18 @@
         :aria-invalid="error ? true : undefined">
         <FluxIcon
             v-if="iconOff"
-            :class="$style.toggleIconOff"
+            :class="$style.formToggleIconOff"
             :name="iconOff"
             :size="14"/>
 
         <FluxIcon
             v-if="iconOn"
-            :class="$style.toggleIconOn"
+            :class="$style.formToggleIconOn"
             :name="iconOn"
             :size="14"/>
 
         <input
-            :class="$style.toggleInput"
+            :class="$style.formToggleInput"
             :id="id"
             :disabled="disabled"
             type="checkbox"

package/src/component/index.ts

@@ -12,12 +12,13 @@ export { default as FluxBadgeStack } from './FluxBadgeStack.vue';
 export { default as FluxBorderBeam } from './FluxBorderBeam.vue';
 export { default as FluxBorderShine } from './FluxBorderShine.vue';
 export { default as FluxBoxedIcon } from './FluxBoxedIcon.vue';
+export { default as FluxBreadcrumb } from './FluxBreadcrumb.vue';
+export { default as FluxBreadcrumbItem } from './FluxBreadcrumbItem.vue';
 export { default as FluxButton } from './FluxButton.vue';
 export { default as FluxButtonGroup } from './FluxButtonGroup.vue';
 export { default as FluxButtonStack } from './FluxButtonStack.vue';
 export { default as FluxCalendar } from './FluxCalendar.vue';
 export { default as FluxCalendarItem } from './FluxCalendarItem.vue';
-export { default as FluxCheckbox } from './FluxCheckbox.vue';
 export { default as FluxChip } from './FluxChip.vue';
 export { default as FluxClickablePane } from './FluxClickablePane.vue';
 export { default as FluxCommandPalette } from './FluxCommandPalette.vue';
@@ -55,6 +56,8 @@ export { default as FluxFlyout } from './FluxFlyout.vue';
 export { default as FluxFocalPointEditor } from './FluxFocalPointEditor.vue';
 export { default as FluxFocalPointImage } from './FluxFocalPointImage.vue';
 export { default as FluxForm } from './FluxForm.vue';
+export { default as FluxFormCheckbox } from './FluxFormCheckbox.vue';
+export { default as FluxFormCheckboxGroup } from './FluxFormCheckboxGroup.vue';
 export { default as FluxFormColumn } from './FluxFormColumn.vue';
 export { default as FluxFormDateInput } from './FluxFormDateInput.vue';
 export { default as FluxFormDateRangeInput } from './FluxFormDateRangeInput.vue';
@@ -65,7 +68,10 @@ export { default as FluxFormGrid } from './FluxFormGrid.vue';
 export { default as FluxFormInput } from './FluxFormInput.vue';
 export { default as FluxFormInputAddition } from './FluxFormInputAddition.vue';
 export { default as FluxFormInputGroup } from './FluxFormInputGroup.vue';
+export { default as FluxFormNumberInput } from './FluxFormNumberInput.vue';
 export { default as FluxFormPinInput } from './FluxFormPinInput.vue';
+export { default as FluxFormRadio } from './FluxFormRadio.vue';
+export { default as FluxFormRadioGroup } from './FluxFormRadioGroup.vue';
 export { default as FluxFormRangeSlider } from './FluxFormRangeSlider.vue';
 export { default as FluxFormRow } from './FluxFormRow.vue';
 export { default as FluxFormSection } from './FluxFormSection.vue';
@@ -131,6 +137,7 @@ export { default as FluxSecondaryLinkButton } from './FluxSecondaryLinkButton.vu
 export { default as FluxSegmentedControl } from './FluxSegmentedControl.vue';
 export { default as FluxSegmentedControlItem } from './FluxSegmentedControlItem.vue';
 export { default as FluxSeparator } from './FluxSeparator.vue';
+export { default as FluxSkeleton } from './FluxSkeleton.vue';
 export { default as FluxSlideOver } from './FluxSlideOver.vue';
 export { default as FluxSnackbar } from './FluxSnackbar.vue';
 export { default as FluxSnackbarProvider } from './FluxSnackbarProvider.vue';

package/src/composable/index.ts

@@ -7,7 +7,9 @@ export { default as useDisabledInjection } from './useDisabledInjection';
 export { default as useExpandableGroupInjection } from './useExpandableGroupInjection';
 export { default as useFilterInjection } from './useFilterInjection';
 export { default as useFlyoutInjection } from './useFlyoutInjection';
+export { default as useFormCheckboxGroupInjection } from './useFormCheckboxGroupInjection';
 export { default as useFormFieldInjection } from './useFormFieldInjection';
+export { default as useFormRadioGroupInjection } from './useFormRadioGroupInjection';
 export { default as useKanbanInjection } from './useKanbanInjection';
 export { default as useSegmentedControlInjection } from './useSegmentedControlInjection';
 export { default as useTabBarInjection } from './useTabBarInjection';

package/src/composable/useFormCheckboxGroupInjection.ts

@@ -0,0 +1,6 @@
+import { inject } from 'vue';
+import { FluxFormCheckboxGroupInjectionKey } from '~flux/components/data';
+
+export default function () {
+    return inject(FluxFormCheckboxGroupInjectionKey, null);
+}

package/src/composable/useFormFieldInjection.ts

@@ -2,7 +2,11 @@ import { inject, useId } from 'vue';
 import { FluxFormFieldInjectionKey } from '~flux/components/data';
 
 export default function () {
-    return inject(FluxFormFieldInjectionKey, {
-        id: useId()
-    });
+    const field = inject(FluxFormFieldInjectionKey, null);
+
+    if (field?.registerControl) {
+        return {id: field.registerControl()};
+    }
+
+    return {id: field?.id ?? useId()};
 }

package/src/composable/useFormRadioGroupInjection.ts

@@ -0,0 +1,13 @@
+import { inject, ref } from 'vue';
+import { FluxFormRadioGroupInjectionKey, type FluxFormRadioGroupValue } from '~flux/components/data';
+
+export default function () {
+    return inject(FluxFormRadioGroupInjectionKey, {
+        name: '',
+        modelValue: ref<FluxFormRadioGroupValue | undefined>(undefined),
+        disabled: ref(false),
+        isReadonly: ref(false),
+        error: ref<string | null | undefined>(undefined),
+        select: () => undefined
+    });
+}

package/src/css/component/BorderBeam.module.scss

@@ -425,6 +425,11 @@ $pulse-outer-bloom: (
         $thin-w2: 14px;
         $thin-w3: 12px;
         $thin-w4: 10px;
+
+        // The light theme widens the last thin spike further for mono.
+        @if not $is-dark {
+            $thin-w4: 12px;
+        }
         $thin-h1: 42px;
         $thin-h2: 38px;
         $thin-h3: 40px;
@@ -487,6 +492,17 @@ $pulse-outer-bloom: (
     @return $grads;
 }
 
+// Gradients that reference animated custom properties (--beam-angle, --beam-x,
+// --beam-w, ...) must be declared directly on the layer that paints them.
+// Routing them through an intermediate custom property breaks per-frame
+// updates of the dependent value in Chromium and WebKit, which makes the
+// animation stutter.
+$rotate-highlight-light: string.unquote('conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100%)');
+$rotate-highlight-dark: string.unquote('conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(255, 255, 255, 0.1) 57%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.6) 63%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.6) 69%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0.1) 75%, transparent 78%, transparent 100%)');
+$rotate-bloom-light: string.unquote('conic-gradient(from var(--beam-angle), transparent 0%, transparent 58%, rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0.2) 67%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.6) 70.5%, rgba(0, 0, 0, 0.4) 71.5%, rgba(0, 0, 0, 0.2) 73%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.02) 78%, transparent 82%)');
+$rotate-bloom-dark: string.unquote('conic-gradient(from var(--beam-angle), transparent 0%, transparent 58%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 255, 255, 0.08) 65%, rgba(255, 255, 255, 0.2) 67%, rgba(255, 255, 255, 0.45) 69%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 70.5%, rgba(255, 255, 255, 0.45) 71.5%, rgba(255, 255, 255, 0.2) 73%, rgba(255, 255, 255, 0.08) 75%, rgba(255, 255, 255, 0.03) 78%, transparent 82%)');
+$line-highlight-light: string.unquote('radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%)');
+$line-highlight-dark: string.unquote('radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%)');
 $ring-mask: string.unquote('linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0)');
 $edge-fade-y: string.unquote('linear-gradient(white, transparent 28px, transparent calc(100% - 28px), white)');
 $edge-fade-x: string.unquote('linear-gradient(to right, white, transparent 28px, transparent calc(100% - 28px), white)');
@@ -532,18 +548,30 @@ $line-bloom-window: string.unquote('radial-gradient(ellipse calc(84px * var(--be
         --beam-rotate-inner: #{blobs(map.get($ring-colors, $palette), $ring-geometry, $inner-alpha, .9)};
         --beam-sm-blobs: #{blobs(map.get($sm-colors, $palette), $sm-geometry)};
         --beam-sm-inner: #{blobs(map.get($sm-colors, $palette), $sm-geometry, map.get($sm-inner-alphas, $palette))};
-        --beam-line-blobs: #{line-blobs(map.get($line-colors, $palette, light), $line-geometry-light)};
-        --beam-line-inner: #{line-blobs(map.get($line-inner-colors, $palette), $line-inner-geometry, $line-inner-alphas)};
-        --beam-line-bloom: #{line-bloom($palette, light)};
         --beam-pulse-ring: #{pulse-blobs(pulse-ring($palette))};
         --beam-pulse-inner-ring: #{pulse-blobs(pulse-ring-resized($palette))};
         --beam-pulse-inner-bloom: #{pulse-blobs-frozen(pulse-table($palette, $pulse-inner-bloom))};
         --beam-pulse-outer-core: #{pulse-blobs(pulse-table($palette, $pulse-outer-core))};
         --beam-pulse-outer-bloom: #{pulse-blobs-frozen(pulse-table($palette, $pulse-outer-bloom))};
 
-        [dark] & {
-            --beam-line-blobs: #{line-blobs(map.get($line-colors, $palette, dark), $line-geometry-dark)};
-            --beam-line-bloom: #{line-bloom($palette, dark)};
+        &.line::after {
+            background: #{$line-highlight-light}, #{line-blobs(map.get($line-colors, $palette, light), $line-geometry-light)};
+        }
+
+        &.line::before {
+            background: #{line-blobs(map.get($line-inner-colors, $palette), $line-inner-geometry, $line-inner-alphas)};
+        }
+
+        &.line > .bloom {
+            background: #{line-bloom($palette, light)};
+        }
+
+        [dark] &.line::after {
+            background: #{$line-highlight-dark}, #{line-blobs(map.get($line-colors, $palette, dark), $line-geometry-dark)};
+        }
+
+        [dark] &.line > .bloom {
+            background: #{line-bloom($palette, dark)};
         }
     }
 }
@@ -557,14 +585,6 @@ $line-bloom-window: string.unquote('radial-gradient(ellipse calc(84px * var(--be
 .sm {
     overflow: hidden;
 
-    --beam-rotate-highlight: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(0, 0, 0, 0.08) 57%, rgba(0, 0, 0, 0.2) 60%, rgba(0, 0, 0, 0.4) 63%, rgba(0, 0, 0, 0.55) 66%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.2) 72%, rgba(0, 0, 0, 0.08) 75%, transparent 78%, transparent 100%);
-    --beam-rotate-bloom: conic-gradient(from var(--beam-angle), transparent 0%, transparent 58%, rgba(0, 0, 0, 0.02) 62%, rgba(0, 0, 0, 0.08) 65%, rgba(0, 0, 0, 0.2) 67%, rgba(0, 0, 0, 0.4) 69%, rgba(0, 0, 0, 0.6) 70%, rgba(0, 0, 0, 0.6) 70.5%, rgba(0, 0, 0, 0.4) 71.5%, rgba(0, 0, 0, 0.2) 73%, rgba(0, 0, 0, 0.08) 75%, rgba(0, 0, 0, 0.02) 78%, transparent 82%);
-
-    [dark] & {
-        --beam-rotate-highlight: conic-gradient(from var(--beam-angle), transparent 0%, transparent 54%, rgba(255, 255, 255, 0.1) 57%, rgba(255, 255, 255, 0.3) 60%, rgba(255, 255, 255, 0.6) 63%, rgba(255, 255, 255, 0.75) 66%, rgba(255, 255, 255, 0.6) 69%, rgba(255, 255, 255, 0.3) 72%, rgba(255, 255, 255, 0.1) 75%, transparent 78%, transparent 100%);
-        --beam-rotate-bloom: conic-gradient(from var(--beam-angle), transparent 0%, transparent 58%, rgba(255, 255, 255, 0.03) 62%, rgba(255, 255, 255, 0.08) 65%, rgba(255, 255, 255, 0.2) 67%, rgba(255, 255, 255, 0.45) 69%, rgba(255, 255, 255, 0.85) 70%, rgba(255, 255, 255, 0.85) 70.5%, rgba(255, 255, 255, 0.45) 71.5%, rgba(255, 255, 255, 0.2) 73%, rgba(255, 255, 255, 0.08) 75%, rgba(255, 255, 255, 0.03) 78%, transparent 82%);
-    }
-
     &.isActive {
         animation: borderBeamSpin calc(var(--beam-duration) * 1s) linear infinite, borderBeamFadeIn .6s ease forwards;
     }
@@ -606,7 +626,7 @@ $line-bloom-window: string.unquote('radial-gradient(ellipse calc(84px * var(--be
         z-index: 3;
         inset: 0;
         padding: 1px;
-        background: var(--beam-rotate-bloom);
+        background: #{$rotate-bloom-light};
         border-radius: calc(var(--beam-radius) - 1px);
         opacity: 0;
         filter: blur(8px) brightness(var(--beam-brightness)) saturate(var(--beam-saturation));
@@ -615,6 +635,10 @@ $line-bloom-window: string.unquote('radial-gradient(ellipse calc(84px * var(--be
         mask-composite: exclude;
     }
 
+    [dark] & > .bloom {
+        background: #{$rotate-bloom-dark};
+    }
+
     &.isActive > .bloom,
     &.isFading > .bloom {
         display: block;
@@ -640,11 +664,16 @@ $line-bloom-window: string.unquote('radial-gradient(ellipse calc(84px * var(--be
 
     &.isActive::after,
     &.isFading::after {
-        background: var(--beam-rotate-highlight), var(--beam-rotate-blobs);
+        background: #{$rotate-highlight-light}, var(--beam-rotate-blobs);
         mask: #{$md-window}, #{$ring-mask};
         mask-composite: intersect, exclude;
     }
 
+    [dark] &.isActive::after,
+    [dark] &.isFading::after {
+        background: #{$rotate-highlight-dark}, var(--beam-rotate-blobs);
+    }
+
     &.isActive::before,
     &.isFading::before {
         background: var(--beam-rotate-inner);
@@ -673,11 +702,16 @@ $line-bloom-window: string.unquote('radial-gradient(ellipse calc(84px * var(--be
 
     &.isActive::after,
     &.isFading::after {
-        background: var(--beam-rotate-highlight), var(--beam-sm-blobs);
+        background: #{$rotate-highlight-light}, var(--beam-sm-blobs);
         mask: #{$sm-window}, #{$ring-mask};
         mask-composite: intersect, exclude;
     }
 
+    [dark] &.isActive::after,
+    [dark] &.isFading::after {
+        background: #{$rotate-highlight-dark}, var(--beam-sm-blobs);
+    }
+
     &.isActive::before,
     &.isFading::before {
         background: var(--beam-sm-inner);
@@ -700,7 +734,6 @@ $line-bloom-window: string.unquote('radial-gradient(ellipse calc(84px * var(--be
     --beam-brightness: 1.3;
     --beam-inner-opacity: .32;
     --beam-inner-shadow: rgba(0, 0, 0, .14);
-    --beam-line-highlight: radial-gradient(ellipse calc(35px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(0, 0, 0, 0.6) 0%, rgba(0, 0, 0, 0.25) 35%, transparent 70%);
     --beam-saturation: 1.95;
     --beam-stroke-opacity: .16;
 
@@ -708,7 +741,6 @@ $line-bloom-window: string.unquote('radial-gradient(ellipse calc(84px * var(--be
         --beam-bloom-opacity: .8;
         --beam-inner-opacity: .7;
         --beam-inner-shadow: rgba(255, 255, 255, .1);
-        --beam-line-highlight: radial-gradient(ellipse calc(24px * var(--beam-w)) calc(28px * var(--beam-h)) at calc(var(--beam-x) * 100%) calc(100% + 2px), rgba(255, 255, 255, 0.38) 0%, rgba(255, 255, 255, 0.12) 30%, transparent 65%);
         --beam-saturation: 1.2;
         --beam-stroke-opacity: 1.14;
     }
@@ -728,7 +760,6 @@ $line-bloom-window: string.unquote('radial-gradient(ellipse calc(84px * var(--be
         inset: 0;
         padding: 1px;
         content: '';
-        background: var(--beam-line-highlight), var(--beam-line-blobs);
         border-radius: calc(var(--beam-radius) - 1px);
         opacity: calc(var(--beam-opacity) * var(--beam-edge) * var(--beam-stroke-opacity) * var(--beam-strength));
         animation: borderBeamHueShift 12s ease-in-out infinite;
@@ -743,7 +774,6 @@ $line-bloom-window: string.unquote('radial-gradient(ellipse calc(84px * var(--be
         z-index: 1;
         inset: 0;
         content: '';
-        background: var(--beam-line-inner);
         border-radius: var(--beam-radius);
         box-shadow: inset 0 0 9px 1px var(--beam-inner-shadow);
         opacity: calc(var(--beam-opacity) * var(--beam-edge) * var(--beam-inner-opacity) * var(--beam-strength));
@@ -761,7 +791,6 @@ $line-bloom-window: string.unquote('radial-gradient(ellipse calc(84px * var(--be
     > .bloom {
         z-index: 3;
         inset: 0;
-        background: var(--beam-line-bloom);
         border-radius: calc(var(--beam-radius) - 1px);
         opacity: 0;
         clip-path: inset(0 round var(--beam-radius));

package/src/css/component/Breadcrumb.module.scss

@@ -0,0 +1,86 @@
+@use '~flux/components/css/mixin';
+
+.breadcrumb {
+    display: block;
+    max-width: 100%;
+}
+
+.breadcrumbList {
+    display: flex;
+    flex-wrap: wrap;
+    margin: 0;
+    padding: 0;
+    align-items: center;
+    gap: 3px;
+    list-style: none;
+
+    .breadcrumbItem {
+        margin: 0;
+    }
+}
+
+.breadcrumbItem {
+    display: inline-flex;
+    min-width: 0;
+    align-items: center;
+    gap: 3px;
+
+    &:last-child .breadcrumbSeparator {
+        display: none;
+    }
+}
+
+.breadcrumbLink {
+    display: inline-flex;
+    height: 30px;
+    max-width: 100%;
+    padding: 0 9px;
+    align-items: center;
+    gap: 9px;
+    background: transparent;
+    border: 0;
+    border-radius: var(--radius);
+    color: var(--foreground-secondary);
+    font-size: 14px;
+    line-height: 1;
+    text-decoration: none;
+    white-space: nowrap;
+    cursor: pointer;
+    transition: var(--transition-default);
+    transition-property: background, color, mixin.focus-ring-transition-properties();
+
+    @include mixin.focus-ring(2px, true);
+
+    &:not(.isCurrent) {
+        @include mixin.hover {
+            background: var(--surface-hover);
+            color: var(--foreground);
+        }
+    }
+
+    &.isCurrent {
+        color: var(--foreground-prominent);
+        font-weight: 600;
+        cursor: default;
+        pointer-events: none;
+    }
+}
+
+.breadcrumbIcon {
+    margin-top: -1px;
+    margin-bottom: -1px;
+    flex-shrink: 0;
+}
+
+.breadcrumbLabel {
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+}
+
+.breadcrumbSeparator {
+    flex-shrink: 0;
+    color: var(--foreground-secondary);
+    opacity: .5;
+    pointer-events: none;
+}