@gnist/design-system 3.9.2 → 3.10.0

package/CHANGELOG.md

@@ -3,6 +3,18 @@
 All notable changes to this project will be documented in this file.
 See [Conventional Commits](https://conventionalcommits.org) for commit guidelines.
 
+## [3.10.0](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.9.3...@gnist/design-system@3.10.0) (2025-09-05)
+
+### Features
+
+* export LozengeColorVariants to consumers ([bd384ca](https://github.com/mollerdigital/design-system-design-system/commit/bd384cacfe737893fe50a30156974eb8d00e15fa))
+
+## [3.9.3](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.9.2...@gnist/design-system@3.9.3) (2025-09-05)
+
+### Bug Fixes
+
+* only assign className from user to wrapping span component for SelectBase ([2642d4e](https://github.com/mollerdigital/design-system-design-system/commit/2642d4e809af491c2ddb50126551d1532e405dd9))
+
 ## [3.9.2](https://github.com/mollerdigital/design-system-design-system/compare/@gnist/design-system@3.9.1...@gnist/design-system@3.9.2) (2025-09-03)
 
 ### Bug Fixes

package/dist/components/feedback/notifications/index.d.ts

@@ -1,2 +1,3 @@
 export { Lozenge } from "./Lozenge.js";
+export type { ColorVariants } from "./lozenge.css.js";
 //# sourceMappingURL=index.d.ts.map

package/dist/components/feedback/notifications/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/notifications/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/notifications/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,cAAc,CAAC;AAEvC,YAAY,EAAE,aAAa,EAAE,MAAM,kBAAkB,CAAC"}

package/dist/components/feedback/notifications/lozenge.css.cjs

@@ -6,11 +6,20 @@ const tokens_css_js = require("@gnist/themes/tokens.css.js");
 const css = require("@vanilla-extract/css");
 const cssUtils = require("@vanilla-extract/css-utils");
 const recipes = require("@vanilla-extract/recipes");
-const getColors = (variant) => atoms_css_js.atoms({
-  backgroundColor: `${variant}-container`,
-  color: `on-${variant}-container`,
-  borderColor: `on-${variant}-container`
-});
+const getColors = (variant) => {
+  if (variant === "neutral") {
+    return atoms_css_js.atoms({
+      backgroundColor: "background",
+      borderColor: "on-background",
+      color: "on-background"
+    });
+  }
+  return atoms_css_js.atoms({
+    backgroundColor: `${variant}-container`,
+    color: `on-${variant}-container`,
+    borderColor: `on-${variant}-container`
+  });
+};
 const largeBody = tokens_css_js.tokens.type.large.body;
 const lozengeRecipe = recipes.recipe({
   base: [
@@ -39,11 +48,7 @@ const lozengeRecipe = recipes.recipe({
       success: getColors("success"),
       warning: getColors("warning"),
       error: getColors("error"),
-      neutral: atoms_css_js.atoms({
-        backgroundColor: "background",
-        borderColor: "on-background",
-        color: "on-background"
-      })
+      neutral: getColors("neutral")
     },
     density: {
       compact: { fontSize: tokens_css_js.tokens.type.small.detail.fontSize },

package/dist/components/feedback/notifications/lozenge.css.d.ts

@@ -1,4 +1,4 @@
-export type ColorVariants = "primary" | "secondary" | "info" | "success" | "warning" | "error";
+export type ColorVariants = "primary" | "secondary" | "info" | "success" | "warning" | "error" | "neutral";
 export declare const lozengeRecipe: import("@vanilla-extract/recipes").RuntimeFn<{
     colorVariant: {
         primary: string;

package/dist/components/feedback/notifications/lozenge.css.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"lozenge.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/notifications/lozenge.css.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,aAAa,GACnB,SAAS,GACT,WAAW,GACX,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,CAAC;AAUd,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;EA0CxB,CAAC"}
+{"version":3,"file":"lozenge.css.d.ts","sourceRoot":"","sources":["../../../../src/components/feedback/notifications/lozenge.css.ts"],"names":[],"mappings":"AAMA,MAAM,MAAM,aAAa,GACnB,SAAS,GACT,WAAW,GACX,MAAM,GACN,SAAS,GACT,SAAS,GACT,OAAO,GACP,SAAS,CAAC;AAmBhB,eAAO,MAAM,aAAa;;;;;;;;;;;;;;;;;;EAsCxB,CAAC"}

package/dist/components/feedback/notifications/lozenge.css.js

@@ -4,11 +4,20 @@ import { tokens } from "@gnist/themes/tokens.css.js";
 import { globalStyle } from "@vanilla-extract/css";
 import { calc } from "@vanilla-extract/css-utils";
 import { recipe } from "@vanilla-extract/recipes";
-const getColors = (variant) => atoms({
-  backgroundColor: `${variant}-container`,
-  color: `on-${variant}-container`,
-  borderColor: `on-${variant}-container`
-});
+const getColors = (variant) => {
+  if (variant === "neutral") {
+    return atoms({
+      backgroundColor: "background",
+      borderColor: "on-background",
+      color: "on-background"
+    });
+  }
+  return atoms({
+    backgroundColor: `${variant}-container`,
+    color: `on-${variant}-container`,
+    borderColor: `on-${variant}-container`
+  });
+};
 const largeBody = tokens.type.large.body;
 const lozengeRecipe = recipe({
   base: [
@@ -37,11 +46,7 @@ const lozengeRecipe = recipe({
       success: getColors("success"),
       warning: getColors("warning"),
       error: getColors("error"),
-      neutral: atoms({
-        backgroundColor: "background",
-        borderColor: "on-background",
-        color: "on-background"
-      })
+      neutral: getColors("neutral")
     },
     density: {
       compact: { fontSize: tokens.type.small.detail.fontSize },

package/dist/components/inputs/dropdowns/SelectBase.cjs

@@ -47,12 +47,12 @@ function SelectBase(props, isMultiple) {
     disabled: props.disabled,
     density: props.density,
     validityType: props.validity?.type
-  }), children: [jsxRuntime.jsx(base.Select, { className: select_css.selectStyle, style: {
+  }), children: [jsxRuntime.jsx(base.Select, { ...commonInputProps, ...selectProps, style: {
     ...dynamic.assignInlineVars({
       [inputFieldConstants_css.preInputWidth]: wrapperProps.preInputWidth,
       [inputFieldConstants_css.postInputWidth]: wrapperProps.postInputWidth
     })
-  }, ...commonInputProps, ...selectProps, ref: props.ref, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
+  }, className: select_css.selectStyle, ref: props.ref, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
     listbox: listBoxComponent,
     popup: popUpComponent
   }, onChange: (e, value) => {

package/dist/components/inputs/dropdowns/SelectBase.js

@@ -43,12 +43,12 @@ function SelectBase(props, isMultiple) {
     disabled: props.disabled,
     density: props.density,
     validityType: props.validity?.type
-  }), children: [jsx(Select, { className: selectStyle, style: {
+  }), children: [jsx(Select, { ...commonInputProps, ...selectProps, style: {
     ...assignInlineVars({
       [preInputWidth]: wrapperProps.preInputWidth,
       [postInputWidth]: wrapperProps.postInputWidth
     })
-  }, ...commonInputProps, ...selectProps, ref: props.ref, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
+  }, className: selectStyle, ref: props.ref, multiple: isMultiple, onListboxOpenChange: (expanded) => setIsExpanded(expanded), slots: {
     listbox: listBoxComponent,
     popup: popUpComponent
   }, onChange: (e, value) => {

package/dist/components/inputs/shared.cjs

@@ -107,7 +107,15 @@ function getSelectInputProps({ label, density, leadingIcon, helperText, ...selec
       leadingIcon,
       helperText
     },
-    selectProps
+    selectProps: {
+      onChange: selectProps.onChange,
+      validity: selectProps.validity,
+      id: selectProps.id,
+      disabled: selectProps.disabled,
+      value: selectProps.value,
+      ref: selectProps.ref,
+      key: selectProps.key
+    }
   };
 }
 exports.getInputFieldProps = getInputFieldProps;

package/dist/components/inputs/shared.d.ts

@@ -135,22 +135,15 @@ export declare function getSelectInputProps<T>({ label, density, leadingIcon, he
         helperText: string | undefined;
     };
     selectProps: {
-        /**
-         * className for the wrapper element, e.g. for used with styled(TextField)
-         */
-        className?: string;
-        /**
-         * onChange prop for setting value to selected options
-         */
         onChange: (value: T) => void;
-        ref?: import("react").Ref<HTMLButtonElement> | undefined;
-        key?: import("react").Key | null | undefined;
-        value?: T | undefined;
-        id?: string;
-        disabled?: boolean;
-        validity?: import("../../index.js").InputFieldValidity<{
+        validity: import("../../index.js").InputFieldValidity<{
             errorMsgRequired: true;
         }> | undefined;
+        id: string | undefined;
+        disabled: boolean | undefined;
+        value: T | undefined;
+        ref: import("react").Ref<HTMLButtonElement> | undefined;
+        key: import("react").Key | null | undefined;
     };
 };
 //# sourceMappingURL=shared.d.ts.map

package/dist/components/inputs/shared.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,yBAAwC;AAE7E,OAAO,EAAE,aAAa,EAAE,WAAW,EAAY,MAAM,OAAO,CAAC;AAC7D,OAAO,EACH,gBAAgB,EAChB,UAAU,EACV,KAAK,EACL,QAAQ,EACX,MAAM,wBAAwB,CAAC;AAchC,wBAAgB,eAAe,CAC3B,IAAI,EAAE,YAAY,GAAG,aAAa,GACnC,IAAI,IAAI,aAAa,CAEvB;AAED,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,MAAM,WAAW,cACb,SAAQ,gBAAgB,CAAC,MAAM,CAAC,EAC5B,QAAQ,EACR,UAAU,EACV,KAAK;IACT;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;IAC3C;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;IAC5C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,oBAAoB,CAAC,IAAI,CACtC,SAAQ,aAAa,CAAC,iBAAiB,CAAC,EACpC,gBAAgB,CAAC,IAAI,CAAC,EACtB,QAAQ,EACR,UAAU,EACV,KAAK;IACT;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,OAAO,EAAE,QAAoB,EAC7B,QAA2B,EAC3B,EAA6B,EAC7B,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,SAAS,GACZ,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwChB;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACnC,KAAK,EACL,OAAO,EAAE,QAAoB,EAC7B,QAA2B,EAC3B,EAA6B,EAC7B,WAAW,EACX,QAAQ,EACR,OAAO,EACP,SAAS,GACZ,EAAE,oBAAoB,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCzB;AAED,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,EAClC,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,WAAW,EACX,YAAY,EACZ,UAAU,EACV,sBAAsB,EACtB,GAAG,UAAU,EAChB,EAAE,CAAC,GAAG,cAAc;;;;;;;;;;;;EAcpB;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACnC,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,GAAG,WAAW,EACjB,EAAE,oBAAoB,CAAC,CAAC,CAAC;;;;;;;;QA7ItB;;WAEG;oBACS,MAAM;QAClB;;WAEG;gCACwB,IAAI;;;;;;;;;;EAgJlC"}
+{"version":3,"file":"shared.d.ts","sourceRoot":"","sources":["../../../src/components/inputs/shared.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,YAAY,EAAE,yBAAwC;AAE7E,OAAO,EAAE,aAAa,EAAE,WAAW,EAAY,MAAM,OAAO,CAAC;AAC7D,OAAO,EACH,gBAAgB,EAChB,UAAU,EACV,KAAK,EACL,QAAQ,EACX,MAAM,wBAAwB,CAAC;AAchC,wBAAgB,eAAe,CAC3B,IAAI,EAAE,YAAY,GAAG,aAAa,GACnC,IAAI,IAAI,aAAa,CAEvB;AAED,MAAM,WAAW,aAAa;IAC1B,IAAI,EAAE,YAAY,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,OAAO,EAAE,MAAM,IAAI,CAAC;CACvB;AACD,MAAM,WAAW,cACb,SAAQ,gBAAgB,CAAC,MAAM,CAAC,EAC5B,QAAQ,EACR,UAAU,EACV,KAAK;IACT;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;IAC3C;;OAEG;IACH,YAAY,CAAC,EAAE,YAAY,GAAG,aAAa,CAAC;IAC5C;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;OAGG;IACH,sBAAsB,CAAC,EAAE,OAAO,CAAC;CACpC;AAED,MAAM,WAAW,oBAAoB,CAAC,IAAI,CACtC,SAAQ,aAAa,CAAC,iBAAiB,CAAC,EACpC,gBAAgB,CAAC,IAAI,CAAC,EACtB,QAAQ,EACR,UAAU,EACV,KAAK;IACT;;;OAGG;IACH,OAAO,CAAC,EAAE,YAAY,CAAC;IACvB;;OAEG;IACH,WAAW,CAAC,EAAE,YAAY,CAAC;IAC3B;;OAEG;IACH,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;OAEG;IACH,QAAQ,EAAE,CAAC,KAAK,EAAE,IAAI,KAAK,IAAI,CAAC;CACnC;AAED,wBAAgB,kBAAkB,CAAC,EAC/B,KAAK,EACL,OAAO,EAAE,QAAoB,EAC7B,QAA2B,EAC3B,EAA6B,EAC7B,WAAW,EACX,YAAY,EACZ,QAAQ,EACR,OAAO,EACP,SAAS,GACZ,EAAE,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;EAwChB;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACnC,KAAK,EACL,OAAO,EAAE,QAAoB,EAC7B,QAA2B,EAC3B,EAA6B,EAC7B,WAAW,EACX,QAAQ,EACR,OAAO,EACP,SAAS,GACZ,EAAE,oBAAoB,CAAC,CAAC,CAAC;;;;;;;;;;;;;;;;;;;;;;;;;;EAoCzB;AAED,wBAAgB,kBAAkB,CAAC,CAAC,EAAE,EAClC,KAAK,EACL,OAAO,EACP,MAAM,EACN,MAAM,EACN,WAAW,EACX,YAAY,EACZ,UAAU,EACV,sBAAsB,EACtB,GAAG,UAAU,EAChB,EAAE,CAAC,GAAG,cAAc;;;;;;;;;;;;EAcpB;AAED,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,EACnC,KAAK,EACL,OAAO,EACP,WAAW,EACX,UAAU,EACV,GAAG,WAAW,EACjB,EAAE,oBAAoB,CAAC,CAAC,CAAC;;;;;;;;gCAtIK,IAAI;;;;;;;;;;EAwJlC"}

package/dist/components/inputs/shared.js

@@ -105,7 +105,15 @@ function getSelectInputProps({ label, density, leadingIcon, helperText, ...selec
       leadingIcon,
       helperText
     },
-    selectProps
+    selectProps: {
+      onChange: selectProps.onChange,
+      validity: selectProps.validity,
+      id: selectProps.id,
+      disabled: selectProps.disabled,
+      value: selectProps.value,
+      ref: selectProps.ref,
+      key: selectProps.key
+    }
   };
 }
 export {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@gnist/design-system",
-  "version": "3.9.2",
+  "version": "3.10.0",
   "license": "UNLICENSED",
   "type": "module",
   "main": "dist/index.cjs",
@@ -102,5 +102,5 @@
       "optional": true
     }
   },
-  "gitHead": "4af19b3d032a1c21e560a7ea90dbffcd1e1db250"
+  "gitHead": "f9dc0e36c17acc63190ff14f0e2f7dba96084c9e"
 }