@vonage/vivid 4.16.2 → 4.17.0

package/shared/definition50.js

@@ -1,120 +1,21 @@
-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 { A 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';
+import { V as VividElement, h as html, d as createRegisterFunction, f as defineVividComponent } from './vivid-element.js';
 
-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;
-  }
+class TabPanel extends VividElement {
 }
-__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);
 
-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="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 TabPanelTemplate = html`
+	<template slot="tabpanel" role="tabpanel">
+		<slot></slot>
+	</template>
+`;
 
-const tabDefinition = defineVividComponent(
-  "tab",
-  Tab,
-  TabTemplate,
-  [iconDefinition],
-  {
-    styles
-  }
+const tabPanelDefinition = defineVividComponent(
+  "tab-panel",
+  TabPanel,
+  TabPanelTemplate,
+  [],
+  {}
 );
-const registerTab = createRegisterFunction(tabDefinition);
+const registerTabPanel = createRegisterFunction(tabPanelDefinition);
 
-export { registerTab as r, tabDefinition as t };
+export { TabPanel as T, registerTabPanel as r, tabPanelDefinition as t };