@aquera/nile-elements 0.0.1-beta.1

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/nile-button/nile-button.css.js

@@ -0,0 +1,421 @@
+/**
+ * Copyright Aquera Inc 2023
+ *
+ * This source code is licensed under the BSD-3-Clause license found in the
+ * LICENSE file in the root directory of this source tree.
+ */
+import { css } from 'lit-element';
+/**
+ * Button CSS
+ */
+export const styles = css `
+  :host {
+    display: inline-block;
+    position: relative;
+    width: auto;
+    cursor: pointer;
+  }
+
+  .button {
+    display: inline-flex;
+    align-items: stretch;
+    justify-content: center;
+    width: 100%;
+    border-style: solid;
+    border-width: 1px;
+    font-style: normal;
+    font-weight: 400;
+    font-size: var(--nile-font-size-base);
+    line-height: var(--nile-font-size-base);
+    text-align: center;
+    letter-spacing: 0.2px;
+    text-decoration: none;
+    user-select: none;
+    white-space: nowrap;
+    vertical-align: middle;
+    padding: var(--nile-spacing-one-half-x);
+    transition: var(--nile-transition-duration-default) background-color,
+      var(--nile-transition-duration-default) color,
+      var(--nile-transition-duration-default) border,
+      var(--nile-transition-duration-default) box-shadow;
+    cursor: inherit;
+  }
+
+  .button::-moz-focus-inner {
+    border: 0;
+  }
+
+  .button:focus {
+    outline: none;
+  }
+
+  .button:focus-visible {
+    outline: 5px auto -webkit-focus-ring-color;
+    outline-offset: 2px;
+  }
+
+  .button--disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .button--disabled * {
+    pointer-events: none;
+  }
+
+  .button__prefix,
+  .button__suffix {
+    flex: 0 0 auto;
+    display: flex;
+    align-items: center;
+    pointer-events: none;
+  }
+  .button__label {
+    display: inline-block;
+  }
+
+  .button__label::slotted(nile-icon) {
+    vertical-align: -2px;
+  }
+
+  .button--standard.button--secondary {
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-neutral-700);
+  }
+
+  .button--standard.button--secondary:hover:not(.button--disabled) {
+    background-color: var(--nile-colors-neutral-500);
+    border-color: var(--nile-colors-neutral-500);
+    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
+    color: var(--nile-colors-neutral-700);
+  }
+
+  .button--standard.button--secondary:active:not(.button--disabled) {
+    background-color: var(--nile-colors-neutral-500);
+    border-color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-700);
+  }
+
+  .button--standard.button--secondary.button--disabled {
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-500);
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--secondary.button--disabled:hover,
+  .button--standard.button--secondary.button--disabled:active {
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-dark-500);
+    box-shadow: none;
+  }
+
+  /* Primary */
+  .button--standard.button--primary {
+    background-color: var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-white-base);
+  }
+
+  .button--standard.button--primary:hover:not(.button--disabled) {
+    background-color: var(--nile-colors-primary-700);
+    border-color: var(--nile-colors-primary-700);
+    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
+    color: var(--nile-colors-white-base);
+  }
+
+  .button--standard.button--primary:active:not(.button--disabled) {
+    background-color: var(--nile-colors-primary-700);
+    border-color: var(--nile-colors-primary-900);
+    color: var(--nile-colors-white-base);
+  }
+
+  .button--standard.button--primary.button--disabled {
+    background-color: var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-neutral-700);
+    cursor: not-allowed;
+  }
+
+  .button--standard.button--primary.button--disabled:hover,
+  .button--standard.button--primary.button--disabled:active {
+    background-color: var(--nile-colors-primary-600);
+    border-color: var(--nile-colors-primary-600);
+    color: var(--nile-colors-neutral-700);
+    box-shadow: none;
+  }
+
+  /* Tertiary */
+  .button--standard.button--tertiary {
+    background-color: var(--nile-colors-white-base);
+    border-color: var(--nile-colors-neutral-500);
+    color: var(--nile-colors-neutral-700);
+    box-shadow: 0px 2px 4px var(--nile-colors-dark-200);
+  }
+
+  .button--standard.button--tertiary:hover:not(.button--disabled) {
+    background-color: var(--nile-colors-neutral-100);
+    border-color: var(--nile-colors-neutral-500);
+    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);
+    color: var(--nile-colors-neutral-700);
+  }
+
+  .button--standard.button--tertiary:active:not(.button--disabled) {
+    background-color: var(--nile-colors-neutral-400);
+    border-color: var(--nile-colors-neutral-700);
+    color: var(--nile-colors-neutral-700);
+  }
+  .button--standard.button--tertiary.button--disabled {
+    background-color: var(--nile-colors-white-base);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-neutral-700);
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  .button--standard.button--tertiary.button--disabled:hover,
+  .button--standard.button--tertiary.button--disabled:active {
+    background-color: var(--nile-colors-white-base);
+    border-color: var(--nile-colors-neutral-400);
+    color: var(--nile-colors-neutral-700);
+    box-shadow: none;
+  }
+
+  /* caution */
+  .button--standard.button--caution {
+    background-color: var(--nile-colors-red-500);
+    border-color: var(--nile-colors-red-500);
+    color: var(--nile-colors-white-base);
+  }
+  .button--standard.button--caution:hover:not(.button--disabled) {
+    background-color: var(--nile-colors-red-700);
+    border-color: var(--nile-colors-red-700);
+    color: var(--nile-colors-white-base);
+  }
+
+  .button--standard.button--caution:active:not(.button--disabled) {
+    background-color: var(--nile-colors-red-700);
+    border-color: var(--nile-colors-red-500);
+    color: var(--nile-colors-white-base);
+  }
+
+  .button--standard.button--tertiary.button--disabled {
+    background-color: var(--nile-colors-neutral-100);
+    border-color: var(--nile-colors-neutral-100);
+    color: var(--nile-colors-neutral-400);
+    cursor: not-allowed;
+    box-shadow: none;
+  }
+
+  .button--standard.button--tertiary.button--disabled:hover,
+  .button--standard.button--tertiary.button--disabled:active {
+    background-color: var(--nile-colors-neutral-100);
+    border-color: var(--nile-colors-neutral-100);
+    color: var(--nile-colors-neutral-400);
+    box-shadow: none;
+  }
+
+  /*
+ * Size modifiers
+ */
+
+  .button--small {
+    height: auto;
+    min-height: 24px;
+    font-size: 0.875rem;
+    line-height: calc(24px - var(--nile-spacing-one-half-x) * 2);
+    border-radius: var(--nile-radius-base-standard);
+  }
+
+  .button--medium {
+    height: auto;
+    min-height: 38px;
+    font-size: 0.875rem;
+    line-height: calc(38px - var(--nile-spacing-one-half-x) * 2);
+    font-size: var(--nile-font-size-base);
+    border-radius: var(--nile-radius-base-standard);
+  }
+
+  .button--large {
+    height: auto;
+    min-height: 40px;
+    font-size: 1rem;
+    line-height: calc(40px - var(--nile-spacing-one-half-x) * 2);
+    border-radius: 6px;
+  }
+
+  /*
+ * Pill modifier
+ */
+
+  .button--pill.button--small {
+    border-radius: 24px;
+  }
+
+  .button--pill.button--medium {
+    border-radius: 32px;
+  }
+
+  .button--pill.button--large {
+    border-radius: 40px;
+  }
+
+  /*
+ * Circle modifier
+ */
+
+  .button--circle {
+    padding-left: 0;
+    padding-right: 0;
+  }
+
+  .button--circle.button--small {
+    width: 24px;
+    height: 24px;
+    border-radius: 50%;
+  }
+
+  .button--circle.button--medium {
+    width: 38px;
+    height: 38px;
+    border-radius: 50%;
+  }
+
+  .button--circle.button--large {
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+  }
+
+  .button--circle .button__prefix,
+  .button--circle .button__suffix,
+  .button--circle .button__caret {
+    display: none;
+  }
+
+  /* Caret modifier */
+
+  .button--caret .button__suffix {
+    display: none;
+  }
+
+  .button--caret .button__caret {
+    height: auto;
+  }
+
+  /*
+ * Loading modifier
+ */
+
+  .button--loading {
+    position: relative;
+    cursor: wait;
+  }
+
+  .button--loading .button__prefix,
+  .button--loading .button__label,
+  .button--loading .button__suffix,
+  .button--loading .button__caret {
+    visibility: hidden;
+  }
+
+  .button--loading nile-spinner {
+    --indicator-color: currentColor;
+    position: absolute;
+    font-size: 1em;
+    height: 1em;
+    width: 1em;
+    top: calc(50% - 0.5em);
+    left: calc(50% - 0.5em);
+  }
+  /*
+ * Badges
+ */
+
+  .button ::slotted(nile-badge) {
+    position: absolute;
+    top: 0;
+    right: 0;
+    translate: 50% -50%;
+    pointer-events: none;
+  }
+
+  .button--rtl ::slotted(nile-badge) {
+    right: auto;
+    left: 0;
+    translate: -50% -50%;
+  }
+
+  /*
+ * Button spacing
+ */
+
+  .button--has-label.button--small .button__label {
+    padding: 0 var(--nile-spacing-one-half-x);
+  }
+
+  .button--has-label.button--medium .button__label {
+    padding: 0 var(--nile-spacing-2-x);
+  }
+
+  .button--has-label.button--large .button__label {
+    padding: 0 var(--nile-spacing-3-x);
+  }
+
+  .button--has-prefix.button--small {
+    padding-inline-start: var(--nile-spacing-one-half-x);
+  }
+
+  .button--has-prefix.button--small .button__label {
+    padding-inline-start: var(--nile-spacing-one-half-x);
+  }
+
+  .button--has-prefix.button--medium {
+    padding-inline-start: var(--nile-spacing-2-x);
+  }
+
+  .button--has-prefix.button--medium .button__label {
+    padding-inline-start: var(--nile-spacing-2-x);
+  }
+
+  .button--has-prefix.button--large {
+    padding-inline-start: var(--nile-spacing-2-x);
+  }
+
+  .button--has-prefix.button--large .button__label {
+    padding-inline-start: var(--nile-spacing-2-x);
+  }
+
+  .button--has-suffix.button--small,
+  .button--caret.button--small {
+    padding-inline-end: var(--nile-spacing-one-half-x);
+  }
+
+  .button--has-suffix.button--small .button__label,
+  .button--caret.button--small .button__label {
+    padding-inline-end: var(--nile-spacing-one-half-x);
+  }
+
+  .button--has-suffix.button--medium,
+  .button--caret.button--medium {
+    padding-inline-end: var(--nile-spacing-2-x);
+  }
+
+  .button--has-suffix.button--medium .button__label,
+  .button--caret.button--medium .button__label {
+    padding-inline-end: var(--nile-spacing-2-x);
+  }
+
+  .button--has-suffix.button--large,
+  .button--caret.button--large {
+    padding-inline-end: var(--nile-spacing-2-x);
+  }
+
+  .button--has-suffix.button--large .button__label,
+  .button--caret.button--large .button__label {
+    padding-inline-end: var(--nile-spacing-2-x);
+  }
+`;
+//# sourceMappingURL=nile-button.css.js.map

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/nile-button/nile-button.css.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nile-button.css.js","sourceRoot":"","sources":["../../../src/nile-button/nile-button.css.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,EAAE,GAAG,EAAE,MAAM,aAAa,CAAC;AAElC;;GAEG;AACH,MAAM,CAAC,MAAM,MAAM,GAAG,GAAG,CAAA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAyZxB,CAAC","sourcesContent":["/**\n * Copyright Aquera Inc 2023\n *\n * This source code is licensed under the BSD-3-Clause license found in the\n * LICENSE file in the root directory of this source tree.\n */\n\nimport { css } from 'lit-element';\n\n/**\n * Button CSS\n */\nexport const styles = css`\n  :host {\n    display: inline-block;\n    position: relative;\n    width: auto;\n    cursor: pointer;\n  }\n\n  .button {\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: center;\n    width: 100%;\n    border-style: solid;\n    border-width: 1px;\n    font-style: normal;\n    font-weight: 400;\n    font-size: var(--nile-font-size-base);\n    line-height: var(--nile-font-size-base);\n    text-align: center;\n    letter-spacing: 0.2px;\n    text-decoration: none;\n    user-select: none;\n    white-space: nowrap;\n    vertical-align: middle;\n    padding: var(--nile-spacing-one-half-x);\n    transition: var(--nile-transition-duration-default) background-color,\n      var(--nile-transition-duration-default) color,\n      var(--nile-transition-duration-default) border,\n      var(--nile-transition-duration-default) box-shadow;\n    cursor: inherit;\n  }\n\n  .button::-moz-focus-inner {\n    border: 0;\n  }\n\n  .button:focus {\n    outline: none;\n  }\n\n  .button:focus-visible {\n    outline: 5px auto -webkit-focus-ring-color;\n    outline-offset: 2px;\n  }\n\n  .button--disabled {\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .button--disabled * {\n    pointer-events: none;\n  }\n\n  .button__prefix,\n  .button__suffix {\n    flex: 0 0 auto;\n    display: flex;\n    align-items: center;\n    pointer-events: none;\n  }\n  .button__label {\n    display: inline-block;\n  }\n\n  .button__label::slotted(nile-icon) {\n    vertical-align: -2px;\n  }\n\n  .button--standard.button--secondary {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--standard.button--secondary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-500);\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--standard.button--secondary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-500);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--standard.button--secondary.button--disabled {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--secondary.button--disabled:hover,\n  .button--standard.button--secondary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-dark-500);\n    box-shadow: none;\n  }\n\n  /* Primary */\n  .button--standard.button--primary {\n    background-color: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-700);\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-primary-700);\n    border-color: var(--nile-colors-primary-900);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--primary.button--disabled {\n    background-color: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-neutral-700);\n    cursor: not-allowed;\n  }\n\n  .button--standard.button--primary.button--disabled:hover,\n  .button--standard.button--primary.button--disabled:active {\n    background-color: var(--nile-colors-primary-600);\n    border-color: var(--nile-colors-primary-600);\n    color: var(--nile-colors-neutral-700);\n    box-shadow: none;\n  }\n\n  /* Tertiary */\n  .button--standard.button--tertiary {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-500);\n    color: var(--nile-colors-neutral-700);\n    box-shadow: 0px 2px 4px var(--nile-colors-dark-200);\n  }\n\n  .button--standard.button--tertiary:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-500);\n    box-shadow: 0px 4px 8px var(--nile-colors-dark-200);\n    color: var(--nile-colors-neutral-700);\n  }\n\n  .button--standard.button--tertiary:active:not(.button--disabled) {\n    background-color: var(--nile-colors-neutral-400);\n    border-color: var(--nile-colors-neutral-700);\n    color: var(--nile-colors-neutral-700);\n  }\n  .button--standard.button--tertiary.button--disabled {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-700);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    background-color: var(--nile-colors-white-base);\n    border-color: var(--nile-colors-neutral-400);\n    color: var(--nile-colors-neutral-700);\n    box-shadow: none;\n  }\n\n  /* caution */\n  .button--standard.button--caution {\n    background-color: var(--nile-colors-red-500);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n  .button--standard.button--caution:hover:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-700);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--caution:active:not(.button--disabled) {\n    background-color: var(--nile-colors-red-700);\n    border-color: var(--nile-colors-red-500);\n    color: var(--nile-colors-white-base);\n  }\n\n  .button--standard.button--tertiary.button--disabled {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-100);\n    color: var(--nile-colors-neutral-400);\n    cursor: not-allowed;\n    box-shadow: none;\n  }\n\n  .button--standard.button--tertiary.button--disabled:hover,\n  .button--standard.button--tertiary.button--disabled:active {\n    background-color: var(--nile-colors-neutral-100);\n    border-color: var(--nile-colors-neutral-100);\n    color: var(--nile-colors-neutral-400);\n    box-shadow: none;\n  }\n\n  /*\n * Size modifiers\n */\n\n  .button--small {\n    height: auto;\n    min-height: 24px;\n    font-size: 0.875rem;\n    line-height: calc(24px - var(--nile-spacing-one-half-x) * 2);\n    border-radius: var(--nile-radius-base-standard);\n  }\n\n  .button--medium {\n    height: auto;\n    min-height: 38px;\n    font-size: 0.875rem;\n    line-height: calc(38px - var(--nile-spacing-one-half-x) * 2);\n    font-size: var(--nile-font-size-base);\n    border-radius: var(--nile-radius-base-standard);\n  }\n\n  .button--large {\n    height: auto;\n    min-height: 40px;\n    font-size: 1rem;\n    line-height: calc(40px - var(--nile-spacing-one-half-x) * 2);\n    border-radius: 6px;\n  }\n\n  /*\n * Pill modifier\n */\n\n  .button--pill.button--small {\n    border-radius: 24px;\n  }\n\n  .button--pill.button--medium {\n    border-radius: 32px;\n  }\n\n  .button--pill.button--large {\n    border-radius: 40px;\n  }\n\n  /*\n * Circle modifier\n */\n\n  .button--circle {\n    padding-left: 0;\n    padding-right: 0;\n  }\n\n  .button--circle.button--small {\n    width: 24px;\n    height: 24px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--medium {\n    width: 38px;\n    height: 38px;\n    border-radius: 50%;\n  }\n\n  .button--circle.button--large {\n    width: 40px;\n    height: 40px;\n    border-radius: 50%;\n  }\n\n  .button--circle .button__prefix,\n  .button--circle .button__suffix,\n  .button--circle .button__caret {\n    display: none;\n  }\n\n  /* Caret modifier */\n\n  .button--caret .button__suffix {\n    display: none;\n  }\n\n  .button--caret .button__caret {\n    height: auto;\n  }\n\n  /*\n * Loading modifier\n */\n\n  .button--loading {\n    position: relative;\n    cursor: wait;\n  }\n\n  .button--loading .button__prefix,\n  .button--loading .button__label,\n  .button--loading .button__suffix,\n  .button--loading .button__caret {\n    visibility: hidden;\n  }\n\n  .button--loading nile-spinner {\n    --indicator-color: currentColor;\n    position: absolute;\n    font-size: 1em;\n    height: 1em;\n    width: 1em;\n    top: calc(50% - 0.5em);\n    left: calc(50% - 0.5em);\n  }\n  /*\n * Badges\n */\n\n  .button ::slotted(nile-badge) {\n    position: absolute;\n    top: 0;\n    right: 0;\n    translate: 50% -50%;\n    pointer-events: none;\n  }\n\n  .button--rtl ::slotted(nile-badge) {\n    right: auto;\n    left: 0;\n    translate: -50% -50%;\n  }\n\n  /*\n * Button spacing\n */\n\n  .button--has-label.button--small .button__label {\n    padding: 0 var(--nile-spacing-one-half-x);\n  }\n\n  .button--has-label.button--medium .button__label {\n    padding: 0 var(--nile-spacing-2-x);\n  }\n\n  .button--has-label.button--large .button__label {\n    padding: 0 var(--nile-spacing-3-x);\n  }\n\n  .button--has-prefix.button--small {\n    padding-inline-start: var(--nile-spacing-one-half-x);\n  }\n\n  .button--has-prefix.button--small .button__label {\n    padding-inline-start: var(--nile-spacing-one-half-x);\n  }\n\n  .button--has-prefix.button--medium {\n    padding-inline-start: var(--nile-spacing-2-x);\n  }\n\n  .button--has-prefix.button--medium .button__label {\n    padding-inline-start: var(--nile-spacing-2-x);\n  }\n\n  .button--has-prefix.button--large {\n    padding-inline-start: var(--nile-spacing-2-x);\n  }\n\n  .button--has-prefix.button--large .button__label {\n    padding-inline-start: var(--nile-spacing-2-x);\n  }\n\n  .button--has-suffix.button--small,\n  .button--caret.button--small {\n    padding-inline-end: var(--nile-spacing-one-half-x);\n  }\n\n  .button--has-suffix.button--small .button__label,\n  .button--caret.button--small .button__label {\n    padding-inline-end: var(--nile-spacing-one-half-x);\n  }\n\n  .button--has-suffix.button--medium,\n  .button--caret.button--medium {\n    padding-inline-end: var(--nile-spacing-2-x);\n  }\n\n  .button--has-suffix.button--medium .button__label,\n  .button--caret.button--medium .button__label {\n    padding-inline-end: var(--nile-spacing-2-x);\n  }\n\n  .button--has-suffix.button--large,\n  .button--caret.button--large {\n    padding-inline-end: var(--nile-spacing-2-x);\n  }\n\n  .button--has-suffix.button--large .button__label,\n  .button--caret.button--large .button__label {\n    padding-inline-end: var(--nile-spacing-2-x);\n  }\n`;\n"]}

package/.rollup.cache/Users/ravisankar/repos/design-system/packages/nile-elements/dist/src/nile-button/nile-button.d.ts

@@ -0,0 +1,133 @@
+import '../nile-icon';
+import type { CSSResultGroup } from 'lit';
+import type { NileFormControl } from '../internal/nile-element';
+import NileElement from '../internal/nile-element';
+/**
+ * @summary Buttons represent actions that are available to the user.
+ * @status stable
+ * @since 2.0
+ *
+ * @dependency nile-icon
+ * @dependency nile-spinner
+ *
+ * @event nile-blur - Emitted when the button loses focus.
+ * @event nile-focus - Emitted when the button gains focus.
+ * @event nile-invalid - Emitted when the form control has been checked for validity and its constraints aren't satisfied.
+ *
+ * @slot - The button's label.
+ * @slot prefix - A presentational prefix icon or similar element.
+ * @slot suffix - A presentational suffix icon or similar element.
+ *
+ * @csspart base - The component's base wrapper.
+ * @csspart prefix - The container that wraps the prefix.
+ * @csspart label - The button's label.
+ * @csspart suffix - The container that wraps the suffix.
+ * @csspart caret - The button's caret icon, an `<nile-icon>` element.
+ */
+export declare class NileButton extends NileElement implements NileFormControl {
+    static styles: CSSResultGroup;
+    private readonly formControlController;
+    private readonly hasSlotController;
+    button: HTMLButtonElement | HTMLLinkElement;
+    private hasFocus;
+    invalid: boolean;
+    title: string;
+    /** The button's theme variant. */
+    variant: 'primary' | 'secondary' | 'tertiary' | 'caution';
+    /** The button's size. */
+    size: 'small' | 'medium' | 'large';
+    /** Draws the button with a caret. Used to indicate that the button triggers a dropdown menu or similar behavior. */
+    caret: boolean;
+    /** Disables the button. */
+    disabled: boolean;
+    /** Draws the button in a loading state. */
+    loading: boolean;
+    /** Draws an outlined button. */
+    outline: boolean;
+    /** Draws a pill-style button with rounded edges. */
+    pill: boolean;
+    /**
+     * Draws a circular icon button. When this attribute is present, the button expects a single `<nile-icon>` in the
+     * default slot.
+     */
+    circle: boolean;
+    /**
+     * The type of button. Note that the default value is `button` instead of `submit`, which is opposite of how native
+     * `<button>` elements behave. When the type is `submit`, the button will submit the surrounding form.
+     */
+    type: 'button' | 'submit' | 'reset';
+    /**
+     * The name of the button, submitted as a name/value pair with form data, but only when this button is the submitter.
+     * This attribute is ignored when `href` is present.
+     */
+    name: string;
+    /**
+     * The value of the button, submitted as a pair with the button's name as part of the form data, but only when this
+     * button is the submitter. This attribute is ignored when `href` is present.
+     */
+    value: string;
+    /** When set, the underlying button will be rendered as an `<a>` with this `href` instead of a `<button>`. */
+    href: string;
+    /** Tells the browser where to open the link. Only used when `href` is present. */
+    target: '_blank' | '_parent' | '_self' | '_top';
+    /**
+     * When using `href`, this attribute will map to the underlying link's `rel` attribute. Unlike regular links, the
+     * default is `noreferrer noopener` to prevent security exploits. However, if you're using `target` to point to a
+     * specific tab/window, this will prevent that from working correctly. You can remove or change the default value by
+     * setting the attribute to an empty string or a value of your choice, respectively.
+     */
+    rel: string;
+    /** Tells the browser to download the linked file as this filename. Only used when `href` is present. */
+    download?: string;
+    /**
+     * The "form owner" to associate the button with. If omitted, the closest containing form will be used instead. The
+     * value of this attribute must be an id of a form in the same document or shadow root as the button.
+     */
+    form: string;
+    /** Used to override the form owner's `action` attribute. */
+    formAction: string;
+    /** Used to override the form owner's `enctype` attribute.  */
+    formEnctype: 'application/x-www-form-urlencoded' | 'multipart/form-data' | 'text/plain';
+    /** Used to override the form owner's `method` attribute.  */
+    formMethod: 'post' | 'get';
+    /** Used to override the form owner's `novalidate` attribute. */
+    formNoValidate: boolean;
+    /** Used to override the form owner's `target` attribute. */
+    formTarget: '_self' | '_blank' | '_parent' | '_top' | string;
+    /** Gets the validity state object */
+    get validity(): ValidityState;
+    /** Gets the validation message */
+    get validationMessage(): string;
+    connectedCallback(): void;
+    disconnectedCallback(): void;
+    firstUpdated(): void;
+    private handleBlur;
+    private handleFocus;
+    private handleClick;
+    private handleHostClick;
+    private handleInvalid;
+    private isButton;
+    private isLink;
+    handleDisabledChange(): void;
+    /** Simulates a click on the button. */
+    click(): void;
+    /** Sets focus on the button. */
+    focus(options?: FocusOptions): void;
+    /** Removes focus from the button. */
+    blur(): void;
+    /** Checks for validity but does not show a validation message. Returns `true` when valid and `false` when invalid. */
+    checkValidity(): boolean;
+    /** Gets the associated form, if one exists. */
+    getForm(): HTMLFormElement | null;
+    /** Checks for validity and shows the browser's validation message if the control is invalid. */
+    reportValidity(): boolean;
+    /** Sets a custom validation message. Pass an empty string to restore validity. */
+    setCustomValidity(message: string): void;
+    render(): import("lit-html").TemplateResult<1 | 2>;
+}
+export default NileButton;
+declare global {
+    interface HTMLElementTagNameMap {
+        'nile-button': NileButton;
+    }
+}