@vonage/vivid 5.0.0 → 5.2.0

package/option/definition.cjs

@@ -0,0 +1,84 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const icon_definition = require('../icon/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const option = require('../unbundled/option.cjs');
+const fastElement = require('@microsoft/fast-element');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const affix = require('../unbundled/affix.cjs');
+const hostSemantics = require('../unbundled/host-semantics.cjs');
+
+const getClasses = (x) => fastWebUtilities.classNames(
+  "base",
+  ["disabled", x.disabled],
+  ["selected", Boolean(x.selected)],
+  ["hover", Boolean(x._highlighted)],
+  ["active", Boolean(x.checked)],
+  ["icon", Boolean(x.icon)],
+  ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]
+);
+function text() {
+  return fastElement.html`${fastElement.when(
+    (x) => x.text || x.textSecondary,
+    fastElement.html`<span class="text">
+			${fastElement.when(
+      (x) => x.text,
+      fastElement.html`<span class="text-primary">
+					${fastElement.when(
+        (x) => x._hasMatchedText,
+        fastElement.html`${(x) => x.text.slice(0, x._matchedRange.from)}<span class="match"
+								>${(x) => x.text.slice(x._matchedRange.from, x._matchedRange.to)}</span
+							>`
+      )}${(x) => x.text.slice(x._matchedRange.to)}
+				</span>`
+    )}
+			${fastElement.when(
+      (x) => x.textSecondary,
+      fastElement.html`<span class="text-secondary">${(x) => x.textSecondary}</span>`
+    )}
+		</span>`
+  )}`;
+}
+const ListboxOptionTemplate = (context) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  const iconTag = context.tagFor(icon_definition.VwcIconElement);
+  return fastElement.html`
+		<template
+			${hostSemantics.applyHostSemantics({
+    role: "option",
+    ariaChecked: (x) => x.checked,
+    ariaSelected: (x) => x.selected,
+    ariaDisabled: (x) => x.disabled
+  })}
+			style="${(x) => x._isNotMatching ? "display: none" : ""}"
+		>
+			<div class="${getClasses}">
+				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${text()}
+				<slot name="trailing-meta"></slot>
+				${fastElement.when(
+    (x) => x._displayCheckmark && x.selected,
+    fastElement.html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
+  )}
+			</div>
+		</template>
+	`;
+};
+
+const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}";
+
+const listboxOptionDefinition = vividElement.defineVividComponent(
+  "option",
+  option.ListboxOption,
+  ListboxOptionTemplate,
+  [icon_definition.iconDefinition],
+  {
+    styles
+  }
+);
+const registerOption = vividElement.createRegisterFunction(listboxOptionDefinition);
+
+exports.VwcOptionElement = option.ListboxOption;
+exports.listboxOptionDefinition = listboxOptionDefinition;
+exports.registerOption = registerOption;

package/option/definition.js

@@ -0,0 +1,78 @@
+import { VwcIconElement as Icon, iconDefinition } from '../icon/definition.js';
+import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { L as ListboxOption } from '../unbundled/option.js';
+import { when, html } from '@microsoft/fast-element';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { a as applyHostSemantics } from '../unbundled/host-semantics.js';
+
+const getClasses = (x) => classNames(
+  "base",
+  ["disabled", x.disabled],
+  ["selected", Boolean(x.selected)],
+  ["hover", Boolean(x._highlighted)],
+  ["active", Boolean(x.checked)],
+  ["icon", Boolean(x.icon)],
+  ["two-lines", Boolean(x.text?.length) && Boolean(x.textSecondary?.length)]
+);
+function text() {
+  return html`${when(
+    (x) => x.text || x.textSecondary,
+    html`<span class="text">
+			${when(
+      (x) => x.text,
+      html`<span class="text-primary">
+					${when(
+        (x) => x._hasMatchedText,
+        html`${(x) => x.text.slice(0, x._matchedRange.from)}<span class="match"
+								>${(x) => x.text.slice(x._matchedRange.from, x._matchedRange.to)}</span
+							>`
+      )}${(x) => x.text.slice(x._matchedRange.to)}
+				</span>`
+    )}
+			${when(
+      (x) => x.textSecondary,
+      html`<span class="text-secondary">${(x) => x.textSecondary}</span>`
+    )}
+		</span>`
+  )}`;
+}
+const ListboxOptionTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const iconTag = context.tagFor(Icon);
+  return html`
+		<template
+			${applyHostSemantics({
+    role: "option",
+    ariaChecked: (x) => x.checked,
+    ariaSelected: (x) => x.selected,
+    ariaDisabled: (x) => x.disabled
+  })}
+			style="${(x) => x._isNotMatching ? "display: none" : ""}"
+		>
+			<div class="${getClasses}">
+				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${text()}
+				<slot name="trailing-meta"></slot>
+				${when(
+    (x) => x._displayCheckmark && x.selected,
+    html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
+  )}
+			</div>
+		</template>
+	`;
+};
+
+const styles = ":host([disabled]){cursor:not-allowed}.base{--_connotation-color-primary: var(--vvd-option-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-option-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-option-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-firm: var(--vvd-option-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-option-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-option-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-pale: var(--vvd-option-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-dim: var(--vvd-option-accent-dim, var(--vvd-color-neutral-200))}.base{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}@media (hover: hover){.base:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}}.base.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-faint);--_appearance-color-outline: transparent}.base:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.selected:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}@media (hover: hover){.base.selected:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}}.base.selected.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-dim);--_appearance-color-outline: transparent}.base{display:flex;box-sizing:border-box;align-items:center;border-radius:8px;background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_option-appearance-color-text, var(--_appearance-color-text));font:var(--vvd-typography-base);gap:var(--_option-gap);hyphens:auto;inline-size:100%;min-block-size:var(--_option-min-block-size);padding-inline:var(--_option-padding-inline);vertical-align:middle;word-break:break-word}.base{--_option-min-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) }.base:not(.two-lines){--_option-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);padding-block:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.two-lines{gap:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))*.4);padding-block:calc(1px*(24 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}@supports (user-select: none){.base{user-select:none}}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}:host([scale=condensed]) .base{--_option-min-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_option-padding-inline: calc(1px*(24 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/2) ;--_option-icon-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))*.4) }:host([scale=condensed]) .base:not(.two-lines){--_option-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;padding-block:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 6)}:host([scale=condensed]) .base.two-lines{gap:calc(calc(1px*(36 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 3);padding-block:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/4)}.base.active{--focus-stroke-color: var(--vvd-color-cta-500);--focus-stroke-gap-color: transparent;box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px))}.base.hidden{display:none}.text{display:flex;flex-direction:column;font:var(--vvd-typography-base);gap:4px;margin-inline-end:auto}.text-primary,.text-secondary{display:block;font:var(--vvd-typography-base)}.text-primary{font:var(--vvd-typography-base)}.base:not(.disabled) .text-primary{color:var(--vvd-color-canvas-text)}.base.disabled .text-primary{color:var(--_appearance-color-text)}.base.two-lines .text-primary{font:var(--vvd-typography-base-bold)}.text-secondary{color:var(--vvd-color-neutral-800);font:var(--vvd-typography-base-condensed)}.base.two-lines .text-secondary{color:var(--vvd-color-neutral-600)}.base.disabled .text-secondary{color:var(--_appearance-color-text)}.base.selected:not(.disabled) .text-secondary{color:var(--vvd-color-neutral-800)}.match{color:var(--vvd-color-cta-600);font:var(--vvd-typography-base-bold)}slot[name=icon]{font-size:var(--_option-icon-size);line-height:1}.base:not(.disabled,.selected) slot[name=icon]{color:var(--vvd-color-neutral-600)}.checkmark{font-size:var(--_option-icon-size)}";
+
+const listboxOptionDefinition = defineVividComponent(
+  "option",
+  ListboxOption,
+  ListboxOptionTemplate,
+  [iconDefinition],
+  {
+    styles
+  }
+);
+const registerOption = createRegisterFunction(listboxOptionDefinition);
+
+export { ListboxOption as VwcOptionElement, listboxOptionDefinition, registerOption };

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.2.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();