@geotab/zenith 3.10.0-beta.7 → 3.11.0-beta.0

package/dist/commonStyles/typography/typography.less

@@ -1,3 +1,562 @@
+// temporary adding these here to avoid a break on current code, will be removed in the future
+@import "../fonts/roboto.less";
+@import "../fonts/robotomono.less";
+@import "../fonts/notosarabic.less";
+@main-font-family: Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+@arabic-font-family: "Noto Sans Arabic", Roboto, "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+@driver-font-family: "Roboto Mono", "Segoe UI", Segoe, "Helvetica Neue", Helvetica, sans-serif;
+@rem: 16rem;
+
+//**********//
+// Standard //
+//**********//
+
+//body-label
+//label-01
+//body-04
+//body-s-400
+@base-font-size: 12;
+@base-line-height: 16;
+@base-letter-spacing: 0.32;
+@base-font-weight: 400;
+@base-font-style: normal;
+
+//body-01,
+//body-l-400
+@body-font-size: 16;
+@body-line-height: 24;
+@body-letter-spacing: 0;
+
+//body-02-short,
+//body-m-400-short
+@body-short-font-size: 14;
+
+//body-02-tall,
+//body-m-400-tall
+@body-tall-font-size: 14;
+@body-tall-line-height: 28;
+
+//body-03,
+//body-s-700
+@body-03-weight: 700;
+
+//body-05,
+//body-s-400-italic
+@body-05-style: italic;
+
+//heading-01
+//heading-xl-300
+@heading-01-font-size: 28;
+@heading-01-font-mobile-size: 20;
+@heading-01-line-height: 36;
+@heading-01-weight: 300;
+
+//heading-02
+//heading-l-400
+@heading-02-font-size: 20;
+@heading-02-line-height: 24;
+
+//heading-03
+//heading-m-300
+@heading-03-font-size: 20;
+@heading-03-font-mobile-size: 18;
+@heading-03-line-height: 28;
+
+//heading-04
+//heading-s-500
+@heading-04-font-size: 16;
+@heading-04-line-height: 24;
+@heading-04-weight: 500;
+
+//heading-05
+//heading-xs-500
+@heading-05-font-size: 14;
+@heading-05-letter-spacing: 0.16;
+@heading-05-weight: 500;
+
+//heading-06
+@heading-06-letter-spacing: 0;
+@heading-06-text-transformI: uppercase;
+
+//data-01
+//data-xxl
+@data-01-font-size: 32;
+@data-01-line-height: 40;
+
+//data-02
+//data-xl
+@data-02-font-size: 24;
+@data-02-line-height: 32;
+
+//data-03
+//data-l
+@data-03-font-size: 20;
+@data-03-line-height: 24;
+
+//data-04
+//data-m
+@data-04-font-size: 18;
+@data-04-line-height: 21;
+
+//data-05
+//data-s
+@data-05-font-size: 16;
+@data-05-line-height: 18;
+
+//data-06
+//data-xs
+@data-06-font-size: 14;
+@data-06-line-height: 16;
+
+//*******//
+// Drive //
+//*******//
+
+//label-01-drive
+//label-400-drive
+@drive-base-font-size: 16;
+@drive-base-font-mobile-size: 14;
+@drive-base-line-height: 18;
+@drive-base-letter-spacing: 0.32;
+@drive-base-font-weight: 400;
+@drive-base-font-style: normal;
+
+//body-01-drive
+//body-l-400-drive
+@body-01-drive-font-size: 20;
+@body-01-drive-font-mobile-size: 18;
+@body-01-drive-line-height: 30;
+@body-01-drive-line-height-mobile: 28;
+@body-01-drive-letter-spacing: 0;
+
+//body-02-short-drive
+//body-m-400-short-drive
+@body-02-short-drive-font-size: 18;
+@body-02-short-drive-font-mobile-size: 16;
+@body-02-short-drive-line-height: 22;
+@body-02-short-drive-line-height-mobile: 20;
+
+//body-02-tall-drive
+//body-m-400-tall-drive
+@body-02-tall-drive-font-size: 18;
+@body-02-tall-drive-font-mobile-size: 16;
+@body-02-tall-drive-line-height: 28;
+@body-02-tall-drive-line-height-mobile: 26;
+
+//body-03-drive,
+//body-s-700-drive
+@body-03-drive-line-height: 22;
+@body-03-drive-weight: 700;
+
+//body-04-drive,
+//body-s-400-drive
+@body-04-drive-line-height: 22;
+@body-04-drive-line-height-mobile: 20;
+
+//body-05-drive
+//body-s-400-italic-drive
+@body-05-drive-line-height: 20;
+@body-05-drive-style: italic;
+
+//heading-01-drive
+//heading-xl-300-drive
+@heading-01-drive-font-size: 26;
+@heading-01-drive-font-mobile-size: 24;
+@heading-01-drive-line-height: 34;
+@heading-01-drive-line-height-mobile: 32;
+@heading-01-drive-weight: 300;
+
+//heading-02-drive
+//heading-l-400-drive
+@heading-02-drive-font-size: 24;
+@heading-02-drive-font-mobile-size: 22;
+@heading-02-drive-line-height: 30;
+@heading-02-drive-line-height-mobile: 28;
+
+//heading-03-drive
+//heading-m-300-drive
+@heading-03-drive-font-size: 20;
+@heading-03-drive-font-mobile-size: 18;
+@heading-03-drive-line-height: 26;
+@heading-03-drive-mobile-line-height: 24;
+
+//heading-04-drive
+//heading-m-500-drive
+@heading-04-drive-font-size: 20;
+@heading-04-drive-font-mobile-size: 18;
+@heading-04-drive-line-height: 28;
+@heading-04-drive-mobile-line-height: 26;
+@heading-04-drive-weight: 500;
+
+//heading-05-drive
+//heading-s-500-drive
+@heading-05-drive-font-size: 18;
+@heading-05-drive-font-mobile-size: 16;
+@heading-05-drive-line-height: 22;
+@heading-05-drive-mobile-line-height: 20;
+@heading-05-drive-letter-spacing: 0.16;
+
+//heading-06-drive
+@heading-06-drive-font-size: 14;
+@heading-06-drive-letter-spacing: 0;
+
+//heading-07-drive
+//heading-s-300-drive
+@heading-07-drive-font-size: 18;
+@heading-07-drive-font-mobile-size: 16;
+@heading-07-drive-line-height: 20;
+@heading-07-drive-mobile-line-height: 18;
+
+//data-01-drive
+//data-xl-drive
+@data-01-drive-font-size: 34;
+@data-01-drive-mobile-size: 32;
+@data-01-drive-line-height: 42;
+@data-01-drive-mobile-line-height: 40;
+
+//data-02-drive
+//data-l-drive
+@data-02-drive-font-size: 22;
+@data-02-drive-mobile-size: 20;
+@data-02-drive-line-height: 26;
+@data-02-drive-mobile-line-height: 24;
+
+//data-03-drive
+//data-m-drive
+@data-03-drive-font-size: 20;
+@data-03-drive-mobile-size: 16;
+@data-03-drive-line-height: 22;
+@data-03-drive-mobile-line-height: 21;
+
+//data-04-drive
+//data-s-drive
+@data-04-drive-font-size: 18;
+@data-04-drive-mobile-size: 16;
+@data-04-drive-line-height: 26;
+@data-04-drive-mobile-line-height: 24;
+
+//*************************************************************//
+// Do not add raw values here, use the variables above instead //
+//*************************************************************//
+
+.zen-font(@font,
+    @size: @base-font-size,
+    @line-height: @base-line-height,
+    @letter-spacing: @base-letter-spacing,
+    @weight: @base-font-weight,
+    @style: @base-font-style,
+    @text-transform: none,
+) {
+    font-family: @font;
+    font-size: (@size / @rem);
+    font-style: @style;
+    font-weight: @weight;
+    letter-spacing: (@letter-spacing / @rem);
+    line-height: (@line-height / @rem);
+    text-transform: @text-transform;
+    text-decoration: none;
+
+    html:lang(ar) & {
+        font-family: @arabic-font-family;
+    }
+}
+
+.zen-drive-font(@font,
+    @size: @drive-base-font-size,
+    @line-height: @drive-base-line-height,
+    @letter-spacing: @drive-base-letter-spacing,
+    @weight: @drive-base-font-weight,
+    @style: @drive-base-font-style,
+    @text-transform: none,
+) {
+    font-family: @font;
+    font-size: (@size / @rem);
+    font-style: @style;
+    font-weight: @weight;
+    letter-spacing: (@letter-spacing / @rem);
+    line-height: (@line-height / @rem);
+    text-transform: @text-transform;
+    text-decoration: none;
+}
+
+// Standard
+
+// Labels
+.zen-body-label-400,
+.zen-body-s-400 {
+    .zen-font(@main-font-family);
+}
+
+// Body
+.zen-body-l-400 {
+    .zen-font(@main-font-family, @body-font-size, @body-line-height, @body-letter-spacing);
+}
+
+.zen-body-m-400-short {
+    .zen-font(@main-font-family, @body-short-font-size, @base-line-height, @body-letter-spacing);
+}
+
+.zen-body-m-400-tall {
+    .zen-font(@main-font-family, @body-tall-font-size, @body-tall-line-height, @body-letter-spacing);
+}
+
+.zen-body-s-700 {
+    .zen-font(@main-font-family, @weight: @body-03-weight);
+}
+
+.zen-body-s-400-italic {
+    .zen-font(@main-font-family, @style: @body-05-style);
+}
+
+// Headings
+.zen-heading-xl-300 {
+    .zen-font(@main-font-family, @heading-01-font-size, @heading-01-line-height, @weight: @heading-01-weight);
+}
+
+.zen-heading-l-400 {
+    .zen-font(@main-font-family, @heading-02-font-size, @heading-02-line-height);
+}
+
+.zen-heading-m-300 {
+    .zen-font(@main-font-family, @heading-03-font-size, @heading-03-line-height, @weight: @heading-01-weight);
+}
+
+.zen-heading-s-500 {
+    .zen-font(@main-font-family, @heading-04-font-size, @heading-04-line-height, @weight: @heading-04-weight);
+}
+
+.zen-heading-xs-500 {
+    .zen-font(@main-font-family, @heading-05-font-size, @base-line-height, @heading-05-letter-spacing, @heading-05-weight);
+}
+
+.zen-heading-06 {
+    .zen-font(@main-font-family, @body-tall-font-size, @body-line-height, @heading-06-letter-spacing, @heading-05-weight, @text-transform: @heading-06-text-transformI);
+}
+
+.zen-heading-xs-300 {
+    .zen-font(@main-font-family, @heading-05-font-size, @base-line-height, @heading-05-letter-spacing, @weight: @heading-01-weight);
+}
+
+// Data
+.zen-data-xxl {
+    .zen-font(@main-font-family, @data-01-font-size, @data-01-line-height);
+}
+
+.zen-data-xl {
+    .zen-font(@main-font-family, @data-02-font-size, @data-02-line-height);
+}
+
+.zen-data-l {
+    .zen-font(@main-font-family, @data-03-font-size, @data-03-line-height);
+}
+
+.zen-data-m {
+    .zen-font(@main-font-family, @data-04-font-size, @data-04-line-height);
+}
+
+.zen-data-s {
+    .zen-font(@main-font-family, @data-05-font-size, @data-05-line-height);
+}
+
+.zen-data-xs {
+    .zen-font(@main-font-family, @data-06-font-size, @data-06-line-height);
+}
+
+// Drive
+
+// Labels Drive
+.zen-label-01-drive,
+.zen-label-400-drive {
+    .zen-drive-font(@driver-font-family);
+}
+
+// Body Drive
+.zen-body-01-drive,
+.zen-body-l-400-drive {
+    .zen-drive-font(@driver-font-family, @body-01-drive-font-size, @body-01-drive-line-height, @body-01-drive-letter-spacing);
+}
+
+.zen-body-02-short-drive,
+.zen-body-m-400-short-drive {
+    .zen-drive-font(@driver-font-family, @body-02-short-drive-font-size, @body-02-short-drive-line-height);
+}
+
+.zen-body-02-tall-drive,
+.zen-body-m-400-tall-drive {
+    .zen-drive-font(@driver-font-family, @body-02-tall-drive-font-size, @body-02-tall-drive-line-height);
+}
+
+.zen-body-03-drive,
+.zen-body-s-700-drive {
+    .zen-drive-font(@driver-font-family,  @line-height: @body-03-drive-line-height, @weight: @body-03-drive-weight);
+}
+
+.zen-body-04-drive,
+.zen-body-s-400-drive {
+    .zen-drive-font(@driver-font-family, @line-height: @body-04-drive-line-height);
+}
+
+.zen-body-05-drive,
+.zen-body-s-400-italic-drive {
+    .zen-drive-font(@driver-font-family, @line-height: @body-05-drive-line-height, @style: @body-05-drive-style);
+}
+
+// Headings Drive
+.zen-heading-01-drive,
+.zen-heading-xl-300-drive {
+    .zen-drive-font(@driver-font-family, @heading-01-drive-font-size, @heading-01-drive-line-height, @weight: @heading-01-drive-weight);
+}
+
+.zen-heading-02-drive,
+.zen-heading-l-400-drive {
+    .zen-drive-font(@driver-font-family, @heading-02-drive-font-size, @heading-02-drive-line-height);
+}
+
+.zen-heading-03-drive,
+.zen-heading-m-300-drive {
+    .zen-drive-font(@driver-font-family, @heading-03-drive-font-size, @heading-03-drive-line-height, @weight: @heading-01-drive-weight);
+}
+
+.zen-heading-04-drive,
+.zen-heading-m-500-drive {
+    .zen-drive-font(@driver-font-family, @heading-04-drive-font-size, @heading-04-drive-line-height, @weight: @heading-04-drive-weight);
+}
+
+.zen-heading-05-drive,
+.zen-heading-s-500-drive {
+    .zen-drive-font(@driver-font-family, @heading-05-drive-font-size, @heading-05-drive-line-height, @heading-05-drive-letter-spacing, @weight: @heading-04-drive-weight);
+}
+
+.zen-heading-06-drive {
+    .zen-drive-font(@driver-font-family, @heading-06-drive-font-size, @body-line-height, @heading-06-drive-letter-spacing, @weight: @heading-04-drive-weight, @text-transform: @heading-06-text-transformI);
+}
+
+.zen-heading-07-drive,
+.zen-heading-s-300-drive {
+    .zen-drive-font(@driver-font-family, @heading-07-drive-font-size, @heading-07-drive-line-height, @heading-05-drive-letter-spacing, @weight: @heading-01-drive-weight);
+}
+
+// Data Drive
+.zen-data-01-drive,
+.zen-data-xl-drive {
+    .zen-drive-font(@driver-font-family, @data-01-drive-font-size, @data-01-drive-line-height);
+}
+
+.zen-data-02-drive,
+.zen-data-l-drive {
+    .zen-drive-font(@driver-font-family, @data-02-drive-font-size, @data-02-drive-line-height);
+}
+
+.zen-data-03-drive,
+.zen-data-m-drive {
+    .zen-drive-font(@driver-font-family, @data-03-drive-font-size, @data-03-drive-line-height);
+}
+
+.zen-data-04-drive,
+.zen-data-s-drive {
+    .zen-drive-font(@driver-font-family, @data-04-drive-font-size, @data-04-drive-line-height);
+}
+
+// Responsive overrides (mobile — max-width: 640px)
+@media (max-width: 640px) {
+    // Standard
+    .zen-heading-xl-300 {
+        .zen-font(@main-font-family, @heading-01-font-mobile-size, @heading-01-line-height, @weight: @heading-01-weight);
+    }
+
+    .zen-heading-m-300 {
+        .zen-font(@main-font-family, @heading-03-font-mobile-size, @heading-03-line-height, @weight: @heading-01-weight);
+    }
+
+    // Drive
+    .zen-label-01-drive,
+    .zen-label-400-drive {
+        .zen-drive-font(@driver-font-family, @drive-base-font-mobile-size);
+    }
+
+    .zen-body-01-drive,
+    .zen-body-l-400-drive {
+        .zen-drive-font(@driver-font-family, @body-01-drive-font-mobile-size, @body-01-drive-line-height-mobile, @body-01-drive-letter-spacing);
+    }
+
+    .zen-body-02-short-drive,
+    .zen-body-m-400-short-drive {
+        .zen-drive-font(@driver-font-family, @body-02-short-drive-font-mobile-size, @body-02-short-drive-line-height-mobile);
+    }
+
+    .zen-body-02-tall-drive,
+    .zen-body-m-400-tall-drive {
+        .zen-drive-font(@driver-font-family, @body-02-tall-drive-font-mobile-size, @body-02-tall-drive-line-height-mobile);
+    }
+
+    .zen-body-03-drive,
+    .zen-body-s-700-drive {
+        .zen-drive-font(@driver-font-family, @drive-base-font-mobile-size, @line-height: @body-03-drive-line-height, @weight: @body-03-drive-weight);
+    }
+
+    .zen-body-04-drive,
+    .zen-body-s-400-drive {
+        .zen-drive-font(@driver-font-family, @drive-base-font-mobile-size, @body-04-drive-line-height-mobile);
+    }
+
+    .zen-body-05-drive,
+    .zen-body-s-400-italic-drive {
+        .zen-drive-font(@driver-font-family, @drive-base-font-mobile-size, @body-05-drive-line-height, @style: @body-05-drive-style);
+    }
+
+    .zen-heading-01-drive,
+    .zen-heading-xl-300-drive {
+        .zen-drive-font(@driver-font-family, @heading-01-drive-font-mobile-size, @heading-01-drive-line-height-mobile, @weight: @heading-01-drive-weight);
+    }
+
+    .zen-heading-02-drive,
+    .zen-heading-l-400-drive {
+        .zen-drive-font(@driver-font-family, @heading-02-drive-font-mobile-size, @heading-02-drive-line-height-mobile);
+    }
+
+    .zen-heading-03-drive,
+    .zen-heading-m-300-drive {
+        .zen-drive-font(@driver-font-family, @heading-03-drive-font-mobile-size, @heading-03-drive-mobile-line-height, @weight: @heading-01-drive-weight);
+    }
+
+    .zen-heading-04-drive,
+    .zen-heading-m-500-drive {
+        .zen-drive-font(@driver-font-family, @heading-04-drive-font-mobile-size, @heading-04-drive-mobile-line-height, @weight: @heading-04-drive-weight);
+    }
+
+    .zen-heading-05-drive,
+    .zen-heading-s-500-drive {
+        .zen-drive-font(@driver-font-family, @heading-05-drive-font-mobile-size, @heading-05-drive-mobile-line-height, @heading-05-drive-letter-spacing, @weight: @heading-04-drive-weight);
+    }
+
+    .zen-heading-07-drive,
+    .zen-heading-s-300-drive {
+        .zen-drive-font(@driver-font-family, @heading-07-drive-font-mobile-size, @heading-07-drive-mobile-line-height, @heading-05-drive-letter-spacing, @weight: @heading-01-drive-weight);
+    }
+
+    .zen-data-01-drive,
+    .zen-data-xl-drive {
+        .zen-drive-font(@driver-font-family, @data-01-drive-mobile-size, @data-01-drive-mobile-line-height);
+    }
+
+    .zen-data-02-drive,
+    .zen-data-l-drive {
+        .zen-drive-font(@driver-font-family, @data-02-drive-mobile-size, @data-02-drive-mobile-line-height);
+    }
+
+    .zen-data-03-drive,
+    .zen-data-m-drive {
+        .zen-drive-font(@driver-font-family, @data-03-drive-mobile-size, @data-03-drive-mobile-line-height);
+    }
+
+    .zen-data-04-drive,
+    .zen-data-s-drive {
+        .zen-drive-font(@driver-font-family, @data-04-drive-mobile-size, @data-04-drive-mobile-line-height);
+    }
+}
+
+// Depricated //
+
 .font(
     @font: Roboto,
     @size,
@@ -6,6 +565,7 @@
     @weight: 400,
     @style: normal,
     @text-transform: none,
+    @arabic-font: var(--arabic-font-family)
 ) {
     font-family: @font;
     font-size: @size;
@@ -17,7 +577,7 @@
     text-decoration: none;
 
     html:lang(ar) & {
-        font-family: var(--arabic-font-family);
+        font-family: @arabic-font;
     }
 }
 
@@ -344,95 +904,95 @@
 // Data
 .data-01,
 .data-xxl {
-    .font(var(--main-font-data), 32px, @line-height: 40px);
+    .font(var(--main-font-data), 32px, @line-height: 40px, @arabic-font: var(--main-font-data));
 }
 
 .data-02,
 .data-xl {
-    .font(var(--main-font-data), 24px, 32px);
+    .font(var(--main-font-data), 24px, 32px, @arabic-font: var(--main-font-data));
 }
 
 .data-03,
 .data-l {
-    .font(var(--main-font-data), 20px, 24px);
+    .font(var(--main-font-data), 20px, 24px, @arabic-font: var(--main-font-data));
 }
 
 .data-04,
 .data-m {
-    .font(var(--main-font-data), 18px, 21px);
+    .font(var(--main-font-data), 18px, 21px, @arabic-font: var(--main-font-data));
 }
 
 .data-05,
 .data-s {
-    .font(var(--main-font-data), 16px, 18px);
+    .font(var(--main-font-data), 16px, 18px, @arabic-font: var(--main-font-data));
 }
 
 .data-06,
 .data-xs {
-    .font(var(--main-font-data), 14px, 16px);
+    .font(var(--main-font-data), 14px, 16px, @arabic-font: var(--main-font-data));
 }
 
 // Data Drive
 .data-01-tablet-drive,
 .tablet-data-xl-drive {
-    .font(var(--data-font-drive), 34px, 42px);
+    .font(var(--data-font-drive), 34px, 42px, @arabic-font: var(--data-font-drive));
 }
 
 .data-01-mobile-drive,
 .mobile-data-xl-drive {
-    .font(var(--data-font-drive), 32px, 40px);
+    .font(var(--data-font-drive), 32px, 40px, @arabic-font: var(--data-font-drive));
 }
 
 @media (max-width: 640px) {
     .tablet-data-xl-drive {
-        .font(var(--data-font-drive), 32px, 40px);
+        .font(var(--data-font-drive), 32px, 40px, @arabic-font: var(--data-font-drive));
     }
 }
 
 .data-02-tablet-drive,
 .tablet-data-l-drive {
-    .font(var(--data-font-drive), 22px, 26px);
+    .font(var(--data-font-drive), 22px, 26px, @arabic-font: var(--data-font-drive));
 }
 
 .data-02-mobile-drive,
 .mobile-data-l-drive {
-    .font(var(--data-font-drive), 20px, 24px);
+    .font(var(--data-font-drive), 20px, 24px, @arabic-font: var(--data-font-drive));
 }
 
 @media (max-width: 640px) {
     .tablet-data-l-drive {
-        .font(var(--data-font-drive), 20px, 24px);
+        .font(var(--data-font-drive), 20px, 24px, @arabic-font: var(--data-font-drive));
     }
 }
 
 .data-03-tablet-drive,
 .tablet-data-m-drive {
-    .font(var(--data-font-drive), 20px, 22px);
+    .font(var(--data-font-drive), 20px, 22px, @arabic-font: var(--data-font-drive));
 }
 
 .data-03-mobile-drive,
 .mobile-data-m-drive {
-    .font(var(--data-font-drive), 16px, 21px);
+    .font(var(--data-font-drive), 16px, 21px, @arabic-font: var(--data-font-drive));
 }
 
 @media (max-width: 640px) {
     .tablet-data-m-drive {
-        .font(var(--data-font-drive), 16px, 21px);
+        .font(var(--data-font-drive), 16px, 21px, @arabic-font: var(--data-font-drive));
     }
 }
 
 .data-04-tablet-drive,
 .tablet-data-s-drive {
-    .font(var(--data-font-drive), 18px, 26px);
+    .font(var(--data-font-drive), 18px, 26px, @arabic-font: var(--data-font-drive));
 }
 
 .data-04-mobile-drive,
 .mobile-data-s-drive {
-    .font(var(--data-font-drive), 16px, 24px);
+    .font(var(--data-font-drive), 16px, 24px, @arabic-font: var(--data-font-drive));
 }
 
 @media (max-width: 640px) {
     .tablet-data-s-drive {
-        .font(var(--data-font-drive), 16px, 24px);
+        .font(var(--data-font-drive), 16px, 24px, @arabic-font: var(--data-font-drive));
     }
 }

package/dist/controlledPopup/controlledPopup.d.ts

@@ -9,6 +9,7 @@ import { TAlignment as TAlignmentAbsolute } from "../absolute/absolute";
 export type TAlignment = "top" | "top-left" | "top-right" | "left" | "left-top" | "left-bottom" | "right" | "right-top" | "right-bottom" | "bottom" | "bottom-left" | "bottom-right";
 export interface IControlledPopup extends IZenComponentProps {
     triggerRef: RefObject<HTMLElement | null>;
+    /** Alignment of the popup relative to its trigger. Defaults to `"bottom-left"` (flips to `"bottom-right"` in RTL). */
     alignment?: TAlignmentAbsolute;
     id?: string;
     className?: string;