@nuralyui/breadcrumb 0.0.1

package/breadcrumb.component.d.ts

@@ -0,0 +1,122 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { LitElement, nothing, TemplateResult } from 'lit';
+import { BreadcrumbItem, BreadcrumbSeparator, BreadcrumbSeparatorConfig } from './breadcrumb.types.js';
+import '../icon/index.js';
+declare const NrBreadcrumbElement_base: (new (...args: any[]) => import("../../shared/dependency-mixin.js").DependencyAware) & (new (...args: any[]) => import("../../shared/theme-mixin.js").ThemeAware) & (new (...args: any[]) => import("../../shared/event-handler-mixin.js").EventHandlerCapable) & typeof LitElement;
+/**
+ * # Breadcrumb Component
+ *
+ * Display the current location within a hierarchy and allow navigation back to higher levels.
+ * Breadcrumbs show where you are in the site structure and make it easy to navigate up the hierarchy.
+ *
+ * ## Features
+ * - Configurable separator styles (slash, arrow, chevron, etc.)
+ * - Support for icons alongside text
+ * - Dropdown menus for complex hierarchies
+ * - Clickable links with href or custom click handlers
+ * - RTL support
+ * - Fully accessible with keyboard navigation
+ * - Theme-aware styling
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic breadcrumb -->
+ * <nr-breadcrumb .items="${[
+ *   { title: 'Home', href: '/' },
+ *   { title: 'Category', href: '/category' },
+ *   { title: 'Product' }
+ * ]}"></nr-breadcrumb>
+ *
+ * <!-- With custom separator -->
+ * <nr-breadcrumb
+ *   separator=">"
+ *   .items="${items}">
+ * </nr-breadcrumb>
+ *
+ * <!-- With icons -->
+ * <nr-breadcrumb .items="${[
+ *   { title: 'Home', icon: 'home', href: '/' },
+ *   { title: 'Settings', icon: 'settings', href: '/settings' },
+ *   { title: 'Profile' }
+ * ]}"></nr-breadcrumb>
+ *
+ * <!-- With dropdown menu -->
+ * <nr-breadcrumb .items="${[
+ *   { title: 'Home', href: '/' },
+ *   {
+ *     title: 'Products',
+ *     menu: [
+ *       { label: 'Electronics', href: '/products/electronics' },
+ *       { label: 'Clothing', href: '/products/clothing' }
+ *     ]
+ *   },
+ *   { title: 'Current Item' }
+ * ]}"></nr-breadcrumb>
+ * ```
+ *
+ * @element nr-breadcrumb
+ * @fires nr-breadcrumb-click - Fired when a breadcrumb item is clicked
+ *
+ * @cssproperty --nuraly-breadcrumb-font-size - Font size of breadcrumb items
+ * @cssproperty --nuraly-breadcrumb-line-height - Line height of breadcrumb items
+ * @cssproperty --nuraly-breadcrumb-item-color - Color of breadcrumb items
+ * @cssproperty --nuraly-breadcrumb-link-color - Color of breadcrumb links
+ * @cssproperty --nuraly-breadcrumb-link-hover-color - Color of breadcrumb links on hover
+ * @cssproperty --nuraly-breadcrumb-last-item-color - Color of the last breadcrumb item
+ * @cssproperty --nuraly-breadcrumb-separator-color - Color of separators
+ * @cssproperty --nuraly-breadcrumb-separator-margin - Margin around separators
+ * @cssproperty --nuraly-breadcrumb-icon-font-size - Font size of icons
+ */
+export declare class NrBreadcrumbElement extends NrBreadcrumbElement_base {
+    static styles: import("lit").CSSResult;
+    requiredComponents: string[];
+    /**
+     * Array of breadcrumb items to display
+     */
+    items: BreadcrumbItem[];
+    /**
+     * Separator between breadcrumb items
+     * Can be a string or one of the predefined separator types
+     */
+    separator: BreadcrumbSeparator | string;
+    /**
+     * Custom separator configuration for more control
+     */
+    separatorConfig?: BreadcrumbSeparatorConfig;
+    /**
+     * Handle breadcrumb item click
+     */
+    private handleItemClick;
+    /**
+     * Handle menu item click
+     */
+    private handleMenuItemClick;
+    /**
+     * Render a breadcrumb item icon
+     */
+    private renderIcon;
+    /**
+     * Render the separator between breadcrumb items
+     */
+    private renderSeparator;
+    /**
+     * Render dropdown menu for an item
+     */
+    private renderMenu;
+    /**
+     * Render a single breadcrumb item
+     */
+    private renderItem;
+    render(): TemplateResult<1> | typeof nothing;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        'nr-breadcrumb': NrBreadcrumbElement;
+    }
+}
+export {};
+//# sourceMappingURL=breadcrumb.component.d.ts.map

package/breadcrumb.component.js

@@ -0,0 +1,258 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { html, LitElement, nothing } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { map } from 'lit/directives/map.js';
+import { styles } from './breadcrumb.style.js';
+import { NuralyUIBaseMixin } from '../../shared/base-mixin.js';
+import '../icon/index.js';
+/**
+ * # Breadcrumb Component
+ *
+ * Display the current location within a hierarchy and allow navigation back to higher levels.
+ * Breadcrumbs show where you are in the site structure and make it easy to navigate up the hierarchy.
+ *
+ * ## Features
+ * - Configurable separator styles (slash, arrow, chevron, etc.)
+ * - Support for icons alongside text
+ * - Dropdown menus for complex hierarchies
+ * - Clickable links with href or custom click handlers
+ * - RTL support
+ * - Fully accessible with keyboard navigation
+ * - Theme-aware styling
+ *
+ * ## Usage
+ * ```html
+ * <!-- Basic breadcrumb -->
+ * <nr-breadcrumb .items="${[
+ *   { title: 'Home', href: '/' },
+ *   { title: 'Category', href: '/category' },
+ *   { title: 'Product' }
+ * ]}"></nr-breadcrumb>
+ *
+ * <!-- With custom separator -->
+ * <nr-breadcrumb
+ *   separator=">"
+ *   .items="${items}">
+ * </nr-breadcrumb>
+ *
+ * <!-- With icons -->
+ * <nr-breadcrumb .items="${[
+ *   { title: 'Home', icon: 'home', href: '/' },
+ *   { title: 'Settings', icon: 'settings', href: '/settings' },
+ *   { title: 'Profile' }
+ * ]}"></nr-breadcrumb>
+ *
+ * <!-- With dropdown menu -->
+ * <nr-breadcrumb .items="${[
+ *   { title: 'Home', href: '/' },
+ *   {
+ *     title: 'Products',
+ *     menu: [
+ *       { label: 'Electronics', href: '/products/electronics' },
+ *       { label: 'Clothing', href: '/products/clothing' }
+ *     ]
+ *   },
+ *   { title: 'Current Item' }
+ * ]}"></nr-breadcrumb>
+ * ```
+ *
+ * @element nr-breadcrumb
+ * @fires nr-breadcrumb-click - Fired when a breadcrumb item is clicked
+ *
+ * @cssproperty --nuraly-breadcrumb-font-size - Font size of breadcrumb items
+ * @cssproperty --nuraly-breadcrumb-line-height - Line height of breadcrumb items
+ * @cssproperty --nuraly-breadcrumb-item-color - Color of breadcrumb items
+ * @cssproperty --nuraly-breadcrumb-link-color - Color of breadcrumb links
+ * @cssproperty --nuraly-breadcrumb-link-hover-color - Color of breadcrumb links on hover
+ * @cssproperty --nuraly-breadcrumb-last-item-color - Color of the last breadcrumb item
+ * @cssproperty --nuraly-breadcrumb-separator-color - Color of separators
+ * @cssproperty --nuraly-breadcrumb-separator-margin - Margin around separators
+ * @cssproperty --nuraly-breadcrumb-icon-font-size - Font size of icons
+ */
+let NrBreadcrumbElement = class NrBreadcrumbElement extends NuralyUIBaseMixin(LitElement) {
+    constructor() {
+        super(...arguments);
+        this.requiredComponents = ['nr-icon'];
+        /**
+         * Array of breadcrumb items to display
+         */
+        this.items = [];
+        /**
+         * Separator between breadcrumb items
+         * Can be a string or one of the predefined separator types
+         */
+        this.separator = "/" /* BreadcrumbSeparator.Slash */;
+    }
+    /**
+     * Handle breadcrumb item click
+     */
+    handleItemClick(item, e) {
+        if (item.disabled) {
+            e.preventDefault();
+            return;
+        }
+        // Dispatch custom event
+        this.dispatchEvent(new CustomEvent('nr-breadcrumb-click', {
+            detail: { item, event: e },
+            bubbles: true,
+            composed: true
+        }));
+        // Call custom click handler if provided
+        if (item.onClick) {
+            item.onClick(e);
+        }
+    }
+    /**
+     * Handle menu item click
+     */
+    handleMenuItemClick(menuItem, e) {
+        if (menuItem.disabled) {
+            e.preventDefault();
+            return;
+        }
+        if (menuItem.onClick) {
+            menuItem.onClick(e);
+        }
+    }
+    /**
+     * Render a breadcrumb item icon
+     */
+    renderIcon(item) {
+        if (!item.icon) {
+            return nothing;
+        }
+        return html `
+      <nr-icon
+        class="breadcrumb-icon"
+        name="${item.icon}"
+        type="${item.iconType || 'regular'}"
+      ></nr-icon>
+    `;
+    }
+    /**
+     * Render the separator between breadcrumb items
+     */
+    renderSeparator() {
+        if (this.separatorConfig) {
+            if (this.separatorConfig.isIcon) {
+                return html `
+          <span class="breadcrumb-separator">
+            <nr-icon
+              name="${this.separatorConfig.separator}"
+              type="${this.separatorConfig.iconType || 'regular'}"
+            ></nr-icon>
+          </span>
+        `;
+            }
+            return html `<span class="breadcrumb-separator">${this.separatorConfig.separator}</span>`;
+        }
+        return html `<span class="breadcrumb-separator">${this.separator}</span>`;
+    }
+    /**
+     * Render dropdown menu for an item
+     */
+    renderMenu(menu) {
+        return html `
+      <div class="breadcrumb-dropdown">
+        ${map(menu, (menuItem) => html `
+            ${menuItem.href
+            ? html `
+                  <a
+                    class="breadcrumb-menu-item ${menuItem.disabled ? 'disabled' : ''}"
+                    href="${menuItem.href}"
+                    @click="${(e) => this.handleMenuItemClick(menuItem, e)}"
+                  >
+                    ${menuItem.icon
+                ? html `<nr-icon name="${menuItem.icon}"></nr-icon>`
+                : nothing}
+                    <span>${menuItem.label}</span>
+                  </a>
+                `
+            : html `
+                  <div
+                    class="breadcrumb-menu-item ${menuItem.disabled ? 'disabled' : ''}"
+                    @click="${(e) => this.handleMenuItemClick(menuItem, e)}"
+                  >
+                    ${menuItem.icon
+                ? html `<nr-icon name="${menuItem.icon}"></nr-icon>`
+                : nothing}
+                    <span>${menuItem.label}</span>
+                  </div>
+                `}
+          `)}
+      </div>
+    `;
+    }
+    /**
+     * Render a single breadcrumb item
+     */
+    renderItem(item, index) {
+        const isLast = index === this.items.length - 1;
+        const hasMenu = item.menu && item.menu.length > 0;
+        const content = html `
+      ${this.renderIcon(item)}
+      <span>${item.title}</span>
+    `;
+        return html `
+      <li class="breadcrumb-item ${hasMenu ? 'breadcrumb-item-with-menu' : ''} ${item.className || ''}">
+        ${isLast
+            ? html `<span class="breadcrumb-text">${content}</span>`
+            : item.href
+                ? html `
+                <a
+                  class="breadcrumb-link ${item.disabled ? 'disabled' : ''}"
+                  href="${item.href}"
+                  @click="${(e) => this.handleItemClick(item, e)}"
+                >
+                  ${content}
+                </a>
+              `
+                : html `
+                <span
+                  class="breadcrumb-link ${item.disabled ? 'disabled' : ''}"
+                  @click="${(e) => this.handleItemClick(item, e)}"
+                >
+                  ${content}
+                </span>
+              `}
+        ${hasMenu ? this.renderMenu(item.menu) : nothing}
+      </li>
+      ${!isLast ? this.renderSeparator() : nothing}
+    `;
+    }
+    render() {
+        if (!this.items || this.items.length === 0) {
+            return nothing;
+        }
+        return html `
+      <nav aria-label="Breadcrumb" class="breadcrumb">
+        ${map(this.items, (item, index) => this.renderItem(item, index))}
+      </nav>
+    `;
+    }
+};
+NrBreadcrumbElement.styles = styles;
+__decorate([
+    property({ type: Array })
+], NrBreadcrumbElement.prototype, "items", void 0);
+__decorate([
+    property({ type: String })
+], NrBreadcrumbElement.prototype, "separator", void 0);
+__decorate([
+    property({ type: Object, attribute: 'separator-config' })
+], NrBreadcrumbElement.prototype, "separatorConfig", void 0);
+NrBreadcrumbElement = __decorate([
+    customElement('nr-breadcrumb')
+], NrBreadcrumbElement);
+export { NrBreadcrumbElement };
+//# sourceMappingURL=breadcrumb.component.js.map

package/breadcrumb.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.component.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.component.ts"],"names":[],"mappings":"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","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { html, LitElement, nothing, TemplateResult } from 'lit';\nimport { customElement, property } from 'lit/decorators.js';\nimport { map } from 'lit/directives/map.js';\nimport { styles } from './breadcrumb.style.js';\nimport { NuralyUIBaseMixin } from '../../shared/base-mixin.js';\nimport {\n    BreadcrumbItem,\n    BreadcrumbMenuItem,\n    BreadcrumbSeparator,\n    BreadcrumbSeparatorConfig\n} from './breadcrumb.types.js';\nimport '../icon/index.js';\n\n/**\n * # Breadcrumb Component\n * \n * Display the current location within a hierarchy and allow navigation back to higher levels.\n * Breadcrumbs show where you are in the site structure and make it easy to navigate up the hierarchy.\n * \n * ## Features\n * - Configurable separator styles (slash, arrow, chevron, etc.)\n * - Support for icons alongside text\n * - Dropdown menus for complex hierarchies\n * - Clickable links with href or custom click handlers\n * - RTL support\n * - Fully accessible with keyboard navigation\n * - Theme-aware styling\n * \n * ## Usage\n * ```html\n * <!-- Basic breadcrumb -->\n * <nr-breadcrumb .items=\"${[\n *   { title: 'Home', href: '/' },\n *   { title: 'Category', href: '/category' },\n *   { title: 'Product' }\n * ]}\"></nr-breadcrumb>\n * \n * <!-- With custom separator -->\n * <nr-breadcrumb \n *   separator=\">\"\n *   .items=\"${items}\">\n * </nr-breadcrumb>\n * \n * <!-- With icons -->\n * <nr-breadcrumb .items=\"${[\n *   { title: 'Home', icon: 'home', href: '/' },\n *   { title: 'Settings', icon: 'settings', href: '/settings' },\n *   { title: 'Profile' }\n * ]}\"></nr-breadcrumb>\n * \n * <!-- With dropdown menu -->\n * <nr-breadcrumb .items=\"${[\n *   { title: 'Home', href: '/' },\n *   { \n *     title: 'Products',\n *     menu: [\n *       { label: 'Electronics', href: '/products/electronics' },\n *       { label: 'Clothing', href: '/products/clothing' }\n *     ]\n *   },\n *   { title: 'Current Item' }\n * ]}\"></nr-breadcrumb>\n * ```\n * \n * @element nr-breadcrumb\n * @fires nr-breadcrumb-click - Fired when a breadcrumb item is clicked\n * \n * @cssproperty --nuraly-breadcrumb-font-size - Font size of breadcrumb items\n * @cssproperty --nuraly-breadcrumb-line-height - Line height of breadcrumb items\n * @cssproperty --nuraly-breadcrumb-item-color - Color of breadcrumb items\n * @cssproperty --nuraly-breadcrumb-link-color - Color of breadcrumb links\n * @cssproperty --nuraly-breadcrumb-link-hover-color - Color of breadcrumb links on hover\n * @cssproperty --nuraly-breadcrumb-last-item-color - Color of the last breadcrumb item\n * @cssproperty --nuraly-breadcrumb-separator-color - Color of separators\n * @cssproperty --nuraly-breadcrumb-separator-margin - Margin around separators\n * @cssproperty --nuraly-breadcrumb-icon-font-size - Font size of icons\n */\n@customElement('nr-breadcrumb')\nexport class NrBreadcrumbElement extends NuralyUIBaseMixin(LitElement) {\n  static override styles = styles;\n\n  override requiredComponents = ['nr-icon'];\n\n  /**\n   * Array of breadcrumb items to display\n   */\n  @property({ type: Array })\n  items: BreadcrumbItem[] = [];\n\n  /**\n   * Separator between breadcrumb items\n   * Can be a string or one of the predefined separator types\n   */\n  @property({ type: String })\n  separator: BreadcrumbSeparator | string = BreadcrumbSeparator.Slash;\n\n  /**\n   * Custom separator configuration for more control\n   */\n  @property({ type: Object, attribute: 'separator-config' })\n  separatorConfig?: BreadcrumbSeparatorConfig;\n\n  /**\n   * Handle breadcrumb item click\n   */\n  private handleItemClick(item: BreadcrumbItem, e: MouseEvent): void {\n    if (item.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    // Dispatch custom event\n    this.dispatchEvent(\n      new CustomEvent('nr-breadcrumb-click', {\n        detail: { item, event: e },\n        bubbles: true,\n        composed: true\n      })\n    );\n\n    // Call custom click handler if provided\n    if (item.onClick) {\n      item.onClick(e);\n    }\n  }\n\n  /**\n   * Handle menu item click\n   */\n  private handleMenuItemClick(menuItem: BreadcrumbMenuItem, e: MouseEvent): void {\n    if (menuItem.disabled) {\n      e.preventDefault();\n      return;\n    }\n\n    if (menuItem.onClick) {\n      menuItem.onClick(e);\n    }\n  }\n\n  /**\n   * Render a breadcrumb item icon\n   */\n  private renderIcon(item: BreadcrumbItem): TemplateResult | typeof nothing {\n    if (!item.icon) {\n      return nothing;\n    }\n\n    return html`\n      <nr-icon\n        class=\"breadcrumb-icon\"\n        name=\"${item.icon}\"\n        type=\"${item.iconType || 'regular'}\"\n      ></nr-icon>\n    `;\n  }\n\n  /**\n   * Render the separator between breadcrumb items\n   */\n  private renderSeparator(): TemplateResult {\n    if (this.separatorConfig) {\n      if (this.separatorConfig.isIcon) {\n        return html`\n          <span class=\"breadcrumb-separator\">\n            <nr-icon\n              name=\"${this.separatorConfig.separator}\"\n              type=\"${this.separatorConfig.iconType || 'regular'}\"\n            ></nr-icon>\n          </span>\n        `;\n      }\n      return html`<span class=\"breadcrumb-separator\">${this.separatorConfig.separator}</span>`;\n    }\n\n    return html`<span class=\"breadcrumb-separator\">${this.separator}</span>`;\n  }\n\n  /**\n   * Render dropdown menu for an item\n   */\n  private renderMenu(menu: BreadcrumbMenuItem[]): TemplateResult {\n    return html`\n      <div class=\"breadcrumb-dropdown\">\n        ${map(\n          menu,\n          (menuItem) => html`\n            ${menuItem.href\n              ? html`\n                  <a\n                    class=\"breadcrumb-menu-item ${menuItem.disabled ? 'disabled' : ''}\"\n                    href=\"${menuItem.href}\"\n                    @click=\"${(e: MouseEvent) => this.handleMenuItemClick(menuItem, e)}\"\n                  >\n                    ${menuItem.icon\n                      ? html`<nr-icon name=\"${menuItem.icon}\"></nr-icon>`\n                      : nothing}\n                    <span>${menuItem.label}</span>\n                  </a>\n                `\n              : html`\n                  <div\n                    class=\"breadcrumb-menu-item ${menuItem.disabled ? 'disabled' : ''}\"\n                    @click=\"${(e: MouseEvent) => this.handleMenuItemClick(menuItem, e)}\"\n                  >\n                    ${menuItem.icon\n                      ? html`<nr-icon name=\"${menuItem.icon}\"></nr-icon>`\n                      : nothing}\n                    <span>${menuItem.label}</span>\n                  </div>\n                `}\n          `\n        )}\n      </div>\n    `;\n  }\n\n  /**\n   * Render a single breadcrumb item\n   */\n  private renderItem(item: BreadcrumbItem, index: number): TemplateResult {\n    const isLast = index === this.items.length - 1;\n    const hasMenu = item.menu && item.menu.length > 0;\n\n    const content = html`\n      ${this.renderIcon(item)}\n      <span>${item.title}</span>\n    `;\n\n    return html`\n      <li class=\"breadcrumb-item ${hasMenu ? 'breadcrumb-item-with-menu' : ''} ${item.className || ''}\">\n        ${isLast\n          ? html`<span class=\"breadcrumb-text\">${content}</span>`\n          : item.href\n            ? html`\n                <a\n                  class=\"breadcrumb-link ${item.disabled ? 'disabled' : ''}\"\n                  href=\"${item.href}\"\n                  @click=\"${(e: MouseEvent) => this.handleItemClick(item, e)}\"\n                >\n                  ${content}\n                </a>\n              `\n            : html`\n                <span\n                  class=\"breadcrumb-link ${item.disabled ? 'disabled' : ''}\"\n                  @click=\"${(e: MouseEvent) => this.handleItemClick(item, e)}\"\n                >\n                  ${content}\n                </span>\n              `}\n        ${hasMenu ? this.renderMenu(item.menu!) : nothing}\n      </li>\n      ${!isLast ? this.renderSeparator() : nothing}\n    `;\n  }\n\n  override render() {\n    if (!this.items || this.items.length === 0) {\n      return nothing;\n    }\n\n    return html`\n      <nav aria-label=\"Breadcrumb\" class=\"breadcrumb\">\n        ${map(this.items, (item, index) => this.renderItem(item, index))}\n      </nav>\n    `;\n  }\n}\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'nr-breadcrumb': NrBreadcrumbElement;\n  }\n}\n"]}

package/breadcrumb.style.d.ts

@@ -0,0 +1,14 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Breadcrumb component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-breadcrumb component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=breadcrumb.style.d.ts.map

package/breadcrumb.style.js

@@ -0,0 +1,153 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+import { css } from 'lit';
+/**
+ * Breadcrumb component styles for the Hybrid UI Library
+ * Using shared CSS variables from /src/shared/themes/
+ *
+ * This file contains all the styling for the nr-breadcrumb component with
+ * clean CSS variable usage without local fallbacks and proper theme switching support.
+ */
+export const styles = css `
+  :host {
+    display: block;
+    font-family: var(--nuraly-font-family);
+    font-size: var(--nuraly-breadcrumb-font-size, 0.875rem);
+    line-height: var(--nuraly-breadcrumb-line-height, 1.5);
+    color: var(--nuraly-breadcrumb-item-color);
+  }
+
+  .breadcrumb {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    gap: 0;
+    list-style: none;
+    margin: 0;
+    padding: 0;
+  }
+
+  .breadcrumb-item {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-1, 0.25rem);
+    position: relative;
+  }
+
+  .breadcrumb-item:not(:last-child) {
+    margin-right: var(--nuraly-breadcrumb-separator-margin, 8px);
+  }
+
+  .breadcrumb-link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-1, 0.25rem);
+    color: var(--nuraly-breadcrumb-link-color);
+    text-decoration: none;
+    transition: color var(--nuraly-transition-fast, 0.15s) ease;
+    cursor: pointer;
+    padding: var(--nuraly-spacing-1, 0.25rem) 0;
+    border-radius: var(--nuraly-border-radius-small, 2px);
+  }
+
+  .breadcrumb-link:hover {
+    color: var(--nuraly-breadcrumb-link-hover-color);
+  }
+
+  .breadcrumb-link:focus {
+    outline: var(--nuraly-focus-outline);
+    outline-offset: var(--nuraly-focus-outline-offset);
+  }
+
+  .breadcrumb-link.disabled {
+    color: var(--nuraly-color-text-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  .breadcrumb-text {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-1, 0.25rem);
+    color: var(--nuraly-breadcrumb-last-item-color);
+    padding: var(--nuraly-spacing-1, 0.25rem) 0;
+  }
+
+  .breadcrumb-separator {
+    display: inline-flex;
+    align-items: center;
+    color: var(--nuraly-breadcrumb-separator-color);
+    margin: 0 var(--nuraly-breadcrumb-separator-margin, 8px);
+    user-select: none;
+    font-size: var(--nuraly-breadcrumb-icon-font-size, 14px);
+  }
+
+  .breadcrumb-icon {
+    display: inline-flex;
+    align-items: center;
+    font-size: var(--nuraly-breadcrumb-icon-font-size, 14px);
+  }
+
+  /* Dropdown menu styles */
+  .breadcrumb-item-with-menu {
+    position: relative;
+  }
+
+  .breadcrumb-item-with-menu:hover .breadcrumb-dropdown {
+    display: block;
+  }
+
+  .breadcrumb-dropdown {
+    display: none;
+    position: absolute;
+    top: 100%;
+    left: 0;
+    z-index: var(--nuraly-z-index-dropdown, 1000);
+    background-color: var(--nuraly-color-background-elevated);
+    border: 1px solid var(--nuraly-color-border);
+    border-radius: var(--nuraly-border-radius-medium, 4px);
+    box-shadow: var(--nuraly-shadow-dropdown);
+    min-width: 160px;
+    margin-top: var(--nuraly-spacing-1, 0.25rem);
+    padding: var(--nuraly-spacing-1, 0.25rem) 0;
+  }
+
+  .breadcrumb-menu-item {
+    display: flex;
+    align-items: center;
+    gap: var(--nuraly-spacing-2, 0.5rem);
+    padding: var(--nuraly-spacing-2, 0.5rem) var(--nuraly-spacing-3, 0.75rem);
+    color: var(--nuraly-color-text);
+    text-decoration: none;
+    cursor: pointer;
+    transition: background-color var(--nuraly-transition-fast, 0.15s) ease;
+  }
+
+  .breadcrumb-menu-item:hover {
+    background-color: var(--nuraly-color-background-hover);
+  }
+
+  .breadcrumb-menu-item.disabled {
+    color: var(--nuraly-color-text-disabled);
+    cursor: not-allowed;
+    pointer-events: none;
+  }
+
+  /* RTL Support */
+  :host([dir="rtl"]) .breadcrumb {
+    direction: rtl;
+  }
+
+  :host([dir="rtl"]) .breadcrumb-item:not(:last-child) {
+    margin-right: 0;
+    margin-left: var(--nuraly-breadcrumb-separator-margin, 8px);
+  }
+
+  :host([dir="rtl"]) .breadcrumb-separator {
+    transform: scaleX(-1);
+  }
+`;
+//# sourceMappingURL=breadcrumb.style.js.map

package/breadcrumb.style.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.style.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.style.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CA0IxB,CAAC","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\nimport { css } from 'lit';\n\n/**\n * Breadcrumb component styles for the Hybrid UI Library\n * Using shared CSS variables from /src/shared/themes/\n * \n * This file contains all the styling for the nr-breadcrumb component with\n * clean CSS variable usage without local fallbacks and proper theme switching support.\n */\nexport const styles = css`\n  :host {\n    display: block;\n    font-family: var(--nuraly-font-family);\n    font-size: var(--nuraly-breadcrumb-font-size, 0.875rem);\n    line-height: var(--nuraly-breadcrumb-line-height, 1.5);\n    color: var(--nuraly-breadcrumb-item-color);\n  }\n\n  .breadcrumb {\n    display: flex;\n    align-items: center;\n    flex-wrap: wrap;\n    gap: 0;\n    list-style: none;\n    margin: 0;\n    padding: 0;\n  }\n\n  .breadcrumb-item {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--nuraly-spacing-1, 0.25rem);\n    position: relative;\n  }\n\n  .breadcrumb-item:not(:last-child) {\n    margin-right: var(--nuraly-breadcrumb-separator-margin, 8px);\n  }\n\n  .breadcrumb-link {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--nuraly-spacing-1, 0.25rem);\n    color: var(--nuraly-breadcrumb-link-color);\n    text-decoration: none;\n    transition: color var(--nuraly-transition-fast, 0.15s) ease;\n    cursor: pointer;\n    padding: var(--nuraly-spacing-1, 0.25rem) 0;\n    border-radius: var(--nuraly-border-radius-small, 2px);\n  }\n\n  .breadcrumb-link:hover {\n    color: var(--nuraly-breadcrumb-link-hover-color);\n  }\n\n  .breadcrumb-link:focus {\n    outline: var(--nuraly-focus-outline);\n    outline-offset: var(--nuraly-focus-outline-offset);\n  }\n\n  .breadcrumb-link.disabled {\n    color: var(--nuraly-color-text-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  .breadcrumb-text {\n    display: inline-flex;\n    align-items: center;\n    gap: var(--nuraly-spacing-1, 0.25rem);\n    color: var(--nuraly-breadcrumb-last-item-color);\n    padding: var(--nuraly-spacing-1, 0.25rem) 0;\n  }\n\n  .breadcrumb-separator {\n    display: inline-flex;\n    align-items: center;\n    color: var(--nuraly-breadcrumb-separator-color);\n    margin: 0 var(--nuraly-breadcrumb-separator-margin, 8px);\n    user-select: none;\n    font-size: var(--nuraly-breadcrumb-icon-font-size, 14px);\n  }\n\n  .breadcrumb-icon {\n    display: inline-flex;\n    align-items: center;\n    font-size: var(--nuraly-breadcrumb-icon-font-size, 14px);\n  }\n\n  /* Dropdown menu styles */\n  .breadcrumb-item-with-menu {\n    position: relative;\n  }\n\n  .breadcrumb-item-with-menu:hover .breadcrumb-dropdown {\n    display: block;\n  }\n\n  .breadcrumb-dropdown {\n    display: none;\n    position: absolute;\n    top: 100%;\n    left: 0;\n    z-index: var(--nuraly-z-index-dropdown, 1000);\n    background-color: var(--nuraly-color-background-elevated);\n    border: 1px solid var(--nuraly-color-border);\n    border-radius: var(--nuraly-border-radius-medium, 4px);\n    box-shadow: var(--nuraly-shadow-dropdown);\n    min-width: 160px;\n    margin-top: var(--nuraly-spacing-1, 0.25rem);\n    padding: var(--nuraly-spacing-1, 0.25rem) 0;\n  }\n\n  .breadcrumb-menu-item {\n    display: flex;\n    align-items: center;\n    gap: var(--nuraly-spacing-2, 0.5rem);\n    padding: var(--nuraly-spacing-2, 0.5rem) var(--nuraly-spacing-3, 0.75rem);\n    color: var(--nuraly-color-text);\n    text-decoration: none;\n    cursor: pointer;\n    transition: background-color var(--nuraly-transition-fast, 0.15s) ease;\n  }\n\n  .breadcrumb-menu-item:hover {\n    background-color: var(--nuraly-color-background-hover);\n  }\n\n  .breadcrumb-menu-item.disabled {\n    color: var(--nuraly-color-text-disabled);\n    cursor: not-allowed;\n    pointer-events: none;\n  }\n\n  /* RTL Support */\n  :host([dir=\"rtl\"]) .breadcrumb {\n    direction: rtl;\n  }\n\n  :host([dir=\"rtl\"]) .breadcrumb-item:not(:last-child) {\n    margin-right: 0;\n    margin-left: var(--nuraly-breadcrumb-separator-margin, 8px);\n  }\n\n  :host([dir=\"rtl\"]) .breadcrumb-separator {\n    transform: scaleX(-1);\n  }\n`;\n"]}

package/breadcrumb.types.d.ts

@@ -0,0 +1,63 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+/**
+ * Breadcrumb separator types
+ */
+export declare const enum BreadcrumbSeparator {
+    Slash = "/",
+    Arrow = ">",
+    Chevron = "\u203A",
+    Dash = "-",
+    Dot = "\u2022"
+}
+/**
+ * Breadcrumb item interface
+ */
+export interface BreadcrumbItem {
+    /** Item title/label */
+    title: string;
+    /** Target URL or path */
+    href?: string;
+    /** Click handler for item */
+    onClick?: (e: MouseEvent) => void;
+    /** Icon name to display before title */
+    icon?: string;
+    /** Icon type (solid or regular) */
+    iconType?: 'solid' | 'regular';
+    /** Custom class name for the item */
+    className?: string;
+    /** Whether this item is disabled */
+    disabled?: boolean;
+    /** Dropdown menu items for this breadcrumb item */
+    menu?: BreadcrumbMenuItem[];
+}
+/**
+ * Breadcrumb menu item interface for dropdown menus
+ */
+export interface BreadcrumbMenuItem {
+    /** Menu item label */
+    label: string;
+    /** Menu item URL */
+    href?: string;
+    /** Click handler */
+    onClick?: (e: MouseEvent) => void;
+    /** Icon for menu item */
+    icon?: string;
+    /** Whether menu item is disabled */
+    disabled?: boolean;
+}
+/**
+ * Custom separator configuration
+ */
+export interface BreadcrumbSeparatorConfig {
+    /** Custom separator text or icon name */
+    separator: string;
+    /** Whether the separator is an icon */
+    isIcon?: boolean;
+    /** Icon type if separator is an icon */
+    iconType?: 'solid' | 'regular';
+}
+//# sourceMappingURL=breadcrumb.types.d.ts.map

package/breadcrumb.types.js

@@ -0,0 +1,7 @@
+/**
+ * @license
+ * Copyright 2023 Nuraly, Laabidi Aymen
+ * SPDX-License-Identifier: MIT
+ */
+export {};
+//# sourceMappingURL=breadcrumb.types.js.map

package/breadcrumb.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"breadcrumb.types.js","sourceRoot":"","sources":["../../../src/components/breadcrumb/breadcrumb.types.ts"],"names":[],"mappings":"AAAA;;;;GAIG","sourcesContent":["/**\n * @license\n * Copyright 2023 Nuraly, Laabidi Aymen\n * SPDX-License-Identifier: MIT\n */\n\n/**\n * Breadcrumb separator types\n */\nexport const enum BreadcrumbSeparator {\n  Slash = '/',\n  Arrow = '>',\n  Chevron = '›',\n  Dash = '-',\n  Dot = '•',\n}\n\n/**\n * Breadcrumb item interface\n */\nexport interface BreadcrumbItem {\n  /** Item title/label */\n  title: string;\n  /** Target URL or path */\n  href?: string;\n  /** Click handler for item */\n  onClick?: (e: MouseEvent) => void;\n  /** Icon name to display before title */\n  icon?: string;\n  /** Icon type (solid or regular) */\n  iconType?: 'solid' | 'regular';\n  /** Custom class name for the item */\n  className?: string;\n  /** Whether this item is disabled */\n  disabled?: boolean;\n  /** Dropdown menu items for this breadcrumb item */\n  menu?: BreadcrumbMenuItem[];\n}\n\n/**\n * Breadcrumb menu item interface for dropdown menus\n */\nexport interface BreadcrumbMenuItem {\n  /** Menu item label */\n  label: string;\n  /** Menu item URL */\n  href?: string;\n  /** Click handler */\n  onClick?: (e: MouseEvent) => void;\n  /** Icon for menu item */\n  icon?: string;\n  /** Whether menu item is disabled */\n  disabled?: boolean;\n}\n\n/**\n * Custom separator configuration\n */\nexport interface BreadcrumbSeparatorConfig {\n  /** Custom separator text or icon name */\n  separator: string;\n  /** Whether the separator is an icon */\n  isIcon?: boolean;\n  /** Icon type if separator is an icon */\n  iconType?: 'solid' | 'regular';\n}\n"]}