@vonage/vivid 3.0.0-next.29 → 3.0.0-next.31

package/sidenav/index.js

@@ -0,0 +1,17 @@
+import { F as FoundationElement, h as html, d as designSystem } from '../shared/index.js';
+
+class Sidenav extends FoundationElement {}
+
+let _ = t => t,
+    _t;
+const SidenavTemplate = () => html(_t || (_t = _`
+		<nav><slot></slot></nav>
+    `));
+
+const vividSidenav = Sidenav.compose({
+  baseName: 'sidenav',
+  template: SidenavTemplate
+});
+designSystem.register(vividSidenav());
+
+export { vividSidenav };

package/sidenav-item/index.js

@@ -18,10 +18,9 @@ import '../shared/web.dom-collections.iterator.js';
 import '../shared/object-keys.js';
 import '../shared/anchor.js';
 import '../shared/aria-global.js';
-import '../shared/ref.js';
 import '../shared/focus2.js';
 
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: transparent;\n  border-radius: 6px;\n  color: var(--vvd-color-on-canvas);\n  gap: 8px;\n  -webkit-hyphens: auto;\n          hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\n  padding-block: 10px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control.icon-only {\n  display: flex;\n  block-size: 40px;\n  inline-size: 40px;\n  place-content: center;\n}\n\n.control:focus {\n  background-color: var(--vvd-color-neutral-20);\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  position: relative;\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  background-color: var(--_appearance-color-fill);\n  border-radius: 6px;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  gap: 8px;\n  -webkit-hyphens: auto;\n          hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\n  padding-block: 10px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-soft);\n  --_appearance-color-outline: transaprent;\n}\n.control {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-faint: var(--vvd-color-neutral-10);\n  --_connotation-color-soft: var(--vvd-color-neutral-20);\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control.icon-only {\n  display: flex;\n  block-size: 40px;\n  inline-size: 40px;\n  place-content: center;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}";
 styleInject(css_248z);
 
 class SidenavItem extends TextAnchor {}
@@ -36,10 +35,7 @@ const SidenavItemTemplate = (context, definition) => html(_t || (_t = _`
 const vividSidenavItem = SidenavItem.compose({
   baseName: 'sidenav-item',
   template: SidenavItemTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+  styles: css_248z
 });
 designSystem.register(vividSidenavItem());
 

package/text-anchor/index.js

@@ -12,7 +12,6 @@ import '../shared/_has.js';
 import '../shared/anchor.js';
 import '../shared/apply-mixins.js';
 import '../shared/aria-global.js';
-import '../shared/ref.js';
 import '../shared/focus2.js';
 import '../shared/focus.js';
 import '../shared/class-names.js';

package/text-field/index.js

@@ -6,11 +6,10 @@ import { b as AffixIcon, a as affixIconTemplateFactory } from '../shared/affix.j
 import '../shared/focus.js';
 import { a as applyMixins } from '../shared/apply-mixins.js';
 import { F as FormAssociated } from '../shared/form-associated.js';
-import { A as ARIAGlobalStatesAndProperties, S as StartEnd } from '../shared/aria-global.js';
+import { A as ARIAGlobalStatesAndProperties, S as StartEnd, r as ref } from '../shared/aria-global.js';
 import { s as styleInject } from '../shared/style-inject.es.js';
 import { f as focusTemplateFactory } from '../shared/focus2.js';
 import { w as when } from '../shared/when.js';
-import { r as ref } from '../shared/ref.js';
 import { c as classNames } from '../shared/class-names.js';
 import '../shared/icon.js';
 import '../shared/export.js';

package/tooltip/index.js

@@ -19,7 +19,6 @@ import '../shared/button.js';
 import '../shared/apply-mixins.js';
 import '../shared/form-associated.js';
 import '../shared/aria-global.js';
-import '../shared/ref.js';
 import '../shared/focus2.js';
 import '../shared/object-keys.js';
 import '../shared/es.object.assign.js';
@@ -51,9 +50,9 @@ let _2 = t => t,
 const getClasses = _ => classNames('control');
 
 const TooltipTemplate = () => html(_t || (_t = _2`
-<vwc-popup class="${0}" arrow alternate="true" 
+<vwc-popup class="${0}" arrow alternate
 corner=${0} open=${0} anchor=${0}
-  exportparts="vvd-theme-alternate">
+  exportparts="vvd-theme-alternate" role="tooltip">
   <div class="tooltip">
     <header part="vvd-theme-alternate" class="tooltip-header">
       <div class="tooltip-text">${0}</div>

package/shared/ref.js

@@ -1,41 +0,0 @@
-import { A as AttachedBehaviorHTMLDirective } from './index.js';
-
-/**
- * The runtime behavior for template references.
- * @public
- */
-class RefBehavior {
-    /**
-     * Creates an instance of RefBehavior.
-     * @param target - The element to reference.
-     * @param propertyName - The name of the property to assign the reference to.
-     */
-    constructor(target, propertyName) {
-        this.target = target;
-        this.propertyName = propertyName;
-    }
-    /**
-     * Bind this behavior to the source.
-     * @param source - The source to bind to.
-     * @param context - The execution context that the binding is operating within.
-     */
-    bind(source) {
-        source[this.propertyName] = this.target;
-    }
-    /**
-     * Unbinds this behavior from the source.
-     * @param source - The source to unbind from.
-     */
-    /* eslint-disable-next-line @typescript-eslint/no-empty-function */
-    unbind() { }
-}
-/**
- * A directive that observes the updates a property with a reference to the element.
- * @param propertyName - The name of the property to assign the reference to.
- * @public
- */
-function ref(propertyName) {
-    return new AttachedBehaviorHTMLDirective("fast-ref", RefBehavior, propertyName);
-}
-
-export { ref as r };