@lumston/ds-angular 0.0.5 → 0.0.7

package/styles/components/navigation/breadcrumb/breadcrumb.styles.css

@@ -1,144 +0,0 @@
-:host {
-  display: block;
-  --ls-breadcrumb-main-color: #4361ee;
-}
-
-/* ── Estructura Base (Común a todos) ────────────────────────────────── */
-.ls-breadcrumb {
-  display: flex;
-  align-items: center;
-  flex-wrap: wrap;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-  font-family: var(--ls-font-family, sans-serif);
-  font-size: 0.875rem;
-}
-
-.ls-breadcrumb-item {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.5rem;
-  color: #6c757d; /* Gris término medio para niveles previos */
-}
-
-.ls-breadcrumb-item a {
-  color: inherit;
-  text-decoration: none !important;
-  transition: color 0.2s;
-  border: none;
-}
-
-.ls-breadcrumb-item a:hover {
-  text-decoration: none !important;
-  color: var(--ls-breadcrumb-main-color);
-}
-
-/* Fix para Iconos */
-.ls-breadcrumb-icon {
-  width: 1.15rem;
-  height: 1.15rem;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  color: currentColor;
-}
-
-.ls-breadcrumb-icon svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-/* Separador (Solo para Default y Dotted) */
-.ls-breadcrumb-separator {
-  margin: 0 0.5rem;
-  color: #888ea8;
-  user-select: none;
-}
-
-/* ── Variante: Default (Slash) ─────────────────────────────────────── */
-.ls-breadcrumb--default .ls-breadcrumb-item--active {
-  color: #000000;
-  font-weight: 600;
-}
-
-/* ── Variante: Dotted ─────────────────────────────────────────────── */
-.ls-breadcrumb--dotted .ls-breadcrumb-separator {
-  font-size: 0;
-  display: flex;
-  align-items: center;
-}
-
-.ls-breadcrumb--dotted .ls-breadcrumb-separator::before {
-  content: '';
-  width: 6px;
-  height: 6px;
-  background: var(--ls-breadcrumb-main-color);
-  border-radius: 50%;
-  display: inline-block;
-}
-
-.ls-breadcrumb--dotted .ls-breadcrumb-item--active {
-  color: #000000;
-  font-weight: 600;
-}
-
-/* ── Variante: Arrowed (Geometric Steps) ────────────────────────────── */
-.ls-breadcrumb--arrowed {
-  gap: 0;
-}
-
-.ls-breadcrumb--arrowed .ls-breadcrumb-item {
-  position: relative;
-  background: #e9ecef;
-  padding: 0.5rem 1rem 0.5rem 1.5rem;
-  margin-left: -10px;
-  clip-path: polygon(calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 0% 100%, 12px 50%, 0% 0%);
-  filter: drop-shadow(1px 0 1px rgba(0,0,0,0.08));
-  color: #515365;
-}
-
-.ls-breadcrumb--arrowed .ls-breadcrumb-item:first-child {
-  margin-left: 0;
-  padding-left: 0.75rem;
-  clip-path: polygon(calc(100% - 12px) 0%, 100% 50%, calc(100% - 12px) 100%, 0% 100%, 0% 0%);
-  border-radius: 4px 0 0 4px;
-}
-
-.ls-breadcrumb--arrowed .ls-breadcrumb-item:last-child {
-  padding-right: 1.25rem;
-  clip-path: polygon(100% 0%, 100% 100%, 0% 100%, 12px 50%, 0% 0%);
-  border-radius: 0 4px 4px 0;
-}
-
-.ls-breadcrumb--arrowed .ls-breadcrumb-item--active {
-  background: var(--ls-breadcrumb-main-color) !important;
-  color: #ffffff !important;
-  z-index: 10 !important;
-}
-
-/* Escalera de Z-index para Arrowed */
-.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(1) { z-index: 5; }
-.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(2) { z-index: 4; }
-.ls-breadcrumb--arrowed .ls-breadcrumb-item:nth-child(3) { z-index: 3; }
-
-/* ── Dark Mode ──────────────────────────────────────────────────────── */
-body.dark .ls-breadcrumb-item {
-  color: #bfc9d4;
-}
-
-/* Forzamos blanco en activo para Default y Dotted en Dark Mode */
-body.dark .ls-breadcrumb--default .ls-breadcrumb-item--active,
-body.dark .ls-breadcrumb--dotted .ls-breadcrumb-item--active {
-  color: #ffffff !important;
-}
-
-body.dark .ls-breadcrumb--arrowed .ls-breadcrumb-item:not(.ls-breadcrumb-item--active) {
-  background: #1b2e4b !important;
-  color: #e0e6ed !important;
-}
-
-body.dark .ls-breadcrumb-separator {
-  color: #3b3f5c;
-}

package/styles/components/navigation/pagination/pagination.styles.css

@@ -1,336 +0,0 @@
-/* Pagination Component — Pure CSS */
-
-:host {
-  display: contents;
-}
-
-/* === Nav icons === */
-
-.pg-icon-left {
-  transform: rotate(90deg);
-}
-
-.pg-icon-right {
-  transform: rotate(-90deg);
-}
-
-/* === List === */
-
-.pg-list {
-  display: inline-flex;
-  align-items: center;
-  gap: 0.25rem;
-  list-style: none;
-  margin: 0;
-  padding: 0;
-}
-
-/* === Base item === */
-
-.pg-item {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-weight: 600;
-  cursor: pointer;
-  transition: all var(--ls-transition-duration) ease;
-  border: 2px solid transparent;
-  background: none;
-  outline: none;
-  font-family: var(--ls-font-family);
-  line-height: 1;
-  user-select: none;
-}
-
-/* === Sizes === */
-
-.pg-item-sm {
-  padding: 0.375rem 0.625rem;
-  font-size: 0.75rem;
-  min-width: 1.75rem;
-  height: 1.75rem;
-}
-
-.pg-item-md {
-  padding: 0.5rem 0.875rem;
-  font-size: 0.875rem;
-  min-width: 2.25rem;
-  height: 2.25rem;
-}
-
-.pg-item-lg {
-  padding: 0.625rem 1.25rem;
-  font-size: 1rem;
-  min-width: 2.75rem;
-  height: 2.75rem;
-}
-
-/* === Shapes === */
-
-.pg-item-rounded {
-  border-radius: var(--ls-border-radius-md);
-}
-
-.pg-item-circular {
-  border-radius: var(--ls-border-radius-full);
-  padding-inline: 0;
-}
-
-.pg-item-circular.pg-item-sm {
-  width: 1.75rem;
-}
-
-.pg-item-circular.pg-item-md {
-  width: 2.25rem;
-}
-
-.pg-item-circular.pg-item-lg {
-  width: 2.75rem;
-}
-
-/* === Disabled === */
-
-.pg-item-disabled,
-.pg-item[disabled] {
-  cursor: not-allowed;
-  opacity: 0.6;
-}
-
-/* === Solid variant === */
-
-/* Solid — primary */
-
-.pg-item-solid-primary {
-  background-color: var(--ls-color-white-light);
-  color: var(--ls-color-dark);
-}
-
-.pg-item-solid-primary:not([disabled]):hover {
-  background-color: var(--ls-color-primary);
-  color: var(--ls-color-white);
-}
-
-.pg-item-solid-primary.pg-item-active {
-  background-color: var(--ls-color-primary);
-  color: var(--ls-color-white);
-}
-
-/* Solid — secondary */
-
-.pg-item-solid-secondary {
-  background-color: var(--ls-color-white-light);
-  color: var(--ls-color-dark);
-}
-
-.pg-item-solid-secondary:not([disabled]):hover {
-  background-color: var(--ls-color-secondary);
-  color: var(--ls-color-white);
-}
-
-.pg-item-solid-secondary.pg-item-active {
-  background-color: var(--ls-color-secondary);
-  color: var(--ls-color-white);
-}
-
-/* Solid — default */
-
-.pg-item-solid-default {
-  background-color: var(--ls-color-white-light);
-  color: var(--ls-color-dark);
-}
-
-.pg-item-solid-default:not([disabled]):hover {
-  background-color: var(--ls-color-dark);
-  color: var(--ls-color-white);
-}
-
-.pg-item-solid-default.pg-item-active {
-  background-color: var(--ls-color-dark);
-  color: var(--ls-color-white);
-}
-
-/* === Outlined variant === */
-
-/* Outlined — primary */
-
-.pg-item-outlined-primary {
-  background-color: transparent;
-  border-color: var(--ls-color-white-light);
-  color: var(--ls-color-dark);
-}
-
-.pg-item-outlined-primary:not([disabled]):hover {
-  border-color: var(--ls-color-primary);
-  color: var(--ls-color-primary);
-}
-
-.pg-item-outlined-primary.pg-item-active {
-  border-color: var(--ls-color-primary);
-  color: var(--ls-color-primary);
-}
-
-/* Outlined — secondary */
-
-.pg-item-outlined-secondary {
-  background-color: transparent;
-  border-color: var(--ls-color-white-light);
-  color: var(--ls-color-dark);
-}
-
-.pg-item-outlined-secondary:not([disabled]):hover {
-  border-color: var(--ls-color-secondary);
-  color: var(--ls-color-secondary);
-}
-
-.pg-item-outlined-secondary.pg-item-active {
-  border-color: var(--ls-color-secondary);
-  color: var(--ls-color-secondary);
-}
-
-/* Outlined — default */
-
-.pg-item-outlined-default {
-  background-color: transparent;
-  border-color: var(--ls-color-white-light);
-  color: var(--ls-color-dark);
-}
-
-.pg-item-outlined-default:not([disabled]):hover {
-  border-color: var(--ls-color-dark);
-  color: var(--ls-color-dark);
-}
-
-.pg-item-outlined-default.pg-item-active {
-  border-color: var(--ls-color-dark);
-  color: var(--ls-color-dark);
-}
-
-/* === Text variant === */
-
-/* Text — primary */
-
-.pg-item-text-primary {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--ls-color-white-dark);
-}
-
-.pg-item-text-primary:not([disabled]):hover {
-  background-color: rgb(67 97 238 / 0.1);
-  color: var(--ls-color-primary);
-}
-
-.pg-item-text-primary.pg-item-active {
-  color: var(--ls-color-primary);
-}
-
-/* Text — secondary */
-
-.pg-item-text-secondary {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--ls-color-white-dark);
-}
-
-.pg-item-text-secondary:not([disabled]):hover {
-  background-color: rgb(128 93 202 / 0.1);
-  color: var(--ls-color-secondary);
-}
-
-.pg-item-text-secondary.pg-item-active {
-  color: var(--ls-color-secondary);
-}
-
-/* Text — default */
-
-.pg-item-text-default {
-  background-color: transparent;
-  border-color: transparent;
-  color: var(--ls-color-white-dark);
-}
-
-.pg-item-text-default:not([disabled]):hover {
-  background-color: rgb(59 63 92 / 0.1);
-  color: var(--ls-color-dark);
-}
-
-.pg-item-text-default.pg-item-active {
-  color: var(--ls-color-dark);
-}
-
-/* === Dark mode — Solid === */
-
-body.dark .pg-item-solid-primary,
-body.dark .pg-item-solid-secondary,
-body.dark .pg-item-solid-default {
-  background-color: #191e3a;
-  color: var(--ls-color-white-light);
-}
-
-body.dark .pg-item-solid-primary:not([disabled]):hover,
-body.dark .pg-item-solid-primary.pg-item-active {
-  background-color: var(--ls-color-primary);
-  color: var(--ls-color-white-light);
-}
-
-body.dark .pg-item-solid-secondary:not([disabled]):hover,
-body.dark .pg-item-solid-secondary.pg-item-active {
-  background-color: var(--ls-color-secondary);
-  color: var(--ls-color-white-light);
-}
-
-body.dark .pg-item-solid-default:not([disabled]):hover,
-body.dark .pg-item-solid-default.pg-item-active {
-  background-color: var(--ls-color-dark);
-  color: var(--ls-color-white-light);
-}
-
-/* === Dark mode — Outlined === */
-
-body.dark .pg-item-outlined-primary,
-body.dark .pg-item-outlined-secondary,
-body.dark .pg-item-outlined-default {
-  border-color: #191e3a;
-  color: var(--ls-color-white-light);
-}
-
-body.dark .pg-item-outlined-primary:not([disabled]):hover,
-body.dark .pg-item-outlined-primary.pg-item-active {
-  border-color: var(--ls-color-primary);
-  color: var(--ls-color-white-light);
-}
-
-body.dark .pg-item-outlined-secondary:not([disabled]):hover,
-body.dark .pg-item-outlined-secondary.pg-item-active {
-  border-color: var(--ls-color-secondary);
-  color: var(--ls-color-white-light);
-}
-
-body.dark .pg-item-outlined-default:not([disabled]):hover,
-body.dark .pg-item-outlined-default.pg-item-active {
-  border-color: var(--ls-color-dark);
-  color: var(--ls-color-white-light);
-}
-
-/* === Dark mode — Text === */
-
-body.dark .pg-item-text-primary,
-body.dark .pg-item-text-secondary,
-body.dark .pg-item-text-default {
-  color: var(--ls-color-white-dark);
-}
-
-body.dark .pg-item-text-primary:not([disabled]):hover,
-body.dark .pg-item-text-primary.pg-item-active {
-  color: var(--ls-color-primary);
-}
-
-body.dark .pg-item-text-secondary:not([disabled]):hover,
-body.dark .pg-item-text-secondary.pg-item-active {
-  color: var(--ls-color-secondary);
-}
-
-body.dark .pg-item-text-default:not([disabled]):hover,
-body.dark .pg-item-text-default.pg-item-active {
-  color: var(--ls-color-white-light);
-}

package/styles/components/overlay/menu/menu.styles.css

@@ -1,138 +0,0 @@
-/* Menu Component — Pure CSS */
-
-:host {
-  display: contents;
-}
-
-/* ─── Backdrop ─────────────────────────────────────────────────── */
-
-.menu-backdrop {
-  position: fixed;
-  inset: 0;
-  z-index: var(--ls-menu-z-index);
-  background-color: transparent;
-}
-
-/* ─── Panel ─────────────────────────────────────────────────────── */
-
-.menu-panel {
-  position: fixed;
-  top: var(--menu-top, 0px);
-  left: var(--menu-left, 0px);
-  z-index: calc(var(--ls-menu-z-index) + 1);
-  min-width: 10rem;
-  padding: 0.25rem 0;
-  background-color: #fff;
-  border-radius: var(--ls-border-radius-md);
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
-  outline: none;
-}
-
-.menu-panel.menu-panel-inline {
-  position: absolute;
-}
-
-/* ─── Animations ─────────────────────────────────────────────────── */
-
-@keyframes menu-enter-kf {
-  from {
-    opacity: 0;
-    transform: scale(0.95) translateY(-4px);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-}
-
-@keyframes menu-leave-kf {
-  from {
-    opacity: 1;
-    transform: scale(1) translateY(0);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.95) translateY(-4px);
-  }
-}
-
-.menu-panel.menu-enter {
-  animation: menu-enter-kf 150ms ease-out forwards;
-}
-
-.menu-panel.menu-leave {
-  animation: menu-leave-kf 100ms ease-in forwards;
-}
-
-/* ─── Menu Item ──────────────────────────────────────────────────── */
-
-.menu-item {
-  display: flex;
-  align-items: center;
-  width: 100%;
-  padding: 0.5rem 1rem;
-  background: none;
-  border: none;
-  text-align: left;
-  font-family: var(--ls-font-family);
-  font-size: 0.875rem;
-  color: #3b3f5c;
-  cursor: pointer;
-  transition: background-color var(--ls-transition-duration) ease;
-}
-
-.menu-item:hover:not(:disabled) {
-  background-color: #f1f2f3;
-}
-
-.menu-item:focus-visible {
-  outline: 2px solid var(--ls-color-primary);
-  outline-offset: -2px;
-  background-color: #f1f2f3;
-}
-
-.menu-item-dense {
-  padding-top: 0.25rem;
-  padding-bottom: 0.25rem;
-}
-
-.menu-item-no-gutters {
-  padding-inline: 0;
-}
-
-.menu-item-divider {
-  border-bottom: 1px solid #e0e6ed;
-}
-
-.menu-item-disabled {
-  color: #888ea8;
-  pointer-events: none;
-  cursor: not-allowed;
-}
-
-/* ─── Dark mode ──────────────────────────────────────────────────── */
-
-body.dark .menu-panel {
-  background-color: #1b2e4b;
-  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.4);
-}
-
-body.dark .menu-item {
-  color: #e0e6ed;
-}
-
-body.dark .menu-item:hover:not(:disabled) {
-  background-color: #253b5e;
-}
-
-body.dark .menu-item:focus-visible {
-  background-color: #253b5e;
-}
-
-body.dark .menu-item-divider {
-  border-bottom-color: #253b5e;
-}
-
-body.dark .menu-item-disabled {
-  color: #506690;
-}