@lmvz-ds/components 0.12.3-alpha.3 → 0.12.3

package/hydrate/index.mjs

@@ -6999,7 +6999,7 @@ const merge$3 = /*#__PURE__*/match$8({
  * @category getters
  * @since 2.0.0
  */
-const getOrThrowWith = /*#__PURE__*/dual(2, (self, onLeft) => {
+const getOrThrowWith$1 = /*#__PURE__*/dual(2, (self, onLeft) => {
   if (isRight(self)) {
     return self.right;
   }
@@ -7336,6 +7336,67 @@ const fromNullable = nullableValue => nullableValue == null ? none$4() : some(nu
  * @since 2.0.0
  */
 const getOrUndefined = /*#__PURE__*/getOrElse(constUndefined);
+/**
+ * Extracts the value of an `Option` or throws an error if the `Option` is
+ * `None`, using a custom error factory.
+ *
+ * **Details**
+ *
+ * This function allows you to extract the value of an `Option` when it is
+ * `Some`. If the `Option` is `None`, it throws an error generated by the
+ * provided `onNone` function. This utility is particularly useful when you need
+ * a fail-fast behavior for empty `Option` values and want to provide a custom
+ * error message or object.
+ *
+ * @example
+ * ```ts
+ * import * as assert from "node:assert"
+ * import { Option } from "effect"
+ *
+ * assert.deepStrictEqual(
+ *   Option.getOrThrowWith(Option.some(1), () => new Error('Unexpected None')),
+ *   1
+ * )
+ * assert.throws(() => Option.getOrThrowWith(Option.none(), () => new Error('Unexpected None')))
+ * ```
+ *
+ * @see {@link getOrThrow} for a version that throws a default error.
+ *
+ * @category Conversions
+ * @since 2.0.0
+ */
+const getOrThrowWith = /*#__PURE__*/dual(2, (self, onNone) => {
+  if (isSome(self)) {
+    return self.value;
+  }
+  throw onNone();
+});
+/**
+ * Extracts the value of an `Option` or throws a default error if the `Option`
+ * is `None`.
+ *
+ * **Details**
+ *
+ * This function extracts the value from an `Option` if it is `Some`. If the
+ * `Option` is `None`, it throws a default error. It is useful for fail-fast
+ * scenarios where the absence of a value is treated as an exceptional case and
+ * a default error is sufficient.
+ *
+ * @example
+ * ```ts
+ * import * as assert from "node:assert"
+ * import { Option } from "effect"
+ *
+ * assert.deepStrictEqual(Option.getOrThrow(Option.some(1)), 1)
+ * assert.throws(() => Option.getOrThrow(Option.none()))
+ * ```
+ *
+ * @see {@link getOrThrowWith} for a version that allows you to provide a custom error.
+ *
+ * @category Conversions
+ * @since 2.0.0
+ */
+const getOrThrow = /*#__PURE__*/getOrThrowWith(() => new Error("getOrThrow called on a None"));
 /**
  * Transforms the value inside a `Some` to a new value using the provided
  * function, while leaving `None` unchanged.
@@ -8385,7 +8446,7 @@ function refined(...args) {
       onSome: left
     });
   };
-  return Object.assign(unbranded => getOrThrowWith(either(unbranded), identity), {
+  return Object.assign(unbranded => getOrThrowWith$1(either(unbranded), identity), {
     [RefinedConstructorsTypeId]: RefinedConstructorsTypeId,
     option: args => getRight(either(args)),
     either,
@@ -12758,6 +12819,15 @@ const flipCauseOption$1 = self => match$5(self, {
 /** @internal */
 const interruptOption = self => find(self, cause => cause._tag === OP_INTERRUPT ? some(cause.fiberId) : none$4());
 /** @internal */
+const keepDefectsAndElectFailures = self => match$5(self, {
+  onEmpty: none$4(),
+  onFail: failure => some(die$3(failure)),
+  onDie: defect => some(die$3(defect)),
+  onInterrupt: () => none$4(),
+  onSequential: mergeWith$1(sequential$2),
+  onParallel: mergeWith$1(parallel$2)
+});
+/** @internal */
 const stripFailures = self => match$5(self, {
   onEmpty: empty$9,
   onFail: () => empty$9,
@@ -13779,6 +13849,8 @@ const onInterrupt = /*#__PURE__*/dual(2, (self, cleanup) => onExit$1(self, exitM
   onSuccess: () => void_$3
 })));
 /* @internal */
+const orElse = /*#__PURE__*/dual(2, (self, that) => attemptOrElse(self, that, succeed$5));
+/* @internal */
 const orDie = self => orDieWith(self, identity);
 /* @internal */
 const orDieWith = /*#__PURE__*/dual(2, (self, f) => matchEffect(self, {
@@ -13822,6 +13894,17 @@ const transplant = f => withFiberRuntime$1(state => {
   return f(fiberRefLocally(currentForkScopeOverride, some(scope)));
 });
 /* @internal */
+const attemptOrElse = /*#__PURE__*/dual(3, (self, that, onSuccess) => matchCauseEffect$2(self, {
+  onFailure: cause => {
+    const defects$1 = defects(cause);
+    if (defects$1.length > 0) {
+      return failCause$7(getOrThrow(keepDefectsAndElectFailures(cause)));
+    }
+    return that();
+  },
+  onSuccess
+}));
+/* @internal */
 const uninterruptible$1 = self => {
   const effect = new EffectPrimitive(OP_UPDATE_RUNTIME_FLAGS);
   effect.effect_instruction_i0 = disable(Interruption);
@@ -16263,6 +16346,24 @@ const isMetricLabel = u => hasProperty(u, MetricLabelTypeId);
 /* @internal */
 const asSome = self => map$6(self, some);
 /* @internal */
+const try_$1 = arg => {
+  let evaluate;
+  let onFailure = undefined;
+  if (typeof arg === "function") {
+    evaluate = arg;
+  } else {
+    evaluate = arg.try;
+    onFailure = arg.catch;
+  }
+  return suspend$3(() => {
+    try {
+      return succeed$5(internalCall(evaluate));
+    } catch (error) {
+      return fail$4(onFailure ? internalCall(() => onFailure(error)) : new UnknownException(error, "An unknown error occurred in Effect.try"));
+    }
+  });
+};
+/* @internal */
 const catchSomeCause$1 = /*#__PURE__*/dual(2, (self, f) => matchCauseEffect$2(self, {
   onFailure: cause => {
     const option = f(cause);
@@ -16298,6 +16399,32 @@ const ignore$1 = self => match$3(self, {
   onFailure: constVoid,
   onSuccess: constVoid
 });
+/** @internal */
+const logWithLevel = level => (...message) => {
+  const levelOption = fromNullable(level);
+  let cause = undefined;
+  for (let i = 0, len = message.length; i < len; i++) {
+    const msg = message[i];
+    if (isCause(msg)) {
+      if (cause !== undefined) {
+        cause = sequential$2(cause, msg);
+      } else {
+        cause = msg;
+      }
+      message = [...message.slice(0, i), ...message.slice(i + 1)];
+      i--;
+    }
+  }
+  if (cause === undefined) {
+    cause = empty$9;
+  }
+  return withFiberRuntime$1(fiberState => {
+    fiberState.log(message, cause, levelOption);
+    return void_$3;
+  });
+};
+/** @internal */
+const logWarning$1 = /*#__PURE__*/logWithLevel(Warning);
 /* @internal */
 const mapErrorCause = /*#__PURE__*/dual(2, (self, f) => matchCauseEffect$2(self, {
   onFailure: c => failCauseSync$1(() => f(c)),
@@ -16306,6 +16433,8 @@ const mapErrorCause = /*#__PURE__*/dual(2, (self, f) => matchCauseEffect$2(self,
 /* @internal */
 const negate = self => map$6(self, b => !b);
 /* @internal */
+const orElseSucceed$1 = /*#__PURE__*/dual(2, (self, evaluate) => orElse(self, () => sync$2(evaluate)));
+/* @internal */
 const patchFiberRefs = patch => updateFiberRefs((fiberId, fiberRefs) => pipe(patch, patch$2(fiberId, fiberRefs)));
 /* @internal */
 const promise$1 = evaluate => evaluate.length >= 1 ? async_((resolve, signal) => {
@@ -16332,6 +16461,19 @@ const succeedNone = /*#__PURE__*/succeed$5(/*#__PURE__*/none$4());
 /* @internal */
 const summarized = /*#__PURE__*/dual(3, (self, summary, f) => flatMap$4(summary, start => flatMap$4(self, value => map$6(summary, end => [f(start, end), value]))));
 /* @internal */
+const tapError$1 = /*#__PURE__*/dual(2, (self, f) => matchCauseEffect$2(self, {
+  onFailure: cause => {
+    const either = failureOrCause$1(cause);
+    switch (either._tag) {
+      case "Left":
+        return zipRight$3(f(either.left), failCause$7(cause));
+      case "Right":
+        return failCause$7(cause);
+    }
+  },
+  onSuccess: succeed$5
+}));
+/* @internal */
 const tapErrorCause$1 = /*#__PURE__*/dual(2, (self, f) => matchCauseEffect$2(self, {
   onFailure: cause => zipRight$3(f(cause), failCause$7(cause)),
   onSuccess: succeed$5
@@ -17266,6 +17408,51 @@ class MixedScheduler {
  * @category schedulers
  */
 const defaultScheduler = /*#__PURE__*/globalValue(/*#__PURE__*/Symbol.for("effect/Scheduler/defaultScheduler"), () => new MixedScheduler(2048));
+/**
+ * @since 2.0.0
+ * @category constructors
+ */
+class SyncScheduler {
+  /**
+   * @since 2.0.0
+   */
+  tasks = /*#__PURE__*/new PriorityBuckets();
+  /**
+   * @since 2.0.0
+   */
+  deferred = false;
+  /**
+   * @since 2.0.0
+   */
+  scheduleTask(task, priority) {
+    if (this.deferred) {
+      defaultScheduler.scheduleTask(task, priority);
+    } else {
+      this.tasks.scheduleTask(task, priority);
+    }
+  }
+  /**
+   * @since 2.0.0
+   */
+  shouldYield(fiber) {
+    return fiber.currentOpCount > fiber.getFiberRef(currentMaxOpsBeforeYield) ? fiber.getFiberRef(currentSchedulingPriority) : false;
+  }
+  /**
+   * @since 2.0.0
+   */
+  flush() {
+    while (this.tasks.buckets.length > 0) {
+      const tasks = this.tasks.buckets;
+      this.tasks.buckets = [];
+      for (const [_, toRun] of tasks) {
+        for (let i = 0; i < toRun.length; i++) {
+          toRun[i]();
+        }
+      }
+    }
+    this.deferred = true;
+  }
+}
 /** @internal */
 const currentScheduler = /*#__PURE__*/globalValue(/*#__PURE__*/Symbol.for("effect/FiberRef/currentScheduler"), () => fiberRefUnsafeMake(defaultScheduler));
 
@@ -20950,6 +21137,116 @@ const unsafeFork = /*#__PURE__*/makeDual((runtime, self, options) => {
   return fiberRuntime;
 });
 /** @internal */
+const unsafeRunSync = /*#__PURE__*/makeDual((runtime, effect) => {
+  const result = unsafeRunSyncExit(runtime)(effect);
+  if (result._tag === "Failure") {
+    throw fiberFailure(result.effect_instruction_i0);
+  }
+  return result.effect_instruction_i0;
+});
+class AsyncFiberExceptionImpl extends Error {
+  fiber;
+  _tag = "AsyncFiberException";
+  constructor(fiber) {
+    super(`Fiber #${fiber.id().id} cannot be resolved synchronously. This is caused by using runSync on an effect that performs async work`);
+    this.fiber = fiber;
+    this.name = this._tag;
+    this.stack = this.message;
+  }
+}
+const asyncFiberException = fiber => {
+  const limit = Error.stackTraceLimit;
+  Error.stackTraceLimit = 0;
+  const error = new AsyncFiberExceptionImpl(fiber);
+  Error.stackTraceLimit = limit;
+  return error;
+};
+/** @internal */
+const FiberFailureId = /*#__PURE__*/Symbol.for("effect/Runtime/FiberFailure");
+/** @internal */
+const FiberFailureCauseId = /*#__PURE__*/Symbol.for("effect/Runtime/FiberFailure/Cause");
+class FiberFailureImpl extends Error {
+  [FiberFailureId];
+  [FiberFailureCauseId];
+  constructor(cause) {
+    const head = prettyErrors(cause)[0];
+    super(head?.message || "An error has occurred");
+    this[FiberFailureId] = FiberFailureId;
+    this[FiberFailureCauseId] = cause;
+    this.name = head ? `(FiberFailure) ${head.name}` : "FiberFailure";
+    if (head?.stack) {
+      this.stack = head.stack;
+    }
+  }
+  toJSON() {
+    return {
+      _id: "FiberFailure",
+      cause: this[FiberFailureCauseId].toJSON()
+    };
+  }
+  toString() {
+    return "(FiberFailure) " + pretty(this[FiberFailureCauseId], {
+      renderErrorCause: true
+    });
+  }
+  [NodeInspectSymbol]() {
+    return this.toString();
+  }
+}
+/** @internal */
+const fiberFailure = cause => {
+  const limit = Error.stackTraceLimit;
+  Error.stackTraceLimit = 0;
+  const error = new FiberFailureImpl(cause);
+  Error.stackTraceLimit = limit;
+  return error;
+};
+const fastPath = effect => {
+  const op = effect;
+  switch (op._op) {
+    case "Failure":
+    case "Success":
+      {
+        // @ts-expect-error
+        return op;
+      }
+    case "Left":
+      {
+        return exitFail(op.left);
+      }
+    case "Right":
+      {
+        return exitSucceed$1(op.right);
+      }
+    case "Some":
+      {
+        return exitSucceed$1(op.value);
+      }
+    case "None":
+      {
+        // @ts-expect-error
+        return exitFail(new NoSuchElementException());
+      }
+  }
+};
+/** @internal */
+const unsafeRunSyncExit = /*#__PURE__*/makeDual((runtime, effect) => {
+  const op = fastPath(effect);
+  if (op) {
+    return op;
+  }
+  const scheduler = new SyncScheduler();
+  const fiberRuntime = unsafeFork(runtime)(effect, {
+    scheduler
+  });
+  scheduler.flush();
+  const result = fiberRuntime.unsafePoll();
+  if (result) {
+    return result;
+  }
+  return exitDie$1(capture(asyncFiberException(fiberRuntime), currentSpanFromFiber(fiberRuntime)));
+});
+/** @internal */
 class RuntimeImpl {
   context;
   runtimeFlags;
@@ -20977,6 +21274,8 @@ const defaultRuntime = /*#__PURE__*/make$3({
 });
 /** @internal */
 const unsafeForkEffect = /*#__PURE__*/unsafeFork(defaultRuntime);
+/** @internal */
+const unsafeRunSyncEffect = /*#__PURE__*/unsafeRunSync(defaultRuntime);
 
 /** @internal */
 const modifyEffect = /*#__PURE__*/dual(2, (self, f) => self.modifyEffect(f));
@@ -22380,6 +22679,7 @@ const catchSomeCause = catchSomeCause$1;
  * @category Error handling
  */
 const ignore = ignore$1;
+const try_ = try_$1;
 /**
  * Represents an effect that interrupts the current fiber.
  *
@@ -23525,6 +23825,43 @@ const raceWith = raceWith$1;
  * @category Sequencing
  */
 const tap = tap$1;
+/**
+ * Execute a side effect on failure without modifying the original effect.
+ *
+ * **Details**
+ *
+ * This function allows you to inspect and react to the failure of an effect by
+ * executing an additional effect. The failure value is passed to the provided
+ * function, enabling you to log it, track it, or perform any other operation.
+ * Importantly, the original failure remains intact and is re-propagated, so the
+ * effect's behavior is unchanged.
+ *
+ * The side effect you provide is only executed when the effect fails. If the
+ * effect succeeds, the function is ignored, and the success value is propagated
+ * as usual.
+ *
+ * **Example**
+ *
+ * ```ts
+ * import { Effect, Console } from "effect"
+ *
+ * // Simulate a task that fails with an error
+ * const task: Effect.Effect<number, string> = Effect.fail("NetworkError")
+ *
+ * // Use tapError to log the error message when the task fails
+ * const tapping = Effect.tapError(task, (error) =>
+ *   Console.log(`expected error: ${error}`)
+ * )
+ *
+ * Effect.runFork(tapping)
+ * // Output:
+ * // expected error: NetworkError
+ * ```
+ *
+ * @since 2.0.0
+ * @category Sequencing
+ */
+const tapError = tapError$1;
 /**
  * Inspect the complete cause of an error, including failures and defects.
  *
@@ -23815,6 +24152,65 @@ const matchCause = matchCause$1;
  * @category Matching
  */
 const matchCauseEffect = matchCauseEffect$2;
+/**
+ * Logs messages at the WARNING log level.
+ *
+ * **Details**
+ *
+ * This function logs messages at the WARNING level, suitable for highlighting
+ * potential issues that are not errors but may require attention. These
+ * messages indicate that something unexpected occurred or might lead to errors
+ * in the future.
+ *
+ * @since 2.0.0
+ * @category Logging
+ */
+const logWarning = logWarning$1;
+/**
+ * Ensures the effect always succeeds by replacing failures with a default
+ * success value.
+ *
+ * **Details**
+ *
+ * This function transforms an effect that may fail into one that cannot fail by
+ * replacing any failure with a provided success value. If the original effect
+ * fails, the failure is "swallowed," and the specified success value is
+ * returned instead. If the original effect succeeds, its value remains
+ * unchanged.
+ *
+ * **When to Use**
+ *
+ * This is especially useful for providing default values in case of failure,
+ * ensuring that an effect always completes successfully. By using this
+ * function, you can avoid the need for complex error handling and guarantee a
+ * fallback result.
+ *
+ * **Example**
+ *
+ * ```ts
+ * import { Effect } from "effect"
+ *
+ * const validate = (age: number): Effect.Effect<number, string> => {
+ *   if (age < 0) {
+ *     return Effect.fail("NegativeAgeError")
+ *   } else if (age < 18) {
+ *     return Effect.fail("IllegalAgeError")
+ *   } else {
+ *     return Effect.succeed(age)
+ *   }
+ * }
+ *
+ * const program = Effect.orElseSucceed(validate(-1), () => 18)
+ *
+ * console.log(Effect.runSyncExit(program))
+ * // Output:
+ * // { _id: 'Exit', _tag: 'Success', value: 18 }
+ * ```
+ *
+ * @since 2.0.0
+ * @category Fallback
+ */
+const orElseSucceed = orElseSucceed$1;
 /**
  * Returns an effect that accesses the runtime, which can be used to (unsafely)
  * execute tasks.
@@ -23905,6 +24301,84 @@ const makeSemaphore = makeSemaphore$1;
  * @category Running Effects
  */
 const runFork = unsafeForkEffect;
+/**
+ * Executes an effect synchronously, running it immediately and returning the
+ * result.
+ *
+ * **Details**
+ *
+ * This function evaluates the provided effect synchronously, returning its
+ * result directly. It is ideal for effects that do not fail or include
+ * asynchronous operations. If the effect does fail or involves async tasks, it
+ * will throw an error. Execution stops at the point of failure or asynchronous
+ * operation, making it unsuitable for effects that require asynchronous
+ * handling.
+ *
+ * **Important**: Attempting to run effects that involve asynchronous operations
+ * or failures will result in exceptions being thrown, so use this function with
+ * care for purely synchronous and error-free effects.
+ *
+ * **When to Use**
+ *
+ * Use this function when:
+ * - You are sure that the effect will not fail or involve asynchronous
+ *   operations.
+ * - You need a direct, synchronous result from the effect.
+ * - You are working within a context where asynchronous effects are not
+ *   allowed.
+ *
+ * Avoid using this function for effects that can fail or require asynchronous
+ * handling. For such cases, consider using {@link runPromise} or
+ * {@link runSyncExit}.
+ *
+ * **Example** (Synchronous Logging)
+ *
+ * ```ts
+ * import { Effect } from "effect"
+ *
+ * const program = Effect.sync(() => {
+ *   console.log("Hello, World!")
+ *   return 1
+ * })
+ *
+ * const result = Effect.runSync(program)
+ * // Output: Hello, World!
+ *
+ * console.log(result)
+ * // Output: 1
+ * ```
+ *
+ * **Example** (Incorrect Usage with Failing or Async Effects)
+ *
+ * ```ts
+ * import { Effect } from "effect"
+ *
+ * try {
+ *   // Attempt to run an effect that fails
+ *   Effect.runSync(Effect.fail("my error"))
+ * } catch (e) {
+ *   console.error(e)
+ * }
+ * // Output:
+ * // (FiberFailure) Error: my error
+ *
+ * try {
+ *   // Attempt to run an effect that involves async work
+ *   Effect.runSync(Effect.promise(() => Promise.resolve(1)))
+ * } catch (e) {
+ *   console.error(e)
+ * }
+ * // Output:
+ * // (FiberFailure) AsyncFiberException: Fiber #0 cannot be resolved synchronously. This is caused by using runSync on an effect that performs async work
+ * ```
+ *
+ * @see {@link runSyncExit} for a version that returns an `Exit` type instead of
+ * throwing an error.
+ *
+ * @since 2.0.0
+ * @category Running Effects
+ */
+const runSync = unsafeRunSyncEffect;
 /**
  * Combines two effects into a single effect, producing a tuple of their
  * results.
@@ -26889,6 +27363,12 @@ class LmvzButton extends ReactiveControllerHost {
     }; }
 }
 
+class URLCreationError extends TaggedError('URLCreationError') {
+}
+const syncCreateAssetUrlSafely = (file) => try_(() => getAssetPath(['../../assets', file].join('/').replace('//', '/').replace('/./', '/'))).pipe(tapError(() => logWarning(`Failed to create URL for icon "${file}".
+           Please provide an absolute URL in your app's 'setAssetPath(...)' configuration!
+           Falling back to /assets/`)), orElseSucceed(() => window.location.origin + '/assets/' + file));
+
 const lmvzCardCss = () => `@layer lmvz-ds.reset, lmvz-ds.theme, lmvz-ds.components, lmvz-ds.overrides;  @layer lmvz-ds.theme { @font-face {   font-family: Router;   src:     local('Router-Book'),     url('/assets/fonts/Router-Book.woff') format('woff'),     local('Router');   font-weight: 400 normal; }  @font-face {   font-family: Router;   src:     local('Router-Medium'),     url('/assets/fonts/Router-Medium.woff') format('woff'),     local('Router');   font-weight: 500; }  @font-face {   font-family: Router;   src:     local('Router-Bold'),     url('/assets/fonts/Router-Bold.woff') format('woff'),     local('Router');   font-weight: 700 bold; }  } @layer lmvz-ds.reset { h1, h2, h3, h4, h5, h6 {   margin: 0; }  } .sc-lmvz-card-h {            button {   --lmvz-button-color: var(--lmvz-component-color, var(--lmvz-semantic-color-int-on-primary, #ffffff));   --lmvz-button-padding-inline: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-x, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-padding-block: var(--lmvz-button-padding, var(--lmvz-component-input-md-padding-y, clamp(0.75rem, 0.69rem + 0.26vw, 1rem)));   --lmvz-button-gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4     Router);   --lmvz-button-radius: var(--lmvz-component-input-radius-default, 999px);   --lmvz-button-border-width: 0;   --lmvz-button-border-color: transparent;   --lmvz-button-background: var(--lmvz-semantic-color-int-primary, #000000);    display: inline-flex;   align-items: center;   justify-content: center;   gap: var(--lmvz-button-gap);   padding-block: var(--lmvz-button-padding-block);   padding-inline: var(--lmvz-button-padding-inline);   border-radius: var(--lmvz-button-radius);   border: var(--lmvz-button-border-width) solid var(--lmvz-button-border-color);   background-color: var(--lmvz-button-background);   color: var(--lmvz-button-color);   cursor: pointer;   font: var(--lmvz-button-font);   text-align: center;   text-decoration: none;   white-space: nowrap;   transition:     background-color 0.15s ease,     color 0.15s ease,     border-color 0.15s ease,     box-shadow 0.15s ease; }  button > * {   font: inherit;   color: inherit; }  button:focus-visible {      outline: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-status-selected, #f1f9fe);   outline-offset: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem)); }  button:is([disabled], .disabled) {   cursor: not-allowed;   pointer-events: none;                   opacity: var(--lmvz-component-input-disabled-opacity, 40%); }  button:not([disabled]):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-hover, #2e2e2e); }  button:not([disabled]):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-primary-active, #545454); }  button.secondary {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary, #f0f0f0);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-secondary, #000000);   --lmvz-button-border-width: var(--lmvz-semantic-border-width-default, 1px);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-default, #e0e0e0); }  button.secondary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-hover, #e0e0e0);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-hover, #c7c7c7); }  button.secondary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-secondary-active, #d4d4d4);   --lmvz-button-border-color: var(--lmvz-semantic-color-border-active, #d4d4d4); }    button.tertiary {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary, #ffffff);   --lmvz-button-color: var(--lmvz-semantic-color-int-on-tertiary, #545454); }  button.tertiary:not([disabled], .disabled):hover {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-hover, #f0f0f0); }  button.tertiary:not([disabled], .disabled):active {   --lmvz-button-background: var(--lmvz-semantic-color-int-tertiary-active, #e0e0e0); }    button.small {   --lmvz-button-padding-inline: var(--lmvz-component-input-sm-padding-x, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-button-padding-block: var(--lmvz-component-input-sm-padding-y, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   --lmvz-button-gap: var(--lmvz-component-input-sm-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); }  button.large {   --lmvz-button-padding-inline: var(--lmvz-component-input-lg-padding-x, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));   --lmvz-button-padding-block: var(--lmvz-component-input-lg-padding-y, clamp(0.88rem, 0.78rem + 0.39vw, 1.25rem));   --lmvz-button-gap: var(--lmvz-component-input-lg-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   --lmvz-button-font: var(--lmvz-typography-body-lg, 400 clamp(1rem, 0.97rem + 0.13vw, 1.13rem) / 1.4     Router); }     display: flex;   min-width: var(--lmvz-other-component-card-minwidth, 20.4375rem);   max-width: var(--lmvz-other-component-card-maxwidth, 21.6875rem);   flex-direction: column;   align-items: flex-start;    border-radius: var(--lmvz-semantic-border-radius-lg, 14px);   border: var(--lmvz-semantic-border-width-default, 1px) solid var(--lmvz-semantic-color-border-default, #e0e0e0);   background: var(--lmvz-semantic-color-surface-primary, #ffffff); } *.sc-lmvz-card {   color: var(--lmvz-semantic-color-on-surface-primary, #000000);   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); } .top.sc-lmvz-card {   display: flex;   padding: var(--lmvz-dimension-8-12, clamp(0.5rem, 0.44rem + 0.26vw, 0.75rem));   flex-direction: column;   justify-content: center;   align-items: center;   align-self: stretch; } .bottom.sc-lmvz-card {   display: flex;   min-width: 150px;   padding: var(--lmvz-dimension-4-6, clamp(0.25rem, 0.22rem + 0.13vw, 0.38rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem)) var(--lmvz-dimension-10-14, clamp(0.63rem, 0.56rem + 0.26vw, 0.88rem));   flex-direction: column;   align-items: flex-start;   align-self: stretch; } .title.sc-lmvz-card {   margin: 0;   display: flex;   justify-content: center;   align-items: center;   align-self: stretch;    padding-bottom: var(--lmvz-global-s4, 4px);   overflow-wrap: break-word;   font: var(--lmvz-typography-heading-2xl, 500 clamp(2rem, 1.94rem + 0.26vw, 2.25rem) / 1.2     Router); } .description.sc-lmvz-card {   display: flex;   margin: 0;   padding-bottom: var(--lmvz-component-body-sm-padding-bottom, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   align-items: flex-start;   align-self: stretch;   white-space: pre-line;   font: var(--lmvz-typography-body-md, 400 clamp(0.88rem, 0.84rem + 0.13vw, 1rem) / 1.4     Router); } .image-wrapper.sc-lmvz-card {   aspect-ratio: 4 / 3;   width: 100%;   background-size: cover;   background-position: center;   flex: 1 0 0;   align-self: stretch;   border-radius: var(--lmvz-semantic-border-radius-md, 6px); } .actions.sc-lmvz-card {   margin-top: var(--lmvz-component-form-wrapper-gap-y, clamp(1.13rem, 0.97rem + 0.65vw, 1.75rem));   display: flex;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   align-self: stretch; } button.primary.sc-lmvz-card, lmvz-button.primary.sc-lmvz-card {   display: flex;   justify-content: center;   align-items: center;   gap: var(--lmvz-component-input-md-gap-x, clamp(0.25rem, 0.16rem + 0.39vw, 0.63rem));   flex: 1 0 0; }`;
 
 class LmvzCard {
@@ -26901,6 +27381,9 @@ class LmvzCard {
     description;
     primaryActionLabel = '';
     primaryAction;
+    get fallbackImage() {
+        return runSync(syncCreateAssetUrlSafely('card-placeholder.svg'));
+    }
     _onPrimaryClick() {
         this.primaryAction.emit();
     }
@@ -26909,9 +27392,9 @@ class LmvzCard {
     }
     render() {
         const imgStyle = {
-            backgroundImage: `url(${this.imageUrl ?? getAssetPath('./card-placeholder.svg')})`,
+            backgroundImage: `url(${this.imageUrl ?? this.fallbackImage})`,
         };
-        return (hAsync(Host, { key: 'd17230c2587b87c1fa5514875e15b7d7930857bc', role: "article" }, hAsync("div", { key: 'bf8c631ee99651a10c01774a4da20142d04342db', class: "top" }, hAsync("div", { key: 'fb8224ec00bc8e0c5b1668a6ed63e36b52a11d55', class: "image-wrapper", style: imgStyle }, hAsync("div", { key: '26c65e0c8083faec2854a332e83b5e8abaf8c2fd', class: "chip-slot" }, hAsync("slot", { key: 'b5406113b36fcb23dd08cc75e34ae64923357cd3', name: "chip" })))), hAsync("div", { key: '1eb0b6682830da00fa006fcaa9763e8d33adf446', class: "bottom" }, hAsync("header", { key: '5930f28a48304296be40fc337a6990a1444cdcdb' }, hAsync("h2", { key: '0138cdc21b5ac8b40b40988937ba24292532e069', class: "title" }, this.cardTitle)), hAsync("p", { key: '45a9e7947ae99d1db67efa4aa04c3186d02a97c7', class: "description" }, this.description), hAsync("div", { key: '940a8a5e7e38f65efa0d7bb25a56131e4456c248', class: "actions" }, hAsync("button", { key: '35b0a7ae68fb9ac8c62e181b0087a312a85da185', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), hAsync("button", { key: '6d391205d50a8ab92336bad0bd70fd24f00b5cda', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, hAsync("span", { key: 'dca656b4c1758c1fdcc3c7d971e58b6a63fcd0d1', class: "icon-placeholder" }, "..."))))));
+        return (hAsync(Host, { key: '1438354a53604954320d01652aa1d84f8712e875', role: "article" }, hAsync("div", { key: 'dcffae2c48ebf8f8769cf07c2e78806f12df6888', class: "top" }, hAsync("div", { key: 'e41e1d0aafbfc5879b86022e91958ef3373b48b2', class: "image-wrapper", style: imgStyle }, hAsync("div", { key: 'f6a1fc9706012f39aca9dd0b995290e6042e3407', class: "chip-slot" }, hAsync("slot", { key: '4e014519c147705cc30b3268d652ea6c76c749ec', name: "chip" })))), hAsync("div", { key: 'e7baf78b660e9a97edd0b6a0aa1bdb1afa593fed', class: "bottom" }, hAsync("header", { key: 'a8dad9f91df60f535725328a4901833d47652678' }, hAsync("h2", { key: '1cdbca46469750187856a46fa155128f1f8a677f', class: "title" }, this.cardTitle)), hAsync("p", { key: 'f33c2c0af86d7be31fcbd676833b27c7d06e2dd9', class: "description" }, this.description), hAsync("div", { key: 'a12595d514167fb957aac71fe3d144810b442f9d', class: "actions" }, hAsync("button", { key: '9730cedbf83599c09eedaaae43331147691486d6', class: "primary", onClick: this._onPrimaryClick.bind(this), "data-testid": "primary" }, this.primaryActionLabel), hAsync("button", { key: '48e9c511c406beb75334452769beade3dec9a3f5', class: "tertiary", "aria-label": "More actions", onClick: this._onOverflowClick }, hAsync("span", { key: '81cc1af42a15dddb9dbd4f373a6a047c2e2cd563', class: "icon-placeholder" }, "..."))))));
     }
     static get assetsDirs() { return ["../../assets"]; }
     static get style() { return lmvzCardCss(); }
@@ -27100,9 +27583,6 @@ class ResponseTextError extends TaggedError('ResponseTextError') {
     }
 }
 
-class URLCreationError extends TaggedError('URLCreationError') {
-}
-
 refined(isValidSVG, () => error('SVG data is malformed'));
 class BrandValidationError extends TaggedError('BrandValidationError') {
     constructor(error, type) {

package/package.json

@@ -2,7 +2,7 @@
   "name": "@lmvz-ds/components",
   "private": false,
   "type": "module",
-  "version": "0.12.3-alpha.3+fbf08b5",
+  "version": "0.12.3",
   "description": "The components of the design system",
   "author": "Patrick Nemenz <patrick.nemenz@adesso.at>",
   "volta": {
@@ -109,7 +109,7 @@
   },
   "scripts": {
     "start": "npm run start:integration",
-    "start:integration": "concurrently 'npm run build:css -- --watch' 'npm run build:components -- --watch'",
+    "start:integration": "concurrently 'npm run build:css -- --watch' 'npm run build:dev -- --watch'",
     "start:dev": "stencil build --watch --dev --serve --config stencil.config.dev.ts",
     "build": "npm run build:css && npm run build:components",
     "build:css": "vite build --config vite-style.config.js",
@@ -187,7 +187,7 @@
     "effect": "3.19.14"
   },
   "devDependencies": {
-    "@lmvz-ds/design-tokens": "^0.12.3-alpha.3+fbf08b5",
+    "@lmvz-ds/design-tokens": "^0.12.3",
     "@playwright/test": "^1.55.0",
     "@stencil-community/postcss": "^2.2.0",
     "@stencil/angular-output-target": "1.3.0",
@@ -212,5 +212,5 @@
     "tsx": "^4.21.0",
     "vite": "^7.3.1"
   },
-  "gitHead": "fbf08b52251c378e00c54ee2dfae0034fb5ec050"
+  "gitHead": "0c054b75ec63f244dd843d0946a7468359ee691e"
 }