@ni/ok-components 1.2.1 → 1.3.0

package/dist/esm/fv/card/styles.js

@@ -0,0 +1,231 @@
+import { css } from '@ni/fast-element';
+import { bodyFont, bodyFontColor, bodyPlus1EmphasizedFont, bodyPlus1EmphasizedFontColor, borderHoverColor, cardBorderColor, controlHeight, mediumPadding, sectionBackgroundColor, smallPadding, smallDelay, standardPadding, subtitleFont, subtitleFontColor, tooltipCaptionFont, tooltipCaptionFontColor } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
+import { appearanceBehavior } from '@ni/nimble-components/dist/esm/utilities/style/appearance';
+import { display } from '../../utilities/style/display';
+import { FvCardAppearance } from './types';
+export const styles = css `
+    ${display('block')}
+
+    :host {
+        display: block;
+    }
+
+    @layer base, hover, focusVisible, active, disabled, top;
+
+    @layer base {
+        ${display('block')}
+
+        :host {
+            display: block;
+        }
+
+        .card-shell {
+            display: block;
+            width: 100%;
+            box-sizing: border-box;
+            padding: ${standardPadding};
+            border-radius: 8px;
+        }
+
+        .card-button-shell {
+            overflow: clip;
+            transition:
+                background-color ${smallDelay} ease-in-out,
+                border-color ${smallDelay} ease-in-out,
+                box-shadow ${smallDelay} ease-in-out;
+            --ni-private-card-button-background-hover-color: transparent;
+            --ni-private-card-button-background-active-color: transparent;
+            --ni-private-card-button-border-active-color: transparent;
+            --ni-private-card-button-border-selected-color: transparent;
+        }
+
+        .card-layout {
+            display: grid;
+            grid-template-columns: minmax(0, 1fr);
+            align-items: start;
+        }
+
+        .card-layout.has-media {
+            grid-template-columns: auto minmax(0, 1fr);
+            column-gap: ${standardPadding};
+        }
+
+        .media-region {
+            display: flex;
+            align-items: flex-start;
+            justify-content: center;
+            align-self: start;
+            min-width: calc(${controlHeight} + ${mediumPadding});
+        }
+
+        .media-region slot[name='icon'] {
+            display: block;
+        }
+
+        .initials-tile {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            width: 40px;
+            height: 40px;
+            border-radius: 8px;
+            background: rgba(0, 0, 0, 0.06);
+            color: ${bodyPlus1EmphasizedFontColor};
+            font: ${bodyPlus1EmphasizedFont};
+            text-transform: uppercase;
+        }
+
+        .main-region {
+            min-width: 0;
+            display: grid;
+            grid-template-columns: minmax(0, 1fr);
+            gap: ${mediumPadding};
+            text-align: left;
+        }
+
+        .header-row {
+            display: flex;
+            gap: ${mediumPadding};
+            align-items: flex-start;
+            justify-content: space-between;
+            min-width: 0;
+        }
+
+        .title-group,
+        .body,
+        .footer,
+        .actions {
+            min-width: 0;
+        }
+
+        .title-group {
+            display: grid;
+            gap: 2px;
+        }
+
+        .title {
+            font: ${bodyPlus1EmphasizedFont};
+            color: ${bodyPlus1EmphasizedFontColor};
+        }
+
+        .subtitle {
+            font: ${subtitleFont};
+            color: ${subtitleFontColor};
+        }
+
+        .badges {
+            display: inline-flex;
+            gap: ${smallPadding};
+            align-items: center;
+            justify-content: flex-end;
+            flex-wrap: wrap;
+            text-align: right;
+        }
+
+        .body {
+            display: grid;
+            gap: ${smallPadding};
+            color: ${bodyFontColor};
+            font: ${bodyFont};
+            text-align: left;
+        }
+
+        .description {
+            font: ${bodyFont};
+            color: ${bodyFontColor};
+            text-align: left;
+        }
+
+        .footer {
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            gap: ${mediumPadding};
+            font: ${tooltipCaptionFont};
+            color: ${tooltipCaptionFontColor};
+            text-transform: uppercase;
+        }
+
+        .footer-start,
+        .footer-end {
+            min-width: 0;
+        }
+
+        .footer-end {
+            text-align: right;
+        }
+
+        .actions {
+            display: flex;
+            justify-content: flex-end;
+            align-items: center;
+            gap: ${smallPadding};
+            flex-wrap: wrap;
+        }
+
+        ::slotted([slot='icon']) {
+            display: block;
+        }
+
+        ::slotted([slot='badges']),
+        ::slotted([slot='footer-start']),
+        ::slotted([slot='footer-end']) {
+            display: block;
+            max-width: 100%;
+        }
+
+        .actions ::slotted(*) {
+            flex: 0 0 auto;
+        }
+    }
+
+    @layer hover {
+        .card-button-shell:hover {
+            box-shadow: 0 0 0 2px ${borderHoverColor};
+        }
+    }
+
+    @layer focusVisible {}
+
+    @layer active {
+        .card-button-shell:active {
+            box-shadow: none;
+            border-color: ${borderHoverColor};
+        }
+    }
+
+    @layer disabled {
+        .card-button-shell[disabled] {
+            box-shadow: none;
+        }
+    }
+
+    @layer top {}
+`
+    .withBehaviors(appearanceBehavior(FvCardAppearance.outline, css `
+            @layer base {
+                .card-shell {
+                    border: 2px solid ${cardBorderColor};
+                }
+            }
+
+            @layer hover {
+                .card-button-shell:hover {
+                    border-color: transparent;
+                }
+            }
+
+            @layer active {
+                .card-button-shell:hover:active {
+                    border-color: ${borderHoverColor};
+                }
+            }
+        `), appearanceBehavior(FvCardAppearance.block, css `
+            @layer base {
+                .card-shell {
+                    background-color: ${sectionBackgroundColor};
+                    border: 2px solid transparent;
+                }
+            }
+        `));
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv/card/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/card/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,QAAQ,EACR,aAAa,EACb,uBAAuB,EACvB,4BAA4B,EAC5B,gBAAgB,EAChB,eAAe,EACf,aAAa,EACb,aAAa,EACb,sBAAsB,EACtB,YAAY,EACZ,UAAU,EACV,eAAe,EACf,YAAY,EACZ,iBAAiB,EACjB,kBAAkB,EAClB,uBAAuB,EAC1B,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAC;AAC/F,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AACxD,OAAO,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAE3C,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;MACnB,OAAO,CAAC,OAAO,CAAC;;;;;;;;;UASZ,OAAO,CAAC,OAAO,CAAC;;;;;;;;;;uBAUH,eAAe;;;;;;;mCAOH,UAAU;+BACd,UAAU;6BACZ,UAAU;;;;;;;;;;;;;;;0BAeb,eAAe;;;;;;;;8BAQX,aAAa,MAAM,aAAa;;;;;;;;;;;;;;;qBAezC,4BAA4B;oBAC7B,uBAAuB;;;;;;;;mBAQxB,aAAa;;;;;;mBAMb,aAAa;;;;;;;;;;;;;;;;;;;oBAmBZ,uBAAuB;qBACtB,4BAA4B;;;;oBAI7B,YAAY;qBACX,iBAAiB;;;;;mBAKnB,YAAY;;;;;;;;;mBASZ,YAAY;qBACV,aAAa;oBACd,QAAQ;;;;;oBAKR,QAAQ;qBACP,aAAa;;;;;;;;mBAQf,aAAa;oBACZ,kBAAkB;qBACjB,uBAAuB;;;;;;;;;;;;;;;;;mBAiBzB,YAAY;;;;;;;;;;;;;;;;;;;;;;oCAsBK,gBAAgB;;;;;;;;;4BASxB,gBAAgB;;;;;;;;;;;CAW3C;KACA,aAAa,CACV,kBAAkB,CACd,gBAAgB,CAAC,OAAO,EACxB,GAAG,CAAA;;;wCAG6B,eAAe;;;;;;;;;;;;oCAYnB,gBAAgB;;;SAG3C,CACJ,EACD,kBAAkB,CACd,gBAAgB,CAAC,KAAK,EACtB,GAAG,CAAA;;;wCAG6B,sBAAsB;;;;SAIrD,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyFont,\n    bodyFontColor,\n    bodyPlus1EmphasizedFont,\n    bodyPlus1EmphasizedFontColor,\n    borderHoverColor,\n    cardBorderColor,\n    controlHeight,\n    mediumPadding,\n    sectionBackgroundColor,\n    smallPadding,\n    smallDelay,\n    standardPadding,\n    subtitleFont,\n    subtitleFontColor,\n    tooltipCaptionFont,\n    tooltipCaptionFontColor\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { appearanceBehavior } from '@ni/nimble-components/dist/esm/utilities/style/appearance';\nimport { display } from '../../utilities/style/display';\nimport { FvCardAppearance } from './types';\n\nexport const styles = css`\n    ${display('block')}\n\n    :host {\n        display: block;\n    }\n\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('block')}\n\n        :host {\n            display: block;\n        }\n\n        .card-shell {\n            display: block;\n            width: 100%;\n            box-sizing: border-box;\n            padding: ${standardPadding};\n            border-radius: 8px;\n        }\n\n        .card-button-shell {\n            overflow: clip;\n            transition:\n                background-color ${smallDelay} ease-in-out,\n                border-color ${smallDelay} ease-in-out,\n                box-shadow ${smallDelay} ease-in-out;\n            --ni-private-card-button-background-hover-color: transparent;\n            --ni-private-card-button-background-active-color: transparent;\n            --ni-private-card-button-border-active-color: transparent;\n            --ni-private-card-button-border-selected-color: transparent;\n        }\n\n        .card-layout {\n            display: grid;\n            grid-template-columns: minmax(0, 1fr);\n            align-items: start;\n        }\n\n        .card-layout.has-media {\n            grid-template-columns: auto minmax(0, 1fr);\n            column-gap: ${standardPadding};\n        }\n\n        .media-region {\n            display: flex;\n            align-items: flex-start;\n            justify-content: center;\n            align-self: start;\n            min-width: calc(${controlHeight} + ${mediumPadding});\n        }\n\n        .media-region slot[name='icon'] {\n            display: block;\n        }\n\n        .initials-tile {\n            display: inline-flex;\n            align-items: center;\n            justify-content: center;\n            width: 40px;\n            height: 40px;\n            border-radius: 8px;\n            background: rgba(0, 0, 0, 0.06);\n            color: ${bodyPlus1EmphasizedFontColor};\n            font: ${bodyPlus1EmphasizedFont};\n            text-transform: uppercase;\n        }\n\n        .main-region {\n            min-width: 0;\n            display: grid;\n            grid-template-columns: minmax(0, 1fr);\n            gap: ${mediumPadding};\n            text-align: left;\n        }\n\n        .header-row {\n            display: flex;\n            gap: ${mediumPadding};\n            align-items: flex-start;\n            justify-content: space-between;\n            min-width: 0;\n        }\n\n        .title-group,\n        .body,\n        .footer,\n        .actions {\n            min-width: 0;\n        }\n\n        .title-group {\n            display: grid;\n            gap: 2px;\n        }\n\n        .title {\n            font: ${bodyPlus1EmphasizedFont};\n            color: ${bodyPlus1EmphasizedFontColor};\n        }\n\n        .subtitle {\n            font: ${subtitleFont};\n            color: ${subtitleFontColor};\n        }\n\n        .badges {\n            display: inline-flex;\n            gap: ${smallPadding};\n            align-items: center;\n            justify-content: flex-end;\n            flex-wrap: wrap;\n            text-align: right;\n        }\n\n        .body {\n            display: grid;\n            gap: ${smallPadding};\n            color: ${bodyFontColor};\n            font: ${bodyFont};\n            text-align: left;\n        }\n\n        .description {\n            font: ${bodyFont};\n            color: ${bodyFontColor};\n            text-align: left;\n        }\n\n        .footer {\n            display: flex;\n            align-items: center;\n            justify-content: space-between;\n            gap: ${mediumPadding};\n            font: ${tooltipCaptionFont};\n            color: ${tooltipCaptionFontColor};\n            text-transform: uppercase;\n        }\n\n        .footer-start,\n        .footer-end {\n            min-width: 0;\n        }\n\n        .footer-end {\n            text-align: right;\n        }\n\n        .actions {\n            display: flex;\n            justify-content: flex-end;\n            align-items: center;\n            gap: ${smallPadding};\n            flex-wrap: wrap;\n        }\n\n        ::slotted([slot='icon']) {\n            display: block;\n        }\n\n        ::slotted([slot='badges']),\n        ::slotted([slot='footer-start']),\n        ::slotted([slot='footer-end']) {\n            display: block;\n            max-width: 100%;\n        }\n\n        .actions ::slotted(*) {\n            flex: 0 0 auto;\n        }\n    }\n\n    @layer hover {\n        .card-button-shell:hover {\n            box-shadow: 0 0 0 2px ${borderHoverColor};\n        }\n    }\n\n    @layer focusVisible {}\n\n    @layer active {\n        .card-button-shell:active {\n            box-shadow: none;\n            border-color: ${borderHoverColor};\n        }\n    }\n\n    @layer disabled {\n        .card-button-shell[disabled] {\n            box-shadow: none;\n        }\n    }\n\n    @layer top {}\n`\n.withBehaviors(\n    appearanceBehavior(\n        FvCardAppearance.outline,\n        css`\n            @layer base {\n                .card-shell {\n                    border: 2px solid ${cardBorderColor};\n                }\n            }\n\n            @layer hover {\n                .card-button-shell:hover {\n                    border-color: transparent;\n                }\n            }\n\n            @layer active {\n                .card-button-shell:hover:active {\n                    border-color: ${borderHoverColor};\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        FvCardAppearance.block,\n        css`\n            @layer base {\n                .card-shell {\n                    background-color: ${sectionBackgroundColor};\n                    border: 2px solid transparent;\n                }\n            }\n        `\n    )\n);\n"]}

package/dist/esm/fv/card/template.d.ts

@@ -0,0 +1,2 @@
+import type { FvCard } from '.';
+export declare const template: import("@ni/fast-element").ViewTemplate<FvCard, any>;

package/dist/esm/fv/card/template.js

@@ -0,0 +1,126 @@
+import { html, when } from '@ni/fast-element';
+import { cardTag } from '@ni/nimble-components/dist/esm/card';
+import { cardButtonTag } from '@ni/nimble-components/dist/esm/card-button';
+import { FvCardInteractionMode } from './types';
+const cardContentTemplate = html `
+    <div class="card-layout ${x => (x.hasMedia ? 'has-media' : 'no-media')}">
+        ${when(x => x.hasMedia, html `
+                <div class="media-region" part="media-region">
+                    ${when(x => x.showInitials, html `
+                            <div class="initials-tile" part="initials-tile" aria-hidden="true">
+                                ${x => x.initialsText}
+                            </div>
+                        `)}
+                    <slot
+                        name="icon"
+                        @slotchange="${(x, c) => x.handleIconSlotChange(c.event)}"
+                    ></slot>
+                </div>
+            `)}
+        <div class="main-region" part="main-region">
+            <div class="header-row" part="header-row">
+                <div class="title-group" part="title-group">
+                    <div class="title" part="title">${x => x.title}</div>
+                    ${when(x => x.subtitle.length > 0, html `
+                            <div class="subtitle" part="subtitle">${x => x.subtitle}</div>
+                        `)}
+                </div>
+                ${when(x => x.hasBadgesContent, html `
+                        <div class="badges" part="badges">
+                            <slot
+                                name="badges"
+                                @slotchange="${(x, c) => x.handleBadgesSlotChange(c.event)}"
+                            ></slot>
+                        </div>
+                    `)}
+                ${when(x => !x.hasBadgesContent, html `
+                        <slot
+                            name="badges"
+                            hidden
+                            @slotchange="${(x, c) => x.handleBadgesSlotChange(c.event)}"
+                        ></slot>
+                    `)}
+            </div>
+            ${when(x => x.showBody, html `
+                    <div class="body" part="body">
+                        ${when(x => x.description.length > 0, html `
+                                <div class="description" part="description">${x => x.description}</div>
+                            `)}
+                        <slot
+                            @slotchange="${(x, c) => x.handleDefaultSlotChange(c.event)}"
+                        ></slot>
+                    </div>
+                `)}
+            ${when(x => !x.showBody, html `
+                    <slot
+                        hidden
+                        @slotchange="${(x, c) => x.handleDefaultSlotChange(c.event)}"
+                    ></slot>
+                `)}
+            ${when(x => x.showFooter, html `
+                    <div class="footer" part="footer">
+                        <div class="footer-start" part="footer-start">
+                            <slot
+                                name="footer-start"
+                                @slotchange="${(x, c) => x.handleFooterStartSlotChange(c.event)}"
+                            ></slot>
+                        </div>
+                        <div class="footer-end" part="footer-end">
+                            <slot
+                                name="footer-end"
+                                @slotchange="${(x, c) => x.handleFooterEndSlotChange(c.event)}"
+                            ></slot>
+                        </div>
+                    </div>
+                `)}
+            ${when(x => !x.showFooter, html `
+                    <slot
+                        name="footer-start"
+                        hidden
+                        @slotchange="${(x, c) => x.handleFooterStartSlotChange(c.event)}"
+                    ></slot>
+                    <slot
+                        name="footer-end"
+                        hidden
+                        @slotchange="${(x, c) => x.handleFooterEndSlotChange(c.event)}"
+                    ></slot>
+                `)}
+            ${when(x => x.showActions, html `
+                    <div class="actions" part="actions">
+                        <slot
+                            name="actions"
+                            @slotchange="${(x, c) => x.handleActionsSlotChange(c.event)}"
+                        ></slot>
+                    </div>
+                `)}
+            ${when(x => !x.showActions, html `
+                    <slot
+                        name="actions"
+                        hidden
+                        @slotchange="${(x, c) => x.handleActionsSlotChange(c.event)}"
+                    ></slot>
+                `)}
+        </div>
+    </div>
+`;
+export const template = html `
+    ${when(x => x.interactionMode === FvCardInteractionMode.card, html `
+            <${cardButtonTag}
+                class="card-shell card-button-shell"
+                part="card-shell"
+                ?disabled="${x => x.disabled}"
+            >
+                <div class="card-button-content">
+                    ${cardContentTemplate}
+                </div>
+            </${cardButtonTag}>
+        `, html `
+            <${cardTag}
+                class="card-shell card-static-shell"
+                part="card-shell"
+            >
+                ${cardContentTemplate}
+            </${cardTag}>
+        `)}
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv/card/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../../src/fv/card/template.ts"],"names":[],"mappings":"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","sourcesContent":["import { html, when } from '@ni/fast-element';\nimport { cardTag } from '@ni/nimble-components/dist/esm/card';\nimport { cardButtonTag } from '@ni/nimble-components/dist/esm/card-button';\nimport { FvCardInteractionMode } from './types';\nimport type { FvCard } from '.';\n\nconst cardContentTemplate = html<FvCard>`\n    <div class=\"card-layout ${x => (x.hasMedia ? 'has-media' : 'no-media')}\">\n        ${when(\n            x => x.hasMedia,\n            html<FvCard>`\n                <div class=\"media-region\" part=\"media-region\">\n                    ${when(\n                        x => x.showInitials,\n                        html<FvCard>`\n                            <div class=\"initials-tile\" part=\"initials-tile\" aria-hidden=\"true\">\n                                ${x => x.initialsText}\n                            </div>\n                        `\n                    )}\n                    <slot\n                        name=\"icon\"\n                        @slotchange=\"${(x, c) => x.handleIconSlotChange(c.event)}\"\n                    ></slot>\n                </div>\n            `\n        )}\n        <div class=\"main-region\" part=\"main-region\">\n            <div class=\"header-row\" part=\"header-row\">\n                <div class=\"title-group\" part=\"title-group\">\n                    <div class=\"title\" part=\"title\">${x => x.title}</div>\n                    ${when(\n                        x => x.subtitle.length > 0,\n                        html<FvCard>`\n                            <div class=\"subtitle\" part=\"subtitle\">${x => x.subtitle}</div>\n                        `\n                    )}\n                </div>\n                ${when(\n                    x => x.hasBadgesContent,\n                    html<FvCard>`\n                        <div class=\"badges\" part=\"badges\">\n                            <slot\n                                name=\"badges\"\n                                @slotchange=\"${(x, c) => x.handleBadgesSlotChange(c.event)}\"\n                            ></slot>\n                        </div>\n                    `\n                )}\n                ${when(\n                    x => !x.hasBadgesContent,\n                    html<FvCard>`\n                        <slot\n                            name=\"badges\"\n                            hidden\n                            @slotchange=\"${(x, c) => x.handleBadgesSlotChange(c.event)}\"\n                        ></slot>\n                    `\n                )}\n            </div>\n            ${when(\n                x => x.showBody,\n                html<FvCard>`\n                    <div class=\"body\" part=\"body\">\n                        ${when(\n                            x => x.description.length > 0,\n                            html<FvCard>`\n                                <div class=\"description\" part=\"description\">${x => x.description}</div>\n                            `\n                        )}\n                        <slot\n                            @slotchange=\"${(x, c) => x.handleDefaultSlotChange(c.event)}\"\n                        ></slot>\n                    </div>\n                `\n            )}\n            ${when(\n                x => !x.showBody,\n                html<FvCard>`\n                    <slot\n                        hidden\n                        @slotchange=\"${(x, c) => x.handleDefaultSlotChange(c.event)}\"\n                    ></slot>\n                `\n            )}\n            ${when(\n                x => x.showFooter,\n                html<FvCard>`\n                    <div class=\"footer\" part=\"footer\">\n                        <div class=\"footer-start\" part=\"footer-start\">\n                            <slot\n                                name=\"footer-start\"\n                                @slotchange=\"${(x, c) => x.handleFooterStartSlotChange(c.event)}\"\n                            ></slot>\n                        </div>\n                        <div class=\"footer-end\" part=\"footer-end\">\n                            <slot\n                                name=\"footer-end\"\n                                @slotchange=\"${(x, c) => x.handleFooterEndSlotChange(c.event)}\"\n                            ></slot>\n                        </div>\n                    </div>\n                `\n            )}\n            ${when(\n                x => !x.showFooter,\n                html<FvCard>`\n                    <slot\n                        name=\"footer-start\"\n                        hidden\n                        @slotchange=\"${(x, c) => x.handleFooterStartSlotChange(c.event)}\"\n                    ></slot>\n                    <slot\n                        name=\"footer-end\"\n                        hidden\n                        @slotchange=\"${(x, c) => x.handleFooterEndSlotChange(c.event)}\"\n                    ></slot>\n                `\n            )}\n            ${when(\n                x => x.showActions,\n                html<FvCard>`\n                    <div class=\"actions\" part=\"actions\">\n                        <slot\n                            name=\"actions\"\n                            @slotchange=\"${(x, c) => x.handleActionsSlotChange(c.event)}\"\n                        ></slot>\n                    </div>\n                `\n            )}\n            ${when(\n                x => !x.showActions,\n                html<FvCard>`\n                    <slot\n                        name=\"actions\"\n                        hidden\n                        @slotchange=\"${(x, c) => x.handleActionsSlotChange(c.event)}\"\n                    ></slot>\n                `\n            )}\n        </div>\n    </div>\n`;\n\nexport const template = html<FvCard>`\n    ${when(\n        x => x.interactionMode === FvCardInteractionMode.card,\n        html<FvCard>`\n            <${cardButtonTag}\n                class=\"card-shell card-button-shell\"\n                part=\"card-shell\"\n                ?disabled=\"${x => x.disabled}\"\n            >\n                <div class=\"card-button-content\">\n                    ${cardContentTemplate}\n                </div>\n            </${cardButtonTag}>\n        `,\n        html<FvCard>`\n            <${cardTag}\n                class=\"card-shell card-static-shell\"\n                part=\"card-shell\"\n            >\n                ${cardContentTemplate}\n            </${cardTag}>\n        `\n    )}\n`;\n"]}

package/dist/esm/fv/card/types.d.ts

@@ -0,0 +1,10 @@
+export declare const FvCardAppearance: {
+    readonly outline: "outline";
+    readonly block: "block";
+};
+export type FvCardAppearance = (typeof FvCardAppearance)[keyof typeof FvCardAppearance];
+export declare const FvCardInteractionMode: {
+    readonly static: "static";
+    readonly card: "card";
+};
+export type FvCardInteractionMode = (typeof FvCardInteractionMode)[keyof typeof FvCardInteractionMode];

package/dist/esm/fv/card/types.js

@@ -0,0 +1,9 @@
+export const FvCardAppearance = {
+    outline: 'outline',
+    block: 'block'
+};
+export const FvCardInteractionMode = {
+    static: 'static',
+    card: 'card'
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/fv/card/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../../src/fv/card/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,gBAAgB,GAAG;IAC5B,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;CACR,CAAC;AAIX,MAAM,CAAC,MAAM,qBAAqB,GAAG;IACjC,MAAM,EAAE,QAAQ;IAChB,IAAI,EAAE,MAAM;CACN,CAAC","sourcesContent":["export const FvCardAppearance = {\n    outline: 'outline',\n    block: 'block'\n} as const;\n\nexport type FvCardAppearance = (typeof FvCardAppearance)[keyof typeof FvCardAppearance];\n\nexport const FvCardInteractionMode = {\n    static: 'static',\n    card: 'card'\n} as const;\n\nexport type FvCardInteractionMode = (typeof FvCardInteractionMode)[keyof typeof FvCardInteractionMode];\n"]}

package/dist/esm/fv/chip-selector/index.d.ts

@@ -0,0 +1,104 @@
+import { FoundationElement } from '@ni/fast-foundation';
+import type { AnchoredRegion } from '@ni/nimble-components/dist/esm/anchored-region';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-chip-selector': FvChipSelector;
+    }
+}
+/**
+ * A chip picker with inline text entry, removable chips, and a dropdown option list.
+ */
+export declare class FvChipSelector extends FoundationElement {
+    disabled: boolean;
+    open: boolean;
+    label: string;
+    selectedValues: string;
+    options: string;
+    placeholder: string;
+    allowCustomValues: boolean;
+    /** @internal */
+    filterText: string;
+    /** @internal */
+    activeOptionIndex: number;
+    /** @internal */
+    activeOptionId: string | null;
+    /** @internal */
+    readonly inputId: string;
+    /** @internal */
+    readonly labelId: string;
+    /** @internal */
+    readonly menuId: string;
+    /** @internal */
+    readonly region?: AnchoredRegion;
+    /** @internal */
+    readonly field?: HTMLElement;
+    private inputElement;
+    private menuButtonElement;
+    /** @internal */
+    disabledChanged(): void;
+    /** @internal */
+    openChanged(): void;
+    /** @internal */
+    activeOptionIndexChanged(): void;
+    /** @internal */
+    filterTextChanged(): void;
+    /** @internal */
+    optionsChanged(): void;
+    /** @internal */
+    allowCustomValuesChanged(): void;
+    /** @internal */
+    selectedValuesChanged(): void;
+    /** @internal */
+    connectedCallback(): void;
+    /** @internal */
+    disconnectedCallback(): void;
+    /** @internal */
+    captureInputRef(input: HTMLInputElement | null): void;
+    /** @internal */
+    captureMenuButtonRef(menuButton: (HTMLElement & {
+        checked?: boolean;
+    }) | null): void;
+    /** @internal */
+    regionChanged(_prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void;
+    /** @internal */
+    fieldChanged(_prev: HTMLElement | undefined, _next: HTMLElement | undefined): void;
+    /** @internal */
+    get selectedValueList(): string[];
+    /** @internal */
+    get optionList(): string[];
+    /** @internal */
+    get visibleOptionList(): string[];
+    /** @internal */
+    get customValueCandidate(): string;
+    /** @internal */
+    get createOptionLabel(): string;
+    /** @internal */
+    get showEmptyState(): boolean;
+    /** @internal */
+    handleFieldClick(event: Event): void;
+    /** @internal */
+    handleMenuButtonClick(event: Event): void;
+    /** @internal */
+    handleMenuButtonChange(event: Event): void;
+    /** @internal */
+    handleInput(event: Event): void;
+    /** @internal */
+    handleInputFocus(): void;
+    /** @internal */
+    handleInputKeydown(event: KeyboardEvent): boolean;
+    /** @internal */
+    handleChipRemove(event: Event): void;
+    /** @internal */
+    handleMenuClick(event: Event): void;
+    /** @internal */
+    handleMenuItemChange(event: Event): void;
+    private readonly documentClickHandler;
+    private syncActiveOption;
+    private commitActiveOption;
+    private addValue;
+    private removeValue;
+    private commitSelection;
+    private setOpen;
+    private syncMenuButtonState;
+}
+export declare const fvChipSelectorTag = "ok-fv-chip-selector";