@vonage/vivid 5.0.0 → 5.2.0

package/shared/children.cjs

@@ -1,61 +0,0 @@
-'use strict';
-
-const vividElement = require('./vivid-element.cjs');
-const slotted = require('./slotted.cjs');
-
-/**
- * The runtime behavior for child node observation.
- * @public
- */
-class ChildrenBehavior extends slotted.NodeObservationBehavior {
-    /**
-     * Creates an instance of ChildrenBehavior.
-     * @param target - The element target to observe children on.
-     * @param options - The options to use when observing the element children.
-     */
-    constructor(target, options) {
-        super(target, options);
-        this.observer = null;
-        options.childList = true;
-    }
-    /**
-     * Begins observation of the nodes.
-     */
-    observe() {
-        if (this.observer === null) {
-            this.observer = new MutationObserver(this.handleEvent.bind(this));
-        }
-        this.observer.observe(this.target, this.options);
-    }
-    /**
-     * Disconnects observation of the nodes.
-     */
-    disconnect() {
-        this.observer.disconnect();
-    }
-    /**
-     * Retrieves the nodes that should be assigned to the target.
-     */
-    getNodes() {
-        if ("subtree" in this.options) {
-            return Array.from(this.target.querySelectorAll(this.options.selector));
-        }
-        return Array.from(this.target.childNodes);
-    }
-}
-/**
- * A directive that observes the `childNodes` of an element and updates a property
- * whenever they change.
- * @param propertyOrOptions - The options used to configure child node observation.
- * @public
- */
-function children(propertyOrOptions) {
-    if (typeof propertyOrOptions === "string") {
-        propertyOrOptions = {
-            property: propertyOrOptions,
-        };
-    }
-    return new vividElement.AttachedBehaviorHTMLDirective("fast-children", ChildrenBehavior, propertyOrOptions);
-}
-
-exports.children = children;

package/shared/children.js

@@ -1,59 +0,0 @@
-import { A as AttachedBehaviorHTMLDirective } from './vivid-element.js';
-import { N as NodeObservationBehavior } from './slotted.js';
-
-/**
- * The runtime behavior for child node observation.
- * @public
- */
-class ChildrenBehavior extends NodeObservationBehavior {
-    /**
-     * Creates an instance of ChildrenBehavior.
-     * @param target - The element target to observe children on.
-     * @param options - The options to use when observing the element children.
-     */
-    constructor(target, options) {
-        super(target, options);
-        this.observer = null;
-        options.childList = true;
-    }
-    /**
-     * Begins observation of the nodes.
-     */
-    observe() {
-        if (this.observer === null) {
-            this.observer = new MutationObserver(this.handleEvent.bind(this));
-        }
-        this.observer.observe(this.target, this.options);
-    }
-    /**
-     * Disconnects observation of the nodes.
-     */
-    disconnect() {
-        this.observer.disconnect();
-    }
-    /**
-     * Retrieves the nodes that should be assigned to the target.
-     */
-    getNodes() {
-        if ("subtree" in this.options) {
-            return Array.from(this.target.querySelectorAll(this.options.selector));
-        }
-        return Array.from(this.target.childNodes);
-    }
-}
-/**
- * A directive that observes the `childNodes` of an element and updates a property
- * whenever they change.
- * @param propertyOrOptions - The options used to configure child node observation.
- * @public
- */
-function children(propertyOrOptions) {
-    if (typeof propertyOrOptions === "string") {
-        propertyOrOptions = {
-            property: propertyOrOptions,
-        };
-    }
-    return new AttachedBehaviorHTMLDirective("fast-children", ChildrenBehavior, propertyOrOptions);
-}
-
-export { children as c };

package/shared/class-names.cjs

@@ -1,17 +0,0 @@
-'use strict';
-
-function classNames(...args) {
-    return args.reduce((accum, value) => {
-        const leadingChar = accum.length ? " " : "";
-        const normalizedValue = Array.isArray(value) && value[1]
-            ? classNames.call(null, value[0])
-            : typeof value === "function"
-                ? value()
-                : typeof value === "string"
-                    ? value
-                    : "";
-        return !normalizedValue.length ? accum : accum + leadingChar + normalizedValue;
-    }, "");
-}
-
-exports.classNames = classNames;

package/shared/class-names.js

@@ -1,15 +0,0 @@
-function classNames(...args) {
-    return args.reduce((accum, value) => {
-        const leadingChar = accum.length ? " " : "";
-        const normalizedValue = Array.isArray(value) && value[1]
-            ? classNames.call(null, value[0])
-            : typeof value === "function"
-                ? value()
-                : typeof value === "string"
-                    ? value
-                    : "";
-        return !normalizedValue.length ? accum : accum + leadingChar + normalizedValue;
-    }, "");
-}
-
-export { classNames as c };

package/shared/definition.cjs

@@ -1,145 +0,0 @@
-'use strict';
-
-const vividElement = require('./vivid-element.cjs');
-const definition = require('./definition28.cjs');
-const affix = require('./affix.cjs');
-const ref = require('./ref.cjs');
-const classNames = require('./class-names.cjs');
-const slotted = require('./slotted.cjs');
-const when = require('./when.cjs');
-
-const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.heading-button: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}.heading-button: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}.heading-button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.heading-button: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}.heading-button: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}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-accordion-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-accordion-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-accordion-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
-
-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 AccordionItem extends affix.AffixIconWithTrailing(vividElement.VividElement) {
-  constructor() {
-    super(...arguments);
-    this.headinglevel = 2;
-    this.expanded = false;
-    this.noIndicator = false;
-    /**
-     * @internal
-     */
-    this.clickHandler = () => {
-      this.expanded = !this.expanded;
-      this.change();
-    };
-    this.change = () => {
-      this.$emit("change");
-    };
-  }
-}
-__decorateClass([
-  vividElement.attr({
-    attribute: "heading-level",
-    mode: "fromView",
-    converter: vividElement.nullableNumberConverter
-  })
-], AccordionItem.prototype, "headinglevel");
-__decorateClass([
-  vividElement.attr
-], AccordionItem.prototype, "appearance");
-__decorateClass([
-  vividElement.attr({ mode: "boolean" })
-], AccordionItem.prototype, "expanded");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  vividElement.attr
-], AccordionItem.prototype, "id");
-__decorateClass([
-  vividElement.attr
-], AccordionItem.prototype, "heading");
-__decorateClass([
-  vividElement.observable
-], AccordionItem.prototype, "_headingSlottedContent");
-__decorateClass([
-  vividElement.attr({ mode: "boolean", attribute: "no-indicator" })
-], AccordionItem.prototype, "noIndicator");
-__decorateClass([
-  vividElement.attr
-], AccordionItem.prototype, "meta");
-__decorateClass([
-  vividElement.observable
-], AccordionItem.prototype, "_metaSlottedContent");
-__decorateClass([
-  vividElement.attr
-], AccordionItem.prototype, "size");
-
-const getClasses = ({ appearance, size }) => classNames.classNames(
-  "heading-button",
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`size-${size}`, Boolean(size)]
-);
-const header = (context, hTag) => {
-  const affixIconTemplate = affix.affixIconTemplateFactory(context);
-  return vividElement.html`
-		<${hTag} class="heading-container">
-			<button
-				class="${getClasses}"
-				id="${(x) => x.id}"
-				aria-expanded="${(x) => x.expanded}"
-				aria-controls="${(x) => x.id}-panel"
-				@click="${(x) => x.clickHandler()}"
-				${ref.ref("expandbutton")}
-			>
-
-				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, affix.IconWrapper.Slot) : null}
-
-				<span class="heading-content">
-					<slot name="heading" ${slotted.slotted("_headingSlottedContent")}></slot>
-					${when.when(
-    (x) => x.heading && !x._headingSlottedContent?.length,
-    vividElement.html`${(x) => x.heading}`
-  )}
-				</span>
-
-				<span class="meta">
-					<slot name="meta" ${slotted.slotted("_metaSlottedContent")}></slot>
-					${when.when((x) => x.meta && !x._metaSlottedContent?.length, vividElement.html`${(x) => x.meta}`)}
-				</span>
-
-				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
-				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(
-    x.expanded ? "chevron-up-line" : "chevron-down-line"
-  ) : null}
-
-			</button>
-		</${hTag}>
-	`;
-};
-const AccordionItemTemplate = (context) => vividElement.html`
-	${(x) => header(context, "h" + x.headinglevel)}
-	<div
-		id="${(x) => x.id}-panel"
-		aria-labelledby="${(x) => x.id}"
-		role="region"
-		class="region ${(x) => x.icon && !x.iconTrailing ? "padded" : ""} ${(x) => x.size ? `size-${x.size}` : ""}"
-	>
-		<slot></slot>
-	</div>
-`;
-
-const accordionItemDefinition = vividElement.defineVividComponent(
-  "accordion-item",
-  AccordionItem,
-  AccordionItemTemplate,
-  [definition.iconDefinition],
-  {
-    styles
-  }
-);
-const registerAccordionItem = vividElement.createRegisterFunction(
-  accordionItemDefinition
-);
-
-exports.AccordionItem = AccordionItem;
-exports.accordionItemDefinition = accordionItemDefinition;
-exports.registerAccordionItem = registerAccordionItem;

package/shared/definition.js

@@ -1,141 +0,0 @@
-import { V as VividElement, a as attr, n as nullableNumberConverter, o as observable, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
-import { i as iconDefinition } from './definition28.js';
-import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { r as ref } from './ref.js';
-import { c as classNames } from './class-names.js';
-import { s as slotted } from './slotted.js';
-import { w as when } from './when.js';
-
-const styles = ":host{--_vvd-accordion-item-accent-firm-wrapper: var( --vvd-accordion-item-accent-firm )}.heading-button{--vvd-accordion-item-accent-firm: var( --_vvd-accordion-item-accent-firm-wrapper, var(--vvd-accordion-item-accent-primary) )}:host{display:flex;box-sizing:border-box;flex-direction:column}.heading-container{margin:0}.heading-button,.heading-button.appearance-ghost-light{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.heading-button.appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.heading-button: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}.heading-button: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}.heading-button:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.heading-button: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}.heading-button: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}.heading-button:where(.active,:active):where(:not(.disabled,:disabled)).appearance-filled{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.heading-button{--_connotation-color-primary: var(--vvd-accordion-item-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-accordion-item-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-accordion-item-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-accordion-item-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-faint: var(--vvd-accordion-item-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-soft: var(--vvd-accordion-item-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-firm: var(--vvd-accordion-item-accent-firm, var(--vvd-color-canvas-text))}.heading-button{--focus-stroke-gap-color: transparent;display:flex;width:100%;align-items:center;padding:16px;border:none;background-color:var(--_appearance-color-fill);color:var(--_appearance-color-text);cursor:pointer;text-align:left}.heading-button: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))}.heading-button.size-condensed{font:var(--vvd-typography-base-extended-bold);gap:12px}.heading-button:not(.size-condensed){font:var(--vvd-typography-heading-4);gap:16px}.heading-content{flex:auto}.meta{overflow:hidden;max-width:var(--accordion-item-meta-inline-size, 20%);flex-shrink:0;color:var(--vvd-color-neutral-600);text-align:end;text-overflow:ellipsis;white-space:nowrap}.heading-button:not(.size-condensed) .meta{font:var(--vvd-typography-base-bold)}.heading-button.size-condensed .meta{font:var(--vvd-typography-base-condensed-bold)}.region{display:none;padding:8px 32px 24px 16px}.region:not(.size-condensed).padded{padding-inline-start:52px}:host([expanded]) .region{display:block}.region.size-condensed.padded{padding-inline-start:44px}slot[name=icon]{color:var(--vvd-color-neutral-600)}.heading-button:not(.size-condensed) slot[name=icon]{font:inherit}.heading-button.size-condensed slot[name=icon]{font:var(--vvd-typography-base-extended)}:host(:not([icon-trailing])) slot[name=icon]:last-of-type{color:var(--_appearance-color-text)}";
-
-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 AccordionItem extends AffixIconWithTrailing(VividElement) {
-  constructor() {
-    super(...arguments);
-    this.headinglevel = 2;
-    this.expanded = false;
-    this.noIndicator = false;
-    /**
-     * @internal
-     */
-    this.clickHandler = () => {
-      this.expanded = !this.expanded;
-      this.change();
-    };
-    this.change = () => {
-      this.$emit("change");
-    };
-  }
-}
-__decorateClass([
-  attr({
-    attribute: "heading-level",
-    mode: "fromView",
-    converter: nullableNumberConverter
-  })
-], AccordionItem.prototype, "headinglevel");
-__decorateClass([
-  attr
-], AccordionItem.prototype, "appearance");
-__decorateClass([
-  attr({ mode: "boolean" })
-], AccordionItem.prototype, "expanded");
-// @ts-expect-error Type is incorrectly non-optional
-__decorateClass([
-  attr
-], AccordionItem.prototype, "id");
-__decorateClass([
-  attr
-], AccordionItem.prototype, "heading");
-__decorateClass([
-  observable
-], AccordionItem.prototype, "_headingSlottedContent");
-__decorateClass([
-  attr({ mode: "boolean", attribute: "no-indicator" })
-], AccordionItem.prototype, "noIndicator");
-__decorateClass([
-  attr
-], AccordionItem.prototype, "meta");
-__decorateClass([
-  observable
-], AccordionItem.prototype, "_metaSlottedContent");
-__decorateClass([
-  attr
-], AccordionItem.prototype, "size");
-
-const getClasses = ({ appearance, size }) => classNames(
-  "heading-button",
-  [`appearance-${appearance}`, Boolean(appearance)],
-  [`size-${size}`, Boolean(size)]
-);
-const header = (context, hTag) => {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html`
-		<${hTag} class="heading-container">
-			<button
-				class="${getClasses}"
-				id="${(x) => x.id}"
-				aria-expanded="${(x) => x.expanded}"
-				aria-controls="${(x) => x.id}-panel"
-				@click="${(x) => x.clickHandler()}"
-				${ref("expandbutton")}
-			>
-
-				${(x) => !x.iconTrailing ? affixIconTemplate(x.icon, IconWrapper.Slot) : null}
-
-				<span class="heading-content">
-					<slot name="heading" ${slotted("_headingSlottedContent")}></slot>
-					${when(
-    (x) => x.heading && !x._headingSlottedContent?.length,
-    html`${(x) => x.heading}`
-  )}
-				</span>
-
-				<span class="meta">
-					<slot name="meta" ${slotted("_metaSlottedContent")}></slot>
-					${when((x) => x.meta && !x._metaSlottedContent?.length, html`${(x) => x.meta}`)}
-				</span>
-
-				${(x) => x.icon && x.iconTrailing ? affixIconTemplate(x.icon) : null}
-				${(x) => !(x.icon && x.iconTrailing) && !x.noIndicator ? affixIconTemplate(
-    x.expanded ? "chevron-up-line" : "chevron-down-line"
-  ) : null}
-
-			</button>
-		</${hTag}>
-	`;
-};
-const AccordionItemTemplate = (context) => html`
-	${(x) => header(context, "h" + x.headinglevel)}
-	<div
-		id="${(x) => x.id}-panel"
-		aria-labelledby="${(x) => x.id}"
-		role="region"
-		class="region ${(x) => x.icon && !x.iconTrailing ? "padded" : ""} ${(x) => x.size ? `size-${x.size}` : ""}"
-	>
-		<slot></slot>
-	</div>
-`;
-
-const accordionItemDefinition = defineVividComponent(
-  "accordion-item",
-  AccordionItem,
-  AccordionItemTemplate,
-  [iconDefinition],
-  {
-    styles
-  }
-);
-const registerAccordionItem = createRegisterFunction(
-  accordionItemDefinition
-);
-
-export { AccordionItem as A, accordionItemDefinition as a, registerAccordionItem as r };