@seamly/web-ui 20.1.0-alpha.1 → 20.1.0

package/src/javascripts/ui/components/layout/interrupt.js

@@ -1,12 +1,12 @@
 import { useEffect } from 'preact/hooks'
-import { className } from '../../../lib/css'
+import { className } from 'lib/css'
 import {
   useSeamlyCommands,
   useLiveRegion,
   useGeneratedId,
   useSkiplinkTargetFocusing,
-} from '../../hooks/seamly-hooks'
-import SeamlySessionExpiredError from '../../../api/errors/seamly-session-expired-error'
+} from 'ui/hooks/seamly-hooks'
+import SeamlySessionExpiredError from 'api/errors/seamly-session-expired-error'
 
 const Interrupt = ({
   originalError,

package/src/javascripts/ui/components/layout/privacy-disclaimer.js

@@ -1,6 +1,6 @@
-import { className } from '../../../lib/css'
-import { useI18n } from '../../../domains/i18n'
-import { useConfig } from '../../../domains/config'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import { useConfig } from 'domains/config'
 
 const PrivacyDisclaimer = () => {
   const { t } = useI18n()

package/src/javascripts/ui/components/options/options-button.js

@@ -1,14 +1,14 @@
 import { createRef } from 'preact'
 import { useState, useRef, useEffect, useMemo } from 'preact/hooks'
-import { className } from '../../../lib/css'
-import { useSeamlyOptions, useOptionButton } from '../../hooks/seamly-hooks'
-import { useI18n } from '../../../domains/i18n'
-import Icon from '../layout/icon'
-import Options from './options'
+import { className } from 'lib/css'
+import { useSeamlyOptions, useOptionButton } from 'ui/hooks/seamly-hooks'
+import { useI18n } from 'domains/i18n'
+import Icon from 'ui/components/layout/icon'
 import InOutTransition, {
   transitionStartStates,
-} from '../widgets/in-out-transition'
-import { getKey, keyNames, focusElement } from '../../utils/general-utils'
+} from 'ui/components/widgets/in-out-transition'
+import { getKey, keyNames, focusElement } from 'ui/utils/general-utils'
+import Options from './options'
 
 const OptionsButton = () => {
   const { t } = useI18n()
@@ -193,11 +193,7 @@ const OptionsButton = () => {
                   ref={(item) => {
                     menuItemButtons.current[i] = item
                   }}
-                  className={className([
-                    'button',
-                    'button--secondary',
-                    ...(available ? [] : ['button--disabled']),
-                  ])}
+                  className={className(['button', 'button--secondary'])}
                   onKeyDown={(e) => onMenuItemKeyDownHandler(e, i)}
                   onKeyPress={(e) => onKeyPressHandler(e, i)}
                   onClick={() => onMenuItemClickHandler(name, available)}
@@ -227,7 +223,6 @@ const OptionsButton = () => {
           ...(!multiMenu && firstOptionName
             ? [`chat__options__button--${firstOptionName}`]
             : []),
-          ...(!multiMenu && !firstOption.available ? ['button--disabled'] : []),
         ])}
         id={id}
         onClick={onClickHandler}

package/src/javascripts/ui/components/options/options-frame.js

@@ -1,12 +1,12 @@
 import { useRef, useEffect } from 'preact/hooks'
-import Icon from '../layout/icon'
+import Icon from 'ui/components/layout/icon'
 import {
   useGeneratedId,
   useOptionButton,
   useSeamlyOptions,
-} from '../../hooks/seamly-hooks'
-import { className } from '../../../lib/css'
-import { focusElement } from '../../utils/general-utils'
+} from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
+import { focusElement } from 'ui/utils/general-utils'
 
 const OptionsFrame = ({
   className: givenClassName,

package/src/javascripts/ui/components/options/options.js

@@ -1,6 +1,6 @@
 import { useRef } from 'preact/hooks'
+import { useSeamlyOptions } from 'ui/hooks/seamly-hooks'
 import Transcript from './transcript'
-import { useSeamlyOptions } from '../../hooks/seamly-hooks'
 
 const mapper = {
   sendTranscript: Transcript,

package/src/javascripts/ui/components/options/transcript/index.js

@@ -1,18 +1,18 @@
 import { useCallback, useMemo, useState } from 'preact/hooks'
-import { useI18n } from '../../../../domains/i18n'
-import OptionsFrame from '../options-frame'
-import { className } from '../../../../lib/css'
+import { useI18n } from 'domains/i18n'
+import OptionsFrame from 'ui/components/options/options-frame'
+import { className } from 'lib/css'
 import {
   useGeneratedId,
   useOptionButton,
   useSeamlyCommands,
   useSeamlyOptions,
-} from '../../../hooks/seamly-hooks'
-import { actionTypes } from '../../../utils/seamly-utils'
-import { FormProvider } from '../../../../domains/forms'
+} from 'ui/hooks/seamly-hooks'
+import { actionTypes } from 'ui/utils/seamly-utils'
+import { FormProvider } from 'domains/forms'
+import { getValidator } from 'ui/utils/form-utils'
+import { isEmailString, isNotEmptyString } from 'ui/utils/validations'
 import TranscriptForm from './transcript-form'
-import { getValidator } from '../../../utils/form-utils'
-import { isEmailString, isNotEmptyString } from '../../../utils/validations'
 
 const formId = 'sendTranscript'
 const controlName = 'email'

package/src/javascripts/ui/components/options/transcript/transcript-form.js

@@ -1,7 +1,7 @@
-import { className } from '../../../../lib/css'
-import { useI18n } from '../../../../domains/i18n'
-import Form from '../../form-controls/form'
-import Input from '../../form-controls/input'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import Form from 'ui/components/form-controls/form'
+import Input from 'ui/components/form-controls/input'
 
 export default function TranscriptForm({ controlName, describedById }) {
   const { t } = useI18n()

package/src/javascripts/ui/components/warnings/idle-detach-warning.js

@@ -1,9 +1,9 @@
-import { className } from '../../../lib/css'
-import { useI18n } from '../../../domains/i18n'
-import useSeamlyIdleDetachCountdown from '../../hooks/use-seamly-idle-detach-countdown'
-import { useSkiplinkTargetFocusing } from '../../hooks/focus-helper-hooks'
-import useSeamlyActivityEventHandler from '../../hooks/use-seamly-activity-event-handler'
-import useSeamlyCommands from '../../hooks/use-seamly-commands'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import useSeamlyIdleDetachCountdown from 'ui/hooks/use-seamly-idle-detach-countdown'
+import { useSkiplinkTargetFocusing } from 'ui/hooks/focus-helper-hooks'
+import useSeamlyActivityEventHandler from 'ui/hooks/use-seamly-activity-event-handler'
+import useSeamlyCommands from 'ui/hooks/use-seamly-commands'
 import Prompt from './prompt'
 
 const IdleDetachWarning = () => {

package/src/javascripts/ui/components/warnings/prompt.js

@@ -1,5 +1,5 @@
-import { className } from '../../../lib/css'
-import { useSkiplink, useGeneratedId } from '../../hooks/seamly-hooks'
+import { className } from 'lib/css'
+import { useSkiplink, useGeneratedId } from 'ui/hooks/seamly-hooks'
 
 const Prompt = ({ baseClassName, children, title }) => {
   const skiplinkTargetId = useSkiplink()

package/src/javascripts/ui/components/warnings/resume-conversation-prompt.js

@@ -1,9 +1,9 @@
-import { className } from '../../../lib/css'
-import { useI18n } from '../../../domains/i18n'
+import { className } from 'lib/css'
+import { useI18n } from 'domains/i18n'
+import useSeamlyResumeConversationPrompt from 'ui/hooks/use-seamly-resume-conversation-prompt'
+import useSeamlyActivityEventHandler from 'ui/hooks/use-seamly-activity-event-handler'
+import { useSeamlyCurrentAgent } from 'ui/hooks/seamly-state-hooks'
 import Prompt from './prompt'
-import useSeamlyResumeConversationPrompt from '../../hooks/use-seamly-resume-conversation-prompt'
-import useSeamlyActivityEventHandler from '../../hooks/use-seamly-activity-event-handler'
-import { useSeamlyCurrentAgent } from '../../hooks/seamly-state-hooks'
 
 const ResumeConversationPrompt = () => {
   const { t } = useI18n()

package/src/javascripts/ui/components/widgets/in-out-transition.js

@@ -1,8 +1,8 @@
 import { toChildArray, cloneElement } from 'preact'
 import { useRef, useState, useEffect } from 'preact/hooks'
-import { useStableCallback } from '../../hooks/seamly-hooks'
-import { className } from '../../../lib/css'
-import { defaultTransitionTimeMs } from '../../../config'
+import { useStableCallback } from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
+import { defaultTransitionTimeMs } from 'config'
 
 const transitionClasses = {
   visible: className('transition--visible'),

package/src/javascripts/ui/components/widgets/lightbox.js

@@ -1,13 +1,13 @@
 import { useRef } from 'preact/hooks'
-import Modal from './modal'
-import { useI18n } from '../../../domains/i18n'
+import { useI18n } from 'domains/i18n'
 import {
   useSeamlyActivityEventHandler,
   useSeamlyAppContainerClassNames,
-} from '../../hooks/seamly-hooks'
-import { className } from '../../../lib/css'
-import Icon from '../layout/icon'
-import { useConfig } from '../../../domains/config'
+} from 'ui/hooks/seamly-hooks'
+import { className } from 'lib/css'
+import Icon from 'ui/components/layout/icon'
+import { useConfig } from 'domains/config'
+import Modal from './modal'
 
 const Lightbox = ({ url, description, onClose: onCloseHandler }) => {
   const { zIndex, layoutMode, namespace } = useConfig()

package/src/javascripts/ui/components/widgets/modal.js

@@ -1,8 +1,8 @@
 import { render, toChildArray } from 'preact'
 import { createFocusTrap } from 'focus-trap'
 import { useLayoutEffect, useEffect, useRef, useState } from 'preact/hooks'
-import { createAriaHider } from '../../utils/general-utils'
-import { useGeneratedId } from '../../hooks/seamly-hooks'
+import { createAriaHider } from 'ui/utils/general-utils'
+import { useGeneratedId } from 'ui/hooks/seamly-hooks'
 
 const Modal = ({
   children,

package/src/javascripts/ui/components/widgets/upload-progress.js

@@ -1,7 +1,7 @@
-import { className } from '../../../lib/css'
-import { useFileUploads } from '../../hooks/seamly-hooks'
-import { useI18n } from '../../../domains/i18n'
-import Error from '../form-controls/error'
+import { className } from 'lib/css'
+import { useFileUploads } from 'ui/hooks/seamly-hooks'
+import { useI18n } from 'domains/i18n'
+import Error from 'ui/components/form-controls/error'
 
 const UploadProgress = () => {
   const { t } = useI18n()

package/src/javascripts/ui/hooks/component-helper-hooks.js

@@ -1,4 +1,4 @@
-import { useConfig } from '../../domains/config'
+import { useConfig } from 'domains/config'
 
 export const useSeamlyAppContainerClassNames = () => {
   return useConfig().appContainerClassNames

package/src/javascripts/ui/hooks/file-upload-hooks.js

@@ -1,9 +1,8 @@
 import { useCallback, useContext } from 'preact/hooks'
+import SeamlyFileUploadContext from 'ui/components/core/seamly-file-upload-context'
+import { seamlyActions } from 'ui/utils/seamly-utils'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
-import SeamlyFileUploadContext from '../components/core/seamly-file-upload-context'
-
-import { seamlyActions } from '../utils/seamly-utils'
 
 const { CLEAR_ALL_UPLOADS } = seamlyActions
 

package/src/javascripts/ui/hooks/focus-helper-hooks.js

@@ -1,11 +1,11 @@
 import { useCallback, useRef } from 'preact/hooks'
-import { useSeamlyStateContext, useSkiplink } from './seamly-state-hooks'
 import {
   focusElement,
   runIfElementContainsOrHasFocus,
-} from '../utils/general-utils'
+} from 'ui/utils/general-utils'
+import { seamlyActions } from 'ui/utils/seamly-utils'
+import { useSeamlyStateContext, useSkiplink } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
-import { seamlyActions } from '../utils/seamly-utils'
 
 const { SET_SEAMLY_CONTAINER_ELEMENT } = seamlyActions
 

package/src/javascripts/ui/hooks/live-region-hooks.js

@@ -1,6 +1,6 @@
 import { useCallback, useContext } from 'preact/hooks'
-import { SeamlyLiveRegionContext } from '../components/core/seamly-live-region-context'
-import { ariaLiveLevels } from '../utils/seamly-utils'
+import { SeamlyLiveRegionContext } from 'ui/components/core/seamly-live-region-context'
+import { ariaLiveLevels } from 'ui/utils/seamly-utils'
 
 export const useSeamlyLiveRegionContext = () =>
   useContext(SeamlyLiveRegionContext)

package/src/javascripts/ui/hooks/seamly-api-hooks.js

@@ -1,5 +1,5 @@
 import { useContext } from 'preact/hooks'
-import { SeamlyApiContext } from '../components/core/seamly-api-context'
+import { SeamlyApiContext } from 'ui/components/core/seamly-api-context'
 
 export const useSeamlyApiContext = () => useContext(SeamlyApiContext)
 

package/src/javascripts/ui/hooks/seamly-entry-hooks.js

@@ -1,10 +1,10 @@
 import { useRef, useCallback, useEffect } from 'preact/hooks'
-import { seamlyActions, actionTypes } from '../utils/seamly-utils'
+import { seamlyActions, actionTypes } from 'ui/utils/seamly-utils'
+import { typingTimeout } from 'config'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyOptions } from './seamly-option-hooks'
 import useSeamlyCommands from './use-seamly-commands'
-import { typingTimeout } from '../../config'
 
 const {
   SET_BLOCK_AUTO_ENTRY_SWITCH,

package/src/javascripts/ui/hooks/seamly-option-hooks.js

@@ -1,10 +1,10 @@
 import { useCallback } from 'preact/hooks'
-import { useI18n } from '../../domains/i18n'
+import { useI18n } from 'domains/i18n'
+import { seamlyActions } from 'ui/utils/seamly-utils'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyObjectStore } from './seamly-api-hooks'
 import { useElementFocusingById } from './focus-helper-hooks'
-import { seamlyActions } from '../utils/seamly-utils'
 
 const {
   SET_USER_SELECTED_OPTION,

package/src/javascripts/ui/hooks/seamly-state-hooks.js

@@ -1,9 +1,9 @@
 import { createSelector } from 'reselect'
-import { useSelector } from '../../domains/redux'
-import { microsecondsToMilliseconds } from '../utils/general-utils'
-import * as ConfigSelectors from '../../domains/config/selectors'
-import * as AppSelectors from '../../domains/app/selectors'
-import { useConfig } from '../../domains/config/hooks'
+import { useSelector } from 'domains/redux'
+import { microsecondsToMilliseconds } from 'ui/utils/general-utils'
+import * as ConfigSelectors from 'domains/config/selectors'
+import * as AppSelectors from 'domains/app/selectors'
+import { useConfig } from 'domains/config/hooks'
 
 export const selectState = (state) => state.state
 export const useSeamlyStateContext = () => useSelector(selectState)

package/src/javascripts/ui/hooks/use-event-component-mapping.js

@@ -1,6 +1,6 @@
 import { useContext } from 'preact/hooks'
-import ComponentContext from '../components/conversation/component-context'
-import { payloadTypes } from '../utils/seamly-utils'
+import ComponentContext from 'ui/components/conversation/component-context'
+import { payloadTypes } from 'ui/utils/seamly-utils'
 
 const useEventComponentMapping = (event) => {
   const components = useContext(ComponentContext)

package/src/javascripts/ui/hooks/use-seamly-activity-event-handler.js

@@ -1,5 +1,5 @@
 import { useContext } from 'preact/hooks'
-import SeamlyActivityEventContext from '../components/core/seamly-activity-event-context'
+import SeamlyActivityEventContext from 'ui/components/core/seamly-activity-event-context'
 
 const useSeamlyActivityEventHandler = () =>
   useContext(SeamlyActivityEventContext)

package/src/javascripts/ui/hooks/use-seamly-chat.js

@@ -1,12 +1,12 @@
 import { useEffect, useRef } from 'preact/hooks'
-import { useI18n } from '../../domains/i18n'
+import { useI18n } from 'domains/i18n'
+import { seamlyActions } from 'ui/utils/seamly-utils'
+import { useVisibility, visibilityStates } from 'domains/visibility'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useEvents } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
 import { useSeamlyHasConversation } from './seamly-api-hooks'
 import { useLiveRegion } from './live-region-hooks'
-import { seamlyActions } from '../utils/seamly-utils'
-import { useVisibility, visibilityStates } from '../../domains/visibility'
 import { useConfig } from '../../domains/config'
 
 const { SET_IS_LOADING } = seamlyActions

package/src/javascripts/ui/hooks/use-seamly-commands.js

@@ -1,20 +1,20 @@
 import { useCallback, useContext } from 'preact/hooks'
+import { SeamlyEventBusContext } from 'ui/components/core/seamly-api-context'
+import { randomId } from 'lib/id'
+import { userParticipantId } from 'config'
+import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
+import { Actions as InterruptActions } from 'domains/interrupt'
+import { useConfig } from 'domains/config'
+import * as AppActions from 'domains/app/actions'
+import { useUserHasResponded } from 'domains/app/hooks'
+import { useVisibility } from 'domains/visibility'
+import { useStableCallback } from './utility-hooks'
+import useSeamlyDispatchContext from './use-seamly-dispatch'
+import { useSeamlyUnreadCount } from './seamly-state-hooks'
 import {
   useSeamlyApiContext,
   useSeamlyHasConversation,
 } from './seamly-api-hooks'
-import { useSeamlyUnreadCount } from './seamly-state-hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-import { SeamlyEventBusContext } from '../components/core/seamly-api-context'
-import { randomId } from '../../lib/id'
-import { userParticipantId } from '../../config'
-import { actionTypes, seamlyActions } from '../utils/seamly-utils'
-import { useStableCallback } from './utility-hooks'
-import { Actions as InterruptActions } from '../../domains/interrupt'
-import { useConfig } from '../../domains/config'
-import * as AppActions from '../../domains/app/actions'
-import { useUserHasResponded } from '../../domains/app/hooks'
-import { useVisibility } from '../../domains/visibility'
 
 const { ADD_EVENT, SET_INITIAL_STATE } = seamlyActions
 

package/src/javascripts/ui/hooks/use-seamly-dispatch.js

@@ -1,3 +1,3 @@
-import { useStoreDispatch } from '../../domains/redux'
+import { useStoreDispatch } from 'domains/redux'
 
 export default useStoreDispatch

package/src/javascripts/ui/hooks/use-seamly-idle-detach-countdown.js

@@ -1,16 +1,16 @@
 import { useCallback, useRef } from 'preact/hooks'
-import useSeamlyDispatchContext from './use-seamly-dispatch'
-import { useSeamlyStateContext } from './seamly-state-hooks'
-import useSeamlyCommands from './use-seamly-commands'
-import { useI18n } from '../../domains/i18n'
-import { useLiveRegion } from './live-region-hooks'
+import { useI18n } from 'domains/i18n'
 import {
   getTimeFromSeconds,
   millisecondsToSeconds,
-} from '../utils/general-utils'
-import { actionTypes, seamlyActions } from '../utils/seamly-utils'
-import { screenReaderDebounceDelaySeconds } from '../../config'
-import { useVisibility } from '../../domains/visibility'
+} from 'ui/utils/general-utils'
+import { actionTypes, seamlyActions } from 'ui/utils/seamly-utils'
+import { screenReaderDebounceDelaySeconds } from 'config'
+import { useVisibility } from 'domains/visibility'
+import { useLiveRegion } from './live-region-hooks'
+import useSeamlyCommands from './use-seamly-commands'
+import { useSeamlyStateContext } from './seamly-state-hooks'
+import useSeamlyDispatchContext from './use-seamly-dispatch'
 
 const {
   CLEAR_IDLE_DETACH_COUNTDOWN,

package/src/javascripts/ui/hooks/use-seamly-resume-conversation-prompt.js

@@ -1,9 +1,9 @@
+import { useI18n } from 'domains/i18n'
+import { actionTypes, dismissTypes, seamlyActions } from 'ui/utils/seamly-utils'
 import useSeamlyDispatchContext from './use-seamly-dispatch'
 import { useSeamlyStateContext } from './seamly-state-hooks'
 import useSeamlyCommands from './use-seamly-commands'
-import { useI18n } from '../../domains/i18n'
 import { useLiveRegion } from './live-region-hooks'
-import { actionTypes, dismissTypes, seamlyActions } from '../utils/seamly-utils'
 
 const { CLEAR_RESUME_CONVERSATION_PROMPT } = seamlyActions
 

package/src/javascripts/ui/hooks/use-single-file-upload.js

@@ -1,6 +1,6 @@
+import { Selectors } from 'domains/forms'
+import { useSelectorWithProps } from 'domains/redux'
 import { useFileUploads } from './seamly-hooks'
-import { useSelectorWithProps } from '../../domains/redux'
-import { Selectors } from '../../domains/forms'
 
 const useSingleFileUpload = (formId, name) => {
   const fileList = useSelectorWithProps(

package/src/javascripts/ui/hooks/utility-hooks.js

@@ -5,7 +5,7 @@ import {
   useState,
   useMemo,
 } from 'preact/hooks'
-import { randomId } from '../../lib/id'
+import { randomId } from 'lib/id'
 
 export const useForceUpdate = () => {
   // This is an escape hatch mentioned in the React docs:

package/src/stylesheets/4-base/_formelements.scss

@@ -6,7 +6,7 @@
 .#{$n}-input__checkbox {
   margin-right: $spacer * 0.5;
 
-  &:disabled {
+  &[aria-disabled='true'] {
     opacity: 0.5;
   }
 }
@@ -19,7 +19,7 @@
   font-weight: $fontweight-bold;
 }
 
-.#{$n}-input__checkbox:disabled + .#{$n}-label {
+.#{$n}-input__checkbox[aria-disabled='true'] + .#{$n}-label {
   opacity: 0.5;
 }
 
@@ -39,7 +39,7 @@
   font-size: $fontsize-default;
   resize: none;
 
-  &:disabled {
+  &[aria-disabled='true'] {
     border: $thin-border solid $grey-c;
     background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxkZWZzLz48cGF0aCBmaWxsPSIjYTNiNGJmIiBkPSJNMi45OTgsNi41MDNjMC0wLjI0NywwLjA5MS0wLjQ5NCwwLjI3My0wLjY4N2MwLjM4LTAuNDAxLDEuMDEzLTAuNDE5LDEuNDE0LTAuMDRsMi41ODUsMi40NDYJYzAuMzk0LDAuMzczLDEuMDYsMC4zNzMsMS40NTQsMGwyLjU4Ni0yLjQ0NmMwLjQtMC4zNzksMS4wMzMtMC4zNjIsMS40MTMsMC4wNGMwLjM3OSwwLjQsMC4zNjIsMS4wMzQtMC4wMzksMS40MTRsLTIuNTg2LDIuNDQ2CWMtMS4xNTksMS4wOTYtMy4wNDMsMS4wOTYtNC4yMDMsMEwzLjMxLDcuMjI5QzMuMTAyLDcuMDMzLDIuOTk4LDYuNzY4LDIuOTk4LDYuNTAzeiIvPjwvc3ZnPg==');
     color: $grey-c;

package/src/stylesheets/5-components/_buttons.scss

@@ -40,7 +40,7 @@
   font-weight: $fontweight-bold;
 }
 
-.#{$n}-button--disabled {
+.#{$n}-button[aria-disabled='true'] {
   color: $disabled;
   cursor: auto;
 }

package/src/stylesheets/5-components/_input.scss

@@ -57,7 +57,7 @@
   padding: 0;
   border-radius: $borderradius-small;
 
-  &:disabled {
+  &[aria-disabled='true'] {
     cursor: auto;
   }
 }
@@ -67,6 +67,6 @@
   fill: $interaction;
 }
 
-.#{$n}-input__submit:disabled .#{$n}-icon path {
+.#{$n}-input__submit[aria-disabled='true'] .#{$n}-icon path {
   fill: $grey-c;
 }

package/src/stylesheets/6-default-implementation/_hover.scss

@@ -22,14 +22,14 @@
       transition: color $transition, background-color $transition;
     }
 
-    .#{$n}-button--primary:not(.#{$n}-button--disabled) {
+    .#{$n}-button--primary:not([aria-disabled='true']) {
       &:hover {
         background-color: $interaction-dark;
       }
     }
 
-    .#{$n}-button--secondary:not(.#{$n}-button--disabled),
-    .#{$n}-button--tertiary:not(.#{$n}-button--disabled) {
+    .#{$n}-button--secondary:not([aria-disabled='true']),
+    .#{$n}-button--tertiary:not([aria-disabled='true']) {
       &:hover {
         color: $interaction-dark;
       }
@@ -89,7 +89,7 @@
       }
     }
 
-    .#{$n}-input__submit:not(:disabled):hover .#{$n}-icon path {
+    .#{$n}-input__submit:not([aria-disabled='true']):hover .#{$n}-icon path {
       fill: $interaction-dark;
     }
 
@@ -137,7 +137,7 @@
       }
     }
 
-    .#{$n}-options__menu__item:not(.#{$n}-button--disabled) {
+    .#{$n}-options__menu__item:not([aria-disabled='true']) {
       transition: color $transition;
 
       &:hover {

package/src/stylesheets/7-deprecated/4-base/_formelements.scss

@@ -6,7 +6,7 @@
 .#{$n}-input__checkbox {
   margin-right: $spacer * 0.5;
 
-  &:disabled {
+  &[aria-disabled='true'] {
     opacity: 0.5;
   }
 }
@@ -19,7 +19,7 @@
   font-weight: $fontweight-bold;
 }
 
-.#{$n}-input__checkbox:disabled + .#{$n}-label {
+.#{$n}-input__checkbox[aria-disabled='true'] + .#{$n}-label {
   opacity: 0.5;
 }
 
@@ -48,8 +48,8 @@
     border: $thin-border solid $brand3;
   }
 
-  &:disabled,
-  &:disabled:hover {
+  &[aria-disabled='true'],
+  &[aria-disabled='true']:hover {
     border: $thin-border solid $grey-c;
     background-image: url('data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNnB4IiBoZWlnaHQ9IjE2cHgiIHg9IjBweCIgeT0iMHB4IiB2aWV3Qm94PSIwIDAgMTYgMTYiPjxkZWZzLz48cGF0aCBmaWxsPSIjYTNiNGJmIiBkPSJNMi45OTgsNi41MDNjMC0wLjI0NywwLjA5MS0wLjQ5NCwwLjI3My0wLjY4N2MwLjM4LTAuNDAxLDEuMDEzLTAuNDE5LDEuNDE0LTAuMDRsMi41ODUsMi40NDYJYzAuMzk0LDAuMzczLDEuMDYsMC4zNzMsMS40NTQsMGwyLjU4Ni0yLjQ0NmMwLjQtMC4zNzksMS4wMzMtMC4zNjIsMS40MTMsMC4wNGMwLjM3OSwwLjQsMC4zNjIsMS4wMzQtMC4wMzksMS40MTRsLTIuNTg2LDIuNDQ2CWMtMS4xNTksMS4wOTYtMy4wNDMsMS4wOTYtNC4yMDMsMEwzLjMxLDcuMjI5QzMuMTAyLDcuMDMzLDIuOTk4LDYuNzY4LDIuOTk4LDYuNTAzeiIvPjwvc3ZnPg==');
     color: $grey-c;

package/src/stylesheets/7-deprecated/5-components/_buttons.scss

@@ -47,7 +47,7 @@ $button-transition: $transition;
   font-weight: $fontweight-bold;
 }
 
-.#{$n}-button--disabled {
+.#{$n}-button[aria-disabled='true'] {
   color: $disabled;
   cursor: auto;
 }

package/src/stylesheets/7-deprecated/5-components/_input.scss

@@ -66,7 +66,7 @@
   justify-content: center;
   padding: 0;
 
-  &:disabled {
+  &[aria-disabled='true'] {
     opacity: 0.5;
     cursor: auto;
   }