@vonage/vivid 4.24.0 → 4.25.0

package/shared/definition37.cjs

@@ -1,248 +1,71 @@
 'use strict';
 
-const definition = require('./definition11.cjs');
+const definition = require('./definition28.cjs');
 const vividElement = require('./vivid-element.cjs');
-const enums = require('./enums.cjs');
-const slotted = require('./slotted.cjs');
+const option = require('./option.cjs');
+const affix = require('./affix.cjs');
+const hostSemantics = require('./host-semantics.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');
 
-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)))}";
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const MAX_DIGITS_AND_PLACEHOLDERS = 7;
-const totalConverter = {
-  fromView: (value) => parseInt(value, 10),
-  toView: (value) => value.toString()
-};
-class Pagination extends vividElement.VividElement {
-  constructor() {
-    super();
-    this.navIcons = false;
-    this.total = 0;
-    this.selectedIndex = 0;
-    this.addEventListener("tabpressed", (e) => {
-      const { value: currentLabel, shiftKey } = e.detail;
-      const index = this.paginationButtons.findIndex(
-        (button) => Number(button.label) === currentLabel
-      );
-      const focusDirection = shiftKey ? -1 : 1;
-      const newIndex = index + focusDirection;
-      if (newIndex < 0) {
-        return this.prevButton.focus();
-      }
-      if (newIndex > this.paginationButtons.length - 1) {
-        return this.nextButton.focus();
-      }
-      this.paginationButtons && this.paginationButtons[index + focusDirection].focus();
-    });
-  }
-  get pagesList() {
-    return new Array(
-      this.total < MAX_DIGITS_AND_PLACEHOLDERS ? this.total : MAX_DIGITS_AND_PLACEHOLDERS
-    ).fill(0).map((_, i, arr) => {
-      if (i === 0) return 1;
-      if (i === arr.length - 1) return this.total;
-      if (this.selectedIndex !== void 0 && this.total > MAX_DIGITS_AND_PLACEHOLDERS) {
-        if (this.selectedIndex < 4) {
-          if (i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return "...";
-        }
-        if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
-          if (i > 1 && i < MAX_DIGITS_AND_PLACEHOLDERS - 2)
-            return this.selectedIndex + (i - 2);
-          if (i === 1 || i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return "...";
-        }
-        if (this.selectedIndex > this.total - 5) {
-          if (i > 1) return this.total - (6 - i);
-          if (i === 1) return "...";
-        }
-      }
-      return i + 1;
-    });
-  }
-  totalChanged(_, newValue) {
-    if (newValue < 0) {
-      this.total = 0;
-      return;
-    }
-    this.#constrainSelectedIndex();
-  }
-  selectedIndexChanged(oldValue, newValue) {
-    if (oldValue === void 0) return;
-    this.$emit("pagination-change", {
-      selectedIndex: newValue,
-      total: this.total,
-      oldIndex: oldValue
-    });
-    this.#constrainSelectedIndex();
-  }
-  paginationButtonsChanged(_, newValue) {
-    newValue.forEach((button) => {
-      button.shadowRoot.querySelector("button").setAttribute("part", "button");
-    });
-  }
-  get #constrainedSelectedIndex() {
-    return Math.max(0, Math.min(this.selectedIndex ?? 0, this.total - 1));
-  }
-  #constrainSelectedIndex() {
-    if (this.selectedIndex !== this.#constrainedSelectedIndex) {
-      window.queueMicrotask(() => {
-        if (this.selectedIndex !== this.#constrainedSelectedIndex) {
-          this.selectedIndex = this.#constrainedSelectedIndex;
-        }
-      });
-    }
-  }
-}
-__decorateClass([
-  vividElement.attr
-], Pagination.prototype, "size", 2);
-__decorateClass([
-  vividElement.attr
-], Pagination.prototype, "shape", 2);
-__decorateClass([
-  vividElement.observable
-], Pagination.prototype, "paginationButtons", 2);
-__decorateClass([
-  vividElement.observable
-], Pagination.prototype, "prevButton", 2);
-__decorateClass([
-  vividElement.observable
-], Pagination.prototype, "nextButton", 2);
-__decorateClass([
-  vividElement.attr({ attribute: "nav-icons", mode: "boolean" })
-], Pagination.prototype, "navIcons", 2);
-__decorateClass([
-  vividElement.volatile
-], Pagination.prototype, "pagesList", 1);
-__decorateClass([
-  vividElement.attr({ mode: "reflect", converter: totalConverter })
-], Pagination.prototype, "total", 2);
-__decorateClass([
-  vividElement.attr({
-    mode: "reflect",
-    converter: totalConverter,
-    attribute: "selected-index"
-  })
-], Pagination.prototype, "selectedIndex", 2);
-
-const ALLOWED_SIZES = [
-  enums.Size.SuperCondensed,
-  enums.Size.Condensed,
-  enums.Size.Normal
-];
-const ALLOWED_SHAPES = [enums.Shape.Rounded, enums.Shape.Pill];
-const handleSelection = (value, { parent: x }) => {
-  return x.selectedIndex = Number(value) - 1;
-};
-const handleKeyDown = (value, { event, parent }) => {
-  if (event.key === " " || event.key === "Enter") {
-    handleSelection(value, { parent });
-  }
-  if (event.key === "Tab") {
-    event.target.dispatchEvent(
-      new CustomEvent("tabpressed", {
-        detail: { value, shiftKey: event.shiftKey },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-};
-const getClasses = (_) => classNames.classNames("control");
-function getButtonAppearance(value, { parent }) {
-  return parent.selectedIndex === Number(value) - 1 ? "filled" : "ghost";
-}
-const paginationButtonRenderer = (buttonTag) => vividElement.html` ${when.when(
-  (value) => value !== "...",
-  vividElement.html`
-		<${buttonTag} class="vwc-pagination-button"
-									label="${(value) => value}"
-									appearance="${getButtonAppearance}"
-									size="${(_, { parent: x }) => getPaginationSize(x)}"
-									shape="${(_, { parent: x }) => getPaginationShape(x)}"
-									style="inline-size: ${(value) => getPaginationButtonWidth(value)};"
-									tabindex="0"
-									aria-current="${(value, { parent }) => parent.selectedIndex === Number(value) - 1}"
-									@click="${handleSelection}"
-									@keydown="${handleKeyDown}">
-		</${buttonTag}>
-	`
-)}
-${when.when(
-  (value) => value === "...",
-  vividElement.html` <div class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
-		...
-	</div>`
-)}`;
-const getPaginationSize = (x) => {
-  if (!x.size || !ALLOWED_SIZES.includes(x.size)) {
-    return enums.Size.SuperCondensed;
-  }
-  return x.size;
-};
-const getPaginationShape = (x) => {
-  if (!x.shape || !ALLOWED_SHAPES.includes(x.shape)) {
-    return enums.Shape.Rounded;
-  }
-  return x.shape;
-};
-const getPaginationButtonWidth = (value) => {
-  return `calc(var(--base-size) + ${String(value).length - 1}ch)`;
-};
-const PaginationTemplate = (context) => {
-  const buttonTag = context.tagFor(definition.Button);
-  const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
+const getClasses = (x) => classNames.classNames(
+  "base",
+  ["disabled", x.disabled],
+  ["selected", Boolean(x.selected)],
+  ["hover", Boolean(x._highlighted)],
+  ["active", Boolean(x.checked)],
+  ["icon", Boolean(x.icon)]
+);
+const ListboxOptionTemplate = (context) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  const iconTag = context.tagFor(definition.Icon);
   return vividElement.html`
-	<div class="${getClasses}">
-		<${buttonTag} class="prev-button" ${ref.ref("prevButton")}
-									label="${(x) => !x.navIcons ? "Previous" : null}"
-									icon="${(x) => x.navIcons ? "chevron-left-line" : null}"
-									size="${getPaginationSize}"
-									shape="${getPaginationShape}"
-									?disabled="${(x) => x.total === 0 || x.selectedIndex === 0}"
-									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex--}"
-		></${buttonTag}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${children.children({
-    property: "paginationButtons",
-    filter: slotted.elements(buttonTag)
-  })}>
-			${repeat.repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
-		</div>
-		<${buttonTag} class="next-button" ${ref.ref("nextButton")}
-									label="${(x) => !x.navIcons ? "Next" : null}"
-									icon="${(x) => x.navIcons ? "chevron-right-line" : null}"
-									size="${getPaginationSize}"
-									shape="${getPaginationShape}"
-									?disabled="${(x) => x.total === 0 || x.selectedIndex === x.total - 1}"
-									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex++}"
-		></${buttonTag}>
-</div>`;
+		<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)}
+				${when.when(
+    (x) => x.text,
+    vividElement.html`<div class="text">
+						${when.when(
+      (x) => x._hasMatchedText,
+      vividElement.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)}
+					</div>`
+  )}
+				${when.when(
+    (x) => x._displayCheckmark && x.selected,
+    vividElement.html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
+  )}
+			</div>
+		</template>
+	`;
 };
 
-const paginationDefinition = vividElement.defineVividComponent(
-  "pagination",
-  Pagination,
-  PaginationTemplate,
-  [definition.buttonDefinition],
+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}.base:where(.hover,: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:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,: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-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 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-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 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{font:var(--vvd-typography-base)}.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{margin-left:auto;font-size:var(--_option-icon-size)}";
+
+const listboxOptionDefinition = vividElement.defineVividComponent(
+  "option",
+  option.ListboxOption,
+  ListboxOptionTemplate,
+  [definition.iconDefinition],
   {
     styles
   }
 );
-const registerPagination = vividElement.createRegisterFunction(paginationDefinition);
+const registerOption = vividElement.createRegisterFunction(listboxOptionDefinition);
 
-exports.Pagination = Pagination;
-exports.paginationDefinition = paginationDefinition;
-exports.registerPagination = registerPagination;
+exports.listboxOptionDefinition = listboxOptionDefinition;
+exports.registerOption = registerOption;

package/shared/definition37.js

@@ -1,244 +1,68 @@
-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, g as createRegisterFunction, i as defineVividComponent } from './vivid-element.js';
-import { b as Size, S as Shape } from './enums.js';
-import { e as elements } from './slotted.js';
+import { I as Icon, i as iconDefinition } from './definition28.js';
+import { h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
+import { L as ListboxOption } from './option.js';
+import { a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { a as applyHostSemantics } from './host-semantics.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';
 
-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)))}";
-
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
-  if (kind && result) __defProp(target, key, result);
-  return result;
-};
-const MAX_DIGITS_AND_PLACEHOLDERS = 7;
-const totalConverter = {
-  fromView: (value) => parseInt(value, 10),
-  toView: (value) => value.toString()
-};
-class Pagination extends VividElement {
-  constructor() {
-    super();
-    this.navIcons = false;
-    this.total = 0;
-    this.selectedIndex = 0;
-    this.addEventListener("tabpressed", (e) => {
-      const { value: currentLabel, shiftKey } = e.detail;
-      const index = this.paginationButtons.findIndex(
-        (button) => Number(button.label) === currentLabel
-      );
-      const focusDirection = shiftKey ? -1 : 1;
-      const newIndex = index + focusDirection;
-      if (newIndex < 0) {
-        return this.prevButton.focus();
-      }
-      if (newIndex > this.paginationButtons.length - 1) {
-        return this.nextButton.focus();
-      }
-      this.paginationButtons && this.paginationButtons[index + focusDirection].focus();
-    });
-  }
-  get pagesList() {
-    return new Array(
-      this.total < MAX_DIGITS_AND_PLACEHOLDERS ? this.total : MAX_DIGITS_AND_PLACEHOLDERS
-    ).fill(0).map((_, i, arr) => {
-      if (i === 0) return 1;
-      if (i === arr.length - 1) return this.total;
-      if (this.selectedIndex !== void 0 && this.total > MAX_DIGITS_AND_PLACEHOLDERS) {
-        if (this.selectedIndex < 4) {
-          if (i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return "...";
-        }
-        if (this.selectedIndex >= 4 && this.selectedIndex <= this.total - 5) {
-          if (i > 1 && i < MAX_DIGITS_AND_PLACEHOLDERS - 2)
-            return this.selectedIndex + (i - 2);
-          if (i === 1 || i === MAX_DIGITS_AND_PLACEHOLDERS - 2) return "...";
-        }
-        if (this.selectedIndex > this.total - 5) {
-          if (i > 1) return this.total - (6 - i);
-          if (i === 1) return "...";
-        }
-      }
-      return i + 1;
-    });
-  }
-  totalChanged(_, newValue) {
-    if (newValue < 0) {
-      this.total = 0;
-      return;
-    }
-    this.#constrainSelectedIndex();
-  }
-  selectedIndexChanged(oldValue, newValue) {
-    if (oldValue === void 0) return;
-    this.$emit("pagination-change", {
-      selectedIndex: newValue,
-      total: this.total,
-      oldIndex: oldValue
-    });
-    this.#constrainSelectedIndex();
-  }
-  paginationButtonsChanged(_, newValue) {
-    newValue.forEach((button) => {
-      button.shadowRoot.querySelector("button").setAttribute("part", "button");
-    });
-  }
-  get #constrainedSelectedIndex() {
-    return Math.max(0, Math.min(this.selectedIndex ?? 0, this.total - 1));
-  }
-  #constrainSelectedIndex() {
-    if (this.selectedIndex !== this.#constrainedSelectedIndex) {
-      window.queueMicrotask(() => {
-        if (this.selectedIndex !== this.#constrainedSelectedIndex) {
-          this.selectedIndex = this.#constrainedSelectedIndex;
-        }
-      });
-    }
-  }
-}
-__decorateClass([
-  attr
-], Pagination.prototype, "size", 2);
-__decorateClass([
-  attr
-], Pagination.prototype, "shape", 2);
-__decorateClass([
-  observable
-], Pagination.prototype, "paginationButtons", 2);
-__decorateClass([
-  observable
-], Pagination.prototype, "prevButton", 2);
-__decorateClass([
-  observable
-], Pagination.prototype, "nextButton", 2);
-__decorateClass([
-  attr({ attribute: "nav-icons", mode: "boolean" })
-], Pagination.prototype, "navIcons", 2);
-__decorateClass([
-  volatile
-], Pagination.prototype, "pagesList", 1);
-__decorateClass([
-  attr({ mode: "reflect", converter: totalConverter })
-], Pagination.prototype, "total", 2);
-__decorateClass([
-  attr({
-    mode: "reflect",
-    converter: totalConverter,
-    attribute: "selected-index"
-  })
-], Pagination.prototype, "selectedIndex", 2);
-
-const ALLOWED_SIZES = [
-  Size.SuperCondensed,
-  Size.Condensed,
-  Size.Normal
-];
-const ALLOWED_SHAPES = [Shape.Rounded, Shape.Pill];
-const handleSelection = (value, { parent: x }) => {
-  return x.selectedIndex = Number(value) - 1;
-};
-const handleKeyDown = (value, { event, parent }) => {
-  if (event.key === " " || event.key === "Enter") {
-    handleSelection(value, { parent });
-  }
-  if (event.key === "Tab") {
-    event.target.dispatchEvent(
-      new CustomEvent("tabpressed", {
-        detail: { value, shiftKey: event.shiftKey },
-        bubbles: true,
-        composed: true
-      })
-    );
-  }
-};
-const getClasses = (_) => classNames("control");
-function getButtonAppearance(value, { parent }) {
-  return parent.selectedIndex === Number(value) - 1 ? "filled" : "ghost";
-}
-const paginationButtonRenderer = (buttonTag) => html` ${when(
-  (value) => value !== "...",
-  html`
-		<${buttonTag} class="vwc-pagination-button"
-									label="${(value) => value}"
-									appearance="${getButtonAppearance}"
-									size="${(_, { parent: x }) => getPaginationSize(x)}"
-									shape="${(_, { parent: x }) => getPaginationShape(x)}"
-									style="inline-size: ${(value) => getPaginationButtonWidth(value)};"
-									tabindex="0"
-									aria-current="${(value, { parent }) => parent.selectedIndex === Number(value) - 1}"
-									@click="${handleSelection}"
-									@keydown="${handleKeyDown}">
-		</${buttonTag}>
-	`
-)}
-${when(
-  (value) => value === "...",
-  html` <div class="dots size-${(_, { parent: x }) => getPaginationSize(x)}">
-		...
-	</div>`
-)}`;
-const getPaginationSize = (x) => {
-  if (!x.size || !ALLOWED_SIZES.includes(x.size)) {
-    return Size.SuperCondensed;
-  }
-  return x.size;
-};
-const getPaginationShape = (x) => {
-  if (!x.shape || !ALLOWED_SHAPES.includes(x.shape)) {
-    return Shape.Rounded;
-  }
-  return x.shape;
-};
-const getPaginationButtonWidth = (value) => {
-  return `calc(var(--base-size) + ${String(value).length - 1}ch)`;
-};
-const PaginationTemplate = (context) => {
-  const buttonTag = context.tagFor(Button);
-  const paginationButtonTemplate = paginationButtonRenderer(buttonTag);
+const getClasses = (x) => classNames(
+  "base",
+  ["disabled", x.disabled],
+  ["selected", Boolean(x.selected)],
+  ["hover", Boolean(x._highlighted)],
+  ["active", Boolean(x.checked)],
+  ["icon", Boolean(x.icon)]
+);
+const ListboxOptionTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const iconTag = context.tagFor(Icon);
   return html`
-	<div class="${getClasses}">
-		<${buttonTag} class="prev-button" ${ref("prevButton")}
-									label="${(x) => !x.navIcons ? "Previous" : null}"
-									icon="${(x) => x.navIcons ? "chevron-left-line" : null}"
-									size="${getPaginationSize}"
-									shape="${getPaginationShape}"
-									?disabled="${(x) => x.total === 0 || x.selectedIndex === 0}"
-									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex--}"
-		></${buttonTag}>
-		<div id="buttons-wrapper" class="buttons-wrapper" ${children({
-    property: "paginationButtons",
-    filter: elements(buttonTag)
-  })}>
-			${repeat((x) => x.pagesList, paginationButtonTemplate, { positioning: true })}
-		</div>
-		<${buttonTag} class="next-button" ${ref("nextButton")}
-									label="${(x) => !x.navIcons ? "Next" : null}"
-									icon="${(x) => x.navIcons ? "chevron-right-line" : null}"
-									size="${getPaginationSize}"
-									shape="${getPaginationShape}"
-									?disabled="${(x) => x.total === 0 || x.selectedIndex === x.total - 1}"
-									@click="${(x) => x.selectedIndex !== void 0 && x.selectedIndex++}"
-		></${buttonTag}>
-</div>`;
+		<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)}
+				${when(
+    (x) => x.text,
+    html`<div class="text">
+						${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)}
+					</div>`
+  )}
+				${when(
+    (x) => x._displayCheckmark && x.selected,
+    html`<${iconTag} class="checkmark" name="check-line"></${iconTag}>`
+  )}
+			</div>
+		</template>
+	`;
 };
 
-const paginationDefinition = defineVividComponent(
-  "pagination",
-  Pagination,
-  PaginationTemplate,
-  [buttonDefinition],
+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}.base:where(.hover,: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:where(.disabled,:disabled){--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.active,:active):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base:where(.selected):where(.hover,: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-gap: calc( calc(1px*(36 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) / 3);--_option-icon-size: calc(1px*(40 + 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-gap: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))/5) ;--_option-icon-size: calc(1px*(40 + 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{font:var(--vvd-typography-base)}.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{margin-left:auto;font-size:var(--_option-icon-size)}";
+
+const listboxOptionDefinition = defineVividComponent(
+  "option",
+  ListboxOption,
+  ListboxOptionTemplate,
+  [iconDefinition],
   {
     styles
   }
 );
-const registerPagination = createRegisterFunction(paginationDefinition);
+const registerOption = createRegisterFunction(listboxOptionDefinition);
 
-export { Pagination as P, paginationDefinition as p, registerPagination as r };
+export { listboxOptionDefinition as l, registerOption as r };