@jsenv/navi 0.27.22 → 0.27.23

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 (3) hide show
  1. package/dist/jsenv_navi.js +139 -139
  2. package/dist/jsenv_navi.js.map +3 -3
  3. package/package.json +1 -1
package/dist/jsenv_navi.js CHANGED
@@ -36400,155 +36400,155 @@ installImportMetaCssBuild(import.meta);const css$k = /* css */`
36400
36400
  );
36401
36401
  --picker-icon-color-disabled: var(--picker-icon-color-readonly);
36402
36402
  }
36403
- }
36404
36403
 
36405
- .navi_picker {
36406
- --x-picker-outline-width: calc(
36407
- var(--picker-outline-width) + var(--picker-border-width)
36408
- );
36409
- --x-picker-outline-offset: calc(-1 * var(--picker-border-width));
36410
- --x-picker-background-color: var(--picker-background-color);
36411
- --x-picker-border-color: var(--picker-border-color);
36412
- --x-picker-padding-top: var(
36413
- --picker-padding-top,
36414
- var(
36415
- --picker-padding-y,
36416
- var(--picker-padding, var(--picker-padding-y-default))
36417
- )
36418
- );
36419
- --x-picker-padding-right: var(
36420
- --picker-padding-right,
36421
- var(
36422
- --picker-padding-x,
36423
- var(--picker-padding, var(--picker-padding-x-default))
36424
- )
36425
- );
36426
- --x-picker-padding-left: var(
36427
- --picker-padding-left,
36428
- var(
36429
- --picker-padding-x,
36430
- var(--picker-padding, var(--picker-padding-x-default))
36431
- )
36432
- );
36433
- --x-picker-padding-bottom: var(
36434
- --picker-padding-bottom,
36435
- var(
36436
- --picker-padding-y,
36437
- var(--picker-padding, var(--picker-padding-y-default))
36438
- )
36439
- );
36440
- --x-picker-color: var(--picker-color);
36441
- --x-picker-icon-color: var(--picker-icon-color);
36442
-
36443
- position: relative;
36444
- display: inline-flex;
36445
- box-sizing: border-box;
36446
- max-width: 100%;
36447
- min-height: calc(
36448
- 1lh + var(--x-picker-padding-top) + var(--x-picker-padding-bottom)
36449
- );
36450
- padding-top: var(--x-picker-padding-top);
36451
- padding-right: var(--x-picker-padding-right);
36452
- padding-bottom: var(--x-picker-padding-bottom);
36453
- padding-left: var(--x-picker-padding-left);
36454
- flex-direction: row;
36455
- align-items: center;
36456
- gap: var(--navi-xs);
36457
- color: var(--x-picker-color);
36458
- text-align: inherit;
36459
- text-overflow: ellipsis;
36460
- background-color: var(--x-picker-background-color);
36461
- border-width: var(--picker-border-width);
36462
- border-style: solid;
36463
- border-color: var(--x-picker-border-color);
36464
- border-radius: var(--picker-border-radius);
36465
- outline-width: var(--x-picker-outline-width);
36466
- outline-style: none;
36467
- outline-color: var(--picker-outline-color);
36468
- outline-offset: var(--x-picker-outline-offset);
36469
- cursor: var(--x-picker-cursor, pointer);
36470
- pointer-events: auto;
36471
- user-select: none;
36472
- overflow: hidden;
36404
+ .navi_picker {
36405
+ --x-picker-outline-width: calc(
36406
+ var(--picker-outline-width) + var(--picker-border-width)
36407
+ );
36408
+ --x-picker-outline-offset: calc(-1 * var(--picker-border-width));
36409
+ --x-picker-background-color: var(--picker-background-color);
36410
+ --x-picker-border-color: var(--picker-border-color);
36411
+ --x-picker-padding-top: var(
36412
+ --picker-padding-top,
36413
+ var(
36414
+ --picker-padding-y,
36415
+ var(--picker-padding, var(--picker-padding-y-default))
36416
+ )
36417
+ );
36418
+ --x-picker-padding-right: var(
36419
+ --picker-padding-right,
36420
+ var(
36421
+ --picker-padding-x,
36422
+ var(--picker-padding, var(--picker-padding-x-default))
36423
+ )
36424
+ );
36425
+ --x-picker-padding-left: var(
36426
+ --picker-padding-left,
36427
+ var(
36428
+ --picker-padding-x,
36429
+ var(--picker-padding, var(--picker-padding-x-default))
36430
+ )
36431
+ );
36432
+ --x-picker-padding-bottom: var(
36433
+ --picker-padding-bottom,
36434
+ var(
36435
+ --picker-padding-y,
36436
+ var(--picker-padding, var(--picker-padding-y-default))
36437
+ )
36438
+ );
36439
+ --x-picker-color: var(--picker-color);
36440
+ --x-picker-icon-color: var(--picker-icon-color);
36473
36441
 
36474
- .navi_picker_value {
36475
- display: inline-block;
36476
- min-width: 0;
36442
+ position: relative;
36443
+ display: inline-flex;
36444
+ box-sizing: border-box;
36477
36445
  max-width: 100%;
36478
- flex-grow: 1;
36446
+ min-height: calc(
36447
+ 1lh + var(--x-picker-padding-top) + var(--x-picker-padding-bottom)
36448
+ );
36449
+ padding-top: var(--x-picker-padding-top);
36450
+ padding-right: var(--x-picker-padding-right);
36451
+ padding-bottom: var(--x-picker-padding-bottom);
36452
+ padding-left: var(--x-picker-padding-left);
36453
+ flex-direction: row;
36454
+ align-items: center;
36455
+ gap: var(--navi-xs);
36456
+ color: var(--x-picker-color);
36457
+ text-align: inherit;
36479
36458
  text-overflow: ellipsis;
36480
- white-space: nowrap;
36459
+ background-color: var(--x-picker-background-color);
36460
+ border-width: var(--picker-border-width);
36461
+ border-style: solid;
36462
+ border-color: var(--x-picker-border-color);
36463
+ border-radius: var(--picker-border-radius);
36464
+ outline-width: var(--x-picker-outline-width);
36465
+ outline-style: none;
36466
+ outline-color: var(--picker-outline-color);
36467
+ outline-offset: var(--x-picker-outline-offset);
36468
+ cursor: var(--x-picker-cursor, pointer);
36469
+ pointer-events: auto;
36470
+ user-select: none;
36481
36471
  overflow: hidden;
36482
36472
 
36483
- &[navi-placeholder] {
36484
- color: var(--picker-placeholder-color);
36473
+ .navi_picker_value {
36474
+ display: inline-block;
36475
+ min-width: 0;
36476
+ max-width: 100%;
36477
+ flex-grow: 1;
36478
+ text-overflow: ellipsis;
36479
+ white-space: nowrap;
36480
+ overflow: hidden;
36481
+
36482
+ &[navi-placeholder] {
36483
+ color: var(--picker-placeholder-color);
36484
+ }
36485
+ }
36486
+ .navi_picker_right_slot {
36487
+ display: inline-flex;
36488
+ height: 1em;
36489
+ height: 1lh;
36490
+ flex-shrink: 0;
36491
+ align-items: center;
36492
+ align-self: flex-start;
36493
+ justify-content: center;
36494
+ color: var(--x-picker-icon-color);
36495
+ transform: translateX(25%);
36496
+ }
36497
+ .navi_picker_input {
36498
+ position: absolute;
36499
+ inset: 0;
36500
+ box-sizing: border-box;
36501
+ width: 100%;
36502
+ height: 100%;
36503
+ margin: 0;
36504
+ padding: 0;
36505
+ background: none;
36506
+ border: none;
36507
+ opacity: 0;
36508
+ appearance: none;
36509
+ pointer-events: none;
36485
36510
  }
36486
- }
36487
- .navi_picker_right_slot {
36488
- display: inline-flex;
36489
- height: 1em;
36490
- height: 1lh;
36491
- flex-shrink: 0;
36492
- align-items: center;
36493
- align-self: flex-start;
36494
- justify-content: center;
36495
- color: var(--x-picker-icon-color);
36496
- transform: translateX(25%);
36497
- }
36498
- .navi_picker_input {
36499
- position: absolute;
36500
- inset: 0;
36501
- box-sizing: border-box;
36502
- width: 100%;
36503
- height: 100%;
36504
- margin: 0;
36505
- padding: 0;
36506
- background: none;
36507
- border: none;
36508
- opacity: 0;
36509
- appearance: none;
36510
- pointer-events: none;
36511
- }
36512
36511
 
36513
- &[data-line-clamp] {
36514
- overflow-wrap: anywhere;
36515
- .navi_picker_value {
36516
- display: -webkit-box;
36517
- white-space: normal;
36518
- -webkit-box-orient: vertical;
36519
- -webkit-line-clamp: var(--picker-max-rows);
36512
+ &[data-line-clamp] {
36513
+ overflow-wrap: anywhere;
36514
+ .navi_picker_value {
36515
+ display: -webkit-box;
36516
+ white-space: normal;
36517
+ -webkit-box-orient: vertical;
36518
+ -webkit-line-clamp: var(--picker-max-rows);
36519
+ }
36520
36520
  }
36521
- }
36522
36521
 
36523
- /* Hover */
36524
- &[data-hover] {
36525
- --x-picker-background-color: var(--picker-background-color-hover);
36526
- --x-picker-border-color: var(--picker-border-color-hover);
36527
- }
36528
- /* Readonly */
36529
- &[data-readonly] {
36530
- --x-picker-border-color: var(--picker-border-color-readonly);
36531
- --x-picker-background-color: var(--picker-background-color-readonly);
36532
- --x-picker-color: var(--picker-color-readonly);
36533
- --x-picker-icon-color: var(--picker-icon-color-readonly);
36534
- --x-picker-cursor: default;
36535
- }
36536
- /* Focus */
36537
- &[data-focus-visible] {
36538
- --x-picker-border-color: transparent;
36539
- outline-style: solid;
36540
- }
36541
- /* Disabled */
36542
- &[data-disabled] {
36543
- --x-picker-border-color: var(--picker-border-color-disabled);
36544
- --x-picker-background-color: var(--picker-background-color-disabled);
36545
- --x-picker-color: var(--picker-color-disabled);
36546
- --x-picker-icon-color: var(--picker-icon-color-disabled);
36547
- --x-picker-cursor: default;
36548
- }
36549
- /* Callout (info, warning, error) */
36550
- &[data-callout] {
36551
- --x-picker-border-color: var(--callout-color);
36522
+ /* Hover */
36523
+ &[data-hover] {
36524
+ --x-picker-background-color: var(--picker-background-color-hover);
36525
+ --x-picker-border-color: var(--picker-border-color-hover);
36526
+ }
36527
+ /* Readonly */
36528
+ &[data-readonly] {
36529
+ --x-picker-border-color: var(--picker-border-color-readonly);
36530
+ --x-picker-background-color: var(--picker-background-color-readonly);
36531
+ --x-picker-color: var(--picker-color-readonly);
36532
+ --x-picker-icon-color: var(--picker-icon-color-readonly);
36533
+ --x-picker-cursor: default;
36534
+ }
36535
+ /* Focus */
36536
+ &[data-focus-visible] {
36537
+ --x-picker-border-color: transparent;
36538
+ outline-style: solid;
36539
+ }
36540
+ /* Disabled */
36541
+ &[data-disabled] {
36542
+ --x-picker-border-color: var(--picker-border-color-disabled);
36543
+ --x-picker-background-color: var(--picker-background-color-disabled);
36544
+ --x-picker-color: var(--picker-color-disabled);
36545
+ --x-picker-icon-color: var(--picker-icon-color-disabled);
36546
+ --x-picker-cursor: default;
36547
+ }
36548
+ /* Callout (info, warning, error) */
36549
+ &[data-callout] {
36550
+ --x-picker-border-color: var(--callout-color);
36551
+ }
36552
36552
  }
36553
36553
  }
36554
36554
  `;