@waggylabs/yumekit 0.4.3-beta.39 → 0.4.3-beta.40

package/CHANGELOG.md

@@ -36,6 +36,7 @@ Delete any empty sections before publishing.
 ### Added
 
 - New `y-stepper` component — a multi-step wizard that guides users through a sequential flow. Step content is provided via named slots defined in the `items` JSON array (`{ label, slot, description?, icon?, status? }`). Supports `current` (zero-based active step index), `orientation` (`"horizontal"` | `"vertical"`), `position` (`"start"` | `"end"` — controls whether indicators appear before or after the content), `size` (`"small"` | `"medium"` | `"large"`), `linear` (restricts free navigation), and `editable` (allows returning to completed steps). Methods: `next()`, `previous()`, `goTo(index)`, `complete(index?)`, `reset()`. Events: cancelable `change`, `complete`, `finish`. Full ARIA support with `role="list"`, `aria-current="step"`, `aria-controls`/`aria-labelledby` linkage, and keyboard navigation.
+- New `y-breadcrumbs` component — a navigation breadcrumb trail. Accepts an `items` JSON array (`{ text, href?, icon? }`). Supports `separator` (custom separator character or slotted icon), `max-items` (collapses middle items with an expand button), `size` (`"small"` | `"medium"` | `"large"`), and `history` (set to `"false"` for full-page navigation instead of `pushState`). Fires cancelable `navigate` and `expand` events. Full ARIA with `<nav aria-label="Breadcrumb">`, `<ol>`, `aria-current="page"`, and `aria-hidden` separators.
 - New `y-gallery` component — a media gallery that accepts `<img>` or `<figure>` children and arranges them in `grid`, `row`, `column`, or `masonry` layouts. Supports `columns`, `gap` (`"small"` | `"medium"` | `"large"` or any CSS length), `aspect-ratio`, `expandable` (lightbox with prev/next navigation), `loop`, and `size` attributes. The expanded view uses `<y-icon>` for nav arrows and supports `data-src` for full-resolution images, `<figcaption>` captions, and image counter. Icon slots (`expand-prev-icon`, `expand-next-icon`, `expand-close-icon`) allow custom icons. Fires `expand`, `close`, and `navigate` events.
 - New `y-colorpicker` component — a standalone color picker widget with a 2D saturation/brightness canvas, hue slider, optional alpha slider, format selector, and channel inputs. Supports `value` (`#hex`, `rgb()`, `rgba()`, `hsl()`, `hsla()`, `hsv()`, `hsva()`), `format` (`"hex"` | `"rgb"` | `"hsl"` | `"hsv"`), `formats` (JSON array of available formats), `show-alpha` (alpha channel), and `size` attributes.
 - New `y-color` component — a form-associated color input with a trigger/popup pattern (like `<y-date>`). Renders a color swatch preview and value string in the trigger; opens a `<y-colorpicker>` popup on click. Supports `value`, `format`, `formats`, `show-alpha`, `placeholder`, `name`, `disabled`, `invalid`, `clearable`, `size`, and `label-position` attributes. Uses `ElementInternals` for `FormData` participation.

package/README.md

@@ -17,7 +17,7 @@
 
 ## Overview
 
-YumeKit is a collection of 33 production-ready custom elements built with native Web Components. It works with any framework — or none at all — and ships with a comprehensive design token system, built-in theming, an icon registry, and full TypeScript support.
+YumeKit is a collection of 34 production-ready custom elements built with native Web Components. It works with any framework — or none at all — and ships with a comprehensive design token system, built-in theming, an icon registry, and full TypeScript support.
 
 - **Zero dependencies** — built entirely on web standards
 - **Framework-agnostic** — works with React, Vue, Svelte, or plain HTML
@@ -78,6 +78,7 @@ Then use the `<y-theme>` component to apply a theme:
 | App Bar      | `<y-appbar>`       | Top or side navigation bar                          |
 | Avatar       | `<y-avatar>`       | User avatar with shape and color variants           |
 | Badge        | `<y-badge>`        | Status badge or label                               |
+| Breadcrumbs  | `<y-breadcrumbs>`  | Navigation breadcrumb trail with collapse support   |
 | Button       | `<y-button>`       | Button with icon, size, and style variants          |
 | Button Group | `<y-button-group>` | Groups buttons (or inputs) into a connected toolbar |
 | Card         | `<y-card>`         | Content card container                              |

package/dist/components/y-breadcrumbs/y-breadcrumbs.d.ts

@@ -0,0 +1,35 @@
+export class YumeBreadcrumbs extends HTMLElement {
+    static get observedAttributes(): string[];
+    _expanded: boolean;
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set history(val: string);
+    /** When omitted, navigation uses pushState. Set to "false" for full-page navigation. */
+    get history(): string;
+    set items(val: any);
+    /** Array of breadcrumb items. */
+    get items(): any;
+    set maxItems(val: number);
+    /** Maximum visible items before collapsing. */
+    get maxItems(): number;
+    set separator(val: string);
+    /** Text or character used as the separator. Defaults to a chevron-right icon when unset. */
+    get separator(): string;
+    set size(val: string);
+    /** Controls padding, font size, and icon size. */
+    get size(): string;
+    render(): void;
+    _buildExpandItem(): HTMLElement;
+    _buildHostStyles(): string;
+    _buildItem(item: any, index: any, items: any): HTMLElement;
+    _buildItemStyles(): string;
+    _buildSeparatorItem(): HTMLElement;
+    _buildSeparatorStyles(): string;
+    _buildStyles(): string;
+    _getDefaultFontSize(): any;
+    _getDefaultGap(): any;
+    _getIconSize(): any;
+    _getVisibleItems(items: any): any;
+    _onExpand(): void;
+    _onNavigate(e: any, href: any): void;
+}

package/dist/components/y-breadcrumbs.d.ts

@@ -0,0 +1,35 @@
+export class YumeBreadcrumbs extends HTMLElement {
+    static get observedAttributes(): string[];
+    _expanded: boolean;
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set history(val: string);
+    /** When omitted, navigation uses pushState. Set to "false" for full-page navigation. */
+    get history(): string;
+    set items(val: any);
+    /** Array of breadcrumb items. */
+    get items(): any;
+    set maxItems(val: number);
+    /** Maximum visible items before collapsing. */
+    get maxItems(): number;
+    set separator(val: string);
+    /** Text or character used as the separator. Defaults to a chevron-right icon when unset. */
+    get separator(): string;
+    set size(val: string);
+    /** Controls padding, font size, and icon size. */
+    get size(): string;
+    render(): void;
+    _buildExpandItem(): HTMLElement;
+    _buildHostStyles(): string;
+    _buildItem(item: any, index: any, items: any): HTMLElement;
+    _buildItemStyles(): string;
+    _buildSeparatorItem(): HTMLElement;
+    _buildSeparatorStyles(): string;
+    _buildStyles(): string;
+    _getDefaultFontSize(): any;
+    _getDefaultGap(): any;
+    _getIconSize(): any;
+    _getVisibleItems(items: any): any;
+    _onExpand(): void;
+    _onNavigate(e: any, href: any): void;
+}