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