@vonage/vivid 3.0.0-next.7 → 3.0.0-next.71

package/package.json

@@ -1,10 +1,61 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.7",
+  "version": "3.0.0-next.71",
   "type": "module",
-  "module": "index.js",
-  "main": "index.js",
+  "module": "./index.esm.js",
+  "main": "./index.js",
+  "homepage": "https://vivid.deno.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vonage/vivid-3",
+    "directory": "libs/components"
+  },
+  "bugs": {
+    "url": "https://github.com/Vonage/vivid-3/issues"
+  },
+  "license": "Apache-2.0",
   "exports": {
-    "import": "./index.js"
-  }
+    "./accordion": "./accordion",
+    "./accordion-item": "./accordion-item",
+    "./action-group": "./action-group",
+    "./avatar": "./avatar",
+    "./badge": "./badge",
+    "./banner": "./banner",
+    "./breadcrumb": "./breadcrumb",
+    "./breadcrumb-item": "./breadcrumb-item",
+    "./button": "./button",
+    "./calendar": "./calendar",
+    "./calendar-event": "./calendar-event",
+    "./card": "./card",
+    "./checkbox": "./checkbox",
+    "./elevation": "./elevation",
+    "./dialog": "./dialog",
+    "./divider": "./divider",
+    "./fab": "./fab",
+    "./icon": "./icon",
+    "./layout": "./layout",
+    "./menu": "./menu",
+    "./menu-item": "./menu-item",
+    "./nav": "./nav",
+    "./nav-disclosure": "./nav-disclosure",
+    "./nav-item": "./nav-item",
+    "./note": "./note",
+    "./popup": "./popup",
+    "./progress": "./progress",
+    "./progress-ring": "./progress-ring",
+    "./side-drawer": "./side-drawer",
+    "./text-field": "./text-field",
+    "./text-area": "./text-area",
+    "./tooltip": "./tooltip"
+  },
+  "typings": "./index.d.ts",
+  "dependencies": {
+    "@microsoft/fast-element": "^1.10.5",
+    "@microsoft/fast-foundation": "^2.46.14",
+    "@microsoft/fast-web-utilities": "^5.4.1",
+    "ramda": "^0.27.2",
+    "dialog-polyfill": "^0.5.6",
+    "@floating-ui/dom": "^0.5.4"
+  },
+  "peerDependencies": {}
 }

package/popup/index.js

@@ -0,0 +1,26 @@
+import '../shared/index2.js';
+import '../button/index.js';
+import '../shared/index.js';
+export { v as vividPopup } from '../shared/index3.js';
+import '../shared/class-names.js';
+import '../icon/index.js';
+import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+import '../focus/index.js';
+import '../shared/focus.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../shared/object-keys.js';
+import '../shared/affix.js';
+import '../shared/button.js';
+import '../shared/apply-mixins.js';
+import '../shared/form-associated.js';
+import '../shared/key-codes.js';
+import '../shared/aria-global.js';
+import '../shared/start-end.js';
+import '../shared/ref.js';
+import '../shared/focus2.js';
+import '../shared/es.object.assign.js';

package/progress/index.js

@@ -0,0 +1,105 @@
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import '../shared/web.dom-collections.iterator.js';
+import { c as classofRaw, _ as _export, f as functionUncurryThis } from '../shared/export.js';
+import { B as BaseProgress } from '../shared/base-progress.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/object-keys.js';
+import '../shared/iterators.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 06 Oct 2022 14:03:46 GMT\n */\n.base {\n  height: 6px;\n  align-items: center;\n  margin: 0;\n  outline: none;\n}\n.base:not(.connotation-pacific).connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta-500);\n}\n.base:not(.connotation-pacific).connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base:not(.connotation-pacific).connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base:not(.connotation-pacific):not(.connotation-cta, .connotation-alert, .connotation-success) {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n}\n.base.connotation-pacific {\n  --_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600));\n}\n\n.progress {\n  position: relative;\n  display: flex;\n  overflow: hidden;\n  align-items: center;\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 100%;\n  inline-size: 100%;\n  /* Shape */\n}\n.base:not(.shape-sharp) .progress {\n  border-radius: 3px;\n}\n\n.indeterminate {\n  display: flex;\n  background-color: var(--_connotation-color-primary);\n  block-size: 100%;\n  border-radius: inherit;\n  inline-size: 100%;\n}\n\n.determinate {\n  background-color: var(--_connotation-color-primary);\n  block-size: 100%;\n  border-radius: inherit;\n  transition: all 0.2s ease-in-out;\n}\n.connotation-pacific .determinate {\n  background-image: var(--_connotation-color-primary);\n}\n.reverse .determinate {\n  position: absolute;\n  right: 0;\n}\n.paused .determinate {\n  background-color: var(--vvd-color-neutral-300);\n}\n\n.indicator-1 {\n  animation: indeterminate-1 2s infinite;\n  inline-size: 30%;\n}\n\n.indicator-2 {\n  animation: indeterminate-2 2s infinite;\n  inline-size: 60%;\n}\n\n.indicator-1,\n.indicator-2 {\n  position: absolute;\n  animation-timing-function: cubic-bezier(0.4, 0, 0.6, 1);\n  background-color: var(--vvd-color-neutral-100);\n  block-size: 100%;\n  opacity: 0;\n}\n.connotation-pacific .indicator-1,\n.connotation-pacific .indicator-2 {\n  background-image: var(--_connotation-color-primary);\n}\n.paused .indicator-1,\n.paused .indicator-2 {\n  animation-play-state: paused;\n  background-color: var(--_connotation-color-primary);\n}\n.reverse .indicator-1,\n.reverse .indicator-2 {\n  animation-direction: reverse;\n}\n\n@keyframes indeterminate-1 {\n  0% {\n    opacity: 1;\n    transform: translateX(-100%);\n  }\n  70% {\n    opacity: 1;\n    transform: translateX(300%);\n  }\n  70.01% {\n    opacity: 0;\n  }\n  100% {\n    opacity: 0;\n    transform: translateX(300%);\n  }\n}\n@keyframes indeterminate-2 {\n  0% {\n    opacity: 0;\n    transform: translateX(-150%);\n  }\n  29.99% {\n    opacity: 0;\n  }\n  30% {\n    opacity: 1;\n    transform: translateX(-150%);\n  }\n  100% {\n    opacity: 1;\n    transform: translateX(166.66%);\n  }\n}";
+
+var classof = classofRaw;
+
+// `IsArray` abstract operation
+// https://tc39.es/ecma262/#sec-isarray
+// eslint-disable-next-line es-x/no-array-isarray -- safe
+var isArray$1 = Array.isArray || function isArray(argument) {
+  return classof(argument) == 'Array';
+};
+
+var $ = _export;
+var uncurryThis = functionUncurryThis;
+var isArray = isArray$1;
+
+var nativeReverse = uncurryThis([].reverse);
+var test = [1, 2];
+
+// `Array.prototype.reverse` method
+// https://tc39.es/ecma262/#sec-array.prototype.reverse
+// fix for Safari 12.0 bug
+// https://bugs.webkit.org/show_bug.cgi?id=188794
+$({ target: 'Array', proto: true, forced: String(test) === String(test.reverse()) }, {
+  reverse: function reverse() {
+    // eslint-disable-next-line no-self-assign -- dirty hack
+    if (isArray(this)) this.length = this.length;
+    return nativeReverse(this);
+  }
+});
+
+class Progress extends BaseProgress {
+  constructor() {
+    super(...arguments);
+    this.reverse = false;
+  }
+
+}
+
+__decorate([attr(), __metadata("design:type", String)], Progress.prototype, "shape", void 0);
+
+__decorate([attr(), __metadata("design:type", String)], Progress.prototype, "connotation", void 0);
+
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], Progress.prototype, "reverse", void 0);
+
+let _2 = t => t,
+    _t,
+    _t2,
+    _t3;
+
+const getClasses = ({
+  connotation,
+  shape,
+  reverse,
+  paused
+}) => classNames('base', [`connotation-${connotation}`, Boolean(connotation)], [`shape-${shape}`, Boolean(shape)], ['reverse', Boolean(reverse)], ['paused', Boolean(paused)]);
+
+function determinate() {
+  return html(_t || (_t = _2`
+		<span class="determinate" style="width: ${0}%"></span>`), x => x.percentComplete);
+}
+
+function indeterminate() {
+  return html(_t2 || (_t2 = _2`
+		<span class="indeterminate" name="indeterminate">
+			<span class="indicator-1"></span>
+			<span class="indicator-2"></span>
+		 </span>`));
+}
+
+const ProgressTemplate = _ => {
+  return html(_t3 || (_t3 = _2`
+    <div
+      role="progressbar"
+      aria-valuenow="${0}"
+      aria-valuemin="${0}"
+      aria-valuemax="${0}"
+      class="${0}"
+    >
+		<div class="progress">
+		  ${0}
+		  ${0}
+    	</div>
+	</div>
+  `), x => x.value, x => x.min, x => x.max, getClasses, when(x => typeof x.value === 'number', determinate()), when(x => typeof x.value !== 'number', indeterminate()));
+};
+
+const vividProgress = Progress.compose({
+  baseName: 'progress',
+  template: ProgressTemplate,
+  styles: css_248z
+});
+designSystem.register(vividProgress());
+
+export { vividProgress };

package/progress-ring/index.js

@@ -0,0 +1,80 @@
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { B as BaseProgress } from '../shared/base-progress.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 06 Oct 2022 14:03:46 GMT\n */\n.base {\n  align-items: center;\n  block-size: var(--_density);\n  color: var(--_appearance-color-text);\n  inline-size: var(--_density);\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: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.base.density-5 {\n  --_density: calc(5 * 4px);\n}\n.base.density-6 {\n  --_density: calc(6 * 4px);\n}\n.base.density-7 {\n  --_density: calc(7 * 4px);\n}\n.base.density-8 {\n  --_density: calc(8 * 4px);\n}\n.base.density-9 {\n  --_density: calc(9 * 4px);\n}\n.base.density-11 {\n  --_density: calc(11 * 4px);\n}\n.base.density-12 {\n  --_density: calc(12 * 4px);\n}\n.base.density-13 {\n  --_density: calc(13 * 4px);\n}\n.base:not(.density-5, .density-6, .density-7, .density-8, .density-9, .density-11, .density-12, .density-13) {\n  --_density: calc(10 * 4px);\n}\n\n.progress {\n  width: 100%;\n  height: 100%;\n}\n\n.background {\n  fill: none;\n  stroke: transparent;\n  stroke-width: 2px;\n}\n\n.determinate {\n  fill: none;\n  stroke: currentColor;\n  stroke-linecap: round;\n  stroke-width: 2px;\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: 2px;\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}";
+
+class ProgressRing extends BaseProgress {}
+
+__decorate([attr, __metadata("design:type", String)], ProgressRing.prototype, "connotation", void 0);
+
+__decorate([attr, __metadata("design:type", Number)], ProgressRing.prototype, "density", void 0);
+
+let _2 = t => t,
+    _t,
+    _t2,
+    _t3;
+
+const getClasses = ({
+  connotation,
+  density,
+  paused
+}) => classNames('base', ['disabled', !!paused], [`connotation-${connotation}`, !!connotation], [`density-${(density ? Number(density) : 0) + 10}`, !!density]);
+
+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}
+    </div>
+`), 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 vividProgressRing = ProgressRing.compose({
+  baseName: 'progress-ring',
+  template: ProgressRingTemplate,
+  styles: css_248z
+});
+designSystem.register(vividProgressRing());
+
+export { vividProgressRing };

package/shared/_has.js

@@ -0,0 +1,58 @@
+function _isPlaceholder(a) {
+  return a != null && typeof a === 'object' && a['@@functional/placeholder'] === true;
+}
+
+/**
+ * Optimized internal one-arity curry function.
+ *
+ * @private
+ * @category Function
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curry1(fn) {
+  return function f1(a) {
+    if (arguments.length === 0 || _isPlaceholder(a)) {
+      return f1;
+    } else {
+      return fn.apply(this, arguments);
+    }
+  };
+}
+
+/**
+ * Optimized internal two-arity curry function.
+ *
+ * @private
+ * @category Function
+ * @param {Function} fn The function to curry.
+ * @return {Function} The curried function.
+ */
+
+function _curry2(fn) {
+  return function f2(a, b) {
+    switch (arguments.length) {
+      case 0:
+        return f2;
+
+      case 1:
+        return _isPlaceholder(a) ? f2 : _curry1(function (_b) {
+          return fn(a, _b);
+        });
+
+      default:
+        return _isPlaceholder(a) && _isPlaceholder(b) ? f2 : _isPlaceholder(a) ? _curry1(function (_a) {
+          return fn(_a, b);
+        }) : _isPlaceholder(b) ? _curry1(function (_b) {
+          return fn(a, _b);
+        }) : fn(a, b);
+    }
+  };
+}
+
+function _has(prop, obj) {
+  return Object.prototype.hasOwnProperty.call(obj, prop);
+}
+
+export { _curry1 as _, _curry2 as a, _has as b };

package/shared/affix.js

@@ -0,0 +1,29 @@
+import './web.dom-collections.iterator.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html } from './index.js';
+import { I as Icon } from './icon.js';
+
+let _ = t => t,
+    _t;
+class AffixIcon {}
+
+__decorate([attr, __metadata("design:type", String)], AffixIcon.prototype, "icon", void 0);
+
+class AffixIconWithTrailing extends AffixIcon {
+  constructor() {
+    super(...arguments);
+    this.iconTrailing = false;
+  }
+
+}
+
+__decorate([attr({
+  mode: 'boolean',
+  attribute: 'icon-trailing'
+}), __metadata("design:type", Object)], AffixIconWithTrailing.prototype, "iconTrailing", void 0);
+
+const affixIconTemplateFactory = context => {
+  const iconTag = context.tagFor(Icon);
+  return icon => icon ? html(_t || (_t = _`<span class="icon"><${0} :type="${0}"></${0}></span>`), iconTag, () => icon, iconTag) : null;
+};
+
+export { AffixIconWithTrailing as A, affixIconTemplateFactory as a, AffixIcon as b };

package/shared/anchor.js

@@ -0,0 +1,86 @@
+import { F as FoundationElement, _ as __decorate, a as attr, o as observable } from './index.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { A as ARIAGlobalStatesAndProperties } from './aria-global.js';
+import { S as StartEnd } from './start-end.js';
+
+/**
+ * An Anchor Custom HTML Element.
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
+ *
+ * @slot start - Content which can be provided before the anchor content
+ * @slot end - Content which can be provided after the anchor content
+ * @slot - The default slot for anchor content
+ * @csspart control - The anchor element
+ * @csspart content - The element wrapping anchor content
+ *
+ * @public
+ */
+class Anchor extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Overrides the focus call for where delegatesFocus is unsupported.
+         * This check works for Chrome, Edge Chromium, FireFox, and Safari
+         * Relevant PR on the Firefox browser: https://phabricator.services.mozilla.com/D123858
+         */
+        this.handleUnsupportedDelegatesFocus = () => {
+            var _a;
+            // Check to see if delegatesFocus is supported
+            if (window.ShadowRoot &&
+                !window.ShadowRoot.prototype.hasOwnProperty("delegatesFocus") &&
+                ((_a = this.$fastController.definition.shadowOptions) === null || _a === void 0 ? void 0 : _a.delegatesFocus)) {
+                this.focus = () => {
+                    this.control.focus();
+                };
+            }
+        };
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.handleUnsupportedDelegatesFocus();
+    }
+}
+__decorate([
+    attr
+], Anchor.prototype, "download", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "href", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "hreflang", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "ping", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "referrerpolicy", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "rel", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "target", void 0);
+__decorate([
+    attr
+], Anchor.prototype, "type", void 0);
+__decorate([
+    observable
+], Anchor.prototype, "defaultSlottedContent", void 0);
+/**
+ * Includes ARIA states and properties relating to the ARIA link role
+ *
+ * @public
+ */
+class DelegatesARIALink {
+}
+__decorate([
+    attr({ attribute: "aria-expanded" })
+], DelegatesARIALink.prototype, "ariaExpanded", void 0);
+applyMixins(DelegatesARIALink, ARIAGlobalStatesAndProperties);
+applyMixins(Anchor, StartEnd, DelegatesARIALink);
+
+export { Anchor as A, DelegatesARIALink as D };

package/shared/apply-mixins.js

@@ -0,0 +1,22 @@
+/**
+ * Apply mixins to a constructor.
+ * Sourced from {@link https://www.typescriptlang.org/docs/handbook/mixins.html | TypeScript Documentation }.
+ * @public
+ */
+function applyMixins(derivedCtor, ...baseCtors) {
+    baseCtors.forEach(baseCtor => {
+        Object.getOwnPropertyNames(baseCtor.prototype).forEach(name => {
+            if (name !== "constructor") {
+                Object.defineProperty(derivedCtor.prototype, name, 
+                /* eslint-disable-next-line @typescript-eslint/no-non-null-assertion */
+                Object.getOwnPropertyDescriptor(baseCtor.prototype, name));
+            }
+        });
+        if (baseCtor.attributes) {
+            const existing = derivedCtor.attributes || [];
+            derivedCtor.attributes = existing.concat(baseCtor.attributes);
+        }
+    });
+}
+
+export { applyMixins as a };

package/shared/aria-global.js

@@ -0,0 +1,72 @@
+import { _ as __decorate, a as attr } from './index.js';
+
+/**
+ * Some states and properties are applicable to all host language elements regardless of whether a role is applied.
+ * The following global states and properties are supported by all roles and by all base markup elements.
+ * {@link https://www.w3.org/TR/wai-aria-1.1/#global_states}
+ *
+ * This is intended to be used as a mixin. Be sure you extend FASTElement.
+ *
+ * @public
+ */
+class ARIAGlobalStatesAndProperties {
+}
+__decorate([
+    attr({ attribute: "aria-atomic" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaAtomic", void 0);
+__decorate([
+    attr({ attribute: "aria-busy" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaBusy", void 0);
+__decorate([
+    attr({ attribute: "aria-controls" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaControls", void 0);
+__decorate([
+    attr({ attribute: "aria-current" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaCurrent", void 0);
+__decorate([
+    attr({ attribute: "aria-describedby" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDescribedby", void 0);
+__decorate([
+    attr({ attribute: "aria-details" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDetails", void 0);
+__decorate([
+    attr({ attribute: "aria-disabled" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaDisabled", void 0);
+__decorate([
+    attr({ attribute: "aria-errormessage" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaErrormessage", void 0);
+__decorate([
+    attr({ attribute: "aria-flowto" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaFlowto", void 0);
+__decorate([
+    attr({ attribute: "aria-haspopup" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHaspopup", void 0);
+__decorate([
+    attr({ attribute: "aria-hidden" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaHidden", void 0);
+__decorate([
+    attr({ attribute: "aria-invalid" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaInvalid", void 0);
+__decorate([
+    attr({ attribute: "aria-keyshortcuts" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaKeyshortcuts", void 0);
+__decorate([
+    attr({ attribute: "aria-label" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabel", void 0);
+__decorate([
+    attr({ attribute: "aria-labelledby" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLabelledby", void 0);
+__decorate([
+    attr({ attribute: "aria-live" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaLive", void 0);
+__decorate([
+    attr({ attribute: "aria-owns" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaOwns", void 0);
+__decorate([
+    attr({ attribute: "aria-relevant" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRelevant", void 0);
+__decorate([
+    attr({ attribute: "aria-roledescription" })
+], ARIAGlobalStatesAndProperties.prototype, "ariaRoledescription", void 0);
+
+export { ARIAGlobalStatesAndProperties as A };

package/shared/base-progress.js

@@ -0,0 +1,70 @@
+import { F as FoundationElement, _ as __decorate, a as attr, n as nullableNumberConverter, o as observable } from './index.js';
+
+/**
+ * An Progress HTML Element.
+ * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#progressbar | ARIA progressbar }.
+ *
+ * @slot indeterminate - The slot for a custom indeterminate indicator
+ * @csspart progress - Represents the progress element
+ * @csspart determinate - The determinate indicator
+ * @csspart indeterminate - The indeterminate indicator
+ *
+ * @public
+ */
+class BaseProgress extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        /**
+         * Indicates progress in %
+         * @internal
+         */
+        this.percentComplete = 0;
+    }
+    valueChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    minChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    maxChanged() {
+        if (this.$fastController.isConnected) {
+            this.updatePercentComplete();
+        }
+    }
+    /**
+     * @internal
+     */
+    connectedCallback() {
+        super.connectedCallback();
+        this.updatePercentComplete();
+    }
+    updatePercentComplete() {
+        const min = typeof this.min === "number" ? this.min : 0;
+        const max = typeof this.max === "number" ? this.max : 100;
+        const value = typeof this.value === "number" ? this.value : 0;
+        const range = max - min;
+        this.percentComplete =
+            range === 0 ? 0 : Math.fround(((value - min) / range) * 100);
+    }
+}
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "value", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "min", void 0);
+__decorate([
+    attr({ converter: nullableNumberConverter })
+], BaseProgress.prototype, "max", void 0);
+__decorate([
+    attr({ mode: "boolean" })
+], BaseProgress.prototype, "paused", void 0);
+__decorate([
+    observable
+], BaseProgress.prototype, "percentComplete", void 0);
+
+export { BaseProgress as B };

package/shared/breadcrumb-item.js

@@ -0,0 +1,25 @@
+import { _ as __decorate, o as observable } from './index.js';
+import { A as Anchor, D as DelegatesARIALink } from './anchor.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { S as StartEnd } from './start-end.js';
+
+/**
+ * A Breadcrumb Item Custom HTML Element.
+ *
+ * @public
+ */
+class BreadcrumbItem extends Anchor {
+    constructor() {
+        super(...arguments);
+        /**
+         * @internal
+         */
+        this.separator = true;
+    }
+}
+__decorate([
+    observable
+], BreadcrumbItem.prototype, "separator", void 0);
+applyMixins(BreadcrumbItem, StartEnd, DelegatesARIALink);
+
+export { BreadcrumbItem as B };