@vonage/vivid 4.13.0 → 4.14.1

package/shared/definition50.cjs

@@ -1,27 +1,123 @@
 'use strict';
 
-const index = require('./index.cjs');
+const definition = require('./definition27.cjs');
+const vividElement = require('./vivid-element.cjs');
+const applyMixins = require('./apply-mixins.cjs');
+const affix = require('./affix.cjs');
+const localized = require('./localized.cjs');
+const classNames = require('./class-names.cjs');
 
-class TabPanel extends index.FoundationElement {
+const styles = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.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.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}.close{position:absolute;display:flex;align-items:center;justify-content:center;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";
+
+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 Tab extends vividElement.VividElement {
+  constructor() {
+    super(...arguments);
+    this.removable = false;
+    this.tabIndex = "-1";
+    this.ariaSelected = null;
+  }
+  _handleCloseClick(e) {
+    e.stopImmediatePropagation();
+    this.$emit("close");
+  }
+  _onKeyDown(e) {
+    if (!this.removable || e.key !== "Delete") return true;
+    e.stopImmediatePropagation();
+    this.$emit("close");
+    return false;
+  }
 }
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], Tab.prototype, "disabled");
+__decorateClass([
+  vividElement.attr
+], Tab.prototype, "connotation");
+__decorateClass([
+  vividElement.attr
+], Tab.prototype, "shape");
+__decorateClass([
+  vividElement.attr
+], Tab.prototype, "label");
+__decorateClass([
+  vividElement.attr({ mode: "boolean" })
+], Tab.prototype, "removable");
+__decorateClass([
+  vividElement.attr({ mode: "fromView" })
+], Tab.prototype, "tabIndex");
+__decorateClass([
+  vividElement.attr({ attribute: "aria-selected" })
+], Tab.prototype, "ariaSelected");
+applyMixins.applyMixins(Tab, affix.AffixIconWithTrailing);
+applyMixins.applyMixins(Tab, localized.Localized);
 
-function TabPanelTemplate() {
-  return index.html`
-		<template slot="tabpanel" role="tabpanel">
-			<slot></slot>
+const getClasses = ({
+  connotation,
+  disabled,
+  ariaSelected,
+  iconTrailing,
+  shape,
+  removable
+}) => classNames.classNames(
+  "base",
+  [
+    `connotation-${connotation}`,
+    Boolean(connotation) && ariaSelected === "true"
+  ],
+  [`shape-${shape}`, Boolean(shape)],
+  ["disabled", Boolean(disabled)],
+  ["selected", ariaSelected === "true"],
+  ["icon-trailing", iconTrailing],
+  ["removable", removable]
+);
+function renderDismissButton(context) {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  return vividElement.html` <span
+		aria-label="${(x) => x.locale.tab.dismissButtonLabel}"
+		class="close"
+		id="close-btn"
+		@click="${(x, c) => x._handleCloseClick(c.event)}"
+	>
+		${() => affixIconTemplate("close-line", affix.IconWrapper.Span)}
+	</span>`;
+}
+const TabTemplate = (context) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  return vividElement.html`
+		<template
+			slot="tab"
+			role="tab"
+			aria-disabled="${(x) => x.disabled}"
+			aria-selected="${(x) => x.ariaSelected}"
+			@keydown="${(x, c) => x._onKeyDown(c.event)}"
+		>
+			<div class="${getClasses}">
+				${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.label}
+				${(x) => x.removable ? renderDismissButton(context) : null}
+			</div>
 		</template>
 	`;
-}
+};
 
-const tabPanelDefinition = TabPanel.compose(
+const tabDefinition = vividElement.defineVividComponent(
+  "tab",
+  Tab,
+  TabTemplate,
+  [definition.iconDefinition],
   {
-    baseName: "tab-panel",
-    template: TabPanelTemplate
+    styles
   }
 );
-const tabPanelRegistries = [tabPanelDefinition()];
-const registerTabPanel = index.registerFactory(tabPanelRegistries);
+const registerTab = vividElement.createRegisterFunction(tabDefinition);
 
-exports.registerTabPanel = registerTabPanel;
-exports.tabPanelDefinition = tabPanelDefinition;
-exports.tabPanelRegistries = tabPanelRegistries;
+exports.registerTab = registerTab;
+exports.tabDefinition = tabDefinition;

package/shared/definition50.js

@@ -1,23 +1,120 @@
-import { F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { i as iconDefinition } from './definition27.js';
+import { V as VividElement, a as attr, h as html, d as defineVividComponent, f as createRegisterFunction } from './vivid-element.js';
+import { a as applyMixins } from './apply-mixins.js';
+import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
+import { L as Localized } from './localized.js';
+import { c as classNames } from './class-names.js';
 
-class TabPanel extends FoundationElement {
+const styles = ":host{--_vvd-tab-accent-firm-wrapper: var( --vvd-tab-accent-firm );--_vvd-tab-cta-firm-wrapper: var( --vvd-tab-cta-firm )}.base{--vvd-tab-accent-firm: var( --_vvd-tab-accent-firm-wrapper, var(--vvd-tab-accent-primary) );--vvd-tab-cta-firm: var( --_vvd-tab-cta-firm-wrapper, var(--vvd-tab-cta-primary) )}:host(.vertical){justify-content:end;grid-column:1/auto}:host([disabled]){cursor:not-allowed}:host([removable]){position:relative}:host(:focus-visible){outline:none}.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.connotation-cta{--_connotation-color-primary-text: var(--vvd-tab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-cta-firm, var(--vvd-color-cta-600));--_connotation-color-faint: var(--vvd-tab-cta-faint, var(--vvd-color-cta-50));--_connotation-color-fierce: var(--vvd-tab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-tab-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-tab-cta-soft, var(--vvd-color-cta-100))}.base:not(.connotation-cta){--_connotation-color-primary-text: var(--vvd-tab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-tab-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-faint: var(--vvd-tab-accent-faint, var(--vvd-color-neutral-50));--_connotation-color-fierce: var(--vvd-tab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-tab-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-tab-accent-soft, var(--vvd-color-neutral-100))}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;justify-content:var(--_tab-justify-content);padding:var(--_tabs-tablist-gutter);background-color:var(--_appearance-color-fill);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);font:var(--vvd-typography-base-bold);gap:var(--_tabs-tablist-gutter);min-block-size:40px;vertical-align:middle;white-space:nowrap}@supports (user-select: none){.base{user-select:none}}.base:not(.shape-sharp){border-radius:8px}.base:not(.disabled){cursor:pointer}.base.disabled{pointer-events:none}.base.removable{padding-inline-end:40px}:host(:focus-visible) .base{--focus-stroke-gap-color: transparent;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:calc(-2px - var(--focus-inset, 0px))}:host(.vertical) .base{margin-inline-start:var(--_tabs-active-indicator-stroke-width)}slot[name=icon]{font-size:20px;line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1;margin-inline-start:auto}.close{position:absolute;display:flex;align-items:center;justify-content:center;block-size:24px;inline-size:24px;inset-block-start:50%;inset-inline-end:4px;transform:translateY(-50%)}.close vwc-icon{font-size:12px}.close .icon{display:flex;align-items:center;justify-content:center}";
+
+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 Tab extends VividElement {
+  constructor() {
+    super(...arguments);
+    this.removable = false;
+    this.tabIndex = "-1";
+    this.ariaSelected = null;
+  }
+  _handleCloseClick(e) {
+    e.stopImmediatePropagation();
+    this.$emit("close");
+  }
+  _onKeyDown(e) {
+    if (!this.removable || e.key !== "Delete") return true;
+    e.stopImmediatePropagation();
+    this.$emit("close");
+    return false;
+  }
 }
+__decorateClass([
+  attr({ mode: "boolean" })
+], Tab.prototype, "disabled");
+__decorateClass([
+  attr
+], Tab.prototype, "connotation");
+__decorateClass([
+  attr
+], Tab.prototype, "shape");
+__decorateClass([
+  attr
+], Tab.prototype, "label");
+__decorateClass([
+  attr({ mode: "boolean" })
+], Tab.prototype, "removable");
+__decorateClass([
+  attr({ mode: "fromView" })
+], Tab.prototype, "tabIndex");
+__decorateClass([
+  attr({ attribute: "aria-selected" })
+], Tab.prototype, "ariaSelected");
+applyMixins(Tab, AffixIconWithTrailing);
+applyMixins(Tab, Localized);
 
-function TabPanelTemplate() {
+const getClasses = ({
+  connotation,
+  disabled,
+  ariaSelected,
+  iconTrailing,
+  shape,
+  removable
+}) => classNames(
+  "base",
+  [
+    `connotation-${connotation}`,
+    Boolean(connotation) && ariaSelected === "true"
+  ],
+  [`shape-${shape}`, Boolean(shape)],
+  ["disabled", Boolean(disabled)],
+  ["selected", ariaSelected === "true"],
+  ["icon-trailing", iconTrailing],
+  ["removable", removable]
+);
+function renderDismissButton(context) {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html` <span
+		aria-label="${(x) => x.locale.tab.dismissButtonLabel}"
+		class="close"
+		id="close-btn"
+		@click="${(x, c) => x._handleCloseClick(c.event)}"
+	>
+		${() => affixIconTemplate("close-line", IconWrapper.Span)}
+	</span>`;
+}
+const TabTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
   return html`
-		<template slot="tabpanel" role="tabpanel">
-			<slot></slot>
+		<template
+			slot="tab"
+			role="tab"
+			aria-disabled="${(x) => x.disabled}"
+			aria-selected="${(x) => x.ariaSelected}"
+			@keydown="${(x, c) => x._onKeyDown(c.event)}"
+		>
+			<div class="${getClasses}">
+				${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}
+				${(x) => x.removable ? renderDismissButton(context) : null}
+			</div>
 		</template>
 	`;
-}
+};
 
-const tabPanelDefinition = TabPanel.compose(
+const tabDefinition = defineVividComponent(
+  "tab",
+  Tab,
+  TabTemplate,
+  [iconDefinition],
   {
-    baseName: "tab-panel",
-    template: TabPanelTemplate
+    styles
   }
 );
-const tabPanelRegistries = [tabPanelDefinition()];
-const registerTabPanel = registerFactory(tabPanelRegistries);
+const registerTab = createRegisterFunction(tabDefinition);
 
-export { tabPanelRegistries as a, registerTabPanel as r, tabPanelDefinition as t };
+export { registerTab as r, tabDefinition as t };