arekui 1.0.2 → 2.0.0

package/src/components/empty.css

@@ -0,0 +1,36 @@
+/* EMPTY STATE */
+.ar-empty {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--ar-s-2);
+ padding: var(--ar-s-10) var(--ar-s-4);
+ text-align: center;
+ color: var(--ar-gray-600);
+}
+.ar-empty-icon {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-base-200);
+ color: var(--ar-gray-500);
+}
+.ar-empty-icon svg {
+ width: 1.5rem;
+ height: 1.5rem;
+}
+.ar-empty-title {
+ font-size: 1.125rem;
+ font-weight: 700;
+ color: var(--ar-base-content);
+}
+.ar-empty-desc {
+ max-width: 42ch;
+ line-height: 1.6;
+}
+.ar-empty-action {
+ margin-top: var(--ar-s-2);
+}

package/src/components/file-upload.css

@@ -1,4 +1,3 @@
-/* FILE UPLOAD */
 .ar-file-upload {
  position: relative;
  display: flex;
@@ -36,7 +35,7 @@
  font-size: 0.875rem;
 }
 .ar-file-upload-text strong {
- color: var(--ar-primary);
+ color: var(--ar-primary-text);
 }
 .ar-file-upload-hint {
  font-size: 0.75rem;
@@ -48,4 +47,4 @@
 .ar-file-upload-sm .ar-file-upload-icon {
  width: 1.5rem;
  height: 1.5rem;
-}
+}

package/src/components/footer.css

@@ -1,4 +1,3 @@
-/* FOOTER */
 .ar-footer {
  display: flex;
  flex-direction: column;
@@ -24,3 +23,19 @@
 .ar-footer-center {
  text-align: center;
 }
+/* Sheet variant — colophon: stock ground, heavy ink rule, mono meta.
+   Opt in by adding .ar-footer-sheet to .ar-footer. */
+.ar-footer-sheet {
+ background: var(--ar-base-100);
+ border-top: 3px solid var(--ar-base-content);
+ border-radius: 0;
+ font-family: var(--ar-font-mono);
+ font-size: 0.6875rem;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+ padding: var(--ar-s-8) var(--ar-s-4);
+}
+.ar-footer-sheet a:hover {
+ text-decoration: underline;
+ text-underline-offset: 0.25em;
+}

package/src/components/forms.css

@@ -1,4 +1,3 @@
-/* FORMS */
 .ar-fieldset {
  display: flex;
  flex-direction: column;
@@ -66,4 +65,4 @@
 .ar-range {
  accent-color: var(--ar-primary);
  width: 100%;
-}
+}

package/src/components/heading.css

@@ -0,0 +1,27 @@
+.ar-heading {
+ display: flex;
+ flex-direction: column;
+ gap: var(--ar-s-2);
+}
+.ar-heading-eyebrow {
+ font-size: 0.75rem;
+ font-weight: 700;
+ letter-spacing: 0.15em;
+ text-transform: uppercase;
+ color: var(--ar-gray-500);
+}
+.ar-heading-title {
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ line-height: 1.2;
+ text-wrap: balance;
+ color: var(--ar-base-content);
+}
+.ar-heading-desc {
+ line-height: 1.6;
+ color: var(--ar-gray-600);
+}
+.ar-heading-center {
+ align-items: center;
+ text-align: center;
+}

package/src/components/hero.css

@@ -1,4 +1,3 @@
-/* HERO */
 .ar-hero {
  display: flex;
  align-items: center;
@@ -19,4 +18,4 @@
   flex-direction: row;
   text-align: left;
  }
-}
+}

package/src/components/join.css

@@ -1,4 +1,3 @@
-/* JOIN */
 .ar-join {
  display: inline-flex;
  align-items: stretch;
@@ -11,4 +10,4 @@
 .ar-join .ar-btn,
 .ar-join-item {
  border-radius: 0;
-}
+}

package/src/components/kbd.css

@@ -0,0 +1,15 @@
+/* KEYBOARD KEY */
+.ar-kbd {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 1.75rem;
+ padding: 0.125rem 0.375rem;
+ border: var(--ar-border-width) solid var(--ar-base-300);
+ border-bottom-width: calc(var(--ar-border-width) + 1px);
+ border-radius: var(--ar-radius-field);
+ background: var(--ar-base-200);
+ color: var(--ar-base-content);
+ font: 600 0.75rem/1.4 var(--ar-font-mono);
+ text-align: center;
+}

package/src/components/link.css

@@ -1,6 +1,5 @@
-/* LINK */
 .ar-link {
- color: var(--ar-primary);
+ color: var(--ar-primary-text);
  text-decoration: underline;
  cursor: pointer;
 }
@@ -21,4 +20,4 @@
 .ar-desc a:hover {
  background-position: left;
  color: var(--ar-arc);
-}
+}

package/src/components/loading.css

@@ -0,0 +1,109 @@
+/* LOADING BAR */
+.ar-loading {
+ width: 360px;
+ max-width: 100%;
+ font-family: var(--ar-base-font);
+ color: var(--ar-base-content);
+}
+.ar-loading-head {
+ display: flex;
+ align-items: baseline;
+ justify-content: space-between;
+ gap: var(--ar-s-3);
+ margin-bottom: var(--ar-s-2);
+}
+.ar-loading-label {
+ font-family: var(--ar-base-font);
+ font-weight: 700;
+ font-size: 1.375rem;
+ letter-spacing: 0.02em;
+ color: var(--ar-base-content);
+ line-height: 1;
+}
+.ar-loading-pct {
+ font-family: var(--ar-font-mono);
+ font-size: 1rem;
+ letter-spacing: 0.06em;
+ color: var(--ar-primary-text);
+ line-height: 1;
+ text-transform: uppercase;
+}
+.ar-loading-bar {
+ position: relative;
+ height: 1.75rem;
+ background-color: var(--ar-base-200);
+ border: var(--ar-border-width) solid var(--ar-base-content);
+ border-radius: var(--ar-radius-field);
+ box-shadow: var(--ar-shadow-md);
+ overflow: hidden;
+}
+.ar-loading-fill {
+ position: absolute;
+ inset: 0;
+ width: 0%;
+ background-color: var(--ar-error);
+ border-right: var(--ar-border-width) solid var(--ar-base-content);
+ background-image: repeating-linear-gradient(
+  to right,
+  oklch(100% 0 0 / 0.16) 0 6px,
+  transparent 6px 12px
+ );
+ animation: ar-loading-progress 2.8s cubic-bezier(0.35, 0, 0.3, 1) infinite;
+}
+.ar-loading-pips {
+ position: absolute;
+ inset: 0;
+ display: grid;
+ grid-template-columns: repeat(10, 1fr);
+ pointer-events: none;
+}
+.ar-loading-pips span {
+ display: block;
+ border-right: var(--ar-border-width)
+  solid color-mix(in srgb, var(--ar-base-content) 28%, transparent);
+}
+.ar-loading-pips span:last-child {
+ border-right: none;
+}
+.ar-loading-hint {
+ margin: var(--ar-s-3) 0 0;
+ font-family: var(--ar-font-mono);
+ font-size: 1rem;
+ color: var(--ar-gray-600);
+ letter-spacing: 0.04em;
+ line-height: 1.2;
+ text-transform: uppercase;
+}
+.ar-loading-hint kbd {
+ font-family: var(--ar-font-mono);
+ background-color: var(--ar-base-100);
+ border: var(--ar-border-width) solid var(--ar-base-content);
+ border-radius: var(--ar-radius-field);
+ padding: 1px 0.375rem;
+ display: inline-block;
+ line-height: 1.1;
+ color: var(--ar-base-content);
+}
+@keyframes ar-loading-progress {
+ 0% {
+  width: 0%;
+  background-color: var(--ar-error);
+ }
+ 35% {
+  background-color: var(--ar-error);
+ }
+ 55% {
+  background-color: var(--ar-success);
+ }
+ 90%,
+ 100% {
+  width: 100%;
+  background-color: var(--ar-primary);
+ }
+}
+@media (prefers-reduced-motion: reduce) {
+ .ar-loading-fill {
+  animation: none;
+  width: 65%;
+ }
+}

package/src/components/menu.css

@@ -1,4 +1,4 @@
-/* MENU & DROPDOWN */
+/* MENU & DROPDOWN */
 .ar-menu {
  display: flex;
  flex-direction: column;
@@ -17,6 +17,11 @@
 .ar-menu li > a:hover {
  background: var(--ar-base-200);
 }
+.ar-menu li.is-active > a {
+ background: var(--ar-base-200);
+ color: var(--ar-primary-text);
+ font-weight: 700;
+}
 .ar-menu-horizontal {
  flex-direction: row;
  align-items: center;
@@ -26,6 +31,19 @@
  font-size: 0.8rem;
  padding: 0.25rem 0.5rem;
 }
+
+.ar-menu-icon {
+ display: inline-flex;
+ align-items: center;
+ justify-content: center;
+ width: 1.25rem;
+ margin-right: var(--ar-s-3);
+ vertical-align: middle;
+ flex: none;
+}
+.ar-menu-text {
+ min-width: 0;
+}
 .ar-dropdown {
  position: relative;
  display: inline-block;
@@ -54,3 +72,35 @@
  right: 0;
  height: 0.75rem;
 }
+.ar-dropdown-end .ar-dropdown-content {
+ top: 100%;
+ right: 0;
+ left: auto;
+}
+.ar-theme-menu {
+ min-width: 11rem;
+}
+.ar-theme-menu li > button {
+ display: block;
+ width: 100%;
+ text-align: left;
+ padding: 0.5rem 0.75rem;
+ font: inherit;
+ color: var(--ar-base-content);
+ background: transparent;
+ border: 1px solid transparent;
+ border-radius: var(--ar-radius-field);
+ cursor: pointer;
+}
+.ar-theme-menu li > button:hover {
+ background: var(--ar-base-200);
+}
+.ar-theme-menu li > button.ar-btn-primary {
+ background: transparent;
+ border-color: transparent;
+ color: var(--ar-primary-text);
+ font-weight: 700;
+}
+.ar-theme-menu li > button.ar-btn-primary::before {
+ content: "\2713\00a0";
+}

package/src/components/misc.css

@@ -1,4 +1,4 @@
-/* DIVIDER & STEPPER & AVATAR */
+/* DIVIDER & STEPPER & AVATAR */
 .ar-divider {
  display: flex;
  align-items: center;
@@ -27,6 +27,7 @@
  text-align: center;
  font-size: 0.75rem;
  color: var(--ar-gray-600);
+ position: relative;
 }
 .ar-step::before {
  content: attr(data-step);
@@ -39,6 +40,18 @@
  background: var(--ar-base-300);
  color: var(--ar-base-content);
  font-weight: 700;
+ position: relative;
+ z-index: 1;
+}
+.ar-step:not(:last-child)::after {
+ content: "";
+ position: absolute;
+ top: 1rem;
+ left: calc(50% + 1rem);
+ width: calc(100% + var(--ar-s-2) - 2rem);
+ height: var(--ar-border-width);
+ background: var(--ar-base-300);
+ z-index: 0;
 }
 .ar-step-active::before {
  background: var(--ar-primary);
@@ -55,3 +68,29 @@
  height: 100%;
  object-fit: cover;
 }
+.ar-avatar-group {
+ display: inline-flex;
+ align-items: center;
+}
+.ar-avatar-group > * {
+ border: var(--ar-border-width) solid var(--ar-base-100);
+}
+.ar-avatar-group > * + * {
+ margin-left: -0.75rem;
+}
+.ar-avatar-group .ar-avatar {
+ flex-shrink: 0;
+}
+.ar-avatar-more {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ flex-shrink: 0;
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-base-300);
+ color: var(--ar-base-content);
+ font-size: 0.75rem;
+ font-weight: 700;
+}

package/src/components/modal.css

@@ -1,4 +1,3 @@
-/* MODAL */
 .ar-modal {
  border: 0;
  padding: 0;
@@ -29,4 +28,4 @@
 }
 .ar-modal-backdrop {
  display: contents;
-}
+}

package/src/components/navbar.css

@@ -1,4 +1,3 @@
-/* NAVBAR */
 .ar-navbar {
  display: flex;
  align-items: center;
@@ -22,7 +21,9 @@
 .ar-navbar-end {
  display: flex;
  align-items: center;
+ justify-content: flex-end;
  gap: var(--ar-s-2);
+ flex: 1;
 }
 @media (min-width: 1024px) {
  .ar-navbar-center {
@@ -30,8 +31,137 @@
  }
 }
 .ar-navbar-brand {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-2);
  font-size: 1.875rem;
  font-weight: 400;
  color: var(--ar-base-content);
  text-decoration: none;
 }
+.ar-navbar-brand img {
+ height: 1.75rem;
+ width: auto;
+ border-radius: 6px;
+}
+.ar-search {
+ position: relative;
+ display: flex;
+ align-items: center;
+}
+.ar-search .ar-input {
+ width: min(11rem, 34vw);
+}
+@media (min-width: 1024px) {
+ .ar-search .ar-input {
+  width: 16rem;
+ }
+}
+.ar-search-results {
+ position: absolute;
+ left: 50%;
+ right: auto;
+ transform: translateX(-50%);
+ top: calc(100% + 0.5rem);
+ width: min(22rem, 90vw);
+ max-height: 60vh;
+ overflow-y: auto;
+ margin-top: 0;
+ padding: var(--ar-s-2);
+ background: var(--ar-base-100);
+ border: 1px solid var(--ar-base-300);
+ border-radius: var(--ar-radius-box);
+ box-shadow: 0 8px 24px rgb(0 0 0 / 0.15);
+ z-index: 60;
+}
+.ar-search-results li > a {
+ white-space: normal;
+ display: block;
+ padding: var(--ar-s-1) var(--ar-s-2);
+}
+.ar-search-kbd {
+ position: absolute;
+ right: var(--ar-s-2);
+ top: 50%;
+ transform: translateY(-50%);
+ font: 600 0.68rem/1 var(--ar-font-mono);
+ color: var(--ar-gray-600);
+ background: var(--ar-base-200);
+ border: 1px solid var(--ar-base-300);
+ border-radius: var(--ar-radius-field);
+ padding: 3px 6px;
+ pointer-events: none;
+}
+.ar-search:focus-within .ar-search-kbd,
+.ar-search .ar-input:not(:placeholder-shown) ~ .ar-search-kbd {
+ display: none;
+}
+.ar-modal .ar-search {
+ display: flex;
+ position: static;
+ width: 100%;
+}
+.ar-modal .ar-search .ar-input {
+ width: 100%;
+}
+.ar-modal .ar-search-kbd {
+ display: none;
+}
+.ar-modal .ar-search-results {
+ position: static;
+ transform: none;
+ width: 100%;
+ max-height: 50vh;
+ margin-top: var(--ar-s-2);
+ box-shadow: none;
+}
+.ar-sidebar .ar-search {
+ display: flex;
+ position: relative;
+ width: 100%;
+ margin-bottom: var(--ar-s-3);
+}
+.ar-sidebar .ar-search .ar-input {
+ width: 100%;
+}
+.ar-sidebar .ar-search-results {
+ position: static;
+ transform: none;
+ width: 100%;
+ max-height: 40vh;
+ margin-top: var(--ar-s-2);
+ box-shadow: none;
+}
+/* Sheet variant — newspaper chrome: square, flat, mono labels in the print
+   idiom. Opt in by adding .ar-navbar-sheet to .ar-navbar. */
+.ar-navbar-sheet {
+ border-radius: 0;
+ font-family: var(--ar-font-mono);
+ font-size: 0.6875rem;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+.ar-navbar-sheet .ar-navbar-brand {
+ font-family: var(--ar-font-serif);
+ font-size: 1.375rem;
+ font-weight: 700;
+ letter-spacing: -0.02em;
+ line-height: 1.05;
+ text-transform: none;
+}
+.ar-navbar-sheet .ar-navbar-brand img {
+ border-radius: 0;
+}
+.ar-navbar-sheet .ar-btn {
+ border-radius: 0;
+ font-family: var(--ar-font-mono);
+ font-size: 0.6875rem;
+ letter-spacing: 0.08em;
+ text-transform: uppercase;
+}
+.ar-navbar-sheet .ar-input,
+.ar-navbar-sheet .ar-search-results,
+.ar-navbar-sheet .ar-dropdown-content {
+ border-radius: 0;
+ box-shadow: none;
+}

package/src/components/pagination.css

@@ -1,4 +1,3 @@
-/* PAGINATION */
 .ar-pagination {
  display: flex;
  align-items: center;
@@ -18,12 +17,18 @@
  border: var(--ar-border-width) solid transparent;
  background: transparent;
  color: var(--ar-base-content);
+ font-family: inherit;
  font-size: 0.875rem;
  font-weight: 500;
  text-decoration: none;
  cursor: pointer;
+ appearance: none;
+ -webkit-appearance: none;
  transition: all 0.2s ease;
 }
+button.ar-page-item {
+ line-height: 1;
+}
 .ar-page-item:hover {
  background: var(--ar-base-200);
 }
@@ -43,4 +48,4 @@
 .ar-page-ellipsis {
  pointer-events: none;
  color: var(--ar-gray-500);
-}
+}

package/src/components/popover.css

@@ -1,4 +1,3 @@
-/* POPOVER */
 .ar-popover {
  position: relative;
  display: inline-block;
@@ -28,7 +27,7 @@
  visibility: visible;
  pointer-events: auto;
 }
-/* Placement: top (default) */
+
 .ar-popover-content[data-ar-placement="top"] {
  bottom: calc(100% + 0.5rem);
  left: 50%;
@@ -37,7 +36,7 @@
 .ar-popover-open .ar-popover-content[data-ar-placement="top"] {
  transform: translateX(-50%) translateY(0);
 }
-/* Placement: bottom */
+
 .ar-popover-content[data-ar-placement="bottom"] {
  top: calc(100% + 0.5rem);
  left: 50%;
@@ -46,7 +45,7 @@
 .ar-popover-open .ar-popover-content[data-ar-placement="bottom"] {
  transform: translateX(-50%) translateY(0);
 }
-/* Placement: left */
+
 .ar-popover-content[data-ar-placement="left"] {
  right: calc(100% + 0.5rem);
  top: 50%;
@@ -55,7 +54,7 @@
 .ar-popover-open .ar-popover-content[data-ar-placement="left"] {
  transform: translateY(-50%) translateX(0);
 }
-/* Placement: right */
+
 .ar-popover-content[data-ar-placement="right"] {
  left: calc(100% + 0.5rem);
  top: 50%;
@@ -67,4 +66,4 @@
 .ar-popover-title {
  font-weight: 600;
  margin-bottom: var(--ar-s-1);
-}
+}

package/src/components/progress.css

@@ -1,4 +1,3 @@
-/* PROGRESS */
 .ar-progress {
  appearance: none;
  width: 100%;
@@ -16,4 +15,4 @@
 }
 .ar-progress::-moz-progress-bar {
  background: var(--ar-primary);
-}
+}

package/src/components/prose.css

@@ -1,4 +1,4 @@
-/* PROSE (article typography) */
+/* PROSE (article typography) */
 .ar-prose {
  font-size: 1rem;
  line-height: 1.75;
@@ -77,4 +77,4 @@
  border: 0;
  border-top: var(--ar-border-width) solid var(--ar-base-300);
  margin: 1.5rem 0;
-}
+}

package/src/components/rating.css

@@ -1,4 +1,3 @@
-/* RATING */
 .ar-rating {
  display: inline-flex;
  gap: var(--ar-s-1);
@@ -34,4 +33,4 @@
 .ar-rating-readonly label:hover ~ label,
 .ar-rating-readonly input:checked ~ label {
  transform: none;
-}
+}

package/src/components/scroll-top.css

@@ -1,4 +1,4 @@
-/* SCROLL TO TOP */
+/* SCROLL TO TOP */
 .ar-scroll-top {
  position: fixed;
  bottom: var(--ar-s-6);
@@ -33,4 +33,4 @@
 .ar-scroll-top svg {
  width: 1.25rem;
  height: 1.25rem;
-}
+}