@vitus-labs/elements 2.0.0-beta.1 → 2.0.0-beta.3

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
package/lib/index.js CHANGED
@@ -150,27 +150,25 @@ const childFixCSS = `
150
150
  const parentFixCSS = `
151
151
  flex-direction: column;
152
152
  `;
153
- const fullHeightCSS = `
154
- height: 100%;
155
- `;
156
- const blockCSS = `
157
- align-self: stretch;
158
- width: 100%;
159
- `;
160
- const childFixPosition = (isBlock) => `display: ${isBlock ? "flex" : "inline-flex"};`;
161
153
  const styles$1 = ({ theme: t, css }) => css`
162
- ${t.alignY === "block" && fullHeightCSS};
163
-
164
154
  ${alignContent({
165
155
  direction: t.direction,
166
156
  alignX: t.alignX,
167
157
  alignY: t.alignY
168
158
  })};
169
159
 
170
- ${t.block && blockCSS};
171
- ${t.alignY === "block" && t.block && fullHeightCSS};
160
+ /*
161
+ * Always emit a value for the block-related properties so a responsive
162
+ * theme that flips from \`block: true\` at one breakpoint to \`block: false\`
163
+ * at another resets cleanly. Previously \`align-self\` / \`width\` / \`height\`
164
+ * were only set when the truthy branch matched, which left the prior
165
+ * breakpoint's values cascading through.
166
+ */
167
+ ${`align-self: ${t.block ? "stretch" : "auto"};
168
+ width: ${t.block ? "100%" : "auto"};
169
+ height: ${t.alignY === "block" ? "100%" : "auto"};`};
172
170
 
173
- ${!t.childFix && childFixPosition(t.block)};
171
+ ${!t.childFix && `display: ${t.block ? "flex" : "inline-flex"};`};
174
172
  ${t.parentFix && parentFixCSS};
175
173
 
176
174
  ${t.extraStyles && extendCss(t.extraStyles)};
@@ -146,20 +146,20 @@ const childFixCSS = `
146
146
  width: 100%;
147
147
  height: 100%;
148
148
  `;
149
- const blockCSS = `
150
- align-self: stretch;
151
- width: 100%;
152
- `;
153
149
  const styles$1 = ({ theme: t, css }) => css`
154
- ${false};
155
-
156
150
  ${alignContent({
157
151
  direction: t.direction,
158
152
  alignX: t.alignX,
159
153
  alignY: t.alignY
160
154
  })};
161
155
 
162
- ${t.block && blockCSS};
156
+ /*
157
+ * Always emit a value for the block-related properties so a responsive
158
+ * theme that flips from \`block: true\` at one breakpoint to \`block: false\`
159
+ * at another resets cleanly. Previously \`align-self\` / \`width\` / \`height\`
160
+ * were only set when the truthy branch matched, which left the prior
161
+ * breakpoint's values cascading through.
162
+ */
163
163
  ${false};
164
164
 
165
165
  ${false};
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@vitus-labs/elements",
3
- "version": "2.0.0-beta.1",
3
+ "version": "2.0.0-beta.3",
4
4
  "license": "MIT",
5
5
  "author": "Vit Bokisch <vit@bokisch.cz>",
6
6
  "maintainers": [
@@ -58,8 +58,8 @@
58
58
  "version": "node ../../scripts/sync-peer-deps.mjs"
59
59
  },
60
60
  "peerDependencies": {
61
- "@vitus-labs/core": "2.0.0-beta.1",
62
- "@vitus-labs/unistyle": "2.0.0-beta.1",
61
+ "@vitus-labs/core": "2.0.0-beta.3",
62
+ "@vitus-labs/unistyle": "2.0.0-beta.3",
63
63
  "react": ">= 19",
64
64
  "react-dom": ">= 19",
65
65
  "react-native": ">= 0.76"