@sebgroup/green-core 3.8.0 → 3.9.0
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/components/card-linked/card-linked.styles.js +1 -1
- package/components/text/text.component.js +1 -1
- package/custom-elements.json +13775 -13771
- package/gds-element.js +1 -1
- package/generated/mcp/card-pattern-01/api.md +2 -1
- package/generated/mcp/components.json +1 -1
- package/generated/mcp/icons.json +1 -1
- package/generated/mcp/index.json +1 -1
- package/generated/mcp/tokens.json +1 -1
- package/generated/react/index.d.ts +6 -6
- package/generated/react/index.js +6 -6
- package/package.json +1 -1
- package/patterns/card-pattern-01/card-pattern-01.component.d.ts +2 -1
- package/patterns/card-pattern-01/card-pattern-01.component.js +49 -25
- package/utils/helpers/custom-element-scoping.js +1 -1
package/gds-element.js
CHANGED
|
@@ -16,7 +16,7 @@ class GdsElement extends LitElement {
|
|
|
16
16
|
/**
|
|
17
17
|
* The semantic version of this element. Can be used for troubleshooting to verify the version being used.
|
|
18
18
|
*/
|
|
19
|
-
this.semanticVersion = "3.
|
|
19
|
+
this.semanticVersion = "3.9.0";
|
|
20
20
|
this.syncFirstRender = false;
|
|
21
21
|
this._isUsingTransitionalStyles = false;
|
|
22
22
|
this._dynamicStylesController = new DynamicStylesController(this);
|
|
@@ -56,7 +56,8 @@
|
|
|
56
56
|
|
|
57
57
|
| Name | Description |
|
|
58
58
|
|------|-------------|
|
|
59
|
-
| `
|
|
59
|
+
| `media` | Custom media content rendered in the card media area (when no src image is provided). |
|
|
60
|
+
| `header` | Custom header content rendered only when neither src nor media slot content is present. |
|
|
60
61
|
| `footer` | Action items (buttons, links) |
|
|
61
62
|
|
|
62
63
|
|
package/generated/mcp/icons.json
CHANGED
package/generated/mcp/index.json
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
export * from './alert/index.js';
|
|
2
1
|
export * from './avatar/index.js';
|
|
3
|
-
export * from './
|
|
2
|
+
export * from './alert/index.js';
|
|
4
3
|
export * from './blur/index.js';
|
|
4
|
+
export * from './badge/index.js';
|
|
5
5
|
export * from './breadcrumbs/index.js';
|
|
6
6
|
export * from './button/index.js';
|
|
7
7
|
export * from './calendar/index.js';
|
|
8
8
|
export * from './card/index.js';
|
|
9
|
-
export * from './checkbox/index.js';
|
|
10
9
|
export * from './card-linked/index.js';
|
|
10
|
+
export * from './checkbox/index.js';
|
|
11
11
|
export * from './coachmark/index.js';
|
|
12
12
|
export * from './context-menu/index.js';
|
|
13
|
-
export * from './dialog/index.js';
|
|
14
|
-
export * from './div/index.js';
|
|
15
13
|
export * from './datepicker/index.js';
|
|
16
14
|
export * from './details/index.js';
|
|
15
|
+
export * from './dialog/index.js';
|
|
16
|
+
export * from './div/index.js';
|
|
17
17
|
export * from './divider/index.js';
|
|
18
18
|
export * from './dropdown/index.js';
|
|
19
19
|
export * from './fab/index.js';
|
|
@@ -29,9 +29,9 @@ export * from './link/index.js';
|
|
|
29
29
|
export * from './mask/index.js';
|
|
30
30
|
export * from './menu-button/index.js';
|
|
31
31
|
export * from './pagination/index.js';
|
|
32
|
-
export * from './radio/index.js';
|
|
33
32
|
export * from './backdrop/index.js';
|
|
34
33
|
export * from './popover/index.js';
|
|
34
|
+
export * from './radio/index.js';
|
|
35
35
|
export * from './rich-text/index.js';
|
|
36
36
|
export * from './segmented-control/index.js';
|
|
37
37
|
export * from './select/index.js';
|
package/generated/react/index.js
CHANGED
|
@@ -1,19 +1,19 @@
|
|
|
1
|
-
export * from "./alert/index.js";
|
|
2
1
|
export * from "./avatar/index.js";
|
|
3
|
-
export * from "./
|
|
2
|
+
export * from "./alert/index.js";
|
|
4
3
|
export * from "./blur/index.js";
|
|
4
|
+
export * from "./badge/index.js";
|
|
5
5
|
export * from "./breadcrumbs/index.js";
|
|
6
6
|
export * from "./button/index.js";
|
|
7
7
|
export * from "./calendar/index.js";
|
|
8
8
|
export * from "./card/index.js";
|
|
9
|
-
export * from "./checkbox/index.js";
|
|
10
9
|
export * from "./card-linked/index.js";
|
|
10
|
+
export * from "./checkbox/index.js";
|
|
11
11
|
export * from "./coachmark/index.js";
|
|
12
12
|
export * from "./context-menu/index.js";
|
|
13
|
-
export * from "./dialog/index.js";
|
|
14
|
-
export * from "./div/index.js";
|
|
15
13
|
export * from "./datepicker/index.js";
|
|
16
14
|
export * from "./details/index.js";
|
|
15
|
+
export * from "./dialog/index.js";
|
|
16
|
+
export * from "./div/index.js";
|
|
17
17
|
export * from "./divider/index.js";
|
|
18
18
|
export * from "./dropdown/index.js";
|
|
19
19
|
export * from "./fab/index.js";
|
|
@@ -29,9 +29,9 @@ export * from "./link/index.js";
|
|
|
29
29
|
export * from "./mask/index.js";
|
|
30
30
|
export * from "./menu-button/index.js";
|
|
31
31
|
export * from "./pagination/index.js";
|
|
32
|
-
export * from "./radio/index.js";
|
|
33
32
|
export * from "./backdrop/index.js";
|
|
34
33
|
export * from "./popover/index.js";
|
|
34
|
+
export * from "./radio/index.js";
|
|
35
35
|
export * from "./rich-text/index.js";
|
|
36
36
|
export * from "./segmented-control/index.js";
|
|
37
37
|
export * from "./select/index.js";
|
package/package.json
CHANGED
|
@@ -6,7 +6,8 @@ declare const GdsCardPattern01_base: (new (...args: any[]) => import("../../util
|
|
|
6
6
|
* @element gds-card-pattern-01
|
|
7
7
|
* @status beta
|
|
8
8
|
*
|
|
9
|
-
* @slot
|
|
9
|
+
* @slot media - Custom media content rendered in the card media area (when no src image is provided).
|
|
10
|
+
* @slot header - Custom header content rendered only when neither src nor media slot content is present.
|
|
10
11
|
* @slot footer - Action items (buttons, links)
|
|
11
12
|
*
|
|
12
13
|
*/
|
|
@@ -3,7 +3,7 @@ import {
|
|
|
3
3
|
__privateAdd,
|
|
4
4
|
__privateMethod
|
|
5
5
|
} from "../../chunks/chunk.CAV4X6PU.js";
|
|
6
|
-
var _hasFooterContent, hasFooterContent_fn, _getClasses, getClasses_fn, _renderLinkedCard, renderLinkedCard_fn, _renderLinkedFooter, renderLinkedFooter_fn, _renderStaticCard, renderStaticCard_fn, _renderStaticFooter, renderStaticFooter_fn, _renderCardContent, renderCardContent_fn;
|
|
6
|
+
var _hasFooterContent, hasFooterContent_fn, _getClasses, getClasses_fn, _hasMediaSlotContent, hasMediaSlotContent_fn, _renderMedia, renderMedia_fn, _renderLinkedCard, renderLinkedCard_fn, _renderLinkedFooter, renderLinkedFooter_fn, _renderStaticCard, renderStaticCard_fn, _renderStaticFooter, renderStaticFooter_fn, _renderCardContent, renderCardContent_fn;
|
|
7
7
|
import { property } from "lit/decorators.js";
|
|
8
8
|
import { classMap } from "lit/directives/class-map.js";
|
|
9
9
|
import { ifDefined } from "lit/directives/if-defined.js";
|
|
@@ -42,6 +42,8 @@ let GdsCardPattern01 = class extends withSizeXProps(
|
|
|
42
42
|
*/
|
|
43
43
|
__privateAdd(this, _hasFooterContent);
|
|
44
44
|
__privateAdd(this, _getClasses);
|
|
45
|
+
__privateAdd(this, _hasMediaSlotContent);
|
|
46
|
+
__privateAdd(this, _renderMedia);
|
|
45
47
|
/**
|
|
46
48
|
* Renders linked version of the card
|
|
47
49
|
* Includes href, target, and rel attributes
|
|
@@ -65,7 +67,7 @@ let GdsCardPattern01 = class extends withSizeXProps(
|
|
|
65
67
|
/**
|
|
66
68
|
* Renders card content structure
|
|
67
69
|
* Includes media, header slot, title/excerpt, and footer
|
|
68
|
-
* Header slot only shows when no media is present
|
|
70
|
+
* Header slot only shows when no image media is present
|
|
69
71
|
*/
|
|
70
72
|
__privateAdd(this, _renderCardContent);
|
|
71
73
|
this.title = "";
|
|
@@ -100,6 +102,46 @@ getClasses_fn = function(type) {
|
|
|
100
102
|
[`ratio-${this.ratio}`]: true
|
|
101
103
|
});
|
|
102
104
|
};
|
|
105
|
+
_hasMediaSlotContent = new WeakSet();
|
|
106
|
+
hasMediaSlotContent_fn = function() {
|
|
107
|
+
return !!this.querySelector('[slot="media"]');
|
|
108
|
+
};
|
|
109
|
+
_renderMedia = new WeakSet();
|
|
110
|
+
renderMedia_fn = function() {
|
|
111
|
+
if (this.src) {
|
|
112
|
+
return html`
|
|
113
|
+
<gds-flex padding="xs xs 0 xs">
|
|
114
|
+
<gds-img
|
|
115
|
+
src=${ifDefined(this.src)}
|
|
116
|
+
srcset=${ifDefined(this.srcset)}
|
|
117
|
+
sizes=${ifDefined(this.sizes)}
|
|
118
|
+
width="100%"
|
|
119
|
+
height="100%"
|
|
120
|
+
object-fit="cover"
|
|
121
|
+
object-position="center"
|
|
122
|
+
border-radius="xs"
|
|
123
|
+
aspect-ratio=${this.ratio === "square" ? "1/1" : "16/9"}
|
|
124
|
+
loading=${ifDefined(this.loading)}
|
|
125
|
+
decoding=${ifDefined(this.decoding)}
|
|
126
|
+
alt=${ifDefined(this.alt)}
|
|
127
|
+
class="card-media"
|
|
128
|
+
></gds-img>
|
|
129
|
+
</gds-flex>
|
|
130
|
+
`;
|
|
131
|
+
}
|
|
132
|
+
if (__privateMethod(this, _hasMediaSlotContent, hasMediaSlotContent_fn).call(this)) {
|
|
133
|
+
return html`
|
|
134
|
+
<gds-flex
|
|
135
|
+
padding="xs xs 0 xs"
|
|
136
|
+
flex="1"
|
|
137
|
+
aspect-ratio=${this.ratio === "square" ? "1/1" : "16/9"}
|
|
138
|
+
>
|
|
139
|
+
<slot name="media"></slot>
|
|
140
|
+
</gds-flex>
|
|
141
|
+
`;
|
|
142
|
+
}
|
|
143
|
+
return null;
|
|
144
|
+
};
|
|
103
145
|
_renderLinkedCard = new WeakSet();
|
|
104
146
|
renderLinkedCard_fn = function() {
|
|
105
147
|
return html`
|
|
@@ -170,30 +212,12 @@ renderStaticFooter_fn = function() {
|
|
|
170
212
|
_renderCardContent = new WeakSet();
|
|
171
213
|
renderCardContent_fn = function() {
|
|
172
214
|
return html`
|
|
173
|
-
${
|
|
174
|
-
this.src,
|
|
175
|
-
() => html`
|
|
176
|
-
<gds-flex padding="xs xs 0 xs">
|
|
177
|
-
<gds-img
|
|
178
|
-
src=${ifDefined(this.src)}
|
|
179
|
-
srcset=${ifDefined(this.srcset)}
|
|
180
|
-
sizes=${ifDefined(this.sizes)}
|
|
181
|
-
width="100%"
|
|
182
|
-
height="100%"
|
|
183
|
-
object-fit="cover"
|
|
184
|
-
object-position="center"
|
|
185
|
-
border-radius="xs"
|
|
186
|
-
aspect-ratio=${this.ratio === "square" ? "1/1" : "16/9"}
|
|
187
|
-
loading=${ifDefined(this.loading)}
|
|
188
|
-
decoding=${ifDefined(this.decoding)}
|
|
189
|
-
alt=${ifDefined(this.alt)}
|
|
190
|
-
class="card-media"
|
|
191
|
-
></gds-img>
|
|
192
|
-
</gds-flex>
|
|
193
|
-
`
|
|
194
|
-
)}
|
|
215
|
+
${__privateMethod(this, _renderMedia, renderMedia_fn).call(this)}
|
|
195
216
|
<gds-flex flex-direction="column" gap="xl" padding="xl">
|
|
196
|
-
${when(
|
|
217
|
+
${when(
|
|
218
|
+
!this.src && !__privateMethod(this, _hasMediaSlotContent, hasMediaSlotContent_fn).call(this),
|
|
219
|
+
() => html`<slot name="header"></slot>`
|
|
220
|
+
)}
|
|
197
221
|
${when(
|
|
198
222
|
this.title || this.excerpt,
|
|
199
223
|
() => html`
|