@lumston/ds-angular 0.0.3 → 0.0.5

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

@@ -0,0 +1,144 @@
+: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

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

@@ -0,0 +1,138 @@
+/* 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;
+}