@stihl-design-system/components 1.0.0-RC.10 → 1.0.0-RC.12

package/skiptocontent.C4yQfWr2.js

@@ -1,46 +0,0 @@
-"use client";
-import { j as p } from "./chunks/jsx-runtime.C115EyI4.js";
-import { c as k } from "./chunks/index.CvOaL64Y.js";
-import { g as n } from "./chunks/helpers.B1JT5ShS.js";
-import "react";
-import { DSLink as c } from "./link.DAZNwQ0a.js";
-import './assets/skiptocontent.CHcqLS7S.css';const h = "_skip-to-content_cxg2l_76", l = "_skip-to-content--dark_cxg2l_83", s = {
-  "skip-to-content": "_skip-to-content_cxg2l_76",
-  skipToContent: h,
-  "skip-to-content--dark": "_skip-to-content--dark_cxg2l_83",
-  skipToContentDark: l
-}, f = ({
-  children: e = "Skip to main content",
-  className: i,
-  targetElementId: t = "main",
-  theme: o = "light",
-  ...r
-}) => {
-  t.startsWith("#") && console.warn(
-    n(
-      "DSSkipToContent",
-      'The targetElementId should not start with a "#" character. Please provide the id of the element you want to skip to.'
-    )
-  ), (t.startsWith("http") || t.startsWith(".")) && console.warn(
-    n(
-      "DSSkipToContent",
-      'The targetElementId should not start with "http" or ".". Please provide the id of the element you want to skip to.'
-    )
-  );
-  const a = k(s.skipToContent, i, {
-    [s.skipToContentDark]: o === "dark"
-  });
-  return /* @__PURE__ */ p.jsx(
-    c,
-    {
-      ...r,
-      className: a,
-      href: `#${t}`,
-      theme: o,
-      children: e
-    }
-  );
-};
-export {
-  f as DSSkipToContent
-};

package/spinner.D-xrotcu.js

@@ -1,58 +0,0 @@
-"use client";
-import { j as r } from "./chunks/jsx-runtime.C115EyI4.js";
-import { c as n } from "./chunks/index.CvOaL64Y.js";
-import { D as _ } from "./chunks/Icon.C2o2seDb.js";
-import './assets/spinner.D_Nnf1ZG.css';const m = "_root_11iwi_76", z = "_root-size-small_11iwi_82", c = "_root-size-medium_11iwi_86", S = "_root-size-large_11iwi_90", d = "_root-size-x-large_11iwi_94", g = "_root-size-inherit_11iwi_98", w = "_rotate_11iwi_1", u = "_screenReaderOnly_11iwi_123", e = {
-  root: m,
-  "root-size-small": "_root-size-small_11iwi_82",
-  rootSizeSmall: z,
-  "root-size-medium": "_root-size-medium_11iwi_86",
-  rootSizeMedium: c,
-  "root-size-large": "_root-size-large_11iwi_90",
-  rootSizeLarge: S,
-  "root-size-x-large": "_root-size-x-large_11iwi_94",
-  rootSizeXLarge: d,
-  "root-size-inherit": "_root-size-inherit_11iwi_98",
-  rootSizeInherit: g,
-  rotate: w,
-  screenReaderOnly: u
-}, L = ({
-  aria: i,
-  className: t,
-  size: o = "small",
-  theme: s = "light",
-  ...a
-}) => {
-  const l = n(e.root, t, {
-    [e.rootSizeSmall]: o === "small",
-    [e.rootSizeMedium]: o === "medium",
-    [e.rootSizeLarge]: o === "large",
-    [e.rootSizeXLarge]: o === "x-large",
-    [e.rootSizeInherit]: o === "inherit"
-  });
-  return /* @__PURE__ */ r.jsxs(
-    "span",
-    {
-      className: l,
-      role: "alert",
-      "aria-live": "assertive",
-      "aria-label": (i == null ? void 0 : i["aria-label"]) || void 0,
-      ...a,
-      children: [
-        /* @__PURE__ */ r.jsx("span", { className: e.screenReaderOnly, children: " " }),
-        /* @__PURE__ */ r.jsx(
-          _,
-          {
-            name: "loading-spinner",
-            theme: s,
-            focusable: "false",
-            "aria-hidden": "true"
-          }
-        )
-      ]
-    }
-  );
-};
-export {
-  L as DSSpinner
-};

package/styles/scss/_index.scss

@@ -1,23 +0,0 @@
-@import 'lib/_a11y.scss';
-@import 'lib/_animation.scss';
-@import 'lib/_breakpoints.scss';
-@import 'lib/_container-query.scss';
-@import 'lib/_focus.scss';
-@import 'lib/_grid.scss';
-@import 'lib/_grid-extended.scss';
-@import 'lib/_grid-full.scss';
-@import 'lib/_grid-main.scss';
-@import 'lib/_grid-narrow.scss';
-@import 'lib/_grid-sidebar.scss';
-@import 'lib/_grid-sidebar-sidebar.scss';
-@import 'lib/_heading.scss';
-@import 'lib/_helpers.scss';
-@import 'lib/_high-contrast.scss';
-@import 'lib/_hover.scss';
-@import 'lib/_link.scss';
-@import 'lib/_media-query.scss';
-@import 'lib/_shadow.scss';
-@import 'lib/_spacing.scss';
-@import 'lib/_text.scss';
-@import 'lib/_theme.scss';
-@import 'lib/_transition.scss';

package/styles/scss/lib/_a11y.scss

@@ -1,15 +0,0 @@
-// Visually hide an element but keep them available to screen reader and other assistive
-// technology users.
-// https://www.w3.org/WAI/tutorials/forms/labels/#note-on-hiding-elements
-@mixin ds-visually-hidden {
-  border: 0;
-  clip: rect(0 0 0 0);
-  width: 1px;
-  height: 1px;
-  margin: -1px;
-  overflow: hidden;
-  padding: 0;
-  position: absolute;
-  text-indent: -999999px;
-  white-space: nowrap;
-}

package/styles/scss/lib/_animation.scss

@@ -1,21 +0,0 @@
-$ds-animation-duration-100: var(--ds-animation-duration, 100ms);
-$ds-animation-duration-250: var(--ds-animation-duration, 250ms);
-$ds-animation-duration-400: var(--ds-animation-duration, 400ms);
-
-$ds-animation-durations: (
-  '100': $ds-animation-duration-100,
-  '250': $ds-animation-duration-250,
-  '400': $ds-animation-duration-400,
-);
-
-$ds-motion-functional-linear: linear;
-$ds-motion-functional-ease-in: cubic-bezier(0.5, 0, 1, 1);
-$ds-motion-functional-ease-out: cubic-bezier(0, 0, 0.5, 1);
-$ds-motion-functional-ease-in-out: cubic-bezier(0.5, 0, 0.5, 1);
-
-$ds-animation-easing-functions: (
-  'linear': $ds-motion-functional-linear,
-  'ease-in': $ds-motion-functional-ease-in,
-  'ease-out': $ds-motion-functional-ease-out,
-  'ease-in-out': $ds-motion-functional-ease-in-out,
-);

package/styles/scss/lib/_breakpoints.scss

@@ -1,16 +0,0 @@
-$ds-breakpoint-base: 0;
-$ds-breakpoint-s: 320;
-$ds-breakpoint-m: 768;
-$ds-breakpoint-l: 1024;
-$ds-breakpoint-xl: 1536;
-// only used in grid, exposed in media query stories for custom control over grid
-$ds-breakpoint-xxl: 1668;
-
-$ds-breakpoints: (
-  'base': $ds-breakpoint-base,
-  's': $ds-breakpoint-s,
-  'm': $ds-breakpoint-m,
-  'l': $ds-breakpoint-l,
-  'xl': $ds-breakpoint-xl,
-  'xxl': $ds-breakpoint-xxl,
-);

package/styles/scss/lib/_container-query.scss

@@ -1,58 +0,0 @@
-@import '_breakpoints.scss';
-
-@mixin ds-container-query-min($min: null, $container-name: null) {
-  @if map-has-key($ds-breakpoints, $min) {
-    $value: #{map-get($ds-breakpoints, $min)}px;
-    @if $container-name {
-      @container #{$container-name} (min-width: #{$value}) {
-        @content;
-      }
-    } @else {
-      @container (min-width: #{$value}) {
-        @content;
-      }
-    }
-  } @else {
-    @error "[STIHL Design System] - [ds-container-query-min()]: Passed '#{$min}' breakpoint is not available in ds-container-query-min() mixin.";
-  }
-}
-
-@mixin ds-container-query-max($max: null, $container-name: null) {
-  @if map-has-key($ds-breakpoints, $max) {
-    $value: #{map-get($ds-breakpoints, $max)}px;
-    @if $container-name {
-      @container #{$container-name} (width < #{$value}) {
-        @content;
-      }
-    } @else {
-      @container (width < #{$value}) {
-        @content;
-      }
-    }
-  } @else {
-    @error "[STIHL Design System] - [ds-container-query-max()]: Passed '#{$max}' breakpoint is not available in ds-container-query-max() mixin.";
-  }
-}
-
-@mixin ds-container-query-min-max(
-  $min: null,
-  $max: null,
-  $container-name: null
-) {
-  @if map-has-key($ds-breakpoints, $min) and map-has-key($ds-breakpoints, $max)
-  {
-    $min-value: #{map-get($ds-breakpoints, $min)}px;
-    $max-value: #{map-get($ds-breakpoints, $max)}px;
-    @if $container-name {
-      @container #{$container-name} (min-width: #{$min-value}) and (width < #{$max-value}) {
-        @content;
-      }
-    } @else {
-      @container (min-width: #{$min-value}) and (width < #{$max-value}) {
-        @content;
-      }
-    }
-  } @else {
-    @error "[STIHL Design System] - [ds-container-query-min-max()]: Passed '#{$min}' and/or '#{$max}' breakpoint is not available in ds-container-query-min-max() mixin.";
-  }
-}

package/styles/scss/lib/_grid-extended.scss

@@ -1,11 +0,0 @@
-$ds-grid-extended-column-start: extended-start;
-$ds-grid-extended-column-end: extended-end;
-
-@mixin ds-grid-extended-column {
-  grid-column: $ds-grid-extended-column-start / $ds-grid-extended-column-end;
-
-  @media (min-width: 1668px) {
-    margin-inline-start: -32px;
-    margin-inline-end: -32px;
-  }
-}

package/styles/scss/lib/_grid-full.scss

@@ -1,6 +0,0 @@
-$ds-grid-full-column-start: full-start;
-$ds-grid-full-column-end: full-end;
-
-@mixin ds-grid-full-column {
-  grid-column: $ds-grid-full-column-start / $ds-grid-full-column-end;
-}

package/styles/scss/lib/_grid-main.scss

@@ -1,117 +0,0 @@
-$ds-grid-main-column-start: main-start;
-$ds-grid-main-column-end: main-end;
-$ds-grid-sidebar-main-column-start: $ds-grid-main-column-start;
-$ds-grid-sidebar-main-column-end: $ds-grid-main-column-end;
-
-@mixin ds-grid-main-column {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-}
-
-@mixin ds-grid-sidebar-main-column {
-  @include ds-grid-main-column;
-}
-
-// Half
-@mixin ds-grid-span-first-half {
-  grid-column: $ds-grid-main-column-start / $ds-grid-span-one-half;
-}
-@mixin ds-grid-span-second-half {
-  grid-column: $ds-grid-span-one-half / $ds-grid-main-column-end;
-}
-
-@mixin ds-grid-sidebar-span-first-half {
-  @include ds-grid-span-first-half;
-}
-@mixin ds-grid-sidebar-span-second-half {
-  @include ds-grid-span-second-half;
-}
-
-// Third
-@mixin ds-grid-span-first-third {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-  @include ds-media-query-min('m') {
-    grid-column: $ds-grid-main-column-start / $ds-grid-span-one-third;
-  }
-}
-@mixin ds-grid-span-one-third {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-  @include ds-media-query-min('m') {
-    grid-column: $ds-grid-span-one-third;
-  }
-}
-
-@mixin ds-grid-sidebar-span-first-third {
-  @include ds-grid-span-first-third;
-}
-@mixin ds-grid-sidebar-span-one-third {
-  @include ds-grid-span-one-third;
-}
-
-// Two Thirds
-@mixin ds-grid-span-first-two-thirds {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-  @include ds-media-query-min('m') {
-    grid-column: $ds-grid-main-column-start / $ds-grid-span-two-thirds;
-  }
-}
-@mixin ds-grid-span-two-thirds {
-  grid-column: $ds-grid-main-column-start / $ds-grid-main-column-end;
-  @include ds-media-query-min('m') {
-    grid-column: $ds-grid-span-two-thirds / $ds-grid-main-column-end;
-  }
-}
-
-@mixin ds-grid-sidebar-span-first-two-thirds {
-  @include ds-grid-span-first-two-thirds;
-}
-@mixin ds-grid-sidebar-span-two-thirds {
-  @include ds-grid-span-two-thirds;
-}
-
-// Quarter
-@mixin ds-grid-span-first-quarter {
-  grid-column: $ds-grid-main-column-start / $ds-grid-span-one-quarter;
-}
-@mixin ds-grid-span-one-quarter {
-  grid-column: $ds-grid-span-one-quarter;
-  // one quarter on viewports smaller than xl should behave like "first" quarter by starting a new row on "overflow":
-  // first-quarter  one-quarter
-  // one-quarter    one-quarter
-  &:nth-of-type(odd) {
-    grid-column: $ds-grid-main-column-start / $ds-grid-span-one-quarter;
-  }
-  @include ds-media-query-min('l') {
-    &:nth-of-type(odd) {
-      grid-column: $ds-grid-span-one-quarter;
-    }
-  }
-}
-
-@mixin ds-grid-sidebar-span-first-quarter {
-  @include ds-grid-span-first-quarter;
-}
-
-@mixin ds-grid-sidebar-span-one-quarter {
-  grid-column: $ds-grid-span-one-quarter;
-  // one quarter on viewports smaller than xl should behave like "first" quarter by starting a new row on "overflow":
-  // first-quarter  one-quarter
-  // one-quarter    one-quarter
-  &:nth-of-type(odd) {
-    grid-column: $ds-grid-main-column-start / $ds-grid-span-one-quarter;
-  }
-  @include ds-media-query-min('xl') {
-    &:nth-of-type(odd) {
-      grid-column: $ds-grid-span-one-quarter;
-    }
-  }
-}
-
-$ds-grid-span-one-half: var(--ds-grid-span-one-half);
-$ds-grid-span-one-third: var(--ds-grid-span-one-third);
-$ds-grid-span-two-thirds: var(--ds-grid-span-two-thirds);
-$ds-grid-span-one-quarter: var(--ds-grid-span-one-quarter);
-
-$ds-grid-sidebar-span-one-half: $ds-grid-span-one-half;
-$ds-grid-sidebar-span-one-third: $ds-grid-span-one-third;
-$ds-grid-sidebar-span-two-thirds: $ds-grid-span-two-thirds;
-$ds-grid-sidebar-span-one-quarter: $ds-grid-span-one-quarter;

package/styles/scss/lib/_grid-narrow.scss

@@ -1,16 +0,0 @@
-// The max-width of the narrow content center/left area in our grid.
-$ds-grid-narrow-max-width: 948px;
-$ds-grid-narrow-left-column-start: narrow-left-start;
-$ds-grid-narrow-left-column-end: narrow-left-end;
-$ds-grid-narrow-center-column-start: narrow-center-start;
-$ds-grid-narrow-center-column-end: narrow-center-end;
-
-@mixin ds-grid-narrow-left-column {
-  grid-column: $ds-grid-narrow-left-column-start /
-    $ds-grid-narrow-left-column-end;
-}
-
-@mixin ds-grid-narrow-center-column {
-  grid-column: $ds-grid-narrow-center-column-start /
-    $ds-grid-narrow-center-column-end;
-}

package/styles/scss/lib/_grid-sidebar-sidebar.scss

@@ -1,50 +0,0 @@
-$ds-grid-sidebar-sidebar-1-column-start: sidebar-1-start;
-$ds-grid-sidebar-sidebar-1-column-end: sidebar-1-end;
-$ds-grid-sidebar-sidebar-2-column-start: sidebar-2-start;
-$ds-grid-sidebar-sidebar-2-column-end: sidebar-2-end;
-
-// Sidebar 1
-@mixin ds-grid-sidebar-sidebar-1($is-open: false) {
-  display: none;
-  @include ds-media-query-min('l') {
-    display: unset;
-    // This is a hack for implicit grid spanning a row from 1 till -1
-    // Using it leads us to not being able to use the row-gap property and requires us to use margins instead
-    // https://stackoverflow.com/a/49076465/2346207
-    // https://stackoverflow.com/a/56876772/2346207
-    grid-row: span 300;
-    grid-column: $ds-grid-sidebar-sidebar-1-column-start /
-      $ds-grid-sidebar-sidebar-1-column-end;
-    margin-block-end: 0;
-    @if ($is-open == true) {
-      width: 264px;
-      max-width: 264px;
-    } @else {
-      width: 64px;
-      max-width: 64px;
-    }
-  }
-}
-// Sidebar 2
-@mixin ds-grid-sidebar-sidebar-2($is-open: false) {
-  display: none;
-  @include ds-media-query-min('l') {
-    // This is a hack for implicit grid spanning a row from 1 till -1
-    // Using it leads us to not being able to use the row-gap property and requires us to use margins instead
-    // https://stackoverflow.com/a/49076465/2346207
-    // https://stackoverflow.com/a/56876772/2346207
-    grid-row: span 300;
-    margin-block-end: 0;
-    @if ($is-open == true) {
-      grid-column: $ds-grid-sidebar-sidebar-2-column-start /
-        $ds-grid-sidebar-sidebar-2-column-end;
-      display: unset;
-      width: 320px;
-      max-width: 320px;
-      margin-inline-start: -24px;
-    }
-  }
-  @media (min-width: 1535px) {
-    margin-inline-start: -32px;
-  }
-}

package/styles/scss/lib/_heading.scss

@@ -1,107 +0,0 @@
-// Base mixin to define common styles
-@mixin base-heading($fontFamily, $fontSize, $lineHeight) {
-  font-family: #{unquote(
-      $fontFamily +
-        ', -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Helvetica Neue, Arial, sans-serif'
-    )};
-  font-style: normal;
-  font-variant: normal;
-  font-weight: normal;
-  font-size: $fontSize;
-  line-height: $lineHeight;
-}
-
-// Mixin for bold title
-@mixin base-heading-bold($fontFamily, $fontSize, $lineHeight) {
-  @include base-heading($fontFamily, $fontSize, $lineHeight);
-
-  /* x-height 426 https://vertical-metrics.netlify.app/ */
-  font-size-adjust: 0.426;
-}
-
-// Mixin for display title text
-@mixin base-heading-display-title($fontFamily, $fontSize, $lineHeight) {
-  @include base-heading($fontFamily, $fontSize, $lineHeight);
-  /* cap-height 680 https://vertical-metrics.netlify.app/*/
-  font-size-adjust: cap-height 0.68;
-}
-
-@mixin responsive-heading($min, $fontSize, $lineHeight) {
-  @include ds-media-query-min($min: $min) {
-    font-size: $fontSize;
-    line-height: $lineHeight;
-  }
-}
-
-// Mixins for specific heading sizes
-// XL
-@mixin ds-heading-x-large {
-  @include base-heading-bold(
-    'STIHL Contraface Digital Text Bold',
-    1.625rem,
-    1.2
-  );
-  @include responsive-heading('l', 1.875rem, 1.25);
-}
-
-@mixin ds-heading-x-large-uppercase {
-  @include base-heading-display-title(
-    'STIHL Contraface Digital Display Title',
-    1.625rem,
-    1.2
-  );
-  text-transform: uppercase;
-  @include responsive-heading('l', 1.875rem, 1.25);
-}
-
-// Large
-@mixin ds-heading-large {
-  @include base-heading-bold(
-    'STIHL Contraface Digital Text Bold',
-    1.375rem,
-    1.25
-  );
-  @include responsive-heading('l', 1.625rem, 1.2);
-}
-
-@mixin ds-heading-large-uppercase {
-  @include base-heading-display-title(
-    'STIHL Contraface Digital Display Title',
-    1.375rem,
-    1.25
-  );
-  text-transform: uppercase;
-  @include responsive-heading('l', 1.625rem, 1.2);
-}
-
-// Medium
-@mixin ds-heading-medium {
-  @include base-heading-bold(
-    'STIHL Contraface Digital Text Bold',
-    1.25rem,
-    1.2
-  );
-}
-
-@mixin ds-heading-medium-uppercase {
-  @include base-heading-display-title(
-    'STIHL Contraface Digital Display Title',
-    1.25rem,
-    1.2
-  );
-  text-transform: uppercase;
-}
-
-// Small
-@mixin ds-heading-small {
-  @include base-heading-bold('STIHL Contraface Digital Text Bold', 1rem, 1.5);
-}
-
-@mixin ds-heading-small-uppercase {
-  @include base-heading-display-title(
-    'STIHL Contraface Digital Display Title',
-    1rem,
-    1.5
-  );
-  text-transform: uppercase;
-}

package/styles/scss/lib/_helpers.scss

@@ -1,15 +0,0 @@
-@function px-to-rem($pixels, $base-font-size: 16px) {
-  @return #{calc($pixels / $base-font-size)}rem;
-}
-
-// Encode a color to be used in a data url.
-@function urlEncodeHexColor($string) {
-  @if type-of($string) == 'color' and str-index(#{$string}, '#') == 1 {
-    $hex: str-slice(ie-hex-str($string), 4);
-    $string: unquote('#{$hex}');
-
-    @return '%23' + $string;
-  }
-
-  @return $string;
-}

package/styles/scss/lib/_high-contrast.scss

@@ -1,24 +0,0 @@
-/**
- * This mixin provides a utility to wrap styles within a media query specifically
- * targeting devices that have forced-colors active and thus are in high-contrast mode.
- *
- * You can use the following keywords to set specific colors for elements in high contrast mode:
- * @example
- * ```markdown
- * | Content                  | Keyword       |
- * |--------------------------|---------------|
- * | Text                     | CanvasText    |
- * | Hyperlinks               | LinkText      |
- * | Disabled Text            | GrayText      |
- * | Selected Text, foreground| HighlightText |
- * | Selected Text, background| Highlight     |
- * | Buttons, foreground      | ButtonText    |
- * | Buttons, background      | ButtonFace    |
- * | Backgrounds              | Canvas        |
- * ```
- */
-@mixin high-contrast-media-query {
-  @media screen and (forced-colors: active) {
-    @content;
-  }
-}

package/styles/scss/lib/_hover.scss

@@ -1,10 +0,0 @@
-/**
- * This mixin provides a utility to wrap styles within a media query specifically
- * targeting devices that support hover. It ensures that hover styles are
- * applied only to non-touch (hover capable) devices.
-*/
-@mixin hover-media-query {
-  @media (hover: hover) {
-    @content;
-  }
-}