@vonage/vivid 5.18.0 → 5.20.0

package/unbundled/definition4.cjs

@@ -1,189 +1,70 @@
 require("./chunk.cjs");
 const require_vivid_element = require("./vivid-element.cjs");
 const require_decorate = require("./decorate.cjs");
-const require_definition = require("./definition3.cjs");
+const require_delegates_aria = require("./delegates-aria.cjs");
 let _microsoft_fast_element = require("@microsoft/fast-element");
 let _microsoft_fast_web_utilities = require("@microsoft/fast-web-utilities");
-//#region src/lib/accordion/accordion.scss?inline
-var accordion_default = ".base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
+//#region src/lib/action-group/action-group.scss?inline
+var action_group_default = ":host{display:inline-block}.base{--_connotation-color-primary:var(--vvd-action-group-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-intermediate:var(--vvd-action-group-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-action-group-accent-faint,var(--vvd-color-neutral-50));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle;align-items:center;display:flex;position:relative}.base:before{z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;position:absolute;inset:0}.base:not(.tight){column-gap:4px;padding:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}";
 //#endregion
-//#region src/lib/accordion/accordion.ts
+//#region src/lib/action-group/action-group.ts
 /**
-* Expand mode for {@link Accordion}
 * @public
-*/
-var AccordionExpandMode$1 = {
-	single: "single",
-	multi: "multi"
-};
-/**
-* @public
-* @component accordion
-* @event {CustomEvent<string | null>} change - Fires a custom 'change' event when the active item changes
+* @component action-group
 * @slot - Default slot.
 */
-var Accordion = class extends require_vivid_element.VividElement {
+var ActionGroup = class extends require_delegates_aria.DelegatesAria(require_vivid_element.VividElement) {
 	constructor(..._args) {
 		super(..._args);
-		this.expandmode = AccordionExpandMode$1.single;
-		this.activeItemIndex = 0;
-		this.change = () => {
-			this.$emit("change", this.activeid);
-		};
-		this.setItems = () => {
-			if (this.accordionItems.length === 0) return;
-			this.accordionIds = this.getItemIds();
-			this.activeid = this.accordionIds[this.activeItemIndex];
-			this.accordionItems.forEach((item, index) => {
-				/* v8 ignore else -- @preserve */
-				if (item instanceof require_definition.AccordionItem) {
-					item.addEventListener("change", this.activeItemChange);
-					/* v8 ignore else -- @preserve */
-					if (this.isSingleExpandMode()) if (this.findExpandedItem() === null && index === 0) item.expanded = true;
-					else item !== this.findExpandedItem() ? item.expanded = false : item.expanded = true;
-				}
-				const itemId = this.accordionIds[index];
-				item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
-				item.addEventListener("keydown", this.handleItemKeyDown);
-			});
-			/* v8 ignore else -- @preserve */
-			if (this.isSingleExpandMode()) (this.findExpandedItem() ?? this.accordionItems[0]).setAttribute("aria-disabled", "true");
-		};
-		this.removeItemListeners = (oldValue) => {
-			oldValue.forEach((item) => {
-				item.removeEventListener("change", this.activeItemChange);
-				item.removeEventListener("keydown", this.handleItemKeyDown);
-			});
-		};
-		this.activeItemChange = (event) => {
-			if (event.defaultPrevented || event.target !== event.currentTarget) return;
-			event.preventDefault();
-			const selectedItem = event.target;
-			this.activeid = selectedItem.getAttribute("id");
-			if (this.isSingleExpandMode()) {
-				this.resetItems();
-				selectedItem.expanded = true;
-				selectedItem.setAttribute("aria-disabled", "true");
-				this.accordionItems.forEach((item) => {
-					if (!item.hasAttribute("disabled") && item.id !== this.activeid) item.removeAttribute("aria-disabled");
-				});
-			}
-			this.activeItemIndex = Array.from(this.accordionItems).indexOf(selectedItem);
-			this.change();
-		};
-		this.handleItemKeyDown = (event) => {
-			if (event.target !== event.currentTarget) return;
-			this.accordionIds = this.getItemIds();
-			switch (event.key) {
-				case _microsoft_fast_web_utilities.keyArrowUp:
-					event.preventDefault();
-					this.adjust(event.target, -1);
-					break;
-				case _microsoft_fast_web_utilities.keyArrowDown:
-					event.preventDefault();
-					this.adjust(event.target, 1);
-					break;
-				case _microsoft_fast_web_utilities.keyHome:
-					this.focusItem(0);
-					break;
-				case _microsoft_fast_web_utilities.keyEnd:
-					this.focusItem(this.accordionItems.length - 1);
-					break;
-			}
-		};
-	}
-	/**
-	* @internal
-	*/
-	accordionItemsChanged(oldValue) {
-		if (this.$fastController.isConnected) {
-			this.removeItemListeners(oldValue);
-			this.setItems();
-		}
-	}
-	findExpandedItem() {
-		for (let item = 0; item < this.accordionItems.length; item++) if (this.accordionItems[item].hasAttribute("expanded") === true) return this.accordionItems[item];
-		return null;
-	}
-	resetItems() {
-		this.accordionItems.forEach((item) => {
-			item.expanded = false;
-		});
-	}
-	getItemIds() {
-		return this.accordionItems.map((accordionItem) => {
-			return accordionItem.getAttribute("id");
-		});
-	}
-	isSingleExpandMode() {
-		return this.expandmode !== AccordionExpandMode$1.multi;
-	}
-	adjust(item, adjustment) {
-		this.focusItem((0, _microsoft_fast_web_utilities.wrapInBounds)(0, this.accordionItems.length - 1, this.accordionItems.indexOf(item) + adjustment));
-	}
-	focusItem(index) {
-		const element = this.accordionItems[index];
-		/* v8 ignore else -- @preserve */
-		if (element instanceof require_definition.AccordionItem) element.expandbutton.focus();
-	}
-	closeAll() {
-		/* v8 ignore else -- @preserve */
-		if (this.expandmode === AccordionExpandMode$1.multi) this.accordionItems.forEach((item) => {
-			item.expanded = false;
-		});
+		this.tight = false;
 	}
 };
-require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ attribute: "expand-mode" })], Accordion.prototype, "expandmode", void 0);
-require_decorate.__decorate([_microsoft_fast_element.observable], Accordion.prototype, "accordionItems", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], ActionGroup.prototype, "shape", void 0);
+require_decorate.__decorate([_microsoft_fast_element.attr], ActionGroup.prototype, "appearance", void 0);
+require_decorate.__decorate([(0, _microsoft_fast_element.attr)({ mode: "boolean" })], ActionGroup.prototype, "tight", void 0);
 //#endregion
-//#region src/lib/accordion/accordion.template.ts
-var getClasses = (_) => (0, _microsoft_fast_web_utilities.classNames)("base");
-var AccordionTemplate = _microsoft_fast_element.html`
-	<div class="${getClasses}">
-		<slot ${(0, _microsoft_fast_element.slotted)({
-	property: "accordionItems",
-	filter: (0, _microsoft_fast_element.elements)()
-})}></slot>
-	</div>
-`;
+//#region src/lib/action-group/action-group.template.ts
+var getClasses = ({ appearance, shape, tight }) => (0, _microsoft_fast_web_utilities.classNames)("base", [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ["tight", tight]);
+/**
+* The template for the action-group component.
+*
+* @param context - element definition context
+* @public
+*/
+var ActionGroupTemplate = _microsoft_fast_element.html`<div
+	class="${getClasses}"
+	${require_delegates_aria.delegateAria({ role: (x) => x.role ? x.role : "group" })}
+>
+	<slot></slot>
+</div>`;
 //#endregion
-//#region src/lib/accordion/definition.ts
-var AccordionExpandMode = {
-	single: "single",
-	multi: "multi"
-};
+//#region src/lib/action-group/definition.ts
 /**
 * @internal
 */
-var accordionDefinition = require_vivid_element.defineVividComponent("accordion", Accordion, AccordionTemplate, [require_definition.accordionItemDefinition], { styles: accordion_default });
+var actionGroupDefinition = require_vivid_element.defineVividComponent("action-group", ActionGroup, ActionGroupTemplate, [], { styles: action_group_default });
 /**
-* Registers the accordion elements with the design system.
+* Registers the action-group elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerAccordion = require_vivid_element.createRegisterFunction(accordionDefinition);
+var registerActionGroup = require_vivid_element.createRegisterFunction(actionGroupDefinition);
 //#endregion
-Object.defineProperty(exports, "Accordion", {
-	enumerable: true,
-	get: function() {
-		return Accordion;
-	}
-});
-Object.defineProperty(exports, "AccordionExpandMode", {
+Object.defineProperty(exports, "ActionGroup", {
 	enumerable: true,
 	get: function() {
-		return AccordionExpandMode;
+		return ActionGroup;
 	}
 });
-Object.defineProperty(exports, "accordionDefinition", {
+Object.defineProperty(exports, "actionGroupDefinition", {
 	enumerable: true,
 	get: function() {
-		return accordionDefinition;
+		return actionGroupDefinition;
 	}
 });
-Object.defineProperty(exports, "registerAccordion", {
+Object.defineProperty(exports, "registerActionGroup", {
 	enumerable: true,
 	get: function() {
-		return registerAccordion;
+		return registerActionGroup;
 	}
 });

package/unbundled/definition4.js

@@ -1,165 +1,45 @@
-import { o as defineVividComponent, s as createRegisterFunction, t as VividElement } from "./vivid-element.js";
+import { d as createRegisterFunction, t as VividElement, u as defineVividComponent } from "./vivid-element.js";
 import { t as __decorate } from "./decorate.js";
-import { r as AccordionItem, t as accordionItemDefinition } from "./definition3.js";
-import { attr, elements, html, observable, slotted } from "@microsoft/fast-element";
-import { classNames, keyArrowDown, keyArrowUp, keyEnd, keyHome, wrapInBounds } from "@microsoft/fast-web-utilities";
-//#region src/lib/accordion/accordion.scss?inline
-var accordion_default = ".base{box-sizing:border-box;flex-direction:column;display:flex}::slotted(:not(:only-of-type)){border-bottom:1px solid var(--vvd-color-neutral-200)}";
+import { n as delegateAria, t as DelegatesAria } from "./delegates-aria.js";
+import { attr, html } from "@microsoft/fast-element";
+import { classNames } from "@microsoft/fast-web-utilities";
+//#region src/lib/action-group/action-group.scss?inline
+var action_group_default = ":host{display:inline-block}.base{--_connotation-color-primary:var(--vvd-action-group-accent-primary,var(--vvd-color-canvas-text));--_connotation-color-intermediate:var(--vvd-action-group-accent-intermediate,var(--vvd-color-neutral-500));--_connotation-color-faint:var(--vvd-action-group-accent-faint,var(--vvd-color-neutral-50));--_appearance-color-text:var(--vvd-color-canvas-text);--_appearance-color-fill:var(--vvd-color-canvas);--_appearance-color-outline:var(--vvd-color-neutral-500)}.base.appearance-ghost{--_appearance-color-text:var(--_connotation-color-firm);--_appearance-color-fill:transparent;--_appearance-color-outline:transparent}.base{box-sizing:border-box;background-color:var(--_appearance-color-fill);inline-size:inherit;vertical-align:middle;align-items:center;display:flex;position:relative}.base:before{z-index:1;border-radius:inherit;box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);content:\"\";pointer-events:none;position:absolute;inset:0}.base:not(.tight){column-gap:4px;padding:4px}.base:not(.shape-pill){border-radius:8px}.base.shape-pill{border-radius:24px}::slotted([data-vvd-component=divider]){align-self:stretch;margin-block:4px}";
 //#endregion
-//#region src/lib/accordion/accordion.ts
+//#region src/lib/action-group/action-group.ts
 /**
-* Expand mode for {@link Accordion}
 * @public
-*/
-var AccordionExpandMode$1 = {
-	single: "single",
-	multi: "multi"
-};
-/**
-* @public
-* @component accordion
-* @event {CustomEvent<string | null>} change - Fires a custom 'change' event when the active item changes
+* @component action-group
 * @slot - Default slot.
 */
-var Accordion = class extends VividElement {
+var ActionGroup = class extends DelegatesAria(VividElement) {
 	constructor(..._args) {
 		super(..._args);
-		this.expandmode = AccordionExpandMode$1.single;
-		this.activeItemIndex = 0;
-		this.change = () => {
-			this.$emit("change", this.activeid);
-		};
-		this.setItems = () => {
-			if (this.accordionItems.length === 0) return;
-			this.accordionIds = this.getItemIds();
-			this.activeid = this.accordionIds[this.activeItemIndex];
-			this.accordionItems.forEach((item, index) => {
-				/* v8 ignore else -- @preserve */
-				if (item instanceof AccordionItem) {
-					item.addEventListener("change", this.activeItemChange);
-					/* v8 ignore else -- @preserve */
-					if (this.isSingleExpandMode()) if (this.findExpandedItem() === null && index === 0) item.expanded = true;
-					else item !== this.findExpandedItem() ? item.expanded = false : item.expanded = true;
-				}
-				const itemId = this.accordionIds[index];
-				item.setAttribute("id", typeof itemId !== "string" ? `accordion-${index + 1}` : itemId);
-				item.addEventListener("keydown", this.handleItemKeyDown);
-			});
-			/* v8 ignore else -- @preserve */
-			if (this.isSingleExpandMode()) (this.findExpandedItem() ?? this.accordionItems[0]).setAttribute("aria-disabled", "true");
-		};
-		this.removeItemListeners = (oldValue) => {
-			oldValue.forEach((item) => {
-				item.removeEventListener("change", this.activeItemChange);
-				item.removeEventListener("keydown", this.handleItemKeyDown);
-			});
-		};
-		this.activeItemChange = (event) => {
-			if (event.defaultPrevented || event.target !== event.currentTarget) return;
-			event.preventDefault();
-			const selectedItem = event.target;
-			this.activeid = selectedItem.getAttribute("id");
-			if (this.isSingleExpandMode()) {
-				this.resetItems();
-				selectedItem.expanded = true;
-				selectedItem.setAttribute("aria-disabled", "true");
-				this.accordionItems.forEach((item) => {
-					if (!item.hasAttribute("disabled") && item.id !== this.activeid) item.removeAttribute("aria-disabled");
-				});
-			}
-			this.activeItemIndex = Array.from(this.accordionItems).indexOf(selectedItem);
-			this.change();
-		};
-		this.handleItemKeyDown = (event) => {
-			if (event.target !== event.currentTarget) return;
-			this.accordionIds = this.getItemIds();
-			switch (event.key) {
-				case keyArrowUp:
-					event.preventDefault();
-					this.adjust(event.target, -1);
-					break;
-				case keyArrowDown:
-					event.preventDefault();
-					this.adjust(event.target, 1);
-					break;
-				case keyHome:
-					this.focusItem(0);
-					break;
-				case keyEnd:
-					this.focusItem(this.accordionItems.length - 1);
-					break;
-			}
-		};
-	}
-	/**
-	* @internal
-	*/
-	accordionItemsChanged(oldValue) {
-		if (this.$fastController.isConnected) {
-			this.removeItemListeners(oldValue);
-			this.setItems();
-		}
-	}
-	findExpandedItem() {
-		for (let item = 0; item < this.accordionItems.length; item++) if (this.accordionItems[item].hasAttribute("expanded") === true) return this.accordionItems[item];
-		return null;
-	}
-	resetItems() {
-		this.accordionItems.forEach((item) => {
-			item.expanded = false;
-		});
-	}
-	getItemIds() {
-		return this.accordionItems.map((accordionItem) => {
-			return accordionItem.getAttribute("id");
-		});
-	}
-	isSingleExpandMode() {
-		return this.expandmode !== AccordionExpandMode$1.multi;
-	}
-	adjust(item, adjustment) {
-		this.focusItem(wrapInBounds(0, this.accordionItems.length - 1, this.accordionItems.indexOf(item) + adjustment));
-	}
-	focusItem(index) {
-		const element = this.accordionItems[index];
-		/* v8 ignore else -- @preserve */
-		if (element instanceof AccordionItem) element.expandbutton.focus();
-	}
-	closeAll() {
-		/* v8 ignore else -- @preserve */
-		if (this.expandmode === AccordionExpandMode$1.multi) this.accordionItems.forEach((item) => {
-			item.expanded = false;
-		});
+		this.tight = false;
 	}
 };
-__decorate([attr({ attribute: "expand-mode" })], Accordion.prototype, "expandmode", void 0);
-__decorate([observable], Accordion.prototype, "accordionItems", void 0);
+__decorate([attr], ActionGroup.prototype, "shape", void 0);
+__decorate([attr], ActionGroup.prototype, "appearance", void 0);
+__decorate([attr({ mode: "boolean" })], ActionGroup.prototype, "tight", void 0);
 //#endregion
-//#region src/lib/accordion/accordion.template.ts
-var getClasses = (_) => classNames("base");
-var AccordionTemplate = html`
-	<div class="${getClasses}">
-		<slot ${slotted({
-	property: "accordionItems",
-	filter: elements()
-})}></slot>
-	</div>
-`;
+//#region src/lib/action-group/action-group.template.ts
+var getClasses = ({ appearance, shape, tight }) => classNames("base", [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ["tight", tight]);
 //#endregion
-//#region src/lib/accordion/definition.ts
-var AccordionExpandMode = {
-	single: "single",
-	multi: "multi"
-};
+//#region src/lib/action-group/definition.ts
 /**
 * @internal
 */
-var accordionDefinition = defineVividComponent("accordion", Accordion, AccordionTemplate, [accordionItemDefinition], { styles: accordion_default });
+var actionGroupDefinition = defineVividComponent("action-group", ActionGroup, html`<div
+	class="${getClasses}"
+	${delegateAria({ role: (x) => x.role ? x.role : "group" })}
+>
+	<slot></slot>
+</div>`, [], { styles: action_group_default });
 /**
-* Registers the accordion elements with the design system.
+* Registers the action-group elements with the design system.
 *
 * @param prefix - the prefix to use for the component name
 */
-var registerAccordion = createRegisterFunction(accordionDefinition);
+var registerActionGroup = createRegisterFunction(actionGroupDefinition);
 //#endregion
-export { Accordion as i, accordionDefinition as n, registerAccordion as r, AccordionExpandMode as t };
+export { registerActionGroup as n, ActionGroup as r, actionGroupDefinition as t };