@vonage/vivid 3.50.0 → 3.50.1

package/shared/definition59.js

@@ -1,17 +1,47 @@
-import { h as html, r as registerFactory } from './index.js';
-import { F as Focus } from './focus.js';
+import { a as attr, F as FoundationElement, h as html, r as registerFactory } from './index.js';
+import { c as classNames } from './class-names.js';
 
-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";
+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 focusTemplate = () => html`
-        <span class="control"></span>`;
+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 focusDefinition = Focus.compose({
-  baseName: "focus",
-  template: focusTemplate,
+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,
   styles
 });
-const focusRegistries = [focusDefinition()];
-const registerFocus = registerFactory(focusRegistries);
+const elevationRegistries = [elevationDefinition()];
+const registerElevation = registerFactory(elevationRegistries);
 
-export { focusRegistries as f, registerFocus as r };
+export { Elevation as E, elevationRegistries as e, registerElevation as r };