@ni/ok-components 1.12.1 → 1.12.3

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 (14) hide show
  1. package/dist/all-components-bundle.js +78 -44
  2. package/dist/all-components-bundle.js.map +1 -1
  3. package/dist/all-components-bundle.min.js +2832 -2812
  4. package/dist/all-components-bundle.min.js.map +1 -1
  5. package/dist/custom-elements.json +118 -118
  6. package/dist/custom-elements.md +25 -25
  7. package/dist/esm/fv/split-button/index.d.ts +2 -2
  8. package/dist/esm/fv/split-button/index.js +4 -4
  9. package/dist/esm/fv/split-button/index.js.map +1 -1
  10. package/dist/esm/fv/split-button/styles.js +51 -36
  11. package/dist/esm/fv/split-button/styles.js.map +1 -1
  12. package/dist/esm/fv/split-button/template.js +2 -2
  13. package/dist/esm/fv/split-button/template.js.map +1 -1
  14. package/package.json +2 -2
package/dist/custom-elements.json CHANGED
@@ -67,6 +67,124 @@
67
67
  }
68
68
  ]
69
69
  },
70
+ {
71
+ "kind": "javascript-module",
72
+ "path": "src/fv/accordion-item/index.ts",
73
+ "declarations": [
74
+ {
75
+ "kind": "class",
76
+ "description": "An accordion item component that can be expanded or collapsed to\nshow or hide its content.",
77
+ "name": "FvAccordionItem",
78
+ "members": [
79
+ {
80
+ "kind": "field",
81
+ "name": "header",
82
+ "type": {
83
+ "text": "string"
84
+ },
85
+ "privacy": "public",
86
+ "default": "''"
87
+ },
88
+ {
89
+ "kind": "field",
90
+ "name": "expanded",
91
+ "type": {
92
+ "text": "boolean"
93
+ },
94
+ "privacy": "public",
95
+ "default": "false"
96
+ },
97
+ {
98
+ "kind": "field",
99
+ "name": "appearance",
100
+ "type": {
101
+ "text": "FvAccordionItemAppearance"
102
+ },
103
+ "privacy": "public"
104
+ }
105
+ ],
106
+ "attributes": [
107
+ {
108
+ "name": "header",
109
+ "type": {
110
+ "text": "string"
111
+ },
112
+ "default": "''",
113
+ "fieldName": "header"
114
+ },
115
+ {
116
+ "name": "expanded",
117
+ "type": {
118
+ "text": "boolean"
119
+ },
120
+ "default": "false",
121
+ "fieldName": "expanded"
122
+ },
123
+ {
124
+ "name": "appearance",
125
+ "type": {
126
+ "text": "FvAccordionItemAppearance"
127
+ },
128
+ "fieldName": "appearance"
129
+ }
130
+ ],
131
+ "superclass": {
132
+ "name": "FoundationElement",
133
+ "package": "@ni/fast-foundation"
134
+ }
135
+ },
136
+ {
137
+ "kind": "variable",
138
+ "name": "fvAccordionItemTag",
139
+ "type": {
140
+ "text": "string"
141
+ },
142
+ "default": "'ok-fv-accordion-item'"
143
+ }
144
+ ],
145
+ "exports": [
146
+ {
147
+ "kind": "js",
148
+ "name": "FvAccordionItem",
149
+ "declaration": {
150
+ "name": "FvAccordionItem",
151
+ "module": "src/fv/accordion-item/index.ts"
152
+ }
153
+ },
154
+ {
155
+ "kind": "js",
156
+ "name": "fvAccordionItemTag",
157
+ "declaration": {
158
+ "name": "fvAccordionItemTag",
159
+ "module": "src/fv/accordion-item/index.ts"
160
+ }
161
+ }
162
+ ]
163
+ },
164
+ {
165
+ "kind": "javascript-module",
166
+ "path": "src/fv/accordion-item/types.ts",
167
+ "declarations": [
168
+ {
169
+ "kind": "variable",
170
+ "name": "FvAccordionItemAppearance",
171
+ "type": {
172
+ "text": "{\n outline: 'outline',\n ghost: 'ghost',\n block: 'block'\n}"
173
+ },
174
+ "default": "{ outline: 'outline', ghost: 'ghost', block: 'block' }"
175
+ }
176
+ ],
177
+ "exports": [
178
+ {
179
+ "kind": "js",
180
+ "name": "FvAccordionItemAppearance",
181
+ "declaration": {
182
+ "name": "FvAccordionItemAppearance",
183
+ "module": "src/fv/accordion-item/types.ts"
184
+ }
185
+ }
186
+ ]
187
+ },
70
188
  {
71
189
  "kind": "javascript-module",
72
190
  "path": "src/fv/bulk-edit-field/index.ts",
@@ -255,124 +373,6 @@
255
373
  }
256
374
  ]
257
375
  },
258
- {
259
- "kind": "javascript-module",
260
- "path": "src/fv/accordion-item/index.ts",
261
- "declarations": [
262
- {
263
- "kind": "class",
264
- "description": "An accordion item component that can be expanded or collapsed to\nshow or hide its content.",
265
- "name": "FvAccordionItem",
266
- "members": [
267
- {
268
- "kind": "field",
269
- "name": "header",
270
- "type": {
271
- "text": "string"
272
- },
273
- "privacy": "public",
274
- "default": "''"
275
- },
276
- {
277
- "kind": "field",
278
- "name": "expanded",
279
- "type": {
280
- "text": "boolean"
281
- },
282
- "privacy": "public",
283
- "default": "false"
284
- },
285
- {
286
- "kind": "field",
287
- "name": "appearance",
288
- "type": {
289
- "text": "FvAccordionItemAppearance"
290
- },
291
- "privacy": "public"
292
- }
293
- ],
294
- "attributes": [
295
- {
296
- "name": "header",
297
- "type": {
298
- "text": "string"
299
- },
300
- "default": "''",
301
- "fieldName": "header"
302
- },
303
- {
304
- "name": "expanded",
305
- "type": {
306
- "text": "boolean"
307
- },
308
- "default": "false",
309
- "fieldName": "expanded"
310
- },
311
- {
312
- "name": "appearance",
313
- "type": {
314
- "text": "FvAccordionItemAppearance"
315
- },
316
- "fieldName": "appearance"
317
- }
318
- ],
319
- "superclass": {
320
- "name": "FoundationElement",
321
- "package": "@ni/fast-foundation"
322
- }
323
- },
324
- {
325
- "kind": "variable",
326
- "name": "fvAccordionItemTag",
327
- "type": {
328
- "text": "string"
329
- },
330
- "default": "'ok-fv-accordion-item'"
331
- }
332
- ],
333
- "exports": [
334
- {
335
- "kind": "js",
336
- "name": "FvAccordionItem",
337
- "declaration": {
338
- "name": "FvAccordionItem",
339
- "module": "src/fv/accordion-item/index.ts"
340
- }
341
- },
342
- {
343
- "kind": "js",
344
- "name": "fvAccordionItemTag",
345
- "declaration": {
346
- "name": "fvAccordionItemTag",
347
- "module": "src/fv/accordion-item/index.ts"
348
- }
349
- }
350
- ]
351
- },
352
- {
353
- "kind": "javascript-module",
354
- "path": "src/fv/accordion-item/types.ts",
355
- "declarations": [
356
- {
357
- "kind": "variable",
358
- "name": "FvAccordionItemAppearance",
359
- "type": {
360
- "text": "{\n outline: 'outline',\n ghost: 'ghost',\n block: 'block'\n}"
361
- },
362
- "default": "{ outline: 'outline', ghost: 'ghost', block: 'block' }"
363
- }
364
- ],
365
- "exports": [
366
- {
367
- "kind": "js",
368
- "name": "FvAccordionItemAppearance",
369
- "declaration": {
370
- "name": "FvAccordionItemAppearance",
371
- "module": "src/fv/accordion-item/types.ts"
372
- }
373
- }
374
- ]
375
- },
376
376
  {
377
377
  "kind": "javascript-module",
378
378
  "path": "src/fv/bulk-edit-state/index.ts",
package/dist/custom-elements.md CHANGED
@@ -8,7 +8,7 @@
8
8
 
9
9
  <hr/>
10
10
 
11
- ## class: `FvBulkEditField`
11
+ ## class: `FvAccordionItem`
12
12
 
13
13
  ### Superclass
14
14
 
@@ -18,26 +18,23 @@
18
18
 
19
19
  ### Fields
20
20
 
21
- | Name | Privacy | Type | Default | Description | Inherited From |
22
- | --------------- | ------- | ------------------------- | ------- | ----------------------------------------------------------- | -------------- |
23
- | `label` | public | `string` | `''` | | |
24
- | `status` | public | `BulkEditFieldStatusType` | | | |
25
- | `resetDisabled` | public | `boolean` | `false` | | |
26
- | `clearDisabled` | public | `boolean` | `false` | | |
27
- | `controlLabel` | public | `string` | | Accessible name applied to directly slotted field controls. | |
21
+ | Name | Privacy | Type | Default | Description | Inherited From |
22
+ | ------------ | ------- | --------------------------- | ------- | ----------- | -------------- |
23
+ | `header` | public | `string` | `''` | | |
24
+ | `expanded` | public | `boolean` | `false` | | |
25
+ | `appearance` | public | `FvAccordionItemAppearance` | | | |
28
26
 
29
27
  ### Attributes
30
28
 
31
- | Name | Field | Inherited From |
32
- | ---------------- | ------------- | -------------- |
33
- | `label` | label | |
34
- | `status` | status | |
35
- | `reset-disabled` | resetDisabled | |
36
- | `clear-disabled` | clearDisabled | |
29
+ | Name | Field | Inherited From |
30
+ | ------------ | ---------- | -------------- |
31
+ | `header` | header | |
32
+ | `expanded` | expanded | |
33
+ | `appearance` | appearance | |
37
34
 
38
35
  <hr/>
39
36
 
40
- ## class: `FvAccordionItem`
37
+ ## class: `FvBulkEditField`
41
38
 
42
39
  ### Superclass
43
40
 
@@ -47,19 +44,22 @@
47
44
 
48
45
  ### Fields
49
46
 
50
- | Name | Privacy | Type | Default | Description | Inherited From |
51
- | ------------ | ------- | --------------------------- | ------- | ----------- | -------------- |
52
- | `header` | public | `string` | `''` | | |
53
- | `expanded` | public | `boolean` | `false` | | |
54
- | `appearance` | public | `FvAccordionItemAppearance` | | | |
47
+ | Name | Privacy | Type | Default | Description | Inherited From |
48
+ | --------------- | ------- | ------------------------- | ------- | ----------------------------------------------------------- | -------------- |
49
+ | `label` | public | `string` | `''` | | |
50
+ | `status` | public | `BulkEditFieldStatusType` | | | |
51
+ | `resetDisabled` | public | `boolean` | `false` | | |
52
+ | `clearDisabled` | public | `boolean` | `false` | | |
53
+ | `controlLabel` | public | `string` | | Accessible name applied to directly slotted field controls. | |
55
54
 
56
55
  ### Attributes
57
56
 
58
- | Name | Field | Inherited From |
59
- | ------------ | ---------- | -------------- |
60
- | `header` | header | |
61
- | `expanded` | expanded | |
62
- | `appearance` | appearance | |
57
+ | Name | Field | Inherited From |
58
+ | ---------------- | ------------- | -------------- |
59
+ | `label` | label | |
60
+ | `status` | status | |
61
+ | `reset-disabled` | resetDisabled | |
62
+ | `clear-disabled` | clearDisabled | |
63
63
 
64
64
  <hr/>
65
65
 
package/dist/esm/fv/split-button/index.d.ts CHANGED
@@ -16,7 +16,7 @@ export declare class FvSplitButton extends FoundationElement {
16
16
  appearance: FvSplitButtonAppearanceType;
17
17
  appearanceVariant: FvSplitButtonAppearanceVariantType;
18
18
  /** @internal */
19
- splitButtonContainer?: HTMLDivElement;
19
+ toggleButton?: HTMLButtonElement;
20
20
  /** @internal */
21
21
  region?: AnchoredRegion;
22
22
  /** @internal */
@@ -34,7 +34,7 @@ export declare class FvSplitButton extends FoundationElement {
34
34
  /** @internal */
35
35
  regionChanged(prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void;
36
36
  /** @internal */
37
- splitButtonContainerChanged(): void;
37
+ toggleButtonChanged(): void;
38
38
  private readonly documentClickHandler;
39
39
  private readonly keydownHandler;
40
40
  private readonly menuChangeHandler;
package/dist/esm/fv/split-button/index.js CHANGED
@@ -77,14 +77,14 @@ export class FvSplitButton extends FoundationElement {
77
77
  prev.removeEventListener('change', this.menuChangeHandler);
78
78
  }
79
79
  if (this.region) {
80
- this.region.anchorElement = this.splitButtonContainer ?? this;
80
+ this.region.anchorElement = this.toggleButton ?? this;
81
81
  this.region.addEventListener('change', this.menuChangeHandler, { capture: true });
82
82
  }
83
83
  }
84
84
  /** @internal */
85
- splitButtonContainerChanged() {
85
+ toggleButtonChanged() {
86
86
  if (this.region) {
87
- this.region.anchorElement = this.splitButtonContainer ?? this;
87
+ this.region.anchorElement = this.toggleButton ?? this;
88
88
  }
89
89
  }
90
90
  setOpen(nextOpen) {
@@ -116,7 +116,7 @@ __decorate([
116
116
  ], FvSplitButton.prototype, "appearanceVariant", void 0);
117
117
  __decorate([
118
118
  observable
119
- ], FvSplitButton.prototype, "splitButtonContainer", void 0);
119
+ ], FvSplitButton.prototype, "toggleButton", void 0);
120
120
  __decorate([
121
121
  observable
122
122
  ], FvSplitButton.prototype, "region", void 0);
package/dist/esm/fv/split-button/index.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/split-button/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport type { AnchoredRegion } from '@ni/nimble-components/dist/esm/anchored-region';\nimport { styles } from './styles';\nimport { template } from './template';\nimport {\n FvSplitButtonAppearance,\n type FvSplitButtonAppearance as FvSplitButtonAppearanceType,\n FvSplitButtonAppearanceVariant,\n type FvSplitButtonAppearanceVariant as FvSplitButtonAppearanceVariantType\n} from './types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ok-fv-split-button': FvSplitButton;\n }\n}\n\n/**\n * A button with a primary action and a secondary expandable menu surface.\n */\nexport class FvSplitButton extends FoundationElement {\n @attr\n public label = 'Primary function';\n\n @attr({ mode: 'boolean' })\n public disabled = false;\n\n @attr({ mode: 'boolean' })\n public open = false;\n\n @attr()\n public appearance: FvSplitButtonAppearanceType = FvSplitButtonAppearance.outline;\n\n @attr({ attribute: 'appearance-variant' })\n public appearanceVariant: FvSplitButtonAppearanceVariantType = FvSplitButtonAppearanceVariant.default;\n\n /** @internal */\n @observable\n public splitButtonContainer?: HTMLDivElement;\n\n /** @internal */\n @observable\n public region?: AnchoredRegion;\n\n /** @internal */\n public disabledChanged(): void {\n if (this.disabled) {\n this.setOpen(false);\n }\n }\n\n /** @internal */\n public override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this.documentClickHandler);\n document.addEventListener('keydown', this.keydownHandler);\n }\n\n /** @internal */\n public override disconnectedCallback(): void {\n document.removeEventListener('click', this.documentClickHandler);\n document.removeEventListener('keydown', this.keydownHandler);\n super.disconnectedCallback();\n }\n\n /** @internal */\n public handlePrimaryClick(): void {\n if (this.disabled) {\n return;\n }\n\n this.dispatchEvent(new CustomEvent('trigger', {\n bubbles: true,\n composed: true\n }));\n }\n\n /** @internal */\n public handleToggleClick(): void {\n if (this.disabled) {\n return;\n }\n\n this.setOpen(!this.open);\n }\n\n /** @internal */\n public handleMenuChange(): void {\n this.setOpen(false);\n }\n\n /** @internal */\n public regionChanged(prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void {\n if (prev) {\n prev.removeEventListener('change', this.menuChangeHandler);\n }\n if (this.region) {\n this.region.anchorElement = this.splitButtonContainer ?? this;\n this.region.addEventListener('change', this.menuChangeHandler, { capture: true });\n }\n }\n\n /** @internal */\n public splitButtonContainerChanged(): void {\n if (this.region) {\n this.region.anchorElement = this.splitButtonContainer ?? this;\n }\n }\n\n private readonly documentClickHandler = (event: Event): void => {\n if (!this.open) {\n return;\n }\n\n if (!event.composedPath().includes(this)) {\n this.setOpen(false);\n }\n };\n\n private readonly keydownHandler = (event: KeyboardEvent): void => {\n if (event.key === 'Escape') {\n this.setOpen(false);\n }\n };\n\n private readonly menuChangeHandler = (): void => {\n this.handleMenuChange();\n };\n\n private setOpen(nextOpen: boolean): void {\n if (this.open === nextOpen) {\n return;\n }\n\n this.open = nextOpen;\n this.dispatchEvent(new CustomEvent('toggle', {\n bubbles: true,\n composed: true,\n detail: { open: this.open }\n }));\n }\n}\n\nconst okFvSplitButton = FvSplitButton.compose({\n baseName: 'fv-split-button',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButton());\nexport const fvSplitButtonTag = 'ok-fv-split-button';"]}
1
+ {"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../src/fv/split-button/index.ts"],"names":[],"mappings":"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","sourcesContent":["import { attr, observable } from '@ni/fast-element';\nimport { DesignSystem, FoundationElement } from '@ni/fast-foundation';\nimport type { AnchoredRegion } from '@ni/nimble-components/dist/esm/anchored-region';\nimport { styles } from './styles';\nimport { template } from './template';\nimport {\n FvSplitButtonAppearance,\n type FvSplitButtonAppearance as FvSplitButtonAppearanceType,\n FvSplitButtonAppearanceVariant,\n type FvSplitButtonAppearanceVariant as FvSplitButtonAppearanceVariantType\n} from './types';\n\ndeclare global {\n interface HTMLElementTagNameMap {\n 'ok-fv-split-button': FvSplitButton;\n }\n}\n\n/**\n * A button with a primary action and a secondary expandable menu surface.\n */\nexport class FvSplitButton extends FoundationElement {\n @attr\n public label = 'Primary function';\n\n @attr({ mode: 'boolean' })\n public disabled = false;\n\n @attr({ mode: 'boolean' })\n public open = false;\n\n @attr()\n public appearance: FvSplitButtonAppearanceType = FvSplitButtonAppearance.outline;\n\n @attr({ attribute: 'appearance-variant' })\n public appearanceVariant: FvSplitButtonAppearanceVariantType = FvSplitButtonAppearanceVariant.default;\n\n /** @internal */\n @observable\n public toggleButton?: HTMLButtonElement;\n\n /** @internal */\n @observable\n public region?: AnchoredRegion;\n\n /** @internal */\n public disabledChanged(): void {\n if (this.disabled) {\n this.setOpen(false);\n }\n }\n\n /** @internal */\n public override connectedCallback(): void {\n super.connectedCallback();\n document.addEventListener('click', this.documentClickHandler);\n document.addEventListener('keydown', this.keydownHandler);\n }\n\n /** @internal */\n public override disconnectedCallback(): void {\n document.removeEventListener('click', this.documentClickHandler);\n document.removeEventListener('keydown', this.keydownHandler);\n super.disconnectedCallback();\n }\n\n /** @internal */\n public handlePrimaryClick(): void {\n if (this.disabled) {\n return;\n }\n\n this.dispatchEvent(new CustomEvent('trigger', {\n bubbles: true,\n composed: true\n }));\n }\n\n /** @internal */\n public handleToggleClick(): void {\n if (this.disabled) {\n return;\n }\n\n this.setOpen(!this.open);\n }\n\n /** @internal */\n public handleMenuChange(): void {\n this.setOpen(false);\n }\n\n /** @internal */\n public regionChanged(prev: AnchoredRegion | undefined, _next: AnchoredRegion | undefined): void {\n if (prev) {\n prev.removeEventListener('change', this.menuChangeHandler);\n }\n if (this.region) {\n this.region.anchorElement = this.toggleButton ?? this;\n this.region.addEventListener('change', this.menuChangeHandler, { capture: true });\n }\n }\n\n /** @internal */\n public toggleButtonChanged(): void {\n if (this.region) {\n this.region.anchorElement = this.toggleButton ?? this;\n }\n }\n\n private readonly documentClickHandler = (event: Event): void => {\n if (!this.open) {\n return;\n }\n\n if (!event.composedPath().includes(this)) {\n this.setOpen(false);\n }\n };\n\n private readonly keydownHandler = (event: KeyboardEvent): void => {\n if (event.key === 'Escape') {\n this.setOpen(false);\n }\n };\n\n private readonly menuChangeHandler = (): void => {\n this.handleMenuChange();\n };\n\n private setOpen(nextOpen: boolean): void {\n if (this.open === nextOpen) {\n return;\n }\n\n this.open = nextOpen;\n this.dispatchEvent(new CustomEvent('toggle', {\n bubbles: true,\n composed: true,\n detail: { open: this.open }\n }));\n }\n}\n\nconst okFvSplitButton = FvSplitButton.compose({\n baseName: 'fv-split-button',\n template,\n styles\n});\n\nDesignSystem.getOrCreate().withPrefix('ok').register(okFvSplitButton());\nexport const fvSplitButtonTag = 'ok-fv-split-button';"]}
package/dist/esm/fv/split-button/styles.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { css } from '@ni/fast-element';
2
- import { actionRgbPartialColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonAccentBlockFontColor, buttonAccentOutlineFontColor, buttonBorderAccentOutlineColor, buttonFillAccentColor, buttonFillPrimaryColor, buttonLabelDisabledFontColor, buttonLabelFont, buttonLabelFontColor, buttonPrimaryFontColor, controlHeight, fillSelectedColor, iconColor, smallDelay, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
2
+ import { actionRgbPartialColor, applicationBackgroundColor, borderHoverColor, borderRgbPartialColor, borderWidth, buttonAccentBlockFontColor, buttonAccentOutlineFontColor, buttonBorderAccentOutlineColor, buttonFillAccentColor, buttonFillPrimaryColor, buttonLabelDisabledFontColor, buttonLabelFont, buttonLabelFontColor, buttonPrimaryFontColor, controlHeight, fillSelectedColor, fillSelectedRgbPartialColor, iconColor, mediumPadding, smallDelay, smallPadding, standardPadding } from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';
3
3
  import { display } from '../../utilities/style/display';
4
4
  export const styles = css `
5
5
  @layer base, hover, focusVisible, active, disabled, top;
@@ -9,8 +9,6 @@ export const styles = css `
9
9
 
10
10
  :host {
11
11
  --ni-private-ok-fv-split-button-background-image: none;
12
- --ni-private-ok-fv-split-button-background-size: 100% 100%;
13
- --ni-private-ok-fv-split-button-background-size-emphasis: 100% 100%;
14
12
  --ni-private-ok-fv-split-button-border: rgba(${actionRgbPartialColor}, 0.3);
15
13
  --ni-private-ok-fv-split-button-color: ${buttonLabelFontColor};
16
14
  position: relative;
@@ -28,7 +26,6 @@ export const styles = css `
28
26
  rgba(${borderRgbPartialColor}, 0.1)
29
27
  );
30
28
  --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.1);
31
- --ni-private-ok-fv-split-button-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);
32
29
  }
33
30
 
34
31
  :host([appearance='outline'][appearance-variant='primary']) {
@@ -65,6 +62,16 @@ export const styles = css `
65
62
  height: 100%;
66
63
  }
67
64
 
65
+ .split-button-container::before {
66
+ content: '';
67
+ position: absolute;
68
+ inset: 0;
69
+ border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-border);
70
+ background-image: var(--ni-private-ok-fv-split-button-background-image);
71
+ background-repeat: no-repeat;
72
+ pointer-events: none;
73
+ }
74
+
68
75
  .split-button-primary,
69
76
  .split-button-toggle {
70
77
  appearance: none;
@@ -73,12 +80,12 @@ export const styles = css `
73
80
  height: 100%;
74
81
  box-sizing: border-box;
75
82
  margin: 0;
76
- border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-border);
83
+ border: ${borderWidth} solid transparent;
77
84
  background-color: transparent;
78
- background-image: var(--ni-private-ok-fv-split-button-background-image);
79
85
  background-position: center;
80
86
  background-repeat: no-repeat;
81
- background-size: var(--ni-private-ok-fv-split-button-background-size);
87
+ background-origin: border-box;
88
+ background-size: 100% 100%;
82
89
  color: var(--ni-private-ok-fv-split-button-color);
83
90
  fill: currentcolor;
84
91
  font: ${buttonLabelFont};
@@ -103,7 +110,7 @@ export const styles = css `
103
110
 
104
111
  .split-button-primary {
105
112
  padding: 0 ${standardPadding};
106
- border-inline-end-color: transparent;
113
+ padding-inline-end: ${mediumPadding};
107
114
  white-space: nowrap;
108
115
  }
109
116
 
@@ -113,8 +120,17 @@ export const styles = css `
113
120
  display: inline-flex;
114
121
  align-items: center;
115
122
  justify-content: center;
116
- border-inline-start-color: var(--ni-private-ok-fv-split-button-border);
117
- margin-inline-start: calc(-1 * ${borderWidth});
123
+ padding: 0;
124
+ }
125
+
126
+ .split-button-toggle::after {
127
+ content: '';
128
+ position: absolute;
129
+ inset-block: ${smallPadding};
130
+ inset-inline-start: calc(-1 * ${borderWidth});
131
+ width: calc(2 * ${borderWidth});
132
+ background: rgba(${borderRgbPartialColor}, 0.1);
133
+ pointer-events: none;
118
134
  }
119
135
 
120
136
  .split-button-toggle > * {
@@ -122,40 +138,31 @@ export const styles = css `
122
138
  ${iconColor.cssCustomProperty}: currentColor;
123
139
  }
124
140
 
125
- :host([appearance='ghost']) .split-button-primary,
126
- :host([appearance='ghost']) .split-button-toggle {
127
- border-color: transparent;
128
- box-shadow: none;
129
- }
130
-
131
141
  slot[name='menu']::slotted(*) {
132
142
  min-width: 100%;
133
- margin: 4px 0 0;
143
+ margin: ${smallPadding} 0 0;
134
144
  }
135
145
  }
136
146
 
137
147
  @layer hover {
138
- .split-button-primary:hover,
139
- .split-button-toggle:hover {
148
+ .split-button-primary:enabled:hover,
149
+ .split-button-toggle:enabled:hover {
140
150
  border-color: ${borderHoverColor};
141
151
  box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
142
- background-size: var(--ni-private-ok-fv-split-button-background-size-emphasis);
143
152
  z-index: 1;
144
153
  }
145
154
 
146
- :host([appearance='ghost']) .split-button-primary:hover,
147
- :host([appearance='ghost']) .split-button-toggle:hover {
148
- border-color: ${borderHoverColor};
149
- box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
155
+ .split-button-primary:enabled:hover + .split-button-toggle::after,
156
+ .split-button-toggle:enabled:hover::after {
157
+ visibility: hidden;
150
158
  }
151
159
  }
152
160
 
153
161
  @layer focusVisible {
154
- .split-button-primary:focus-visible,
155
- .split-button-toggle:focus-visible {
162
+ .split-button-primary:enabled:focus-visible,
163
+ .split-button-toggle:enabled:focus-visible {
156
164
  border-color: ${borderHoverColor};
157
165
  box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
158
- background-size: var(--ni-private-ok-fv-split-button-background-size-emphasis);
159
166
  z-index: 1;
160
167
  }
161
168
 
@@ -164,16 +171,15 @@ export const styles = css `
164
171
  outline: ${borderWidth} solid ${borderHoverColor};
165
172
  }
166
173
 
167
- :host([appearance='ghost']) .split-button-primary:focus-visible,
168
- :host([appearance='ghost']) .split-button-toggle:focus-visible {
169
- border-color: ${borderHoverColor};
170
- box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;
174
+ .split-button-primary:focus-visible + .split-button-toggle::after,
175
+ .split-button-toggle:focus-visible::after {
176
+ visibility: hidden;
171
177
  }
172
178
  }
173
179
 
174
180
  @layer active {
175
- .split-button-primary:active,
176
- .split-button-toggle:active,
181
+ .split-button-primary:enabled:active,
182
+ .split-button-toggle:enabled:active,
177
183
  :host([open]) .split-button-toggle {
178
184
  border-color: ${borderHoverColor};
179
185
  box-shadow: none;
@@ -181,10 +187,19 @@ export const styles = css `
181
187
  background-size: calc(100% - 2px) calc(100% - 2px);
182
188
  }
183
189
 
184
- :host([appearance='block']) .split-button-primary:active,
185
- :host([appearance='block']) .split-button-toggle:active,
190
+ :host([open]) .split-button-toggle {
191
+ border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);
192
+ background-size: 100% 100%;
193
+ }
194
+
195
+ :host([open]) .split-button-toggle::after {
196
+ visibility: hidden;
197
+ }
198
+
199
+ :host([appearance='block']) .split-button-primary:enabled:active,
200
+ :host([appearance='block']) .split-button-toggle:enabled:active,
186
201
  :host([appearance='block'][open]) .split-button-toggle {
187
- background-size: calc(100% - 4px) calc(100% - 4px);
202
+ background-color: ${applicationBackgroundColor};
188
203
  }
189
204
 
190
205
  :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,
package/dist/esm/fv/split-button/styles.js.map CHANGED
@@ -1 +1 @@
1
- {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/split-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,qBAAqB,EACrB,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,0BAA0B,EAC1B,4BAA4B,EAC5B,8BAA8B,EAC9B,qBAAqB,EACrB,sBAAsB,EACtB,4BAA4B,EAC5B,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,SAAS,EACT,UAAU,EACV,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;;;;2DAM0B,qBAAqB;qDAC3B,oBAAoB;;sBAEnD,aAAa;;;;;;;;;;uBAUZ,qBAAqB;uBACrB,qBAAqB;;2DAEe,qBAAqB;;;;;0DAKtB,qBAAqB;;;;sDAIzB,8BAA8B;qDAC/B,4BAA4B;;;;;kBAK/D,sBAAsB;kBACtB,sBAAsB;;sDAEc,sBAAsB;qDACvB,sBAAsB;;;;;kBAKzD,qBAAqB;kBACrB,qBAAqB;;sDAEe,qBAAqB;qDACtB,0BAA0B;;;;;;;;;;;;;;;;;;sBAkBzD,WAAW;;;;;;;;oBAQb,eAAe;;;;6BAIN,UAAU;+BACR,UAAU;kCACP,UAAU;;;;;;;;;;;kCAWV,UAAU;;;;yBAInB,eAAe;;;;;;qBAMnB,aAAa;yBACT,aAAa;;;;;6CAKO,WAAW;;;;;cAK1C,SAAS,CAAC,iBAAiB;;;;;;;;;;;;;;;;;;4BAkBb,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;4BAOnC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;4BAOnC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;uBAOxC,WAAW,UAAU,gBAAgB;;;;;4BAKhC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;;4BAQnC,gBAAgB;;gDAEI,iBAAiB,KAAK,iBAAiB;;;;;;;;;;;;;qBAalE,4BAA4B;;;;;;qDAMI,4BAA4B;;;;2DAItB,qBAAqB;;;;;;;;;;;;;;;;CAgB/E,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n actionRgbPartialColor,\n borderHoverColor,\n borderRgbPartialColor,\n borderWidth,\n buttonAccentBlockFontColor,\n buttonAccentOutlineFontColor,\n buttonBorderAccentOutlineColor,\n buttonFillAccentColor,\n buttonFillPrimaryColor,\n buttonLabelDisabledFontColor,\n buttonLabelFont,\n buttonLabelFontColor,\n buttonPrimaryFontColor,\n controlHeight,\n fillSelectedColor,\n iconColor,\n smallDelay,\n standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-block')}\n\n :host {\n --ni-private-ok-fv-split-button-background-image: none;\n --ni-private-ok-fv-split-button-background-size: 100% 100%;\n --ni-private-ok-fv-split-button-background-size-emphasis: 100% 100%;\n --ni-private-ok-fv-split-button-border: rgba(${actionRgbPartialColor}, 0.3);\n --ni-private-ok-fv-split-button-color: ${buttonLabelFontColor};\n position: relative;\n height: ${controlHeight};\n vertical-align: middle;\n }\n\n :host([appearance='ghost']) {\n --ni-private-ok-fv-split-button-border: transparent;\n }\n\n :host([appearance='block']) {\n --ni-private-ok-fv-split-button-background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.1);\n --ni-private-ok-fv-split-button-background-size-emphasis: calc(100% - 4px) calc(100% - 4px);\n }\n\n :host([appearance='outline'][appearance-variant='primary']) {\n --ni-private-ok-fv-split-button-border: rgb(${actionRgbPartialColor});\n }\n\n :host([appearance='outline'][appearance-variant='accent']) {\n --ni-private-ok-fv-split-button-border: ${buttonBorderAccentOutlineColor};\n --ni-private-ok-fv-split-button-color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance='block'][appearance-variant='primary']) {\n --ni-private-ok-fv-split-button-background-image: linear-gradient(\n ${buttonFillPrimaryColor},\n ${buttonFillPrimaryColor}\n );\n --ni-private-ok-fv-split-button-border: ${buttonFillPrimaryColor};\n --ni-private-ok-fv-split-button-color: ${buttonPrimaryFontColor};\n }\n\n :host([appearance='block'][appearance-variant='accent']) {\n --ni-private-ok-fv-split-button-background-image: linear-gradient(\n ${buttonFillAccentColor},\n ${buttonFillAccentColor}\n );\n --ni-private-ok-fv-split-button-border: ${buttonFillAccentColor};\n --ni-private-ok-fv-split-button-color: ${buttonAccentBlockFontColor};\n }\n\n .split-button-container {\n position: relative;\n display: inline-flex;\n align-items: stretch;\n height: 100%;\n }\n\n .split-button-primary,\n .split-button-toggle {\n appearance: none;\n position: relative;\n z-index: 0;\n height: 100%;\n box-sizing: border-box;\n margin: 0;\n border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-border);\n background-color: transparent;\n background-image: var(--ni-private-ok-fv-split-button-background-image);\n background-position: center;\n background-repeat: no-repeat;\n background-size: var(--ni-private-ok-fv-split-button-background-size);\n color: var(--ni-private-ok-fv-split-button-color);\n fill: currentcolor;\n font: ${buttonLabelFont};\n cursor: pointer;\n outline: none;\n transition:\n box-shadow ${smallDelay} ease-in-out,\n border-color ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-in-out;\n }\n\n .split-button-primary::before,\n .split-button-toggle::before {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n outline: 0px solid transparent;\n outline-offset: -3px;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .split-button-primary {\n padding: 0 ${standardPadding};\n border-inline-end-color: transparent;\n white-space: nowrap;\n }\n\n .split-button-toggle {\n width: ${controlHeight};\n min-width: ${controlHeight};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n border-inline-start-color: var(--ni-private-ok-fv-split-button-border);\n margin-inline-start: calc(-1 * ${borderWidth});\n }\n\n .split-button-toggle > * {\n color: currentColor;\n ${iconColor.cssCustomProperty}: currentColor;\n }\n\n :host([appearance='ghost']) .split-button-primary,\n :host([appearance='ghost']) .split-button-toggle {\n border-color: transparent;\n box-shadow: none;\n }\n\n slot[name='menu']::slotted(*) {\n min-width: 100%;\n margin: 4px 0 0;\n }\n }\n\n @layer hover {\n .split-button-primary:hover,\n .split-button-toggle:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n background-size: var(--ni-private-ok-fv-split-button-background-size-emphasis);\n z-index: 1;\n }\n\n :host([appearance='ghost']) .split-button-primary:hover,\n :host([appearance='ghost']) .split-button-toggle:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n }\n }\n\n @layer focusVisible {\n .split-button-primary:focus-visible,\n .split-button-toggle:focus-visible {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n background-size: var(--ni-private-ok-fv-split-button-background-size-emphasis);\n z-index: 1;\n }\n\n .split-button-primary:focus-visible::before,\n .split-button-toggle:focus-visible::before {\n outline: ${borderWidth} solid ${borderHoverColor};\n }\n\n :host([appearance='ghost']) .split-button-primary:focus-visible,\n :host([appearance='ghost']) .split-button-toggle:focus-visible {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n }\n }\n\n @layer active {\n .split-button-primary:active,\n .split-button-toggle:active,\n :host([open]) .split-button-toggle {\n border-color: ${borderHoverColor};\n box-shadow: none;\n background-image: linear-gradient(${fillSelectedColor}, ${fillSelectedColor});\n background-size: calc(100% - 2px) calc(100% - 2px);\n }\n\n :host([appearance='block']) .split-button-primary:active,\n :host([appearance='block']) .split-button-toggle:active,\n :host([appearance='block'][open]) .split-button-toggle {\n background-size: calc(100% - 4px) calc(100% - 4px);\n }\n\n :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,\n :host([appearance='outline'][appearance-variant='accent']) .split-button-toggle:active,\n :host([appearance='outline'][appearance-variant='accent'][open]) .split-button-toggle {\n color: ${buttonAccentOutlineFontColor};\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n --ni-private-ok-fv-split-button-color: ${buttonLabelDisabledFontColor};\n }\n\n :host([disabled][appearance='outline']) {\n --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.3);\n }\n\n :host([disabled]) .split-button-primary,\n :host([disabled]) .split-button-toggle {\n cursor: default;\n box-shadow: none;\n }\n\n :host([disabled][appearance='ghost']) .split-button-primary,\n :host([disabled][appearance='ghost']) .split-button-toggle {\n border-color: transparent;\n }\n }\n\n @layer top {}\n`;"]}
1
+ {"version":3,"file":"styles.js","sourceRoot":"","sources":["../../../../src/fv/split-button/styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,kBAAkB,CAAC;AACvC,OAAO,EACH,qBAAqB,EACrB,0BAA0B,EAC1B,gBAAgB,EAChB,qBAAqB,EACrB,WAAW,EACX,0BAA0B,EAC1B,4BAA4B,EAC5B,8BAA8B,EAC9B,qBAAqB,EACrB,sBAAsB,EACtB,4BAA4B,EAC5B,eAAe,EACf,oBAAoB,EACpB,sBAAsB,EACtB,aAAa,EACb,iBAAiB,EACjB,2BAA2B,EAC3B,SAAS,EACT,aAAa,EACb,UAAU,EACV,YAAY,EACZ,eAAe,EAClB,MAAM,6DAA6D,CAAC;AACrE,OAAO,EAAE,OAAO,EAAE,MAAM,+BAA+B,CAAC;AAExD,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;UAIf,OAAO,CAAC,cAAc,CAAC;;;;2DAI0B,qBAAqB;qDAC3B,oBAAoB;;sBAEnD,aAAa;;;;;;;;;;uBAUZ,qBAAqB;uBACrB,qBAAqB;;2DAEe,qBAAqB;;;;0DAItB,qBAAqB;;;;sDAIzB,8BAA8B;qDAC/B,4BAA4B;;;;;kBAK/D,sBAAsB;kBACtB,sBAAsB;;sDAEc,sBAAsB;qDACvB,sBAAsB;;;;;kBAKzD,qBAAqB;kBACrB,qBAAqB;;sDAEe,qBAAqB;qDACtB,0BAA0B;;;;;;;;;;;;;;sBAczD,WAAW;;;;;;;;;;;;;;sBAcX,WAAW;;;;;;;;oBAQb,eAAe;;;;6BAIN,UAAU;+BACR,UAAU;kCACP,UAAU;;;;;;;;;;;kCAWV,UAAU;;;;yBAInB,eAAe;kCACN,aAAa;;;;;qBAK1B,aAAa;yBACT,aAAa;;;;;;;;;;2BAUX,YAAY;4CACK,WAAW;8BACzB,WAAW;+BACV,qBAAqB;;;;;;cAMtC,SAAS,CAAC,iBAAiB;;;;;sBAKnB,YAAY;;;;;;;4BAON,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;;;;;;;;4BAanC,gBAAgB;gCACZ,WAAW,IAAI,gBAAgB;;;;;;uBAMxC,WAAW,UAAU,gBAAgB;;;;;;;;;;;;;4BAahC,gBAAgB;;gDAEI,iBAAiB,KAAK,iBAAiB;;;;;iCAKtD,2BAA2B;;;;;;;;;;;gCAW5B,0BAA0B;;;;;;qBAMrC,4BAA4B;;;;;;qDAMI,4BAA4B;;;;2DAItB,qBAAqB;;;;;;;;;;;;;;;;CAgB/E,CAAC","sourcesContent":["import { css } from '@ni/fast-element';\nimport {\n actionRgbPartialColor,\n applicationBackgroundColor,\n borderHoverColor,\n borderRgbPartialColor,\n borderWidth,\n buttonAccentBlockFontColor,\n buttonAccentOutlineFontColor,\n buttonBorderAccentOutlineColor,\n buttonFillAccentColor,\n buttonFillPrimaryColor,\n buttonLabelDisabledFontColor,\n buttonLabelFont,\n buttonLabelFontColor,\n buttonPrimaryFontColor,\n controlHeight,\n fillSelectedColor,\n fillSelectedRgbPartialColor,\n iconColor,\n mediumPadding,\n smallDelay,\n smallPadding,\n standardPadding\n} from '@ni/nimble-components/dist/esm/theme-provider/design-tokens';\nimport { display } from '../../utilities/style/display';\n\nexport const styles = css`\n @layer base, hover, focusVisible, active, disabled, top;\n\n @layer base {\n ${display('inline-block')}\n\n :host {\n --ni-private-ok-fv-split-button-background-image: none;\n --ni-private-ok-fv-split-button-border: rgba(${actionRgbPartialColor}, 0.3);\n --ni-private-ok-fv-split-button-color: ${buttonLabelFontColor};\n position: relative;\n height: ${controlHeight};\n vertical-align: middle;\n }\n\n :host([appearance='ghost']) {\n --ni-private-ok-fv-split-button-border: transparent;\n }\n\n :host([appearance='block']) {\n --ni-private-ok-fv-split-button-background-image: linear-gradient(\n rgba(${borderRgbPartialColor}, 0.1),\n rgba(${borderRgbPartialColor}, 0.1)\n );\n --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.1);\n }\n\n :host([appearance='outline'][appearance-variant='primary']) {\n --ni-private-ok-fv-split-button-border: rgb(${actionRgbPartialColor});\n }\n\n :host([appearance='outline'][appearance-variant='accent']) {\n --ni-private-ok-fv-split-button-border: ${buttonBorderAccentOutlineColor};\n --ni-private-ok-fv-split-button-color: ${buttonAccentOutlineFontColor};\n }\n\n :host([appearance='block'][appearance-variant='primary']) {\n --ni-private-ok-fv-split-button-background-image: linear-gradient(\n ${buttonFillPrimaryColor},\n ${buttonFillPrimaryColor}\n );\n --ni-private-ok-fv-split-button-border: ${buttonFillPrimaryColor};\n --ni-private-ok-fv-split-button-color: ${buttonPrimaryFontColor};\n }\n\n :host([appearance='block'][appearance-variant='accent']) {\n --ni-private-ok-fv-split-button-background-image: linear-gradient(\n ${buttonFillAccentColor},\n ${buttonFillAccentColor}\n );\n --ni-private-ok-fv-split-button-border: ${buttonFillAccentColor};\n --ni-private-ok-fv-split-button-color: ${buttonAccentBlockFontColor};\n }\n\n .split-button-container {\n position: relative;\n display: inline-flex;\n align-items: stretch;\n height: 100%;\n }\n\n .split-button-container::before {\n content: '';\n position: absolute;\n inset: 0;\n border: ${borderWidth} solid var(--ni-private-ok-fv-split-button-border);\n background-image: var(--ni-private-ok-fv-split-button-background-image);\n background-repeat: no-repeat;\n pointer-events: none;\n }\n\n .split-button-primary,\n .split-button-toggle {\n appearance: none;\n position: relative;\n z-index: 0;\n height: 100%;\n box-sizing: border-box;\n margin: 0;\n border: ${borderWidth} solid transparent;\n background-color: transparent;\n background-position: center;\n background-repeat: no-repeat;\n background-origin: border-box;\n background-size: 100% 100%;\n color: var(--ni-private-ok-fv-split-button-color);\n fill: currentcolor;\n font: ${buttonLabelFont};\n cursor: pointer;\n outline: none;\n transition:\n box-shadow ${smallDelay} ease-in-out,\n border-color ${smallDelay} ease-in-out,\n background-size ${smallDelay} ease-in-out;\n }\n\n .split-button-primary::before,\n .split-button-toggle::before {\n content: '';\n position: absolute;\n inset: 0;\n pointer-events: none;\n outline: 0px solid transparent;\n outline-offset: -3px;\n transition: outline ${smallDelay} ease-in-out;\n }\n\n .split-button-primary {\n padding: 0 ${standardPadding};\n padding-inline-end: ${mediumPadding};\n white-space: nowrap;\n }\n\n .split-button-toggle {\n width: ${controlHeight};\n min-width: ${controlHeight};\n display: inline-flex;\n align-items: center;\n justify-content: center;\n padding: 0;\n }\n\n .split-button-toggle::after {\n content: '';\n position: absolute;\n inset-block: ${smallPadding};\n inset-inline-start: calc(-1 * ${borderWidth});\n width: calc(2 * ${borderWidth});\n background: rgba(${borderRgbPartialColor}, 0.1);\n pointer-events: none;\n }\n\n .split-button-toggle > * {\n color: currentColor;\n ${iconColor.cssCustomProperty}: currentColor;\n }\n\n slot[name='menu']::slotted(*) {\n min-width: 100%;\n margin: ${smallPadding} 0 0;\n }\n }\n\n @layer hover {\n .split-button-primary:enabled:hover,\n .split-button-toggle:enabled:hover {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n z-index: 1;\n }\n\n .split-button-primary:enabled:hover + .split-button-toggle::after,\n .split-button-toggle:enabled:hover::after {\n visibility: hidden;\n }\n }\n\n @layer focusVisible {\n .split-button-primary:enabled:focus-visible,\n .split-button-toggle:enabled:focus-visible {\n border-color: ${borderHoverColor};\n box-shadow: 0 0 0 ${borderWidth} ${borderHoverColor} inset;\n z-index: 1;\n }\n\n .split-button-primary:focus-visible::before,\n .split-button-toggle:focus-visible::before {\n outline: ${borderWidth} solid ${borderHoverColor};\n }\n\n .split-button-primary:focus-visible + .split-button-toggle::after,\n .split-button-toggle:focus-visible::after {\n visibility: hidden;\n }\n }\n\n @layer active {\n .split-button-primary:enabled:active,\n .split-button-toggle:enabled:active,\n :host([open]) .split-button-toggle {\n border-color: ${borderHoverColor};\n box-shadow: none;\n background-image: linear-gradient(${fillSelectedColor}, ${fillSelectedColor});\n background-size: calc(100% - 2px) calc(100% - 2px);\n }\n\n :host([open]) .split-button-toggle {\n border-color: rgba(${fillSelectedRgbPartialColor}, 0.3);\n background-size: 100% 100%;\n }\n\n :host([open]) .split-button-toggle::after {\n visibility: hidden;\n }\n\n :host([appearance='block']) .split-button-primary:enabled:active,\n :host([appearance='block']) .split-button-toggle:enabled:active,\n :host([appearance='block'][open]) .split-button-toggle {\n background-color: ${applicationBackgroundColor};\n }\n\n :host([appearance='outline'][appearance-variant='accent']) .split-button-primary:active,\n :host([appearance='outline'][appearance-variant='accent']) .split-button-toggle:active,\n :host([appearance='outline'][appearance-variant='accent'][open]) .split-button-toggle {\n color: ${buttonAccentOutlineFontColor};\n }\n }\n\n @layer disabled {\n :host([disabled]) {\n --ni-private-ok-fv-split-button-color: ${buttonLabelDisabledFontColor};\n }\n\n :host([disabled][appearance='outline']) {\n --ni-private-ok-fv-split-button-border: rgba(${borderRgbPartialColor}, 0.3);\n }\n\n :host([disabled]) .split-button-primary,\n :host([disabled]) .split-button-toggle {\n cursor: default;\n box-shadow: none;\n }\n\n :host([disabled][appearance='ghost']) .split-button-primary,\n :host([disabled][appearance='ghost']) .split-button-toggle {\n border-color: transparent;\n }\n }\n\n @layer top {}\n`;"]}