@lumston/ds-angular 0.0.5 → 0.0.7

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

@@ -1,304 +0,0 @@
-/* ═══════════════════════════════════════════════════════════════════════════
-   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

@@ -1,132 +0,0 @@
-/* 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

@@ -1,193 +0,0 @@
-/* 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

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