@inkra/react 0.5.0 → 0.6.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (8) hide show
  1. package/README.md +11 -0
  2. package/dist/breadcrumb/index.d.ts +16 -4
  3. package/dist/breadcrumb/index.js +20 -7
  4. package/dist/select/StepperSelect.js +1 -1
  5. package/dist/styles/breadcrumb.css +96 -5
  6. package/dist/styles/select.css +7 -2
  7. package/dist/styles.css +103 -7
  8. package/package.json +1 -1
package/README.md CHANGED
@@ -287,6 +287,17 @@ Canvas failures, forced colors and printing retain an SVG progress fallback.
287
287
 
288
288
  ## Menus And Content
289
289
 
290
+ `Breadcrumb` exposes `Root`, `List`, `Item`, `Link`, `MenuTrigger`,
291
+ `ContextLink`, `Page` and `Separator`. `Link` renders a real anchor and defaults
292
+ to the pencil-underlined `link` appearance; `startIcon` and `endIcon` occupy the
293
+ logical sides and follow RTL. `Page` accepts the same icon slots. Page, link and
294
+ menu-trigger content share a 44px default hit height, 15px text, 20px icon slot,
295
+ 8px gap and 12px logical padding so a header can change item semantics without
296
+ moving its baseline. Disabled links remove `href` and leave the tab order. Use
297
+ `MenuTrigger` inside `DropdownMenu.Root` for an item that selects another path,
298
+ and `ContextLink` inside `ContextMenu.Root` for pointer, keyboard and optional
299
+ long-press actions without adding a second focus target.
300
+
290
301
  `DropdownMenu` exposes `Root`, `Trigger`, `Portal`, `Content`, `Item`, `CheckboxItem`, `RadioGroup`, `RadioItem`, `Group`, `Label` and `Separator`. It supports controlled open state, placement/collision props, disabled items, keyboard navigation and focus return. Use `Trigger asChild` with a Button; use `Item.destructive` for dangerous actions. Portal content inherits the trigger theme. Submenus are not included yet.
291
302
 
292
303
  `Alert.Root` accepts `variant="info | success | warning | danger"`, an optional decorative `icon`, and native attributes. Compose with `Alert.Title` and `Alert.Description`. The default `role="status"` is polite; explicitly use `role="alert"` only for urgent feedback.
package/dist/breadcrumb/index.d.ts CHANGED
@@ -1,16 +1,28 @@
1
- import { type ComponentPropsWithoutRef } from 'react';
2
- import { type ButtonLinkProps } from '../Button.js';
1
+ import { type ComponentPropsWithoutRef, type ReactNode } from 'react';
2
+ import { type ButtonLinkProps, type ButtonProps } from '../Button.js';
3
+ import { type ContextMenuTriggerProps } from '../context-menu/index.js';
3
4
  export type BreadcrumbProps = ComponentPropsWithoutRef<'nav'>;
4
5
  export type BreadcrumbListProps = ComponentPropsWithoutRef<'ol'>;
5
6
  export type BreadcrumbItemProps = ComponentPropsWithoutRef<'li'>;
6
7
  export type BreadcrumbLinkProps = ButtonLinkProps;
7
- export type BreadcrumbPageProps = ComponentPropsWithoutRef<'span'>;
8
+ export type BreadcrumbMenuTriggerProps = ButtonProps;
9
+ export interface BreadcrumbContextLinkProps extends BreadcrumbLinkProps {
10
+ exclude?: ContextMenuTriggerProps['exclude'];
11
+ longPress?: ContextMenuTriggerProps['longPress'];
12
+ nativeContextMenu?: ContextMenuTriggerProps['nativeContextMenu'];
13
+ }
14
+ export interface BreadcrumbPageProps extends ComponentPropsWithoutRef<'span'> {
15
+ endIcon?: ReactNode;
16
+ startIcon?: ReactNode;
17
+ }
8
18
  export type BreadcrumbSeparatorProps = ComponentPropsWithoutRef<'li'>;
9
19
  export declare const Breadcrumb: {
10
20
  Root: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLElement>, HTMLElement>, "ref"> & import("react").RefAttributes<HTMLElement>>;
11
21
  List: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").OlHTMLAttributes<HTMLOListElement>, HTMLOListElement>, "ref"> & import("react").RefAttributes<HTMLOListElement>>;
12
22
  Item: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
13
23
  Link: import("react").ForwardRefExoticComponent<ButtonLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
14
- Page: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").HTMLAttributes<HTMLSpanElement>, HTMLSpanElement>, "ref"> & import("react").RefAttributes<HTMLSpanElement>>;
24
+ MenuTrigger: import("react").ForwardRefExoticComponent<ButtonProps & import("react").RefAttributes<HTMLButtonElement>>;
25
+ ContextLink: import("react").ForwardRefExoticComponent<BreadcrumbContextLinkProps & import("react").RefAttributes<HTMLAnchorElement>>;
26
+ Page: import("react").ForwardRefExoticComponent<BreadcrumbPageProps & import("react").RefAttributes<HTMLSpanElement>>;
15
27
  Separator: import("react").ForwardRefExoticComponent<Omit<import("react").DetailedHTMLProps<import("react").LiHTMLAttributes<HTMLLIElement>, HTMLLIElement>, "ref"> & import("react").RefAttributes<HTMLLIElement>>;
16
28
  };
package/dist/breadcrumb/index.js CHANGED
@@ -1,7 +1,9 @@
1
- import { jsx as _jsx } from "react/jsx-runtime";
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
2
  import { useInkraLocale } from '../i18n/index.js';
3
- import { forwardRef } from 'react';
4
- import { ButtonLink } from '../Button.js';
3
+ import { forwardRef, } from 'react';
4
+ import { Button, ButtonLink, } from '../Button.js';
5
+ import { ContextMenu, } from '../context-menu/index.js';
6
+ import { DropdownMenu } from '../dropdown-menu/index.js';
5
7
  import { PencilText } from '../PencilText.js';
6
8
  const classes = (...values) => values.filter(Boolean).join(' ');
7
9
  const copy = (children) => typeof children === 'string' ? _jsx(PencilText, { children: children }) : children;
@@ -16,13 +18,24 @@ const List = forwardRef(function BreadcrumbList({ className, ...props }, ref) {
16
18
  const Item = forwardRef(function BreadcrumbItem({ className, ...props }, ref) {
17
19
  return _jsx("li", { ...props, ref: ref, className: classes('inkra-breadcrumb__item', className) });
18
20
  });
19
- const Link = forwardRef(function BreadcrumbLink({ className, variant = 'ghost', ...props }, ref) {
21
+ const Link = forwardRef(function BreadcrumbLink({ className, variant = 'link', ...props }, ref) {
20
22
  return _jsx(ButtonLink, { ...props, ref: ref, variant: variant, className: classes('inkra-breadcrumb__link', className) });
21
23
  });
22
- const Page = forwardRef(function BreadcrumbPage({ className, children, ...props }, ref) {
23
- return _jsx("span", { ...props, ref: ref, "aria-current": "page", className: classes('inkra-breadcrumb__page', className), children: copy(children) });
24
+ const MenuTrigger = forwardRef(function BreadcrumbMenuTrigger({ className, disabled = false, loading = false, variant = 'link', ...props }, ref) {
25
+ return _jsx(DropdownMenu.Trigger, { asChild: true, disabled: disabled || loading, children: _jsx(Button, { ...props, ref: ref, disabled: disabled, loading: loading, variant: variant, className: classes('inkra-breadcrumb__trigger', className) }) });
26
+ });
27
+ const ContextLinkAnchor = forwardRef(function BreadcrumbContextLinkAnchor({ 'aria-disabled': ariaDisabled, disabled = false, ...props }, ref) {
28
+ const contextDisabled = ariaDisabled === true || ariaDisabled === 'true';
29
+ return _jsx(Link, { ...props, ref: ref, "aria-disabled": contextDisabled || disabled || undefined, disabled: contextDisabled || disabled });
30
+ });
31
+ const ContextLink = forwardRef(function BreadcrumbContextLink({ className, disabled = false, exclude, longPress, nativeContextMenu, ...props }, ref) {
32
+ return _jsx(ContextMenu.Trigger, { ...props, as: ContextLinkAnchor, className: classes('inkra-breadcrumb__context-link', className), disabled: disabled || props.loading, exclude: exclude, longPress: longPress, nativeContextMenu: nativeContextMenu, ref: ref });
33
+ });
34
+ const Page = forwardRef(function BreadcrumbPage({ className, children, endIcon, startIcon, ...props }, ref) {
35
+ const icon = (side, value) => value == null ? null : _jsx("span", { "aria-hidden": "true", className: `inkra-breadcrumb__icon inkra-breadcrumb__icon--${side}`, children: value });
36
+ return _jsxs("span", { ...props, ref: ref, "aria-current": "page", className: classes('inkra-breadcrumb__page', className), children: [icon('start', startIcon), _jsx("span", { className: "inkra-breadcrumb__label", children: copy(children) }), icon('end', endIcon)] });
24
37
  });
25
38
  const Separator = forwardRef(function BreadcrumbSeparator({ className, children = '/', ...props }, ref) {
26
39
  return _jsx("li", { ...props, ref: ref, role: "presentation", "aria-hidden": "true", className: classes('inkra-breadcrumb__separator', className), children: copy(children) });
27
40
  });
28
- export const Breadcrumb = { Root, List, Item, Link, Page, Separator };
41
+ export const Breadcrumb = { Root, List, Item, Link, MenuTrigger, ContextLink, Page, Separator };
package/dist/select/StepperSelect.js CHANGED
@@ -115,7 +115,7 @@ export const SelectStepper = forwardRef(function SelectStepper(inkraProps, forwa
115
115
  forwardedRef(node);
116
116
  else if (forwardedRef)
117
117
  forwardedRef.current = node;
118
- }, role: "spinbutton", type: "button", children: _jsx(PencilText, { ellipsis: true, seed: `${seed}-value`, children: visibleLabel }) }), _jsx(InputAction, { disabled: interactionDisabled || next == null, seed: `${seed}-next`, children: _jsx(Button, { "aria-label": nextLabel, className: "inkra-select-stepper__button inkra-select-stepper__button--next", disabled: interactionDisabled || next == null, onClick: () => change(next), size: buttonSize, type: "button", variant: "ghost", children: _jsx(PencilIcon, { paths: nextPaths, size: iconSize, sourceSize: 24 }) }) }), _jsxs("select", { "aria-hidden": "true", className: "inkra-select-stepper__native", disabled: state.disabled, form: form, name: name, onChange: () => undefined, onInvalid: event => {
118
+ }, role: "spinbutton", type: "button", children: _jsx(PencilText, { ellipsis: true, seed: `${seed}-value`, children: visibleLabel }) }), _jsx("span", { className: "inkra-input__actions", children: _jsx(InputAction, { disabled: interactionDisabled || next == null, seed: `${seed}-next`, children: _jsx(Button, { "aria-label": nextLabel, className: "inkra-select-stepper__button inkra-select-stepper__button--next", disabled: interactionDisabled || next == null, onClick: () => change(next), size: buttonSize, type: "button", variant: "ghost", children: _jsx(PencilIcon, { paths: nextPaths, size: iconSize, sourceSize: 24 }) }) }) }), _jsxs("select", { "aria-hidden": "true", className: "inkra-select-stepper__native", disabled: state.disabled, form: form, name: name, onChange: () => undefined, onInvalid: event => {
119
119
  event.preventDefault();
120
120
  controlRef.current?.focus({ preventScroll: true });
121
121
  }, ref: selectRef, required: state.required && !state.readOnly, tabIndex: -1, value: nativeValue, children: [_jsx("option", { value: "" }), items.map(item => _jsx("option", { disabled: item.disabled, value: item.value, children: item.label }, item.value))] })] }) }));
package/dist/styles/breadcrumb.css CHANGED
@@ -1,7 +1,98 @@
1
- .inkra-breadcrumb { min-width: 0; color: var(--inkra-ink); }
2
- .inkra-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
1
+ .inkra-breadcrumb {
2
+ --inkra-breadcrumb-item-height: var(--inkra-control-md);
3
+ --inkra-breadcrumb-item-padding: var(--inkra-space-3);
4
+ --inkra-breadcrumb-item-font-size: var(--inkra-text-md);
5
+ --inkra-breadcrumb-item-icon-size: var(--inkra-icon-md);
6
+ --inkra-breadcrumb-item-gap: var(--inkra-space-2);
7
+ color: var(--inkra-ink);
8
+ max-width: 100%;
9
+ min-width: 0;
10
+ }
11
+ .inkra-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; margin: 0; padding: 0; list-style: none; }
3
12
  .inkra-breadcrumb__item { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
4
- .inkra-breadcrumb__link { max-width: 100%; color: var(--inkra-ink-muted); }
5
- .inkra-breadcrumb__link .inkra-button__label { white-space: normal; overflow-wrap: anywhere; }
6
- .inkra-breadcrumb__page { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 12px; overflow-wrap: anywhere; }
13
+ .inkra-breadcrumb__link,
14
+ .inkra-breadcrumb__trigger {
15
+ --inkra-button-visual-height: var(--inkra-breadcrumb-item-height);
16
+ --inkra-button-visual-padding: var(--inkra-breadcrumb-item-padding);
17
+ --inkra-button-font-size: var(--inkra-breadcrumb-item-font-size);
18
+ --inkra-button-icon-size: var(--inkra-breadcrumb-item-icon-size);
19
+ --inkra-button-content-gap: var(--inkra-breadcrumb-item-gap);
20
+ color: var(--inkra-accent-strong);
21
+ max-width: 100%;
22
+ }
23
+ .inkra-breadcrumb__link .inkra-button__label,
24
+ .inkra-breadcrumb__link .inkra-button__label > .inkra-pencil-text,
25
+ .inkra-breadcrumb__link .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source,
26
+ .inkra-breadcrumb__trigger .inkra-button__label,
27
+ .inkra-breadcrumb__trigger .inkra-button__label > .inkra-pencil-text,
28
+ .inkra-breadcrumb__trigger .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source {
29
+ max-width: 100%;
30
+ min-width: 0;
31
+ overflow-wrap: anywhere;
32
+ white-space: normal;
33
+ }
34
+ .inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__surface {
35
+ height: auto;
36
+ max-width: 100%;
37
+ min-height: var(--inkra-breadcrumb-item-height);
38
+ min-width: var(--inkra-breadcrumb-item-height);
39
+ }
40
+ .inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__content {
41
+ max-width: 100%;
42
+ min-width: 0;
43
+ }
44
+ .inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__focus-ring {
45
+ height: 100%;
46
+ inset-inline: 0;
47
+ top: 0;
48
+ transform: none;
49
+ }
50
+ .inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger):hover:not(:disabled):not([aria-disabled="true"]) .inkra-button__surface,
51
+ .inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger):active:not(:disabled):not([aria-disabled="true"]) .inkra-button__surface {
52
+ transform: none;
53
+ }
54
+ .inkra-breadcrumb__page {
55
+ align-items: center;
56
+ box-sizing: border-box;
57
+ display: inline-flex;
58
+ font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
59
+ font-size: var(--inkra-breadcrumb-item-font-size);
60
+ gap: var(--inkra-breadcrumb-item-gap);
61
+ justify-content: center;
62
+ letter-spacing: var(--inkra-letter-spacing);
63
+ line-height: var(--inkra-line-ui);
64
+ max-width: 100%;
65
+ min-height: var(--inkra-breadcrumb-item-height);
66
+ min-width: var(--inkra-breadcrumb-item-height);
67
+ overflow-wrap: anywhere;
68
+ padding-inline: var(--inkra-breadcrumb-item-padding);
69
+ }
70
+ .inkra-breadcrumb__label,
71
+ .inkra-breadcrumb__label > .inkra-pencil-text {
72
+ align-items: center;
73
+ display: inline-flex;
74
+ min-width: 0;
75
+ overflow: visible;
76
+ overflow-wrap: anywhere;
77
+ white-space: normal;
78
+ }
79
+ .inkra-breadcrumb__label > .inkra-pencil-text > .inkra-pencil-text__source {
80
+ display: block;
81
+ min-width: 0;
82
+ white-space: inherit;
83
+ }
84
+ .inkra-breadcrumb__icon {
85
+ align-items: center;
86
+ display: inline-flex;
87
+ flex: 0 0 var(--inkra-breadcrumb-item-icon-size);
88
+ height: var(--inkra-breadcrumb-item-icon-size);
89
+ justify-content: center;
90
+ width: var(--inkra-breadcrumb-item-icon-size);
91
+ }
92
+ .inkra-breadcrumb__icon > :is(svg, canvas) {
93
+ height: 100% !important;
94
+ max-height: 100%;
95
+ max-width: 100%;
96
+ width: 100% !important;
97
+ }
7
98
  .inkra-breadcrumb__separator { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 16px; color: var(--inkra-ink-subtle); pointer-events: none; }
package/dist/styles/select.css CHANGED
@@ -58,13 +58,18 @@
58
58
  inline-size: 100%;
59
59
  }
60
60
 
61
- .inkra-select-stepper .inkra-select-stepper__control,
62
- .inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
61
+ .inkra-select-stepper .inkra-select-stepper__control {
63
62
  flex-wrap: nowrap;
64
63
  gap: 0;
65
64
  padding-inline: 0;
66
65
  }
67
66
 
67
+ .inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
68
+ flex-wrap: nowrap;
69
+ gap: 0;
70
+ padding-inline: var(--inkra-field-control-padding);
71
+ }
72
+
68
73
  .inkra-select-stepper__control {
69
74
  outline: 0;
70
75
  }
package/dist/styles.css CHANGED
@@ -2050,13 +2050,18 @@
2050
2050
  inline-size: 100%;
2051
2051
  }
2052
2052
 
2053
- .inkra-select-stepper .inkra-select-stepper__control,
2054
- .inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
2053
+ .inkra-select-stepper .inkra-select-stepper__control {
2055
2054
  flex-wrap: nowrap;
2056
2055
  gap: 0;
2057
2056
  padding-inline: 0;
2058
2057
  }
2059
2058
 
2059
+ .inkra-select-stepper .inkra-select-stepper__control > .inkra-pencil-surface__content {
2060
+ flex-wrap: nowrap;
2061
+ gap: 0;
2062
+ padding-inline: var(--inkra-field-control-padding);
2063
+ }
2064
+
2060
2065
  .inkra-select-stepper__control {
2061
2066
  outline: 0;
2062
2067
  }
@@ -8717,12 +8722,103 @@ svg.leaflet-image-layer.leaflet-interactive path {
8717
8722
  }
8718
8723
  }
8719
8724
 
8720
- .inkra-breadcrumb { min-width: 0; color: var(--inkra-ink); }
8721
- .inkra-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; }
8725
+ .inkra-breadcrumb {
8726
+ --inkra-breadcrumb-item-height: var(--inkra-control-md);
8727
+ --inkra-breadcrumb-item-padding: var(--inkra-space-3);
8728
+ --inkra-breadcrumb-item-font-size: var(--inkra-text-md);
8729
+ --inkra-breadcrumb-item-icon-size: var(--inkra-icon-md);
8730
+ --inkra-breadcrumb-item-gap: var(--inkra-space-2);
8731
+ color: var(--inkra-ink);
8732
+ max-width: 100%;
8733
+ min-width: 0;
8734
+ }
8735
+ .inkra-breadcrumb__list { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; max-width: 100%; margin: 0; padding: 0; list-style: none; }
8722
8736
  .inkra-breadcrumb__item { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
8723
- .inkra-breadcrumb__link { max-width: 100%; color: var(--inkra-ink-muted); }
8724
- .inkra-breadcrumb__link .inkra-button__label { white-space: normal; overflow-wrap: anywhere; }
8725
- .inkra-breadcrumb__page { min-height: 44px; display: inline-flex; align-items: center; padding-inline: 12px; overflow-wrap: anywhere; }
8737
+ .inkra-breadcrumb__link,
8738
+ .inkra-breadcrumb__trigger {
8739
+ --inkra-button-visual-height: var(--inkra-breadcrumb-item-height);
8740
+ --inkra-button-visual-padding: var(--inkra-breadcrumb-item-padding);
8741
+ --inkra-button-font-size: var(--inkra-breadcrumb-item-font-size);
8742
+ --inkra-button-icon-size: var(--inkra-breadcrumb-item-icon-size);
8743
+ --inkra-button-content-gap: var(--inkra-breadcrumb-item-gap);
8744
+ color: var(--inkra-accent-strong);
8745
+ max-width: 100%;
8746
+ }
8747
+ .inkra-breadcrumb__link .inkra-button__label,
8748
+ .inkra-breadcrumb__link .inkra-button__label > .inkra-pencil-text,
8749
+ .inkra-breadcrumb__link .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source,
8750
+ .inkra-breadcrumb__trigger .inkra-button__label,
8751
+ .inkra-breadcrumb__trigger .inkra-button__label > .inkra-pencil-text,
8752
+ .inkra-breadcrumb__trigger .inkra-button__label > .inkra-pencil-text > .inkra-pencil-text__source {
8753
+ max-width: 100%;
8754
+ min-width: 0;
8755
+ overflow-wrap: anywhere;
8756
+ white-space: normal;
8757
+ }
8758
+ .inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__surface {
8759
+ height: auto;
8760
+ max-width: 100%;
8761
+ min-height: var(--inkra-breadcrumb-item-height);
8762
+ min-width: var(--inkra-breadcrumb-item-height);
8763
+ }
8764
+ .inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__content {
8765
+ max-width: 100%;
8766
+ min-width: 0;
8767
+ }
8768
+ .inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger) .inkra-button__focus-ring {
8769
+ height: 100%;
8770
+ inset-inline: 0;
8771
+ top: 0;
8772
+ transform: none;
8773
+ }
8774
+ .inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger):hover:not(:disabled):not([aria-disabled="true"]) .inkra-button__surface,
8775
+ .inkra-breadcrumb :is(.inkra-breadcrumb__link, .inkra-breadcrumb__trigger):active:not(:disabled):not([aria-disabled="true"]) .inkra-button__surface {
8776
+ transform: none;
8777
+ }
8778
+ .inkra-breadcrumb__page {
8779
+ align-items: center;
8780
+ box-sizing: border-box;
8781
+ display: inline-flex;
8782
+ font-family: "Trip Map Hand", "HanziPen SC", "Hannotate SC", "Kaiti SC", "STKaiti", cursive;
8783
+ font-size: var(--inkra-breadcrumb-item-font-size);
8784
+ gap: var(--inkra-breadcrumb-item-gap);
8785
+ justify-content: center;
8786
+ letter-spacing: var(--inkra-letter-spacing);
8787
+ line-height: var(--inkra-line-ui);
8788
+ max-width: 100%;
8789
+ min-height: var(--inkra-breadcrumb-item-height);
8790
+ min-width: var(--inkra-breadcrumb-item-height);
8791
+ overflow-wrap: anywhere;
8792
+ padding-inline: var(--inkra-breadcrumb-item-padding);
8793
+ }
8794
+ .inkra-breadcrumb__label,
8795
+ .inkra-breadcrumb__label > .inkra-pencil-text {
8796
+ align-items: center;
8797
+ display: inline-flex;
8798
+ min-width: 0;
8799
+ overflow: visible;
8800
+ overflow-wrap: anywhere;
8801
+ white-space: normal;
8802
+ }
8803
+ .inkra-breadcrumb__label > .inkra-pencil-text > .inkra-pencil-text__source {
8804
+ display: block;
8805
+ min-width: 0;
8806
+ white-space: inherit;
8807
+ }
8808
+ .inkra-breadcrumb__icon {
8809
+ align-items: center;
8810
+ display: inline-flex;
8811
+ flex: 0 0 var(--inkra-breadcrumb-item-icon-size);
8812
+ height: var(--inkra-breadcrumb-item-icon-size);
8813
+ justify-content: center;
8814
+ width: var(--inkra-breadcrumb-item-icon-size);
8815
+ }
8816
+ .inkra-breadcrumb__icon > :is(svg, canvas) {
8817
+ height: 100% !important;
8818
+ max-height: 100%;
8819
+ max-width: 100%;
8820
+ width: 100% !important;
8821
+ }
8726
8822
  .inkra-breadcrumb__separator { display: inline-flex; flex: 0 0 auto; align-items: center; justify-content: center; min-width: 16px; color: var(--inkra-ink-subtle); pointer-events: none; }
8727
8823
 
8728
8824
  .inkra-calendar-scroll { max-width: 100%; min-width: 0; overflow-x: auto; }
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@inkra/react",
3
- "version": "0.5.0",
3
+ "version": "0.6.0",
4
4
  "description": "Hand-drawn React controls with native semantics and deterministic decoration.",
5
5
  "type": "module",
6
6
  "license": "MIT",