@vonage/vivid 3.5.0 → 3.7.0

package/lib/action-group/action-group.d.ts

@@ -6,4 +6,6 @@ export declare class ActionGroup extends FoundationElement {
     shape?: ActionGroupShape;
     appearance?: ActionGroupAppearance;
     tight: boolean;
+    role: string | undefined;
+    ariaLabel: string | null;
 }

package/lib/button/button.d.ts

@@ -11,6 +11,7 @@ export declare class Button extends FoundationButton {
     appearance?: ButtonAppearance;
     size?: ButtonSize;
     stacked: boolean;
+    pending: boolean;
     label?: string;
 }
 export interface Button extends AffixIconWithTrailing {

package/lib/button/button.template.d.ts

@@ -1,4 +1,4 @@
-import type { ViewTemplate } from '@microsoft/fast-element';
+import { ViewTemplate } from '@microsoft/fast-element';
 import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
 import type { Button } from './button';
 export declare const buttonTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Button>;

package/lib/select/select.d.ts

@@ -1,7 +1,6 @@
 import { Select as FoundationSelect } from '@microsoft/fast-foundation';
 import type { Popup } from '../popup/popup';
-import { FormElement } from '../../shared/patterns';
-import { AffixIcon } from '../../shared/patterns';
+import { AffixIconWithTrailing, FormElement } from '../../shared/patterns';
 import type { Appearance, Shape } from '../enums';
 export declare type SelectAppearance = Extract<Appearance, Appearance.Outlined | Appearance.Ghost>;
 export declare type SelectShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
@@ -13,5 +12,5 @@ export declare class Select extends FoundationSelect {
     connectedCallback(): void;
     get displayValue(): string;
 }
-export interface Select extends AffixIcon, FormElement {
+export interface Select extends AffixIconWithTrailing, FormElement {
 }

package/listbox/index.js

@@ -1,8 +1,8 @@
-import { r as registerListbox } from '../shared/definition26.js';
+import { r as registerListbox } from '../shared/definition27.js';
 import '../shared/index.js';
 import '../shared/definition4.js';
 import '../shared/focus.js';
-import '../shared/definition19.js';
+import '../shared/definition20.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
 import '../shared/to-string.js';

package/menu/index.js

@@ -1,6 +1,6 @@
-import { r as registerMenu } from '../shared/definition27.js';
+import { r as registerMenu } from '../shared/definition28.js';
 import '../shared/index.js';
-import '../shared/definition18.js';
+import '../shared/definition19.js';
 import '../shared/definition9.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
@@ -11,6 +11,8 @@ import '../shared/class-names.js';
 import '../shared/when.js';
 import '../shared/definition4.js';
 import '../shared/focus.js';
+import '../shared/definition10.js';
+import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';
@@ -20,9 +22,9 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
-import '../shared/definition15.js';
+import '../shared/definition16.js';
 import '../shared/es.object.assign.js';
-import '../shared/definition28.js';
+import '../shared/definition29.js';
 import '../shared/direction.js';
 import '../shared/dom.js';
 import '../shared/slotted.js';

package/menu-item/index.js

@@ -1,4 +1,4 @@
-import { b as registerMenuItem } from '../shared/definition28.js';
+import { b as registerMenuItem } from '../shared/definition29.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';

package/nav/index.js

@@ -1,4 +1,4 @@
-import { r as registerNav } from '../shared/definition29.js';
+import { r as registerNav } from '../shared/definition30.js';
 import '../shared/index.js';
 
 registerNav();

package/nav-disclosure/index.js

@@ -1,4 +1,4 @@
-import { r as registerNavDisclosure } from '../shared/definition30.js';
+import { r as registerNavDisclosure } from '../shared/definition31.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';

package/nav-item/index.js

@@ -1,4 +1,4 @@
-import { r as registerNavItem } from '../shared/definition31.js';
+import { r as registerNavItem } from '../shared/definition32.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';

package/note/index.js

@@ -1,4 +1,4 @@
-import { r as registerNote } from '../shared/definition32.js';
+import { r as registerNote } from '../shared/definition33.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';

package/number-field/index.js

@@ -1,4 +1,4 @@
-import { r as registerNumberField } from '../shared/definition33.js';
+import { r as registerNumberField } from '../shared/definition34.js';
 import '../shared/index.js';
 import '../shared/definition9.js';
 import '../shared/definition3.js';
@@ -10,6 +10,8 @@ import '../shared/class-names.js';
 import '../shared/when.js';
 import '../shared/definition4.js';
 import '../shared/focus.js';
+import '../shared/definition10.js';
+import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';
@@ -19,7 +21,7 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
-import '../shared/definition22.js';
+import '../shared/definition23.js';
 import '../shared/aria.js';
 import '../shared/form-elements.js';
 import '../shared/text-field2.js';

package/option/index.js

@@ -1,4 +1,4 @@
-import { r as registerOption } from '../shared/definition19.js';
+import { r as registerOption } from '../shared/definition20.js';
 import '../shared/index.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.5.0",
+  "version": "3.7.0",
   "type": "module",
   "module": "./index.js",
   "main": "./index.js",

package/popup/index.js

@@ -1,4 +1,4 @@
-import { r as registerPopup } from '../shared/definition18.js';
+import { r as registerPopup } from '../shared/definition19.js';
 import '../shared/index.js';
 import '../shared/definition9.js';
 import '../shared/definition3.js';
@@ -10,6 +10,8 @@ import '../shared/class-names.js';
 import '../shared/when.js';
 import '../shared/definition4.js';
 import '../shared/focus.js';
+import '../shared/definition10.js';
+import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';
@@ -19,7 +21,7 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
-import '../shared/definition15.js';
+import '../shared/definition16.js';
 import '../shared/es.object.assign.js';
 
 registerPopup();

package/progress/index.js

@@ -1,4 +1,4 @@
-import { r as registerProgress } from '../shared/definition34.js';
+import { r as registerProgress } from '../shared/definition35.js';
 import '../shared/index.js';
 import '../shared/base-progress.js';
 import '../shared/when.js';

package/progress-ring/index.js

@@ -1,4 +1,4 @@
-import { r as registerProgressRing } from '../shared/definition35.js';
+import { r as registerProgressRing } from '../shared/definition10.js';
 import '../shared/index.js';
 import '../shared/base-progress.js';
 import '../shared/when.js';

package/select/index.js

@@ -2,7 +2,7 @@ import { r as registerSelect } from '../shared/definition38.js';
 import '../shared/index.js';
 import '../shared/definition4.js';
 import '../shared/focus.js';
-import '../shared/definition18.js';
+import '../shared/definition19.js';
 import '../shared/definition9.js';
 import '../shared/definition3.js';
 import '../shared/icon.js';
@@ -11,6 +11,8 @@ import '../shared/string-trim.js';
 import '../shared/_has.js';
 import '../shared/class-names.js';
 import '../shared/when.js';
+import '../shared/definition10.js';
+import '../shared/base-progress.js';
 import '../shared/affix.js';
 import '../shared/button.js';
 import '../shared/apply-mixins.js';
@@ -20,9 +22,9 @@ import '../shared/aria-global.js';
 import '../shared/start-end.js';
 import '../shared/ref.js';
 import '../shared/focus2.js';
-import '../shared/definition15.js';
+import '../shared/definition16.js';
 import '../shared/es.object.assign.js';
-import '../shared/definition19.js';
+import '../shared/definition20.js';
 import '../shared/dom.js';
 import '../shared/form-elements.js';
 import '../shared/listbox.js';

package/shared/definition.js

@@ -186,7 +186,7 @@ __decorate([
     observable
 ], Accordion$1.prototype, "accordionItems", void 0);
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 27 Mar 2023 07:48:02 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 03 Apr 2023 14:02:24 GMT\n */\n.base {\n  display: flex;\n  box-sizing: border-box;\n  flex-direction: column;\n}\n\n::slotted(:not(:only-of-type)) {\n  border-bottom: 1px solid var(--vvd-color-neutral-200);\n}";
 
 class Accordion extends Accordion$1 {
   constructor() {

package/shared/definition10.js

@@ -1,99 +1,77 @@
-import { F as FoundationElement, _ as __decorate, o as observable, h as html, r as registerFactory } from './index.js';
-import { s as slotted, e as elements } from './slotted.js';
-import { B as BreadcrumbItem } from './breadcrumb-item.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
+import { B as BaseProgress } from './base-progress.js';
+import { w as when } from './when.js';
+import { c as classNames } from './class-names.js';
 
-/**
- * A Breadcrumb Custom HTML Element.
- * @slot - The default slot for the breadcrumb items
- * @csspart list - The element wrapping the slotted items
- *
- * @public
- */
-class Breadcrumb$1 extends FoundationElement {
-    slottedBreadcrumbItemsChanged() {
-        if (this.$fastController.isConnected) {
-            if (this.slottedBreadcrumbItems === undefined ||
-                this.slottedBreadcrumbItems.length === 0) {
-                return;
-            }
-            const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];
-            this.slottedBreadcrumbItems.forEach((item) => {
-                const itemIsLastNode = item === lastNode;
-                this.setItemSeparator(item, itemIsLastNode);
-                this.setAriaCurrent(item, itemIsLastNode);
-            });
-        }
-    }
-    setItemSeparator(item, isLastNode) {
-        if (item instanceof BreadcrumbItem) {
-            item.separator = !isLastNode;
-        }
-    }
-    /**
-     * Finds href on childnodes in the light DOM or shadow DOM.
-     * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
-     */
-    findChildWithHref(node) {
-        var _a, _b;
-        if (node.childElementCount > 0) {
-            return node.querySelector("a[href]");
-        }
-        else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {
-            return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("a[href]");
-        }
-        else
-            return null;
-    }
-    /**
-     *  Sets ARIA Current for the current node
-     * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
-     * otherwise apply aria-current to the host element, with an href
-     */
-    setAriaCurrent(item, isLastNode) {
-        const childNodeWithHref = this.findChildWithHref(item);
-        if (childNodeWithHref === null &&
-            item.hasAttribute("href") &&
-            item instanceof BreadcrumbItem) {
-            isLastNode
-                ? item.setAttribute("aria-current", "page")
-                : item.removeAttribute("aria-current");
-        }
-        else if (childNodeWithHref !== null) {
-            isLastNode
-                ? childNodeWithHref.setAttribute("aria-current", "page")
-                : childNodeWithHref.removeAttribute("aria-current");
-        }
-    }
-}
-__decorate([
-    observable
-], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 03 Apr 2023 14:02:24 GMT\n */\n.base {\n  align-items: center;\n  block-size: var(--_size);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_size);\n  outline: none;\n}\n.base.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base:not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.base {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base.size--5 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 20));\n}\n.base.size--4 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 16));\n}\n.base.size--3 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 12));\n}\n.base.size--2 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 8));\n}\n.base.size--1 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) - 4));\n}\n.base.size-1 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 4));\n}\n.base.size-2 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 8));\n}\n.base.size-3 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 12));\n}\n.base.size-4 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 16));\n}\n.base.size-5 {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2) + 20));\n}\n.base:not(.size--5, .size--4, .size--3, .size--2, .size--1, .size-1, .size-2, .size-3, .size-4, .size-5) {\n  --_size: calc(1px * (40 + 4 * clamp(-1, var(--vvd-size-density, 0), 2)));\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 1px;\n}\n\n.determinate {\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 1px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.indeterminate-indicator-1 {\n  animation: spin-infinite 2s linear infinite;\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 1px;\n  transform: rotate(-90deg);\n  transform-origin: 50% 50%;\n  transition: all 0.2s ease-in-out;\n}\n\n.base.paused .indeterminate-indicator-1 {\n  animation-play-state: paused;\n}\n\n@keyframes spin-infinite {\n  0% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(0deg);\n  }\n  50% {\n    stroke-dasharray: 21.99px 21.99px;\n    transform: rotate(450deg);\n  }\n  100% {\n    stroke-dasharray: 0.01px 43.97px;\n    transform: rotate(1080deg);\n  }\n}";
 
-let _ = t => t,
-  _t;
-const breadcrumbTemplate = () => html(_t || (_t = _`
-	<nav aria-label="breadcrumbs" class="base">
-    <div role="list" class="list">
-      <slot
+class ProgressRing extends BaseProgress {}
+__decorate([attr, __metadata("design:type", String)], ProgressRing.prototype, "connotation", void 0);
+__decorate([attr, __metadata("design:type", Number)], ProgressRing.prototype, "size", void 0);
+
+let _2 = t => t,
+  _t,
+  _t2,
+  _t3;
+const getClasses = ({
+  connotation,
+  size,
+  paused
+}) => classNames('base', ['disabled', !!paused], [`connotation-${connotation}`, !!connotation], [`size-${size}`, !!size]);
+const progressSegments = 44;
+const ProgressRingTemplate = _ => html(_t || (_t = _2`
+<div
+        role="progressbar"
+        aria-valuenow="${0}"
+        aria-valuemin="${0}"
+        aria-valuemax="${0}"
+        class="${0} ${0}"
+    >
+        ${0}
         ${0}
-      ></slot>
     </div>
-	</nav>
-`), slotted({
-  property: 'slottedBreadcrumbItems',
-  filter: elements()
-}));
-
-var css_248z = ".list {\n  display: flex;\n}";
-
-class Breadcrumb extends Breadcrumb$1 {}
+`), x => x.value, x => x.min, x => x.max, x => x.paused ? 'paused' : '', getClasses, when(x => typeof x.value === 'number', html(_t2 || (_t2 = _2`
+                <svg
+                    class="progress"
+                    viewBox="0 0 16 16"
+                >
+                    <circle
+                        class="background"
+                        cx="8px"
+                        cy="8px"
+                        r="7px"
+                    ></circle>
+                    <circle
+                        class="determinate"
+                        style="stroke-dasharray: ${0}px ${0}px"
+                        cx="8px"
+                        cy="8px"
+                        r="7px"
+                    ></circle>
+                </svg>
+            `), x => progressSegments * x.percentComplete / 100, progressSegments)), when(x => typeof x.value !== 'number', html(_t3 || (_t3 = _2`
+            <svg class="progress" viewBox="0 0 16 16">
+              <circle
+                class="background"
+                cx="8px"
+                cy="8px"
+                r="7px"
+              ></circle>
+              <circle
+                class="indeterminate-indicator-1"
+                cx="8px"
+                cy="8px"
+                r="7px"
+              ></circle>
+            </svg>
+            `))));
 
-const breadcrumbDefinition = Breadcrumb.compose({
-  baseName: 'breadcrumb',
-  template: breadcrumbTemplate,
+const progressRingDefinition = ProgressRing.compose({
+  baseName: 'progress-ring',
+  template: ProgressRingTemplate,
   styles: css_248z
 });
-const breadcrumbRegistries = [breadcrumbDefinition()];
-const registerBreadcrumb = registerFactory(breadcrumbRegistries);
+const progressRingRegistries = [progressRingDefinition()];
+const registerProgressRing = registerFactory(progressRingRegistries);
 
-export { breadcrumbRegistries as a, breadcrumbDefinition as b, registerBreadcrumb as r };
+export { ProgressRing as P, progressRingDefinition as a, progressRingRegistries as p, registerProgressRing as r };

package/shared/definition11.js

@@ -1,48 +1,99 @@
-import { _ as __decorate, a as attr, b as __metadata, h as html, r as registerFactory } from './index.js';
-import { i as iconRegistries } from './definition3.js';
-import { f as focusRegistries } from './definition4.js';
-import { B as BreadcrumbItem$1 } from './breadcrumb-item.js';
-import { t as textAnchorTemplate } from './text-anchor.template.js';
-import { I as Icon } from './icon.js';
-import { w as when } from './when.js';
-import { c as classNames } from './class-names.js';
+import { F as FoundationElement, _ as __decorate, o as observable, h as html, r as registerFactory } from './index.js';
+import { s as slotted, e as elements } from './slotted.js';
+import { B as BreadcrumbItem } from './breadcrumb-item.js';
 
-var css_248z = "/**\n * Do not edit directly\n * Generated on Mon, 27 Mar 2023 07:48:02 GMT\n */\n.base {\n  display: flex;\n  align-items: center;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base);\n}\n.base .separator {\n  margin: 0 16px;\n  color: var(--vvd-color-neutral-600);\n  font-size: 12px;\n}\n\n.control {\n  position: relative;\n  font: inherit;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control:any-link {\n  color: var(--vvd-color-cta-600);\n  text-decoration: none;\n}\n.control:any-link:hover {\n  text-decoration: underline;\n}\n\n.focus-indicator {\n  --focus-inset: -4px -8px;\n  --focus-stroke-gap-color: transparent;\n  border-radius: 6px;\n}\n.control:not(:focus-visible) > .focus-indicator {\n  display: none;\n}";
-
-class BreadcrumbItem extends BreadcrumbItem$1 {
-  constructor() {
-    super();
-  }
+/**
+ * A Breadcrumb Custom HTML Element.
+ * @slot - The default slot for the breadcrumb items
+ * @csspart list - The element wrapping the slotted items
+ *
+ * @public
+ */
+class Breadcrumb$1 extends FoundationElement {
+    slottedBreadcrumbItemsChanged() {
+        if (this.$fastController.isConnected) {
+            if (this.slottedBreadcrumbItems === undefined ||
+                this.slottedBreadcrumbItems.length === 0) {
+                return;
+            }
+            const lastNode = this.slottedBreadcrumbItems[this.slottedBreadcrumbItems.length - 1];
+            this.slottedBreadcrumbItems.forEach((item) => {
+                const itemIsLastNode = item === lastNode;
+                this.setItemSeparator(item, itemIsLastNode);
+                this.setAriaCurrent(item, itemIsLastNode);
+            });
+        }
+    }
+    setItemSeparator(item, isLastNode) {
+        if (item instanceof BreadcrumbItem) {
+            item.separator = !isLastNode;
+        }
+    }
+    /**
+     * Finds href on childnodes in the light DOM or shadow DOM.
+     * We look in the shadow DOM because we insert an anchor when breadcrumb-item has an href.
+     */
+    findChildWithHref(node) {
+        var _a, _b;
+        if (node.childElementCount > 0) {
+            return node.querySelector("a[href]");
+        }
+        else if ((_a = node.shadowRoot) === null || _a === void 0 ? void 0 : _a.childElementCount) {
+            return (_b = node.shadowRoot) === null || _b === void 0 ? void 0 : _b.querySelector("a[href]");
+        }
+        else
+            return null;
+    }
+    /**
+     *  Sets ARIA Current for the current node
+     * If child node with an anchor tag and with href is found then set aria-current to correct value for the child node,
+     * otherwise apply aria-current to the host element, with an href
+     */
+    setAriaCurrent(item, isLastNode) {
+        const childNodeWithHref = this.findChildWithHref(item);
+        if (childNodeWithHref === null &&
+            item.hasAttribute("href") &&
+            item instanceof BreadcrumbItem) {
+            isLastNode
+                ? item.setAttribute("aria-current", "page")
+                : item.removeAttribute("aria-current");
+        }
+        else if (childNodeWithHref !== null) {
+            isLastNode
+                ? childNodeWithHref.setAttribute("aria-current", "page")
+                : childNodeWithHref.removeAttribute("aria-current");
+        }
+    }
 }
-__decorate([attr, __metadata("design:type", String)], BreadcrumbItem.prototype, "text", void 0);
+__decorate([
+    observable
+], Breadcrumb$1.prototype, "slottedBreadcrumbItems", void 0);
 
-let _2 = t => t,
-  _t,
-  _t2,
-  _t3,
-  _t4;
-const getClasses = _ => classNames('base');
-const BreadcrumbItemTemplate = (context, definition) => {
-  const iconTag = context.tagFor(Icon);
-  return html(_t || (_t = _2`
-	<div role="listitem" class="${0}">
-		${0}
+let _ = t => t,
+  _t;
+const breadcrumbTemplate = () => html(_t || (_t = _`
+	<nav aria-label="breadcrumbs" class="base">
+    <div role="list" class="list">
+      <slot
+        ${0}
+      ></slot>
+    </div>
+	</nav>
+`), slotted({
+  property: 'slottedBreadcrumbItems',
+  filter: elements()
+}));
 
-		${0}
+var css_248z = ".list {\n  display: flex;\n}";
 
-		${0}
-	</div>`), getClasses, when(x => x.text && !x.href, html(_t2 || (_t2 = _2`${0}`), x => x.text)), when(x => x.text && x.href && x.href.length > 0, html(_t3 || (_t3 = _2`${0}`), textAnchorTemplate(context))), when(x => x.separator, html(_t4 || (_t4 = _2`<${0} class="separator" name="chevron-right-solid"></${0}>`), iconTag, iconTag)));
-};
+class Breadcrumb extends Breadcrumb$1 {}
 
-const breadcrumbItemDefinition = BreadcrumbItem.compose({
-  baseName: 'breadcrumb-item',
-  template: BreadcrumbItemTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+const breadcrumbDefinition = Breadcrumb.compose({
+  baseName: 'breadcrumb',
+  template: breadcrumbTemplate,
+  styles: css_248z
 });
-const breadcrumbItemRegistries = [breadcrumbItemDefinition(), ...iconRegistries, ...focusRegistries];
-const registerBreadcrumbItem = registerFactory(breadcrumbItemRegistries);
+const breadcrumbRegistries = [breadcrumbDefinition()];
+const registerBreadcrumb = registerFactory(breadcrumbRegistries);
 
-export { breadcrumbItemRegistries as a, breadcrumbItemDefinition as b, registerBreadcrumbItem as r };
+export { breadcrumbRegistries as a, breadcrumbDefinition as b, registerBreadcrumb as r };