nexus-shared 2.0.0 → 3.1.0

package/src/Styles/Nexus.Calendar.css

@@ -1,275 +1,273 @@
-@layer nexus.components {
-  /*
-   * Calendar: a month grid of day buttons under a header of month and year menus. Cells touch along a row, so a
-   * range reads as one band; the chosen days are solid primary, today has a primary edge, and holidays are red.
-   * Nepali text carries lang="ne", which switches to a font with Devanagari glyphs (Nexus.Base.css).
-   */
-  .nx-cal {
-    --nx-cal-cell: 36px;
-    --nx-cal-font: var(--nx-text-sm);
-
-    display: inline-grid;
-    gap: var(--nx-space-2);
-    padding: var(--nx-space-2);
-    color: var(--nx-text);
-    font-size: var(--nx-cal-font);
-    line-height: 1.3;
-    user-select: none;
-  }
-
-  .nx-cal--sm {
-    --nx-cal-cell: 32px;
-  }
-
-  .nx-cal--lg {
-    --nx-cal-cell: 42px;
-    --nx-cal-font: var(--nx-text-md);
-  }
-
-  .nx-cal[data-disabled] {
-    opacity: 0.6;
-  }
-
-  /* One or more months side by side; each has its own header, and only the outer ones carry an arrow. */
-  .nx-cal__months {
-    display: flex;
-    align-items: flex-start;
-    gap: var(--nx-space-4);
-  }
-
-  .nx-cal__month {
-    display: grid;
-    gap: var(--nx-space-2);
-  }
-
-  /* Header: previous, month and year menus, next */
-  .nx-cal__head {
-    display: flex;
-    align-items: center;
-    gap: 2px;
-  }
-
-  .nx-cal__nav {
-    display: grid;
-    place-items: center;
-    flex-shrink: 0;
-    width: 28px;
-    height: 28px;
-    padding: 0;
-    border: 0;
-    border-radius: var(--nx-radius-sm);
-    background: none;
-    color: var(--nx-text-muted);
-    cursor: pointer;
-    transition:
-      background-color var(--nx-duration),
-      color var(--nx-duration);
-  }
-
-  .nx-cal__nav .nx-icon {
-    width: 18px;
-    height: 18px;
-    vertical-align: 0;
-  }
-
-  .nx-cal__nav:hover:not(:disabled) {
-    background: var(--nx-surface-hover);
-    color: var(--nx-text);
-  }
-
-  .nx-cal__nav:focus-visible {
-    outline: 2px solid var(--nx-primary);
-    outline-offset: -2px;
-  }
-
-  .nx-cal__nav:disabled {
-    opacity: 0.35;
-    cursor: default;
-  }
-
-  /* Keeps the menus centered in a month that has no arrow on that side. */
-  .nx-cal__nav--space {
-    visibility: hidden;
-  }
-
-  .nx-cal__menus {
-    display: flex;
-    flex: 1 1 auto;
-    justify-content: center;
-    gap: 2px;
-    min-width: 0;
-  }
-
-  /* A menu drawn as a title: no frame until hovered, its own small chevron. */
-  .nx-cal__select {
-    appearance: none;
-    max-width: 100%;
-    height: 28px;
-    padding: 0 18px 0 8px;
-    border: 0;
-    border-radius: var(--nx-radius-sm);
-    background:
-      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E")
-      no-repeat right 4px center / 12px;
-    color: var(--nx-text);
-    font-size: var(--nx-cal-font);
-    font-weight: 600;
-    cursor: pointer;
-    transition: background-color var(--nx-duration);
-  }
-
-  .nx-cal__select:hover:not(:disabled) {
-    background-color: var(--nx-surface-hover);
-  }
-
-  .nx-cal__select:focus-visible {
-    outline: 2px solid var(--nx-primary);
-    outline-offset: -2px;
-  }
-
-  .nx-cal__select:disabled {
-    cursor: default;
-  }
-
-  /* The menu's list takes the theme's colors in browsers that style it. */
-  .nx-cal__select option {
-    background: var(--nx-surface);
-    color: var(--nx-text);
-    font-weight: 400;
-  }
-
-  /* Grid */
-  .nx-cal__grid {
-    display: grid;
-    gap: 2px 0;
-  }
-
-  .nx-cal__row {
-    display: grid;
-    grid-template-columns: repeat(7, var(--nx-cal-cell));
-  }
-
-  .nx-cal__weekday {
-    display: grid;
-    place-items: center;
-    height: 26px;
-    color: var(--nx-text-muted);
-    font-size: var(--nx-text-xs);
-    font-weight: 600;
-  }
-
-  .nx-cal__day {
-    position: relative;
-    display: grid;
-    place-items: center;
-    width: var(--nx-cal-cell);
-    height: var(--nx-cal-cell);
-    padding: 0;
-    border: 1px solid transparent;
-    border-radius: var(--nx-radius);
-    background: none;
-    color: var(--nx-text);
-    font: inherit;
-    font-variant-numeric: tabular-nums;
-    cursor: pointer;
-    transition:
-      background-color var(--nx-duration),
-      color var(--nx-duration);
-  }
-
-  .nx-cal__day--empty {
-    cursor: default;
-  }
-
-  .nx-cal__day:hover:not([aria-disabled], [aria-selected="true"]) {
-    background: var(--nx-surface-hover);
-  }
-
-  /* A ring that stays visible on a solid primary day. */
-  .nx-cal__day:focus-visible {
-    outline: none;
-    box-shadow:
-      0 0 0 2px var(--nx-surface),
-      0 0 0 4px var(--nx-primary);
-    z-index: 1;
-  }
-
-  .nx-cal__day[data-outside] {
-    color: var(--nx-text-subtle);
-  }
-
-  .nx-cal__weekday[data-weekend],
-  .nx-cal__day[data-weekend]:not([data-outside]) {
-    color: var(--nx-danger);
-  }
-
-  .nx-cal__day[data-today] {
-    border-color: var(--nx-primary);
-    font-weight: 600;
-  }
-
-  /* Between the two ends of a range: a soft band across the row. */
-  .nx-cal__day[data-in-range] {
-    border-radius: 0;
-    background: var(--nx-primary-soft);
-  }
-
-  .nx-cal__day[data-range-start] {
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
-  }
-
-  .nx-cal__day[data-range-end] {
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
-  }
-
-  .nx-cal__day[aria-selected="true"] {
-    border-color: var(--nx-primary-solid);
-    background: var(--nx-primary-solid);
-    color: var(--nx-primary-text);
-    font-weight: 600;
-  }
-
-  .nx-cal__day[aria-disabled="true"] {
-    color: var(--nx-text-subtle);
-    opacity: 0.45;
-    cursor: default;
-  }
-
-  .nx-cal__day[aria-disabled="true"][aria-selected="true"] {
-    opacity: 0.7;
-  }
-
-  /* Footer */
-  .nx-cal__foot {
-    display: flex;
-    justify-content: space-between;
-    gap: var(--nx-space-2);
-    padding-top: var(--nx-space-1);
-    border-top: 1px solid var(--nx-border);
-  }
-
-  /* Date picker: the box's text lines digits up, and its calendar opens in a popover placed by the component. */
-  .nx-field__control--date {
-    font-variant-numeric: tabular-nums;
-  }
-
-  .nx-date-popover {
-    position: fixed;
-    inset: auto;
-    padding: 0;
-  }
-
-  .nx-field__action--calendar[aria-expanded="true"] {
-    color: var(--nx-field-accent);
-  }
-
-  @media (prefers-reduced-motion: reduce) {
-    .nx-cal__day,
-    .nx-cal__nav,
-    .nx-cal__select {
-      transition: none;
-    }
-  }
-}
+@layer nexus.components {
+  /*
+   * Calendar: a month grid of day buttons under a header of month and year menus. Cells touch along a row, so a
+   * range reads as one band; the chosen days are solid primary, today has a primary edge, and holidays are red.
+   * Nepali text carries lang="ne", which switches to a font with Devanagari glyphs (Nexus.Base.css).
+   */
+  .nx-cal {
+    --nx-cal-cell: 36px;
+    --nx-cal-font: var(--nx-text-sm);
+
+    display: inline-grid;
+    gap: var(--nx-space-2);
+    padding: var(--nx-space-2);
+    color: var(--nx-text);
+    font-size: var(--nx-cal-font);
+    line-height: 1.3;
+    user-select: none;
+  }
+
+  .nx-cal--sm {
+    --nx-cal-cell: 32px;
+  }
+
+  .nx-cal--lg {
+    --nx-cal-cell: 42px;
+    --nx-cal-font: var(--nx-text-md);
+  }
+
+  .nx-cal[data-disabled] {
+    opacity: 0.6;
+  }
+
+  /* One or more months side by side; each has its own header, and only the outer ones carry an arrow. */
+  .nx-cal__months {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--nx-space-4);
+  }
+
+  .nx-cal__month {
+    display: grid;
+    gap: var(--nx-space-2);
+  }
+
+  /* Header: previous, month and year menus, next */
+  .nx-cal__head {
+    display: flex;
+    align-items: center;
+    gap: 2px;
+  }
+
+  .nx-cal__nav {
+    display: grid;
+    place-items: center;
+    flex-shrink: 0;
+    width: 28px;
+    height: 28px;
+    padding: 0;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background: none;
+    color: var(--nx-text-muted);
+    cursor: pointer;
+    transition:
+      background-color var(--nx-duration),
+      color var(--nx-duration);
+  }
+
+  .nx-cal__nav .nx-icon {
+    width: 18px;
+    height: 18px;
+    vertical-align: 0;
+  }
+
+  .nx-cal__nav:hover:not(:disabled) {
+    background: var(--nx-surface-hover);
+    color: var(--nx-text);
+  }
+
+  .nx-cal__nav:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: -2px;
+  }
+
+  .nx-cal__nav:disabled {
+    opacity: 0.35;
+    cursor: default;
+  }
+
+  /* Keeps the menus centered in a month that has no arrow on that side. */
+  .nx-cal__nav--space {
+    visibility: hidden;
+  }
+
+  .nx-cal__menus {
+    display: flex;
+    flex: 1 1 auto;
+    justify-content: center;
+    gap: 2px;
+    min-width: 0;
+  }
+
+  /* A menu drawn as a title: no frame until hovered, its own small chevron. */
+  .nx-cal__select {
+    appearance: none;
+    max-width: 100%;
+    height: 28px;
+    padding: 0 18px 0 8px;
+    border: 0;
+    border-radius: var(--nx-radius-sm);
+    background:
+      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23888' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6l6-6'/%3E%3C/svg%3E")
+      no-repeat right 4px center / 12px;
+    color: var(--nx-text);
+    font-size: var(--nx-cal-font);
+    font-weight: 600;
+    cursor: pointer;
+    transition: background-color var(--nx-duration);
+  }
+
+  .nx-cal__select:hover:not(:disabled) {
+    background-color: var(--nx-surface-hover);
+  }
+
+  .nx-cal__select:focus-visible {
+    outline: 2px solid var(--nx-primary);
+    outline-offset: -2px;
+  }
+
+  .nx-cal__select:disabled {
+    cursor: default;
+  }
+
+  /* The menu's list takes the theme's colors in browsers that style it. */
+  .nx-cal__select option {
+    background: var(--nx-surface);
+    color: var(--nx-text);
+    font-weight: 400;
+  }
+
+  /* Grid */
+  .nx-cal__grid {
+    display: grid;
+    gap: 2px 0;
+  }
+
+  .nx-cal__row {
+    display: grid;
+    grid-template-columns: repeat(7, var(--nx-cal-cell));
+  }
+
+  .nx-cal__weekday {
+    display: grid;
+    place-items: center;
+    height: 26px;
+    color: var(--nx-text-muted);
+    font-size: var(--nx-text-xs);
+    font-weight: 600;
+  }
+
+  .nx-cal__day {
+    position: relative;
+    display: grid;
+    place-items: center;
+    width: var(--nx-cal-cell);
+    height: var(--nx-cal-cell);
+    padding: 0;
+    border: 1px solid transparent;
+    border-radius: var(--nx-radius);
+    background: none;
+    color: var(--nx-text);
+    font: inherit;
+    font-variant-numeric: tabular-nums;
+    cursor: pointer;
+    transition:
+      background-color var(--nx-duration),
+      color var(--nx-duration);
+  }
+
+  .nx-cal__day--empty {
+    cursor: default;
+  }
+
+  .nx-cal__day:hover:not([aria-disabled], [aria-selected="true"]) {
+    background: var(--nx-surface-hover);
+  }
+
+  /* A ring that stays visible on a solid primary day. */
+  .nx-cal__day:focus-visible {
+    outline: none;
+    box-shadow:
+      0 0 0 2px var(--nx-surface),
+      0 0 0 4px var(--nx-primary);
+    z-index: 1;
+  }
+
+  .nx-cal__day[data-outside] {
+    color: var(--nx-text-subtle);
+  }
+
+  .nx-cal__weekday[data-weekend],
+  .nx-cal__day[data-weekend]:not([data-outside]) {
+    color: var(--nx-danger);
+  }
+
+  .nx-cal__day[data-today] {
+    border-color: var(--nx-primary);
+    font-weight: 600;
+  }
+
+  /* Between the two ends of a range: a soft band across the row. */
+  .nx-cal__day[data-in-range] {
+    border-radius: 0;
+    background: var(--nx-primary-soft);
+  }
+
+  .nx-cal__day[data-range-start] {
+    border-top-right-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+
+  .nx-cal__day[data-range-end] {
+    border-top-left-radius: 0;
+    border-bottom-left-radius: 0;
+  }
+
+  .nx-cal__day[aria-selected="true"] {
+    border-color: var(--nx-primary-solid);
+    background: var(--nx-primary-solid);
+    color: var(--nx-primary-text);
+    font-weight: 600;
+  }
+
+  .nx-cal__day[aria-disabled="true"] {
+    color: var(--nx-text-subtle);
+    opacity: 0.45;
+    cursor: default;
+  }
+
+  .nx-cal__day[aria-disabled="true"][aria-selected="true"] {
+    opacity: 0.7;
+  }
+
+  /* Footer */
+  .nx-cal__foot {
+    display: flex;
+    justify-content: space-between;
+    gap: var(--nx-space-2);
+    padding-top: var(--nx-space-1);
+    border-top: 1px solid var(--nx-border);
+  }
+
+  /* Date picker: the box's text lines digits up, and its calendar opens in a popover placed by the component. */
+  .nx-field__control--date {
+    font-variant-numeric: tabular-nums;
+  }
+
+  .nx-date-popover {
+    position: fixed;
+    inset: auto;
+    padding: 0;
+  }
+
+  .nx-field__action--calendar[aria-expanded="true"] {
+    color: var(--nx-field-accent);
+  }
+
+  [data-nx-motion="reduce"] .nx-cal__day,
+  [data-nx-motion="reduce"] .nx-cal__nav,
+  [data-nx-motion="reduce"] .nx-cal__select {
+    transition: none;
+  }
+}