@proximus/lavender-card 1.4.18-beta.1 → 1.4.18

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.
Files changed (3) hide show
  1. package/dist/index.es.js +2 -1
  2. package/dist/web-types.json +2 -2
  3. package/package.json +1 -1
package/dist/index.es.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import { VerticallyExtendedElement as e, checkName as t, createTemplate as n, cssTokenBreakpoints as r, log as i, renderTemplate as a } from "@proximus/lavender-common";
2
- // src/card.css?inline
2
+ //#region src/card.css?inline
3
3
  var o = ":host{--card-background-color-default:var(--px-color-background-container-light-default);--card-media-left-size-s:120px;--card-media-left-size-m:250px;--card-media-left-size:var(--card-media-left-size-s);display:block}:host *{box-sizing:border-box}:host picture{display:none}:host([media-position=background]) picture{display:none!important}:host(:not([media-position=background])) picture:has(img[src]){display:block}.card{height:100%;color:var(--px-color-text-neutral-default);--btn-transition:all .2s ease-in-out 0s;transition:var(--btn-transition);border-radius:var(--px-radius-main);outline-color:var(--px-color-border-focus-outline-default);outline-width:var(--px-focus-outline-mobile);border:var(--px-size-border-m) solid transparent;text-decoration:none;display:block;position:relative;overflow:hidden}.card .contrast-helper{z-index:1;pointer-events:none;display:none;position:absolute;inset:0}:host([contrast-helper-gradient]) :is(.card .contrast-helper){background-image:linear-gradient(90deg,#fff 23.43%,#fff0 81.69%);display:block}:host([contrast-helper-overlay]) :is(.card .contrast-helper){background-color:#ffffffb3;display:block}.card .card__content{z-index:2;flex-grow:1;position:relative}.card .card__content>px-vstack{height:100%}.card px-container{background-color:var(--card-background-color-default)}.card:focus-visible{outline-offset:var(--px-focus-offset-mobile);outline-style:solid}.card:hover{border-color:var(--px-color-border-state-hover-default)}.card:hover px-container{background-color:var(--px-color-background-state-hover-bordered-default)}px-container{height:100%}::slotted([slot=title]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-heading-xl-mobile);font-weight:var(--px-font-weight-title);color:var(--px-color-text-brand-default)}::slotted([slot=content]){font-family:var(--px-font-family);line-height:var(--px-line-height-ratio-l);font-size:var(--px-text-size-body-m-mobile);font-weight:var(--px-font-weight-body);color:var(--px-color-text-neutral-default)}:host([media-left-size=s]) img{--card-media-left-size:var(--card-media-left-size-s)}:host([media-left-size=m]) img{--card-media-left-size:var(--card-media-left-size-m)}@media screen and (width<=48rem){.hidden--mobile,.shown--tablet,.shown--laptop{display:none}.hidden--tablet,.hidden--laptop,.shown--mobile{display:block}:host([media-left-size--mobile=m]) img{--card-media-left-size:var(--card-media-left-size-m)}:host([media-left-size--mobile=s]) img{--card-media-left-size:var(--card-media-left-size-s)}:host([media-position--mobile=background]) picture{display:none!important}:host(:not([media-position--mobile=background],[media-position=background])) picture:has(source:first-child[srcset]){display:block}:is(:host([media-position=top]),:host([media-position--mobile=top])) img{width:100%;height:100%;aspect-ratio:initial;object-fit:initial;display:block}:is(:host([media-position=left]:not([media-position--mobile=top])),:host([media-position--mobile=left])) img{aspect-ratio:1;height:100%;width:var(--card-media-left-size);object-fit:cover}:is(.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile),.media-position-background--mobile) px-container{background-color:#0000}:is(.media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile),.media-position-background--mobile):hover px-container{background-color:#0000}}@media screen and (width>=48rem) and (width<=64rem){.hidden--tablet,.shown--mobile,.shown--laptop{display:none}.hidden--mobile,.hidden--laptop,.shown--tablet{display:block}:host([media-left-size--tablet=m]) img{--card-media-left-size:var(--card-media-left-size-m)}:host([media-left-size--tablet=s]) img{--card-media-left-size:var(--card-media-left-size-s)}:host([media-position--tablet=background]) picture{display:none!important}:host(:not([media-position--mobile=background],[media-position=background])) picture:has(source:nth-child(2)[srcset]){display:block}:is(:host([media-position=left]:not([media-position--tablet=top])),:host([media-position--tablet=left])) img{aspect-ratio:1;height:100%;width:var(--card-media-left-size);object-fit:cover}:is(:host([media-position=top]),:host([media-position--tablet=top])) img{width:100%;height:100%;aspect-ratio:initial;object-fit:initial;display:block}:is(.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet),.media-position-background--tablet) px-container{background-color:#0000}:is(.media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet),.media-position-background--tablet):hover px-container{background-color:#0000}}@media screen and (width>=48rem){.card{outline-width:var(--px-focus-outline-tablet)}.card:focus-visible{outline-offset:var(--px-focus-offset-tablet)}::slotted([slot=title]){font-size:var(--px-text-size-heading-xl-tablet)}::slotted([slot=content]){font-size:var(--px-text-size-body-m-tablet)}}@media screen and (width>=64.0625rem){.hidden--laptop,.shown--mobile,.shown--tablet{display:none}.hidden--mobile,.hidden--tablet,.shown--laptop{display:block}:host([media-left-size--laptop=m]) img{--card-media-left-size:var(--card-media-left-size-m)}:host([media-left-size--laptop=s]) img{--card-media-left-size:var(--card-media-left-size-s)}:host([media-position--laptop=background]) picture{display:none!important}:host(:not([media-position--mobile=background],[media-position=background])) picture:has(source:nth-child(3)[srcset]){display:block}:is(:host([media-position=left]:not([media-position--laptop=top])),:host([media-position--laptop=left])) img{aspect-ratio:1;height:100%;width:var(--card-media-left-size);object-fit:cover}:is(:host([media-position=top]),:host([media-position--laptop=top])) img{width:100%;height:100%;aspect-ratio:initial;object-fit:initial;display:block}.card{outline-width:var(--px-focus-outline-laptop)}.card:focus-visible{outline-offset:var(--px-focus-offset-laptop)}::slotted([slot=title]){font-size:var(--px-text-size-heading-xl-laptop)}::slotted([slot=content]){font-size:var(--px-text-size-body-m-laptop)}img[src=null]{display:none}:is(.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop),.media-position-background--laptop) px-container{background-color:#0000}:is(.media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop),.media-position-background--laptop):hover px-container{background-color:#0000}}:host([inverted]){--card-background-color-inverted:var(--px-color-background-container-light-inverted)}:host([inverted]) .card{color:var(--px-color-text-neutral-inverted);outline-color:var(--px-color-border-focus-outline-inverted)}:host([contrast-helper-gradient]) :is(:host([inverted]) .card .contrast-helper){background-image:linear-gradient(90deg,#000 23.43%,#0000 81.69%)}:host([contrast-helper-overlay]) :is(:host([inverted]) .card .contrast-helper){background-color:#0006}:host([inverted]) .card px-container{background-color:var(--card-background-color-inverted)}:host([inverted]) .card:hover{border-color:var(--px-color-border-state-hover-inverted)}:host([inverted]) .card:hover px-container{background-color:var(--px-color-background-state-hover-bordered-inverted)}:host([inverted]) ::slotted([slot=title]){color:var(--px-color-text-brand-inverted)}:host([inverted]) ::slotted([slot=content]){color:var(--px-color-text-neutral-inverted)}@media screen and (width<=47.938rem){:is(:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile),:host([inverted]) .media-position-background--mobile) px-container{background-color:#0000}:is(:host([inverted]) .media-position-background:not(.media-position-top--mobile,.media-position-left--mobile,.media-position-none--mobile),:host([inverted]) .media-position-background--mobile):hover px-container{background-color:#0000}}@media screen and (width>=48rem) and (width<=64rem){:is(:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet),:host([inverted]) .media-position-background--tablet) px-container{background-color:#0000}:is(:host([inverted]) .media-position-background:not(.media-position-top--tablet,.media-position-left--tablet,.media-position-none--tablet),:host([inverted]) .media-position-background--tablet):hover px-container{background-color:#0000}}@media screen and (width>=64.0625rem){:is(:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop),:host([inverted]) .media-position-background--laptop) px-container{background-color:#0000}:is(:host([inverted]) .media-position-background:not(.media-position-top--laptop,.media-position-left--laptop,.media-position-none--laptop),:host([inverted]) .media-position-background--laptop):hover px-container{background-color:#0000}}", s = new CSSStyleSheet();
4
4
  s.replaceSync(o);
5
5
  var c = [
@@ -267,4 +267,5 @@ var c = [
267
267
  }
268
268
  };
269
269
  customElements.get("px-card") || customElements.define("px-card", p);
270
+ //#endregion
270
271
  export { p as Card, c as cardBackgroundColorValues, u as cardMediaLeftSizeValues, d as cardMediaPositionValues, l as cardPaddingValues };
package/dist/web-types.json CHANGED
@@ -1,14 +1,14 @@
1
1
  {
2
2
  "$schema": "https://raw.githubusercontent.com/JetBrains/web-types/master/schema/web-types.json",
3
3
  "name": "@proximus/lavender-card",
4
- "version": "1.4.18-beta.1",
4
+ "version": "1.4.18",
5
5
  "description-markup": "markdown",
6
6
  "contributions": {
7
7
  "html": {
8
8
  "elements": [
9
9
  {
10
10
  "name": "px-card",
11
- "description": "\n---\n",
11
+ "description": "\n\n---\n",
12
12
  "doc-url": "",
13
13
  "attributes": [
14
14
  { "name": "inverted", "value": { "type": "string" } },
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-card",
3
- "version": "1.4.18-beta.1",
3
+ "version": "1.4.18",
4
4
  "description": "",
5
5
  "main": "dist/index.es.js",
6
6
  "types": "dist/index.d.ts",