@vonage/vivid 3.48.0 → 3.49.0-preview.1

package/shared/definition58.cjs

@@ -0,0 +1,20 @@
+'use strict';
+
+const index = require('./index.cjs');
+const focus = require('./focus.cjs');
+
+const styles = ":host{display:contents;border-radius:inherit}.control{position:absolute;z-index:1;box-sizing:border-box;border-radius:inherit;box-shadow:inset 0 0 0 3px var(--focus-stroke-gap-color, currentColor);inset:var(--focus-inset, 0);outline:2px solid var(--focus-stroke-color, var(--vvd-color-canvas-text));outline-offset:-2px}\n";
+
+const focusTemplate = () => index.html`
+        <span class="control"></span>`;
+
+const focusDefinition = focus.Focus.compose({
+  baseName: "focus",
+  template: focusTemplate,
+  styles
+});
+const focusRegistries = [focusDefinition()];
+const registerFocus = index.registerFactory(focusRegistries);
+
+exports.focusRegistries = focusRegistries;
+exports.registerFocus = registerFocus;

package/shared/definition59.cjs

@@ -0,0 +1,51 @@
+'use strict';
+
+const index = require('./index.cjs');
+const classNames = require('./class-names.cjs');
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Elevation extends index.FoundationElement {
+}
+__decorateClass([
+  index.attr
+], Elevation.prototype, "dp", 2);
+__decorateClass([
+  index.attr({ attribute: "no-shadow", mode: "boolean" })
+], Elevation.prototype, "noShadow", 2);
+
+const styles = ":host{display:contents}.control{display:contents}.control.dp-0{--_elevation-fill: var(--vvd-color-surface-0dp);--_elevation-shadow: var(--vvd-shadow-surface-0dp)}.control.dp-4{--_elevation-fill: var(--vvd-color-surface-4dp);--_elevation-shadow: var(--vvd-shadow-surface-4dp)}.control.dp-8{--_elevation-fill: var(--vvd-color-surface-8dp);--_elevation-shadow: var(--vvd-shadow-surface-8dp)}.control.dp-12{--_elevation-fill: var(--vvd-color-surface-12dp);--_elevation-shadow: var(--vvd-shadow-surface-12dp)}.control.dp-16{--_elevation-fill: var(--vvd-color-surface-16dp);--_elevation-shadow: var(--vvd-shadow-surface-16dp)}.control.dp-24{--_elevation-fill: var(--vvd-color-surface-24dp);--_elevation-shadow: var(--vvd-shadow-surface-24dp)}.control:not(.dp-0,.dp-4,.dp-8,.dp-12,.dp-16,.dp-24){--_elevation-fill: var(--vvd-color-surface-2dp);--_elevation-shadow: var(--vvd-shadow-surface-2dp)}.control ::slotted(*){position:relative;isolation:isolate}.control ::slotted(*):before{position:absolute;z-index:-1;background:var(--_elevation-fill);block-size:100%;border-radius:inherit;content:\"\";filter:var(--_elevation-shadow);inline-size:100%;inset-block-start:0;inset-inline-start:0;transition:background-color .15s linear,filter .15s linear}.control.no-shadow ::slotted(*):before{filter:none}\n";
+
+const getClasses = ({
+  dp,
+  noShadow
+}) => classNames.classNames(
+  "control",
+  [`dp-${dp}`, Boolean(dp)],
+  ["no-shadow", Boolean(noShadow)]
+);
+const elevationTemplate = () => index.html`
+        <div class="${getClasses}" part="base">
+			<slot></slot>
+		</div>`;
+
+const elevationDefinition = Elevation.compose({
+  baseName: "elevation",
+  template: elevationTemplate,
+  styles
+});
+const elevationRegistries = [elevationDefinition()];
+const registerElevation = index.registerFactory(elevationRegistries);
+
+exports.Elevation = Elevation;
+exports.elevationRegistries = elevationRegistries;
+exports.registerElevation = registerElevation;

package/shared/definition6.cjs

@@ -0,0 +1,83 @@
+'use strict';
+
+const index = require('./index.cjs');
+const definition = require('./definition26.cjs');
+const icon = require('./icon.cjs');
+const when = require('./when.cjs');
+const classNames = require('./class-names.cjs');
+
+const styles = ".base{display:inline-flex;overflow:hidden;align-items:center;justify-content:center;background-color:var(--_appearance-color-fill);block-size:var(--_size);border-radius:var(--_avatar-border-radius);box-shadow:inset 0 0 0 1px var(--_appearance-color-outline);color:var(--_appearance-color-text);inline-size:var(--_size);vertical-align:middle}.base.connotation-cta{--_connotation-color-primary: var(--vvd-avatar-cta-primary, var(--vvd-color-cta-500));--_connotation-color-primary-text: var(--vvd-avatar-cta-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-cta-firm, var(--vvd-color-cta-600));--_connotation-color-fierce: var(--vvd-avatar-cta-fierce, var(--vvd-color-cta-700));--_connotation-color-pale: var(--vvd-avatar-cta-pale, var(--vvd-color-cta-300));--_connotation-color-soft: var(--vvd-avatar-cta-soft, var(--vvd-color-cta-100));--_connotation-color-contrast: var(--vvd-avatar-cta-contrast, var(--vvd-color-cta-800))}.base:not(.connotation-cta){--_connotation-color-primary: var(--vvd-avatar-accent-primary, var(--vvd-color-canvas-text));--_connotation-color-primary-text: var(--vvd-avatar-accent-primary-text, var(--vvd-color-canvas));--_connotation-color-firm: var(--vvd-avatar-accent-firm, var(--vvd-color-canvas-text));--_connotation-color-fierce: var(--vvd-avatar-accent-fierce, var(--vvd-color-neutral-700));--_connotation-color-pale: var(--vvd-avatar-accent-pale, var(--vvd-color-neutral-300));--_connotation-color-soft: var(--vvd-avatar-accent-soft, var(--vvd-color-neutral-100));--_connotation-color-contrast: var(--vvd-avatar-accent-contrast, var(--vvd-color-neutral-800))}.base{--_appearance-color-text: var(--_connotation-color-primary-text);--_appearance-color-fill: var(--_connotation-color-primary);--_appearance-color-outline: transparent}.base.appearance-outlined{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-firm)}.base.appearance-duotone{--_appearance-color-text: var(--_connotation-color-firm);--_appearance-color-fill: transparent;--_appearance-color-outline: var(--_connotation-color-pale)}.base.appearance-subtle{--_appearance-color-text: var(--_connotation-color-contrast);--_appearance-color-fill: var(--_connotation-color-soft);--_appearance-color-outline: transparent}.base.size-condensed{--_size:calc(1px*(32 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-condensed .initials{font:var(--vvd-typography-base-condensed-bold)}.base.size-condensed .icon{font-size:calc(1px*(32 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base.size-expanded{--_size:calc(1px*(48 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base.size-expanded .initials{font:var(--vvd-typography-heading-4)}.base.size-expanded .icon{font-size:calc(1px*(48 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.size-condensed,.size-expanded){--_size:calc(1px*(40 + 4*clamp(-1, var(--vvd-size-density, 0), 2)))}.base:not(.size-condensed,.size-expanded) .initials{font:var(--vvd-typography-base-extended-bold)}.base:not(.size-condensed,.size-expanded) .icon{font-size:calc(1px*(40 + 4*clamp(-1,var(--vvd-size-density, 0),2))/2);line-height:1}.base:not(.shape-pill){--_avatar-border-radius: 8px}.base:not(.shape-pill).size-condensed{--_avatar-border-radius: 4px}.base.shape-pill{--_avatar-border-radius: 50%}.base .initials{text-transform:uppercase}.base ::slotted(*){block-size:100%;inline-size:100%;object-fit:cover}\n";
+
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __decorateClass = (decorators, target, key, kind) => {
+  var result = kind > 1 ? void 0 : kind ? __getOwnPropDesc(target, key) : target;
+  for (var i = decorators.length - 1, decorator; i >= 0; i--)
+    if (decorator = decorators[i])
+      result = (kind ? decorator(target, key, result) : decorator(result)) || result;
+  if (kind && result)
+    __defProp(target, key, result);
+  return result;
+};
+class Avatar extends index.FoundationElement {
+}
+__decorateClass([
+  index.attr
+], Avatar.prototype, "connotation", 2);
+__decorateClass([
+  index.attr
+], Avatar.prototype, "shape", 2);
+__decorateClass([
+  index.attr
+], Avatar.prototype, "appearance", 2);
+__decorateClass([
+  index.attr
+], Avatar.prototype, "size", 2);
+__decorateClass([
+  index.attr
+], Avatar.prototype, "icon", 2);
+__decorateClass([
+  index.attr
+], Avatar.prototype, "initials", 2);
+
+const getClasses = ({ appearance, connotation, shape, size }) => classNames.classNames(
+  "base",
+  [`connotation-${connotation}`, Boolean(connotation)],
+  [`appearance-${appearance}`, Boolean(appearance)],
+  [`shape-${shape}`, Boolean(shape)],
+  [`size-${size}`, Boolean(size)]
+);
+function renderIcon(iconTag) {
+  return index.html`
+		<span class="icon">
+			<${iconTag} name="${(x) => x.icon ? `${x.icon}` : "user-line"}"></${iconTag}>
+		</span>
+	`;
+}
+function renderInitials() {
+  return index.html`
+		<span class="initials">${({ initials }) => initials.substring(0, 2)}</span>
+	`;
+}
+const AvatarTemplate = (context) => {
+  const iconTag = context.tagFor(icon.Icon);
+  return index.html`
+	<span class="${getClasses}">
+		<slot name="graphic">
+			${when.when((x) => x.initials, renderInitials())}
+			${when.when((x) => !x.initials, renderIcon(iconTag))}
+		</slot>
+</span>`;
+};
+
+const avatarDefinition = Avatar.compose({
+  baseName: "avatar",
+  template: AvatarTemplate,
+  styles
+});
+const avatarRegistries = [avatarDefinition(), ...definition.iconRegistries];
+const registerAvatar = index.registerFactory(avatarRegistries);
+
+exports.avatarDefinition = avatarDefinition;
+exports.avatarRegistries = avatarRegistries;
+exports.registerAvatar = registerAvatar;