@proximus/lavender-link 1.2.0-alpha.37 → 1.2.0-alpha.38

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 (2) hide show
  1. package/dist/index.js +69 -59
  2. package/package.json +2 -2
package/dist/index.js CHANGED
@@ -1,8 +1,8 @@
1
1
  import { PxElement as d, fontweightValues as c, colorValues as x, fontsizeValues as b } from "@proximus/lavender-common";
2
- const p = 'a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,.link:hover{color:var(--px-color-txt-hover-default)}a:focus,.link:focus{outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-text-to-icon-compact-horizontal)}a ::slotted(*),.link ::slotted(*){display:inline-block}::slotted(a:hover){color:var(--px-color-txt-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-bg-container-weak-default);padding:var(--px-padding-xs)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-txt-body-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-color-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1441px){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop)}a:focus,.link:focus{outline-offset:var(--px-offset);outline-width:var(--px-outline)}}', v = ".btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-between-icon-horizontal);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-primary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-secondary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn.secondary.loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding:var(--px-padding-2xs) 0}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs) var(--px-padding-s)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-default)}.btn.tertiary.loading{color:var(--px-color-txt-primary-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 768px){.btn{font-size:var(--px-text-size-base-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action-desktop)}.btn.secondary{min-height:var(--px-size-action-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1441px){.btn{font-size:var(--px-text-size-base-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset);outline-width:var(--px-outline)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}", h = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-primary{color:var(--px-color-txt-primary-default)}.color-body{color:var(--px-color-txt-body-default)}.color-details{color:var(--px-color-txt-details-default)}.color-hover{color:var(--px-color-txt-hover-default)}.color-disabled{color:var(--px-color-txt-disabled-default)}.color-active{color:var(--px-color-txt-active-default)}.color-promo{color:var(--px-color-txt-promo-default)}.color-success{color:var(--px-color-txt-success-default)}.color-error{color:var(--px-color-txt-error-default)}.color-warning{color:var(--px-color-txt-warning-default)}.color-unlimited{color:var(--px-color-txt-unlimited-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-primary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .color-body{color:var(--px-color-txt-body-inverted)}:host([inverted]) .color-details{color:var(--px-color-txt-details-inverted)}:host([inverted]) .color-hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) .color-disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .color-active{color:var(--px-color-txt-active-inverted)}:host([inverted]) .color-promo{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .color-success{color:var(--px-color-txt-success-inverted)}:host([inverted]) .color-error{color:var(--px-color-txt-error-inverted)}:host([inverted]) .color-warning{color:var(--px-color-txt-warning-inverted)}:host([inverted]) .color-unlimited{color:var(--px-color-txt-unlimited-inverted)}.fontsize-inherit{font-size:inherit;line-height:inherit}.fontsize-xs{font-size:var(--px-text-size-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile);line-height:var(--px-line-height-s)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile);line-height:var(--px-line-height-s)}@media only screen and (min-width: 768px){.fontsize-xs{font-size:var(--px-text-size-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile)}}@media only screen and (min-width: 1025px){.fontsize-xs{font-size:var(--px-text-size-xs-tablet)}.fontsize-s{font-size:var(--px-text-size-s-tablet)}.fontsize-base{font-size:var(--px-text-size-base-tablet)}.fontsize-m{font-size:var(--px-text-size-m-tablet)}.fontsize-l{font-size:var(--px-text-size-l-tablet)}.fontsize-xl{font-size:var(--px-text-size-xl-tablet)}.fontsize-2xl{font-size:var(--px-text-size-2xl-tablet)}.fontsize-3xl{font-size:var(--px-text-size-3xl-tablet)}.fontsize-4xl{font-size:var(--px-text-size-4xl-tablet)}.fontsize-5xl{font-size:var(--px-text-size-5xl-tablet)}.fontsize-6xl{font-size:var(--px-text-size-6xl-tablet)}.fontsize-7xl{font-size:var(--px-text-size-7xl-tablet)}}@media only screen and (min-width: 1441px){.fontsize-xs{font-size:var(--px-text-size-xs-desktop)}.fontsize-s{font-size:var(--px-text-size-s-desktop)}.fontsize-base{font-size:var(--px-text-size-base-desktop)}.fontsize-m{font-size:var(--px-text-size-m-desktop)}.fontsize-l{font-size:var(--px-text-size-l-desktop)}.fontsize-xl{font-size:var(--px-text-size-xl-desktop)}.fontsize-2xl{font-size:var(--px-text-size-2xl-desktop)}.fontsize-3xl{font-size:var(--px-text-size-3xl-desktop)}.fontsize-4xl{font-size:var(--px-text-size-4xl-desktop)}.fontsize-5xl{font-size:var(--px-text-size-5xl-desktop)}.fontsize-6xl{font-size:var(--px-text-size-6xl-desktop)}.fontsize-7xl{font-size:var(--px-text-size-7xl-desktop)}}.fontweight-inherit{font-weight:inherit}.fontweight-normal{font-weight:var(--font-weight-regular)}.fontweight-bold{font-weight:var(--font-weight-bold)}.fontweight-extrabold{font-weight:var(--font-weight-extrabold)}.fontweight-light{font-weight:var(--font-weight-light)}", a = new CSSStyleSheet(), n = new CSSStyleSheet(), s = new CSSStyleSheet();
3
- a.replaceSync(p);
4
- n.replaceSync(v);
5
- s.replaceSync(h);
2
+ const p = 'a,.link,::slotted(a){font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:500;color:var(--px-color-txt-body-default)}a:hover,.link:hover{color:var(--px-color-txt-hover-default)}a:focus,.link:focus{outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}a[aria-disabled=true],.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}a ::slotted([slot="after"]),.link ::slotted([slot="after"]){margin-left:var(--px-spacing-text-to-icon-compact-horizontal)}a ::slotted(*),.link ::slotted(*){display:inline-block}::slotted(a:hover){color:var(--px-color-txt-hover-default)}a.no-style{color:inherit;text-decoration:none}a.no-style:hover,a.no-style:focus{color:inherit}a.skip-link{position:absolute;left:-10000px;top:auto;overflow:hidden;background-color:var(--px-color-bg-container-weak-default);padding:var(--px-padding-xs)}a.skip-link:focus{left:auto;z-index:999}:host([inverted]) a,:host([inverted]) .link,:host([inverted]) ::slotted(a){color:var(--px-color-txt-body-inverted)}:host([inverted]) a:hover,:host([inverted]) .link:hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) a:focus,:host([inverted]) .link:focus{outline-color:var(--px-color-outline-inverted)}:host([inverted]) a[aria-disabled=true],:host([inverted]) .link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) ::slotted(a:hover){color:var(--px-color-txt-hover-inverted)}:host([inverted]) a.skip-link{background-color:var(--px-color-bg-container-weak-inverted)}@media only screen and (min-width: 768px){a,.link,::slotted(a){font-size:var(--px-text-size-base-tablet)}}@media only screen and (min-width: 1441px){a,.link,::slotted(a){font-size:var(--px-text-size-base-desktop)}a:focus,.link:focus{outline-offset:var(--px-offset);outline-width:var(--px-outline)}}', v = ".btn{display:inline-flex;vertical-align:middle;align-items:center;justify-content:center;font-family:var(--px-font-family);font-size:var(--px-text-size-base-mobile);line-height:var(--px-line-height-m);font-weight:700;gap:var(--px-spacing-between-icon-horizontal);cursor:pointer;text-decoration:none;--btn-transition: all .2s ease-in-out 0s;transition:var(--btn-transition);border:var(--px-border-m) solid transparent}.btn,.btn *{box-sizing:border-box}.btn ::slotted(px-icon){line-height:0}.btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-default)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset-s);outline:var(--px-outline-s) solid var(--px-color-outline-default)}.btn:active{transform:scale(.95)}.btn[disabled],.btn[aria-disabled=true]{cursor:default;pointer-events:none}.btn.loading{cursor:inherit}.btn.loading ::slotted(px-spinner){line-height:0}.btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-primary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn:not(.secondary,.tertiary,.patch)[disabled],.btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn:not(.secondary,.tertiary,.patch).extended{width:100%}.btn:not(.secondary,.tertiary,.patch).alternative{border-radius:var(--px-radius-button-small)}.btn.secondary{color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-secondary-default);min-height:var(--px-size-action-mobile);padding:0 var(--px-padding-m);border-radius:var(--px-radius-button-small) var(--px-radius-button-small) var(--px-radius-button-big) var(--px-radius-button-small)}.btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.secondary[disabled],.btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}.btn.secondary.loading{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-primary-default);border-color:transparent}.btn.secondary.extended{width:100%}.btn.secondary.alternative{border-radius:var(--px-radius-button-small)}.btn.tertiary{background:none;color:var(--px-color-txt-primary-default);border-radius:var(--px-radius-pill);padding:var(--px-padding-2xs) 0}.btn.tertiary ::slotted(px-icon){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-secondary-default);transition:var(--btn-transition)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading){padding:var(--px-padding-2xs) var(--px-padding-s)}.btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent;width:inherit;height:inherit}.btn.tertiary[disabled],.btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-default)}.btn.tertiary[disabled] ::slotted(px-icon),.btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-default)}.btn.tertiary.loading{color:var(--px-color-txt-primary-default);border-color:transparent}.btn.tertiary.loading ::slotted(px-spinner){display:flex;align-items:center;justify-content:center;width:var(--px-icon-size-m-mobile);height:var(--px-icon-size-m-mobile);border-radius:var(--px-radius-pill);background:var(--px-color-bg-action-disabled-default)}.btn.patch{display:inline-flex}.btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-hover-bordered-default)}.btn.patch[disabled],.btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-default);color:var(--px-color-txt-disabled-default)}button.link{background:none;border:none;text-decoration:underline;padding:0;cursor:pointer}button.link[disabled],button.link[aria-disabled=true]{cursor:default;pointer-events:none;color:var(--px-color-txt-disabled-default)}:host([inverted]) .btn:hover:not([disabled],[aria-disabled=true],.loading){border-color:var(--px-color-border-action-hover-inverted)}:host([inverted]) .btn:focus:not([disabled],[aria-disabled=true]){outline-color:var(--px-color-outline-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch){color:var(--px-color-txt-primary-default);background:var(--px-color-bg-action-primary-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch):hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[disabled],:host([inverted]) .btn:not(.secondary,.tertiary,.patch)[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn:not(.secondary,.tertiary,.patch).loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.secondary{color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.secondary:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.secondary[disabled],:host([inverted]) .btn.secondary[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.secondary.loading{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-primary-inverted);border-color:transparent}:host([inverted]) .btn.tertiary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary ::slotted(px-icon){background:var(--px-color-bg-action-secondary-inverted)}:host([inverted]) .btn.tertiary:hover:not([disabled],[aria-disabled=true],.loading) ::slotted(px-icon){background:transparent}:host([inverted]) .btn.tertiary[disabled],:host([inverted]) .btn.tertiary[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .btn.tertiary[disabled] ::slotted(px-icon),:host([inverted]) .btn.tertiary[aria-disabled=true] ::slotted(px-icon){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.tertiary.loading{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .btn.tertiary.loading ::slotted(px-spinner){background:var(--px-color-bg-action-disabled-inverted)}:host([inverted]) .btn.patch:hover:not([disabled],[aria-disabled=true],.loading){color:var(--px-color-txt-primary-inverted);background:var(--px-color-bg-action-hover-bordered-default-inverted)}:host([inverted]) .btn.patch[disabled],:host([inverted]) .btn.patch[aria-disabled=true]{background:var(--px-color-bg-action-disabled-inverted);color:var(--px-color-txt-disabled-inverted)}:host([inverted]) button.link[disabled],:host([inverted]) button.link[aria-disabled=true]{color:var(--px-color-txt-disabled-inverted)}@media only screen and (min-width: 768px){.btn{font-size:var(--px-text-size-base-tablet)}.btn:not(.secondary,.tertiary,.patch){min-height:var(--px-size-action-desktop)}.btn.secondary{min-height:var(--px-size-action-desktop)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-tablet);height:var(--px-icon-size-m-tablet)}}@media only screen and (min-width: 1441px){.btn{font-size:var(--px-text-size-base-desktop)}.btn:focus:not([disabled],[aria-disabled=true]){outline-offset:var(--px-offset);outline-width:var(--px-outline)}.btn.tertiary ::slotted(px-spinner){width:var(--px-icon-size-m-desktop);height:var(--px-icon-size-m-desktop)}}@keyframes anim-spinner{0%{transform:rotate(0)}to{transform:rotate(360deg)}}", h = ":host>*:first-child{--font-weight-light: 300;--font-weight-regular: 400;--font-weight-bold: 700;--font-weight-extrabold: 900}.color-inherit{color:inherit}.color-primary{color:var(--px-color-txt-primary-default)}.color-body{color:var(--px-color-txt-body-default)}.color-details{color:var(--px-color-txt-details-default)}.color-hover{color:var(--px-color-txt-hover-default)}.color-disabled{color:var(--px-color-txt-disabled-default)}.color-active{color:var(--px-color-txt-active-default)}.color-promo{color:var(--px-color-txt-promo-default)}.color-success{color:var(--px-color-txt-success-default)}.color-error{color:var(--px-color-txt-error-default)}.color-warning{color:var(--px-color-txt-warning-default)}.color-unlimited{color:var(--px-color-txt-unlimited-default)}:host([inverted]) .color-inherit{color:inherit}:host([inverted]) .color-primary{color:var(--px-color-txt-primary-inverted)}:host([inverted]) .color-body{color:var(--px-color-txt-body-inverted)}:host([inverted]) .color-details{color:var(--px-color-txt-details-inverted)}:host([inverted]) .color-hover{color:var(--px-color-txt-hover-inverted)}:host([inverted]) .color-disabled{color:var(--px-color-txt-disabled-inverted)}:host([inverted]) .color-active{color:var(--px-color-txt-active-inverted)}:host([inverted]) .color-promo{color:var(--px-color-txt-promo-inverted)}:host([inverted]) .color-success{color:var(--px-color-txt-success-inverted)}:host([inverted]) .color-error{color:var(--px-color-txt-error-inverted)}:host([inverted]) .color-warning{color:var(--px-color-txt-warning-inverted)}:host([inverted]) .color-unlimited{color:var(--px-color-txt-unlimited-inverted)}.fontsize-inherit{font-size:inherit;line-height:inherit}.fontsize-xs{font-size:var(--px-text-size-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile);line-height:var(--px-line-height-s)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile);line-height:var(--px-line-height-s)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile);line-height:var(--px-line-height-s)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile);line-height:var(--px-line-height-s)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile);line-height:var(--px-line-height-s)}@media only screen and (min-width: 768px){.fontsize-xs{font-size:var(--px-text-size-xs-mobile)}.fontsize-s{font-size:var(--px-text-size-s-mobile)}.fontsize-base{font-size:var(--px-text-size-base-mobile)}.fontsize-m{font-size:var(--px-text-size-m-mobile)}.fontsize-l{font-size:var(--px-text-size-l-mobile)}.fontsize-xl{font-size:var(--px-text-size-xl-mobile)}.fontsize-2xl{font-size:var(--px-text-size-2xl-mobile)}.fontsize-3xl{font-size:var(--px-text-size-3xl-mobile)}.fontsize-4xl{font-size:var(--px-text-size-4xl-mobile)}.fontsize-5xl{font-size:var(--px-text-size-5xl-mobile)}.fontsize-6xl{font-size:var(--px-text-size-6xl-mobile)}.fontsize-7xl{font-size:var(--px-text-size-7xl-mobile)}}@media only screen and (min-width: 1025px){.fontsize-xs{font-size:var(--px-text-size-xs-tablet)}.fontsize-s{font-size:var(--px-text-size-s-tablet)}.fontsize-base{font-size:var(--px-text-size-base-tablet)}.fontsize-m{font-size:var(--px-text-size-m-tablet)}.fontsize-l{font-size:var(--px-text-size-l-tablet)}.fontsize-xl{font-size:var(--px-text-size-xl-tablet)}.fontsize-2xl{font-size:var(--px-text-size-2xl-tablet)}.fontsize-3xl{font-size:var(--px-text-size-3xl-tablet)}.fontsize-4xl{font-size:var(--px-text-size-4xl-tablet)}.fontsize-5xl{font-size:var(--px-text-size-5xl-tablet)}.fontsize-6xl{font-size:var(--px-text-size-6xl-tablet)}.fontsize-7xl{font-size:var(--px-text-size-7xl-tablet)}}@media only screen and (min-width: 1441px){.fontsize-xs{font-size:var(--px-text-size-xs-desktop)}.fontsize-s{font-size:var(--px-text-size-s-desktop)}.fontsize-base{font-size:var(--px-text-size-base-desktop)}.fontsize-m{font-size:var(--px-text-size-m-desktop)}.fontsize-l{font-size:var(--px-text-size-l-desktop)}.fontsize-xl{font-size:var(--px-text-size-xl-desktop)}.fontsize-2xl{font-size:var(--px-text-size-2xl-desktop)}.fontsize-3xl{font-size:var(--px-text-size-3xl-desktop)}.fontsize-4xl{font-size:var(--px-text-size-4xl-desktop)}.fontsize-5xl{font-size:var(--px-text-size-5xl-desktop)}.fontsize-6xl{font-size:var(--px-text-size-6xl-desktop)}.fontsize-7xl{font-size:var(--px-text-size-7xl-desktop)}}.fontweight-inherit{font-weight:inherit}.fontweight-normal{font-weight:var(--font-weight-regular)}.fontweight-bold{font-weight:var(--font-weight-bold)}.fontweight-extrabold{font-weight:var(--font-weight-extrabold)}.fontweight-light{font-weight:var(--font-weight-light)}", n = new CSSStyleSheet(), s = new CSSStyleSheet(), l = new CSSStyleSheet();
3
+ n.replaceSync(p);
4
+ s.replaceSync(v);
5
+ l.replaceSync(h);
6
6
  const f = [
7
7
  "link",
8
8
  "no-style",
@@ -10,9 +10,9 @@ const f = [
10
10
  "btn-default",
11
11
  "btn-secondary",
12
12
  "btn-tertiary"
13
- ], i = class i extends d {
13
+ ], a = class a extends d {
14
14
  constructor() {
15
- super(a, n, s), this.shapeValues = ["", "default", "alternative"], this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
15
+ super(n, s, l), this.shapeValues = ["", "default", "alternative"], this.template = () => '<slot name="before"></slot><slot></slot><slot name="after"></slot>';
16
16
  const t = document.createElement(this.nativeName);
17
17
  t.innerHTML = this.template(), this.shadowRoot.appendChild(t);
18
18
  }
@@ -29,53 +29,15 @@ const f = [
29
29
  "fontweight"
30
30
  ];
31
31
  }
32
- get disabled() {
33
- return this.getAttribute("disabled");
34
- }
35
- set disabled(t) {
36
- this.setAttribute("disabled", t);
37
- }
38
- get variant() {
39
- return this.getAttribute("variant");
40
- }
41
- set variant(t) {
42
- this.setAttribute("variant", t);
43
- }
44
- get shape() {
45
- return this.getAttribute("shape");
46
- }
47
- set shape(t) {
48
- this.setAttribute("shape", t);
49
- }
50
- get extended() {
51
- return this.getAttribute("extended");
52
- }
53
- set extended(t) {
54
- this.setAttribute("extended", t);
55
- }
56
- get inverted() {
57
- return this.getAttribute("inverted");
58
- }
59
- set inverted(t) {
60
- this.setAttribute("inverted", t);
61
- }
62
- get fontsize() {
63
- return this.getAttribute("fontsize");
64
- }
65
- set fontsize(t) {
66
- this.setAttribute("fontsize", t);
67
- }
68
- get color() {
69
- return this.getAttribute("color");
70
- }
71
- set color(t) {
72
- this.setAttribute("color", t);
73
- }
74
- get fontweight() {
75
- return this.getAttribute("fontweight");
76
- }
77
- set fontweight(t) {
78
- this.setAttribute("fontweight", t);
32
+ connectedCallback() {
33
+ super.connectedCallback();
34
+ const t = this.querySelectorAll("px-icon");
35
+ t && t.forEach((e) => {
36
+ const o = e.getAttribute("size"), r = e.getAttribute("color");
37
+ e && (e.addEventListener("click", () => {
38
+ this.$el.focus();
39
+ }), o || e.setAttribute("size", "xs"), r || e.setAttribute("color", "inherit"));
40
+ });
79
41
  }
80
42
  attributeChangedCallback(t, e, o) {
81
43
  if (e !== o)
@@ -123,14 +85,62 @@ const f = [
123
85
  updateShape(t, e) {
124
86
  t !== null && t !== "" && t !== "default" && this._toggleClassList(t), e !== null && e !== "" && e !== "default" && this._toggleClassList(e), this.checkName(this.shapeValues, e) || console.error(`Bad "shape" value for ${this.$el}`);
125
87
  }
126
- updateTypography(t, e, o, l) {
127
- e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), o !== null && o !== "" && o !== "default" && this.$el.classList.toggle(`${t}-${o}`), this.checkName(l, o) || console.error(`Bad ${t} value for ${this.$el}`);
88
+ updateTypography(t, e, o, r) {
89
+ e !== null && e !== "" && e !== "default" && this.$el.classList.toggle(`${t}-${e}`), o !== null && o !== "" && o !== "default" && this.$el.classList.toggle(`${t}-${o}`), this.checkName(r, o) || console.error(`Bad ${t} value for ${this.$el}`);
90
+ }
91
+ get disabled() {
92
+ return this.getAttribute("disabled");
93
+ }
94
+ set disabled(t) {
95
+ this.setAttribute("disabled", t);
96
+ }
97
+ get variant() {
98
+ return this.getAttribute("variant");
99
+ }
100
+ set variant(t) {
101
+ this.setAttribute("variant", t);
102
+ }
103
+ get shape() {
104
+ return this.getAttribute("shape");
105
+ }
106
+ set shape(t) {
107
+ this.setAttribute("shape", t);
108
+ }
109
+ get extended() {
110
+ return this.getAttribute("extended");
111
+ }
112
+ set extended(t) {
113
+ this.setAttribute("extended", t);
114
+ }
115
+ get inverted() {
116
+ return this.getAttribute("inverted");
117
+ }
118
+ set inverted(t) {
119
+ this.setAttribute("inverted", t);
120
+ }
121
+ get fontsize() {
122
+ return this.getAttribute("fontsize");
123
+ }
124
+ set fontsize(t) {
125
+ this.setAttribute("fontsize", t);
126
+ }
127
+ get color() {
128
+ return this.getAttribute("color");
129
+ }
130
+ set color(t) {
131
+ this.setAttribute("color", t);
132
+ }
133
+ get fontweight() {
134
+ return this.getAttribute("fontweight");
135
+ }
136
+ set fontweight(t) {
137
+ this.setAttribute("fontweight", t);
128
138
  }
129
139
  };
130
- i.nativeName = "a";
131
- let r = i;
132
- customElements.get("px-a") || customElements.define("px-a", r);
140
+ a.nativeName = "a";
141
+ let i = a;
142
+ customElements.get("px-a") || customElements.define("px-a", i);
133
143
  export {
134
- r as Link,
144
+ i as Link,
135
145
  f as variantValues
136
146
  };
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@proximus/lavender-link",
3
- "version": "1.2.0-alpha.37",
3
+ "version": "1.2.0-alpha.38",
4
4
  "description": "",
5
5
  "main": "dist/index.js",
6
6
  "exports": {
@@ -24,7 +24,7 @@
24
24
  "publishConfig": {
25
25
  "access": "public"
26
26
  },
27
- "gitHead": "bb7c2b2e1e478cb3b77c3b4d3b5dd719aa9ffff8",
27
+ "gitHead": "7fefc8f9740b75391e6a52c9f54b6ef9cc6c8a0a",
28
28
  "lerna": {
29
29
  "command": {
30
30
  "publish": {