@ardium-pl/ui 5.0.0-alpha.106

package/themes/default/card.scss

@@ -0,0 +1,181 @@
+@use '../variables' as ARD;
+
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    // --ard-card-bg: ;
+    // --ard-card-rounded-corner-radius: ;
+    // --ard-card-border-color: ;
+
+    --ard-card-content-padding-top: 0;
+    --ard-card-content-padding-right: 1em;
+    --ard-card-content-padding-bottom: 0;
+    --ard-card-content-padding-left: 1em;
+
+    --ard-card-header-padding-top: 0.5em;
+    --ard-card-header-padding-right: 1em;
+    --ard-card-header-padding-bottom: 0;
+    --ard-card-header-padding-left: 1em;
+    --ard-card-header-margin-bottom: 1em;
+
+    // --ard-card-title-color: ;
+    --ard-card-title-font-size: 1.375em;
+    --ard-card-title-letter-spacing: 0.0125em;
+    --ard-card-title-font-weight: 500;
+    --ard-card-title-margin-top: 0;
+    // --ard-card-subtitle-color: ;
+    --ard-card-subtitle-font-size: 1.375em;
+    --ard-card-subtitle-letter-spacing: 0.0125em;
+    --ard-card-subtitle-font-weight: 500;
+    --ard-card-subtitle-margin-top: 0;
+
+    --ard-card-avatar-size: 3em;
+
+    --ard-card-action-buttons-padding: 0.5em;
+  }
+
+  ard-card,
+  .ard-card {
+    position: relative;
+    background: var(--ard-card-bg, #{ARD.$bg});
+    box-sizing: border-box;
+    width: 100%;
+    height: max-content;
+    display: block;
+
+    //! appearances
+    &.ard-appearance-outlined {
+      border: 1px solid var(--ard-card-border-color, #{ARD.$border-light});
+    }
+    &.ard-appearance-raised {
+      box-shadow: ARD.$card-shadow;
+    }
+    //! variants
+    &.ard-variant-sharp {
+      border-radius: 0;
+    }
+    &.ard-variant-rounded {
+      border-radius: var(--ard-card-rounded-corner-radius, var(--ard-rounded-corner-radius, 0.375rem));
+    }
+  }
+  //! header
+  ard-card-header {
+    padding-top: var(--ard-card-header-padding-top, var(--ard-card-content-padding-top, 0.5em));
+    padding-right: var(--ard-card-header-padding-right, var(--ard-card-content-padding-right, 1em));
+    padding-bottom: var(--ard-card-header-padding-bottom, var(--ard-card-content-padding-bottom, 0));
+    padding-left: var(--ard-card-header-padding-left, var(--ard-card-content-padding-left, 1em));
+    display: flex;
+    align-items: center;
+    margin-bottom: var(--ard-card-header-margin-bottom, 1em);
+    max-width: 100%;
+
+    .ard-card-header-title-container {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+    }
+
+    &:first-child {
+      padding-top: var(--ard-card-content-padding-top, 0.5em);
+    }
+  }
+  .ard-card-title,
+  .ard-card-subtitle {
+    display: block;
+    margin: 0;
+  }
+  .ard-card-title {
+    color: var(--ard-card-title-color, #{ARD.$text});
+    font-size: var(--ard-card-title-font-size, 1.375em);
+    letter-spacing: var(--ard-card-title-letter-spacing, 0.0125em);
+    font-weight: var(--ard-card-title-font-weight, 500);
+    margin-top: var(--ard-card-title-margin-top, 0);
+  }
+  .ard-card-subtitle {
+    color: var(--ard-card-subtitle-color, #{ARD.$text3});
+    font-size: var(--ard-card-subtitle-font-size, 1.375em);
+    letter-spacing: var(--ard-card-subtitle-letter-spacing, 0.0125em);
+    font-weight: var(--ard-card-subtitle-font-weight, 500);
+    margin-top: var(--ard-card-subtitle-margin-top, 0);
+  }
+  .ard-card-avatar {
+    display: block;
+    width: var(--ard-card-avatar-size, 3em);
+    height: var(--ard-card-avatar-size, 3em);
+    border-radius: 9999px;
+    flex-shrink: 0;
+    object-fit: cover;
+
+    ~ .ard-card-header-title-container {
+      padding-top: var(--ard-card-content-padding-top, 0);
+      padding-right: var(--ard-card-content-padding-right, 1em);
+      padding-bottom: var(--ard-card-content-padding-bottom, 0);
+      padding-left: var(--ard-card-content-padding-left, 0);
+    }
+  }
+  //! image
+  .ard-card-image {
+    position: relative;
+    box-sizing: border-box;
+    background-repeat: no-repeat;
+    background-position: center;
+    background-size: cover;
+    max-width: 100%;
+
+    &:first-child {
+      border-top-left-radius: inherit;
+      border-top-right-radius: inherit;
+    }
+    &:last-child {
+      border-bottom-left-radius: inherit;
+      border-bottom-right-radius: inherit;
+    }
+  }
+  ard-card,
+  .ard-card {
+    .ard-appearance-outlined .ard-image {
+      border-bottom: 1px solid var(--ard-card-border-color, #{ARD.$border-light});
+    }
+  }
+  //! content
+  .ard-card-content {
+    padding-top: var(--ard-card-content-padding-top, var(--ard-card-content-padding, 0));
+    padding-right: var(--ard-card-content-padding-right, var(--ard-card-content-padding, 1em));
+    padding-bottom: var(--ard-card-content-padding-bottom, var(--ard-card-content-padding, 0));
+    padding-left: var(--ard-card-content-padding-left, var(--ard-card-content-padding, 1em));
+    display: block;
+    max-width: 100%;
+
+    &:first-child {
+      padding-top: var(--ard-card-content-padding-top, var(--ard-card-content-padding, 0));
+    }
+    &:last-child {
+      padding-bottom: var(--ard-card-content-padding-bottom, var(--ard-card-content-padding, 0));
+    }
+
+    > :last-child {
+      margin-bottom: 0;
+    }
+  }
+  //! action buttons
+  .ard-card-action-buttons {
+    padding: var(--ard-card-action-buttons-padding, 0.5em);
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    max-width: 100%;
+
+    &.ard-align-left {
+      justify-content: flex-start;
+    }
+    &.ard-align-center {
+      justify-content: center;
+    }
+    &.ard-align-right {
+      justify-content: flex-end;
+    }
+  }
+  //! footer
+  //no styling needed
+}

package/themes/default/checkbox-list.scss

@@ -0,0 +1,125 @@
+@use './mixins' as CM;
+@use '../variables' as ARD;
+
+@layer ard-ui {
+  :root {
+    --ard-checkbox-list-padding: 0.375rem 0;
+    --ard-checkbox-list-item-hover-opacity: 5%;
+    --ard-checkbox-list-item-active-opacity: 15%;
+    --ard-checkbox-list-item-height: 3rem;
+    --ard-checkbox-list-item-height-compact: 2rem;
+    --ard-checkbox-list-checkbox-min-width: 1.25rem;
+    --ard-checkbox-list-checkbox-padding: 0.625rem;
+    --ard-checkbox-list-item-padding: 0 0.5rem 0 0;
+    --ard-checkbox-list-gap: 0;
+    --ard-checkbox-list-gap-compact: 0;
+    --ard-checkbox-list-item-gap: 0.5rem;
+    --ard-checkbox-list-item-gap-compact: 0.325rem;
+    --ard-checkbox-list-disabled-opacity: 50%;
+    // --ard-checkbox-list-readonly-cursor: ;
+  }
+
+  .ard-checkbox-list {
+    display: flex;
+    flex-direction: column;
+    padding: var(--ard-checkbox-list-padding, 0.375rem 0);
+    gap: var(--ard-checkbox-list-gap, 0);
+
+    .ard-checkbox-list__item {
+      display: flex;
+      align-items: center;
+      justify-content: stretch;
+      gap: var(--ard-checkbox-list-item-gap, 0.5rem);
+      padding: var(--ard-checkbox-list-item-padding, 0 0.5rem 0 0);
+      position: relative;
+      cursor: pointer;
+      height: max-content;
+      min-height: var(--ard-checkbox-list-item-height, 3rem);
+
+      > label {
+        pointer-events: none;
+        user-select: none;
+        flex-grow: 1;
+        padding: 0;
+        min-height: var(--ard-checkbox-list-item-height, 3rem);
+        display: flex;
+        align-items: center;
+      }
+      > .ard-focus-overlay {
+        @include CM.focus-overlay();
+        background: ARD.$overlay;
+      }
+      &.ard-item-highlighted {
+        > .ard-focus-overlay {
+          opacity: var(--ard-checkbox-list-item-hover-opacity, 5%);
+        }
+      }
+      &:active {
+        > .ard-focus-overlay {
+          opacity: var(--ard-checkbox-list-item-active-opacity, 15%);
+        }
+      }
+      ard-checkbox {
+        padding: var(--ard-checkbox-list-checkbox-padding, 0.625rem);
+        min-width: var(--ard-checkbox-list-checkbox-min-width, 1.25rem);
+
+        .ard-checkbox {
+          .ard-focus-overlay {
+            display: none;
+          }
+        }
+      }
+      &.ard-item-disabled {
+        pointer-events: none;
+
+        > label {
+          opacity: var(--ard-checkbox-list-disabled-opacity, 50%);
+        }
+      }
+    }
+    &.ard-compact {
+      gap: var(--ard-checkbox-list-gap-compact, 0);
+
+      .ard-checkbox-list__item {
+        gap: var(--ard-checkbox-list-item-gap-compact, 0.325rem);
+        height: var(--ard-checkbox-list-item-height-compact, 2rem);
+      }
+    }
+    //! ALIGN TYPES
+    &.ard-align-left-clumped,
+    &.ard-align-right-split {
+      .ard-checkbox-list__item {
+        label {
+          justify-content: flex-start;
+        }
+      }
+    }
+    &.ard-align-left-split,
+    &.ard-align-right-clumped {
+      .ard-checkbox-list__item {
+        label {
+          justify-content: flex-end;
+        }
+      }
+    }
+    &.ard-align-right-split,
+    &.ard-align-right-clumped {
+      .ard-checkbox-list__item {
+        flex-direction: row-reverse;
+      }
+    }
+  }
+  .ard-disabled, .ard-readonly {
+    .ard-checkbox-list {
+      .ard-focus-overlay {
+        display: none;
+      }
+    }
+  }
+  .ard-disabled > .ard-checkbox-list {
+    pointer-events: none;
+  }
+  .ard-readonly > .ard-checkbox-list {
+    cursor: var(--ard-checkbox-list-readonly-cursor, var(--ard-readonly-cursor, default));
+  }
+}

package/themes/default/checkbox.scss

@@ -0,0 +1,123 @@
+@use './mixins' as defaultMixins;
+@use './coloring' as coloringMixins;
+@use '../variables' as ARD;
+
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    --ard-checkbox-size: 1.25em;
+    --ard-checkbox-icon-size: 1.8em;
+    --ard-checkbox-hitbox-offset: -4px;
+    --ard-checkbox-overlay-offset: 0.4em;
+    --ard-checkbox-unselected-disabled-opacity: 40%;
+    --ard-checkbox-indeterminate-disabled-opacity: 50%;
+    --ard-checkbox-selected-disabled-opacity: 50%;
+    --ard-checkbox-alignment: center;
+    --ard-checkbox-spacing: 0.375em;
+    // --ard-checkbox-base-color: ;
+    // --ard-checkbox-readonly-cursor: ;
+    --ard-checkbox-label-font-size: 0.875em;
+    --ard-checkbox-label-font-weight: 400;
+    // --ard-checkbox-label-color: ;
+    --ard-checkbox-label-cursor: pointer;
+    --ard-checkbox-label-disabled-opacity: 50%;
+    --ard-checkbox-label-max-width: 100%;
+  }
+
+  ard-checkbox {
+    display: flex;
+    align-items: var(--ard-checkbox-alignment, center);
+    gap: var(--ard-checkbox-spacing, 0.375em);
+  }
+  .ard-checkbox {
+    @include coloringMixins.typeColors();
+    @include coloringMixins.typeColors('unsel-cmpcl');
+    position: relative;
+    cursor: pointer;
+    user-select: none;
+    width: var(--ard-checkbox-size, 1.25em);
+    height: var(--ard-checkbox-size, 1.25em);
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border: none;
+    background: none;
+    padding: 0;
+    outline: none;
+    color: var(--ard-checkbox-base-color, #{ARD.$text2});
+    font-size: var(--ard-checkbox-icon-size, 1em); // ard-icon component will inherit this font-size to determine its size
+
+    &.ard-color-currentColor.ard-state-selected {
+      color: currentColor;
+    }
+
+    .ard-hitbox {
+      position: absolute;
+      left: var(--ard-checkbox-hitbox-offset, -4px);
+      right: var(--ard-checkbox-hitbox-offset, -4px);
+      bottom: var(--ard-checkbox-hitbox-offset, -4px);
+      top: var(--ard-checkbox-hitbox-offset, -4px);
+    }
+    .ard-focus-overlay {
+      @include defaultMixins.focus-overlay(var(--ard-checkbox-overlay-offset, 0.4em));
+      border-radius: 9999px;
+      background: currentColor;
+    }
+
+    &.ard-checkbox-selected {
+      color: var(--ard-unsel-cmpcl--bg-colored);
+    }
+    &:hover,
+    &:focus {
+      .ard-focus-overlay {
+        opacity: 10%;
+      }
+    }
+    &:active {
+      .ard-focus-overlay {
+        opacity: 20%;
+      }
+    }
+  }
+  //! label
+  .ard-checkbox__label {
+    min-height: var(--ard-checkbox-size, 1.25em);
+    max-width: var(--ard-checkbox-label-max-width, 100%);
+
+    .ard-checkbox__label-inner {
+      display: inline-block;
+      font-size: var(--ard-checkbox-label-font-size, 0.875em);
+      font-weight: var(--ard-checkbox-label-font-weight, 400);
+      color: var(--ard-checkbox-label-color, #{ARD.$text2});
+      cursor: var(--ard-checkbox-label-cursor, pointer);
+    }
+  }
+  //! disabled state
+  ard-checkbox.ard-disabled {
+    > .ard-checkbox {
+      pointer-events: none;
+      opacity: var(--ard-checkbox-unselected-disabled-opacity, 40%);
+
+      &.ard-checkbox-selected {
+        opacity: var(--ard-checkbox-selected-disabled-opacity, 50%);
+      }
+      &.ard-checkbox-indeterminate {
+        opacity: var(--ard-checkbox-indeterminate-disabled-opacity, 50%);
+      }
+    }
+    .ard-checkbox__label {
+      opacity: var(--ard-checkbox-label-disabled-opacity, 50%);
+    }
+  }
+  //! readonly state
+  ard-checkbox.ard-readonly {
+    > .ard-checkbox {
+      cursor: var(--ard-checkbox-readonly-cursor, var(--ard-readonly-cursor, default));
+
+      .ard-focus-overlay {
+        display: none;
+      }
+    }
+  }
+}

package/themes/default/chips.scss

@@ -0,0 +1,269 @@
+@use './mixins' as defaultMixins;
+@use './coloring' as coloringMixins;
+@use './clear-button' as clearButton;
+@use '../variables' as ARD;
+
+@layer ard-ui {
+  // the variables are commented out intentionally
+  // read more in docs/dev/css-variables.md
+  :root {
+    // --ard-chip-font-size: ;
+    // --ard-chip-font-size-compact: ;
+    --ard-chip-margin: 0;
+    --ard-chip-height: 2rem;
+    --ard-chip-height-compact: 1.4375rem;
+    --ard-chip-padding: 0 0.75rem;
+    --ard-chip-padding-compact: 0 0.5625rem;
+    --ard-chip-padding-align-left: 0.125rem;
+    --ard-chip-padding-align-left-deletable: 0.25rem;
+    --ard-chip-padding-align-right: 0.125rem;
+    --ard-chip-padding-align-right-deletable: 0.25rem;
+    --ard-chip-selection-icon-padding: 0.5rem;
+    --ard-chip-selection-icon-margin: -0.125rem;
+    --ard-chip-selection-icon-padding-compact: 0.25rem;
+    --ard-chip-selection-icon-margin-compact: -0.25rem;
+    --ard-chip-content-wrapper-padding: 0.5rem;
+    --ard-chip-selectable-hover-overlay-opacity: 7.5%;
+    --ard-chip-selectable-active-overlay-opacity: 20%;
+    // --ard-chip-filled-unselected-background: ;
+    // --ard-chip-filled-unselected-color: ;
+    // --ard-chip-outlined-strong-selectable-border-color: ;
+    // --ard-chip-outlined-strong-selectable-color: ;
+    --ard-chip-outlined-hover-overlay-opacity: 4%;
+    --ard-chip-outlined-active-overlay-opacity: 10%;
+    --ard-chip-outlined-selected-overlay-opacity: 12%;
+    --ard-chip-outlined-selected-hover-overlay-opacity: 17%;
+    --ard-chip-outlined-selected-focus-overlay-opacity: 0%;
+    --ard-chip-outlined-selected-focus-visible-overlay-opacity: 17%;
+    --ard-chip-outlined-selected-active-overlay-opacity: 22%;
+    --ard-chip-transition: 0.15s ease;
+    --ard-chip-disabled-opacity: 60%;
+    --ard-chip-disabled-selected-opacity: 40%;
+    // --ard-chip-readonly-cursor: ;
+  }
+
+  //! general css
+  .ard-chip-wrapper {
+    @include coloringMixins.typeColors();
+    @include clearButton.clearButton();
+    @include defaultMixins.formVariants();
+
+    font-family: var(--ard-font-family);
+    color: ARD.$text2;
+    background: ARD.$bg;
+    border-radius: var(--ard-variant-border-radius);
+    padding: 0;
+    margin: var(--ard-chip-margin, 0);
+    vertical-align: center;
+    display: flex;
+    align-items: center;
+    font-size: var(--ard-chip-font-size, 0.875rem);
+    position: relative;
+    outline: none;
+    user-select: none;
+    overflow: hidden;
+    height: var(--ard-chip-height, 2rem);
+
+    > .ard-chip-content-wrapper {
+      padding: var(--ard-chip-padding, 0 0.75rem);
+    }
+    > .ard-focus-overlay {
+      @include defaultMixins.focus-overlay;
+      background: ARD.$overlay;
+      border-radius: 0;
+    }
+
+    &.ard-chip-selectable {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+
+      :not(.ard-disabled):not(.ard-readonly) > & {
+        &:hover,
+        &:focus {
+          > .ard-focus-overlay {
+            opacity: var(--ard-chip-selectable-hover-overlay-opacity, 7.5%);
+          }
+        }
+        &:active {
+          > .ard-focus-overlay {
+            opacity: var(--ard-chip-selectable-active-overlay-opacity, 20%);
+          }
+        }
+      }
+
+      .ard-chip-selection-icon {
+        @include defaultMixins.icon;
+
+        &::after {
+          content: '\e876';
+        }
+      }
+    }
+    //! appearances
+    &.ard-appearance-filled,
+    &.ard-appearance-filled-strong {
+      border: 1px solid transparent;
+
+      &.ard-chip-selectable {
+        background-color: var(--ard-chip-filled-unselected-background, #{ARD.$bg-f});
+        color: var(--ard-chip-filled-unselected-color, #{ARD.$text2});
+        transition:
+          color var(--ard-chip-transition, 0.15s ease),
+          border-color var(--ard-chip-transition, 0.15s ease),
+          background-color var(--ard-chip-transition, 0.15s ease);
+
+        &.ard-chip-selected {
+          color: var(--ard-cmpcl--on-bg-colored);
+          background: var(--ard-cmpcl--bg-colored);
+        }
+      }
+    }
+    &.ard-appearance-filled {
+      background: var(--ard-cmpcl--bg-colored-light);
+      color: var(--ard-cmpcl--on-bg-colored-light);
+    }
+    &.ard-appearance-filled-strong {
+      background: var(--ard-cmpcl--bg-colored);
+      color: var(--ard-cmpcl--on-bg-colored);
+    }
+    &.ard-appearance-outlined,
+    &.ard-appearance-outlined-strong {
+      background: transparent;
+      color: var(--ard-cmpcl--content);
+      border: 1px solid var(--ard-cmpcl--bg-colored);
+      border-radius: var(--ard-variant-border-radius);
+      font-weight: 600;
+
+      &.ard-chip-selectable {
+        transition:
+          color var(--ard-chip-transition, 0.15s ease),
+          border-color var(--ard-chip-transition, 0.15s ease);
+
+        > .ard-focus-overlay {
+          opacity: 0;
+          background: var(--ard-cmpcl--bg-colored);
+        }
+        :not(.ard-disabled):not(.ard-readonly) > & {
+          &:hover,
+          &:focus {
+            > .ard-focus-overlay {
+              opacity: var(--ard-chip-outlined-hover-overlay-opacity, 4%);
+            }
+          }
+          &:active {
+            > .ard-focus-overlay {
+              opacity: var(--ard-chip-outlined-active-overlay-opacity, 10%);
+            }
+          }
+        }
+
+        &.ard-chip-selected {
+          color: var(--ard-cmpcl--content);
+          border-color: var(--ard-cmpcl--content);
+
+          > .ard-focus-overlay {
+            opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
+          }
+          :not(.ard-disabled):not(.ard-readonly) > & {
+            &:hover {
+              > .ard-focus-overlay {
+                opacity: var(--ard-chip-outlined-selected-hover-overlay-opacity, 17%);
+              }
+            }
+            &:focus {
+              > .ard-focus-overlay {
+                opacity: var(--ard-chip-outlined-selected-focus-overlay-opacity, 0%);
+              }
+            }
+            &:focus-visible {
+              > .ard-focus-overlay {
+                opacity: var(--ard-chip-outlined-selected-focus-visible-overlay-opacity, 17%);
+              }
+            }
+            &:active {
+              > .ard-focus-overlay {
+                opacity: var(--ard-chip-outlined-selected-active-overlay-opacity, 22%);
+              }
+            }
+          }
+        }
+      }
+    }
+    &.ard-appearance-outlined-strong {
+      > .ard-focus-overlay {
+        opacity: var(--ard-chip-outlined-selected-overlay-opacity, 12%);
+        background: var(--ard-cmpcl--bg-colored);
+      }
+      &.ard-chip-selectable {
+        color: var(--ard-chip-outlined-strong-selectable-color, var(--ard-text2));
+        border: 1px solid var(--ard-chip-outlined-strong-selectable-border-color, var(--ard-detail-light));
+      }
+    }
+
+    //! alignments
+    &.ard-chip-align-left {
+      flex-direction: row;
+      padding-left: var(--ard-chip-padding-align-left, 0.125rem);
+
+      .ard-chip-selection-icon {
+        padding-left: var(--ard-chip-selection-icon-padding, 0.5rem);
+        margin-right: var(--ard-chip-selection-icon-margin, -0.125rem);
+      }
+      &.ard-chip-deletable {
+        padding-left: var(--ard-chip-padding-align-left-deletable, 0.25rem);
+
+        .ard-chip-content-wrapper {
+          padding-left: var(--ard-chip-content-wrapper-padding, 0.5rem);
+        }
+      }
+    }
+    &.ard-chip-align-right {
+      flex-direction: row-reverse;
+      padding-right: var(--ard-chip-padding-align-right, 0.125rem);
+
+      .ard-chip-selection-icon {
+        padding-right: var(--ard-chip-selection-icon-padding, 0.5rem);
+        margin-left: var(--ard-chip-selection-icon-margin, -0.125rem);
+      }
+      &.ard-chip-deletable {
+        padding-right: var(--ard-chip-padding-align-right-deletable, 0.25rem);
+
+        .ard-chip-content-wrapper {
+          padding-right: var(--ard-chip-content-wrapper-padding, 0.5rem);
+        }
+      }
+    }
+    //! compact
+    &.ard-compact {
+      height: var(--ard-chip-height-compact, 1.4375rem);
+      font-size: var(--ard-chip-font-size-compact, 0.8125rem);
+
+      > .ard-chip-content-wrapper {
+        padding: var(--ard-chip-padding-compact, 0 0.5625rem);
+      }
+
+      &.ard-chip-align-left .ard-chip-selection-icon {
+        padding-left: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
+        margin-right: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
+      }
+      &.ard-chip-align-right .ard-chip-selection-icon {
+        padding-right: var(--ard-chip-selection-icon-padding-compact, 0.25rem);
+        margin-left: var(--ard-chip-selection-icon-margin-compact, -0.25rem);
+      }
+    }
+  }
+  //! disabled state
+  .ard-disabled > .ard-chip-wrapper {
+    pointer-events: none;
+    opacity: var(--ard-chip-disabled-opacity, 60%);
+
+    &.ard-chip-selected {
+      opacity: var(--ard-chip-disabled-selected-opacity, 40%);
+    }
+  }
+  //! readonly state
+  .ard-readonly > .ard-chip-wrapper {
+    cursor: var(--ard-chip-readonly-cursor, var(--ard-readonly-cursor, default));
+  }
+}