@ni/ok-components 0.3.13 → 0.4.1

package/dist/custom-elements.json

@@ -49,6 +49,142 @@
         }
       ]
     },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv-accordion-item/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "An accordion item component that can be expanded or collapsed to\nshow or hide its content.",
+          "name": "FvAccordionItem",
+          "members": [
+            {
+              "kind": "field",
+              "name": "header",
+              "type": {
+                "text": "string"
+              },
+              "privacy": "public",
+              "default": "''"
+            },
+            {
+              "kind": "field",
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "privacy": "public",
+              "default": "false"
+            },
+            {
+              "kind": "field",
+              "name": "appearance",
+              "type": {
+                "text": "FvAccordionItemAppearance"
+              },
+              "privacy": "public"
+            },
+            {
+              "kind": "method",
+              "name": "handleToggle",
+              "privacy": "public",
+              "return": {
+                "type": {
+                  "text": "boolean"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "event",
+                  "type": {
+                    "text": "Event"
+                  }
+                }
+              ]
+            }
+          ],
+          "attributes": [
+            {
+              "name": "header",
+              "type": {
+                "text": "string"
+              },
+              "default": "''",
+              "fieldName": "header"
+            },
+            {
+              "name": "expanded",
+              "type": {
+                "text": "boolean"
+              },
+              "default": "false",
+              "fieldName": "expanded"
+            },
+            {
+              "name": "appearance",
+              "type": {
+                "text": "FvAccordionItemAppearance"
+              },
+              "fieldName": "appearance"
+            }
+          ],
+          "superclass": {
+            "name": "FoundationElement",
+            "package": "@ni/fast-foundation"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "fvAccordionItemTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-fv-accordion-item'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvAccordionItem",
+          "declaration": {
+            "name": "FvAccordionItem",
+            "module": "src/fv-accordion-item/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "fvAccordionItemTag",
+          "declaration": {
+            "name": "fvAccordionItemTag",
+            "module": "src/fv-accordion-item/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv-accordion-item/types.ts",
+      "declarations": [
+        {
+          "kind": "variable",
+          "name": "FvAccordionItemAppearance",
+          "type": {
+            "text": "{\n    outline: 'outline',\n    ghost: 'ghost',\n    block: 'block'\n}"
+          },
+          "default": "{ outline: 'outline', ghost: 'ghost', block: 'block' }"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "FvAccordionItemAppearance",
+          "declaration": {
+            "name": "FvAccordionItemAppearance",
+            "module": "src/fv-accordion-item/types.ts"
+          }
+        }
+      ]
+    },
     {
       "kind": "javascript-module",
       "path": "src/icon-dynamic/index.ts",

package/dist/custom-elements.md

@@ -8,6 +8,38 @@
 
 <hr/>
 
+## class: `FvAccordionItem`
+
+### Superclass
+
+| Name                | Module | Package             |
+| ------------------- | ------ | ------------------- |
+| `FoundationElement` |        | @ni/fast-foundation |
+
+### Fields
+
+| Name         | Privacy | Type                        | Default | Description | Inherited From |
+| ------------ | ------- | --------------------------- | ------- | ----------- | -------------- |
+| `header`     | public  | `string`                    | `''`    |             |                |
+| `expanded`   | public  | `boolean`                   | `false` |             |                |
+| `appearance` | public  | `FvAccordionItemAppearance` |         |             |                |
+
+### Methods
+
+| Name           | Privacy | Description | Parameters     | Return    | Inherited From |
+| -------------- | ------- | ----------- | -------------- | --------- | -------------- |
+| `handleToggle` | public  |             | `event: Event` | `boolean` |                |
+
+### Attributes
+
+| Name         | Field      | Inherited From |
+| ------------ | ---------- | -------------- |
+| `header`     | header     |                |
+| `expanded`   | expanded   |                |
+| `appearance` | appearance |                |
+
+<hr/>
+
 ## class: `IconDynamic`
 
 ### Superclass

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

@@ -4,5 +4,6 @@
  * that are required instead of leveraging this file.
  */
 import '@ni/spright-components/dist/esm/all-components';
+import './fv-accordion-item';
 import './button';
 import './icon-dynamic';

package/dist/esm/all-components.js

@@ -4,6 +4,7 @@
  * that are required instead of leveraging this file.
  */
 import '@ni/spright-components/dist/esm/all-components';
+import './fv-accordion-item';
 import './button';
 import './icon-dynamic';
 //# sourceMappingURL=all-components.js.map

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,gDAAgD,CAAC;AAExD,OAAO,UAAU,CAAC;AAClB,OAAO,gBAAgB,CAAC","sourcesContent":["/**\n * Import of all the web components available in Nimble, Spright, and Ok.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport '@ni/spright-components/dist/esm/all-components';\n\nimport './button';\nimport './icon-dynamic';\n"]}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,gDAAgD,CAAC;AAExD,OAAO,qBAAqB,CAAC;AAC7B,OAAO,UAAU,CAAC;AAClB,OAAO,gBAAgB,CAAC","sourcesContent":["/**\n * Import of all the web components available in Nimble, Spright, and Ok.\n * Production applications are encouraged to import only components\n * that are required instead of leveraging this file.\n */\n\nimport '@ni/spright-components/dist/esm/all-components';\n\nimport './fv-accordion-item';\nimport './button';\nimport './icon-dynamic';\n"]}

package/dist/esm/fv-accordion-item/index.d.ts

@@ -0,0 +1,19 @@
+import { FoundationElement } from '@ni/fast-foundation';
+import '@ni/nimble-components/dist/esm/icons/arrow-expander-right';
+import { FvAccordionItemAppearance } from './types';
+declare global {
+    interface HTMLElementTagNameMap {
+        'ok-fv-accordion-item': FvAccordionItem;
+    }
+}
+/**
+ * An accordion item component that can be expanded or collapsed to
+ * show or hide its content.
+ */
+export declare class FvAccordionItem extends FoundationElement {
+    header: string;
+    expanded: boolean;
+    appearance: FvAccordionItemAppearance;
+    handleToggle(event: Event): boolean;
+}
+export declare const fvAccordionItemTag = "ok-fv-accordion-item";

package/dist/esm/fv-accordion-item/index.js

@@ -0,0 +1,42 @@
+import { __decorate } from "tslib";
+import { attr } from '@ni/fast-element';
+import { DesignSystem, FoundationElement } from '@ni/fast-foundation';
+import '@ni/nimble-components/dist/esm/icons/arrow-expander-right';
+import { styles } from './styles';
+import { template } from './template';
+import { FvAccordionItemAppearance } from './types';
+/**
+ * An accordion item component that can be expanded or collapsed to
+ * show or hide its content.
+ */
+export class FvAccordionItem extends FoundationElement {
+    constructor() {
+        super(...arguments);
+        this.header = '';
+        this.expanded = false;
+        this.appearance = FvAccordionItemAppearance.ghost;
+    }
+    handleToggle(event) {
+        this.expanded = event.target.open;
+        return true;
+    }
+}
+__decorate([
+    attr
+], FvAccordionItem.prototype, "header", void 0);
+__decorate([
+    attr({ mode: 'boolean' })
+], FvAccordionItem.prototype, "expanded", void 0);
+__decorate([
+    attr()
+], FvAccordionItem.prototype, "appearance", void 0);
+const okFvAccordionItem = FvAccordionItem.compose({
+    baseName: 'fv-accordion-item',
+    template,
+    styles
+});
+DesignSystem.getOrCreate()
+    .withPrefix('ok')
+    .register(okFvAccordionItem());
+export const fvAccordionItemTag = 'ok-fv-accordion-item';
+//# sourceMappingURL=index.js.map

package/dist/esm/fv-accordion-item/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../src/fv-accordion-item/index.ts"],"names":[],"mappings":";AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,YAAY,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACtE,OAAO,2DAA2D,CAAC;AACnE,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,OAAO,EAAE,QAAQ,EAAE,MAAM,YAAY,CAAC;AACtC,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAQpD;;;GAGG;AACH,MAAM,OAAO,eAAgB,SAAQ,iBAAiB;IAAtD;;QAEW,WAAM,GAAG,EAAE,CAAC;QAGZ,aAAQ,GAAG,KAAK,CAAC;QAGjB,eAAU,GAA8B,yBAAyB,CAAC,KAAK,CAAC;IAMnF,CAAC;IAJU,YAAY,CAAC,KAAY;QAC5B,IAAI,CAAC,QAAQ,GAAI,KAAK,CAAC,MAA6B,CAAC,IAAI,CAAC;QAC1D,OAAO,IAAI,CAAC;IAChB,CAAC;CACJ;AAZU;IADN,IAAI;+CACc;AAGZ;IADN,IAAI,CAAC,EAAE,IAAI,EAAE,SAAS,EAAE,CAAC;iDACF;AAGjB;IADN,IAAI,EAAE;mDACwE;AAQnF,MAAM,iBAAiB,GAAG,eAAe,CAAC,OAAO,CAAC;IAC9C,QAAQ,EAAE,mBAAmB;IAC7B,QAAQ;IACR,MAAM;CACT,CAAC,CAAC;AAEH,YAAY,CAAC,WAAW,EAAE;KACrB,UAAU,CAAC,IAAI,CAAC;KAChB,QAAQ,CAAC,iBAAiB,EAAE,CAAC,CAAC;AACnC,MAAM,CAAC,MAAM,kBAAkB,GAAG,sBAAsB,CAAC","sourcesContent":["import { attr } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport '@ni/nimble-components/dist/esm/icons/arrow-expander-right';\nimport { styles } from './styles';\nimport { template } from './template';\nimport { FvAccordionItemAppearance } from './types';\n\ndeclare global {\n    interface HTMLElementTagNameMap {\n        'ok-fv-accordion-item': FvAccordionItem;\n    }\n}\n\n/**\n * An accordion item component that can be expanded or collapsed to\n * show or hide its content.\n */\nexport class FvAccordionItem extends FoundationElement {\n    @attr\n    public header = '';\n\n    @attr({ mode: 'boolean' })\n    public expanded = false;\n\n    @attr()\n    public appearance: FvAccordionItemAppearance = FvAccordionItemAppearance.ghost;\n\n    public handleToggle(event: Event): boolean {\n        this.expanded = (event.target as HTMLDetailsElement).open;\n        return true;\n    }\n}\n\nconst okFvAccordionItem = FvAccordionItem.compose({\n    baseName: 'fv-accordion-item',\n    template,\n    styles\n});\n\nDesignSystem.getOrCreate()\n    .withPrefix('ok')\n    .register(okFvAccordionItem());\nexport const fvAccordionItemTag = 'ok-fv-accordion-item';\n"]}

package/dist/esm/fv-accordion-item/styles.d.ts

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

package/dist/esm/fv-accordion-item/styles.js

@@ -0,0 +1,112 @@
+import { css } from '@ni/fast-element';
+import { bodyPlus1EmphasizedFont, bodyPlus1EmphasizedFontColor, borderHoverColor, borderRgbPartialColor, controlHeight, dividerWidth, iconSize, largePadding, mediumPadding, mediumDelay, smallDelay, standardPadding, smallPadding, borderWidth } 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 { userSelectNone } from '../utilities/style/user-select';
+import { FvAccordionItemAppearance } from './types';
+export const styles = css `
+    @layer base, hover, focusVisible, active, disabled, top;
+
+    @layer base {
+        ${display('block')}
+
+        :host {
+            border-bottom: ${dividerWidth} solid transparent;
+        }
+
+        .accordion-item-details > .accordion-item-summary {
+            display: flex;
+            box-sizing: border-box;
+            height: calc(${controlHeight} + (2 * ${dividerWidth}));
+            align-items: center;
+            margin-left: 0;
+            border: ${dividerWidth} solid transparent;
+            outline: ${dividerWidth} solid transparent;
+            outline-offset: -1px;
+            list-style: none;
+            cursor: pointer;
+            ${userSelectNone}
+            transition:
+                border-color ${smallDelay} ease-in,
+                outline-color ${smallDelay} ease-in;
+        }
+
+        .accordion-item-details > .accordion-item-summary::-webkit-details-marker {
+            display: none;
+        }
+
+        .accordion-item-details > .accordion-item-summary::marker {
+            content: "";
+        }
+
+        .accordion-item-icon {
+            transition: transform ${mediumDelay} ease-in;
+            margin: calc(${smallPadding} - ${borderWidth});
+            min-width: ${iconSize};
+        }
+
+        .accordion-item-details[open] > .accordion-item-summary > .accordion-item-icon {
+            transform: rotate(90deg);
+        }
+
+        .accordion-item-title {
+            flex: 1;
+            width: 100%;
+            position: relative;
+            font: ${bodyPlus1EmphasizedFont};
+            color: ${bodyPlus1EmphasizedFontColor};
+            text-align: left;
+            display: block;
+            /* Preserve descenders within the ellipsis clip region without shifting the text. */
+            padding-bottom: 2px;
+            margin-bottom: -2px;
+            text-overflow: ellipsis;
+            overflow: hidden;
+            white-space: nowrap;
+            overflow-wrap: normal;
+        }
+
+        .accordion-item-content {
+            display: flex;
+            flex-direction: column;
+            gap: ${standardPadding};
+            margin-left: ${largePadding};
+            margin-top: ${mediumPadding};
+            padding-bottom: ${standardPadding};
+        }
+    }
+
+    @layer hover {
+        .accordion-item-details > .accordion-item-summary:hover {
+            border-color: ${borderHoverColor};
+        }
+    }
+
+    @layer focusVisible {
+        .accordion-item-details > .accordion-item-summary:focus-visible {
+            outline: 2px solid ${borderHoverColor};
+            outline-offset: -2px;
+        }
+    }
+`.withBehaviors(appearanceBehavior(FvAccordionItemAppearance.outline, css `
+            @layer base {
+                :host {
+                    border-bottom: ${dividerWidth} solid rgba(${borderRgbPartialColor}, 0.2);
+                    border-bottom-color: rgba(${borderRgbPartialColor}, 0.2);
+                }
+            }
+        `), appearanceBehavior(FvAccordionItemAppearance.block, css `
+            @layer base {
+                .accordion-item-details > .accordion-item-summary {
+                    background-color: rgba(${borderRgbPartialColor}, 0.1);
+                }
+            }
+
+            @layer hover {
+                .accordion-item-details > .accordion-item-summary:hover {
+                    border-color: transparent;
+                    outline-color: ${borderHoverColor};
+                }
+            }
+        `));
+//# sourceMappingURL=styles.js.map

package/dist/esm/fv-accordion-item/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../src/fv-accordion-item/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,uBAAuB,EACvB,4BAA4B,EAC5B,gBAAgB,EAChB,qBAAqB,EACrB,aAAa,EACb,YAAY,EACZ,QAAQ,EACR,YAAY,EACZ,aAAa,EACb,WAAW,EACX,UAAU,EACV,eAAe,EACf,YAAY,EACZ,WAAW,EACd,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,kBAAkB,EAAE,MAAM,2DAA2D,CAAC;AAC/F,OAAO,EAAE,OAAO,EAAE,MAAM,4BAA4B,CAAC;AACrD,OAAO,EAAE,cAAc,EAAE,MAAM,gCAAgC,CAAC;AAChE,OAAO,EAAE,yBAAyB,EAAE,MAAM,SAAS,CAAC;AAEpD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,OAAO,CAAC;;;6BAGG,YAAY;;;;;;2BAMd,aAAa,WAAW,YAAY;;;sBAGzC,YAAY;uBACX,YAAY;;;;cAIrB,cAAc;;+BAEG,UAAU;gCACT,UAAU;;;;;;;;;;;;oCAYN,WAAW;2BACpB,YAAY,MAAM,WAAW;yBAC/B,QAAQ;;;;;;;;;;;oBAWb,uBAAuB;qBACtB,4BAA4B;;;;;;;;;;;;;;;mBAe9B,eAAe;2BACP,YAAY;0BACb,aAAa;8BACT,eAAe;;;;;;4BAMjB,gBAAgB;;;;;;iCAMX,gBAAgB;;;;CAIhD,CAAC,aAAa,CACX,kBAAkB,CACd,yBAAyB,CAAC,OAAO,EACjC,GAAG,CAAA;;;qCAG0B,YAAY,eAAe,qBAAqB;gDACrC,qBAAqB;;;SAG5D,CACJ,EACD,kBAAkB,CACd,yBAAyB,CAAC,KAAK,EAC/B,GAAG,CAAA;;;6CAGkC,qBAAqB;;;;;;;qCAO7B,gBAAgB;;;SAG5C,CACJ,CACJ,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n    bodyPlus1EmphasizedFont,\n    bodyPlus1EmphasizedFontColor,\n    borderHoverColor,\n    borderRgbPartialColor,\n    controlHeight,\n    dividerWidth,\n    iconSize,\n    largePadding,\n    mediumPadding,\n    mediumDelay,\n    smallDelay,\n    standardPadding,\n    smallPadding,\n    borderWidth\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 { userSelectNone } from '../utilities/style/user-select';\nimport { FvAccordionItemAppearance } from './types';\n\nexport const styles = css`\n    @layer base, hover, focusVisible, active, disabled, top;\n\n    @layer base {\n        ${display('block')}\n\n        :host {\n            border-bottom: ${dividerWidth} solid transparent;\n        }\n\n        .accordion-item-details > .accordion-item-summary {\n            display: flex;\n            box-sizing: border-box;\n            height: calc(${controlHeight} + (2 * ${dividerWidth}));\n            align-items: center;\n            margin-left: 0;\n            border: ${dividerWidth} solid transparent;\n            outline: ${dividerWidth} solid transparent;\n            outline-offset: -1px;\n            list-style: none;\n            cursor: pointer;\n            ${userSelectNone}\n            transition:\n                border-color ${smallDelay} ease-in,\n                outline-color ${smallDelay} ease-in;\n        }\n\n        .accordion-item-details > .accordion-item-summary::-webkit-details-marker {\n            display: none;\n        }\n\n        .accordion-item-details > .accordion-item-summary::marker {\n            content: \"\";\n        }\n\n        .accordion-item-icon {\n            transition: transform ${mediumDelay} ease-in;\n            margin: calc(${smallPadding} - ${borderWidth});\n            min-width: ${iconSize};\n        }\n\n        .accordion-item-details[open] > .accordion-item-summary > .accordion-item-icon {\n            transform: rotate(90deg);\n        }\n\n        .accordion-item-title {\n            flex: 1;\n            width: 100%;\n            position: relative;\n            font: ${bodyPlus1EmphasizedFont};\n            color: ${bodyPlus1EmphasizedFontColor};\n            text-align: left;\n            display: block;\n            /* Preserve descenders within the ellipsis clip region without shifting the text. */\n            padding-bottom: 2px;\n            margin-bottom: -2px;\n            text-overflow: ellipsis;\n            overflow: hidden;\n            white-space: nowrap;\n            overflow-wrap: normal;\n        }\n\n        .accordion-item-content {\n            display: flex;\n            flex-direction: column;\n            gap: ${standardPadding};\n            margin-left: ${largePadding};\n            margin-top: ${mediumPadding};\n            padding-bottom: ${standardPadding};\n        }\n    }\n\n    @layer hover {\n        .accordion-item-details > .accordion-item-summary:hover {\n            border-color: ${borderHoverColor};\n        }\n    }\n\n    @layer focusVisible {\n        .accordion-item-details > .accordion-item-summary:focus-visible {\n            outline: 2px solid ${borderHoverColor};\n            outline-offset: -2px;\n        }\n    }\n`.withBehaviors(\n    appearanceBehavior(\n        FvAccordionItemAppearance.outline,\n        css`\n            @layer base {\n                :host {\n                    border-bottom: ${dividerWidth} solid rgba(${borderRgbPartialColor}, 0.2);\n                    border-bottom-color: rgba(${borderRgbPartialColor}, 0.2);\n                }\n            }\n        `\n    ),\n    appearanceBehavior(\n        FvAccordionItemAppearance.block,\n        css`\n            @layer base {\n                .accordion-item-details > .accordion-item-summary {\n                    background-color: rgba(${borderRgbPartialColor}, 0.1);\n                }\n            }\n\n            @layer hover {\n                .accordion-item-details > .accordion-item-summary:hover {\n                    border-color: transparent;\n                    outline-color: ${borderHoverColor};\n                }\n            }\n        `\n    )\n);\n"]}

package/dist/esm/fv-accordion-item/template.d.ts

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

package/dist/esm/fv-accordion-item/template.js

@@ -0,0 +1,26 @@
+import { html } from '@ni/fast-element';
+import { iconArrowExpanderRightTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-right';
+const arrowExpanderRightTag = iconArrowExpanderRightTag;
+export const template = html `
+    <details
+        class="accordion-item-details"
+        ?open="${x => x.expanded}"
+        @toggle="${(x, c) => x.handleToggle(c.event)}"
+    >
+        <summary
+            class="accordion-item-summary"
+            aria-expanded="${x => x.expanded}"
+        >
+            <${arrowExpanderRightTag}
+                class="accordion-item-icon"
+            ></${arrowExpanderRightTag}>
+            <span class="accordion-item-title" title="${x => x.header}">
+                ${x => x.header}
+            </span>
+        </summary>
+        <div class="accordion-item-content">
+            <slot></slot>
+        </div>
+    </details>
+`;
+//# sourceMappingURL=template.js.map

package/dist/esm/fv-accordion-item/template.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"template.js","sourceRoot":"","sources":["../../../src/fv-accordion-item/template.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,kBAAkB,CAAC;AACxC,OAAO,EAAE,yBAAyB,EAAE,MAAM,2DAA2D,CAAC;AAGtG,MAAM,qBAAqB,GAAG,yBAAyB,CAAC;AAExD,MAAM,CAAC,MAAM,QAAQ,GAAG,IAAI,CAAiB;;;iBAG5B,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;mBACb,CAAC,CAAC,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC,CAAC,YAAY,CAAC,CAAC,CAAC,KAAK,CAAC;;;;6BAIvB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ;;eAE7B,qBAAqB;;iBAEnB,qBAAqB;wDACkB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;kBACnD,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,MAAM;;;;;;;CAO9B,CAAC","sourcesContent":["import { html } from '@ni/fast-element';\nimport { iconArrowExpanderRightTag } from '@ni/nimble-components/dist/esm/icons/arrow-expander-right';\nimport type { FvAccordionItem } from '.';\n\nconst arrowExpanderRightTag = iconArrowExpanderRightTag;\n\nexport const template = html<FvAccordionItem>`\n    <details\n        class=\"accordion-item-details\"\n        ?open=\"${x => x.expanded}\"\n        @toggle=\"${(x, c) => x.handleToggle(c.event)}\"\n    >\n        <summary\n            class=\"accordion-item-summary\"\n            aria-expanded=\"${x => x.expanded}\"\n        >\n            <${arrowExpanderRightTag}\n                class=\"accordion-item-icon\"\n            ></${arrowExpanderRightTag}>\n            <span class=\"accordion-item-title\" title=\"${x => x.header}\">\n                ${x => x.header}\n            </span>\n        </summary>\n        <div class=\"accordion-item-content\">\n            <slot></slot>\n        </div>\n    </details>\n`;\n"]}

package/dist/esm/fv-accordion-item/testing/fv-accordion-item.pageobject.d.ts

@@ -0,0 +1,17 @@
+import type { FvAccordionItem } from '..';
+/**
+ * Page object for the `ok-fv-accordion-item` component to provide consistent
+ * ways of querying and interacting with the component during tests.
+ */
+export declare class FvAccordionItemPageObject {
+    protected readonly accordionItemElement: FvAccordionItem;
+    constructor(accordionItemElement: FvAccordionItem);
+    clickSummary(): Promise<void>;
+    getHeaderText(): string;
+    isExpanded(): boolean;
+    hasContentSlot(): boolean;
+    hasExpanderIcon(): boolean;
+    private getDetails;
+    private getSummary;
+    private getTitle;
+}

package/dist/esm/fv-accordion-item/testing/fv-accordion-item.pageobject.js

@@ -0,0 +1,48 @@
+import { waitForUpdatesAsync } from '@ni/nimble-components/dist/esm/testing/async-helpers';
+/**
+ * Page object for the `ok-fv-accordion-item` component to provide consistent
+ * ways of querying and interacting with the component during tests.
+ */
+export class FvAccordionItemPageObject {
+    constructor(accordionItemElement) {
+        this.accordionItemElement = accordionItemElement;
+    }
+    async clickSummary() {
+        this.getSummary().click();
+        await waitForUpdatesAsync();
+    }
+    getHeaderText() {
+        return this.getTitle().textContent?.trim() ?? '';
+    }
+    isExpanded() {
+        return this.getDetails().open;
+    }
+    hasContentSlot() {
+        return !!this.accordionItemElement.shadowRoot?.querySelector('slot');
+    }
+    hasExpanderIcon() {
+        return !!this.accordionItemElement.shadowRoot?.querySelector('nimble-icon-arrow-expander-right');
+    }
+    getDetails() {
+        const details = this.accordionItemElement.shadowRoot?.querySelector('details');
+        if (!details) {
+            throw new Error('Accordion item details element not found');
+        }
+        return details;
+    }
+    getSummary() {
+        const summary = this.accordionItemElement.shadowRoot?.querySelector('.accordion-item-summary');
+        if (!summary) {
+            throw new Error('Accordion item summary element not found');
+        }
+        return summary;
+    }
+    getTitle() {
+        const title = this.accordionItemElement.shadowRoot?.querySelector('.accordion-item-title');
+        if (!title) {
+            throw new Error('Accordion item title element not found');
+        }
+        return title;
+    }
+}
+//# sourceMappingURL=fv-accordion-item.pageobject.js.map

package/dist/esm/fv-accordion-item/testing/fv-accordion-item.pageobject.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fv-accordion-item.pageobject.js","sourceRoot":"","sources":["../../../../src/fv-accordion-item/testing/fv-accordion-item.pageobject.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,mBAAmB,EAAE,MAAM,sDAAsD,CAAC;AAG3F;;;GAGG;AACH,MAAM,OAAO,yBAAyB;IAClC,YAAsC,oBAAqC;QAArC,yBAAoB,GAApB,oBAAoB,CAAiB;IAAG,CAAC;IAExE,KAAK,CAAC,YAAY;QACrB,IAAI,CAAC,UAAU,EAAE,CAAC,KAAK,EAAE,CAAC;QAC1B,MAAM,mBAAmB,EAAE,CAAC;IAChC,CAAC;IAEM,aAAa;QAChB,OAAO,IAAI,CAAC,QAAQ,EAAE,CAAC,WAAW,EAAE,IAAI,EAAE,IAAI,EAAE,CAAC;IACrD,CAAC;IAEM,UAAU;QACb,OAAO,IAAI,CAAC,UAAU,EAAE,CAAC,IAAI,CAAC;IAClC,CAAC;IAEM,cAAc;QACjB,OAAO,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,aAAa,CAAC,MAAM,CAAC,CAAC;IACzE,CAAC;IAEM,eAAe;QAClB,OAAO,CAAC,CAAC,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,aAAa,CACxD,kCAAkC,CACrC,CAAC;IACN,CAAC;IAEO,UAAU;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,aAAa,CAAC,SAAS,CAAC,CAAC;QAC/E,IAAI,CAAC,OAAO,EAAE,CAAC;YACX,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;QAChE,CAAC;QACD,OAAO,OAAO,CAAC;IACnB,CAAC;IAEO,UAAU;QACd,MAAM,OAAO,GAAG,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,aAAa,CAC/D,yBAAyB,CAC5B,CAAC;QACF,IAAI,CAAC,OAAO,EAAE,CAAC;YACX,MAAM,IAAI,KAAK,CAAC,0CAA0C,CAAC,CAAC;QAChE,CAAC;QACD,OAAO,OAAO,CAAC;IACnB,CAAC;IAEO,QAAQ;QACZ,MAAM,KAAK,GAAG,IAAI,CAAC,oBAAoB,CAAC,UAAU,EAAE,aAAa,CAC7D,uBAAuB,CAC1B,CAAC;QACF,IAAI,CAAC,KAAK,EAAE,CAAC;YACT,MAAM,IAAI,KAAK,CAAC,wCAAwC,CAAC,CAAC;QAC9D,CAAC;QACD,OAAO,KAAK,CAAC;IACjB,CAAC;CACJ","sourcesContent":["import { waitForUpdatesAsync } from '@ni/nimble-components/dist/esm/testing/async-helpers';\nimport type { FvAccordionItem } from '..';\n\n/**\n * Page object for the `ok-fv-accordion-item` component to provide consistent\n * ways of querying and interacting with the component during tests.\n */\nexport class FvAccordionItemPageObject {\n    public constructor(protected readonly accordionItemElement: FvAccordionItem) {}\n\n    public async clickSummary(): Promise<void> {\n        this.getSummary().click();\n        await waitForUpdatesAsync();\n    }\n\n    public getHeaderText(): string {\n        return this.getTitle().textContent?.trim() ?? '';\n    }\n\n    public isExpanded(): boolean {\n        return this.getDetails().open;\n    }\n\n    public hasContentSlot(): boolean {\n        return !!this.accordionItemElement.shadowRoot?.querySelector('slot');\n    }\n\n    public hasExpanderIcon(): boolean {\n        return !!this.accordionItemElement.shadowRoot?.querySelector(\n            'nimble-icon-arrow-expander-right'\n        );\n    }\n\n    private getDetails(): HTMLDetailsElement {\n        const details = this.accordionItemElement.shadowRoot?.querySelector('details');\n        if (!details) {\n            throw new Error('Accordion item details element not found');\n        }\n        return details;\n    }\n\n    private getSummary(): HTMLElement {\n        const summary = this.accordionItemElement.shadowRoot?.querySelector<HTMLElement>(\n            '.accordion-item-summary'\n        );\n        if (!summary) {\n            throw new Error('Accordion item summary element not found');\n        }\n        return summary;\n    }\n\n    private getTitle(): HTMLElement {\n        const title = this.accordionItemElement.shadowRoot?.querySelector<HTMLElement>(\n            '.accordion-item-title'\n        );\n        if (!title) {\n            throw new Error('Accordion item title element not found');\n        }\n        return title;\n    }\n}\n"]}

package/dist/esm/fv-accordion-item/types.d.ts

@@ -0,0 +1,6 @@
+export declare const FvAccordionItemAppearance: {
+    readonly outline: "outline";
+    readonly ghost: "ghost";
+    readonly block: "block";
+};
+export type FvAccordionItemAppearance = (typeof FvAccordionItemAppearance)[keyof typeof FvAccordionItemAppearance];

package/dist/esm/fv-accordion-item/types.js

@@ -0,0 +1,6 @@
+export const FvAccordionItemAppearance = {
+    outline: 'outline',
+    ghost: 'ghost',
+    block: 'block'
+};
+//# sourceMappingURL=types.js.map

package/dist/esm/fv-accordion-item/types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"types.js","sourceRoot":"","sources":["../../../src/fv-accordion-item/types.ts"],"names":[],"mappings":"AAAA,MAAM,CAAC,MAAM,yBAAyB,GAAG;IACrC,OAAO,EAAE,SAAS;IAClB,KAAK,EAAE,OAAO;IACd,KAAK,EAAE,OAAO;CACR,CAAC","sourcesContent":["export const FvAccordionItemAppearance = {\n    outline: 'outline',\n    ghost: 'ghost',\n    block: 'block'\n} as const;\nexport type FvAccordionItemAppearance = (typeof FvAccordionItemAppearance)[keyof typeof FvAccordionItemAppearance];\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/ok-components",
-  "version": "0.3.13",
+  "version": "0.4.1",
   "description": "NI Ok Components",
   "scripts": {
     "build": "npm run build:components && npm run build:cem",
@@ -42,8 +42,8 @@
     "@ni/fast-element": "^10.1.1",
     "@ni/fast-foundation": "^10.2.3",
     "@ni/fast-web-utilities": "^10.0.0",
-    "@ni/nimble-components": "^35.6.0",
-    "@ni/spright-components": "^6.15.8",
+    "@ni/nimble-components": "^35.6.1",
+    "@ni/spright-components": "^6.15.9",
     "tslib": "^2.2.0"
   },
   "devDependencies": {