diff --git a/packages/components/src/components/details/test/html.mock.ts b/packages/components/src/components/details/test/html.mock.ts
index 7601c7563f..137c8e18a0 100644
--- a/packages/components/src/components/details/test/html.mock.ts
+++ b/packages/components/src/components/details/test/html.mock.ts
@@ -31,7 +31,7 @@ export const getDetailsHtml = (
${props._label}
-
+
${getIndentedTextHtml(props, slots)}
diff --git a/packages/components/src/components/image/style.css b/packages/components/src/components/image/style.css
index 3589a3a56d..ee4adecc0a 100644
--- a/packages/components/src/components/image/style.css
+++ b/packages/components/src/components/image/style.css
@@ -1,4 +1,7 @@
@layer kol-component {
+ :host {
+ display: inline-block;
+ }
img {
max-height: 100%;
max-width: 100%;
diff --git a/packages/components/src/components/input-checkbox/component.tsx b/packages/components/src/components/input-checkbox/component.tsx
index cc04c31090..f9b68c31a2 100644
--- a/packages/components/src/components/input-checkbox/component.tsx
+++ b/packages/components/src/components/input-checkbox/component.tsx
@@ -31,11 +31,9 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
})
export class KolInputCheckbox implements API {
@Element() private readonly host?: HTMLKolInputCheckboxElement;
- private ref?: HTMLInputElement;
private readonly catchRef = (ref?: HTMLInputElement) => {
- this.ref = ref;
- propagateFocus(this.host, this.ref);
+ propagateFocus(this.host, ref);
};
public render(): JSX.Element {
@@ -53,7 +51,7 @@ export class KolInputCheckbox implements API {
}}
data-role={this.state._variant === 'button' ? 'button' : undefined}
onKeyPress={this.state._variant === 'button' ? this.onChange : undefined}
- tabIndex={this.state._variant === 'button' ? 0 : undefined}
+ tabIndex={this.state._variant === 'button' && !this.state._disabled ? 0 : undefined}
_accessKey={this.state._accessKey}
_alert={this.state._alert}
_disabled={this.state._disabled}
diff --git a/packages/components/src/components/input-radio/component.tsx b/packages/components/src/components/input-radio/component.tsx
index f69365d26a..89ad7ef9f9 100644
--- a/packages/components/src/components/input-radio/component.tsx
+++ b/packages/components/src/components/input-radio/component.tsx
@@ -32,11 +32,9 @@ import { InternalUnderlinedAccessKey } from '../span/InternalUnderlinedAccessKey
})
export class KolInputRadio implements API {
@Element() private readonly host?: HTMLKolInputRadioElement;
- private ref?: HTMLInputElement;
private readonly catchRef = (ref?: HTMLInputElement) => {
- this.ref = ref;
- propagateFocus(this.host, this.ref);
+ propagateFocus(this.host, ref);
};
public render(): JSX.Element {
diff --git a/packages/components/src/components/link-button/component.tsx b/packages/components/src/components/link-button/component.tsx
index bc130c7c32..44ac156832 100644
--- a/packages/components/src/components/link-button/component.tsx
+++ b/packages/components/src/components/link-button/component.tsx
@@ -25,11 +25,9 @@ import { AccessKeyPropType } from '../../types/props/access-key';
})
export class KolLinkButton implements Props {
@Element() private readonly host?: HTMLKolLinkButtonElement;
- private ref?: HTMLKolLinkWcElement;
private readonly catchRef = (ref?: HTMLKolLinkWcElement) => {
- this.ref = ref;
- propagateFocus(this.host, this.ref);
+ propagateFocus(this.host, ref);
};
public render(): JSX.Element {
diff --git a/packages/components/src/components/link/shadow.tsx b/packages/components/src/components/link/shadow.tsx
index 02e962906a..b383f1382e 100644
--- a/packages/components/src/components/link/shadow.tsx
+++ b/packages/components/src/components/link/shadow.tsx
@@ -23,11 +23,9 @@ import { AccessKeyPropType } from '../../types/props/access-key';
})
export class KolLink implements LinkProps {
@Element() private readonly host?: HTMLKolLinkElement;
- private ref?: HTMLKolLinkWcElement;
private readonly catchRef = (ref?: HTMLKolLinkWcElement) => {
- this.ref = ref;
- propagateFocus(this.host, this.ref);
+ propagateFocus(this.host, ref);
};
public render(): JSX.Element {
diff --git a/packages/components/src/components/logo/style.css b/packages/components/src/components/logo/style.css
index ba8e853753..0942931b8c 100644
--- a/packages/components/src/components/logo/style.css
+++ b/packages/components/src/components/logo/style.css
@@ -1,7 +1,7 @@
@import url(../style.css);
@layer kol-component {
:host {
- display: block;
+ display: inline-block;
}
text {
diff --git a/packages/components/src/index.html b/packages/components/src/index.html
index ddb91ec45d..c80cf2dd90 100644
--- a/packages/components/src/index.html
+++ b/packages/components/src/index.html
@@ -238,7 +238,7 @@
-
+