@sikt/sds-toggle 6.1.3 → 7.0.0

package/CHANGELOG.md

@@ -2,6 +2,16 @@
 
 All notable changes to this project will be documented in this file. See [commit-and-tag-version](https://github.com/absolute-version/commit-and-tag-version) for commit guidelines.
 
+## [7.0.0](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@6.1.3...@sikt/sds-toggle@7.0.0) (2026-01-29)
+
+### ⚠ BREAKING CHANGES
+
+- **toggle-button:** deprecate component, replaced by ChipToggle in @sikt/sds-chip
+
+### Features
+
+- **toggle-button:** deprecate component, replaced by ChipToggle in @sikt/sds-chip ([a31ce84](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/commit/a31ce848ac5c2e5f4b535c934c47fe9d65b5eef8))
+
 ## [6.1.3](https://gitlab.sikt.no/designsystem/sds-komponentbibliotek/compare/@sikt/sds-toggle@6.1.2...@sikt/sds-toggle@6.1.3) (2025-10-09)
 
 ### Bug Fixes

package/README.md

@@ -19,17 +19,6 @@ import "@sikt/sds-toggle/dist/index.css";
 <ToggleSwitch label="Label" />;
 ```
 
-#### Toggle Button
-
-```js
-import { ToggleButton } from "@sikt/sds-toggle";
-import "@sikt/sds-form/dist/index.css";
-import "@sikt/sds-icons/dist/index.css";
-import "@sikt/sds-toggle/dist/index.css";
-
-<ToggleButton label="Label" checked={false} onClick={() => {}} />;
-```
-
 #### Toggle Segment
 
 ```js
@@ -58,13 +47,5 @@ Create custom markup:
 #### Toggle Switch
 
 ```html
-<div class="sds-toggle-switch">
-  <label class="sds-toggle-switch__main-label">
-    <div class="sds-toggle-switch__inner">
-      <input type="checkbox" class="sds-toggle-switch__track" />
-      <div class="sds-toggle-switch__thumb">√</div>
-    </div>
-    <div class="sds-toggle-switch__label">Label</div>
-  </label>
-</div>
+<!-- see html example in Storybook -->
 ```

package/dist/index.css

@@ -96,79 +96,6 @@
   color: var(--toggle-thumb-color);
 }
 
-/* src/toggle-button.pcss */
-.sds-toggle-button {
-  --toggle-button-background-color: inherit;
-  --toggle-button-border-color: var( --sds-color-interaction-primary-strong-default );
-  --toggle-button-color: var(--sds-color-text-primary);
-  --toggle-button-outline: none;
-  display: inline-block;
-}
-.sds-toggle-button__label {
-  align-items: center;
-  background-color: var(--toggle-button-background-color);
-  border: var(--sds-space-border-weight-regular) solid var(--toggle-button-border-color);
-  border-radius: var(--sds-space-border-radius-full);
-  color: var(--toggle-button-color);
-  cursor: pointer;
-  display: flex;
-  gap: var(--sds-space-gap-small);
-  font-size: var(--sds-typography-body-l-fontsize);
-  font-weight: var(--sds-typography-body-l-fontweight);
-  line-height: var(--sds-typography-body-l-lineheight);
-  padding: calc(var(--sds-space-padding-small) - var(--sds-space-border-weight-regular));
-  outline: var(--toggle-button-outline);
-  outline-offset: 0;
-  -webkit-user-select: none;
-  user-select: none;
-}
-.sds-toggle-button__label-text {
-  display: block;
-  padding: 0 var(--sds-space-padding-tiny);
-}
-.sds-toggle-button__label:hover {
-  --toggle-button-border-color: var( --sds-color-interaction-primary-strong-highlight );
-}
-.sds-toggle-button__label:active {
-  --toggle-button-border-color: var( --sds-color-interaction-primary-strong-pressed );
-}
-.sds-toggle-button__label--checked {
-  --toggle-button-background-color: var( --sds-color-interaction-primary-strong-default );
-  --toggle-button-border-color: var(--toggle-button-background-color);
-  --toggle-button-color: var(--sds-color-text-on-strong);
-}
-.sds-toggle-button__label--checked:hover {
-  --toggle-button-background-color: var( --sds-color-interaction-primary-strong-highlight );
-}
-.sds-toggle-button__label--checked:active {
-  --toggle-button-background-color: var( --sds-color-interaction-primary-strong-pressed );
-}
-.sds-toggle-button__label--checked:focus {
-  --toggle-button-outline: var(--sds-focus-outline);
-}
-.sds-toggle-button__icon {
-  height: var(--sds-typography-fontsize-700);
-  width: var(--sds-typography-fontsize-700);
-  transform: rotateY(0deg) rotate(0deg);
-  transition: transform 0.3s ease;
-  flex-shrink: 0;
-}
-.sds-toggle-button__icon--checked {
-  transform: rotateY(0deg) rotate(-45deg);
-}
-.sds-toggle-button__input {
-  cursor: pointer;
-  position: absolute;
-  opacity: 0;
-}
-.sds-toggle-button__input:focus-visible + .sds-toggle-button__label {
-  --toggle-button-border-color: var( --sds-color-interaction-primary-strong-highlight );
-  --toggle-button-outline: var(--sds-focus-outline);
-}
-.sds-toggle-button__input:focus-visible + .sds-toggle-button__label--checked {
-  --toggle-button-background-color: var( --sds-color-interaction-primary-strong-highlight );
-}
-
 /* src/toggle-segment.pcss */
 .sds-toggle-segment {
   --toggle-segment-border-width: var(--sds-space-border-weight-regular);

package/dist/index.css.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/toggle-switch.pcss","../src/toggle-button.pcss","../src/toggle-segment.pcss"],"sourcesContent":[".sds-toggle-switch {\n  --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n  --toggle-track-width: var(--sds-typography-fontsize-1200);\n  --toggle-thumb-size: var(--sds-typography-fontsize-300);\n  --toggle-border-width: var(--sds-space-border-weight-regular);\n  --toggle-padding: var(--sds-space-padding-minimal);\n  --toggle-thumb-offset: var(--toggle-padding);\n  --toggle-track-background-color: var(--sds-color-layout-background-default);\n  --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n  --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n  --toggle-thumb-color: var(--sds-color-text-on-strong);\n  --toggle-thumb-position: 0;\n}\n\n  .sds-toggle-switch__label {\n    align-items: center;\n    cursor: pointer;\n    display: inline-flex;\n    gap: var(--sds-space-padding-small);\n  }\n\n  .sds-toggle-switch:hover {\n    --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n    --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n  }\n\n  .sds-toggle-switch:active {\n    --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n    --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n  }\n\n  .sds-toggle-switch--checked {\n    --toggle-track-background-color: var(\n      --sds-color-interaction-primary-strong-default\n    );\n    --toggle-track-border-color: var(--toggle-track-background-color);\n    --toggle-thumb-background-color: var(--sds-color-layout-background-default);\n    --toggle-thumb-color: var(--sds-color-text-primary);\n    --toggle-thumb-position: calc(\n      var(--toggle-track-width) - var(--toggle-thumb-size) - 2 *\n        var(--toggle-thumb-offset)\n    );\n  }\n\n  .sds-toggle-switch--checked:hover,\n    .sds-toggle-switch--checked:active {\n      --toggle-thumb-background-color: var(\n        --sds-color-layout-background-default\n      );\n    }\n\n  .sds-toggle-switch--checked:hover {\n      --toggle-track-background-color: var(\n        --sds-color-interaction-primary-strong-highlight\n      );\n      --toggle-track-border-color: var(\n        --sds-color-interaction-primary-strong-highlight\n      );\n    }\n\n  .sds-toggle-switch--checked:active {\n      --toggle-track-background-color: var(\n        --sds-color-interaction-primary-strong-pressed\n      );\n      --toggle-track-border-color: var(\n        --sds-color-interaction-primary-strong-pressed\n      );\n    }\n\n  .sds-toggle-switch__inner {\n    align-items: center;\n    display: inline-flex;\n    padding: calc(var(--sds-space-padding-small) - var(--toggle-border-width)) 0;\n    position: relative;\n  }\n\n  .sds-toggle-switch__label-text {\n    align-items: center;\n    color: var(--sds-color-text-primary);\n    display: flex;\n    font-size: var(--sds-typography-body-default-fontsize);\n    font-weight: var(--sds-typography-body-default-fontweight);\n    line-height: var(--sds-typography-body-default-lineheight);\n    padding: var(--sds-space-padding-tiny);\n  }\n\n  .sds-toggle-switch__track {\n    -webkit-appearance: none;\n            appearance: none;\n    cursor: pointer;\n    background-color: var(--toggle-track-background-color);\n    border: var(--toggle-border-width) solid var(--toggle-track-border-color);\n    border-radius: var(--toggle-thumb-size);\n    height: calc(\n      var(--toggle-thumb-size) + calc(2 * var(--toggle-thumb-offset))\n    );\n    width: var(--toggle-track-width);\n    padding: var(--toggle-padding);\n    transition:\n      background-color var(--toggle-transition-duration),\n      border-color var(--toggle-transition-duration);\n  }\n\n  .sds-toggle-switch__track:focus-visible {\n      outline: var(--sds-focus-outline);\n      outline-offset: 0;\n    }\n\n  .sds-toggle-switch__thumb {\n    align-items: center;\n    background-color: var(--toggle-thumb-background-color);\n    border-radius: var(--sds-space-border-radius-full);\n    display: inline-flex;\n    font-size: var(--sds-typography-fontsize-100);\n    justify-content: center;\n    position: absolute;\n    left: var(--toggle-thumb-offset);\n    height: var(--toggle-thumb-size);\n    width: var(--toggle-thumb-size);\n    transition: all var(--toggle-transition-duration);\n    transform: translateX(var(--toggle-thumb-position));\n    padding: var(--sds-space-border-weight-regular);\n  }\n\n  .sds-toggle-switch__thumb > .sds-icon {\n      transition: all var(--toggle-transition-duration);\n      color: var(--toggle-thumb-color);\n    }\n",".sds-toggle-button {\n  --toggle-button-background-color: inherit;\n  --toggle-button-border-color: var(\n    --sds-color-interaction-primary-strong-default\n  );\n  --toggle-button-color: var(--sds-color-text-primary);\n  --toggle-button-outline: none;\n\n  display: inline-block;\n}\n\n  .sds-toggle-button__label {\n    align-items: center;\n    background-color: var(--toggle-button-background-color);\n    border: var(--sds-space-border-weight-regular) solid\n      var(--toggle-button-border-color);\n    border-radius: var(--sds-space-border-radius-full);\n    color: var(--toggle-button-color);\n    cursor: pointer;\n    display: flex;\n    gap: var(--sds-space-gap-small);\n    font-size: var(--sds-typography-body-l-fontsize);\n    font-weight: var(--sds-typography-body-l-fontweight);\n    line-height: var(--sds-typography-body-l-lineheight);\n    padding: calc(\n      var(--sds-space-padding-small) - var(--sds-space-border-weight-regular)\n    );\n    outline: var(--toggle-button-outline);\n    outline-offset: 0;\n    -webkit-user-select: none;\n            user-select: none;\n  }\n\n  .sds-toggle-button__label-text {\n      display: block;\n      padding: 0 var(--sds-space-padding-tiny);\n    }\n\n  .sds-toggle-button__label:hover {\n      --toggle-button-border-color: var(\n        --sds-color-interaction-primary-strong-highlight\n      );\n    }\n\n  .sds-toggle-button__label:active {\n      --toggle-button-border-color: var(\n        --sds-color-interaction-primary-strong-pressed\n      );\n    }\n\n  .sds-toggle-button__label--checked {\n      --toggle-button-background-color: var(\n        --sds-color-interaction-primary-strong-default\n      );\n      --toggle-button-border-color: var(--toggle-button-background-color);\n      --toggle-button-color: var(--sds-color-text-on-strong);\n    }\n\n  .sds-toggle-button__label--checked:hover {\n        --toggle-button-background-color: var(\n          --sds-color-interaction-primary-strong-highlight\n        );\n      }\n\n  .sds-toggle-button__label--checked:active {\n        --toggle-button-background-color: var(\n          --sds-color-interaction-primary-strong-pressed\n        );\n      }\n\n  .sds-toggle-button__label--checked:focus {\n        --toggle-button-outline: var(--sds-focus-outline);\n      }\n\n  .sds-toggle-button__icon {\n    height: var(--sds-typography-fontsize-700);\n    width: var(--sds-typography-fontsize-700);\n    transform: rotateY(0deg) rotate(0deg);\n    transition: transform 0.3s ease;\n    flex-shrink: 0;\n  }\n\n  .sds-toggle-button__icon--checked {\n      transform: rotateY(0deg) rotate(-45deg);\n    }\n\n  .sds-toggle-button__input {\n    cursor: pointer;\n    position: absolute;\n    opacity: 0;\n  }\n\n  .sds-toggle-button__input:focus-visible + .sds-toggle-button__label {\n      --toggle-button-border-color: var(\n        --sds-color-interaction-primary-strong-highlight\n      );\n      --toggle-button-outline: var(--sds-focus-outline);\n    }\n\n  .sds-toggle-button__input:focus-visible + .sds-toggle-button__label--checked {\n        --toggle-button-background-color: var(\n          --sds-color-interaction-primary-strong-highlight\n        );\n      }\n",".sds-toggle-segment {\n  --toggle-segment-border-width: var(--sds-space-border-weight-regular);\n  --toggle-segment-border: var(--toggle-segment-border-width) solid\n    var(--sds-color-interaction-primary-strong-default);\n}\n\n  .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset {\n    display: flex;\n    align-items: center;\n  }\n\n  .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset .sds-form-fieldset__legend {\n      float: left;\n    }\n\n  .sds-toggle-segment__group {\n    border-radius: var(--sds-space-border-radius-small);\n    display: inline-grid;\n    gap: var(--toggle-segment-border-width);\n    grid-auto-flow: column;\n    padding: var(--sds-space-padding-minimal);\n    outline: var(--toggle-segment-border);\n    outline-offset: calc(var(--toggle-segment-border-width) * -1);\n  }\n\n  .sds-toggle-segment--fixed .sds-toggle-segment__group {\n    grid-auto-columns: 1fr;\n  }\n\n  .sds-toggle-segment__option {\n    align-items: center;\n    border-radius: var(--sds-space-border-radius-minimal);\n    display: flex;\n    justify-content: center;\n    padding: var(--sds-space-padding-minimal) var(--sds-space-padding-tiny);\n  }\n\n  .sds-toggle-segment__option:hover {\n      background: var(--sds-color-interaction-primary-transparent-highlight);\n    }\n\n  .sds-toggle-segment__option:active {\n      background: var(--sds-color-interaction-primary-transparent-pressed);\n    }\n\n  .sds-toggle-segment__option--checked {\n      background-color: var(--sds-color-interaction-primary-strong-default);\n      color: var(--sds-color-text-on-strong);\n    }\n\n  .sds-toggle-segment__option--checked:hover {\n        background-color: var(--sds-color-interaction-primary-strong-highlight);\n      }\n\n  .sds-toggle-segment__option--checked:active {\n        background-color: var(--sds-color-interaction-primary-strong-pressed);\n      }\n\n  .sds-toggle-segment__option:has(:focus-visible) {\n      outline: var(--sds-focus-outline);\n    }\n\n  .sds-toggle-segment__label {\n    display: flex;\n    cursor: pointer;\n    font-size: var(--sds-typography-body-default-fontsize);\n    font-weight: var(--sds-typography-body-default-fontweight);\n    justify-content: center;\n    line-height: var(--sds-typography-body-default-lineheight);\n    min-width: 44px;\n    position: relative;\n    width: 100%;\n  }\n\n  .sds-toggle-segment__input {\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n  }\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../src/toggle-switch.pcss","../src/toggle-segment.pcss"],"sourcesContent":[".sds-toggle-switch {\n  --toggle-transition-duration: var(--sds-effect-animation-duration-medium);\n  --toggle-track-width: var(--sds-typography-fontsize-1200);\n  --toggle-thumb-size: var(--sds-typography-fontsize-300);\n  --toggle-border-width: var(--sds-space-border-weight-regular);\n  --toggle-padding: var(--sds-space-padding-minimal);\n  --toggle-thumb-offset: var(--toggle-padding);\n  --toggle-track-background-color: var(--sds-color-layout-background-default);\n  --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n  --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n  --toggle-thumb-color: var(--sds-color-text-on-strong);\n  --toggle-thumb-position: 0;\n}\n\n  .sds-toggle-switch__label {\n    align-items: center;\n    cursor: pointer;\n    display: inline-flex;\n    gap: var(--sds-space-padding-small);\n  }\n\n  .sds-toggle-switch:hover {\n    --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n    --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n  }\n\n  .sds-toggle-switch:active {\n    --toggle-track-border-color: var(--sds-color-layout-divider-strong);\n    --toggle-thumb-background-color: var(--sds-color-layout-divider-strong);\n  }\n\n  .sds-toggle-switch--checked {\n    --toggle-track-background-color: var(\n      --sds-color-interaction-primary-strong-default\n    );\n    --toggle-track-border-color: var(--toggle-track-background-color);\n    --toggle-thumb-background-color: var(--sds-color-layout-background-default);\n    --toggle-thumb-color: var(--sds-color-text-primary);\n    --toggle-thumb-position: calc(\n      var(--toggle-track-width) - var(--toggle-thumb-size) - 2 *\n        var(--toggle-thumb-offset)\n    );\n  }\n\n  .sds-toggle-switch--checked:hover,\n    .sds-toggle-switch--checked:active {\n      --toggle-thumb-background-color: var(\n        --sds-color-layout-background-default\n      );\n    }\n\n  .sds-toggle-switch--checked:hover {\n      --toggle-track-background-color: var(\n        --sds-color-interaction-primary-strong-highlight\n      );\n      --toggle-track-border-color: var(\n        --sds-color-interaction-primary-strong-highlight\n      );\n    }\n\n  .sds-toggle-switch--checked:active {\n      --toggle-track-background-color: var(\n        --sds-color-interaction-primary-strong-pressed\n      );\n      --toggle-track-border-color: var(\n        --sds-color-interaction-primary-strong-pressed\n      );\n    }\n\n  .sds-toggle-switch__inner {\n    align-items: center;\n    display: inline-flex;\n    padding: calc(var(--sds-space-padding-small) - var(--toggle-border-width)) 0;\n    position: relative;\n  }\n\n  .sds-toggle-switch__label-text {\n    align-items: center;\n    color: var(--sds-color-text-primary);\n    display: flex;\n    font-size: var(--sds-typography-body-default-fontsize);\n    font-weight: var(--sds-typography-body-default-fontweight);\n    line-height: var(--sds-typography-body-default-lineheight);\n    padding: var(--sds-space-padding-tiny);\n  }\n\n  .sds-toggle-switch__track {\n    -webkit-appearance: none;\n            appearance: none;\n    cursor: pointer;\n    background-color: var(--toggle-track-background-color);\n    border: var(--toggle-border-width) solid var(--toggle-track-border-color);\n    border-radius: var(--toggle-thumb-size);\n    height: calc(\n      var(--toggle-thumb-size) + calc(2 * var(--toggle-thumb-offset))\n    );\n    width: var(--toggle-track-width);\n    padding: var(--toggle-padding);\n    transition:\n      background-color var(--toggle-transition-duration),\n      border-color var(--toggle-transition-duration);\n  }\n\n  .sds-toggle-switch__track:focus-visible {\n      outline: var(--sds-focus-outline);\n      outline-offset: 0;\n    }\n\n  .sds-toggle-switch__thumb {\n    align-items: center;\n    background-color: var(--toggle-thumb-background-color);\n    border-radius: var(--sds-space-border-radius-full);\n    display: inline-flex;\n    font-size: var(--sds-typography-fontsize-100);\n    justify-content: center;\n    position: absolute;\n    left: var(--toggle-thumb-offset);\n    height: var(--toggle-thumb-size);\n    width: var(--toggle-thumb-size);\n    transition: all var(--toggle-transition-duration);\n    transform: translateX(var(--toggle-thumb-position));\n    padding: var(--sds-space-border-weight-regular);\n  }\n\n  .sds-toggle-switch__thumb > .sds-icon {\n      transition: all var(--toggle-transition-duration);\n      color: var(--toggle-thumb-color);\n    }\n",".sds-toggle-segment {\n  --toggle-segment-border-width: var(--sds-space-border-weight-regular);\n  --toggle-segment-border: var(--toggle-segment-border-width) solid\n    var(--sds-color-interaction-primary-strong-default);\n}\n\n  .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset {\n    display: flex;\n    align-items: center;\n  }\n\n  .sds-toggle-segment--horizontal .sds-toggle-segment__fieldset .sds-form-fieldset__legend {\n      float: left;\n    }\n\n  .sds-toggle-segment__group {\n    border-radius: var(--sds-space-border-radius-small);\n    display: inline-grid;\n    gap: var(--toggle-segment-border-width);\n    grid-auto-flow: column;\n    padding: var(--sds-space-padding-minimal);\n    outline: var(--toggle-segment-border);\n    outline-offset: calc(var(--toggle-segment-border-width) * -1);\n  }\n\n  .sds-toggle-segment--fixed .sds-toggle-segment__group {\n    grid-auto-columns: 1fr;\n  }\n\n  .sds-toggle-segment__option {\n    align-items: center;\n    border-radius: var(--sds-space-border-radius-minimal);\n    display: flex;\n    justify-content: center;\n    padding: var(--sds-space-padding-minimal) var(--sds-space-padding-tiny);\n  }\n\n  .sds-toggle-segment__option:hover {\n      background: var(--sds-color-interaction-primary-transparent-highlight);\n    }\n\n  .sds-toggle-segment__option:active {\n      background: var(--sds-color-interaction-primary-transparent-pressed);\n    }\n\n  .sds-toggle-segment__option--checked {\n      background-color: var(--sds-color-interaction-primary-strong-default);\n      color: var(--sds-color-text-on-strong);\n    }\n\n  .sds-toggle-segment__option--checked:hover {\n        background-color: var(--sds-color-interaction-primary-strong-highlight);\n      }\n\n  .sds-toggle-segment__option--checked:active {\n        background-color: var(--sds-color-interaction-primary-strong-pressed);\n      }\n\n  .sds-toggle-segment__option:has(:focus-visible) {\n      outline: var(--sds-focus-outline);\n    }\n\n  .sds-toggle-segment__label {\n    display: flex;\n    cursor: pointer;\n    font-size: var(--sds-typography-body-default-fontsize);\n    font-weight: var(--sds-typography-body-default-fontweight);\n    justify-content: center;\n    line-height: var(--sds-typography-body-default-lineheight);\n    min-width: 44px;\n    position: relative;\n    width: 100%;\n  }\n\n  .sds-toggle-segment__input {\n    opacity: 0;\n    position: absolute;\n    pointer-events: none;\n  }\n"],"mappings":"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","names":[]}

package/dist/index.d.mts

@@ -15,19 +15,13 @@ type ToggleSwitchProps = ToggleSwitchBaseProps & ({
 } | {
     label?: never;
     labelFirst?: never;
+    /**
+     * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.
+     */
     "aria-labelledby": string;
 });
 declare const ToggleSwitch: react.ForwardRefExoticComponent<ToggleSwitchProps & react.RefAttributes<HTMLInputElement>>;
 
-interface ToggleButtonProps {
-    checked?: boolean;
-    label: NonNullable<ReactNode>;
-    showIcons?: boolean;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    className?: string;
-}
-declare const ToggleButton: react.ForwardRefExoticComponent<ToggleButtonProps & react.RefAttributes<HTMLInputElement>>;
-
 interface ToggleSegmentProps extends Omit<FieldsetProps, "onChange"> {
     children: ReactNode;
     variant?: "default" | "fixed";
@@ -43,4 +37,4 @@ interface ToggleSegmentOptionProps extends Omit<InputHTMLAttributes<HTMLInputEle
 }
 declare const ToggleSegmentOption: react.ForwardRefExoticComponent<ToggleSegmentOptionProps & react.RefAttributes<HTMLInputElement>>;
 
-export { ToggleButton, type ToggleButtonProps, ToggleSegment, ToggleSegmentOption, type ToggleSegmentOptionProps, type ToggleSegmentProps, ToggleSwitch, type ToggleSwitchProps };
+export { ToggleSegment, ToggleSegmentOption, type ToggleSegmentOptionProps, type ToggleSegmentProps, ToggleSwitch, type ToggleSwitchProps };

package/dist/index.d.ts

@@ -15,19 +15,13 @@ type ToggleSwitchProps = ToggleSwitchBaseProps & ({
 } | {
     label?: never;
     labelFirst?: never;
+    /**
+     * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.
+     */
     "aria-labelledby": string;
 });
 declare const ToggleSwitch: react.ForwardRefExoticComponent<ToggleSwitchProps & react.RefAttributes<HTMLInputElement>>;
 
-interface ToggleButtonProps {
-    checked?: boolean;
-    label: NonNullable<ReactNode>;
-    showIcons?: boolean;
-    onChange?: ChangeEventHandler<HTMLInputElement>;
-    className?: string;
-}
-declare const ToggleButton: react.ForwardRefExoticComponent<ToggleButtonProps & react.RefAttributes<HTMLInputElement>>;
-
 interface ToggleSegmentProps extends Omit<FieldsetProps, "onChange"> {
     children: ReactNode;
     variant?: "default" | "fixed";
@@ -43,4 +37,4 @@ interface ToggleSegmentOptionProps extends Omit<InputHTMLAttributes<HTMLInputEle
 }
 declare const ToggleSegmentOption: react.ForwardRefExoticComponent<ToggleSegmentOptionProps & react.RefAttributes<HTMLInputElement>>;
 
-export { ToggleButton, type ToggleButtonProps, ToggleSegment, ToggleSegmentOption, type ToggleSegmentOptionProps, type ToggleSegmentProps, ToggleSwitch, type ToggleSwitchProps };
+export { ToggleSegment, ToggleSegmentOption, type ToggleSegmentOptionProps, type ToggleSegmentProps, ToggleSwitch, type ToggleSwitchProps };

package/dist/index.js

@@ -1 +1 @@
-"use strict";var e=require("@sikt/sds-icons"),s=require("clsx/lite"),l=require("react"),a=require("react/jsx-runtime"),t=require("@sikt/sds-form"),c=Object.defineProperty,n=Object.defineProperties,o=Object.getOwnPropertyDescriptors,r=Object.getOwnPropertySymbols,d=Object.prototype.hasOwnProperty,i=Object.prototype.propertyIsEnumerable,g=(e,s,l)=>s in e?c(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l,h=(e,s)=>{for(var l in s||(s={}))d.call(s,l)&&g(e,l,s[l]);if(r)for(var l of r(s))i.call(s,l)&&g(e,l,s[l]);return e},m=(e,s)=>n(e,o(s)),u=(e,s)=>{var l={};for(var a in e)d.call(e,a)&&s.indexOf(a)<0&&(l[a]=e[a]);if(null!=e&&r)for(var a of r(e))s.indexOf(a)<0&&i.call(e,a)&&(l[a]=e[a]);return l},b=l.forwardRef((t,c)=>{var n=t,{checked:o=!1,label:r,"aria-labelledby":d,labelFirst:i=!1,showIcons:g=!0,onChange:m,className:b}=n,p=u(n,["checked","label","aria-labelledby","labelFirst","showIcons","onChange","className"]);const x=l.useId(),_=a.jsx("span",{className:"sds-toggle-switch__label-text",children:r}),f=a.jsxs("span",{className:"sds-toggle-switch__inner",children:[a.jsx("input",h({ref:c,id:x,type:"checkbox",role:"switch",className:"sds-toggle-switch__track","aria-labelledby":d,checked:o,onChange:m,readOnly:!m},p)),a.jsxs("span",{className:"sds-toggle-switch__thumb",children:[g&&o&&a.jsx(e.ConfirmIcon,{}),g&&!o&&a.jsx(e.CancelIcon,{})]})]});return a.jsx("div",{className:s.clsx("sds-toggle-switch",o&&"sds-toggle-switch--checked",b),"data-testid":"sds-toggle-switch",children:void 0!==r?a.jsxs("label",{className:"sds-toggle-switch__label",htmlFor:x,children:[i&&_,f,!i&&_]}):f})});b.displayName="ToggleSwitch";var p=l.forwardRef((t,c)=>{var n=t,{checked:o,label:r,showIcons:d=!0,onChange:i,className:g}=n,b=u(n,["checked","label","showIcons","onChange","className"]);const p=l.useId();return a.jsxs("div",m(h({className:s.clsx("sds-toggle-button",g)},b),{children:[a.jsx("input",{ref:c,type:"checkbox",className:"sds-toggle-button__input",onChange:i,readOnly:!i,checked:o,id:p}),a.jsxs("label",{className:s.clsx("sds-toggle-button__label",o&&"sds-toggle-button__label--checked"),htmlFor:p,children:[a.jsx("span",{className:"sds-toggle-button__label-text",children:r}),d&&a.jsx(e.AddAltIcon,{className:s.clsx("sds-toggle-button__icon",o&&"sds-toggle-button__icon--checked")})]})]}))});p.displayName="ToggleButton";var x=l.forwardRef((e,l)=>{var c=e,{children:n,variant:o="default",orientation:r="horizontal",className:d}=c,i=u(c,["children","variant","orientation","className"]);return a.jsx("div",{className:s.clsx("sds-toggle-segment","default"!==o&&"sds-toggle-segment--".concat(o),"sds-toggle-segment--".concat(r),d),children:a.jsx(t.Fieldset,m(h({className:"sds-toggle-segment__fieldset"},i),{ref:l,children:a.jsx("div",{className:"sds-toggle-segment__group",children:n})}))})});x.displayName="ToggleSegment";var _=l.forwardRef((e,c)=>{var n,o,r=e,{value:d,label:i,checked:g,onChange:m,className:b}=r,p=u(r,["value","label","checked","onChange","className"]);const{name:x}=null!=(n=t.useFieldset())?n:{},_=l.useId(),f=null!=(o=p.id)?o:_;return a.jsxs("div",{className:s.clsx("sds-toggle-segment__option",g&&"sds-toggle-segment__option--checked",b),children:[a.jsx("input",h({id:f,name:x,ref:c,type:"radio",onChange:m,className:"sds-toggle-segment__input",value:d,checked:g},p)),a.jsx("label",{className:"sds-toggle-segment__label",htmlFor:f,children:i})]})});_.displayName="ToggleSegmentOption",exports.ToggleButton=p,exports.ToggleSegment=x,exports.ToggleSegmentOption=_,exports.ToggleSwitch=b;//# sourceMappingURL=index.js.map
+"use strict";var e=require("@sikt/sds-icons"),s=require("clsx/lite"),l=require("react"),a=require("react/jsx-runtime"),t=require("@sikt/sds-form"),r=Object.defineProperty,n=Object.defineProperties,c=Object.getOwnPropertyDescriptors,o=Object.getOwnPropertySymbols,i=Object.prototype.hasOwnProperty,d=Object.prototype.propertyIsEnumerable,g=(e,s,l)=>s in e?r(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l,h=(e,s)=>{for(var l in s||(s={}))i.call(s,l)&&g(e,l,s[l]);if(o)for(var l of o(s))d.call(s,l)&&g(e,l,s[l]);return e},m=(e,s)=>{var l={};for(var a in e)i.call(e,a)&&s.indexOf(a)<0&&(l[a]=e[a]);if(null!=e&&o)for(var a of o(e))s.indexOf(a)<0&&d.call(e,a)&&(l[a]=e[a]);return l},u=l.forwardRef((t,r)=>{var n=t,{checked:c=!1,label:o,"aria-labelledby":i,labelFirst:d=!1,showIcons:g=!0,onChange:u,className:p}=n,b=m(n,["checked","label","aria-labelledby","labelFirst","showIcons","onChange","className"]);const f=l.useId(),x=a.jsx("span",{className:"sds-toggle-switch__label-text",children:o}),v=a.jsxs("span",{className:"sds-toggle-switch__inner",children:[a.jsx("input",h({ref:r,id:f,type:"checkbox",role:"switch",className:"sds-toggle-switch__track","aria-labelledby":i,checked:c,onChange:u,readOnly:!u},b)),a.jsxs("span",{className:"sds-toggle-switch__thumb",children:[g&&c&&a.jsx(e.ConfirmIcon,{}),g&&!c&&a.jsx(e.CancelIcon,{})]})]});return a.jsx("div",{className:s.clsx("sds-toggle-switch",c&&"sds-toggle-switch--checked",p),"data-testid":"sds-toggle-switch",children:void 0!==o?a.jsxs("label",{className:"sds-toggle-switch__label",htmlFor:f,children:[d&&x,v,!d&&x]}):v})});u.displayName="ToggleSwitch";var p=l.forwardRef((e,l)=>{var r,o,i=e,{children:d,variant:g="default",orientation:u="horizontal",className:p}=i,b=m(i,["children","variant","orientation","className"]);return a.jsx("div",{className:s.clsx("sds-toggle-segment","default"!==g&&"sds-toggle-segment--".concat(g),"sds-toggle-segment--".concat(u),p),children:a.jsx(t.Fieldset,(r=h({className:"sds-toggle-segment__fieldset"},b),o={ref:l,children:a.jsx("div",{className:"sds-toggle-segment__group",children:d})},n(r,c(o))))})});p.displayName="ToggleSegment";var b=l.forwardRef((e,r)=>{var n,c,o=e,{value:i,label:d,checked:g,onChange:u,className:p}=o,b=m(o,["value","label","checked","onChange","className"]);const{name:f}=null!=(n=t.useFieldset())?n:{},x=l.useId(),v=null!=(c=b.id)?c:x;return a.jsxs("div",{className:s.clsx("sds-toggle-segment__option",g&&"sds-toggle-segment__option--checked",p),children:[a.jsx("input",h({id:v,name:f,ref:r,type:"radio",onChange:u,className:"sds-toggle-segment__input",value:i,checked:g},b)),a.jsx("label",{className:"sds-toggle-segment__label",htmlFor:v,children:d})]})});b.displayName="ToggleSegmentOption",exports.ToggleSegment=p,exports.ToggleSegmentOption=b,exports.ToggleSwitch=u;//# sourceMappingURL=index.js.map

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ToggleSwitch.tsx","../src/ToggleButton.tsx","../src/ToggleSegment.tsx","../src/ToggleSegmentOption.tsx"],"names":["forwardRef","useId","jsx","jsxs","ConfirmIcon","CancelIcon","clsx","AddAltIcon","Fieldset","_a","_b","useFieldset"],"mappings":"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","file":"index.js","sourcesContent":["import { ConfirmIcon, CancelIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEventHandler,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport \"./toggle-switch.pcss\";\n\ninterface ToggleSwitchBaseProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"onChange\" | \"aria-label\" | \"aria-labelledby\"\n  > {\n  checked?: boolean;\n  showIcons?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport type ToggleSwitchProps = ToggleSwitchBaseProps &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        labelFirst?: boolean;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        labelFirst?: never;\n        \"aria-labelledby\": string;\n      }\n  );\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n  (\n    {\n      checked = false,\n      label,\n      \"aria-labelledby\": ariaLabelledby,\n      labelFirst = false,\n      showIcons = true,\n      onChange,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const labelElement = (\n      <span className=\"sds-toggle-switch__label-text\">{label}</span>\n    );\n    const input = (\n      <span className=\"sds-toggle-switch__inner\">\n        <input\n          ref={ref}\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className=\"sds-toggle-switch__track\"\n          aria-labelledby={ariaLabelledby}\n          checked={checked}\n          onChange={onChange}\n          readOnly={!onChange}\n          {...rest}\n        />\n        <span className=\"sds-toggle-switch__thumb\">\n          {showIcons && checked && <ConfirmIcon />}\n          {showIcons && !checked && <CancelIcon />}\n        </span>\n      </span>\n    );\n\n    return (\n      <div\n        className={clsx(\n          \"sds-toggle-switch\",\n          checked && \"sds-toggle-switch--checked\",\n          className,\n        )}\n        data-testid=\"sds-toggle-switch\"\n      >\n        {label !== undefined ? (\n          <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n            {labelFirst && labelElement}\n            {input}\n            {!labelFirst && labelElement}\n          </label>\n        ) : (\n          input\n        )}\n      </div>\n    );\n  },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { AddAltIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ChangeEventHandler, ReactNode, forwardRef, useId } from \"react\";\nimport \"./toggle-button.pcss\";\n\nexport interface ToggleButtonProps {\n  checked?: boolean;\n  label: NonNullable<ReactNode>;\n  showIcons?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport const ToggleButton = forwardRef<HTMLInputElement, ToggleButtonProps>(\n  ({ checked, label, showIcons = true, onChange, className, ...rest }, ref) => {\n    const toggleButtonId = useId();\n    return (\n      <div className={clsx(\"sds-toggle-button\", className)} {...rest}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          className=\"sds-toggle-button__input\"\n          onChange={onChange}\n          readOnly={!onChange}\n          checked={checked}\n          id={toggleButtonId}\n        />\n        <label\n          className={clsx(\n            \"sds-toggle-button__label\",\n            checked && \"sds-toggle-button__label--checked\",\n          )}\n          htmlFor={toggleButtonId}\n        >\n          <span className=\"sds-toggle-button__label-text\">{label}</span>\n          {showIcons && (\n            <AddAltIcon\n              className={clsx(\n                \"sds-toggle-button__icon\",\n                checked && \"sds-toggle-button__icon--checked\",\n              )}\n            />\n          )}\n        </label>\n      </div>\n    );\n  },\n);\nToggleButton.displayName = \"ToggleButton\";\n","import { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, forwardRef } from \"react\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n  children: ReactNode;\n  variant?: \"default\" | \"fixed\";\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ToggleSegment = forwardRef<\n  HTMLFieldSetElement,\n  ToggleSegmentProps\n>(\n  (\n    {\n      children,\n      variant = \"default\",\n      orientation = \"horizontal\",\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        className={clsx(\n          \"sds-toggle-segment\",\n          variant !== \"default\" && `sds-toggle-segment--${variant}`,\n          `sds-toggle-segment--${orientation}`,\n          className,\n        )}\n      >\n        {/* @ts-expect-error TypeScript is struggling, but this is correct */}\n        <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n          <div className=\"sds-toggle-segment__group\">{children}</div>\n        </Fieldset>\n      </div>\n    );\n  },\n);\nToggleSegment.displayName = \"ToggleSegment\";\n","import \"./toggle-segment.pcss\";\nimport { useFieldset } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEvent,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\n\nexport interface ToggleSegmentOptionProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n  value: string | number;\n  label: NonNullable<ReactNode>;\n  checked?: boolean;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n  HTMLInputElement,\n  ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, className, ...rest }, ref) => {\n  const { name } = useFieldset() ?? {};\n  const generatedId = useId();\n  const htmlForId = rest.id ?? generatedId;\n\n  return (\n    <div\n      className={clsx(\n        \"sds-toggle-segment__option\",\n        checked && \"sds-toggle-segment__option--checked\",\n        className,\n      )}\n    >\n      <input\n        id={htmlForId}\n        name={name}\n        ref={ref}\n        type=\"radio\"\n        onChange={onChange}\n        className=\"sds-toggle-segment__input\"\n        value={value}\n        checked={checked}\n        {...rest}\n      />\n      <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n        {label}\n      </label>\n    </div>\n  );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}
+{"version":3,"sources":["../src/ToggleSwitch.tsx","../src/ToggleSegment.tsx","../src/ToggleSegmentOption.tsx"],"names":["forwardRef","useId","jsx","jsxs","ConfirmIcon","CancelIcon","clsx","Fieldset","_a","_b","useFieldset"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,IAAM,YAAe,GAAAA,gBAAA;AAAA,EAC1B,CACE,IAUA,GACG,KAAA;AAXH,IACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,MAAU,OAAA,GAAA,KAAA;AAAA,MACV,KAAA;AAAA,MACA,iBAAmB,EAAA,cAAA;AAAA,MACnB,UAAa,GAAA,KAAA;AAAA,MACb,SAAY,GAAA,IAAA;AAAA,MACZ,QAAA;AAAA,MACA;AAAA,KA/CN,GAwCI,EAQK,EAAA,IAAA,GAAA,SAAA,CARL,EAQK,EAAA;AAAA,MAPH,SAAA;AAAA,MACA,OAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KAAA,CAAA;AAKF,IAAA,MAAM,KAAKC,WAAM,EAAA;AACjB,IAAA,MAAM,YACJ,mBAAAC,cAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,iCAAiC,QAAM,EAAA,KAAA,EAAA,CAAA;AAEzD,IAAA,MAAM,KACJ,mBAAAC,eAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,0BACd,EAAA,QAAA,EAAA;AAAA,sBAAAD,cAAA;AAAA,QAAC,OAAA;AAAA,QAAA,cAAA,CAAA;AAAA,UACC,GAAA;AAAA,UACA,EAAA;AAAA,UACA,IAAK,EAAA,UAAA;AAAA,UACL,IAAK,EAAA,QAAA;AAAA,UACL,SAAU,EAAA,0BAAA;AAAA,UACV,iBAAiB,EAAA,cAAA;AAAA,UACjB,OAAA;AAAA,UACA,QAAA;AAAA,UACA,UAAU,CAAC;AAAA,SACP,EAAA,IAAA;AAAA,OACN;AAAA,sBACAC,eAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,0BACb,EAAA,QAAA,EAAA;AAAA,QAAa,SAAA,IAAA,OAAA,mCAAYC,oBAAY,EAAA,EAAA,CAAA;AAAA,QACrC,SAAa,IAAA,CAAC,OAAW,oBAAAF,cAAA,CAACG,mBAAW,EAAA,EAAA;AAAA,OACxC,EAAA;AAAA,KACF,EAAA,CAAA;AAGF,IACE,uBAAAH,cAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAAI,SAAA;AAAA,UACT,mBAAA;AAAA,UACA,OAAW,IAAA,4BAAA;AAAA,UACX;AAAA,SACF;AAAA,QACA,aAAY,EAAA,mBAAA;AAAA,QAEX,oBAAU,MACT,mBAAAH,eAAA,CAAC,WAAM,SAAU,EAAA,0BAAA,EAA2B,SAAS,EAClD,EAAA,QAAA,EAAA;AAAA,UAAc,UAAA,IAAA,YAAA;AAAA,UACd,KAAA;AAAA,UACA,CAAC,UAAc,IAAA;AAAA,SAAA,EAClB,CAEA,GAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,YAAA,CAAa,WAAc,GAAA,cAAA;ACxFpB,IAAM,aAAgBH,GAAAA,gBAAAA;AAAA,EAI3B,CACE,IAOA,GACG,KAAA;AARH,IACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACV,WAAc,GAAA,YAAA;AAAA,MACd;AAAA,KApBN,GAgBI,EAKK,EAAA,IAAA,GAAA,SAAA,CALL,EAKK,EAAA;AAAA,MAJH,UAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA,KAAA,CAAA;AAKF,IAAA,uBACEE,cAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAWI,EAAAA,SAAAA;AAAA,UACT,oBAAA;AAAA,UACA,OAAA,KAAY,aAAa,sBAAuB,CAAA,MAAA,CAAA,OAAA,CAAA;AAAA,UAChD,sBAAuB,CAAA,MAAA,CAAA,WAAA,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QAGA,QAAAJ,kBAAAA,cAAAA,CAACK,gBAAS,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,SAAA,EAAU,kCAAmC,IAAtD,CAAA,EAAA,EAA4D,GAC3D,EAAA,QAAA,kBAAAL,cAAC,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,2BAAA,EAA6B,UAAS,CACvD,EAAA,CAAA;AAAA;AAAA,KACF;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;ACtBrB,IAAM,mBAAsBF,GAAAA,gBAAAA,CAGjC,CAAC,EAAA,EAAyD,GAAQ,KAAA;AAAjE,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAO,KAAA,EAAA,KAAA,EAAO,OAAS,EAAA,QAAA,EAAU,SAvBtC,EAAA,GAuBG,EAAiD,EAAA,IAAA,GAAA,SAAA,CAAjD,EAAiD,EAAA,CAA/C,OAAO,EAAA,OAAA,EAAO,WAAS,UAAU,EAAA,WAAA,CAAA,CAAA;AAvBtC,EAAA,IAAAQ,GAAAC,EAAAA,GAAAA;AAwBE,EAAM,MAAA,EAAE,MAASD,GAAAA,CAAAA,GAAAA,GAAAE,qBAAA,KAAA,IAAA,GAAAF,MAAiB,EAAC;AACnC,EAAA,MAAM,cAAcP,WAAM,EAAA;AAC1B,EAAA,MAAM,SAAYQ,GAAAA,CAAAA,GAAAA,GAAA,IAAK,CAAA,EAAA,KAAL,OAAAA,GAAW,GAAA,WAAA;AAE7B,EAAA,uBACEN,eAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAWG,EAAAA,SAAAA;AAAA,QACT,4BAAA;AAAA,QACA,OAAW,IAAA,qCAAA;AAAA,QACX;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAJ,cAAAA;AAAA,UAAC,OAAA;AAAA,UAAA,cAAA,CAAA;AAAA,YACC,EAAI,EAAA,SAAA;AAAA,YACJ,IAAA;AAAA,YACA,GAAA;AAAA,YACA,IAAK,EAAA,OAAA;AAAA,YACL,QAAA;AAAA,YACA,SAAU,EAAA,2BAAA;AAAA,YACV,KAAA;AAAA,YACA;AAAA,WACI,EAAA,IAAA;AAAA,SACN;AAAA,wBACAA,cAAC,CAAA,OAAA,EAAA,EAAM,WAAU,2BAA4B,EAAA,OAAA,EAAS,WACnD,QACH,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;AACD,mBAAA,CAAoB,WAAc,GAAA,qBAAA","file":"index.js","sourcesContent":["import { ConfirmIcon, CancelIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEventHandler,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport \"./toggle-switch.pcss\";\n\ninterface ToggleSwitchBaseProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"aria-label\" | \"aria-labelledby\"\n> {\n  checked?: boolean;\n  showIcons?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport type ToggleSwitchProps = ToggleSwitchBaseProps &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        labelFirst?: boolean;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        labelFirst?: never;\n        /**\n         * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n         */\n        \"aria-labelledby\": string;\n      }\n  );\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n  (\n    {\n      checked = false,\n      label,\n      \"aria-labelledby\": ariaLabelledby,\n      labelFirst = false,\n      showIcons = true,\n      onChange,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const labelElement = (\n      <span className=\"sds-toggle-switch__label-text\">{label}</span>\n    );\n    const input = (\n      <span className=\"sds-toggle-switch__inner\">\n        <input\n          ref={ref}\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className=\"sds-toggle-switch__track\"\n          aria-labelledby={ariaLabelledby}\n          checked={checked}\n          onChange={onChange}\n          readOnly={!onChange}\n          {...rest}\n        />\n        <span className=\"sds-toggle-switch__thumb\">\n          {showIcons && checked && <ConfirmIcon />}\n          {showIcons && !checked && <CancelIcon />}\n        </span>\n      </span>\n    );\n\n    return (\n      <div\n        className={clsx(\n          \"sds-toggle-switch\",\n          checked && \"sds-toggle-switch--checked\",\n          className,\n        )}\n        data-testid=\"sds-toggle-switch\"\n      >\n        {label !== undefined ? (\n          <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n            {labelFirst && labelElement}\n            {input}\n            {!labelFirst && labelElement}\n          </label>\n        ) : (\n          input\n        )}\n      </div>\n    );\n  },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, forwardRef } from \"react\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n  children: ReactNode;\n  variant?: \"default\" | \"fixed\";\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ToggleSegment = forwardRef<\n  HTMLFieldSetElement,\n  ToggleSegmentProps\n>(\n  (\n    {\n      children,\n      variant = \"default\",\n      orientation = \"horizontal\",\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        className={clsx(\n          \"sds-toggle-segment\",\n          variant !== \"default\" && `sds-toggle-segment--${variant}`,\n          `sds-toggle-segment--${orientation}`,\n          className,\n        )}\n      >\n        {/* @ts-expect-error TypeScript is struggling, but this is correct */}\n        <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n          <div className=\"sds-toggle-segment__group\">{children}</div>\n        </Fieldset>\n      </div>\n    );\n  },\n);\nToggleSegment.displayName = \"ToggleSegment\";\n","import { useFieldset } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEvent,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\n\nexport interface ToggleSegmentOptionProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\"\n> {\n  value: string | number;\n  label: NonNullable<ReactNode>;\n  checked?: boolean;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n  HTMLInputElement,\n  ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, className, ...rest }, ref) => {\n  const { name } = useFieldset() ?? {};\n  const generatedId = useId();\n  const htmlForId = rest.id ?? generatedId;\n\n  return (\n    <div\n      className={clsx(\n        \"sds-toggle-segment__option\",\n        checked && \"sds-toggle-segment__option--checked\",\n        className,\n      )}\n    >\n      <input\n        id={htmlForId}\n        name={name}\n        ref={ref}\n        type=\"radio\"\n        onChange={onChange}\n        className=\"sds-toggle-segment__input\"\n        value={value}\n        checked={checked}\n        {...rest}\n      />\n      <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n        {label}\n      </label>\n    </div>\n  );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}

package/dist/index.mjs

@@ -1 +1 @@
-import{ConfirmIcon as e,CancelIcon as s,AddAltIcon as l}from"@sikt/sds-icons";import{clsx as a}from"clsx/lite";import{forwardRef as t,useId as n}from"react";import{jsxs as o,jsx as c}from"react/jsx-runtime";import{Fieldset as r,useFieldset as i}from"@sikt/sds-form";var d=Object.defineProperty,g=Object.defineProperties,m=Object.getOwnPropertyDescriptors,h=Object.getOwnPropertySymbols,b=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,u=(e,s,l)=>s in e?d(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l,_=(e,s)=>{for(var l in s||(s={}))b.call(s,l)&&u(e,l,s[l]);if(h)for(var l of h(s))p.call(s,l)&&u(e,l,s[l]);return e},N=(e,s)=>g(e,m(s)),f=(e,s)=>{var l={};for(var a in e)b.call(e,a)&&s.indexOf(a)<0&&(l[a]=e[a]);if(null!=e&&h)for(var a of h(e))s.indexOf(a)<0&&p.call(e,a)&&(l[a]=e[a]);return l},v=t((l,t)=>{var r=l,{checked:i=!1,label:d,"aria-labelledby":g,labelFirst:m=!1,showIcons:h=!0,onChange:b,className:p}=r,u=f(r,["checked","label","aria-labelledby","labelFirst","showIcons","onChange","className"]);const N=n(),v=c("span",{className:"sds-toggle-switch__label-text",children:d}),y=o("span",{className:"sds-toggle-switch__inner",children:[c("input",_({ref:t,id:N,type:"checkbox",role:"switch",className:"sds-toggle-switch__track","aria-labelledby":g,checked:i,onChange:b,readOnly:!b},u)),o("span",{className:"sds-toggle-switch__thumb",children:[h&&i&&c(e,{}),h&&!i&&c(s,{})]})]});return c("div",{className:a("sds-toggle-switch",i&&"sds-toggle-switch--checked",p),"data-testid":"sds-toggle-switch",children:void 0!==d?o("label",{className:"sds-toggle-switch__label",htmlFor:N,children:[m&&v,y,!m&&v]}):y})});v.displayName="ToggleSwitch";var y=t((e,s)=>{var t=e,{checked:r,label:i,showIcons:d=!0,onChange:g,className:m}=t,h=f(t,["checked","label","showIcons","onChange","className"]);const b=n();return o("div",N(_({className:a("sds-toggle-button",m)},h),{children:[c("input",{ref:s,type:"checkbox",className:"sds-toggle-button__input",onChange:g,readOnly:!g,checked:r,id:b}),o("label",{className:a("sds-toggle-button__label",r&&"sds-toggle-button__label--checked"),htmlFor:b,children:[c("span",{className:"sds-toggle-button__label-text",children:i}),d&&c(l,{className:a("sds-toggle-button__icon",r&&"sds-toggle-button__icon--checked")})]})]}))});y.displayName="ToggleButton";var k=t((e,s)=>{var l=e,{children:t,variant:n="default",orientation:o="horizontal",className:i}=l,d=f(l,["children","variant","orientation","className"]);return c("div",{className:a("sds-toggle-segment","default"!==n&&"sds-toggle-segment--".concat(n),"sds-toggle-segment--".concat(o),i),children:c(r,N(_({className:"sds-toggle-segment__fieldset"},d),{ref:s,children:c("div",{className:"sds-toggle-segment__group",children:t})}))})});k.displayName="ToggleSegment";var w=t((e,s)=>{var l,t,r=e,{value:d,label:g,checked:m,onChange:h,className:b}=r,p=f(r,["value","label","checked","onChange","className"]);const{name:u}=null!=(l=i())?l:{},N=n(),v=null!=(t=p.id)?t:N;return o("div",{className:a("sds-toggle-segment__option",m&&"sds-toggle-segment__option--checked",b),children:[c("input",_({id:v,name:u,ref:s,type:"radio",onChange:h,className:"sds-toggle-segment__input",value:d,checked:m},p)),c("label",{className:"sds-toggle-segment__label",htmlFor:v,children:g})]})});w.displayName="ToggleSegmentOption";export{y as ToggleButton,k as ToggleSegment,w as ToggleSegmentOption,v as ToggleSwitch};//# sourceMappingURL=index.mjs.map
+import{ConfirmIcon as e,CancelIcon as s}from"@sikt/sds-icons";import{clsx as l}from"clsx/lite";import{forwardRef as a,useId as t}from"react";import{jsxs as r,jsx as n}from"react/jsx-runtime";import{Fieldset as o,useFieldset as c}from"@sikt/sds-form";var i=Object.defineProperty,d=Object.defineProperties,g=Object.getOwnPropertyDescriptors,m=Object.getOwnPropertySymbols,h=Object.prototype.hasOwnProperty,p=Object.prototype.propertyIsEnumerable,b=(e,s,l)=>s in e?i(e,s,{enumerable:!0,configurable:!0,writable:!0,value:l}):e[s]=l,f=(e,s)=>{for(var l in s||(s={}))h.call(s,l)&&b(e,l,s[l]);if(m)for(var l of m(s))p.call(s,l)&&b(e,l,s[l]);return e},u=(e,s)=>{var l={};for(var a in e)h.call(e,a)&&s.indexOf(a)<0&&(l[a]=e[a]);if(null!=e&&m)for(var a of m(e))s.indexOf(a)<0&&p.call(e,a)&&(l[a]=e[a]);return l},v=a((a,o)=>{var c=a,{checked:i=!1,label:d,"aria-labelledby":g,labelFirst:m=!1,showIcons:h=!0,onChange:p,className:b}=c,v=u(c,["checked","label","aria-labelledby","labelFirst","showIcons","onChange","className"]);const _=t(),N=n("span",{className:"sds-toggle-switch__label-text",children:d}),y=r("span",{className:"sds-toggle-switch__inner",children:[n("input",f({ref:o,id:_,type:"checkbox",role:"switch",className:"sds-toggle-switch__track","aria-labelledby":g,checked:i,onChange:p,readOnly:!p},v)),r("span",{className:"sds-toggle-switch__thumb",children:[h&&i&&n(e,{}),h&&!i&&n(s,{})]})]});return n("div",{className:l("sds-toggle-switch",i&&"sds-toggle-switch--checked",b),"data-testid":"sds-toggle-switch",children:void 0!==d?r("label",{className:"sds-toggle-switch__label",htmlFor:_,children:[m&&N,y,!m&&N]}):y})});v.displayName="ToggleSwitch";var _=a((e,s)=>{var a,t,r=e,{children:c,variant:i="default",orientation:m="horizontal",className:h}=r,p=u(r,["children","variant","orientation","className"]);return n("div",{className:l("sds-toggle-segment","default"!==i&&"sds-toggle-segment--".concat(i),"sds-toggle-segment--".concat(m),h),children:n(o,(a=f({className:"sds-toggle-segment__fieldset"},p),t={ref:s,children:n("div",{className:"sds-toggle-segment__group",children:c})},d(a,g(t))))})});_.displayName="ToggleSegment";var N=a((e,s)=>{var a,o,i=e,{value:d,label:g,checked:m,onChange:h,className:p}=i,b=u(i,["value","label","checked","onChange","className"]);const{name:v}=null!=(a=c())?a:{},_=t(),N=null!=(o=b.id)?o:_;return r("div",{className:l("sds-toggle-segment__option",m&&"sds-toggle-segment__option--checked",p),children:[n("input",f({id:N,name:v,ref:s,type:"radio",onChange:h,className:"sds-toggle-segment__input",value:d,checked:m},b)),n("label",{className:"sds-toggle-segment__label",htmlFor:N,children:g})]})});N.displayName="ToggleSegmentOption";export{_ as ToggleSegment,N as ToggleSegmentOption,v as ToggleSwitch};//# sourceMappingURL=index.mjs.map

package/dist/index.mjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/ToggleSwitch.tsx","../src/ToggleButton.tsx","../src/ToggleSegment.tsx","../src/ToggleSegmentOption.tsx"],"names":["forwardRef","useId","jsxs","clsx","jsx","_a","_b"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAoCO,IAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,CACE,IAUA,GACG,KAAA;AAXH,IACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,MAAU,OAAA,GAAA,KAAA;AAAA,MACV,KAAA;AAAA,MACA,iBAAmB,EAAA,cAAA;AAAA,MACnB,UAAa,GAAA,KAAA;AAAA,MACb,SAAY,GAAA,IAAA;AAAA,MACZ,QAAA;AAAA,MACA;AAAA,KA7CN,GAsCI,EAQK,EAAA,IAAA,GAAA,SAAA,CARL,EAQK,EAAA;AAAA,MAPH,SAAA;AAAA,MACA,OAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KAAA,CAAA;AAKF,IAAA,MAAM,KAAK,KAAM,EAAA;AACjB,IAAA,MAAM,YACJ,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,iCAAiC,QAAM,EAAA,KAAA,EAAA,CAAA;AAEzD,IAAA,MAAM,KACJ,mBAAA,IAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,0BACd,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA,cAAA,CAAA;AAAA,UACC,GAAA;AAAA,UACA,EAAA;AAAA,UACA,IAAK,EAAA,UAAA;AAAA,UACL,IAAK,EAAA,QAAA;AAAA,UACL,SAAU,EAAA,0BAAA;AAAA,UACV,iBAAiB,EAAA,cAAA;AAAA,UACjB,OAAA;AAAA,UACA,QAAA;AAAA,UACA,UAAU,CAAC;AAAA,SACP,EAAA,IAAA;AAAA,OACN;AAAA,sBACA,IAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,0BACb,EAAA,QAAA,EAAA;AAAA,QAAa,SAAA,IAAA,OAAA,wBAAY,WAAY,EAAA,EAAA,CAAA;AAAA,QACrC,SAAa,IAAA,CAAC,OAAW,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA;AAAA,OACxC,EAAA;AAAA,KACF,EAAA,CAAA;AAGF,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,mBAAA;AAAA,UACA,OAAW,IAAA,4BAAA;AAAA,UACX;AAAA,SACF;AAAA,QACA,aAAY,EAAA,mBAAA;AAAA,QAEX,oBAAU,MACT,mBAAA,IAAA,CAAC,WAAM,SAAU,EAAA,0BAAA,EAA2B,SAAS,EAClD,EAAA,QAAA,EAAA;AAAA,UAAc,UAAA,IAAA,YAAA;AAAA,UACd,KAAA;AAAA,UACA,CAAC,UAAc,IAAA;AAAA,SAAA,EAClB,CAEA,GAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,YAAA,CAAa,WAAc,GAAA,cAAA;ACpFpB,IAAM,YAAeA,GAAAA,UAAAA;AAAA,EAC1B,CAAC,IAAoE,GAAQ,KAAA;AAA5E,IAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAS,OAAA,EAAA,KAAA,EAAO,SAAY,GAAA,IAAA,EAAM,UAAU,SAdjD,EAAA,GAcG,EAA4D,EAAA,IAAA,GAAA,SAAA,CAA5D,EAA4D,EAAA,CAA1D,SAAS,EAAA,OAAA,EAAO,aAAkB,UAAU,EAAA,WAAA,CAAA,CAAA;AAC7C,IAAA,MAAM,iBAAiBC,KAAM,EAAA;AAC7B,IACE,uBAAAC,KAAC,KAAI,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,SAAA,EAAWC,KAAK,mBAAqB,EAAA,SAAS,CAAO,EAAA,EAAA,IAAA,CAAA,EAAzD,EACC,QAAA,EAAA;AAAA,sBAAAC,GAAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,GAAA;AAAA,UACA,IAAK,EAAA,UAAA;AAAA,UACL,SAAU,EAAA,0BAAA;AAAA,UACV,QAAA;AAAA,UACA,UAAU,CAAC,QAAA;AAAA,UACX,OAAA;AAAA,UACA,EAAI,EAAA;AAAA;AAAA,OACN;AAAA,sBACAF,IAAAA;AAAA,QAAC,OAAA;AAAA,QAAA;AAAA,UACC,SAAWC,EAAAA,IAAAA;AAAA,YACT,0BAAA;AAAA,YACA,OAAW,IAAA;AAAA,WACb;AAAA,UACA,OAAS,EAAA,cAAA;AAAA,UAET,QAAA,EAAA;AAAA,4BAAAC,GAAC,CAAA,MAAA,EAAA,EAAK,SAAU,EAAA,+BAAA,EAAiC,QAAM,EAAA,KAAA,EAAA,CAAA;AAAA,YACtD,6BACCA,GAAAA;AAAA,cAAC,UAAA;AAAA,cAAA;AAAA,gBACC,SAAWD,EAAAA,IAAAA;AAAA,kBACT,yBAAA;AAAA,kBACA,OAAW,IAAA;AAAA;AACb;AAAA;AACF;AAAA;AAAA;AAEJ,KACF,EAAA,CAAA,CAAA;AAAA;AAGN;AACA,YAAA,CAAa,WAAc,GAAA,cAAA;ACrCpB,IAAM,aAAgBH,GAAAA,UAAAA;AAAA,EAI3B,CACE,IAOA,GACG,KAAA;AARH,IACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACV,WAAc,GAAA,YAAA;AAAA,MACd;AAAA,KApBN,GAgBI,EAKK,EAAA,IAAA,GAAA,SAAA,CALL,EAKK,EAAA;AAAA,MAJH,UAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA,KAAA,CAAA;AAKF,IAAA,uBACEI,GAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAWD,EAAAA,IAAAA;AAAA,UACT,oBAAA;AAAA,UACA,OAAA,KAAY,aAAa,sBAAuB,CAAA,MAAA,CAAA,OAAA,CAAA;AAAA,UAChD,sBAAuB,CAAA,MAAA,CAAA,WAAA,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QAGA,QAAAC,kBAAAA,GAAAA,CAAC,QAAS,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,SAAA,EAAU,kCAAmC,IAAtD,CAAA,EAAA,EAA4D,GAC3D,EAAA,QAAA,kBAAAA,GAAC,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,2BAAA,EAA6B,UAAS,CACvD,EAAA,CAAA;AAAA;AAAA,KACF;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;ACvBrB,IAAM,mBAAsBJ,GAAAA,UAAAA,CAGjC,CAAC,EAAA,EAAyD,GAAQ,KAAA;AAAjE,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAO,KAAA,EAAA,KAAA,EAAO,OAAS,EAAA,QAAA,EAAU,SAtBtC,EAAA,GAsBG,EAAiD,EAAA,IAAA,GAAA,SAAA,CAAjD,EAAiD,EAAA,CAA/C,OAAO,EAAA,OAAA,EAAO,WAAS,UAAU,EAAA,WAAA,CAAA,CAAA;AAtBtC,EAAA,IAAAK,GAAAC,EAAAA,GAAAA;AAuBE,EAAM,MAAA,EAAE,MAASD,GAAAA,CAAAA,GAAAA,GAAA,aAAA,KAAA,IAAA,GAAAA,MAAiB,EAAC;AACnC,EAAA,MAAM,cAAcJ,KAAM,EAAA;AAC1B,EAAA,MAAM,SAAYK,GAAAA,CAAAA,GAAAA,GAAA,IAAK,CAAA,EAAA,KAAL,OAAAA,GAAW,GAAA,WAAA;AAE7B,EAAA,uBACEJ,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAWC,EAAAA,IAAAA;AAAA,QACT,4BAAA;AAAA,QACA,OAAW,IAAA,qCAAA;AAAA,QACX;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAC,GAAAA;AAAA,UAAC,OAAA;AAAA,UAAA,cAAA,CAAA;AAAA,YACC,EAAI,EAAA,SAAA;AAAA,YACJ,IAAA;AAAA,YACA,GAAA;AAAA,YACA,IAAK,EAAA,OAAA;AAAA,YACL,QAAA;AAAA,YACA,SAAU,EAAA,2BAAA;AAAA,YACV,KAAA;AAAA,YACA;AAAA,WACI,EAAA,IAAA;AAAA,SACN;AAAA,wBACAA,GAAC,CAAA,OAAA,EAAA,EAAM,WAAU,2BAA4B,EAAA,OAAA,EAAS,WACnD,QACH,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;AACD,mBAAA,CAAoB,WAAc,GAAA,qBAAA","file":"index.mjs","sourcesContent":["import { ConfirmIcon, CancelIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEventHandler,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport \"./toggle-switch.pcss\";\n\ninterface ToggleSwitchBaseProps\n  extends Omit<\n    InputHTMLAttributes<HTMLInputElement>,\n    \"onChange\" | \"aria-label\" | \"aria-labelledby\"\n  > {\n  checked?: boolean;\n  showIcons?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport type ToggleSwitchProps = ToggleSwitchBaseProps &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        labelFirst?: boolean;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        labelFirst?: never;\n        \"aria-labelledby\": string;\n      }\n  );\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n  (\n    {\n      checked = false,\n      label,\n      \"aria-labelledby\": ariaLabelledby,\n      labelFirst = false,\n      showIcons = true,\n      onChange,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const labelElement = (\n      <span className=\"sds-toggle-switch__label-text\">{label}</span>\n    );\n    const input = (\n      <span className=\"sds-toggle-switch__inner\">\n        <input\n          ref={ref}\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className=\"sds-toggle-switch__track\"\n          aria-labelledby={ariaLabelledby}\n          checked={checked}\n          onChange={onChange}\n          readOnly={!onChange}\n          {...rest}\n        />\n        <span className=\"sds-toggle-switch__thumb\">\n          {showIcons && checked && <ConfirmIcon />}\n          {showIcons && !checked && <CancelIcon />}\n        </span>\n      </span>\n    );\n\n    return (\n      <div\n        className={clsx(\n          \"sds-toggle-switch\",\n          checked && \"sds-toggle-switch--checked\",\n          className,\n        )}\n        data-testid=\"sds-toggle-switch\"\n      >\n        {label !== undefined ? (\n          <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n            {labelFirst && labelElement}\n            {input}\n            {!labelFirst && labelElement}\n          </label>\n        ) : (\n          input\n        )}\n      </div>\n    );\n  },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { AddAltIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport { ChangeEventHandler, ReactNode, forwardRef, useId } from \"react\";\nimport \"./toggle-button.pcss\";\n\nexport interface ToggleButtonProps {\n  checked?: boolean;\n  label: NonNullable<ReactNode>;\n  showIcons?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport const ToggleButton = forwardRef<HTMLInputElement, ToggleButtonProps>(\n  ({ checked, label, showIcons = true, onChange, className, ...rest }, ref) => {\n    const toggleButtonId = useId();\n    return (\n      <div className={clsx(\"sds-toggle-button\", className)} {...rest}>\n        <input\n          ref={ref}\n          type=\"checkbox\"\n          className=\"sds-toggle-button__input\"\n          onChange={onChange}\n          readOnly={!onChange}\n          checked={checked}\n          id={toggleButtonId}\n        />\n        <label\n          className={clsx(\n            \"sds-toggle-button__label\",\n            checked && \"sds-toggle-button__label--checked\",\n          )}\n          htmlFor={toggleButtonId}\n        >\n          <span className=\"sds-toggle-button__label-text\">{label}</span>\n          {showIcons && (\n            <AddAltIcon\n              className={clsx(\n                \"sds-toggle-button__icon\",\n                checked && \"sds-toggle-button__icon--checked\",\n              )}\n            />\n          )}\n        </label>\n      </div>\n    );\n  },\n);\nToggleButton.displayName = \"ToggleButton\";\n","import { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, forwardRef } from \"react\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n  children: ReactNode;\n  variant?: \"default\" | \"fixed\";\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ToggleSegment = forwardRef<\n  HTMLFieldSetElement,\n  ToggleSegmentProps\n>(\n  (\n    {\n      children,\n      variant = \"default\",\n      orientation = \"horizontal\",\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        className={clsx(\n          \"sds-toggle-segment\",\n          variant !== \"default\" && `sds-toggle-segment--${variant}`,\n          `sds-toggle-segment--${orientation}`,\n          className,\n        )}\n      >\n        {/* @ts-expect-error TypeScript is struggling, but this is correct */}\n        <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n          <div className=\"sds-toggle-segment__group\">{children}</div>\n        </Fieldset>\n      </div>\n    );\n  },\n);\nToggleSegment.displayName = \"ToggleSegment\";\n","import \"./toggle-segment.pcss\";\nimport { useFieldset } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEvent,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\n\nexport interface ToggleSegmentOptionProps\n  extends Omit<InputHTMLAttributes<HTMLInputElement>, \"onChange\"> {\n  value: string | number;\n  label: NonNullable<ReactNode>;\n  checked?: boolean;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n  HTMLInputElement,\n  ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, className, ...rest }, ref) => {\n  const { name } = useFieldset() ?? {};\n  const generatedId = useId();\n  const htmlForId = rest.id ?? generatedId;\n\n  return (\n    <div\n      className={clsx(\n        \"sds-toggle-segment__option\",\n        checked && \"sds-toggle-segment__option--checked\",\n        className,\n      )}\n    >\n      <input\n        id={htmlForId}\n        name={name}\n        ref={ref}\n        type=\"radio\"\n        onChange={onChange}\n        className=\"sds-toggle-segment__input\"\n        value={value}\n        checked={checked}\n        {...rest}\n      />\n      <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n        {label}\n      </label>\n    </div>\n  );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}
+{"version":3,"sources":["../src/ToggleSwitch.tsx","../src/ToggleSegment.tsx","../src/ToggleSegmentOption.tsx"],"names":["forwardRef","jsx","clsx","_a","_b","useId","jsxs"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;AAsCO,IAAM,YAAe,GAAA,UAAA;AAAA,EAC1B,CACE,IAUA,GACG,KAAA;AAXH,IACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,MAAU,OAAA,GAAA,KAAA;AAAA,MACV,KAAA;AAAA,MACA,iBAAmB,EAAA,cAAA;AAAA,MACnB,UAAa,GAAA,KAAA;AAAA,MACb,SAAY,GAAA,IAAA;AAAA,MACZ,QAAA;AAAA,MACA;AAAA,KA/CN,GAwCI,EAQK,EAAA,IAAA,GAAA,SAAA,CARL,EAQK,EAAA;AAAA,MAPH,SAAA;AAAA,MACA,OAAA;AAAA,MACA,iBAAA;AAAA,MACA,YAAA;AAAA,MACA,WAAA;AAAA,MACA,UAAA;AAAA,MACA;AAAA,KAAA,CAAA;AAKF,IAAA,MAAM,KAAK,KAAM,EAAA;AACjB,IAAA,MAAM,YACJ,mBAAA,GAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,iCAAiC,QAAM,EAAA,KAAA,EAAA,CAAA;AAEzD,IAAA,MAAM,KACJ,mBAAA,IAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,0BACd,EAAA,QAAA,EAAA;AAAA,sBAAA,GAAA;AAAA,QAAC,OAAA;AAAA,QAAA,cAAA,CAAA;AAAA,UACC,GAAA;AAAA,UACA,EAAA;AAAA,UACA,IAAK,EAAA,UAAA;AAAA,UACL,IAAK,EAAA,QAAA;AAAA,UACL,SAAU,EAAA,0BAAA;AAAA,UACV,iBAAiB,EAAA,cAAA;AAAA,UACjB,OAAA;AAAA,UACA,QAAA;AAAA,UACA,UAAU,CAAC;AAAA,SACP,EAAA,IAAA;AAAA,OACN;AAAA,sBACA,IAAA,CAAC,MAAK,EAAA,EAAA,SAAA,EAAU,0BACb,EAAA,QAAA,EAAA;AAAA,QAAa,SAAA,IAAA,OAAA,wBAAY,WAAY,EAAA,EAAA,CAAA;AAAA,QACrC,SAAa,IAAA,CAAC,OAAW,oBAAA,GAAA,CAAC,UAAW,EAAA,EAAA;AAAA,OACxC,EAAA;AAAA,KACF,EAAA,CAAA;AAGF,IACE,uBAAA,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAW,EAAA,IAAA;AAAA,UACT,mBAAA;AAAA,UACA,OAAW,IAAA,4BAAA;AAAA,UACX;AAAA,SACF;AAAA,QACA,aAAY,EAAA,mBAAA;AAAA,QAEX,oBAAU,MACT,mBAAA,IAAA,CAAC,WAAM,SAAU,EAAA,0BAAA,EAA2B,SAAS,EAClD,EAAA,QAAA,EAAA;AAAA,UAAc,UAAA,IAAA,YAAA;AAAA,UACd,KAAA;AAAA,UACA,CAAC,UAAc,IAAA;AAAA,SAAA,EAClB,CAEA,GAAA;AAAA;AAAA,KAEJ;AAAA;AAGN;AACA,YAAA,CAAa,WAAc,GAAA,cAAA;ACxFpB,IAAM,aAAgBA,GAAAA,UAAAA;AAAA,EAI3B,CACE,IAOA,GACG,KAAA;AARH,IACE,IAAA,EAAA,GAAA,EAAA,EAAA;AAAA,MAAA,QAAA;AAAA,MACA,OAAU,GAAA,SAAA;AAAA,MACV,WAAc,GAAA,YAAA;AAAA,MACd;AAAA,KApBN,GAgBI,EAKK,EAAA,IAAA,GAAA,SAAA,CALL,EAKK,EAAA;AAAA,MAJH,UAAA;AAAA,MACA,SAAA;AAAA,MACA,aAAA;AAAA,MACA;AAAA,KAAA,CAAA;AAKF,IAAA,uBACEC,GAAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,SAAWC,EAAAA,IAAAA;AAAA,UACT,oBAAA;AAAA,UACA,OAAA,KAAY,aAAa,sBAAuB,CAAA,MAAA,CAAA,OAAA,CAAA;AAAA,UAChD,sBAAuB,CAAA,MAAA,CAAA,WAAA,CAAA;AAAA,UACvB;AAAA,SACF;AAAA,QAGA,QAAAD,kBAAAA,GAAAA,CAAC,QAAS,EAAA,aAAA,CAAA,cAAA,CAAA,EAAA,SAAA,EAAU,kCAAmC,IAAtD,CAAA,EAAA,EAA4D,GAC3D,EAAA,QAAA,kBAAAA,GAAC,CAAA,KAAA,EAAA,EAAI,SAAU,EAAA,2BAAA,EAA6B,UAAS,CACvD,EAAA,CAAA;AAAA;AAAA,KACF;AAAA;AAGN;AACA,aAAA,CAAc,WAAc,GAAA,eAAA;ACtBrB,IAAM,mBAAsBD,GAAAA,UAAAA,CAGjC,CAAC,EAAA,EAAyD,GAAQ,KAAA;AAAjE,EAAA,IAAA,EAAA,GAAA,EAAA,EAAE,EAAO,KAAA,EAAA,KAAA,EAAO,OAAS,EAAA,QAAA,EAAU,SAvBtC,EAAA,GAuBG,EAAiD,EAAA,IAAA,GAAA,SAAA,CAAjD,EAAiD,EAAA,CAA/C,OAAO,EAAA,OAAA,EAAO,WAAS,UAAU,EAAA,WAAA,CAAA,CAAA;AAvBtC,EAAA,IAAAG,GAAAC,EAAAA,GAAAA;AAwBE,EAAM,MAAA,EAAE,MAASD,GAAAA,CAAAA,GAAAA,GAAA,aAAA,KAAA,IAAA,GAAAA,MAAiB,EAAC;AACnC,EAAA,MAAM,cAAcE,KAAM,EAAA;AAC1B,EAAA,MAAM,SAAYD,GAAAA,CAAAA,GAAAA,GAAA,IAAK,CAAA,EAAA,KAAL,OAAAA,GAAW,GAAA,WAAA;AAE7B,EAAA,uBACEE,IAAAA;AAAA,IAAC,KAAA;AAAA,IAAA;AAAA,MACC,SAAWJ,EAAAA,IAAAA;AAAA,QACT,4BAAA;AAAA,QACA,OAAW,IAAA,qCAAA;AAAA,QACX;AAAA,OACF;AAAA,MAEA,QAAA,EAAA;AAAA,wBAAAD,GAAAA;AAAA,UAAC,OAAA;AAAA,UAAA,cAAA,CAAA;AAAA,YACC,EAAI,EAAA,SAAA;AAAA,YACJ,IAAA;AAAA,YACA,GAAA;AAAA,YACA,IAAK,EAAA,OAAA;AAAA,YACL,QAAA;AAAA,YACA,SAAU,EAAA,2BAAA;AAAA,YACV,KAAA;AAAA,YACA;AAAA,WACI,EAAA,IAAA;AAAA,SACN;AAAA,wBACAA,GAAC,CAAA,OAAA,EAAA,EAAM,WAAU,2BAA4B,EAAA,OAAA,EAAS,WACnD,QACH,EAAA,KAAA,EAAA;AAAA;AAAA;AAAA,GACF;AAEJ,CAAC;AACD,mBAAA,CAAoB,WAAc,GAAA,qBAAA","file":"index.mjs","sourcesContent":["import { ConfirmIcon, CancelIcon } from \"@sikt/sds-icons\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEventHandler,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\nimport \"./toggle-switch.pcss\";\n\ninterface ToggleSwitchBaseProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\" | \"aria-label\" | \"aria-labelledby\"\n> {\n  checked?: boolean;\n  showIcons?: boolean;\n  onChange?: ChangeEventHandler<HTMLInputElement>;\n  className?: string;\n}\n\nexport type ToggleSwitchProps = ToggleSwitchBaseProps &\n  (\n    | {\n        label: NonNullable<ReactNode>;\n        labelFirst?: boolean;\n        \"aria-labelledby\"?: never;\n      }\n    | {\n        label?: never;\n        labelFirst?: never;\n        /**\n         * Id (or id's) that identifies the element (or elements) that labels the element it is applied to. For accessibility these should NOT be visually hidden.\n         */\n        \"aria-labelledby\": string;\n      }\n  );\n\nexport const ToggleSwitch = forwardRef<HTMLInputElement, ToggleSwitchProps>(\n  (\n    {\n      checked = false,\n      label,\n      \"aria-labelledby\": ariaLabelledby,\n      labelFirst = false,\n      showIcons = true,\n      onChange,\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    const id = useId();\n    const labelElement = (\n      <span className=\"sds-toggle-switch__label-text\">{label}</span>\n    );\n    const input = (\n      <span className=\"sds-toggle-switch__inner\">\n        <input\n          ref={ref}\n          id={id}\n          type=\"checkbox\"\n          role=\"switch\"\n          className=\"sds-toggle-switch__track\"\n          aria-labelledby={ariaLabelledby}\n          checked={checked}\n          onChange={onChange}\n          readOnly={!onChange}\n          {...rest}\n        />\n        <span className=\"sds-toggle-switch__thumb\">\n          {showIcons && checked && <ConfirmIcon />}\n          {showIcons && !checked && <CancelIcon />}\n        </span>\n      </span>\n    );\n\n    return (\n      <div\n        className={clsx(\n          \"sds-toggle-switch\",\n          checked && \"sds-toggle-switch--checked\",\n          className,\n        )}\n        data-testid=\"sds-toggle-switch\"\n      >\n        {label !== undefined ? (\n          <label className=\"sds-toggle-switch__label\" htmlFor={id}>\n            {labelFirst && labelElement}\n            {input}\n            {!labelFirst && labelElement}\n          </label>\n        ) : (\n          input\n        )}\n      </div>\n    );\n  },\n);\nToggleSwitch.displayName = \"ToggleSwitch\";\n","import { Fieldset, FieldsetProps } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport { ReactNode, forwardRef } from \"react\";\nimport \"./toggle-segment.pcss\";\n\nexport interface ToggleSegmentProps extends Omit<FieldsetProps, \"onChange\"> {\n  children: ReactNode;\n  variant?: \"default\" | \"fixed\";\n  orientation?: \"horizontal\" | \"vertical\";\n}\n\nexport const ToggleSegment = forwardRef<\n  HTMLFieldSetElement,\n  ToggleSegmentProps\n>(\n  (\n    {\n      children,\n      variant = \"default\",\n      orientation = \"horizontal\",\n      className,\n      ...rest\n    },\n    ref,\n  ) => {\n    return (\n      <div\n        className={clsx(\n          \"sds-toggle-segment\",\n          variant !== \"default\" && `sds-toggle-segment--${variant}`,\n          `sds-toggle-segment--${orientation}`,\n          className,\n        )}\n      >\n        {/* @ts-expect-error TypeScript is struggling, but this is correct */}\n        <Fieldset className=\"sds-toggle-segment__fieldset\" {...rest} ref={ref}>\n          <div className=\"sds-toggle-segment__group\">{children}</div>\n        </Fieldset>\n      </div>\n    );\n  },\n);\nToggleSegment.displayName = \"ToggleSegment\";\n","import { useFieldset } from \"@sikt/sds-form\";\nimport { clsx } from \"clsx/lite\";\nimport {\n  ChangeEvent,\n  InputHTMLAttributes,\n  ReactNode,\n  forwardRef,\n  useId,\n} from \"react\";\n\nexport interface ToggleSegmentOptionProps extends Omit<\n  InputHTMLAttributes<HTMLInputElement>,\n  \"onChange\"\n> {\n  value: string | number;\n  label: NonNullable<ReactNode>;\n  checked?: boolean;\n  onChange: (event: ChangeEvent<HTMLInputElement>) => void;\n}\n\nexport const ToggleSegmentOption = forwardRef<\n  HTMLInputElement,\n  ToggleSegmentOptionProps\n>(({ value, label, checked, onChange, className, ...rest }, ref) => {\n  const { name } = useFieldset() ?? {};\n  const generatedId = useId();\n  const htmlForId = rest.id ?? generatedId;\n\n  return (\n    <div\n      className={clsx(\n        \"sds-toggle-segment__option\",\n        checked && \"sds-toggle-segment__option--checked\",\n        className,\n      )}\n    >\n      <input\n        id={htmlForId}\n        name={name}\n        ref={ref}\n        type=\"radio\"\n        onChange={onChange}\n        className=\"sds-toggle-segment__input\"\n        value={value}\n        checked={checked}\n        {...rest}\n      />\n      <label className=\"sds-toggle-segment__label\" htmlFor={htmlForId}>\n        {label}\n      </label>\n    </div>\n  );\n});\nToggleSegmentOption.displayName = \"ToggleSegmentOption\";\n\nexport default ToggleSegmentOption;\n"]}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@sikt/sds-toggle",
-  "version": "6.1.3",
+  "version": "7.0.0",
   "license": "UNLICENSED",
   "homepage": "https://designsystem.sikt.no/",
   "repository": {
@@ -36,8 +36,8 @@
   },
   "dependencies": {
     "@sikt/sds-core": "^4.6.0",
-    "@sikt/sds-form": "^4.1.0",
-    "@sikt/sds-icons": "^3.0.0"
+    "@sikt/sds-form": "^4.1.1",
+    "@sikt/sds-icons": "^4.1.0"
   },
   "peerDependencies": {
     "@types/react": "^18.0.0 || ^19.0.0",