@vodafone_de/brix-components 9.0.0 → 9.0.1

package/dist/components/Body/props.d.ts

@@ -8,7 +8,7 @@ export type BodyTags = typeof pTagName | typeof divTagName | typeof spanTagName
 export declare const bodyAlignLeft = "left";
 export declare const bodyAlignCenter = "center";
 export declare const bodyAlignRight = "right";
-type BodyAlign = typeof bodyAlignLeft | typeof bodyAlignCenter | typeof bodyAlignRight;
+export type BodyAlign = typeof bodyAlignLeft | typeof bodyAlignCenter | typeof bodyAlignRight;
 export interface BodyProps extends PatternProps, HTMLAttributes<HTMLParagraphElement> {
     /**
      * body text tshirt size can be medium or small
@@ -37,4 +37,3 @@ export interface BodyProps extends PatternProps, HTMLAttributes<HTMLParagraphEle
     /** Pin component's name from string to the concrete name */
     component?: 'Body';
 }
-export {};

package/dist/components/Grid/index.js

@@ -1,12 +1,12 @@
 "use client";
 import { jsx } from "react/jsx-runtime";
 import { createContext } from "react";
-import { d as divTagName, u as ulTagName, o as olTagName } from "../../tags-D7CRQqc1.js";
+import { d as divTagName, u as ulTagName, o as olTagName, n as navTagName, m as mainTagName, s as sectionTagName, a as asideTagName, b as articleTagName } from "../../tags-D7CRQqc1.js";
 import { s as spacingMd } from "../../Spacing-8v6hcO2x.js";
 import { G as GridStyled } from "../../styled-BiCOjvNq.js";
 import { i as isObject, h as hasMatchingComponentName } from "../../isObject-BYBrvoVW.js";
 import { i as isBottomSpacing } from "../../isBottomSpacing-BxfreCZU.js";
-const gridTags = [divTagName, ulTagName, olTagName];
+const gridTags = [divTagName, ulTagName, olTagName, navTagName, mainTagName, sectionTagName, asideTagName, articleTagName];
 const gridAligns = ["left", "center", "right"];
 const gridSpacings = ["None", "Md"];
 const gridColSpan = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];

package/dist/components/Grid/validate.d.ts

@@ -1,5 +1,5 @@
 import { GridConfig, GridProps } from './props';
-export declare const gridTags: readonly ["div", "ul", "ol"];
+export declare const gridTags: readonly [string, string, string, string, string, string, string, string];
 export declare const gridAligns: readonly ["left", "center", "right"];
 export declare const gridSpacings: readonly ["None", "Md"];
 export declare const validateGridColSpan: (colSpan: unknown) => boolean;

package/dist/components/HifiIcon/props.d.ts

@@ -1,7 +1,6 @@
 import { ImgHTMLAttributes } from 'react';
-import { iconSize6xl, iconSize7xl, iconSize8xl, iconSize9xl } from '../Icon';
-import { iconSize5xl } from '../InlineIcon';
 import { PatternProps } from '../../foundations/PatternProps';
+import { iconSize5xl, iconSize6xl, iconSize7xl, iconSize8xl, iconSize9xl } from '../../foundations/types/IconSize';
 export type HifiIconSize = typeof iconSize5xl | typeof iconSize6xl | typeof iconSize7xl | typeof iconSize8xl | typeof iconSize9xl;
 export interface HifiIconProps extends PatternProps, ImgHTMLAttributes<HTMLImageElement> {
     /**

package/dist/components/InlineIcon/validate.d.ts

@@ -1,4 +1,4 @@
 import { InlineIconProps } from './props';
-export declare const iconSizes: readonly [any, any, any, any, any, any, any, any, any, any];
+export declare const iconSizes: readonly ["iconSize2xs", "iconSizeXs", "iconSizeSm", "iconSizeMd", "iconSizeLg", "iconSizeXl", "iconSize2xl", "iconSize3xl", "iconSize4xl", "iconSize5xl"];
 export declare const coloringModes: readonly ["fill", "stroke"];
 export declare const validateInlineIconProps: (props: unknown) => props is InlineIconProps;

package/dist/components/Rating/index.js

@@ -6,6 +6,7 @@ import styled from "styled-components";
 import viewport from "../../foundations/media-query/viewport/index.js";
 import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
 import { s as screenreaderOnly } from "../../index-CfIoFAvq.js";
+import { getBackgroundColor } from "../../foundations/token/getBackgroundColor/index.js";
 import { getBorderColor } from "../../foundations/token/getBorderColor/index.js";
 import { getBorderWidth } from "../../foundations/token/getBorderWidth/index.js";
 import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index.js";
@@ -45,7 +46,7 @@ const RatingFieldsetStyled = styled.fieldset.withConfig({
   getBottomSpacing
 );
 const getSvgPathStyles = (props) => ({
-  fill: props.selected ? getObjectColor(colorObjectSelected) : props.isInHoverRange ? getHoverColor(colorBackgroundNeutral) : "transparent",
+  fill: props.selected ? getObjectColor(colorObjectSelected) : props.isInHoverRange ? getHoverColor(colorBackgroundNeutral) : getBackgroundColor(colorBackgroundNeutral),
   strokeWidth: "1px",
   stroke: props.selected ? getBorderColor(colorBorderSelected) : props.isInHoverRange ? getBorderColor(colorBorderNeutral) : getBorderColor(colorBorderUnselected)
 });

package/dist/components/SelectInput/props.d.ts

@@ -1,4 +1,4 @@
-import { SelectHTMLAttributes, OptionHTMLAttributes } from 'react';
+import { OptionHTMLAttributes, SelectHTMLAttributes } from 'react';
 import { InputSharedProps, InputStatus } from '../Input/props';
 export interface SelectInputOptionProps extends OptionHTMLAttributes<HTMLOptionElement> {
     /**

package/dist/components/SuggestInput/index.js

@@ -365,7 +365,7 @@ const SuggestInput = forwardRef(({
       /* @__PURE__ */ jsx(InputStyled, { ...inputProps, ref: inputRef, onChange: (e) => handleChange(e.target.value), onClick: () => {
         if (disabled) return;
         setShowList(true);
-      }, role: "combobox", value: (_a = listItems == null ? void 0 : listItems.find((listItem) => listItem.value === value)) == null ? void 0 : _a.label, ...{
+      }, role: "combobox", value: ((_a = listItems == null ? void 0 : listItems.find((listItem) => listItem.value === value)) == null ? void 0 : _a.label) || value, ...{
         "aria-expanded": showList,
         "aria-controls": "listbox",
         "aria-activedescendant": selectedOption > -1 ? `${uid}-item-${selectedOption}` : void 0,

package/dist/components/Textarea/index.js

@@ -17,10 +17,11 @@ import { getBottomSpacing } from "../../foundations/token/getBottomSpacing/index
 import { getHeadingSize } from "../../foundations/token/getHeadingSize/index.js";
 import { getSpacing } from "../../foundations/token/getSpacing/index.js";
 import { getTextColor } from "../../foundations/token/getTextColor/index.js";
-import { a as colorBackgroundSubtle } from "../../BackgroundColor-e0N9tdDR.js";
+import { c as colorBackgroundNeutral, a as colorBackgroundSubtle } from "../../BackgroundColor-e0N9tdDR.js";
 import { a as colorBorderNeutral, c as colorBorderFocus, b as colorBorderUnselected, d as colorBorderSuccess, e as colorBorderCritical } from "../../BorderColor-BummoQ1-.js";
 import { b as borderRadiusMd } from "../../BorderRadius-ClUShVLu.js";
 import { t as textHeadingXs } from "../../HeadingSize-CfCRn3Lh.js";
+import { i as iconSizeSm } from "../../IconSize-AJp7xdJi.js";
 import { c as colorTextPlaceholder, a as colorTextNeutral } from "../../TextColor-BXVMXUVE.js";
 import { a as filterProps } from "../../filterProps-BJ5SpbnA.js";
 import { g as getCssVar } from "../../getCssVar-BP6T9pFM.js";
@@ -48,7 +49,7 @@ const TextareaStyled = styled.textarea.withConfig({
   border: "none",
   fontFamily: getCssVar("font-family"),
   color: getTextColor(colorTextNeutral),
-  backgroundColor: "transparent",
+  backgroundColor: getBackgroundColor(colorBackgroundNeutral),
   minHeight: `calc((${getHeadingSize(textHeadingXs).fontSize} * ${getHeadingSize(textHeadingXs).lineHeight}) + (2 * ${getSpacing(spacingSm)}))`,
   "&:placeholder-shown": {
     color: getTextColor(colorTextPlaceholder)
@@ -56,6 +57,9 @@ const TextareaStyled = styled.textarea.withConfig({
 }, ({
   status
 }) => {
+  const paddingMinusBorder = `calc(${getSpacing(spacingSm)} - 1px)`;
+  const paddingWhenStatus = `${paddingMinusBorder}
+            calc(${paddingMinusBorder} + ${getCssVar(iconSizeSm)} + ${getSpacing(spacingSm)}) ${paddingMinusBorder} ${paddingMinusBorder}`;
   if (!status) {
     return {
       border: `1px solid ${getBorderColor(colorBorderUnselected)}`,
@@ -72,7 +76,7 @@ const TextareaStyled = styled.textarea.withConfig({
   if ("success" === status) {
     return {
       border: `2px solid ${getBorderColor(colorBorderSuccess)}`,
-      padding: `calc(${getSpacing(spacingSm)} - 1px)`,
+      padding: paddingWhenStatus,
       "&:focus-visible": {
         ...forcedColors({
           outline: "4px solid CanvasText"
@@ -85,7 +89,7 @@ const TextareaStyled = styled.textarea.withConfig({
   if ("error" === status) {
     return {
       border: `2px solid ${getBorderColor(colorBorderCritical)}`,
-      padding: `calc(${getSpacing(spacingSm)} - 1px)`,
+      padding: paddingWhenStatus,
       "&:focus-visible": {
         ...forcedColors({
           outline: "4px solid CanvasText"

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@vodafone_de/brix-components",
   "description": "Brix is the digital design system for vodafone.de",
-  "version": "9.0.0",
+  "version": "9.0.1",
   "exports": {
     "./package.json": "./package.json",
     ".": {