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

package/text-field/index.js

@@ -0,0 +1,129 @@
+import '../icon/index.js';
+import '../focus/index.js';
+import { _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
+import { b as AffixIcon, a as affixIconTemplateFactory } from '../shared/affix.js';
+import '../shared/focus.js';
+import { T as TextField$1, f as formElements, g as getFeedbackTemplate } from '../shared/form-elements.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 { 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/web.dom-collections.iterator.js';
+import '../shared/object-keys.js';
+import '../shared/form-associated.js';
+import '../shared/key-codes.js';
+import '../shared/aria-global.js';
+import '../shared/start-end.js';
+
+let TextField = class TextField extends TextField$1 {};
+__decorate([attr, __metadata("design:type", String)], TextField.prototype, "appearance", void 0);
+__decorate([attr, __metadata("design:type", String)], TextField.prototype, "shape", void 0);
+__decorate([attr, __metadata("design:type", String)], TextField.prototype, "autoComplete", void 0);
+TextField = __decorate([formElements], TextField);
+applyMixins(TextField, AffixIcon);
+
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Nov 2022 17:18:46 GMT\n */\n:host {\n  display: inline-block;\n}\n\n.base {\n  display: inline-grid;\n  width: 100%;\n  gap: 4px;\n  grid-template-columns: min-content 1fr max-content;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-canvas-text);\n}\n.base:where(:hover, .hover):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: var(--_connotation-color-primary);\n  --_appearance-color-fill: var(--_connotation-color-faint);\n  --_appearance-color-outline: transparent;\n}\n.base:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:disabled, .disabled).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-neutral-100);\n  --_appearance-color-outline: var(--vvd-color-neutral-400);\n}\n.base:where(:readonly, .readonly):where(:not(:disabled, .disabled, :hover, .hover, :active, .active)).appearance-ghost {\n  --_appearance-color-text: var(--vvd-color-neutral-400);\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.error):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-alert-500);\n  --_appearance-color-fill: var(--vvd-color-alert-100);\n  --_appearance-color-outline: var(--vvd-color-alert-500);\n}\n.base:where(.error):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: transparent;\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n.base:where(.success):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--vvd-color-canvas-text);\n  --_appearance-color-fill: var(--vvd-color-success-100);\n  --_appearance-color-outline: var(--vvd-color-success-500);\n}\n.base:where(.success):where(:not(:disabled, .disabled)).appearance-ghost {\n  --_appearance-color-text: transparent;\n  --_appearance-color-fill: transparent;\n  --_appearance-color-outline: transparent;\n}\n@supports (user-select: none) {\n  .base {\n    user-select: none;\n  }\n}\n.base:not(.disabled) {\n  --_low-ink-color: var(--vvd-color-neutral-600);\n}\n.base.disabled {\n  --_low-ink-color: var(--vvd-color-neutral-400);\n}\n\n.label {\n  contain: inline-size;\n  font: var(--vvd-typography-base);\n  grid-column: 1/4;\n  grid-row: 1;\n}\n.char-count + .label {\n  grid-column: 1/3;\n}\n.base:not(.disabled) .label {\n  color: var(--vvd-color-canvas-text);\n}\n.base.disabled .label {\n  color: var(--vvd-color-neutral-400);\n}\n\n.char-count {\n  color: var(--_low-ink-color);\n  font: var(--vvd-typography-base);\n  grid-column: 3/4;\n}\n\n.fieldset {\n  position: relative;\n  display: flex;\n  align-items: center;\n  color: var(--_appearance-color-text);\n  grid-column: 1/4;\n  transition: color 0.2s;\n  /* Shape */\n}\n.success .fieldset {\n  --focus-stroke-color: var(--vvd-color-success-500);\n}\n.error .fieldset {\n  --focus-stroke-color: var(--vvd-color-alert-500);\n}\n.base > .fieldset {\n  block-size: calc(1px * (40 + 8 * clamp(-1, var(--vvd-size-density, 0), 1)));\n}\n.base:not(.shape-pill) .fieldset {\n  border-radius: 6px;\n}\n.base.shape-pill .fieldset {\n  border-radius: 24px;\n}\n\n.control {\n  width: 100%;\n  border: 0 none;\n  background-color: var(--_appearance-color-fill);\n  block-size: 100%;\n  border-radius: inherit;\n  box-shadow: inset 0 0 0 1px var(--_appearance-color-outline);\n  color: inherit;\n  font: var(--vvd-typography-base);\n  padding-inline-end: 16px;\n  padding-inline-start: 16px;\n  transition: box-shadow 0.2s, background-color 0.2s;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n.control::placeholder {\n  color: var(--_low-ink-color);\n}\n\n.icon {\n  position: absolute;\n  z-index: 1;\n  color: var(--_low-ink-color);\n  font-size: 20px;\n  inset-inline-start: 16px;\n}\n.icon + .control {\n  padding-inline-start: 44px;\n}\n\n.focus-indicator {\n  --focus-stroke-gap-color: transparent;\n  pointer-events: none;\n}\n.fieldset:not(:focus-visible, :focus-within) > .focus-indicator {\n  display: none;\n}";
+
+let _ = t => t,
+  _t,
+  _t2,
+  _t3;
+const getStateClasses = ({
+  errorValidationMessage,
+  disabled,
+  value,
+  readOnly,
+  placeholder,
+  appearance,
+  shape,
+  label,
+  successText
+}) => classNames(['error', Boolean(errorValidationMessage)], ['disabled', disabled], ['has-value', Boolean(value)], ['readonly', readOnly], ['placeholder', Boolean(placeholder)], [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)], ['no-label', !label], ['success', Boolean(successText)]);
+function renderLabel() {
+  return html(_t || (_t = _`
+	  <label for="control" class="label">
+		  ${0}
+	  </label>`), x => x.label);
+}
+function renderCharCount() {
+  return html(_t2 || (_t2 = _`
+		<span class="char-count">${0} / ${0}</span>
+	`), x => x.value ? x.value.length : 0, x => x.maxlength);
+}
+const TextfieldTemplate = context => {
+  const affixIconTemplate = affixIconTemplateFactory(context);
+  const focusTemplate = focusTemplateFactory(context);
+  return html(_t3 || (_t3 = _`
+	<div class="base ${0}">
+    ${0}
+    ${0}
+    <div class="fieldset">
+      ${0}
+      <input class="control"
+            id="control"
+            @input="${0}"
+            @change="${0}"
+            ?autofocus="${0}"
+            ?disabled="${0}"
+            list="${0}"
+            maxlength="${0}"
+            minlength="${0}"
+            pattern="${0}"
+            placeholder="${0}"
+            ?readonly="${0}"
+            ?required="${0}"
+            size="${0}"
+            autocomplete="${0}"
+            name="${0}"
+            ?spellcheck="${0}"
+            :value="${0}"
+            type="${0}"
+            aria-atomic="${0}"
+            aria-busy="${0}"
+            aria-controls="${0}"
+            aria-current="${0}"
+            aria-describedby="${0}"
+            aria-details="${0}"
+            aria-disabled="${0}"
+            aria-errormessage="${0}"
+            aria-flowto="${0}"
+            aria-haspopup="${0}"
+            aria-hidden="${0}"
+            aria-invalid="${0}"
+            aria-keyshortcuts="${0}"
+            aria-label="${0}"
+            aria-labelledby="${0}"
+            aria-live="${0}"
+            aria-owns="${0}"
+            aria-relevant="${0}"
+            aria-roledescription="${0}"
+            ${0}
+      />
+      ${0}
+    </div>
+	  ${0}
+	  ${0}
+	  ${0}
+	</div>`), getStateClasses, when(x => x.charCount && x.maxlength, renderCharCount()), when(x => x.label, renderLabel()), x => affixIconTemplate(x.icon), x => x.handleTextInput(), x => x.handleChange(), x => x.autofocus, x => x.disabled, x => x.list, x => x.maxlength, x => x.minlength, x => x.pattern, x => x.placeholder, x => x.readOnly, x => x.required, x => x.size, x => x.autoComplete, x => x.name, x => x.spellcheck, x => x.value, x => x.type, x => x.ariaAtomic, x => x.ariaBusy, x => x.ariaControls, x => x.ariaCurrent, x => x.ariaDescribedby, x => x.ariaDetails, x => x.ariaDisabled, x => x.ariaErrormessage, x => x.ariaFlowto, x => x.ariaHaspopup, x => x.ariaHidden, x => x.ariaInvalid, x => x.ariaKeyshortcuts, x => x.ariaLabel, x => x.ariaLabelledby, x => x.ariaLive, x => x.ariaOwns, x => x.ariaRelevant, x => x.ariaRoledescription, ref('control'), () => focusTemplate, when(x => {
+    var _a;
+    return !x.successText && !x.errorValidationMessage && ((_a = x.helperText) === null || _a === void 0 ? void 0 : _a.length);
+  }, getFeedbackTemplate('helper', context)), when(x => !x.successText && x.errorValidationMessage, getFeedbackTemplate('error', context)), when(x => x.successText, getFeedbackTemplate('success', context)));
+};
+
+const vividTextfield = TextField.compose({
+  baseName: 'text-field',
+  template: TextfieldTemplate,
+  styles: css_248z,
+  shadowOptions: {
+    delegatesFocus: true
+  }
+});
+designSystem.register(vividTextfield());
+
+export { vividTextfield };

package/tooltip/index.js

@@ -1,59 +1,58 @@
-import '../popup/index.js';
+import '../shared/index5.js';
 import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.js';
 import '../shared/web.dom-collections.iterator.js';
 import { c as classNames } from '../shared/class-names.js';
-import '../elevation/index.js';
-import '../button/index.js';
+import '../shared/index3.js';
+import '../shared/index2.js';
 import '../icon/index.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/index2.js';
+import '../focus/index.js';
+import '../shared/focus.js';
 import '../shared/affix.js';
+import '../shared/button.js';
 import '../shared/apply-mixins.js';
+import '../shared/form-associated.js';
+import '../shared/key-codes.js';
 import '../shared/aria-global.js';
+import '../shared/start-end.js';
+import '../shared/ref.js';
+import '../shared/focus2.js';
 import '../shared/es.object.assign.js';
+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  pointer-events: none;\n}\n\n.tooltip {\n  width: var(--tooltip-inline-size, 240px);\n}\n.tooltip-text {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  padding: 8px 12px;\n  color: var(--vvd-color-on-canvas);\n}";
-styleInject(css_248z);
+var css_248z = "/**\n * Do not edit directly\n * Generated on Thu, 03 Nov 2022 17:18:46 GMT\n */\n.control {\n  pointer-events: none;\n}\n\n.tooltip {\n  width: var(--tooltip-inline-size, 240px);\n}\n.tooltip-text {\n  padding: 8px 12px;\n  color: var(--vvd-color-canvas-text);\n  font: var(--vvd-typography-base-bold);\n}";
 
 class Tooltip extends FoundationElement {
   constructor() {
     super(...arguments);
-    this.text = '';
     this.open = false;
   }
-
 }
-
-__decorate([attr({
-  mode: 'fromView'
-}), __metadata("design:type", Object)], Tooltip.prototype, "text", void 0);
-
+__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "text", void 0);
 __decorate([attr({
   mode: 'boolean'
 }), __metadata("design:type", Object)], Tooltip.prototype, "open", void 0);
-
-__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "corner", void 0);
-
+__decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "placement", void 0);
 __decorate([attr, __metadata("design:type", String)], Tooltip.prototype, "anchor", void 0);
 
 let _2 = t => t,
-    _t;
-
+  _t;
 const getClasses = _ => classNames('control');
-
 const TooltipTemplate = () => html(_t || (_t = _2`
-<vwc-popup class="${0}" arrow alternate="true" 
-corner=${0} open=${0} anchor=${0}
-  exportparts="vvd-theme-alternate">
+<vwc-popup class="${0}" arrow alternate
+placement=${0} open=${0} anchor=${0}
+  exportparts="vvd-theme-alternate" role="tooltip">
   <div class="tooltip">
     <header part="vvd-theme-alternate" class="tooltip-header">
       <div class="tooltip-text">${0}</div>
     </header>
   </div>
-</vwc-popup>`), getClasses, x => x.corner, x => x.open, x => x.anchor, x => x.text);
+</vwc-popup>`), getClasses, x => x.placement, x => x.open, x => x.anchor, x => x.text);
 
 const vividTooltip = Tooltip.compose({
   baseName: 'tooltip',

package/lib/text/text.d.ts

@@ -1,10 +0,0 @@
-import { FoundationElement } from '@microsoft/fast-foundation';
-import type { Connotation } from '../enums.js';
-import type { VVDFontFace } from '../../../../../node_modules/@vonage/vivid-tokens/dist/types/typography/font-faces';
-declare type TextConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Announcement | Connotation.Info>;
-export declare class Text extends FoundationElement {
-    connotation?: TextConnotation;
-    fontFace?: VVDFontFace;
-    tight: boolean;
-}
-export {};

package/shared/style-inject.es.js

@@ -1,28 +0,0 @@
-function styleInject(css, ref) {
-  if ( ref === void 0 ) ref = {};
-  var insertAt = ref.insertAt;
-
-  if (!css || typeof document === 'undefined') { return; }
-
-  var head = document.head || document.getElementsByTagName('head')[0];
-  var style = document.createElement('style');
-  style.type = 'text/css';
-
-  if (insertAt === 'top') {
-    if (head.firstChild) {
-      head.insertBefore(style, head.firstChild);
-    } else {
-      head.appendChild(style);
-    }
-  } else {
-    head.appendChild(style);
-  }
-
-  if (style.styleSheet) {
-    style.styleSheet.cssText = css;
-  } else {
-    style.appendChild(document.createTextNode(css));
-  }
-}
-
-export { styleInject as s };

package/sidenav-item/index.js

@@ -1,38 +0,0 @@
-import '../icon/index.js';
-import { h as html, d as designSystem } from '../shared/index.js';
-import { s as styleInject } from '../shared/style-inject.es.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/web.dom-collections.iterator.js';
-import '../shared/_has.js';
-import '../shared/when.js';
-import '../shared/class-names.js';
-import '../shared/anchor.js';
-import '../shared/aria-global.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  outline: 0 none;\n  padding-block: 10px;\n  padding-inline: 8px;\n  text-decoration: none;\n  vertical-align: middle;\n  word-break: break-word;\n}\n:host, .control {\n  outline: 0 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:focus-visible {\n  box-shadow: inset 0 0 0 1px darkorange;\n}\n\n.icon {\n  font-size: 20px;\n}";
-styleInject(css_248z);
-
-class SidenavItem extends TextAnchor {}
-applyMixins(SidenavItem, AffixIcon);
-
-let _ = t => t,
-    _t;
-const SidenavItemTemplate = (context, definition) => html(_t || (_t = _`
-      ${0}
-    `), textAnchorTemplate(context));
-
-const vividSidenavItem = SidenavItem.compose({
-  baseName: 'sidenav-item',
-  template: SidenavItemTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
-});
-designSystem.register(vividSidenavItem());
-
-export { vividSidenavItem };

package/styles/themes/dark.css

@@ -1,205 +0,0 @@
-:root, .vvd-theme-main, ::part(vvd-theme-main) {
-  --vvd-sizing-4px-scale-3xs: 8px;
-  --vvd-sizing-4px-scale-2xs: 12px;
-  --vvd-sizing-4px-scale-xs: 16px;
-  --vvd-sizing-4px-scale-sm: 20px;
-  --vvd-sizing-4px-scale-md: 24px;
-  --vvd-sizing-4px-scale-lg: 28px;
-  --vvd-sizing-4px-scale-xl: 32px;
-  --vvd-sizing-4px-scale-2xl: 36px;
-  --vvd-sizing-4px-scale-3xl: 40px;
-  --vvd-sizing-8px-scale-3xs: 8px;
-  --vvd-sizing-8px-scale-2xs: 16px;
-  --vvd-sizing-8px-scale-xs: 24px;
-  --vvd-sizing-8px-scale-sm: 32px;
-  --vvd-sizing-8px-scale-md: 40px;
-  --vvd-sizing-8px-scale-lg: 48px;
-  --vvd-sizing-8px-scale-xl: 56px;
-  --vvd-sizing-8px-scale-2xl: 64px;
-  --vvd-sizing-8px-scale-3xl: 72px;
-  --vvd-color-surface-0dp: rgba(13, 13, 13, 1);
-  --vvd-color-surface-2dp: rgba(28, 28, 28, 1);
-  --vvd-color-surface-4dp: rgba(32, 32, 32, 1);
-  --vvd-color-surface-8dp: rgba(37, 37, 37, 1);
-  --vvd-color-surface-12dp: rgba(42, 42, 42, 1);
-  --vvd-color-surface-16dp: rgba(47, 47, 47, 1);
-  --vvd-color-surface-24dp: rgba(52, 52, 52, 1);
-  --vvd-color-canvas: rgb(13,13,13);
-  --vvd-color-on-canvas: rgb(255,255,255);
-  --vvd-color-primary: rgb(255,255,255);
-  --vvd-color-on-primary: rgb(0,0,0);
-  --vvd-color-neutral: rgb(146,146,146);
-  --vvd-color-on-neutral: rgb(0,0,0);
-  --vvd-color-neutral-10: rgb(26,26,26);
-  --vvd-color-neutral-20: rgb(51,51,51);
-  --vvd-color-neutral-30: rgb(77,77,77);
-  --vvd-color-neutral-40: rgb(102,102,102);
-  --vvd-color-neutral-50: rgb(117,117,117);
-  --vvd-color-neutral-70: rgb(179,179,179);
-  --vvd-color-neutral-80: rgb(204,204,204);
-  --vvd-color-neutral-90: rgb(230,230,230);
-  --vvd-color-cta: rgb(178,123,242);
-  --vvd-color-on-cta: rgb(0,0,0);
-  --vvd-color-cta-10: rgb(38,4,77);
-  --vvd-color-cta-20: rgb(68,2,145);
-  --vvd-color-cta-30: rgb(100,5,209);
-  --vvd-color-cta-70: rgb(203,161,250);
-  --vvd-color-cta-80: rgb(220,193,252);
-  --vvd-color-cta-90: rgb(236,226,250);
-  --vvd-color-success: rgb(48,168,73);
-  --vvd-color-on-success: rgb(0,0,0);
-  --vvd-color-success-10: rgb(10,30,17);
-  --vvd-color-success-20: rgb(24,58,30);
-  --vvd-color-success-30: rgb(21,89,35);
-  --vvd-color-success-70: rgb(83,202,106);
-  --vvd-color-success-80: rgb(134,224,144);
-  --vvd-color-success-90: rgb(207,238,212);
-  --vvd-color-alert: rgb(247,89,89);
-  --vvd-color-on-alert: rgb(0,0,0);
-  --vvd-color-alert-10: rgb(62,0,4);
-  --vvd-color-alert-20: rgb(110,0,0);
-  --vvd-color-alert-30: rgb(159,2,2);
-  --vvd-color-alert-70: rgb(254,150,150);
-  --vvd-color-alert-80: rgb(255,187,187);
-  --vvd-color-alert-90: rgb(254,223,223);
-  --vvd-color-warning: rgb(224,121,2);
-  --vvd-color-on-warning: rgb(0,0,0);
-  --vvd-color-warning-10: rgb(42,21,2);
-  --vvd-color-warning-20: rgb(82,40,1);
-  --vvd-color-warning-30: rgb(128,56,7);
-  --vvd-color-warning-70: rgb(250,159,0);
-  --vvd-color-warning-80: rgb(255,195,33);
-  --vvd-color-warning-90: rgb(253,231,109);
-  --vvd-color-info: rgb(41,151,240);
-  --vvd-color-on-info: rgb(0,0,0);
-  --vvd-color-info-10: rgb(7,25,57);
-  --vvd-color-info-20: rgb(14,48,109);
-  --vvd-color-info-30: rgb(9,74,158);
-  --vvd-color-info-70: rgb(101,186,255);
-  --vvd-color-info-80: rgb(157,210,254);
-  --vvd-color-info-90: rgb(211,233,252);
-  --vvd-color-announcement: rgb(229,96,187);
-  --vvd-color-on-announcement: rgb(0,0,0);
-  --vvd-color-announcement-10: rgb(50,8,44);
-  --vvd-color-announcement-20: rgb(98,2,86);
-  --vvd-color-announcement-30: rgb(143,22,105);
-  --vvd-color-announcement-70: rgb(251,143,216);
-  --vvd-color-announcement-80: rgb(248,185,231);
-  --vvd-color-announcement-90: rgb(255,220,247);
-  --vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(77, 77, 77, 1)) drop-shadow(0 1px 0 rgba(77, 77, 77, 1)) drop-shadow(0 -1px 0 rgba(77, 77, 77, 1)) drop-shadow(-1px 0 0 rgba(77, 77, 77, 1));
-  --vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.25)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.25));
-  --vvd-shadow-surface-4dp: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.25)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
-  --vvd-shadow-surface-8dp: drop-shadow(0 2px 16px rgba(19, 20, 21, 0.25)) drop-shadow(0 8px 8px rgba(19, 20, 21, 0.25)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.25));
-  --vvd-shadow-surface-12dp: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.25)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.25)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.25));
-  --vvd-shadow-surface-16dp: drop-shadow(0 6px 32px rgba(0, 0, 0, 0.25)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.25)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.25));
-  --vvd-shadow-surface-24dp: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.25)) drop-shadow(0 24px 32px rgba(0, 0, 0, 0.25)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.25));
-}
-@supports (color-scheme: dark) {
-  :root, .vvd-theme-main, ::part(vvd-theme-main) {
-    color-scheme: dark;
-  }
-}
-
-.vvd-theme-alternate, ::part(vvd-theme-alternate) {
-  --vvd-sizing-4px-scale-3xs: 8px;
-  --vvd-sizing-4px-scale-2xs: 12px;
-  --vvd-sizing-4px-scale-xs: 16px;
-  --vvd-sizing-4px-scale-sm: 20px;
-  --vvd-sizing-4px-scale-md: 24px;
-  --vvd-sizing-4px-scale-lg: 28px;
-  --vvd-sizing-4px-scale-xl: 32px;
-  --vvd-sizing-4px-scale-2xl: 36px;
-  --vvd-sizing-4px-scale-3xl: 40px;
-  --vvd-sizing-8px-scale-3xs: 8px;
-  --vvd-sizing-8px-scale-2xs: 16px;
-  --vvd-sizing-8px-scale-xs: 24px;
-  --vvd-sizing-8px-scale-sm: 32px;
-  --vvd-sizing-8px-scale-md: 40px;
-  --vvd-sizing-8px-scale-lg: 48px;
-  --vvd-sizing-8px-scale-xl: 56px;
-  --vvd-sizing-8px-scale-2xl: 64px;
-  --vvd-sizing-8px-scale-3xl: 72px;
-  --vvd-color-surface-0dp: rgba(255, 255, 255, 1);
-  --vvd-color-surface-2dp: rgba(255, 255, 255, 1);
-  --vvd-color-surface-4dp: rgba(255, 255, 255, 1);
-  --vvd-color-surface-8dp: rgba(255, 255, 255, 1);
-  --vvd-color-surface-12dp: rgba(255, 255, 255, 1);
-  --vvd-color-surface-16dp: rgba(255, 255, 255, 1);
-  --vvd-color-surface-24dp: rgba(255, 255, 255, 1);
-  --vvd-color-canvas: rgb(255,255,255);
-  --vvd-color-on-canvas: rgb(0,0,0);
-  --vvd-color-primary: rgb(0,0,0);
-  --vvd-color-on-primary: rgb(255,255,255);
-  --vvd-color-neutral: rgb(117,117,117);
-  --vvd-color-on-neutral: rgb(255,255,255);
-  --vvd-color-neutral-10: rgb(242,242,242);
-  --vvd-color-neutral-20: rgb(230,230,230);
-  --vvd-color-neutral-30: rgb(204,204,204);
-  --vvd-color-neutral-40: rgb(179,179,179);
-  --vvd-color-neutral-50: rgb(146,146,146);
-  --vvd-color-neutral-70: rgb(102,102,102);
-  --vvd-color-neutral-80: rgb(77,77,77);
-  --vvd-color-neutral-90: rgb(51,51,51);
-  --vvd-color-cta: rgb(153,65,255);
-  --vvd-color-on-cta: rgb(255,255,255);
-  --vvd-color-cta-10: rgb(245,240,253);
-  --vvd-color-cta-20: rgb(236,226,250);
-  --vvd-color-cta-30: rgb(220,193,252);
-  --vvd-color-cta-70: rgb(135,30,255);
-  --vvd-color-cta-80: rgb(100,5,209);
-  --vvd-color-cta-90: rgb(68,2,145);
-  --vvd-color-success: rgb(28,135,49);
-  --vvd-color-on-success: rgb(255,255,255);
-  --vvd-color-success-10: rgb(225,248,229);
-  --vvd-color-success-20: rgb(207,238,212);
-  --vvd-color-success-30: rgb(134,224,144);
-  --vvd-color-success-70: rgb(22,118,41);
-  --vvd-color-success-80: rgb(21,89,35);
-  --vvd-color-success-90: rgb(24,58,30);
-  --vvd-color-alert: rgb(230,29,29);
-  --vvd-color-on-alert: rgb(255,255,255);
-  --vvd-color-alert-10: rgb(255,238,242);
-  --vvd-color-alert-20: rgb(254,223,223);
-  --vvd-color-alert-30: rgb(255,187,187);
-  --vvd-color-alert-70: rgb(205,13,13);
-  --vvd-color-alert-80: rgb(159,2,2);
-  --vvd-color-alert-90: rgb(110,0,0);
-  --vvd-color-warning: rgb(250,159,0);
-  --vvd-color-on-warning: rgb(0,0,0);
-  --vvd-color-warning-10: rgb(252,245,167);
-  --vvd-color-warning-20: rgb(253,231,109);
-  --vvd-color-warning-30: rgb(255,195,33);
-  --vvd-color-warning-70: rgb(166,76,3);
-  --vvd-color-warning-80: rgb(128,56,7);
-  --vvd-color-warning-90: rgb(82,40,1);
-  --vvd-color-info: rgb(2,118,213);
-  --vvd-color-on-info: rgb(255,255,255);
-  --vvd-color-info-10: rgb(232,244,251);
-  --vvd-color-info-20: rgb(211,233,252);
-  --vvd-color-info-30: rgb(157,210,254);
-  --vvd-color-info-70: rgb(14,101,194);
-  --vvd-color-info-80: rgb(9,74,158);
-  --vvd-color-info-90: rgb(14,48,109);
-  --vvd-color-announcement: rgb(214,33,156);
-  --vvd-color-on-announcement: rgb(255,255,255);
-  --vvd-color-announcement-10: rgb(255,237,251);
-  --vvd-color-announcement-20: rgb(255,220,247);
-  --vvd-color-announcement-30: rgb(248,185,231);
-  --vvd-color-announcement-70: rgb(187,30,137);
-  --vvd-color-announcement-80: rgb(143,22,105);
-  --vvd-color-announcement-90: rgb(98,2,86);
-  --vvd-shadow-surface-0dp: drop-shadow(1px 0 0 rgba(204, 204, 204, 1)) drop-shadow(0 1px 0 rgba(204, 204, 204, 1)) drop-shadow(0 -1px 0 rgba(204, 204, 204, 1)) drop-shadow(-1px 0 0 rgba(204, 204, 204, 1));
-  --vvd-shadow-surface-2dp: drop-shadow(0 1px 4px rgba(0, 0, 0, 0.1)) drop-shadow(0 1px 2px rgba(0, 0, 0, 0.05)) drop-shadow(0 2px 1px rgba(0, 0, 0, 0.05));
-  --vvd-shadow-surface-4dp: drop-shadow(0 2px 8px rgba(0, 0, 0, 0.1)) drop-shadow(0 2px 4px rgba(0, 0, 0, 0.05)) drop-shadow(0 4px 2px rgba(0, 0, 0, 0.05));
-  --vvd-shadow-surface-8dp: drop-shadow(0 2px 16px rgba(0, 0, 0, 0.1)) drop-shadow(0 8px 8px rgba(0, 0, 0, 0.05)) drop-shadow(0 4px 4px rgba(0, 0, 0, 0.05));
-  --vvd-shadow-surface-12dp: drop-shadow(0 4px 24px rgba(0, 0, 0, 0.1)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.05)) drop-shadow(0 6px 8px rgba(0, 0, 0, 0.05));
-  --vvd-shadow-surface-16dp: drop-shadow(0 6px 32px rgba(0, 0, 0, 0.1)) drop-shadow(0 16px 24px rgba(0, 0, 0, 0.05)) drop-shadow(0 8px 12px rgba(0, 0, 0, 0.05));
-  --vvd-shadow-surface-24dp: drop-shadow(0 12px 48px rgba(0, 0, 0, 0.2)) drop-shadow(0 24px 32px rgba(0, 0, 0, 0.05)) drop-shadow(0 12px 16px rgba(0, 0, 0, 0.05));
-}
-@supports (color-scheme: light) {
-  .vvd-theme-alternate, ::part(vvd-theme-alternate) {
-    color-scheme: light;
-  }
-}
-
-/*# sourceMappingURL=dark.css.map */