@ni/nimble-components 11.14.0 → 11.15.1
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.
- package/dist/all-components-bundle.js +198 -205
- package/dist/all-components-bundle.js.map +1 -1
- package/dist/all-components-bundle.min.js +221 -222
- package/dist/all-components-bundle.min.js.map +1 -1
- package/dist/esm/breadcrumb/styles.js.map +1 -1
- package/dist/esm/button/styles.js +62 -63
- package/dist/esm/button/styles.js.map +1 -1
- package/dist/esm/card-button/styles.js +21 -22
- package/dist/esm/card-button/styles.js.map +1 -1
- package/dist/esm/combobox/styles.js.map +1 -1
- package/dist/esm/dialog/styles.js.map +1 -1
- package/dist/esm/number-field/styles.js.map +1 -1
- package/dist/esm/patterns/button/styles.js +80 -82
- package/dist/esm/patterns/button/styles.js.map +1 -1
- package/dist/esm/patterns/dropdown/styles.js.map +1 -1
- package/dist/esm/radio-group/index.d.ts +2 -2
- package/dist/esm/radio-group/index.js +2 -0
- package/dist/esm/radio-group/index.js.map +1 -1
- package/dist/esm/switch/styles.js.map +1 -1
- package/dist/esm/text-area/styles.js +19 -21
- package/dist/esm/text-area/styles.js.map +1 -1
- package/dist/esm/text-field/styles.js +0 -1
- package/dist/esm/text-field/styles.js.map +1 -1
- package/dist/esm/tooltip/styles.js.map +1 -1
- package/dist/esm/tree-item/styles.js +35 -35
- package/dist/esm/tree-item/styles.js.map +1 -1
- package/package.json +1 -1
|
@@ -16434,164 +16434,161 @@
|
|
|
16434
16434
|
:host([content-hidden]) [part='end'] {
|
|
16435
16435
|
display: none;
|
|
16436
16436
|
}
|
|
16437
|
-
`
|
|
16438
|
-
|
|
16439
|
-
|
|
16440
|
-
|
|
16441
|
-
|
|
16442
|
-
border-color: rgba(${actionRgbPartialColor}, 0.3);
|
|
16443
|
-
}
|
|
16437
|
+
`.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
|
|
16438
|
+
.control {
|
|
16439
|
+
background-color: transparent;
|
|
16440
|
+
border-color: rgba(${actionRgbPartialColor}, 0.3);
|
|
16441
|
+
}
|
|
16444
16442
|
|
|
16445
|
-
|
|
16446
|
-
|
|
16447
|
-
|
|
16448
|
-
|
|
16443
|
+
.control:hover {
|
|
16444
|
+
background-color: transparent;
|
|
16445
|
+
border-color: ${borderHoverColor};
|
|
16446
|
+
}
|
|
16449
16447
|
|
|
16450
|
-
|
|
16451
|
-
|
|
16452
|
-
|
|
16453
|
-
|
|
16448
|
+
.control${focusVisible} {
|
|
16449
|
+
background-color: transparent;
|
|
16450
|
+
border-color: ${borderHoverColor};
|
|
16451
|
+
}
|
|
16454
16452
|
|
|
16455
|
-
|
|
16456
|
-
|
|
16457
|
-
|
|
16458
|
-
|
|
16453
|
+
.control:active {
|
|
16454
|
+
background-color: ${fillSelectedColor};
|
|
16455
|
+
border-color: ${fillSelectedColor};
|
|
16456
|
+
}
|
|
16459
16457
|
|
|
16460
|
-
|
|
16461
|
-
|
|
16462
|
-
|
|
16463
|
-
|
|
16464
|
-
|
|
16465
|
-
|
|
16466
|
-
|
|
16467
|
-
|
|
16468
|
-
|
|
16458
|
+
.control[disabled] {
|
|
16459
|
+
background-color: transparent;
|
|
16460
|
+
border-color: rgba(${borderRgbPartialColor}, 0.2);
|
|
16461
|
+
}
|
|
16462
|
+
`), appearanceBehavior(ButtonAppearance.ghost, css `
|
|
16463
|
+
.control {
|
|
16464
|
+
background-color: transparent;
|
|
16465
|
+
border-color: transparent;
|
|
16466
|
+
}
|
|
16469
16467
|
|
|
16470
|
-
|
|
16471
|
-
|
|
16472
|
-
|
|
16473
|
-
|
|
16468
|
+
.control:hover {
|
|
16469
|
+
background-color: transparent;
|
|
16470
|
+
border-color: ${borderHoverColor};
|
|
16471
|
+
}
|
|
16474
16472
|
|
|
16475
|
-
|
|
16476
|
-
|
|
16477
|
-
|
|
16478
|
-
|
|
16473
|
+
.control${focusVisible} {
|
|
16474
|
+
background-color: transparent;
|
|
16475
|
+
border-color: ${borderHoverColor};
|
|
16476
|
+
}
|
|
16479
16477
|
|
|
16480
|
-
|
|
16481
|
-
|
|
16482
|
-
|
|
16483
|
-
|
|
16478
|
+
.control:active {
|
|
16479
|
+
background-color: ${fillSelectedColor};
|
|
16480
|
+
border-color: ${fillSelectedColor};
|
|
16481
|
+
}
|
|
16484
16482
|
|
|
16485
|
-
|
|
16486
|
-
|
|
16487
|
-
|
|
16488
|
-
|
|
16489
|
-
|
|
16490
|
-
|
|
16491
|
-
|
|
16492
|
-
|
|
16493
|
-
|
|
16483
|
+
.control[disabled] {
|
|
16484
|
+
background-color: transparent;
|
|
16485
|
+
border-color: transparent;
|
|
16486
|
+
}
|
|
16487
|
+
`), appearanceBehavior(ButtonAppearance.block, css `
|
|
16488
|
+
.control {
|
|
16489
|
+
background-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
16490
|
+
border-color: transparent;
|
|
16491
|
+
}
|
|
16494
16492
|
|
|
16495
|
-
|
|
16496
|
-
|
|
16497
|
-
|
|
16498
|
-
|
|
16493
|
+
.control:hover {
|
|
16494
|
+
background-color: transparent;
|
|
16495
|
+
border-color: ${borderHoverColor};
|
|
16496
|
+
}
|
|
16499
16497
|
|
|
16500
|
-
|
|
16501
|
-
|
|
16502
|
-
|
|
16503
|
-
|
|
16498
|
+
.control${focusVisible} {
|
|
16499
|
+
background-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
16500
|
+
border-color: ${borderHoverColor};
|
|
16501
|
+
}
|
|
16504
16502
|
|
|
16505
|
-
|
|
16506
|
-
|
|
16507
|
-
|
|
16503
|
+
.control${focusVisible}:hover {
|
|
16504
|
+
background-color: transparent;
|
|
16505
|
+
}
|
|
16508
16506
|
|
|
16509
|
-
|
|
16510
|
-
|
|
16511
|
-
|
|
16512
|
-
|
|
16507
|
+
.control:active {
|
|
16508
|
+
background-color: ${fillSelectedColor};
|
|
16509
|
+
border-color: ${fillSelectedColor};
|
|
16510
|
+
}
|
|
16513
16511
|
|
|
16514
|
-
|
|
16515
|
-
|
|
16516
|
-
|
|
16517
|
-
|
|
16518
|
-
|
|
16512
|
+
.control[disabled] {
|
|
16513
|
+
background-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
16514
|
+
border-color: transparent;
|
|
16515
|
+
}
|
|
16516
|
+
`));
|
|
16519
16517
|
|
|
16520
|
-
|
|
16521
|
-
|
|
16522
|
-
|
|
16523
|
-
|
|
16524
|
-
|
|
16525
|
-
}
|
|
16518
|
+
const styles$s = styles$t.withBehaviors(appearanceBehavior(ButtonAppearance.outline, css `
|
|
16519
|
+
:host(.primary) .control {
|
|
16520
|
+
box-shadow: 0px 0px 0px ${borderWidth}
|
|
16521
|
+
rgba(${actionRgbPartialColor}, 0.3) inset;
|
|
16522
|
+
}
|
|
16526
16523
|
|
|
16527
|
-
|
|
16528
|
-
|
|
16529
|
-
|
|
16524
|
+
:host(.primary) .control:hover {
|
|
16525
|
+
box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
|
|
16526
|
+
}
|
|
16530
16527
|
|
|
16531
|
-
|
|
16532
|
-
|
|
16533
|
-
|
|
16528
|
+
:host(.primary) .control${focusVisible} {
|
|
16529
|
+
box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
|
|
16530
|
+
}
|
|
16534
16531
|
|
|
16535
|
-
|
|
16536
|
-
|
|
16537
|
-
|
|
16532
|
+
:host(.primary) .control:active {
|
|
16533
|
+
box-shadow: none;
|
|
16534
|
+
}
|
|
16538
16535
|
|
|
16539
|
-
|
|
16540
|
-
|
|
16541
|
-
|
|
16542
|
-
|
|
16543
|
-
|
|
16544
|
-
|
|
16545
|
-
|
|
16546
|
-
|
|
16547
|
-
|
|
16548
|
-
|
|
16536
|
+
:host(.primary) .control[disabled] {
|
|
16537
|
+
box-shadow: none;
|
|
16538
|
+
}
|
|
16539
|
+
`), appearanceBehavior(ButtonAppearance.block, css `
|
|
16540
|
+
:host(.primary) .control {
|
|
16541
|
+
background-clip: padding-box;
|
|
16542
|
+
border-color: rgba(${actionRgbPartialColor}, 0.3);
|
|
16543
|
+
border-width: calc(2 * ${borderWidth});
|
|
16544
|
+
padding: 0 calc(${standardPadding} - ${borderWidth});
|
|
16545
|
+
}
|
|
16549
16546
|
|
|
16550
|
-
|
|
16551
|
-
|
|
16552
|
-
|
|
16547
|
+
:host(.primary[content-hidden]) .control {
|
|
16548
|
+
padding: 0px;
|
|
16549
|
+
}
|
|
16553
16550
|
|
|
16554
|
-
|
|
16555
|
-
|
|
16556
|
-
|
|
16557
|
-
|
|
16551
|
+
:host(.primary) .control:hover {
|
|
16552
|
+
border-color: ${borderHoverColor};
|
|
16553
|
+
box-shadow: none;
|
|
16554
|
+
}
|
|
16558
16555
|
|
|
16559
|
-
|
|
16560
|
-
|
|
16561
|
-
|
|
16562
|
-
|
|
16563
|
-
|
|
16564
|
-
|
|
16565
|
-
|
|
16556
|
+
:host(.primary) .control${focusVisible} {
|
|
16557
|
+
background-clip: border-box;
|
|
16558
|
+
border-color: ${borderHoverColor};
|
|
16559
|
+
border-width: ${borderWidth};
|
|
16560
|
+
box-shadow: 0px 0px 0px ${borderWidth} ${borderHoverColor} inset;
|
|
16561
|
+
padding: 0 ${standardPadding};
|
|
16562
|
+
}
|
|
16566
16563
|
|
|
16567
|
-
|
|
16568
|
-
|
|
16569
|
-
|
|
16564
|
+
:host(.primary[content-hidden]) .control${focusVisible} {
|
|
16565
|
+
padding: 0px;
|
|
16566
|
+
}
|
|
16570
16567
|
|
|
16571
|
-
|
|
16572
|
-
|
|
16573
|
-
|
|
16574
|
-
|
|
16575
|
-
|
|
16576
|
-
|
|
16577
|
-
|
|
16568
|
+
:host(.primary) .control:active {
|
|
16569
|
+
background-clip: border-box;
|
|
16570
|
+
border-color: ${fillSelectedColor};
|
|
16571
|
+
border-width: ${borderWidth};
|
|
16572
|
+
box-shadow: none;
|
|
16573
|
+
padding: 0 ${standardPadding};
|
|
16574
|
+
}
|
|
16578
16575
|
|
|
16579
|
-
|
|
16580
|
-
|
|
16581
|
-
|
|
16576
|
+
:host(.primary[content-hidden]) .control:active {
|
|
16577
|
+
padding: 0px;
|
|
16578
|
+
}
|
|
16582
16579
|
|
|
16583
|
-
|
|
16584
|
-
|
|
16585
|
-
|
|
16586
|
-
|
|
16587
|
-
|
|
16588
|
-
|
|
16589
|
-
|
|
16580
|
+
:host(.primary) .control[disabled] {
|
|
16581
|
+
background-clip: border-box;
|
|
16582
|
+
border-color: transparent;
|
|
16583
|
+
border-width: ${borderWidth};
|
|
16584
|
+
box-shadow: none;
|
|
16585
|
+
padding: 0 ${standardPadding};
|
|
16586
|
+
}
|
|
16590
16587
|
|
|
16591
|
-
|
|
16592
|
-
|
|
16593
|
-
|
|
16594
|
-
|
|
16588
|
+
:host(.primary[content-hidden]) .control[disabled] {
|
|
16589
|
+
padding: 0px;
|
|
16590
|
+
}
|
|
16591
|
+
`));
|
|
16595
16592
|
|
|
16596
16593
|
/**
|
|
16597
16594
|
* A nimble-styled HTML button
|
|
@@ -16639,7 +16636,6 @@
|
|
|
16639
16636
|
});
|
|
16640
16637
|
DesignSystem.getOrCreate().withPrefix('nimble').register(nimbleButton());
|
|
16641
16638
|
|
|
16642
|
-
// prettier-ignore
|
|
16643
16639
|
const styles$r = css `
|
|
16644
16640
|
${display('inline-flex')}
|
|
16645
16641
|
|
|
@@ -16748,27 +16744,27 @@
|
|
|
16748
16744
|
display: none;
|
|
16749
16745
|
}
|
|
16750
16746
|
`.withBehaviors(themeBehavior(Theme.light, css `
|
|
16751
|
-
|
|
16752
|
-
|
|
16753
|
-
|
|
16754
|
-
|
|
16755
|
-
|
|
16756
|
-
|
|
16757
|
-
|
|
16758
|
-
|
|
16759
|
-
|
|
16760
|
-
|
|
16761
|
-
|
|
16762
|
-
|
|
16763
|
-
|
|
16764
|
-
|
|
16765
|
-
|
|
16766
|
-
|
|
16767
|
-
|
|
16768
|
-
|
|
16769
|
-
|
|
16770
|
-
|
|
16771
|
-
|
|
16747
|
+
:host {
|
|
16748
|
+
--ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(White, 0.3)};
|
|
16749
|
+
--ni-private-card-button-background-active-color: ${White};
|
|
16750
|
+
--ni-private-card-button-border-active-color: ${hexToRgbaCssColor(Black91, 0.2)};
|
|
16751
|
+
--ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(Black91, 0.6)};
|
|
16752
|
+
}
|
|
16753
|
+
`), themeBehavior(Theme.dark, css `
|
|
16754
|
+
:host {
|
|
16755
|
+
--ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(Black15, 0.07)};
|
|
16756
|
+
--ni-private-card-button-background-active-color: ${hexToRgbaCssColor(Black15, 0.15)};
|
|
16757
|
+
--ni-private-card-button-border-active-color: ${hexToRgbaCssColor(Black15, 0.2)};
|
|
16758
|
+
--ni-private-card-button-border-selected-color: ${Black15};
|
|
16759
|
+
}
|
|
16760
|
+
`), themeBehavior(Theme.color, css `
|
|
16761
|
+
:host {
|
|
16762
|
+
--ni-private-card-button-background-hover-color: ${hexToRgbaCssColor(White, 0.07)};
|
|
16763
|
+
--ni-private-card-button-background-active-color: ${hexToRgbaCssColor(White, 0.15)};
|
|
16764
|
+
--ni-private-card-button-border-active-color: ${hexToRgbaCssColor(White, 0.2)};
|
|
16765
|
+
--ni-private-card-button-border-selected-color: ${hexToRgbaCssColor(White, 0.6)};
|
|
16766
|
+
}
|
|
16767
|
+
`));
|
|
16772
16768
|
|
|
16773
16769
|
/**
|
|
16774
16770
|
* A nimble-styled card button
|
|
@@ -22258,27 +22254,25 @@
|
|
|
22258
22254
|
:host([resize='vertical']) .control {
|
|
22259
22255
|
resize: vertical;
|
|
22260
22256
|
}
|
|
22261
|
-
`
|
|
22262
|
-
|
|
22263
|
-
|
|
22264
|
-
|
|
22265
|
-
|
|
22266
|
-
|
|
22267
|
-
|
|
22268
|
-
|
|
22269
|
-
|
|
22270
|
-
background-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
22271
|
-
}
|
|
22257
|
+
`.withBehaviors(appearanceBehavior(TextAreaAppearance.outline, css `
|
|
22258
|
+
.control {
|
|
22259
|
+
border-color: rgba(${borderRgbPartialColor}, 0.3);
|
|
22260
|
+
background-color: transparent;
|
|
22261
|
+
}
|
|
22262
|
+
`), appearanceBehavior(TextAreaAppearance.block, css `
|
|
22263
|
+
.control {
|
|
22264
|
+
background-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
22265
|
+
}
|
|
22272
22266
|
|
|
22273
|
-
|
|
22274
|
-
|
|
22275
|
-
|
|
22267
|
+
:host([readonly]) .control {
|
|
22268
|
+
background-color: transparent;
|
|
22269
|
+
}
|
|
22276
22270
|
|
|
22277
|
-
|
|
22278
|
-
|
|
22279
|
-
|
|
22280
|
-
|
|
22281
|
-
|
|
22271
|
+
:host([disabled]) .control {
|
|
22272
|
+
border-color: transparent;
|
|
22273
|
+
background-color: rgba(${borderRgbPartialColor}, 0.1);
|
|
22274
|
+
}
|
|
22275
|
+
`));
|
|
22282
22276
|
|
|
22283
22277
|
/**
|
|
22284
22278
|
* A nimble-styed HTML text area
|
|
@@ -22320,7 +22314,6 @@
|
|
|
22320
22314
|
frameless: 'frameless'
|
|
22321
22315
|
};
|
|
22322
22316
|
|
|
22323
|
-
/* eslint-disable @typescript-eslint/indent */
|
|
22324
22317
|
const styles$4 = css `
|
|
22325
22318
|
${display('inline-block')}
|
|
22326
22319
|
${styles$n}
|
|
@@ -23012,41 +23005,41 @@
|
|
|
23012
23005
|
:host([expanded]) .items {
|
|
23013
23006
|
display: block;
|
|
23014
23007
|
}
|
|
23015
|
-
|
|
23016
|
-
|
|
23017
|
-
|
|
23018
|
-
|
|
23019
|
-
|
|
23020
|
-
|
|
23021
|
-
|
|
23022
|
-
|
|
23023
|
-
|
|
23024
|
-
}
|
|
23008
|
+
`.withBehaviors(new DirectionalStyleSheetBehavior(
|
|
23009
|
+
// ltr styles
|
|
23010
|
+
css `
|
|
23011
|
+
.expand-collapse-button {
|
|
23012
|
+
left: var(
|
|
23013
|
+
--ni-private-expand-collapse-button-nested-width,
|
|
23014
|
+
calc(${iconSize} * -1)
|
|
23015
|
+
);
|
|
23016
|
+
}
|
|
23025
23017
|
|
|
23026
|
-
|
|
23027
|
-
|
|
23028
|
-
|
|
23018
|
+
.expand-collapse-button svg {
|
|
23019
|
+
transform: rotate(90deg);
|
|
23020
|
+
}
|
|
23029
23021
|
|
|
23030
|
-
|
|
23031
|
-
|
|
23032
|
-
|
|
23033
|
-
|
|
23034
|
-
|
|
23035
|
-
|
|
23036
|
-
|
|
23037
|
-
|
|
23038
|
-
|
|
23039
|
-
)
|
|
23040
|
-
|
|
23022
|
+
:host([expanded]) .expand-collapse-button svg {
|
|
23023
|
+
transform: rotate(180deg);
|
|
23024
|
+
}
|
|
23025
|
+
`,
|
|
23026
|
+
// rtl styles
|
|
23027
|
+
css `
|
|
23028
|
+
.expand-collapse-button {
|
|
23029
|
+
right: var(
|
|
23030
|
+
--ni-private-expand-collapse-button-nested-width,
|
|
23031
|
+
calc(${iconSize} * -1)
|
|
23032
|
+
);
|
|
23033
|
+
}
|
|
23041
23034
|
|
|
23042
|
-
|
|
23043
|
-
|
|
23044
|
-
|
|
23035
|
+
.expand-collapse-button svg {
|
|
23036
|
+
transform: rotate(180deg);
|
|
23037
|
+
}
|
|
23045
23038
|
|
|
23046
|
-
|
|
23047
|
-
|
|
23048
|
-
|
|
23049
|
-
|
|
23039
|
+
:host([expanded]) .expand-collapse-button svg {
|
|
23040
|
+
transform: rotate(135deg);
|
|
23041
|
+
}
|
|
23042
|
+
`));
|
|
23050
23043
|
|
|
23051
23044
|
/**
|
|
23052
23045
|
* A function that returns a nimble-tree-item registration for configuring the component with a DesignSystem.
|