@fluentui/web-components 3.0.0-rc.3 → 3.0.0-rc.31

package/dist/esm/field/field.styles.css

@@ -0,0 +1,125 @@
+:host([hidden]) {
+  display: none;
+}
+:host {
+  display: inline-grid;
+}
+
+:host {
+  color: var(--colorNeutralForeground1);
+  align-items: center;
+  gap: 0 var(--spacingHorizontalM);
+  justify-items: start;
+}
+
+:has([slot='message']) {
+  color: var(--colorNeutralForeground1);
+  row-gap: var(--spacingVerticalS);
+}
+
+:not(::slotted([slot='label'])) {
+  gap: 0;
+}
+
+:host([label-position='before']) {
+  grid-template-areas: 'label input' 'label message';
+}
+
+:host([label-position='after']) {
+  gap: 0;
+  grid-template-areas: 'input label' 'message message';
+  grid-template-columns: auto 1fr;
+}
+
+:host([label-position='after']) ::slotted([slot='input']) {
+  margin-inline-end: var(--spacingHorizontalM);
+}
+
+:host([label-position='above']) {
+  grid-template-areas: 'label' 'input' 'message';
+  row-gap: var(--spacingVerticalXXS);
+}
+
+:host([label-position='below']) {
+  grid-template-areas: 'input' 'label' 'message';
+  justify-items: center;
+}
+
+:host([label-position='below']) ::slotted([slot='label']) {
+  margin-block-start: var(--spacingVerticalM);
+}
+
+:host(:state(required)) ::slotted([slot='label'])::after {
+  content: '*' / '';
+  color: var(--colorPaletteRedForeground1);
+  margin-inline-start: var(--spacingHorizontalXS);
+}
+
+::slotted([slot='input']) {
+  grid-area: input;
+}
+
+::slotted([slot='message']) {
+  color: var(--colorNeutralForeground3);
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase200);
+  font-weight: var(--fontWeightRegular);
+  grid-area: message;
+  line-height: var(--lineHeightBase200);
+  margin-block-start: var(--spacingVerticalXXS);
+}
+
+:host(:state(focus-visible):focus-within) {
+  border-radius: var(--borderRadiusMedium);
+  outline: var(--strokeWidthThick) solid var(--colorStrokeFocus2);
+}
+
+::slotted(label),
+::slotted([slot='label']) {
+  cursor: inherit;
+  display: inline-flex;
+  font-family: var(--fontFamilyBase);
+  font-size: var(--fontSizeBase300);
+  font-weight: var(--fontWeightRegular);
+  grid-area: label;
+  line-height: var(--lineHeightBase300);
+  justify-self: stretch;
+  user-select: none;
+}
+
+:host([size='small']) ::slotted(label) {
+  font-size: var(--fontSizeBase200);
+  line-height: var(--lineHeightBase200);
+}
+
+:host([size='large']) ::slotted(label) {
+  font-size: var(--fontSizeBase400);
+  line-height: var(--lineHeightBase400);
+}
+
+:host([size='large']) ::slotted(label),
+:host([weight='semibold']) ::slotted(label) {
+  font-weight: var(--fontWeightSemibold);
+}
+
+:host(:state(disabled)) {
+  cursor: default;
+}
+
+::slotted([flag]) {
+  display: none;
+}
+
+:host(:state(bad-input)) ::slotted([flag='bad-input']),
+:host(:state(custom-error)) ::slotted([flag='custom-error']),
+:host(:state(pattern-mismatch)) ::slotted([flag='pattern-mismatch']),
+:host(:state(range-overflow)) ::slotted([flag='range-overflow']),
+:host(:state(range-underflow)) ::slotted([flag='range-underflow']),
+:host(:state(step-mismatch)) ::slotted([flag='step-mismatch']),
+:host(:state(too-long)) ::slotted([flag='too-long']),
+:host(:state(too-short)) ::slotted([flag='too-short']),
+:host(:state(type-mismatch)) ::slotted([flag='type-mismatch']),
+:host(:state(value-missing)) ::slotted([flag='value-missing']),
+:host(:state(valid)) ::slotted([flag='valid']) {
+  display: block;
+}

package/dist/esm/field/field.template.html

@@ -0,0 +1,13 @@
+<f-template name="fluent-field" shadowrootmode="open" shadowrootdelegatesfocus>
+  <template
+    @click="{clickHandler($e)}"
+    @change="{changeHandler($e)}"
+    @focusin="{focusinHandler($e)}"
+    @focusout="{focusoutHandler($e)}"
+  >
+    {{styles}}
+    <slot name="label" part="label" f-slotted="{labelSlot}"></slot>
+    <slot name="input" part="input" f-slotted="{slottedInputs}"></slot>
+    <slot name="message" part="message" f-slotted="{messageSlot filter elements([flag])}"></slot>
+  </template>
+</f-template>

package/dist/esm/field/index.d.ts

@@ -5,3 +5,4 @@ export type { SlottableInput } from './field.options.js';
 export { definition as FieldDefinition } from './field.definition.js';
 export { styles as FieldStyles } from './field.styles.js';
 export { template as FieldTemplate } from './field.template.js';
+export { tagName as FieldTagName } from './field.options.js';

package/dist/esm/field/index.js

@@ -4,4 +4,5 @@ export { LabelPosition as FieldLabelPosition, ValidationFlags } from './field.op
 export { definition as FieldDefinition } from './field.definition.js';
 export { styles as FieldStyles } from './field.styles.js';
 export { template as FieldTemplate } from './field.template.js';
+export { tagName as FieldTagName } from './field.options.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/field/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1F,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/field/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,iBAAiB,CAAC;AAC5C,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,aAAa,IAAI,kBAAkB,EAAE,eAAe,EAAE,MAAM,oBAAoB,CAAC;AAE1F,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/esm/fluent-design-system.js

@@ -1,6 +1,6 @@
 export const FluentDesignSystem = Object.freeze({
     prefix: 'fluent',
     shadowRootMode: 'open',
-    registry: customElements,
+    registry: globalThis.customElements,
 });
 //# sourceMappingURL=fluent-design-system.js.map

package/dist/esm/fluent-design-system.js.map

@@ -1 +1 @@
-{"version":3,"file":"fluent-design-system.js","sourceRoot":"","sources":["../../src/fluent-design-system.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC;IAC9C,MAAM,EAAE,QAAQ;IAChB,cAAc,EAAE,MAAM;IACtB,QAAQ,EAAE,cAAc;CACzB,CAAC,CAAC"}
+{"version":3,"file":"fluent-design-system.js","sourceRoot":"","sources":["../../src/fluent-design-system.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,kBAAkB,GAAG,MAAM,CAAC,MAAM,CAAC;IAC9C,MAAM,EAAE,QAAQ;IAChB,cAAc,EAAE,MAAM;IACtB,QAAQ,EAAE,UAAU,CAAC,cAAc;CACpC,CAAC,CAAC"}

package/dist/esm/image/define-async.d.ts

@@ -0,0 +1 @@
+export {};

package/dist/esm/image/define-async.js

@@ -0,0 +1,4 @@
+import { declarativeDefinition } from './image.definition-async.js';
+import { Image } from './image.js';
+Image.define(declarativeDefinition);
+//# sourceMappingURL=define-async.js.map

package/dist/esm/image/define-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"define-async.js","sourceRoot":"","sources":["../../../src/image/define-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,qBAAqB,EAAE,MAAM,6BAA6B,CAAC;AACpE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,KAAK,CAAC,MAAM,CAAC,qBAAqB,CAAC,CAAC"}

package/dist/esm/image/define.js

@@ -1,4 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
 import { definition } from './image.definition.js';
-definition.define(FluentDesignSystem.registry);
+import { Image } from './image.js';
+Image.define(definition);
 //# sourceMappingURL=define.js.map

package/dist/esm/image/define.js.map

@@ -1 +1 @@
-{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/image/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC"}
+{"version":3,"file":"define.js","sourceRoot":"","sources":["../../../src/image/define.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AACnD,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AAEnC,KAAK,CAAC,MAAM,CAAC,UAAU,CAAC,CAAC"}

package/dist/esm/image/image.bench.d.ts

@@ -1,3 +1,4 @@
+import './define.js';
 declare const itemRenderer: () => HTMLElement;
 export default itemRenderer;
 export { tests } from '../utils/benchmark-wrapper.js';

package/dist/esm/image/image.bench.js

@@ -1,6 +1,4 @@
-import { FluentDesignSystem } from '../fluent-design-system.js';
-import { definition } from './image.definition.js';
-definition.define(FluentDesignSystem.registry);
+import './define.js';
 const itemRenderer = () => {
     const image = document.createElement('fluent-image');
     const img = document.createElement('img');

package/dist/esm/image/image.bench.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.bench.js","sourceRoot":"","sources":["../../../src/image/image.bench.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,UAAU,EAAE,MAAM,uBAAuB,CAAC;AAEnD,UAAU,CAAC,MAAM,CAAC,kBAAkB,CAAC,QAAQ,CAAC,CAAC;AAE/C,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,YAAY,CAAC,KAAK,EAAE,+BAA+B,CAAC,CAAC;IACzD,GAAG,CAAC,YAAY,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAAC;IAC7C,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACvB,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}
+{"version":3,"file":"image.bench.js","sourceRoot":"","sources":["../../../src/image/image.bench.ts"],"names":[],"mappings":"AAAA,OAAO,aAAa,CAAC;AAErB,MAAM,YAAY,GAAG,GAAG,EAAE;IACxB,MAAM,KAAK,GAAG,QAAQ,CAAC,aAAa,CAAC,cAAc,CAAC,CAAC;IACrD,MAAM,GAAG,GAAG,QAAQ,CAAC,aAAa,CAAC,KAAK,CAAC,CAAC;IAC1C,GAAG,CAAC,YAAY,CAAC,KAAK,EAAE,+BAA+B,CAAC,CAAC;IACzD,GAAG,CAAC,YAAY,CAAC,KAAK,EAAE,mBAAmB,CAAC,CAAC;IAC7C,KAAK,CAAC,WAAW,CAAC,GAAG,CAAC,CAAC;IACvB,OAAO,KAAK,CAAC;AACf,CAAC,CAAC;AAEF,eAAe,YAAY,CAAC;AAC5B,OAAO,EAAE,KAAK,EAAE,MAAM,+BAA+B,CAAC"}

package/dist/esm/image/image.d.ts

@@ -5,6 +5,8 @@ import { ImageFit, ImageShape } from './image.options.js';
  *
  * @tag fluent-image
  *
+ * @slot - The default slot. Accepts any `<img>`, `<picture>`, `<video>`, or `<canvas>` element.
+ *
  * @public
  */
 export declare class Image extends FASTElement {

package/dist/esm/image/image.definition-async.d.ts

@@ -0,0 +1,10 @@
+import { type PartialFASTElementDefinition } from '@microsoft/fast-element/declarative.js';
+/**
+ * The async definition configuration for the `<fluent-image>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export declare const declarativeDefinition: PartialFASTElementDefinition;

package/dist/esm/image/image.definition-async.js

@@ -0,0 +1,17 @@
+import { declarativeTemplate } from '@microsoft/fast-element/declarative.js';
+import { FluentDesignSystem } from '../fluent-design-system.js';
+import { tagName } from './image.options.js';
+/**
+ * The async definition configuration for the `<fluent-image>` element.
+ *
+ * @public
+ * @remarks
+ * This is used in server-side rendering (SSR) scenarios where the template
+ * is provided as a deferred option to be hydrated later.
+ */
+export const declarativeDefinition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
+    template: declarativeTemplate(),
+};
+//# sourceMappingURL=image.definition-async.js.map

package/dist/esm/image/image.definition-async.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"image.definition-async.js","sourceRoot":"","sources":["../../../src/image/image.definition-async.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAqC,MAAM,wCAAwC,CAAC;AAChH,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAE7C;;;;;;;GAOG;AACH,MAAM,CAAC,MAAM,qBAAqB,GAAiC;IACjE,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,QAAQ,EAAE,mBAAmB,EAAE;CAChC,CAAC"}

package/dist/esm/image/image.definition.d.ts

@@ -1,9 +1,7 @@
-import { Image } from './image.js';
+import type { PartialFASTElementDefinition } from '@microsoft/fast-element';
 /**
- * The Fluent Image Element
+ * The definition for the `<fluent-image>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-image\>
  */
-export declare const definition: import("@microsoft/fast-element").FASTElementDefinition<typeof Image>;
+export declare const definition: PartialFASTElementDefinition;

package/dist/esm/image/image.definition.js

@@ -1,17 +1,16 @@
 import { FluentDesignSystem } from '../fluent-design-system.js';
-import { Image } from './image.js';
-import { template } from './image.template.js';
+import { tagName } from './image.options.js';
 import { styles } from './image.styles.js';
+import { template } from './image.template.js';
 /**
- * The Fluent Image Element
+ * The definition for the `<fluent-image>` element.
  *
  * @public
- * @remarks
- * HTML Element: \<fluent-image\>
  */
-export const definition = Image.compose({
-    name: `${FluentDesignSystem.prefix}-image`,
-    template,
+export const definition = {
+    name: tagName,
+    registry: FluentDesignSystem.registry,
     styles,
-});
+    template,
+};
 //# sourceMappingURL=image.definition.js.map

package/dist/esm/image/image.definition.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.definition.js","sourceRoot":"","sources":["../../../src/image/image.definition.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAC/C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAE3C;;;;;;GAMG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG,KAAK,CAAC,OAAO,CAAC;IACtC,IAAI,EAAE,GAAG,kBAAkB,CAAC,MAAM,QAAQ;IAC1C,QAAQ;IACR,MAAM;CACP,CAAC,CAAC"}
+{"version":3,"file":"image.definition.js","sourceRoot":"","sources":["../../../src/image/image.definition.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAChE,OAAO,EAAE,OAAO,EAAE,MAAM,oBAAoB,CAAC;AAC7C,OAAO,EAAE,MAAM,EAAE,MAAM,mBAAmB,CAAC;AAC3C,OAAO,EAAE,QAAQ,EAAE,MAAM,qBAAqB,CAAC;AAE/C;;;;GAIG;AACH,MAAM,CAAC,MAAM,UAAU,GAAiC;IACtD,IAAI,EAAE,OAAO;IACb,QAAQ,EAAE,kBAAkB,CAAC,QAAQ;IACrC,MAAM;IACN,QAAQ;CACT,CAAC"}

package/dist/esm/image/image.js

@@ -5,6 +5,8 @@ import { attr, FASTElement } from '@microsoft/fast-element';
  *
  * @tag fluent-image
  *
+ * @slot - The default slot. Accepts any `<img>`, `<picture>`, `<video>`, or `<canvas>` element.
+ *
  * @public
  */
 export class Image extends FASTElement {

package/dist/esm/image/image.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/image/image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;;;;GAMG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;CAkDrC;AAzCQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACH;AAUhB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACA;AAUnB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACF;AAUjB;IADN,IAAI;kCACiB;AAUf;IADN,IAAI;oCACqB"}
+{"version":3,"file":"image.js","sourceRoot":"","sources":["../../../src/image/image.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,WAAW,EAAE,MAAM,yBAAyB,CAAC;AAG5D;;;;;;;;GAQG;AACH,MAAM,OAAO,KAAM,SAAQ,WAAW;CAkDrC;AAzCQ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;oCACH;AAUhB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;uCACA;AAUnB;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;qCACF;AAUjB;IADN,IAAI;kCACiB;AAUf;IADN,IAAI;oCACqB"}

package/dist/esm/image/image.options.d.ts

@@ -1,4 +1,4 @@
-import type { ValuesOf } from '../utils/index.js';
+import type { ValuesOf } from '../utils/typings.js';
 /**
  * Image fit
  * @public
@@ -24,3 +24,9 @@ export declare const ImageShape: {
     readonly square: "square";
 };
 export type ImageShape = ValuesOf<typeof ImageShape>;
+/**
+ * The tag name for the image element.
+ *
+ * @public
+ */
+export declare const tagName: "fluent-image";

package/dist/esm/image/image.options.js

@@ -1,3 +1,4 @@
+import { FluentDesignSystem } from '../fluent-design-system.js';
 /**
  * Image fit
  * @public
@@ -17,4 +18,10 @@ export const ImageShape = {
     rounded: 'rounded',
     square: 'square',
 };
+/**
+ * The tag name for the image element.
+ *
+ * @public
+ */
+export const tagName = `${FluentDesignSystem.prefix}-image`;
 //# sourceMappingURL=image.options.js.map

package/dist/esm/image/image.options.js.map

@@ -1 +1 @@
-{"version":3,"file":"image.options.js","sourceRoot":"","sources":["../../../src/image/image.options.ts"],"names":[],"mappings":"AAEA;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACN,CAAC;AAOX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC"}
+{"version":3,"file":"image.options.js","sourceRoot":"","sources":["../../../src/image/image.options.ts"],"names":[],"mappings":"AACA,OAAO,EAAE,kBAAkB,EAAE,MAAM,4BAA4B,CAAC;AAEhE;;;GAGG;AACH,MAAM,CAAC,MAAM,QAAQ,GAAG;IACtB,IAAI,EAAE,MAAM;IACZ,MAAM,EAAE,QAAQ;IAChB,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACN,CAAC;AAOX;;;GAGG;AACH,MAAM,CAAC,MAAM,UAAU,GAAG;IACxB,QAAQ,EAAE,UAAU;IACpB,OAAO,EAAE,SAAS;IAClB,MAAM,EAAE,QAAQ;CACR,CAAC;AAIX;;;;GAIG;AACH,MAAM,CAAC,MAAM,OAAO,GAAG,GAAG,kBAAkB,CAAC,MAAM,QAAiB,CAAC"}

package/dist/esm/image/image.styles.css

@@ -0,0 +1,50 @@
+:host {
+  contain: content;
+}
+
+:host ::slotted(img) {
+  box-sizing: border-box;
+  min-height: 8px;
+  min-width: 8px;
+  display: inline-block;
+}
+:host([block]) ::slotted(img) {
+  width: 100%;
+  height: auto;
+}
+:host([bordered]) ::slotted(img) {
+  border: var(--strokeWidthThin) solid var(--colorNeutralStroke2);
+}
+:host([fit='none']) ::slotted(img) {
+  object-fit: none;
+  object-position: top left;
+  height: 100%;
+  width: 100%;
+}
+:host([fit='center']) ::slotted(img) {
+  object-fit: none;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+:host([fit='contain']) ::slotted(img) {
+  object-fit: contain;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+:host([fit='cover']) ::slotted(img) {
+  object-fit: cover;
+  object-position: center;
+  height: 100%;
+  width: 100%;
+}
+:host([shadow]) ::slotted(img) {
+  box-shadow: var(--shadow4);
+}
+:host([shape='circular']) ::slotted(img) {
+  border-radius: var(--borderRadiusCircular);
+}
+:host([shape='rounded']) ::slotted(img) {
+  border-radius: var(--borderRadiusMedium);
+}

package/dist/esm/image/image.template.html

@@ -0,0 +1,6 @@
+<f-template name="fluent-image" shadowrootmode="open">
+  <template>
+    {{styles}}
+    <slot></slot>
+  </template>
+</f-template>

package/dist/esm/image/index.d.ts

@@ -3,3 +3,4 @@ export { ImageFit, ImageShape } from './image.options.js';
 export { definition as ImageDefinition } from './image.definition.js';
 export { template as ImageTemplate } from './image.template.js';
 export { styles as ImageStyles } from './image.styles.js';
+export { tagName as ImageTagName } from './image.options.js';

package/dist/esm/image/index.js

@@ -3,4 +3,5 @@ export { ImageFit, ImageShape } from './image.options.js';
 export { definition as ImageDefinition } from './image.definition.js';
 export { template as ImageTemplate } from './image.template.js';
 export { styles as ImageStyles } from './image.styles.js';
+export { tagName as ImageTagName } from './image.options.js';
 //# sourceMappingURL=index.js.map

package/dist/esm/image/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/image/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,KAAK,EAAE,MAAM,YAAY,CAAC;AACnC,OAAO,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,UAAU,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AACtE,OAAO,EAAE,QAAQ,IAAI,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAChE,OAAO,EAAE,MAAM,IAAI,WAAW,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,oBAAoB,CAAC"}

package/dist/esm/index-all-rollup.d.ts

@@ -0,0 +1,2 @@
+import './define-all.js';
+export * from './index.js';

package/dist/esm/index-all-rollup.js

@@ -0,0 +1,9 @@
+import './define-all.js';
+// import setTheme for export on globalThis for CDN
+import { setTheme } from './theme/index.js';
+// Expose all exports from index.ts
+export * from './index.js';
+// Expose setTheme under Fluent namespace on globalThis for CDN/script-tag consumers
+// @ts-expect-error - CDN bundle intentionally sets globals
+globalThis.Fluent = { ...globalThis.Fluent, setTheme };
+//# sourceMappingURL=index-all-rollup.js.map

package/dist/esm/index-all-rollup.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index-all-rollup.js","sourceRoot":"","sources":["../../src/index-all-rollup.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAEzB,mDAAmD;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,mCAAmC;AACnC,cAAc,YAAY,CAAC;AAE3B,oFAAoF;AACpF,2DAA2D;AAC3D,UAAU,CAAC,MAAM,GAAG,EAAE,GAAG,UAAU,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC"}

package/dist/esm/index-rollup.d.ts

@@ -1,44 +1 @@
-import './accordion-item/define.js';
-import './accordion/define.js';
-import './anchor-button/define.js';
-import './avatar/define.js';
-import './badge/define.js';
-import './button/define.js';
-import './checkbox/define.js';
-import './compound-button/define.js';
-import './counter-badge/define.js';
-import './dialog/define.js';
-import './dialog-body/define.js';
-import './divider/define.js';
-import './drawer/define.js';
-import './drawer-body/define.js';
-import './dropdown/define.js';
-import './field/define.js';
-import './image/define.js';
-import './label/define.js';
-import './link/define.js';
-import './listbox/define.js';
-import './menu-button/define.js';
-import './menu-item/define.js';
-import './menu-list/define.js';
-import './menu/define.js';
-import './message-bar/define.js';
-import './option/define.js';
-import './progress-bar/define.js';
-import './radio-group/define.js';
-import './radio/define.js';
-import './rating-display/define.js';
-import './slider/define.js';
-import './spinner/define.js';
-import './switch/define.js';
-import './tab-panel/define.js';
-import './tab/define.js';
-import './tabs/define.js';
-import './tablist/define.js';
-import './textarea/define.js';
-import './text-input/define.js';
-import './text/define.js';
-import './toggle-button/define.js';
-import './tooltip/define.js';
-import './tree/define.js';
-import './tree-item/define.js';
+import './define-all.js';

package/dist/esm/index-rollup.js

@@ -1,45 +1,7 @@
-import './accordion-item/define.js';
-import './accordion/define.js';
-import './anchor-button/define.js';
-import './avatar/define.js';
-import './badge/define.js';
-import './button/define.js';
-import './checkbox/define.js';
-import './compound-button/define.js';
-import './counter-badge/define.js';
-import './dialog/define.js';
-import './dialog-body/define.js';
-import './divider/define.js';
-import './drawer/define.js';
-import './drawer-body/define.js';
-import './dropdown/define.js';
-import './field/define.js';
-import './image/define.js';
-import './label/define.js';
-import './link/define.js';
-import './listbox/define.js';
-import './menu-button/define.js';
-import './menu-item/define.js';
-import './menu-list/define.js';
-import './menu/define.js';
-import './message-bar/define.js';
-import './option/define.js';
-import './progress-bar/define.js';
-import './radio-group/define.js';
-import './radio/define.js';
-import './rating-display/define.js';
-import './slider/define.js';
-import './spinner/define.js';
-import './switch/define.js';
-import './tab-panel/define.js';
-import './tab/define.js';
-import './tabs/define.js';
-import './tablist/define.js';
-import './textarea/define.js';
-import './text-input/define.js';
-import './text/define.js';
-import './toggle-button/define.js';
-import './tooltip/define.js';
-import './tree/define.js';
-import './tree-item/define.js';
+import './define-all.js';
+// import setTheme for export on globalThis for CDN
+import { setTheme } from './theme/index.js';
+// Expose setTheme under Fluent namespace on globalThis for CDN/script-tag consumers
+// @ts-expect-error - CDN bundle intentionally sets globals
+globalThis.Fluent = { ...globalThis.Fluent, setTheme };
 //# sourceMappingURL=index-rollup.js.map

package/dist/esm/index-rollup.js.map

@@ -1 +1 @@
-{"version":3,"file":"index-rollup.js","sourceRoot":"","sources":["../../src/index-rollup.ts"],"names":[],"mappings":"AAAA,OAAO,4BAA4B,CAAC;AACpC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,2BAA2B,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,6BAA6B,CAAC;AACrC,OAAO,2BAA2B,CAAC;AACnC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AACjC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,yBAAyB,CAAC;AACjC,OAAO,sBAAsB,CAAC;AAC9B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,yBAAyB,CAAC;AACjC,OAAO,uBAAuB,CAAC;AAC/B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,yBAAyB,CAAC;AACjC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,0BAA0B,CAAC;AAClC,OAAO,yBAAyB,CAAC;AACjC,OAAO,mBAAmB,CAAC;AAC3B,OAAO,4BAA4B,CAAC;AACpC,OAAO,oBAAoB,CAAC;AAC5B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,oBAAoB,CAAC;AAC5B,OAAO,uBAAuB,CAAC;AAC/B,OAAO,iBAAiB,CAAC;AACzB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,qBAAqB,CAAC;AAC7B,OAAO,sBAAsB,CAAC;AAC9B,OAAO,wBAAwB,CAAC;AAChC,OAAO,kBAAkB,CAAC;AAC1B,OAAO,2BAA2B,CAAC;AACnC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,kBAAkB,CAAC;AAC1B,OAAO,uBAAuB,CAAC"}
+{"version":3,"file":"index-rollup.js","sourceRoot":"","sources":["../../src/index-rollup.ts"],"names":[],"mappings":"AAAA,OAAO,iBAAiB,CAAC;AAEzB,mDAAmD;AACnD,OAAO,EAAE,QAAQ,EAAE,MAAM,kBAAkB,CAAC;AAE5C,oFAAoF;AACpF,2DAA2D;AAC3D,UAAU,CAAC,MAAM,GAAG,EAAE,GAAG,UAAU,CAAC,MAAM,EAAE,QAAQ,EAAE,CAAC"}

package/dist/esm/index.d.ts

@@ -9,7 +9,7 @@ export type { ButtonOptions } from './button/index.js';
 export { BaseCheckbox, Checkbox, CheckboxDefinition, CheckboxShape, CheckboxSize, CheckboxStyles, CheckboxTemplate, } from './checkbox/index.js';
 export type { CheckboxOptions } from './checkbox/index.js';
 export { CompoundButton, CompoundButtonAppearance, CompoundButtonDefinition, CompoundButtonShape, CompoundButtonSize, CompoundButtonStyles, CompoundButtonTemplate, } from './compound-button/index.js';
-export { CounterBadge, CounterBadgeAppearance, CounterBadgeColor, CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, CounterBadgeStyles, CounterBadgeTemplate, } from './counter-badge/index.js';
+export { BaseCounterBadge, CounterBadge, CounterBadgeAppearance, CounterBadgeColor, CounterBadgeDefinition, CounterBadgeShape, CounterBadgeSize, CounterBadgeStyles, CounterBadgeTagName, CounterBadgeTemplate, } from './counter-badge/index.js';
 export { Dialog, DialogType, DialogDefinition, DialogTemplate, DialogStyles, isDialog } from './dialog/index.js';
 export { DialogBody, DialogBodyDefinition, DialogBodyTemplate, DialogBodyStyles } from './dialog-body/index.js';
 export { BaseDivider, Divider, DividerAlignContent, DividerAppearance, DividerDefinition, DividerOrientation, DividerRole, DividerStyles, DividerTemplate, } from './divider/index.js';
@@ -28,13 +28,13 @@ export { MenuButton, MenuButtonAppearance, MenuButtonDefinition, MenuButtonShape
 export type { MenuButtonOptions } from './menu-button/index.js';
 export { MenuItem, MenuItemDefinition, MenuItemRole, MenuItemStyles, MenuItemTemplate, roleForMenuItem, } from './menu-item/index.js';
 export type { MenuItemColumnCount, MenuItemOptions } from './menu-item/index.js';
-export { MenuList, MenuListDefinition, MenuListStyles, MenuListTemplate } from './menu-list/index.js';
+export { BaseMenuList, MenuList, MenuListDefinition, MenuListStyles, MenuListTemplate } from './menu-list/index.js';
 export { Menu, MenuDefinition, MenuStyles, MenuTemplate } from './menu/index.js';
 export { DropdownOption, DropdownOptionDefinition, DropdownOptionStyles, DropdownOptionTemplate, isDropdownOption, type DropdownOptionOptions, } from './option/index.js';
 export { StartEnd, endSlotTemplate, startSlotTemplate } from './patterns/start-end.js';
 export type { StartOptions, EndOptions, StartEndOptions } from './patterns/start-end.js';
 export { BaseProgressBar, ProgressBar, ProgressBarDefinition, ProgressBarShape, ProgressBarStyles, ProgressBarTemplate, ProgressBarThickness, ProgressBarValidationState, } from './progress-bar/index.js';
-export { RadioGroup, RadioGroupDefinition, RadioGroupOrientation, RadioGroupStyles, RadioGroupTemplate, } from './radio-group/index.js';
+export { BaseRadioGroup, RadioGroup, RadioGroupDefinition, RadioGroupOrientation, RadioGroupStyles, RadioGroupTemplate, } from './radio-group/index.js';
 export { Radio, RadioDefinition, RadioStyles, RadioTemplate } from './radio/index.js';
 export type { RadioControl, RadioOptions } from './radio/index.js';
 export { BaseRatingDisplay, RatingDisplay, RatingDisplayColor, RatingDisplayDefinition, RatingDisplaySize, RatingDisplayStyles, RatingDisplayTemplate, } from './rating-display/index.js';
@@ -43,8 +43,6 @@ export type { SliderConfiguration, SliderOptions } from './slider/index.js';
 export { BaseSpinner, Spinner, SpinnerAppearance, SpinnerDefinition, SpinnerSize, SpinnerStyles, SpinnerTemplate, } from './spinner/index.js';
 export { Switch, type SwitchOptions, SwitchLabelPosition, SwitchDefinition, SwitchStyles, SwitchTemplate, } from './switch/index.js';
 export { isTab, Tab, type TabOptions, TabTemplate, TabStyles, TabDefinition } from './tab/index.js';
-export { TabPanel, TabPanelTemplate, TabPanelStyles, TabPanelDefinition } from './tab-panel/index.js';
-export { Tabs, TabsAppearance, type TabsOptions, TabsOrientation, TabsSize, TabsTemplate, TabsStyles, TabsDefinition, } from './tabs/index.js';
 export { typographyBody1Styles, typographyBody1StrongStyles, typographyBody1StrongerStyles, typographyBody2Styles, typographyCaption1StrongerStyles, typographyCaption1StrongStyles, typographyCaption1Styles, typographyCaption2StrongStyles, typographyCaption2Styles, typographyDisplayStyles, typographyLargeTitleStyles, typographySubtitle1Styles, typographySubtitle2StrongerStyles, typographySubtitle2Styles, typographyTitle1Styles, typographyTitle2Styles, typographyTitle3Styles, } from './styles/partials/typography.partials.js';
 export { BaseTablist, Tablist, TablistAppearance, TablistDefinition, TablistOrientation, TablistSize, TablistStyles, TablistTemplate, } from './tablist/index.js';
 export { BaseTextArea, TextArea, TextAreaAppearance, TextAreaAppearancesForDisplayShadow, TextAreaAutocomplete, TextAreaDefinition, TextAreaResize, TextAreaSize, TextAreaStyles, TextAreaTemplate, } from './textarea/index.js';
@@ -52,14 +50,13 @@ export { BaseTextInput, TextInput, TextInputAppearance, TextInputControlSize, Te
 export type { TextInputOptions } from './text-input/index.js';
 export { Text, TextAlign, TextDefinition, TextFont, TextSize, TextStyles, TextTemplate, TextWeight, } from './text/index.js';
 export * from './theme/design-tokens.js';
-export { setTheme, setThemeFor, type Theme } from './theme/index.js';
+export { setTheme, type Theme } from './theme/index.js';
 export { ToggleButton, ToggleButtonAppearance, ToggleButtonDefinition, ToggleButtonShape, ToggleButtonSize, ToggleButtonStyles, ToggleButtonTemplate, } from './toggle-button/index.js';
 export type { ToggleButtonOptions } from './toggle-button/index.js';
 export { Tooltip, TooltipDefinition, TooltipPositioningOption, TooltipStyles, TooltipTemplate, } from './tooltip/index.js';
 export { BaseTree, Tree, TreeDefinition, TreeTemplate, TreeStyles } from './tree/index.js';
 export { TreeItem, TreeItemDefinition, TreeItemTemplate, TreeItemStyles } from './tree-item/index.js';
 export type { isTreeItem, TreeItemAppearance, TreeItemSize } from './tree-item/index.js';
-export { darkModeStylesheetBehavior, forcedColorsStylesheetBehavior, lightModeStylesheetBehavior, MatchMediaBehavior, MatchMediaStyleSheetBehavior, } from './utils/behaviors/match-media-stylesheet-behavior.js';
-export type { MediaQueryListListener } from './utils/behaviors/match-media-stylesheet-behavior.js';
-export { getDirection } from './utils/direction.js';
+export { Direction, getDirection } from './utils/direction.js';
+export { Orientation } from './utils/orientation.js';
 export { display } from './utils/display.js';