@graupl/graupl 1.0.0-alpha.13 → 1.0.0-alpha.14

package/src/scss/component/carousel/_index.scss

@@ -0,0 +1,182 @@
+// @graupl/graupl carousel component styles.
+
+@use "defaults";
+@use "variables" as *;
+@use "../../defaults" as root-defaults;
+@use "../../mixins/layer" as *;
+@use "../../base/button/variables" as button-variables;
+@use "../../base/button/mixins" as button-mixins;
+
+#{defaults.$carousel-selector} {
+  @include layer(component) {
+    display: grid;
+    position: relative;
+    grid-template-columns: [slide-start controls-start] auto [tabs-start] $carousel-tabs-width [tabs-end] auto [controls-end slide-end];
+    grid-template-rows: [slide-start controls-start] $carousel-controls-height [controls-end] $carousel-slide-height [tabs-start] $carousel-tabs-height [tabs-end slide-end];
+    isolation: isolate;
+    padding: $carousel-padding;
+
+    &[data-graupl-action="next"] {
+      #{defaults.$carousel-item-selector} {
+        &#{defaults.$carousel-previous-item-selector} {
+          transform: translateX(calc(-1 * $carousel-item-max-width));
+
+          &#{defaults.$carousel-active-item-selector} {
+            transform: none;
+          }
+        }
+
+        &#{defaults.$carousel-next-item-selector} {
+          transform: translateX($carousel-item-max-width);
+
+          &#{defaults.$carousel-active-item-selector} {
+            transform: none;
+          }
+        }
+      }
+    }
+
+    &[data-graupl-action="previous"] {
+      #{defaults.$carousel-item-selector} {
+        &#{defaults.$carousel-previous-item-selector} {
+          transform: translateX($carousel-item-max-width);
+
+          &#{defaults.$carousel-active-item-selector} {
+            transform: none;
+          }
+        }
+
+        &#{defaults.$carousel-next-item-selector} {
+          transform: translateX(calc(-1 * $carousel-item-max-width));
+
+          &#{defaults.$carousel-active-item-selector} {
+            transform: none;
+          }
+        }
+      }
+    }
+  }
+}
+
+#{defaults.$carousel-control-container-selector} {
+  @include layer(component) {
+    display: grid;
+    z-index: 1;
+    grid-area: controls;
+    grid-template-columns:
+      [autoplay-start] $carousel-control-width [autoplay-end]
+      1fr [previous-start] $carousel-control-width [previous-end next-start]
+      $carousel-control-width [next-end];
+    grid-template-rows: [autoplay-start next-start previous-start] $carousel-control-height [previous-end next-end autoplay-end];
+  }
+}
+
+#{defaults.$carousel-control-selector} {
+  @include button-mixins.apply-button;
+
+  @include layer(component) {
+    &#{defaults.$carousel-autoplay-selector} {
+      grid-area: autoplay;
+    }
+
+    &#{defaults.$carousel-play-selector}::before {
+      content: $carousel-play-content;
+      display: inline-block;
+    }
+
+    &#{defaults.$carousel-pause-selector}::before {
+      content: $carousel-pause-content;
+      display: inline-block;
+    }
+
+    &#{defaults.$carousel-next-selector} {
+      grid-area: next;
+
+      &::before {
+        content: $carousel-next-content;
+        display: inline-block;
+      }
+    }
+
+    &#{defaults.$carousel-previous-selector} {
+      grid-area: previous;
+
+      &::before {
+        content: $carousel-previous-content;
+        display: inline-block;
+      }
+    }
+  }
+}
+
+#{defaults.$carousel-item-container-selector} {
+  @include layer(component) {
+    display: grid;
+    z-index: 0;
+    grid-area: slide;
+    grid-template-areas: "items";
+    padding: $carousel-item-container-padding;
+    overflow-x: hidden;
+    isolation: isolate;
+  }
+}
+
+#{defaults.$carousel-item-selector} {
+  @include layer(component) {
+    z-index: -1;
+    grid-area: items;
+    max-width: $carousel-item-max-width;
+    opacity: 0;
+
+    &#{defaults.$carousel-active-item-selector} {
+      z-index: 1;
+      transform: none;
+      transition: transform
+        var(--#{root-defaults.$prefix}-carousel-transition-duration, 500ms)
+        ease-in-out;
+      opacity: 1;
+    }
+
+    &#{defaults.$carousel-previous-item-selector} {
+      z-index: 1;
+      transform: translateX(calc(-1 * $carousel-item-max-width));
+      transition: transform
+        var(--#{root-defaults.$prefix}-carousel-transition-duration, 500ms)
+        ease-in-out;
+      opacity: 1;
+
+      &#{defaults.$carousel-active-item-selector} {
+        transform: none;
+      }
+    }
+
+    &#{defaults.$carousel-next-item-selector} {
+      z-index: 1;
+      transform: translateX($carousel-item-max-width);
+      opacity: 1;
+
+      &#{defaults.$carousel-active-item-selector} {
+        transform: none;
+      }
+    }
+  }
+}
+
+#{defaults.$carousel-tab-container-selector} {
+  @include layer(component) {
+    display: flex;
+    z-index: 1;
+    grid-area: tabs;
+    justify-content: center;
+    padding: $carousel-tab-container-padding;
+    gap: $carousel-tab-container-gap;
+  }
+}
+
+#{defaults.$carousel-tab-selector} {
+  @include button-mixins.apply-button;
+
+  @include layer(component) {
+    --#{root-defaults.$prefix}-button-border-radius: 50%;
+  }
+}

package/src/scss/component/carousel/_variables.scss

@@ -0,0 +1,104 @@
+// @graupl/graupl carousel component variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@use "defaults";
+@use "../../defaults" as root-defaults;
+@use "../../variables" as root-variables;
+@use "../../base/button/variables" as button-variables;
+@use "sass:map";
+
+// Carousel grid area properties.
+$carousel-controls-height: var(
+  --#{root-defaults.$prefix}-carousel-controls-height,
+  #{defaults.$carousel-controls-height}
+);
+$carousel-tabs-width: var(
+  --#{root-defaults.$prefix}-carousel-tabs-width,
+  #{defaults.$carousel-tabs-width}
+);
+$carousel-tabs-height: var(
+  --#{root-defaults.$prefix}-carousel-tabs-height,
+  #{defaults.$carousel-tabs-height}
+);
+$carousel-slide-height: var(
+  --#{root-defaults.$prefix}-carousel-slide-height,
+  #{defaults.$carousel-slide-height}
+);
+
+// Carousel properties.
+$carousel-padding-x: var(
+  --#{root-defaults.$prefix}-carousel-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$carousel-padding-y: var(
+  --#{root-defaults.$prefix}-carousel-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$carousel-padding: var(
+  --#{root-defaults.$prefix}-carousel-padding,
+  #{$carousel-padding-y} #{$carousel-padding-x}
+);
+
+// Carousel slide properties.
+$carousel-item-max-width: var(
+  --#{root-defaults.$prefix}-carousel-item-max-width,
+  #{defaults.$carousel-item-max-width}
+);
+$carousel-item-container-padding-x: var(
+  --#{root-defaults.$prefix}-carousel-item-container-padding-x,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$carousel-item-container-padding-y: var(
+  --#{root-defaults.$prefix}-carousel-item-container-padding-y,
+  #{map.get(root-variables.$spacers, 0)}
+);
+$carousel-item-container-padding: var(
+  --#{root-defaults.$prefix}-carousel-item-container-padding,
+  #{$carousel-item-container-padding-y} #{$carousel-item-container-padding-x}
+);
+
+// Carousel control properties.
+$carousel-play-content: var(
+  --#{root-defaults.$prefix}-carousel-play-content,
+  #{defaults.$carousel-play-content}
+);
+$carousel-pause-content: var(
+  --#{root-defaults.$prefix}-carousel-pause-content,
+  #{defaults.$carousel-pause-content}
+);
+$carousel-next-content: var(
+  --#{root-defaults.$prefix}-carousel-next-content,
+  #{defaults.$carousel-next-content}
+);
+$carousel-previous-content: var(
+  --#{root-defaults.$prefix}-carousel-previous-content,
+  #{defaults.$carousel-previous-content}
+);
+$carousel-control-width: var(
+  --#{root-defaults.$prefix}-carousel-control-width,
+  #{defaults.$carousel-control-width}
+);
+$carousel-control-height: var(
+  --#{root-defaults.$prefix}-carousel-control-height,
+  #{defaults.$carousel-control-height}
+);
+
+// Carousel tab properties.
+$carousel-tab-container-padding-x: var(
+  --#{root-defaults.$prefix}-carousel-tab-container-padding-x,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$carousel-tab-container-padding-y: var(
+  --#{root-defaults.$prefix}-carousel-tab-container-padding-y,
+  #{map.get(root-variables.$spacers, 3)}
+);
+$carousel-tab-container-padding: var(
+  --#{root-defaults.$prefix}-carousel-tab-container-padding,
+  #{$carousel-tab-container-padding-y} #{$carousel-tab-container-padding-x}
+);
+$carousel-tab-container-gap: var(
+  --#{root-defaults.$prefix}-carousel-tab-container-gap,
+  #{map.get(root-variables.$spacers, 3)}
+);

package/src/scss/component/input-group/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl input group component styles.
+// @graupl/graupl input group component styles.
 
 @use "defaults";
 @use "../../base/form/defaults" as form-defaults;

package/src/scss/component/menu/_defaults.scss

@@ -26,7 +26,8 @@ $submenu-show-display: $menu-show-display !default;
 $submenu-hide-display: $menu-hide-display !default;
 
 // Menu item properties.
-$menu-item-min-width: max-content !default;
+$menu-item-min-width: min-content !default;
+$menu-item-max-width: 100% !default;
 
 // Submenu properties.
 $submenu-position: absolute !default;

package/src/scss/component/menu/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl menu component styles.
+// @graupl/graupl menu component styles.
 
 @use "defaults";
 @use "variables" as *;
@@ -87,6 +87,7 @@
     align-items: center;
     justify-content: center;
     min-width: $menu-item-min-width;
+    max-width: $menu-item-max-width;
     padding: $menu-item-padding;
   }
 

package/src/scss/component/menu/_variables.scss

@@ -195,6 +195,10 @@ $menu-item-min-width: var(
   --#{root-defaults.$prefix}-menu-item-min-width,
   #{defaults.$menu-item-min-width}
 );
+$menu-item-max-width: var(
+  --#{root-defaults.$prefix}-menu-item-max-width,
+  #{defaults.$menu-item-max-width}
+);
 $menu-item-padding-x: var(
   --#{root-defaults.$prefix}-menu-item-padding-x,
   #{map.get(root-variables.$spacers, 0)}

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

@@ -1,4 +1,4 @@
-// @gruapl/graupl navigation component styles.
+// @graupl/graupl navigation component styles.
 
 @use "defaults";
 @use "variables" as *;

package/src/scss/layout/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl layout styles.
+// @graupl/graupl layout styles.
 
 @forward "container";
 @forward "columns";

package/src/scss/layout/columns/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl columns layout styles.
+// @graupl/graupl columns layout styles.
 
 @use "variables" as *;
 @use "defaults";

package/src/scss/layout/container/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl container layout styles.
+// @graupl/graupl container layout styles.
 
 @use "defaults";
 @use "variables" as *;

package/src/scss/layout/flex-columns/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl flex columns layout styles.
+// @graupl/graupl flex columns layout styles.
 
 @use "variables" as *;
 @use "defaults";

package/src/scss/mixins/_layer.scss

@@ -6,9 +6,7 @@
 @use "../defaults" as root-defaults;
 
 @mixin layer($layer) {
-  @at-root {
-    @layer #{root-defaults.$prefix}.#{$layer} {
-      @content;
-    }
+  @layer #{root-defaults.$prefix}.#{$layer} {
+    @content;
   }
 }

package/src/scss/mixins/_visually-hidden.scss

@@ -0,0 +1,20 @@
+// @graupl/graupl visually hidden mixins.
+
+@mixin apply() {
+  position: absolute !important;
+  width: 1px !important;
+  height: 1px !important;
+  margin: -1px !important;
+  padding: 0 !important;
+  overflow: hidden !important;
+  clip: rect(0, 0, 0, 0) !important;
+  border: 0 !important;
+  white-space: nowrap !important;
+  clip-path: inset(50%) !important;
+}
+
+@mixin focusable() {
+  &:not(:focus, :focus-within) {
+    @include apply;
+  }
+}

package/src/scss/state/_index.scss

@@ -1,3 +1,3 @@
-// @gruapl/graupl state styles.
+// @graupl/graupl state styles.
 
 @forward "focus";

package/src/scss/state/focus/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl focus state styles.
+// @graupl/graupl focus state styles.
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;

package/src/scss/theme/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl theme styles.
+// @graupl/graupl theme styles.
 
 @forward "color";
 @forward "typography";

package/src/scss/theme/color/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl color theme styles.
+// @graupl/graupl color theme styles.
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;

package/src/scss/theme/typography/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl typography theme styles.
+// @graupl/graupl typography theme styles.
 
 @use "variables" as *;
 @use "../../mixins/layer" as *;

package/src/scss/utilities/_index.scss

@@ -1,9 +1,10 @@
-// @gruapl/graupl utilities styles.
+// @graupl/graupl utilities styles.
 
 @forward "alignment";
 @forward "color";
 @forward "display";
 @forward "flex";
+@forward "height";
 @forward "inset";
 @forward "justification";
 @forward "list";
@@ -13,3 +14,4 @@
 @forward "spacing";
 @forward "typography";
 @forward "visibility";
+@forward "width";

package/src/scss/utilities/alignment/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl alignment utilities styles.
+// @graupl/graupl alignment utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/color/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl color utilities styles.
+// @graupl/graupl color utilities styles.
 
 @use "variables" as *;
 @use "defaults";

package/src/scss/utilities/display/_defaults.scss

@@ -27,3 +27,5 @@ $display-properties: map.merge(
   $base-display-properties,
   $custom-display-properties
 );
+$visually-hidden-selector: ".visually-hidden" !default;
+$visually-hidden-focusable-selector: ".visually-hidden-focusable" !default;

package/src/scss/utilities/display/_index.scss

@@ -1,9 +1,10 @@
-// @gruapl/graupl display utilities styles.
+// @graupl/graupl display utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;
 @use "../../mixins/layer" as *;
 @use "../../functions/important";
+@use "../../mixins/visually-hidden";
 
 @include layer(utilities) {
   // For each display property, create a utility class.
@@ -12,4 +13,13 @@
       display: important.insert($property);
     }
   }
+
+  // Visually hidden utility classes.
+  #{$visually-hidden-selector} {
+    @include visually-hidden.apply;
+  }
+
+  #{$visually-hidden-focusable-selector} {
+    @include visually-hidden.focusable;
+  }
 }

package/src/scss/utilities/flex/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl flex utilities styles.
+// @graupl/graupl flex utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/height/_defaults.scss

@@ -0,0 +1,38 @@
+// @graupl/graupl height 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 "sass:map";
+
+// Height properties.
+$height-class-prefix: "h-" !default;
+$max-height-class-prefix: "max-h-" !default;
+$min-height-class-prefix: "min-h-" !default;
+
+// Height values.
+$base-height-values: (
+  auto: auto,
+  fit-content: fit-content,
+  max-content: max-content,
+  min-content: min-content,
+  stretch: stretch,
+  0: 0,
+  full: 100%,
+  quarter: 25%,
+  half: 50%,
+  three-quarters: 75%,
+  third: calc(100% / 3),
+  two-thirds: calc(100% / 1.5),
+  half-screen: 50vh,
+  third-screen: calc(100vh / 3),
+  two-thirds-screen: calc(100vh / 1.5),
+  quarter-screen: 25vh,
+  three-quarters-screen: 75vh,
+  full-screen: 100vh,
+);
+$custom-height-values: () !default;
+$height-values: map.merge($base-height-values, $custom-height-values);

package/src/scss/utilities/height/_index.scss

@@ -0,0 +1,23 @@
+// @graupl/graupl height utilities styles.
+
+@use "variables" as *;
+@use "defaults";
+@use "../../mixins/layer" as *;
+@use "../../functions/important";
+
+@include layer(utilities) {
+  // For each height property, create a utility class.
+  @each $height, $value in defaults.$height-values {
+    .#{defaults.$height-class-prefix}#{$height} {
+      height: important.insert($value);
+    }
+
+    .#{defaults.$max-height-class-prefix}#{$height} {
+      max-height: important.insert($value);
+    }
+
+    .#{defaults.$min-height-class-prefix}#{$height} {
+      min-height: important.insert($value);
+    }
+  }
+}

package/src/scss/utilities/height/_variables.scss

@@ -0,0 +1,6 @@
+// @graupl/graupl height utilities variables.
+//
+// These values are to be used to directly style components and provide a
+// cleaner way to reference custom properties.
+
+@forward "defaults";

package/src/scss/utilities/inset/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl inset utilities styles.
+// @graupl/graupl inset utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/justification/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl justification utilities styles.
+// @graupl/graupl justification utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/list/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl list utilities styles.
+// @graupl/graupl list utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/order/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl order utilities styles.
+// @graupl/graupl order utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/position/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl position utilities styles.
+// @graupl/graupl position utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/ratio/_defaults.scss

@@ -11,6 +11,7 @@
 // Ratio utilities.
 $ratio-selector: ".ratio" !default;
 $ratio-variant-selector-prefix: "." !default;
+$force-ratio-selector: ".force-ratio" !default;
 $base-ratios: (
   "one-by-one": 100%,
   "two-by-one": 50%,

package/src/scss/utilities/ratio/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl ratio utilities styles.
+// @graupl/graupl ratio utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;
@@ -16,6 +16,14 @@
       display: block;
       padding-top: $ratio;
     }
+
+    #{defaults.$force-ratio-selector} {
+      position: absolute;
+      inset: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+    }
   }
 
   @each $ratio-selector, $value in defaults.$ratios {

package/src/scss/utilities/spacing/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl spacing utilities styles.
+// @graupl/graupl spacing utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;

package/src/scss/utilities/typography/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl typography utilities styles.
+// @graupl/graupl typography utilities styles.
 
 @use "variables" as *;
 @use "defaults";

package/src/scss/utilities/visibility/_index.scss

@@ -1,4 +1,4 @@
-// @gruapl/graupl visibility utilities styles.
+// @graupl/graupl visibility utilities styles.
 
 @use "variables" as *;
 @use "defaults" as defaults;