@vonage/vivid 3.0.0-next.6 → 3.0.0-next.60

package/nav-disclosure/index.js

@@ -0,0 +1,88 @@
+import '../icon/index.js';
+import '../focus/index.js';
+import { F as FoundationElement, c as __classPrivateFieldGet, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import '../shared/web.dom-collections.iterator.js';
+import { b as AffixIcon, a as affixIconTemplateFactory } from '../shared/affix.js';
+import { a as applyMixins } from '../shared/apply-mixins.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 '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/_has.js';
+import '../shared/class-names.js';
+import '../shared/focus.js';
+import '../shared/object-keys.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 09:43:08 GMT\n */\n.control {\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  font: var(--vvd-font-base);\n  gap: 8px;\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-canvas-text);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports (user-select: none) {\n  .control {\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-200);\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}";
+
+var _NavDisclosure_onToggle;
+class NavDisclosure extends FoundationElement {
+  constructor() {
+    super(...arguments);
+    this.open = false;
+
+    _NavDisclosure_onToggle.set(this, () => {
+      this.open = this.details.open;
+      this.$emit('toggle');
+    });
+  }
+
+  connectedCallback() {
+    super.connectedCallback();
+    this.details.addEventListener('toggle', __classPrivateFieldGet(this, _NavDisclosure_onToggle, "f"));
+    this.details.open = this.open;
+  }
+
+  disconnectedCallback() {
+    super.disconnectedCallback();
+    this.details.removeEventListener('toggle', __classPrivateFieldGet(this, _NavDisclosure_onToggle, "f"));
+  }
+
+}
+_NavDisclosure_onToggle = new WeakMap();
+
+__decorate([attr, __metadata("design:type", String)], NavDisclosure.prototype, "label", void 0);
+
+__decorate([attr({
+  mode: 'boolean'
+}), __metadata("design:type", Object)], NavDisclosure.prototype, "open", void 0);
+
+applyMixins(NavDisclosure, AffixIcon);
+
+let _ = t => t,
+    _t,
+    _t2,
+    _t3;
+const NavDisclosureTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t || (_t = _`<details class="base" ${0} ?open=${0}>
+        <summary class="control"
+            role="button"
+            aria-controls="disclosure-content"
+			aria-expanded="${0}"
+        >
+            ${0}
+            ${0}
+			${0}
+			${0}
+			${0}
+        </summary>
+        <div class="content" id="disclosure-content">
+			<slot></slot>
+		</div>
+    </details>
+	`), 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 vividNavDisclosure = NavDisclosure.compose({
+  baseName: 'nav-disclosure',
+  template: NavDisclosureTemplate,
+  styles: css_248z
+});
+designSystem.register(vividNavDisclosure());
+
+export { vividNavDisclosure };

package/nav-item/index.js

@@ -0,0 +1,41 @@
+import '../icon/index.js';
+import '../focus/index.js';
+import { h as html, d as designSystem } from '../shared/index.js';
+import { b as AffixIcon } from '../shared/affix.js';
+import { T as TextAnchor } from '../shared/text-anchor.js';
+import { a as applyMixins } from '../shared/apply-mixins.js';
+import { t as textAnchorTemplate } from '../shared/text-anchor.template.js';
+import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/_has.js';
+import '../shared/when.js';
+import '../shared/class-names.js';
+import '../shared/focus.js';
+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 Thu, 15 Sep 2022 09:43:08 GMT\n */\n.control {\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  font: var(--vvd-font-base);\n  gap: 8px;\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-canvas-text);\n  --_connotation-color-faint: var(--vvd-color-neutral-50);\n  --_connotation-color-soft: var(--vvd-color-neutral-100);\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}";
+
+class NavItem extends TextAnchor {}
+applyMixins(NavItem, AffixIcon);
+
+let _ = t => t,
+    _t;
+const NavItemTemplate = (context, definition) => html(_t || (_t = _`
+      ${0}
+    `), textAnchorTemplate(context));
+
+const vividNavItem = NavItem.compose({
+  baseName: 'nav-item',
+  template: NavItemTemplate,
+  styles: css_248z
+});
+designSystem.register(vividNavItem());
+
+export { vividNavItem };

package/note/index.js

@@ -0,0 +1,66 @@
+import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { b as AffixIcon } from '../shared/affix.js';
+import '../shared/focus.js';
+import { a as applyMixins } from '../shared/apply-mixins.js';
+import '../shared/web.dom-collections.iterator.js';
+import '../icon/index.js';
+import { C as Connotation } from '../shared/enums.js';
+import { w as when } from '../shared/when.js';
+import { c as classNames } from '../shared/class-names.js';
+import '../shared/icon.js';
+import '../shared/export.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/_has.js';
+import '../shared/object-keys.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 15 Sep 2022 09:43:08 GMT\n */\n.base {\n  display: flex;\n  align-items: stretch;\n  padding: 20px;\n  border-left: 8px solid var(--_connotation-color-primary);\n  background-color: var(--vvd-color-canvas);\n  border-radius: 6px;\n  box-shadow: inset 0 1px 0 0 var(--vvd-color-neutral-300), inset -1px 0 0 0 var(--vvd-color-neutral-300), inset 0 -1px 0 0 var(--vvd-color-neutral-300);\n  color: var(--vvd-color-canvas-text);\n}\n.base.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success-500);\n}\n.base.connotation-information {\n  --_connotation-color-primary: var(--vvd-color-information-500);\n}\n.base.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert-500);\n}\n.base.connotation-warning {\n  --_connotation-color-primary: var(--vvd-color-warning-500);\n}\n.base:not(.connotation-success, .connotation-information, .connotation-alert, .connotation-warning) {\n  --_connotation-color-primary: var(--vvd-color-announcement-500);\n}\n@supports (contain: content) {\n  .base {\n    contain: content;\n  }\n}\n@supports not (contain: content) {\n  .base {\n    overflow: hidden;\n  }\n}\n\n.icon {\n  align-self: flex-start;\n  font-size: 24px;\n  margin-inline-end: 16px;\n}\n\n.text {\n  display: flex;\n  min-height: 24px;\n  flex: 1;\n  flex-direction: column;\n  justify-content: center;\n  gap: 4px;\n  text-align: start;\n}\n.text .headline {\n  font: var(--vvd-font-base-bold);\n}\n.text .message {\n  font: var(--vvd-font-base);\n}";
+
+class Note extends FoundationElement {}
+
+__decorate([attr, __metadata("design:type", String)], Note.prototype, "headline", void 0);
+
+__decorate([attr, __metadata("design:type", String)], Note.prototype, "connotation", void 0);
+
+applyMixins(Note, AffixIcon);
+
+let _ = t => t,
+    _t,
+    _t2,
+    _t3;
+const connotationIconMap = new Map([[Connotation.Information, 'info-solid'], [Connotation.Announcement, 'megaphone-solid'], [Connotation.Success, 'check-circle-solid'], [Connotation.Warning, 'warning-solid'], [Connotation.Alert, 'error-solid']]);
+
+const getClasses = ({
+  connotation
+}) => classNames('base', `connotation-${connotation}`);
+
+function getHeaderTemplate() {
+  return html(_t || (_t = _`<div class="headline">${0}</div>`), x => x.headline);
+}
+
+function getIconType(note) {
+  return note.icon ? note.icon : note.connotation ? connotationIconMap.get(note.connotation) : 'megaphone-solid';
+}
+
+function getIconTemplate() {
+  return html(_t2 || (_t2 = _`<vwc-icon class="icon" type="${0}"></vwc-icon>`), getIconType);
+}
+
+const NoteTemplate = () => html(_t3 || (_t3 = _`
+    <div class="${0}">
+      ${0}
+			<div class="text">
+	        ${0}
+			    <slot class="message"></slot>
+			</div>
+    </div>
+`), getClasses, getIconTemplate(), when(x => x.headline, getHeaderTemplate()));
+
+const vividNote = Note.compose({
+  baseName: 'note',
+  template: NoteTemplate,
+  styles: css_248z
+});
+designSystem.register(vividNote());
+
+export { vividNote };

package/package.json

@@ -1,19 +1,60 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.6",
+  "version": "3.0.0-next.60",
   "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": {
-    "import": "./index.js"
+    "./accordion": "./accordion",
+    "./accordion-item": "./accordion-item",
+    "./action-group": "./action-group",
+    "./badge": "./badge",
+    "./banner": "./banner",
+    "./breadcrumb": "./breadcrumb",
+    "./breadcrumb-item": "./breadcrumb-item",
+    "./button": "./button",
+    "./calendar": "./calendar",
+    "./calendar-event": "./calendar-event",
+    "./card": "./card",
+    "./elevation": "./elevation",
+    "./fab": "./fab",
+    "./icon": "./icon",
+    "./layout": "./layout",
+    "./note": "./note",
+    "./popup": "./popup",
+    "./progress": "./progress",
+    "./progress-ring": "./progress-ring",
+    "./side-drawer": "./side-drawer",
+    "./nav": "./nav",
+    "./nav-item": "./nav-item",
+    "./nav-disclosure": "./nav-disclosure",
+    "./text-field": "./text-field",
+    "./tooltip": "./tooltip",
+    "./checkbox": "./checkbox",
+    "./dialog": "./dialog",
+    "./divider": "./divider",
+    "./menu": "./menu",
+    "./avatar": "./avatar",
+    "./text-area": "./text-area"
   },
-  "main": "./index.umd.js",
-  "module": "./index.esm.js",
   "typings": "./index.d.ts",
   "dependencies": {
-    "@microsoft/fast-element": "^1.9.0",
-    "@microsoft/fast-foundation": "^2.41.1",
-    "@microsoft/fast-web-utilities": "^5.2.0",
+    "@microsoft/fast-element": "^1.10.5",
+    "@microsoft/fast-foundation": "^2.46.14",
+    "@microsoft/fast-web-utilities": "^5.4.1",
     "ramda": "^0.27.2",
-    "@floating-ui/dom": "^0.4.0"
+    "dialog-polyfill": "^0.5.6",
+    "@floating-ui/dom": "^0.5.4"
   },
   "peerDependencies": {}
 }