@react-md/core 1.0.0-next.0 → 1.0.0-next.2

package/dist/table/_table.scss

@@ -12,9 +12,6 @@ $disable-everything: false !default;
 $disable-container: false !default;
 $disable-dense: false !default;
 $disable-full-width: false !default;
-$disable-cell-header-align-left: false !default;
-$disable-cell-align-center: false !default;
-$disable-cell-align-right: false !default;
 $disable-cell-align-top: false !default;
 $disable-cell-align-bottom: false !default;
 $disable-bordered: false !default;
@@ -28,7 +25,7 @@ $disable-sticky: false !default;
 $disable-sticky-cell: $disable-sticky !default;
 $disable-sticky-header: $disable-sticky !default;
 $disable-sticky-footer: $disable-sticky !default;
-$disable-checkbox: false !default;
+$disable-input-toggle: false !default;
 $disable-cell-no-wrap: false !default;
 $disable-cell-grow: false !default;
 $disable-cell-no-padding: false !default;
@@ -72,7 +69,7 @@ $cell-header-height: 3.5rem !default;
 $cell-header-dense-height: 2.125rem !default;
 $cell-horizontal-padding: 1rem !default;
 $cell-vertical-padding: 0.375rem !default;
-$cell-checkbox-horizontal-padding: 0.5rem !default;
+$cell-input-toggle-horizontal-padding: 0.5rem !default;
 $cell-content-gap: icon.$spacing !default;
 
 $sticky-cell-position: 0 !default;
@@ -111,85 +108,37 @@ $sticky-footer-active-styles: $sticky-header-active-styles !default;
 $row-hover-color: interaction.get-var(hover-background-color) !default;
 $row-selected-color: interaction.get-var(selected-background-color) !default;
 
-$var-lookup: (
-  background-color: (
-    var: --rmd-table-background-color,
-    value: $background-color,
-  ),
-  border-size: (
-    var: --rmd-table-border-size,
-    value: $border-size,
-  ),
-  border-color: (
-    var: --rmd-table-border-color,
-    value: $border-color,
-  ),
-  header-background-color: (
-    var: --rmd-table-header-background-color,
-    value: $header-background-color,
-  ),
-  cell-color: (
-    var: --rmd-table-cell-color,
-    value: $cell-color,
-  ),
-  cell-height: (
-    var: --rmd-table-cell-height,
-    value: $cell-height,
-  ),
-  cell-horizontal-padding: (
-    var: --rmd-table-cell-horizontal-padding,
-    value: $cell-horizontal-padding,
-  ),
-  cell-vertical-padding: (
-    var: --rmd-table-cell-vertical-padding,
-    value: $cell-vertical-padding,
-  ),
-  header-cell-height: (
-    var: --rmd-table-header-cell-height,
-    value: $cell-header-height,
-  ),
-  hover-color: (
-    var: --rmd-table-hover-color,
-    value: $row-hover-color,
-  ),
-  selected-color: (
-    var: --rmd-table-selected-color,
-    value: $row-selected-color,
-  ),
-  sticky-cell: (
-    var: --rmd-table-sticky-cell,
-    value: $sticky-cell-position,
-  ),
-  sticky-header: (
-    var: --rmd-table-sticky-header,
-    value: $sticky-header-position,
-  ),
-  sticky-footer: (
-    var: --rmd-table-sticky-footer,
-    value: $sticky-footer-position,
-  ),
-  sticky-background-color: (
-    var: --rmd-table-sticky-background-color,
-    value: $sticky-background-color,
-  ),
+$variables: (
+  background-color,
+  border-size,
+  border-color,
+  header-background-color,
+  cell-color,
+  cell-height,
+  cell-horizontal-padding,
+  cell-vertical-padding,
+  header-cell-height,
+  hover-color,
+  selected-color,
+  sticky-cell,
+  sticky-header,
+  sticky-footer,
+  sticky-background-color
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "table var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "table");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "table var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "table")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -230,6 +179,39 @@ $row-selected-styles: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(background-color, $background-color);
+    @include set-var(header-background-color, $header-background-color);
+    @include set-var(cell-color, $cell-color);
+    @include set-var(cell-height, $cell-height);
+    @include set-var(cell-horizontal-padding, $cell-horizontal-padding);
+    @include set-var(cell-vertical-padding, $cell-vertical-padding);
+    @include set-var(header-cell-height, $cell-header-height);
+    @include set-var(selected-color, $row-selected-color);
+
+    @if not $disable-bordered {
+      @include set-var(border-size, $border-size);
+      @include set-var(border-color, $border-color);
+    }
+    @if not $disable-hoverable {
+      @include set-var(hover-color, $row-hover-color);
+    }
+    @if not $disable-sticky-cell {
+      @include set-var(sticky-cell, $sticky-cell-position);
+    }
+    @if not $disable-sticky-header {
+      @include set-var(sticky-header, $sticky-header-position);
+    }
+    @if not $disable-sticky-footer {
+      @include set-var(sticky-footer, $sticky-footer-position);
+    }
+    @if not $disable-sticky-header or not $disable-sticky-footer {
+      @include set-var(sticky-background-color, $sticky-background-color);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @if not $disable-container {
@@ -353,17 +335,18 @@ $row-selected-styles: (
         @if $cell-color != $cell-header-color {
           @include set-var(cell-color, $cell-header-color);
         }
-        @if not $disable-cell-header-align-left {
-          @include utils.rtl {
-            text-align: right;
-          }
+      }
 
-          text-align: left;
+      @if not $disable-cell-align-top {
+        &--top {
+          vertical-align: top;
         }
       }
 
-      &--top {
-        vertical-align: top;
+      @if not $disable-cell-align-bottom {
+        &--bottom {
+          vertical-align: bottom;
+        }
       }
 
       @if not $disable-sticky-cell {
@@ -388,11 +371,11 @@ $row-selected-styles: (
               transition.$linear-timing-function;
 
             .rmd-tr--hoverable:hover & {
-              @include use-var(background-color, hover-color);
+              @include utils.map-to-styles($row-hover-styles);
             }
 
             .rmd-tr--selected & {
-              @include use-var(background-color, selected-color);
+              @include utils.map-to-styles($row-selected-styles);
             }
           }
         }
@@ -405,18 +388,18 @@ $row-selected-styles: (
           }
         }
 
-        @if not $disable-checkbox and not $disable-sticky-header {
+        @if not $disable-input-toggle and not $disable-sticky-header {
           &--sticky-header-cell {
             z-index: $sticky-header-cell-z-index;
           }
         }
       }
 
-      @if not $disable-checkbox {
-        &--checkbox {
+      @if not $disable-input-toggle {
+        &--input-toggle {
           @include set-var(
             cell-horizontal-padding,
-            $cell-checkbox-horizontal-padding
+            $cell-input-toggle-horizontal-padding
           );
         }
       }

package/dist/table/tableCellStyles.d.ts

@@ -0,0 +1,33 @@
+import { type TableCellHorizontalAlignment, type TableCellVerticalAlignment } from "./TableConfigurationProvider.jsx";
+/** @remarks \@since 6.0.0 */
+export interface TableCellClassNameOptions {
+    className?: string;
+    /**
+     * Set this to `true` if the cell is rendered as a `<th>` so that the correct
+     * sticky styles can be applied.
+     */
+    header: boolean;
+    /**
+     * Set this to true if the cell is rendered in a `<thead>` so that the correct
+     * sticky styles can be applied.
+     */
+    isInTableHeader: boolean;
+    /** @defaultValue `false` */
+    grow?: boolean;
+    /** @defaultValue `false` */
+    sticky?: boolean;
+    /** @defaultValue `false` */
+    inputToggle?: boolean;
+    hAlign?: TableCellHorizontalAlignment;
+    vAlign?: TableCellVerticalAlignment;
+    /** @defaultValue `true` */
+    lineWrap?: boolean;
+    /**
+     * @defaultValue `"horizontal"`
+     */
+    padding?: "horizontal" | "vertical" | "none";
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function tableCell(options: TableCellClassNameOptions): string;

package/dist/table/tableCellStyles.js

@@ -0,0 +1,15 @@
+import { cnb } from "cnbuilder";
+import { cssUtils } from "../cssUtils.js";
+/**
+ * @remarks \@since 6.0.0
+ */ export function tableCell(options) {
+    const { grow, sticky, header, inputToggle, hAlign, vAlign, lineWrap = true, padding = "horizontal", isInTableHeader, className } = options;
+    // using `&&` instead of `bem` since the latest version of typescript does not
+    // support setting the same object key (empty string)
+    const p = "rmd-table-cell--";
+    return cnb("rmd-table-cell", grow && `${p}grow`, header && `${p}header`, sticky && `${p}sticky`, inputToggle && `${p}input-toggle`, sticky && (!isInTableHeader || inputToggle) && `${p}sticky-cell`, sticky && isInTableHeader && `${p}sticky-header`, sticky && isInTableHeader && inputToggle && `${p}header-cell`, vAlign && vAlign !== "middle" && `${p}${vAlign}`, !lineWrap && `${p}no-wrap`, padding === "vertical" && `${p}v-padding`, padding === "none" && `${p}no-padding`, cssUtils({
+        textAlign: hAlign
+    }), className);
+}
+
+//# sourceMappingURL=tableCellStyles.js.map

package/dist/table/tableCellStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableCellStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport {\n  type TableCellHorizontalAlignment,\n  type TableCellVerticalAlignment,\n} from \"./TableConfigurationProvider.jsx\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableCellClassNameOptions {\n  className?: string;\n\n  /**\n   * Set this to `true` if the cell is rendered as a `<th>` so that the correct\n   * sticky styles can be applied.\n   */\n  header: boolean;\n\n  /**\n   * Set this to true if the cell is rendered in a `<thead>` so that the correct\n   * sticky styles can be applied.\n   */\n  isInTableHeader: boolean;\n\n  /** @defaultValue `false` */\n  grow?: boolean;\n\n  /** @defaultValue `false` */\n  sticky?: boolean;\n\n  /** @defaultValue `false` */\n  inputToggle?: boolean;\n\n  hAlign?: TableCellHorizontalAlignment;\n  vAlign?: TableCellVerticalAlignment;\n\n  /** @defaultValue `true` */\n  lineWrap?: boolean;\n\n  /**\n   * @defaultValue `\"horizontal\"`\n   */\n  padding?: \"horizontal\" | \"vertical\" | \"none\";\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tableCell(options: TableCellClassNameOptions): string {\n  const {\n    grow,\n    sticky,\n    header,\n    inputToggle,\n    hAlign,\n    vAlign,\n    lineWrap = true,\n    padding = \"horizontal\",\n    isInTableHeader,\n    className,\n  } = options;\n\n  // using `&&` instead of `bem` since the latest version of typescript does not\n  // support setting the same object key (empty string)\n  const p = \"rmd-table-cell--\";\n  return cnb(\n    \"rmd-table-cell\",\n    grow && `${p}grow`,\n    header && `${p}header`,\n    sticky && `${p}sticky`,\n    inputToggle && `${p}input-toggle`,\n    sticky && (!isInTableHeader || inputToggle) && `${p}sticky-cell`,\n    sticky && isInTableHeader && `${p}sticky-header`,\n    sticky && isInTableHeader && inputToggle && `${p}header-cell`,\n    vAlign && vAlign !== \"middle\" && `${p}${vAlign}`,\n    !lineWrap && `${p}no-wrap`,\n    padding === \"vertical\" && `${p}v-padding`,\n    padding === \"none\" && `${p}no-padding`,\n    cssUtils({\n      textAlign: hAlign,\n    }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","tableCell","options","grow","sticky","header","inputToggle","hAlign","vAlign","lineWrap","padding","isInTableHeader","className","p","textAlign"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AA2C1C;;CAEC,GACD,OAAO,SAASC,UAAUC,OAAkC;IAC1D,MAAM,EACJC,IAAI,EACJC,MAAM,EACNC,MAAM,EACNC,WAAW,EACXC,MAAM,EACNC,MAAM,EACNC,WAAW,IAAI,EACfC,UAAU,YAAY,EACtBC,eAAe,EACfC,SAAS,EACV,GAAGV;IAEJ,8EAA8E;IAC9E,qDAAqD;IACrD,MAAMW,IAAI;IACV,OAAOd,IACL,kBACAI,QAAQ,CAAC,EAAEU,EAAE,IAAI,CAAC,EAClBR,UAAU,CAAC,EAAEQ,EAAE,MAAM,CAAC,EACtBT,UAAU,CAAC,EAAES,EAAE,MAAM,CAAC,EACtBP,eAAe,CAAC,EAAEO,EAAE,YAAY,CAAC,EACjCT,UAAW,CAAA,CAACO,mBAAmBL,WAAU,KAAM,CAAC,EAAEO,EAAE,WAAW,CAAC,EAChET,UAAUO,mBAAmB,CAAC,EAAEE,EAAE,aAAa,CAAC,EAChDT,UAAUO,mBAAmBL,eAAe,CAAC,EAAEO,EAAE,WAAW,CAAC,EAC7DL,UAAUA,WAAW,YAAY,CAAC,EAAEK,EAAE,EAAEL,OAAO,CAAC,EAChD,CAACC,YAAY,CAAC,EAAEI,EAAE,OAAO,CAAC,EAC1BH,YAAY,cAAc,CAAC,EAAEG,EAAE,SAAS,CAAC,EACzCH,YAAY,UAAU,CAAC,EAAEG,EAAE,UAAU,CAAC,EACtCb,SAAS;QACPc,WAAWP;IACb,IACAK;AAEJ"}

package/dist/table/tableContainerStyles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TableContainerClassNameOptions {
+    className?: string;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function tableContainer(options?: TableContainerClassNameOptions): string;

package/dist/table/tableContainerStyles.js

@@ -0,0 +1,9 @@
+import { cnb } from "cnbuilder";
+/**
+ * @remarks \@since 6.0.0
+ */ export function tableContainer(options = {}) {
+    const { className } = options;
+    return cnb("rmd-table-container", className);
+}
+
+//# sourceMappingURL=tableContainerStyles.js.map

package/dist/table/tableContainerStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TableContainerClassNameOptions {\n  className?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function tableContainer(\n  options: TableContainerClassNameOptions = {}\n): string {\n  const { className } = options;\n\n  return cnb(\"rmd-table-container\", className);\n}\n"],"names":["cnb","tableContainer","options","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAShC;;CAEC,GACD,OAAO,SAASC,eACdC,UAA0C,CAAC,CAAC;IAE5C,MAAM,EAAEC,SAAS,EAAE,GAAGD;IAEtB,OAAOF,IAAI,uBAAuBG;AACpC"}

package/dist/table/tableFooterStyles.d.ts

@@ -0,0 +1,10 @@
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface TableFooterClassNameOptions {
+    className?: string;
+    sticky?: boolean;
+    stickyActive?: boolean;
+    stickyActiveClassName?: string;
+}
+export declare function tableFooter(options?: TableFooterClassNameOptions): string;

package/dist/table/tableFooterStyles.js

@@ -0,0 +1,12 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-tfoot");
+export function tableFooter(options = {}) {
+    const { className, sticky, stickyActive, stickyActiveClassName } = options;
+    return cnb(styles({
+        sticky,
+        "sticky-active": stickyActive
+    }), stickyActive && stickyActiveClassName, className);
+}
+
+//# sourceMappingURL=tableFooterStyles.js.map

package/dist/table/tableFooterStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableFooterStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tfoot\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface TableFooterClassNameOptions {\n  className?: string;\n  sticky?: boolean;\n  stickyActive?: boolean;\n  stickyActiveClassName?: string;\n}\n\nexport function tableFooter(options: TableFooterClassNameOptions = {}): string {\n  const { className, sticky, stickyActive, stickyActiveClassName } = options;\n\n  return cnb(\n    styles({\n      sticky,\n      \"sticky-active\": stickyActive,\n    }),\n    stickyActive && stickyActiveClassName,\n    className\n  );\n}\n"],"names":["cnb","bem","styles","tableFooter","options","className","sticky","stickyActive","stickyActiveClassName"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB,OAAO,SAASE,YAAYC,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,SAAS,EAAEC,MAAM,EAAEC,YAAY,EAAEC,qBAAqB,EAAE,GAAGJ;IAEnE,OAAOJ,IACLE,OAAO;QACLI;QACA,iBAAiBC;IACnB,IACAA,gBAAgBC,uBAChBH;AAEJ"}

package/dist/table/tableHeaderStyles.d.ts

@@ -0,0 +1,10 @@
+/** @remarks \@since 6.0.0 */
+export interface TableHeaderClassNameOptions {
+    className?: string;
+    dense?: boolean;
+    sticky?: boolean;
+    stickyActive?: boolean;
+    stickyActiveClassName?: string;
+}
+/** @remarks \@since 6.0.0 */
+export declare function tableHeader(options?: TableHeaderClassNameOptions): string;

package/dist/table/tableHeaderStyles.js

@@ -0,0 +1,13 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-thead");
+/** @remarks \@since 6.0.0 */ export function tableHeader(options = {}) {
+    const { dense, sticky, stickyActive, stickyActiveClassName, className } = options;
+    return cnb(styles({
+        dense,
+        sticky,
+        "sticky-active": stickyActive
+    }), stickyActive && stickyActiveClassName, className);
+}
+
+//# sourceMappingURL=tableHeaderStyles.js.map

package/dist/table/tableHeaderStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableHeaderStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-thead\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableHeaderClassNameOptions {\n  className?: string;\n  dense?: boolean;\n  sticky?: boolean;\n  stickyActive?: boolean;\n  stickyActiveClassName?: string;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport function tableHeader(options: TableHeaderClassNameOptions = {}): string {\n  const { dense, sticky, stickyActive, stickyActiveClassName, className } =\n    options;\n\n  return cnb(\n    styles({\n      dense,\n      sticky,\n      \"sticky-active\": stickyActive,\n    }),\n    stickyActive && stickyActiveClassName,\n    className\n  );\n}\n"],"names":["cnb","bem","styles","tableHeader","options","dense","sticky","stickyActive","stickyActiveClassName","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB,2BAA2B,GAC3B,OAAO,SAASE,YAAYC,UAAuC,CAAC,CAAC;IACnE,MAAM,EAAEC,KAAK,EAAEC,MAAM,EAAEC,YAAY,EAAEC,qBAAqB,EAAEC,SAAS,EAAE,GACrEL;IAEF,OAAOJ,IACLE,OAAO;QACLG;QACAC;QACA,iBAAiBC;IACnB,IACAA,gBAAgBC,uBAChBC;AAEJ"}

package/dist/table/tableRowStyles.d.ts

@@ -0,0 +1,10 @@
+/** @remarks \@since 6.0.0 */
+export interface TableRowClassNameOptions {
+    className?: string;
+    disableHover?: boolean;
+    disableBorders?: boolean;
+    selected?: boolean;
+    clickable?: boolean;
+}
+/** @remarks \@since 6.0.0 */
+export declare function tableRow(options?: TableRowClassNameOptions): string;

package/dist/table/tableRowStyles.js

@@ -0,0 +1,14 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-tr");
+/** @remarks \@since 6.0.0 */ export function tableRow(options = {}) {
+    const { disableHover, disableBorders, selected, clickable, className } = options;
+    return cnb(styles({
+        bordered: !disableBorders,
+        hoverable: !disableHover,
+        clickable,
+        selected
+    }), className);
+}
+
+//# sourceMappingURL=tableRowStyles.js.map

package/dist/table/tableRowStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableRowStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-tr\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableRowClassNameOptions {\n  className?: string;\n  disableHover?: boolean;\n  disableBorders?: boolean;\n  selected?: boolean;\n  clickable?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport function tableRow(options: TableRowClassNameOptions = {}): string {\n  const { disableHover, disableBorders, selected, clickable, className } =\n    options;\n  return cnb(\n    styles({\n      bordered: !disableBorders,\n      hoverable: !disableHover,\n      clickable,\n      selected,\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","tableRow","options","disableHover","disableBorders","selected","clickable","className","bordered","hoverable"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAWnB,2BAA2B,GAC3B,OAAO,SAASE,SAASC,UAAoC,CAAC,CAAC;IAC7D,MAAM,EAAEC,YAAY,EAAEC,cAAc,EAAEC,QAAQ,EAAEC,SAAS,EAAEC,SAAS,EAAE,GACpEL;IACF,OAAOJ,IACLE,OAAO;QACLQ,UAAU,CAACJ;QACXK,WAAW,CAACN;QACZG;QACAD;IACF,IACAE;AAEJ"}

package/dist/table/tableStyles.d.ts

@@ -0,0 +1,12 @@
+/** @remarks \@since 6.0.0 */
+export interface TableClassNameOptions {
+    className?: string;
+    /** @defaultValue `false` */
+    dense?: boolean;
+    /** @defaultValue `false` */
+    fullWidth?: boolean;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function table(options?: TableClassNameOptions): string;

package/dist/table/tableStyles.js

@@ -0,0 +1,14 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-table");
+/**
+ * @remarks \@since 6.0.0
+ */ export function table(options = {}) {
+    const { dense = false, fullWidth = false, className } = options;
+    return cnb(styles({
+        dense,
+        "full-width": fullWidth
+    }), className);
+}
+
+//# sourceMappingURL=tableStyles.js.map

package/dist/table/tableStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/table/tableStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-table\");\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  dense?: boolean;\n\n  /** @defaultValue `false` */\n  fullWidth?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function table(options: TableClassNameOptions = {}): string {\n  const { dense = false, fullWidth = false, className } = options;\n\n  return cnb(styles({ dense, \"full-width\": fullWidth }), className);\n}\n"],"names":["cnb","bem","styles","table","options","dense","fullWidth","className"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAanB;;CAEC,GACD,OAAO,SAASE,MAAMC,UAAiC,CAAC,CAAC;IACvD,MAAM,EAAEC,QAAQ,KAAK,EAAEC,YAAY,KAAK,EAAEC,SAAS,EAAE,GAAGH;IAExD,OAAOJ,IAAIE,OAAO;QAAEG;QAAO,cAAcC;IAAU,IAAIC;AACzD"}

package/dist/table/types.d.ts

@@ -1,6 +1,25 @@
 import type { IntersectionObserverHookOptions } from "../useIntersectionObserver.js";
 /** @remarks \@since 6.0.0 */
 export type TableStickySectionOptions = Pick<IntersectionObserverHookOptions<HTMLTableSectionElement>, "disabled" | "getThreshold" | "getRootMargin">;
+/**
+ * This **should be wrapped in `useCallback`** to increase performance.
+ *
+ * The default behavior is to enable the "active" state for sticky headers is:
+ *
+ * - if the `TableHeader` is within a `TableContainer`, add a hidden `<tbody>`
+ *   after the `<thead>` and enable the active state once 1px overlaps with
+ *   the container.
+ * - otherwise, assume the `TableHeader` is fixed within the viewport and
+ *   parse the `top` CSS style as `px`. enable the active state once 1px
+ *   overlaps with this value AND the `TableHeader` exists within the
+ *   viewport.
+ *   - Note: This really only works with `px` and `rem` units.
+ *
+ * @see {@link TableStickySectionProps.stickyOptions} for an example usage with custom threshold and
+ * margin.
+ * @remarks \@since 6.0.0
+ */
+export type IsStickyTableSectionActive = (entry: IntersectionObserverEntry, isInTableContainer: boolean) => boolean;
 /** @remarks \@since 6.0.0 */
 export interface TableStickySectionProps {
     /**
@@ -43,25 +62,19 @@ export interface TableStickySectionProps {
      */
     stickyOptions?: TableStickySectionOptions;
     /**
-     * This **should be wrapped in `useCallback`** to increase performance.
-     *
-     * The default behavior is to enable the "active" state for sticky headers is:
-     *
-     * - if the `TableHeader` is within a `TableContainer`, add a hidden `<tbody>`
-     *   after the `<thead>` and enable the active state once 1px overlaps with
-     *   the container.
-     * - otherwise, assume the `TableHeader` is fixed within the viewport and
-     *   parse the `top` CSS style as `px`. enable the active state once 1px
-     *   overlaps with this value AND the `TableHeader` exists within the
-     *   viewport.
-     *   - Note: This really only works with `px` and `rem` units.
-     *
-     *
+     * An optional className to use when the sticky section is covering other rows
+     * (`active`). When this is defined, the default
+     * `rmd-thead--sticky-active`/`rmd-tfoot--sticky-active` will no longer be
+     * applied.
+     */
+    stickyActiveClassName?: string;
+    /**
+     * @see {@link IsStickyTableSectionActive} for a description.
      * @see {@link stickyOptions} for an example usage with custom threshold and
      * margin.
      * @remarks \@since 6.0.0
      */
-    isStickyActive?(entry: IntersectionObserverEntry): boolean;
+    isStickyActive?: IsStickyTableSectionActive;
     /**
      * Set this to `true` when the {@link sticky} prop is `true` to disable the
      * behavior of adding an additional className when the sticky mode is active.

package/dist/table/types.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/table/types.ts"],"sourcesContent":["import type { IntersectionObserverHookOptions } from \"../useIntersectionObserver.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport type TableStickySectionOptions = Pick<\n  IntersectionObserverHookOptions<HTMLTableSectionElement>,\n  \"disabled\" | \"getThreshold\" | \"getRootMargin\"\n>;\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableStickySectionProps {\n  /**\n   * @defaultValue `false`\n   */\n  sticky?: boolean;\n\n  /**\n   * This can be used when the {@link sticky} prop is set to `true` for\n   * additional behavior around the \"active\" state for sticky headers.\n   *\n   * @example\n   * Disabling Sticky Active State\n   * ```ts\n   * stickyOptions={{\n   *   disabled: true,\n   * }}\n   * ```\n   *\n   * @example\n   * Custom Options\n   * ```ts\n   * stickyOptions={{\n   *   getThreshold: useCallback(() => {\n   *     // you can access the DOM safely from here\n   *     return [0, 0.25, 0.5, 1];\n   *   }, []),\n   *   getRootMargin: useCallback(() => {\n   *     // you can access the DOM safely from here\n   *     return \"-1px 0px 150px 0px\";\n   *   }, []),\n   * }}\n   * isStickyActive={useCallback((entry) => {\n   *   // whatever custom logic you want. you can access the DOM safely from here\n   *   return entry.isIntersecting;\n   * }, [])}\n   * ```\n   *\n   * @remarks \\@since 6.0.0\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API}\n   */\n  stickyOptions?: TableStickySectionOptions;\n\n  /**\n   * This **should be wrapped in `useCallback`** to increase performance.\n   *\n   * The default behavior is to enable the \"active\" state for sticky headers is:\n   *\n   * - if the `TableHeader` is within a `TableContainer`, add a hidden `<tbody>`\n   *   after the `<thead>` and enable the active state once 1px overlaps with\n   *   the container.\n   * - otherwise, assume the `TableHeader` is fixed within the viewport and\n   *   parse the `top` CSS style as `px`. enable the active state once 1px\n   *   overlaps with this value AND the `TableHeader` exists within the\n   *   viewport.\n   *   - Note: This really only works with `px` and `rem` units.\n   *\n   *\n   * @see {@link stickyOptions} for an example usage with custom threshold and\n   * margin.\n   * @remarks \\@since 6.0.0\n   */\n  isStickyActive?(entry: IntersectionObserverEntry): boolean;\n\n  /**\n   * Set this to `true` when the {@link sticky} prop is `true` to disable the\n   * behavior of adding an additional className when the sticky mode is active.\n   *\n   * The `TableHeader` would gain the `.rmd-thead--sticky-active` class while\n   * the `TableFooter` would gain the `.rmd-tfoot--sticky-active` class.\n   *\n   * @defaultValue `false`\n   */\n  disableStickyStyles?: boolean;\n}\n"],"names":[],"mappings":"AAQA,2BAA2B,GAC3B,WAyEC"}
+{"version":3,"sources":["../../src/table/types.ts"],"sourcesContent":["import type { IntersectionObserverHookOptions } from \"../useIntersectionObserver.js\";\n\n/** @remarks \\@since 6.0.0 */\nexport type TableStickySectionOptions = Pick<\n  IntersectionObserverHookOptions<HTMLTableSectionElement>,\n  \"disabled\" | \"getThreshold\" | \"getRootMargin\"\n>;\n\n/**\n * This **should be wrapped in `useCallback`** to increase performance.\n *\n * The default behavior is to enable the \"active\" state for sticky headers is:\n *\n * - if the `TableHeader` is within a `TableContainer`, add a hidden `<tbody>`\n *   after the `<thead>` and enable the active state once 1px overlaps with\n *   the container.\n * - otherwise, assume the `TableHeader` is fixed within the viewport and\n *   parse the `top` CSS style as `px`. enable the active state once 1px\n *   overlaps with this value AND the `TableHeader` exists within the\n *   viewport.\n *   - Note: This really only works with `px` and `rem` units.\n *\n * @see {@link TableStickySectionProps.stickyOptions} for an example usage with custom threshold and\n * margin.\n * @remarks \\@since 6.0.0\n */\nexport type IsStickyTableSectionActive = (\n  entry: IntersectionObserverEntry,\n  isInTableContainer: boolean\n) => boolean;\n\n/** @remarks \\@since 6.0.0 */\nexport interface TableStickySectionProps {\n  /**\n   * @defaultValue `false`\n   */\n  sticky?: boolean;\n\n  /**\n   * This can be used when the {@link sticky} prop is set to `true` for\n   * additional behavior around the \"active\" state for sticky headers.\n   *\n   * @example\n   * Disabling Sticky Active State\n   * ```ts\n   * stickyOptions={{\n   *   disabled: true,\n   * }}\n   * ```\n   *\n   * @example\n   * Custom Options\n   * ```ts\n   * stickyOptions={{\n   *   getThreshold: useCallback(() => {\n   *     // you can access the DOM safely from here\n   *     return [0, 0.25, 0.5, 1];\n   *   }, []),\n   *   getRootMargin: useCallback(() => {\n   *     // you can access the DOM safely from here\n   *     return \"-1px 0px 150px 0px\";\n   *   }, []),\n   * }}\n   * isStickyActive={useCallback((entry) => {\n   *   // whatever custom logic you want. you can access the DOM safely from here\n   *   return entry.isIntersecting;\n   * }, [])}\n   * ```\n   *\n   * @remarks \\@since 6.0.0\n   * @see {@link https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API}\n   */\n  stickyOptions?: TableStickySectionOptions;\n\n  /**\n   * An optional className to use when the sticky section is covering other rows\n   * (`active`). When this is defined, the default\n   * `rmd-thead--sticky-active`/`rmd-tfoot--sticky-active` will no longer be\n   * applied.\n   */\n  stickyActiveClassName?: string;\n\n  /**\n   * @see {@link IsStickyTableSectionActive} for a description.\n   * @see {@link stickyOptions} for an example usage with custom threshold and\n   * margin.\n   * @remarks \\@since 6.0.0\n   */\n  isStickyActive?: IsStickyTableSectionActive;\n\n  /**\n   * Set this to `true` when the {@link sticky} prop is `true` to disable the\n   * behavior of adding an additional className when the sticky mode is active.\n   *\n   * The `TableHeader` would gain the `.rmd-thead--sticky-active` class while\n   * the `TableFooter` would gain the `.rmd-tfoot--sticky-active` class.\n   *\n   * @defaultValue `false`\n   */\n  disableStickyStyles?: boolean;\n}\n"],"names":[],"mappings":"AA+BA,2BAA2B,GAC3B,WAoEC"}

package/dist/tabs/_tabs.scss

@@ -42,45 +42,27 @@ $tablist-scroller-background-color: theme.theme-get-var(
   inherit
 ) !default;
 
-$var-lookup: (
-  color: (
-    var: --rmd-tab-color,
-    value: $inactive-color,
-  ),
-  active-color: (
-    var: --rmd-tab-active-color,
-    value: $active-color,
-  ),
-  inactive-color: (
-    var: --rmd-tab-inactive-color,
-    value: $inactive-color,
-  ),
-  disabled-color: (
-    var: --rmd-tab-disabled-color,
-    value: $disabled-color,
-  ),
-  indicator-background: (
-    var: --rmd-tab-indicator-background,
-    value: $indicator-background,
-  ),
+$variables: (
+  color,
+  active-color,
+  inactive-color,
+  disabled-color,
+  indicator-background
 );
 
 @function get-var($name, $fallback: null) {
-  $found: utils.validate($var-lookup, $name, "tabs var");
-  $var: map.get($found, var);
-  $value: if($fallback, $fallback, map.get($found, value));
-
-  @if $value {
-    @return var(#{$var}, #{$value});
+  $var: utils.get-var-name($variables, $name, "tab");
+  @if $fallback {
+    @return var(#{$var}, #{$fallback});
   }
 
   @return var(#{$var});
 }
 
 @mixin set-var($name, $value) {
-  $var: map.get(utils.validate($var-lookup, $name, "tabs var"), var);
-
-  #{$var}: #{$value};
+  @if $value {
+    #{utils.get-var-name($variables, $name, "tab")}: #{$value};
+  }
 }
 
 @mixin use-var($property, $name: $property, $fallback: null) {
@@ -126,6 +108,8 @@ $var-lookup: (
     // also fixes issues when placed within a flex column container
     flex-shrink: 0;
     flex-wrap: nowrap;
+    // make sure it can enable scrollbars in flex/grid containers
+    max-width: 100%;
     outline: none;
     overflow-x: auto;
     position: relative;
@@ -246,6 +230,19 @@ $var-lookup: (
   }
 }
 
+@mixin variables {
+  @if not $disable-everything {
+    @include set-var(color, $inactive-color);
+    @include set-var(active-color, $active-color);
+    @include set-var(inactive-color, $inactive-color);
+    @include set-var(disabled-color, $disabled-color);
+
+    @if not $disable-indicator {
+      @include set-var(indicator-background, $indicator-background);
+    }
+  }
+}
+
 @mixin styles {
   @if not $disable-everything {
     @include tablist-styles;

package/dist/test-utils/data-testid.js

@@ -0,0 +1,2 @@
+
+//# sourceMappingURL=data-testid.js.map

package/dist/test-utils/data-testid.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/test-utils/data-testid.ts"],"names":[],"mappings":""}

package/dist/test-utils/jest-setup.js

@@ -1,10 +1,13 @@
 import { beforeEach } from "@jest/globals";
 import { INTERACTION_CONFIG } from "../interaction/config.js";
+import { TRANSITION_CONFIG } from "../transition/config.js";
 beforeEach(()=>{
     // set the mode to `none` in tests since ripples require
     // `getBoundingClientRect()` to create correct CSS. You'll either see warnings
     // in the console around invalid css values or `NaN`.
     INTERACTION_CONFIG.mode = "none";
+    // disable transitions in tests since it just makes it more difficult
+    TRANSITION_CONFIG.disabled = true;
 });
 
 //# sourceMappingURL=jest-setup.js.map

package/dist/test-utils/jest-setup.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/test-utils/jest-setup.ts"],"sourcesContent":["import { beforeEach } from \"@jest/globals\";\nimport { INTERACTION_CONFIG } from \"../interaction/config.js\";\n\nbeforeEach(() => {\n  // set the mode to `none` in tests since ripples require\n  // `getBoundingClientRect()` to create correct CSS. You'll either see warnings\n  // in the console around invalid css values or `NaN`.\n  INTERACTION_CONFIG.mode = \"none\";\n});\n"],"names":["beforeEach","INTERACTION_CONFIG","mode"],"mappings":"AAAA,SAASA,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,kBAAkB,QAAQ,2BAA2B;AAE9DD,WAAW;IACT,wDAAwD;IACxD,8EAA8E;IAC9E,qDAAqD;IACrDC,mBAAmBC,IAAI,GAAG;AAC5B"}
+{"version":3,"sources":["../../src/test-utils/jest-setup.ts"],"sourcesContent":["import { beforeEach } from \"@jest/globals\";\nimport { INTERACTION_CONFIG } from \"../interaction/config.js\";\nimport { TRANSITION_CONFIG } from \"../transition/config.js\";\n\nbeforeEach(() => {\n  // set the mode to `none` in tests since ripples require\n  // `getBoundingClientRect()` to create correct CSS. You'll either see warnings\n  // in the console around invalid css values or `NaN`.\n  INTERACTION_CONFIG.mode = \"none\";\n\n  // disable transitions in tests since it just makes it more difficult\n  TRANSITION_CONFIG.disabled = true;\n});\n"],"names":["beforeEach","INTERACTION_CONFIG","TRANSITION_CONFIG","mode","disabled"],"mappings":"AAAA,SAASA,UAAU,QAAQ,gBAAgB;AAC3C,SAASC,kBAAkB,QAAQ,2BAA2B;AAC9D,SAASC,iBAAiB,QAAQ,0BAA0B;AAE5DF,WAAW;IACT,wDAAwD;IACxD,8EAA8E;IAC9E,qDAAqD;IACrDC,mBAAmBE,IAAI,GAAG;IAE1B,qEAAqE;IACrED,kBAAkBE,QAAQ,GAAG;AAC/B"}