@vonage/vivid 4.4.0 → 4.6.0

package/shared/definition50.js

@@ -1,94 +1,33 @@
-import { F as FoundationElement, _ as __decorate, a as attr, h as html, r as registerFactory } from './index.js';
-import { a as iconRegistries } from './definition27.js';
-import { b as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from './affix.js';
-import { a as applyMixins } from './apply-mixins.js';
-import { c as classNames } from './class-names.js';
+import { F as FoundationElement, h as html, r as registerFactory } from './index.js';
 
 /**
- * A Tab Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
+ * A TabPanel Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
  *
- * @slot - The default slot for the tab content
+ * @slot - The default slot for the tabpanel content
  *
  * @public
  */
-let Tab$1 = class Tab extends FoundationElement {
+let TabPanel$1 = class TabPanel extends FoundationElement {
 };
-__decorate([
-    attr({ mode: "boolean" })
-], Tab$1.prototype, "disabled", void 0);
 
-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(:focus-visible){outline:none}.base{position:relative;display:flex;box-sizing:border-box;align-items:center;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}.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))}@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}: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}:host(:not(.vertical)) .base:after{position:absolute;border-radius:2px;background:currentColor;block-size:2px;content:\"\";inline-size:100%;inset-block-end:0;inset-inline-start:0;pointer-events:none;transition-property:opacity}:host(:not(.vertical)):host([aria-selected=true]) .base:after{transition-delay:.2s}:host(:not(.vertical)):host(:not([aria-selected=true])) .base:after{opacity:0}";
-
-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 Tab$1 {
-  constructor() {
-    super(...arguments);
-    this.tabIndex = "-1";
-    this.ariaSelected = null;
-  }
+class TabPanel extends TabPanel$1 {
 }
-__decorateClass([
-  attr
-], Tab.prototype, "connotation");
-__decorateClass([
-  attr
-], Tab.prototype, "shape");
-__decorateClass([
-  attr
-], Tab.prototype, "label");
-__decorateClass([
-  attr({ mode: "fromView" })
-], Tab.prototype, "tabIndex");
-__decorateClass([
-  attr({ attribute: "aria-selected" })
-], Tab.prototype, "ariaSelected");
-applyMixins(Tab, AffixIconWithTrailing);
 
-const getClasses = ({
-  connotation,
-  disabled,
-  ariaSelected,
-  iconTrailing,
-  shape
-}) => classNames(
-  "base",
-  [
-    `connotation-${connotation}`,
-    Boolean(connotation) && ariaSelected === "true"
-  ],
-  [`shape-${shape}`, Boolean(shape)],
-  ["disabled", Boolean(disabled)],
-  ["selected", ariaSelected === "true"],
-  ["icon-trailing", iconTrailing]
-);
-function TabTemplate(context) {
-  const affixIconTemplate = affixIconTemplateFactory(context);
-  return html` <template
-		slot="tab"
-		role="tab"
-		aria-disabled="${(x) => x.disabled}"
-		aria-selected="${(x) => x.ariaSelected}"
-	>
-		<div class="${getClasses}">
-			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}
-		</div>
-	</template>`;
+function TabPanelTemplate() {
+  return html`
+		<template slot="tabpanel" role="tabpanel">
+			<slot></slot>
+		</template>
+	`;
 }
 
-const tabDefinition = Tab.compose({
-  baseName: "tab",
-  template: TabTemplate,
-  styles
-});
-const tabRegistries = [tabDefinition(), ...iconRegistries];
-const registerTab = registerFactory(tabRegistries);
+const tabPanelDefinition = TabPanel.compose(
+  {
+    baseName: "tab-panel",
+    template: TabPanelTemplate
+  }
+);
+const tabPanelRegistries = [tabPanelDefinition()];
+const registerTabPanel = registerFactory(tabPanelRegistries);
 
-export { tabRegistries as a, registerTab as r, tabDefinition as t };
+export { tabPanelRegistries as a, registerTabPanel as r, tabPanelDefinition as t };