@typlog/ui 0.12.3 → 0.13.0

package/addons.js

@@ -324,11 +324,10 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
               color: "gray",
               onClick: withModifiers(reset, ["prevent"])
             }, {
-              default: withCtx(() => _cache[5] || (_cache[5] = [
+              default: withCtx(() => [..._cache[5] || (_cache[5] = [
                 createTextVNode(" Back ", -1)
-              ])),
-              _: 1,
-              __: [5]
+              ])]),
+              _: 1
             }),
             shouldDisplay.value === "search" ? (openBlock(), createBlock(unref(TextField), {
               key: 0,
@@ -387,9 +386,8 @@ const _sfc_main$1 = /* @__PURE__ */ defineComponent({
             page: page.value,
             "onUpdate:page": _cache[4] || (_cache[4] = ($event) => page.value = $event),
             total: allIcons.value.length,
-            perpage: _ctx.perpage,
-            size: "2"
-          }, null, 8, ["page", "total", "perpage"])
+            "items-per-page": _ctx.perpage
+          }, null, 8, ["page", "total", "items-per-page"])
         ])) : createCommentVNode("", true)
       ]);
     };

package/components.css

@@ -267,22 +267,29 @@
 .ui-Card:where(.r-variant-soft):where(:any-link, button, label):where(:hover) {
   border-color: var(--gray-a5);
 }
+@layer components {
 .ui-Button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  flex-shrink: 0;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  vertical-align: top;
-  font-style: normal;
-  font-weight: var(--button-font-weight);
-  text-align: center;
-  white-space: nowrap;
-  height: var(--button-height);
-  padding-left: var(--button-padding-x);
-  padding-right: var(--button-padding-x);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    flex-shrink: 0;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    vertical-align: top;
+    font-style: normal;
+    font-weight: var(--button-font-weight);
+    text-align: center;
+    white-space: nowrap;
+    height: var(--button-height);
+    padding-left: var(--button-padding-x);
+    padding-right: var(--button-padding-x);
+    gap: var(--button-gap);
+    font-size: var(--button-font-size);
+    line-height: var(--button-line-height);
+    letter-spacing: var(--button-letter-spacing);
+    border-radius: var(--button-radius);
+}
 }
 .ui-Button:where(.r-variant-ghost) {
   --button-font-weight: var(--font-weight-regular);
@@ -290,15 +297,15 @@
 .ui-Button:where(:not(.r-variant-ghost)) {
   --button-font-weight: var(--font-weight-medium);
 }
-.ui-Button:where([data-disabled]) {
+.ui-Button:where(:disabled, [data-disabled]) {
   cursor: not-allowed;
 }
 .ui-Button:where(.r-size-1) {
-  gap: var(--space-1);
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
-  border-radius: max(var(--radius-1), var(--radius-full));
+  --button-gap: var(--space-1);
+  --button-font-size: var(--font-size-1);
+  --button-line-height: var(--line-height-1);
+  --button-letter-spacing: var(--letter-spacing-1);
+  --button-radius: max(var(--radius-1), var(--radius-full));
   --button-height: var(--space-5);
   --button-padding-x: var(--space-2);
 }
@@ -306,44 +313,44 @@
   --button-ghost-padding-y: var(--space-1);
 }
 .ui-Button:where(.r-size-2) {
-  gap: var(--space-2);
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
-  border-radius: max(var(--radius-2), var(--radius-full));
+  --button-gap: var(--space-2);
+  --button-font-size: var(--font-size-2);
+  --button-line-height: var(--line-height-2);
+  --button-letter-spacing: var(--letter-spacing-2);
+  --button-radius: max(var(--radius-2), var(--radius-full));
   --button-height: var(--space-6);
   --button-padding-x: var(--space-3);
 }
 .ui-Button:where(.r-size-2):where(.r-variant-ghost) {
-  gap: var(--space-1);
+  --button-gap: var(--space-1);
   --button-padding-x: var(--space-2);
   --button-ghost-padding-y: var(--space-1);
 }
 .ui-Button:where(.r-size-3) {
-  gap: var(--space-3);
-  font-size: var(--font-size-3);
-  line-height: var(--line-height-3);
-  letter-spacing: var(--letter-spacing-3);
-  border-radius: max(var(--radius-3), var(--radius-full));
+  --button-gap: var(--space-3);
+  --button-font-size: var(--font-size-3);
+  --button-line-height: var(--line-height-3);
+  --button-letter-spacing: var(--letter-spacing-3);
+  --button-radius: max(var(--radius-3), var(--radius-full));
   --button-height: var(--space-7);
   --button-padding-x: var(--space-4);
 }
 .ui-Button:where(.r-size-3):where(.r-variant-ghost) {
-  gap: var(--space-2);
+  --button-gap: var(--space-2);
   --button-padding-x: var(--space-3);
   --button-ghost-padding-y: calc(var(--space-1) * 1.5);
 }
 .ui-Button:where(.r-size-4) {
-  gap: var(--space-3);
-  font-size: var(--font-size-4);
-  line-height: var(--line-height-4);
-  letter-spacing: var(--letter-spacing-4);
-  border-radius: max(var(--radius-4), var(--radius-full));
+  --button-gap: var(--space-3);
+  --button-font-size: var(--font-size-4);
+  --button-line-height: var(--line-height-4);
+  --button-letter-spacing: var(--letter-spacing-4);
+  --button-radius: max(var(--radius-4), var(--radius-full));
   --button-height: var(--space-8);
   --button-padding-x: var(--space-5);
 }
 .ui-Button:where(.r-size-4):where(.r-variant-ghost) {
-  gap: var(--space-2);
+  --button-gap: var(--space-2);
   --button-padding-x: var(--space-4);
   --button-ghost-padding-y: var(--space-2);
 }
@@ -384,7 +391,7 @@
     filter: var(--button-solid-high-contrast-hover-filter);
 }
 }
-.ui-Button:where(.r-variant-solid):where([data-disabled]) {
+.ui-Button:where(.r-variant-solid):where(:disabled, [data-disabled]) {
   color: var(--gray-a8);
   background-color: var(--gray-a3);
   outline: none;
@@ -413,7 +420,7 @@
 .ui-Button:where(.r-variant-soft):where(:active) {
   background-color: var(--accent-a5);
 }
-.ui-Button:where(.r-variant-soft):where([data-disabled]) {
+.ui-Button:where(.r-variant-soft):where(:disabled, [data-disabled]) {
   color: var(--gray-a8);
   background-color: var(--gray-a3);
 }
@@ -432,7 +439,7 @@
 .ui-Button:where(.r-variant-ghost):where(:active) {
   background-color: var(--accent-a4);
 }
-.ui-Button:where(.r-variant-ghost):where([data-disabled]) {
+.ui-Button:where(.r-variant-ghost):where(:disabled, [data-disabled]) {
   color: var(--gray-a8);
   background-color: transparent;
 }
@@ -459,10 +466,10 @@
   outline: 2px solid var(--focus-8);
   outline-offset: 2px;
 }
-.ui-Button:where(.r-variant-classic):where(:active:not([data-disabled])) {
+.ui-Button:where(.r-variant-classic):where(:active:not(:disabled, [data-disabled])) {
   box-shadow: var(--shadow-1);
 }
-.ui-Button:where(.r-variant-classic):where([data-disabled]) {
+.ui-Button:where(.r-variant-classic):where(:disabled, [data-disabled]) {
   color: var(--gray-a10);
   background-color: var(--gray-a2);
 }
@@ -488,7 +495,7 @@
 .ui-Button:where(.r-variant-outline):where(:active) {
   background-color: var(--accent-a4);
 }
-.ui-Button:where(.r-variant-outline):where([data-disabled]) {
+.ui-Button:where(.r-variant-outline):where(:disabled, [data-disabled]) {
   color: var(--gray-a8);
   box-shadow: inset 0 0 0 1px var(--gray-a7);
   background-color: transparent;
@@ -515,7 +522,7 @@
 .ui-Button:where(.r-variant-surface):where(:active) {
   background-color: var(--accent-a4);
 }
-.ui-Button:where(.r-variant-surface):where([data-disabled]) {
+.ui-Button:where(.r-variant-surface):where(:disabled, [data-disabled]) {
   color: var(--gray-a8);
   box-shadow: inset 0 0 0 1px var(--gray-a6);
   background-color: var(--gray-a2);
@@ -1255,6 +1262,9 @@ to {
   cursor: not-allowed;
 }
 .ui-SwitchThumb {
+  display: inline-flex;
+  justify-content: center;
+  align-items: center;
   background-color: white;
   position: absolute;
   left: var(--switch-thumb-inset);
@@ -3789,24 +3799,33 @@ to {
   padding-inline: var(--collapsible-padding-x);
 }
 
-.ui-Pagination {
+.ui-PaginationList {
   display: flex;
   align-items: center;
-}
-.ui-Pagination:where(.r-size-1) {
   gap: var(--space-1);
 }
-.ui-Pagination:where(.r-size-2) {
-  gap: var(--space-2);
+.ui-PaginationList .ui-Button {
+  height: var(--button-height);
+  width: var(--button-height);
+  padding: 0;
 }
-.ui-Pagination:where(.r-size-3) {
-  gap: var(--space-3);
+.ui-PaginationRoot:where(.r-variant-ghost):where([data-accent-color="gray"]) :where(.ui-Button) {
+  color: var(--accent-12);
+}
+
+/** selected on ghost -> outline */
+.ui-PaginationRoot:where(.r-variant-ghost) :where(.ui-Button[data-selected]) {
+  box-shadow: inset 0 0 0 1px var(--accent-a6);
+}
+.ui-PaginationRoot:where(.r-variant-soft, .r-variant-surface, .r-variant-outline) :where(.ui-Button[data-selected]) {
+  background-color: var(--accent-9);
+  color: var(--accent-contrast);
 }
-.ui-Pagination:where(.r-size-4) {
-  gap: var(--space-4);
+.ui-PaginationRoot:where([data-accent-color="gray"]):where(.r-variant-soft, .r-variant-surface, .r-variant-outline) :where(.ui-Button[data-selected]) {
+  background-color: var(--accent-12);
 }
-.ui-Pagination:where(.r-variant-ghost) {
-  gap: 0;
+.ui-PaginationRoot:where(.r-variant-surface, .r-variant-outline) :where(.ui-Button[data-selected]) {
+  box-shadow: none;
 }
 
 .ui-root {
@@ -3948,10 +3967,10 @@ to {
 .ui-ToastItem:where([data-swipe-direction="right"]) {
   --toast-item-swipe-to-x: calc(100% + var(--toast-x-position))
 }
-.ui-ToastItem:where([data-swipe-direction="top"]) {
+.ui-ToastItem:where([data-swipe-direction="up"]) {
   --toast-item-swipe-to-y: calc(0 - 100% - var(--toast-y-position))
 }
-.ui-ToastItem:where([data-swipe-direction="bottom"]) {
+.ui-ToastItem:where([data-swipe-direction="down"]) {
   --toast-item-swipe-to-y: calc(100% + var(--toast-y-position))
 }
 .ui-ToastItem:where([data-state="closed"]),
@@ -4045,6 +4064,9 @@ to {
 .ui-ToastViewport:where([data-x-position="right"]) {
   right: var(--toast-x-position);
 }
+.ui-ToastViewport:where([data-x-position="center"]) {
+  left: calc(50% - var(--toast-width) / 2);
+}
 .ui-ToastViewport:where([data-y-position="top"]) {
   top: var(--toast-y-position);
 }