@vonage/vivid 3.0.0-next.9 → 3.0.0-next.91

package/nav-disclosure/index.js

@@ -0,0 +1,81 @@
+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, 03 Nov 2022 17:26:06 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-typography-base);\n  gap: 8px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\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: transparent;\n  --_appearance-color-outline: transparent;\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: transparent;\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: transparent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\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,45 @@
+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/start-end.js';
+import '../shared/ref.js';
+import '../shared/focus2.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Nov 2022 17:26:06 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-typography-base);\n  gap: 8px;\n  hyphens: auto;\n  inline-size: 100%;\n  min-block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\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: transparent;\n  --_appearance-color-outline: transparent;\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: transparent;\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: transparent;\n}\n.control:where(.selected, [aria-current]):where(:not(:disabled, .disabled, :hover, .hover)) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transparent;\n}\n.control:where(.selected, [aria-current]):where(:hover, .hover) {\n  --_appearance-color-text: var(--_connotation-color-primary-text);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transparent;\n}\n.control {\n  --_connotation-color-primary: var(--vvd-color-canvas-text);\n  --_connotation-color-primary-text: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-800);\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: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\n  inline-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\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,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+designSystem.register(vividNavItem());
+
+export { vividNavItem };

package/note/index.js

@@ -0,0 +1,58 @@
+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 '../shared/web.dom-collections.iterator.js';
+import '../shared/icon.js';
+import { a as applyMixins } from '../shared/apply-mixins.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/export.js';
+import '../shared/object-keys.js';
+import '../shared/iterators.js';
+import '../shared/to-string.js';
+import '../shared/_has.js';
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Nov 2022 17:26:06 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-typography-base-bold);\n}\n.text .message {\n  font: var(--vvd-typography-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 };