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

package/README.md

@@ -108,3 +108,24 @@ This project is licensed under the Apache 2.0 License - see the [LICENSE.md](LIC
 - [Fast](https://www.fast.design) - to extend element classes and compile code to native web components
 - [Typescript](https://www.typescriptlang.org) - for ergonomic and type-safe code
 - [Sass](https://sass-lang.com) - for styles authoring extensibility and consistency
+
+## Quickstart
+
+Global content delivery networks can help quickly integrate content within html pages, fetching content from an URL, skipping local builds entirely.
+Such practice is often used when working on POCs or reproduction environments.
+Tools like [UNPKG](https://unpkg.com), [jsDeliver](https://www.jsdelivr.com), [Skypack](https://www.skypack.dev) etc' are bound to deliver any content registered in the npm registry.
+
+The following snippet fully renders a Vivid button component
+
+```html
+<!-- import spezia font -->
+<link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@next/styles/fonts/spezia.css">
+
+<!-- import light theme style tokens -->
+<link rel="stylesheet" href="https://unpkg.com/@vonage/vivid@next/styles/themes/light.css">
+
+<!-- import Vivid button component -->
+<script type="module" src="https://unpkg.com/@vonage/vivid@next/button/index.js"></script>
+
+<vwc-button label="Click me" appearance="filled" connotation="cta"></vwc-button>
+```

package/checkbox/index.js

@@ -166,10 +166,7 @@ const CheckboxTemplate = context => {
 const vividCheckbox = Checkbox.compose({
   baseName: 'checkbox',
   template: CheckboxTemplate,
-  styles: css_248z,
-  shadowOptions: {
-    delegatesFocus: true
-  }
+  styles: css_248z
 });
 designSystem.register(vividCheckbox());
 

package/index.js

@@ -13,8 +13,9 @@ export { v as vividElevation } from './shared/index2.js';
 export { vividFab } from './fab/index.js';
 export { vividIcon } from './icon/index.js';
 export { vividLayout } from './layout/index.js';
+export { vividMenu } from './menu/index.js';
 export { vividNote } from './note/index.js';
-export { vividPopup } from './popup/index.js';
+export { v as vividPopup } from './shared/index3.js';
 export { vividProgress } from './progress/index.js';
 export { vividProgressRing } from './progress-ring/index.js';
 export { vividSideDrawer } from './side-drawer/index.js';

package/lib/components.d.ts

@@ -13,6 +13,7 @@ export * from './elevation';
 export * from './fab';
 export * from './icon';
 export * from './layout';
+export * from './menu';
 export * from './note';
 export * from './popup';
 export * from './progress';

package/lib/menu/index.d.ts

@@ -0,0 +1,11 @@
+import '../popup';
+import { Menu } from './menu';
+export declare const vividMenu: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
+    baseName: string;
+    template: any;
+    styles: import("@microsoft/fast-element").ComposableStyles;
+}> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
+    baseName: string;
+    template: any;
+    styles: import("@microsoft/fast-element").ComposableStyles;
+}, typeof Menu>;

package/lib/menu/menu.d.ts

@@ -0,0 +1,7 @@
+import { Menu as FastMenu } from '@microsoft/fast-foundation';
+import type { Placement } from '@floating-ui/dom';
+export declare class Menu extends FastMenu {
+    open: boolean;
+    placement?: Placement;
+    anchor?: string;
+}

package/lib/menu/menu.template.d.ts

@@ -0,0 +1,3 @@
+import { type ElementViewTemplate } from '@microsoft/fast-element';
+import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const MenuTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ElementViewTemplate;