@dynatrace/strato-components 0.85.60 → 0.85.100

package/typography/highlight/Highlight.sty.js

@@ -21,4 +21,4 @@ __export(Highlight_css_exports, {
 });
 module.exports = __toCommonJS(Highlight_css_exports);
 var import_Highlight_css_ts_vanilla = require("./Highlight.css");
-var highlightCSS = "lajjl30";
+var highlightCSS = "_lajjl30-0-85-100";

package/typography/link/Link.css

@@ -1,15 +1,15 @@
-._1iksxp40 {
-  display: inline-block;
+._1iksxp40-0-85-100 {
+  display: inline;
   color: var(--dt-colors-text-primary-default, #454cc9);
   text-decoration: underline;
   overflow-wrap: anywhere;
 }
-._1iksxp40:hover {
+._1iksxp40-0-85-100:hover {
   color: var(--dt-colors-text-primary-default-hover, #3332ae);
 }
-._1iksxp40:active {
+._1iksxp40-0-85-100:active {
   color: var(--dt-colors-text-primary-default-active, #241193);
 }
-._1iksxp40:focus-visible {
+._1iksxp40-0-85-100:focus-visible {
   text-decoration: none;
 }

package/typography/link/Link.d.ts

@@ -7,8 +7,8 @@ import type { MaskingProps } from '../../core/types/masking-props.js';
  */
 export type LinkProps<E extends ElementType> = PolymorphicComponentProps<E, WithChildren & StylingProps & DataTestId & MaskingProps>;
 /**
- * Use the `Link` component to navigate to a different page within the application.
- * For external resources in a different domain, use the
+ * Use the `Link` component to link to any internal resources.
+ * For external resources (i.e., outside the current environment), use the
  * {@link https://developer.dynatrace.com/design/components/typography/ExternalLink/ | `ExternalLink`}
  * component instead.
  * @public

package/typography/link/Link.sty.js

@@ -21,4 +21,4 @@ __export(Link_css_exports, {
 });
 module.exports = __toCommonJS(Link_css_exports);
 var import_Link_css_ts_vanilla = require("./Link.css");
-var linkCSS = "_1iksxp40";
+var linkCSS = "_1iksxp40-0-85-100";

package/typography/list/List.css

@@ -1,16 +1,16 @@
-._16276mt0 {
+._16276mt0-0-85-100 {
   margin: 0;
   padding-left: var(--dt-spacings-size-40, 40px);
 }
-._16276mt0 ._16276mt0 {
+._16276mt0-0-85-100 ._16276mt0-0-85-100 {
   margin-block: var(--dt-spacings-size-4, 4px);
   padding-left: var(--dt-spacings-size-28, 28px);
 }
-._16276mt1 {
+._16276mt1-0-85-100 {
   position: relative;
   overflow-wrap: break-word;
   margin-block: var(--dt-spacings-size-2, 2px);
 }
-._16276mt1::marker {
+._16276mt1-0-85-100::marker {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
 }

package/typography/list/List.sty.js

@@ -22,5 +22,5 @@ __export(List_css_exports, {
 });
 module.exports = __toCommonJS(List_css_exports);
 var import_List_css_ts_vanilla = require("./List.css");
-var listCSS = "_16276mt0";
-var listItemCSS = "_16276mt1";
+var listCSS = "_16276mt0-0-85-100";
+var listItemCSS = "_16276mt1-0-85-100";

package/typography/paragraph/Paragraph.css

@@ -1,17 +1,17 @@
-._487p2n0 {
+._487p2n0-0-85-100 {
   margin-top: 0;
   margin-bottom: 0;
   overflow-wrap: break-word;
   color: inherit;
   font-style: normal;
 }
-._487p2n1 {
+._487p2n1-0-85-100 {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-._487p2n2 {
+._487p2n2-0-85-100 {
   display: -webkit-box;
   -webkit-line-clamp: var(--strato-ellipsis-line-clamp);
   -webkit-box-orient: vertical;

package/typography/paragraph/Paragraph.sty.js

@@ -22,4 +22,4 @@ __export(Paragraph_css_exports, {
 module.exports = __toCommonJS(Paragraph_css_exports);
 var import_Paragraph_css_ts_vanilla = require("./Paragraph.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var paragraphCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_487p2n0", variantClassNames: { ellipsis: { singleLine: "_487p2n1", multiLine: "_487p2n2" } }, defaultVariants: {}, compoundVariants: [] });
+var paragraphCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_487p2n0-0-85-100", variantClassNames: { ellipsis: { singleLine: "_487p2n1-0-85-100", multiLine: "_487p2n2-0-85-100" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/strikethrough/Strikethrough.css

@@ -1,4 +1,4 @@
-._4oao6y0 {
+._4oao6y0-0-85-100 {
   text-decoration: line-through;
   text-decoration-style: solid;
   overflow-wrap: break-word;

package/typography/strikethrough/Strikethrough.sty.js

@@ -21,4 +21,4 @@ __export(Strikethrough_css_exports, {
 });
 module.exports = __toCommonJS(Strikethrough_css_exports);
 var import_Strikethrough_css_ts_vanilla = require("./Strikethrough.css");
-var strikethroughCSS = "_4oao6y0";
+var strikethroughCSS = "_4oao6y0-0-85-100";

package/typography/strong/Strong.css

@@ -1,4 +1,4 @@
-.wxp4dd0 {
+._wxp4dd0-0-85-100 {
   font-weight: var(--dt-typography-text-base-emphasized-weight, 500);
   overflow-wrap: break-word;
 }

package/typography/strong/Strong.sty.js

@@ -21,4 +21,4 @@ __export(Strong_css_exports, {
 });
 module.exports = __toCommonJS(Strong_css_exports);
 var import_Strong_css_ts_vanilla = require("./Strong.css");
-var strongCSS = "wxp4dd0";
+var strongCSS = "_wxp4dd0-0-85-100";

package/typography/text/Text.css

@@ -1,16 +1,16 @@
-.rup8ap0 {
+._rup8ap0-0-85-100 {
   margin-top: 0;
   margin-bottom: 0;
   min-width: 0;
   overflow-wrap: break-word;
 }
-.rup8ap1 {
+._rup8ap1-0-85-100 {
   display: block;
   white-space: nowrap;
   text-overflow: ellipsis;
   overflow: hidden;
 }
-.rup8ap2 {
+._rup8ap2-0-85-100 {
   display: -webkit-box;
   -webkit-line-clamp: var(--strato-ellipsis-line-clamp);
   -webkit-box-orient: vertical;

package/typography/text/Text.sty.js

@@ -22,4 +22,4 @@ __export(Text_css_exports, {
 module.exports = __toCommonJS(Text_css_exports);
 var import_Text_css_ts_vanilla = require("./Text.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var textCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "rup8ap0", variantClassNames: { ellipsis: { singleLine: "rup8ap1", multiLine: "rup8ap2" } }, defaultVariants: {}, compoundVariants: [] });
+var textCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_rup8ap0-0-85-100", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-0-85-100", multiLine: "_rup8ap2-0-85-100" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/text-ellipsis/TextEllipsis.css

@@ -1,4 +1,4 @@
-._1mnpbqs0 {
+._1mnpbqs0-0-85-100 {
   display: inline-block;
   box-sizing: border-box;
   vertical-align: middle;
@@ -9,14 +9,14 @@
   text-decoration: inherit;
   width: 100%;
 }
-._1mnpbqs1 {
+._1mnpbqs1-0-85-100 {
   text-overflow: ellipsis;
   direction: rtl;
   text-align: left;
 }
-._1mnpbqs2 {
+._1mnpbqs2-0-85-100 {
   text-overflow: clip;
 }
-._1mnpbqs3 {
+._1mnpbqs3-0-85-100 {
   text-overflow: ellipsis;
 }

package/typography/text-ellipsis/TextEllipsis.js

@@ -47,7 +47,11 @@ function getFontProps(textWrapper) {
   };
 }
 function isNativeEllipsisActive(textWrapper, containerWidth) {
-  const textWidth = Math.floor(textWrapper.getBoundingClientRect().width * 100) / 100;
+  const originalTextWidth = Math.max(
+    textWrapper.getBoundingClientRect().width,
+    textWrapper.scrollWidth
+  );
+  const textWidth = Math.floor(originalTextWidth * 100) / 100;
   return textWidth > containerWidth;
 }
 function renderEllipsizedText(originalText, truncationMode, containerRef, wasEllipsized, onTextOverflow) {
@@ -162,6 +166,14 @@ const CssTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
 });
 const TextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, forwardedRef) => {
   const cssOnlyEllipsis = !props.onTextOverflow && props.truncationMode !== "middle";
-  return cssOnlyEllipsis ? /* @__PURE__ */ import_react.default.createElement(CssTextEllipsis, { ref: forwardedRef, ...props }) : /* @__PURE__ */ import_react.default.createElement(ComputedTextEllipsis, { ref: forwardedRef, ...props });
+  return cssOnlyEllipsis ? (
+    /* eslint-disable-next-line deprecated-jsx-props/deprecated-props -- The plugin can not properly analyze spread props:
+    https://github.com/sebakerckhof/eslint-plugin-deprecated-jsx-props?tab=readme-ov-file#configuration, the deprecations here are in the HTMLAttributes type, which is fine. */
+    /* @__PURE__ */ import_react.default.createElement(CssTextEllipsis, { ref: forwardedRef, ...props })
+  ) : (
+    /* eslint-disable-next-line deprecated-jsx-props/deprecated-props -- The plugin can not properly analyze spread props:
+    https://github.com/sebakerckhof/eslint-plugin-deprecated-jsx-props?tab=readme-ov-file#configuration, the deprecations here are in the HTMLAttributes type, which is fine. */
+    /* @__PURE__ */ import_react.default.createElement(ComputedTextEllipsis, { ref: forwardedRef, ...props })
+  );
 });
 TextEllipsis.displayName = "TextEllipsis";

package/typography/text-ellipsis/TextEllipsis.sty.js

@@ -22,4 +22,4 @@ __export(TextEllipsis_css_exports, {
 module.exports = __toCommonJS(TextEllipsis_css_exports);
 var import_TextEllipsis_css_ts_vanilla = require("./TextEllipsis.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var textEllipsisCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs0", variantClassNames: { truncationMode: { start: "_1mnpbqs1", middle: "_1mnpbqs2", end: "_1mnpbqs3" } }, defaultVariants: {}, compoundVariants: [] });
+var textEllipsisCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs0-0-85-100", variantClassNames: { truncationMode: { start: "_1mnpbqs1-0-85-100", middle: "_1mnpbqs2-0-85-100", end: "_1mnpbqs3-0-85-100" } }, defaultVariants: {}, compoundVariants: [] });

package/content/progress/utils.d.ts

@@ -1,2 +0,0 @@
-import { RoleVariantType } from '../../core/types/role-variant.js';
-export declare function getFillColorFromVariant($variant: RoleVariantType): string;

package/content/progress/utils.js

@@ -1,50 +0,0 @@
-var __create = Object.create;
-var __defProp = Object.defineProperty;
-var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
-var __getOwnPropNames = Object.getOwnPropertyNames;
-var __getProtoOf = Object.getPrototypeOf;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __export = (target, all) => {
-  for (var name in all)
-    __defProp(target, name, { get: all[name], enumerable: true });
-};
-var __copyProps = (to, from, except, desc) => {
-  if (from && typeof from === "object" || typeof from === "function") {
-    for (let key of __getOwnPropNames(from))
-      if (!__hasOwnProp.call(to, key) && key !== except)
-        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
-  }
-  return to;
-};
-var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
-  // If the importer is in node compatibility mode or this is not an ESM
-  // file that has been converted to a CommonJS file using a Babel-
-  // compatible transform (i.e. "__esModule" has not been set), then set
-  // "default" to the CommonJS "module.exports" for node compatibility.
-  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
-  mod
-));
-var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
-var utils_exports = {};
-__export(utils_exports, {
-  getFillColorFromVariant: () => getFillColorFromVariant
-});
-module.exports = __toCommonJS(utils_exports);
-var import_colors = __toESM(require("@dynatrace/strato-design-tokens/colors"));
-function getFillColorFromVariant($variant) {
-  switch ($variant) {
-    case "onAccent":
-      return import_colors.default.Border.OnAccent.Default;
-    case "primary":
-      return import_colors.default.Border.Primary.Accent;
-    case "success":
-      return import_colors.default.Border.Success.Accent;
-    case "warning":
-      return import_colors.default.Border.Warning.Accent;
-    case "critical":
-      return import_colors.default.Border.Critical.Accent;
-    case "neutral":
-    default:
-      return import_colors.default.Border.Neutral.Accent;
-  }
-}

package/esm/content/progress/utils.js

@@ -1,22 +0,0 @@
-import Colors from "@dynatrace/strato-design-tokens/colors";
-function getFillColorFromVariant($variant) {
-  switch ($variant) {
-    case "onAccent":
-      return Colors.Border.OnAccent.Default;
-    case "primary":
-      return Colors.Border.Primary.Accent;
-    case "success":
-      return Colors.Border.Success.Accent;
-    case "warning":
-      return Colors.Border.Warning.Accent;
-    case "critical":
-      return Colors.Border.Critical.Accent;
-    case "neutral":
-    default:
-      return Colors.Border.Neutral.Accent;
-  }
-}
-export {
-  getFillColorFromVariant
-};
-//# sourceMappingURL=utils.js.map

package/esm/content/progress/utils.js.map

@@ -1,7 +0,0 @@
-{
-  "version": 3,
-  "sources": ["../../../../src/content/progress/utils.ts"],
-  "sourcesContent": ["import Colors from '@dynatrace/strato-design-tokens/colors';\n\nimport { RoleVariantType } from '../../core/types/role-variant.js';\n\nexport function getFillColorFromVariant($variant: RoleVariantType) {\n  switch ($variant) {\n    case 'onAccent':\n      return Colors.Border.OnAccent.Default;\n    case 'primary':\n      return Colors.Border.Primary.Accent;\n    case 'success':\n      return Colors.Border.Success.Accent;\n    case 'warning':\n      return Colors.Border.Warning.Accent;\n    case 'critical':\n      return Colors.Border.Critical.Accent;\n    case 'neutral':\n    default:\n      return Colors.Border.Neutral.Accent;\n  }\n}\n"],
-  "mappings": "AAAA,OAAO,YAAY;AAIZ,SAAS,wBAAwB,UAA2B;AACjE,UAAQ,UAAU;AAAA,IAChB,KAAK;AACH,aAAO,OAAO,OAAO,SAAS;AAAA,IAChC,KAAK;AACH,aAAO,OAAO,OAAO,QAAQ;AAAA,IAC/B,KAAK;AACH,aAAO,OAAO,OAAO,QAAQ;AAAA,IAC/B,KAAK;AACH,aAAO,OAAO,OAAO,QAAQ;AAAA,IAC/B,KAAK;AACH,aAAO,OAAO,OAAO,SAAS;AAAA,IAChC,KAAK;AAAA,IACL;AACE,aAAO,OAAO,OAAO,QAAQ;AAAA,EACjC;AACF;",
-  "names": []
-}