{"version":3,"file":"breadcrumb.cjs","names":[],"sources":["../src/content/breadcrumb/breadcrumb.ts"],"sourcesContent":["import { define, getHost, html, prop, useSlots, watchEffect } from '@vielzeug/ore';\nimport componentStyles from './breadcrumb.css?inline';\nimport itemStyles from './breadcrumb-item.css?inline';\n\nexport type OreBreadcrumbProps = {\n  label?: string;\n  separator?: string;\n};\n\nexport type OreBreadcrumbItemProps = {\n  active?: boolean;\n  href?: string;\n  separator?: string;\n};\n\n/**\n * A single breadcrumb entry rendered inside `<ore-breadcrumb>`.\n *\n * @element ore-breadcrumb-item\n *\n * @attr {boolean} active - Marks this item as the current page (`aria-current=\"page\"`)\n * @attr {string} href - Link target for this breadcrumb item\n * @attr {string} separator - Separator text shown before the item (except first item)\n *\n * @slot - Item label/content\n * @slot icon - Optional leading icon for the crumb\n *\n * @part separator - Separator element before the item label\n * @part link - The interactive anchor element\n *\n * @example\n * ```html\n * <ore-breadcrumb-item href=\"/\">Home</ore-breadcrumb-item>\n * <ore-breadcrumb-item active>Current Page</ore-breadcrumb-item>\n * ```\n */\nexport const BREADCRUMB_ITEM_TAG = 'ore-breadcrumb-item' as const;\ndefine<OreBreadcrumbItemProps>(BREADCRUMB_ITEM_TAG, {\n  props: {\n    active: prop.bool(),\n    href: prop.string(),\n    separator: prop.string('/'),\n  },\n  setup(props) {\n    return html`\n      <li class=\"item\" role=\"listitem\">\n        <span class=\"separator\" part=\"separator\" aria-hidden=\"true\">${props.separator}</span>\n        <a\n          class=\"link\"\n          href=\"${props.href}\"\n          aria-current=\"${() => (props.active.value ? 'page' : null)}\"\n          tabindex=\"${() => (props.active.value ? '-1' : null)}\"\n          part=\"link\">\n          <span class=\"icon\"><slot name=\"icon\"></slot></span>\n          <span class=\"label\"><slot></slot></span>\n        </a>\n      </li>\n    `;\n  },\n  styles: [itemStyles],\n});\n\n// ============================================\n// Breadcrumb Component\n// ============================================\n\n/**\n * Accessible breadcrumb navigation container.\n *\n * @element ore-breadcrumb\n *\n * @attr {string} label - Accessible label for the internal `<nav>` landmark\n * @attr {string} separator - Separator text propagated to child `<ore-breadcrumb-item>` elements\n *\n * @slot - One or more `<ore-breadcrumb-item>` children\n *\n * @part nav - Internal navigation landmark element\n * @part list - Internal ordered list container\n *\n * @cssprop --breadcrumb-separator - Optional custom separator text synced to child items\n *\n * @example\n * ```html\n * <ore-breadcrumb label=\"Page breadcrumb\">\n *   <ore-breadcrumb-item href=\"/\">Home</ore-breadcrumb-item>\n *   <ore-breadcrumb-item href=\"/blog\">Blog</ore-breadcrumb-item>\n *   <ore-breadcrumb-item active>My Post</ore-breadcrumb-item>\n * </ore-breadcrumb>\n * ```\n */\nexport const BREADCRUMB_TAG = 'ore-breadcrumb' as const;\ndefine<OreBreadcrumbProps>(BREADCRUMB_TAG, {\n  props: {\n    label: prop.string('Breadcrumb'),\n    separator: prop.string(),\n  },\n  setup(props) {\n    const el = getHost();\n    const slots = useSlots();\n    const watch = watchEffect;\n\n    // ────────────────────────────────────────────────────────────────\n    // Item & Separator Synchronization\n    // ────────────────────────────────────────────────────────────────\n\n    const getItems = (): HTMLElement[] => Array.from(el.getElementsByTagName('ore-breadcrumb-item'));\n\n    const syncItems = () => {\n      const sep = props.separator.value || '/';\n      const items = getItems();\n\n      for (let i = 0; i < items.length; i++) {\n        items[i].setAttribute('separator', sep);\n        items[i].toggleAttribute('data-show-separator', i > 0);\n      }\n\n      // Sync CSS variable for CSS-based separator (if used)\n      if (sep) el.style.setProperty('--breadcrumb-separator', `'${sep}'`);\n      else el.style.removeProperty('--breadcrumb-separator');\n    };\n\n    // ────────────────────────────────────────────────────────────────\n    // Lifecycle\n    // ────────────────────────────────────────────────────────────────\n\n    watch(() => {\n      void slots.elements().value;\n      syncItems();\n    });\n\n    return html`\n      <nav part=\"nav\" aria-label=\"${props.label}\">\n        <ol role=\"list\" part=\"list\">\n          <slot></slot>\n        </ol>\n      </nav>\n    `;\n  },\n  styles: [componentStyles],\n});\n"],"mappings":"uNAoCA,IAAa,EAAsB,uBACnC,EAAA,EAAA,OAAA,CAA+B,EAAqB,CAClD,MAAO,CACL,OAAQ,EAAA,KAAK,KAAK,EAClB,KAAM,EAAA,KAAK,OAAO,EAClB,UAAW,EAAA,KAAK,OAAO,GAAG,CAC5B,EACA,MAAM,EAAO,CACX,MAAO,GAAA,IAAI;;sEAEuD,EAAM,UAAU;;;kBAGpE,EAAM,KAAK;8BACI,EAAM,OAAO,MAAQ,OAAS,KAAM;0BACxC,EAAM,OAAO,MAAQ,KAAO,KAAM;;;;;;KAO7D,EACA,OAAQ,CAAC,EAAA,OAAU,CACrB,CAAC,EA8BD,IAAa,EAAiB,kBAC9B,EAAA,EAAA,OAAA,CAA2B,EAAgB,CACzC,MAAO,CACL,MAAO,EAAA,KAAK,OAAO,YAAY,EAC/B,UAAW,EAAA,KAAK,OAAO,CACzB,EACA,MAAM,EAAO,CACX,IAAM,GAAA,EAAK,EAAA,QAAA,CAAQ,EACb,GAAA,EAAQ,EAAA,SAAA,CAAS,EACjB,EAAQ,EAAA,YAMR,MAAgC,MAAM,KAAK,EAAG,qBAAqB,qBAAqB,CAAC,EAEzF,MAAkB,CACtB,IAAM,EAAM,EAAM,UAAU,OAAS,IAC/B,EAAQ,EAAS,EAEvB,IAAK,IAAI,EAAI,EAAG,EAAI,EAAM,OAAQ,IAChC,EAAM,EAAE,CAAC,aAAa,YAAa,CAAG,EACtC,EAAM,EAAE,CAAC,gBAAgB,sBAAuB,EAAI,CAAC,EAInD,EAAK,EAAG,MAAM,YAAY,yBAA0B,IAAI,EAAI,EAAE,EAC7D,EAAG,MAAM,eAAe,wBAAwB,CACvD,EAWA,OALA,MAAY,CACV,EAAW,SAAS,CAAC,CAAC,MACtB,EAAU,CACZ,CAAC,EAEM,EAAA,IAAI;oCACqB,EAAM,MAAM;;;;;KAM9C,EACA,OAAQ,CAAC,EAAA,OAAe,CAC1B,CAAC"}