@typlog/ui 0.12.1 → 0.12.2

package/components.css

@@ -4,17 +4,21 @@
   z-index: 0;
 }
 
+@layer components {
 .ui-Avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  vertical-align: middle;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  width: var(--avatar-size);
-  height: var(--avatar-size);
-  flex-shrink: 0;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    vertical-align: middle;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    width: var(--avatar-size);
+    height: var(--avatar-size);
+    flex-shrink: 0;
+    border-radius: var(--avatar-border-radius);
+    letter-spacing: var(--avatar-letter-spacing);
+}
 }
 .ui-Avatar > img {
   width: 100%;
@@ -49,8 +53,8 @@
   --avatar-fallback-two-letters-font-size: var(--font-size-1);
   --avatar-ring-width: 1px;
   --avatar-ring-offset: 1px;
-  border-radius: max(var(--radius-2), var(--radius-full));
-  letter-spacing: var(--letter-spacing-1);
+  --avatar-border-radius: max(var(--radius-2), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-1);
 }
 .ui-Avatar:where(.r-size-2) {
   --avatar-size: var(--space-6);
@@ -58,8 +62,8 @@
   --avatar-fallback-two-letters-font-size: var(--font-size-2);
   --avatar-ring-width: 2px;
   --avatar-ring-offset: 2px;
-  border-radius: max(var(--radius-2), var(--radius-full));
-  letter-spacing: var(--letter-spacing-2);
+  --avatar-border-radius: max(var(--radius-2), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-2);
 }
 .ui-Avatar:where(.r-size-3) {
   --avatar-size: var(--space-7);
@@ -67,8 +71,8 @@
   --avatar-fallback-two-letters-font-size: var(--font-size-3);
   --avatar-ring-width: 2px;
   --avatar-ring-offset: 2px;
-  border-radius: max(var(--radius-3), var(--radius-full));
-  letter-spacing: var(--letter-spacing-3);
+  --avatar-border-radius: max(var(--radius-3), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-3);
 }
 .ui-Avatar:where(.r-size-4) {
   --avatar-size: var(--space-8);
@@ -76,48 +80,48 @@
   --avatar-fallback-two-letters-font-size: var(--font-size-4);
   --avatar-ring-width: 2px;
   --avatar-ring-offset: 2px;
-  border-radius: max(var(--radius-3), var(--radius-full));
-  letter-spacing: var(--letter-spacing-4);
+  --avatar-border-radius: max(var(--radius-3), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-4);
 }
 .ui-Avatar:where(.r-size-5) {
   --avatar-size: var(--space-9);
   --avatar-fallback-one-letter-font-size: var(--font-size-6);
   --avatar-ring-width: 3px;
   --avatar-ring-offset: 2px;
-  border-radius: max(var(--radius-4), var(--radius-full));
-  letter-spacing: var(--letter-spacing-6);
+  --avatar-border-radius: max(var(--radius-4), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-6);
 }
 .ui-Avatar:where(.r-size-6) {
   --avatar-size: 80px;
   --avatar-fallback-one-letter-font-size: var(--font-size-7);
   --avatar-ring-width: 3px;
   --avatar-ring-offset: 3px;
-  border-radius: max(var(--radius-5), var(--radius-full));
-  letter-spacing: var(--letter-spacing-7);
+  --avatar-border-radius: max(var(--radius-5), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-7);
 }
 .ui-Avatar:where(.r-size-7) {
   --avatar-size: 96px;
   --avatar-fallback-one-letter-font-size: var(--font-size-7);
   --avatar-ring-width: 3px;
   --avatar-ring-offset: 3px;
-  border-radius: max(var(--radius-5), var(--radius-full));
-  letter-spacing: var(--letter-spacing-7);
+  --avatar-border-radius: max(var(--radius-5), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-7);
 }
 .ui-Avatar:where(.r-size-8) {
   --avatar-size: 128px;
   --avatar-fallback-one-letter-font-size: var(--font-size-8);
   --avatar-ring-width: 4px;
   --avatar-ring-offset: 3px;
-  border-radius: max(var(--radius-6), var(--radius-full));
-  letter-spacing: var(--letter-spacing-8);
+  --avatar-border-radius: max(var(--radius-6), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-8);
 }
 .ui-Avatar:where(.r-size-9) {
   --avatar-size: 160px;
   --avatar-fallback-one-letter-font-size: var(--font-size-9);
   --avatar-ring-width: 4px;
   --avatar-ring-offset: 4px;
-  border-radius: max(var(--radius-6), var(--radius-full));
-  letter-spacing: var(--letter-spacing-9);
+  --avatar-border-radius: max(var(--radius-6), var(--radius-full));
+  --avatar-letter-spacing: var(--letter-spacing-9);
 }
 .ui-Avatar:where(.r-variant-ring) {
   outline-color: var(--accent-9);
@@ -521,6 +525,12 @@
   padding: 0;
 }
 
+.ui-Button.ui-CloseButton {
+  height: var(--button-height);
+  width: var(--button-height);
+  padding: 0;
+}
+
 .ui-root {
   --scrollarea-scrollbar-horizontal-margin-top: var(--space-1);
   --scrollarea-scrollbar-horizontal-margin-bottom: var(--space-1);
@@ -668,24 +678,31 @@
   box-sizing: border-box;
   padding-top: var(--space-6);
 }
+@layer components {
 .ui-DialogPopup {
-  width: 100%;
-  max-height: calc(100vh - var(--space-6) * 2);
-  position: relative;
-  box-sizing: border-box;
-  overflow: auto;
-  text-align: left;
-  box-sizing: border-box;
-  background-color: var(--color-panel-solid);
-  outline: none;
-  border-top-left-radius: var(--dialog-popup-radius);
-  border-top-right-radius: var(--dialog-popup-radius);
-  max-width: var(--dialog-popup-max-width);
-  max-height: var(--dialog-popup-max-height);
-  padding: var(--dialog-popup-padding);
+    width: 100%;
+    max-height: calc(100vh - var(--space-6) * 2);
+    position: relative;
+    box-sizing: border-box;
+    overflow: auto;
+    text-align: left;
+    box-sizing: border-box;
+    background-color: var(--color-panel-solid);
+    outline: none;
+    border-top-left-radius: var(--dialog-popup-radius);
+    border-top-right-radius: var(--dialog-popup-radius);
+    max-width: var(--dialog-popup-max-width);
+    max-height: var(--dialog-popup-max-height);
+    padding: var(--dialog-popup-padding);
+}
+:where(.ui-DialogPopup) .ui-CloseButton {
+    position: absolute;
+    top: calc(var(--dialog-popup-padding) / 2);
+    right: calc(var(--dialog-popup-padding) / 2);
+}
 }
 .ui-DialogPopup:where(.r-size-1) {
-  --dialog-popup-padding: var(--space-3);
+  --dialog-popup-padding: var(--space-4);
   --dialog-popup-radius: var(--radius-4);
   --dialog-popup-max-width: 450px;
   --dialog-popup-max-height: calc(100vh - 100px);
@@ -703,7 +720,7 @@
   --dialog-popup-max-height: calc(100vh - 100px);
 }
 .ui-DialogPopup:where(.r-size-4) {
-  --dialog-popup-padding: var(--space-6);
+  --dialog-popup-padding: var(--space-5);
   --dialog-popup-radius: var(--radius-5);
   --dialog-popup-max-width: 1200px;
   --dialog-popup-max-height: calc(100vh - 100px);
@@ -714,11 +731,6 @@
   --dialog-popup-max-width: none;
   --dialog-popup-max-height: calc(100vh - 64px);
 }
-
-/* special handle for tailwindcss p-0, when css priority doesn't work */
-.ui-DialogPopup:where(.p-0) {
-  --dialog-popup-padding: 0;
-}
 @media (min-width: 450px) {
 .ui-DialogContainer {
     justify-content: center;
@@ -726,10 +738,12 @@
     padding-left: var(--space-4);
     padding-right: var(--space-4);
 }
+@layer components {
 .ui-DialogPopup {
-    box-shadow: var(--shadow-6);
-    border-bottom-left-radius: var(--dialog-popup-radius);
-    border-bottom-right-radius: var(--dialog-popup-radius);
+      box-shadow: var(--shadow-6);
+      border-bottom-left-radius: var(--dialog-popup-radius);
+      border-bottom-right-radius: var(--dialog-popup-radius);
+}
 }
 }
 @media (prefers-reduced-motion: no-preference) {
@@ -829,7 +843,6 @@ to {
   box-sizing: border-box;
   overflow: hidden;
   border-radius: var(--menu-content-border-radius);
-
   box-shadow: var(--shadow-5);
   background-color: var(--color-panel-solid);
 }
@@ -932,17 +945,19 @@ to {
   background-color: var(--gray-a6);
 }
 
+@layer components {
 .ui-PopoverPopup {
-  background-color: var(--color-panel-solid);
-  box-shadow: var(--shadow-5);
-  min-width: var(--reka-popover-trigger-width);
-  max-width: var(--reka-popover-content-available-width);
-  outline: 0;
-  overflow: auto;
-  position: relative;
-  box-sizing: border-box;
-  transform-origin: var(--reka-popover-content-transform-origin);
-  padding: var(--popover-popup-padding);
+    background-color: var(--color-panel-solid);
+    box-shadow: var(--shadow-5);
+    min-width: var(--reka-popover-trigger-width);
+    max-width: var(--reka-popover-content-available-width);
+    outline: 0;
+    overflow: auto;
+    position: relative;
+    box-sizing: border-box;
+    transform-origin: var(--reka-popover-content-transform-origin);
+    padding: var(--popover-popup-padding);
+}
 }
 .ui-PopoverPopup:where(.r-size-1) {
   border-radius: var(--radius-4);
@@ -952,9 +967,6 @@ to {
   border-radius: var(--radius-5);
   --popover-popup-padding: var(--space-4);
 }
-.ui-PopoverPopup:where(.p-0) {
-  --popover-popup-padding: 0;
-}
 
 .ui-root {
   --switch-disabled-blend-mode: multiply;
@@ -2858,12 +2870,14 @@ to {
   --radio-size: calc(var(--space-4) * 1.25);
 }
 
+@layer components {
 .ui-RadioGroupItem {
-  display: inline-flex;
-  align-items: center;
-  gap: .5em;
-  width: -moz-fit-content;
-  width: fit-content;
+    display: inline-flex;
+    align-items: center;
+    gap: .5em;
+    width: -moz-fit-content;
+    width: fit-content;
+}
 }
 
 .ui-RadioCardsRoot:where(.r-size-1) {
@@ -2878,19 +2892,21 @@ to {
   --card-padding: var(--space-5);
   --card-border-radius: max(var(--radius-5), var(--radius-full));
 }
+@layer components {
 .ui-BaseCard {
-  display: block;
-  position: relative;
-  overflow: hidden;
-  font-style: normal;
-  text-align: start;
-  box-sizing: border-box;
-  border-radius: var(--card-border-radius);
-  padding: var(--card-padding);
-  border-color: var(--card-border-color, var(--gray-a5));
-  border-width: var(--card-border-width, 1px);
-  border-style: solid;
-  width: 100%;
+    display: block;
+    position: relative;
+    overflow: hidden;
+    font-style: normal;
+    text-align: start;
+    box-sizing: border-box;
+    border-radius: var(--card-border-radius);
+    padding: var(--card-padding);
+    border-color: var(--card-border-color, var(--gray-a5));
+    border-width: var(--card-border-width, 1px);
+    border-style: solid;
+    width: 100%;
+}
 }
 .ui-BaseCard:where(:-moz-any-link, button, label):where(:hover) {
   --card-border-color: var(--gray-a7);
@@ -2907,11 +2923,6 @@ to {
   box-shadow: 0 0 0 2px var(--accent-4), 0 1px 2px 0 rgb(0 0 0 / 0.05);
 }
 
-/** special enhancement for tailwindcss */
-.ui-BaseCard:where(.p-0) {
-  --card-padding: 0;
-}
-
 .ui-RadioCardsItem {
   height: 100%;
 }
@@ -2920,15 +2931,17 @@ to {
   box-shadow: 0 0 0 1px var(--accent-10);
 }
 
+@layer components {
 .ui-RadioTabsRoot {
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  box-sizing: border-box;
-  padding: var(--radio-tabs-list-padding);
-  border-radius: var(--radio-tabs-list-radius);
-  font-size: var(--radio-tabs-font-size);
+    display: inline-flex;
+    width: -moz-fit-content;
+    width: fit-content;
+    align-items: center;
+    box-sizing: border-box;
+    padding: var(--radio-tabs-list-padding);
+    border-radius: var(--radio-tabs-list-radius);
+    font-size: var(--radio-tabs-font-size);
+}
 }
 .ui-RadioTabsRoot:where(.r-size-1) {
   --radio-tabs-font-size: var(--font-size-1);
@@ -2955,11 +2968,6 @@ to {
   background-color: var(--accent-a3);
 }
 
-/* special fix for tailwind */
-.ui-RadioTabsRoot:where(.w-full) {
-  width: 100%;
-}
-
 .ui-RadioTabsItem {
   display: inline-flex;
   flex-grow: 1;
@@ -2997,21 +3005,13 @@ to {
 }
 }
 
-.ui-TabList {
-  justify-content: flex-start;
-  position: relative;
-  overflow-x: auto;
-  white-space: nowrap;
-  font-style: normal;
-  scrollbar-width: none;
-}
 .ui-TabList::-webkit-scrollbar {
   display: none;
 }
 .ui-TabList:where(.r-size-1) {
-  font-size: var(--font-size-1);
-  line-height: var(--line-height-1);
-  letter-spacing: var(--letter-spacing-1);
+  --tab-font-size: var(--font-size-1);
+  --tab-line-height: var(--line-height-1);
+  --tab-letter-spacing: var(--letter-spacing-1);
   --tab-height: var(--space-6);
   --tab-padding-x: var(--space-1);
   --tab-radius: max(var(--radius-2), var(--radius-full));
@@ -3020,9 +3020,9 @@ to {
   --tab-inner-height: var(--space-5);
 }
 .ui-TabList:where(.r-size-2) {
-  font-size: var(--font-size-2);
-  line-height: var(--line-height-2);
-  letter-spacing: var(--letter-spacing-2);
+  --tab-font-size: var(--font-size-2);
+  --tab-line-height: var(--line-height-2);
+  --tab-letter-spacing: var(--letter-spacing-2);
   --tab-height: var(--space-7);
   --tab-padding-x: var(--space-2);
   --tab-radius: max(var(--radius-3), var(--radius-full));
@@ -3030,35 +3030,62 @@ to {
   --tab-inner-padding-x: var(--space-2);
   --tab-inner-height: calc(var(--space-6) - var(--space-1));
 }
-.ui-TabsIndicator {
-  position: absolute;
-  left: 0;
-  transition-property: width, transform;
-  transform: translateX(var(--reka-tabs-indicator-position));
-  width: var(--reka-tabs-indicator-size);
+.ui-TabList:where(.r-variant-surface.r-size-1),
+.ui-TabList:where(.r-variant-soft.r-size-1) {
+  --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
 }
-
-/** classic & surface */
+@layer components {
+.ui-TabList {
+    justify-content: flex-start;
+    position: relative;
+    overflow-x: auto;
+    white-space: nowrap;
+    font-style: normal;
+    scrollbar-width: none;
+    font-size: var(--tab-font-size);
+    line-height: var(--tab-line-height);
+    letter-spacing: var(--tab-letter-spacing);
+}
+
+  /** classic & surface */
 .ui-TabList:where(.r-variant-surface, .r-variant-classic) {
-  position: relative;
-  display: inline-flex;
-  width: -moz-fit-content;
-  width: fit-content;
-  align-items: center;
-  justify-content: center;
-  vertical-align: top;
-  flex-shrink: 0;
-  border-radius: var(--tab-radius);
+    position: relative;
+    display: inline-flex;
+    width: -moz-fit-content;
+    width: fit-content;
+    align-items: center;
+    justify-content: center;
+    vertical-align: top;
+    flex-shrink: 0;
+    border-radius: var(--tab-radius);
 }
 .ui-TabList:where(.r-variant-classic) {
-  background-color: var(--accent-a3);
-  padding-left: var(--tab-padding-x);
-  padding-right: var(--tab-padding-x);
+    background-color: var(--accent-a3);
+    padding-left: var(--tab-padding-x);
+    padding-right: var(--tab-padding-x);
 }
 .ui-TabList:where(.r-variant-surface) {
-  --tab-item-radius: 0;
-  --tab-inner-height: var(--tab-height);
-  box-shadow: inset 0 0 0 1px var(--gray-a6);
+    --tab-item-radius: 0;
+    --tab-inner-height: var(--tab-height);
+    box-shadow: inset 0 0 0 1px var(--gray-a6);
+}
+
+  /** soft & outline */
+.ui-TabList:where(.r-variant-outline, .r-variant-soft) {
+    display: flex;
+    box-shadow: inset 0 -1px 0 0 var(--gray-a5);
+}
+.ui-TabList:where(.r-variant-soft) {
+    padding-left: var(--tab-padding-x);
+    padding-right: var(--tab-padding-x);
+}
+}
+.ui-TabsIndicator {
+  position: absolute;
+  left: 0;
+  transition-property: width, transform;
+  transform: translateX(var(--reka-tabs-indicator-position));
+  width: var(--reka-tabs-indicator-size);
 }
 .ui-TabList:where(.r-variant-surface) :where(.ui-TabsIndicator) {
   top: 0;
@@ -3078,20 +3105,6 @@ to {
   border-radius: var(--tab-item-radius);
   transition-duration: 100ms;
 }
-.ui-TabList:where(.r-variant-surface.r-size-1),
-.ui-TabList:where(.r-variant-soft.r-size-1) {
-  --tab-inner-padding-x: calc(var(--space-2) / 4 * 3);
-}
-
-/** soft & outline */
-.ui-TabList:where(.r-variant-outline, .r-variant-soft) {
-  display: flex;
-  box-shadow: inset 0 -1px 0 0 var(--gray-a5);
-}
-.ui-TabList:where(.r-variant-soft) {
-  padding-left: var(--tab-padding-x);
-  padding-right: var(--tab-padding-x);
-}
 .ui-TabList:where(.r-variant-soft) :where(.ui-TabsIndicator) {
   top: calc((var(--tab-height) - var(--tab-inner-height)) / 2);
   height: var(--tab-inner-height);
@@ -3111,11 +3124,6 @@ to {
   background-color: var(--accent-12);
 }
 
-/** special fix for tailwind */
-.ui-TabList:where(.w-full) {
-  width: 100%;
-}
-
 .ui-TabTrigger {
   display: flex;
   align-items: center;
@@ -3348,22 +3356,24 @@ to {
   height: 0;
 }
 
+@layer components {
 .ui-AccordionTrigger {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  text-align: initial;
-  width: 100%;
-  cursor: pointer;
-  -webkit-user-select: none;
-     -moz-user-select: none;
-          user-select: none;
-  font-size: var(--accordion-trigger-font-size);
-  padding-top: var(--accordion-padding);
-  padding-bottom: var(--accordion-padding);
-  font-weight: var(--font-weight-medium);
-  gap: var(--accordion-trigger-gap);
-  --accordion-indicator-icon-size: var(--accordion-trigger-font-size);
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    text-align: initial;
+    width: 100%;
+    cursor: pointer;
+    -webkit-user-select: none;
+       -moz-user-select: none;
+            user-select: none;
+    font-size: var(--accordion-trigger-font-size);
+    padding-top: var(--accordion-padding);
+    padding-bottom: var(--accordion-padding);
+    font-weight: var(--font-weight-medium);
+    gap: var(--accordion-trigger-gap);
+    --accordion-indicator-icon-size: var(--accordion-trigger-font-size);
+}
 }
 .ui-AccordionTrigger:hover {
   text-decoration: underline;

package/components.d.ts

@@ -693,6 +693,17 @@ export declare interface CheckboxProps extends CheckboxRootProps {
     highContrast?: boolean;
 }
 
+export declare const CloseButton: DefineComponent<ButtonProps, {}, {}, {}, {}, ComponentOptionsMixin, ComponentOptionsMixin, {}, string, PublicProps, Readonly<ButtonProps> & Readonly<{}>, {
+as: AsTag | Component;
+size: "1" | "2" | "3" | "4";
+variant: "classic" | "solid" | "soft" | "surface" | "outline" | "ghost";
+color: ColorType;
+highContrast: boolean;
+}, {}, {}, {}, string, ComponentProvideOptions, false, {}, any>;
+
+export declare interface CloseButtonProps extends ButtonProps {
+}
+
 export declare const CollapsibleContent: __VLS_WithTemplateSlots_43<typeof __VLS_component_5, __VLS_TemplateResult_5["slots"]>;
 
 export { CollapsibleContentProps }