@expressivecss/expressive 0.1.0-alpha.3 → 0.2.0

package/src/sass/components/forms/_checkboxes.scss

@@ -0,0 +1,288 @@
+@use "../../abstracts" as *;
+
+// Checkboxes.
+//
+// Anatomy is the HTML. A <label> wrapping <input type="checkbox"> is
+// the control. The label text is a sibling of the input — no extra class,
+// no required <span>. input + span still works (legacy / BeerCSS / Select).
+// label.switch is a switch, not a checkbox — leave it alone.
+//
+// Tokens follow https://m3.material.io/components/checkbox/specs
+//   container    18dp, 2dp corners
+//   unselected   2dp on-surface-variant outline
+//   selected     primary fill, on-primary check
+//   indeterminate primary fill, on-primary dash
+//   state layer  40dp, 8% hover / 10% focus
+//   touch target 48dp
+//   label        body-large / on-surface
+//   disabled     on-surface 38%
+//
+// .filled-in is a no-op: the selected state is always the filled box.
+
+$_cb-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M4 9.5 7.5 13 14 5.5'/%3E%3C/svg%3E");
+$_cb-dash: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 18 18'%3E%3Cpath fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' d='M4.5 9h9'/%3E%3C/svg%3E");
+
+label:has(> [type="checkbox"]):not(.switch),
+.checkbox {
+  --md-comp-checkbox-container-size: 18px;
+  --md-comp-checkbox-container-shape: 2px;
+  --md-comp-checkbox-state-layer-size: 40px;
+
+  position: relative;
+  display: flex;
+  align-items: center;
+  gap: 12px;
+  min-height: 48px;
+  margin: 0;
+  cursor: pointer;
+  user-select: none;
+  -webkit-tap-highlight-color: transparent;
+  color: var(--md-sys-color-on-surface);
+  @include typescale("body-large");
+  font-family: $font-stack;
+}
+
+nav:has(> label > [type="checkbox"]:not(.switch *)),
+nav:has(> .checkbox) {
+  display: flex;
+  flex-wrap: wrap;
+  align-items: center;
+  gap: 8px 24px;
+}
+
+nav > label:has(> [type="checkbox"]):not(.switch),
+nav > .checkbox {
+  display: inline-flex;
+}
+
+// Paint the box on the input. A following span (legacy) hides this
+// control and draws the same anatomy. Nested :has() is invalid, so
+// do not write :has(:not(:has(+ span))).
+label:has(> [type="checkbox"]):not(.switch) > [type="checkbox"],
+.checkbox > [type="checkbox"] {
+  appearance: none;
+  flex: 0 0 var(--md-comp-checkbox-container-size);
+  box-sizing: border-box;
+  width: var(--md-comp-checkbox-container-size);
+  height: var(--md-comp-checkbox-container-size);
+  margin: 0;
+  padding: 0;
+  border: 2px solid var(--md-sys-color-on-surface-variant);
+  border-radius: var(--md-comp-checkbox-container-shape);
+  background-color: transparent;
+  cursor: pointer;
+  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
+
+  &:checked,
+  &:indeterminate {
+    border-color: var(--md-sys-color-primary);
+    background-color: var(--md-sys-color-primary);
+  }
+
+  &:hover {
+    box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+  }
+
+  &:checked:hover,
+  &:indeterminate:hover {
+    box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+  }
+
+  &:focus-visible,
+  &.tabbed:focus {
+    box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+    outline: none;
+  }
+
+  &.invalid,
+  &[aria-invalid="true"] {
+    border-color: var(--md-sys-color-error);
+  }
+
+  &.invalid:checked,
+  &.invalid:indeterminate,
+  &[aria-invalid="true"]:checked,
+  &[aria-invalid="true"]:indeterminate {
+    border-color: var(--md-sys-color-error);
+    background-color: var(--md-sys-color-error);
+  }
+
+  &.invalid:hover,
+  &[aria-invalid="true"]:hover {
+    box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-error) 8%, transparent);
+  }
+
+  &:disabled {
+    border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+    background-color: transparent;
+    box-shadow: none;
+    cursor: default;
+  }
+
+  &:disabled:checked,
+  &:disabled:indeterminate {
+    border-color: transparent;
+    background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  }
+
+  // Legacy: the span draws the box. Keep the input out of the way.
+  &:has(+ span) {
+    position: absolute;
+    opacity: 0;
+    width: 0;
+    height: 0;
+    border: 0;
+    background: none;
+    box-shadow: none;
+    pointer-events: none;
+  }
+}
+
+// Check / dash sit on the label so they can use on-primary as a mask
+// (an <input> cannot host ::before, and a data-URI cannot see tokens).
+// Skip when a span is drawing the icon.
+label:has(> [type="checkbox"]):not(.switch):not(:has(> [type="checkbox"] + span)),
+.checkbox:not(:has(> [type="checkbox"] + span)) {
+  &::before {
+    content: "";
+    position: absolute;
+    left: 0;
+    top: 50%;
+    width: var(--md-comp-checkbox-container-size);
+    height: var(--md-comp-checkbox-container-size);
+    margin-top: calc(var(--md-comp-checkbox-container-size) / -2);
+    pointer-events: none;
+    background-color: var(--md-sys-color-on-primary);
+    -webkit-mask: #{$_cb-check} center / contain no-repeat;
+    mask: #{$_cb-check} center / contain no-repeat;
+    opacity: 0;
+  }
+
+  &:has(> [type="checkbox"]:checked)::before,
+  &:has(> [type="checkbox"]:indeterminate)::before {
+    opacity: 1;
+  }
+
+  &:has(> [type="checkbox"]:indeterminate)::before {
+    -webkit-mask-image: #{$_cb-dash};
+    mask-image: #{$_cb-dash};
+  }
+
+  &:has(> [type="checkbox"].invalid:is(:checked, :indeterminate))::before,
+  &:has(> [type="checkbox"][aria-invalid="true"]:is(:checked, :indeterminate))::before {
+    background-color: var(--md-sys-color-on-error);
+  }
+
+  &:has(> [type="checkbox"]:disabled:is(:checked, :indeterminate))::before {
+    background-color: var(--md-sys-color-surface);
+  }
+}
+
+label:has(> [type="checkbox"]:disabled):not(.switch),
+.checkbox:has([type="checkbox"]:disabled) {
+  color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  cursor: default;
+}
+
+// Legacy / BeerCSS / Select / Autocomplete: input + span draws the same
+// 18dp anatomy. Exclude .switch — that file paints the track on a span.
+$_cb-span: "*:not(.switch) > [type='checkbox'] + span:not(.lever, .supporting-text, .character-counter, .file-path)";
+
+#{$_cb-span} {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  min-height: 48px;
+  padding-left: 30px;
+  cursor: pointer;
+  user-select: none;
+}
+
+#{$_cb-span}::before,
+#{$_cb-span}::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 50%;
+  box-sizing: border-box;
+  width: 18px;
+  height: 18px;
+  margin-top: -9px;
+  border-radius: 2px;
+}
+
+#{$_cb-span}::before {
+  border: 2px solid var(--md-sys-color-on-surface-variant);
+  background-color: transparent;
+  transition: border-color .2s ease, background-color .2s ease, box-shadow .2s ease;
+}
+
+#{$_cb-span}::after {
+  background-color: var(--md-sys-color-on-primary);
+  -webkit-mask: #{$_cb-check} center / contain no-repeat;
+  mask: #{$_cb-check} center / contain no-repeat;
+  opacity: 0;
+}
+
+*:not(.switch) > [type="checkbox"]:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+  border-color: var(--md-sys-color-primary);
+  background-color: var(--md-sys-color-primary);
+}
+
+*:not(.switch) > [type="checkbox"]:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::after {
+  opacity: 1;
+}
+
+*:not(.switch) > [type="checkbox"]:indeterminate + span:not(.lever, .supporting-text, .character-counter, .file-path)::after {
+  -webkit-mask-image: #{$_cb-dash};
+  mask-image: #{$_cb-dash};
+}
+
+*:not(.switch) > [type="checkbox"]:hover + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+  box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-on-surface) 8%, transparent);
+}
+
+*:not(.switch) > [type="checkbox"]:is(:checked, :indeterminate):hover + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+  box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-primary) 8%, transparent);
+}
+
+*:not(.switch) > [type="checkbox"]:focus-visible + span:not(.lever, .supporting-text, .character-counter, .file-path)::before,
+*:not(.switch) > [type="checkbox"].tabbed:focus + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+  box-shadow: 0 0 0 11px color-mix(in oklab, var(--md-sys-color-primary) 10%, transparent);
+}
+
+*:not(.switch) > [type="checkbox"].invalid + span:not(.lever, .supporting-text, .character-counter, .file-path)::before,
+*:not(.switch) > [type="checkbox"][aria-invalid="true"] + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+  border-color: var(--md-sys-color-error);
+}
+
+*:not(.switch) > [type="checkbox"].invalid:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::before,
+*:not(.switch) > [type="checkbox"][aria-invalid="true"]:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+  border-color: var(--md-sys-color-error);
+  background-color: var(--md-sys-color-error);
+}
+
+*:not(.switch) > [type="checkbox"].invalid:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::after,
+*:not(.switch) > [type="checkbox"][aria-invalid="true"]:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::after {
+  background-color: var(--md-sys-color-on-error);
+}
+
+*:not(.switch) > [type="checkbox"]:disabled + span:not(.lever, .supporting-text, .character-counter, .file-path) {
+  color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  cursor: default;
+}
+
+*:not(.switch) > [type="checkbox"]:disabled + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+  border-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+  background-color: transparent;
+  box-shadow: none;
+}
+
+*:not(.switch) > [type="checkbox"]:disabled:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::before {
+  border-color: transparent;
+  background-color: color-mix(in oklab, var(--md-sys-color-on-surface) 38%, transparent);
+}
+
+*:not(.switch) > [type="checkbox"]:disabled:is(:checked, :indeterminate) + span:not(.lever, .supporting-text, .character-counter, .file-path)::after {
+  background-color: var(--md-sys-color-surface);
+}

package/src/sass/components/forms/_fieldset.scss

@@ -0,0 +1,128 @@
+@use "../../abstracts" as *;
+
+// Fieldsets.
+//
+// Anatomy is the HTML. A <fieldset> is the group. A <legend> is the
+// headline. Direct children are the fields — .field, radios, switches,
+// a <nav> of radios, a trailing <small> as supporting text. No wrapper
+// class. .filled / .border / .rounded are helpers markup cannot express.
+//
+// M3 has no fieldset component. Tokens follow the outlined grouping
+// container used around related form content, and the outlined text-field
+// shape so a group of fields matches the fields:
+//   container    transparent, 4dp corners, 1dp outline-variant
+//   filled       surface-variant, no outline
+//   legend       title-small / on-surface
+//   supporting   body-small / on-surface-variant
+//   padding      16dp, 16dp between children
+//   disabled     on-surface / outline at 38%
+//
+// Do not set display:flex — that pulls <legend> off the border.
+
+fieldset {
+  --md-comp-fieldset-container-color: transparent;
+  --md-comp-fieldset-container-shape: 4px;
+  --md-comp-fieldset-outline-color: var(--md-sys-color-outline-variant);
+  --md-comp-fieldset-outline-width: 1px;
+  --md-comp-fieldset-legend-color: var(--md-sys-color-on-surface);
+
+  box-sizing: border-box;
+  min-inline-size: 0;
+  margin: 0;
+  padding: 16px;
+
+  & + & {
+    margin-block-start: 24px;
+  }
+  border: var(--md-comp-fieldset-outline-width) solid var(--md-comp-fieldset-outline-color);
+  border-radius: var(--md-comp-fieldset-container-shape);
+  background-color: var(--md-comp-fieldset-container-color);
+
+  > legend {
+    float: none;
+    width: auto;
+    max-width: calc(100% - 16px);
+    margin: 0;
+    margin-inline-start: -4px;
+    padding-inline: 8px;
+    color: var(--md-comp-fieldset-legend-color);
+    background-color: transparent;
+    @include typescale("title-small");
+
+    > i {
+      font-size: 18px;
+      width: 18px;
+      height: 18px;
+      line-height: 18px;
+      margin-inline-end: 8px;
+      vertical-align: -3px;
+      color: var(--md-sys-color-on-surface-variant);
+    }
+  }
+
+  > :not(legend) + * {
+    margin-block-start: 16px;
+  }
+
+  // Switches are inline-flex. Make a bare group stack; a <nav> keeps
+  // radios on one line. Consecutive 48dp rows don't need the 16dp gap.
+  > label,
+  > .switch {
+    display: flex;
+    align-items: center;
+  }
+
+  > :is(label, .switch) + :is(label, .switch) {
+    margin-block-start: 0;
+  }
+
+  > small {
+    display: block;
+    margin-block-start: 8px;
+    color: var(--md-sys-color-on-surface-variant);
+    @include typescale("body-small");
+  }
+}
+
+fieldset.filled {
+  --md-comp-fieldset-container-color: var(--md-sys-color-surface-variant);
+  --md-comp-fieldset-outline-color: transparent;
+}
+
+fieldset.outlined,
+fieldset.border {
+  --md-comp-fieldset-container-color: transparent;
+  --md-comp-fieldset-outline-color: var(--md-sys-color-outline-variant);
+}
+
+fieldset.rounded {
+  --md-comp-fieldset-container-shape: 12px;
+}
+
+fieldset:disabled,
+fieldset[disabled] {
+  --md-comp-fieldset-outline-color: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface) 12%,
+    transparent
+  );
+  --md-comp-fieldset-legend-color: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface) 38%,
+    transparent
+  );
+
+  > legend > i {
+    color: var(--md-comp-fieldset-legend-color);
+  }
+}
+
+fieldset.filled:disabled,
+fieldset.filled[disabled] {
+  --md-comp-fieldset-outline-color: transparent;
+  --md-comp-fieldset-container-color: color-mix(
+    in oklab,
+    var(--md-sys-color-on-surface) 4%,
+    transparent
+  );
+}

package/src/{scss → sass/components}/forms/_file-input.scss

@@ -1,3 +1,5 @@
+@use "../../abstracts" as *;
+
 .file-field {
   display: grid;
   grid-template-columns: min-content auto;
@@ -10,7 +12,10 @@
 
   input.file-path { width: 100%; }
 
-  .btn {
+  > button,
+  > .btn {
+    position: relative;
+    overflow: hidden;
     height: 3rem;
     line-height: 3rem;
   }
@@ -21,20 +26,17 @@
 
   input[type=file] {
     position: absolute;
-    top: 0;
-    right: 0;
-    left: 0;
-    bottom: 0;    
+    inset: 0;
     cursor: pointer;
     width: 100%;
     margin: 0;
     padding: 0;
     opacity: 0;
-    font-size: 20px;    
-    filter: alpha(opacity=0);
+    font-size: 20px;
 
-    // Needed to override webkit button
-    &::-webkit-file-upload-button {
+    // Needed to override the UA-rendered button. `::file-selector-button` is
+    // the standardised name for the old ::-webkit-file-upload-button.
+    &::file-selector-button {
       display: none;
     }
   }

package/src/{scss → sass/components}/forms/_index.scss

@@ -5,6 +5,7 @@
 @forward 'select';
 @forward 'file-input';
 @forward 'range';
+@forward 'fieldset';
 
 // Remove Focus Boxes
 select:focus {
@@ -15,3 +16,4 @@ label {
   font-size: .8rem;
   color: var(--md-sys-color-on-surface-variant);
 }
+