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

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

package/fab/index.js

@@ -20,7 +20,7 @@ import '../shared/object-keys.js';
 import '../shared/form-associated.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: 600 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  border: 0 none;\n  background-color: var(--_appearance-color-fill, var(--_elevation-fill));\n  block-size: var(--_fab-block-size);\n  border-radius: var(--_fab-border-radius);\n  color: var(--_appearance-color-text, var(--vvd-color-on-canvas));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-on-primary: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n  --_connotation-color-contrast: var(--vvd-color-neutral-90);\n  --_connotation-color-fierce: var(--vvd-color-neutral-80);\n  --_connotation-color-firm: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n  --_connotation-color-on-primary: var(--vvd-color-on-cta);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n  --_connotation-color-contrast: var(--vvd-color-cta-90);\n  --_connotation-color-fierce: var(--vvd-color-cta-80);\n  --_connotation-color-firm: var(--vvd-color-cta-70);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n  .control {\n    -webkit-user-select: none;\n            user-select: none;\n  }\n}\n.control.density-extended {\n  --_fab-border-radius: 30px;\n  --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: 40px;\n}\n.control.icon-only {\n  border-radius: 50%;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):hover {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon {\n  font-size: 20px;\n}\n.icon-trailing .icon {\n  order: 1;\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control {\n  font: 600 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  border: 0 none;\n  background-color: var(--_appearance-color-fill, var(--_elevation-fill));\n  block-size: var(--_fab-block-size);\n  border-radius: var(--_fab-border-radius);\n  color: var(--_appearance-color-text, var(--vvd-color-on-canvas));\n  column-gap: var(--fab-icon-gap);\n  filter: var(--_elevation-shadow);\n  transition: background-color 0.15s linear, filter 0.15s linear;\n  vertical-align: middle;\n  /* Size */\n}\n.control.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n  --_connotation-color-on-primary: var(--vvd-color-canvas);\n  --_connotation-color-primary-increment: var(--vvd-color-neutral-90);\n  --_connotation-color-contrast: var(--vvd-color-neutral-90);\n  --_connotation-color-fierce: var(--vvd-color-neutral-80);\n  --_connotation-color-firm: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n  --_connotation-color-on-primary: var(--vvd-color-on-cta);\n  --_connotation-color-primary-increment: var(--vvd-color-cta-70);\n  --_connotation-color-contrast: var(--vvd-color-cta-90);\n  --_connotation-color-fierce: var(--vvd-color-cta-80);\n  --_connotation-color-firm: var(--vvd-color-cta-70);\n}\n.control {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:hover, .hover):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-primary-increment);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:disabled, .disabled) {\n  --_appearance-color-text: var(--vvd-color-neutral-50);\n  --_appearance-color-fill: var(--vvd-color-neutral-30);\n  --_appearance-color-outline: transaprent;\n}\n.control:where(:active, .active):where(:not(:disabled, .disabled)) {\n  --_appearance-color-text: var(--_connotation-color-on-primary);\n  --_appearance-color-fill: var(--_connotation-color-fierce);\n  --_appearance-color-outline: transaprent;\n}\n@supports selector(:focus-visible) {\n  .control:focus {\n    outline: none;\n  }\n}\n@supports ((-webkit-user-select: none) or (user-select: none)) {\n  .control {\n    -webkit-user-select: none;\n            user-select: none;\n  }\n}\n.control.density-extended {\n  --_fab-border-radius: 30px;\n  --_fab-block-size: 56px;\n}\n.control:not(.density-extended) {\n  --_fab-border-radius: 24px;\n  --_fab-block-size: 40px;\n}\n.control.icon-only {\n  border-radius: 50%;\n  padding-inline: 0;\n  place-content: center;\n}\n@supports (aspect-ratio: 1) {\n  .control.icon-only {\n    aspect-ratio: 1;\n  }\n}\n@supports not (aspect-ratio: 1) {\n  .control.icon-only {\n    inline-size: var(--_fab-block-size);\n  }\n}\n.control:not(.icon-only) {\n  --fab-icon-gap: 10px;\n  padding-inline: 20px;\n}\n.control:disabled {\n  --_elevation-fill: var(--vvd-color-surface-0dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-0dp);\n  cursor: not-allowed;\n}\n.control:not(:disabled) {\n  --_elevation-fill: var(--vvd-color-surface-4dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-4dp);\n  cursor: pointer;\n}\n.control:not(:disabled):hover {\n  --_elevation-fill: var(--vvd-color-surface-12dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-12dp);\n}\n.control:not(:disabled):active {\n  --_elevation-fill: var(--vvd-color-surface-24dp);\n  --_elevation-shadow: var(--vvd-shadow-surface-24dp);\n}\n\n/* Icon */\n.icon-trailing .icon {\n  order: 1;\n}\n.density-extended .icon {\n  font-size: 24px;\n}\n.icon:not(.density-extended) .icon {\n  font-size: 20px;\n}\n\n:not(:focus-visible) .focus-indicator {\n  display: none;\n}";
 styleInject(css_248z);
 
 class Fab extends Button {}

package/index.js

@@ -22,7 +22,6 @@ 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

@@ -22,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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.46",
+  "version": "3.0.0-next.49",
   "type": "module",
   "module": "./index.esm.js",
   "main": "./index.js",
@@ -38,7 +38,6 @@
     "./nav": "./nav",
     "./nav-item": "./nav-item",
     "./nav-disclosure": "./nav-disclosure",
-    "./text": "./text",
     "./text-field": "./text-field",
     "./tooltip": "./tooltip",
     "./checkbox": "./checkbox",

package/styles/typography/desktop.css

@@ -0,0 +1,72 @@
+/*
+  Do not edit directly
+  Generated on Wed, 27 Apr 2022 11:58:36 GMT
+*/
+:root.vvd-typography h1, :root.vvd-typography .headline-1 {
+  font: 500 condensed 66px / 88px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+  margin-block: 2.5rem;
+}
+:root.vvd-typography h2, :root.vvd-typography .headline-2 {
+  font: 500 condensed 52px / 68px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+  margin-block: 2.5rem;
+}
+:root.vvd-typography h3, :root.vvd-typography .subtitle-1 {
+  font: 500 condensed 26px / 36px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+  margin-block: 1.5rem;
+}
+:root.vvd-typography h4, :root.vvd-typography .subtitle-2 {
+  font: 500 condensed 20px / 28px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+  margin-block: 1.5rem;
+}
+:root.vvd-typography h5, :root.vvd-typography .title-1 {
+  font: 500 condensed 40px / 52px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+  margin-block: 2rem;
+}
+:root.vvd-typography h6, :root.vvd-typography .title-2 {
+  font: 500 condensed 32px / 44px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+  margin-block: 2rem;
+}
+:root.vvd-typography code {
+  font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+}
+:root.vvd-typography body, :root.vvd-typography p {
+  font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+}
+:root.vvd-typography strong {
+  font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+}
+:root.vvd-typography code {
+  font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;
+  letter-spacing: 0px;
+  text-decoration: none;
+  text-transform: none;
+}
+
+/*# sourceMappingURL=desktop.css.map */

package/lib/text/index.d.ts

@@ -1,2 +0,0 @@
-import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
-export declare const vividText: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;

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.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Announcement | Connotation.Info>;
-export declare class Text extends FoundationElement {
-    connotation?: TextConnotation;
-    fontFace?: VVDFontFace;
-    tight: boolean;
-}
-export {};

package/lib/text/text.template.d.ts

@@ -1,4 +0,0 @@
-import type { ViewTemplate } from '@microsoft/fast-element';
-import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
-import type { Text } from './text';
-export declare const TextTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Text>;

package/text/index.js

@@ -1,48 +0,0 @@
-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 '../shared/export.js';
-import '../shared/object-keys.js';
-import '../shared/iterators.js';
-
-var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n.control:not(.tight):not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1:not(.tight), .control.font-face-body-1-bold:not(.tight), .control.font-face-body-1-code:not(.tight), .control.font-face-body-1-link:not(.tight), .control.font-face-body-2:not(.tight), .control.font-face-body-2-bold:not(.tight), .control.font-face-body-2-code:not(.tight), .control.font-face-body-2-link:not(.tight), .control.font-face-subtitle-1:not(.tight), .control.font-face-subtitle-2:not(.tight), .control.font-face-title-1:not(.tight), .control.font-face-title-2:not(.tight), .control.font-face-headline-1:not(.tight), .control.font-face-headline-2:not(.tight) {\n  display: block;\n  margin: var(--font-face-margin, 0);\n}\n\n.control {\n  color: var(--_connotation-color-primary);\n}\n.control.font-face-body-1 {\n  font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-body-1-bold {\n  font: 600 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-body-1-code {\n  font: 400 ultra-condensed 16px / 24px SpeziaMonoWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-body-1-link {\n  font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: underline;\n  text-transform: none;\n}\n.control.font-face-body-2 {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-body-2-bold {\n  font: 600 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-body-2-code {\n  font: 400 ultra-condensed 14px / 20px SpeziaMonoWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-body-2-link {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: underline;\n  text-transform: none;\n}\n.control.font-face-button {\n  font: 600 ultra-condensed 14px / 100% SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-button-dense {\n  font: 600 ultra-condensed 12px / 100% SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-button-enlarge {\n  font: 600 ultra-condensed 16px / 100% SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-caption {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-caption-bold {\n  font: 600 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-caption-code {\n  font: 400 ultra-condensed 12px / 16px SpeziaMonoWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-caption-link {\n  font: 400 ultra-condensed 12px / 16px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: underline;\n  text-transform: none;\n}\n.control.font-face-headline-1 {\n  font: 500 condensed 66px / 88px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-headline-2 {\n  font: 500 condensed 52px / 68px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-subtitle-1 {\n  font: 500 condensed 26px / 36px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-subtitle-2 {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-title-1 {\n  font: 500 condensed 40px / 52px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.font-face-title-2 {\n  font: 500 condensed 32px / 44px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2) {\n  font: 400 ultra-condensed 16px / 24px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n}\n.control.connotation-accent {\n  --_connotation-color-primary: var(--vvd-color-on-canvas);\n}\n.control.connotation-cta {\n  --_connotation-color-primary: var(--vvd-color-cta);\n}\n.control.connotation-success {\n  --_connotation-color-primary: var(--vvd-color-success);\n}\n.control.connotation-alert {\n  --_connotation-color-primary: var(--vvd-color-alert);\n}\n.control.connotation-announcement {\n  --_connotation-color-primary: var(--vvd-color-announcement);\n}\n.control.connotation-info {\n  --_connotation-color-primary: var(--vvd-color-info);\n}\n.control.font-face-headline-1, .control.font-face-headline-2 {\n  --font-face-margin: 2.5rem 0;\n}\n.control.font-face-title-1, .control.font-face-title-2 {\n  --font-face-margin: 2rem 0;\n}\n.control.font-face-subtitle-1, .control.font-face-subtitle-2 {\n  --font-face-margin: 1.5rem 0;\n}\n.control:not(.font-face-body-1, .font-face-body-1-bold, .font-face-body-1-code, .font-face-body-1-link, .font-face-body-2, .font-face-body-2-bold, .font-face-body-2-code, .font-face-body-2-link, .font-face-button, .font-face-button-dense, .font-face-button-enlarge, .font-face-caption, .font-face-caption-bold, .font-face-caption-code, .font-face-caption-link, .font-face-headline-1, .font-face-headline-2, .font-face-subtitle-1, .font-face-subtitle-2, .font-face-title-1, .font-face-title-2), .control.font-face-body-1, .control.font-face-body-1-bold, .control.font-face-body-1-code, .control.font-face-body-1-link, .control.font-face-body-2, .control.font-face-body-2-bold, .control.font-face-body-2-code, .control.font-face-body-2-link {\n  --font-face-margin: 1rem 0;\n}\n\n::slotted(:where(h1, h2, h3, h4, h5, h6, p)) {\n  margin: initial;\n}\n\n::slotted(*) {\n  color: inherit;\n  font: inherit;\n}";
-styleInject(css_248z);
-
-class Text extends FoundationElement {
-  constructor() {
-    super(...arguments);
-    this.tight = false;
-  }
-
-}
-
-__decorate([attr, __metadata("design:type", String)], Text.prototype, "connotation", void 0);
-
-__decorate([attr({
-  attribute: 'font-face'
-}), __metadata("design:type", String)], Text.prototype, "fontFace", void 0);
-
-__decorate([attr({
-  mode: 'boolean'
-}), __metadata("design:type", Object)], Text.prototype, "tight", void 0);
-
-let _ = t => t,
-    _t;
-
-const getClasses = ({
-  connotation,
-  fontFace,
-  tight
-}) => classNames('control', [`connotation-${connotation}`, Boolean(connotation)], [`font-face-${fontFace}`, Boolean(fontFace)], ['tight', tight]);
-
-const TextTemplate = () => html(_t || (_t = _`<slot class="${0}"></slot>`), getClasses);
-
-const vividText = Text.compose({
-  baseName: 'text',
-  template: TextTemplate,
-  styles: css_248z
-});
-designSystem.register(vividText());
-
-export { vividText };