npm - @nova-design-system/nova-webcomponents - Versions diffs - 3.23.0 → 3.24.0 - Mend

@nova-design-system/nova-webcomponents 3.23.0 → 3.24.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (792) hide show

package/dist/collection/components/nv-tableheader/nv-tableheader.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-tableheader.js","sourceRoot":"","sources":["../../../../src/components/nv-tableheader/nv-tableheader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;GAEG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAME,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;WAIG;QAEM,aAAQ,GAAY,KAAK,CAAC;QAEnC;;;WAGG;QAEH,kBAAa,GAA4B,MAAM,CAAC;KA2FjD;IAzFC,uBAAuB;IACvB,8EAA8E;IAC9E,iBAAiB;IAET,kBAAkB,CAAC,CAAS;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,CAAC,~~aAAD~~,~~CAAC,uBAAD,CAAC,CAAE,~~cAAc,EAAE,CAAC;QAEpB,MAAM,IAAI,GAAG;YACX,IAAI,EAAE,KAAK;YACX,GAAG,EAAE,MAAM;YACX,IAAI,EAAE,MAAM;SACJ,CAAC;QAEX,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC9C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACrD,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,IAAI,QAAQ;QACV,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,MAAM;YACZ,GAAG,EAAE,WAAW;YAChB,IAAI,EAAE,YAAY;SACV,CAAC;QAEX,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,OAAO,CAAC,IAAI,CAAC;QACxC,OAAO,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACrC,CAAC;IAmBD,mBAAmB;IACnB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,QAAQ,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACvC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;YAE3C,8DAAa;YAEZ,IAAI,CAAC,QAAQ,IAAI,CAChB,6DAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;gBAC7C,sEACE,eAAe,QACf,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;oBACzD,wCAAwC;oBACxC,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAClD,KAAK,EAAE;wBACL,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;wBACxC,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;qBACzC,GACD,CACG,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/*\n @slot default - Child content of the component.\n /\n@Component({\n tag: 'nv-tableheader',\n styleUrl: 'nv-tableheader.scss',\n shadow: false,\n})\nexport class NvTableheader {\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Will render the header as sortable with the corresponding icon button.\n * Allows the header to be tabbed, and trigger sorting via click or keyboard\n * navigation\n /\n @Prop({ reflect: true })\n readonly sortable: boolean = false;\n\n /\n The current sort direction of the header. Will be 'none' if the header is\n * not sortable or if the sort direction is not set.\n /\n @Prop({ reflect: true, mutable: true })\n sortDirection: 'none' \| 'asc' \| 'desc' = 'none';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n private cycleSortDirection(e?: Event) {\n if (!this.sortable) return;\n e?.preventDefault();\n\n const next = {\n none: 'asc',\n asc: 'desc',\n desc: 'none',\n } as const;\n\n this.sortDirection = next[this.sortDirection];\n this.sortDirectionChanged.emit(this.sortDirection);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (!this.sortable) return;\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.cycleSortDirection();\n }\n }\n\n get ariaSort() {\n const sortMap = {\n none: 'none',\n asc: 'ascending',\n desc: 'descending',\n } as const;\n\n if (!this.sortable) return sortMap.none;\n return sortMap[this.sortDirection];\n }\n\n //#endregion METHODS\n /************************************************************************/\n //#region WATCHERS\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region EVENTS\n\n /\n * Event emitted when the sort direction changes. Payload is the new sort\n * direction.\n /\n @Event({ bubbles: false })\n sortDirectionChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role=\"columnheader\"\n aria-sort={this.ariaSort}\n tabindex={this.sortable ? 0 : undefined}\n onKeyDown={this.handleKeyDown.bind(this)}\n onClick={this.cycleSortDirection.bind(this)}\n >\n <slot></slot>\n\n {this.sortable && (\n <span class=\"sort-icon-wrap\" aria-hidden=\"true\">\n <nv-iconbutton\n disableTabindex\n name=\"arrow-up\"\n size=\"xs\"\n emphasis={this.sortDirection === 'none' ? 'lower' : 'low'}\n // prevent mousedown from selecting text\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n class={{\n 'is-none': this.sortDirection === 'none',\n 'is-desc': this.sortDirection === 'desc',\n }}\n />\n </span>\n )}\n </Host>\n );\n }\n // #endregion RENDER\n}\n"]}
1	+ {"version":3,"file":"nv-tableheader.js","sourceRoot":"","sources":["../../../../src/components/nv-tableheader/nv-tableheader.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE,CAAC,EAAE,IAAI,EAAE,KAAK,EAAgB,MAAM,eAAe,CAAC;AAE9E;;GAEG;AAMH,MAAM,OAAO,aAAa;IAL1B;QAME,8EAA8E;QAC9E,oBAAoB;QAEpB;;;;WAIG;QAEM,aAAQ,GAAY,KAAK,CAAC;QAEnC;;;WAGG;QAEH,kBAAa,GAA4B,MAAM,CAAC;KA2FjD;IAzFC,uBAAuB;IACvB,8EAA8E;IAC9E,iBAAiB;IAET,kBAAkB,CAAC,CAAS;QAClC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,CAAC,EAAE,cAAc,EAAE,CAAC;QAEpB,MAAM,IAAI,GAAG;YACX,IAAI,EAAE,KAAK;YACX,GAAG,EAAE,MAAM;YACX,IAAI,EAAE,MAAM;SACJ,CAAC;QAEX,IAAI,CAAC,aAAa,GAAG,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;QAC9C,IAAI,CAAC,oBAAoB,CAAC,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACrD,CAAC;IAEO,aAAa,CAAC,KAAoB;QACxC,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO;QAC3B,IAAI,KAAK,CAAC,GAAG,KAAK,OAAO,IAAI,KAAK,CAAC,GAAG,KAAK,GAAG,EAAE,CAAC;YAC/C,KAAK,CAAC,cAAc,EAAE,CAAC;YACvB,IAAI,CAAC,kBAAkB,EAAE,CAAC;QAC5B,CAAC;IACH,CAAC;IAED,IAAI,QAAQ;QACV,MAAM,OAAO,GAAG;YACd,IAAI,EAAE,MAAM;YACZ,GAAG,EAAE,WAAW;YAChB,IAAI,EAAE,YAAY;SACV,CAAC;QAEX,IAAI,CAAC,IAAI,CAAC,QAAQ;YAAE,OAAO,OAAO,CAAC,IAAI,CAAC;QACxC,OAAO,OAAO,CAAC,IAAI,CAAC,aAAa,CAAC,CAAC;IACrC,CAAC;IAmBD,mBAAmB;IACnB,8EAA8E;IAC9E,gBAAgB;IAEhB,MAAM;QACJ,OAAO,CACL,EAAC,IAAI,qDACH,IAAI,EAAC,cAAc,eACR,IAAI,CAAC,QAAQ,EACxB,QAAQ,EAAE,IAAI,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,SAAS,EACvC,SAAS,EAAE,IAAI,CAAC,aAAa,CAAC,IAAI,CAAC,IAAI,CAAC,EACxC,OAAO,EAAE,IAAI,CAAC,kBAAkB,CAAC,IAAI,CAAC,IAAI,CAAC;YAE3C,8DAAa;YAEZ,IAAI,CAAC,QAAQ,IAAI,CAChB,6DAAM,KAAK,EAAC,gBAAgB,iBAAa,MAAM;gBAC7C,sEACE,eAAe,QACf,IAAI,EAAC,UAAU,EACf,IAAI,EAAC,IAAI,EACT,QAAQ,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,KAAK;oBACzD,wCAAwC;oBACxC,WAAW,EAAE,CAAC,CAAa,EAAE,EAAE,CAAC,CAAC,CAAC,cAAc,EAAE,EAClD,KAAK,EAAE;wBACL,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;wBACxC,SAAS,EAAE,IAAI,CAAC,aAAa,KAAK,MAAM;qBACzC,GACD,CACG,CACR,CACI,CACR,CAAC;IACJ,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAEF","sourcesContent":["import { Component, Host, h, Prop, Event, EventEmitter } from '@stencil/core';\n\n/*\n @slot default - Child content of the component.\n /\n@Component({\n tag: 'nv-tableheader',\n styleUrl: 'nv-tableheader.scss',\n shadow: false,\n})\nexport class NvTableheader {\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * Will render the header as sortable with the corresponding icon button.\n * Allows the header to be tabbed, and trigger sorting via click or keyboard\n * navigation\n /\n @Prop({ reflect: true })\n readonly sortable: boolean = false;\n\n /\n The current sort direction of the header. Will be 'none' if the header is\n * not sortable or if the sort direction is not set.\n /\n @Prop({ reflect: true, mutable: true })\n sortDirection: 'none' \| 'asc' \| 'desc' = 'none';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n private cycleSortDirection(e?: Event) {\n if (!this.sortable) return;\n e?.preventDefault();\n\n const next = {\n none: 'asc',\n asc: 'desc',\n desc: 'none',\n } as const;\n\n this.sortDirection = next[this.sortDirection];\n this.sortDirectionChanged.emit(this.sortDirection);\n }\n\n private handleKeyDown(event: KeyboardEvent) {\n if (!this.sortable) return;\n if (event.key === 'Enter' \|\| event.key === ' ') {\n event.preventDefault();\n this.cycleSortDirection();\n }\n }\n\n get ariaSort() {\n const sortMap = {\n none: 'none',\n asc: 'ascending',\n desc: 'descending',\n } as const;\n\n if (!this.sortable) return sortMap.none;\n return sortMap[this.sortDirection];\n }\n\n //#endregion METHODS\n /************************************************************************/\n //#region WATCHERS\n //#endregion WATCHERS\n /************************************************************************/\n //#region LIFECYCLE\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region EVENTS\n\n /\n * Event emitted when the sort direction changes. Payload is the new sort\n * direction.\n /\n @Event({ bubbles: false })\n sortDirectionChanged: EventEmitter<string>;\n\n //#endregion EVENTS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host\n role=\"columnheader\"\n aria-sort={this.ariaSort}\n tabindex={this.sortable ? 0 : undefined}\n onKeyDown={this.handleKeyDown.bind(this)}\n onClick={this.cycleSortDirection.bind(this)}\n >\n <slot></slot>\n\n {this.sortable && (\n <span class=\"sort-icon-wrap\" aria-hidden=\"true\">\n <nv-iconbutton\n disableTabindex\n name=\"arrow-up\"\n size=\"xs\"\n emphasis={this.sortDirection === 'none' ? 'lower' : 'low'}\n // prevent mousedown from selecting text\n onMouseDown={(e: MouseEvent) => e.preventDefault()}\n class={{\n 'is-none': this.sortDirection === 'none',\n 'is-desc': this.sortDirection === 'desc',\n }}\n />\n </span>\n )}\n </Host>\n );\n }\n // #endregion RENDER\n}\n"]}

package/dist/collection/components/nv-toggle/nv-toggle.docs.js CHANGED Viewed

@@ -3,57 +3,88 @@ import { nameof } from "../../utils/class.utils";
 const NvToggleDocs = {
     component: 'nv-toggle',
     stories: [
+        // Default
         {
             name: 'Default',
             template: h("nv-toggle", { "data-storybook-args": true }),
         },
+        // label
         {
             name: nameof(x => x.label),
             description: 'The label displayed next to the toggle.',
             args: { label: 'Label' },
             template: h("nv-toggle", { "data-storybook-args": true }),
         },
+        // description
         {
             name: nameof(x => x.description),
             description: 'A description providing additional context or information about the toggle.',
             args: { description: 'Description' },
             template: h("nv-toggle", { "data-storybook-args": true }),
         },
+        // checked
         {
             name: nameof(x => x.checked),
             description: 'Indicates whether the toggle is checked or not.',
             args: { checked: true },
             template: h("nv-toggle", { "data-storybook-args": true }),
         },
+        // disabled
         {
             name: nameof(x => x.disabled),
             description: 'Disables the toggle, preventing user interaction.',
             args: { disabled: true },
             template: (h("div", { "data-class": "flex gap-4 " }, h("nv-toggle", { "data-storybook-args": true }), h("nv-toggle", { "data-storybook-args": true, checked: true }))),
         },
+        // readonly
         {
             name: nameof(x => x.readonly),
             description: 'Sets the toggle to read-only, preventing user changes but still allowing focus and selection of text.',
             args: { readonly: true },
             template: (h("div", { "data-class": "flex gap-4 " }, h("nv-toggle", { "data-storybook-args": true }), h("nv-toggle", { "data-storybook-args": true, checked: true }))),
         },
+        // hideLabel
         {
             name: nameof(x => x.hideLabel),
             description: 'Hides the label visually while still keeping it available for screen readers.',
             args: { label: 'Label', hideLabel: true },
             template: h("nv-toggle", { "data-storybook-args": true }),
         },
+        // inputId
+        {
+            name: nameof(x => x.inputId),
+            description: 'Sets the ID for the input element. If not provided, a random ID is generated.',
+            args: { label: 'Toggle with custom ID', inputId: 'custom-toggle-id' },
+            template: h("nv-toggle", { "data-storybook-args": true }),
+        },
+        // name
+        {
+            name: nameof(x => x.name),
+            description: 'The name attribute for the toggle input, used to reference the form data after submission.',
+            args: { label: 'Accept Terms', name: 'accept-terms' },
+            template: h("nv-toggle", { "data-storybook-args": true }),
+        },
+        // value
+        {
+            name: nameof(x => x.value),
+            description: 'The value attribute sent on form submission when the toggle is checked.',
+            args: { label: 'Enable Feature', name: 'feature', value: 'enabled' },
+            template: h("nv-toggle", { "data-storybook-args": true }),
+        },
+        // labelPlacement
         {
             name: nameof(x => x.labelPlacement),
             description: 'Determines the position of the label relative to the toggle, either `start` (before) or `end` (after).',
             args: { label: 'Label', labelPlacement: 'before' },
             template: h("nv-toggle", { "data-storybook-args": true }),
         },
+        // SlotLabel
         {
             name: 'SlotLabel',
             description: 'You can use the `label` slot to customize the content of the label.',
             template: (h("nv-toggle", { "data-storybook-args": true }, h("span", { slot: "label" }, "Label"))),
         },
+        // SlotDescription
         {
             name: 'SlotDescription',
             description: 'You can use the `description` slot to customize the content of the description.',

package/dist/collection/components/nv-toggle/nv-toggle.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-toggle.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-toggle/nv-toggle.docs.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,CAAC,EAAE,MAAM,eAAe,CAAC;AAGlC,OAAO,EAAE,MAAM,EAAE,MAAM,yBAAyB,CAAC;AAEjD,MAAM,YAAY,GAAkC;IAClD,SAAS,EAAE,WAAW;IACtB,OAAO,EAAE;QACP;YACE,IAAI,EAAE,SAAS;YACf,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,KAAK,CAAC;YAC/C,WAAW,EAAE,yCAAyC;YACtD,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE;YACxB,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,WAAW,CAAC;YACrD,WAAW,EACT,6EAA6E;YAC/E,IAAI,EAAE,EAAE,WAAW,EAAE,aAAa,EAAE;YACpC,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,OAAO,CAAC;YACjD,WAAW,EAAE,iDAAiD;YAC9D,IAAI,EAAE,EAAE,OAAO,EAAE,IAAI,EAAE;YACvB,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YAClD,WAAW,EAAE,mDAAmD;YAChE,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YACxB,QAAQ,EAAE,CACR,yBAAgB,aAAa;gBAC3B,+CAA2C;gBAC3C,8CAA+B,OAAO,SAAa,CAC/C,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,QAAQ,CAAC;YAClD,WAAW,EACT,uGAAuG;YACzG,IAAI,EAAE,EAAE,QAAQ,EAAE,IAAI,EAAE;YACxB,QAAQ,EAAE,CACR,yBAAgB,aAAa;gBAC3B,+CAA2C;gBAC3C,8CAA+B,OAAO,SAAa,CAC/C,CACP;SACF;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,SAAS,CAAC;YACnD,WAAW,EACT,+EAA+E;YACjF,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,SAAS,EAAE,IAAI,EAAE;YACzC,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,MAAM,CAAsB,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,cAAc,CAAC;YACxD,WAAW,EACT,wGAAwG;YAC1G,IAAI,EAAE,EAAE,KAAK,EAAE,OAAO,EAAE,cAAc,EAAE,QAAQ,EAAE;YAClD,QAAQ,EAAE,+CAA2C;SACtD;QACD;YACE,IAAI,EAAE,WAAW;YACjB,WAAW,EACT,qEAAqE;YACvE,QAAQ,EAAE,CACR;gBACE,YAAM,IAAI,EAAC,OAAO,YAAa,CACrB,CACb;SACF;QACD;YACE,IAAI,EAAE,iBAAiB;YACvB,WAAW,EACT,iFAAiF;YACnF,QAAQ,EAAE,CACR;gBACE,YAAM,IAAI,EAAC,aAAa,kBAAmB,CACjC,CACb;SACF;KACF;CACF,CAAC;AAEF,eAAe,YAAY,CAAC","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvToggleDocs: NovaDocs<Components.NvToggle> = {\n component: 'nv-toggle',\n stories: [\n {\n name: 'Default',\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n {\n name: nameof<Components.NvToggle>(x => x.label),\n description: 'The label displayed next to the toggle.',\n args: { label: 'Label' },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n {\n name: nameof<Components.NvToggle>(x => x.description),\n description:\n 'A description providing additional context or information about the toggle.',\n args: { description: 'Description' },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n {\n name: nameof<Components.NvToggle>(x => x.checked),\n description: 'Indicates whether the toggle is checked or not.',\n args: { checked: true },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n {\n name: nameof<Components.NvToggle>(x => x.disabled),\n description: 'Disables the toggle, preventing user interaction.',\n args: { disabled: true },\n template: (\n <div data-class=\"flex gap-4 \">\n <nv-toggle data-storybook-args></nv-toggle>\n <nv-toggle data-storybook-args checked></nv-toggle>\n </div>\n ),\n },\n {\n name: nameof<Components.NvToggle>(x => x.readonly),\n description:\n 'Sets the toggle to read-only, preventing user changes but still allowing focus and selection of text.',\n args: { readonly: true },\n template: (\n <div data-class=\"flex gap-4 \">\n <nv-toggle data-storybook-args></nv-toggle>\n <nv-toggle data-storybook-args checked></nv-toggle>\n </div>\n ),\n },\n {\n name: nameof<Components.NvToggle>(x => x.hideLabel),\n description:\n 'Hides the label visually while still keeping it available for screen readers.',\n args: { label: 'Label', hideLabel: true },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n {\n name: nameof<Components.NvToggle>(x => x.labelPlacement),\n description:\n 'Determines the position of the label relative to the toggle, either `start` (before) or `end` (after).',\n args: { label: 'Label', labelPlacement: 'before' },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n {\n name: 'SlotLabel',\n description:\n 'You can use the `label` slot to customize the content of the label.',\n template: (\n <nv-toggle data-storybook-args>\n <span slot=\"label\">Label</span>\n </nv-toggle>\n ),\n },\n {\n name: 'SlotDescription',\n description:\n 'You can use the `description` slot to customize the content of the description.',\n template: (\n <nv-toggle data-storybook-args>\n <span slot=\"description\">Description</span>\n </nv-toggle>\n ),\n },\n ],\n};\n\nexport default NvToggleDocs;\n"]}
1	+ {"version":3,"file":"nv-toggle.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-toggle/nv-toggle.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvToggleDocs: NovaDocs<Components.NvToggle> = {\n component: 'nv-toggle',\n stories: [\n // Default\n {\n name: 'Default',\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n // label\n {\n name: nameof<Components.NvToggle>(x => x.label),\n description: 'The label displayed next to the toggle.',\n args: { label: 'Label' },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n // description\n {\n name: nameof<Components.NvToggle>(x => x.description),\n description:\n 'A description providing additional context or information about the toggle.',\n args: { description: 'Description' },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n // checked\n {\n name: nameof<Components.NvToggle>(x => x.checked),\n description: 'Indicates whether the toggle is checked or not.',\n args: { checked: true },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n // disabled\n {\n name: nameof<Components.NvToggle>(x => x.disabled),\n description: 'Disables the toggle, preventing user interaction.',\n args: { disabled: true },\n template: (\n <div data-class=\"flex gap-4 \">\n <nv-toggle data-storybook-args></nv-toggle>\n <nv-toggle data-storybook-args checked></nv-toggle>\n </div>\n ),\n },\n // readonly\n {\n name: nameof<Components.NvToggle>(x => x.readonly),\n description:\n 'Sets the toggle to read-only, preventing user changes but still allowing focus and selection of text.',\n args: { readonly: true },\n template: (\n <div data-class=\"flex gap-4 \">\n <nv-toggle data-storybook-args></nv-toggle>\n <nv-toggle data-storybook-args checked></nv-toggle>\n </div>\n ),\n },\n // hideLabel\n {\n name: nameof<Components.NvToggle>(x => x.hideLabel),\n description:\n 'Hides the label visually while still keeping it available for screen readers.',\n args: { label: 'Label', hideLabel: true },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n // inputId\n {\n name: nameof<Components.NvToggle>(x => x.inputId),\n description:\n 'Sets the ID for the input element. If not provided, a random ID is generated.',\n args: { label: 'Toggle with custom ID', inputId: 'custom-toggle-id' },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n // name\n {\n name: nameof<Components.NvToggle>(x => x.name),\n description:\n 'The name attribute for the toggle input, used to reference the form data after submission.',\n args: { label: 'Accept Terms', name: 'accept-terms' },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n // value\n {\n name: nameof<Components.NvToggle>(x => x.value),\n description:\n 'The value attribute sent on form submission when the toggle is checked.',\n args: { label: 'Enable Feature', name: 'feature', value: 'enabled' },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n // labelPlacement\n {\n name: nameof<Components.NvToggle>(x => x.labelPlacement),\n description:\n 'Determines the position of the label relative to the toggle, either `start` (before) or `end` (after).',\n args: { label: 'Label', labelPlacement: 'before' },\n template: <nv-toggle data-storybook-args></nv-toggle>,\n },\n // SlotLabel\n {\n name: 'SlotLabel',\n description:\n 'You can use the `label` slot to customize the content of the label.',\n template: (\n <nv-toggle data-storybook-args>\n <span slot=\"label\">Label</span>\n </nv-toggle>\n ),\n },\n // SlotDescription\n {\n name: 'SlotDescription',\n description:\n 'You can use the `description` slot to customize the content of the description.',\n template: (\n <nv-toggle data-storybook-args>\n <span slot=\"description\">Description</span>\n </nv-toggle>\n ),\n },\n ],\n};\n\nexport default NvToggleDocs;\n"]}

package/dist/collection/components/nv-toggle/nv-toggle.js CHANGED Viewed

@@ -60,8 +60,8 @@ export class NvToggle {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: 'afeeed468bea015c59cdab86f85ee3b0145f8b11', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: 'fd56a2b878f063549315f5b48fe1eb7b249a3503', class: "input-container" }, h("input", { key: '8e0a260d2c80bb303ff9b1f1921290060ef5c92c', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: '906d8bd545bffcc8f2e4deee3f760ae1366aa8b2', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: 'fa2e7120d3f8f0dedd7ef953a7648aa1dca80ec4', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '598eb4b920bbc37c6dba5862e65221b586714728', name: "label" }, this.label))), (this.description ||
-            this.el.querySelector('[slot="description"]')) && (h("div", { key: 'fb4769f30a05fe2e953759990ff8922ebc906452', class: "description" }, h("slot", { key: '1e847c839e147d3a9aff41296e5d1d84266be9f5', name: "description" }, this.description))))));
+        return (h(Host, { key: 'bf104d1513a3cf741c6b42ab48554c40d19263d1', class: clsx(this.labelPlacement === 'before' && 'label-placement-before') }, h("div", { key: '8c7e9684887e0d454a69101fb83f290d26236841', class: "input-container" }, h("input", { key: '5771d8999e03247600a2b98d0eae985ff0345e28', type: "checkbox", id: this.inputId, name: this.name, autocomplete: "off", value: this.value, checked: Boolean(this.checked), disabled: this.disabled || this.readonly, readonly: this.readonly })), h("div", { key: '8c95821037235c2eab053bce5bb7a0dc15173ea4', class: "text-container" }, (this.label || this.el.querySelector('[slot="label"]')) && (h("label", { key: '36c1d110f4c9151e1d05c665546f01f323999b15', htmlFor: this.inputId, class: clsx(this.hideLabel && 'visually-hidden') }, h("slot", { key: '4fe3f5fab8c1a20480c9eba085221afc36caae73', name: "label" }, this.label))), (this.description ||
+            this.el.querySelector('[slot="description"]')) && (h("div", { key: '63dc983d3b09327f57bd62feb7a25865f90390a7', class: "description" }, h("slot", { key: 'e85b616e8bf1301e53f62a2c4e1ea87675b1dcff', name: "description" }, this.description))))));
     }
     static get is() { return "nv-toggle"; }
     static get formAssociated() { return true; }

package/dist/collection/components/nv-togglebutton/nv-togglebutton.js CHANGED Viewed

@@ -51,7 +51,7 @@ export class NvTogglebutton {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '0285637cb14c292c67d767dc83b72f52c5368269', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, h("slot", { key: 'a84f303e76070b99ff2c01e5ec400f2e78503b19' })));
+        return (h(Host, { key: 'af68f5f4887be35f48bb74f15f597e7fe575b3fd', role: "button", tabindex: "0", "aria-pressed": String(this.active), onClick: this.handleClick }, h("slot", { key: '624ab0edc86bf9b5686f3f99097adf82ea972764' })));
     }
     static get is() { return "nv-togglebutton"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-togglebutton/styles/nv-togglebutton.css CHANGED Viewed

@@ -20,9 +20,10 @@ nv-togglebutton[size=xs] nv-icon > svg {
   stroke-width: 1.2px;
 }
 nv-togglebutton[size=xs] {
-  padding-top: calc(var(--togglegroup-xs-button-padding-y) - 1px);
-  padding-bottom: calc(var(--togglegroup-xs-button-padding-y) - 1px);
-  border-radius: calc(var(--togglegroup-xs-button-radius));
+  padding-top: calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));
+  padding-bottom: calc(var(--togglegroup-xs-button-padding-y) - var(--togglegroup-stroke));
+  border-radius: var(--togglegroup-xs-button-radius);
+  height: calc((var(--togglegroup-xs-height)) - var(--togglegroup-inner-space));
   border-width: 0;
 }
 nv-togglebutton[size=sm] {
@@ -39,9 +40,10 @@ nv-togglebutton[size=sm] nv-icon > svg {
   stroke-width: 1.5px;
 }
 nv-togglebutton[size=sm] {
-  padding-top: calc(var(--togglegroup-sm-button-padding-y) - 1px);
-  padding-bottom: calc(var(--togglegroup-sm-button-padding-y) - 1px);
-  border-radius: calc(var(--togglegroup-sm-button-radius));
+  padding-top: calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));
+  padding-bottom: calc(var(--togglegroup-sm-button-padding-y) - var(--togglegroup-stroke));
+  border-radius: calc(var(--togglegroup-sm-button-radius) + 1px);
+  height: calc((var(--togglegroup-sm-height)) - var(--togglegroup-inner-space));
   border-width: 0;
 }
 nv-togglebutton[size=md] {
@@ -58,9 +60,10 @@ nv-togglebutton[size=md] nv-icon > svg {
   stroke-width: 1.6px;
 }
 nv-togglebutton[size=md] {
-  padding-top: calc(var(--togglegroup-md-button-padding-y) - 1px);
-  padding-bottom: calc(var(--togglegroup-md-button-padding-y) - 1px);
-  border-radius: calc(var(--togglegroup-md-button-radius));
+  padding-top: calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));
+  padding-bottom: calc(var(--togglegroup-md-button-padding-y) - var(--togglegroup-stroke));
+  border-radius: calc(var(--togglegroup-md-button-radius) + 1px);
+  height: calc((var(--togglegroup-md-height)) - var(--togglegroup-inner-space));
   border-width: 0;
 }
 nv-togglebutton[size=lg] {
@@ -77,9 +80,10 @@ nv-togglebutton[size=lg] nv-icon > svg {
   stroke-width: 1.8px;
 }
 nv-togglebutton[size=lg] {
-  padding-top: calc(var(--togglegroup-lg-button-padding-y) - 1px);
-  padding-bottom: calc(var(--togglegroup-lg-button-padding-y) - 1px);
-  border-radius: calc(var(--togglegroup-lg-button-radius));
+  padding-top: calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));
+  padding-bottom: calc(var(--togglegroup-lg-button-padding-y) - var(--togglegroup-stroke));
+  border-radius: calc(var(--togglegroup-lg-button-radius) + 1px);
+  height: calc((var(--togglegroup-lg-height)) - var(--togglegroup-inner-space));
   border-width: 0;
 }
 nv-togglebutton[emphasis=high] {

package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.docs.js CHANGED Viewed

@@ -6,10 +6,12 @@ const NvTogglebuttongroupDocs = {
     subcomponents: ['nv-togglebutton', 'nv-icon'],
     badge: 'new',
     stories: [
+        // Default
         {
             name: 'Default',
             template: (h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" })))),
         },
+        // value
         {
             name: nameof(x => x.value),
             args: {
@@ -18,6 +20,7 @@ const NvTogglebuttongroupDocs = {
             },
             template: (h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" })))),
         },
+        // exclusive
         {
             name: nameof(x => x.exclusive),
             args: {
@@ -25,6 +28,7 @@ const NvTogglebuttongroupDocs = {
             },
             template: (h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "android" }, "Android"), h("nv-togglebutton", { value: "ios" }, "iOS"), h("nv-togglebutton", { value: "win" }, "Windows"))),
         },
+        // enforceValue
         {
             name: nameof(x => x.enforceValue),
             args: {
@@ -33,8 +37,19 @@ const NvTogglebuttongroupDocs = {
             },
             template: (h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "android" }, "Android"), h("nv-togglebutton", { value: "ios" }, "iOS"), h("nv-togglebutton", { value: "win" }, "Windows"))),
         },
+        // emphasis
         {
-            name: 'enforceValueWithExclusive',
+            name: nameof(x => x.emphasis),
+            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-togglebuttongroup", { "data-storybook-args": true, emphasis: "low" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))), h("nv-togglebuttongroup", { "data-storybook-args": true, emphasis: "high" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))))),
+        },
+        // size
+        {
+            name: nameof(x => x.size),
+            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-togglebuttongroup", { "data-storybook-args": true, size: "xs" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))), h("nv-togglebuttongroup", { "data-storybook-args": true, size: "sm" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))), h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))), h("nv-togglebuttongroup", { "data-storybook-args": true, size: "lg" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))))),
+        },
+        // EnforceValueWithExclusive
+        {
+            name: 'EnforceValueWithExclusive',
             args: {
                 enforceValue: true,
                 exclusive: true,
@@ -42,13 +57,11 @@ const NvTogglebuttongroupDocs = {
             },
             template: (h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "android" }, "Android"), h("nv-togglebutton", { value: "ios" }, "iOS"), h("nv-togglebutton", { value: "win" }, "Windows"))),
         },
+        // SlotDefault
         {
-            name: nameof(x => x.emphasis),
-            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-togglebuttongroup", { "data-storybook-args": true, emphasis: "low" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))), h("nv-togglebuttongroup", { "data-storybook-args": true, emphasis: "high" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))))),
-        },
-        {
-            name: nameof(x => x.size),
-            template: (h("div", { "data-class": "flex flex-col gap-4" }, h("nv-togglebuttongroup", { "data-storybook-args": true, size: "xs" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))), h("nv-togglebuttongroup", { "data-storybook-args": true, size: "sm" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))), h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))), h("nv-togglebuttongroup", { "data-storybook-args": true, size: "lg" }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" }))))),
+            name: 'SlotDefault',
+            description: 'Default slot for nv-togglebutton elements.',
+            template: (h("nv-togglebuttongroup", { "data-storybook-args": true }, h("nv-togglebutton", { value: "left" }, h("nv-icon", { name: "align-left" })), h("nv-togglebutton", { value: "center" }, h("nv-icon", { name: "align-center" })), h("nv-togglebutton", { value: "right" }, h("nv-icon", { name: "align-right" })))),
         },
     ],
 };

package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.docs.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-togglebuttongroup.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-togglebuttongroup/nv-togglebuttongroup.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvTogglebuttongroupDocs: NovaDocs<Components.NvTogglebuttongroup> = {\n component: 'nv-togglebuttongroup',\n composedComponents: ['nv-togglebutton'],\n subcomponents: ['nv-togglebutton', 'nv-icon'],\n badge: 'new',\n stories: [\n {\n name: 'Default',\n template: (\n <nv-togglebuttongroup data-storybook-args>\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n ),\n },\n {\n name: nameof<Components.NvTogglebuttongroup>(x => x.value),\n args: {\n value: ['left', 'center'],\n size: 'md',\n },\n template: (\n <nv-togglebuttongroup data-storybook-args>\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n ),\n },\n {\n name: nameof<Components.NvTogglebuttongroup>(x => x.exclusive),\n args: {\n exclusive: true,\n },\n template: (\n <nv-togglebuttongroup data-storybook-args>\n <nv-togglebutton value=\"android\">Android</nv-togglebutton>\n <nv-togglebutton value=\"ios\">iOS</nv-togglebutton>\n <nv-togglebutton value=\"win\">Windows</nv-togglebutton>\n </nv-togglebuttongroup>\n ),\n },\n {\n name: nameof<Components.NvTogglebuttongroup>(x => x.enforceValue),\n args: {\n enforceValue: true,\n value: ['ios', 'win'],\n },\n template: (\n <nv-togglebuttongroup data-storybook-args>\n <nv-togglebutton value=\"android\">Android</nv-togglebutton>\n <nv-togglebutton value=\"ios\">iOS</nv-togglebutton>\n <nv-togglebutton value=\"win\">Windows</nv-togglebutton>\n </nv-togglebuttongroup>\n ),\n },\n {\n name: 'enforceValueWithExclusive',\n args: {\n enforceValue: true,\n exclusive: true,\n value: ['ios'],\n },\n template: (\n <nv-togglebuttongroup data-storybook-args>\n <nv-togglebutton value=\"android\">Android</nv-togglebutton>\n <nv-togglebutton value=\"ios\">iOS</nv-togglebutton>\n <nv-togglebutton value=\"win\">Windows</nv-togglebutton>\n </nv-togglebuttongroup>\n ),\n },\n {\n name: nameof<Components.NvTogglebuttongroup>(x => x.emphasis),\n template: (\n <div data-class=\"flex flex-col gap-4\">\n <nv-togglebuttongroup data-storybook-args emphasis=\"low\">\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n <nv-togglebuttongroup data-storybook-args emphasis=\"high\">\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n </div>\n ),\n },\n {\n name: nameof<Components.NvTogglebuttongroup>(x => x.size),\n template: (\n <div data-class=\"flex flex-col gap-4\">\n <nv-togglebuttongroup data-storybook-args size=\"xs\">\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n <nv-togglebuttongroup data-storybook-args size=\"sm\">\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n <nv-togglebuttongroup data-storybook-args>\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n <nv-togglebuttongroup data-storybook-args size=\"lg\">\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n </div>\n ),\n },\n ],\n};\n\nexport default NvTogglebuttongroupDocs;\n"]}
1	+ {"version":3,"file":"nv-togglebuttongroup.docs.js","sourceRoot":"","sources":["../../../../src/components/nv-togglebuttongroup/nv-togglebuttongroup.docs.tsx"],"names":[],"mappings":"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","sourcesContent":["import { h } from '@stencil/core';\nimport type { NovaDocs } from '../../nova-docs';\nimport { Components } from '../../components';\nimport { nameof } from '../../utils/class.utils';\n\nconst NvTogglebuttongroupDocs: NovaDocs<Components.NvTogglebuttongroup> = {\n component: 'nv-togglebuttongroup',\n composedComponents: ['nv-togglebutton'],\n subcomponents: ['nv-togglebutton', 'nv-icon'],\n badge: 'new',\n stories: [\n // Default\n {\n name: 'Default',\n template: (\n <nv-togglebuttongroup data-storybook-args>\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n ),\n },\n // value\n {\n name: nameof<Components.NvTogglebuttongroup>(x => x.value),\n args: {\n value: ['left', 'center'],\n size: 'md',\n },\n template: (\n <nv-togglebuttongroup data-storybook-args>\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n ),\n },\n // exclusive\n {\n name: nameof<Components.NvTogglebuttongroup>(x => x.exclusive),\n args: {\n exclusive: true,\n },\n template: (\n <nv-togglebuttongroup data-storybook-args>\n <nv-togglebutton value=\"android\">Android</nv-togglebutton>\n <nv-togglebutton value=\"ios\">iOS</nv-togglebutton>\n <nv-togglebutton value=\"win\">Windows</nv-togglebutton>\n </nv-togglebuttongroup>\n ),\n },\n // enforceValue\n {\n name: nameof<Components.NvTogglebuttongroup>(x => x.enforceValue),\n args: {\n enforceValue: true,\n value: ['ios', 'win'],\n },\n template: (\n <nv-togglebuttongroup data-storybook-args>\n <nv-togglebutton value=\"android\">Android</nv-togglebutton>\n <nv-togglebutton value=\"ios\">iOS</nv-togglebutton>\n <nv-togglebutton value=\"win\">Windows</nv-togglebutton>\n </nv-togglebuttongroup>\n ),\n },\n // emphasis\n {\n name: nameof<Components.NvTogglebuttongroup>(x => x.emphasis),\n template: (\n <div data-class=\"flex flex-col gap-4\">\n <nv-togglebuttongroup data-storybook-args emphasis=\"low\">\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n <nv-togglebuttongroup data-storybook-args emphasis=\"high\">\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n </div>\n ),\n },\n // size\n {\n name: nameof<Components.NvTogglebuttongroup>(x => x.size),\n template: (\n <div data-class=\"flex flex-col gap-4\">\n <nv-togglebuttongroup data-storybook-args size=\"xs\">\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n <nv-togglebuttongroup data-storybook-args size=\"sm\">\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n <nv-togglebuttongroup data-storybook-args>\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n <nv-togglebuttongroup data-storybook-args size=\"lg\">\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n </div>\n ),\n },\n // EnforceValueWithExclusive\n {\n name: 'EnforceValueWithExclusive',\n args: {\n enforceValue: true,\n exclusive: true,\n value: ['ios'],\n },\n template: (\n <nv-togglebuttongroup data-storybook-args>\n <nv-togglebutton value=\"android\">Android</nv-togglebutton>\n <nv-togglebutton value=\"ios\">iOS</nv-togglebutton>\n <nv-togglebutton value=\"win\">Windows</nv-togglebutton>\n </nv-togglebuttongroup>\n ),\n },\n // SlotDefault\n {\n name: 'SlotDefault',\n description: 'Default slot for nv-togglebutton elements.',\n template: (\n <nv-togglebuttongroup data-storybook-args>\n <nv-togglebutton value=\"left\">\n <nv-icon name=\"align-left\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"center\">\n <nv-icon name=\"align-center\"></nv-icon>\n </nv-togglebutton>\n <nv-togglebutton value=\"right\">\n <nv-icon name=\"align-right\"></nv-icon>\n </nv-togglebutton>\n </nv-togglebuttongroup>\n ),\n },\n ],\n};\n\nexport default NvTogglebuttongroupDocs;\n"]}

package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.js CHANGED Viewed

@@ -31,11 +31,10 @@ export class NvTogglebuttongroup {
          */
         this.setActiveToggleButtons = () => {
             this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {
-                var _a;
                 const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);
                 if (!btn)
                     return;
-                btn.active = ((_a = this.value) !== null && _a !== void 0 ? _a : []).includes(btn.value);
+                btn.active = (this.value ?? []).includes(btn.value);
             });
         };
         /**
@@ -152,7 +151,7 @@ export class NvTogglebuttongroup {
     /****************************************************************************/
     //#region RENDER
     render() {
-        return (h(Host, { key: '0ed4a7f3ddaaebf6747e8f0798913cca4117f2cb' }, h("slot", { key: '8ea87065c312f52a1f23873d19724d57147e80b2' })));
+        return (h(Host, { key: '2d4f46a06045c84018b0a5c296b2eb19c2803d7a' }, h("slot", { key: '4f387071fe030057df13c6b3ff5e6f480fcd339b' })));
     }
     static get is() { return "nv-togglebuttongroup"; }
     static get originalStyleUrls() {

package/dist/collection/components/nv-togglebuttongroup/nv-togglebuttongroup.js.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"nv-togglebuttongroup.js","sourceRoot":"","sources":["../../../../src/components/nv-togglebuttongroup/nv-togglebuttongroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n Element,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/*\n @slot default - Child content of the component, pass the nv-togglebutton components here.\n /\n@Component({\n tag: 'nv-togglebuttongroup',\n styleUrl: 'styles/nv-togglebuttongroup.scss',\n shadow: false,\n})\nexport class NvTogglebuttongroup {\n @Element() el!: HTMLNvTogglebuttongroupElement;\n private mutationObserver: MutationObserver;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The active toggle buttons in the group. Is an array of one string when in\n * exclusive mode, and an array of strings when in non-exclusive mode.\n /\n @Prop({ reflect: false, mutable: true })\n value: string[];\n\n /\n Activates single-selection mode so only one button can be active at a time.\n /\n @Prop({ reflect: true })\n readonly exclusive: boolean = false;\n\n /\n Ensures at least one toggle stays selected at all times.\n /\n @Prop({ reflect: true })\n readonly enforceValue: boolean = false;\n\n /\n Make it more or less visually prominent to users.\n /\n @Prop({ reflect: true })\n readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n /\n Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n /\n @Prop({ reflect: true })\n readonly size: `${ToggleButtonSize}` = 'md';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Sets the active state of all toggle buttons depending on the value of the\n * group.\n /\n private setActiveToggleButtons = () => {\n this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n if (!btn) return;\n btn.active = (this.value ?? []).includes(btn.value);\n });\n };\n\n /\n Sets the emphasis of all toggle buttons to the same value.\n /\n private setEmphasisToggleButtons = () => {\n this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n if (!btn) return;\n btn.emphasis = this.emphasis;\n });\n };\n\n /\n Sets the size of all toggle buttons to the same value.\n /\n private setSizeToggleButtons = () => {\n this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n if (!btn) return;\n btn.size = this.size;\n });\n };\n\n /\n Sets up the MutationObserver to watch for changes in child elements\n /\n private setupMutationObserver = (): void => {\n this.mutationObserver = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\n this.setEmphasisToggleButtons();\n this.setSizeToggleButtons();\n }\n });\n });\n\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n });\n };\n\n /\n Narrow Type used locally to interact with nv-togglebutton child elements.\n * @param {Element} element - The element to check.\n * @returns {(HTMLElement & {\n * active: boolean;\n * value: string;\n * emphasis: `${ToggleButtonEmphasis}`;\n * size: `${ToggleButtonSize}`;\n * }) \| null} The element as a toggle button, or null if it is not a toggle button.\n /\n private static asToggleButton(element: Element):\n \| (HTMLElement & {\n /\n Whether the button is active or not. Will not toggle automatically but\n * needs to be controlled externally.\n /\n active: boolean;\n /\n The value to associated with the button when selected in a\n * Togglebuttongroup.\n /\n value: string;\n /\n Make it more or less visually prominent to users.\n /\n emphasis: `${ToggleButtonEmphasis}`;\n /\n Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n /\n size: `${ToggleButtonSize}`;\n })\n \| null {\n return element instanceof HTMLElement\n ? (element as unknown as HTMLElement & {\n /\n Whether the button is active or not. Will not toggle automatically but\n * needs to be controlled externally.\n /\n active: boolean;\n /\n The value to associated with the button when selected in a\n * Togglebuttongroup.\n /\n value: string;\n /\n Make it more or less visually prominent to users.\n /\n emphasis: `${ToggleButtonEmphasis}`;\n /\n Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n /\n size: `${ToggleButtonSize}`;\n })\n : null;\n }\n //#endregion METHODS\n /**************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n onValueChanged(newValue: typeof this.value) {\n this.setActiveToggleButtons();\n this.valueChanged.emit(newValue);\n }\n\n @Watch('emphasis')\n onEmphasisChanged() {\n this.setEmphasisToggleButtons();\n }\n\n @Watch('size')\n onSizeChanged() {\n this.setSizeToggleButtons();\n }\n\n / eslint-disable nova/native-event-listener /\n @Listen('toggled')\n onToggled(event: CustomEvent<HTMLNvTogglebuttonElementEventMap['toggled']>) {\n event.stopPropagation();\n\n const valueSet = new Set(this.value);\n\n if (this.exclusive && this.enforceValue) {\n this.value = [event.detail.value];\n return;\n }\n\n if (this.exclusive) {\n if (valueSet.has(event.detail.value)) {\n this.value = [];\n } else {\n this.value = [event.detail.value];\n }\n return;\n }\n\n toggle: if (event.detail.active) {\n if (this.enforceValue && valueSet.size === 1) break toggle;\n valueSet.delete(event.detail.value);\n } else {\n valueSet.add(event.detail.value);\n }\n this.value = [...valueSet];\n }\n / eslint-enable nova/native-event-listener /\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.setActiveToggleButtons();\n this.setEmphasisToggleButtons();\n this.setSizeToggleButtons();\n this.setupMutationObserver();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the selected toggle buttons change.\n * @bind value\n /\n @Event({ bubbles: false })\n valueChanged: EventEmitter<string[]>;\n\n //#endregion EVENTS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"]}
1	+ {"version":3,"file":"nv-togglebuttongroup.js","sourceRoot":"","sources":["../../../../src/components/nv-togglebuttongroup/nv-togglebuttongroup.tsx"],"names":[],"mappings":"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","sourcesContent":["import {\n Component,\n Host,\n h,\n Prop,\n Listen,\n Watch,\n Element,\n Event,\n EventEmitter,\n} from '@stencil/core';\nimport { ToggleButtonEmphasis, ToggleButtonSize } from '../../utils/constants';\n\n/*\n @slot default - Child content of the component, pass the nv-togglebutton components here.\n /\n@Component({\n tag: 'nv-togglebuttongroup',\n styleUrl: 'styles/nv-togglebuttongroup.scss',\n shadow: false,\n})\nexport class NvTogglebuttongroup {\n @Element() el!: HTMLNvTogglebuttongroupElement;\n private mutationObserver: MutationObserver;\n\n /*************************************************************************/\n //#region PROPERTIES\n\n /\n * The active toggle buttons in the group. Is an array of one string when in\n * exclusive mode, and an array of strings when in non-exclusive mode.\n /\n @Prop({ reflect: false, mutable: true })\n value: string[];\n\n /\n Activates single-selection mode so only one button can be active at a time.\n /\n @Prop({ reflect: true })\n readonly exclusive: boolean = false;\n\n /\n Ensures at least one toggle stays selected at all times.\n /\n @Prop({ reflect: true })\n readonly enforceValue: boolean = false;\n\n /\n Make it more or less visually prominent to users.\n /\n @Prop({ reflect: true })\n readonly emphasis: `${ToggleButtonEmphasis}` = 'high';\n\n /\n Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n /\n @Prop({ reflect: true })\n readonly size: `${ToggleButtonSize}` = 'md';\n\n //#endregion PROPERTIES\n /*************************************************************************/\n //#region METHODS\n\n /\n * Sets the active state of all toggle buttons depending on the value of the\n * group.\n /\n private setActiveToggleButtons = () => {\n this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n if (!btn) return;\n btn.active = (this.value ?? []).includes(btn.value);\n });\n };\n\n /\n Sets the emphasis of all toggle buttons to the same value.\n /\n private setEmphasisToggleButtons = () => {\n this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n if (!btn) return;\n btn.emphasis = this.emphasis;\n });\n };\n\n /\n Sets the size of all toggle buttons to the same value.\n /\n private setSizeToggleButtons = () => {\n this.el.querySelectorAll('nv-togglebutton').forEach(toggleButtonEl => {\n const btn = NvTogglebuttongroup.asToggleButton(toggleButtonEl);\n if (!btn) return;\n btn.size = this.size;\n });\n };\n\n /\n Sets up the MutationObserver to watch for changes in child elements\n /\n private setupMutationObserver = (): void => {\n this.mutationObserver = new MutationObserver(mutations => {\n mutations.forEach(mutation => {\n if (mutation.type === 'childList' && mutation.addedNodes.length > 0) {\n this.setEmphasisToggleButtons();\n this.setSizeToggleButtons();\n }\n });\n });\n\n this.mutationObserver.observe(this.el, {\n childList: true,\n subtree: true,\n });\n };\n\n /\n Narrow Type used locally to interact with nv-togglebutton child elements.\n * @param {Element} element - The element to check.\n * @returns {(HTMLElement & {\n * active: boolean;\n * value: string;\n * emphasis: `${ToggleButtonEmphasis}`;\n * size: `${ToggleButtonSize}`;\n * }) \| null} The element as a toggle button, or null if it is not a toggle button.\n /\n private static asToggleButton(element: Element):\n \| (HTMLElement & {\n /\n Whether the button is active or not. Will not toggle automatically but\n * needs to be controlled externally.\n /\n active: boolean;\n /\n The value to associated with the button when selected in a\n * Togglebuttongroup.\n /\n value: string;\n /\n Make it more or less visually prominent to users.\n /\n emphasis: `${ToggleButtonEmphasis}`;\n /\n Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n /\n size: `${ToggleButtonSize}`;\n })\n \| null {\n return element instanceof HTMLElement\n ? (element as unknown as HTMLElement & {\n /\n Whether the button is active or not. Will not toggle automatically but\n * needs to be controlled externally.\n /\n active: boolean;\n /\n The value to associated with the button when selected in a\n * Togglebuttongroup.\n /\n value: string;\n /\n Make it more or less visually prominent to users.\n /\n emphasis: `${ToggleButtonEmphasis}`;\n /\n Determines how large or small the togglebutton appears, allowing for\n * customization of the togglebutton's dimensions to fit different design\n * specifications and user needs.\n /\n size: `${ToggleButtonSize}`;\n })\n : null;\n }\n //#endregion METHODS\n /**************************************************************************/\n //#region WATCHERS\n\n @Watch('value')\n onValueChanged(newValue: typeof this.value) {\n this.setActiveToggleButtons();\n this.valueChanged.emit(newValue);\n }\n\n @Watch('emphasis')\n onEmphasisChanged() {\n this.setEmphasisToggleButtons();\n }\n\n @Watch('size')\n onSizeChanged() {\n this.setSizeToggleButtons();\n }\n\n / eslint-disable nova/native-event-listener /\n @Listen('toggled')\n onToggled(event: CustomEvent<HTMLNvTogglebuttonElementEventMap['toggled']>) {\n event.stopPropagation();\n\n const valueSet = new Set(this.value);\n\n if (this.exclusive && this.enforceValue) {\n this.value = [event.detail.value];\n return;\n }\n\n if (this.exclusive) {\n if (valueSet.has(event.detail.value)) {\n this.value = [];\n } else {\n this.value = [event.detail.value];\n }\n return;\n }\n\n toggle: if (event.detail.active) {\n if (this.enforceValue && valueSet.size === 1) break toggle;\n valueSet.delete(event.detail.value);\n } else {\n valueSet.add(event.detail.value);\n }\n this.value = [...valueSet];\n }\n / eslint-enable nova/native-event-listener /\n\n //#endregion WATCHERS\n /*************************************************************************/\n //#region LIFECYCLE\n\n componentWillLoad() {\n this.setActiveToggleButtons();\n this.setEmphasisToggleButtons();\n this.setSizeToggleButtons();\n this.setupMutationObserver();\n }\n\n disconnectedCallback() {\n if (this.mutationObserver) {\n this.mutationObserver.disconnect();\n }\n }\n\n //#endregion LIFECYCLE\n /************************************************************************/\n //#region EVENTS\n\n /\n * Emitted when the selected toggle buttons change.\n * @bind value\n /\n @Event({ bubbles: false })\n valueChanged: EventEmitter<string[]>;\n\n //#endregion EVENTS\n /***************************************************************************/\n //#region RENDER\n\n render() {\n return (\n <Host>\n <slot></slot>\n </Host>\n );\n }\n\n // #endregion RENDER\n}\n"]}

package/dist/collection/components/nv-togglebuttongroup/styles/nv-togglebuttongroup.css CHANGED Viewed

@@ -1,15 +1,3 @@
-/* Not USED */
-/*
-$components-background: (
-  "high": var(--components-button-high-background),
-  "low": var(--components-button-low-background)
-);
-$components-border: (
-  "high": var(--components-button-high-border),
-  "low": var(--components-button-low-border)
-);
-*/
 nv-togglebuttongroup {
   display: flex;
   gap: var(--togglegroup-lg-gap);
@@ -27,19 +15,23 @@ nv-togglebuttongroup[size=xs] {
   padding: calc(var(--togglegroup-xs-padding) - 1px);
   gap: var(--togglegroup-xs-gap);
   border-radius: var(--togglegroup-xs-radius);
+  height: var(--togglegroup-xs-height);
 }
 nv-togglebuttongroup[size=sm] {
   padding: calc(var(--togglegroup-sm-padding) - 1px);
   gap: var(--togglegroup-sm-gap);
   border-radius: var(--togglegroup-sm-radius);
+  height: var(--togglegroup-sm-height);
 }
 nv-togglebuttongroup[size=md] {
   padding: calc(var(--togglegroup-md-padding) - 1px);
   gap: var(--togglegroup-md-gap);
   border-radius: var(--togglegroup-md-radius);
+  height: var(--togglegroup-md-height);
 }
 nv-togglebuttongroup[size=lg] {
   padding: calc(var(--togglegroup-lg-padding) - 1px);
   gap: var(--togglegroup-lg-gap);
   border-radius: var(--togglegroup-lg-radius);
+  height: var(--togglegroup-lg-height);
 }

package/dist/collection/components/nv-tooltip/nv-tooltip.docs.js CHANGED Viewed

@@ -4,21 +4,44 @@ const NvTooltipDocs = {
     component: 'nv-tooltip',
     subcomponents: ['nv-button'],
     stories: [
+        // Default
         {
             name: 'Default',
             args: { message: 'This is a tooltip.' },
             template: (h("nv-tooltip", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", null, "Hover Me"))),
         },
+        // message
         {
             name: nameof(x => x.message),
             args: { message: 'This is a tooltip. You can focus or hover' },
             template: (h("nv-tooltip", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", null, "Hover Me"))),
         },
+        // placement
         {
             name: nameof(x => x.placement),
             args: { message: 'Place Me!' },
             template: (h("div", { "data-class": "flex py-6 gap-4" }, h("nv-tooltip", { "data-storybook-args": true, placement: "bottom" }, h("nv-button", null, "Bottom")), h("nv-tooltip", { "data-storybook-args": true, placement: "left" }, h("nv-button", null, "Left")), h("nv-tooltip", { "data-storybook-args": true, placement: "right" }, h("nv-button", null, "Right")), h("nv-tooltip", { "data-storybook-args": true, placement: "top" }, h("nv-button", null, "Top")))),
         },
+        // enterDelay
+        {
+            name: nameof(x => x.enterDelay),
+            args: { enterDelay: 500, message: 'Delayed!' },
+            template: (h("div", { "data-class": "flex py-6 gap-4" }, h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")), h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")))),
+        },
+        // strategy
+        {
+            name: nameof(x => x.strategy),
+            args: { message: 'Strategy demo!' },
+            template: (h("div", { "data-class": "flex gap-8 items-start py-6" }, h("div", { "data-class": "relative" }, h("h4", { "data-class": "mb-2 text-sm font-medium" }, "Absolute Strategy (Default)"), h("div", { "data-class": "w-48 h-32 overflow-hidden border border-gray-300 rounded p-4" }, h("p", { "data-class": "mb-2 text-xs" }, "Scroll container with overflow hidden"), h("nv-tooltip", { "data-storybook-args": true, strategy: "absolute", placement: "right" }, h("nv-button", null, "Hover Me")))), h("div", { "data-class": "relative" }, h("h4", { "data-class": "mb-2 text-sm font-medium" }, "Fixed Strategy"), h("div", { "data-class": "w-48 h-32 overflow-hidden border border-gray-300 rounded p-4" }, h("p", { "data-class": "mb-2 text-xs" }, "Scroll container with overflow hidden"), h("nv-tooltip", { "data-storybook-args": true, strategy: "fixed", placement: "right" }, h("nv-button", null, "Hover Me")))))),
+        },
+        // triggerElement
+        {
+            name: nameof(x => x.triggerElement),
+            description: 'Internal property - accepts a reference to the DOM element acting as the popover trigger. Use the default slot instead.',
+            args: { message: 'This uses internal triggerElement property.' },
+            template: (h("nv-tooltip", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", null, "Hover Me"))),
+        },
+        // MultipleTooltips
         {
             name: 'MultipleTooltips',
             description: 'Tooltips will automatically be grouped together, preventing animation overlap.',
@@ -27,15 +50,19 @@ const NvTooltipDocs = {
             },
             template: (h("div", { "data-class": "py-6 flex gap-4" }, h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")), h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")), h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")), h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")))),
         },
+        // SlotDefault
         {
-            name: nameof(x => x.enterDelay),
-            args: { enterDelay: 500, message: 'Delayed!' },
-            template: (h("div", { "data-class": "flex py-6 gap-4" }, h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")), h("nv-tooltip", { "data-storybook-args": true }, h("nv-button", null, "Hover Me")))),
+            name: 'SlotDefault',
+            description: 'Content to be placed as the trigger.',
+            args: { message: 'Tooltip with slot content as trigger.' },
+            template: (h("nv-tooltip", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", null, "Hover Me (Default Slot)"))),
         },
+        // SlotContent
         {
-            name: nameof(x => x.strategy),
-            args: { message: 'Strategy demo!' },
-            template: (h("div", { "data-class": "flex gap-8 items-start py-6" }, h("div", { "data-class": "relative" }, h("h4", { "data-class": "mb-2 text-sm font-medium" }, "Absolute Strategy (Default)"), h("div", { "data-class": "w-48 h-32 overflow-hidden border border-gray-300 rounded p-4" }, h("p", { "data-class": "mb-2 text-xs" }, "Scroll container with overflow hidden"), h("nv-tooltip", { "data-storybook-args": true, strategy: "absolute", placement: "right" }, h("nv-button", null, "Hover Me")))), h("div", { "data-class": "relative" }, h("h4", { "data-class": "mb-2 text-sm font-medium" }, "Fixed Strategy"), h("div", { "data-class": "w-48 h-32 overflow-hidden border border-gray-300 rounded p-4" }, h("p", { "data-class": "mb-2 text-xs" }, "Scroll container with overflow hidden"), h("nv-tooltip", { "data-storybook-args": true, strategy: "fixed", placement: "right" }, h("nv-button", null, "Hover Me")))))),
+            name: 'SlotContent',
+            description: 'Custom HTML content to be placed within the tooltip, rendered under the message.',
+            args: { message: 'Main message' },
+            template: (h("nv-tooltip", { "data-storybook-args": true, "data-class": "py-6" }, h("nv-button", null, "Hover Me"), h("div", { slot: "content", "data-class": "mt-2 text-sm" }, h("strong", null, "Custom content:"), " You can add any HTML here."))),
         },
     ],
 };