@vonage/vivid 5.0.0 → 5.2.0

package/shared/definition32.cjs

@@ -1,120 +0,0 @@
-'use strict';
-
-const definition = require('./definition28.cjs');
-const vividElement = require('./vivid-element.cjs');
-const affix = require('./affix.cjs');
-const delegatesAria = require('./delegates-aria.cjs');
-const ref = require('./ref.cjs');
-const classNames = require('./class-names.cjs');
-
-const styles = ".control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-disclosure-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-disclosure-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-disclosure-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-disclosure-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-disclosure-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-disclosure-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-disclosure-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-disclosure-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control: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}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control: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}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where(.current-closed):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.current-closed):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where(.current-closed):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.current-closed):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control{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);cursor:pointer;font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:10px;padding-inline:16px;text-decoration:none;vertical-align:middle}.control.current-closed{color:var(--_appearance-color-text)}@supports not (color: color-mix(in srgb,var(--one-color),var(--second-color))){.control.current-closed{background-color:var(--_connotation-color-primary)}}.control:not(.current-closed){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color: transparent}.control:focus-visible{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))}@supports (user-select: none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{display:flex;flex-direction:column;border-inline-start:1px solid var(--vvd-color-neutral-200);gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class NavDisclosure extends affix.AffixIcon(delegatesAria.DelegatesAria(vividElement.VividElement)) {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.current = false;
-    this.#onToggle = () => {
-      this.open = this.details.open;
-      this.$emit("toggle", void 0, { bubbles: false });
-    };
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.details.addEventListener("toggle", this.#onToggle);
-    this.details.open = this.open;
-  }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.details.removeEventListener("toggle", this.#onToggle);
-  }
-  #onToggle;
-}
-__decorateClass([
-  vividElement.attr
-], NavDisclosure.prototype, "label");
-__decorateClass([
-  vividElement.attr
-], NavDisclosure.prototype, "appearance");
-__decorateClass([
-  vividElement.attr
-], NavDisclosure.prototype, "connotation");
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], NavDisclosure.prototype, "open");
-__decorateClass([
-  vividElement.replaces({
-    deprecatedPropertyName: "ariaCurrent",
-    fromDeprecated: (v) => Boolean(v),
-    toDeprecated: (v) => v ? "true" : null
-  }),
-  vividElement.attr({ attribute: "current", mode: "boolean" })
-], NavDisclosure.prototype, "current");
-
-const getClasses = ({
-  appearance,
-  connotation,
-  current,
-  open
-}) => classNames.classNames(
-  "control",
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`connotation-${connotation}`, Boolean(connotation)],
-  ["current-closed", Boolean(current) && !open]
-);
-const NavDisclosureTemplate = (context) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(definition.Icon);
-  return vividElement.html`<details class="base" ${ref.ref("details")} ?open=${(x) => x.open}>
-		<summary class="${getClasses}"
-			aria-controls="disclosure-content"
-			${delegatesAria.delegateAria({
-    role: "button",
-    ariaExpanded: (x) => x.open,
-    ariaCurrent: (x) => x.open ? null : x.current || x.ariaCurrent ? "true" : null
-  })}
-		>
-			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)}
-			${(x) => x.label}
-			<slot name="meta"></slot>
-			<${iconTag} class="toggleIcon" name=${(x) => x.open ? "chevron-up-line" : "chevron-down-line"}
-				aria-hidden="true"></${iconTag}>
-		</summary>
-		<div class="content" id="disclosure-content">
-			<slot></slot>
-		</div>
-	</details>
-	`;
-};
-
-const navDisclosureDefinition = vividElement.defineVividComponent(
-  "nav-disclosure",
-  NavDisclosure,
-  NavDisclosureTemplate,
-  [definition.iconDefinition],
-  {
-    styles
-  }
-);
-const registerNavDisclosure = vividElement.createRegisterFunction(
-  navDisclosureDefinition
-);
-
-exports.NavDisclosure = NavDisclosure;
-exports.navDisclosureDefinition = navDisclosureDefinition;
-exports.registerNavDisclosure = registerNavDisclosure;

package/shared/definition32.js

@@ -1,116 +0,0 @@
-import { I as Icon, i as iconDefinition } from './definition28.js';
-import { V as VividElement, a as attr, r as replaces, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { b as AffixIcon, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { D as DelegatesAria, d as delegateAria } from './delegates-aria.js';
-import { r as ref } from './ref.js';
-import { c as classNames } from './class-names.js';
-
-const styles = ".control.connotation-cta{--_connotation-color-primary: var(--vvd-nav-disclosure-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-nav-disclosure-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-nav-disclosure-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-cta-fierce-primary, var(--vvd-color-cta-700));--_connotation-color-faint: var(--vvd-nav-disclosure-cta-faint, var(--vvd-color-cta-50));--_connotation-color-firm: var(--vvd-nav-disclosure-cta-firm, var(--vvd-color-cta-600));--_connotation-color-soft: var(--vvd-nav-disclosure-cta-soft, var(--vvd-color-cta-100))}.control:not(.connotation-cta){--_connotation-color-primary: var(--vvd-nav-disclosure-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-nav-disclosure-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-nav-disclosure-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-nav-disclosure-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-nav-disclosure-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-fierce-primary: var(--vvd-nav-disclosure-accent-fierce-primary, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-nav-disclosure-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-firm: var(--vvd-nav-disclosure-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-soft: var(--vvd-nav-disclosure-accent-soft, var(--vvd-color-neutral-100))}.control,.control.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.control: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}.control:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 90%);--_appearance-color-outline: transparent}.control: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}.control:where(.active,:active):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-fierce-primary);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-primary), transparent 80%);--_appearance-color-outline: transparent}.control:where(.current-closed):where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.control:where(.current-closed):where(:not(.disabled,:disabled)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-firm), transparent 10%);--_appearance-color-outline: transparent}.control:where(.current-closed):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:where(.current-closed):where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: color-mix(in srgb, var(--_connotation-color-fierce-primary), transparent 20%);--_appearance-color-outline: transparent}.control{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);cursor:pointer;font:var(--vvd-typography-base);gap:12px;hyphens:auto;inline-size:100%;min-block-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2)));padding-block:10px;padding-inline:16px;text-decoration:none;vertical-align:middle}.control.current-closed{color:var(--_appearance-color-text)}@supports not (color: color-mix(in srgb,var(--one-color),var(--second-color))){.control.current-closed{background-color:var(--_connotation-color-primary)}}.control:not(.current-closed){color:var(--vvd-color-canvas-text);--focus-stroke-gap-color: transparent}.control:focus-visible{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))}@supports (user-select: none){.control{user-select:none}}.control .toggleIcon{margin-inline-start:auto}slot[name=icon]{font-size:20px;line-height:1}.content{display:flex;flex-direction:column;border-inline-start:1px solid var(--vvd-color-neutral-200);gap:4px;margin-block:4px;margin-inline-start:20px;padding-inline-start:12px}details>summary{list-style:none}details>summary::-webkit-details-marker{display:none}";
-
-var __defProp = Object.defineProperty;
-var __decorateClass = (decorators, target, key, kind) => {
-  var result = void 0 ;
-  for (var i = decorators.length - 1, decorator; i >= 0; i--)
-    if (decorator = decorators[i])
-      result = (decorator(target, key, result) ) || result;
-  if (result) __defProp(target, key, result);
-  return result;
-};
-class NavDisclosure extends AffixIcon(DelegatesAria(VividElement)) {
-  constructor() {
-    super(...arguments);
-    this.open = false;
-    this.current = false;
-    this.#onToggle = () => {
-      this.open = this.details.open;
-      this.$emit("toggle", void 0, { bubbles: false });
-    };
-  }
-  /**
-   * @internal
-   */
-  connectedCallback() {
-    super.connectedCallback();
-    this.details.addEventListener("toggle", this.#onToggle);
-    this.details.open = this.open;
-  }
-  /**
-   * @internal
-   */
-  disconnectedCallback() {
-    super.disconnectedCallback();
-    this.details.removeEventListener("toggle", this.#onToggle);
-  }
-  #onToggle;
-}
-__decorateClass([
-  attr
-], NavDisclosure.prototype, "label");
-__decorateClass([
-  attr
-], NavDisclosure.prototype, "appearance");
-__decorateClass([
-  attr
-], NavDisclosure.prototype, "connotation");
-__decorateClass([
-  attr({ mode: "boolean" })
-], NavDisclosure.prototype, "open");
-__decorateClass([
-  replaces({
-    deprecatedPropertyName: "ariaCurrent",
-    fromDeprecated: (v) => Boolean(v),
-    toDeprecated: (v) => v ? "true" : null
-  }),
-  attr({ attribute: "current", mode: "boolean" })
-], NavDisclosure.prototype, "current");
-
-const getClasses = ({
-  appearance,
-  connotation,
-  current,
-  open
-}) => classNames(
-  "control",
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`connotation-${connotation}`, Boolean(connotation)],
-  ["current-closed", Boolean(current) && !open]
-);
-const NavDisclosureTemplate = (context) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  const iconTag = context.tagFor(Icon);
-  return html`<details class="base" ${ref("details")} ?open=${(x) => x.open}>
-		<summary class="${getClasses}"
-			aria-controls="disclosure-content"
-			${delegateAria({
-    role: "button",
-    ariaExpanded: (x) => x.open,
-    ariaCurrent: (x) => x.open ? null : x.current || x.ariaCurrent ? "true" : null
-  })}
-		>
-			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)}
-			${(x) => x.label}
-			<slot name="meta"></slot>
-			<${iconTag} class="toggleIcon" name=${(x) => x.open ? "chevron-up-line" : "chevron-down-line"}
-				aria-hidden="true"></${iconTag}>
-		</summary>
-		<div class="content" id="disclosure-content">
-			<slot></slot>
-		</div>
-	</details>
-	`;
-};
-
-const navDisclosureDefinition = defineVividComponent(
-  "nav-disclosure",
-  NavDisclosure,
-  NavDisclosureTemplate,
-  [iconDefinition],
-  {
-    styles
-  }
-);
-const registerNavDisclosure = createRegisterFunction(
-  navDisclosureDefinition
-);
-
-export { NavDisclosure as N, navDisclosureDefinition as n, registerNavDisclosure as r };

package/shared/definition37.cjs

@@ -1,71 +0,0 @@
-'use strict';
-
-const definition = require('./definition28.cjs');
-const vividElement = require('./vivid-element.cjs');
-const option = require('./option.cjs');
-const affix = require('./affix.cjs');
-const hostSemantics = require('./host-semantics.cjs');
-const classNames = require('./class-names.cjs');
-const when = require('./when.cjs');
-
-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`
-		<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 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 registerOption = vividElement.createRegisterFunction(listboxOptionDefinition);
-
-exports.listboxOptionDefinition = listboxOptionDefinition;
-exports.registerOption = registerOption;

package/shared/definition37.js

@@ -1,68 +0,0 @@
-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 { w as when } from './when.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)]
-);
-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)}
-				${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 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 registerOption = createRegisterFunction(listboxOptionDefinition);
-
-export { listboxOptionDefinition as l, registerOption as r };