@uplynk/lynk-design 1.16.0 → 1.17.1

package/cdn/chunks/chunk.X2MENHG7.js

@@ -0,0 +1,339 @@
+import{a as r}from"./chunk.QRMWQQRW.js";var e=r`
+  :host {
+    --grid-width: 280px;
+    --grid-height: 200px;
+    --grid-handle-size: 16px;
+    --slider-height: 15px;
+    --slider-handle-size: 17px;
+    --swatch-size: 25px;
+
+    display: inline-block;
+  }
+
+  .color-picker {
+    width: var(--grid-width);
+    font-family: var(--lynk-font-sans);
+    font-size: var(--lynk-font-size-medium);
+    font-weight: var(--lynk-font-weight-normal);
+    color: var(--color);
+    background-color: var(--lynk-panel-background-color);
+    border-radius: var(--lynk-border-radius-medium);
+    user-select: none;
+    -webkit-user-select: none;
+  }
+
+  .color-picker--inline {
+    border: solid var(--lynk-panel-border-width) var(--lynk-panel-border-color);
+  }
+
+  .color-picker--inline:focus-visible {
+    outline: var(--lynk-focus-ring);
+    outline-offset: var(--lynk-focus-ring-offset);
+  }
+
+  .color-picker__grid {
+    position: relative;
+    height: var(--grid-height);
+    background-image:
+      linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%),
+      linear-gradient(to right, #fff 0%, rgba(255, 255, 255, 0) 100%);
+    border-top-left-radius: var(--lynk-border-radius-medium);
+    border-top-right-radius: var(--lynk-border-radius-medium);
+    cursor: crosshair;
+    forced-color-adjust: none;
+  }
+
+  .color-picker__grid-handle {
+    position: absolute;
+    width: var(--grid-handle-size);
+    height: var(--grid-handle-size);
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+    border: solid 2px white;
+    margin-top: calc(var(--grid-handle-size) / -2);
+    margin-left: calc(var(--grid-handle-size) / -2);
+    transition: var(--lynk-transition-fast) scale;
+  }
+
+  .color-picker__grid-handle--dragging {
+    cursor: none;
+    scale: 1.5;
+  }
+
+  .color-picker__grid-handle:focus-visible {
+    outline: var(--lynk-focus-ring);
+  }
+
+  .color-picker__controls {
+    padding: var(--lynk-spacing-small);
+    display: flex;
+    align-items: center;
+  }
+
+  .color-picker__sliders {
+    flex: 1 1 auto;
+  }
+
+  .color-picker__slider {
+    position: relative;
+    height: var(--slider-height);
+    border-radius: var(--lynk-border-radius-pill);
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+    forced-color-adjust: none;
+  }
+
+  .color-picker__slider:not(:last-of-type) {
+    margin-bottom: var(--lynk-spacing-small);
+  }
+
+  .color-picker__slider-handle {
+    position: absolute;
+    top: calc(50% - var(--slider-handle-size) / 2);
+    width: var(--slider-handle-size);
+    height: var(--slider-handle-size);
+    background-color: white;
+    border-radius: 50%;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.25);
+    margin-left: calc(var(--slider-handle-size) / -2);
+  }
+
+  .color-picker__slider-handle:focus-visible {
+    outline: var(--lynk-focus-ring);
+  }
+
+  .color-picker__hue {
+    background-image: linear-gradient(
+      to right,
+      rgb(255, 0, 0) 0%,
+      rgb(255, 255, 0) 17%,
+      rgb(0, 255, 0) 33%,
+      rgb(0, 255, 255) 50%,
+      rgb(0, 0, 255) 67%,
+      rgb(255, 0, 255) 83%,
+      rgb(255, 0, 0) 100%
+    );
+  }
+
+  .color-picker__alpha .color-picker__alpha-gradient {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+  }
+
+  .color-picker__preview {
+    flex: 0 0 auto;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+    width: 2.25rem;
+    height: 2.25rem;
+    border: none;
+    border-radius: var(--lynk-border-radius-circle);
+    background: none;
+    margin-left: var(--lynk-spacing-small);
+    cursor: copy;
+    forced-color-adjust: none;
+  }
+
+  .color-picker__preview:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.2);
+
+    /* We use a custom property in lieu of currentColor because of https://bugs.webkit.org/show_bug.cgi?id=216780 */
+    background-color: var(--preview-color);
+  }
+
+  .color-picker__preview:focus-visible {
+    outline: var(--lynk-focus-ring);
+    outline-offset: var(--lynk-focus-ring-offset);
+  }
+
+  .color-picker__preview-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: solid 1px rgba(0, 0, 0, 0.125);
+  }
+
+  .color-picker__preview-color--copied {
+    animation: pulse 0.75s;
+  }
+
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--lynk-color-primary-500);
+    }
+    70% {
+      box-shadow: 0 0 0 0.5rem transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+
+  .color-picker__user-input {
+    display: flex;
+    gap: 8px;
+    padding: 0 var(--lynk-spacing-small) var(--lynk-spacing-small) var(--lynk-spacing-small);
+  }
+
+  .color-picker__user-input sl-input {
+    min-width: 0; /* fix input width in Safari */
+    flex: 1 1 auto;
+  }
+
+  .color-picker__user-input sl-button-group {
+    margin-left: var(--lynk-spacing-small);
+  }
+
+  .color-picker__user-input sl-button {
+    min-width: 3.25rem;
+    max-width: 3.25rem;
+    font-size: 1rem;
+  }
+
+  .color-picker__swatches {
+    display: grid;
+    grid-template-columns: repeat(8, 1fr);
+    grid-gap: 0.5rem;
+    justify-items: center;
+    border-top: solid 1px var(--lynk-color-neutral-200);
+    padding: var(--lynk-spacing-small);
+    forced-color-adjust: none;
+  }
+
+  .color-picker__swatch {
+    position: relative;
+    width: var(--swatch-size);
+    height: var(--swatch-size);
+    border-radius: var(--lynk-border-radius-small);
+  }
+
+  .color-picker__swatch .color-picker__swatch-color {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border: solid 1px rgba(0, 0, 0, 0.125);
+    border-radius: inherit;
+    cursor: pointer;
+  }
+
+  .color-picker__swatch:focus-visible {
+    outline: var(--lynk-focus-ring);
+    outline-offset: var(--lynk-focus-ring-offset);
+  }
+
+  .color-picker__transparent-bg {
+    background-image:
+      linear-gradient(45deg, var(--lynk-color-neutral-300) 25%, transparent 25%),
+      linear-gradient(45deg, transparent 75%, var(--lynk-color-neutral-300) 75%),
+      linear-gradient(45deg, transparent 75%, var(--lynk-color-neutral-300) 75%),
+      linear-gradient(45deg, var(--lynk-color-neutral-300) 25%, transparent 25%);
+    background-size: 10px 10px;
+    background-position:
+      0 0,
+      0 0,
+      -5px -5px,
+      5px 5px;
+  }
+
+  .color-picker--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .color-picker--disabled .color-picker__grid,
+  .color-picker--disabled .color-picker__grid-handle,
+  .color-picker--disabled .color-picker__slider,
+  .color-picker--disabled .color-picker__slider-handle,
+  .color-picker--disabled .color-picker__preview,
+  .color-picker--disabled .color-picker__swatch,
+  .color-picker--disabled .color-picker__swatch-color {
+    pointer-events: none;
+  }
+
+  /*
+   * Color dropdown
+   */
+
+  .color-dropdown::part(panel) {
+    max-height: none;
+    background-color: var(--lynk-panel-background-color);
+    border: solid var(--lynk-panel-border-width) var(--lynk-panel-border-color);
+    border-radius: var(--lynk-border-radius-medium);
+    overflow: visible;
+  }
+
+  .color-dropdown__trigger {
+    display: inline-block;
+    position: relative;
+    background-color: transparent;
+    border: none;
+    cursor: pointer;
+    forced-color-adjust: none;
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--small {
+    width: var(--lynk-input-height-small);
+    height: var(--lynk-input-height-small);
+    border-radius: var(--lynk-border-radius-circle);
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--medium {
+    width: var(--lynk-input-height-medium);
+    height: var(--lynk-input-height-medium);
+    border-radius: var(--lynk-border-radius-circle);
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--large {
+    width: var(--lynk-input-height-large);
+    height: var(--lynk-input-height-large);
+    border-radius: var(--lynk-border-radius-circle);
+  }
+
+  .color-dropdown__trigger:before {
+    content: '';
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    border-radius: inherit;
+    background-color: currentColor;
+    box-shadow:
+      inset 0 0 0 2px var(--lynk-input-border-color),
+      inset 0 0 0 4px var(--lynk-color-neutral-0);
+  }
+
+  .color-dropdown__trigger--empty:before {
+    background-color: transparent;
+  }
+
+  .color-dropdown__trigger:focus-visible {
+    outline: none;
+  }
+
+  .color-dropdown__trigger:focus-visible:not(.color-dropdown__trigger--disabled) {
+    outline: var(--lynk-focus-ring);
+    outline-offset: var(--lynk-focus-ring-offset);
+  }
+
+  .color-dropdown__trigger.color-dropdown__trigger--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+`;export{e as a};

package/cdn/chunks/chunk.X63HEDFM.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.MJVOGND5.js";import*as t from"react";import{createComponent as a}from"@lit/react";var n="lynk-visually-hidden";e.define("lynk-visually-hidden");var o=a({tagName:n,elementClass:e,react:t,events:{},displayName:"LynkVisuallyHidden"}),i=o;export{i as a};

package/cdn/chunks/chunk.X7EJ2E5D.js

@@ -0,0 +1,79 @@
+import{a as o}from"./chunk.QRMWQQRW.js";var r=o`
+  :host {
+    display: table-cell;
+    --state-color: transparent;
+    --state-color-b: transparent;
+    background: transparent;
+    vertical-align: middle;
+    padding: var(--lynk-spacing-x-small) var(--lynk-spacing-base);
+  }
+
+  :host([state='danger']) {
+    --state-color: var(--lynk-color-danger-50);
+    --state-color-b: var(--lynk-color-danger-a10);
+  }
+
+  :host([state='primary']) {
+    --state-color: var(--lynk-color-primary-50);
+    --state-color-b: var(--lynk-color-primary-a10);
+  }
+
+  :host([state='accent']) {
+    --state-color: var(--lynk-color-accent-50);
+    --state-color-b: var(--lynk-color-accent-a10);
+  }
+
+  :host([state='success']) {
+    --state-color: var(--lynk-color-success-50);
+    --state-color-b: var(--lynk-color-success-a10);
+  }
+
+  :host([state='warning']) {
+    --state-color: var(--lynk-color-warning-a25);
+    --state-color-b: var(--lynk-color-warning-a10);
+  }
+
+  :host([state='neutral']) {
+    --state-color: var(--lynk-color-neutral-50);
+    --state-color-b: var(--lynk-color-neutral-100);
+  }
+
+  :host([state='info']) {
+    --state-color: var(--lynk-color-info-a25);
+    --state-color-b: var(--lynk-color-info-a10);
+  }
+
+  :host([state]) {
+    background: var(--state-color);
+  }
+
+  :host([barberpole]) {
+    background: linear-gradient(
+        -45deg,
+        var(--state-color) 25%,
+        var(--state-color-b) 25%,
+        var(--state-color-b) 50%,
+        var(--state-color) 50%,
+        var(--state-color) 75%,
+        var(--state-color-b) 75%,
+        var(--state-color-b)
+      )
+      var(--state-color);
+    background-size: 40px 40px;
+    animation: barberpole 1.5s linear infinite;
+  }
+
+  ::slotted(lynk-checkbox) {
+    top: -1px;
+    position: relative;
+  }
+
+  @keyframes barberpole {
+    from {
+      background-position: 0 0;
+    }
+    to {
+      background-position: 40px 40px;
+    }
+  }
+`;export{r as a};

package/cdn/chunks/chunk.XDCF5DPL.js

@@ -0,0 +1,62 @@
+import{a as k}from"./chunk.R3PTYLJ2.js";import{a as T}from"./chunk.ALHVMVDH.js";import{a as D}from"./chunk.W6EAZYFO.js";import{a as u}from"./chunk.KLRPP4NQ.js";import{a as p,c as h}from"./chunk.VDJQBFEB.js";import{a as d,c}from"./chunk.DCN42ZX4.js";import{a as E}from"./chunk.Q3J7P2MZ.js";import{a as m}from"./chunk.ZP7BBHMJ.js";import{a as w}from"./chunk.YHSYTTFF.js";import{a as v}from"./chunk.YZSIY5HS.js";import{a as g}from"./chunk.3RH6CRTR.js";import{a as n,d as l,g as b}from"./chunk.QSZ5VYWE.js";import{a as y}from"./chunk.45RIPFQU.js";import{d as r}from"./chunk.QRMWQQRW.js";import{e as o}from"./chunk.FI4IKBIW.js";var t=class extends b{constructor(){super(...arguments);this.hasSlotController=new w(this,"footer");this.localize=new E(this);this.open=!1;this.label="";this.noHeader=!1;this.noArrow=!1;this.clickToHide=!1;this.placement="right";this.disabled=!1;this.distance=10;this.skidding=0;this.block=!1;this.hoist=!1}connectedCallback(){super.connectedCallback(),this.handleKeyDown=this.handleKeyDown.bind(this),this.handleDocumentKeyDown=this.handleDocumentKeyDown.bind(this),this.handleDocumentMouseDown=this.handleDocumentMouseDown.bind(this),this.containingElement||(this.containingElement=this)}firstUpdated(){this.panel.hidden=!this.open,this.open&&(this.addOpenListeners(),this.popup.active=!0)}disconnectedCallback(){super.disconnectedCallback(),this.removeOpenListeners(),this.hide()}focusOnTrigger(){let e=this.trigger.assignedElements({flatten:!0})[0];typeof(e==null?void 0:e.focus)=="function"&&e.focus()}handleKeyDown(e){this.open&&e.key==="Escape"&&(e.stopPropagation(),this.hide(),this.focusOnTrigger())}handleDocumentKeyDown(e){e.key==="Tab"&&setTimeout(()=>{var s,a,f;let i=((s=this.containingElement)==null?void 0:s.getRootNode())instanceof ShadowRoot?(f=(a=document.activeElement)==null?void 0:a.shadowRoot)==null?void 0:f.activeElement:document.activeElement;(!this.containingElement||(i==null?void 0:i.closest(this.containingElement.tagName.toLowerCase()))!==this.containingElement)&&this.hide()})}handleDocumentMouseDown(e){let i=e.composedPath();this.clickToHide&&this.containingElement&&!i.includes(this.containingElement)&&this.hide()}handleTriggerClick(){this.open?this.hide():this.show()}handleTriggerKeyDown(e){if(e.key==="Escape"&&this.open){e.stopPropagation(),this.focusOnTrigger(),this.hide();return}[" ","Enter"].includes(e.key)&&(e.target.tagName.toLowerCase()==="lynk-input"||e.preventDefault(),this.handleTriggerClick())}handleTriggerKeyUp(e){e.key===" "&&e.preventDefault()}handleTriggerSlotChange(){this.updateAccessibleTrigger()}updateAccessibleTrigger(){let i=this.trigger.assignedElements({flatten:!0}).find(a=>T(a).start),s;if(i){switch(i.tagName.toLowerCase()){case"lynk-button":case"lynk-icon-button":s=i.button;break;default:s=i}s.setAttribute("aria-haspopup","true"),s.setAttribute("aria-expanded",this.open?"true":"false")}}async show(){if(!this.open)return this.open=!0,u(this,"ev-after-show")}async hide(){var i;if(!this.open)return;let{activeElement:e}=document;return e&&this.contains(e)&&((i=document.activeElement)==null||i.blur()),this.open=!1,u(this,"ev-after-hide")}reposition(){this.popup.reposition()}addOpenListeners(){this.panel.addEventListener("keydown",this.handleKeyDown),document.addEventListener("keydown",this.handleDocumentKeyDown),document.addEventListener("mousedown",this.handleDocumentMouseDown)}removeOpenListeners(){this.panel&&this.panel.removeEventListener("keydown",this.handleKeyDown),document.removeEventListener("keydown",this.handleDocumentKeyDown),document.removeEventListener("mousedown",this.handleDocumentMouseDown)}async handleOpenChange(){if(this.disabled){this.open=!1;return}if(this.updateAccessibleTrigger(),this.open){this.emit("ev-show"),this.addOpenListeners();let e=this.querySelector("[autofocus]");e&&e.removeAttribute("autofocus"),await h(this),this.panel.hidden=!1,this.popup.active=!0;let{keyframes:i,options:s}=c(this,"popover.show",{dir:this.localize.dir()});await p(this.popup.popup,i,s),e&&(e.focus({preventScroll:!0}),e.setAttribute("autofocus","")),this.emit("ev-after-show")}else{this.emit("ev-hide"),this.removeOpenListeners(),await h(this);let{keyframes:e,options:i}=c(this,"popover.hide",{dir:this.localize.dir()});await p(this.popup.popup,e,i),this.panel.hidden=!0,this.popup.active=!1,this.emit("ev-after-hide")}}render(){return r`
+      <lynk-popup
+        part="base"
+        id="popover"
+        placement=${this.placement}
+        distance=${this.distance}
+        skidding=${this.skidding}
+        strategy=${this.hoist?"fixed":"absolute"}
+        flip
+        shift
+        ?arrow=${!this.noArrow}
+        auto-size="vertical"
+        auto-size-padding="10"
+        class=${g({popover:!0,"popover--open":this.open,"popover--has-footer":this.hasSlotController.test("footer")})}
+      >
+        <slot
+          name="trigger"
+          slot="anchor"
+          part="trigger"
+          class="popover__trigger"
+          @click=${this.handleTriggerClick}
+          @keydown=${this.handleTriggerKeyDown}
+          @keyup=${this.handleTriggerKeyUp}
+          @slotchange=${this.handleTriggerSlotChange}
+        ></slot>
+
+        <div
+          part="panel"
+          class="popover__panel"
+          role="popover"
+          aria-hidden=${this.open?"false":"true"}
+          aria-label=${m(this.noHeader?this.label:void 0)}
+          aria-labelledby=${m(this.noHeader?void 0:"title")}
+          tabindex="0"
+        >
+          ${this.noHeader?"":r`
+                <header part="header" class="popover__header">
+                  <h2 part="title" class="popover__title" id="title">
+                    <slot name="label"> ${this.label.length>0?this.label:"\uFEFF"} </slot>
+                  </h2>
+                  <lynk-icon-button
+                    part="close-button"
+                    exportparts="base:close-button__base"
+                    class="popover__close"
+                    name="x-lg"
+                    label=${this.localize.term("close")}
+                    library="system"
+                    @click="${()=>this.hide()}"
+                  ></lynk-icon-button>
+                </header>
+              `}
+
+          <slot part="body" class="popover__body"></slot>
+
+          ${this.hasSlotController.test("footer")?r`
+                <footer part="footer" class="popover__footer">
+                  <slot name="footer"></slot>
+                </footer>
+              `:""}
+        </div>
+      </lynk-popup>
+    `}};t.styles=[y,k],t.dependencies={"lynk-popup":D},o([l(".popover")],t.prototype,"popup",2),o([l(".popover__trigger")],t.prototype,"trigger",2),o([l(".popover__panel")],t.prototype,"panel",2),o([n({type:Boolean,reflect:!0})],t.prototype,"open",2),o([n({reflect:!0})],t.prototype,"label",2),o([n({attribute:"no-header",type:Boolean,reflect:!0})],t.prototype,"noHeader",2),o([n({attribute:"no-arrow",type:Boolean,reflect:!0})],t.prototype,"noArrow",2),o([n({attribute:"click-to-hide",type:Boolean,reflect:!0})],t.prototype,"clickToHide",2),o([n({reflect:!0})],t.prototype,"placement",2),o([n({type:Boolean,reflect:!0})],t.prototype,"disabled",2),o([n({attribute:!1})],t.prototype,"containingElement",2),o([n({type:Number})],t.prototype,"distance",2),o([n({type:Number})],t.prototype,"skidding",2),o([n({type:Boolean,reflect:!0})],t.prototype,"block",2),o([n({type:Boolean})],t.prototype,"hoist",2),o([v("open",{waitUntilFirstUpdate:!0})],t.prototype,"handleOpenChange",1);d("popover.show",{keyframes:[{opacity:0,scale:.9},{opacity:1,scale:1}],options:{duration:100,easing:"ease"}});d("popover.hide",{keyframes:[{opacity:1,scale:1},{opacity:0,scale:.9}],options:{duration:100,easing:"ease"}});export{t as a};

package/cdn/chunks/chunk.XIIEV3UL.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.DIWW2QEU.js";import*as r from"react";import{createComponent as o}from"@lit/react";var t="lynk-progress-ring";e.define("lynk-progress-ring");var n=o({tagName:t,elementClass:e,react:r,events:{},displayName:"LynkProgressRing"}),m=n;export{m as a};

package/cdn/chunks/chunk.XKSB6ZES.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.7OE3JRGP.js";import*as t from"react";import{createComponent as o}from"@lit/react";var r="lynk-auto-grid";e.define("lynk-auto-grid");var a=o({tagName:r,elementClass:e,react:t,events:{},displayName:"LynkAutoGrid"}),p=a;export{p as a};

package/cdn/chunks/chunk.XVPW7RK3.js

@@ -0,0 +1,84 @@
+import{a as r}from"./chunk.QRMWQQRW.js";var a=r`
+  :host {
+    display: inline-flex;
+    --background-color: var(--lynk-color-primary-600);
+    --color: var(--lynk-color-neutral-0);
+    --pulse-speed: 1.5s;
+  }
+
+  .badge {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--lynk-font-size-small);
+    font-weight: var(--lynk-font-weight-semibold);
+    letter-spacing: var(--lynk-letter-spacing-normal);
+    line-height: 1;
+    border-radius: var(--lynk-border-radius-small);
+    border: solid 1px var(--lynk-color-neutral-0);
+    white-space: nowrap;
+    padding: 3px 6px;
+    user-select: none;
+    background-color: var(--background-color);
+    color: var(--color);
+    cursor: inherit;
+  }
+
+  /* Variant modifiers */
+  .badge.badge--primary {
+    --background-color: var(--lynk-color-primary-600);
+    --color: var(--lynk-color-neutral-0);
+  }
+
+  .badge.badge--accent {
+    --background-color: var(--lynk-color-accent-600);
+    --color: var(--lynk-color-neutral-0);
+  }
+
+  .badge.badge--success {
+    --background-color: var(--lynk-color-success-600);
+    --color: var(--lynk-color-neutral-0);
+  }
+
+  .badge.badge--neutral {
+    --background-color: var(--lynk-color-neutral-600);
+    --color: var(--lynk-color-neutral-0);
+  }
+
+  .badge.badge--warning {
+    --background-color: var(--lynk-color-warning-600);
+    --color: var(--lynk-color-neutral-0);
+  }
+
+  .badge.badge--danger {
+    --background-color: var(--lynk-color-danger-600);
+    --color: var(--lynk-color-neutral-0);
+  }
+
+  .badge.badge--info {
+    --background-color: var(--lynk-color-info-600);
+    --color: var(--lynk-color-neutral-0);
+  }
+
+  /* Pill modifier */
+  .badge--pill {
+    border-radius: var(--lynk-border-radius-pill);
+  }
+
+  /* Pulse modifier */
+  .badge--pulse {
+    animation: pulse var(--pulse-speed) infinite;
+  }
+
+  @keyframes pulse {
+    0% {
+      box-shadow: 0 0 0 0 var(--background-color);
+    }
+    70% {
+      box-shadow: 0 0 0 0.5rem transparent;
+    }
+    100% {
+      box-shadow: 0 0 0 0 transparent;
+    }
+  }
+`;export{a};