@sondor-technology/sondor-components 1.0.0 → 1.0.1-develop.3

package/src/components/breadcrumb/breadcrumb.ts

@@ -1,99 +1,99 @@
-import { LitElement, html, css } from 'lit';
-import { customElement, property } from 'lit/decorators.js';
-import { resetStyles } from '../../styles/reset.js';
-
-export interface BreadcrumbItem {
-  label: string;
-  href?: string;
-}
-
-@customElement('st-breadcrumb')
-export class StBreadcrumb extends LitElement {
-  /**
-   * Array of breadcrumb items defining the navigation path.
-   */
-  @property({ type: Array }) items: BreadcrumbItem[] = [];
-
-  static styles = [
-    resetStyles,
-    css`
-      :host {
-        display: block;
-        font-family: var(--st-font-family, inherit);
-      }
-
-      nav {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        font-size: var(--st-font-size-sm, 0.875rem);
-      }
-
-      ol {
-        display: flex;
-        align-items: center;
-        flex-wrap: wrap;
-        list-style: none;
-        margin: 0;
-        padding: 0;
-      }
-
-      li {
-        display: flex;
-        align-items: center;
-        color: var(--st-color-text-muted);
-      }
-
-      li:not(:last-child)::after {
-        content: "/";
-        margin: 0 var(--st-spacing-sm, 0.5rem);
-        color: var(--st-color-border);
-      }
-
-      a {
-        color: var(--st-color-text-muted);
-        text-decoration: none;
-        transition: color 0.2s ease;
-      }
-
-      a:hover {
-        color: var(--st-color-primary);
-        text-decoration: underline;
-      }
-
-      li:last-child {
-        color: var(--st-color-text);
-        font-weight: 500;
-      }
-    `
-  ];
-
-  render() {
-    if (!this.items || this.items.length === 0) {
-      return html``;
-    }
-
-    return html`
-      <nav aria-label="Breadcrumb">
-        <ol>
-          ${this.items.map((item, index) => {
-            const isLast = index === this.items.length - 1;
-            return html`
-              <li>
-                ${!isLast && item.href 
-                  ? html`<a href=${item.href}>${item.label}</a>` 
-                  : html`<span>${item.label}</span>`}
-              </li>
-            `;
-          })}
-        </ol>
-      </nav>
-    `;
-  }
-}
-
-declare global {
-  interface HTMLElementTagNameMap {
-    'st-breadcrumb': StBreadcrumb;
-  }
+import { LitElement, html, css } from 'lit';
+import { customElement, property } from 'lit/decorators.js';
+import { resetStyles } from '../../styles/reset.js';
+
+export interface BreadcrumbItem {
+  label: string;
+  href?: string;
+}
+
+@customElement('st-breadcrumb')
+export class StBreadcrumb extends LitElement {
+  /**
+   * Array of breadcrumb items defining the navigation path.
+   */
+  @property({ type: Array }) items: BreadcrumbItem[] = [];
+
+  static styles = [
+    resetStyles,
+    css`
+      :host {
+        display: block;
+        font-family: var(--st-font-family, inherit);
+      }
+
+      nav {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        font-size: var(--st-font-size-sm, 0.875rem);
+      }
+
+      ol {
+        display: flex;
+        align-items: center;
+        flex-wrap: wrap;
+        list-style: none;
+        margin: 0;
+        padding: 0;
+      }
+
+      li {
+        display: flex;
+        align-items: center;
+        color: var(--st-color-text-muted);
+      }
+
+      li:not(:last-child)::after {
+        content: "/";
+        margin: 0 var(--st-spacing-sm, 0.5rem);
+        color: var(--st-color-border);
+      }
+
+      a {
+        color: var(--st-color-text-muted);
+        text-decoration: none;
+        transition: color 0.2s ease;
+      }
+
+      a:hover {
+        color: var(--st-color-primary);
+        text-decoration: underline;
+      }
+
+      li:last-child {
+        color: var(--st-color-text);
+        font-weight: 500;
+      }
+    `
+  ];
+
+  render() {
+    if (!this.items || this.items.length === 0) {
+      return html``;
+    }
+
+    return html`
+      <nav aria-label="Breadcrumb">
+        <ol>
+          ${this.items.map((item, index) => {
+            const isLast = index === this.items.length - 1;
+            return html`
+              <li>
+                ${!isLast && item.href 
+                  ? html`<a href=${item.href}>${item.label}</a>` 
+                  : html`<span>${item.label}</span>`}
+              </li>
+            `;
+          })}
+        </ol>
+      </nav>
+    `;
+  }
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    'st-breadcrumb': StBreadcrumb;
+  }
 }