diff --git a/src/liquid/components/ld-button/ld-button.css b/src/liquid/components/ld-button/ld-button.css index 9e77fb11ca..75eeee322d 100644 --- a/src/liquid/components/ld-button/ld-button.css +++ b/src/liquid/components/ld-button/ld-button.css @@ -207,11 +207,11 @@ -webkit-touch-callout: none; &:where(:disabled), - &:where([aria-disabled='true']) { + &:where([aria-disabled]:not([aria-disabled='false'])) { opacity: 0.2; } - &:where(:not(:disabled, [aria-disabled='true'])) { + &:where(:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) { cursor: pointer; &:where(:focus:focus-visible) { @@ -352,7 +352,7 @@ --ld-button-text-color-hover: var(--ld-button-ghost-text-color-hover); --ld-button-progress-color: var(--ld-button-ghost-progress-color); - &:where(:not(:disabled, [aria-disabled='true'])) { + &:where(:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) { &:where(:focus:focus-visible) .ld-button__progress::after { background-color: var(--ld-button-ghost-progress-color-focus); } @@ -412,7 +412,7 @@ background-color: var(--ld-button-brand-bg-color); color: var(--ld-button-brand-text-color); - &:where(&:not(:disabled, [aria-disabled='true'])) { + &:where(&:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) { &:where(:focus:focus-visible) { color: var(--ld-button-brand-text-color-focus); } @@ -473,7 +473,7 @@ --ld-button-text-color-hover: var(--ld-button-highlight-text-color); --ld-button-progress-color: var(--ld-button-highlight-progress-color); - &:where(:not(:disabled, [aria-disabled='true'])) { + &:where(:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) { &:where(:active), &:where(:active:focus-visible) { .ld-button__progress::after { @@ -494,7 +494,7 @@ --ld-button-text-color-focus: var(--ld-button-danger-text-color-focus); --ld-button-progress-color: var(--ld-button-danger-progress-color); - &:where(:not(:disabled, [aria-disabled='true'])) { + &:where(:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) { &:where(:focus:focus-visible) { .ld-button__progress::after { background-color: var(--ld-button-danger-progress-color-focus); @@ -559,7 +559,7 @@ --ld-button-text-color-focus: var(--ld-button-neutral-text-color-focus); --ld-button-progress-color: var(--ld-button-neutral-progress-color); - &:where(:not(:disabled, [aria-disabled='true'])) { + &:where(:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) { &:where(:focus:focus-visible) { .ld-button__progress::after { background-color: var(--ld-button-neutral-progress-color-focus); diff --git a/src/liquid/components/ld-checkbox/ld-checkbox.css b/src/liquid/components/ld-checkbox/ld-checkbox.css index ebc16536ad..eaa2a119de 100644 --- a/src/liquid/components/ld-checkbox/ld-checkbox.css +++ b/src/liquid/components/ld-checkbox/ld-checkbox.css @@ -71,7 +71,7 @@ } &:where(:disabled), - &:where([aria-disabled='true']) { + &:where([aria-disabled]:not([aria-disabled='false'])) { ~ .ld-checkbox__check { color: var(--ld-checkbox-disabled-col); } @@ -88,7 +88,7 @@ } } - &:where(:not(:disabled, [aria-disabled='true'])) { + &:where(:not(:disabled, [aria-disabled]:not([aria-disabled='false']))) { cursor: pointer; ~ .ld-checkbox__check { @@ -144,7 +144,9 @@ } } - :where(input:not(:disabled, input[aria-disabled='true'])) { + :where( + input:not(:disabled, input[aria-disabled]:not([aria-disabled='false'])) + ) { ~ .ld-checkbox__box { background-color: var(--ld-checkbox-bg-col); } @@ -173,7 +175,11 @@ .ld-checkbox.ld-checkbox--dark, :host(.ld-checkbox.ld-checkbox--dark) { :where(input) { - &:not(:disabled, input[aria-disabled='true'], :checked) { + &:not( + :disabled, + input[aria-disabled]:not([aria-disabled='false']), + :checked + ) { ~ .ld-checkbox__box { background-color: var(--ld-checkbox-dark-bg-col); } diff --git a/src/liquid/components/ld-input/ld-input.css b/src/liquid/components/ld-input/ld-input.css index 3ef344ab69..37b6ad76c5 100644 --- a/src/liquid/components/ld-input/ld-input.css +++ b/src/liquid/components/ld-input/ld-input.css @@ -371,13 +371,13 @@ :host( :not( .ld-input--invalid, - [aria-disabled='true'], + [aria-disabled]:not([aria-disabled='false']), .ld-input--disabled ):hover:not(:focus-within) ), .ld-input:not( .ld-input--invalid, - [aria-disabled='true'], + [aria-disabled]:not([aria-disabled='false']), .ld-input--disabled ):hover:not(:focus-within) { &::before { @@ -404,20 +404,30 @@ } :host( - .ld-input--invalid:not(.ld-input--disabled, [aria-disabled='true']):where( - :not(:focus) - ) + .ld-input--invalid:not( + .ld-input--disabled, + [aria-disabled]:not([aria-disabled='false']) + ):where(:not(:focus)) ), -.ld-input--invalid:not(.ld-input--disabled, [aria-disabled='true']):where( - :not(:focus) - ) { +.ld-input--invalid:not( + .ld-input--disabled, + [aria-disabled]:not([aria-disabled='false']) + ):where(:not(:focus)) { background-color: var(--ld-input-bg-col-invalid); color: var(--ld-input-text-col-invalid); -webkit-text-fill-color: var(--ld-input-text-col-invalid); } -:host(.ld-input--invalid:not(.ld-input--disabled, [aria-disabled='true'])), -.ld-input--invalid:not(.ld-input--disabled, [aria-disabled='true']) { +:host( + .ld-input--invalid:not( + .ld-input--disabled, + [aria-disabled]:not([aria-disabled='false']) + ) + ), +.ld-input--invalid:not( + .ld-input--disabled, + [aria-disabled]:not([aria-disabled='false']) + ) { &::before { box-shadow: inset 0 0 0 var(--ld-sp-2) var(--ld-input-text-col-invalid); } @@ -448,12 +458,12 @@ :host( .ld-input--invalid:not( .ld-input--disabled, - [aria-disabled='true'] + [aria-disabled]:not([aria-disabled='false']) ):focus-within ), .ld-input--invalid:not( .ld-input--disabled, - [aria-disabled='true'] + [aria-disabled]:not([aria-disabled='false']) ):focus-within { background-color: var(--ld-input-bg-col-invalid-focus); @@ -465,9 +475,9 @@ } :host(.ld-input--disabled), -:host([aria-disabled='true']), +:host([aria-disabled]:not([aria-disabled='false'])), .ld-input.ld-input--disabled, -.ld-input[aria-disabled='true'] { +.ld-input[aria-disabled]:not([aria-disabled='false']) { color: var(--ld-input-text-col-disabled); background-color: var(--ld-input-bg-col-disabled); diff --git a/src/liquid/components/ld-input/ld-input.tsx b/src/liquid/components/ld-input/ld-input.tsx index cacb595d8e..d5eb9c52d2 100644 --- a/src/liquid/components/ld-input/ld-input.tsx +++ b/src/liquid/components/ld-input/ld-input.tsx @@ -378,6 +378,13 @@ export class LdInput implements InnerFocusable, ClonesAttributes {