@helpwave/hightide 0.9.4 → 0.9.5

package/dist/style/globals.css

@@ -4526,13 +4526,17 @@
   }
 }
 @layer components {
-  [data-name="property-root"] {
+  [data-name="property-inner"] {
     display: flex;
     flex-direction: row;
     column-gap: calc(var(--spacing) * 0);
-    border-radius: var(--radius-xl);
+    width: 100%;
+    min-width: calc(var(--spacing) * 0);
   }
   [data-name="property-root"] {
+    border-radius: var(--radius-xl);
+    container-type: inline-size;
+    container-name: property;
     transition: outline-offset var(--animation-duration-in, 250ms);
     outline-offset: 0;
     &:hover {
@@ -4620,6 +4624,15 @@
       background-color: var(--color-surface-warning);
     }
   }
+  [data-name="property-title-actions"] {
+    display: flex;
+    flex-direction: row;
+    column-gap: calc(var(--spacing) * 2);
+    display: none;
+    flex-shrink: 0;
+    align-items: center;
+    gap: calc(var(--spacing) * 1);
+  }
   [data-name="property-actions"] {
     display: flex;
     flex-direction: row;
@@ -4627,6 +4640,41 @@
     align-items: center;
     gap: calc(var(--spacing) * 1);
   }
+  @container property (max-width: 32rem) {
+    [data-name="property-inner"] {
+      flex-direction: column;
+    }
+    [data-name="property-title"] {
+      width: 100%;
+      max-width: none;
+      min-width: calc(var(--spacing) * 0);
+      border-radius: 0;
+      border-top-left-radius: var(--radius-xl);
+      border-top-right-radius: var(--radius-xl);
+      border-right-style: var(--tw-border-style);
+      border-right-width: 2px;
+      border-bottom-style: var(--tw-border-style);
+      border-bottom-width: 0px;
+    }
+    [data-name="property-title-actions"] {
+      display: flex;
+    }
+    [data-name="property-actions"] {
+      display: none;
+    }
+    [data-name="property-content"] {
+      min-height: calc(var(--spacing) * 0);
+      border-radius: 0;
+      border-bottom-right-radius: var(--radius-xl);
+      border-bottom-left-radius: var(--radius-xl);
+      border-top-style: var(--tw-border-style);
+      border-top-width: 0px;
+      border-right-style: var(--tw-border-style);
+      border-right-width: 2px;
+      border-left-style: var(--tw-border-style);
+      border-left-width: 2px;
+    }
+  }
   [data-name="property-input-wrapper"] {
     position: relative;
     display: flex;
@@ -4644,6 +4692,10 @@
   [data-name="property-input"] {
     border-radius: 0.25rem;
     padding: calc(var(--spacing) * 1);
+    &[type="date"]::-webkit-calendar-picker-indicator, &[type="datetime-local"]::-webkit-calendar-picker-indicator, &[type="time"]::-webkit-calendar-picker-indicator {
+      display: none;
+      -webkit-appearance: none;
+    }
     &[data-invalid] {
       background-color: var(--color-surface-warning);
       &::placeholder {

package/dist/style/uncompiled/theme/components/property.css

@@ -1,13 +1,17 @@
 @layer components {
-  [data-name="property-root"] {
-    @apply flex-row-0 rounded-xl;
+  [data-name="property-inner"] {
+    @apply flex-row-0 w-full min-w-0;
   }
 
   [data-name="property-root"] {
+    @apply rounded-xl;
+    container-type: inline-size;
+    container-name: property;
     transition: outline-offset var(--animation-duration-in, 250ms);
     outline-offset: 0;
 
     &:hover {
+
       [data-name="property-title"]:not([data-invalid]),
       [data-name="property-content"]:not([data-invalid]) {
         @apply border-primary;
@@ -33,7 +37,6 @@
     }
   }
 
-
   [data-name="property-title"] {
     @apply flex-row-2 max-w-48 min-w-48 px-3 py-2 items-center justify-between rounded-l-xl border-2 border-r-0;
 
@@ -46,7 +49,6 @@
     }
   }
 
-
   [data-name="property-title-icon"] {
     @apply max-w-6 min-w-6;
   }
@@ -67,10 +69,36 @@
     }
   }
 
+  [data-name="property-title-actions"] {
+    @apply hidden flex-row-2 items-center gap-1 shrink-0;
+  }
+
   [data-name="property-actions"] {
     @apply flex-row-2 items-center gap-1;
   }
 
+  @container property (max-width: 32rem) {
+    [data-name="property-inner"] {
+      @apply flex-col;
+    }
+
+    [data-name="property-title"] {
+      @apply max-w-none min-w-0 w-full rounded-none rounded-t-xl border-r-2 border-b-0;
+    }
+
+    [data-name="property-title-actions"] {
+      @apply flex;
+    }
+
+    [data-name="property-actions"] {
+      @apply hidden;
+    }
+
+    [data-name="property-content"] {
+      @apply rounded-none rounded-b-xl border-t-0 border-l-2 border-r-2 min-h-0;
+    }
+  }
+
   [data-name="property-input-wrapper"] {
     @apply relative flex-row-2 w-full;
 
@@ -87,6 +115,13 @@
   [data-name="property-input"] {
     @apply rounded p-1;
 
+    &[type="date"]::-webkit-calendar-picker-indicator,
+    &[type="datetime-local"]::-webkit-calendar-picker-indicator,
+    &[type="time"]::-webkit-calendar-picker-indicator {
+      display: none;
+      -webkit-appearance: none;
+    }
+
     &[data-invalid] {
       @apply bg-surface-warning placeholder-warning;
     }

package/package.json

@@ -10,7 +10,7 @@
     "access": "public"
   },
   "license": "MPL-2.0",
-  "version": "0.9.4",
+  "version": "0.9.5",
   "files": [
     "dist"
   ],