@duskmoon-dev/core 1.19.3 → 1.19.5

package/dist/esm/components/file-input.js

@@ -0,0 +1,116 @@
+// Auto-generated from file-input.css
+export const css = `/** Opt-in native presentation. Applications own errors, messages and announcements. */
+@layer components {
+  /* Compatibility wrapper states are intentionally immediate. */
+  :is(.form-group-info, .form-control.info) { --dm-validation-color: var(--color-info); }
+  :is(.form-group-warning, .form-control.warning) { --dm-validation-color: var(--color-warning); }
+  :is(.form-group-success, .form-control.success) { --dm-validation-color: var(--color-success); }
+
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is(.validate :valid, .validate:valid, .validator.validator-success:user-valid):not([aria-invalid="true"]):not(:where(.form-group-error *, .form-control.error *)):not(:disabled) {
+    --dm-validation-color: var(--color-success);
+    --dm-validation-content: var(--color-success-content);
+  }
+
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is(.validate :invalid, .validate:invalid, .validator:user-invalid):not(:disabled) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
+  }
+
+  :is(.form-group-error, .form-control.error) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
+  }
+
+  /* Higher specificity than native states, including server-invalid + user-valid. */
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .form-group-error *, .form-control.error *):not(:disabled):is(:focus, :not(:focus)) {
+    --dm-validation-color: var(--color-error);
+    --dm-validation-content: var(--color-error-content);
+  }
+
+  /* This shared selector wins over filled/ghost focus and semantic modifiers. */
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .validator:user-invalid, .validator.validator-success:user-valid, .validate :invalid, .validate :valid, .validate:invalid, .validate:valid, .form-group-error *, .form-group-success *, .form-group-warning *, .form-group-info *, .form-control.error *, .form-control.success *, .form-control.warning *, .form-control.info *):not(:disabled) {
+    color: var(--dm-validation-color);
+    border-color: var(--dm-validation-color);
+    --checkbox-color: var(--dm-validation-color);
+    --radio-color: var(--dm-validation-color);
+    --switch-color: var(--dm-validation-color);
+    --switch-content-color: var(--dm-validation-content, var(--color-primary-content));
+    --toggle-color: var(--dm-validation-color);
+  }
+
+  :is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):is([aria-invalid="true"], .validator:user-invalid, .validator.validator-success:user-valid, .validate :invalid, .validate :valid, .validate:invalid, .validate:valid, .form-group-error *, .form-group-success *, .form-group-warning *, .form-group-info *, .form-control.error *, .form-control.success *, .form-control.warning *, .form-control.info *):not(:disabled):focus {
+    border-color: var(--dm-validation-color);
+    box-shadow: 0 0 0 3px color-mix(in oklch, var(--dm-validation-color) 20%, transparent);
+  }
+
+  :is(.form-group-error, .form-control.error) :is(.form-label, .label-text) { color: var(--color-error); }
+  :is(.form-group-success, .form-control.success) :is(.form-label, .label-text) { color: var(--color-success); }
+  :is(.form-group-warning, .form-control.warning) :is(.form-label, .label-text) { color: var(--color-warning); }
+  :is(.form-group-info, .form-control.info) :is(.form-label, .label-text) { color: var(--color-info); }
+
+  .validator-hint { font-size: 0.75rem; color: var(--color-on-surface-variant); }
+  .validator-error { display: none; font-size: 0.75rem; color: var(--color-error); }
+  /* Keep OTP actions stationary when blur reveals an error during a click. */
+  .otp-code ~ .validator-error { display: block; visibility: hidden; }
+  :is(.form-group, .form-control):has(:is([aria-invalid="true"], .validator:user-invalid, .validate :invalid, .validate:invalid):not(:disabled)) > .validator-error,
+  :is(.form-group-error, .form-control.error) > .validator-error { display: block; visibility: visible; }
+
+  @media (forced-colors: active) {
+    :is(input, select, textarea):is(.input, .select, .textarea, .checkbox, .radio, .switch, .toggle, .file-input, .otp-input-field, .otp-code, .datepicker-input):focus-visible {
+      outline: 2px solid Highlight;
+      outline-offset: 2px;
+    }
+    input:is(.checkbox, .radio, .switch, .toggle) { appearance: auto; }
+    input:is(.checkbox, .radio, .switch, .toggle)::before,
+    input:is(.checkbox, .radio, .switch, .toggle)::after { content: none; }
+  }
+}
+
+
+@layer components {
+  .file-input {
+    display: block;
+    box-sizing: border-box;
+    width: 100%;
+    min-width: 0;
+    padding: 0;
+    font: inherit;
+    color: var(--color-on-surface);
+    background-color: var(--color-surface);
+    border: 1px solid currentColor;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+  }
+  .file-input::file-selector-button {
+    padding: 0.75rem 1rem;
+    margin-inline-end: 0.75rem;
+    font: inherit;
+    color: inherit;
+    background-color: var(--color-surface-container);
+    border: none;
+    border-inline-end: 1px solid currentColor;
+    cursor: inherit;
+  }
+  .file-input:hover:not(:disabled)::file-selector-button { background-color: var(--color-surface-container-high); }
+  .file-input:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in oklch, currentColor 20%, transparent); }
+  .file-input:disabled { opacity: 0.5; cursor: not-allowed; }
+  .file-input-xs::file-selector-button { padding: 0.375rem 0.625rem; }
+  .file-input-sm::file-selector-button { padding: 0.5rem 0.75rem; }
+  .file-input-lg::file-selector-button { padding: 1rem 1.25rem; }
+  .file-input-primary { color: var(--color-primary); }
+  .file-input-secondary { color: var(--color-secondary); }
+  .file-input-tertiary { color: var(--color-tertiary); }
+  .file-input-info { color: var(--color-info); }
+  .file-input-success { color: var(--color-success); }
+  .file-input-warning { color: var(--color-warning); }
+  .file-input-error { color: var(--color-error); }
+  .file-input-ghost { border-color: transparent; }
+}
+`;
+
+const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
+if (sheet) {
+  sheet.replaceSync(css);
+}
+export const styles = sheet;
+export default sheet;

package/dist/esm/components/filter-group.d.ts

@@ -0,0 +1,5 @@
+// Auto-generated type declaration for filter-group
+export declare const css: string;
+export declare const styles: CSSStyleSheet | null;
+declare const sheet: CSSStyleSheet | null;
+export default sheet;

package/dist/esm/components/filter-group.js

@@ -0,0 +1,461 @@
+// Auto-generated from filter-group.css
+export const css = `/**
+ * 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; }
+  }
+}
+`;
+
+const sheet = typeof CSSStyleSheet !== 'undefined' ? new CSSStyleSheet() : null;
+if (sheet) {
+  sheet.replaceSync(css);
+}
+export const styles = sheet;
+export default sheet;