@threadlabs/looma 0.14.7 → 0.14.8
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/components/ui-combobox/ui-combobox.html +4 -0
- package/components/ui-combobox/ui-combobox.js +6 -3
- package/dist/index.js +1 -1
- package/package.json +1 -1
- package/vanilla/UiCombobox.d.ts +1 -0
- package/vanilla/UiCombobox.js +1 -1
- package/vue/UiCombobox.d.ts +2 -0
- package/vue/UiCombobox.vue +2 -0
- package/vue/chunks/UiCombobox.js +2 -1
- package/vue/components.css +53 -53
package/vue/components.css
CHANGED
|
@@ -1356,7 +1356,7 @@ input[data-v-bfcc98e1]:focus-visible {
|
|
|
1356
1356
|
syntax: "*";
|
|
1357
1357
|
inherits: false;
|
|
1358
1358
|
}
|
|
1359
|
-
[data-component~="ui-combobox"][data-v-
|
|
1359
|
+
[data-component~="ui-combobox"][data-v-10aa8368] {
|
|
1360
1360
|
/* Hooks do not inherit, so the parts below read them from the root. */
|
|
1361
1361
|
--_ui-combobox-label-text: var(--ui-combobox-label-text);
|
|
1362
1362
|
--_ui-combobox-label-font-size: var(--ui-combobox-label-font-size);
|
|
@@ -1375,20 +1375,20 @@ input[data-v-bfcc98e1]:focus-visible {
|
|
|
1375
1375
|
color: var(--ui-text-primary);
|
|
1376
1376
|
font: inherit;
|
|
1377
1377
|
}
|
|
1378
|
-
label[data-v-
|
|
1378
|
+
label[data-v-10aa8368] {
|
|
1379
1379
|
color: var(--_ui-combobox-label-text, var(--ui-text-primary));
|
|
1380
1380
|
font-size: var(--_ui-combobox-label-font-size, var(--ui-font-size-sm));
|
|
1381
1381
|
font-weight: 500;
|
|
1382
1382
|
}
|
|
1383
1383
|
/* The field and anything that annotates it sit on one row; the help button is beside the box,
|
|
1384
1384
|
not inside it, because a control's box holds its value. */
|
|
1385
|
-
.control[data-v-
|
|
1385
|
+
.control[data-v-10aa8368] {
|
|
1386
1386
|
display: flex;
|
|
1387
1387
|
align-items: center;
|
|
1388
1388
|
gap: var(--ui-space-2);
|
|
1389
1389
|
min-inline-size: 0;
|
|
1390
1390
|
}
|
|
1391
|
-
.field[data-v-
|
|
1391
|
+
.field[data-v-10aa8368] {
|
|
1392
1392
|
flex: 1 1 auto;
|
|
1393
1393
|
display: flex;
|
|
1394
1394
|
min-inline-size: 0;
|
|
@@ -1400,14 +1400,14 @@ label[data-v-57e2c500] {
|
|
|
1400
1400
|
border-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
1401
1401
|
box-shadow var(--ui-motion-fast) var(--ui-motion-ease);
|
|
1402
1402
|
}
|
|
1403
|
-
.field[data-v-
|
|
1403
|
+
.field[data-v-10aa8368]:focus-within {
|
|
1404
1404
|
border-color: var(--ui-control-focus, var(--ui-accent-solid));
|
|
1405
1405
|
box-shadow:
|
|
1406
1406
|
var(--ui-control-inset),
|
|
1407
1407
|
var(--ui-control-focus-halo-shadow);
|
|
1408
1408
|
}
|
|
1409
1409
|
/* A ghost icon button: the affordance is the mark, not a box around it. */
|
|
1410
|
-
.help[data-v-
|
|
1410
|
+
.help[data-v-10aa8368] {
|
|
1411
1411
|
flex: none;
|
|
1412
1412
|
display: inline-flex;
|
|
1413
1413
|
align-items: center;
|
|
@@ -1424,28 +1424,28 @@ label[data-v-57e2c500] {
|
|
|
1424
1424
|
background-color var(--ui-motion-fast) var(--ui-motion-ease),
|
|
1425
1425
|
color var(--ui-motion-fast) var(--ui-motion-ease);
|
|
1426
1426
|
}
|
|
1427
|
-
.help[data-v-
|
|
1428
|
-
.help[aria-expanded="true"][data-v-
|
|
1427
|
+
.help[data-v-10aa8368]:hover:enabled,
|
|
1428
|
+
.help[aria-expanded="true"][data-v-10aa8368] {
|
|
1429
1429
|
background: color-mix(in srgb, currentColor 8%, transparent);
|
|
1430
1430
|
color: var(--ui-text-primary);
|
|
1431
1431
|
}
|
|
1432
|
-
.help[data-v-
|
|
1432
|
+
.help[data-v-10aa8368]:focus-visible {
|
|
1433
1433
|
outline: none;
|
|
1434
1434
|
box-shadow: var(--ui-focus-halo);
|
|
1435
1435
|
}
|
|
1436
|
-
.help[data-v-
|
|
1436
|
+
.help[data-v-10aa8368]:disabled {
|
|
1437
1437
|
color: var(--ui-disabled-text);
|
|
1438
1438
|
cursor: not-allowed;
|
|
1439
1439
|
}
|
|
1440
|
-
.help-icon[data-v-
|
|
1440
|
+
.help-icon[data-v-10aa8368] {
|
|
1441
1441
|
inline-size: var(--ui-icon-size-sm);
|
|
1442
1442
|
block-size: var(--ui-icon-size-sm);
|
|
1443
1443
|
}
|
|
1444
|
-
input[data-v-
|
|
1444
|
+
input[data-v-10aa8368]::selection {
|
|
1445
1445
|
background: color-mix(in srgb, var(--ui-accent-solid) 20%, transparent);
|
|
1446
1446
|
color: inherit;
|
|
1447
1447
|
}
|
|
1448
|
-
input[data-v-
|
|
1448
|
+
input[data-v-10aa8368] {
|
|
1449
1449
|
appearance: none;
|
|
1450
1450
|
width: 100%;
|
|
1451
1451
|
min-inline-size: 0;
|
|
@@ -1461,20 +1461,20 @@ input[data-v-57e2c500] {
|
|
|
1461
1461
|
margin: 0;
|
|
1462
1462
|
outline: none;
|
|
1463
1463
|
}
|
|
1464
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-
|
|
1464
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-10aa8368] {
|
|
1465
1465
|
--_row: var(--ui-control-size-sm);
|
|
1466
1466
|
}
|
|
1467
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-
|
|
1467
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-10aa8368] {
|
|
1468
1468
|
min-block-size: calc(var(--_row) - 2px);
|
|
1469
1469
|
padding: var(--ui-space-1) var(--ui-space-2);
|
|
1470
1470
|
font-size: var(--ui-font-size-sm);
|
|
1471
1471
|
}
|
|
1472
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input[data-v-
|
|
1472
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"] input[data-v-10aa8368] {
|
|
1473
1473
|
min-block-size: calc(var(--ui-control-size-lg) - 2px);
|
|
1474
1474
|
padding: var(--ui-space-3) var(--ui-space-4);
|
|
1475
1475
|
font-size: var(--ui-font-size-md);
|
|
1476
1476
|
}
|
|
1477
|
-
button[data-v-
|
|
1477
|
+
button[data-v-10aa8368] {
|
|
1478
1478
|
appearance: none;
|
|
1479
1479
|
display: inline-grid;
|
|
1480
1480
|
place-items: center;
|
|
@@ -1489,31 +1489,31 @@ button[data-v-57e2c500] {
|
|
|
1489
1489
|
padding: 0 var(--ui-space-1);
|
|
1490
1490
|
cursor: pointer;
|
|
1491
1491
|
}
|
|
1492
|
-
.affordance-icon[data-v-
|
|
1492
|
+
.affordance-icon[data-v-10aa8368] {
|
|
1493
1493
|
display: block;
|
|
1494
1494
|
inline-size: var(--ui-icon-size-sm);
|
|
1495
1495
|
block-size: var(--ui-icon-size-sm);
|
|
1496
1496
|
}
|
|
1497
|
-
button[data-v-
|
|
1497
|
+
button[data-v-10aa8368]:hover:enabled {
|
|
1498
1498
|
background: var(--ui-surface-muted);
|
|
1499
1499
|
color: var(--ui-text-primary);
|
|
1500
1500
|
}
|
|
1501
|
-
button[data-v-
|
|
1501
|
+
button[data-v-10aa8368]:focus-visible {
|
|
1502
1502
|
outline: none;
|
|
1503
1503
|
background: var(--ui-surface-muted);
|
|
1504
1504
|
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--ui-focus-ring) 45%, transparent);
|
|
1505
1505
|
}
|
|
1506
|
-
input[data-v-
|
|
1506
|
+
input[data-v-10aa8368]:disabled, button[data-v-10aa8368]:disabled {
|
|
1507
1507
|
color: var(--ui-disabled-text);
|
|
1508
1508
|
cursor: not-allowed;
|
|
1509
1509
|
}
|
|
1510
|
-
.field[data-v-
|
|
1510
|
+
.field[data-v-10aa8368]:has(input:disabled) {
|
|
1511
1511
|
background: var(--ui-control-surface-disabled, var(--ui-surface-muted));
|
|
1512
1512
|
}
|
|
1513
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-
|
|
1513
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="validationStatus=error"] .field[data-v-10aa8368] {
|
|
1514
1514
|
border-color: var(--ui-danger-solid, var(--ui-accent-active));
|
|
1515
1515
|
}
|
|
1516
|
-
.popup[data-v-
|
|
1516
|
+
.popup[data-v-10aa8368] {
|
|
1517
1517
|
box-sizing: border-box;
|
|
1518
1518
|
min-inline-size: 12rem;
|
|
1519
1519
|
max-inline-size: calc(100vw - 1rem);
|
|
@@ -1527,57 +1527,57 @@ input[data-v-57e2c500]:disabled, button[data-v-57e2c500]:disabled {
|
|
|
1527
1527
|
color: var(--ui-text-primary);
|
|
1528
1528
|
box-shadow: var(--ui-elevation-overlay, var(--ui-shadow-lg));
|
|
1529
1529
|
}
|
|
1530
|
-
[hidden][data-v-
|
|
1530
|
+
[hidden][data-v-10aa8368] {
|
|
1531
1531
|
display: none;
|
|
1532
1532
|
}
|
|
1533
|
-
.option[data-v-
|
|
1533
|
+
.option[data-v-10aa8368] {
|
|
1534
1534
|
padding: var(--ui-space-2) var(--ui-space-3);
|
|
1535
1535
|
border-radius: var(--ui-radius-sm);
|
|
1536
1536
|
cursor: pointer;
|
|
1537
1537
|
overflow-wrap: anywhere;
|
|
1538
1538
|
}
|
|
1539
|
-
.option[data-v-
|
|
1539
|
+
.option[data-v-10aa8368]:hover, .option.active[data-v-10aa8368] {
|
|
1540
1540
|
background: var(--ui-surface-muted);
|
|
1541
1541
|
outline: 1px solid var(--ui-focus-ring);
|
|
1542
1542
|
outline-offset: -1px;
|
|
1543
1543
|
}
|
|
1544
|
-
.option[aria-disabled="true"][data-v-
|
|
1544
|
+
.option[aria-disabled="true"][data-v-10aa8368] {
|
|
1545
1545
|
color: var(--ui-disabled-text);
|
|
1546
1546
|
cursor: not-allowed;
|
|
1547
1547
|
}
|
|
1548
|
-
.primary[data-v-
|
|
1548
|
+
.primary[data-v-10aa8368] {
|
|
1549
1549
|
display: block;
|
|
1550
1550
|
color: var(--_ui-combobox-option-text, var(--ui-text-primary));
|
|
1551
1551
|
font-weight: 500;
|
|
1552
1552
|
}
|
|
1553
1553
|
/* A row with a tag or a description: the label and its tag on one line, the description under them. */
|
|
1554
|
-
.detail[data-v-
|
|
1554
|
+
.detail[data-v-10aa8368] {
|
|
1555
1555
|
display: grid;
|
|
1556
1556
|
gap: var(--ui-space-0-5);
|
|
1557
1557
|
min-inline-size: 0;
|
|
1558
1558
|
}
|
|
1559
|
-
.line[data-v-
|
|
1559
|
+
.line[data-v-10aa8368] {
|
|
1560
1560
|
display: flex;
|
|
1561
1561
|
flex-wrap: wrap;
|
|
1562
1562
|
align-items: center;
|
|
1563
1563
|
gap: var(--ui-space-2);
|
|
1564
1564
|
}
|
|
1565
|
-
.description[data-v-
|
|
1565
|
+
.description[data-v-10aa8368] {
|
|
1566
1566
|
color: var(--ui-text-muted);
|
|
1567
1567
|
font-size: var(--ui-font-size-sm);
|
|
1568
1568
|
line-height: var(--ui-line-height-md);
|
|
1569
1569
|
}
|
|
1570
|
-
.message[data-v-
|
|
1570
|
+
.message[data-v-10aa8368], .group[data-v-10aa8368] {
|
|
1571
1571
|
color: var(--_ui-combobox-message-text, var(--ui-text-secondary));
|
|
1572
1572
|
font-weight: 400;
|
|
1573
1573
|
font-size: var(--ui-font-size-sm);
|
|
1574
1574
|
line-height: var(--ui-line-height-md);
|
|
1575
1575
|
overflow-wrap: anywhere;
|
|
1576
1576
|
}
|
|
1577
|
-
.group[data-v-
|
|
1577
|
+
.group[data-v-10aa8368], .popup .message[data-v-10aa8368] {
|
|
1578
1578
|
padding: var(--ui-space-2) var(--ui-space-3);
|
|
1579
1579
|
}
|
|
1580
|
-
.sr-only[data-v-
|
|
1580
|
+
.sr-only[data-v-10aa8368] {
|
|
1581
1581
|
position: absolute;
|
|
1582
1582
|
inline-size: 1px;
|
|
1583
1583
|
block-size: 1px;
|
|
@@ -1586,24 +1586,24 @@ input[data-v-57e2c500]:disabled, button[data-v-57e2c500]:disabled {
|
|
|
1586
1586
|
white-space: nowrap;
|
|
1587
1587
|
}
|
|
1588
1588
|
@media (pointer: coarse) {
|
|
1589
|
-
button[data-v-
|
|
1589
|
+
button[data-v-10aa8368] {
|
|
1590
1590
|
min-inline-size: 2.75rem;
|
|
1591
1591
|
min-block-size: 2.75rem;
|
|
1592
1592
|
}
|
|
1593
1593
|
/* Under touch a small field is still a touch-sized target, as a small button is, and keeps
|
|
1594
1594
|
body-size text: below 16px, iOS zooms the page into the focused field. */
|
|
1595
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-
|
|
1595
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"][data-v-10aa8368] {
|
|
1596
1596
|
--_row: var(--ui-control-min-block-size);
|
|
1597
1597
|
}
|
|
1598
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-
|
|
1598
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"] input[data-v-10aa8368] {
|
|
1599
1599
|
font-size: inherit;
|
|
1600
1600
|
}
|
|
1601
1601
|
}
|
|
1602
1602
|
@media (forced-colors: active) {
|
|
1603
|
-
.field[data-v-
|
|
1603
|
+
.field[data-v-10aa8368], .popup[data-v-10aa8368] {
|
|
1604
1604
|
border-color: CanvasText;
|
|
1605
1605
|
}
|
|
1606
|
-
.option.active[data-v-
|
|
1606
|
+
.option.active[data-v-10aa8368] {
|
|
1607
1607
|
outline-color: Highlight;
|
|
1608
1608
|
}
|
|
1609
1609
|
}
|
|
@@ -1611,12 +1611,12 @@ button[data-v-57e2c500] {
|
|
|
1611
1611
|
/* Multiple mode: every option carries a checkbox, so a list that takes several answers says so
|
|
1612
1612
|
before anything is picked. aria-selected is the state; this draws it.
|
|
1613
1613
|
Longhands, not shorthands: lowering drops a shorthand that omits a component. */
|
|
1614
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-
|
|
1614
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-10aa8368] {
|
|
1615
1615
|
display: flex;
|
|
1616
1616
|
gap: var(--ui-space-2);
|
|
1617
1617
|
align-items: center;
|
|
1618
1618
|
}
|
|
1619
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-
|
|
1619
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .option[data-v-10aa8368]::before {
|
|
1620
1620
|
content: "";
|
|
1621
1621
|
flex: none;
|
|
1622
1622
|
inline-size: 1.125rem;
|
|
@@ -1631,7 +1631,7 @@ button[data-v-57e2c500] {
|
|
|
1631
1631
|
background-size: 0.7rem;
|
|
1632
1632
|
}
|
|
1633
1633
|
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"]
|
|
1634
|
-
.option[aria-selected="true"][data-v-
|
|
1634
|
+
.option[aria-selected="true"][data-v-10aa8368]::before {
|
|
1635
1635
|
border-color: var(--ui-accent-solid);
|
|
1636
1636
|
background-color: var(--ui-accent-solid);
|
|
1637
1637
|
background-image: var(
|
|
@@ -1641,14 +1641,14 @@ button[data-v-57e2c500] {
|
|
|
1641
1641
|
}
|
|
1642
1642
|
|
|
1643
1643
|
/* Multiple mode: chips wrap before the cursor on one flexible field line. */
|
|
1644
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-
|
|
1644
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] .field[data-v-10aa8368] {
|
|
1645
1645
|
flex-wrap: wrap;
|
|
1646
1646
|
align-items: center;
|
|
1647
1647
|
gap: var(--ui-space-1);
|
|
1648
1648
|
min-block-size: var(--_ui-combobox-item-min-block-size, 2.5rem);
|
|
1649
1649
|
padding: var(--ui-space-1);
|
|
1650
1650
|
}
|
|
1651
|
-
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-
|
|
1651
|
+
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"] input[data-v-10aa8368] {
|
|
1652
1652
|
flex: 1 0 var(--_ui-combobox-item-input-min-inline-size, 5rem);
|
|
1653
1653
|
width: auto;
|
|
1654
1654
|
min-block-size: 1.75rem;
|
|
@@ -1656,25 +1656,25 @@ button[data-v-57e2c500] {
|
|
|
1656
1656
|
}
|
|
1657
1657
|
/* A small multiple field starts at the small control height; chosen items still wrap it taller. */
|
|
1658
1658
|
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
|
|
1659
|
-
.field[data-v-
|
|
1659
|
+
.field[data-v-10aa8368] {
|
|
1660
1660
|
min-block-size: 0;
|
|
1661
1661
|
padding: var(--ui-space-0-5);
|
|
1662
1662
|
}
|
|
1663
1663
|
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=sm"]
|
|
1664
|
-
input[data-v-
|
|
1664
|
+
input[data-v-10aa8368] {
|
|
1665
1665
|
min-block-size: calc(var(--_row) - 2px - 2 * var(--ui-space-0-5));
|
|
1666
1666
|
padding: 0 var(--ui-space-1);
|
|
1667
1667
|
}
|
|
1668
1668
|
/* A large multiple field starts at the large control height, as sm starts at the small one. */
|
|
1669
1669
|
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
|
|
1670
|
-
.field[data-v-
|
|
1670
|
+
.field[data-v-10aa8368] {
|
|
1671
1671
|
min-block-size: 0;
|
|
1672
1672
|
}
|
|
1673
1673
|
[data-component~="ui-combobox"][data-ui-combobox-state~="multiple"][data-component~="ui-combobox"][data-ui-combobox-state~="size=lg"]
|
|
1674
|
-
input[data-v-
|
|
1674
|
+
input[data-v-10aa8368] {
|
|
1675
1675
|
min-block-size: calc(var(--ui-control-size-lg) - 2px - 2 * var(--ui-space-1));
|
|
1676
1676
|
}
|
|
1677
|
-
.item[data-v-
|
|
1677
|
+
.item[data-v-10aa8368] {
|
|
1678
1678
|
appearance: none;
|
|
1679
1679
|
display: inline-flex;
|
|
1680
1680
|
min-inline-size: 0;
|
|
@@ -1688,16 +1688,16 @@ button[data-v-57e2c500] {
|
|
|
1688
1688
|
font: inherit;
|
|
1689
1689
|
cursor: default;
|
|
1690
1690
|
}
|
|
1691
|
-
.item[data-v-
|
|
1691
|
+
.item[data-v-10aa8368]:focus-visible {
|
|
1692
1692
|
outline: 2px solid var(--ui-focus-ring);
|
|
1693
1693
|
outline-offset: 1px;
|
|
1694
1694
|
}
|
|
1695
|
-
.item[data-v-
|
|
1695
|
+
.item[data-v-10aa8368]:disabled {
|
|
1696
1696
|
opacity: 0.6;
|
|
1697
1697
|
}
|
|
1698
1698
|
|
|
1699
1699
|
/* A component that sets its display still honours the hidden attribute on its root. */
|
|
1700
|
-
[data-component~="ui-combobox"][hidden][data-v-
|
|
1700
|
+
[data-component~="ui-combobox"][hidden][data-v-10aa8368] {
|
|
1701
1701
|
display: none;
|
|
1702
1702
|
}
|
|
1703
1703
|
|