@graupl/core 1.0.0-beta.22 → 1.0.0-beta.24

package/src/scss/component/disclosure/_variables.scss

@@ -3,6 +3,52 @@
 // These values are to be used to directly style components and provide a
 // cleaner way to reference custom properties.
 
+// Custom property defaults:
+// | Custom property                                        | Default                                                                                                                                                                                                                                 |
+// | ------------------------------------------------------ | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+// | --graupl-disclosure-color                              | var(--graupl-color)                                                                                                                                                                                                                     |
+// | --graupl-disclosure-background                         | var(--graupl-background)                                                                                                                                                                                                                |
+// | --graupl-disclosure-content-border-color               | var(--graupl-border-color)                                                                                                                                                                                                              |
+// | --graupl-disclosure-content-padding-x                  | var(--graupl-spacer-5)                                                                                                                                                                                                                  |
+// | --graupl-disclosure-content-padding-y                  | var(--graupl-spacer-5)                                                                                                                                                                                                                  |
+// | --graupl-disclosure-content-padding                    | var(--graupl-disclosure-content-padding-y) var(--graupl-disclosure-content-padding-x)                                                                                                                                                   |
+// | --graupl-disclosure-show-display                       | flex                                                                                                                                                                                                                                    |
+// | --graupl-disclosure-hide-display                       | flex                                                                                                                                                                                                                                    |
+// | --graupl-disclosure-transitioning-display              | flex                                                                                                                                                                                                                |
+// | --graupl-disclosure-display                            | flex                                                                                                                                                                                                                                    |
+// | --graupl-disclosure-show-block-size                    | 100%                                                                                                                                                                                                                                    |
+// | --graupl-disclosure-hide-block-size                    | 0                                                                                                                                                                                                                                       |
+// | --graupl-disclosure-transitioning-block-size           | 0                                                                                                                                                                                                             |
+// | --graupl-disclosure-block-size                         | 0                                                                                                                                                                                                                                       |
+// | --graupl-disclosure-show-opacity                       | 1                                                                                                                                                                                                                                       |
+// | --graupl-disclosure-hide-opacity                       | 0                                                                                                                                                                                                                                       |
+// | --graupl-disclosure-transitioning-opacity              | 0                                                                                                                                                                                                                |
+// | --graupl-disclosure-opacity                            | 0                                                                                                                                                                                                                                       |
+// | --graupl-disclosure-transition-duration                | var(--graupl-transition-duration-fast)                                                                                                                                                                                                  |
+// | --graupl-disclosure-transition-timing-function         | var(--graupl-transition-timing-function)                                                                                                                                                                                                |
+// | --graupl-disclosure-transition                         | opacity var(--graupl-disclosure-transition-duration) var(--graupl-disclosure-transition-timing-function), block-size var(--graupl-disclosure-transition-duration) var(--graupl-disclosure-transition-timing-function)                   |
+// | --graupl-disclosure-transition-reduced-motion          | opacity var(--graupl-disclosure-transition-duration) var(--graupl-disclosure-transition-timing-function)                                                                                                                                |
+// | --graupl-disclosure-content-border-top-width           | var(--graupl-border-top-width)                                                                                                                                                                                                          |
+// | --graupl-disclosure-content-border-right-width         | var(--graupl-border-right-width)                                                                                                                                                                                                        |
+// | --graupl-disclosure-content-border-bottom-width        | var(--graupl-border-bottom-width)                                                                                                                                                                                                       |
+// | --graupl-disclosure-content-border-left-width          | var(--graupl-border-left-width)                                                                                                                                                                                                         |
+// | --graupl-disclosure-content-border-width               | var(--graupl-disclosure-content-border-top-width) var(--graupl-disclosure-content-border-right-width) var(--graupl-disclosure-content-border-bottom-width) var(--graupl-disclosure-content-border-left-width)                           |
+// | --graupl-disclosure-content-border-top-style           | var(--graupl-border-top-style)                                                                                                                                                                                                          |
+// | --graupl-disclosure-content-border-right-style         | var(--graupl-border-right-style)                                                                                                                                                                                                        |
+// | --graupl-disclosure-content-border-bottom-style        | var(--graupl-border-bottom-style)                                                                                                                                                                                                       |
+// | --graupl-disclosure-content-border-left-style          | var(--graupl-border-left-style)                                                                                                                                                                                                         |
+// | --graupl-disclosure-content-border-style               | var(--graupl-disclosure-content-border-top-style) var(--graupl-disclosure-content-border-right-style) var(--graupl-disclosure-content-border-bottom-style) var(--graupl-disclosure-content-border-left-style)                           |
+// | --graupl-disclosure-content-border-top-left-radius     | var(--graupl-border-top-left-radius)                                                                                                                                                                                                    |
+// | --graupl-disclosure-content-border-top-right-radius    | var(--graupl-border-top-right-radius)                                                                                                                                                                                                   |
+// | --graupl-disclosure-content-border-bottom-right-radius | var(--graupl-border-bottom-right-radius)                                                                                                                                                                                                |
+// | --graupl-disclosure-content-border-bottom-left-radius  | var(--graupl-border-bottom-left-radius)                                                                                                                                                                                                 |
+// | --graupl-disclosure-content-border-radius              | var(--graupl-disclosure-content-border-top-left-radius) var(--graupl-disclosure-content-border-top-right-radius) var(--graupl-disclosure-content-border-bottom-right-radius) var(--graupl-disclosure-content-border-bottom-left-radius) |
+// | --graupl-disclosure-toggle-transform                   | rotate(0deg)                                                                                                                                                                                                                            |
+// | --graupl-disclosure-toggle-open-transform              | rotate(-180deg)                                                                                                                                                                                                                         |
+// | --graupl-disclosure-toggle-content                     | "'↓'"                                                                                                                                                                                                                                   |
+// | --graupl-disclosure-toggle-transition                  | transform var(--graupl-transition-duration-fast) var(--graupl-transition-timing-function)                                                                                                                                               |
+// | --graupl-disclosure-toggle-transition-reduced-motion   | none                                                                                                                                                                                                                                    |
+
 @use "defaults";
 @use "../../defaults" as root-defaults;
 @use "../../variables" as root-variables;
@@ -10,93 +56,132 @@
 @use "sass:map";
 
 // Color properties.
-$disclosure-color: var(--#{root-defaults}disclosure-colour, #{color.$color});
+// --graupl-disclosure-color
+$disclosure-color: var(
+  --#{root-defaults.$prefix}disclosure-color,
+  #{color.$color}
+);
+
+// --graupl-disclosure-background
 $disclosure-background: var(
-  --#{root-defaults}disclosure-background,
+  --#{root-defaults.$prefix}disclosure-background,
   #{color.$background}
 );
+
+// --graupl-disclosure-content-border-color
 $disclosure-content-border-color: var(
   --#{root-defaults.$prefix}disclosure-content-border-color,
   #{color.$border-color}
 );
 
 // Spacing properties.
+// --graupl-disclosure-content-padding-x
 $disclosure-content-padding-x: var(
   --#{root-defaults.$prefix}disclosure-content-padding-x,
   #{map.get(root-variables.$spacers, 5)}
 );
+
+// --graupl-disclosure-content-padding-y
 $disclosure-content-padding-y: var(
   --#{root-defaults.$prefix}disclosure-content-padding-y,
   #{map.get(root-variables.$spacers, 5)}
 );
+
+// --graupl-disclosure-content-padding
 $disclosure-content-padding: var(
   --#{root-defaults.$prefix}disclosure-content-padding,
   #{$disclosure-content-padding-y} #{$disclosure-content-padding-x}
 );
 
 // Display properties.
+// --graupl-disclosure-show-display
 $disclosure-show-display: var(
   --#{root-defaults.$prefix}disclosure-show-display,
   #{defaults.$disclosure-show-display}
 );
+
+// --graupl-disclosure-hide-display
 $disclosure-hide-display: var(
   --#{root-defaults.$prefix}disclosure-hide-display,
   #{defaults.$disclosure-hide-display}
 );
+
+// --graupl-disclosure-transitioning-display
 $disclosure-transitioning-display: var(
   --#{root-defaults.$prefix}disclosure-transitioning-display,
   #{defaults.$disclosure-transitioning-display}
 );
+
+// --graupl-disclosure-display
 $disclosure-display: var(
   --#{root-defaults.$prefix}disclosure-display,
   #{defaults.$disclosure-hide-display}
 );
 
 // Block-size properties.
+// --graupl-disclosure-show-block-size
 $disclosure-show-block-size: var(
   --#{root-defaults.$prefix}disclosure-show-block-size,
   #{defaults.$disclosure-show-block-size}
 );
+
+// --graupl-disclosure-hide-block-size
 $disclosure-hide-block-size: var(
   --#{root-defaults.$prefix}disclosure-hide-block-size,
   #{defaults.$disclosure-hide-block-size}
 );
+
+// --graupl-disclosure-transitioning-block-size
 $disclosure-transitioning-block-size: var(
   --#{root-defaults.$prefix}disclosure-transitioning-block-size,
   #{defaults.$disclosure-transitioning-block-size}
 );
+
+// --graupl-disclosure-block-size
 $disclosure-block-size: var(
   --#{root-defaults.$prefix}disclosure-block-size,
   #{defaults.$disclosure-hide-block-size}
 );
 
 // Opacity properties.
+// --graupl-disclosure-show-opacity
 $disclosure-show-opacity: var(
   --#{root-defaults.$prefix}disclosure-show-opacity,
   #{defaults.$disclosure-show-opacity}
 );
+
+// --graupl-disclosure-hide-opacity
 $disclosure-hide-opacity: var(
   --#{root-defaults.$prefix}disclosure-hide-opacity,
   #{defaults.$disclosure-hide-opacity}
 );
+
+// --graupl-disclosure-transitioning-opacity
 $disclosure-transitioning-opacity: var(
   --#{root-defaults.$prefix}disclosure-transitioning-opacity,
   #{defaults.$disclosure-transitioning-opacity}
 );
+
+// --graupl-disclosure-opacity
 $disclosure-opacity: var(
   --#{root-defaults.$prefix}disclosure-opacity,
   #{$disclosure-hide-opacity}
 );
 
 // Transition properties.
+// --graupl-disclosure-transition-duration
 $disclosure-transition-duration: var(
   --#{root-defaults.$prefix}disclosure-transition-duration,
   #{map.get(root-variables.$transition-durations, fast)}
 );
+
+// --graupl-disclosure-transition-timing-function
 $disclosure-transition-timing-function: var(
   --#{root-defaults.$prefix}disclosure-transition-timing-function,
   #{root-variables.$transition-timing-function}
 );
+
+// --graupl-disclosure-transition
 $disclosure-transition: var(
   --#{root-defaults.$prefix}disclosure-transition,
   opacity #{$disclosure-transition-duration}
@@ -104,6 +189,8 @@ $disclosure-transition: var(
   block-size #{$disclosure-transition-duration}
     #{$disclosure-transition-timing-function}
 );
+
+// --graupl-disclosure-transition-reduced-motion
 $disclosure-transition-reduced-motion: var(
   --#{root-defaults.$prefix}disclosure-transition-reduced-motion,
   opacity #{$disclosure-transition-duration}
@@ -111,22 +198,31 @@ $disclosure-transition-reduced-motion: var(
 );
 
 // Border properties.
+// --graupl-disclosure-content-border-top-width
 $disclosure-content-border-top-width: var(
   --#{root-defaults.$prefix}disclosure-content-border-top-width,
   #{root-variables.$border-top-width}
 );
+
+// --graupl-disclosure-content-border-right-width
 $disclosure-content-border-right-width: var(
   --#{root-defaults.$prefix}disclosure-content-border-right-width,
   #{root-variables.$border-right-width}
 );
+
+// --graupl-disclosure-content-border-bottom-width
 $disclosure-content-border-bottom-width: var(
   --#{root-defaults.$prefix}disclosure-content-border-bottom-width,
   #{root-variables.$border-bottom-width}
 );
+
+// --graupl-disclosure-content-border-left-width
 $disclosure-content-border-left-width: var(
   --#{root-defaults.$prefix}disclosure-content-border-left-width,
   #{root-variables.$border-left-width}
 );
+
+// --graupl-disclosure-content-border-width
 $disclosure-content-border-width: var(
   --#{root-defaults.$prefix}disclosure-content-border-width,
   #{$disclosure-content-border-top-width}
@@ -134,22 +230,32 @@ $disclosure-content-border-width: var(
     #{$disclosure-content-border-bottom-width}
     #{$disclosure-content-border-left-width}
 );
+
+// --graupl-disclosure-content-border-top-style
 $disclosure-content-border-top-style: var(
   --#{root-defaults.$prefix}disclosure-content-border-top-style,
   #{root-variables.$border-top-style}
 );
+
+// --graupl-disclosure-content-border-right-style
 $disclosure-content-border-right-style: var(
   --#{root-defaults.$prefix}disclosure-content-border-right-style,
   #{root-variables.$border-right-style}
 );
+
+// --graupl-disclosure-content-border-bottom-style
 $disclosure-content-border-bottom-style: var(
   --#{root-defaults.$prefix}disclosure-content-border-bottom-style,
   #{root-variables.$border-bottom-style}
 );
+
+// --graupl-disclosure-content-border-left-style
 $disclosure-content-border-left-style: var(
   --#{root-defaults.$prefix}disclosure-content-border-left-style,
   #{root-variables.$border-left-style}
 );
+
+// --graupl-disclosure-content-border-style
 $disclosure-content-border-style: var(
   --#{root-defaults.$prefix}disclosure-content-border-style,
   #{$disclosure-content-border-top-style}
@@ -157,22 +263,32 @@ $disclosure-content-border-style: var(
     #{$disclosure-content-border-bottom-style}
     #{$disclosure-content-border-left-style}
 );
+
+// --graupl-disclosure-content-border-top-left-radius
 $disclosure-content-border-top-left-radius: var(
   --#{root-defaults.$prefix}disclosure-content-border-top-left-radius,
   #{root-variables.$border-top-left-radius}
 );
+
+// --graupl-disclosure-content-border-top-right-radius
 $disclosure-content-border-top-right-radius: var(
   --#{root-defaults.$prefix}disclosure-content-border-top-right-radius,
   #{root-variables.$border-top-right-radius}
 );
+
+// --graupl-disclosure-content-border-bottom-right-radius
 $disclosure-content-border-bottom-right-radius: var(
   --#{root-defaults.$prefix}disclosure-content-border-bottom-right-radius,
   #{root-variables.$border-bottom-right-radius}
 );
+
+// --graupl-disclosure-content-border-bottom-left-radius
 $disclosure-content-border-bottom-left-radius: var(
   --#{root-defaults.$prefix}disclosure-content-border-bottom-left-radius,
   #{root-variables.$border-bottom-left-radius}
 );
+
+// --graupl-disclosure-content-border-radius
 $disclosure-content-border-radius: var(
   --#{root-defaults.$prefix}disclosure-content-border-radius,
   #{$disclosure-content-border-top-left-radius}
@@ -182,23 +298,32 @@ $disclosure-content-border-radius: var(
 );
 
 // Disclosure toggle properties.
+// --graupl-disclosure-toggle-transform
 $disclosure-toggle-transform: var(
   --#{root-defaults.$prefix}disclosure-toggle-transform,
   #{defaults.$disclosure-toggle-transform}
 );
+
+// --graupl-disclosure-toggle-open-transform
 $disclosure-toggle-open-transform: var(
   --#{root-defaults.$prefix}disclosure-toggle-open-transform,
   #{defaults.$disclosure-toggle-open-transform}
 );
+
+// --graupl-disclosure-toggle-content
 $disclosure-toggle-content: var(
   --#{root-defaults.$prefix}disclosure-toggle-content,
   #{defaults.$disclosure-toggle-content}
 );
+
+// --graupl-disclosure-toggle-transition
 $disclosure-toggle-transition: var(
   --#{root-defaults.$prefix}disclosure-toggle-transition,
   transform #{map.get(root-variables.$transition-durations, fast)}
     #{root-variables.$transition-timing-function}
 );
+
+// --graupl-disclosure-toggle-transition-reduced-motion
 $disclosure-toggle-transition-reduced-motion: var(
   --#{root-defaults.$prefix}disclosure-toggle-transition-reduced-motion,
   none

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

@@ -6,10 +6,17 @@
 // 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 "../../defaults" as root-defaults;
+
 // Input group selectors.
-$input-group-selector: ".input-group" !default;
-$input-group-inline-selector: ".inline" !default;
-$input-group-help-text-selector: ".help-text" !default;
+$selector-base: root-defaults.$component-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$input-group-selector-base: $selector-base !default;
+$input-group-selector: "input-group" !default;
+$input-group-inline-selector-base: $modifier-selector-base !default;
+$input-group-inline-selector: "inline" !default;
+$input-group-help-text-selector-base: $selector-base !default;
+$input-group-help-text-selector: "help-text" !default;
 
 // Grid names.
 $input-group-grid-label-name: label !default;

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

@@ -1,4 +1,66 @@
 // @graupl/core input group component styles.
+//
+// This module provides grid-based alignment for labels, inputs, and help text.
+//
+// The following selectors are generated by default:
+// - `.input-group`: The input group container.
+// - `.help-text`: Inline help text element.
+// - `.inline`: Modifier to lay out label/input/help in a single row (when allowed).
+//
+// The following custom properties can be used to customize the input group component:
+// | Property                                            | Description                                   | Default Value                                                            |
+// | ---                                                 | ---                                           | ---                                                                      |
+// | `--graupl-input-group-grid-template-areas`          | Grid template areas for the default layout.   | `"label" "input" "help"`                                                 |
+// | `--graupl-input-group-grid-template-columns`        | Grid template columns for the default layout. | `100%`                                                                   |
+// | `--graupl-input-group-grid-template-rows`           | Grid template rows for the default layout.    | `auto auto auto`                                                         |
+// | `--graupl-input-group-row-gap`                      | Row gap between label/input/help.             | `var(--graupl-spacer-2)`                                                 |
+// | `--graupl-input-group-column-gap`                   | Column gap between label/input/help.          | `var(--graupl-spacer-3)`                                                 |
+// | `--graupl-input-group-gap`                          | Shorthand gap (row/column) for the group.     | `var(--graupl-input-group-row-gap) var(--graupl-input-group-column-gap)` |
+// | `--graupl-input-group-inline-grid-template-areas`   | Grid template areas for the inline layout.    | `"label input" "- help"`                                                 |
+// | `--graupl-input-group-inline-grid-template-columns` | Grid template columns for the inline layout.  | `auto 1fr`                                                               |
+// | `--graupl-input-group-inline-grid-template-rows`    | Grid template rows for the inline layout.     | `auto auto`                                                              |
+// | `--graupl-input-group-label-grid-area`              | Grid area name used by the label.             | `label`                                                                  |
+// | `--graupl-input-group-input-grid-area`              | Grid area name used by form controls.         | `input`                                                                  |
+// | `--graupl-input-group-help-grid-area`               | Grid area name used by help text.             | `help`                                                                   |
+//
+// The following sass variables can be used to customize the generation of the input group component:
+// | Variable                                    | Description                                  | Default Value    |
+// | ---                                         | ---                                          | ---              |
+// | `$selector-base`                            | Selector base for the component.             | `"."`            |
+// | `$modifier-selector-base`                   | Selector base for component modifiers.       | `"."`            |
+// | `$input-group-selector-base`                | Selector base for the input group container. | `$selector-base` |
+// | `$input-group-selector`                     | Selector for the input group container.      | `"input-group"`  |
+// | `$input-group-inline-selector-base`         | Selector base for the inline modifier.       | `"."`            |
+// | `$input-group-inline-selector`              | Selector for the inline modifier.            | `"inline"`       |
+// | `$input-group-help-text-selector-base`      | Selector base for the help text.             | `$selector-base` |
+// | `$input-group-help-text-selector`           | Selector for the help text.                  | `"help-text"`    |
+// | `$input-group-grid-label-name`              | Grid area name for labels.                   | `label`          |
+// | `$input-group-grid-input-name`              | Grid area name for inputs.                   | `input`          |
+// | `$input-group-grid-help-name`               | Grid area name for help text.                | `help`           |
+// | `$input-group-grid-template-columns`        | Default grid columns.                        | `100%`           |
+// | `$input-group-grid-template-rows`           | Default grid rows.                           | `auto auto auto` |
+// | `$input-group-inline-grid-template-columns` | Inline layout grid columns.                  | `auto 1fr`       |
+// | `$input-group-inline-grid-template-rows`    | Inline layout grid rows.                     | `auto auto`      |
+// | `$input-group-label-grid-area`              | Grid area value for labels.                  | `label`          |
+// | `$input-group-input-grid-area`              | Grid area value for inputs.                  | `input`          |
+// | `$input-group-help-grid-area`               | Grid area value for help text.               | `help`           |
+//
+// @example
+// <div class="input-group">
+//   <label for="input-default">Label</label>
+//   <input id="input-default" type="text" placeholder="Enter text" />
+//   <span class="help-text">Helpful hint</span>
+// </div>
+//
+// @example
+// <div class="input-group inline">
+//   <label for="select-inline">Label</label>
+//   <select id="select-inline">
+//     <option value="1">One</option>
+//     <option value="2">Two</option>
+//   </select>
+//   <span class="help-text">Inline help</span>
+// </div>
 
 @use "defaults";
 @use "../../base/form/defaults" as form-defaults;
@@ -8,7 +70,8 @@
 
 // stylelint-disable declaration-block-no-redundant-longhand-properties
 @include layer(component) {
-  #{defaults.$input-group-selector} {
+  // .input-group
+  #{defaults.$input-group-selector-base}#{defaults.$input-group-selector} {
     display: grid;
     grid-template-areas: $input-group-grid-template-areas;
     grid-template-columns: $input-group-grid-template-columns;
@@ -16,21 +79,25 @@
     align-items: center;
     gap: $input-group-gap;
 
+    // label
     #{form-defaults.$label-selector} {
       grid-area: $input-group-label-grid-area;
     }
 
+    // input, textarea, select
     #{form-defaults.$input-selector},
     #{form-defaults.$textarea-selector},
     #{form-defaults.$select-selector} {
       grid-area: $input-group-input-grid-area;
     }
 
-    #{defaults.$input-group-help-text-selector} {
+    // .help-text
+    #{defaults.$input-group-help-text-selector-base}#{defaults.$input-group-help-text-selector} {
       grid-area: $input-group-help-grid-area;
     }
 
-    &#{defaults.$input-group-inline-selector} {
+    // &.inline
+    &#{defaults.$input-group-inline-selector-base}#{defaults.$input-group-inline-selector} {
       grid-template-areas: $input-group-inline-grid-template-areas;
       grid-template-columns: $input-group-inline-grid-template-columns;
       grid-template-rows: $input-group-inline-grid-template-rows;
@@ -38,7 +105,8 @@
   }
 
   @include screen.down(xs) {
-    #{defaults.$input-group-selector}#{defaults.$input-group-inline-selector} {
+    // .input-group.inline
+    #{defaults.$input-group-selector-base}#{defaults.$input-group-selector}#{defaults.$input-group-inline-selector-base}#{defaults.$input-group-inline-selector} {
       grid-template-areas: $input-group-grid-template-areas;
       grid-template-columns: $input-group-grid-template-columns;
       grid-template-rows: $input-group-grid-template-rows;

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

@@ -3,63 +3,100 @@
 // These values are to be used to directly style components and provide a
 // cleaner way to reference custom properties.
 
+// Custom property defaults:
+// | Custom property                                   | Default                                                                |
+// | ------------------------------------------------- | ---------------------------------------------------------------------- |
+// | --graupl-input-group-grid-template-areas          | "label" "input" "help"                                                 |
+// | --graupl-input-group-grid-template-columns        | 100%                                                                   |
+// | --graupl-input-group-grid-template-rows           | auto auto auto                                                         |
+// | --graupl-input-group-row-gap                      | var(--graupl-spacer-2)                                                 |
+// | --graupl-input-group-column-gap                   | var(--graupl-spacer-3)                                                 |
+// | --graupl-input-group-gap                          | var(--graupl-input-group-row-gap) var(--graupl-input-group-column-gap) |
+// | --graupl-input-group-inline-grid-template-areas   | "label input" "- help"                                                 |
+// | --graupl-input-group-inline-grid-template-columns | auto 1fr                                                               |
+// | --graupl-input-group-inline-grid-template-rows    | auto auto                                                              |
+// | --graupl-input-group-label-grid-area              | label                                           |
+// | --graupl-input-group-input-grid-area              | input                                           |
+// | --graupl-input-group-help-grid-area               | help                                            |
+
 @use "defaults";
 @use "../../defaults" as root-defaults;
 @use "../../variables" as root-variables;
 @use "sass:map";
 
 // Input group properties.
+// --graupl-input-group-grid-template-areas
 $input-group-grid-template-areas: var(
   --#{root-defaults.$prefix}input-group-grid-template-areas,
   "#{defaults.$input-group-grid-label-name}"
     "#{defaults.$input-group-grid-input-name}"
     "#{defaults.$input-group-grid-help-name}"
 );
+
+// --graupl-input-group-grid-template-columns
 $input-group-grid-template-columns: var(
   --#{root-defaults.$prefix}input-group-grid-template-columns,
   #{defaults.$input-group-grid-template-columns}
 );
+
+// --graupl-input-group-grid-template-rows
 $input-group-grid-template-rows: var(
   --#{root-defaults.$prefix}input-group-grid-template-rows,
   #{defaults.$input-group-grid-template-rows}
 );
+
+// --graupl-input-group-row-gap
 $input-group-row-gap: var(
   --#{root-defaults.$prefix}input-group-row-gap,
   #{map.get(root-variables.$spacers, 2)}
 );
+
+// --graupl-input-group-column-gap
 $input-group-column-gap: var(
   --#{root-defaults.$prefix}input-group-column-gap,
   #{map.get(root-variables.$spacers, 3)}
 );
+
+// --graupl-input-group-gap
 $input-group-gap: var(
   --#{root-defaults.$prefix}input-group-gap,
   #{$input-group-row-gap} #{$input-group-column-gap}
 );
 
 // Inline input group properties.
+// --graupl-input-group-inline-grid-template-areas
 $input-group-inline-grid-template-areas: var(
   --#{root-defaults.$prefix}input-group-inline-grid-template-areas,
   "#{defaults.$input-group-grid-label-name} #{defaults.$input-group-grid-input-name}"
     "- #{defaults.$input-group-grid-help-name}"
 );
+
+// --graupl-input-group-inline-grid-template-columns
 $input-group-inline-grid-template-columns: var(
   --#{root-defaults.$prefix}input-group-inline-grid-template-columns,
   #{defaults.$input-group-inline-grid-template-columns}
 );
+
+// --graupl-input-group-inline-grid-template-rows
 $input-group-inline-grid-template-rows: var(
   --#{root-defaults.$prefix}input-group-inline-grid-template-rows,
   #{defaults.$input-group-inline-grid-template-rows}
 );
 
 // Inner element properties.
+// --graupl-input-group-label-grid-area
 $input-group-label-grid-area: var(
   --#{root-defaults.$prefix}input-group-label-grid-area,
   #{defaults.$input-group-label-grid-area}
 );
+
+// --graupl-input-group-input-grid-area
 $input-group-input-grid-area: var(
   --#{root-defaults.$prefix}input-group-input-grid-area,
   #{defaults.$input-group-input-grid-area}
 );
+
+// --graupl-input-group-help-grid-area
 $input-group-help-grid-area: var(
   --#{root-defaults.$prefix}input-group-help-grid-area,
   #{defaults.$input-group-help-grid-area}

package/src/scss/component/list/_defaults.scss

@@ -6,10 +6,43 @@
 // 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 "../../defaults" as root-defaults;
+@use "../../functions/theme";
+@use "sass:map";
+
 // Card selectors.
-$list-selector: ".list" !default;
-$list-item-selector: ".list-item" !default;
+$selector-base: root-defaults.$component-selector-base !default;
+$modifier-selector-base: root-defaults.$modifier-selector-base !default;
+$generate-base-theme-map: root-defaults.$generate-base-theme-maps !default;
+$themeable: false !default;
+$list-selector-base: $selector-base !default;
+$list-selector: "list" !default;
+$list-theme-selector-base: $modifier-selector-base !default;
+$list-theme-selector-prefix: "" !default;
+$list-item-selector-base: $selector-base !default;
+$list-item-selector: "list-item" !default;
 
 // List item properties.
 $list-item-transform: none !default;
 $list-item-hover-transform: $list-item-transform !default;
+
+// List state theme defaults.
+// This map defines the default colour shades applied to themed lists.
+// All theme variants will only adjust the colour and border colour of the list
+// container and items.
+$-list-theme-mappings: (
+  color: 900,
+  border-color: 700,
+  item-color: 900,
+  item-border-color: 700,
+);
+$list-theme-mappings: () !default;
+
+// Merge the custom list theme map with the default one.
+@if $generate-base-theme-map {
+  $list-theme-mappings: map.merge($-list-theme-mappings, $list-theme-mappings);
+}
+
+$-list-theme-map: theme.generate-property-map($list-theme-mappings);
+$list-theme-map: () !default;
+$list-theme-map: map.deep-merge($-list-theme-map, $list-theme-map);