@ni/nimble-components 18.9.0 → 18.10.0

package/dist/esm/all-components.d.ts

@@ -8,6 +8,7 @@ import './anchor-button';
 import './anchor-menu-item';
 import './anchor-tab';
 import './anchor-tabs';
+import './anchor-tree-item';
 import './anchored-region';
 import './banner';
 import './breadcrumb';

package/dist/esm/all-components.js

@@ -8,6 +8,7 @@ import './anchor-button';
 import './anchor-menu-item';
 import './anchor-tab';
 import './anchor-tabs';
+import './anchor-tree-item';
 import './anchored-region';
 import './banner';
 import './breadcrumb';

package/dist/esm/all-components.js.map

@@ -1 +1 @@
-{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,UAAU,CAAC;AAClB,OAAO,iBAAiB,CAAC;AACzB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,cAAc,CAAC;AACtB,OAAO,eAAe,CAAC;AACvB,OAAO,oBAAoB,CAAC;AAC5B,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,cAAc,CAAC;AACtB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,UAAU,CAAC;AAClB,OAAO,eAAe,CAAC;AACvB,OAAO,YAAY,CAAC;AACpB,OAAO,YAAY,CAAC;AACpB,OAAO,UAAU,CAAC;AAClB,OAAO,UAAU,CAAC;AAClB,OAAO,mBAAmB,CAAC;AAC3B,OAAO,eAAe,CAAC;AACvB,OAAO,QAAQ,CAAC;AAChB,OAAO,eAAe,CAAC;AACvB,OAAO,aAAa,CAAC;AACrB,OAAO,gBAAgB,CAAC;AACxB,OAAO,SAAS,CAAC;AACjB,OAAO,eAAe,CAAC;AACvB,OAAO,UAAU,CAAC;AAClB,OAAO,WAAW,CAAC;AACnB,OAAO,UAAU,CAAC;AAClB,OAAO,OAAO,CAAC;AACf,OAAO,aAAa,CAAC;AACrB,OAAO,SAAS,CAAC;AACjB,OAAO,qBAAqB,CAAC;AAC7B,OAAO,QAAQ,CAAC;AAChB,OAAO,gBAAgB,CAAC;AACxB,OAAO,aAAa,CAAC;AACrB,OAAO,cAAc,CAAC;AACtB,OAAO,kBAAkB,CAAC;AAC1B,OAAO,iBAAiB,CAAC;AACzB,OAAO,WAAW,CAAC;AACnB,OAAO,WAAW,CAAC;AACnB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC;AACrB,OAAO,aAAa,CAAC"}

package/dist/esm/anchor/index.js

@@ -24,6 +24,7 @@ __decorate([
 __decorate([
     attr
 ], Anchor.prototype, "appearance", void 0);
+// FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
 const nimbleAnchor = Anchor.compose({
     baseName: 'anchor',
     baseClass: FoundationAnchor,

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

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QACI;;;;WAIG;QAEI,oBAAe,GAAG,KAAK,CAAC;IASnC,CAAC;CAAA;AATG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CAC1B;AAQ/B;IADC,IAAI;0CAC+B;AAGxC,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EACZ,MAAM,IAAI,gBAAgB,EAE7B,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAStC;;GAEG;AACH,MAAM,OAAO,MAAO,SAAQ,UAAU;IAAtC;;QACI;;;;WAIG;QAEI,oBAAe,GAAG,KAAK,CAAC;IASnC,CAAC;CAAA;AATG;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,kBAAkB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;+CAC1B;AAQ/B;IADC,IAAI;0CAC+B;AAGxC,uFAAuF;AAEvF,MAAM,YAAY,GAAG,MAAM,CAAC,OAAO,CAAgB;IAC/C,QAAQ,EAAE,QAAQ;IAClB,SAAS,EAAE,gBAAgB;IAC3B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,YAAY,EAAE,CAAC,CAAC;AACzE,MAAM,CAAC,MAAM,SAAS,GAAG,YAAY,CAAC,MAAM,CAAC,MAAM,CAAC,CAAC"}

package/dist/esm/anchor-menu-item/index.d.ts

@@ -1,4 +1,4 @@
-import { MenuItemColumnCount, StartEnd } from '@microsoft/fast-foundation';
+import { MenuItemColumnCount } from '@microsoft/fast-foundation';
 import { AnchorBase } from '../anchor-base';
 declare global {
     interface HTMLElementTagNameMap {
@@ -33,6 +33,4 @@ export declare class AnchorMenuItem extends AnchorBase {
     get tabIndex(): number;
     set tabIndex(value: number);
 }
-export interface AnchorMenuItem extends StartEnd {
-}
 export declare const anchorMenuItemTag: string;

package/dist/esm/anchor-menu-item/index.js

@@ -1,6 +1,6 @@
 import { __decorate } from "tslib";
 import { attr, observable } from '@microsoft/fast-element';
-import { DesignSystem, MenuItem as FoundationMenuItem, StartEnd, applyMixins } from '@microsoft/fast-foundation';
+import { DesignSystem, MenuItem as FoundationMenuItem } from '@microsoft/fast-foundation';
 import { keyEnter } from '@microsoft/fast-web-utilities';
 import { AnchorBase } from '../anchor-base';
 import { styles } from './styles';
@@ -79,6 +79,7 @@ __decorate([
 __decorate([
     observable
 ], AnchorMenuItem.prototype, "startColumnCount", void 0);
+// FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
 const nimbleAnchorMenuItem = AnchorMenuItem.compose({
     baseName: 'anchor-menu-item',
     template,
@@ -87,7 +88,6 @@ const nimbleAnchorMenuItem = AnchorMenuItem.compose({
         delegatesFocus: true
     }
 });
-applyMixins(AnchorMenuItem, StartEnd);
 DesignSystem.getOrCreate()
     .withPrefix('nimble')
     .register(nimbleAnchorMenuItem());

package/dist/esm/anchor-menu-item/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/index.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-menu-item/index.ts"],"names":[],"mappings":"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"}

package/dist/esm/anchor-tab/index.js

@@ -22,6 +22,7 @@ export class AnchorTab extends AnchorBase {
 __decorate([
     attr({ mode: 'boolean' })
 ], AnchorTab.prototype, "disabled", void 0);
+// FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
 const nimbleAnchorTab = AnchorTab.compose({
     baseName: 'anchor-tab',
     template,

package/dist/esm/anchor-tab/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-tab/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EAGf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACI;;;;;WAKG;QAEI,aAAQ,GAAG,KAAK,CAAC;IAC5B,CAAC;CAAA;AADG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACF;AAG5B,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-tab/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EAGf,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAUtC;;GAEG;AACH,MAAM,OAAO,SAAU,SAAQ,UAAU;IAAzC;;QACI;;;;;WAKG;QAEI,aAAQ,GAAG,KAAK,CAAC;IAC5B,CAAC;CAAA;AADG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CACF;AAG5B,uFAAuF;AAEvF,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC"}

package/dist/esm/anchor-tab/styles.js

@@ -9,5 +9,13 @@ export const styles = css `
         cursor: inherit;
         outline: none;
     }
+
+    [part='start'] {
+        display: none;
+    }
+
+    [part='end'] {
+        display: none;
+    }
 `;
 //# sourceMappingURL=styles.js.map

package/dist/esm/anchor-tab/styles.js.map

@@ -1 +1 @@
-{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,SAAS;;;;;;;;CAQd,CAAC"}
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tab/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,MAAM,IAAI,SAAS,EAAE,MAAM,wBAAwB,CAAC;AAE7D,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,SAAS;;;;;;;;;;;;;;;;CAgBd,CAAC"}

package/dist/esm/anchor-tab/template.d.ts

@@ -1,4 +1,4 @@
 import { ViewTemplate } from '@microsoft/fast-element';
-import type { FoundationElementTemplate } from '@microsoft/fast-foundation';
+import { FoundationElementTemplate } from '@microsoft/fast-foundation';
 import type { AnchorTab, TabOptions } from '.';
 export declare const template: FoundationElementTemplate<ViewTemplate<AnchorTab>, TabOptions>;

package/dist/esm/anchor-tab/template.js

@@ -1,5 +1,6 @@
 import { html } from '@microsoft/fast-element';
-export const template = () => html `
+import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation';
+export const template = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -12,7 +13,9 @@ export const template = () => html `
             type="${x => x.type}"
             tabindex="-1"
         >
+            ${startSlotTemplate(context, definition)}
             <slot></slot>
+            ${endSlotTemplate(context, definition)}
         </a>
     </template>
 `;

package/dist/esm/anchor-tab/template.js.map

@@ -1 +1 @@
-{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-tab/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAI7D,MAAM,CAAC,MAAM,QAAQ,GAGjB,GAAG,EAAE,CAAC,IAAI,CAAW;2DACkC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;wBAElD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;8BACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;mBAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;sBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;;;;;CAM9B,CAAC"}
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-tab/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAgB,MAAM,yBAAyB,CAAC;AAC7D,OAAO,EACH,eAAe,EAEf,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAW;2DACe,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;wBAElD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;8BACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;mBAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;sBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;;;cAGjB,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;cAEtC,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;;CAGjD,CAAC"}

package/dist/esm/anchor-tree-item/index.d.ts

@@ -0,0 +1,57 @@
+import { AnchorBase } from '../anchor-base';
+declare global {
+    interface HTMLElementTagNameMap {
+        'nimble-anchor-tree-item': AnchorTreeItem;
+    }
+}
+/**
+ * A nimble-styled anchor tree item
+ */
+export declare class AnchorTreeItem extends AnchorBase {
+    /**
+     * When true, the control will appear selected by user interaction.
+     * @public
+     * @remarks
+     * HTML Attribute: selected
+     */
+    selected: boolean;
+    /**
+     * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
+     * @public
+     * @remarks
+     * HTML Attribute: disabled
+     */
+    disabled: boolean;
+    /**
+     * Whether the tree is nested
+     *
+     * @public
+     */
+    isNestedItem(): boolean;
+    /**
+     * Handle focus events
+     *
+     * @internal
+     */
+    handleFocus(_e: FocusEvent): void;
+    /**
+     * Handle blur events
+     *
+     * @internal
+     */
+    handleBlur(_e: FocusEvent): void;
+    /**
+     * @internal
+     */
+    keydownHandler(e: KeyboardEvent): boolean;
+    /**
+     * Activating the anchor by pressing the Enter key results in a click event.
+     * This bubbles up to the Nimble tree-view's click handler, causing the tree item
+     * to be selected. We don't want that for anchor tree items. We'll stop propagation
+     * of the event to prevent that.
+     * @internal
+     */
+    clickHandler(e: MouseEvent): boolean;
+    protected selectedChanged(_prev: boolean | undefined, _next: boolean): void;
+}
+export declare const anchorTreeItemTag: string;

package/dist/esm/anchor-tree-item/index.js

@@ -0,0 +1,117 @@
+import { __decorate } from "tslib";
+import { attr } from '@microsoft/fast-element';
+import { DesignSystem, isTreeItemElement, TreeItem as FoundationTreeItem } from '@microsoft/fast-foundation';
+import { keyArrowLeft, keyEnter } from '@microsoft/fast-web-utilities';
+import { AnchorBase } from '../anchor-base';
+import { styles } from './styles';
+import { template } from './template';
+/**
+ * A nimble-styled anchor tree item
+ */
+export class AnchorTreeItem extends AnchorBase {
+    constructor() {
+        super(...arguments);
+        /**
+         * When true, the control will appear selected by user interaction.
+         * @public
+         * @remarks
+         * HTML Attribute: selected
+         */
+        this.selected = false;
+        /**
+         * When true, the control will be immutable by user interaction. See {@link https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/disabled | disabled HTML attribute} for more information.
+         * @public
+         * @remarks
+         * HTML Attribute: disabled
+         */
+        this.disabled = false;
+    }
+    /**
+     * Whether the tree is nested
+     *
+     * @public
+     */
+    isNestedItem() {
+        return isTreeItemElement(this.parentElement);
+    }
+    /**
+     * Handle focus events
+     *
+     * @internal
+     */
+    handleFocus(_e) {
+        this.setAttribute('tabindex', '0');
+    }
+    /**
+     * Handle blur events
+     *
+     * @internal
+     */
+    handleBlur(_e) {
+        this.setAttribute('tabindex', '-1');
+    }
+    /**
+     * @internal
+     */
+    keydownHandler(e) {
+        if (e.defaultPrevented) {
+            return false;
+        }
+        switch (e.key) {
+            case keyEnter:
+                // Do not let the event bubble up to the FAST tree, or it will
+                // prevent the default action.
+                e.stopPropagation();
+                break;
+            case keyArrowLeft:
+                // For FAST tree items, the FAST tree view handles this navigation,
+                // but since our anchor tree item is not "instanceof FASTTreeItem",
+                // the FAST tree view won't do this for us. We do it ourselves.
+                if (this.parentElement && this.isNestedItem()) {
+                    FoundationTreeItem.focusItem(this.parentElement);
+                }
+                break;
+            default:
+        }
+        return true;
+    }
+    /**
+     * Activating the anchor by pressing the Enter key results in a click event.
+     * This bubbles up to the Nimble tree-view's click handler, causing the tree item
+     * to be selected. We don't want that for anchor tree items. We'll stop propagation
+     * of the event to prevent that.
+     * @internal
+     */
+    clickHandler(e) {
+        if (e.defaultPrevented) {
+            return false;
+        }
+        e.stopPropagation();
+        return true;
+    }
+    selectedChanged(_prev, _next) {
+        if (this.$fastController.isConnected) {
+            this.$emit('selected-change', this);
+        }
+    }
+}
+__decorate([
+    attr({ mode: 'boolean' })
+], AnchorTreeItem.prototype, "selected", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], AnchorTreeItem.prototype, "disabled", void 0);
+// FoundationAnchor already applies the StartEnd mixin, so we don't need to do it here.
+const nimbleAnchorTreeItem = AnchorTreeItem.compose({
+    baseName: 'anchor-tree-item',
+    template,
+    styles,
+    shadowOptions: {
+        delegatesFocus: true
+    }
+});
+DesignSystem.getOrCreate()
+    .withPrefix('nimble')
+    .register(nimbleAnchorTreeItem());
+export const anchorTreeItemTag = DesignSystem.tagFor(AnchorTreeItem);
+//# sourceMappingURL=index.js.map

package/dist/esm/anchor-tree-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/anchor-tree-item/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,yBAAyB,CAAC;AAC/C,OAAO,EACH,YAAY,EAEZ,iBAAiB,EACjB,QAAQ,IAAI,kBAAkB,EACjC,MAAM,4BAA4B,CAAC;AACpC,OAAO,EAAE,YAAY,EAAE,QAAQ,EAAE,MAAM,+BAA+B,CAAC;AACvE,OAAO,EAAE,UAAU,EAAE,MAAM,gBAAgB,CAAC;AAC5C,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;GAEG;AACH,MAAM,OAAO,cAAe,SAAQ,UAAU;IAA9C;;QACI;;;;;WAKG;QAEI,aAAQ,GAAG,KAAK,CAAC;QAExB;;;;;WAKG;QAEI,aAAQ,GAAG,KAAK,CAAC;IA8E5B,CAAC;IA5EG;;;;OAIG;IACI,YAAY;QACf,OAAO,iBAAiB,CAAC,IAAI,CAAC,aAAwB,CAAC,CAAC;IAC5D,CAAC;IAED;;;;OAIG;IACI,WAAW,CAAC,EAAc;QAC7B,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,GAAG,CAAC,CAAC;IACvC,CAAC;IAED;;;;OAIG;IACI,UAAU,CAAC,EAAc;QAC5B,IAAI,CAAC,YAAY,CAAC,UAAU,EAAE,IAAI,CAAC,CAAC;IACxC,CAAC;IAED;;OAEG;IACI,cAAc,CAAC,CAAgB;QAClC,IAAI,CAAC,CAAC,gBAAgB,EAAE;YACpB,OAAO,KAAK,CAAC;SAChB;QACD,QAAQ,CAAC,CAAC,GAAG,EAAE;YACX,KAAK,QAAQ;gBACT,8DAA8D;gBAC9D,8BAA8B;gBAC9B,CAAC,CAAC,eAAe,EAAE,CAAC;gBACpB,MAAM;YACV,KAAK,YAAY;gBACb,mEAAmE;gBACnE,mEAAmE;gBACnE,+DAA+D;gBAC/D,IAAI,IAAI,CAAC,aAAa,IAAI,IAAI,CAAC,YAAY,EAAE,EAAE;oBAC3C,kBAAkB,CAAC,SAAS,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;iBACpD;gBACD,MAAM;YACV,QAAQ;SACX;QACD,OAAO,IAAI,CAAC;IAChB,CAAC;IAED;;;;;;OAMG;IACI,YAAY,CAAC,CAAa;QAC7B,IAAI,CAAC,CAAC,gBAAgB,EAAE;YACpB,OAAO,KAAK,CAAC;SAChB;QACD,CAAC,CAAC,eAAe,EAAE,CAAC;QACpB,OAAO,IAAI,CAAC;IAChB,CAAC;IAES,eAAe,CACrB,KAA0B,EAC1B,KAAc;QAEd,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YAClC,IAAI,CAAC,KAAK,CAAC,iBAAiB,EAAE,IAAI,CAAC,CAAC;SACvC;IACL,CAAC;CACJ;AAvFG;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDACF;AASxB;IADC,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDACF;AAgF5B,uFAAuF;AAEvF,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAgB;IAC/D,QAAQ,EAAE,kBAAkB;IAC5B,QAAQ;IACR,MAAM;IACN,aAAa,EAAE;QACX,cAAc,EAAE,IAAI;KACvB;CACJ,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,QAAQ,CAAC;KACpB,QAAQ,CAAC,oBAAoB,EAAE,CAAC,CAAC;AACtC,MAAM,CAAC,MAAM,iBAAiB,GAAG,YAAY,CAAC,MAAM,CAAC,cAAc,CAAC,CAAC"}

package/dist/esm/anchor-tree-item/styles.d.ts

@@ -0,0 +1 @@
+export declare const styles: import("@microsoft/fast-element").ElementStyles;

package/dist/esm/anchor-tree-item/styles.js

@@ -0,0 +1,108 @@
+import { css } from '@microsoft/fast-element';
+import { display } from '@microsoft/fast-foundation';
+import { bodyFontFamily, bodyFontWeight, bodyFontColor, borderHoverColor, borderWidth, iconSize, fillHoverColor, fillHoverSelectedColor, fillSelectedColor, bodyFontSize } from '../theme-provider/design-tokens';
+import { focusVisible } from '../utilities/style/focus';
+export const styles = css `
+    ${display('block')}
+
+    :host {
+        ${
+/* don't set font-size here or else it overrides what we set on .items */ ''}
+        font-family: ${bodyFontFamily};
+        font-weight: ${bodyFontWeight};
+        contain: content;
+        position: relative;
+        outline: none;
+        color: ${bodyFontColor};
+        cursor: pointer;
+        --ni-private-tree-item-nested-width: 0;
+    }
+
+    .control {
+        display: flex;
+        text-decoration: none;
+        color: ${bodyFontColor};
+    }
+
+    .control${focusVisible} {
+        box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
+        outline: ${borderWidth} solid ${borderHoverColor};
+        outline-offset: -2px;
+    }
+
+    :host([disabled]) .control {
+        cursor: not-allowed;
+    }
+
+    .positioning-region {
+        display: flex;
+        position: relative;
+        box-sizing: border-box;
+        height: calc(${iconSize} * 2);
+        width: 100%;
+    }
+
+    .positioning-region:hover {
+        background: ${fillHoverColor};
+    }
+
+    :host([selected]) .positioning-region {
+        background: ${fillSelectedColor};
+    }
+
+    :host([selected]) .positioning-region:hover {
+        background: ${fillHoverSelectedColor};
+    }
+
+    .positioning-region::before {
+        content: '';
+        display: block;
+        width: var(--ni-private-tree-item-nested-width);
+        flex-shrink: 0;
+    }
+
+    .content-region {
+        display: inline-flex;
+        align-items: center;
+        white-space: nowrap;
+        width: 100%;
+        padding-left: 10px;
+        font: inherit;
+        font-size: ${bodyFontSize};
+        user-select: none;
+        position: relative;
+        margin-inline-start: ${iconSize};
+    }
+
+    :host([disabled]) .content-region {
+        opacity: 0.5;
+        cursor: not-allowed;
+    }
+
+    ${
+/* this rule keeps children without an icon text aligned with parents */ ''}
+    span[part="start"] {
+        width: ${iconSize};
+    }
+
+    ${ /* the start class is applied when the corresponding slot is filled */''}
+    .start {
+        display: flex;
+        fill: currentcolor;
+        margin-inline-start: ${iconSize};
+        margin-inline-end: ${iconSize};
+    }
+
+    slot[name='start']::slotted(*) {
+        width: ${iconSize};
+        height: ${iconSize};
+    }
+
+    ${ /* the end class is applied when the corresponding slot is filled */''}
+    .end {
+        display: flex;
+        fill: currentcolor;
+        margin-inline-start: ${iconSize};
+    }
+`;
+//# sourceMappingURL=styles.js.map

package/dist/esm/anchor-tree-item/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/anchor-tree-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,yBAAyB,CAAC;AAC9C,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EACH,cAAc,EACd,cAAc,EACd,aAAa,EACb,gBAAgB,EAChB,WAAW,EACX,QAAQ,EACR,cAAc,EACd,sBAAsB,EACtB,iBAAiB,EACjB,YAAY,EACf,MAAM,iCAAiC,CAAC;AACzC,OAAO,EAAE,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;UAGZ;AACE,yEAAyE,CAAC,EAC9E;uBACe,cAAc;uBACd,cAAc;;;;iBAIpB,aAAa;;;;;;;;iBAQb,aAAa;;;cAGhB,YAAY;kCACQ,WAAW,IAAI,gBAAgB;mBAC9C,WAAW,UAAU,gBAAgB;;;;;;;;;;;;uBAYjC,QAAQ;;;;;sBAKT,cAAc;;;;sBAId,iBAAiB;;;;sBAIjB,sBAAsB;;;;;;;;;;;;;;;;;qBAiBvB,YAAY;;;+BAGF,QAAQ;;;;;;;;MAQjC;AACE,wEAAwE,CAAC,EAC7E;;iBAEa,QAAQ;;;MAGnB,CAAA,sEAAuE,EAAE;;;;+BAIhD,QAAQ;6BACV,QAAQ;;;;iBAIpB,QAAQ;kBACP,QAAQ;;;MAGpB,CAAA,oEAAqE,EAAE;;;;+BAI9C,QAAQ;;CAEtC,CAAC"}

package/dist/esm/anchor-tree-item/template.d.ts

@@ -0,0 +1,4 @@
+import { ViewTemplate } from '@microsoft/fast-element';
+import { AnchorOptions, FoundationElementTemplate } from '@microsoft/fast-foundation';
+import type { AnchorTreeItem } from '.';
+export declare const template: FoundationElementTemplate<ViewTemplate<AnchorTreeItem>, AnchorOptions>;

package/dist/esm/anchor-tree-item/template.js

@@ -0,0 +1,41 @@
+import { html, ref } from '@microsoft/fast-element';
+import { endSlotTemplate, startSlotTemplate } from '@microsoft/fast-foundation';
+export const template = (context, definition) => html `
+    <template
+        role="treeitem"
+        slot="${x => (x.isNestedItem() ? 'item' : null)}"
+        tabindex="-1"
+        aria-disabled="${x => x.disabled}"
+        aria-selected="${x => x.selected}"
+        @focusin="${(x, c) => x.handleFocus(c.event)}"
+        @focusout="${(x, c) => x.handleBlur(c.event)}"
+        @keydown="${(x, c) => x.keydownHandler(c.event)}"
+        @click="${(x, c) => x.clickHandler(c.event)}"
+    >
+        <a
+            class="control"
+            part="control"
+            tabindex="0"
+            download="${x => x.download}"
+            href=${x => (x.disabled ? null : x.href)}
+            hreflang="${x => x.hreflang}"
+            ping="${x => x.ping}"
+            referrerpolicy="${x => x.referrerpolicy}"
+            rel="${x => x.rel}"
+            target="${x => x.target}"
+            type="${x => x.type}"
+            ${ref('control')}
+        >
+            <div class="positioning-region" part="positioning-region">
+                <div class="content-region" part="content-region">
+                    ${startSlotTemplate(context, definition)}
+                    <span class="content" part="content">
+                        <slot></slot>
+                    </span>
+                    ${endSlotTemplate(context, definition)}
+                </div>
+            </div>
+        </a>
+    </template>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/anchor-tree-item/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/anchor-tree-item/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,GAAG,EAAgB,MAAM,yBAAyB,CAAC;AAClE,OAAO,EAEH,eAAe,EAEf,iBAAiB,EACpB,MAAM,4BAA4B,CAAC;AAGpC,MAAM,CAAC,MAAM,QAAQ,GAGjB,CAAC,OAAO,EAAE,UAAU,EAAE,EAAE,CAAC,IAAI,CAAgB;;;gBAGjC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,YAAY,EAAE,CAAC,CAAC,CAAC,MAAM,CAAC,CAAC,CAAC,IAAI,CAAC;;yBAE9B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;yBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACpB,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC,CAAC,CAAC,KAAmB,CAAC;qBAC7C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC,KAAmB,CAAC;oBAC9C,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC,CAAC,CAAC,KAAsB,CAAC;kBACtD,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAmB,CAAC;;;;;;wBAMzC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACpB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC,IAAI,CAAC,CAAC,CAAC,CAAC,CAAC,IAAI,CAAC;wBAC5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;oBACnB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;8BACD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc;mBAChC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,GAAG;sBACP,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;oBACf,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,IAAI;cACjB,GAAG,CAAC,SAAS,CAAC;;;;sBAIN,iBAAiB,CAAC,OAAO,EAAE,UAAU,CAAC;;;;sBAItC,eAAe,CAAC,OAAO,EAAE,UAAU,CAAC;;;;;CAKzD,CAAC"}

package/dist/esm/table/components/cell/index.d.ts

@@ -1,5 +1,6 @@
-import { ElementStyles, ViewTemplate } from '@microsoft/fast-element';
+import { ViewTemplate } from '@microsoft/fast-element';
 import { FoundationElement } from '@microsoft/fast-foundation';
+import type { MenuButton } from '../../../menu-button';
 import type { MenuButtonToggleEventDetail } from '../../../menu-button/types';
 import type { TableCellRecord, TableCellState } from '../../../table-column/base/types';
 declare global {
@@ -13,22 +14,12 @@ declare global {
  */
 export declare class TableCell<TCellRecord extends TableCellRecord = TableCellRecord> extends FoundationElement {
     cellState?: TableCellState<TCellRecord>;
-    cellTemplate?: ViewTemplate;
-    cellStyles?: ElementStyles;
     hasActionMenu: boolean;
     menuOpen: boolean;
     actionMenuLabel?: string;
-    /**
-     * @internal
-     */
-    readonly cellContentContainer: HTMLElement;
-    private customCellView?;
-    connectedCallback(): void;
-    disconnectedCallback(): void;
+    cellViewTemplate?: ViewTemplate<TableCell>;
+    readonly actionMenuButton?: MenuButton;
     onActionMenuBeforeToggle(event: CustomEvent<MenuButtonToggleEventDetail>): void;
     onActionMenuToggle(event: CustomEvent<MenuButtonToggleEventDetail>): void;
-    protected cellStateChanged(): void;
-    protected cellTemplateChanged(): void;
-    protected cellStylesChanged(prev?: ElementStyles, next?: ElementStyles): void;
 }
 export declare const tableCellTag: string;

package/dist/esm/table/components/cell/index.js

@@ -1,5 +1,5 @@
 import { __decorate } from "tslib";
-import { attr, defaultExecutionContext, observable } from '@microsoft/fast-element';
+import { attr, observable } from '@microsoft/fast-element';
 import { DesignSystem, FoundationElement } from '@microsoft/fast-foundation';
 import { styles } from './styles';
 import { template } from './template';
@@ -12,18 +12,6 @@ export class TableCell extends FoundationElement {
         super(...arguments);
         this.hasActionMenu = false;
         this.menuOpen = false;
-        this.customCellView = undefined;
-    }
-    connectedCallback() {
-        super.connectedCallback();
-        this.customCellView = this.cellTemplate?.render(this.cellState, this.cellContentContainer);
-    }
-    disconnectedCallback() {
-        super.disconnectedCallback();
-        if (this.customCellView) {
-            this.customCellView.dispose();
-            this.customCellView = undefined;
-        }
     }
     onActionMenuBeforeToggle(event) {
         this.$emit('cell-action-menu-beforetoggle', event.detail);
@@ -32,32 +20,10 @@ export class TableCell extends FoundationElement {
         this.menuOpen = event.detail.newState;
         this.$emit('cell-action-menu-toggle', event.detail);
     }
-    cellStateChanged() {
-        this.customCellView?.bind(this.cellState, defaultExecutionContext);
-    }
-    cellTemplateChanged() {
-        if (this.$fastController.isConnected) {
-            this.customCellView = this.cellTemplate?.render(this.cellState, this.cellContentContainer);
-        }
-    }
-    cellStylesChanged(prev, next) {
-        if (prev) {
-            this.$fastController.removeStyles(prev);
-        }
-        if (next) {
-            this.$fastController.addStyles(next);
-        }
-    }
 }
 __decorate([
     observable
 ], TableCell.prototype, "cellState", void 0);
-__decorate([
-    observable
-], TableCell.prototype, "cellTemplate", void 0);
-__decorate([
-    observable
-], TableCell.prototype, "cellStyles", void 0);
 __decorate([
     attr({ attribute: 'has-action-menu', mode: 'boolean' })
 ], TableCell.prototype, "hasActionMenu", void 0);
@@ -67,6 +33,9 @@ __decorate([
 __decorate([
     attr({ attribute: 'action-menu-label' })
 ], TableCell.prototype, "actionMenuLabel", void 0);
+__decorate([
+    observable
+], TableCell.prototype, "cellViewTemplate", void 0);
 const nimbleTableCell = TableCell.compose({
     baseName: 'table-cell',
     template,

package/dist/esm/table/components/cell/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EACH,IAAI,EACJ,uBAAuB,EAGvB,UAAU,EAEb,MAAM,yBAAyB,CAAC;AACjC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAM7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,SAEX,SAAQ,iBAAiB;IAF3B;;QAaW,kBAAa,GAAG,KAAK,CAAC;QAGtB,aAAQ,GAAG,KAAK,CAAC;QAUhB,mBAAc,GAAc,SAAS,CAAC;IAyDlD,CAAC;IAvDmB,iBAAiB;QAC7B,KAAK,CAAC,iBAAiB,EAAE,CAAC;QAC1B,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAC3C,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,oBAAoB,CAC5B,CAAC;IACN,CAAC;IAEe,oBAAoB;QAChC,KAAK,CAAC,oBAAoB,EAAE,CAAC;QAE7B,IAAI,IAAI,CAAC,cAAc,EAAE;YACrB,IAAI,CAAC,cAAc,CAAC,OAAO,EAAE,CAAC;YAC9B,IAAI,CAAC,cAAc,GAAG,SAAS,CAAC;SACnC;IACL,CAAC;IAEM,wBAAwB,CAC3B,KAA+C;QAE/C,IAAI,CAAC,KAAK,CAAC,+BAA+B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9D,CAAC;IAEM,kBAAkB,CACrB,KAA+C;QAE/C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxD,CAAC;IAES,gBAAgB;QACtB,IAAI,CAAC,cAAc,EAAE,IAAI,CAAC,IAAI,CAAC,SAAS,EAAE,uBAAuB,CAAC,CAAC;IACvE,CAAC;IAES,mBAAmB;QACzB,IAAI,IAAI,CAAC,eAAe,CAAC,WAAW,EAAE;YAClC,IAAI,CAAC,cAAc,GAAG,IAAI,CAAC,YAAY,EAAE,MAAM,CAC3C,IAAI,CAAC,SAAS,EACd,IAAI,CAAC,oBAAoB,CAC5B,CAAC;SACL;IACL,CAAC;IAES,iBAAiB,CACvB,IAAoB,EACpB,IAAoB;QAEpB,IAAI,IAAI,EAAE;YACN,IAAI,CAAC,eAAe,CAAC,YAAY,CAAC,IAAI,CAAC,CAAC;SAC3C;QAED,IAAI,IAAI,EAAE;YACN,IAAI,CAAC,eAAe,CAAC,SAAS,CAAC,IAAI,CAAC,CAAC;SACxC;IACL,CAAC;CACJ;AA/EG;IADC,UAAU;4CACoC;AAG/C;IADC,UAAU;+CACwB;AAGnC;IADC,UAAU;6CACuB;AAGlC;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC3B;AAG7B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CAC1B;AAGxB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;kDACT;AAkEpC,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../src/table/components/cell/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,UAAU,EAAgB,MAAM,yBAAyB,CAAC;AACzE,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAO7E,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AAQtC;;;GAGG;AACH,MAAM,OAAO,SAEX,SAAQ,iBAAiB;IAF3B;;QAOW,kBAAa,GAAG,KAAK,CAAC;QAGtB,aAAQ,GAAG,KAAK,CAAC;IAsB5B,CAAC;IAZU,wBAAwB,CAC3B,KAA+C;QAE/C,IAAI,CAAC,KAAK,CAAC,+BAA+B,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IAC9D,CAAC;IAEM,kBAAkB,CACrB,KAA+C;QAE/C,IAAI,CAAC,QAAQ,GAAG,KAAK,CAAC,MAAM,CAAC,QAAQ,CAAC;QACtC,IAAI,CAAC,KAAK,CAAC,yBAAyB,EAAE,KAAK,CAAC,MAAM,CAAC,CAAC;IACxD,CAAC;CACJ;AA5BG;IADC,UAAU;4CACoC;AAG/C;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,iBAAiB,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;gDAC3B;AAG7B;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;2CAC1B;AAGxB;IADC,IAAI,CAAC,EAAE,SAAS,EAAE,mBAAmB,EAAE,CAAC;kDACT;AAGhC;IADC,UAAU;mDACuC;AAkBtD,MAAM,eAAe,GAAG,SAAS,CAAC,OAAO,CAAC;IACtC,QAAQ,EAAE,YAAY;IACtB,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE,CAAC,UAAU,CAAC,QAAQ,CAAC,CAAC,QAAQ,CAAC,eAAe,EAAE,CAAC,CAAC;AAC5E,MAAM,CAAC,MAAM,YAAY,GAAG,YAAY,CAAC,MAAM,CAAC,SAAS,CAAC,CAAC"}

package/dist/esm/table/components/cell/styles.js

@@ -13,7 +13,7 @@ export const styles = css `
         --ni-private-table-cell-action-menu-display: block;
     }
 
-    .cell-content-container {
+    .cell-view {
         overflow: hidden;
         display: flex;
         align-items: center;

package/dist/esm/table/components/cell/template.d.ts

@@ -1,2 +1,4 @@
+import { ViewTemplate } from '@microsoft/fast-element';
 import type { TableCell } from '.';
-export declare const template: import("@microsoft/fast-element").ViewTemplate<TableCell<import("../../../table-column/base/types").TableCellRecord>, any>;
+export declare const template: ViewTemplate<TableCell<import("../../../table-column/base/types").TableCellRecord>, any>;
+export declare const createCellViewTemplate: (cellViewTag: string) => ViewTemplate<TableCell>;