@ni/nimble-components 18.9.1 → 18.10.1

package/dist/all-components-bundle.js

@@ -16744,9 +16744,9 @@
         return `${prefix}${uniqueIdCounter++}`;
     }
 
-    const template$n = html `<slot></slot>`;
+    const template$o = html `<slot></slot>`;
 
-    const styles$L = css `
+    const styles$M = css `
     :host {
         display: contents;
     }
@@ -16802,8 +16802,8 @@
     ], ThemeProvider.prototype, "theme", void 0);
     const nimbleDesignSystemProvider = ThemeProvider.compose({
         baseName: 'theme-provider',
-        styles: styles$L,
-        template: template$n
+        styles: styles$M,
+        template: template$o
     });
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
@@ -16987,7 +16987,7 @@
         }
     }
 
-    const styles$K = css `
+    const styles$L = css `
     ${display('inline')}
 
     :host {
@@ -17070,7 +17070,7 @@
 `;
 
     // prettier-ignore
-    const template$m = (context, definition) => html `
+    const template$n = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17140,11 +17140,12 @@
     __decorate$1([
         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: Anchor$1,
-        template: template$m,
-        styles: styles$K,
+        template: template$n,
+        styles: styles$L,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17230,7 +17231,7 @@
         return new MultivaluePropertyStyleSheetBehavior('appearance', value, styles);
     }
 
-    const styles$J = css `
+    const styles$K = css `
     ${display('inline-flex')}
 
     :host {
@@ -17511,8 +17512,8 @@
             }
         `));
 
-    const styles$I = css `
-    ${styles$J}
+    const styles$J = css `
+    ${styles$K}
     ${buttonAppearanceVariantStyles}
 
     .control {
@@ -17520,7 +17521,7 @@
     }
 `;
 
-    const template$l = (context, definition) => html `
+    const template$m = (context, definition) => html `
     <a
         class="control"
         part="control"
@@ -17602,8 +17603,8 @@
     ], AnchorButton.prototype, "disabled", void 0);
     const nimbleAnchorButton = AnchorButton.compose({
         baseName: 'anchor-button',
-        template: template$l,
-        styles: styles$I,
+        template: template$m,
+        styles: styles$J,
         shadowOptions: {
             delegatesFocus: true
         }
@@ -17611,7 +17612,7 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorButton());
     DesignSystem.tagFor(AnchorButton);
 
-    const styles$H = css `
+    const styles$I = css `
     ${display('grid')}
 
     :host {
@@ -17688,7 +17689,7 @@
     }
 `;
 
-    const template$k = (context, definition) => html `
+    const template$l = (context, definition) => html `
     <template
         role="menuitem"
         class="${x => (typeof x.startColumnCount === 'number'
@@ -17791,15 +17792,15 @@
     __decorate$1([
         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: template$k,
-        styles: styles$H,
+        template: template$l,
+        styles: styles$I,
         shadowOptions: {
             delegatesFocus: true
         }
     });
-    applyMixins(AnchorMenuItem, StartEnd);
     DesignSystem.getOrCreate()
         .withPrefix('nimble')
         .register(nimbleAnchorMenuItem());
@@ -17819,7 +17820,7 @@
         }
     });
 
-    const styles$G = css `
+    const styles$H = css `
     ${display('inline-flex')}
 
     :host {
@@ -17925,8 +17926,8 @@
     }
 `;
 
-    const styles$F = css `
-    ${styles$G}
+    const styles$G = css `
+    ${styles$H}
 
     a {
         text-decoration: none;
@@ -17934,9 +17935,17 @@
         cursor: inherit;
         outline: none;
     }
+
+    [part='start'] {
+        display: none;
+    }
+
+    [part='end'] {
+        display: none;
+    }
 `;
 
-    const template$j = () => html `
+    const template$k = (context, definition) => html `
     <template slot="anchortab" role="tab" aria-disabled="${x => x.disabled}">
         <a
             download="${x => x.download}"
@@ -17949,7 +17958,9 @@
             type="${x => x.type}"
             tabindex="-1"
         >
+            ${startSlotTemplate(context, definition)}
             <slot></slot>
+            ${endSlotTemplate(context, definition)}
         </a>
     </template>
 `;
@@ -17972,15 +17983,16 @@
     __decorate$1([
         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: template$j,
-        styles: styles$F
+        template: template$k,
+        styles: styles$G
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTab());
     DesignSystem.tagFor(AnchorTab);
 
-    const styles$E = css `
+    const styles$F = css `
     ${display('grid')}
 
     :host {
@@ -17998,7 +18010,7 @@
     }
 `;
 
-    const template$i = (context, definition) => html `
+    const template$j = (context, definition) => html `
     ${startSlotTemplate(context, definition)}
     <div ${ref('tablist')} class="tablist" part="tablist" role="tablist">
         <slot name="anchortab" ${slotted('tabs')}></slot>
@@ -18195,8 +18207,8 @@
     applyMixins(AnchorTabs, StartEnd);
     const nimbleAnchorTabs = AnchorTabs.compose({
         baseName: 'anchor-tabs',
-        template: template$i,
-        styles: styles$E,
+        template: template$j,
+        styles: styles$F,
         shadowOptions: {
             delegatesFocus: false
         }
@@ -18204,6 +18216,258 @@
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleAnchorTabs());
     DesignSystem.tagFor(AnchorTabs);
 
+    const styles$E = 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};
+    }
+`;
+
+    const template$i = (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>
+`;
+
+    /**
+     * A nimble-styled anchor tree item
+     */
+    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()) {
+                        TreeItem$1.focusItem(this.parentElement);
+                    }
+                    break;
+            }
+            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$1([
+        attr({ mode: 'boolean' })
+    ], AnchorTreeItem.prototype, "selected", void 0);
+    __decorate$1([
+        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: template$i,
+        styles: styles$E,
+        shadowOptions: {
+            delegatesFocus: true
+        }
+    });
+    DesignSystem.getOrCreate()
+        .withPrefix('nimble')
+        .register(nimbleAnchorTreeItem());
+    DesignSystem.tagFor(AnchorTreeItem);
+
     const styles$D = css `
     :host {
         contain: layout;
@@ -18467,7 +18731,7 @@
         `));
 
     const styles$B = css `
-    ${styles$J}
+    ${styles$K}
     ${buttonAppearanceVariantStyles}
 `;
 
@@ -19809,7 +20073,7 @@
     DesignSystem.tagFor(Checkbox);
 
     const styles$v = css `
-    ${styles$J}
+    ${styles$K}
 
     .control[aria-pressed='true'] {
         background-color: ${fillSelectedColor};
@@ -24234,7 +24498,7 @@
         baseName: 'tab',
         baseClass: Tab$1,
         template: tabTemplate,
-        styles: styles$G
+        styles: styles$H
     });
     DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleTab());
     DesignSystem.tagFor(Tab);