@xlabs-store/core 0.0.1 → 0.0.3

package/dist/collection/components/x-list-item/x-list-item.css

@@ -96,6 +96,7 @@
   --x-color-text-label: rgba(0, 0, 0, 0.65);
   --x-color-text-description: rgba(0, 0, 0, 0.45);
   --x-color-text-light-solid: #ffffff;
+  --x-color-text-processing: #ffffff;
   /** Background Colors **/
   --x-color-bg-container: #ffffff;
   --x-color-bg-elevated: #ffffff;
@@ -138,8 +139,10 @@
   --x-color-light-shade: #d7d8da;
   --x-color-light-tint: #f5f6f9;
   /** Font Family **/
-  --x-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
-  --x-font-family-code: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
+  --x-font-family:
+    -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif, 'Apple Color Emoji', 'Segoe UI Emoji', 'Segoe UI Symbol',
+    'Noto Color Emoji';
+  --x-font-family-code: 'SFMono-Regular', Consolas, 'Liberation Mono', Menlo, Courier, monospace;
   /** Font Sizes **/
   --x-font-size: 14px;
   --x-font-size-sm: 12px;

package/dist/collection/components/x-list-item/x-list-item.js

@@ -14,7 +14,7 @@ export class XListItem {
      * </x-list-item>
      */
     render() {
-        return (h(Host, { key: '78db54a78278d632febc823da3347f0b90956298' }, h("div", { key: '93b341b23d993dac7ace0e3f22a21c9f442a2326', class: "x-list-item-main" }, h("slot", { key: 'ff4b9aab0d34349ac22f7371074778306126c6e3' }), h("div", { key: 'e9098a86f3f51120fa7e8c4f28ae9eedc8ad8642', class: "x-list-item-actions" }, h("slot", { key: 'ee245f2d0797880f1eae5492124eb870bfabc3dd', name: "actions" }))), h("div", { key: '3a8095293e1240ac5ced9636b3dee0aa9e9159ba', class: "x-list-item-extra" }, h("slot", { key: '5968943335d81f16ffdd93a1cea37cafd90d74bd', name: "extra" }))));
+        return (h(Host, { key: '22cb7aa727da937be3bbc52e4d68ce1919ea4678' }, h("div", { key: 'a79c52f3b0f35e9b5657f68ddb1e0279c7cf2d7c', class: "x-list-item-main" }, h("slot", { key: 'a41e060d9581899fc460e91a9211bdcff3ae0c6a' }), h("div", { key: '958beeb7c3a47e2e333e813eb47d5b12c7b5e467', class: "x-list-item-actions" }, h("slot", { key: '0984f875614d9627b693975a4657d4c857347a53', name: "actions" }))), h("div", { key: 'b26f941b4ecaac0793849aa9c1036753082a4c82', class: "x-list-item-extra" }, h("slot", { key: '9121d59eb3eac6bd2d4eb7af8e65bac7f5b86be7', name: "extra" }))));
     }
     static get is() { return "x-list-item"; }
     static get encapsulation() { return "shadow"; }

package/dist/collection/components/x-login/types.js

@@ -0,0 +1 @@
+export {};

package/dist/collection/components/x-login/x-login.css

@@ -0,0 +1,562 @@
+@charset "UTF-8";
+/**
+* X-Login Component Variables
+*
+* Sass variables for x-login component.
+* Resolution priority: x-login → ref (x-*)
+*
+* Usage: Import this file in x-login.scss
+* @use './variables' as *;
+*/
+/**
+ * X-Login Component Styles
+ *
+ * Uses Sass variables from _variables.scss
+ * Resolution priority: x-login → ref (x-*)
+ */
+:host {
+  display: block;
+  font-family: var(--x-login-font-family, var(--x-font-family, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif));
+  box-sizing: border-box;
+}
+
+*,
+*::before,
+*::after {
+  box-sizing: border-box;
+}
+
+.x-login-header {
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-login-gap-sm, var(--x-spacing-sm, 8px));
+  text-align: center;
+}
+
+.x-login-title {
+  margin: 0;
+  font-size: var(--x-login-title-font-size, 24px);
+  font-weight: var(--x-login-title-font-weight, 600);
+  line-height: var(--x-login-title-line-height, 1.33);
+  color: var(--x-login-title-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));
+}
+
+.x-login-description {
+  margin: 0;
+  font-size: var(--x-login-description-font-size, var(--x-font-size-base, 14px));
+  color: var(--x-login-description-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));
+}
+
+.x-login-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-login-gap, var(--x-spacing-md, 16px));
+}
+
+.x-login-field {
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-login-field-gap, var(--x-spacing-xs, 6px));
+}
+.x-login-field-error {
+  color: var(--x-color-error, #ff4d4f);
+  font-size: 12px;
+  margin-top: 4px;
+  line-height: 1.2;
+}
+
+.x-login-label {
+  font-size: var(--x-login-label-font-size, var(--x-font-size-base, 14px));
+  font-weight: var(--x-login-label-font-weight, 500);
+  color: var(--x-login-label-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));
+}
+
+.x-login-field-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.x-login-link {
+  color: var(--x-login-link-color, var(--x-color-link, #1677ff));
+  font-size: var(--x-login-link-font-size, var(--x-font-size-sm, 12px));
+  text-decoration: underline;
+  text-underline-offset: 4px;
+  cursor: pointer;
+  background: none;
+  border: none;
+  padding: 0;
+  transition: color var(--x-login-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-login-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));
+}
+.x-login-link:hover {
+  color: var(--x-login-link-color-hover, var(--x-color-link-hover, #69b1ff));
+}
+
+.x-login-link--inline {
+  font-size: var(--x-login-description-font-size, var(--x-font-size-base, 14px));
+  text-decoration: underline;
+  text-underline-offset: 4px;
+}
+
+.x-login-error {
+  padding: var(--x-login-error-padding, 8px 12px);
+  background: var(--x-login-error-bg, var(--x-color-error-bg, #fff2f0));
+  border: var(--x-login-error-border, 1px solid var(--x-color-error-border, #ffccc7));
+  border-radius: var(--x-login-error-border-radius, var(--x-border-radius-base, 6px));
+  color: var(--x-login-error-color, var(--x-color-error, #ff4d4f));
+  font-size: var(--x-login-error-font-size, var(--x-font-size-sm, 12px));
+}
+
+.x-login-signup {
+  text-align: center;
+  font-size: var(--x-login-description-font-size, var(--x-font-size-base, 14px));
+  color: var(--x-login-description-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));
+}
+
+.x-login-social {
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-login-gap-sm, var(--x-spacing-sm, 8px));
+}
+
+.x-login-social-grid {
+  display: grid;
+  grid-template-columns: repeat(2, 1fr);
+  gap: var(--x-login-gap-sm, var(--x-spacing-sm, 8px));
+  max-height: 240px;
+  overflow-y: auto;
+  padding-right: 4px;
+}
+.x-login-social-grid:has(> :only-child) {
+  grid-template-columns: 1fr;
+}
+
+.x-login-social-img-icon {
+  width: 1.25em;
+  height: 1.25em;
+  object-fit: contain;
+  flex-shrink: 0;
+  display: inline-block;
+  vertical-align: middle;
+}
+
+.x-login-card.x-login-card--with-side {
+  flex-direction: row;
+  max-width: none;
+}
+@media (max-width: 768px) {
+  .x-login-card.x-login-card--with-side {
+    flex-direction: column;
+  }
+}
+
+.x-login-card-main {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-login-gap, var(--x-spacing-md, 16px));
+  min-width: 0;
+}
+
+.x-login-social-side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-login-gap-sm, var(--x-spacing-sm, 8px));
+  width: var(--x-login-social-side-width, 260px);
+  flex-shrink: 0;
+}
+@media (max-width: 768px) {
+  .x-login-social-side {
+    width: 100%;
+  }
+}
+
+.x-login-social-side-header {
+  font-size: var(--x-login-social-side-title-font-size, var(--x-font-size-base, 14px));
+  font-weight: 500;
+  color: var(--x-login-social-side-title-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));
+  text-align: center;
+  margin-bottom: var(--x-login-gap-sm, var(--x-spacing-sm, 8px));
+}
+
+.x-login-social-side-list {
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-login-gap-sm, var(--x-spacing-sm, 8px));
+  overflow-y: auto;
+  max-height: 400px;
+  padding-right: 4px;
+}
+
+.x-login-social-icon-grid {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--x-login-gap-sm, var(--x-spacing-sm, 8px));
+  justify-content: center;
+}
+
+.x-login-social-icon-btn {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--x-login-social-icon-size, 48px);
+  height: var(--x-login-social-icon-size, 48px);
+  border: var(--x-login-social-btn-border, 1px solid var(--x-color-border, #d9d9d9));
+  border-radius: var(--x-login-social-icon-border-radius, var(--x-border-radius-base, 6px));
+  background: var(--x-login-social-btn-bg, var(--x-color-bg-container, #ffffff));
+  color: var(--x-login-social-btn-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));
+  font-size: var(--x-login-social-icon-font-size, 18px);
+  cursor: pointer;
+  transition: border-color var(--x-login-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-login-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), background-color var(--x-login-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-login-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1))), box-shadow var(--x-login-motion-duration, var(--x-motion-duration-mid, 0.2s)) var(--x-login-motion-easing, var(--x-motion-ease-in-out, cubic-bezier(0.645, 0.045, 0.355, 1)));
+  outline: none;
+  padding: 0;
+}
+.x-login-social-icon-btn:hover {
+  border-color: var(--x-color-primary, #1677ff);
+  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
+}
+.x-login-social-icon-btn:active {
+  background: var(--x-color-fill-secondary, rgba(0, 0, 0, 0.06));
+}
+.x-login-social-icon-btn:disabled {
+  cursor: not-allowed;
+  opacity: 0.5;
+}
+
+.x-login-social-icon-letter {
+  font-weight: 700;
+  text-transform: uppercase;
+}
+
+.x-login-simple .x-login-simple-inner:has(.x-login-card--with-side) {
+  max-width: 720px;
+}
+
+.x-login-muted-bg .x-login-muted-inner:has(.x-login-card--with-side) {
+  max-width: 720px;
+}
+
+.x-login-terms {
+  text-align: center;
+  font-size: var(--x-login-terms-font-size, var(--x-font-size-sm, 12px));
+  color: var(--x-login-terms-color, var(--x-color-text-secondary, rgba(0, 0, 0, 0.45)));
+  line-height: 1.6;
+}
+
+.x-login-brand {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  gap: var(--x-login-gap-sm, var(--x-spacing-sm, 8px));
+  font-size: var(--x-login-brand-font-size, var(--x-font-size-base, 14px));
+  font-weight: var(--x-login-brand-font-weight, 600);
+  color: var(--x-login-title-color, var(--x-color-text, rgba(0, 0, 0, 0.88)));
+  text-decoration: none;
+}
+
+.x-login-brand-logo {
+  width: var(--x-login-brand-logo-size, 24px);
+  height: var(--x-login-brand-logo-size, 24px);
+  border-radius: var(--x-border-radius-sm, 4px);
+  object-fit: contain;
+}
+
+.x-login-brand-icon {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: var(--x-login-brand-logo-size, 24px);
+  height: var(--x-login-brand-logo-size, 24px);
+  border-radius: var(--x-border-radius-sm, 4px);
+  background: var(--x-color-primary, #1677ff);
+  color: #ffffff;
+  font-size: 12px;
+  font-weight: 700;
+}
+
+.x-login-remember-row {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+}
+
+.x-login-options-row {
+  display: flex;
+}
+.x-login-options-row--spaced {
+  justify-content: space-between;
+  align-items: center;
+}
+.x-login-options-row--right {
+  justify-content: flex-end;
+}
+
+.x-login-card {
+  background: var(--x-login-card-bg, var(--x-color-bg-container, #ffffff));
+  border: var(--x-login-card-border, 1px solid var(--x-color-border-secondary, #f0f0f0));
+  border-radius: var(--x-login-card-border-radius, var(--x-border-radius-lg, 8px));
+  box-shadow: var(--x-login-card-shadow, 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02));
+  padding: var(--x-login-card-padding, var(--x-spacing-xl, 24px));
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-login-gap, var(--x-spacing-md, 16px));
+}
+
+.x-login-simple {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--x-login-min-height, 100vh);
+  padding: var(--x-login-padding, var(--x-spacing-xl, 24px));
+  background: var(--x-login-page-bg, var(--x-color-bg-base, #ffffff));
+}
+.x-login-simple .x-login-simple-inner {
+  width: 100%;
+  max-width: var(--x-login-max-width, 400px);
+}
+
+.x-login-split-image {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  min-height: var(--x-login-min-height, 100vh);
+}
+@media (max-width: 1024px) {
+  .x-login-split-image {
+    grid-template-columns: 1fr;
+  }
+}
+.x-login-split-image .x-login-split-form-side {
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-login-gap, var(--x-spacing-md, 16px));
+  padding: var(--x-login-padding, var(--x-spacing-xl, 24px));
+}
+.x-login-split-image .x-login-split-brand {
+  display: flex;
+  justify-content: center;
+}
+@media (min-width: 769px) {
+  .x-login-split-image .x-login-split-brand {
+    justify-content: flex-start;
+  }
+}
+.x-login-split-image .x-login-split-form-center {
+  display: flex;
+  flex: 1;
+  align-items: center;
+  justify-content: center;
+}
+.x-login-split-image .x-login-split-form-center .x-login-card--with-side {
+  display: flex;
+  width: 100%;
+  max-width: var(--x-login-social-side-card-width, 720px);
+}
+.x-login-split-image .x-login-split-form-wrapper {
+  width: 100%;
+  max-width: 360px;
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-login-gap, var(--x-spacing-md, 16px));
+}
+.x-login-split-image .x-login-split-form-wrapper.x-login-wrapper--with-side {
+  max-width: var(--x-login-social-side-form-width, 360px);
+  margin: 0 auto;
+  flex: 1;
+}
+.x-login-split-image .x-login-split-image-side {
+  position: relative;
+  background: var(--x-login-muted-bg, var(--x-color-bg-layout, #f5f5f5));
+  overflow: hidden;
+}
+@media (max-width: 1024px) {
+  .x-login-split-image .x-login-split-image-side {
+    display: none;
+  }
+}
+.x-login-split-image .x-login-split-image-side img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+
+.x-login-muted-bg {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--x-login-gap, var(--x-spacing-md, 16px));
+  min-height: var(--x-login-min-height, 100vh);
+  padding: var(--x-login-padding, var(--x-spacing-xl, 24px));
+  background: var(--x-login-muted-bg, var(--x-color-bg-layout, #f5f5f5));
+}
+.x-login-muted-bg .x-login-muted-inner {
+  width: 100%;
+  max-width: var(--x-login-max-width, 400px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-login-gap, var(--x-spacing-md, 16px));
+}
+
+.x-login-card-image {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  min-height: var(--x-login-min-height, 100vh);
+  padding: var(--x-login-padding, var(--x-spacing-xl, 24px));
+  background: var(--x-login-muted-bg, var(--x-color-bg-layout, #f5f5f5));
+}
+.x-login-card-image .x-login-card-image-container {
+  width: 100%;
+  max-width: var(--x-login-card-max-width, 900px);
+}
+.x-login-card-image .x-login-card-image-container.x-login-container--with-side {
+  max-width: var(--x-login-social-side-image-card-width, 1000px);
+}
+.x-login-card-image .x-login-card-image-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  overflow: hidden;
+  background: var(--x-login-card-bg, var(--x-color-bg-container, #ffffff));
+  border: var(--x-login-card-border, 1px solid var(--x-color-border-secondary, #f0f0f0));
+  border-radius: var(--x-login-card-border-radius, var(--x-border-radius-lg, 8px));
+  box-shadow: var(--x-login-card-shadow, 0 1px 2px 0 rgba(0, 0, 0, 0.03), 0 1px 6px -1px rgba(0, 0, 0, 0.02), 0 2px 4px 0 rgba(0, 0, 0, 0.02));
+}
+.x-login-card-image .x-login-card-image-grid.x-login-grid--with-side {
+  grid-template-columns: minmax(0, 1fr) auto;
+}
+@media (max-width: 768px) {
+  .x-login-card-image .x-login-card-image-grid {
+    grid-template-columns: 1fr;
+  }
+}
+.x-login-card-image .x-login-card-image-cover {
+  position: relative;
+  overflow: hidden;
+}
+@media (max-width: 768px) {
+  .x-login-card-image .x-login-card-image-cover {
+    display: none;
+  }
+}
+.x-login-card-image .x-login-card-image-cover img {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.x-login-card-image .x-login-card-image-form {
+  padding: var(--x-login-card-padding, var(--x-spacing-xl, 24px));
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-login-gap, var(--x-spacing-md, 16px));
+}
+.x-login-card-image .x-login-card-image-form.x-login-wrapper--with-side {
+  max-width: var(--x-login-social-side-form-width, 360px);
+  margin: 0 auto;
+  flex: 1;
+  padding-right: var(--x-login-padding, var(--x-spacing-xl, 24px));
+}
+.x-login-card-image .x-login-card--with-side {
+  display: flex;
+  background: var(--x-login-card-bg, var(--x-color-bg-container, #ffffff));
+}
+
+.x-login-email-only {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  gap: var(--x-login-gap, var(--x-spacing-md, 16px));
+  min-height: var(--x-login-min-height, 100vh);
+  padding: var(--x-login-padding, var(--x-spacing-xl, 24px));
+  background: var(--x-login-page-bg, var(--x-color-bg-base, #ffffff));
+}
+.x-login-email-only .x-login-email-inner {
+  width: 100%;
+  max-width: var(--x-login-max-width, 400px);
+  display: flex;
+  flex-direction: column;
+  gap: var(--x-login-gap, var(--x-spacing-md, 16px));
+}
+.x-login-email-only .x-login-header {
+  gap: 4px;
+}
+
+.x-login-layout-divider {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--x-color-text-secondary, rgba(0, 0, 0, 0.45));
+  font-size: 12px;
+}
+.x-login-layout-divider--vertical {
+  flex-direction: column;
+  margin: 0 24px;
+  align-self: stretch;
+}
+.x-login-layout-divider--vertical::before, .x-login-layout-divider--vertical::after {
+  content: "";
+  flex: 1 1 0%;
+  border-left: 1px solid var(--x-color-border-secondary, #f0f0f0);
+}
+.x-login-layout-divider--vertical.x-login-layout-divider--has-text::before {
+  margin-bottom: 8px;
+}
+.x-login-layout-divider--vertical.x-login-layout-divider--has-text::after {
+  margin-top: 8px;
+}
+@media (max-width: 768px) {
+  .x-login-layout-divider--vertical {
+    flex-direction: row;
+    margin: 24px 0;
+    width: 100%;
+  }
+  .x-login-layout-divider--vertical::before, .x-login-layout-divider--vertical::after {
+    border-left: none;
+    border-top: 1px solid var(--x-color-border-secondary, #f0f0f0);
+  }
+  .x-login-layout-divider--vertical.x-login-layout-divider--has-text::before {
+    margin-bottom: 0;
+    margin-right: 8px;
+    margin-top: 0;
+  }
+  .x-login-layout-divider--vertical.x-login-layout-divider--has-text::after {
+    margin-top: 0;
+    margin-left: 8px;
+    margin-bottom: 0;
+  }
+}
+.x-login-layout-divider--horizontal {
+  flex-direction: row;
+  margin: 24px 0;
+  width: 100%;
+}
+.x-login-layout-divider--horizontal::before, .x-login-layout-divider--horizontal::after {
+  content: "";
+  flex: 1 1 0%;
+  border-top: 1px solid var(--x-color-border-secondary, #f0f0f0);
+}
+.x-login-layout-divider--horizontal.x-login-layout-divider--has-text::before {
+  margin-right: 8px;
+  margin-bottom: 0px;
+}
+.x-login-layout-divider--horizontal.x-login-layout-divider--has-text::after {
+  margin-left: 8px;
+  margin-top: 0px;
+}
+
+@media (max-width: 640px) {
+  .x-login-simple,
+  .x-login-muted-bg,
+  .x-login-card-image,
+  .x-login-email-only {
+    padding: var(--x-login-padding-sm, var(--x-spacing-md, 16px));
+  }
+  .x-login-card {
+    padding: var(--x-login-padding-sm, var(--x-spacing-md, 16px));
+  }
+}