@lumston/ds-angular 0.0.4 → 0.0.5

package/styles/components/feedback/alert/alert.styles.css

@@ -0,0 +1,304 @@
+/* ═══════════════════════════════════════════════════════════════════════════
+   Alert — ls-alert
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+:host {
+  display: contents;
+}
+
+/* ── Base ─────────────────────────────────────────────────────────────── */
+
+.alert {
+  display: flex;
+  align-items: flex-start;
+  gap: 12px;
+  padding: 12px 16px;
+  border-radius: var(--ls-border-radius-md, 6px);
+  font-family: var(--ls-font-family, 'Nunito', sans-serif);
+  font-size: 14px;
+  line-height: 1.5;
+  position: relative;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+/* ── Icon ─────────────────────────────────────────────────────────────── */
+
+.alert-icon {
+  flex-shrink: 0;
+  width: 24px;
+  height: 24px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.alert-icon svg {
+  width: 100%;
+  height: 100%;
+}
+
+/* ── Content ──────────────────────────────────────────────────────────── */
+
+.alert-content {
+  flex: 1;
+  min-width: 0;
+}
+
+.alert-title {
+  font-weight: 600;
+  margin-bottom: 4px;
+}
+
+.alert-message {
+  padding-top: 2px;
+  font-weight: 400;
+}
+
+/* ── Close Button ─────────────────────────────────────────────────────── */
+
+.alert-close {
+  flex-shrink: 0;
+  background: none;
+  border: none;
+  cursor: pointer;
+  padding: 4px;
+  border-radius: 4px;
+  color: inherit;
+  opacity: 0.7;
+  transition: opacity var(--ls-transition-duration, 300ms);
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.alert-close:hover {
+  opacity: 1;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   Default Variant — subtle background + left 4px border
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.alert-default-success {
+  background-color: var(--ls-color-success-light);
+  border-left: 4px solid var(--ls-color-success);
+  color: var(--ls-color-success);
+}
+
+.alert-default-error {
+  background-color: var(--ls-color-danger-light);
+  border-left: 4px solid var(--ls-color-danger);
+  color: var(--ls-color-danger);
+}
+
+.alert-default-warning {
+  background-color: var(--ls-color-warning-light);
+  border-left: 4px solid var(--ls-color-warning);
+  color: var(--ls-color-warning);
+}
+
+.alert-default-info {
+  background-color: var(--ls-color-info-light);
+  border-left: 4px solid var(--ls-color-info);
+  color: var(--ls-color-info);
+}
+
+.alert-default-primary {
+  background-color: var(--ls-color-primary-light);
+  border-left: 4px solid var(--ls-color-primary);
+  color: var(--ls-color-primary);
+}
+
+.alert-default-secondary {
+  background-color: var(--ls-color-secondary-light);
+  border-left: 4px solid var(--ls-color-secondary);
+  color: var(--ls-color-secondary);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   Filled Variant — solid background + white text
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.alert-filled-success {
+  background-color: var(--ls-color-success);
+  color: #ffffff;
+}
+
+.alert-filled-error {
+  background-color: var(--ls-color-danger);
+  color: #ffffff;
+}
+
+.alert-filled-warning {
+  background-color: var(--ls-color-warning);
+  color: #ffffff;
+}
+
+.alert-filled-info {
+  background-color: var(--ls-color-info);
+  color: #ffffff;
+}
+
+.alert-filled-primary {
+  background-color: var(--ls-color-primary);
+  color: #ffffff;
+}
+
+.alert-filled-secondary {
+  background-color: var(--ls-color-secondary);
+  color: #ffffff;
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   Outlined Variant — border only + transparent background
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.alert-outlined-success {
+  background-color: transparent;
+  border: 1px solid var(--ls-color-success);
+  color: var(--ls-color-success);
+}
+
+.alert-outlined-error {
+  background-color: transparent;
+  border: 1px solid var(--ls-color-danger);
+  color: var(--ls-color-danger);
+}
+
+.alert-outlined-warning {
+  background-color: transparent;
+  border: 1px solid var(--ls-color-warning);
+  color: var(--ls-color-warning);
+}
+
+.alert-outlined-info {
+  background-color: transparent;
+  border: 1px solid var(--ls-color-info);
+  color: var(--ls-color-info);
+}
+
+.alert-outlined-primary {
+  background-color: transparent;
+  border: 1px solid var(--ls-color-primary);
+  color: var(--ls-color-primary);
+}
+
+.alert-outlined-secondary {
+  background-color: transparent;
+  border: 1px solid var(--ls-color-secondary);
+  color: var(--ls-color-secondary);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   Custom Color Override
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+.alert[style*='--alert-custom-color'] {
+  border-color: var(--alert-custom-color);
+}
+
+.alert-default-success[style*='--alert-custom-color'],
+.alert-default-error[style*='--alert-custom-color'],
+.alert-default-warning[style*='--alert-custom-color'],
+.alert-default-info[style*='--alert-custom-color'],
+.alert-default-primary[style*='--alert-custom-color'],
+.alert-default-secondary[style*='--alert-custom-color'] {
+  border-left-color: var(--alert-custom-color);
+  color: var(--alert-custom-color);
+}
+
+.alert-filled-success[style*='--alert-custom-color'],
+.alert-filled-error[style*='--alert-custom-color'],
+.alert-filled-warning[style*='--alert-custom-color'],
+.alert-filled-info[style*='--alert-custom-color'],
+.alert-filled-primary[style*='--alert-custom-color'],
+.alert-filled-secondary[style*='--alert-custom-color'] {
+  background-color: var(--alert-custom-color);
+}
+
+.alert-outlined-success[style*='--alert-custom-color'],
+.alert-outlined-error[style*='--alert-custom-color'],
+.alert-outlined-warning[style*='--alert-custom-color'],
+.alert-outlined-info[style*='--alert-custom-color'],
+.alert-outlined-primary[style*='--alert-custom-color'],
+.alert-outlined-secondary[style*='--alert-custom-color'] {
+  border-color: var(--alert-custom-color);
+  color: var(--alert-custom-color);
+}
+
+/* ═══════════════════════════════════════════════════════════════════════════
+   Dark Mode
+   ═══════════════════════════════════════════════════════════════════════════ */
+
+/* ── Default Variant — Dark ──────────────────────────────────────────── */
+
+body.dark .alert-default-success {
+  background-color: var(--ls-color-success-dark-light);
+  border-left-color: var(--ls-color-success);
+  color: var(--ls-color-success);
+}
+
+body.dark .alert-default-error {
+  background-color: var(--ls-color-danger-dark-light);
+  border-left-color: var(--ls-color-danger);
+  color: var(--ls-color-danger);
+}
+
+body.dark .alert-default-warning {
+  background-color: var(--ls-color-warning-dark-light);
+  border-left-color: var(--ls-color-warning);
+  color: var(--ls-color-warning);
+}
+
+body.dark .alert-default-info {
+  background-color: var(--ls-color-info-dark-light);
+  border-left-color: var(--ls-color-info);
+  color: var(--ls-color-info);
+}
+
+body.dark .alert-default-primary {
+  background-color: var(--ls-color-primary-dark-light);
+  border-left-color: var(--ls-color-primary);
+  color: var(--ls-color-primary);
+}
+
+body.dark .alert-default-secondary {
+  background-color: var(--ls-color-secondary-dark-light);
+  border-left-color: var(--ls-color-secondary);
+  color: var(--ls-color-secondary);
+}
+
+/* ── Filled Variant — Dark (no change needed, solid bg is already high contrast) ── */
+
+/* ── Outlined Variant — Dark ─────────────────────────────────────────── */
+
+body.dark .alert-outlined-success {
+  border-color: var(--ls-color-success);
+  color: var(--ls-color-success);
+}
+
+body.dark .alert-outlined-error {
+  border-color: var(--ls-color-danger);
+  color: var(--ls-color-danger);
+}
+
+body.dark .alert-outlined-warning {
+  border-color: var(--ls-color-warning);
+  color: var(--ls-color-warning);
+}
+
+body.dark .alert-outlined-info {
+  border-color: var(--ls-color-info);
+  color: var(--ls-color-info);
+}
+
+body.dark .alert-outlined-primary {
+  border-color: var(--ls-color-primary);
+  color: var(--ls-color-primary);
+}
+
+body.dark .alert-outlined-secondary {
+  border-color: var(--ls-color-secondary);
+  color: var(--ls-color-secondary);
+}

package/styles/components/feedback/loader/loader.styles.css

@@ -0,0 +1,132 @@
+/* Loader Component — Circular SVG Spinner */
+
+/* === Host === */
+:host {
+  display: contents;
+}
+
+/* === SVG Container === */
+.loader-svg {
+  display: inline-block;
+  vertical-align: middle;
+  transform-origin: center;
+}
+
+/* === Size Modifiers === */
+.loader-sm {
+  width: 16px;
+  height: 16px;
+}
+
+.loader-md {
+  width: 32px;
+  height: 32px;
+}
+
+.loader-lg {
+  width: 48px;
+  height: 48px;
+}
+
+/* === Track Circle === */
+.loader-track {
+  stroke: #e0e0e0;
+}
+
+/* === Indicator Circle === */
+.loader-indicator {
+  stroke-linecap: round;
+  transform-origin: center;
+  transform: rotate(-90deg);
+  transition: stroke-dashoffset var(--ls-transition-duration) ease;
+}
+
+/* === Determinate === */
+.loader-determinate {
+  transition: stroke-dashoffset var(--ls-transition-duration) ease;
+}
+
+/* === Indeterminate (on SVG container) === */
+.loader-svg.loader-indeterminate {
+  animation: ls-loader-rotate 1.4s linear infinite;
+}
+
+/* === Indeterminate indicator stroke morph === */
+.loader-indicator.loader-indeterminate {
+  animation: ls-loader-dash 1.4s ease-in-out infinite;
+  stroke-linecap: round;
+}
+
+/* === Buffer Circle === */
+.loader-buffer {
+  stroke-linecap: round;
+  transform-origin: center;
+  transform: rotate(-90deg);
+  opacity: 0.3;
+  transition: stroke-dashoffset var(--ls-transition-duration) ease;
+}
+
+/* === Animations === */
+@keyframes ls-loader-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes ls-loader-dash {
+  0% {
+    stroke-dasharray: 1, 125.66;
+    stroke-dashoffset: 0;
+  }
+  50% {
+    stroke-dasharray: 89, 125.66;
+    stroke-dashoffset: -35;
+  }
+  100% {
+    stroke-dasharray: 89, 125.66;
+    stroke-dashoffset: -124;
+  }
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Color Modifiers (stroke)
+   ══════════════════════════════════════════════════════════════════════ */
+
+.loader-primary {
+  stroke: var(--ls-color-primary);
+}
+
+.loader-secondary {
+  stroke: var(--ls-color-secondary);
+}
+
+.loader-error {
+  stroke: var(--ls-color-danger);
+}
+
+.loader-info {
+  stroke: var(--ls-color-info);
+}
+
+.loader-success {
+  stroke: var(--ls-color-success);
+}
+
+.loader-warning {
+  stroke: var(--ls-color-warning);
+}
+
+.loader-inherit {
+  stroke: currentColor;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Dark Mode
+   ══════════════════════════════════════════════════════════════════════ */
+
+body.dark .loader-track {
+  stroke: #374151;
+}

package/styles/components/feedback/progress-bar/progress-bar.styles.css

@@ -0,0 +1,193 @@
+/* ProgressBar Component — Linear Track + Indicator */
+
+/* === Host === */
+:host {
+  display: contents;
+}
+
+/* === Wrapper === */
+.progress-bar-wrapper {
+  display: flex;
+  align-items: center;
+  width: 100%;
+  gap: 8px;
+}
+
+/* === Track === */
+.progress-bar-track {
+  position: relative;
+  width: 100%;
+  background-color: #e5e7eb;
+  border-radius: var(--ls-border-radius-full);
+  overflow: hidden;
+}
+
+/* === Size Modifiers (track height) === */
+.progress-bar-sm {
+  height: 4px;
+}
+
+.progress-bar-md {
+  height: 8px;
+}
+
+.progress-bar-lg {
+  height: 16px;
+}
+
+.progress-bar-xl {
+  height: 24px;
+}
+
+/* === Indicator (fill bar) === */
+.progress-bar-indicator {
+  height: 100%;
+  border-radius: var(--ls-border-radius-full);
+  transition: width var(--ls-transition-duration) ease;
+  position: relative;
+}
+
+/* === Stripe Variant === */
+.progress-bar-stripe {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 1rem 1rem;
+}
+
+/* === Animated Variant (stripe + moving) === */
+.progress-bar-animated {
+  background-image: linear-gradient(
+    45deg,
+    rgba(255, 255, 255, 0.15) 25%,
+    transparent 25%,
+    transparent 50%,
+    rgba(255, 255, 255, 0.15) 50%,
+    rgba(255, 255, 255, 0.15) 75%,
+    transparent 75%,
+    transparent
+  );
+  background-size: 1rem 1rem;
+  animation: ls-progress-bar-stripes 1s linear infinite;
+}
+
+/* === Indeterminate Variant === */
+.progress-bar-indeterminate {
+  /* Modificado para mayor fluidez visual */
+  animation: ls-progress-bar-indeterminate 1.5s cubic-bezier(0.65, 0.815, 0.735, 0.395) infinite;
+  width: 35% !important;
+  position: absolute;
+}
+
+/* === Animations === */
+@keyframes ls-progress-bar-stripes {
+  0% {
+    background-position: 1rem 0;
+  }
+  100% {
+    background-position: 0 0;
+  }
+}
+
+@keyframes ls-progress-bar-indeterminate {
+  0% {
+    transform: translateX(-100%);
+  }
+  100% {
+    /* Modificado a 300% para que el barrido cubra todo el track */
+    transform: translateX(300%);
+  }
+}
+
+/* === Label === */
+.progress-bar-label {
+  font-size: 0.625rem;
+  font-weight: 600;
+  white-space: nowrap;
+  line-height: 1;
+}
+
+.progress-bar-label-inside {
+  position: absolute;
+  top: 50%;
+  transform: translate(-100%, -50%);
+  margin-left: -4px;
+  z-index: 2;
+  transition: left var(--ls-transition-duration) ease;
+  pointer-events: none;
+}
+
+.progress-bar-label-dark.progress-bar-label-inside {
+  transform: translate(4px, -50%);
+}
+
+.progress-bar-label-right {
+  flex-shrink: 0;
+  font-size: 0.75rem;
+  color: #1f2937;
+}
+
+/* === Label Contrast === */
+.progress-bar-label-dark {
+  color: #1f2937;
+}
+
+.progress-bar-label-light {
+  color: #ffffff;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Color Modifiers (background-color)
+   ══════════════════════════════════════════════════════════════════════ */
+
+.progress-bar-primary {
+  background-color: var(--ls-color-primary);
+}
+
+.progress-bar-secondary {
+  background-color: var(--ls-color-secondary);
+}
+
+.progress-bar-error {
+  background-color: var(--ls-color-danger);
+}
+
+.progress-bar-info {
+  background-color: var(--ls-color-info);
+}
+
+.progress-bar-success {
+  background-color: var(--ls-color-success);
+}
+
+.progress-bar-warning {
+  background-color: var(--ls-color-warning);
+}
+
+.progress-bar-inherit {
+  background-color: currentColor;
+}
+
+/* ══════════════════════════════════════════════════════════════════════
+   Dark Mode
+   ══════════════════════════════════════════════════════════════════════ */
+
+body.dark .progress-bar-track {
+  background-color: #374151;
+}
+
+body.dark .progress-bar-label-right {
+  color: #e5e7eb;
+}
+
+/* Agregado para visibilidad del label oscuro sobre track oscuro */
+body.dark .progress-bar-label-dark {
+  color: #f3f4f6;
+}

package/styles/components/icon/icon.styles.css

@@ -0,0 +1,11 @@
+/* Icon Component — Pure CSS */
+
+:host {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+span {
+    display: contents;
+}