parent
e359cabd4b
commit
458996882e
@ -0,0 +1,10 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Ellipsis as SomaBreadcrumbEllipsis } from '$soma/components/breadcrumb';
|
||||||
|
import type { BreadcrumbEllipsisProps } from './types';
|
||||||
|
|
||||||
|
let { children, ...rest }: BreadcrumbEllipsisProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<SomaBreadcrumbEllipsis {...rest}>
|
||||||
|
{@render children?.()}
|
||||||
|
</SomaBreadcrumbEllipsis>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Item as SomaBreadcrumbItem } from '$soma/components/breadcrumb';
|
||||||
|
import type { BreadcrumbItemProps } from './types';
|
||||||
|
|
||||||
|
let { children, ...rest }: BreadcrumbItemProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<SomaBreadcrumbItem {...rest}>
|
||||||
|
{@render children?.()}
|
||||||
|
</SomaBreadcrumbItem>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Link as SomaBreadcrumbLink } from '$soma/components/breadcrumb';
|
||||||
|
import type { BreadcrumbLinkProps } from './types';
|
||||||
|
|
||||||
|
let { children, ...rest }: BreadcrumbLinkProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<SomaBreadcrumbLink {...rest}>
|
||||||
|
{@render children?.()}
|
||||||
|
</SomaBreadcrumbLink>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { List as SomaBreadcrumbList } from '$soma/components/breadcrumb';
|
||||||
|
import type { BreadcrumbListProps } from './types';
|
||||||
|
|
||||||
|
let { children, ...rest }: BreadcrumbListProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<SomaBreadcrumbList {...rest}>
|
||||||
|
{@render children?.()}
|
||||||
|
</SomaBreadcrumbList>
|
||||||
@ -0,0 +1,10 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
import { Separator as SomaBreadcrumbSeparator } from '$soma/components/breadcrumb';
|
||||||
|
import type { BreadcrumbSeparatorProps } from './types';
|
||||||
|
|
||||||
|
let { children, ...rest }: BreadcrumbSeparatorProps = $props();
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<SomaBreadcrumbSeparator {...rest}>
|
||||||
|
{@render children?.()}
|
||||||
|
</SomaBreadcrumbSeparator>
|
||||||
@ -0,0 +1,110 @@
|
|||||||
|
[data-breadcrumb] {
|
||||||
|
--_breadcrumb-gap: var(--breadcrumb-gap-md);
|
||||||
|
--_breadcrumb-font-size: var(--breadcrumb-font-size-md);
|
||||||
|
|
||||||
|
color: var(--breadcrumb-color);
|
||||||
|
font-family: var(--breadcrumb-font-family);
|
||||||
|
font-size: var(--_breadcrumb-font-size);
|
||||||
|
line-height: var(--breadcrumb-line-height);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-breadcrumb][data-size='sm'] {
|
||||||
|
--_breadcrumb-gap: var(--breadcrumb-gap-sm);
|
||||||
|
--_breadcrumb-font-size: var(--breadcrumb-font-size-sm);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-breadcrumb][data-size='lg'] {
|
||||||
|
--_breadcrumb-gap: var(--breadcrumb-gap-lg);
|
||||||
|
--_breadcrumb-font-size: var(--breadcrumb-font-size-lg);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-breadcrumb-list] {
|
||||||
|
display: flex;
|
||||||
|
flex-wrap: wrap;
|
||||||
|
align-items: center;
|
||||||
|
gap: var(--_breadcrumb-gap);
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-breadcrumb-item],
|
||||||
|
[data-breadcrumb-separator] {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-inline-size: 0;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-breadcrumb-link] {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
min-inline-size: 0;
|
||||||
|
border-radius: var(--breadcrumb-link-radius);
|
||||||
|
color: var(--breadcrumb-link-color);
|
||||||
|
font-weight: var(--breadcrumb-link-font-weight);
|
||||||
|
text-decoration: none;
|
||||||
|
outline: none;
|
||||||
|
transition:
|
||||||
|
color var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
|
||||||
|
box-shadow var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-breadcrumb-link]:hover:not([data-current]) {
|
||||||
|
color: var(--breadcrumb-link-color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-breadcrumb-link]:focus-visible {
|
||||||
|
box-shadow: var(--breadcrumb-focus-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-breadcrumb-link][data-current] {
|
||||||
|
color: var(--breadcrumb-link-color-current);
|
||||||
|
font-weight: var(--breadcrumb-link-font-weight-current);
|
||||||
|
cursor: default;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-breadcrumb-separator] {
|
||||||
|
color: var(--breadcrumb-separator-color);
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-breadcrumb-ellipsis] {
|
||||||
|
display: inline-flex;
|
||||||
|
align-items: center;
|
||||||
|
justify-content: center;
|
||||||
|
min-inline-size: var(--breadcrumb-ellipsis-size);
|
||||||
|
block-size: var(--breadcrumb-ellipsis-size);
|
||||||
|
border: var(--breadcrumb-ellipsis-border-width) solid var(--breadcrumb-ellipsis-border);
|
||||||
|
border-radius: var(--breadcrumb-ellipsis-radius);
|
||||||
|
background: var(--breadcrumb-ellipsis-bg);
|
||||||
|
color: var(--breadcrumb-ellipsis-color);
|
||||||
|
font: inherit;
|
||||||
|
outline: none;
|
||||||
|
user-select: none;
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-breadcrumb-ellipsis][data-interactive] {
|
||||||
|
cursor: pointer;
|
||||||
|
transition:
|
||||||
|
background var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
|
||||||
|
border-color var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
|
||||||
|
color var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease),
|
||||||
|
box-shadow var(--breadcrumb-transition-duration) var(--breadcrumb-transition-ease);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-breadcrumb-ellipsis][data-interactive]:hover {
|
||||||
|
border-color: var(--breadcrumb-ellipsis-border-hover);
|
||||||
|
background: var(--breadcrumb-ellipsis-bg-hover);
|
||||||
|
color: var(--breadcrumb-ellipsis-color-hover);
|
||||||
|
}
|
||||||
|
|
||||||
|
[data-breadcrumb-ellipsis][data-interactive]:focus-visible {
|
||||||
|
box-shadow: var(--breadcrumb-focus-shadow);
|
||||||
|
}
|
||||||
|
|
||||||
|
@media (prefers-reduced-motion: reduce) {
|
||||||
|
[data-breadcrumb-link],
|
||||||
|
[data-breadcrumb-ellipsis][data-interactive] {
|
||||||
|
transition: none;
|
||||||
|
}
|
||||||
|
}
|
||||||
@ -0,0 +1,18 @@
|
|||||||
|
<script lang="ts">
|
||||||
|
/**
|
||||||
|
* Eidos `<Breadcrumb>` — visual wrapper over Soma's breadcrumb primitive.
|
||||||
|
* Soma owns ARIA landmark/current semantics; Eidos adds `size`.
|
||||||
|
*/
|
||||||
|
import { ActiveEidos } from '$uix/eidos';
|
||||||
|
import { Provider as SomaBreadcrumbProvider } from '$soma/components/breadcrumb';
|
||||||
|
import type { BreadcrumbProps } from './types';
|
||||||
|
|
||||||
|
let { size = 'md', children, ...rest }: BreadcrumbProps = $props();
|
||||||
|
|
||||||
|
const eidos = ActiveEidos.require();
|
||||||
|
const resolvedSize = $derived(eidos.resolve(size, 'md'));
|
||||||
|
</script>
|
||||||
|
|
||||||
|
<SomaBreadcrumbProvider {...rest} data-size={resolvedSize}>
|
||||||
|
{@render children?.()}
|
||||||
|
</SomaBreadcrumbProvider>
|
||||||
@ -0,0 +1,47 @@
|
|||||||
|
// Breadcrumb — eidos compound API, disciplined option C.
|
||||||
|
//
|
||||||
|
// import { Breadcrumb } from '$uix/eidos/components/breadcrumb';
|
||||||
|
//
|
||||||
|
// <Breadcrumb>
|
||||||
|
// <Breadcrumb.List>
|
||||||
|
// <Breadcrumb.Item><Breadcrumb.Link href="/">Home</Breadcrumb.Link></Breadcrumb.Item>
|
||||||
|
// <Breadcrumb.Separator />
|
||||||
|
// <Breadcrumb.Item><Breadcrumb.Link current>Docs</Breadcrumb.Link></Breadcrumb.Item>
|
||||||
|
// </Breadcrumb.List>
|
||||||
|
// </Breadcrumb>
|
||||||
|
import BreadcrumbRoot from './breadcrumb.svelte';
|
||||||
|
import List from './breadcrumb-list.svelte';
|
||||||
|
import Item from './breadcrumb-item.svelte';
|
||||||
|
import Link from './breadcrumb-link.svelte';
|
||||||
|
import Separator from './breadcrumb-separator.svelte';
|
||||||
|
import Ellipsis from './breadcrumb-ellipsis.svelte';
|
||||||
|
|
||||||
|
type BreadcrumbNamespace = typeof BreadcrumbRoot & {
|
||||||
|
List: typeof List;
|
||||||
|
Item: typeof Item;
|
||||||
|
Link: typeof Link;
|
||||||
|
Separator: typeof Separator;
|
||||||
|
Ellipsis: typeof Ellipsis;
|
||||||
|
};
|
||||||
|
|
||||||
|
const Breadcrumb = BreadcrumbRoot as BreadcrumbNamespace;
|
||||||
|
Breadcrumb.List = List;
|
||||||
|
Breadcrumb.Item = Item;
|
||||||
|
Breadcrumb.Link = Link;
|
||||||
|
Breadcrumb.Separator = Separator;
|
||||||
|
Breadcrumb.Ellipsis = Ellipsis;
|
||||||
|
|
||||||
|
export { Breadcrumb };
|
||||||
|
|
||||||
|
export default Breadcrumb;
|
||||||
|
|
||||||
|
export type {
|
||||||
|
BreadcrumbCurrent,
|
||||||
|
BreadcrumbProps,
|
||||||
|
BreadcrumbListProps as ListProps,
|
||||||
|
BreadcrumbItemProps as ItemProps,
|
||||||
|
BreadcrumbLinkProps as LinkProps,
|
||||||
|
BreadcrumbSeparatorProps as SeparatorProps,
|
||||||
|
BreadcrumbEllipsisProps as EllipsisProps,
|
||||||
|
BreadcrumbSize
|
||||||
|
} from './types';
|
||||||
@ -0,0 +1,30 @@
|
|||||||
|
import type {
|
||||||
|
BreadcrumbCurrent,
|
||||||
|
EllipsisProps as SomaBreadcrumbEllipsisProps,
|
||||||
|
ItemProps as SomaBreadcrumbItemProps,
|
||||||
|
LinkProps as SomaBreadcrumbLinkProps,
|
||||||
|
ListProps as SomaBreadcrumbListProps,
|
||||||
|
ProviderProps as SomaBreadcrumbProviderProps,
|
||||||
|
SeparatorProps as SomaBreadcrumbSeparatorProps
|
||||||
|
} from '$soma/components/breadcrumb';
|
||||||
|
import type { ResponsiveProp, Size } from '$uix/eidos/lib/types';
|
||||||
|
|
||||||
|
export type BreadcrumbSize = Extract<Size, 'sm' | 'md' | 'lg'>;
|
||||||
|
|
||||||
|
/**
|
||||||
|
* Props for the eidos `<Breadcrumb>`.
|
||||||
|
*
|
||||||
|
* Extends Soma's breadcrumb landmark with visual sizing only. Current crumb,
|
||||||
|
* ARIA label/current and interactive ellipsis semantics are owned by Soma.
|
||||||
|
*/
|
||||||
|
export type BreadcrumbProps = SomaBreadcrumbProviderProps & {
|
||||||
|
/** Visual size. Accepts a responsive map resolved by ActiveEidos. @default 'md' */
|
||||||
|
size?: ResponsiveProp<BreadcrumbSize>;
|
||||||
|
};
|
||||||
|
|
||||||
|
export type BreadcrumbListProps = SomaBreadcrumbListProps;
|
||||||
|
export type BreadcrumbItemProps = SomaBreadcrumbItemProps;
|
||||||
|
export type BreadcrumbLinkProps = SomaBreadcrumbLinkProps;
|
||||||
|
export type BreadcrumbSeparatorProps = SomaBreadcrumbSeparatorProps;
|
||||||
|
export type BreadcrumbEllipsisProps = SomaBreadcrumbEllipsisProps;
|
||||||
|
export type { BreadcrumbCurrent };
|
||||||
Loading…
Reference in new issue