Merge branch 'dev' of https:/skeletonlabs/skeleton into dev

skeletonlabs · Jan 16, 2024 · ac6cb7c · ac6cb7c
2 parents 8878b1c + afe8969
commit ac6cb7c
Show file tree

Hide file tree

Showing 3 changed files with 23 additions and 14 deletions.
diff --git a/sites/skeleton.dev/src/routes/(inner)/components/steppers/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/components/steppers/+page.svelte
@@ -182,10 +182,13 @@
  <CodeBlock
  language="html"
  code={`
-<!-- French: Étape 1, Étape 2, ... -->
-<Step stepTerm='Étape'>...</Step>\n
-<!-- Spanish: Paso 1, Paso 2, ... -->
-<Step stepTerm='Paso'>...</Step>
+<!-- German: Schritt 1, Schritt 2, ... This will override the stepTerm in the Step Counter -->
+<Stepper stepTerm="Schritt">
+ <!-- French: Étape 1, Étape 2, ... -->
+ <Step stepTerm='Étape'>...</Step>
+ <!-- Spanish: Paso 1, Paso 2, ... -->
+ <Step stepTerm='Paso'>...</Step>
+</Stepper>
  `}
  />
  <p>

diff --git a/sites/skeleton.dev/src/routes/(inner)/elements/chat/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/elements/chat/+page.svelte
@@ -43,7 +43,7 @@
  { id: 4, avatar: 24, name: 'Lara' },
  { id: 5, avatar: 9, name: 'Melissa' }
  ];
- let currentPerson: Person = people[0];
+ let currentPersonId: number = people[0].id;
 
  // Messages
  let messageFeed: MessageFeed[] = [
@@ -144,16 +144,22 @@
  <!-- List -->
  <div class="p-4 space-y-4 overflow-y-auto">
  <small class="opacity-50">Contacts</small>
- <ListBox active="variant-filled-primary">
+ <div class="flex flex-col space-y-1">
  {#each people as person}
- <ListBoxItem bind:group={currentPerson} name="people" value={person}>
- <svelte:fragment slot="lead">
- <Avatar src="https://i.pravatar.cc/?img={person.avatar}" width="w-8" />
- </svelte:fragment>
- {person.name}
- </ListBoxItem>
+ <button
+ type="button"
+ class="btn w-full flex items-center space-x-4 {person.id === currentPersonId
+ ? 'variant-filled-primary'
+ : 'bg-surface-hover-token'}"
+ on:click={() => (currentPersonId = person.id)}
+ >
+ <Avatar src="https://i.pravatar.cc/?img={person.avatar}" width="w-8" />
+ <span class="flex-1 text-start">
+ {person.name}
+ </span>
+ </button>
  {/each}
- </ListBox>
+ </div>
  </div>
  <!-- Footer -->
  <!-- <footer class="border-t border-surface-500/30 p-4">(footer)</footer> -->

diff --git a/sites/skeleton.dev/src/routes/(inner)/utilities/lightswitches/+page.svelte b/sites/skeleton.dev/src/routes/(inner)/utilities/lightswitches/+page.svelte
@@ -39,7 +39,7 @@
  <section class="space-y-4">
  <h2 class="h2">Strategy: Class</h2>
  <p>
- We recommend this approach for most users. Please note the Lightswitch copmonent must be present on page load in order to operate.
+ We recommend this approach for most users. Please note the Lightswitch component must be present on page load in order to operate.
  For best results, insert this in a fixed element that appears on every page.
  </p>
  <CodeBlock