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

package/README.md

@@ -52,6 +52,10 @@ The folder contains the following files:
 
   - `fonts/spezia.css` - Loads the *Spezia* variable font and specifies its font face definition. *Spezia* is Vonage's branded font and is required by most Vivid components
 
+- Typography
+
+	- `typography/desktop.css` - Defines the typography for desktop devices
+
 - Themes - only one theme can apply at a time. thus, only one is required to be loaded
 
   - `themes/light.css` - Light theme
@@ -61,8 +65,9 @@ The folder contains the following files:
 Note: scss users can simply [forward](https://sass-lang.com/documentation/at-rules/forward) the styles to their scss project:
 
 ```css
-@forward 'node_modules/@vonage/vivid/styles/fonts/spezia';
-@forward 'node_modules/@vonage/vivid/styles/themes/light';
+@forward 'node_modules/@vonage/vivid/styles/fonts/spezia.css';
+@forward 'node_modules/@vonage/vivid/styles/typography/desktop.css';
+@forward 'node_modules/@vonage/vivid/styles/themes/light.css';
 ```
 
 ## Support
@@ -108,3 +113,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,15 +13,15 @@ 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';
 export { vividNav } from './nav/index.js';
 export { vividNavItem } from './nav-item/index.js';
 export { vividNavDisclosure } from './nav-disclosure/index.js';
-export { vividText } from './text/index.js';
 export { vividTextfield } from './text-field/index.js';
 export { vividTooltip } from './tooltip/index.js';
 export { vividCheckbox } from './checkbox/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';
@@ -21,7 +22,6 @@ export * from './side-drawer';
 export * from './nav';
 export * from './nav-item';
 export * from './nav-disclosure';
-export * from './text';
 export * from './text-field';
 export * from './tooltip';
 export * from './checkbox';

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;