@jonsoc/ui 1.1.34 → 1.1.46

package/src/components/collapsible.css

@@ -1,97 +1,97 @@
-[data-component="collapsible"] {
-  width: 100%;
-  display: flex;
-  flex-direction: column;
-  background-color: var(--surface-inset-base);
-  border: 1px solid var(--border-weaker-base);
-  transition: background-color 0.15s ease;
-  border-radius: var(--radius-md);
-  overflow: clip;
-
-  [data-slot="collapsible-trigger"] {
-    width: 100%;
-    display: flex;
-    height: 32px;
-    padding: 6px 8px 6px 12px;
-    align-items: center;
-    align-self: stretch;
-    cursor: default;
-    user-select: none;
-    color: var(--text-base);
-
-    /* text-12-medium */
-    font-family: var(--font-family-sans);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-medium);
-    line-height: var(--line-height-large); /* 166.667% */
-    letter-spacing: var(--letter-spacing-normal);
-
-    /* &:hover { */
-    /*   background-color: var(--surface-base); */
-    /* } */
-    &:focus-visible {
-      outline: none;
-    }
-    &[data-disabled] {
-      cursor: not-allowed;
-    }
-
-    [data-slot="collapsible-arrow"] {
-      flex-shrink: 0;
-      width: 24px;
-      height: 24px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-    }
-  }
-
-  [data-slot="collapsible-content"] {
-    overflow: hidden;
-    /* animation: slideUp 250ms ease-out; */
-
-    /* &[data-expanded] { */
-    /*   animation: slideDown 250ms ease-out; */
-    /* } */
-  }
-
-  &[data-variant="ghost"] {
-    background-color: transparent;
-    border: none;
-
-    > [data-slot="collapsible-trigger"] {
-      background-color: transparent;
-      border: none;
-      padding: 0;
-
-      /* &:hover { */
-      /*   color: var(--text-strong); */
-      /* } */
-      &:focus-visible {
-        outline: none;
-      }
-      &[data-disabled] {
-        cursor: not-allowed;
-      }
-    }
-  }
-}
-
-@keyframes slideDown {
-  from {
-    height: 0;
-  }
-  to {
-    height: var(--kb-collapsible-content-height);
-  }
-}
-
-@keyframes slideUp {
-  from {
-    height: var(--kb-collapsible-content-height);
-  }
-  to {
-    height: 0;
-  }
-}
+[data-component="collapsible"] {
+  width: 100%;
+  display: flex;
+  flex-direction: column;
+  background-color: var(--surface-inset-base);
+  border: 1px solid var(--border-weaker-base);
+  transition: background-color 0.15s ease;
+  border-radius: var(--radius-md);
+  overflow: clip;
+
+  [data-slot="collapsible-trigger"] {
+    width: 100%;
+    display: flex;
+    height: 32px;
+    padding: 6px 8px 6px 12px;
+    align-items: center;
+    align-self: stretch;
+    cursor: default;
+    user-select: none;
+    color: var(--text-base);
+
+    /* text-12-medium */
+    font-family: var(--font-family-sans);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-medium);
+    line-height: var(--line-height-large); /* 166.667% */
+    letter-spacing: var(--letter-spacing-normal);
+
+    /* &:hover { */
+    /*   background-color: var(--surface-base); */
+    /* } */
+    &:focus-visible {
+      outline: none;
+    }
+    &[data-disabled] {
+      cursor: not-allowed;
+    }
+
+    [data-slot="collapsible-arrow"] {
+      flex-shrink: 0;
+      width: 24px;
+      height: 24px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+    }
+  }
+
+  [data-slot="collapsible-content"] {
+    overflow: hidden;
+    /* animation: slideUp 250ms ease-out; */
+
+    /* &[data-expanded] { */
+    /*   animation: slideDown 250ms ease-out; */
+    /* } */
+  }
+
+  &[data-variant="ghost"] {
+    background-color: transparent;
+    border: none;
+
+    > [data-slot="collapsible-trigger"] {
+      background-color: transparent;
+      border: none;
+      padding: 0;
+
+      /* &:hover { */
+      /*   color: var(--text-strong); */
+      /* } */
+      &:focus-visible {
+        outline: none;
+      }
+      &[data-disabled] {
+        cursor: not-allowed;
+      }
+    }
+  }
+}
+
+@keyframes slideDown {
+  from {
+    height: 0;
+  }
+  to {
+    height: var(--kb-collapsible-content-height);
+  }
+}
+
+@keyframes slideUp {
+  from {
+    height: var(--kb-collapsible-content-height);
+  }
+  to {
+    height: 0;
+  }
+}

package/src/components/dialog.css

@@ -1,185 +1,185 @@
-/* [data-component="dialog-trigger"] { } */
-
-[data-component="dialog-overlay"] {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  background-color: hsl(from var(--background-base) h s l / 0.2);
-
-  /* animation: overlayHide 250ms ease 100ms forwards; */
-  /**/
-  /* &[data-expanded] { */
-  /*   animation: overlayShow 250ms ease; */
-  /* } */
-}
-
-[data-component="dialog"] {
-  position: fixed;
-  inset: 0;
-  z-index: 50;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  pointer-events: none;
-
-  [data-slot="dialog-container"] {
-    position: relative;
-    z-index: 50;
-    width: min(calc(100vw - 16px), 640px);
-    height: min(calc(100vh - 16px), 512px);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-items: start;
-    overflow: visible;
-
-    [data-slot="dialog-content"] {
-      display: flex;
-      flex-direction: column;
-      align-items: flex-start;
-      align-self: stretch;
-      width: 100%;
-      max-height: 100%;
-      min-height: 280px;
-      overflow: auto;
-      pointer-events: auto;
-
-      /* Hide scrollbar */
-      scrollbar-width: none;
-      -ms-overflow-style: none;
-      &::-webkit-scrollbar {
-        display: none;
-      }
-
-      /* padding: 8px; */
-      /* padding: 8px 8px 0 8px; */
-      border-radius: var(--radius-xl);
-      background: var(--surface-raised-stronger-non-alpha);
-      background-clip: padding-box;
-      box-shadow: var(--shadow-lg-border-base);
-
-      /* animation: contentHide 300ms ease-in forwards; */
-      /**/
-      /* &[data-expanded] { */
-      /*   animation: contentShow 300ms ease-out; */
-      /* } */
-
-      [data-slot="dialog-header"] {
-        display: flex;
-        padding: 16px 16px 16px 24px;
-        justify-content: space-between;
-        align-items: center;
-        flex-shrink: 0;
-        align-self: stretch;
-
-        [data-slot="dialog-title"] {
-          color: var(--text-strong);
-
-          /* text-16-medium */
-          font-family: var(--font-family-sans);
-          font-size: var(--font-size-large);
-          font-style: normal;
-          font-weight: var(--font-weight-medium);
-          line-height: var(--line-height-x-large); /* 150% */
-          letter-spacing: var(--letter-spacing-tight);
-        }
-        /* [data-slot="dialog-close-button"] {} */
-      }
-
-      [data-slot="dialog-description"] {
-        display: flex;
-        padding: 16px;
-        padding-left: 24px;
-        padding-top: 0;
-        margin-top: -8px;
-        justify-content: space-between;
-        align-items: center;
-        flex-shrink: 0;
-        align-self: stretch;
-
-        color: var(--text-base);
-
-        /* text-14-regular */
-        font-family: var(--font-family-sans);
-        font-size: 14px;
-        font-style: normal;
-        font-weight: var(--font-weight-regular);
-        line-height: var(--line-height-large); /* 142.857% */
-        letter-spacing: var(--letter-spacing-normal);
-      }
-
-      [data-slot="dialog-body"] {
-        width: 100%;
-        position: relative;
-        display: flex;
-        flex-direction: column;
-        flex: 1;
-        overflow: hidden;
-
-        &:focus-visible {
-          outline: none;
-        }
-      }
-      &:focus-visible {
-        outline: none;
-      }
-    }
-  }
-
-  &[data-fit] {
-    [data-slot="dialog-container"] {
-      height: auto;
-
-      [data-slot="dialog-content"] {
-        min-height: 0;
-      }
-    }
-  }
-
-  &[data-size="large"] [data-slot="dialog-container"] {
-    width: min(calc(100vw - 32px), 800px);
-    height: min(calc(100vh - 32px), 600px);
-  }
-
-  &[data-size="x-large"] [data-slot="dialog-container"] {
-    width: min(calc(100vw - 32px), 960px);
-    height: min(calc(100vh - 32px), 600px);
-  }
-}
-
-@keyframes overlayShow {
-  from {
-    opacity: 0;
-  }
-  to {
-    opacity: 1;
-  }
-}
-@keyframes overlayHide {
-  from {
-    opacity: 1;
-  }
-  to {
-    opacity: 0;
-  }
-}
-@keyframes contentShow {
-  from {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-  to {
-    opacity: 1;
-    transform: scale(1);
-  }
-}
-@keyframes contentHide {
-  from {
-    opacity: 1;
-    transform: scale(1);
-  }
-  to {
-    opacity: 0;
-    transform: scale(0.96);
-  }
-}
+/* [data-component="dialog-trigger"] { } */
+
+[data-component="dialog-overlay"] {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  background-color: hsl(from var(--background-base) h s l / 0.2);
+
+  /* animation: overlayHide 250ms ease 100ms forwards; */
+  /**/
+  /* &[data-expanded] { */
+  /*   animation: overlayShow 250ms ease; */
+  /* } */
+}
+
+[data-component="dialog"] {
+  position: fixed;
+  inset: 0;
+  z-index: 50;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  pointer-events: none;
+
+  [data-slot="dialog-container"] {
+    position: relative;
+    z-index: 50;
+    width: min(calc(100vw - 16px), 640px);
+    height: min(calc(100vh - 16px), 512px);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-items: start;
+    overflow: visible;
+
+    [data-slot="dialog-content"] {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      align-self: stretch;
+      width: 100%;
+      max-height: 100%;
+      min-height: 280px;
+      overflow: auto;
+      pointer-events: auto;
+
+      /* Hide scrollbar */
+      scrollbar-width: none;
+      -ms-overflow-style: none;
+      &::-webkit-scrollbar {
+        display: none;
+      }
+
+      /* padding: 8px; */
+      /* padding: 8px 8px 0 8px; */
+      border-radius: var(--radius-xl);
+      background: var(--surface-raised-stronger-non-alpha);
+      background-clip: padding-box;
+      box-shadow: var(--shadow-lg-border-base);
+
+      /* animation: contentHide 300ms ease-in forwards; */
+      /**/
+      /* &[data-expanded] { */
+      /*   animation: contentShow 300ms ease-out; */
+      /* } */
+
+      [data-slot="dialog-header"] {
+        display: flex;
+        padding: 16px 16px 16px 24px;
+        justify-content: space-between;
+        align-items: center;
+        flex-shrink: 0;
+        align-self: stretch;
+
+        [data-slot="dialog-title"] {
+          color: var(--text-strong);
+
+          /* text-16-medium */
+          font-family: var(--font-family-sans);
+          font-size: var(--font-size-large);
+          font-style: normal;
+          font-weight: var(--font-weight-medium);
+          line-height: var(--line-height-x-large); /* 150% */
+          letter-spacing: var(--letter-spacing-tight);
+        }
+        /* [data-slot="dialog-close-button"] {} */
+      }
+
+      [data-slot="dialog-description"] {
+        display: flex;
+        padding: 16px;
+        padding-left: 24px;
+        padding-top: 0;
+        margin-top: -8px;
+        justify-content: space-between;
+        align-items: center;
+        flex-shrink: 0;
+        align-self: stretch;
+
+        color: var(--text-base);
+
+        /* text-14-regular */
+        font-family: var(--font-family-sans);
+        font-size: 14px;
+        font-style: normal;
+        font-weight: var(--font-weight-regular);
+        line-height: var(--line-height-large); /* 142.857% */
+        letter-spacing: var(--letter-spacing-normal);
+      }
+
+      [data-slot="dialog-body"] {
+        width: 100%;
+        position: relative;
+        display: flex;
+        flex-direction: column;
+        flex: 1;
+        overflow: hidden;
+
+        &:focus-visible {
+          outline: none;
+        }
+      }
+      &:focus-visible {
+        outline: none;
+      }
+    }
+  }
+
+  &[data-fit] {
+    [data-slot="dialog-container"] {
+      height: auto;
+
+      [data-slot="dialog-content"] {
+        min-height: 0;
+      }
+    }
+  }
+
+  &[data-size="large"] [data-slot="dialog-container"] {
+    width: min(calc(100vw - 32px), 800px);
+    height: min(calc(100vh - 32px), 600px);
+  }
+
+  &[data-size="x-large"] [data-slot="dialog-container"] {
+    width: min(calc(100vw - 32px), 960px);
+    height: min(calc(100vh - 32px), 600px);
+  }
+}
+
+@keyframes overlayShow {
+  from {
+    opacity: 0;
+  }
+  to {
+    opacity: 1;
+  }
+}
+@keyframes overlayHide {
+  from {
+    opacity: 1;
+  }
+  to {
+    opacity: 0;
+  }
+}
+@keyframes contentShow {
+  from {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1);
+  }
+}
+@keyframes contentHide {
+  from {
+    opacity: 1;
+    transform: scale(1);
+  }
+  to {
+    opacity: 0;
+    transform: scale(0.96);
+  }
+}

package/src/components/diff-changes.css

@@ -1,41 +1,41 @@
-[data-component="diff-changes"] {
-  display: flex;
-  gap: 8px;
-  justify-content: flex-end;
-  align-items: center;
-
-  [data-slot="diff-changes-additions"] {
-    font-family: var(--font-family-mono);
-    font-feature-settings: var(--font-family-mono--font-feature-settings);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-    text-align: right;
-    color: var(--text-diff-add-base);
-  }
-
-  [data-slot="diff-changes-deletions"] {
-    font-family: var(--font-family-mono);
-    font-feature-settings: var(--font-family-mono--font-feature-settings);
-    font-size: var(--font-size-small);
-    font-style: normal;
-    font-weight: var(--font-weight-regular);
-    line-height: var(--line-height-large);
-    letter-spacing: var(--letter-spacing-normal);
-    text-align: right;
-    color: var(--text-diff-delete-base);
-  }
-}
-
-[data-component="diff-changes"][data-variant="bars"] {
-  width: 18px;
-  flex-shrink: 0;
-
-  svg {
-    display: block;
-    width: 100%;
-    height: auto;
-  }
-}
+[data-component="diff-changes"] {
+  display: flex;
+  gap: 8px;
+  justify-content: flex-end;
+  align-items: center;
+
+  [data-slot="diff-changes-additions"] {
+    font-family: var(--font-family-mono);
+    font-feature-settings: var(--font-family-mono--font-feature-settings);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    text-align: right;
+    color: var(--text-diff-add-base);
+  }
+
+  [data-slot="diff-changes-deletions"] {
+    font-family: var(--font-family-mono);
+    font-feature-settings: var(--font-family-mono--font-feature-settings);
+    font-size: var(--font-size-small);
+    font-style: normal;
+    font-weight: var(--font-weight-regular);
+    line-height: var(--line-height-large);
+    letter-spacing: var(--letter-spacing-normal);
+    text-align: right;
+    color: var(--text-diff-delete-base);
+  }
+}
+
+[data-component="diff-changes"][data-variant="bars"] {
+  width: 18px;
+  flex-shrink: 0;
+
+  svg {
+    display: block;
+    width: 100%;
+    height: auto;
+  }
+}