@vonage/vivid 5.0.0 → 5.1.0

package/option/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition37.cjs');
-
-definition.registerOption();
+"use strict";const i=require("../bundled/definition10.cjs");i.registerOption();

package/option/index.js

@@ -1,3 +1,2 @@
-import { r as registerOption } from '../shared/definition37.js';
-
-registerOption();
+import { r } from "../bundled/definition10.js";
+r();

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "5.0.0",
+  "version": "5.1.0",
   "type": "module",
   "module": "./index.js",
   "main": "./index.cjs",
@@ -40,9 +40,10 @@
   "license": "Apache-2.0",
   "scripts": {
     "prebuild": "cem analyze --config ./cem.config.mjs",
-    "build": "vite build",
+    "build": "vite build && vite build -c ./vite.config.bundled.ts",
     "postbuild": "api-extractor run -c ./dist/api-extractor.json && tsx scripts/copyPackageJson.ts",
-    "dev": "WATCH_MODE=true vite build -w",
+    "dev": "WATCH_MODE=true vite build -w -c ./vite.config.ts",
+    "dev:bundled": "WATCH_MODE=true vite build -w -c ./vite.config.bundled.ts",
     "lint": "eslint . --max-warnings=0",
     "lint:fix": "eslint . --max-warnings=0 --fix",
     "stylelint": "stylelint 'src/**/*.{css,scss}'",
@@ -59,7 +60,17 @@
   "dependencies": {
     "@floating-ui/dom": "^1.6.13",
     "@microsoft/fast-element": "^1.14.0",
-    "@microsoft/fast-web-utilities": "^6.0.0"
+    "@microsoft/fast-web-utilities": "^6.0.0",
+    "date-fns": "^3.0.0",
+    "prosemirror-commands": "^1.7.1",
+    "prosemirror-keymap": "^1.2.3",
+    "prosemirror-model": "^1.25.2",
+    "prosemirror-schema-basic": "^1.2.3",
+    "prosemirror-state": "^1.4.3",
+    "prosemirror-view": "^1.40.1",
+    "ramda": "^0.30.0",
+    "uuid": "^11.1.0",
+    "video.js": "^8.23.3"
   },
   "devDependencies": {
     "@repo/cem-analyzer-plugins": "*",

package/{shared/definition38.cjs → pagination/definition.cjs}

@@ -1,15 +1,13 @@
 'use strict';
 
-const definition = require('./definition11.cjs');
-const vividElement = require('./vivid-element.cjs');
-const localized = require('./localized.cjs');
-const enums = require('./enums.cjs');
-const slotted = require('./slotted.cjs');
-const classNames = require('./class-names.cjs');
-const ref = require('./ref.cjs');
-const children = require('./children.cjs');
-const repeat = require('./repeat.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const button_definition = require('../unbundled/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const localized = require('../unbundled/localized.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const enums = require('../unbundled/enums.cjs');
 
 const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
 
@@ -108,31 +106,31 @@ class Pagination extends localized.Localized(vividElement.VividElement) {
   }
 }
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Pagination.prototype, "size", 2);
 __decorateClass([
-  vividElement.attr
+  fastElement.attr
 ], Pagination.prototype, "shape", 2);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Pagination.prototype, "paginationButtons", 2);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Pagination.prototype, "prevButton", 2);
 __decorateClass([
-  vividElement.observable
+  fastElement.observable
 ], Pagination.prototype, "nextButton", 2);
 __decorateClass([
-  vividElement.attr({ attribute: "nav-icons", mode: "boolean" })
+  fastElement.attr({ attribute: "nav-icons", mode: "boolean" })
 ], Pagination.prototype, "navIcons", 2);
 __decorateClass([
-  vividElement.volatile
+  fastElement.volatile
 ], Pagination.prototype, "pagesList", 1);
 __decorateClass([
-  vividElement.attr({ mode: "reflect", converter: totalConverter })
+  fastElement.attr({ mode: "reflect", converter: totalConverter })
 ], Pagination.prototype, "total", 2);
 __decorateClass([
-  vividElement.attr({
+  fastElement.attr({
     mode: "reflect",
     converter: totalConverter,
     attribute: "selected-index"
@@ -162,13 +160,13 @@ const handleKeyDown = (value, { event, parent }) => {
     );
   }
 };
-const getClasses = (_) => classNames.classNames("control");
+const getClasses = (_) => fastWebUtilities.classNames("control");
 function getButtonAppearance(value, { parent }) {
   return parent.selectedIndex === Number(value) - 1 ? "filled" : "ghost";
 }
-const paginationButtonRenderer = (buttonTag) => vividElement.html` ${when.when(
+const paginationButtonRenderer = (buttonTag) => fastElement.html` ${fastElement.when(
   (value) => value !== "...",
-  vividElement.html`
+  fastElement.html`
 		<${buttonTag} class="vwc-pagination-button"
 			label="${(value) => value}"
 			appearance="${getButtonAppearance}"
@@ -183,9 +181,9 @@ const paginationButtonRenderer = (buttonTag) => vividElement.html` ${when.when(
 		</${buttonTag}>
 	`
 )}
-${when.when(
+${fastElement.when(
   (value) => value === "...",
-  vividElement.html` <div
+  fastElement.html` <div
 		class="dots size-${(_, { parent: x }) => getPaginationSize(x)}"
 		aria-hidden="true"
 	>
@@ -208,11 +206,11 @@ const getPaginationButtonWidth = (value) => {
   return `calc(var(--base-size) + ${String(value).length - 1}ch)`;
 };
 const PaginationTemplate = (context) => {
-  const buttonTag = context.tagFor(definition.Button);
+  const buttonTag = context.tagFor(button_definition.Button);
   const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
-  return vividElement.html`
+  return fastElement.html`
 	<div class="${getClasses}">
-		<${buttonTag} class="prev-button" ${ref.ref("prevButton")}
+		<${buttonTag} class="prev-button" ${fastElement.ref("prevButton")}
 			label="${(x) => !x.navIcons ? "Previous" : null}"
 			icon="${(x) => x.navIcons ? "chevron-left-line" : null}"
 			size="${getPaginationSize}"
@@ -221,13 +219,13 @@ const PaginationTemplate = (context) => {
 			@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex--}"
 			aria-label="${(x) => x.locale.pagination.previousPageLabel}"
 		></${buttonTag}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${children.children({
+		<div id="buttons-wrapper" class="buttons-wrapper" ${fastElement.children({
     property: "paginationButtons",
-    filter: slotted.elements(buttonTag)
+    filter: fastElement.elements(buttonTag)
   })}>
-			${repeat.repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
+			${fastElement.repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
 		</div>
-		<${buttonTag} class="next-button" ${ref.ref("nextButton")}
+		<${buttonTag} class="next-button" ${fastElement.ref("nextButton")}
 			label="${(x) => !x.navIcons ? "Next" : null}"
 			icon="${(x) => x.navIcons ? "chevron-right-line" : null}"
 			size="${getPaginationSize}"
@@ -243,13 +241,13 @@ const paginationDefinition = vividElement.defineVividComponent(
   "pagination",
   Pagination,
   PaginationTemplate,
-  [definition.buttonDefinition],
+  [button_definition.buttonDefinition],
   {
     styles
   }
 );
 const registerPagination = vividElement.createRegisterFunction(paginationDefinition);
 
-exports.Pagination = Pagination;
+exports.VwcPaginationElement = Pagination;
 exports.paginationDefinition = paginationDefinition;
 exports.registerPagination = registerPagination;

package/{shared/definition38.js → pagination/definition.js}

@@ -1,13 +1,9 @@
-import { B as Button, b as buttonDefinition } from './definition11.js';
-import { V as VividElement, a as attr, o as observable, v as volatile, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { L as Localized } from './localized.js';
-import { b as Size, S as Shape } from './enums.js';
-import { e as elements } from './slotted.js';
-import { c as classNames } from './class-names.js';
-import { r as ref } from './ref.js';
-import { c as children } from './children.js';
-import { r as repeat } from './repeat.js';
-import { w as when } from './when.js';
+import { B as Button, b as buttonDefinition } from '../unbundled/definition.js';
+import { V as VividElement, d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { attr, observable, volatile, ref, children, repeat, elements, html, when } from '@microsoft/fast-element';
+import { L as Localized } from '../unbundled/localized.js';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { b as Size, S as Shape } from '../unbundled/enums.js';
 
 const styles = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
 
@@ -248,4 +244,4 @@ const paginationDefinition = defineVividComponent(
 );
 const registerPagination = createRegisterFunction(paginationDefinition);
 
-export { Pagination as P, paginationDefinition as p, registerPagination as r };
+export { Pagination as VwcPaginationElement, paginationDefinition, registerPagination };

package/pagination/index.cjs

@@ -1,5 +1,43 @@
-'use strict';
-
-const definition = require('../shared/definition38.cjs');
-
-definition.registerPagination();
+"use strict";const b=require("../bundled/definition3.cjs"),s=require("../bundled/vivid-element.cjs"),I=require("../bundled/localized.cjs"),l=require("../bundled/enums.cjs"),m=require("../bundled/slotted.cjs"),z=require("../bundled/class-names.cjs"),v=require("../bundled/ref.cjs"),y=require("../bundled/children.cjs"),w=require("../bundled/repeat.cjs"),g=require("../bundled/when.cjs"),S=".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";var B=Object.defineProperty,_=Object.getOwnPropertyDescriptor,r=(i,e,t,n)=>{for(var o=n>1?void 0:n?_(e,t):e,c=i.length-1,d;c>=0;c--)(d=i[c])&&(o=(n?d(e,t,o):d(o))||o);return n&&o&&B(e,t,o),o};const p=7,f={fromView:i=>parseInt(i,10),toView:i=>i.toString()};class a extends I.Localized(s.VividElement){constructor(){super(),this.navIcons=!1,this.total=0,this.selectedIndex=0,this.addEventListener("tabpressed",e=>{const{value:t,shiftKey:n}=e.detail,o=this.paginationButtons.findIndex($=>Number($.label)===t),c=n?-1:1,d=o+c;if(d<0)return this.prevButton.focus();if(d>this.paginationButtons.length-1)return this.nextButton.focus();this.paginationButtons&&this.paginationButtons[o+c].focus()})}get pagesList(){return new Array(this.total<p?this.total:p).fill(0).map((e,t,n)=>{if(t===0)return 1;if(t===n.length-1)return this.total;if(this.selectedIndex!==void 0&&this.total>p){if(this.selectedIndex<4&&t===p-2)return"...";if(this.selectedIndex>=4&&this.selectedIndex<=this.total-5){if(t>1&&t<p-2)return this.selectedIndex+(t-2);if(t===1||t===p-2)return"..."}if(this.selectedIndex>this.total-5){if(t>1)return this.total-(6-t);if(t===1)return"..."}}return t+1})}totalChanged(e,t){if(t<0){this.total=0;return}this.#t()}selectedIndexChanged(e,t){e!==void 0&&(this.$emit("pagination-change",{selectedIndex:t,total:this.total,oldIndex:e}),this.#t())}paginationButtonsChanged(e,t){t.forEach(n=>{n.shadowRoot.querySelector("button").setAttribute("part","button")})}get#e(){return Math.max(0,Math.min(this.selectedIndex??0,this.total-1))}#t(){this.selectedIndex!==this.#e&&window.queueMicrotask(()=>{this.selectedIndex!==this.#e&&(this.selectedIndex=this.#e)})}}r([s.attr],a.prototype,"size",2);r([s.attr],a.prototype,"shape",2);r([s.observable],a.prototype,"paginationButtons",2);r([s.observable],a.prototype,"prevButton",2);r([s.observable],a.prototype,"nextButton",2);r([s.attr({attribute:"nav-icons",mode:"boolean"})],a.prototype,"navIcons",2);r([s.volatile],a.prototype,"pagesList",1);r([s.attr({mode:"reflect",converter:f})],a.prototype,"total",2);r([s.attr({mode:"reflect",converter:f,attribute:"selected-index"})],a.prototype,"selectedIndex",2);const P=[l.Size.SuperCondensed,l.Size.Condensed,l.Size.Normal],L=[l.Shape.Rounded,l.Shape.Pill],x=(i,{parent:e})=>e.selectedIndex=Number(i)-1,E=(i,{event:e,parent:t})=>{(e.key===" "||e.key==="Enter")&&x(i,{parent:t}),e.key==="Tab"&&e.target.dispatchEvent(new CustomEvent("tabpressed",{detail:{value:i,shiftKey:e.shiftKey},bubbles:!0,composed:!0}))},q=i=>z.classNames("control");function C(i,{parent:e}){return e.selectedIndex===Number(i)-1?"filled":"ghost"}const D=i=>s.html` ${g.when(e=>e!=="...",s.html`
+		<${i} class="vwc-pagination-button"
+			label="${e=>e}"
+			appearance="${C}"
+			size="${(e,{parent:t})=>u(t)}"
+			shape="${(e,{parent:t})=>h(t)}"
+			style="inline-size: ${e=>A(e)};"
+			tabindex="0"
+			aria-label="${(e,{parent:t})=>t.locale.pagination.goToPageLabel(e)}"
+			aria-current="${(e,{parent:t})=>t.selectedIndex===Number(e)-1}"
+			@click="${x}"
+			@keydown="${E}">
+		</${i}>
+	`)}
+${g.when(e=>e==="...",s.html` <div
+		class="dots size-${(e,{parent:t})=>u(t)}"
+		aria-hidden="true"
+	>
+		...
+	</div>`)}`,u=i=>!i.size||!P.includes(i.size)?l.Size.SuperCondensed:i.size,h=i=>!i.shape||!L.includes(i.shape)?l.Shape.Rounded:i.shape,A=i=>`calc(var(--base-size) + ${String(i).length-1}ch)`,N=i=>{const e=i.tagFor(b.Button),t=D(e);return s.html`
+	<div class="${q}">
+		<${e} class="prev-button" ${v.ref("prevButton")}
+			label="${n=>n.navIcons?null:"Previous"}"
+			icon="${n=>n.navIcons?"chevron-left-line":null}"
+			size="${u}"
+			shape="${h}"
+			?disabled="${n=>n.total===0||n.selectedIndex===0}"
+			@click="${n=>n.selectedIndex!==void 0&&n.selectedIndex--}"
+			aria-label="${n=>n.locale.pagination.previousPageLabel}"
+		></${e}>
+		<div id="buttons-wrapper" class="buttons-wrapper" ${y.children({property:"paginationButtons",filter:m.elements(e)})}>
+			${w.repeat(n=>n.pagesList,t,{positioning:!0})}
+		</div>
+		<${e} class="next-button" ${v.ref("nextButton")}
+			label="${n=>n.navIcons?null:"Next"}"
+			icon="${n=>n.navIcons?"chevron-right-line":null}"
+			size="${u}"
+			shape="${h}"
+			?disabled="${n=>n.total===0||n.selectedIndex===n.total-1}"
+			@click="${n=>n.selectedIndex!==void 0&&n.selectedIndex++}"
+			aria-label="${n=>n.locale.pagination.nextPageLabel}"
+		></${e}>
+</div>`},O=s.defineVividComponent("pagination",a,N,[b.buttonDefinition],{styles:S}),R=s.createRegisterFunction(O);R();

package/pagination/index.js

@@ -1,3 +1,194 @@
-import { r as registerPagination } from '../shared/definition38.js';
-
-registerPagination();
+import { B as y, b as z } from "../bundled/definition3.js";
+import { V as w, a as c, o as g, v as B, h as p, c as S, d as _ } from "../bundled/vivid-element.js";
+import { L as P } from "../bundled/localized.js";
+import { a as u, b as v } from "../bundled/enums.js";
+import { e as L } from "../bundled/slotted.js";
+import { c as C } from "../bundled/class-names.js";
+import { r as b } from "../bundled/ref.js";
+import { c as E } from "../bundled/children.js";
+import { r as D } from "../bundled/repeat.js";
+import { w as m } from "../bundled/when.js";
+const A = ".control{display:inline-flex;justify-content:space-between}.control:not(.shape-pill){border-radius:4px}.control.shape-pill{border-radius:16px}.buttons-wrapper{display:flex;column-gap:4px}.vwc-pagination-button[size=super-condensed]{--base-size: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=condensed]{--base-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button[size=normal]{--base-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.vwc-pagination-button::part(button){padding-inline:0}.dots{align-self:center;text-align:center}.dots:not(.size-super-condensed){font:var(--vvd-typography-base-bold)}.dots.size-super-condensed{font:var(--vvd-typography-base-condensed-bold);inline-size:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-condensed{inline-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}.dots.size-normal{inline-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)))}";
+var N = Object.defineProperty, O = Object.getOwnPropertyDescriptor, a = (s, e, t, n) => {
+  for (var i = n > 1 ? void 0 : n ? O(e, t) : e, r = s.length - 1, l; r >= 0; r--)
+    (l = s[r]) && (i = (n ? l(e, t, i) : l(i)) || i);
+  return n && i && N(e, t, i), i;
+};
+const d = 7, x = {
+  fromView: (s) => parseInt(s, 10),
+  toView: (s) => s.toString()
+};
+class o extends P(w) {
+  constructor() {
+    super(), this.navIcons = !1, this.total = 0, this.selectedIndex = 0, this.addEventListener("tabpressed", (e) => {
+      const { value: t, shiftKey: n } = e.detail, i = this.paginationButtons.findIndex(
+        (I) => Number(I.label) === t
+      ), r = n ? -1 : 1, l = i + r;
+      if (l < 0)
+        return this.prevButton.focus();
+      if (l > this.paginationButtons.length - 1)
+        return this.nextButton.focus();
+      this.paginationButtons && this.paginationButtons[i + r].focus();
+    });
+  }
+  get pagesList() {
+    return new Array(
+      this.total < d ? this.total : d
+    ).fill(0).map((e, t, n) => {
+      if (t === 0) return 1;
+      if (t === n.length - 1) return this.total;
+      if (this.selectedIndex !== void 0 && this.total > d) {
+        if (this.selectedIndex < 4 && t === d - 2)
+          return "...";
+        if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
+          if (t > 1 && t < d - 2)
+            return this.selectedIndex + (t - 2);
+          if (t === 1 || t === d - 2) return "...";
+        }
+        if (this.selectedIndex > this.total - 5) {
+          if (t > 1) return this.total - (6 - t);
+          if (t === 1) return "...";
+        }
+      }
+      return t + 1;
+    });
+  }
+  totalChanged(e, t) {
+    if (t < 0) {
+      this.total = 0;
+      return;
+    }
+    this.#t();
+  }
+  selectedIndexChanged(e, t) {
+    e !== void 0 && (this.$emit("pagination-change", {
+      selectedIndex: t,
+      total: this.total,
+      oldIndex: e
+    }), this.#t());
+  }
+  paginationButtonsChanged(e, t) {
+    t.forEach((n) => {
+      n.shadowRoot.querySelector("button").setAttribute("part", "button");
+    });
+  }
+  get #e() {
+    return Math.max(0, Math.min(this.selectedIndex ?? 0, this.total - 1));
+  }
+  #t() {
+    this.selectedIndex !== this.#e && window.queueMicrotask(() => {
+      this.selectedIndex !== this.#e && (this.selectedIndex = this.#e);
+    });
+  }
+}
+a([
+  c
+], o.prototype, "size", 2);
+a([
+  c
+], o.prototype, "shape", 2);
+a([
+  g
+], o.prototype, "paginationButtons", 2);
+a([
+  g
+], o.prototype, "prevButton", 2);
+a([
+  g
+], o.prototype, "nextButton", 2);
+a([
+  c({ attribute: "nav-icons", mode: "boolean" })
+], o.prototype, "navIcons", 2);
+a([
+  B
+], o.prototype, "pagesList", 1);
+a([
+  c({ mode: "reflect", converter: x })
+], o.prototype, "total", 2);
+a([
+  c({
+    mode: "reflect",
+    converter: x,
+    attribute: "selected-index"
+  })
+], o.prototype, "selectedIndex", 2);
+const R = [
+  u.SuperCondensed,
+  u.Condensed,
+  u.Normal
+], T = [v.Rounded, v.Pill], $ = (s, { parent: e }) => e.selectedIndex = Number(s) - 1, K = (s, { event: e, parent: t }) => {
+  (e.key === " " || e.key === "Enter") && $(s, { parent: t }), e.key === "Tab" && e.target.dispatchEvent(
+    new CustomEvent("tabpressed", {
+      detail: { value: s, shiftKey: e.shiftKey },
+      bubbles: !0,
+      composed: !0
+    })
+  );
+}, M = (s) => C("control");
+function V(s, { parent: e }) {
+  return e.selectedIndex === Number(s) - 1 ? "filled" : "ghost";
+}
+const j = (s) => p` ${m(
+  (e) => e !== "...",
+  p`
+		<${s} class="vwc-pagination-button"
+			label="${(e) => e}"
+			appearance="${V}"
+			size="${(e, { parent: t }) => h(t)}"
+			shape="${(e, { parent: t }) => f(t)}"
+			style="inline-size: ${(e) => k(e)};"
+			tabindex="0"
+			aria-label="${(e, { parent: t }) => t.locale.pagination.goToPageLabel(e)}"
+			aria-current="${(e, { parent: t }) => t.selectedIndex === Number(e) - 1}"
+			@click="${$}"
+			@keydown="${K}">
+		</${s}>
+	`
+)}
+${m(
+  (e) => e === "...",
+  p` <div
+		class="dots size-${(e, { parent: t }) => h(t)}"
+		aria-hidden="true"
+	>
+		...
+	</div>`
+)}`, h = (s) => !s.size || !R.includes(s.size) ? u.SuperCondensed : s.size, f = (s) => !s.shape || !T.includes(s.shape) ? v.Rounded : s.shape, k = (s) => `calc(var(--base-size) + ${String(s).length - 1}ch)`, W = (s) => {
+  const e = s.tagFor(y), t = j(e);
+  return p`
+	<div class="${M}">
+		<${e} class="prev-button" ${b("prevButton")}
+			label="${(n) => n.navIcons ? null : "Previous"}"
+			icon="${(n) => n.navIcons ? "chevron-left-line" : null}"
+			size="${h}"
+			shape="${f}"
+			?disabled="${(n) => n.total === 0 || n.selectedIndex === 0}"
+			@click="${(n) => n.selectedIndex !== void 0 && n.selectedIndex--}"
+			aria-label="${(n) => n.locale.pagination.previousPageLabel}"
+		></${e}>
+		<div id="buttons-wrapper" class="buttons-wrapper" ${E({
+    property: "paginationButtons",
+    filter: L(e)
+  })}>
+			${D((n) => n.pagesList, t, { positioning: !0 })}
+		</div>
+		<${e} class="next-button" ${b("nextButton")}
+			label="${(n) => n.navIcons ? null : "Next"}"
+			icon="${(n) => n.navIcons ? "chevron-right-line" : null}"
+			size="${h}"
+			shape="${f}"
+			?disabled="${(n) => n.total === 0 || n.selectedIndex === n.total - 1}"
+			@click="${(n) => n.selectedIndex !== void 0 && n.selectedIndex++}"
+			aria-label="${(n) => n.locale.pagination.nextPageLabel}"
+		></${e}>
+</div>`;
+}, q = _(
+  "pagination",
+  o,
+  W,
+  [z],
+  {
+    styles: A
+  }
+), F = S(q);
+F();

package/popup/definition.cjs

@@ -0,0 +1,13 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+require('../unbundled/definition.cjs');
+require('../unbundled/definition5.cjs');
+require('../unbundled/vivid-element.cjs');
+const popup_definition = require('../unbundled/definition4.cjs');
+
+
+
+exports.popupDefinition = popup_definition.popupDefinition;
+exports.registerPopup = popup_definition.registerPopup;

package/popup/definition.js

@@ -0,0 +1,4 @@
+import '../unbundled/definition.js';
+import '../unbundled/definition5.js';
+import '../unbundled/vivid-element.js';
+export { p as popupDefinition, r as registerPopup } from '../unbundled/definition4.js';

package/popup/index.cjs

@@ -1,5 +1 @@
-'use strict';
-
-const definition = require('../shared/definition67.cjs');
-
-definition.registerPopup();
+"use strict";const e=require("../bundled/definition9.cjs");e.registerPopup();

package/popup/index.js

@@ -1,3 +1,2 @@
-import { r as registerPopup } from '../shared/definition67.js';
-
-registerPopup();
+import { r } from "../bundled/definition9.js";
+r();

package/{shared/definition40.cjs → progress/definition.cjs}

@@ -1,10 +1,12 @@
 'use strict';
 
-const vividElement = require('./vivid-element.cjs');
-const baseProgress = require('./base-progress.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const baseProgress = require('../unbundled/base-progress.cjs');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
 
 const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
 
@@ -24,16 +26,16 @@ class Progress extends delegatesAria.DelegatesAria(baseProgress.BaseProgress) {
   }
 }
 __decorateClass([
-  vividElement.attr()
+  fastElement.attr()
 ], Progress.prototype, "shape");
 __decorateClass([
-  vividElement.attr()
+  fastElement.attr()
 ], Progress.prototype, "connotation");
 __decorateClass([
-  vividElement.attr({ mode: "boolean" })
+  fastElement.attr({ mode: "boolean" })
 ], Progress.prototype, "reverse");
 
-const getClasses = ({ connotation, shape, reverse, paused }) => classNames.classNames(
+const getClasses = ({ connotation, shape, reverse, paused }) => fastWebUtilities.classNames(
   "base",
   [`connotation-${connotation}`, Boolean(connotation)],
   [`shape-${shape}`, Boolean(shape)],
@@ -41,18 +43,18 @@ const getClasses = ({ connotation, shape, reverse, paused }) => classNames.class
   ["paused", Boolean(paused)]
 );
 function determinate() {
-  return vividElement.html` <span
+  return fastElement.html` <span
 		class="determinate"
 		style="width: ${(x) => x.percentComplete}%"
 	></span>`;
 }
 function indeterminate() {
-  return vividElement.html` <span class="indeterminate" name="indeterminate">
+  return fastElement.html` <span class="indeterminate" name="indeterminate">
 		<span class="indicator-1"></span>
 		<span class="indicator-2"></span>
 	</span>`;
 }
-const ProgressTemplate = vividElement.html`<template>
+const ProgressTemplate = fastElement.html`<template>
 	<div
 		class="${getClasses}"
 		${delegatesAria.delegateAria({
@@ -63,8 +65,8 @@ const ProgressTemplate = vividElement.html`<template>
 })}
 	>
 		<div class="progress">
-			${when.when((x) => typeof x.value === "number", determinate())}
-			${when.when((x) => typeof x.value !== "number", indeterminate())}
+			${fastElement.when((x) => typeof x.value === "number", determinate())}
+			${fastElement.when((x) => typeof x.value !== "number", indeterminate())}
 		</div>
 	</div>
 </template>`;
@@ -80,6 +82,6 @@ const progressDefinition = vividElement.defineVividComponent(
 );
 const registerProgress = vividElement.createRegisterFunction(progressDefinition);
 
-exports.Progress = Progress;
+exports.VwcProgressElement = Progress;
 exports.progressDefinition = progressDefinition;
 exports.registerProgress = registerProgress;

package/{shared/definition40.js → progress/definition.js}

@@ -1,8 +1,8 @@
-import { a as attr, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { B as BaseProgress } from './base-progress.js';
-import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
-import { c as classNames } from './class-names.js';
-import { w as when } from './when.js';
+import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { attr, when, html } from '@microsoft/fast-element';
+import { B as BaseProgress } from '../unbundled/base-progress.js';
+import { D as DelegatesAria, d as delegateAria } from '../unbundled/delegates-aria.js';
+import { classNames } from '@microsoft/fast-web-utilities';
 
 const styles = ".base{height:6px;align-items:center;margin:0;outline:none}.base:not(.connotation-pacific).connotation-cta{--_connotation-color-primary: var(--vvd-progress-cta-primary, var(--vvd-color-cta-500));--_connotation-color-soft: var(--vvd-progress-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-pacific).connotation-alert{--_connotation-color-primary: var(--vvd-progress-alert-primary, var(--vvd-color-alert-500));--_connotation-color-soft: var(--vvd-progress-alert-soft, var(--vvd-color-alert-100))}.base:not(.connotation-pacific).connotation-success{--_connotation-color-primary: var(--vvd-progress-success-primary, var(--vvd-color-success-500));--_connotation-color-soft: var(--vvd-progress-success-soft, var(--vvd-color-success-100))}.base:not(.connotation-pacific):not(.connotation-cta,.connotation-alert,.connotation-success){--_connotation-color-primary: var(--vvd-progress-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-progress-accent-soft, var(--vvd-color-neutral-100))}.base:not(.connotation-pacific){--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-pacific{--_connotation-color-primary: linear-gradient(to right, var(--vvd-color-information-200), var(--vvd-color-cta-600))}.progress{position:relative;display:flex;overflow:hidden;align-items:center;block-size:100%;inline-size:100%}.base:not(.connotation-pacific) .progress{background-color:var(--_appearance-color-fill)}.base.connotation-pacific .progress{background-color:var(--vvd-color-neutral-100)}.base:not(.shape-sharp) .progress{border-radius:4px}.indeterminate{display:flex;border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;inline-size:100%}.determinate{border-radius:inherit;background-color:var(--_connotation-color-primary);block-size:100%;transition:all .2s ease-in-out}.connotation-pacific .determinate{background-image:var(--_connotation-color-primary)}.reverse .determinate{position:absolute;right:0}.paused .determinate{background:var(--vvd-color-neutral-300)}.indicator-1{animation:indeterminate-1 2s infinite;inline-size:30%}.indicator-2{animation:indeterminate-2 2s infinite;inline-size:60%}.indicator-1,.indicator-2{position:absolute;animation-timing-function:cubic-bezier(.4,0,.6,1);background-color:var(--vvd-color-neutral-100);block-size:100%;opacity:0}.connotation-pacific .indicator-1,.connotation-pacific .indicator-2{background-image:var(--_connotation-color-primary)}.paused .indicator-1,.paused .indicator-2{animation-play-state:paused;background-color:var(--_connotation-color-primary)}.reverse .indicator-1,.reverse .indicator-2{animation-direction:reverse}@keyframes indeterminate-1{0%{opacity:1;transform:translate(-100%)}70%{opacity:1;transform:translate(300%)}70.01%{opacity:0}to{opacity:0;transform:translate(300%)}}@keyframes indeterminate-2{0%{opacity:0;transform:translate(-150%)}29.99%{opacity:0}30%{opacity:1;transform:translate(-150%)}to{opacity:1;transform:translate(166.66%)}}";
 
@@ -78,4 +78,4 @@ const progressDefinition = defineVividComponent(
 );
 const registerProgress = createRegisterFunction(progressDefinition);
 
-export { Progress as P, progressDefinition as p, registerProgress as r };
+export { Progress as VwcProgressElement, progressDefinition, registerProgress };