@fluentui/web-components 3.0.0-beta.28 → 3.0.0-beta.29

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 (40) hide show
  1. package/CHANGELOG.md +12 -2
  2. package/dist/dts/anchor-button/anchor-button.d.ts +36 -34
  3. package/dist/dts/index-rollup.d.ts +1 -0
  4. package/dist/dts/index.d.ts +2 -2
  5. package/dist/dts/link/define.d.ts +1 -0
  6. package/dist/dts/link/index.d.ts +4 -0
  7. package/dist/dts/link/link.bench.d.ts +3 -0
  8. package/dist/dts/link/link.d.ts +33 -0
  9. package/dist/dts/link/link.definition.d.ts +7 -0
  10. package/dist/dts/link/link.options.d.ts +52 -0
  11. package/dist/dts/link/link.styles.d.ts +1 -0
  12. package/dist/dts/link/link.template.d.ts +12 -0
  13. package/dist/esm/anchor-button/anchor-button.js +26 -21
  14. package/dist/esm/anchor-button/anchor-button.js.map +1 -1
  15. package/dist/esm/index-rollup.js +1 -0
  16. package/dist/esm/index-rollup.js.map +1 -1
  17. package/dist/esm/index.js +2 -1
  18. package/dist/esm/index.js.map +1 -1
  19. package/dist/esm/link/define.js +4 -0
  20. package/dist/esm/link/define.js.map +1 -0
  21. package/dist/esm/link/index.js +5 -0
  22. package/dist/esm/link/index.js.map +1 -0
  23. package/dist/esm/link/link.bench.js +11 -0
  24. package/dist/esm/link/link.bench.js.map +1 -0
  25. package/dist/esm/link/link.definition.js +15 -0
  26. package/dist/esm/link/link.definition.js.map +1 -0
  27. package/dist/esm/link/link.js +36 -0
  28. package/dist/esm/link/link.js.map +1 -0
  29. package/dist/esm/link/link.options.js +21 -0
  30. package/dist/esm/link/link.options.js.map +1 -0
  31. package/dist/esm/link/link.styles.js +67 -0
  32. package/dist/esm/link/link.styles.js.map +1 -0
  33. package/dist/esm/link/link.template.js +22 -0
  34. package/dist/esm/link/link.template.js.map +1 -0
  35. package/dist/esm/theme/set-theme.js +8 -3
  36. package/dist/esm/theme/set-theme.js.map +1 -1
  37. package/dist/web-components.d.ts +211 -136
  38. package/dist/web-components.js +330 -281
  39. package/dist/web-components.min.js +232 -228
  40. package/package.json +6 -1
package/dist/esm/link/link.template.js ADDED
@@ -0,0 +1,22 @@
1
+ import { html } from '@microsoft/fast-element';
2
+ /**
3
+ * The template for the Link component.
4
+ * @public
5
+ */
6
+ export function anchorTemplate() {
7
+ return html `
8
+ <template
9
+ tabindex="0"
10
+ @click="${x => x.clickHandler()}"
11
+ @keypress="${(x, c) => x.keypressHandler(c.event)}"
12
+ >
13
+ <slot></slot>
14
+ </template>
15
+ `;
16
+ }
17
+ /**
18
+ * The template for the Link component.
19
+ * @public
20
+ */
21
+ export const template = anchorTemplate();
22
+ //# sourceMappingURL=link.template.js.map
package/dist/esm/link/link.template.js.map ADDED
@@ -0,0 +1 @@
1
+ {"version":3,"file":"link.template.js","sourceRoot":"","sources":["../../../src/link/link.template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAuB,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAGlF;;;GAGG;AACH,MAAM,UAAU,cAAc;IAC5B,OAAO,IAAI,CAAG;;;gBAGA,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,YAAY,EAAE;mBAClB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,eAAe,CAAC,CAAC,CAAC,KAAsB,CAAC;;;;GAIrE,CAAC;AACJ,CAAC;AAED;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAA8B,cAAc,EAAE,CAAC"}
package/dist/esm/theme/set-theme.js CHANGED
@@ -7,6 +7,7 @@ const tokenNames = Object.keys(tokens);
7
7
  */
8
8
  export const setTheme = (theme) => {
9
9
  for (const t of tokenNames) {
10
+ let registered = false;
10
11
  if ('registerProperty' in CSS) {
11
12
  try {
12
13
  CSS.registerProperty({
@@ -14,13 +15,17 @@ export const setTheme = (theme) => {
14
15
  inherits: true,
15
16
  initialValue: theme[t],
16
17
  });
18
+ registered = true;
17
19
  }
18
20
  catch {
19
- document.body.style.setProperty(`--${t}`, theme[t]);
21
+ // Do nothing.
20
22
  }
21
23
  }
22
- else {
23
- document.body.style.setProperty(`--${t}`, theme[t]);
24
+ if (!registered) {
25
+ // TODO: Find a better way to update the values. Current approach adds
26
+ // lots of code to the `style` attribute on `<body>`. Maybe look into
27
+ // `document.adoptedStyleSheets`.
28
+ setThemeFor(document.body, theme);
24
29
  }
25
30
  }
26
31
  };
package/dist/esm/theme/set-theme.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAE7C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAoB,CAAC;AAE1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,IAAI,kBAAkB,IAAI,GAAG,EAAE;YAC7B,IAAI;gBACF,GAAG,CAAC,gBAAgB,CAAC;oBACnB,IAAI,EAAE,KAAK,CAAC,EAAE;oBACd,QAAQ,EAAE,IAAI;oBACd,YAAY,EAAE,KAAK,CAAC,CAAC,CAAW;iBACjC,CAAC,CAAC;aACJ;YAAC,MAAM;gBACN,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;aAC/D;SACF;aAAM;YACL,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;SAC/D;KACF;AACH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAY,EAAE,EAAE;IAChE,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;KACzD;AACH,CAAC,CAAC"}
1
+ {"version":3,"file":"set-theme.js","sourceRoot":"","sources":["../../../src/theme/set-theme.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,MAAM,MAAM,oBAAoB,CAAC;AAE7C,MAAM,UAAU,GAAG,MAAM,CAAC,IAAI,CAAC,MAAM,CAAoB,CAAC;AAE1D;;;;GAIG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG,CAAC,KAAY,EAAE,EAAE;IACvC,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,IAAI,UAAU,GAAG,KAAK,CAAC;QAEvB,IAAI,kBAAkB,IAAI,GAAG,EAAE;YAC7B,IAAI;gBACF,GAAG,CAAC,gBAAgB,CAAC;oBACnB,IAAI,EAAE,KAAK,CAAC,EAAE;oBACd,QAAQ,EAAE,IAAI;oBACd,YAAY,EAAE,KAAK,CAAC,CAAC,CAAW;iBACjC,CAAC,CAAC;gBACH,UAAU,GAAG,IAAI,CAAC;aACnB;YAAC,MAAM;gBACN,cAAc;aACf;SACF;QAED,IAAI,CAAC,UAAU,EAAE;YACf,sEAAsE;YACtE,qEAAqE;YACrE,iCAAiC;YACjC,WAAW,CAAC,QAAQ,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;SACnC;KACF;AACH,CAAC,CAAC;AAEF;;GAEG;AACH,MAAM,CAAC,MAAM,WAAW,GAAG,CAAC,OAAoB,EAAE,KAAY,EAAE,EAAE;IAChE,KAAK,MAAM,CAAC,IAAI,UAAU,EAAE;QAC1B,OAAO,CAAC,KAAK,CAAC,WAAW,CAAC,KAAK,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC,CAAW,CAAC,CAAC;KACzD;AACH,CAAC,CAAC"}
package/dist/web-components.d.ts CHANGED
@@ -238,103 +238,7 @@ export declare const accordionStyles: ElementStyles;
238
238
 
239
239
  export declare const accordionTemplate: ElementViewTemplate<Accordion>;
240
240
 
241
- /**
242
- * An Anchor Custom HTML Element.
243
- * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
244
- *
245
- * @slot start - Content which can be provided before the anchor content
246
- * @slot end - Content which can be provided after the anchor content
247
- * @slot - The default slot for anchor content
248
- * @csspart control - The anchor element
249
- * @csspart content - The element wrapping anchor content
250
- *
251
- * @public
252
- */
253
- export declare class AnchorButton extends FASTElement {
254
- /**
255
- * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
256
- *
257
- * @internal
258
- */
259
- protected elementInternals: ElementInternals;
260
- /**
261
- * The proxy anchor element
262
- * @internal
263
- */
264
- private internalProxyAnchor;
265
- /**
266
- * Prompts the user to save the linked URL.
267
- *
268
- * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#download | `download`} attribute
269
- *
270
- * @public
271
- * @remarks
272
- * HTML Attribute: `download`
273
- */
274
- download?: string;
275
- /**
276
- * The URL the hyperlink references.
277
- * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#href | `href`} attribute
278
- *
279
- * @public
280
- * @remarks
281
- * HTML Attribute: `href`
282
- */
283
- href?: string;
284
- /**
285
- * Hints at the language of the referenced resource.
286
- * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#hreflang | `hreflang`} attribute
287
- *
288
- * @public
289
- * @remarks
290
- * HTML Attribute: `hreflang`
291
- */
292
- hreflang?: string;
293
- /**
294
- * The ping attribute.
295
- * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#ping | `ping`} attribute
296
- *
297
- * @public
298
- * @remarks
299
- * HTML Attribute: `ping`
300
- */
301
- ping?: string;
302
- /**
303
- * The referrerpolicy attribute.
304
- * See The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#referrerpolicy | `referrerpolicy`} attribute
305
- *
306
- * @public
307
- * @remarks
308
- * HTML Attribute: `referrerpolicy`
309
- */
310
- referrerpolicy?: string;
311
- /**
312
- * The rel attribute.
313
- * See The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#rel | `rel`} attribute
314
- *
315
- * @public
316
- * @remarks
317
- * HTML Attribute: `rel`
318
- */
319
- rel: string;
320
- /**
321
- * The target attribute.
322
- * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#target | `target`} attribute
323
- *
324
- * @public
325
- * @remarks
326
- * HTML Attribute: `target`
327
- */
328
- target?: AnchorTarget;
329
- /**
330
- * The type attribute.
331
- * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#type | `type`} attribute
332
- *
333
- * @public
334
- * @remarks
335
- * HTML Attribute: `type`
336
- */
337
- type?: string;
241
+ export declare class AnchorButton extends BaseAnchor {
338
242
  /**
339
243
  * The appearance the anchor button should have.
340
244
  *
@@ -367,39 +271,6 @@ export declare class AnchorButton extends FASTElement {
367
271
  * HTML Attribute: `icon-only`
368
272
  */
369
273
  iconOnly: boolean;
370
- constructor();
371
- connectedCallback(): void;
372
- disconnectedCallback(): void;
373
- /**
374
- * Handles changes to observable properties
375
- * @internal
376
- * @param source
377
- * @param propertyName
378
- */
379
- handleChange(source: any, propertyName: string): void;
380
- /**
381
- * Handles the anchor click event.
382
- *
383
- * @param e - The event object
384
- * @internal
385
- */
386
- clickHandler(): boolean;
387
- /**
388
- * Handles keypress events for the anchor.
389
- *
390
- * @param e - the keyboard event
391
- * @returns - the return value of the click handler
392
- * @public
393
- */
394
- keypressHandler(e: KeyboardEvent): boolean | void;
395
- /**
396
- * A method for updating proxy attributes when attributes have changed
397
- * @internal
398
- * @param attribute
399
- * @param value
400
- */
401
- private handleProxyAttributeChange;
402
- private createProxyElement;
403
274
  }
404
275
 
405
276
  /**
@@ -436,12 +307,6 @@ export declare type AnchorButtonAppearance = ValuesOf<typeof AnchorButtonAppeara
436
307
  */
437
308
  export declare const AnchorButtonDefinition: FASTElementDefinition<typeof AnchorButton>;
438
309
 
439
- /**
440
- * Anchor configuration options
441
- * @public
442
- */
443
- export declare type AnchorButtonOptions = StartEndOptions<AnchorButton>;
444
-
445
310
  /**
446
311
  * An Anchor Button can be square, circular or rounded.
447
312
  * @public
@@ -900,6 +765,138 @@ export declare const BadgeStyles: ElementStyles;
900
765
 
901
766
  export declare const BadgeTemplate: ElementViewTemplate<Badge>;
902
767
 
768
+ /**
769
+ * An Anchor Custom HTML Element.
770
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
771
+ *
772
+ * @slot start - Content which can be provided before the anchor content
773
+ * @slot end - Content which can be provided after the anchor content
774
+ * @slot - The default slot for anchor content
775
+ * @csspart control - The anchor element
776
+ * @csspart content - The element wrapping anchor content
777
+ *
778
+ * @public
779
+ */
780
+ declare class BaseAnchor extends FASTElement {
781
+ /**
782
+ * The internal {@link https://developer.mozilla.org/docs/Web/API/ElementInternals | `ElementInternals`} instance for the component.
783
+ *
784
+ * @internal
785
+ */
786
+ protected elementInternals: ElementInternals;
787
+ /**
788
+ * The proxy anchor element
789
+ * @internal
790
+ */
791
+ private internalProxyAnchor;
792
+ /**
793
+ * Prompts the user to save the linked URL.
794
+ *
795
+ * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#download | `download`} attribute
796
+ *
797
+ * @public
798
+ * @remarks
799
+ * HTML Attribute: `download`
800
+ */
801
+ download?: string;
802
+ /**
803
+ * The URL the hyperlink references.
804
+ * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#href | `href`} attribute
805
+ *
806
+ * @public
807
+ * @remarks
808
+ * HTML Attribute: `href`
809
+ */
810
+ href?: string;
811
+ /**
812
+ * Hints at the language of the referenced resource.
813
+ * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#hreflang | `hreflang`} attribute
814
+ *
815
+ * @public
816
+ * @remarks
817
+ * HTML Attribute: `hreflang`
818
+ */
819
+ hreflang?: string;
820
+ /**
821
+ * The ping attribute.
822
+ * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#ping | `ping`} attribute
823
+ *
824
+ * @public
825
+ * @remarks
826
+ * HTML Attribute: `ping`
827
+ */
828
+ ping?: string;
829
+ /**
830
+ * The referrerpolicy attribute.
831
+ * See The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#referrerpolicy | `referrerpolicy`} attribute
832
+ *
833
+ * @public
834
+ * @remarks
835
+ * HTML Attribute: `referrerpolicy`
836
+ */
837
+ referrerpolicy?: string;
838
+ /**
839
+ * The rel attribute.
840
+ * See The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#rel | `rel`} attribute
841
+ *
842
+ * @public
843
+ * @remarks
844
+ * HTML Attribute: `rel`
845
+ */
846
+ rel: string;
847
+ /**
848
+ * The target attribute.
849
+ * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#target | `target`} attribute
850
+ *
851
+ * @public
852
+ * @remarks
853
+ * HTML Attribute: `target`
854
+ */
855
+ target?: AnchorTarget;
856
+ /**
857
+ * The type attribute.
858
+ * @see The {@link https://developer.mozilla.org/docs/Web/HTML/Element/a#type | `type`} attribute
859
+ *
860
+ * @public
861
+ * @remarks
862
+ * HTML Attribute: `type`
863
+ */
864
+ type?: string;
865
+ constructor();
866
+ connectedCallback(): void;
867
+ disconnectedCallback(): void;
868
+ /**
869
+ * Handles changes to observable properties
870
+ * @internal
871
+ * @param source - the source of the change
872
+ * @param propertyName - the property name being changed
873
+ */
874
+ handleChange(source: any, propertyName: string): void;
875
+ /**
876
+ * Handles the anchor click event.
877
+ *
878
+ * @param e - The event object
879
+ * @internal
880
+ */
881
+ clickHandler(): boolean;
882
+ /**
883
+ * Handles keypress events for the anchor.
884
+ *
885
+ * @param e - the keyboard event
886
+ * @returns - the return value of the click handler
887
+ * @public
888
+ */
889
+ keypressHandler(e: KeyboardEvent): boolean | void;
890
+ /**
891
+ * A method for updating proxy attributes when attributes have changed
892
+ * @internal
893
+ * @param attribute - an attribute to set/remove
894
+ * @param value - the value of the attribute
895
+ */
896
+ private handleProxyAttributeChange;
897
+ private createProxyElement;
898
+ }
899
+
903
900
  /**
904
901
  * A Checkbox Custom HTML Element.
905
902
  * Implements the {@link https://www.w3.org/TR/wai-aria-1.1/#checkbox | ARIA checkbox }.
@@ -5111,6 +5108,84 @@ export declare const lineHeightHero800 = "var(--lineHeightHero800)";
5111
5108
  */
5112
5109
  export declare const lineHeightHero900 = "var(--lineHeightHero900)";
5113
5110
 
5111
+ /**
5112
+ * An Anchor Custom HTML Element.
5113
+ * Based largely on the {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Element/a | <a> element }.
5114
+ *
5115
+ * @slot start - Content which can be provided before the link content
5116
+ * @slot end - Content which can be provided after the link content
5117
+ * @slot - The default slot for link content
5118
+ *
5119
+ * @public
5120
+ */
5121
+ export declare class Link extends BaseAnchor {
5122
+ /**
5123
+ * The appearance the link should have.
5124
+ *
5125
+ * @public
5126
+ * @remarks
5127
+ * HTML Attribute: `appearance`
5128
+ */
5129
+ appearance?: LinkAppearance | undefined;
5130
+ /**
5131
+ * The link is inline with text
5132
+ * In chromium browsers, if the link is contained within a semantic
5133
+ * text element (`h1`, `h2`, `h3`, `h4`, `h5`, `h6`, `p`) or `fluent-text`,
5134
+ * `:host-context()` ensures inline links are styled appropriately.
5135
+ *
5136
+ * @public
5137
+ * @remarks
5138
+ * HTML Attribute: `inline`
5139
+ */
5140
+ inline: boolean;
5141
+ }
5142
+
5143
+ /**
5144
+ * Link Appearance constants
5145
+ * @public
5146
+ */
5147
+ export declare const LinkAppearance: {
5148
+ readonly subtle: "subtle";
5149
+ };
5150
+
5151
+ /**
5152
+ * An Link can be subtle or the default appearance
5153
+ * @public
5154
+ */
5155
+ export declare type LinkAppearance = ValuesOf<typeof LinkAppearance>;
5156
+
5157
+ /**
5158
+ * @public
5159
+ * @remarks
5160
+ * HTML Element: \<fluent-link\>
5161
+ */
5162
+ export declare const LinkDefinition: FASTElementDefinition<typeof Link>;
5163
+
5164
+ /**
5165
+ * Link target values.
5166
+ *
5167
+ * @public
5168
+ */
5169
+ export declare const LinkTarget: {
5170
+ readonly _self: "_self";
5171
+ readonly _blank: "_blank";
5172
+ readonly _parent: "_parent";
5173
+ readonly _top: "_top";
5174
+ };
5175
+
5176
+ /**
5177
+ * Type for link target values.
5178
+ *
5179
+ * @public
5180
+ */
5181
+ export declare type LinkTarget = ValuesOf<typeof AnchorTarget>;
5182
+
5183
+ /**
5184
+ * The template for the Link component.
5185
+ * @public
5186
+ */
5187
+ export declare const LinkTemplate: ElementViewTemplate<Link>;
5188
+
5114
5189
  /**
5115
5190
  * An abstract behavior to react to media queries. Implementations should implement
5116
5191
  * the `constructListener` method to perform some action based on media query changes.