@mastors/flexer 1.1.0

package/scss/utilities/_flex-grow.scss

@@ -0,0 +1,16 @@
+// @mastors/flexer — utilities/_flex-grow.scss
+// flex-grow utility classes.
+// ─────────────────────────────────────────────────────────────
+
+@use "@mastors/core/scss/generators/class-generator" as gen;
+
+@include gen.generate-utilities((
+  "flex-grow": (
+    property: flex-grow,
+    prefix: "grow",
+    values: (
+      "":  1,   // .grow   → flex-grow: 1
+      "0": 0,   // .grow-0 → flex-grow: 0
+    ),
+  ),
+));

package/scss/utilities/_flex-shorthand.scss

@@ -0,0 +1,13 @@
+// @mastors/flexer — utilities/_flex-shorthand.scss
+// flex shorthand utility classes (grow + shrink + basis combined).
+// ─────────────────────────────────────────────────────────────
+
+// .flex-1      → flex: 1 1 0%      (grow, shrink, zero basis — the workhorse)
+// .flex-auto   → flex: 1 1 auto    (grow, shrink, natural basis)
+// .flex-initial→ flex: 0 1 auto    (don't grow, shrink, natural basis — browser default)
+// .flex-none   → flex: none        (no grow, no shrink, natural basis — rigid)
+
+.flex-1       { flex: 1 1 0%; }
+.flex-auto    { flex: 1 1 auto; }
+.flex-initial { flex: 0 1 auto; }
+.flex-none    { flex: none; }

package/scss/utilities/_flex-shrink.scss

@@ -0,0 +1,16 @@
+// @mastors/flexer — utilities/_flex-shrink.scss
+// flex-shrink utility classes.
+// ─────────────────────────────────────────────────────────────
+
+@use "@mastors/core/scss/generators/class-generator" as gen;
+
+@include gen.generate-utilities((
+  "flex-shrink": (
+    property: flex-shrink,
+    prefix: "shrink",
+    values: (
+      "":  1,   // .shrink   → flex-shrink: 1
+      "0": 0,   // .shrink-0 → flex-shrink: 0
+    ),
+  ),
+));

package/scss/utilities/_flex-wrap.scss

@@ -0,0 +1,18 @@
+// @mastors/flexer — utilities/_flex-wrap.scss
+// flex-wrap utility classes.
+// ─────────────────────────────────────────────────────────────
+
+@use "@mastors/core/scss/generators/class-generator" as gen;
+
+@include gen.generate-utilities((
+  "flex-wrap": (
+    property: flex-wrap,
+    prefix: "flex",
+    values: (
+      "wrap":         wrap,
+      "wrap-reverse": wrap-reverse,
+      "nowrap":       nowrap,
+    ),
+    responsive: true,
+  ),
+));

package/scss/utilities/_gap.scss

@@ -0,0 +1,17 @@
+// @mastors/flexer — utilities/_gap.scss
+// Gap utilities for flex containers (from spacing tokens).
+// ─────────────────────────────────────────────────────────────
+//
+// NOTE: Generic gap utilities (.gap-*, .gap-x-*, .gap-y-*) are already
+// emitted by @mastors/core's utilities/_spacing.scss and work for both
+// flex and grid containers. They do not need re-declaration here.
+//
+// This stub ensures the _index.scss @forward "gap" resolves without error.
+// If flexer is used standalone (without core), uncomment the block below:
+
+// @use "@mastors/core/scss/tokens/spacing" as sp;
+// @each $key, $val in sp.$spacing-tokens {
+//   .gap-#{$key}   { gap: $val; }
+//   .gap-x-#{$key} { column-gap: $val; }
+//   .gap-y-#{$key} { row-gap: $val; }
+// }

package/scss/utilities/_index.scss

@@ -0,0 +1,22 @@
+// flexer/scss/utilities/_index.scss
+// ─────────────────────────────────────────────────────────────
+
+@forward "flex-display";
+@forward "flex-direction";
+@forward "flex-wrap";
+@forward "flex-flow";
+@forward "flex-grow";
+@forward "flex-shrink";
+@forward "flex-basis";
+@forward "flex-shorthand";
+@forward "justify-content";
+@forward "justify-items";
+@forward "justify-self";
+@forward "align-content";
+@forward "align-items";
+@forward "align-self";
+@forward "place-content";
+@forward "place-items";
+@forward "place-self";
+@forward "order";
+@forward "gap";

package/scss/utilities/_justify-content.scss

@@ -0,0 +1,23 @@
+// @mastors/flexer — utilities/_justify-content.scss
+// justify-content utility classes (main-axis alignment for flex items).
+// ─────────────────────────────────────────────────────────────
+
+@use "@mastors/core/scss/generators/class-generator" as gen;
+
+@include gen.generate-utilities((
+  "justify-content": (
+    property: justify-content,
+    prefix: "justify",
+    values: (
+      "start":         flex-start,
+      "end":           flex-end,
+      "center":        center,
+      "between":       space-between,
+      "around":        space-around,
+      "evenly":        space-evenly,
+      "stretch":       stretch,
+      "normal":        normal,
+    ),
+    responsive: true,
+  ),
+));

package/scss/utilities/_justify-items.scss

@@ -0,0 +1,19 @@
+// @mastors/flexer — utilities/_justify-items.scss
+// justify-items utility classes (inline-axis alignment for all flex items).
+// ─────────────────────────────────────────────────────────────
+
+@use "@mastors/core/scss/generators/class-generator" as gen;
+
+@include gen.generate-utilities((
+  "justify-items": (
+    property: justify-items,
+    prefix: "justify-items",
+    values: (
+      "start":   start,
+      "end":     end,
+      "center":  center,
+      "stretch": stretch,
+    ),
+    responsive: true,
+  ),
+));

package/scss/utilities/_justify-self.scss

@@ -0,0 +1,20 @@
+// @mastors/flexer — utilities/_justify-self.scss
+// justify-self utility classes (inline-axis alignment for a single flex item).
+// ─────────────────────────────────────────────────────────────
+
+@use "@mastors/core/scss/generators/class-generator" as gen;
+
+@include gen.generate-utilities((
+  "justify-self": (
+    property: justify-self,
+    prefix: "justify-self",
+    values: (
+      "auto":    auto,
+      "start":   start,
+      "end":     end,
+      "center":  center,
+      "stretch": stretch,
+    ),
+    responsive: true,
+  ),
+));

package/scss/utilities/_order.scss

@@ -0,0 +1,23 @@
+// @mastors/flexer — utilities/_order.scss
+// order utility classes (visual ordering of flex items).
+// ─────────────────────────────────────────────────────────────
+
+@use "@mastors/core/scss/generators/class-generator" as gen;
+
+// Named convenience values
+@include gen.generate-utilities((
+  "order-named": (
+    property: order,
+    prefix: "order",
+    values: (
+      "first": -9999,
+      "last":   9999,
+      "none":   0,
+    ),
+  ),
+));
+
+// Numeric scale: .order-{1–12}
+@each $n in 1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12 {
+  .order-#{$n} { order: $n; }
+}

package/scss/utilities/_place-content.scss

@@ -0,0 +1,23 @@
+// @mastors/flexer — utilities/_place-content.scss
+// place-content shorthand (align-content + justify-content).
+// ─────────────────────────────────────────────────────────────
+
+@use "@mastors/core/scss/generators/class-generator" as gen;
+
+@include gen.generate-utilities((
+  "place-content": (
+    property: place-content,
+    prefix: "place-content",
+    values: (
+      "center":  center,
+      "start":   start,
+      "end":     end,
+      "between": space-between,
+      "around":  space-around,
+      "evenly":  space-evenly,
+      "stretch": stretch,
+      "baseline":baseline,
+    ),
+    responsive: true,
+  ),
+));

package/scss/utilities/_place-items.scss

@@ -0,0 +1,20 @@
+// @mastors/flexer — utilities/_place-items.scss
+// place-items shorthand (align-items + justify-items).
+// ─────────────────────────────────────────────────────────────
+
+@use "@mastors/core/scss/generators/class-generator" as gen;
+
+@include gen.generate-utilities((
+  "place-items": (
+    property: place-items,
+    prefix: "place-items",
+    values: (
+      "start":   start,
+      "end":     end,
+      "center":  center,
+      "stretch": stretch,
+      "baseline":baseline,
+    ),
+    responsive: true,
+  ),
+));

package/scss/utilities/_place-self.scss

@@ -0,0 +1,20 @@
+// @mastors/flexer — utilities/_place-self.scss
+// place-self shorthand (align-self + justify-self).
+// ─────────────────────────────────────────────────────────────
+
+@use "@mastors/core/scss/generators/class-generator" as gen;
+
+@include gen.generate-utilities((
+  "place-self": (
+    property: place-self,
+    prefix: "place-self",
+    values: (
+      "auto":    auto,
+      "start":   start,
+      "end":     end,
+      "center":  center,
+      "stretch": stretch,
+    ),
+    responsive: true,
+  ),
+));