@scania/tegel 0.0.1-beta.7 → 0.0.2

package/dist/collection/components/radio-button/radio-button-component.stories.js

@@ -0,0 +1,91 @@
+import { formatHtmlPreview } from '../../utils/utils';
+import readme from './readme.md';
+export default {
+  title: 'Components/Radio Button',
+  parameters: {
+    notes: readme,
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    label: {
+      name: 'Label',
+      description: 'Sets the label for the radio button.',
+      controls: {
+        type: 'text',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the radio button.',
+      control: {
+        type: 'boolean',
+      },
+      table: {
+        defaultValue: { summary: 'false' },
+      },
+    },
+  },
+  args: {
+    label: 'Label text',
+    disabled: false,
+  },
+};
+const Template = ({ label, disabled }) => formatHtmlPreview(`
+  <style>
+  .demo-fieldset-reset { 
+    border: 0;
+    margin: 0;
+    min-width: 0;
+    padding: 0; 
+  }
+</style>
+
+  <fieldset class="demo-fieldset-reset">
+  <sdds-radio-button 
+    name="rb-example"
+    value="option1"
+    radio-id="option-1"
+    aria-labelled-by="option-1"
+    aria-describedby="option-1"
+    required=false
+    ${disabled ? 'disabled' : ''}
+    checked="true" 
+  >
+    ${label} 1
+  </sdds-radio-button>
+
+  <sdds-radio-button
+    name="rb-example"
+    value="option2"
+    radio-id="option-2"
+    aria-labelled-by="option-2"
+    aria-described-by="option-2"
+    ${label ? `label="${label} 2"` : ''}
+    required=false
+    ${disabled ? 'disabled' : ''} 
+  >
+    ${label} 2
+  </sdds-radio-button>
+    
+  </fieldset>
+
+  <!-- Script tag with eventlistener for demo purposes. -->
+  <script>
+  document.addEventListener('sddsChange', (event) => {
+    console.log('Radio button with id: ', event.detail.radioId, ' with value:', event.detail.value, ' was selected.')
+  })
+  </script>
+  `);
+export const WebComponent = Template.bind({});

package/dist/collection/components/radio-button/radio-button.js

@@ -0,0 +1,160 @@
+import { h } from '@stencil/core';
+export class RadioButton {
+  constructor() {
+    this.name = undefined;
+    this.value = undefined;
+    this.radioId = crypto.randomUUID();
+    this.checked = false;
+    this.required = false;
+    this.disabled = false;
+  }
+  render() {
+    return (h("div", { class: "sdds-radio-button" }, h("input", { class: "sdds-form-input", type: "radio", name: this.name, id: this.radioId, value: this.value, checked: this.checked, "aria-checked": this.checked, "aria-describedby": this.host.getAttribute('aria-describedby'), required: this.required, disabled: this.disabled, onChange: () => {
+        this.sddsChange.emit({
+          radioId: this.radioId,
+          value: this.value,
+        });
+      } }), h("label", { htmlFor: this.radioId }, h("slot", null))));
+  }
+  static get is() { return "sdds-radio-button"; }
+  static get encapsulation() { return "scoped"; }
+  static get originalStyleUrls() {
+    return {
+      "$": ["radio-button-component.scss"]
+    };
+  }
+  static get styleUrls() {
+    return {
+      "$": ["radio-button-component.css"]
+    };
+  }
+  static get properties() {
+    return {
+      "name": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Name of radio button, used for reference."
+        },
+        "attribute": "name",
+        "reflect": false
+      },
+      "value": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Value of input."
+        },
+        "attribute": "value",
+        "reflect": false
+      },
+      "radioId": {
+        "type": "string",
+        "mutable": false,
+        "complexType": {
+          "original": "string",
+          "resolved": "string",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Unique radio button identifier."
+        },
+        "attribute": "radio-id",
+        "reflect": false,
+        "defaultValue": "crypto.randomUUID()"
+      },
+      "checked": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides if the radio button is checked or not."
+        },
+        "attribute": "checked",
+        "reflect": true,
+        "defaultValue": "false"
+      },
+      "required": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides if the radio button is required or not."
+        },
+        "attribute": "required",
+        "reflect": false,
+        "defaultValue": "false"
+      },
+      "disabled": {
+        "type": "boolean",
+        "mutable": false,
+        "complexType": {
+          "original": "boolean",
+          "resolved": "boolean",
+          "references": {}
+        },
+        "required": false,
+        "optional": false,
+        "docs": {
+          "tags": [],
+          "text": "Decides if the radio button is disabled or not."
+        },
+        "attribute": "disabled",
+        "reflect": false,
+        "defaultValue": "false"
+      }
+    };
+  }
+  static get events() {
+    return [{
+        "method": "sddsChange",
+        "name": "sddsChange",
+        "bubbles": true,
+        "cancelable": true,
+        "composed": true,
+        "docs": {
+          "tags": [],
+          "text": "Sends unique radio button identifier and status when it is checked. If no ID is specified a random one will be generated. To use this listener don't use the randomized ID, use a specific one of your choosing."
+        },
+        "complexType": {
+          "original": "{\n    radioId: string;\n    value: string;\n  }",
+          "resolved": "{ radioId: string; value: string; }",
+          "references": {}
+        }
+      }];
+  }
+  static get elementRef() { return "host"; }
+}

package/dist/collection/components/radio-button/radio-button.stories.js

@@ -0,0 +1,68 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Radio Button',
+  parameters: {
+    layout: 'centered',
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=9266%3A17335&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    label: {
+      name: 'Label',
+      description: 'Sets the label for the radio button.',
+      controls: {
+        type: 'string',
+      },
+    },
+    disabled: {
+      name: 'Disabled',
+      description: 'Disables the radio button.',
+      control: {
+        type: 'boolean',
+      },
+    },
+  },
+  args: {
+    label: 'Label text',
+    disabled: false,
+  },
+};
+const Template = (args) => formatHtmlPreview(`
+  <style>
+    .demo-fieldset-reset { 
+      border: 0;
+      margin: 0;
+      min-width: 0;
+      padding: 0; 
+    }
+  </style>
+  <fieldset class="demo-fieldset-reset" ${args.disabled ? 'disabled' : ''}>
+    <div class="sdds-radio-button-group">
+      <div class="sdds-radio-item">
+        <input class="sdds-form-input" type="radio" name="rb-example" id="rb-option-1" checked>
+        <label class="sdds-form-label" for="rb-option-1">
+          ${args.label} 1
+        </label>
+      </div>
+    </div>
+    <div class="sdds-radio-button-group">
+      <div class="sdds-radio-item">
+        <input class="sdds-form-input" type="radio" name="rb-example" id="rb-option-2">
+        <label class="sdds-form-label" for="rb-option-2">
+          ${args.label} 2
+        </label>
+      </div>
+    </div>
+  </fieldset>
+  `);
+export const Native = Template.bind({});

package/dist/collection/components/side-menu/side-menu.stories.js

@@ -0,0 +1,182 @@
+import { formatHtmlPreview } from '../../utils/utils';
+export default {
+  title: 'Components/Side Menu',
+  parameters: {
+    layout: 'fullscreen',
+    docs: {
+      source: {
+        state: 'closed',
+      },
+    },
+    design: [
+      {
+        name: 'Figma',
+        type: 'figma',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
+      },
+      {
+        name: 'Link',
+        type: 'link',
+        url: 'https://www.figma.com/file/d8bTgEx7h694MSesi2CTLF/Tegel-UI-Library?node-id=3981%3A151372&t=Ne6myqwca5m00de7-1',
+      },
+    ],
+  },
+  argTypes: {
+    collapsed: {
+      name: 'Collapsed',
+      description: 'Toggle the side menus collapsed state.',
+      control: {
+        type: 'boolean',
+      },
+    },
+    showIcons: {
+      name: 'Show icons',
+      description: 'Toggle if icons for side menu options are displayed.',
+      control: {
+        type: 'boolean',
+      },
+      if: { arg: 'collapsed', neq: true },
+    },
+  },
+  args: {
+    collapsed: false,
+    showIcons: false,
+  },
+};
+const Template = ({ showIcons, collapsed }) => {
+  const icons = showIcons || collapsed ? 'icons-enabled' : 'icons-disabled';
+  return formatHtmlPreview(`
+  <style>
+  /* demo-wrapper is for demonstration purposes only*/
+  .demo-wrapper {
+    align-items: stretch;
+    height: 100vh;
+  }
+  .sdds-container {
+    overflow-y: auto;
+    max-width: 10000px;
+  }
+</style>
+
+<nav class="sdds-nav">
+  <div class="sdds-nav__left">
+    <button class="sdds-nav__mob-menu-btn">
+      <sdds-icon name="burger" size="20px"></sdds-icon>
+    </button>
+    <div class="sdds-nav__app-name">My application</div>
+  </div>
+  <div class="sdds-nav__right">
+    <a class="sdds-nav__item sdds-nav__app-logo" href="#"></a>
+  </div>
+</nav>
+<div class="sdds-push demo-wrapper">
+  <div class="sdds-sidebar side-menu ${collapsed ? 'collapsed' : ''}">
+    <div class="sdds-sidebar-mheader">
+    <button class="sdds-sidebar-mheader__close">
+      <sdds-icon name="cross" size="20px"></sdds-icon>
+    </button>
+    </div>
+    <ul class="sdds-sidebar-nav sdds-sidebar-nav--main ${icons}">
+      <li class="sdds-sidebar-nav__item sdds-sidebar-nav__extended">
+        <button class="sdds-sidebar-nav__item-link">
+          <div>
+            <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
+          </div>
+          <span class="sdds-sidebar-nav__item-text">Sub-menu</span>
+          <div>
+            <sdds-icon class="sdds-sidebar-nav__chevron" name="chevron_down" size="16px"></sdds-icon>
+          </div>
+        </button>
+        <ul class="sdds-sidebar-nav-subnav">
+          <li class="sdds-sidebar-nav-subnav__item">
+            <span class="sdds-sidebar-nav__item-title">Sub-menu</span>
+          </li>
+          <li class="sdds-sidebar-nav-subnav__item">
+            <a class="sdds-sidebar-nav__item-link" href="#"
+              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
+            >
+          </li>
+          <li class="sdds-sidebar-nav-subnav__item">
+            <a class="sdds-sidebar-nav__item-link" href="#"
+              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
+            >
+          </li>
+          <li class="sdds-sidebar-nav-subnav__item">
+            <a class="sdds-sidebar-nav__item-link" href="#"
+              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
+            >
+          </li>
+        </ul>
+      </li>
+      <li class="sdds-sidebar-nav__item sdds-sidebar-nav__extended">
+      <button class="sdds-sidebar-nav__item-link">
+      <div>
+        <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
+      </div>
+      <span class="sdds-sidebar-nav__item-text">Sub-menu</span>
+      <div>
+        <sdds-icon class="sdds-sidebar-nav__chevron" name="chevron_down" size="16px"></sdds-icon>
+      </div>
+      </button>
+        <ul class="sdds-sidebar-nav-subnav">
+          <li class="sdds-sidebar-nav-subnav__item">
+            <span class="sdds-sidebar-nav__item-title">Sub-menu</span>
+          </li>
+          <li class="sdds-sidebar-nav-subnav__item">
+            <a class="sdds-sidebar-nav__item-link" href="#"
+              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
+            >
+          </li>
+          <li class="sdds-sidebar-nav-subnav__item">
+            <a class="sdds-sidebar-nav__item-link" href="#"
+              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
+            >
+          </li>
+          <li class="sdds-sidebar-nav-subnav__item">
+            <a class="sdds-sidebar-nav__item-link" href="#"
+              ><span class="sdds-sidebar-nav__item-text">Sub Page name</span></a
+            >
+          </li>
+        </ul>
+      </li>
+      <li class="sdds-sidebar-nav__item">
+        <a class="sdds-sidebar-nav__item-link" href="#">
+        <div>
+        <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
+      </div>
+          <span class="sdds-sidebar-nav__item-text">Page link</span>
+        </a>
+      </li>
+      <li class="sdds-sidebar-nav__item">
+        <a class="sdds-sidebar-nav__item-link" href="#">
+        <div>
+        <sdds-icon class="sdds-sidebar-nav__icon" name="truck" size="20px"></sdds-icon>
+      </div>
+          <span class="sdds-sidebar-nav__item-text">Page link</span>
+        </a>
+      </li>
+    </ul>
+  </div>
+  <div class="sdds-container" style="padding-top: 30px">
+  </div>
+</div>
+
+
+<script>
+    /* Note: Code below is used only for inspiration and presentation purposes in Storybook */
+  document.querySelector('button.sdds-nav__mob-menu-btn').addEventListener('click', () => {
+    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')
+  })
+  document.querySelector('button.sdds-sidebar-mheader__close').addEventListener('click', () => {
+    document.querySelector('.side-menu').classList.toggle('mobile-menu-open')
+  })
+  expandableListItems = document.getElementsByClassName('sdds-sidebar-nav__extended');
+  for (let i = 0; i < expandableListItems.length; i++) {
+    expandableListItems[i].addEventListener('click', () => {
+      document.getElementsByClassName('sdds-sidebar-nav__extended')[i].classList.toggle('subnav-open');
+    });
+  }
+</script>
+  `);
+};
+export const Default = Template.bind({});

package/dist/collection/components/slider/slider.css

@@ -1,7 +1,37 @@
+:root,
+.sdds-mode-light {
+  --sdds-slider-label-color: var(--sdds-grey-958);
+  --sdds-slider-label-color-disabled: var(--sdds-grey-400);
+  --sdds-slider-thumb-color: var(--sdds-blue-800);
+  --sdds-slider-divider-color: var(--sdds-grey-400);
+  --sdds-slider-track-color: var(--sdds-grey-400);
+  --sdds-slider-track-fill-color: var(--sdds-blue-800);
+  --sdds-slider-input-inputfield-color: var(--sdds-grey-700);
+  --sdds-slider-inputfield-color: var(--sdds-grey-400);
+  --sdds-slider-controls-color: var(--sdds-grey-958);
+  --sdds-slider-inputfield-background: var(--sdds-white);
+  --sdds-slider-inputfield-box-shadow: var(--sdds-grey-400);
+  --sdds-slider-divider-values-color: var(--sdds-grey-958) ;
+}
+
+.sdds-mode-dark {
+  --sdds-slider-label-color: var(--sdds-grey-100);
+  --sdds-slider-label-color-disabled: var(--sdds-grey-700);
+  --sdds-slider-thumb-color: var(--sdds-grey-100);
+  --sdds-slider-divider-color: var(--sdds-grey-700);
+  --sdds-slider-track-color: var(--sdds-grey-700);
+  --sdds-slider-track-fill-color: var(--sdds-grey-100);
+  --sdds-slider-inputfield-color: var(--sdds-grey-700);
+  --sdds-slider-input-inputfield-color: var(--sdds-grey-400);
+  --sdds-slider-controls-color: var(--sdds-grey-100);
+  --sdds-slider-inputfield-background: var(--sdds-grey-900);
+  --sdds-slider-inputfield-box-shadow: var(--sdds-grey-800);
+  --sdds-slider-divider-values-color: var(--sdds-grey-100) ;
+}
+
 sdds-slider {
   box-sizing: border-box;
   width: 100%;
-  --sdds-slider-inputfield-bg: var(--sdds-white);
 }
 sdds-slider * {
   box-sizing: border-box;
@@ -56,7 +86,7 @@ sdds-slider input[type=range].sdds-slider-native-element {
   letter-spacing: var(--sdds-detail-02-ls);
 }
 .sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper {
-  background-color: var(--sdds-slider-inputfield-bg);
+  background-color: var(--sdds-slider-inputfield-background);
   display: flex;
   align-items: center;
   justify-content: center;
@@ -64,12 +94,12 @@ sdds-slider input[type=range].sdds-slider-native-element {
 .sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
   font: var(--sdds-detail-02);
   letter-spacing: var(--sdds-detail-02-ls);
-  color: var(--sdds-grey-700);
+  color: var(--sdds-slider-input-inputfield-color);
   border: 0;
   background-color: transparent;
   text-align: center;
   padding: 12px;
-  box-shadow: inset 0 -1px 0 var(--sdds-grey-400);
+  box-shadow: inset 0 -1px 0 var(--sdds-slider-inputfield-box-shadow);
   border-radius: 4px 4px 0 0;
 }
 .sdds-slider .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field:hover {
@@ -84,7 +114,7 @@ sdds-slider input[type=range].sdds-slider-native-element {
   letter-spacing: var(--sdds-detail-05-ls);
   user-select: none;
   position: absolute;
-  color: var(--sdds-grey-958);
+  color: var(--sdds-slider-label-color);
   top: -16px;
   transform: translateY(-100%);
 }
@@ -116,20 +146,19 @@ sdds-slider input[type=range].sdds-slider-native-element {
   width: 20px;
   height: 20px;
   border-radius: 100%;
-  background-color: var(--sdds-blue-800);
+  background-color: var(--sdds-slider-thumb-color);
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
   cursor: pointer;
-  z-index: 10;
 }
 .sdds-slider .sdds-slider__scrubber .sdds-slider__scrubber-inner::before {
   content: " ";
   display: none;
   width: 48px;
   height: 48px;
-  background-color: var(--sdds-blue-800);
+  background-color: var(--sdds-slider-thumb-color);
   position: absolute;
   border-radius: 100%;
   top: 50%;
@@ -163,7 +192,8 @@ sdds-slider input[type=range].sdds-slider-native-element {
 .sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider {
   transform: translateY(-50%);
   height: 16px;
-  background-color: var(--sdds-grey-400);
+  background-color: var(--sdds-slider-divider-color);
+  color: var(--sdds-slider-divider-values-color);
   width: 1px;
 }
 .sdds-slider .sdds-slider__value-dividers .sdds-slider__value-divider span {
@@ -183,7 +213,7 @@ sdds-slider input[type=range].sdds-slider-native-element {
   width: 100%;
   height: 2px;
   border-radius: 1px;
-  background-color: var(--sdds-grey-400);
+  background-color: var(--sdds-slider-track-color);
   position: relative;
 }
 .sdds-slider .sdds-slider__track:focus {
@@ -198,7 +228,7 @@ sdds-slider input[type=range].sdds-slider-native-element {
   opacity: 0.08;
 }
 .sdds-slider .sdds-slider__track .sdds-slider__track-fill {
-  background-color: var(--sdds-blue-800);
+  background-color: var(--sdds-slider-track-fill-color);
   border-radius: 2px;
   height: 4px;
   position: absolute;
@@ -212,38 +242,38 @@ sdds-slider input[type=range].sdds-slider-native-element {
   pointer-events: none;
 }
 .sdds-slider.disabled label {
-  color: var(--sdds-grey-400);
+  color: var(--sdds-slider-label-color-disabled);
 }
 .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control {
   cursor: default;
 }
-.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg path, .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg path {
-  fill: var(--sdds-grey-400);
+.sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg, .sdds-slider.disabled .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg {
+  fill: var(--sdds-slider-controls-color);
 }
 .sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-value {
-  color: var(--sdds-grey-400);
+  color: var(--sdds-slider-controls-color);
 }
 .sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper {
   pointer-events: none;
 }
 .sdds-slider.disabled .sdds-slider__input-values .sdds-slider__input-field-wrapper input.sdds-slider__input-field {
-  color: var(--sdds-grey-400);
+  color: var(--sdds-slider-controls-color);
   pointer-events: none;
 }
 .sdds-slider.disabled .sdds-slider__value {
   display: none;
 }
 .sdds-slider.disabled .sdds-slider__track .sdds-slider__track-fill {
-  background-color: var(--sdds-grey-400);
+  background-color: var(--sdds-slider-track-fill-color);
 }
 .sdds-slider.disabled .sdds-slider__value-dividers .sdds-slider__value-divider span {
-  color: var(--sdds-grey-400);
+  color: var(--sdds-slider-track-fill-color);
 }
 .sdds-slider.disabled .sdds-slider__scrubber {
   pointer-events: none;
 }
 .sdds-slider.disabled .sdds-slider__scrubber .sdds-slider__scrubber-inner {
-  background: var(--sdds-grey-400);
+  background: var(--sdds-slider-track-color);
   cursor: default;
 }
 .sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner {
@@ -257,4 +287,11 @@ sdds-slider input[type=range].sdds-slider-native-element {
 .sdds-slider.sdds-slider-small .sdds-slider__scrubber .sdds-slider__scrubber-inner.pressed {
   width: 20px;
   height: 20px;
+}
+
+.sdds-slider__controls .sdds-slider__control {
+  cursor: default;
+}
+.sdds-slider__controls .sdds-slider__control.sdds-slider__control-minus svg, .sdds-slider__controls .sdds-slider__control.sdds-slider__control-plus svg {
+  fill: var(--sdds-slider-controls-color);
 }