@vonage/vivid 3.51.0 → 3.53.0

package/shared/definition5.js

@@ -1,6 +1,6 @@
 import { a as attr, F as FoundationElement, o as observable, h as html, r as registerFactory } from './index.js';
 import { B as Button, a as buttonRegistries } from './definition11.js';
-import { S as Slider, a as sliderRegistries } from './definition44.js';
+import { S as Slider, a as sliderRegistries } from './definition46.js';
 import './affix.js';
 import './index2.js';
 import { L as Localized } from './localized.js';
@@ -139,9 +139,7 @@ __decorateClass([
 ], AudioPlayer.prototype, "duration", 2);
 applyMixins(AudioPlayer, Localized);
 
-const getClasses = ({ disabled, duration }) => classNames(
-  ["disabled", Boolean(disabled) || !Boolean(duration)]
-);
+const getClasses = ({ disabled, duration }) => classNames(["disabled", Boolean(disabled) || !Boolean(duration)]);
 function renderButton(context) {
   const buttonTag = context.tagFor(Button);
   return html`<${buttonTag} class="pause" @click="${(x) => x._togglePlay()}"
@@ -163,24 +161,25 @@ function renderSlider(context) {
 	</${sliderTag}>`;
 }
 function renderTimestamp() {
-  return html`
-	<div class="time-stamp" ${ref("_timeStampEl")}>
+  return html` <div class="time-stamp" ${ref("_timeStampEl")}>
 		<span class="current-time">0:00</span>
 		<span>/</span>
 		<span class="total-time">0:00</span>
 	</div>`;
 }
 const AudioPlayerTemplate = (context) => {
-  return html`
-    <div class="base ${getClasses}">
-      <div class="controls">
-	  	${renderButton(context)}
-      	${when((x) => !x.notime, renderTimestamp())}
-		${renderSlider(context)}
-      </div>
-      <audio ${ref("_playerEl")} src="${(x) => x.src}"
-      @timeupdate="${(x) => x._updateProgress()}" @loadedmetadata="${(x) => x._updateTotalTime()}"></audio>
-    </div>`;
+  return html` <div class="base ${getClasses}">
+		<div class="controls">
+			${renderButton(context)} ${when((x) => !x.notime, renderTimestamp())}
+			${renderSlider(context)}
+		</div>
+		<audio
+			${ref("_playerEl")}
+			src="${(x) => x.src}"
+			@timeupdate="${(x) => x._updateProgress()}"
+			@loadedmetadata="${(x) => x._updateTotalTime()}"
+		></audio>
+	</div>`;
 };
 
 const audioPlayerDefinition = AudioPlayer.compose({
@@ -188,7 +187,11 @@ const audioPlayerDefinition = AudioPlayer.compose({
   template: AudioPlayerTemplate,
   styles
 });
-const audioPlayerRegistries = [audioPlayerDefinition(), ...buttonRegistries, ...sliderRegistries];
+const audioPlayerRegistries = [
+  audioPlayerDefinition(),
+  ...buttonRegistries,
+  ...sliderRegistries
+];
 const registerAudioPlayer = registerFactory(audioPlayerRegistries);
 
 export { audioPlayerDefinition as a, audioPlayerRegistries as b, registerAudioPlayer as r };

package/shared/definition50.cjs

@@ -1,9 +1,25 @@
 'use strict';
 
 const index = require('./index.cjs');
+const definition = require('./definition27.cjs');
+const affix = require('./affix.cjs');
+const applyMixins = require('./apply-mixins.cjs');
 const classNames = require('./class-names.cjs');
 
-const styles = ".base{display:flex;flex-wrap:wrap;gap:8px}\n";
+/**
+ * A Tab Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
+ *
+ * @slot - The default slot for the tab content
+ *
+ * @public
+ */
+let Tab$1 = class Tab extends index.FoundationElement {
+};
+index.__decorate([
+    index.attr({ mode: "boolean" })
+], Tab$1.prototype, "disabled", void 0);
+
+const styles = ":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-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_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-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_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))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_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))}@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{padding-inline-start:calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter))}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}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -16,37 +32,69 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class TagGroup extends index.FoundationElement {
+class Tab extends Tab$1 {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
+    this.tabIndex = "-1";
+    this.ariaSelected = null;
   }
 }
 __decorateClass([
-  index.attr({ attribute: "aria-label" })
-], TagGroup.prototype, "ariaLabel", 2);
+  index.attr
+], Tab.prototype, "connotation", 2);
+__decorateClass([
+  index.attr
+], Tab.prototype, "shape", 2);
+__decorateClass([
+  index.attr
+], Tab.prototype, "label", 2);
+__decorateClass([
+  index.attr({ mode: "fromView" })
+], Tab.prototype, "tabIndex", 2);
+__decorateClass([
+  index.attr({ attribute: "aria-selected" })
+], Tab.prototype, "ariaSelected", 2);
+applyMixins.applyMixins(Tab, affix.AffixIconWithTrailing);
 
-const getClasses = (_) => classNames.classNames(
-  "base"
+const getClasses = ({
+  connotation,
+  disabled,
+  ariaSelected,
+  iconTrailing,
+  shape
+}) => classNames.classNames(
+  "base",
+  [
+    `connotation-${connotation}`,
+    Boolean(connotation) && ariaSelected === "true"
+  ],
+  [`shape-${shape}`, Boolean(shape)],
+  ["disabled", Boolean(disabled)],
+  ["selected", ariaSelected === "true"],
+  ["icon-trailing", iconTrailing]
 );
-const TagGroupTemplate = () => {
-  return index.html`
-		<div class="${getClasses}" role="listbox" aria-orientation="horizontal" aria-label="${(x) => x.ariaLabel}">
-			<slot></slot>
+function TabTemplate(context) {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  return index.html` <template
+		slot="tab"
+		role="tab"
+		aria-disabled="${(x) => x.disabled}"
+		aria-selected="${(x) => x.ariaSelected}"
+	>
+		<div class="${getClasses}">
+			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.label}
 		</div>
-	`;
-};
+	</template>`;
+}
 
-const tagGroupDefinition = TagGroup.compose(
-  {
-    baseName: "tag-group",
-    template: TagGroupTemplate,
-    styles
-  }
-);
-const tagGroupRegistries = [tagGroupDefinition()];
-const registerTagGroup = index.registerFactory(tagGroupRegistries);
+const tabDefinition = Tab.compose({
+  baseName: "tab",
+  template: TabTemplate,
+  styles
+});
+const tabRegistries = [tabDefinition(), ...definition.iconRegistries];
+const registerTab = index.registerFactory(tabRegistries);
 
-exports.registerTagGroup = registerTagGroup;
-exports.tagGroupDefinition = tagGroupDefinition;
-exports.tagGroupRegistries = tagGroupRegistries;
+exports.registerTab = registerTab;
+exports.tabDefinition = tabDefinition;
+exports.tabRegistries = tabRegistries;

package/shared/definition50.js

@@ -1,7 +1,23 @@
-import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
+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';
 
-const styles = ".base{display:flex;flex-wrap:wrap;gap:8px}\n";
+/**
+ * A Tab Component to be used with {@link @microsoft/fast-foundation#(Tabs:class)}
+ *
+ * @slot - The default slot for the tab content
+ *
+ * @public
+ */
+let Tab$1 = class Tab extends FoundationElement {
+};
+__decorate([
+    attr({ mode: "boolean" })
+], Tab$1.prototype, "disabled", void 0);
+
+const styles = ":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-primary);--_appearance-color-fill: transparent;--_appearance-color-outline: transparent}.base:where(.hover,:hover):where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary);--_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-primary);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.connotation-cta{--_connotation-color-primary: var(--vvd-tab-cta-primary, var(--vvd-color-cta-500));--_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))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-tab-accent-primary, var(--vvd-color-canvas-text));--_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))}@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{padding-inline-start:calc(var(--_tabs-active-indicator-stroke-width) + var(--_tabs-tablist-gutter))}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}\n";
 
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -14,35 +30,67 @@ var __decorateClass = (decorators, target, key, kind) => {
     __defProp(target, key, result);
   return result;
 };
-class TagGroup extends FoundationElement {
+class Tab extends Tab$1 {
   constructor() {
     super(...arguments);
-    this.ariaLabel = null;
+    this.tabIndex = "-1";
+    this.ariaSelected = null;
   }
 }
 __decorateClass([
-  attr({ attribute: "aria-label" })
-], TagGroup.prototype, "ariaLabel", 2);
+  attr
+], Tab.prototype, "connotation", 2);
+__decorateClass([
+  attr
+], Tab.prototype, "shape", 2);
+__decorateClass([
+  attr
+], Tab.prototype, "label", 2);
+__decorateClass([
+  attr({ mode: "fromView" })
+], Tab.prototype, "tabIndex", 2);
+__decorateClass([
+  attr({ attribute: "aria-selected" })
+], Tab.prototype, "ariaSelected", 2);
+applyMixins(Tab, AffixIconWithTrailing);
 
-const getClasses = (_) => classNames(
-  "base"
+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]
 );
-const TagGroupTemplate = () => {
-  return html`
-		<div class="${getClasses}" role="listbox" aria-orientation="horizontal" aria-label="${(x) => x.ariaLabel}">
-			<slot></slot>
+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>`;
+}
 
-const tagGroupDefinition = TagGroup.compose(
-  {
-    baseName: "tag-group",
-    template: TagGroupTemplate,
-    styles
-  }
-);
-const tagGroupRegistries = [tagGroupDefinition()];
-const registerTagGroup = registerFactory(tagGroupRegistries);
+const tabDefinition = Tab.compose({
+  baseName: "tab",
+  template: TabTemplate,
+  styles
+});
+const tabRegistries = [tabDefinition(), ...iconRegistries];
+const registerTab = registerFactory(tabRegistries);
 
-export { tagGroupRegistries as a, registerTagGroup as r, tagGroupDefinition as t };
+export { tabRegistries as a, registerTab as r, tabDefinition as t };