@rikstv/shared-components 0.8.1 → 1.1.79

package/dist/components/textfield/TextField.js

@@ -0,0 +1,57 @@
+import { forwardRef } from "react";
+import { g as generateId } from "../checkbox/Checkbox.js";
+import { a as jsxs, F as Fragment, j as jsx } from "../core/RiksTV.js";
+var textfield = /* @__PURE__ */ (() => '.rds-textfield{--textfield-color: var(--rds-foreground-primary);--textfield-label-color: var(--rds-foreground-primary);--textfield-border-color: var(--rds-foreground-primary);--textfield-selected-color: var(--rds-heading-accent);--textfield-error-color: var(--rds-feedback-error-text);--textfield-bg: var(--rds-background-primary);max-width:335px;position:relative}.rds-textfield--full-width{max-width:unset}.rds-textfield-input{border:2px solid var(--textfield-border-color);border-radius:12px;outline:none;padding:0 var(--rds-spacing--16) 0;height:3rem;width:100%;margin:0;background-color:var(--input-border-bg);color:var(--textfield-color)}.rds-textfield-input.rds-textfield-input{-webkit-appearance:none}.rds-textfield-input::placeholder{opacity:0}.rds-textfield-input:focus{font-family:var(--rds-font-family-headlines);color:var(--textfield-color);box-shadow:0 0 0 1px var(--textfield-border-color)}.rds-textfield-input:focus:not([data-valid=false]){--textfield-border-color: var(--textfield-selected-color)}.rds-textfield-input--error{--textfield-border-color: var(--textfield-error-color);box-shadow:0 0 0 1px var(--textfield-border-color)}.rds-textfield-input::-webkit-search-cancel-button{-webkit-appearance:none;display:none}.rds-textfield-input:-webkit-autofill{box-shadow:0 0 0 30px var(--textfield-bg) inset;-webkit-text-fill-color:var(--textfield-color)}.rds-textfield-input:not(:placeholder-shown)+span{top:-.15rem;font-size:1rem;--textfield-label-color: var(--rds-foreground-overlay-heavy)}.rds-textfield-input:focus::-moz-focus-inner{border-style:none;outline:0}.rds-textfield-input:focus button::-moz-focus-inner,.rds-textfield-input:focus [type=button]::-moz-focus-inner,.rds-textfield-input:focus [type=reset]::-moz-focus-inner,.rds-textfield-input:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-textfield-input:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-textfield-input:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-textfield-label{user-select:none}.rds-textfield-label:after{position:absolute;right:-1rem;top:1.25rem;content:"";width:18px;height:14px;transform:scale(0);transform-origin:bottom left;transition:.12s transform ease-in-out;clip-path:path("M5.77 12.98L0.39 7.6C-0.13 7.08 -0.13 6.24 0.39 5.72C0.91 5.2 1.75 5.2 2.27 5.72L6.12 9.56L15.29 0.39C15.81 -0.13 16.66 -0.13 17.18 0.39C17.7 0.91 17.7 1.75 17.18 2.27L6.46 12.98C6.27 13.17 5.96 13.17 5.77 12.98Z");box-shadow:inset 2.1em 2.1em var(--textfield-color)}.rds-textfield-label[data-valid=true]:after{transform:scale(1)}.rds-textfield-label span{position:absolute;cursor:text;background-color:var(--textfield-bg);padding:0 8px;top:50%;margin-left:6px;left:var(--rds-spacing--4);transform:translateY(-50%);transition:.2s ease-in-out;transition-property:top,font-size;border-radius:8px;font-size:1.125rem;color:var(--textfield-label-color);font-family:var(--rds-font-family-body);font-weight:400;line-height:1.5}.rds-textfield--error-text{font-family:var(--rds-font-family-headlines);font-size:clamp(.875rem,calc(.8214285714rem + .1488095238vw),1rem);font-weight:400;line-height:1.5;color:var(--textfield-error-color);margin:.25rem 0 0;padding-left:var(--rds-spacing--16);display:block}.rds-textfield:focus-within .rds-textfield-label span{top:-.15rem;font-size:1rem;--textfield-label-color: var(--rds-foreground-overlay-heavy)}.rds-light .rds-textfield,.rds-light.rds-textfield{--textfield-color: var(--rds-button-primary-fg);--textfield-border-color: var(--rds-button-primary-fg);--textfield-selected-color: var(--rds-button-primary-fg);--textfield-bg: var(--surface-background);--textfield-error-color: var(--rds-feedback-error-object)}.rds-light .rds-textfield-input--error,.rds-light.rds-textfield-input--error{--textfield-border-color: var(--textfield-error-color)}.rds-light .rds-textfield--error-text,.rds-light.rds-textfield--error-text{color:var(--textfield-error-color)}.rds-light .rds-textfield-label,.rds-light.rds-textfield-label{--textfield-label-color: var(--rds-background-primary)}.rds-light .rds-textfield-label.rds-white,.rds-light.rds-textfield-label.rds-white{--textfield-bg: var(--rds-foreground-primary)}.rds-light .rds-textfield-input:not(:placeholder-shown)+span,.rds-light.rds-textfield-input:not(:placeholder-shown)+span{top:-.15rem;font-size:1rem;--textfield-label-color: var(--rds-background-primary)}.rds-light .rds-textfield-input:focus:not([data-valid=false]),.rds-light.rds-textfield-input:focus:not([data-valid=false]){--textfield-border-color: var(--textfield-selected-color)}.rds-light .rds-textfield-label:focus-within span,.rds-light.rds-textfield-label:focus-within span{--textfield-label-color: var(--rds-background-primary)}\n')();
+const TextField = forwardRef(({
+  className = "",
+  id,
+  labelClass = "",
+  type = "text",
+  fullWidth = false,
+  valid,
+  lightBackground = false,
+  label,
+  errorMessage,
+  ...props
+}, ref) => {
+  const errorTextId = generateId();
+  const generatedId = generateId(id);
+  const whiteBackground = lightBackground === "white";
+  const isValid = !errorMessage && valid;
+  const ariaInvalid = !!errorMessage || valid === false;
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("div", {
+      className: `rds-textfield
+      ${lightBackground ? "rds-light" : ""}
+      ${whiteBackground ? "rds-white" : ""}
+      ${fullWidth ? "rds-textfield--full-width" : ""}  
+      ${className}`,
+      children: /* @__PURE__ */ jsxs("label", {
+        htmlFor: generatedId,
+        className: `rds-textfield-label ${labelClass} ${lightBackground ? "rds-light" : ""} ${whiteBackground ? "rds-white" : ""}`,
+        "data-valid": isValid,
+        children: [/* @__PURE__ */ jsx("input", {
+          ref,
+          id: generatedId,
+          className: `
+            rds-textfield-input ${ariaInvalid ? "rds-textfield-input--error" : ""} 
+            `,
+          type,
+          placeholder: label,
+          "aria-invalid": ariaInvalid,
+          "aria-describedby": errorMessage ? errorTextId : void 0,
+          "data-valid": isValid,
+          ...props
+        }), /* @__PURE__ */ jsx("span", {
+          children: label
+        })]
+      })
+    }), errorMessage && /* @__PURE__ */ jsx("span", {
+      id: errorTextId,
+      className: `rds-textfield rds-textfield--error-text ${lightBackground ? "rds-light" : ""}`,
+      children: errorMessage
+    })]
+  });
+});
+TextField.displayName = "TextField";
+export { TextField as T };

package/dist/components/textfield/textfield.scss

@@ -0,0 +1,178 @@
+@use "../core/mixin/focus" as mix;
+@use "../core/mixin/fluid";
+@use "../core/mixin/rem";
+
+.rds-textfield {
+  --textfield-color: var(--rds-foreground-primary);
+  --textfield-label-color: var(--rds-foreground-primary);
+  --textfield-border-color: var(--rds-foreground-primary);
+  --textfield-selected-color: var(--rds-heading-accent);
+  --textfield-error-color: var(--rds-feedback-error-text);
+  --textfield-bg: var(--rds-background-primary);
+  max-width: 335px;
+  position: relative;
+
+  &--full-width {
+    max-width: unset;
+  }
+
+  &-input {
+    border: 2px solid var(--textfield-border-color);
+    border-radius: 12px;
+    outline: none;
+    padding: 0 var(--rds-spacing--16) 0;
+    height: 3rem;
+    width: 100%;
+    margin: 0;
+
+    &.rds-textfield-input {
+      //fixes bug on iOS15 where it would always set background-color to white if input type was 'search'
+      -webkit-appearance: none;
+    }
+
+    background-color: var(--input-border-bg);
+    color: var(--textfield-color);
+
+    &::placeholder {
+      opacity: 0;
+    }
+
+    &:focus {
+      font-family: var(--rds-font-family-headlines);
+      color: var(--textfield-color);
+      box-shadow: 0 0 0 1px var(--textfield-border-color);
+
+      &:not([data-valid="false"]) {
+        --textfield-border-color: var(--textfield-selected-color);
+      }
+    }
+
+    &--error {
+      --textfield-border-color: var(--textfield-error-color);
+      box-shadow: 0 0 0 1px var(--textfield-border-color);
+    }
+
+    &::-webkit-search-cancel-button {
+      -webkit-appearance: none;
+      display: none;
+    }
+
+    &:-webkit-autofill {
+      box-shadow: 0 0 0 30px var(--textfield-bg) inset;
+      -webkit-text-fill-color: var(--textfield-color);
+    }
+
+    &:not(:placeholder-shown) + span {
+      top: -0.15rem;
+      font-size: 1rem;
+      --textfield-label-color: var(--rds-foreground-overlay-heavy);
+    }
+
+    @include mix.with-keyboard-focus;
+  }
+
+  &-label {
+    user-select: none;
+    &::after {
+      position: absolute;
+      right: -1rem;
+      top: 1.25rem;
+      content: "";
+      width: 18px;
+      height: 14px;
+      transform: scale(0);
+      transform-origin: bottom left;
+      transition: 120ms transform ease-in-out;
+      clip-path: path(
+        "M5.77 12.98L0.39 7.6C-0.13 7.08 -0.13 6.24 0.39 5.72C0.91 5.2 1.75 5.2 2.27 5.72L6.12 9.56L15.29 0.39C15.81 -0.13 16.66 -0.13 17.18 0.39C17.7 0.91 17.7 1.75 17.18 2.27L6.46 12.98C6.27 13.17 5.96 13.17 5.77 12.98Z"
+      );
+      box-shadow: inset 2.1em 2.1em var(--textfield-color);
+    }
+
+    &[data-valid="true"]::after {
+      transform: scale(1);
+    }
+  }
+
+  &-label span {
+    position: absolute;
+    cursor: text;
+    background-color: var(--textfield-bg);
+    padding: 0 8px;
+    top: 50%;
+    margin-left: 6px;
+    left: var(--rds-spacing--4);
+    transform: translateY(-50%);
+    transition: 0.2s ease-in-out;
+    transition-property: top, font-size;
+    border-radius: 8px;
+
+    font-size: rem.convert(18px);
+    color: var(--textfield-label-color);
+    font-family: var(--rds-font-family-body);
+    font-weight: normal;
+    line-height: 1.5;
+  }
+
+  &--error-text {
+    font-family: var(--rds-font-family-headlines);
+    font-size: fluid.get-clamp(14, 16);
+    font-weight: normal;
+    line-height: 1.5;
+    color: var(--textfield-error-color);
+    margin: 0.25rem 0 0 0;
+    padding-left: var(--rds-spacing--16);
+    display: block;
+  }
+
+  &:focus-within {
+    .rds-textfield-label span {
+      top: -0.15rem;
+      font-size: 1rem;
+      --textfield-label-color: var(--rds-foreground-overlay-heavy);
+    }
+  }
+}
+
+.rds-light {
+  .rds-textfield,
+  &.rds-textfield {
+    --textfield-color: var(--rds-button-primary-fg);
+    --textfield-border-color: var(--rds-button-primary-fg);
+    --textfield-selected-color: var(--rds-button-primary-fg);
+    --textfield-bg: var(--surface-background);
+    --textfield-error-color: var(--rds-feedback-error-object);
+
+    &-input--error {
+      --textfield-border-color: var(--textfield-error-color);
+    }
+
+    &--error-text {
+      color: var(--textfield-error-color);
+    }
+
+    &-label {
+      --textfield-label-color: var(--rds-background-primary);
+
+      &.rds-white {
+        --textfield-bg: var(--rds-foreground-primary);
+      }
+    }
+
+    &-input:not(:placeholder-shown) + span {
+      top: -0.15rem;
+      font-size: 1rem;
+      --textfield-label-color: var(--rds-background-primary);
+    }
+
+    &-input:focus {
+      &:not([data-valid="false"]) {
+        --textfield-border-color: var(--textfield-selected-color);
+      }
+    }
+
+    &-label:focus-within span {
+      --textfield-label-color: var(--rds-background-primary);
+    }
+  }
+}

package/dist/components/toggle/FieldSet.js

@@ -0,0 +1,29 @@
+import { forwardRef } from "react";
+import { R as RadioContext } from "./RadioToggle.js";
+import { j as jsx, a as jsxs } from "../core/RiksTV.js";
+const FieldSet = forwardRef(({
+  legend,
+  children,
+  name,
+  className = "",
+  showLegend = false,
+  ...rest
+}, ref) => {
+  return /* @__PURE__ */ jsx(RadioContext.Provider, {
+    value: {
+      radioName: name
+    },
+    children: /* @__PURE__ */ jsxs("fieldset", {
+      "data-testid": "fieldset",
+      ...rest,
+      className: `rds-field-set ${className}`,
+      ref,
+      children: [/* @__PURE__ */ jsx("legend", {
+        className: `rds-field-set__legend ${showLegend ? "" : "sr-only"}`,
+        children: legend
+      }), children]
+    })
+  });
+});
+FieldSet.displayName = "FieldSet";
+export { FieldSet as F };

package/dist/components/toggle/RadioToggle.js

@@ -0,0 +1,30 @@
+import { createContext, forwardRef, useContext } from "react";
+import "../button/Button.js";
+import { a as jsxs, j as jsx } from "../core/RiksTV.js";
+const RadioContext = createContext({ radioName: "" });
+var radioToggle = /* @__PURE__ */ (() => '.rds-button__shared,.rds-radio-toggle{--common-button--primary-color: var(--rds-button-primary-fg);--common-button--primary-bg: var(--rds-accent-color);--common-button--primary-hover-bg: var(--rds-accent-hover);--common-button--primary-pressed-bg: var(--rds-accent-color);--common-button--secondary-border-color: var(--rds-foreground-primary);--common-button--secondary-color: var(--rds-foreground-primary);--common-button--secondary-bg: var(--rds-background-primary);--common-button--secondary-hover-color: var(--rds-background-primary);--common-button--secondary-hover-bg: var(--rds-foreground-primary);--common-button--secondary-pressed-color: var(--rds-button-secondary-pressed-fg);--common-button--secondary-pressed-bg: var(--rds-button-secondary-pressed-bg);--common-button--tertiary-bg: var(--rds-button-tertirary-bg);--common-button--tertiary-color: var(--rds-foreground-primary);--common-button--tertiary-hover-bg: var(--rds-button-tertiary-hover-bg);--common-button--tertiary-hover-color: var(--rds-foreground-primary);--common-button--tertiary-pressed-bg: var(--rds-background-secondary);--common-button--tertiary-pressed-color: var(--rds-foreground-primary);--common-button--disabled-bg: var(--rds-foreground-secondary);--common-button--disabled-color: var(--rds-foreground-tertiary);border:none;width:auto;background:transparent;line-height:normal;-webkit-appearance:none;display:flex;transition:125ms ease-in-out;transition-property:color,box-shadow,background-color;font-family:var(--rds-font-family-m-headlines)}.rds-button__shared::-moz-focus-inner,.rds-radio-toggle::-moz-focus-inner{border:0;padding:0}.rds-button__shared--primary{color:var(--common-button--primary-color);background-color:var(--common-button--primary-bg)}.rds-button__shared--primary:hover{background-color:var(--common-button--primary-hover-bg)}.rds-button__shared--primary:active{box-shadow:none;background-color:var(--common-button--primary-pressed-bg)}.rds-button__shared--secondary{background-color:var(--common-button--secondary-bg);box-shadow:inset 0 0 0 2px var(--common-button--secondary-border-color);color:var(--common-button--secondary-color)}.rds-button__shared--secondary:hover{background-color:var(--common-button--secondary-hover-bg);color:var(--common-button--secondary-hover-color)}.rds-button__shared--secondary:active{background-color:var(--common-button--secondary-pressed-bg);color:var(--common-button--secondary-pressed-color);border-color:var(--common-button--secondary-pressed-bg)}.rds-button__shared--tertiary,.rds-radio-toggle{background-color:var(--common-button--tertiary-bg);color:var(--common-button--tertiary-color)}.rds-button__shared--tertiary:hover,.rds-radio-toggle:hover{background-color:var(--common-button--tertiary-hover-bg);color:var(--common-button--tertiary-hover-color)}.rds-button__shared--tertiary:active,.rds-radio-toggle:active{background-color:var(--common-button--tertiary-pressed-bg);color:var(--common-button--tertiary-pressed-color)}.rds-button__shared:disabled,.rds-radio-toggle:disabled{background-color:var(--common-button--disabled-bg);color:var(--common-button--disabled-color);box-shadow:none;cursor:not-allowed;border:none}.rds-button__shared:hover,.rds-radio-toggle:hover{box-shadow:var(--rds-box-shadow--default)}.rds-button__shared:active,.rds-radio-toggle:active{box-shadow:none}.rds-button__shared:focus::-moz-focus-inner,.rds-radio-toggle:focus::-moz-focus-inner{border-style:none;outline:0}.rds-button__shared:focus button::-moz-focus-inner,.rds-radio-toggle:focus button::-moz-focus-inner,.rds-button__shared:focus [type=button]::-moz-focus-inner,.rds-radio-toggle:focus [type=button]::-moz-focus-inner,.rds-button__shared:focus [type=reset]::-moz-focus-inner,.rds-radio-toggle:focus [type=reset]::-moz-focus-inner,.rds-button__shared:focus [type=submit]::-moz-focus-inner,.rds-radio-toggle:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-button__shared:focus input[type=button]::-moz-focus-inner,.rds-radio-toggle:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-button__shared:focus,html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-radio-toggle:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-light .rds-button__shared--primary,.rds-light.rds-button__shared--primary{--common-button--primary-color: var(--rds-foreground-primary);--common-button--primary-bg: var(--rds-button-primary-fg)}.rds-light .rds-button__shared--primary:hover,.rds-light.rds-button__shared--primary:hover{--common-button--primary-hover-bg: var(--rds-foreground-tertiary)}.rds-light .rds-button__shared--primary:active,.rds-light.rds-button__shared--primary:active{box-shadow:none;--common-button--primary-pressed-bg: var(--rds-background-primary)}.rds-light .rds-button__shared--primary:disabled,.rds-light.rds-button__shared--primary:disabled{--common-button--disabled-color: var(--rds-button-tertiary-hover-bg)}.rds-light .rds-button__shared--secondary,.rds-light.rds-button__shared--secondary{--common-button--secondary-color: var(--rds-button-tertiary-hover-bg);--common-button--secondary-border-color: var(--rds-button-tertiary-hover-bg);--common-button--secondary-bg: var(--surface-background)}.rds-light .rds-button__shared--secondary:hover,.rds-light.rds-button__shared--secondary:hover{--common-button--secondary-hover-bg: var(--rds-button-primary-fg);--common-button--secondary-hover-color: var(--rds-foreground-primary)}.rds-light .rds-button__shared--secondary:active,.rds-light.rds-button__shared--secondary:active{--common-button--secondary-pressed-color: var(--rds-foreground-primary);--common-button--secondary-pressed-bg: var(--rds-button-primary-fg)}.rds-light .rds-button__shared--secondary:disabled,.rds-light.rds-button__shared--secondary:disabled{--common-button--disabled-color: var(--rds-button-primary-fg)}.rds-light.rds-white.rds-button__shared--secondary{--common-button--secondary-bg: var(--rds-foreground-primary)}.rds-transparent.rds-button__shared--secondary{--common-button--secondary-bg: transparent}.rds-arrow-button,.rds-button,.rds-radio-toggle{--fluid-block: clamp(.65625rem, 2vw, .78125rem);--fluid-inline: clamp(1rem, 2vw, 1.5rem);padding:var(--fluid-block) var(--fluid-inline);border-radius:var(--rds-roundness--button);overflow-y:hidden;cursor:pointer;font-size:1.125rem}.rds-arrow-button__icon,.rds-button__icon{display:flex;align-items:center;align-self:center;margin-right:var(--rds-spacing--16);width:1.125rem}.rds-arrow-button__icon>svg,.rds-button__icon>svg{width:100%}.rds-arrow-button__postfix,.rds-button__postfix{position:relative;display:flex;align-items:center;margin-left:var(--rds-spacing--16);padding-left:var(--rds-spacing--16)}.rds-arrow-button__postfix:before,.rds-button__postfix:before{content:" ";position:absolute;width:1px;background-color:currentColor;height:220%;left:0}.rds-arrow-button--loading:disabled,.rds-button--loading:disabled{cursor:wait!important;position:relative;overflow:hidden}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rds-arrow-button--loading:disabled:before,.rds-button--loading:disabled:before{content:"";position:absolute;inset:0;background-color:var(--rds-background-overlay-medium)}.rds-arrow-button--loading:disabled:after,.rds-button--loading:disabled:after{--button-spinner-size: 24px;--button-spinner-width: 3px;--calculated-spinner-size: calc( calc(var(--button-spinner-size) + var(--button-spinner-width) + var(--button-spinner-width)) / 2 );content:"";position:absolute;left:calc(50% - var(--calculated-spinner-size));top:calc(50% - var(--calculated-spinner-size));height:var(--button-spinner-size);width:var(--button-spinner-size);background-color:transparent;border-top:var(--button-spinner-width) solid var(--rds-accent-color-dark);border-left:var(--button-spinner-width) solid var(--rds-accent-color-dark);border-right:var(--button-spinner-width) solid var(--rds-accent-color-dark);border-bottom:var(--button-spinner-width) solid transparent;border-radius:50px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:spin;animation-timing-function:linear}.rds-arrow-button--loading:disabled:hover,.rds-button--loading:disabled:hover{box-shadow:none}.rds-field-set{border:none;margin:0;padding:0;display:flex}.rds-field-set__legend{margin-bottom:var(--rds-spacing--8)}.rds-radio-toggle{position:relative;padding:0;background-color:var(--rds-foreground-overlay-soft);color:#fff;margin:0 var(--rds-spacing--8);display:block;max-width:25ch;min-width:7ch;overflow:hidden;border-radius:var(--rds-roundness--button)}.rds-radio-toggle:hover{background-color:var(--rds-background-secondary)}.rds-radio-toggle:active{background-color:var(--rds-background-overlay-soft);color:#fff}.rds-radio-toggle__label{width:100%;display:grid;place-items:center;transition:125ms ease background-color;padding:.78125rem var(--rds-spacing--24);box-sizing:border-box;user-select:none}.rds-radio-toggle__input{position:absolute;opacity:0}.rds-radio-toggle__input:checked+.rds-radio-toggle__label{background-color:var(--rds-foreground-tertiary)}.rds-radio-toggle__input:active+.rds-radio-toggle__label{background-color:var(--rds-foreground-overlay-soft)}.rds-radio-toggle:focus::-moz-focus-inner{border-style:none;outline:0}.rds-radio-toggle:focus button::-moz-focus-inner,.rds-radio-toggle:focus [type=button]::-moz-focus-inner,.rds-radio-toggle:focus [type=reset]::-moz-focus-inner,.rds-radio-toggle:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-radio-toggle:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-radio-toggle:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-radio-toggle:focus-within::-moz-focus-inner{border-style:none;outline:0}.rds-radio-toggle:focus-within button::-moz-focus-inner,.rds-radio-toggle:focus-within [type=button]::-moz-focus-inner,.rds-radio-toggle:focus-within [type=reset]::-moz-focus-inner,.rds-radio-toggle:focus-within [type=submit]::-moz-focus-inner{border-style:none}.rds-radio-toggle:focus-within input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-radio-toggle:focus-within{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}\n')();
+const RadioToggleInput = forwardRef(({
+  label,
+  name,
+  className = "",
+  ...rest
+}, ref) => {
+  const {
+    radioName
+  } = useContext(RadioContext);
+  return /* @__PURE__ */ jsxs("label", {
+    className: `rds-radio-toggle ${className}`,
+    children: [/* @__PURE__ */ jsx("input", {
+      className: "rds-radio-toggle__input",
+      ...rest,
+      ref,
+      type: "radio",
+      name: radioName || name
+    }), /* @__PURE__ */ jsx("span", {
+      className: "rds-radio-toggle__label",
+      children: label
+    })]
+  });
+});
+RadioToggleInput.displayName = "RadioToggleInput";
+export { RadioContext as R, RadioToggleInput as a };

package/dist/{toggle → components/toggle}/radioToggle.scss

@@ -18,6 +18,7 @@
   @extend .rds-button;
   @extend .rds-button__shared--tertiary;
   // button reset
+  position: relative;
   padding: 0;
   background-color: var(--rds-foreground-overlay-soft);
   color: #fff;
@@ -30,7 +31,7 @@
   border-radius: var(--rds-roundness--button);
 
   &:hover {
-    background-color: var(--rds-background-tertiary);
+    background-color: var(--rds-background-secondary);
   }
 
   &:active {

package/dist/{toggleButton → components/toggleButton}/ToggleButton.d.ts

@@ -12,6 +12,7 @@ interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
         }>;
     };
     iconClass?: string;
+    innerClass?: string;
 }
 export declare const ToggleButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLInputElement>>;
 export {};

package/dist/components/toggleButton/ToggleButton.js

@@ -0,0 +1,70 @@
+import { forwardRef, useRef, useState } from "react";
+import { g as generateId } from "../checkbox/Checkbox.js";
+import { a as jsxs, j as jsx } from "../core/RiksTV.js";
+var toggleButton = /* @__PURE__ */ (() => '.rds-button__shared,.rds-toggle-button{--common-button--primary-color: var(--rds-button-primary-fg);--common-button--primary-bg: var(--rds-accent-color);--common-button--primary-hover-bg: var(--rds-accent-hover);--common-button--primary-pressed-bg: var(--rds-accent-color);--common-button--secondary-border-color: var(--rds-foreground-primary);--common-button--secondary-color: var(--rds-foreground-primary);--common-button--secondary-bg: var(--rds-background-primary);--common-button--secondary-hover-color: var(--rds-background-primary);--common-button--secondary-hover-bg: var(--rds-foreground-primary);--common-button--secondary-pressed-color: var(--rds-button-secondary-pressed-fg);--common-button--secondary-pressed-bg: var(--rds-button-secondary-pressed-bg);--common-button--tertiary-bg: var(--rds-button-tertirary-bg);--common-button--tertiary-color: var(--rds-foreground-primary);--common-button--tertiary-hover-bg: var(--rds-button-tertiary-hover-bg);--common-button--tertiary-hover-color: var(--rds-foreground-primary);--common-button--tertiary-pressed-bg: var(--rds-background-secondary);--common-button--tertiary-pressed-color: var(--rds-foreground-primary);--common-button--disabled-bg: var(--rds-foreground-secondary);--common-button--disabled-color: var(--rds-foreground-tertiary);border:none;width:auto;background:transparent;line-height:normal;-webkit-appearance:none;display:flex;transition:125ms ease-in-out;transition-property:color,box-shadow,background-color;font-family:var(--rds-font-family-m-headlines)}.rds-button__shared::-moz-focus-inner,.rds-toggle-button::-moz-focus-inner{border:0;padding:0}.rds-button__shared--primary{color:var(--common-button--primary-color);background-color:var(--common-button--primary-bg)}.rds-button__shared--primary:hover{background-color:var(--common-button--primary-hover-bg)}.rds-button__shared--primary:active{box-shadow:none;background-color:var(--common-button--primary-pressed-bg)}.rds-button__shared--secondary{background-color:var(--common-button--secondary-bg);box-shadow:inset 0 0 0 2px var(--common-button--secondary-border-color);color:var(--common-button--secondary-color)}.rds-button__shared--secondary:hover{background-color:var(--common-button--secondary-hover-bg);color:var(--common-button--secondary-hover-color)}.rds-button__shared--secondary:active{background-color:var(--common-button--secondary-pressed-bg);color:var(--common-button--secondary-pressed-color);border-color:var(--common-button--secondary-pressed-bg)}.rds-button__shared--tertiary,.rds-toggle-button{background-color:var(--common-button--tertiary-bg);color:var(--common-button--tertiary-color)}.rds-button__shared--tertiary:hover,.rds-toggle-button:hover{background-color:var(--common-button--tertiary-hover-bg);color:var(--common-button--tertiary-hover-color)}.rds-button__shared--tertiary:active,.rds-toggle-button:active{background-color:var(--common-button--tertiary-pressed-bg);color:var(--common-button--tertiary-pressed-color)}.rds-button__shared:disabled,.rds-toggle-button:disabled{background-color:var(--common-button--disabled-bg);color:var(--common-button--disabled-color);box-shadow:none;cursor:not-allowed;border:none}.rds-button__shared:hover,.rds-toggle-button:hover{box-shadow:var(--rds-box-shadow--default)}.rds-button__shared:active,.rds-toggle-button:active{box-shadow:none}.rds-button__shared:focus::-moz-focus-inner,.rds-toggle-button:focus::-moz-focus-inner{border-style:none;outline:0}.rds-button__shared:focus button::-moz-focus-inner,.rds-toggle-button:focus button::-moz-focus-inner,.rds-button__shared:focus [type=button]::-moz-focus-inner,.rds-toggle-button:focus [type=button]::-moz-focus-inner,.rds-button__shared:focus [type=reset]::-moz-focus-inner,.rds-toggle-button:focus [type=reset]::-moz-focus-inner,.rds-button__shared:focus [type=submit]::-moz-focus-inner,.rds-toggle-button:focus [type=submit]::-moz-focus-inner{border-style:none}.rds-button__shared:focus input[type=button]::-moz-focus-inner,.rds-toggle-button:focus input[type=button]::-moz-focus-inner{outline:0}html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-button__shared:focus,html:not([data-mousenavigation]):not([data-touchnavigation]) .rds-toggle-button:focus{outline-offset:2px;outline:2px solid var(--rds-feedback-info);transition:outline-offset .25s ease}.rds-light .rds-button__shared--primary,.rds-light.rds-button__shared--primary{--common-button--primary-color: var(--rds-foreground-primary);--common-button--primary-bg: var(--rds-button-primary-fg)}.rds-light .rds-button__shared--primary:hover,.rds-light.rds-button__shared--primary:hover{--common-button--primary-hover-bg: var(--rds-foreground-tertiary)}.rds-light .rds-button__shared--primary:active,.rds-light.rds-button__shared--primary:active{box-shadow:none;--common-button--primary-pressed-bg: var(--rds-background-primary)}.rds-light .rds-button__shared--primary:disabled,.rds-light.rds-button__shared--primary:disabled{--common-button--disabled-color: var(--rds-button-tertiary-hover-bg)}.rds-light .rds-button__shared--secondary,.rds-light.rds-button__shared--secondary{--common-button--secondary-color: var(--rds-button-tertiary-hover-bg);--common-button--secondary-border-color: var(--rds-button-tertiary-hover-bg);--common-button--secondary-bg: var(--surface-background)}.rds-light .rds-button__shared--secondary:hover,.rds-light.rds-button__shared--secondary:hover{--common-button--secondary-hover-bg: var(--rds-button-primary-fg);--common-button--secondary-hover-color: var(--rds-foreground-primary)}.rds-light .rds-button__shared--secondary:active,.rds-light.rds-button__shared--secondary:active{--common-button--secondary-pressed-color: var(--rds-foreground-primary);--common-button--secondary-pressed-bg: var(--rds-button-primary-fg)}.rds-light .rds-button__shared--secondary:disabled,.rds-light.rds-button__shared--secondary:disabled{--common-button--disabled-color: var(--rds-button-primary-fg)}.rds-light.rds-white.rds-button__shared--secondary{--common-button--secondary-bg: var(--rds-foreground-primary)}.rds-transparent.rds-button__shared--secondary{--common-button--secondary-bg: transparent}.rds-arrow-button,.rds-button,.rds-toggle-button{--fluid-block: clamp(.65625rem, 2vw, .78125rem);--fluid-inline: clamp(1rem, 2vw, 1.5rem);padding:var(--fluid-block) var(--fluid-inline);border-radius:var(--rds-roundness--button);overflow-y:hidden;cursor:pointer;font-size:1.125rem}.rds-arrow-button__icon,.rds-button__icon,.rds-toggle-button__icon{display:flex;align-items:center;align-self:center;margin-right:var(--rds-spacing--16);width:1.125rem}.rds-arrow-button__icon>svg,.rds-button__icon>svg,.rds-toggle-button__icon>svg{width:100%}.rds-arrow-button__postfix,.rds-button__postfix{position:relative;display:flex;align-items:center;margin-left:var(--rds-spacing--16);padding-left:var(--rds-spacing--16)}.rds-arrow-button__postfix:before,.rds-button__postfix:before{content:" ";position:absolute;width:1px;background-color:currentColor;height:220%;left:0}.rds-arrow-button--loading:disabled,.rds-button--loading:disabled{cursor:wait!important;position:relative;overflow:hidden}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.rds-arrow-button--loading:disabled:before,.rds-button--loading:disabled:before{content:"";position:absolute;inset:0;background-color:var(--rds-background-overlay-medium)}.rds-arrow-button--loading:disabled:after,.rds-button--loading:disabled:after{--button-spinner-size: 24px;--button-spinner-width: 3px;--calculated-spinner-size: calc( calc(var(--button-spinner-size) + var(--button-spinner-width) + var(--button-spinner-width)) / 2 );content:"";position:absolute;left:calc(50% - var(--calculated-spinner-size));top:calc(50% - var(--calculated-spinner-size));height:var(--button-spinner-size);width:var(--button-spinner-size);background-color:transparent;border-top:var(--button-spinner-width) solid var(--rds-accent-color-dark);border-left:var(--button-spinner-width) solid var(--rds-accent-color-dark);border-right:var(--button-spinner-width) solid var(--rds-accent-color-dark);border-bottom:var(--button-spinner-width) solid transparent;border-radius:50px;animation-duration:1s;animation-fill-mode:forwards;animation-iteration-count:infinite;animation-name:spin;animation-timing-function:linear}.rds-arrow-button--loading:disabled:hover,.rds-button--loading:disabled:hover{box-shadow:none}.rds-icon-button{--default-icon-size: 3rem;--default-icon-margin: .75rem;border-radius:50%;max-height:var(--default-icon-size);max-width:var(--default-icon-size);display:flex;justify-content:center;align-items:center;box-sizing:border-box;margin:0;padding:0}.rds-icon-button .rds-button__icon,.rds-icon-button .rds-toggle-button__icon{margin:0;box-sizing:border-box;margin:var(--default-icon-margin);height:var(--default-icon-size);width:var(--default-icon-size)}.rds-icon-button .rds-button__icon>svg,.rds-icon-button .rds-toggle-button__icon>svg{width:100%}.rds-toggle-button{display:inline-block;user-select:none}.rds-toggle-button--no-label{padding-inline:var(--rds-spacing--16)}.rds-toggle-button__input{opacity:0;position:absolute}.rds-toggle-button__icon{margin-right:0;width:auto}.rds-toggle-button__icon svg{height:23px;width:auto}.rds-toggle-button__icon+.rds-toggle-button__text{margin-left:var(--rds-spacing--16)}.rds-toggle-button__content{display:flex;align-items:center}.rds-toggle-button__input:checked+.rds-toggle-button{background-color:var(--rds-foreground-tertiary)}.rds-toggle-button__input:checked+.rds-toggle-button:active{background-color:var(--rds-foreground-overlay-medium)}\n')();
+const ToggleButton = forwardRef(({
+  defaultChecked,
+  showLabel = true,
+  icons,
+  iconClass = "",
+  children,
+  onChange,
+  id,
+  className = "",
+  innerClass = "",
+  ...rest
+}, ref) => {
+  const internalRef = useRef(null);
+  const [internalId] = useState(generateId(id));
+  const [isChecked, setIsChecked] = useState(!!defaultChecked);
+  const CheckedIcon = icons && "checkedIcon" in icons ? icons.checkedIcon : null;
+  const UncheckedIcon = icons && "uncheckedIcon" in icons ? icons.uncheckedIcon : null;
+  const ToggleIcon = icons && "toggleIcon" in icons ? icons.toggleIcon : null;
+  const inputRef = ref || internalRef;
+  const handleChange = (e) => {
+    var _a;
+    if (typeof onChange === "function") {
+      onChange(e);
+    }
+    if (typeof inputRef !== "function") {
+      setIsChecked(!!((_a = inputRef.current) == null ? void 0 : _a.checked));
+    } else {
+      setIsChecked(!isChecked);
+    }
+  };
+  return /* @__PURE__ */ jsxs("div", {
+    className,
+    children: [/* @__PURE__ */ jsx("input", {
+      id: internalId,
+      ref: inputRef,
+      type: "checkbox",
+      className: "rds-toggle-button__input",
+      onChange: handleChange,
+      defaultChecked,
+      ...rest
+    }), /* @__PURE__ */ jsx("label", {
+      "data-testid": "toggle-button__label",
+      className: `rds-toggle-button ${showLabel ? "" : "rds-toggle-button--no-label"}`,
+      htmlFor: internalId,
+      children: /* @__PURE__ */ jsxs("span", {
+        className: "rds-toggle-button__content",
+        children: [icons && /* @__PURE__ */ jsxs("span", {
+          className: `rds-toggle-button__icon ${iconClass}`,
+          children: [ToggleIcon && /* @__PURE__ */ jsx(ToggleIcon, {
+            checked: isChecked
+          }), CheckedIcon && isChecked && /* @__PURE__ */ jsx(CheckedIcon, {}), UncheckedIcon && !isChecked && /* @__PURE__ */ jsx(UncheckedIcon, {})]
+        }), /* @__PURE__ */ jsx("span", {
+          "data-testid": "toggle-button__label__text",
+          className: `
+              rds-toggle-button__text
+            ${showLabel ? "" : "sr-only"}            
+            ${innerClass}
+            `,
+          children
+        })]
+      })
+    })]
+  });
+});
+ToggleButton.displayName = "ToggleButton";
+export { ToggleButton as T };

package/dist/{toggleButton → components/toggleButton}/toggleButton.scss

@@ -10,13 +10,28 @@
   display: inline-block;
   user-select: none;
 
+  &--no-label {
+    padding-inline: var(--rds-spacing--16);
+  }
+
   &__input {
     opacity: 0;
     position: absolute;
   }
 
-  &__rounded {
+  &__icon {
     @extend .rds-button__icon;
+    margin-right: 0;
+    width: auto;
+
+    & svg {
+      height: 23px;
+      width: auto;
+    }
+
+    & + .rds-toggle-button__text {
+      margin-left: var(--rds-spacing--16);
+    }
   }
 
   &__content {
@@ -33,11 +48,4 @@
       }
     }
   }
-
-  &--round {
-    @extend .rds-icon-button;
-    .rds-toggle-button__rounded {
-      margin: 0;
-    }
-  }
 }

package/dist/components/toggleLinkButton/ToggleLinkButton.d.ts

@@ -0,0 +1,10 @@
+import { InputHTMLAttributes } from "react";
+import "./toggleLinkButton.scss";
+interface Props extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    children: string;
+    toggledContentId: string;
+    iconClass?: string;
+    lightBackground?: boolean;
+}
+export declare const ToggleLinkButton: import("react").ForwardRefExoticComponent<Props & import("react").RefAttributes<HTMLInputElement>>;
+export {};

package/dist/components/toggleLinkButton/ToggleLinkButton.js

@@ -0,0 +1,60 @@
+import { forwardRef, useRef, useState } from "react";
+import { g as generateId } from "../checkbox/Checkbox.js";
+import { C as Chevron } from "../icons/Chevron.js";
+import { a as jsxs, F as Fragment, j as jsx } from "../core/RiksTV.js";
+var toggleLinkButton = /* @__PURE__ */ (() => ".rds-toggle-link-button{--border-color: var(--rds-toggle-collapsed);display:inline-block;user-select:none}.rds-toggle-link-button__input{opacity:0;position:absolute}.rds-toggle-link-button__input:checked+.rds-toggle-link-button{--chevron-direction: 180deg;--border-color: var(--rds-toggle-expanded)}.rds-toggle-link-button__content{display:flex;align-items:center}.rds-toggle-link-button__content>span:first-child{border-bottom:2px solid var(--border-color);padding-bottom:7px}.rds-toggle-link-button__chevron{padding-left:var(--rds-spacing--8)}.rds-toggle-link-button__chevron>svg{height:100%;width:20px;transform:rotate(var(--chevron-direction));transition:transform 125ms ease-in-out;transform-origin:center}.rds-toggle-link-button__chevron>svg>path{fill:currentColor}.rds-light{--border-color: var(--rds-foreground-tertiary)}.rds-light .rds-toggle-link-button__input:checked+.rds-toggle-link-button{--border-color: var(--rds-background-secondary)}.rds-light .rds-toggle-link-button{color:var(--rds-button-primary-fg)}\n")();
+const ToggleLinkButton = forwardRef(({
+  defaultChecked,
+  toggledContentId,
+  iconClass = "",
+  lightBackground,
+  children,
+  onChange,
+  id,
+  className = "",
+  ...rest
+}, ref) => {
+  const internalRef = useRef(null);
+  const [internalId] = useState(generateId(id));
+  const [isChecked, setIsChecked] = useState(!!defaultChecked);
+  const inputRef = ref || internalRef;
+  const handleChange = (e) => {
+    var _a;
+    if (typeof onChange === "function") {
+      onChange(e);
+    }
+    if (typeof inputRef !== "function") {
+      setIsChecked(!!((_a = inputRef.current) == null ? void 0 : _a.checked));
+    } else {
+      setIsChecked(!isChecked);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, {
+    children: [/* @__PURE__ */ jsx("input", {
+      id: internalId,
+      ref: inputRef,
+      type: "checkbox",
+      className: "rds-toggle-link-button__input",
+      onChange: handleChange,
+      checked: isChecked,
+      "aria-controls": toggledContentId,
+      ...rest
+    }), /* @__PURE__ */ jsx("label", {
+      "data-testid": "toggle-link-button__label",
+      className: `rds-toggle-link-button ${lightBackground ? "rds-light" : ""} ${className}`,
+      htmlFor: internalId,
+      children: /* @__PURE__ */ jsxs("span", {
+        className: "rds-toggle-link-button__content",
+        children: [/* @__PURE__ */ jsx("span", {
+          "data-testid": `toggle-link-button__label__text`,
+          children
+        }), /* @__PURE__ */ jsx("span", {
+          className: `rds-toggle-link-button__chevron ${iconClass}`,
+          children: /* @__PURE__ */ jsx(Chevron, {})
+        })]
+      })
+    })]
+  });
+});
+ToggleLinkButton.displayName = "ToggleLinkButton";
+export { ToggleLinkButton as T };

package/dist/components/toggleLinkButton/toggleLinkButton.scss

@@ -0,0 +1,54 @@
+.rds-toggle-link-button {
+  --border-color: var(--rds-toggle-collapsed);
+
+  display: inline-block;
+  user-select: none;
+
+  &__input {
+    opacity: 0;
+    position: absolute;
+  }
+
+  &__input:checked + .rds-toggle-link-button {
+    --chevron-direction: 180deg;
+    --border-color: var(--rds-toggle-expanded);
+  }
+
+  &__content {
+    display: flex;
+    align-items: center;
+
+    & > span:first-child {
+      border-bottom: 2px solid var(--border-color);
+      padding-bottom: 7px;
+    }
+  }
+
+  &__chevron {
+    padding-left: var(--rds-spacing--8);
+
+    & > svg {
+      height: 100%;
+      width: 20px;
+
+      & > path {
+        fill: currentColor;
+      }
+      transform: rotate(var(--chevron-direction));
+      transition: transform 125ms ease-in-out;
+      transform-origin: center;
+    }
+  }
+}
+
+.rds-light {
+  --border-color: var(--rds-foreground-tertiary);
+
+  .rds-toggle-link-button__input:checked + .rds-toggle-link-button {
+    --border-color: var(--rds-background-secondary);
+  }
+
+  .rds-toggle-link-button {
+    color: var(--rds-button-primary-fg);
+  }
+}

package/dist/{typography → components/typography}/Typography.d.ts

@@ -3,7 +3,7 @@ import "./typography.scss";
 declare type HeadingLevels = 1 | 2 | 3 | 4;
 declare type AcceptedHTMLElements = HTMLSpanElement | HTMLHeadingElement | HTMLParagraphElement;
 interface Props<T extends AcceptedHTMLElements> extends HTMLAttributes<T> {
-    lookLike?: `title-${HeadingLevels}` | "display-title" | "body" | "sub-body" | "tag" | "bold" | "meta";
+    lookLike?: `title-${HeadingLevels}` | "sub-title-2" | "display-title" | "lead" | "body" | "sub-body" | "tag" | "bold" | "meta" | "span";
     className?: string;
     lightBackground?: boolean;
 }
@@ -12,9 +12,11 @@ export declare const H1: ForwardRefExoticComponent<Props<HTMLHeadingElement> & i
 export declare const H2: ForwardRefExoticComponent<Props<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
 export declare const H3: ForwardRefExoticComponent<Props<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
 export declare const H4: ForwardRefExoticComponent<Props<HTMLHeadingElement> & import("react").RefAttributes<HTMLHeadingElement>>;
+export declare const Lead: ForwardRefExoticComponent<Props<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
 export declare const Body: ForwardRefExoticComponent<Props<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
 export declare const SubBody: ForwardRefExoticComponent<Props<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
 export declare const Tag: ForwardRefExoticComponent<Props<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
 export declare const Bold: ForwardRefExoticComponent<Props<HTMLParagraphElement> & import("react").RefAttributes<HTMLParagraphElement>>;
 export declare const Meta: ForwardRefExoticComponent<Props<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
+export declare const Span: ForwardRefExoticComponent<Props<HTMLSpanElement> & import("react").RefAttributes<HTMLSpanElement>>;
 export {};