@vonage/vivid 3.0.0-next.43 → 3.0.0-next.46

package/{sidenav-disclosure → nav-disclosure}/index.js

@@ -20,13 +20,13 @@ import '../shared/object-keys.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: 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  cursor: pointer;\n  gap: 8px;\n  -webkit-hyphens: auto;\n          hyphens: auto;\n  inline-size: 100%;\n  min-block-size: 40px;\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@supports ((-webkit-user-select: none) or (user-select: none)) {\n  .control {\n    -webkit-user-select: none;\n            user-select: none;\n  }\n}\n.control .toggleIcon {\n  margin-inline-start: auto;\n}\n\n.control:not(:focus-visible) .focus-indicator {\n  display: none;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n.content {\n  border-inline-start: 1px solid var(--vvd-color-neutral-30);\n  margin-inline-start: 20px;\n  padding-inline-start: 12px;\n}\n\ndetails > summary {\n  list-style: none;\n}\n\ndetails > summary::-webkit-details-marker {\n  display: none;\n}";
 styleInject(css_248z);
 
-var _SidenavDisclosure_onToggle;
-class SidenavDisclosure extends FoundationElement {
+var _NavDisclosure_onToggle;
+class NavDisclosure extends FoundationElement {
   constructor() {
     super(...arguments);
     this.open = false;
 
-    _SidenavDisclosure_onToggle.set(this, () => {
+    _NavDisclosure_onToggle.set(this, () => {
       this.open = this.details.open;
       this.$emit('toggle');
     });
@@ -34,31 +34,31 @@ class SidenavDisclosure extends FoundationElement {
 
   connectedCallback() {
     super.connectedCallback();
-    this.details.addEventListener('toggle', __classPrivateFieldGet(this, _SidenavDisclosure_onToggle, "f"));
+    this.details.addEventListener('toggle', __classPrivateFieldGet(this, _NavDisclosure_onToggle, "f"));
     this.details.open = this.open;
   }
 
   disconnectedCallback() {
     super.disconnectedCallback();
-    this.details.removeEventListener('toggle', __classPrivateFieldGet(this, _SidenavDisclosure_onToggle, "f"));
+    this.details.removeEventListener('toggle', __classPrivateFieldGet(this, _NavDisclosure_onToggle, "f"));
   }
 
 }
-_SidenavDisclosure_onToggle = new WeakMap();
+_NavDisclosure_onToggle = new WeakMap();
 
-__decorate([attr, __metadata("design:type", String)], SidenavDisclosure.prototype, "label", void 0);
+__decorate([attr, __metadata("design:type", String)], NavDisclosure.prototype, "label", void 0);
 
 __decorate([attr({
   mode: 'boolean'
-}), __metadata("design:type", Object)], SidenavDisclosure.prototype, "open", void 0);
+}), __metadata("design:type", Object)], NavDisclosure.prototype, "open", void 0);
 
-applyMixins(SidenavDisclosure, AffixIcon);
+applyMixins(NavDisclosure, AffixIcon);
 
 let _ = t => t,
     _t,
     _t2,
     _t3;
-const SidenavDisclosureTemplate = context => {
+const NavDisclosureTemplate = context => {
   const affixIconTemplate = affixIconTemplateFactory(context);
   const focusTemplate = focusTemplateFactory(context);
   return html(_t || (_t = _`<details class="base" ${0} ?open=${0}>
@@ -80,11 +80,11 @@ const SidenavDisclosureTemplate = context => {
 	`), ref('details'), x => x.open, x => x.open, x => affixIconTemplate(x.icon), x => x.label, when(x => x.open, html(_t2 || (_t2 = _`<vwc-icon class="toggleIcon" type='chevron-up-solid'></vwc-icon>`))), when(x => !x.open, html(_t3 || (_t3 = _`<vwc-icon class="toggleIcon" type='chevron-down-solid'></vwc-icon>`))), () => focusTemplate);
 };
 
-const vividSidenavDisclosure = SidenavDisclosure.compose({
-  baseName: 'sidenav-disclosure',
-  template: SidenavDisclosureTemplate,
+const vividNavDisclosure = NavDisclosure.compose({
+  baseName: 'nav-disclosure',
+  template: NavDisclosureTemplate,
   styles: css_248z
 });
-designSystem.register(vividSidenavDisclosure());
+designSystem.register(vividNavDisclosure());
 
-export { vividSidenavDisclosure };
+export { vividNavDisclosure };

package/{sidenav-item → nav-item}/index.js

@@ -24,20 +24,20 @@ 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: 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 {}
-applyMixins(SidenavItem, AffixIcon);
+class NavItem extends TextAnchor {}
+applyMixins(NavItem, AffixIcon);
 
 let _ = t => t,
     _t;
-const SidenavItemTemplate = (context, definition) => html(_t || (_t = _`
+const NavItemTemplate = (context, definition) => html(_t || (_t = _`
       ${0}
     `), textAnchorTemplate(context));
 
-const vividSidenavItem = SidenavItem.compose({
-  baseName: 'sidenav-item',
-  template: SidenavItemTemplate,
+const vividNavItem = NavItem.compose({
+  baseName: 'nav-item',
+  template: NavItemTemplate,
   styles: css_248z
 });
-designSystem.register(vividSidenavItem());
+designSystem.register(vividNavItem());
 
-export { vividSidenavItem };
+export { vividNavItem };

package/package.json

@@ -1,9 +1,19 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.43",
+  "version": "3.0.0-next.46",
   "type": "module",
   "module": "./index.esm.js",
   "main": "./index.js",
+  "homepage": "https://vivid.deno.dev",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/vonage/vivid-3",
+    "directory": "libs/components"
+  },
+  "bugs": {
+    "url": "https://github.com/Vonage/vivid-3/issues"
+  },
+  "license": "Apache-2.0",
   "exports": {
     "./accordion": "./accordion",
     "./accordion-item": "./accordion-item",
@@ -25,15 +35,16 @@
     "./progress": "./progress",
     "./progress-ring": "./progress-ring",
     "./side-drawer": "./side-drawer",
-    "./sidenav": "./sidenav",
-    "./sidenav-item": "./sidenav-item",
-    "./sidenav-disclosure": "./sidenav-disclosure",
+    "./nav": "./nav",
+    "./nav-item": "./nav-item",
+    "./nav-disclosure": "./nav-disclosure",
     "./text": "./text",
     "./text-field": "./text-field",
     "./tooltip": "./tooltip",
     "./checkbox": "./checkbox",
     "./dialog": "./dialog",
-    "./divider": "./divider"
+    "./divider": "./divider",
+    "./menu": "./menu"
   },
   "typings": "./index.d.ts",
   "dependencies": {