npm - @raspberrypifoundation/design-system-react - Versions diffs - 2.10.1 → 2.10.3 - Mend

@raspberrypifoundation/design-system-react 2.10.1 → 2.10.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (12) hide show

package/dist/design-system-react.css +1 -1
package/dist/scss/components/burger-menu.scss +10 -4
package/dist/scss/components/button.scss +21 -25
package/dist/scss/components/forms/input-checkbox.scss +4 -2
package/dist/scss/components/forms/input-radio.scss +4 -2
package/dist/scss/components/layout/decorative-section.scss +50 -25
package/dist/scss/components/switch.scss +15 -14
package/dist/scss/components/tag.scss +8 -5
package/dist/scss/properties/colors/_inputs.scss +3 -1
package/dist/types/src/stories/Button.stories.d.ts +16 -8
package/dist/types/src/stories/Button.stories.d.ts.map +1 -1
package/package.json +2 -2

package/dist/design-system-react.css CHANGED Viewed

	@@ -1 +1 @@
1	- @import"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined";@import"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded";@import"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp";.rpf-accordion{--background-color: var(--rpf-white);--border-color: var(--rpf-grey-50);--border-width: var(--border-width-sm);--text-color: var(--rpf-text-primary);--icon-color: var(--rpf-navy-800);background:var(--background-color);border-block-start:var(--border-width) solid var(--border-color)}.rpf-accordion:last-of-type{border-block-end:var(--border-width) solid var(--border-color)}.rpf-accordion__container{border-block-start:var(--border-width) solid var(--border-color)}.rpf-accordion__container:first-of-type{border-block-start:none}.rpf-accordion__text{font-size:var(--font-size-1);font-weight:var(--font-weight-regular);line-height:var(--line-height-1-5);color:var(--text-color);margin:0;padding-block-end:var(--space-2);padding-block-start:var(--space-1);padding-inline:var(--space-2)}.rpf-accordion__title{font-size:var(--font-size-1-5);font-weight:var(--font-weight-bold);line-height:var(--line-height-1-5);align-items:center;color:var(--text-color);cursor:pointer;display:flex;justify-content:space-between;list-style:none;padding-block:var(--space-2);padding-inline:var(--space-2)}.rpf-accordion__title::marker{display:none}.rpf-accordion__title:focus-visible{outline:var(--border-width-lg) solid var(--rpf-brand-raspberry)}.rpf-accordion__icon{background:transparent;display:block;block-size:var(--space-0-25);margin-block-start:0;margin-inline-start:var(--space-2);position:relative;inline-size:var(--space-2)}.rpf-accordion__icon:before,.rpf-accordion__icon:after{background:var(--icon-color);border-radius:var(--border-radius);content:"";block-size:var(--space-0-25);position:absolute;transition:all .3s;inline-size:var(--space-2)}.rpf-accordion__icon:before{transform:rotate(90deg)}.rpf-accordion[open] .rpf-accordion__icon:before,.rpf-accordion__container[open] .rpf-accordion__icon:before{transform:rotate(180deg)}:root,:host{--rpf-alert-body-font-size: var(--font-size-1);--rpf-alert-body-line-height: var(--font-size-1-5);--rpf-alert-title-font-size: var(--font-size-1);--rpf-alert-title-line-height: var(--font-size-1-5);--rpf-alert-information-background-color: var(--rpf-alert-information-highlight);--rpf-alert-information-accent-color: var(--rpf-alert-information);--rpf-alert-information-icon: "info";--rpf-alert-error-background-color: var(--rpf-alert-error-highlight);--rpf-alert-error-accent-color: var(--rpf-alert-error);--rpf-alert-error-icon: "error_outline";--rpf-alert-warning-background-color: var(--rpf-alert-warning-highlight);--rpf-alert-warning-accent-color: var(--rpf-alert-warning);--rpf-alert-warning-icon: "warning_amber";--rpf-alert-success-background-color: var(--rpf-alert-success-highlight);--rpf-alert-success-accent-color: var(--rpf-alert-success);--rpf-alert-success-icon: "check_circle"}.rpf-alert{align-items:center;background-color:var(--rpf-alert-background-color);border-color:var(--rpf-alert-color);border-radius:var(--border-radius);border-style:solid;border-width:var(--alert-border-width);color:var(--rpf-text-primary);display:flex;flex-direction:column;margin-block-end:var(--space-2);position:relative;text-align:center}.rpf-alert__header{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--space-1);align-items:center;justify-content:space-between;min-block-size:var(--space-6);inline-size:100%;padding-inline:var(--space-2) var(--space-1)}.rpf-alert__icon{color:var(--rpf-alert-color);font-size:var(--font-size-2)}.rpf-alert__body{align-self:stretch;display:flex;flex-direction:column;font-size:var(--rpf-alert-body-font-size);font-weight:var(--font-weight-regular);gap:var(--space-2);line-height:var(--rpf-alert-body-line-height);padding-block-end:var(--space-2);padding-inline:var(--space-2);text-align:start}.rpf-alert__body {margin:0;padding:0}.rpf-alert__title{font-size:var(--rpf-alert-title-font-size);font-weight:var(--font-weight-bold);inline-size:100%;line-height:var(--rpf-alert-title-line-height);margin-block:var(--space-2);margin-inline:0;text-align:start}.rpf-alert__actions{display:flex;flex-direction:row;gap:var(--space-2)}.rpf-alert__close{background:none;border:none;color:inherit;cursor:pointer;font-size:var(--font-size-2);margin-inline-start:auto;inset-inline-end:var(--space-0-5);inset-block-start:var(--space-0-5)}.rpf-alert__close .rpf-button__icon{color:var(--rpf-text-primary)}.rpf-alert--hidden{display:none}.rpf-alert--error{--rpf-alert-background-color: var(--rpf-alert-error-background-color);--rpf-alert-color: var(--rpf-alert-error-accent-color)}.rpf-alert--error .rpf-alert__icon:after{content:var(--rpf-alert-error-icon)}.rpf-alert--information{--rpf-alert-background-color: var(--rpf-alert-information-background-color);--rpf-alert-color: var(--rpf-alert-information-accent-color)}.rpf-alert--information .rpf-alert__icon:after{content:var(--rpf-alert-information-icon)}.rpf-alert--warning{--rpf-alert-background-color: var(--rpf-alert-warning-background-color);--rpf-alert-color: var(--rpf-alert-warning-accent-color)}.rpf-alert--warning .rpf-alert__icon:after{content:var(--rpf-alert-warning-icon)}.rpf-alert--success{--rpf-alert-background-color: var(--rpf-alert-success-background-color);--rpf-alert-color: var(--rpf-alert-success-accent-color)}.rpf-alert--success .rpf-alert__icon:after{content:var(--rpf-alert-success-icon)}.rpf-input-checkbox{--rpf-input-checkbox-hit-target: var(--min-target-size);--rpf-input-checkbox-size: var(--space-3);--rpf-input-border-colour: var(--rpf-grey-850);align-items:center;border-radius:var(--space-1);box-sizing:border-box;display:flex;gap:var(--space-1-5);max-width:50ch;min-height:var(--rpf-input-checkbox-hit-target);min-width:240px;padding-block:calc((var(--rpf-input-checkbox-hit-target) - var(--rpf-input-checkbox-size)) / 2);width:100%}.rpf-input-checkbox input[type=checkbox]{align-self:flex-start;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--rpf-white);border:var(--space-0-25) solid var(--rpf-input-border-colour);border-radius:var(--space-0-5);flex-shrink:0;height:var(--rpf-input-checkbox-size);margin:0;width:var(--rpf-input-checkbox-size)}.rpf-input-checkbox input[type=checkbox]:checked{background:var(--rpf-grey-850);background-image:url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.95834 15.0003L3.20834 10.2503L4.39584 9.06283L7.95834 12.6253L15.6042 4.97949L16.7917 6.16699L7.95834 15.0003Z" fill="white"/></svg>')}.rpf-input-checkbox input[type=checkbox]:disabled{border-color:var(--rpf-input-background-color-disabled);background-color:var(--rpf-input-background-color-disabled)}.rpf-input-checkbox input[type=checkbox]:disabled:checked{background-color:var(--rpf-grey-600)}.rpf-input-checkbox--error input[type=checkbox]{border-color:var(--rpf-input-color-error)}.rpf-input-checkbox--error input[type=checkbox]:checked{background-color:var(--rpf-input-color-error)}.rpf-input-checkbox.rpf-input--full-width{max-width:none}.rpf-input-checkbox:has(>input[type=checkbox]:disabled),.rpf-input-checkbox--disabled{color:var(--rpf-label-text-color-disabled)}.rpf-input-checkbox input[type=checkbox]:focus-visible{outline:3px solid var(--rpf-input-outline-color);outline-offset:0}.rpf-fieldset{all:unset;background-color:var(--rpf-input-background-color);box-sizing:border-box;display:block;color:var(--rpf-input-color);margin-block-end:var(--space-3);max-inline-size:fit-content}.rpf-fieldset--full-width,.rpf-fieldset--full-width .rpf-fieldset__inputs {max-inline-size:none}.rpf-fieldset__inputs :last-child{margin-block-end:0}.rpf-fieldset--error .rpf-input-checkbox,.rpf-fieldset--error .rpf-input-radio{--rpf-input-border-colour: var(--rpf-input-color-error)}.rpf-fieldset--error .rpf-input-checkbox input[type=checkbox]:checked,.rpf-fieldset--error .rpf-input-radio input[type=checkbox]:checked{background-color:var(--rpf-input-color-error)}.rpf-fieldset--error .rpf-input-checkbox input[type=radio]:checked,.rpf-fieldset--error .rpf-input-radio input[type=radio]:checked{background-image:url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="hsla(0, 88%, 33%, 1)"/></svg>')}.rpf-input-password.rpf-input{border-inline-end:0;border-end-start-radius:var(--border-radius);border-end-end-radius:0;border-start-end-radius:0;border-start-start-radius:var(--border-radius);min-block-size:calc(var(--lg-target-size) - var(--input-border-width) 2);min-inline-size:0}.rpf-input-password.rpf-input:disabled,.rpf-input-password.rpf-input--disabled{border-color:var(--rpf-input-background-color-disabled);background-color:var(--rpf-input-background-color-disabled)}.rpf-input-password.rpf-input:read-only,.rpf-input-password.rpf-input--read-only,.rpf-input-password.rpf-input--readonly{border-color:var(--rpf-input-background-color-readonly);background-color:var(--rpf-input-background-color-readonly)}.rpf-input-password[type=password]{font-family:caption;font-size:var(--font-size-2);letter-spacing:var(--space-0-125)}.rpf-input-password--readonly,.rpf-input-password--read-only,.rpf-input-password:read-only{border-radius:var(--border-radius);border-right:none}.rpf-input-password:focus-visible{z-index:1}.rpf-input-password__button{background-color:var(--rpf-input-background-color);border-end-end-radius:var(--border-radius);border-end-start-radius:0;border-start-end-radius:var(--border-radius);border-start-start-radius:0;font-size:var(--font-size-1);justify-content:center;min-block-size:calc(var(--lg-target-size) - var(--input-border-width) * 2);min-inline-size:var(--space-9);text-decoration:underline}.rpf-input-password__button:before{border:var(--input-border-width) solid var(--rpf-input-color);border-end-end-radius:var(--border-radius);border-end-start-radius:0;border-start-end-radius:var(--border-radius);border-start-start-radius:0}.rpf-input-password__button--error:before{border:var(--input-border-width) solid var(--rpf-input-color-error)}.rpf-input-password__button:active:before{border-color:transparent}.rpf-input-password__button:focus-visible{outline:3px solid var(--rpf-input-outline-color)}.rpf-input-password__button:focus-visible:before{outline:none}.rpf-input-password__button:active:before,.rpf-input-password__button:hover:before{border:var(--input-border-width) solid var(--rpf-input-color)}.rpf-input-password__container{display:flex;max-width:50ch}.rpf-input-password__container--full-width{max-width:none}.rpf-input-password__container--error{border-color:var(--rpf-input-color-error)}.rpf-input-password__container--readonly button,.rpf-input-password__container--read-only button,.rpf-input-password__container--disabled button{display:none}:root,:host{--link-color: var(--rpf-link-text);--link-color-active: var(--rpf-navy-600);--link-color-hover: var(--link-color)}.rpf-link{border-radius:var(--border-radius);color:var(--link-color);cursor:pointer;font-weight:var(--font-weight-bold);max-inline-size:fit-content}.rpf-link:active{color:var(--link-color-active)}.rpf-link:hover{color:var(--link-color-hover)}.rpf-link:focus-visible{outline:3px solid var(--link-color)}.rpf-link--block{align-items:center;display:flex;min-block-size:var(--min-target-size)}.rpf-link--external{display:inline-flex;text-decoration:none}.rpf-link--external span{text-decoration:underline}.rpf-link--external:after{content:"";display:inline-flex;font-family:Material Symbols Sharp,sans-serif;padding-inline-end:var(--space-0-5);padding-inline-start:var(--space-0-25)}.rpf-input-radio{--rpf-input-radio-hit-target: var(--min-target-size);--rpf-input-radio-size: var(--space-3);--rpf-input-border-colour: var(--rpf-grey-850);align-items:center;border-radius:var(--space-1);box-sizing:border-box;display:flex;gap:var(--space-1-5);max-width:50ch;min-height:var(--rpf-input-radio-hit-target);min-width:240px;padding-block:calc((var(--rpf-input-radio-hit-target) - var(--rpf-input-radio-size)) / 2);width:100%}.rpf-input-radio input[type=radio]{align-self:flex-start;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--rpf-white);border:var(--space-0-25) solid var(--rpf-input-border-colour);border-radius:var(--rpf-input-radio-size);flex-shrink:0;height:var(--rpf-input-radio-size);margin:0;width:var(--rpf-input-radio-size)}.rpf-input-radio input[type=radio]:checked{background-image:url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="hsla(228, 9%, 15%, 1)"/></svg>');background-position:center center;background-repeat:no-repeat}.rpf-input-radio input[type=radio]:disabled{border-color:var(--rpf-input-background-color-disabled);background-color:var(--rpf-input-background-color-disabled)}.rpf-input-radio input[type=radio]:disabled:checked{background-image:url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="hsla(229, 8%, 61%, 1)"/></svg>')}.rpf-input-radio--error input[type=radio]{border-color:var(--rpf-input-color-error)}.rpf-input-radio--error input[type=radio]:checked{background-image:url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="hsla(0, 88%, 33%, 1)"/></svg>')}.rpf-input-radio.rpf-input--full-width{max-width:none}.rpf-input-radio:has(>input[type=radio]:disabled),.rpf-input-radio--disabled{color:var(--rpf-label-text-color-disabled)}.rpf-input-radio input[type=radio]:focus-visible{outline:3px solid var(--rpf-input-outline-color);outline-offset:0}.rpf-button{--rpf-button-background-color: var(--rpf-navy-800);--rpf-button-background-color-hover: var(--rpf-navy-900);--rpf-button-background-color-active: var(--rpf-navy-600);--rpf-button-background-color-disabled: var(--rpf-grey-600);--rpf-button-text-color: var(--rpf-white);--rpf-button-border-color: var(--rpf-button-background-color);--rpf-button-border-color-hover: var(--rpf-button-background-color-hover);--rpf-button-border-color-active: var(--rpf-button-background-color-active);--rpf-button-border-color-disabled: var(--rpf-button-background-color-disabled);--rpf-button-danger-background-color: var(--rpf-alert-error);--rpf-button-danger-background-color-hover: var(--rpf-alert-error);--rpf-button-danger-background-color-active: var(--rpf-red-900);--rpf-button-danger-background-color-disabled: var(--rpf-grey-600);--rpf-button-danger-text-color: var(--rpf-white);--rpf-button-danger-border-color: var(--rpf-button-danger-background-color);--rpf-button-danger-border-color-hover: var(--rpf-button-danger-background-color-hover);--rpf-button-danger-border-color-active: var(--rpf-button-danger-background-color-active);--rpf-button-danger-border-color-disabled: var(--rpf-button-danger-background-color-disabled);--rpf-button-border-radius: var(--border-radius);--rpf-button-border-width: var(--border-width-md);--rpf-button-lg-height: var(--lg-target-size);--rpf-button-sm-height: var(--sm-target-size);--rpf-button-min-target-size: var(--min-target-size);all:unset;align-items:center;box-sizing:border-box;color:var(--rpf-button-text-color);cursor:pointer;display:flex;font-size:var(--font-size-1-5);font-weight:var(--font-weight-bold);gap:var(--space-1);min-block-size:var(--rpf-button-lg-height);padding:var(--space-1) var(--space-2);position:relative;text-align:center;text-decoration:none;transform:scale(1);inline-size:fit-content}.rpf-button:before{background-color:var(--rpf-button-background-color);border-color:var(--rpf-button-border-color);border-radius:var(--rpf-button-border-radius);border-style:solid;border-width:var(--rpf-button-border-width);content:"";display:block;top:0;right:0;bottom:0;left:0;position:absolute;z-index:-1}.rpf-button:hover:before{background-color:var(--rpf-button-background-color-hover);border-color:var(--rpf-button-border-color-hover)}.rpf-button:active:before{background-color:var(--rpf-button-background-color-active);border-color:var(--rpf-button-border-color-active)}.rpf-button:focus-visible:before{outline:var(--border-width-md) solid var(--rpf-button-background-color);outline-offset:3px}.rpf-button:disabled,.rpf-button--disabled{cursor:default}.rpf-button:disabled:before,.rpf-button:disabled:hover:before,.rpf-button--disabled:before,.rpf-button--disabled:hover:before{border-color:var(--rpf-button-border-color-disabled);background-color:var(--rpf-button-background-color-disabled)}.rpf-button--secondary{color:var(--rpf-button-background-color)}.rpf-button--secondary:before{background-color:var(--rpf-button-text-color)}.rpf-button--secondary:hover{color:var(--rpf-button-background-color-hover)}.rpf-button--secondary:hover:before{background-color:var(--rpf-button-text-color);border-color:var(--rpf-button-border-color-hover)}.rpf-button--secondary:active{color:var(--rpf-button-background-color-active)}.rpf-button--secondary:active:before{background-color:var(--rpf-button-text-color);border-color:var(--rpf-button-border-color-active)}.rpf-button--secondary:disabled,.rpf-button--secondary.rpf-button--disabled{color:var(--rpf-button-background-color-disabled)}.rpf-button--secondary:disabled:hover:before,.rpf-button--secondary:disabled:before,.rpf-button--secondary.rpf-button--disabled:hover:before,.rpf-button--secondary.rpf-button--disabled:before{background-color:var(--rpf-button-text-color);border-color:var(--rpf-button-border-color-disabled)}.rpf-button--secondary.rpf-button--danger{color:var(--rpf-button-danger-background-color)}.rpf-button--secondary.rpf-button--danger:before{background-color:var(--rpf-button-danger-text-color)}.rpf-button--secondary.rpf-button--danger:hover{color:var(--rpf-button-danger-background-color-hover)}.rpf-button--secondary.rpf-button--danger:hover:before{background-color:var(--rpf-button-danger-text-color);border-color:var(--rpf-button-danger-border-color-hover)}.rpf-button--secondary.rpf-button--danger:active{color:var(--rpf-button-danger-background-color-active)}.rpf-button--secondary.rpf-button--danger:active:before{background-color:var(--rpf-button-danger-text-color);border-color:var(--rpf-button-danger-border-color-active)}.rpf-button--secondary.rpf-button--danger:disabled,.rpf-button--secondary.rpf-button--danger.rpf-button--disabled{color:var(--rpf-button-danger-background-color-disabled)}.rpf-button--secondary.rpf-button--danger:disabled:hover:before,.rpf-button--secondary.rpf-button--danger:disabled:before,.rpf-button--secondary.rpf-button--danger.rpf-button--disabled:hover:before,.rpf-button--secondary.rpf-button--danger.rpf-button--disabled:before{background-color:var(--rpf-button-danger-text-color);border-color:var(--rpf-button-danger-border-color-disabled)}.rpf-button--tertiary{color:var(--rpf-button-background-color)}.rpf-button--tertiary:before{background-color:transparent;border-color:transparent}.rpf-button--tertiary:hover{color:var(--rpf-button-background-color-hover)}.rpf-button--tertiary:hover:before{background-color:transparent;border-color:transparent}.rpf-button--tertiary:active{color:var(--rpf-button-background-color-active)}.rpf-button--tertiary:active:before{background-color:transparent}.rpf-button--tertiary:disabled,.rpf-button--tertiary.rpf-button--disabled{color:var(--rpf-button-background-color-disabled)}.rpf-button--tertiary:disabled:before,.rpf-button--tertiary:disabled:hover:before,.rpf-button--tertiary.rpf-button--disabled:before,.rpf-button--tertiary.rpf-button--disabled:hover:before{background-color:transparent;border-color:transparent}.rpf-button--tertiary.rpf-button--danger{color:var(--rpf-button-danger-background-color)}.rpf-button--tertiary.rpf-button--danger:before{background-color:transparent;border-color:transparent}.rpf-button--tertiary.rpf-button--danger:hover{color:var(--rpf-button-danger-background-color-hover)}.rpf-button--tertiary.rpf-button--danger:hover:before{background-color:transparent;border-color:transparent}.rpf-button--tertiary.rpf-button--danger:active{color:var(--rpf-button-danger-background-color-active)}.rpf-button--tertiary.rpf-button--danger:active:before{background-color:transparent}.rpf-button--tertiary.rpf-button--danger:disabled,.rpf-button--tertiary.rpf-button--danger.rpf-button--disabled{color:var(--rpf-button-danger-background-color-disabled)}.rpf-button--tertiary.rpf-button--danger:disabled:before,.rpf-button--tertiary.rpf-button--danger:disabled:hover:before,.rpf-button--tertiary.rpf-button--danger.rpf-button--disabled:before,.rpf-button--tertiary.rpf-button--danger.rpf-button--disabled:hover:before{background-color:transparent;border-color:transparent}.rpf-button--danger{color:var(--rpf-button-danger-text-color)}.rpf-button--danger:before{background-color:var(--rpf-button-danger-background-color);border-color:var(--rpf-button-danger-border-color)}.rpf-button--danger:hover:before{background-color:var(--rpf-button-danger-background-color-hover);border-color:var(--rpf-button-danger-border-color-hover)}.rpf-button--danger:active:before{background-color:var(--rpf-button-danger-background-color-active);border-color:var(--rpf-button-danger-border-color-active)}.rpf-button--danger:focus-visible:before{outline:var(--border-width-md) solid var(--rpf-button-danger-background-color)}.rpf-button--icon-only{block-size:var(--rpf-button-lg-height);line-height:var(--rpf-button-lg-height);padding:0;text-align:center;inline-size:var(--rpf-button-lg-height)}.rpf-button--icon-only .rpf-button__icon{margin:0 auto}.rpf-button--sm{font-size:var(--font-size-1);min-block-size:var(--rpf-button-min-target-size);padding:var(--space-1) var(--space-1)}.rpf-button--sm:before{inset:calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0}.rpf-button--sm.rpf-button--icon-only{block-size:var(--rpf-button-min-target-size);line-height:var(--rpf-button-min-target-size);padding:0;inline-size:var(--rpf-button-min-target-size)}.rpf-button--sm.rpf-button--icon-only:before{inset:calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2)}.rpf-button--sm .material-symbols-sharp{font-size:20px;font-variation-settings:"OPSZ" 20}.rpf-button--full-width{justify-content:center;inline-size:100%}.rpf-input-search-container{display:flex;max-width:50ch;min-width:240px;width:100%}.rpf-input-search-container input[type=search]::-webkit-search-decoration,.rpf-input-search-container input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}.rpf-input-search-container .rpf-input-search{border-end-end-radius:0;border-inline-end:0;border-start-end-radius:0}.rpf-input-search-container .rpf-button{flex-shrink:0;border-end-end-radius:var(--border-radius);border-end-start-radius:0;border-start-end-radius:var(--border-radius);border-start-start-radius:0;box-sizing:border-box;justify-content:center;max-width:var(--space-6)}.rpf-input-search-container .rpf-button:before{border:var(--input-border-width) solid var(--rpf-input-color);border-end-end-radius:var(--border-radius);border-end-start-radius:0;border-start-end-radius:var(--border-radius);border-start-start-radius:0}.rpf-input-search-container .rpf-button:disabled .rpf-button__icon,.rpf-input-search-container .rpf-button--disabled .rpf-button__icon{color:var(--rpf-input-color)}.rpf-input-search-container .rpf-button:disabled:before,.rpf-input-search-container .rpf-button--disabled:before{background-color:var(--rpf-input-background-color-disabled);border-color:var(--rpf-input-background-color-disabled)}.rpf-input-search-container .rpf-button--error:before{border-color:var(--rpf-alert-error)}.rpf-input-search-container .rpf-input-search:focus-visible,.rpf-input-search-container .rpf-button:focus-visible{outline:3px solid var(--rpf-input-outline-color);z-index:1}.rpf-input-search-container .rpf-input-search:focus-visible:before,.rpf-input-search-container .rpf-button:focus-visible:before{outline:0}.rpf-input.rpf-input-select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'><path fill='%23212121' d='m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4-6 6Z'/></svg>");background-repeat:no-repeat;background-position:center right var(--space-1-5)}html[dir=rtl] .rpf-input.rpf-input-select{background-position:center left var(--space-1-5)}.rpf-input.rpf-input-select:disabled,.rpf-input.rpf-input-select--disabled{background-image:none}:root,:host{--rpf-brand-black: hsla(60, 4%, 11%, 1);--rpf-brand-leaf: hsla(123, 43%, 48%, 1);--rpf-brand-raspberry: hsla(342, 71%, 47%, 1);--rpf-raspberry-50: hsla(338, 57%, 97%, 1);--rpf-raspberry-100: hsla(342, 62%, 96%, 1);--rpf-raspberry-200: hsla(344, 73%, 93%, 1);--rpf-raspberry-400: hsla(341, 63%, 84%, 1);--rpf-raspberry-500: hsla(343, 62%, 68%, 1);--rpf-raspberry-600: hsla(343, 64%, 58%, 1);--rpf-raspberry-800: hsla(342, 71%, 47%, 1);--rpf-raspberry-900: hsla(340, 78%, 36%, 1)}:root,:host{--min-target-size: 44px;--sm-target-size: 32px;--lg-target-size: 48px}.rpf-switch{--rpf-switch-width: 52px;--rpf-switch-height: 32px;--rpf-switch-handle-size: calc(var(--rpf-switch-height) * .75);--rpf-switch-border-width: 2px;--rpf-switch-border-radius: calc(var(--rpf-switch-height) / 2);--rpf-switch-handle-border-radius: 50%;--rpf-switch-off-color: var(--rpf-grey-500);--rpf-switch-on-color: var(--rpf-navy-800);--rpf-switch-icon-off-color: var(--rpf-white);--rpf-switch-icon-on-color: var(--rpf-switch-on-color);--rpf-switch-track-off-color: var(--rpf-grey-50);--rpf-switch-track-on-color: var(--rpf-switch-on-color);--rpf-switch-handle-off-color: var(--rpf-switch-off-color);--rpf-switch-handle-on-color: var(--rpf-white);box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--space-1-5);min-block-size:var(--min-target-size);cursor:pointer;font-weight:var(--font-weight-bold)}.rpf-switch .rpf-label{padding:0}.rpf-switch .rpf-switch__checkbox{position:absolute;opacity:0;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.rpf-switch .rpf-switch__track{box-sizing:border-box;display:flex;align-items:center;flex-shrink:0;inline-size:var(--rpf-switch-width);block-size:var(--rpf-switch-height);padding-block:.375rem;padding-inline:.5rem;border-radius:var(--rpf-switch-border-radius);border:var(--rpf-switch-border-width) solid var(--rpf-switch-off-color);background:var(--rpf-switch-track-color);transition:background-color .2s ease-out,border-color .2s ease-out}.rpf-switch .rpf-switch__handle{block-size:calc(var(--rpf-switch-handle-size) / 1.5);aspect-ratio:1/1;margin-inline-start:0;background-color:var(--rpf-switch-off-color);border-radius:var(--rpf-switch-handle-border-radius);transition:margin-inline-start .2s ease-out,background-color .2s ease-out,box-shadow .2s ease-out,block-size .2s ease-out;transition-behavior:allow-discrete}.rpf-switch--icon .rpf-switch__track{padding-inline:.125rem}.rpf-switch--icon .rpf-switch__handle{block-size:var(--rpf-switch-handle-size);display:grid;place-items:center}.rpf-switch--icon .rpf-switch__icon{background-color:var(--rpf-switch-icon-off-color);inline-size:1rem;block-size:1rem;display:inline-block;-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%231f1f1f"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>');mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%231f1f1f"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>');-webkit-mask-size:1rem;mask-size:1rem}.rpf-switch:has(.rpf-switch__checkbox:disabled),.rpf-switch--disabled{cursor:default;opacity:50%}.rpf-switch--error .rpf-switch__track{border-color:var(--rpf-input-color-error)}.rpf-switch__track:has(.rpf-switch__checkbox:focus-visible){outline:3px solid var(--rpf-input-outline-color);outline-offset:0}.rpf-switch--error:has(.rpf-switch__checkbox:checked) .rpf-switch__track{background-color:var(--rpf-input-color-error);border-color:var(--rpf-input-color-error)}.rpf-switch:hover .rpf-switch__handle{box-shadow:0 0 0 14px color-mix(in srgb,var(--rpf-switch-off-color),transparent 90%)}.rpf-switch--full-width{inline-size:100%;max-inline-size:none;justify-content:space-between}.rpf-switch--reverse{flex-direction:row-reverse}.rpf-switch--align-start{align-items:start}.rpf-switch--disabled:hover .rpf-switch__handle{box-shadow:none}.rpf-switch:has(.rpf-switch__checkbox:checked) .rpf-switch__track{background-color:var(--rpf-switch-track-on-color);border:2px solid var(--rpf-switch-track-on-color);padding-inline:.125rem}.rpf-switch:has(.rpf-switch__checkbox:checked) .rpf-switch__handle{block-size:var(--rpf-switch-handle-size);margin-inline-start:calc(100% - var(--rpf-switch-handle-size) - var(--rpf-switch-border-width) * .5);background-color:var(--rpf-switch-handle-on-color)}.rpf-switch:has(.rpf-switch__checkbox:checked):hover .rpf-switch__handle{box-shadow:0 0 0 10px color-mix(in srgb,var(--rpf-switch-on-color),transparent 90%)}.rpf-switch:has(.rpf-switch__checkbox:checked) .rpf-switch__icon{background-color:var(--rpf-switch-icon-on-color);inline-size:1rem;block-size:1rem;display:inline-block;-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%231f1f1f"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>');mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%231f1f1f"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>');-webkit-mask-size:1rem;mask-size:1rem}.rpf-switch:has(.rpf-switch__checkbox:disabled):hover .rpf-switch__handle{box-shadow:none}.rpf-visually-hidden{border:0;clip-path:inset(50%);inline-size:1px;block-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}.rpf-input.rpf-input-textarea{resize:vertical;min-height:120px;height:auto;max-height:240px;overflow:auto;white-space:pre-wrap}.rpf-input.rpf-input-textarea:read-only,.rpf-input.rpf-input-textarea--read-only,.rpf-input.rpf-input-textarea--readonly{border-color:var(--rpf-input-background-color-readonly);background-color:var(--rpf-input-background-color-readonly)}:root,:host{--border-radius: var(--space-1);--border-radius-sm: var(--space-0-5);--border-width-sm: 1px;--border-width-md: 2px;--border-width-lg: 3px;--alert-border-width: var(--border-width-md);--fieldset-border-width: var(--border-width-md);--input-border-width: var(--border-width-md);--table-border-width: var(--border-width-sm)}:root,:host{--rpf-input-background-color: var(--rpf-white);--rpf-input-background-color-disabled: var(--rpf-grey-50);--rpf-input-background-color-readonly: var(--rpf-grey-50);--rpf-input-color-error: var(--rpf-alert-error);--rpf-input-color: var(--rpf-text-primary);--rpf-input-outline-color: var(--rpf-blue-800)}.rpf-input-field{margin-block-end:var(--space-3)}.rpf-input{all:unset;background-color:var(--rpf-input-background-color);border:var(--input-border-width) solid var(--rpf-input-color);border-radius:var(--border-radius);box-sizing:border-box;color:var(--rpf-input-color);display:flex;font-size:var(--font-size-1);line-height:var(--line-height-2);padding-block:calc(var(--space-1) - 2px);padding-inline:var(--space-1-5);max-width:50ch;min-width:240px;width:100%}.rpf-input:disabled,.rpf-input--disabled{border-color:var(--rpf-input-background-color-disabled);background-color:var(--rpf-input-background-color-disabled)}.rpf-input:focus-visible{outline:3px solid var(--rpf-input-outline-color)}.rpf-input--error{border-color:var(--rpf-input-color-error)}.rpf-input--full-width{max-width:none}:root,:host{--rpf-label-hint-color: var(--rpf-text-secondary);--rpf-label-text-color: var(--rpf-text-primary);--rpf-label-text-color-disabled: var(--rpf-grey-500)}.rpf-label{all:unset;color:var(--rpf-label-text-color);display:flex;flex-direction:column;font-weight:var(--font-weight-bold);padding-block-end:var(--space-1);font-size:var(--font-size-1);line-height:var(--line-height-1-5)}.rpf-label__hint{color:var(--rpf-label-hint-color);font-size:var(--font-size-1);font-weight:var(--font-weight-regular)}.rpf-label--disabled,.rpf-label--disabled .rpf-label__hint{color:var(--rpf-label-text-color-disabled)}:root,:host{--rpf-message-text-color: var(--rpf-alert-error)}.rpf-error-message{all:unset;align-items:center;color:var(--rpf-message-text-color);display:flex;font-weight:var(--font-weight-bold);max-width:50ch;padding-block:var(--space-1)}.rpf-error-message__icon{margin-inline-end:var(--space-1)}:root,:host{--rpf-overlay: hsla(0, 0%, 0%, .5)}:root,:host{--rpf-modal-background-color: var(--rpf-white);--rpf-modal-border-color: var(--rpf-grey-150);--rpf-modal-max-block-size: calc(100vh - 2 * var(--space-10));--rpf-modal-mobile-max-block-size: calc(100dvh - 2 * var(--space-2));--rpf-modal-max-inline-size: calc(100vw - 2 * var(--space-10));--rpf-modal-mobile-max-inline-size: calc(100vw - 2 * var(--space-2));--rpf-modal-border-radius: var(--space-1);--rpf-modal-content-padding: var(--space-3);--rpf-modal-backdrop-color: var(--rpf-overlay);--rpf-modal-buttons-flex-direction: row-reverse;--rpf-modal-buttons-justify-content: flex-start}.rpf-modal{background-color:var(--rpf-modal-background-color);border:none;border-radius:var(--rpf-modal-border-radius);margin-inline:auto;min-inline-size:15rem;inline-size:100%;padding:0;max-inline-size:var(--rpf-modal-mobile-max-inline-size);max-block-size:var(--rpf-modal-mobile-max-block-size)}@media(min-width:30rem){.rpf-modal{max-inline-size:var(--rpf-modal-max-inline-size);max-block-size:var(--rpf-modal-max-block-size)}}.rpf-modal__wrapper{display:grid;grid-template-rows:auto minmax(0,1fr) auto;block-size:100%;max-block-size:inherit;overflow:hidden}.rpf-modal__header{display:flex;align-items:center;align-self:stretch;border-block-end:1px solid var(--rpf-modal-border-color);gap:var(--space-1);padding:var(--space-1);padding-inline-start:var(--space-2)}.rpf-modal__title{font-size:var(--font-size-2);font-weight:var(--font-weight-bold);line-height:var(--line-height-2);flex:1 0 0;margin:0}.rpf-modal__content{overflow-y:auto;align-items:center;border-block-end:1px solid var(--rpf-modal-border-color);display:flex;flex-direction:column;padding:var(--rpf-modal-content-padding)}.rpf-modal__buttons{align-items:center;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2)}.rpf-modal__buttons .rpf-button{justify-content:center;inline-size:100%}@media not (max-width:34rem){.rpf-modal__buttons{flex-direction:var(--rpf-modal-buttons-flex-direction);gap:var(--space-2);justify-content:var(--rpf-modal-buttons-justify-content)}.rpf-modal__buttons .rpf-button{inline-size:auto}}.rpf-modal::backdrop{background-color:var(--rpf-modal-backdrop-color);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}:root,:host{--rpf-shadow-top: 0px -12px 24px 0px rgba(0, 0, 0, .04);--rpf-shadow-centre: 0px 0px 8px 0px rgba(0, 0, 0, .08);--rpf-shadow-bottom: 0px 12px 24px 0px rgba(0, 0, 0, .04)}:root,:host{--rpf-menu-background-color: var(--rpf-white);--rpf-menu-border-color: var(--rpf-grey-50);--rpf-menu-divider-color: var(--rpf-grey-100)}.rpf-menu{margin:0;display:inline-flex;flex-direction:column;padding:var(--space-1-5);gap:var(--space-0-5);border-radius:var(--space-1);border:2px solid var(--rpf-menu-border-color);background:var(--rpf-menu-background-color);box-shadow:var(--rpf-shadow-centre);list-style:none}.rpf-menu hr{inline-size:100%;border:none;border-block-start:1px solid var(--rpf-menu-divider-color);margin-block:var(--space-0-25)}:root,:host{--rpf-text-primary: hsla(0, 0%, 13%, 1);--rpf-text-primary-darkmode: var(--rpf-white);--rpf-text-secondary: hsla(200, 9%, 33%, 1);--rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);--rpf-link-text: var(--rpf-navy-800)}:root,:host{--rpf-menu-item-text-color: var(--rpf-text-primary);--rpf-menu-item-text-color-danger: var(--rpf-alert-error);--rpf-menu-item-background-color: transparent;--rpf-menu-item-background-color-hover: var(--rpf-grey-50);--rpf-menu-item-background-color-active: var(--rpf-grey-100);--rpf-menu-item-focus: var(--rpf-raspberry-800)}.rpf-menu__item{list-style:none;margin:0;padding:0;color:var(--rpf-menu-item-text-color)}.rpf-menu__item button,.rpf-menu__item a{border:none;margin:0;box-sizing:border-box;background-color:transparent;-webkit-user-select:none;user-select:none;text-decoration:none;cursor:pointer;font-family:inherit;text-align:start;min-inline-size:7.5rem;inline-size:100%;display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--space-1);font-size:var(--font-size-1);font-weight:var(--font-weight-bold);line-height:var(--line-height-1-5);color:inherit;padding:var(--space-1-5) var(--space-1)}.rpf-menu__item button:hover,.rpf-menu__item a:hover{background-color:var(--rpf-menu-item-background-color-hover)}.rpf-menu__item button:active,.rpf-menu__item a:active{background-color:var(--rpf-menu-item-background-color-active)}.rpf-menu__item button:focus-visible,.rpf-menu__item a:focus-visible{outline:2px solid var(--rpf-menu-item-focus)}.rpf-menu__item--danger{color:var(--rpf-menu-item-text-color-danger)}:root,:host{--rpf-menu-title-color: var(--rpf-text-secondary)}.rpf-menu__title{list-style:none;margin:0;padding:0;color:var(--rpf-menu-title-color);font-size:var(--font-size-1);font-weight:var(--font-weight-bold);line-height:var(--line-height-1-5);margin-block:var(--space-0-25);border-block-end:1px solid var(--rpf-menu-divider-color)}.rpf-menu__title span{display:inline-block;margin-inline:var(--space-1);margin-block-end:var(--space-0-5)}:root,:host{--font-size-0-5: .5rem;--font-size-0-75: .75rem;--font-size-1: 1rem;--font-size-1-5: 1.25rem;--font-size-2: 1.5rem;--font-size-3: 2rem;--font-size-4: 2.5rem;--font-size-5: 3rem;--font-size-6: 3.5rem;--font-size-7: 4rem;--font-size-8: 4.5rem;--font-size-9: 5rem}:root,:host{--line-height-0-75: .75rem;--line-height-1: 1rem;--line-height-1-5: 1.5rem;--line-height-2: 2rem;--line-height-2-5: 2.5rem;--line-height-3: 3rem;--line-height-3-5: 3.5rem;--line-height-4: 4rem;--line-height-4-5: 4.5rem;--line-height-5: 5rem;--line-height-5-5: 5.5rem;--line-height-6: 6rem;--line-height-6-5: 6.5rem}:root,:host{--rpf-white: hsla(0, 0%, 100%, 1);--rpf-off-white: hsla(225, 25%, 97%, 1);--rpf-off-white-warm: hsla(36, 38.5%, 97.5%, 1);--rpf-grey-50: hsla(210, 8%, 95%, 1);--rpf-grey-100: hsla(228, 10%, 90%, 1);--rpf-grey-150: hsla(223, 9%, 85%, 1);--rpf-grey-200: hsla(228, 10%, 80%, 1);--rpf-grey-300: hsla(229, 9%, 75%, 1);--rpf-grey-400: hsla(229, 8%, 61%, 1);--rpf-grey-500: hsla(229, 9%, 42%, 1);--rpf-grey-600: hsla(228, 9%, 32%, 1);--rpf-grey-700: hsla(228, 9%, 22%, 1);--rpf-grey-800: hsla(232, 9%, 18%, 1);--rpf-grey-850: hsla(228, 9%, 15%, 1);--rpf-grey-900: hsla(228, 9%, 10%, 1);--rpf-grey-950: hsla(228, 8%, 5%, 1);--rpf-black: hsla(0, 0%, 0%, 1)}:root,:host{--rpf-red-100: hsla(4, 89%, 96%, 1);--rpf-red-200: hsla(1, 87%, 91%, 1);--rpf-red-400: hsla(1, 87%, 82%, 1);--rpf-red-600: hsla(1, 87%, 72%, 1);--rpf-red-800: hsla(1, 87%, 63%, 1);--rpf-red-900: hsla(1, 52%, 50%, 1);--rpf-green-100: hsla(125, 41%, 95%, 1);--rpf-green-200: hsla(122, 39%, 87%, 1);--rpf-green-400: hsla(123, 40%, 74%, 1);--rpf-green-600: hsla(123, 40%, 61%, 1);--rpf-green-800: hsla(123, 43%, 48%, 1);--rpf-green-900: hsla(123, 43%, 34%, 1);--rpf-teal-100: hsla(176, 55%, 94%, 1);--rpf-teal-200: hsla(174, 55%, 85%, 1);--rpf-teal-400: hsla(174, 55%, 70%, 1);--rpf-teal-600: hsla(174, 56%, 56%, 1);--rpf-teal-800: hsla(174, 81%, 41%, 1);--rpf-teal-900: hsla(174, 81%, 27%, 1);--rpf-teal-950: hsla(174, 80%, 20%, 1);--rpf-orange-100: hsla(31, 100%, 95%, 1);--rpf-orange-200: hsla(32, 100%, 88%, 1);--rpf-orange-400: hsla(31, 100%, 77%, 1);--rpf-orange-600: hsla(31, 99%, 65%, 1);--rpf-orange-800: hsla(31, 99%, 54%, 1);--rpf-orange-900: hsla(31, 85%, 35%, 1);--rpf-yellow-100: hsla(51, 100%, 95%, 1);--rpf-yellow-200: hsla(52, 100%, 87%, 1);--rpf-yellow-400: hsla(51, 100%, 75%, 1);--rpf-yellow-600: hsla(52, 100%, 63%, 1);--rpf-yellow-800: hsla(52, 100%, 50%, 1);--rpf-yellow-900: hsla(52, 100%, 26%, 1);--rpf-purple-100: hsla(282, 36%, 95%, 1);--rpf-purple-200: hsla(279, 38%, 87%, 1);--rpf-purple-400: hsla(279, 38%, 73%, 1);--rpf-purple-600: hsla(279, 37%, 60%, 1);--rpf-purple-800: hsla(279, 43%, 47%, 1);--rpf-purple-900: hsla(280, 43%, 37%, 1);--rpf-navy-100: hsla(235, 38%, 94%, 1);--rpf-navy-200: hsla(234, 38%, 84%, 1);--rpf-navy-400: hsla(235, 38%, 69%, 1);--rpf-navy-600: hsla(235, 38%, 53%, 1);--rpf-navy-800: hsla(235, 63%, 37%, 1);--rpf-navy-900: hsla(234, 63%, 30%, 1);--rpf-blue-100: hsla(203, 86%, 95%, 1);--rpf-blue-200: hsla(204, 88%, 87%, 1);--rpf-blue-400: hsla(204, 88%, 74%, 1);--rpf-blue-600: hsla(204, 89%, 60%, 1);--rpf-blue-800: hsla(204, 100%, 47%, 1);--rpf-blue-900: hsla(204, 99%, 37%, 1)}:root,:host{--rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);--rpf-alert-error: hsla(0, 88%, 33%, 1);--rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);--rpf-alert-information: hsla(225, 64%, 33%, 1);--rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);--rpf-alert-success: hsla(136, 90%, 20%, 1);--rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);--rpf-alert-warning: hsla(26, 70%, 29%, 1)}:root,:host{--color-progress-bar-complete: var(--rpf-navy-800);--color-progress-bar-incomplete: var(--rpf-grey-150);--rpf-progress-bar-background-color: var(--color-progress-bar-incomplete);--rpf-progress-bar-accent-color: var(--color-progress-bar-complete);--rpf-progress-bar-block-size: var(--space-1);--rpf-progress-bar-border-radius: var(--space-1);--rpf-progress-bar-gap: var(--space-3);--rpf-progress-bar-font-size: var(--font-size-1);--rpf-progress-bar-font-weight: var(--font-weight-regular);--rpf-progress-bar-complete-color: var(--rpf-alert-success);--rpf-progress-bar-complete-icon: url('data:image/svg+xml,<svg height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m424-296 282-282-56-56-226 226-114-114-56 56zm56 216q-83 0-156-31.5t-127-85.5q-54-54-85.5-127t-31.5-156q0-83 31.5-156t85.5-127q54-54 127-85.5t156-31.5q83 0 156 31.5t127 85.5q54 54 85.5 127t31.5 156q0 83-31.5 156t-85.5 127q-54 54-127 85.5t-156 31.5z"/></svg>')}.rpf-progress-bar__label{font-size:var(--rpf-progress-bar-font-size);line-height:1.5em;font-weight:var(--rpf-progress-bar-font-weight);align-items:center;display:grid;gap:var(--rpf-progress-bar-gap);grid-template-columns:max-content 1fr}.rpf-progress-bar__bar{background:var(--rpf-progress-bar-background-color);block-size:var(--rpf-progress-bar-block-size);border-radius:var(--rpf-progress-bar-border-radius);inline-size:100%;border:none}.rpf-progress-bar__bar::-webkit-progress-bar{background:var(--rpf-progress-bar-background-color);border-radius:var(--rpf-progress-bar-border-radius)}.rpf-progress-bar__bar::-webkit-progress-value{background:var(--rpf-progress-bar-accent-color);border-radius:var(--rpf-progress-bar-border-radius)}.rpf-progress-bar__bar::-moz-progress-bar{background:var(--rpf-progress-bar-accent-color);border-radius:var(--rpf-progress-bar-border-radius)}.rpf-progress-bar--complete{--rpf-progress-bar-accent-color: var(--rpf-progress-bar-complete-color)}.rpf-progress-bar--complete .rpf-progress-bar__label span{display:flex}.rpf-progress-bar--complete .rpf-progress-bar__label span:before{content:"";display:inline-block;block-size:1.5em;aspect-ratio:1/1;margin-inline-end:var(--space-1);vertical-align:middle;background-color:var(--rpf-progress-bar-complete-color);mask-image:var(--rpf-progress-bar-complete-icon);mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-image:var(--rpf-progress-bar-complete-icon);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.rpf-table-cell{border-bottom:var(--table-border-width) solid var(--rpf-grey-100)}.rpf-table-cell>{align-items:center;box-sizing:border-box;display:flex;gap:var(--space-1);line-height:var(--line-height-1-5);padding-block:var(--space-1);padding-inline:var(--space-2)}.rpf-table-cell--header,.rpf-table-cell--sortable-header{background-color:var(--rpf-grey-50)}.rpf-table-cell--header>,.rpf-table-cell--sortable-header>{min-height:var(--space-7);min-width:var(--space-7)}.rpf-table-cell--sortable-header .rpf-table-cell__sort-header{display:flex;width:100%;gap:var(--space-1);min-height:var(--min-target-size);align-items:center;border-radius:var(--border-radius)}.rpf-table-cell--sortable-header .rpf-table-cell__sort-header:focus-visible{outline:2px solid var(--rpf-raspberry-800);outline-offset:3px}.rpf-table-cell--sortable-header button{all:unset;cursor:pointer}.rpf-table-cell--sortable-header a{color:inherit;text-decoration:none}.rpf-table-cell--body{background-color:var(--rpf-white)}.rpf-table-cell--body .rpf-table-cell__content{min-height:var(--space-8);min-width:var(--space-8)}.rpf-table-cell--body .rpf-table-cell__content>{margin-block:auto}.rpf-table-cell--body .rpf-table-cell__content a{color:var(--rpf-brand-500);font-weight:var(--font-weight-bold)}.rpf-table-cell--body .rpf-table-cell__content:has(>.rpf-button){justify-content:end;padding:var(--space-1)}.rpf-table-cell--body .rpf-table-cell__content--truncated{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rpf-table{border:1px solid var(--rpf-grey-100);border-radius:var(--border-radius);overflow:auto;top:0;width:fit-content}.rpf-table--full-width{width:100%}.rpf-table__table{border-collapse:collapse;width:max-content}.rpf-table__table--full-width{width:100%}.rpf-table__table thead th,.rpf-table__table thead td{position:sticky;top:0;z-index:1}:root,:host{--font-weight-regular: 400;--font-weight-bold: 700}:root,:host{--space-0-125: .0625rem;--space-0-25: .125rem;--space-0-5: .25rem;--space-1: .5rem;--space-1-5: .75rem;--space-2: 1rem;--space-3: 1.5rem;--space-4: 2rem;--space-5: 2.5rem;--space-6: 3rem;--space-7: 3.5rem;--space-8: 4rem;--space-9: 4.5rem;--space-10: 5rem}.rpf-tag{--tag-color: var(--rpf-text-primary);--tag-color-secondary: color-mix(in srgb, var(--tag-color), white 95%);--tag-text-color: var(--rpf-white);--tag-text-color-secondary: var(--tag-color);align-items:center;border:solid 1px var(--tag-color);background-color:var(--tag-color);border-radius:2rem;color:var(--tag-text-color);display:flex;font-weight:var(--font-weight-bold);gap:var(--space-0-5);line-height:1.5rem;padding:var(--space-0-5) var(--space-1);inline-size:max-content}.rpf-tag--information{background-color:var(--rpf-alert-information);border-color:var(--rpf-alert-information)}.rpf-tag--success{background-color:var(--rpf-alert-success);border-color:var(--rpf-alert-success)}.rpf-tag--warning{background-color:var(--rpf-alert-warning);border-color:var(--rpf-alert-warning)}.rpf-tag--error{background-color:var(--rpf-alert-error);border-color:var(--rpf-alert-error)}.rpf-tag--secondary{background-color:var(--tag-color-secondary);color:var(--tag-text-color-secondary)}.rpf-tag--secondary.rpf-tag--information{border-color:var(--rpf-alert-information);color:var(--rpf-alert-information)}.rpf-tag--secondary.rpf-tag--success{border-color:var(--rpf-alert-success);color:var(--rpf-alert-success)}.rpf-tag--secondary.rpf-tag--warning{border-color:var(--rpf-alert-warning);color:var(--rpf-alert-warning)}.rpf-tag--secondary.rpf-tag--error{border-color:var(--rpf-alert-error);color:var(--rpf-alert-error)}
1	+ @import"https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined";@import"https://fonts.googleapis.com/css2?family=Material+Symbols+Rounded";@import"https://fonts.googleapis.com/css2?family=Material+Symbols+Sharp";.rpf-accordion{--background-color: var(--rpf-white);--border-color: var(--rpf-grey-50);--border-width: var(--border-width-sm);--text-color: var(--rpf-text-primary);--icon-color: var(--rpf-navy-800);background:var(--background-color);border-block-start:var(--border-width) solid var(--border-color)}.rpf-accordion:last-of-type{border-block-end:var(--border-width) solid var(--border-color)}.rpf-accordion__container{border-block-start:var(--border-width) solid var(--border-color)}.rpf-accordion__container:first-of-type{border-block-start:none}.rpf-accordion__text{font-size:var(--font-size-1);font-weight:var(--font-weight-regular);line-height:var(--line-height-1-5);color:var(--text-color);margin:0;padding-block-end:var(--space-2);padding-block-start:var(--space-1);padding-inline:var(--space-2)}.rpf-accordion__title{font-size:var(--font-size-1-5);font-weight:var(--font-weight-bold);line-height:var(--line-height-1-5);align-items:center;color:var(--text-color);cursor:pointer;display:flex;justify-content:space-between;list-style:none;padding-block:var(--space-2);padding-inline:var(--space-2)}.rpf-accordion__title::marker{display:none}.rpf-accordion__title:focus-visible{outline:var(--border-width-lg) solid var(--rpf-brand-raspberry)}.rpf-accordion__icon{background:transparent;display:block;block-size:var(--space-0-25);margin-block-start:0;margin-inline-start:var(--space-2);position:relative;inline-size:var(--space-2)}.rpf-accordion__icon:before,.rpf-accordion__icon:after{background:var(--icon-color);border-radius:var(--border-radius);content:"";block-size:var(--space-0-25);position:absolute;transition:all .3s;inline-size:var(--space-2)}.rpf-accordion__icon:before{transform:rotate(90deg)}.rpf-accordion[open] .rpf-accordion__icon:before,.rpf-accordion__container[open] .rpf-accordion__icon:before{transform:rotate(180deg)}:root,:host{--rpf-alert-body-font-size: var(--font-size-1);--rpf-alert-body-line-height: var(--font-size-1-5);--rpf-alert-title-font-size: var(--font-size-1);--rpf-alert-title-line-height: var(--font-size-1-5);--rpf-alert-information-background-color: var(--rpf-alert-information-highlight);--rpf-alert-information-accent-color: var(--rpf-alert-information);--rpf-alert-information-icon: "info";--rpf-alert-error-background-color: var(--rpf-alert-error-highlight);--rpf-alert-error-accent-color: var(--rpf-alert-error);--rpf-alert-error-icon: "error_outline";--rpf-alert-warning-background-color: var(--rpf-alert-warning-highlight);--rpf-alert-warning-accent-color: var(--rpf-alert-warning);--rpf-alert-warning-icon: "warning_amber";--rpf-alert-success-background-color: var(--rpf-alert-success-highlight);--rpf-alert-success-accent-color: var(--rpf-alert-success);--rpf-alert-success-icon: "check_circle"}.rpf-alert{align-items:center;background-color:var(--rpf-alert-background-color);border-color:var(--rpf-alert-color);border-radius:var(--border-radius);border-style:solid;border-width:var(--alert-border-width);color:var(--rpf-text-primary);display:flex;flex-direction:column;margin-block-end:var(--space-2);position:relative;text-align:center}.rpf-alert__header{box-sizing:border-box;display:flex;flex-direction:row;gap:var(--space-1);align-items:center;justify-content:space-between;min-block-size:var(--space-6);inline-size:100%;padding-inline:var(--space-2) var(--space-1)}.rpf-alert__icon{color:var(--rpf-alert-color);font-size:var(--font-size-2)}.rpf-alert__body{align-self:stretch;display:flex;flex-direction:column;font-size:var(--rpf-alert-body-font-size);font-weight:var(--font-weight-regular);gap:var(--space-2);line-height:var(--rpf-alert-body-line-height);padding-block-end:var(--space-2);padding-inline:var(--space-2);text-align:start}.rpf-alert__body {margin:0;padding:0}.rpf-alert__title{font-size:var(--rpf-alert-title-font-size);font-weight:var(--font-weight-bold);inline-size:100%;line-height:var(--rpf-alert-title-line-height);margin-block:var(--space-2);margin-inline:0;text-align:start}.rpf-alert__actions{display:flex;flex-direction:row;gap:var(--space-2)}.rpf-alert__close{background:none;border:none;color:inherit;cursor:pointer;font-size:var(--font-size-2);margin-inline-start:auto;inset-inline-end:var(--space-0-5);inset-block-start:var(--space-0-5)}.rpf-alert__close .rpf-button__icon{color:var(--rpf-text-primary)}.rpf-alert--hidden{display:none}.rpf-alert--error{--rpf-alert-background-color: var(--rpf-alert-error-background-color);--rpf-alert-color: var(--rpf-alert-error-accent-color)}.rpf-alert--error .rpf-alert__icon:after{content:var(--rpf-alert-error-icon)}.rpf-alert--information{--rpf-alert-background-color: var(--rpf-alert-information-background-color);--rpf-alert-color: var(--rpf-alert-information-accent-color)}.rpf-alert--information .rpf-alert__icon:after{content:var(--rpf-alert-information-icon)}.rpf-alert--warning{--rpf-alert-background-color: var(--rpf-alert-warning-background-color);--rpf-alert-color: var(--rpf-alert-warning-accent-color)}.rpf-alert--warning .rpf-alert__icon:after{content:var(--rpf-alert-warning-icon)}.rpf-alert--success{--rpf-alert-background-color: var(--rpf-alert-success-background-color);--rpf-alert-color: var(--rpf-alert-success-accent-color)}.rpf-alert--success .rpf-alert__icon:after{content:var(--rpf-alert-success-icon)}:root,:host{--rpf-input-checkbox-hit-target: var(--min-target-size);--rpf-input-checkbox-size: var(--space-3)}.rpf-input-checkbox{align-items:center;border-radius:var(--space-1);box-sizing:border-box;display:flex;gap:var(--space-1-5);max-width:50ch;min-height:var(--rpf-input-checkbox-hit-target);min-width:240px;padding-block:calc((var(--rpf-input-checkbox-hit-target) - var(--rpf-input-checkbox-size)) / 2);width:100%}.rpf-input-checkbox input[type=checkbox]{align-self:flex-start;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--rpf-white);border:var(--space-0-25) solid var(--rpf-input-border-colour);border-radius:var(--space-0-5);flex-shrink:0;height:var(--rpf-input-checkbox-size);margin:0;width:var(--rpf-input-checkbox-size)}.rpf-input-checkbox input[type=checkbox]:checked{background:var(--rpf-grey-850);background-image:url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M7.95834 15.0003L3.20834 10.2503L4.39584 9.06283L7.95834 12.6253L15.6042 4.97949L16.7917 6.16699L7.95834 15.0003Z" fill="white"/></svg>')}.rpf-input-checkbox input[type=checkbox]:disabled{border-color:var(--rpf-input-background-color-disabled);background-color:var(--rpf-input-background-color-disabled)}.rpf-input-checkbox input[type=checkbox]:disabled:checked{background-color:var(--rpf-grey-600)}.rpf-input-checkbox--error input[type=checkbox]{border-color:var(--rpf-input-color-error)}.rpf-input-checkbox--error input[type=checkbox]:checked{background-color:var(--rpf-input-color-error)}.rpf-input-checkbox.rpf-input--full-width{max-width:none}.rpf-input-checkbox:has(>input[type=checkbox]:disabled),.rpf-input-checkbox--disabled{color:var(--rpf-label-text-color-disabled)}.rpf-input-checkbox input[type=checkbox]:focus-visible{outline:3px solid var(--rpf-input-outline-color);outline-offset:0}.rpf-fieldset{all:unset;background-color:var(--rpf-input-background-color);box-sizing:border-box;display:block;color:var(--rpf-input-color);margin-block-end:var(--space-3);max-inline-size:fit-content}.rpf-fieldset--full-width,.rpf-fieldset--full-width .rpf-fieldset__inputs {max-inline-size:none}.rpf-fieldset__inputs :last-child{margin-block-end:0}.rpf-fieldset--error .rpf-input-checkbox,.rpf-fieldset--error .rpf-input-radio{--rpf-input-border-colour: var(--rpf-input-color-error)}.rpf-fieldset--error .rpf-input-checkbox input[type=checkbox]:checked,.rpf-fieldset--error .rpf-input-radio input[type=checkbox]:checked{background-color:var(--rpf-input-color-error)}.rpf-fieldset--error .rpf-input-checkbox input[type=radio]:checked,.rpf-fieldset--error .rpf-input-radio input[type=radio]:checked{background-image:url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="hsla(0, 88%, 33%, 1)"/></svg>')}.rpf-input-password.rpf-input{border-inline-end:0;border-end-start-radius:var(--border-radius);border-end-end-radius:0;border-start-end-radius:0;border-start-start-radius:var(--border-radius);min-block-size:calc(var(--lg-target-size) - var(--input-border-width) 2);min-inline-size:0}.rpf-input-password.rpf-input:disabled,.rpf-input-password.rpf-input--disabled{border-color:var(--rpf-input-background-color-disabled);background-color:var(--rpf-input-background-color-disabled)}.rpf-input-password.rpf-input:read-only,.rpf-input-password.rpf-input--read-only,.rpf-input-password.rpf-input--readonly{border-color:var(--rpf-input-background-color-readonly);background-color:var(--rpf-input-background-color-readonly)}.rpf-input-password[type=password]{font-family:caption;font-size:var(--font-size-2);letter-spacing:var(--space-0-125)}.rpf-input-password--readonly,.rpf-input-password--read-only,.rpf-input-password:read-only{border-radius:var(--border-radius);border-right:none}.rpf-input-password:focus-visible{z-index:1}.rpf-input-password__button{background-color:var(--rpf-input-background-color);border-end-end-radius:var(--border-radius);border-end-start-radius:0;border-start-end-radius:var(--border-radius);border-start-start-radius:0;font-size:var(--font-size-1);justify-content:center;min-block-size:calc(var(--lg-target-size) - var(--input-border-width) * 2);min-inline-size:var(--space-9);text-decoration:underline}.rpf-input-password__button:before{border:var(--input-border-width) solid var(--rpf-input-color);border-end-end-radius:var(--border-radius);border-end-start-radius:0;border-start-end-radius:var(--border-radius);border-start-start-radius:0}.rpf-input-password__button--error:before{border:var(--input-border-width) solid var(--rpf-input-color-error)}.rpf-input-password__button:active:before{border-color:transparent}.rpf-input-password__button:focus-visible{outline:3px solid var(--rpf-input-outline-color)}.rpf-input-password__button:focus-visible:before{outline:none}.rpf-input-password__button:active:before,.rpf-input-password__button:hover:before{border:var(--input-border-width) solid var(--rpf-input-color)}.rpf-input-password__container{display:flex;max-width:50ch}.rpf-input-password__container--full-width{max-width:none}.rpf-input-password__container--error{border-color:var(--rpf-input-color-error)}.rpf-input-password__container--readonly button,.rpf-input-password__container--read-only button,.rpf-input-password__container--disabled button{display:none}:root,:host{--link-color: var(--rpf-link-text);--link-color-active: var(--rpf-navy-600);--link-color-hover: var(--link-color)}.rpf-link{border-radius:var(--border-radius);color:var(--link-color);cursor:pointer;font-weight:var(--font-weight-bold);max-inline-size:fit-content}.rpf-link:active{color:var(--link-color-active)}.rpf-link:hover{color:var(--link-color-hover)}.rpf-link:focus-visible{outline:3px solid var(--link-color)}.rpf-link--block{align-items:center;display:flex;min-block-size:var(--min-target-size)}.rpf-link--external{display:inline-flex;text-decoration:none}.rpf-link--external span{text-decoration:underline}.rpf-link--external:after{content:"";display:inline-flex;font-family:Material Symbols Sharp,sans-serif;padding-inline-end:var(--space-0-5);padding-inline-start:var(--space-0-25)}:root,:host{--rpf-input-radio-hit-target: var(--min-target-size);--rpf-input-radio-size: var(--space-3)}.rpf-input-radio{align-items:center;border-radius:var(--space-1);box-sizing:border-box;display:flex;gap:var(--space-1-5);max-width:50ch;min-height:var(--rpf-input-radio-hit-target);min-width:240px;padding-block:calc((var(--rpf-input-radio-hit-target) - var(--rpf-input-radio-size)) / 2);width:100%}.rpf-input-radio input[type=radio]{align-self:flex-start;-webkit-appearance:none;-moz-appearance:none;appearance:none;background:var(--rpf-white);border:var(--space-0-25) solid var(--rpf-input-border-colour);border-radius:var(--rpf-input-radio-size);flex-shrink:0;height:var(--rpf-input-radio-size);margin:0;width:var(--rpf-input-radio-size)}.rpf-input-radio input[type=radio]:checked{background-image:url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="hsla(228, 9%, 15%, 1)"/></svg>');background-position:center center;background-repeat:no-repeat}.rpf-input-radio input[type=radio]:disabled{border-color:var(--rpf-input-background-color-disabled);background-color:var(--rpf-input-background-color-disabled)}.rpf-input-radio input[type=radio]:disabled:checked{background-image:url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="hsla(229, 8%, 61%, 1)"/></svg>')}.rpf-input-radio--error input[type=radio]{border-color:var(--rpf-input-color-error)}.rpf-input-radio--error input[type=radio]:checked{background-image:url('data:image/svg+xml;utf8,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><rect width="12" height="12" rx="6" fill="hsla(0, 88%, 33%, 1)"/></svg>')}.rpf-input-radio.rpf-input--full-width{max-width:none}.rpf-input-radio:has(>input[type=radio]:disabled),.rpf-input-radio--disabled{color:var(--rpf-label-text-color-disabled)}.rpf-input-radio input[type=radio]:focus-visible{outline:3px solid var(--rpf-input-outline-color);outline-offset:0}:root,:host{--rpf-button-background-color: var(--rpf-navy-800);--rpf-button-background-color-hover: var(--rpf-navy-900);--rpf-button-background-color-active: var(--rpf-navy-600);--rpf-button-background-color-disabled: var(--rpf-grey-600);--rpf-button-text-color: var(--rpf-white);--rpf-button-danger-background-color: var(--rpf-alert-error);--rpf-button-danger-background-color-hover: var(--rpf-alert-error);--rpf-button-danger-background-color-active: var(--rpf-red-900);--rpf-button-danger-background-color-disabled: var(--rpf-grey-600);--rpf-button-danger-text-color: var(--rpf-white);--rpf-button-border-radius: var(--border-radius);--rpf-button-border-width: var(--border-width-md);--rpf-button-lg-height: var(--lg-target-size);--rpf-button-sm-height: var(--sm-target-size);--rpf-button-min-target-size: var(--min-target-size)}.rpf-button{all:unset;align-items:center;box-sizing:border-box;color:var(--rpf-button-text-color);cursor:pointer;display:flex;font-size:var(--font-size-1-5);font-weight:var(--font-weight-bold);gap:var(--space-1);min-block-size:var(--rpf-button-lg-height);padding:var(--space-1) var(--space-2);position:relative;text-align:center;text-decoration:none;transform:scale(1);inline-size:fit-content}.rpf-button:before{background-color:var(--rpf-button-background-color);border-color:var(--rpf-button-border-color, var(--rpf-button-background-color));border-radius:var(--rpf-button-border-radius);border-style:solid;border-width:var(--rpf-button-border-width);content:"";display:block;top:0;right:0;bottom:0;left:0;position:absolute;z-index:-1}.rpf-button:hover:before{background-color:var(--rpf-button-background-color-hover);border-color:var(--rpf-button-border-color-hover, var(--rpf-button-background-color-hover))}.rpf-button:active:before{background-color:var(--rpf-button-background-color-active);border-color:var(--rpf-button-border-color-active, var(--rpf-button-background-color-active))}.rpf-button:focus-visible:before{outline:var(--border-width-md) solid var(--rpf-button-background-color);outline-offset:3px}.rpf-button:disabled,.rpf-button--disabled{cursor:default}.rpf-button:disabled:before,.rpf-button:disabled:hover:before,.rpf-button--disabled:before,.rpf-button--disabled:hover:before{border-color:var(--rpf-button-border-color-disabled, var(--rpf-button-background-color-disabled));background-color:var(--rpf-button-background-color-disabled)}.rpf-button--secondary{color:var(--rpf-button-background-color)}.rpf-button--secondary:before{background-color:var(--rpf-button-text-color)}.rpf-button--secondary:hover{color:var(--rpf-button-background-color-hover)}.rpf-button--secondary:hover:before{background-color:var(--rpf-button-text-color);border-color:var(--rpf-button-border-color-hover, var(--rpf-button-background-color-hover))}.rpf-button--secondary:active{color:var(--rpf-button-background-color-active)}.rpf-button--secondary:active:before{background-color:var(--rpf-button-text-color);border-color:var(--rpf-button-border-color-active, var(--rpf-button-background-color-active))}.rpf-button--secondary:disabled,.rpf-button--secondary.rpf-button--disabled{color:var(--rpf-button-background-color-disabled)}.rpf-button--secondary:disabled:hover:before,.rpf-button--secondary:disabled:before,.rpf-button--secondary.rpf-button--disabled:hover:before,.rpf-button--secondary.rpf-button--disabled:before{background-color:var(--rpf-button-text-color);border-color:var(--rpf-button-border-color-disabled, var(--rpf-button-background-color-disabled))}.rpf-button--secondary.rpf-button--danger{color:var(--rpf-button-danger-background-color)}.rpf-button--secondary.rpf-button--danger:before{background-color:var(--rpf-button-danger-text-color)}.rpf-button--secondary.rpf-button--danger:hover{color:var(--rpf-button-danger-background-color-hover)}.rpf-button--secondary.rpf-button--danger:hover:before{background-color:var(--rpf-button-danger-text-color);border-color:var(--rpf-button-danger-border-color-hover, var(--rpf-button-danger-background-color-hover))}.rpf-button--secondary.rpf-button--danger:active{color:var(--rpf-button-danger-background-color-active)}.rpf-button--secondary.rpf-button--danger:active:before{background-color:var(--rpf-button-danger-text-color);border-color:var(--rpf-button-danger-border-color-active, var(--rpf-button-danger-background-color-active))}.rpf-button--secondary.rpf-button--danger:disabled,.rpf-button--secondary.rpf-button--danger.rpf-button--disabled{color:var(--rpf-button-danger-background-color-disabled)}.rpf-button--secondary.rpf-button--danger:disabled:hover:before,.rpf-button--secondary.rpf-button--danger:disabled:before,.rpf-button--secondary.rpf-button--danger.rpf-button--disabled:hover:before,.rpf-button--secondary.rpf-button--danger.rpf-button--disabled:before{background-color:var(--rpf-button-danger-text-color);border-color:var(--rpf-button-danger-border-color-disabled, var(--rpf-button-danger-background-color-disabled))}.rpf-button--tertiary{color:var(--rpf-button-background-color)}.rpf-button--tertiary:before{background-color:transparent;border-color:transparent}.rpf-button--tertiary:hover{color:var(--rpf-button-background-color-hover)}.rpf-button--tertiary:hover:before{background-color:transparent;border-color:transparent}.rpf-button--tertiary:active{color:var(--rpf-button-background-color-active)}.rpf-button--tertiary:active:before{background-color:transparent}.rpf-button--tertiary:disabled,.rpf-button--tertiary.rpf-button--disabled{color:var(--rpf-button-background-color-disabled)}.rpf-button--tertiary:disabled:before,.rpf-button--tertiary:disabled:hover:before,.rpf-button--tertiary.rpf-button--disabled:before,.rpf-button--tertiary.rpf-button--disabled:hover:before{background-color:transparent;border-color:transparent}.rpf-button--tertiary.rpf-button--danger{color:var(--rpf-button-danger-background-color)}.rpf-button--tertiary.rpf-button--danger:before{background-color:transparent;border-color:transparent}.rpf-button--tertiary.rpf-button--danger:hover{color:var(--rpf-button-danger-background-color-hover)}.rpf-button--tertiary.rpf-button--danger:hover:before{background-color:transparent;border-color:transparent}.rpf-button--tertiary.rpf-button--danger:active{color:var(--rpf-button-danger-background-color-active)}.rpf-button--tertiary.rpf-button--danger:active:before{background-color:transparent}.rpf-button--tertiary.rpf-button--danger:disabled,.rpf-button--tertiary.rpf-button--danger.rpf-button--disabled{color:var(--rpf-button-danger-background-color-disabled)}.rpf-button--tertiary.rpf-button--danger:disabled:before,.rpf-button--tertiary.rpf-button--danger:disabled:hover:before,.rpf-button--tertiary.rpf-button--danger.rpf-button--disabled:before,.rpf-button--tertiary.rpf-button--danger.rpf-button--disabled:hover:before{background-color:transparent;border-color:transparent}.rpf-button--danger{color:var(--rpf-button-danger-text-color)}.rpf-button--danger:before{background-color:var(--rpf-button-danger-background-color);border-color:var(--rpf-button-danger-border-color, var(--rpf-button-danger-background-color))}.rpf-button--danger:hover:before{background-color:var(--rpf-button-danger-background-color-hover);border-color:var(--rpf-button-danger-border-color-hover, var(--rpf-button-danger-background-color-hover))}.rpf-button--danger:active:before{background-color:var(--rpf-button-danger-background-color-active);border-color:var(--rpf-button-danger-border-color-active, var(--rpf-button-danger-background-color-active))}.rpf-button--danger:focus-visible:before{outline:var(--border-width-md) solid var(--rpf-button-danger-background-color)}.rpf-button--icon-only{block-size:var(--rpf-button-lg-height);justify-content:center;line-height:var(--rpf-button-lg-height);padding:0;text-align:center;inline-size:var(--rpf-button-lg-height)}.rpf-button--icon-only .rpf-button__icon{margin:0 auto}.rpf-button--sm{font-size:var(--font-size-1);min-block-size:var(--rpf-button-min-target-size);padding:var(--space-1) var(--space-1)}.rpf-button--sm:before{inset:calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2) 0}.rpf-button--sm.rpf-button--icon-only{block-size:var(--rpf-button-min-target-size);line-height:var(--rpf-button-min-target-size);padding:0;inline-size:var(--rpf-button-min-target-size)}.rpf-button--sm.rpf-button--icon-only:before{inset:calc((var(--rpf-button-min-target-size) - var(--rpf-button-sm-height)) / 2)}.rpf-button--sm .material-symbols-sharp{font-size:20px;font-variation-settings:"OPSZ" 20}.rpf-button--full-width{justify-content:center;inline-size:100%}.rpf-input-search-container{display:flex;max-width:50ch;min-width:240px;width:100%}.rpf-input-search-container input[type=search]::-webkit-search-decoration,.rpf-input-search-container input[type=search]::-webkit-search-cancel-button{-webkit-appearance:none;-moz-appearance:none;appearance:none}.rpf-input-search-container .rpf-input-search{border-end-end-radius:0;border-inline-end:0;border-start-end-radius:0}.rpf-input-search-container .rpf-button{flex-shrink:0;border-end-end-radius:var(--border-radius);border-end-start-radius:0;border-start-end-radius:var(--border-radius);border-start-start-radius:0;box-sizing:border-box;justify-content:center;max-width:var(--space-6)}.rpf-input-search-container .rpf-button:before{border:var(--input-border-width) solid var(--rpf-input-color);border-end-end-radius:var(--border-radius);border-end-start-radius:0;border-start-end-radius:var(--border-radius);border-start-start-radius:0}.rpf-input-search-container .rpf-button:disabled .rpf-button__icon,.rpf-input-search-container .rpf-button--disabled .rpf-button__icon{color:var(--rpf-input-color)}.rpf-input-search-container .rpf-button:disabled:before,.rpf-input-search-container .rpf-button--disabled:before{background-color:var(--rpf-input-background-color-disabled);border-color:var(--rpf-input-background-color-disabled)}.rpf-input-search-container .rpf-button--error:before{border-color:var(--rpf-alert-error)}.rpf-input-search-container .rpf-input-search:focus-visible,.rpf-input-search-container .rpf-button:focus-visible{outline:3px solid var(--rpf-input-outline-color);z-index:1}.rpf-input-search-container .rpf-input-search:focus-visible:before,.rpf-input-search-container .rpf-button:focus-visible:before{outline:0}.rpf-input.rpf-input-select{background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none'><path fill='%23212121' d='m12 15.375-6-6 1.4-1.4 4.6 4.6 4.6-4.6 1.4 1.4-6 6Z'/></svg>");background-repeat:no-repeat;background-position:center right var(--space-1-5)}html[dir=rtl] .rpf-input.rpf-input-select{background-position:center left var(--space-1-5)}.rpf-input.rpf-input-select:disabled,.rpf-input.rpf-input-select--disabled{background-image:none}:root,:host{--rpf-brand-black: hsla(60, 4%, 11%, 1);--rpf-brand-leaf: hsla(123, 43%, 48%, 1);--rpf-brand-raspberry: hsla(342, 71%, 47%, 1);--rpf-raspberry-50: hsla(338, 57%, 97%, 1);--rpf-raspberry-100: hsla(342, 62%, 96%, 1);--rpf-raspberry-200: hsla(344, 73%, 93%, 1);--rpf-raspberry-400: hsla(341, 63%, 84%, 1);--rpf-raspberry-500: hsla(343, 62%, 68%, 1);--rpf-raspberry-600: hsla(343, 64%, 58%, 1);--rpf-raspberry-800: hsla(342, 71%, 47%, 1);--rpf-raspberry-900: hsla(340, 78%, 36%, 1)}:root,:host{--min-target-size: 44px;--sm-target-size: 32px;--lg-target-size: 48px}:root,:host{--rpf-switch-width: 52px;--rpf-switch-height: 32px;--rpf-switch-border-width: 2px;--rpf-switch-handle-border-radius: 50%;--rpf-switch-off-color: var(--rpf-grey-500);--rpf-switch-on-color: var(--rpf-navy-800);--rpf-switch-icon-off-color: var(--rpf-white);--rpf-switch-track-off-color: var(--rpf-grey-50);--rpf-switch-handle-off-color: var(--rpf-switch-off-color);--rpf-switch-handle-on-color: var(--rpf-white)}.rpf-switch{box-sizing:border-box;display:inline-flex;align-items:center;gap:var(--space-1-5);min-block-size:var(--min-target-size);cursor:pointer;font-weight:var(--font-weight-bold)}.rpf-switch .rpf-label{padding:0}.rpf-switch .rpf-switch__checkbox{position:absolute;opacity:0;inline-size:1px;block-size:1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap}.rpf-switch .rpf-switch__track{box-sizing:border-box;display:flex;align-items:center;flex-shrink:0;inline-size:var(--rpf-switch-width);block-size:var(--rpf-switch-height);padding-block:.375rem;padding-inline:.5rem;border-radius:var(--rpf-switch-border-radius, calc(var(--rpf-switch-height) / 2));border:var(--rpf-switch-border-width) solid var(--rpf-switch-off-color);background:var(--rpf-switch-track-color);transition:background-color .2s ease-out,border-color .2s ease-out}.rpf-switch .rpf-switch__handle{block-size:calc(var(--rpf-switch-handle-size, calc(var(--rpf-switch-height) * .75)) / 1.5);aspect-ratio:1/1;margin-inline-start:0;background-color:var(--rpf-switch-off-color);border-radius:var(--rpf-switch-handle-border-radius);transition:margin-inline-start .2s ease-out,background-color .2s ease-out,box-shadow .2s ease-out,block-size .2s ease-out;transition-behavior:allow-discrete}.rpf-switch--icon .rpf-switch__track{padding-inline:.125rem}.rpf-switch--icon .rpf-switch__handle{block-size:var(--rpf-switch-handle-size, calc(var(--rpf-switch-height) * .75));display:grid;place-items:center}.rpf-switch--icon .rpf-switch__icon{background-color:var(--rpf-switch-icon-off-color);inline-size:1rem;block-size:1rem;display:inline-block;-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%231f1f1f"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>');mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%231f1f1f"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>');-webkit-mask-size:1rem;mask-size:1rem}.rpf-switch:has(.rpf-switch__checkbox:disabled),.rpf-switch--disabled{cursor:default;opacity:50%}.rpf-switch--error .rpf-switch__track{border-color:var(--rpf-input-color-error)}.rpf-switch__track:has(.rpf-switch__checkbox:focus-visible){outline:3px solid var(--rpf-input-outline-color);outline-offset:0}.rpf-switch--error:has(.rpf-switch__checkbox:checked) .rpf-switch__track{background-color:var(--rpf-input-color-error);border-color:var(--rpf-input-color-error)}.rpf-switch:hover .rpf-switch__handle{box-shadow:0 0 0 14px color-mix(in srgb,var(--rpf-switch-off-color),transparent 90%)}.rpf-switch--full-width{inline-size:100%;max-inline-size:none;justify-content:space-between}.rpf-switch--reverse{flex-direction:row-reverse}.rpf-switch--align-start{align-items:start}.rpf-switch--disabled:hover .rpf-switch__handle{box-shadow:none}.rpf-switch:has(.rpf-switch__checkbox:checked) .rpf-switch__track{background-color:var(--rpf-switch-track-on-color, var(--rpf-switch-on-color));border:2px solid var(--rpf-switch-track-on-color, var(--rpf-switch-on-color));padding-inline:.125rem}.rpf-switch:has(.rpf-switch__checkbox:checked) .rpf-switch__handle{block-size:var(--rpf-switch-handle-size, calc(var(--rpf-switch-height) * .75));margin-inline-start:calc(100% - var(--rpf-switch-handle-size, calc(var(--rpf-switch-height) * .75)) - var(--rpf-switch-border-width) * .5);background-color:var(--rpf-switch-handle-on-color)}.rpf-switch:has(.rpf-switch__checkbox:checked):hover .rpf-switch__handle{box-shadow:0 0 0 10px color-mix(in srgb,var(--rpf-switch-on-color),transparent 90%)}.rpf-switch:has(.rpf-switch__checkbox:checked) .rpf-switch__icon{background-color:var(--rpf-switch-icon-on-color, var(--rpf-switch-on-color));inline-size:1rem;block-size:1rem;display:inline-block;-webkit-mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%231f1f1f"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>');mask-image:url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 -960 960 960" fill="%231f1f1f"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>');-webkit-mask-size:1rem;mask-size:1rem}.rpf-switch:has(.rpf-switch__checkbox:disabled):hover .rpf-switch__handle{box-shadow:none}.rpf-visually-hidden{border:0;clip-path:inset(50%);inline-size:1px;block-size:1px;margin:0;overflow:hidden;position:absolute;white-space:nowrap}.rpf-input.rpf-input-textarea{resize:vertical;min-height:120px;height:auto;max-height:240px;overflow:auto;white-space:pre-wrap}.rpf-input.rpf-input-textarea:read-only,.rpf-input.rpf-input-textarea--read-only,.rpf-input.rpf-input-textarea--readonly{border-color:var(--rpf-input-background-color-readonly);background-color:var(--rpf-input-background-color-readonly)}:root,:host{--border-radius: var(--space-1);--border-radius-sm: var(--space-0-5);--border-width-sm: 1px;--border-width-md: 2px;--border-width-lg: 3px;--alert-border-width: var(--border-width-md);--fieldset-border-width: var(--border-width-md);--input-border-width: var(--border-width-md);--table-border-width: var(--border-width-sm)}:root,:host{--rpf-input-background-color: var(--rpf-white);--rpf-input-background-color-disabled: var(--rpf-grey-50);--rpf-input-background-color-readonly: var(--rpf-grey-50);--rpf-input-border-colour: var(--rpf-grey-850);--rpf-input-color-error: var(--rpf-alert-error);--rpf-input-color: var(--rpf-text-primary);--rpf-input-outline-color: var(--rpf-blue-800)}.rpf-input-field{margin-block-end:var(--space-3)}.rpf-input{all:unset;background-color:var(--rpf-input-background-color);border:var(--input-border-width) solid var(--rpf-input-color);border-radius:var(--border-radius);box-sizing:border-box;color:var(--rpf-input-color);display:flex;font-size:var(--font-size-1);line-height:var(--line-height-2);padding-block:calc(var(--space-1) - 2px);padding-inline:var(--space-1-5);max-width:50ch;min-width:240px;width:100%}.rpf-input:disabled,.rpf-input--disabled{border-color:var(--rpf-input-background-color-disabled);background-color:var(--rpf-input-background-color-disabled)}.rpf-input:focus-visible{outline:3px solid var(--rpf-input-outline-color)}.rpf-input--error{border-color:var(--rpf-input-color-error)}.rpf-input--full-width{max-width:none}:root,:host{--rpf-label-hint-color: var(--rpf-text-secondary);--rpf-label-text-color: var(--rpf-text-primary);--rpf-label-text-color-disabled: var(--rpf-grey-500)}.rpf-label{all:unset;color:var(--rpf-label-text-color);display:flex;flex-direction:column;font-weight:var(--font-weight-bold);padding-block-end:var(--space-1);font-size:var(--font-size-1);line-height:var(--line-height-1-5)}.rpf-label__hint{color:var(--rpf-label-hint-color);font-size:var(--font-size-1);font-weight:var(--font-weight-regular)}.rpf-label--disabled,.rpf-label--disabled .rpf-label__hint{color:var(--rpf-label-text-color-disabled)}:root,:host{--rpf-message-text-color: var(--rpf-alert-error)}.rpf-error-message{all:unset;align-items:center;color:var(--rpf-message-text-color);display:flex;font-weight:var(--font-weight-bold);max-width:50ch;padding-block:var(--space-1)}.rpf-error-message__icon{margin-inline-end:var(--space-1)}:root,:host{--rpf-overlay: hsla(0, 0%, 0%, .5)}:root,:host{--rpf-modal-background-color: var(--rpf-white);--rpf-modal-border-color: var(--rpf-grey-150);--rpf-modal-max-block-size: calc(100vh - 2 * var(--space-10));--rpf-modal-mobile-max-block-size: calc(100dvh - 2 * var(--space-2));--rpf-modal-max-inline-size: calc(100vw - 2 * var(--space-10));--rpf-modal-mobile-max-inline-size: calc(100vw - 2 * var(--space-2));--rpf-modal-border-radius: var(--space-1);--rpf-modal-content-padding: var(--space-3);--rpf-modal-backdrop-color: var(--rpf-overlay);--rpf-modal-buttons-flex-direction: row-reverse;--rpf-modal-buttons-justify-content: flex-start}.rpf-modal{background-color:var(--rpf-modal-background-color);border:none;border-radius:var(--rpf-modal-border-radius);margin-inline:auto;min-inline-size:15rem;inline-size:100%;padding:0;max-inline-size:var(--rpf-modal-mobile-max-inline-size);max-block-size:var(--rpf-modal-mobile-max-block-size)}@media(min-width:30rem){.rpf-modal{max-inline-size:var(--rpf-modal-max-inline-size);max-block-size:var(--rpf-modal-max-block-size)}}.rpf-modal__wrapper{display:grid;grid-template-rows:auto minmax(0,1fr) auto;block-size:100%;max-block-size:inherit;overflow:hidden}.rpf-modal__header{display:flex;align-items:center;align-self:stretch;border-block-end:1px solid var(--rpf-modal-border-color);gap:var(--space-1);padding:var(--space-1);padding-inline-start:var(--space-2)}.rpf-modal__title{font-size:var(--font-size-2);font-weight:var(--font-weight-bold);line-height:var(--line-height-2);flex:1 0 0;margin:0}.rpf-modal__content{overflow-y:auto;align-items:center;border-block-end:1px solid var(--rpf-modal-border-color);display:flex;flex-direction:column;padding:var(--rpf-modal-content-padding)}.rpf-modal__buttons{align-items:center;display:flex;flex-direction:column;gap:var(--space-2);padding:var(--space-2)}.rpf-modal__buttons .rpf-button{justify-content:center;inline-size:100%}@media not (max-width:34rem){.rpf-modal__buttons{flex-direction:var(--rpf-modal-buttons-flex-direction);gap:var(--space-2);justify-content:var(--rpf-modal-buttons-justify-content)}.rpf-modal__buttons .rpf-button{inline-size:auto}}.rpf-modal::backdrop{background-color:var(--rpf-modal-backdrop-color);-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}:root,:host{--rpf-shadow-top: 0px -12px 24px 0px rgba(0, 0, 0, .04);--rpf-shadow-centre: 0px 0px 8px 0px rgba(0, 0, 0, .08);--rpf-shadow-bottom: 0px 12px 24px 0px rgba(0, 0, 0, .04)}:root,:host{--rpf-menu-background-color: var(--rpf-white);--rpf-menu-border-color: var(--rpf-grey-50);--rpf-menu-divider-color: var(--rpf-grey-100)}.rpf-menu{margin:0;display:inline-flex;flex-direction:column;padding:var(--space-1-5);gap:var(--space-0-5);border-radius:var(--space-1);border:2px solid var(--rpf-menu-border-color);background:var(--rpf-menu-background-color);box-shadow:var(--rpf-shadow-centre);list-style:none}.rpf-menu hr{inline-size:100%;border:none;border-block-start:1px solid var(--rpf-menu-divider-color);margin-block:var(--space-0-25)}:root,:host{--rpf-text-primary: hsla(0, 0%, 13%, 1);--rpf-text-primary-darkmode: var(--rpf-white);--rpf-text-secondary: hsla(200, 9%, 33%, 1);--rpf-text-secondary-darkmode: hsla(0, 0%, 80%, 1);--rpf-link-text: var(--rpf-navy-800)}:root,:host{--rpf-menu-item-text-color: var(--rpf-text-primary);--rpf-menu-item-text-color-danger: var(--rpf-alert-error);--rpf-menu-item-background-color: transparent;--rpf-menu-item-background-color-hover: var(--rpf-grey-50);--rpf-menu-item-background-color-active: var(--rpf-grey-100);--rpf-menu-item-focus: var(--rpf-raspberry-800)}.rpf-menu__item{list-style:none;margin:0;padding:0;color:var(--rpf-menu-item-text-color)}.rpf-menu__item button,.rpf-menu__item a{border:none;margin:0;box-sizing:border-box;background-color:transparent;-webkit-user-select:none;user-select:none;text-decoration:none;cursor:pointer;font-family:inherit;text-align:start;min-inline-size:7.5rem;inline-size:100%;display:inline-flex;align-items:center;gap:.5rem;border-radius:var(--space-1);font-size:var(--font-size-1);font-weight:var(--font-weight-bold);line-height:var(--line-height-1-5);color:inherit;padding:var(--space-1-5) var(--space-1)}.rpf-menu__item button:hover,.rpf-menu__item a:hover{background-color:var(--rpf-menu-item-background-color-hover)}.rpf-menu__item button:active,.rpf-menu__item a:active{background-color:var(--rpf-menu-item-background-color-active)}.rpf-menu__item button:focus-visible,.rpf-menu__item a:focus-visible{outline:2px solid var(--rpf-menu-item-focus)}.rpf-menu__item--danger{color:var(--rpf-menu-item-text-color-danger)}:root,:host{--rpf-menu-title-color: var(--rpf-text-secondary)}.rpf-menu__title{list-style:none;margin:0;padding:0;color:var(--rpf-menu-title-color);font-size:var(--font-size-1);font-weight:var(--font-weight-bold);line-height:var(--line-height-1-5);margin-block:var(--space-0-25);border-block-end:1px solid var(--rpf-menu-divider-color)}.rpf-menu__title span{display:inline-block;margin-inline:var(--space-1);margin-block-end:var(--space-0-5)}:root,:host{--font-size-0-5: .5rem;--font-size-0-75: .75rem;--font-size-1: 1rem;--font-size-1-5: 1.25rem;--font-size-2: 1.5rem;--font-size-3: 2rem;--font-size-4: 2.5rem;--font-size-5: 3rem;--font-size-6: 3.5rem;--font-size-7: 4rem;--font-size-8: 4.5rem;--font-size-9: 5rem}:root,:host{--line-height-0-75: .75rem;--line-height-1: 1rem;--line-height-1-5: 1.5rem;--line-height-2: 2rem;--line-height-2-5: 2.5rem;--line-height-3: 3rem;--line-height-3-5: 3.5rem;--line-height-4: 4rem;--line-height-4-5: 4.5rem;--line-height-5: 5rem;--line-height-5-5: 5.5rem;--line-height-6: 6rem;--line-height-6-5: 6.5rem}:root,:host{--rpf-white: hsla(0, 0%, 100%, 1);--rpf-off-white: hsla(225, 25%, 97%, 1);--rpf-off-white-warm: hsla(36, 38.5%, 97.5%, 1);--rpf-grey-50: hsla(210, 8%, 95%, 1);--rpf-grey-100: hsla(228, 10%, 90%, 1);--rpf-grey-150: hsla(223, 9%, 85%, 1);--rpf-grey-200: hsla(228, 10%, 80%, 1);--rpf-grey-300: hsla(229, 9%, 75%, 1);--rpf-grey-400: hsla(229, 8%, 61%, 1);--rpf-grey-500: hsla(229, 9%, 42%, 1);--rpf-grey-600: hsla(228, 9%, 32%, 1);--rpf-grey-700: hsla(228, 9%, 22%, 1);--rpf-grey-800: hsla(232, 9%, 18%, 1);--rpf-grey-850: hsla(228, 9%, 15%, 1);--rpf-grey-900: hsla(228, 9%, 10%, 1);--rpf-grey-950: hsla(228, 8%, 5%, 1);--rpf-black: hsla(0, 0%, 0%, 1)}:root,:host{--rpf-red-100: hsla(4, 89%, 96%, 1);--rpf-red-200: hsla(1, 87%, 91%, 1);--rpf-red-400: hsla(1, 87%, 82%, 1);--rpf-red-600: hsla(1, 87%, 72%, 1);--rpf-red-800: hsla(1, 87%, 63%, 1);--rpf-red-900: hsla(1, 52%, 50%, 1);--rpf-green-100: hsla(125, 41%, 95%, 1);--rpf-green-200: hsla(122, 39%, 87%, 1);--rpf-green-400: hsla(123, 40%, 74%, 1);--rpf-green-600: hsla(123, 40%, 61%, 1);--rpf-green-800: hsla(123, 43%, 48%, 1);--rpf-green-900: hsla(123, 43%, 34%, 1);--rpf-teal-100: hsla(176, 55%, 94%, 1);--rpf-teal-200: hsla(174, 55%, 85%, 1);--rpf-teal-400: hsla(174, 55%, 70%, 1);--rpf-teal-600: hsla(174, 56%, 56%, 1);--rpf-teal-800: hsla(174, 81%, 41%, 1);--rpf-teal-900: hsla(174, 81%, 27%, 1);--rpf-teal-950: hsla(174, 80%, 20%, 1);--rpf-orange-100: hsla(31, 100%, 95%, 1);--rpf-orange-200: hsla(32, 100%, 88%, 1);--rpf-orange-400: hsla(31, 100%, 77%, 1);--rpf-orange-600: hsla(31, 99%, 65%, 1);--rpf-orange-800: hsla(31, 99%, 54%, 1);--rpf-orange-900: hsla(31, 85%, 35%, 1);--rpf-yellow-100: hsla(51, 100%, 95%, 1);--rpf-yellow-200: hsla(52, 100%, 87%, 1);--rpf-yellow-400: hsla(51, 100%, 75%, 1);--rpf-yellow-600: hsla(52, 100%, 63%, 1);--rpf-yellow-800: hsla(52, 100%, 50%, 1);--rpf-yellow-900: hsla(52, 100%, 26%, 1);--rpf-purple-100: hsla(282, 36%, 95%, 1);--rpf-purple-200: hsla(279, 38%, 87%, 1);--rpf-purple-400: hsla(279, 38%, 73%, 1);--rpf-purple-600: hsla(279, 37%, 60%, 1);--rpf-purple-800: hsla(279, 43%, 47%, 1);--rpf-purple-900: hsla(280, 43%, 37%, 1);--rpf-navy-100: hsla(235, 38%, 94%, 1);--rpf-navy-200: hsla(234, 38%, 84%, 1);--rpf-navy-400: hsla(235, 38%, 69%, 1);--rpf-navy-600: hsla(235, 38%, 53%, 1);--rpf-navy-800: hsla(235, 63%, 37%, 1);--rpf-navy-900: hsla(234, 63%, 30%, 1);--rpf-blue-100: hsla(203, 86%, 95%, 1);--rpf-blue-200: hsla(204, 88%, 87%, 1);--rpf-blue-400: hsla(204, 88%, 74%, 1);--rpf-blue-600: hsla(204, 89%, 60%, 1);--rpf-blue-800: hsla(204, 100%, 47%, 1);--rpf-blue-900: hsla(204, 99%, 37%, 1)}:root,:host{--rpf-alert-error-highlight: hsla(0, 88%, 99%, 1);--rpf-alert-error: hsla(0, 88%, 33%, 1);--rpf-alert-information-highlight: hsla(225, 64%, 99%, 1);--rpf-alert-information: hsla(225, 64%, 33%, 1);--rpf-alert-success-highlight: hsla(136, 90%, 99%, 1);--rpf-alert-success: hsla(136, 90%, 20%, 1);--rpf-alert-warning-highlight: hsla(26, 70%, 99%, 1);--rpf-alert-warning: hsla(26, 70%, 29%, 1)}:root,:host{--color-progress-bar-complete: var(--rpf-navy-800);--color-progress-bar-incomplete: var(--rpf-grey-150);--rpf-progress-bar-background-color: var(--color-progress-bar-incomplete);--rpf-progress-bar-accent-color: var(--color-progress-bar-complete);--rpf-progress-bar-block-size: var(--space-1);--rpf-progress-bar-border-radius: var(--space-1);--rpf-progress-bar-gap: var(--space-3);--rpf-progress-bar-font-size: var(--font-size-1);--rpf-progress-bar-font-weight: var(--font-weight-regular);--rpf-progress-bar-complete-color: var(--rpf-alert-success);--rpf-progress-bar-complete-icon: url('data:image/svg+xml,<svg height="24" viewBox="0 -960 960 960" width="24" xmlns="http://www.w3.org/2000/svg"><path d="m424-296 282-282-56-56-226 226-114-114-56 56zm56 216q-83 0-156-31.5t-127-85.5q-54-54-85.5-127t-31.5-156q0-83 31.5-156t85.5-127q54-54 127-85.5t156-31.5q83 0 156 31.5t127 85.5q54 54 85.5 127t31.5 156q0 83-31.5 156t-85.5 127q-54 54-127 85.5t-156 31.5z"/></svg>')}.rpf-progress-bar__label{font-size:var(--rpf-progress-bar-font-size);line-height:1.5em;font-weight:var(--rpf-progress-bar-font-weight);align-items:center;display:grid;gap:var(--rpf-progress-bar-gap);grid-template-columns:max-content 1fr}.rpf-progress-bar__bar{background:var(--rpf-progress-bar-background-color);block-size:var(--rpf-progress-bar-block-size);border-radius:var(--rpf-progress-bar-border-radius);inline-size:100%;border:none}.rpf-progress-bar__bar::-webkit-progress-bar{background:var(--rpf-progress-bar-background-color);border-radius:var(--rpf-progress-bar-border-radius)}.rpf-progress-bar__bar::-webkit-progress-value{background:var(--rpf-progress-bar-accent-color);border-radius:var(--rpf-progress-bar-border-radius)}.rpf-progress-bar__bar::-moz-progress-bar{background:var(--rpf-progress-bar-accent-color);border-radius:var(--rpf-progress-bar-border-radius)}.rpf-progress-bar--complete{--rpf-progress-bar-accent-color: var(--rpf-progress-bar-complete-color)}.rpf-progress-bar--complete .rpf-progress-bar__label span{display:flex}.rpf-progress-bar--complete .rpf-progress-bar__label span:before{content:"";display:inline-block;block-size:1.5em;aspect-ratio:1/1;margin-inline-end:var(--space-1);vertical-align:middle;background-color:var(--rpf-progress-bar-complete-color);mask-image:var(--rpf-progress-bar-complete-icon);mask-size:contain;mask-repeat:no-repeat;mask-position:center;-webkit-mask-image:var(--rpf-progress-bar-complete-icon);-webkit-mask-size:contain;-webkit-mask-repeat:no-repeat;-webkit-mask-position:center}.rpf-table-cell{border-bottom:var(--table-border-width) solid var(--rpf-grey-100)}.rpf-table-cell>{align-items:center;box-sizing:border-box;display:flex;gap:var(--space-1);line-height:var(--line-height-1-5);padding-block:var(--space-1);padding-inline:var(--space-2)}.rpf-table-cell--header,.rpf-table-cell--sortable-header{background-color:var(--rpf-grey-50)}.rpf-table-cell--header>,.rpf-table-cell--sortable-header>{min-height:var(--space-7);min-width:var(--space-7)}.rpf-table-cell--sortable-header .rpf-table-cell__sort-header{display:flex;width:100%;gap:var(--space-1);min-height:var(--min-target-size);align-items:center;border-radius:var(--border-radius)}.rpf-table-cell--sortable-header .rpf-table-cell__sort-header:focus-visible{outline:2px solid var(--rpf-raspberry-800);outline-offset:3px}.rpf-table-cell--sortable-header button{all:unset;cursor:pointer}.rpf-table-cell--sortable-header a{color:inherit;text-decoration:none}.rpf-table-cell--body{background-color:var(--rpf-white)}.rpf-table-cell--body .rpf-table-cell__content{min-height:var(--space-8);min-width:var(--space-8)}.rpf-table-cell--body .rpf-table-cell__content>{margin-block:auto}.rpf-table-cell--body .rpf-table-cell__content a{color:var(--rpf-brand-500);font-weight:var(--font-weight-bold)}.rpf-table-cell--body .rpf-table-cell__content:has(>.rpf-button){justify-content:end;padding:var(--space-1)}.rpf-table-cell--body .rpf-table-cell__content--truncated{display:inline-block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rpf-table{border:1px solid var(--rpf-grey-100);border-radius:var(--border-radius);overflow:auto;top:0;width:fit-content}.rpf-table--full-width{width:100%}.rpf-table__table{border-collapse:collapse;width:max-content}.rpf-table__table--full-width{width:100%}.rpf-table__table thead th,.rpf-table__table thead td{position:sticky;top:0;z-index:1}:root,:host{--font-weight-regular: 400;--font-weight-bold: 700}:root,:host{--space-0-125: .0625rem;--space-0-25: .125rem;--space-0-5: .25rem;--space-1: .5rem;--space-1-5: .75rem;--space-2: 1rem;--space-3: 1.5rem;--space-4: 2rem;--space-5: 2.5rem;--space-6: 3rem;--space-7: 3.5rem;--space-8: 4rem;--space-9: 4.5rem;--space-10: 5rem}.rpf-tag{--tag-color: var(--rpf-text-primary);--tag-color-secondary: color-mix(in srgb, var(--tag-color), white 95%);--tag-text-color: var(--rpf-white);--tag-text-color-secondary: var(--tag-color);align-items:center;border:solid 1px var(--tag-color);background-color:var(--tag-color);border-radius:2rem;color:var(--tag-text-color);display:flex;font-weight:var(--font-weight-bold);gap:var(--space-0-5);line-height:1.5rem;padding:var(--space-0-5) var(--space-1);inline-size:max-content}.rpf-tag--information{background-color:var(--rpf-alert-information);border-color:var(--rpf-alert-information)}.rpf-tag--success{background-color:var(--rpf-alert-success);border-color:var(--rpf-alert-success)}.rpf-tag--warning{background-color:var(--rpf-alert-warning);border-color:var(--rpf-alert-warning)}.rpf-tag--error{background-color:var(--rpf-alert-error);border-color:var(--rpf-alert-error)}.rpf-tag--secondary{background-color:var(--tag-color-secondary);color:var(--tag-text-color-secondary)}.rpf-tag--secondary.rpf-tag--information{border-color:var(--rpf-alert-information);color:var(--rpf-alert-information)}.rpf-tag--secondary.rpf-tag--success{border-color:var(--rpf-alert-success);color:var(--rpf-alert-success)}.rpf-tag--secondary.rpf-tag--warning{border-color:var(--rpf-alert-warning);color:var(--rpf-alert-warning)}.rpf-tag--secondary.rpf-tag--error{border-color:var(--rpf-alert-error);color:var(--rpf-alert-error)}

package/dist/scss/components/burger-menu.scss CHANGED Viewed

@@ -3,13 +3,16 @@
 @forward '../properties/border';
 @forward '../properties/sizing';
-.rpf-burger-menu {
+:root,
+:host {
   --rpf-burger-menu-background-color: var(--rpf-brand-black);
   --rpf-burger-menu-thickness: 3px;
   --rpf-burger-menu-inline-size: var(--space-3);
   --rpf-burger-menu-border-radius: 0;
   --rpf-burger-animation-speed: 150ms;
+}
+.rpf-burger-menu {
   &__button {
     align-items: center;
     background: transparent;
@@ -31,14 +34,16 @@
     }
   }
-  &__icon, &__icon::before {
+  &__icon,
+  &__icon::before {
     background: var(--rpf-burger-menu-background-color);
     border-radius: var(--rpf-burger-menu-border-radius);
     display: block;
     block-size: var(--rpf-burger-menu-thickness);
     margin-block-start: calc(var(--rpf-burger-menu-thickness) * 1.5);
     inline-size: var(--rpf-burger-menu-inline-size);
-    transition: opacity var(--rpf-burger-animation-speed) cubic-bezier(0, -0.55, 0.265, 1.55) 0ms,
+    transition:
+      opacity var(--rpf-burger-animation-speed) cubic-bezier(0, -0.55, 0.265, 1.55) 0ms,
       transform var(--rpf-burger-animation-speed) cubic-bezier(0, 0, 0.58, 1) 50ms,
       margin-inline-start var(--rpf-burger-animation-speed) cubic-bezier(0, 0, 0.58, 1) 50ms;
     will-change: opacity, transform, margin-inline-start;
@@ -62,7 +67,8 @@
     .open & {
       opacity: 1;
-      &:first-child, &:last-child {
+      &:first-child,
+      &:last-child {
         opacity: 0;
       }

package/dist/scss/components/button.scss CHANGED Viewed

@@ -8,7 +8,8 @@
 @forward '../properties/spacing';
 @forward '../properties/sizing';
-.rpf-button {
+:root,
+:host {
   // Default button variables
   --rpf-button-background-color: var(--rpf-navy-800);
   --rpf-button-background-color-hover: var(--rpf-navy-900);
@@ -16,11 +17,6 @@
   --rpf-button-background-color-disabled: var(--rpf-grey-600);
   --rpf-button-text-color: var(--rpf-white);
-  --rpf-button-border-color: var(--rpf-button-background-color);
-  --rpf-button-border-color-hover: var(--rpf-button-background-color-hover);
-  --rpf-button-border-color-active: var(--rpf-button-background-color-active);
-  --rpf-button-border-color-disabled: var(--rpf-button-background-color-disabled);
   // Danger button variables
   --rpf-button-danger-background-color: var(--rpf-alert-error);
   --rpf-button-danger-background-color-hover: var(--rpf-alert-error);
@@ -28,19 +24,15 @@
   --rpf-button-danger-background-color-disabled: var(--rpf-grey-600);
   --rpf-button-danger-text-color: var(--rpf-white);
-  --rpf-button-danger-border-color: var(--rpf-button-danger-background-color);
-  --rpf-button-danger-border-color-hover: var(--rpf-button-danger-background-color-hover);
-  --rpf-button-danger-border-color-active: var(--rpf-button-danger-background-color-active);
-  --rpf-button-danger-border-color-disabled: var(--rpf-button-danger-background-color-disabled);
   --rpf-button-border-radius: var(--border-radius);
   --rpf-button-border-width: var(--border-width-md); // After a 3D effect? Use combined values, e.g. `2px 2px 4px 2px`
   --rpf-button-lg-height: var(--lg-target-size);
   --rpf-button-sm-height: var(--sm-target-size);
   --rpf-button-min-target-size: var(--min-target-size);
+}
+.rpf-button {
   all: unset;
   align-items: center;
   box-sizing: border-box;
@@ -66,7 +58,7 @@
   /* A bit of a hack to allow for separate visual and target heights */
   &::before {
     background-color: var(--rpf-button-background-color);
-    border-color: var(--rpf-button-border-color);
+    border-color: var(--rpf-button-border-color, var(--rpf-button-background-color));
     border-radius: var(--rpf-button-border-radius);
     border-style: solid;
     border-width: var(--rpf-button-border-width);
@@ -80,12 +72,12 @@
   &:hover::before {
     background-color: var(--rpf-button-background-color-hover);
-    border-color: var(--rpf-button-border-color-hover);
+    border-color: var(--rpf-button-border-color-hover, var(--rpf-button-background-color-hover));
   }
   &:active::before {
     background-color: var(--rpf-button-background-color-active);
-    border-color: var(--rpf-button-border-color-active);
+    border-color: var(--rpf-button-border-color-active, var(--rpf-button-background-color-active));
   }
   &:focus-visible::before {
@@ -99,7 +91,7 @@
     &::before,
     &:hover::before {
-      border-color: var(--rpf-button-border-color-disabled);
+      border-color: var(--rpf-button-border-color-disabled, var(--rpf-button-background-color-disabled));
       background-color: var(--rpf-button-background-color-disabled);
     }
   }
@@ -116,7 +108,7 @@
       &::before {
         background-color: var(--rpf-button-text-color);
-        border-color: var(--rpf-button-border-color-hover);
+        border-color: var(--rpf-button-border-color-hover, var(--rpf-button-background-color-hover));
       }
     }
@@ -125,7 +117,7 @@
       &::before {
         background-color: var(--rpf-button-text-color);
-        border-color: var(--rpf-button-border-color-active);
+        border-color: var(--rpf-button-border-color-active, var(--rpf-button-background-color-active));
       }
     }
@@ -136,7 +128,7 @@
       &:hover::before,
       &:before {
         background-color: var(--rpf-button-text-color);
-        border-color: var(--rpf-button-border-color-disabled);
+        border-color: var(--rpf-button-border-color-disabled, var(--rpf-button-background-color-disabled));
       }
     }
@@ -152,7 +144,7 @@
         &::before {
           background-color: var(--rpf-button-danger-text-color);
-          border-color: var(--rpf-button-danger-border-color-hover);
+          border-color: var(--rpf-button-danger-border-color-hover, var(--rpf-button-danger-background-color-hover));
         }
       }
@@ -161,7 +153,7 @@
         &::before {
           background-color: var(--rpf-button-danger-text-color);
-          border-color: var(--rpf-button-danger-border-color-active);
+          border-color: var(--rpf-button-danger-border-color-active, var(--rpf-button-danger-background-color-active));
         }
       }
@@ -172,7 +164,10 @@
         &:hover::before,
         &:before {
           background-color: var(--rpf-button-danger-text-color);
-          border-color: var(--rpf-button-danger-border-color-disabled);
+          border-color: var(
+            --rpf-button-danger-border-color-disabled,
+            var(--rpf-button-danger-background-color-disabled)
+          );
         }
       }
     }
@@ -257,17 +252,17 @@
     &::before {
       background-color: var(--rpf-button-danger-background-color);
-      border-color: var(--rpf-button-danger-border-color);
+      border-color: var(--rpf-button-danger-border-color, var(--rpf-button-danger-background-color));
     }
     &:hover::before {
       background-color: var(--rpf-button-danger-background-color-hover);
-      border-color: var(--rpf-button-danger-border-color-hover);
+      border-color: var(--rpf-button-danger-border-color-hover, var(--rpf-button-danger-background-color-hover));
     }
     &:active::before {
       background-color: var(--rpf-button-danger-background-color-active);
-      border-color: var(--rpf-button-danger-border-color-active);
+      border-color: var(--rpf-button-danger-border-color-active, var(--rpf-button-danger-background-color-active));
     }
     &:focus-visible::before {
@@ -277,6 +272,7 @@
   &--icon-only {
     block-size: var(--rpf-button-lg-height);
+    justify-content: center;
     line-height: var(--rpf-button-lg-height);
     padding: 0;
     text-align: center;

package/dist/scss/components/forms/input-checkbox.scss CHANGED Viewed

@@ -1,11 +1,13 @@
 @forward '../../properties/colors/inputs';
 @forward '../../properties/sizing';
-.rpf-input-checkbox {
+:root,
+:host {
   --rpf-input-checkbox-hit-target: var(--min-target-size);
   --rpf-input-checkbox-size: var(--space-3);
-  --rpf-input-border-colour: var(--rpf-grey-850);
+}
+.rpf-input-checkbox {
   align-items: center;
   border-radius: var(--space-1);
   box-sizing: border-box;

package/dist/scss/components/forms/input-radio.scss CHANGED Viewed

@@ -1,11 +1,13 @@
 @forward '../../properties/colors/inputs';
 @forward '../../properties/sizing';
-.rpf-input-radio {
+:root,
+:host {
   --rpf-input-radio-hit-target: var(--min-target-size);
   --rpf-input-radio-size: var(--space-3);
-  --rpf-input-border-colour: var(--rpf-grey-850);
+}
+.rpf-input-radio {
   align-items: center;
   border-radius: var(--space-1);
   box-sizing: border-box;

package/dist/scss/components/layout/decorative-section.scss CHANGED Viewed

@@ -5,32 +5,45 @@ $wave-path-2: 'm0 28.8 66.667 4.8c66.666 4.8 200 14.4 333.333 19.2 133.333 4.8 2
 $wave-path-3: 'm1600 56-66.67-10.419c-66.66-10.419-200-31.258-333.33-40.189-133.33-8.93-266.667-5.953-400 2.977C666.667 17.3 533.333 32.185 400 36.65c-133.333 4.465-266.667-1.488-333.333-4.465L0 29.208V66h1600V56Z';
 @supports selector(:has(*)) {
-  .rpf-decorative-section {
+  :root,
+  :host {
     --rpf-decorative-section-wave-variant-1-mask-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="64" preserveAspectRatio="none"><path d="#{$wave-path-1}" /></svg>');
     --rpf-decorative-section-wave-variant-2-mask-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="64" preserveAspectRatio="none"><path d="#{$wave-path-2}" /></svg>');
     --rpf-decorative-section-wave-variant-3-mask-svg: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="64" preserveAspectRatio="none"><path d="#{$wave-path-3}" /></svg>');
     --rpf-decorative-section-wave-variant-1-mask-svg-mirror: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="64" preserveAspectRatio="none" transform="scale(-1, 1)"><path d="#{$wave-path-1}" /></svg>');
     --rpf-decorative-section-wave-variant-2-mask-svg-mirror: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="64" preserveAspectRatio="none" transform="scale(-1, 1)"><path d="#{$wave-path-2}" /></svg>');
     --rpf-decorative-section-wave-variant-3-mask-svg-mirror: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="1600" height="64" preserveAspectRatio="none" transform="scale(-1, 1)"><path d="#{$wave-path-3}" /></svg>');
-    --rpf-decorative-section-wave-centre-variant-content-mask: linear-gradient(90deg, rgba(255,255,255,1) 0%, rgba(255,255,255,1) 100%);
+    --rpf-decorative-section-wave-centre-variant-content-mask: linear-gradient(
+      90deg,
+      rgba(255, 255, 255, 1) 0%,
+      rgba(255, 255, 255, 1) 100%
+    );
     --rpf-decorative-section-wave-height: clamp(16px, 3.5cqw, 56px);
     --rpf-decorative-section-wave-mask-height: clamp(18px, 4cqw, 64px);
     --rpf-decorative-section-wave-variant-svg-mask: '';
     --rpf-decorative-section-slice-height: clamp(var(--space-2), 3cqw, var(--space-6));
+  }
+  .rpf-decorative-section {
     &__block-start-wave {
       padding-block-start: var(--rpf-decorative-section-wave-height);
       margin-block-start: calc(var(--rpf-decorative-section-wave-height) * -1);
-      -webkit-mask-image:
-        var(--rpf-decorative-section-wave-variant-svg-mask),
+      -webkit-mask-image: var(--rpf-decorative-section-wave-variant-svg-mask),
         var(--rpf-decorative-section-wave-centre-variant-content-mask);
-      mask-image:
-        var(--rpf-decorative-section-wave-variant-svg-mask),
+      mask-image: var(--rpf-decorative-section-wave-variant-svg-mask),
         var(--rpf-decorative-section-wave-centre-variant-content-mask);
-      -webkit-mask-position: 0 0, 0 calc(var(--rpf-decorative-section-wave-mask-height) - 1px);
-      mask-position: 0 0, 0 calc(var(--rpf-decorative-section-wave-mask-height) - 1px);
-      -webkit-mask-size: 100% var(--rpf-decorative-section-wave-mask-height), 100% 100%;
-      mask-size: 100% var(--rpf-decorative-section-wave-mask-height), 100% 100%;
+      -webkit-mask-position:
+        0 0,
+        0 calc(var(--rpf-decorative-section-wave-mask-height) - 1px);
+      mask-position:
+        0 0,
+        0 calc(var(--rpf-decorative-section-wave-mask-height) - 1px);
+      -webkit-mask-size:
+        100% var(--rpf-decorative-section-wave-mask-height),
+        100% 100%;
+      mask-size:
+        100% var(--rpf-decorative-section-wave-mask-height),
+        100% 100%;
       -webkit-mask-repeat: no-repeat;
       mask-repeat: no-repeat;
@@ -74,16 +87,22 @@ $wave-path-3: 'm1600 56-66.67-10.419c-66.66-10.419-200-31.258-333.33-40.189-133.
       + .rpf-decorative-section {
         padding-block-start: var(--rpf-decorative-section-wave-height);
-        -webkit-mask-image:
-          var(--rpf-decorative-section-wave-variant-svg-mask),
+        -webkit-mask-image: var(--rpf-decorative-section-wave-variant-svg-mask),
           var(--rpf-decorative-section-wave-centre-variant-content-mask);
-        mask-image:
-          var(--rpf-decorative-section-wave-variant-svg-mask),
+        mask-image: var(--rpf-decorative-section-wave-variant-svg-mask),
           var(--rpf-decorative-section-wave-centre-variant-content-mask);
-        -webkit-mask-position: 0 0, 0 calc(var(--rpf-decorative-section-wave-mask-height) - 1px);
-        mask-position: 0 0, 0 calc(var(--rpf-decorative-section-wave-mask-height) - 1px);
-        -webkit-mask-size: 100% var(--rpf-decorative-section-wave-mask-height), 100% 100%;
-        mask-size: 100% var(--rpf-decorative-section-wave-mask-height), 100% 100%;
+        -webkit-mask-position:
+          0 0,
+          0 calc(var(--rpf-decorative-section-wave-mask-height) - 1px);
+        mask-position:
+          0 0,
+          0 calc(var(--rpf-decorative-section-wave-mask-height) - 1px);
+        -webkit-mask-size:
+          100% var(--rpf-decorative-section-wave-mask-height),
+          100% 100%;
+        mask-size:
+          100% var(--rpf-decorative-section-wave-mask-height),
+          100% 100%;
         -webkit-mask-repeat: no-repeat;
         mask-repeat: no-repeat;
@@ -105,7 +124,9 @@ $wave-path-3: 'm1600 56-66.67-10.419c-66.66-10.419-200-31.258-333.33-40.189-133.
         &--mirrored {
           + .rpf-decorative-section {
-            --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-1-mask-svg-mirror);
+            --rpf-decorative-section-wave-variant-svg-mask: var(
+              --rpf-decorative-section-wave-variant-1-mask-svg-mirror
+            );
           }
         }
       }
@@ -117,7 +138,9 @@ $wave-path-3: 'm1600 56-66.67-10.419c-66.66-10.419-200-31.258-333.33-40.189-133.
         &-mirrored {
           + .rpf-decorative-section {
-            --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-2-mask-svg-mirror);
+            --rpf-decorative-section-wave-variant-svg-mask: var(
+              --rpf-decorative-section-wave-variant-2-mask-svg-mirror
+            );
           }
         }
       }
@@ -129,7 +152,9 @@ $wave-path-3: 'm1600 56-66.67-10.419c-66.66-10.419-200-31.258-333.33-40.189-133.
         &-mirrored {
           + .rpf-decorative-section {
-            --rpf-decorative-section-wave-variant-svg-mask: var(--rpf-decorative-section-wave-variant-3-mask-svg-mirror);
+            --rpf-decorative-section-wave-variant-svg-mask: var(
+              --rpf-decorative-section-wave-variant-3-mask-svg-mirror
+            );
           }
         }
       }
@@ -138,12 +163,12 @@ $wave-path-3: 'm1600 56-66.67-10.419c-66.66-10.419-200-31.258-333.33-40.189-133.
     &__block-start-slice {
       padding-block-start: var(--rpf-decorative-section-slice-height);
-      clip-path: polygon(0 var(--rpf-decorative-section-slice-height),100% 0,100% 100%,0 100%);
+      clip-path: polygon(0 var(--rpf-decorative-section-slice-height), 100% 0, 100% 100%, 0 100%);
       margin-block-start: calc(var(--rpf-decorative-section-slice-height) * -1);
       padding-block-start: var(--rpf-decorative-section-slice-height);
       &--mirrored {
-        clip-path: polygon(0 0,100% var(--rpf-decorative-section-slice-height),100% 100%,0 100%);
+        clip-path: polygon(0 0, 100% var(--rpf-decorative-section-slice-height), 100% 100%, 0 100%);
       }
     }
@@ -159,13 +184,13 @@ $wave-path-3: 'm1600 56-66.67-10.419c-66.66-10.419-200-31.258-333.33-40.189-133.
       padding-block-end: var(--rpf-decorative-section-slice-height);
       + .rpf-decorative-section {
-        clip-path: polygon(0 var(--rpf-decorative-section-slice-height),100% 0,100% 100%,0 100%);
+        clip-path: polygon(0 var(--rpf-decorative-section-slice-height), 100% 0, 100% 100%, 0 100%);
         margin-block-start: calc(var(--rpf-decorative-section-slice-height) * -1);
         padding-block-start: var(--rpf-decorative-section-slice-height);
       }
       &--mirrored + .rpf-decorative-section {
-        clip-path: polygon(0 0,100% var(--rpf-decorative-section-slice-height),100% 100%,0 100%);
+        clip-path: polygon(0 0, 100% var(--rpf-decorative-section-slice-height), 100% 100%, 0 100%);
       }
     }

package/dist/scss/components/switch.scss CHANGED Viewed

@@ -9,25 +9,26 @@
 @forward '../properties/spacing';
 @forward '../properties/sizing';
-.rpf-switch {
+$switch-handle-size: var(--rpf-switch-handle-size, calc(var(--rpf-switch-height) * 0.75));
+:root,
+:host {
   // Sizing properties
   --rpf-switch-width: 52px;
   --rpf-switch-height: 32px;
-  --rpf-switch-handle-size: calc(var(--rpf-switch-height) * 0.75); // 24px
   --rpf-switch-border-width: 2px;
-  --rpf-switch-border-radius: calc(var(--rpf-switch-height) / 2);
   --rpf-switch-handle-border-radius: 50%;
   // Color properties
   --rpf-switch-off-color: var(--rpf-grey-500);
   --rpf-switch-on-color: var(--rpf-navy-800);
   --rpf-switch-icon-off-color: var(--rpf-white);
-  --rpf-switch-icon-on-color: var(--rpf-switch-on-color);
   --rpf-switch-track-off-color: var(--rpf-grey-50);
-  --rpf-switch-track-on-color: var(--rpf-switch-on-color);
   --rpf-switch-handle-off-color: var(--rpf-switch-off-color);
   --rpf-switch-handle-on-color: var(--rpf-white);
+}
+.rpf-switch {
   // Base layout
   box-sizing: border-box;
   display: inline-flex;
@@ -62,7 +63,7 @@
     block-size: var(--rpf-switch-height);
     padding-block: 0.375rem;
     padding-inline: 0.5rem;
-    border-radius: var(--rpf-switch-border-radius);
+    border-radius: var(--rpf-switch-border-radius, calc(var(--rpf-switch-height) / 2));
     border: var(--rpf-switch-border-width) solid var(--rpf-switch-off-color);
     background: var(--rpf-switch-track-color);
     transition:
@@ -72,7 +73,7 @@
   // Handle styles
   .rpf-switch__handle {
-    block-size: calc(var(--rpf-switch-handle-size) / 1.5);
+    block-size: calc(#{$switch-handle-size} / 1.5);
     aspect-ratio: 1/1;
     margin-inline-start: 0;
     background-color: var(--rpf-switch-off-color);
@@ -93,7 +94,7 @@
   }
   .rpf-switch__handle {
-    block-size: var(--rpf-switch-handle-size);
+    block-size: #{$switch-handle-size};
     display: grid;
     place-items: center;
   }
@@ -158,14 +159,14 @@
 // Checked states (specificity: 0,2,1)
 .rpf-switch:has(.rpf-switch__checkbox:checked) {
   .rpf-switch__track {
-    background-color: var(--rpf-switch-track-on-color);
-    border: 2px solid var(--rpf-switch-track-on-color);
+    background-color: var(--rpf-switch-track-on-color, var(--rpf-switch-on-color));
+    border: 2px solid var(--rpf-switch-track-on-color, var(--rpf-switch-on-color));
     padding-inline: 0.125rem;
   }
   .rpf-switch__handle {
-    block-size: var(--rpf-switch-handle-size);
-    margin-inline-start: calc(100% - var(--rpf-switch-handle-size) - calc(var(--rpf-switch-border-width) * 0.5));
+    block-size: #{$switch-handle-size};
+    margin-inline-start: calc(100% - #{$switch-handle-size} - calc(var(--rpf-switch-border-width) * 0.5));
     background-color: var(--rpf-switch-handle-on-color);
   }
@@ -174,7 +175,7 @@
   }
   .rpf-switch__icon {
-    background-color: var(--rpf-switch-icon-on-color);
+    background-color: var(--rpf-switch-icon-on-color, var(--rpf-switch-on-color));
     inline-size: 1rem;
     block-size: 1rem;
     display: inline-block;
@@ -186,4 +187,4 @@
 // Checked disabled hover state (specificity: 0,3,1)
 .rpf-switch:has(.rpf-switch__checkbox:disabled):hover .rpf-switch__handle {
   box-shadow: none;
-}
+}

package/dist/scss/components/tag.scss CHANGED Viewed

@@ -11,12 +11,15 @@
   color: var(--rpf-alert-#{$variant});
 }
+// TODO(#304): these tokens need moving to `:root, :host` so they can be themed from outside a
+// shadow root, and renaming to `--rpf-tag-*`. Left as-is for now because moving the unprefixed
+// names as they stand would declare a bare `--tag-color` globally.
 .rpf-tag {
   --tag-color: var(--rpf-text-primary);
   --tag-color-secondary: color-mix(in srgb, var(--tag-color), white 95%);
   --tag-text-color: var(--rpf-white);
   --tag-text-color-secondary: var(--tag-color);
   align-items: center;
   border: solid 1px var(--tag-color);
   background-color: var(--tag-color);
@@ -28,19 +31,19 @@
   line-height: 1.5rem;
   padding: var(--space-0-5) var(--space-1);
   inline-size: max-content;
   $variants: information, success, warning, error;
   @each $variant in $variants {
     &--#{$variant} {
       @include rpf-tag-variant($variant);
     }
   }
   &--secondary {
     background-color: var(--tag-color-secondary);
     color: var(--tag-text-color-secondary);
     @each $variant in $variants {
       &.rpf-tag--#{$variant} {
         @include rpf-tag-secondary-variant($variant);

package/dist/scss/properties/colors/_inputs.scss CHANGED Viewed

@@ -3,10 +3,12 @@
 @forward 'decorative';
 @forward 'text';
-:root, :host {
+:root,
+:host {
   --rpf-input-background-color: var(--rpf-white);
   --rpf-input-background-color-disabled: var(--rpf-grey-50);
   --rpf-input-background-color-readonly: var(--rpf-grey-50);
+  --rpf-input-border-colour: var(--rpf-grey-850);
   --rpf-input-color-error: var(--rpf-alert-error);
   --rpf-input-color: var(--rpf-text-primary);
   --rpf-input-outline-color: var(--rpf-blue-800);

package/dist/types/src/stories/Button.stories.d.ts CHANGED Viewed

@@ -35,31 +35,39 @@ export namespace IconOnly {
     }
     export { args_5 as args };
 }
+export namespace IconOnlySvg {
+    let args_6: {
+        icon: import("react/jsx-runtime").JSX.Element;
+        iconOnly: boolean;
+        "aria-label": string;
+    };
+    export { args_6 as args };
+}
 export namespace LinkButton {
-    export namespace args_6 {
+    export namespace args_7 {
         export let href: string;
         export { Link as linkComponent };
     }
-    export { args_6 as args };
+    export { args_7 as args };
     export let decorators: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
 }
 export namespace ExternalLink {
-    export namespace args_7 {
+    export namespace args_8 {
         let href_1: string;
         export { href_1 as href };
         let icon_2: string;
         export { icon_2 as icon };
         export let iconPosition: string;
     }
-    export { args_7 as args };
+    export { args_8 as args };
     let decorators_1: ((Story: any) => import("react/jsx-runtime").JSX.Element)[];
     export { decorators_1 as decorators };
 }
 export namespace Danger {
-    export namespace args_8 {
+    export namespace args_9 {
         let variant: string;
     }
-    export { args_8 as args };
+    export { args_9 as args };
 }
 declare namespace options {
     export let title: string;
@@ -109,7 +117,7 @@ declare namespace options {
         }
         export { iconPosition_1 as iconPosition };
     }
-    let args_9: {
+    let args_10: {
         text: string;
         type: string;
         variant: string;
@@ -126,7 +134,7 @@ declare namespace options {
         "aria-label": string;
         linkComponent: null;
     };
-    export { args_9 as args };
+    export { args_10 as args };
 }
 import { Link } from "react-router-dom";
 //# sourceMappingURL=Button.stories.d.ts.map

package/dist/types/src/stories/Button.stories.d.ts.map CHANGED Viewed

	@@ -1 +1 @@
1	- {"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/Button.stories.jsx"],"names":[],"mappings":"~~;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBACkC~~,kBAAkB"}
1	+ {"version":3,"file":"Button.stories.d.ts","sourceRoot":"","sources":["../../../../src/stories/Button.stories.jsx"],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;qBACoC,kBAAkB"}

package/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "@raspberrypifoundation/design-system-react",
-  "version": "2.10.1",
+  "version": "2.10.3",
   "type": "module",
   "main": "./dist/design-system-react.umd.cjs",
   "module": "./dist/design-system-react.js",
@@ -43,7 +43,7 @@
     "ts:watch": "tsc --noEmit --watch"
   },
   "dependencies": {
-    "@raspberrypifoundation/design-system-core": "^2.4.7",
+    "@raspberrypifoundation/design-system-core": "^2.4.9",
     "classnames": "^2.5.1",
     "lucide-react": "^0.553.0"
   },