@dynatrace/strato-components 1.3.0 → 1.5.1

package/typography/strikethrough/Strikethrough.css

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

package/typography/strikethrough/Strikethrough.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/typography/strikethrough/Strikethrough.sty.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,4 +22,4 @@ __export(Strikethrough_css_exports, {
 });
 module.exports = __toCommonJS(Strikethrough_css_exports);
 var import_Strikethrough_css_ts_vanilla = require("./Strikethrough.css");
-var strikethroughCSS = "_4oao6y0-1-3-0";
+var strikethroughCSS = "_4oao6y0-1-5-1";

package/typography/strong/Strong.css

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

package/typography/strong/Strong.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/typography/strong/Strong.sty.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -21,4 +22,4 @@ __export(Strong_css_exports, {
 });
 module.exports = __toCommonJS(Strong_css_exports);
 var import_Strong_css_ts_vanilla = require("./Strong.css");
-var strongCSS = "_wxp4dd0-1-3-0";
+var strongCSS = "_wxp4dd0-1-5-1";

package/typography/text/Text.css

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

package/typography/text/Text.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;

package/typography/text/Text.sty.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -22,4 +23,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-1-3-0", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-1-3-0", multiLine: "_rup8ap2-1-3-0" } }, defaultVariants: {}, compoundVariants: [] });
+var textCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_rup8ap0-1-5-1", variantClassNames: { ellipsis: { singleLine: "_rup8ap1-1-5-1", multiLine: "_rup8ap2-1-5-1" } }, defaultVariants: {}, compoundVariants: [] });

package/typography/text-ellipsis/TextEllipsis.css

@@ -1,4 +1,4 @@
-._1mnpbqs1-1-3-0 {
+._1mnpbqs1-1-5-1 {
   display: inline-block;
   box-sizing: border-box;
   vertical-align: middle;
@@ -9,15 +9,18 @@
   text-decoration: inherit;
   width: 100%;
 }
-._1mnpbqs2-1-3-0 {
+._1mnpbqs2-1-5-1 {
   text-overflow: ellipsis;
   direction: rtl;
   text-align: left;
 }
-._1mnpbqs3-1-3-0 {
+._1mnpbqs2-1-5-1::after {
+  content: "‎";
+}
+._1mnpbqs3-1-5-1 {
   text-overflow: clip;
 }
-._1mnpbqs3-1-3-0._1mnpbqs0-1-3-0:after {
+._1mnpbqs3-1-5-1._1mnpbqs0-1-5-1:after {
   content: attr(data-sourcetext) / "";
   color: transparent;
   display: table;
@@ -25,6 +28,6 @@
   line-height: 0;
   user-select: none;
 }
-._1mnpbqs4-1-3-0 {
+._1mnpbqs4-1-5-1 {
   text-overflow: ellipsis;
 }

package/typography/text-ellipsis/TextEllipsis.js

@@ -1,3 +1,4 @@
+"use strict";
 var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
@@ -36,7 +37,7 @@ var import_use_resize_observer = __toESM(require("use-resize-observer"));
 var import_useFontsUpdated = require("../../core/hooks/useFontsUpdated.js");
 var import_useMergeRefs = require("../../core/hooks/useMergeRefs.js");
 var import_utils = require("../utils.js");
-var styles = __toESM(require("./TextEllipsis.sty.js"));
+var import_TextEllipsis_css = require("./TextEllipsis.sty.js");
 function getFontProps(innerSpanElement) {
   const computedStyle = window.getComputedStyle(innerSpanElement, null);
   return {
@@ -134,8 +135,8 @@ const ComputedTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props
       "data-testid": dataTestId,
       "data-dtrum-mask": dataDtrumMask,
       "data-dtrum-allow": dataDtrumAllow,
-      className: (0, import_clsx.default)(styles.ellipsis({ truncationMode }), consumerClassName, {
-        [styles.isActive]: ellipsisStateRef.current
+      className: (0, import_clsx.default)((0, import_TextEllipsis_css.ellipsisCSS)({ truncationMode }), consumerClassName, {
+        [import_TextEllipsis_css.isActiveCSS]: ellipsisStateRef.current
       }),
       style: consumerStyle,
       ...remainingProps
@@ -160,7 +161,7 @@ const CssTextEllipsis = /* @__PURE__ */ (0, import_react.forwardRef)((props, for
       "aria-label": children,
       "data-ellipsis": true,
       "data-testid": dataTestId,
-      className: (0, import_clsx.default)(styles.ellipsis({ truncationMode }), consumerClassName),
+      className: (0, import_clsx.default)((0, import_TextEllipsis_css.ellipsisCSS)({ truncationMode }), consumerClassName),
       style: consumerStyle,
       ...remainingProps
     },

package/typography/text-ellipsis/TextEllipsis.sty.d.ts

@@ -1,10 +1,15 @@
-export declare const isActive: string;
-export declare const ellipsis: import("@vanilla-extract/recipes").RuntimeFn<{
+export declare const isActiveCSS: string;
+export declare const ellipsisCSS: import("@vanilla-extract/recipes").RuntimeFn<{
     truncationMode: {
         start: {
             textOverflow: "ellipsis";
             direction: "rtl";
             textAlign: "left";
+            selectors: {
+                '&::after': {
+                    content: "‎";
+                };
+            };
         };
         middle: {
             textOverflow: "clip";

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

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
@@ -17,11 +18,11 @@ var __copyProps = (to, from, except, desc) => {
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 var TextEllipsis_css_exports = {};
 __export(TextEllipsis_css_exports, {
-  ellipsis: () => ellipsis,
-  isActive: () => isActive
+  ellipsisCSS: () => ellipsisCSS,
+  isActiveCSS: () => isActiveCSS
 });
 module.exports = __toCommonJS(TextEllipsis_css_exports);
 var import_TextEllipsis_css_ts_vanilla = require("./TextEllipsis.css");
 var import_createRuntimeFn = require("@vanilla-extract/recipes/createRuntimeFn");
-var ellipsis = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs1-1-3-0", variantClassNames: { truncationMode: { start: "_1mnpbqs2-1-3-0", middle: "_1mnpbqs3-1-3-0", end: "_1mnpbqs4-1-3-0" } }, defaultVariants: {}, compoundVariants: [] });
-var isActive = "_1mnpbqs0-1-3-0";
+var ellipsisCSS = (0, import_createRuntimeFn.createRuntimeFn)({ defaultClassName: "_1mnpbqs1-1-5-1", variantClassNames: { truncationMode: { start: "_1mnpbqs2-1-5-1", middle: "_1mnpbqs3-1-5-1", end: "_1mnpbqs4-1-5-1" } }, defaultVariants: {}, compoundVariants: [] });
+var isActiveCSS = "_1mnpbqs0-1-5-1";

package/typography/utils.js

@@ -1,3 +1,4 @@
+"use strict";
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;