@uipath/apollo-wind 2.60.0 → 2.60.1

package/README.md

@@ -31,6 +31,19 @@ import "@uipath/apollo-wind/fonts/font.css";
 Classic themes keep Tailwind's default `--font-sans` and need no font import.
 Apps that already import `@uipath/apollo-react/core/fonts/font.css` are covered.
 
+**Angular Material hosts:** pages that carry `.mat-typography` inject unlayered
+typography rules, so overlays ship with a Material-scoped shield. Inside such
+hosts the shield outranks plain utilities, so these overrides need the `!`
+modifier (`text-xl!`, `font-bold!`, `mb-4!`):
+
+- on `DialogTitle`, `SheetTitle`, `AlertDialogTitle`, `DrawerTitle` and
+  `AlertTitle`: font family, size, line-height, weight, letter-spacing and margin;
+- on any other `h1` to `h6` inside an overlay: the same set, plus font style;
+- on any `p` inside an overlay: margin.
+
+Spacing between a title and its description should come from the header's
+`gap`, not from margins on the title.
+
 **Option 1: Zero Config** (Recommended for quick starts)
 
 ```tsx

package/dist/components/ui/accordion.cjs

@@ -49,6 +49,7 @@ const AccordionItem = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({
     }));
 AccordionItem.displayName = 'AccordionItem';
 const AccordionTrigger = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_accordion_namespaceObject.Header, {
+        "data-slot": "accordion-header",
         className: "flex",
         children: /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(react_accordion_namespaceObject.Trigger, {
             ref: ref,

package/dist/components/ui/accordion.js

@@ -18,6 +18,7 @@ const AccordionItem = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/
     }));
 AccordionItem.displayName = 'AccordionItem';
 const AccordionTrigger = /*#__PURE__*/ forwardRef(({ className, children, ...props }, ref)=>/*#__PURE__*/ jsx(Header, {
+        "data-slot": "accordion-header",
         className: "flex",
         children: /*#__PURE__*/ jsxs(Trigger, {
             ref: ref,

package/dist/components/ui/dialog.cjs

@@ -158,6 +158,7 @@ const dialog_DialogContent = /*#__PURE__*/ external_react_namespaceObject.forwar
                         className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-4",
                         children: [
                             null != headerTitle ? /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)(react_dialog_namespaceObject.Title, {
+                                "data-slot": "dialog-takeover-title",
                                 className: "min-w-0 flex-1 truncate text-sm font-semibold",
                                 children: headerTitle
                             }) : /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {

package/dist/components/ui/dialog.js

@@ -111,6 +111,7 @@ const dialog_DialogContent = /*#__PURE__*/ forwardRef(function({ className, chil
                         className: "flex h-12 shrink-0 items-center gap-3 border-b border-border-subtle px-4",
                         children: [
                             null != headerTitle ? /*#__PURE__*/ jsx(Title, {
+                                "data-slot": "dialog-takeover-title",
                                 className: "min-w-0 flex-1 truncate text-sm font-semibold",
                                 children: headerTitle
                             }) : /*#__PURE__*/ jsx("div", {

package/dist/components/ui/drawer.cjs

@@ -79,7 +79,7 @@ const DrawerContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({
             /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsxs)(external_vaul_namespaceObject.Drawer.Content, {
                 ref: ref,
                 "data-slot": "drawer-content",
-                className: (0, index_cjs_namespaceObject.cn)('fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background', className),
+                className: (0, index_cjs_namespaceObject.cn)('fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background text-foreground', className),
                 ...props,
                 children: [
                     /*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {

package/dist/components/ui/drawer.js

@@ -42,7 +42,7 @@ const DrawerContent = /*#__PURE__*/ forwardRef(({ className, children, container
             /*#__PURE__*/ jsxs(Drawer.Content, {
                 ref: ref,
                 "data-slot": "drawer-content",
-                className: cn('fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background', className),
+                className: cn('fixed inset-x-0 bottom-0 z-50 mt-24 flex h-auto flex-col rounded-t-[10px] border bg-background text-foreground', className),
                 ...props,
                 children: [
                     /*#__PURE__*/ jsx("div", {

package/dist/components/ui/index.cjs

@@ -27,19 +27,19 @@ var __webpack_modules__ = {
     "@/components/ui/button" (module) {
         module.exports = require("./button.cjs");
     },
-    "./calendar" (module) {
+    "@/components/ui/calendar" (module) {
         module.exports = require("./calendar.cjs");
     },
-    "./card" (module) {
+    "@/components/ui/card" (module) {
         module.exports = require("./card.cjs");
     },
     "./chart" (module) {
         module.exports = require("./chart.cjs");
     },
-    "@/components/ui/checkbox" (module) {
+    "./checkbox" (module) {
         module.exports = require("./checkbox.cjs");
     },
-    "./collapsible" (module) {
+    "@/components/ui/collapsible" (module) {
         module.exports = require("./collapsible.cjs");
     },
     "./combobox" (module) {
@@ -48,7 +48,7 @@ var __webpack_modules__ = {
     "@/components/ui/command" (module) {
         module.exports = require("./command.cjs");
     },
-    "./context-menu" (module) {
+    "@/components/ui/context-menu" (module) {
         module.exports = require("./context-menu.cjs");
     },
     "./data-table" (module) {
@@ -90,7 +90,7 @@ var __webpack_modules__ = {
     "@/components/ui/hover-card" (module) {
         module.exports = require("./hover-card.cjs");
     },
-    "./info-tooltip" (module) {
+    "@/components/ui/info-tooltip" (module) {
         module.exports = require("./info-tooltip.cjs");
     },
     "@/components/ui/input-group" (module) {
@@ -99,10 +99,10 @@ var __webpack_modules__ = {
     "@/components/ui/input" (module) {
         module.exports = require("./input.cjs");
     },
-    "./label" (module) {
+    "@/components/ui/label" (module) {
         module.exports = require("./label.cjs");
     },
-    "./layout" (module) {
+    "@/components/ui/layout" (module) {
         module.exports = require("./layout/index.cjs");
     },
     "./lockable-value-field" (module) {
@@ -180,16 +180,16 @@ var __webpack_modules__ = {
     "./tabs" (module) {
         module.exports = require("./tabs.cjs");
     },
-    "./textarea" (module) {
+    "@/components/ui/textarea" (module) {
         module.exports = require("./textarea.cjs");
     },
     "./toggle-group" (module) {
         module.exports = require("./toggle-group.cjs");
     },
-    "./toggle" (module) {
+    "@/components/ui/toggle" (module) {
         module.exports = require("./toggle.cjs");
     },
-    "./tooltip" (module) {
+    "@/components/ui/tooltip" (module) {
         module.exports = require("./tooltip.cjs");
     },
     "./tree-view" (module) {
@@ -318,7 +318,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_button_group__rspack_import_8[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _calendar__rspack_import_9 = __webpack_require__("./calendar");
+    var _calendar__rspack_import_9 = __webpack_require__("@/components/ui/calendar");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _calendar__rspack_import_9)if ([
         "default",
@@ -326,7 +326,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_calendar__rspack_import_9[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _card__rspack_import_10 = __webpack_require__("./card");
+    var _card__rspack_import_10 = __webpack_require__("@/components/ui/card");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _card__rspack_import_10)if ([
         "default",
@@ -342,7 +342,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_chart__rspack_import_11[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _checkbox__rspack_import_12 = __webpack_require__("@/components/ui/checkbox");
+    var _checkbox__rspack_import_12 = __webpack_require__("./checkbox");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _checkbox__rspack_import_12)if ([
         "default",
@@ -350,7 +350,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_checkbox__rspack_import_12[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _collapsible__rspack_import_13 = __webpack_require__("./collapsible");
+    var _collapsible__rspack_import_13 = __webpack_require__("@/components/ui/collapsible");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _collapsible__rspack_import_13)if ([
         "default",
@@ -374,7 +374,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_command__rspack_import_15[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _context_menu__rspack_import_16 = __webpack_require__("./context-menu");
+    var _context_menu__rspack_import_16 = __webpack_require__("@/components/ui/context-menu");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _context_menu__rspack_import_16)if ([
         "default",
@@ -486,7 +486,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_hover_card__rspack_import_29[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _info_tooltip__rspack_import_30 = __webpack_require__("./info-tooltip");
+    var _info_tooltip__rspack_import_30 = __webpack_require__("@/components/ui/info-tooltip");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _info_tooltip__rspack_import_30)if ([
         "default",
@@ -510,7 +510,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_input_group__rspack_import_32[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _label__rspack_import_33 = __webpack_require__("./label");
+    var _label__rspack_import_33 = __webpack_require__("@/components/ui/label");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _label__rspack_import_33)if ([
         "default",
@@ -518,7 +518,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_label__rspack_import_33[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _layout__rspack_import_34 = __webpack_require__("./layout");
+    var _layout__rspack_import_34 = __webpack_require__("@/components/ui/layout");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _layout__rspack_import_34)if ([
         "default",
@@ -726,7 +726,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_tabs__rspack_import_59[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _textarea__rspack_import_60 = __webpack_require__("./textarea");
+    var _textarea__rspack_import_60 = __webpack_require__("@/components/ui/textarea");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _textarea__rspack_import_60)if ([
         "default",
@@ -734,7 +734,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_textarea__rspack_import_60[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _toggle__rspack_import_61 = __webpack_require__("./toggle");
+    var _toggle__rspack_import_61 = __webpack_require__("@/components/ui/toggle");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _toggle__rspack_import_61)if ([
         "default",
@@ -750,7 +750,7 @@ var __webpack_exports__ = {};
         "TreeView"
     ].indexOf(__rspack_import_key) < 0) __rspack_reexport[__rspack_import_key] = ()=>_toggle_group__rspack_import_62[__rspack_import_key];
     __webpack_require__.d(__webpack_exports__, __rspack_reexport);
-    var _tooltip__rspack_import_63 = __webpack_require__("./tooltip");
+    var _tooltip__rspack_import_63 = __webpack_require__("@/components/ui/tooltip");
     var __rspack_reexport = {};
     for(const __rspack_import_key in _tooltip__rspack_import_63)if ([
         "default",

package/dist/components/ui/sheet.cjs

@@ -72,7 +72,7 @@ const SheetOverlay = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({
         ref: ref
     }));
 SheetOverlay.displayName = react_dialog_namespaceObject.Overlay.displayName;
-const sheetVariants = (0, external_class_variance_authority_namespaceObject.cva)('fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
+const sheetVariants = (0, external_class_variance_authority_namespaceObject.cva)('fixed z-50 gap-4 bg-background p-6 text-foreground shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
     variants: {
         side: {
             top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
@@ -120,7 +120,7 @@ const SheetContent = /*#__PURE__*/ external_react_namespaceObject.forwardRef(({
 SheetContent.displayName = react_dialog_namespaceObject.Content.displayName;
 const SheetHeader = ({ className, ...props })=>/*#__PURE__*/ (0, jsx_runtime_namespaceObject.jsx)("div", {
         "data-slot": "sheet-header",
-        className: (0, index_cjs_namespaceObject.cn)('flex flex-col space-y-2 text-center sm:text-left', className),
+        className: (0, index_cjs_namespaceObject.cn)('flex flex-col gap-2 text-center sm:text-left', className),
         ...props
     });
 SheetHeader.displayName = 'SheetHeader';

package/dist/components/ui/sheet.js

@@ -35,7 +35,7 @@ const SheetOverlay = /*#__PURE__*/ forwardRef(({ className, ...props }, ref)=>/*
         ref: ref
     }));
 SheetOverlay.displayName = Overlay.displayName;
-const sheetVariants = cva('fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
+const sheetVariants = cva('fixed z-50 gap-4 bg-background p-6 text-foreground shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500', {
     variants: {
         side: {
             top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
@@ -83,7 +83,7 @@ const SheetContent = /*#__PURE__*/ forwardRef(({ side = 'right', className, chil
 SheetContent.displayName = Content.displayName;
 const SheetHeader = ({ className, ...props })=>/*#__PURE__*/ jsx("div", {
         "data-slot": "sheet-header",
-        className: cn('flex flex-col space-y-2 text-center sm:text-left', className),
+        className: cn('flex flex-col gap-2 text-center sm:text-left', className),
         ...props
     });
 SheetHeader.displayName = 'SheetHeader';

package/dist/styles.css

@@ -881,6 +881,9 @@
   .mb-4 {
     margin-bottom: calc(var(--spacing) * 4);
   }
+  .mb-4\! {
+    margin-bottom: calc(var(--spacing) * 4) !important;
+  }
   .mb-6 {
     margin-bottom: calc(var(--spacing) * 6);
   }
@@ -3976,6 +3979,10 @@
     font-size: var(--text-xl);
     line-height: var(--tw-leading, var(--text-xl--line-height));
   }
+  .text-xl\! {
+    font-size: var(--text-xl) !important;
+    line-height: var(--tw-leading, var(--text-xl--line-height)) !important;
+  }
   .text-xs {
     font-size: var(--text-xs);
     line-height: var(--tw-leading, var(--text-xs--line-height));
@@ -4063,6 +4070,10 @@
     --tw-font-weight: var(--font-weight-bold);
     font-weight: var(--font-weight-bold);
   }
+  .font-bold\! {
+    --tw-font-weight: var(--font-weight-bold) !important;
+    font-weight: var(--font-weight-bold) !important;
+  }
   .font-light {
     --tw-font-weight: var(--font-weight-light);
     font-weight: var(--font-weight-light);
@@ -10880,6 +10891,48 @@ body.canvas, .canvas {
     background-color: var(--color-border-hover);
   }
 }
+.mat-typography :is( [data-slot="dialog-content"], [data-slot="sheet-content"], [data-slot="alert-dialog-content"], [data-slot="drawer-content"] ) :where(p) {
+  margin: 0;
+}
+.mat-typography :is( [data-slot="dialog-content"], [data-slot="sheet-content"], [data-slot="alert-dialog-content"], [data-slot="drawer-content"] ) :where(h1, h2, h3, h4, h5, h6) {
+  font: inherit;
+  letter-spacing: inherit;
+  margin: 0;
+}
+.mat-typography [data-slot="accordion-header"] {
+  font: inherit;
+  letter-spacing: inherit;
+  margin: 0;
+}
+.mat-typography :is( [data-slot="dialog-title"], [data-slot="sheet-title"], [data-slot="alert-dialog-title"], [data-slot="drawer-title"] ) {
+  font-family: var(--font-sans);
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--text-lg--line-height);
+  letter-spacing: var(--tracking-normal);
+  margin: 0;
+}
+.mat-typography :is([data-slot="dialog-title"], [data-slot="alert-dialog-title"], [data-slot="drawer-title"]) {
+  line-height: 1;
+}
+.mat-typography [data-slot="drawer-title"] {
+  letter-spacing: var(--tracking-tight);
+}
+.mat-typography [data-slot="dialog-takeover-title"] {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--text-sm--line-height);
+  letter-spacing: var(--tracking-normal);
+  margin: 0;
+}
+.mat-typography [data-slot="alert-title"] {
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: calc(var(--spacing) * 4);
+  letter-spacing: var(--tracking-normal);
+  margin: 0;
+}
 @property --tw-translate-x {
   syntax: "*";
   inherits: false;

package/dist/tailwind.css

@@ -925,3 +925,75 @@ body.canvas, .canvas {
     background-color: var(--color-border-hover);
   }
 }
+
+/* Host Material shield: unlayered so it outranks the host's unlayered typography rules. */
+.mat-typography
+  :is(
+    [data-slot="dialog-content"],
+    [data-slot="sheet-content"],
+    [data-slot="alert-dialog-content"],
+    [data-slot="drawer-content"]
+  )
+  :where(p) {
+  margin: 0;
+}
+
+.mat-typography
+  :is(
+    [data-slot="dialog-content"],
+    [data-slot="sheet-content"],
+    [data-slot="alert-dialog-content"],
+    [data-slot="drawer-content"]
+  )
+  :where(h1, h2, h3, h4, h5, h6) {
+  font: inherit;
+  letter-spacing: inherit;
+  margin: 0;
+}
+
+.mat-typography [data-slot="accordion-header"] {
+  font: inherit;
+  letter-spacing: inherit;
+  margin: 0;
+}
+
+.mat-typography
+  :is(
+    [data-slot="dialog-title"],
+    [data-slot="sheet-title"],
+    [data-slot="alert-dialog-title"],
+    [data-slot="drawer-title"]
+  ) {
+  font-family: var(--font-sans);
+  font-size: var(--text-lg);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--text-lg--line-height);
+  letter-spacing: var(--tracking-normal);
+  margin: 0;
+}
+
+.mat-typography
+  :is([data-slot="dialog-title"], [data-slot="alert-dialog-title"], [data-slot="drawer-title"]) {
+  line-height: 1;
+}
+
+.mat-typography [data-slot="drawer-title"] {
+  letter-spacing: var(--tracking-tight);
+}
+
+.mat-typography [data-slot="dialog-takeover-title"] {
+  font-family: var(--font-sans);
+  font-size: var(--text-sm);
+  font-weight: var(--font-weight-semibold);
+  line-height: var(--text-sm--line-height);
+  letter-spacing: var(--tracking-normal);
+  margin: 0;
+}
+
+.mat-typography [data-slot="alert-title"] {
+  font-size: var(--text-xs);
+  font-weight: var(--font-weight-semibold);
+  line-height: calc(var(--spacing) * 4);
+  letter-spacing: var(--tracking-normal);
+  margin: 0;
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@uipath/apollo-wind",
-  "version": "2.60.0",
+  "version": "2.60.1",
   "description": "UiPath wind design system - A Tailwind CSS based React component library",
   "type": "module",
   "main": "./dist/index.js",