@vonage/vivid 3.49.0-preview.1 → 3.50.0

package/shared/definition59.cjs

@@ -1,51 +1,20 @@
 'use strict';
 
 const index = require('./index.cjs');
-const classNames = require('./class-names.cjs');
+const focus = require('./focus.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;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 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 focusTemplate = () => index.html`
+        <span class="control"></span>`;
 
-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,
+const focusDefinition = focus.Focus.compose({
+  baseName: "focus",
+  template: focusTemplate,
   styles
 });
-const elevationRegistries = [elevationDefinition()];
-const registerElevation = index.registerFactory(elevationRegistries);
+const focusRegistries = [focusDefinition()];
+const registerFocus = index.registerFactory(focusRegistries);
 
-exports.Elevation = Elevation;
-exports.elevationRegistries = elevationRegistries;
-exports.registerElevation = registerElevation;
+exports.focusRegistries = focusRegistries;
+exports.registerFocus = registerFocus;

package/shared/definition59.js

@@ -1,47 +1,17 @@
-import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
-import { c as classNames } from './class-names.js';
+import { h as html, r as registerFactory } from './index.js';
+import { F as Focus } from './focus.js';
 
-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 FoundationElement {
-}
-__decorateClass([
-  attr
-], Elevation.prototype, "dp", 2);
-__decorateClass([
-  attr({ attribute: "no-shadow", mode: "boolean" })
-], Elevation.prototype, "noShadow", 2);
+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 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 focusTemplate = () => html`
+        <span class="control"></span>`;
 
-const getClasses = ({
-  dp,
-  noShadow
-}) => classNames(
-  "control",
-  [`dp-${dp}`, Boolean(dp)],
-  ["no-shadow", Boolean(noShadow)]
-);
-const elevationTemplate = () => html`
-        <div class="${getClasses}" part="base">
-			<slot></slot>
-		</div>`;
-
-const elevationDefinition = Elevation.compose({
-  baseName: "elevation",
-  template: elevationTemplate,
+const focusDefinition = Focus.compose({
+  baseName: "focus",
+  template: focusTemplate,
   styles
 });
-const elevationRegistries = [elevationDefinition()];
-const registerElevation = registerFactory(elevationRegistries);
+const focusRegistries = [focusDefinition()];
+const registerFocus = registerFactory(focusRegistries);
 
-export { Elevation as E, elevationRegistries as e, registerElevation as r };
+export { focusRegistries as f, registerFocus as r };