@genesislcap/rapid-design-system 14.227.4 → 14.228.1

package/dist/custom-elements.json

@@ -18577,6 +18577,13 @@
             "text": "StoryObj"
           }
         },
+        {
+          "kind": "variable",
+          "name": "OptionsWithCustomStyling",
+          "type": {
+            "text": "StoryObj"
+          }
+        },
         {
           "kind": "variable",
           "name": "AutoPosition",
@@ -18640,6 +18647,14 @@
             "module": "src/multiselect/multiselect.stories.ts"
           }
         },
+        {
+          "kind": "js",
+          "name": "OptionsWithCustomStyling",
+          "declaration": {
+            "name": "OptionsWithCustomStyling",
+            "module": "src/multiselect/multiselect.stories.ts"
+          }
+        },
         {
           "kind": "js",
           "name": "AutoPosition",

package/dist/dts/multiselect/multiselect.stories.d.ts

@@ -4,6 +4,7 @@ export default meta;
 export declare const Primary: StoryObj;
 export declare const Disabled: StoryObj;
 export declare const DisabledOptions: StoryObj;
+export declare const OptionsWithCustomStyling: StoryObj;
 export declare const AutoPosition: StoryObj;
 export declare const Creatable: StoryObj;
 export declare const ContainsSearch: StoryObj;

package/dist/dts/multiselect/multiselect.stories.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"multiselect.stories.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.stories.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAmKpB,eAAO,MAAM,OAAO,EAAE,QAA6C,CAAC;AACpE,eAAO,MAAM,QAAQ,EAAE,QAA0D,CAAC;AAElF,eAAO,MAAM,eAAe,EAAE,QAG5B,CAAC;AAEH,eAAO,MAAM,YAAY,EAAE,QAKzB,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,QAMtB,CAAC;AAEH,eAAO,MAAM,cAAc,EAAE,QAG3B,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,QAoBxB,CAAC"}
+{"version":3,"file":"multiselect.stories.d.ts","sourceRoot":"","sources":["../../../src/multiselect/multiselect.stories.ts"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,2BAA2B,CAAC;AAGhE,QAAA,MAAM,IAAI,EAAE,IAGX,CAAC;AACF,eAAe,IAAI,CAAC;AAiLpB,eAAO,MAAM,OAAO,EAAE,QAA6C,CAAC;AACpE,eAAO,MAAM,QAAQ,EAAE,QAA0D,CAAC;AAElF,eAAO,MAAM,eAAe,EAAE,QAG5B,CAAC;AAEH,eAAO,MAAM,wBAAwB,EAAE,QAQrC,CAAC;AAEH,eAAO,MAAM,YAAY,EAAE,QAKzB,CAAC;AAEH,eAAO,MAAM,SAAS,EAAE,QAMtB,CAAC;AAEH,eAAO,MAAM,cAAc,EAAE,QAG3B,CAAC;AAEH,eAAO,MAAM,UAAU,EAAE,QAoBxB,CAAC"}

package/dist/esm/multiselect/multiselect.stories.js

@@ -126,6 +126,20 @@ const disabledCountriesExample = [
 const makeStory = (args) => ({
     render: ({ name, text, countries, search, disabled, creatable, autoPosition, position, filterByContains, }) => html `
     <div style="min-height: 400px;">
+      <style>
+        rapid-multiselect::part(option-label)::after {
+          background-color: var(--accent-fill-rest);
+          border-radius: calc((var(--control-corner-radius) + 1) * 1px);
+          color: #fff;
+          content: attr(data-option-label-text);
+          font-size: var(--type-ramp-minus-2-font-size);
+          padding: calc((var(--design-unit) - 2) * 1px) calc(var(--design-unit) * 2px);
+          position: absolute;
+          right: 0;
+          transform: translateX(-6px);
+          white-space: nowrap;
+        }
+      </style>
       <rapid-multiselect
         name="${name}"
         .options="${countries}"
@@ -148,6 +162,10 @@ export const DisabledOptions = makeStory({
     text: 'Disabled Options',
     countries: disabledCountriesExample,
 });
+export const OptionsWithCustomStyling = makeStory({
+    text: 'Options with custom styling',
+    countries: disabledCountriesExample.map((opt) => (Object.assign(Object.assign({}, (typeof opt === 'string' ? { value: opt, label: opt } : opt)), { optionLabelText: 'bubble' }))),
+});
 export const AutoPosition = makeStory({
     text: 'Disabled Auto Position',
     countries: disabledCountriesExample,

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@genesislcap/rapid-design-system",
   "description": "Rapid Design System",
-  "version": "14.227.4",
+  "version": "14.228.1",
   "sideEffects": false,
   "license": "SEE LICENSE IN license.txt",
   "main": "dist/esm/index.js",
@@ -37,12 +37,12 @@
   },
   "devDependencies": {
     "@genesiscommunitysuccess/analyzer-import-alias-plugin": "^5.0.3",
-    "@genesislcap/genx": "14.227.4",
-    "@genesislcap/rollup-builder": "14.227.4",
-    "@genesislcap/ts-builder": "14.227.4",
-    "@genesislcap/uvu-playwright-builder": "14.227.4",
-    "@genesislcap/vite-builder": "14.227.4",
-    "@genesislcap/webpack-builder": "14.227.4",
+    "@genesislcap/genx": "14.228.1",
+    "@genesislcap/rollup-builder": "14.228.1",
+    "@genesislcap/ts-builder": "14.228.1",
+    "@genesislcap/uvu-playwright-builder": "14.228.1",
+    "@genesislcap/vite-builder": "14.228.1",
+    "@genesislcap/webpack-builder": "14.228.1",
     "@storybook/addon-coverage": "^1.0.1",
     "@storybook/addon-essentials": "^8.0.0",
     "@storybook/addon-links": "^8.0.0",
@@ -60,9 +60,9 @@
     "storybook": "^8.0.0"
   },
   "dependencies": {
-    "@genesislcap/foundation-logger": "14.227.4",
-    "@genesislcap/foundation-ui": "14.227.4",
-    "@genesislcap/foundation-utils": "14.227.4",
+    "@genesislcap/foundation-logger": "14.228.1",
+    "@genesislcap/foundation-ui": "14.228.1",
+    "@genesislcap/foundation-utils": "14.228.1",
     "@microsoft/fast-colors": "5.3.1",
     "@microsoft/fast-components": "2.30.6",
     "@microsoft/fast-element": "1.14.0",
@@ -80,5 +80,5 @@
     "access": "public"
   },
   "customElements": "dist/custom-elements.json",
-  "gitHead": "8589a5b1f5a9d2b720c3dc2f9ee6217d1abd9313"
+  "gitHead": "de2984f5aaeb838969fddf3df7d4417119bbabf3"
 }