@graupl/navigation-shelf 1.0.0-beta.16

package/src/js/navigation-shelf/generator.js

@@ -0,0 +1,38 @@
+import NavigationShelf from "./NavigationShelf.js";
+import once from "@drupal/once";
+
+const generate = (
+  options = {},
+  context = document,
+  navigationShelfSelector = ".navigation-shelf"
+) => {
+  once(
+    "graupl-navigation-shelf-generator",
+    navigationShelfSelector,
+    context
+  ).forEach((shelfElement) => {
+    const navigationShelfOptions = shelfElement.dataset
+      .grauplNavigationShelfOptions
+      ? JSON.parse(
+          shelfElement.dataset.grauplNavigationShelfOptions.replace(/'/g, '"')
+        ) || {}
+      : {};
+
+    new NavigationShelf({
+      shelfElement,
+      controllerElement:
+        context.querySelector(".navigation-shelf-toggle") || null,
+      lockControllerElement:
+        context.querySelector(".navigation-shelf-lock-toggle") || null,
+      hoverControllerElement:
+        context.querySelector(".navigation-shelf-hover-toggle") || null,
+      sideControllerElement:
+        context.querySelector(".navigation-shelf-side-toggle") || null,
+      initialize: true,
+      ...options,
+      ...navigationShelfOptions,
+    });
+  });
+};
+
+export default generate;

package/src/js/navigation-shelf/index.js

@@ -0,0 +1,5 @@
+import generate from "./generator.js";
+
+document.addEventListener("DOMContentLoaded", () => {
+  generate();
+});

package/src/js/validate.js

@@ -0,0 +1,46 @@
+/**
+ * Check to see if the provided values are valid side types.
+ *
+ * Available types are: `"left"` and `"right"`.
+ *
+ * The values must be provided inside of an object
+ * so the variable name can be retrieved in case of errors.
+ *
+ * Will return `{ status: true }` if the check is successful.
+ *
+ * @param  {Object<string>}          values - The value(s) to check.
+ * @return {Object<boolean, string>}        - The result of the check.
+ */
+export function isValidSideType(values) {
+  try {
+    if (typeof values !== "object") {
+      const type = typeof values;
+
+      throw new TypeError(
+        `Values given to isValidSideType() must be inside of an object. "${type}" given.`
+      );
+    }
+
+    const validTypes = ["left", "right"];
+
+    for (const key in values) {
+      if (!validTypes.includes(values[key])) {
+        throw new TypeError(
+          `${key} must be one of the following values: ${validTypes.join(
+            ", "
+          )}. "${values[key]}" given.`
+        );
+      }
+    }
+
+    return {
+      status: true,
+      error: null,
+    };
+  } catch (error) {
+    return {
+      status: false,
+      error,
+    };
+  }
+}

package/src/scss/_index.scss

@@ -0,0 +1,2 @@
+@use "component";
+@use "utilities";

package/src/scss/component/_index.scss

@@ -0,0 +1 @@
+@use "navigation-shelf";

package/src/scss/component/navigation-shelf/_defaults.scss

@@ -0,0 +1,85 @@
+// @graupl/navigation-shelf navigation shelf component default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
+
+@use "pkg:@graupl/core/src/defaults" as root-defaults;
+@use "sass:map";
+
+// Navigation shelf selectors.
+$selector-base: root-defaults.$component-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$navigation-shelf-selector-base: $selector-base !default;
+$navigation-shelf-selector: "navigation-shelf" !default;
+$navigation-shelf-header-selector-base: $selector-base !default;
+$navigation-shelf-header-selector: "navigation-shelf-header" !default;
+$navigation-shelf-footer-selector-base: $selector-base !default;
+$navigation-shelf-footer-selector: "navigation-shelf-footer" !default;
+$navigation-shelf-content-selector-base: $selector-base !default;
+$navigation-shelf-content-selector: "navigation-shelf-content" !default;
+$navigation-shelf-side-toggle-selector-base: $selector-base !default;
+$navigation-shelf-side-toggle-selector: "navigation-shelf-side-toggle" !default;
+$navigation-shelf-lock-toggle-selector-base: $selector-base !default;
+$navigation-shelf-lock-toggle-selector: "navigation-shelf-lock-toggle" !default;
+$navigation-shelf-hover-toggle-selector-base: $selector-base !default;
+$navigation-shelf-hover-toggle-selector: "navigation-shelf-hover-toggle" !default;
+$navigation-shelf-side-selector-base: $modifier-selector-base !default;
+$navigation-shelf-left-side-selector: "left" !default;
+$navigation-shelf-right-side-selector: "right" !default;
+$navigation-shelf-side-selector-suffix: "-side" !default;
+$navigation-shelf-locked-selector-base: $modifier-selector-base !default;
+$navigation-shelf-locked-selector: "locked" !default;
+$navigation-shelf-unlocked-selector-base: $modifier-selector-base !default;
+$navigation-shelf-unlocked-selector: "unlocked" !default;
+$navigation-shelf-hoverable-selector-base: $modifier-selector-base !default;
+$navigation-shelf-hoverable-selector: "hoverable" !default;
+$navigation-shelf-not-hoverable-selector-base: $modifier-selector-base !default;
+$navigation-shelf-not-hoverable-selector: "not-hoverable" !default;
+$navigation-shelf-open-selector-base: $modifier-selector-base !default;
+$navigation-shelf-open-selector: "show" !default;
+$navigation-shelf-closed-selector-base: $modifier-selector-base !default;
+$navigation-shelf-closed-selector: "hide" !default;
+$navigation-shelf-transitioning-selector-base: $modifier-selector-base !default;
+$navigation-shelf-transitioning-selector: "transitioning" !default;
+
+// Navigation shelf properties.
+$navigation-shelf-side-toggle-pseudo-element: "before" !default;
+$navigation-shelf-lock-toggle-pseudo-element: "before" !default;
+$navigation-shelf-hover-toggle-pseudo-element: "before" !default;
+$navigation-shelf-z-index: 2 !default;
+$-navigation-shelf-icons: (
+  // "Highlight Mouse Cursor" icon from fonts.google.com/icons
+  "enable-hover":
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M516-82q-9 2-18 2h-18q-83 0-156-31.5T197-197q-54-54-85.5-127T80-480q0-83 31.5-156T197-763q54-54 127-85.5T480-880q83 0 156 31.5T763-763q54 54 85.5 127T880-480v18q0 9-2 18l-78-24v-12q0-134-93-227t-227-93q-134 0-227 93t-93 227q0 134 93 227t227 93h12l24 78Zm305 22L650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"),
+  // "Left Click" icon from fonts.google.com/icons
+  "disable-hover":
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M468-240q-96-5-162-74t-66-166q0-100 70-170t170-70q97 0 166 66t74 162l-84-25q-13-54-56-88.5T480-640q-66 0-113 47t-47 113q0 57 34.5 100t88.5 56l25 84ZM821-60 650-231 600-80 480-480l400 120-151 50 171 171-79 79Z'/%3E%3C/svg%3E"),
+  // "Dock To Left" icon from fonts.google.com/icons
+  "shelf-left":
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"),
+  // "Left Panel Open" icon from fonts.google.com/icons
+  "lock-left":
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M460-320v-320L300-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"),
+  // "Left Panel Close" icon from fonts.google.com/icons
+  "unlock-left":
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M300-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"),
+  // "Dock To Right" icon from fonts.google.com/icons
+  "shelf-right":
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm440-80h120v-560H640v560Zm-80 0v-560H200v560h360Zm80 0h120-120Z'/%3E%3C/svg%3E"),
+  // "Right Panel Open" icon from fonts.google.com/icons
+  "lock-right":
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M500-640v320l160-160-160-160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E"),
+  // "Right Panel Close" icon from fonts.google.com/icons
+  "unlock-right":
+    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' height='24px' viewBox='0 -960 960 960' width='24px' fill='%235f6368'%3E%3Cpath d='M660-320v-320L500-480l160 160ZM200-120q-33 0-56.5-23.5T120-200v-560q0-33 23.5-56.5T200-840h560q33 0 56.5 23.5T840-760v560q0 33-23.5 56.5T760-120H200Zm120-80v-560H200v560h120Zm80 0h360v-560H400v560Zm-80 0H200h120Z'/%3E%3C/svg%3E")
+);
+$navigation-shelf-icons: () !default;
+$navigation-shelf-icons: map.merge(
+  $-navigation-shelf-icons,
+  $navigation-shelf-icons
+);
+$navigation-shelf-min-width: 3.5rem !default;
+$navigation-shelf-max-width: 36ch !default;

package/src/scss/component/navigation-shelf/_index.scss

@@ -0,0 +1,228 @@
+@use "pkg:@graupl/icons/src/component/icon/mixins" as icon-mixins;
+@use "pkg:@graupl/core/src/defaults" as root-defaults;
+@use "pkg:@graupl/core/src/mixins/animation";
+@use "defaults";
+@use "variables" as *;
+@use "sass:map";
+@warn "The `@graupl/navigation-shelf` component is under active development and is highly experimental. It is not recommended for production use at this time.";
+
+// `.navigation-shelf`
+#{defaults.$navigation-shelf-selector-base}#{defaults.$navigation-shelf-selector} {
+  --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-width};
+
+  display: $navigation-shelf-display;
+  position: fixed;
+  z-index: $navigation-shelf-z-index;
+  top: 0;
+  bottom: 0;
+  grid-template-columns: [header-start content-start footer-start] $navigation-shelf-width [footer-end content-end header-end];
+  grid-template-rows: [header-start] auto [header-end content-start] 1fr [content-end footer-start] auto [footer-end];
+  width: $navigation-shelf-width;
+  overflow-x: hidden;
+  transform: $navigation-shelf-transform;
+  transition: $navigation-shelf-transition;
+  border-width: $navigation-shelf-border-width;
+  border-style: $navigation-shelf-border-style;
+  border-color: $navigation-shelf-border-color;
+  opacity: $navigation-shelf-opacity;
+  background: $navigation-shelf-background;
+  color: $navigation-shelf-color;
+  isolation: isolate;
+
+  @starting-style {
+    display: $navigation-shelf-starting-display;
+    width: $navigation-shelf-starting-width;
+    transform: $navigation-shelf-starting-transform;
+    opacity: $navigation-shelf-starting-opacity;
+  }
+
+  @include animation.off {
+    --#{root-defaults.$prefix}navigation-shelf-transition: #{$navigation-shelf-transition-reduced-motion};
+  }
+
+  // `&,`
+  // `&.left-side`
+  &,
+  &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-left-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {
+    --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(
+      --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,
+      #{map.get(defaults.$navigation-shelf-icons, "shelf-right")}
+    );
+
+    right: auto;
+    left: 0;
+
+    // `&.locked`
+    &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {
+      --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(
+        --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-right-content,
+        #{map.get(defaults.$navigation-shelf-icons, "unlock-right")}
+      );
+    }
+
+    // `&.unlocked`
+    &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {
+      --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(
+        --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-right-content,
+        #{map.get(defaults.$navigation-shelf-icons, "lock-right")}
+      );
+    }
+  }
+
+  // `&.right-side`
+  &#{defaults.$navigation-shelf-side-selector-base}#{defaults.$navigation-shelf-right-side-selector}#{defaults.$navigation-shelf-side-selector-suffix} {
+    --#{root-defaults.$prefix}navigation-shelf-side-toggle-content: var(
+      --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-left-content,
+      #{map.get(defaults.$navigation-shelf-icons, "shelf-left")}
+    );
+
+    right: 0;
+    left: auto;
+
+    // `&.locked`
+    &#{defaults.$navigation-shelf-locked-selector-base}#{defaults.$navigation-shelf-locked-selector} {
+      --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(
+        --#{root-defaults.$prefix}navigation-shelf-lock-toggle-unlock-left-content,
+        #{map.get(defaults.$navigation-shelf-icons, "unlock-left")}
+      );
+    }
+
+    // `&.unlocked`
+    &#{defaults.$navigation-shelf-unlocked-selector-base}#{defaults.$navigation-shelf-unlocked-selector} {
+      --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content: var(
+        --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-left-content,
+        #{map.get(defaults.$navigation-shelf-icons, "lock-left")}
+      );
+    }
+  }
+
+  // `&.hoverable`
+  &#{defaults.$navigation-shelf-hoverable-selector-base}#{defaults.$navigation-shelf-hoverable-selector} {
+    --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(
+      --#{root-defaults.$prefix}navigation-shelf-hover-toggle-disable-hover-content,
+      #{map.get(defaults.$navigation-shelf-icons, "disable-hover")}
+    );
+  }
+
+  // `&.not-hoverable`
+  &#{defaults.$navigation-shelf-not-hoverable-selector-base}#{defaults.$navigation-shelf-not-hoverable-selector} {
+    --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content: var(
+      --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,
+      #{map.get(defaults.$navigation-shelf-icons, "enable-hover")}
+    );
+  }
+
+  // `&.hide`
+  &#{defaults.$navigation-shelf-closed-selector-base}#{defaults.$navigation-shelf-closed-selector} {
+    --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-closed-width};
+
+    display: $navigation-shelf-closed-display;
+    grid-template-columns: [header-start content-start footer-start] $navigation-shelf-closed-width [footer-end content-end header-end];
+    width: $navigation-shelf-closed-width;
+    transform: $navigation-shelf-closed-transform;
+    opacity: $navigation-shelf-closed-opacity;
+  }
+
+  // `&.transitioning`
+  &#{defaults.$navigation-shelf-transitioning-selector-base}#{defaults.$navigation-shelf-transitioning-selector} {
+    --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-transitioning-width};
+
+    display: $navigation-shelf-transitioning-display;
+    grid-template-columns: [header-start content-start footer-start] $navigation-shelf-transitioning-width [footer-end content-end header-end];
+    width: $navigation-shelf-transitioning-width;
+    transform: $navigation-shelf-transitioning-transform;
+    opacity: $navigation-shelf-transitioning-opacity;
+  }
+
+  // `&.show`
+  &#{defaults.$navigation-shelf-open-selector-base}#{defaults.$navigation-shelf-open-selector} {
+    --#{root-defaults.$prefix}navigation-shelf-current-width: #{$navigation-shelf-open-width};
+
+    display: $navigation-shelf-open-display;
+    grid-template-columns: [header-start content-start footer-start] $navigation-shelf-max-width [footer-end content-end header-end];
+    width: $navigation-shelf-open-width;
+    transform: $navigation-shelf-open-transform;
+    opacity: $navigation-shelf-open-opacity;
+  }
+
+  // `.navigation-shelf-header`
+  #{defaults.$navigation-shelf-header-selector-base}#{defaults.$navigation-shelf-header-selector} {
+    grid-area: header;
+  }
+
+  // `.navigation-shelf-content`
+  #{defaults.$navigation-shelf-content-selector-base}#{defaults.$navigation-shelf-content-selector} {
+    grid-area: content;
+  }
+
+  // `.navigation-shelf-footer`
+  #{defaults.$navigation-shelf-footer-selector-base}#{defaults.$navigation-shelf-footer-selector} {
+    grid-area: footer;
+  }
+
+  // `.navigation-shelf-side-toggle`
+  #{defaults.$navigation-shelf-side-toggle-selector-base}#{defaults.$navigation-shelf-side-toggle-selector} {
+    --#{root-defaults.$prefix}icon: var(
+      --#{root-defaults.$prefix}navigation-shelf-side-toggle-content,
+      var(
+        --#{root-defaults.$prefix}navigation-shelf-side-toggle-shelf-right-content,
+        #{map.get(defaults.$navigation-shelf-icons, "shelf-right")}
+      )
+    );
+    --#{root-defaults.$prefix}icon-spacer: var(
+      --#{root-defaults.$prefix}navigation-shelf-side-toggle-spacer,
+      0
+    );
+
+    @include icon-mixins.apply-component(
+      #{defaults.$navigation-shelf-side-toggle-pseudo-element}
+    );
+    @include icon-mixins.apply-theme(
+      #{defaults.$navigation-shelf-side-toggle-pseudo-element}
+    );
+  }
+
+  // `.navigation-shelf-lock-toggle`
+  #{defaults.$navigation-shelf-lock-toggle-selector-base}#{defaults.$navigation-shelf-lock-toggle-selector} {
+    --#{root-defaults.$prefix}icon: var(
+      --#{root-defaults.$prefix}navigation-shelf-lock-toggle-content,
+      var(
+        --#{root-defaults.$prefix}navigation-shelf-lock-toggle-lock-content,
+        #{map.get(defaults.$navigation-shelf-icons, "lock-right")}
+      )
+    );
+    --#{root-defaults.$prefix}icon-spacer: var(
+      --#{root-defaults.$prefix}navigation-shelf-lock-toggle-spacer,
+      0
+    );
+
+    @include icon-mixins.apply-component(
+      #{defaults.$navigation-shelf-lock-toggle-pseudo-element}
+    );
+    @include icon-mixins.apply-theme(
+      #{defaults.$navigation-shelf-lock-toggle-pseudo-element}
+    );
+  }
+
+  // `.navigation-shelf-hover-toggle`
+  #{defaults.$navigation-shelf-hover-toggle-selector-base}#{defaults.$navigation-shelf-hover-toggle-selector} {
+    --#{root-defaults.$prefix}icon: var(
+      --#{root-defaults.$prefix}navigation-shelf-hover-toggle-content,
+      var(
+        --#{root-defaults.$prefix}navigation-shelf-hover-toggle-enable-hover-content,
+        #{map.get(defaults.$navigation-shelf-icons, "enable-hover")}
+      )
+    );
+    --#{root-defaults.$prefix}icon-spacer: var(
+      --#{root-defaults.$prefix}navigation-shelf-hover-toggle-spacer,
+      0
+    );
+
+    @include icon-mixins.apply-component(
+      #{defaults.$navigation-shelf-hover-toggle-pseudo-element}
+    );
+    @include icon-mixins.apply-theme(
+      #{defaults.$navigation-shelf-hover-toggle-pseudo-element}
+    );
+  }
+}

package/src/scss/component/navigation-shelf/_variables.scss

@@ -0,0 +1,196 @@
+// @graupl/navigation-shelf navigation shelf component variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "pkg:@graupl/core/src/variables" as root-variables;
+@use "pkg:@graupl/core/src/defaults" as root-defaults;
+@use "pkg:@graupl/core/src/theme/color/variables" as color;
+@use "sass:map";
+
+// Navigation shelf properties.
+$navigation-shelf-background: var(
+  --#{root-defaults.$prefix}navigation-shelf-background,
+  #{color.$background}
+);
+$navigation-shelf-color: var(
+  --#{root-defaults.$prefix}navigation-shelf-color,
+  #{color.$color}
+);
+$navigation-shelf-z-index: var(
+  --#{root-defaults.$prefix}navigation-shelf-z-index,
+  #{defaults.$navigation-shelf-z-index}
+);
+
+// Border properties.
+$navigation-shelf-border-top-style: var(
+  --#{root-defaults.$prefix}navigation-shelf-border-top-style,
+  #{root-variables.$border-top-style}
+);
+$navigation-shelf-border-right-style: var(
+  --#{root-defaults.$prefix}navigation-shelf-border-right-style,
+  #{root-variables.$border-right-style}
+);
+$navigation-shelf-border-bottom-style: var(
+  --#{root-defaults.$prefix}navigation-shelf-border-bottom-style,
+  #{root-variables.$border-bottom-style}
+);
+$navigation-shelf-border-left-style: var(
+  --#{root-defaults.$prefix}navigation-shelf-border-left-style,
+  #{root-variables.$border-left-style}
+);
+$navigation-shelf-border-style: var(
+  --#{root-defaults.$prefix}navigation-shelf-border-style,
+  #{$navigation-shelf-border-top-style} #{$navigation-shelf-border-right-style}
+    #{$navigation-shelf-border-bottom-style}
+    #{$navigation-shelf-border-left-style}
+);
+$navigation-shelf-border-top-width: var(
+  --#{root-defaults.$prefix}navigation-shelf-border-top-width,
+  0
+);
+$navigation-shelf-border-right-width: var(
+  --#{root-defaults.$prefix}navigation-shelf-border-right-width,
+  0
+);
+$navigation-shelf-border-bottom-width: var(
+  --#{root-defaults.$prefix}navigation-shelf-border-bottom-width,
+  0
+);
+$navigation-shelf-border-left-width: var(
+  --#{root-defaults.$prefix}navigation-shelf-border-left-width,
+  0
+);
+$navigation-shelf-border-width: var(
+  --#{root-defaults.$prefix}navigation-shelf-border-width,
+  #{$navigation-shelf-border-top-width} #{$navigation-shelf-border-right-width}
+    #{$navigation-shelf-border-bottom-width}
+    #{$navigation-shelf-border-left-width}
+);
+$navigation-shelf-border-color: var(
+  --#{root-defaults.$prefix}navigation-shelf-border-color,
+  #{$navigation-shelf-color}
+);
+
+// Transform properties.
+$navigation-shelf-closed-transform: var(
+  --#{root-defaults.$prefix}navigation-shelf-closed-transform,
+  null
+);
+$navigation-shelf-open-transform: var(
+  --#{root-defaults.$prefix}navigation-shelf-open-transform,
+  null
+);
+$navigation-shelf-transitioning-transform: var(
+  --#{root-defaults.$prefix}navigation-shelf-transitioning-transform,
+  null
+);
+$navigation-shelf-transform: var(
+  --#{root-defaults.$prefix}navigation-shelf-transform,
+  #{$navigation-shelf-closed-transform}
+);
+$navigation-shelf-starting-transform: var(
+  --#{root-defaults.$prefix}navigation-shelf-starting-transform,
+  #{$navigation-shelf-transform}
+);
+
+// Width properties.
+$navigation-shelf-min-width: var(
+  --#{root-defaults.$prefix}navigation-shelf-min-width,
+  #{defaults.$navigation-shelf-min-width}
+);
+$navigation-shelf-max-width: var(
+  --#{root-defaults.$prefix}navigation-shelf-max-width,
+  #{defaults.$navigation-shelf-max-width}
+);
+$navigation-shelf-closed-width: var(
+  --#{root-defaults.$prefix}navigation-shelf-closed-width,
+  #{$navigation-shelf-min-width}
+);
+$navigation-shelf-open-width: var(
+  --#{root-defaults.$prefix}navigation-shelf-open-width,
+  #{$navigation-shelf-max-width}
+);
+$navigation-shelf-transitioning-width: var(
+  --#{root-defaults.$prefix}navigation-shelf-transitioning-width,
+  #{$navigation-shelf-min-width}
+);
+$navigation-shelf-width: var(
+  --#{root-defaults.$prefix}navigation-shelf-width,
+  #{$navigation-shelf-closed-width}
+);
+$navigation-shelf-starting-width: var(
+  --#{root-defaults.$prefix}navigation-shelf-starting-width,
+  #{$navigation-shelf-width}
+);
+$navigation-shelf-current-width: var(
+  --#{root-defaults.$prefix}navigation-shelf-current-width,
+  #{$navigation-shelf-width}
+);
+
+// Display properties.
+$navigation-shelf-closed-display: var(
+  --#{root-defaults.$prefix}navigation-shelf-closed-display,
+  grid
+);
+$navigation-shelf-open-display: var(
+  --#{root-defaults.$prefix}navigation-shelf-open-display,
+  grid
+);
+$navigation-shelf-transitioning-display: var(
+  --#{root-defaults.$prefix}navigation-shelf-transitioning-display,
+  grid
+);
+$navigation-shelf-display: var(
+  --#{root-defaults.$prefix}navigation-shelf-display,
+  #{$navigation-shelf-closed-display}
+);
+$navigation-shelf-starting-display: var(
+  --#{root-defaults.$prefix}navigation-shelf-starting-display,
+  #{$navigation-shelf-display}
+);
+
+// Opacity properties.
+$navigation-shelf-closed-opacity: var(
+  --#{root-defaults.$prefix}navigation-shelf-closed-opacity,
+  1
+);
+$navigation-shelf-open-opacity: var(
+  --#{root-defaults.$prefix}navigation-shelf-open-opacity,
+  1
+);
+$navigation-shelf-transitioning-opacity: var(
+  --#{root-defaults.$prefix}navigation-shelf-transitioning-opacity,
+  1
+);
+$navigation-shelf-opacity: var(
+  --#{root-defaults.$prefix}navigation-shelf-opacity,
+  #{$navigation-shelf-closed-opacity}
+);
+$navigation-shelf-starting-opacity: var(
+  --#{root-defaults.$prefix}navigation-shelf-starting-opacity,
+  #{$navigation-shelf-opacity}
+);
+
+// Transition properties.
+$navigation-shelf-transition-duration: var(
+  --#{root-defaults.$prefix}navigation-shelf-transition-duration,
+  #{map.get(root-variables.$transition-durations, fast)}
+);
+$navigation-shelf-transition: var(
+  --#{root-defaults.$prefix}navigation-shelf-transition,
+  width #{$navigation-shelf-transition-duration}
+    #{root-variables.$transition-timing-function},
+  transform #{$navigation-shelf-transition-duration}
+    #{root-variables.$transition-timing-function},
+  opacity #{$navigation-shelf-transition-duration}
+    #{root-variables.$transition-timing-function},
+  display #{$navigation-shelf-transition-duration} allow-discrete
+);
+$navigation-shelf-transition-reduced-motion: var(
+  --#{root-defaults.$prefix}navigation-shelf-transition-reduced-motion,
+  opacity #{$navigation-shelf-transition-duration}
+    #{root-variables.$transition-timing-function},
+  display #{$navigation-shelf-transition-duration} allow-discrete
+);

package/src/scss/utilities/_index.scss

@@ -0,0 +1,2 @@
+@use "shelf-aware";
+@use "width";

package/src/scss/utilities/shelf-aware/_defaults.scss

@@ -0,0 +1,31 @@
+// @graupl/navigation-shelf shelf aware utilities default values.
+//
+// Generally, these should not be used directly when styling components unless a static value is needed.
+// They are mainly used to provide class selectors, fallbacks for custom properties, or loop values.
+//
+// They should not be used to define direct property values (i.e. font-size, color, etc.).
+// Those should be defined as custom properties in the `_variables.scss` file.
+
+@use "pkg:@graupl/core/src/defaults" as root-defaults;
+@use "sass:map";
+
+// Utility modifiers.
+$selector-base: root-defaults.$utility-selector-base !default;
+$use-important: root-defaults.$use-important !default;
+$generate-base-utilities: root-defaults.$generate-base-utilities !default;
+$screen-aware: false !default;
+$theme-aware: false !default;
+$state-aware: false !default;
+$container-aware: false !default;
+$screen-aware-separator: root-defaults.$utility-screen-aware-separator !default;
+$theme-aware-separator: root-defaults.$utility-theme-aware-separator !default;
+$state-aware-separator: root-defaults.$utility-state-aware-separator !default;
+$container-aware-separator: root-defaults.$utility-container-aware-separator !default;
+$screen-aware-selector-prefix: root-defaults.$utility-screen-aware-selector-prefix !default;
+$theme-aware-selector-prefix: root-defaults.$utility-theme-aware-selector-prefix !default;
+$state-aware-selector-prefix: root-defaults.$utility-state-aware-selector-prefix !default;
+$container-aware-selector-prefix: root-defaults.$utility-container-aware-selector-prefix !default;
+
+// Shelf aware properties.
+
+$shelf-aware-selector: "shelf-aware" !default;