@genesislcap/foundation-ui 15.73.0-FUI-2628.4 → 15.74.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.
package/README.md CHANGED
@@ -7,7 +7,6 @@ This package contains our core foundation UI component library + FAST components
7
7
  their style. Apps shouldn't have a dependency on this unless they have very good reason to. Instead, they should depend
8
8
  on the design system variant that takes this foundation and applies styling etc.
9
9
 
10
- - See [Zero Design System](../foundation-ds/foundation-zero/README.md).
11
10
  - See [Rapid Design System](../foundation-ds/rapid-design-system/README.md).
12
11
 
13
12
  ## [API Docs](./docs/api/index.md)
@@ -57,7 +56,7 @@ import { foundationButton, foundationDesignSystemProvider, provideDesignSystem }
57
56
 
58
57
  provideDesignSystem().register(
59
58
  /**
60
- * Design system provider element used to declaratively apply zero config to every dom node in the host tree.
59
+ * Design system provider element used to declaratively apply foundation config to every dom node in the host tree.
61
60
  */
62
61
  foundationDesignSystemProvider(),
63
62
 
@@ -75,7 +74,7 @@ import { foundationButton, foundationCard, foundationDesignSystemProvider, found
75
74
 
76
75
  provideDesignSystem().register(
77
76
  /**
78
- * Design system provider element used to declaratively apply zero config to every dom node in the host tree.
77
+ * Design system provider element used to declaratively apply foundation config to every dom node in the host tree.
79
78
  */
80
79
  foundationDesignSystemProvider(),
81
80
 
@@ -119,21 +118,18 @@ You can also provide multiple design systems in your application. Here's an exam
119
118
  ```typescript
120
119
  import { baseComponents, provideDesignSystem } from '@genesislcap/foundation-ui';
121
120
  import { baseComponents as rapidBaseComponents, provideDesignSystem as provideRapidDesignSystem } from '@genesislcap/rapid-design-system';
122
- import { baseComponents as zeroBaseComponents, provideDesignSystem as provideZeroDesignSystem } from '@genesislcap/foundation-zero';
123
121
 
124
122
  provideDesignSystem().register(baseComponents);
125
123
  provideRapidDesignSystem().register(rapidBaseComponents);
126
- provideZeroDesignSystem().register(zeroBaseComponents);
127
124
  ```
128
125
 
129
- In the example above, we provide three different design systems: the base design system, the rapid design system, and the zero design system.
126
+ In the example above, we provide two different design systems: the base design system and the rapid design system.
130
127
 
131
128
  With those in place you can now use the components from the different design systems in your application:
132
129
 
133
130
  ```html
134
131
  <foundation-button>Base Button</foundation-button>
135
132
  <rapid-button>Rapid Button</rapid-button>
136
- <zero-button>Zero Button</zero-button>
137
133
  ```
138
134
 
139
135
 
@@ -956,6 +956,37 @@
956
956
  }
957
957
  ]
958
958
  },
959
+ {
960
+ "kind": "javascript-module",
961
+ "path": "src/_config/index.ts",
962
+ "declarations": [],
963
+ "exports": [
964
+ {
965
+ "kind": "js",
966
+ "name": "*",
967
+ "declaration": {
968
+ "name": "*",
969
+ "package": "./styles"
970
+ }
971
+ },
972
+ {
973
+ "kind": "js",
974
+ "name": "*",
975
+ "declaration": {
976
+ "name": "*",
977
+ "package": "./tokens"
978
+ }
979
+ },
980
+ {
981
+ "kind": "js",
982
+ "name": "*",
983
+ "declaration": {
984
+ "name": "*",
985
+ "package": "./values"
986
+ }
987
+ }
988
+ ]
989
+ },
959
990
  {
960
991
  "kind": "javascript-module",
961
992
  "path": "src/_common/affix-mixin.ts",
@@ -1493,37 +1524,6 @@
1493
1524
  }
1494
1525
  ]
1495
1526
  },
1496
- {
1497
- "kind": "javascript-module",
1498
- "path": "src/_config/index.ts",
1499
- "declarations": [],
1500
- "exports": [
1501
- {
1502
- "kind": "js",
1503
- "name": "*",
1504
- "declaration": {
1505
- "name": "*",
1506
- "package": "./styles"
1507
- }
1508
- },
1509
- {
1510
- "kind": "js",
1511
- "name": "*",
1512
- "declaration": {
1513
- "name": "*",
1514
- "package": "./tokens"
1515
- }
1516
- },
1517
- {
1518
- "kind": "js",
1519
- "name": "*",
1520
- "declaration": {
1521
- "name": "*",
1522
- "package": "./values"
1523
- }
1524
- }
1525
- ]
1526
- },
1527
1527
  {
1528
1528
  "kind": "javascript-module",
1529
1529
  "path": "src/accordion-item/accordion-item.styles.ts",
@@ -17201,7 +17201,7 @@
17201
17201
  "type": {
17202
17202
  "text": "ElementStyles"
17203
17203
  },
17204
- "default": "css`\n :host {\n --dialog-close-icon-display: flex;\n --dialog-min-width: 358px;\n --notification-details-min-height: 40px;\n }\n\n dialog[type='error'],\n dialog[type='alert'],\n dialog[type='success'] {\n padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px)\n calc(var(--design-unit) * 2px) calc(var(--design-unit) * 6px);\n }\n\n dialog[type='error']::before,\n dialog[type='alert']::before,\n dialog[type='success']::before {\n content: '';\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(var(--design-unit) * 3px - 2px);\n height: calc(100% - (var(--design-unit) * 4px));\n width: 4px;\n border-radius: 2px;\n }\n\n dialog[type='error']::before {\n background-color: var(--error-color);\n }\n\n dialog[type='alert']::before {\n background-color: var(--warning-color);\n }\n\n dialog[type='success']::before {\n background-color: var(--success-color);\n }\n\n .header-controls {\n display: flex;\n gap: calc(var(--design-unit) * 1px);\n align-items: center;\n }\n\n :host([draggable])::part(top) {\n cursor: move;\n }\n\n .close-icon {\n display: var(--dialog-close-icon-display);\n }\n\n .reset-size-icon {\n display: flex;\n }\n\n dialog {\n background-color: var(--dialog-background, var(--fill-color));\n padding: calc(var(--design-unit) * 3px);\n outline: none;\n overflow: inherit;\n\n /* The inner element is position:fixed, so it is never CLIPPED — but an 'auto' default leaves it\n in the normal paint tree at its tree position, where any later-in-DOM sibling paints over it\n (e.g. a non-modal dialog inside one FlexLayout tile disappears under the tiles below).\n 1001 clears app headers (999) and FlexLayout's drag chrome (1000) while staying under Flyout\n (2000/2001). Modal is unaffected: showModal() puts it in the top layer, above all of this. */\n z-index: var(--dialog-z-index, 1001);\n }\n\n :host([position='left']) dialog {\n margin-left: 0;\n }\n\n :host([position='right']) dialog {\n margin-right: 0;\n }\n\n ::slotted(zero-divider) {\n width: 100%;\n }\n\n .top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: calc(var(--design-unit) * 2px);\n }\n\n .title {\n margin-top: calc(var(--design-unit) * 2px);\n font-size: 14px;\n }\n\n .details {\n font-size: 12px;\n overflow: hidden;\n min-height: var(--notification-details-min-height);\n white-space: pre-line;\n }\n\n .content-container {\n box-sizing: border-box;\n }\n\n :host([resizable]) dialog {\n position: relative;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n }\n\n :host([resizable]) dialog[open] {\n display: flex;\n flex-direction: column;\n }\n\n /* Override design system max-width constraints for resizable dialogs */\n :host([resizable]) dialog .content-wrapper {\n position: relative;\n height: 100%;\n width: 100%;\n max-height: 100%;\n min-width: 100%;\n max-width: 100%;\n resize: none;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n :host([resizable]) .content-container {\n flex: 1 1 auto;\n overflow: auto;\n min-height: 0;\n box-sizing: border-box;\n }\n\n :host([resizable]) .top,\n :host([resizable]) .bottom {\n flex: 0 0 auto;\n }\n\n :host([position='right']) dialog .content-wrapper,\n :host([position='left']) dialog .content-wrapper,\n :host([position='left']) dialog,\n :host([position='right']) dialog {\n height: 100%;\n }\n\n /* Resize handles */\n .resize-handle {\n position: absolute;\n z-index: 10;\n }\n\n /* Edge handles */\n .resize-handle-n,\n .resize-handle-s {\n left: 0;\n right: 0;\n height: 8px;\n cursor: ns-resize;\n }\n\n .resize-handle-n {\n top: 0;\n }\n\n .resize-handle-s {\n bottom: 0;\n }\n\n .resize-handle-e,\n .resize-handle-w {\n top: 0;\n bottom: 0;\n width: 8px;\n cursor: ew-resize;\n }\n\n .resize-handle-e {\n right: 0;\n }\n\n .resize-handle-w {\n left: 0;\n }\n\n /* Corner handles */\n .resize-handle-ne,\n .resize-handle-nw,\n .resize-handle-se,\n .resize-handle-sw {\n width: 16px;\n height: 16px;\n }\n\n .resize-handle-ne {\n top: 0;\n right: 0;\n cursor: nesw-resize;\n }\n\n .resize-handle-nw {\n top: 0;\n left: 0;\n cursor: nwse-resize;\n }\n\n .resize-handle-se {\n bottom: 0;\n right: 0;\n cursor: nwse-resize;\n }\n\n .resize-handle-sw {\n bottom: 0;\n left: 0;\n cursor: nesw-resize;\n }\n\n /* Visual indicator for corner handles */\n .resize-handle-se::after,\n .resize-handle-sw::after,\n .resize-handle-ne::after,\n .resize-handle-nw::after {\n content: '';\n position: absolute;\n width: 8px;\n height: 8px;\n border-style: solid;\n border-color: var(--neutral-stroke-divider-rest);\n opacity: 50%;\n transition: opacity 0.2s;\n margin: 2px;\n }\n\n .resize-handle-se::after {\n bottom: 2px;\n right: 2px;\n border-width: 0 3px 3px 0;\n }\n\n .resize-handle-sw::after {\n bottom: 2px;\n left: 2px;\n border-width: 0 0 3px 3px;\n }\n\n .resize-handle-ne::after {\n top: 2px;\n right: 2px;\n border-width: 3px 3px 0 0;\n }\n\n .resize-handle-nw::after {\n top: 2px;\n left: 2px;\n border-width: 3px 0 0 3px;\n }\n\n /* Hover effect */\n .resize-handle:hover::after {\n opacity: 100%;\n }\n\n /* Resizing state */\n dialog.resizing {\n user-select: none;\n pointer-events: auto;\n }\n\n /* Fixed positioning support for resizable dialogs */\n dialog[style*='position: fixed'] {\n margin: 0;\n }\n`"
17204
+ "default": "css`\n :host {\n --dialog-close-icon-display: flex;\n --dialog-min-width: 358px;\n --notification-details-min-height: 40px;\n }\n\n dialog[type='error'],\n dialog[type='alert'],\n dialog[type='success'] {\n padding: calc(var(--design-unit) * 2px) calc(var(--design-unit) * 4px)\n calc(var(--design-unit) * 2px) calc(var(--design-unit) * 6px);\n }\n\n dialog[type='error']::before,\n dialog[type='alert']::before,\n dialog[type='success']::before {\n content: '';\n position: absolute;\n top: 50%;\n transform: translateY(-50%);\n left: calc(var(--design-unit) * 3px - 2px);\n height: calc(100% - (var(--design-unit) * 4px));\n width: 4px;\n border-radius: 2px;\n }\n\n dialog[type='error']::before {\n background-color: var(--error-color);\n }\n\n dialog[type='alert']::before {\n background-color: var(--warning-color);\n }\n\n dialog[type='success']::before {\n background-color: var(--success-color);\n }\n\n .header-controls {\n display: flex;\n gap: calc(var(--design-unit) * 1px);\n align-items: center;\n }\n\n :host([draggable])::part(top) {\n cursor: move;\n }\n\n .close-icon {\n display: var(--dialog-close-icon-display);\n }\n\n .reset-size-icon {\n display: flex;\n }\n\n dialog {\n background-color: var(--dialog-background, var(--fill-color));\n padding: calc(var(--design-unit) * 3px);\n outline: none;\n overflow: inherit;\n\n /* The inner element is position:fixed, so it is never CLIPPED — but an 'auto' default leaves it\n in the normal paint tree at its tree position, where any later-in-DOM sibling paints over it\n (e.g. a non-modal dialog inside one FlexLayout tile disappears under the tiles below).\n 1001 clears app headers (999) and FlexLayout's drag chrome (1000) while staying under Flyout\n (2000/2001). Modal is unaffected: showModal() puts it in the top layer, above all of this. */\n z-index: var(--dialog-z-index, 1001);\n }\n\n :host([position='left']) dialog {\n margin-left: 0;\n }\n\n :host([position='right']) dialog {\n margin-right: 0;\n }\n\n .top {\n display: flex;\n justify-content: space-between;\n align-items: center;\n gap: calc(var(--design-unit) * 2px);\n }\n\n .title {\n margin-top: calc(var(--design-unit) * 2px);\n font-size: 14px;\n }\n\n .details {\n font-size: 12px;\n overflow: hidden;\n min-height: var(--notification-details-min-height);\n white-space: pre-line;\n }\n\n .content-container {\n box-sizing: border-box;\n }\n\n :host([resizable]) dialog {\n position: relative;\n box-sizing: border-box;\n max-width: 100%;\n max-height: 100%;\n }\n\n :host([resizable]) dialog[open] {\n display: flex;\n flex-direction: column;\n }\n\n /* Override design system max-width constraints for resizable dialogs */\n :host([resizable]) dialog .content-wrapper {\n position: relative;\n height: 100%;\n width: 100%;\n max-height: 100%;\n min-width: 100%;\n max-width: 100%;\n resize: none;\n box-sizing: border-box;\n display: flex;\n flex-direction: column;\n overflow: hidden;\n }\n\n :host([resizable]) .content-container {\n flex: 1 1 auto;\n overflow: auto;\n min-height: 0;\n box-sizing: border-box;\n }\n\n :host([resizable]) .top,\n :host([resizable]) .bottom {\n flex: 0 0 auto;\n }\n\n :host([position='right']) dialog .content-wrapper,\n :host([position='left']) dialog .content-wrapper,\n :host([position='left']) dialog,\n :host([position='right']) dialog {\n height: 100%;\n }\n\n /* Resize handles */\n .resize-handle {\n position: absolute;\n z-index: 10;\n }\n\n /* Edge handles */\n .resize-handle-n,\n .resize-handle-s {\n left: 0;\n right: 0;\n height: 8px;\n cursor: ns-resize;\n }\n\n .resize-handle-n {\n top: 0;\n }\n\n .resize-handle-s {\n bottom: 0;\n }\n\n .resize-handle-e,\n .resize-handle-w {\n top: 0;\n bottom: 0;\n width: 8px;\n cursor: ew-resize;\n }\n\n .resize-handle-e {\n right: 0;\n }\n\n .resize-handle-w {\n left: 0;\n }\n\n /* Corner handles */\n .resize-handle-ne,\n .resize-handle-nw,\n .resize-handle-se,\n .resize-handle-sw {\n width: 16px;\n height: 16px;\n }\n\n .resize-handle-ne {\n top: 0;\n right: 0;\n cursor: nesw-resize;\n }\n\n .resize-handle-nw {\n top: 0;\n left: 0;\n cursor: nwse-resize;\n }\n\n .resize-handle-se {\n bottom: 0;\n right: 0;\n cursor: nwse-resize;\n }\n\n .resize-handle-sw {\n bottom: 0;\n left: 0;\n cursor: nesw-resize;\n }\n\n /* Visual indicator for corner handles */\n .resize-handle-se::after,\n .resize-handle-sw::after,\n .resize-handle-ne::after,\n .resize-handle-nw::after {\n content: '';\n position: absolute;\n width: 8px;\n height: 8px;\n border-style: solid;\n border-color: var(--neutral-stroke-divider-rest);\n opacity: 50%;\n transition: opacity 0.2s;\n margin: 2px;\n }\n\n .resize-handle-se::after {\n bottom: 2px;\n right: 2px;\n border-width: 0 3px 3px 0;\n }\n\n .resize-handle-sw::after {\n bottom: 2px;\n left: 2px;\n border-width: 0 0 3px 3px;\n }\n\n .resize-handle-ne::after {\n top: 2px;\n right: 2px;\n border-width: 3px 3px 0 0;\n }\n\n .resize-handle-nw::after {\n top: 2px;\n left: 2px;\n border-width: 3px 0 0 3px;\n }\n\n /* Hover effect */\n .resize-handle:hover::after {\n opacity: 100%;\n }\n\n /* Resizing state */\n dialog.resizing {\n user-select: none;\n pointer-events: auto;\n }\n\n /* Fixed positioning support for resizable dialogs */\n dialog[style*='position: fixed'] {\n margin: 0;\n }\n`"
17205
17205
  }
17206
17206
  ],
17207
17207
  "exports": [
@@ -24888,7 +24888,7 @@
24888
24888
  },
24889
24889
  {
24890
24890
  "name": "prefix",
24891
- "default": "'zero'",
24891
+ "default": "'rapid'",
24892
24892
  "type": {
24893
24893
  "text": "string"
24894
24894
  }
@@ -24972,7 +24972,7 @@
24972
24972
  "type": {
24973
24973
  "text": "ElementStyles"
24974
24974
  },
24975
- "default": "css`\n .filter-wrapper {\n border: 1px solid gray;\n border-radius: calc(var(--design-unit) * 2px);\n padding: calc(var(--design-unit) * 1px);\n }\n\n .close-icon {\n display: flex;\n place-content: center;\n align-items: center;\n flex-direction: column;\n margin: calc(var(--design-unit) * 1px);\n padding: calc(var(--design-unit) * 1px);\n border: 1px solid transparent;\n border-radius: calc(var(--design-unit) * 2px);\n cursor: pointer;\n }\n\n .close-icon,\n .cloase-icon svg path {\n transition-property: all;\n transition-timing-function: linear;\n transition-duration: 300ms;\n }\n\n .close-icon:hover {\n border-color: red;\n background: rgb(255 0 0 / 25%);\n }\n\n .close-icon:hover svg path {\n fill: red;\n }\n\n .flex-row {\n display: flex;\n flex-direction: row;\n place-content: center space-between;\n align-items: center;\n }\n\n .flex-row zero-text-field,\n .flex-row zero-select,\n .flex-row foundation-text-field,\n .flex-row foundation-select {\n flex: 1;\n }\n`"
24975
+ "default": "css`\n .filter-wrapper {\n border: 1px solid gray;\n border-radius: calc(var(--design-unit) * 2px);\n padding: calc(var(--design-unit) * 1px);\n }\n\n .close-icon {\n display: flex;\n place-content: center;\n align-items: center;\n flex-direction: column;\n margin: calc(var(--design-unit) * 1px);\n padding: calc(var(--design-unit) * 1px);\n border: 1px solid transparent;\n border-radius: calc(var(--design-unit) * 2px);\n cursor: pointer;\n }\n\n .close-icon,\n .cloase-icon svg path {\n transition-property: all;\n transition-timing-function: linear;\n transition-duration: 300ms;\n }\n\n .close-icon:hover {\n border-color: red;\n background: rgb(255 0 0 / 25%);\n }\n\n .close-icon:hover svg path {\n fill: red;\n }\n\n .flex-row {\n display: flex;\n flex-direction: row;\n place-content: center space-between;\n align-items: center;\n }\n\n .flex-row foundation-text-field,\n .flex-row foundation-select {\n flex: 1;\n }\n`"
24976
24976
  }
24977
24977
  ],
24978
24978
  "exports": [
@@ -32778,7 +32778,7 @@
32778
32778
  {
32779
32779
  "kind": "variable",
32780
32780
  "name": "multiselectStyles",
32781
- "default": "css`\n :host {\n --scrollbar-width: 12px;\n --scrollbar-thumb-width: 8px;\n }\n\n .root {\n position: relative;\n width: inherit;\n min-width: 250px;\n }\n\n .control {\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n border-radius: calc(var(--control-corner-radius) * 1px);\n }\n\n #display-field {\n width: 100%;\n cursor: pointer;\n color: var(--neutral-foreground-rest);\n min-height: 40px;\n padding: 0 calc(var(--design-unit) * 2.25px);\n border-width: 0;\n background-color: var(--neutral-fill-input-rest);\n border-radius: calc(var(--control-corner-radius) * 1px);\n }\n\n #display-field[disabled] {\n cursor: not-allowed;\n opacity: 30%;\n }\n\n #display-field:focus {\n outline: 1px solid var(--accent-fill-rest);\n background: var(--neutral-fill-input-rest);\n border-style: none;\n box-shadow: none;\n }\n\n #display-field:hover:not(:focus):not([disabled]) {\n outline: 1px solid var(--neutral-stroke-hover);\n }\n\n button {\n pointer-events: none;\n }\n\n .indicator {\n position: absolute;\n left: calc(100% - 26px);\n padding: 0;\n cursor: pointer;\n }\n\n #arrow-icon {\n width: 16px;\n fill: white;\n transform: rotate(0deg);\n transition: transform 0.2s linear 0s;\n }\n\n #arrow-icon.flipped {\n transform: rotate(180deg);\n }\n\n .disabled-svg {\n pointer-events: none;\n opacity: 30%;\n }\n\n .position-above {\n bottom: 100%;\n }\n\n ::-webkit-scrollbar {\n width: var(--scrollbar-width);\n }\n\n ::-webkit-scrollbar-track {\n background: var(--neutral-layer-4);\n }\n\n ::-webkit-scrollbar-thumb {\n width: var(--scrollbar-thumb-width);\n border-radius: 10px;\n box-shadow: inset 0 0 6px rgba(0 0 0 / 30%);\n background-color: var(--neutral-layer-2);\n border: 3px solid var(--neutral-layer-4);\n }\n\n ::-webkit-scrollbar-corner {\n background: var(--neutral-layer-4);\n }\n\n .multiselect-dropdown {\n display: flex;\n flex-direction: column;\n position: absolute;\n height: max-content;\n overflow: hidden;\n margin-top: calc(var(--design-unit) * 1px);\n border: calc(var(--stroke-width) * 1px) solid var(--neutral-layer-2);\n border-radius: 4px;\n background: var(--neutral-fill-input-rest);\n width: 100%;\n max-height: 0;\n visibility: hidden;\n z-index: 999;\n }\n\n .multiselect-dropdown:not(.is-resizing) {\n transition:\n max-height 0.4s ease 0s,\n visibility 0.4s ease 0s;\n }\n\n .checkbox-container {\n display: flex;\n flex-direction: column;\n list-style: none;\n overflow-y: auto;\n height: 100%;\n }\n\n .is-resizing .checkbox-container {\n overflow-y: hidden;\n }\n\n .checkbox-container zero-checkbox {\n min-width: fit-content;\n }\n\n .checkbox-container zero-checkbox[disabled],\n .checkbox-container foundation-checkbox[disabled] {\n cursor: not-allowed;\n }\n\n .visible {\n visibility: visible;\n max-height: var(--custom-max-height, ${maxheight.toString()}px);\n overflow: hidden;\n }\n\n ::slotted(foundation-checkbox),\n foundation-checkbox {\n border-bottom: 1px solid var(--neutral-layer-4);\n padding: 5px 0 5px 5px;\n margin: 0;\n }\n\n ::slotted(foundation-checkbox:hover),\n foundation-checkbox:hover {\n background-color: var(--neutral-layer-3);\n cursor: pointer;\n }\n\n ::slotted(foundation-checkbox)::part(label),\n foundation-checkbox::part(label) {\n overflow-x: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .label {\n display: block;\n cursor: pointer;\n font-size: var(--type-ramp-base-font-size);\n line-height: var(--type-ramp-base-line-height);\n font-style: normal;\n margin: calc(var(--design-unit) * 2px) 0;\n }\n\n .label-hidden {\n display: none;\n }\n\n ol,\n li {\n margin: 0;\n padding: 0;\n }\n\n .checkbox {\n width: 100%;\n }\n\n .select-all {\n width: 100%;\n margin-left: 0;\n margin-right: 0;\n }\n\n .display-value {\n position: absolute;\n right: 40px;\n color: var(--neutral-foreground-rest);\n font-size: var(--type-ramp-base-font-size);\n line-height: var(--type-ramp-base-line-height);\n font-family: var(--body-font);\n }\n\n .options-header-item-hidden {\n display: none;\n }\n\n .resize-button {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 12px;\n height: 12px;\n cursor: nw-resize;\n background: linear-gradient(\n -45deg,\n transparent 30%,\n var(--neutral-foreground-rest) 30%,\n var(--neutral-foreground-rest) 40%,\n transparent 40%,\n transparent 60%,\n var(--neutral-foreground-rest) 60%,\n var(--neutral-foreground-rest) 70%,\n transparent 70%\n );\n z-index: 1000;\n opacity: 60%;\n transition: opacity 0.2s ease;\n }\n\n .resize-button:hover {\n opacity: 100%;\n }\n\n .multiselect-dropdown.resizable {\n resize: none;\n overflow: hidden;\n }\n`"
32781
+ "default": "css`\n :host {\n --scrollbar-width: 12px;\n --scrollbar-thumb-width: 8px;\n }\n\n .root {\n position: relative;\n width: inherit;\n min-width: 250px;\n }\n\n .control {\n cursor: pointer;\n position: relative;\n display: flex;\n align-items: center;\n width: 100%;\n border-radius: calc(var(--control-corner-radius) * 1px);\n }\n\n #display-field {\n width: 100%;\n cursor: pointer;\n color: var(--neutral-foreground-rest);\n min-height: 40px;\n padding: 0 calc(var(--design-unit) * 2.25px);\n border-width: 0;\n background-color: var(--neutral-fill-input-rest);\n border-radius: calc(var(--control-corner-radius) * 1px);\n }\n\n #display-field[disabled] {\n cursor: not-allowed;\n opacity: 30%;\n }\n\n #display-field:focus {\n outline: 1px solid var(--accent-fill-rest);\n background: var(--neutral-fill-input-rest);\n border-style: none;\n box-shadow: none;\n }\n\n #display-field:hover:not(:focus):not([disabled]) {\n outline: 1px solid var(--neutral-stroke-hover);\n }\n\n button {\n pointer-events: none;\n }\n\n .indicator {\n position: absolute;\n left: calc(100% - 26px);\n padding: 0;\n cursor: pointer;\n }\n\n #arrow-icon {\n width: 16px;\n fill: white;\n transform: rotate(0deg);\n transition: transform 0.2s linear 0s;\n }\n\n #arrow-icon.flipped {\n transform: rotate(180deg);\n }\n\n .disabled-svg {\n pointer-events: none;\n opacity: 30%;\n }\n\n .position-above {\n bottom: 100%;\n }\n\n ::-webkit-scrollbar {\n width: var(--scrollbar-width);\n }\n\n ::-webkit-scrollbar-track {\n background: var(--neutral-layer-4);\n }\n\n ::-webkit-scrollbar-thumb {\n width: var(--scrollbar-thumb-width);\n border-radius: 10px;\n box-shadow: inset 0 0 6px rgba(0 0 0 / 30%);\n background-color: var(--neutral-layer-2);\n border: 3px solid var(--neutral-layer-4);\n }\n\n ::-webkit-scrollbar-corner {\n background: var(--neutral-layer-4);\n }\n\n .multiselect-dropdown {\n display: flex;\n flex-direction: column;\n position: absolute;\n height: max-content;\n overflow: hidden;\n margin-top: calc(var(--design-unit) * 1px);\n border: calc(var(--stroke-width) * 1px) solid var(--neutral-layer-2);\n border-radius: 4px;\n background: var(--neutral-fill-input-rest);\n width: 100%;\n max-height: 0;\n visibility: hidden;\n z-index: 999;\n }\n\n .multiselect-dropdown:not(.is-resizing) {\n transition:\n max-height 0.4s ease 0s,\n visibility 0.4s ease 0s;\n }\n\n .checkbox-container {\n display: flex;\n flex-direction: column;\n list-style: none;\n overflow-y: auto;\n height: 100%;\n }\n\n .is-resizing .checkbox-container {\n overflow-y: hidden;\n }\n\n .checkbox-container foundation-checkbox[disabled] {\n cursor: not-allowed;\n }\n\n .visible {\n visibility: visible;\n max-height: var(--custom-max-height, ${maxheight.toString()}px);\n overflow: hidden;\n }\n\n ::slotted(foundation-checkbox),\n foundation-checkbox {\n border-bottom: 1px solid var(--neutral-layer-4);\n padding: 5px 0 5px 5px;\n margin: 0;\n }\n\n ::slotted(foundation-checkbox:hover),\n foundation-checkbox:hover {\n background-color: var(--neutral-layer-3);\n cursor: pointer;\n }\n\n ::slotted(foundation-checkbox)::part(label),\n foundation-checkbox::part(label) {\n overflow-x: hidden;\n text-overflow: ellipsis;\n white-space: nowrap;\n }\n\n .label {\n display: block;\n cursor: pointer;\n font-size: var(--type-ramp-base-font-size);\n line-height: var(--type-ramp-base-line-height);\n font-style: normal;\n margin: calc(var(--design-unit) * 2px) 0;\n }\n\n .label-hidden {\n display: none;\n }\n\n ol,\n li {\n margin: 0;\n padding: 0;\n }\n\n .checkbox {\n width: 100%;\n }\n\n .select-all {\n width: 100%;\n margin-left: 0;\n margin-right: 0;\n }\n\n .display-value {\n position: absolute;\n right: 40px;\n color: var(--neutral-foreground-rest);\n font-size: var(--type-ramp-base-font-size);\n line-height: var(--type-ramp-base-line-height);\n font-family: var(--body-font);\n }\n\n .options-header-item-hidden {\n display: none;\n }\n\n .resize-button {\n position: absolute;\n bottom: 0;\n right: 0;\n width: 12px;\n height: 12px;\n cursor: nw-resize;\n background: linear-gradient(\n -45deg,\n transparent 30%,\n var(--neutral-foreground-rest) 30%,\n var(--neutral-foreground-rest) 40%,\n transparent 40%,\n transparent 60%,\n var(--neutral-foreground-rest) 60%,\n var(--neutral-foreground-rest) 70%,\n transparent 70%\n );\n z-index: 1000;\n opacity: 60%;\n transition: opacity 0.2s ease;\n }\n\n .resize-button:hover {\n opacity: 100%;\n }\n\n .multiselect-dropdown.resizable {\n resize: none;\n overflow: hidden;\n }\n`"
32782
32782
  }
32783
32783
  ],
32784
32784
  "exports": [
@@ -55361,7 +55361,7 @@
55361
55361
  "parameters": [
55362
55362
  {
55363
55363
  "name": "prefix",
55364
- "default": "'zero'"
55364
+ "default": "'rapid'"
55365
55365
  }
55366
55366
  ]
55367
55367
  },
@@ -1 +1 @@
1
- {"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAyF5D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAyFJ,SAAS,WAAW,GAAG,EAAE;CAe/C,CAAC"}
1
+ {"version":3,"file":"base-components.d.ts","sourceRoot":"","sources":["../../src/base-components.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,4BAA4B,CAAC;AAyF5D,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;yBAyFJ,SAAS,WAAW,GAAG,EAAE;CAe/C,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG7D,eAAO,MAAM,sBAAsB,EAAE,aAuRpC,CAAC"}
1
+ {"version":3,"file":"dialog.styles.d.ts","sourceRoot":"","sources":["../../../src/dialog/dialog.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG7D,eAAO,MAAM,sBAAsB,EAAE,aAmRpC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"file-upload.utils.d.ts","sourceRoot":"","sources":["../../../src/file-upload/file-upload.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAIrD,eAAO,MAAM,cAAc,GAAI,OAAO,KAAK,CAAC,IAAI,CAAC,aAMhD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,UAAU,QAAQ,EAAE,WAAW,MAAM,EAAE,MAAM,IAAI,iBAOzF,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,KAAK,MAAM,EACX,UAAU,MAAM,EAChB,WAAW,MAAM,EACjB,SAAQ,MAAc,EACtB,oBAAoB,OAAO,EAC3B,OAAO,GAAG,EACV,SAAQ,MAAe,SAuDxB,CAAC"}
1
+ {"version":3,"file":"file-upload.utils.d.ts","sourceRoot":"","sources":["../../../src/file-upload/file-upload.utils.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,IAAI,EAAE,MAAM,+BAA+B,CAAC;AAIrD,eAAO,MAAM,cAAc,GAAI,OAAO,KAAK,CAAC,IAAI,CAAC,aAMhD,CAAC;AAEF,eAAO,MAAM,WAAW,GAAI,KAAK,MAAM,EAAE,UAAU,QAAQ,EAAE,WAAW,MAAM,EAAE,MAAM,IAAI,iBAOzF,CAAC;AAEF,eAAO,MAAM,YAAY,GACvB,KAAK,MAAM,EACX,UAAU,MAAM,EAChB,WAAW,MAAM,EACjB,SAAQ,MAAc,EACtB,oBAAoB,OAAO,EAC3B,OAAO,GAAG,EACV,SAAQ,MAAgB,SAuDzB,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"filter.styles.d.ts","sourceRoot":"","sources":["../../../src/filter/filter.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG7D,eAAO,MAAM,sBAAsB,EAAE,aAgDpC,CAAC"}
1
+ {"version":3,"file":"filter.styles.d.ts","sourceRoot":"","sources":["../../../src/filter/filter.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,yBAAyB,CAAC;AAG7D,eAAO,MAAM,sBAAsB,EAAE,aA8CpC,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"multiselect.styles.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,MAAM,CAAC;AAE7B,eAAO,MAAM,iBAAiB,iDAiP7B,CAAC"}
1
+ {"version":3,"file":"multiselect.styles.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,SAAS,MAAM,CAAC;AAE7B,eAAO,MAAM,iBAAiB,iDA4O7B,CAAC"}
@@ -1 +1 @@
1
- {"version":3,"file":"toast.template.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAMrC,eAAO,MAAM,gBAAgB,GAAI,eAAe,KAAG,YAAY,CAAC,KAAK,CA8BpE,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBAEnC,CAAC"}
1
+ {"version":3,"file":"toast.template.d.ts","sourceRoot":"","sources":["../../../src/toast/toast.template.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yBAAyB,CAAC;AAE5D,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,OAAO,KAAK,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAMrC,eAAO,MAAM,gBAAgB,GAAI,eAAgB,KAAG,YAAY,CAAC,KAAK,CA8BrE,CAAC;AAEF,eAAO,MAAM,uBAAuB,yBAEnC,CAAC"}
@@ -1,4 +1,3 @@
1
- // Genesis Foundation Zero
2
1
  import { foundationAccordion } from './accordion';
3
2
  import { foundationAccordionItem } from './accordion-item';
4
3
  import { foundationActionsMenu } from './actions-menu';
@@ -78,10 +78,6 @@ export const foundationDialogStyles = css `
78
78
  margin-right: 0;
79
79
  }
80
80
 
81
- ::slotted(zero-divider) {
82
- width: 100%;
83
- }
84
-
85
81
  .top {
86
82
  display: flex;
87
83
  justify-content: space-between;
@@ -16,7 +16,7 @@ export const uploadFiles = (url, formData, authToken, http) => {
16
16
  headers,
17
17
  });
18
18
  };
19
- export const downloadFile = (url, filename, authToken, method = 'GET', showNotifications, body, prefix = 'zero') => {
19
+ export const downloadFile = (url, filename, authToken, method = 'GET', showNotifications, body, prefix = 'rapid') => {
20
20
  const headers = new Headers();
21
21
  headers.append('SESSION_AUTH_TOKEN', authToken);
22
22
  fetch(url, {
@@ -41,8 +41,6 @@ export const foundationFilterStyles = css `
41
41
  align-items: center;
42
42
  }
43
43
 
44
- .flex-row zero-text-field,
45
- .flex-row zero-select,
46
44
  .flex-row foundation-text-field,
47
45
  .flex-row foundation-select {
48
46
  flex: 1;
@@ -133,11 +133,6 @@ export const multiselectStyles = css `
133
133
  overflow-y: hidden;
134
134
  }
135
135
 
136
- .checkbox-container zero-checkbox {
137
- min-width: fit-content;
138
- }
139
-
140
- .checkbox-container zero-checkbox[disabled],
141
136
  .checkbox-container foundation-checkbox[disabled] {
142
137
  cursor: not-allowed;
143
138
  }
@@ -1,9 +1,9 @@
1
1
  import { html, ref, when } from '@microsoft/fast-element';
2
2
  import { getPrefix } from '../utils';
3
- const closeIcon = (prefix = 'zero') => {
3
+ const closeIcon = (prefix = 'rapid') => {
4
4
  return html `<${prefix}-icon class="close-icon" size="lg" name="xmark"></prefix-icon>`;
5
5
  };
6
- export const getPrefixedToast = (prefix = 'zero') => html `
6
+ export const getPrefixedToast = (prefix = 'rapid') => html `
7
7
  <div
8
8
  role="alert"
9
9
  part="root"
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@genesislcap/foundation-ui",
3
3
  "description": "Genesis Foundation UI",
4
- "version": "15.73.0-FUI-2628.4",
4
+ "version": "15.74.0",
5
5
  "sideEffects": false,
6
6
  "license": "SEE LICENSE IN license.txt",
7
7
  "main": "dist/esm/index.js",
@@ -82,12 +82,12 @@
82
82
  }
83
83
  },
84
84
  "devDependencies": {
85
- "@genesislcap/foundation-testing": "15.73.0-FUI-2628.4",
86
- "@genesislcap/genx": "15.73.0-FUI-2628.4",
87
- "@genesislcap/ts-builder": "15.73.0-FUI-2628.4",
88
- "@genesislcap/uvu-playwright-builder": "15.73.0-FUI-2628.4",
89
- "@genesislcap/vite-builder": "15.73.0-FUI-2628.4",
90
- "@genesislcap/webpack-builder": "15.73.0-FUI-2628.4",
85
+ "@genesislcap/foundation-testing": "15.74.0",
86
+ "@genesislcap/genx": "15.74.0",
87
+ "@genesislcap/ts-builder": "15.74.0",
88
+ "@genesislcap/uvu-playwright-builder": "15.74.0",
89
+ "@genesislcap/vite-builder": "15.74.0",
90
+ "@genesislcap/webpack-builder": "15.74.0",
91
91
  "copyfiles": "^2.4.1"
92
92
  },
93
93
  "dependencies": {
@@ -96,16 +96,16 @@
96
96
  "@fortawesome/free-regular-svg-icons": "^6.2.1",
97
97
  "@fortawesome/free-solid-svg-icons": "^6.2.1",
98
98
  "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
99
- "@genesislcap/expression-builder": "15.73.0-FUI-2628.4",
100
- "@genesislcap/foundation-ai": "15.73.0-FUI-2628.4",
101
- "@genesislcap/foundation-comms": "15.73.0-FUI-2628.4",
102
- "@genesislcap/foundation-criteria": "15.73.0-FUI-2628.4",
103
- "@genesislcap/foundation-errors": "15.73.0-FUI-2628.4",
104
- "@genesislcap/foundation-events": "15.73.0-FUI-2628.4",
105
- "@genesislcap/foundation-logger": "15.73.0-FUI-2628.4",
106
- "@genesislcap/foundation-notifications": "15.73.0-FUI-2628.4",
107
- "@genesislcap/foundation-user": "15.73.0-FUI-2628.4",
108
- "@genesislcap/foundation-utils": "15.73.0-FUI-2628.4",
99
+ "@genesislcap/expression-builder": "15.74.0",
100
+ "@genesislcap/foundation-ai": "15.74.0",
101
+ "@genesislcap/foundation-comms": "15.74.0",
102
+ "@genesislcap/foundation-criteria": "15.74.0",
103
+ "@genesislcap/foundation-errors": "15.74.0",
104
+ "@genesislcap/foundation-events": "15.74.0",
105
+ "@genesislcap/foundation-logger": "15.74.0",
106
+ "@genesislcap/foundation-notifications": "15.74.0",
107
+ "@genesislcap/foundation-user": "15.74.0",
108
+ "@genesislcap/foundation-utils": "15.74.0",
109
109
  "@microsoft/fast-colors": "5.3.1",
110
110
  "@microsoft/fast-components": "2.30.6",
111
111
  "@microsoft/fast-element": "1.14.0",