@genesislcap/foundation-zero 14.59.0 → 14.61.0

package/dist/esm/flipper/flipper.stories.js

@@ -15,6 +15,6 @@ export const Primary = {
         direction: 'next',
     },
     render: ({ direction }) => html `
-      <zero-flipper direction="${direction}">Zero Flipper</zero-flipper>
-    `,
+    <zero-flipper direction="${direction}">Zero Flipper</zero-flipper>
+  `,
 };

package/dist/esm/flyout/flyout.stories.js

@@ -25,35 +25,35 @@ export const Primary = {
         flyoutWidth: '20%',
     },
     render: ({ position, height, flyoutWidth }) => html `
-      <div style="display: flex; height: ${height};">
-        <zero-button @click="${openFlyout}">Open Flyout</zero-button>
+    <div style="display: flex; height: ${height};">
+      <zero-button @click="${openFlyout}">Open Flyout</zero-button>
 
-        <style>
-          zero-flyout::part(flyout) {
-            width: ${flyoutWidth};
-          }
-        </style>
-        <zero-flyout position="${position}" style="height: ${height};">
-          <p slot="title">Zero flyout</p>
-          <div slot="header">
-            <p>Header</p>
-          </div>
-          <div class="container">
-            <p>Flyout options</p>
-            <ul>
-              <li>0</li>
-              <li>1</li>
-              <li>2</li>
-              <li>3</li>
-              <li>4</li>
-              <li>5</li>
-            </ul>
-          </div>
-          <div slot="footer">
-            <p>Footer</p>
-            <zero-button @click="${closeFlyout}">Close Flyout</zero-button>
-          </div>
-        </zero-flyout>
-      </div>
-    `,
+      <style>
+        zero-flyout::part(flyout) {
+          width: ${flyoutWidth};
+        }
+      </style>
+      <zero-flyout position="${position}" style="height: ${height};">
+        <p slot="title">Zero flyout</p>
+        <div slot="header">
+          <p>Header</p>
+        </div>
+        <div class="container">
+          <p>Flyout options</p>
+          <ul>
+            <li>0</li>
+            <li>1</li>
+            <li>2</li>
+            <li>3</li>
+            <li>4</li>
+            <li>5</li>
+          </ul>
+        </div>
+        <div slot="footer">
+          <p>Footer</p>
+          <zero-button @click="${closeFlyout}">Close Flyout</zero-button>
+        </div>
+      </zero-flyout>
+    </div>
+  `,
 };

package/dist/esm/horizontal-scroll/horizontal-scroll.js

@@ -0,0 +1,10 @@
+import { HorizontalScroll as FoundationHorizontalScroll, defaultHorizontalScrollConfig, foundationHorizontalScrollShadowOptions, } from '@genesislcap/foundation-ui';
+import { zeroHorizontalScrollStyles as styles } from './horizontal-scroll.styles';
+import { zeroHorizontalScrollTemplate as template } from './horizontal-scroll.template';
+/**
+ * @tagname %%prefix%%-horizontal-scroll
+ */
+export class HorizontalScroll extends FoundationHorizontalScroll {
+}
+export const zeroHorizontalScroll = HorizontalScroll.compose(Object.assign({ baseName: 'horizontal-scroll', template,
+    styles, shadowOptions: foundationHorizontalScrollShadowOptions }, defaultHorizontalScrollConfig));

package/dist/esm/horizontal-scroll/horizontal-scroll.stories.js

@@ -0,0 +1,22 @@
+import { html } from 'lit-html';
+import { repeat } from 'lit-html/directives/repeat.js';
+const meta = {
+    title: 'Horizontal Scroll',
+    component: 'zero-horizontal-scroll',
+};
+export default meta;
+const horizontalScrollStyle = 'width: 400px;padding-left: 16px;';
+const cardStyle = 'padding: 10px;';
+const cards = Array.from({ length: 8 }, (_, i) => i + 1);
+export const Primary = {
+    render: () => html `
+    <zero-horizontal-scroll style=${horizontalScrollStyle}>
+      ${repeat(cards, (item) => item, (item) => html `
+          <zero-card style=${cardStyle}>
+            Card number ${item}
+            <zero-button>A button</zero-button>
+          </zero-card>
+        `)}
+    </zero-horizontal-scroll>
+  `,
+};

package/dist/esm/horizontal-scroll/horizontal-scroll.styles.js

@@ -0,0 +1,5 @@
+import { foundationHorizontalScrollStyles } from '@genesislcap/foundation-ui';
+import { css } from '@microsoft/fast-element';
+export const zeroHorizontalScrollStyles = (context, definition) => css `
+  ${foundationHorizontalScrollStyles(context, definition)}
+`;

package/dist/esm/horizontal-scroll/horizontal-scroll.template.js

@@ -0,0 +1,2 @@
+import { foundationHorizontalScrollTemplate } from '@genesislcap/foundation-ui';
+export const zeroHorizontalScrollTemplate = (context, definition) => foundationHorizontalScrollTemplate(context, definition);

package/dist/esm/horizontal-scroll/index.js

@@ -0,0 +1,3 @@
+export * from './horizontal-scroll';
+export * from './horizontal-scroll.styles';
+export * from './horizontal-scroll.template';

package/dist/esm/index.js

@@ -35,6 +35,7 @@ export * from './flipper';
 export * from './flyout';
 export * from './grid-layout';
 export * from './grid-layout-item';
+export * from './horizontal-scroll';
 export * from './icon';
 export * from './listbox';
 export * from './listbox-option';

package/dist/esm/menu/menu.stories.js

@@ -10,17 +10,17 @@ export const Primary = {
         subMenuItemsText: 'SubMenu item',
     },
     render: ({ menuItemsText, subMenuItemsText }) => html `
-      <zero-menu>
-        <zero-menu-item>
-          ${menuItemsText} 1
-          <zero-menu>
-            <zero-menu-item>${subMenuItemsText} 1</zero-menu-item>
-            <zero-menu-item>${subMenuItemsText} 2</zero-menu-item>
-            <zero-menu-item>${subMenuItemsText}</zero-menu-item>
-          </zero-menu>
-        </zero-menu-item>
-        <zero-menu-item>${menuItemsText} 2</zero-menu-item>
-        <zero-menu-item>${menuItemsText}</zero-menu-item>
-      </zero-menu>
-    `,
+    <zero-menu>
+      <zero-menu-item>
+        ${menuItemsText} 1
+        <zero-menu>
+          <zero-menu-item>${subMenuItemsText} 1</zero-menu-item>
+          <zero-menu-item>${subMenuItemsText} 2</zero-menu-item>
+          <zero-menu-item>${subMenuItemsText}</zero-menu-item>
+        </zero-menu>
+      </zero-menu-item>
+      <zero-menu-item>${menuItemsText} 2</zero-menu-item>
+      <zero-menu-item>${menuItemsText}</zero-menu-item>
+    </zero-menu>
+  `,
 };

package/dist/esm/multiselect/multiselect.styles.js

@@ -15,7 +15,8 @@ export const multiselectStyles = css `
 
   #display-field:focus {
     outline: none;
-    background: linear-gradient(
+    background:
+      linear-gradient(
           var(--primary-gradient-angle),
           ${PrimaryRapidColorHEX.blue} 0%,
           ${PrimaryRapidColorHEX.purple} 100%

package/dist/esm/select/select.styles.js

@@ -14,7 +14,8 @@ export const zeroSelectStyles = (context, definition) => css `
   }
 
   :host(:focus-within:not([disabled])) {
-    background: linear-gradient(
+    background:
+      linear-gradient(
           var(--primary-gradient-angle),
           ${PrimaryRapidColorHEX.blue} 0%,
           ${PrimaryRapidColorHEX.purple} 100%

package/dist/esm/snackbar/snackbar.stories.js

@@ -35,8 +35,8 @@ export const Primary = {
         errorText: 'Lorem ipsum dolor sit amet consectetur adipisicing elit.',
     },
     render: ({ errorText }) => html `
-      <div id="zero-snackbar" style="width: 100%;">
-        <zero-button @click="${() => showError(errorText)}">Show Zero Snackbar</zero-button>
-      </div>
-    `,
+    <div id="zero-snackbar" style="width: 100%;">
+      <zero-button @click="${() => showError(errorText)}">Show Zero Snackbar</zero-button>
+    </div>
+  `,
 };

package/dist/esm/text-area/text-area.styles.js

@@ -21,7 +21,8 @@ export const zeroTextAreaStyles = (context, definition) => css `
   }
 
   :host(:focus-within:not([disabled])) .control {
-    background: linear-gradient(
+    background:
+      linear-gradient(
           var(--primary-gradient-angle),
           ${PrimaryRapidColorHEX.blue} 0%,
           ${PrimaryRapidColorHEX.purple} 100%

package/dist/esm/text-field/text-field.styles.js

@@ -24,7 +24,8 @@ export const zeroTextFieldStyles = (context, definition) => css `
   }
 
   :host(:focus-within:not([disabled])) .root {
-    background: linear-gradient(
+    background:
+      linear-gradient(
           var(--primary-gradient-angle),
           ${PrimaryRapidColorHEX.blue} 0%,
           ${PrimaryRapidColorHEX.purple} 100%

package/dist/esm/tree-item/tree-item.styles.js

@@ -12,7 +12,8 @@ export const zeroTreeItemStyles = (context, definition) => css `
   }
 
   :host([selected])::after {
-    background: linear-gradient(
+    background:
+      linear-gradient(
           var(--primary-gradient-angle),
           ${PrimaryRapidColorHEX.blue} 10%,
           ${PrimaryRapidColorHEX.purple} 100%

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/foundation-zero",
   "description": "Genesis Foundation Zero Design System",
-  "version": "14.59.0",
+  "version": "14.61.0",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -62,7 +62,7 @@
     "storybook": "storybook dev -p 6006"
   },
   "devDependencies": {
-    "@genesislcap/genx": "14.59.0",
+    "@genesislcap/genx": "14.61.0",
     "@storybook/addon-essentials": "^7.0.0",
     "@storybook/addon-links": "^7.0.0",
     "@storybook/addons": "^7.0.0",
@@ -75,9 +75,9 @@
     "storybook": "^7.0.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-comms": "14.59.0",
-    "@genesislcap/foundation-ui": "14.59.0",
-    "@genesislcap/foundation-utils": "14.59.0",
+    "@genesislcap/foundation-comms": "14.61.0",
+    "@genesislcap/foundation-ui": "14.61.0",
+    "@genesislcap/foundation-utils": "14.61.0",
     "@microsoft/fast-colors": "^5.1.4",
     "@microsoft/fast-components": "^2.21.3",
     "@microsoft/fast-element": "^1.7.0",
@@ -94,5 +94,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "9e694bb994fa48b71b0c6301a3ad72f54671d117"
+  "gitHead": "ce85a561be8b6df2896d826b0aff962a2460897f"
 }