@react-md/core 1.0.0-next.0

package/dist/segmented-button/_segmented-button.scss

@@ -0,0 +1,209 @@
+@use "sass:map";
+@use "sass:color";
+@use "../utils";
+@use "../icon/icon";
+@use "../interaction/interaction";
+@use "../typography/typography";
+@use "../theme/a11y";
+@use "../theme/colors";
+@use "../theme/theme";
+
+$disable-everything: false !default;
+
+$light-theme-color: colors.$black !default;
+$light-theme-outline-color: #79747e !default;
+$light-theme-selected-background-color: theme.get-swatch(
+  theme.$secondary-color,
+  700,
+  false,
+  color.adjust(theme.$secondary-color, $lightness: -20%)
+) !default;
+$light-theme-selected-color: a11y.contrast-color(
+  $light-theme-selected-background-color
+) !default;
+
+$dark-theme-color: colors.$white !default;
+$dark-theme-outline-color: #938f99 !default;
+$dark-theme-selected-background-color: theme.get-swatch(
+  theme.$secondary-color,
+  300,
+  false,
+  color.adjust(theme.$secondary-color, $lightness: 20%)
+) !default;
+$dark-theme-selected-color: a11y.contrast-color(
+  $dark-theme-selected-background-color
+) !default;
+
+$gap: icon.$spacing !default;
+$border-radius: 2.5rem !default;
+$min-height: 2.5rem !default;
+$min-width: 3rem !default;
+$horizontal-padding: 0.75rem !default;
+$vertical-padding: 0 !default;
+$outline-width: 0.0625rem !default;
+$outline-color: theme.get-default-color(
+  $light-theme-outline-color,
+  $dark-theme-outline-color
+) !default;
+$color: theme.get-default-color($light-theme-color, $dark-theme-color) !default;
+$selected-color: theme.get-default-color(
+  $light-theme-selected-color,
+  $dark-theme-selected-color
+) !default;
+$selected-background-color: theme.get-default-color(
+  $light-theme-selected-background-color,
+  $dark-theme-selected-background-color
+) !default;
+
+$typography-styles: typography.$button-styles !default;
+
+$var-lookup: (
+  outline-width: (
+    var: --rmd-segmented-button-outline-width,
+    value: $outline-width,
+  ),
+  outline-color: (
+    var: --rmd-segmented-button-outline-color,
+    value: $outline-color,
+  ),
+  color: (
+    var: --rmd-segmented-button-color,
+    value: currentcolor,
+  ),
+  selected-background-color: (
+    var: --rmd-segmented-button-selected-background-color,
+    value: $selected-background-color,
+  ),
+  selected-color: (
+    var: --rmd-segmented-button-selected-color,
+    value: $selected-color,
+  ),
+);
+
+@mixin use-light-theme {
+  @if not $disable-everything {
+    @if $light-theme-outline-color != $dark-theme-outline-color {
+      @include set-var(outline-color, $light-theme-outline-color);
+    }
+
+    @if $light-theme-selected-background-color !=
+      $dark-theme-selected-background-color
+    {
+      @include set-var(
+        selected-background-color,
+        $light-theme-selected-background-color
+      );
+    }
+
+    @if $light-theme-selected-color != $dark-theme-selected-color {
+      @include set-var(selected-color, $light-theme-selected-color);
+    }
+  }
+}
+
+@mixin use-dark-theme {
+  @if not $disable-everything {
+    @if $light-theme-outline-color != $dark-theme-outline-color {
+      @include set-var(outline-color, $dark-theme-outline-color);
+    }
+
+    @if $light-theme-selected-background-color !=
+      $dark-theme-selected-background-color
+    {
+      @include set-var(
+        selected-background-color,
+        $dark-theme-selected-background-color
+      );
+    }
+
+    @if $light-theme-selected-color != $dark-theme-selected-color {
+      @include set-var(selected-color, $dark-theme-selected-color);
+    }
+  }
+}
+
+@function get-var($name, $fallback: null) {
+  $found: utils.validate($var-lookup, $name, "segmented button var");
+  $var: map.get($found, var);
+  $value: if($fallback, $fallback, map.get($found, value));
+
+  @if $value {
+    @return var(#{$var}, #{$value});
+  }
+
+  @return var(#{$var});
+}
+
+@mixin set-var($name, $value) {
+  $var: map.get(
+    utils.validate($var-lookup, $name, "segmented button var"),
+    var
+  );
+
+  #{$var}: #{$value};
+}
+
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+
+@mixin styles {
+  @if not $disable-everything {
+    .rmd-segmented-button-container {
+      display: grid;
+      grid-auto-columns: 1fr;
+      grid-auto-flow: column;
+
+      &--full-width {
+        width: 100%;
+      }
+    }
+
+    .rmd-segmented-button {
+      @include theme.theme-use-var(color, text-primary-color);
+      @include icon.set-var(color, currentcolor);
+      @include icon.set-var(size, 1.125rem);
+      @include utils.map-to-styles($typography-styles);
+
+      align-items: center;
+      background-color: transparent;
+      border: 0;
+      box-shadow: inset 0 0 0 get-var(outline-width) get-var(outline-color);
+      display: inline-flex;
+      gap: $gap;
+      justify-content: center;
+      min-height: $min-height;
+      min-width: $min-width;
+      padding: $vertical-padding $horizontal-padding;
+
+      &:first-child {
+        @include utils.rtl {
+          border-bottom-left-radius: 0;
+          border-bottom-right-radius: $border-radius;
+          border-top-left-radius: 0;
+          border-top-right-radius: $border-radius;
+        }
+
+        border-bottom-left-radius: $border-radius;
+        border-top-left-radius: $border-radius;
+      }
+
+      &:last-child {
+        @include utils.rtl {
+          border-bottom-left-radius: $border-radius;
+          border-bottom-right-radius: 0;
+          border-top-left-radius: $border-radius;
+          border-top-right-radius: 0;
+        }
+
+        border-bottom-right-radius: $border-radius;
+        border-top-right-radius: $border-radius;
+      }
+
+      &--selected {
+        @include use-var(background-color, selected-background-color);
+        @include use-var(color, selected-color);
+      }
+    }
+  }
+}

package/dist/segmented-button/segmentedButtonContainerStyles.d.ts

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

package/dist/segmented-button/segmentedButtonContainerStyles.js

@@ -0,0 +1,13 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-segmented-button-container");
+/**
+ * @remarks \@since 6.0.0
+ */ export function segmentedButtonContainerStyles(options = {}) {
+    const { className, disableFullWidth } = options;
+    return cnb(styles({
+        "full-width": !disableFullWidth
+    }), className);
+}
+
+//# sourceMappingURL=segmentedButtonContainerStyles.js.map

package/dist/segmented-button/segmentedButtonContainerStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/segmented-button/segmentedButtonContainerStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-segmented-button-container\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SegmentedButtonContainerClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  disableFullWidth?: boolean;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function segmentedButtonContainerStyles(\n  options: SegmentedButtonContainerClassNameOptions = {}\n): string {\n  const { className, disableFullWidth } = options;\n\n  return cnb(styles({ \"full-width\": !disableFullWidth }), className);\n}\n"],"names":["cnb","bem","styles","segmentedButtonContainerStyles","options","className","disableFullWidth"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAYnB;;CAEC,GACD,OAAO,SAASE,+BACdC,UAAoD,CAAC,CAAC;IAEtD,MAAM,EAAEC,SAAS,EAAEC,gBAAgB,EAAE,GAAGF;IAExC,OAAOJ,IAAIE,OAAO;QAAE,cAAc,CAACI;IAAiB,IAAID;AAC1D"}

package/dist/segmented-button/segmentedButtonStyles.d.ts

@@ -0,0 +1,18 @@
+/**
+ * @remarks \@since 6.0.0
+ */
+export interface SegmentedButtonClassNameOptions {
+    className?: string;
+    /** @defaultValue `false` */
+    selected?: boolean;
+    /**
+     * An optional className to apply when {@link selected} is `true`
+     */
+    selectedClassName?: string;
+    /** @internal */
+    pressedClassName?: string;
+}
+/**
+ * @remarks \@since 6.0.0
+ */
+export declare function segmentedButton(options?: SegmentedButtonClassNameOptions): string;

package/dist/segmented-button/segmentedButtonStyles.js

@@ -0,0 +1,16 @@
+import { cnb } from "cnbuilder";
+import { cssUtils } from "../cssUtils.js";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-segmented-button");
+/**
+ * @remarks \@since 6.0.0
+ */ export function segmentedButton(options = {}) {
+    const { className, selected, selectedClassName, pressedClassName } = options;
+    return cnb(styles({
+        selected
+    }), selected && selectedClassName, pressedClassName, cssUtils({
+        surface: true
+    }), className);
+}
+
+//# sourceMappingURL=segmentedButtonStyles.js.map

package/dist/segmented-button/segmentedButtonStyles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/segmented-button/segmentedButtonStyles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { cssUtils } from \"../cssUtils.js\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-segmented-button\");\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport interface SegmentedButtonClassNameOptions {\n  className?: string;\n\n  /** @defaultValue `false` */\n  selected?: boolean;\n\n  /**\n   * An optional className to apply when {@link selected} is `true`\n   */\n  selectedClassName?: string;\n\n  /** @internal */\n  pressedClassName?: string;\n}\n\n/**\n * @remarks \\@since 6.0.0\n */\nexport function segmentedButton(\n  options: SegmentedButtonClassNameOptions = {}\n): string {\n  const { className, selected, selectedClassName, pressedClassName } = options;\n\n  return cnb(\n    styles({ selected }),\n    selected && selectedClassName,\n    pressedClassName,\n    cssUtils({ surface: true }),\n    className\n  );\n}\n"],"names":["cnb","cssUtils","bem","styles","segmentedButton","options","className","selected","selectedClassName","pressedClassName","surface"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,QAAQ,QAAQ,iBAAiB;AAC1C,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAoBnB;;CAEC,GACD,OAAO,SAASE,gBACdC,UAA2C,CAAC,CAAC;IAE7C,MAAM,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,iBAAiB,EAAEC,gBAAgB,EAAE,GAAGJ;IAErE,OAAOL,IACLG,OAAO;QAAEI;IAAS,IAClBA,YAAYC,mBACZC,kBACAR,SAAS;QAAES,SAAS;IAAK,IACzBJ;AAEJ"}

package/dist/sheet/Sheet.d.ts

@@ -0,0 +1,38 @@
+/// <reference types="react" />
+import { type BaseDialogProps } from "../dialog/Dialog.js";
+import { type CSSTransitionClassNames, type TransitionTimeout } from "../transition/types.js";
+import { type LabelRequiredForA11y } from "../types.js";
+import { type BaseSheetClassNameOptions } from "./styles.js";
+declare module "react" {
+    interface CSSProperties {
+        "--rmd-sheet-height"?: string | number;
+        "--rmd-sheet-width"?: string | number;
+        "--rmd-sheet-max-height"?: string | number;
+        "--rmd-sheet-touch-width"?: string | number;
+        "--rmd-sheet-touch-max-height"?: string | number;
+        "--rmd-sheet-static-width"?: string | number;
+        "--rmd-sheet-transform-offscreen"?: string | number;
+        "--rmd-sheet-z-index"?: number;
+    }
+}
+export declare const DEFAULT_SHEET_TIMEOUT: Readonly<TransitionTimeout>;
+export declare const DEFAULT_SHEET_CLASSNAMES: Readonly<CSSTransitionClassNames>;
+export type SheetDialogProps = Omit<BaseDialogProps, "role" | "type" | "modal">;
+export interface BaseSheetProps extends SheetDialogProps, BaseSheetClassNameOptions {
+    /**
+     * @defaultValue `"dialog"`
+     */
+    role?: "dialog" | "menu" | "none";
+    /**
+     * @defaultValue `true`
+     * @see {@link SheetDialogProps.exitedHidden}
+     * @remarks \@since 6.0.0
+     */
+    exitedHidden?: boolean;
+}
+export type SheetProps = LabelRequiredForA11y<BaseSheetProps>;
+/**
+ * **Client Component**
+ *
+ */
+export declare const Sheet: import("react").ForwardRefExoticComponent<SheetProps & import("react").RefAttributes<HTMLDivElement>>;

package/dist/sheet/Sheet.js

@@ -0,0 +1,46 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { forwardRef } from "react";
+import { Dialog } from "../dialog/Dialog.js";
+import { sheet } from "./styles.js";
+export const DEFAULT_SHEET_TIMEOUT = {
+    enter: 200,
+    exit: 150
+};
+export const DEFAULT_SHEET_CLASSNAMES = {
+    appear: "rmd-sheet--offscreen",
+    appearActive: "rmd-sheet--enter rmd-sheet--visible",
+    enter: "rmd-sheet--offscreen",
+    enterActive: "rmd-sheet--enter rmd-sheet--visible",
+    exit: "rmd-sheet--exit",
+    exitActive: "rmd-sheet--offscreen",
+    exitDone: "rmd-sheet--offscreen rmd-sheet--hidden"
+};
+/**
+ * **Client Component**
+ *
+ */ export const Sheet = /*#__PURE__*/ forwardRef(function Sheet(props, ref) {
+    const { role = "dialog", className, position = "left", horizontalSize = "media", verticalSize = "recommended", timeout = DEFAULT_SHEET_TIMEOUT, classNames = DEFAULT_SHEET_CLASSNAMES, visible, temporary = true, exitedHidden = true, children, ...remaining } = props;
+    const { disableOverlay } = props;
+    return /*#__PURE__*/ _jsx(Dialog, {
+        ...remaining,
+        ref: ref,
+        role: role,
+        type: "custom",
+        timeout: timeout,
+        classNames: classNames,
+        visible: visible,
+        temporary: temporary,
+        exitedHidden: exitedHidden,
+        className: sheet({
+            position,
+            horizontalSize,
+            verticalSize,
+            disableOverlay,
+            className
+        }),
+        children: children
+    });
+});
+
+//# sourceMappingURL=Sheet.js.map

package/dist/sheet/Sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sheet/Sheet.tsx"],"sourcesContent":["\"use client\";\nimport { forwardRef } from \"react\";\nimport { Dialog, type BaseDialogProps } from \"../dialog/Dialog.js\";\nimport {\n  type CSSTransitionClassNames,\n  type TransitionTimeout,\n} from \"../transition/types.js\";\nimport { type LabelRequiredForA11y } from \"../types.js\";\nimport { sheet, type BaseSheetClassNameOptions } from \"./styles.js\";\n\ndeclare module \"react\" {\n  interface CSSProperties {\n    \"--rmd-sheet-height\"?: string | number;\n    \"--rmd-sheet-width\"?: string | number;\n    \"--rmd-sheet-max-height\"?: string | number;\n    \"--rmd-sheet-touch-width\"?: string | number;\n    \"--rmd-sheet-touch-max-height\"?: string | number;\n    \"--rmd-sheet-static-width\"?: string | number;\n    \"--rmd-sheet-transform-offscreen\"?: string | number;\n    \"--rmd-sheet-z-index\"?: number;\n  }\n}\n\nexport const DEFAULT_SHEET_TIMEOUT: Readonly<TransitionTimeout> = {\n  enter: 200,\n  exit: 150,\n};\n\nexport const DEFAULT_SHEET_CLASSNAMES: Readonly<CSSTransitionClassNames> = {\n  appear: \"rmd-sheet--offscreen\",\n  appearActive: \"rmd-sheet--enter rmd-sheet--visible\",\n  enter: \"rmd-sheet--offscreen\",\n  enterActive: \"rmd-sheet--enter rmd-sheet--visible\",\n  exit: \"rmd-sheet--exit\",\n  exitActive: \"rmd-sheet--offscreen\",\n  exitDone: \"rmd-sheet--offscreen rmd-sheet--hidden\",\n};\n\nexport type SheetDialogProps = Omit<BaseDialogProps, \"role\" | \"type\" | \"modal\">;\n\nexport interface BaseSheetProps\n  extends SheetDialogProps,\n    BaseSheetClassNameOptions {\n  /**\n   * @defaultValue `\"dialog\"`\n   */\n  role?: \"dialog\" | \"menu\" | \"none\";\n\n  /**\n   * @defaultValue `true`\n   * @see {@link SheetDialogProps.exitedHidden}\n   * @remarks \\@since 6.0.0\n   */\n  exitedHidden?: boolean;\n}\n\nexport type SheetProps = LabelRequiredForA11y<BaseSheetProps>;\n\n/**\n * **Client Component**\n *\n */\nexport const Sheet = forwardRef<HTMLDivElement, SheetProps>(\n  function Sheet(props, ref) {\n    const {\n      role = \"dialog\",\n      className,\n      position = \"left\",\n      horizontalSize = \"media\",\n      verticalSize = \"recommended\",\n      timeout = DEFAULT_SHEET_TIMEOUT,\n      classNames = DEFAULT_SHEET_CLASSNAMES,\n      visible,\n      temporary = true,\n      exitedHidden = true,\n      children,\n      ...remaining\n    } = props;\n    const { disableOverlay } = props;\n\n    return (\n      <Dialog\n        {...remaining}\n        ref={ref}\n        role={role}\n        type=\"custom\"\n        timeout={timeout}\n        classNames={classNames}\n        visible={visible}\n        temporary={temporary}\n        exitedHidden={exitedHidden}\n        className={sheet({\n          position,\n          horizontalSize,\n          verticalSize,\n          disableOverlay,\n          className,\n        })}\n      >\n        {children}\n      </Dialog>\n    );\n  }\n);\n"],"names":["forwardRef","Dialog","sheet","DEFAULT_SHEET_TIMEOUT","enter","exit","DEFAULT_SHEET_CLASSNAMES","appear","appearActive","enterActive","exitActive","exitDone","Sheet","props","ref","role","className","position","horizontalSize","verticalSize","timeout","classNames","visible","temporary","exitedHidden","children","remaining","disableOverlay","type"],"mappings":"AAAA;;AACA,SAASA,UAAU,QAAQ,QAAQ;AACnC,SAASC,MAAM,QAA8B,sBAAsB;AAMnE,SAASC,KAAK,QAAwC,cAAc;AAepE,OAAO,MAAMC,wBAAqD;IAChEC,OAAO;IACPC,MAAM;AACR,EAAE;AAEF,OAAO,MAAMC,2BAA8D;IACzEC,QAAQ;IACRC,cAAc;IACdJ,OAAO;IACPK,aAAa;IACbJ,MAAM;IACNK,YAAY;IACZC,UAAU;AACZ,EAAE;AAsBF;;;CAGC,GACD,OAAO,MAAMC,sBAAQZ,WACnB,SAASY,MAAMC,KAAK,EAAEC,GAAG;IACvB,MAAM,EACJC,OAAO,QAAQ,EACfC,SAAS,EACTC,WAAW,MAAM,EACjBC,iBAAiB,OAAO,EACxBC,eAAe,aAAa,EAC5BC,UAAUjB,qBAAqB,EAC/BkB,aAAaf,wBAAwB,EACrCgB,OAAO,EACPC,YAAY,IAAI,EAChBC,eAAe,IAAI,EACnBC,QAAQ,EACR,GAAGC,WACJ,GAAGb;IACJ,MAAM,EAAEc,cAAc,EAAE,GAAGd;IAE3B,qBACE,KAACZ;QACE,GAAGyB,SAAS;QACbZ,KAAKA;QACLC,MAAMA;QACNa,MAAK;QACLR,SAASA;QACTC,YAAYA;QACZC,SAASA;QACTC,WAAWA;QACXC,cAAcA;QACdR,WAAWd,MAAM;YACfe;YACAC;YACAC;YACAQ;YACAX;QACF;kBAECS;;AAGP,GACA"}

package/dist/sheet/_sheet.scss

@@ -0,0 +1,205 @@
+@use "sass:map";
+@use "../utils";
+@use "../box-shadows";
+@use "../media-queries/media-queries";
+@use "../transition/transition";
+
+$disable-everything: false !default;
+$disable-position-left: false !default;
+$disable-position-right: false !default;
+$disable-position-bottom: false !default;
+$disable-position-top: false !default;
+
+$elevation: 2 !default;
+$raised-elevation: 16 !default;
+
+$enter-duration: transition.$enter-duration !default;
+$enter-timing-function: transition.$deceleration-timing-function !default;
+$leave-duration: transition.$leave-duration !default;
+$leave-timing-function: transition.$acceleration-timing-function !default;
+
+$z-index: 5 !default;
+$raised-z-index: utils.$temporary-element-z-index !default;
+
+$static-width: 16rem !default;
+$touch-margin: 3.5rem !default;
+$touch-width: calc(100vw - #{$touch-margin}) !default;
+
+$max-height: 100% !default;
+$touch-max-height: calc(100% - #{$touch-margin}) !default;
+$recommended-min-height: 3.5rem !default;
+$recommended-max-height: 50% !default;
+
+$var-lookup: (
+  height: (
+    var: --rmd-sheet-height,
+    value: null,
+  ),
+  width: (
+    var: --rmd-sheet-width,
+    value: null,
+  ),
+  max-height: (
+    var: --rmd-sheet-max-height,
+    value: null,
+  ),
+  touch-width: (
+    var: --rmd-sheet-touch-width,
+    value: $touch-width,
+  ),
+  touch-max-height: (
+    var: --rmd-sheet-touch-max-height,
+    value: $touch-max-height,
+  ),
+  static-width: (
+    var: --rmd-sheet-static-width,
+    value: $static-width,
+  ),
+  transform-offscreen: (
+    var: --rmd-sheet-transform-offscreen,
+    value: null,
+  ),
+  z-index: (
+    var: --rmd-sheet-z-index,
+    value: $z-index,
+  ),
+);
+
+@function get-var($name, $fallback: null) {
+  $found: utils.validate($var-lookup, $name, "sheet var");
+  $var: map.get($found, var);
+  $value: if($fallback, $fallback, map.get($found, value));
+
+  @if $value {
+    @return var(#{$var}, #{$value});
+  }
+
+  @return var(#{$var});
+}
+
+@mixin set-var($name, $value) {
+  $var: map.get(utils.validate($var-lookup, $name, "sheet var"), var);
+
+  #{$var}: #{$value};
+}
+
+@mixin use-var($property, $name: $property, $fallback: null) {
+  #{$property}: get-var($name, $fallback);
+}
+
+@mixin styles {
+  @if not $disable-everything {
+    .rmd-sheet {
+      @include box-shadows.box-shadow($elevation);
+      @include use-var(height);
+      @include use-var(max-height);
+      @include use-var(width);
+      @include use-var(z-index);
+
+      overflow: auto;
+      position: fixed;
+
+      @if not $disable-position-left or not $disable-position-right {
+        &--horizontal {
+          bottom: 0;
+          top: 0;
+        }
+      }
+
+      @if not $disable-position-bottom or not $disable-position-top {
+        &--vertical {
+          left: 0;
+          right: 0;
+        }
+      }
+
+      &--raised {
+        @include set-var(z-index, $raised-z-index);
+        @include box-shadows.box-shadow($raised-elevation);
+      }
+
+      @if not $disable-position-left {
+        &--left {
+          @include utils.auto-rtl(left, 0) {
+            @include set-var(transform-offscreen, translate3d(100%, 0, 0));
+          }
+          @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
+        }
+      }
+
+      @if not $disable-position-right {
+        &--right {
+          @include utils.auto-rtl(right, 0) {
+            @include set-var(transform-offscreen, translate3d(-100%, 0, 0));
+          }
+          @include set-var(transform-offscreen, translate3d(100%, 0, 0));
+        }
+      }
+
+      @if not $disable-position-bottom {
+        &--bottom {
+          @include set-var(transform-offscreen, translate3d(0, 100%, 0));
+
+          bottom: 0;
+        }
+      }
+
+      @if not $disable-position-top {
+        &--top {
+          @include set-var(transform-offscreen, translate3d(0, -100%, 0));
+
+          top: 0;
+        }
+      }
+
+      &--touch-width {
+        @include set-var(width, get-var(touch-width));
+      }
+
+      &--static-width {
+        @include set-var(width, get-var(static-width));
+      }
+
+      &--media-width {
+        @include media-queries.tablet-media {
+          @include set-var(width, get-var(static-width));
+        }
+
+        @include set-var(width, get-var(touch-width));
+      }
+
+      &--viewport-height {
+        @include set-var(max-height, $max-height);
+      }
+
+      &--touchable-height {
+        @include set-var(max-height, get-var(touch-max-height));
+      }
+
+      &--recommended-height {
+        max-height: $recommended-max-height;
+        min-height: $recommended-min-height;
+      }
+
+      &--offscreen {
+        @include use-var(transform, transform-offscreen);
+      }
+
+      &--hidden {
+        box-shadow: none;
+      }
+
+      &--visible {
+        transform: translate3d(0, 0, 0);
+      }
+
+      &--enter {
+        transition: transform $enter-duration $enter-timing-function;
+      }
+
+      &--exit {
+        transition: transform $leave-duration $leave-timing-function;
+      }
+    }
+  }
+}

package/dist/sheet/styles.d.ts

@@ -0,0 +1,58 @@
+/**
+ * The location that the sheet should be located within the viewport.
+ */
+export type SheetPosition = "top" | "right" | "bottom" | "left";
+/**
+ * The size to use for sheets that have been positioned left or right. The
+ * default supported values are:
+ *
+ * - none - the size is based on content, but is still limited to the viewport
+ *   width so that the horizontal scrolling will not occur within the page. No
+ *   limits added to sizing.
+ * - touch - the `min-width` is set to be the entire viewport width minus a
+ *   touchable area and `max-width` is set to `20rem` and is normally
+ *   recommended for mobile devices.
+ * - static - the width is set to a static `16rem` and generally used for
+ *   landscape tablets and desktops.
+ * - media - automatically switches between "touch" and "static" based on css
+ *   media queries. (this is the default)
+ */
+export type SheetHorizontalSize = "none" | "media" | "touch" | "static";
+/**
+ * The size to use for sheets that have been positioned top or bottom. The
+ * supported sizes are:
+ *
+ * - none - the size is based on content and is limited to the viewport
+ *   height.
+ * - touch - the size is based on content and is limited to the viewport
+ *   height with a touchable area to close the sheet.
+ * - recommended - the material design recommended sizing that forces a
+ *   max-height of 50vh and min-height of 3.5rem
+ */
+export type SheetVerticalSize = "none" | "touch" | "recommended";
+/** @remarks \@since 6.0.0 */
+export interface BaseSheetClassNameOptions {
+    className?: string;
+    /**
+     * @defaultValue `"left"`
+     */
+    position?: SheetPosition;
+    /**
+     * @defaultValue `"media"`
+     */
+    horizontalSize?: SheetHorizontalSize;
+    /**
+     * @defaultValue `"recommended"`
+     */
+    verticalSize?: SheetVerticalSize;
+}
+/**
+ * @remarks \@since 6.0.0
+ * @internal
+ */
+export interface SheetClassNameOptions extends BaseSheetClassNameOptions {
+    offscreen?: boolean;
+    disableOverlay?: boolean;
+}
+/** @remarks \@since 6.0.0 */
+export declare function sheet(options: SheetClassNameOptions): string;

package/dist/sheet/styles.js

@@ -0,0 +1,22 @@
+import { cnb } from "cnbuilder";
+import { bem } from "../utils/bem.js";
+const styles = bem("rmd-sheet");
+/** @remarks \@since 6.0.0 */ export function sheet(options) {
+    const { position = "left", horizontalSize = "media", verticalSize = "recommended", offscreen = false, disableOverlay, className } = options;
+    const horizontal = position === "left" || position === "right";
+    return cnb(styles({
+        horizontal,
+        vertical: !horizontal,
+        raised: !disableOverlay,
+        offscreen,
+        [position]: true,
+        "media-width": horizontal && horizontalSize === "media",
+        "touch-width": horizontal && horizontalSize === "touch",
+        "static-width": horizontal && horizontalSize === "static",
+        "viewport-height": !horizontal && verticalSize === "none",
+        "touchable-height": !horizontal && verticalSize === "touch",
+        "recommended-height": !horizontal && verticalSize === "recommended"
+    }), className);
+}
+
+//# sourceMappingURL=styles.js.map

package/dist/sheet/styles.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/sheet/styles.ts"],"sourcesContent":["import { cnb } from \"cnbuilder\";\nimport { bem } from \"../utils/bem.js\";\n\nconst styles = bem(\"rmd-sheet\");\n\n/**\n * The location that the sheet should be located within the viewport.\n */\nexport type SheetPosition = \"top\" | \"right\" | \"bottom\" | \"left\";\n\n/**\n * The size to use for sheets that have been positioned left or right. The\n * default supported values are:\n *\n * - none - the size is based on content, but is still limited to the viewport\n *   width so that the horizontal scrolling will not occur within the page. No\n *   limits added to sizing.\n * - touch - the `min-width` is set to be the entire viewport width minus a\n *   touchable area and `max-width` is set to `20rem` and is normally\n *   recommended for mobile devices.\n * - static - the width is set to a static `16rem` and generally used for\n *   landscape tablets and desktops.\n * - media - automatically switches between \"touch\" and \"static\" based on css\n *   media queries. (this is the default)\n */\nexport type SheetHorizontalSize = \"none\" | \"media\" | \"touch\" | \"static\";\n\n/**\n * The size to use for sheets that have been positioned top or bottom. The\n * supported sizes are:\n *\n * - none - the size is based on content and is limited to the viewport\n *   height.\n * - touch - the size is based on content and is limited to the viewport\n *   height with a touchable area to close the sheet.\n * - recommended - the material design recommended sizing that forces a\n *   max-height of 50vh and min-height of 3.5rem\n */\nexport type SheetVerticalSize = \"none\" | \"touch\" | \"recommended\";\n\n/** @remarks \\@since 6.0.0 */\nexport interface BaseSheetClassNameOptions {\n  className?: string;\n\n  /**\n   * @defaultValue `\"left\"`\n   */\n  position?: SheetPosition;\n\n  /**\n   * @defaultValue `\"media\"`\n   */\n  horizontalSize?: SheetHorizontalSize;\n\n  /**\n   * @defaultValue `\"recommended\"`\n   */\n  verticalSize?: SheetVerticalSize;\n}\n\n/**\n * @remarks \\@since 6.0.0\n * @internal\n */\nexport interface SheetClassNameOptions extends BaseSheetClassNameOptions {\n  offscreen?: boolean;\n  disableOverlay?: boolean;\n}\n\n/** @remarks \\@since 6.0.0 */\nexport function sheet(options: SheetClassNameOptions): string {\n  const {\n    position = \"left\",\n    horizontalSize = \"media\",\n    verticalSize = \"recommended\",\n    offscreen = false,\n    disableOverlay,\n    className,\n  } = options;\n  const horizontal = position === \"left\" || position === \"right\";\n\n  return cnb(\n    styles({\n      horizontal,\n      vertical: !horizontal,\n      raised: !disableOverlay,\n      offscreen,\n      [position]: true,\n      \"media-width\": horizontal && horizontalSize === \"media\",\n      \"touch-width\": horizontal && horizontalSize === \"touch\",\n      \"static-width\": horizontal && horizontalSize === \"static\",\n      \"viewport-height\": !horizontal && verticalSize === \"none\",\n      \"touchable-height\": !horizontal && verticalSize === \"touch\",\n      \"recommended-height\": !horizontal && verticalSize === \"recommended\",\n    }),\n    className\n  );\n}\n"],"names":["cnb","bem","styles","sheet","options","position","horizontalSize","verticalSize","offscreen","disableOverlay","className","horizontal","vertical","raised"],"mappings":"AAAA,SAASA,GAAG,QAAQ,YAAY;AAChC,SAASC,GAAG,QAAQ,kBAAkB;AAEtC,MAAMC,SAASD,IAAI;AAkEnB,2BAA2B,GAC3B,OAAO,SAASE,MAAMC,OAA8B;IAClD,MAAM,EACJC,WAAW,MAAM,EACjBC,iBAAiB,OAAO,EACxBC,eAAe,aAAa,EAC5BC,YAAY,KAAK,EACjBC,cAAc,EACdC,SAAS,EACV,GAAGN;IACJ,MAAMO,aAAaN,aAAa,UAAUA,aAAa;IAEvD,OAAOL,IACLE,OAAO;QACLS;QACAC,UAAU,CAACD;QACXE,QAAQ,CAACJ;QACTD;QACA,CAACH,SAAS,EAAE;QACZ,eAAeM,cAAcL,mBAAmB;QAChD,eAAeK,cAAcL,mBAAmB;QAChD,gBAAgBK,cAAcL,mBAAmB;QACjD,mBAAmB,CAACK,cAAcJ,iBAAiB;QACnD,oBAAoB,CAACI,cAAcJ,iBAAiB;QACpD,sBAAsB,CAACI,cAAcJ,iBAAiB;IACxD,IACAG;AAEJ"}