@vonage/vivid 4.31.0 → 5.1.0

package/fab/definition.cjs

@@ -0,0 +1,105 @@
+'use strict';
+
+Object.defineProperty(exports, Symbol.toStringTag, { value: 'Module' });
+
+const icon_definition = require('../icon/definition.cjs');
+const vividElement = require('../unbundled/vivid-element.cjs');
+const fastElement = require('@microsoft/fast-element');
+const affix = require('../unbundled/affix.cjs');
+const button = require('../unbundled/button.cjs');
+const fastWebUtilities = require('@microsoft/fast-web-utilities');
+const delegatesAria = require('../unbundled/delegates-aria.cjs');
+
+const styles = ".control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color: transparent}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control.disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover: hover){.control:not(.disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
+
+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 Fab extends affix.AffixIconWithTrailing(button.VividFoundationButton) {
+  /**
+   * Handles click events.
+   * Prevents interaction when disabled.
+   */
+  clickHandler(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return;
+    }
+  }
+}
+__decorateClass([
+  fastElement.attr
+], Fab.prototype, "connotation");
+__decorateClass([
+  fastElement.attr
+], Fab.prototype, "size");
+__decorateClass([
+  fastElement.attr
+], Fab.prototype, "label");
+
+const getClasses = ({
+  connotation,
+  size,
+  icon,
+  label,
+  iconTrailing,
+  disabled,
+  iconSlottedContent
+}) => fastWebUtilities.classNames(
+  "control",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`size-${size}`, Boolean(size)],
+  ["icon-only", !label && !!(icon || iconSlottedContent?.length)],
+  ["icon-trailing", iconTrailing],
+  ["disabled", disabled]
+);
+const FabTemplate = (context) => {
+  const affixIconTemplate = affix.affixIconTemplateFactory(context);
+  return fastElement.html`
+		<button
+			class="${getClasses} "
+			?autofocus="${(x) => x.autofocus}"
+			form="${(x) => x.formId}"
+			formaction="${(x) => x.formaction}"
+			formenctype="${(x) => x.formenctype}"
+			formmethod="${(x) => x.formmethod}"
+			formnovalidate="${(x) => x.formnovalidate}"
+			formtarget="${(x) => x.formtarget}"
+			name="${(x) => x.name}"
+			type="${(x) => x.type}"
+			value="${(x) => x.value}"
+			${delegatesAria.delegateAria({
+    ariaDisabled: (x) => x.disabled
+  })}
+			${fastElement.ref("control")}
+			@click="${(x, c) => x.clickHandler(c.event)}"
+		>
+			${(x) => affixIconTemplate(x.icon, affix.IconWrapper.Slot)} ${(x) => x.label}
+		</button>
+	`;
+};
+
+const fabDefinition = vividElement.defineVividComponent(
+  "fab",
+  Fab,
+  FabTemplate,
+  [icon_definition.iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerFab = vividElement.createRegisterFunction(fabDefinition);
+
+exports.VwcFabElement = Fab;
+exports.fabDefinition = fabDefinition;
+exports.registerFab = registerFab;

package/fab/definition.js

@@ -0,0 +1,99 @@
+import { iconDefinition } from '../icon/definition.js';
+import { d as defineVividComponent, c as createRegisterFunction } from '../unbundled/vivid-element.js';
+import { attr, ref, html } from '@microsoft/fast-element';
+import { A as AffixIconWithTrailing, a as affixIconTemplateFactory, I as IconWrapper } from '../unbundled/affix.js';
+import { V as VividFoundationButton } from '../unbundled/button.js';
+import { classNames } from '@microsoft/fast-web-utilities';
+import { d as delegateAria } from '../unbundled/delegates-aria.js';
+
+const styles = ".control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color: transparent}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:\"\";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control.disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover: hover){.control:not(.disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}";
+
+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 Fab extends AffixIconWithTrailing(VividFoundationButton) {
+  /**
+   * Handles click events.
+   * Prevents interaction when disabled.
+   */
+  clickHandler(event) {
+    if (this.disabled) {
+      event.preventDefault();
+      event.stopImmediatePropagation();
+      return;
+    }
+  }
+}
+__decorateClass([
+  attr
+], Fab.prototype, "connotation");
+__decorateClass([
+  attr
+], Fab.prototype, "size");
+__decorateClass([
+  attr
+], Fab.prototype, "label");
+
+const getClasses = ({
+  connotation,
+  size,
+  icon,
+  label,
+  iconTrailing,
+  disabled,
+  iconSlottedContent
+}) => classNames(
+  "control",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`size-${size}`, Boolean(size)],
+  ["icon-only", !label && !!(icon || iconSlottedContent?.length)],
+  ["icon-trailing", iconTrailing],
+  ["disabled", disabled]
+);
+const FabTemplate = (context) => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  return html`
+		<button
+			class="${getClasses} "
+			?autofocus="${(x) => x.autofocus}"
+			form="${(x) => x.formId}"
+			formaction="${(x) => x.formaction}"
+			formenctype="${(x) => x.formenctype}"
+			formmethod="${(x) => x.formmethod}"
+			formnovalidate="${(x) => x.formnovalidate}"
+			formtarget="${(x) => x.formtarget}"
+			name="${(x) => x.name}"
+			type="${(x) => x.type}"
+			value="${(x) => x.value}"
+			${delegateAria({
+    ariaDisabled: (x) => x.disabled
+  })}
+			${ref("control")}
+			@click="${(x, c) => x.clickHandler(c.event)}"
+		>
+			${(x) => affixIconTemplate(x.icon, IconWrapper.Slot)} ${(x) => x.label}
+		</button>
+	`;
+};
+
+const fabDefinition = defineVividComponent(
+  "fab",
+  Fab,
+  FabTemplate,
+  [iconDefinition],
+  {
+    styles,
+    shadowOptions: {
+      delegatesFocus: true
+    }
+  }
+);
+const registerFab = createRegisterFunction(fabDefinition);
+
+export { Fab as VwcFabElement, fabDefinition, registerFab };

package/fab/index.cjs

@@ -1,5 +1,20 @@
-'use strict';
-
-const definition = require('../shared/definition25.cjs');
-
-definition.registerFab();
+"use strict";const s=require("../bundled/definition2.cjs"),e=require("../bundled/vivid-element.cjs"),v=require("../bundled/affix.cjs"),p=require("../bundled/button.cjs"),f=require("../bundled/delegates-aria.cjs"),u=require("../bundled/class-names.cjs"),b=require("../bundled/ref.cjs"),m='.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color: transparent}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control.disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover: hover){.control:not(.disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}';var _=Object.defineProperty,d=(r,a,o,c)=>{for(var n=void 0,t=r.length-1,i;t>=0;t--)(i=r[t])&&(n=i(a,o,n)||n);return n&&_(a,o,n),n};class l extends v.AffixIconWithTrailing(p.VividFoundationButton){clickHandler(a){if(this.disabled){a.preventDefault(),a.stopImmediatePropagation();return}}}d([e.attr],l.prototype,"connotation");d([e.attr],l.prototype,"size");d([e.attr],l.prototype,"label");const y=({connotation:r,size:a,icon:o,label:c,iconTrailing:n,disabled:t,iconSlottedContent:i})=>u.classNames("control",[`connotation-${r}`,!!r],[`size-${a}`,!!a],["icon-only",!c&&!!(o||i?.length)],["icon-trailing",n],["disabled",t]),x=r=>{const a=v.affixIconTemplateFactory(r);return e.html`
+		<button
+			class="${y} "
+			?autofocus="${o=>o.autofocus}"
+			form="${o=>o.formId}"
+			formaction="${o=>o.formaction}"
+			formenctype="${o=>o.formenctype}"
+			formmethod="${o=>o.formmethod}"
+			formnovalidate="${o=>o.formnovalidate}"
+			formtarget="${o=>o.formtarget}"
+			name="${o=>o.name}"
+			type="${o=>o.type}"
+			value="${o=>o.value}"
+			${f.delegateAria({ariaDisabled:o=>o.disabled})}
+			${b.ref("control")}
+			@click="${(o,c)=>o.clickHandler(c.event)}"
+		>
+			${o=>a(o.icon,v.IconWrapper.Slot)} ${o=>o.label}
+		</button>
+	`},h=e.defineVividComponent("fab",l,x,[s.iconDefinition],{styles:m,shadowOptions:{delegatesFocus:!0}}),g=e.createRegisterFunction(h);g();

package/fab/index.js

@@ -1,3 +1,86 @@
-import { r as registerFab } from '../shared/definition25.js';
-
-registerFab();
+import { i as d } from "../bundled/definition2.js";
+import { a as l, h as s, c as p, d as f } from "../bundled/vivid-element.js";
+import { A as m, a as b, I as u } from "../bundled/affix.js";
+import { V as _ } from "../bundled/button.js";
+import { d as y } from "../bundled/delegates-aria.js";
+import { c as x } from "../bundled/class-names.js";
+import { r as h } from "../bundled/ref.js";
+const g = '.control.connotation-accent{--_connotation-color-primary: var(--vvd-fab-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-fab-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-accent-primary-increment, var(--vvd-color-neutral-800));--_connotation-color-contrast: var(--vvd-fab-accent-contrast, var(--vvd-color-neutral-800));--_connotation-color-fierce: var(--vvd-fab-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-firm: var(--vvd-fab-accent-firm, var(--vvd-color-canvas-text))}.control.connotation-cta{--_connotation-color-primary: var(--vvd-fab-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-fab-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-cta-primary-increment, var(--vvd-color-cta-600));--_connotation-color-contrast: var(--vvd-fab-cta-contrast, var(--vvd-color-cta-800));--_connotation-color-fierce: var(--vvd-fab-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-firm: var(--vvd-fab-cta-firm, var(--vvd-color-cta-600))}.control.connotation-announcement{--_connotation-color-primary: var(--vvd-fab-announcement-primary, var(--vvd-color-announcement-500));--_connotation-color-primary-text: var(--vvd-fab-announcement-primary-text, var(--vvd-color-canvas));--_connotation-color-primary-increment: var(--vvd-fab-announcement-primary-increment, var(--vvd-color-announcement-600));--_connotation-color-contrast: var(--vvd-fab-announcement-contrast, var(--vvd-color-announcement-800));--_connotation-color-fierce: var(--vvd-fab-announcement-fierce, var(--vvd-color-announcement-700));--_connotation-color-firm: var(--vvd-fab-announcement-firm, var(--vvd-color-announcement-600))}.control{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}@media (hover: hover){.control:hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}}.control.hover:where(:not(.disabled,:disabled,.readonly)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary-increment);--_appearance-color-outline: transparent}.control:disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control.disabled{--_appearance-color-text: var(--vvd-color-neutral-300);--_appearance-color-fill: var(--vvd-color-neutral-100);--_appearance-color-outline: transparent}.control:active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control.active:where(:not(.disabled,:disabled)){--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-fierce);--_appearance-color-outline: transparent}.control{--_fab-inline-padding: 12px;display:inline-flex;box-sizing:border-box;align-items:center;border:0 none;border-radius:var(--_fab-border-radius);background:var(--_appearance-color-fill, var(--_elevation-fill));block-size:var(--_fab-block-size);color:var(--_appearance-color-text, var(--vvd-color-canvas-text));column-gap:var(--fab-icon-gap);filter:var(--_elevation-shadow);font:var(--vvd-typography-base-bold);padding-inline:var(--_fab-inline-padding);transition:background-color .15s linear,filter .15s linear;vertical-align:middle}.control:not(.connotation-accent,.connotation-cta,.connotation-announcement){--focus-stroke-gap-color: transparent}.control:focus-visible{position:relative;outline:none}.control:focus-visible:after{box-shadow:0 0 0 4px color-mix(in srgb,var(--vvd-color-cta-500),transparent 85%),inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);outline:1px solid var(--focus-stroke-color, var(--vvd-color-cta-500));outline-offset:calc(-1px - var(--focus-inset, 0px));position:absolute;display:block;border-radius:var(--focus-border-radius, inherit);block-size:calc(100% + var(--focus-block-size-addition, 4px));content:"";inline-size:calc(100% + var(--focus-block-size-addition, 4px));inset-block-start:50%;inset-inline-start:50%;transform:translate(-50%,-50%)}@supports (user-select: none){.control{user-select:none}}.control.size-expanded{--_fab-border-radius: 40px;--_fab-block-size: calc(1px*(56 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;--_fab-inline-padding: 20px}.control.size-condensed{--_fab-border-radius: 20px;--_fab-block-size: calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) ;font:var(--vvd-typography-base-condensed-bold)}.control.size-condensed vwc-icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}.control:not(.size-expanded,.size-condensed){--_fab-border-radius: 24px;--_fab-block-size: calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2))) }.control:not(.size-condensed){font:var(--vvd-typography-base-bold)}.control.icon-only{--_fab-inline-padding: 0;border-radius:50%;place-content:center}@supports (aspect-ratio: 1){.control.icon-only{aspect-ratio:1}}@supports not (aspect-ratio: 1){.control.icon-only{inline-size:var(--_fab-block-size)}}.control:not(.icon-only){--fab-icon-gap: 10px}.control.disabled{--_elevation-fill: var(--_vvd-tinted-color-surface-nonedp, var(--vvd-color-surface-nonedp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-nonedp, var(--vvd-shadow-surface-nonedp));cursor:not-allowed}.control:not(.disabled){--_elevation-fill: var(--_vvd-tinted-color-surface-4dp, var(--vvd-color-surface-4dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-4dp, var(--vvd-shadow-surface-4dp));cursor:pointer}@media (hover: hover){.control:not(.disabled):hover{--_elevation-fill: var(--_vvd-tinted-color-surface-12dp, var(--vvd-color-surface-12dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-12dp, var(--vvd-shadow-surface-12dp))}}.control:not(.disabled):active{--_elevation-fill: var(--_vvd-tinted-color-surface-24dp, var(--vvd-color-surface-24dp));--_elevation-shadow: var(--_vvd-tinted-shadow-surface-24dp, var(--vvd-shadow-surface-24dp))}slot[name=icon]{line-height:1}.icon-trailing slot[name=icon]{display:inline-block;order:1}.control.size-extended slot[name=icon]{font-size:calc(calc(1px*(56 + 4*clamp(-1,var(--vvd-size-density, 0),2))) / 2.3333)}.control:not(.size-extended) slot[name=icon]{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2)}';
+var z = Object.defineProperty, v = (r, a, o, t) => {
+  for (var n = void 0, e = r.length - 1, c; e >= 0; e--)
+    (c = r[e]) && (n = c(a, o, n) || n);
+  return n && z(a, o, n), n;
+};
+class i extends m(_) {
+  /**
+   * Handles click events.
+   * Prevents interaction when disabled.
+   */
+  clickHandler(a) {
+    if (this.disabled) {
+      a.preventDefault(), a.stopImmediatePropagation();
+      return;
+    }
+  }
+}
+v([
+  l
+], i.prototype, "connotation");
+v([
+  l
+], i.prototype, "size");
+v([
+  l
+], i.prototype, "label");
+const w = ({
+  connotation: r,
+  size: a,
+  icon: o,
+  label: t,
+  iconTrailing: n,
+  disabled: e,
+  iconSlottedContent: c
+}) => x(
+  "control",
+  [`connotation-${r}`, !!r],
+  [`size-${a}`, !!a],
+  ["icon-only", !t && !!(o || c?.length)],
+  ["icon-trailing", n],
+  ["disabled", e]
+), k = (r) => {
+  const a = b(r);
+  return s`
+		<button
+			class="${w} "
+			?autofocus="${(o) => o.autofocus}"
+			form="${(o) => o.formId}"
+			formaction="${(o) => o.formaction}"
+			formenctype="${(o) => o.formenctype}"
+			formmethod="${(o) => o.formmethod}"
+			formnovalidate="${(o) => o.formnovalidate}"
+			formtarget="${(o) => o.formtarget}"
+			name="${(o) => o.name}"
+			type="${(o) => o.type}"
+			value="${(o) => o.value}"
+			${y({
+    ariaDisabled: (o) => o.disabled
+  })}
+			${h("control")}
+			@click="${(o, t) => o.clickHandler(t.event)}"
+		>
+			${(o) => a(o.icon, u.Slot)} ${(o) => o.label}
+		</button>
+	`;
+}, $ = f(
+  "fab",
+  i,
+  k,
+  [d],
+  {
+    styles: g,
+    shadowOptions: {
+      delegatesFocus: !0
+    }
+  }
+), F = p($);
+F();