@duskmoon-dev/core 1.19.3 → 1.19.4

package/dist/components/filter-group.css

@@ -0,0 +1,452 @@
+/**
+ * Chip Component Styles
+ * DuskMoonUI - Material Design 3 inspired chip system
+ */
+
+@layer components {
+  /* Base Chip */
+  .chip {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.375rem;
+    padding: 0.375rem 0.75rem;
+    font-size: 0.875rem;
+    font-weight: 500;
+    line-height: 1.25rem;
+    border-radius: var(--radius-sm);
+    background-color: var(--color-surface-container);
+    color: var(--color-on-surface);
+    border: 1px solid currentColor;
+    cursor: default;
+    transition: all 150ms ease-in-out;
+  }
+
+  /* Interactive Chip */
+  .chip-clickable {
+    cursor: pointer;
+  }
+
+  .chip-clickable:hover {
+    background-color: var(--color-surface-container-high);
+  }
+
+  .chip-clickable:active {
+    transform: scale(0.98);
+  }
+
+  .chip:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent);
+  }
+
+  /* Color Variants - Filled */
+  .chip-primary {
+    background-color: var(--color-primary);
+    color: var(--color-primary-content);
+    border-color: var(--color-primary);
+  }
+
+  .chip-primary:hover {
+    background-color: color-mix(in oklch, var(--color-primary), black 10%);
+  }
+
+  .chip-secondary {
+    background-color: var(--color-secondary);
+    color: var(--color-secondary-content);
+    border-color: var(--color-secondary);
+  }
+
+  .chip-secondary:hover {
+    background-color: color-mix(in oklch, var(--color-secondary), black 10%);
+  }
+
+  .chip-tertiary {
+    background-color: var(--color-tertiary);
+    color: var(--color-tertiary-content);
+    border-color: var(--color-tertiary);
+  }
+
+  .chip-tertiary:hover {
+    background-color: color-mix(in oklch, var(--color-tertiary), black 10%);
+  }
+
+  .chip-accent {
+    background-color: var(--color-accent);
+    color: var(--color-accent-content);
+    border-color: var(--color-accent);
+  }
+
+  .chip-accent:hover {
+    background-color: color-mix(in oklch, var(--color-accent), black 10%);
+  }
+
+  .chip-neutral {
+    background-color: var(--color-neutral);
+    color: var(--color-neutral-content);
+    border-color: var(--color-neutral);
+  }
+
+  .chip-neutral:hover {
+    background-color: color-mix(in oklch, var(--color-neutral), black 10%);
+  }
+
+  .chip-base {
+    background-color: var(--color-base-100);
+    color: var(--color-base-content);
+    border-color: var(--color-base-100);
+  }
+
+  .chip-base:hover {
+    background-color: var(--color-base-200);
+  }
+
+  .chip-info {
+    background-color: var(--color-info);
+    color: var(--color-info-content);
+    border-color: var(--color-info);
+  }
+
+  .chip-info:hover {
+    background-color: color-mix(in oklch, var(--color-info), black 10%);
+  }
+
+  .chip-success {
+    background-color: var(--color-success);
+    color: var(--color-success-content);
+    border-color: var(--color-success);
+  }
+
+  .chip-success:hover {
+    background-color: color-mix(in oklch, var(--color-success), black 10%);
+  }
+
+  .chip-warning {
+    background-color: var(--color-warning);
+    color: var(--color-warning-content);
+    border-color: var(--color-warning);
+  }
+
+  .chip-warning:hover {
+    background-color: color-mix(in oklch, var(--color-warning), black 10%);
+  }
+
+  .chip-error {
+    background-color: var(--color-error);
+    color: var(--color-error-content);
+    border-color: var(--color-error);
+  }
+
+  .chip-error:hover {
+    background-color: color-mix(in oklch, var(--color-error), black 10%);
+  }
+
+  /* Outlined Variant */
+  .chip-outlined {
+    background-color: transparent;
+    border-color: var(--color-outline);
+  }
+
+  .chip-outlined:hover {
+    background-color: var(--color-surface-container);
+  }
+
+  .chip-outlined.chip-primary {
+    color: var(--color-primary);
+  }
+
+  .chip-outlined.chip-primary:hover {
+    background-color: var(--color-primary-container);
+  }
+
+  .chip-outlined.chip-secondary {
+    color: var(--color-secondary);
+  }
+
+  .chip-outlined.chip-secondary:hover {
+    background-color: var(--color-secondary-container);
+  }
+
+  .chip-outlined.chip-tertiary {
+    color: var(--color-tertiary);
+  }
+
+  .chip-outlined.chip-tertiary:hover {
+    background-color: var(--color-tertiary-container);
+  }
+
+  .chip-outlined.chip-accent {
+    color: var(--color-accent);
+  }
+
+  .chip-outlined.chip-accent:hover {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+  }
+
+  .chip-outlined.chip-neutral {
+    color: var(--color-neutral);
+  }
+
+  .chip-outlined.chip-neutral:hover {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+  }
+
+  .chip-outlined.chip-base {
+    color: var(--color-base-content);
+  }
+
+  .chip-outlined.chip-base:hover {
+    background-color: var(--color-base-200);
+  }
+
+  .chip-outlined.chip-info {
+    color: var(--color-info);
+  }
+
+  .chip-outlined.chip-info:hover {
+    background-color: var(--color-info-container);
+  }
+
+  .chip-outlined.chip-success {
+    color: var(--color-success);
+  }
+
+  .chip-outlined.chip-success:hover {
+    background-color: var(--color-success-container);
+  }
+
+  .chip-outlined.chip-warning {
+    color: var(--color-warning);
+  }
+
+  .chip-outlined.chip-warning:hover {
+    background-color: var(--color-warning-container);
+  }
+
+  .chip-outlined.chip-error {
+    color: var(--color-error);
+  }
+
+  .chip-outlined.chip-error:hover {
+    background-color: var(--color-error-container);
+  }
+
+  /* Tonal/Soft Variant */
+  .chip-tonal {
+    background-color: var(--color-surface-container-high);
+    border-color: transparent;
+  }
+
+  .chip-tonal.chip-primary {
+    background-color: var(--color-primary-container);
+    color: var(--color-on-primary-container);
+  }
+
+  .chip-tonal.chip-secondary {
+    background-color: var(--color-secondary-container);
+    color: var(--color-on-secondary-container);
+  }
+
+  .chip-tonal.chip-tertiary {
+    background-color: var(--color-tertiary-container);
+    color: var(--color-on-tertiary-container);
+  }
+
+  .chip-tonal.chip-accent {
+    background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .chip-tonal.chip-neutral {
+    background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface));
+    color: var(--color-on-surface);
+  }
+
+  .chip-tonal.chip-base {
+    background-color: var(--color-base-200);
+    color: var(--color-base-content);
+  }
+
+  .chip-tonal.chip-info {
+    background-color: var(--color-info-container);
+    color: var(--color-on-info-container);
+  }
+
+  .chip-tonal.chip-success {
+    background-color: var(--color-success-container);
+    color: var(--color-on-success-container);
+  }
+
+  .chip-tonal.chip-warning {
+    background-color: var(--color-warning-container);
+    color: var(--color-on-warning-container);
+  }
+
+  .chip-tonal.chip-error {
+    background-color: var(--color-error-container);
+    color: var(--color-on-error-container);
+  }
+
+  /* Ghost Variant */
+  .chip-ghost {
+    background-color: transparent;
+    border-color: transparent;
+  }
+
+  .chip-ghost:hover {
+    background-color: var(--color-surface-container);
+  }
+
+  /* Ghost + color sub-variants: transparent bg/border, colored text.
+     Hover uses container color (matches .chip-outlined.chip-*:hover pattern). */
+  .chip-ghost.chip-primary   { background-color: transparent; color: var(--color-primary); }
+  .chip-ghost.chip-secondary { background-color: transparent; color: var(--color-secondary); }
+  .chip-ghost.chip-tertiary  { background-color: transparent; color: var(--color-tertiary); }
+  .chip-ghost.chip-info      { background-color: transparent; color: var(--color-info); }
+  .chip-ghost.chip-success   { background-color: transparent; color: var(--color-success); }
+  .chip-ghost.chip-warning   { background-color: transparent; color: var(--color-warning); }
+  .chip-ghost.chip-error     { background-color: transparent; color: var(--color-error); }
+  .chip-ghost.chip-accent    { background-color: transparent; color: var(--color-accent); }
+  .chip-ghost.chip-neutral   { background-color: transparent; color: var(--color-neutral); }
+  .chip-ghost.chip-base      { background-color: transparent; color: var(--color-base-content); }
+
+  .chip-ghost.chip-primary:hover   { background-color: var(--color-primary-container); }
+  .chip-ghost.chip-secondary:hover { background-color: var(--color-secondary-container); }
+  .chip-ghost.chip-tertiary:hover  { background-color: var(--color-tertiary-container); }
+  .chip-ghost.chip-info:hover      { background-color: var(--color-info-container); }
+  .chip-ghost.chip-success:hover   { background-color: var(--color-success-container); }
+  .chip-ghost.chip-warning:hover   { background-color: var(--color-warning-container); }
+  .chip-ghost.chip-error:hover     { background-color: var(--color-error-container); }
+  .chip-ghost.chip-accent:hover    { background-color: color-mix(in oklch, var(--color-accent) 15%, var(--color-surface)); }
+  .chip-ghost.chip-neutral:hover   { background-color: color-mix(in oklch, var(--color-neutral) 15%, var(--color-surface)); }
+  .chip-ghost.chip-base:hover      { background-color: var(--color-base-200); }
+
+  /* Size Variants */
+  .chip-sm {
+    padding: 0.25rem 0.5rem;
+    font-size: 0.75rem;
+    line-height: 1rem;
+    gap: 0.25rem;
+  }
+
+  .chip-lg {
+    padding: 0.5rem 1rem;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    gap: 0.5rem;
+  }
+
+  /* Chip Parts */
+  .chip-icon {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    font-size: 1rem;
+  }
+
+  .chip-label {
+    display: inline-flex;
+  }
+
+  .chip-close {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 1.125rem;
+    height: 1.125rem;
+    margin-left: 0.125rem;
+    font-size: 1rem;
+    color: currentColor;
+    opacity: 0.7;
+    background-color: transparent;
+    border: none;
+    border-radius: var(--radius-full);
+    cursor: pointer;
+    transition: opacity 150ms ease-in-out;
+  }
+
+  .chip-close:hover {
+    opacity: 1;
+  }
+
+  /* Selected State */
+  .chip-selected {
+    background-color: var(--color-primary);
+    color: var(--color-primary-content);
+    border-color: var(--color-primary);
+  }
+
+  .chip-selected.chip-outlined {
+    background-color: var(--color-primary);
+    border-color: var(--color-primary);
+    color: var(--color-primary-content);
+  }
+
+  /* Disabled State */
+  .chip:disabled,
+  .chip-disabled {
+    opacity: 0.7;
+    pointer-events: none;
+    cursor: not-allowed;
+  }
+
+  /* Chip Group */
+  .chip-group {
+    display: flex;
+    flex-wrap: wrap;
+    gap: 0.5rem;
+  }
+
+  /* Reduce Motion */
+  @media (prefers-reduced-motion: reduce) {
+    .chip,
+    .chip-delete {
+      transition: none;
+    }
+  }
+}
+
+
+@layer components {
+  .filter-group { display: flex; flex-wrap: wrap; gap: 0.5rem; color: var(--color-on-surface); }
+  .filter-group > .chip { position: relative; cursor: pointer; }
+  .filter-group-input {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    margin: 0;
+    opacity: 0;
+    cursor: inherit;
+  }
+  .filter-group > .chip:has(.filter-group-input:checked) {
+    background-color: var(--filter-background, var(--color-primary-container));
+    color: var(--filter-content, var(--color-on-primary-container));
+    border-color: var(--filter-color, var(--color-primary));
+  }
+  .filter-group > .chip::before {
+    content: "";
+    display: inline-block;
+    inline-size: 0.5rem;
+    block-size: 0.75rem;
+    border: solid currentColor;
+    border-width: 0 2px 2px 0;
+    transform: rotate(45deg);
+    visibility: hidden;
+    flex-shrink: 0;
+  }
+  .filter-group > .chip:has(.filter-group-input:checked)::before { visibility: visible; }
+  .filter-group > .chip:has(.filter-group-input:focus-visible) { outline: 2px solid currentColor; outline-offset: 2px; }
+  .filter-group > .chip:has(.filter-group-input:disabled) { opacity: 0.38; cursor: not-allowed; }
+  .filter-group-primary { --filter-color: var(--color-primary); --filter-background: var(--color-primary-container); --filter-content: var(--color-on-primary-container); }
+  .filter-group-secondary { --filter-color: var(--color-secondary); --filter-background: var(--color-secondary-container); --filter-content: var(--color-on-secondary-container); }
+  .filter-group-tertiary { --filter-color: var(--color-tertiary); --filter-background: var(--color-tertiary-container); --filter-content: var(--color-on-tertiary-container); }
+  .filter-group-info { --filter-color: var(--color-info); --filter-background: var(--color-info-container); --filter-content: var(--color-on-info-container); }
+  .filter-group-success { --filter-color: var(--color-success); --filter-background: var(--color-success-container); --filter-content: var(--color-on-success-container); }
+  .filter-group-warning { --filter-color: var(--color-warning); --filter-background: var(--color-warning-container); --filter-content: var(--color-on-warning-container); }
+  .filter-group-error { --filter-color: var(--color-error); --filter-background: var(--color-error-container); --filter-content: var(--color-on-error-container); }
+  @media (forced-colors: active) {
+    .filter-group > .chip:has(.filter-group-input:checked) { border-color: Highlight; outline: 1px solid Highlight; }
+  }
+}