@scion/components 16.1.0 → 17.0.0

package/splitter/splitter.component.d.ts

@@ -11,32 +11,33 @@ import * as i0 from "@angular/core";
  * In the toolkit, {@link SciSashboxComponent} uses this splitter to divide a layout into several resizable sections.
  * Another use case would be a resizable sidebar panel.
  *
- * ### Usage:
+ * ### Usage
  *
  * ```html
  * <sci-splitter (move)="onSplitterMove($event.distance)"></sci-splitter>
  * ```
  *
- * ### Theme override:
- * The default style of the splitter is made up of shades of gray.
- * You can control the appearance by overriding the following CSS variables:
+ * ### Styling
  *
- * - --sci-splitter-bgcolor: Sets the background color of the splitter.
- * - --sci-splitter-bgcolor_hover: Sets the background color of the splitter when hovering it.
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To style a specific `sci-splitter` component, the following CSS variables can be set directly on the component.
+ *
+ * - --sci-splitter-background-color: Sets the background color of the splitter.
+ * - --sci-splitter-background-color-hover: Sets the background color of the splitter when hovering it.
  * - --sci-splitter-size: Sets the size of the splitter along the main axis.
- * - --sci-splitter-size_hover: Sets the size of the splitter along the main axis when hovering it.
+ * - --sci-splitter-size-hover: Sets the size of the splitter along the main axis when hovering it.
  * - --sci-splitter-touch-target-size: Sets the touch target size to move the splitter (accessibility).
  * - --sci-splitter-cross-axis-size: Sets the splitter size along the cross axis.
  * - --sci-splitter-border-radius: Sets the border radius of the splitter.
- * - --sci-splitter-opacity_active: Sets the opacity of the splitter while the user moves the splitter.
- * - --sci-splitter-opacity_hover: Sets the opacity of the splitter when hovering it.
+ * - --sci-splitter-opacity-active: Sets the opacity of the splitter while the user moves the splitter.
+ * - --sci-splitter-opacity-hover: Sets the opacity of the splitter when hovering it.
  *
  * Example:
  *
  * ```scss
  * sci-splitter {
- *   --sci-splitter-bgcolor: black;
- *   --sci-splitter-bgcolor_hover: black;
+ *   --sci-splitter-background-color: black;
+ *   --sci-splitter-background-color-hover: black;
  * }
  * ```
  */

package/throbber/throbber.component.d.ts

@@ -4,9 +4,10 @@ import * as i0 from "@angular/core";
  *
  * Choose between different throbber presentations by setting the `type` property: `ellipsis`, `ripple`, `roller`, `spinner`.
  *
- * ### CSS styling:
+ * ### Styling:
  *
- * You can override the following CSS variables:
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To style a specific `sci-throbber` component, the following CSS variables can be set directly on the component.
  *
  * - sci-throbber-color:     Sets the color of the throbber (by default, uses `lightgray`).
  * - sci-throbber-size:      Defines the size of the throbber. Most throbbers are quadratic having the same width and height.

package/viewport/{_scrollbar.scss → scrollbar/_scrollbar.scss}

@@ -5,9 +5,8 @@
  *
  * Invoke from within the 'sci-scrollbar' selector.
  */
-@mixin position($theme: ()) {
-  $scrollbar-size: map.get($theme, scrollbar-size);
-  $scrollbar-size: 12px !default;
+@mixin position() {
+  $scrollbar-size: 12px;
 
   position: absolute;
   transition-duration: 1s;
@@ -39,7 +38,7 @@
  *
  * Invoke from within the viewport selector.
  */
-@mixin hide-when-inactive($theme: ()) {
+@mixin hide-when-inactive() {
   &:host-context(:not(:hover):not(:active)) sci-scrollbar:not(.scrolling) { // use :host-context to work with shadow DOM, i.e., to select the shadow host of the shadow DOM
     opacity: 0; // do not use 'display' nor 'visibility' property to fade the scrollbar
   }

package/viewport/scrollbar/scrollbar.component.d.ts

@@ -8,11 +8,12 @@ import * as i0 from "@angular/core";
  * - enlarges the thumb if the mouse pointer is near the thumb
  * - allows paging on mousedown on the scroll track
  *
- * ### CSS styling:
+ * ### Styling:
  *
- * You can override the following CSS variables:
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To style a specific `sci-scrollbar` component, the following CSS variables can be set directly on the component.
  *
- * - sci-scrollbar-color:    Sets the color of the scrollbar (by default, uses `rgb(78, 78, 78)`).
+ * - sci-scrollbar-color:    Sets the color of the scrollbar.
  *
  * Example:
  *

package/viewport/viewport.component.d.ts

@@ -17,7 +17,7 @@ import * as i0 from "@angular/core";
  *
  * ## Adding the viewport to a layout
  *
- * Typically you would add the viewport component to a flexible layout, filling the remaining space vertically and horizontally, such as a flexbox container
+ * Typically, you would add the viewport component to a flexible layout, filling the remaining space vertically and horizontally, such as a flexbox container
  * with the viewport's `flex` CSS property set to either `flex: auto` or `flex: 1 1 0`.
  *
  * The viewport is sized according to its content width and height. It grows to absorb any free space, thus overflowing its content only when encountering
@@ -39,7 +39,7 @@ import * as i0 from "@angular/core";
  * By default, the viewport's content is added to a CSS grid container with a single column, filling remaining space vertically and horizontally.
  * Using the `::part(content)` pseudo element selector, you can configure the grid container or apply a different layout, such as a flex or flow layout.
  *
- * #### Example of adding slotted content to a CSS flex container.
+ * #### Example of adding slotted content to a CSS flex container
  * ```css
  * sci-viewport::part(content) {
  *   display: flex;
@@ -55,11 +55,12 @@ import * as i0 from "@angular/core";
  * }
  * ```
  *
- * ## Styling of scrollbars
+ * ## Styling
  *
- * You can override the following CSS variables to control the appearance of the scrollbar:
+ * To customize the default look of SCION components or support different themes, configure the `@scion/components` SCSS module in `styles.scss`.
+ * To style a specific `sci-viewport` component, the following CSS variables can be set directly on the component.
  *
- * - sci-viewport-scrollbar-color:     Sets the color of the scrollbar (by default, uses `rgb(78, 78, 78)`).
+ * - sci-viewport-scrollbar-color:     Sets the color of the scrollbar.
  *
  * ```css
  * sci-viewport {