@govtechsg/sgds-web-component 3.22.0 → 3.22.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/base/card.js +1 -1
- package/components/Card/index.umd.min.js +1 -1
- package/components/Card/index.umd.min.js.map +1 -1
- package/components/IconCard/index.umd.min.js +1 -1
- package/components/IconCard/index.umd.min.js.map +1 -1
- package/components/ImageCard/index.umd.min.js +1 -1
- package/components/ImageCard/index.umd.min.js.map +1 -1
- package/components/ThumbnailCard/index.umd.min.js +1 -1
- package/components/ThumbnailCard/index.umd.min.js.map +1 -1
- package/components/index.umd.min.js +1 -1
- package/components/index.umd.min.js.map +1 -1
- package/css/fouc.css +3 -3
- package/custom-elements.json +559 -559
- package/index.umd.min.js +1 -1
- package/index.umd.min.js.map +1 -1
- package/package.json +1 -1
- package/react/base/card.cjs.js +1 -1
- package/react/base/card.js +1 -1
- package/react/index.cjs.js +10 -10
- package/react/index.d.ts +3 -3
- package/react/index.js +3 -3
- package/types/react.d.ts +176 -59
package/package.json
CHANGED
package/react/base/card.cjs.js
CHANGED
|
@@ -5,7 +5,7 @@ Object.defineProperty(exports, '__esModule', { value: true });
|
|
|
5
5
|
|
|
6
6
|
var lit = require('lit');
|
|
7
7
|
|
|
8
|
-
var css_248z = lit.css`:host{height:100%}:host([disabled]){cursor:not-allowed}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}:host([stretchedLink]) .card:after{display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-lg);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-color-default);font-size:var(--sgds-font-size-heading-sm)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-tight)!important;line-height:var(--sgds-line-height-sm)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-overline-md)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-2-xs)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-2-xs);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
|
|
8
|
+
var css_248z = lit.css`:host{height:100%}:host([disabled]){cursor:not-allowed}:host([stretchedLink]:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}:host([stretchedLink]) .card:after{display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-lg);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-color-default);font-size:var(--sgds-font-size-heading-sm)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-tight)!important;line-height:var(--sgds-line-height-sm)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-overline-md)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-2-xs)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-2-xs);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
|
|
9
9
|
|
|
10
10
|
exports["default"] = css_248z;
|
|
11
11
|
//# sourceMappingURL=card.cjs.js.map
|
package/react/base/card.js
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
'use client';
|
|
2
2
|
import { css } from 'lit';
|
|
3
3
|
|
|
4
|
-
var css_248z = css`:host{height:100%}:host([disabled]){cursor:not-allowed}:host(:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}:host([stretchedLink]) .card:after{display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-lg);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-color-default);font-size:var(--sgds-font-size-heading-sm)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-tight)!important;line-height:var(--sgds-line-height-sm)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-overline-md)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-2-xs)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-2-xs);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
|
|
4
|
+
var css_248z = css`:host{height:100%}:host([disabled]){cursor:not-allowed}:host([stretchedLink]:not([noPadding])) .card:not(.disabled):hover{box-shadow:0 0 1px 0 hsla(0,0%,5%,.12),0 8px 16px 0 hsla(0,0%,5%,.12)}:host([stretchedLink]) slot[name=footer]::slotted(a),:host([stretchedLink]) slot[name=footer]::slotted(sgds-link),:host([stretchedLink]) slot[name=link]::slotted(a),:host([stretchedLink]) slot[name=link]::slotted(sgds-link){display:none}:host([stretchedLink]) .card:after{display:none}:host([orientation=horizontal]) .card{flex-direction:row}:host(:not([hideBorder])) .card{border:var(--sgds-border-width-1) solid var(--sgds-border-color-muted)}:host([orientation=horizontal]) .card-body{flex:1}:host([orientation=horizontal]) .card-media{padding:var(--sgds-padding-xl) var(--sgds-padding-none) var(--sgds-padding-xl) var(--sgds-padding-xl)}:host([orientation=horizontal]) .card-image{width:40%}:host([imagePosition=after]) .card-image{order:1}:host([orientation=vertical][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-left-radius:var(--sgds-border-radius-none);border-top-right-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal][imagePosition=after]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-bottom-left-radius:var(--sgds-border-radius-none);border-top-left-radius:var(--sgds-border-radius-none)}:host([orientation=horizontal]) slot[name=image]::slotted(img){border-bottom-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:var(--sgds-border-radius-none);height:100%;object-fit:cover}:host([orientation=vertical][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-padding-none)}:host([orientation=vertical][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-none) var(--sgds-margin-xl) var(--sgds-margin-xl)}:host([orientation=horizontal][imageAdjustment="padding around"][imagePosition=after]) .card-image{margin:var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-xl) var(--sgds-margin-none)}:host([orientation][imageAdjustment="padding around"]) slot[name=image]::slotted(img){border-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1))}:host([orientation=vertical]:not([imageAdjustment="aspect ratio"])) slot[name=image]::slotted(img){height:auto}:host([orientation=vertical][imageAdjustment="aspect ratio"]) slot[name=image]::slotted(img){object-fit:cover}.card{word-wrap:break-word;background-clip:border-box;background-color:var(--sgds-surface-default);border:var(--sgds-border-width-1) solid var(--sgds-border-color-transparent);border-radius:var(--sgds-border-radius-md);box-shadow:none;display:flex;flex-direction:column;height:100%;min-width:0;position:relative;transition:box-shadow .3s ease}a.card{color:initial;text-decoration:none}@media (prefers-reduced-motion:reduce){.card{transition:none}}.card.disabled{opacity:var(--sgds-opacity-40);pointer-events:none}a.card:not(.disabled):focus-visible{--sgds-outline-offset-focus:-1px;outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}.card-tinted-bg{border-radius:var(--sgds-border-radius-md);bottom:0;left:0;opacity:var(--sgds-opacity-0);position:absolute;right:0;top:0}.card-image{flex:1;position:relative}.card-media{align-items:flex-start;display:flex;justify-content:space-between;line-height:0;padding:var(--sgds-padding-xl) var(--sgds-padding-xl) var(--sgds-padding-none)}.card-body{color:var(--sgds-body-color-default);display:flex;flex:1 1 auto;flex-direction:column;gap:var(--sgds-gap-lg);padding:var(--sgds-padding-xl);z-index:1}.card-header-container{display:flex;flex-direction:column;gap:var(--sgds-gap-xs)}.card-header{display:flex;flex-direction:column;gap:var(--sgds-gap-2-xs)}.card-title,slot[name=title]::slotted(*){color:var(--sgds-color-default);font-size:var(--sgds-font-size-heading-sm)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-tight)!important;line-height:var(--sgds-line-height-sm)!important;margin-bottom:var(--sgds-margin-none)!important}slot[name=subtitle]::slotted(*){color:var(--sgds-color-subtle);font-size:var(--sgds-font-size-overline-md)!important;font-weight:var(--sgds-font-weight-semibold)!important;letter-spacing:var(--sgds-letter-spacing-wide)!important;line-height:var(--sgds-line-height-2-xs)!important;margin:var(--sgds-margin-none)!important;text-transform:uppercase}slot[name=title]::slotted(a){color:var(--sgds-link-color-default);text-decoration:none!important}slot[name=description]::slotted(*){color:var(--sgds-color-subtle);margin-bottom:var(--sgds-margin-none)!important}slot[name=image]::slotted(img){border-top-left-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));border-top-right-radius:calc(var(--sgds-border-radius-md) - var(--sgds-border-width-1));display:block;width:100%}slot[name=footer]::slotted(*),slot[name=link]::slotted(*){margin-top:auto;padding-top:var(--sgds-padding-2-xs);width:fit-content}slot[name=footer]::slotted(a),slot[name=link]::slotted(a){color:var(--sgds-link-color-default);height:auto!important;text-decoration:none!important}slot[name=footer]::slotted(a:focus),slot[name=footer]::slotted(a:hover),slot[name=link]::slotted(a:focus),slot[name=link]::slotted(a:hover),slot[name=title]::slotted(a:focus),slot[name=title]::slotted(a:hover){color:var(--sgds-link-color-emphasis)}slot[name=footer]::slotted(a:focus-visible),slot[name=link]::slotted(a:focus-visible),slot[name=title]::slotted(a:focus-visible){outline:var(--sgds-outline-focus);outline-offset:var(--sgds-outline-offset-focus)}`;
|
|
5
5
|
|
|
6
6
|
export { css_248z as default };
|
|
7
7
|
//# sourceMappingURL=card.js.map
|
package/react/index.cjs.js
CHANGED
|
@@ -7,20 +7,20 @@ var index = require('./accordion-item/index.cjs.js');
|
|
|
7
7
|
var index$1 = require('./accordion/index.cjs.js');
|
|
8
8
|
var index$2 = require('./alert-link/index.cjs.js');
|
|
9
9
|
var index$3 = require('./alert/index.cjs.js');
|
|
10
|
-
var index$4 = require('./
|
|
10
|
+
var index$4 = require('./badge/index.cjs.js');
|
|
11
11
|
var index$5 = require('./breadcrumb-item/index.cjs.js');
|
|
12
12
|
var index$6 = require('./breadcrumb/index.cjs.js');
|
|
13
13
|
var index$7 = require('./button/index.cjs.js');
|
|
14
|
-
var index$8 = require('./
|
|
14
|
+
var index$8 = require('./card/index.cjs.js');
|
|
15
15
|
var index$9 = require('./checkbox-group/index.cjs.js');
|
|
16
16
|
var index$a = require('./checkbox/index.cjs.js');
|
|
17
17
|
var index$b = require('./close-button/index.cjs.js');
|
|
18
18
|
var index$c = require('./combo-box-option/index.cjs.js');
|
|
19
19
|
var index$d = require('./combo-box/index.cjs.js');
|
|
20
20
|
var index$e = require('./datepicker/index.cjs.js');
|
|
21
|
-
var index$f = require('./
|
|
22
|
-
var index$g = require('./description-list/index.cjs.js');
|
|
23
|
-
var index$h = require('./
|
|
21
|
+
var index$f = require('./divider/index.cjs.js');
|
|
22
|
+
var index$g = require('./description-list-group/index.cjs.js');
|
|
23
|
+
var index$h = require('./description-list/index.cjs.js');
|
|
24
24
|
var index$i = require('./drawer/index.cjs.js');
|
|
25
25
|
var index$j = require('./dropdown-item/index.cjs.js');
|
|
26
26
|
var index$k = require('./dropdown/index.cjs.js');
|
|
@@ -83,20 +83,20 @@ exports.SgdsAccordionItem = index["default"];
|
|
|
83
83
|
exports.SgdsAccordion = index$1["default"];
|
|
84
84
|
exports.SgdsAlertLink = index$2["default"];
|
|
85
85
|
exports.SgdsAlert = index$3["default"];
|
|
86
|
-
exports.
|
|
86
|
+
exports.SgdsBadge = index$4["default"];
|
|
87
87
|
exports.SgdsBreadcrumbItem = index$5["default"];
|
|
88
88
|
exports.SgdsBreadcrumb = index$6["default"];
|
|
89
89
|
exports.SgdsButton = index$7["default"];
|
|
90
|
-
exports.
|
|
90
|
+
exports.SgdsCard = index$8["default"];
|
|
91
91
|
exports.SgdsCheckboxGroup = index$9["default"];
|
|
92
92
|
exports.SgdsCheckbox = index$a["default"];
|
|
93
93
|
exports.SgdsCloseButton = index$b["default"];
|
|
94
94
|
exports.SgdsComboBoxOption = index$c["default"];
|
|
95
95
|
exports.SgdsComboBox = index$d["default"];
|
|
96
96
|
exports.SgdsDatepicker = index$e["default"];
|
|
97
|
-
exports.
|
|
98
|
-
exports.
|
|
99
|
-
exports.
|
|
97
|
+
exports.SgdsDivider = index$f["default"];
|
|
98
|
+
exports.SgdsDescriptionListGroup = index$g["default"];
|
|
99
|
+
exports.SgdsDescriptionList = index$h["default"];
|
|
100
100
|
exports.SgdsDrawer = index$i["default"];
|
|
101
101
|
exports.SgdsDropdownItem = index$j["default"];
|
|
102
102
|
exports.SgdsDropdown = index$k["default"];
|
package/react/index.d.ts
CHANGED
|
@@ -2,20 +2,20 @@ export { default as SgdsAccordionItem } from './accordion-item';
|
|
|
2
2
|
export { default as SgdsAccordion } from './accordion';
|
|
3
3
|
export { default as SgdsAlertLink } from './alert-link';
|
|
4
4
|
export { default as SgdsAlert } from './alert';
|
|
5
|
-
export { default as
|
|
5
|
+
export { default as SgdsBadge } from './badge';
|
|
6
6
|
export { default as SgdsBreadcrumbItem } from './breadcrumb-item';
|
|
7
7
|
export { default as SgdsBreadcrumb } from './breadcrumb';
|
|
8
8
|
export { default as SgdsButton } from './button';
|
|
9
|
-
export { default as
|
|
9
|
+
export { default as SgdsCard } from './card';
|
|
10
10
|
export { default as SgdsCheckboxGroup } from './checkbox-group';
|
|
11
11
|
export { default as SgdsCheckbox } from './checkbox';
|
|
12
12
|
export { default as SgdsCloseButton } from './close-button';
|
|
13
13
|
export { default as SgdsComboBoxOption } from './combo-box-option';
|
|
14
14
|
export { default as SgdsComboBox } from './combo-box';
|
|
15
15
|
export { default as SgdsDatepicker } from './datepicker';
|
|
16
|
+
export { default as SgdsDivider } from './divider';
|
|
16
17
|
export { default as SgdsDescriptionListGroup } from './description-list-group';
|
|
17
18
|
export { default as SgdsDescriptionList } from './description-list';
|
|
18
|
-
export { default as SgdsDivider } from './divider';
|
|
19
19
|
export { default as SgdsDrawer } from './drawer';
|
|
20
20
|
export { default as SgdsDropdownItem } from './dropdown-item';
|
|
21
21
|
export { default as SgdsDropdown } from './dropdown';
|
package/react/index.js
CHANGED
|
@@ -3,20 +3,20 @@ export { default as SgdsAccordionItem } from './accordion-item/index.js';
|
|
|
3
3
|
export { default as SgdsAccordion } from './accordion/index.js';
|
|
4
4
|
export { default as SgdsAlertLink } from './alert-link/index.js';
|
|
5
5
|
export { default as SgdsAlert } from './alert/index.js';
|
|
6
|
-
export { default as
|
|
6
|
+
export { default as SgdsBadge } from './badge/index.js';
|
|
7
7
|
export { default as SgdsBreadcrumbItem } from './breadcrumb-item/index.js';
|
|
8
8
|
export { default as SgdsBreadcrumb } from './breadcrumb/index.js';
|
|
9
9
|
export { default as SgdsButton } from './button/index.js';
|
|
10
|
-
export { default as
|
|
10
|
+
export { default as SgdsCard } from './card/index.js';
|
|
11
11
|
export { default as SgdsCheckboxGroup } from './checkbox-group/index.js';
|
|
12
12
|
export { default as SgdsCheckbox } from './checkbox/index.js';
|
|
13
13
|
export { default as SgdsCloseButton } from './close-button/index.js';
|
|
14
14
|
export { default as SgdsComboBoxOption } from './combo-box-option/index.js';
|
|
15
15
|
export { default as SgdsComboBox } from './combo-box/index.js';
|
|
16
16
|
export { default as SgdsDatepicker } from './datepicker/index.js';
|
|
17
|
+
export { default as SgdsDivider } from './divider/index.js';
|
|
17
18
|
export { default as SgdsDescriptionListGroup } from './description-list-group/index.js';
|
|
18
19
|
export { default as SgdsDescriptionList } from './description-list/index.js';
|
|
19
|
-
export { default as SgdsDivider } from './divider/index.js';
|
|
20
20
|
export { default as SgdsDrawer } from './drawer/index.js';
|
|
21
21
|
export { default as SgdsDropdownItem } from './dropdown-item/index.js';
|
|
22
22
|
export { default as SgdsDropdown } from './dropdown/index.js';
|