@ctrliq/quantic-components 1.84.1 → 1.85.1
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.
- package/dist/action-group/action-group.component.js +2 -1
- package/dist/alert/alert.js +2 -1
- package/dist/alert/index.stories.d.ts +7 -0
- package/dist/alert/index.stories.js +1 -0
- package/dist/badge/badge-group.component.js +2 -1
- package/dist/index.js.map +1 -1
- package/dist/meta/index.js.map +1 -1
- package/dist/meta/sibling-groups.test.d.ts +1 -0
- package/dist/meta/sibling-groups.test.js +42 -0
- package/dist/meta.json +4 -4
- package/dist/quantic-components.js +19 -7
- package/dist/quantic-components.js.map +1 -1
- package/dist/quantic-components.min.js +1852 -1851
- package/dist/quantic-components.min.js.map +1 -1
- package/dist/register.js.map +1 -1
- package/dist/shared/auto-hide-empty-slots.mixin.d.ts +0 -35
- package/dist/shared/auto-hide-empty-slots.mixin.js +11 -3
- package/dist/shared/auto-hide-empty-slots.mixin.test.d.ts +1 -0
- package/dist/shared/auto-hide-empty-slots.mixin.test.js +57 -0
- package/dist/tag/tag-group.component.js +2 -1
- package/dist/types/alert/index.stories.d.ts +7 -0
- package/dist/types/meta/sibling-groups.test.d.ts +1 -0
- package/dist/types/shared/auto-hide-empty-slots.mixin.d.ts +0 -35
- package/dist/types/shared/auto-hide-empty-slots.mixin.test.d.ts +1 -0
- package/package.json +1 -1
|
@@ -14,7 +14,7 @@ let ActionGroup = class ActionGroup extends QuanticElement {
|
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
16
|
return html `
|
|
17
|
-
<div class="group" role="group" aria-label=${this.ariaLabel ?? 'Actions'}>
|
|
17
|
+
<div class="group" part="group" role="group" aria-label=${this.ariaLabel ?? 'Actions'}>
|
|
18
18
|
<slot></slot>
|
|
19
19
|
</div>
|
|
20
20
|
`;
|
|
@@ -25,6 +25,7 @@ ActionGroup.meta = {
|
|
|
25
25
|
description: 'A row of related actions sharing one accessible name and a consistent gap. ' +
|
|
26
26
|
'Takes quantic-button, and quantic-dropdown-menu or quantic-popover when the trigger is a button. ' +
|
|
27
27
|
'Wraps when the row runs out of width. Gap: --quantic-component-action-group-gap. ' +
|
|
28
|
+
'Layout: ::part(group), for a column or a different alignment. ' +
|
|
28
29
|
'Use quantic-button-bar when the buttons should read as one joined control.',
|
|
29
30
|
category: 'action',
|
|
30
31
|
slots: {
|
package/dist/alert/alert.js
CHANGED
|
@@ -153,9 +153,10 @@ Alert.styles = css `
|
|
|
153
153
|
|
|
154
154
|
.icon {
|
|
155
155
|
display: inline-flex;
|
|
156
|
+
align-items: center;
|
|
156
157
|
flex-shrink: 0;
|
|
158
|
+
height: var(--quantic-line-height-body-sm);
|
|
157
159
|
color: var(--quantic-component-alert-icon-color);
|
|
158
|
-
line-height: 0;
|
|
159
160
|
}
|
|
160
161
|
|
|
161
162
|
.content {
|
|
@@ -22,6 +22,13 @@ export declare const CustomIcon: import("../shared/story").StoryObject<object>;
|
|
|
22
22
|
export declare const AsyncSlotRepro: {
|
|
23
23
|
name: string;
|
|
24
24
|
render: () => string;
|
|
25
|
+
parameters: {
|
|
26
|
+
docs: {
|
|
27
|
+
story: {
|
|
28
|
+
autoplay: boolean;
|
|
29
|
+
};
|
|
30
|
+
};
|
|
31
|
+
};
|
|
25
32
|
play: ({ canvasElement }: {
|
|
26
33
|
canvasElement: HTMLElement;
|
|
27
34
|
}) => Promise<void>;
|
|
@@ -111,6 +111,7 @@ export const AsyncSlotRepro = {
|
|
|
111
111
|
The title and action slots are empty on mount and inserted 800 ms later.
|
|
112
112
|
</quantic-alert>
|
|
113
113
|
`,
|
|
114
|
+
parameters: { docs: { story: { autoplay: true } } },
|
|
114
115
|
play: async ({ canvasElement }) => {
|
|
115
116
|
await new Promise((r) => setTimeout(r, 800));
|
|
116
117
|
const alert = canvasElement.querySelector('quantic-alert');
|
|
@@ -14,7 +14,7 @@ let BadgeGroup = class BadgeGroup extends QuanticElement {
|
|
|
14
14
|
}
|
|
15
15
|
render() {
|
|
16
16
|
return html `
|
|
17
|
-
<div class="group" role="group" aria-label=${this.ariaLabel ?? 'Badges'}>
|
|
17
|
+
<div class="group" part="group" role="group" aria-label=${this.ariaLabel ?? 'Badges'}>
|
|
18
18
|
<slot></slot>
|
|
19
19
|
</div>
|
|
20
20
|
`;
|
|
@@ -24,6 +24,7 @@ BadgeGroup.meta = {
|
|
|
24
24
|
tag: 'quantic-badge-group',
|
|
25
25
|
description: 'A run of quantic-badge or quantic-status-badge sharing one accessible name and a consistent gap. ' +
|
|
26
26
|
'Wraps across lines, and each badge keeps its own size. Gap: --quantic-component-badge-group-gap. ' +
|
|
27
|
+
'Layout: ::part(group), for a column or a different alignment. ' +
|
|
27
28
|
'Use quantic-tag-group for tags.',
|
|
28
29
|
category: 'display',
|
|
29
30
|
slots: {
|