update styles, v0.1.17

package.json

@@ -1,6 +1,6 @@
 {
     "name": "@panic/web-ui",
-    "version": "0.1.16",
+    "version": "0.1.17",
     "license": "AGPL-3.0-only",
     "description": "Core components for panic.haus web applications",
     "type": "module",

src/styles/components.css

@@ -35,49 +35,73 @@
 .field[type='date']::-webkit-datetime-edit-year-field,
 .field[type='time']::-webkit-datetime-edit-hour-field,
 .field[type='time']::-webkit-datetime-edit-minute-field,
-.field[type='time']::-webkit-datetime-edit-ampm-field,
 .field[type='datetime-local']::-webkit-datetime-edit-day-field,
 .field[type='datetime-local']::-webkit-datetime-edit-month-field,
 .field[type='datetime-local']::-webkit-datetime-edit-year-field,
 .field[type='datetime-local']::-webkit-datetime-edit-hour-field,
-.field[type='datetime-local']::-webkit-datetime-edit-minute-field,
+.field[type='datetime-local']::-webkit-datetime-edit-minute-field {
-.field[type='datetime-local']::-webkit-datetime-edit-ampm-field {
     border-radius: 0.375rem;
 }
 
-.field[type='date']::-webkit-datetime-edit-day-field:focus,
+.field[type='date']::-webkit-datetime-edit-day-field:focus {
-.field[type='date']::-webkit-datetime-edit-month-field:focus,
-.field[type='date']::-webkit-datetime-edit-year-field:focus,
-.field[type='time']::-webkit-datetime-edit-hour-field:focus,
-.field[type='time']::-webkit-datetime-edit-minute-field:focus,
-.field[type='time']::-webkit-datetime-edit-ampm-field:focus,
-.field[type='datetime-local']::-webkit-datetime-edit-day-field:focus,
-.field[type='datetime-local']::-webkit-datetime-edit-month-field:focus,
-.field[type='datetime-local']::-webkit-datetime-edit-year-field:focus,
-.field[type='datetime-local']::-webkit-datetime-edit-hour-field:focus,
-.field[type='datetime-local']::-webkit-datetime-edit-minute-field:focus,
-.field[type='datetime-local']::-webkit-datetime-edit-ampm-field:focus {
     border-radius: 0.375rem;
     background-color: var(--field-selection-bg) !important;
     color: var(--field-selection-text) !important;
     -webkit-text-fill-color: var(--field-selection-text) !important;
 }
-
+.field[type='date']::-webkit-datetime-edit-month-field:focus {
-.field[type='date']::-webkit-datetime-edit-day-field::selection,
+    border-radius: 0.375rem;
-.field[type='date']::-webkit-datetime-edit-month-field::selection,
+    background-color: var(--field-selection-bg) !important;
-.field[type='date']::-webkit-datetime-edit-year-field::selection,
+    color: var(--field-selection-text) !important;
-.field[type='time']::-webkit-datetime-edit-hour-field::selection,
+    -webkit-text-fill-color: var(--field-selection-text) !important;
-.field[type='time']::-webkit-datetime-edit-minute-field::selection,
+}
-.field[type='time']::-webkit-datetime-edit-ampm-field::selection,
+.field[type='date']::-webkit-datetime-edit-year-field:focus {
-.field[type='datetime-local']::-webkit-datetime-edit-day-field::selection,
+    border-radius: 0.375rem;
-.field[type='datetime-local']::-webkit-datetime-edit-month-field::selection,
+    background-color: var(--field-selection-bg) !important;
-.field[type='datetime-local']::-webkit-datetime-edit-year-field::selection,
+    color: var(--field-selection-text) !important;
-.field[type='datetime-local']::-webkit-datetime-edit-hour-field::selection,
+    -webkit-text-fill-color: var(--field-selection-text) !important;
-.field[type='datetime-local']::-webkit-datetime-edit-minute-field::selection,
+}
-.field[type='datetime-local']::-webkit-datetime-edit-ampm-field::selection {
+.field[type='time']::-webkit-datetime-edit-hour-field:focus {
-    background-color: var(--field-selection-bg);
+    border-radius: 0.375rem;
-    color: var(--field-selection-text);
+    background-color: var(--field-selection-bg) !important;
-    -webkit-text-fill-color: var(--field-selection-text);
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='time']::-webkit-datetime-edit-minute-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='datetime-local']::-webkit-datetime-edit-day-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='datetime-local']::-webkit-datetime-edit-month-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='datetime-local']::-webkit-datetime-edit-year-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='datetime-local']::-webkit-datetime-edit-hour-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
+}
+.field[type='datetime-local']::-webkit-datetime-edit-minute-field:focus {
+    border-radius: 0.375rem;
+    background-color: var(--field-selection-bg) !important;
+    color: var(--field-selection-text) !important;
+    -webkit-text-fill-color: var(--field-selection-text) !important;
 }
 
 .field:disabled {