@waggylabs/yumekit 0.4.3-beta.38 → 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-appbar.d.ts

@@ -0,0 +1,66 @@
+export class YumeAppbar extends HTMLElement {
+    static get observedAttributes(): string[];
+    _onCollapseClick(): void;
+    _onMediaChange(e: any): void;
+    _idCounter: number;
+    _mql: MediaQueryList;
+    _isMobile: boolean;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    attributeChangedCallback(name: any, oldVal: any, newVal: any): void;
+    set collapsed(val: boolean);
+    /** Whether the sidebar is currently collapsed. */
+    get collapsed(): boolean;
+    set items(val: any);
+    /** Nav items array parsed from the "items" attribute. */
+    get items(): any;
+    set menuDirection(val: string);
+    /**
+     * Direction menus pop out from nav buttons:
+     * "right", "down", or unset (auto: vertical → right, horizontal → down).
+     */
+    get menuDirection(): string;
+    /** Whether the appbar is currently rendering in mobile mode. */
+    get mobile(): boolean;
+    set mobileBreakpoint(val: string);
+    /**
+     * Override the mobile breakpoint (in pixels) for this instance.
+     * Falls back to the CSS variable --component-appbar-mobile-breakpoint (default 768).
+     */
+    get mobileBreakpoint(): string;
+    set orientation(val: string);
+    /** Layout orientation: "vertical" | "horizontal" (default "vertical"). */
+    get orientation(): string;
+    set size(val: string);
+    /** Size variant: "small" | "medium" | "large" (default "medium"). */
+    get size(): string;
+    set history(val: string);
+    /**
+     * Navigation mode: omit for pushState (SPA-friendly), set to "false" for full-page navigation.
+     * Regardless of this setting, a cancelable "navigate" event is always dispatched first.
+     */
+    get history(): string;
+    set sticky(val: string | false);
+    /** Sticky position: "start" | "end" | false. */
+    get sticky(): string | false;
+    /** Toggles the collapsed state of the sidebar. */
+    toggle(): void;
+    render(): void;
+    _buildCollapseButton(cfg: any, isCollapsed: any): HTMLElement;
+    _buildHeader(): HTMLDivElement;
+    _buildNavItem(item: any, cfg: any, isVertical: any, isCollapsed: any, menuDir: any): HTMLDivElement;
+    _getBreakpointPx(): number;
+    _initRender(): void;
+    _isItemActive(item: any): boolean;
+    _makeSlot(name: any): HTMLSlotElement;
+    _renderDesktop(): void;
+    _renderMobile(): void;
+    _setupMediaQuery(): void;
+    _teardownMediaQuery(): void;
+    /**
+     * Convert appbar nav items to y-menu item format.
+     * Maps `href` → `url` and recursively converts children.
+     */
+    _toMenuItems(items: any): any;
+    _uid(prefix: any): string;
+}

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

@@ -0,0 +1,23 @@
+export class YumeAvatar extends HTMLElement {
+    static get observedAttributes(): string[];
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set alt(val: string);
+    /** Initials fallback text when no src is provided (default "AN"). */
+    get alt(): string;
+    set color(val: string);
+    /** Color theme for the initials avatar background. */
+    get color(): string;
+    set shape(val: string);
+    /** Shape of the avatar: "circle" | "square" | "rounded" (default "circle"). */
+    get shape(): string;
+    set size(val: string);
+    /** Avatar size: "small" | "medium" | "large" (default "medium"). */
+    get size(): string;
+    set src(val: string);
+    /** Image URL. When set, renders an <img> instead of initials. */
+    get src(): string;
+    render(): void;
+    _buildStyleSheet(dimensions: any, borderRadius: any, bgColor: any, textColor: any): CSSStyleSheet;
+    _getDimensions(size: any): any;
+    _getInitials(alt: any): any;
+}

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

@@ -0,0 +1,25 @@
+export class YumeBadge extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set alignment(val: string);
+    /** Horizontal alignment of the badge: "left" | "right" (default "right"). */
+    get alignment(): string;
+    set color(val: string);
+    /** Color theme: "primary" | "secondary" | "base" | "success" | "warning" | "error" | "help". */
+    get color(): string;
+    set position(val: string);
+    /** Vertical position of the badge: "top" | "bottom" (default "top"). */
+    get position(): string;
+    set size(val: string);
+    /** Badge size: "small" | "medium" | "large" (default "small"). */
+    get size(): string;
+    set value(val: string);
+    /** The text content displayed inside the badge. */
+    get value(): string;
+    render(): void;
+    _getBadgeColors(color: any): any;
+    _getBadgePosition(position: any, alignment: any): string;
+    _getSizeAttributes(size: any): any;
+    _hasTargetContent(): boolean;
+}

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

@@ -0,0 +1,38 @@
+export class YumeBanner extends HTMLElement {
+    static get observedAttributes(): string[];
+    connectedCallback(): void;
+    attributeChangedCallback(name: any, oldValue: any, newValue: any): void;
+    set color(val: string);
+    /** Semantic color for the banner background. */
+    get color(): string;
+    set icon(val: string);
+    /** Icon name passed to an internal y-icon. */
+    get icon(): string;
+    set position(val: string);
+    /** Position mode: "push" (in-flow) or "overlap" (over content). */
+    get position(): string;
+    set sticky(val: boolean);
+    /** When true with position="overlap", fixes to viewport top on scroll. */
+    get sticky(): boolean;
+    set dismissable(val: boolean);
+    /** Whether the banner shows a close button. */
+    get dismissable(): boolean;
+    set dismissed(val: boolean);
+    /** Whether the banner is currently dismissed (hidden). */
+    get dismissed(): boolean;
+    set size(val: string);
+    /** Controls padding, icon size, and font size. */
+    get size(): string;
+    /** Hides the banner and fires the dismiss event. */
+    dismiss(): void;
+    /** Shows the banner if it is currently dismissed. */
+    show(): void;
+    render(): void;
+    _bindSlotListeners(): void;
+    _updateSlotVisibility(): void;
+    _applyDismissedState(): void;
+    _getAriaLabel(color: any): any;
+    _getIconSize(size: any): any;
+    _getColorVars(color: any): any;
+    _buildStyles(color: any, size: any): string;
+}

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;
+}