@hpe-web/components 0.0.1 → 1.0.0

package/dist/elements/hpe-agenda/hpe-agenda.styles.js

@@ -0,0 +1,83 @@
+import { css } from 'lit';
+export const styles = css `
+  :host {
+    display: block;
+  }
+
+  .section {
+    background-color: var(--hpe-web-color-background-default);
+    padding-block: var(--hpe-web-spacing-xxlarge);
+    padding-inline: var(--hpe-web-spacing-4xlarge);
+  }
+
+  .container {
+    display: flex;
+    flex-direction: column;
+    gap: 0;
+  }
+
+  .row {
+    display: grid;
+    grid-template-columns: var(--hpe-agenda-row-time-column, 20%) 1fr;
+    gap: var(--hpe-web-spacing-xxlarge);
+    align-items: center;
+    padding: var(--hpe-web-spacing-medium);
+    background-color: var(--hpe-web-color-background-default);
+  }
+
+  @media (max-width: 767px) {
+    .row {
+      grid-template-columns: 1fr;
+    }
+  }
+
+  :host([tone='sunken']) .row {
+    background-color: var(--hpe-web-color-background-back);
+  }
+
+  :host([bordered]) .row {
+    border-top: 1px solid var(--hpe-web-color-border-weak);
+  }
+
+  .time,
+  .content {
+    display: flex;
+    flex-direction: column;
+    color: var(--hpe-agenda-row-text-color, var(--hpe-web-color-text-default));
+    font-size: var(--hpe-web-paragraph-body-copy-font-size);
+    font-weight: var(--hpe-web-paragraph-body-copy-font-weight);
+    letter-spacing: var(--hpe-web-paragraph-body-copy-letter-spacing);
+    line-height: var(--hpe-web-paragraph-body-copy-line-height);
+  }
+
+  .time {
+    gap: var(--hpe-web-spacing-none);
+  }
+
+  .content {
+    gap: var(--hpe-web-spacing-xxsmall);
+  }
+
+  ::slotted([slot='title']) {
+    margin: 0;
+    color: var(--hpe-agenda-row-text-color, var(--hpe-web-color-text-default));
+    font-size: var(--hpe-web-paragraph-body-copy-font-size);
+    font-weight: 700;
+    letter-spacing: var(--hpe-web-paragraph-body-copy-letter-spacing);
+    line-height: var(--hpe-web-paragraph-body-copy-line-height);
+  }
+
+  ::slotted([slot='description']) {
+    margin: 0;
+    color: var(--hpe-agenda-row-text-color, var(--hpe-web-color-text-default));
+    font-size: var(--hpe-web-paragraph-body-copy-font-size);
+    font-weight: var(--hpe-web-paragraph-body-copy-font-weight);
+    letter-spacing: var(--hpe-web-paragraph-body-copy-letter-spacing);
+    line-height: var(--hpe-web-paragraph-body-copy-line-height);
+  }
+
+  ::slotted(hpe-agenda-row) {
+    width: 100%;
+  }
+`;
+//# sourceMappingURL=hpe-agenda.styles.js.map

package/dist/elements/hpe-agenda/hpe-agenda.styles.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-agenda.styles.js","sourceRoot":"","sources":["../../../elements/hpe-agenda/hpe-agenda.styles.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAE,MAAM,KAAK,CAAC;AAE1B,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAgFxB,CAAC"}

package/dist/elements/hpe-agenda/index.d.ts

@@ -0,0 +1,2 @@
+export { HpeAgenda, HpeAgendaRow } from './hpe-agenda.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/elements/hpe-agenda/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../elements/hpe-agenda/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/elements/hpe-agenda/index.js

@@ -0,0 +1,2 @@
+export { HpeAgenda, HpeAgendaRow } from './hpe-agenda.js';
+//# sourceMappingURL=index.js.map

package/dist/elements/hpe-agenda/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../elements/hpe-agenda/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,YAAY,EAAE,MAAM,iBAAiB,CAAC"}

package/dist/elements/hpe-button/hpe-button.d.ts

@@ -0,0 +1,38 @@
+import { LitElement } from "lit";
+/**
+ * A button component for user interactions with multiple types, sizes, and states.
+ *
+ * @tag hpe-button
+ * @summary Displays a button with configurable type, size, and state variants.
+ *
+ * @attr {string} type - Button type: "primary" | "secondary" | "link-primary" | "link-neutral"
+ * @attr {string} size - Button size: "small" | "default" | "large"
+ * @attr {string} label - Fallback label when no slotted text is provided
+ * @attr {boolean} disabled - Whether the button is disabled
+ * @attr {boolean} show-icon - Whether to show the arrow icon (default: true)
+ * @attr {string} icon-position - Arrow icon placement: "left" | "right"
+ *
+ * @slot - Button label text
+ *
+ * @csspart button - The button element
+ * @csspart label - The button label text
+ * @csspart icon - The trailing icon container
+ */
+export declare class HpeButton extends LitElement {
+    static styles: import("lit").CSSResult;
+    type: "primary" | "secondary" | "link-primary" | "link-neutral";
+    size: "small" | "default" | "large";
+    label: string;
+    disabled: boolean;
+    showIcon: boolean;
+    iconPosition: "left" | "right";
+    private get arrowIcon();
+    private renderIcon;
+    render(): import("lit-html").TemplateResult<1>;
+}
+declare global {
+    interface HTMLElementTagNameMap {
+        "hpe-button": HpeButton;
+    }
+}
+//# sourceMappingURL=hpe-button.d.ts.map

package/dist/elements/hpe-button/hpe-button.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-button.d.ts","sourceRoot":"","sources":["../../../elements/hpe-button/hpe-button.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAQ,MAAM,KAAK,CAAC;AAIvC;;;;;;;;;;;;;;;;;;GAkBG;AACH,qBACa,SAAU,SAAQ,UAAU;IACvC,OAAgB,MAAM,0BAAU;IAGhC,IAAI,EAAE,SAAS,GAAG,WAAW,GAAG,cAAc,GAAG,cAAc,CAAa;IAG5E,IAAI,EAAE,OAAO,GAAG,SAAS,GAAG,OAAO,CAAa;IAGhD,KAAK,SAAW;IAGhB,QAAQ,UAAS;IAGjB,QAAQ,UAAQ;IAGhB,YAAY,EAAE,MAAM,GAAG,OAAO,CAAW;IAEzC,OAAO,KAAK,SAAS,GAYpB;IAED,OAAO,CAAC,UAAU;IAIT,MAAM;CAoBhB;AAED,OAAO,CAAC,MAAM,CAAC;IACb,UAAU,qBAAqB;QAC7B,YAAY,EAAE,SAAS,CAAC;KACzB;CACF"}

package/dist/elements/hpe-button/hpe-button.js

@@ -0,0 +1,99 @@
+var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
+    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
+    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
+    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
+    return c > 3 && r && Object.defineProperty(target, key, r), r;
+};
+import { LitElement, html } from "lit";
+import { customElement, property } from "lit/decorators.js";
+import { styles } from "./hpe-button.styles";
+/**
+ * A button component for user interactions with multiple types, sizes, and states.
+ *
+ * @tag hpe-button
+ * @summary Displays a button with configurable type, size, and state variants.
+ *
+ * @attr {string} type - Button type: "primary" | "secondary" | "link-primary" | "link-neutral"
+ * @attr {string} size - Button size: "small" | "default" | "large"
+ * @attr {string} label - Fallback label when no slotted text is provided
+ * @attr {boolean} disabled - Whether the button is disabled
+ * @attr {boolean} show-icon - Whether to show the arrow icon (default: true)
+ * @attr {string} icon-position - Arrow icon placement: "left" | "right"
+ *
+ * @slot - Button label text
+ *
+ * @csspart button - The button element
+ * @csspart label - The button label text
+ * @csspart icon - The trailing icon container
+ */
+let HpeButton = class HpeButton extends LitElement {
+    constructor() {
+        super(...arguments);
+        this.type = "primary";
+        this.size = "default";
+        this.label = "Label";
+        this.disabled = false;
+        this.showIcon = true;
+        this.iconPosition = "right";
+    }
+    get arrowIcon() {
+        return html `<svg
+      xmlns="http://www.w3.org/2000/svg"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"
+    >
+      <path d="M5 12h14M12 5l7 7-7 7" />
+    </svg>`;
+    }
+    renderIcon() {
+        return html `<span part="icon" class="icon">${this.arrowIcon}</span>`;
+    }
+    render() {
+        return html `
+      <button
+        part="button"
+        class="button"
+        type="button"
+        ?disabled=${this.disabled}
+      >
+        ${this.showIcon && this.iconPosition === "left"
+            ? this.renderIcon()
+            : ""}
+        <span part="label" class="label">
+          <slot>${this.label}</slot>
+        </span>
+        ${this.showIcon && this.iconPosition === "right"
+            ? this.renderIcon()
+            : ""}
+      </button>
+    `;
+    }
+};
+HpeButton.styles = styles;
+__decorate([
+    property({ reflect: true })
+], HpeButton.prototype, "type", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeButton.prototype, "size", void 0);
+__decorate([
+    property({ reflect: true })
+], HpeButton.prototype, "label", void 0);
+__decorate([
+    property({ reflect: true, type: Boolean })
+], HpeButton.prototype, "disabled", void 0);
+__decorate([
+    property({ reflect: true, attribute: "show-icon", type: Boolean })
+], HpeButton.prototype, "showIcon", void 0);
+__decorate([
+    property({ reflect: true, attribute: "icon-position" })
+], HpeButton.prototype, "iconPosition", void 0);
+HpeButton = __decorate([
+    customElement("hpe-button")
+], HpeButton);
+export { HpeButton };
+//# sourceMappingURL=hpe-button.js.map

package/dist/elements/hpe-button/hpe-button.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-button.js","sourceRoot":"","sources":["../../../elements/hpe-button/hpe-button.ts"],"names":[],"mappings":";;;;;;AAAA,OAAO,EAAE,UAAU,EAAE,IAAI,EAAE,MAAM,KAAK,CAAC;AACvC,OAAO,EAAE,aAAa,EAAE,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AAC5D,OAAO,EAAE,MAAM,EAAE,MAAM,qBAAqB,CAAC;AAE7C;;;;;;;;;;;;;;;;;;GAkBG;AAEI,IAAM,SAAS,GAAf,MAAM,SAAU,SAAQ,UAAU;IAAlC;;QAIL,SAAI,GAA8D,SAAS,CAAC;QAG5E,SAAI,GAAkC,SAAS,CAAC;QAGhD,UAAK,GAAG,OAAO,CAAC;QAGhB,aAAQ,GAAG,KAAK,CAAC;QAGjB,aAAQ,GAAG,IAAI,CAAC;QAGhB,iBAAY,GAAqB,OAAO,CAAC;IAwC3C,CAAC;IAtCC,IAAY,SAAS;QACnB,OAAO,IAAI,CAAA;;;;;;;;;;WAUJ,CAAC;IACV,CAAC;IAEO,UAAU;QAChB,OAAO,IAAI,CAAA,kCAAkC,IAAI,CAAC,SAAS,SAAS,CAAC;IACvE,CAAC;IAEQ,MAAM;QACb,OAAO,IAAI,CAAA;;;;;oBAKK,IAAI,CAAC,QAAQ;;UAEvB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,KAAK,MAAM;YAC7C,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE;YACnB,CAAC,CAAC,EAAE;;kBAEI,IAAI,CAAC,KAAK;;UAElB,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,YAAY,KAAK,OAAO;YAC9C,CAAC,CAAC,IAAI,CAAC,UAAU,EAAE;YACnB,CAAC,CAAC,EAAE;;KAET,CAAC;IACJ,CAAC;;AAzDe,gBAAM,GAAG,MAAM,AAAT,CAAU;AAGhC;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACgD;AAG5E;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;uCACoB;AAGhD;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,CAAC;wCACZ;AAGhB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CAC1B;AAGjB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,WAAW,EAAE,IAAI,EAAE,OAAO,EAAE,CAAC;2CACnD;AAGhB;IADC,QAAQ,CAAC,EAAE,OAAO,EAAE,IAAI,EAAE,SAAS,EAAE,eAAe,EAAE,CAAC;+CACf;AAnB9B,SAAS;IADrB,aAAa,CAAC,YAAY,CAAC;GACf,SAAS,CA2DrB"}

package/dist/elements/hpe-button/hpe-button.styles.d.ts

@@ -0,0 +1,2 @@
+export declare const styles: import("lit").CSSResult;
+//# sourceMappingURL=hpe-button.styles.d.ts.map

package/dist/elements/hpe-button/hpe-button.styles.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hpe-button.styles.d.ts","sourceRoot":"","sources":["../../../elements/hpe-button/hpe-button.styles.ts"],"names":[],"mappings":"AAEA,eAAO,MAAM,MAAM,yBAqalB,CAAC"}

package/dist/elements/hpe-button/hpe-button.styles.js

@@ -0,0 +1,424 @@
+import { css } from "lit";
+export const styles = css `
+  :host {
+    --hpe-button-font-family: var(--hpe-web-base-font-family-primary);
+    --hpe-button-transition: all 0.2s ease-in-out;
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    font-family: var(--hpe-button-font-family);
+    border: none;
+    cursor: pointer;
+    transition: var(--hpe-button-transition);
+    white-space: nowrap;
+    padding: 0;
+  }
+
+  .button:disabled {
+    cursor: not-allowed;
+  }
+
+  :host([type="primary"]) .button {
+    font-weight: var(--hpe-web-button-primary-rest-font-weight);
+  }
+
+  :host([type="primary"]) .button:not(:disabled):hover {
+    font-weight: var(--hpe-web-button-primary-hover-font-weight);
+  }
+
+  :host([type="primary"]) .button:disabled {
+    font-weight: var(--hpe-web-button-primary-disabled-rest-font-weight);
+  }
+
+  :host([type="secondary"]) .button {
+    font-weight: var(--hpe-web-button-secondary-rest-font-weight);
+  }
+
+  :host([type="secondary"]) .button:not(:disabled):hover {
+    font-weight: var(--hpe-web-button-secondary-hover-font-weight);
+  }
+
+  :host([type="secondary"]) .button:disabled {
+    font-weight: var(--hpe-web-button-secondary-disabled-rest-font-weight);
+  }
+
+  :host([type="link-primary"]) .button {
+    font-weight: var(--hpe-web-button-link-primary-rest-font-weight);
+  }
+
+  :host([type="link-primary"]) .button:not(:disabled):hover {
+    font-weight: var(--hpe-web-button-link-primary-hover-font-weight);
+  }
+
+  :host([type="link-primary"]) .button:disabled {
+    font-weight: var(--hpe-web-button-link-primary-disabled-rest-font-weight);
+  }
+
+  :host([type="link-neutral"]) .button {
+    font-weight: var(--hpe-web-button-link-neutral-rest-font-weight);
+  }
+
+  :host([type="link-neutral"]) .button:not(:disabled):hover {
+    font-weight: var(--hpe-web-button-link-neutral-hover-font-weight);
+  }
+
+  :host([type="link-neutral"]) .button:disabled {
+    font-weight: var(--hpe-web-button-link-neutral-disabled-rest-font-weight);
+  }
+
+  .label {
+    display: inline-block;
+  }
+
+  .icon {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+  }
+
+  .icon svg {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+
+  /* PRIMARY BUTTONS */
+  :host([type="primary"][size="small"]) .button {
+    min-height: var(--hpe-web-button-primary-small-min-height);
+    padding: var(--hpe-web-button-primary-small-padding-y)
+      var(--hpe-web-button-primary-small-padding-x);
+    gap: var(--hpe-web-button-primary-small-gap-x);
+    font-size: var(--hpe-web-button-primary-small-font-size);
+    line-height: var(--hpe-web-button-primary-small-line-height);
+    border-radius: var(--hpe-web-button-primary-small-border-radius);
+    background-color: var(--hpe-web-button-primary-rest-background);
+    color: var(--hpe-web-button-primary-rest-text-color);
+  }
+
+  :host([type="primary"][size="small"]) .button:not(:disabled):hover {
+    background-color: var(--hpe-web-button-primary-hover-background);
+    color: var(--hpe-web-button-primary-hover-text-color);
+  }
+
+  :host([type="primary"][size="small"]) .button:disabled {
+    background-color: var(--hpe-web-button-primary-disabled-rest-background);
+    color: var(--hpe-web-button-primary-disabled-rest-text-color);
+  }
+
+  :host([type="primary"][size="default"]) .button {
+    min-height: var(--hpe-web-button-primary-medium-min-height);
+    padding: var(--hpe-web-button-primary-medium-padding-y)
+      var(--hpe-web-button-primary-medium-padding-x);
+    gap: var(--hpe-web-button-primary-medium-gap-x);
+    font-size: var(--hpe-web-button-primary-medium-font-size);
+    line-height: var(--hpe-web-button-primary-medium-line-height);
+    border-radius: var(--hpe-web-button-primary-medium-border-radius);
+    background-color: var(--hpe-web-button-primary-rest-background);
+    color: var(--hpe-web-button-primary-rest-text-color);
+  }
+
+  :host([type="primary"][size="default"]) .button:not(:disabled):hover {
+    background-color: var(--hpe-web-button-primary-hover-background);
+    color: var(--hpe-web-button-primary-hover-text-color);
+  }
+
+  :host([type="primary"][size="default"]) .button:disabled {
+    background-color: var(--hpe-web-button-primary-disabled-rest-background);
+    color: var(--hpe-web-button-primary-disabled-rest-text-color);
+  }
+
+  :host([type="primary"][size="large"]) .button {
+    min-height: var(--hpe-web-button-primary-large-min-height);
+    padding: var(--hpe-web-button-primary-large-padding-y)
+      var(--hpe-web-button-primary-large-padding-x);
+    gap: var(--hpe-web-button-primary-large-gap-x);
+    font-size: var(--hpe-web-button-primary-large-font-size);
+    line-height: var(--hpe-web-button-primary-large-line-height);
+    border-radius: var(--hpe-web-button-primary-large-border-radius);
+    background-color: var(--hpe-web-button-primary-rest-background);
+    color: var(--hpe-web-button-primary-rest-text-color);
+  }
+
+  :host([type="primary"][size="large"]) .button:not(:disabled):hover {
+    background-color: var(--hpe-web-button-primary-hover-background);
+    color: var(--hpe-web-button-primary-hover-text-color);
+  }
+
+  :host([type="primary"][size="large"]) .button:disabled {
+    background-color: var(--hpe-web-button-primary-disabled-rest-background);
+    color: var(--hpe-web-button-primary-disabled-rest-text-color);
+  }
+
+  /* SECONDARY BUTTONS */
+  :host([type="secondary"][size="small"]) .button {
+    min-height: var(--hpe-web-button-secondary-small-min-height);
+    padding: var(--hpe-web-button-secondary-small-padding-y)
+      var(--hpe-web-button-secondary-small-padding-x);
+    gap: var(--hpe-web-button-secondary-small-gap-x);
+    font-size: var(--hpe-web-button-secondary-small-font-size);
+    line-height: var(--hpe-web-button-secondary-small-line-height);
+    border-radius: var(--hpe-web-button-secondary-small-border-radius);
+    background-color: var(--hpe-web-button-secondary-rest-background);
+    color: var(--hpe-web-button-secondary-rest-text-color);
+    border: var(--hpe-web-button-secondary-small-border-width) solid
+      var(--hpe-web-button-secondary-rest-border-color);
+  }
+
+  :host([type="secondary"][size="small"]) .button:not(:disabled):hover {
+    background-color: var(--hpe-web-button-secondary-hover-background);
+    border-color: var(--hpe-web-button-secondary-hover-border-color);
+    color: var(--hpe-web-button-secondary-hover-text-color);
+  }
+
+  :host([type="secondary"][size="small"]) .button:disabled {
+    background-color: var(--hpe-web-button-secondary-disabled-rest-background);
+    border-color: var(--hpe-web-button-secondary-disabled-rest-border-color);
+    color: var(--hpe-web-button-secondary-disabled-rest-text-color);
+  }
+
+  :host([type="secondary"][size="default"]) .button {
+    min-height: var(--hpe-web-button-secondary-medium-min-height);
+    padding: var(--hpe-web-button-secondary-medium-padding-y)
+      var(--hpe-web-button-secondary-medium-padding-x);
+    gap: var(--hpe-web-button-secondary-medium-gap-x);
+    font-size: var(--hpe-web-button-secondary-medium-font-size);
+    line-height: var(--hpe-web-button-secondary-medium-line-height);
+    border-radius: var(--hpe-web-button-secondary-medium-border-radius);
+    background-color: var(--hpe-web-button-secondary-rest-background);
+    color: var(--hpe-web-button-secondary-rest-text-color);
+    border: var(--hpe-web-button-secondary-medium-border-width) solid
+      var(--hpe-web-button-secondary-rest-border-color);
+  }
+
+  :host([type="secondary"][size="default"]) .button:not(:disabled):hover {
+    background-color: var(--hpe-web-button-secondary-hover-background);
+    border-color: var(--hpe-web-button-secondary-hover-border-color);
+    color: var(--hpe-web-button-secondary-hover-text-color);
+  }
+
+  :host([type="secondary"][size="default"]) .button:disabled {
+    background-color: var(--hpe-web-button-secondary-disabled-rest-background);
+    border-color: var(--hpe-web-button-secondary-disabled-rest-border-color);
+    color: var(--hpe-web-button-secondary-disabled-rest-text-color);
+  }
+
+  :host([type="secondary"][size="large"]) .button {
+    min-height: var(--hpe-web-button-secondary-large-min-height);
+    padding: var(--hpe-web-button-secondary-large-padding-y)
+      var(--hpe-web-button-secondary-large-padding-x);
+    gap: var(--hpe-web-button-secondary-large-gap-x);
+    font-size: var(--hpe-web-button-secondary-large-font-size);
+    line-height: var(--hpe-web-button-secondary-large-line-height);
+    border-radius: var(--hpe-web-button-secondary-large-border-radius);
+    background-color: var(--hpe-web-button-secondary-rest-background);
+    color: var(--hpe-web-button-secondary-rest-text-color);
+    border: var(--hpe-web-button-secondary-large-border-width) solid
+      var(--hpe-web-button-secondary-rest-border-color);
+  }
+
+  :host([type="secondary"][size="large"]) .button:not(:disabled):hover {
+    background-color: var(--hpe-web-button-secondary-hover-background);
+    border-color: var(--hpe-web-button-secondary-hover-border-color);
+    color: var(--hpe-web-button-secondary-hover-text-color);
+  }
+
+  :host([type="secondary"][size="large"]) .button:disabled {
+    background-color: var(--hpe-web-button-secondary-disabled-rest-background);
+    border-color: var(--hpe-web-button-secondary-disabled-rest-border-color);
+    color: var(--hpe-web-button-secondary-disabled-rest-text-color);
+  }
+
+  /* LINK PRIMARY BUTTONS */
+  :host([type="link-primary"][size="small"]) .button {
+    background: var(--hpe-web-button-link-primary-rest-background);
+    border: none;
+    min-height: var(--hpe-web-button-link-small-min-height);
+    padding: var(--hpe-web-button-link-small-padding-y)
+      var(--hpe-web-button-link-small-padding-x);
+    gap: var(--hpe-web-button-link-small-gap-x);
+    font-size: var(--hpe-web-button-link-small-font-size);
+    line-height: var(--hpe-web-button-link-small-line-height);
+    border-radius: var(--hpe-web-button-link-small-border-radius);
+    color: var(--hpe-web-button-link-primary-rest-text-color);
+  }
+
+  :host([type="link-primary"][size="small"]) .button:not(:disabled):hover {
+    background: var(--hpe-web-button-link-primary-hover-background);
+    color: var(--hpe-web-button-link-primary-hover-text-color);
+  }
+
+  :host([type="link-primary"][size="small"]) .button:disabled {
+    background: var(--hpe-web-button-link-primary-disabled-rest-background);
+    color: var(--hpe-web-button-link-primary-disabled-rest-text-color);
+  }
+
+  :host([type="link-primary"][size="default"]) .button {
+    background: var(--hpe-web-button-link-primary-rest-background);
+    border: none;
+    min-height: var(--hpe-web-button-link-medium-min-height);
+    padding: var(--hpe-web-button-link-medium-padding-y)
+      var(--hpe-web-button-link-medium-padding-x);
+    gap: var(--hpe-web-button-link-medium-gap-x);
+    font-size: var(--hpe-web-button-link-medium-font-size);
+    line-height: var(--hpe-web-button-link-medium-line-height);
+    border-radius: var(--hpe-web-button-link-medium-border-radius);
+    color: var(--hpe-web-button-link-primary-rest-text-color);
+  }
+
+  :host([type="link-primary"][size="default"]) .button:not(:disabled):hover {
+    background: var(--hpe-web-button-link-primary-hover-background);
+    color: var(--hpe-web-button-link-primary-hover-text-color);
+  }
+
+  :host([type="link-primary"][size="default"]) .button:disabled {
+    background: var(--hpe-web-button-link-primary-disabled-rest-background);
+    color: var(--hpe-web-button-link-primary-disabled-rest-text-color);
+  }
+
+  :host([type="link-primary"][size="large"]) .button {
+    background: var(--hpe-web-button-link-primary-rest-background);
+    border: none;
+    min-height: var(--hpe-web-button-link-large-min-height);
+    padding: var(--hpe-web-button-link-large-padding-y)
+      var(--hpe-web-button-link-large-padding-x);
+    gap: var(--hpe-web-button-link-large-gap-x);
+    font-size: var(--hpe-web-button-link-large-font-size);
+    line-height: var(--hpe-web-button-link-large-line-height);
+    border-radius: var(--hpe-web-button-link-large-border-radius);
+    color: var(--hpe-web-button-link-primary-rest-text-color);
+  }
+
+  :host([type="link-primary"][size="large"]) .button:not(:disabled):hover {
+    background: var(--hpe-web-button-link-primary-hover-background);
+    color: var(--hpe-web-button-link-primary-hover-text-color);
+  }
+
+  :host([type="link-primary"][size="large"]) .button:disabled {
+    background: var(--hpe-web-button-link-primary-disabled-rest-background);
+    color: var(--hpe-web-button-link-primary-disabled-rest-text-color);
+  }
+
+  /* LINK NEUTRAL BUTTONS */
+  :host([type="link-neutral"][size="small"]) .button {
+    background: var(--hpe-web-button-link-neutral-rest-background);
+    border: none;
+    min-height: var(--hpe-web-button-link-small-min-height);
+    padding: var(--hpe-web-button-link-small-padding-y)
+      var(--hpe-web-button-link-small-padding-x);
+    gap: var(--hpe-web-button-link-small-gap-x);
+    font-size: var(--hpe-web-button-link-small-font-size);
+    line-height: var(--hpe-web-button-link-small-line-height);
+    border-radius: var(--hpe-web-button-link-small-border-radius);
+    color: var(--hpe-web-button-link-neutral-rest-text-color);
+  }
+
+  :host([type="link-neutral"][size="small"]) .button:not(:disabled):hover {
+    background: var(--hpe-web-button-link-neutral-hover-background);
+    color: var(--hpe-web-button-link-neutral-hover-text-color);
+  }
+
+  :host([type="link-neutral"][size="small"]) .button:disabled {
+    background: var(--hpe-web-button-link-neutral-disabled-rest-background);
+    color: var(--hpe-web-button-link-neutral-disabled-rest-text-color);
+  }
+
+  :host([type="link-neutral"][size="default"]) .button {
+    background: var(--hpe-web-button-link-neutral-rest-background);
+    border: none;
+    min-height: var(--hpe-web-button-link-medium-min-height);
+    padding: var(--hpe-web-button-link-medium-padding-y)
+      var(--hpe-web-button-link-medium-padding-x);
+    gap: var(--hpe-web-button-link-medium-gap-x);
+    font-size: var(--hpe-web-button-link-medium-font-size);
+    line-height: var(--hpe-web-button-link-medium-line-height);
+    border-radius: var(--hpe-web-button-link-medium-border-radius);
+    color: var(--hpe-web-button-link-neutral-rest-text-color);
+  }
+
+  :host([type="link-neutral"][size="default"]) .button:not(:disabled):hover {
+    background: var(--hpe-web-button-link-neutral-hover-background);
+    color: var(--hpe-web-button-link-neutral-hover-text-color);
+  }
+
+  :host([type="link-neutral"][size="default"]) .button:disabled {
+    background: var(--hpe-web-button-link-neutral-disabled-rest-background);
+    color: var(--hpe-web-button-link-neutral-disabled-rest-text-color);
+  }
+
+  :host([type="link-neutral"][size="large"]) .button {
+    background: var(--hpe-web-button-link-neutral-rest-background);
+    border: none;
+    min-height: var(--hpe-web-button-link-large-min-height);
+    padding: var(--hpe-web-button-link-large-padding-y)
+      var(--hpe-web-button-link-large-padding-x);
+    gap: var(--hpe-web-button-link-large-gap-x);
+    font-size: var(--hpe-web-button-link-large-font-size);
+    line-height: var(--hpe-web-button-link-large-line-height);
+    border-radius: var(--hpe-web-button-link-large-border-radius);
+    color: var(--hpe-web-button-link-neutral-rest-text-color);
+  }
+
+  :host([type="link-neutral"][size="large"]) .button:not(:disabled):hover {
+    background: var(--hpe-web-button-link-neutral-hover-background);
+    color: var(--hpe-web-button-link-neutral-hover-text-color);
+  }
+
+  :host([type="link-neutral"][size="large"]) .button:disabled {
+    background: var(--hpe-web-button-link-neutral-disabled-rest-background);
+    color: var(--hpe-web-button-link-neutral-disabled-rest-text-color);
+  }
+
+  /* ICON SIZING */
+  :host([type="primary"][size="small"]) .icon {
+    width: var(--hpe-web-button-primary-small-icon-width);
+    height: var(--hpe-web-multi-mode-button-primary-small-icon-height);
+  }
+
+  :host([type="primary"][size="default"]) .icon {
+    width: var(--hpe-web-button-primary-medium-icon-width);
+    height: var(--hpe-web-multi-mode-button-primary-medium-icon-height);
+  }
+
+  :host([type="primary"][size="large"]) .icon {
+    width: var(--hpe-web-button-primary-large-icon-width);
+    height: var(--hpe-web-multi-mode-button-primary-large-icon-height);
+  }
+
+  :host([type="secondary"][size="small"]) .icon {
+    width: var(--hpe-web-multi-mode-button-secondary-small-icon-width);
+    height: var(--hpe-web-button-secondary-small-icon-height);
+  }
+
+  :host([type="secondary"][size="default"]) .icon {
+    width: var(--hpe-web-multi-mode-button-secondary-medium-icon-width);
+    height: var(--hpe-web-button-secondary-medium-icon-height);
+  }
+
+  :host([type="secondary"][size="large"]) .icon {
+    width: var(--hpe-web-multi-mode-button-secondary-large-icon-width);
+    height: var(--hpe-web-button-secondary-large-icon-height);
+  }
+
+  :host([type="link-primary"][size="small"]) .icon,
+  :host([type="link-neutral"][size="small"]) .icon {
+    width: var(--hpe-web-multi-mode-button-link-small-icon-width);
+    height: var(--hpe-web-multi-mode-button-link-small-icon-height);
+  }
+
+  :host([type="link-primary"][size="default"]) .icon,
+  :host([type="link-neutral"][size="default"]) .icon {
+    width: var(--hpe-web-multi-mode-button-link-medium-icon-width);
+    height: var(--hpe-web-multi-mode-button-link-medium-icon-height);
+  }
+
+  :host([type="link-primary"][size="large"]) .icon,
+  :host([type="link-neutral"][size="large"]) .icon {
+    width: var(--hpe-web-multi-mode-button-link-large-icon-width);
+    height: var(--hpe-web-multi-mode-button-link-large-icon-height);
+  }
+`;
+//# sourceMappingURL=hpe-button.styles.js.map