@ni/ok-components 0.4.2 → 0.4.3

package/dist/custom-elements.json

@@ -51,7 +51,81 @@
     },
     {
       "kind": "javascript-module",
-      "path": "src/fv-accordion-item/index.ts",
+      "path": "src/fv/all-fv.ts",
+      "declarations": [],
+      "exports": []
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/icon-dynamic/index.ts",
+      "declarations": [
+        {
+          "kind": "class",
+          "description": "Base class for dynamic icons. Not intended to be used directly, instead use to register dynamic icons:\n```\ncustomElements.get('ok-icon-dynamic').registerIconDynamic('ok-icon-dynamic-awesome', '<img data uri or arbitrary url>');\n```\nAfter calling successfully, the icon can be used like any other icon:\n```\n<ok-icon-dynamic-awesome></ok-icon-dynamic-awesome>\n<nimble-mapping-icon icon=\"ok-icon-dynamic-awesome\"></nimble-mapping-icon>\n```",
+          "name": "IconDynamic",
+          "members": [
+            {
+              "kind": "method",
+              "name": "registerIconDynamic",
+              "privacy": "public",
+              "static": true,
+              "return": {
+                "type": {
+                  "text": "void"
+                }
+              },
+              "parameters": [
+                {
+                  "name": "tagName",
+                  "type": {
+                    "text": "string"
+                  }
+                },
+                {
+                  "name": "url",
+                  "type": {
+                    "text": "string"
+                  }
+                }
+              ]
+            }
+          ],
+          "superclass": {
+            "name": "Icon",
+            "package": "@ni/nimble-components/dist/esm/icon-base"
+          }
+        },
+        {
+          "kind": "variable",
+          "name": "iconDynamicTag",
+          "type": {
+            "text": "string"
+          },
+          "default": "'ok-icon-dynamic'"
+        }
+      ],
+      "exports": [
+        {
+          "kind": "js",
+          "name": "IconDynamic",
+          "declaration": {
+            "name": "IconDynamic",
+            "module": "src/icon-dynamic/index.ts"
+          }
+        },
+        {
+          "kind": "js",
+          "name": "iconDynamicTag",
+          "declaration": {
+            "name": "iconDynamicTag",
+            "module": "src/icon-dynamic/index.ts"
+          }
+        }
+      ]
+    },
+    {
+      "kind": "javascript-module",
+      "path": "src/fv/accordion-item/index.ts",
       "declarations": [
         {
           "kind": "class",
@@ -148,7 +222,7 @@
           "name": "FvAccordionItem",
           "declaration": {
             "name": "FvAccordionItem",
-            "module": "src/fv-accordion-item/index.ts"
+            "module": "src/fv/accordion-item/index.ts"
           }
         },
         {
@@ -156,14 +230,14 @@
           "name": "fvAccordionItemTag",
           "declaration": {
             "name": "fvAccordionItemTag",
-            "module": "src/fv-accordion-item/index.ts"
+            "module": "src/fv/accordion-item/index.ts"
           }
         }
       ]
     },
     {
       "kind": "javascript-module",
-      "path": "src/fv-accordion-item/types.ts",
+      "path": "src/fv/accordion-item/types.ts",
       "declarations": [
         {
           "kind": "variable",
@@ -180,75 +254,7 @@
           "name": "FvAccordionItemAppearance",
           "declaration": {
             "name": "FvAccordionItemAppearance",
-            "module": "src/fv-accordion-item/types.ts"
-          }
-        }
-      ]
-    },
-    {
-      "kind": "javascript-module",
-      "path": "src/icon-dynamic/index.ts",
-      "declarations": [
-        {
-          "kind": "class",
-          "description": "Base class for dynamic icons. Not intended to be used directly, instead use to register dynamic icons:\n```\ncustomElements.get('ok-icon-dynamic').registerIconDynamic('ok-icon-dynamic-awesome', '<img data uri or arbitrary url>');\n```\nAfter calling successfully, the icon can be used like any other icon:\n```\n<ok-icon-dynamic-awesome></ok-icon-dynamic-awesome>\n<nimble-mapping-icon icon=\"ok-icon-dynamic-awesome\"></nimble-mapping-icon>\n```",
-          "name": "IconDynamic",
-          "members": [
-            {
-              "kind": "method",
-              "name": "registerIconDynamic",
-              "privacy": "public",
-              "static": true,
-              "return": {
-                "type": {
-                  "text": "void"
-                }
-              },
-              "parameters": [
-                {
-                  "name": "tagName",
-                  "type": {
-                    "text": "string"
-                  }
-                },
-                {
-                  "name": "url",
-                  "type": {
-                    "text": "string"
-                  }
-                }
-              ]
-            }
-          ],
-          "superclass": {
-            "name": "Icon",
-            "package": "@ni/nimble-components/dist/esm/icon-base"
-          }
-        },
-        {
-          "kind": "variable",
-          "name": "iconDynamicTag",
-          "type": {
-            "text": "string"
-          },
-          "default": "'ok-icon-dynamic'"
-        }
-      ],
-      "exports": [
-        {
-          "kind": "js",
-          "name": "IconDynamic",
-          "declaration": {
-            "name": "IconDynamic",
-            "module": "src/icon-dynamic/index.ts"
-          }
-        },
-        {
-          "kind": "js",
-          "name": "iconDynamicTag",
-          "declaration": {
-            "name": "iconDynamicTag",
-            "module": "src/icon-dynamic/index.ts"
+            "module": "src/fv/accordion-item/types.ts"
           }
         }
       ]

package/dist/custom-elements.md

@@ -8,6 +8,22 @@
 
 <hr/>
 
+## class: `IconDynamic`
+
+### Superclass
+
+| Name   | Module | Package                                  |
+| ------ | ------ | ---------------------------------------- |
+| `Icon` |        | @ni/nimble-components/dist/esm/icon-base |
+
+### Static Methods
+
+| Name                  | Privacy | Description | Parameters                     | Return | Inherited From |
+| --------------------- | ------- | ----------- | ------------------------------ | ------ | -------------- |
+| `registerIconDynamic` | public  |             | `tagName: string, url: string` | `void` |                |
+
+<hr/>
+
 ## class: `FvAccordionItem`
 
 ### Superclass
@@ -39,19 +55,3 @@
 | `appearance` | appearance |                |
 
 <hr/>
-
-## class: `IconDynamic`
-
-### Superclass
-
-| Name   | Module | Package                                  |
-| ------ | ------ | ---------------------------------------- |
-| `Icon` |        | @ni/nimble-components/dist/esm/icon-base |
-
-### Static Methods
-
-| Name                  | Privacy | Description | Parameters                     | Return | Inherited From |
-| --------------------- | ------- | ----------- | ------------------------------ | ------ | -------------- |
-| `registerIconDynamic` | public  |             | `tagName: string, url: string` | `void` |                |
-
-<hr/>

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

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

package/dist/esm/all-components.js

@@ -4,7 +4,7 @@
  * that are required instead of leveraging this file.
  */
 import '@ni/spright-components/dist/esm/all-components';
-import './fv-accordion-item';
+import './fv/all-fv';
 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,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"]}
+{"version":3,"file":"all-components.js","sourceRoot":"","sources":["../../src/all-components.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,gDAAgD,CAAC;AAExD,OAAO,aAAa,CAAC;AACrB,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/all-fv';\nimport './button';\nimport './icon-dynamic';\n"]}

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

@@ -1,5 +1,4 @@
 import { FoundationElement } from '@ni/fast-foundation';
-import '@ni/nimble-components/dist/esm/icons/arrow-expander-right';
 import { FvAccordionItemAppearance } from './types';
 declare global {
     interface HTMLElementTagNameMap {

package/dist/esm/{fv-accordion-item → fv/accordion-item}/index.js

@@ -1,7 +1,6 @@
 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';

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,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 { 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 → fv/accordion-item}/styles.js

@@ -1,8 +1,8 @@
 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 { 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;

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,+BAA+B,CAAC;AACxD,OAAO,EAAE,cAAc,EAAE,MAAM,mCAAmC,CAAC;AACnE,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 → fv/accordion-item}/template.js

@@ -1,6 +1,5 @@
 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"
@@ -11,9 +10,9 @@ export const template = html `
             class="accordion-item-summary"
             aria-expanded="${x => x.expanded}"
         >
-            <${arrowExpanderRightTag}
+            <${iconArrowExpanderRightTag}
                 class="accordion-item-icon"
-            ></${arrowExpanderRightTag}>
+            ></${iconArrowExpanderRightTag}>
             <span class="accordion-item-title" title="${x => x.header}">
                 ${x => x.header}
             </span>

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,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,yBAAyB;;iBAEvB,yBAAyB;wDACc,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\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            <${iconArrowExpanderRightTag}\n                class=\"accordion-item-icon\"\n            ></${iconArrowExpanderRightTag}>\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.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.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/dist/esm/fv/all-fv.d.ts

@@ -0,0 +1 @@
+import './accordion-item';

package/dist/esm/fv/all-fv.js

@@ -0,0 +1,2 @@
+import './accordion-item';
+//# sourceMappingURL=all-fv.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"all-fv.js","sourceRoot":"","sources":["../../../src/fv/all-fv.ts"],"names":[],"mappings":"AAAA,OAAO,kBAAkB,CAAC","sourcesContent":["import './accordion-item';\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ni/ok-components",
-  "version": "0.4.2",
+  "version": "0.4.3",
   "description": "NI Ok Components",
   "scripts": {
     "build": "npm run build:components && npm run build:cem",

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

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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.js.map

@@ -1 +0,0 @@
-{"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"]}