@emuanalytics/flow-rdf-ui 4.1.24 → 4.1.25

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 (9) hide show
  1. package/dist/components/panel/panel.component.mjs +2 -1
  2. package/dist/custom-elements.json +926 -926
  3. package/dist/package.json.mjs +1 -1
  4. package/dist/vscode.html-custom-data.json +116 -116
  5. package/package.json +1 -1
  6. package/themes/dark.css +4 -2
  7. package/themes/dark.styles.js +4 -2
  8. package/themes/light.css +4 -2
  9. package/themes/light.styles.js +4 -2
package/dist/custom-elements.json CHANGED
@@ -668,191 +668,6 @@
668
668
  }
669
669
  ]
670
670
  },
671
- {
672
- "kind": "javascript-module",
673
- "path": "components/avatar/avatar.component.js",
674
- "declarations": [
675
- {
676
- "kind": "class",
677
- "description": "",
678
- "name": "FlowUiAvatar",
679
- "cssProperties": [
680
- {
681
- "description": "The size of the avatar.",
682
- "name": "--size"
683
- }
684
- ],
685
- "cssParts": [
686
- {
687
- "description": "The component's base wrapper.",
688
- "name": "base"
689
- },
690
- {
691
- "description": "The container that wraps the avatar's icon.",
692
- "name": "icon"
693
- },
694
- {
695
- "description": "The container that wraps the avatar's initials.",
696
- "name": "initials"
697
- },
698
- {
699
- "description": "The avatar image. Only shown when the `image` attribute is set.",
700
- "name": "image"
701
- }
702
- ],
703
- "slots": [
704
- {
705
- "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
706
- "name": "icon"
707
- }
708
- ],
709
- "members": [
710
- {
711
- "kind": "field",
712
- "name": "hasError",
713
- "type": {
714
- "text": "boolean"
715
- },
716
- "privacy": "private",
717
- "default": "false"
718
- },
719
- {
720
- "kind": "field",
721
- "name": "image",
722
- "type": {
723
- "text": "string"
724
- },
725
- "default": "''",
726
- "description": "The image source to use for the avatar.",
727
- "attribute": "image"
728
- },
729
- {
730
- "kind": "field",
731
- "name": "label",
732
- "type": {
733
- "text": "string"
734
- },
735
- "default": "''",
736
- "description": "A label to use to describe the avatar to assistive devices.",
737
- "attribute": "label"
738
- },
739
- {
740
- "kind": "field",
741
- "name": "initials",
742
- "type": {
743
- "text": "string"
744
- },
745
- "default": "''",
746
- "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
747
- "attribute": "initials"
748
- },
749
- {
750
- "kind": "field",
751
- "name": "loading",
752
- "type": {
753
- "text": "'eager' | 'lazy'"
754
- },
755
- "default": "'eager'",
756
- "description": "Indicates how the browser should load the image.",
757
- "attribute": "loading"
758
- },
759
- {
760
- "kind": "field",
761
- "name": "shape",
762
- "type": {
763
- "text": "'circle' | 'square' | 'rounded'"
764
- },
765
- "default": "'circle'",
766
- "description": "The shape of the avatar.",
767
- "attribute": "shape",
768
- "reflects": true
769
- }
770
- ],
771
- "attributes": [
772
- {
773
- "name": "image",
774
- "type": {
775
- "text": "string"
776
- },
777
- "default": "''",
778
- "description": "The image source to use for the avatar.",
779
- "fieldName": "image"
780
- },
781
- {
782
- "name": "label",
783
- "type": {
784
- "text": "string"
785
- },
786
- "default": "''",
787
- "description": "A label to use to describe the avatar to assistive devices.",
788
- "fieldName": "label"
789
- },
790
- {
791
- "name": "initials",
792
- "type": {
793
- "text": "string"
794
- },
795
- "default": "''",
796
- "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
797
- "fieldName": "initials"
798
- },
799
- {
800
- "name": "loading",
801
- "type": {
802
- "text": "'eager' | 'lazy'"
803
- },
804
- "default": "'eager'",
805
- "description": "Indicates how the browser should load the image.",
806
- "fieldName": "loading"
807
- },
808
- {
809
- "name": "shape",
810
- "type": {
811
- "text": "'circle' | 'square' | 'rounded'"
812
- },
813
- "default": "'circle'",
814
- "description": "The shape of the avatar.",
815
- "fieldName": "shape"
816
- }
817
- ],
818
- "superclass": {
819
- "name": "FlowRdfElement",
820
- "module": "/src/internal/flow-ui-rdf-element"
821
- },
822
- "tagName": "flow-ui-avatar",
823
- "summary": "Avatars are used to represent a person or object.",
824
- "dependencies": [
825
- "flow-ui-icon"
826
- ],
827
- "customElement": true
828
- }
829
- ],
830
- "exports": [
831
- {
832
- "kind": "js",
833
- "name": "default",
834
- "declaration": {
835
- "name": "FlowUiAvatar",
836
- "module": "components/avatar/avatar.component.js"
837
- }
838
- }
839
- ]
840
- },
841
- {
842
- "kind": "javascript-module",
843
- "path": "components/avatar/avatar.js",
844
- "declarations": [],
845
- "exports": [
846
- {
847
- "kind": "js",
848
- "name": "default",
849
- "declaration": {
850
- "name": "FlowUiAvatar",
851
- "module": "components/avatar/avatar.js"
852
- }
853
- }
854
- ]
855
- },
856
671
  {
857
672
  "kind": "javascript-module",
858
673
  "path": "components/autocomplete/autocomplete.component.js",
@@ -1604,114 +1419,160 @@
1604
1419
  },
1605
1420
  {
1606
1421
  "kind": "javascript-module",
1607
- "path": "components/badge/badge.component.js",
1422
+ "path": "components/avatar/avatar.component.js",
1608
1423
  "declarations": [
1609
1424
  {
1610
1425
  "kind": "class",
1611
1426
  "description": "",
1612
- "name": "FlowUiBadge",
1427
+ "name": "FlowUiAvatar",
1428
+ "cssProperties": [
1429
+ {
1430
+ "description": "The size of the avatar.",
1431
+ "name": "--size"
1432
+ }
1433
+ ],
1613
1434
  "cssParts": [
1614
1435
  {
1615
1436
  "description": "The component's base wrapper.",
1616
1437
  "name": "base"
1438
+ },
1439
+ {
1440
+ "description": "The container that wraps the avatar's icon.",
1441
+ "name": "icon"
1442
+ },
1443
+ {
1444
+ "description": "The container that wraps the avatar's initials.",
1445
+ "name": "initials"
1446
+ },
1447
+ {
1448
+ "description": "The avatar image. Only shown when the `image` attribute is set.",
1449
+ "name": "image"
1617
1450
  }
1618
1451
  ],
1619
1452
  "slots": [
1620
1453
  {
1621
- "description": "The badge's content.",
1622
- "name": ""
1454
+ "description": "The default icon to use when no image or initials are present. Works best with `<flow-ui-icon>`.",
1455
+ "name": "icon"
1623
1456
  }
1624
1457
  ],
1625
1458
  "members": [
1626
1459
  {
1627
1460
  "kind": "field",
1628
- "name": "variant",
1461
+ "name": "hasError",
1629
1462
  "type": {
1630
- "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
1463
+ "text": "boolean"
1631
1464
  },
1632
- "default": "'primary'",
1633
- "description": "The badge's theme variant.",
1634
- "attribute": "variant",
1635
- "reflects": true
1465
+ "privacy": "private",
1466
+ "default": "false"
1636
1467
  },
1637
1468
  {
1638
1469
  "kind": "field",
1639
- "name": "size",
1470
+ "name": "image",
1640
1471
  "type": {
1641
- "text": "'small' | 'medium' | 'large'"
1472
+ "text": "string"
1642
1473
  },
1643
- "default": "'medium'",
1644
- "description": "The badge size.",
1645
- "attribute": "size",
1646
- "reflects": true
1474
+ "default": "''",
1475
+ "description": "The image source to use for the avatar.",
1476
+ "attribute": "image"
1647
1477
  },
1648
1478
  {
1649
1479
  "kind": "field",
1650
- "name": "pill",
1480
+ "name": "label",
1651
1481
  "type": {
1652
- "text": "boolean"
1482
+ "text": "string"
1653
1483
  },
1654
- "default": "false",
1655
- "description": "Draws a pill-style badge with rounded edges.",
1656
- "attribute": "pill",
1657
- "reflects": true
1484
+ "default": "''",
1485
+ "description": "A label to use to describe the avatar to assistive devices.",
1486
+ "attribute": "label"
1658
1487
  },
1659
1488
  {
1660
1489
  "kind": "field",
1661
- "name": "pulse",
1490
+ "name": "initials",
1662
1491
  "type": {
1663
- "text": "boolean"
1492
+ "text": "string"
1664
1493
  },
1665
- "default": "false",
1666
- "description": "Makes the badge pulsate to draw attention.",
1667
- "attribute": "pulse",
1668
- "reflects": true
1669
- }
1670
- ],
1671
- "attributes": [
1672
- {
1673
- "name": "variant",
1494
+ "default": "''",
1495
+ "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
1496
+ "attribute": "initials"
1497
+ },
1498
+ {
1499
+ "kind": "field",
1500
+ "name": "loading",
1674
1501
  "type": {
1675
- "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
1502
+ "text": "'eager' | 'lazy'"
1676
1503
  },
1677
- "default": "'primary'",
1678
- "description": "The badge's theme variant.",
1679
- "fieldName": "variant"
1504
+ "default": "'eager'",
1505
+ "description": "Indicates how the browser should load the image.",
1506
+ "attribute": "loading"
1680
1507
  },
1681
1508
  {
1682
- "name": "size",
1509
+ "kind": "field",
1510
+ "name": "shape",
1683
1511
  "type": {
1684
- "text": "'small' | 'medium' | 'large'"
1512
+ "text": "'circle' | 'square' | 'rounded'"
1685
1513
  },
1686
- "default": "'medium'",
1687
- "description": "The badge size.",
1688
- "fieldName": "size"
1514
+ "default": "'circle'",
1515
+ "description": "The shape of the avatar.",
1516
+ "attribute": "shape",
1517
+ "reflects": true
1518
+ }
1519
+ ],
1520
+ "attributes": [
1521
+ {
1522
+ "name": "image",
1523
+ "type": {
1524
+ "text": "string"
1525
+ },
1526
+ "default": "''",
1527
+ "description": "The image source to use for the avatar.",
1528
+ "fieldName": "image"
1689
1529
  },
1690
1530
  {
1691
- "name": "pill",
1531
+ "name": "label",
1692
1532
  "type": {
1693
- "text": "boolean"
1533
+ "text": "string"
1694
1534
  },
1695
- "default": "false",
1696
- "description": "Draws a pill-style badge with rounded edges.",
1697
- "fieldName": "pill"
1535
+ "default": "''",
1536
+ "description": "A label to use to describe the avatar to assistive devices.",
1537
+ "fieldName": "label"
1698
1538
  },
1699
1539
  {
1700
- "name": "pulse",
1540
+ "name": "initials",
1701
1541
  "type": {
1702
- "text": "boolean"
1542
+ "text": "string"
1703
1543
  },
1704
- "default": "false",
1705
- "description": "Makes the badge pulsate to draw attention.",
1706
- "fieldName": "pulse"
1544
+ "default": "''",
1545
+ "description": "Initials to use as a fallback when no image is available (1-2 characters max recommended).",
1546
+ "fieldName": "initials"
1547
+ },
1548
+ {
1549
+ "name": "loading",
1550
+ "type": {
1551
+ "text": "'eager' | 'lazy'"
1552
+ },
1553
+ "default": "'eager'",
1554
+ "description": "Indicates how the browser should load the image.",
1555
+ "fieldName": "loading"
1556
+ },
1557
+ {
1558
+ "name": "shape",
1559
+ "type": {
1560
+ "text": "'circle' | 'square' | 'rounded'"
1561
+ },
1562
+ "default": "'circle'",
1563
+ "description": "The shape of the avatar.",
1564
+ "fieldName": "shape"
1707
1565
  }
1708
1566
  ],
1709
1567
  "superclass": {
1710
1568
  "name": "FlowRdfElement",
1711
1569
  "module": "/src/internal/flow-ui-rdf-element"
1712
1570
  },
1713
- "tagName": "flow-ui-badge",
1714
- "summary": "Badges are used to draw attention and display statuses or counts.",
1571
+ "tagName": "flow-ui-avatar",
1572
+ "summary": "Avatars are used to represent a person or object.",
1573
+ "dependencies": [
1574
+ "flow-ui-icon"
1575
+ ],
1715
1576
  "customElement": true
1716
1577
  }
1717
1578
  ],
@@ -1720,23 +1581,23 @@
1720
1581
  "kind": "js",
1721
1582
  "name": "default",
1722
1583
  "declaration": {
1723
- "name": "FlowUiBadge",
1724
- "module": "components/badge/badge.component.js"
1584
+ "name": "FlowUiAvatar",
1585
+ "module": "components/avatar/avatar.component.js"
1725
1586
  }
1726
1587
  }
1727
1588
  ]
1728
1589
  },
1729
1590
  {
1730
1591
  "kind": "javascript-module",
1731
- "path": "components/badge/badge.js",
1592
+ "path": "components/avatar/avatar.js",
1732
1593
  "declarations": [],
1733
1594
  "exports": [
1734
1595
  {
1735
1596
  "kind": "js",
1736
1597
  "name": "default",
1737
1598
  "declaration": {
1738
- "name": "FlowUiBadge",
1739
- "module": "components/badge/badge.js"
1599
+ "name": "FlowUiAvatar",
1600
+ "module": "components/avatar/avatar.js"
1740
1601
  }
1741
1602
  }
1742
1603
  ]
@@ -2472,6 +2333,145 @@
2472
2333
  }
2473
2334
  ]
2474
2335
  },
2336
+ {
2337
+ "kind": "javascript-module",
2338
+ "path": "components/badge/badge.component.js",
2339
+ "declarations": [
2340
+ {
2341
+ "kind": "class",
2342
+ "description": "",
2343
+ "name": "FlowUiBadge",
2344
+ "cssParts": [
2345
+ {
2346
+ "description": "The component's base wrapper.",
2347
+ "name": "base"
2348
+ }
2349
+ ],
2350
+ "slots": [
2351
+ {
2352
+ "description": "The badge's content.",
2353
+ "name": ""
2354
+ }
2355
+ ],
2356
+ "members": [
2357
+ {
2358
+ "kind": "field",
2359
+ "name": "variant",
2360
+ "type": {
2361
+ "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
2362
+ },
2363
+ "default": "'primary'",
2364
+ "description": "The badge's theme variant.",
2365
+ "attribute": "variant",
2366
+ "reflects": true
2367
+ },
2368
+ {
2369
+ "kind": "field",
2370
+ "name": "size",
2371
+ "type": {
2372
+ "text": "'small' | 'medium' | 'large'"
2373
+ },
2374
+ "default": "'medium'",
2375
+ "description": "The badge size.",
2376
+ "attribute": "size",
2377
+ "reflects": true
2378
+ },
2379
+ {
2380
+ "kind": "field",
2381
+ "name": "pill",
2382
+ "type": {
2383
+ "text": "boolean"
2384
+ },
2385
+ "default": "false",
2386
+ "description": "Draws a pill-style badge with rounded edges.",
2387
+ "attribute": "pill",
2388
+ "reflects": true
2389
+ },
2390
+ {
2391
+ "kind": "field",
2392
+ "name": "pulse",
2393
+ "type": {
2394
+ "text": "boolean"
2395
+ },
2396
+ "default": "false",
2397
+ "description": "Makes the badge pulsate to draw attention.",
2398
+ "attribute": "pulse",
2399
+ "reflects": true
2400
+ }
2401
+ ],
2402
+ "attributes": [
2403
+ {
2404
+ "name": "variant",
2405
+ "type": {
2406
+ "text": "'primary' | 'secondary' | 'success' | 'neutral' | 'warning' | 'danger'"
2407
+ },
2408
+ "default": "'primary'",
2409
+ "description": "The badge's theme variant.",
2410
+ "fieldName": "variant"
2411
+ },
2412
+ {
2413
+ "name": "size",
2414
+ "type": {
2415
+ "text": "'small' | 'medium' | 'large'"
2416
+ },
2417
+ "default": "'medium'",
2418
+ "description": "The badge size.",
2419
+ "fieldName": "size"
2420
+ },
2421
+ {
2422
+ "name": "pill",
2423
+ "type": {
2424
+ "text": "boolean"
2425
+ },
2426
+ "default": "false",
2427
+ "description": "Draws a pill-style badge with rounded edges.",
2428
+ "fieldName": "pill"
2429
+ },
2430
+ {
2431
+ "name": "pulse",
2432
+ "type": {
2433
+ "text": "boolean"
2434
+ },
2435
+ "default": "false",
2436
+ "description": "Makes the badge pulsate to draw attention.",
2437
+ "fieldName": "pulse"
2438
+ }
2439
+ ],
2440
+ "superclass": {
2441
+ "name": "FlowRdfElement",
2442
+ "module": "/src/internal/flow-ui-rdf-element"
2443
+ },
2444
+ "tagName": "flow-ui-badge",
2445
+ "summary": "Badges are used to draw attention and display statuses or counts.",
2446
+ "customElement": true
2447
+ }
2448
+ ],
2449
+ "exports": [
2450
+ {
2451
+ "kind": "js",
2452
+ "name": "default",
2453
+ "declaration": {
2454
+ "name": "FlowUiBadge",
2455
+ "module": "components/badge/badge.component.js"
2456
+ }
2457
+ }
2458
+ ]
2459
+ },
2460
+ {
2461
+ "kind": "javascript-module",
2462
+ "path": "components/badge/badge.js",
2463
+ "declarations": [],
2464
+ "exports": [
2465
+ {
2466
+ "kind": "js",
2467
+ "name": "default",
2468
+ "declaration": {
2469
+ "name": "FlowUiBadge",
2470
+ "module": "components/badge/badge.js"
2471
+ }
2472
+ }
2473
+ ]
2474
+ },
2475
2475
  {
2476
2476
  "kind": "javascript-module",
2477
2477
  "path": "components/busy-overlay/busy-overlay.component.js",
@@ -20608,210 +20608,167 @@
20608
20608
  },
20609
20609
  {
20610
20610
  "kind": "javascript-module",
20611
- "path": "components/switch/switch.component.js",
20611
+ "path": "components/tab/tab.component.js",
20612
20612
  "declarations": [
20613
20613
  {
20614
20614
  "kind": "class",
20615
20615
  "description": "",
20616
- "name": "FlowUiSwitch",
20617
- "cssProperties": [
20618
- {
20619
- "description": "The width of the switch.",
20620
- "name": "--width"
20621
- },
20622
- {
20623
- "description": "The height of the switch.",
20624
- "name": "--height"
20625
- },
20626
- {
20627
- "description": "The size of the thumb.",
20628
- "name": "--thumb-size"
20629
- }
20630
- ],
20616
+ "name": "FlowUiTab",
20631
20617
  "cssParts": [
20632
20618
  {
20633
20619
  "description": "The component's base wrapper.",
20634
20620
  "name": "base"
20635
20621
  },
20636
20622
  {
20637
- "description": "The control that houses the switch's thumb.",
20638
- "name": "control"
20623
+ "description": "The close button, an `<flow-ui-icon-button>`.",
20624
+ "name": "close-button"
20639
20625
  },
20640
20626
  {
20641
- "description": "The switch's thumb.",
20642
- "name": "thumb"
20643
- },
20644
- {
20645
- "description": "The switch's label.",
20646
- "name": "label"
20627
+ "description": "The close button's exported `base` part.",
20628
+ "name": "close-button__base"
20647
20629
  }
20648
20630
  ],
20649
20631
  "slots": [
20650
20632
  {
20651
- "description": "The switch's label.",
20633
+ "description": "The tab's label.",
20652
20634
  "name": ""
20653
20635
  }
20654
20636
  ],
20655
20637
  "members": [
20656
20638
  {
20657
20639
  "kind": "field",
20658
- "name": "formControlController",
20640
+ "name": "localize",
20659
20641
  "privacy": "private",
20660
20642
  "readonly": true,
20661
- "default": "new FormControlController(this, {\n value: (control: FlowUiSwitch) => (control.checked ? control.value || 'on' : undefined),\n defaultValue: (control: FlowUiSwitch) => control.defaultChecked,\n setValue: (control: FlowUiSwitch, checked: boolean) => (control.checked = checked)\n })"
20643
+ "default": "new LocalizeController(this)"
20662
20644
  },
20663
20645
  {
20664
20646
  "kind": "field",
20665
20647
  "name": "hasSlotController",
20666
20648
  "privacy": "private",
20667
20649
  "readonly": true,
20668
- "default": "new HasSlotController(this, 'help-text', '[default]')"
20650
+ "default": "new HasSlotController(this, '[default]', 'icon')"
20669
20651
  },
20670
20652
  {
20671
20653
  "kind": "field",
20672
- "name": "input",
20654
+ "name": "attrId",
20673
20655
  "type": {
20674
- "text": "HTMLInputElement"
20656
+ "text": "number"
20675
20657
  },
20676
- "privacy": "private"
20658
+ "privacy": "private",
20659
+ "readonly": true,
20660
+ "default": "++id"
20677
20661
  },
20678
20662
  {
20679
20663
  "kind": "field",
20680
- "name": "hasFocus",
20681
- "type": {
20682
- "text": "boolean"
20683
- },
20664
+ "name": "componentId",
20684
20665
  "privacy": "private",
20685
- "default": "false"
20666
+ "readonly": true,
20667
+ "default": "`flow-ui-tab-${this.attrId}`"
20686
20668
  },
20687
20669
  {
20688
20670
  "kind": "field",
20689
- "name": "name",
20671
+ "name": "panel",
20690
20672
  "type": {
20691
20673
  "text": "string"
20692
20674
  },
20693
20675
  "default": "''",
20694
- "description": "The name of the switch, submitted as a name/value pair with form data.",
20695
- "attribute": "name"
20696
- },
20697
- {
20698
- "kind": "field",
20699
- "name": "value",
20700
- "type": {
20701
- "text": "string"
20702
- },
20703
- "description": "The current value of the switch, submitted as a name/value pair with form data.",
20704
- "attribute": "value"
20676
+ "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
20677
+ "attribute": "panel",
20678
+ "reflects": true
20705
20679
  },
20706
20680
  {
20707
20681
  "kind": "field",
20708
- "name": "size",
20682
+ "name": "active",
20709
20683
  "type": {
20710
- "text": "'small' | 'medium' | 'large'"
20684
+ "text": "boolean"
20711
20685
  },
20712
- "default": "'medium'",
20713
- "description": "The switch's size.",
20714
- "attribute": "size",
20686
+ "default": "false",
20687
+ "description": "Draws the tab in an active state.",
20688
+ "attribute": "active",
20715
20689
  "reflects": true
20716
20690
  },
20717
20691
  {
20718
20692
  "kind": "field",
20719
- "name": "disabled",
20693
+ "name": "iconOnly",
20720
20694
  "type": {
20721
20695
  "text": "boolean"
20722
20696
  },
20723
20697
  "default": "false",
20724
- "description": "Disables the switch.",
20725
- "attribute": "disabled",
20726
- "reflects": true
20698
+ "description": "Display tab icon only. Label text is displayed as a tooltip",
20699
+ "attribute": "icon-only"
20727
20700
  },
20728
20701
  {
20729
20702
  "kind": "field",
20730
- "name": "checked",
20703
+ "name": "closable",
20731
20704
  "type": {
20732
20705
  "text": "boolean"
20733
20706
  },
20734
20707
  "default": "false",
20735
- "description": "Draws the switch in a checked state.",
20736
- "attribute": "checked",
20737
- "reflects": true
20708
+ "description": "Makes the tab closable and shows a close button.",
20709
+ "attribute": "closable"
20738
20710
  },
20739
20711
  {
20740
20712
  "kind": "field",
20741
- "name": "defaultChecked",
20713
+ "name": "disabled",
20742
20714
  "type": {
20743
20715
  "text": "boolean"
20744
20716
  },
20745
20717
  "default": "false",
20746
- "description": "The default value of the form control. Primarily used for resetting the form control."
20718
+ "description": "Disables the tab and prevents selection.",
20719
+ "attribute": "disabled",
20720
+ "reflects": true
20747
20721
  },
20748
20722
  {
20749
20723
  "kind": "field",
20750
- "name": "form",
20724
+ "name": "label",
20751
20725
  "type": {
20752
20726
  "text": "string"
20753
20727
  },
20754
- "default": "''",
20755
- "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
20756
- "attribute": "form",
20757
- "reflects": true
20728
+ "description": "Full title of tab",
20729
+ "attribute": "label"
20758
20730
  },
20759
20731
  {
20760
20732
  "kind": "field",
20761
- "name": "required",
20733
+ "name": "tooltipPlacement",
20762
20734
  "type": {
20763
- "text": "boolean"
20735
+ "text": "| 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'"
20764
20736
  },
20765
- "default": "false",
20766
- "description": "Makes the switch a required field.",
20767
- "attribute": "required",
20768
- "reflects": true
20737
+ "default": "'top'",
20738
+ "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
20739
+ "attribute": "tooltip-placement"
20769
20740
  },
20770
20741
  {
20771
20742
  "kind": "field",
20772
- "name": "helpText",
20743
+ "name": "tooltipDistance",
20773
20744
  "type": {
20774
- "text": "string"
20745
+ "text": "number"
20775
20746
  },
20776
- "default": "''",
20777
- "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
20778
- "attribute": "help-text"
20747
+ "default": "-4",
20748
+ "description": "The distance in pixels from which to offset the tooltip away from the icon button.",
20749
+ "attribute": "tooltip-distance"
20779
20750
  },
20780
20751
  {
20781
20752
  "kind": "field",
20782
- "name": "divider",
20753
+ "name": "tooltipSkidding",
20783
20754
  "type": {
20784
- "text": "boolean"
20755
+ "text": "number"
20785
20756
  },
20786
- "default": "false",
20787
- "description": "Indicates that the control should display a divider",
20788
- "attribute": "divider"
20789
- },
20790
- {
20791
- "kind": "field",
20792
- "name": "validity",
20793
- "description": "Gets the validity state object",
20794
- "readonly": true
20757
+ "default": "0",
20758
+ "description": "The distance in pixels from which to offset the tooltip along the icon button.",
20759
+ "attribute": "tooltip-skidding"
20795
20760
  },
20796
20761
  {
20797
20762
  "kind": "field",
20798
- "name": "validationMessage",
20799
- "description": "Gets the validation message",
20800
- "readonly": true
20801
- },
20802
- {
20803
- "kind": "method",
20804
- "name": "handleBlur",
20805
- "privacy": "private"
20806
- },
20807
- {
20808
- "kind": "method",
20809
- "name": "handleInput",
20810
- "privacy": "private"
20763
+ "name": "tabGroup",
20764
+ "type": {
20765
+ "text": "FlowUiTabGroup | undefined"
20766
+ },
20767
+ "privacy": "public"
20811
20768
  },
20812
20769
  {
20813
20770
  "kind": "method",
20814
- "name": "handleInvalid",
20771
+ "name": "handleCloseClick",
20815
20772
  "privacy": "private",
20816
20773
  "parameters": [
20817
20774
  {
@@ -20822,34 +20779,6 @@
20822
20779
  }
20823
20780
  ]
20824
20781
  },
20825
- {
20826
- "kind": "method",
20827
- "name": "handleClick",
20828
- "privacy": "private"
20829
- },
20830
- {
20831
- "kind": "method",
20832
- "name": "handleFocus",
20833
- "privacy": "private"
20834
- },
20835
- {
20836
- "kind": "method",
20837
- "name": "handleKeyDown",
20838
- "privacy": "private",
20839
- "parameters": [
20840
- {
20841
- "name": "event",
20842
- "type": {
20843
- "text": "KeyboardEvent"
20844
- }
20845
- }
20846
- ]
20847
- },
20848
- {
20849
- "kind": "method",
20850
- "name": "click",
20851
- "description": "Simulates a click on the switch."
20852
- },
20853
20782
  {
20854
20783
  "kind": "method",
20855
20784
  "name": "focus",
@@ -20862,162 +20791,112 @@
20862
20791
  }
20863
20792
  }
20864
20793
  ],
20865
- "description": "Sets focus on the switch."
20794
+ "description": "Sets focus to the tab."
20866
20795
  },
20867
20796
  {
20868
20797
  "kind": "method",
20869
20798
  "name": "blur",
20870
- "description": "Removes focus from the switch."
20871
- },
20872
- {
20873
- "kind": "method",
20874
- "name": "checkValidity",
20875
- "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
20876
- },
20877
- {
20878
- "kind": "method",
20879
- "name": "getForm",
20880
- "return": {
20881
- "type": {
20882
- "text": "HTMLFormElement | null"
20883
- }
20884
- },
20885
- "description": "Gets the associated form, if one exists."
20886
- },
20887
- {
20888
- "kind": "method",
20889
- "name": "reportValidity",
20890
- "description": "Checks for validity and shows the browser's validation message if the control is invalid."
20891
- },
20892
- {
20893
- "kind": "method",
20894
- "name": "setCustomValidity",
20895
- "parameters": [
20896
- {
20897
- "name": "message",
20898
- "type": {
20899
- "text": "string"
20900
- }
20901
- }
20902
- ],
20903
- "description": "Sets a custom validation message. Pass an empty string to restore validity."
20799
+ "description": "Removes focus from the tab."
20904
20800
  }
20905
20801
  ],
20906
20802
  "events": [
20907
20803
  {
20908
- "description": "Emitted when the control loses focus.",
20909
- "name": "flow-ui-blur",
20910
- "reactName": "onFlowUiBlur"
20911
- },
20912
- {
20913
- "description": "Emitted when the control's checked state changes.",
20914
- "name": "flow-ui-change",
20915
- "reactName": "onFlowUiChange"
20916
- },
20917
- {
20918
- "description": "Emitted when the control receives input.",
20919
- "name": "flow-ui-input",
20920
- "reactName": "onFlowUiInput"
20921
- },
20922
- {
20923
- "description": "Emitted when the control gains focus.",
20924
- "name": "flow-ui-focus",
20925
- "reactName": "onFlowUiFocus"
20926
- },
20927
- {
20928
- "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
20929
- "name": "flow-ui-invalid",
20930
- "reactName": "onFlowUiInvalid"
20804
+ "description": "Emitted when the tab is closable and the close button is activated.",
20805
+ "name": "flow-ui-close",
20806
+ "reactName": "onFlowUiClose"
20931
20807
  }
20932
20808
  ],
20933
20809
  "attributes": [
20934
20810
  {
20935
- "name": "name",
20811
+ "name": "panel",
20936
20812
  "type": {
20937
20813
  "text": "string"
20938
20814
  },
20939
20815
  "default": "''",
20940
- "description": "The name of the switch, submitted as a name/value pair with form data.",
20941
- "fieldName": "name"
20816
+ "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
20817
+ "fieldName": "panel"
20942
20818
  },
20943
20819
  {
20944
- "name": "value",
20820
+ "name": "active",
20945
20821
  "type": {
20946
- "text": "string"
20822
+ "text": "boolean"
20947
20823
  },
20948
- "description": "The current value of the switch, submitted as a name/value pair with form data.",
20949
- "fieldName": "value"
20824
+ "default": "false",
20825
+ "description": "Draws the tab in an active state.",
20826
+ "fieldName": "active"
20950
20827
  },
20951
20828
  {
20952
- "name": "size",
20829
+ "name": "icon-only",
20953
20830
  "type": {
20954
- "text": "'small' | 'medium' | 'large'"
20831
+ "text": "boolean"
20955
20832
  },
20956
- "default": "'medium'",
20957
- "description": "The switch's size.",
20958
- "fieldName": "size"
20959
- },
20960
- {
20961
- "name": "disabled",
20833
+ "default": "false",
20834
+ "description": "Display tab icon only. Label text is displayed as a tooltip",
20835
+ "fieldName": "iconOnly"
20836
+ },
20837
+ {
20838
+ "name": "closable",
20962
20839
  "type": {
20963
20840
  "text": "boolean"
20964
20841
  },
20965
20842
  "default": "false",
20966
- "description": "Disables the switch.",
20967
- "fieldName": "disabled"
20843
+ "description": "Makes the tab closable and shows a close button.",
20844
+ "fieldName": "closable"
20968
20845
  },
20969
20846
  {
20970
- "name": "checked",
20847
+ "name": "disabled",
20971
20848
  "type": {
20972
20849
  "text": "boolean"
20973
20850
  },
20974
20851
  "default": "false",
20975
- "description": "Draws the switch in a checked state.",
20976
- "fieldName": "checked"
20852
+ "description": "Disables the tab and prevents selection.",
20853
+ "fieldName": "disabled"
20977
20854
  },
20978
20855
  {
20979
- "name": "form",
20856
+ "name": "label",
20980
20857
  "type": {
20981
20858
  "text": "string"
20982
20859
  },
20983
- "default": "''",
20984
- "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
20985
- "fieldName": "form"
20860
+ "description": "Full title of tab",
20861
+ "fieldName": "label"
20986
20862
  },
20987
20863
  {
20988
- "name": "required",
20864
+ "name": "tooltip-placement",
20989
20865
  "type": {
20990
- "text": "boolean"
20866
+ "text": "| 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'"
20991
20867
  },
20992
- "default": "false",
20993
- "description": "Makes the switch a required field.",
20994
- "fieldName": "required"
20868
+ "default": "'top'",
20869
+ "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
20870
+ "fieldName": "tooltipPlacement"
20995
20871
  },
20996
20872
  {
20997
- "name": "help-text",
20873
+ "name": "tooltip-distance",
20998
20874
  "type": {
20999
- "text": "string"
20875
+ "text": "number"
21000
20876
  },
21001
- "default": "''",
21002
- "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
21003
- "fieldName": "helpText"
20877
+ "default": "-4",
20878
+ "description": "The distance in pixels from which to offset the tooltip away from the icon button.",
20879
+ "fieldName": "tooltipDistance"
21004
20880
  },
21005
20881
  {
21006
- "name": "divider",
20882
+ "name": "tooltip-skidding",
21007
20883
  "type": {
21008
- "text": "boolean"
20884
+ "text": "number"
21009
20885
  },
21010
- "default": "false",
21011
- "description": "Indicates that the control should display a divider",
21012
- "fieldName": "divider"
20886
+ "default": "0",
20887
+ "description": "The distance in pixels from which to offset the tooltip along the icon button.",
20888
+ "fieldName": "tooltipSkidding"
21013
20889
  }
21014
20890
  ],
21015
20891
  "superclass": {
21016
- "name": "FlowRdfFormControl",
20892
+ "name": "FlowRdfElement",
21017
20893
  "module": "/src/internal/flow-ui-rdf-element"
21018
20894
  },
21019
- "tagName": "flow-ui-switch",
21020
- "summary": "Switches allow the user to toggle an option on or off.",
20895
+ "tagName": "flow-ui-tab",
20896
+ "summary": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).",
20897
+ "dependencies": [
20898
+ "flow-ui-icon-button"
20899
+ ],
21021
20900
  "customElement": true
21022
20901
  }
21023
20902
  ],
@@ -21026,15 +20905,15 @@
21026
20905
  "kind": "js",
21027
20906
  "name": "default",
21028
20907
  "declaration": {
21029
- "name": "FlowUiSwitch",
21030
- "module": "components/switch/switch.component.js"
20908
+ "name": "FlowUiTab",
20909
+ "module": "components/tab/tab.component.js"
21031
20910
  }
21032
20911
  }
21033
20912
  ]
21034
20913
  },
21035
20914
  {
21036
20915
  "kind": "javascript-module",
21037
- "path": "components/switch/switch.js",
20916
+ "path": "components/tab/tab.js",
21038
20917
  "declarations": [],
21039
20918
  "exports": [
21040
20919
  {
@@ -21042,45 +20921,87 @@
21042
20921
  "name": "*",
21043
20922
  "declaration": {
21044
20923
  "name": "*",
21045
- "package": "./switch.component"
20924
+ "package": "./tab.component"
21046
20925
  }
21047
20926
  },
21048
20927
  {
21049
20928
  "kind": "js",
21050
20929
  "name": "default",
21051
20930
  "declaration": {
21052
- "name": "FlowUiSwitch",
21053
- "module": "components/switch/switch.js"
20931
+ "name": "FlowUiTab",
20932
+ "module": "components/tab/tab.js"
21054
20933
  }
21055
20934
  }
21056
20935
  ]
21057
20936
  },
21058
20937
  {
21059
20938
  "kind": "javascript-module",
21060
- "path": "components/tab/tab.component.js",
20939
+ "path": "components/tab-group/tab-group.component.js",
21061
20940
  "declarations": [
21062
20941
  {
21063
20942
  "kind": "class",
21064
20943
  "description": "",
21065
- "name": "FlowUiTab",
20944
+ "name": "FlowUiTabGroup",
20945
+ "cssProperties": [
20946
+ {
20947
+ "description": "The color of the active tab indicator.",
20948
+ "name": "--indicator-color"
20949
+ },
20950
+ {
20951
+ "description": "The color of the indicator's track (the line that separates tabs from panels).",
20952
+ "name": "--track-color"
20953
+ },
20954
+ {
20955
+ "description": "The width of the indicator's track (the line that separates tabs from panels).",
20956
+ "name": "--track-width"
20957
+ }
20958
+ ],
21066
20959
  "cssParts": [
21067
20960
  {
21068
20961
  "description": "The component's base wrapper.",
21069
20962
  "name": "base"
21070
20963
  },
21071
20964
  {
21072
- "description": "The close button, an `<flow-ui-icon-button>`.",
21073
- "name": "close-button"
20965
+ "description": "The tab group's navigation container where tabs are slotted in.",
20966
+ "name": "nav"
21074
20967
  },
21075
20968
  {
21076
- "description": "The close button's exported `base` part.",
21077
- "name": "close-button__base"
20969
+ "description": "The container that wraps the tabs.",
20970
+ "name": "tabs"
20971
+ },
20972
+ {
20973
+ "description": "The line that highlights the currently selected tab.",
20974
+ "name": "active-tab-indicator"
20975
+ },
20976
+ {
20977
+ "description": "The tab group's body where tab panels are slotted in.",
20978
+ "name": "body"
20979
+ },
20980
+ {
20981
+ "description": "The previous/next scroll buttons that show when tabs are scrollable, an `<flow-ui-icon-button>`.",
20982
+ "name": "scroll-button"
20983
+ },
20984
+ {
20985
+ "description": "The starting scroll button.",
20986
+ "name": "scroll-button--start"
20987
+ },
20988
+ {
20989
+ "description": "The ending scroll button.",
20990
+ "name": "scroll-button--end"
20991
+ },
20992
+ {
20993
+ "description": "The scroll button's exported `base` part.",
20994
+ "name": "scroll-button__base"
21078
20995
  }
21079
20996
  ],
21080
20997
  "slots": [
21081
20998
  {
21082
- "description": "The tab's label.",
20999
+ "description": "Used for grouping tab panels in the tab group. Must be `<flow-ui-tab-panel>` elements.",
21083
21000
  "name": ""
21001
+ },
21002
+ {
21003
+ "description": "Used for grouping tabs in the tab group. Must be `<flow-ui-tab>` elements.",
21004
+ "name": "nav"
21084
21005
  }
21085
21006
  ],
21086
21007
  "members": [
@@ -21096,256 +21017,449 @@
21096
21017
  "name": "hasSlotController",
21097
21018
  "privacy": "private",
21098
21019
  "readonly": true,
21099
- "default": "new HasSlotController(this, '[default]', 'icon')"
21020
+ "default": "new HasSlotController(this, 'nav-accessories-start', 'nav-accessories-end')"
21100
21021
  },
21101
21022
  {
21102
21023
  "kind": "field",
21103
- "name": "attrId",
21024
+ "name": "_activeTab",
21104
21025
  "type": {
21105
- "text": "number"
21026
+ "text": "FlowUiTab | undefined"
21106
21027
  },
21107
- "privacy": "private",
21108
- "readonly": true,
21109
- "default": "++id"
21110
- },
21111
- {
21112
- "kind": "field",
21113
- "name": "componentId",
21114
- "privacy": "private",
21115
- "readonly": true,
21116
- "default": "`flow-ui-tab-${this.attrId}`"
21028
+ "privacy": "private"
21117
21029
  },
21118
21030
  {
21119
21031
  "kind": "field",
21120
- "name": "panel",
21032
+ "name": "mutationObserver",
21121
21033
  "type": {
21122
- "text": "string"
21034
+ "text": "MutationObserver"
21123
21035
  },
21124
- "default": "''",
21125
- "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
21126
- "attribute": "panel",
21127
- "reflects": true
21036
+ "privacy": "private"
21128
21037
  },
21129
21038
  {
21130
21039
  "kind": "field",
21131
- "name": "active",
21040
+ "name": "resizeObserver",
21132
21041
  "type": {
21133
- "text": "boolean"
21042
+ "text": "ResizeObserver"
21134
21043
  },
21135
- "default": "false",
21136
- "description": "Draws the tab in an active state.",
21137
- "attribute": "active",
21138
- "reflects": true
21044
+ "privacy": "private"
21139
21045
  },
21140
21046
  {
21141
21047
  "kind": "field",
21142
- "name": "iconOnly",
21048
+ "name": "tabs",
21143
21049
  "type": {
21144
- "text": "boolean"
21050
+ "text": "FlowUiTab[]"
21145
21051
  },
21146
- "default": "false",
21147
- "description": "Display tab icon only. Label text is displayed as a tooltip",
21148
- "attribute": "icon-only"
21052
+ "privacy": "private",
21053
+ "default": "[]"
21149
21054
  },
21150
21055
  {
21151
21056
  "kind": "field",
21152
- "name": "closable",
21057
+ "name": "panels",
21153
21058
  "type": {
21154
- "text": "boolean"
21059
+ "text": "FlowUiTabPanel[]"
21155
21060
  },
21156
- "default": "false",
21157
- "description": "Makes the tab closable and shows a close button.",
21158
- "attribute": "closable"
21061
+ "privacy": "private",
21062
+ "default": "[]"
21159
21063
  },
21160
21064
  {
21161
21065
  "kind": "field",
21162
- "name": "disabled",
21066
+ "name": "hasScrollControls",
21163
21067
  "type": {
21164
21068
  "text": "boolean"
21165
21069
  },
21166
- "default": "false",
21167
- "description": "Disables the tab and prevents selection.",
21168
- "attribute": "disabled",
21169
- "reflects": true
21170
- },
21171
- {
21172
- "kind": "field",
21173
- "name": "label",
21174
- "type": {
21175
- "text": "string"
21176
- },
21177
- "description": "Full title of tab",
21178
- "attribute": "label"
21070
+ "privacy": "private",
21071
+ "default": "false"
21179
21072
  },
21180
21073
  {
21181
21074
  "kind": "field",
21182
- "name": "tooltipPlacement",
21075
+ "name": "placement",
21183
21076
  "type": {
21184
- "text": "| 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'"
21077
+ "text": "'top' | 'bottom' | 'start' | 'end'"
21185
21078
  },
21186
21079
  "default": "'top'",
21187
- "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
21188
- "attribute": "tooltip-placement"
21080
+ "description": "The placement of the tabs.",
21081
+ "attribute": "placement"
21189
21082
  },
21190
21083
  {
21191
21084
  "kind": "field",
21192
- "name": "tooltipDistance",
21085
+ "name": "activation",
21193
21086
  "type": {
21194
- "text": "number"
21087
+ "text": "'auto' | 'manual'"
21195
21088
  },
21196
- "default": "-4",
21197
- "description": "The distance in pixels from which to offset the tooltip away from the icon button.",
21198
- "attribute": "tooltip-distance"
21089
+ "default": "'auto'",
21090
+ "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
21091
+ "attribute": "activation"
21199
21092
  },
21200
21093
  {
21201
21094
  "kind": "field",
21202
- "name": "tooltipSkidding",
21095
+ "name": "noScrollControls",
21203
21096
  "type": {
21204
- "text": "number"
21097
+ "text": "boolean"
21205
21098
  },
21206
- "default": "0",
21207
- "description": "The distance in pixels from which to offset the tooltip along the icon button.",
21208
- "attribute": "tooltip-skidding"
21099
+ "default": "false",
21100
+ "description": "Disables the scroll arrows that appear when tabs overflow.",
21101
+ "attribute": "no-scroll-controls"
21209
21102
  },
21210
21103
  {
21211
21104
  "kind": "field",
21212
- "name": "tabGroup",
21105
+ "name": "controlSplitView",
21213
21106
  "type": {
21214
- "text": "FlowUiTabGroup | undefined"
21107
+ "text": "boolean"
21215
21108
  },
21216
- "privacy": "public"
21109
+ "description": "Set to `true` to allow parent split-view pane to be automatically opened and closed when tabs are clicked.",
21110
+ "attribute": "control-split-view"
21217
21111
  },
21218
21112
  {
21219
21113
  "kind": "method",
21220
- "name": "handleCloseClick",
21114
+ "name": "getAllTabs",
21221
21115
  "privacy": "private",
21222
21116
  "parameters": [
21223
21117
  {
21224
- "name": "event",
21118
+ "name": "options",
21119
+ "default": "{ includeDisabled: true }",
21225
21120
  "type": {
21226
- "text": "Event"
21121
+ "text": "{ includeDisabled: boolean }"
21227
21122
  }
21228
21123
  }
21229
21124
  ]
21230
21125
  },
21126
+ {
21127
+ "kind": "field",
21128
+ "name": "activeTab",
21129
+ "type": {
21130
+ "text": "FlowUiTab | undefined"
21131
+ },
21132
+ "readonly": true
21133
+ },
21231
21134
  {
21232
21135
  "kind": "method",
21233
- "name": "focus",
21234
- "parameters": [
21235
- {
21236
- "name": "options",
21237
- "optional": true,
21136
+ "name": "getAllPanels",
21137
+ "privacy": "private"
21138
+ },
21139
+ {
21140
+ "kind": "method",
21141
+ "name": "handleClick",
21142
+ "privacy": "private",
21143
+ "parameters": [
21144
+ {
21145
+ "name": "event",
21238
21146
  "type": {
21239
- "text": "FocusOptions"
21147
+ "text": "MouseEvent"
21240
21148
  }
21241
21149
  }
21242
- ],
21243
- "description": "Sets focus to the tab."
21150
+ ]
21244
21151
  },
21245
21152
  {
21246
21153
  "kind": "method",
21247
- "name": "blur",
21248
- "description": "Removes focus from the tab."
21154
+ "name": "handleKeyDown",
21155
+ "privacy": "private",
21156
+ "parameters": [
21157
+ {
21158
+ "name": "event",
21159
+ "type": {
21160
+ "text": "KeyboardEvent"
21161
+ }
21162
+ }
21163
+ ]
21164
+ },
21165
+ {
21166
+ "kind": "method",
21167
+ "name": "handleScrollToStart",
21168
+ "privacy": "private"
21169
+ },
21170
+ {
21171
+ "kind": "method",
21172
+ "name": "handleScrollToEnd",
21173
+ "privacy": "private"
21174
+ },
21175
+ {
21176
+ "kind": "method",
21177
+ "name": "isHorizontal",
21178
+ "privacy": "private"
21179
+ },
21180
+ {
21181
+ "kind": "method",
21182
+ "name": "setActiveTab",
21183
+ "privacy": "private",
21184
+ "parameters": [
21185
+ {
21186
+ "name": "tab",
21187
+ "type": {
21188
+ "text": "FlowUiTab"
21189
+ }
21190
+ },
21191
+ {
21192
+ "name": "options",
21193
+ "optional": true,
21194
+ "type": {
21195
+ "text": "{ emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }"
21196
+ }
21197
+ }
21198
+ ]
21199
+ },
21200
+ {
21201
+ "kind": "method",
21202
+ "name": "setAriaLabels",
21203
+ "privacy": "private"
21204
+ },
21205
+ {
21206
+ "kind": "method",
21207
+ "name": "repositionIndicator",
21208
+ "privacy": "private"
21209
+ },
21210
+ {
21211
+ "kind": "method",
21212
+ "name": "syncTabsAndPanels",
21213
+ "privacy": "private"
21214
+ },
21215
+ {
21216
+ "kind": "method",
21217
+ "name": "show",
21218
+ "parameters": [
21219
+ {
21220
+ "name": "panel",
21221
+ "type": {
21222
+ "text": "string"
21223
+ }
21224
+ }
21225
+ ],
21226
+ "description": "Shows the specified tab panel."
21249
21227
  }
21250
21228
  ],
21251
21229
  "events": [
21252
21230
  {
21253
- "description": "Emitted when the tab is closable and the close button is activated.",
21254
- "name": "flow-ui-close",
21255
- "reactName": "onFlowUiClose"
21231
+ "type": {
21232
+ "text": "{ name: String }"
21233
+ },
21234
+ "description": "Emitted when a tab is shown.",
21235
+ "name": "flow-ui-tab-show",
21236
+ "reactName": "onFlowUiTabShow"
21237
+ },
21238
+ {
21239
+ "type": {
21240
+ "text": "{ name: String }"
21241
+ },
21242
+ "description": "Emitted when a tab is hidden.",
21243
+ "name": "flow-ui-tab-hide",
21244
+ "reactName": "onFlowUiTabHide"
21256
21245
  }
21257
21246
  ],
21258
21247
  "attributes": [
21259
21248
  {
21260
- "name": "panel",
21249
+ "name": "placement",
21261
21250
  "type": {
21262
- "text": "string"
21251
+ "text": "'top' | 'bottom' | 'start' | 'end'"
21263
21252
  },
21264
- "default": "''",
21265
- "description": "The name of the tab panel this tab is associated with. The panel must be located in the same tab group.",
21266
- "fieldName": "panel"
21253
+ "default": "'top'",
21254
+ "description": "The placement of the tabs.",
21255
+ "fieldName": "placement"
21267
21256
  },
21268
21257
  {
21269
- "name": "active",
21258
+ "name": "activation",
21259
+ "type": {
21260
+ "text": "'auto' | 'manual'"
21261
+ },
21262
+ "default": "'auto'",
21263
+ "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
21264
+ "fieldName": "activation"
21265
+ },
21266
+ {
21267
+ "name": "no-scroll-controls",
21270
21268
  "type": {
21271
21269
  "text": "boolean"
21272
21270
  },
21273
21271
  "default": "false",
21274
- "description": "Draws the tab in an active state.",
21275
- "fieldName": "active"
21272
+ "description": "Disables the scroll arrows that appear when tabs overflow.",
21273
+ "fieldName": "noScrollControls"
21276
21274
  },
21277
21275
  {
21278
- "name": "icon-only",
21276
+ "name": "control-split-view",
21279
21277
  "type": {
21280
21278
  "text": "boolean"
21281
21279
  },
21282
- "default": "false",
21283
- "description": "Display tab icon only. Label text is displayed as a tooltip",
21284
- "fieldName": "iconOnly"
21280
+ "description": "Set to `true` to allow parent split-view pane to be automatically opened and closed when tabs are clicked.",
21281
+ "fieldName": "controlSplitView"
21282
+ }
21283
+ ],
21284
+ "superclass": {
21285
+ "name": "FlowRdfElement",
21286
+ "module": "/src/internal/flow-ui-rdf-element"
21287
+ },
21288
+ "tagName": "flow-ui-tab-group",
21289
+ "summary": "Tab groups organize content into a container that shows one section at a time.",
21290
+ "dependencies": [
21291
+ "flow-ui-icon-button"
21292
+ ],
21293
+ "customElement": true
21294
+ }
21295
+ ],
21296
+ "exports": [
21297
+ {
21298
+ "kind": "js",
21299
+ "name": "default",
21300
+ "declaration": {
21301
+ "name": "FlowUiTabGroup",
21302
+ "module": "components/tab-group/tab-group.component.js"
21303
+ }
21304
+ }
21305
+ ]
21306
+ },
21307
+ {
21308
+ "kind": "javascript-module",
21309
+ "path": "components/tab-group/tab-group.js",
21310
+ "declarations": [],
21311
+ "exports": [
21312
+ {
21313
+ "kind": "js",
21314
+ "name": "*",
21315
+ "declaration": {
21316
+ "name": "*",
21317
+ "package": "./tab-group.component"
21318
+ }
21319
+ },
21320
+ {
21321
+ "kind": "js",
21322
+ "name": "default",
21323
+ "declaration": {
21324
+ "name": "FlowUiTabGroup",
21325
+ "module": "components/tab-group/tab-group.js"
21326
+ }
21327
+ }
21328
+ ]
21329
+ },
21330
+ {
21331
+ "kind": "javascript-module",
21332
+ "path": "components/tab-panel/tab-panel.component.js",
21333
+ "declarations": [
21334
+ {
21335
+ "kind": "class",
21336
+ "description": "",
21337
+ "name": "FlowUiTabPanel",
21338
+ "cssProperties": [
21339
+ {
21340
+ "description": "The tab panel's padding.",
21341
+ "name": "--padding"
21342
+ }
21343
+ ],
21344
+ "cssParts": [
21345
+ {
21346
+ "description": "The component's base wrapper.",
21347
+ "name": "base"
21348
+ }
21349
+ ],
21350
+ "slots": [
21351
+ {
21352
+ "description": "The tab panel's content.",
21353
+ "name": ""
21354
+ }
21355
+ ],
21356
+ "members": [
21357
+ {
21358
+ "kind": "field",
21359
+ "name": "attrId",
21360
+ "type": {
21361
+ "text": "number"
21362
+ },
21363
+ "privacy": "private",
21364
+ "readonly": true,
21365
+ "default": "++id"
21285
21366
  },
21286
21367
  {
21287
- "name": "closable",
21368
+ "kind": "field",
21369
+ "name": "componentId",
21370
+ "privacy": "private",
21371
+ "readonly": true,
21372
+ "default": "`flow-ui-tab-panel-${this.attrId}`"
21373
+ },
21374
+ {
21375
+ "kind": "field",
21376
+ "name": "name",
21377
+ "type": {
21378
+ "text": "string"
21379
+ },
21380
+ "default": "''",
21381
+ "description": "The tab panel's name.",
21382
+ "attribute": "name",
21383
+ "reflects": true
21384
+ },
21385
+ {
21386
+ "kind": "field",
21387
+ "name": "active",
21288
21388
  "type": {
21289
21389
  "text": "boolean"
21290
21390
  },
21291
21391
  "default": "false",
21292
- "description": "Makes the tab closable and shows a close button.",
21293
- "fieldName": "closable"
21392
+ "description": "When true, the tab panel will be shown.",
21393
+ "attribute": "active",
21394
+ "reflects": true
21294
21395
  },
21295
21396
  {
21296
- "name": "disabled",
21397
+ "kind": "field",
21398
+ "name": "scrollable",
21297
21399
  "type": {
21298
21400
  "text": "boolean"
21299
21401
  },
21300
21402
  "default": "false",
21301
- "description": "Disables the tab and prevents selection.",
21302
- "fieldName": "disabled"
21403
+ "description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
21404
+ "attribute": "scrollable",
21405
+ "reflects": true
21303
21406
  },
21304
21407
  {
21305
- "name": "label",
21408
+ "kind": "field",
21409
+ "name": "padding",
21410
+ "type": {
21411
+ "text": "boolean"
21412
+ },
21413
+ "default": "false",
21414
+ "description": "Indicates whether the panel body has padding.",
21415
+ "attribute": "padding",
21416
+ "reflects": true
21417
+ }
21418
+ ],
21419
+ "attributes": [
21420
+ {
21421
+ "name": "name",
21306
21422
  "type": {
21307
21423
  "text": "string"
21308
21424
  },
21309
- "description": "Full title of tab",
21310
- "fieldName": "label"
21425
+ "default": "''",
21426
+ "description": "The tab panel's name.",
21427
+ "fieldName": "name"
21311
21428
  },
21312
21429
  {
21313
- "name": "tooltip-placement",
21430
+ "name": "active",
21314
21431
  "type": {
21315
- "text": "| 'top'\n | 'top-start'\n | 'top-end'\n | 'right'\n | 'right-start'\n | 'right-end'\n | 'bottom'\n | 'bottom-start'\n | 'bottom-end'\n | 'left'\n | 'left-start'\n | 'left-end'"
21432
+ "text": "boolean"
21316
21433
  },
21317
- "default": "'top'",
21318
- "description": "The preferred placement of the tooltip. Note that the actual placement may vary as needed to keep the tooltip\ninside of the viewport.",
21319
- "fieldName": "tooltipPlacement"
21434
+ "default": "false",
21435
+ "description": "When true, the tab panel will be shown.",
21436
+ "fieldName": "active"
21320
21437
  },
21321
21438
  {
21322
- "name": "tooltip-distance",
21439
+ "name": "scrollable",
21323
21440
  "type": {
21324
- "text": "number"
21441
+ "text": "boolean"
21325
21442
  },
21326
- "default": "-4",
21327
- "description": "The distance in pixels from which to offset the tooltip away from the icon button.",
21328
- "fieldName": "tooltipDistance"
21443
+ "default": "false",
21444
+ "description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
21445
+ "fieldName": "scrollable"
21329
21446
  },
21330
21447
  {
21331
- "name": "tooltip-skidding",
21448
+ "name": "padding",
21332
21449
  "type": {
21333
- "text": "number"
21450
+ "text": "boolean"
21334
21451
  },
21335
- "default": "0",
21336
- "description": "The distance in pixels from which to offset the tooltip along the icon button.",
21337
- "fieldName": "tooltipSkidding"
21452
+ "default": "false",
21453
+ "description": "Indicates whether the panel body has padding.",
21454
+ "fieldName": "padding"
21338
21455
  }
21339
21456
  ],
21340
21457
  "superclass": {
21341
21458
  "name": "FlowRdfElement",
21342
- "module": "/src/internal/flow-ui-rdf-element"
21343
- },
21344
- "tagName": "flow-ui-tab",
21345
- "summary": "Tabs are used inside [tab groups](/components/tab-group) to represent and activate [tab panels](/components/tab-panel).",
21346
- "dependencies": [
21347
- "flow-ui-icon-button"
21348
- ],
21459
+ "module": "/src/internal/flow-ui-rdf-element"
21460
+ },
21461
+ "tagName": "flow-ui-tab-panel",
21462
+ "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
21349
21463
  "customElement": true
21350
21464
  }
21351
21465
  ],
@@ -21354,15 +21468,15 @@
21354
21468
  "kind": "js",
21355
21469
  "name": "default",
21356
21470
  "declaration": {
21357
- "name": "FlowUiTab",
21358
- "module": "components/tab/tab.component.js"
21471
+ "name": "FlowUiTabPanel",
21472
+ "module": "components/tab-panel/tab-panel.component.js"
21359
21473
  }
21360
21474
  }
21361
21475
  ]
21362
21476
  },
21363
21477
  {
21364
21478
  "kind": "javascript-module",
21365
- "path": "components/tab/tab.js",
21479
+ "path": "components/tab-panel/tab-panel.js",
21366
21480
  "declarations": [],
21367
21481
  "exports": [
21368
21482
  {
@@ -21370,39 +21484,39 @@
21370
21484
  "name": "*",
21371
21485
  "declaration": {
21372
21486
  "name": "*",
21373
- "package": "./tab.component"
21487
+ "package": "./tab-panel.component"
21374
21488
  }
21375
21489
  },
21376
21490
  {
21377
21491
  "kind": "js",
21378
21492
  "name": "default",
21379
21493
  "declaration": {
21380
- "name": "FlowUiTab",
21381
- "module": "components/tab/tab.js"
21494
+ "name": "FlowUiTabPanel",
21495
+ "module": "components/tab-panel/tab-panel.js"
21382
21496
  }
21383
21497
  }
21384
21498
  ]
21385
21499
  },
21386
21500
  {
21387
21501
  "kind": "javascript-module",
21388
- "path": "components/tab-group/tab-group.component.js",
21502
+ "path": "components/switch/switch.component.js",
21389
21503
  "declarations": [
21390
21504
  {
21391
21505
  "kind": "class",
21392
21506
  "description": "",
21393
- "name": "FlowUiTabGroup",
21507
+ "name": "FlowUiSwitch",
21394
21508
  "cssProperties": [
21395
21509
  {
21396
- "description": "The color of the active tab indicator.",
21397
- "name": "--indicator-color"
21510
+ "description": "The width of the switch.",
21511
+ "name": "--width"
21398
21512
  },
21399
21513
  {
21400
- "description": "The color of the indicator's track (the line that separates tabs from panels).",
21401
- "name": "--track-color"
21514
+ "description": "The height of the switch.",
21515
+ "name": "--height"
21402
21516
  },
21403
21517
  {
21404
- "description": "The width of the indicator's track (the line that separates tabs from panels).",
21405
- "name": "--track-width"
21518
+ "description": "The size of the thumb.",
21519
+ "name": "--thumb-size"
21406
21520
  }
21407
21521
  ],
21408
21522
  "cssParts": [
@@ -21411,193 +21525,204 @@
21411
21525
  "name": "base"
21412
21526
  },
21413
21527
  {
21414
- "description": "The tab group's navigation container where tabs are slotted in.",
21415
- "name": "nav"
21416
- },
21417
- {
21418
- "description": "The container that wraps the tabs.",
21419
- "name": "tabs"
21420
- },
21421
- {
21422
- "description": "The line that highlights the currently selected tab.",
21423
- "name": "active-tab-indicator"
21424
- },
21425
- {
21426
- "description": "The tab group's body where tab panels are slotted in.",
21427
- "name": "body"
21428
- },
21429
- {
21430
- "description": "The previous/next scroll buttons that show when tabs are scrollable, an `<flow-ui-icon-button>`.",
21431
- "name": "scroll-button"
21432
- },
21433
- {
21434
- "description": "The starting scroll button.",
21435
- "name": "scroll-button--start"
21528
+ "description": "The control that houses the switch's thumb.",
21529
+ "name": "control"
21436
21530
  },
21437
21531
  {
21438
- "description": "The ending scroll button.",
21439
- "name": "scroll-button--end"
21532
+ "description": "The switch's thumb.",
21533
+ "name": "thumb"
21440
21534
  },
21441
21535
  {
21442
- "description": "The scroll button's exported `base` part.",
21443
- "name": "scroll-button__base"
21536
+ "description": "The switch's label.",
21537
+ "name": "label"
21444
21538
  }
21445
21539
  ],
21446
21540
  "slots": [
21447
21541
  {
21448
- "description": "Used for grouping tab panels in the tab group. Must be `<flow-ui-tab-panel>` elements.",
21542
+ "description": "The switch's label.",
21449
21543
  "name": ""
21450
- },
21451
- {
21452
- "description": "Used for grouping tabs in the tab group. Must be `<flow-ui-tab>` elements.",
21453
- "name": "nav"
21454
21544
  }
21455
21545
  ],
21456
21546
  "members": [
21457
21547
  {
21458
21548
  "kind": "field",
21459
- "name": "localize",
21549
+ "name": "formControlController",
21460
21550
  "privacy": "private",
21461
21551
  "readonly": true,
21462
- "default": "new LocalizeController(this)"
21552
+ "default": "new FormControlController(this, {\n value: (control: FlowUiSwitch) => (control.checked ? control.value || 'on' : undefined),\n defaultValue: (control: FlowUiSwitch) => control.defaultChecked,\n setValue: (control: FlowUiSwitch, checked: boolean) => (control.checked = checked)\n })"
21463
21553
  },
21464
21554
  {
21465
21555
  "kind": "field",
21466
21556
  "name": "hasSlotController",
21467
21557
  "privacy": "private",
21468
21558
  "readonly": true,
21469
- "default": "new HasSlotController(this, 'nav-accessories-start', 'nav-accessories-end')"
21559
+ "default": "new HasSlotController(this, 'help-text', '[default]')"
21470
21560
  },
21471
21561
  {
21472
21562
  "kind": "field",
21473
- "name": "_activeTab",
21563
+ "name": "input",
21474
21564
  "type": {
21475
- "text": "FlowUiTab | undefined"
21565
+ "text": "HTMLInputElement"
21476
21566
  },
21477
21567
  "privacy": "private"
21478
21568
  },
21479
21569
  {
21480
21570
  "kind": "field",
21481
- "name": "mutationObserver",
21571
+ "name": "hasFocus",
21482
21572
  "type": {
21483
- "text": "MutationObserver"
21573
+ "text": "boolean"
21484
21574
  },
21485
- "privacy": "private"
21575
+ "privacy": "private",
21576
+ "default": "false"
21486
21577
  },
21487
21578
  {
21488
21579
  "kind": "field",
21489
- "name": "resizeObserver",
21580
+ "name": "name",
21490
21581
  "type": {
21491
- "text": "ResizeObserver"
21582
+ "text": "string"
21492
21583
  },
21493
- "privacy": "private"
21584
+ "default": "''",
21585
+ "description": "The name of the switch, submitted as a name/value pair with form data.",
21586
+ "attribute": "name"
21494
21587
  },
21495
21588
  {
21496
21589
  "kind": "field",
21497
- "name": "tabs",
21590
+ "name": "value",
21498
21591
  "type": {
21499
- "text": "FlowUiTab[]"
21592
+ "text": "string"
21500
21593
  },
21501
- "privacy": "private",
21502
- "default": "[]"
21594
+ "description": "The current value of the switch, submitted as a name/value pair with form data.",
21595
+ "attribute": "value"
21503
21596
  },
21504
21597
  {
21505
21598
  "kind": "field",
21506
- "name": "panels",
21599
+ "name": "size",
21507
21600
  "type": {
21508
- "text": "FlowUiTabPanel[]"
21601
+ "text": "'small' | 'medium' | 'large'"
21509
21602
  },
21510
- "privacy": "private",
21511
- "default": "[]"
21603
+ "default": "'medium'",
21604
+ "description": "The switch's size.",
21605
+ "attribute": "size",
21606
+ "reflects": true
21512
21607
  },
21513
21608
  {
21514
21609
  "kind": "field",
21515
- "name": "hasScrollControls",
21610
+ "name": "disabled",
21516
21611
  "type": {
21517
21612
  "text": "boolean"
21518
21613
  },
21519
- "privacy": "private",
21520
- "default": "false"
21614
+ "default": "false",
21615
+ "description": "Disables the switch.",
21616
+ "attribute": "disabled",
21617
+ "reflects": true
21521
21618
  },
21522
21619
  {
21523
21620
  "kind": "field",
21524
- "name": "placement",
21621
+ "name": "checked",
21525
21622
  "type": {
21526
- "text": "'top' | 'bottom' | 'start' | 'end'"
21623
+ "text": "boolean"
21527
21624
  },
21528
- "default": "'top'",
21529
- "description": "The placement of the tabs.",
21530
- "attribute": "placement"
21625
+ "default": "false",
21626
+ "description": "Draws the switch in a checked state.",
21627
+ "attribute": "checked",
21628
+ "reflects": true
21531
21629
  },
21532
21630
  {
21533
21631
  "kind": "field",
21534
- "name": "activation",
21632
+ "name": "defaultChecked",
21535
21633
  "type": {
21536
- "text": "'auto' | 'manual'"
21634
+ "text": "boolean"
21537
21635
  },
21538
- "default": "'auto'",
21539
- "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
21540
- "attribute": "activation"
21636
+ "default": "false",
21637
+ "description": "The default value of the form control. Primarily used for resetting the form control."
21541
21638
  },
21542
21639
  {
21543
21640
  "kind": "field",
21544
- "name": "noScrollControls",
21641
+ "name": "form",
21545
21642
  "type": {
21546
- "text": "boolean"
21643
+ "text": "string"
21547
21644
  },
21548
- "default": "false",
21549
- "description": "Disables the scroll arrows that appear when tabs overflow.",
21550
- "attribute": "no-scroll-controls"
21645
+ "default": "''",
21646
+ "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
21647
+ "attribute": "form",
21648
+ "reflects": true
21551
21649
  },
21552
21650
  {
21553
21651
  "kind": "field",
21554
- "name": "controlSplitView",
21652
+ "name": "required",
21555
21653
  "type": {
21556
21654
  "text": "boolean"
21557
21655
  },
21558
- "description": "Set to `true` to allow parent split-view pane to be automatically opened and closed when tabs are clicked.",
21559
- "attribute": "control-split-view"
21656
+ "default": "false",
21657
+ "description": "Makes the switch a required field.",
21658
+ "attribute": "required",
21659
+ "reflects": true
21560
21660
  },
21561
21661
  {
21562
- "kind": "method",
21563
- "name": "getAllTabs",
21564
- "privacy": "private",
21565
- "parameters": [
21566
- {
21567
- "name": "options",
21568
- "default": "{ includeDisabled: true }",
21569
- "type": {
21570
- "text": "{ includeDisabled: boolean }"
21571
- }
21572
- }
21573
- ]
21662
+ "kind": "field",
21663
+ "name": "helpText",
21664
+ "type": {
21665
+ "text": "string"
21666
+ },
21667
+ "default": "''",
21668
+ "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
21669
+ "attribute": "help-text"
21574
21670
  },
21575
21671
  {
21576
21672
  "kind": "field",
21577
- "name": "activeTab",
21673
+ "name": "divider",
21578
21674
  "type": {
21579
- "text": "FlowUiTab | undefined"
21675
+ "text": "boolean"
21580
21676
  },
21677
+ "default": "false",
21678
+ "description": "Indicates that the control should display a divider",
21679
+ "attribute": "divider"
21680
+ },
21681
+ {
21682
+ "kind": "field",
21683
+ "name": "validity",
21684
+ "description": "Gets the validity state object",
21685
+ "readonly": true
21686
+ },
21687
+ {
21688
+ "kind": "field",
21689
+ "name": "validationMessage",
21690
+ "description": "Gets the validation message",
21581
21691
  "readonly": true
21582
21692
  },
21583
21693
  {
21584
21694
  "kind": "method",
21585
- "name": "getAllPanels",
21695
+ "name": "handleBlur",
21586
21696
  "privacy": "private"
21587
21697
  },
21588
21698
  {
21589
21699
  "kind": "method",
21590
- "name": "handleClick",
21700
+ "name": "handleInput",
21701
+ "privacy": "private"
21702
+ },
21703
+ {
21704
+ "kind": "method",
21705
+ "name": "handleInvalid",
21591
21706
  "privacy": "private",
21592
21707
  "parameters": [
21593
21708
  {
21594
21709
  "name": "event",
21595
21710
  "type": {
21596
- "text": "MouseEvent"
21711
+ "text": "Event"
21597
21712
  }
21598
21713
  }
21599
21714
  ]
21600
21715
  },
21716
+ {
21717
+ "kind": "method",
21718
+ "name": "handleClick",
21719
+ "privacy": "private"
21720
+ },
21721
+ {
21722
+ "kind": "method",
21723
+ "name": "handleFocus",
21724
+ "privacy": "private"
21725
+ },
21601
21726
  {
21602
21727
  "kind": "method",
21603
21728
  "name": "handleKeyDown",
@@ -21613,302 +21738,177 @@
21613
21738
  },
21614
21739
  {
21615
21740
  "kind": "method",
21616
- "name": "handleScrollToStart",
21617
- "privacy": "private"
21618
- },
21619
- {
21620
- "kind": "method",
21621
- "name": "handleScrollToEnd",
21622
- "privacy": "private"
21623
- },
21624
- {
21625
- "kind": "method",
21626
- "name": "isHorizontal",
21627
- "privacy": "private"
21741
+ "name": "click",
21742
+ "description": "Simulates a click on the switch."
21628
21743
  },
21629
21744
  {
21630
21745
  "kind": "method",
21631
- "name": "setActiveTab",
21632
- "privacy": "private",
21746
+ "name": "focus",
21633
21747
  "parameters": [
21634
- {
21635
- "name": "tab",
21636
- "type": {
21637
- "text": "FlowUiTab"
21638
- }
21639
- },
21640
21748
  {
21641
21749
  "name": "options",
21642
21750
  "optional": true,
21643
21751
  "type": {
21644
- "text": "{ emitEvents?: boolean; scrollBehavior?: 'auto' | 'smooth' }"
21752
+ "text": "FocusOptions"
21645
21753
  }
21646
21754
  }
21647
- ]
21755
+ ],
21756
+ "description": "Sets focus on the switch."
21648
21757
  },
21649
21758
  {
21650
21759
  "kind": "method",
21651
- "name": "setAriaLabels",
21652
- "privacy": "private"
21760
+ "name": "blur",
21761
+ "description": "Removes focus from the switch."
21762
+ },
21763
+ {
21764
+ "kind": "method",
21765
+ "name": "checkValidity",
21766
+ "description": "Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid."
21653
21767
  },
21654
21768
  {
21655
21769
  "kind": "method",
21656
- "name": "repositionIndicator",
21657
- "privacy": "private"
21770
+ "name": "getForm",
21771
+ "return": {
21772
+ "type": {
21773
+ "text": "HTMLFormElement | null"
21774
+ }
21775
+ },
21776
+ "description": "Gets the associated form, if one exists."
21658
21777
  },
21659
21778
  {
21660
21779
  "kind": "method",
21661
- "name": "syncTabsAndPanels",
21662
- "privacy": "private"
21780
+ "name": "reportValidity",
21781
+ "description": "Checks for validity and shows the browser's validation message if the control is invalid."
21663
21782
  },
21664
21783
  {
21665
21784
  "kind": "method",
21666
- "name": "show",
21785
+ "name": "setCustomValidity",
21667
21786
  "parameters": [
21668
21787
  {
21669
- "name": "panel",
21788
+ "name": "message",
21670
21789
  "type": {
21671
21790
  "text": "string"
21672
21791
  }
21673
21792
  }
21674
21793
  ],
21675
- "description": "Shows the specified tab panel."
21794
+ "description": "Sets a custom validation message. Pass an empty string to restore validity."
21676
21795
  }
21677
21796
  ],
21678
21797
  "events": [
21679
21798
  {
21680
- "type": {
21681
- "text": "{ name: String }"
21682
- },
21683
- "description": "Emitted when a tab is shown.",
21684
- "name": "flow-ui-tab-show",
21685
- "reactName": "onFlowUiTabShow"
21799
+ "description": "Emitted when the control loses focus.",
21800
+ "name": "flow-ui-blur",
21801
+ "reactName": "onFlowUiBlur"
21686
21802
  },
21687
21803
  {
21688
- "type": {
21689
- "text": "{ name: String }"
21690
- },
21691
- "description": "Emitted when a tab is hidden.",
21692
- "name": "flow-ui-tab-hide",
21693
- "reactName": "onFlowUiTabHide"
21694
- }
21695
- ],
21696
- "attributes": [
21697
- {
21698
- "name": "placement",
21699
- "type": {
21700
- "text": "'top' | 'bottom' | 'start' | 'end'"
21701
- },
21702
- "default": "'top'",
21703
- "description": "The placement of the tabs.",
21704
- "fieldName": "placement"
21804
+ "description": "Emitted when the control's checked state changes.",
21805
+ "name": "flow-ui-change",
21806
+ "reactName": "onFlowUiChange"
21705
21807
  },
21706
21808
  {
21707
- "name": "activation",
21708
- "type": {
21709
- "text": "'auto' | 'manual'"
21710
- },
21711
- "default": "'auto'",
21712
- "description": "When set to auto, navigating tabs with the arrow keys will instantly show the corresponding tab panel. When set to\nmanual, the tab will receive focus but will not show until the user presses spacebar or enter.",
21713
- "fieldName": "activation"
21809
+ "description": "Emitted when the control receives input.",
21810
+ "name": "flow-ui-input",
21811
+ "reactName": "onFlowUiInput"
21714
21812
  },
21715
21813
  {
21716
- "name": "no-scroll-controls",
21717
- "type": {
21718
- "text": "boolean"
21719
- },
21720
- "default": "false",
21721
- "description": "Disables the scroll arrows that appear when tabs overflow.",
21722
- "fieldName": "noScrollControls"
21814
+ "description": "Emitted when the control gains focus.",
21815
+ "name": "flow-ui-focus",
21816
+ "reactName": "onFlowUiFocus"
21723
21817
  },
21724
21818
  {
21725
- "name": "control-split-view",
21726
- "type": {
21727
- "text": "boolean"
21728
- },
21729
- "description": "Set to `true` to allow parent split-view pane to be automatically opened and closed when tabs are clicked.",
21730
- "fieldName": "controlSplitView"
21731
- }
21732
- ],
21733
- "superclass": {
21734
- "name": "FlowRdfElement",
21735
- "module": "/src/internal/flow-ui-rdf-element"
21736
- },
21737
- "tagName": "flow-ui-tab-group",
21738
- "summary": "Tab groups organize content into a container that shows one section at a time.",
21739
- "dependencies": [
21740
- "flow-ui-icon-button"
21741
- ],
21742
- "customElement": true
21743
- }
21744
- ],
21745
- "exports": [
21746
- {
21747
- "kind": "js",
21748
- "name": "default",
21749
- "declaration": {
21750
- "name": "FlowUiTabGroup",
21751
- "module": "components/tab-group/tab-group.component.js"
21752
- }
21753
- }
21754
- ]
21755
- },
21756
- {
21757
- "kind": "javascript-module",
21758
- "path": "components/tab-group/tab-group.js",
21759
- "declarations": [],
21760
- "exports": [
21761
- {
21762
- "kind": "js",
21763
- "name": "*",
21764
- "declaration": {
21765
- "name": "*",
21766
- "package": "./tab-group.component"
21767
- }
21768
- },
21769
- {
21770
- "kind": "js",
21771
- "name": "default",
21772
- "declaration": {
21773
- "name": "FlowUiTabGroup",
21774
- "module": "components/tab-group/tab-group.js"
21775
- }
21776
- }
21777
- ]
21778
- },
21779
- {
21780
- "kind": "javascript-module",
21781
- "path": "components/tab-panel/tab-panel.component.js",
21782
- "declarations": [
21783
- {
21784
- "kind": "class",
21785
- "description": "",
21786
- "name": "FlowUiTabPanel",
21787
- "cssProperties": [
21788
- {
21789
- "description": "The tab panel's padding.",
21790
- "name": "--padding"
21791
- }
21792
- ],
21793
- "cssParts": [
21794
- {
21795
- "description": "The component's base wrapper.",
21796
- "name": "base"
21797
- }
21798
- ],
21799
- "slots": [
21800
- {
21801
- "description": "The tab panel's content.",
21802
- "name": ""
21819
+ "description": "Emitted when the form control has been checked for validity and its constraints aren't satisfied.",
21820
+ "name": "flow-ui-invalid",
21821
+ "reactName": "onFlowUiInvalid"
21803
21822
  }
21804
21823
  ],
21805
- "members": [
21824
+ "attributes": [
21806
21825
  {
21807
- "kind": "field",
21808
- "name": "attrId",
21826
+ "name": "name",
21809
21827
  "type": {
21810
- "text": "number"
21828
+ "text": "string"
21811
21829
  },
21812
- "privacy": "private",
21813
- "readonly": true,
21814
- "default": "++id"
21815
- },
21816
- {
21817
- "kind": "field",
21818
- "name": "componentId",
21819
- "privacy": "private",
21820
- "readonly": true,
21821
- "default": "`flow-ui-tab-panel-${this.attrId}`"
21830
+ "default": "''",
21831
+ "description": "The name of the switch, submitted as a name/value pair with form data.",
21832
+ "fieldName": "name"
21822
21833
  },
21823
21834
  {
21824
- "kind": "field",
21825
- "name": "name",
21835
+ "name": "value",
21826
21836
  "type": {
21827
21837
  "text": "string"
21828
21838
  },
21829
- "default": "''",
21830
- "description": "The tab panel's name.",
21831
- "attribute": "name",
21832
- "reflects": true
21839
+ "description": "The current value of the switch, submitted as a name/value pair with form data.",
21840
+ "fieldName": "value"
21833
21841
  },
21834
21842
  {
21835
- "kind": "field",
21836
- "name": "active",
21843
+ "name": "size",
21837
21844
  "type": {
21838
- "text": "boolean"
21845
+ "text": "'small' | 'medium' | 'large'"
21839
21846
  },
21840
- "default": "false",
21841
- "description": "When true, the tab panel will be shown.",
21842
- "attribute": "active",
21843
- "reflects": true
21847
+ "default": "'medium'",
21848
+ "description": "The switch's size.",
21849
+ "fieldName": "size"
21844
21850
  },
21845
21851
  {
21846
- "kind": "field",
21847
- "name": "scrollable",
21852
+ "name": "disabled",
21848
21853
  "type": {
21849
21854
  "text": "boolean"
21850
21855
  },
21851
21856
  "default": "false",
21852
- "description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
21853
- "attribute": "scrollable",
21854
- "reflects": true
21857
+ "description": "Disables the switch.",
21858
+ "fieldName": "disabled"
21855
21859
  },
21856
21860
  {
21857
- "kind": "field",
21858
- "name": "padding",
21861
+ "name": "checked",
21859
21862
  "type": {
21860
21863
  "text": "boolean"
21861
21864
  },
21862
21865
  "default": "false",
21863
- "description": "Indicates whether the panel body has padding.",
21864
- "attribute": "padding",
21865
- "reflects": true
21866
- }
21867
- ],
21868
- "attributes": [
21866
+ "description": "Draws the switch in a checked state.",
21867
+ "fieldName": "checked"
21868
+ },
21869
21869
  {
21870
- "name": "name",
21870
+ "name": "form",
21871
21871
  "type": {
21872
21872
  "text": "string"
21873
21873
  },
21874
21874
  "default": "''",
21875
- "description": "The tab panel's name.",
21876
- "fieldName": "name"
21875
+ "description": "By default, form controls are associated with the nearest containing `<form>` element. This attribute allows you\nto place the form control outside of a form and associate it with the form that has this `id`. The form must be in\nthe same document or shadow root for this to work.",
21876
+ "fieldName": "form"
21877
21877
  },
21878
21878
  {
21879
- "name": "active",
21879
+ "name": "required",
21880
21880
  "type": {
21881
21881
  "text": "boolean"
21882
21882
  },
21883
21883
  "default": "false",
21884
- "description": "When true, the tab panel will be shown.",
21885
- "fieldName": "active"
21884
+ "description": "Makes the switch a required field.",
21885
+ "fieldName": "required"
21886
21886
  },
21887
21887
  {
21888
- "name": "scrollable",
21888
+ "name": "help-text",
21889
21889
  "type": {
21890
- "text": "boolean"
21890
+ "text": "string"
21891
21891
  },
21892
- "default": "false",
21893
- "description": "Indicates whether the panel is scrollable. By default overflow is hidden.",
21894
- "fieldName": "scrollable"
21892
+ "default": "''",
21893
+ "description": "The select's help text. If you need to display HTML, use the `help-text` slot instead.",
21894
+ "fieldName": "helpText"
21895
21895
  },
21896
21896
  {
21897
- "name": "padding",
21897
+ "name": "divider",
21898
21898
  "type": {
21899
21899
  "text": "boolean"
21900
21900
  },
21901
21901
  "default": "false",
21902
- "description": "Indicates whether the panel body has padding.",
21903
- "fieldName": "padding"
21902
+ "description": "Indicates that the control should display a divider",
21903
+ "fieldName": "divider"
21904
21904
  }
21905
21905
  ],
21906
21906
  "superclass": {
21907
- "name": "FlowRdfElement",
21907
+ "name": "FlowRdfFormControl",
21908
21908
  "module": "/src/internal/flow-ui-rdf-element"
21909
21909
  },
21910
- "tagName": "flow-ui-tab-panel",
21911
- "summary": "Tab panels are used inside [tab groups](/components/tab-group) to display tabbed content.",
21910
+ "tagName": "flow-ui-switch",
21911
+ "summary": "Switches allow the user to toggle an option on or off.",
21912
21912
  "customElement": true
21913
21913
  }
21914
21914
  ],
@@ -21917,15 +21917,15 @@
21917
21917
  "kind": "js",
21918
21918
  "name": "default",
21919
21919
  "declaration": {
21920
- "name": "FlowUiTabPanel",
21921
- "module": "components/tab-panel/tab-panel.component.js"
21920
+ "name": "FlowUiSwitch",
21921
+ "module": "components/switch/switch.component.js"
21922
21922
  }
21923
21923
  }
21924
21924
  ]
21925
21925
  },
21926
21926
  {
21927
21927
  "kind": "javascript-module",
21928
- "path": "components/tab-panel/tab-panel.js",
21928
+ "path": "components/switch/switch.js",
21929
21929
  "declarations": [],
21930
21930
  "exports": [
21931
21931
  {
@@ -21933,15 +21933,15 @@
21933
21933
  "name": "*",
21934
21934
  "declaration": {
21935
21935
  "name": "*",
21936
- "package": "./tab-panel.component"
21936
+ "package": "./switch.component"
21937
21937
  }
21938
21938
  },
21939
21939
  {
21940
21940
  "kind": "js",
21941
21941
  "name": "default",
21942
21942
  "declaration": {
21943
- "name": "FlowUiTabPanel",
21944
- "module": "components/tab-panel/tab-panel.js"
21943
+ "name": "FlowUiSwitch",
21944
+ "module": "components/switch/switch.js"
21945
21945
  }
21946
21946
  }
21947
21947
  ]
@@ -25914,6 +25914,6 @@
25914
25914
  ],
25915
25915
  "package": {
25916
25916
  "name": "@emuanalytics/flow-rdf-ui",
25917
- "version": "4.1.24"
25917
+ "version": "4.1.25"
25918
25918
  }
25919
25919
  }