@foxy.io/elements 1.14.2 → 1.15.0-beta.3

package/dist/cdn/translations/customer-portal/zh-hk.json

@@ -0,0 +1,35 @@
+{
+  "access-recovery-form": {
+    "unknown_error": "我們目前無法為此帳戶發送一次性代碼。 如果您已要求驗證碼，請等待幾分鐘後再試。"
+  },
+  "customer": {
+    "subscription-card": {
+      "spinner": {
+        "loading_empty": "沒有訂閱"
+      }
+    },
+    "transactions-table": {
+      "spinner": {
+        "loading_empty": "沒有交易"
+      }
+    },
+    "address-card": {
+      "spinner": {
+        "loading_empty": "沒有地址"
+      }
+    },
+    "customer-form": {
+      "invalid_credential_error": "密碼錯誤。 請確保您已輸入現時或臨時密碼，然後重試。",
+      "change_password_step_1": "讓我們從您現時的密碼開始。 如果您有臨時密碼，也可以使用臨時密碼。",
+      "change_password_step_2": "現在輸入一個新密碼並點擊繼續, 將更改應用到您的帳戶。",
+      "change_password_step_3": "完成！ 您現在可以使用新密碼登錄。",
+      "change_password": "更改密碼",
+      "sign_in": "繼續"
+    },
+    "payment-method-card": {
+      "spinner": {
+        "loading_empty": "沒有付款方式"
+      }
+    }
+  }
+}

package/dist/cdn/translations/shared/en.json

@@ -8,12 +8,20 @@
   "address2": "Address Line 2",
   "address_name": "Address name",
   "address_plural": "Addresses",
+  "allow": "Allow",
   "allowlist": "Allow all except",
+  "allunits_price_amount_discount_summary": "{{adjustment}}¤ each after {{from}}",
+  "allunits_price_percentage_discount_summary": "{{adjustment, percent}} after {{from}}",
+  "allunits_quantity_amount_discount_summary": "{{adjustment}}¤ each on orders of {{from}}+",
+  "allunits_quantity_percentage_discount_summary": "{{adjustment, percent}} on orders of {{from}}+",
+  "apply_taxes_before_coupon": "Apply taxes before this coupon",
+  "apply_taxes_before_coupon_explainer": "Calculate taxes before applying this coupon.",
   "attribute_plural": "Attributes",
   "back": "Back",
   "backend_developer": "Backend developer",
   "backend_developer_explainer": "Manages server-side code in PHP, Python, Ruby, etc.",
   "billing": "Billing",
+  "block": "Block",
   "blocklist": "Ban all except",
   "cache": "Cache",
   "cancel": "Cancel",
@@ -25,6 +33,8 @@
   "cart_type_default_explainer": "Default cart appearance in version 2.0",
   "cart_type_fullpage": "Full page",
   "cart_type_fullpage_explainer": "Send all customers to a full page cart while still including minicart functionality",
+  "category_restrictions": "Category restrictions",
+  "category_restrictions_helper_text": "Select which item categories this coupon can be applied to. If you’d like this coupon to be available to all items regardless of the category, keep your selection empty. All changes are saved automatically.",
   "checked_by_default": "Checked by default",
   "checkout_type": "Accounts",
   "checkout_type_account_only": "Allow customer accounts only",
@@ -33,16 +43,30 @@
   "checkout_type_guest_only": "Allow guests only",
   "checkout_type_helper_text": "If you select $t(checkout_type_guest_only), your store will not be able to use subscriptions.",
   "city": "City",
+  "clear_filters": "Clear filters",
   "client": "Client",
   "close": "Close",
   "close_icon": "Close icon",
+  "code": "Code",
+  "code_import_hint": "Paste multiple space-separated codes in the field above to add all of them at once. Importing duplicate codes clears their usage stats.",
+  "code_plural": "Codes",
+  "combinable": "Combine with other coupons",
+  "combinable_explainer": "Let customers apply this coupon when there are other coupons in the cart.",
+  "combine_with_category_discounts": "Combine with category discounts",
+  "combine_with_category_discounts_explainer": "Let customers apply this coupon when category discounts are applied to the cart.",
+  "combine_with_line_discounts": "Combine with line item discounts",
+  "combine_with_line_discounts_explainer": "Let customers apply this coupon when line item discounts are applied to the cart.",
   "company": "Company",
   "consent": "Consent",
+  "copied": "Copied",
+  "copy": "Copy",
   "country": "Country",
   "coupon_entry": "Coupon code",
+  "coupon_name_helper_text": "Coupon name is visible to the customers.",
   "create": "Create",
   "custom_config": "Custom config",
   "custom_config_helper_text": "If you have any custom values you'd like to make available to your twig template, you can add them here as a valid JSON string.",
+  "custom_discount": "Custom discount",
   "custom_fields": "Custom fields",
   "custom_fields_helper_text": "If you have information you'd like to collect from the customer on the checkout page, you can add custom form fields here which will be added to the checkout form. We recommend you follow the same HTML container structure used on other checkout fields for consistency. You can use Twig syntax here.",
   "custom_footer": "Custom footer",
@@ -55,6 +79,10 @@
   "date": "{{value, date}}",
   "date_created": "Created on",
   "date_modified": "Last updated",
+  "date_range_any": "Ongoing",
+  "date_range_complete": "{{start, date}} – {{end, date}}",
+  "date_range_from": "From {{start, date}}",
+  "date_range_until": "Until {{end, date}}",
   "day": "Day",
   "day_plural": "Days",
   "default": "Default",
@@ -66,19 +94,25 @@
   "designer": "Designer",
   "designer_explainer": "Manages appearance, art and user interface.",
   "disabled": "Disabled",
+  "discount_preset": "Discount preset",
+  "discount_summary": "{{params, discount}}",
   "display_sdta": "Display a Secure Data Transfer agreement to EU customers",
   "display_sdta_explainer": "If you have customers in the European Union, enable this feature so they can opt in to sending their data to our secure servers in the United States.",
   "display_tos_link": "Display a link to Terms & Conditions",
   "display_tos_link_explainer": "Include a checkbox to ask your customers to agree to your Terms of Service.",
+  "duplicate": "Duplicate",
   "email": "Email",
   "enable_postcode_lookup": "Offer city and state suggestions based on postcode",
   "enabled": "Enabled",
   "end_date": "End date",
   "end_subscription": "End subscription",
   "end_subscription_explainer": "Your subscription will remain active until the selected end date. You might have to resubscribe if you decide to resume this subscription later.",
+  "error": "Error",
   "expires": "Expires",
   "field": "Field",
   "field_plural": "Fields",
+  "filter": "Filter",
+  "first": "First",
   "first_name": "First name",
   "foxycomplete": "Location autocomplete",
   "foxycomplete_combobox": "Combo Box",
@@ -99,17 +133,31 @@
   "ga_account_id_explainer": "You can find the ID in the Admin section of your Analytics in Tracking info > Tracking code.",
   "ga_include_on_site": "Include via loader.js",
   "ga_include_on_site_explainer": "Enable Google Analytics on any page where the loader.js file is included.",
+  "generate": "Generate",
+  "generate_codes_done": "All done! We've added new codes for you.",
   "hidden": "Hidden",
+  "hidden_codes_explainer": "We’ve hidden some of your codes because there were too many of them. Don’t worry – we’ll import them anyway.",
+  "hidden_codes_header": "{{count}} code is hidden",
+  "hidden_codes_header_plural": "{{count}} codes are hidden",
   "hidden_fields": "Hidden fields",
   "html_template": "HTML template",
+  "import": "Import",
+  "import_codes_done": "All done! We've imported your codes into the system.",
+  "incremental_price_amount_discount_summary": "{{adjustment}}¤ each on orders of {{from}}+",
+  "incremental_price_percentage_discount_summary": "{{adjustment, percent}} on orders of {{from}}+",
+  "incremental_quantity_amount_discount_summary": "{{adjustment}}¤ each on items {{from}}+",
+  "incremental_quantity_percentage_discount_summary": "{{adjustment, percent}} on items {{from}}+",
   "invalid_credential_error": "Incorrect email or password. Please check your credentials and try again.",
   "is_defined_false": "Not defined",
   "is_defined_true": "Defined",
   "item": "Item",
   "item_plural": "Items",
+  "last": "Last",
   "last_4_digits": "Last 4 digits",
   "last_login_date": "Last login",
   "last_name": "Last name",
+  "leave_empty_for_random_codes": "Leave empty to generate completely random codes.",
+  "length": "Length",
   "load_more": "Load more",
   "loading_busy": "Loading",
   "loading_empty": "No data",
@@ -129,13 +177,17 @@
   "month_plural": "Months",
   "monthly": "Monthly",
   "monthly_plural": "Every {{count}} months",
+  "multiple_codes_allowed": "Allow multiple codes per customer",
+  "multiple_codes_allowed_explainer": "Let customers apply this coupon multiple times to the same order.",
   "name": "Name",
   "new_password": "New password",
   "new_password_format_error": "The new password you've chosen is too weak. Please enter a secure new password.",
   "new_password_required_error": "To keep your account secure, please change your password before logging in this time.",
   "newsletter_subscribe": "Allow users to sign up for your newsletter",
   "newsletter_subscribe_explainer": "This includes a checkbox on your checkout to allow customers to choose to sign up to your newsletter, available in the transaction reports, the API and webhooks.",
+  "next": "Next",
   "next_transaction_date": "Next transaction date",
+  "number_of_codes": "Number of codes",
   "open_icon": "Open icon",
   "operator_equal": "Equal",
   "operator_greaterthan": "Greater than",
@@ -145,20 +197,32 @@
   "operator_lessthan": "Less than",
   "operator_lessthanorequal": "Less than or equal",
   "operator_not": "Not equal",
+  "option_plural": "Options",
   "optional": "Optional",
   "or": "Or",
+  "ordinal_few": "rd",
+  "ordinal_many": "th",
+  "ordinal_one": "st",
+  "ordinal_other": "th",
+  "ordinal_two": "nd",
+  "ordinal_zero": "th",
+  "pagination": "{{from}}-{{to}} out of {{total}}",
   "password": "Password",
   "payment_method_plural": "Payment methods",
   "percent": "{{fraction, percent}}",
   "phone": "Phone",
   "postal_code": "Postal code",
+  "prefix": "Prefix",
   "preview": "Preview",
+  "previous": "Previous",
   "price": "{{amount, price}}",
   "price_recurring": "{{amount, price}} $t(frequency, { \"count\": \"{{count}}\", \"units\": \"{{units}}\" })",
   "price_twice_a_month": "{{amount, price}} $t(twice_a_month)",
   "product_category": "Product category",
   "product_code": "Product code",
   "product_options": "Product options",
+  "product_restrictions": "Product restrictions",
+  "product_restrictions_explainer": "If you want to limit which products can use this coupon, you can enter full product codes or partial product codes using * as a wild card at the beginning or end of the value. So abc123, fun_*, *-small would match abc123, fun_ and fun_times, and example-small. It wouldn't match abc12, abc1234, fun, or good-smalls.",
   "product_weight": "Product weight",
   "query_builder_group": "Group of filters",
   "query_builder_rule": "Filter",
@@ -169,20 +233,33 @@
   "recover_access_hint": "Enter your email and we'll send you a temporary password",
   "recover_access_success": "Done! Please check your email for further instructions.",
   "region": "Region",
+  "repeat_price_amount_discount_summary": "for each {{from}}, {{adjustment}}¤ on the next item",
+  "repeat_price_percentage_discount_summary": "for each {{from}}, {{adjustment, percent}} on the next item",
+  "repeat_quantity_amount_discount_summary": "{{adjustment}}¤ on each {{from, ordinal}} item",
+  "repeat_quantity_percentage_discount_summary": "{{adjustment, percent}} on each {{from, ordinal}} item",
   "request": "Request",
   "require_consent": "Require consent to proceed",
   "required": "Required",
+  "rule_plural": "Rules",
   "same_as_shipping": "Same as shipping",
   "save": "Save",
+  "select": "Select...",
+  "set_time_constraints": "Set time constraints",
+  "set_time_constraints_explainer": "Limit when your customers can apply this coupon.",
   "shipping": "Shipping",
   "show_country_flags": "Show country flags",
   "show_on_receipt": "Show on receipt",
   "sign_in": "Sign in",
   "sign_in_hint": "Please enter your email and password",
+  "single_price_amount_discount_summary": "{{adjustment}}¤ after {{from}}",
+  "single_price_percentage_discount_summary": "{{adjustment, percent}} after {{from}}",
+  "single_quantity_amount_discount_summary": "{{adjustment}}¤ after {{from}} items",
+  "single_quantity_percentage_discount_summary": "{{adjustment, percent}} after {{from}} items",
   "sio_account_id": "Write Key",
   "sio_account_id_explainer": "You can find the write key in your project set up guide or in the source’s settings.",
   "skip_csc_for_saved": "Skip CSC for saved cards",
   "skip_csc_for_sso": "Skip CSC for single sign-on",
+  "start_date": "Start date",
   "sub_enddate": "Subscription end date",
   "sub_frequency": "Subscription frequency",
   "sub_nextdate": "Subscription next date",
@@ -219,6 +296,14 @@
   "template_url": "From URL",
   "template_url_explainer": "Fetch the template from a public URL",
   "text_template": "Text template",
+  "tier": "Tier",
+  "tier_allunits": "price of each item",
+  "tier_by": "by",
+  "tier_if": "if",
+  "tier_incremental": "price of additional items",
+  "tier_repeat": "price of next item",
+  "tier_single": "order total",
+  "tier_then": "then",
   "time": "{{value, time}}",
   "transaction": "Transaction",
   "transaction_approved": "Approved",
@@ -242,16 +327,36 @@
   "type_any": "Field of unknown type",
   "type_attribute": "Key-value resource",
   "type_date": "Date field",
+  "type_here": "Type here...",
   "type_number": "Numeric field",
   "type_string": "Text field",
   "undo_cancel": "Review",
   "undo_confirm": "Discard",
   "undo_header": "Unsaved changes",
   "undo_message": "Looks like you didn't save your changes! What would you like to do with them?",
+  "unique": "Unique",
+  "unknown": "Unknown",
   "unknown_error": "An unknown error has occured. Please try again later.",
+  "unlimited": "Unlimited",
   "update": "Update",
   "update_billing": "Update billing",
   "update_items": "Edit",
+  "url_parameter": "URL parameter",
+  "used_codes": "Codes used",
+  "uses_count": "{{count}} uses",
+  "uses_per_coupon": "Uses per coupon",
+  "uses_per_coupon_code": "Uses per code",
+  "uses_per_coupon_code_summary": "Each coupon code can be used only one time.",
+  "uses_per_coupon_code_summary_0": "Each coupon code can be used unlimited times.",
+  "uses_per_coupon_code_summary_plural": "Each coupon code can be used only {{count}} times.",
+  "uses_per_coupon_summary": "Only the first customer can use this coupon.",
+  "uses_per_coupon_summary_0": "All customers can use this coupon.",
+  "uses_per_coupon_summary_plural": "Only the first {{count}} customers can use this coupon.",
+  "uses_per_customer": "Uses per customer",
+  "uses_per_customer_summary": "Customers can use this coupon for one order only.",
+  "uses_per_customer_summary_0": "Customers can use this coupon for as many orders as they like.",
+  "uses_per_customer_summary_plural": "Customers can use this coupon for {{count}} orders only.",
+  "uses_to_total_count": "{{count}}/{{total}} uses",
   "v8n_format_error": "Invalid format",
   "v8n_invalid_email": "Invalid email",
   "v8n_required": "Required",

package/dist/cdn/translations/shared/zh-hk.json

@@ -0,0 +1,179 @@
+{
+  "add_or_clause": "加入 「或」 指令",
+  "add_value": "輸入值",
+  "address1": "地址第一行",
+  "address2": "地址第二行",
+  "address_name": "地址名稱",
+  "address_plural": "地址",
+  "attribute_plural": "屬性",
+  "back": "回去",
+  "backend_developer": "後端開發人員",
+  "backend_developer_explainer": "用 PHP、Python、Ruby 等管理服務器端代碼。",
+  "cancel": "取消",
+  "city": "城市",
+  "client": "客戶",
+  "close": "關閉",
+  "company": "公司",
+  "country": "國家",
+  "create": "建立",
+  "customer": "顧客",
+  "daily": "每天",
+  "daily_plural": "每 {{count}} 天",
+  "date": "{{value, date}}",
+  "date_created": "建立於",
+  "date_modified": "最近更新時間",
+  "day": "日",
+  "day_plural": "日",
+  "default_billing_address": "預設賬單地址",
+  "default_shipping_address": "預設送貨地址",
+  "delete": "刪除",
+  "delete_prompt": "此資源將被永久刪除。你確定嗎？",
+  "designer": "設計師",
+  "designer_explainer": "管理外觀、藝術和用戶界面。",
+  "email": "電子郵件",
+  "end_date": "結束日期",
+  "end_subscription": "結束訂閱",
+  "end_subscription_explainer": "直到選定的結束日期前，您的訂閱將一直有效。如果您稍後決定恢復此訂閱，則需要重新訂閱.",
+  "expires": "過期日期為",
+  "field": "表格域",
+  "first_name": "名",
+  "fraud_risk": "欺詐風險： {{ score }}",
+  "frequency": "$t({{units}}, { \"count\": {{count}} })",
+  "frequency_label": "頻率",
+  "frequency_plural": "$t({{units}}, { \"count\": {{count}} })",
+  "frontend_developer": "前端開發人員",
+  "frontend_developer_explainer": "以 JS、CSS、HTML 等形式管理客戶端代碼。",
+  "full_address": "{{address1}} {{address2}} {{city}} {{region}} {{postal_code}}",
+  "full_name": "{{last_name}} {{first_name}}",
+  "invalid_credential_error": "錯誤的電子郵件或密碼。請檢查您的輸入，然後重試。",
+  "is_defined_false": "沒有定義",
+  "is_defined_true": "有定義",
+  "item": "項目",
+  "item_plural": "項目",
+  "last_4_digits": "最後 4 位數字",
+  "last_login_date": "上次登錄",
+  "last_name": "姓",
+  "load_more": "加載更多",
+  "loading_busy": "載入中",
+  "loading_empty": "沒有數據",
+  "loading_end": "沒有更多數據",
+  "loading_error": "加載失敗",
+  "loading_paused": "暫停",
+  "merchant": "商人",
+  "merchant_explainer": "管理項目、財務和這家商店整體營運。",
+  "mfa_remember_device": "信任這個裝置",
+  "mfa_remember_device_hint": "以後從此裝置登錄時不再需要驗證碼",
+  "mfa_totp_code": "一次性代碼",
+  "mfa_totp_code_hint": "使用您的身份驗證器應用軟件, 掃描下面的圖像以接收驗證碼",
+  "mfa_totp_code_invalid_error": "您輸入的一次性代碼無效。請再試一次。",
+  "month": "月",
+  "month_plural": "月",
+  "monthly": "每月",
+  "monthly_plural": "每 {{count}} 個月",
+  "name": "姓名",
+  "new_password": "新密碼",
+  "new_password_format_error": "您選擇的新密碼太弱。請輸入一個較安全的新密碼。",
+  "new_password_required_error": "為確保您的帳戶安全，請在此次登錄前更改您的密碼。",
+  "next_transaction_date": "下一個交易日期",
+  "operator_equal": "等於",
+  "operator_greaterthan": "大於",
+  "operator_greaterthanorequal": "等於或大於",
+  "operator_in": "屬於",
+  "operator_isdefined": "被定義為",
+  "operator_lessthan": "小於",
+  "operator_lessthanorequal": "等於或小於",
+  "operator_not": "不等於",
+  "or": "或",
+  "password": "密碼",
+  "payment_method_plural": "支付方式",
+  "percent": "{{fraction, percent}}",
+  "phone": "電話",
+  "postal_code": "郵政編碼",
+  "preview": "預覽",
+  "price": "{{amount, price}}",
+  "price_recurring": "{{amount, price}} $t(frequency, { \"count\": \"{{count}}\", \"units\": \"{{units}}\" })",
+  "price_twice_a_month": "{{amount, price}} $t(twice_a_month)",
+  "query_builder_group": "過濾組別",
+  "query_builder_rule": "過濾",
+  "range_from": "由",
+  "range_to": "至",
+  "receipt": "收據",
+  "recover_access": "獲取一次性代碼",
+  "recover_access_hint": "輸入您的電子郵件，我們將向您發送一個臨時密碼。",
+  "recover_access_success": "完成！請檢查您的電子郵件以獲取進一步說明。",
+  "region": "地區",
+  "request": "要求",
+  "save": "儲存",
+  "show_on_receipt": "在收據上顯示",
+  "sign_in": "登入",
+  "sign_in_hint": "請輸入您的電子郵件和密碼",
+  "subscription_active": "下次付款在 {{date, date}}",
+  "subscription_cancelled": "於 {{date, date}} 結束",
+  "subscription_failed": "{{date, date}} 付款失敗",
+  "subscription_inactive": "閒置",
+  "subscription_plural": "訂閱",
+  "subscription_will_be_cancelled": "於 {{date, date}} 結束",
+  "tax_apply_to_shipping": "對運費收取稅金",
+  "tax_apply_to_shipping_explainer": "勾選此處以對運費收取稅金",
+  "tax_country": "國家稅",
+  "tax_exempt_all_customer_tax_ids": "豁免所有具有稅務編號的客戶",
+  "tax_exempt_all_customer_tax_ids_explainer": "勾選此處以跳過對存了稅務編號的客戶收稅",
+  "tax_global": "全球稅",
+  "tax_id": "稅務編號",
+  "tax_local": "本地稅",
+  "tax_rate": "稅率 (%)",
+  "tax_rate_provider": "稅率提供者",
+  "tax_rate_provider_default": "預設 (Thomson Reuters; 其他)",
+  "tax_rate_provider_none": "沒有(自定率)",
+  "tax_region": "地區稅",
+  "tax_union": "歐盟稅",
+  "tax_use_origin_rates": "使用起源地稅率",
+  "tax_use_origin_rates_explainer": "勾選此處以使用您所在國家的稅率,無論客戶位於何處",
+  "time": "{{value, time}}",
+  "transaction": "交易",
+  "transaction_approved": "得到正式認可的",
+  "transaction_authorized": "已授權",
+  "transaction_captured": "已截獲",
+  "transaction_completed": "已完成",
+  "transaction_declined": "被拒絕",
+  "transaction_pending": "代辦中",
+  "transaction_plural": "交易",
+  "transaction_refunded": "已退款",
+  "transaction_rejected": "被拒絕",
+  "transaction_summary": "交易總結",
+  "transaction_summary_plural": "交易總結",
+  "transaction_verified": "已驗證",
+  "transaction_voided": "已作廢",
+  "twice_a_month": "一個月兩次",
+  "type": "格式類型",
+  "type_any": "不明類型的項目",
+  "type_attribute": "鍵-值對資源",
+  "type_date": "日期",
+  "type_number": "數字",
+  "type_string": "文字",
+  "undo_cancel": "審核",
+  "undo_confirm": "丟棄",
+  "undo_header": "未保存的更改",
+  "undo_message": "看起來您沒有保存更改！你想如何處理它們？",
+  "unknown_error": "發生未知錯誤。請稍後再試。",
+  "update": "更新",
+  "update_billing": "更新賬單",
+  "update_items": "編輯",
+  "v8n_format_error": "無效的格式",
+  "v8n_invalid_email": "電子郵件地址不合規",
+  "v8n_required": "必需的",
+  "v8n_too_long": "太長",
+  "value": "值",
+  "visibility": "能見度",
+  "visibility_private": "只有我",
+  "visibility_public": "所有人",
+  "visibility_restricted": "商店管理員",
+  "week": "星期",
+  "week_plural": "星期",
+  "weekly": "每星期",
+  "weekly_plural": "每 {{count}} 星期",
+  "year": "年",
+  "year_plural": "年",
+  "yearly": "每年",
+  "yearly_plural": "每 {{count}} 年"
+}

package/dist/elements/private/Checkbox/Checkbox.js

@@ -22,13 +22,25 @@ export class Checkbox extends ThemeableMixin(LitElement) {
     static get styles() {
         return [
             super.styles,
-            css `.ml-xxl{
-  margin-left:calc(var(--lumo-space-m) + 1.125rem);
+            css `:host{
+  --check-size:1.125rem;
+}
+
+label{
+  margin:calc(((1rem * var(--lumo-line-height-s)) - var(--check-size)) / -2) 0;
+}
+
+label > :first-child{
+  height:calc(1rem * var(--lumo-line-height-s));
+}
+
+.ml-xxl{
+  margin-left:calc(var(--lumo-space-m) + var(--check-size));
 }
 
 .check{
-  height:1.125rem;
-  width:1.125rem;
+  height:var(--check-size);
+  width:var(--check-size);
 }
       `,
         ];
@@ -37,15 +49,16 @@ export class Checkbox extends ThemeableMixin(LitElement) {
         return html `
       <label
         class=${classMap({
-            'flex group transition-colors': true,
+            'flex items-start group transition-colors': true,
             'cursor-default': this.disabled || this.readonly,
             'text-disabled': this.disabled,
             'text-secondary': this.readonly,
             'cursor-pointer': !this.disabled,
         })}
       >
-        <div
-          class=${classMap({
+        <div class="flex items-center">
+          <div
+            class=${classMap({
             'flex-shrink-0 check transition-colors rounded-s border': true,
             'focus-within-shadow-outline': true,
             'bg-primary text-primary-contrast': !this.readonly && this.checked,
@@ -55,34 +68,35 @@ export class Checkbox extends ThemeableMixin(LitElement) {
             'text-secondary bg-contrast-20': !this.readonly && !this.checked,
             'group-hover-bg-contrast-30': !this.readonly && !this.checked,
         })}
-        >
-          <iron-icon
-            icon="lumo:checkmark"
-            class=${classMap({
+          >
+            <iron-icon
+              icon="lumo:checkmark"
+              class=${classMap({
             'block w-full h-full transition-transform transform': true,
             'scale-100': this.checked,
             'scale-0': !this.checked,
         })}
-          >
-          </iron-icon>
+            >
+            </iron-icon>
 
-          <input
-            type="checkbox"
-            class="sr-only"
-            .checked=${this.checked}
-            ?disabled=${this.disabled}
-            data-testid="input"
-            @change=${(evt) => {
+            <input
+              type="checkbox"
+              class="sr-only"
+              .checked=${this.checked}
+              ?disabled=${this.disabled}
+              data-testid="input"
+              @change=${(evt) => {
             if (this.readonly)
                 return evt.preventDefault();
             evt.stopPropagation();
             this.checked = !this.checked;
             this.dispatchEvent(new CheckboxChangeEvent(this.checked));
         }}
-          />
+            />
+          </div>
         </div>
 
-        <div class="flex-1 font-lumo leading-m -mt-xs ml-m">
+        <div class="flex-1 font-lumo leading-s ml-m">
           <slot></slot>
         </div>
       </label>

package/dist/elements/private/Checkbox/Checkbox.js.map

@@ -1 +1 @@
-{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/elements/private/Checkbox/Checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,kCAAkC,CAAC;AAE1C,OAAO,EAEL,UAAU,EAGV,GAAG,EACH,IAAI,GACL,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,mBAAmB,EAAE,iCAA8B;AAC5D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,OAAO,QAAS,SAAQ,cAAc,CAAC,UAAU,CAAC;IAAxD;;QA0BE,aAAQ,GAAG,KAAK,CAAC;QAEjB,aAAQ,GAAG,KAAK,CAAC;QAEjB,YAAO,GAAG,KAAK,CAAC;IAkElB,CAAC;IA/FC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC3B,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,GAAG;;;;;;;;OASF;SACF,CAAC;IACJ,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,8BAA8B,EAAE,IAAI;YACpC,gBAAgB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChD,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,gBAAgB,EAAE,CAAC,IAAI,CAAC,QAAQ;SACjC,CAAC;;;kBAGQ,QAAQ,CAAC;YACf,wDAAwD,EAAE,IAAI;YAC9D,6BAA6B,EAAE,IAAI;YACnC,kCAAkC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YAClE,kCAAkC,EAAE,IAAI,CAAC,QAAQ;YACjD,oBAAoB,EAAE,CAAC,IAAI,CAAC,QAAQ;YACpC,YAAY,EAAE,IAAI,CAAC,QAAQ;YAC3B,+BAA+B,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO;YAChE,4BAA4B,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO;SAC9D,CAAC;;;;oBAIQ,QAAQ,CAAC;YACf,oDAAoD,EAAE,IAAI;YAC1D,WAAW,EAAE,IAAI,CAAC,OAAO;YACzB,SAAS,EAAE,CAAC,IAAI,CAAC,OAAO;SACzB,CAAC;;;;;;;uBAOS,IAAI,CAAC,OAAO;wBACX,IAAI,CAAC,QAAQ;;sBAEf,CAAC,GAAU,EAAE,EAAE;YACvB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO,GAAG,CAAC,cAAc,EAAE,CAAC;YAE/C,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5D,CAAC;;;;;;;;;;gBAUG,QAAQ,CAAC;YACf,oCAAoC,EAAE,IAAI;YAC1C,eAAe,EAAE,IAAI,CAAC,QAAQ;SAC/B,CAAC;;;;KAIL,CAAC;IACJ,CAAC;CACF","sourcesContent":["import '@polymer/iron-icon';\nimport '@vaadin/vaadin-lumo-styles/icons';\n\nimport {\n  CSSResultArray,\n  LitElement,\n  PropertyDeclarations,\n  TemplateResult,\n  css,\n  html,\n} from 'lit-element';\n\nimport { CheckboxChangeEvent } from './CheckboxChangeEvent';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { classMap } from '../../../utils/class-map';\n\nexport class Checkbox extends ThemeableMixin(LitElement) {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      readonly: { type: Boolean },\n      disabled: { type: Boolean },\n      checked: { type: Boolean },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        .ml-xxl {\n          margin-left: calc(var(--lumo-space-m) + 1.125rem);\n        }\n\n        .check {\n          height: 1.125rem;\n          width: 1.125rem;\n        }\n      `,\n    ];\n  }\n\n  readonly = false;\n\n  disabled = false;\n\n  checked = false;\n\n  render(): TemplateResult {\n    return html`\n      <label\n        class=${classMap({\n          'flex group transition-colors': true,\n          'cursor-default': this.disabled || this.readonly,\n          'text-disabled': this.disabled,\n          'text-secondary': this.readonly,\n          'cursor-pointer': !this.disabled,\n        })}\n      >\n        <div\n          class=${classMap({\n            'flex-shrink-0 check transition-colors rounded-s border': true,\n            'focus-within-shadow-outline': true,\n            'bg-primary text-primary-contrast': !this.readonly && this.checked,\n            'border-dashed border-contrast-30': this.readonly,\n            'border-transparent': !this.readonly,\n            'opacity-50': this.disabled,\n            'text-secondary bg-contrast-20': !this.readonly && !this.checked,\n            'group-hover-bg-contrast-30': !this.readonly && !this.checked,\n          })}\n        >\n          <iron-icon\n            icon=\"lumo:checkmark\"\n            class=${classMap({\n              'block w-full h-full transition-transform transform': true,\n              'scale-100': this.checked,\n              'scale-0': !this.checked,\n            })}\n          >\n          </iron-icon>\n\n          <input\n            type=\"checkbox\"\n            class=\"sr-only\"\n            .checked=${this.checked}\n            ?disabled=${this.disabled}\n            data-testid=\"input\"\n            @change=${(evt: Event) => {\n              if (this.readonly) return evt.preventDefault();\n\n              evt.stopPropagation();\n              this.checked = !this.checked;\n              this.dispatchEvent(new CheckboxChangeEvent(this.checked));\n            }}\n          />\n        </div>\n\n        <div class=\"flex-1 font-lumo leading-m -mt-xs ml-m\">\n          <slot></slot>\n        </div>\n      </label>\n\n      <div\n        class=${classMap({\n          'font-lumo ml-xxl transition-colors': true,\n          'text-disabled': this.disabled,\n        })}\n      >\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  }\n}\n"]}
+{"version":3,"file":"Checkbox.js","sourceRoot":"","sources":["../../../../src/elements/private/Checkbox/Checkbox.ts"],"names":[],"mappings":"AAAA,OAAO,oBAAoB,CAAC;AAC5B,OAAO,kCAAkC,CAAC;AAE1C,OAAO,EAEL,UAAU,EAGV,GAAG,EACH,IAAI,GACL,MAAM,aAAa,CAAC;AAErB,OAAO,EAAE,mBAAmB,EAAE,iCAA8B;AAC5D,OAAO,EAAE,cAAc,EAAE,qCAAkC;AAC3D,OAAO,EAAE,QAAQ,EAAE,oCAAiC;AAEpD,MAAM,OAAO,QAAS,SAAQ,cAAc,CAAC,UAAU,CAAC;IAAxD;;QAsCE,aAAQ,GAAG,KAAK,CAAC;QAEjB,aAAQ,GAAG,KAAK,CAAC;QAEjB,YAAO,GAAG,KAAK,CAAC;IAoElB,CAAC;IA7GC,MAAM,KAAK,UAAU;QACnB,OAAO;YACL,GAAG,KAAK,CAAC,UAAU;YACnB,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC3B,QAAQ,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;YAC3B,OAAO,EAAE,EAAE,IAAI,EAAE,OAAO,EAAE;SAC3B,CAAC;IACJ,CAAC;IAED,MAAM,KAAK,MAAM;QACf,OAAO;YACL,KAAK,CAAC,MAAM;YACZ,GAAG;;;;;;;;;;;;;;;;;;;;OAqBF;SACF,CAAC;IACJ,CAAC;IAQD,MAAM;QACJ,OAAO,IAAI,CAAA;;gBAEC,QAAQ,CAAC;YACf,0CAA0C,EAAE,IAAI;YAChD,gBAAgB,EAAE,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,QAAQ;YAChD,eAAe,EAAE,IAAI,CAAC,QAAQ;YAC9B,gBAAgB,EAAE,IAAI,CAAC,QAAQ;YAC/B,gBAAgB,EAAE,CAAC,IAAI,CAAC,QAAQ;SACjC,CAAC;;;;oBAIU,QAAQ,CAAC;YACf,wDAAwD,EAAE,IAAI;YAC9D,6BAA6B,EAAE,IAAI;YACnC,kCAAkC,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,IAAI,CAAC,OAAO;YAClE,kCAAkC,EAAE,IAAI,CAAC,QAAQ;YACjD,oBAAoB,EAAE,CAAC,IAAI,CAAC,QAAQ;YACpC,YAAY,EAAE,IAAI,CAAC,QAAQ;YAC3B,+BAA+B,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO;YAChE,4BAA4B,EAAE,CAAC,IAAI,CAAC,QAAQ,IAAI,CAAC,IAAI,CAAC,OAAO;SAC9D,CAAC;;;;sBAIQ,QAAQ,CAAC;YACf,oDAAoD,EAAE,IAAI;YAC1D,WAAW,EAAE,IAAI,CAAC,OAAO;YACzB,SAAS,EAAE,CAAC,IAAI,CAAC,OAAO;SACzB,CAAC;;;;;;;yBAOS,IAAI,CAAC,OAAO;0BACX,IAAI,CAAC,QAAQ;;wBAEf,CAAC,GAAU,EAAE,EAAE;YACvB,IAAI,IAAI,CAAC,QAAQ;gBAAE,OAAO,GAAG,CAAC,cAAc,EAAE,CAAC;YAE/C,GAAG,CAAC,eAAe,EAAE,CAAC;YACtB,IAAI,CAAC,OAAO,GAAG,CAAC,IAAI,CAAC,OAAO,CAAC;YAC7B,IAAI,CAAC,aAAa,CAAC,IAAI,mBAAmB,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC,CAAC;QAC5D,CAAC;;;;;;;;;;;gBAWC,QAAQ,CAAC;YACf,oCAAoC,EAAE,IAAI;YAC1C,eAAe,EAAE,IAAI,CAAC,QAAQ;SAC/B,CAAC;;;;KAIL,CAAC;IACJ,CAAC;CACF","sourcesContent":["import '@polymer/iron-icon';\nimport '@vaadin/vaadin-lumo-styles/icons';\n\nimport {\n  CSSResultArray,\n  LitElement,\n  PropertyDeclarations,\n  TemplateResult,\n  css,\n  html,\n} from 'lit-element';\n\nimport { CheckboxChangeEvent } from './CheckboxChangeEvent';\nimport { ThemeableMixin } from '../../../mixins/themeable';\nimport { classMap } from '../../../utils/class-map';\n\nexport class Checkbox extends ThemeableMixin(LitElement) {\n  static get properties(): PropertyDeclarations {\n    return {\n      ...super.properties,\n      readonly: { type: Boolean },\n      disabled: { type: Boolean },\n      checked: { type: Boolean },\n    };\n  }\n\n  static get styles(): CSSResultArray {\n    return [\n      super.styles,\n      css`\n        :host {\n          --check-size: 1.125rem;\n        }\n\n        label {\n          margin: calc(((1rem * var(--lumo-line-height-s)) - var(--check-size)) / -2) 0;\n        }\n\n        label > :first-child {\n          height: calc(1rem * var(--lumo-line-height-s));\n        }\n\n        .ml-xxl {\n          margin-left: calc(var(--lumo-space-m) + var(--check-size));\n        }\n\n        .check {\n          height: var(--check-size);\n          width: var(--check-size);\n        }\n      `,\n    ];\n  }\n\n  readonly = false;\n\n  disabled = false;\n\n  checked = false;\n\n  render(): TemplateResult {\n    return html`\n      <label\n        class=${classMap({\n          'flex items-start group transition-colors': true,\n          'cursor-default': this.disabled || this.readonly,\n          'text-disabled': this.disabled,\n          'text-secondary': this.readonly,\n          'cursor-pointer': !this.disabled,\n        })}\n      >\n        <div class=\"flex items-center\">\n          <div\n            class=${classMap({\n              'flex-shrink-0 check transition-colors rounded-s border': true,\n              'focus-within-shadow-outline': true,\n              'bg-primary text-primary-contrast': !this.readonly && this.checked,\n              'border-dashed border-contrast-30': this.readonly,\n              'border-transparent': !this.readonly,\n              'opacity-50': this.disabled,\n              'text-secondary bg-contrast-20': !this.readonly && !this.checked,\n              'group-hover-bg-contrast-30': !this.readonly && !this.checked,\n            })}\n          >\n            <iron-icon\n              icon=\"lumo:checkmark\"\n              class=${classMap({\n                'block w-full h-full transition-transform transform': true,\n                'scale-100': this.checked,\n                'scale-0': !this.checked,\n              })}\n            >\n            </iron-icon>\n\n            <input\n              type=\"checkbox\"\n              class=\"sr-only\"\n              .checked=${this.checked}\n              ?disabled=${this.disabled}\n              data-testid=\"input\"\n              @change=${(evt: Event) => {\n                if (this.readonly) return evt.preventDefault();\n\n                evt.stopPropagation();\n                this.checked = !this.checked;\n                this.dispatchEvent(new CheckboxChangeEvent(this.checked));\n              }}\n            />\n          </div>\n        </div>\n\n        <div class=\"flex-1 font-lumo leading-s ml-m\">\n          <slot></slot>\n        </div>\n      </label>\n\n      <div\n        class=${classMap({\n          'font-lumo ml-xxl transition-colors': true,\n          'text-disabled': this.disabled,\n        })}\n      >\n        <slot name=\"content\"></slot>\n      </div>\n    `;\n  }\n}\n"]}

package/dist/elements/private/EditableList/EditableList.d.ts

@@ -0,0 +1,20 @@
+import { LitElement, PropertyDeclarations, TemplateResult } from 'lit-element';
+declare const EditableList_base: typeof LitElement & {
+    styles: import("lit-element").CSSResultArray;
+} & import("lit-element").Constructor<import("../../../mixins/configurable").ConfigurableMixinHost> & import("lit-element").Constructor<import("../../../mixins/translatable").TranslatableMixinHost> & {
+    defaultNS: string;
+};
+export declare class EditableList extends EditableList_base {
+    static get properties(): PropertyDeclarations;
+    options: {
+        label?: string;
+        value: string;
+    }[];
+    items: {
+        label?: string | TemplateResult;
+        value: string;
+    }[];
+    private __newItem;
+    render(): TemplateResult;
+}
+export {};