@clusterenvision/ui-scss 1.94.3

package/src/components/specialty/_ce-atm-card.scss

@@ -0,0 +1,255 @@
+// components/specialty/_ce-atm-card.scss
+// Webcomponent-specific ATM card styles
+
+@use "../../abstracts/functions" as fn;
+
+.ce-atmcard {
+  position: relative;
+  width: var(--ce-atmcard-width, 100%);
+  max-width: var(--ce-atmcard-max-width, 380px);
+  height: var(--ce-atmcard-height, 240px);
+  border-radius: var(--ce-atmcard-radius, #{fn.radius(lg)});
+  border-width: var(--ce-atmcard-border-width, 1px);
+  border-style: var(--ce-atmcard-border-style, solid);
+  border-color: var(--ce-atmcard-border-color, rgba(255, 255, 255, 0.2));
+  padding: var(--ce-atmcard-padding, #{fn.space(lg)});
+  background: var(
+    --ce-atmcard-bg,
+    linear-gradient(135deg, #667eea 0%, #764ba2 100%)
+  );
+  box-shadow: var(--ce-atmcard-shadow, 0 10px 30px rgba(0, 0, 0, 0.2));
+  color: var(--ce-atmcard-color, white);
+  font-family: var(--ce-atmcard-font, 'Courier New', monospace);
+  display: flex;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: hidden;
+
+  // Decorative chip
+  &::before {
+    content: '';
+    position: absolute;
+    top: var(--ce-atmcard-chip-top, #{fn.space(lg)});
+    right: var(--ce-atmcard-chip-right, #{fn.space(lg)});
+    width: var(--ce-atmcard-chip-width, 50px);
+    height: var(--ce-atmcard-chip-height, 40px);
+    background: var(
+      --ce-atmcard-chip-bg,
+      linear-gradient(135deg, #ffd700 0%, #ffed4e 100%)
+    );
+    border-radius: var(--ce-atmcard-chip-radius, 4px);
+    opacity: var(--ce-atmcard-chip-opacity, 0.8);
+  }
+
+  // Theme variants
+  &--light {
+    --ce-atmcard-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+    --ce-atmcard-color: white;
+  }
+
+  &--dark {
+    --ce-atmcard-bg: linear-gradient(135deg, #1a1a1a 0%, #2d2d2d 100%);
+    --ce-atmcard-color: white;
+  }
+
+  // Brand variants
+  &--visa {
+    --ce-atmcard-bg: linear-gradient(135deg, #1434CB 0%, #0F2896 100%);
+  }
+
+  &--mastercard {
+    --ce-atmcard-bg: linear-gradient(135deg, #EB001B 0%, #F79E1B 100%);
+  }
+
+  &--amex {
+    --ce-atmcard-bg: linear-gradient(135deg, #006FCF 0%, #0048A0 100%);
+  }
+
+  &--discover {
+    --ce-atmcard-bg: linear-gradient(135deg, #FF6000 0%, #F05A28 100%);
+  }
+
+  &__brand {
+    font-size: var(--ce-atmcard-brand-size, 0.875rem);
+    font-weight: var(--ce-atmcard-brand-weight, 600);
+    text-transform: var(--ce-atmcard-brand-transform, uppercase);
+    letter-spacing: var(--ce-atmcard-brand-letter-spacing, 1px);
+    opacity: var(--ce-atmcard-brand-opacity, 0.9);
+    margin-bottom: var(--ce-atmcard-brand-margin-bottom, #{fn.space(sm)});
+  }
+
+  &__chip {
+    position: absolute;
+    top: var(--ce-atmcard-chip-top, #{fn.space(xl)});
+    left: var(--ce-atmcard-chip-left, #{fn.space(lg)});
+    width: var(--ce-atmcard-chip-width, 50px);
+    height: var(--ce-atmcard-chip-height, 40px);
+    background: var(
+      --ce-atmcard-chip-bg,
+      linear-gradient(135deg, #ffd700 0%, #ffed4e 100%)
+    );
+    border-radius: var(--ce-atmcard-chip-radius, 6px);
+    opacity: var(--ce-atmcard-chip-opacity, 0.9);
+
+    &::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: var(--ce-atmcard-chip-inner-width, 30px);
+      height: var(--ce-atmcard-chip-inner-height, 25px);
+      border-width: var(--ce-atmcard-chip-inner-border-width, 2px);
+      border-style: var(--ce-atmcard-chip-inner-border-style, solid);
+      border-color: var(--ce-atmcard-chip-inner-border-color, rgba(0, 0, 0, 0.1));
+      border-radius: var(--ce-atmcard-chip-inner-radius, 2px);
+    }
+  }
+
+  &__number {
+    font-size: var(--ce-atmcard-number-size, 1.5rem);
+    letter-spacing: var(--ce-atmcard-number-letter-spacing, 3px);
+    margin: var(--ce-atmcard-number-margin, #{fn.space(lg)} 0);
+    text-shadow: var(--ce-atmcard-number-shadow, 0 2px 4px rgba(0, 0, 0, 0.2));
+  }
+
+  &__meta {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--ce-atmcard-meta-gap, #{fn.space(lg)});
+  }
+
+  &__holder,
+  &__expiry {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ce-atmcard-meta-field-gap, #{fn.space(xs)});
+
+    span {
+      font-size: var(--ce-atmcard-meta-label-size, 0.625rem);
+      text-transform: var(--ce-atmcard-meta-label-transform, uppercase);
+      letter-spacing: var(--ce-atmcard-meta-label-letter-spacing, 1px);
+      opacity: var(--ce-atmcard-meta-label-opacity, 0.8);
+    }
+
+    strong {
+      font-size: var(--ce-atmcard-meta-value-size, 0.875rem);
+      font-weight: var(--ce-atmcard-meta-value-weight, 600);
+    }
+  }
+
+  &__logo {
+    position: absolute;
+    top: var(--ce-atmcard-logo-top, #{fn.space(md)});
+    right: var(--ce-atmcard-logo-right, #{fn.space(md)});
+    width: var(--ce-atmcard-logo-width, 60px);
+    height: var(--ce-atmcard-logo-height, 40px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    font-size: var(--ce-atmcard-logo-size, 1.5rem);
+    font-weight: var(--ce-atmcard-logo-weight, bold);
+    opacity: var(--ce-atmcard-logo-opacity, 0.8);
+
+    &--visa::after {
+      content: 'VISA';
+      color: var(--ce-atmcard-logo-visa-color, white);
+      font-family: var(--ce-atmcard-logo-font, sans-serif);
+    }
+
+    &--mastercard {
+      &::before {
+        content: '';
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        border-radius: var(--ce-atmcard-logo-radius, var(--ce-radius-circle, 50%));
+        background: var(--ce-atmcard-logo-mastercard-left-bg, #EB001B);
+        left: 0;
+      }
+      &::after {
+        content: '';
+        position: absolute;
+        width: 24px;
+        height: 24px;
+        border-radius: var(--ce-atmcard-logo-radius, var(--ce-radius-circle, 50%));
+        background: var(--ce-atmcard-logo-mastercard-right-bg, #F79E1B);
+        left: 12px;
+      }
+    }
+
+    &--amex::after {
+      content: 'AMEX';
+      color: var(--ce-atmcard-logo-amex-color, white);
+      font-family: var(--ce-atmcard-logo-font, sans-serif);
+      font-size: var(--ce-atmcard-logo-amex-size, 1rem);
+    }
+
+    &--discover::after {
+      content: 'DISCOVER';
+      color: var(--ce-atmcard-logo-discover-color, white);
+      font-family: var(--ce-atmcard-logo-font, sans-serif);
+      font-size: var(--ce-atmcard-logo-discover-size, 0.75rem);
+    }
+  }
+
+  &__number {
+    font-size: var(--ce-atmcard-number-size, 1.5rem);
+    letter-spacing: var(--ce-atmcard-number-letter-spacing, 3px);
+    font-weight: var(--ce-atmcard-number-weight, 500);
+    text-align: center;
+    margin: var(--ce-atmcard-number-margin, #{fn.space(md)} 0);
+    text-shadow: var(--ce-atmcard-number-shadow, 0 2px 4px rgba(0, 0, 0, 0.2));
+  }
+
+  &__details {
+    display: flex;
+    justify-content: space-between;
+    align-items: flex-end;
+    font-size: var(--ce-atmcard-details-size, 0.875rem);
+  }
+
+  &__holder,
+  &__expiry {
+    display: flex;
+    flex-direction: column;
+    gap: var(--ce-atmcard-details-gap, #{fn.space(xs)});
+
+    label {
+      font-size: var(--ce-atmcard-details-label-size, 0.625rem);
+      text-transform: var(--ce-atmcard-details-label-transform, uppercase);
+      letter-spacing: var(--ce-atmcard-details-label-letter-spacing, 0.5px);
+      opacity: var(--ce-atmcard-details-label-opacity, 0.8);
+    }
+
+    strong {
+      font-size: var(--ce-atmcard-details-value-size, 0.875rem);
+      font-weight: var(--ce-atmcard-details-value-weight, 600);
+      text-transform: var(--ce-atmcard-details-value-transform, uppercase);
+    }
+  }
+
+  // Hover effect
+  &:hover {
+    transform: var(--ce-atmcard-hover-transform, translateY(-5px));
+    box-shadow: var(--ce-atmcard-hover-shadow, 0 15px 40px rgba(0, 0, 0, 0.3));
+    transition: all var(--ce-atmcard-hover-transition-duration, 0.3s)
+      var(--ce-atmcard-hover-transition-ease, ease);
+  }
+
+  // Responsive
+  @media (max-width: 480px) {
+    max-width: var(--ce-atmcard-max-width-mobile, 100%);
+    height: var(--ce-atmcard-height-mobile, 200px);
+    padding: var(--ce-atmcard-padding-mobile, #{fn.space(md)});
+
+    &__number {
+      font-size: var(--ce-atmcard-number-size-mobile, 1.25rem);
+      letter-spacing: var(--ce-atmcard-number-letter-spacing-mobile, 2px);
+    }
+
+    &__details {
+      font-size: var(--ce-atmcard-details-size-mobile, 0.75rem);
+    }
+  }
+}

package/src/components/tables/_data-grid.scss

@@ -0,0 +1,92 @@
+// components/tables/_data-grid.scss
+
+@use "../../abstracts/functions" as fn;
+
+// Data Grid Component
+// - Themeable via CSS variables
+// - BEM naming convention
+// - Accessible: keyboard navigation, ARIA roles
+// - Supports sorting, selection, striped rows, sticky header
+
+.data-grid {
+  width: 100%;
+  border-collapse: collapse;
+  background: var(--ce-dg-bg, #{fn.color(white)});
+  color: var(--ce-dg-color, #{fn.color(neutral-ink)});
+  font-size: var(--ce-dg-font-size, 1rem);
+  box-shadow: var(--ce-dg-shadow, #{fn.shadow(xs)});
+
+  &__header {
+    background: var(--ce-dg-header-bg, #{fn.color(neutral-surface)});
+    color: var(--ce-dg-header-color, #{fn.color(neutral-ink)});
+    font-weight: var(--ce-dg-header-weight, 600);
+    position: var(--ce-dg-header-position, sticky);
+    top: var(--ce-dg-header-top, 0);
+    z-index: var(--ce-dg-header-z, 2);
+  }
+
+  &__row {
+    transition: var(--ce-dg-row-transition, background 0.2s);
+    &:nth-child(even) {
+      background: var(--ce-dg-row-stripe, #{fn.color(neutral-soft)});
+    }
+    &:hover {
+      background: var(--ce-dg-row-hover, #{fn.color(neutral-hover)});
+    }
+    &--selected {
+      background: var(--ce-dg-row-selected, #{fn.color(accent-blue-muted)});
+      color: var(--ce-dg-row-selected-color, #{fn.color(accent-blue)});
+    }
+    &--disabled {
+      opacity: var(--ce-dg-row-disabled-opacity, 0.5);
+      pointer-events: var(--ce-dg-row-disabled-events, none);
+    }
+  }
+
+  &__cell {
+    padding: var(--ce-dg-cell-padding, #{fn.space(sm)} #{fn.space(md)});
+    border-bottom: 1px solid var(--ce-dg-cell-border, #{fn.color(gray-200)});
+    text-align: var(--ce-dg-cell-align, left);
+    vertical-align: var(--ce-dg-cell-vertical, middle);
+    outline: var(--ce-dg-cell-outline, none);
+    cursor: var(--ce-dg-cell-cursor, pointer);
+    &--sortable {
+      cursor: var(--ce-dg-cell-sortable-cursor, pointer);
+      -webkit-user-select: none;
+      user-select: none;
+      color: var(--ce-dg-sortable-color, #{fn.color(accent-blue)});
+      &:hover {
+        text-decoration: var(--ce-dg-cell-sortable-decoration, underline);
+      }
+    }
+  }
+
+  &__checkbox {
+    margin: var(--ce-dg-checkbox-margin, 0);
+    vertical-align: var(--ce-dg-checkbox-vertical, middle);
+    accent-color: var(--ce-dg-checkbox-color, #{fn.color(accent-blue)});
+  }
+}
+
+// Accessibility notes:
+// - Use role="grid" on the table, role="row" on rows, role="gridcell" on cells
+// - Keyboard navigation: arrow keys, space/enter to select/sort
+// - Use aria-selected, aria-disabled, aria-sort as needed
+
+// Example CSS variables for theming (add to :root or theme files)
+// :root {
+//   --ce-dg-bg: #fff;
+//   --ce-dg-color: #222;
+//   --ce-dg-font-size: 1rem;
+//   --ce-dg-shadow: 0 1px 4px rgba(0,0,0,0.04);
+//   --ce-dg-header-bg: #f5f7fa;
+//   --ce-dg-header-color: #222;
+//   --ce-dg-row-stripe: #f8fafc;
+//   --ce-dg-row-hover: #e6f0ff;
+//   --ce-dg-row-selected: #d0e7ff;
+//   --ce-dg-row-selected-color: #0078d4;
+//   --ce-dg-cell-padding: 0.75em 1em;
+//   --ce-dg-cell-border: #e0e0e0;
+//   --ce-dg-sortable-color: #0078d4;
+//   --ce-dg-checkbox-color: #0078d4;
+// }

package/src/components/tables/_filter-grid.scss

@@ -0,0 +1,29 @@
+// components/charts/_chart-types.scss
+
+@use "../../abstracts/functions" as fn;
+
+.chart-wrapper {
+  background-color: fn.color(white);
+  padding: fn.space(md);
+  border-radius: fn.radius(sm);
+  box-shadow: fn.shadow(sm);
+  border: 1px solid fn.color(muted);
+  margin-bottom: fn.space(lg);
+
+  &--bar,
+  &--line,
+  &--pie,
+  &--radar {
+    canvas {
+      width: 100% !important;
+      height: 280px !important;
+    }
+  }
+
+  &__title {
+    font-weight: bold;
+    font-size: 1.1rem;
+    margin-bottom: fn.space(sm);
+    color: fn.color(dark);
+  }
+}

package/src/components/tables-lists/_data-table.scss

@@ -0,0 +1,63 @@
+// components/tables-lists/_data-table.scss
+
+@use "../../abstracts/functions" as fn;
+
+.data-table {
+  @extend .table !optional;
+  position: relative;
+
+  .data-table__toolbar {
+    display: flex;
+    justify-content: space-between;
+    margin-bottom: fn.space(md);
+
+    .search-input {
+      max-width: 300px;
+    }
+  }
+
+  .data-table__sort {
+    cursor: pointer;
+
+    &::after {
+      content: ' ⇅';
+      font-size: 0.8rem;
+      color: fn.color(muted);
+    }
+
+    &.asc::after {
+      content: ' ↑';
+    }
+
+    &.desc::after {
+      content: ' ↓';
+    }
+  }
+
+  .data-table__status {
+    font-size: 0.875rem;
+    padding: fn.space(xs);
+    border-radius: fn.radius(sm);
+    background-color: fn.color(light);
+    color: fn.color(dark);
+
+    &--active {
+      background-color: fn.color(success);
+      color: fn.color(white);
+    }
+
+    &--inactive {
+      background-color: fn.color(muted);
+    }
+
+    &--error {
+      background-color: fn.color(danger);
+      color: fn.color(white);
+    }
+  }
+
+  .data-table__actions {
+    display: flex;
+    gap: fn.space(sm);
+  }
+}

package/src/components/tables-lists/_list.scss

@@ -0,0 +1,30 @@
+// components/tables-lists/_list.scss
+
+@use "../../abstracts/functions" as fn;
+
+.list {
+  margin: 0;
+  padding-left: fn.space(lg);
+  color: fn.color(dark);
+  line-height: 1.6;
+
+  &--inline {
+    display: flex;
+    gap: fn.space(md);
+    list-style: none;
+    padding-left: 0;
+  }
+
+  &--unstyled {
+    list-style: none;
+    padding-left: 0;
+  }
+
+  &--bulleted {
+    list-style-type: disc;
+  }
+
+  &--numbered {
+    list-style-type: decimal;
+  }
+}

package/src/components/tables-lists/_table.scss

@@ -0,0 +1,79 @@
+// components/tables-lists/_table.scss
+
+@use "../../abstracts/functions" as fn;
+
+.table {
+  width: var(--ce-table-width, 100%);
+  border-collapse: var(--ce-table-collapse, collapse);
+  font-size: var(--ce-table-size, 0.95rem);
+  background-color: var(
+    --ce-table-bg,
+    var(--theme-table-bg, #{fn.color(white)})
+  );
+
+  thead {
+    background-color: var(
+      --ce-table-thead-bg,
+      var(--theme-table-thead-bg, #{fn.color(light)})
+    );
+    border-bottom: var(
+      --ce-table-thead-border,
+      2px solid var(--theme-table-border, #{fn.color(muted)})
+    );
+  }
+
+  th,
+  td {
+    padding: var(--ce-table-cell-padding, #{fn.space(sm)} #{fn.space(md)});
+    text-align: var(--ce-table-cell-align, left);
+    border-bottom: var(
+      --ce-table-cell-border,
+      1px solid var(--theme-table-border, #{fn.color(muted)})
+    );
+    &:focus-visible {
+      outline: var(
+        --ce-table-cell-focus-outline,
+        2px solid var(--theme-accent, var(--theme-primary))
+      );
+      outline-offset: var(--ce-table-cell-focus-offset, 2px);
+    }
+  }
+
+  th {
+    font-weight: var(--ce-table-th-weight, 600);
+    color: var(
+      --ce-table-th-color,
+      var(--theme-table-th-fg, #{fn.color(dark)})
+    );
+  }
+
+  tbody tr:hover {
+    background-color: var(
+      --ce-table-row-hover,
+      var(--theme-table-row-hover, rgba(fn.color(primary), 0.05))
+    );
+  }
+
+  &--striped tbody tr:nth-child(odd) {
+    background-color: var(
+      --ce-table-row-striped,
+      var(--theme-table-row-striped, #{fn.color(light)})
+    );
+  }
+
+  &--bordered,
+  &--bordered th,
+  &--bordered td {
+    border: var(
+      --ce-table-bordered,
+      1px solid var(--theme-table-border, #{fn.color(muted)})
+    );
+  }
+
+  &--responsive {
+    display: var(--ce-table-responsive-display, block);
+    width: var(--ce-table-responsive-width, 100%);
+    overflow-x: var(--ce-table-responsive-overflow, auto);
+    white-space: var(--ce-table-responsive-nowrap, nowrap);
+  }
+}

package/src/components/tables-lists/_tree-view.scss

@@ -0,0 +1,47 @@
+// components/tables-lists/_tree-view.scss
+
+@use "../../abstracts/functions" as fn;
+
+.tree-view {
+  list-style: none;
+  padding-left: fn.space(md);
+
+  .tree-node {
+    margin-bottom: fn.space(xs);
+    position: relative;
+
+    &__label {
+      cursor: pointer;
+      display: flex;
+      align-items: center;
+      gap: fn.space(xs);
+      padding: fn.space(xs) fn.space(sm);
+      border-radius: fn.radius(sm);
+
+      &:hover {
+        background-color: fn.color(light);
+      }
+
+      &.expanded::before {
+        content: "▼";
+        font-size: 0.75rem;
+        color: fn.color(muted);
+      }
+
+      &::before {
+        content: "▶";
+        font-size: 0.75rem;
+        color: fn.color(muted);
+      }
+    }
+
+    .tree-children {
+      display: none;
+      padding-left: fn.space(md);
+    }
+
+    &.expanded .tree-children {
+      display: block;
+    }
+  }
+}

package/src/layout/_container.scss

@@ -0,0 +1,20 @@
+// layout/_container.scss
+
+@use "../abstracts/functions" as fn;
+
+.container {
+  width: 100%;
+  max-width: 1280px;
+  margin-left: auto;
+  margin-right: auto;
+  padding-left: fn.space(lg);
+  padding-right: fn.space(lg);
+
+  &--fluid {
+    max-width: 100%;
+  }
+
+  &--narrow {
+    max-width: 720px;
+  }
+}

package/src/layout/_footer.scss

@@ -0,0 +1,41 @@
+// layout/_header.scss
+
+@use "../abstracts/functions" as fn;
+
+.header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  background-color: fn.color(primary);
+  color: fn.color(white);
+  padding: fn.space(sm) fn.space(lg);
+  height: 60px;
+  position: sticky;
+  top: 0;
+  z-index: fn.z(sticky);
+
+  .header__logo {
+    font-weight: bold;
+    font-size: 1.25rem;
+  }
+
+  .header__nav {
+    display: flex;
+    gap: fn.space(md);
+
+    a {
+      color: fn.color(white);
+      text-decoration: none;
+
+      &:hover {
+        text-decoration: underline;
+      }
+    }
+  }
+
+  @media (max-width: 768px) {
+    flex-direction: column;
+    height: auto;
+    gap: fn.space(sm);
+  }
+}

package/src/layout/_grid.scss

@@ -0,0 +1,23 @@
+// layout/_grid.scss
+
+@use "../abstracts/functions" as fn;
+
+.grid {
+  display: var(--ce-layout-grid-display, grid);
+  gap: var(--ce-layout-grid-gap, #{fn.space(md)});
+  grid-template-columns: var(
+    --ce-layout-grid-columns,
+    repeat(12, 1fr)
+  );
+}
+
+.grid--2-cols  { grid-template-columns: var(--ce-layout-grid-2-columns, repeat(2, 1fr)); }
+.grid--3-cols  { grid-template-columns: var(--ce-layout-grid-3-columns, repeat(3, 1fr)); }
+.grid--4-cols  { grid-template-columns: var(--ce-layout-grid-4-columns, repeat(4, 1fr)); }
+.grid--6-cols  { grid-template-columns: var(--ce-layout-grid-6-columns, repeat(6, 1fr)); }
+
+@media (max-width: 768px) {
+  .grid--responsive {
+    grid-template-columns: var(--ce-layout-grid-responsive-columns, 1fr);
+  }
+}