arekui 1.0.0 → 2.0.0

package/src/components/misc.css

@@ -1,57 +1,96 @@
 /* DIVIDER & STEPPER & AVATAR */
-.ar-divider {
- display: flex;
- align-items: center;
- gap: var(--ar-s-3);
- color: var(--ar-gray-600);
- margin: var(--ar-s-4) 0;
-}
-.ar-divider::before,
-.ar-divider::after {
- content: "";
- flex: 1;
- height: var(--ar-border-width);
- background: var(--ar-base-300);
-}
-.ar-stepper {
- display: flex;
- justify-content: space-between;
- gap: var(--ar-s-2);
-}
-.ar-step {
- flex: 1;
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--ar-s-1);
- text-align: center;
- font-size: 0.75rem;
- color: var(--ar-gray-600);
-}
-.ar-step::before {
- content: attr(data-step);
- display: flex;
- align-items: center;
- justify-content: center;
- width: 2rem;
- height: 2rem;
- border-radius: var(--ar-radius-pill);
- background: var(--ar-base-300);
- color: var(--ar-base-content);
- font-weight: 700;
-}
-.ar-step-active::before {
- background: var(--ar-primary);
- color: var(--ar-primary-content);
-}
-.ar-avatar {
- width: 3rem;
- height: 3rem;
- border-radius: var(--ar-radius-pill);
- overflow: hidden;
-}
-.ar-avatar img {
- width: 100%;
- height: 100%;
- object-fit: cover;
+.ar-divider {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-3);
+ color: var(--ar-gray-600);
+ margin: var(--ar-s-4) 0;
+}
+.ar-divider::before,
+.ar-divider::after {
+ content: "";
+ flex: 1;
+ height: var(--ar-border-width);
+ background: var(--ar-base-300);
+}
+.ar-stepper {
+ display: flex;
+ justify-content: space-between;
+ gap: var(--ar-s-2);
+}
+.ar-step {
+ flex: 1;
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--ar-s-1);
+ text-align: center;
+ font-size: 0.75rem;
+ color: var(--ar-gray-600);
+ position: relative;
+}
+.ar-step::before {
+ content: attr(data-step);
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ width: 2rem;
+ height: 2rem;
+ border-radius: var(--ar-radius-pill);
+ 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);
+ color: var(--ar-primary-content);
+}
+.ar-avatar {
+ width: 3rem;
+ height: 3rem;
+ border-radius: var(--ar-radius-pill);
+ overflow: hidden;
+}
+.ar-avatar img {
+ width: 100%;
+ 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,32 +1,31 @@
-/* MODAL */
-.ar-modal {
- border: 0;
- padding: 0;
- max-width: none;
- max-height: none;
- width: 100%;
- height: 100%;
- margin: 0;
- background: rgb(0 0 0 / 0.5);
- display: none;
- align-items: center;
- justify-content: center;
-}
-.ar-modal[open] {
- display: flex;
-}
-.ar-modal::backdrop {
- background: rgb(0 0 0 / 0.5);
-}
-.ar-modal-box {
- background: var(--ar-base-100);
- border-radius: var(--ar-radius-box);
- box-shadow: var(--ar-shadow-xl);
- padding: var(--ar-s-6);
- width: min(92vw, 42rem);
- max-height: 90vh;
- overflow-y: auto;
-}
-.ar-modal-backdrop {
- display: contents;
+.ar-modal {
+ border: 0;
+ padding: 0;
+ max-width: none;
+ max-height: none;
+ width: 100%;
+ height: 100%;
+ margin: 0;
+ background: rgb(0 0 0 / 0.5);
+ display: none;
+ align-items: center;
+ justify-content: center;
+}
+.ar-modal[open] {
+ display: flex;
+}
+.ar-modal::backdrop {
+ background: rgb(0 0 0 / 0.5);
+}
+.ar-modal-box {
+ background: var(--ar-base-100);
+ border-radius: var(--ar-radius-box);
+ box-shadow: var(--ar-shadow-xl);
+ padding: var(--ar-s-6);
+ width: min(92vw, 42rem);
+ max-height: 90vh;
+ overflow-y: auto;
+}
+.ar-modal-backdrop {
+ display: contents;
 }

package/src/components/navbar.css

@@ -1,37 +1,167 @@
-/* NAVBAR */
-.ar-navbar {
- display: flex;
- align-items: center;
- justify-content: space-between;
- gap: var(--ar-s-4);
- padding: var(--ar-s-2) var(--ar-s-4);
- background: var(--ar-base-100);
- border-bottom: var(--ar-border-width) solid var(--ar-base-300);
-}
-.ar-navbar-start {
- display: flex;
- align-items: center;
- gap: var(--ar-s-2);
- flex: 1;
-}
-.ar-navbar-center {
- display: none;
- align-items: center;
- gap: var(--ar-s-2);
-}
-.ar-navbar-end {
- display: flex;
- align-items: center;
- gap: var(--ar-s-2);
-}
-@media (min-width: 1024px) {
- .ar-navbar-center {
-  display: flex;
- }
-}
-.ar-navbar-brand {
- font-size: 1.875rem;
- font-weight: 400;
- color: var(--ar-base-content);
- text-decoration: none;
+.ar-navbar {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ gap: var(--ar-s-4);
+ padding: var(--ar-s-2) var(--ar-s-4);
+ background: var(--ar-base-100);
+ border-bottom: var(--ar-border-width) solid var(--ar-base-300);
+}
+.ar-navbar-start {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-2);
+ flex: 1;
+}
+.ar-navbar-center {
+ display: none;
+ align-items: center;
+ gap: var(--ar-s-2);
+}
+.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 {
+  display: flex;
+ }
+}
+.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,46 +1,51 @@
-/* PAGINATION */
-.ar-pagination {
- display: flex;
- align-items: center;
- gap: var(--ar-s-1);
- list-style: none;
- margin: 0;
- padding: 0;
-}
-.ar-page-item {
- display: flex;
- align-items: center;
- justify-content: center;
- min-width: 2.25rem;
- height: 2.25rem;
- padding: 0 var(--ar-s-2);
- border-radius: var(--ar-radius-field);
- border: var(--ar-border-width) solid transparent;
- background: transparent;
- color: var(--ar-base-content);
- font-size: 0.875rem;
- font-weight: 500;
- text-decoration: none;
- cursor: pointer;
- transition: all 0.2s ease;
-}
-.ar-page-item:hover {
- background: var(--ar-base-200);
-}
-.ar-page-active {
- background: var(--ar-primary);
- color: var(--ar-primary-content);
- font-weight: 700;
-}
-.ar-page-active:hover {
- background: var(--ar-primary);
- color: var(--ar-primary-content);
-}
-.ar-page-disabled {
- opacity: 0.4;
- pointer-events: none;
-}
-.ar-page-ellipsis {
- pointer-events: none;
- color: var(--ar-gray-500);
+.ar-pagination {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-1);
+ list-style: none;
+ margin: 0;
+ padding: 0;
+}
+.ar-page-item {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ min-width: 2.25rem;
+ height: 2.25rem;
+ padding: 0 var(--ar-s-2);
+ border-radius: var(--ar-radius-field);
+ 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);
+}
+.ar-page-active {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+ font-weight: 700;
+}
+.ar-page-active:hover {
+ background: var(--ar-primary);
+ color: var(--ar-primary-content);
+}
+.ar-page-disabled {
+ opacity: 0.4;
+ pointer-events: none;
+}
+.ar-page-ellipsis {
+ pointer-events: none;
+ color: var(--ar-gray-500);
 }

package/src/components/popover.css

@@ -1,70 +1,69 @@
-/* POPOVER */
-.ar-popover {
- position: relative;
- display: inline-block;
-}
-.ar-popover-content {
- position: absolute;
- z-index: 30;
- min-width: 14rem;
- padding: var(--ar-s-3) var(--ar-s-4);
- background: var(--ar-base-100);
- color: var(--ar-base-content);
- border-radius: var(--ar-radius-box);
- box-shadow: var(--ar-shadow-lg);
- border: var(--ar-border-width) solid var(--ar-base-300);
- font-size: 0.875rem;
- line-height: 1.5;
- opacity: 0;
- visibility: hidden;
- transition:
-  opacity 0.2s ease,
-  visibility 0.2s ease,
-  transform 0.2s ease;
- pointer-events: none;
-}
-.ar-popover-open .ar-popover-content {
- opacity: 1;
- visibility: visible;
- pointer-events: auto;
-}
-/* Placement: top (default) */
-.ar-popover-content[data-ar-placement="top"] {
- bottom: calc(100% + 0.5rem);
- left: 50%;
- transform: translateX(-50%) translateY(0.25rem);
-}
-.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%;
- transform: translateX(-50%) translateY(-0.25rem);
-}
-.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%;
- transform: translateY(-50%) translateX(0.25rem);
-}
-.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%;
- transform: translateY(-50%) translateX(-0.25rem);
-}
-.ar-popover-open .ar-popover-content[data-ar-placement="right"] {
- transform: translateY(-50%) translateX(0);
-}
-.ar-popover-title {
- font-weight: 600;
- margin-bottom: var(--ar-s-1);
+.ar-popover {
+ position: relative;
+ display: inline-block;
+}
+.ar-popover-content {
+ position: absolute;
+ z-index: 30;
+ min-width: 14rem;
+ padding: var(--ar-s-3) var(--ar-s-4);
+ background: var(--ar-base-100);
+ color: var(--ar-base-content);
+ border-radius: var(--ar-radius-box);
+ box-shadow: var(--ar-shadow-lg);
+ border: var(--ar-border-width) solid var(--ar-base-300);
+ font-size: 0.875rem;
+ line-height: 1.5;
+ opacity: 0;
+ visibility: hidden;
+ transition:
+  opacity 0.2s ease,
+  visibility 0.2s ease,
+  transform 0.2s ease;
+ pointer-events: none;
+}
+.ar-popover-open .ar-popover-content {
+ opacity: 1;
+ visibility: visible;
+ pointer-events: auto;
+}
+
+.ar-popover-content[data-ar-placement="top"] {
+ bottom: calc(100% + 0.5rem);
+ left: 50%;
+ transform: translateX(-50%) translateY(0.25rem);
+}
+.ar-popover-open .ar-popover-content[data-ar-placement="top"] {
+ transform: translateX(-50%) translateY(0);
+}
+
+.ar-popover-content[data-ar-placement="bottom"] {
+ top: calc(100% + 0.5rem);
+ left: 50%;
+ transform: translateX(-50%) translateY(-0.25rem);
+}
+.ar-popover-open .ar-popover-content[data-ar-placement="bottom"] {
+ transform: translateX(-50%) translateY(0);
+}
+
+.ar-popover-content[data-ar-placement="left"] {
+ right: calc(100% + 0.5rem);
+ top: 50%;
+ transform: translateY(-50%) translateX(0.25rem);
+}
+.ar-popover-open .ar-popover-content[data-ar-placement="left"] {
+ transform: translateY(-50%) translateX(0);
+}
+
+.ar-popover-content[data-ar-placement="right"] {
+ left: calc(100% + 0.5rem);
+ top: 50%;
+ transform: translateY(-50%) translateX(-0.25rem);
+}
+.ar-popover-open .ar-popover-content[data-ar-placement="right"] {
+ transform: translateY(-50%) translateX(0);
+}
+.ar-popover-title {
+ font-weight: 600;
+ margin-bottom: var(--ar-s-1);
 }