@genesislcap/foundation-ui 14.157.1-alpha-e60ad86.0 → 14.158.1-beta.9f2f9a2.0

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 (2) hide show
  1. package/dist/custom-elements.json +1606 -1606
  2. package/package.json +15 -15
package/dist/custom-elements.json CHANGED
@@ -842,37 +842,6 @@
842
842
  }
843
843
  ]
844
844
  },
845
- {
846
- "kind": "javascript-module",
847
- "path": "src/_config/index.ts",
848
- "declarations": [],
849
- "exports": [
850
- {
851
- "kind": "js",
852
- "name": "*",
853
- "declaration": {
854
- "name": "*",
855
- "package": "./styles"
856
- }
857
- },
858
- {
859
- "kind": "js",
860
- "name": "*",
861
- "declaration": {
862
- "name": "*",
863
- "package": "./tokens"
864
- }
865
- },
866
- {
867
- "kind": "js",
868
- "name": "*",
869
- "declaration": {
870
- "name": "*",
871
- "package": "./values"
872
- }
873
- }
874
- ]
875
- },
876
845
  {
877
846
  "kind": "javascript-module",
878
847
  "path": "src/accordion/accordion.styles.ts",
@@ -1449,6 +1418,37 @@
1449
1418
  }
1450
1419
  ]
1451
1420
  },
1421
+ {
1422
+ "kind": "javascript-module",
1423
+ "path": "src/_config/index.ts",
1424
+ "declarations": [],
1425
+ "exports": [
1426
+ {
1427
+ "kind": "js",
1428
+ "name": "*",
1429
+ "declaration": {
1430
+ "name": "*",
1431
+ "package": "./styles"
1432
+ }
1433
+ },
1434
+ {
1435
+ "kind": "js",
1436
+ "name": "*",
1437
+ "declaration": {
1438
+ "name": "*",
1439
+ "package": "./tokens"
1440
+ }
1441
+ },
1442
+ {
1443
+ "kind": "js",
1444
+ "name": "*",
1445
+ "declaration": {
1446
+ "name": "*",
1447
+ "package": "./values"
1448
+ }
1449
+ }
1450
+ ]
1451
+ },
1452
1452
  {
1453
1453
  "kind": "javascript-module",
1454
1454
  "path": "src/actions-menu/actions-menu.styles.ts",
@@ -18563,578 +18563,205 @@
18563
18563
  },
18564
18564
  {
18565
18565
  "kind": "javascript-module",
18566
- "path": "src/flyout/flyout.styles.ts",
18566
+ "path": "src/grid-layout/grid-layout.styles.ts",
18567
18567
  "declarations": [
18568
18568
  {
18569
18569
  "kind": "variable",
18570
- "name": "flyoutAnimationTime",
18571
- "type": {
18572
- "text": "number"
18573
- },
18574
- "default": "225"
18575
- },
18576
- {
18577
- "kind": "variable",
18578
- "name": "foundationFlyoutStyles",
18570
+ "name": "foundationGridLayoutStyles",
18579
18571
  "type": {
18580
18572
  "text": "ElementStyles"
18581
18573
  },
18582
- "default": "css`\n /* Host */\n :host {\n display: inline-block;\n height: 100vh;\n position: absolute;\n width: 100vw;\n }\n\n :host([closed]) {\n display: none;\n }\n\n div.container {\n height: 100%;\n width: 100%;\n }\n\n /* flyout */\n div.flyout {\n background-color: white;\n color: black;\n height: 100%;\n position: absolute;\n /* stylelint-disable-next-line function-name-case */\n transition: transform ${flyoutAnimationTime.toString()}ms ease-in;\n width: 20%;\n z-index: 2001;\n }\n\n :host([position='left']) div.flyout {\n left: 0;\n transform: translateX(0%);\n }\n\n :host([position='right']) div.flyout {\n right: 0;\n transform: translateX(0%);\n }\n\n :host([visuallyhidden][position='left']) div.flyout {\n left: 0;\n transform: translateX(-100%);\n }\n\n :host([visuallyhidden][position='right']) div.flyout {\n right: 0;\n transform: translateX(100%);\n }\n\n div.header {\n align-items: center;\n display: flex;\n padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 2px);\n }\n\n div.title {\n flex-grow: 1;\n }\n\n div.footer {\n bottom: 0;\n position: absolute;\n width: 100%;\n }\n\n /* Background */\n div.background {\n background-color: black;\n height: 100%;\n opacity: 50%;\n position: absolute;\n /* stylelint-disable-next-line function-name-case */\n transition: opacity ${flyoutAnimationTime.toString()}ms linear;\n width: 100%;\n z-index: 2000;\n }\n\n :host([visuallyhidden]) div.background {\n opacity: 0%;\n }\n`"
18574
+ "default": "css`\n slot {\n width: 100%;\n height: 100%;\n display: grid;\n }\n\n ${gridLayoutRWDStyles()}\n ${gridLayoutRWDStyles('lg')}\n ${gridLayoutRWDStyles('md')}\n ${gridLayoutRWDStyles('sm')}\n`"
18583
18575
  }
18584
18576
  ],
18585
18577
  "exports": [
18586
18578
  {
18587
18579
  "kind": "js",
18588
- "name": "flyoutAnimationTime",
18589
- "declaration": {
18590
- "name": "flyoutAnimationTime",
18591
- "module": "src/flyout/flyout.styles.ts"
18592
- }
18593
- },
18594
- {
18595
- "kind": "js",
18596
- "name": "foundationFlyoutStyles",
18580
+ "name": "foundationGridLayoutStyles",
18597
18581
  "declaration": {
18598
- "name": "foundationFlyoutStyles",
18599
- "module": "src/flyout/flyout.styles.ts"
18582
+ "name": "foundationGridLayoutStyles",
18583
+ "module": "src/grid-layout/grid-layout.styles.ts"
18600
18584
  }
18601
18585
  }
18602
18586
  ]
18603
18587
  },
18604
18588
  {
18605
18589
  "kind": "javascript-module",
18606
- "path": "src/flyout/flyout.template.ts",
18590
+ "path": "src/grid-layout/grid-layout.template.ts",
18607
18591
  "declarations": [
18608
- {
18609
- "kind": "function",
18610
- "name": "getPrefixedFlyout",
18611
- "parameters": [
18612
- {
18613
- "name": "prefix",
18614
- "type": {
18615
- "text": "string"
18616
- }
18617
- }
18618
- ]
18619
- },
18620
18592
  {
18621
18593
  "kind": "variable",
18622
- "name": "foundationFlyoutTemplate",
18623
- "default": "html<Flyout>`\n ${(x) => getPrefixedFlyout(getPrefix(x))}\n`"
18594
+ "name": "foundationGridLayoutTemplate",
18595
+ "type": {
18596
+ "text": "ViewTemplate<GridLayout>"
18597
+ },
18598
+ "default": "html`\n <template>\n <slot></slot>\n </template>\n`"
18624
18599
  }
18625
18600
  ],
18626
18601
  "exports": [
18627
18602
  {
18628
18603
  "kind": "js",
18629
- "name": "getPrefixedFlyout",
18630
- "declaration": {
18631
- "name": "getPrefixedFlyout",
18632
- "module": "src/flyout/flyout.template.ts"
18633
- }
18634
- },
18635
- {
18636
- "kind": "js",
18637
- "name": "foundationFlyoutTemplate",
18604
+ "name": "foundationGridLayoutTemplate",
18638
18605
  "declaration": {
18639
- "name": "foundationFlyoutTemplate",
18640
- "module": "src/flyout/flyout.template.ts"
18606
+ "name": "foundationGridLayoutTemplate",
18607
+ "module": "src/grid-layout/grid-layout.template.ts"
18641
18608
  }
18642
18609
  }
18643
18610
  ]
18644
18611
  },
18645
18612
  {
18646
18613
  "kind": "javascript-module",
18647
- "path": "src/flyout/flyout.ts",
18614
+ "path": "src/grid-layout/grid-layout.ts",
18648
18615
  "declarations": [
18616
+ {
18617
+ "kind": "variable",
18618
+ "name": "foundationGridLayoutShadowOptions",
18619
+ "type": {
18620
+ "text": "ShadowRootInit"
18621
+ },
18622
+ "default": "undefined"
18623
+ },
18624
+ {
18625
+ "kind": "variable",
18626
+ "name": "defaultGridLayoutConfig",
18627
+ "type": {
18628
+ "text": "object"
18629
+ },
18630
+ "default": "{}"
18631
+ },
18649
18632
  {
18650
18633
  "kind": "class",
18651
18634
  "description": "",
18652
- "name": "Flyout",
18635
+ "name": "GridLayout",
18653
18636
  "members": [
18654
18637
  {
18655
18638
  "kind": "field",
18656
- "name": "position",
18639
+ "name": "['col-count']",
18657
18640
  "type": {
18658
18641
  "text": "string"
18659
- },
18660
- "default": "'right'"
18642
+ }
18661
18643
  },
18662
18644
  {
18663
18645
  "kind": "field",
18664
- "name": "displayHeader",
18646
+ "name": "['col-width']",
18665
18647
  "type": {
18666
- "text": "boolean"
18667
- },
18668
- "default": "true"
18648
+ "text": "string"
18649
+ }
18669
18650
  },
18670
18651
  {
18671
18652
  "kind": "field",
18672
- "name": "closed",
18653
+ "name": "['col-lg-count']",
18673
18654
  "type": {
18674
- "text": "boolean"
18675
- },
18676
- "default": "true"
18655
+ "text": "string"
18656
+ }
18677
18657
  },
18678
18658
  {
18679
- "kind": "method",
18680
- "name": "closedChanged"
18659
+ "kind": "field",
18660
+ "name": "['col-lg-width']",
18661
+ "type": {
18662
+ "text": "string"
18663
+ }
18681
18664
  },
18682
18665
  {
18683
18666
  "kind": "field",
18684
- "name": "visuallyhidden",
18667
+ "name": "['col-md-count']",
18685
18668
  "type": {
18686
- "text": "boolean"
18687
- },
18688
- "default": "true"
18669
+ "text": "string"
18670
+ }
18689
18671
  },
18690
18672
  {
18691
- "kind": "method",
18692
- "name": "closeFlyout"
18673
+ "kind": "field",
18674
+ "name": "['col-md-width']",
18675
+ "type": {
18676
+ "text": "string"
18677
+ }
18693
18678
  },
18694
18679
  {
18695
- "kind": "method",
18696
- "name": "closingFinished"
18697
- },
18698
- {
18699
- "kind": "field",
18700
- "name": "_presentation",
18701
- "type": {
18702
- "text": "ComponentPresentation | null | undefined"
18703
- },
18704
- "privacy": "private",
18705
- "default": "void 0",
18706
- "inheritedFrom": {
18707
- "name": "FoundationElement",
18708
- "module": "src/foundation-element/foundation-element.ts"
18709
- }
18710
- },
18711
- {
18712
- "kind": "field",
18713
- "name": "$presentation",
18714
- "type": {
18715
- "text": "ComponentPresentation | null"
18716
- },
18717
- "privacy": "public",
18718
- "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
18719
- "inheritedFrom": {
18720
- "name": "FoundationElement",
18721
- "module": "src/foundation-element/foundation-element.ts"
18722
- }
18723
- },
18724
- {
18725
- "kind": "field",
18726
- "name": "template",
18727
- "type": {
18728
- "text": "ElementViewTemplate | void | null"
18729
- },
18730
- "privacy": "public",
18731
- "description": "Sets the template of the element instance. When undefined,\nthe element will attempt to resolve the template from\nthe associated presentation or custom element definition.",
18732
- "inheritedFrom": {
18733
- "name": "FoundationElement",
18734
- "module": "src/foundation-element/foundation-element.ts"
18735
- }
18736
- },
18737
- {
18738
- "kind": "method",
18739
- "name": "templateChanged",
18740
- "privacy": "protected",
18741
- "return": {
18742
- "type": {
18743
- "text": "void"
18744
- }
18745
- },
18746
- "inheritedFrom": {
18747
- "name": "FoundationElement",
18748
- "module": "src/foundation-element/foundation-element.ts"
18749
- }
18750
- },
18751
- {
18752
- "kind": "field",
18753
- "name": "styles",
18754
- "type": {
18755
- "text": "ElementStyles | void | null"
18756
- },
18757
- "privacy": "public",
18758
- "description": "Sets the default styles for the element instance. When undefined,\nthe element will attempt to resolve default styles from\nthe associated presentation or custom element definition.",
18759
- "inheritedFrom": {
18760
- "name": "FoundationElement",
18761
- "module": "src/foundation-element/foundation-element.ts"
18762
- }
18763
- },
18764
- {
18765
- "kind": "method",
18766
- "name": "stylesChanged",
18767
- "privacy": "protected",
18768
- "return": {
18769
- "type": {
18770
- "text": "void"
18771
- }
18772
- },
18773
- "inheritedFrom": {
18774
- "name": "FoundationElement",
18775
- "module": "src/foundation-element/foundation-element.ts"
18776
- }
18777
- },
18778
- {
18779
- "kind": "method",
18780
- "name": "compose",
18781
- "privacy": "public",
18782
- "static": true,
18783
- "return": {
18784
- "type": {
18785
- "text": "(\n overrideDefinition?: OverrideFoundationElementDefinition<T>\n ) => FoundationElementRegistry<T, K>"
18786
- }
18787
- },
18788
- "parameters": [
18789
- {
18790
- "name": "this",
18791
- "type": {
18792
- "text": "K"
18793
- }
18794
- },
18795
- {
18796
- "name": "elementDefinition",
18797
- "type": {
18798
- "text": "T"
18799
- },
18800
- "description": "The definition of the element to create the registry\nfunction for."
18801
- }
18802
- ],
18803
- "description": "Defines an element registry function with a set of element definition defaults.",
18804
- "inheritedFrom": {
18805
- "name": "FoundationElement",
18806
- "module": "src/foundation-element/foundation-element.ts"
18807
- }
18808
- }
18809
- ],
18810
- "attributes": [
18811
- {
18812
- "name": "position",
18813
- "type": {
18814
- "text": "string"
18815
- },
18816
- "default": "'right'",
18817
- "fieldName": "position"
18818
- },
18819
- {
18820
- "type": {
18821
- "text": "boolean"
18822
- },
18823
- "default": "true",
18824
- "fieldName": "displayHeader"
18825
- },
18826
- {
18827
- "type": {
18828
- "text": "boolean"
18829
- },
18830
- "default": "true",
18831
- "fieldName": "closed"
18832
- },
18833
- {
18834
- "type": {
18835
- "text": "boolean"
18836
- },
18837
- "default": "true",
18838
- "fieldName": "visuallyhidden"
18839
- }
18840
- ],
18841
- "superclass": {
18842
- "name": "FoundationElement",
18843
- "package": "@microsoft/fast-foundation"
18844
- },
18845
- "tagName": "%%prefix%%-flyout",
18846
- "customElement": true
18847
- },
18848
- {
18849
- "kind": "variable",
18850
- "name": "foundationFlyoutShadowOptions",
18851
- "type": {
18852
- "text": "ShadowRootInit"
18853
- },
18854
- "default": "undefined"
18855
- },
18856
- {
18857
- "kind": "variable",
18858
- "name": "defaultFlyoutConfig",
18859
- "type": {
18860
- "text": "object"
18861
- },
18862
- "default": "{}"
18863
- },
18864
- {
18865
- "kind": "variable",
18866
- "name": "foundationFlyout",
18867
- "description": "The Foundation Flyout",
18868
- "privacy": "public"
18869
- }
18870
- ],
18871
- "exports": [
18872
- {
18873
- "kind": "js",
18874
- "name": "Flyout",
18875
- "declaration": {
18876
- "name": "Flyout",
18877
- "module": "src/flyout/flyout.ts"
18878
- }
18879
- },
18880
- {
18881
- "kind": "js",
18882
- "name": "foundationFlyoutShadowOptions",
18883
- "declaration": {
18884
- "name": "foundationFlyoutShadowOptions",
18885
- "module": "src/flyout/flyout.ts"
18886
- }
18887
- },
18888
- {
18889
- "kind": "js",
18890
- "name": "defaultFlyoutConfig",
18891
- "declaration": {
18892
- "name": "defaultFlyoutConfig",
18893
- "module": "src/flyout/flyout.ts"
18894
- }
18895
- },
18896
- {
18897
- "kind": "js",
18898
- "name": "foundationFlyout",
18899
- "declaration": {
18900
- "name": "foundationFlyout",
18901
- "module": "src/flyout/flyout.ts"
18902
- }
18903
- }
18904
- ]
18905
- },
18906
- {
18907
- "kind": "javascript-module",
18908
- "path": "src/flyout/index.ts",
18909
- "declarations": [],
18910
- "exports": [
18911
- {
18912
- "kind": "js",
18913
- "name": "*",
18914
- "declaration": {
18915
- "name": "*",
18916
- "package": "./flyout"
18917
- }
18918
- },
18919
- {
18920
- "kind": "js",
18921
- "name": "*",
18922
- "declaration": {
18923
- "name": "*",
18924
- "package": "./flyout.template"
18925
- }
18926
- },
18927
- {
18928
- "kind": "js",
18929
- "name": "*",
18930
- "declaration": {
18931
- "name": "*",
18932
- "package": "./flyout.styles"
18933
- }
18934
- }
18935
- ]
18936
- },
18937
- {
18938
- "kind": "javascript-module",
18939
- "path": "src/grid-layout/grid-layout.styles.ts",
18940
- "declarations": [
18941
- {
18942
- "kind": "variable",
18943
- "name": "foundationGridLayoutStyles",
18944
- "type": {
18945
- "text": "ElementStyles"
18946
- },
18947
- "default": "css`\n slot {\n width: 100%;\n height: 100%;\n display: grid;\n }\n\n ${gridLayoutRWDStyles()}\n ${gridLayoutRWDStyles('lg')}\n ${gridLayoutRWDStyles('md')}\n ${gridLayoutRWDStyles('sm')}\n`"
18948
- }
18949
- ],
18950
- "exports": [
18951
- {
18952
- "kind": "js",
18953
- "name": "foundationGridLayoutStyles",
18954
- "declaration": {
18955
- "name": "foundationGridLayoutStyles",
18956
- "module": "src/grid-layout/grid-layout.styles.ts"
18957
- }
18958
- }
18959
- ]
18960
- },
18961
- {
18962
- "kind": "javascript-module",
18963
- "path": "src/grid-layout/grid-layout.template.ts",
18964
- "declarations": [
18965
- {
18966
- "kind": "variable",
18967
- "name": "foundationGridLayoutTemplate",
18968
- "type": {
18969
- "text": "ViewTemplate<GridLayout>"
18970
- },
18971
- "default": "html`\n <template>\n <slot></slot>\n </template>\n`"
18972
- }
18973
- ],
18974
- "exports": [
18975
- {
18976
- "kind": "js",
18977
- "name": "foundationGridLayoutTemplate",
18978
- "declaration": {
18979
- "name": "foundationGridLayoutTemplate",
18980
- "module": "src/grid-layout/grid-layout.template.ts"
18981
- }
18982
- }
18983
- ]
18984
- },
18985
- {
18986
- "kind": "javascript-module",
18987
- "path": "src/grid-layout/grid-layout.ts",
18988
- "declarations": [
18989
- {
18990
- "kind": "variable",
18991
- "name": "foundationGridLayoutShadowOptions",
18992
- "type": {
18993
- "text": "ShadowRootInit"
18994
- },
18995
- "default": "undefined"
18996
- },
18997
- {
18998
- "kind": "variable",
18999
- "name": "defaultGridLayoutConfig",
19000
- "type": {
19001
- "text": "object"
19002
- },
19003
- "default": "{}"
19004
- },
19005
- {
19006
- "kind": "class",
19007
- "description": "",
19008
- "name": "GridLayout",
19009
- "members": [
19010
- {
19011
- "kind": "field",
19012
- "name": "['col-count']",
19013
- "type": {
19014
- "text": "string"
19015
- }
19016
- },
19017
- {
19018
- "kind": "field",
19019
- "name": "['col-width']",
19020
- "type": {
19021
- "text": "string"
19022
- }
19023
- },
19024
- {
19025
- "kind": "field",
19026
- "name": "['col-lg-count']",
19027
- "type": {
19028
- "text": "string"
19029
- }
19030
- },
19031
- {
19032
- "kind": "field",
19033
- "name": "['col-lg-width']",
19034
- "type": {
19035
- "text": "string"
19036
- }
19037
- },
19038
- {
19039
- "kind": "field",
19040
- "name": "['col-md-count']",
19041
- "type": {
19042
- "text": "string"
19043
- }
19044
- },
19045
- {
19046
- "kind": "field",
19047
- "name": "['col-md-width']",
19048
- "type": {
19049
- "text": "string"
19050
- }
19051
- },
19052
- {
19053
- "kind": "field",
19054
- "name": "['col-sm-count']",
19055
- "type": {
19056
- "text": "string"
19057
- }
19058
- },
19059
- {
19060
- "kind": "field",
19061
- "name": "['col-sm-width']",
19062
- "type": {
19063
- "text": "string"
19064
- }
19065
- },
19066
- {
19067
- "kind": "field",
19068
- "name": "['row-count']",
19069
- "type": {
19070
- "text": "string"
19071
- }
19072
- },
19073
- {
19074
- "kind": "field",
19075
- "name": "['row-height']",
19076
- "type": {
19077
- "text": "string"
19078
- }
19079
- },
19080
- {
19081
- "kind": "field",
19082
- "name": "['row-lg-count']",
19083
- "type": {
19084
- "text": "string"
19085
- }
19086
- },
19087
- {
19088
- "kind": "field",
19089
- "name": "['row-lg-height']",
19090
- "type": {
19091
- "text": "string"
19092
- }
19093
- },
19094
- {
19095
- "kind": "field",
19096
- "name": "['row-md-count']",
19097
- "type": {
19098
- "text": "string"
19099
- }
19100
- },
19101
- {
19102
- "kind": "field",
19103
- "name": "['row-md-height']",
19104
- "type": {
19105
- "text": "string"
19106
- }
19107
- },
19108
- {
19109
- "kind": "field",
19110
- "name": "['row-sm-count']",
19111
- "type": {
19112
- "text": "string"
19113
- }
19114
- },
19115
- {
19116
- "kind": "field",
19117
- "name": "['row-sm-height']",
19118
- "type": {
19119
- "text": "string"
19120
- }
19121
- },
19122
- {
19123
- "kind": "field",
19124
- "name": "behaviors",
19125
- "type": {
19126
- "text": "Behavior[]"
19127
- },
19128
- "privacy": "private",
19129
- "default": "[]"
19130
- },
19131
- {
19132
- "kind": "field",
19133
- "name": "baseStyles",
19134
- "type": {
19135
- "text": "ElementStyles"
19136
- },
19137
- "privacy": "private"
18680
+ "kind": "field",
18681
+ "name": "['col-sm-count']",
18682
+ "type": {
18683
+ "text": "string"
18684
+ }
18685
+ },
18686
+ {
18687
+ "kind": "field",
18688
+ "name": "['col-sm-width']",
18689
+ "type": {
18690
+ "text": "string"
18691
+ }
18692
+ },
18693
+ {
18694
+ "kind": "field",
18695
+ "name": "['row-count']",
18696
+ "type": {
18697
+ "text": "string"
18698
+ }
18699
+ },
18700
+ {
18701
+ "kind": "field",
18702
+ "name": "['row-height']",
18703
+ "type": {
18704
+ "text": "string"
18705
+ }
18706
+ },
18707
+ {
18708
+ "kind": "field",
18709
+ "name": "['row-lg-count']",
18710
+ "type": {
18711
+ "text": "string"
18712
+ }
18713
+ },
18714
+ {
18715
+ "kind": "field",
18716
+ "name": "['row-lg-height']",
18717
+ "type": {
18718
+ "text": "string"
18719
+ }
18720
+ },
18721
+ {
18722
+ "kind": "field",
18723
+ "name": "['row-md-count']",
18724
+ "type": {
18725
+ "text": "string"
18726
+ }
18727
+ },
18728
+ {
18729
+ "kind": "field",
18730
+ "name": "['row-md-height']",
18731
+ "type": {
18732
+ "text": "string"
18733
+ }
18734
+ },
18735
+ {
18736
+ "kind": "field",
18737
+ "name": "['row-sm-count']",
18738
+ "type": {
18739
+ "text": "string"
18740
+ }
18741
+ },
18742
+ {
18743
+ "kind": "field",
18744
+ "name": "['row-sm-height']",
18745
+ "type": {
18746
+ "text": "string"
18747
+ }
18748
+ },
18749
+ {
18750
+ "kind": "field",
18751
+ "name": "behaviors",
18752
+ "type": {
18753
+ "text": "Behavior[]"
18754
+ },
18755
+ "privacy": "private",
18756
+ "default": "[]"
18757
+ },
18758
+ {
18759
+ "kind": "field",
18760
+ "name": "baseStyles",
18761
+ "type": {
18762
+ "text": "ElementStyles"
18763
+ },
18764
+ "privacy": "private"
19138
18765
  },
19139
18766
  {
19140
18767
  "kind": "field",
@@ -19935,72 +19562,445 @@
19935
19562
  },
19936
19563
  {
19937
19564
  "kind": "javascript-module",
19938
- "path": "src/horizontal-scroll/horizontal-scroll.styles.ts",
19565
+ "path": "src/flyout/flyout.styles.ts",
19939
19566
  "declarations": [
19940
19567
  {
19941
- "kind": "function",
19942
- "name": "foundationHorizontalScrollStyles",
19943
- "return": {
19944
- "type": {
19945
- "text": "ElementStyles"
19946
- }
19568
+ "kind": "variable",
19569
+ "name": "flyoutAnimationTime",
19570
+ "type": {
19571
+ "text": "number"
19947
19572
  },
19948
- "parameters": [
19949
- {
19950
- "name": "context",
19951
- "type": {
19952
- "text": "ElementDefinitionContext"
19953
- }
19954
- },
19955
- {
19956
- "name": "definition",
19957
- "type": {
19958
- "text": "FoundationElementDefinition"
19959
- }
19960
- }
19961
- ]
19573
+ "default": "225"
19574
+ },
19575
+ {
19576
+ "kind": "variable",
19577
+ "name": "foundationFlyoutStyles",
19578
+ "type": {
19579
+ "text": "ElementStyles"
19580
+ },
19581
+ "default": "css`\n /* Host */\n :host {\n display: inline-block;\n height: 100vh;\n position: absolute;\n width: 100vw;\n }\n\n :host([closed]) {\n display: none;\n }\n\n div.container {\n height: 100%;\n width: 100%;\n }\n\n /* flyout */\n div.flyout {\n background-color: white;\n color: black;\n height: 100%;\n position: absolute;\n /* stylelint-disable-next-line function-name-case */\n transition: transform ${flyoutAnimationTime.toString()}ms ease-in;\n width: 20%;\n z-index: 2001;\n }\n\n :host([position='left']) div.flyout {\n left: 0;\n transform: translateX(0%);\n }\n\n :host([position='right']) div.flyout {\n right: 0;\n transform: translateX(0%);\n }\n\n :host([visuallyhidden][position='left']) div.flyout {\n left: 0;\n transform: translateX(-100%);\n }\n\n :host([visuallyhidden][position='right']) div.flyout {\n right: 0;\n transform: translateX(100%);\n }\n\n div.header {\n align-items: center;\n display: flex;\n padding: calc(var(--design-unit) * 3px) calc(var(--design-unit) * 2px);\n }\n\n div.title {\n flex-grow: 1;\n }\n\n div.footer {\n bottom: 0;\n position: absolute;\n width: 100%;\n }\n\n /* Background */\n div.background {\n background-color: black;\n height: 100%;\n opacity: 50%;\n position: absolute;\n /* stylelint-disable-next-line function-name-case */\n transition: opacity ${flyoutAnimationTime.toString()}ms linear;\n width: 100%;\n z-index: 2000;\n }\n\n :host([visuallyhidden]) div.background {\n opacity: 0%;\n }\n`"
19962
19582
  }
19963
19583
  ],
19964
19584
  "exports": [
19965
19585
  {
19966
19586
  "kind": "js",
19967
- "name": "foundationHorizontalScrollStyles",
19587
+ "name": "flyoutAnimationTime",
19968
19588
  "declaration": {
19969
- "name": "foundationHorizontalScrollStyles",
19970
- "module": "src/horizontal-scroll/horizontal-scroll.styles.ts"
19589
+ "name": "flyoutAnimationTime",
19590
+ "module": "src/flyout/flyout.styles.ts"
19591
+ }
19592
+ },
19593
+ {
19594
+ "kind": "js",
19595
+ "name": "foundationFlyoutStyles",
19596
+ "declaration": {
19597
+ "name": "foundationFlyoutStyles",
19598
+ "module": "src/flyout/flyout.styles.ts"
19971
19599
  }
19972
19600
  }
19973
19601
  ]
19974
19602
  },
19975
19603
  {
19976
19604
  "kind": "javascript-module",
19977
- "path": "src/horizontal-scroll/horizontal-scroll.template.ts",
19605
+ "path": "src/flyout/flyout.template.ts",
19978
19606
  "declarations": [
19979
19607
  {
19980
19608
  "kind": "function",
19981
- "name": "foundationHorizontalScrollTemplate",
19982
- "return": {
19983
- "type": {
19984
- "text": "ViewTemplate<HorizontalScroll>"
19985
- }
19986
- },
19609
+ "name": "getPrefixedFlyout",
19987
19610
  "parameters": [
19988
19611
  {
19989
- "name": "context",
19990
- "type": {
19991
- "text": "ElementDefinitionContext"
19992
- }
19993
- },
19994
- {
19995
- "name": "definition",
19612
+ "name": "prefix",
19996
19613
  "type": {
19997
- "text": "FoundationElementDefinition"
19614
+ "text": "string"
19998
19615
  }
19999
19616
  }
20000
19617
  ]
20001
- }
20002
- ],
20003
- "exports": [
19618
+ },
19619
+ {
19620
+ "kind": "variable",
19621
+ "name": "foundationFlyoutTemplate",
19622
+ "default": "html<Flyout>`\n ${(x) => getPrefixedFlyout(getPrefix(x))}\n`"
19623
+ }
19624
+ ],
19625
+ "exports": [
19626
+ {
19627
+ "kind": "js",
19628
+ "name": "getPrefixedFlyout",
19629
+ "declaration": {
19630
+ "name": "getPrefixedFlyout",
19631
+ "module": "src/flyout/flyout.template.ts"
19632
+ }
19633
+ },
19634
+ {
19635
+ "kind": "js",
19636
+ "name": "foundationFlyoutTemplate",
19637
+ "declaration": {
19638
+ "name": "foundationFlyoutTemplate",
19639
+ "module": "src/flyout/flyout.template.ts"
19640
+ }
19641
+ }
19642
+ ]
19643
+ },
19644
+ {
19645
+ "kind": "javascript-module",
19646
+ "path": "src/flyout/flyout.ts",
19647
+ "declarations": [
19648
+ {
19649
+ "kind": "class",
19650
+ "description": "",
19651
+ "name": "Flyout",
19652
+ "members": [
19653
+ {
19654
+ "kind": "field",
19655
+ "name": "position",
19656
+ "type": {
19657
+ "text": "string"
19658
+ },
19659
+ "default": "'right'"
19660
+ },
19661
+ {
19662
+ "kind": "field",
19663
+ "name": "displayHeader",
19664
+ "type": {
19665
+ "text": "boolean"
19666
+ },
19667
+ "default": "true"
19668
+ },
19669
+ {
19670
+ "kind": "field",
19671
+ "name": "closed",
19672
+ "type": {
19673
+ "text": "boolean"
19674
+ },
19675
+ "default": "true"
19676
+ },
19677
+ {
19678
+ "kind": "method",
19679
+ "name": "closedChanged"
19680
+ },
19681
+ {
19682
+ "kind": "field",
19683
+ "name": "visuallyhidden",
19684
+ "type": {
19685
+ "text": "boolean"
19686
+ },
19687
+ "default": "true"
19688
+ },
19689
+ {
19690
+ "kind": "method",
19691
+ "name": "closeFlyout"
19692
+ },
19693
+ {
19694
+ "kind": "method",
19695
+ "name": "closingFinished"
19696
+ },
19697
+ {
19698
+ "kind": "field",
19699
+ "name": "_presentation",
19700
+ "type": {
19701
+ "text": "ComponentPresentation | null | undefined"
19702
+ },
19703
+ "privacy": "private",
19704
+ "default": "void 0",
19705
+ "inheritedFrom": {
19706
+ "name": "FoundationElement",
19707
+ "module": "src/foundation-element/foundation-element.ts"
19708
+ }
19709
+ },
19710
+ {
19711
+ "kind": "field",
19712
+ "name": "$presentation",
19713
+ "type": {
19714
+ "text": "ComponentPresentation | null"
19715
+ },
19716
+ "privacy": "public",
19717
+ "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
19718
+ "inheritedFrom": {
19719
+ "name": "FoundationElement",
19720
+ "module": "src/foundation-element/foundation-element.ts"
19721
+ }
19722
+ },
19723
+ {
19724
+ "kind": "field",
19725
+ "name": "template",
19726
+ "type": {
19727
+ "text": "ElementViewTemplate | void | null"
19728
+ },
19729
+ "privacy": "public",
19730
+ "description": "Sets the template of the element instance. When undefined,\nthe element will attempt to resolve the template from\nthe associated presentation or custom element definition.",
19731
+ "inheritedFrom": {
19732
+ "name": "FoundationElement",
19733
+ "module": "src/foundation-element/foundation-element.ts"
19734
+ }
19735
+ },
19736
+ {
19737
+ "kind": "method",
19738
+ "name": "templateChanged",
19739
+ "privacy": "protected",
19740
+ "return": {
19741
+ "type": {
19742
+ "text": "void"
19743
+ }
19744
+ },
19745
+ "inheritedFrom": {
19746
+ "name": "FoundationElement",
19747
+ "module": "src/foundation-element/foundation-element.ts"
19748
+ }
19749
+ },
19750
+ {
19751
+ "kind": "field",
19752
+ "name": "styles",
19753
+ "type": {
19754
+ "text": "ElementStyles | void | null"
19755
+ },
19756
+ "privacy": "public",
19757
+ "description": "Sets the default styles for the element instance. When undefined,\nthe element will attempt to resolve default styles from\nthe associated presentation or custom element definition.",
19758
+ "inheritedFrom": {
19759
+ "name": "FoundationElement",
19760
+ "module": "src/foundation-element/foundation-element.ts"
19761
+ }
19762
+ },
19763
+ {
19764
+ "kind": "method",
19765
+ "name": "stylesChanged",
19766
+ "privacy": "protected",
19767
+ "return": {
19768
+ "type": {
19769
+ "text": "void"
19770
+ }
19771
+ },
19772
+ "inheritedFrom": {
19773
+ "name": "FoundationElement",
19774
+ "module": "src/foundation-element/foundation-element.ts"
19775
+ }
19776
+ },
19777
+ {
19778
+ "kind": "method",
19779
+ "name": "compose",
19780
+ "privacy": "public",
19781
+ "static": true,
19782
+ "return": {
19783
+ "type": {
19784
+ "text": "(\n overrideDefinition?: OverrideFoundationElementDefinition<T>\n ) => FoundationElementRegistry<T, K>"
19785
+ }
19786
+ },
19787
+ "parameters": [
19788
+ {
19789
+ "name": "this",
19790
+ "type": {
19791
+ "text": "K"
19792
+ }
19793
+ },
19794
+ {
19795
+ "name": "elementDefinition",
19796
+ "type": {
19797
+ "text": "T"
19798
+ },
19799
+ "description": "The definition of the element to create the registry\nfunction for."
19800
+ }
19801
+ ],
19802
+ "description": "Defines an element registry function with a set of element definition defaults.",
19803
+ "inheritedFrom": {
19804
+ "name": "FoundationElement",
19805
+ "module": "src/foundation-element/foundation-element.ts"
19806
+ }
19807
+ }
19808
+ ],
19809
+ "attributes": [
19810
+ {
19811
+ "name": "position",
19812
+ "type": {
19813
+ "text": "string"
19814
+ },
19815
+ "default": "'right'",
19816
+ "fieldName": "position"
19817
+ },
19818
+ {
19819
+ "type": {
19820
+ "text": "boolean"
19821
+ },
19822
+ "default": "true",
19823
+ "fieldName": "displayHeader"
19824
+ },
19825
+ {
19826
+ "type": {
19827
+ "text": "boolean"
19828
+ },
19829
+ "default": "true",
19830
+ "fieldName": "closed"
19831
+ },
19832
+ {
19833
+ "type": {
19834
+ "text": "boolean"
19835
+ },
19836
+ "default": "true",
19837
+ "fieldName": "visuallyhidden"
19838
+ }
19839
+ ],
19840
+ "superclass": {
19841
+ "name": "FoundationElement",
19842
+ "package": "@microsoft/fast-foundation"
19843
+ },
19844
+ "tagName": "%%prefix%%-flyout",
19845
+ "customElement": true
19846
+ },
19847
+ {
19848
+ "kind": "variable",
19849
+ "name": "foundationFlyoutShadowOptions",
19850
+ "type": {
19851
+ "text": "ShadowRootInit"
19852
+ },
19853
+ "default": "undefined"
19854
+ },
19855
+ {
19856
+ "kind": "variable",
19857
+ "name": "defaultFlyoutConfig",
19858
+ "type": {
19859
+ "text": "object"
19860
+ },
19861
+ "default": "{}"
19862
+ },
19863
+ {
19864
+ "kind": "variable",
19865
+ "name": "foundationFlyout",
19866
+ "description": "The Foundation Flyout",
19867
+ "privacy": "public"
19868
+ }
19869
+ ],
19870
+ "exports": [
19871
+ {
19872
+ "kind": "js",
19873
+ "name": "Flyout",
19874
+ "declaration": {
19875
+ "name": "Flyout",
19876
+ "module": "src/flyout/flyout.ts"
19877
+ }
19878
+ },
19879
+ {
19880
+ "kind": "js",
19881
+ "name": "foundationFlyoutShadowOptions",
19882
+ "declaration": {
19883
+ "name": "foundationFlyoutShadowOptions",
19884
+ "module": "src/flyout/flyout.ts"
19885
+ }
19886
+ },
19887
+ {
19888
+ "kind": "js",
19889
+ "name": "defaultFlyoutConfig",
19890
+ "declaration": {
19891
+ "name": "defaultFlyoutConfig",
19892
+ "module": "src/flyout/flyout.ts"
19893
+ }
19894
+ },
19895
+ {
19896
+ "kind": "js",
19897
+ "name": "foundationFlyout",
19898
+ "declaration": {
19899
+ "name": "foundationFlyout",
19900
+ "module": "src/flyout/flyout.ts"
19901
+ }
19902
+ }
19903
+ ]
19904
+ },
19905
+ {
19906
+ "kind": "javascript-module",
19907
+ "path": "src/flyout/index.ts",
19908
+ "declarations": [],
19909
+ "exports": [
19910
+ {
19911
+ "kind": "js",
19912
+ "name": "*",
19913
+ "declaration": {
19914
+ "name": "*",
19915
+ "package": "./flyout"
19916
+ }
19917
+ },
19918
+ {
19919
+ "kind": "js",
19920
+ "name": "*",
19921
+ "declaration": {
19922
+ "name": "*",
19923
+ "package": "./flyout.template"
19924
+ }
19925
+ },
19926
+ {
19927
+ "kind": "js",
19928
+ "name": "*",
19929
+ "declaration": {
19930
+ "name": "*",
19931
+ "package": "./flyout.styles"
19932
+ }
19933
+ }
19934
+ ]
19935
+ },
19936
+ {
19937
+ "kind": "javascript-module",
19938
+ "path": "src/horizontal-scroll/horizontal-scroll.styles.ts",
19939
+ "declarations": [
19940
+ {
19941
+ "kind": "function",
19942
+ "name": "foundationHorizontalScrollStyles",
19943
+ "return": {
19944
+ "type": {
19945
+ "text": "ElementStyles"
19946
+ }
19947
+ },
19948
+ "parameters": [
19949
+ {
19950
+ "name": "context",
19951
+ "type": {
19952
+ "text": "ElementDefinitionContext"
19953
+ }
19954
+ },
19955
+ {
19956
+ "name": "definition",
19957
+ "type": {
19958
+ "text": "FoundationElementDefinition"
19959
+ }
19960
+ }
19961
+ ]
19962
+ }
19963
+ ],
19964
+ "exports": [
19965
+ {
19966
+ "kind": "js",
19967
+ "name": "foundationHorizontalScrollStyles",
19968
+ "declaration": {
19969
+ "name": "foundationHorizontalScrollStyles",
19970
+ "module": "src/horizontal-scroll/horizontal-scroll.styles.ts"
19971
+ }
19972
+ }
19973
+ ]
19974
+ },
19975
+ {
19976
+ "kind": "javascript-module",
19977
+ "path": "src/horizontal-scroll/horizontal-scroll.template.ts",
19978
+ "declarations": [
19979
+ {
19980
+ "kind": "function",
19981
+ "name": "foundationHorizontalScrollTemplate",
19982
+ "return": {
19983
+ "type": {
19984
+ "text": "ViewTemplate<HorizontalScroll>"
19985
+ }
19986
+ },
19987
+ "parameters": [
19988
+ {
19989
+ "name": "context",
19990
+ "type": {
19991
+ "text": "ElementDefinitionContext"
19992
+ }
19993
+ },
19994
+ {
19995
+ "name": "definition",
19996
+ "type": {
19997
+ "text": "FoundationElementDefinition"
19998
+ }
19999
+ }
20000
+ ]
20001
+ }
20002
+ ],
20003
+ "exports": [
20004
20004
  {
20005
20005
  "kind": "js",
20006
20006
  "name": "foundationHorizontalScrollTemplate",
@@ -21505,7 +21505,7 @@
21505
21505
  },
21506
21506
  {
21507
21507
  "kind": "javascript-module",
21508
- "path": "src/listbox-option/index.ts",
21508
+ "path": "src/menu/index.ts",
21509
21509
  "declarations": [],
21510
21510
  "exports": [
21511
21511
  {
@@ -21513,7 +21513,7 @@
21513
21513
  "name": "*",
21514
21514
  "declaration": {
21515
21515
  "name": "*",
21516
- "package": "./listbox-option.template"
21516
+ "package": "./menu.template"
21517
21517
  }
21518
21518
  },
21519
21519
  {
@@ -21521,7 +21521,7 @@
21521
21521
  "name": "*",
21522
21522
  "declaration": {
21523
21523
  "name": "*",
21524
- "package": "./listbox-option.styles"
21524
+ "package": "./menu.styles"
21525
21525
  }
21526
21526
  },
21527
21527
  {
@@ -21529,18 +21529,18 @@
21529
21529
  "name": "*",
21530
21530
  "declaration": {
21531
21531
  "name": "*",
21532
- "package": "./listbox-option"
21532
+ "package": "./menu"
21533
21533
  }
21534
21534
  }
21535
21535
  ]
21536
21536
  },
21537
21537
  {
21538
21538
  "kind": "javascript-module",
21539
- "path": "src/listbox-option/listbox-option.styles.ts",
21539
+ "path": "src/menu/menu.styles.ts",
21540
21540
  "declarations": [
21541
21541
  {
21542
21542
  "kind": "function",
21543
- "name": "foundationListboxOptionStyles",
21543
+ "name": "foundationMenuStyles",
21544
21544
  "return": {
21545
21545
  "type": {
21546
21546
  "text": "ElementStyles"
@@ -21565,24 +21565,24 @@
21565
21565
  "exports": [
21566
21566
  {
21567
21567
  "kind": "js",
21568
- "name": "foundationListboxOptionStyles",
21568
+ "name": "foundationMenuStyles",
21569
21569
  "declaration": {
21570
- "name": "foundationListboxOptionStyles",
21571
- "module": "src/listbox-option/listbox-option.styles.ts"
21570
+ "name": "foundationMenuStyles",
21571
+ "module": "src/menu/menu.styles.ts"
21572
21572
  }
21573
21573
  }
21574
21574
  ]
21575
21575
  },
21576
21576
  {
21577
21577
  "kind": "javascript-module",
21578
- "path": "src/listbox-option/listbox-option.template.ts",
21578
+ "path": "src/menu/menu.template.ts",
21579
21579
  "declarations": [
21580
21580
  {
21581
21581
  "kind": "function",
21582
- "name": "foundationListboxOptionTemplate",
21582
+ "name": "foundationMenuTemplate",
21583
21583
  "return": {
21584
21584
  "type": {
21585
- "text": "ViewTemplate<ListboxOption>"
21585
+ "text": "ViewTemplate<Menu>"
21586
21586
  }
21587
21587
  },
21588
21588
  "parameters": [
@@ -21604,83 +21604,33 @@
21604
21604
  "exports": [
21605
21605
  {
21606
21606
  "kind": "js",
21607
- "name": "foundationListboxOptionTemplate",
21607
+ "name": "foundationMenuTemplate",
21608
21608
  "declaration": {
21609
- "name": "foundationListboxOptionTemplate",
21610
- "module": "src/listbox-option/listbox-option.template.ts"
21609
+ "name": "foundationMenuTemplate",
21610
+ "module": "src/menu/menu.template.ts"
21611
21611
  }
21612
21612
  }
21613
21613
  ]
21614
21614
  },
21615
21615
  {
21616
21616
  "kind": "javascript-module",
21617
- "path": "src/listbox-option/listbox-option.ts",
21617
+ "path": "src/menu/menu.ts",
21618
21618
  "declarations": [
21619
21619
  {
21620
21620
  "kind": "class",
21621
21621
  "description": "",
21622
- "name": "ListboxOption",
21622
+ "name": "Menu",
21623
21623
  "superclass": {
21624
- "name": "FASTListboxOption",
21624
+ "name": "FASTMenu",
21625
21625
  "package": "@microsoft/fast-components"
21626
21626
  },
21627
- "tagName": "%%prefix%%-option",
21627
+ "tagName": "%%prefix%%-menu",
21628
21628
  "customElement": true,
21629
- "attributes": [
21630
- {
21631
- "type": {
21632
- "text": "boolean"
21633
- },
21634
- "description": "The disabled state of the option.",
21635
- "fieldName": "disabled",
21636
- "inheritedFrom": {
21637
- "name": "ListboxOption",
21638
- "module": "src/listbox-option/listbox-option.ts"
21639
- }
21640
- },
21641
- {
21642
- "name": "selected",
21643
- "type": {
21644
- "text": "boolean"
21645
- },
21646
- "description": "The selected attribute value. This sets the initial selected value.",
21647
- "fieldName": "selectedAttribute",
21648
- "inheritedFrom": {
21649
- "name": "ListboxOption",
21650
- "module": "src/listbox-option/listbox-option.ts"
21651
- }
21652
- },
21653
- {
21654
- "name": "value",
21655
- "type": {
21656
- "text": "string"
21657
- },
21658
- "description": "The initial value of the option. This value sets the `value` property\nonly when the `value` property has not been explicitly set.",
21659
- "fieldName": "initialValue",
21660
- "inheritedFrom": {
21661
- "name": "ListboxOption",
21662
- "module": "src/listbox-option/listbox-option.ts"
21663
- }
21664
- }
21665
- ],
21666
21629
  "members": [
21667
- {
21668
- "kind": "field",
21669
- "name": "checked",
21670
- "type": {
21671
- "text": "boolean | undefined"
21672
- },
21673
- "privacy": "public",
21674
- "description": "The checked state is used when the parent listbox is in multiple selection mode.\nTo avoid accessibility conflicts, the checked state should not be present in\nsingle selection mode.",
21675
- "inheritedFrom": {
21676
- "name": "ListboxOption",
21677
- "module": "src/listbox-option/listbox-option.ts"
21678
- }
21679
- },
21680
21630
  {
21681
21631
  "kind": "method",
21682
- "name": "checkedChanged",
21683
- "privacy": "public",
21632
+ "name": "itemsChanged",
21633
+ "privacy": "private",
21684
21634
  "return": {
21685
21635
  "type": {
21686
21636
  "text": "void"
@@ -21688,194 +21638,191 @@
21688
21638
  },
21689
21639
  "parameters": [
21690
21640
  {
21691
- "name": "prev",
21641
+ "name": "oldValue",
21692
21642
  "type": {
21693
- "text": "boolean | unknown"
21694
- },
21695
- "description": "the previous checked value"
21643
+ "text": "HTMLElement[]"
21644
+ }
21696
21645
  },
21697
21646
  {
21698
- "name": "next",
21699
- "optional": true,
21647
+ "name": "newValue",
21700
21648
  "type": {
21701
- "text": "boolean"
21702
- },
21703
- "description": "the current checked value"
21649
+ "text": "HTMLElement[]"
21650
+ }
21704
21651
  }
21705
21652
  ],
21706
- "description": "Updates the ariaChecked property when the checked property changes.",
21707
21653
  "inheritedFrom": {
21708
- "name": "ListboxOption",
21709
- "module": "src/listbox-option/listbox-option.ts"
21654
+ "name": "Menu",
21655
+ "module": "src/menu/menu.ts"
21710
21656
  }
21711
21657
  },
21712
21658
  {
21713
21659
  "kind": "field",
21714
- "name": "content",
21660
+ "name": "menuItems",
21715
21661
  "type": {
21716
- "text": "Node[]"
21662
+ "text": "Element[] | undefined"
21717
21663
  },
21718
- "privacy": "public",
21719
- "description": "The default slotted content.",
21664
+ "privacy": "private",
21720
21665
  "inheritedFrom": {
21721
- "name": "ListboxOption",
21722
- "module": "src/listbox-option/listbox-option.ts"
21666
+ "name": "Menu",
21667
+ "module": "src/menu/menu.ts"
21723
21668
  }
21724
21669
  },
21725
21670
  {
21726
21671
  "kind": "field",
21727
- "name": "defaultSelected",
21672
+ "name": "expandedItem",
21728
21673
  "type": {
21729
- "text": "boolean"
21674
+ "text": "MenuItem | null"
21730
21675
  },
21731
- "privacy": "public",
21732
- "default": "false",
21733
- "description": "The defaultSelected state of the option.",
21676
+ "privacy": "private",
21677
+ "default": "null",
21734
21678
  "inheritedFrom": {
21735
- "name": "ListboxOption",
21736
- "module": "src/listbox-option/listbox-option.ts"
21679
+ "name": "Menu",
21680
+ "module": "src/menu/menu.ts"
21737
21681
  }
21738
21682
  },
21739
21683
  {
21740
- "kind": "method",
21741
- "name": "defaultSelectedChanged",
21742
- "privacy": "protected",
21743
- "return": {
21744
- "type": {
21745
- "text": "void"
21746
- }
21684
+ "kind": "field",
21685
+ "name": "focusIndex",
21686
+ "type": {
21687
+ "text": "number"
21747
21688
  },
21689
+ "privacy": "private",
21690
+ "default": "-1",
21691
+ "description": "The index of the focusable element in the items array\ndefaults to -1",
21748
21692
  "inheritedFrom": {
21749
- "name": "ListboxOption",
21750
- "module": "src/listbox-option/listbox-option.ts"
21693
+ "name": "Menu",
21694
+ "module": "src/menu/menu.ts"
21751
21695
  }
21752
21696
  },
21753
21697
  {
21754
21698
  "kind": "field",
21755
- "name": "disabled",
21699
+ "name": "focusableElementRoles",
21756
21700
  "type": {
21757
- "text": "boolean"
21701
+ "text": "{ [key: string]: string }"
21758
21702
  },
21759
- "privacy": "public",
21760
- "description": "The disabled state of the option.",
21703
+ "privacy": "private",
21704
+ "static": true,
21705
+ "default": "roleForMenuItem",
21761
21706
  "inheritedFrom": {
21762
- "name": "ListboxOption",
21763
- "module": "src/listbox-option/listbox-option.ts"
21707
+ "name": "Menu",
21708
+ "module": "src/menu/menu.ts"
21764
21709
  }
21765
21710
  },
21766
21711
  {
21767
21712
  "kind": "method",
21768
- "name": "disabledChanged",
21769
- "privacy": "protected",
21713
+ "name": "focus",
21714
+ "privacy": "public",
21770
21715
  "return": {
21771
21716
  "type": {
21772
21717
  "text": "void"
21773
21718
  }
21774
21719
  },
21775
- "parameters": [
21776
- {
21777
- "name": "prev",
21778
- "type": {
21779
- "text": "boolean"
21780
- }
21781
- },
21782
- {
21783
- "name": "next",
21784
- "type": {
21785
- "text": "boolean"
21786
- }
21787
- }
21788
- ],
21789
- "inheritedFrom": {
21790
- "name": "ListboxOption",
21791
- "module": "src/listbox-option/listbox-option.ts"
21792
- }
21793
- },
21794
- {
21795
- "kind": "field",
21796
- "name": "selectedAttribute",
21797
- "type": {
21798
- "text": "boolean"
21799
- },
21800
- "privacy": "public",
21801
- "description": "The selected attribute value. This sets the initial selected value.",
21720
+ "description": "Focuses the first item in the menu.",
21802
21721
  "inheritedFrom": {
21803
- "name": "ListboxOption",
21804
- "module": "src/listbox-option/listbox-option.ts"
21722
+ "name": "Menu",
21723
+ "module": "src/menu/menu.ts"
21805
21724
  }
21806
21725
  },
21807
21726
  {
21808
21727
  "kind": "method",
21809
- "name": "selectedAttributeChanged",
21810
- "privacy": "protected",
21728
+ "name": "collapseExpandedItem",
21729
+ "privacy": "public",
21811
21730
  "return": {
21812
21731
  "type": {
21813
21732
  "text": "void"
21814
21733
  }
21815
21734
  },
21735
+ "description": "Collapses any expanded menu items.",
21816
21736
  "inheritedFrom": {
21817
- "name": "ListboxOption",
21818
- "module": "src/listbox-option/listbox-option.ts"
21737
+ "name": "Menu",
21738
+ "module": "src/menu/menu.ts"
21819
21739
  }
21820
21740
  },
21821
21741
  {
21822
21742
  "kind": "field",
21823
- "name": "selected",
21824
- "type": {
21825
- "text": "boolean"
21826
- },
21827
- "privacy": "public",
21828
- "description": "The checked state of the control.",
21743
+ "name": "handleItemFocus",
21744
+ "privacy": "private",
21829
21745
  "inheritedFrom": {
21830
- "name": "ListboxOption",
21831
- "module": "src/listbox-option/listbox-option.ts"
21746
+ "name": "Menu",
21747
+ "module": "src/menu/menu.ts"
21748
+ }
21749
+ },
21750
+ {
21751
+ "kind": "field",
21752
+ "name": "handleExpandedChanged",
21753
+ "privacy": "private",
21754
+ "inheritedFrom": {
21755
+ "name": "Menu",
21756
+ "module": "src/menu/menu.ts"
21757
+ }
21758
+ },
21759
+ {
21760
+ "kind": "field",
21761
+ "name": "removeItemListeners",
21762
+ "privacy": "private",
21763
+ "inheritedFrom": {
21764
+ "name": "Menu",
21765
+ "module": "src/menu/menu.ts"
21766
+ }
21767
+ },
21768
+ {
21769
+ "kind": "field",
21770
+ "name": "setItems",
21771
+ "privacy": "private",
21772
+ "inheritedFrom": {
21773
+ "name": "Menu",
21774
+ "module": "src/menu/menu.ts"
21775
+ }
21776
+ },
21777
+ {
21778
+ "kind": "field",
21779
+ "name": "changeHandler",
21780
+ "privacy": "private",
21781
+ "description": "handle change from child element",
21782
+ "inheritedFrom": {
21783
+ "name": "Menu",
21784
+ "module": "src/menu/menu.ts"
21832
21785
  }
21833
21786
  },
21834
21787
  {
21835
21788
  "kind": "method",
21836
- "name": "selectedChanged",
21837
- "privacy": "protected",
21789
+ "name": "domChildren",
21790
+ "privacy": "private",
21838
21791
  "return": {
21839
21792
  "type": {
21840
- "text": "void"
21793
+ "text": "Element[]"
21841
21794
  }
21842
21795
  },
21796
+ "description": "get an array of valid DOM children",
21843
21797
  "inheritedFrom": {
21844
- "name": "ListboxOption",
21845
- "module": "src/listbox-option/listbox-option.ts"
21798
+ "name": "Menu",
21799
+ "module": "src/menu/menu.ts"
21846
21800
  }
21847
21801
  },
21848
21802
  {
21849
21803
  "kind": "field",
21850
- "name": "dirtyValue",
21851
- "type": {
21852
- "text": "boolean"
21853
- },
21854
- "privacy": "public",
21855
- "default": "false",
21856
- "description": "Track whether the value has been changed from the initial value",
21804
+ "name": "isMenuItemElement",
21805
+ "privacy": "private",
21806
+ "description": "check if the item is a menu item",
21857
21807
  "inheritedFrom": {
21858
- "name": "ListboxOption",
21859
- "module": "src/listbox-option/listbox-option.ts"
21808
+ "name": "Menu",
21809
+ "module": "src/menu/menu.ts"
21860
21810
  }
21861
21811
  },
21862
21812
  {
21863
21813
  "kind": "field",
21864
- "name": "initialValue",
21865
- "type": {
21866
- "text": "string"
21867
- },
21868
- "privacy": "protected",
21869
- "description": "The initial value of the option. This value sets the `value` property\nonly when the `value` property has not been explicitly set.",
21814
+ "name": "isFocusableElement",
21815
+ "privacy": "private",
21816
+ "description": "check if the item is focusable",
21870
21817
  "inheritedFrom": {
21871
- "name": "ListboxOption",
21872
- "module": "src/listbox-option/listbox-option.ts"
21818
+ "name": "Menu",
21819
+ "module": "src/menu/menu.ts"
21873
21820
  }
21874
21821
  },
21875
21822
  {
21876
21823
  "kind": "method",
21877
- "name": "initialValueChanged",
21878
- "privacy": "public",
21824
+ "name": "setFocus",
21825
+ "privacy": "private",
21879
21826
  "return": {
21880
21827
  "type": {
21881
21828
  "text": "void"
@@ -21883,75 +21830,21 @@
21883
21830
  },
21884
21831
  "parameters": [
21885
21832
  {
21886
- "name": "previous",
21833
+ "name": "focusIndex",
21887
21834
  "type": {
21888
- "text": "string"
21835
+ "text": "number"
21889
21836
  }
21890
21837
  },
21891
21838
  {
21892
- "name": "next",
21839
+ "name": "adjustment",
21893
21840
  "type": {
21894
- "text": "string"
21841
+ "text": "number"
21895
21842
  }
21896
21843
  }
21897
21844
  ],
21898
21845
  "inheritedFrom": {
21899
- "name": "ListboxOption",
21900
- "module": "src/listbox-option/listbox-option.ts"
21901
- }
21902
- },
21903
- {
21904
- "kind": "field",
21905
- "name": "label",
21906
- "privacy": "public",
21907
- "inheritedFrom": {
21908
- "name": "ListboxOption",
21909
- "module": "src/listbox-option/listbox-option.ts"
21910
- }
21911
- },
21912
- {
21913
- "kind": "field",
21914
- "name": "text",
21915
- "type": {
21916
- "text": "string"
21917
- },
21918
- "privacy": "public",
21919
- "inheritedFrom": {
21920
- "name": "ListboxOption",
21921
- "module": "src/listbox-option/listbox-option.ts"
21922
- }
21923
- },
21924
- {
21925
- "kind": "field",
21926
- "name": "value",
21927
- "privacy": "public",
21928
- "type": {
21929
- "text": "string"
21930
- },
21931
- "inheritedFrom": {
21932
- "name": "ListboxOption",
21933
- "module": "src/listbox-option/listbox-option.ts"
21934
- }
21935
- },
21936
- {
21937
- "kind": "field",
21938
- "name": "form",
21939
- "type": {
21940
- "text": "HTMLFormElement | null"
21941
- },
21942
- "privacy": "public",
21943
- "inheritedFrom": {
21944
- "name": "ListboxOption",
21945
- "module": "src/listbox-option/listbox-option.ts"
21946
- }
21947
- },
21948
- {
21949
- "kind": "field",
21950
- "name": "proxy",
21951
- "default": "new Option(\n `${this.textContent}`,\n this.initialValue,\n this.defaultSelected,\n this.selected\n )",
21952
- "inheritedFrom": {
21953
- "name": "ListboxOption",
21954
- "module": "src/listbox-option/listbox-option.ts"
21846
+ "name": "Menu",
21847
+ "module": "src/menu/menu.ts"
21955
21848
  }
21956
21849
  },
21957
21850
  {
@@ -22069,7 +21962,7 @@
22069
21962
  },
22070
21963
  {
22071
21964
  "kind": "variable",
22072
- "name": "foundationListboxOptionShadowOptions",
21965
+ "name": "foundationMenuShadowOptions",
22073
21966
  "type": {
22074
21967
  "text": "ShadowRootInit"
22075
21968
  },
@@ -22077,7 +21970,7 @@
22077
21970
  },
22078
21971
  {
22079
21972
  "kind": "variable",
22080
- "name": "defaultListboxOptionConfig",
21973
+ "name": "defaultMenuConfig",
22081
21974
  "type": {
22082
21975
  "text": "object"
22083
21976
  },
@@ -22085,47 +21978,49 @@
22085
21978
  },
22086
21979
  {
22087
21980
  "kind": "variable",
22088
- "name": "foundationListboxOption"
21981
+ "name": "foundationMenu",
21982
+ "description": "The Foundation Menu",
21983
+ "privacy": "public"
22089
21984
  }
22090
21985
  ],
22091
21986
  "exports": [
22092
21987
  {
22093
21988
  "kind": "js",
22094
- "name": "ListboxOption",
21989
+ "name": "Menu",
22095
21990
  "declaration": {
22096
- "name": "ListboxOption",
22097
- "module": "src/listbox-option/listbox-option.ts"
21991
+ "name": "Menu",
21992
+ "module": "src/menu/menu.ts"
22098
21993
  }
22099
21994
  },
22100
21995
  {
22101
21996
  "kind": "js",
22102
- "name": "foundationListboxOptionShadowOptions",
21997
+ "name": "foundationMenuShadowOptions",
22103
21998
  "declaration": {
22104
- "name": "foundationListboxOptionShadowOptions",
22105
- "module": "src/listbox-option/listbox-option.ts"
21999
+ "name": "foundationMenuShadowOptions",
22000
+ "module": "src/menu/menu.ts"
22106
22001
  }
22107
22002
  },
22108
22003
  {
22109
22004
  "kind": "js",
22110
- "name": "defaultListboxOptionConfig",
22005
+ "name": "defaultMenuConfig",
22111
22006
  "declaration": {
22112
- "name": "defaultListboxOptionConfig",
22113
- "module": "src/listbox-option/listbox-option.ts"
22007
+ "name": "defaultMenuConfig",
22008
+ "module": "src/menu/menu.ts"
22114
22009
  }
22115
22010
  },
22116
22011
  {
22117
22012
  "kind": "js",
22118
- "name": "foundationListboxOption",
22013
+ "name": "foundationMenu",
22119
22014
  "declaration": {
22120
- "name": "foundationListboxOption",
22121
- "module": "src/listbox-option/listbox-option.ts"
22015
+ "name": "foundationMenu",
22016
+ "module": "src/menu/menu.ts"
22122
22017
  }
22123
22018
  }
22124
22019
  ]
22125
22020
  },
22126
22021
  {
22127
22022
  "kind": "javascript-module",
22128
- "path": "src/menu/index.ts",
22023
+ "path": "src/menu-item/index.ts",
22129
22024
  "declarations": [],
22130
22025
  "exports": [
22131
22026
  {
@@ -22133,7 +22028,7 @@
22133
22028
  "name": "*",
22134
22029
  "declaration": {
22135
22030
  "name": "*",
22136
- "package": "./menu.template"
22031
+ "package": "./menu-item.template"
22137
22032
  }
22138
22033
  },
22139
22034
  {
@@ -22141,7 +22036,7 @@
22141
22036
  "name": "*",
22142
22037
  "declaration": {
22143
22038
  "name": "*",
22144
- "package": "./menu.styles"
22039
+ "package": "./menu-item.styles"
22145
22040
  }
22146
22041
  },
22147
22042
  {
@@ -22149,18 +22044,18 @@
22149
22044
  "name": "*",
22150
22045
  "declaration": {
22151
22046
  "name": "*",
22152
- "package": "./menu"
22047
+ "package": "./menu-item"
22153
22048
  }
22154
22049
  }
22155
22050
  ]
22156
22051
  },
22157
22052
  {
22158
22053
  "kind": "javascript-module",
22159
- "path": "src/menu/menu.styles.ts",
22054
+ "path": "src/menu-item/menu-item.styles.ts",
22160
22055
  "declarations": [
22161
22056
  {
22162
22057
  "kind": "function",
22163
- "name": "foundationMenuStyles",
22058
+ "name": "foundationMenuItemStyles",
22164
22059
  "return": {
22165
22060
  "type": {
22166
22061
  "text": "ElementStyles"
@@ -22176,7 +22071,7 @@
22176
22071
  {
22177
22072
  "name": "definition",
22178
22073
  "type": {
22179
- "text": "FoundationElementDefinition"
22074
+ "text": "MenuItemOptions"
22180
22075
  }
22181
22076
  }
22182
22077
  ]
@@ -22185,24 +22080,24 @@
22185
22080
  "exports": [
22186
22081
  {
22187
22082
  "kind": "js",
22188
- "name": "foundationMenuStyles",
22083
+ "name": "foundationMenuItemStyles",
22189
22084
  "declaration": {
22190
- "name": "foundationMenuStyles",
22191
- "module": "src/menu/menu.styles.ts"
22085
+ "name": "foundationMenuItemStyles",
22086
+ "module": "src/menu-item/menu-item.styles.ts"
22192
22087
  }
22193
22088
  }
22194
22089
  ]
22195
22090
  },
22196
22091
  {
22197
22092
  "kind": "javascript-module",
22198
- "path": "src/menu/menu.template.ts",
22093
+ "path": "src/menu-item/menu-item.template.ts",
22199
22094
  "declarations": [
22200
22095
  {
22201
22096
  "kind": "function",
22202
- "name": "foundationMenuTemplate",
22097
+ "name": "foundationMenuItemTemplate",
22203
22098
  "return": {
22204
22099
  "type": {
22205
- "text": "ViewTemplate<Menu>"
22100
+ "text": "ViewTemplate<MenuItem>"
22206
22101
  }
22207
22102
  },
22208
22103
  "parameters": [
@@ -22215,7 +22110,7 @@
22215
22110
  {
22216
22111
  "name": "definition",
22217
22112
  "type": {
22218
- "text": "FoundationElementDefinition"
22113
+ "text": "MenuItemOptions"
22219
22114
  }
22220
22115
  }
22221
22116
  ]
@@ -22224,247 +22119,194 @@
22224
22119
  "exports": [
22225
22120
  {
22226
22121
  "kind": "js",
22227
- "name": "foundationMenuTemplate",
22122
+ "name": "foundationMenuItemTemplate",
22228
22123
  "declaration": {
22229
- "name": "foundationMenuTemplate",
22230
- "module": "src/menu/menu.template.ts"
22124
+ "name": "foundationMenuItemTemplate",
22125
+ "module": "src/menu-item/menu-item.template.ts"
22231
22126
  }
22232
22127
  }
22233
22128
  ]
22234
22129
  },
22235
22130
  {
22236
22131
  "kind": "javascript-module",
22237
- "path": "src/menu/menu.ts",
22132
+ "path": "src/menu-item/menu-item.ts",
22238
22133
  "declarations": [
22239
22134
  {
22240
22135
  "kind": "class",
22241
22136
  "description": "",
22242
- "name": "Menu",
22137
+ "name": "MenuItem",
22243
22138
  "superclass": {
22244
- "name": "FASTMenu",
22139
+ "name": "FASTMenuItem",
22245
22140
  "package": "@microsoft/fast-components"
22246
22141
  },
22247
- "tagName": "%%prefix%%-menu",
22142
+ "tagName": "%%prefix%%-menu-item",
22248
22143
  "customElement": true,
22249
- "members": [
22250
- {
22251
- "kind": "method",
22252
- "name": "itemsChanged",
22253
- "privacy": "private",
22254
- "return": {
22255
- "type": {
22256
- "text": "void"
22257
- }
22258
- },
22259
- "parameters": [
22260
- {
22261
- "name": "oldValue",
22262
- "type": {
22263
- "text": "HTMLElement[]"
22264
- }
22265
- },
22266
- {
22267
- "name": "newValue",
22268
- "type": {
22269
- "text": "HTMLElement[]"
22270
- }
22271
- }
22272
- ],
22273
- "inheritedFrom": {
22274
- "name": "Menu",
22275
- "module": "src/menu/menu.ts"
22276
- }
22277
- },
22144
+ "attributes": [
22278
22145
  {
22279
- "kind": "field",
22280
- "name": "menuItems",
22281
22146
  "type": {
22282
- "text": "Element[] | undefined"
22147
+ "text": "boolean"
22283
22148
  },
22284
- "privacy": "private",
22149
+ "description": "The disabled state of the element.",
22150
+ "fieldName": "disabled",
22285
22151
  "inheritedFrom": {
22286
- "name": "Menu",
22287
- "module": "src/menu/menu.ts"
22152
+ "name": "MenuItem",
22153
+ "module": "src/menu-item/menu-item.ts"
22288
22154
  }
22289
22155
  },
22290
22156
  {
22291
- "kind": "field",
22292
- "name": "expandedItem",
22157
+ "name": "role",
22293
22158
  "type": {
22294
- "text": "MenuItem | null"
22159
+ "text": "MenuItemRole"
22295
22160
  },
22296
- "privacy": "private",
22297
- "default": "null",
22161
+ "description": "The role of the element.",
22162
+ "fieldName": "role",
22298
22163
  "inheritedFrom": {
22299
- "name": "Menu",
22300
- "module": "src/menu/menu.ts"
22164
+ "name": "MenuItem",
22165
+ "module": "src/menu-item/menu-item.ts"
22301
22166
  }
22302
- },
22167
+ }
22168
+ ],
22169
+ "members": [
22303
22170
  {
22304
22171
  "kind": "field",
22305
- "name": "focusIndex",
22172
+ "name": "disabled",
22306
22173
  "type": {
22307
- "text": "number"
22174
+ "text": "boolean"
22308
22175
  },
22309
- "privacy": "private",
22310
- "default": "-1",
22311
- "description": "The index of the focusable element in the items array\ndefaults to -1",
22176
+ "privacy": "public",
22177
+ "description": "The disabled state of the element.",
22312
22178
  "inheritedFrom": {
22313
- "name": "Menu",
22314
- "module": "src/menu/menu.ts"
22179
+ "name": "MenuItem",
22180
+ "module": "src/menu-item/menu-item.ts"
22315
22181
  }
22316
22182
  },
22317
22183
  {
22318
22184
  "kind": "field",
22319
- "name": "focusableElementRoles",
22185
+ "name": "expanded",
22320
22186
  "type": {
22321
- "text": "{ [key: string]: string }"
22187
+ "text": "boolean"
22322
22188
  },
22323
- "privacy": "private",
22324
- "static": true,
22325
- "default": "roleForMenuItem",
22326
- "inheritedFrom": {
22327
- "name": "Menu",
22328
- "module": "src/menu/menu.ts"
22329
- }
22330
- },
22331
- {
22332
- "kind": "method",
22333
- "name": "focus",
22334
22189
  "privacy": "public",
22335
- "return": {
22336
- "type": {
22337
- "text": "void"
22338
- }
22339
- },
22340
- "description": "Focuses the first item in the menu.",
22190
+ "description": "The expanded state of the element.",
22341
22191
  "inheritedFrom": {
22342
- "name": "Menu",
22343
- "module": "src/menu/menu.ts"
22192
+ "name": "MenuItem",
22193
+ "module": "src/menu-item/menu-item.ts"
22344
22194
  }
22345
22195
  },
22346
22196
  {
22347
22197
  "kind": "method",
22348
- "name": "collapseExpandedItem",
22349
- "privacy": "public",
22198
+ "name": "expandedChanged",
22199
+ "privacy": "private",
22350
22200
  "return": {
22351
22201
  "type": {
22352
22202
  "text": "void"
22353
22203
  }
22354
22204
  },
22355
- "description": "Collapses any expanded menu items.",
22356
- "inheritedFrom": {
22357
- "name": "Menu",
22358
- "module": "src/menu/menu.ts"
22359
- }
22360
- },
22361
- {
22362
- "kind": "field",
22363
- "name": "handleItemFocus",
22364
- "privacy": "private",
22365
- "inheritedFrom": {
22366
- "name": "Menu",
22367
- "module": "src/menu/menu.ts"
22368
- }
22369
- },
22370
- {
22371
- "kind": "field",
22372
- "name": "handleExpandedChanged",
22373
- "privacy": "private",
22374
- "inheritedFrom": {
22375
- "name": "Menu",
22376
- "module": "src/menu/menu.ts"
22377
- }
22378
- },
22379
- {
22380
- "kind": "field",
22381
- "name": "removeItemListeners",
22382
- "privacy": "private",
22205
+ "parameters": [
22206
+ {
22207
+ "name": "oldValue",
22208
+ "type": {
22209
+ "text": "boolean"
22210
+ }
22211
+ }
22212
+ ],
22383
22213
  "inheritedFrom": {
22384
- "name": "Menu",
22385
- "module": "src/menu/menu.ts"
22214
+ "name": "MenuItem",
22215
+ "module": "src/menu-item/menu-item.ts"
22386
22216
  }
22387
22217
  },
22388
22218
  {
22389
22219
  "kind": "field",
22390
- "name": "setItems",
22391
- "privacy": "private",
22220
+ "name": "role",
22221
+ "type": {
22222
+ "text": "MenuItemRole"
22223
+ },
22224
+ "privacy": "public",
22225
+ "description": "The role of the element.",
22392
22226
  "inheritedFrom": {
22393
- "name": "Menu",
22394
- "module": "src/menu/menu.ts"
22227
+ "name": "MenuItem",
22228
+ "module": "src/menu-item/menu-item.ts"
22395
22229
  }
22396
22230
  },
22397
22231
  {
22398
22232
  "kind": "field",
22399
- "name": "changeHandler",
22400
- "privacy": "private",
22401
- "description": "handle change from child element",
22233
+ "name": "checked",
22234
+ "type": {
22235
+ "text": "boolean"
22236
+ },
22237
+ "privacy": "public",
22238
+ "description": "The checked value of the element.",
22402
22239
  "inheritedFrom": {
22403
- "name": "Menu",
22404
- "module": "src/menu/menu.ts"
22240
+ "name": "MenuItem",
22241
+ "module": "src/menu-item/menu-item.ts"
22405
22242
  }
22406
22243
  },
22407
22244
  {
22408
22245
  "kind": "method",
22409
- "name": "domChildren",
22246
+ "name": "checkedChanged",
22410
22247
  "privacy": "private",
22411
22248
  "return": {
22412
22249
  "type": {
22413
- "text": "Element[]"
22250
+ "text": "void"
22414
22251
  }
22415
22252
  },
22416
- "description": "get an array of valid DOM children",
22253
+ "parameters": [
22254
+ {
22255
+ "name": "oldValue",
22256
+ "type": {
22257
+ "text": "boolean"
22258
+ }
22259
+ },
22260
+ {
22261
+ "name": "newValue",
22262
+ "type": {
22263
+ "text": "boolean"
22264
+ }
22265
+ }
22266
+ ],
22417
22267
  "inheritedFrom": {
22418
- "name": "Menu",
22419
- "module": "src/menu/menu.ts"
22268
+ "name": "MenuItem",
22269
+ "module": "src/menu-item/menu-item.ts"
22420
22270
  }
22421
22271
  },
22422
22272
  {
22423
22273
  "kind": "field",
22424
- "name": "isMenuItemElement",
22274
+ "name": "focusSubmenuOnLoad",
22275
+ "type": {
22276
+ "text": "boolean"
22277
+ },
22425
22278
  "privacy": "private",
22426
- "description": "check if the item is a menu item",
22279
+ "default": "false",
22427
22280
  "inheritedFrom": {
22428
- "name": "Menu",
22429
- "module": "src/menu/menu.ts"
22281
+ "name": "MenuItem",
22282
+ "module": "src/menu-item/menu-item.ts"
22430
22283
  }
22431
22284
  },
22432
22285
  {
22433
22286
  "kind": "field",
22434
- "name": "isFocusableElement",
22287
+ "name": "observer",
22288
+ "type": {
22289
+ "text": "MutationObserver | undefined"
22290
+ },
22435
22291
  "privacy": "private",
22436
- "description": "check if the item is focusable",
22437
22292
  "inheritedFrom": {
22438
- "name": "Menu",
22439
- "module": "src/menu/menu.ts"
22293
+ "name": "MenuItem",
22294
+ "module": "src/menu-item/menu-item.ts"
22440
22295
  }
22441
22296
  },
22442
22297
  {
22443
22298
  "kind": "method",
22444
- "name": "setFocus",
22299
+ "name": "domChildren",
22445
22300
  "privacy": "private",
22446
22301
  "return": {
22447
22302
  "type": {
22448
- "text": "void"
22303
+ "text": "Element[]"
22449
22304
  }
22450
22305
  },
22451
- "parameters": [
22452
- {
22453
- "name": "focusIndex",
22454
- "type": {
22455
- "text": "number"
22456
- }
22457
- },
22458
- {
22459
- "name": "adjustment",
22460
- "type": {
22461
- "text": "number"
22462
- }
22463
- }
22464
- ],
22306
+ "description": "get an array of valid DOM children",
22465
22307
  "inheritedFrom": {
22466
- "name": "Menu",
22467
- "module": "src/menu/menu.ts"
22308
+ "name": "MenuItem",
22309
+ "module": "src/menu-item/menu-item.ts"
22468
22310
  }
22469
22311
  },
22470
22312
  {
@@ -22578,11 +22420,29 @@
22578
22420
  "module": "src/foundation-element/foundation-element.ts"
22579
22421
  }
22580
22422
  }
22423
+ ],
22424
+ "events": [
22425
+ {
22426
+ "description": "Fires a custom 'expanded-change' event when the expanded state changes",
22427
+ "name": "expanded-change",
22428
+ "inheritedFrom": {
22429
+ "name": "MenuItem",
22430
+ "module": "src/menu-item/menu-item.ts"
22431
+ }
22432
+ },
22433
+ {
22434
+ "description": "Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked",
22435
+ "name": "change",
22436
+ "inheritedFrom": {
22437
+ "name": "MenuItem",
22438
+ "module": "src/menu-item/menu-item.ts"
22439
+ }
22440
+ }
22581
22441
  ]
22582
22442
  },
22583
22443
  {
22584
22444
  "kind": "variable",
22585
- "name": "foundationMenuShadowOptions",
22445
+ "name": "foundationMenuItemShadowOptions",
22586
22446
  "type": {
22587
22447
  "text": "ShadowRootInit"
22588
22448
  },
@@ -22590,57 +22450,57 @@
22590
22450
  },
22591
22451
  {
22592
22452
  "kind": "variable",
22593
- "name": "defaultMenuConfig",
22453
+ "name": "defaultMenuItemConfig",
22594
22454
  "type": {
22595
22455
  "text": "object"
22596
22456
  },
22597
- "default": "{}"
22457
+ "default": "{\n expandCollapseGlyph: `\n <svg\n class=\"expand-collapse-glyph\"\n part=\"expand-collapse-glyph\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.023 15.273L11.29 8 4.023.727l.704-.704L12.71 8l-7.984 7.977-.704-.704z\"\n />\n </svg>\n `,\n}"
22598
22458
  },
22599
22459
  {
22600
22460
  "kind": "variable",
22601
- "name": "foundationMenu",
22602
- "description": "The Foundation Menu",
22461
+ "name": "foundationMenuItem",
22462
+ "description": "The Foundation Menu Item",
22603
22463
  "privacy": "public"
22604
22464
  }
22605
22465
  ],
22606
22466
  "exports": [
22607
22467
  {
22608
22468
  "kind": "js",
22609
- "name": "Menu",
22469
+ "name": "MenuItem",
22610
22470
  "declaration": {
22611
- "name": "Menu",
22612
- "module": "src/menu/menu.ts"
22471
+ "name": "MenuItem",
22472
+ "module": "src/menu-item/menu-item.ts"
22613
22473
  }
22614
22474
  },
22615
22475
  {
22616
22476
  "kind": "js",
22617
- "name": "foundationMenuShadowOptions",
22477
+ "name": "foundationMenuItemShadowOptions",
22618
22478
  "declaration": {
22619
- "name": "foundationMenuShadowOptions",
22620
- "module": "src/menu/menu.ts"
22479
+ "name": "foundationMenuItemShadowOptions",
22480
+ "module": "src/menu-item/menu-item.ts"
22621
22481
  }
22622
22482
  },
22623
22483
  {
22624
22484
  "kind": "js",
22625
- "name": "defaultMenuConfig",
22485
+ "name": "defaultMenuItemConfig",
22626
22486
  "declaration": {
22627
- "name": "defaultMenuConfig",
22628
- "module": "src/menu/menu.ts"
22487
+ "name": "defaultMenuItemConfig",
22488
+ "module": "src/menu-item/menu-item.ts"
22629
22489
  }
22630
22490
  },
22631
22491
  {
22632
22492
  "kind": "js",
22633
- "name": "foundationMenu",
22493
+ "name": "foundationMenuItem",
22634
22494
  "declaration": {
22635
- "name": "foundationMenu",
22636
- "module": "src/menu/menu.ts"
22495
+ "name": "foundationMenuItem",
22496
+ "module": "src/menu-item/menu-item.ts"
22637
22497
  }
22638
22498
  }
22639
22499
  ]
22640
22500
  },
22641
22501
  {
22642
22502
  "kind": "javascript-module",
22643
- "path": "src/menu-item/index.ts",
22503
+ "path": "src/listbox-option/index.ts",
22644
22504
  "declarations": [],
22645
22505
  "exports": [
22646
22506
  {
@@ -22648,7 +22508,7 @@
22648
22508
  "name": "*",
22649
22509
  "declaration": {
22650
22510
  "name": "*",
22651
- "package": "./menu-item.template"
22511
+ "package": "./listbox-option.template"
22652
22512
  }
22653
22513
  },
22654
22514
  {
@@ -22656,7 +22516,7 @@
22656
22516
  "name": "*",
22657
22517
  "declaration": {
22658
22518
  "name": "*",
22659
- "package": "./menu-item.styles"
22519
+ "package": "./listbox-option.styles"
22660
22520
  }
22661
22521
  },
22662
22522
  {
@@ -22664,18 +22524,18 @@
22664
22524
  "name": "*",
22665
22525
  "declaration": {
22666
22526
  "name": "*",
22667
- "package": "./menu-item"
22527
+ "package": "./listbox-option"
22668
22528
  }
22669
22529
  }
22670
22530
  ]
22671
22531
  },
22672
22532
  {
22673
22533
  "kind": "javascript-module",
22674
- "path": "src/menu-item/menu-item.styles.ts",
22534
+ "path": "src/listbox-option/listbox-option.styles.ts",
22675
22535
  "declarations": [
22676
22536
  {
22677
22537
  "kind": "function",
22678
- "name": "foundationMenuItemStyles",
22538
+ "name": "foundationListboxOptionStyles",
22679
22539
  "return": {
22680
22540
  "type": {
22681
22541
  "text": "ElementStyles"
@@ -22691,7 +22551,7 @@
22691
22551
  {
22692
22552
  "name": "definition",
22693
22553
  "type": {
22694
- "text": "MenuItemOptions"
22554
+ "text": "FoundationElementDefinition"
22695
22555
  }
22696
22556
  }
22697
22557
  ]
@@ -22700,24 +22560,24 @@
22700
22560
  "exports": [
22701
22561
  {
22702
22562
  "kind": "js",
22703
- "name": "foundationMenuItemStyles",
22563
+ "name": "foundationListboxOptionStyles",
22704
22564
  "declaration": {
22705
- "name": "foundationMenuItemStyles",
22706
- "module": "src/menu-item/menu-item.styles.ts"
22565
+ "name": "foundationListboxOptionStyles",
22566
+ "module": "src/listbox-option/listbox-option.styles.ts"
22707
22567
  }
22708
22568
  }
22709
22569
  ]
22710
22570
  },
22711
22571
  {
22712
22572
  "kind": "javascript-module",
22713
- "path": "src/menu-item/menu-item.template.ts",
22573
+ "path": "src/listbox-option/listbox-option.template.ts",
22714
22574
  "declarations": [
22715
22575
  {
22716
22576
  "kind": "function",
22717
- "name": "foundationMenuItemTemplate",
22577
+ "name": "foundationListboxOptionTemplate",
22718
22578
  "return": {
22719
22579
  "type": {
22720
- "text": "ViewTemplate<MenuItem>"
22580
+ "text": "ViewTemplate<ListboxOption>"
22721
22581
  }
22722
22582
  },
22723
22583
  "parameters": [
@@ -22730,7 +22590,7 @@
22730
22590
  {
22731
22591
  "name": "definition",
22732
22592
  "type": {
22733
- "text": "MenuItemOptions"
22593
+ "text": "FoundationElementDefinition"
22734
22594
  }
22735
22595
  }
22736
22596
  ]
@@ -22739,84 +22599,169 @@
22739
22599
  "exports": [
22740
22600
  {
22741
22601
  "kind": "js",
22742
- "name": "foundationMenuItemTemplate",
22602
+ "name": "foundationListboxOptionTemplate",
22743
22603
  "declaration": {
22744
- "name": "foundationMenuItemTemplate",
22745
- "module": "src/menu-item/menu-item.template.ts"
22604
+ "name": "foundationListboxOptionTemplate",
22605
+ "module": "src/listbox-option/listbox-option.template.ts"
22746
22606
  }
22747
22607
  }
22748
22608
  ]
22749
22609
  },
22750
22610
  {
22751
22611
  "kind": "javascript-module",
22752
- "path": "src/menu-item/menu-item.ts",
22612
+ "path": "src/listbox-option/listbox-option.ts",
22753
22613
  "declarations": [
22754
22614
  {
22755
22615
  "kind": "class",
22756
22616
  "description": "",
22757
- "name": "MenuItem",
22617
+ "name": "ListboxOption",
22758
22618
  "superclass": {
22759
- "name": "FASTMenuItem",
22619
+ "name": "FASTListboxOption",
22760
22620
  "package": "@microsoft/fast-components"
22761
22621
  },
22762
- "tagName": "%%prefix%%-menu-item",
22622
+ "tagName": "%%prefix%%-option",
22763
22623
  "customElement": true,
22764
22624
  "attributes": [
22765
22625
  {
22766
22626
  "type": {
22767
22627
  "text": "boolean"
22768
22628
  },
22769
- "description": "The disabled state of the element.",
22629
+ "description": "The disabled state of the option.",
22770
22630
  "fieldName": "disabled",
22771
22631
  "inheritedFrom": {
22772
- "name": "MenuItem",
22773
- "module": "src/menu-item/menu-item.ts"
22632
+ "name": "ListboxOption",
22633
+ "module": "src/listbox-option/listbox-option.ts"
22774
22634
  }
22775
22635
  },
22776
22636
  {
22777
- "name": "role",
22637
+ "name": "selected",
22778
22638
  "type": {
22779
- "text": "MenuItemRole"
22639
+ "text": "boolean"
22780
22640
  },
22781
- "description": "The role of the element.",
22782
- "fieldName": "role",
22641
+ "description": "The selected attribute value. This sets the initial selected value.",
22642
+ "fieldName": "selectedAttribute",
22783
22643
  "inheritedFrom": {
22784
- "name": "MenuItem",
22785
- "module": "src/menu-item/menu-item.ts"
22644
+ "name": "ListboxOption",
22645
+ "module": "src/listbox-option/listbox-option.ts"
22646
+ }
22647
+ },
22648
+ {
22649
+ "name": "value",
22650
+ "type": {
22651
+ "text": "string"
22652
+ },
22653
+ "description": "The initial value of the option. This value sets the `value` property\nonly when the `value` property has not been explicitly set.",
22654
+ "fieldName": "initialValue",
22655
+ "inheritedFrom": {
22656
+ "name": "ListboxOption",
22657
+ "module": "src/listbox-option/listbox-option.ts"
22786
22658
  }
22787
22659
  }
22788
22660
  ],
22789
22661
  "members": [
22790
22662
  {
22791
22663
  "kind": "field",
22792
- "name": "disabled",
22664
+ "name": "checked",
22665
+ "type": {
22666
+ "text": "boolean | undefined"
22667
+ },
22668
+ "privacy": "public",
22669
+ "description": "The checked state is used when the parent listbox is in multiple selection mode.\nTo avoid accessibility conflicts, the checked state should not be present in\nsingle selection mode.",
22670
+ "inheritedFrom": {
22671
+ "name": "ListboxOption",
22672
+ "module": "src/listbox-option/listbox-option.ts"
22673
+ }
22674
+ },
22675
+ {
22676
+ "kind": "method",
22677
+ "name": "checkedChanged",
22678
+ "privacy": "public",
22679
+ "return": {
22680
+ "type": {
22681
+ "text": "void"
22682
+ }
22683
+ },
22684
+ "parameters": [
22685
+ {
22686
+ "name": "prev",
22687
+ "type": {
22688
+ "text": "boolean | unknown"
22689
+ },
22690
+ "description": "the previous checked value"
22691
+ },
22692
+ {
22693
+ "name": "next",
22694
+ "optional": true,
22695
+ "type": {
22696
+ "text": "boolean"
22697
+ },
22698
+ "description": "the current checked value"
22699
+ }
22700
+ ],
22701
+ "description": "Updates the ariaChecked property when the checked property changes.",
22702
+ "inheritedFrom": {
22703
+ "name": "ListboxOption",
22704
+ "module": "src/listbox-option/listbox-option.ts"
22705
+ }
22706
+ },
22707
+ {
22708
+ "kind": "field",
22709
+ "name": "content",
22710
+ "type": {
22711
+ "text": "Node[]"
22712
+ },
22713
+ "privacy": "public",
22714
+ "description": "The default slotted content.",
22715
+ "inheritedFrom": {
22716
+ "name": "ListboxOption",
22717
+ "module": "src/listbox-option/listbox-option.ts"
22718
+ }
22719
+ },
22720
+ {
22721
+ "kind": "field",
22722
+ "name": "defaultSelected",
22793
22723
  "type": {
22794
22724
  "text": "boolean"
22795
22725
  },
22796
22726
  "privacy": "public",
22797
- "description": "The disabled state of the element.",
22727
+ "default": "false",
22728
+ "description": "The defaultSelected state of the option.",
22798
22729
  "inheritedFrom": {
22799
- "name": "MenuItem",
22800
- "module": "src/menu-item/menu-item.ts"
22730
+ "name": "ListboxOption",
22731
+ "module": "src/listbox-option/listbox-option.ts"
22732
+ }
22733
+ },
22734
+ {
22735
+ "kind": "method",
22736
+ "name": "defaultSelectedChanged",
22737
+ "privacy": "protected",
22738
+ "return": {
22739
+ "type": {
22740
+ "text": "void"
22741
+ }
22742
+ },
22743
+ "inheritedFrom": {
22744
+ "name": "ListboxOption",
22745
+ "module": "src/listbox-option/listbox-option.ts"
22801
22746
  }
22802
22747
  },
22803
22748
  {
22804
22749
  "kind": "field",
22805
- "name": "expanded",
22750
+ "name": "disabled",
22806
22751
  "type": {
22807
22752
  "text": "boolean"
22808
22753
  },
22809
22754
  "privacy": "public",
22810
- "description": "The expanded state of the element.",
22755
+ "description": "The disabled state of the option.",
22811
22756
  "inheritedFrom": {
22812
- "name": "MenuItem",
22813
- "module": "src/menu-item/menu-item.ts"
22757
+ "name": "ListboxOption",
22758
+ "module": "src/listbox-option/listbox-option.ts"
22814
22759
  }
22815
22760
  },
22816
22761
  {
22817
22762
  "kind": "method",
22818
- "name": "expandedChanged",
22819
- "privacy": "private",
22763
+ "name": "disabledChanged",
22764
+ "privacy": "protected",
22820
22765
  "return": {
22821
22766
  "type": {
22822
22767
  "text": "void"
@@ -22824,47 +22769,108 @@
22824
22769
  },
22825
22770
  "parameters": [
22826
22771
  {
22827
- "name": "oldValue",
22772
+ "name": "prev",
22773
+ "type": {
22774
+ "text": "boolean"
22775
+ }
22776
+ },
22777
+ {
22778
+ "name": "next",
22828
22779
  "type": {
22829
22780
  "text": "boolean"
22830
22781
  }
22831
22782
  }
22832
22783
  ],
22833
22784
  "inheritedFrom": {
22834
- "name": "MenuItem",
22835
- "module": "src/menu-item/menu-item.ts"
22785
+ "name": "ListboxOption",
22786
+ "module": "src/listbox-option/listbox-option.ts"
22836
22787
  }
22837
22788
  },
22838
22789
  {
22839
22790
  "kind": "field",
22840
- "name": "role",
22791
+ "name": "selectedAttribute",
22841
22792
  "type": {
22842
- "text": "MenuItemRole"
22793
+ "text": "boolean"
22843
22794
  },
22844
22795
  "privacy": "public",
22845
- "description": "The role of the element.",
22796
+ "description": "The selected attribute value. This sets the initial selected value.",
22846
22797
  "inheritedFrom": {
22847
- "name": "MenuItem",
22848
- "module": "src/menu-item/menu-item.ts"
22798
+ "name": "ListboxOption",
22799
+ "module": "src/listbox-option/listbox-option.ts"
22800
+ }
22801
+ },
22802
+ {
22803
+ "kind": "method",
22804
+ "name": "selectedAttributeChanged",
22805
+ "privacy": "protected",
22806
+ "return": {
22807
+ "type": {
22808
+ "text": "void"
22809
+ }
22810
+ },
22811
+ "inheritedFrom": {
22812
+ "name": "ListboxOption",
22813
+ "module": "src/listbox-option/listbox-option.ts"
22849
22814
  }
22850
22815
  },
22851
22816
  {
22852
22817
  "kind": "field",
22853
- "name": "checked",
22818
+ "name": "selected",
22854
22819
  "type": {
22855
22820
  "text": "boolean"
22856
22821
  },
22857
22822
  "privacy": "public",
22858
- "description": "The checked value of the element.",
22823
+ "description": "The checked state of the control.",
22859
22824
  "inheritedFrom": {
22860
- "name": "MenuItem",
22861
- "module": "src/menu-item/menu-item.ts"
22825
+ "name": "ListboxOption",
22826
+ "module": "src/listbox-option/listbox-option.ts"
22862
22827
  }
22863
22828
  },
22864
22829
  {
22865
22830
  "kind": "method",
22866
- "name": "checkedChanged",
22867
- "privacy": "private",
22831
+ "name": "selectedChanged",
22832
+ "privacy": "protected",
22833
+ "return": {
22834
+ "type": {
22835
+ "text": "void"
22836
+ }
22837
+ },
22838
+ "inheritedFrom": {
22839
+ "name": "ListboxOption",
22840
+ "module": "src/listbox-option/listbox-option.ts"
22841
+ }
22842
+ },
22843
+ {
22844
+ "kind": "field",
22845
+ "name": "dirtyValue",
22846
+ "type": {
22847
+ "text": "boolean"
22848
+ },
22849
+ "privacy": "public",
22850
+ "default": "false",
22851
+ "description": "Track whether the value has been changed from the initial value",
22852
+ "inheritedFrom": {
22853
+ "name": "ListboxOption",
22854
+ "module": "src/listbox-option/listbox-option.ts"
22855
+ }
22856
+ },
22857
+ {
22858
+ "kind": "field",
22859
+ "name": "initialValue",
22860
+ "type": {
22861
+ "text": "string"
22862
+ },
22863
+ "privacy": "protected",
22864
+ "description": "The initial value of the option. This value sets the `value` property\nonly when the `value` property has not been explicitly set.",
22865
+ "inheritedFrom": {
22866
+ "name": "ListboxOption",
22867
+ "module": "src/listbox-option/listbox-option.ts"
22868
+ }
22869
+ },
22870
+ {
22871
+ "kind": "method",
22872
+ "name": "initialValueChanged",
22873
+ "privacy": "public",
22868
22874
  "return": {
22869
22875
  "type": {
22870
22876
  "text": "void"
@@ -22872,61 +22878,75 @@
22872
22878
  },
22873
22879
  "parameters": [
22874
22880
  {
22875
- "name": "oldValue",
22881
+ "name": "previous",
22876
22882
  "type": {
22877
- "text": "boolean"
22883
+ "text": "string"
22878
22884
  }
22879
22885
  },
22880
22886
  {
22881
- "name": "newValue",
22887
+ "name": "next",
22882
22888
  "type": {
22883
- "text": "boolean"
22889
+ "text": "string"
22884
22890
  }
22885
22891
  }
22886
22892
  ],
22887
22893
  "inheritedFrom": {
22888
- "name": "MenuItem",
22889
- "module": "src/menu-item/menu-item.ts"
22894
+ "name": "ListboxOption",
22895
+ "module": "src/listbox-option/listbox-option.ts"
22890
22896
  }
22891
22897
  },
22892
22898
  {
22893
22899
  "kind": "field",
22894
- "name": "focusSubmenuOnLoad",
22900
+ "name": "label",
22901
+ "privacy": "public",
22902
+ "inheritedFrom": {
22903
+ "name": "ListboxOption",
22904
+ "module": "src/listbox-option/listbox-option.ts"
22905
+ }
22906
+ },
22907
+ {
22908
+ "kind": "field",
22909
+ "name": "text",
22895
22910
  "type": {
22896
- "text": "boolean"
22911
+ "text": "string"
22897
22912
  },
22898
- "privacy": "private",
22899
- "default": "false",
22913
+ "privacy": "public",
22900
22914
  "inheritedFrom": {
22901
- "name": "MenuItem",
22902
- "module": "src/menu-item/menu-item.ts"
22915
+ "name": "ListboxOption",
22916
+ "module": "src/listbox-option/listbox-option.ts"
22903
22917
  }
22904
22918
  },
22905
22919
  {
22906
22920
  "kind": "field",
22907
- "name": "observer",
22921
+ "name": "value",
22922
+ "privacy": "public",
22908
22923
  "type": {
22909
- "text": "MutationObserver | undefined"
22924
+ "text": "string"
22910
22925
  },
22911
- "privacy": "private",
22912
22926
  "inheritedFrom": {
22913
- "name": "MenuItem",
22914
- "module": "src/menu-item/menu-item.ts"
22927
+ "name": "ListboxOption",
22928
+ "module": "src/listbox-option/listbox-option.ts"
22915
22929
  }
22916
22930
  },
22917
22931
  {
22918
- "kind": "method",
22919
- "name": "domChildren",
22920
- "privacy": "private",
22921
- "return": {
22922
- "type": {
22923
- "text": "Element[]"
22924
- }
22932
+ "kind": "field",
22933
+ "name": "form",
22934
+ "type": {
22935
+ "text": "HTMLFormElement | null"
22925
22936
  },
22926
- "description": "get an array of valid DOM children",
22937
+ "privacy": "public",
22927
22938
  "inheritedFrom": {
22928
- "name": "MenuItem",
22929
- "module": "src/menu-item/menu-item.ts"
22939
+ "name": "ListboxOption",
22940
+ "module": "src/listbox-option/listbox-option.ts"
22941
+ }
22942
+ },
22943
+ {
22944
+ "kind": "field",
22945
+ "name": "proxy",
22946
+ "default": "new Option(\n `${this.textContent}`,\n this.initialValue,\n this.defaultSelected,\n this.selected\n )",
22947
+ "inheritedFrom": {
22948
+ "name": "ListboxOption",
22949
+ "module": "src/listbox-option/listbox-option.ts"
22930
22950
  }
22931
22951
  },
22932
22952
  {
@@ -23040,29 +23060,11 @@
23040
23060
  "module": "src/foundation-element/foundation-element.ts"
23041
23061
  }
23042
23062
  }
23043
- ],
23044
- "events": [
23045
- {
23046
- "description": "Fires a custom 'expanded-change' event when the expanded state changes",
23047
- "name": "expanded-change",
23048
- "inheritedFrom": {
23049
- "name": "MenuItem",
23050
- "module": "src/menu-item/menu-item.ts"
23051
- }
23052
- },
23053
- {
23054
- "description": "Fires a custom 'change' event when a non-submenu item with a role of `menuitemcheckbox`, `menuitemradio`, or `menuitem` is invoked",
23055
- "name": "change",
23056
- "inheritedFrom": {
23057
- "name": "MenuItem",
23058
- "module": "src/menu-item/menu-item.ts"
23059
- }
23060
- }
23061
23063
  ]
23062
23064
  },
23063
23065
  {
23064
23066
  "kind": "variable",
23065
- "name": "foundationMenuItemShadowOptions",
23067
+ "name": "foundationListboxOptionShadowOptions",
23066
23068
  "type": {
23067
23069
  "text": "ShadowRootInit"
23068
23070
  },
@@ -23070,50 +23072,48 @@
23070
23072
  },
23071
23073
  {
23072
23074
  "kind": "variable",
23073
- "name": "defaultMenuItemConfig",
23075
+ "name": "defaultListboxOptionConfig",
23074
23076
  "type": {
23075
23077
  "text": "object"
23076
23078
  },
23077
- "default": "{\n expandCollapseGlyph: `\n <svg\n class=\"expand-collapse-glyph\"\n part=\"expand-collapse-glyph\"\n viewBox=\"0 0 16 16\"\n xmlns=\"http://www.w3.org/2000/svg\">\n <path\n d=\"M4.023 15.273L11.29 8 4.023.727l.704-.704L12.71 8l-7.984 7.977-.704-.704z\"\n />\n </svg>\n `,\n}"
23079
+ "default": "{}"
23078
23080
  },
23079
23081
  {
23080
23082
  "kind": "variable",
23081
- "name": "foundationMenuItem",
23082
- "description": "The Foundation Menu Item",
23083
- "privacy": "public"
23083
+ "name": "foundationListboxOption"
23084
23084
  }
23085
23085
  ],
23086
23086
  "exports": [
23087
23087
  {
23088
23088
  "kind": "js",
23089
- "name": "MenuItem",
23089
+ "name": "ListboxOption",
23090
23090
  "declaration": {
23091
- "name": "MenuItem",
23092
- "module": "src/menu-item/menu-item.ts"
23091
+ "name": "ListboxOption",
23092
+ "module": "src/listbox-option/listbox-option.ts"
23093
23093
  }
23094
23094
  },
23095
23095
  {
23096
23096
  "kind": "js",
23097
- "name": "foundationMenuItemShadowOptions",
23097
+ "name": "foundationListboxOptionShadowOptions",
23098
23098
  "declaration": {
23099
- "name": "foundationMenuItemShadowOptions",
23100
- "module": "src/menu-item/menu-item.ts"
23099
+ "name": "foundationListboxOptionShadowOptions",
23100
+ "module": "src/listbox-option/listbox-option.ts"
23101
23101
  }
23102
23102
  },
23103
23103
  {
23104
23104
  "kind": "js",
23105
- "name": "defaultMenuItemConfig",
23105
+ "name": "defaultListboxOptionConfig",
23106
23106
  "declaration": {
23107
- "name": "defaultMenuItemConfig",
23108
- "module": "src/menu-item/menu-item.ts"
23107
+ "name": "defaultListboxOptionConfig",
23108
+ "module": "src/listbox-option/listbox-option.ts"
23109
23109
  }
23110
23110
  },
23111
23111
  {
23112
23112
  "kind": "js",
23113
- "name": "foundationMenuItem",
23113
+ "name": "foundationListboxOption",
23114
23114
  "declaration": {
23115
- "name": "foundationMenuItem",
23116
- "module": "src/menu-item/menu-item.ts"
23115
+ "name": "foundationListboxOption",
23116
+ "module": "src/listbox-option/listbox-option.ts"
23117
23117
  }
23118
23118
  }
23119
23119
  ]
@@ -38047,440 +38047,16 @@
38047
38047
  "description": "{@inheritDoc (FormAssociated:interface).validate}",
38048
38048
  "inheritedFrom": {
38049
38049
  "name": "TextField",
38050
- "module": "src/text-field/text-field.ts"
38051
- }
38052
- },
38053
- {
38054
- "kind": "field",
38055
- "name": "proxy",
38056
- "inheritedFrom": {
38057
- "name": "TextField",
38058
- "module": "src/text-field/text-field.ts"
38059
- }
38060
- },
38061
- {
38062
- "kind": "field",
38063
- "name": "_presentation",
38064
- "type": {
38065
- "text": "ComponentPresentation | null | undefined"
38066
- },
38067
- "privacy": "private",
38068
- "default": "void 0",
38069
- "inheritedFrom": {
38070
- "name": "TextField",
38071
- "module": "src/text-field/text-field.ts"
38072
- }
38073
- },
38074
- {
38075
- "kind": "field",
38076
- "name": "$presentation",
38077
- "type": {
38078
- "text": "ComponentPresentation | null"
38079
- },
38080
- "privacy": "public",
38081
- "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
38082
- "inheritedFrom": {
38083
- "name": "TextField",
38084
- "module": "src/text-field/text-field.ts"
38085
- }
38086
- },
38087
- {
38088
- "kind": "field",
38089
- "name": "template",
38090
- "type": {
38091
- "text": "ElementViewTemplate | void | null"
38092
- },
38093
- "privacy": "public",
38094
- "description": "Sets the template of the element instance. When undefined,\nthe element will attempt to resolve the template from\nthe associated presentation or custom element definition.",
38095
- "inheritedFrom": {
38096
- "name": "TextField",
38097
- "module": "src/text-field/text-field.ts"
38098
- }
38099
- },
38100
- {
38101
- "kind": "method",
38102
- "name": "templateChanged",
38103
- "privacy": "protected",
38104
- "return": {
38105
- "type": {
38106
- "text": "void"
38107
- }
38108
- },
38109
- "inheritedFrom": {
38110
- "name": "TextField",
38111
- "module": "src/text-field/text-field.ts"
38112
- }
38113
- },
38114
- {
38115
- "kind": "field",
38116
- "name": "styles",
38117
- "type": {
38118
- "text": "ElementStyles | void | null"
38119
- },
38120
- "privacy": "public",
38121
- "description": "Sets the default styles for the element instance. When undefined,\nthe element will attempt to resolve default styles from\nthe associated presentation or custom element definition.",
38122
- "inheritedFrom": {
38123
- "name": "TextField",
38124
- "module": "src/text-field/text-field.ts"
38125
- }
38126
- },
38127
- {
38128
- "kind": "method",
38129
- "name": "stylesChanged",
38130
- "privacy": "protected",
38131
- "return": {
38132
- "type": {
38133
- "text": "void"
38134
- }
38135
- },
38136
- "inheritedFrom": {
38137
- "name": "TextField",
38138
- "module": "src/text-field/text-field.ts"
38139
- }
38140
- },
38141
- {
38142
- "kind": "method",
38143
- "name": "compose",
38144
- "privacy": "public",
38145
- "static": true,
38146
- "return": {
38147
- "type": {
38148
- "text": "(\n overrideDefinition?: OverrideFoundationElementDefinition<T>\n ) => FoundationElementRegistry<T, K>"
38149
- }
38150
- },
38151
- "parameters": [
38152
- {
38153
- "name": "this",
38154
- "type": {
38155
- "text": "K"
38156
- }
38157
- },
38158
- {
38159
- "name": "elementDefinition",
38160
- "type": {
38161
- "text": "T"
38162
- },
38163
- "description": "The definition of the element to create the registry\nfunction for."
38164
- }
38165
- ],
38166
- "description": "Defines an element registry function with a set of element definition defaults.",
38167
- "inheritedFrom": {
38168
- "name": "TextField",
38169
- "module": "src/text-field/text-field.ts"
38170
- }
38171
- }
38172
- ],
38173
- "attributes": [
38174
- {
38175
- "name": "autocomplete",
38176
- "type": {
38177
- "text": "string"
38178
- },
38179
- "fieldName": "autocomplete"
38180
- },
38181
- {
38182
- "name": "autocapitalize",
38183
- "type": {
38184
- "text": "string"
38185
- },
38186
- "default": "'off'",
38187
- "fieldName": "autocapitalize"
38188
- },
38189
- {
38190
- "name": "step",
38191
- "type": {
38192
- "text": "number"
38193
- },
38194
- "fieldName": "step"
38195
- },
38196
- {
38197
- "name": "readonly",
38198
- "type": {
38199
- "text": "boolean"
38200
- },
38201
- "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.",
38202
- "fieldName": "readOnly",
38203
- "inheritedFrom": {
38204
- "name": "TextField",
38205
- "module": "src/text-field/text-field.ts"
38206
- }
38207
- },
38208
- {
38209
- "type": {
38210
- "text": "boolean"
38211
- },
38212
- "description": "Indicates that this element should get focus after the page finishes loading. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute for more information.",
38213
- "fieldName": "autofocus",
38214
- "inheritedFrom": {
38215
- "name": "TextField",
38216
- "module": "src/text-field/text-field.ts"
38217
- }
38218
- },
38219
- {
38220
- "name": "placeholder",
38221
- "type": {
38222
- "text": "string"
38223
- },
38224
- "description": "Sets the placeholder value of the element, generally used to provide a hint to the user.",
38225
- "fieldName": "placeholder",
38226
- "inheritedFrom": {
38227
- "name": "TextField",
38228
- "module": "src/text-field/text-field.ts"
38229
- }
38230
- },
38231
- {
38232
- "name": "type",
38233
- "type": {
38234
- "text": "TextFieldType"
38235
- },
38236
- "description": "Allows setting a type or mode of text.",
38237
- "fieldName": "type",
38238
- "inheritedFrom": {
38239
- "name": "TextField",
38240
- "module": "src/text-field/text-field.ts"
38241
- }
38242
- },
38243
- {
38244
- "name": "list",
38245
- "type": {
38246
- "text": "string"
38247
- },
38248
- "description": "Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id.",
38249
- "fieldName": "list",
38250
- "inheritedFrom": {
38251
- "name": "TextField",
38252
- "module": "src/text-field/text-field.ts"
38253
- }
38254
- },
38255
- {
38256
- "name": "pattern",
38257
- "type": {
38258
- "text": "string"
38259
- },
38260
- "description": "A regular expression that the value must match to pass validation.",
38261
- "fieldName": "pattern",
38262
- "inheritedFrom": {
38263
- "name": "TextField",
38264
- "module": "src/text-field/text-field.ts"
38265
- }
38266
- }
38267
- ],
38268
- "superclass": {
38269
- "name": "FASTTextField",
38270
- "package": "@microsoft/fast-components"
38271
- },
38272
- "tagName": "%%prefix%%-text-field",
38273
- "customElement": true,
38274
- "events": [
38275
- {
38276
- "description": "Fires a custom 'change' event when the value has changed",
38277
- "name": "change",
38278
- "inheritedFrom": {
38279
- "name": "TextField",
38280
- "module": "src/text-field/text-field.ts"
38281
- }
38282
- }
38283
- ]
38284
- },
38285
- {
38286
- "kind": "variable",
38287
- "name": "foundationTextFieldShadowOptions",
38288
- "type": {
38289
- "text": "ShadowRootInit"
38290
- },
38291
- "default": "{\n mode: 'open',\n delegatesFocus: true,\n}"
38292
- },
38293
- {
38294
- "kind": "variable",
38295
- "name": "defaultTextFieldConfig",
38296
- "type": {
38297
- "text": "object"
38298
- },
38299
- "default": "{}"
38300
- },
38301
- {
38302
- "kind": "variable",
38303
- "name": "foundationTextField",
38304
- "description": "The Foundation Text Fields",
38305
- "privacy": "public"
38306
- }
38307
- ],
38308
- "exports": [
38309
- {
38310
- "kind": "js",
38311
- "name": "TextField",
38312
- "declaration": {
38313
- "name": "TextField",
38314
- "module": "src/text-field/text-field.ts"
38315
- }
38316
- },
38317
- {
38318
- "kind": "js",
38319
- "name": "foundationTextFieldShadowOptions",
38320
- "declaration": {
38321
- "name": "foundationTextFieldShadowOptions",
38322
- "module": "src/text-field/text-field.ts"
38323
- }
38324
- },
38325
- {
38326
- "kind": "js",
38327
- "name": "defaultTextFieldConfig",
38328
- "declaration": {
38329
- "name": "defaultTextFieldConfig",
38330
- "module": "src/text-field/text-field.ts"
38331
- }
38332
- },
38333
- {
38334
- "kind": "js",
38335
- "name": "foundationTextField",
38336
- "declaration": {
38337
- "name": "foundationTextField",
38338
- "module": "src/text-field/text-field.ts"
38339
- }
38340
- }
38341
- ]
38342
- },
38343
- {
38344
- "kind": "javascript-module",
38345
- "path": "src/toast/index.ts",
38346
- "declarations": [],
38347
- "exports": [
38348
- {
38349
- "kind": "js",
38350
- "name": "*",
38351
- "declaration": {
38352
- "name": "*",
38353
- "package": "./toast.styles"
38354
- }
38355
- },
38356
- {
38357
- "kind": "js",
38358
- "name": "*",
38359
- "declaration": {
38360
- "name": "*",
38361
- "package": "./toast.template"
38362
- }
38363
- },
38364
- {
38365
- "kind": "js",
38366
- "name": "*",
38367
- "declaration": {
38368
- "name": "*",
38369
- "package": "./toast"
38370
- }
38371
- }
38372
- ]
38373
- },
38374
- {
38375
- "kind": "javascript-module",
38376
- "path": "src/toast/toast.styles.ts",
38377
- "declarations": [
38378
- {
38379
- "kind": "variable",
38380
- "name": "foundationToastStyles",
38381
- "type": {
38382
- "text": "ElementStyles"
38383
- },
38384
- "default": "css`\n @keyframes append-animate {\n from {\n transform: translateX(100%);\n opacity: 0%;\n }\n\n to {\n transform: translateX(0%);\n opacity: 100%;\n }\n }\n\n @keyframes delete-animate {\n from {\n transform: translateX(0%);\n opacity: 100%;\n }\n\n to {\n transform: translateX(100%);\n opacity: 0%;\n }\n }\n\n :host {\n --toast-min-width: 356px;\n --toast-min-height: 128px;\n --toast-max-width: 356px;\n --toast-max-height: 272px;\n }\n\n .toast {\n animation: append-animate 0.3s linear;\n max-width: var(--toast-max-width);\n min-width: var(--toast-min-width);\n background-color: var(--fill-color);\n border-radius: calc(var(--control-corner-radius) * 1px);\n border-width: thin;\n border-color: var(--neutral-fill-rest);\n box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);\n display: flex;\n position: relative;\n flex-direction: row;\n padding: 8px 8px 8px 15px;\n margin: 5px;\n }\n\n .toast-delete {\n animation: delete-animate 0.3s linear;\n opacity: 0%;\n }\n\n .toast::after {\n content: '';\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 5px;\n height: calc(100% - 10px);\n width: 4px;\n border-radius: 2px;\n background-color: red;\n }\n\n .content-wrapper {\n height: fit-content;\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: stretch;\n }\n\n .bottom {\n width: 70%;\n }\n\n .top {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n }\n\n .content {\n width: 85%;\n font-size: 12px;\n overflow-wrap: break-word;\n }\n\n .date {\n color: var(--neutral-foreground-hint);\n font-size: 12px;\n margin: 0 0 5px;\n }\n\n .close-icon svg {\n cursor: pointer;\n }\n`"
38385
- }
38386
- ],
38387
- "exports": [
38388
- {
38389
- "kind": "js",
38390
- "name": "foundationToastStyles",
38391
- "declaration": {
38392
- "name": "foundationToastStyles",
38393
- "module": "src/toast/toast.styles.ts"
38394
- }
38395
- }
38396
- ]
38397
- },
38398
- {
38399
- "kind": "javascript-module",
38400
- "path": "src/toast/toast.template.ts",
38401
- "declarations": [
38402
- {
38403
- "kind": "variable",
38404
- "name": "foundationToastTemplate",
38405
- "type": {
38406
- "text": "ViewTemplate<Toast>"
38407
- },
38408
- "default": "html`\n <div class=\"toast ${(x) => x.deleteAnimation}\" ${ref('toast')}>\n <div class=\"content-wrapper\">\n <div part=\"top\" class=\"top\">\n <slot name=\"top\"></slot>\n <div class=\"close-icon\" @click=${(x) => x.close()}>${closeIcon()}</div>\n </div>\n <div part=\"content\" class=\"content\">\n <slot name=\"content\"></slot>\n </div>\n <div part=\"date\" class=\"date\">\n <slot name=\"date\"></slot>\n </div>\n <div part=\"bottom\" class=\"bottom\">\n <slot name=\"bottom\"></slot>\n </div>\n </div>\n </div>\n`"
38409
- }
38410
- ],
38411
- "exports": [
38412
- {
38413
- "kind": "js",
38414
- "name": "foundationToastTemplate",
38415
- "declaration": {
38416
- "name": "foundationToastTemplate",
38417
- "module": "src/toast/toast.template.ts"
38418
- }
38419
- }
38420
- ]
38421
- },
38422
- {
38423
- "kind": "javascript-module",
38424
- "path": "src/toast/toast.ts",
38425
- "declarations": [
38426
- {
38427
- "kind": "variable",
38428
- "name": "foundationToastShadowOptions",
38429
- "type": {
38430
- "text": "ShadowRootInit"
38431
- },
38432
- "default": "{\n mode: 'open',\n delegatesFocus: true,\n}"
38433
- },
38434
- {
38435
- "kind": "variable",
38436
- "name": "defaultToastConfig",
38437
- "type": {
38438
- "text": "object"
38439
- },
38440
- "default": "{}"
38441
- },
38442
- {
38443
- "kind": "class",
38444
- "description": "",
38445
- "name": "Toast",
38446
- "members": [
38447
- {
38448
- "kind": "field",
38449
- "name": "toast",
38450
- "type": {
38451
- "text": "HTMLElement"
38452
- },
38453
- "privacy": "public"
38454
- },
38455
- {
38456
- "kind": "field",
38457
- "name": "deleteAnimation",
38458
- "type": {
38459
- "text": "string"
38460
- },
38461
- "default": "''"
38462
- },
38463
- {
38464
- "kind": "field",
38465
- "name": "closeTimeout",
38466
- "type": {
38467
- "text": "number"
38468
- },
38469
- "default": "10000"
38470
- },
38471
- {
38472
- "kind": "field",
38473
- "name": "autoClose",
38474
- "type": {
38475
- "text": "boolean"
38476
- },
38477
- "default": "false"
38050
+ "module": "src/text-field/text-field.ts"
38051
+ }
38478
38052
  },
38479
38053
  {
38480
- "kind": "method",
38481
- "name": "close",
38482
- "privacy": "public",
38483
- "description": "Remove the toast from display."
38054
+ "kind": "field",
38055
+ "name": "proxy",
38056
+ "inheritedFrom": {
38057
+ "name": "TextField",
38058
+ "module": "src/text-field/text-field.ts"
38059
+ }
38484
38060
  },
38485
38061
  {
38486
38062
  "kind": "field",
@@ -38491,8 +38067,8 @@
38491
38067
  "privacy": "private",
38492
38068
  "default": "void 0",
38493
38069
  "inheritedFrom": {
38494
- "name": "FoundationElement",
38495
- "module": "src/foundation-element/foundation-element.ts"
38070
+ "name": "TextField",
38071
+ "module": "src/text-field/text-field.ts"
38496
38072
  }
38497
38073
  },
38498
38074
  {
@@ -38504,8 +38080,8 @@
38504
38080
  "privacy": "public",
38505
38081
  "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
38506
38082
  "inheritedFrom": {
38507
- "name": "FoundationElement",
38508
- "module": "src/foundation-element/foundation-element.ts"
38083
+ "name": "TextField",
38084
+ "module": "src/text-field/text-field.ts"
38509
38085
  }
38510
38086
  },
38511
38087
  {
@@ -38517,8 +38093,8 @@
38517
38093
  "privacy": "public",
38518
38094
  "description": "Sets the template of the element instance. When undefined,\nthe element will attempt to resolve the template from\nthe associated presentation or custom element definition.",
38519
38095
  "inheritedFrom": {
38520
- "name": "FoundationElement",
38521
- "module": "src/foundation-element/foundation-element.ts"
38096
+ "name": "TextField",
38097
+ "module": "src/text-field/text-field.ts"
38522
38098
  }
38523
38099
  },
38524
38100
  {
@@ -38531,8 +38107,8 @@
38531
38107
  }
38532
38108
  },
38533
38109
  "inheritedFrom": {
38534
- "name": "FoundationElement",
38535
- "module": "src/foundation-element/foundation-element.ts"
38110
+ "name": "TextField",
38111
+ "module": "src/text-field/text-field.ts"
38536
38112
  }
38537
38113
  },
38538
38114
  {
@@ -38544,8 +38120,8 @@
38544
38120
  "privacy": "public",
38545
38121
  "description": "Sets the default styles for the element instance. When undefined,\nthe element will attempt to resolve default styles from\nthe associated presentation or custom element definition.",
38546
38122
  "inheritedFrom": {
38547
- "name": "FoundationElement",
38548
- "module": "src/foundation-element/foundation-element.ts"
38123
+ "name": "TextField",
38124
+ "module": "src/text-field/text-field.ts"
38549
38125
  }
38550
38126
  },
38551
38127
  {
@@ -38558,8 +38134,8 @@
38558
38134
  }
38559
38135
  },
38560
38136
  "inheritedFrom": {
38561
- "name": "FoundationElement",
38562
- "module": "src/foundation-element/foundation-element.ts"
38137
+ "name": "TextField",
38138
+ "module": "src/text-field/text-field.ts"
38563
38139
  }
38564
38140
  },
38565
38141
  {
@@ -38589,74 +38165,177 @@
38589
38165
  ],
38590
38166
  "description": "Defines an element registry function with a set of element definition defaults.",
38591
38167
  "inheritedFrom": {
38592
- "name": "FoundationElement",
38593
- "module": "src/foundation-element/foundation-element.ts"
38168
+ "name": "TextField",
38169
+ "module": "src/text-field/text-field.ts"
38594
38170
  }
38595
38171
  }
38596
38172
  ],
38597
38173
  "attributes": [
38598
38174
  {
38599
- "name": "close-timeout",
38175
+ "name": "autocomplete",
38176
+ "type": {
38177
+ "text": "string"
38178
+ },
38179
+ "fieldName": "autocomplete"
38180
+ },
38181
+ {
38182
+ "name": "autocapitalize",
38183
+ "type": {
38184
+ "text": "string"
38185
+ },
38186
+ "default": "'off'",
38187
+ "fieldName": "autocapitalize"
38188
+ },
38189
+ {
38190
+ "name": "step",
38600
38191
  "type": {
38601
38192
  "text": "number"
38602
38193
  },
38603
- "default": "10000",
38604
- "fieldName": "closeTimeout"
38194
+ "fieldName": "step"
38605
38195
  },
38606
38196
  {
38607
- "name": "auto-close",
38197
+ "name": "readonly",
38608
38198
  "type": {
38609
38199
  "text": "boolean"
38610
38200
  },
38611
- "default": "false",
38612
- "fieldName": "autoClose"
38201
+ "description": "When true, the control will be immutable by user interaction. See https://developer.mozilla.org/en-US/docs/Web/HTML/Attributes/readonly | readonly HTML attribute for more information.",
38202
+ "fieldName": "readOnly",
38203
+ "inheritedFrom": {
38204
+ "name": "TextField",
38205
+ "module": "src/text-field/text-field.ts"
38206
+ }
38207
+ },
38208
+ {
38209
+ "type": {
38210
+ "text": "boolean"
38211
+ },
38212
+ "description": "Indicates that this element should get focus after the page finishes loading. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefautofocus | autofocus HTML attribute for more information.",
38213
+ "fieldName": "autofocus",
38214
+ "inheritedFrom": {
38215
+ "name": "TextField",
38216
+ "module": "src/text-field/text-field.ts"
38217
+ }
38218
+ },
38219
+ {
38220
+ "name": "placeholder",
38221
+ "type": {
38222
+ "text": "string"
38223
+ },
38224
+ "description": "Sets the placeholder value of the element, generally used to provide a hint to the user.",
38225
+ "fieldName": "placeholder",
38226
+ "inheritedFrom": {
38227
+ "name": "TextField",
38228
+ "module": "src/text-field/text-field.ts"
38229
+ }
38230
+ },
38231
+ {
38232
+ "name": "type",
38233
+ "type": {
38234
+ "text": "TextFieldType"
38235
+ },
38236
+ "description": "Allows setting a type or mode of text.",
38237
+ "fieldName": "type",
38238
+ "inheritedFrom": {
38239
+ "name": "TextField",
38240
+ "module": "src/text-field/text-field.ts"
38241
+ }
38242
+ },
38243
+ {
38244
+ "name": "list",
38245
+ "type": {
38246
+ "text": "string"
38247
+ },
38248
+ "description": "Allows associating a https://developer.mozilla.org/en-US/docs/Web/HTML/Element/datalist | datalist to the element by https://developer.mozilla.org/en-US/docs/Web/API/Element/id.",
38249
+ "fieldName": "list",
38250
+ "inheritedFrom": {
38251
+ "name": "TextField",
38252
+ "module": "src/text-field/text-field.ts"
38253
+ }
38254
+ },
38255
+ {
38256
+ "name": "pattern",
38257
+ "type": {
38258
+ "text": "string"
38259
+ },
38260
+ "description": "A regular expression that the value must match to pass validation.",
38261
+ "fieldName": "pattern",
38262
+ "inheritedFrom": {
38263
+ "name": "TextField",
38264
+ "module": "src/text-field/text-field.ts"
38265
+ }
38613
38266
  }
38614
38267
  ],
38615
38268
  "superclass": {
38616
- "name": "FoundationElement",
38617
- "package": "@microsoft/fast-foundation"
38269
+ "name": "FASTTextField",
38270
+ "package": "@microsoft/fast-components"
38618
38271
  },
38619
- "tagName": "%%prefix%%-toast",
38620
- "customElement": true
38272
+ "tagName": "%%prefix%%-text-field",
38273
+ "customElement": true,
38274
+ "events": [
38275
+ {
38276
+ "description": "Fires a custom 'change' event when the value has changed",
38277
+ "name": "change",
38278
+ "inheritedFrom": {
38279
+ "name": "TextField",
38280
+ "module": "src/text-field/text-field.ts"
38281
+ }
38282
+ }
38283
+ ]
38621
38284
  },
38622
38285
  {
38623
38286
  "kind": "variable",
38624
- "name": "foundationToast",
38625
- "description": "The Foundation Toast",
38287
+ "name": "foundationTextFieldShadowOptions",
38288
+ "type": {
38289
+ "text": "ShadowRootInit"
38290
+ },
38291
+ "default": "{\n mode: 'open',\n delegatesFocus: true,\n}"
38292
+ },
38293
+ {
38294
+ "kind": "variable",
38295
+ "name": "defaultTextFieldConfig",
38296
+ "type": {
38297
+ "text": "object"
38298
+ },
38299
+ "default": "{}"
38300
+ },
38301
+ {
38302
+ "kind": "variable",
38303
+ "name": "foundationTextField",
38304
+ "description": "The Foundation Text Fields",
38626
38305
  "privacy": "public"
38627
38306
  }
38628
38307
  ],
38629
38308
  "exports": [
38630
38309
  {
38631
38310
  "kind": "js",
38632
- "name": "foundationToastShadowOptions",
38311
+ "name": "TextField",
38633
38312
  "declaration": {
38634
- "name": "foundationToastShadowOptions",
38635
- "module": "src/toast/toast.ts"
38313
+ "name": "TextField",
38314
+ "module": "src/text-field/text-field.ts"
38636
38315
  }
38637
38316
  },
38638
38317
  {
38639
38318
  "kind": "js",
38640
- "name": "defaultToastConfig",
38319
+ "name": "foundationTextFieldShadowOptions",
38641
38320
  "declaration": {
38642
- "name": "defaultToastConfig",
38643
- "module": "src/toast/toast.ts"
38321
+ "name": "foundationTextFieldShadowOptions",
38322
+ "module": "src/text-field/text-field.ts"
38644
38323
  }
38645
38324
  },
38646
38325
  {
38647
38326
  "kind": "js",
38648
- "name": "Toast",
38327
+ "name": "defaultTextFieldConfig",
38649
38328
  "declaration": {
38650
- "name": "Toast",
38651
- "module": "src/toast/toast.ts"
38329
+ "name": "defaultTextFieldConfig",
38330
+ "module": "src/text-field/text-field.ts"
38652
38331
  }
38653
38332
  },
38654
38333
  {
38655
38334
  "kind": "js",
38656
- "name": "foundationToast",
38335
+ "name": "foundationTextField",
38657
38336
  "declaration": {
38658
- "name": "foundationToast",
38659
- "module": "src/toast/toast.ts"
38337
+ "name": "foundationTextField",
38338
+ "module": "src/text-field/text-field.ts"
38660
38339
  }
38661
38340
  }
38662
38341
  ]
@@ -39045,6 +38724,327 @@
39045
38724
  }
39046
38725
  ]
39047
38726
  },
38727
+ {
38728
+ "kind": "javascript-module",
38729
+ "path": "src/toast/index.ts",
38730
+ "declarations": [],
38731
+ "exports": [
38732
+ {
38733
+ "kind": "js",
38734
+ "name": "*",
38735
+ "declaration": {
38736
+ "name": "*",
38737
+ "package": "./toast.styles"
38738
+ }
38739
+ },
38740
+ {
38741
+ "kind": "js",
38742
+ "name": "*",
38743
+ "declaration": {
38744
+ "name": "*",
38745
+ "package": "./toast.template"
38746
+ }
38747
+ },
38748
+ {
38749
+ "kind": "js",
38750
+ "name": "*",
38751
+ "declaration": {
38752
+ "name": "*",
38753
+ "package": "./toast"
38754
+ }
38755
+ }
38756
+ ]
38757
+ },
38758
+ {
38759
+ "kind": "javascript-module",
38760
+ "path": "src/toast/toast.styles.ts",
38761
+ "declarations": [
38762
+ {
38763
+ "kind": "variable",
38764
+ "name": "foundationToastStyles",
38765
+ "type": {
38766
+ "text": "ElementStyles"
38767
+ },
38768
+ "default": "css`\n @keyframes append-animate {\n from {\n transform: translateX(100%);\n opacity: 0%;\n }\n\n to {\n transform: translateX(0%);\n opacity: 100%;\n }\n }\n\n @keyframes delete-animate {\n from {\n transform: translateX(0%);\n opacity: 100%;\n }\n\n to {\n transform: translateX(100%);\n opacity: 0%;\n }\n }\n\n :host {\n --toast-min-width: 356px;\n --toast-min-height: 128px;\n --toast-max-width: 356px;\n --toast-max-height: 272px;\n }\n\n .toast {\n animation: append-animate 0.3s linear;\n max-width: var(--toast-max-width);\n min-width: var(--toast-min-width);\n background-color: var(--fill-color);\n border-radius: calc(var(--control-corner-radius) * 1px);\n border-width: thin;\n border-color: var(--neutral-fill-rest);\n box-shadow: 0 2px 15px 0 rgb(0 0 0 / 35%);\n display: flex;\n position: relative;\n flex-direction: row;\n padding: 8px 8px 8px 15px;\n margin: 5px;\n }\n\n .toast-delete {\n animation: delete-animate 0.3s linear;\n opacity: 0%;\n }\n\n .toast::after {\n content: '';\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: 5px;\n height: calc(100% - 10px);\n width: 4px;\n border-radius: 2px;\n background-color: red;\n }\n\n .content-wrapper {\n height: fit-content;\n width: 100%;\n display: flex;\n flex-direction: column;\n justify-content: space-between;\n align-items: stretch;\n }\n\n .bottom {\n width: 70%;\n }\n\n .top {\n width: 100%;\n display: flex;\n flex-direction: row;\n justify-content: space-between;\n align-items: center;\n }\n\n .content {\n width: 85%;\n font-size: 12px;\n overflow-wrap: break-word;\n }\n\n .date {\n color: var(--neutral-foreground-hint);\n font-size: 12px;\n margin: 0 0 5px;\n }\n\n .close-icon svg {\n cursor: pointer;\n }\n`"
38769
+ }
38770
+ ],
38771
+ "exports": [
38772
+ {
38773
+ "kind": "js",
38774
+ "name": "foundationToastStyles",
38775
+ "declaration": {
38776
+ "name": "foundationToastStyles",
38777
+ "module": "src/toast/toast.styles.ts"
38778
+ }
38779
+ }
38780
+ ]
38781
+ },
38782
+ {
38783
+ "kind": "javascript-module",
38784
+ "path": "src/toast/toast.template.ts",
38785
+ "declarations": [
38786
+ {
38787
+ "kind": "variable",
38788
+ "name": "foundationToastTemplate",
38789
+ "type": {
38790
+ "text": "ViewTemplate<Toast>"
38791
+ },
38792
+ "default": "html`\n <div class=\"toast ${(x) => x.deleteAnimation}\" ${ref('toast')}>\n <div class=\"content-wrapper\">\n <div part=\"top\" class=\"top\">\n <slot name=\"top\"></slot>\n <div class=\"close-icon\" @click=${(x) => x.close()}>${closeIcon()}</div>\n </div>\n <div part=\"content\" class=\"content\">\n <slot name=\"content\"></slot>\n </div>\n <div part=\"date\" class=\"date\">\n <slot name=\"date\"></slot>\n </div>\n <div part=\"bottom\" class=\"bottom\">\n <slot name=\"bottom\"></slot>\n </div>\n </div>\n </div>\n`"
38793
+ }
38794
+ ],
38795
+ "exports": [
38796
+ {
38797
+ "kind": "js",
38798
+ "name": "foundationToastTemplate",
38799
+ "declaration": {
38800
+ "name": "foundationToastTemplate",
38801
+ "module": "src/toast/toast.template.ts"
38802
+ }
38803
+ }
38804
+ ]
38805
+ },
38806
+ {
38807
+ "kind": "javascript-module",
38808
+ "path": "src/toast/toast.ts",
38809
+ "declarations": [
38810
+ {
38811
+ "kind": "variable",
38812
+ "name": "foundationToastShadowOptions",
38813
+ "type": {
38814
+ "text": "ShadowRootInit"
38815
+ },
38816
+ "default": "{\n mode: 'open',\n delegatesFocus: true,\n}"
38817
+ },
38818
+ {
38819
+ "kind": "variable",
38820
+ "name": "defaultToastConfig",
38821
+ "type": {
38822
+ "text": "object"
38823
+ },
38824
+ "default": "{}"
38825
+ },
38826
+ {
38827
+ "kind": "class",
38828
+ "description": "",
38829
+ "name": "Toast",
38830
+ "members": [
38831
+ {
38832
+ "kind": "field",
38833
+ "name": "toast",
38834
+ "type": {
38835
+ "text": "HTMLElement"
38836
+ },
38837
+ "privacy": "public"
38838
+ },
38839
+ {
38840
+ "kind": "field",
38841
+ "name": "deleteAnimation",
38842
+ "type": {
38843
+ "text": "string"
38844
+ },
38845
+ "default": "''"
38846
+ },
38847
+ {
38848
+ "kind": "field",
38849
+ "name": "closeTimeout",
38850
+ "type": {
38851
+ "text": "number"
38852
+ },
38853
+ "default": "10000"
38854
+ },
38855
+ {
38856
+ "kind": "field",
38857
+ "name": "autoClose",
38858
+ "type": {
38859
+ "text": "boolean"
38860
+ },
38861
+ "default": "false"
38862
+ },
38863
+ {
38864
+ "kind": "method",
38865
+ "name": "close",
38866
+ "privacy": "public",
38867
+ "description": "Remove the toast from display."
38868
+ },
38869
+ {
38870
+ "kind": "field",
38871
+ "name": "_presentation",
38872
+ "type": {
38873
+ "text": "ComponentPresentation | null | undefined"
38874
+ },
38875
+ "privacy": "private",
38876
+ "default": "void 0",
38877
+ "inheritedFrom": {
38878
+ "name": "FoundationElement",
38879
+ "module": "src/foundation-element/foundation-element.ts"
38880
+ }
38881
+ },
38882
+ {
38883
+ "kind": "field",
38884
+ "name": "$presentation",
38885
+ "type": {
38886
+ "text": "ComponentPresentation | null"
38887
+ },
38888
+ "privacy": "public",
38889
+ "description": "A property which resolves the ComponentPresentation instance\nfor the current component.",
38890
+ "inheritedFrom": {
38891
+ "name": "FoundationElement",
38892
+ "module": "src/foundation-element/foundation-element.ts"
38893
+ }
38894
+ },
38895
+ {
38896
+ "kind": "field",
38897
+ "name": "template",
38898
+ "type": {
38899
+ "text": "ElementViewTemplate | void | null"
38900
+ },
38901
+ "privacy": "public",
38902
+ "description": "Sets the template of the element instance. When undefined,\nthe element will attempt to resolve the template from\nthe associated presentation or custom element definition.",
38903
+ "inheritedFrom": {
38904
+ "name": "FoundationElement",
38905
+ "module": "src/foundation-element/foundation-element.ts"
38906
+ }
38907
+ },
38908
+ {
38909
+ "kind": "method",
38910
+ "name": "templateChanged",
38911
+ "privacy": "protected",
38912
+ "return": {
38913
+ "type": {
38914
+ "text": "void"
38915
+ }
38916
+ },
38917
+ "inheritedFrom": {
38918
+ "name": "FoundationElement",
38919
+ "module": "src/foundation-element/foundation-element.ts"
38920
+ }
38921
+ },
38922
+ {
38923
+ "kind": "field",
38924
+ "name": "styles",
38925
+ "type": {
38926
+ "text": "ElementStyles | void | null"
38927
+ },
38928
+ "privacy": "public",
38929
+ "description": "Sets the default styles for the element instance. When undefined,\nthe element will attempt to resolve default styles from\nthe associated presentation or custom element definition.",
38930
+ "inheritedFrom": {
38931
+ "name": "FoundationElement",
38932
+ "module": "src/foundation-element/foundation-element.ts"
38933
+ }
38934
+ },
38935
+ {
38936
+ "kind": "method",
38937
+ "name": "stylesChanged",
38938
+ "privacy": "protected",
38939
+ "return": {
38940
+ "type": {
38941
+ "text": "void"
38942
+ }
38943
+ },
38944
+ "inheritedFrom": {
38945
+ "name": "FoundationElement",
38946
+ "module": "src/foundation-element/foundation-element.ts"
38947
+ }
38948
+ },
38949
+ {
38950
+ "kind": "method",
38951
+ "name": "compose",
38952
+ "privacy": "public",
38953
+ "static": true,
38954
+ "return": {
38955
+ "type": {
38956
+ "text": "(\n overrideDefinition?: OverrideFoundationElementDefinition<T>\n ) => FoundationElementRegistry<T, K>"
38957
+ }
38958
+ },
38959
+ "parameters": [
38960
+ {
38961
+ "name": "this",
38962
+ "type": {
38963
+ "text": "K"
38964
+ }
38965
+ },
38966
+ {
38967
+ "name": "elementDefinition",
38968
+ "type": {
38969
+ "text": "T"
38970
+ },
38971
+ "description": "The definition of the element to create the registry\nfunction for."
38972
+ }
38973
+ ],
38974
+ "description": "Defines an element registry function with a set of element definition defaults.",
38975
+ "inheritedFrom": {
38976
+ "name": "FoundationElement",
38977
+ "module": "src/foundation-element/foundation-element.ts"
38978
+ }
38979
+ }
38980
+ ],
38981
+ "attributes": [
38982
+ {
38983
+ "name": "close-timeout",
38984
+ "type": {
38985
+ "text": "number"
38986
+ },
38987
+ "default": "10000",
38988
+ "fieldName": "closeTimeout"
38989
+ },
38990
+ {
38991
+ "name": "auto-close",
38992
+ "type": {
38993
+ "text": "boolean"
38994
+ },
38995
+ "default": "false",
38996
+ "fieldName": "autoClose"
38997
+ }
38998
+ ],
38999
+ "superclass": {
39000
+ "name": "FoundationElement",
39001
+ "package": "@microsoft/fast-foundation"
39002
+ },
39003
+ "tagName": "%%prefix%%-toast",
39004
+ "customElement": true
39005
+ },
39006
+ {
39007
+ "kind": "variable",
39008
+ "name": "foundationToast",
39009
+ "description": "The Foundation Toast",
39010
+ "privacy": "public"
39011
+ }
39012
+ ],
39013
+ "exports": [
39014
+ {
39015
+ "kind": "js",
39016
+ "name": "foundationToastShadowOptions",
39017
+ "declaration": {
39018
+ "name": "foundationToastShadowOptions",
39019
+ "module": "src/toast/toast.ts"
39020
+ }
39021
+ },
39022
+ {
39023
+ "kind": "js",
39024
+ "name": "defaultToastConfig",
39025
+ "declaration": {
39026
+ "name": "defaultToastConfig",
39027
+ "module": "src/toast/toast.ts"
39028
+ }
39029
+ },
39030
+ {
39031
+ "kind": "js",
39032
+ "name": "Toast",
39033
+ "declaration": {
39034
+ "name": "Toast",
39035
+ "module": "src/toast/toast.ts"
39036
+ }
39037
+ },
39038
+ {
39039
+ "kind": "js",
39040
+ "name": "foundationToast",
39041
+ "declaration": {
39042
+ "name": "foundationToast",
39043
+ "module": "src/toast/toast.ts"
39044
+ }
39045
+ }
39046
+ ]
39047
+ },
39048
39048
  {
39049
39049
  "kind": "javascript-module",
39050
39050
  "path": "src/tooltip/index.ts",