@neovici/cosmoz-tokens 3.1.1 → 3.2.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@neovici/cosmoz-tokens",
-  "version": "3.1.1",
+  "version": "3.2.0",
   "description": "Design tokens for Cosmoz web components based on Untitled UI",
   "keywords": [
     "design-tokens",
@@ -34,6 +34,10 @@
     "./skeumorphic": {
       "types": "./src/skeumorphic.css.d.ts",
       "default": "./src/skeumorphic.css.js"
+    },
+    "./truncate": {
+      "types": "./src/truncate.css.d.ts",
+      "default": "./src/truncate.css.js"
     }
   },
   "files": [

package/src/truncate.css.d.ts

@@ -0,0 +1,16 @@
+/**
+ * Truncate text with ellipsis.
+ * Prevents text from wrapping and adds an ellipsis (...) when text overflows.
+ *
+ * Equivalent to Tailwind's `truncate` utility.
+ *
+ * @example
+ * import { truncate } from '@neovici/cosmoz-tokens/truncate';
+ *
+ * export const styles = css`
+ *   .label {
+ *     ${truncate}
+ *   }
+ * `;
+ */
+export const truncate: string;

package/src/truncate.css.js

@@ -0,0 +1,22 @@
+import { css } from '@pionjs/pion';
+
+/**
+ * Truncate text with ellipsis.
+ * Prevents text from wrapping and adds an ellipsis (...) when text overflows.
+ *
+ * Equivalent to Tailwind's `truncate` utility.
+ *
+ * @example
+ * import { truncate } from '@neovici/cosmoz-tokens/truncate';
+ *
+ * export const styles = css`
+ *   .label {
+ *     ${truncate}
+ *   }
+ * `;
+ */
+export const truncate = css`
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+`;