@synergy-design-system/components 0.1.0 → 1.0.0-main.10

package/dist/chunks/{chunk.O3LUPMYG.js → chunk.Y7DVVKVJ.js}

@@ -1,13 +1,72 @@
+import {
+  input_custom_styles_default
+} from "./chunk.W46CFM2R.js";
 import {
   component_styles_default
-} from "./chunk.4NMNW5OM.js";
+} from "./chunk.O7USYXBT.js";
 
 // src/components/input/input.styles.ts
-import { css as css2 } from "lit";
+import { css as css3 } from "lit";
 
 // src/styles/form-control.styles.ts
+import { css as css2 } from "lit";
+
+// src/styles/form-control.custom.styles.ts
 import { css } from "lit";
-var form_control_styles_default = css`
+var form_control_custom_styles_default = css` 
+
+   /* Label */
+  .form-control--has-label .form-control__label {
+   font-weight: var(--syn-font-weight-semibold);
+  }
+
+  .form-control--has-label.form-control--small .form-control__label {
+    margin-bottom: var(--syn-spacing-x-small);
+  }
+  
+  .form-control--has-label.form-control--medium .form-control__label {
+    margin-bottom: var(--syn-input-spacing-small);
+  }
+
+  .form-control--has-label.form-control--large .form-control__label {
+    margin-bottom: var(--syn-input-spacing-medium);
+  }
+
+    /* Help text */
+  .form-control--has-help-text .form-control__help-text {
+    margin-top: var(--syn-spacing-2x-small);
+  }
+
+  .form-control--small.form-control--has-prefix .input__control  {
+    padding: var(--syn-spacing-3x-small) 0;
+  }
+
+  .form-control--has-prefix.form-control--medium .input__control {
+    padding: var(--syn-spacing-x-small) 0;
+  }
+
+  .form-control--large.form-control--has-prefix .input__control {
+   padding: var(--syn-input-spacing-small) 0;
+  }
+
+    /* ERROR */
+  
+  :host([data-user-invalid]) .form-control__help-text {
+    color: var(--syn-input-help-text-color-error);
+   }
+
+    /* DISABLED */
+
+  :host([disabled]) .form-control--has-label .form-control__label,
+  :host([disabled]) .form-control--has-help-text .form-control__help-text {
+    cursor: not-allowed;
+    opacity: 0.5;
+  }
+
+`;
+
+// src/styles/form-control.styles.ts
+var form_control_styles_default = css2`
 	/* stylelint-disable */
   .form-control .form-control__label {
     display: none;
@@ -64,10 +123,12 @@ var form_control_styles_default = css`
   .form-control--has-help-text.form-control--radio-group .form-control__help-text {
     margin-top: var(--syn-spacing-2x-small);
   }
+
+  ${form_control_custom_styles_default}
 `;
 
 // src/components/input/input.styles.ts
-var input_styles_default = css2`
+var input_styles_default = css3`
 	/* stylelint-disable */
   ${component_styles_default}
   ${form_control_styles_default}
@@ -132,25 +193,25 @@ var input_styles_default = css2`
     color: var(--syn-input-placeholder-color-disabled);
   }
 
-  /* Filled inputs */
-  .input--filled {
+  /* Readonly inputs */
+  .input--readonly {
     border: none;
-    background-color: var(--syn-input-filled-background-color);
+    background-color: var(--syn-input-readonly-background-color);
     color: var(--syn-input-color);
   }
 
-  .input--filled:hover:not(.input--disabled) {
-    background-color: var(--syn-input-filled-background-color-hover);
+  .input--readonly:hover:not(.input--disabled) {
+    background-color: var(--syn-input-readonly-background-color-hover);
   }
 
-  .input--filled.input--focused:not(.input--disabled) {
-    background-color: var(--syn-input-filled-background-color-focus);
+  .input--readonly.input--focused:not(.input--disabled) {
+    background-color: var(--syn-input-readonly-background-color-focus);
     outline: var(--syn-focus-ring);
     outline-offset: var(--syn-focus-ring-offset);
   }
 
-  .input--filled.input--disabled {
-    background-color: var(--syn-input-filled-background-color-disabled);
+  .input--readonly.input--disabled {
+    background-color: var(--syn-input-readonly-background-color-disabled);
     opacity: 0.5;
     cursor: not-allowed;
   }
@@ -188,11 +249,11 @@ var input_styles_default = css2`
     caret-color: var(--syn-input-color);
   }
 
-  .input--filled .input__control:-webkit-autofill,
-  .input--filled .input__control:-webkit-autofill:hover,
-  .input--filled .input__control:-webkit-autofill:focus,
-  .input--filled .input__control:-webkit-autofill:active {
-    box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-filled-background-color) inset !important;
+  .input--readonly .input__control:-webkit-autofill,
+  .input--readonly .input__control:-webkit-autofill:hover,
+  .input--readonly .input__control:-webkit-autofill:focus,
+  .input--readonly .input__control:-webkit-autofill:active {
+    box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-readonly-background-color) inset !important;
   }
 
   .input__control::placeholder {
@@ -365,8 +426,11 @@ var input_styles_default = css2`
   .input--no-spin-buttons input[type='number'] {
     -moz-appearance: textfield;
   }
+
+  ${input_custom_styles_default}
 `;
 
 export {
   input_styles_default
 };
+//# sourceMappingURL=chunk.Y7DVVKVJ.js.map

package/dist/chunks/chunk.Y7DVVKVJ.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../src/components/input/input.styles.ts", "../../src/styles/form-control.styles.ts", "../../src/styles/form-control.custom.styles.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\nimport customStyles from './input.custom.styles.js';\nimport componentStyles from '../../styles/component.styles.js';\nimport formControlStyles from '../../styles/form-control.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n  ${componentStyles}\n  ${formControlStyles}\n\n  :host {\n    display: block;\n  }\n\n  .input {\n    flex: 1 1 auto;\n    display: inline-flex;\n    align-items: stretch;\n    justify-content: start;\n    position: relative;\n    width: 100%;\n    font-family: var(--syn-input-font-family);\n    font-weight: var(--syn-input-font-weight);\n    letter-spacing: var(--syn-input-letter-spacing);\n    vertical-align: middle;\n    overflow: hidden;\n    cursor: text;\n    transition:\n      var(--syn-transition-fast) color,\n      var(--syn-transition-fast) border,\n      var(--syn-transition-fast) box-shadow,\n      var(--syn-transition-fast) background-color;\n  }\n\n  /* Standard inputs */\n  .input--standard {\n    background-color: var(--syn-input-background-color);\n    border: solid var(--syn-input-border-width) var(--syn-input-border-color);\n  }\n\n  .input--standard:hover:not(.input--disabled) {\n    background-color: var(--syn-input-background-color-hover);\n    border-color: var(--syn-input-border-color-hover);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) {\n    background-color: var(--syn-input-background-color-focus);\n    border-color: var(--syn-input-border-color-focus);\n    box-shadow: 0 0 0 var(--syn-focus-ring-width) var(--syn-input-focus-ring-color);\n  }\n\n  .input--standard.input--focused:not(.input--disabled) .input__control {\n    color: var(--syn-input-color-focus);\n  }\n\n  .input--standard.input--disabled {\n    background-color: var(--syn-input-background-color-disabled);\n    border-color: var(--syn-input-border-color-disabled);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input--standard.input--disabled .input__control {\n    color: var(--syn-input-color-disabled);\n  }\n\n  .input--standard.input--disabled .input__control::placeholder {\n    color: var(--syn-input-placeholder-color-disabled);\n  }\n\n  /* Readonly inputs */\n  .input--readonly {\n    border: none;\n    background-color: var(--syn-input-readonly-background-color);\n    color: var(--syn-input-color);\n  }\n\n  .input--readonly:hover:not(.input--disabled) {\n    background-color: var(--syn-input-readonly-background-color-hover);\n  }\n\n  .input--readonly.input--focused:not(.input--disabled) {\n    background-color: var(--syn-input-readonly-background-color-focus);\n    outline: var(--syn-focus-ring);\n    outline-offset: var(--syn-focus-ring-offset);\n  }\n\n  .input--readonly.input--disabled {\n    background-color: var(--syn-input-readonly-background-color-disabled);\n    opacity: 0.5;\n    cursor: not-allowed;\n  }\n\n  .input__control {\n    flex: 1 1 auto;\n    font-family: inherit;\n    font-size: inherit;\n    font-weight: inherit;\n    min-width: 0;\n    height: 100%;\n    color: var(--syn-input-color);\n    border: none;\n    background: inherit;\n    box-shadow: none;\n    padding: 0;\n    margin: 0;\n    cursor: inherit;\n    -webkit-appearance: none;\n  }\n\n  .input__control::-webkit-search-decoration,\n  .input__control::-webkit-search-cancel-button,\n  .input__control::-webkit-search-results-button,\n  .input__control::-webkit-search-results-decoration {\n    -webkit-appearance: none;\n  }\n\n  .input__control:-webkit-autofill,\n  .input__control:-webkit-autofill:hover,\n  .input__control:-webkit-autofill:focus,\n  .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-background-color-hover) inset !important;\n    -webkit-text-fill-color: var(--syn-color-primary-500);\n    caret-color: var(--syn-input-color);\n  }\n\n  .input--readonly .input__control:-webkit-autofill,\n  .input--readonly .input__control:-webkit-autofill:hover,\n  .input--readonly .input__control:-webkit-autofill:focus,\n  .input--readonly .input__control:-webkit-autofill:active {\n    box-shadow: 0 0 0 var(--syn-input-height-large) var(--syn-input-readonly-background-color) inset !important;\n  }\n\n  .input__control::placeholder {\n    color: var(--syn-input-placeholder-color);\n    user-select: none;\n    -webkit-user-select: none;\n  }\n\n  .input:hover:not(.input--disabled) .input__control {\n    color: var(--syn-input-color-hover);\n  }\n\n  .input__control:focus {\n    outline: none;\n  }\n\n  .input__prefix,\n  .input__suffix {\n    display: inline-flex;\n    flex: 0 0 auto;\n    align-items: center;\n    cursor: default;\n  }\n\n  .input__prefix ::slotted(syn-icon),\n  .input__suffix ::slotted(syn-icon) {\n    color: var(--syn-input-icon-color);\n  }\n\n  /*\n   * Size modifiers\n   */\n\n  .input--small {\n    border-radius: var(--syn-input-border-radius-small);\n    font-size: var(--syn-input-font-size-small);\n    height: var(--syn-input-height-small);\n  }\n\n  .input--small .input__control {\n    height: calc(var(--syn-input-height-small) - var(--syn-input-border-width) * 2);\n    padding: 0 var(--syn-input-spacing-small);\n  }\n\n  .input--small .input__clear,\n  .input--small .input__password-toggle {\n    width: calc(1em + var(--syn-input-spacing-small) * 2);\n  }\n\n  .input--small .input__prefix ::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-small);\n  }\n\n  .input--small .input__suffix ::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-small);\n  }\n\n  .input--medium {\n    border-radius: var(--syn-input-border-radius-medium);\n    font-size: var(--syn-input-font-size-medium);\n    height: var(--syn-input-height-medium);\n  }\n\n  .input--medium .input__control {\n    height: calc(var(--syn-input-height-medium) - var(--syn-input-border-width) * 2);\n    padding: 0 var(--syn-input-spacing-medium);\n  }\n\n  .input--medium .input__clear,\n  .input--medium .input__password-toggle {\n    width: calc(1em + var(--syn-input-spacing-medium) * 2);\n  }\n\n  .input--medium .input__prefix ::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-medium);\n  }\n\n  .input--medium .input__suffix ::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-medium);\n  }\n\n  .input--large {\n    border-radius: var(--syn-input-border-radius-large);\n    font-size: var(--syn-input-font-size-large);\n    height: var(--syn-input-height-large);\n  }\n\n  .input--large .input__control {\n    height: calc(var(--syn-input-height-large) - var(--syn-input-border-width) * 2);\n    padding: 0 var(--syn-input-spacing-large);\n  }\n\n  .input--large .input__clear,\n  .input--large .input__password-toggle {\n    width: calc(1em + var(--syn-input-spacing-large) * 2);\n  }\n\n  .input--large .input__prefix ::slotted(*) {\n    margin-inline-start: var(--syn-input-spacing-large);\n  }\n\n  .input--large .input__suffix ::slotted(*) {\n    margin-inline-end: var(--syn-input-spacing-large);\n  }\n\n  /*\n   * Pill modifier\n   */\n\n  .input--pill.input--small {\n    border-radius: var(--syn-input-height-small);\n  }\n\n  .input--pill.input--medium {\n    border-radius: var(--syn-input-height-medium);\n  }\n\n  .input--pill.input--large {\n    border-radius: var(--syn-input-height-large);\n  }\n\n  /*\n   * Clearable + Password Toggle\n   */\n\n  .input__clear:not(.input__clear--visible) {\n    visibility: hidden;\n  }\n\n  .input__clear,\n  .input__password-toggle {\n    display: inline-flex;\n    align-items: center;\n    justify-content: center;\n    font-size: inherit;\n    color: var(--syn-input-icon-color);\n    border: none;\n    background: none;\n    padding: 0;\n    transition: var(--syn-transition-fast) color;\n    cursor: pointer;\n  }\n\n  .input__clear:hover,\n  .input__password-toggle:hover {\n    color: var(--syn-input-icon-color-hover);\n  }\n\n  .input__clear:focus,\n  .input__password-toggle:focus {\n    outline: none;\n  }\n\n  .input--empty .input__clear {\n    visibility: hidden;\n  }\n\n  /* Don't show the browser's password toggle in Edge */\n  ::-ms-reveal {\n    display: none;\n  }\n\n  /* Hide the built-in number spinner */\n  .input--no-spin-buttons input[type='number']::-webkit-outer-spin-button,\n  .input--no-spin-buttons input[type='number']::-webkit-inner-spin-button {\n    -webkit-appearance: none;\n    display: none;\n  }\n\n  .input--no-spin-buttons input[type='number'] {\n    -moz-appearance: textfield;\n  }\n\n  ${customStyles}\n`;\n\n", "// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport { css } from 'lit';\nimport customStyles from './form-control.custom.styles.js';\n\nexport default css`\n\t/* stylelint-disable */\n  .form-control .form-control__label {\n    display: none;\n  }\n\n  .form-control .form-control__help-text {\n    display: none;\n  }\n\n  /* Label */\n  .form-control--has-label .form-control__label {\n    display: inline-block;\n    color: var(--syn-input-label-color);\n    margin-bottom: var(--syn-spacing-3x-small);\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    font-size: var(--syn-input-label-font-size-small);\n  }\n\n  .form-control--has-label.form-control--medium .form-control__label {\n    font-size: var(--syn-input-label-font-size-medium);\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    font-size: var(--syn-input-label-font-size-large);\n  }\n\n  :host([required]) .form-control--has-label .form-control__label::after {\n    content: var(--syn-input-required-content);\n    margin-inline-start: var(--syn-input-required-content-offset);\n    color: var(--syn-input-required-content-color);\n  }\n\n  /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    display: block;\n    color: var(--syn-input-help-text-color);\n    margin-top: var(--syn-spacing-3x-small);\n  }\n\n  .form-control--has-help-text.form-control--small .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-small);\n  }\n\n  .form-control--has-help-text.form-control--medium .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-medium);\n  }\n\n  .form-control--has-help-text.form-control--large .form-control__help-text {\n    font-size: var(--syn-input-help-text-font-size-large);\n  }\n\n  .form-control--has-help-text.form-control--radio-group .form-control__help-text {\n    margin-top: var(--syn-spacing-2x-small);\n  }\n\n  ${customStyles}\n`;\n\n", "import { css } from 'lit';\n\nexport default css` \n\n   /* Label */\n  .form-control--has-label .form-control__label {\n   font-weight: var(--syn-font-weight-semibold);\n  }\n\n  .form-control--has-label.form-control--small .form-control__label {\n    margin-bottom: var(--syn-spacing-x-small);\n  }\n  \n  .form-control--has-label.form-control--medium .form-control__label {\n    margin-bottom: var(--syn-input-spacing-small);\n  }\n\n  .form-control--has-label.form-control--large .form-control__label {\n    margin-bottom: var(--syn-input-spacing-medium);\n  }\n\n    /* Help text */\n  .form-control--has-help-text .form-control__help-text {\n    margin-top: var(--syn-spacing-2x-small);\n  }\n\n  .form-control--small.form-control--has-prefix .input__control  {\n    padding: var(--syn-spacing-3x-small) 0;\n  }\n\n  .form-control--has-prefix.form-control--medium .input__control {\n    padding: var(--syn-spacing-x-small) 0;\n  }\n\n  .form-control--large.form-control--has-prefix .input__control {\n   padding: var(--syn-input-spacing-small) 0;\n  }\n\n    /* ERROR */\n  \n  :host([data-user-invalid]) .form-control__help-text {\n    color: var(--syn-input-help-text-color-error);\n   }\n\n    /* DISABLED */\n\n  :host([disabled]) .form-control--has-label .form-control__label,\n  :host([disabled]) .form-control--has-help-text .form-control__help-text {\n    cursor: not-allowed;\n    opacity: 0.5;\n  }\n\n`;\n"],
+  "mappings": ";;;;;;;;AAMA,SAAS,OAAAA,YAAW;;;ACApB,SAAS,OAAAC,YAAW;;;ACNpB,SAAS,WAAW;AAEpB,IAAO,qCAAQ;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;;;ADOf,IAAO,8BAAQC;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IA0DX,kCAAY;AAAA;;;ADxDhB,IAAO,uBAAQC;AAAA;AAAA,IAEX,wBAAe;AAAA,IACf,2BAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA,IAwSjB,2BAAY;AAAA;",
+  "names": ["css", "css", "css", "css"]
+}

package/dist/components/button/button.component.d.ts

@@ -41,7 +41,7 @@ export default class SynButton extends SynergyElement implements SynergyFormCont
     invalid: boolean;
     title: string;
     /** The button's theme variant. */
-    variant: 'default' | 'primary' | 'success' | 'neutral' | 'warning' | 'danger' | 'text';
+    variant: 'filled' | 'outline' | 'text';
     /** 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. */
@@ -50,15 +50,6 @@ export default class SynButton extends SynergyElement implements SynergyFormCont
     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 `<syn-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.

package/dist/components/button/button.component.js

@@ -1,21 +1,24 @@
 import {
   SynButton
-} from "../../chunks/chunk.HSF5YXAS.js";
-import "../../chunks/chunk.Q5SD5LHE.js";
-import "../../chunks/chunk.Y5USHY74.js";
-import "../../chunks/chunk.QPNUJNT5.js";
-import "../../chunks/chunk.Z6AW3P62.js";
-import "../../chunks/chunk.NBKDLFEY.js";
-import "../../chunks/chunk.SVIWEI6P.js";
-import "../../chunks/chunk.2DA7CIOQ.js";
-import "../../chunks/chunk.7XI5LKCC.js";
-import "../../chunks/chunk.VRTJZYIC.js";
-import "../../chunks/chunk.2CFEYJLE.js";
-import "../../chunks/chunk.2A3352EO.js";
-import "../../chunks/chunk.MAS2SHYD.js";
-import "../../chunks/chunk.HQUF2ZAX.js";
-import "../../chunks/chunk.4NMNW5OM.js";
-import "../../chunks/chunk.PM7NIY3M.js";
+} from "../../chunks/chunk.OLZ3GIFL.js";
+import "../../chunks/chunk.5FQRRIZP.js";
+import "../../chunks/chunk.N2I6HVX3.js";
+import "../../chunks/chunk.XGXFE6IF.js";
+import "../../chunks/chunk.R6VNLE6N.js";
+import "../../chunks/chunk.A3SKDWCT.js";
+import "../../chunks/chunk.WDCAHRYG.js";
+import "../../chunks/chunk.GHPQ7ZMD.js";
+import "../../chunks/chunk.IFBY43YE.js";
+import "../../chunks/chunk.OEWBEV4Z.js";
+import "../../chunks/chunk.LE4ARJTE.js";
+import "../../chunks/chunk.5OIEI73E.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.U7ZJ22QM.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.BREU4ILT.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
 export {
   SynButton as default
 };
+//# sourceMappingURL=button.component.js.map

package/dist/components/button/button.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/button/button.custom.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/button/button.custom.styles.js

@@ -0,0 +1,8 @@
+import {
+  button_custom_styles_default
+} from "../../chunks/chunk.IFBY43YE.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
+export {
+  button_custom_styles_default as default
+};
+//# sourceMappingURL=button.custom.styles.js.map

package/dist/components/button/button.custom.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/button/button.js

@@ -1,25 +1,25 @@
 import {
-  SynButton
-} from "../../chunks/chunk.HSF5YXAS.js";
-import "../../chunks/chunk.Q5SD5LHE.js";
-import "../../chunks/chunk.Y5USHY74.js";
-import "../../chunks/chunk.QPNUJNT5.js";
-import "../../chunks/chunk.Z6AW3P62.js";
-import "../../chunks/chunk.NBKDLFEY.js";
-import "../../chunks/chunk.SVIWEI6P.js";
-import "../../chunks/chunk.2DA7CIOQ.js";
-import "../../chunks/chunk.7XI5LKCC.js";
-import "../../chunks/chunk.VRTJZYIC.js";
-import "../../chunks/chunk.2CFEYJLE.js";
-import "../../chunks/chunk.2A3352EO.js";
-import "../../chunks/chunk.MAS2SHYD.js";
-import "../../chunks/chunk.HQUF2ZAX.js";
-import "../../chunks/chunk.4NMNW5OM.js";
-import "../../chunks/chunk.PM7NIY3M.js";
-
-// src/components/button/button.ts
-var button_default = SynButton;
-SynButton.define("syn-button");
+  button_default
+} from "../../chunks/chunk.R55DOPNK.js";
+import "../../chunks/chunk.OLZ3GIFL.js";
+import "../../chunks/chunk.5FQRRIZP.js";
+import "../../chunks/chunk.N2I6HVX3.js";
+import "../../chunks/chunk.XGXFE6IF.js";
+import "../../chunks/chunk.R6VNLE6N.js";
+import "../../chunks/chunk.A3SKDWCT.js";
+import "../../chunks/chunk.WDCAHRYG.js";
+import "../../chunks/chunk.GHPQ7ZMD.js";
+import "../../chunks/chunk.IFBY43YE.js";
+import "../../chunks/chunk.OEWBEV4Z.js";
+import "../../chunks/chunk.LE4ARJTE.js";
+import "../../chunks/chunk.5OIEI73E.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.U7ZJ22QM.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.BREU4ILT.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
 export {
   button_default as default
 };
+//# sourceMappingURL=button.js.map

package/dist/components/button/button.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/button/button.styles.js

@@ -1,8 +1,10 @@
 import {
   button_styles_default
-} from "../../chunks/chunk.Q5SD5LHE.js";
-import "../../chunks/chunk.4NMNW5OM.js";
-import "../../chunks/chunk.PM7NIY3M.js";
+} from "../../chunks/chunk.GHPQ7ZMD.js";
+import "../../chunks/chunk.IFBY43YE.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
 export {
   button_styles_default as default
 };
+//# sourceMappingURL=button.styles.js.map

package/dist/components/button/button.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/checkbox/checkbox.custom.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;

package/dist/components/checkbox/checkbox.custom.styles.js

@@ -0,0 +1,11 @@
+import "../../chunks/chunk.DJOAQ4JU.js";
+
+// src/components/checkbox/checkbox.custom.styles.ts
+import { css } from "lit";
+var checkbox_custom_styles_default = css`
+  /* Write custom CSS here */
+`;
+export {
+  checkbox_custom_styles_default as default
+};
+//# sourceMappingURL=checkbox.custom.styles.js.map

package/dist/components/checkbox/checkbox.custom.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/checkbox/checkbox.custom.styles.ts"],
+  "sourcesContent": ["import { css } from 'lit';\n\nexport default css`\n  /* Write custom CSS here */\n`;\n"],
+  "mappings": ";;;AAAA,SAAS,WAAW;AAEpB,IAAO,iCAAQ;AAAA;AAAA;",
+  "names": []
+}

package/dist/components/icon/icon.component.js

@@ -1,14 +1,15 @@
 import {
   SynIcon
-} from "../../chunks/chunk.NBKDLFEY.js";
-import "../../chunks/chunk.SVIWEI6P.js";
-import "../../chunks/chunk.2DA7CIOQ.js";
-import "../../chunks/chunk.7XI5LKCC.js";
-import "../../chunks/chunk.VRTJZYIC.js";
-import "../../chunks/chunk.2CFEYJLE.js";
-import "../../chunks/chunk.HQUF2ZAX.js";
-import "../../chunks/chunk.4NMNW5OM.js";
-import "../../chunks/chunk.PM7NIY3M.js";
+} from "../../chunks/chunk.OEWBEV4Z.js";
+import "../../chunks/chunk.LE4ARJTE.js";
+import "../../chunks/chunk.5OIEI73E.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.U7ZJ22QM.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.BREU4ILT.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
 export {
   SynIcon as default
 };
+//# sourceMappingURL=icon.component.js.map

package/dist/components/icon/icon.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/icon/icon.js

@@ -1,14 +1,14 @@
 import {
   SynIcon
-} from "../../chunks/chunk.NBKDLFEY.js";
-import "../../chunks/chunk.SVIWEI6P.js";
-import "../../chunks/chunk.2DA7CIOQ.js";
-import "../../chunks/chunk.7XI5LKCC.js";
-import "../../chunks/chunk.VRTJZYIC.js";
-import "../../chunks/chunk.2CFEYJLE.js";
-import "../../chunks/chunk.HQUF2ZAX.js";
-import "../../chunks/chunk.4NMNW5OM.js";
-import "../../chunks/chunk.PM7NIY3M.js";
+} from "../../chunks/chunk.OEWBEV4Z.js";
+import "../../chunks/chunk.LE4ARJTE.js";
+import "../../chunks/chunk.5OIEI73E.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.U7ZJ22QM.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.BREU4ILT.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
 
 // src/components/icon/icon.ts
 var icon_default = SynIcon;
@@ -16,3 +16,4 @@ SynIcon.define("syn-icon");
 export {
   icon_default as default
 };
+//# sourceMappingURL=icon.js.map

package/dist/components/icon/icon.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": ["../../../src/components/icon/icon.ts"],
+  "sourcesContent": ["// ---------------------------------------------------------------------\n// \uD83D\uDD12 AUTOGENERATED BY VENDORISM\n// Removing this comment will prevent it from being managed by it.\n// ---------------------------------------------------------------------\n\n/* eslint-disable */\nimport SynIcon from './icon.component.js';\n\nexport * from './icon.component.js';\nexport default SynIcon;\n\nSynIcon.define('syn-icon');\n\ndeclare global {\n  interface HTMLElementTagNameMap {\n    'syn-icon': SynIcon;\n  }\n}\n"],
+  "mappings": ";;;;;;;;;;;;;AASA,IAAO,eAAQ;AAEf,QAAQ,OAAO,UAAU;",
+  "names": []
+}

package/dist/components/icon/icon.styles.js

@@ -1,8 +1,9 @@
 import {
   icon_styles_default
-} from "../../chunks/chunk.SVIWEI6P.js";
-import "../../chunks/chunk.4NMNW5OM.js";
-import "../../chunks/chunk.PM7NIY3M.js";
+} from "../../chunks/chunk.BREU4ILT.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
 export {
   icon_styles_default as default
 };
+//# sourceMappingURL=icon.styles.js.map

package/dist/components/icon/icon.styles.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/icon/library.default.js

@@ -1,8 +1,9 @@
 import {
   library_default_default
-} from "../../chunks/chunk.7XI5LKCC.js";
-import "../../chunks/chunk.2CFEYJLE.js";
-import "../../chunks/chunk.PM7NIY3M.js";
+} from "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
 export {
   library_default_default as default
 };
+//# sourceMappingURL=library.default.js.map

package/dist/components/icon/library.default.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/icon/library.js

@@ -4,11 +4,11 @@ import {
   unregisterIconLibrary,
   unwatchIcon,
   watchIcon
-} from "../../chunks/chunk.2DA7CIOQ.js";
-import "../../chunks/chunk.7XI5LKCC.js";
-import "../../chunks/chunk.VRTJZYIC.js";
-import "../../chunks/chunk.2CFEYJLE.js";
-import "../../chunks/chunk.PM7NIY3M.js";
+} from "../../chunks/chunk.5OIEI73E.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.U7ZJ22QM.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
 export {
   getIconLibrary,
   registerIconLibrary,
@@ -16,3 +16,4 @@ export {
   unwatchIcon,
   watchIcon
 };
+//# sourceMappingURL=library.js.map

package/dist/components/icon/library.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/icon/library.system.js

@@ -1,7 +1,8 @@
 import {
   library_system_default
-} from "../../chunks/chunk.VRTJZYIC.js";
-import "../../chunks/chunk.PM7NIY3M.js";
+} from "../../chunks/chunk.U7ZJ22QM.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
 export {
   library_system_default as default
 };
+//# sourceMappingURL=library.system.js.map

package/dist/components/icon/library.system.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/input/input.component.d.ts

@@ -62,10 +62,6 @@ export default class SynInput extends SynergyElement implements SynergyFormContr
     defaultValue: string;
     /** The input's size. */
     size: 'small' | 'medium' | 'large';
-    /** Draws a filled input. */
-    filled: boolean;
-    /** Draws a pill-style input with rounded edges. */
-    pill: boolean;
     /** The input's label. If you need to display HTML, use the `label` slot instead. */
     label: string;
     /** The input's help text. If you need to display HTML, use the `help-text` slot instead. */

package/dist/components/input/input.component.js

@@ -1,19 +1,22 @@
 import {
   SynInput
-} from "../../chunks/chunk.XVEDHRRP.js";
-import "../../chunks/chunk.O3LUPMYG.js";
-import "../../chunks/chunk.Z6AW3P62.js";
-import "../../chunks/chunk.NBKDLFEY.js";
-import "../../chunks/chunk.SVIWEI6P.js";
-import "../../chunks/chunk.2DA7CIOQ.js";
-import "../../chunks/chunk.7XI5LKCC.js";
-import "../../chunks/chunk.VRTJZYIC.js";
-import "../../chunks/chunk.2CFEYJLE.js";
-import "../../chunks/chunk.2A3352EO.js";
-import "../../chunks/chunk.MAS2SHYD.js";
-import "../../chunks/chunk.HQUF2ZAX.js";
-import "../../chunks/chunk.4NMNW5OM.js";
-import "../../chunks/chunk.PM7NIY3M.js";
+} from "../../chunks/chunk.RLGMLXIP.js";
+import "../../chunks/chunk.Y7DVVKVJ.js";
+import "../../chunks/chunk.W46CFM2R.js";
+import "../../chunks/chunk.XGXFE6IF.js";
+import "../../chunks/chunk.R6VNLE6N.js";
+import "../../chunks/chunk.A3SKDWCT.js";
+import "../../chunks/chunk.WDCAHRYG.js";
+import "../../chunks/chunk.OEWBEV4Z.js";
+import "../../chunks/chunk.LE4ARJTE.js";
+import "../../chunks/chunk.5OIEI73E.js";
+import "../../chunks/chunk.6C4JXZZN.js";
+import "../../chunks/chunk.U7ZJ22QM.js";
+import "../../chunks/chunk.C7624ITA.js";
+import "../../chunks/chunk.BREU4ILT.js";
+import "../../chunks/chunk.O7USYXBT.js";
+import "../../chunks/chunk.DJOAQ4JU.js";
 export {
   SynInput as default
 };
+//# sourceMappingURL=input.component.js.map

package/dist/components/input/input.component.js.map

@@ -0,0 +1,7 @@
+{
+  "version": 3,
+  "sources": [],
+  "sourcesContent": [],
+  "mappings": "",
+  "names": []
+}

package/dist/components/input/input.custom.styles.d.ts

@@ -0,0 +1,2 @@
+declare const _default: import("lit").CSSResult;
+export default _default;