'use strict';

Object.defineProperty(exports, '__esModule', { value: true });

const index = require('./index-b55be5aa.js');
const helpers = require('./helpers-a6a0ad60.js');

const styleCss$1 = "@charset \"UTF-8\";x-breadcrumbs{font-size:1rem}x-breadcrumbs.fluid nav ol{border-radius:0;-webkit-box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2);box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2);border-top:1px solid rgba(var(--color-border-rgb, 200, 199, 204), 0.35);border-bottom:1px solid rgba(var(--color-border-rgb, 200, 199, 204), 0.35)}.is-dark-mode x-breadcrumbs.fluid nav ol{-webkit-box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35);box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35);border-top:1px solid var(--color-dark-tint, #414141);border-bottom:1px solid var(--color-dark-tint, #414141)}x-breadcrumbs nav ol{padding:0.5em 1em;margin:1em auto;background-color:var(--color-white, #FFFFFF);-webkit-box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);border:none;margin-bottom:1rem;border-radius:0.5rem;position:relative}.is-dark-mode x-breadcrumbs nav ol{color:var(--color-text-light, #FEFEFE);background-color:var(--color-black, #000000);-webkit-box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35), inset 0 0 0 1px var(--color-dark-tint, #414141);box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35), inset 0 0 0 1px var(--color-dark-tint, #414141)}x-breadcrumbs nav ol::after{clear:both;content:\"\";display:table}x-breadcrumbs nav ol x-breadcrumb:last-of-type li::after{display:none}x-breadcrumbs nav ol x-breadcrumb li{display:inline-block;margin:0.5em 0}x-breadcrumbs nav ol x-breadcrumb li::after{display:inline-block;margin:0 0.6em;color:var(--color-default, #9B9B9B)}x-breadcrumbs nav ol x-breadcrumb li.style-chevron::after{content:\"»\"}x-breadcrumbs nav ol x-breadcrumb li.style-bull::after{content:\"•\"}x-breadcrumbs nav ol x-breadcrumb li.style-whitespace::after{content:\" \"}x-breadcrumbs nav ol x-breadcrumb li.style-arrow::after{content:\"→\"}x-breadcrumbs nav ol x-breadcrumb li:empty x-icon{margin-right:0}x-breadcrumbs nav ol x-breadcrumb li x-icon{color:inherit;margin-right:0.1rem}x-breadcrumbs nav ol x-breadcrumb li a{-webkit-transition:color 0.3s;transition:color 0.3s;color:var(--color-default, #9B9B9B)}x-card x-breadcrumbs.fluid nav ol{margin-left:calc(-1.25rem + 1px);margin-right:calc(-1.25rem + 1px)}x-card x-breadcrumbs nav ol{background-color:rgba(var(--color-border-rgb, 200, 199, 204), 0.1)}";
const XBreadcrumbStyle0 = styleCss$1;

const XBreadcrumb = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.href = undefined;
        this.icon = undefined;
        this.separator = 'chevron';
    }
    /**
     * Render element
     */
    render() {
        return index.h(index.Host, { key: 'b8f0f04222410eafdd86b8f5877b28d84b822695' }, index.h("li", { key: '8c3025aeea8f17a7418915866141eb9492c83920', class: helpers.cls(`style-${this.separator}`) }, this.href ? (index.h("a", { href: this.href }, this.icon && index.h("x-icon", { name: this.icon }), " ", index.h("slot", null))) :
            (index.h("span", null, this.icon && index.h("x-icon", { name: this.icon }), " ", index.h("slot", null)))));
    }
};
XBreadcrumb.style = XBreadcrumbStyle0;

const styleCss = "@charset \"UTF-8\";x-breadcrumbs{font-size:1rem}x-breadcrumbs.fluid nav ol{border-radius:0;-webkit-box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2);box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2);border-top:1px solid rgba(var(--color-border-rgb, 200, 199, 204), 0.35);border-bottom:1px solid rgba(var(--color-border-rgb, 200, 199, 204), 0.35)}.is-dark-mode x-breadcrumbs.fluid nav ol{-webkit-box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35);box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35);border-top:1px solid var(--color-dark-tint, #414141);border-bottom:1px solid var(--color-dark-tint, #414141)}x-breadcrumbs nav ol{padding:0.5em 1em;margin:1em auto;background-color:var(--color-white, #FFFFFF);-webkit-box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);box-shadow:0px 3px 1rem rgba(var(--color-border-rgb, 200, 199, 204), 0.2), inset 0 0 0 1px rgba(var(--color-border-rgb, 200, 199, 204), 0.35);border:none;margin-bottom:1rem;border-radius:0.5rem;position:relative}.is-dark-mode x-breadcrumbs nav ol{color:var(--color-text-light, #FEFEFE);background-color:var(--color-black, #000000);-webkit-box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35), inset 0 0 0 1px var(--color-dark-tint, #414141);box-shadow:0px 3px 1rem rgba(var(--color-black-rgb, 0, 0, 0), 0.35), inset 0 0 0 1px var(--color-dark-tint, #414141)}x-breadcrumbs nav ol::after{clear:both;content:\"\";display:table}x-breadcrumbs nav ol x-breadcrumb:last-of-type li::after{display:none}x-breadcrumbs nav ol x-breadcrumb li{display:inline-block;margin:0.5em 0}x-breadcrumbs nav ol x-breadcrumb li::after{display:inline-block;margin:0 0.6em;color:var(--color-default, #9B9B9B)}x-breadcrumbs nav ol x-breadcrumb li.style-chevron::after{content:\"»\"}x-breadcrumbs nav ol x-breadcrumb li.style-bull::after{content:\"•\"}x-breadcrumbs nav ol x-breadcrumb li.style-whitespace::after{content:\" \"}x-breadcrumbs nav ol x-breadcrumb li.style-arrow::after{content:\"→\"}x-breadcrumbs nav ol x-breadcrumb li:empty x-icon{margin-right:0}x-breadcrumbs nav ol x-breadcrumb li x-icon{color:inherit;margin-right:0.1rem}x-breadcrumbs nav ol x-breadcrumb li a{-webkit-transition:color 0.3s;transition:color 0.3s;color:var(--color-default, #9B9B9B)}x-card x-breadcrumbs.fluid nav ol{margin-left:calc(-1.25rem + 1px);margin-right:calc(-1.25rem + 1px)}x-card x-breadcrumbs nav ol{background-color:rgba(var(--color-border-rgb, 200, 199, 204), 0.1)}";
const XBreadcrumbsStyle0 = styleCss;

const XBreadcrumbs = class {
    constructor(hostRef) {
        index.registerInstance(this, hostRef);
        this.fluid = undefined;
    }
    /**
     * Render element
     */
    render() {
        return index.h(index.Host, { key: '48b3483489d0fc5c599c01521a444fd55362ac79', class: helpers.cls({ 'fluid': this.fluid }) }, index.h("nav", { key: '7c0d1215cd1112d37c043583e7adfdacffa1caa4', "aria-label": "breadcrumbs" }, index.h("ol", { key: '4f1b6489d663f1212e26cca4f63afe00c77fab7b' }, index.h("slot", { key: '7fe3e55364823fc4366dadd3270b09e9f2f23f51' }))));
    }
};
XBreadcrumbs.style = XBreadcrumbsStyle0;

exports.x_breadcrumb = XBreadcrumb;
exports.x_breadcrumbs = XBreadcrumbs;
