fulldev-ui 0.4.0-beta.1 → 0.4.11

package/src/components/Table.astro

@@ -15,107 +15,118 @@ const { header, body, footer, radius = 'auto', ...rest } = Astro.props
 ---
 
 <Root
-  class="table"
-  as="table"
-  {radius}
+  class:list="table"
   {...rest}
 >
-  <Root as="thead">
-    <Root as="tr">
-      {header?.map((cell: string) => <Root as="th">{cell}</Root>)}
+  <Root
+    as="table"
+    {radius}
+  >
+    <Root as="thead">
+      <Root as="tr">
+        {header?.map((cell: string) => <Root as="th">{cell}</Root>)}
+      </Root>
     </Root>
-  </Root>
-  <Root as="tbody">
-    {
-      body?.map((row: string[]) => (
-        <Root as="tr">
-          {row.map((cell: string) => (
-            <Root as="td">{cell}</Root>
-          ))}
-        </Root>
-      ))
-    }
-  </Root>
-  <Root as="tfoot">
-    <Root as="tr">
+    <Root as="tbody">
       {
-        footer?.map((cell) => {
-          if (typeof cell === 'string') {
-            return <Root as="td">{cell}</Root>
-          } else {
-            return (
-              <Root
-                as="td"
-                colspan={cell.colspan}
-              >
-                {cell.text}
-              </Root>
-            )
-          }
-        })
+        body?.map((row: string[]) => (
+          <Root as="tr">
+            {row.map((cell: string) => (
+              <Root as="td">{cell}</Root>
+            ))}
+          </Root>
+        ))
       }
     </Root>
+    <Root as="tfoot">
+      <Root as="tr">
+        {
+          footer?.map((cell) => {
+            if (typeof cell === 'string') {
+              return <Root as="td">{cell}</Root>
+            } else {
+              return (
+                <Root
+                  as="td"
+                  colspan={cell.colspan}
+                >
+                  {cell.text}
+                </Root>
+              )
+            }
+          })
+        }
+      </Root>
+    </Root>
   </Root>
 </Root>
 
 <style is:global lang="scss">
-  .table {
-    display: table;
-    box-shadow: 0 0 0 1px var(--color-6);
-    border-radius: var(--radius-1);
-    border-collapse: collapse;
-    width: 100%;
-    caption-side: bottom;
-    overflow: hidden;
+  @layer fulldev {
+    .table {
+      box-shadow: 0 0 0 1px var(--color-6);
+      border-radius: var(--radius-1);
+      overflow-x: auto;
 
-    &.radius-none {
-      border-radius: 0;
-    }
+      table {
+        display: table;
+        margin: 0;
+        border-collapse: collapse;
+        width: 100%;
+        caption-side: bottom;
+        white-space: nowrap;
 
-    &.radius-auto {
-      border-radius: var(--radius-1);
-    }
+        &.radius-none {
+          border-radius: 0;
+        }
 
-    thead {
-      background-color: var(--color-3);
+        &.radius-auto {
+          border-radius: var(--radius-1);
+        }
 
-      &:not(:last-child) {
-        border-bottom: 1px solid var(--color-6);
-      }
+        thead {
+          background-color: var(--color-3);
 
-      th {
-        color: var(--color-12);
-        font-weight: 500;
-      }
-    }
+          &:not(:last-child) {
+            border-bottom: 1px solid var(--color-6);
+          }
 
-    tbody {
-      display: table-row-group;
-      vertical-align: middle;
-      background-color: var(--color-2);
-      unicode-bidi: isolate;
-    }
+          th {
+            color: var(--color-12);
+            font-weight: 500;
+          }
+        }
 
-    tfoot {
-      display: table-footer-group;
-      background-color: var(--color-3);
-      color: var(--color-12);
+        tbody {
+          display: table-row-group;
+          vertical-align: middle;
+          background-color: var(--color-2);
+          width: 100%;
+          unicode-bidi: isolate;
+        }
 
-      &:not(:last-child) {
-        border-top: 1px solid var(--color-6);
-      }
-    }
+        tfoot {
+          display: table-footer-group;
+          background-color: var(--color-3);
+          color: var(--color-12);
 
-    tr + tr {
-      border-top: 1px solid var(--color-6);
-    }
+          &:not(:last-child) {
+            border-top: 1px solid var(--color-6);
+          }
+        }
 
-    th,
-    td {
-      vertical-align: middle;
-      padding: var(--space-3) var(--space-4);
-      font-size: var(--text-2);
-      text-align: left;
+        tr + tr {
+          border-top: 1px solid var(--color-6);
+        }
+
+        th,
+        td {
+          vertical-align: middle;
+          padding: var(--space-3) var(--space-4);
+          font-size: var(--text-2);
+          text-align: left;
+        }
+      }
     }
   }
 </style>

package/src/components/Tagline.astro

@@ -25,11 +25,13 @@ const { as = 'span', html, text, ...rest } = Astro.props
 </Root>
 
 <style is:global lang="scss">
-  .tagline {
-    color: var(--color-11);
-    font-size: var(--text-2);
-    line-height: 1;
-    text-align: left;
-    white-space: nowrap;
+  @layer fulldev {
+    .tagline {
+      color: var(--color-11);
+      font-size: var(--text-2);
+      line-height: 1;
+      text-align: left;
+      white-space: nowrap;
+    }
   }
 </style>

package/src/components/Text.astro

@@ -28,16 +28,18 @@ const { as = 'p', color = 'base', html, text, ...rest } = Astro.props
 </Root>
 
 <style is:global lang="scss">
-  .text {
-    margin: 0;
-    max-width: calc(var(--space-4) * 44);
-    color: var(--color-11);
-    font-weight: var(--font-weight);
-    font-size: var(--text-3);
-    line-height: 1.625;
+  @layer fulldev {
+    .text {
+      margin: 0;
+      max-width: calc(var(--space-4) * 44);
+      color: var(--color-11);
+      font-weight: var(--font-weight);
+      font-size: var(--text-3);
+      line-height: 1.625;
 
-    &.lead {
-      font-size: var(--text-4);
+      &.lead {
+        font-size: var(--text-4);
+      }
     }
   }
 </style>

package/src/components/Textarea.astro

@@ -48,57 +48,59 @@ const {
 </Root>
 
 <style is:global lang="scss">
-  .textarea {
-    display: flex;
-    position: relative;
-    flex-direction: column;
-    gap: var(--space-1);
-    width: 100%;
-
-    textarea {
+  @layer fulldev {
+    .textarea {
       display: flex;
       position: relative;
-      align-items: center;
-      outline: none;
-      border: 1px solid var(--color-6);
-      border-radius: var(--radius-1);
-      background-color: transparent;
-      padding: var(--space-4);
+      flex-direction: column;
+      gap: var(--space-1);
       width: 100%;
-      height: calc((var(--text-2) + 2 * var(--space-4)) * 2);
-      min-height: calc((var(--text-2) + 2 * var(--space-4)) * 2);
-      resize: vertical;
-      color: var(--color-11);
-      font-weight: 400;
-      font-size: var(--text-2);
-      line-height: 1.25;
-
-      &.radius-none {
-        border-radius: 0;
-      }
 
-      &.radius-auto {
+      textarea {
+        display: flex;
+        position: relative;
+        align-items: center;
+        outline: none;
+        border: 1px solid var(--color-6);
         border-radius: var(--radius-1);
-      }
-
-      &::placeholder {
+        background-color: transparent;
+        padding: var(--space-4);
+        width: 100%;
+        height: calc((var(--text-2) + 2 * var(--space-4)) * 2);
+        min-height: calc((var(--text-2) + 2 * var(--space-4)) * 2);
+        resize: vertical;
         color: var(--color-11);
-      }
+        font-weight: 400;
+        font-size: var(--text-2);
+        line-height: 1.25;
 
-      &:hover {
-        outline: none;
-      }
+        &.radius-none {
+          border-radius: 0;
+        }
 
-      &:focus {
-        outline: none;
-        box-shadow: inset 0 0 0 2px var(--color-7);
-        border-color: var(--color-7);
-      }
+        &.radius-auto {
+          border-radius: var(--radius-1);
+        }
+
+        &::placeholder {
+          color: var(--color-11);
+        }
+
+        &:hover {
+          outline: none;
+        }
+
+        &:focus {
+          outline: none;
+          box-shadow: inset 0 0 0 2px var(--color-7);
+          border-color: var(--color-7);
+        }
 
-      &:disabled {
-        opacity: 50%;
-        cursor: not-allowed;
-        pointer-events: none;
+        &:disabled {
+          opacity: 50%;
+          cursor: not-allowed;
+          pointer-events: none;
+        }
       }
     }
   }

package/src/components/Toc.astro

@@ -32,21 +32,24 @@ const { toc, headings } = Astro.props
 </Column>
 
 <style lang="scss" is:global>
-  .toc {
-    display: none !important;
-    box-sizing: border-box;
-    border-left: 1px solid var(--color-a6);
-    padding: var(--space-6) 0 var(--space-6) min(var(--space-5), var(--gutter));
-    height: 100vh;
-    max-height: 100vh;
-    overflow-y: auto;
+  @layer fulldev {
+    .toc {
+      display: none !important;
+      box-sizing: border-box;
+      border-left: 1px solid var(--color-a6);
+      padding: var(--space-6) 0 var(--space-6)
+        min(var(--space-5), var(--gutter));
+      height: 100vh;
+      max-height: 100vh;
+      overflow-y: auto;
 
-    .toc-link {
-      font-size: var(--text-2);
-    }
+      .toc-link {
+        font-size: var(--text-2);
+      }
 
-    @media (min-width: 1024px) {
-      display: flex !important;
+      @media (min-width: 1024px) {
+        display: flex !important;
+      }
     }
   }
 </style>

package/src/components/Wrap.astro

@@ -18,23 +18,25 @@ const { align = 'center', ...rest } = Astro.props
 </Root>
 
 <style is:global lang="scss">
-  .wrap {
-    display: flex;
-    flex-wrap: wrap;
-    justify-content: stretch;
-    gap: var(--space-2);
+  @layer fulldev {
+    .wrap {
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: stretch;
+      gap: var(--space-2);
 
-    &.align-start {
-      align-items: flex-start;
-      text-align: left;
-    }
+      &.align-start {
+        align-items: flex-start;
+        text-align: left;
+      }
 
-    &.align-center {
-      align-items: center;
-    }
+      &.align-center {
+        align-items: center;
+      }
 
-    &.align-end {
-      align-items: flex-end;
+      &.align-end {
+        align-items: flex-end;
+      }
     }
   }
 </style>

package/src/components/docs/PropsTable.astro

@@ -78,6 +78,7 @@ const asDefault = extractAsDefault(componentFileContent)
 
 <Table
   size="md"
+  class:list={['props-table']}
   header={['Prop', 'Type', 'Default']}
   body={[
     ...parsedProps.map((item) => [
@@ -93,3 +94,9 @@ const asDefault = extractAsDefault(componentFileContent)
       : []),
   ]}
 />
+
+<style is:global lang="scss">
+  .props-table {
+    overflow: auto;
+  }
+</style>

package/src/components/experimental/Price.astro

@@ -16,7 +16,7 @@ const { as = 'p', value, ...rest } = Astro.props
   value && (
     <Root
       if={value}
-      class:list='price']}
+      class:list="price"
       {as}
       {...rest}
     >
@@ -26,13 +26,15 @@ const { as = 'p', value, ...rest } = Astro.props
 }
 
 <style is:global lang="scss">
-  .price {
-    margin: 0;
-    max-width: calc(var(--space-4) * 44);
-    color: var(--color-12);
-    font-weight: var(--font-weight);
-    font-size: var(--text-5);
-    line-height: 1.25;
-    font-family: var(--font-family);
+  @layer fulldev {
+    .price {
+      margin: 0;
+      max-width: calc(var(--space-4) * 44);
+      color: var(--color-12);
+      font-weight: var(--font-weight);
+      font-size: var(--text-5);
+      line-height: 1.25;
+      font-family: var(--font-family);
+    }
   }
 </style>