arekui 1.0.0 → 2.0.0

package/src/components/forms.css

@@ -1,69 +1,68 @@
-/* FORMS */
-.ar-fieldset {
- display: flex;
- flex-direction: column;
- gap: var(--ar-s-2);
- border: 0;
- margin: 0;
- padding: 0;
-}
-.ar-label {
- display: flex;
- align-items: center;
- gap: var(--ar-s-2);
- font-weight: 600;
-}
-.ar-input,
-.ar-select,
-.ar-textarea {
- width: 100%;
- border: var(--ar-border-width) solid var(--ar-base-300);
- border-radius: var(--ar-radius-field);
- background: var(--ar-base-100);
- color: var(--ar-base-content);
- padding: 0.5rem 0.75rem;
-}
-.ar-input:focus,
-.ar-select:focus,
-.ar-textarea:focus {
- outline: 2px solid var(--ar-primary);
- outline-offset: 0;
- border-color: transparent;
-}
-.ar-checkbox,
-.ar-radio {
- accent-color: var(--ar-primary);
- width: 1.125rem;
- height: 1.125rem;
-}
-.ar-toggle {
- position: relative;
- appearance: none;
- width: 2.75rem;
- height: 1.5rem;
- border-radius: var(--ar-radius-pill);
- background: var(--ar-base-300);
- cursor: pointer;
- transition: background 0.2s;
-}
-.ar-toggle::after {
- content: "";
- position: absolute;
- top: 0.1875rem;
- left: 0.1875rem;
- width: 1.125rem;
- height: 1.125rem;
- border-radius: var(--ar-radius-pill);
- background: var(--ar-base-100);
- transition: transform 0.2s;
-}
-.ar-toggle:checked {
- background: var(--ar-primary);
-}
-.ar-toggle:checked::after {
- transform: translateX(1.25rem);
-}
-.ar-range {
- accent-color: var(--ar-primary);
- width: 100%;
+.ar-fieldset {
+ display: flex;
+ flex-direction: column;
+ gap: var(--ar-s-2);
+ border: 0;
+ margin: 0;
+ padding: 0;
+}
+.ar-label {
+ display: flex;
+ align-items: center;
+ gap: var(--ar-s-2);
+ font-weight: 600;
+}
+.ar-input,
+.ar-select,
+.ar-textarea {
+ width: 100%;
+ border: var(--ar-border-width) solid var(--ar-base-300);
+ border-radius: var(--ar-radius-field);
+ background: var(--ar-base-100);
+ color: var(--ar-base-content);
+ padding: 0.5rem 0.75rem;
+}
+.ar-input:focus,
+.ar-select:focus,
+.ar-textarea:focus {
+ outline: 2px solid var(--ar-primary);
+ outline-offset: 0;
+ border-color: transparent;
+}
+.ar-checkbox,
+.ar-radio {
+ accent-color: var(--ar-primary);
+ width: 1.125rem;
+ height: 1.125rem;
+}
+.ar-toggle {
+ position: relative;
+ appearance: none;
+ width: 2.75rem;
+ height: 1.5rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-base-300);
+ cursor: pointer;
+ transition: background 0.2s;
+}
+.ar-toggle::after {
+ content: "";
+ position: absolute;
+ top: 0.1875rem;
+ left: 0.1875rem;
+ width: 1.125rem;
+ height: 1.125rem;
+ border-radius: var(--ar-radius-pill);
+ background: var(--ar-base-100);
+ transition: transform 0.2s;
+}
+.ar-toggle:checked {
+ background: var(--ar-primary);
+}
+.ar-toggle:checked::after {
+ transform: translateX(1.25rem);
+}
+.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,22 +1,21 @@
-/* HERO */
-.ar-hero {
- display: flex;
- align-items: center;
- justify-content: center;
- background: var(--ar-base-200);
- padding: var(--ar-s-16) var(--ar-s-6);
-}
-.ar-hero-content {
- display: flex;
- flex-direction: column;
- align-items: center;
- gap: var(--ar-s-6);
- text-align: center;
- max-width: 64rem;
-}
-@media (min-width: 1024px) {
- .ar-hero-content {
-  flex-direction: row;
-  text-align: left;
- }
+.ar-hero {
+ display: flex;
+ align-items: center;
+ justify-content: center;
+ background: var(--ar-base-200);
+ padding: var(--ar-s-16) var(--ar-s-6);
+}
+.ar-hero-content {
+ display: flex;
+ flex-direction: column;
+ align-items: center;
+ gap: var(--ar-s-6);
+ text-align: center;
+ max-width: 64rem;
+}
+@media (min-width: 1024px) {
+ .ar-hero-content {
+  flex-direction: row;
+  text-align: left;
+ }
 }

package/src/components/join.css

@@ -1,14 +1,13 @@
-/* JOIN */
-.ar-join {
- display: inline-flex;
- align-items: stretch;
- border-radius: var(--ar-radius-field);
- overflow: hidden;
-}
-.ar-join-item:not(:first-child) {
- border-left-width: 0;
-}
-.ar-join .ar-btn,
-.ar-join-item {
- border-radius: 0;
+.ar-join {
+ display: inline-flex;
+ align-items: stretch;
+ border-radius: var(--ar-radius-field);
+ overflow: hidden;
+}
+.ar-join-item:not(:first-child) {
+ border-left-width: 0;
+}
+.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,24 +1,23 @@
-/* LINK */
-.ar-link {
- color: var(--ar-primary);
- text-decoration: underline;
- cursor: pointer;
-}
-.ar-link-hover {
- text-decoration: none;
-}
-.ar-link-hover:hover {
- text-decoration: underline;
-}
-.ar-desc a {
- text-decoration: underline;
- background: var(--ar-desc-grad);
- background-size: 200%;
- transition:
-  background-position 0.5s ease-out,
-  color 0.5s ease-out;
-}
-.ar-desc a:hover {
- background-position: left;
- color: var(--ar-arc);
+.ar-link {
+ color: var(--ar-primary-text);
+ text-decoration: underline;
+ cursor: pointer;
+}
+.ar-link-hover {
+ text-decoration: none;
+}
+.ar-link-hover:hover {
+ text-decoration: underline;
+}
+.ar-desc a {
+ text-decoration: underline;
+ background: var(--ar-desc-grad);
+ background-size: 200%;
+ transition:
+  background-position 0.5s ease-out,
+  color 0.5s ease-out;
+}
+.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,56 +1,106 @@
 /* MENU & DROPDOWN */
-.ar-menu {
- display: flex;
- flex-direction: column;
- list-style: none;
- margin: 0;
- padding: var(--ar-s-2);
- background: var(--ar-base-100);
-}
-.ar-menu li > a {
- display: block;
- padding: 0.5rem 0.75rem;
- border-radius: var(--ar-radius-field);
- color: var(--ar-base-content);
- text-decoration: none;
-}
-.ar-menu li > a:hover {
- background: var(--ar-base-200);
-}
-.ar-menu-horizontal {
- flex-direction: row;
- align-items: center;
- gap: var(--ar-s-2);
-}
-.ar-menu-sm li > a {
- font-size: 0.8rem;
- padding: 0.25rem 0.5rem;
-}
-.ar-dropdown {
- position: relative;
- display: inline-block;
-}
-.ar-dropdown-content {
- display: none;
- position: absolute;
- z-index: 20;
- min-width: 15rem;
- margin-top: 0.75rem;
- background: var(--ar-base-100);
- border-radius: var(--ar-radius-box);
- box-shadow: var(--ar-shadow-lg);
- padding: var(--ar-s-2);
-}
-.ar-dropdown:hover .ar-dropdown-content,
-.ar-dropdown:focus-within .ar-dropdown-content,
-.ar-dropdown.ar-dropdown-open .ar-dropdown-content {
- display: block;
-}
-.ar-dropdown-content::before {
- content: "";
- position: absolute;
- top: -0.75rem;
- left: 0;
- right: 0;
- height: 0.75rem;
+.ar-menu {
+ display: flex;
+ flex-direction: column;
+ list-style: none;
+ margin: 0;
+ padding: var(--ar-s-2);
+ background: var(--ar-base-100);
+}
+.ar-menu li > a {
+ display: block;
+ padding: 0.5rem 0.75rem;
+ border-radius: var(--ar-radius-field);
+ color: var(--ar-base-content);
+ text-decoration: none;
+}
+.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;
+ gap: var(--ar-s-2);
+}
+.ar-menu-sm li > a {
+ 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;
+}
+.ar-dropdown-content {
+ display: none;
+ position: absolute;
+ z-index: 20;
+ min-width: 15rem;
+ margin-top: 0.75rem;
+ background: var(--ar-base-100);
+ border-radius: var(--ar-radius-box);
+ box-shadow: var(--ar-shadow-lg);
+ padding: var(--ar-s-2);
+}
+.ar-dropdown:hover .ar-dropdown-content,
+.ar-dropdown:focus-within .ar-dropdown-content,
+.ar-dropdown.ar-dropdown-open .ar-dropdown-content {
+ display: block;
+}
+.ar-dropdown-content::before {
+ content: "";
+ position: absolute;
+ top: -0.75rem;
+ left: 0;
+ 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";
 }