@vonage/vivid 3.0.0-next.3 → 3.0.0-next.32

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (152) hide show
  1. package/README.md +49 -4
  2. package/accordion/index.js +61 -0
  3. package/accordion-item/index.js +133 -0
  4. package/action-group/index.js +49 -0
  5. package/badge/index.js +27 -22
  6. package/banner/index.js +148 -0
  7. package/breadcrumb/index.js +41 -150
  8. package/breadcrumb-item/index.js +18 -8
  9. package/button/index.js +40 -663
  10. package/calendar/index.js +1550 -0
  11. package/calendar-event/index.js +117 -0
  12. package/card/index.js +134 -0
  13. package/checkbox/index.js +176 -0
  14. package/dialog/index.js +277 -0
  15. package/divider/index.js +88 -0
  16. package/elevation/index.js +4 -38
  17. package/fab/index.js +101 -0
  18. package/focus/index.js +20 -3
  19. package/header/index.js +68 -0
  20. package/icon/index.js +40 -5
  21. package/index.d.ts +1 -0
  22. package/index.js +50 -14
  23. package/layout/index.js +5 -5
  24. package/lib/accordion/accordion.d.ts +9 -0
  25. package/lib/accordion/accordion.template.d.ts +4 -0
  26. package/lib/accordion/index.d.ts +2 -0
  27. package/lib/accordion-item/accordion-item.d.ts +13 -0
  28. package/lib/accordion-item/accordion-item.template.d.ts +4 -0
  29. package/lib/accordion-item/index.d.ts +4 -0
  30. package/lib/action-group/action-group.d.ts +10 -0
  31. package/lib/action-group/action-group.template.d.ts +4 -0
  32. package/lib/action-group/index.d.ts +2 -0
  33. package/lib/badge/badge.d.ts +8 -8
  34. package/lib/badge/index.d.ts +1 -1
  35. package/lib/banner/banner.d.ts +20 -0
  36. package/lib/banner/banner.template.d.ts +4 -0
  37. package/lib/banner/index.d.ts +3 -0
  38. package/lib/breadcrumb/breadcrumb.template.d.ts +4 -0
  39. package/lib/breadcrumb-item/breadcrumb-item.d.ts +1 -1
  40. package/lib/breadcrumb-item/breadcrumb-item.template.d.ts +0 -1
  41. package/lib/breadcrumb-item/index.d.ts +2 -0
  42. package/lib/button/button.d.ts +9 -8
  43. package/lib/button/index.d.ts +2 -19
  44. package/lib/calendar/calendar.d.ts +13 -0
  45. package/lib/calendar/calendar.template.d.ts +4 -0
  46. package/lib/calendar/helpers/calendar.date-functions.d.ts +2 -0
  47. package/lib/calendar/helpers/calendar.event-context.d.ts +6 -0
  48. package/lib/calendar/helpers/calendar.keyboard-interactions.d.ts +9 -0
  49. package/lib/calendar/index.d.ts +2 -0
  50. package/lib/calendar-event/calendar-event.d.ts +14 -0
  51. package/lib/calendar-event/calendar-event.template.d.ts +4 -0
  52. package/lib/calendar-event/index.d.ts +2 -0
  53. package/lib/card/card.d.ts +10 -0
  54. package/lib/card/card.template.d.ts +4 -0
  55. package/lib/card/index.d.ts +4 -0
  56. package/lib/checkbox/checkbox.d.ts +5 -0
  57. package/lib/checkbox/checkbox.template.d.ts +4 -0
  58. package/lib/checkbox/index.d.ts +4 -0
  59. package/lib/components.d.ts +23 -5
  60. package/lib/dialog/dialog.d.ts +20 -0
  61. package/lib/dialog/dialog.template.d.ts +4 -0
  62. package/lib/dialog/index.d.ts +5 -0
  63. package/lib/divider/divider.d.ts +3 -0
  64. package/lib/divider/divider.template.d.ts +4 -0
  65. package/lib/divider/index.d.ts +2 -0
  66. package/lib/elevation/elevation.d.ts +2 -1
  67. package/lib/elevation/index.d.ts +1 -1
  68. package/lib/enums.d.ts +14 -7
  69. package/lib/fab/fab.d.ts +13 -0
  70. package/lib/fab/fab.template.d.ts +4 -0
  71. package/lib/fab/index.d.ts +4 -0
  72. package/lib/focus/index.d.ts +1 -1
  73. package/lib/header/header.d.ts +5 -0
  74. package/lib/header/header.template.d.ts +4 -0
  75. package/lib/header/index.d.ts +3 -0
  76. package/lib/icon/icon.d.ts +4 -5
  77. package/lib/layout/index.d.ts +1 -1
  78. package/lib/layout/layout.d.ts +3 -3
  79. package/lib/note/index.d.ts +2 -0
  80. package/lib/note/note.d.ts +10 -0
  81. package/lib/note/note.template.d.ts +5 -0
  82. package/lib/popup/index.d.ts +4 -0
  83. package/lib/popup/popup.d.ts +17 -0
  84. package/lib/popup/popup.template.d.ts +4 -0
  85. package/lib/progress/index.d.ts +2 -0
  86. package/lib/progress/progress.d.ts +9 -0
  87. package/lib/progress/progress.template.d.ts +5 -0
  88. package/lib/progress-ring/index.d.ts +2 -0
  89. package/lib/progress-ring/progress-ring.d.ts +7 -0
  90. package/lib/progress-ring/progress-ring.template.d.ts +4 -0
  91. package/lib/side-drawer/index.d.ts +2 -0
  92. package/lib/side-drawer/side-drawer.d.ts +7 -0
  93. package/lib/side-drawer/side-drawer.template.d.ts +4 -0
  94. package/lib/sidenav/index.d.ts +2 -0
  95. package/lib/sidenav/sidenav.d.ts +3 -0
  96. package/lib/sidenav/sidenav.template.d.ts +4 -0
  97. package/lib/sidenav-item/index.d.ts +1 -0
  98. package/lib/sidenav-item/sidenav-item.d.ts +4 -5
  99. package/lib/text/index.d.ts +2 -0
  100. package/lib/text/text.d.ts +10 -0
  101. package/lib/text/text.template.d.ts +4 -0
  102. package/lib/text-anchor/text-anchor.d.ts +4 -1
  103. package/lib/text-field/index.d.ts +4 -0
  104. package/lib/text-field/text-field.d.ts +23 -0
  105. package/lib/text-field/text-field.template.d.ts +5 -0
  106. package/lib/tooltip/index.d.ts +3 -0
  107. package/lib/tooltip/tooltip.d.ts +8 -0
  108. package/lib/tooltip/tooltip.template.d.ts +4 -0
  109. package/note/index.js +68 -0
  110. package/package.json +39 -6
  111. package/popup/index.js +2118 -0
  112. package/progress/index.js +107 -0
  113. package/progress-ring/index.js +82 -0
  114. package/shared/_has.js +58 -0
  115. package/shared/affix.js +10 -25
  116. package/shared/anchor.js +10 -3
  117. package/shared/aria-global.js +20 -20
  118. package/shared/base-progress.js +70 -0
  119. package/shared/breadcrumb-item.js +2 -2
  120. package/shared/button.js +195 -0
  121. package/shared/calendar-event.js +26 -0
  122. package/shared/dialog-polyfill.esm.js +858 -0
  123. package/shared/enums.js +79 -0
  124. package/shared/es.object.assign.js +69 -0
  125. package/shared/export.js +972 -0
  126. package/shared/focus.js +5 -0
  127. package/shared/focus2.js +11 -0
  128. package/shared/form-associated.js +548 -0
  129. package/shared/icon.js +1389 -0
  130. package/shared/index.js +4940 -1426
  131. package/shared/index2.js +27 -4901
  132. package/shared/iterators.js +61 -0
  133. package/shared/object-keys.js +13 -0
  134. package/shared/patterns/affix.d.ts +3 -4
  135. package/shared/patterns/focus.d.ts +3 -0
  136. package/shared/patterns/index.d.ts +1 -0
  137. package/shared/slotted.js +119 -0
  138. package/shared/text-anchor.js +12 -0
  139. package/shared/text-anchor.template.js +16 -6
  140. package/shared/to-string.js +51 -0
  141. package/shared/web.dom-collections.iterator.js +46 -1059
  142. package/shared/when.js +15 -0
  143. package/side-drawer/index.js +82 -0
  144. package/sidenav/index.js +17 -0
  145. package/sidenav-item/index.js +24 -61
  146. package/styles/themes/dark.css +16 -4
  147. package/styles/themes/light.css +16 -4
  148. package/text/index.js +48 -0
  149. package/text-anchor/index.js +13 -13
  150. package/text-field/index.js +411 -0
  151. package/tooltip/index.js +70 -0
  152. package/shared/index3.js +0 -21
package/index.js CHANGED
@@ -1,19 +1,55 @@
1
- export { vividTextAnchor } from './text-anchor/index.js';
2
- export { VIVIDBadge } from './badge/index.js';
3
- export { vividButton } from './button/index.js';
4
- export { V as VIVIDFocus } from './shared/index3.js';
5
- export { v as vividIcon } from './shared/index.js';
6
- export { VIVIDLayout } from './layout/index.js';
7
- export { VIVIDElevation } from './elevation/index.js';
8
- export { vividBreadcrumbItem } from './breadcrumb-item/index.js';
1
+ export { vividAccordion } from './accordion/index.js';
2
+ export { vividAccordionItem } from './accordion-item/index.js';
3
+ export { vividActionGroup } from './action-group/index.js';
4
+ export { vividBadge } from './badge/index.js';
5
+ export { vividBanner } from './banner/index.js';
9
6
  export { vividBreadcrumb } from './breadcrumb/index.js';
10
- import './shared/index2.js';
7
+ export { vividBreadcrumbItem } from './breadcrumb-item/index.js';
8
+ export { vividButton } from './button/index.js';
9
+ export { vividCalendar } from './calendar/index.js';
10
+ export { vividCalendarEvent } from './calendar-event/index.js';
11
+ export { vividCard } from './card/index.js';
12
+ export { v as vividElevation } from './shared/index2.js';
13
+ export { vividFab } from './fab/index.js';
14
+ export { vividIcon } from './icon/index.js';
15
+ export { vividLayout } from './layout/index.js';
16
+ export { vividNote } from './note/index.js';
17
+ export { vividPopup } from './popup/index.js';
18
+ export { vividProgress } from './progress/index.js';
19
+ export { vividProgressRing } from './progress-ring/index.js';
20
+ export { vividSideDrawer } from './side-drawer/index.js';
21
+ export { vividSidenav } from './sidenav/index.js';
22
+ export { vividSidenavItem } from './sidenav-item/index.js';
23
+ export { vividText } from './text/index.js';
24
+ export { vividTextfield } from './text-field/index.js';
25
+ export { vividTooltip } from './tooltip/index.js';
26
+ export { vividCheckbox } from './checkbox/index.js';
27
+ export { vividHeader } from './header/index.js';
28
+ export { d as designSystem, p as provideVividDesignSystem } from './shared/index.js';
29
+ import './shared/style-inject.es.js';
30
+ import './shared/class-names.js';
31
+ import './focus/index.js';
32
+ import './shared/focus.js';
11
33
  import './shared/web.dom-collections.iterator.js';
12
- import './shared/anchor.js';
34
+ import './shared/export.js';
35
+ import './shared/object-keys.js';
36
+ import './shared/iterators.js';
37
+ import './shared/affix.js';
38
+ import './shared/icon.js';
39
+ import './shared/to-string.js';
40
+ import './shared/_has.js';
13
41
  import './shared/apply-mixins.js';
42
+ import './shared/focus2.js';
43
+ import './shared/when.js';
44
+ import './shared/enums.js';
45
+ import './shared/button.js';
46
+ import './shared/form-associated.js';
14
47
  import './shared/aria-global.js';
15
- import './shared/text-anchor.template.js';
16
- import './shared/class-names.js';
17
- import './shared/affix.js';
18
- import './shared/style-inject.es.js';
48
+ import './shared/slotted.js';
19
49
  import './shared/breadcrumb-item.js';
50
+ import './shared/anchor.js';
51
+ import './shared/text-anchor.template.js';
52
+ import './shared/calendar-event.js';
53
+ import './shared/es.object.assign.js';
54
+ import './shared/base-progress.js';
55
+ import './shared/text-anchor.js';
package/layout/index.js CHANGED
@@ -1,4 +1,4 @@
1
- import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index2.js';
1
+ import { F as FoundationElement, _ as __decorate, a as attr, b as __metadata, h as html, d as designSystem } from '../shared/index.js';
2
2
  import { s as styleInject } from '../shared/style-inject.es.js';
3
3
  import { c as classNames } from '../shared/class-names.js';
4
4
 
@@ -25,7 +25,7 @@ __decorate([attr({
25
25
  attribute: 'auto-sizing'
26
26
  }), __metadata("design:type", String)], Layout.prototype, "autoSizing", void 0);
27
27
 
28
- var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n display: grid;\n grid-auto-rows: min-content;\n}\n.control.column-basis-base-small {\n grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(10rem, 1fr)));\n}\n.control:not(.column-basis-base-small):not(.column-basis-base):not(.column-basis-base-large):not(.column-basis-block), .control.column-basis-base {\n grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(20rem, 1fr)));\n}\n.control.column-basis-base-large {\n grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(30rem, 1fr)));\n}\n.control.column-basis-block {\n grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-base-small {\n gap: 16px;\n}\n.control:not(.column-spacing-base-small):not(.column-spacing-base):not(.column-spacing-base-large), .control.column-spacing-base {\n gap: 24px;\n}\n.control.column-spacing-base-large {\n gap: 32px;\n}\n.control.gutters-base-small {\n margin: 16px;\n}\n.control.gutters-base {\n margin: 24px;\n}\n.control.gutters-base-large {\n margin: 32px;\n}\n.control.auto-sizing-fill {\n --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n --_auto-sizing: auto-fit;\n}";
28
+ var css_248z = "/* #region SIZEs */\n/* #region BASES */\n/* #region SPACES */\n.control {\n display: grid;\n grid-auto-rows: min-content;\n}\n.control.column-basis-small {\n grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(10rem, 1fr)));\n}\n.control:not(.column-basis-small):not(.column-basis-medium):not(.column-basis-large):not(.column-basis-block), .control.column-basis-medium {\n grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(20rem, 1fr)));\n}\n.control.column-basis-large {\n grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(30rem, 1fr)));\n}\n.control.column-basis-block {\n grid-template-columns: var(--layout-grid-template-columns, repeat(var(--_auto-sizing), minmax(1fr, 1fr)));\n}\n.control.column-spacing-small {\n gap: 16px;\n}\n.control:not(.column-spacing-small):not(.column-spacing-medium):not(.column-spacing-large), .control.column-spacing-medium {\n gap: 24px;\n}\n.control.column-spacing-large {\n gap: 32px;\n}\n.control.gutters-small {\n margin: 16px;\n}\n.control.gutters-medium {\n margin: 24px;\n}\n.control.gutters-large {\n margin: 32px;\n}\n.control.auto-sizing-fill {\n --_auto-sizing: auto-fill;\n}\n.control:not(.auto-sizing-fill):not(.auto-sizing-fit), .control.auto-sizing-fit {\n --_auto-sizing: auto-fit;\n}";
29
29
  styleInject(css_248z);
30
30
 
31
31
  let _ = t => t,
@@ -43,11 +43,11 @@ const layoutTemplate = () => html(_t || (_t = _`
43
43
  <slot></slot>
44
44
  </div>`), getClasses);
45
45
 
46
- const VIVIDLayout = Layout.compose({
46
+ const vividLayout = Layout.compose({
47
47
  baseName: 'layout',
48
48
  template: layoutTemplate,
49
49
  styles: css_248z
50
50
  });
51
- designSystem.register(VIVIDLayout());
51
+ designSystem.register(vividLayout());
52
52
 
53
- export { VIVIDLayout };
53
+ export { vividLayout };
@@ -0,0 +1,9 @@
1
+ import { FoundationElement } from '@microsoft/fast-foundation';
2
+ export declare class Accordion extends FoundationElement {
3
+ private accordionItems;
4
+ multi: boolean;
5
+ constructor();
6
+ connectedCallback(): void;
7
+ private handleOpened;
8
+ closeAll(): void;
9
+ }
@@ -0,0 +1,4 @@
1
+ import type { ViewTemplate } from '@microsoft/fast-element';
2
+ import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
3
+ import type { Accordion } from './accordion';
4
+ export declare const AccordionTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Accordion>;
@@ -0,0 +1,2 @@
1
+ import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
2
+ export declare const vividAccordion: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -0,0 +1,13 @@
1
+ import { FoundationElement } from '@microsoft/fast-foundation';
2
+ import { AffixIconWithTrailing } from '../../shared/patterns/affix';
3
+ export declare class AccordionItem extends FoundationElement {
4
+ heading?: string;
5
+ headingLevel?: 2 | 3 | 4 | 5 | 6;
6
+ noIndicator: boolean;
7
+ meta?: string;
8
+ open: boolean;
9
+ attributeChangedCallback(name: string, oldValue: string, newValue: string): void;
10
+ private emitEvent;
11
+ }
12
+ export interface AccordionItem extends AffixIconWithTrailing {
13
+ }
@@ -0,0 +1,4 @@
1
+ import type { ViewTemplate } from '@microsoft/fast-element';
2
+ import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
3
+ import type { AccordionItem } from './accordion-item';
4
+ export declare const AccordionItemTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<AccordionItem>;
@@ -0,0 +1,4 @@
1
+ import '../icon';
2
+ import '../focus';
3
+ import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
4
+ export declare const vividAccordionItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -0,0 +1,10 @@
1
+ import { FoundationElement } from '@microsoft/fast-foundation';
2
+ import type { Appearance, Shape } from '../enums.js';
3
+ export declare type ActionGroupAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
4
+ declare type ActionGroupShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
5
+ export declare class ActionGroup extends FoundationElement {
6
+ shape?: ActionGroupShape;
7
+ appearance?: ActionGroupAppearance;
8
+ tight: boolean;
9
+ }
10
+ export {};
@@ -0,0 +1,4 @@
1
+ import type { ViewTemplate } from '@microsoft/fast-element';
2
+ import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
3
+ import type { ActionGroup } from './action-group';
4
+ export declare const ActionGroupTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<ActionGroup>;
@@ -0,0 +1,2 @@
1
+ import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
2
+ 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>>;
@@ -1,17 +1,17 @@
1
1
  import { FoundationElement } from '@microsoft/fast-foundation';
2
- import { PrefixOrSuffix } from '../../shared/patterns/affix';
3
- import type { Appearance, Connotation, Shape, Size } from '../enums.js';
4
- declare type BadgeConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Info>;
5
- declare type BadgeAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Soft>;
2
+ import { AffixIconWithTrailing } from '../../shared/patterns/affix';
3
+ import type { Appearance, Connotation, Density, Shape } from '../enums.js';
4
+ declare type BadgeConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Info>;
5
+ declare type BadgeAppearance = Extract<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle>;
6
6
  declare type BadgeShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
7
- declare type BadgeSize = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
7
+ declare type BadgeDensity = Extract<Density, Density.Condensed | Density.Normal | Density.Extended>;
8
8
  export declare class Badge extends FoundationElement {
9
9
  connotation?: BadgeConnotation;
10
10
  shape?: BadgeShape;
11
11
  appearance?: BadgeAppearance;
12
- size?: BadgeSize;
13
- text: string;
12
+ density?: BadgeDensity;
13
+ text?: string;
14
14
  }
15
- export interface Badge extends PrefixOrSuffix {
15
+ export interface Badge extends AffixIconWithTrailing {
16
16
  }
17
17
  export {};
@@ -1,3 +1,3 @@
1
1
  import '../icon';
2
2
  import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
3
- export declare const VIVIDBadge: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
3
+ export declare const vividBadge: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -0,0 +1,20 @@
1
+ import { FoundationElement } from '@microsoft/fast-foundation';
2
+ import { Connotation } from '../enums';
3
+ import { AffixIcon } from '../../shared/patterns/affix';
4
+ export declare type BannerConnotation = Connotation.Info | Connotation.Announcement | Connotation.Success | Connotation.Warning | Connotation.Alert;
5
+ export declare class Banner extends FoundationElement {
6
+ #private;
7
+ actionHref: string | undefined;
8
+ actionText: string | undefined;
9
+ removable: boolean;
10
+ ariaLive: any;
11
+ role: string | undefined;
12
+ text: string | undefined;
13
+ connotation: BannerConnotation | undefined;
14
+ get conditionedIcon(): string;
15
+ connectedCallback(): void;
16
+ disconnectedCallback(): void;
17
+ remove(): void;
18
+ }
19
+ export interface Banner extends AffixIcon {
20
+ }
@@ -0,0 +1,4 @@
1
+ import type { ViewTemplate } from '@microsoft/fast-element';
2
+ import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
3
+ import type { Banner } from './banner';
4
+ export declare const BannerTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Banner>;
@@ -0,0 +1,3 @@
1
+ import '../button';
2
+ import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
3
+ export declare const vividBanner: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -0,0 +1,4 @@
1
+ import type { ViewTemplate } from '@microsoft/fast-element';
2
+ import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
3
+ import type { Breadcrumb } from './breadcrumb';
4
+ export declare const breadcrumbTemplate: FoundationElementTemplate<ViewTemplate<Breadcrumb>>;
@@ -1,5 +1,5 @@
1
1
  import { BreadcrumbItem as FastBreadcrumbItem } from '@microsoft/fast-foundation';
2
2
  export declare class BreadcrumbItem extends FastBreadcrumbItem {
3
- text: string;
3
+ text?: string;
4
4
  constructor();
5
5
  }
@@ -1,5 +1,4 @@
1
1
  import type { ViewTemplate } from '@microsoft/fast-element';
2
2
  import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
3
3
  import type { BreadcrumbItem } from './breadcrumb-item';
4
- import '../icon';
5
4
  export declare const BreadcrumbItemTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<BreadcrumbItem>;
@@ -1,2 +1,4 @@
1
+ import '../icon';
2
+ import '../focus';
1
3
  import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
2
4
  export declare const vividBreadcrumbItem: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -1,17 +1,18 @@
1
1
  import { Button as FoundationButton } from '@microsoft/fast-foundation';
2
- import type { Appearance, Connotation, Shape, Size } from '../enums.js';
3
- import { PrefixOrSuffix } from '../../shared/patterns/affix';
4
- declare type ButtonConnotation = Extract<Connotation, Connotation.Primary | Connotation.CTA | Connotation.Success | Connotation.Alert>;
5
- export declare type ButtonAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Soft>;
2
+ import type { Appearance, Connotation, Density, Shape } from '../enums.js';
3
+ import { AffixIconWithTrailing } from '../../shared/patterns/affix';
4
+ declare type ButtonConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert>;
5
+ export declare type ButtonAppearance = Extract<Appearance, Appearance.Filled | Appearance.Outlined | Appearance.Ghost>;
6
6
  declare type ButtonShape = Extract<Shape, Shape.Rounded | Shape.Pill>;
7
- declare type ButtonSize = Extract<Size, Size.BaseSmall | Size.Base | Size.BaseLarge>;
7
+ declare type ButtonDensity = Extract<Density, Density.Condensed | Density.Normal | Density.Extended>;
8
8
  export declare class Button extends FoundationButton {
9
9
  connotation?: ButtonConnotation;
10
10
  shape?: ButtonShape;
11
11
  appearance?: ButtonAppearance;
12
- size?: ButtonSize;
13
- label: string;
12
+ density?: ButtonDensity;
13
+ stacked: boolean;
14
+ label?: string;
14
15
  }
15
- export interface Button extends PrefixOrSuffix {
16
+ export interface Button extends AffixIconWithTrailing {
16
17
  }
17
18
  export {};
@@ -1,21 +1,4 @@
1
1
  import '../icon';
2
2
  import '../focus';
3
- import { Button as FastButton } from '@microsoft/fast-foundation';
4
- import { Button } from './button';
5
- export declare const vividButton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<{
6
- baseName: string;
7
- baseClass: typeof FastButton;
8
- template: any;
9
- styles: import("@microsoft/fast-element").ComposableStyles;
10
- shadowOptions: {
11
- delegatesFocus: true;
12
- };
13
- }> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<{
14
- baseName: string;
15
- baseClass: typeof FastButton;
16
- template: any;
17
- styles: import("@microsoft/fast-element").ComposableStyles;
18
- shadowOptions: {
19
- delegatesFocus: true;
20
- };
21
- }, typeof Button>;
3
+ import { type FoundationElementDefinition } from '@microsoft/fast-foundation';
4
+ export declare const vividButton: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -0,0 +1,13 @@
1
+ import { FoundationElement } from '@microsoft/fast-foundation';
2
+ export declare class Calendar extends FoundationElement {
3
+ #private;
4
+ datetime?: Date | string;
5
+ startDay?: 'sunday' | 'monday';
6
+ locales?: string | string[] | undefined;
7
+ hour12: boolean;
8
+ getEventContext: (this: Calendar, e: KeyboardEvent | MouseEvent) => import("./helpers/calendar.event-context").CalendarEventContext | null;
9
+ private getCalendarEventContainingCell;
10
+ private arrowKeysInteractions;
11
+ private activateElement;
12
+ onKeydown({ key }: KeyboardEvent): boolean;
13
+ }
@@ -0,0 +1,4 @@
1
+ import type { ViewTemplate } from '@microsoft/fast-element';
2
+ import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
3
+ import type { Calendar } from './calendar';
4
+ export declare const CalendarTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Calendar>;
@@ -0,0 +1,2 @@
1
+ export declare function getValidDateString(date: Date): string;
2
+ export declare function getFirstDateOfTheWeek(date: Date | undefined, startDay: 'sunday' | 'monday'): Date;
@@ -0,0 +1,6 @@
1
+ import type { Calendar } from '../calendar';
2
+ export interface CalendarEventContext {
3
+ day?: number;
4
+ hour?: number;
5
+ }
6
+ export declare const getEventContext: (this: Calendar, e: KeyboardEvent | MouseEvent) => CalendarEventContext | null;
@@ -0,0 +1,9 @@
1
+ import type { Calendar } from '../calendar';
2
+ export declare const ARROW_UP = "ArrowUp";
3
+ export declare const ARROW_RIGHT = "ArrowRight";
4
+ export declare const ARROW_DOWN = "ArrowDown";
5
+ export declare const ARROW_LEFT = "ArrowLeft";
6
+ export declare type PredefindKeys = typeof ARROW_UP | typeof ARROW_RIGHT | typeof ARROW_DOWN | typeof ARROW_LEFT;
7
+ export declare function isCellOrHeader(el: unknown): el is HTMLElement;
8
+ export declare function getNextFocusableGridElement(this: Calendar, key: PredefindKeys, activeElement: HTMLElement): Element | null | void;
9
+ export declare function getHeaderDescendantGridCell(this: Calendar, key: PredefindKeys, activeElement: HTMLElement): Element | null | undefined;
@@ -0,0 +1,2 @@
1
+ import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
2
+ export declare const vividCalendar: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -0,0 +1,14 @@
1
+ import { FoundationElement } from '@microsoft/fast-foundation';
2
+ import type { Appearance, Connotation } from '../enums';
3
+ declare type CalendarEventConnotation = Extract<Connotation, Connotation.Accent | Connotation.CTA | Connotation.Success | Connotation.Alert | Connotation.Warning | Connotation.Info | Connotation.Announcement>;
4
+ declare type CalendarEventAppearance = Extract<Appearance, Appearance.Filled | Appearance.Duotone | Appearance.Subtle>;
5
+ export declare class CalendarEvent extends FoundationElement {
6
+ heading?: string;
7
+ description?: string;
8
+ connotation?: CalendarEventConnotation;
9
+ appearance?: CalendarEventAppearance;
10
+ overlapCount?: number;
11
+ start?: number;
12
+ duration?: number;
13
+ }
14
+ export {};
@@ -0,0 +1,4 @@
1
+ import type { ViewTemplate } from '@microsoft/fast-element';
2
+ import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
3
+ import type { CalendarEvent } from './calendar-event';
4
+ export declare const CalendarEventTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<CalendarEvent>;
@@ -0,0 +1,2 @@
1
+ import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
2
+ export declare const vividCalendarEvent: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -0,0 +1,10 @@
1
+ import { FoundationElement } from '@microsoft/fast-foundation';
2
+ export declare class Card extends FoundationElement {
3
+ heading?: string;
4
+ subheading?: string;
5
+ text?: string;
6
+ icon?: string;
7
+ elevation?: 0 | 2 | 4 | 8 | 12 | 16 | 24;
8
+ graphicSlottedContent?: HTMLElement[];
9
+ hasMetaSlottedContent?: HTMLElement[];
10
+ }
@@ -0,0 +1,4 @@
1
+ import type { ViewTemplate } from '@microsoft/fast-element';
2
+ import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
3
+ import type { Card } from './card';
4
+ export declare const CardTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Card>;
@@ -0,0 +1,4 @@
1
+ import '../elevation';
2
+ import '../icon';
3
+ import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
4
+ export declare const vividCard: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -0,0 +1,5 @@
1
+ import { Checkbox as FastCheckbox } from '@microsoft/fast-foundation';
2
+ export declare const keySpace: ' ';
3
+ export declare class Checkbox extends FastCheckbox {
4
+ label?: string;
5
+ }
@@ -0,0 +1,4 @@
1
+ import type { ViewTemplate } from '@microsoft/fast-element';
2
+ import type { CheckboxOptions, FoundationElementTemplate } from '@microsoft/fast-foundation';
3
+ import type { Checkbox } from './checkbox';
4
+ export declare const CheckboxTemplate: FoundationElementTemplate<ViewTemplate<Checkbox>, CheckboxOptions>;
@@ -0,0 +1,4 @@
1
+ import '../icon';
2
+ import '../focus';
3
+ import type { CheckboxOptions } from '@microsoft/fast-foundation';
4
+ export declare const vividCheckbox: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<CheckboxOptions> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<CheckboxOptions, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -1,9 +1,27 @@
1
- export * from './text-anchor';
1
+ export * from './accordion';
2
+ export * from './accordion-item';
3
+ export * from './action-group';
2
4
  export * from './badge';
5
+ export * from './banner';
6
+ export * from './breadcrumb';
7
+ export * from './breadcrumb-item';
3
8
  export * from './button';
4
- export * from './focus';
9
+ export * from './calendar';
10
+ export * from './calendar-event';
11
+ export * from './card';
12
+ export * from './elevation';
13
+ export * from './fab';
5
14
  export * from './icon';
6
15
  export * from './layout';
7
- export * from './elevation';
8
- export * from './breadcrumb-item';
9
- export * from './breadcrumb';
16
+ export * from './note';
17
+ export * from './popup';
18
+ export * from './progress';
19
+ export * from './progress-ring';
20
+ export * from './side-drawer';
21
+ export * from './sidenav';
22
+ export * from './sidenav-item';
23
+ export * from './text';
24
+ export * from './text-field';
25
+ export * from './tooltip';
26
+ export * from './checkbox';
27
+ export * from './header';
@@ -0,0 +1,20 @@
1
+ import { FoundationElement } from '@microsoft/fast-foundation';
2
+ export declare class Dialog extends FoundationElement {
3
+ #private;
4
+ open: boolean;
5
+ icon?: string;
6
+ text?: string;
7
+ headline?: string;
8
+ ariaLabelledBy: string | null;
9
+ ariaLabel: string | null;
10
+ ariaDescribedBy: string | null;
11
+ set returnValue(value: string);
12
+ get returnValue(): string;
13
+ get modal(): boolean;
14
+ openChanged(oldValue: boolean, newValue: boolean): void;
15
+ close(): void;
16
+ show(): void;
17
+ showModal(): void;
18
+ connectedCallback(): void;
19
+ disconnectedCallback(): void;
20
+ }
@@ -0,0 +1,4 @@
1
+ import type { ViewTemplate } from '@microsoft/fast-element';
2
+ import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
3
+ import type { Dialog } from './dialog';
4
+ export declare const DialogTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Dialog>;
@@ -0,0 +1,5 @@
1
+ import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
2
+ import '../icon';
3
+ import '../button';
4
+ import '../elevation';
5
+ export declare const vividDialog: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -0,0 +1,3 @@
1
+ import { Divider as FoundationDivider } from '@microsoft/fast-foundation';
2
+ export declare class Divider extends FoundationDivider {
3
+ }
@@ -0,0 +1,4 @@
1
+ import type { ViewTemplate } from '@microsoft/fast-element';
2
+ import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
3
+ import type { Divider } from './divider';
4
+ export declare const DividerTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Divider>;
@@ -0,0 +1,2 @@
1
+ import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
2
+ export declare const vividDivider: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
@@ -1,4 +1,5 @@
1
1
  import { FoundationElement } from '@microsoft/fast-foundation';
2
2
  export declare class Elevation extends FoundationElement {
3
- dp: number;
3
+ dp?: 0 | 2 | 4 | 8 | 12 | 16 | 24;
4
+ noShadow?: boolean;
4
5
  }
@@ -1,2 +1,2 @@
1
1
  import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
2
- export declare const VIVIDElevation: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;
2
+ export declare const vividElevation: (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/enums.d.ts CHANGED
@@ -1,5 +1,5 @@
1
1
  export declare enum Connotation {
2
- Primary = "primary",
2
+ Accent = "accent",
3
3
  CTA = "cta",
4
4
  Success = "success",
5
5
  Alert = "alert",
@@ -13,19 +13,26 @@ export declare enum ConnotationDecorative {
13
13
  export declare enum Shape {
14
14
  Rounded = "rounded",
15
15
  Pill = "pill",
16
- Circled = "circled"
16
+ Circled = "circled",
17
+ Sharp = "sharp"
17
18
  }
18
19
  export declare enum Appearance {
19
- Text = "text",
20
20
  Filled = "filled",
21
21
  Outlined = "outlined",
22
- Soft = "soft",
22
+ Duotone = "duotone",
23
+ Fieldset = "fieldset",
24
+ Subtle = "subtle",
23
25
  Ghost = "ghost"
24
26
  }
27
+ export declare enum Density {
28
+ Condensed = "condensed",
29
+ Normal = "normal",
30
+ Extended = "extended"
31
+ }
25
32
  export declare enum Size {
26
- BaseSmall = "base-small",
27
- Base = "base",
28
- BaseLarge = "base-large"
33
+ Small = "small",
34
+ Medium = "medium",
35
+ Large = "large"
29
36
  }
30
37
  export declare enum Position {
31
38
  Top = "TOP",
@@ -0,0 +1,13 @@
1
+ import { Button as FoundationButton } from '@microsoft/fast-foundation';
2
+ import type { Connotation, Density } from '../enums.js';
3
+ import { AffixIconWithTrailing } from '../../shared/patterns/affix';
4
+ export declare type FabConnotation = Extract<Connotation, Connotation.CTA | Connotation.Accent>;
5
+ declare type FABDensity = Extract<Density, Density.Normal | Density.Extended>;
6
+ export declare class Fab extends FoundationButton {
7
+ connotation?: FabConnotation;
8
+ density?: FABDensity;
9
+ label?: string;
10
+ }
11
+ export interface Fab extends AffixIconWithTrailing {
12
+ }
13
+ export {};
@@ -0,0 +1,4 @@
1
+ import type { ViewTemplate } from '@microsoft/fast-element';
2
+ import type { ElementDefinitionContext, FoundationElementDefinition } from '@microsoft/fast-foundation';
3
+ import type { Fab } from './fab';
4
+ export declare const FabTemplate: (context: ElementDefinitionContext, definition: FoundationElementDefinition) => ViewTemplate<Fab>;
@@ -0,0 +1,4 @@
1
+ import '../icon';
2
+ import '../focus';
3
+ import type { FoundationElementDefinition } from '@microsoft/fast-foundation';
4
+ export declare const vividFab: (overrideDefinition?: import("@microsoft/fast-foundation").OverrideFoundationElementDefinition<FoundationElementDefinition> | undefined) => import("@microsoft/fast-foundation").FoundationElementRegistry<FoundationElementDefinition, import("@microsoft/fast-element").Constructable<import("@microsoft/fast-foundation").FoundationElement>>;