@floegence/floe-webapp-core 0.90.4 → 0.90.7

package/dist/surface.css

@@ -53,6 +53,7 @@
         .floe-field,
         [data-floe-control],
         [data-floe-surface-part='tab'],
+        [data-floe-choice-kind='checkbox'],
         [data-floe-card-variant]:not([data-floe-card-variant='default'])
       )
     ) {
@@ -332,7 +333,7 @@
       :is(
         [data-floe-card-variant='default'],
         [data-floe-surface-part='choice'],
-        [data-floe-surface-part='indicator'],
+        [data-floe-surface-part='indicator']:not(:where([data-floe-choice-kind='checkbox'])),
         [data-floe-surface-part='rail'],
         [data-floe-surface-part='tab-rail'],
         [data-floe-surface-part='segment'],
@@ -411,7 +412,7 @@
       background-color: var(--floe-state-selected-strong);
       color: var(--foreground);
     }
-    & [data-floe-surface-part='indicator']:not([data-floe-selected='true']),
+    & [data-floe-surface-part='indicator']:not(:where([data-floe-choice-kind='checkbox'])):not([data-floe-selected='true']),
     & [data-floe-surface-part='switch-track']:not([data-floe-selected='true']) {
       /* The control face, not a strong outline, supplies non-text contrast. */
       background-color: var(--muted-foreground);
@@ -688,3 +689,50 @@
   [data-floe-surface-part='tab']:focus-visible { outline: 2px solid Highlight; outline-offset: -2px; }
   [data-floe-surface-part='tab'][data-floe-tab-motion='dragging'] { border-color: Highlight; }
 }
+
+/* Checkbox state is carried by hollow versus solid faces, independently of
+ * the material's seams. Hover never supplies a selected-looking fill. */
+[data-floe-choice-kind='checkbox'] {
+  border-width: 1px;
+  border-color: var(--floe-control-edge);
+  background-color: transparent;
+  --floe-surface-decoration: 0 0 transparent;
+}
+[data-floe-choice-kind='checkbox'][data-floe-selected='true'] {
+  border-color: var(--primary);
+  background-color: var(--primary);
+  color: var(--primary-foreground);
+}
+label:hover:not(:has(:disabled))
+  [data-floe-choice-kind='checkbox']:not([data-floe-selected='true']) {
+  border-color: var(--floe-control-edge-hover);
+}
+/* Increase the native label target without changing the indicator's scale or
+ * pushing adjacent content sideways. Hosts may associate an external label. */
+[data-floe-checkbox-target] {
+  position: relative;
+  min-height: 24px;
+  min-width: 24px;
+}
+[data-floe-checkbox-target]::before {
+  content: '';
+  position: absolute;
+  inset: 0;
+}
+@media (pointer: coarse) {
+  [data-floe-checkbox-target] { min-height: 44px; min-width: 44px; }
+}
+@media (forced-colors: active) {
+  [data-floe-choice-kind='checkbox'] {
+    forced-color-adjust: none;
+    border-color: ButtonText;
+    background-color: Canvas;
+    color: CanvasText;
+  }
+  [data-floe-choice-kind='checkbox'][data-floe-selected='true'] {
+    border-color: Highlight;
+    background-color: Highlight;
+    color: HighlightText;
+  }
+  label:has(:disabled) [data-floe-choice-kind='checkbox'] { border-color: GrayText; }
+}

package/dist/themes/shell-presets.generated.css

@@ -786,6 +786,8 @@
   --floe-progress-text-peak: rgb(91 105 108);
   --floe-progress-primary-base: rgb(5 72 89);
   --floe-progress-primary-white-mix: 28.0%;
+  --floe-control-edge: color-mix(in srgb, #586E75 85%, #FFFDF4);
+  --floe-control-edge-hover: #586e75;
 }
 :root[data-floe-shell-theme='github-light'] {
   --floe-window-background: color-mix(in srgb, var(--card) 35%, white);
@@ -1568,7 +1570,7 @@
   --foreground: #f8f8f2;
   --inline-code-foreground: #70ddea;
   --inline-code-background: #2c3631;
-  --primary: #f92672;
+  --primary: #fa2874;
   --primary-foreground: #050604;
   --secondary: #3a3b34;
   --secondary-foreground: #f8f8f2;
@@ -1578,7 +1580,7 @@
   --accent-foreground: #f8f8f2;
   --border: #494a42;
   --input: #7b7d6e;
-  --ring: #f92672;
+  --ring: #fa2874;
   --chrome-border: #494a42;
   --top-bar-border: #494a42;
   --activity-bar-border: #494a42;
@@ -1604,16 +1606,16 @@
   --highlight-block-tip-accent: #71c8c0;
   --sidebar: #20211c;
   --sidebar-foreground: #f8f8f2;
-  --sidebar-primary: #f92672;
+  --sidebar-primary: #fa2874;
   --sidebar-primary-foreground: #050604;
   --sidebar-accent: #3a3b34;
   --sidebar-accent-foreground: #f8f8f2;
   --sidebar-border: #494a42;
-  --sidebar-ring: #f92672;
+  --sidebar-ring: #fa2874;
   --activity-bar: #20211c;
   --activity-bar-foreground: #c5c8b5;
   --activity-bar-foreground-active: #f8f8f2;
-  --activity-bar-badge: #f92672;
+  --activity-bar-badge: #fa2874;
   --activity-bar-badge-foreground: #050604;
   --terminal-background: #1d1e19;
   --terminal-foreground: #f8f8f2;
@@ -1631,8 +1633,8 @@
   --glow: #5a594e;
   --floe-progress-text-base: rgb(165 165 159);
   --floe-progress-text-peak: rgb(255 255 255);
-  --floe-progress-primary-base: rgb(249 38 114);
-  --floe-progress-primary-white-mix: 33.0%;
+  --floe-progress-primary-base: rgb(250 40 116);
+  --floe-progress-primary-white-mix: 33.5%;
 }
 :root[data-floe-shell-theme='nord'] {
   --floe-window-background: color-mix(in srgb, var(--card) 90%, white);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@floegence/floe-webapp-core",
-  "version": "0.90.4",
+  "version": "0.90.7",
   "license": "MIT",
   "type": "module",
   "main": "./dist/index.js",