@genesislcap/foundation-zero 14.92.0 → 14.92.1-pa-913.3

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.
@@ -7879,7 +7879,7 @@
7879
7879
  },
7880
7880
  {
7881
7881
  "kind": "javascript-module",
7882
- "path": "src/flyout/flyout.stories.ts",
7882
+ "path": "src/grid-layout/grid-layout.stories.ts",
7883
7883
  "declarations": [
7884
7884
  {
7885
7885
  "kind": "variable",
@@ -7887,7 +7887,7 @@
7887
7887
  "type": {
7888
7888
  "text": "Meta"
7889
7889
  },
7890
- "default": "{\n title: 'Flyout',\n component: 'zero-flyout',\n}"
7890
+ "default": "{\n title: 'Grid Layout',\n component: 'zero-grid-layout',\n}"
7891
7891
  },
7892
7892
  {
7893
7893
  "kind": "variable",
@@ -7895,7 +7895,7 @@
7895
7895
  "type": {
7896
7896
  "text": "StoryObj"
7897
7897
  },
7898
- "default": "{\n argTypes: {\n position: {\n control: 'select',\n options: ['left', 'right'],\n },\n },\n args: {\n position: 'right',\n height: '500px',\n flyoutWidth: '20%',\n },\n render: ({ position, height, flyoutWidth }) => html`\n <div style=\"display: flex; height: ${height};\">\n <zero-button @click=\"${openFlyout}\">Open Flyout</zero-button>\n\n <style>\n zero-flyout::part(flyout) {\n width: ${flyoutWidth};\n }\n </style>\n <zero-flyout position=\"${position}\" style=\"height: ${height};\">\n <p slot=\"title\">Zero flyout</p>\n <div slot=\"header\">\n <p>Header</p>\n </div>\n <div class=\"container\">\n <p>Flyout options</p>\n <ul>\n <li>0</li>\n <li>1</li>\n <li>2</li>\n <li>3</li>\n <li>4</li>\n <li>5</li>\n </ul>\n </div>\n <div slot=\"footer\">\n <p>Footer</p>\n <zero-button @click=\"${closeFlyout}\">Close Flyout</zero-button>\n </div>\n </zero-flyout>\n </div>\n `,\n}"
7898
+ "default": "{\n render: () => html`\n <div style=\"${wrapperStyle}\">\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout\n class=\"spacing-2x\"\n col-count=\"2\"\n row-count=\"2\"\n col-lg-count=\"4\"\n row-lg-count=\"1\"\n col-sm-count=\"1\"\n row-sm-count=\"2\"\n >\n <zero-grid-layout-item\n style=\"height: 100%; background-color: green;\"\n col-lg-number=\"1\"\n row-lg-number=\"1\"\n width-lg=\"1\"\n height-lg=\"1\"\n col-md-number=\"1\"\n row-md-number=\"1\"\n width-md=\"1\"\n height-md=\"1\"\n col-sm-number=\"1\"\n row-sm-number=\"1\"\n width-sm=\"1\"\n height-sm=\"1\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"height: 100%; background-color: red;\"\n col-lg-number=\"3\"\n row-lg-number=\"1\"\n width-lg=\"2\"\n height-lg=\"1\"\n col-md-number=\"2\"\n row-md-number=\"2\"\n width-md=\"1\"\n height-md=\"1\"\n col-sm-number=\"1\"\n row-sm-number=\"2\"\n width-sm=\"1\"\n height-sm=\"1\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"2\" col-count=\"4\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: green;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"1\"\n height=\"2\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"2\"\n row-number=\"1\"\n width=\"3\"\n height=\"2\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"2\" col-count=\"4\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: blue;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"1\"\n height=\"2\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"2\"\n row-number=\"1\"\n width=\"2\"\n height=\"2\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: green;\"\n col-number=\"4\"\n row-number=\"1\"\n width=\"1\"\n height=\"2\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"3\" col-count=\"4\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: blue;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"4\"\n height=\"2\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"1\"\n row-number=\"3\"\n width=\"3\"\n height=\"1\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: yellow;\"\n col-number=\"4\"\n row-number=\"3\"\n width=\"1\"\n height=\"1\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"4\" col-count=\"4\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: blue;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"4\"\n height=\"1\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"1\"\n row-number=\"2\"\n width=\"1\"\n height=\"2\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: yellow;\"\n col-number=\"2\"\n row-number=\"2\"\n width=\"3\"\n height=\"2\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: green;\"\n col-number=\"1\"\n row-number=\"4\"\n width=\"4\"\n height=\"1\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"6\" col-count=\"6\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: blue;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"2\"\n height=\"6\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"3\"\n row-number=\"1\"\n width=\"4\"\n height=\"3\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: yellow;\"\n col-number=\"3\"\n row-number=\"4\"\n width=\"2\"\n height=\"3\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: yellow;\"\n col-number=\"5\"\n row-number=\"4\"\n width=\"1\"\n height=\"3\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: green;\"\n col-number=\"6\"\n row-number=\"4\"\n width=\"1\"\n height=\"3\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"6\" col-count=\"6\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: blue;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"1\"\n height=\"6\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"2\"\n row-number=\"1\"\n width=\"5\"\n height=\"4\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: yellow;\"\n col-number=\"2\"\n row-number=\"5\"\n width=\"5\"\n height=\"2\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"6\" col-count=\"6\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: blue;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"1\"\n height=\"6\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"2\"\n row-number=\"1\"\n width=\"5\"\n height=\"4\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: yellow;\"\n col-number=\"2\"\n row-number=\"5\"\n width=\"5\"\n height=\"2\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n </div>\n `,\n}"
7899
7899
  }
7900
7900
  ],
7901
7901
  "exports": [
@@ -7904,7 +7904,7 @@
7904
7904
  "name": "default",
7905
7905
  "declaration": {
7906
7906
  "name": "meta",
7907
- "module": "src/flyout/flyout.stories.ts"
7907
+ "module": "src/grid-layout/grid-layout.stories.ts"
7908
7908
  }
7909
7909
  },
7910
7910
  {
@@ -7912,76 +7912,24 @@
7912
7912
  "name": "Primary",
7913
7913
  "declaration": {
7914
7914
  "name": "Primary",
7915
- "module": "src/flyout/flyout.stories.ts"
7916
- }
7917
- }
7918
- ]
7919
- },
7920
- {
7921
- "kind": "javascript-module",
7922
- "path": "src/flyout/flyout.styles.ts",
7923
- "declarations": [
7924
- {
7925
- "kind": "variable",
7926
- "name": "zeroFlyoutStyles",
7927
- "default": "css`\n ${foundationFlyoutStyles}\n div.flyout {\n background-color: ${neutralLayer2};\n border-color: ${neutralFillHover};\n color: ${neutralForegroundRest};\n }\n\n :host([position='left']) div.flyout {\n border-right-style: solid;\n border-right-width: 1px;\n }\n\n :host([position='right']) div.flyout {\n border-left-style: solid;\n border-left-width: 1px;\n }\n\n div.exit {\n cursor: pointer;\n padding: 5px 8px;\n }\n\n div.exit:hover {\n background-color: ${neutralFillHover};\n border-radius: 3px;\n }\n`"
7928
- }
7929
- ],
7930
- "exports": [
7931
- {
7932
- "kind": "js",
7933
- "name": "zeroFlyoutStyles",
7934
- "declaration": {
7935
- "name": "zeroFlyoutStyles",
7936
- "module": "src/flyout/flyout.styles.ts"
7937
- }
7938
- }
7939
- ]
7940
- },
7941
- {
7942
- "kind": "javascript-module",
7943
- "path": "src/flyout/flyout.template.ts",
7944
- "declarations": [
7945
- {
7946
- "kind": "variable",
7947
- "name": "zeroFlyoutTemplate",
7948
- "default": "html<Flyout>`\n ${getPrefixedFlyout('zero')}\n`"
7949
- }
7950
- ],
7951
- "exports": [
7952
- {
7953
- "kind": "js",
7954
- "name": "zeroFlyoutTemplate",
7955
- "declaration": {
7956
- "name": "zeroFlyoutTemplate",
7957
- "module": "src/flyout/flyout.template.ts"
7915
+ "module": "src/grid-layout/grid-layout.stories.ts"
7958
7916
  }
7959
7917
  }
7960
7918
  ]
7961
7919
  },
7962
7920
  {
7963
7921
  "kind": "javascript-module",
7964
- "path": "src/flyout/flyout.ts",
7922
+ "path": "src/grid-layout/grid-layout.ts",
7965
7923
  "declarations": [
7966
- {
7967
- "kind": "variable",
7968
- "name": "defaultFlyoutConfig",
7969
- "default": "foundationConfig"
7970
- },
7971
- {
7972
- "kind": "variable",
7973
- "name": "zeroFlyoutShadowOptions",
7974
- "default": "foundationFlyoutShadowOptions"
7975
- },
7976
7924
  {
7977
7925
  "kind": "class",
7978
7926
  "description": "",
7979
- "name": "Flyout",
7927
+ "name": "GridLayout",
7980
7928
  "superclass": {
7981
- "name": "FoundationFlyout",
7929
+ "name": "FoundationGridLayout",
7982
7930
  "package": "@genesislcap/foundation-ui"
7983
7931
  },
7984
- "tagName": "%%prefix%%-flyout",
7932
+ "tagName": "%%prefix%%-grid-layout",
7985
7933
  "customElement": true,
7986
7934
  "members": [
7987
7935
  {
@@ -8099,49 +8047,33 @@
8099
8047
  },
8100
8048
  {
8101
8049
  "kind": "variable",
8102
- "name": "zeroFlyout",
8103
- "description": "The Zero Flyout",
8050
+ "name": "zeroGridLayout",
8051
+ "description": "The Zero Grid Layout",
8104
8052
  "privacy": "public"
8105
8053
  }
8106
8054
  ],
8107
8055
  "exports": [
8108
8056
  {
8109
8057
  "kind": "js",
8110
- "name": "defaultFlyoutConfig",
8111
- "declaration": {
8112
- "name": "defaultFlyoutConfig",
8113
- "module": "src/flyout/flyout.ts"
8114
- }
8115
- },
8116
- {
8117
- "kind": "js",
8118
- "name": "zeroFlyoutShadowOptions",
8119
- "declaration": {
8120
- "name": "zeroFlyoutShadowOptions",
8121
- "module": "src/flyout/flyout.ts"
8122
- }
8123
- },
8124
- {
8125
- "kind": "js",
8126
- "name": "Flyout",
8058
+ "name": "GridLayout",
8127
8059
  "declaration": {
8128
- "name": "Flyout",
8129
- "module": "src/flyout/flyout.ts"
8060
+ "name": "GridLayout",
8061
+ "module": "src/grid-layout/grid-layout.ts"
8130
8062
  }
8131
8063
  },
8132
8064
  {
8133
8065
  "kind": "js",
8134
- "name": "zeroFlyout",
8066
+ "name": "zeroGridLayout",
8135
8067
  "declaration": {
8136
- "name": "zeroFlyout",
8137
- "module": "src/flyout/flyout.ts"
8068
+ "name": "zeroGridLayout",
8069
+ "module": "src/grid-layout/grid-layout.ts"
8138
8070
  }
8139
8071
  }
8140
8072
  ]
8141
8073
  },
8142
8074
  {
8143
8075
  "kind": "javascript-module",
8144
- "path": "src/flyout/index.ts",
8076
+ "path": "src/grid-layout/index.ts",
8145
8077
  "declarations": [],
8146
8078
  "exports": [
8147
8079
  {
@@ -8149,30 +8081,14 @@
8149
8081
  "name": "*",
8150
8082
  "declaration": {
8151
8083
  "name": "*",
8152
- "package": "./flyout"
8153
- }
8154
- },
8155
- {
8156
- "kind": "js",
8157
- "name": "*",
8158
- "declaration": {
8159
- "name": "*",
8160
- "package": "./flyout.styles"
8161
- }
8162
- },
8163
- {
8164
- "kind": "js",
8165
- "name": "*",
8166
- "declaration": {
8167
- "name": "*",
8168
- "package": "./flyout.template"
8084
+ "package": "./grid-layout"
8169
8085
  }
8170
8086
  }
8171
8087
  ]
8172
8088
  },
8173
8089
  {
8174
8090
  "kind": "javascript-module",
8175
- "path": "src/grid-layout/grid-layout.stories.ts",
8091
+ "path": "src/flyout/flyout.stories.ts",
8176
8092
  "declarations": [
8177
8093
  {
8178
8094
  "kind": "variable",
@@ -8180,7 +8096,7 @@
8180
8096
  "type": {
8181
8097
  "text": "Meta"
8182
8098
  },
8183
- "default": "{\n title: 'Grid Layout',\n component: 'zero-grid-layout',\n}"
8099
+ "default": "{\n title: 'Flyout',\n component: 'zero-flyout',\n}"
8184
8100
  },
8185
8101
  {
8186
8102
  "kind": "variable",
@@ -8188,7 +8104,7 @@
8188
8104
  "type": {
8189
8105
  "text": "StoryObj"
8190
8106
  },
8191
- "default": "{\n render: () => html`\n <div style=\"${wrapperStyle}\">\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout\n class=\"spacing-2x\"\n col-count=\"2\"\n row-count=\"2\"\n col-lg-count=\"4\"\n row-lg-count=\"1\"\n col-sm-count=\"1\"\n row-sm-count=\"2\"\n >\n <zero-grid-layout-item\n style=\"height: 100%; background-color: green;\"\n col-lg-number=\"1\"\n row-lg-number=\"1\"\n width-lg=\"1\"\n height-lg=\"1\"\n col-md-number=\"1\"\n row-md-number=\"1\"\n width-md=\"1\"\n height-md=\"1\"\n col-sm-number=\"1\"\n row-sm-number=\"1\"\n width-sm=\"1\"\n height-sm=\"1\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"height: 100%; background-color: red;\"\n col-lg-number=\"3\"\n row-lg-number=\"1\"\n width-lg=\"2\"\n height-lg=\"1\"\n col-md-number=\"2\"\n row-md-number=\"2\"\n width-md=\"1\"\n height-md=\"1\"\n col-sm-number=\"1\"\n row-sm-number=\"2\"\n width-sm=\"1\"\n height-sm=\"1\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"2\" col-count=\"4\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: green;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"1\"\n height=\"2\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"2\"\n row-number=\"1\"\n width=\"3\"\n height=\"2\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"2\" col-count=\"4\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: blue;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"1\"\n height=\"2\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"2\"\n row-number=\"1\"\n width=\"2\"\n height=\"2\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: green;\"\n col-number=\"4\"\n row-number=\"1\"\n width=\"1\"\n height=\"2\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"3\" col-count=\"4\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: blue;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"4\"\n height=\"2\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"1\"\n row-number=\"3\"\n width=\"3\"\n height=\"1\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: yellow;\"\n col-number=\"4\"\n row-number=\"3\"\n width=\"1\"\n height=\"1\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"4\" col-count=\"4\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: blue;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"4\"\n height=\"1\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"1\"\n row-number=\"2\"\n width=\"1\"\n height=\"2\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: yellow;\"\n col-number=\"2\"\n row-number=\"2\"\n width=\"3\"\n height=\"2\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: green;\"\n col-number=\"1\"\n row-number=\"4\"\n width=\"4\"\n height=\"1\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"6\" col-count=\"6\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: blue;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"2\"\n height=\"6\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"3\"\n row-number=\"1\"\n width=\"4\"\n height=\"3\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: yellow;\"\n col-number=\"3\"\n row-number=\"4\"\n width=\"2\"\n height=\"3\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: yellow;\"\n col-number=\"5\"\n row-number=\"4\"\n width=\"1\"\n height=\"3\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: green;\"\n col-number=\"6\"\n row-number=\"4\"\n width=\"1\"\n height=\"3\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"6\" col-count=\"6\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: blue;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"1\"\n height=\"6\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"2\"\n row-number=\"1\"\n width=\"5\"\n height=\"4\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: yellow;\"\n col-number=\"2\"\n row-number=\"5\"\n width=\"5\"\n height=\"2\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n\n <zero-card style=\"height: 200px; width: 100%;\">\n <zero-grid-layout row-count=\"6\" col-count=\"6\" class=\"spacing-2x\">\n <zero-grid-layout-item\n style=\"background-color: blue;\"\n col-number=\"1\"\n row-number=\"1\"\n width=\"1\"\n height=\"6\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: red;\"\n col-number=\"2\"\n row-number=\"1\"\n width=\"5\"\n height=\"4\"\n ></zero-grid-layout-item>\n <zero-grid-layout-item\n style=\"background-color: yellow;\"\n col-number=\"2\"\n row-number=\"5\"\n width=\"5\"\n height=\"2\"\n ></zero-grid-layout-item>\n </zero-grid-layout>\n </zero-card>\n </div>\n `,\n}"
8107
+ "default": "{\n argTypes: {\n position: {\n control: 'select',\n options: ['left', 'right'],\n },\n },\n args: {\n position: 'right',\n height: '500px',\n flyoutWidth: '20%',\n },\n render: ({ position, height, flyoutWidth }) => html`\n <div style=\"display: flex; height: ${height};\">\n <zero-button @click=\"${openFlyout}\">Open Flyout</zero-button>\n\n <style>\n zero-flyout::part(flyout) {\n width: ${flyoutWidth};\n }\n </style>\n <zero-flyout position=\"${position}\" style=\"height: ${height};\">\n <p slot=\"title\">Zero flyout</p>\n <div slot=\"header\">\n <p>Header</p>\n </div>\n <div class=\"container\">\n <p>Flyout options</p>\n <ul>\n <li>0</li>\n <li>1</li>\n <li>2</li>\n <li>3</li>\n <li>4</li>\n <li>5</li>\n </ul>\n </div>\n <div slot=\"footer\">\n <p>Footer</p>\n <zero-button @click=\"${closeFlyout}\">Close Flyout</zero-button>\n </div>\n </zero-flyout>\n </div>\n `,\n}"
8192
8108
  }
8193
8109
  ],
8194
8110
  "exports": [
@@ -8197,7 +8113,7 @@
8197
8113
  "name": "default",
8198
8114
  "declaration": {
8199
8115
  "name": "meta",
8200
- "module": "src/grid-layout/grid-layout.stories.ts"
8116
+ "module": "src/flyout/flyout.stories.ts"
8201
8117
  }
8202
8118
  },
8203
8119
  {
@@ -8205,24 +8121,76 @@
8205
8121
  "name": "Primary",
8206
8122
  "declaration": {
8207
8123
  "name": "Primary",
8208
- "module": "src/grid-layout/grid-layout.stories.ts"
8124
+ "module": "src/flyout/flyout.stories.ts"
8209
8125
  }
8210
8126
  }
8211
8127
  ]
8212
8128
  },
8213
8129
  {
8214
8130
  "kind": "javascript-module",
8215
- "path": "src/grid-layout/grid-layout.ts",
8131
+ "path": "src/flyout/flyout.styles.ts",
8216
8132
  "declarations": [
8133
+ {
8134
+ "kind": "variable",
8135
+ "name": "zeroFlyoutStyles",
8136
+ "default": "css`\n ${foundationFlyoutStyles}\n div.flyout {\n background-color: ${neutralLayer2};\n border-color: ${neutralFillHover};\n color: ${neutralForegroundRest};\n }\n\n :host([position='left']) div.flyout {\n border-right-style: solid;\n border-right-width: 1px;\n }\n\n :host([position='right']) div.flyout {\n border-left-style: solid;\n border-left-width: 1px;\n }\n\n div.exit {\n cursor: pointer;\n padding: 5px 8px;\n }\n\n div.exit:hover {\n background-color: ${neutralFillHover};\n border-radius: 3px;\n }\n`"
8137
+ }
8138
+ ],
8139
+ "exports": [
8140
+ {
8141
+ "kind": "js",
8142
+ "name": "zeroFlyoutStyles",
8143
+ "declaration": {
8144
+ "name": "zeroFlyoutStyles",
8145
+ "module": "src/flyout/flyout.styles.ts"
8146
+ }
8147
+ }
8148
+ ]
8149
+ },
8150
+ {
8151
+ "kind": "javascript-module",
8152
+ "path": "src/flyout/flyout.template.ts",
8153
+ "declarations": [
8154
+ {
8155
+ "kind": "variable",
8156
+ "name": "zeroFlyoutTemplate",
8157
+ "default": "html<Flyout>`\n ${getPrefixedFlyout('zero')}\n`"
8158
+ }
8159
+ ],
8160
+ "exports": [
8161
+ {
8162
+ "kind": "js",
8163
+ "name": "zeroFlyoutTemplate",
8164
+ "declaration": {
8165
+ "name": "zeroFlyoutTemplate",
8166
+ "module": "src/flyout/flyout.template.ts"
8167
+ }
8168
+ }
8169
+ ]
8170
+ },
8171
+ {
8172
+ "kind": "javascript-module",
8173
+ "path": "src/flyout/flyout.ts",
8174
+ "declarations": [
8175
+ {
8176
+ "kind": "variable",
8177
+ "name": "defaultFlyoutConfig",
8178
+ "default": "foundationConfig"
8179
+ },
8180
+ {
8181
+ "kind": "variable",
8182
+ "name": "zeroFlyoutShadowOptions",
8183
+ "default": "foundationFlyoutShadowOptions"
8184
+ },
8217
8185
  {
8218
8186
  "kind": "class",
8219
8187
  "description": "",
8220
- "name": "GridLayout",
8188
+ "name": "Flyout",
8221
8189
  "superclass": {
8222
- "name": "FoundationGridLayout",
8190
+ "name": "FoundationFlyout",
8223
8191
  "package": "@genesislcap/foundation-ui"
8224
8192
  },
8225
- "tagName": "%%prefix%%-grid-layout",
8193
+ "tagName": "%%prefix%%-flyout",
8226
8194
  "customElement": true,
8227
8195
  "members": [
8228
8196
  {
@@ -8340,33 +8308,49 @@
8340
8308
  },
8341
8309
  {
8342
8310
  "kind": "variable",
8343
- "name": "zeroGridLayout",
8344
- "description": "The Zero Grid Layout",
8311
+ "name": "zeroFlyout",
8312
+ "description": "The Zero Flyout",
8345
8313
  "privacy": "public"
8346
8314
  }
8347
8315
  ],
8348
8316
  "exports": [
8349
8317
  {
8350
8318
  "kind": "js",
8351
- "name": "GridLayout",
8319
+ "name": "defaultFlyoutConfig",
8352
8320
  "declaration": {
8353
- "name": "GridLayout",
8354
- "module": "src/grid-layout/grid-layout.ts"
8321
+ "name": "defaultFlyoutConfig",
8322
+ "module": "src/flyout/flyout.ts"
8355
8323
  }
8356
8324
  },
8357
8325
  {
8358
8326
  "kind": "js",
8359
- "name": "zeroGridLayout",
8327
+ "name": "zeroFlyoutShadowOptions",
8360
8328
  "declaration": {
8361
- "name": "zeroGridLayout",
8362
- "module": "src/grid-layout/grid-layout.ts"
8329
+ "name": "zeroFlyoutShadowOptions",
8330
+ "module": "src/flyout/flyout.ts"
8331
+ }
8332
+ },
8333
+ {
8334
+ "kind": "js",
8335
+ "name": "Flyout",
8336
+ "declaration": {
8337
+ "name": "Flyout",
8338
+ "module": "src/flyout/flyout.ts"
8339
+ }
8340
+ },
8341
+ {
8342
+ "kind": "js",
8343
+ "name": "zeroFlyout",
8344
+ "declaration": {
8345
+ "name": "zeroFlyout",
8346
+ "module": "src/flyout/flyout.ts"
8363
8347
  }
8364
8348
  }
8365
8349
  ]
8366
8350
  },
8367
8351
  {
8368
8352
  "kind": "javascript-module",
8369
- "path": "src/grid-layout/index.ts",
8353
+ "path": "src/flyout/index.ts",
8370
8354
  "declarations": [],
8371
8355
  "exports": [
8372
8356
  {
@@ -8374,7 +8358,23 @@
8374
8358
  "name": "*",
8375
8359
  "declaration": {
8376
8360
  "name": "*",
8377
- "package": "./grid-layout"
8361
+ "package": "./flyout"
8362
+ }
8363
+ },
8364
+ {
8365
+ "kind": "js",
8366
+ "name": "*",
8367
+ "declaration": {
8368
+ "name": "*",
8369
+ "package": "./flyout.styles"
8370
+ }
8371
+ },
8372
+ {
8373
+ "kind": "js",
8374
+ "name": "*",
8375
+ "declaration": {
8376
+ "name": "*",
8377
+ "package": "./flyout.template"
8378
8378
  }
8379
8379
  }
8380
8380
  ]
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/foundation-zero",
3
3
  "description": "Genesis Foundation Zero Design System",
4
- "version": "14.92.0",
4
+ "version": "14.92.1-pa-913.3",
5
5
  "sideEffects": false,
6
6
  "license": "SEE LICENSE IN license.txt",
7
7
  "main": "dist/esm/index.js",
@@ -65,7 +65,7 @@
65
65
  "storybook": "storybook dev -p 6006"
66
66
  },
67
67
  "devDependencies": {
68
- "@genesislcap/genx": "14.92.0",
68
+ "@genesislcap/genx": "14.92.1-pa-913.3",
69
69
  "@storybook/addon-essentials": "^7.1.0",
70
70
  "@storybook/addon-links": "^7.1.0",
71
71
  "@storybook/addons": "^7.1.0",
@@ -78,10 +78,10 @@
78
78
  "storybook": "^7.1.0"
79
79
  },
80
80
  "dependencies": {
81
- "@genesislcap/foundation-comms": "14.92.0",
82
- "@genesislcap/foundation-logger": "14.92.0",
83
- "@genesislcap/foundation-ui": "14.92.0",
84
- "@genesislcap/foundation-utils": "14.92.0",
81
+ "@genesislcap/foundation-comms": "14.92.1-pa-913.3",
82
+ "@genesislcap/foundation-logger": "14.92.1-pa-913.3",
83
+ "@genesislcap/foundation-ui": "14.92.1-pa-913.3",
84
+ "@genesislcap/foundation-utils": "14.92.1-pa-913.3",
85
85
  "@microsoft/fast-colors": "^5.1.4",
86
86
  "@microsoft/fast-components": "^2.21.3",
87
87
  "@microsoft/fast-element": "^1.7.0",
@@ -98,5 +98,5 @@
98
98
  "access": "public"
99
99
  },
100
100
  "customElements": "dist/custom-elements.json",
101
- "gitHead": "c7de07404d3f51b7503f59f07e79cc2786bcd5d7"
101
+ "gitHead": "5a527587221254714112b71d7c7735f10fdfe26b"
102
102
  }