@nasa-terra/components 0.0.189 → 0.0.192

package/dist/chunks/chunk.LFEM3FJX.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.MBFAWLMY.js";var l=e;e.define("terra-skeleton");export{l as a};

package/dist/chunks/chunk.LGVT3U7Z.js

@@ -0,0 +1,104 @@
+import{css as r}from"lit";var i=r`
+    :host {
+        --height: 1rem;
+        --track-color: var(--terra-color-neutral-200);
+        --indicator-color: var(--terra-color-bg-info-bold);
+        --label-color: var(--terra-color-spacesuit-white);
+
+        display: block;
+    }
+
+    .progress-bar {
+        position: relative;
+        background-color: var(--track-color);
+        height: var(--height);
+        border-radius: 999px;
+        box-shadow: inset var(--terra-shadow-small);
+        overflow: hidden;
+    }
+
+    .progress-bar__indicator {
+        height: 100%;
+        font-family: var(--terra-font-family--inter);
+        font-size: 12px;
+        font-weight: var(--terra-font-weight-normal);
+        background-color: var(--indicator-color);
+        color: var(--label-color);
+        text-align: center;
+        line-height: var(--height);
+        white-space: nowrap;
+        overflow: hidden;
+        transition:
+            400ms width,
+            400ms background-color;
+        user-select: none;
+        -webkit-user-select: none;
+    }
+
+    /* Variant modifiers */
+    .progress-bar--primary .progress-bar__indicator {
+        background-color: var(--terra-color-bg-info-bold);
+    }
+
+    .progress-bar--success .progress-bar__indicator {
+        background-color: var(--terra-color-bg-success-bold);
+    }
+
+    .progress-bar--warning .progress-bar__indicator {
+        background-color: var(--terra-color-bg-warning-bold);
+    }
+
+    .progress-bar--danger .progress-bar__indicator {
+        background-color: var(--terra-color-bg-error-bold);
+    }
+
+    .progress-bar--default .progress-bar__indicator {
+        background-color: var(--terra-color-bg-default-bold);
+    }
+
+    /* Indeterminate */
+    .progress-bar--indeterminate .progress-bar__indicator {
+        position: absolute;
+        animation: indeterminate 2.5s infinite cubic-bezier(0.37, 0, 0.63, 1);
+    }
+
+    .progress-bar--indeterminate.progress-bar--rtl .progress-bar__indicator {
+        animation-name: indeterminate-rtl;
+    }
+
+    @media (forced-colors: active) {
+        .progress-bar {
+            outline: solid 1px SelectedItem;
+            background-color: var(--terra-color-spacesuit-white);
+        }
+
+        .progress-bar__indicator {
+            outline: solid 1px SelectedItem;
+            background-color: SelectedItem;
+        }
+    }
+
+    @keyframes indeterminate {
+        0% {
+            left: -50%;
+            width: 50%;
+        }
+        75%,
+        100% {
+            left: 100%;
+            width: 50%;
+        }
+    }
+
+    @keyframes indeterminate-rtl {
+        0% {
+            right: -50%;
+            width: 50%;
+        }
+        75%,
+        100% {
+            right: 100%;
+            width: 50%;
+        }
+    }
+`;export{i as a};

package/dist/chunks/chunk.LH7RWUQZ.js

@@ -0,0 +1,24 @@
+import{a as r}from"./chunk.R2KZSJQZ.js";import{a as o}from"./chunk.I6BL3WPE.js";import{a}from"./chunk.J5Q4TWEG.js";import{a as i,b as s}from"./chunk.WEMSJJQN.js";import{e}from"./chunk.INFVQQSJ.js";import{classMap as d}from"lit/directives/class-map.js";import{html as n}from"lit";import{property as l,query as p}from"lit/decorators.js";var m=0,t=class extends s{constructor(){super(...arguments);this.attrId=++m;this.componentId=`terra-tab-${this.attrId}`;this.panel="";this.active=!1;this.closable=!1;this.disabled=!1;this.size="large";this.tabIndex=0}connectedCallback(){super.connectedCallback(),this.setAttribute("role","tab")}handleCloseClick(c){c.stopPropagation(),this.emit("terra-close")}handleActiveChange(){this.setAttribute("aria-selected",this.active?"true":"false")}handleDisabledChange(){this.setAttribute("aria-disabled",this.disabled?"true":"false"),this.disabled&&!this.active?this.tabIndex=-1:this.tabIndex=0}render(){return this.id=this.id.length>0?this.id:this.componentId,n`
+            <div
+                part="base"
+                class=${d({tab:!0,"tab--active":this.active,"tab--closable":this.closable,"tab--disabled":this.disabled,"tab--large":this.size==="large","tab--small":this.size==="small"})}
+            >
+                <slot></slot>
+                ${this.closable?n`
+                          <button
+                              part="close-button"
+                              class="tab__close-button"
+                              @click=${this.handleCloseClick}
+                              tabindex="-1"
+                              aria-label="Close tab"
+                              type="button"
+                          >
+                              <terra-icon
+                                  name="x-mark"
+                                  library="heroicons"
+                                  font-size="1rem"
+                              ></terra-icon>
+                          </button>
+                      `:""}
+            </div>
+        `}};t.styles=[i,r],t.dependencies={"terra-icon":o},e([p(".tab")],t.prototype,"tab",2),e([l({reflect:!0})],t.prototype,"panel",2),e([l({type:Boolean,reflect:!0})],t.prototype,"active",2),e([l({type:Boolean,reflect:!0})],t.prototype,"closable",2),e([l({type:Boolean,reflect:!0})],t.prototype,"disabled",2),e([l({reflect:!0})],t.prototype,"size",2),e([l({type:Number,reflect:!0})],t.prototype,"tabIndex",2),e([a("active")],t.prototype,"handleActiveChange",1),e([a("disabled")],t.prototype,"handleDisabledChange",1);export{t as a};

package/dist/chunks/chunk.LL6BEIZA.js

@@ -0,0 +1,5 @@
+import{a as r}from"./chunk.XJS3MPKP.js";import{a as l,b as o}from"./chunk.WEMSJJQN.js";import{e}from"./chunk.INFVQQSJ.js";import{property as a}from"lit/decorators.js";import{html as i}from"lit";var t=class extends o{constructor(){super(...arguments);this.ariaLabel="Breadcrumb";this.theme="light"}render(){return i`
+            <nav part="base nav" class="breadcrumbs" aria-label=${this.ariaLabel}>
+                <slot></slot>
+            </nav>
+        `}};t.styles=[l,r],e([a({attribute:"aria-label"})],t.prototype,"ariaLabel",2),e([a({reflect:!0})],t.prototype,"theme",2);export{t as a};

package/dist/chunks/chunk.LLZSYM64.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.IWQ6YFE2.js";import*as o from"react";import{createComponent as r}from"@lit/react";var t="terra-combobox";e.define("terra-combobox");var a=r({tagName:t,elementClass:e,react:o,events:{},displayName:"TerraCombobox"}),b=a;export{b as a};

package/dist/chunks/chunk.LM4RHNKJ.js

@@ -0,0 +1,30 @@
+import{a as n}from"./chunk.P5Z2X5RJ.js";import{a as m}from"./chunk.I6BL3WPE.js";import{a as s}from"./chunk.J5Q4TWEG.js";import{a as o,b as l}from"./chunk.WEMSJJQN.js";import{e}from"./chunk.INFVQQSJ.js";import{classMap as c}from"lit/directives/class-map.js";import{html as a}from"lit";import{property as r,state as d}from"lit/decorators.js";var i=class extends l{constructor(){super(...arguments);this.hasError=!1;this.image="";this.label="";this.initials="";this.loading="eager";this.shape="circle"}handleImageChange(){this.hasError=!1}handleImageLoadError(){this.hasError=!0,this.emit("terra-error")}render(){let h=a`
+            <img
+                part="image"
+                class="avatar__image"
+                src="${this.image}"
+                loading="${this.loading}"
+                alt=""
+                @error="${this.handleImageLoadError}"
+            />
+        `,t=a``;return this.initials?t=a`<div part="initials" class="avatar__initials">
+                ${this.initials}
+            </div>`:t=a`
+                <div part="icon" class="avatar__icon" aria-hidden="true">
+                    <slot name="icon">
+                        <terra-icon
+                            name="solid-user"
+                            library="heroicons"
+                        ></terra-icon>
+                    </slot>
+                </div>
+            `,a`
+            <div
+                part="base"
+                class=${c({avatar:!0,"avatar--circle":this.shape==="circle","avatar--rounded":this.shape==="rounded","avatar--square":this.shape==="square"})}
+                role="img"
+                aria-label=${this.label}
+            >
+                ${this.image&&!this.hasError?h:t}
+            </div>
+        `}};i.styles=[o,n],i.dependencies={"terra-icon":m},e([d()],i.prototype,"hasError",2),e([r()],i.prototype,"image",2),e([r()],i.prototype,"label",2),e([r()],i.prototype,"initials",2),e([r()],i.prototype,"loading",2),e([r({reflect:!0})],i.prototype,"shape",2),e([s("image")],i.prototype,"handleImageChange",1);export{i as a};

package/dist/chunks/chunk.LVWUQXWQ.js

@@ -0,0 +1 @@
+import{a as o}from"./chunk.IWQ6YFE2.js";var m=o;o.define("terra-combobox");export{m as a};

package/dist/chunks/chunk.MBFAWLMY.js

@@ -0,0 +1,9 @@
+import{a as l}from"./chunk.Z4MRB553.js";import{a as i}from"./chunk.ATR343ZS.js";import{a as r,b as o}from"./chunk.WEMSJJQN.js";import{e}from"./chunk.INFVQQSJ.js";import{html as p}from"lit";import{property as s}from"lit/decorators.js";var t=class extends o{constructor(){super(...arguments);this.rows=1;this.effect="pulse";this.variableWidths=!0}render(){return p`
+            ${new Array(parseInt(this.rows.toString())).fill(0).map(()=>p` <div
+                        part="base"
+                        class=${`skeleton ${this.effect==="pulse"?"skeleton--pulse":""} ${this.effect==="sheen"?"skeleton--sheen":""}`}
+                        style=${this.variableWidths?`width: ${l(60,100)}%`:""}
+                    >
+                        <div part="indicator" class="skeleton__indicator"></div>
+                    </div>`)}
+        `}};t.styles=[r,i],e([s()],t.prototype,"rows",2),e([s()],t.prototype,"effect",2),e([s({type:Boolean,reflect:!0})],t.prototype,"variableWidths",2);export{t as a};

package/dist/chunks/chunk.MDEHAIAG.js

@@ -0,0 +1 @@
+import{a as e}from"./chunk.UEIOQPHW.js";var g=e;e.define("terra-badge");export{g as a};

package/dist/chunks/chunk.MHPXMOJI.js

@@ -0,0 +1,134 @@
+import{css as o}from"lit";var e=o`
+    :host {
+        display: block;
+    }
+
+    /* Navbar container */
+    .navbar {
+        background-color: var(--terra-site-navigation-background);
+        font-family: Arial, sans-serif;
+    }
+
+    .nav-list {
+        list-style: none;
+        margin: 0;
+        padding: 0;
+        display: flex;
+    }
+
+    /* Links inside the navbar */
+    .navbar a {
+        display: block;
+        font-size: 16px;
+        color: white;
+        text-align: center;
+        padding: 14px 16px;
+        text-decoration: none;
+    }
+
+    /* Visible focus indicator */
+    .navbar a:focus,
+    .dropdown .dropbtn:focus {
+        outline: 3px solid #4a9eff;
+        outline-offset: -3px;
+    }
+
+    /* The dropdown container */
+    .dropdown {
+        position: relative;
+    }
+
+    /* Dropdown button */
+    .dropdown .dropbtn {
+        font-size: 16px;
+        border: none;
+        color: white;
+        padding: 14px 16px;
+        background-color: inherit;
+        font-family: inherit;
+        cursor: pointer;
+        display: block;
+    }
+
+    /* Show dropdown on hover OR when button has aria-expanded="true" */
+    .dropdown:hover .dropdown-content,
+    .dropdown .dropbtn[aria-expanded='true'] + .dropdown-content {
+        display: block;
+    }
+
+    /* Update button styling to show active state */
+    .dropdown:hover .dropbtn,
+    .dropdown .dropbtn[aria-expanded='true'] {
+        background-color: red;
+    }
+
+    /* Hover and focus states */
+    .navbar a:hover,
+    .navbar a:focus,
+    .dropdown .dropbtn:hover,
+    .dropdown .dropbtn:focus {
+        background-color: red;
+    }
+
+    /* Dropdown content (hidden by default) */
+    .dropdown-content {
+        display: none;
+        position: absolute;
+        background-color: #f9f9f9;
+        width: 100vw;
+        left: 50%;
+        transform: translateX(-50%);
+        box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
+        z-index: 1000;
+    }
+
+    /* Show dropdown when button has aria-expanded="true" */
+    .dropdown .dropbtn[aria-expanded='true'] + .dropdown-content {
+        display: block;
+    }
+
+    /* Mega Menu header */
+    .dropdown-content .header {
+        background: red;
+        padding: 16px;
+        color: white;
+    }
+
+    /* Columns */
+    .row {
+        display: flex;
+        gap: 0;
+    }
+
+    .column {
+        flex: 1;
+        padding: 10px;
+        background-color: #ccc;
+        min-height: 250px;
+    }
+
+    .column h3 {
+        margin-top: 0;
+        color: #333;
+    }
+
+    .column ul {
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    /* Links inside columns */
+    .column a {
+        color: black;
+        padding: 12px 16px;
+        text-decoration: none;
+        display: block;
+        text-align: left;
+    }
+
+    .column a:hover,
+    .column a:focus {
+        background-color: #ddd;
+    }
+`;export{e as a};

package/dist/chunks/chunk.MJILATWK.js

@@ -0,0 +1,132 @@
+import{css as r}from"lit";var i=r`
+    :host {
+        --width: fit-content;
+        --min-width: 20rem;
+        --max-width: calc(100% - var(--terra-spacing-2x-large));
+        --max-height: calc(100% - var(--terra-spacing-2x-large));
+        --header-spacing: var(--terra-spacing-large);
+        --body-spacing: var(--terra-spacing-large);
+        --footer-spacing: var(--terra-spacing-large);
+
+        display: contents;
+    }
+
+    .dialog {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        z-index: var(--terra-z-index-dialog);
+    }
+
+    .dialog__panel {
+        display: flex;
+        flex-direction: column;
+        z-index: 2;
+        width: var(--width);
+        min-width: var(--min-width);
+        max-width: var(--max-width);
+        max-height: var(--max-height);
+        background-color: var(--terra-dialog-background-color);
+        border-radius: var(--terra-border-radius-medium);
+        box-shadow: var(--terra-shadow-x-large);
+    }
+
+    .dialog__panel:focus {
+        outline: none;
+    }
+
+    /* Ensure there's enough vertical padding for phones that don't update vh when chrome appears (e.g. iPhone) */
+    @media screen and (max-width: 420px) {
+        .dialog__panel {
+            max-height: 80vh;
+        }
+    }
+
+    .dialog--open .dialog__panel {
+        display: flex;
+        opacity: 1;
+    }
+
+    .dialog__header {
+        border-color: var(--terra-container-dialog-header-border-color, #dee2e6);
+        border-style: var(--terra-container-dialog-header-border-style, solid none);
+        border-width: var(--terra-container-dialog-border-width, 0 0 1px 0);
+        flex: 0 0 auto;
+        display: flex;
+    }
+
+    .dialog__title {
+        flex: 1 1 auto;
+        font: inherit;
+        font-size: var(--terra-font-size-large);
+        line-height: var(--terra-line-height-dense);
+        padding: var(--header-spacing);
+        margin: 0;
+    }
+
+    .dialog__header-actions {
+        flex-shrink: 0;
+        display: flex;
+        flex-wrap: wrap;
+        justify-content: end;
+        gap: var(--terra-spacing-2x-small);
+        padding: 0 var(--header-spacing);
+    }
+
+    .dialog__header-actions terra-button,
+    .dialog__header-actions ::slotted(terra-button) {
+        flex: 0 0 auto;
+        display: flex;
+        align-items: center;
+        font-size: var(--terra-font-size-medium);
+    }
+
+    .dialog__close {
+        --terra-button-text-text-color: var(--terra-text-primary);
+    }
+
+    .dialog__body {
+        flex: 1 1 auto;
+        display: block;
+        padding: var(--body-spacing);
+        overflow: auto;
+        -webkit-overflow-scrolling: touch;
+    }
+
+    .dialog__footer {
+        border-color: var(--terra-container-dialog-footer-border-color, #dee2e6);
+        border-style: var(--terra-container-dialog-footer-border-style, solid none);
+        border-width: var(--terra-container-dialog-footer-border-width, 1px 0 0 0);
+        flex: 0 0 auto;
+        text-align: right;
+        padding: var(--footer-spacing);
+    }
+
+    .dialog__footer ::slotted(terra-button:not(:first-of-type)) {
+        margin-inline-start: var(--terra-spacing-x-small);
+    }
+
+    .dialog:not(.dialog--has-footer) .dialog__footer {
+        display: none;
+    }
+
+    .dialog__overlay {
+        position: fixed;
+        top: 0;
+        right: 0;
+        bottom: 0;
+        left: 0;
+        background-color: var(--terra-overlay-background-color);
+    }
+
+    @media (forced-colors: active) {
+        .dialog__panel {
+            border: solid 1px var(--terra-color-spacesuit-white);
+        }
+    }
+`;export{i as a};

package/dist/chunks/chunk.MK6COBAF.js

@@ -0,0 +1,43 @@
+import{a as d}from"./chunk.BFNCV2RM.js";import{a as n}from"./chunk.URTV3MIW.js";import{a as h}from"./chunk.X5OPH5X7.js";import{b as a}from"./chunk.UTJA3S5Z.js";import{a as r}from"./chunk.J5Q4TWEG.js";import{a as s,b as o}from"./chunk.WEMSJJQN.js";import{e as t}from"./chunk.INFVQQSJ.js";import{classMap as m}from"lit/directives/class-map.js";import{html as c}from"lit";import{ifDefined as p}from"lit/directives/if-defined.js";import{live as f}from"lit/directives/live.js";import{property as l,query as C,state as k}from"lit/decorators.js";var e=class extends o{constructor(){super(...arguments);this.formControlController=new a(this,{value:i=>i.checked?i.value||"on":void 0,defaultValue:i=>i.defaultChecked,setValue:(i,u)=>i.checked=u});this.hasFocus=!1;this.title="";this.name="";this.size="medium";this.disabled=!1;this.checked=!1;this.defaultChecked=!1;this.form="";this.required=!1}get validity(){return this.input.validity}get validationMessage(){return this.input.validationMessage}firstUpdated(){this.formControlController.updateValidity()}handleBlur(){this.hasFocus=!1,this.emit("terra-blur")}handleClick(){this.disabled||(this.checked=!0,this.emit("terra-change"))}handleFocus(){this.hasFocus=!0,this.emit("terra-focus")}handleInput(){this.emit("terra-input")}handleChange(){this.checked=this.input.checked,this.emit("terra-change")}handleInvalid(i){this.formControlController.setValidity(!1),this.formControlController.emitInvalidEvent(i)}handleDisabledChange(){this.formControlController.setValidity(this.disabled)}handleCheckedChange(){this.input.checked=this.checked,this.formControlController.updateValidity()}click(){this.input.click()}focus(i){this.input.focus(i)}blur(){this.input.blur()}checkValidity(){return this.input.checkValidity()}getForm(){return this.formControlController.getForm()}reportValidity(){return this.input.reportValidity()}setCustomValidity(i){this.input.setCustomValidity(i),this.formControlController.updateValidity()}render(){return c`
+            <label
+                part="base"
+                class=${m({radio:!0,"radio--checked":this.checked,"radio--disabled":this.disabled,"radio--focused":this.hasFocus,"radio--small":this.size==="small","radio--medium":this.size==="medium","radio--large":this.size==="large"})}
+            >
+                <input
+                    class="radio__input"
+                    type="radio"
+                    title=${this.title}
+                    name=${this.name}
+                    value=${p(this.value)}
+                    .checked=${f(this.checked)}
+                    .disabled=${this.disabled}
+                    .required=${this.required}
+                    aria-checked=${this.checked?"true":"false"}
+                    @click=${this.handleClick}
+                    @input=${this.handleInput}
+                    @change=${this.handleChange}
+                    @invalid=${this.handleInvalid}
+                    @blur=${this.handleBlur}
+                    @focus=${this.handleFocus}
+                />
+
+                <span
+                    part="${`control${this.checked?" control--checked":""}`}"
+                    class="radio__control"
+                >
+                    ${this.checked?c`
+                              <svg
+                                  part="checked-icon"
+                                  class="radio__checked-icon"
+                                  viewBox="0 0 24 24"
+                                  fill="none"
+                                  xmlns="http://www.w3.org/2000/svg"
+                              >
+                                  <circle cx="12" cy="12" r="6" fill="currentColor" />
+                              </svg>
+                          `:""}
+                </span>
+
+                <slot part="label" class="radio__label"></slot>
+            </label>
+        `}};e.styles=[s,h,d],t([C('input[type="radio"]')],e.prototype,"input",2),t([k()],e.prototype,"hasFocus",2),t([l()],e.prototype,"title",2),t([l()],e.prototype,"name",2),t([l()],e.prototype,"value",2),t([l({reflect:!0})],e.prototype,"size",2),t([l({type:Boolean,reflect:!0})],e.prototype,"disabled",2),t([l({type:Boolean,reflect:!0})],e.prototype,"checked",2),t([n("checked")],e.prototype,"defaultChecked",2),t([l({reflect:!0})],e.prototype,"form",2),t([l({type:Boolean,reflect:!0})],e.prototype,"required",2),t([r("disabled",{waitUntilFirstUpdate:!0})],e.prototype,"handleDisabledChange",1),t([r("checked",{waitUntilFirstUpdate:!0})],e.prototype,"handleCheckedChange",1);export{e as a};

package/dist/chunks/chunk.MPM3TXSL.js

@@ -0,0 +1,80 @@
+import{a as d}from"./chunk.EVU2XYYQ.js";import{a as b}from"./chunk.I6BL3WPE.js";import{a as p}from"./chunk.J5Q4TWEG.js";import{a as u,b as h}from"./chunk.WEMSJJQN.js";import{e as s}from"./chunk.INFVQQSJ.js";import{property as c,state as f}from"lit/decorators.js";import{html as r}from"lit";import{classMap as m}from"lit/directives/class-map.js";var i=class extends h{constructor(){super(...arguments);this.current=1;this.total=1;this.variant="full";this.centered=!1;this._visiblePages=[]}handlePropsChange(){this._updateVisiblePages()}connectedCallback(){super.connectedCallback(),this._updateVisiblePages()}_updateVisiblePages(){let t=[],a=Math.max(1,this.total),n=Math.max(1,Math.min(this.current,a));if(this.variant==="simple"){this._visiblePages=[];return}if(a<=7)for(let e=1;e<=a;e++)t.push(e);else if(t.push(1),n<=4){for(let e=2;e<=5;e++)t.push(e);t.push(-1),t.push(a)}else if(n>=a-3){t.push(-1);for(let e=a-4;e<=a;e++)t.push(e)}else{t.push(-1);for(let e=n-1;e<=n+1;e++)t.push(e);t.push(-1),t.push(a)}this._visiblePages=t}_handlePageClick(t){t===this.current||t<1||t>this.total||(this.current=t,this._updateVisiblePages(),this.emit("terra-page-change",{detail:{page:t}}))}_handlePrevClick(){this.current>1&&this._handlePageClick(this.current-1)}_handleNextClick(){this.current<this.total&&this._handlePageClick(this.current+1)}render(){let t=Math.max(1,this.total),a=Math.max(1,Math.min(this.current,t)),n=a===1,e=a===t,_=this.variant==="full";return r`
+            <div
+                part="base"
+                class=${m({pagination:!0,"pagination--centered":this.centered,"pagination--left":this.variant==="full"&&!this.centered,"pagination--simple":this.variant==="simple"})}
+            >
+                <nav part="nav" class="pagination__nav">
+                    <button
+                        part="prev"
+                        class="pagination__button pagination__button--prev"
+                        ?disabled=${n}
+                        @click=${this._handlePrevClick}
+                        aria-label="Previous page"
+                    >
+                        ${this.variant==="simple"?r`
+                                  <terra-icon
+                                      name="chevron-left"
+                                      library="default"
+                                  ></terra-icon>
+                                  <span class="pagination__button-text"
+                                      >Previous</span
+                                  >
+                              `:r`
+                                  <terra-icon
+                                      name="chevron-left"
+                                      library="default"
+                                  ></terra-icon>
+                              `}
+                    </button>
+
+                    ${_?r`
+                              ${this._visiblePages.map(l=>{if(l===-1)return r`
+                                          <span
+                                              part="ellipsis"
+                                              class="pagination__ellipsis"
+                                              aria-hidden="true"
+                                              >…</span
+                                          >
+                                      `;let o=l===a;return r`
+                                      <button
+                                          part=${o?"button-current button":"button"}
+                                          class=${m({pagination__button:!0,"pagination__button--page":!0,"pagination__button--current":o})}
+                                          ?disabled=${o}
+                                          @click=${()=>this._handlePageClick(l)}
+                                          aria-label=${`Page ${l}`}
+                                          aria-current=${o?"page":void 0}
+                                      >
+                                          ${l}
+                                      </button>
+                                  `})}
+                          `:""}
+
+                    <button
+                        part="next"
+                        class="pagination__button pagination__button--next"
+                        ?disabled=${e}
+                        @click=${this._handleNextClick}
+                        aria-label="Next page"
+                    >
+                        ${this.variant==="simple"?r`
+                                  <span class="pagination__button-text">Next</span>
+                                  <terra-icon
+                                      name="chevron-right"
+                                      library="default"
+                                  ></terra-icon>
+                              `:r`
+                                  <terra-icon
+                                      name="chevron-right"
+                                      library="default"
+                                  ></terra-icon>
+                              `}
+                    </button>
+                </nav>
+
+                ${this.variant==="full"&&!this.centered?r`
+                          <div part="slot" class="pagination__slot">
+                              <slot></slot>
+                          </div>
+                      `:""}
+            </div>
+        `}};i.styles=[u,d],i.dependencies={"terra-icon":b},s([c({type:Number})],i.prototype,"current",2),s([c({type:Number})],i.prototype,"total",2),s([c({reflect:!0})],i.prototype,"variant",2),s([c({type:Boolean})],i.prototype,"centered",2),s([f()],i.prototype,"_visiblePages",2),s([p(["current","total","variant"])],i.prototype,"handlePropsChange",1);export{i as a};