@vonage/vivid 3.0.0-next.18 → 3.0.0-next.19

package/action-group/index.js

@@ -0,0 +1,34 @@
+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 { c as classNames } from '../shared/class-names.js';
+
+var css_248z = ".base {\n  display: inline-flex;\n  box-sizing: border-box;\n  align-items: center;\n  padding: 4px;\n  background-color: var(--_appearance-color-fill);\n  box-shadow: 0 0 0 1px var(--_appearance-color-outline);\n  color: var(--_appearance-color-text);\n  column-gap: 4px;\n  vertical-align: middle;\n}\n.base {\n  --_appearance-color-text: var(--vvd-color-on-canvas);\n  --_appearance-color-fill: var(--vvd-color-canvas);\n  --_appearance-color-outline: var(--vvd-color-neutral-50);\n}\n.base.appearance-ghost {\n  --_appearance-color-text: var(--connotation);\n  --_appearance-color-fill: transaprent;\n  --_appearance-color-outline: transaprent;\n}\n\n/* Shape */\n.base:not(.shape-pill) {\n  border-radius: 6px;\n}\n\n.base.shape-pill {\n  border-radius: 24px;\n}\n\n::slotted([role=separator]) {\n  width: 1px;\n  align-self: stretch;\n  background-color: var(--vvd-color-neutral-30);\n  margin-block: 4px;\n}";
+styleInject(css_248z);
+
+class ActionGroup extends FoundationElement {}
+
+__decorate([attr, __metadata("design:type", String)], ActionGroup.prototype, "shape", void 0);
+
+__decorate([attr, __metadata("design:type", String)], ActionGroup.prototype, "appearance", void 0);
+
+let _ = t => t,
+    _t;
+
+const getClasses = ({
+  appearance,
+  shape
+}) => classNames('base', [`appearance-${appearance}`, Boolean(appearance)], [`shape-${shape}`, Boolean(shape)]);
+
+const ActionGroupTemplate = () => html(_t || (_t = _`
+<div class="${0}">
+  <slot></slot>
+</div>`), getClasses);
+
+const vividActionGroup = ActionGroup.compose({
+  baseName: 'action-group',
+  template: ActionGroupTemplate,
+  styles: css_248z
+});
+designSystem.register(vividActionGroup());
+
+export { vividActionGroup };

package/card/index.js

@@ -18,7 +18,7 @@ import '../shared/apply-mixins.js';
 import '../shared/focus2.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  block-size: 100%;\n  border-radius: 6px;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-on-canvas);\n}\n\n.content {\n  display: flex;\n  flex-flow: column;\n  padding: 1.5rem;\n}\n.content-container {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 0.5rem;\n}\n.header-content {\n  flex: 1;\n}\n.header-title, .header-subheading {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-title {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--heading-line-clamp);\n}\n.header-subheading {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--subheading-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subheading,\n.text {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  color: var(--vvd-color-neutral-70);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 1.5rem;\n  margin-top: auto;\n  padding-inline: 1.5rem;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -0.5rem;\n  margin-inline-end: -0.5rem;\n  margin-inline-start: auto;\n}\n\nvwc-elevation {\n  block-size: inherit;\n}\nvwc-elevation::part(base) {\n  block-size: inherit;\n}";
+var css_248z = "/*\n  Do not edit directly\n  Generated on Wed, 27 Apr 2022 11:58:36 GMT\n*/\n:host {\n  display: block;\n}\n@supports ((block-size: -moz-fit-content) or (block-size: fit-content)) and ((inline-size: -moz-fit-content) or (inline-size: fit-content)) {\n  :host {\n    block-size: -moz-fit-content;\n    block-size: fit-content;\n    inline-size: -moz-fit-content;\n    inline-size: fit-content;\n  }\n}\n\n.control {\n  block-size: 100%;\n  border-radius: 6px;\n}\n\n.wrapper {\n  display: flex;\n  overflow: hidden;\n  flex-flow: column;\n  block-size: inherit;\n  border-radius: inherit;\n  color: var(--vvd-color-on-canvas);\n}\n\n.content {\n  display: flex;\n  flex-flow: column;\n  padding: 1.5rem;\n}\n.content-container {\n  display: flex;\n  gap: 0.5rem;\n}\n\n.header {\n  display: flex;\n  flex: 1;\n  align-items: flex-start;\n  gap: 0.5rem;\n}\n.header-content {\n  flex: 1;\n}\n.header-title, .header-subheading {\n  /* stylelint-disable value-no-vendor-prefix */\n  display: -webkit-box;\n  /* stylelint-enable value-no-vendor-prefix */\n  overflow: hidden;\n  -webkit-box-orient: vertical;\n}\n.header-title {\n  font: 500 condensed 20px / 28px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--heading-line-clamp);\n}\n.header-subheading {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  -webkit-line-clamp: var(--subheading-line-clamp);\n}\n.hide-header .header {\n  display: none;\n}\n\n.header-subheading,\n.text {\n  font: 400 ultra-condensed 14px / 20px SpeziaWebVariable;\n  letter-spacing: 0px;\n  text-decoration: none;\n  text-transform: none;\n  color: var(--vvd-color-neutral-70);\n}\n\n.text {\n  padding-right: 8px;\n  margin-top: 12px;\n}\n\n.footer {\n  display: inline-flex;\n  flex-direction: column;\n  align-items: flex-end;\n  padding-bottom: 1.5rem;\n  margin-top: auto;\n  padding-inline: 1.5rem;\n}\n.hide-footer .footer {\n  display: none;\n}\n\n::slotted([slot=graphic i]),\n.icon {\n  flex-shrink: 0;\n  align-self: baseline;\n  margin-block-start: 4px;\n}\n\n.icon {\n  font-size: 20px;\n}\n\n::slotted([slot=meta i]) {\n  flex-shrink: 0;\n  align-self: flex-start;\n  margin-block-start: -0.5rem;\n  margin-inline-end: -0.5rem;\n  margin-inline-start: auto;\n}\n\nvwc-elevation {\n  block-size: inherit;\n}\nvwc-elevation::part(base) {\n  block-size: inherit;\n}";
 styleInject(css_248z);
 
 class Card extends FoundationElement {}

package/index.js

@@ -1,5 +1,6 @@
 export { vividAccordion } from './accordion/index.js';
 export { vividAccordionItem } from './accordion-item/index.js';
+export { vividActionGroup } from './action-group/index.js';
 export { vividBadge } from './badge/index.js';
 export { vividBanner } from './banner/index.js';
 export { vividBreadcrumb } from './breadcrumb/index.js';
@@ -18,6 +19,7 @@ export { vividProgressRing } from './progress-ring/index.js';
 export { vividSideDrawer } from './side-drawer/index.js';
 export { vividSidenavItem } from './sidenav-item/index.js';
 export { vividText } from './text/index.js';
+export { vividTextfield } from './text-field/index.js';
 export { vividTooltip } from './tooltip/index.js';
 export { d as designSystem, p as provideVividDesignSystem } from './shared/index.js';
 import './shared/style-inject.es.js';

package/lib/action-group/action-group.d.ts

@@ -0,0 +1,9 @@
+import { FoundationElement } from '@microsoft/fast-foundation';
+import type { Appearance, Shape } from '../enums.js';
+export declare type ActionGroupAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
+declare type ActionGroupShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
+export declare class ActionGroup extends FoundationElement {
+    shape?: ActionGroupShape;
+    appearance?: ActionGroupAppearance;
+}
+export {};

package/lib/action-group/action-group.template.d.ts

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

package/lib/action-group/index.d.ts

@@ -0,0 +1,2 @@
+import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
+export declare const vividActionGroup: (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/components.d.ts

@@ -1,5 +1,6 @@
 export * from './accordion';
 export * from './accordion-item';
+export * from './action-group';
 export * from './badge';
 export * from './banner';
 export * from './breadcrumb';
@@ -18,4 +19,5 @@ export * from './progress-ring';
 export * from './side-drawer';
 export * from './sidenav-item';
 export * from './text';
+export * from './text-field';
 export * from './tooltip';

package/package.json

@@ -1,12 +1,13 @@
 {
   "name": "@vonage/vivid",
-  "version": "3.0.0-next.18",
+  "version": "3.0.0-next.19",
   "type": "module",
   "module": "./index.esm.js",
   "main": "./index.js",
   "exports": {
     "./accordion": "./accordion",
     "./accordion-item": "./accordion-item",
+    "./action-group": "./action-group",
     "./badge": "./badge",
     "./banner": "./banner",
     "./breadcrumb": "./breadcrumb",